/*
This CSS filed is authored by Jonathan Cheung
4/9/2008
*/
* html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
/* Stripping all styles and defining common styles */
body {
	margin: 0;
	padding: 0;
	width: 100%;
	border: 0;
	background: #ffffff url(../images/background_gradient.jpg) 50% 0 repeat-x;	
	font-family: helvetica, arial, verdana, lucida, sans-serif;	
	font-size: 80%; /* 1em is 10pt, 0.8em is 8pt, 1.6em is 16pt, etc */
	color: #333;
}

a {
	color: #333;
	text-decoration: none;
}
a:visited {color: #333;}
a:hover, a:active {text-decoration: underline;}
/* reset header and p tag font sizes so nested "em" fonts will not inherit odd font sizes */
img, fieldset, form, h1, h2, h3, h4, p {
	border: 0;
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 1em;
}

p,h3,ul{
	margin: 10px 40px;
}
h3{
	font-size: 1.3em;
	font-weight: bold;
	color:#EDAC4A;
}

ul {
	padding-left: 2em;
	margin-left: 2em;
}
li {
	margin: 10px 5px;
}
.collectionDiv{
	width: 252px;
	padding:5px;
	text-align:center;
}

.bg1 {
	background: url(../images/bg1.jpg) repeat-x right;
	height: 38px;
	position: absolute;
	left: 0%;
	width: 50%;
}
.bg2 {
	background: url(../images/bg2.jpg) repeat-x;
	height: 38px;
	position: absolute;
	left: 50%;
	width: 50%;
}
.col{
	float:left;
}
.row{
	margin: 0;
	padding: 0; 
	clear:both;
}
#mainDiv{
	width:761px;
	margin: 0px auto;
	position: relative;
	background: transparent;
	height:100%;
}


#menuBar{
	height: 90px;
}
#footer{
	width:100%;
	clear:both;
	padding-top:30px;
}
#links{
	position:relative;
	right:0px;
	text-align:right;
}
#links, #links a{
	color:#ED910A;
}
#copyright{
	text-align:right;
	font-size: 0.8em;
	color: #666666;
}
#designed{
	text-align:right;
	color: #999999;
	font-size: 0.8em;
}
.border {
	background: transparent url(../images/border.gif) repeat-x;
	width: 100%;
	height: 5px;
	bottom: 60px;
	margin-top:10px;
}
#commerBtns{
	float:right;
	position:absolute;
	top:38px; 
	right:40px;
	z-index:2;
}
/* 	This section is used to define all buttons being used
 	to use these buttons use class = btn stylename
*/
	.btn {
		text-indent: -200em;
		height: 38px;
		float: left;
		display:block;
	}
	.home {
		background: url(../images/btn_home_sprite.jpg) top left;
		width: 62px;
	}
	.home:hover {
		background: url(../images/btn_home_sprite.jpg) bottom left;
		width: 62px;
	}
	.products {
		background: url(../images/btn_products_sprite.jpg) top left;
		width: 85px;
	}
	.products:hover {
		background: url(../images/btn_products_sprite.jpg) bottom left;
		width: 85px;
	}
    .wholesale {
		background: url(../images/btn_wholesale_sprite.jpg) top left;
		width: 160px;
	}
	.wholesale:hover {
		background: url(../images/btn_wholesale_sprite.jpg) bottom left;
		width: 160px;
	}
	.make_your {
		background: url(../images/btn_make_your_sprite.jpg) top left;
		width: 160px;
	}
	.make_your:hover {
		background: url(../images/btn_make_your_sprite.jpg) bottom left;
		width: 160px;
	}
	.about_us {
		background: url(../images/btn_about_us_sprite.jpg) top left;
		width: 88px;
	}
	.about_us:hover {
		background: url(../images/btn_about_us_sprite.jpg) bottom left;
		width: 88px;
	}
	.qanda {
		background: url(../images/btn_qa_sprite.jpg) top left;
		width: 52px;
	}
	.qanda:hover { 
		background: url(../images/btn_qa_sprite.jpg) bottom left;
		width: 52px;
	}
	.testimonials {
		background: url(../images/btn_testimonials_sprite.jpg) top left;
		width: 110px;
	}
	.testimonials:hover { 
		background: url(../images/btn_testimonials_sprite.jpg) bottom left;
		width: 110px;
	}
	
	.check_out {
		background: url(../images/btn_check_out_sprite.jpg) top left;
		width: 81px;
		height:23px;
	}
	.check_out:hover {
		background: url(../images/btn_check_out_sprite.jpg) bottom left;
		width: 81px;
		height:23px;
	}
	.shopping_bag {
		background: url(../images/btn_shopping_cart_sprite.jpg) top left;
		width: 116px;
		height:22px;
	}
	.shopping_bag:hover {
		background: url(../images/btn_shopping_cart_sprite.jpg) bottom left;
		width: 116px;
		height:22px;
	}
	.logo {
		background: url(../images/logo_sprite.jpg) top left;
		width: 158px;
		height: 76px;
		margin-left:18px;
	}
	.logo:hover {
		background: url(../images/logo_sprite.jpg) bottom left;
		width: 158px;
		height: 76px;
	}
	.buy_a_collection{
		background: url(../images/btn_buy_a_collection_sprite.jpg) no-repeat top left;
		width: 247px;
		height: 114px;
	}
	.buy_a_collection:hover{
		background: url(../images/btn_buy_a_collection_sprite.jpg) no-repeat bottom left;
		width: 247px;
		height: 114px;
	}

	.buy_earth_collection{
		background: url(../images/btn_buy_earth_collection_sprite.jpg) no-repeat top left;
		width: 247px;
		height: 114px;
	}
	.buy_earth_collection:hover{
		background: url(../images/btn_buy_earth_collection_sprite.jpg) no-repeat bottom left;
		width: 247px;
		height: 114px;
	}
