/*
Filename: global-styles.css
Description: main styles for layout
Author: Renellyn Talabucon
Last edit: 1 July 2009

Note 3 colors
blue #0038a7
yellow #fcd119
red #ce1127
*/

html {
margin:0; padding:0;	
}

body {
margin:0; padding:0; background:#fff;
font:10px Arial,Verdana, Helvetica, sans-serif;
color:#333;
}
/* Note 3 colors */
.blue{ color:#0038a7; }
.yellow { color:#fcd119; }
.red{ color:#ce1127; }

/* colors used as bg */
.gray1{ background:#ddd; }
.gray2{ background:#ccc; }
.gray3{ background:#999; }
.gray4{ background:#666; }
.gray5{ background:#333; }

a, a:link, a:active, a:visited {
color:#333; text-decoration: underline;
cursor: pointer;
}
a:hover {
color:#f60;
text-decoration: none;
}
a img {
border: none; 
}
.strong, strong{
font-weight:bold;
}
small{
font:10px Arial,Verdana, Helvetica, sans-serif;
}
input{
margin:0; padding:2px; 
font:11px Arial, Helvetica, sans-serif; color:#333;		
}
.png {
behavior: url('catalog/view/javascript/png/iepngfix.htc');
}
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
.font-bold{ font-weight:bold;}
.button-input{
background:url(../images/panel-title.gif) top center;
margin:5px 0; padding:0 5px; border:0;
width:auto; height:20px;
font:10px Arial, Helvetica, sans-serif; color:#fff;		
text-transform:uppercase;
}

/*alignment*/
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{ margin:0 auto; text-align:center;}
.float-left{float:left;}
.float-right{float:right;}

.container{
background:#fff;
/* background:#d5d9dc url(../images/bg.gif) repeat-y top center; width:1100px;  */ 
margin:0 auto; padding:0; text-align:center;
width:auto; height:auto;
}
.header{
background:#fff;
/* background:#d5d9dc url(../images/bg-header.gif) repeat-x top center; */
margin:0 auto; padding:0; text-align:center;
width:100%; min-width:1020px; height:120px;
}
	.header .logoname{
	width:635px; height:120px;
	float:left; z-index:1000;		
	}	
	.header .top-search{
	background:url(../images/img-search.jpg) no-repeat top right;
	width:360px; height:120px;
	float:right;	
	}
	.search-inner{
	margin:0; padding:0;
	}
		.header .top-search ul{ 
		padding:8px 0 0 0; float:right;
		width:300px; height:37px;
		}
		.header .top-search ul li{ 
		margin:0 7px; float:left; 
		}
		.header .top-search ul li a:link, .header .top-search ul li a:active, .header .top-search ul li a:visited{
		font:13px Arial, Verdana, Helvetica, sans-serif; color:#fff;
		text-decoration:none; letter-spacing:0.2px;
		}		
			.header .top-search ul li a:hover{
			font:13px Arial, Verdana, Helvetica, sans-serif; color:#ccc;
			text-decoration:none; letter-spacing:0.2px;			
			}
		.header .top-search .search-box{
		float:right;
		width:300px; height:40px; display:block;		
		}
		.header .top-search .search-box input{
		background:transparent;
		margin:10px 10px 0 10px; padding:5px 10px; 
		width:165px; float:left; border:0;
		font:12px Arial,Verdana, Helvetica, sans-serif;
		}		
		.header .top-search .search-box .search-button{
		margin:5px 0 0 0; padding:0;
		width:84px; height:31px; float:left; 
		}
.nav{
background:#d5d9dc url(../images/bg-nav.gif) repeat-x top center;
margin:0 auto; text-align:center;
width:100%; min-width:1020px; height:30px;	
}
	.nav ul { 
	padding:8px 0 0 20px;	float:left;
	/* width:750px; */ height:22px;		
	}
	.nav ul li{ 
	padding:0 15px 0 0;	 float:left;	
	list-style-image:url(../images/arrow-navlist1.gif); 
	}
	
	.nav ul li a:link, .nav ul li a:active, .nav ul li a:visited{
	margin:0; padding:0 20px 0 0;
	font:12px Arial, Verdana, Helvetica, sans-serif; color:#fff; text-transform:uppercase;
	text-decoration:none; font-weight:bold; letter-spacing:0.5px;
	}
	.nav ul li a:hover{
	margin:0; padding:0 20px 0 0;
	font:12px Arial,Verdana, Helvetica, sans-serif; color:#ccc; text-transform:uppercase;
	text-decoration:none; font-weight:bold; letter-spacing:0.5px;
	}
.nav .cart-checkout{
background:url(../images/icon-navgreencart.gif) no-repeat top left;
float:right; text-align:right; 
padding:5px 0 0 0; display:block;
/* width:200px;  */height:30px; 
}


	.nav .cart-checkout div.button-cart{
	padding:0 5px 0 25px;	
	width:49px; height:29px;
	float:left;	display:block;
	}
		.nav .cart-checkout div.button-cart a{
		background:url(../images/button-cart.png) no-repeat top right;	
		width:49px; height:29px; display:block;
		}
	.nav .cart-checkout div.button-checkout{
	width:70px; height:29px; float:left;
	padding:0 5px 0 0;	display:block;
	}	
		.nav .cart-checkout div.button-checkout a{
		background:url(../images/button-checkout.png) no-repeat top right;
		width:60px; height:29px; display:block;			
		}
/* 		.nav .cart-checkout div.button-checkout a:hover{
		background:url(../images/button-checkout.png) no-repeat top right;
		width:80px; height:29px; display:block;			
		} */
		
		.nav .cart-checkout div.button-cart a span,
		.nav .cart-checkout div.button-checkout a span{
		visibility:hidden; 	display:none;	
		}
		
.breadcrumb {
padding:0 20px 5px 20px; text-align:left;
float:left; clear:both;
}
	.breadcrumb a:link, .breadcrumb a:active, .breadcrumb a:visited{
	background:url(../images/arrow-minired.gif) no-repeat left; 
	margin:0; padding:0 12px;
	font:11px Arial, Verdana, Helvetica, sans-serif; color:#666; 
	text-decoration:underline; font-weight:bold; letter-spacing:0.5px;
	}
	.breadcrumb a:hover{
	background:url(../images/arrow-navlist2.gif) no-repeat left; 
	margin:0; padding:0 12px;
	font:11px Arial,Verdana, Helvetica, sans-serif; color:#c00; 
	text-decoration:underline;  font-weight:bold; letter-spacing:0.5px;
	}
.wrapper-mask{
margin:0 auto; padding:0; 
text-align:center; clear:both; 
width:100%; min-width:1020px; height:auto;
/*overflow:hidden; margin:0 auto; padding:0 0 50px 0; text-align:center; clear:both; width:100%; height:auto;*/
}
		
.column-left{
/* padding-left:50px; width:200px; */
margin:0; padding:0; position:relative; 
float:left;  width:20%; height:auto; 
}
	/*left panel*/
	.left-panel{	
	margin:0 auto; width:193px; 
	}
		.ptitle1{		/*g*/
		background:#fff url(../images/panel-title.gif) repeat-x top center;
		}
		.ptitle2{		/*000*/
		background:#fff url(../images/panel-title2.gif) repeat-x top center;
		}		
		.ptitle3{		/*y*/
		background:#fff url(../images/panel-title3.gif) repeat-x top center;
		}
		.ptitle4{		/*b*/
		background:#fff url(../images/panel-title4.gif) repeat-x top center;
		}
		.ptitle5{		/*r*/
		background:#fff url(../images/panel-title5.gif) repeat-x top center;
		}
		
	.left-panel h1{
	height:22px; padding:4px 0 0 10px; text-align:left;
	font:12px Arial, Verdana, sans-serif; color:#fff; font-weight:bold;
	text-transform:uppercase; letter-spacing:0.5px;
	}
	.left-panel ul{	
	padding:0 10px 10px 25px; text-align:left;
	border-left:1px solid #666;
	border-right:1px solid #666;		
	}
		.left-panel .lpanel-top{
		border-top:1px dashed #ccc;
		}
			.left-panel .left-panel-bot{ 
			background:url(../images/left-panel_bot.gif) no-repeat bottom center;
			width:193px; height:16px; display:block;			
			}
		.left-panel .live-help, .left-panel a.live-help, .left-panel a.live-help img {
		margin:0; padding:0; border:0; outline:0;  display:block; 
		}
	.left-panel ul li{ 
	padding:3px 10px 0 0;	 
	list-style-image:url(../images/arrow-navlist2.gif); 
	font:11px Arial, Helvetica, sans-serif; color:#333;
	}	
	
	.left-panel ul li a:link, .left-panel ul li a:active, .left-panel ul li a:visited{
	font:11px Arial, Helvetica, sans-serif; color:#333;
	text-decoration:none; font-weight:bold; text-transform:uppercase; 
	}
	.left-panel ul li a:hover{
	font:11px Arial, Helvetica, sans-serif; color:#666;
	text-decoration:none; font-weight:bold; text-transform:uppercase; 
	}	
		/*individual panel title images*/
		.lpanel-1{
		background:url(../images/img-panel_title1.gif) no-repeat top right;
		height:26px;
		}
		.lpanel-2{
		background:url(../images/img-panel_title2.gif) no-repeat top right;
		height:26px;
		}
		.lpanel-3{
		background:url(../images/img-panel_title3.gif) no-repeat top right;
		height:26px;
		}
		.lpanel-4{
		background:url(../images/img-panel_title4.gif) no-repeat top right;
		height:26px;
		}
		.lpanel-5{
		background:url(../images/img-panel_title5.gif) no-repeat top right;
		height:26px;
		}
	
	/*sub-links on left panel menu link (category)*/
	.left-panel ul li ul{
	padding:0 0px 10px 15px; text-align:left;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
	}	
	/*shop by brand*/
	.left-panel .select-brand{
	padding:20px 10px; text-align:center;	
		border-left:1px solid #666;
	border-right:1px solid #666;
	}
	.left-panel .select-brand select{
	font:12px Arial,Verdana, Helvetica, sans-serif; color:#333;
	text-align:left;
	}
	/*testimonials box on lside*/
	.left-panel span.lsidebox{
	padding:5px; text-align:left;
	border-left:1px solid #666;
	border-right:1px solid #666;	
	display:block; 
	}
	
.wrapper{
margin:0 auto; padding:0; 
float:left; width:80%; height:auto; 
position:relative; left:0;
/*margin:0; padding:0; float:right; width:79%; height:auto; position:relative;  */
} 
	
.content-wrap{
margin:0 auto; padding:0; text-align:center;  width:63%; 
float:left; height:auto; 
/* position:relative; width:495px;  border:1px solid #c00; */
}
	.content{
	margin:0; padding:0; text-align:center;
	/* width:499px; */height:auto; 
	}
.column-right{
margin:0; padding:0;
width:300px; height:auto; float:right;
/* position:relative;  right:0; padding-right:50px; */
}
	.column-right-wrap{
	background:url(../images/right-menubg.gif);
	width:300px; height:auto; 	
	}
	/*right panel*/
	.right-panel{
	background:#fff  url(../images/panel-title.gif) repeat-x top center;
	margin:0px auto;  width:290px; height:auto;
	}
	.right-panel h1{
	height:22px; padding:4px 0 0 15px; text-align:left;
	font:12px Arial, Verdana, sans-serif; color:#fff; font-weight:bold;
	text-transform:uppercase; letter-spacing:0.5px;
	}		
	.right-panel h1.rpanelbox{
	height:22px; padding:12px 0 0 15px; text-align:left;
	font:12px Arial, Verdana, sans-serif; color:#fff; font-weight:bold;
	text-transform:uppercase; letter-spacing:0.5px;
	}	
		
		.rpanel-yellowbox{ /*small version*/
		background:transparent url(../images/rpanel-yellow.png) no-repeat top center; width:290px; height:120px;
		}
		.rpanel-bluebox{
		background:transparent url(../images/rpanel-blue.png) no-repeat top center; width:290px; height:120px;
		}
		.rpanel-yellow{
		border:1px solid #fbd11a;	
		margin:0 auto 10px auto;
		}
		.rpanel-blue{
		border:1px solid #0038a7;
		margin:0 auto 10px auto;
		}
		.rpanel-red{
		border:1px solid #ce1127;
		margin:0 auto 10px auto;
		}
			.stripes-yellow{
			background:url(../images/stripes-yellow.gif) no-repeat top right;
			height:26px;
			}		
			.stripes-blue{
			background:url(../images/stripes-blue.gif) no-repeat top right;
			height:26px;
			}			
			.stripes-red{
			background:url(../images/stripes-red.gif) no-repeat top right;
			height:26px;
			}
		
	.right-panel ul li{
	margin:0 0 5px 0;	display:block;
	}		
	.right-panel ul li.rpanel-top{
	border-top:1px solid #ccc;	
	}	
		.right-panel ul li:after{
		content: "."; display: block; 
		height: 0; clear: both; visibility: hidden;
		}
		
	/*shopping cart rpanel*/
	.right-panel .shopcart{
	margin:10px auto; padding:0 10px;
	}
		.right-panel .shopcart:after{
		content: "."; display: block; 
		height: 0; clear: both; visibility: hidden;
		}	
	.right-panel .shopcart table td{	
	font:12px Arial,Verdana, Helvetica, sans-serif;
	font-weight:bold; color:#333;	
	}
	.right-panel .shopcart table td a{
	font:12px Arial,Verdana, Helvetica, sans-serif;
	font-weight:bold; color:#333;	
	}
	.right-panel .shopcart .subtotal{
	margin:5px auto; padding:10px; float:right; 	text-align:right;	
	font:12px Arial,Verdana, Helvetica, sans-serif;
	font-weight:bold; color:#0038a7;
	border-top: 1px solid #ccc; width:90%;
	}	
	.right-panel .shopcart .subtotal span{ color:#333;	}
	
	.right-panel .panelbox-icon{
	padding:10px 0 0 0;
	}

	.right-panel .currencyList{
	margin:5px 0 5px 20px; text-align:center; 
	background:url(../images/currency_dollar.png) no-repeat top left;	
	width:200px; height:60px; display:block;
	}
 		.right-panel .currencyList form{
		margin:0 0 0 40px; 
		} 
		.right-panel .currencyList h3{
		margin:0; padding:5px 0 0 40px;
		font:12px Arial,Verdana, Helvetica, sans-serif;
		font-weight:bold;
		}
		.right-panel .currencyList select{		
		font:12px Arial,Verdana, Helvetica, sans-serif;
		margin:5px; text-align:left;
		}
		.right-panel .currencyList option{
		font:12px Arial,Verdana, Helvetica, sans-serif;
		text-align:left;
		}
		
	.right-panel .cartItems{
	background:url(../images/shopping_cart.png) no-repeat top left;
	margin:5px 0 5px 20px; text-align:center; 
	width:200px; height:60px; display:block;
	}
		.right-panel .cartItems{
		padding:0 0 0 10px;
		font:22px Arial, Verdana, Helvetica, sans-serif; 
		color:#000; font-weight:bold; text-decoration:none;
		line-height:60px; vertical-align:top; 
		text-transform:lowercase;
		}
		.right-panel .cartItems a:link,
		.right-panel .cartItems a:active,
		.right-panel .cartItems a:visited{
		padding:0 0 0 10px;
		font:22px Arial, Verdana, Helvetica, sans-serif; 
		color:#000; font-weight:bold; text-decoration:none;
		line-height:60px; vertical-align:top; 
		text-transform:lowercase;
		}
		.right-panel .cartItems a:hover{
		padding:0 0 0 10px;
		font:22px Arial, Verdana, Helvetica, sans-serif; 
		color:#c00; font-weight:bold; text-decoration:none;
		line-height:60px; vertical-align:top;
		text-transform:lowercase;
		}
				
	/*styles for products in list*/
	.right-panel .prodImg{
	margin:10px; float:left; 
	width:70px; height:70px;
	}
	.right-panel  .prodData{
	margin:10px 10px 0 10px; width:170px;
	float:right; text-align:left;
	}	
		.right-panel  .prodData h3{
		margin:0; padding:0;
		font:12px Verdana, Helvetica, sans-serif;
		display:block;
		}
			.right-panel  .prodData h3 a:link,
			.right-panel  .prodData h3 a:active,
			.right-panel  .prodData h3 a:visited{
			color:#666;	font-weight:bold;
			text-decoration:none;
			}			
				.right-panel  .prodData h3 a:hover{
				color:#f60;	font-weight:bold;
				text-decoration:none;
				}
		.right-panel .extraData{
		font-size:11px; color:#0038a7;
		display:block; 
		}
		.right-panel .prodPrice{
		padding:3px 0;
		font:14px Arial, Verdana, Helvetica, sans-serif; 
		color:#f30; font-weight:bold; display:block; 
		}
	.right-panel  .addButtons{
	float:right; padding:5px 0;	
	}
	.right-panel  .addButtons form{
	float:left; 
	}	
		.right-panel .addButtons a, .right-panel .addButtons form span a, .right-panel .addButtons a:link, 
		.right-panel .addButtons a:active, .right-panel .addButtons a:visited{		
		padding:0 10px 0 18px;
		font:11px Arial, Verdana, Helvetica, sans-serif;
		color:#c03; text-decoration:none;		
		}
			.right-panel .addButtons a:hover,			
			.right-panel .addButtons form span a:hover{			
			padding:0 10px 0 18px;
			font:11px Arial, Verdana, Helvetica, sans-serif;
			color:#f60; text-decoration:none;		
			}		
		.right-panel .addButtons .addCart, .right-panel  .addButtons form .addCart{
		background:url(../images/icon-basket.gif) no-repeat top left;
		}
		.right-panel .addButtons .addWish, .right-panel  .addButtons form .addWish{		
		background:url(../images/icon-star.gif) no-repeat top left;	
		}

.footer{
background:#303030 url(../images/bg-footer.gif);
margin:0 auto; padding:0; text-align:center; position:relative; 
min-width:1020px; width:100%; height:150px; clear:both;
}
	.footer .payment-methods{
	margin:0 auto; padding:20px 0 10px 0; 
	text-align:center;
	}
		.footer .payment-methods span{
		font-size:10px;	color:#fff; 
		font-style:italic; letter-spacing:0.8px;
		display:inline; vertical-align:top;
		}
		.footer .payment-methods ul{ 
		margin:0 auto; padding:0; 
		text-align:center; display:inline;
		}
		.footer .payment-methods ul li{ 
		padding:0 5px; display:inline;		
		}

	.footer .footer-links{
	margin:0 auto; padding:0 0 10px 0; 
	text-align:center;
	}
		.footer .footer-links ul{ 
		margin:0 auto; padding:0 0 5px 0; 
		text-align:center;	display:block;
		}
		.footer .footer-links ul li{ 
		padding:0 10px; display:inline;		
		}	
		.footer .footer-links ul li a:link,
		.footer .footer-links ul li a:active, 
		.footer .footer-links ul li a:visited{ 
		font:10px Arial, Verdana, Helvetica, sans-serif; color:#fff;
		text-transform:uppercase; text-decoration:none;
		}
		.footer .footer-links ul li a:hover{ 
		font:10px Arial, Verdana, Helvetica, sans-serif; color:#f60;
		text-transform:uppercase; 
		text-decoration:none;
		}
	.footer .footer-badges{
	margin:0 auto; padding:0 0 5px 0; 
	text-align:center;
	}
		.footer .footer-badges ul{	
		margin:0 auto; padding:0 0 5px 0; 
		text-align:center;	display:block;		
		}
		.footer .footer-badges ul li{
		padding:0 2px; display:inline;	
		}
	
	.footer .footer-copy{
	margin:0 auto; padding:0 0 5px 0; 
	font:11px Arial, Verdana, Helvetica, sans-serif;
	color:#fff;	text-align:center;
	}
		.footer .footer-copy .img-copy{	
		position:relative; top:5px;
		}
	
	.wrapper-mask:after, .wrapper:after, .content:after, .content-wrap:after, 
	.container:after, .header:after, .right-panel:after, .footer:after{
	content: "."; display: block; 
	height: 0; clear: both; visibility: hidden;
	}