/*

	Bytown Lumber main stylesheet

*/

/* =General
---------------------------------------------------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
}

ul, ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

body {
	background: #ffffff url('../images/wrapper/body-bg.jpg') 0 0 repeat;
	font-family: verdana, 'Trebuchet MS', arial, sans-serif;
	font-size: 11px;
	margin: 0 0 15px 0;
}

table tr td {
	font-size: 11px;
	vertical-align: top;
}

img, a img {
	border: 0;
}

.clearit:after { 
    content: ""; 
    display: block; 
    clear: both; 
    height: 0; 
    visibility: hidden; 
}

.clearit { 
    min-height: 0; 
    height: 0; 
}

html>body .clearit { 
    height: auto; 
}

.clear {
	clear: both;
	display: block;
	width: 100%;
	height: 0;
	font-size: 1px;
}

h1#lumber {
	background:url(../images/banner-lumber.jpg) top left no-repeat;
	height:70px;
	display:block;
	padding:45px 0 0 0;
}
h1#roofing {
	background:url(../images/banner-roofing.jpg) top left no-repeat;
	height:70px;
	display:block;
	padding:45px 0 0 0;
}
h1#brick {
	background:url(../images/banner-brick.jpg) top left no-repeat;
	height:70px;
	display:block;
	padding:45px 0 0 0;
}
h1#fencing {
	background:url(../images/banner-fencing.jpg) top left no-repeat;
	height:70px;
	display:block;
	padding:45px 0 0 0;
}
h1#doors {
	background:url(../images/banner-door-and-windows.jpg) top left no-repeat;
	height:70px;
	display:block;
	padding:45px 0 0 0;
}
h1#diy {
	background:url(../images/banner-diy.jpg) top left no-repeat;
	height:70px;
	display:block;
	padding:45px 0 0 0;
}
h1#services {
	background:url(../images/banner-services.jpg) top left no-repeat;
	height:70px;
	display:block;
	padding:45px 0 0 0;
}

/* =header / toolbar
--------------------------------------------------------------------------------------------------- */
#header {
	background: #fff url('../images/wrapper/header.jpg') 0 0 repeat-x;
	width: 100%;
	min-height: 169px;
	height: auto !important;
	height: 169px;
}

#header #header-inner {
	width: 990px;
	min-height: 125px;
	height: auto !important;
	height: 125px;
	margin: 0 auto;
}

#header #logo {
	display: block;
	float: left;
	width: 276px;
	height: 88px;
	margin-top: 22px;
	padding-left: 5px;
}

#header #toolbar {
	background: url('../images/wrapper/toolbar-bg.gif') 0 0 repeat-y;
	float: right;
	width: 597px;
	margin-top: 82px;
}

#header #toolbar-btm {
	background: url('../images/wrapper/toolbar-btm.gif') 0 100% no-repeat;
	padding-bottom: 4px;
}

#header #toolbar-inner {
	background: url('../images/wrapper/toolbar-top.gif') 0 0 no-repeat;
	padding-top: 4px;
}

#header #toolbar-f {
	background: url('../images/wrapper/toolbar-bg-f.gif') 0 0 repeat-y;
	float: right;
	width: 554px;
	margin-top: 82px;
}

#header #toolbar-btm-f {
	background: url('../images/wrapper/toolbar-btm-f.gif') 0 100% no-repeat;
	padding-bottom: 4px;
}

#header #toolbar-inner-f {
	background: url('../images/wrapper/toolbar-top-f.gif') 0 0 no-repeat;
	padding-top: 4px;
}

#header #toolbar ul li, #header #toolbar-f ul li {	
	float: left;
	font-size: 10px;
}

#header #toolbar ul li a, #header #toolbar-f ul li a {	
	display: block;
	float: left;
	color: #000000;
	min-height: 21px;
	height: auto !important;
	height: 21px;
	text-align: center;
	text-decoration: none;
}

#header #toolbar ul li a:hover, #header #toolbar-f ul li a:hover {	
	text-decoration: underline;
}

