@charset "utf-8";
/* CSS Document */
/*meyer zero site default
/* Don't forget to set a foreground and background color 
   on the 'html' or 'body' element! */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	padding: 0;
	border: 0;
	font-size: 100%;
	line-height: 1;
	text-align: left;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}

/*####################### babelscribe default css################################################*/
/* IE fix */
body {
	text-align: center;
	margin: 0px;
	font-family:verdana, arial, sans-serif;
	font-size:100.1%;
	color: #CCCCCC;
	background-color: #666666;
}

#containerdiv {
	max-width:980px;
	width:100%;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	font-size:11px;
}
#headerdiv {
	position: relative;
	/*height: 85px;*/
	/*width: 980px;*/
	margin-bottom: 10px;
}
input,select{
  margin:0;
  padding:0;
}

img{
	display:block;
}
strong,b{
  font-weight:bold;
}
.textAlignCentre {
	text-align: center;
}
.italic {
	font-style: italic;
}

a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9pt;
	outline:none;
}
a:link,a:visited{
	text-decoration:none;
	color: #FFFFFF;
}
a:hover, a:active{
	text-decoration:underline;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
}
#footer a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
}
#footer a:link, #footer a:visited{
	text-decoration:none;
	color: #CCCCCC;
}
#footer a:hover, #footer a:active{
	text-decoration:underline;
	color: #CCCCCC;
}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #333333;
	margin-top:4px;
	line-height: 18px;
	
}
#creditbox{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #002131;
	text-align: center;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
}
#creditbox a:link,#creditbox a:visited{
	color:#002131;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
#creditbox a:hover,#creditbox a:active{
	color:#001D24;
	text-decoration:underline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.imageFloatLeft {
	float: left;
	margin-right: 10px;
	margin-bottom: 15px;
	border: 1px solid #000033;
}
.imageFloatRight {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}
#leftColumn {
	float: left;
	height: auto;
	width: 460px;
	padding-right: 5px;
	padding-left: 10px;
	position: relative;
}
#rightColumn {
	float: right;
	height: auto;
	width: 460px;
	padding-right: 10px;
	padding-left: 5px;
}
.clearFloatsDiv {
	font-size: 0px;
	line-height: 0px;
	clear: both;
	height: 0px;
	width: 100%;
	overflow: hidden;
}
.contentDivsTopPadding {
	padding-top: 20px;
}
/******* Curved corners********/
div .curved {
	/*-moz-border-radius:10px; Firefox*/
	/*-webkit-border-radius:10px; Safari and Chrome */
	/*border-radius:10px;CSS3*/
	/*behavior:url(border-radius.htc); IE*/
	/*border: 1px solid #4f81bd;*/
   }
/********************************W3C validation within credit box****************/
#creditbox #w3clogos {
	width: 200px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}
/*#######################  end of babelscribe default css################################################*/
#containerdiv #headerdiv #headerright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
	color: #000000;
	height: 70px;
	width: 573px;
	float: right;
	padding-top: 15px;
	padding-left: 25px;
	line-height: 18px;
}
#containerdiv #navbardiv {
	background-color: #CCCCCC;
	/* height: 22px; */
	/* width: 805px; */
	padding-top: 3px;
	padding-left: 18%;
	background-image: url(../images/shingle_and_shake_roofing_navbar.jpg);
	background-repeat: repeat-y;
	overflow: auto;
}
#containerdiv #footer {
	min-height: 35px;
	/* width: 970px; */
	padding-top: 12px;
	padding-left: 20px;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
	background-image: url(../images/shingle_and_shake_roofing_footer.jpg);
	background-repeat: repeat-y;
}

#containerdiv #headerdiv #headerleft {
	float: left;
	height: 85px;
	width: 382px;
}
#containerdiv {
	border: 1px solid #FFFFFF;
}

#containerdiv #contentdiv {
	padding-bottom: 20px;
	background-color: #D4D0C8;
	background-image: url(../images/shingle_and_shake_roofing_body_bkgd.jpg);
	background-repeat: repeat-y;
}


/** email form**/

