/* ----------------------------------------------------------------------------------------------- 

  Site layout for DanielHumann.com

----------------------------------------------------------------------------------------------- */ 

/* Reset all */
* { margin: 0; padding: 0; outline: 0; }

body {
  margin: 0;   
  padding: 0; 
  text-align: center;
  font-size: .9em; 
  font-family: 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
  color: #444;
  background: #fff url(../ui/bg-bluesky.jpg) 25% 0 repeat-x;
}


h1, h2, h3, h4 {
  font-family: 'Trebuchet MS', Tahoma, Arial, Sans-serif;
}

h1 {
  position: relative;
  font-weight: normal;
  color: #666;
  padding: 15px 10px 5px 10px;  
}

h2 {
  font-size: 2.5em;
  color: #666;
  padding: 16px 10px 4px 10px;  
  letter-spacing: -1px;
}


h2.serviceTitle { margin-top: 8px; border-top: 1px solid #777; }
h2.serviceTitle a { display: block; text-decoration: none; color: #666; }
h2.serviceTitle a:visited { color: #666; }
h2.serviceTitle a:hover { text-decoration: none; color: #ff9900; }

h2.first { border-top: 0px; }


h3 {
  font-size: 1.75em;  
  padding: 10px 10px 4px 10px;
  color: #9bb13a;
}

h3.serviceSubTitle { margin-top: 1px; border-top: 0px solid #ccc; }
h3 a:link { color: #9bb13a; }
h3 a:visited { color: #9bb13a; }
h3.first { border-top: 0px; }
h3.specialHdr { color: #777; }
h3.phHdr { font-size: .9em; color: #777; }
h3.glossletter { font-size: 2em; background: #eee; padding-bottom: 10px; }


h4 {   
  font-size: 1.25em;  
  padding: 16px 10px 0 10px; 
}


a, a:active, a:link { color: #006193; }
a:visited { color: #800080; }
a:hover { color: #ff9900; text-decoration: none; }
a img { border: 0px; }

p { padding: 10px; line-height: 140%; }

ul, ol { margin: 10px 10px; padding: 0 20px; }
ul { list-style: none; }

dfn { font-style: normal; cursor: help; }
acronym { cursor: help; border-bottom: 1px dotted #5B5B5B; }

hr { height: 1px; margin-top: 8px; padding: 0; border: 0; color: #ccc; background: #ccc; }
hr.dark { color: #555; background: #555; }


/* Utilities 
------------------------------------------------------------------------------------- */ 

.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

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

.clearit { clear: both; }

.tm { 
  padding-top: 4px;
  font-family: Arial; 
  font-size: .25em; 
  vertical-align: super;
}

.st { font-size: .9em; }
.sm { font-size: .8em; }
.tiny { font-size: .5em; letter-spacing: .005em; }
.noshow { display: none; }
.hid { visibility: hidden; }
.hot { font-style: normal; color: #ff0000; }
.note { font-size: .9em; }
.error { color: #ff0000; }




/* ------- Layout Blocks ------- */ 


/* Top - Masthead - Logo
------------------------------------------------------------------------------------- */ 
#top {
  background: transparent url('../ui/bg-top.jpg') top center no-repeat;
}

html>body #top {
  background: transparent url('../ui/bg-top.png') top center no-repeat;
}

#masthead {
  position: relative;
  height: 56px;
  margin: 0;
  padding: 0 0 0 0;
  text-align: center;
  background: transparent url('../ui/bg-mast.gif') top center no-repeat;
}

#brand {
  position: relative;
  top: 6px;
  width: 900px;  
  margin: 0 auto; 
}

#brand strong { display: none; }

#logo {
  display: block;
  position: absolute;
  z-index: 100;
  top: 7px;
  left: 8px;
  height: 32px;
  width: 32px;
  background: transparent url('../ui/bg-logo.gif') top left no-repeat;
}

#logo * { display: none; }




/*  Main Navigation
----------------------------------------------------------------------------------------------- */ 

#nav {
  position: relative;
  z-index: 80;
  height: 40px;
  width: 900px;  
  margin: 0 auto; 
  padding: 0;
}

#nav ul {
  display: inline;
  float: left;
  list-style: none;
  width: 380px;  
  height: 40px;
  margin: 4px 0 0 52px; 
  padding: 0;  
}

#nav ul li {
  display: inline;
  margin: 0; 
  padding: 0;
}

#nav ul li a, #nav ul li span {
  float: left;
  margin: 0;  
  padding: 0 12px;
  font: bold 15px/35px 'Trebuchet MS', Helvetica, Arial, Geneva, sans-serif;
  text-decoration: none;  
  text-transform: lowercase;
  color: #a8c03f;
}

#nav ul li a:hover, 
#nav ul li a:active {
  color: #eee;
  background: none;
}

#nav ul li.first a, #nav ul li.first span {
  border-left: 0;
}

#nav ul li.current a, #nav ul li.current span {  
  color: #777;
  cursor: help;
}



/*  Site Tools Nav
----------------------------------------------------------------------------------------------- */ 

#tools {
  position: absolute;
  top: 4px;
  right: 0px;
  z-index: 80;
  height: 40px;
  margin: 0 auto; 
  padding: 0;
  font-size: 11px;
  border: 0px dotted #777;
}

html>body #tools { top: 0; }

#tools ul {
  list-style: none;
  width: 300px; /* old width */
  width: 80px;  
  height: 40px;
  margin: 12px 0 0 0; 
  padding: 0;  
}

#tools ul li {
  display: inline;
  height: 19px;
  line-height: 19px;
  margin: 0; 
  padding: 0;
}

#tools ul li a, #tools ul li span {
  height: 19px;
  vertical-align: middle;
  margin: 0 8px;  
  padding: 3px 8px 2px 20px;
  font-size: .9em;
  text-decoration: none;  
  text-transform: lowercase;
  color: #a8c03f;
  background-color: transparent;
  background-image: none;
  background-position: 0 0;
  background-repeat: no-repeat;
  border: 0px dotted #444;
}

#tools ul li a:hover { color: #fff; }
#tools ul li.current a, #tools ul li.current span {  color: #777; cursor: help; }



a#pnav {
  position: absolute;
  top: 8px;
  right: -68px;
  z-index: 80;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  background: transparent url('../ui/next-arrow.gif') 0 0 no-repeat;
}

html>body a#pnav {
  background: transparent url('../ui/next-arrow.png') 0 0 no-repeat;
}

