/** defaults and layout only - no font, text or word-spacing CSS here **/

body, html
{
	margin : 0 auto 20px;
	border : 0 ;
	padding : 0 ;
	line-height: 1; 
	background : #ffffff url('../images-css/bkg-tanwithpatterns.gif') repeat 0 0 fixed ;
}

#wrapper
{
	width: 795px ;
 	margin: 10px auto 20px ;
	padding : 0 ;
}

#header
{
	margin : 10px 0 0 0 ;
	height : 160px ;
	padding: 0 ;
	border: 0 ;
}

#midsection
{
	clear : both ;
	margin : 25px 0 10px 0 ;
	z-index : 999 ;
}

#leftcol
{
	float : left ;
	width : 260px ;
	margin: 10px 0 ;
}

#leftcol-portfolio
{
	float : left ;
	width : 235px ;
	margin: 10px 0  ;
}

#leftcol-about
{
	float : left ;
	width : 220px ;
	margin: 10px 0  ;
}

#rightcol
{
	float : right ;
	width : 500px ;
	margin: 10px 0 ;
}

#rightcol-portfolio
{
	float : right ;
	width : 530px ;
	margin: 10px 0 ;
}

#rightcol-about
{
	float : right ;
	width : 545px ;
	margin: 10px 0 ;
}

#leftcontent
{
	margin: 0 ;
}

#rightcontent
{
	margin: 0 ;
}

#div1
{
	margin : 15px 0 ;
	clear : both ;
}

#div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9
{
	margin : 15px 0 ;
	clear : both ;
	display: none ;
}

.divider
{
	height : 15px ;
	margin : 10px ;
	padding : 0 ;
	border-bottom : 2px solid #a50018 ;
}

.divider2
{
	height : 2px ;
	margin : 0 20px 10px 20px ;
	padding : 0 ;
	border-bottom : 2px solid #a50018 ;
}

.divider3
{
	height : 10px ;
	margin : 25px 50px 20px 50px ;
	padding : 0 ;
	border-bottom : 2px solid #a50018 ;
}

.divider4
{
	height : 10px ;
	margin : 10px 70px 10px 70px ;
	padding : 0 ;
	border-bottom : 2px dotted #a50018 ;
}
.clear
{
	clear : both ;
}

img
{
	border: 0 ;
}


img.right
{
	float : right ;
	margin : 5px 0 5px 20px ;
}

#rightimagebox
{
	float : right ;
	margin : 0 0 0 20px ; 
	padding : 0 ;
	line-height : 150% ;
	width :200px ;
	color : red ;
	text-align : center ;
	font-size : 10px ;
	color : #0000ff ;
	font-family : verdana, sans-serif ; 
	font-weight : 500 ;
	font-variant : small-caps ;
	font-style : italic ;
	background : #ffffff ;
}

img.left
{
	float : left ;
	margin : 5px 10px 5px 0 ;
}

a
{
	border : 0 ; 
	border-bottom : 1px dashed #ffffff ; 
}

a:link
{
	border : 0 ; 
	border-bottom : 1px dashed #ffffff ;  
} 

a:visited
{
	border : 0 ; 
	border-bottom : 1px dashed #ffffff ; 
}

a:hover
{
	border : 0 ; 
	border-bottom : 1px dashed #a50018 ; 
}

a:active, a:focus 
{
	outline: 0 ;
	border : 0 ; 
	border-bottom : 1px dashed #ffffff ; 
}


.nodeclinks a,
.nodeclinks a:link,
.nodeclinks a:visited,
.nodeclinks a:hover,
.nodeclinks a:active, 
.nodeclinks a:focus 
{
	text-decoration : none ;
	border : 0 ; 
}




/**  #####################  CSS for page content  #########################  **/


.roundedcontentbox, .roundedfooterbox
{
    margin: 0 ; 
    padding: 0 ;
    background-color: #ffffff ;
    border: 1px solid #a50018 ;
}

