/* generated by S3D DESIGNS*/ 
/* this is for the template design its layout and images used*/ 
html, body{ 
	margin:0; 
	padding:0; 
	text-align:center; 
	
	
	
	SCROLLBAR-FACE-COLOR: #ffffff; 
	SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;
	SCROLLBAR-SHADOW-COLOR: #ffffff; 
	SCROLLBAR-3DLIGHT-COLOR: #EAEAEA; 
	SCROLLBAR-ARROW-COLOR: #666666; 
	SCROLLBAR-TRACK-COLOR: #EAEAEA; 
	SCROLLBAR-DARKSHADOW-COLOR: #EAEAEA; 
	background-image:url(../images/topBanner.jpg);
	
	background-repeat:repeat-x;
	background-position:top;
	
	
} 

/* Overall width of the website as a whole. Borders can be added for sides if centreed */
#pagewidth
{ 
	width:750px; 
	text-align:left;  
	margin-left:auto; 
	margin-right:auto;
	padding-top: 0px;
	
	
	
} 
/* The top thin slice of the website */
#topMargin
{
	width:100%;
	
	border-bottom:1px;
	border-bottom-color:#b7b7b7;
	border-bottom-style:solid;
	color:#FFFFFF;
	background-color:#FFFFFF;
	height:5px;
	font-size: 1px; 
}
/* for the s3d|designs header logo */
#header
{
	position:relative; 
	
	height:112px;
	width:100%;
	text-align:left;
	vertical-align:bottom;
	padding-top:0px;
	padding-bottom:0px;
	/*
	border-bottom:1px;
	border-bottom-color:#b7b7b7;
	border-bottom-style:solid;
	*/
	
} 

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */


#t3 { /*background: url(../images/m_bg_nav.gif) #fff 0 100% repeat-x; border-top: 0.1em solid #dedede; */}
 #t3a { width: 750px; margin: 0 auto; }

  #t3n { width: 750px; margin: 0 auto; padding: 0; list-style: none; }
   #t3n li { display: block; padding: 0 0 3px; /background: url(../images/m_e_menu.gif) 50% -1000% no-repeat; position: relative; float: left; }
   #t3n li.x a { border-left: none; border-right: 0px;}
   #t3n li.home { border-left: none; float: right; background: url(../images/m_i_home.gif) 0 50% no-repeat !important; }
   #t3n li:hover, #t3n li.over { background-position: 50% 100%; }
	#t3n li a { float: left; display: block; padding: 0.9em 10px 0.73em; border-left: 0.1em solid #9c9c9e; border-bottom: 0.27em solid #9c9c9e; font-size: 1.1em; color:#999999; font-weight:lighter; } 
	#t3n li:hover a, #t3n li.over a, #t3n li a:hover, #t3n li a:focus, #t3n li a:active { color: #000; border-bottom: 0.27em solid #83b830; }
   #t3n li.home { padding: 0; }
    #t3n li.home a { border-left: none; padding: 0.9em 10px 0.73em 19px; color: #333; }
    #t3n li.home a:hover { padding: 0.9em 10px 0.73em 19px; color: #000; border-color: #fff !important; }
 	 #t3n li a span { position: absolute; left: 47%; top: 3.2em; visibility: hidden; width: 5px; height: 3px; background: url(../images/m_e_menu.gif) no-repeat; }
     #t3n li a:hover span, #t3n li a:focus span, #t3n li a:active span { visibility: visible; }
	 
	 
/* the flash header for each page */
#flashHeader
{
	position:relative; 
	background:#999999;
	height:202px;
	width:100%;
	padding:0px;
	border-bottom:1px;
	border-bottom-color:#b7b7b7;
	border-bottom-style:solid;
	
} 
/* for the navigation horzonital toolbar */
#navtopBar
{
	position:relative; 
	background:#999999;
	background:url(../images/navTopBar.jpg) repeat-x center ;
	height:37px;
	width:100%;
	padding:0px;
	border-bottom:1px;
	border-bottom-color:#b7b7b7;
	border-bottom-style:solid;
} 
#navTableHolder
{
	padding-top:5px;
	padding-bottom:5px;
}
/* this wraps the two cols, and adds a fader above both accdross site */
#wrapper
{
	
	position:relative; 
	padding-top:0px;
	background-color:#FFFFFF;
	border-top-style:solid;
	border-top-width:3px;
	border-top-color:3d3e42;
	/*
	border-left:1px dashed;
	border-right:1px dashed;
	border-bottom:1px dashed;
	border-color:#bbd0a9;  
	*/
}	

