/*==========================================================================*/
/*basics*/
/*==========================================================================*/
body {
  font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
  font-size:80%;
  margin:0;
  padding:0;
  background:#fff;
  color:#000;
}

h1,
h2,
h3,
h4,
h5 {
  margin:0;
  padding:0;
  font-weight:normal;
}

p,
ul,
li {
  margin:0;
  padding:0;
}

ul,
ul li {
  list-style:none;
}

dl,
dl dt,
dl dd {
  margin:0;
  padding:0;
}

img {
  border:0
}

a {
  color:#F05B21;
  text-decoration:none;
}

a:hover {
  color:#c2c2c2;
  text-decoration:none
}

/*==========================================================================*/
/*holders*/
/*==========================================================================*/
#outerWrapper {
  width:829px;
  margin:0 auto;
  background:url(../images/interface/treaclespongeBG.gif) repeat-y;
}

#innerWrapper {
  width:801px;
  margin:0 auto;
}

#header {
  width:100%;
  height:86px;
  margin:0;
  display:block;
  position:relative;
  background:#fc0 url(../images/interface/bannerHalfMoon.gif) 12px 0 no-repeat;
}

#header h1,
#header h2,
#header h3 {
  float:left;
  display:block;
  background-repeat:no-repeat;
}

#header h1 {
  margin:0 0 0 0;
  position:relative;
  width:156px;
  height:86px;
  background-image:url(../images/interface/treaclespongeLogo.gif);
  background-position: 28px 12px;
}

#header h1 a {
  width:156px;
  height:86px;
  display:block;
}

#header h1 span,
#header h2 span,
#header h3 span {
  display:none;
}

#header h2 {
  width:242px;
  height:23px;
  margin-top:30px;
  background-image:url(../images/interface/title1_ddt.gif);
  background-position:100% 0;
  padding-left:250px;
}

#header h3 {
  width:89px;
  height:23px;
  margin-top:30px;
  margin-left:20px;
  background-image:url(../images/interface/webPrint.gif);
  background-position:100% 0;
}

/*==========================================================================*/
/*navigation*/
/*==========================================================================*/

#navigation {
  width:100%;
  height:30px;
  background:#666;
  font-weight:bold;
  border-top:2px solid #fff;
  border-bottom:2px solid #fff
}

#navigation ul {
  float:right;
}

#navigation li {
  float:left;
}

#navigation li a {
  display:block;
  border-left:1px solid #fff;
  padding:8px 40px;
  color:#fff
}

#navigation li a:hover {
  color:#Fc0
}

/*on states*/ 
#pageID_About li.navAbout a,
#pageID_Portfolio li.navPortfolio a,
#pageID_Resume li.navResume a,
#pageID_Client li.navClient a,
#pageID_Contact li.navContact a {
  color:#Fc0
}

/*==========================================================================*/
/*Main Content*/
/*==========================================================================*/
#mainContent {
  width:350px;
  float:left;
  padding:12px 24px 12px 12px;
}

#mainContent h2 {
  font-size:1.4em;
  color:#F05B21;
  font-weight:bold;
}

body#pageID_Home h2 {
  font-size:1.2em;
}

#mainContent h3 {
  font-size:1.2em;
  font-weight:bold;
  color:#F05B21;
}

body#pageID_Home #mainRight h3 {
  font-size:1.1em;
  color:#fff;
}

#mainContent h4 {
  font-size:.9em;
  color:#000;
  font-weight:bold;
}

#mainContent p {
  font-size:.9em;
  margin:0 0 .5em 0
}

#mainContent ul {
  margin-left:1em;
}

#mainContent li {
  margin: .3em 1em;
  font-size:.9em;
  list-style-type:square;
  color:#000;
}

#mainContent ul span {
  color:#000;
}

/*==========================================================================*/
/*footer area*/		
/*==========================================================================*/
#footer {
  clear:both;
  width:829px;
  margin:auto;
  height:63px;
  font-size:0.7em;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  text-align:center;
  background:#fc0 url(../images/interface/footerBG.gif) 0 0 no-repeat;
}

#footer ul {
  padding:2em 0;
}

#footer ul li {
  display:inline;
}

#footer a {
  color:#F05B21
}

#footer a:hover {
  color:#c2c2c2
}

/*==========================================================================*/
/*closure area*/		
/*==========================================================================*/
#closure {
  display:block;
  width:850px;
  margin:auto;
  height:50px;
}

#closure p.validation {
}

#closure p.validation img {
  float:right;
  padding:1em
}

/*==========================================================================*/
/*home page*/
/*==========================================================================*/
#pageID_Home #mainContentBG {
  background:url(../images/interface/circles1.gif) 0 0 no-repeat;
  height:668px;
  padding:0;
  margin:0;
  width:100%
}

#pageID_Home #mainContent {
  width:750px;
}

#pageID_Home #mainLeft {
  float:left;
  width:350px;
  margin-top:0px;
  padding-top:20px;
  margin-left:25px;
}

#pageID_Home #mainLeft ul {
  width:280px;
}

#pageID_Home #mainRight {
  float:left;
  width:360px;
  position:relative;
  top:230px;
  margin-left:0;
}

#pageID_Home #mainRight #portfolioImage {
  width:100%;
  height:260px;
  background-repeat:no-repeat;
}

/*==========================================================================*/
/*about page*/
/*==========================================================================*/

#pageID_About #mainContentBG {
  background:url(../images/interface/circles2.gif) 0 0 no-repeat;
}