/** 	RoundedImageBox Notes:  Box Height and Width dimensions must be specified as the dimensions of 
	image used, and specified in the CSS on each individual page, together with float command and 
	location of Background Image - the "generic" variables are established below this example of 
	what MUST be on the individual page:
		.roundedimagebox
		{
		float : right ;
    		width : 495px ;
    		height : 351px ;
		background: url('images/german-bank-barn/5-495x371.jpg') no-repeat center center;
		}
	Max width for the RoundedImageBoxes is 5px less than the width of the column that the image appears in.
**/

.roundedimagebox
{
    margin : 0 auto ;
    border : 0 ;
    padding : 0 ;
}

.mmtextleftside, .mmtextrightside
{
	margin : 10px ;
	padding : 0 10px ;
}

.mmtextleftside h1
{
	margin : 0 ;
}

.mmtextleftside h2
{
	margin : 5px 0 ;
}

.mmtextrightside h1

{
	margin : 10px 0 0 0 ;
}

.mmtextrightside h2

{
	margin : 20px 0 10px 0 ;
}

.mmtextrightside h3

{
	margin : 10px 0 0 0 ;
}

.mmtextrightside h4

{
	margin : 10px 0 20px 0 ;
}

.mmtextrightside hr, .mmtextleftside hr

{
	float : left ;
	width : 90% ;	
	height : 2px ;
	color : #a50018 ;
}


.mmtextrightside ul
{
	margin : 10px 10px 10px 20px;
	padding: 0 20px 0 20px ;
} 

.mmtextrightside li
{
	margin : 0 0 6px 0 ;
	padding : 0 0 0 5px ;
}

.mmtextleftside p, .mmtextrightside p
{
	margin : 10px 0 ;
}

.mmtextleftside
{
	background : transparent ;
}

.mmtextleftside h2
{
	margin : 10px 0 10px 0 ;
}

.mmtextleftside h3
{
	margin : 20px 0 10px 0 ;
}

.mmtextleftside ul
{
	display : block ;
	list-style : none ;
	border : 0 ;
	background : transparent ;
	margin : 15px 0px 15px 0px;
	padding: 0 ;
} 

.mmtextleftside li
{
	display : block ;
	border : 0 ;
	list-style : none ;
	background : transparent ;
	margin : 0 0 6px 0 ;
	padding: 0 ;
	background-image: none ;
} 

.mmtextleftside li a, .mmtextleftside li a:link, .mmtextleftside li a:visited, .mmtextleftside li a:active
{
	display : block ;
	width : 150px ;
	padding: 4px 0 4px 28px;
	background:  url('../images-css/trusses-smaller.jpg') no-repeat center left ;
	border : 0 ;
}


.mmtextleftside li a:hover
{
	padding: 4px 0 4px 28px;
	background:  url('../images-css/trusses.jpg') no-repeat center left ;
	border : 0 ; 
}


/**  #####################  header area  #########################  **/


#quote
{
	margin: 10px 0 0 0 ;
	border : 0 ;
	padding : 7px 2px 7px 0 ;
	height : 30px ;
	width : 440px ;
	float : right ;
	z-index : 100 ;
}

#quote span
{
	padding : 0 0 0 10px ;
	white-space : nowrap ;
}

#leftheader 
{
	margin : 0 ;	
	float : left ; 
	width : 350px ;
	padding : 0 ;
}

#leftheader img
{
	margin : 0 0 10px 0;
	float : left  ;	
}

#leftheader a,
#leftheader a:link, 
#leftheader a:visited,
#leftheader a:hover,
#leftheader a:active
{
	border: 0 ;
	text-decoration : none ;
}

#leftheader a.span,
#leftheader a:link span, 
#leftheader a:visited span,
#leftheader a:active span, 
#leftheader a:focus span 
{
	position : absolute ;
	left : -800px ;
	top : -800px ;
}