a#pnav:hover {
  background-position: 0 -32px;
}



/*  Page Heading 
----------------------------------------------------------------------------------------------- */ 

#heading {
  position: relative;
  width: auto;  
  margin: 0 auto; 
  padding: 0;  
  border: 0px dotted #ccc;
}

#hcont {
  position: relative;
  width: 870px;
  height: 300px;
  margin: 0 auto; 
  padding: 0;
}

#heading h1 {
  position: absolute;
  top: 76px; 
  left: 0;
  width: 870px;
  margin: 0 auto; 
  padding: 0;
  font-size: 60px;
  font-family: Trebuchet MS, Myriad Pro, Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: lowercase;
  text-align: left;
  z-index: 1;
  border: 0px dotted #777;
}

p#intro {
  position: absolute;
  z-index: 20;
  top: 148px;
  left: 0;
  width: 520px;
  margin: 0; 
  padding: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 1.6em;
  font-style: italic;
  text-transform: none;
  text-align: left;
  color: #cd9857;
}



/* Image of me... 
---------------------------------------- */

#me {
  display: block;
  position: absolute;
  z-index: 16;
  top: -8px;
  right: -32px;
  height: 325px;
  width: 350px;
  background: transparent url(../ui/me-ld.gif) center center no-repeat;
  border: 0px dashed red;
}

