/* _RESET
	removes bg, border, margin, outline & padding from all common elements
	sets font-size to 100% and vertical-align to baseline
----------------------------------------------------------------------------- */

html, body, br, hr, 
div, span, a,
object, iframe,
ul, ol, dl, li, dt, dd,
h1, h2, h3, h4, h5, h6,
p, blockquote, q, address,
small, big, cite, dfn, ins, del, 
i, em, b, strong, sup, sub, strike,
pre, code, samp, kbd, var, tt,
form, fieldset, legend, label,
input, textarea, option, .nobox{ 
	background-color: transparent;
	border: 0;
	font-size: 100%;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline; 
}

blockquote, q{ quotes: none; }		/* removes browser generated quotes */
br{ height: 0; }					/* removes height from break tag */
a img{ border: 0; }					/* removes border from linked images */
img{ display: block; }				/* fixes 3px gap below non-floated in content images */
img.inline{ display: inline; }		/* gives inline display back to specific images */
legend{ display: none; }			/* removes legend */

/* _TYPO
	sets default typography settings for common elements
----------------------------------------------------------------------------- */

body{ font: 12px Avenir, "Trebuchet MS" , verdana, arial, helvetica, clean, sans-serif; }

code, samp, kbd, var{ font-family:  Avenir, "Trebuchet MS" , verdana, arial, helvetica, clean, sans-serif; }

h1, h2, h3, h4, h5, h6, b, strong{ font-weight: bold; }
i, em, cite, dfn, ins{ font-style: italic; }
del, code, samp, kbd, var{ font-style: inherit; }

a{ text-decoration: underline; }
del{ text-decoration: line-through; }
ins{ text-decoration: none; }

abbr, acronym{ 
	border: 0; 
	cursor: help; 
	text-decoration: none; 
}

h1{ font-size: 18px; }
h2{ font-size: 16px; }
h3{ font-size: 13px; }
h4{ font-size: 12px; }
h5{ font-size: 12px; }
h6{ font-size: 12px; }

ul, dl{ list-style-type: disc; }
ol{ list-style-type: decimal; }

li, dt, dd,
p, pre, address,
legend, label, input, textarea, 
select, option, optgroup,
th, td{ font: inherit; }

/* _TABLE
----------------------------------------------------------------------------- */

table{ width: 100%; }

th, td{ padding: 8px; }

th{ text-align: left; }

/* _ADDRESS
----------------------------------------------------------------------------- */

 

/* _FRAMEWORK
----------------------------------------------------------------------------- */

/* manually set inline display to floats, solves MSIE issue
   has no effect on firefox, safari or opera  */
 	.right{ float: right; }

.float-clear:after{
	content: ".";
	clear: both;
	display: block;
	height: 0;
	font-size: 0;
	visibility: hidden;
} /* after method, works very well, must set height: 1%; for IE */

.float-clear-div{
	clear: both; 
	height: 0; 
	font-size: 0; 
} /* extra div method, use only in case of emergency */

.hide{ display: none; }

.snap{ 
	margin: 0 auto; 
	width: 940px; 
}
.clearfloat{clear:both;height: 0; 
	font-size: 0; }
.clearleft{clear:left;height:0; 
	font-size: 0; }
.txt-right{ text-align: right; }
.txt-center{ text-align: center; }
.txt-left{ text-align: left; } 			/* only used to override a parent */
.txt-justify{ text-align: justify; }
/**  
================================
CLEAR 
================================ **/





