body {
 	margin:0;
	
/* 	margin-left:0%;
 	margin-right:0%;
    margin-bottom:0%;*/

	padding: 0;
	
/*	background-color: #C2D7EB;
	background-color: #7AA3CB;*/
	background-color:#D9D9EC;
	vertical-align:middle;
	text-align:center;
}

body p {margin-top:0px;  }

#topspacer {
	position:relative;
	top:0em;
	margin:0px auto;
	padding: 0px 0px 0px 0px; 

	width:80%;
	height:40px;
}


/*  Keep outerwrapper as set width!!********************/
#outerwrapper {
	position:relative;
	top:0em;
	margin:0px auto;
	padding: 0px 0px 0px 0px; 
	
	width:80%;
	height:auto;

	border:#6c98c0 1px solid;
}

#outerwrapper2 {
	position:relative;
	top:0em;
	margin:0px auto;
	padding: 0px 0px 0px 0px; 
	
	width:80%;
	height:auto;

	border:#999999 1px solid;
}

#nav_divider  {

 		border-bottom:#6c98c0 1px solid;

}



#products {

	visibility:hidden;
	}


/* NOT using float this time, but watch this in case need to */
/*float setting stops a line showing above outerbox and outertop in Mozilla when the <p> tag is used within mainbox - don't ask me why, something to do with block elements*/

#contentbox {
	position:relative;
	top:0em;
	margin:0px auto;
	padding:0px;
	
	width:100%;		
	height:auto;
	
	background-color: #FFFFFF;		
		
/*	z-index:2;*/
}


/*#header_content_box  {

	position:relative;
	border-top: solid 1px #7aa3cb;
	background-color:#FFFFFF;
	}


#header_display_1eft {
		position:relative;
		float:left;
		
		width:57%;
		height:auto;
		
		padding-top:0px;
		padding-bottom:0px;
		
		margin-left:0px;
		margin-right:0px;
		margin-top:0px;
		margin-bottom:0px;
		
		border:#accbe8 solid 1px;
		
		text-align:center;
}

#header_display_right {
		position:relative;
		float:right;
		
		width:42%;
		height:auto;
		
		padding-top:0px;
		padding-bottom:0px;
		
		margin-left:0px;
		margin-right:0px;
		margin-top:0px;
		margin-bottom:0px;
		
		border:#accbe8 solid 1px;
		
		text-align:center;
}

*/




/* important! box-sizing: border-box;  ensures contentbox2 stretches to full 100% - not 100% minus padding */

#contentbox2 {
	position:relative;
	float:left;
	
	width:100%;
	height:auto;
	
	box-sizing: border-box;
	
	margin-top:0px;
	margin-bottom:0px;
	
	padding-left:20px;
	padding-right:20px;
		
	background-color: #FFFFFF;		

}




#contentbox2 h1 { 
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size: 1.1em;
	color:#B39D79; 

 }

#contentbox2 p {	
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	color:#666666;
	}


	
#contentbox .imageright {
	margin:0px;
	
	border-left:1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;

}	

#contentbox .imageleft {
	margin:0px;
	
	border-right:1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;

}
	
#product_content_box  {

	position:relative;	
	
	margin:0px;
	padding:0px;
		
	width:auto;

	}

#image_box  {
	position:relative;
	float:right;
	
	width:auto;

	border: solid 1px red;
	clear:both;
	}

#lower_content_box  {

	position:relative;
	
	margin:0px;
	padding:0px;
	
	border-top: solid 1px #7aa3cb;
	background-color:#FFFFFF;
	}

#product_display_outer_home {
		position:relative;
		float:left;
		
		width:22%;
		height:auto;
		
	/*	left:28px;*/
	
		padding-top:22px;
		padding-bottom:22px;
		
		margin-left:22px;
		margin-right:0px;
		margin-top:22px;
		margin-bottom:22px;
		
		border:#accbe8 solid 1px;
		
		text-align:center;
 
}

#product_display_outer {
		position:relative;
		float:left;
		
		width:21%;
		height:auto;
		
	/*	left:28px;*/
	
		padding-top:22px;
		padding-bottom:22px;
		
		margin-left:22px;
		margin-right:0px;
		margin-top:22px;
		margin-bottom:22px;
		
		border:#accbe8 solid 1px;
		
		text-align:center;
 
}



#product_display_photo {
		position:relative;
		float:none;
		
		max-width:200px;
		height:auto;
		
		margin-left:auto;
		margin-right:auto;
		margin-top:0px;
		margin-bottom:0px;		
	
		border:1px solid #ddd;
		
		/* adds curved corners*/
		border-radius:4px;
		-webkit-transition:all .2s ease-in-out;
		-o-transition:all .2s ease-in-out;
		transition:all .2s ease-in-out;
		
		padding-bottom:4px;
		padding-left:4px;
		padding-right:4px;
		padding-top:4px;	
		
		}	
		

#product_display_photo:hover,
#product_display_photo:focus,
#v_photo:active {
  border-color: #69A3D6;
}		
	
	
#product_display_desc {
		position:relative;
		float:none;
		
		max-width:200px;
		height:auto;
		
		margin-left:auto;
		margin-right:auto;
		margin-top:0px;
		margin-bottom:0px;
		
	/*	border:1px solid #ddd;*/
		}		
		
		
#product_display_desc .title {
		padding-top:5px;
		
		color:#337ab7;
