@charset "UTF-8";
/* CSS Document */

body{
 background-image:url(Images/back.png);
 background-repeat:repeat-y;
 background-position:center;
 background-color:#FFFFFF;
 width: 855px;
 margin-right:auto;
 margin-left:auto;
 font-family:Arial, Helvetica, sans-serif;
 z-index:-1000;
}

.bodyWrapper{
  margin-right:auto;
  margin-left:auto;
	margin-bottom:10px;
}

h3{
  padding:10px;
}

p, .text{
 font-size:13px;
 color:#333333;
 padding:5px;
}

ul{
 font-size:13px;
 color:#333333;
}


a {
  color:#555555;
}

a:hover{
  color:#999999;
}

a:visited{
  color:#777777;
}

.screwbox{
  background-color:#c9c4c5;
}

#header{
  text-align:center;
  margin-right:auto;
  margin-left:auto;  
	margin-bottom: 0px;
	width:100%;
	padding-bottom:3px;	
	height:217px;
}

#nav{
margin: 0; 
padding: 0;
height:50px;
/*margin-top:2px;
margin-bottom:3px;*/
/*background-color:#000000;*/
/*padding-top:5px;
margin-left:-35px;	
width:917px;
border-top:solid 1px #222222;
border-bottom:solid 1px #222222;
height:55px;*/
/*width:847px;
height: 50px;*/
}

#nav li { float: left; list-style:none; list-style-type:none; }

#footer{
  text-align:center;  
	margin-bottom: 10px;	
}

#footer p{  
	font-size:10px;	
	padding:10px;
	margin-top:10px;
	color:#CCCCCC;
}

#footer a {
  color:#CCCCCC;
}

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

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


.leftColumn{
  float:left;
	width:350px;	
}

.rightColumn{
  float:right;
	width:500px;
	margin-top:20px;
	margin-bottom:20px;
}

img{
  border-style:hidden;
}

.tire{
 width:423px;
 height:161px;
 position:absolute;
 background-image:url(Images/TireFade.png);
 background-repeat:no-repeat;
 z-index:0;
}

.textbox{
  background-color:#FFFFFF;
	padding: 20px;	
  background-image:url(Images/white.png);
  background-repeat:repeat;
	z-index:1000;	
	border:solid 1px #999999;
	width:400px; 
	margin-left:28px;
}

.emailbox{ 
  width:345px;
	height:105px;
	background-image:url(Images/emailbox.png);
	background-repeat:no-repeat;
}

.boxMessage{ 
  width:405px;
	height:155px;
	background-image:url(Images/boxMessage.png);
	background-repeat:no-repeat;
}

.emailbox p{
  padding-left:40px;
  padding-top:30px;
	font-size:14px;
}

.boxMessage p{
  padding-left:40px;
  padding-top:25px;	
}

.box500{ 
  width:505px;
	height:505px;
	background-image:url(Images/box500.png);
	background-repeat:no-repeat;
}

.box600{ 
  width:505px;
	height:605px;
	background-image:url(Images/box600.png);
	background-repeat:no-repeat;
}

.boxFull{ 
  width:855px;
	height:100%;
	background: url(Images/boxFullMiddle.png) repeat-y;
	background-repeat:repeat-y;
	overflow-y: hidden;
	margin-top: 38px;
	}

.box500 h3, .box600 h3, .boxFull h3{
  padding-top:30px;
  padding-left:40px;
}
.boxFull h3, .slider-wrap{
  position: relative;
  top: -45px;
}

#bHome, #bAbout, #bPort, #bEmploy, #bContact, #bHomeDown, #bAboutDown, #bPortDown, #bEmployDown, #bContactDown{
  height:50px;	
	margin-top:0px;	
	cursor:pointer;
}

#bHome{
margin-left:20px;
 width:100px;
 background-image:url(Images/homeUp.png);
}

#bHome:hover, #bHomeDown{
margin-left:20px;
 width:100px;
 background-image:url(Images/homeDown.png);
 z-index:100;
}

#bAbout{
 width:170px;
 background-image:url(Images/aboutUp.png);
}

#bAbout:hover, #bAboutDown{
 width:170px;
 background-image:url(Images/aboutDown.png);
  z-index:100;
}

#bPort{
 width:200px;
 background-image:url(Images/portUp.png);
}

#bPort:hover, #bPortDown{
 width:200px;
 background-image:url(Images/portDown.png);
  z-index:100;
}

#bEmploy{
 width:200px;
 background-image:url(Images/employUp.png);
}

