﻿
/*
 * CUSTOM CABLE CSS
*/
#wizard ol, #wizard li, .clear { margin:0; padding:0; list-style:none; }
#steps li, .product-matrix li{float:left; display:inline; zoom:1;}
#wizard ul.product-matrix
{
    margin:0; padding:5px 0 20px 0;
}

#wirevisual {
	width:880px;
	height:190px;
	background: 0% 50%;
	margin:10px 0;
	padding:0;
	position:relative;
	background-position:right center;

}
#wirevisual #lconnector, #wirevisual #rconnector, .connectorOption, .rconnectorOption {
    margin-top:-7%;
    position:absolute;
    top:50%;
	color:#fff;
}
.compatible{ display:none; }
#wirevisual #lconnector {
	left:0;
}
#wirevisual #rconnector, .rconnectorOption {
	right:-15px;
}

#wizard ::-moz-selection{
   background-color:Transparent;
   color:#000;
}
#wizard ::selection {
   background-color:Transparent;
   color:#000;
}

/* Prod Matrix Styles */ 

.product-matrix li img, #main_container .product-matrix a, .product-matrix li { border:none; outline:0; text-decoration:none; }
#wizard ul.product-matrix li { width:145px; margin:0; /*min-height:195px; _height:195px;*/ border:1px solid #fff; }
 #wizard ul.product-matrix { margin-left:10px; padding-bottom:0 0 20px 0;  }
.product-matrix li a {text-align:center; padding:4px 8px 10px;}

.product-matrix li img{ margin-top:5px; margin-left:8px;}
.product-matrix a { display:block; font-size:11px; line-height:15px; }
.product-matrix li input { float:left; position:relative; left:50%; top:-20px; margin-left:-5px; margin-top:6px; margin-right:5px; }
.product-matrix li {cursor:pointer; margin-bottom:25px;}
/* Next and Prev buttons */
	
.connectorbtn_ready, .step-3_step-2, .add-to-cart, .step-1b_step-1a, .step-3a_step-3, .step-3_step-2, .step-3a_step-3, .step-1a_step-1b, .step-3_step-3a, .step-1a_step-2, .step-1b_step-2, .step-2_step-3, .step-1b_step-2, .step-1a_step-2, .step-2_step-1b{ 
	width:334px; 
	padding: 32px 0 0 0;
	overflow: hidden;
	background: url(../_images/cc_buttons.gif) no-repeat;
	height: 0px !important;
	height /**/:32px;
	display:block;
	margin:10px 0 0;
	cursor:default;
	color:#fff;
	/* Later Sprite */ 
}