#leftheader a:hover span
{
	display : block ;
	margin : 0 ;
	width : 195px ;	
	background : #ffffff ;
	border : 1px solid #000 ;
	padding : 2px 4px ; 
	position: relative ;
	left : 75px ;	
	top : -100px ;
	z-index : 10 ;
}

#rightheader
{
	width : 445px ;
	height : 160px ;
	margin : 25px 0 10px 0  ;
	float : right ;
}

#rightheader h1
{
	margin : 0px 0 10px 0 ;
}

#leftheader h1
{
	margin : 25px 0 10px 0 ;
	padding : 0 ;
}


/**  #####################  CSS for header image rollover  #########################  **/


 /**  position of the container holding all of the images  **/

#header-image-container         
{
	float: right ;
	width : 435px ; 
	height : 75px ;
	border : 0 ;
	margin : 0 ; 
	padding : 0 ;
}

#header-image-container img { border: 0 ; }

#header-image-container ul    /** position of slide container **/
{
	padding : 0 ;
	margin : 0 ;
	list-style-type: none ;
	float : right ;
}

#header-image-container li { float : left ; }                /** float command for slide container **/

 /**  initial background images for each slide  **/


 /**  normal display properties of the individual slides  **/
 
#header-image-container a.gallery, 
#header-image-container a.gallery:link, 
#header-image-container a.gallery:visited, 
#header-image-container a.gallery:active
{
	display : block ;
	outline : 0 ;
	margin : 0 10px 0 0  ;
	cursor : default ;
	width : 80px ;
	height : 75px ;
	border : 0 ;
}

 /**  initial background images for each slide  **/

#header-image-container a.slide-w {background: url('../images-css/rollovers-newer/cir.off.60.60.gif') no-repeat center center ; }
#header-image-container a.slide-x {background: url('../images-css/rollovers-newer/rec.off.4.97.60.jpg') no-repeat center center ; }
#header-image-container a.slide-y {background: url('../images-css/rollovers-newer/tri.off.1.74.60.gif') no-repeat center center ; }
#header-image-container a.slide-z {background: url('../images-css/rollovers/whatsnew.70.70.gif') no-repeat center center ; }


 /**  display properties of individual slides on hover  **/
	
#header-image-container a.gallery:hover,
#header-image-container a.gallery:focus

{
	background:  no-repeat center center ;
	outline: 0 ;
	margin : 0 10px 0 0  ;
	cursor : pointer ;
	width : 80px ;
	height : 75px ;
	border : 0 ;
}

 /**  slide Y - change width  **/
 
#header-image-container a.slide-x, 
#header-image-container a.slide-x:link, 
#header-image-container a.slide-x:visited, 
#header-image-container a.slide-x:active 
{
	width : 100px ;
}
	
#header-image-container a.slide-x:hover,
#header-image-container a.slide-x:focus
{
	width : 100px ;
}

#header-image-container a.gallery:hover img {border:0; float:left; margin: 0;}


 /**  change background images for each slide on hover  **/

#header-image-container a.slide-w:hover, #header-image-container a.slide-w:focus
{	background: url('../images-css/rollovers/cir.over.60.60.gif') no-repeat center center ; }
#header-image-container a.slide-x:hover, #header-image-container a.slide-x:focus
{	background: url('../images-css/rollovers/rec.over.97.60.gif') no-repeat center center ; }
#header-image-container a.slide-y:hover, #header-image-container a.slide-y:focus
{	background: url('../images-css/rollovers/tri.over.69.60.gif') no-repeat center center ; }
#header-image-container a.slide-z:hover, #header-image-container a.slide-z:focus
{	background:  url('../images-css/rollovers/whatsnew.70.70.gif') no-repeat center center ; }


#header-image-container a.gallery:hover img {border:0; float:left; margin: 0;}


 /**  change background images for each slide on hover  **/


