/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2006.12.18
   PURPOSE: Controls the layout of the site elements
 **************************************************************/



/**************************************************************
   #content: holds everything except footer.  Uses modified 
   'footerStickAlt' technique.
 **************************************************************/

#content {
  position: relative;
  float: left;
  width: 100%;  
  min-height: 100%;
}



/**************************************************************
   .width: Sets the width of the content. Needed because much 
   of the interface uses tiling bg images that need to be 100% 
   of screen width.
 **************************************************************/
 
 /* Used for containers that are always 980px in width */
.width {   
  position: relative; 
  z-index: 2;
  margin: 0 auto;
  
  /* (960px width) + (10px left padding) + (10px right padding) = 980px */ 
  width: 960px;   
  padding: 0 10px;
  
  text-align: left;
}



/* Used to set minimum width so tiling backgrounds always fill entire screen width */
#topBar, #logoBar, #loginBar, #footer {
  min-width: 980px;
}




/**************************************************************
   #topBar: Holds site message or copyright (brown header bar)
 **************************************************************/

#topBar {   
  position: relative;
  z-index: 2;
  
  min-height: 2em;  
  font-size: 0.9em;  
  color: #AB9A81;
  background: #755323 url(/wp-content/themes/todc/img/bg/topBar.gif) repeat-x top left;
}

#topBar p {
  position: absolute;
  top: 0.1em;
  right: 19px;
  margin: 0;
  padding: 0;
}

#topBar a {
  color: #CFC2AF;
}

#topBar a:hover {
  color: #FFF;
}




/**************************************************************
   #logoBar: holds search form and site logo (light green
   header bar)
 **************************************************************/
 
#logoBar {
  position: relative;
  z-index: 2;

  /* If site title is text, use em's for min-height, otherwise 
     use px since it doesn't need to expand with font-size changes
  min-height: 8.7em; */
  min-height: 105px;  
  background: #D1EC80 url(/wp-content/themes/todc/img/bg/logoBar.gif) repeat-x top left;
}

#logoBar img {
  position: absolute;
  top: 15px;
  right: 19px;
  border: 0;
}

/* For SEO and text only agents */
#logoBar .seo {
  position: absolute;
  top: -1000px;
  left: -1000px;  
}


/* Plain text headers */
#logoBar h1,
#logoBar h2 {  
  position: relative;
  margin: 0;
  padding: 0 10px 0 0;
  text-align: right;
}

#logoBar h1 {
  top: -15px;
  font-size: 3.5em;
}

#logoBar h2 {
  top: -25px;
  font-size: 1.5em;
}


/* Search field */
#searchForm {
  width: 21.7em;  
  background: #755323 url(/wp-content/themes/todc/img/bg/searchForm.gif) repeat-x bottom left;
} 

#searchForm div {
  height: 32px;
  background:  url(/wp-content/themes/todc/img/bg/searchForm_corner.gif) no-repeat bottom right; 
}

#searchForm span.fields {
  position: absolute;
  top: -1.4em;
  left: 3.2em;
}

#searchForm input {
  vertical-align: middle;
  margin: 0 10px 0 3px;  
}







/**************************************************************
   #loginBar: holds account admin info (dark green header bar)
 **************************************************************/
 
#loginBar {
  position: relative;
  z-index: 2;
  
  min-height: 2em;
  color: #FFF;
  background: #9EC91C url(/wp-content/themes/todc/img/bg/loginBar.gif) repeat-x bottom left;
}

#loginBar a {  
  text-decoration: none;
  color: #F8F4B6;
}

#loginBar a:hover { 
  color: #FFF;
}

/* Links use a span to give the underline so the icon isn't underlined */
#loginBar a span {
  text-decoration: underline;
}

#loginBar a img {
  vertical-align: middle !important;
  vertical-align: bottom;
  border: 0;
  text-decoration: none;
}

/* The menu top goes here because in absolute positionning, top is 
   consistent across all browsers, so it'll always be in the right 
   spot, even with font increase/decrease */
#loginBar #menuTop {
  position: absolute;
  z-index: 3;
  top: -38px;
  left: 15px;
  
  /* Give it height to grow if the green #loginBar increases in height */
  height: 6em;
  width: 267px;
  
  background: url(/wp-content/themes/todc/img/bg/menu_top.gif) no-repeat top left;
}

