@charset "utf-8";
/* CSS Document */
/* UNIVERSAL STYLES */

body{
	background-color:#fffbf0;
	margin:0px;
	font-family:'Jura', Arial, Helvetica, sans-serif;
	font-size:1em;
	color:#2d2c1f;
	}
a{
	color:#2d2c1f;
	text-decoration:none;
	outline: 0;
	}
a:visited{
	color:#2d2c1f;
	text-decoration:none;
	}
a:hover{
	color:#2d2c1f;
	text-decoration:none;
	}
H2{
	letter-spacing:0.4em;
	font-size:1em;
	}
.panelTitle{
	letter-spacing:0.2em;
	font-size:1.1em;
	font-weight:bold;
	}
TD{
	font-size:0.8em;
	}
TD.stdText{
	font-size:1em;
	}

.tile{
	width:250px;
	height:250px;
	float:left;
	margin:5px;
	}
.titleRow{
	background-color:#2d2c1f;
	color:#fffbf0;
	font-size:1em;
	padding: 3px;
	}
.titleDiv{
	color:#fffbf0;
	font-size:1em;
	padding: 3px;
	}
/* GENERAL DIVS  FOR ALL SCREENS*/

#cover{
	position:fixed;
	z-index:200;
	height:100%;
	width:100%;
	display:block;
	background-color:#fffbf0;
	text-align:center;
	padding-top:120px;
	transition: opacity .8s ease-in-out;
    -moz-transition: opacity .8s ease-in-out;
    -webkit-transition: opacity .8s ease-in-out;
	}

#fullProd{
	position:fixed;
	top:75px;
	background:no-repeat;
	width:126px; 
	height:131px; 
	padding:87px 100px 197px 111px; 
	margin-top:40px; 
	margin-left:7px;
	z-index:20;
	}

#infoButton{
	font-size:24px;
	position:fixed;
	top:510px;
	margin-left:320px;
	z-index:40;
	}
#optionsButton{
	font-size:24px;
	position:fixed;
	margin-left:320px;
	z-index:40;
	display:none;
	}
#addButton{
	font-size:24px;
	position:fixed;
	margin-left:320px;
	z-index:40;
	display:none;
	}
#infoPanel, #advicePanel, #optionsPanel, #addPanel{
	color:#fffbf0;
	background: #2d2c1f;
	background: rgba(45,44,31,.9);
	border-radius: 5px;
	position:fixed;
	display:none;
	z-index:35;
	width:319px;
	height:388px;
	margin-left:2px;
	margin-top:120px;
	padding:15px;
	}

div.buttonContainer{
	float:left;
	margin-left:3px;
	margin-bottom:3px;
	}
	
#selectors{
	position:fixed; 
	z-index:30; 
	margin-left:-3px; 
	margin-top:75px;
	}
	
div.selectButton{
	border:1px solid #2d2c1f; 
	padding:2px; 
	margin-top:3px;
	margin-bottom:3px
	z-index:30; 
	cursor:pointer; 
	width:110px;
	text-align:center;
	font-size:12px;
}
div.selectList{
	display:block;
	margin: 0;
	height:0;
	transition:height 0.4s;
	overflow:hidden;
	z-index:30;
	position:absolute;
	text-align:left;
	background-color:#d9d9c7;
	font-size:12px;
	line-height:160%;
	padding:3px;
	width:110px;
	}
.selectListItem{
	width:100%; 
	display:block; 
	border-bottom:solid 1px #fffbf0;
	}

.CTA{
	position:fixed; 
	margin-left:80px; 
	text-align:center; 
	width:335px; 
	background-color:#2d2c1f; 
	padding:10px; 
	letter-spacing:0.4em; 
	font-size:1em; 
	color:#fffbf0;
	z-index:40;
	cursor:pointer;
	}
	
#basketAddCTA{
	top:604px;
	margin-left:0px; 
	}
	
.priceBanner{
	position:fixed;
	top:545px;
	margin-left:0px; 
	text-align:center; 
	width:335px;
	padding:10px; 
	letter-spacing:0.4em; 
	font-size:1.5em; 
	z-index:40;
	border-top:solid 1px #2d2c1f;
	border-bottom:solid 1px #2d2c1f;
	}

.banner{
	position:fixed; 
	margin-left:17px; 
	text-align:center; 
	width:335px; 
	background-color:#d9d9c7; 
	padding:10px; 
	letter-spacing:0.4em; 
	font-size:0.9em; 
	z-index:40;
	}
	
