/* ---------------------------------------------------------- Screen Style Sheet for Sagacious.us "Academy Blues" ---------------------------------------------------------- New: 1-Jan-07, OH -- Mod: 02-jun-10, OH - damn near re-wrote the whole thing on 28 Dec 09 1) High Level Formatting 2) Content Formatting 2a) Headers and Titles 2b) News Boxes 2c) Images 3) Head 4) Menu 5) Foot 6) Miscellaneious & Clerical 7) Fancy Styling 7 a) Rounded Corners 8) Special Use: Periodic Table */ /* 1) High Level Formatting */ html, body { background: #334; background-image: url(bg.png); margin: 0% 1% 1% 1%; font-family: Verdana, Latha, Tahoma, Arial, sans-serif; } * { margin: 0; padding: 0; } #wrapper { height: auto !important; margin: 10px auto 10px; } #head { background: #559; } #menu { padding: 0%; float: left; width: 20%; background: #559; } #cont { padding: 0%; float: right; width: 80%; background: #fff; } #foot { width: 100%; text-align: right; display: block; clear: both;} #icont { width: 100%; background: #fff; margin: 0; } /* 2) Content Formatting */ p { color: #000; text-align: justify; margin-left: 2em; margin-right: 2em; margin-top: 1ex; text-indent: 4em; } .mono { margin: 0 2em; padding: 0 1ex; text-align: left; font-style: normal; font-size: 0.8em; font-family:"Courier New", Courier, monospace; color: #000; background: #DDF; border: thin dashed #559; } .codeblock { white-space: pre; } blockquote { font-style: italic; text-align: justify; display: block; color: #888; text-indent: 0; margin: 1em 4em 0 4em; padding-left: 0.8em; border-left: 3px solid #559; } .cite { font-size: 80%; display: block; color: #888; text-align: right; border: none; margin-top: 0; margin-right: 4em; } .longSource { text-align: justify; font-style: normal; font-size: 100%; margin-left: 2cm; margin-right: 2cm; text-indent: -1cm; } .quickSource { text-align: left; font-style: italic; font-size: x-small; color: #000; } label { float: left; width: 10em; } rightalign { text-align: right; } #cont form { display: block; margin: auto; padding: 10px 10% 10px 10%;} #cont iframe { background: #fff; } #cont ul { padding-left: 2em; } .tags { font-size: 0.8em;} .tags { list-style-type: none; } .tags li { display: inline; } .tags a { text-decoration: none; } /* #cont ul.tags { text-align: right; margin-right: 2em; } will become obsolete when fancy menus get working*/ /* fancy dropdown menus probably needs a subsection here - at least it is commented. Wait! I just noticed that there is a section at the bottom of the page called 'fancy' formatting!*/ .fancy { margin: 0 2.5em; } /* aligns with text of article note that (2.5em * 0.8em) = 2em so this works*/ .fancy a { display: block; padding: 0 0.5ex; } .fancy li { float: left; } /*needs a float. why does this reverse the order of everything when it is float:right?*/ .fancy li:hover>ul { display: inline; } /*IE doesn't like the child selector*/ .fancy li a:hover { color: #fff; background-color: #559; } /* purely stylistic */ .fancy ul { display: none; position: absolute; white-space: nowrap; background-color: #ccc; } /* ensures that drop down lists overlay article text, alsopaints a background so text beneith isn't visible */ .fancy ul li { float: none; } /*trial and error shows that this is needed to get the display block to work ensures that article titles that are longer than tags aren't wrapped*/ /* Blog Esque Formatting */ .atitle { color: #000; text-align: left; font-size: 115%; margin-left: 3em; } .adate { color: #000; text-align: right; font-size: 105%; margin-right: 3em; } p.abody { color: #000; text-align: justify; font-style: normal; font-size: 100%; margin-left: 3em; margin-right: 3em; text-indent: 2em; } .article img { display: block; margin-left: auto; margin-right: auto; } /* 2-a) Headders and Titles */ .rank { display:none; } /* 2-b) News Boxes */ .contbox { margin: 16px; background: #ccc; text-decoration: none; min-height: 160px; -moz-border-radius: 16px; -webkit-border-radius: 16px; } .boxhead { width: 100%; background: #559; color: #fff; font-weight: 600; text-align: justify; margin-left: 0; margin-right: 0; text-indent: 1em; -moz-border-radius-topright: 16px; -webkit-border-topright-radius: 16px; -moz-border-radius-topleft: 16px; -webkit-border-top-left-radius: 16px; } .boxhead a { color: #fff; text-decoration: none; } .boxname { width: 100%; background: #ccc; color: #559; font-weight: 600; text-align: justify; margin-left: 0; text-indent: 1em; text-transform: capitalize; -moz-border-radius-topright: 16px; -webkit-border-topright-radius: 16px; -moz-border-radius-topleft: 16px; -webkit-border-top-left-radius: 16px; } .boxname a { color: #559; text-decoration: none; } .boxdate { text-align: left; font-size: 0.8em; color: #888; margin-left: 1em; } .boxbody { text-align: left; color: #000; text-indent: 2em; margin: 1em; } .boximge { margin: 10px 10px 10px 10px; } .boxlink { text-decoration: none; font-size: 0.8em; text-align: right; padding: 5px } /* 2-b-i) News Boxes */ .searchresult { margin: 10px 5% 10px 5%; } div.resulthead { color: blue; } div.resultbody { font-size: .8em; color: #777; } div.resultlocation { font-size: .8em; color: green; } /* 2-c) Images */ img { border: 0; margin: 10px; } #cont img { padding-top; 10px; } img.sketch { -moz-box-shadow: 3px 5px 10px #444; -webkit-box-shadow: 3px, 5px, 10px, #444; } .preloadimg { display: none; } .center { margin: auto; text-align:center; display: block; } img.thumbnail { cursor: pointer; margin: 1px; } p.caption { font-size: 0.8em; color: #888; font-style: oblique; width: 500px; margin: 0 auto 1em auto; text-indent: 2ex; } .article img { margin: auto; text-align:center; } /* 3) Head Formatting */ h1 { color: #fff; font-weight: 500; font-size: 4ex; margin-right: 0; padding: 1px; text-align: center; vertical-align: middle; width: 100%; } /* 4) Menu Formatting */ #menu a { text-decoration: none; color: #aaf; } #menu a:hover { background: #66a; } #menu ul { list-style-type: none; margin: 10px; } #menu .stasis li { list-style-type: none; font-weight: 600; background: #559; color: #aaf; padding: 2px; } #menu .stasis li a { text-decoration: none; display: block; padding: 0; } #menu .stasis li a:hover { background: #66a; color: #aaf; } #menu .stasis li a[href|="http://www.sagacious.us"] { color:#D4A017; font-weight: 600; text-decoration: none; font-size:1.2em; letter-spacing:0.08em; text-align: center; } #menu p { color: #aaf; margin: auto; text-indent: 0; } #menu form { text-align: center; margin: 10px; } #menu .stasis>span { display: none; } /*take that Internet Explorer!*/ /* 5) Foot Formatting */ #foot img { vertical-align: middle; } .updateLine { text-align: right; font-size: 0.8em; color: #888; vertical-align: middle; } .updateLine a { color: #888; } /* 6) Miscellaneious & Clerical */ .HrFormula { width: 100%; color: #000; } .HrStd { width: 100%; color: #018; } .index { width: 100%; height: 140px; overflow: scroll; white-space: nowrap; padding: 1em 0 0 0; } /* .index { width: 100%; height: 140px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; padding: 1em 0 0 0; } */ /* 7) Fancy Styling */ /* 7 a) rounded corners */ /* TODO The following could be condensed into just five defs: tr, br, bl, tl, tlspecial or something like that. */ .cbl {background: url(334bl.png) 0 100% no-repeat; } .cbr {background: url(334br.png) 100% 100% no-repeat} .ctl {background: url(559tl.png) 0 0 no-repeat} .ctr {background: url(334tr.png) 100% 0 no-repeat; padding:10px} .hbr {background: url(334br.png) 100% 100% no-repeat} .htl {background: url(334tl.png) 0 0 no-repeat} .htr {background: url(334tr.png) 100% 0 no-repeat; padding:10px} .mbl {background: url(334bl.png) 0 100% no-repeat; } .mbr {background: url(334br.png) 100% 100% no-repeat; padding:10px}