#loginBar ul {
  position: absolute;
  top: 0.2em !important;
  top: 0.3em;
  right: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#loginBar ul li {
  display: inline;
  margin: 0;
  padding: 0 0 0 10px;
}





/**************************************************************
   #page: holds all page content
 **************************************************************/

#page {
  position: relative;
  z-index: 2;
  
  float: left;
  clear: both;
  
  width: 100%;
  
  padding-bottom: 10em;
  
  /* Define here for IE and Netscape so that the vertical menu
     bar always extends full height of content */
  background: url(/wp-content/themes/todc/img/bg/menuBar.gif) repeat-y 22px 0px;
}


/**************************************************************
   #menuBar: main menu and news column
 **************************************************************/

#menuBar {
  position: relative;
  z-index: 2;
  top: -40px;
  float: left;
  width: 290px;  
}

#menuBar #menuCorners {
  position: absolute;
  z-index: 4;  
  
  /* Buggy top/left for Netscape only */
  top: -9px;
  left: 17px;
  
  height: 9px;
  width: 266px;
  
  background: url(/wp-content/themes/todc/img/bg/menu_corners.gif) no-repeat top left;  
}


/* Hide from Netscape to feed correct top/left for all browsers */
#menuBar div/*COMMENT HACK*/#menuCorners {
  top: 31px;
  left: 7px;
}

#menuBar ul#menu {
  position: relative;
  z-index: 4;
  margin: 0 52px 0 40px;
  padding: 0;
  list-style: none;
}

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

#menuBar ul#menu li a {
  display: block;
  padding: 5px 0;
  
  font: small-caps 1.9em georgia, serif;
  letter-spacing: -0.02em;
  text-decoration: none;
  
  color: #B9A68B;
  border-bottom: 1px solid #D8CBBA;
}

#menuBar ul#menu li a:hover,
#menuBar ul#menu li.here a {
  color: #795625;
  border-bottom: 1px solid #CBBEAC;
}


/* Make sure that even if not enough content, the vertical menu
   bar will always extend the full height of the screen */
#menuBarBg {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;

  height: 100%; 
  width: 100%;  
}

/* Fix Opera's nested box bug */
@media all and (min-width: 0px){
   #menuBarBg {
     height: inherit;
   }
}

#menuBarBg span {
  display: block;
  position: relative;
  z-index: 1;
  height: 100%;
  width: 980px;
  
  margin: 0 auto;  
  
  background: url(/wp-content/themes/todc/img/bg/menuBar.gif) repeat-y 32px 0px;  
}





/**************************************************************
   News Posts
 **************************************************************/

#news {
  position: relative;
  z-index: 2;
  margin: 2.5em 41px 2.5em 32px;
  background: #F3EDE4 url(/wp-content/themes/todc/img/bg/rounded_brown_top.gif) no-repeat top left;
}

#news .bottom {
  display: block;
  height: 10px;
  width: 217px;
  background: url(/wp-content/themes/todc/img/bg/rounded_brown_bottom.gif) no-repeat bottom left;
}

#news h1 {
  margin: 0;
  padding: 10px 10px 0 10px;
  border: 0;
}

#news ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

#news ul li a {  
  display: block;
  padding: 15px 10px;
    
  text-decoration: none;
  color: #A1988B;
}


#news ul li a span.title {
  text-decoration: underline;
  color: #93BB17;
}

#news ul li a span.meta {
  display: block;
  margin-bottom: 10px;
}  

#news ul li a:hover {
  color: #837B6E;
  background-color: #FFF;
}

#news ul li a:hover span.title {
  color: #627F07;
}




/**************************************************************
   Center column for design thumbnails - can be 1/3 or 2/3 of
   design width, depending on if yellow sidebar is present
 **************************************************************/

#center33 {
  float: left;
  width: 424px;
}

#center66 {
  float: left;
  width: 664px;
}



/**************************************************************
   Design Thumbnails
 **************************************************************/

ul.thumbnails {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}

ul.thumbnails li {
  margin: 1em 0;
  padding: 0;
  clear: both;
}

ul.thumbnails li a.thumbnail {
  position: relative;
  float: left;
  /* Set to the height of the thumbnail - needed by FF to prevent whitespace at the bottom */
  
  margin: 0 1em 2em 0;  
  border: 4px solid #5F5950;
}

ul.thumbnails li a:hover.thumbnail {
  border: 4px solid #000;
}

