/* BASIC SETUP */ * { margin: 0; padding: 0; behavior: url(/advanced_dev/PIE.htc); /* (rounded corner fix for IE7/8) */ } body { font-size: .9em; font-family: Helvetica, Arial, sans-serif; background-image: url(../images/body-bg.png); background-position: center top; background-repeat: repeat; color: #555555; } .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .valign-top { vertical-align: top; } .valign-middle { vertical-align: middle; } .valign-bottom { vertical-align: bottom; } .clear { clear: both; font-size: 0; line-height: 0; height: 0px; } .float-left { float: left; } .float-right { float: right; } p { margin-bottom: 1em; line-height: 1.2em; } img { border: 0; } a { text-decoration: none; color: #555555; } a:hover { color: #777777; } .hr hr { display: none; } .hr { border-bottom: 5px solid #f0f0f0; margin-bottom: 1em; } .error { color: #FF0000; } .small { font-size: 0.75em; } .read-more { float: right; color: #00adef; text-transform: uppercase; font-size: 0.9em; } /* HEADINGS */ h1, h2, h3, h4, h5, h6 { margin-bottom: 0.8em; font-weight: normal; font-family: din-regular, din-bold, Helvetica, sans-serif; } h1 { font-size: 2em; } h2 { font-size: 1.4em; } h3 { font-size: 1.2em; } h4, h5, h6 { font-size: 1.1em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } /* FORMS */ form { } fieldset { border: 0; } input.text, textarea.text { color: #000000; } input.text-ghosted, textarea.text-ghosted { color: #808080; } input, select, textarea { vertical-align: middle; border: 1px solid #F0F0F0; font-family: din-regular, din-bold, Helvetica, sans-serif; font-size: 1em; padding: 2px 3px; margin-bottom: 3px; } .form-button, .button { height: 21px; border: 0; color: #00adef; background-color: #F0F0F0; cursor: pointer; width: auto; text-transform: uppercase; font-family: din-bold; } .form-button:hover, .button:hover { color: #000000 !important; } .nolabels { } .nolabels input.text, .nolabels input.text-ghosted, .nolabels textarea.text, .nolabels textarea.text-ghosted { width: 97%; } /* PAGE STRUCTURE */ #root { width: 980px; margin: 0px auto; border-left: 6px solid #d0d0d0; border-right: 6px solid #d0d0d0; background-color: #FFFFFF; } #header { position: absolute; width: 960px; height: 90px; margin-left: 20px; background-image: url(../images/black-trans.png); z-index: 100; } #logo { float: left; padding: 15px 10px 10px 18px; } #main-image { position: relative; margin-bottom: 15px; } #main-image .imagerotator { position: relative; } #main-image .imagerotator div.image { position: absolute; top: 0; left: 0; } .main-image-overlay { position: absolute; width: 980px; height: 400px; background-image: url(../images/main-image-overlay-bg.png); } .main-image-overlay.shallow { height: 220px; } #main-image img, #main-image a { display: block; } .main-image-heading { position: absolute; top: 110px; left: 20px; width: 382px; height: 240px; padding: 15px 65px 15px 15px; color: #FFFFFF; /*background-image: url(../images/main-image-heading-bg.png);*/ background-position: 0 0; background-repeat: no-repeat; font-size: 62px; line-height: 65px; font-family: din-bold, din-regular, Helvetica, sans-serif; text-transform: uppercase; z-index: 10; line-height: 1em !important; } .main-image-heading p { line-height: 1em !important; } .main-image-shallow-heading { position: absolute; bottom: 20px; left: 20px; z-index: 10; } .main-image-shallow-heading .relative { min-width: 180px; max-width: 250px; line-height: 33px; padding: 12px 40px 12px 20px; background-image: url(../images/blue-trans.png); color: #FFFFFF; font-size: 28px; font-family: din-bold, din-regular, Helvetica, sans-serif; overflow: hidden; } .main-image-shallow-heading .relative .arrow { position: absolute; right: -25px; bottom: 12px; } /* IMAGE ROTATOR NAVI */ .navi { position: absolute; bottom: 35px; left: 35px; z-index: 1000; } .navi a { display: block; float: left; width: 14px; height: 14px; margin-right: 5px; background-image: url(../images/pager.png); background-position: 0 0; } .navi a.activeSlide { background-position: 0 -14px; } .navi a:focus { outline: none; } .navi a span { display: none; } #google-map { width: 980px; height: 400px; } #main { position: relative; background-color: #FFFFFF; } #center-column { float: left; width: 720px; position: relative; } #main-content { padding: 0 20px; } #main-content ul, #main-content ol { margin-left: 1.5em; margin-bottom: 1em; } #main-content li { margin-bottom: 0.3em; } #main-content .form-button, #main-content .button { height: 21px; border: 0; color: #FFFFFF; background-color: #00adef; text-transform: none; } #main-content .form-button:hover, #main-content .button:hover { background-color: #333333 !important; color: #FFFFFF; } /* MAIN CONTENT */ .main-paragraph a { color: #FFFFFF; text-decoration: underline; } /* contact page */ .contact-column { float: left; width: 190px; padding-right: 20px; margin-right: 20px; height: 250px; border-right: 1px dotted #666666; font-size: 0.9em; } .contact-column.last { border: 0; margin: 0; } #quotes { } .quote-column { float: left; width: 210px; margin-right: 10px; } .quote-column.last { margin-right: 0; } .quote { font-size: 1rem; padding: 8px 5px; color: #006084; border-bottom: 5px solid #f0f0f0; } .quote.opt2 { color: #B3B5B8; } .quote p { margin-bottom: 0; } .page { margin-bottom: 2.3em; } .page .date-box { float: left; display: block; color: #FFFFFF; background-color: #00AEEF; padding: 5px; width: 50px; height: 50px; text-align: center; font-family: din-regular, din-bold, Helvetica, Arial, sans-serif; margin-bottom: 20px; margin-right: 20px; } .page .date-box .month { height: 18px; line-height: 18px; font-size: 16px; } .page .date-box .date { height: 32px; line-height: 32px; font-size: 26px; } .page table.heading-bottom { float: left; width: 505px; height: 60px; } .page table.heading-bottom td { vertical-align: bottom; } .page table.heading-bottom h2 { color: #00adef; } .page .thumb { display: block; float: left; margin: 0 1em 1em 0; } .forum-list-entry { margin-bottom: 5px; padding: 10px 10px 1px; position: relative; } .forum-list-entry.row0 { background: #f8f8f9; } .forum-list-entry.row1 { background: #fff; } .forum-list-entry h4 { font-size: 1.1em; font-family: din-bold; color: #808080; } .forum-list-entry h4 * { color: #808080; } .forum-list-entry .date-box { float: left; width: 90px; } .forum-list-entry .forum-post-summary { margin-left: 100px; } .forum-list-entry .read-more { float: none; position: absolute; display: block; bottom: 10px; right: 10px; font-weight: bold; text-decoration: underline; text-transform: none; } .forum-post h2 { font-family: din-bold; color: #808080; } .forum-post .date-box { float: left; width: 120px; } .forum-post .forum-post-content { margin-left: 130px; } #comments-list { padding-top: 15px; margin-bottom: 0px; padding-bottom: 0px; border-top: 1px dotted #c0c0c0; } #comments-listmargin { margin-left: 130px; } #comments .comments-heading { float: left; width: 130px; font-size: 1.1em; font-family: din-bold; color: #808080; } #comments .comments-post { clear: both; padding-top: 15px; border-top: 1px dotted #c0c0c0; } #comments .comments-post form { margin-left: 130px; width: 445px; } #comments dt { float: left; width: 120px; padding-top: 4px; } #comments dd { margin-left: 130px; } #comments label { color: #808080; width: 110px; } #comments input[type="text"], #comments input[type="email"], #comments textarea { width: 300px; padding: 6px; } #comments .comment-error { display: none; } #comments .comments-thanks { font-weight: bold; } #comments .comment { margin-bottom: 10px; border-bottom: 1px dotted #c0c0c0; } #comments .comment.last { border-bottom: 0; } #comments .comment-date { float: left; width: 120px; font-family: din-bold; color: #808080; font-size: 1.2em; } #comments .comment-body { margin-left: 130px; } #comments .comment.last .comment-body { border-bottom: 0; } #comments .comment-body h3 { font-size: 1.2em; margin-bottom: 0.2em; } .section-content { display: none; } .section-content.open { display: block; } h2.section a { } h2.section.open a { } #right-column { float: right; width: 240px; margin-right: 20px; font-family: din-regular, din-bold, Helvetica, sans-serif; color: #4D4D4D; font-size: 0.85em; } #right-column h3 { margin-bottom: 0.1em; color: #4D4D4D; background-position: right center; background-repeat: no-repeat; font-size: 1.4em; } #right-column h3.green { color: #658F29; /*background-image: url(../images/asterisk-green-15.png);*/ } #right-column h3.red { color: #B74452; /*background-image: url(../images/asterisk-red-15.png);*/ } #right-column h3.brown { color: #9E8432; /*background-image: url(../images/asterisk-brown-15.png);*/ } #right-column h4 { text-transform: uppercase; font-size: 1em; margin-bottom: 0.1em; } #right-column p { margin-bottom: 0.5em; } #blog-archive { margin-bottom: 8px; } #blog-archive a { display: block; color: #808080; padding: 3px 0; } #blog-archive a .icon { display: inline-block; width: 10px; height: 10px; background-image: url(../images/plus-minus.png); background-position: 0 0; background-repeat: no-repeat; } #blog-archive a.active .icon { background-position: 0 -10px; } #blog-archive a:hover { color: #00AEEF; } #blog-archive a.year-link { font-weight: bold; } #blog-archive a.month-link { padding-left: 15px; font-weight: bold; text-transform: uppercase; } #blog-archive a.blog-link { padding-left: 30px; font-size: 0.9em; } #blog-archive a.blog-link.active { color: #00AEEF; } #blog-archive .collapsible-box { padding: 4px 0; border-bottom: 1px dotted #666666; } #blog-archive .collapsible-content { display: none; } #blog-archive .collapsible-content.active { display: block; } #blog-archive .collapsible-content.year .collapsible-box:last-child { border: none; } #rapid-response { background-image: url(../images/ambulance-icon.png); background-position: 185px 10px; background-repeat: no-repeat; } #right-column .item { position: relative; background-color: #F0F0F0; margin-bottom: 2px; padding: 15px; } #right-column .item .item-image { display: block; float: right; width: 85px; height: 70px; padding: 4px 4px 4px 1px; margin: 0 0 10px 10px; background-position: center; } #right-column .item input, #right-column .item select, #right-column .item textarea { border: 0; } #right-column .item.color1 h3 { color: #658F29; } #right-column .item.color1 .item-image { background-image: url(../images/item-image-bg1.png); } #right-column .item.color2 h3 { color: #B74452; } #right-column .item.color2 .item-image { background-image: url(../images/item-image-bg2.png); } #right-column .item.color3 h3 { color: #9E8432; } #right-column .item.color3 .item-image { background-image: url(../images/item-image-bg3.png); } #weather-box .arrow { display: inline-block; width: 16px; height: 16px; background-position: 0 0; background-repeat: no-repeat; } #weather-box .arrow:hover { background-position: 0 -16px; } #weather-box .arrow.left { background-image: url(../images/arrow-left.png); } #weather-box .arrow.right { background-image: url(../images/arrow-right.png); } .weather-item { width: 210px; } .weather-icon { display: block; float: left; padding: 0 8px 0 0; border-right: 2px solid #e6e6e6; margin: 0 8px 0 0; } .temperature { font-size: 2em; } #commodities-list { font-size: 1.2em; padding-right: 30px; } #commodities-list p { margin-bottom: 0.2em; } #commodities-list p span { float: right; display: inline-block; width: 60px; color: #101010; font-size: 1.2em; } #right-column #blog-link { display: block; height: 38px; line-height: 38px; color: #000000; font-size: 1.4em; padding: 0 20px; background-image: url(../images/cowhide-blog-bg.png); background-position: 0 0; background-repeat: no-repeat; border: 2px solid #CCCCCC; margin: 0.6em 0; font-family: din-bold; } #right-column #blog-link:hover { color: #00adef; border: 2px solid #00adef; background-position: 0 -40px; } #footer { background-color: #FFFFFF; padding: 20px; background-image: url(../images/cowhide-bg.png); background-position: center top; background-repeat: no-repeat; font-family: din-bold, din-regular, Helvetica, sans-serif; margin-top: 20px; position: relative; min-height: 160px; border-top: 6px solid #d0d0d0; } #footer h2 { color: #FFFFFF; font-size: 1.2em; padding-left: 20px; background-image: url(../images/asterisk-blue-12.png); background-position: left center; background-repeat: no-repeat; } /* MEGAMENU */ #megamenu-footer { padding-left: 20px; font-size: 0.85em; } #megamenu-footer ul { float: left; margin: 0; padding: 0 25px 0 0; list-style-type: none; } #megamenu-footer ul li { margin: 0; padding: 0; } #megamenu-footer ul li a { display: block; padding: 0 0 6px; color: #FFFFFF; } #megamenu-footer ul li a:hover { color: #D0D0D0; } #footer-strapline { position: absolute; right: 20px; bottom: 25px; text-align: right; font-size: 1.1em; color: #FFFFFF; } #footer-strapline span { color: #00adef; } #footer-strapline.col2 span { color: #BAD064; } #footer-strapline.col3 span { color: #EDDC8B; } #footer-strapline.col4 span { color: #C36E98; } #footer-strapline.col5 span { color: #00A7A6; } #footer-strapline.col6 span { color: #EBAE20; } #footer-strapline p { margin: 0; } #footer-strapline span.message { display: block; margin-right: 0.9em; } /* FANCYBOX PAGE */ body.popup { background-image: none; } #popup-root { }@font-face { font-family: 'din-bold'; src: url('fonts/din-bold.eot'); src: url('fonts/din-bold.eot?#iefix') format('embedded-opentype'), url('fonts/din-bold.woff') format('woff'), url('fonts/din-bold.ttf') format('truetype'), url('fonts/din-bold.svg#DinBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'din-regular'; src: url('fonts/din-regular.eot'); src: url('fonts/din-regular.eot?#iefix') format('embedded-opentype'), url('fonts/din-regular.woff') format('woff'), url('fonts/din-regular.ttf') format('truetype'), url('fonts/din-regular.svg#DinRegular') format('svg'); font-weight: normal; font-style: normal; }/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_line.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .main-navigation { float: right; position: relative; z-index: 100; margin-top: 29px; margin-right: 12px; font-size: 0.75em; } * html .main-navigation { padding-bottom: 0; } .main-navigation ul { list-style-type: none; margin: 0; padding: 0; } .main-navigation li { float: left; position: relative; margin: 0; padding: 0; } /* style the first level links */ .main-navigation li > a { display: block; padding: 0 8px 0; height: 36px; line-height: 36px; color: #DDDDDD; border-left: 1px solid #DDDDDD; text-transform: uppercase; } .main-navigation li > a.active { color: #FFFFFF; font-weight: bold; } .main-navigation li:hover + li a { border: 0; margin-left: 1px; } .main-navigation li > a.first { border: 0; } .main-navigation li > a.last { } /* style the top level hover */ .main-navigation li > a:hover, .main-navigation :hover > a.dropdown, .main-navigation ul ul :hover > a { color: #1E1E1E; background-color: #E6E6E6; border-radius: 4px; } /* style the second level links */ .main-navigation ul ul a { text-align: left; padding: 10px 8px 8px 12px; width: 180px; height: auto; text-transform: none; border: 0; color: #1E1E1E; background-color: #E6E6E6; line-height: normal; border-radius: 0; margin: 0 !important; } .main-navigation ul ul a.active2 { } .main-navigation ul ul a.first2, .main-navigation ul ul a:hover.first2 { border-radius: 0 4px 0 0; } .main-navigation ul ul a.last2, .main-navigation ul ul a:hover.last2 { border-radius: 0 0 4px 4px; } /* style the second level hover */ .main-navigation ul ul a:hover, .main-navigation ul ul :hover > a { background-color: #777777; color: #FFFFFF; border-radius: 0; } /* hide the sub levels and give them a positon absolute so that they take up no room */ .main-navigation ul ul { margin: 0; padding: 0; visibility: hidden; position: absolute; width: 200px; height: 0; top: 40px; left: 0; } /* style the table so that it takes no part in the layout - required for IE to work */ .main-navigation table { position: absolute; top: 0; left: 0; } /* DON'T NEED TO CHANGE */ /* make the second level visible when hover on first level list OR link */ .main-navigation ul li:hover ul, .main-navigation ul a:hover ul { visibility: visible; } .main-navigation ul ul li { margin: 0px; padding: 0px; } /* yet another hack for IE5.5 */ * html .main-navigation ul ul a { width: 140px; w\idth: 139px; } /* dropdown menu from ontrak extra */ #dropdown { visibility: hidden; position: absolute; top: 42px; left: -450px; width: 700px; padding: 15px; background-color: #e6e6e6; background-image: url(../images/dropdown-bg.gif); border-radius: 6px; font-family: din-bold, din-regular, Helvetica, sans-serif; font-size: 1.3em; } #dropdown .links { float: left; min-width: 150px; margin-right: 15px; } #dropdown .links a { display: block; text-transform: uppercase; padding: 6px 30px 7px 0; } #dropdown .links a.sub { text-transform: none; font-size: 0.9em; padding: 3px 30px 4px 0; } #dropdown-callback { float: right; width: 200px; border-left: 1px solid #adc4ce; padding-left: 15px; } #dropdown-callback p { color: #006084; } #dropdown .social a { display: block; height: 28px; line-height: 28px; padding: 0 30px 0 40px; float: left; font-size: 1.3em; background-position: left center; background-repeat: no-repeat; } /* dropdown link hover */ .main-navigation ul li:hover #dropdown, .main-navigation ul a:hover #dropdown { visibility: visible; } .main-navigation ul li.dropdown:hover > a { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 6px solid #e6e6e6; }.highlight { color: #00adef; } p.main-paragraph { display: block; padding: 1em 130px 1em 1em; font-size: 1.2em; background-color: #00adef; background-image: url(../images/cow.png); background-position: bottom right; background-repeat: no-repeat; color: #FFFFFF; margin-bottom: 1.2em; } .inset-left { float: left; display: block; margin: 1em 1.2em .5em 0; } .inset-right { float: right; display: block; margin: 1em 0 .5em 1.2em; }