/* Main body style; added font info for anything that falls outside of a styled area */

body, html {
	background: #ffffff;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 12px;
	line-height: 18px;
	font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;
}



/* container (or wrapper) set for max width of 800; for IE, use the width expression what basically tests if the page is wider than 800 px; if so, set width to 800; otherwise, let it auto size */

#nav {
	position: relative;
	text-align: left;
	max-width: 800px;
	width:expression(document.body.clientWidth > 800? "800px": "auto" );
	background-color: #ffffff;	
	margin-right: auto;
	margin-left: auto;
	padding: 0px 0 0 0;
	z-index: 1200;
}

#srch {
    float: right;
    width: 200px;
    padding: 5px 0px 5px 0px;
    clear: both;
}

/* Main Content Area: typically used for the area of a site that is the widest and contains the most text content*/

#content-wrap {
	position: relative;
	text-align: left;
	max-width: 800px;
	width:expression(document.body.clientWidth > 800? "800px": "auto" );
	margin-right: auto;
	margin-left: auto;
	padding: 0px 0 0 0;
	overflow: hidden;
}

#content-wrap h1, h2, h3 {font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;}

#content-wrap h1 {padding: 0px 10px 5px 20px; font-size: 18px; line-height: 24px; font-weight: bold; color: #000000;}

#content-wrap h2 {padding: 5px 10px 5px 20px; font-size: 16px; line-height: 21px; font-weight: bold; color: #000000;}

#content-wrap h3 {padding: 5px 10px 5px 20px; font-size: 14px; line-height: 19px; font-weight: bold; color: #000000;}

#content-wrap p {padding: 0px 20px; font-size: 12px; line-height: 21px; font-family: Arial, Helvetica, Verdana, Swiss, sans-serif}

#content-wrap a {font-family: Arial, Helvetica, Verdana, Swiss, sans-serif}

#content-wrap ul, li, ol {margin: 0px 0px 0px 20px; padding: 0px 10px 5px 5px;  font-size: 12px; line-height: 21px; font-family: Arial, Helvetica, Verdana, Swiss, sans-serif}


#content-wrap hr {
	border: none 0;
	border-top: 1px solid #006699;	
	width: 97%;
	height: 1px;
	margin: 0px 0px 0px 10px;
	padding: 0px;
	/* left align in IE, Opera */
	text-align: left;
	clear: left;
}

#content-home {
		background: #7399b1 url(../garland-images/home-bg.jpg) no-repeat center top;
}

#content-home h1,h2,h3 {
	font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;
	font-weight: bold;
	color: #ffffff;
}

#content-home h1 {padding: 5px 0px 5px 20px; font-size: 18px; line-height: 24px;}

#content-home h2 {padding: 5px 0px 5px 20px; font-size: 16px; line-height: 21px;}

#content-home h3 {padding: 5px 0px 5px 20px; font-size: 14px; line-height: 19px;}

#content-home p, ul, li, ol {color: #ffffff;}

#content-home a:link {color:#003e74;}

#content-home a:visited {color:#ffffff;}

#content-home a:hover {color:#fe4819;}

#content-home a:active {color:#fe4819;}


/* Career Section styles */

#content-career {background: #2f7db8 url(../garland-images/career-bg.jpg) no-repeat center top;}

#content-career h1,h2,h3 {
	font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;
	font-weight: bold;
	color: #ffffff;
}

#content-career h1 {padding: 5px 0px 5px 20px; font-size: 18px; line-height: 24px;}

#content-career h2 {padding: 5px 0px 5px 20px; font-size: 16px; line-height: 21px;}

#content-career h3 {padding: 5px 0px 5px 20px; font-size: 14px; line-height: 19px;}

#content-career p, ul, li, ol {color: #ffffff;}

#content-career a:link {color:#000055;}

#content-career a:visited {color:#ffffff;}

#content-career a:hover {color:#fe4819;}

#content-career a:active {color:#fe4819;}

#content-contracts {background: #e7d2ad url(../garland-images/contracts-bg.jpg) no-repeat center top;}

.contracts li {color: #000000;}
#content-product {
		background: #ffffff url(../garland-images/product/product-bg.jpg) no-repeat center top;
}

#content-modbit {
		background: #ffffff url(../garland-images/product/mod-bit/mod-bit-bg.jpg) no-repeat center top;
}

#content-under {
		background: #ffffff url(../garland-images/product/underlayment/underlayment-bg.jpg) no-repeat center top;
}

#content-adhesives {
		background: #ffffff url(../garland-images/product/adhesives/adhesives-bg.jpg) no-repeat center top;
}

#content-mastics {
		background: #ffffff url(../garland-images/product/mastics/mastics-bg.jpg) no-repeat center top;
}

