/*****************************************************

designed & developed by: kumail.h.t
www.kumailht.com
copyright: kumail.h.t

*****************************************************/


/*****************************************************

table of contents

> reset

> definitions
> layout - base layout for all pages
> typography

> buttons - button styles go here
> info bar - the information bar on the products page

> header - styles for the header go here
> footer - styles for the footer go here

- styles independent to the following pages -
> home page
> products
> single product
> services
> contact

*****************************************************/


/*****************************************************
reset
*****************************************************/
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,em,font,img,strong,li,ol,ul,fieldset,form,label,table,tr,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;text-align:left;vertical-align:baseline;margin:0;padding:0}a img{border:none}table{border-collapse:collapse;border-spacing:0}q:before,q:after,blockquote:before,blockquote:after{content:""}



/*****************************************************
definitions
*****************************************************/
.clear{clear:both}
.right{float:right}
.left{float:left}



/*****************************************************
layout
*****************************************************/
/* base layout */
html{background:#f2f2f2}
body{width:960px;margin:0 auto;padding-top:50px}
#container{background:#fff;border-top:2px solid #ffd42a;margin-bottom:40px;
box-shadow:0 5px 5px rgba(0, 0, 0, .7);-moz-box-shadow:0 5px 5px rgba(0, 0, 0, .7);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.5)}

/* full width */
.full-width{margin:0 0 0 20px;clear:both}

/* columns default */
.column-left{float:left;margin:20px;clear:both;width:480px}
.column-right{float:right;margin:20px;width:400px}

/* columns widths */
#col-home-left{width:480px}
#col-home-right{width:400px}

#home-col-left,#home-col-right{margin-bottom:10px}

#product-page-col-left{width:520px}
#product-page-col-right{width:360px}



