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

body  {
	
	margin: 20;
	padding: 10;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	background-image:url(road.jpg);
	background-repeat:no-repeat;
	background-color:#ffffff;

}


.jo #container {
	width: 750px;
	background: #FFffff;
	/* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	border: 20px solid #FFffff;
margin: auto;
	
	
} 
.jo #header {
	padding: 0 10px;
	background-repeat: no-repeat;
	background-image:url(banner_2.jpg)
} 




.jo #subheader{
	padding: 0 1px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	background-color: #FFFF99;
	} 
	


.jo #sidebar1 {
	float: left;
	width: 10em; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0px 0; /* top and bottom padding create visual space within this div */	
}

.jo #mainContent {

margin: 0 1.5em 0 11em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
background-repeat: no-repeat;
border: 1px solid; color:#ffcc00;

}


.jo #mainContent2 {

margin: 0 0em 0 11em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
}

a.car { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 174px; /* width of reactive image */
     height: 130px; /* height of reactive image */
     background-image: url(car_nav.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.car:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(car_rollover.jpg); /* source for target image */
     } 
	 
a.contact { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 174px; /* width of reactive image */
     height: 130px; /* height of reactive image */
     background-image: url(contact_nav.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.contact:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(contact_rollover.jpg); /* source for target image */
     } 
a.services { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 174px; /* width of reactive image */
     height: 130px; /* height of reactive image */
     background-image: url(services_nav.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.services:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(services_rollover.jpg); /* source for target image */
     } 
	 
a.areas { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 174px; /* width of reactive image */
     height: 130px; /* height of reactive image */
     background-image: url(area_nav.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.areas:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(area_rollover.jpg); /* source for target image */
     } 


.jo #footer { 
	padding:  0 1px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#FFFF99;

	
} 

a.pass { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 56px; /* width of reactive image */
     height: 85px; /* height of reactive image */
     background-image: url(pass_symbol_2.jpg); /* source for start image */
     background-repeat: no-repeat;
	 float: right;
     }
	 
a.think{ /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 120px; /* width of reactive image */
     height: 85px; /* height of reactive image */
     background-image: url(think_logo_2.jpg); /* source for start image */
     background-repeat: no-repeat;
	 float: right;
	 
     }
	 
a.dsa { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 115px; /* width of reactive image */
     height: 85px; /* height of reactive image */
     background-image: url(dsa_symbol_2.jpg); /* source for start image */
     background-repeat: no-repeat;
	 float: right;
     }


a{ color: #f2892d;
font-weight: bold;
text-decoration: none; 
}

a:hover { 
  color: #99561a; 
  text-decoration:underline;
 
}


p {
  font-family: verdana;
  font-weight: normal;
  font-size: 13px;
  color: #666666;
  line-height:20px;
  margin: 10px;
}

ul {  font-family: verdana;
  font-size: 13px;
  color: #666666;
  line-height:20px;
 }

h1 {
  font-family: verdana;
  font-weight:normal;
  font-size: 18px;
  font-weight: bold;
  color: #666666;
  margin: 10px;
}

h2 {
  font-family: verdana;
  font-size: 15px;
  font-weight: bold;
  color: #f2892d;
  margin: 10px;
  
}
 
h3 {
 font-family: verdana;
  font-size: 10px;
  font-weight: normal;
  color: #666666;
  margin: 10px;
  line-height:20px;
  text-align:center;
  }
  
  h4 {
 font-family: verdana;
  font-size: 12px;
  font-weight: normal;
  color: #666666;
  margin: 10px;
  line-height:20px;
  text-align:right;
  word-spacing: 10px;
 
 }

hr {
border: 0px;
height: 2px;
color: #ffcc99;
background-color: #ffcc00;
margin: 10px;
}