/*#emailformwrapper{
	width: 350px;
	background-color: #EEE;
	padding: 5px;
	font-size: 11px;
	color: #9C0707;
	margin-top: 0px;
	margin-bottom: 0px;
}
#emailform div.row {
	clear: both;
	padding-top: 15px;
  }

#emailform div.row span.label {
	float: left;
	width: 90px;
	text-align: right;
  }

#emailform div.row span.formw {
	float: right;
	width: 250px;
	text-align: left;
  } 
#emailform div.spacer {
	clear: both;
}
#emailformwrapper #emailform {
	margin-top: 0px;
	margin-bottom: 0px;
}
#formIEContainer {
	height: auto;
	width: 360px;
	margin-right: auto;
	margin-left: auto;
	border: 1px dashed #999999;
	margin-top: 32px;
}*/
/**end of email form *****/
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
	color: #CCCCCC;
}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
	color: #FFFFFF;
}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8.5pt;
	font-weight: bold;
	color: #666666;
}

#leftColumn #gallerywrapper {
	/*width: 850px;*/
	margin-top: 15px;
	margin-left: 40px;
	border: 1px dashed #999999;
	padding-left: 26px;
	padding-top: 4px;
	background-color: #EEE;
}

.border {
	border: 1px solid #999999;
}
.emailresponsediv {
	margin-bottom: 100px;
	position: relative;
	left: 200px;
	margin-top: 60px;
	background-color: #EEE;
	padding-bottom: 20px;
	border: 1px dashed #999999;
	padding-top: 15px;
}
.emailresponsediv p {
		text-align: center;
}
.required {
	color: #9C0707;
}

.imagesleft {
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	border: 1px solid #000000;
}

#googlemapthumb {
	display: inline;
	vertical-align: middle;
	margin-right: 10px;
	border: 1px solid #999999;
}
#exchangeicon {
	display: inline;
	margin-right: 12px;
	vertical-align: middle;
}
#containerdiv #footer #footerphone {
	float: left;
	width: 150px;
}
#containerdiv #footer #footeraddress {
	float: left;
	width: 40%;
}
#containerdiv #footer #footeremail {
	float: left;
	width: 270px;
}
#containerdiv #footer #footermobile {
	float: left;
	width: 140px;
}
#indexpixwrapper {
	position: relative;
	height: 364px;
}