#header #toolbar ul li a span, #header #toolbar-f ul li a span {	
	background: url('../images/wrapper/toolbar-item-divider.gif') 0 0 no-repeat;
	display: block;
	float: left;
	min-height: 17px;
	height: auto !important;
	height: 17px;
	text-align: center;
	padding: 4px 8px 0 12px;
	cursor: pointer;
}

#header #toolbar ul li a span.first, #header #toolbar-f ul li a span.first {
	background: none !important;
}	

/* Search form */
#header #toolbar ul li #search-form, #header #toolbar-f ul li #search-form {
	float: left;
}

#header #toolbar ul li #search-form .search-field, #header #toolbar-f ul li #search-form .search-field {
	background: #ffffff;
	border: 0;
	font-size: 11px;
	height: 15px;
	width: 135px;
	margin-top: 3px;
	padding-left: 3px;
}

#header #toolbar ul li #search-form label, #header #toolbar-f ul li #search-form label {
	background: url('../images/wrapper/toolbar-item-divider.gif') 0 0 no-repeat;
	display: block;
	float: left;
	min-height: 17px;
	height: auto !important;
	height: 17px;
	text-align: center;
	padding: 4px 3px 0 10px;
}

#header #toolbar ul li #search-form .btn-search, #header #toolbar-f ul li #search-form .btn-search {
	padding: 5px 8px 0 3px;
}

/* =Layout
---------------------------------------------------------------------------------------------------- */
#wrapper {
	background: url('../images/wrapper/wrapper-bg.jpg') 0 0 repeat-y;
	width: 982px;
	margin: 0 auto 0 auto;
}

#main-content {
	background: url('../images/wrapper/main-content-bg.jpg') 0 0 repeat-y;
	clear: both;
	min-height: 400px;
	height: auto !important;
	height: 400px;
	width: 980px;
	margin: 0 auto;
}

#main-content-full {
	background: url('../images/wrapper/main-content-bg-full.jpg') 0 0 repeat-y;
	clear: both;
	min-height: 400px;
	height: auto !important;
	height: 400px;
	width: 980px;
	margin: 0 auto;
}

#left-col {
	float: left;
	width: 187px;
	display:block;
}

#middle-col {
	float: left;
	width: 598px;
}

#middle-col-full {
	width: 780px;
	float:left;
}

#right-col {
	float: left;
	width: 195px;
}

#text-content {
	padding: 35px 28px 30px 28px;
	float:left;
	width:540px;
}

/* =Layout homepage
---------------------------------------------------------------------------------------------------- */
#home-main-content {
	clear: both;
	width: 980px;
	margin: 0 auto;
}

#house-grid {
	background: #cabaa6;
	width: 980px;
	height: 403px;
}

#house-grid {
	position: relative;
}

#house-grid #house-grid-content {
	width: 355px;
	height: 180px;
	position: absolute;
	top: 80px;
	left: 54px;
}

#house-grid #house-grid-content h1 {
	color: #d88b42;
	font-family: 'trebuchet ms', verdana, arial, sans-serif;
	font-size: 24px;
	margin: 0 0 10px 0;
}

#house-grid #house-grid-content p {
	color: #004d96;
	font-size: 12px;
	line-height: 15px;
	margin: 0 0 16px 0 !important;
}

#house-grid #backgroundPopup {
	display: none;
	position: absolute;
	width: 980px; 
	height: 404px;
	top: 0;
	left: 0;
	background: #000000;
	z-index: 100;
}

#house-grid span {
	display: none;
	position: absolute;
	width: 300px;
	min-height: 193px;
	height: auto !important;
	height: 193px;
	background: #ffffff;
	border: 1px solid #333333;
	z-index: 200;
	padding: 10px 19px 10px 19px;
	font-size: 12px;
}

#house-grid span h2 {
	text-align: left;
	color: #000000;
	font-size: 14px;
	margin: 0 0 10px 0 !important;
}

#house-grid span p {
	margin: 0 0 10px 0 !important;
}

