/* ERIC MEYER'S RELOADED RESET STYLES ================================================================ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; }
 /* * PROCURATOR * SUMMER 2010 * * COLLABORATORS: * ---------------------------------------------------------------- * * Hein Haraldson Berg * Christian Indregard * * ---------------------------------------------------------------- * * KEEP THIS STYLESHEET ORGANIZED AND CLEAN. THANKS M8! * * ================================================================ */ /* GENERIC CSS / FRAMEWORK ---------------------------------------------------------------- */ body { font-size: 13px; line-height: 1; font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Tahoma, FreeSans, sans-serif; background: #0F1827; color: #FFF; } /* TO REDUCE CSS REDUNDANCY, JUST MAKE USE OF THESE CLASSES IN HTML ---------------------------------------------------------------- */ .clear { clear: both; } .rel { position: relative; } .abs { position: absolute; } .hid { overflow: hidden; } strong { font-weight: bold; } em { font-style: italic; } #procurator { } .sec .c { margin: 0 auto; } /* SECTION: TOP ================================================================ */ #section-top { height: 34px; background: url(/sitefiles/7/gfx/top-bg-x.png) 0 100% repeat-x; } #section-top .c { width: 940px; height: 71px; bottom: 0; left: 50%; margin: 0 0 0 -480px; padding: 0 10px; color: #E8CD5F; text-transform: uppercase; font-size: 10px; } #section-top .categories { display: block; height: 21px; padding: 15px 0 0; } #section-top .categories li { float: left; padding: 0 20px 0 0; line-height: 21px; } #section-top .categories li a { display: block; float: left; width: 75px; height: 21px; line-height: 21px; padding: 0 5px; text-align: center; text-decoration: none; color: #00245D; background: url(/sitefiles/7/gfx/gold-button-bg-x.png) 0 0 repeat-x; } #section-top .toggle-drawer { display: block; bottom: 2px; right: 0; padding: 10px 23px 10px 10px; color: #E8CD5F; text-decoration: none; } #section-top .toggle-drawer .icon { display: block; width: 8px; height: 8px; bottom: 11px; right: 10px; background: url(/sitefiles/7/design/top_slidebar_arrow_up.png) 0 0 no-repeat; } #section-top .collapsed .toggle-drawer .icon { background-image: url(/sitefiles/7/design/top_slidebar_arrow_down.png); } #section-top .toggle-drawer:hover { text-decoration: underline; } /* SECTION: MAIN ================================================================ */ #section-main { background: #FFF; color: #444; padding: 158px 0 15px; z-index: 5; } #section-main .c { width: 986px; } .content-top { width: 986px; float: left; } .content-main { width: 610px; padding: 12px 18px 0 22px; float: left; clear: left; } .content-main-right { width: 610px; padding: 25px 41px 0 22px; float: right; clear: right; } .content-side { width: 322px; float: right; clear: right; } .content-side-left { width: 226px; padding: 0 0 0 15px; left: 5px; float: left; clear: left; _height: 710px; min-height: 710px; background: url(/sitefiles/7/gfx/sub-menu.png) 0 0 no-repeat; } .content-side-left-generic { background: url(/sitefiles/7/gfx/content-side-generic.png) 0 -19px no-repeat; padding-top: 23px; _height: 687px; min-height: 687px; } /* HEADER ---------------------------------------------------------------- */ #header { width: 738px; height: 83px; top: 0; left: 50%; margin-left: -527px; padding: 75px 56px 0 260px; background: url(/sitefiles/7/gfx/header-w-left-beneath.png) 0 18px no-repeat; z-index: 100; } #procurator.front #header { background-image: url(/sitefiles/7/gfx/header.png); } a#home { display: block; width: 146px; height: 99px; top: 25px; left: 57px; text-indent: -9999px; background: url(/sitefiles/7/gfx/logo.png) 0 0 no-repeat; } /* MAIN MENU ---------------------------------------------------------------- */ #main-menu { float: left; clear: left; z-index: 100; } #main-menu li { float: left; height: 60px; padding: 0 4px 0 0; position: relative; z-index: 100; } #main-menu li a { display: block; float: left; color: #777; text-decoration: none; font-size: 14px; background: url(/sitefiles/7/gfx/main-menu-item.png) 0 -100px repeat-x; border-top: 20px solid #FFF; } #main-menu li a span { display: block; float: left; height: 40px; padding: 0 20px; cursor: pointer; } #main-menu li a:hover, #main-menu li.hover a, #main-menu li.active a { background-position: 0 0; color: #00245D; } #main-menu li:hover > a { background-position: 0 0; color: #00245D; } #main-menu li a.has-sub:hover span, #main-menu li.hover a.has-sub span, #main-menu li.active a.has-sub span { background: url(/sitefiles/7/gfx/main-menu-item.png) 100% -40px no-repeat; } #main-menu li:hover > a.has-sub span { background: url(/sitefiles/7/gfx/main-menu-item.png) 100% -40px no-repeat; } #main-menu li .sub { top: 60px; left: -9999px; padding: 5px 0 0; z-index: 100; } #main-menu li:hover .sub, #main-menu li.hover .sub { left: 0; } #main-menu li .sub li { display: block; width: auto; height: 43px; padding: 0; float: none; clear: both; } #main-menu li .sub li a { width: auto; float: none; color: #FFF; font-size: 12px; border: none; background: url(/sitefiles/7/gfx/main-menu-dropdown-item-dark-blue.png) 0 0 repeat-x; } #main-menu li .sub li a span { width: auto; float: none; padding: 0 20px; height: 43px; line-height: 43px; background: none; } #main-menu li .sub li a:hover, #main-menu li .sub li.active a { color: #E8CD5F; } /* SWITCH LANGUAGE ---------------------------------------------------------------- */ #switch-lang { top: 60px; right: 51px; padding: 5px; font-size: 10px; text-transform: uppercase; color: #888; text-decoration: none; } #switch-lang:hover { color: #00245D; } /* SITE SEARCH ---------------------------------------------------------------- */ #site-search { width: 161px; height: 19px; margin: 12px 0 0; float: right; clear: right; background: #F0F0F0 url(/sitefiles/7/gfx/search-mag-glass.gif) 144px 3px no-repeat; border: 1px solid; border-color: #E9E9E9; border-top-color: #BBBCBC; border-bottom-color: #F3F3F3; } #site-search label { display: none; } #site-search .text { width: 128px; float: left; clear: left; border: none; background: none; height: 19px; padding: 0 6px; height /*\**/: 16px\9; *height: 16px; padding-top /*\**/: 3px\9; *padding-top: 3px; color: #444; font-size: 11px; } #site-search .submit { width: 20px; height: 19px; float: right; clear: right; border: none; padding: 0; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } /* BIG IMAGE BOX WITH TEXT ON UNDERLAY BACKGROUND ---------------------------------------------------------------- */ .big-img-box { width: 978px; height: 278px; padding: 4px; background: url(/sitefiles/7/design/frontpage_image_container.png) 0 0 no-repeat; margin: 0 0 12px; } .big-img-box img { display: block; } .big-img-box .text { width: 315px; height: 278px; top: 4px; right: 4px; } .big-img-box .text .underlay-bg { width: 100%; height: 100%; top: 0; left: 0; background: #000B1C; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: .5; } .big-img-box .text .content { padding: 26px 22px 0; } .big-img-box .text .content h2 { color: #E8CD5F; font-size: 20px; text-transform: uppercase; padding: 0 0 16px; } .big-img-box .text .content p { font-family: Georgia, Garamond, serif; font-size: 12px; line-height: 1.67; color: #FFF; padding: 0 0 20px; } .big-img-box .overlay-link { display: block; width: 100%; height: 100%; top: 0; left: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } /* GENERIC CONTENT ---------------------------------------------------------------- */ .generic-content { font-family: Georgia, Garamond, serif; padding: 0 0 20px; } .generic-content-sep { padding: 0 0 10px; border-bottom: 1px solid #AAA; margin: 0 0 40px; } .generic-content h1, .generic-content h2 { color: #00245D; text-transform: uppercase; font-size: 28px; font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Tahoma, FreeSans, sans-serif; padding: 0 0 24px; } .generic-content p, .generic-content ul, .generic-content ol, .generic-content dl, .generic-content table { font-size: 13px; line-height: 1.54; padding: 0 0 20px; } .generic-content table { width: 100%; border-collapse: collapse; border-spacing: 0; } .generic-content a { color: #00245D; text-decoration: underline; } .generic-content a:hover { text-decoration: none; } /* EMPLOYEE LIST ---------------------------------------------------------------- */ .employees table { border-spacing: 10px; } .employees thead { display: none; } /* LINKAGE WITH ICON AND INTRO ---------------------------------------------------------------- */ .linkage-wrap { width: 602px; padding: 0 4px; float: left; } .linkage-wrap .linkage { display: block; width: 286px; float: left; clear: left; color: #444; font-size: 12px; line-height: 1.33; font-family: Georgia, Garamond, serif; text-decoration: none; } .linkage-wrap .linkage-right { float: right; clear: right; } .linkage-wrap .linkage:hover { color: #00245D; } .linkage-wrap .linkage img { display: block; float: left; clear: left; padding: 5px 15px 20px 0; } .linkage-wrap .linkage strong { display: block; } .linkage-wrap .linkage span { display: block; padding: 0 0 20px; } /* ARTICLE DETAILS & ARTICLE LIST ---------------------------------------------------------------- */ #article, .arts-big, .arts-big .art { width: 610px; float: left; padding: 0 22px; top: -25px; left: -22px; } #article, .arts-big { _left: 22px; } .arts-big .art { top: 0; } #article .img, .arts-big .art .img { width: 646px; height: 278px; padding: 4px; float: left; left: -22px; background: url(/sitefiles/7/gfx/img-frame-small.png) 0 0 no-repeat; margin: 0 0 25px; } #article .img img, .arts-big .art .img img { display: block; } .arts-big .art h2 { font-size: 20px; padding: 0 0 15px; } .arts-big .art h2 a { color: #00245D; text-decoration: none; } .arts-big .art h2 a:hover { color: #0144AA; } .arts-big .art p.excerpt { border-bottom: 1px solid #BFBFBF; } .arts-big .last p.excerpt { border: none; } /* GENERIC SEARCH RESULTS ---------------------------------------------------------------- */ .generic-search-results h1 { padding: 0 0 6px; } .generic-search-results .hit-count { font-style: italic; } .generic-search-results .the-results li h2 { font-size: 16px; color: #00245D; text-transform: uppercase; padding: 0 0 4px; } .generic-search-results .the-results li h2 a { color: #00245D; text-decoration: none; } .generic-search-results .the-results li h2 a:hover { color: #0144AA; } /* KEYPUBLISHER GENERATED FORM ---------------------------------------------------------------- */ form.kpgenerated, #procurator form.kpgenerated ul, #procurator form.kpgenerated ul li { width: 610px; float: left; clear: both; } #procurator form.kpgenerated ul li { padding: 0 0 10px; line-height: 21px; font-size: 11px; } #procurator form.kpgenerated ul li.half { width: 270px; clear: none; } #procurator form.kpgenerated ul li.odd { float: left; } #procurator form.kpgenerated ul li.even { float: right; } #procurator form.kpgenerated li label { display: block; width: 106px; margin: 0; color: #888; height: 21px; line-height: 21px; float: left; clear: left; } #procurator form.kpgenerated li.text input { width: 150px; height: 19px; padding: 0 6px; float: left; background: #F0F0F0; height /*\**/: 16px\9; *height: 16px; padding-top /*\**/: 3px\9; *padding-top: 3px; color: #444; font-size: 11px; border: 1px solid; border-color: #E9E9E9; border-top-color: #BBBCBC; border-bottom-color: #F3F3F3; } #procurator form.kpgenerated li textarea { width: 490px; height: 122px; padding: 3px 6px; float: right; clear: right; background: #F0F0F0; color: #444; font-size: 11px; line-height: 1.36; border: 1px solid; border-color: #E9E9E9; border-top-color: #BBBCBC; border-bottom-color: #F3F3F3; font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Tahoma, FreeSans, sans-serif; } #procurator form.kpgenerated li.helptext { width: auto; color: #444; float: left; clear: left; padding: 0; } #procurator form.kpgenerated li.helptext strong { color: red; } #procurator form.kpgenerated li.form-controls { width: auto; margin: 0; padding: 0; float: right; clear: none; } #procurator form.kpgenerated li.form-controls input { width: 84px; height: 21px; font-size: 11px; text-transform: uppercase; font-weight: normal; text-align: center; background: url(/sitefiles/7/gfx/blue-button-bg-x.png) 0 0 repeat-x; color: #E8CD5F; padding: 0; margin: 0; border: none; } /* [SIDE CONTENT] GENERIC SIDE BOX ---------------------------------------------------------------- */ .content-side .side-box { width: 322px; float: left; background: url(/sitefiles/7/gfx/content-side-box.png) -322px 0 repeat-y; margin: 0 0 15px; } .content-side .side-box .top { height: 48px; background: url(/sitefiles/7/gfx/content-side-box.png) 0 0 no-repeat; } .content-side .side-box .top h2 { font-size: 17px; height: 31px; line-height: 31px; padding: 3px 24px 14px; color: #E8CD5F; } .content-side .side-news .top h2 .controls { display: block; width: 18px; height: 31px; float: right; clear: right; } .content-side .side-news .top h2 .controls a { display: block; width: 8px; height: 8px; top: 12px; left: 0; background: url(/sitefiles/7/design/top_slidebar_arrow_up.png) 0 0 no-repeat; } .content-side .side-news .top h2 .controls a.down { left: auto; right: 0; background-image: url(/sitefiles/7/design/top_slidebar_arrow_down.png); } .content-side .side-news .top h2 .controls a.hide { display: none; } #procurator .content-side .side-news .scroll-area { padding-top: 0; margin-top: 7px; height: 76px; } .content-side .side-box .arts { width: 274px; float: left; } .content-side .side-news .scroll-area .arts { top: 0; left: 24px; } .content-side .side-box .bottom { padding: 7px 24px 3px; background: url(/sitefiles/7/gfx/content-side-box.png) -644px 100% no-repeat; } .content-side .side-box .arts .art { width: 274px; float: left; margin: 0 0 20px; color: #444; font-size: 12px; line-height: 1.33; font-family: Georgia, Garamond, serif; } .content-side .side-box .arts .art .img { display: block; float: left; clear: left; } .content-side .side-box .arts .art .img img { display: block; } .content-side .side-box .arts .art .text { width: 200px; float: right; clear: right; } .content-side .side-box .arts .art h3 { font-weight: bold; } .content-side .side-box .arts .art h3 a, .content-side .side-box .arts .art p.excerpt a { display: block; text-decoration: none; color: #444; } .content-side .side-box .arts .art h3 a:hover, .content-side .side-box .arts .art p.excerpt a:hover { color: #00245D; } /* [SIDE CONTENT] SUB MENU ---------------------------------------------------------------- */ #sub-menu { width: 226px; float: left; } #sub-menu li.heading { font-size: 14px; min-height: 0; height: 45px; padding: 16px 0 0; text-transform: uppercase; color: #00245D; } #sub-menu li { min-height: 50px; _height: 50px; font-size: 13px; } #sub-menu li a { display: block; min-height: 24px; _height: 24px; padding: 12px 15px 14px 0; line-height: 24px; color: #666; text-decoration: none; background: url(/sitefiles/7/gfx/sub-menu-item-border.png) 0 100% no-repeat; } #sub-menu li.active a, #sub-menu li a:hover { background-color: #FFF; color: #E8CD5F; } /* [SIDE CONTENT] CONTACT INFORMATION ---------------------------------------------------------------- */ .contact-info, .contact-info li { width: 206px; float: left; } .contact-info li { padding: 0 0 25px; } .contact-info li.last { padding: 0; } .contact-info li h2 { color: #00245D; font-size: 12px; padding: 0 0 6px; text-transform: uppercase; } .contact-info li p { font-family: Georgia, Garamond, serif; color: #444; font-size: 12px; line-height: 1.17; padding: 0 0 6px; } .contact-info li p a { color: #00245D; text-decoration: none; } .contact-info li p a:hover { color: #0144AA; } .contact-info li p.map { font-size: 10px; line-height: 1; font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Tahoma, FreeSans, sans-serif; text-transform: uppercase; padding: 0; } .contact-info li p.map a { padding: 0 12px 0 0; } .contact-info li p.map a .icon { display: block; width: 8px; height: 8px; top: 50%; margin-top: -4px; right: 0; background: url(/sitefiles/7/gfx/gold-arrow-right.png) 0 0 no-repeat; } /* SECTION: BOTTOM ================================================================ */ #section-bottom { background: url(/sitefiles/7/gfx/bottom-bg-x.png) 0 0 repeat-x; } #section-bottom .c { width: 940px; height: 93px; padding: 30px 0 0; font-family: Georgia, Garamond, serif; /* Georgia's taking up too much horizontal space here... */ font-family /*\**/: Garamond, serif\9; *font-family: Garamond, serif; } #section-bottom .colophon { width: 940px; float: left; } #section-bottom .colophon p { padding: 0 0 5px; font-size: 12px; line-height: 12px; letter-spacing /*\**/: -.035em\9; *letter-spacing: -.035em; } #section-bottom .colophon .info { float: left; clear: left; } #section-bottom .colophon .rights { float: right; clear: right; font-size: 10px; }