/*		color: rgb(51, 122, 183);*/
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 16.9px;
		font-weight: 500;
		line-height: 18.5833px;
		}	
		
#product_display_desc .desc {
		padding-top:3px;
		
		color:#7f7f7f;
/*		color: rgb(127, 127, 127); */
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 13px;
		font-weight: 500;
		line-height: 18.5833px;
		}			
		
		
		
		
#product_display_text desc {
		color:#337ab7;
/*		color: rgb(51, 122, 183);*/
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 16.9px;
		font-weight: 500;
		line-height: 18.5833px;
		}					







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



/*.img-responsive  {

	display:block;
	max-width:100%;
	height:auto;

	}*/
	
	
	


/********SHOW HIDE OPTIONS FOR diff screen sizes  **********************************************************/

#mobile_nav_box {
		position:relative;
		top:0em;
		margin:0px auto;	
				
		width:100%;
		height:auto;
		
		background-color:#dbcebb;		
 		border-bottom:#6c98c0 1px solid;

}

 

/* Show banner mobile only on small screen (mobiles etc) */
@media (min-width: 1120px) {	

.larger_screen  {
	display:inherit;
   }  
   
.smaller_screen  {
	display:none;   
	}
   
 }
 
 
   
/* Style banner mobile for small screen (mobiles etc) */
@media (max-width: 1120px)  {	

.larger_screen  {
	display:none;
   }  
   
.smaller_screen  {
	display:inherit;   
	}
	
	
	
#product_display_outer_home {

		width:20%;
		height:auto;
		
		padding-top:22px;
		padding-bottom:22px;
		
		margin-left:22px;
		margin-right:0px;
		margin-top:22px;
		margin-bottom:22px;
		
		border:#accbe8 solid 1px;
		
		text-align:center;
 
}	
   
}   


/* Style banner mobile for small screen (mobiles etc) */
@media (max-width: 980px)  {	

	
#product_display_outer_home {

		width:42%;
		height:auto;
		
		padding-top:22px;
		padding-bottom:22px;
		
		margin-left:22px;
		margin-right:0px;
		margin-top:22px;
		margin-bottom:22px;
		
		border:#accbe8 solid 1px;
		
		text-align:center;
 
}	
   
}  


/*@media (min-width: 660px) and (max-width: 790px) {	


.larger_screen  {
	display:none;
   }  
   
.smaller_screen  {
	display:inherit;   
	}

}	*/
   


/*************************NAVIGATION *****************************************/
/*************************Top nav start *****************************************/
/*replaces bullet points with bulletless list*/  

/* Only used on version where I put top nav as text

.topnavpb {
	position:relative;
	list-style:none;
	list-style-position:outside;
	margin:0px;
	padding:0px;
	text-align:left;
	
	font-family:"baskerville-urw", serif;
	font-size:140%;
	text-decoration: none;
	font-style: italic;
}

.topnavpb li {
	display:inline;
	position: relative;
	left:5%;
	
	padding-top:10px;
	padding-bottom:10px;

	margin-right:12px;
	margin-left:12px;
	
	line-height:3.5em;
	
	color:#333333;
	text-transform: uppercase;
	text-decoration: none;	
	
}

.topnavpb li a {
	color:#333333;
	text-decoration: none;	
	
}  */





/*****************************************Top nav end *****************************************/




/*****************************FOOTER START*****************************************/

/*margin:0px auto; is really important to getting this to display centrally*/


#footer {
	position:relative;
	top:0em;
	margin:0px auto;
	
	float:left;
	
	padding:0px;

	width:100%;		
	height:auto;

 	text-align:left;

	background-color:#c0ae91;
	/*border-bottom: solid 1px #000000;*/
}


.footer_text_left{
	position:relative;
	float:left;
	width:auto;
    text-align:left;
 

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;		
/*	font-family: Verdana, Arial, Helvetica, sans-serif;*/
	color:#EEEEEE;
	font-size: 1em;
	line-height:1.4em;
	
	padding-left:35px;
	padding-right:25px;
	padding-top:8px;
	padding-bottom:8px;

}

.footer_text_left a {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;		
	color:#EEEEEE;
	font-size: 1em;
	line-height:1.4em;
	
	text-decoration:none;

}


.footer_text_right {
	position:relative;
	float: right;
	width: 50%;	
	margin-right:0px;
	
	padding-left:35px;
	padding-right:25px;
	padding-top:8px;
	padding-bottom:8px;
	
    text-align:right;
	
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;		
/*	font-family: Verdana, Arial, Helvetica, sans-serif;*/
	color:#EEEEEE;
	font-size: 1em;
	line-height:1.4em;
	
}


.footer_text_right a:link {color:#EEEEEE; text-decoration:none;}
.footer_text_right a:visited {color:#EEEEEE; text-decoration:none;}

/*****************************FOOTER END*****************************************/

/*****************************BOX clear options*****************************************/

/*you need this - even though it is hidden, to make your outer-contentbox whatever you call this - stretch below the longest floating column*/
#headerclear {
	clear:both;
	line-height:0px;
	height:0px;
	visibility:hidden;
}


#footerclear {
	clear:both;
	line-height:0px;
	height:0px;
	visibility:hidden;
}

.boxclear {
	clear:both;
	line-height:0px;
	height:0px;
	visibility:hidden;
}


/*****************************BOX clear options END*****************************************/