html {overflow-y: scroll;} /* hack to force scroll bar */
body {background-repeat: repeat-y}
*{margin:0; padding:0; font-family:Arial; font-size:12px; color:black;}
a{text-decoration:none;}
img{border:none;}
br.clear{clear:both;} /* fix ie float */

#page{margin:0 auto; width:962px; padding:0 0 0 30px; }

	#header{position:relative; float:left; width:100%; background:white; z-index:1;}
		#logo{float:left; margin:10px 0; width:256px; height:77px; background:url(../img/skin2.gif) 0px -1px;}
		
		#hello {float:right; margin:10px 20px 0 0; text-align:right;font-size:11px !important;}
		#hello *{font-size:11px !important;}
		#hello a{color:#ff6699; text-decoration:underline;}

		#metanav{float:right; margin-right:-6px;}
		#metanav a{float:left; margin-right:6px; height:28px; background:#959595; cursor:pointer;}
		#metanav a span{float:left; padding:8px 15px 0px 15px; text-transform:uppercase; font-size:11px; color:white;}
		#metanav a.hover{height:32px;}	
		#metanav a.active{height:33px;}
		#metanav a.cart{margin-left:41px; padding:0; width:46px; background:url(../img/skin2.gif) no-repeat -250px -150px}
		#metanav a.cart span{padding:0 0 0 18px; color:white;}
		
		#panels{position:absolute; right:0; top:33px;}
		#panels .panel{display:none; position:absolute; right:93px; top:0px; padding:10px 10px 7px 10px; max-width:500px; background:#959595;} 
		#panels .panel *{float:left;}
		#panels .panel p{margin-right:10px;}
		#panels .panel p.welcome a{float:none; text-decoration:underline;}
		#panels .panel p.forgot{ padding-top:2px; margin: 0; width:200px;}
		#panels .panel p.forgot a{float:none; text-decoration:underline; color:#fff;}
		#panels .panel input{border:1px solid #ddd; margin:0 4px 3px 0; width: 210px;}
		#panels .panel input.password{border:1px solid #ddd; margin-right:1px; width: 114px;}
		#panels .panel input.submit{width:95px; margin-right:0; border:none; padding:1px 4px 0 4px; text-transform:uppercase; font-size:11px; color:white; background:#ff6699;cursor:pointer;}
		#panels .panel.cart{right:0px; min-width:100px !important; width:200px;}
		#panels .panel.cart *{float:none;}		
		#panels .panel.cart table{width:200px; margin:0 0 5px 0; border-collapse:collapse;}
		#panels .panel.cart table td{padding:2px 0;}
		#panels .panel.cart table td.label{color:#fff; font-weight:bold; padding-right:5px;}
		#panels .panel.cart table td.currency{font-weight:bold; padding-right:5px;}
		
		#panels .panel.cart table td.price{text-align:right;padding-left:3px;}
		#panels .panel.cart table tr.total td{border:1px solid white; border-left:none; border-right:none; font-weight:bold;}
		#panels .panel.cart p.tax{float:left; font-size:10px; width:200px; margin: 0 0 10px 0;}		
		#panels .panel.cart .checkout{float:right;}
		#panels .panel.cart .cart{float:left;}
		#panels .panel.cart .miniButton{border:solid 1px #959595;}
		#panels .currencies *{float:none;}
		
		#panels .fb_login_not_logged_in {
		}
		#panels .facebook-holder{
			margin-top:20px;
			text-align:center;
		}
		#panels .facebook-holder span{width:100%;text-transform:uppercase; color:#fff; font-weight:bold; margin:0 0 5px 0;}
		#panels .facebook{
			background-color: #FFF;
		}
		
		#mainnav{clear:left; float:left; list-style:none;}
		#mainnav li{float:left;}
		#mainnav li a{float:left; padding:2px 18px 1px 5px; font-weight:bold; text-transform:uppercase; background:white url(../img/arrows.gif) no-repeat bottom right;}
		#mainnav li a:hover,
		#mainnav li.active a{color:white; background-color:black; background:black url(../img/arrows.gif) no-repeat top right;}

		#secnav{float:right; list-style:none;}
		#secnav li{float:left; padding:1px 2px;}
		#secnav li a:hover{text-decoration:underline;}
		#secnav li.active a{font-weight:bold;}
		
	#content{float:left; margin-top:15px; width:100%; z-index:0; }/*min-height:300px; Caused problems with cluetip*/ 	
		
	#footer{float:left; padding:5px 0 10px 0; list-style:none;}
	#footer li{float:left; margin-right:30px;}

	#footer li.active a{color:#000;}
	#footer li.active li a{color:#8a8a8a;}
	#footer li a.active{color:#000;}

	#footer a{text-transform:uppercase; color:#8a8a8a;}
	#footer a:hover{color:black;}
	#footer li ul{list-style:none;}
	#footer li li{clear:left; margin-right:0;}
	#footer li li.active{margin:3px 0 3px;}
	#footer li li a{text-transform:none;}
	
	#predesignedMenu{margin-top:20px;}
	#predesignedMenu a{text-transform:uppercase !important;}

	.productBox{clear:left;	width:710px;}
	.productBox img{float:left;	margin:0 10px 60px 0;}
	
