/* Style sheet for Cooke Web Site from January 2011 */ /* Used for all pages with exception of KompoZer User Guide (Links page uses pruned version) */ /* Some pages may add additional rules if required as internal stylesheet */ /* Used in conjunction with a separate print stylesheet */ /* Some pages may link additional stylesheet for IE6 but most IE issues are resolved using IE7/8 script */ /* Author - Charles Cooke */ /* Modified 23rd February 2011 */ /* Global scene setting */ /* ==================== */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, font, img, kbd, q, s, samp, strong, sub, sup, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td { border: none; margin: 0; padding: 0; vertical-align: baseline; } body { position: relative; margin: 0px; max-width: 58em; background: #f4f8ff url(images/bluepapertrans2.png) repeat fixed 0% 50%; font-family: 'Trebuchet MS',arial,helvetica,sans-serif; font-size: 0.9em; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; color: black; } /* Layout */ /* ====== */ #wrapper { position: relative; font-size:100%;} #main { position: relative; left: 9em; margin-left: 43px; margin-right: 9em; } #content { position: relative; border: 2px solid #666666; margin-bottom: 12px; padding: 8px; background-color: rgb( 239, 239, 239); -moz-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px; -moz-box-shadow: 4px 4px 4px #ccc; -webkit-box-shadow: 4px 4px 4px #ccc; box-shadow: 4px 4px 4px #ccc; } #content { background: rgba( 239, 239, 239, 0.5); } #page_menu { position: fixed; padding-left: 39px; height: 450px; z-index: 1; background-position: top left; background-repeat: no-repeat;} #site_menu { position: absolute; right: -9.4em; width: 9em; margin-right: 0px; top: 102px;} #header { position: relative; height: 102px; margin-bottom: 10px ;} /* Global elements */ /* =============== */ p, blockquote { margin: 1em 0; letter-spacing: 0.1em; line-height: 1.6em; text-align: left; } dt, dd { letter-spacing: 0.05em; margin: 0.5em 0;} h1, h2, h3, h4, h5, h6 { font-family: 'Verdana', 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: bold; margin: 1em 0 0.25em; color: #369; } #content h2, #content h3, #content h4 { margin-left: 18px; text-indent: -28px; } #content h2:before { content: url(images/preh2.png) ; } #content h3:before, #content h4:before { content: url(images/preh.png) ; } h1 { font-size: 1.6em; margin-top: 0.25em; font-family: 'Verdana', 'Trebuchet MS', Arial, Helvetica, sans-serif; line-height: 1.2; text-shadow: 2px 2px 4px #aaa; } h2 { font-size: 1.4em; clear: both; } h3 { font-size: 1.2em; } h4, h5, h6 { font-size: 1em; } acronym { font-variant: small-caps; } /* Due to be fremoved in HTML5 */ abbr { font-variant: small-caps; } blockquote { font-style: italic; margin-left: 2em; margin-right: 2em; } caption { caption-side: top; margin-bottom: 0.25em; font-weight: bold; letter-spacing: 0.1em;} code, pre, kbd { font-family: "Courier New", Courier, Monospace; } dd { margin-bottom: 1em; letter-spacing: 0.1em; line-height: 1.4em; margin-left: 1em; } dt { font-weight: bold; } hr { margin: 1em 10%; background-color: #4499bb; color: #4499bb; height: 2px; } kbd { background:none repeat scroll 0 0 #faf6f6; background-color:#eae9d7; border-color:#edd #baa #baa #edd; border-color:#fff #a4a585 #a4a585 #fff; border-style:solid; border-width:1px 2px 2px 1px; border-width:2px; color:#000; padding:0 1px; font-weight: bold; font-family:Arial,Helvetica,sans-serif; } /* From Mozilla*/ ol, ul { margin-left: 5em; margin-bottom: 1em; } li { margin-bottom: 0.5em; letter-spacing: 0.1em; line-height: 1.4em; } pre { border: 2px groove #4289b5; margin: 1em; padding: 0em 1em 1em; background-color: #f4f8ff; overflow: auto; } pre:before { border-bottom: thin solid gray; content: "Example"; display: block; margin-bottom: 1em; background-color: #4289b5; color: #fafbdd; margin-left: -1em; margin-right: -1em; padding-left: 1em; font-weight: bold; } sub { vertical-align: sub; } sup { vertical-align: top; font-size: 0.8em; white-space: nowrap; text-transform: uppercase;} table { border: 2px solid #4289b5; border-collapse: collapse; } td, th { border: 1px dotted #4289b5; padding: 2px; text-align: center; letter-spacing: 0.1em; } /* Global classes*/ /* ============= */ .bigger { font-size: larger;} .smaller { font-size: smaller;} .centre { margin-left:auto; margin-right: auto; } .clear_r { clear: right; } .clear_l { clear: left; } .clear_n { clear: none; } .keycap { background-color:#eae9D7; border-color:#f5f8ed #a4a585 #a4a585 #eee; border-style:solid; border-width:2px; color:#000000; font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:1px; color: red; } /* To be reviewed - Replace using kbd??? */ .left { float: left; position: relative; margin-right: 4px; clear: left; } /* Position to sort IE6 bug */ .nobreak { white-space: nowrap; } .nofloat { float: none;} .right { float: right; position: relative; margin-left: 4px; clear: right; } /* Position to sort IE6 bug */ .strikeout { text-decoration: line-through; } div.image_holder h6 { text-align: center; margin-top: 0;} /* Global Links*/ /* =========== */ a:link, a:visited { color: #4070a0; text-decoration: underline; } a:hover { color: #205090; background-color: white; } a:focus { outline: 2px #369 dotted;} a:active { outline: none; } a[href^="http"] { background: transparent url(images/extlnk.png) no-repeat right top; padding-right: 10px; } a[href^="http"]:hover { background-color: white; } /* Global Complex selectors */ h1 + p:first-letter, h1 + h2 + p:first-letter { font-family: 'Verdana', 'Trebuchet MS',arial,helvetica,sans-serif; font-weight: bold; color : #369; text-transform:uppercase; font-size:3.5em; float:left; margin:0.13em 0.2em 0 0; line-height:0.7; letter-spacing: 0; text-shadow: 2px 2px 4px #aaa; } h1 + p:first-letter, h1 + h2 + p:first-letter { font-family: Georgia, 'Times New Roman', Times, serif; font-weight: bold; color : #369; text-transform:uppercase; font-size:3.5em; float:left; margin:0.13em 0.1em 0 0; line-height:0.7; letter-spacing: 0; text-shadow: 2px 2px 4px #aaa; } h1 + p:first-line, h1 + h2 + p:first-line { text-transform:uppercase; position:relative; font-weight: bold; color: #666; } img.madewithkompozer { position: absolute; left: -4.5em; margin-left: -70px; } div.clearance { clear: both; height: 1px; font-size: 1px; } div.clearance_l { clear: left; height: 1px; font-size: 1px; } div.dem_box { border: 2px solid #4289b5; padding: 0em 1em; background-color: #f4f8ff; overflow: auto; } div.dem_box p { text-align: left; margin-bottom: 1em; line-height: 1; } div.side_box { border: 2px solid #4289b5; padding-right: 8px; margin-left: 4px; margin-bottom: 0.25em; width: 40%; float: right; padding-left: 4px; position: relative; } div.tip { border-style: solid; border-color: #4289b5; border-width: 10px 0px; margin: 4px 0px 4px 4px; padding-left: 4px; width: 250px; float: right; position: relative; clear: right; background-color: #f4f8ff;} div.w150 { width: 150px; } div.w15e { width: 15em; } div.w25e { width: 25em; } div.display p { margin: 0; color: #666; font-size: large; font-weight: bold; text-align: center; } span.tab5 { position: absolute; left: 5em; } /* Previously tab1 */ span.tab10 { position: absolute; left: 10em; } /* Previously tab2 */ span.tab15 { position: absolute; left: 15em; } /* Previously tab3 */ span.tab20 { position: absolute; left: 20em; } /* Previously tab4 */ /* Header special*/ /* ============== */ #fleche { width: 800px; height: 16px; background-image: url(images/fleche7-trans.png); background-repeat: no-repeat; } /* Notes specials*/ /* ============== */ div#notes {clear: both;} div#notes ul {margin-left: 2em; list-style-type: none; } /* References specials*/ /* ============== */ #references {clear: both;} #references ul {margin-left: 1em; list-style-type: none; } #references li {margin-left: 3em; text-indent: -3em;} /* Footer specials*/ /* ============== */ #footer { background-color: #4878a9; color: white; padding: 4px; margin-bottom: 1em;} #footer p { margin: 0; font-size: 0.8em; } #footer p.copyright, #footer p.update { text-align: center; } /* Menu specials*/ /* ============ */ #page_menu h2, #site_menu h2 { text-align: center; font-size: 1em;} ul.menu { margin: 0 0 0.5em 0; list-style-type: none; padding: 0; width: 9em; } ul.menu li { margin: .25em 0; line-height: 1.2; letter-spacing: 0; } ul.menu li a { border: 1px solid black; display: block; text-align: center; color: white; } ul.menu a:link, ul.menu a:visited, ul.menu a:active { background-color: #4878a9; color: white; text-decoration: none; } ul.menu a:hover, ul.menu a:focus { background-color: #6fcfff; color: black; } /* Skip menu */ ul.skip_menu { position: absolute; left: -10000px; z-index: 1; } ul.skip_menuxxx {left: 50px;} /* For development purposes only */ ul.skip_menu a:focus, .skip_menu a:active { display: block; position: absolute; left: 10700px; width: 9em;} /* a:active and width to cope with IE6 & 7*/ /* Second level menus */ #page_menu ul.menu li { position: relative; } #page_menu ul ul { display: none; } #page_menu ul ul li { position: relative; margin: 0; } #page_menu ul.menu li a { width: 8.86em; } #page_menu ul.menu li:hover ul { display: block; position: absolute; top: 0; left: 9em; margin: -4px 0 0 0 ; } /* Background-color would fix IE7 and Opera 10 - Sigh */ #page_menu ul.menu li:hover ul li { display: block; margin-left: 6px; border: 0px solid #efefef; border-width: 0px 4px 0.25em 4px;} #page_menu ul.menu li:hover ul li:first-child { border-top-width: 4px ;} /* Third level menus */ #page_menu ul.menu li:hover ul ul { display: none; } #page_menu ul.menu li:hover ul li:hover ul { display: block; margin-left: -4px ; }