/************************************** 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. */ /*Uncomment to mark all div containers*/ div { /*border:1px solid red;*/ } /*Uncomment to mark all lists*/ ul { /*border:1px solid blue;*/ } /*===================================== DEVELOPMENT AND TEST - END ***************************************/ html { } img { border: 0; } body { /*Placement of Page*/ margin: 0px; margin-top: 0px; padding: 0px; background-color: #f3f0eb; text-align: center; /*ie centering bug fix*/ /*Default Font settings */ color: #000; font-size: 0.8em; font-family: 'Verdana'; } h1 { font-size: 1.3em; } h2 { font-size: 1.25em; margin: 0px; padding: 0px; } h3 { font-size: 1.1em; margin: 0px; padding: 0px; } a { color: #000000; } a:hover { color: #999; } /*===================================== Site Rules ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site { background-image: url("/MarkTemplates/Common/Images/site_background.gif"); width: 970px; margin: 0px auto; padding-top: 10px; } /*- - - - - - - - - - - - -Class rules*/ /* DJ 2008-06-15 */ #Site .hidden { display: none; } /* DJ 2008-06-26 */ #Site .newwindow { border: 0; } /*- - - - - - - - - - - Element Rules*/ /*===================================== SiteHeader Rules ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #SiteHeader { margin: 0px auto; width: 939px; height: 55px; } /*- - - - - - - - - - - - -Class rules*/ #Site #SiteHeader img.logo { display: inline; float: left; border: 0; } /*- - - - - - - - - - - Element Rules*/ /*------------------------------------- HeaderList Rules --------------------------------------*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #HeaderList { float: right; margin: 0px; } /*- - - - - - - - - - - - -Class rules*/ #Site #HeaderList li.search { /* background-image: url(/MarkTemplates/Common/Images/TopSearchInput.gif);*/ width: 190px; background-position: right; background-repeat: no-repeat; height: 55px; float: left; } #Site #HeaderList .search a { width: 120px; height: auto; background-image: none; } #Site #HeaderList .search a:hover { background-image: none; } #Site #HeaderList .search input.searchbutton { display: block; font-size: 10px; color: #fff; font-weight: 700; font-family: Verdana; font-size: 0.7em; padding: 0px 4px 0px 4px; width: auto; background-color: Transparent; border: 1px solid #ddd; border-style: none; cursor: pointer; } #Site #HeaderList .search label.SearchAreaInputLabel { display: none; } #Site #HeaderList .search input.SearchButtonHide { display: none; } #Site #HeaderList .search input { width: 80px; height: 10px; font-size: 10px; border-color:#fff; float: left; border: none; padding:3px 1px 0 3px; margin: 20px 3px 0 40px; } #Site #HeaderList li.search a.SearchLinkButton { background: transparent url(/MarkTemplates/Common/Images/TopSearchBtn_left.gif) no-repeat scroll left top; display: inline-block; float: left; font-size: 12px; font-style: normal; font-variant: normal; font-weight: bold; height: 28px; margin-right: 5px; padding-left: 10px; text-align: center; text-decoration: none; width: auto; color: #000; margin-top: 17px; margin-left: 10px; font-size: 10px; } #Site #HeaderList li.search a.SearchLinkButton:hover { text-decoration: underline; } #Site #HeaderList li.search a.SearchLinkButton span { background: transparent url(/MarkTemplates/Common/Images/TopSearchBtn_right.gif) no-repeat scroll right top; color: #FFFFFF; cursor: pointer; display: inline-block; height: 22px; padding-left: 0px; padding-right: 10px; padding-top: 4px; color: #000; font-weight: normal; } /*- - - - - - - - - - - Element Rules*/ #Site #HeaderList li { display: inline; } #Site #HeaderList a { width: 70px; height: 55px; color: #fff; float: left; text-decoration: none; font-weight: bold; font-size: 0.7em; } #Site #HeaderList a:hover { } #Site #HeaderList li a img { width: 17px; height: 17px; margin-top: 14px; border: none; margin-bottom: 3px; } /*===================================== PageTrail Rules ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #PageTrail { width: 895px; height: 30px; margin: 0px auto; padding: 3px 0 0 12px; background: transparent url(/MarkTemplates/Common/Images/PageTrailBackground.gif) repeat-x left top; } /*- - - - - - - - - - - - -Class rules*/ /* DJ 2008-06-23:*/ #Site #PageTrail .intro { float: left; padding: 6px 0px 0px 6px; } /*- - - - - - - - - - - Element Rules*/ /*------------------------------------- TrailList Rules --------------------------------------*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #TrailList { list-style: none; padding: 6px; margin: 0px; float: left; } /*- - - - - - - - - - - - -Class rules*/ /* DJ 2008-06-23: 'selected' not clickable (no a-tag) */ #Site #TrailList .selected { font-weight: bold; } /* #Site #TrailList .selected a:hover { font-weight:bold; color:#693; }*/ /*- - - - - - - - - - - Element Rules*/ #Site #TrailList li, #Site #PageTrail .intro { display: inline; font-size: 0.85em; font-family: "Arial"; } #Site #TrailList a { text-decoration: none; } #Site #TrailList a:hover { color: #999; text-decoration: none; } /*------------------------------------- ScenelList Rules --------------------------------------*/ /*- - - - - - - - - - - - - - ID Rules*/ /*- - - - - - - - - - - - -Class rules*/ #Site #Page #SceneList ul li.haschild { background-image: url("../Images/list_plus.gif"); background-repeat: no-repeat; background-position: left 0.3em; width: 100%; } /*- - - - - - - - - - - Element Rules*/ #Site #Page #SceneList ul { margin-left: 0px; padding: 0px; margin-top: 0px; list-style-type: none; } #Site #Page #SceneList { width: 166px; float: left; display: block; margin: 0px; margin-left: 0px; padding: 0px; text-align: left; list-style-type: none; } #Site #Page #SceneList li { display: block; margin:0; padding:0; background-repeat: no-repeat; background-position: left 0.3em; overflow: hidden; width: 166px; } #Site #Page #SceneList li a { display: inline-block; padding:5px 0 5px 11px; text-decoration: none; color: #000; font-size: 1em; font-weight: bold; color: #000; width:100%; border-bottom:1px solid #dadbd9; } #Site #Page #SceneList li li a { font-size: 0.85em; font-weight: normal; padding-left:27px; width:135px; } #Site #Page #SceneList li a.selected { font-weight: bold; } /* Nivå 1 */ #Site #Page #SceneList li li.unselected.unselectedhaschildren a, #Site #Page #SceneList li li.selectedhaschildren a { background:url('/MarkTemplates/Common/Images/list_open.png') 7px 4px no-repeat; border-bottom:0px; } #Site #Page #SceneList li li.unselected.unselectedhaschildren a { border-bottom:1px solid #dadbd9; } #Site #Page #SceneList li li.selectedhaschildren { background:url('/MarkTemplates/Common/Images/list_open_background.png') left top repeat-x; background-color:#d2d6bf; border-bottom:1px solid #c1c2c0; } #Site #Page #SceneList li li.selectedhaschildren a { background:url('/MarkTemplates/Common/Images/list_close.png') 7px 4px no-repeat; font-weight:bold; color:#000; } #Site #Page #SceneList li li.unselected.selectedhaschildren a.pathPart { color:#6f8839; } #Site #Page #SceneList li li.selected a.pathPart { font-weight:bold; } /* Nivå 1 slut */ /* Nivå 2 */ #Site #Page #SceneList li li.unselected.selectedhaschildren li.selected a.pathPart { color:#000; } #Site #Page #SceneList li li.unselected.unselectedhaschildren li a, #Site #Page #SceneList li li.selectedhaschildren li a { font-weight:normal; background-image:none; padding-left:27px; color:#000; } /* Nivå 2 slut */ /* Nivå 3 */ #Site #Page #SceneList li li li.selected a.pathPart, #Site #Page #SceneList li li li.unselected a.pathPart { font-weight:bold; color:#000; } #Site #Page #SceneList li li li.selectedhaschildren a.pathPart, #Site #Page #SceneList li li li.unselectedhaschildren a.pathPart { background:url('/MarkTemplates/Common/Images/list_minus.gif') 16px 7px no-repeat; color:#6f8839; } #Site #Page #SceneList li li li.unselected.unselectedhaschildren, #Site #Page #SceneList li li li.selectedhaschildren { background-image:none; padding-left:0px; } #Site #Page #SceneList li li li.unselected.unselectedhaschildren a, #Site #Page #SceneList li li li.selectedhaschildren a { background:url('/MarkTemplates/Common/Images/list_plus.gif') 16px 7px no-repeat; } /* Nivå 3 slut */ /* Nivå 4 */ #Site #Page #SceneList li li li li.unselected, #Site #Page #SceneList li li li li { padding-left:10px; } #Site #Page #SceneList li li li li.unselected a, #Site #Page #SceneList li li li li.selected a.pathPart { background-image:none; color:#000; } /* Nivå 4*/ #Site #Page #SceneList li a:hover { color: #999; } /*===================================== PageList Rules ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site .pageList li.standardModuleSMHI a.SMHICurrentLink { font-weight: bold; text-decoration: none; display: inline; float: left; color: #000; font-size: 0.8em; width: 140px; } #Site .pageList li.standardModuleSMHI a.SMHICurrentLink img { float: right; margin-bottom: 12px; } /*===================================== SiteFooter Rules ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ #Site #SiteFooter { clear: both; text-align: left; width: 907px; height: auto; margin: 0px auto; padding: 4px 0px 4px 0px; font-size: 0.7em; /*font-weight:bold;*/ border-top: 3px solid #6f8839; } /*- - - - - - - - - - - Element Rules*/ #Site #SiteFooter a { display: inline; float: right; font-style: Italic; text-decoration: none; font-weight: normal; margin-left: 16px; color: #000; } /*===================================== SiteEnd Rules ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ #SiteEnd { height: 9px; margin-bottom: 8px; display: block; clear: both; } /*===================================== Search Rules - adapted from epi styles ======================================*/ /*- - - - - - - - - - - - - - ID Rules*/ #SearchArea { border-bottom: none; margin: 8px 0 8px; font-family: Tahoma; color: #000; padding: 0 8px 8px 0px; } #SearchArea .searchText { width: 350px; } #SearchArea .button { width: 120px; margin: 0px; } #SearchArea #AdvancedArea { width: 484px; border: 1px solid #eee; margin: 8px 0px 8px 0px; background-color: #f9f9f9; } #ResultArea { float: left; margin: 0 0 25px 0; float:left; width:640px; } div.SearchResultDiv { width:94%; } div.SearchSpecificationDiv { width: 250px; float: right; margin-top: 20px; float:right; } div.SearchSpecTop { background: url(/SiteSeeker/Images/SearchSpecTopBG.gif) top left no-repeat; width: 250px; height: 29px; text-align: center; padding-top: 12px; } div.SearchSpecTop h2 { font-size: 14px !important; font-weight: bold; } div.SearchSpecMiddle { background: url(/SiteSeeker/Images/SearchSpecMiddleBG.gif) top left repeat-y; width: 226px; height: auto; text-align: left; padding: 12px; } div.SearchSpecBottom { background: url(/SiteSeeker/Images/SearchSpecBottomBG.gif) top left no-repeat; width: 250px; height: 44px; margin-bottom: 15px; } .CatTabsArea { background: url(/SiteSeeker/Images/ResultAreaBG.gif) bottom left no-repeat; height: 74px; width: 907px; } ul.CatTabUL { margin: 0; padding: 0; float: left; list-style: none; } li.CatTabLI, li.CatTabLI.ess-cat-current { background: url(/SiteSeeker/Images/SiteseekerTab_left.gif) top left no-repeat; display: inline-block; font-size: 11px; font-style: normal; font-variant: normal; font-weight: bold; height: 30px; margin-right: 5px; margin-top: 3px; padding-left: 6px; text-align: center; text-decoration: none; width: auto; float: left; list-style: none; } li.CatTabLI.ess-cat-current { background: url(/SiteSeeker/Images/SiteseekerTabSelected_left.gif) top left no-repeat; margin-top: 0; height: 33px; } li.CatTabLI a, li.CatTabLI a:visited, li.CatTabLI a:hover, li.CatTabLI.ess-cat-current a, li.CatTabLI.ess-cat-current a:visited, li.CatTabLI.ess-cat-current a:hover { background: url(/SiteSeeker/Images/SiteseekerTab_right.gif) top right no-repeat; cursor: pointer; display: inline-block; height: 21px; padding-right: 8px; padding-left: 2px; padding-top: 9px; color: #6F8839 !important; text-decoration: none; } li.CatTabLI.ess-cat-current a, li.CatTabLI.ess-cat-current a:hover, li.CatTabLI.ess-cat-current a:visited { background: url(/SiteSeeker/Images/SiteseekerTabSelected_right.gif) top right no-repeat; color: #FFF !important; height: 24px; } li.CatTabLI a:hover, li.CatTabLI.ess-cat-current a:hover { text-decoration: underline; color: #FFF !important; } #ResultArea ol { margin-left: 32px; } dl.SearchResultDL { margin-top: 20px; } dl.SearchResultDL dt.hit-alternating { background-color:#F6F8F5; padding:0; } dl.SearchResultDL dd.hit-alternating { background-color:#F6F8F5; } .SearchResultDL .ess-description { margin-top:0; padding-top:5px; padding-left:5px; } .SearchResultDL .ess-hit-header { margin-bottom:0 !important; padding-left:5px !important; padding-top:5px !important; } .SearchResultDL .HitResultSpec { padding-left:5px; } #ResultArea ol li { padding: 4px; border-top: 1px solid #ddd; } #ResultArea ol li p { padding: 0px; margin: 4px 0px 4px 0px; } #ResultArea ol li .dateTime { font-weight: bold; font-family: Arial; font-size: 0.8em; font-style: italic; } #ResultArea ol li a { font-weight: bold; font-family: Arial; font-size: 1.2em; } #ResultArea ol li.alternate { } #ResultArea ol li.last { visibility: hidden; display: none; } #ResultArea .HitResultSpec { width: 400px; height: 20px; padding-top: 5px; padding-left: 6px; font-size: 0.85em; } .HitResultSpecBColor { background-color: #eaeaea; margin-left:0; padding-left:6px; } .ess-description { font-size: 0.85em; line-height: 1.3em; margin-top: 5px; } .SearchSpecificationText, p.SearchSpecificationText { background-color: #eaeaea; border: 1px solid #E0E0E0; font-size: 0.85em; line-height: 1.4em; margin: 25px 0; padding: 12px; } .ess-pagenav a, .ess-pagenav a.PagingSelected { background: url(/SiteSeeker/Images/SearchPagingBG.gif) top left no-repeat; color: #000; display: inline-block; height: 17px; margin-left: 0px; padding: 2px 6px 0 3px; text-align: center; width: 13px; font-size: 11px; font-weight: normal !important; } .ess-pagenav a.PagingSelected { background: url(/SiteSeeker/Images/SearchPagingSelectedBG.gif) top left no-repeat; color: #FFF !important; font-weight: normal; } .ess-pagenav a.PagingNext, .ess-pagenav a.PagingPrev { background: none; width: auto; text-align: left; padding: 0; } /*Folder list rules*/ #Site .folderContentAlt td { margin: 0px; padding: 4px; background-color: #eaeaea; } #Site .folderContent { margin: 0px; padding: 4px; background-color: #fff; } #Site .folderTable { margin-bottom: 16px; } #Site .folderContentAlt .folderContentTitle, #Site .folderContent .folderContentTitle { width: 100%; } #Site .folderHeader { padding: 4px; } #Site .KnowITPlugIn-DocumentManagement-DefaultControl .ListLI .Headline { font-size: 0.8em; font-weight: bold; } #Site .KnowITPlugIn-DocumentManagement-DefaultControl .ListLI a { font-size: 0.8em; font-weight: normal; color: #000; } #Site .KnowITPlugIn-DocumentManagement-DefaultControl .LinkUL { margin: 5px 0px 0px 0px; padding: 0px; } #Site .KnowITPlugIn-DocumentManagement-DefaultControl .LinkLI { margin-bottom: 5px; } #Site .KnowITPlugIn-DocumentManagement-DefaultControl .LinkLI a { padding-top: 3px; } .BusinessCardImage { float: left; margin-right: 8px; } #Businesscard { margin-top: 24px; display: block; clear: both; } .DocumentContent { padding-top: 5px; } .DocumentContent ul { margin: 0; padding: 0; list-style: none; } .DocumentContent ul li { display: block; padding: 5px 0 5px 0; } .DocumentContent ul li.even { background-color: #f0f2e9; } .DocumentContent ul li a.doc, .DocumentContent ul li a.docx, .DocumentContent ul li a.pdf, .DocumentContent ul li a.doc:visited, .DocumentContent ul li a.docx:visited, .DocumentContent ul li a.pdf:visited { margin-left: 10px !important; padding: 0 0 0 22px; background-repeat: no-repeat; background-position: 0 0; display: inline-block; } .DocumentContent ul li a.doc:link, .DocumentContent ul li a.doc:visited, .DocumentContent ul li a.docx:link, .DocumentContent ul li a.docx:visited { background-image: url(../images/icon_doc.gif); } .DocumentContent ul li a.pdf:link, .DocumentContent ul li a.pdf:visited { background-image: url("/MarkTemplates/Common/Images/icon_pdf.gif"); } span.FileInfo { color: #666; margin-left: 10px; font-size: 11px; } .DocumentContentEditor { padding-bottom: 15px; } .ContactUsSpan { cursor: pointer; float: left; font-weight: bold !important; font-size: 1.1em !important; width: auto !important; padding:8px 0 0 42px; } .ContactUsSymbol { cursor: pointer; float: right; font-weight: bold !important; font-size: 1.1em !important; width: auto !important; } div#translateDiv { background: #FFFFFF none repeat scroll 0 0; border: 1px solid #A0A7AA; padding: 1em 1em 0.5em; position: absolute; width: 18.8em; z-index: 10000; margin-top: 55px; margin-left: -540px; margin-right: 0; display: inline; float: left; } #translateDiv p { text-align: left; } #Site #HeaderList #translateDiv a, #Site #HeaderList #translateDiv a:hover { background: #fff; color: Black; width: auto; height: auto; font-size: 100%; } #Site #HeaderList #translateDiv label { display: block; } #Site #HeaderList #translateDiv a:hover { text-decoration: underline; } #Site #HeaderList #translateDiv a#translateDivCloseTag { float: right; cursor: pointer; background-image: url("/MarkTemplates/Public/Images/closeBtn.gif"); background-repeat: no-repeat; text-decoration: none; display: block; width: 16px; height: 16px; } #Site #HeaderList #translateDiv a#translateDivCloseTag span { visibility: hidden; text-decoration: none; cursor: pointer; display: block; width: 16px; height: 16px; } #SearchFooterHolder { float:left; width:97%; } #Site #SceneFull .standardContent #SearchFooterHolder .PageFoot { background-image: url(/MarkTemplates/Common/Images/publish_block_search.gif); } #Site #SceneFull .standardContent #SearchFooterHolder .PageFootExtra { background-image: url(/MarkTemplates/Common/Images/publish_block_extra_search.gif); background-repeat: repeat-y; width: 100%; } #Site #SceneFull .standardContent #SearchFooterHolder .pageFootEnd { background-image: url(/MarkTemplates/Common/Images/publish_block_bottom_search.gif); background-repeat: no-repeat; width: 100%; } fieldset { padding:10px 0 10px 0; border:none; margin-left:0; } fieldset legend { padding-left:0; font-weight:bold; white-space: pre-wrap; }