body {margin: 0; padding: 0; font: 12px arial, verdana, sans-serif; color: #000000; background-image: url("../images/aqua_bg.gif"); line-height: 1.5em;} 

/* GENERAL STYLES
------------------------------------------*/
a:link {color:#3C6F77; background-color: transparent; text-decoration: none;}
a:visited {color:#3C6F77; background-color: transparent; text-decoration: none;}
a:hover {color:#1E357B; background-color: transparent;}

h1, h2, h3, h4 {font-family: arial, verdana, times, sans-serif; font-weight: bold; color: #000080; background-color: transparent; margin: 0;}
h1	{font-size: 16px; color: #406696; background-color: #F5F3F4; border-bottom: 1px dashed #7399C9; padding:0;  margin: 0 0 5px 0; letter-spacing: .15em} /* page title */
h2	{font-size: 14px; color: #036473; background: url("../images/bullet_box.gif") 5px 50% no-repeat; font-weight: bold; margin: 5px 0 0 0; padding: 0 0 0 25px}/* services list */
h3	{font-size: 12px; color: #967040; background-color: #F5F3F4; padding: 0px 0 0 0px;} /* services listing */
h4	{font-size: 11px;} /* Category Choices*/
h5	{font-size: 13px;} /* Article Leadin */

img, a img {border: 0;}

#wrapper {width: 990px; color: #000000; background-color: transparent;}

/* HEADER AND MAIN CONTENT
------------------------------------------*/
.tagline {position: absolute; top: 106px; left: 715px; white-space: nowrap; font-size: 11px; color: #868686; background-color: transparent; font-weight: normal;}

#menu {position: absolute; top: 140px; left: 0px;}
#nav {margin: 0; padding: 0;}
#nav li {list-style: none; margin: 0; width: 154px; font-size: 12px; line-height: 20px; white-space: nowrap; letter-spacing: .15em;}
#nav a {display: block; padding: 0 0 0 15px; text-decoration: none; font-weight: bold; background: #78b2bb; color: #fff; border: 1px solid #78b2bb;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;}            /* End IE5-Mac hack */
#nav a:hover {background: #004E8F  url("../images/arrow_menu.gif") 0px 47% no-repeat; color: #CCC; border: 1px solid; border-color: #E1E3E3 #E1E3E3 #E1E3E3 #004E8F;}

#logo {display: block; height: 108px; overflow: hidden; text-indent: -400px; width: 431px;}
#logo:link, #logo:visited {background: transparent url(../images/logo.jpg) 0 0 no-repeat; border: 0;}
#logo:hover, #logo:active {background-position: 0;}
#logo {background: transparent; text-decoration: none;}

#recentProjects {display: block; position: absolute; top: 274px; left: 750px; height: 41px; overflow: hidden; text-indent: -200px; width: 175px;}
#recentProjects:link, #recentProjects:visited {background: transparent url(../images/tab_currentprojects.jpg) 0 0 no-repeat; border: 0;}
#recentProjects:hover, #recentProjects:active {background-position: 0;}
#recentProjects {background: transparent; text-decoration: none;}

#tabServices {display: block; height: 32px; overflow: hidden; text-indent: -200px; width: 185px;}
#tabServices:link, #tabServices:visited {background: transparent url(../images/tab_services.jpg) 0 0 no-repeat; border: 0;}
#tabServices:hover, #tabServices:active {background-position: 0;}
#tabServices {background: transparent; text-decoration: none;}

#titleContact {display: block; position: absolute; top: 274px; left: 750px; height: 41px; overflow: hidden; text-indent: -200px; width: 175px;}
#titleContact:link, #titleContact:visited {background: transparent url(../images/title_contact.jpg) 0 0 no-repeat; border: 0;}
#titleContact:hover, #titleContact:active {background-position: 0;}
#titleContact {background: transparent; text-decoration: none;}

#titlePortfolio {display: block; position: absolute; top: 274px; left: 750px; height: 41px; overflow: hidden; text-indent: -200px; width: 175px;}
#titlePortfolio:link, #titlePortfolio:visited {background: transparent url(../images/title_portfolio.jpg) 0 0 no-repeat; border: 0;}
#titlePortfolio:hover, #titlePortfolio:active {background-position: 0;}
#titlePortfolio {background: transparent; text-decoration: none;}

#titleServices {display: block; position: absolute; top: 274px; left: 750px; height: 41px; overflow: hidden; text-indent: -200px; width: 175px;}
#titleServices:link, #titleServices:visited {background: transparent url(../images/title_services.jpg) 0 0 no-repeat; border: 0;}
#titleServices:hover, #titleServices:active {background-position: 0;}
#titleServices {background: transparent; text-decoration: none;}

#titleTestimonials {display: block; position: absolute; top: 274px; left: 750px; height: 41px; overflow: hidden; text-indent: -200px; width: 175px;}
#titleTestimonials:link, #titleTestimonials:visited {background: transparent url(../images/title_testimonials.jpg) 0 0 no-repeat; border: 0;}
#titleTestimonials:hover, #titleTestimonials:active {background-position: 0;}
#titleTestimonials {background: transparent; text-decoration: none;}

#titleSitemap {display: block; position: absolute; top: 274px; left: 750px; height: 41px; overflow: hidden; text-indent: -200px; width: 175px;}
#titleSitemap:link, #titleSitemap:visited {background: transparent url(../images/title_sitemap.jpg) 0 0 no-repeat; border: 0;}
#titleSitemap:hover, #titleSitemap:active {background-position: 0;}
#titleSitemap {background: transparent; text-decoration: none;}

#midlayout {margin-left: 161px; width: 814px; color: #000000; background-color: transparent;} 
#theme {display: inline; position: absolute; top: 20px; left: 730px; background: url("../images/tab_theme.jpg") no-repeat; padding: 8px 0 0 60px; height: 31px; width: 187px;}
#theme a {margin: 0 4px 0 0; padding: 0;}
#theme a img {margin: 0; padding: 0;}

#content {position: absolute; top: 300px; left: 161px; padding: 20px 20px 20px 20px; width: 760px;}

/* LEFTSIDE
------------------------------------------*/
#leftside {position: absolute; top: 300px; left: 5px; width: 150px;} 

#testimonials {display: block; height: 31px; overflow: hidden; text-indent: -200px; width: 147px;}
#testimonials:link, #testimonials:visited {background: transparent url(../images/tab_testimonials.jpg) 0 0 no-repeat; border: 0;}
#testimonials:hover, #testimonials:active {background-position: 0;}
#testimonials {background: transparent; text-decoration: none;}
  
#testimonial {padding: 5px; font: 10px arial, verdana sans-serif;}

#categories {display: block; height: 31px; overflow: hidden; text-indent: -200px; width: 147px;}
#categories:link, #categories:visited {background: transparent url(../images/tab_category.jpg) 0 0 no-repeat; border: 0;}
#categories:hover, #categories:active {background-position: 0;}
#categories {background: transparent; text-decoration: none;}

#category {padding: 5px 0 0 5px; font: 11px arial, verdana sans-serif; color: #77443C; background: transparent; font-weight: bold; line-height: 1.5em;}
.category a:link, .category a:visited {background: url("../images/cat_arrow.gif") 0px 50% no-repeat; color: #3C6F77; background-color: #fff; text-decoration: none; padding: 0 0 0 8px}
.category a:hover, .category a:active {text-decoration: none; color: #000; background-color: #fff;}

#contactinfo {position: absolute; top: 317px; left: 5px; width: 140px; text-align: center; color: #000080; background-color: transparent; border-bottom: 1px dashed #ccc;}

/* PHOTOMORPH
------------------------------------------*/
/*
 Prev/Next Arrow styles: I'm giving them a button appearance,
 and pushing them to the sides of the page with CSS floats.
*/

.photoArrow {display: none; cursor: pointer;}
.photoPrevActive {display: inline;}
.photoNextActive {display: inline;}
  
.photoListActive {margin: 0 0 1em 0; padding: 0em 6em; text-align: center; list-style: none;}
.photoListActive li {margin: 0; padding: 0; color: #567; display: none;}
.photoListActive li.photoItemActive {display: block;}
.photoListActive a {color: #34C;}

/* It's a good idea to wrap your photos in an area the size of the largest photo */
.photoContainer {height: 151px;}

/* OK, the photo area itself. Nothing too special here, a border and some padding. */
.photoArea {position: absolute; top: 123px;	left: 161px; visibility: hidden; margin: 0 auto 0 auto;}
.photoAreaActive {visibility: visible;}
  
/*
 The AutoPlay setup is complicated; the two styled spans are alternately hidden and
 shown depending on the script state. I also have a small loading message that is
 shown to the right.
*/
.photoAutoDisabled {display: none;}
.photoAutoPlay, .photoAutoPause {}
.photoAutoPlay span, .photoAutoPause span {display: none; width: 5em; /* IE/Mac fix */}
.photoAutoPlay .photoAutoPlayLabel {display: block;}
.photoAutoPause .photoAutoPauseLabel {display: block;}
.photoLoadMessage {visibility: hidden; font-style: italic; text-align: center;}
  
/* SPECIFIC STYLES
------------------------------------------*/
#homeLeft {float: left; width: 539px;}
#homeRight {float: right; width: 220px; text-align: center; padding: 20px 0 0 0;}

#portfolio a {margin: 10px 10px 0 0; padding: 0; text-align: center;}
#portfolio a img {margin: 10px 10px 0 0; padding: 0; text-align: center;}
#pageadv {font: 12px arial, verdana, sans-serif; color: #77443C; font-weight: bold; background-color: transparent; text-align: center;}
#pageadv a {color: #77443C;	font-weight: normal; background-color: transparent; text-decoration: underline;}
.bannerad {margin: 20px 20px 0 0; padding: 0; text-align: center;}

#quote {position: absolute; top: 520px; left: 40px;}

.form {font-family: Arial, verdana, sans-serif; font-size: 12px; color: #000000; text-decoration: none;}
.form_er { font-family: Arial, verdana, sans-serif; font-size: 12px; font-weight: normal; color: #ff0000; text-decoration: none; }

.author {font: 11px arial, verdana sans-serif; color: #8C8C8C; background-color: transparent; font-style: italic;}/* article author text */
.copyright { color:#8C8C8C; font-family: arial,verdana,helvetica,times; font-size: 10px;}/* article copyright text */
.caption { color:#000000; font-family: arial,verdana,helvetica,times; font-size: 10px;}/* photo caption in text */

#columnarForm fieldset {float: left; display: block; width: 17em; margin: 0 1em 1em 0; padding: 0 1em 1em 1em;}
#columnarForm fieldset.radio {width: 15em; margin: 1em 0 2em 0;}
#columnarForm fieldset.radio input {clear: both; float: left; width: auto;}
#columnarForm fieldset.radio label {font-weight: normal;}
#columnarForm input {display: block; width: 15em;}
#columnarForm label {display: block; margin-bottom: 5px; font-weight: bold;}
#columnarForm label.first {padding-top: 0em;}
#columnarForm select {display: block;}

#clientList {float: left; display: block; width: 18em; margin: 0 1em 1em 0; padding: 0 1em 1em 1em;}

/* FOOTER
------------------------------------------*/
#footer {position: absolute; top: 715px; left: 150px; width: 820px; font: 10px verdana, arial, sans-serif; color: #000080; background-color: transparent; text-align: center; margin: 0 0 15px 0; line-height: 1.5em;}
#footer a:link, #footer a:visited {color: #000080; background-color: transparent; text-align: center; text-decoration: none;}
#footer a:hover {color: #3C6F77; background-color: transparent; text-decoration: underline;}
img.footerImage { margin: 5px 0 0 0;}
a img.footerImage { margin: 5px 0 0 0;}