/* Tooltips for design info 
   <ins> is needed to validate XHTML */
ul.thumbnails li a.thumbnail ins {
  text-decoration: none;
}

ul.thumbnails li a.thumbnail dl {
  display: none;
}

ul.thumbnails li a:hover.thumbnail dl {
  display: block;
  position: absolute;
  z-index: 5;
  top: -55px;
  left: -80px;
  width: 20em;
  
  padding: 1em;
  
  font-size: 0.8em;
  line-height: 120%;
  text-decoration: none;
  
  color: #A1988B;
  background-color: #FCF9CB;
  border-bottom: 1px solid #FFD925;
  border-right: 1px solid #FFD925;
}

ul.thumbnails li a:hover.thumbnail dl dt {
  float: left;
  width: 6em;
  
  margin: 0;
  padding: 3px 0;

  text-transform: uppercase;
  color: #8A6736;
}

ul.thumbnails li a:hover.thumbnail dl dd {
  float: left;  
  clear: right;
  width: 14em;  
  margin: 0;
  padding: 3px 0;
}

ul.thumbnails li a {
  text-decoration: none;
}

ul.thumbnails li a span {
  text-decoration: underline;
}

ul.thumbnails li a img {
  border: 0;
  vertical-align: middle;
}

ul.thumbnails li ul {
  float: left;
  width: 11em;
  margin: 0;
  padding: 0;
  list-style: none; 
}

ul.thumbnails li ul li {
  margin: 5px 0 7px 0;
  padding: 0;
}  



/**************************************************************
   #yellowBar: used for top designs, forum posts, 
    blog rolletc.
 **************************************************************/

#yellowBar {
  float: right;
  width: 185px;  
  
  margin: 10px 10px 10px 0;
  padding: 0 8px;
  
  background: #FCF9CB url(/wp-content/themes/todc/img/bg/rounded_yellow_top.gif) no-repeat top left;
}

#yellowBar .bottom {
  display: block;
  position: relative; /* compensate for #yellowBar's margin */
  left: -10px;
  height: 14px;
  background: url(/wp-content/themes/todc/img/bg/rounded_yellow_bottom.gif) no-repeat bottom left;
}

#yellowBar h1 {
  margin: 0;
  padding: 0.6em 0 0 2px;
  border: 0;
}

#yellowBar h2 {
  margin: 0;
  padding: 0 0 5px 2px;
}

#yellowBar h2 a.active {
  padding: 0 2px;
  color: #374607;
  background-color: #FBFAE6;
}


/* Rounded yellow containers in the yellow sidebar */
#yellowBar .rounded {
  margin-bottom: 1em;
  background: #FBFAE6 url(/wp-content/themes/todc/img/bg/rounded_light_yellow_top.gif) no-repeat top left;
}

#yellowBar .last {
  margin-bottom: 0;
}

#yellowBar .rounded .bottom {
  display: block;
  position: static;
  width: 185px;
  height: 14px;
  background: #FBFAE6 url(/wp-content/themes/todc/img/bg/rounded_light_yellow_bottom.gif) no-repeat bottom left;
}

/* Big links in the yellow sidebar */
#yellowBar .rounded ul,
#yellowBar .rounded ol {
  margin: 0;
  padding: 10px 0 0 0;
  list-style: none;
}

#yellowBar .rounded li {
  margin: 0;
  padding: 0;
  display: inline;
}

#yellowBar .rounded li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #A1988B;
}

#yellowBar .rounded li a:hover {
  color: #837B6E;
  background-color: #FFF;
}

#yellowBar .rounded li a:hover span.title {
  color: #627F07;
}

#yellowBar .rounded li a span.title {
  text-decoration: underline;
  color: #94BC18;
}

#yellowBar .rounded li a span.meta {
  display: block;  
}

#yellowBar .rounded li span.snip {
  display: block;
  margin-top: 10px;
}


/* Different icons for big link lists */
#yellowBar .rounded .comments li a,
#yellowBar .rounded .rank li a,
#yellowBar .rounded li a.archive {
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: 6px 6px;
}

/* Archive icon */
li a.archive {
  margin-top: 10px;
  padding-left: 35px;
  background-image: url(/wp-content/themes/todc/img/icon/archive.png);
  background-repeat: no-repeat;
  background-position: 10px 6px;
}