#midHeader
{
background-image:url(../images/midHeader_gear.jpg);
	background-repeat:no-repeat;
	background-position:top;
	height:123px;
}

#pageTopText
{
	height:123px;
	
	width:100%;
	padding-top:190px;


}

/* left column area */
#leftCol{
	float:left; 
	position:relative; 
	width: 550px;
	/*background:url(../images/topNavBg.jpg) no-repeat top;*/
	text-align:justify;
	padding-top:0px;
	padding-left :0px;
	background-color:#3d3e42;
	color:#FFFFFF;
	
}
#leftColPadding
{
	padding:9px;
	padding-top:10px;
	
}
 
/* right column area */
#rightCol{
	float: right; 
	display:inline; 
	position: relative; 
	width:200px; 
	padding: 0px;
	padding-right:0px;
	padding-top:0px;
	text-align:left;
	background-color:#FFFFFF;
} 
#rightColPadding
{
	
	padding-top:0px;
	
	
}

#headline
{ 
	position:relative; 
	width: 550px;
	height: 200px;
	background:url(../images/topNavBg.jpg) no-repeat top;
	text-align:left;
	background-color:#83b830;

}
 
/* footer of site */
#footer{
   	margin:0px;
 	padding-top: 15px;
	height:18px; 
 	clear:both;
 	text-align:center;
	margin: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-family:Verdana, Arial, Sans-Serif;
	line-height: 1.6em; 
	font-size: 90%;
	color:#CCCCCC;
} 
/* The bottom thin slice of the website */
#bottomMargin
{
	width:100%;
	border-top:1px;
	border-top-color:#b7b7b7;
	border-top-style:solid;
	color:#FFFFFF;
	background-color:#FFFFFF;
	height:5px;
	font-size: 1px; 
}

/* quotes system */
blockquote {
  background: transparent url(../images/quoteStart.jpg) left top no-repeat; 
  padding:5px;
  margin:0px;
  position: relative;
}
blockquote div {

  background: transparent url(../images/quoteEnd.jpg) right bottom no-repeat;
   padding:5px;
  margin:0px;
  position: relative;
}

 
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}



/*************************************************************************************/
/*************************************************************************************/
/****************** This is all the s3d class / style definations ******************/

/**
 * CSS Guide for s3d|designs 
 * @author Matt Hiscock
 * @url www.s3d.co.uk
 * @email matt@s3d.co.uk
 */


/**
 * General Body Styling
 * --------------------
 */
 
body 
{
	margin: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.6em; 
	font-size: 70%;
	background-color:#fff;
	
}



#leftCol h4 {
	font-family:"Trebuchet MS", Verdana, Arial, Sans-Serif;
	font-size:170%; 
	color:#51683e; 
	font-weight:normal; 
	letter-spacing:0.05em;
	background:url(../images/titleH4Bg.jpg);
	position: relative;
	padding:3px;
	margin: 0; padding: 0; font: normal 1.8em Arial,Tahoma,sans-serif; color: #fffffe;
	
	}

#leftCol h5 {
	font-family:"Trebuchet MS", Verdana, Arial, Sans-Serif;
	font-size:150%; 
	color:#51683e; 
	font-weight:normal; 
	letter-spacing:0.05em; 
	background:url(../images/titleBg.jpg);
	padding:3px;
	}

#leftCol h6 {
	font-family:"Trebuchet MS", Verdana, Arial, Sans-Serif;
	font-size:130%; 
	color:#51683e; 
	font-weight:normal; 
	letter-spacing:0.05em; 
	background:url(../images/titleBg.jpg);
	padding:3px;
	}
	
