* { margin: 0; padding: 0; outline: 0; } body { font: 11px/15px Arial,sans-serif; color: #292929; text-align: left; background: #35341d; overflow-x: hidden; } #container { background: #fff url(../images/background.gif) repeat-x 0 0; } a { color: #999900; text-decoration: none; } a:hover { cursor: pointer; text-decoration: underline; } a img { border: 0; } .fl { float: left; display: inline; } .fr { float: right; display: inline; } .ac { text-align: center; } .ar { text-align: right; } .al { text-align: left; } .cl { clear: both; height: 0; line-height: 0; font-size: 0; text-indent: -4000px; } .hidden { display: none; } .notext { font-size: 0; line-height: 0; text-indent: -4000px; } .shell { width: 875px; margin: 0 auto; } .cart_message { background-color: #C02E1B; color: white; text-align: center; font-size: 12px; position: absolute; z-index: 50; width: 100%; padding: 2px; } p { padding-bottom: 15px; } h3 { font: bold 15px Arial, sans-serif; margin-bottom: 5px; } h4 { font: 13px Arial, sans-serif; margin-bottom: 2px; } h1#logo { height: 76px; width: 202px; font-size: 0; line-height: 0; } h1#logo a { display: block; height: 76px; background: url(../images/logo.jpg); text-indent: -4000px; } #header { height: 114px; } #header p { float: right; display: inline; margin-top: 30px; padding-bottom: 0; } #header .shell {position: relative;} #header a.notext { float:left; height:16px; background-repeat:no-repeat; background-position:0 0; } #header a.notext:hover { background-position:0 bottom; } #header a.about-link{ background-image:url(../images/whois-twelve-south.gif); width:149px; } #header a.products-link{ background-image:url(../images/view-products.gif); width:127px; } h2#slogan-home { height: 41px; width: 700px; background: url(../images/slogan-home-1.gif) no-repeat 0 0; margin: 15px auto 0; } #home-page { position: relative; } #home-page .previous, #home-page .next { display: block; height: 150px; width: 120px; background: url(../images/previous-product-bg.gif) no-repeat right 0; } #home-page .previous { position: absolute; top: 66px; left: -110px; padding-left: 30px !important; } #home-page .next { background-position: 0 0; background-image: url(../images/next-product-bg.gif); position: absolute; top: 66px; left: 845px; padding-left: 31px; width: 119px; } #home-page .placeholder { width: 804px; margin: 0 auto; } #footer { background: #292929 url(../images/footer-bg3.gif) repeat-x 0 0; height: 207px; padding-top: 37px; } #footer .column { float: left; display: inline; width: 140px; } #footer h2 { margin-bottom: 3px; font: 14px Arial, sans-serif; text-transform: lowercase; color: #fff; } #footer ul { list-style: none outside; font-size: 13px; } #footer a { color: #CCCCCC; line-height: 20px; } #footer a:hover { color: #FFFFFF; line-height: 20px; text-decoration: line-through; } #footer #rights { float: right; display: inline; width: 235px; color: #CCCCCC; } #footer #rights a:hover { text-decoration: underline; color: #FFFFFF; } #content { background: #fff; } #content .shell { position: relative; } .side-left { float: left; display: inline; width: 580px; font-size: 12px; } #hero-section { width: 693px; margin: 0 auto; } #navigation { height: 55px; border-bottom: 1px solid #d4d4d4; margin-bottom: 48px; } #navigation ul { float: left; display: inline; width: 50%; list-style: none outside; padding-left: 3px; } #navigation li { display: inline; } #navigation li a { float: left; display: inline; text-transform: uppercase; margin-right: 28px; padding-top: 35px; color: #292929; } #navigation li a:hover, #navigation li a.active { color: #a6a7a7; text-decoration: none; } #hero-nav { float: right; display: inline; padding-top: 10px; } #hero-nav a img { border: 1px solid #fff; } #hero-nav a:hover img { border: 1px solid #292929; } .column { float: left; display: inline; width: 276px; margin-right: 28px; } .last-column { margin-right: 0; } h2.tiny-shelf { height: 24px; background: url(../images/tiny-shelf.gif) no-repeat 0 0; margin-bottom: 3px; } .side-right { float: right; display: block; padding-bottom: 64px; width: 228px; } h2.backpack-slogan { height: 61px; background: url(../images/backpack-slogan.gif) no-repeat 0 0; margin-bottom: 10px; } a.buy-now { display: block; height: 28px; width: 85px; background: url(../images/btn-buy-now.gif) no-repeat 0 0; } a.buy-now:hover { background-position:0 bottom; } .section { padding: 18px 0; border-bottom: 1px solid #d4d4d4; } .section span { float: left; display: inline; font: 16px/28px Arial, sans-serif; color: #010101; } .section .buy-now { float: left; display: inline !important; margin-left: 14px; margin-top: 0; } .section h4.gray { color: #8c8d8e; margin-bottom: 10px; } .section a { display: block; margin-top: 10px; } .section ul { padding: 0 0 15px ; color: #8c8d8e; list-style: none outside; } .section ul li { background: url(../images/list-bg.gif) no-repeat 0 1ex; padding-left: 8px; } .section ul.no-bg { padding: 0 0 15px 2px; } .section ul.no-bg li { padding: 0; background: none; } .section .product-img { margin: 10px 0; border: 1px solid #d3d3d3; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .last-section { border-bottom: 0; padding-bottom: 40px; } #gallery { position: relative; } #gallery .image { float: left; display: inline; margin: 0 25px 25px 0; } #gallery .active-image { position: relative; } #gallery .last-img { margin-right: 0; } #gallery .image a img, .specification img { border: 1px solid #e5e5e5; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .holder { position: absolute; top: -18px; left: -18px; width: 208px; } .image-hover { background: url(../images/image-hover-bg.gif) repeat-y 0 0; position: relative; z-index: 2; } .image-hover .bottom { background: url(../images/image-hover-bottom.gif) no-repeat 0 bottom; height: 100%; } .image-hover .top { background: url(../images/image-hover-top.gif) no-repeat 0 top; padding: 18px; } .image-hover a img { border: 0; } .image-hover h3 { font: 12px/14px Arial, sans-serif; color: #292929; margin: 5px 0; } .image-hover p { font: 11px/14px Arial, sans-serif; color: #8c8d8e; padding-bottom: 10px; } .image-hover a img.hovered-img { border: 1px solid #a1a1a1; } .videos { border-top: 1px solid #d4d4d4; padding: 25px 0 45px; } .videos .video { width: 425px; height: 344px; overflow: hidden; background: url(../images/gallery_youtube_bg.jpg) no-repeat 0 0; padding: 12px 13px 13px 12px; margin: 0 25px 25px 0; } #blog, .post { padding-bottom: 40px; } .post h2 a { display: block; font: bold 16px Arial, sans-serif; margin-bottom: 10px; color: #292929; } .post .entry p { font: 12px/16px Arial, sans-serif; } .post .postmetadata { margin-top: 5px; padding: 10px 0; border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; } .post .postmetadata a { color: #292929; } .post .postmetadata a:hover { text-decoration: none; color: #c02e1b; } .side-right a { font-size: 12px; } .product .main-center p {color: #8c8d8e;} .product .side-left {padding-bottom: 64px;} .product .main_left_image {display: block; margin-bottom: 10px;} .product .product_name {margin-bottom: 10px;} .product .product_slogan {margin-bottom: 0;} .product_main_right {color: #8c8d8e;} .product_main_right h1, .product_main_right h2, .product_main_right h3, .product_main_right h4, .product_main_right h5 {color: #292929;} .product #hero-section {width: auto; text-align: center;} #tech-specs { padding-bottom: 100px; } .specification { padding-top: 30px; font-size: 12px; } .specification h3 { border-bottom: 1px solid #d4d4d4; line-height: 31px; margin-bottom: 0; } .row { padding: 8px 0; border-bottom: 1px solid #d4d4d4; line-height: 18px; } .row strong { float: right; display: inline; text-align: right; } .specification img { margin: 5px 0; } .specification a img { border: 0; margin: 0; } .row h4 { margin-bottom: 1ex; font: bold 12px Arial, sans-serif; } .last-row { border-bottom: 0; } h2#slogan { font-size: 24px; line-height: 40px; font-weight: normal; margin-bottom: 15px; } #page-wrapper { padding-top: 45px; } #page-wrapper .side-left { position: relative; margin-top: -7px; } #page p strong { font: bold 16px/20px Arial, sans-serif; } #page { padding-bottom: 90px; } #page h1 { font-size: 32px; line-height: 40px; font-weight: bold; background: #f00; color: #f99; } #page h2 { font-size: 28px; line-height: 40px; font-weight: normal; } #page h3 { font-size: 20px; line-height: 40px; font-weight: normal; } #page h4 { font-size: 16px; line-height: 40px; font-weight: bold; } #page h5 { font-size: 14px; line-height: 20px; font-weight: bold; } #page ul { margin-bottom: 15px; list-style: disc inside url(../images/list-bg.gif); } #lightbox { position: absolute; top: 10%; left: -2%; width: 909px; } #lightbox .top { height: 8px; background: url(../images/lightbox-top.png) no-repeat 0 0; } #lightbox .bottom { height: 8px; background: url(../images/lightbox-bottom.png) no-repeat 0 0; } #lightbox .middle { height: 100%; background: url(../images/lightbox-bg.png) repeat-y 0 0; padding: 7px 16px; } #lightbox .image { position: relative; } #lightbox .image img { border: 1px solid #e5e5e5; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } #lightbox .previous, #lightbox .next { display: block; height: 28px; width: 55px; background: url(../images/lightbox-previous.gif) no-repeat 0 0; } #lightbox .previous { position: absolute; top: 60px; left: 0; } #lightbox .next { width: 52px; background-image: url(../images/lightbox-next.gif); position: absolute; top: 60px; left: 825px; } #lightbox .text { position: relative; margin-top: 10px; } #lightbox h2 { font: 16px Arial, sans-serif; margin-bottom: 5px; } #lightbox p { font: 12px/14px Arial, sans-serif; color: #8c8d8e; padding-bottom: 10px; } #lightbox .close { position: absolute; left: 820px; top: 0; height: 9px; width: 52px; background: url(../images/lightbox-close.gif) no-repeat 0 0; } #productRotator { position: relative; height: 392px; } #productRotator #heroContainer { position: absolute; top: 0; left: 35px; text-align: center; } #productRotator #leftContainer { position: absolute; top: 100px; left: -100px; width: 89px; } #productRotator #rightContainer { position: absolute; top: 100px; right: -100px; width: 89px; } #productRotator #leftForeground { position: absolute; top: 79px; left: -32px; width:192px; height: 192px; background: url(../images/home/left_foreground.png) no-repeat; } #productRotator #rightForeground { position: absolute; top: 79px; right: -32px; width:192px; height: 192px; background: url(../images/home/right_foreground.png) no-repeat; } #productRotator img { position: absolute; } #productRotator #leftContainer img, #productRotator #rightContainer img { cursor: pointer; } .specification p {padding: 0;} .product_list {padding-bottom: 64px;} .product_list h2 {margin-bottom: 20px;} .product_list .product {display: block; margin: 0 0 1em 0; padding: 15px 32px 0px 150px; font-weight: normal; color: #000; text-decoration:none; border: 1px solid #ddd;} .product_list .product h3 {margin-bottom: 0px; font-size: 1.5em; font-weight: bold; color: #666600; letter-spacing:2px; text-transform:uppercase;} .product_list .product h4 {margin-bottom: 10px; font-size: 1.3em; font-weight: normal; color: #000;} .product_list .product p {color: #333333; font-size:1.3em; width:550px;} .product_list .product .pris {color: #CC3300; font-size:2.5em; float:right; font-weight:bolder; line-height:60px; margin-top:-40px;} #cart_popup {position: absolute; top: 100%; right: -30px; z-index: 10; width: 170px; padding: 0 30px 30px 30px; background: url(../images/cart_popup_bg.png) bottom left no-repeat;} #cart_popup a:hover {text-decoration: none;} #cart_popup .cart_tab {display: block; margin-left: 12px; padding: 0 9px 0 26px ; height: 32px; line-height: 30px; text-align: center; color: #797a7b;} #cart_popup .container {display: block; overflow: hidden;} #cart_popup .data {display: block; margin: 1em 1em 1ex 1em; padding: 1ex 1ex; text-align: right; color: #151515; background: #eee; border: 1px solid #ddd;} #cart_popup .count {float: left;} #cart_popup .cart_price {font-weight: bold;} #cart_popup .cart_link {display: block; margin: 7px 13px 0 13px; text-align: right;} #cart_popup .shadow {position: absolute; top: 0; right: 30px; display: block; width: 170px; height: 8px; background: url(../images/cart_popup_small_shadow.png) top right repeat-x;} #cart_popup h3 {font-size:1.1em; font-weight:bold; color: #666600; padding-left:8px; padding-top:12px;} #cart_popup h6 {font-size:0.9em; font-weight:bold; color:#336600; padding-left:10px; padding-top:12px;} #cart_popup .errorMsg {font-size:.8em; font-weight:bold; color:#990000; padding-left:12px;} #cart_popup input {margin-left:10px; font-size:11px; color:#333300; width:130px; background-color:#FFFFEE;} #cart_popup textarea {margin-left:10px; font-size:11px; color:#333300; width:130px; background-color:#FFFFEE; font-family:Arial, Helvetica, sans-serif;} #cart_popup .submit {font-size:11px; color:#333300; width:35px; background-color:#FFFFEE; cursor:pointer; float:right; margin-top:5px;} .date{font-size:11px; color:#666666; font-weight:bold;} .orderText {font-size:11px; color:#666600; font-weight:bold;} .orderInput {font-size:12px; color:#333300; width:160px; background-color:#FFFFEE;} .orderInput2 {font-size:12px; color:#333300; width:40px; background-color:#FFFFEE;} .textArea {font-size:12px; color:#333300; width:290px; height:80px; background-color:#FFFFEE; font-family:Arial, Helvetica, sans-serif} .button {font-size:12px; color:#333300;}