/* -------------------------------------------------------------- Pioneer AVR Landing Page styles.css -------------------------------------------------------------- */ /* Reset */ 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, b, u, i, center, 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-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } /* Floats & clearfix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac \*/ .clearfix { display:block; zoom:1; } /* End hide from IE Mac */ .clear { clear: both; } .float_left { float: left; } .float_right { float: right; } .hide { width: 0; height: 0; overflow: hidden; outline: none; border: none; position: absolute; left: 0; top: 0; background: none; display: none; } /* -------------------------------------------------------------- * STANDALONE PAGE LAYOUT -------------------------------------------------------------- */ /* HEADER */ body { margin: auto; background: #e8e4e5 url(../img/bg.jpg) 0 70px repeat-x; } #header, #content, #sitemap, #footer { text-align: center; margin: auto; } .inner { width: 980px; margin: 0 auto; text-align: left; } #content .inner { width: 990px; } #header { background: #000 url(../img/global/header_bg.gif) left top repeat-x; } #header .inner { position: relative; height: 70px; } #header p, #header li { margin-bottom: 0; } /* global/logo */ #logo { position: absolute; left: 0; top: 1.44em; width: 127px; height: 20px; } #logo a { display: block; width: 127px; height: 20px; } /* language switch */ #langswitch { position: absolute; right: 0; top: 1.88em; width: 155px; color: #CCCCCC; font-weight:bold; } #langswitch ul { position: relative; text-align: right; margin: auto; } #langswitch ul li { display: inline; font-size: 0.69em; line-height: 1em; padding: 0 12px 0 12px; background: url(../img/layout/langswitch_divider.gif) center right no-repeat; } #langswitch ul li a, #langswitch ul li a:link, #langswitch ul li a:active, #langswitch ul li a:visited { text-decoration: none; color: #CCCCCC; font-family: Arial, Helvetica, sans-serif; font-weight:normal; } #langswitch ul li.last { background: none; } /* CONTENT */ #content { background: none; padding: 0 0 2.81em 0; } /* FOOTER */ #footer { padding-bottom: 60px; } #footer .inner { background: url(../img/layout/dotted-line.gif) repeat-x top left; padding: 0.94em 0 0 0; } #footer hr { display: none; } #footermenu { padding: 0 0 0 0; display: inline; text-align: center; } #footermenu ul { position: relative; text-align: center; margin: auto; } #footermenu ul li { display: inline; font-size: 0.69em; line-height: 1em; padding: 0.45em 15px 0.64em 15px; background: url(../img/layout/footermenu_divider.gif) center right no-repeat; } #footermenu ul li.last { background: none; } #footermenu ul li a, #footermenu ul li a:link, #footermenu ul li a:active, #footermenu ul li a:visited { text-decoration: none; color: #999; } #footermenu ul li a:hover { text-decoration: underline; color: #999; } /* -------------------------------------------------------------- * COMMON STYLES -------------------------------------------------------------- */ /* TEXT */ body { font-size: 100%; line-height: 1em; color: #403f3f; font-family: Arial, Helvetica, sans-serif; } select { color: #403f3f; font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 1.5em; line-height: 1em; font-weight: bold; padding: 0 0 0.75em 0; color: #333; } h2 { font-size: 1.13em; line-height: 1em; padding: 0 0 0.75em 0; color: #333; } h3 { font-size: 0.88em; line-height: 1em; padding: 0; color: #333; } h4 { font-size: 0.88em; line-height: 1em; padding: 0; color: #333; } p { font-size: 0.75em; padding: 0 0 1em 0; } li { font-size: 0.75em; } td, th { font-size: 0.75em; } li p, td li { font-size: 1em; } .note { font-size: 0.7em; } /* text alignment */ .align_r { text-align: right; } /* LINKS */ a, a:link, a:active, a:visited { color: #b91440; text-decoration: none; } a:hover { text-decoration: underline; } /* link button */ .lnk_button { line-height:11px; height: 24px !important; background-image: url(../img/layout/button_sprice.png); background-repeat: no-repeat; font-size:11px !important; padding: 0 0 0 10px; margin: 2px 0 3px 0; display:block; display:-moz-inline-box; display:inline-block; cursor:pointer; cursor:hand; text-decoration: none !important; } .lnk_button b { line-height:12px !important; height:18px; background-image: url(../img/layout/button_sprice.png); background-repeat: no-repeat; color: #fff; font-weight: bold; text-transform: uppercase; padding: 6px 10px 0 0; display:block; display:-moz-inline-box; display:inline-block; } .lnk_button:link, .lnk_button:active, .lnk_button:visited { background-position: 0 -150px; } .lnk_button:hover { background-position: 0 -210px; } .lnk_button:link b, .lnk_button:active b, .lnk_button:visited b { background-position: right -120px; } .lnk_button:hover b { background-position: right -180px; } /* link with red arrow */ a.lnk_next, a.lnk_next:link, a.lnk_next:active, a.lnk_next:visited { color: #b91440; background: url(../img/layout/lnk_next.gif) no-repeat right center; padding: 0 20px 0 0; border-bottom: none; } a.lnk_next:hover { color: #b91440; text-decoration: underline; } /* LISTS */ ul.bullets li { background: url(../images/avr/img/bullet.gif) 0 0.5em no-repeat; padding: 0 0 0 8px; } /* -------------------------------------------------------------- * SITE SPECIFIC STYLES -------------------------------------------------------------- */ /* HEADING, NAVIGATION */ .menu { padding: 20px 15px 7px 15px; } .menu h1 { width: 300px; height: 30px; float: left; padding: 0; margin: 0; background: url(../img/heading.png) 0 0 no-repeat ; } .menu h1 a { height: 30px; display: block; text-indent: -9999px; } .menu ul { float: right; padding: 0; margin: 4px 0 0 0; } .menu li { float: left; margin: 0 0 0 30px; line-height: 27px; } .menu a, .menu a:link, .menu a:active, .menu a:visited, .menu a:hover { color: #b91440; } .menu a.lnk_button { margin: 0; } /* current nav item */ .page_home .menu h1 a, .page_home .menu h1 a:link, .page_home .menu h1 a:active, .page_home .menu h1 a:visited { cursor: default; } .page_home .mn_home a, .page_home .mn_home a:link, .page_home .mn_home a:active, .page_home .mn_home a:visited, .page_home .mn_home a:hover, .page_play .mn_play a, .page_play .mn_play a:link, .page_play .mn_play a:active, .page_play .mn_play a:visited, .page_play .mn_play a:hover, .page_connect .mn_connect a, .page_connect .mn_connect a:link, .page_connect .mn_connect a:active, .page_connect .mn_connect a:visited, .page_connect .mn_connect a:hover, .page_solutions .mn_solutions a, .page_solutions .mn_solutions a:link, .page_solutions .mn_solutions a:active, .page_solutions .mn_solutions a:visited, .page_solutions .mn_solutions a:hover, .page_box .mn_box a, .page_box .mn_box a:link, .page_box .mn_box a:active, .page_box .mn_box a:visited, .page_box .mn_box a:hover, .page_reviews .mn_reviews a, .page_reviews .mn_reviews a:link, .page_reviews .mn_reviews a:active, .page_reviews .mn_reviews a:visited, .page_reviews .mn_reviews a:hover { color: #403f3f; text-decoration: none; } /* CONTENT BOX */ .box { width: 990px; margin: 0 0 15px 0; } .box_t { width: 990px; height: 10px; overflow: hidden; background: url(../img/layout/box_t.png) no-repeat 0 0; } .box_m { width: 990px; background: url(../img/layout/box_m.png) repeat-y 0 0; } .box_b { width: 990px; height: 10px; overflow: hidden; background: url(../img/layout/box_b.png) no-repeat 0 0; } .box_body { padding: 10px 20px 0 20px; position: relative; } /* CONTENT ITEM */ .item { width: 950px; margin: 0 0 15px 0; } .item_t { width: 950px; height: 10px; overflow: hidden; background: url(../img/layout/item_t.png) no-repeat 0 0; } .item_m { width: 950px; background: url(../img/layout/item_m.png) no-repeat 0 0; } .item_b { width: 950px; height: 10px; overflow: hidden; background: url(../img/layout/item_b.png) no-repeat 0 0; } .item_body { padding: 20px 40px; } .last_item { margin: 0 0 10px 0; } .extra_space { padding-top: 460px; } /* Homepage: philosophy is positioned absolute, so it can overlap the intro */ /* THUMBS */ .thumbs { zoom: 1; height: 65px; float: left; padding: 0; } .thumbs ul { zoom: 1; margin: 5px 0 0 0; /*clear: none; */} .thumbs ul li { float: left; padding: 0; margin: 0 5px 5px 0; background-repeat: no-repeat; background-position: 0 0; } .thumbs ul li.divide { margin-left: 70px; } .thumbs li a, .thumbs li a:link, .thumbs li a:active, .thumbs li a:visited { position: relative; display: block; width: 75px; height: 55px; zoom: 1; margin: 0; padding: 0; } .thumbs li a:hover { background: url(../img/slideshow/thumb_hover.png) 0 0 no-repeat; } .thumbs li a.selected, .thumbs li a.selected:link, .thumbs li a.selected:active, .thumbs li a.selected:visited, .thumbs li a.selected:hover { background: url(../img/slideshow/thumb_hover.png) 0 0 no-repeat; cursor: default; } .thumbs li a span { display: block; width: 1px; height: 1px; overflow: hidden; text-indent: -9999px; } .thumbs li .icon { width: 28px; height: 30px; position: absolute; text-indent: -9999px; overflow: hidden; top: -10px; right: -14px; _right: -7px; /*IE6*/ *right: -7px; /*IE7*/ } .thumbs li .play .icon { background: url(../img/slideshow/icon_play.png) 0 0 no-repeat; z-index: 8; } .thumbs li .plus .icon { background: url(../img/slideshow/icon_plus.png) 0 0 no-repeat; z-index: 9; } /* SLIDESHOW */ .slideshow { overflow: hidden; position: relative; } .slideshow_content { position: relative; z-index: 9; } .slideshow_item { } .slideshow_menu { /*overflow:hidden;*/ position:absolute; left: 0; bottom: 0; z-index: 10; zoom: 1; } .slideshow_menu ul { clear:left; float:left; position:relative; left:50%; padding: 0; text-align:center; zoom: 1; } .slideshow_menu li { display:block; float:left; position:relative; right:50%; padding: 0; zoom: 1; } .slideshow_shared_content { position: absolute; left: 0; top: 0; z-index: 11; padding: 30px 0 0 40px; } .lightbox_iframe_content .slideshow { width: 885px; height: 457px; } .lightbox_iframe_content .slideshow_content { width: 885px; height: 457px; } .lightbox_iframe_content .slideshow_item { width: 885px; height: 457px; } .lightbox_iframe_content .slideshow_menu { width: 885px; height: 75px; background: #fff;} .lightbox_iframe_content .slideshow_menu ul { margin: 10px 0 0 0; } .lightbox_iframe_content .slideshow_menu li { } .lightbox_iframe_content .slideshow_shared_content { } .lightbox_footer { width: 845px; padding: 20px; } .lightbox_footer .logo { float: left; width: 155px; } .lightbox_footer .back { float: right; width: 300px; text-align: right; font-size: 0.75em; } /* LIGHTBOX */ .lightbox_overlay { background: #fff; position:fixed; top:0; right:0; bottom:0; left:0; height:100%; width:100%; margin:0; padding:0; opacity:.85; filter: alpha(opacity=85); -moz-opacity: 0.85; z-index:101; } * html .lightbox_overlay { background: #fff; position: absolute; left: 0; top: 0; width: 100%; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } .lightbox { position:fixed; top:50%; left:50%; margin:0; z-index:102; overflow: hidden; background: #fff; } * html .lightbox { position:absolute; top:50%; left:50%; margin:0; padding:0; z-index:102; overflow: hidden; } .lightbox iframe { zoom: 1; } .lightbox_content { width: 885px; height: 457px; width: 885px; height: 457px; overflow: hidden; } .lightbox_close { position:absolute; width:60px; height:60px; right:21px; top:17px; background:transparent url(../img/lightbox/close.png) no-repeat scroll right top; text-indent:-99999px; overflow:hidden; cursor:pointer; } .lightbox { overflow: hidden; border: 1px solid #d9d9d9; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .lightbox_iframe_content { border: 1px solid #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; width: 885px; height: 457px; overflow: hidden; } .lightbox_iframe_content .slideshow { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .lightbox_iframe_content .slideshow_item { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .lightbox_iframe_content .slideshow_menu { -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomleft:6px; border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomright: 6px; border-bottom-right-radius: 6px; } #lightbox_885-457 .lightbox_content { background: url(../img/loader.gif) center center no-repeat; } /* TABS */ .tab_menu { } .tab_menu ul { display: block; } .tab_menu li { float: left; background: url(../img/tabs/scale_left.gif) no-repeat 0 17px; } .tab_menu span { display: block; color: #b3b2b3; text-align: center; background: url(../img/tabs/scale_right.gif) no-repeat right 17px; height: 34px; } .tab_menu ul ul { float: none; display: block; } .tab_menu li li { /*width: 96px;*/ width: 86px; font-size: 100%; /*margin-right: -1px;*/ } .tab_menu a { color: #403f3f; font-weight: bold; font-size: 1em; text-decoration: none; width: 81px; text-align: center; background-image: url(../img/tabs/tab.gif); background-repeat: no-repeat; background-position: 0 0; float: left; padding-left: 5px; position: relative; } .tab_menu .first a { background-image: url(../img/tabs/tab_first.gif); } .tab_menu .last a { background-image: url(../img/tabs/tab_last.gif); } .tab_menu a:hover { background-position: 0 -50px; text-decoration: none; cursor: pointer; } .tab_menu a.selected, .tab_menu a.selected:hover { background-position: 0 -100px; text-decoration: none; cursor: default; } .tab_menu a b { float: left; /*width: 86px;*/ width: 76px; padding-right: 5px; text-align: center; background-image: url(../img/tabs/tab.gif); background-repeat: no-repeat; background-position: right 0; height: 41px; line-height: 41px; padding-bottom: 9px; } .tab_menu .first a b { background-image: url(../img/tabs/tab_first.gif); } .tab_menu .last a b { background-image: url(../img/tabs/tab_last.gif); } .tab_menu a:hover b { background-position: right -50px; } .tab_menu a.selected b, .tab_menu a.selected:hover b { background-position: right -100px; } .tab_content_box { width: 864px; } .tab_content_box_t { height: 10px; background: url(../img/tabs/box_t.png) no-repeat 0 0; } .tab_content_box_m { background: url(../img/tabs/box_m.gif) repeat-y 0 0; position: relative; width: 864px; height: 251px; overflow: hidden; } .tab_content_box_b { height: 10px; background: url(../img/tabs/box_b.png) no-repeat 0 0; } .tab_content {width:824px; height: 230px; position: absolute; top:11px; left: 20px; z-index: 10; } .tab_menu a b.line2 { height: 32px; padding-top: 9px; line-height: 13px; } .tab_menu a b.line2 .small { font-size: 10px; font-style: normal; } /* tab breedte aanpassen 9 tabs x 95px = 855px bv. 8 tabs 106px ( rest = 7 ) */ /* 9 tabs */ /* .tab_menu li li { width: 95px; } .tab_menu a { width: 90px; } .tab_menu a b { width: 85px; } */ /* 8tabs */ /* .tab_menu li li { width: 106px; X } .tab_menu a { width: 101px; X-5px } .tab_menu a b { width: 96px; X-10px } */ /* 7tabs */ .tab_menu li li { width: 123px; } .tab_menu a { width: 118px; } .tab_menu a b { width: 113px; } .tab_menu li li.last { width: 126px; /*X*/ } .tab_menu .last a { width: 121px; /* X-5px*/ } .tab_menu .last a b { width: 116px; /* X-10px*/ } /* -------------------------------------------------------------- * CONTENT ITEMS -------------------------------------------------------------- */ /* HOME - Intro */ #intro { width: 980px; margin: 0; z-index: 1; } #intro .item_t { display: none; } #intro .item_m { width: 990px; background: none; } #intro .item_b { display: none; } #intro .item_body { padding: 0; } #intro .slideshow { width: 990px; height: 575px; } #intro .slideshow_content { width: 990px; height: 575px; background: none; } #intro .slideshow_item { width: 990px; height: 575px; } #intro .slideshow_shared_content { padding: 55px 0 0 65px; width: 270px; } #intro .slideshow_menu { background: none; bottom: -65px; left: 65px; width: 300px; } /* HOME - Philosophy */ #philosophy { position: absolute; left: 20px; top: -80px; z-index: 100; } #philosophy .item_m { height: 515px; } #philosophy .item_body { } #philosophy .slideshow { width: 850px; height: 475px; } #philosophy .slideshow_content { width: 850px; height: 370px; background: none; } #philosophy .slideshow_item { width: 850px; height: 320px; margin: 45px 0 0 0; } #philosophy .slideshow_shared_content { padding: 0; width: auto; } #philosophy .slideshow_menu { height: 100px; left: 0; bottom: 0; width: 250px; vertical-align: middle; z-index: 1101; zoom: 1; } /*#philosophy .slideshow_menu .thumbs { padding-top: 0; }*/ #philosophy_0 .text, #philosophy_1 .text { width: 300px; float: right; margin-right: 20px; } #philosophy_0 .video, #philosophy_1 .video { width: 493px; height: 297px; float: left; } /* PLAY - Quality */ #quality h1, #quality p { color: #fff; } #quality .item_t, #quality .item_b { display: none; } #quality .item_body { width: 950px; height: 461px; padding: 0; } #quality .slideshow { width: 950px; height: 461px; } #quality .slideshow_content { width: 950px; height: 461px; overflow: hidden; background: none; } #quality .slideshow_item { width: 950px; height: 461px; } #quality .slideshow_shared_content { width: 380px; } #quality .slideshow_menu { float: none; left: 40px; bottom: 40px; width: 300px; } #quality .slideshow_menu li { } #quality_0 { background: url(../img/play/quality_0.jpg) no-repeat; } #quality_1 { background: url(../img/play/quality_1.jpg) no-repeat; } #quality_2 { background: url(../img/play/quality_2.jpg) no-repeat; } /* PLAY - Watch */ #watch .item_t, #watch .item_b { display: none; } #watch .item_m { background: url(../img/play/_watch.jpg) no-repeat; position: relative; width: 950px; height: 520px; } #watch .item_body { padding: 30px 40px; } #watch .text { width: 310px; } #watch .thumbs { position: absolute; left: 40px; bottom: 35px; } #watch_0 { background: url(../img/watch/watch_0.jpg) no-repeat; } #watch_0 .text { padding: 80px 0 0 90px; width: 220px; } #watch_1 { background: url(../img/watch/watch_1.jpg) no-repeat; } #watch_1 .text { padding: 100px 0 0 90px; width: 340px; } #watch_1 .text h1, #watch_1 .text p { color: #fff; } #watch_2 { background: url(../img/watch/watch_2.jpg) no-repeat; } #watch_2 .text { padding: 100px 0 0 90px; width: 340px; } #watch_2 .text h1, #watch_2 .text p { color: #fff; } #watch_3 { background: url(../img/watch/watch_3.jpg) no-repeat; } #watch_3 .text { padding: 60px 0 0 50px; width: 280px; } #watch_3 .text h1, #watch_3 .text p { color: #fff; } /* PLAY - Listen */ #listen .item_m { height: 515px; } #listen .item_body { } #listen .slideshow { width: 870px; height: 475px; } #listen .slideshow_content { width: 870px; height: 370px; } #listen .slideshow_item { width: 870px; height: 320px; margin: 45px 0 0 0; } #listen .slideshow_shared_content { padding: 0; width: auto; } #listen .slideshow_menu { height: 100px; bottom: 0; width: 700px; } #listen .slideshow_menu .thumbs { padding-top: 0; } #listen .text { width: 340px; float: right; margin-right: 0; } #listen .video { width: 493px; height: 297px; float: left; } #listen_3 .text { width: 455px; min-height: 320px; padding: 0 0 0 415px; float: none; background: url(../img/play/listen_3.jpg) no-repeat; } #listen_4 .text { width: 335px; min-height: 320px; padding: 0 0 0 535px; float: none; background: url(../img/play/listen_4.jpg) no-repeat; } /* PLAY - iPod */ #ipod .item_t, #ipod .item_b { display: none; } #ipod .item_m { background: url(../img/play/ipod.jpg) no-repeat; position: relative; width: 950px; height: 520px; } #ipod .item_body { padding: 30px 40px 30px 520px; } #ipod .text { width: 380px; } #ipod .thumbs { position: absolute; left: 520px; bottom: 35px; width: 400px; } #ipod_0 { background: url(../img/ipod/ipod_0.jpg) no-repeat; } #ipod_0 .text { padding: 60px 0 0 90px; width: 170px; } #ipod_0 .text h1, #ipod_0 .text p { color: #fff; } #ipod_1 { background: url(../img/ipod/ipod_1.jpg) no-repeat; } #ipod_1 .text { padding: 60px 0 0 90px; width: 170px; } #ipod_1 .text h1, #ipod_1 .text p { color: #fff; } #ipod_2 { background: url(../img/ipod/ipod_2.jpg) no-repeat; } #ipod_2 .text { padding: 60px 0 0 90px; width: 260px; } #ipod_2 .text h1, #ipod_2 .text p { color: #fff; } #iphone_0 { background: url(../img/ipod/iphone_0.jpg) no-repeat; } #iphone_0 .text { padding: 60px 0 0 90px; width: 230px; } #iphone_1 { background: url(../img/ipod/iphone_1.jpg) no-repeat; } #iphone_1 .text { padding: 60px 0 0 90px; width: 230px; } #iphone_2 { background: url(../img/ipod/iphone_2.jpg) no-repeat; } #iphone_2 .text { padding: 60px 0 0 90px; width: 230px; } #iphone_3 { background: url(../img/ipod/iphone_3.jpg) no-repeat; } #iphone_3 .text { padding: 60px 0 0 90px; width: 230px; } #iphone_4 { background: url(../img/ipod/iphone_4.jpg) no-repeat; } #iphone_4 .text { padding: 60px 0 0 90px; width: 410px; } /* CONNECT - gui */ #connection .text { width: 350px; float: left; } #connection .visual { width: 510px; float: right; } #gui .item_body { padding: 30px 40px; } #gui .text { background: url(../img/connect/gui.jpg) no-repeat; padding-left: 440px; min-height: 264px; } #gui .thumbs ul { margin: 0; } #gui { background: url(../img/connect/gui_0.jpg) no-repeat; } #gui_0 { background: url(../img/gui/gui_0.jpg) no-repeat; } #gui_0 .text { padding: 145px 0 0 90px; width: 200px; } #gui_0 h1, #gui_0 p { color: #FFF; } #gui_1 { background: url(../img/gui/gui_1.jpg) no-repeat; } #gui_1 .text { padding: 145px 0 0 90px; width: 200px; } #gui_1 h1, #gui_1 p { color: #FFF; } #gui_2 { background: url(../img/gui/gui_2.jpg) no-repeat; } #gui_2 .text { padding: 145px 0 0 90px; width: 200px; } #gui_2 h1, #gui_2 p { color: #FFF; } #gui_3 { background: url(../img/gui/gui_3.jpg) no-repeat; } #gui_3 .text { padding: 145px 0 0 90px; width: 200px; } #gui_3 h1, #gui_3 p { color: #FFF; } #gui_4 { background: url(../img/gui/gui_4.jpg) no-repeat; } #gui_4 .text { padding: 145px 0 0 90px; width: 200px; } #gui_4 h1, #gui_4 p { color: #FFF; } #gui_5 { background: url(../img/gui/gui_5.jpg) no-repeat; } #gui_5 .text { padding: 145px 0 0 90px; width: 200px; } #gui_5 h1, #gui_5 p { color: #FFF; } #gui_6 { background: url(../img/slideshow/slideshow_black_bg.gif) no-repeat; } #gui_6 .text { padding: 11px 0 0 143px; } #gui_6 h1, #gui_6 p { } /* REVIEWS - customer research */ #research .text { float: left; width: 305px; } #research .item_body { } #research .slideshow { width: 513px; height: 470px; float: right; overflow: visible; } #research .slideshow_menu { left: -355px; bottom: 10px; } /* UNBOXING */ /* image map */ .image_map { position: relative; } /* tooltip */ #tooltip { position: absolute; top: 0; left: 0; z-index: 1010; font-size: 12px; } #tooltip_content { background: #fff url(../img/tooltip/tooltip_bg.jpg) repeat-x bottom left; padding: 3px 15px 5px 15px; font-size: 12px; overflow: hidden; } #tooltip .tl { background: transparent url(../img/tooltip/tooltip_tl.png) no-repeat top left; height: 14px; padding-left: 14px; } #tooltip .tr { background: transparent url(../img/tooltip/tooltip_tr.png) no-repeat top right; height: 14px; overflow: hidden; } #tooltip .bg_l { background: transparent url(../img/tooltip/tooltip_bg_l.png) repeat-y top left; } #tooltip .bg_r { background: transparent url(../img/tooltip/tooltip_bg_r.png) repeat-y top right; margin-left: 8px; padding-right: 9px; } #tooltip .bl { background: transparent url(../img/tooltip/tooltip_bl.png) no-repeat top left; height: 19px; } #tooltip .br { background: transparent url(../img/tooltip/tooltip_br.png) no-repeat top right; height: 19px; margin-left: 34px; } /* PRODUCTS - Take a closer look... */ .product { width: 624px; float: left; background: #fff; } .product .shortdesc { width: 360px; float: left; height: 70px; padding: 15px 0 0 20px; } .product .shortdesc h3 { padding: 0 0 10px 0; } .product .colours { width: 204px; float: left; text-align: right; clear: right; padding: 38px 40px 0 0; height: 47px; } .product .switch_H { background: url(../img/products/switch-H.gif) no-repeat left center; padding: 2px 0 2px 30px; } .product .switch_K { background: url(../img/products/switch-K.gif) no-repeat right center; padding: 2px 30px 2px 0; } .product .switch_S { background: url(../img/products/switch-S.gif) no-repeat left center; padding: 2px 0 2px 30px; } .product .colours a { color: #b91440; text-decoration: none; font-size: 0.8em; line-height: 1em; cursor: pointer; } .product .colours a:hover { color: #b91440; text-decoration: underline; cursor: pointer; } .product .colours a.active, .product .colours a.active:hover { color: #403f3f; text-decoration: none; cursor: default; } .product .detail { width: 624px; height: 150px; clear: both; position: relative; overflow: hidden; } .product .detail .K, .product .detail .S, .product .detail .H {position: absolute; top: 0; width: 624px; height: 150px;} .product .detail ul { } .product .detail li { float: left; width: 168px; padding: 0 20px; background: url(../img/products/divider.gif) no-repeat left 33px; } .product .detail li.first { background: none; } .product .detail a { display: block; width: 168px; padding: 0; color: #403f3f; text-decoration: none; } .product .detail a img { display: block; } .product .detail a em { display: block; font-style: normal; font-weight: bold; font-size: 1.17em; color: #b91440; } .related_products { width: 200px; float: right; height: 230px; background: url(../img/products/related_products_bg.jpg) no-repeat 0 0; } .related_products h4 { padding: 40px 0 20px 30px; } .related_products .carousel { position: relative; width: 200px; height: 160px; overflow: hidden; } .related_products .carousel ul { width: 9999px; height: 160px; position: absolute; left: 0; top: 0; } .related_products .carousel li { width: 200px; height: 160px; float: left; text-align: center; } .related_products .carousel li img { display: block; } .related_products .prev, .related_products .next { width: 30px; height: 30px; display: block; position: absolute; top: 40px; cursor: pointer; } .related_products .prev { left: 15px; background: url(../img/products/carousel_prev.png) no-repeat 0 0; } .related_products .next { right: 15px; background: url(../img/products/carousel_next.png) no-repeat 0 0; } .related_products .previous_button_disabled { background: url(../img/products/carousel_prev_disabled.png) no-repeat 0 0; cursor: default; } .related_products .next_button_disabled { background: url(../img/products/carousel_next_disabled.png) no-repeat 0 0; cursor: default; } .compare_all { text-align: right; padding: 25px 5px 0 0; } /*_*/ /* SOLUTIONS */ #solutions .solutions_header { padding: 20px 315px 0 45px; } #solutions .browse { font-weight: bold; } #solutions #combo_tab_container { width: 950px; height: 696px; position: relative; z-index: 10; margin: 10px 0 0 0; } /* Note: the tabs are supposed to overlap over the top of the content */ #solutions #combo_tabs { width: 238px; height: 696px; position: absolute; top:0; left:0; z-index: 12; } #solutions #combo_tab_content { width: 768px; height: 696px; position: absolute; top:0; right: 0; z-index: 11; background: url(../img/solutions_combo_content_bg.png) no-repeat 0 0; } #solutions #combo_tabs li { height: 116px; width: 238px; background: url(../img/solutions_tab_sprite.png) no-repeat transparent 0 -1px; margin-left: -7px; cursor: pointer; } #solutions #combo_tabs li.hover {background-position: 0 -118px;} #solutions #combo_tabs li.currentTab {background-position: 0 -235px;} #solutions #combo_tabs li .title { padding: 20px 80px 0 52px; font-weight: bold; font-size: 16px;} #solutions #combo_tabs li .subtitle { padding: 5px 80px 0 52px; font-style: italic; font-size: 12px;} #solutions #combo_tabs li.hover .title, #solutions #combo_tabs li.hover .subtitle, #solutions #combo_tabs li.currentTab .title, #solutions #combo_tabs li.currentTab .subtitle { color: #b91440; } #solutions #combo_tab_content .comboTab {display:none; width: 614px; margin: 35px 0 0 65px;} #solutions #combo_tab_content .comboTab.currentTab {display:block;} #solutions #combo_tab_content .combo {height: 300px; position: relative; z-index: 7;} #solutions #combo_tab_content .combo .price {font-weight: bold; font-size: 30px; color: #b91440; position: absolute; top: 0; right: 0; z-index: 9;} #solutions #combo_tab_content .combo img {position:absolute; left: 0; bottom: 127px; z-index: 8;} #solutions #combo_tab_content .combo .footer {height: 40px; position: absolute; left: 0; bottom: 90px; width: 100%; background-color: #f4f4f4; } #solutions #combo_tab_content .combo .footer p {position: absolute; top: 5px; font-weight: bold; text-align: center;} #solutions #combo_tab_content .combo .footer p a { color: #403F3F; text-decoration: none; } #solutions #combo_tab_content .combo .footer p a:hover { color: #b91440; text-decoration: none; } #solutions #combo_tab_content .combo .desc {position: absolute; height:88px; width:100%; top: 212px; left: 0;}