/*****************************************************
typography
*****************************************************/
body{font-size:62.5%;line-height:1.5;color:#333;font-family:"helvetica neue","trebuchet ms",arial,helvetica,sans-serif}
p,td,th,li,a{font-size:1.2em}

#container p,#container li{font:1.2em/1.5 arial}
p{margin:0 0 1em}

h1,h2,h3,h4,h5,h6{font-weight:400;color:#111;margin:1em 0 0.5em}

h1{background:#ccc url(../img/title-end.png) no-repeat right;color:#fff;float:left;line-height:45px;padding:0 3em 0 .5em;position:relative;text-shadow:-1px -1px 1px #aaa}
	h1 span{background:url(../img/title-start.png) no-repeat left;width:8px;height:51px;display:block;position:absolute;top:0px;left:-8px}

h1{font-size:2em} /* page title */

h2{font-size:1.8em;color:#f95;text-decoration:none} /* secondary header */
	h2 a{color:#f95;text-decoration:none}
		h2 a:hover{color:#999}
h3{font-size:1.6em;line-height:1;color:#aaa}
h4{font-size:1.3em;line-height:1.25}
h5{font-size:1.3em;font-weight:700}
h6{font-size:3em;color:#555} /* prices */

a{color:#333;text-decoration:underline}

sup,sub{line-height:0}
abbr,acronym{border-bottom:1px dotted #666}
address{font-style:italic;margin:0 0 1.5em}
pre{#fff-space:pre;margin:1.5em 0}
pre,code,tt{font:1em 'andale mono', 'lucida console', monospace;line-height:1.5}
dd{margin-left:1.5em}


/* table */
table{width:100%;text-align:left;border-collapse:collapse;margin:1em 0 2em}
	table th{
	border-right:1px dotted #fff;border-left:1px dotted #fff;border-bottom:1px solid #fff;
	color:#fff;background:#aaa;font-size:1.3em;font-weight:700;padding:8px 15px}
	
	table td{border-right:1px dotted #fff;border-left:1px dotted #fff;border-bottom:1px solid #fff;
	color:#444;background:#eee;padding:8px 15px}



/*****************************************************
buttons
*****************************************************/
.buynow,.learnmore,.moreproducts{display:block;float:left;text-indent:-9999px}

.buynow{background:url(../img/buynow.png);height:35px;width:99px;position:relative}
	.buynow span{background:url(../img/buynow.png);background-position:0 -68px;display:block;position:absolute;top:0;left:0;height:100%;width:100%;z-index:100}
	.buynow:hover{background-position:0 -34px;cursor:pointer}
	.buynow:active{background-position:0 -68px}

.learnmore{background:url(../img/learnmore.png);height:27px;width:131px}
.moreproducts{background:url(../img/moreproducts.png);height:27px;width:131px;clear:both}
	.learnmore:hover,.moreproducts:hover{background-position:0 -27px}
	.learnmore:active,.moreproducts:active{background-position:0 -54px}



/*****************************************************
info bar
*****************************************************/
a.infobar{background:#f60;color:#fff;display:block;font-size:1.2em;height:30px;line-height:30px;text-align:center;text-decoration:none;width:100%;position:relative;top:20px}
	a.infobar:hover{background:#f71}
	a.infobar:visited,a.infobar:active{color:#fff}



/*****************************************************
header
*****************************************************/
#header{overflow:hidden;width:100%}
	#header img{float:left;margin-bottom:20px}
	#header ul{float:right;list-style-type:none;margin-top:56px}
		#header ul li{float:left}
		
		#header ul li a{
		text-decoration:none;color:#fff;font-weight:700;display:block;margin-left:3px;text-transform:uppercase;background:#a5a5a5;padding:6px 13px;font-size:1em;text-shadow:-1px -1px 1px #8a8a8a;
		border-top-left-radius:4px;border-top-right-radius:4px;
		-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;
		-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;
		-khtml-border-radius-topleft:4px;-khtml-border-radius-topright:4px
		}
			#header ul li a:hover{background:#999}
			#header ul li a:active{background:#000}
		
		#header ul li:last-child a{background:#f60;text-shadow:0px 0px 0px #fff;}
			#header ul li:last-child a:hover{background:#f40;text-shadow:0px 0px 0px #fff;}
			#header ul li:last-child a:active{background:#f10;text-shadow:0px 0px 0px #fff;}



/*****************************************************
footer
*****************************************************/
#footer{background:#222 url(../img/footer-bg.gif);color:#fff;float:left;clear:both;width:920px;margin-top:20px;padding:20px;border-top:4px solid #ffd42a;border-bottom:1px solid #222}
	#footer a{color:#fff;text-decoration:none;font-size:100%}
	#footer a:hover{text-decoration:underline}

#credits{float:left;width:600px}
	#credits p{color:#ccc;font:1em/1.4 helvetica,arial,'trebuchet ms',verdana,sans-serif;text-shadow:-1px -1px 1px #000000;margin-bottom:0}
	#credits p:first-child{color:#fff;font:700 1.3em 'trebuchet ms',verdana,arial,sans-serif;text-shadow:-1px -1px 1px #000;margin-bottom:10px}

#contact-info{float:right;width:300px}
	#contact-info h4{float:right;font-size:3em;color:white;margin:0 0 15px 0;line-height:.8;text-shadow:-1px -1px 1px #000}
	#contact-info p{clear:right;color:#fff;text-align:right;text-shadow:-1px -1px 1px #000000}



/*****************************************************
home page
*****************************************************/

/* overview */
#featured{background:#aaa;overflow:hidden;width:100%}

#fslides{list-style:none;overflow:hidden;width:960px;height:323px}

#ftabs li{float:left;margin-left:-20px;list-style:none}
	#ftabs li:first-child{margin-left:0}

.current{cursor:default}

#fnav1,#fnav2,#fnav3,#fnav4{display:block;width:260px;height:40px}
#fnav1{background:url(../img/featured/fnav1.png)}
#fnav2{background:url(../img/featured/fnav2.png)}
#fnav3{background:url(../img/featured/fnav3.png)}
#fnav4{background:url(../img/featured/fnav4.png);width:240px}

#fnav1:hover,#fnav1.current,#fnav2:hover,#fnav2.current,#fnav3:hover,#fnav3.current,#fnav4:hover,#fnav4.current
{background-position:0 40px}

/* featured slides */
#featured-slides{background:#aaa;width:960px;height:323px;overflow:hidden;width:100%}
#featured-slides img{width:960px;top:0;left:0}

/* featured list */
div#feature_list{width:960px;height:320px;overflow:hidden;position:relative;border-bottom:2px solid #ffd42a}
div#feature_list ul{position:absolute;top:0;list-style:none;margin:0;padding:0}

ul#tabs{left:0;z-index:2;width:320px}
	ul#tabs li{font-size:12px;font-family:Arial}
		ul#tabs li img{border:none;float:left;margin:10px 10px 0 0;padding:5px}

ul#tabs li a h3{color:#444;margin:7px 0 0 0}
ul#tabs li a.current h3{color:#fff;margin:0;margin:7px 0 0 0}

ul#tabs li a{color:#222;text-decoration:none;display:block;height:60px;outline:none;padding:10px 10px 10px 20px}
	ul#tabs li a:hover{text-decoration:underline}
ul#tabs li a.current{background:url('../img/featured2/feature-tab-current.png');color:#FFF}
	ul#tabs li a.current:hover{text-decoration:none;cursor:default}

ul#output{right:0;width:673px;height:320px;position:relative;background:#eee}
	ul#output li{position:absolute;width:673px;height:320px}
		ul#output li a{position:absolute;bottom:10px;right:10px;text-decoration:none;font-size:11px;color:#FFF;background:#000;-moz-border-radius:5px;padding:8px 12px}
			ul#output li a:hover{background:#ffd42a;color:#222}

/* recommended product */
.recommended-product{width:520px;float:left;margin:0 0 20px}
	.recommended-product a img:first-child{float:left;border:#ececec solid .4em;width:158px;height:158px;margin:0 20px 0 0}

.recommended-product h2{margin:0 0 5px;text-shadow:1px 1px 1px #e9e9e9}
.recommended-product p{color:#999;margin:0}
.recommended-product h6{margin:7px 0 0 0;float:left;text-shadow:1px 1px 1px #ccc}
.recommended-product .buynow{margin:14px 0 0 10px}
.recommended-product .learnmore{margin:10px 200px 0 -20px}

/* special offer */
.special-offer{position:relative}
.special-offer img{float:right}
	#special-offer-overlay{position:absolute;top:350px;right:-20px}
	.special-offer h5{color:#fff;left:30px;position:absolute;text-decoration:none;top:328px;z-index:6;font-size:2.8em;font-weight:100}
	.special-offer h6{color:#fff;font:11px arial,verdana,sans-serif;left:29px;position:absolute;text-decoration:none;top:384px;z-index:6}



/*****************************************************
products
*****************************************************/

/* products */
#products{width:920px;margin:10px 0 10px 30px;list-style:none;overflow:hidden;float:left;clear:both}
	#products li{border-right:1px dotted #ccc;padding:20px;background:#fff;border-bottom:none;width:140px;float:left}
		#products li:nth-child(5n){border-right:none}

	#products li{border-bottom:1px dotted #ccc}

	#products img{
	width:130px;background:#fff;padding:4px;
	border-top:1px solid #eee;border-right:1px solid #ccc;border-bottom:1px solid #aaa;border-left:1px solid #ddd;
	box-shadow:1px 1px 4px rgba(0,0,0,.1);-moz-box-shadow:1px 1px 4px rgba(0,0,0,.1);-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.1)
	}
		#products a img:hover{
		box-shadow:1px 1px 4px rgba(0,0,0,.3);-moz-box-shadow:1px 1px 4px rgba(0,0,0,.3);-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.3)
		}
	
	#products h6{float:right;color:#f95;font:1.9em times,'times new roman',serif;margin:0}
	#products h4,#products h4 a{color:#444;margin:0 0 5px 0;font-size:1.2em;text-decoration:none}
		#products h4 a:hover{color:#333}
	#products p{line-height:1.3;font-size:1em}

/* polaroid */
#polaroid{background:url(../img/products/bg.png) no-repeat;height:950px;position:relative;width:960px;overflow:hidden;padding:0 20px;}

#polaroid1,#polaroid2,#polaroid3,#polaroid4,#polaroid5,#polaroid6,#polaroid7,#polaroid8,#polaroid9{position:absolute}

#polaroid1:hover,#polaroid2:hover,#polaroid3:hover,#polaroid4:hover,#polaroid5:hover,#polaroid6:hover,#polaroid7:hover,#polaroid8:hover,#polaroid9:hover{z-index:10}

#polaroid2{left:320px;top:20px}
#polaroid3{left:550px}
#polaroid4{top:300px}
#polaroid5{left:280px;top:280px}
#polaroid6{left:580px;top:300px}
#polaroid7{left:20px;top:550px}
#polaroid8{left:320px;top:580px}
#polaroid9{left:600px;top:580px}

p#more{text-align:center;font:italic 2em georgia,'times new roman',serif;}



/*****************************************************
single product
*****************************************************/
#product-page-col-left h2{margin-top:0}
#product-page-col-left h6{margin-top:0;margin-right:.5em;float:left}
#product-page-col-left .buynow{margin-top:.4em}
.rating{color:#999}

.slideshow{float:right;width:350px;margin-right:10px}
	.slideshow div{height:250px;width:350px;overflow:hidden;border:4px solid white;
		box-shadow:1px 1px 4px rgba(0,0,0,.3);-moz-box-shadow:2px 2px 6px rgba(0,0,0,.3);-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.3)}
	.slideshow div img{width:350px;min-height:250px;top:0;left:0}

	.slideshow ul{list-style:none;width:420px;margin-top:20px}
		.slideshow ul li{float:left;margin:0 15px 7px 0}
	.slideshow ul img{
	width:70px;border:1px solid #ccc;padding:3px;
	filter: alpha(opacity=50);-khtml-opacity: 0.5;-moz-opacity: 0.5;opacity: 0.5}
		.slideshow ul img:hover{border:1px solid #aaa;filter: alpha(opacity=100);-khtml-opacity: 1;-moz-opacity: 1;opacity: 1}
		.slideshow ul li a.activeSlide img{filter: alpha(opacity=100)-khtml-opacity: 1;-moz-opacity: 1;opacity: 1}

.back{float:right;margin:20px 20px 0 0;background:url(../img/back.png);width:30px;height:30px}
	.back:hover{background-position:0 30px}

/* related products */
#related-products{width:920px;float:left;margin:0 20px 20px 20px}

#related-products div{float:left;width:300px;margin:0 5px 0 0}

	#related-products div a img:first-child{border:#ececec solid 3px;float:left;margin:0 10px 0 0;width:100px;height:100px}
		#related-products div a img:first-child:hover{border-color:#ddd}

	#related-products div h3 a, #related-products div h3{color:#777;text-decoration:none;margin:5px 0 0 0}
		#related-products div h3 a:hover{color:#555}

	#related-products div p{margin:5px 0;color:#999}
		#related-products div p img{height:10px}
	#related-products h6{font-size:1.8em;margin:0;color:#777}

.dotted-line{border-top:1px dashed #ccc;width:920px;margin:0 20px}



/*****************************************************
services
*****************************************************/
#services div{width:450px;float:left;margin-right:20px}

	#services img{
	float:right;padding:5px 5px 5px 5px;background:#fff;margin:10px;
	border-top:1px solid #eee;border-right:1px solid #ccc;border-bottom:1px solid #aaa;border-left:1px solid #ddd;
	border-color:rgba(0,0,0,0);
	transform:rotate(5deg);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);
	box-shadow:2px 2px 4px rgba(0,0,0,.3);-moz-box-shadow:2px 2px 6px rgba(0,0,0,.3);-webkit-box-shadow:2px 2px 4px rgba(0,0,0,.3)
	}

	#services img:hover{
	transform:rotate(2deg);-moz-transform:rotate(2deg);-webkit-transform:rotate(2deg);
	-webkit-transform:scale(1.1);-moz-transform:scale(1.1);
	-webkit-transition: all .1s ease-in;
	box-shadow:1px 1px 4px rgba(0,0,0,.3);-moz-box-shadow:5px 5px 10px rgba(0,0,0,.3);-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.3)
	}

	#services h2{margin-bottom:20px;padding-bottom:7px;border-bottom:1px dotted #ccc}



/*****************************************************
contact
*****************************************************/
#map{float:right;margin:20px 20px 0 0}

/* form  */
#contact{float:left;margin:20px 0 30px 20px;clear:both}
	#contact legend{display:none}
	#contact li{list-style-type:none;margin:5px 0}

	#contact input,#contact textarea{background:#fcfcfc;border:1px solid #ccc;width:302px;padding:5px 3px}
		#contact input:hover,#contact textarea:hover{background:#fafafa;border:1px solid #aaa}
		#contact input:focus,#contact textarea:focus{background:#fbfbfb;border:1px solid #ffd42a}
	#contact textarea{height:125px;overflow:auto}

	#contact input#send{-moz-border-radius:2px;-webkit-border-radius:2px;background-color:#333;border:none;color:#fff;cursor:pointer;width:55px;margin:0 0 1px 110px}
		#contact input#send:hover{background-color:#ffd42a}
		#contact input#send:active{margin-top:1px;margin-bottom:0}

	.errormessage{-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;background:#ec5e53;color:#fff;margin:5px 0 10px 110px;padding:3px 5px}
	#thankyou{clear:left;float:left;margin:20px 0 0 20px;background:#4cc44e;color:#fff;padding:5px 10px;
	-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;}
	form label{display:block;float:left;width:110px}