* { margin: 0; padding: 0; outline: 0; }
body { font: 11px/15px Arial,sans-serif; color: #292929; text-align: left; background: #fff url(images/background.gif) 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: 0; line-height: 0; text-indent: -4000px; }
.shell { width: 875px; margin: 0 auto; }
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End Images */


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: 157px; font-size: 0; line-height: 0; }
h1#logo a { display: block; height: 76px; background: url(images/logo.gif); text-indent: -4000px; }
#header { height: 114px; }
#header p { float: right; display: inline; margin-top: 30px; padding-bottom: 0; }

#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: 615px; background: url(images/slogan-home.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: url(images/footer-bg.gif) repeat-x 0 0; height: 204px; padding-top: 40px; }
#footer .column { float: left; display: inline; width: 140px; }
#footer h2 { font: 14px Arial, sans-serif; text-transform: lowercase; color: #fff; }
#footer ul { list-style: none outside; }
#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 .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: inline; width: 228px; }

#sidebar{float: right; display: inline; width:228px}
#sidebar ul{list-style-type: none;}
#sidebar li{display: block; width:228px}
#sidebar li ul {padding-top:8px; border-bottom:solid 1px #d4d4d4; border-top:solid 1px #d4d4d4; margin-bottom:35px;}
#sidebar li ul li{ font-size: 12px; width:228px; padding-bottom:7px; width:228px; line-height: 15px; position: relative;}
#sidebar li ul li a{ margin-right: 30px; } 
#sidebar li ul li span{position: absolute; right: 0; top: 0px;}
#sidebar li h2{font-size: 11px; text-transform: uppercase; color:#292929; font-weight: normal; line-height: 14px; padding-bottom:7px}

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 center; 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 .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, #about-wrapper .side-right 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 !important; }
.image-hover h3 { font: 12px/14px Arial, sans-serif; color: #292929; margin: 5px 0; }
.image-hover p { font: 11px/16px Arial, sans-serif; color: #8c8d8e; padding-bottom: 10px; }
.image-hover .hovered-img { border: 1px solid #a1a1a1; }

.videos { border-top: 1px solid #d4d4d4; padding: 25px 0 45px; }
.videos .video { float: left; display: inline; width: 197px; height: 165px; overflow: hidden; background: url(images/video-bg.gif) no-repeat 0 0; padding: 11px 0 0 11px; margin: 0 25px 25px 0; }

#blog h2.pagetitle {display: block; font-family: Arial, sans-serif; margin-bottom: 10px;color: #292929;font-size: 18px}
#blog, .post { padding-bottom: 40px; }

.post h3 {  font: bold 16px Arial, sans-serif; margin-bottom: 2px; color: #292929; }
.post h3 a { font: bold 16px Arial, sans-serif; margin-bottom: 10px; color: #292929; }

/*.post h2 { display: block; font: bold 16px Arial, sans-serif; margin-bottom: 10px; color: #292929; }
.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;font-size: 11px; }
/*.post .postmetadata a { color: #292929; }
.post .postmetadata a.red { color: #c02e1b; }
.post .postmetadata a:hover.red { color: #292929; }
.post .postmetadata a:hover { text-decoration: none; color: #c02e1b; }*/
.red { color: #c02e1b; }
.post .postmetadata a { color: #292929; }
.post .postmetadata .red a { color: #c02e1b; }
.post .postmetadata .red a:hover { color: #292929; }
.post .postmetadata a:hover { text-decoration: none; color: #c02e1b; }

.side-right a { font-size: 12px; }

#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: 10px 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 { font: bold 12px Arial, sans-serif; }
.last-row { border-bottom: 0; }


h2#slogan { height: 31px; background: url(images/slogan.gif) no-repeat 0 0; margin-bottom: 15px; }
#about-wrapper { margin-top: 45px; }
#about-wrapper .side-left { position: relative; margin-top: -7px; }
#about p strong { font: bold 16px/20px Arial, sans-serif; }
#about  { padding-bottom: 90px; }


#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; }


p.top-part{padding-top:32px;}
p.top-part span{text-transform: uppercase;}
p.top-part a{color:#c02e1b; background:url(images/arr.gif) no-repeat right 3px; padding-right:10px; margin-left:5px}

.commentlist {
	list-style-type: none;
	padding-top:8px;
}
.commentlist li{
	border-bottom:1px solid #D4D4D4;
	margin-top: 15px;
}
#submit {
	border: none;
	background: url(images/submit-btn.gif) no-repeat 0 0;
	width: 85px;
	height: 28px;
	font-size: 0;
	line-height: 0;
	text-indent: -4000px;
}
#submit:hover {
	background: url(images/submit-btn.gif) no-repeat 0 bottom;	
}
#respond {
	margin-top: 20px;
}
.comment-text p {
	font-size:12px;
	padding-top:8px;
	line-height:15px;
	padding-bottom:7px;
}
.comment-info {
	color:#292929;
	font-size:11px;
	font-weight:normal;
	line-height:14px;
	padding-bottom:7px;
	text-transform:uppercase;
	border-bottom:1px solid #D4D4D4;
}