body {overflow:hidden; 	padding:0;margin:0;	height:100%;width:100%;font-size:13px; color:#d0d0d0; font-family:Arial, Helvetica, sans-serif;background:url('../library/bg2.jpg'); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
td {font-family: Arial, Helvetica, sans-serif;font-size: 13px;}

/* - Reset - */
html, body, div, a, p, h1, h2, h3, h4, h5, span {margin:0; border:0; padding:0; outline:none; }
img{border:0;}
table{border-collapse:collapse}
form{margin:20px 0}

/* STYLES
--------------------------------------------------------- */

/* - Backgrounds - */
#bgimg {position:absolute;z-index: -1; max-width:100%;}
.logo_responsive, .angle-edge_responsive, .tagline_responsive {display:none;}

#realBody{position:absolute;z-index: 5;	overflow: auto;	height:100%;width:100%;background:url(../library/raster.png) repeat;}

/* - Container - */
#container{width:940px;height:auto;padding:0 10px; margin:0 auto 0 0; position:relative; float:left}

	/* - Header - */
	#header{width:100%; height:161px; float:left}
	
	/* - Top Image / Logo / Tagline - */
	#header-logo img{margin:10px 0 0 0;}
	.header_logo {height:auto; width:100%;}
	#top-pic{position:absolute;top:0;right:0;}
	#tagline{position:absolute;top:120px; left:340px}

	/* - Main Nav - */
	#nav {background:url(../library/content-bg.png) repeat; height:auto; padding:10px; float:left; list-style:none; margin:0; width:190px; /*position:absolute;top:170px; left:10px*/}
	#nav li {margin:0; padding:0;}
	#nav li a {display:block; font-size:16px; font-family:"Franklin Gothic Demi Cond"; font-weight:600; padding:10px; width:170px;}
	#nav li a:link, #nav li a:visited, #nav li a:active {color:#bcbcbc; text-decoration:none}
	#nav li a:hover {background:#000; color:#fff;}
	
	#mobile_nav {display:none;}
	#closeM {display:none;}	
		
	/* - Wrapper - */
	#wrapper{width:100%; height:auto; float:left;}
	
	/* - Content Area - */
	#content{width:700px; min-height:400px;/*position:absolute;top:170px; left:220px; */position:relative;float:right;background:url(../library/content-bg.png) repeat;padding:10px 10px 40px 10px;}
		#content ul {padding:0 0 0 20px; margin:0 0 10px 0;}
		#content ul li{padding:2px 0;}
	
	/* - Footer - */							
	#footer{position:absolute;bottom:0px; left:10px;color:#545454}		
		
		#footer a:link, #footer a:visited, #footer a:active{color:#545454; }
		#footer a:hover{text-decoration:none}
	


/* MAIN LINKS
--------------------------------------------------------- */
a:link{color:#c09f74; text-decoration:underline}
a:visited{color:#c09f74; text-decoration:underline}
a:active{color:#c09f74; text-decoration:underline}
a:hover{color:#eacfab; text-decoration:underline}





/* TYPOGRAPHY
--------------------------------------------------------- */
h1, h2, h3, h4, h5{font-family:"Franklin Gothic Demi Cond"; font-weight:normal; color:#c09f74; padding:0 0 5px 0;margin:0 0 5px 0}
h1{font-size:26px;border-bottom:1px solid #c09f74;}
h2{font-size:23px;}
h3{font-size:21px;}
h4{font-size:19px;}
h5{font-size:17px;}
p{margin:0 0 15px 0;line-height:1.7}






/****************STYLING THE AREAS PRODUCED BY THE cms*************************/
/*by leaving the following empty the tags will be styled from your regular tags*/





/* ECOMMERCE SITES, PRODUCT LISTING
--------------------------------------------------------- */

div.cms_prod_listing{width:180px;border: solid 1px #A1FF43;float:left;	margin:10px;color: #774C4C;text-align: center;height: 220px;}/* the div containing each product  */

#cms_addedcart{border: solid 1px #E59497; width: 80%;margin-left: auto;margin-right:auto;background: #E9FDCE; text-align:center; }/*the DIV displaying the message when something has been added to the cart*/

select.cms_form_cart, input.cms_form_cart,submit.cms_form_cart{background: #E4FFCA; font-size: 14px;}/*form fields for the add to cart sections*/

p.error{font-weight: bold; color:#FF0000;}/*the errors shown when adding to cart*/




/* STYLINGT THE TABLE WHICH CONTAINERS THE CART ON THE DETAIL PAGE
--------------------------------------------------------- */
td.cart_header_normal{border: solid 1px #E28FD3;border-right:0px;text-align:center;background: #E4FFCA;height:30px;}/*header  / first row, all fields except last to the right*/
td.cart_header_last_right{border: solid 1px #E28FD3;text-align:center;background: #E4FFCA;}/*header  / first row, all fields except last to the right*/

td.cart_td_normal{border-left: solid 1px #E28FD3;border-bottom: solid 1px #E28FD3;}/* all td's except last to the right*/
td.cart_td_last_right{border-left: solid 1px #E28FD3;border-bottom: solid 1px #E28FD3;border-right: solid 1px #E28FD3;}/* td's  last to the right*/
td.cart_total_left{border:0; height: 30px;line-height: 200%;}/*main cart, total at the bottom*/
td.cart_total_right{border:solid 1px #E28FD3;border-top:0px; height: 30px;line-height: 200%;}/*main cart, total at the bottom*/


div.cms_special_offer{width: 100%;text-align:center;}

p.all_offers{}/*the p tag for the link to all offers*/




/* CHECKOUT SECTION ONLY
--------------------------------------------------------- */

		#checkout_container{width: 860px; margin-left:auto; margin-right:auto;padding:15px;}/*container contiing all elements for the checkout*/
					#checkout_step0_left{width: 99%;}/* the div containing the login palette for step 0, login or register*/
					#checkout_step0_right{width: 99%;}/* the div containing the login palette for step 0, login or register*/
					
			h1.checkout{font-size: 18px;color: #E28FD3;	background-image: url(library/bullet_li.gif);background-repeat: no-repeat;padding-left: 18px;}
			p.checkout_steps{}/*The tag showing the links to step by step*/
			p.checkout_general{}/*general p tags during checkout*/
			
			div.products_checkout{width: 90%; margin-left:auto; margin-right: auto; border: solid 1px red;}
			
			
			div.checkout_address{border:solid 1px black;padding:10px;width: 80%;margin-left:auto;margin-right:auto; color: #999999;}
			
			div.checkout_address_selected{border:solid 1px red;padding:10px;background: #FFFFE1}/* the address currently selected*/
			
			div.checkout_shipment{width: 90%;border: solid 1px red; background: #FFFFFF;margin-left:auto;margin-right:auto;}
			
			h2.checkout{font-size: 16px;color: #E28FD3;	background-image: url(library/bullet_li.gif);background-repeat: no-repeat;padding-left: 18px;}

.main_tr1{background: #F1E0EE}
.main_tr2{background: #E7F0D9}





/* CUSTOMER AREA
--------------------------------------------------------- */
p.cust_orders{margin-left: 100px;}/*showing the order detail*/
#cust_area{margin:15px;}/*the area where the content is*/




/* STYLING THE LINKS PAGE(S)
--------------------------------------------------------- */
h2.cms_links_cat{}/* Displays the links categories*/
p.cms_links{}/* Displays the actual link and description*/
a.cms_links{}/*Displays the actual links*/
p.cms_links_empty{}/*The line letting users know there is no links in the database if applicable*/




/* STYLING THE HELP/FAQ PAGE(S)
--------------------------------------------------------- */
p.cms_nofaq{}/*the line showing that there is no faq in the database*/
h3.cms_faq_category{margin-left: 40px;}/*the category of either help or FAQ*/
p.cms_faq_questions{margin-left: 60px;}/*the clickable questions on the faq or help*/
span.cms_faq_title{font-weight: bold;/*display:none;*/}/*this shows weather this is an help or faq, you can hide this using CSS if you do not want to show it*/
a.cms_faq_links{}/*all links within the FAQ section including the back to the top links*/
#cms_faq_spacer{height: 150px;}/*the div allowing you to include space between the last question and the first answer*/
p.cms_faq_answer_title{margin-left: 40px; font-weight:bold;}/*the title of the answer*/
p.cms_faq_answer_detail{margin-left: 50px;}/*the comment on the answer*/
p.cms_backtop{margin-left: 80px;}/*the P tag containing the back to top link*/
hr.cms_faq_hr{width: 50%;margin-left:auto;margin-right:auto;}




/* STYLING THE GOOGLE API MAP
--------------------------------------------------------- */
#cms_api{}




/* STYLING THE FORM FIELDS ON THE CONTACT FORM 
--------------------------------------------------------- */
input.cms_form, textarea.cms_form, radio.cms_form, select.cms_form, submit.cms_form{background: #fef8f1; font-size: 12px; margin:0 0 10px 0;border:1px solid #f4d3a7;color:#5e5140; font-family:Arial, Helvetica, sans-serif}
input.cms_form, textarea.cms_form{padding:7px;}
input.cms_form:hover, textarea.cms_form:hover, input.cms_form:focus, textarea.cms_form:focus{background:#f0d3ae;border:1px solid #fff}
#subm { width:auto; height:30px; background:#5c390b; border:2px solid #906123;color:#e8ceac;font-weight:bold; text-transform:uppercase; -moz-border-radius: 10px; -webkit-border-radius: 10px; cursor:pointer;  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);  text-shadow:0px 1px #8f642c }
#subm:hover{ background:#7f541b}
#subm:focus{position:relative; top:1px}


#cms_upload_window{border: solid 1px black; background: #FFFFE1;padding:15px;}



/* STYLING THE IMAGE GALLERY
--------------------------------------------------------- */
h2.cms_image_gallery{}/*displaying the categories of images*/
div.cms_photo_name{margin-bottom:5px;}/*name of the photo*/
div.cms_image_layout{width:160px; border: solid 1px black; margin:15px;text-align:center;padding-top:4px;padding-bottom:5px;float:left;}/*This is the div which contains the actual thumbnail with name etc*/
div.clearfloat{clear:both;}/*If you are floating the above div, then you might need to cancel the float at the end of category, you can do so by using this div*/
#cms_image_window{border: solid 1px black; width:300px; margin-top:5px;margin-left:auto;margin-right:auto; text-align:center;}/*div styling the container on the window for enlarged images*/
h1.cms_image_window{}/* displays the image name*/



/* STYLING THE NEWS
--------------------------------------------------------- */
p.cms_current_news{background-image:url(library/bullet_right.gif);background-repeat: no-repeat;padding-left:11px;margin-bottom:0px;}/*displays the listing of news*/
p.cms_current_news_desc{margin-top:0px;margin-left:25px;}/*small description just under the headline on the listing of news*/
p.other_news{}/*the p tag showing the link "to go to archive click here or to go to live news click here*/
h2.cms_news_headline{color: #9F57A4;margin-top:20px;}/*the headline on the news detail page*/
p.cms_news_back{}/*the back link /button on the news detail page*/




/* STYLING THE TESTIMONIAL PAGE
--------------------------------------------------------- */
div.testimonial_container{}/* full container surrounding each testimonial*/
p.testimonial_text{font-style:italic;}/* actual text*/
p.testimonial_name{font-weight: bold; }/* name and company with link*/
div.testimonial_bottom{	margin-top: 25px; margin-bottom: 25px;width: 100%; height: 5px;background-image: url(library/testimonials_separator.gif);	background-repeat: no-repeat;background-position: center;}/* after each testimonial */





/************ news ticker ***************/

#newsticker{width:280px;margin-left: 0px;height: 180px; }
#newsticker p{line-height:1.5!important; margin-bottom:15px;}
	.newsdetail{ background: #fff;}
.bloglink{text-decoration:none!important; color:#e0bb00!important; font-size:13px; line-height:1.3!important}		

#IE6_message{width: 800px;border:solid 1px red;position: absolute;left: 50%;margin-left: -400px; top: 200px; background:#F5F5F5;text-align:center;padding:20px;}

ol li{margin-left: 30px;}


#IE6_message{width: 800px;border:solid 1px red;position: absolute;left: 50%;margin-left: -400px; top: 200px; background:#F5F5F5;text-align:center;padding:20px;z-index: 1000; display:none;}



/* --- Image Slider --- */ 
.stepcarousel{position: relative;/*border: 5px solid #414A50;*/ overflow: scroll;width: 630px;height: 190px;margin:0 auto 20px auto}
.stepcarousel .belt{position: absolute;left: 0;top: 0;}
.stepcarousel .panel{float: left;overflow: hidden; margin: 0 15px 0 0;width: 208px; }



		
/*******************  COOKIE LAW  *****************/
	#cookie_button{width:50px;-webkit-border-radius:5px 0 0 0 ; -webkit-box-shadow:  0px 0px 3px 2px rgba(0, 0, 0, 0.4);box-shadow:  0px 0px 3px 2px rgba(0, 0, 0, 0.4); border-radius:5px 0 0 0; padding:10px;  z-index:9999; height: 70px; font-size:13px; font-weight:700; color:#fff; text-align:center; position:fixed ; right: 0px; bottom: 0px; background:#C6BDD6;/* for a change */;overflow: hidden; }
		#cookie_button:hover{color:#C6BDD6;}
	#cookie_content{width: 740px;  padding:5px 10px; height:auto; margin:0px 0 0 70px; background:#C6BDD6; color:#fff; font-size:14px; line-height:1.2}
		#cookie_content p {  margin:10px 30px 10px 10px; text-align:left;}
		#cookie_content p a{ color:#fff; text-decoration:none; font-weight:bold; }
		#cookie_content p a:hover{ text-decoration:underline;}
		#cookies_accept a{background:url(../library/cookies/tick.png) no-repeat right; display:block; float:right; margin:0 20px 0 0;  padding:5px 40px 5px 5px; color:#fff; text-decoration:none; font-size:14px; font-weight:bold;}
		#cookies_accept a:hover{ text-decoration:underline;}
	#cookie_button #cookies_title{font-weight: bold; margin:0 0 0 10px; font-size:16px;}
	
/******************  END COOKIE LAW  ****************/


		

/* ===============================================================
****** MEDIA QUERY **********
=============================================================== */


@media only screen and (max-width : 990px) {
	* {box-sizing:border-box;}
	
	#container {box-sizing:border-box; float:none; margin:0 auto; width:100%;}
		#header {float:none; height:auto; width:100%;}
		
		#wrapper {float:none; height:auto; text-align:center; width:100%;}	
			#nav {float:none; height:auto; min-height:41px; margin:0 0 5px; padding:0; width:100%;}
				#nav li {float:left; width:16%;}
				#nav li a {padding:10px 0; text-align:center; width:auto;}
			#content {float:none; padding:20px; width:100%;}
				.stepcarousel {height:190px; max-width:630px; width:100%;}
				#cms_api iframe {width:100%!important;}
				table {width:100%!important;}
				table tr {width:100%!important;}
			#footer {bottom:0; color:#545454; left:0; margin-top:20px; position:relative; text-align:center;}
			.captcha_img {width:50%;height:auto;}
			
}

@media only screen and (max-width : 767px) {
	.header_logo1 {display:none;}
	.logo_responsive, .tagline_responsive {display:block;}
		.logo_responsive {height:auto; margin:10px auto 15px; min-width:260px; width:100%;}
		.tagline_responsive {height:auto; margin:10px auto 15px; max-width:430px; min-width:260px; width:100%;}
	
/* turn menu to mobile menu*/
	#mobile_nav {background:#fff; background:rgba(255,255,255,.3); border:2px solid #fff; color:#fff; display:inline-block; font-size:18px; margin:10px auto; padding:3px 0; position:relative; text-align:center; text-decoration:none; text-transform:uppercase; width:260px;}
		.nav_menu { font-size:24px; position:relative; top:-3px;}
	#closeM {display:inline;}
	#nav {display:none;}
	#nav li {float:none; margin:0; width:100%; height:auto}
	#nav li a {background:#000/*url(../library/content-bg.png) repeat*/; border-bottom:1px solid gray; border-top:1px solid #fff; margin:0; padding:10px 0; width:100%;}
	.captcha_img {width:50%;height:auto;}

}


@media only screen and (max-width : 600px) {
	h1,h2,h3,h4,h5 {text-align:center;}
	#container {text-align:center;}
	input.cms_form, textarea.cms_form {width:100%;}
	td {display:block; text-align:center;}
	#strCAPTCHA {margin-bottom:10px; width:100%;}
	.captcha_img {width:80%;height:auto;}
}

@media only screen and (max-width : 430px) {
	#content img {height:auto; margin:0 auto; max-width:100%; text-align:center; width:100%;}
	#content form table tbody tr td img, #content p img.mandatory {width:20px;}
	#content form table tbody tr td .captcha_img {width:50%;height:auto;}
}