/*
 *	modal windows style sheet for healthwarehouse
 *	contains some resets etc...
 * 	8/9/2009 werner glinka
 * 
 *	color codes
 *	color green: #5b984f;
 * 	color blue: #1b6498
 * 	color dark green ??? #423b39
 */

/********************* general selectors ********************/

body.no-margin{
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
}
img{
border:0;
}
fieldset{
border:0;margin:0;padding:0;
}
a{
color:#1b6498;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
/* prefered clearing method for div that contains floats.e.g. add class clear to a containing element */
.clear{
overflow:hidden;
width: 100%;
}
/* no dotted lines around selected images */
:focus{
outline: 0;
}

/***************** product filter modal window *******************/

/************************* construct background ******************/
	
div#modal-window-bg,
div#modal-window-top-bg,
div#modal-window-bottom-bg{
	width:605px;
	margin:0;
	padding:0;
}
div#modal-window-bg{
	background: transparent url(../images/backgrounds/modal-middle.png) repeat-y;
}
div#modal-window-top-bg{
	background: transparent url(../images/backgrounds/modal-top.png) left top no-repeat;
}
div#modal-window-bottom-bg{
	background: transparent url(../images/backgrounds/modal-bottom.png) left bottom no-repeat;
}
/********************* window header ********************/	
div#window-header{
	width:542px;
	margin:25px 0 0 20px;
	}
div#modal-window-top-bg div#window-header h3{
	float:left;
	margin:0;
}

div#modal-window-top-bg div#window-header p{
	margin:0;
	padding:0;
}
div#modal-window-top-bg div#window-header p a#close{
	float:right;
	display:block;
	width:19px;
	height:22px;
	background:transparent url(../images/buttons/button-x.png) 0 0 no-repeat;
	font-size:14px;
	font-weight:bold;
	color:#1b6498;
	text-decoration:none;
	padding:6px 0 0 9px;
}
div#modal-window-top-bg div#window-header p a:hover#close{
	color:red;
	}

/********************* tabs structure ********************/	
div#modal-window-top-bg div.tabs,
div#modal-window-top-bg div.tabs-content{
	width:597px;
	margin:0 auto;
}

/******************** sliding door tabs ********************/
div#modal-window-top-bg div#tabsContainer div.tabs-head{
	width:709px;
	height:50px;
	float:left;
	padding-left:15px;
    background:url(../images/buttons/tab-bg50.png) repeat-x;
	font-size:14px;
    line-height:26px;   /* takes into account padding */
	}

div#modal-window-top-bg div#tabsContainer div.tabs-head ul {
    margin:0 0 0 0;
    padding:15px 0 0 10px;
    list-style:none;
    }
div#modal-window-top-bg div#tabsContainer div.tabs-head li {
    display:inline;
    margin:0; 
    padding:0;
    }
div#modal-window-top-bg div#tabsContainer div.tabs-head a {
	float:left;

	margin: 0 0 0 -4px;        /* margin allows for transparent corner background */
	background:url(../images/buttons/tab-off-left.png) no-repeat left top;
	color:#ffffff;
	text-decoration:none;
	padding:0 0 0 4px;
    } 
div#tabsContainer div.tabs-head a span{
	display:block;
	background:url(../images/buttons/tab-off-right.png) no-repeat right top;
	padding:5px 15px 4px 6px;
	margin-right:8px;
	}	
div#modal-window-top-bg div#tabsContainer div.tabs-head li.current a{
	background-position: 0 -36px;
}
div#modal-window-top-bg div#tabsContainer div.tabs-head li.current a span{
	background-position: 100% -36px;
	color:#000000;
}
div#modal-window-top-bg div#tabsContainer div.tabs-head a:hover{
	background-position: 0 -36px;
}
div#modal-window-top-bg div#tabsContainer div.tabs-head a:hover span{
	background-position: 100% -36px;
	color:#000000;
}
	
/********************* content containers ********************/	
div#modal-window-top-bg div.tabs-content div#productBrandTab,
div#modal-window-top-bg div.tabs-content div#productCategoriesTab,
div#modal-window-top-bg div.tabs-content div#priceRatingTab{
	padding:15px 0;
	}
div#modal-window-top-bg div.tabs-content div#productBrand,
div#modal-window-top-bg div.tabs-content div#productCategories,
div#modal-window-top-bg div.tabs-content div#priceRating{
	width:597px;
	height:100px;
	}	
div#modal-window-top-bg div.tabs-content div#productBrand div.header,
div#modal-window-top-bg div.tabs-content div#productBrand div.content{
	}	
div#modal-window-top-bg div.tabs-content div#productCategories div.header,
div#modal-window-top-bg div.tabs-content div#productCategories div.content{
	margin: 0 0 0 20px;
	}
div#modal-window-top-bg div.tabs-content div#priceRating div.header,
div#modal-window-top-bg div.tabs-content div#priceRating div.content{
	}

div#modal-window-top-bg form#update-product-filters{
	width:597px;
	margin:0 auto;
	padding:0;
	}	
table.options{
	margin-left:50px;
}
table.options-header{
	margin-left:25px;
}
form#update-product-filters tr.heading td.labelfield{
	font-size:14px;
	color:#5b984f;
	}
td.arrow{
	margin:0;
	padding:0;
	width:12px;	
}
form#update-product-filters input.category-header{
	margin:0 0 0 10px;
}
form#update-product-filters td.labelfield{
	font-size:14px;
	color:#423b39;
}
form#update-product-filters input{
	margin-left:30px;
}	
a.up-down{
	float:left;
	display:block;
	width:12px;
	height:12px;
	margin:2px 0 0 0;
	background:transparent url(../images/backgrounds/arrow-up.png)	
	}