#basketBanner{
	width:315px;
	background-color:#fffbf0;
	}
#designNameBanner{
	margin-left:0px; 
	margin-top:36px;
	}
#basketHeaderText{
	display:block; 
	float:left; 
	width:305px;
	}

#basketCloseButton{
	display:block; 
	float:left; 
	width:10px;
	color:#2d2c1f;
	}

#basketTable{
	margin-left:20px; 
	margin-top:30px;
	}
	
table.basketTableClass{
	width:300px;
	}
	
#basketFooter{
	width:315px; 
	margin: 30px 0 30px -3px;
	}

tr.basketDesignRow{
	background-color:#fffbf0;
	color:#2d2c1f;
	padding: 3px 0 3px 5px;
	font-size:20px;
	}
	
tr.basketTotalRow{
	background-color:#fffbf0;
	color:#2d2c1f;
	padding: 3px 0 3px 5px;
	font-size:24px;
	}
tr.basketDivider{
	colour:#2d2c1f;
	width:100%;
	}
	

#ccNote{
	display:block;
	width:315px;
	text-align:center;
	margin-top:30px;
	font-size:12px;
	}
#ccIcons{
	font-size:22px;
	}

/*TOOLTIPS*/

.tooltip{
   			display: inline;
    		position: relative;
		}
		
  .tooltip:hover:after{
	  background: #2d2c1f;
	  background: rgba(45,44,31,.8);
	  border-radius: 5px;
	  bottom: 26px;
	  color: #fffbf0;
	  content: attr(title);
	  left: 20%;
	  padding: 5px 15px;
	  position: absolute;
	  z-index: 98;
	  width: 220px;
  }
  
  .tooltip:hover:before{
	  border: solid;
	  border-color: #2d2c1f transparent;
	  border-width: 6px 6px 0 6px;
	  bottom: 20px;
	  content: "";
	  left: 50%;
	  position: absolute;
	  z-index: 99;
  }

.midFont{
		font-size:14px;
	}
/* GENERAL DIVS - SET FOR SCREENS OVER 1299 - ADJUSTMENTS FOR SMALLER SCREENS COME LATER */

#col_1_2{
float:left;
visibility:hidden;
margin-left:-5px;
margin-right:10px;
margin-top:176px;
	}

#col_3{
	padding-top:2px;
	width:315px;
	margin-top:0px; 
	margin-left:825px;
	background-color:#fffbf0;
	}

#topMenu{
	position:fixed; 
	background-color:#d9d9c7; 
	padding: 6px 0px 6px 0px; 
	font-size:12px; 
	text-align:right; 
	z-index:80;
	}

#wrapper{
	width:1185px; 
	position:relative; 
	margin:0px auto; 
	display:block;
	}

#parent{
	display: block; 
	margin: 0px auto; 
	width: 1185px;
	}

#header{
	position:fixed; 
	width:770px; 
	margin-top:24px;
	background-color:#fffbf0;
	z-index:1;
	}
	
#designTiles{
	margin-right:auto;
	margin-left:auto;
	width:780px;
	}

#logo{
	background-image:url(images/logoH.png);
	margin-top:0px;
	margin-left:3px;
	width:764px;
	height:156px;
	margin-bottom:5px;
	top:0px;
	}
	
#vLine{
	position:fixed; 
	margin-left:795px; 
	margin-top:43px; 
	height:600px; 
	border-left:solid 1px #2d2c1f;
	}

#overlay{
	position:fixed;
	display:block;
	margin: 0;
	height:0;
	transition:height 0.5s;
	overflow:hidden;
	z-index:100;
	text-align:left;
	background-color:#d9d9c7;
	font-size:12px;
	line-height:160%;
	padding:0px;
	width:362px;
	margin-left:823px;
	top:25px;
	border-top:solid 1px #2d2c1f;
	}
	
#basketContent{
	position:fixed;
	top:43px;
	margin-left:820px;
	width:335px;
	z-index:160;
	}
#fbShare{}
/* DIVS FOR LAPTOPS & TABLETS AT OR OVER 1024px*/
@media screen  and (min-width: 1024px) and (max-width: 1299px) {

#fbShare{
	display:none;
	}

#col_1_2{
margin-left:0px;
margin-right:5px;
margin-top:126px;
	}
	
#col_3{
	margin-left:585px;   
	}
	
#wrapper{
	width:1024px;  
	}

#parent{
	width: 1024px;   
	}