#news ul li a.archive {
  margin-top: 0;
  padding: 6px 0 6px 35px;
}

/* Comment icon */
#yellowBar .rounded .comments li a {
  background-image: url(/wp-content/themes/todc/img/icon/comments.png);
}

/* Uses images for numerical rank so text size change doesn't destroy list */
#yellowBar .rounded .rank li a.one {
  background-image: url(/wp-content/themes/todc/img/icon/rank_one.png);
}

#yellowBar .rounded .rank li a.two {
  background-image: url(/wp-content/themes/todc/img/icon/rank_two.png);
}

#yellowBar .rounded .rank li a.three {
  background-image: url(/wp-content/themes/todc/img/icon/rank_three.png);
}

#yellowBar .rounded .rank li a.four {
  background-image: url(/wp-content/themes/todc/img/icon/rank_four.png);
}

#yellowBar .rounded .rank li a.five {
  background-image: url(/wp-content/themes/todc/img/icon/rank_five.png);
}

/**************************************************************
   Footer
 **************************************************************/

#footer {
  position: relative;
  z-index: 3;

  float: left;
  clear: both;
    
  height: 8em;
  margin-top: -8em;  
  width: 100%;
  
  background: #E7DDCF url(/wp-content/themes/todc/img/bg/footer.gif) repeat-x top left;  
}


/* Rounded corners at the base of the menu bar */
#footerCorners {
  position: absolute;
  top: -7px;
  left: 23px;
  z-index: 2;
  
  height: 66px;
  width: 255px;
  
  background: url(/wp-content/themes/todc/img/bg/footer_corners.gif) no-repeat top left; 
}

/* The bottom footer menu */
#footerMenu {
  position: absolute;
  top: 0;
  right: 0;
  background: url(/wp-content/themes/todc/img/bg/footer_menu.gif) no-repeat top left;
}

#footerMenu ul {
  margin: 0;
  padding: 15px 20px;
  list-style: none;
  background: url(/wp-content/themes/todc/img/bg/footer_menu_corner.gif) no-repeat top right;
}

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

#footerMenu ul li a {
  padding: 0 8px;
  
  text-decoration: none;
  
  color: #AB9A81;
  border-right: 1px solid #E1DDD6;
}

#footerMenu ul li a:hover {
  color: #6D5F4A;
}

#footerMenu ul li.last a {
  border: 0;
}



/* Copyright info */
#footer #copyright {
  position: absolute;
  top: 7em;
  right: 24px;
  font-size: 0.8em;
  color: #AB9A81;
}

#footer #copyright a {
  color: #86765E;
  text-decoration: none;
}

#footer #copyright a:hover {
  color: #4E402A;
}

/**************************************************************
   Alignment classes
 **************************************************************/

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}


/**************************************************************
   Generic display classes
 **************************************************************/

.clear {
  clear: both;
}

.block {
  display: block;
}

/**************************************************************
   Profile Page
 **************************************************************/
dl#about_author dt {
float: left;
width: 10em;

margin: 0;
padding: 3px 0;

text-transform: uppercase;
color: #8A6736;
}

dl#about_author dd {
float: left; 
clear: right;
width: 20em; 
margin: 0;
padding: 3px 0;
}

/**************************************************************
   Site Map
 **************************************************************/
 #sitemap, #sitemap li {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
 
 #sitemap li {
 	padding: 0 0 20px 0;
 }
 
 #sitemap li a, #sitemap li span {
 	font-weight: bold;
 }
 
 #sitemap li ul a, #sitemap li ul span {
 	font-weight: normal;
 }
 
 #sitemap li ul {
 	padding: 0 0 0 20px;
 	margin: 0;
 }
 
 #sitemap li ul li {
 	margin: 0;
 	padding: 0;
 }
 
 /**************************************************************
   Blog Stuff
 **************************************************************/
 .postmetadata {
 	font-size: smaller;
 	text-align: right;
 }
 
 /**************************************************************
   Template Display Stuff
 **************************************************************/
 .navwrap {
 	clear: both;
	font-size: 1.4em;
	line-height: 1.5em;
	font-family: georgia, serif;
	height: 1.5em;
	padding: 0 5px;
	margin: 10px 0 0 0;
	background: #f3ede4;
	border-top: 1px #795625 solid;
	border-bottom: 1px #795625 solid;
 }

.navwrap a {
	text-decoration: none;
}