/**  
================================
GLOBAL  FDF9E8
================================ **/
body {
background-color:#000;
	text-align: center;
	font: 12px "Trebuchet MS" , verdana, arial, helvetica, clean, sans-serif;
	background-color:#000;
	background-image: url(../images/content/bk.jpg);
	background-repeat: repeat-y;
	background-position: center 0px;
background-attachment:fixed;
	
	color:#58585A;
 
}
a, a:link, a:visited, a:active{color:#006CB4;text-decoration:underline;}
a:hover{text-decoration:underline;}
h1{}
h2{ color:#333;padding:3px;margin:0px;padding-top:0px;padding:15px;padding-left:0px;font-size:20px;line-height:20px;border-bottom:solid 1px #ccc;}
h2 a,h2 a:active,h2 a:link,h2 a:visited{color:#333;padding:3px;margin:0px;padding-top:0px;text-decoration:none;}
h3{}
h4{margin:0px;padding:5px;}
.pad20{padding:20px;padding-top:0px;}
.pad40{padding:40px;padding-top:0px;}
.blue{color:#0397D6;}
.green{color:#00A95D;}
.orange{color:#F7941E;}
.grey{color:#999;}

blockquote {
	background: url(../images/content/close-quote.gif) no-repeat right bottom;
	padding-left: 18px;
	text-indent: -18px;
	margin: 0px;
	color: #333333;
	 line-height:20px;
	font-size: 14px;
	font-style: italic;
}
blockquote:first-letter {
	background: url(../images/content/open-quote.gif) no-repeat left top;
	padding-left: 18px;
	 
	font-size: 18px;
	font-style: italic;
	 
}

#content-middle .left ol.large{margin-left:60px;font-size:25px;color:#666;}
#content-middle .left ol.large li{font-size:25px;}
#content-middle .left ol.large li p div{font-size:12px;}
 

#content-middle .left h2{}
#content-middle .left h3{}
#content-middle .left h4{}
#content-middle .left p{line-height:20px;}
#content-middle .left ul{margin:20px;margin-left:60px;}
#content-middle .left ul li{}

/**  
================================
LAYOUT 
================================ **/
#wrapper { 
	width: 980px;  
	margin: 0 auto;  
	text-align: left;
	
} 
#wrapper #container{
	padding-left:13px; 
	padding-right:13px;  
	text-align:left; }
#header { 
position:absolute;
top:0px;
z-index:99999;
	display:block;
	 
	height:80px;
	width:926px;
	margin-left:10px;margin-right:10px;
	margin-bottom:14px;

} 
#header img.logo{float:left;}
#header .top{height:50px;text-align:right;margin-left:650px;padding-right:42px;} 
#header .bottom{height:30px;text-align:right;}
#header .search-top{}
#header .search-top form{padding:0px;margin:0px;}
#header .search-top.inputbox{width:100px;}
#header .search-top .button{float:right;margin-top:3px;}



#footer{display:block;background-image: url(../images/content/footer-bk.png);
	background-repeat: repeat-x;height:200px;width:980px;}
#footer .col{display:block;float:left;width:170px;padding:10px;}
#footer .col h5{font-size:15px;color:#666666;height:30px;line-height:30px;}
#footer .col a{color:#888888;line-height:20px;text-decoration:none;}
#footer .col a:hover{text-decoration:underline;}
#footer .col ul{list-style:none;}
#footer .col ul li{height:20px;}
/**  
================================
CONTENT 
================================ **/
#content-top{display;block;height:396px;width:980px;background-color:#000;}
#content-middle{width:980px;min-height:300px; background-color:#000;color:#000;}



 
#content-middle .col50{width:49%;float:left;}
#content-middle.col2 .left{float:left;width:735px;background-color:#F2F2F2;}

 
#content-middle.col2 .right{float:right;width:245px;background-color:#000;}
#content-middle.col2 .right h2{display:block;margin:0px;padding:0px;border:none;height:50px;line-height:50px;color:#F5891D;font-size:20px;margin-left:25px;}

#content-middle.col2 .left .topcap{
        display:block;height:15px;background-image: url(../images/content/content-left-top.jpg);
	background-repeat: no-repeat;}
#content-middle.col2 .left .middle{padding:10px;padding-top:0px;line-height:14px;}
#content-middle.col2 .left .middle p{padding:10px;}
#content-middle.col2 .left .bottom{  display:block;height:15px;background-image: url(../images/content/content-left-bot.jpg);
	background-repeat: no-repeat;}

#content-middle.col2 .teaser{display:block;height:275px;}
 #content-middle.col2 .teaser .copy{margin-left:270px;}
 #content-middle.col2 .teaser ul{margin:10px;margin-left:30px;}
 #content-middle.col2 .teaser ul li{margin-bottom:10px;}
 
/* 1 col */
#content-middle.col1{}
#content-middle.col1 .col{display:block;width:300px;padding-left:20px; float:left;text-align:center;}
/* 2 col */
/**  
================================
FONT 
================================ **/
.font{}

.font.chunk{font-family: "ChunkFive";color:#000;font-weight:normal;}
.font.chunk.med{font-size:20px;}
.font.chunk.med2{font-size:25px;margin:5px;margin-left:0px;}
.font.chunk.large{font-size:30px;padding:10px;padding-top:0px;height:50px;line-height:50px;}


.font.eurostyle{font-family: "eurostile";color:#000;font-weight:bold;}
.font.eurostyle.med{font-size:20px;}
.font.eurostyle.med2{font-size:25px;margin:5px;margin-left:0px;}
.font.eurostyle.large{font-size:40px;padding:10px;padding-top:0px;height:50px;line-height:50px;}
/**  
================================
FORM 
================================ **/
#form{}
#form input{border:solid 1px #666;padding:3px;width:200px;}
#form textarea{border:solid 1px #666;padding:3px;width:200px;}
#form .submit{background-color:#000;color:#fff;}

/**  
================================
NAVIGATION 
================================ **/
.nav-top{padding-left:19px;display:block;height:74px;width: 941px;  background-image: url(../images/content/nav-bk.png);
	background-repeat: repeat-x;
background-position:0 16px;margin-top:7px;}
.nav-top li{display:block;float:left;display:block;height:74px;}
.nav-top li a{display:block;height:40px;line-height:40px; margin-top:16px;color:#fff;text-decoration:none;}
.nav-top li a:hover{color:#F5891D;}


.nav-top li.logo a{
        margin-top:0px;
        width:73px;
	height:74px;
        background-image: url(../images/content/nav-bk.gif);
	background-repeat:no-repeat;}
.nav-top li.logo a:hover{}
.nav-top li.text a{padding-left:10px;padding-right:10px;text-align:right;}
.nav-top li.home a{ 
        text-indent:-3000px;
        margin-top:16px;
	width:105px;
        background-image: url(../images/content/nav-home-off.png);
	background-repeat:no-repeat;}
.nav-top li.home.current a{background-image: url(../images/content/nav-home-on.png);}
.nav-top li.home a:hover{background-image: url(../images/content/nav-home-on.png);}
.nav-top li.why a{ 
        text-indent:-3000px;
        margin-top:16px;
	width:159px;
        background-image: url(../images/content/nav-why-off.png);
	background-repeat:no-repeat;}
.nav-top li.why.current a{background-image: url(../images/content/nav-why-on.png);}
.nav-top li.why a:hover{background-image: url(../images/content/nav-why-on.png);}
.nav-top li.community a{ 
	text-indent:-3000px;
	margin-top:16px;
	width:116px;
        background-image: url(../images/content/nav-community-off.png);
	background-repeat:no-repeat;}
.nav-top li.community a:hover{background-image: url(../images/content/nav-community-on.png);}
.nav-top li.community.current a{background-image: url(../images/content/nav-community-on.png);}

.nav-top li.purchase a{
	text-indent:-3000px;
	width:117px;
        background-image: url(../images/content/nav-purchase-off.png);
	background-repeat:no-repeat;}
.nav-top li.purchase a:hover{background-image: url(../images/content/nav-purchase-on.png);}
.nav-top li.purchase.current a{background-image: url(../images/content/nav-purchase-on.png);}

.nav-top li.instructions a{
	text-indent:-3000px;
        margin-top:16px;
	width:123px;
        background-image: url(../images/content/nav-inst-off.png);
	background-repeat:no-repeat;margin-right:30px;}
.nav-top li.instructions.current a{background-image: url(../images/content/nav-inst-on.png);}

.nav-top li.instructions a:hover{background-image: url(../images/content/nav-inst-on.png);}

/* Dropdowns */
.nav-top li.purchase ul{ background-image:none;padding:0px;margin:0px;width: 140px; visibility: hidden; position: absolute; top: 61px; left: 470px; }
.nav-top li.purchase ul li{ background:none;background-image:none;padding:0px;margin:0px;width: 160px;height:30px; float: none; }
.nav-top li.purchase ul li a{ text-indent:0px;background-color:#242424; color:#ccc;background-image:none;padding:0px;margin:0px; width: 140px; display: inline-block;  height:30px;line-height:30px;font-size:14px;padding-left:20px;} 
.nav-top li.purchase ul li a:hover{background-image:none;color:#F7941E;;}

.nav-top li.community ul{ background-image:none;padding:0px;margin:0px;width: 140px; visibility: hidden; position: absolute; top: 61px; left: 350px; }
.nav-top li.community ul li{ background:none;background-image:none;padding:0px;margin:0px;width: 160px;height:30px; float: none; }
.nav-top li.community ul li a{ text-indent:0px;background-color:#242424; color:#ccc;background-image:none;padding:0px;margin:0px; width: 140px; display: inline-block;  height:30px;line-height:30px;font-size:14px;padding-left:20px;} 
.nav-top li.community ul li a:hover{background-image:none;color:#F7941E;}

.nav-top li.why ul{ background-image:none;padding:0px;margin:0px;width: 140px; visibility: hidden; position: absolute; top: 61px; left: 200px; }
.nav-top li.why ul li{ background:none;background-image:none;padding:0px;margin:0px;width: 160px;height:30px; float: none; }
.nav-top li.why ul li a{ text-indent:0px;background-color:#242424; color:#ccc;background-image:none;padding:0px;margin:0px; width: 140px; display: inline-block;  height:30px;line-height:30px;font-size:14px;padding-left:20px;} 
.nav-top li.why ul li a:hover{background-image:none;color:#F7941E;}

/* navigation left */
.nav-right{list-style:none;margin:0px;padding:0px;}
.nav-right li{}
.nav-right li a{display:block;height:31px;line-height:31px;border-bottom:solid 1px #333333;
text-decoration:none;padding-left:32px;color:#999999;}
.nav-right li a:hover{color:#F5891D;background-color:#333;}
.nav-right li.active a{color:#F5891D;}
.nav-right li.on a{color:#F5891D;}

.nav-right li ul{padding:0px;margin:0px;}
.nav-right li ul li a{padding-left:60px;}
/**  
================================
BUTTONS
================================ **/
a.button{display:inline-block;}
a.button.small{
 
	width:100px;height:25px;
	background-image: url(../images/content/buttons-small.png);background-repeat:no-repeat;
	background-position:0px 0px;text-indent:-3000px;}
a.button.small:hover{background-position:0px 0px;}


/**  
================================
CALLOUT 
================================ **/
.callout.home{display:block;width:300px;height:270px;padding:0px;text-align:left;color:#999}
.callout.home a{color:#999;} 
.callout.home h2{display:block;font-size:18px;color:#999;padding:0px;margin:0px;height:40px;line-height:40px;padding-left:10px;padding-top:2px;border:none;}
.callout.home.black{background-image: url(../images/content/callout-home-bk.png);background-repeat:no-repeat;}
.callout.home p{line-height:14px;padding:10px;}


.callout.interior{display:block;width:350px;height:290px;padding:8px;}
.callout.interior h3{display:block;color:#CCCCCC;font-size:18px;font-weight:normal;height:50px;line-height:50px;padding-left:30px;padding-top:2px;}
.callout.interior h4{color:#E17E1A;}
.callout.interior a{color:#999999;}
.callout.interior.white{background-image: url(../images/content/callout-bk-white.png);background-repeat:no-repeat;}
.callout.interior.black{background-image: url(../images/content/callout-bk.png);background-repeat:no-repeat;color:#999;line-height:14px;}
.callout.interior.none{background-image:none;padding:10px;}

.callout.interior.white h3{color:#000;}
.grid.list{}
.grid.list.small .row{display:block;padding-bottom:10px;margin-bottom:10px;padding:10px;padding-top:0px;}
.grid.list.small .row .thumb{display:block;width:80px;height:80px;overflow:hidden;float:left; margin-right:20px;}
.grid.list.small .row .thumb img{width:80px;}
.grid.list.small .row  .copy{margin-left:100px;color:#999999;}
.grid.list.small .quote_from{font-weight:bold;font-size:12px;}


.grid.list.medium{ }
.grid.list.medium .row{ min-height:115px;padding-bottom:10px;margin-bottom:10px;border-bottom:solid 1px #ccc;clear:left;}
.grid.list.medium .row .thumb{width:80px;max-height:100px;}
.grid.list.medium .row .copy{padding:10px;}



.grid.list.medium2{ }
.grid.list.medium2 .row{ padding-bottom:10px;margin-bottom:10px;border-bottom:solid 1px #ccc;clear:left;min-height:60px;}
.grid.list.medium2 .row .thumb{ width:80px;height:70px;display:block;overflow:hidden; float:left; }
.grid.list.medium2 .row .copy{  padding:10px; margin-left:90px;}


.grid.list.large{ }
.grid.list.large h2{color:#666666;}
.grid.list.large ul li{margin-bottom:5px;}

.grid.list.large .row{padding-bottom:10px;margin-bottom:10px;margin-right:11px;}
.grid.list.large .row .thumb{width:220px;text-align:center;}
.grid.list.large .row .thumb.large{display:block;height:180px;overflow:hidden;width:180px;}
.grid.list.large .row .copy{padding:10px;line-height:20px;}
.grid.list.large .quote_from{font-weight:bold;font-size:13px;padding:5px;margin-left:20px;}

.grid.list.large .row.align_left .thumb{float:left;margin-right:30px;}
.grid.list.large .row.align_left .copy{padding:10px;}
.grid.list.large .row.align_right .thumb{float:right;margin-left:30px;}
.grid.list.large .row.align_right .copy{padding:10px;}
 
 
.grid.list.large.callout{display:block;width:694px;height:202px;background-color:#666666;color:#fff; margin-left:5px;padding:15px;background:url(../images/content/review-callout-bk.png) 0 0 no-repeat;}
.grid.list.large.callout  .row{min-height:200px;}
.grid.list.large.callout  .row .thumb{ display:block;width:200px; float:left;height:177px;overflow:hidden; }
.grid.list.large.callout  .row .copy{padding:10px;font-size:11px;line-height:12px;}

.grid.list.large.callout blockquote {
	background: url(../images/content/close-quote-white.gif) no-repeat right bottom;
	padding-left: 18px;
	text-indent: -18px;
	margin: 0px;
	color: #fff;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
        line-height:20px;
	font-style: italic;
}
.grid.list.large.callout blockquote:first-letter {
	background: url(../images/content/open-quote-white.gif) no-repeat left top;
	padding-left: 18px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: italic;
	 
}

/**  
================================
SCROLLABLE BANNER 
================================ **/

#banner2.home { 
      
         position:relative;
	 
	width: 980px;
	height:511px; 
        
	color:#fff;
 	padding:0px;margin:0px;
        background-image: url(../images/content/banner-home.jpg);
	 
}
#banner2.home .buttons{position:absolute;margin-top:320px;margin-left:280px;}
#banner {
       
        position:relative;
	overflow:hidden;
	width: 980px;
	height:396px; 
        
	color:#fff;
 	padding:0px;margin:0px;
}
#banner .video-container{position:absolute;z-index:9;}
#banner .video-container .video{position:relative;top:0;left:0;margin-left:580px;margin-top:100px;display:block;height:265px;width:366px;padding:15px;
background-image: url(../images/content/video-bk.png);background-repeat:no-repeat;}
#banner .items {
	/* this cannot be too large */
	 width:20000em;
	
	 position:absolute;
         
          padding:0px;margin:0px;

         background-color:black;
}
 
#banner .items div{
        
        display:block;
        width: 980px;
	height:396px;
        background-repeat:no-repeat;
  	float:left;
	
}


#banner .items div.why { 
         
        background-image: url(../images/content/banner-why.jpg);
	 
}
#banner .items div.community { 
       
        background-image: url(../images/content/banner-community.jpg);
	 
}

#banner .items div.company { 
         
        background-image: url(../images/content/banner-company.jpg);
	 
}
#banner .items div.buy { 
         
        background-image: url(../images/content/banner-buy.jpg);
	 
}
#banner .items div.multisport { 
         
        background-image: url(../images/content/banner-multisport.jpg);
	 
}
#banner .items div.active { 
         
        background-image: url(../images/content/banner-active.jpg);
	 
}
  
 
/* active item */
#banner .active {
	position:relative;
	cursor:default;
}
/* banner nav */
#banner .navi {
        position:absolute;
        z-index:9999;
	margin-left:900px;
        margin-top:380px;
	width:200px;
	height:20px;
}
 
#banner .navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/content/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}
 
#banner .navi a:hover {
	background-position:0 -8px;      
}
 
#banner .navi a.active {
	background-position:0 -16px;     
}


#shoes {
       
        position:relative;
	overflow:hidden;
	width: 500px;
	height:460px; 
        
	color:#fff;
 	padding:0px;margin:0px;
        margin-left:460px;
        padding-top:50px;
}
#shoes .items {
	/* this cannot be too large */
	 width:20000em;
	
	 position:absolute;
         
          padding:0px;margin:0px;

        
}
 
#shoes .items div{
        
        display:block;
        width: 500px;
	height:460px;
        
  	float:left;
	
}

#instructions-slideshow {
       
        position:relative;
	overflow:hidden;
	width: 320px;
	height:400px; 
        
	color:#fff;
 	padding:0px;margin:0px;
}
#instructions-slideshow .items {
	/* this cannot be too large */
	 width:20000em;
	
	 position:absolute;
         
          padding:0px;margin:0px;

         background-color:#fff;
}
 
#instructions-slideshow .items div{
        
        display:block;
        width: 320px;
	height:400px;
        background-repeat:no-repeat;
  	float:left;
	
}
#instructions-slideshow .navi {
        position:absolute;
        z-index:9999;
	margin-left:190px;
        margin-top:10px;
	width:200px;
	height:20px;
}
 
#instructions-slideshow .navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/content/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}
 
#instructions-slideshow .navi a:hover {
	background-position:0 -8px;      
}
 
#instructions-slideshow .navi a.active {
	background-position:0 -16px;     
}

/**  
================================
REVIEWS
================================ **/
 
/**  
================================
BLOG
================================ **/
#blog{}
#blog h2{font-size:25px;margin-bottom:5px;}
#blog .metadata{line-height:40px;}
 
/**  
================================
WHY LOCK LACES
================================ **/
#why .col{display:block;float:left;width:238px;height:160px;text-align:center;
background-image: url(../images/content/spacer-vert.gif);
	background-repeat: no-repeat;background-position:right;}
#why .col h1{margin:0px;padding:0px;}
#why .col p{display:block; height:80px; padding:10px;}
#why .col .button {margin-top:10px;}

.box{border:solid 1px #ccc;padding:5px;margin-bottom:10px;}
.box.white{background-color:#fff;}
  
/* root element for tabs  */
.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;
	height:40px;
	border-bottom:1px solid #666;

}

/* single tab */
.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
.tabs a { 
	
	font-size:14px;
	display:block;
	height: 40px;  
	line-height:40px;
	width: 111px;
	text-align:center;	
	text-decoration:none;
	color:#000;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

.tabs a:active {outline:none;}

/* when mouse enters the tab move the background image */
.tabs a:hover {
	background-position: -652px -31px;	
	 color:#666;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
.tabs .current, .tabs .current:hover, .tabs li.current a {
	 		
	cursor:default !important; 
	color:#000 !important;
font-weight:bold;
        background-color:#eee;	
        background: url(../images/content/tab-arrow.gif) no-repeat center bottom;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
.tabs .w1 			{ background-position: -519px 0; width:134px; }
.tabs .w1:hover 	{ background-position: -519px -31px; }
.tabs .w1.current { background-position: -519px -62px; }

/* width 2 */
.tabs .w2 			{ background-position: -366px -0px; width:154px; }
.tabs .w2:hover 	{ background-position: -366px -31px; }
.tabs .w2.current { background-position: -366px -62px; }


/* width 3 */
.tabs .w3 			{ background-position: -193px -0px; width:174px; }
.tabs .w3:hover 	{ background-position: -193px -31px; }
.tabs .w3.current { background-position: -193px -62px; }

/* width 4 */
.tabs .w4 			{ background-position: -0px -0px; width:194px; }
.tabs .w4:hover 	{ background-position: -0px -31px; }
.tabs .w4.current { background-position: -0px -62px; }


/* initially all panes are hidden */ 
.panes{margin-top:10px;}
.panes .pane {
	display:none;
        padding:10px;		
}

#apple {
		background-image:url(../images/content/overlay-apple.png);
		color:#fff;
		padding:50px 70px;
		 
	}
div.apple_overlay.black {
		background-image:url(../images/content/transparent.png);		
		color:#fff;
	}
/* the overlayed element */
.apple_overlay {
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(../images/content/overlay-white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;		
	
	/* some padding to layout nested elements nicely  */
	padding:10px;

	/* a little styling */	
	font-size:11px;
}


.apple_overlay.trans {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(../images/content/overlay-white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;		
	
	/* some padding to layout nested elements nicely  */
	padding:10px;

	/* a little styling */	
	font-size:11px;
}

.apple_overlay .img{width:640px;height:500px;display:block;overflow:hidden;}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url(../images/content/overlay-close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}
.ad-gallery {
  width: 710px;
}
.ad-gallery, .ad-gallery * {
  margin: 0;
  padding: 0;
}
  .ad-gallery .ad-image-wrapper {
    width: 100%;
    height: 300px;
    margin-top: 10px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
  }
    .ad-gallery .ad-image-wrapper .ad-loader {
      position: absolute;
      z-index: 10000;
      top: 48%;
      left: 48%;
      border: 1px solid #CCC;
    }
    .ad-gallery .ad-image-wrapper .ad-next {
      position: absolute;
      right: 0;
      top: 0;
      width: 25%;
      height: 100%;
      cursor: pointer;
      display: block;
      z-index: 100;
    }
    .ad-gallery .ad-image-wrapper .ad-prev {
      position: absolute;
      left: 0;
      top: 0;
      width: 25%;
      height: 100%;
      cursor: pointer;
      display: block;
      z-index: 100;
    }
    .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
      /* Or else IE will hide it */
      background: url(../images/content/coffeescripter/non-existing.jpg)\9
    }
      .ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image {
        background: url(../images/content/coffeescripter/ad_prev.png);
        width: 30px;
        height: 30px;
        display: none;
        position: absolute;
        top: 47%;
        left: 0;
        z-index: 101;
      }
      .ad-gallery .ad-image-wrapper .ad-next .ad-next-image {
        background: url(../images/content/coffeescripter/ad_next.png);
        width: 30px;
        height: 30px;
        right: 0;
        left: auto;
      }
    .ad-gallery .ad-image-wrapper .ad-image {
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
      z-index: 9;
    }
      .ad-gallery .ad-image-wrapper .ad-image a img {
        border: 0;
      }
      .ad-gallery .ad-image-wrapper .ad-image .ad-image-description {
        position: absolute;
        bottom: 0px;
        left: 0px;
        padding: 7px;
        text-align: left;
        width: 100%;
        z-index: 2;
        background: url(../images/content/coffeescripter/opa75.png);
        color: #000;
      }
      * html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description {
        background: none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='opa75.png');
      }
        .ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title {
          display: block;
        }
  .ad-gallery .ad-controls {
    height: 10px;
  }
    .ad-gallery .ad-info {
      float: left;
    }
    .ad-gallery .ad-slideshow-controls {
      float: right;
    }
      .ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop {
        padding-left: 5px;
        cursor: pointer;
      }
      .ad-gallery .ad-slideshow-controls .ad-slideshow-countdown {
        padding-left: 5px;
        font-size: 0.9em;
      }
    .ad-gallery .ad-slideshow-running .ad-slideshow-start {
      cursor: default;
      font-style: italic;
    }
  .ad-gallery .ad-nav {
    width: 100%;
    position: relative;
  }
    .ad-gallery .ad-forward, .ad-gallery .ad-back {
      position: absolute;
      top: 0;
      height: 100%;
      z-index: 10;
    }
    /* IE 6 doesn't like height: 100% */
    * html .ad-gallery .ad-forward, .ad-gallery .ad-back {
      height: 100px;
    }
    .ad-gallery .ad-back {
      cursor: pointer;
      left: 20px;
      width: 13px;
      display: block;
      background: url(../images/content/coffeescripter/ad_scroll_back.png) 0px 22px no-repeat;
    }
    .ad-gallery .ad-forward {
      cursor: pointer;
      display: block;
      right: 20px;
      width: 13px;
      background: url(../images/content/coffeescripter/ad_scroll_forward.png) 0px 22px no-repeat;
    }
    .ad-gallery .ad-nav .ad-thumbs {
      overflow: hidden;
      width: 600px;
    }
      .ad-gallery .ad-thumbs .ad-thumb-list {
        float: left;
        width: 9000px;
        list-style: none;
      }
        .ad-gallery .ad-thumbs li {
          float: left;
          padding-right: 5px;
        }
          .ad-gallery .ad-thumbs li a {
            display: block;
          }
            .ad-gallery .ad-thumbs li a img {
              border: 3px solid #CCC;
              display: block;
            }
            .ad-gallery .ad-thumbs li a.ad-active img {
              border: 3px solid #616161;
            }
/* Can't do display none, since Opera won't load the images then */
.ad-preloads {
  position: absolute;
  left: -9000px;
  top: -9000px;
}
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 550px;
	height:100px;
	margin-top:7px;

	/* custom decorations */
	border:1px solid #ccc;
	background:url(/images/content/h300.png) repeat-x;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:550px;
}

/* single scrollable item */
.scrollable img {
	//float:left;
	display:inline-block;
	margin:10px 5px 10px 15px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	//width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {float:left;}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(/images/content/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(/images/content/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}