#rightCol h1
{
	font-size:100%;
	color:#51683e; 
	letter-spacing:0.06em; 
	font-weight:normal;
	text-align:left;
	
}

a {
	font-size: 11px; 
	color: #51683e; 
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-bottom:dotted;
	border-bottom-color:#51683e;
	border-bottom-width:1px;
	}
a:hover {
	color: #51683e;	
	text-decoration: none;
	border-bottom:solid;
	border-bottom-color:#51683e;
	border-bottom-width:1px;
	}
	
#leftColPadding a {
	font-size: 11px; 
	color: #fff; 
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-bottom:dotted;
	border-bottom-color:#fff;
	border-bottom-width:1px;
	}
#leftColPadding a:hover {
	color: #fff;	
	text-decoration: none;
	border-bottom:solid;
	border-bottom-color:#fff;
	border-bottom-width:1px;
	}


	
#footer a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.6em; 
	font-size: 90%;
	color:#999999;
	text-decoration:none;
	border-bottom:dotted;
	border-bottom-color:#999999;
	border-bottom-width:1px;
	}
#footer a:hover {

	border-bottom:solid;
	border-bottom-color:#999999;
	border-bottom-width:1px;
	}


	
ul {
	margin: 0px 0px 0px 0px;
	}

li {
	list-style: inside 3px;
	}
	

/* graphic style classes */

.dotRule
{
	border-bottom:dotted;
	border-bottom-color:#E0E0E0;
	border-bottom-width:1px;
	padding:5px;
	position:relative
}
.dotRuleTitle
{
	border-bottom:dotted;
	border-bottom-color:#E0E0E0;
	border-bottom-width:1px;
	padding:5px;
	padding-left:15px;
	padding-top:0px;
	padding-bottom:0px;
	position:relative
}
.navTopBarStyle
{
	text-align:center;
	vertical-align:middle;
	border-right:#CCCCCC;
	border-right-style:dotted;
	border-right-width:1px;

}
.navTopBarStyleEnd
{
	text-align:center;
	vertical-align:middle;


}

.navTopBarStyle a:hover, .navTopBarStyleEnd a:hover
{
background-color:#999999;
display:block;
color:#FFFFFF;
text-decoration:none;
border:none;

}
.navTopBarStyle a, .navTopBarStyleEnd a
{

display:block;
color:#999999;
text-decoration:none;
border:none;

}
/*portfolio section (not used in blue prob*/
.portfolioTable
{

}
.portfolioItem1
{
 background-color:#CDD1F8;
 border-bottom:dotted;
	border-bottom-color:#E0E0E0;
	border-bottom-width:1px;
}
.portfolioItem2
{
 background-color:#ffffff;
 border-bottom:dotted;
	border-bottom-color:#E0E0E0;
	border-bottom-width:1px;
}
.portfolioItem1End
{
 background-color:#CDD1F8;
}
.portfolioItem2End
{
 background-color:#ffffff;
}

/* postioners */
.floatRight
{
float:right;
}
.floatLeft
{
float:left;
}

/* testportfolio listing */
/* the row coloring done via javascript */

/* general setup */
#port ul
{
list-style:none;
padding:0px; 
margin:0px;
}
/* li, adds the arrow, and border */
#port li{
margin:0px;
background-image:url(../images/arrow.png);
background-repeat:no-repeat; 
background-position:8px 5px; 
/*border-bottom:1px solid #ccc;*/
}
/* adds top border to first */
#port li:first-child
{
/*border-top:1px solid #ccc*/
}
/* adds the roll over */
#port ul a:hover
{
background-color:#83b830;
display:block;
}
/* adds the text roll over, note usage of ID for bg, and class for text */
/* this is to make the bg of the text bigger to artifically fix the DIV size (overfill) */
#port .ninfo a 
{
width:169px; 
display:block; 
padding:2px 5px 2px 26px;
text-decoration:none;
border:none;
}
#port .ninfo a:hover
{
color:#fff;
text-decoration:none;
}