* { margin: 0; padding: 0; outline: 0; }
body { font: 11px/15px Arial,sans-serif; color: #333333; text-align: left; background: #ffffff; overflow-x: hidden; }

#container { background: #fff repeat-x 0 0; }

a { color: #c02e1b; 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: 18px; }
.shell { width: 875px; margin: 0px auto; }

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(/static/images/logo.gif); text-indent: -4000px; }
#header { height: 75px; }
#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(/static/images/whois-twelve-south.gif); width:149px; }
#header a.products-link{ background-image:url(/static/images/view-products.gif); width:127px; }

h2#headline-home { height: 40px; width: 700px; margin: 15px auto 0; text-align: center; }

#home-page { position: relative; }
#home-page .previous, #home-page .next { display: block; height: 150px; width: 120px; background: url(/static/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(/static/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(/static/images/footer-bg3.gif) repeat-x 0 0; height: 150px; 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: #a09b8b; line-height: 20px; }
#footer a:hover { color: #c02e1b; line-height: 20px; text-decoration: none; }

#footer #rights { float: right; display: inline; width: 235px; color: #a09b8b; }
#footer #rights a:hover { text-decoration: underline; color: #a09b8b; }

#content { background: #fff; padding-bottom: 20px; }
#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(/static/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; margin-bottom: 10px; }

.holder { position: absolute; top: -18px; left: -18px; width: 208px; }
.image-hover {  background: url(/static/images/image-hover-bg.gif) repeat-y 0 0; position: relative; z-index: 2; }
.image-hover .bottom { background: url(/static/images/image-hover-bottom.gif) no-repeat 0 bottom; height: 100%; }
.image-hover .top { background: url(/static/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; }

.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#headline { font-size: 24px; line-height: 30px; font-weight: normal; margin-bottom: 5px; }
#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(/static/images/list-bg.gif); }

#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(/static/images/home/left_foreground.png) no-repeat; }
#productRotator #rightForeground { position: absolute; top: 79px; right: -32px; width:192px; height: 192px; background: url(/static/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 2em 0; padding: 32px 32px 64px 440px; font-weight: normal; color: #000; text-decoration:none; border: 1px solid #ddd;}
.product_list .product h3 {margin-bottom: 10px; font-size: 1.5em; font-weight: normal; color: #000;}
.product_list .product h4 {margin-bottom: 10px; font-size: 1.3em; font-weight: normal; color: #000;}	
		/**	style used for both examples **/
.menu { height: 70px; display: block; }
.menu ul { list-style: none; padding: 0; margin: 0; }
.menu ul li { float: left; overflow: hidden; position: relative; text-align: center; line-height: 70px; }
.menu ul li a { position: relative; display: block; width: 110px; height: 70px; font-family: helvetica; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-decoration: none; cursor: pointer; }
.menu ul li a span { position: absolute; left: 0; width: 110px; }
.menu ul li a span.out { top: 0px; }
.menu ul li a span.over,
.menu ul li a span.bg { top: -70px; }
/** 1st example **/
#menu { background: #333; }
#menu ul li a { color: #000; }
#menu ul li a span.over { color: #FFF; }
#menu ul li span.bg { height: 70px; background: url('../images/bg_over.png') center center no-repeat; }
/** 2nd example **/
#menu2 { position: relative; top: 0;}
#menu2 ul li a { color: #000; }
#menu2 ul li a span.over { background: url('../images/bg_over.png') center center no-repeat; color: white; }

.logo { position: relative; }
.comp { position: relative; height: 720; }
.comp a { color: #a09b8b; line-height: 20px; }
.comp a:hover { color: #c02e1b; line-height: 20px; text-decoration: none; }