/* End Buttons Section */

/* This is used in the Homepage */
		#introBanner{
			position:absolute;
			left:180px;
			top:70px;
			z-index:1;
		}
/* End Homepage Styles */

/* Produt Pages Styles */
		
		.add_to_cart {
			background: url(../images/btn_add_to_cart_sprite.png) no-repeat top left;
			width: 105px;
			height: 29px;
			/*position: relative;
			top: -25px;
			right: 40px;*/
			margin-right: 40px;
			float:right;
		}
		.add_to_cart:hover {
			background: url(../images/btn_add_to_cart_sprite.png) no-repeat bottom left;
			width: 105px;
			height: 29px;
		}
		.enlarge {
			background: url(../images/btn_enlarge.jpg);
			width: 357px;
			height: 17px;
		}
		.enlarge:hover {
			background: url(../images/btn_enlarge_over.jpg);
			width: 357px;
			height: 17px;
		}
		
		#productImageDiv img{
		
		}
		#productImageDiv
		{
			padding: 5px;
			background: #E6E6E6;
		}
		#productArt{
			float:left;
			position:relative;
			display:block;
			top: 10px;
		}
		.productPage {
			padding-bottom: 40px;
			height:auto;
		}
		
		.productPage .column1{
			width: 358px;
			float:left;
			
		}
		.productPage .column2{
			width: 403px;
			float:left;
			height:auto;
			
		}
		.productPage p, .productPage h4, .productPage ul{
			margin: 8px 50px;
		}
		.productPage h4{
			color: #49A9A6;
			font-size: 1.1em;
			font-weight: bold;
		}
		.productPage .price {
			color: #49A9A6;
			font-size: 2.1em;
			font-weight: bold;
		}
		.productPage #thumnails{
			position:relative;
			top: 10px;
			right: 0px;
			width: 167px;
			float:right;
		}
		.productPage .thumb{
			border: 1px solid #CCCCCC;
			float:left;
			margin:0px 0px 5px 5px;
		}
		.productPage .thumb img{
			margin: 2px;
		}
		.productPage .collectionDiv{
			margin: 8px 50px; 
		}
		.whiteborder {
			background: transparent url(../images/white_border.gif) repeat-x;
			height: 5px;
			padding:0px;
			margin:10px 50px;
		}
		/*This following style is currently an alternative. Eliminated from original design*/
		.greyborder {
			background: transparent url(../images/grey_border.gif) repeat-x;
			height: 5px;
			padding:0px;
			margin:10px 50px;
		}
		/* This border is to be used for all lines on product page */
		.greyborder2 {
			background: transparent url(../images/grey_border2.gif) repeat-x;
			height: 5px;
			padding:0px;
			margin:10px 50px;
		}
		#expandLink{
			cursor:pointer;
			text-indent: 1.1em;
			background: url(../images/arrow_down.gif) no-repeat 1px;
		}
		#expandLink.off{
			background: url(../images/arrow.gif) no-repeat 1px;
		}
/* End Produt Pages Styles */


/* Start Produt Main Styles */
		.productMain .collectionDiv{
			margin: 10px auto;
			width: 500px;
			text-align:center;
			
		}
		#productGrid{
			border: #FFFFFF 1px solid;
			width: 694px;
			padding: 2px;
			margin 0px auto;
			display:inline-block;
		}
		#productGrid h2{
			background: #545454;
			width: 100%;
			margin 0;
			padding: 5px 0;
			font-size: 1.5em;
			font-weight:bold;
			color: #FFFFFF;
			text-indent: 10px;
			clear:both;
		}