#bEmploy:hover, #bEmployDown{
 width:200px;
 background-image:url(Images/employDown.png);
  z-index:100;
}

#bContact{
 width:130px;
 background-image:url(Images/contactUp.png);
}

#bContact:hover, #bContactDown{
 width:130px;
 background-image:url(Images/contactDown.png);
  z-index:100;
}

/*roundedbox*/
.roundedbox{background-color:#FFFFFF;}
.roundedbox .topx- {background-image: url(Images/roundedbox-topx_.png);
background-repeat: no-repeat;width: 10px;height: 10px;vertical-align: top;}
.roundedbox .top-x {background-image: url(Images/roundedbox-top_x.png);
background-repeat: no-repeat;width: 10px;height: 10px;}
.roundedbox .botx- {background-image: url(Images/roundedbox-botx_.png);
background-repeat: no-repeat;width: 10px;height: 10px;vertical-align: top;}
.roundedbox .bot-x {background-image: url(Images/roundedbox-bot_x.png);
background-repeat: no-repeat;width: 10px;height: 10px;}

/*frame*/
.frame .topx-- {background-image: url(Images/frame-topx--.png);
background-repeat: no-repeat;width: auto;height: 20px;vertical-align: top;}
.frame .top-x- {background-image: url(Images/frame-top-x-.png);
background-repeat: repeat-x;width: auto;height: 20px;}
.frame .top--x {background-image: url(Images/frame-top--x.png);
background-repeat: no-repeat;width: auto;height: 20px;vertical-align: top;}
.frame .midx-- {background-image: url(Images/frame-midx--.png);
background-repeat: repeat-y;width: 20px;height: auto;}
.frame .mid-x- {background-image: url(Images/frame-mid-x-.png);
background-repeat: repeat;padding: 5px 40px 5px 40px;width: auto;
height: auto;vertical-align:text-top;}
.frame .mid--x {background-image: url(Images/frame-mid--x.png);
background-repeat: repeat-y;width: 20px;height: auto;}
.frame .botx-- {background-image: url(Images/frame-botx--.png);
background-repeat: no-repeat;width: 20px;height: 20px;vertical-align: top;}
.frame .bot-x- {background-image: url(Images/frame-bot-x-.png);
background-repeat: repeat-x;width: auto;height: 20px;}
.frame .bot--x {background-image: url(Images/frame-bot--x.png);
background-repeat: no-repeat;width: 20px;height: 20px;vertical-align: bottom;}

/*frame-screw*/
.frame-screw .topx-- {background-image: url(Images/frame-screw-topx--.png);
background-repeat: no-repeat;width: 30px;height: 30px;vertical-align: top;}
.frame-screw .top-x- {background-image: url(Images/frame-screw-top-x-.png);
background-repeat: repeat-x;width: auto;height: 30px;}
.frame-screw .top--x {background-image: url(Images/frame-screw-top--x.png);
background-repeat: no-repeat;width: 30px;height: 30px;vertical-align: top;}
.frame-screw .midx-- {background-image: url(Images/frame-screw-midx--.png);
background-repeat: repeat-y;width: 30px;height: auto;}
.frame-screw .mid-x- {background-image: url(Images/frame-mid-x-.png);
background-repeat: repeat;padding: 5px 40px 5px 40px;width: auto;height: auto;vertical-align:text-top;}
.frame-screw .mid--x {background-image: url(Images/frame-screw-mid--x.png);
background-repeat: repeat-y;width: 30px;height: auto;}
.frame-screw .botx-- {background-image: url(Images/frame-screw-botx--.png);
background-repeat: no-repeat;width: 30px;height: 30px;vertical-align: top;}
.frame-screw .bot-x- {background-image: url(Images/frame-screw-bot-x-.png);
background-repeat: repeat-x;width: auto;height: 30px;}
.frame-screw .bot--x {background-image: url(Images/frame-screw-bot--x.png);
background-repeat: no-repeat;width: 30px;height: 30px;vertical-align: bottom;}


/*frame-screw-shadow*/
.frame-screw-shadow .topx-- {width: 30px; height: 30px;
  background-image: url(Images/frame-screw-shadow-topx--.png); 
  background-repeat: no-repeat; vertical-align: top;}
.frame-screw-shadow .top-x- {width: auto; height: 30px;
  background-image: url(Images/frame-shadow-top-x-.png);
	background-repeat: repeat-x;}
.frame-screw-shadow .top--x {width: 35px; height: 30px; 
	background-image: url(Images/frame-screw-shadow-top--x.png);
  background-repeat: no-repeat; vertical-align: top;}
.frame-screw-shadow .midx-- { width: 30px; height: auto;
	background-image: url(Images/frame-shadow-midx--.png);
  background-repeat: repeat-y;}
.frame-screw-shadow .mid-x- {width: auto; height: auto;
	background-image: url(Images/frame-mid-x-.png);
  background-repeat: repeat; vertical-align:text-top;
	padding: 0px 0px 0px 0px;}
.frame-screw-shadow .mid--x {width: 35px; height: auto;
	background-image: url(Images/frame-shadow-mid--x.png);
  background-repeat: repeat-y;}
.frame-screw-shadow .botx-- {width: 30px; height: 35px;
	background-image: url(Images/frame-screw-shadow-botx--.png);
  background-repeat: no-repeat; vertical-align: top;}
.frame-screw-shadow .bot-x- { width: auto; height: 35px;
	background-image: url(Images/frame-shadow-bot-x-.png);
  background-repeat: repeat-x;}
.frame-screw-shadow .bot--x {width: 35px; height: 35px; 
	background-image: url(Images/frame-screw-shadow-bot--x.png);
  background-repeat: no-repeat; vertical-align: bottom;}

/*frame-shadow*/
.frame-shadow .topx-- {width: 30px; height: 30px;
  background-image: url(Images/frame-shadow-topx--.png); 
  background-repeat: no-repeat; vertical-align: top;}
.frame-shadow .top-x- {width: auto; height: 30px;
  background-image: url(Images/frame-shadow-top-x-.png);
	background-repeat: repeat-x;}
.frame-shadow .top--x {width: 35px; height: 30px; 
	background-image: url(Images/frame-shadow-top--x.png);
  background-repeat: no-repeat; vertical-align: top;}
.frame-shadow .midx-- { width: 30px; height: auto;
	background-image: url(Images/frame-shadow-midx--.png);
  background-repeat: repeat-y;}
.frame-shadow .mid-x- {width: auto; height: auto;
	background-image: url(Images/frame-mid-x-.png);
  background-repeat: repeat; vertical-align:text-top;
	padding: 5px 40px 5px 40px;}
.frame-shadow .mid--x {width: 35px; height: auto;
	background-image: url(Images/frame-shadow-mid--x.png);
  background-repeat: repeat-y;}
.frame-shadow .botx-- {width: 30px; height: 35px;
	background-image: url(Images/frame-shadow-botx--.png);
  background-repeat: no-repeat; vertical-align: top;}
.frame-shadow .bot-x- { width: auto; height: 35px;
	background-image: url(Images/frame-shadow-bot-x-.png);
  background-repeat: repeat-x;}
.frame-shadow .bot--x {width: 35px; height: 35px; 
	background-image: url(Images/frame-shadow-bot--x.png);
  background-repeat: no-repeat; vertical-align: bottom;}
	
	/*AJAX*/
	
			.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			margin: 20px 0;
			position: relative;
			width: 100%;
			height: 600px;
		}

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
		.csw .loading {margin: 200px 0 300px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			top: -10px;
			overflow: hidden; 
			border: 1px solid #999999; /* this is the border. should have the same value for the links */
			background-color:#FFFFFF;
			margin: auto;			
			width: 780px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			/*height: 460px;*/
			clear: both;
			/*padding:3px;						*/
			/*background: #fff;*/
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 780px; /* Also specified in  .stripViewer  above */			
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 20px;
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */			
			position:relative;
			margin-left:10px;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
			width:750px;			
			margin:0px 0px 0px 20px;

		}
		
		.stripNav ul li {
			float: left;
			margin-right: 0px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 11px;
			font-weight: bold;
			text-align: center;							
			line-height: 45px;
			color:#FFFFFF;
			/*background: #666666;*/
			background-image:url(Images/tab.png);
			background-size: 100px;
			background-repeat: no-repeat;
			text-decoration: none;
			display: block;
			padding: 0 0px;
			height:49px;
			width:100px;
		}
		
		.stripNav a:hover {
			/*background: #444444;*/
			background-image:url(Images/tabHot.png);
		}
		
		.stripNav a.current {
			/*background: #EEEEEE;*/
			color: Black;
			background-image:url(Images/tabSelected.png);
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 230px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}
		
		.stripNavL {
			background: url("images/arrow-left.gif") no-repeat center;
		}
		
		.stripNavR {
			background: url("images/arrow-right.gif") no-repeat center;
		}