html>body #me {
  top: -32px;
  right: -50px;
  height: 375px;
  width: 375px;
  background: transparent url(../ui/me-ld.png) center center no-repeat;
}


p#hextra {
  position: absolute;
  bottom: 52px;
  left: -8px;
  font-size: .8em;
  color: #9f9f9f;
}

p#hextra a { color: #9f9f9f; }




/*  Core Wrapper
----------------------------------------------------------------------------------------------- */ 

#wrap {
  position: relative;
  z-index: 50;
  width: auto;  
  margin: 0 auto;
  font-size: .9em;
  text-align: left;
}


/* Main Column
--------------------------------------------------------------------------------------------- */ 

#content {
  position: relative;
  clear: both;
  width: 900px;  
  padding: 0;   
  margin: 0 auto;
  padding: 0;
  background: transparent;  
  border: 0px dotted #ccc;
}

#main, #lead {  font-size: .9em; }

#main {
  display: inline;  
  float: left;
  width: 580px;
  margin: 0 0 1em 0;
  padding: 0 0 1em 0;
  border: 0px dotted #ff0000;
}

body.full #main {
  position: relative;
  float: none;
  width: auto;
  display: block;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

body#websitesPage #main {
  width: 440px;
  padding-bottom: 0;
}

#main ul li, ul.accent li {
  margin-bottom: 4px;
  list-style-image: url(../ui/bullet.gif);
}


.cols { 
  font-size: .85em;
  padding-bottom: 1em; 
}

.cols h3 { margin-bottom: 0; padding-bottom: 0 !important; }


/* Split 3
----------------------------------------------------------------------------------------------- */ 


.col {
  width: 282px;
  padding: 0 0 16px 0;    
  display: inline;
  border: 0px dotted #ccc;
}

.col2 {
  width: 282px;
  padding: 0 0 16px 0;  
  display: inline;  
  border: 0px dotted #ccc;
}

.space-sep {
  margin-right: 22px;
}







/* Post Meta Data 
----------------------------------------------------------------------------------------------- */ 

.postmeta {  
  padding: 7px 5px; margin: 20px 10px 15px 10px;  
  font-size: 10px;  
  color: #545454;
  background: #eee;
  border: 1px solid #ccc;
}
.postmeta .date{ margin: 0 10px 0 5px;  }
.postmeta a.comments { margin: 0 10px 0 5px;  }
.postmeta a.readmore { margin: 0 10px 0 5px;  }

.post-info { font-size: .95em; padding-top: 3px; color: #444;  }
.post-info a { color: #777; }
.post-info a:hover { color: #ff9900; }



/* Fluff & Thumb Images
----------------------------------------------------------------------------------------------- */ 


.mthumb {
  margin: 0 0 4px 4px;
  padding: 0;
}

img.float-right {
  margin: 10px 10px 5px 16px;  
  padding: 10px;
  background: #eee;
  border: 1px solid #ccc;
}

img.float-left {
  margin: 10px 16px 5px 10px;
  padding: 10px;
  background: #eee;
  border: 1px solid #999;
}

img#pano { margin-top: 24px; }




#clientThumbs {
  padding: 1em 0;
  text-align: center;
}

#clientThumbs a img {
  margin: 1px;
  padding: 12px 3px;
  background: #fff;
  border: 1px solid #ccc;
}

#clientThumbs a:hover img {
  border: 1px solid #ff9900;
}



.xthumb {
  position: relative;
  margin: 0 0 0 0;
  padding: 0 0 0 6px;
  font-size: .9em;
  z-index: 50;
  border: 0px dashed #ccc;
}

.xthumb p {
  margin: 0 0 8px 0;
  font-size: .9em;
  line-height: 90%;
}

.xthumb a img {
  margin: 3px;
  padding: 1px;
  border: 1px solid #ccc;
}

.xthumb a:hover img {
  border: 1px solid #ff9900;
}


