@charset "utf-8";
/* CSS Document */
/* ------------------------------------------------------------------------
CSS sheet for tileroofspecialists
Author: Jason Montour
Date Created: 7-9-2010

All inquiries for this document should be directed to information@virtualtech.com.

--------------------------------------------------------------------------

COLORS:
Background orange: #9c2e18;

------------------------------------------------------------------------ */

/* -----------------------------------------------------------------------
=MAIN DESIGN ELEMENTS
-------------------------------------------------------------------------*/
* {
	margin: 0px;
	padding: 0px;
	
}
a {
	text-decoration: none;
	outline: none;
}
.clear {
	clear: both;
}
hr {
	margin: 0px 16px 16px 16px
}
body {
	background: #9c2e18;
	font-family: Arial, Helvetica, sans-serif;
	/*font-family: Georgia, "Times New Roman", Times, serif;*/
}
body#green {
	background: #059500 url(../images/greenBodyBG.jpg) repeat-x;
}
#outer {
	width: 1000px;
	background: url(../images/outer.png) repeat-y;
	margin: 0px auto;
}
#wrapper {
	width: 980px;
	margin: 0px auto;
	background: url(../images/bodyBG.jpg);
}
#green #wrapper {
	background: url(../images/bodyGreenBG.jpg);
}
#header {
	width: 980px;
	height: 175px;
	position: relative;
	color: #fff;
	background: url(../images/headerBG.jpg) no-repeat;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#green #header {
	background: url(../images/headerGreenBG.jpg) no-repeat;
}
#mainContent {
	width: 980px;
	background: url(../images/mainContentBG.png) repeat-x;
	min-height: 550px;
	padding: 32px 0px 0px 0px;
	color: #FFF;
	font-size: larger;
}

/* -----------------------------------------------------------------------
=TOP NAVIGATION ELEMENTS
-------------------------------------------------------------------------*/
#topNav {
	height: 45px;
	background: url(../images/topNavBG.jpg) repeat-x;
	border-top: 1px solid #5f1c0f;
}
#green #topNav {
	background: url(../images/topNavGreenBG.jpg) repeat-x;
	border-top: 1px solid #003300;
}
#topNav a {
	height: 45px;
	line-height: 50px;
	background: url(../images/topNavLine.jpg) right no-repeat;
	padding: 0px 24px 0px 22px;
	color: #9c2e18;
}
#green #topNav a {
	color: #007700;
}
#topNav a.home {
	margin-left: 110px;
}
#topNav a.traveling {
	background: none;
}
#topNav a:hover {
	color: #222;
	text-decoration: underline;
}

/*-------- lower nav ------------*/

#lowerNav {
	height: 45px;
	background: url(../images/lowerNavBG.jpg) repeat-x;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
}
#green #lowerNav {
	background: url(../images/lowerNavGreenBG.png) repeat-x;
}
#lowerNav a {
	height: 45px;
	line-height: 50px;
	background: url(../images/lowerNavLine.jpg) right no-repeat;
	padding: 0px 20px 0px 18px;
	color: #FFF;
}
#green #lowerNav a {
	background: url(../images/lowerNavLineGreen.png) right no-repeat;
}
#lowerNav a.clay {
	margin-left: 35px;
}
#lowerNav a.restoration {
	background: none;
}
#green #lowerNav a.restoration {
	background: none;
}
#lowerNav a:hover {
	color: #000;
	text-decoration: underline;
}
#thirdTier {
	background: url(../images/thirdTier.jpg) repeat-x;
	height: 15px;
	width: 980px;
	border-top: 1px solid #222;
}
#green #thirdTier {
	background: url(../images/thirdTierGreen.png) repeat-x;
}
/* -----------------------------------------------------------------------
=MAIN ELEMENTS
-------------------------------------------------------------------------*/
#logo {
	position: absolute;
	top: 30px;
	left: 20px;
	letter-spacing: 1px;
}
#logo a {
	text-decoration: none;
	color: #FFF;
}
#logo h1 {
	font-size: 30pt;
	text-shadow: #222 0px 2px 3px;
}
#logo h3 {
	font-size: 16pt;
	text-shadow: #222 0px 2px 3px;
	text-indent: 100px;
	padding-top: 12px;
}
#safetyLogo {
	position: absolute;
	top: 12px;
	left: 700px;
	width: 235px;
	height: 150px	
}
#safetyLogo a {
	width: 235px;
	height: 150px;
	display: block;
	text-indent: -9999px;
	background: url(../images/safety.png) no-repeat;
}
#mainContent p {
	padding: 0px 16px 16px 16px;
	line-height: 24px;
}
/*#mainContent h3 {
	background: url(../images/h3BG.png) repeat-x;
	margin: 0px 16px 16px;
	height: 40px;
	padding-left: 8px;
	line-height: 32px;
	color: #333;
	width: 400px;
	font-size: 14pt;
}*/
#mainContent h3 {
	background: url(../images/h3BGdark.png) repeat-x;
	margin: 0px 16px 16px;
	height: 30px;
	padding-left: 6px;
	line-height: 30px;
	color: #DDD;
	font-size: 14pt;
}
#mainContent p a {
	color: #FFF;
	text-decoration: underline;
}
#mainContent p a:hover {
	color: #000;
}
#pageTextLeft {
	float: left;
	width: 49%;
}
#pageTextRight {
	float: right;
	width: 49%;
}
#pageImgLeft {
	float: left;
}
#pageImgRight {
	float: right;
	width: 410px;
	height: 310px;
	margin-right: 30px;
	background: url(../images/homeImgBG.png) no-repeat;
}
#pageImgRight img {
	height: 292px;
	width: 392px;	
	border: 5px solid #222;
}
#homeImg {
	width: 410px;
	height: 310px;
	margin-left: 30px;
	float: left;	
	background: url(../images/homeImgBG.png) no-repeat;
}
#homeImg img {
	height: 292px;
	width: 392px;	
	border: 5px solid #222;
}
#homeInfo {
	width: 49%;
	float: right;
	margin-right: 16px;
	line-height: 22px;
}
#homePhone {
	width: 410px;
	margin-left: 36px;
	float: left;
	text-align: center;
}
#ludoAdd {
	float: right;
	text-align: center;
	width: 510px;
}
#ludoAdd img {
	padding: 1px;
	border: 0px;
	margin-top: -30px;
}
#ludoAdd img:hover {
	border: 1px solid #CC9900;
	padding: 0px;
}
#goingGreen {	
	width: 600px;
	height: 75px;
	margin: 20px auto;
}
#goingGreen img {
	border: none;
	width: 600px;
	height: 75px;
}
#goingGreen h1, #ludoAdd h1 {
	text-indent: -10000px;
}	
#goingGreen a {
	border: none;
}
#goingGreen a:hover {
	color: #000;
	text-decoration: underline !important;
}
#bios img {
	float: left;
	margin: 16px;
	display: block;
	border: 2px solid #222;
}
#bios p {
	margin-top: 16px;
}
#bios h4 {
	margin-left: 16px;
}
img.ad {
	margin: 10px 0px 20px 300px;
	width: 365px;
	height: 60px;
}
#altContact {
	width: 320px;
	float: right;
	display: block;
	color: #DDD;
	text-align: center;
	border-left: 1px solid #DDD;
}
#altContact a {
	color: #DDD !important;
}
#altContact a:hover {
	color: #FFF !important;
}