.add-to-cart{ /* width:334px; height:32px; float:right; */ background-position:0px -192px; margin-top:5px; color:#fff; }


.step-1b_step-1a, .step-3_step-2, .step-3a_step-3, .step-2_step-1b, .add-to-cart
{
    cursor:pointer;
}
.step-1b_step-1a { 
	  margin-left:4px; float:left; 
	  background-position:0px -160px;
}

.step-3a_step-3 { 
	background-position:0 -160px;  margin-left:4px; float:left; 
}
.step-1a_step-1b, .step-3_step-3a, .step-1a_step-2, .step-1b_step-2, .step-2_step-3, .step-1b_step-2, .step-1a_step-2 { 
	background-position:0px 0px;  margin-right:10px; float:right; clear:right;
}

.step-1a_step-1b{background-position:-335px -32px;}

.step-1b_step-2 { 
	background-position:0px -32px; 
}
.step-1b_step-2{
background-position:-335px -32px;
}

.step-2_step-1b, .step-1b_step-1a { 
	background-position:0px -128px; margin-left:4px; float:left; 
}
.step-2_step-3 { 
	background-position:-335px -64px; float:right; 
}

.step-3_step-2 {
	background-position:0 -96px;  margin-left:4px; float:left; 
}
.step-3_step-3a
{
    background-position:0 0;
}

/* Button READY STATES */
.step-1a_step-1b.connectorbtn_ready, .step-3_step-3a.connectorbtn_ready
{
    background-position:-306px 0px;
}





.group_cntrW{
	width:100%;
}

 


/* Flexible boxes */
/* Structure */
.box {
	background:url(../_images/rc_botleft.gif) no-repeat bottom left;
	width:900px; 
	margin:10px 0;
	clear:both;
}
.box div
{
    margin:0; border:0;
}
.box-outer{
	background:url(../_images/rc_botright.gif) no-repeat bottom right;
	position:relative;
	top:-1px;
}
.box-inner{
	background:url(../_images/rc_topleft_flat.gif) no-repeat top left;
	z-index:200;
}

 /* Heading and content styles */
.box h2, .box p {
/*	padding:0 12px;*/
 }
 .box h1, .box h2, .box h3, .box h4 {
 	background:url(../_images/rc_topright.gif) no-repeat top right;
	height:33px;
 }
 .box h1, .box h2, .box h3, .box h4, .box-nav li a { /* Use h1-h4 tags to make headings within the div.box  */
	font:14px Verdana, Arial, Helvetica, sans-serif;
	color:#676767;
	font-weight:bold;
	line-height:35px;
	letter-spacing:-0.5px;
	_letter-spacing:-1px;

} 



ul.box-nav {
	height:38px;
	padding:0;
	margin:0;
	background:url(../_images/rc_topright2.gif) no-repeat top right;
}
.box-nav li, .box .box-nav li a {
	height:36px;
}


.box .box-nav li {
	float:left;
	display:inline;
	width:250px;
	margin-right:10px;
	background:url(../_images/connector_subn.gif) no-repeat top left;
}
.box .box-nav li.fleft {
	background:url(../_images/connector_subnfleftw.gif) no-repeat top left;
}


.box .box-nav li a {
	display:block;
	width:240px;
	margin-left:10px;
	background:url(../_images/connector_subn_right.gif) no-repeat top right;
}

.box .box-nav li.fleft a {
	background:url(../_images/connector_subnrightw.gif) no-repeat top right;
}

/* Whats this nav box */ 
#wizard .box .box-nav li.disclaimerlink, body .box-nav li.disclaimerlink a{	
    background:none;
        min-width:0;
    width:105px!important;
    display:block;
}

#wizard .box .box-nav li.disclaimerlink
{
    background: transparent url(../_images/icon_whatsthis.gif) no-repeat right center;
    
}


.box .box-nav li.disclaimerlink a {
	font-weight:normal;
	font-size:12px;
	margin-left:10px;
}

.box-inner.heading {
	background: transparent url(../_images/blank.jpg) no-repeat top left;
}
.box-inner.heading h2 {
	padding-left:10px;
	margin-bottom:15px;
}

#wizard .box .box-nav li.fleft.current a, #wizard .box .box-nav li.fleft.current a:hover, #wizard .box .box-nav li.current a, #wizard .box .box-nav li.current a:hover{
	text-decoration:none;
	cursor:default;	
}
 

	body #wizard {font-size: 62.5%; font-family:verdana,helvetica,arial; }
	#wizard fieldset{ border:0; margin:20px 10px 10px 10px;}	
	#wizard label{font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
	#wizard select{margin-right: 1em; float: left; display:inline;}
	.ui-slider{clear: both; top: 2.5em;}
	#inchBox{ position:relative; top:-56px; left:100px;}
	#inchBox fieldset { margin-top:0; padding-top:0; }
	#inches{ }
		
#wizard label{
    display:block;
    float:left;
    display:inline;
    font-size:1.1em;
    font-weight:normal;
    line-height:22px;
    margin-right:0.5em;
    text-align:right;
    width:auto;
    padding-right:5px;
}



div.total-price{
   /* clear:right;
    */float:right;
    margin-right:12px;
    font-size:12px;
    background:#fff;
    text-align:right;
    width:334px;
}
div.total-price label{
	font-weight:bold;
	line-height:30px;
	width:90px;
}
div.total-price span.price {
	display:block;
}
div.total-price .BasketProductQty {
	width:30px;	
}
div.total-price img, div.total-price .BasketProductQty {
	margin-top:5px;	
}
#wizard ul.product-matrix li.liClear {
 width: 850px; line-height: 0px; float: none; position:relative; clear: both; font-size: 0pt; height: 0px; border:0px; display:block;
}
#wizard{
    min-height:100px;
}
.thumbImg{
	height:100px;	
}
#step-1b-options-box .thumbImg, step-3a-options-box .thumbImg {
    height:125px;
}
#wizard .selected {
    border-color:#A70604;
}
#main_container .product-matrix li.selected a {
	text-decoration:underline;
}
#easyTooltip{
	padding:5px;
	border:1px solid #ccc;
	background:#FFF;
	text-align:left;
	max-width:400px;
	font-size:12px;
}


