@charset "UTF-8";
* {margin: 0; padding: 0;/*zeros the margin and padding defaults in browsers*/
}
body  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	background: #FFFFFF;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #333333;
}
#container { 
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 25px;
	margin-bottom: 20px;
	border: 3px solid #FF9933;
}
#header {
	width: 780 px;
}
#navigation {
	width: 739px;
 	height: 150px;
	background-image: url(images/menu_header.png);
	margin: 20px 20px 0 20px;
}
#navigation li {
	list-style: none;
	overflow: hidden;
	text-indent: -9999px;
	float: left;
}
#navigation a {
	height: 150px; 
	display: block;
}
#home, #home a {
	width: 256px;
}
#services, #services a {
	width: 97px;
}
#portfolio, #portfolio a {
	width: 96px;
}
#biography, #biography a {
	width: 97px;
}
#resources, #resources a {
	width: 101px;
}
#contact, #contact a {
	width: 92px;
}
#home a:hover {
	background: transparent url(images/menu_header.png) 0 0 no-repeat;
}
#services a:hover {
	background: transparent url(images/menu_header.png) -256px -150px no-repeat;
}
#portfolio a:hover {
	background: transparent url(images/menu_header.png) -353px -150px no-repeat;
}
#biography a:hover {
	background: transparent url(images/menu_header.png) -449px -150px no-repeat;
}
#resources a:hover {
	background: transparent url(images/menu_header.png) -546px -150px no-repeat;
}
#contact a:hover {
	background: transparent url(images/menu_header.png) -647px -150px no-repeat;
}
#home .selected {
	background: transparent url(images/menu_header.png) 0 0 no-repeat;
}
#services .selected {
	background: transparent url(images/menu_header.png) -256px -300px no-repeat;
}
#portfolio .selected {
	background: transparent url(images/menu_header.png) -353px -300px no-repeat;
}
#biography .selected {
	background: transparent url(images/menu_header.png) -449px -300px no-repeat;
}
#resources .selected {
	background: transparent url(images/menu_header.png) -546px -300px no-repeat;
}
#contact .selected {
	background: transparent url(images/menu_header.png) -647px -300px no-repeat;
}
#news {
	float: left; /* since this element is floated, a width must be given */
	width: 175px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 10px 10px 10px 10px;
	margin: 20px 0 10px 20px;
	background-color: #FF9933;
	color: #FFFFFF;
	font-weight: 200;
}
#mainContent { 
	margin-top: 20px;
	margin-bottom: 10px;
	padding: 0 20px 20px 60px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 
#serviceEx li {
	margin-left: 90px;
}
#portfolioText {
	height: 215px;
	padding: 115px 10px 0 375px;
}
#portfolioImg {
	float: left;
	width: 350px;
	padding: 15px 10px 25px 0;
}
#rollover {
	padding: 0 0 25px 375px;
}
#portfolioPage {
 	width: 495px;
 	height: 350px;
	background-image: url(images/portfolio_nav.jpg);
	margin-top: 20px;
	margin-left: 85px;
}
#portfolioPage li {
	list-style: none;
	overflow: hidden;
	text-indent: -9999px;
}

#portfolioPage li {
	float: left;
} 

#portfolioPage a {
	height: 350px; 
	display: block;
}
#identity, #identity a {
	width: 165px;
}
#print, #print a {
	width: 165px;
}
#web, #web a {
	width: 165px;
}
#identity a:hover {
	background: transparent url(images/portfolio_nav.jpg) 0 -350px no-repeat;
}
#print a:hover {
	background: transparent url(images/portfolio_nav.jpg) -165px -350px no-repeat;
}
#web a:hover {
	background: transparent url(images/portfolio_nav.jpg) -330px -350px no-repeat;
}
#picture {
	float: left;
	width: 175px;
}
#bioText {
	margin-left: 205px;
}
#contactBox {
	float: left; /* since this element is floated, a width must be given */
	width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 10px 10px 10px 10px;
	margin: 0 0 10px 0;
	background-color: #FF9933;
	color: #FFFFFF;
	font-weight: 200;
}
#contactText {
	margin-left: 190px;
}
#footerLine {
	margin-bottom: 15px;
	height: 3px;
	background-color: #FF9933;
}
#footer {
	padding: 0 20px 0 20px;
	margin-bottom: 15px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.newsDate {
	color: #008085;
	font-weight: bold;
	font-size: 13px;
}
.home {
	margin-left: 180px;/* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #news space when the content in #news ends. */
}
.indent {
	padding-left: 40px;
}
.copyright {
	font-size: 11px;
	text-align: center;
}
.smallText {
	font-size: 11px;
	color: #666666
}
.center {
	text-align: center;
}
.norollover {
	margin-bottom: 65px;
}
a:link {
	color: #008085;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #008085;
}
a:hover {
	text-decoration: underline;
	color: #FF9933;
}
a:active {
	text-decoration: none;
}
h1 {
	font-size: 18px;
}
h2 {
	font-size: 15px;
	color: #008085;
}





/* -----The CSS. You can of course have this in an external .css file if you like.
	Please note that not all these styles may be necessary for your use of Coda-Slider, so feel free to take out what you don't need.----- */
	
		p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }
		
		p#cross-links { text-align: center }
		
		p#cross-links {
	margin-bottom: 0px;
	padding-bottom: 20px
}
		
		noscript p, noscript ol { color: #333333; font-size: 13px; line-height: 1.4em; text-align: left }
		noscript ol { margin-left: 25px; }
		
		
		img { border: 0 }
		
		h3 {
	padding-bottom: 2px;
	text-align: left;
}
		

		.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%;
		}

		/* 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;
	overflow: hidden; /* this is the border. should have the same value for the links */
	margin: auto;
	width: 700px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	clear: both;
		}
		
		.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: 700px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 10px;
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
		}
		
		.stripNav a { /* The nav links */
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 32px;
	background: #2e3326;
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0 15px;
		}
		
		.stripNav li.tab1 a {
	background-color: #008085;
}
		.stripNav li.tab2 a {
	background-color: #008085;
}
		.stripNav li.tab3 a {
	background: #008085
}
		.stripNav li.tab4 a {
	background: #008085
}
		.stripNav li.tab5 a {
	background: #008085
}
		.stripNav li.tab6 a {
	background: #008085
}
		
		.stripNav li a:hover {
			background: #FF9933;
		}
		
		.stripNav li a.current {
			background: #FF9933;
			color: #fff;
		}
		
		.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;
			background: url("images/arrow-right.gif") no-repeat center;
		}