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

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
  width: 100%;
}
body {
  /*font-family: "Courier New", Courier, monospace, sans-serif;*/
  /*font-family: "Century Gothic", "Trebuchet MS", sans-serif;*/
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  font-size: 62.5%;
  background: #333;
  color: #000;
}
h1,h2,h3,h4,h5,h6 {
  font-family: "Lithos Pro", "Eras Light ITC", "Eras Medium ITC", "Trebuchet MS", sans-serif;
  font-family: "Trebuchet MS", Verdana, sans-serif;
}
a:link, a:visited{
  font-family: Verdana, Arial, Helvetica, sans-serif, sans-serif;
  text-decoration: none;
  color: #000;
}
a:hover {
  color: #ffc;
}
a[href^="http:"] {
}
a[href^="http:"]:hover {
}
ul {
  list-style: none;
}
abbr { border-bottom-width: 0;}
abbr[title]:hover { border-bottom: 1px dotted #000; cursor: help; }
a abbr[title]:hover {border-bottom: none; cursor: pointer;}
a img {
  border: none;
}
/************************************ END GENERAL STYLING *******************************************************/
#container {
  width: 100%;
  height: 100%;/* not really necessary */
  float: left;
  max-width: 3000px;
  min-width: 700px;
}
#container div.shell {
  margin: 0 auto;
  width: 85%;
}
#container #previews div.shell {
  width: 75%;
}
#mastHead {
  /*background: url(/imgs/tree.gif) 57% bottom no-repeat;*/
  background: url(/imgs/leafy.gif) 57% 0px no-repeat;
  float: left;
  width:100%;
  position: relative; 
 border-top: 10px solid #000;
  /* border-top: 10px solid #78593b;*/
}
/* this whole rule can be removed after site is complete****************************************/
p#construction {
  font-size: 1.6em;
  color: #FF6633;
  text-align: center;
  margin-top: 200px;
}
p#construction a {
  text-decoration: underline;
  color: #ccc;
}
p#construction a:hover {
  color: #ffc;
}
/***********************************************************************************************/
#nav {
  float: right;
}
#nav li {
  float: left;
}
#nav a:link, #nav a:visited {
  display: block;
  text-decoration: none;
  font-size: 1.2em;
  color: #ccc;
  padding: 1em 1.5em;
}
#nav a:hover {
  background: #000;
  color: #ffc;
}
#logoBox {
  position: relative;
  float: left;
  width: 100%;
  min-height: 90px;
}
#logoBox h1 {
  position: absolute;
  left: 17%;
  width: 143px;
}
#logoBox h1 a {
  text-indent: -999em;
  display: block;
  height: 28px;
  background: url(/imgs/logo.gif) left top no-repeat;
}
#logoBox h1 a:hover {
  background-position: left -30px;
}
div#breadCrumbs {
  margin-left: 1%;
  margin-bottom: 3px;/* IE ignores this. I hate IE */
  float: left;
}
div#breadCrumbs a, div#breadCrumbs span {
  font-size: 1.1em;
}
div#breadCrumbs a {
  color: #9c3;
}
div#breadCrumbs a:hover {
  color: #ffc;
}
div#breadCrumbs span {
  color: #ccc;
}
body.home #nav a#home, body.portfolio #nav a#portfolio, body.blog #nav a#blog, body.about #nav a#about, body.contact #nav a#contact
{
  background: #000;
  color: #ffc;
}
body.home #nav a#home:hover, body.portfolio #nav a#portfolio:hover, body.blog #nav a#blog:hover, body.about #nav a#about:hover,
body.contact #nav a#contact:hover
{
  color: #ccc;
}
#midBox {
  float: left;
  width: 100%;
  padding: 4em 0;
  min-height: 55em;
  background: #ccc;
}
#main {
  width: 62%;
  float: left;
}
body.sitemap #main {
  width: 100%;
}
#main p {
  font-size: 1.2em;
  line-height: 1.5em;
}
#main h2, h3 {
  color: #669900;
  font-size: 1.8em;
  margin-bottom: 1%;
  letter-spacing: 0.1em;
}
#main div.mainBlock {
  float: left;
  width: 100%;
  margin-bottom: 2.8em;
}
#main div.mainBlock p {
  margin-left: 2%;
}
#main div.mainBlock ul {
  margin-left: 15%;
  float: left;
}
#main div.mainBlock a {
  font-weight: bold;
  color: #000;
}
#main div.mainBlock > p a:hover {/* I dont want hovered anchors inside <abbr> tags to have this rule */
  background: #666;
  color: #ffc;
}
/*****************************************end opening *****************************************/
#main div.services {
  
}
#main div.services div#serviceWrap {
  float: right;
  width: 64%;
  margin-top: 2em;
  background: url(/imgs/uL.gif) left top no-repeat #666;;
}
#main div.services div#serviceWrap div{/* targets sliding divs */
  width: 100%;
  background: url(/imgs/bR.gif) right bottom no-repeat;
  float: right;
  color: #ccc;
}
#main div.services div#serviceWrap div a {/* targets sliding divs a */
  color: #ffc;
}
#main div.services div#serviceWrap div a:hover {/* targets sliding divs a */
  text-decoration: underline;
  color: #ffc;
}
#main div.services div#serviceWrap p > abbr {/* direct child so <abbr> inside <a> wont have this rule */
  font-weight: bold;
  color: #cc9;
}
#main div.services div#serviceWrap p > abbr:hover {/* direct child so <abbr> inside <a> wont have this rule */
  border-bottom: 1px dotted #cc9;
}
#main div.services div p {
  margin-left: 0;
}
#main div.services div#serviceWrap div p, #main div.services div#serviceWrap div ol {
  padding: 1em 3%;
}
#main div.services div#serviceWrap div p:first-child {
  background: url(/imgs/uR.gif) right top no-repeat;
}
#main div.services div#serviceWrap div p.lastP {
  background: url(/imgs/bL.gif) left bottom no-repeat;
}
#main div.services ul {
  margin-top: 3.8em;
  margin-left: 0;
  width: 35%;
}
#main div.services ul li {
  margin-bottom: 1em;
  width: 100%;
  padding: 0.5em 0;
  padding-left: 3%;
}
#main div.services ul li.active {
  width: 101%;
  background: #666;
}
#main div.services li.last {/* this needs to apply to ul and ol */
  margin-bottom: 0;
}
#main div.services ul li a {
  font-size: 1.2em;
}
#main div.services ul li a:hover {
  background: #666;
  text-decoration: none;
  color: #ffc;
}
#main div.services ul li.active a {
  color: #ffc;
  background: none;
}
#main div.services ul li.active a:hover {
  text-decoration: none;
  background: none;
}
#main div.services ol li {
  list-style-position: inside; 
  font-size: 1.5em;
  color: #ffc;
  margin-bottom: 0.5em;
}
#main div.services ol li span {
  color: #cc9;
  font-size: 0.8em;
}
/********************************************************end services******************************/
#main div.skills {
  margin-bottom: 0;
}
#main div.skills ul {
  margin-top: 1.5em;
}
#main div.skills li {
  font-size: 1.2em;
  margin-bottom: 0.8em;
  padding-left: 6.5em;
}
#main div.skills li.last {
  margin-bottom: 0;
  background: url(/imgs/jsStars.gif) left center no-repeat;
}
#main div.skills li#xhtml {
  background: url(/imgs/xhtmlStars.gif) left center no-repeat;
}
#main div.skills li#js {
  background: url(/imgs/phpStars.gif) left center no-repeat;
}
#main div.skills li#php {
  background: url(/imgs/xhtmlStars.gif) left center no-repeat;
}
/************************************************end skills*************************************/
#previews {
  width: 38%;
  float: left;
}
#previews p {
  font-size: 1.2em;
  line-height: 1.5em;
}
#previews h3 {
  padding-bottom: 0.1em;
  margin-bottom: 1.5em;
}
#previews h3 span {
  background: none;
}
#previews h3 span#pre {
  color: #ffffcc;
 /* padding-left: 5%;
  border-left: 2px dotted #690;*/
}
/*******************************************this section may need to be overriden at times ****************/
#previews h4 {
  font-size: 1em;/* this is for IE */
}
#previews h4 a {
  font-size: 1.4em;
  color: black;
  padding-left: 2em;
  background: url(/imgs/links.gif) left 0.2em no-repeat;
}
#previews h4 a:hover {
  color: #ffffcc;
  background-position: left bottom;
}
/*****************************************************end override ***************************************/
#previews div.preview {
  margin-bottom: 2.5em;
  float: left;
  width: 100%;
}
#previews div.preview a + p {
  
}
#previews div.lastPreview {
  margin-bottom: 0;
}
#previews div.preview img {
  /*border: 2px solid #999;
  border-bottom: 2px solid #666;
  border-right: 2px solid #666;
  padding: 0.3em;
  background: #fff;*/
  padding: 4px;
  border: solid 1px #996;
  border-right: solid 1px #663;
  border-bottom: solid 1px #663;
}
#previews div.preview img:hover {
 /* border: solid 2px #ffc;*/
 border: 1px solid #ffc;
}
#previews div.innerPre div {
  position: relative;
  margin-bottom: 2.5em;
}
#previews div.innerPre div p.date {
  position: absolute;
  left: 2.4em;
  top: 1.4em;
  color: #660;
  font-style: italic;
}
#previews div.preview h5 {
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: underline;
  font-style: italic;
  color: #690;
}
/********************************************** end midBox Styles *****************************************************/
#foot {
  width: 100%;
  float: left;
  min-height: 100px;
  padding: 1em 0 1.5em 0;
}
/* styles added only for survey */
p#survey {
	position: absolute;
	top: 25px;
	left: 0;
}
#foot div.shell {
   position: relative;/* added for survey only, remove when done */
}
/* end survey only styles */
#foot a {
  color: #cf9;
  color: #cf9;
  font-weight: bold;
}
#foot a:hover {
  text-decoration: none;
  color: #ffc;
}
#foot p {
  font-size: 1.2em;
  color: #ccc;
}
#foot ul {
  float: left;
  width: 100%;
  margin-top: 2.5em;
}
#foot li.left {
  float: left;
  font-size: 1.2em;
  color: #ccc;
}
#foot li.right {
  float: right;
  margin-left: 1%;
  font-size: 1.2em;
}
#foot li.right a{
  padding-left: 1.5em;
  background: url(/imgs/valid-checks.gif) left 2px no-repeat;
}
#foot li.rss {
   margin-top: -6px;
}
#foot li.rss a {
  background: none;
  padding: 0;
}
#foot li a:hover {
  color: #ffffcc;
  text-decoration: none;
  background-position: left -12px;
}
/*********************************** try absolute positioning of inner divs to remove floating, worked better in IE **********/
#foot div#browsers {
 /*float: left;*/
 position: relative;
 left: 50%;
 margin-left: -19em;
 width: 37.5em;
}
#foot div#browsers div {
  position: absolute;
  width: 7em;
  /*float: left;*/
  /*margin-right: 1%;*/
}
#foot div#browsers div#ff {
  left: 0;
}
#foot div#browsers div#ie {
  left: 7.5em;
}
#foot div#browsers div#safari {
  left: 15em;
}
#foot div#browsers div#chrome {
  left: 22.5em;
}
#foot div#browsers div#opera {
  left: 30em;
  margin-right: 0;
}
#foot div#browsers p {
  margin-bottom: 1.5em;
  text-align: center;
}
#foot div#browsers div img {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  margin-bottom: 5px;
}
#foot div#browsers div a {
  display: block;
  text-align: center;
}
#foot div#browsers div a span {
  display: block;
  text-align: center;
}
#foot a[title="sitemap"] {
  
}
p#designed-for {
  padding: 1em 0;
}
/************************************* self-clearing floats using generated content *********************************/
#container div.shell:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}