/* CSS Document */

/*********RESET**********/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td 
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	}

/* remember to define focus styles */
:focus {
	outline: 0;
	}
	
body {
	line-height: 1; 
	color: black; 
	background: white;
	}
	
ol, ul {
	list-style: none;
	}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate; 
	border-spacing: 0;
	}
	
caption, th, td {
	text-align: left; 
	font-weight: normal;
	}
	
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	}
	
blockquote, q {
	quotes: "" "";
	}
	
/**********end reset**********/

/**********GLOBAL**********/
body { 
	background: #5c5c5c url(images/background.gif)repeat-x; 
	}
h2 {
	font-size: 20px; 
	padding: 15px 0 5px 0;

	}

h3 {
	font-size: 18px; 
	padding: 15px 0 5px 0;
	}
	
h4 {
	font-size: 14px; 
	font-weight: bold; 
	padding: 15px 0 5px 0;
	}
	
a { 
	color: #136257; 
	font-size: 20px; 
	text-decoration: none; 
	cursor:pointer;
	}
	
a:hover {
	text-decoration: underline; 
	}
	
p {
	font-family: Arial, Serif, Sans-Serif; 
	font-size: 11pt; line-height: 22px;
	}
ul {font-family: Arial, Serif, Sans-Serif; font-size: 11pt; line-height: 30px; list-style:disc; margin-left:60px;}
.margin {
	margin-left: 40px;
	}
	
.font {
	font-family: Arial, Serif, Sans-Serif; 
	font-size: 11pt; line-height: 22px;
	}

/* h1 image replace*/
h1.img-replace span { 
	display: none; 
	}
	
h1#home { 
	height: 60px; 
	background-image: url("images/1955-9.gif"); 
	background-repeat: no-repeat; 
	}
	
h1#product { 
	height: 60px; 
	background-image: url("images/layout-9.gif"); 
	background-repeat: no-repeat; 
	}
	
h1#services { 
	height: 60px; 
	background-image: url("images/services-9.gif"); 
	background-repeat: no-repeat; 
	}
	
h1#about { 
	height: 60px; 
	background-image: url("images/about-10.gif"); 
	background-repeat: no-repeat; 
	}
	
h1#contact { 
	height: 60px; 
	background-image: url("images/contact-9.gif"); 
	background-repeat: no-repeat; 
	}

h1#office { 
	height: 60px; 
	background-image: url("images/office-technology.gif"); 
	background-repeat: no-repeat; 
	}

#services-button { width:131px; height:40px; margin-left:27px;}
#services-button a {background:url(images/services-button.png) no-repeat; display:block; text-indent:-9999px; width:131; height:40px;}
#services-button a:hover {background:url(images/services-button.png) no-repeat 0 -40px; display:block; text-indent:-9999px; width:131; height:40px;}

.float-left {float:left;}
.clear {
	clear: both;
	}

	
*html .clear {
	height: 1%;
	}
	
.clear:after {
	content: " "; 
	display: block; 
	visibility: hidden; 
	clear: both; 
	height: 0;}




#wrapper {
	width: 1024px; 
	margin: 0 auto; 
	}
	
#head { }

#top-nav { 
	margin: -41px 0 18px 37px;
	}
	
#top-nav li { 
	display: inline; 
	padding: 0 20px 0 15px; 
	}
	
	
	

#col-container {margin-left:-1px; margin-top:-11px;}

#col-left {
	background: url(images/mid.jpg); 
	width: 633px; 
	height: 290px; 
	margin-left: 26px; 
	float: left;
	}
	
#col-right {
	background: url(images/mid_r.jpg); 
	width: 340px; 
	height: 290px; 
	margin-left: 659px;
	}
	
#services-page {background:url(images/services1.gif) no-repeat; height:195px; width:500px;}
#office-list {}

#content-wrapper { 
	margin-left: 22px; 
	width: 973px; 
	min-height: 200px;
	_height: 200px;  
	}
	
#content-header { 
	background: url(images/layout_08.gif) no-repeat; 
	height: 218px;  
	}
	
#content-header p {
	margin: 10px 10px 10px 30px; 
	width: 800px;
	}
	
/*sets a minimum height for the Products page, as this one needs one and the other pages generally do not */
#content-areaProducts { 
	background: url(images/content_09.gif) repeat-y; 
	min-height: 350px;
        _height: 350px;
	}
	
#content-area { 
	background: url(images/content_09.gif) repeat-y; 
	min-height: 100px;
	}
	
#content-area span#about-fill {
	height: 1600px;
	}
	
#content-area span img { 
	margin-top: -107px; 
	}
	
#content-areaProducts span span img {
	margin-top: -200px;
}
	
#content-area h3, #content-area h4, #content-area p {
	margin-left:40px;
	width:900px;
	}
	 
#content-footer { 
	background: url(images/content_10.gif) no-repeat; 
	height: 60px; 
	text-align:center;
	}
	
	

/*PRODUCTS*/
#nav {
	margin:0 auto; 
	margin-left:100px;
	}
	
#nav ul {
	margin-left:-37px;
	}
	
#nav li {
	display:inline; 
	margin-right:87px;
	}

#product-wrapper { 
	width:911px; 
	height:312px; 
	margin:0 auto; 
	}
	
#product { 
	background: url(images/sprite/sprite.jpg) -100px -200px; 
	width: 900px; 
	height: 100px; 
	margin:0 auto; 
	margin-top:20px; 
	}


/* The navigation on products.html that allows the user to
scroll through the various types of products. Edit min-height and _height in #myAccordian
and the in-page Javascript's height variable in order to change the height
dimension on this element.  The width element can be changed by
simply editing the width on #myAccordian.  Note that you will
need to do some calculations in order to make the height of #myAccordian and
the defined height in the Javascript in order to make this look right. */

#myAccordion{
	width: 910px;
	min-height:471px;
	_height: 471px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #aaa;
	margin-top: -200px;
}
#myAccordion dt{
	/*line-height: 90px;*/
	background-color: #fff;
	font-weight: bold;
	color: #345E54;
	border-bottom: 1px solid #eee;
}
#myAccordion dd{
	overflow: auto;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}
#myAccordion p{
	margin: 8px 5px;
}
#myAccordion dt.myAccordionHover
{
	background-color: #fff;
}
#myAccordion dt.myAccordionActive
{
	background-color: #fff;
	border-bottom: 1px solid #eee;
}