@font-face{ 
	font-family: 'modernpics-webfont';
	src: url('../fonts/modernpics-webfont.eot');
	src: url('../fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/modernpics-webfont.woff') format('woff'),
	     url('../fonts/modernpics-webfont.ttf') format('truetype'),
	     url('../fonts/modernpics-webfont.svg#webfont') format('svg');
}

/*GLMOD: To stop page jumping when browser adds or removes a scrollbar on short pages. It forces a permanent scrollbar.***************/
html { overflow-y: scroll; }


* { margin:0; padding:0; }
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object {
	border: 0;
}
body { 
  padding: 0; 
  background: #fff url("../images/bg.jpg") repeat-x; 
  font: 0.8em/1.5 "arial",sans-serif; 
  color: #354146; 
  text-align: center; 
}

a {color: #1666a3;}
a:link {color: #1666a3;}
a:hover {color: #0b4775;}

h1, h2, h3, h4, h5, h6 { margin: 15px 0 10px 0; }
h1 { font-size: 200%; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}
h1#logo a {color: #ced1d2; text-decoration: none; display: block;padding: 18px 0 17px; font-weight: normal;}
h1#logo a:hover {color: #fff;}
h2 { font-size: 130%; color: #354146;font-weight: bold; padding: 0;margin: 0; }
h3 { font-size: 120%; }
h4 { font-size: 120%; }
h5 { font-size: 100%; }

#layout { 
  text-align:left; 
}
#container { 
   clear: both;
  }
#intro{
   background: #e6e8e9; height: auto;
  }
#intro-in{
   width: 891px; 
   margin: 0 auto; 
   padding: 20px 0;
  }

#header {
	width: 891px;
	margin: 0 auto;
	background-image: url(../images/HeaderLogoWithHouzz_2016-17-18_No_Phone.png);
	background-position: right;
	background-repeat: no-repeat;
}

#headerparts {
	width: 891px;
	margin: 0 auto;
	background-image: url(../images/HeaderLogoWithHouzz_2016-17-18_No_Phone.png);
	background-position: right;
	background-repeat: no-repeat;
}
  
#nav {width: 891px; 
   margin: 0 auto; }
#nav ul {margin:0; padding:0; list-style:none; height: 35px;}
#nav ul li {float: left; display: block; margin: 0; padding:0;}
#nav ul li a {
	display: block;
	float: left;
	font-size: 85%;
	color: #ccc;
	text-decoration: none;
	padding: 12px 13px 10px;
	text-align: center;
        }
#nav ul li a:hover {
	color: #fff;
	text-decoration: none;
        }
#nav ul li#active a {
	color: #101517;
	border: 1px solid #fff; border-bottom: 1px solid #e6e8e9;
	background: #e6e8e9;
	text-decoration: none;}
  
.content {
	padding: 0 0 0 0;
	z-index: 10;
	width: 891px;
	margin: 0 auto; 
       
    }
.content .in{
      padding: 20px 0 30px;
    }
p.intro {
	line-height: 23px;
	margin: 0 0 0;
    }
.shadow {
      border-top: 1px solid #dddddd;
      padding: 10px 0;
      background: url("../images/shadow.jpg") no-repeat;
    }