#house-grid span p a {
	color: #f98e24;
}

#house-grid .close {
	right:6px;
	top:4px;
	position:absolute;
	display:block;
}

#house-grid img {
	display: block;
}

#homepage-specials {
	background: #ffffff;
	padding: 10px 0 12px 26px;
}

#homepage-specials #specials #specials-btm {
	background: url('../images/wrapper/feature-btm.jpg') 0 100% no-repeat;
	padding-bottom: 8px;
}

#homepage-specials #specials #specials-inner {
	background: url('../images/wrapper/feature-top.jpg') 0 0 no-repeat;
	padding: 8px 10px 0 10px;
}

#homepage-specials #specials #specials-inner {
	text-align: center;
	padding: 10px 0 20px 0;
}

#homepage-specials #specials #specials-inner h3 {
	color: #004d96;
	font-family: 'trebuchet ms', verdana, sans-serif;
	font-size: 26px;
	margin: 0 0 8px 0 !important;
}

#homepage-specials #specials #specials-inner p {
	margin: 12px 0 0 0 !important;
}

/* Section buttons */
#section-btns-grid {
	float: left;
}

.section-btns {
	clear: both;
}

.section-btns li {
	float: left;
	padding: 0 0 6px 7px;
}

.section-btns li a {
	display: block;
	float: left;
	width: 195px; 
	height: 59px;
	color: #ffffff;
	font-family: 'trebuchet ms', verdana, sans-serif;
	font-size: 18px;
	font-weight: normal;
	text-decoration: none;
	padding: 35px 0 0 15px;
}

.section-btns li a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.section-btns li .estimating {
	background: url('../images/wrapper/btn-estimating-bg.jpg') 0 0 no-repeat;
}

.section-btns li .fencing {
	background: url('../images/wrapper/btn-fencing-bg.jpg') 0 0 no-repeat;
}

.section-btns li .interior {
	background: url('../images/wrapper/btn-interior-bg.jpg') 0 0 no-repeat;
}

.section-btns li .kits {
	background: url('../images/wrapper/btn-kits-bg.jpg') 0 0 no-repeat;
}

.section-btns li .masonry {
	background: url('../images/wrapper/btn-masonry-bg.jpg') 0 0 no-repeat;
}

.section-btns li .flyer {
	background: url('../images/wrapper/btn-flyer-bg.jpg') 0 0 no-repeat;
}

/* =Left nav
---------------------------------------------------------------------------------------------------- */
#left-nav {
	margin-top: 84px;
	padding: 0 20px 0 20px;
}

#left-nav li {
	padding: 0 0 12px 0;
	line-height: 16px;
}

#left-nav li a {
	color: #000000;
	text-decoration: none;
}

#left-nav li a:hover {
	color: #000000;
	text-decoration: underline;
}

#left-nav li a.active, #left-nav li a.active:hover {
	text-decoration: none;
	font-weight: bold;
}

/* =Breadcrumb
---------------------------------------------------------------------------------------------------- */
#breadcrumb {
	color: #999999;
	font-size: 11px;
	margin: 0 0 30px 0 !important;
}

#breadcrumb a {
	color: #999999;
}

#breadcrumb a:hover {
	color: #666666;
}

/* =Sub content
---------------------------------------------------------------------------------------------------- */
#right-col .sub-content {
	padding: 30px 14px 20px 14px;
}
#left-col .sub-content {
	padding: 30px 10px 14px;
}

#right-col .sub-content .sub-content-btn, #left-col .sub-content-btn {
	background: url('../images/wrapper/sub-content-btn-bg.gif') 0 0 no-repeat;
	display: block;
	width: 153px; 
	height: 47px;
	color: #ffffff;
	font-family: 'trebuchet ms', verdana, sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 16px;
	text-decoration: none;
	margin-bottom: 25px;
	padding: 28px 0 0 14px;
}

#right-col .sub-content .sub-content-btn:hover {
	text-decoration: underline;
}