#content-coatings {
		background: #ffffff url(../garland-images/product/coatings/coatings-bg.jpg) no-repeat center top;
}

#content-sealant {
		background: #ffffff url(../garland-images/product/sealant/sealant-bg.jpg) no-repeat center top;
}

#content-accessory {
		background: #ffffff url(../garland-images/product/accessory/accessory-bg.jpg) no-repeat center top;
}

#content-metal {
		background: #ffffff url(../garland-images/product/metal/metal-bg.jpg) no-repeat center top;
}

#content-flooring {
		background: #ffffff url(../garland-images/product/flooring/flooring-bg.jpg) no-repeat center top;
}

.product li {color: #000000;}

/* Link styles applied on Product page to resemble the tab appearance */

a.tab:link {
	position: relative;
	top: 1px;
	float: left;
	padding: 4px 15px;
	margin: 0px 1px 2px 0px;
	font: bold 12px Arial, Helvetica, Verdana, Swiss, sans-serif;
	list-style: none;
	border-left: solid 1px #003e74;
	border-bottom: solid 1px #003e74;
	border-top: solid 1px #003e74;
	border-right: solid 1px #003e74;
	color: #003e74;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	display: block;
}

a.tab:visited {
	position: relative;
	top: 1px;
	float: left;
	padding: 4px 15px;
	margin: 0px 1px 2px 0px;
	font: bold 12px Arial, Helvetica, Verdana, Swiss, sans-serif;
	list-style: none;
	border-left: solid 1px #003e74;
	border-bottom: solid 1px #003e74;
	border-top: solid 1px #003e74;
	border-right: solid 1px #003e74;
	color: #003e74;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}

a.tab:hover {
	border-bottom: 1px solid #fe4819;
	background-color: #003e74;
	color: #ffffff;
}

a.tab:active {
	border-bottom: 1px solid #fe4819;
	background-color: #003e74;
	color: #ffffff;
}


/* Greenhouse Section styles */

#content-green {background: #4f7f43 url(../garland-images/greenhouse-bg.jpg) no-repeat center top;}

#content-green h1,h2,h3 {
	font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;
	font-weight: bold;
	color: #ffffff;
}

#content-green h1 {padding: 5px 0px 5px 20px; font-size: 18px; line-height: 24px;}

#content-green h2 {padding: 5px 0px 5px 20px; font-size: 16px; line-height: 21px;}

#content-green h3 {padding: 5px 0px 5px 20px; font-size: 14px; line-height: 19px;}

#content-green p, ul, li, ol {color: #ffffff;}

#content-green a:link {color:#ffffff;}

#content-green a:visited {color:#ccffcc;}

#content-green a:hover {color:#fe4819;}

#content-green a:active {color:#fe4819;}


/* Services Section styles */

#content-services {background: #a95a4e url(../garland-images/services-bg.jpg) no-repeat center top;}

#content-services h1,h2,h3 {
	font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;
	font-weight: bold;
	color: #ffffff;
}

#content-services h1 {padding: 5px 0px 5px 20px; font-size: 18px; line-height: 24px;}

#content-services h2 {padding: 5px 0px 5px 20px; font-size: 16px; line-height: 21px;}

#content-services h3 {padding: 5px 0px 5px 20px; font-size: 14px; line-height: 19px;}

#content-services p, ul, li, ol {color: #ffffff;}

#content-services a:link {color:#ffffff;}

#content-services a:visited {color:#003e74;}

#content-services a:hover {color:#fe4819;}

#content-services a:active {color:#fe4819;}




#content-contracts {background: #e7d2ad url(../garland-images/contracts-bg.jpg) no-repeat center top;}

.contracts li {color: #000000;}



#content-about {background: #c76e0d url(../garland-images/about-bg.jpg) no-repeat center top;}

#content-about h1,h2,h3 {
	font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;
	font-weight: bold;
	color: #ffffff;
}

#content-about h1 {padding: 5px 0px 5px 20px; font-size: 18px; line-height: 24px;}

#content-about h2 {padding: 5px 0px 5px 20px; font-size: 16px; line-height: 21px;}

#content-about h3 {padding: 5px 0px 5px 20px; font-size: 14px; line-height: 19px;}

#content-about p, ul, li, ol {color: #ffffff;}

#content-about a:link {color:#ffffff;}

#content-about a:visited {color:#dddddd;}

#content-about a:hover {color:#003e74;}

#content-about a:active {color:#003e74;}



#content-edu {background: #619080 url(../garland-images/educational-bg.jpg) no-repeat center top;}

#content-edu h1,h2,h3 {
	font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;
	font-weight: bold;
	color: #ffffff;
}