/* global elements, as used on multiple pages */	

.message{float:left; margin-bottom:15px; width:100%; padding:5px 0;}
.message *{color:white !important; margin:0px !important;}
/* This seems a bit clumbsy. Take a look and try to shorten */
.message p{padding:0 5px; font-size:13px; font-weight:bold; color:white !important;}
.message li{ list-style:none; padding:0 5px; font-size:13px; font-weight:bold;}
.message strong{ text-transform:uppercase; }
.message a{color:white !important;}
.message.msg_info{background:#33cccc;}
.message.msg_error{background:#ff6699;}
.js .msg_error, .js .msg_info{display:none;}
.message.msg_warning{background:#fff; width:330px;}
.message.msg_warning p{color:#999 !important;}

#plainContent{ padding-bottom:15px; }

h1 *,h1{margin-bottom:22px; font-weight:bold; font-size:16px !important; text-transform:uppercase;}
h2{margin-bottom:12px; padding-bottom:4px; font-size:14px; text-transform:uppercase; border-bottom:dotted 1px black; } /* scw removed overflow:hidden;*/
h2 *{ font-size:14px; }	
.dottedline{float:left; margin:5px 0; width:100%; height:1px; overflow:hidden; background:url(../img/skin2.gif); }
#content a{color:#2BB; text-decoration:underline;}
#content a b{color:#2BB;}

/* CI colors */
.ciBgColor1{background-color:#33cccc !important;}
.ciBgColor2{background-color:#cc9966 !important;}	
.ciBgColor3{background-color:#ff6699 !important;}		
	
/* product list */
.products{width:686px;}

.product{position:relative; float:left; margin:0 14px 15px 0; width:148px; height:164px; text-decoration:none !important; cursor:pointer;}
.product img{position:absolute; top:16px; width:148px; height:148px;}
.product .hoverBg{display:none; position:absolute; top:16px; width:148px; height:148px; background:#33cccc; opacity:0.7; filter:alpha(opacity=70);}
.product .txt{position:absolute;}
.product .txt .title{display:block; width:148px; height:13px; overflow:hidden; padding-bottom:3px; overflow:hidden; font-weight:bold; text-transform:uppercase; background:white url(../img/skin2.gif) repeat-x left bottom;}
.product .txt .title span{display:block; position:absolute; height:14px; overflow:hidden;} /* ie bug (auto-expanding height) requires this additional span */
.product .txt .desc{display:none; padding:3px 3px; font-weight:bold; color:white;}
.product .action{position:absolute; right:0px; top:135px; height:16px; padding:0 5px; display:block; font-weight:bold; text-transform:uppercase; color:white; background:#ff6699;}
.product .action span{position:relative; top:-2px; color:white;}

.product:hover{background:white;} /* !ie6 hover bug */
.product:hover .txt .title{height:auto;}
.product:hover .txt .title span{position:static; height:auto;}
.product:hover .txt .desc{display:block;}
.product:hover .hoverBg{display:block;}

#focalPoint{border:dotted 1px #000; padding:0 5px 0 0; height:340px; margin:0 0 20px 0;}
#focalPoint #videoHolder{float:left; margin:0 10px 0 0;}
#focalPoint h2{clear:none !important; margin-top:5px;}
#focalPoint .callToAction{font-weight:bold; margin:0 0 10px 450px;}
#focalPoint .description{margin:0 0 0 450px;}

/* simple hiding */
.hidden{display:none;}

/* moved from login.css */

.formBox{float:left; width:380px; background:#ddd; margin:0 10px 25px 0;}
.formBox .content{padding:10px;}
.formBox .submit{width:100%; padding-top:10px; height:30px;}

.formBox h2{padding:5px 0;}
.formBox h2 span{padding:0 5px; color:white;}
.formBox #errors{width:100%; margin-bottom:15px; background:#ffcccc;}
.formBox #errors .box{padding:10px;}
.formBox #errors .box p{font-weight:bold; padding-bottom:3px;}
.formBox #errors .box li{margin-left:12px;}

.formBox table{width:100%; margin-bottom:10px;}
.formBox table td{vertical-align:top;}
.formBox .label{width:120px; padding:2px 5px 2px 0; text-align:right; width:100%;}
.formBox table.form_fullWidth{width:100%;}
.formBox em{color:red; position:absolute;}

.submit input{border:none; padding:4px; font-size:14px; font-weight:bold; text-transform:uppercase; color:white; cursor:pointer;}

.data .label{white-space:nowrap;}

.error input,
.error select{background:#ffcccc;}
.error label, .error label *{font-weight:bold; color:#ff6699;}
.error label{padding:4px;}

#formBox .subnote{float:left; width:100%; padding-top:15px;}
form .error{border:dotted 1px red;}
form label.error { position:absolute; clear:both; background-color:#fff; margin-left:5px; float: none; color: red; padding-left: .5em; vertical-align: top; }


/* SCW: So I can put an action button anywhere */
.button{border:none; float:left; margin-bottom: 5px; padding:4px; font-size:14px; font-weight:bold; text-transform:uppercase; text-decoration:none !important; color:white !important; cursor:pointer;}
.miniButton{border:none; padding:2px 10px; margin-left:0px; font-size:11px; text-transform:uppercase; text-decoration:none !important; color:white !important; cursor:pointer;}

.break{clear:both}
.newsletter{width:300px;}
.newsletter #email {margin-bottom:5px;}
.newsletter .message {display:none; margin-top:3px;}
.news{margin-bottom: 10px;}
.loading{height:16px; width:16px; background:url(../img/spinner.gif); background-repeat:no-repeat; padding-left:16px;}
.grey{background:url(../img/spinner-grey.gif);}
.panel .currencies{ width:100%; float:right; color: white; font-weight: bold;}
#panels .panel .currencies *{float:right;}

.note{font-style:italic;}/* used to display the notes added to order status in order.gsp*/

/* no space between <p>s*/
#content p{margin-bottom: 10px;}
.desc p{margin-bottom: 0px;}
/*#content li{margin:25px;}*/
#content ul, #content ol{margin: 0 0 0 20px;}

#newsletterDropDown{display:none;max-width:300px;float:right;position:absolute; top:125px; left:750px;}


/* Make disabled option more obvoius */
option[disabled]{color:#ddd;}

/* feedback panel */
#feedback{position:absolute; left:-222px; top:278px; z-index:100;display:none;}
#feedback .panel{position:relative; float:left; width:200px; min-height:150px; padding:10px; padding-bottom:60px; background:#ddd; border: solid 1px #ff6699;}
#feedback .panel .input{}
#feedback .panel .input p.title{font-weight:bold; padding-bottom:2px; font-size:14px;}
#feedback .panel .input p.desc{padding-bottom:10px;}
#feedback .panel .input .email{padding-top:8px;}
#feedback .panel .input .email p{padding-bottom:2px;}
#feedback .panel .input textarea{width:190px; height:55px; font-size:11px;}
#feedback .panel .input input{width:190px;}
#feedback .panel .input .button{position:absolute; right:10px; bottom:10px;}
#feedback .panel .thanks {display:none; }
#feedback .thanks p{text-align:center; font-weight:bold; font-size:18px !important; color:#fff;}
#feedback .flap{float:left; background:yellow; width:20px; font-size:14px; text-transform:uppercase; font-weight:bold; text-align:center; cursor:pointer;
background:url(../img/skin2.gif) no-repeat -271px -212px;
height:90px;

}
#feedback .flap:hover{padding-left:2px;background-position: -269px -212px;}/* move out 2px*/

/* HOME */
.step{}
.step p{font-size:11px; margin: 0 0 0 56px !important;}
.step .title{padding:17px 0 5px 0; font-size:14px; font-weight:bold;}
.step img{float:left;}

.step_1{background:url(../img/skin2.gif) no-repeat 0px -78px;} .step_1 .title{color:#000;}
.step_2{background:url(../img/skin2.gif) no-repeat 0px -175px;} .step_2 .title{color:#000;}
.step_3{background:url(../img/skin2.gif) no-repeat 0px -315px;} .step_3 .title{color:#000;}

div.extra-content{ margin: 30px 0 0 0;}
.right-of-sitemap{float:right;}


/* START MY */

.myProduct{float:left; width:100%; margin-bottom:10px; padding-bottom:10px; border-bottom:dotted 1px #000;}
.myProduct  h3{padding-bottom:4px; text-transform:uppercase;}
.myProduct  h3 span{font-size:10px; text-transform:none; color:#8a8a8a;}

#col_left{clear:both;}
.col_left{float:left;}
.myProduct .col_left img{float:left;}
.myProduct .col_left .options{float:left; padding:75px 0 0 10px;}
.myProduct .col_left .options a{padding-bottom:4px; font-size:14px; font-weight:bold;}
.myProduct .col_left .options a:hover{text-decoration:underline;}
.myProduct .col_left .options .edit{clear:left; float:left; text-transform:uppercase;}
.myProduct .col_left .options .send{clear:left; float:left; text-transform:uppercase;}
.myProduct .col_left .options .delete{clear:left; float:left; text-transform:uppercase;}

.myProduct .col_right{float:right; width:140px;}
.myProduct .col_right .rateLine{float:left; width:100%; padding-bottom:2px;}
.myProduct .col_right .rateLine2{padding-bottom:12px;}
.myProduct .col_right .rateLine p{float:left; font-size:9px; text-transform:uppercase;}
.myProduct .col_right .rateLine .rating{float:right; width:60px; height:11px; background:url(../img/rating.png);}
.myProduct .col_right .rateLine .rate_0{background-position:0 0;}
.myProduct .col_right .rateLine .rate_1{background-position:0 -11px;}
.myProduct .col_right .rateLine .rate_2{background-position:0 -22px;}
.myProduct .col_right .rateLine .rate_3{background-position:0 -33px;}
.myProduct .col_right .rateLine .rate_4{background-position:0 -44px;}
.myProduct .col_right .rateLine .rate_5{background-position:0 -55px;}
.myProduct .col_right .rateLine .rate_6{background-position:0 -66px;}
.myProduct .col_right .prize{float:left; margin-top:10px; width:100%; font-size:15px; font-weight:bold;}
.myProduct .col_right .comment{float:left; width:100%; font-size:10px;}
.myProduct .col_right .addToCart{margin-top:10px; padding:4px; font-size:14px; font-weight:bold; text-transform:uppercase; text-decoration:none !important; color:white !important;}
.myProduct .button{float:right;}

.list tr{border-bottom:solid 2px white;}
.list td{padding: 5px;}
/* END MY */

/* COMMENTS */
textarea#commentBody{
	width:480px;
	height:150px;
}
.commentBody{padding:10px 0;}
.commentDetails{color:#8a8a8a;}
.comment{background:url(../img/skin2.gif);background-position:bottom; background-repeat: repeat-x; margin:5px 0 5px 0; padding:5px 0;}
#addCommentContainer #Post{border:none; margin:0 0 5px 432px; padding:4px; font-size:14px; font-weight:bold; text-transform:uppercase; text-decoration:none !important; color:white !important; cursor:pointer; background-color:#ff6699 !important;}
#addCommentContainer a{text-decoration:none;}
.comment-count{}

#questionnaire{
	width:760px;
	border:dotted 1px #ff6699;
	padding:10px;
	margin:50px 0 0 0;
}
/*Newsticker*/
ul#listticker{height:50px; overflow:"show";}
ul#listticker li {
	display:none;
	padding: 5px;
	margin-bottom:10px;
	list-style:none;
}
#listticker blockquote{
	color:#3cc !important;
}

.facebook-share a{float:right; background:url(../img/icons/facebook.png) no-repeat; padding-left: 17px; margin-bottom:10px;}
#tool{display:none;}


.jTip{display:inline !important;}
/* START CLUE-TIP */

		/* global */
		#cluetip-close img {  border: 0; }
		#cluetip-title {  overflow: hidden; }
		#cluetip-title #cluetip-close {  float: right;  position: relative; }
		#cluetip-waitimage {  width: 16px;  height: 16px;  position: absolute;  background: url(../img/spinner.gif) no-repeat;}
		.cluetip-arrows {  display: none;  position: absolute;  top: 0;  left: -11px;  height: 22px;  width: 11px;  background-repeat: no-repeat;  background-position: 0 0;}
		#cluetip-extra {  display: none;}

		/***************************************
		   =cluetipClass: 'jtip'
		-------------------------------------- */
		.cluetip-jtip {  background-color: transparent;}
		.cluetip-jtip #cluetip-outer {  border: 2px solid #959595;  position: relative;  background-color: #fff;}
		.cluetip-jtip h3#cluetip-title {  margin: 0 0 5px;  padding: 2px 5px;  font-size: 14px;  font-weight: bold;  background-color: #959595;  color: #FFF;}
		.cluetip-jtip #cluetip-inner {  padding: 0 5px 5px;  display: inline-block;}
		.cluetip-jtip div#cluetip-close {   text-align: right;  margin: 0 5px 5px;  color: #900;}

		/* jtip arrows */
		.clue-right-jtip .cluetip-arrows {  background-image: url(../img/jTip/arrowleft.gif);}
		.clue-left-jtip .cluetip-arrows {  background-image: url(../img/jTip/arrowright.gif);  left: 100%;  margin-right: -11px;}
		.clue-top-jtip .cluetip-arrows {  background-image: url(../img/jTip/arrowdown.gif);  top: 100%;  left: 50%;  margin-left: -11px;  height: 11px;  width: 22px;}  
		.clue-bottom-jtip .cluetip-arrows {  background-image: url(../img/jTip/arrowup.gif);  top: -11px;  left: 50%;  margin-left: -11px;  height: 11px;  width: 22px;}

/* END CLUE-TIP */

/* START jZoom */
.jqzoom{ float:left; position:relative; padding:0px; cursor:pointer; }
.jqzoom img{ float:left; background-color: #FFFFFF; background-image: url(../img/spinner.gif); background-repeat: no-repeat; background-position: center center; }
div.zoomdiv { z-index: 100; position: absolute; top:0px; left:0px; width: 200px; height: 200px; background: #ffffff; border:1px solid #ddd; display:none; text-align: center; overflow: hidden; }
div.jqZoomPup { z-index: 10; visibility: hidden; position: absolute; top:0px; left:0px; width: 50px; height: 50px; border: 1px solid #aaa; background: #ffffff; opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; filter: alpha(Opacity=50);}
/* END jZoom */

/* START Thickbox */
#TB_overlay {
  position: fixed;
  z-index:100;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}
.TB_overlayMacFFBGHack {background: url(../img/macFFBgHack.png) repeat;}
.TB_overlayBG {
  background-color:#000;
  filter:alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
  position: fixed;
  background: #ffffff;
  z-index: 102;
  color:#000000;
  display:none;
  border: 4px solid #525252;
  text-align:left;
  top:50%;
  left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
  display:block;
  margin: 15px 0 0 15px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
}
#TB_caption{
  height:25px;
  padding:7px 30px 10px 25px;
  float:left;
}
#TB_closeWindow{
  height:25px;
  padding:11px 25px 10px 0;
  float:right;
}
#TB_closeAjaxWindow{
  padding:7px 10px 5px 0;
  margin-bottom:1px;
  text-align:right;
  float:right;
}
#TB_ajaxWindowTitle{
  float:left;
  padding:7px 0 5px 10px;
  margin-bottom:1px;
}
#TB_title{
  background-color:#e8e8e8;
  height:27px;
}
#TB_ajaxContent{
  clear:both;
  padding:2px 15px 15px 15px;
  overflow:auto;
  text-align:left;
  line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
  padding:15px;
}
#TB_ajaxContent p{
  padding:5px 0px 5px 0px;
}
#TB_load{
  position: fixed;
  display:none;
  height:13px;
  width:208px;
  z-index:103;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
  z-index:99;
  position:fixed;
  top: 0;
  left: 0;
  background-color:#fff;
  border:none;
  filter:alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  height:100%;
  width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
  clear:both;
  border:none;
  margin-bottom:-1px;
  margin-top:1px;
  _margin-bottom:1px;
}/* END Thickbox */
 
 
/* START ROUND CORNERS*/
#metanav a{
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
}
#metanav a:hover, #metanav a.active{
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
}

#panels .panel {
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
}
.button{-webkit-border-radius:5px;-moz-border-radius:5px;}
.miniButton, input{-webkit-border-radius:3px;-moz-border-radius:3px;}

.product .action{
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-bottomleft:5px;
} 
#feedback .flap{
	-webkit-border-top-right-radius:3px;
	-webkit-border-bottom-right-radius:3px;
	-moz-border-radius-topright:5px;
	-moz-border-radius-bottomright:5px;
}
textarea{-webkit-border-radius:5px;-moz-border-radius:5px;}

/* END ROUND CORNERS*/