#right-col .sub-content h3 {
	color: #000000;
	font-size: 12px;
	margin: 16px 0 8px 0 !important;
}

#right-col .sub-content ul, #left-col .sub-content ul  {
	margin: 10px 0 0 0;
	padding: 0 0 0 4px
}

#right-col .sub-content ul li , #left-col .sub-content ul li{
	padding: 0 0 10px 0;
	font-size: 10px;
}

#right-col .sub-content p {
	margin-bottom:12px;
}

span.linkTitle, span.litTitle{
	color:#666666;
	font-weight:bold;
}
/* =Footer
---------------------------------------------------------------------------------------------------- */
#footer {
	background: url('../images/wrapper/footer-bg.jpg') 0 0 no-repeat;
	font-size: 11px;
	color: #ffffff;
	min-height: 58px;
	height: auto !important;
	height: 58px;
	text-align: center;
	position: relative;
}

#footer p {
	padding: 10px 0 3px 0;
}

#footer p a {
	margin-left: 3px;
}

#footer ul li {
	display: inline;
}

#footer span {
  color: #cabaa6;
}

#footer a {
	color: #ffffff;
	margin: 0 7px 0 4px;
}

#footer a:hover {
	color: #dddddd;
}

/* =Links
---------------------------------------------------------------------------------------------------- */
a {
	outline: none;
	color: #004d96;
}

a:focus {
	outline: none;
	color: #004d96;
}

a:hover {
	outline: none;
	color: #333333;
}

/* =lists
--------------------------------------------------------------------------------------------------- */
#text-content ul {
 	margin: 0 0 16px 0;
	padding: 0;
}

#text-content ul li {
 	list-style: square;
	line-height: 16px;
	padding: 0 0 2px 12px;
}

/* =Typography
---------------------------------------------------------------------------------------------------- */
#text-content {
	color:#333333;
}

#text-content p {
	margin: 0 0 12px 0;
	line-height: 16px;
}

#text-content h1 {
	color: #d88b42;
	font-family: 'trebuchet ms', verdana, sans-serif;
	font-size: 24px;
	margin: 0 0 14px 0;
}

#text-content h2 {
	color: #d88b42;
	font-size: 14px;
	margin: 20px 0 6px 0;
	text-decoration:none;
}

#text-content h2 a {
	color: #d88b42;
	font-size: 14px;
	margin: 20px 0 6px 0;
	text-decoration:none;
}
#text-content h2 a:hover {
	text-decoration:underline;
}

#text-content h3 {
	color: #666666;
	font-size: 12px;
	margin: 16px 0 5px 0;
}

#text-content h3 a{
	color: #666666;
	font-size: 12px;
	margin: 16px 0 5px 0;
	text-decoration:none;
}

#text-content h3 a:hover {
	text-decoration:underline;
}

#text-content ul {
	margin-left:16px;
}

#text-content ul li ul{
	margin-top:5px;
}

#text-content ul li ul li{
	list-style:circle;
}

#text-content h2.location{
	font-size:28px;
	color:#CC6600;
}

#text-content p.locationTagline{
	font-size:14px;
	color:#333333;
	font-weight:bold;
	font-style:italic;
	margin-bottom:20px;
}

/* =Main nav CSS Menus (Core styles - Do not modify)
---------------------------------------------------------------------------------------------------- */
.qmmc .qmdivider {display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}
.qmmc .qmdividery {float:left;width:0px;}
.qmmc .qmtitle {display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}
.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}
.qmmc {position:relative; z-index:10;}
.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}
.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}
.qmsh div a {float:left;}
.qmmc div {visibility:hidden;position:absolute;}
.qmmc .qmcbox {cursor:default;display:block;position:relative;z-index:1;}
.qmmc .qmcbox a {display:inline;}
.qmmc .qmcbox div {float:none;position:static;visibility:inherit;left:auto;}
.qmmc li {z-index:auto;}
.qmmc ul {left:-10000px;position:absolute;z-index:10;}
.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}
.qmmc li a {float:none}
.qmmc li:hover > ul {left:auto;}
#qm0 ul {top:100%;}
#qm0 ul li:hover > ul {top:0px;left:100%;}
#qm1 ul {top:100%;}
#qm1 ul li:hover > ul {top:0px;left:100%}