.flicks {
  padding: 0;
  text-align: left;
}

.flicks a img {
  margin: 3px;
  padding: 1px;
  border: 1px solid #ccc;
}

.flicks a:hover img {
  border: 1px solid #ff9900;
}




#logoSamples {
  width: 240px;
  margin: -8px 4px 8px 16px;
  text-align: center;
}

#logoSamples a img {
  margin: 4px;
  padding: 4px;
  border: 1px solid #777;
}

#logoSamples a:hover img {
  border: 1px solid #ff9900;
}




.boxed {
  margin: 4px 8px 4px 16px;
  padding: 4px;
  background: #eee;
  border: 1px solid #ccc;
}

.boxed strong {
  display: block;
  margin: 4px;
  padding: 4px;
  color: #777;
  border-bottom: 1px solid #ccc;
}


.boxed ul { margin-left: 0px; }
.boxed li { margin: 0 0 3px -8px; }
#main .boxed ul li { list-style-image: none; }




/* Glossary Letter List
----------------------------------------------------------------------------------------------- */ 

ul.glossList {
  margin: 2px 0 0 10px;
  padding: 0;
  list-style: none;
}

ul.glossList li {
  float: left;
  margin: .25em;
  padding: 0;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}

ul.glossList li a, .glossList li a:visited {
  display: block;
  min-width: 1.1em;
  margin: 0;
  padding: .5em .5em;
  text-decoration: none;
  text-align: center;
  color: #777;
  background: #eee;
  border: 1px solid #ccc;
}

ul.glossList li a span {
  padding: 0 0;
}

ul.glossList li a:hover {
  color: #fff;
  background: #ff9900;
  border: 1px solid #fff;
}


/* Definition Lists used for Glossary...
----------------------------------------------------------------------------------------------- */ 

dl { border-bottom: 1px solid #999; }

dt {
  width: 15em;
  padding: .5em;
  float: left;
  margin: 0;
  border-top: 1px solid #999;
  font-weight: bold;
}

dd {
  margin-left: 16em;
  padding: .5em;
}

dd.first { border-top: 1px solid #999; }




/* Sidebar Column
----------------------------------------------------------------------------------------------- */ 

#sidebar {
  display: inline;
  float: right;
  width: 280px;
  padding: 0; 
  margin: 0;
  font-size: .9em;
}  

body#websitesPage #sidebar {
  width: 440px;
  margin-top: -6px;

}

#sidebar h2 { padding-left: 0; }

#sidebar h3 {
  margin-top: 10px;
  padding: 15px 5px 10px 5px; 
  color: #a8c03f;
  border-bottom: 1px solid #999;
}

body#websitesPage #sidebar h3 { 
  margin-top: 0px;
  padding-bottom: 4px; 
  border-bottom: 0px;
}

#sidebar h3.specialHdr { color: #777; } 
#sidebar h3.phHdr { color: #777;   margin: 12px 0 0 0; padding: 0 0 0 4px; border-bottom: 0px; }

#sidebar ul.sidemenu {
  text-align: left;
  margin: 7px 5px 8px 0px; padding: 0;    
}

#sidebar ul.sidemenu li {
  list-style: none;
  padding: 8px 10px;
  margin: 0;  
  border-bottom: 1px solid #ccc;
}

#sidebar ul.sidemenu li { height: 1%; }
html>body #sidebar ul.sidemenu li { height: auto; }

#sidebar ul.sidemenu li a {
  display: block;
  text-decoration: none;  
  color: #777;
  font-weight: bold;  
  font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
  font-size: 14px;  
  border: none;
}

#sidebar ul.sidemenu li a span {
  color: #999;  
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: normal;  
  font-size: 11px;
}

#sidebar ul.sidemenu li a:hover,
#sidebar ul.sidemenu li a:hover span {  color: #ff9900;  }

#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { border: none; }






.sample {
  height: 120px;
  margin: 16px 0;
  padding: 8px 0;
  border-top: 1px solid #ccc;
}

