/************************************** 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 { display:block; margin: 0px 0px 0px 15px; padding:0px; width: auto; height:19px; } #Site #TopImage { margin:0px auto; padding:0px; width:939px; text-align:left; } /*- - - - - - - - - - - - -Class rules*/ /*- - - - - - - - - - - Element Rules*/ /*------------------------------------- TopList Rules --------------------------------------*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #TopList { list-style: none; display:block; margin: 0px 15px 0px 15px; padding:0px; } /*- - - - - - - - - - - - -Class rules*/ #Site #TopList li.separator { margin-left:40px; } /*- - - - - - - - - - - Element Rules*/ #Site #TopList li a { display: block; background-color:#004A99; color:#fff; text-decoration: none; padding:1px 14px 2px 14px; font-weight:bold; font-size:1em; } #Site #TopList li.selected a { background-color: #919191; } #Site #TopList li a:hover { background-color: #919191; } #Site #TopList li { list-style:none; float:left; margin: 0; margin-right:4px; } /* #Site #TopList li.last.selected{ background-image: url("../Images/tab_right_selected_last.gif"); }*/ /*===================================== PageTrail Rules ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #PageTrail { display:block; clear:both; background:none; } /*- - - - - - - - - - - - -Class rules*/ /*- - - - - - - - - - - Element Rules*/ /*------------------------------------- TrailList Rules --------------------------------------*/ /*- - - - - - - - - - - - - - ID Rules*/ /*- - - - - - - - - - - - -Class rules*/ #Site #TrailList .selected, #Site #TrailList .expanded { color:#000; } /*- - - - - - - - - - - Element Rules*/ #Site #TrailList a { color:#d63a26; } /*===================================== 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; } /*- - - - - - - - - - - - -Class rules*/ #Site #SceneFull .standardContent { display:block; width:504px; padding:0px; margin-left:171px; margin-bottom:24px; } #Site #SceneFull .standardContent .contentIDlogo { /*margin-left:397px; - Fix for safari bug*/ float:right; margin-top:20px; } /* DJ 2008-06-25 */ #Site #SceneFull .standardContent .contentIDlogoPrint { display:none; } #Site #SceneFull .standardContent h1 { font-size:1.3em; } #Site #SceneFull .standardContent h2 { font-size:1.1em; margin:0px; padding:0px; } #Site #SceneFull .standardContent div h3 { font-size:1.1em; margin:0px; padding:0px; } #Site #SceneFull .standardContent p { line-height:1.3em; margin-top:0px; } #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:5px; } #Site #SceneFull .standardContent .horizontalImageList li.last { margin-right:0px; padding:0px; margin: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; } #Site #SceneStart .standardContent .startTop { width:688px; } #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 { display:block; float:left; padding:0px; margin-left:6px; margin-right:22px; color:#6f8839; font-weight:bold; display:inline; } #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:#31a1d4; font-weight:bold; } #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, #Page h2 { font-size:1.1em; font-weight:normal; page-break-after:avoid; margin: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; } #Site #SceneStart .standardContent .startThreeCol div div { padding:0px } #Site #SceneStart .standardContent .startThreeCol div div p { line-height:1.3em; } /*- - - - - - - - - - - Element Rules*/ /*------------------------------------- ScenelList Rules --------------------------------------*/ /*- - - - - - - - - - - - - - ID Rules*/ /*- - - - - - - - - - - - -Class rules*/ #Site #Page #SceneList { background:url("/MarkTemplates/Common/Images/list_bottom.gif") no-repeat bottom left; } #Site #Page #SceneList li { background:url("/MarkTemplates/Common/Images/list_top.gif") no-repeat; } #Site #Page #SceneList li li { background:none; } #Site #Page #SceneList li li li { padding-left:10px; } #Site #Page #SceneList li li li.unselected.unselectedhaschildren, #Site #Page #SceneList li li li.selectedhaschildren { padding-left:10px; } #Site #Page #SceneList li li.selectedhaschildren { background-color:#d8d8d8; background-image:none; border-top:1px solid #ccc; } #Site #Page #SceneList li li li.selectedhaschildren { border:none; } #Site #Page #SceneList li li.unselected.unselectedhaschildren a { width:138px; } #Site #Page #SceneList li.unselected.selectedhaschildren a.pathPart { color:#d63a26; } #Site #Page #SceneList li.unselected.selectedhaschildren li a.pathPart { color:#000; width:138px; } #Site #Page #SceneList li li.unselected.selectedhaschildren a.pathPart { color:#d63a26; } #Site #Page #SceneList li.selected a.pathPart, #Site #Page #SceneList li.unselected a.pathPart { color:#000; } #Site #Page #SceneList li.selected a.pathPart:hover { color:#d63a26; } /*- - - - - - - - - - - Element Rules*/ #Site #Page #SceneList { /*background-color:#f7f7f7; background-color:#f6f8f5;*/ background-color:#ededed; } /*------------------------------------- PagelList 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:504px; display:block; float:none; } #Site .standardContent .pageList li { width:504px; 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 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, #Site .pageList li div { /* background-image:url("/MarkTemplates/Common/Images/list_bottom_contact.gif"); */ background-position:left bottom; background-repeat:no-repeat; 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: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 #bda11b; border-top:1px solid #bda11b; } #Site #SiteForecast { border-bottom:1px solid #bda11b; border-top:1px solid #bda11b; 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("../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 #SiteFooter { border-top:3px solid #004A99; } #Site #HeaderList li.search a.SearchLinkButton { background: transparent url(../Images/TopSearchBtn_left.gif) no-repeat scroll left top; } #Site #HeaderList li.search a.SearchLinkButton span { background: transparent url(../Images/TopSearchBtn_right.gif) no-repeat scroll right top; } #ContactSymbol { padding-top:12px; padding-left:3px; }