/* End Product Main Styles */

/* The four buttons*/
		.productgreen{
			background: transparent url(../images/product_main/product_green_sprite.jpg) no-repeat left top;
			width: 347px;
			height: 232px;
		}
		.productgreen:hover{
			background: transparent url(../images/product_main/product_green_sprite.jpg) no-repeat left bottom;
		}
		
		.productbeige{
			background: transparent url(../images/product_main/product_beige_sprite.jpg) no-repeat left top;
			width: 347px;
			height: 232px;
		}
		.productbeige:hover{
			background: transparent url(../images/product_main/product_beige_sprite.jpg) no-repeat left bottom;
		}
		
		.productbrown{
			background: transparent url(../images/product_main/product_brown_sprite.jpg) no-repeat left top;
			width: 347px;
			height: 232px;
		}
		.productbrown:hover{
			background: transparent url(../images/product_main/product_brown_sprite.jpg) no-repeat left bottom;
		}
		
		.productgrey{
			background: transparent url(../images/product_main/product_grey_sprite.jpg) no-repeat left top;
			width: 347px;
			height: 232px;
		}
		.productgrey:hover{
			background: transparent url(../images/product_main/product_grey_sprite.jpg) no-repeat left bottom;
		}
		
		.productblue{
			background: transparent url(../images/product_main/product_blue_sprite.jpg) no-repeat left top;
			width: 347px;
			height: 232px;
		}
		.productblue:hover{
			background: transparent url(../images/product_main/product_blue_sprite.jpg) no-repeat left bottom;
		}
		
		.productpink{
			background: transparent url(../images/product_main/product_pink_sprite.jpg) no-repeat left top;
			width: 347px;
			height: 232px;
		}
		.productpink:hover{
			background: transparent url(../images/product_main/product_pink_sprite.jpg) no-repeat left bottom;
		}

		.productpurple{
			background: transparent url(../images/product_main/product_purple_sprite.jpg) no-repeat left top;
			width: 347px;
			height: 232px;
		}
		.productpurple:hover{
			background: transparent url(../images/product_main/product_purple_sprite.jpg) no-repeat left bottom;
		}
		
		.productred{
			background: transparent url(../images/product_main/product_red_sprite.jpg) no-repeat left top;
			width: 347px;
			height: 232px;
		}
		.productred:hover{
			background: transparent url(../images/product_main/product_red_sprite.jpg) no-repeat left bottom;
		}
				
/* End Produt Main Styles */


/* Start Make your own Bag */
		.makeyourownbag img {
			display:block;
			margin: 20px auto;
		}
		textarea, select, .formSubmit .formElements, input{
			background: #E6E6E6;
			border: none #000000;
			margin-bottom: 10px;
			width:90%;
		}
		.formSubmit textarea{
			height: 80px;
		}
		.formSubmit p{
			color: #49A9A6;
			margin-bottom: 10px;
		}
		.columsTwo {
			width: 49%;
			float:left;
		
		}
		.border-left {
			border-left: solid 1px #E6E6E6; 
		}
		.columsTwo p {
			margin: 5px 10px 5px 40px;
		}
		.formSubmit p{
			margin: 5px 0px 5px 25px;
		}
		.formSubmit .submit {
			background: url(../images/btn_submit.jpg) no-repeat;
			width: 83px;
			height: 19px;
			margin-bottom: 0px;	
		}
		.formSubmit .submit:hover {
			background: url(../images/btn_submit_over.jpg) no-repeat;
			cursor:pointer;
		}
		.formSubmit #HowOther{
			display:none;
		}
		#result {
			width: 100%;
			color:#FF0000;
			clear:both;
		}
/* End Make your own Bag */

/* Start About Us */
		.aboutus img {
			display:block;
			margin: 20px auto;
		}
/* End About Us */

/* Start Q&A */
		.questionandaanswer{
			
		}
		.questionandaanswer img{
			display:block;
			margin: 20px auto;
		}
		.questionandaanswer p{
			margin: 20px 40px;
		}
		.questionandaanswer .question1{
			color: #529B3D;
			font-weight: bold;
		}
		.questionandaanswer .question2{
			color: #8CBEA0;
			font-weight: bold;
		}
		.questionandaanswer .question3{
			color: #FA9005;
			font-weight: bold;
		}
		.questionandaanswer  table{
			margin: 5px 40px;
			border: 1px solid #000000;
			padding:0px;
			text-align:center;
		}

/* End Q&A */