.sample a.float-right {
  margin: 0 0 4px 8px;
  padding: 1px;
  border: 1px solid #fff;
}

.sample a.float-right {
  margin: 12px 0 4px 8px;
  padding: 1px;
  border: 1px solid #fff;
}

.sample a.float-right:hover {
  border: 1px solid #ff9900;
}






/* Middle Block
----------------------------------------------------------------------------------------------- */ 

#mid {
  position: relative;
  width: auto;
  clear: both;
  padding: .5em 0;
  margin: 0 auto;
  margin-top: 30px;
  font-size: .8em;
  color: #222;
  background: #b9d445;
  border-top: 1px solid #ccc;
}

body#portfolioPage #mid,
body#contactPage #mid,
body#sitemapPage #mid {
  margin-top: -8px;
}

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

#mid hr {
  color: #81a03d;
  background: #81a03d;
}

#mid h2#Testimonials { margin: 0 0 0 0; padding: 0 0 0 0; font-size: .0001em; background: #b9d445; }
#mid h3, #mid h3 a {  color: #222; text-decoration: none; }
#mid h3 a:hover {   color: #fff; }


#mid-int {  
  position: relative;
  margin: 0 auto;  
  width: 900px;
  text-align: left;  
}


#mid-int ul.col-list {
  list-style: none;
  margin: 5px 0 0 5px; 
  padding: 0;  
  width: 98%;
}

#mid-int ul.col-list li {
  border-bottom: 1px solid #81a03d;
}

#mid-int ul.col-list li.last {
  border-bottom: 0px;
}

#mid-int ul.col-list li a {
  width: 98%;
  display: block;
  text-decoration: none;
  line-height: 2em;
  font-weight: bold;
  padding: 4px 0 4px 8px;
  color: #222;
  border: none;
}

#mid-int ul.col-list li a span {
  color: #444;
  font-style: italic;
  font-weight: normal;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

#mid-int ul.col-list li a:hover,
#mid-int ul.col-list li a:hover span {
  color: #fff;
  text-decoration: none;
}

#mid-int img.float-right {
  margin: 16px 10px 5px 16px;  
  padding: 4px;
  background: #444;
  border: 0;
}





/* Convenient Navigation Tools
------------------------------------------------------------------ */

#pgnav {
  height: 1%;
  position: relative;
  margin: 0;
  padding: .5em 0;
  text-align: center;
  border-top: 1px solid #81a03d;
}

html>body #pgnav {
  height: auto;
  min-height: 1.5em;
}

#pgnav li {
  display: inline;
  padding: 0;
  border: 0px dotted red; 
}

#pgnav a { 
  display: inline;
  width: auto;
  color: #677f31;
}

#pgnav a:hover { 
  text-decoration: none;
}

.back { float: none; position: absolute; left: 0; }
.back a { padding: 10px; }
.back span { color: #81a03d; padding: 10px; cursor: help; }

.uptop { position: absolute; right: 0; }
.uptop a { padding: 10px; }

.goto-prev { position: relative; left: -1.75em; }
.goto-next { position: relative; left: -.75em; border-left: 1px solid #555; }
.goto-prev span, .goto-next span { color: #81a03d; cursor: help; }

html>body .goto-prev { left: 0; margin-right: .5em; }
html>body .goto-next { left: 0; margin-left: .5em; }




/* Bottom Block
----------------------------------------------------------------------------------------------- */ 

#bottom {
  position: relative;
  width: auto;
  text-align: center;
  padding: 4em;
  font-size: 10px;
  color: #fff;
  background: #222;
  border-top: 1px solid #fff;
}

#botint {
  position: relative;
  width: 900px;
  margin: 0 auto;
  text-align: left;
}

#bottom p#copyr {
  margin-left: 8px;
  padding-left: 0px;
}

#bottom p#copyr a {
  color: #fff;
  text-decoration: none;
}