a.up-down:hover{
	background-position: 0 -12px;
	}
a.down-up{
	float:left;
	display:block;
	width:12px;
	height:12px;
	margin:2px 0 0 0;
	background:transparent url(../images/backgrounds/arrow-down.png)	
	}
a.down-up:hover{
	background-position: 0 -12px;
	}

div#done-with-filters{
	margin-bottom:20px;
	padding-top:20px;
	border-top:1px solid #cccccc;
}
div#done-with-filters input,
div#done-with-filters a{
	float:right;
}
div#done-with-filters input{
	margin-right:20px;
}

/***************** cancel and add-tags buttons *******************/
a.cancel-change{
	display:block;
	float:left;
	height: 29px;
	background: transparent url(../images/buttons/button-cancel.png) no-repeat;
	font-size: 14px;
	font-weight:bold;
	width: 93px;
	line-height:29px;
	text-align:center;

	text-decoration:none;
	}
a:hover.cancel-change{
	background-position: 0 -29px;
	text-decoration:none;
	color:#ff0000;
}

#submit-product-filter{
	float:left;
	height:29px;
	width:93px;
	font-size:12px;
	color:#ffffff;
	font-weight:bold;
	background: transparent url(../images/buttons/button-green.png) no-repeat;
	border:none;
	margin-left:20px;
	}
#submit-product-filter:hover{
	background-position: 0 -29px;
	}

/***************** compare prices modal window *******************/

/******* shares background with product filter modal window ******/

div#compare-prices{
	padding:25px;
}
div#compare-prices-header h1,
div#compare-prices-header h3{
	margin:0;
	padding:0;
}
div#compare-prices-header h3 span.normal{
	font-weight:normal;
}
div#compare-prices-header h1 span.red,
div#compare-prices-header h3 span.red{
	color:#ff0000;
}
div#compare-prices-header h1 sup{
	font-size:14px;
}
div#compare-prices-header h1{
	float:left;
	font-size:36px;
	margin-top:5px;
}
div#compare-prices-header a{
	float:left;
	margin-left:10px;
	margin-top:5px;
}
/******************** add to cart button ********************/

a.add-to-cart{
	display:block;
	width:115px;
	height:39px;
	background: transparent url(../images/buttons/button-add-to-cart.png) no-repeat;
	font-size:12px;
	font-weight:bold;
	color:#ffffff;
	padding-left:10px;
	line-height:39px;
	}
div.product .description a:hover.add-to-cart,
a:hover.add-to-cart {
	background-position: 0 -39px;
	text-decoration:none;
	}	

/******************** list companies to compare ********************/
div.compare-companies{
	margin:0;
	padding:0;
}
div.compare-prices-content div.compare-companies ul{
	list-style:none;
	margin:10px 0;
	padding:0;
}
div.compare-prices-content div.compare-companies ul li{
	float:left;
	width:137px;
	height:92px;
	border:1px solid #cccccc;
	border-right:none;
    margin:0;       
    padding:0;	
}
div.compare-prices-content div.compare-companies ul li.last{
	border-right:1px solid #cccccc;
}
p.comp-price{
	text-align:center;
	font-weight:bold;
	margin:10px 0 0 0;
}
div.submit-price{
	background:transparent url(../images/backgrounds/submit-price-bg.png) repeat-y;
	width:553px;
}
div.submit-price-bg-bottom{
	background:transparent url(../images/backgrounds/submit-price-bg-bottom.png) left bottom no-repeat;
	width:553px;
}
div.submit-price-bg-top{
	background:transparent url(../images/backgrounds/submit-price-bg-top.png) left top no-repeat;
	width:553px;
}
div.input-price{
	float:left;
	padding:10px;
	width:350px;
	border-right:1px solid #ffffff;
}
select#store{
	margin:0;
	padding:0;
}
div.input-price form#submit-price fieldset{
	border:none;
	margin:0;
	padding:0;
}
div.input-price form#submit-price p{
	font-size:14px;
	margin:0;
	margin-bottom:10px;
}
div.input-price form#submit-price label{
	font-size:12px;
	margin-left:10px;
}
div.input-price form#submit-price input#price,
div.input-price form#submit-price input#shipping{
	width:50px;	
}
div.input-price form#submit-price input#comments{
	width:339px;
	margin-top:10px;
}
div#price-guarantee{
	float:left;
	width:160px;
	padding:10px;
}
div#price-guarantee h3{
	margin:10px 0 0 0;
	padding:0;
}
div#price-guarantee h3 span.red{
	color:#ff0000;
}
div#price-guarantee p{
	font-size:12px;
	margin:0;
	padding:0;
}
div#security-code{
	float:left;
	padding:10px 7px 0 0;		
}
div.input-price form#submit-price div#security-code p{
	margin:0;
	font-size:12px;
	}
div#enter-security-code{
	float:left;
	padding:5px 5px 0 0;
}
div.input-price form#submit-price div.wrap div#enter-security-code label{
	margin:0;
	padding-top:10px;
	font-size:12px;
	}
	
/******************** submit button ********************/
input.button{
	border: none;
	display: block;
	float:right;
	height: 29px;
	width:62px;
	padding:0;
	margin: 5px 8px;
	color:#ffffff;
	font-size:12px; 
	}
input.button:hover { 
	background-position: 0 -29px; 
	}
input.submit-price { 
	background: transparent url(../images/buttons/button-loginbox.png) no-repeat;
	}