/*==========================================================================*/
/*portfolio page*/
/*==========================================================================*/

#pageID_Portfolio #mainContentBG {
  background:url(../images/interface/circles2.gif) 10px 0 no-repeat;
}

#pageID_Portfolio #mainContent {
  width:780px;
  padding:12px 10px 12px 12px;
}

#pageID_Portfolio #mainContent .contentHolder {
  border-top:1px dotted #A1A1A1;
  float:left;
  clear:both;
  width:100%;
  padding:1em 0;
  margin:1em 0;
}

#pageID_Portfolio #mainContent .contentHolder .content {
  float:left;
  width:410px;
}

#pageID_Portfolio #mainContent .contentHolder .content h3 {
  display:block;
  font-size:1.2em;
  float:left;
  width:300px
}

#pageID_Portfolio #mainContent .contentHolder .content p {
}



/*pagination*/
#pageID_Portfolio #mainContent div.button {
}

#pageID_Portfolio #mainContent div.button a {
  color:#F05B21;
  font-size:.9em;
}

#pageID_Portfolio #mainContent div.button a:hover {
  color:#888;
}

#pageID_Portfolio #mainContent div.button a.selected {
  color:#000;
}
#pageID_Portfolio #mainContent p a.inactive {
  background:#666 !important;
  border:1px solid #fff;
  color:#999 !important;
}

#pageID_Portfolio #mainContent .contentHolder .content ul {
  border-bottom:1px dotted #A1A1A1;
  clear:left;
  display:block;
  height:30px;
  width:100%;
  padding-bottom:.5em;
  margin-bottom:.5em;
  margin-left:0;
}

#pageID_Portfolio #mainContent .contentHolder .content ul li {
  list-style:none;
}

#pageID_Portfolio #mainContent .contentHolder .content ul li.checkmark {
  background:transparent url(../images/checkmark.gif) no-repeat 0 50%;
  float:left;
  margin-left:0;
  margin-right:12px;
  padding-left:20px;
}

#pageID_Portfolio #mainContent .contentHolder .portfolioImage {
  float:left;
  margin-left:24px
}

#pageID_Portfolio #mainContent .contentHolder .portfolioImage img {
  border:1px solid #999
}

/*Links*/

body.portfolio h4 a.portfolio {
  color:#c2c2c2
}

body.print h4 a.print {
  color:#c2c2c2
}

/*==========================================================================*/
/*resume page*/
/*==========================================================================*/

#pageID_Resume #mainContentBG {
  background:url(../images/interface/circlesResume.jpg) 1px 0 no-repeat;
  height:600px
}

/*==========================================================================*/
/*client page*/
/*==========================================================================*/

#pageID_Client #mainContentBG {
  background:url(../images/interface/circles2.gif) 0 0 no-repeat;
}

#pageID_Client #mainContent {
  width:990px;
}

#pageID_Client .floatLeft {
  float:left;
  width:250px;
  padding-top:20px;
  margin-righ:25px;
}

#pageID_Client .floatLeft h3 {
}

/*==========================================================================*/
/*contact page*/
/*==========================================================================*/
#pageID_Contact #mainContentBG {
 background:url(../images/interface/circles2.gif) 0px 0 no-repeat;
}

#pageID_Contact #mainContentBG #mainContent {
  margin-bottom:12px;
}

#pageID_Contact form {
  font-size:.9em;
  width: 330px
}

#contact form fieldset {
  width:300px; /* safari fix*/
  border: 1px solid #666;
  padding: 10px;
  margin: 0;
  margin-right:10px;
}

#contact form fieldset legend {
  font-size:11px;
  font-weight:bold
}

#contact form label {
  display: block;
  font-weight:bold;
  float: left;
  width: 100px;
  padding: 0;
  margin: 5px 10px 0 0;
  text-align: right;
}

#contact form input {
  width: 130px;
}

#contact form textarea {
  width:290px;
  height:70px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px
}

#contact form br {
  clear:both
}

#contact form .inputSubmit {
  font: bold 10px Verdana, sans-serif;
  padding: 0px;
  margin-top:12px;
  width:60px;
  border: 1px solid;
  text-decoration: none;
  background: #fc0;
  color: #fff;
  float:right;
  border-color: #FFC8A4 #7D3302 #3F1A01 #FF9A57;
  cursor:pointer
}

#contact form .inputSubmit:hover {
  color:red
}

#contact form .formHelpSection {
  width:180px;
}

#contact form .formMessageSection {
  width:290px;
}

/*==========================================================================*/
/*error page*/
/*==========================================================================*/

#pageID_Error #mainContentBG {
  background:url(../images/interface/circles2.gif) 0px 0 no-repeat;
}

#pageID_Error #mainContent {
  width:780px;
}

#pageID_Error #mainContent .contentHolder {
  border-top:1px dotted #A1A1A1;
  float:left;
  clear:both;
  width:100%;
  padding:1em 0;
  margin:1em 0;
}

#pageID_Error #mainContent .contentHolder .content {
  float:left;
  width:410px;
}

#pageID_Error #mainContent .contentHolder .content h3 {
  display:block;
  color:#F05B21;
  font-size:1.2em;
  float:left;
  width:300px
}

/*==========================================================================*/
/*Misc*/
/*==========================================================================*/
hr {
  border-color: #999;
  border-style:solid;
  border-width:1px 0 0 0;
  height:1px;
  background:none;
}

img.floatLeft {
  float:left;
  padding:12px;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}