/* =Main nav 
---------------------------------------------------------------------------------------------------- */
#header #main-nav, #header #main-nav-f {
	background: url('../images/wrapper/main-nav-overlay.gif') 0 0 no-repeat;
	width: 990px;
	min-height: 48px;
	height: auto !important;
	height: 48px;
	margin: 0 auto;
}

#header #main-nav a, #header #main-nav-f a {
	min-height: 29px;
	height: auto !important;
	height: 29px;
	padding-top: 14px;
}

#header #main-nav-f a {
	font-size:11px;
}

#header #main-nav a.lumber {
	width: 206px;
	border-left: 0;
}

#header #main-nav a.roofing {
	width: 135px;
}

#header #main-nav a.brick {
	width: 120px;
}

#header #main-nav a.fencing {
	width: 123px;
}

#header #main-nav a.doors {
	width: 129px;
}

#header #main-nav a.doors div a {
	min-width:220px !important;
}	

#header #main-nav a.diy {
	width: 120px;
}

#header #main-nav a.services {
	width: 135px;
	border-right: 0;
}

/*FRENCH*/
#header #main-nav-f a.lumber-f {
	width: 164px;
	border-left: 0;
}

#header #main-nav-f a.roofing-f {
	width: 129px;
}

#header #main-nav-f a.brick-f {
	width: 139px;
}

#header #main-nav-f a.fencing-f {
	width: 132px;
}

#header #main-nav-f a.doors-f {
	width: 119px;
}

#header #main-nav-f a.diy-f {
	width: 126px;
}

#header #main-nav-f a.services-f {
	width: 159px;
	border-right: 0;
}

/* (MAIN) Container */	
#qm0 {	
	width: 980px; 
	padding: 5px 0 0 5px;
	margin: 0;
}

/* (MAIN) Items */	
#qm0 a {	
	background: url('../images/wrapper/main-nav-item-bg.gif') 0 0 repeat-x;
	display: block;
	float: left;
	font-size: 12px;
	color: #ffffff;
	min-height: 43px;
	height: auto !important;
	height: 43px;
	text-align: center;
	text-decoration: none;
	border-left: 1px solid #695f5f;
	border-right: 1px solid #413736;
}	

#qm0 a:hover, #qm0 a#active {
	background-position:  0 -43px;
}

/* (MAIN) Parent Items */	
#qm0 .qmparent {	
}

/* (MAIN) Active State */	
body #qm0 .qmactive, body #qm0 .qmactive:hover {
	background-position:  0 -43px;
}

/* (SUB) Container */	
#qm0 div, #qm0 ul {	
	color: #000000;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	background: #4C4040;
}
 
/* (SUB) Items */	
#qm0 div a, #qm0 ul a {	
	background: #4C4040;
	float: none;
	color: #ffffff;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	text-align: left;
	min-height: 23px !important;
	height: auto !important;
	height: 23px !important;
	min-width: 180px;
	width: auto !important;
	margin: 0 !important;
	padding: 7px 10px 0 17px !important;
	border-top: 1px solid #ffffff;
	border-right: 0;
	border-left: 0;
}

/* (SUB) Hover State */	
#qm0 div a:hover {	
	background: #877D7C;
	float: none;
	color: #ffffff !important;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	margin: 0 !important;
	padding: 7px 10px 0 17px !important;
	border-top: 1px solid #ffffff;
}

/* (SUB) Active State*/	
body #qm0 div .qmactive, body #qm0 div .qmactive:hover {	
	background: #877D7C;
	float: none;
	color: #ffffff !important;
	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	margin: 0 !important;
	padding: 7px 10px 0 17px !important;
	border-top: 1px solid #ffffff;
}

span#litDesc {
margin-right:10px;
}

