/*************************************************************************************************************** GENERAL NOTES Common styles - used by extranet, intranet, and public website. (1) Font sizes- (1.1) All font sizes should be specified in ems (unless there's a good reason not to) (1.2) Font-size-wise, our text is generally either (i) main content (e.g. the document you're there to read) or (ii) a footer (understood broadly- e.g. includes 'next' and 'previous' links) or (iii) the navbar (1.3) Main content has historically been set at a point size equivalent to 0.76em (12px); footer and navbar text to 0.7em (9pt/~10.66px)- but because ems are specified relative to the font size of the containing block, footer-type elements within main content have to be set at 0.92em, because 0.7=0.76*0.92 (1.4) Similar relative values might need to be calculated for other elements, e.g. PRE (2) Structure- (2.1) Unless there's a good reason for not doing so, styles should be specific and heirarchical- e.g. there should not be a P style defined globally, rather a P style defined in the context of e.g. main content (2.2) 'A good reason' includes e.g. hyperlinks- we want *every* hyperlink looking a certain way, so these can be defined globally (at least for properties that are constant throughout- e.g. text-decoration, but not font size (3) The goal should be to remove any style from the HTML files- since we use a lot of included HTML, this is not so crucial, because there is still only one file to edit for a given change- but in the interests of clean HTML code, it's a worthy goal (...) (n) Important things to remember- (n.1) Tables are outside the normal hierarchy of CSS, at least for some properties (e.g. font size) so these need to be specified again- but with context! Thus e.g. DIV.maincontent TD for table cells in the main content- we use tables in a number of places, so we don't want to globally define these (See also point 2.1 above) ***************************************************************************************************************/ /* * GLOBAL STYLES */ TABLE#bodytable { border:0; width:100%; border-spacing:0; table-layout:fixed; } BODY { font-family: Verdana, Arial, Helvetica, sans-serif; background: #ffffff; margin:0; min-width:850px;} A:link { color: #0053A8; text-decoration:none; } A:visited { color: #0053A8; text-decoration:none; } A:active { color: #FF9900; text-decoration:none; } A:hover { color: #66cc33; text-decoration:none; } IMG { border:0; } /* Probably not ideal to have this sitting out by itself, especially because it's a table... but it works. */ TD.breadcrumb { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; line-height:1.8em; padding-left:0.3em;} A.breadcrumb:link { color:#666666; text-decoration:none; } A.breadcrumb:visited { color:#666666; text-decoration:none; } A.breadcrumb:active { color:#666666; text-decoration:none; } A.breadcrumb:hover { color:#666666; text-decoration:none; } DIV.navbar { float:right; margin:5px 0; padding:0 10px 0 0; } DIV.navbar DIV.navbutton { vertical-align:middle; float:left; width:75px; height:18px; padding:0; margin:0 0 0 10px; background:url(/images/btn_navbar_off.gif); background-position:center center; background-repeat:no-repeat; } DIV.navbar DIV.navbutton:hover { background:url(/images/btn_navbar_on.gif); color:#0053a8; } DIV.navbar DIV.navbutton A { float:right; margin:2px 5px 0 0; font-family:arial-narrow, sans-serif; font-weight:bold; font-size:0.7em; text-decoration:none; color:#555555; } DIV.navbar DIV.navbutton A:hover { color:#0053a8; } /* * SIDEBAR STYLES */ DIV.sidebar { padding:0 2px 0 0; font-size:0.7em; margin:15px 0 0 0; } DIV.sidebar P { padding-left:12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.95em; color:#333333; } DIV.sidebar P.blipheading{ font-family:verdana, ariel, helvetica, sans-serif; font-weight:bolder; font-size:1.3em; color:#0053A8; margin-right:10px; background-image:url(/images/blip_large.gif); background-position:right; background-repeat:no-repeat; } DIV.sidebar P.noblipheading{ font-family:verdana, ariel, helvetica, sans-serif; font-weight:bolder; font-size:1.3em; color:#0053A8; } /* Sidebar table styles needed for table-based shortcuts in older extranets - ideally, phase this out */ DIV.sidebar TD { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; line-height: 1.3em; } DIV.sidebar TD strong { font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; } DIV.sidebar TD A.sidebar:link { font-family: Verdana, Arial, Helvetica, sans-serif; color: #0053A8; text-decoration:none } DIV.sidebar TD A.sidebar:visited { font-family: Verdana, Arial, Helvetica, sans-serif; color: #0053A8; text-decoration:none } DIV.sidebar TD A.sidebar:active { font-family: Verdana, Arial, Helvetica, sans-serif; color: #66cc33; text-decoration:none } DIV.sidebar TD A.sidebar:hover { font-family: Verdana, Arial, Helvetica, sans-serif; color: #66cc33; text-decoration:none } DIV.sidebar DIV.sidebar_nav { line-height: 1.3em; font-family: Verdana, Arial, Helvetica, sans-serif; } DIV.sidebar DIV.sidebar_nav P { padding:0px; margin:4px 1px 5px 1px; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; } DIV.sidebar DIV.sidebar_nav UL { list-style-image:url(/images/sb_blip_3.gif); list-style-position: outside; padding:0px; margin:4px 0 5px 25px; font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333;} DIV.sidebar DIV.sidebar_nav UL LI { font-weight:normal; margin-bottom:4px; margin-top:0px; padding:0; } DIV.sidebar DIV.sidebar_nav UL LI UL { list-style-image:none; list-style-type:none; list-style-position: outside; padding:0px; margin:4px 0 5px 25px; color:#333333; } DIV.sidebar DIV.sidebar_nav UL LI UL LI { font-weight:normal; margin-bottom:4px; margin-top:0px; padding:0; } /* Newer extranets should use this CSS structure - i.e. the whole sidebar nav panel is a list*/ DIV.sidebar UL.sidebar_nav_list { line-height: 1.3em; font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; list-style-image:none; list-style-type:none; list-style-position: outside; padding:0px; margin:4px 0 5px 1px; font-family: Verdana, Arial, Helvetica, sans-serif; } DIV.sidebar UL.sidebar_nav_list LI { padding:0px; margin:4px 1px 5px 1px; font-weight:bold; } DIV.sidebar UL.sidebar_nav_list LI UL { list-style-image:url(/images/sb_blip_3.gif); list-style-position: outside; padding:0px; margin:4px 0 5px 22px; font-family: Verdana, Arial, Helvetica, sans-serif; } DIV.sidebar UL.sidebar_nav_list LI UL LI { font-weight:normal; margin-bottom:4px; margin-top:0px; padding:0; } DIV.sidebar UL.sidebar_nav_list LI UL LI UL { list-style-image:none; list-style-type:none; list-style-position: outside; padding:0px; margin:4px 0 5px 22px; } DIV.sidebar UL.sidebar_nav_list LI UL LI UL LI { font-weight:normal; margin-bottom:4px; margin-top:0px; padding:0; } DIV.sidebar UL.sidebar_nav_list LI UL LI UL LI:before { content: " - "; } /* Slightly ugly trick to get a dash for the list bullet - CSS2 doesn't have these*/ DIV.sidebar_news {} /* Rename this to sidebar_random_news or something similarly meaningful, and change it in sidebar_common to fit */ DIV.randnews { margin:17px 10px 21px 10px; padding:2px 3px;background-color:#e5edf6; } DIV.randnews P { font-family: Verdana, Arial, Helvetica, sans-serif; margin:10px 1px; padding:0; color:#333333; line-height: 1.3em;} DIV.maincontent { font-size: 0.76em; font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; line-height: 1.4em; margin:15px 20px 0px 20px; max-width:100%; } /* max-width is a bit of an IE hack */ DIV.maincontent A:link { color: #0053A8; text-decoration:none; } DIV.maincontent A:visited { color: #0053A8; text-decoration:none; } DIV.maincontent A:active { color: #FF9900; text-decoration:none; } DIV.maincontent A:hover { color: #66cc33; text-decoration:none; } /* * MAIN CONTENT/BODY STYLES */ DIV.maincontent H1 {font-family: Arial, Helvetica, sans-serif; color:#339900; font-size: 1.75em; line-height: 1.15em; } DIV.maincontent H1.pageheading {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color:#63667C; font-weight: bold; text-align:center; width:100%; background-color:#E1E1E1; font-size:1.55em; line-height:1.25em; } DIV.maincontent H2 { font-family: Arial, Helvetica, sans-serif; color:#339900; font-size: 1.4em; } DIV.maincontent H3 { font-family: Arial, Helvetica, sans-serif; color:#F60; font-size: 1.3em; } DIV.maincontent H4 { font-family: Arial, Helvetica, sans-serif; color:#333; font-size: 1em; } DIV.maincontent H5 { font-family: Arial, Helvetica, sans-serif; color:#333; font-size: 1em; } DIV.maincontent H6 { font-family: Arial, Helvetica, sans-serif; color:#333; font-size: 1em; } DIV.maincontent P.blipheading{ font-family:verdana, ariel, helvetica, sans-serif; font-weight:bolder; font-size:1.3em; color:#0053A8; margin-right:10px; background-image:url(/images/blip_large.gif); background-position:right; background-repeat:no-repeat; } DIV.maincontent P.noblipheading{ font-family:verdana, ariel, helvetica, sans-serif; font-weight:bolder; font-size:1.3em; color:#0053A8; } DIV.maincontent P { margin:6px 0 12px 0; } DIV.maincontent P.footer { font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; font-size:0.92em; } DIV.maincontent DIV.footer { font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; font-size:0.92em; } DIV.maincontent P.footnotetext { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.92em; overflow:hidden;} /* overflow:hidden for footnotes and table cells - the only places we are ever likely to drop in ridiculously long URLs*/ DIV.maincontent TD {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.76em; color:#333333; } DIV.maincontent TH {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.76em; color: #000; margin-left: 0px; } DIV.maincontent TD.cellnormal { margin:0; padding:5px; } DIV.maincontent TD.cellheading { margin:0; padding:5px; background-color: #EEEEEE; } DIV.maincontent TD.compliantok { margin:0; padding:5px; background-color:#D5F6DD; } DIV.maincontent TD.compliantnot { margin:0; padding:5px; background-color:#F0DDDD; } DIV.maincontent TD.compliantpartial { margin:0; padding:5px; background-color:#F0F6DD; } DIV.maincontent TD.compliantminorreqs { margin:0; padding:5px; background-color:#E5EDF6; } DIV.maincontent TD .cellnormal { margin:0px; overflow:hidden; } DIV.maincontent TD .cellindent { margin:0px 0px 0px 20px; overflow:hidden; } DIV.maincontent TD .cellheading { margin:0px; font-weight:bold; } DIV.maincontent TD .compliantoktable { margin: 0; } DIV.maincontent TD .compliantpartialtable { margin: 0 } DIV.maincontent TD .compliantnottable { margin: 0 } DIV.maincontent TD .compliantminorreqstable { margin: 0 } DIV.maincontent TD H6 { margin:5px 0px; font-style: italic; } DIV.maincontent TABLE.gcnote TD { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.76em; color:#333333; background-color:#D5F6DD; } DIV.maincontent TABLE.gcnote TD P { padding:3px; margin:0px; } DIV.maincontent UL { font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; list-style-type: square;} DIV.maincontent UL LI { margin-top:0.3em; margin-bottom:0.3em; } DIV.maincontent UL LI UL { font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; list-style-type: square;} DIV.maincontent UL LI UL LI { margin-top:0.3em; margin-bottom:0.3em; } DIV.maincontent DL { font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; list-style-type: square;} DIV.maincontent DL DT { margin-top:0.3em; margin-bottom:0.3em; } DIV.maincontent DL DD { margin-top:0.3em; margin-bottom:0.3em; } DIV.maincontent BLOCKQUOTE { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; margin-left: 25px; } DIV.maincontent BLOCKQUOTE.blockquote0 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; margin-left: 25px; } DIV.maincontent BLOCKQUOTE.blockquote1 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; margin-left: 40px; } DIV.maincontent BLOCKQUOTE.blockquote2 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; margin-left: 55px; } DIV.maincontent BLOCKQUOTE.blockquote3 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; margin-left: 70px; } DIV.maincontent BLOCKQUOTE.blockquote4 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; margin-left: 85px; } DIV.maincontent DIV.indent { padding-left:25px; width:96%; margin:0;} DIV.maincontent DIV.indent > P { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color:#333333; line-height: 1.4em; } /* SR did these two styles to get indents on the extranet home pages - but now he regrets it... Only a couple of extranets use them so far, and they could probably be done much better */ DIV.maincontent DIV.extranet-topic{ padding-left:25px; width:96%; margin:0;} DIV.maincontent DIV.extranet-topic > P { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color:#333333; line-height: 1.4em; } /* The complance styles aren't used for any one particular HTML element... so apply to anything in the main content equally - since they're only background colour specifications, this is no real problem.*/ DIV.maincontent .compliantok { background-color:#D5F6DD; padding: 0.1cm 0.2cm; margin: 0; } DIV.maincontent .compliantpartial { background-color:#F0F6DD; padding: 0.1cm 0.2cm; margin: 0 } DIV.maincontent .compliantnot { background-color:#F0DDDD; padding: 0.1cm 0.2cm; margin: 0 } DIV.maincontent .compliantminorreqs { background-color:#E5EDF6; padding: 0.1cm 0.2cm; margin: 0 } DIV.maincontent .gcrecommendationheading { background-color:#9ECEFF; padding: 6px 10px 6px 10px; margin: 0; } DIV.maincontent P.gcrecommendationheading { font-weight:bold; background-color:#9ECEFF; padding: 6px 10px 6px 10px; margin: 0; } DIV.maincontent P.gcrecommendation { background-color:#9ECEFF; padding: 6px 10px 6px 10px; margin:0; } DIV.maincontent P.gctitle { font-weight:bold; background-color:#EFEFEF; border:solid gray 1px; padding-top:10px; padding-bottom:10px; margin-top:20px; margin-bottom:20px; } DIV.maincontent TABLE.dropbox { border:0; border-spacing:0; margin:0 auto; width:90%; } DIV.maincontent TABLE.dropbox TD.dropboxcontent { background:#E5EDF6; vertical-align:middle; padding:5px; } DIV.maincontent TABLE.dropbox TD.dropboxcontent P.dropboxheading {text-align: center;} DIV.maincontent TABLE.dropbox TD.dropboxcontent UL.dropboxbullet {} DIV.maincontent DIV.dropboxouter{ border:2px dotted #D3D3D3; width:45%; margin:10px; } DIV.maincontent DIV.dropboxinner{ background:#E5EDF6; margin:2px;} DIV.maincontent TABLE.dirbrowse { border:0; border-spacing:0; } DIV.maincontent TABLE.dirbrowse TR { vertical-align:baseline; } /* * FOOTBAR STYLES */ /* These are kind of ad hoc - could be better handled if we had a DIV for footer, like for sidebar - but probably would involve rewriting some HTML*/ DIV.footbar { margin:6px 0px 0px 0px; width:100%; } DIV.footbar TD { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; color:#333333; line-height:1.55em; } DIV.footbar P.footer { } DIV.footbar P.footerbox { border: 1px dashed Gray; background-color: #F6F6F6; border-collapse: collapse; color: black; padding: 5px; } /* SR isn't sure that we make any use of these styles - but/so let's just leave them untouched for now. */ OL { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color:#333333 ;} BIG { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11pt; color:#333333; } SMALL { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color:#333333; } /* SR note: it doesn't look like these definitions are needed any more, since they inherit the values from maincontent DL { font-family: Verdana, Arial, Helvetica, sans-serif; margin-left: 25px; font-size: 9pt; color: #333333; } DT {font-family: Verdana, Arial, Helvetica, sans-serif; margin-top: 6px; }*/ /* SR hasn't got around to organising these styles yet.*/ /* Note that the fonts here are smaller than elsewhere, hence a larger font-size is used.*/ DIV.maincontent PRE { font-family: monaco, "andale mono", courier, "courier new", monospace; font-size:1.1em; background-color:#F6F6F6; margin:20px 0; border:1px solid gray; border-collapse: collapse; width:100%; overflow:auto; height:auto; padding: 5px; } DIV.maincontent TT{ font-family: monaco, "andale mono", courier, "courier new", monospace; } DIV.maincontent P.intro { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.2em; color: #555555; line-height: 1.35em; font-weight : bold;} /*DIV.dropbox - if we ever convert the dropbox to a div, use this, and cascade for its contents.*/ UL.toplevelindex { font-family: Verdana, Arial, Helvetica, sans-serif; color:#333333; list-style-image : url(/images/sb_blip_2.gif); } UL.toplevelindex LI { padding:0px; margin-top:12px; } UL.toplevelindex LI UL { list-style-image:none; list-style-type:square; } TABLE.public_photo_grid{margin:0 auto; width:60%; color:#333333;} TABLE.public_photo_grid TR{} TABLE.public_photo_grid TD {text-align:center; font-size:0.7em; vertical-align:top;} TABLE.public_photo_grid TD UL {margin-left:20px; text-align:center; vertical-align:top;} TABLE.public_photo_grid TD UL LI {line-height:1.1em; margin:0; text-align:left;} UL.sitemap{ list-style-image:url(/images/sb_blip_2.gif); list-style-position: outside; padding-left:0px; margin-left:28px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em; color:#333333; line-height: 1.3em; padding-bottom:0; margin-bottom:5px; } UL.sitemap > LI{ margin-top:4px; }