#content-edu h1 {padding: 5px 0px 5px 20px; font-size: 18px; line-height: 24px;}

#content-edu h2 {padding: 5px 0px 5px 20px; font-size: 16px; line-height: 21px;}

#content-edu h3 {padding: 5px 0px 5px 20px; font-size: 14px; line-height: 19px;}

#content-edu p, ul, li, ol {color: #ffffff;}

#content-edu a:link {color:#ffffff;}

#content-edu a:visited {color:#dddddd;}

#content-edu a:hover {color:#fe4819;}

#content-edu a:active {color:#fe4819;}

#content-edu hr {
	border: none 0;
	border-top: 1px solid #ffffff;	
	width: 97%;
	height: 1px;
	margin: 0px 0px 0px 10px;
	padding: 0px;
	/* left align in IE, Opera */
	text-align: left;
	clear: left;
}

#content-contact {
		background: #ffffff url(../garland-images/contact-bg.jpg) no-repeat center top;
}

.clearl {clear: left;}



/* 3-column layouts */

.col3-1 {
    float: left;
    width: 253px;
}

.col3-2 {
    float: left;
    width: 506px;
}

.col3-3 {
    float: left;
    width: 760px;
}

/* 4-column layouts */

.col-190 {
	width: 170px;
	float: left;
	padding: 10px 10px;
}

.col-380 {
	width: 360px;
	float: left;
	padding: 10px 10px;
}

.col-570 {
	width: 550px;
	float: left;
	padding: 10px 10px;
}

.pad-10 {padding: 0px 0px 0px 10px;}

.pad-20 {padding: 0px 0px 0px 20px;}

.pad-50 {padding: 0px 0px 0px 50px;}