#indexpix4 {
	background-image: url(../images/index_pix4.jpg);
	background-repeat: no-repeat;
	height: 162px;
	width: 218px;
	font-size: 9pt;
	color: #CCCCCC;
	padding-top: 162px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	line-height: 18px;
	float: left;
	margin-top: 17px;
}
/*#indexpix1 {
	position: absolute;
	height: 162px;
	width: 190px;
	left: 15px;
	top: 15px;
}*/
/*#indexpix3 {
	position: absolute;
	height: 330px;
	width: 492px;
	left: 219px;
	top: 15px;
}*/
/*#indexpix2 {
	position: absolute;
	height: 155px;
	width: 190px;
	left: 15px;
	top: 190px;
}*/
.bkgroundcontent {
	color: #2D2928;
	background-color: #9A9A9A;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
}
.bkgroundcontent h1 {
	margin-top: 0px;
	background-color: #666666;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}
.lowerindex {
	position: relative;
	background-color: #666666;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 25px;
	padding-bottom: 10px;
	overflow: auto;
}
/*.lowerindex #firstindex {
	position: absolute;
	left: 15px;
	top: 20px;
	width: 200px;
}*/
/*.lowerindex #secondindex {
	position: absolute;
	top: 20px;
	right: 30px;
}*/
/*.lowerindex .indexText {
	padding-right: 250px;
	padding-left: 250px;
	padding-bottom: 10px;
	padding-top:13px;
}*/
.indexText h1 {
	color: #FFFFFF;
	text-align: center;
	background-color: #34302F;
	padding-top: 8px;
	padding-bottom: 8px;
	border: 1px dashed #FFFFFF;
}
div.caption img {
	margin-bottom: 5px;
	border: 1px solid #FFFFFF;
}
.indexText p {
	color: #CCCCCC;
	line-height: 18px;
	letter-spacing: 1px;
}
.lowerindex .indexText h2 {
	color: #CCCCCC;
}
.caption {

}
ul,ol {
	color: #CCCCCC;
	margin-left: 10px;
	padding-left: 10px;
	margin-right: 10px;
	padding-right: 10px;
}
li {
	margin-bottom: 12px;
	list-style-position: outside;
	list-style-type: square;
	font-size: 9pt;
	line-height: 18px;
}
.sublist {
	margin-top: 10px;
	list-style-type: decimal;
	margin-left: 10px;
	padding-left: 10px;
}
ol li {
	margin-bottom: 12px;
	list-style-position: outside;
	list-style-type: decimal;
	margin-left: 10px;
	padding-left: 0px;
}
/*.lowerindex #thirdindex {
	position: absolute;
	left: 15px;
	top: 230px;
	width: 200px;
}*/
/*.lowerindex #fourthindex {
	position: absolute;
	top: 230px;
	right: 30px;
	width: 200px;
}*/
.bkgroundcontent h2 {
	color: #CCCCCC;
	background-color: #666666;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	margin-top: 0px;
}
#containerdiv #pixbardiv {
}
#tim {
	width: 152px;
}
#containerdiv #contentdiv #shingleone {
	background-color: #666666;
	height: auto;
	margin-left: 20px;
	margin-right: 20px;
	padding-left: 10px;
	padding-right: 5px;
}
#shingleone #timdiv {
	background-image: url(../images/tim_canada_bkgd.jpg);
	background-repeat: no-repeat;
	padding-left: 300px;
	padding-right: 10px;
	padding-bottom: 10px;
	width: 64%;
	background-color: #4F4641;
	float: left;
	margin-right: 10px;
	position: relative;
	/* left: -10px; */
	box-sizing: border-box;
	margin-left: -10px;
}
#shingleone #timdiv h2 {
	margin-top: 0px;
	color: #FFFFFF;
}
#shingleone h2 {
	color: #FFFFFF;
	margin-top: 0px;
	padding-top: 22px;
}
.clearAll {
	clear: both;
}
#containerdiv #pixbardiv {
	/*height: 187px;*/
}
.indexheight {
	height: 330px;
}
#shingleone p {
	color: #D4D0C8;
}