#header{
	width:520px;   
	}

#designTiles{
	width:520px;    
	}

#logo{
	background-image:url(images/logoH_med.png);
	margin-left:3px;
	width:520px;
	height:106px;
	margin-bottom:5px;
	top:0px;
	}

#vLine{
	margin-left:555px;  
	margin-top:43px; 
	}

#overlay{
	margin-left:583px;
	top:25px;
	}
	
#basketContent{
	margin-left:580px;
	}
}

/* DIVS FOR TABLETS & PHONES AT OR OVER 568px*/
@media screen and (min-width: 568px) and (max-width: 1023px){
	
#fbShare{
	display:none;
	}
	
#col_1_2{
margin-left:0px;
margin-right:5px;
margin-top:126px;
	}
	
#col_3{
	margin-left:5px;
	visibility:visible;
	width:355px;
	z-index:110;
	height:400px;
	}

#wrapper{
	width:520px;  
	}

#parent{
	width: 520px;   
	}

#header{
	width:520px;
	margin-left:auto;
	margin-right:auto;
	}

#designTiles{
	width:520px;    
	}

#logo{
	background-image:url(images/logoH_med.png);
	width:520px;
	height:106px;
	margin-bottom:5px;
	top:0px;
	}

#vLine{
	border:none;
	margin-left:0;
	display:none;
	}

#overlay{
	margin-left:auto;
	margin-right:auto;
	top:25px;
	width:522px;
	z-index:15;
	}
	
#basketContent{
	margin-left:103px;
	}

#basketBanner{
	margin-left:0px;
	}
	
#basketTable{
	margin-left:3px;
	}
#basketFooter{
	/*margin: 30px 0 30px -3px;*/
	}
#fullProd{
	position:fixed;
	top:75px;
	margin-top:52px; 
	margin-left:7px;
	z-index:20;
	}

#infoPanel{
	margin-top:118px;
	}

#infoButton{
	top:512px;
	margin-left:323px;
	}

#designNameBanner{
	width:335px;
	background-color:#d9d9c7;
	color:#2d2c1f;
	margin-left:0px; 
	margin-top:36px;
	}
	
#designNameText{
	display:block; 
	float:left; 
	width:315px;
	color:#2d2c1f;
	}

#designNameCloseButton{
	display:block; 
	float:left; 
	width:10px;
	color:#2d2c1f;
	background-color:#d9d9c7;
	}
#underlay{
	position:fixed;
	width:100%;
	height:1500px;
	background-color:#fffbf0;
	display:none;
	z-index:19;
	}
}



/* DIVS FOR PHONES AT OR OVER 320px & under 568px */
@media screen and (min-width: 320px) and (max-width: 567px){

#fbShare{
	display:none;
	}
	
#topMenu{
	text-align:center;
	}	
	
#col_1_2{
margin-left:0px;
margin-right:0px;
margin-top:93px;
	}
	
#col_3{
	margin-left:0px;
	visibility:visible;
	width:320px;
	z-index:110;
	/* height:800px; */
	}

#wrapper{
	width:320px;  
	}

#parent{
	width: 320px;
	margin-left:auto;
	margin-right:auto;
	}

#header{
	width:320px;
	margin-left:auto;
	margin-right:auto;
	}

#designTiles{
	width:320px;    
	}

#logo{
	background-image:url(images/logoH_sm.png);
	width:320px;
	height:62px;
	margin-bottom:5px;
	margin-top:5px;
	margin-left:0px;
	}

#vLine{
	border:none;
	margin-left:0;
	display:none;
	}

#overlay{
	margin-left:auto;
	margin-right:auto;
	top:25px;
	width:320px;
	z-index:15;
	}
	
#basketContent{
	margin-left:auto;
	margin-right:auto;
	}

#basketBanner{
	margin-left:5px;
	width:290px;
	}

#basketHeaderText{
	width:275px;
	padding-left:5px;
	}
	
#basketTable{
	margin-left:5px;
	}
	
table.basketTableClass{
	width:310px;
	}

#basketFooter{
	/*margin: 30px 0 30px -3px;*/
	width:290px;
	margin-left:0px;
	}
#fullProd{
	/*position:fixed; @~@~@*/
	position:absolute;
	top:200px; /* @~@~@ */
	margin-top:0px; 
	margin-left:-10px;
	z-index:20;
	}

