/****************************************************************************** * Basic elements ******************************************************************************/ body { background: #e9e9e9 url('../images/gray-bg.gif') top left repeat-x; font-family: 'Arial', 'Helvetica', sans-serif; font-size: 11px; height: 100%; } a {} a:hover {} h1, h2 { font-family: 'PTSansRegular', 'Arial', sans-serif; font-weight: normal; } ul { list-style: none; } li { list-style: none; } img { border: 0px; } label { cursor: pointer; } input::-moz-focus-inner { border: 0; padding: 0; } /****************************************************************************** * Basic classes ******************************************************************************/ .clearfix:after { clear: both; content: "."; display: block; height:0; overflow: hidden; visibility: hidden; } .fl { float: left !important; } .fr { float: right !important; } .bold { font-weight: bold; } .last { margin-bottom: 0px !important; } .hidden { display: none; } .color { color: #009ee0 !important; } /****************************************************************************** * Buttons ******************************************************************************/ a.button { background: url('../images/buttons/blue-button-left.png') top left no-repeat; color: #fff !important; display: inline-block; font-weight: bold; height: 36px; line-height: 30px; padding: 0px 0px 0px 15px; text-decoration: none !important; } a.button span { background: url('../images/buttons/blue-button-right.png') top right no-repeat; display: block; height: 36px; padding: 0px 15px 0px 0px; } a.button span span { background: url('../images/buttons/blue-button-center.png') top left repeat-x; display: block; height: 36px; padding: 0px; } a.button-gray { background: url('../images/buttons/gray-button-left.png') top left no-repeat; } a.button-gray span { background: url('../images/buttons/gray-button-right.png') top right no-repeat; } a.button-gray span span { background: url('../images/buttons/gray-button-center.png') top left repeat-x; } /****************************************************************************** * Images ******************************************************************************/ .image { margin: 0px 0px 25px 0px; } .image img { background: #fff; border: 1px solid #c8c8c8; border-left-color: #e4e4e4; border-right-color: #e4e4e4; border-top: 0px; padding: 6px 6px 6px 6px; } .image.fl { margin: 5px 15px 5px 0px; } .image.fr { margin: 5px 0px 5px 15px; } /****************************************************************************** * Main structure ******************************************************************************/ #page { background: url('../images/gray-bg-top.jpg') top center no-repeat; width: 100%; } #page-wrapper { } /****************************************************************************** * Header ******************************************************************************/ #header { padding: 35px 0px 17px 0px; } #header #logo { padding: 0px 0px 0px 15px; } #header #logo a { color: #252525; text-decoration: none; } #header #logo img { float: left; margin: 0px 10px 0px 0px; } #header #logo .logo-light { color: #898989; padding: 0px 0px 0px 7px; } #header #logo .title { color: #252525; font-family: 'PTSansBold', 'Arial', sans-serif; display: block; font-size: 18px; line-height: 18px; padding-bottom: 2px; padding-top: 1px; text-transform: uppercase; } #header #logo .desc { color: #898989; font-family: 'PTSansRegular', 'Arial', sans-serif; } /* First level */ #header #main-menu { float: right; margin-right: 5px; margin-top: -10px; padding: 10px 0px 0px 0px; } #header #main-menu a { color: #636363; margin: 0px; padding: 0px; text-decoration: none; text-transform: uppercase; white-space: nowrap; } #header #main-menu li { color: #636363; cursor: pointer; display: block; float: left; font-size: 11px; height: 43px; line-height: 32px; margin: 0px 15px 0px 15px; padding: 0px; } #header #main-menu li span { display: block; height: 43px; } #header #main-menu li a span { font-family: 'PTSansBold', 'Arial', sans-serif; } #header #main-menu li.last { background: transparent url('../images/main-menu-bottom.png') bottom left no-repeat !important; padding: 0px 0px 6px 0px; } #header #main-menu li.last a { border: 0px !important; } #header #main-menu span { cursor: pointer; } #header #main-menu ul { float: right; } #header #main-menu ul ul { display: block; visibility: hidden; position: absolute; width: 185px; } #header #main-menu ul ul ul { } /* Active element */ #header #main-menu .active { margin-left: 5px !important; margin-right: 5px !important;} #header #main-menu .active a { background: url('../images/main-menu-left.png') top left no-repeat !important; color: #fff !important; display: block; padding: 0px 0px 0px 10px !important; } #header #main-menu .active span { background: url('../images/main-menu-right.png') top right no-repeat !important; display: block; padding: 0px 10px 0px 0px !important; } #header #main-menu .active span span { background: url('../images/main-menu-center.png') top left repeat-x !important; display: block; padding: 0px 0px 0px 0px!important; } /* Hovered element */ #header #main-menu li:hover { margin-left: 5px; margin-right: 5px; } #header #main-menu li:hover a { background: url('../images/main-menu-hover-right.png') top right no-repeat; color: #464646; display: block; height: 43px; padding: 0px 10px 0px 0px; } #header #main-menu li:hover span { background: url('../images/main-menu-hover-left.png') top left no-repeat; display: block; height: 43px; padding: 0px 0px 0px 10px; } #header #main-menu li:hover span span { background-image: none; display: block; height: 43px; padding: 0px !important; } /* Second level*/ #header #main-menu .active ul, #header #main-menu li:hover ul { margin-top: -15px; padding: 6px 0px 0px 0px; z-index: 1000; } #header #main-menu .active li, #header #main-menu li:hover li { background: #fff; display: block; float: left; height: auto; line-height: 28px; margin: 0px; width: 185px; } #header #main-menu .active li.first, #header #main-menu li:hover li.first { background: url('../images/main-menu-top.png') top left no-repeat; padding-top: 6px; } #header #main-menu .active li a, #header #main-menu li:hover li a { background-image: none !important; border-bottom: 1px solid #f0f0f0; color: #464646 !important; display: block; font-size: 11px; height: auto; line-height: 28px; margin: 0px 0px 0px 10px; padding: 0px !important; text-transform: none; width: 165px; } #header #main-menu .active li a:hover, #header #main-menu li:hover li a:hover { color: #009ee0 !important; } /* Thirth level*/ #header #main-menu .active ul ul, #header #main-menu li:hover ul ul { display: block; margin-top: -35px !important; margin-left: 188px; padding: 0px; position: absolute; visibility: hidden; width: 185px; } #header #main-menu .active ul ul li.first, #header #main-menu li:hover ul ul li.first { background: url('../images/main-menu-top-normal.png') top left no-repeat; margin-left: -4px; width: 189px; } #header #main-menu .active ul ul li.first a, #header #main-menu li:hover ul ul li.first a { margin: 0px 0px 0px 14px; } /****************************************************************************** * Navigation ******************************************************************************/ #navigation { background: url('../images/blue-navigation.png') top left no-repeat; height: 110px; position: relative; } #navigation h1 { color: #fff; font-size: 18px; font-weight: normal; } #navigation #title { left: 40px; line-height: 1; position: absolute; top: 23px; } #navigation #search { position: absolute; right: 20px; top: 17px; } #navigation #search .form-text { background: url('../images/blue-search-text.png') top left no-repeat; float: left; height: 26px; width: 153px; } #navigation #search .form-text input { background: transparent; border: 0px; color: #fff; font-family: 'Arial', sans-serif; font-size: 11px; margin: 5px 5px 0px 5px; width: 143px; } #navigation #search .form-submit { background: url('../images/blue-search-submit.png') top left no-repeat; cursor: pointer; height: 26px; float: left; width: 26px; } #navigation #search .form-submit input { background: transparent; border: 0px; cursor: pointer; height: 26px; text-indent: -9999px; width: 26px; } #navigation-shadow { background: url('../images/navigation-shadow.png') top left no-repeat; bottom: 5px; height: 14px; left: -40px; position: absolute; width: 280px; } /****************************************************************************** * Slider ******************************************************************************/ #slider { background: url('../images/slider-bottom.png') bottom left no-repeat; margin-bottom: 20px; padding: 0px 0px 54px 0px; position: relative; width: 940px; } #slider li { display: none; overflow: hidden; } #slider img { display: block; } #slider #slider-wrapper ul { width: 940px; } #slider #slider-wrapper { height: 341px; } /* Cycle slider */ #slider.cycle #slider-wrapper ul { overflow: hidden; } #slider.cycle #slider-prev { background: url('../images/slider-prev.png') center left no-repeat; height: 67px; left: 0px; margin-top: -61px; position: absolute; top: 50%; width: 22px; z-index: 500; } #slider.cycle #slider-prev a { background: url('../images/blue-slider-prev.png') center left no-repeat; cursor: pointer; display: block; font-size: 0%; height: 100%; left: -6px; position: absolute; text-indent: -9999px; width: 100%; } #slider.cycle #slider-next { background: url('../images/slider-next.png') center right no-repeat; height: 67px; margin-top: -61px; position: absolute; right: 0px; top: 50%; width: 22px; z-index: 500; } #slider.cycle #slider-next a { background: url('../images/blue-slider-next.png') center right no-repeat; cursor: pointer; display: block; font-size: 0%; height: 100%; right: -6px; position: absolute; text-indent: -9999px; width: 100%; } #slider.cycle #slider-navigation { bottom: 26px; left: 0px; position: absolute; text-align: center; width: 940px; } #slider.cycle #slider-navigation a { background: url('../images/slider-bullet.png') top left no-repeat; display: inline-block; font-size: 0; height: 9px; margin: 0px 5px 0px 5px; text-decoration: none; width: 9px; } #slider.cycle #slider-navigation a.activeSlide { background: url('../images/blue-slider-bullet-active.png') top left no-repeat; } /* NIVO slider */ #slider.nivo #slider-wrapper ul { height: 350px; } #slider.nivo .nivo-prevNav-wrap { background: url('../images/slider-prev.png') center left no-repeat; height: 67px; left: 0px; margin-top: -61px; position: absolute; top: 57%; width: 22px; z-index: 500; } #slider.nivo a.nivo-prevNav { background: url('../images/blue-slider-prev.png') center left no-repeat; cursor: pointer; display: block; font-size: 0%; height: 100%; left: -6px; position: absolute; text-indent: -9999px; width: 100%; } #slider.nivo .nivo-nextNav-wrap { background: url('../images/slider-next.png') center right no-repeat; height: 67px; margin-top: -61px; position: absolute; right: 0px; top: 57%; width: 22px; z-index: 500; } #slider.nivo a.nivo-nextNav { background: url('../images/blue-slider-next.png') center right no-repeat; cursor: pointer; display: block; font-size: 0%; height: 100%; right: -6px; position: absolute; text-indent: -9999px; width: 100%; } #slider.nivo .nivo-directionNav a { top: 0%; } #slider.nivo .nivo-controlNav { bottom: -18px; left: 0px; position: absolute; text-align: center; width: 940px; z-index: 1000; } #slider.nivo .nivo-controlNav a { background: url('../images/slider-bullet.png') top left no-repeat; display: inline-block; font-size: 0; height: 9px; margin: 0px 5px 0px 5px; text-decoration: none; top: 0%; width: 9px; } #slider.nivo .nivo-controlNav a.active { background: url('../images/blue-slider-bullet-active.png') top left no-repeat; } #slider #slider-wrapper img { -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } /****************************************************************************** * Description ******************************************************************************/ #description {} #description h1 { color: #363636; font-family: 'PTSansRegular', 'Arial', sans-serif; font-size: 32px; font-weight: normal; margin-bottom: 20px; text-align: center; } #description p { color: #555555; font-family: 'PTSansRegular', 'Arial', sans-serif; font-size: 14px; margin-bottom: 35px; text-align: center; } /****************************************************************************** * Boxes ******************************************************************************/ #boxes { margin-bottom: 20px; } #boxes h2 { font-size: 14px; font-weight: normal; height: 37px; line-height: 37px; margin: 0px 0px 0px 15px; } #boxes a { color: #363636; text-decoration: none; } #boxes img { background-color: transparent; display: block; } #boxes .box { background: url('../images/box-bg.png') bottom left no-repeat; padding: 0px 0px 38px 0px; position: relative; } #boxes .read-more { background: url('../images/blue-box-more.png') center right no-repeat; bottom: 28px; color: #363636; display: block; line-height: 1; padding: 0px 15px 0px 0px; position: absolute; right: 46px; text-decoration: none; } #boxes .read-more:hover { text-decoration: underline; } /* CSS 3 border radius implementation for images */ #boxes img { -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } /****************************************************************************** * Content ******************************************************************************/ #content { } #content-wrapper { background: #dfdfdf; padding-bottom: 65px; padding-top: 45px; } #content h1 { color: #009ee0; font-size: 20px; margin: 0px 0px 25px 0px; text-transform: uppercase; } #content h2 { color: #009ee0; font-size: 18px; margin: 0px 0px 25px 0px; text-transform: uppercase; } #content h3 { color: #009ee0; font-size: 16px; font-weight: normal; margin: 0px 0px 25px 0px; text-transform: uppercase; } #content h4 { color: #009ee0; font-size: 14px; font-weight: normal; margin: 0px 0px 25px 0px; text-transform: uppercase; } #content h5 { color: #009ee0; font-size: 12px; font-weight: normal; margin: 0px 0px 25px 0px; text-transform: uppercase; } #content h6 { color: #009ee0; font-size: 10px; font-weight: normal; margin: 0px 0px 25px 0px; text-transform: uppercase; } #content ul { margin: 0px 0px 25px 0px; } #content ul li { list-style-type: square; list-style-position: inside; } #content ol { list-style: lower-alpha; margin: 0px 0px 25px 0px; } #content ol li { list-style-type: lower-alpha; list-style-position: inside; } #content li { line-height: 18px; } #content table { border-collapse: collapse; margin: 0px 0px 25px 0px; width: 100%; } #content th { background: transparent url('../images/block-categories-bg.png') bottom left repeat-x; color: #009ee0; font-weight: bold; padding: 0px 10px 10px 0px; text-align: left; } #content td { padding: 10px 10px 10px 0px; } #content a { color: #009ee0; text-decoration: underline; } #content a:hover { } #content p { color: #464646; line-height: 18px; margin-bottom: 25px; } /****************************************************************************** * Main ******************************************************************************/ #main p.cite { background: url('../images/blue-footer-cite.png') top left no-repeat; font-family: 'Georgia', serif; font-size: 14px; font-style: italic; line-height: 24px; margin-left: -16px; padding-bottom: 25px; padding-left: 33px; position: relative; } #main p.cite .name { bottom: 0px; display: block; font-family: 'Arial', sans-serif; font-size: 11px; font-weight: bold; line-height: 1; position: absolute; right: 0px; } #main .list { margin: 0px 0px 18px 0px; } #main .list li { background: url('../images/blue-box-more-small.png') center left no-repeat; color: #464646; font-weight: bold; line-height: 24px; list-style: none; padding: 0px 0px 0px 20px; text-align: left; } #main #portfolio { } #main #portfolio .item { float: left; margin: 0px 15px 50px 0px; width: 295px; } #main #portfolio .item p { margin: 0px; padding: 0px; } #main #portfolio .item.last { margin-right: 0px; } #main #portfolio .image { margin: 0px 0px 10px 0px; } /****************************************************************************** * Breadcrumb ******************************************************************************/ #breadcrumb { color: #636363; font-size: 11px; font-weight: bold; margin: 0px 0px 15px 0px; position: absolute; margin-top: -25px; } #breadcrumb p { color: #636363; float: left; line-height: 1; margin: 0px 30px 0px 0px; padding: 0px; } #breadcrumb ul { float: left; } #breadcrumb ul li { color: #636363; display: block; float: left; line-height: 1; } #breadcrumb a { color: #636363; font-weight: normal; text-decoration: underline; } #breadcrumb .sep { padding: 10px 5px 0px 5px; } /****************************************************************************** * Sidebar ******************************************************************************/ #sidebar { } #sidebar ul { clear: both; display: block; padding: 0px; margin: 0px; list-style-image: none; list-style-position: inside; list-style-type: none; text-align: left; width: 100%; } #sidebar li { clear: both; display: block; float: left; padding: 0px !important; margin: 0px; list-style-image: none; list-style-position: inside; list-style-type: none; width: 100%; } #sidebar img { border: 2px solid #636363; margin: 0px; padding: 1px; } #sidebar img.fl { margin: 5px 15px 5px 0px; } #sidebar img.fr { margin: 5px 0px 5px 15px; } #sidebar .block { margin: 0px 0px 25px 0px; } #sidebar .block li { list-style: none; } #sidebar .block dt { display: block; float: left; line-height: 18px; width: 80px; } #sidebar .block dd { display: block; line-height: 18px;} #sidebar .block-categories { margin: 0px 0px 25px 0px; } #sidebar .block-categories ul ul { margin: 0px; } #sidebar .block-categories li { background: url('../images/blue-box-more-small.png') 0px 12px no-repeat; color: #464646; display: block; font-size: 12px; } #sidebar .block-categories li a { padding: 0px 0px 0px 20px; } #sidebar .block-categories li li { background-image: none; } #sidebar .block-categories li li a { padding: 0px 0px 0px 30px; } #sidebar .block-categories a { background: url('../images/block-categories-bg.png') bottom left repeat-x; color: #464646; display: block; line-height: 30px; text-decoration: none; } #sidebar .block-news { } #sidebar .block-news h3 { color: #464646; font-size: 14px; font-weight: bold; margin: 0px 0px 5px 0px; } #sidebar .block-news p { margin: 0px; } #sidebar .block-news .date { color: #898989; display: block; font-size: 10px; line-height: 18px; } #sidebar .block-news .item { margin: 0px 0px 25px 0px; } /****************************************************************************** * Footer ******************************************************************************/ #footer { color: #fff; background: #373737; border-bottom: 5px solid #242424; border-top: 5px solid #fff; overflow: hidden; z-index: 99; } #footer .box { position: relative; z-index: 2; } #footer-wrapper { height: 250px; padding: 30px 0px 0px 0px; position: relative; z-index: 99; } #footer-message { bottom: 10px; left: 10px; margin: 0px 0px 0px 0px; position: absolute; } #footer-shadow { background: url('../images/footer-shadow.png') top left no-repeat; height: 285px; position: absolute; top: 0px; right: -300px; width: 942px; z-index: 1; } #footer a { text-decoration: underline; } #footer a:hover { text-decoration: none; } #footer h2 { color: #009ee0; font-family: 'PTSansBold', 'Arial', sans-serif; font-size: 14px; font-weight: normal; margin: 0px 0px 18px 0px; text-transform: uppercase; } #footer li { line-height: 18px; } #footer p.cite { background: url('../images/blue-footer-cite.png') top left no-repeat; font-family: 'Georgia', serif; font-size: 14px; line-height: 24px; margin-left: -32px; padding-bottom: 25px; padding-left: 33px; position: relative; } #footer p.cite .name { bottom: 0px; display: block; font-family: 'Arial', sans-serif; font-size: 11px; font-weight: bold; line-height: 1; position: absolute; right: 0px; } #footer #contact-form { } #footer #contact-form label { display: block; font-size: 11px; line-height: 18px; margin: 0px 0px 5px 0px; } #footer #contact-form .form-text { float: left; margin: 0px 20px 10px 0px; width: 220px; } #footer #contact-form .form-text.second { margin-right: 0px; } #footer #contact-form .form-text input { background: url('../images/input.png') top left no-repeat; border: 0px; color: #fff; display: block; font-family: 'Arial', sans-serif; font-size: 11px; font-weight: normal; height: 24px; line-height: 24px; padding: 0px 5px; width: 210px; } #footer #contact-form .form-area { margin: 0px 0px 18px 0px; } #footer #contact-form .form-area textarea { background: url('../images/area.png') top left no-repeat; border: 0px; color: #fff; font-family: 'Arial', sans-serif; display: block; font-size: 11px; height: 64px; overflow: hidden; padding: 5px; width: 450px; } #footer #contact-form .form-submit { background: url('../images/blue-footer-button.png') top left no-repeat; float: right; height: 35px; } #footer #contact-form .form-submit input { background: transparent; border: 0px; color: #fff; cursor: pointer; display: block; font-size: 11px; font-weight: bold; line-height: 1; margin-top: 0px; text-align: center;} #footer #contact-form .form-submit { background: url('../images/buttons/blue-button-left.png') top left no-repeat; color: #fff !important; display: inline-block; font-weight: bold; height: 36px; padding: 0px 0px 0px 15px; text-decoration: none !important; } #footer #contact-form .form-submit-wrap { background: url('../images/buttons/blue-button-right.png') top right no-repeat; display: block; height: 36px; padding: 0px 15px 0px 0px; } #footer #contact-form .form-submit input { background: url('../images/buttons/blue-button-center.png') top left repeat-x; display: block; height: 32px; padding: 0px; } /***************************************************************************** * CSS sticky footer ******************************************************************************/ html, body, #page { height: 100%; } body:before { content:""; height: 100%; float: left; margin-top: -32767px;/ width: 0; } #page-wrapper { min-height: 100%; position: relative; z-index: 10; } #content { padding-bottom: 290px; overflow: auto; } #footer { clear: both; height: 180px; margin-top: -190px; }