.white {border: 1px solid #ffffff;}

.scroll {overflow: auto; height: 300px;}


.logo-t {
		background: url(../garland-images/logo-t.jpg) no-repeat center top;
	height: 41px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

.logo-t-about {
		background: url(../garland-images/logo-t-about.jpg) no-repeat center top;
	height: 41px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

.logo-t-career {
		background: url(../garland-images/logo-t-career.jpg) no-repeat center top;
	height: 41px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

.logo-t-contracts {
		background: url(../garland-images/logo-t-contracts.jpg) no-repeat center top;
	height: 41px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

.logo-t-edu {
		background: url(../garland-images/logo-t-educational.jpg) no-repeat center top;
	height: 41px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

.logo-t-green {
		background: url(../garland-images/logo-t-greenhouse.jpg) no-repeat center top;
	height: 41px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

.logo-t-product {
		background: url(../garland-images/logo-t-product.jpg) no-repeat center top;
	height: 41px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

.logo-t-services {
		background: url(../garland-images/logo-t-services.jpg) no-repeat center top;
	height: 41px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

#logo-b {
	background: url(../garland-images/logo-b.jpg) no-repeat center top;
	height: 55px;
	margin: 0px auto;
	padding: 0px;
}

/* Footer Area */

#footer {
	position: relative;
	text-align: left;
	max-width: 800px;
	width:expression(document.body.clientWidth > 800? "800px": "auto" );
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px 0 0 0;
}

.footer-left {
	float: left;
	width: 497px;
	margin: 0px 10px 0px 20px;
}

.footer-right {
	float: left;
	width: 243px;
	margin: 0px 0px 0px 10px;
}

#footer p {color: #000000; font-size: 10px; line-height: 12px; font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;}

#footer a {
	font-size: 10px; font-family: Arial, Helvetica, Verdana,Swiss, sans-serif
}

#footer a:link {color:#003e74;}

#footer a:visited {color:#000000;}

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

#footer a:active {color:#fe4819;}


/* uses letters instead of nos for ordered lists */

ol.alpha {list-style-type: lower-alpha;}

/* Floating boxes, good for photos with captions or similar */


div.floatl {
  float: left;
  }
  
div.floatl p {
   text-align: left;
   width: 265px;
   }

div.floatr {
  float: right;
  }
  
div.floatr p {
   text-align: center;
   width: 265px;
   }

div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }


/* For image captions; border line not necessary, only the float and width; done as
<div class="pictr">
  <p><img src="image.jpg" width="136"
    height="200" alt="My Image">
  <p>This is my image caption
</div>
 */
 
/* For images floated right */

div.pictr {
  float: right;
  width: 50%
  margin: 15px;
  padding: 15px;
}
div.pictr p {
  text-align: center;
  line-height: 10px;
  font-size: 10px;
}

/* For images floated left */

div.pictl {
  float: right;
  width: 50%
  margin: 15px;
  padding: 15px;
}
div.pictl p {
  text-align: center;
  line-height: 10px;
  font-size: 10px;
}


/* special items as needed */

#scrollbox {
width:400px;
height:300px;
overflow: auto
}


.sml {
	font-size: 10px;
}

.ovrstrk {text-decoration:line-through; line-height: 16px; font-size: 12px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

/* for automatic back2top.js script--styles the link */

.bak2top {
	font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;
	font-size: 10px;
	color: #ffffff;
	background-color: #003e74;
	border: 1px solid #fe4819;
	padding: 4px;
	z-index: 1200
}

/* Highlighting elements such as rules, pull quotes and similar */


.quotboxb {border-color: #2C69B6; border-style: double; border-width: 3px; margin-top: 20px; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; background-color: #B9CAF5}

.quotbox {border: 2px solid #ff6633; margin: 20px;}

.quotex {

	border-top: 2px solid #ba1e11; 
	border-bottom: 2px solid #ba1e11;
	margin: 15px 30px 15px 30px; 
	padding: 10px 10px 10px 10px; 
	background-color: #ffffff; 
	font-size: 14px; 
	font-weight:bold; 
	font-style: italic; 
	font-family: Georgia,'Times New Roman',Times, serif;
}

.quotxt {

	float: right;
	width: 325px;
	border-top: 2px solid #ba1e11; 
	border-bottom: 2px solid #ba1e11;
	margin: 15px 10px 15px 10px; 
	padding: 10px 10px 10px 10px; 
	font-size: 12px;
	font-style: italic;
}

.pbox {border: 1px solid #a1a5a9; padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px;}


/* Adds background color to text */

.shablue {margin: 5px 5 5 5; padding: 5px 5 5 5; background-color: #dce3f5;}

.shagold {margin: 5px 5 5 5; padding: 5px 5 5 5; background-color: #f7f0ae;}

/* Styles for Mal's e-commerce tables currently in most of my Excel TDF masters; probably should revisit these on site-by-site basis */

.ptcol {text-align: center; font-size: 11px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.pthdr1 {text-align: center; font-size: 14px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}


/* Adds nice border and title box around a section. If you use a dotted border, it runs right through the legend on IE, so stick w solid */

.wr_fieldset {
width: 550px; 
margin: 12px 0 12px 0;
padding: 0; }

.wr_fieldset fieldset {
border: solid 1px #fe4819; }

.wr_fieldset legend {
margin: 0 10px 0 10px;
padding: 0 5px 0 5px;
color: #003e74;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; }

.wr_fieldset_pad {
margin: 0;
padding: 8px; }

.wr_fieldset-sm {
width: 380px; 
margin: 12px 0 12px 6px;
padding: 0; }


.wr_fieldset-sm fieldset {
border: solid 1px #fe4819; }

.wr_fieldset-sm legend {
margin: 0 10px 0 10px;
padding: 0 5px 0 5px;
color: #fe4819;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; }

.wr_fieldset_pad-sm {
margin: 0;
padding: 15px 20px; }

.tblborder {
	border-left: 1px dotted #722100;
	border-collapse: collapse;
}


/* Styles for tables */

/* Applies global padding and paragraph styles to entire table. Normally used for forms or tabular data within the main layout table so you do not need to add paragraph or other styles to each td */

table.frm td {
	padding: 1px; 
	font-size: 12px;
	line-height: 15px;
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}
	
.tblborder {
	border: 1px solid #338BA6;
	border-collapse: collapse;
}

	
/* Add following as a table class="cellbkgrnd" for applying table cell backgrounds using tablestyle name="Alt Background By Style w/o formatting */

.cellbkgrnd {background-color: #cc0000;}

/* Adding bkground images to table cells or divs for announcement boxes or similar; commented out below until needed */

/* .bg1 {background: white url(images/divheader.gif) no-repeat top left; width: 236px; padding: 48px 10 10 10; border: 1px solid #548dab; border-collapse: collapse; text-align: left;} */

/* Hyperlink styles that include hover and visited styles - sml reduces text size and is good for link to BMD or footer links; whtlink produces white links on dk backgrounds */

a:link {color:#00395b; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a:visited {color:#6cabe7; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a:hover {color:#f25700; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a.sml:link {color:#003399; font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a.sml:visited {color:#6699cc; font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a.sml:hover{color:#b0cae8;  font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

/* a.wht:link {color:#ffffff;}

a.wht:hover {color:#f2f2f2;} */

a.whtlnk:link  {
color:#ffffff;
font-size: 11px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}

a.whtlnk:visited {
color:#f1f1f1;
font-size: 11px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}

a.whtlnk:hover {
color:#ffff66;
font-size: 11px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}