* { margin: 0; padding: 0; } body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; color: #01172a; background: #e1ecf7 url(../layout/bg_body.jpg) top center repeat-x; text-align: center; } .hidden_pics { display: none; } a { color: #ed1b2f; } a:hover { color: #005bab; } p { margin-bottom: 20px; line-height: 1.5em; } img { border-style: none; } .clear { clear: both; } /* ----------------------------------------------------- */ /* ------------------>>> BACKGROUNDS <<<---------------- */ /* ----------------------------------------------------- */ #bg_sky { width: 100%; background: url(../layout/bg_sky.jpg) center top no-repeat; } #bg_grass { width: 100%; background: url(../layout/bg_grass.jpg) bottom center repeat-x; } #bg_grass_center { width: 100%; background: url(../layout/bg_grass_center.jpg) bottom center no-repeat; padding-top: 16px; padding-bottom: 12px; } /* ----------------------------------------------------- */ /* ---------------------->>> WRAP <<<------------------- */ /* ----------------------------------------------------- */ #wrap { width: 952px; margin: 0 auto; position: relative; background: #fff url(../layout/bg_wrap.gif) repeat-y; } #wrap_top { width: 952px; background: url(../layout/bg_wrap_top.jpg) top no-repeat; } #wrap_bottom { width: 952px; background: url(../layout/bg_wrap_bottom.jpg) bottom no-repeat; } #dots-rl { width: 952px; background: url(../layout/dots-rl.gif) 1px 2px repeat-y; } #hp-dots-bottom { width: 952px; background: url(../layout/hp-dots-bottom.gif) bottom no-repeat; padding-bottom: 9px; } #dots-bottom { width: 952px; background: url(../layout/dots-bottom.gif) bottom no-repeat; } .dots-center { background: url(../layout/dots-center.gif) center repeat-y; width: 100%; } /* ----------------------------------------------------- */ /* -------------------->>> HEADER <<<------------------- */ /* ----------------------------------------------------- */ #header { height: 192px; } body#homepage #header { height: 400px; } #logo { position: absolute; top: 22px; right: 22px; } #logo a { display: block; width: 265px; height: 58px; overflow: hidden; position: relative; } #logo a span { display: block; width: 265px; height: 58px; background-image: url(../layout/logo.gif); position: absolute; top: 0; left: 0; cursor: pointer; } #header-panel { height: 48px; float: left; background: #9fd0f4 url(images/bg-header-panel.jpg) right no-repeat; position: absolute; top: 46px; right: 0px; } #top_imgs { width: 936px; height: 234px; background-image: url(../layout/bg_hp_top3.jpg); position: absolute; top: 165px; left: 8px; } #search { position: absolute; top: 32px; left: 12px; } #search .input { width: 176px; margin-right: 7px; } #search input { width: 160px; } #search input.button { width: 33px; height: 33px; padding: 0; background: url(../layout/search-button.gif); } /* ----------------------------------------------------- */ /* ------------------>>> NAVIGATION <<<----------------- */ /* ----------------------------------------------------- */ #navigation { display: block; position: absolute; top: 94px; left: 7px; font-size: 12px; text-transform: uppercase; font-weight: bold; z-index: 10; } #navigation li { display: block; float: left; list-style: none; margin-right: 4px; position: relative; } #navigation li.last { margin-right: 0px; } #navigation li a { display: block; height: 21px; overflow: hidden; position: relative; } #navigation li a span { display: block; height: 21px; position: absolute; top: 0; left: 0; cursor: pointer; } #navigation li.about_us a { background-color: #ed1b2f; width: 232px; } #navigation li.about_us a span { background-image: url(../layout/nav_about_us.gif); width: 232px; } #navigation li.carrier a { background-color: #ff7000; width: 230px; } #navigation li.carrier a span { background-image: url(../layout/nav_carrier.gif); width: 230px; } #navigation li.environment a { background-color: #2eb135; width: 230px; } #navigation li.environment a span { background-image: url(../layout/nav_environment.gif); width: 230px; } #navigation li.faq a { background-color: #3b60af; width: 231px; } #navigation li.faq a span { background-image: url(../layout/nav_faq.gif); width: 231px; } #navigation li.contact a { background-color: #3b60af; width: 231px; } #navigation li.contact a span { background-image: url(../layout/nav_contact.gif); width: 231px; } ul.top ul { display: none; } ul.top li.hover ul { display:block; } #menu {} #navigation .submenu { width: 226px; overflow: hidden; text-transform: none; font-size: 11px; position: absolute; top: 21px; text-align: left; z-index: 10; } #navigation li.about_us .submenu { background-color: #ed1b2f; left: 6px; } #navigation li.carrier .submenu { background-color: #ff7000; left: 4px; } #navigation li.environment .submenu { background-color: #2eb135; left: 4px; } #navigation li.faq .submenu { background-color: #3b60af; left: 5px; } #navigation .submenu ul { margin: 5px 3px 3px; } #navigation .submenu ul li { display: block; float: left; margin-bottom: 3px; } #navigation .submenu ul li a { display: block; width: 220px; height: auto; background: #f14959; color: #fff; text-decoration: none; } #navigation li.about_us .submenu a { background-color: #f14959; } #navigation li.carrier .submenu a { background-color: #ff8d33; } #navigation li.environment .submenu a { background-color: #58c15d; } #navigation li.faq .submenu a { background-color: #6280bf; } #navigation .submenu ul li a:hover { text-decoration: underline;} #navigation .submenu ul li a span { display: block; height: auto; padding: 3px 6px; position: relative; background: transparent; } /* ----------------------------------------------------- */ /* -------------------->>> SUBNAV <<<------------------- */ /* ----------------------------------------------------- */ #subnav { width: 225px; float: left; text-align: left; background-color: #d3192c; } #subnav ul { padding: 0 3px 0 3px; } #subnav li { display: block; list-style: none; padding: 10px 0 10px 38px; margin-bottom: 3px; border-bottom: 1px solid #ef8d96; background: url(../layout/subnav-arrow.gif) top left no-repeat; } #subnav li.active { background: url(../layout/subnav-arrow2.gif) top left no-repeat; } #subnav li.active a,#subnav li.active a:hover { color: #fff; font-weight: bold; text-decoration: none; } #subnav li a { display: block; color: #fff; background-repeat: no-repeat; background-position: left; } #subnav li a:hover { color: #000; } #subnav ul ul { padding-top: 16px; } #subnav ul ul li { display: block; list-style: none; padding: 0 0 8px 14px; border-bottom: none; background: url(../layout/subnav-li2.gif) 4px 5px no-repeat; } #subnav ul li.active ul li a { text-decoration: none; font-weight: normal; } #subnav ul li.active ul li a:hover { color: #000; } /* ----------------------------------------------------- */ /* -------------------->>> COLUMNS <<<------------------ */ /* ----------------------------------------------------- */ #left { width: 245px; float: left; background: url(../layout/dots-left.jpg) top right no-repeat; } #left .padding { padding-left: 12px; } #right { width: 670px; float: left; padding-bottom: 30px; } /* ----------------------------------------------------- */ /* -------------------->>> CONTENT <<<------------------ */ /* ----------------------------------------------------- */ #homepage #content { min-height: 500px; } #content { text-align: left; min-height: 670px; } #content ul { padding-left: 20px; } #content .padding { padding: 0 0 0 15px; } #content h1 { color: #ed1b2f; font-size: 24px; font-weight: bold; margin-bottom: 12px; padding: 14px 0 14px 15px; background: url(../layout/dots.gif) bottom repeat-x; } #content h2 { color: #ed1b2f; font-size: 20px; font-weight: bold; margin-bottom: 14px; } #content h2.dots { padding: 14px 0 14px 15px; background: url(../layout/dots.gif) bottom repeat-x; } #content h3 { color: #ed1b2f; font-size: 14px; font-style: italic; font-weight: bold; } #content p { line-height: 1.6em; text-align: left; margin-bottom: 20px; } body#homepage #content p { line-height: 1.3em; } #content img { } img.img-left { float: left; margin: 0 14px 10px 0; } .border-box { border: 1px solid #cccdca; background-color: #ecedeb; padding: 18px 8px; margin-bottom: 20px; } #content form { } #content fieldset { border-style: none; } #content label {} .inputup { float: left; margin-bottom: 5px; } .input, .textarea { float: left; width: 248px; overflow: hidden; border: 4px solid #e1e2e4; margin-right: 6px; } .input { height: 24px;} .textarea { margin-bottom:10px;} .textarea textarea, .textarea { width:510px } input { float: left; padding: 3px 7px; margin: 0; width: 232px; background: #fdfdfe; border: 1px solid #b8b9bb; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; font-style: italic; font-weight: bold; color: #666; } input.button { float: left; width: auto; height: 33px; padding: 0 0 0 40px; margin: 0; text-align: left; border-style: none; background: url(../layout/button-send.gif) top left no-repeat; font-style: normal; text-decoration: underline; cursor: pointer; } textarea { padding: 3px 7px; background: #fdfdfe; border: 1px solid #b8b9bb; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; font-style: italic; font-weight: bold; color: #666; } /* ----------------------------------------------------- */ /* ------------------->>> HOMEPAGE <<<------------------ */ /* ----------------------------------------------------- */ .hp-box-top-left { width: 475px; float: left; } .hp-box-top-left img { float: left; margin-right: 10px; margin-bottom: 10px; } #content .hp-box-top-left .padding { padding-left: 25px; padding-right: 20px; } #content .hp-box-top-left h2 { margin-left: 11px; margin-right: 20px; padding: 10px 0 10px 15px; } .hp-box-top-right { width: 475px; float: right; } .hp-box-top-right img { float: left; margin-right: 10px; margin-bottom: 10px; } #content .hp-box-top-right .padding { padding: 0 25px 0 20px;} #content .hp-box-top-right h2 { margin-left: 4px; margin-right: 30px; padding: 10px 0 10px 15px; } .hp-box-bottom-left { width: 475px; float: left; } #content .hp-box-bottom-left .padding { padding-left: 20px; padding-right: 20px; } .hp-box-bottom-right { width: 475px; float: right; } #content .hp-box-bottom-right .padding { padding: 10px 0 0 20px; } a.icon-all { display: block; float: right; padding: 0px 0 2px 22px; background: url(../layout/icon-all.png) 0px 1px no-repeat; margin-bottom: 12px; } a.icon-more { padding: 0px 0 2px 22px; margin: 20px 0px 20px 0; background: url(../layout/icon-arrow-more.png) 0px 1px no-repeat; margin-bottom: 12px; } a.icon-all-prod { float: right; padding: 0px 0 2px 26px; margin: 20px 0px 20px 0; background: url(../layout/icon-all-prod.png) 0px 0px no-repeat; margin-bottom: 12px; } a.icon-gallery { display: block; padding: 0px 0 2px 26px; background: url(../layout/icon-gallery.png) 0px 0px no-repeat; margin-bottom: 0px; } a.icon-showreel { display: block; padding: 2px 0 2px 26px; background: url(../layout/icon-showreel.png) 0px 0px no-repeat; } ul.list-hp li { list-style: none; background: url(../layout/icon-hp-list.png) 0px 0px no-repeat; padding: 2px 0 2px 26px; margin-bottom: 12px; } .cnt { width: 300px; float: left; } .date { background: url(../layout/dots.gif) bottom repeat-x; font-weight: bold; margin-bottom: 10px; float: left; width: 100%; } .day { float: left; width: 28px; padding-bottom: 8px; background: url(../layout/v-dots.gif) right repeat-y; padding-bottom: 8px; } .month { float: left; width: 24px; padding-bottom: 8px; text-align: center; background: url(../layout/v-dots.gif) right repeat-y; } .year { float: left; padding-left: 12px; } .gallery { float: left; margin: 0 20px 20px 0; } .last { margin-right: 0px; } .gallery img { background-color: #e0e0e0; padding: 6px; border: 1px solid #b2b2b2; } .gallery a img { background-color: #e0e0e0; padding: 6px; border: 1px solid #b2b2b2; } .gallery a:hover img { background-color: #f03d4e; padding: 6px; border: 1px solid #b32532; } /* ----------------------------------------------------- */ /* -------------------->>> FOOTER <<<------------------- */ /* ----------------------------------------------------- */ #footer { width: 100%; height: 98px; background: #fff; text-align: left; position: relative; color: #666; font-size: 10px; } #footer a { text-decoration: none; } #footer a:hover { text-decoration: underline; } #footer-center { width: 950px; margin: 0 auto; position: relative; } a#webdesign-logo { display: block; position: absolute; top: 29px; right: 10px;} p#webdesign { position: absolute; top: 24px; right: 36px; text-align: right; line-height:12px; } p#copyright { position: absolute; top: 24px; left: 10px; line-height:12px; } /* p#footer-links { position: absolute; top: 60px; left: 12px; background: url(../layout/footer-links.gif) 50px 0px no-repeat; } */ p#footer-links { position: absolute; top: 58px; left: 10px; padding: 3px; } p#footer-links img { float: left; margin-right: 6px; } p#footer-links img#small_logo_citroen { margin-right: 20px; } .galery_img { /* border-color: #f77800; */ border-color: #d3192c; border-style: solid; border-width: 5px; margin-right: 20px; margin-bottom: 20px; float: left; } .galery_img_main { /* border-color: #f77800; */ border-color: #d3192c; border-style: solid; border-width: 5px; margin-right: 20px; margin-bottom: 20px; float: left; }