#loader
{
   position:relative; left:50%; margin:0px 0 40px -110px; width:220px; text-align:center; top:15px;
}
#loader img{ margin:5px 0; }


/* Steps indicator */ 

#steps li {	width:267px; height:23px; margin-right:30px; text-indent:35px; line-height:22px; background-image:url(../_images/sp_steps.gif); margin-bottom:0px; background-repeat:no-repeat; font-size:15px; font-weight:bold; }
#steps li a, #steps li#current a:hover { text-decoration:none; cursor:default; }
#steps li a:hover { text-decoration:none; cursor:default; }
ol#steps { margin:0 0 0 0; height:27px; padding-bottom:0; cursor:default; }
#steps .last {margin-right:0;}

.clear {clear:both;}

#steps .step-1{ background-position:0px -84px; }
#steps .step-2{ background-position:0px -112px; }
#steps .step-3{ background-position:0px -140px; margin-right:0; }
#steps #current.step-1{ background-position:0px 0px; }
#steps #current.step-2{ background-position:0px -28px; }
#steps #current.step-3{ background-position:0px -56px; margin-right:0; }

.step_loading
{
 display:block;
 width:220px;
 position:relative;
 left:50%;
 margin-left:-110px;
 top:-10px;
 margin-top:-10px;   
}
.step_loading p
{
    text-align:center;
    font-size:12px;
}
.step_loading img
{
 clear:both;
}

#feet_slider, #inches_slider
{
}
#feet_slider div div 
{
    
    background-color:#FFFFFF;

font-size:11px;
font-weight:normal;
margin-left:-7px;
margin-top:-20px;
    
     }
 .length_box, #inches_slider, #feet_slider{
    margin:0; padding:0;
    height:20px;
 }
 #feet_slider{ height:0;
               
               background:transparent url(../_images/ui-slider-bg-x.gif) repeat-x scroll 0 66%
               
                }
 .length_box{
    width:80px;
    padding-left:25px;
    float:left;
    display:inline;

 }

.length_box span {
  font-size:11px
}
#totalinches_field, #inches_field, #feet_field { font-size:11px }

.length_box input{
    width:60px;
    
 }

#feet_slider{
    left:23px;
    top:39px;
    width:840px;
    height:18px;
    
 }

#step-2-length-box .box-inner 
{
    height:180px;    
}
 
 /* UI Spinner */


#wizard label {
	float: left;
	margin-right: .5em;
	padding: .15em 0;
	font-weight: bold;
}

.ui-spinner {
	width: 70px;
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid #999;
	background: #FEFEFE url(../images/spinner-bg.gif) repeat-x left bottom;
	padding: 0 5px 0 0;
	height:20px;
}

.ui-spinner-disabled {
	background: #F4F4F4;
	color: #CCC;
}

.ui-spinner-box {
	width: 90%;
	height: 100%;
	float: left;
	font-size: 125%;
	border: none;
	background: none;
	padding: 0;
}

.ui-spinner-up,
.ui-spinner-down {
	width: 10%;
	height: 50%;
	font-size: 0.5em;
	padding: 0;
	margin: 0;
	z-index: 100;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	right: 0;
	cursor: default;
	border: 1px solid #999;
	border-right: none;
	border-top: none;
}

.ui-spinner-down {
	bottom: 0;
	border-bottom: 0;
}

.ui-spinner-pressed {
	background: #FEFEFE;
}

.ui-spinner-list,
.ui-spinner-listitem {
	margin: 0;
	padding: 0;
}
.ui-spinner-feet_field
{
    width:70px;
}
.ui-spinner-up, .ui-spinner-down
{
    height:20px;
    right:0;
    top:0;
    width:21px;
    border:none;
    

}
.ui-spinner-totalinches_field, .ui-spinner-inches_field,.ui-spinner-feet_field
{
    background:url(../_images/ui-spinner-button.jpg) no-repeat left top;
}

#totalinches_field
{
  
}
.ui-spinner-down
{
      left:0;
}

.length_box input {
    width:31px;
    margin-left:20px;
    height:14px;
}


.ui-widget-content .ui-state-default .ui-spinner-button{
	background:transparent url(../_images/ui-spinner-button.jpg) no-repeat scroll left top;
}
#step-3a-options-box .thumbImg, #step-1b-options-box .thumbImg {
	height:114px;
}