#map_canvas {
	margin-left:4px;
	width: 160px;
	height: 190px;
}

#map_canvas span{
	display:none !important;
}

#map_canvas form{
	display:none !important;
}
.validation{
	color:#F00;	
}

/*--------------------------INTRANET STYLING-------------------------------------*/
#results_table{
	border-collapse:collapse;	
	width:100%;
	margin-top:10px;
}
#results_table #title{
	width:100%;
	
}
#results_table th{
	border:solid 1px #CCC;
	padding:10px;
}
#results_table td{
	border:solid 1px #CCC;
	padding:10px;

}
#results_table tbody #highlight_table_row{
	background:#4C4040;
	color:#FFF;
}
#results_table tbody #highlight_table_row a{
	background:#4C4040;
	color:#FFF;
}
#results_table .alt{
	background:#eee;
}
.field{
	font-weight:bold;
}
.text, .textarea,{
	padding:2px;	
}
.radio{
	margin:5px;	
}
.file,{
	padding:10px 25px;
}
.file-replace-button{
	padding-top:10px;	
}
.lang_fieldset{
	padding:20px;
}
.lang_fieldset legend{
	padding:5px;
}
#user_edit_table td{
	padding:10px 10px 10px 0;
}
#user_edit_table .text, select, option{
	padding:2px;
}
.button {
	background:url("../cce/images/button_input.gif") no-repeat scroll left top transparent;
	border:medium none;
	color:#006CA1;
	cursor:pointer;
	font-size:10px;
	font-weight:bold;
	height:33px;
	margin-right:8px;
	margin-top:8px;
	text-transform:uppercase;
	width:103px;
}
.button:hover {
	background:url("../intranet/images/button_input_hover.gif") no-repeat scroll left top transparent;
	color:#FFF;

}
input[name="email"], input[name="password"]{
	width:200px;
	padding:2px;
}
.asterisk{
	color:#F00;	
}
#text-content #documentList li{
	list-style:none;
	background:url(../images/btn-download.png) -1px 2px no-repeat;
	padding-left:25px;
}
.filterLinks{
	margin:0 10px 20px 0;
	text-decoration:none;
}
#left-col ul a{
	text-decoration:none;
	color:#000;
}
#left-col ul a:hover{
	text-decoration:underline;
}
.newsPostingDesc p{
	padding-left:10px;
}
#text-content .newsPostingDate{
	font-style:italic;
	margin:25px 0 0 0;
	
}
#text-content #newsPosth3{
	margin-top:30px;
}





/* set the image to use and establish the lower-right position */ .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{ background: transparent url(../images/wrapper/feature-bg.png) no-repeat bottom right;} .cssbox{ /* intended total box width - padding-right(next) */ width:255px !important; /* IE Win = width - padding */ width: 220px; float:left; /* the gap on the right edge of the image (not content padding) */ padding-right:15px; /* use to position the box */ margin:0 3px 0 0;} /* set the top-right image */ .cssbox_head{background-position:top right; /* pull the right image over on top of border */ margin-right:-15px; /* right-image-gap + right-inside padding */ padding-right:12px} /* set the top-left image */ .cssbox_head h2{ background-position:top left; margin:0; color:#FFFFFF; font-size:16px; font-family: 'trebuchet ms', verdana, arial, sans-serif; line-height:1px; padding:0; /* reset main site styles*/ border:0; /* ditto */ /* padding-left = image gap + interior padding ... no padding-right */ padding:25px 0 5px 25px; height:auto !important; height:1%} /* IE Holly Hack */ /* set the lower-left corner image */ .cssbox_body{ background-position:bottom left; margin-right:25px; /* interior-padding right */ padding:6px 0 25px 25px; color:#FFFFFF;} /* mirror .cssbox_head right/left */ .cssbox_body p, .cssbox_body p a { color:#FFFFFF; padding:3px 0; text-decoration:underline;} .cssbox_body p a { text-decoration:underline;} .cssbox_body p a:hover { text-decoration:underline; color:#FFFFFF;}