=====Jonah default CSS===== The following is the default CSS code contained in Jonah stories, which you, the story author, may accompany with your own [[stylesheet]]s' CSS. ====Base CSS==== This is fundamental CSS which provides a base page structure to the story. Notably, it places the Bookmark and Rewind links next to the passages' titles, allows passages to be organised vertically as they are added, and places the credits byline at the bottom. #passages { position:relative; padding-bottom: 12em; } .content a { color: #4d6ad8; } a.internalLink, a.externalLink, a.back, a.return, [data-passage] { cursor: pointer; } a.brokenLink { background-color: red; color: black; } .marked { background-color: pink; margin-right: 12px; } .marked[title] { cursor: help; } #floater { position: fixed; right: 0; top: 0; z-index: 5; background-color: #fff; } .toolbar { padding: 0; visibility: hidden; } .toolbar a { cursor:pointer; } .passage:hover .toolbar { visibility: visible; } .passage li[data-bullet] { list-style-type: none; } .passage li[data-bullet]:before { content: attr(data-bullet); position: relative; left: -1em; } .toolbar a { margin-left: 12px; } #storeArea { display: none; } img { vertical-align:bottom; } #noscript { font-size: 120%; font-weight: bold; } #loadingbar { position:fixed; top:0; left:0; border-top: solid #4d6ad8 6px; transition: width 0.5s; } ====Default CSS==== This CSS completes the default Jonah look-and-feel. This code is removed if you select "Don't use the Story Format's default CSS" in [[StorySettings]], or if the words "blank stylesheet" appear anywhere within a comment in your story's stylesheets, body { font-family: Verdana,sans-serif; font-size: 62.5%; margin: 0; background-color: #f8f8f8; color: #303030; text-align: center; } h1,h2,h3 { color: #000; font-weight: normal; text-align: center; } #content1 { text-align: left; } h1 { font-size: 4em; line-height: 1.2em; margin-bottom: 0; margin-top: 1em; } h2 { font-size: 1.4em; font-style: italic; margin-top: 1em; } h3 { font-size: 1.3em; margin-bottom: 5em; margin-top: .8em; } .passage { background-color: #f8f8f8; font-size: 1.3em; line-height: 175%; margin-bottom: 2em; } .content a { font-weight: bold; text-decoration: none; } .content a:hover { text-decoration: underline; color: #8ea6ff; } .passage:not(:last-child):not(:hover) { opacity: 0.4; transition: 0.5s; -webkit-transition: 0.5s; } .passage center { max-width:50%; margin:auto; } input, button { font-size: 1.2em; } button { padding: 0.2em 0.8em; } input[type=text] { width: 20%; } .toolbar a { color: #999; text-decoration: none; } .toolbar a:hover { text-decoration: underline; color: #8ea6ff; } .title { color: #000; font: bold 1.4em Verdana,sans-serif; line-height: 200%; } #footer { font-size: 1.1em; font-style: italic; margin-top: 5em; text-align: center; } #footer a.externalLink { border-bottom: 1px solid #464646; color: #464646; font-weight: normal; } #floater { border-left: 1px solid #ddd; border-bottom: 2px solid #aaa; font-size: 1.1em; padding: 0 20px; text-align: center; line-height: 100%; } #floater ul { text-align: left; } #floater a { color: #999; cursor:pointer; font-weight: bold; text-decoration: none; } #floater a:hover { color: #8ea6ff; text-decoration: underline; } #content1 { margin: 0 12.7% 1em 12.7%; text-align: left; } .passage table { border-collapse: collapse; font-size: 100%; margin: .8em 1.0em; } .passage th,.passage td,.passage tr,.passage caption { padding: 3px; } .passage hr { height: 1px; } .toolbar { font-size: .5em; } .toolbar a { margin-left: 12px; } .passage ul, .passage ol { margin-left: .5em; padding-left: 1.5em; } li { list-style-type: square; }