/* -------------------------------------------------------------- TABLE OF CONTENTS 1. Cross-browser Reset 2. Standard elements defaults - Default styles for standard HTML elements. See /style-guide.html for markup examples. 3. Style Library - styles repeated through site but aren't structural elements. 4. Main Structure - Includes header, main navigation, main wrapper, footer etc. 5. Main Structure Alternative Styles - Styles for main structure elements that have different styles in different templates 6. Template Styles 7. Page Specific Styles STYLE SHEET COMMENT DEFINITIONS PFD (Prevent float drop) -- Denotes a fix for ie6 to prevent layout from breaking with oversized content IE -- Denotes a style that has an alternative version in the ie.css style sheet IE6 -- Same as above but alternative style is located in ie6.css style sheet HL (hasLayout) -- Denotes a hasLayout fix for IE DMB (Double margin bug) -- Denotes double margin fix for ie6 SL - Denotes that a element draws most of its styles from style library -------------------------------------------------------------- */ /* -------------------------------------------------------------- 1. Cross-browser reset -------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { line-height: 1.5; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } table, td, th { vertical-align: middle; } /* Remove possible quote marks (") from ,
. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Remove annoying border on linked images. */ a img { border: none; } /* PC FF3 adds an outline to Flash objects? */ a, object { outline: none; } /* -------------------------------------------------------------- 2. Standard elements defaults -------------------------------------------------------------- */ /* Headings -------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: #FFFFFF; margin: 0; margin-bottom: 0.5em; font-weight: normal; } h1 { font-size: 2.667em; } h2 { font-size: 1.667em; font-weight: bold; } h3 { font-size: 1.083em; text-transform: uppercase; } h4, h5, h6 { font-family: arial, sans-serif; } h4 { font-size: 1em; text-transform: uppercase; font-weight: bold; } h5 { font-size: 0.917em; font-weight: bold; } h6 { font-size: 0.833em; text-transform: uppercase; } h1 a, h1 a:link, h2 a, h2 a:link, h3 a, h3 a:link, h4 a, h4 a:link, h5 a, h5 a:link, h6 a, h6 a:link { color: #8AC7E6; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #DD0000; } /* Text Elements -------------------------------------------------------------- */ body { color: #CCCCCC; font: 62.5% "Times New Roman", georgia, serif; } p { color: #CCCCCC; font-size: 1.167em; margin: 0 0 1em; line-height: 1.5;} .summary p { color: #9EA8AD; font-size: 1.5em; font-style: italic; } a { text-decoration: underline; } a,a:link { color: #8AC7E6; } a:visited { color: #617179; } a:hover,a:active,a:focus { color: #DD0000; } img { border: 5px solid #FFFFFF; } blockquote { margin: 0; margin-bottom: 1em; color: #9EA8AD; font-style: italic; font-size: 1.167em; } strong { font-weight: bold; } em { font-style: italic; } address { font-style: normal; } cite { font-size: 0.769em; font-style: normal; color: #FFFFFF; text-transform: uppercase; } small { font-size: 0.833em; } /* Following six styles generally do not need to be edited */ sup, sub { line-height: 0; } dfn { font-style: italic; } del { color:#666; } pre { white-space: pre; } pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } /* Lists -------------------------------------------------------------- */ li ul, li ol { margin: 0 1.5em; margin-top: 1em; } ul, ol { margin: 0 1.5em 1.5em 1.5em; } ul ol li { background: none; padding-left: 0; } ul { margin-left: 1.5em; } ol { list-style-type: decimal; } li { color: #9EA8AD; font-family: arial, sans-serif; margin-bottom: 1em; line-height: 1.5; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em;} /* Tables -------------------------------------------------------------- */ table { margin-bottom: 1.4em; width:100%; color: #FFFFFF; background: #19303C; border: 1px solid #617179; border-bottom: none; border-right: none; font-family: arial, sans-serif; } th { background: #617179 url(../images/design/th-bg.gif) 0 0 repeat-x; color: #000000; text-transform: uppercase; font-weight: bold; border-right: 1px solid #617179; } th,td,caption { padding: 4px 5px 8px 5px; text-align: center; } td { border-bottom: 1px solid #617179; border-right: 1px solid #617179; } tr.odd td { background: #334752; } tfoot { font-style: italic; border-top: 1px dashed #CCCCCC; } caption { text-align: left; } /* Forms ----------------------------------------------------------- */ fieldset { margin-bottom: 1.5em; padding: 1em 0; border-bottom: 1px dashed #617179; border: 0; } fieldset.last { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } legend { font-weight: bold; } label { color: #D9DDDE; font: bold 0.917em arial, sans-serif; float: left; margin-right: 10px; width: 100px; text-align: right; } .fieldArea { margin-bottom: 0.833em; } .fieldArea input, .fieldArea textarea { width: 198px; font-family: arial, sans-serif; font-size: 1em; } input.protect { display: none; } input.submit, span.submit, a.submit { text-decoration: none; text-align: center; cursor: pointer; border: 1px solid #40535C; background-color: #62727a; color: #FFFFFF; font: bold 0.917em verdana; padding: 4px 6px; text-transform: uppercase; } input.submit:hover, span.submit:hover, a.submit:hover { background-color: #778b95; } span.message { display: block; font-size: 0.917em; text-align: right; padding-top: 0.5em; } span.error { color: #DD0000; } div#errors { background: #FFF5E6 url(../images/forms/error.gif) 10px 0.5em no-repeat; border: 1px solid #FFEBCC; font: normal 0.846em arial; margin: 0 0 1.5em 0; padding: 0.5em 10px 0.5em 50px; } div#errors h4 { color: #DD0000; font-weight: bold; } div#errors ul { margin-bottom: 0; } div#errors p { margin-bottom: 0; color: #000000; } div#errors li { margin-bottom: 0.5em; font-size: 1.084em; color: #000000; } /* -------------------------------------------------------------- 3. Style Library - Styles repeated through site but aren't structural elements ----------------------------------------------------------- */ a.callout { display: block; } a.callout img { border: 0; } .floatLeft { float: left; } .floatRight { float: right; } .clearLeft { clear: left; } .clearRight { clear: right; } .clear {clear: both;} img.floatLeft { margin: 0 1.5em 0 0; } img.floatRight { margin: 0 0 1.5em 1.5em; } .seeAll { display: block; height: 12px; width: 42px; position: absolute; right: 57px; top: 3px; background: url(../images/btn/btn-seeall.gif) 0 0 no-repeat; text-indent: -9999px; } .seeAll:hover { background-position: 0 -16px; } /* Search Form Styles ----------------------------------------------------------- */ .searchForm { background: #001926 url(../images/design/search-right-shadow.gif) 0 2px repeat-x; border: 1px solid #001926; padding: 2px; width: 195px; } .searchForm form { background: url(../images/design/search-left-shadow.gif) 0 0 no-repeat; } .searchForm .query { border: 0; background: none; color: #FFFFFF; padding-right: 4px; padding-top: 3px; width: 145px; float: left; font: 0.917em arial, sans-serif; } .searchForm input.submit { width: 45px; height: 19px; border: 0; padding: 0; margin-top: 1px; font-size: 0; cursor: pointer; line-height: 0; overflow: hidden; text-indent: -9999px; float: left; background: url(../images/btn/search.gif) 0 0 no-repeat;} .searchForm input.submit:hover { background-position: 0 -19px; } /* Page List Styles ----------------------------------------------------------- */ .pageList { padding-left: 140px; float: left; margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px dashed #617179; } .pageList img { margin-left: -140px; float: left; } .pageListLast { border-bottom: 0; } /* Pagination Styles ----------------------------------------------------------- */ .pagination { margin-bottom: 2em; } .pagination .pageInfo { float: right; font-weight: bold; } /* CF */ .pagination .first, .pagination .previous, .pagination .next, .pagination .last { background: url(../images/design/pagination.gif) 0 0 no-repeat; display: block; height: 16px; width: 16px; text-indent: -9999px; float: left; margin-right: 5px; } .pagination .first:hover { background-position: 0 -16px; } .pagination .previous { background-position: -16px 0;} .pagination .previous:hover { background-position: -16px -16px; } .pagination .next { background-position: -32px 0;} .pagination .next:hover { background-position: -32px -16px; } .pagination .last { background-position: -48px 0;} .pagination .last:hover { background-position: -48px -16px; } .pagination .disabled { display: none; } .pagination .paginator { float: left; } .pagination .paginator .page { margin-right: 5px; } .pagination .paginator .current { color: #9EA8AD; text-decoration: none; } .pagination .ellipse { float: left; margin-right: 5px; } /* Lightbox styles ----------------------------------------------------------- */ .simple_overlay { display: none; z-index: 10000; background: #FFFFFF; width: 640px; padding: 35px; background: url(../images/test/white.png) 0 0 no-repeat; } .simple_overlay img { border: 0 } .simple_overlay .close { position:absolute; right:-15px; top:-15px; background: #000; cursor:pointer; height:35px; width:35px; } /* Easy Clearing ----------------------------------------------------------- */ .group:after, .pagination:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* CF, IE.css, IE6.css */ /* -------------------------------------------------------------- 4. Main Structure - Includes header, main navigation, main wrapper, footer etc ----------------------------------------------------------- */ body { margin: 0; text-align: center; background: #001a26; } #wrapper { text-align: left; padding: 0; margin: 0 auto; width: 796px; padding: 0 82px; font-size: 1.2em; background: url(../images/design/general-bg.jpg) 50% 0 no-repeat; } #header { height: 132px; position: relative; } #logo { width: 159px; height: 154px; background: url(../images/design/logo.png) 0 0 no-repeat; position: absolute; z-index: 100; top: 21px; left: 0; margin: 0; padding: 0; font-size: 1em; } #logo a { width: 159px; height: 154px; display: block; text-indent: -9999px; } #contactInfo { position: absolute; right: 10px; top: 12px; text-align: right; font-family: arial, sans-serif; } #contactInfo p { color: #999999; margin-bottom: 0; text-transform: uppercase; font-size: 0.917em; } #contactInfo span { color: #FFFFFF; font-size: 2.333em; display: block; } #mainMenu { list-style: none; position: relative; height: 50px; width: 720px; margin: 0; top: 82px; left: 68px; z-index: 10; } #mainMenu li { float: left; } #mainMenu a { display: block; height: 50px; background: url(../images/design/navigation.gif) 0 0 no-repeat; text-indent: -9999px; } #mainMenu li#security-management a { width: 219px; background-position: 0 0;} #mainMenu li#threat-management a { width: 109px; background-position: -219px 0;} #mainMenu li#risk-management a { width: 109px; background-position: -328px 0;} #mainMenu li#emergency-management a { width: 125px; background-position: -437px 0;} #mainMenu li#about a { width: 74px; background-position: -562px 0;} #mainMenu li#contact a { width: 84px; background-position: -636px 0;} #mainMenu li#security-management a:hover { background-position: 0 -50px;} #mainMenu li#threat-management a:hover { background-position: -219px -50px;} #mainMenu li#risk-management a:hover { background-position: -328px -50px;} #mainMenu li#emergency-management a:hover { background-position: -437px -50px;} #mainMenu li#about a:hover { background-position: -562px -50px;} #mainMenu li#contact a:hover { background-position: -636px -50px;} #mainMenu li#security-management a.active { background-position: 0 -100px;} #mainMenu li#threat-management a.active { background-position: -219px -100px;} #mainMenu li#risk-management a.active { background-position: -328px -100px;} #mainMenu li#emergency-management a.active { background-position: -437px -100px;} #mainMenu li#about a.active { background-position: -562px -100px;} #mainMenu li#contact a.active { background-position: -636px -100px;} #header .searchForm { position: absolute; top: 35px; left: 355px; } /* SL */ #localNav { float: left; width: 148px; margin-right: 28px; padding-top: 60px; } #localNav ul { margin: 0; } #localNav li { background: url(../images/design/li-bg.gif) 0 100% repeat-x; padding-bottom: 2px; list-style: none; border-right: 1px solid #19303C; margin-bottom: 0; } #localNav li.active { border-right: 1px solid #001a26; border-left: 1px solid #19303C; margin-right: -1px; } #localNav a { color: #FFFFFF; text-decoration: none; display: block; padding: 0.75em 10px; text-align: right; font-size: 1.333em; } #localNav a:hover { background: #001a26 url(../images/design/local-hover.gif) 0 0 no-repeat; } #localNav li.active a { background: #001a26 url(../images/design/local-active.gif) 0 0 repeat-y; } #localNav li.active ul { border: 0; background: #001a26 url(../images/design/local-active.gif) 0 0 repeat-y; padding-bottom: 1em; } #localNav li.active ul li { border: 0; background: none; padding-bottom: 0; } #localNav li.active ul li a { background: none; font-size: 1em; text-decoration: underline; margin-left: 10px } #localNav li.active ul li a:hover { background: #001a26; } #localNav li.active ul li.active { border: 0; margin: 0; } #localNav li.active ul li.active a { font-weight: bold; text-decoration: none; } #mainContent { float: left; width: 618px; position: relative; padding: 60px 0 2.5em 0; } #breadCrumbs { color: #617179; font-size: 0.917em; font-family: arial, sans-serif; position: absolute; top: 25px; left: 0; } #breadCrumbs a { color: #617179; text-decoration: none; } #breadCrumbs a:hover { text-decoration: underline; } #footer { color: #617179; font: normal 0.833em arial, sans-serif; min-height: 35px; margin-left: 179px; width: 590px; clear: left; background: url(../images/design/footer-small-bg.gif) 50% 0 no-repeat; border-top: 1px solid #1a303c; padding: 1em 0 2em 0; } #footer a:hover { color: #DD0000; } .footerleft { float: left; display: block; } .copyright { margin-right: 40px; } .footerRight { float: right; text-align: right; } .footerRight a { color: #617179; } p.plauditCredit { clear: both; text-align: right; font-size: 1em; line-height: 1; } p.plauditCredit a { color: #617179; } /* -------------------------------------------------------------- 5. Main Structure Alternative Styles - Styles for main structure elements that have different styles in different templates ----------------------------------------------------------- */ body.inner-category #localNav, body.inner-two #localNav, body.inner-list #localNav { margin-right: 10px; } body.inner-list #wrapper { background-image: url(../images/design/list-bg.jpg); } body.inner-list #breadCrumbs { left: 19px; } body.inner-list #mainContent { padding-top: 45px; } body.inner-contact #wrapper { background-image: url(../images/design/contact-bg.jpg); } body.inner-contact #footer, body.home #footer, body.inner-one #footer { margin-left: 0; width: auto; } body.inner-one #wrapper { background-image: url(../images/design/one-col-bg.jpg); } body.home #wrapper { background-image: url(../images/design/home-bg-2.jpg); min-height: 600px; } /* -------------------------------------------------------------- 6. Template Styles ----------------------------------------------------------- */ /* Homepage Template ----------------------------------------------------------- */ #animation { height: 400px; position: relative; } #animationInner { position: absolute; top: 65px; left: 30px; } #homeContent { background: url(../images/design/home-content-bg.jpg) 0 0 no-repeat; width: 940px; margin-left: -72px; margin-right: -72px; } #homeContentInner { padding: 20px 100px 1.5em 80px; } #callouts { float: left; width: 252px; position: relative; top: -30px; } #intro { float: left; width: 291px; margin-right: 17px; } #intro h2 { margin-bottom: 0.25em; } #intro p { line-height: 1.75; } #newsEvents { float: left; width: 200px; margin-top: 0.75em; position: relative; } #newsEvents h3 { font-weight: bold; padding-right: 110px; padding-bottom: 0.25em; } #newsEvents .rss { display: block; height: 11px; width: 11px; position: absolute; right: 37px; top: 2px; } #newsEvents ul { list-style: none; margin: 0; } #newsEvents li { position: relative; /* HL */ padding-left: 15px; background: url(../images/design/news-bullet.gif) 3px 6px no-repeat; padding-bottom: 0.55em; } /* General Template ----------------------------------------------------------- */ #article { float: left; width: 372px; margin: 0 19px 2em 0; overflow: hidden; /* PFD */} #aside { float: left; width: 219px; border-left: 1px solid #000000; margin: 0 0 2em 0; overflow: hidden; /* PFD */ } #asideInner { padding-left: 15px; padding-top: 15px; } /* Category Template ----------------------------------------------------------- */ #category { float: left; width: 620px; padding-top: 10px; overflow: hidden /* PFD */ } #categoryPhoto { margin-bottom: 10px; } #categoryPhoto img { border: 0; } #categoryContent { background: url(../images/design/category-bg.gif) 0 0 no-repeat; padding-left: 20px; padding-bottom: 1em; } #categoryContentInner { float: left; padding-right: 20px; background: url(../images/design/vertical-bars.gif) 100% 0 repeat-y; /* IE6.css */ width: 350px; margin-right: 30px; padding-top: 1.5em; overflow: hidden; /*PFD*/ } #categoryAside { width: 174px; float: left; padding: 2em 0; overflow: hidden; /*PFD*/ } #relatedArticles { position: relative; } #relatedArticles h3 { padding-right: 50px; padding-bottom: 0.25em; } #relatedArticles .seeAll { right: 0; top: 0px; } /* SL */ #relatedArticles ul { margin-right: 0; } /* List Template ----------------------------------------------------------- */ #listingTop { padding: 0 0 1em 19px; } #listingBottom { border-left: 1px solid #000000; background: url(../images/design/listing-bottom-bg.jpg) 1px 0 no-repeat; padding: 20px 0 0 20px; } /* Contact Us Template ----------------------------------------------------------- */ #contactText { float: left; width: 449px; padding-top: 70px; margin-right: 22px; padding-bottom: 4em; } #contactTextInner { padding: 0 20px 0 30px; } #location { border-top: 1px dashed #617179; padding-top: 2em; } #location h3 { float: left; width: 165px; font-size: 1.167em; margin-bottom: 1em;} #location #details { width: 160px; float: left; font-size: 1.167em; } #location .adr { margin-bottom: 1em; } #location .street-address, #location .tel { display: block; } #contactForm { float: left; width: 315px; padding-top: 70px; padding-bottom: 4em; } /* One Column Template ----------------------------------------------------------- */ #oneColumn { padding: 50px 40px 2em 40px; min-height: 250px; } /* ie6.css */ #oneColumn #breadCrumbs { position: static; margin-bottom: 1em; } /* SL */ /* Two Column Template ----------------------------------------------------------- */ #twoColumn { float: left; width: 620px; margin-top: 10px; padding-top: 1.5em; overflow: hidden; /* PFD */ background: url(../images/design/category-bg.gif) 0 0 no-repeat; padding-bottom: 1em; } #twoColumnInner { padding: 0 20px; } /* -------------------------------------------------------------- 7. Page Specific Styles - If a page has unique styles they would go here ----------------------------------------------------------- */ /* Product Order Pages ----------------------------------------------------------- */ fieldset.oneOfTwoSets { float: left; width: 48%; padding: 0; } fieldset.twoOfTwoSets { float: right; width: 48%; padding: 0; } fieldset.submitSet { clear: right; padding: 0; } /* Search Page ----------------------------------------------------------- */ #searchResults { padding-top: 1.25em; } #results-intro strong { color: #FFFFFF; } #search-results-form { clear: left; margin-bottom: 1em; } #search-results-form .search-result { padding-bottom: 1.5em; margin-bottom: 1.5em; border-bottom: 1px dashed #617179; } .search-result .highlight { font-weight: bold; color: #FFFFFF; } /* Informational Materials Page ----------------------------------------------------------- */ .newsList { float: left; margin-bottom: 1.5em; padding-bottom: 1em; border-bottom: 1px dashed #617179; width: 716px; } .newsList h3 a { color: #FFFFFF; font-size: 1.167em; text-transform: none; } .newsList h3 a:hover { color: #DD0000; } .thumbnail { padding-left: 140px; } .thumbnail img { margin-left: -140px; float: left; } .pageListLast { border-bottom: 0; } /* Individual Article Page ----------------------------------------------------------- */ #individualArticle h1 { margin-bottom: 0; } #individualArticle .datePosted { display: block; margin-bottom: 1em; font-weight: bold; color: #FFFFFF; } .blogComments { padding-top: 1em; } .blogComments h2 { margin-bottom: 0.5em; } #individualArticle .blogComment { margin-bottom: 1.5em; border-bottom: 1px dashed #617179; } #postComment fieldset { margin-bottom: 0; padding-bottom: 0; } #postComment fieldset label, #postComment fieldset span.message { text-align: left; } /* Services Page ----------------------------------------------------------- */ #servicesTop { padding: 45px 0 0 0; margin: 0 20px 0 40px; } #servicesMain { padding: 0 20px 0 40px; } #servicesMain .pageList { width: 596px; } #servicesMain .pageListLast { margin-bottom: 0; } #servicesMain h2 { margin-bottom: 1em; clear: left; border-top: 1px solid #617179; padding-top: 1.25em; } /* Publications Page ----------------------------------------------------------- */ .publications .pageList img { margin-left: 0; float: none; } .publications .pageList a.preview { margin-left: -140px; float: left; text-decoration: none; } .publications .pageList a.preview span { display: block; } .publications .pageList a.preview:hover span.submit { background-color: #778b95; } /* Judicial Counter Violence Page ----------------------------------------------------------- */ #relatedVideo { list-style: none; margin: 0; padding: 0.5em 0; } #relatedVideo li { float: left; width: 169px; margin-right: 10px; } #relatedVideo span { display: block; } /* Publications Page ----------------------------------------------------------- */ .info {padding-bottom: 1.5em; } /* Request Product Clearance and Payment Process ----------------------------------------------------------- */ .publicationCheckboxes { background: transparent; border: 0; } .publicationCheckboxes label { float: none; width: auto; font-weight: normal; } .publicationCheckboxes input { background: transparent; width: auto; } .publicationCheckboxes tr, .publicationCheckboxes td, .publicationCheckboxes tr.odd,.publicationCheckboxes tr.odd td { background: transparent; border: 0; text-align: left; } .fieldArea textarea.paymentFormComments { width: 400px; }