#containerdiv #contentdiv #rightColumn #contactlinkslist {
	padding: 5px;
	border: 1px solid #FFFFFF;
	margin-bottom: 10px;
	height: 414px;
}
.bkgroundcontent #contactlinkslist ul {
	color: #333333;
}
.wholewidth {
	color: #000000;
	background-color: #666666;
	padding: 20px;
	margin-right: 15px;
	margin-left: 15px;
	
}
.wholewidth p {
	color: #CCCCCC;
}
.wholewidth .leftColumn {
	float: left;
	width: 48%;
	padding-left: 15px;
	margin-right:20px;
}
.wholewidth .rightColumn {
	float: left;
	width: 44%;
	padding-right: 16px;
	padding-top: 28px;
	padding-left: 15px;
}
.c2a {
	color: #000000;
	background-color: #999999;
	padding: 10px;
	width: auto;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dashed;
	border-right-style: dashed;
	border-bottom-style: dashed;
	border-left-style: dashed;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
}
.wholewidth .bkgroundcontent ul,.wholewidth .bkgroundcontent p {
	color: #000000;
}
.wholewidth .bkgroundcontent li {
	list-style-position: inside;
	list-style-type: square;
	margin-top: 2px;
	margin-bottom: 1px;
}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #FFFFFF;
	background-color: #666666;
	margin-top: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
}
#asphalt {
	margin-bottom: 50px;
}
#shingleone #costdiv {
	padding-right: 10px;
	padding-left: 63%;
	height: auto;
}
#indexpixwrapper .left-column {
	width: 22%;
	/* height: 200px; */
	padding: 16px 10px 0 19px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	margin-right:7px;
}
#indexpix1 {
	margin-bottom: 13px;
}
#indexpix3 {
	padding-top: 16px;
	float: left;
	margin-right: 13px;
}
.lowerindex .left-column {
	width: 25%;
	box-sizing: border-box;
	float: left;
	padding: 10px 10px 0 8px;
}
.lowerindex #firstindex {
	margin-bottom: 17px;
}
.indexText {
	float: left;
	overflow: auto;
	width: 48%;
	box-sizing: border-box;
	margin-right: 20px;
}
.lowerindex .right-column {
	width: 23%;
	float: left;
	padding: 10px 0 0;
}
#secondindex {
	margin-bottom: 17px;
}
#headerdiv img {
	width: 100%;
	max-width: 980px;
}
.lowerindex img, #indexpix3 img {
	width: 100%;
}
#pixbardiv img {
	width: 100%;
}
.gallery-page #leftColumn {
	width: 97%;
}
.contact-page #contentdiv #rightColumn {
	width: 430px;
}
.contact-page #contentdiv #leftColumn {
	width: 500px;
	margin-left: 15px;
}
.pdfIcon {
	margin-bottom: 70px;
}
#captcha-wrapper {

	float: right;
	padding-bottom: 20px;
}
.contact-page #contentdiv #rightColumn .bkgroundcontent {
	min-height: 545px;
}
/***** mobile media styles ******/
@media screen and (max-width: 40em) {
    /* #menu is the original menu */
    .js #menu {
        display:none;
    }

    .js .slicknav_menu {
        display:block;
    }
}
@media only screen and (max-width: 960px) {
    #indexpixwrapper .left-column {
        display: none;
    }
    #indexpix3 {
    	margin-left: 10%;
    }
    #footer div {
    	float: none !important;
    	width: 90% !important;
    	text-align: center !important;
    	padding: 8px 0;
    }
    #containerdiv #contentdiv {
    	padding-bottom: 0;
    	}
    #containerdiv #footer {
    	padding-top: 0;
    	padding-left: 0;
    	}
    .contact-page #contentdiv #leftColumn {
    	max-width: 500px;
    	margin: 0 auto;
    	float: none;
    	/* box-sizing: border-box; */
    	width: 100%;
    }
    .contact-page #contentdiv #rightColumn {
    	width: 430px;
    	float: none;
    	margin: 0 auto;
    }
}
@media only screen and (max-width:900px){
    .wholewidth .leftColumn, .wholewidth .rightColumn {
    	float: none;
    	width: auto;
       }
}
@media only screen and (max-width: 820px) {
    #indexpix3 {
    	margin-left: 6%;
    }
    .wholewidth .leftColumn, .wholewidth .rightColumn {
    	width: 96%;
    	/* padding-left: 2%; */
    }
}
@media only screen and (max-width: 750px) {
    #indexpix3 {
    	width: 48%;
    }
    #p7PMnav a {
    	padding-top: 2px;
    	padding-right: 0px;
    	padding-bottom: 2px;
    	padding-left: 0;
        }
    #containerdiv #navbardiv {
    	padding-left: 6%;
    	}
    #shingleone #timdiv {
    	width: 100%;
    	background-color: #4F4641;
    	float: none;
    	}
    #shingleone #costdiv {
    	padding: 0 10px;
    	height: auto;
    }
    .c2a {
       	line-height: 1.6;
    }
    #asphalt {
    	margin-bottom: 50px;
    	float: none;
    	max-width: 422px;
    	width: 100%;
    	margin: 0 auto 20px;
    }
}
@media only screen and (max-width: 660px) {
    #indexpix3 {
    	display:none;
    }
    .lowerindex {
    	clear: both;
    }
    #indexpix4 {
    	float: none;
    	margin: 20px auto;
    }
    #indexpixwrapper {
       	height: auto;
    	padding-top: 1px;
    }
    .lowerindex .left-column, .lowerindex .right-column {
    	width: 100%;
    	float: none;
    	 }
    .left-column div, .right-column div {
    	width: 30%;
    	float: left;
    	margin-right: 13px;
    }
    .indexText {
    	float: none;
    	width: 100%;
    	margin-right: 0;
    	padding: 20px;
    }
    .lowerindex .right-column {
       	padding: 10px 0 0 20px;
    }
    #shingleone #timdiv {
    	background-image: none;
    	padding-left: 10px;
    }

}