/* -----------------------------------------------------------------------
=CONTACT FORM ELEMENTS
-------------------------------------------------------------------------*/
#contactForm {
	width: 600px;
	margin: 0px 16px 16px 16px;
	border-collapse: collapse;
	margin-bottom: 10px;
}
#contactForm .fieldLabel {
	font-weight: bold;
}
#contactForm tr {
	height: 30px;
	line-height: 30px;
}
#contactForm td {
	vertical-align: top;
}
#contactForm .formField, #contactForm .textField {
	padding: 4px;
	width: 250px;
	border: 1px solid #D5D5D5;
	background: #fff url(../images/inputGrad.jpg) repeat-x;
	box-shadow: rgba(0,0,0, 0.40) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.40) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.40) 0px 0px 8px;
}
#contactForm .formField:hover, #contactForm .formField:focus,
#contactForm .textField:hover, #contactForm .textField:focus { 
	border-color: #777; 
	box-shadow: rgba(0,0,0, 0.60) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.60) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.60) 0px 0px 8px;
}
#contactForm .formBtn {
	padding: 4px 8px;
	font-weight: bold;
	margin-right: 10px;
}
#travelingImages {
	float: right;
	width: 49%;
	text-align: center;
}
#travelingImages img {
	border: 5px solid #555;
	margin: 0px 10px 10px 10px;
}
#salvagedImages {
	float: left;
	width: 49%;
	text-align: center;
}
#salvagedImages img {
	border: 5px solid #555;
	margin: 0px 5px 5px 5px;
}
#stateImg {
	text-align: center;
}
#bigGreenImg {
	text-align: center;
	margin-bottom: 30px;
}
#bigGreenImg img {
	border: 5px solid #002200;
}
#green #mainContent ul {
	margin: 0px 20px 20px 50px;
}
#green .column {
	width: 49%;
	float: left;
	margin-bottom: 20px;
}
#green .column p {
	margin-left: 10px;
}
#green .column p strong {
	font-size: 14pt;
}
#green .column.first {
	border-right: 2px solid #333300;
}

/* -----------------------------------------------------------------------
=GALLERY ELEMENTS
-------------------------------------------------------------------------*/
#gallery, #gallery2 {
	width: 450px;
	padding: 0px 10px 10px 10px;
	margin-right: 10px;
	float: right;
}
#gallery h3, #gallery2 h3 {
	margin-left: 0px;
}
#gallery ul, #gallery2 ul { list-style: none; }
#gallery ul li, #gallery2 ul li { display: inline; }
#gallery ul img, #gallery2 ul img {
	border: 5px solid #555;
}
#gallery ul a:hover img, #gallery2 ul a:hover img {
	border: 5px solid #EEE;
	color: #fff;
}
#gallery ul a:hover, #gallery2 ul a:hover { color: #fff; }

/* -----------------------------------------------------------------------
=FOOTER ELEMENTS
-------------------------------------------------------------------------*/
#footer {
	text-align: center;
	line-height: 24px;
	padding-bottom: 12px;
	color: #DDD;
}
#footer a {
	color: #DDD;
}
#footer a:hover {
	color: #FFF;
	text-decoration: underline;
}
.footerNav {
	float: left;
	text-align: left;
	margin-left: 50px;
}
.footerNav a {
	width: 260px;
	display: block;
}
.copy {
	font-size: smaller;
}

/* -----------------------------------------------------------------------
=HOME SLIDESHOW
-------------------------------------------------------------------------*/

#slideshowWrapper {
	position: relative;
	/*right: 20px;
	top: 27px;*/
	width: 400px;
	height: 300px;
}
#slideshow {
    position:relative;
    width: 400px
		height: 300px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}