/************************************** DEVELOPMENT AND TEST - START ======================================*/ /* ************************************* READ THIS BEFORE EDITING THIS CSS!!!! ************************************ Container Structure of page: _____________________________________ | | | #Site | | _________________________________ | | | | | | | #SiteHeader #HeaderList = = = = | | | |_________________________________| | | | | | | | #PageTop #TopList = = = = | | | |_________________________________| | | | | | | | #PageTrail #TrailList = = = = | | | |_________________________________| | | | | | | | #Page | | | | _________________ .pageList | | | | | #SceneFull | = = = = = | | | | | or | = = = = = | | | | | #SceneSplit | = = = = = | | | | | or | = = = = = | | | | | #????? | = = = = = | | | | |_________________| | | | |_________________________________| | | | | | | | #SiteFooter | | | |_________________________________| | |_____________________________________| | | | #SiteStop | |_____________________________________| These are the main containers of the site and the *ONLY* elements to be referred to by ID. If you feel the urge to refer anything else by ID: - You are doing something wrong! Use a class or element reference that inherits from the container instead! Comment Legend: Region: ============ > Denotes a div container section always present =-=-=-=-=-=- > Denotes a div container section that might or might not be present ------------ > Denotes a ul container section always present Each region is always divided into sections: ID Rules Class Rules Element Rules In that order! Which means that any rule added to a region should be placed under the appropriatie section. E.g: #Site #HeaderList .search a should be placed under the class section since the rule is dependent oc a class (.search) #Site #HeaderList a should be placed under the element section since the rule is dependent on an element (a) #Site #HeaderList should be placed under the ID section since the rule is acting directly on the container with the corresponding ID (#HeaderList) Pseudo classes are placed under the section onto which they are acting. I.e [a:hover] is placed in the Element section (since the pseudo class is acting on a clean a element), whereas [.search a] should be placed in the class section. Every rule (yes - every rule) in this css shoukd be prefixed with the #Site id attribute (except body of course :-) ) This is great for debugging and inheritance checks. */ /*===================================== PageTop Rules ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #PageTop { height:77px; width:907px; margin:0px auto; background-image:url("../Images/tab_background.gif"); background-repeat:repeat-x; background-position:bottom left; } /*- - - - - - - - - - - - -Class rules*/ /*#Site #PageTop .logohome, #Site #PageTop .logohomeselected { display:inline; margin-top:27px; float:left; }*/ #Site #PageTop .logohome { list-style:none; float:left; width: 68px; } #Site #PageTop .logohome a { height:39px; float:left; display: block; color:#6f8839; text-decoration: none; font-weight:bold; font-size:1em; } #Site #PageTop .logohome a img { margin: -1px 3px 0 0; } /*- - - - - - - - - - - Element Rules*/ /*------------------------------------- TopList Rules --------------------------------------*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #TopList, #Site #TopListHome { list-style: none; padding:0px; margin:0px; float:right; margin-top:28px; } #Site #TopListHome { float:left; } /*- - - - - - - - - - - - -Class rules*/ #Site #TopList .selected a:hover { color: #fff; } #Site #TopList .selected { font-weight: bold; background-image:url("../Images/tab_right_selected.gif"); } #Site #TopList .selected a { background-image: url("../Images/tab_left_selected.gif"); color: white; } #Site #TopList li.separator { margin-left:40px; } #Site #TopList .last { background-image: url("../Images/tab_right_last.gif"); background-position: top right; background-repeat: no-repeat; } #Site #TopList .last a { padding:16px 7px 6px 10px; } /*- - - - - - - - - - - Element Rules*/ #Site #TopList a { display: block; background-image: url("../Images/tab_left.gif"); background-position: top left; background-repeat: no-repeat; color:#6f8839; text-decoration: none; padding:16px 14px 6px 10px; font-weight:bold; font-size:1em; } #Site #TopList a:hover { color: #fff; } #Site #TopList li { list-style:none; float:left; background-image: url("../Images/tab_right.gif"); background-position: top right; background-repeat: no-repeat; margin: 0; } #Site #TopList li.last.selected{ background-image: url("../Images/tab_right_selected_last.gif"); } /* Id needed to handle the fact that IE6 does _not_ support chained class selectors :( */ #Site #TopList #ie6{ background-image: url("../Images/tab_right_selected.gif"); } #Site #TopList #ie6last{ background-image: url("../Images/tab_right_selected_last.gif"); } /*===================================== PageTrail Rules ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ /*- - - - - - - - - - - - -Class rules*/ /*- - - - - - - - - - - Element Rules*/ /*------------------------------------- TrailList Rules --------------------------------------*/ /*- - - - - - - - - - - - - - ID Rules*/ /*- - - - - - - - - - - - -Class rules*/ #Site #TrailList .selected, #Site #TrailList .expanded { color:#000; } /*- - - - - - - - - - - Element Rules*/ #Site #TrailList a { color:#693; } /*===================================== Page Rules ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #Page { width:907px; height:auto; margin:0px auto; padding:0px; } /*- - - - - - - - - - - - -Class rules*/ /*- - - - - - - - - - - Element Rules*/ /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- SceneFull Rules -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #SceneFull { width:690px; float:left; text-align:left; display:inline; border-right:1px solid #ccc; background: url("/MarkTemplates/Common/Images/SceneListBackground.gif") repeat-y left top; } .SearchPage #Site #SceneFull { background:none; } /*- - - - - - - - - - - - -Class rules*/ #Site #SceneFull .standardContent { display:block; width:504px; padding:0px; margin-left:171px; margin-bottom:24px; margin-top:10px; } body.SearchPage #Site #SceneFull { border-right:none; } body.SearchPage #Site #SceneFull .standardContent { margin-left:0; width:907px; } body.SearchPage #Site #SceneFull .pageFootEnd { float:left; margin-bottom:25px; } #Site #SceneFull .standardContent .contentIDlogo { /*margin-left:397px; - Fix for safari bug*/ float:right; } /* DJ 2008-06-25 */ #Site #SceneFull .standardContent .contentIDlogoPrint { display:none; } #Site #SceneFull .standardContent p { line-height:1.3em; margin-top:0px; } #Site #SceneFull .standardContent p img, #Site #SceneFull .standardContent p map area, #Site #SceneFull .standardContent p map { border:none; } #Site #SceneFull .standardContent a { color:#000; } #Site #SceneFull .standardContent a:hover { color:#999; } #Site #SceneFull .standardContent .PageFoot { clear:both; background-image:url("/MarkTemplates/Common/Images/publish_block.gif"); background-repeat:no-repeat; padding:7px 16px 0px 16px; margin-bottom:0px; padding-bottom:0px; font-size:0.85em; line-height:16px; } #Site #SceneFull .standardContent .PageFootExtra { background-image:url("/MarkTemplates/Common/Images/publish_block_extra.gif"); background-repeat:repeat-y; width:504px; float:left; } #Site #SceneFull .standardContent .PageFootExtra p { padding:7px 16px 0px 16px; font-size:0.85em; } /* DJ 2008-06-25 */ #Site #SceneFull .standardContent .PageFootPrint { display:none; } #Site #SceneFull .standardContent .pageFootEnd { background-image:url("/MarkTemplates/Common/Images/publish_block_bottom.gif"); background-repeat:no-repeat; width:504px; height:8px; } #Site #SceneFull .standardContent .printLink { float:right; background-image:url("/MarkTemplates/Common/Images/icon_print.gif"); background-repeat:no-repeat; background-position:top right; padding-right:20px; text-decoration:none; } #Site #SceneFull .standardContent .pdfLink { float:right; background-image:url("/MarkTemplates/Common/Images/icon_pdf.gif"); background-repeat:no-repeat; background-position:top right; padding-right:20px; text-decoration:none; } #Site #SceneFull .standardContent .horizontalImageList { display:inline; width:504px; margin:0px; padding:0px; page-break-before:always; } #Site #SceneFull .standardContent .horizontalImageList li { display:inline; padding:0px; margin:0px; margin-right:2px; } #Site #SceneFull .standardContent .horizontalImageList li.last { margin-right:0px; padding:0px; margin:0px; margin-right:0px; } /*- - - - - - - - - - - Element Rules*/ /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- SceneStart Rules -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #SceneStart { width:688px; float:left; text-align:left; display:inline; border-right:1px solid #ccc; } /*- - - - - - - - - - - - -Class rules*/ #Site #SceneStart .standardContent { display:block; width:688px; margin-top:10px; } #Site #SceneStart .standardContent .startTop { width:680px; } #Site #SceneStart .standardContent .startTop p, h1 { margin-top:0; } /* DJ 2008-11-12: Not used anymore */ /* #Site #SceneStart .standardContent .startTop img { margin-left:6px; display:block; } */ #Site #SceneStart .standardContent .startTop .left { float:left; margin-right:15px; overflow:hidden; } #Site #SceneStart .standardContent .startTop .left ul#rotator { overflow:hidden; width:385px; } /*#Site #SceneStart .standardContent .startTop .right { width:auto; float:left; padding:0px; margin-right:22px; margin-left:0px; color:#6f8839; font-weight:bold; display:inline; }*/ #Site #SceneStart .standardContent .startTop h1, #Site #SceneStart .standardContent .startTop p { margin-right:22px; margin-left:0px; color:#6f8839; font-weight:bold; margin-top:0px; } #Site #SceneStart .standardContent .startTop div div { margin:0px; } #Site #SceneStart .standardContent .startTop h1 { font-size:1.8em; } #Site #SceneStart .standardContent .startThreeCol { border-top:1px solid #ccc; margin-top:12px; margin-bottom:12px; margin-left:6px; clear:both; } #Site #SceneStart .standardContent .startThreeCol a { text-decoration:none; color:#000; page-break-before:avoid; margin:0px; } #Site #SceneStart .standardContent .startThreeCol a:hover { color:#999; } #Site #SceneStart .standardContent .startThreeCol h2 { font-size:1.1em; font-weight:bold; page-break-after:avoid; margin:0px; } #Site #SceneFull .standardContent div h2 { font-weight:bold; font-size:1.25em; margin:0px; padding:0px; } #Site #SceneStart .standardContent .startThreeCol p { page-break-before:avoid; margin:0px; } #Site #SceneStart .standardContent .startThreeCol div { display:block; width:214px; float:left; padding:12px; padding-left:0px; color:#000; font-weight:normal; background-image:url("/MarkTemplates/Public/Images/columnstick.gif"); background-repeat:repeat-y; background-position:top right; } #Site #SceneStart .standardContent .startThreeCol div.colLast { background-image:none; } #Site #SceneStart .standardContent .startThreeCol div div { border-right:none; padding:0px; background-image:none; } /*- - - - - - - - - - - Element Rules*/ #Site #SceneStart .standardContent .startThreeCol div div p { line-height:1.3em; } #Site .standardContent .callus #cn, #Site .standardContent .callus input { width:160px; } #Site .standardContent .PageAccessibilityButtons input { width:160px; } #Site .standardContent iframe.PageAccessPreview { width:484px; } /*------------------------------------- ScenelList Rules --------------------------------------*/ /*- - - - - - - - - - - - - - ID Rules*/ /*- - - - - - - - - - - - -Class rules*/ /* #Site #Page #SceneList li.selected a.pathPart, #Site #Page #SceneList li.unselected a.pathPart { color:#6f8839; } */ #Site #Page #SceneList li a { color: #6f8839; } #Site #Page #SceneList li li a { color: #000; } #Site #Page #SceneList li.selected a.pathPart:hover { color:#6f8839; } /*- - - - - - - - - - - Element Rules*/ #Site #Page .SceneList { background-color:#f7f7f7; background-color:#f6f8f5; background: url("/MarkTemplates/Common/Images/SceneListBackground.gif") repeat-y left top; float:left; width:166px; } #Site #Page .SceneList img { margin-left:10px; } /*------------------------------------- PageList Rules --------------------------------------*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site .pageList { width:196px; float:right; list-style:none; display:inline; margin:0px; padding:0px 6px 0px 0px; text-align:left; margin-top:10px; } #Site .standardContent .pageList { width:500px; display:block; float:none; } #Site .standardContent .pageList li { width:500px; display:block; float:none; } /*- - - - - - - - - - - - -Class rules*/ #Site .pageList li.newsPush, #Site .pageList li.calendarPush { height:auto; min-height:0px; /*Nicer - but not approved !!!*/ border-bottom:1px solid #aaaaaa; border-top:1px solid #aaaaaa; /*background-image:url("/MarkTemplates/Common/Images/module_corner_small.gif"); background-repeat:no-repeat; background-position:right bottom;*/ padding:0px 4px 4px 0px; } #Site .pageList li.newsPush { font-size:0.7em; } #Site .pageList li.newsPushSeparator { font-size:0.7em; font-weight:bold; page-break-after:avoid; margin:0px; padding:0px 0px 4px 0px; } #Site .pageList li.newsPush a span { font-size:1em; } #Site .pageList li.newsPush a span.newsPushHeader { font-size:1.1em; font-weight:bold; page-break-after:avoid; margin:0px; } #Site .pageList li.newsPush a.newsPushHeader { font-size:1.1em; font-weight:bold; page-break-after:avoid; margin:0px; } #Site .pageList li.newsPush p, #Site .pageList li.calendarPush p { page-break-before:avoid; margin:0px; } #Site .pageList li.newsPush a, #Site .pageList li.calendarPush a, #Site .pageList li a { text-decoration:none; color:#000; page-break-before:avoid; margin:0px; } #Site .pageList li.newsPush p a:hover, #Site .pageList li.calendarPush p a:hover { text-decoration:underline; } #Site .pageList li.newsPush a:hover, #Site .pageList li.calendarPush a:hover { color:#999; } #Site .pageList li.calendarPush h2 { font-size:0.8em; font-weight:bold; page-break-after:avoid; margin:0px; text-decoration:none; color:#000; } #Site .pageList li.standardModule, #Site .pageList li div { /* background-image:url("/MarkTemplates/Common/Images/list_bottom_contact.gif"); */ background-repeat:no-repeat; background-position:left bottom; height:auto; min-height:25px; padding-bottom:1px; width:100%; } #Site .pageList li.standardModule { background-color: #ededed; } #Site .pageList li div { border-bottom:1px solid #aaaaaa; background-image:none; height:auto; min-height:0px; padding-bottom:1px; } #Site .pageList li.newsPush div, #Site .pageList li div div { background-image:none; border:none; } #Site .pageList li.standardModule a, #Site .pageList li.standardModule span { font-weight:bold; text-decoration:none; display:inline; float:left; color:#000; font-size:0.8em; min-height:20px; } #Site .pageList li.standardModule a.contactusLink { background-image:url("/MarkTemplates/Common/Images/list_background.gif"); background-repeat:no-repeat; background-position:left top; height:auto; min-height:10px; padding-bottom:1px; width:100%; } #Site .pageList li.standardModule a:hover, #Site .pageList li a:hover { color:#999; } #Site .pageList li.standardModule a.moduleButton { color:#fff; background-color:#af292b; float:right; width:auto; margin:4px 20px 4px 0px; padding:2px 4px 2px 4px; } #Site .pageList li.standardModule a.moduleButton:hover { color:#fff; background-color:#cf4b4d; } #Site .pageList li.standardModule .inputContainer { width:106px; min-width:196px; height:32px; min-height:32px; margin:0px; margin: 0px 0px 0px 0px; padding: 6px 20px 0px 8px; background-image:url("/MarkTemplates/Common/Images/input_background_transp.gif"); background-repeat:no-repeat; background-position:left top; display:block; float:left; } #Site .pageList li.standardModule input { width:164px; border:0px solid #000; } #Site .pageList li.standardModule img { float:right; display:inline; margin-right:12px; } #Site .pageList li.standardModule a img { float:none; vertical-align:baseline; } #Site .pageList li p img { margin-right:8px; } #Site .pageList li.standardModule #RightBlockContactListDetails { font-size:0.8em; font-weight:normal; float:left; border:none; background:none; } #Site .pageList li.standardModule #RightBlockContactListDetails ul { padding-left: 0px; margin-top: 0px; } #Site .pageList li.standardModule #RightBlockContactListDetails ul li a { width:192px; margin-top:0px; } #Site .pageList li.standardModule h3 { font-size:1.1em; margin:0px; padding:0px; } #Site .pageList li.standardModule #RightBlockContactListDetails a , #Site .pageList li.standardModule #RightBlockContactListDetails span { font-size:1em; font-weight:bold; margin-top:8px; } /*- - - - - - - - - - - Element Rules*/ #Site .pageList li { display:block; list-style:none; margin-bottom:16px; width:196px; float:right; } #Site .KnowITPlugIn-DocumentManagement-DefaultControl ul { width:auto; margin:0px; padding:0px; } #Site .KnowITPlugIn-DocumentManagement-DefaultControl li { float:none; width:auto; margin:0px; padding:0px; } #Site #SiteMap,#Site #SiteAlpNum,#Site #SiteForecast { border-bottom:1px solid #aaaaaa; border-top:1px solid #aaaaaa; } #Site #SiteForecast { border-bottom:1px solid #aaaaaa; border-top:1px solid #aaaaaa; height:382px; display:block; } #Site #SiteAlpNum { margin-bottom:16px; } #Site #SiteMap ul,#Site #SiteAlpNum li { list-style:none; padding:0px; margin:0 0 0 8px; } #Site #SiteForecast ul { list-style:none; padding:0px; margin:0; } #Site #SiteForecast ul li { display:inline; width:124px; float:left; text-align:center; margin:1px; background-color:#fff; } #Site #SiteForecast ul li img { display:block; } #Site #SiteForecast ul li span { font-weight:bold; color:#999; } #Site #SiteForecast ul li h1 { margin:2px 0 16px 0px; } #Site #SiteMap li,#Site #SiteAlpNum li { list-style:none; margin:4px; background-image:url("/MarkTemplates/Common/Images/list_minus.gif"); background-repeat:no-repeat; background-position:left 0.3em; } #Site #SiteAlpNum a { padding-left:11px; text-decoration:none; font-weight:bold; margin:0px; padding:1px; } #Site #SiteMap li a, #Site #SiteAlpNum li a { padding-left:11px; text-decoration:none; font-weight:bold; } /*#Site .KFItem { clear:both; line-height:48px; margin:16px 0px 0px 0px; border-bottom:1px solid #aaaaaa; border-top:1px solid #bda11b; display:block; font-size:0.8em; font-weight:bold; page-break-after:avoid; margin:0px; vertical-align:middle; text-decoration:none; } */ #Site .KFItemLive { line-height:48px; margin:16px 0px 0px 0px; display:block; margin:0px; } #Site .KFItemLive .KFImg { float:right; vertical-align:middle; } #Site .KFfutureList, #Site .KFpastList { list-style:none; margin:0px; padding:0px; } #Site .KFfutureList li { list-style:none; margin:0px; padding:0px; } #Site .KFfutureItem, #Site .KFpastItem { list-style:none; margin:0px; padding:0px; } #Site .KFpastList table { margin:16px 0px 0px 0px; } #Site .KFpastItem { font-size:0.8em; } #Site .KFfutureItem li, #Site .KFfutureList td, #Site .KFpastList td { line-height:normal; list-style:none; margin:0px; padding:4px; background-color:#eaeaea; } #Site .KFfutureList td,#Site .KFpastList td { vertical-align:top; } #Site .KFfutureList table { margin:16px 0px 0px 0px; } #Site .KFfutureItem li.header, #Site .KFfutureList td.header, #Site .folderHeader, #Site .KFpastList td.header { background-color:#6f8739; font-weight:bold; color:#fff; } #Site .KFfutureList td.header { font-size:0.8em; } #Site .KFpastList td.header { font-size:0.8em; padding:4px; } #Site .KFfutureItem li.subheader, #Site .KFpastItem li.subheader { font-weight:bold; margin:0px; } #Site .KFfutureList td.item, #Site .KFpastList td.item { background-color:#fff; width:96px; font-size:0.8em; } #Site .KFfutureItem li.item a.KFItem { } .ImageCaption { font-size:0.7em; font-family:'Verdana'; color:#333333; } #ContactSymbol { padding-top:12px; padding-left:3px; }