#header-image-container a.gallery span,
#header-image-container a.gallery:link span, 
#header-image-container a.gallery:visited span,
#header-image-container a.gallery:active span, 
#header-image-container a.gallery:focus span 
{
	display : block ;
	outline: 0 ;
	padding : 0 ; 
	background: transparent ;
	
/**
******************************* 
By activating the position: absolute command with left and top coordinates far off the page, the span titles
are invisible until the images are hovered over.
If this line is commented out and instead the commands below it are activated to set the position: relative with 
appropriate left and top coordinates, then the span titles will be displayed at all times (not just when hovered-over).
*******************************
**/


/**	position : absolute ; left : -1000px ; top : -1000px ; **/
	
	position : relative ; left : 0px ; top : -15px ;
}

#header-image-container a.gallery:hover span
{
	display : block ;
	outline: 0 ;
	padding : 2px ; 
	position: relative ;
	left : 0px ;
	top : -19px ;
	border : 1px solid #000 ; 
	background: #fff ;
}

/** border around span image on hover  **/


#header-image-container a.gallery:hover span img {border: 0; } 


  

/**  #####################  Footer CSS   #########################  **/

#footercontainer
{
	margin: 10px auto ;
	background : transparent ;
}

.roundedfooterboxcontainer
{
	clear : both ;
	margin: 20px 40px ;
    	border: 0 ;
}

.roundedfooterbox
{
    	margin: 0 ;
    	padding: 0 ;
    	background-color: #ffffff ;
    	border: 1px solid #a50018 ;
}

#footer
{
	margin : 0 auto  ;
	padding : 10px 0 10px 0 ;
	background : transparent ;
}

#footer h1, #roundedfooterbox h1
{
	margin : 5px 0 5px 0 ;
	background : transparent ;
}

#footer p, #roundedfooterbox p
{
	margin: 10px 0 ;
	padding : 0 ;
	background : transparent ;
}

#footer p.slogan, #roundedfooterbox p.slogan
{
	margin : 15px 0 ;
	padding : 0 ;
}

.footerlinks
{
	margin : 20px 0 15px 0 ;
	padding : 0 ;
	background : transparent ;
}

.footerlinks a
{
	margin : 7px 3px 7px 3px ;
	background : transparent ;
}

.footerlinks a:link
{
	margin : 7px 3px 7px 3px ;
	background : transparent ;
}

.footerlinks a:visited
{
	margin : 7px 3px 7px 3px ;
	background : transparent ;
}

.footerlinks a:hover
{	
	margin : 7px 3px 7px 3px ;
	border-top : 1px dashed #a50018 ;
	border-bottom : 1px dashed #a50018 ;
	background : transparent ;
}

.footerlinks a:active
{
	margin : 7px 3px 10px 3px ;
}


/**  #####################  CSS for thumbnails on portfolio pages #########################  **/


#thumb-container 
{
	text-align : center ;
	height : 75px ;
	margin : -15px auto 5px ;
}

#thumb-container img
{
	border: 1px solid #a50018 ;
	margin : 0 3px 0 3px ;
}

#thumb-container a 
{
	text-decoration : none ;
	border : 0 ;
} 

#thumb-container a,
#thumb-container a:link ,
#thumb-container a:visited ,
#thumb-container a:hover,
#thumb-container a:active
{
	text-decoration : none ;
	border : 0 ;
}

#loadarea
{
	float : right ;
	margin : 15px 0 0 0 ;
}

#loadarea img
{
z-index : 1 ;
margin : 0  ;
border: 1px solid #a50018 ;
}

#sparks 
{
	clear: both ;
	background: transparent ;
	margin: 40px auto 0 ;
	line-height : 120% ;
	text-align: center ;
	padding: 0 ;
}

#sparkstext
{	font-variant: small-caps ; 
	white-space: nowrap ; 
	text-align: center ; 
	color : #00009c ; 
	color : #000 ;
	font-size: 10px; 
	font-family: Verdana, arial, sans-serif ; 
}