#infoPanel, #optionsPanel, #addPanel{
	/*position:fixed; */
	position:absolute;
	margin-top:200px;
	width:252px;
	height:348px;
	margin-left:4px;
	padding:30px;
	z-index:35;
	}
#optionsPanel, #addPanel{
	text-align:center;
	}

.smButton{
	padding:5px;
	border:1px solid #2d2c1f;
	cursor:pointer;
	margin-top:7px;
	margin-bottom:7px;
	margin-left:auto;
	margin-right:auto;
	background-color:#fffbf0;
	color:#2d2c1f;
	}
	
#infoButton{
	position:absolute;
	top:205px;
	margin-left:293px;
	z-index:35;
	}
	
#optionsButton{
	display:none; /* @~@~@ */
	top:119px;
	margin-left:293px;
	z-index:45;
	}
	
#addButton{
	display:none;  /* @~@~@ */
	top:153px;
	margin-left:293px;
	z-index:45;
	}
#designNameBanner{
	position:absolute;
	width:290px;
	background-color:#d9d9c7;
	color:#2d2c1f;
	margin-left:5px; 
	margin-top:36px;
	}
	
#designNameText{
	display:block; 
	float:left; 
	width:275px;
	color:#2d2c1f;
	padding-left:5px;
	}

#designNameCloseButton{
	display:block; 
	float:left; 
	width:10px;
	color:#2d2c1f;
	background-color:#d9d9c7;
	}
	
.banner{
	letter-spacing:0.3em; 
	font-size:0.8em; 
	}
	
#basketAddCTA{ 
	position:absolute;
	/*top:525px; @~@~@ */
	top: 156px;  /* @~@~@ */
	margin-left:5px; 
	width:290px;
	z-index:38;
	}
	
.priceBanner{
	position:absolute;
	/*top:485px; @~@~@ */
	top: 120px; /* @~@~@ */
	margin-left:5px;  
	width:298px;
	padding:6px; 
	letter-spacing:0.3em; 
	font-size:1em; 
	z-index:38;
	}
	
.tile{
	width:150px;
	height:150px;
	margin:5px;
	}
/* BUTTON STUFF */
div.buttonContainer{
	float:left;
	margin-left:5px;
	margin-bottom:3px;
	}

#selectors{
	position:absolute;
	/* position:fixed; @~@~@ */
	top: 70px; /* @~@~@ */
	z-index:40;
	width:317px;
	margin-left:1px;
	margin-top:5px; /* @~@~@ from 155px 
	/*background-color:#00ff00; */
	display:block; /* @~@~@ */
	}



div.selectButton{
	background-color:#fffbf0;
	border:1px solid #2d2c1f; 
	padding:2px; 
	margin-top:3px;
	margin-bottom:3px;
	z-index:40; 
	cursor:pointer; 
	width:94px; /* @~@~@  from 154px */
	text-align:center;
	font-size:14px;
}
div.selectList{
	display:block;
	margin: 0;
	height:0;
	transition:height 0.4s;
	overflow:hidden;
	z-index:40;
	position:absolute;
	text-align:left;
	background-color:#d9d9c7;
	font-size:14px;
	line-height:160%;
	padding:2px;
	width:94px; /* @~@~@ from 154px */
	}
.selectListItem{
	width:100%; 
	display:block; 
	border-bottom:solid 1px #fffbf0;
	}
#underlay{
	position:fixed;
	width:100%;
	height:1500px;
	background-color:#fffbf0;
	display:none;
	z-index:19;
	}

}

/* DIVS FOR HIGH DENSITY */
/*
*/
@media screen and (min-width: 320px) and (max-width: 567px) and (-webkit-min-device-pixel-ratio: 2),
screen and (min-width: 320px) and (max-width: 567px) and (-webkit-min-device-pixel-ratio: 2),
screen and (min-width: 320px) and (max-width: 567px) and (   min--moz-device-pixel-ratio: 2),
screen and (min-width: 320px) and (max-width: 567px) and (     -o-min-device-pixel-ratio: 2/1),
screen and (min-width: 320px) and (max-width: 567px) and (        min-device-pixel-ratio: 2),
screen and (min-width: 320px) and (max-width: 567px) and (                min-resolution: 192dpi),
screen and (min-width: 320px) and (max-width: 567px) and (                min-resolution: 2dppx)
	{
#logo{
	background-image:url(images/logoH_sm_x2.png);
	background-size: 320px 62px;
	width:320px;
	height:62px;
	margin-bottom:5px;
	margin-top:5px;
	margin-left:0px;
	
	}
	}