img.thumb {padding: 3px; background: #fff; border: 1px solid #d1d1d1;}
    
.columns {list-style: none;margin:10px 0 0 0;padding:0; font-size: 90%;}
.columns li{float: left; width: 32%;}
.columns li.col2{border-left: 1px solid #d7d7d7;border-right: 1px solid #d7d7d7;}
.columns li h3{padding: 0 10px;color: #2e4650; margin: 0 0 5px;}
.columns li.col2 h3{padding-left: 20px;}
.columns li.col3 h3{padding-left: 20px;}
.columns li p{line-height: 22px;padding: 0 20px 0 10px; margin: 0; color: #3f4345;}
.columns li.col2 p{padding: 0 20px 0 20px;}
.columns li.col3 p{padding: 0 10px 0 20px;}
.columns li a.more{display: block;color: #1666a3;padding: 5px 0;}
.columns li a.more:hover{color: #0b4775; text-decoration: none;}

  
  
#footer {
  	  width: 891px; 
      margin: 0 auto;
      clear: both;
      font-size: 85%;
      padding-bottom: 70px;
      color: #898989;
    }
#footer a {color: #898989;}
#footer a:hover {color: #666666; text-decoration: none;}
#footer .f-left, #footer .f-right {
	padding: 0 10px;
}

p { margin: 15px 0; }

table { margin: 15px 0; border-collapse: collapse; border-spacing: 0; font-size: 100%; }
th { text-align: center; font-weight: bold; }
th, td { padding: 3px 5px; }

ul, ol { display: block; margin: 15px 0 15px 40px; }
ul ul, ul ul ul, ol ol, ol ol ol { margin: 0; margin-left: 20px; }
ol { list-style-type: decimal; }
ol ol { list-style-type: upper-alpha; }
ol ol ol {list-style-type: lower-alpha; }
li { display: list-item; }
ul li a { text-decoration: underline; }
/*GLMod START: Commented-out to avoid dd conflict with InfoGrid
dl { margin: 15px 0; }
dt { font-weight: bold; }
dd { margin-left: 30px; }
GLMod END*/
fieldset { margin: 15px 0; padding: 10px; border: 1px solid #CCC; }
legend { margin-left: 10px; font-size: 100%; font-weight: bold; color: #000; }
abbr, acronym, .help { border-bottom: 1px dotted #CCC; cursor: help; }
blockquote { margin: 15px 20px; font-style: italic; }
del, .del { text-decoration: line-through; }
strong, .strong { font-weight: bold; }
cite, em, q, var { font-style: italic; }
code, kbd, samp  {font-family: monospace; font-size: 110%; }
hr { display: block; height: 1px; margin: 10px 0; padding: 0; border: 0 solid #CCC; background: #CCC; color: #CCC;} 
.f-left {float: left;}
.f-right {float: right;}
.a-left, tr.a-left td {text-align: left;}
.a-center, tr.a-center td {text-align: center;}
.a-right, tr.a-right td {text-align: right;}
.a-justify {text-align: justify;}
.va-top {vertical-align: top;}
.va-middle {vertical-align: middle;}
.va-bottom {vertical-align: bottom;}
.clear { clear: both; }
.box { min-height: 1px; }
.box:after { display: block; visibility: hidden; clear: both; line-height: 0; font-size: 0; content:"."; }
.noscreen { display: none; }
.mleft10 { margin-left: 10px; }
.mright10 { margin-right: 10px; }
.mtop10 { margin-top: 10px; }
.mbottom10 { margin-bottom: 10px; }

input.small{
  width: 50px;
}
input.normal{
  width: 146px;
}
.bigger {font-size: 115%;}
.smaller {font-size: 85%;}

.high {color: #00F;}
.nonhigh {color: #777;}

.foto{  display: block; border: 3px solid #ddd;}

/*slideshows: slideshow1 is small; slideshow2 is wide*/
.slideshow1 {
	width: 270px;
	height: 270px;
	padding-left: 0;
	margin: 20px auto 0;
}
.slideshow2 {
	width: 883px;
	height: 139px;
	padding: 3px;
	margin: 0 auto 0;
	border: 1px solid #D1D1D1;
	background: white;
}

img .brochure {
}

#enquiryform {
	margin: 0;
	padding: 0;
}
input {
	background-color: #eee;
	border: 0;
	padding: 3px;
}
textarea {
	background-color: #eee;
	border: 0;
	padding: 3px;
}
#form1 .buttons {
	cursor:pointer;
	border:outset 1px #ccc;
	background:#999;
	color:#666;
	font-weight:bold;
	padding: 6px 16px;
	background:url(../images/formbuttonbg.gif) repeat-x left top;
}

.maintext {
   width: 891px; 
   margin: 0 auto; 
   padding: 20px 0;
  }
  
  .icon {
    font-family: modernpics-webfont;
	color: #bbb !important;
    font-size: 2em !important;
	line-height: 0 !important;
	padding-top: 21px !important;
	margin: 0;
}

a.icon:hover {
	color: #ddd !important;
}

/*GLMOD: Styling for text links on quote form panel.********************************************************************************/
.enquiryformdoors a, .enquiryformdoors a:hover { color: #fff; }
.info-col a, .info-col a:hover { color: #fff; }

/*GLMOD: Styling for Price-check Quote button.**************************************************************************************/
.pricecheckbutton { display: block; width: 200px; margin: 0 auto; }
a.pricecheckbutton { font-size: 1.5rem; font-weight: bold; padding: 10px; color: #c33; background: #eee; text-align: center; text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.pricecheckbutton:hover { color: #c33; background: #fff; }

/*GLMOD: Styling for Door Button image containing div.******************************************************************************/
.doorbuttoncontainer { padding-top: 10px; }

/*GLMOD: Positioning for Zendesk Help button to overlapping the Top button when it appears after scrolling. Now changed to the left to match the other two websites.***************************/
#launcher { margin-left: 45px; bottom: 6px !important;}

/*GLMOD: Further revised Zendesk Chat positioning, requested 16/2/17. CSS below copied from online store. START.***************************************/
#launcher.zEWidget-launcher { left: 20px; }
#ticketSubmissionForm { left: 0px; }

/*GLMOD: Test reposition of Zendesk Chat window.**************************************/
div.zopim { left: 15px !important; }
/*GLMOD: Further revised Zendesk Chat positioning, requested 16/2/17.END.***************************************/