/*

Theme Name:		villageous
Theme URI:		http://www.villageous.com
Description:	A customized template for villageous
Author:			eeko studio
Author URI:		http://www.eekostudio.com/

Styles for villageous in conjunction with eeko studio
Created by April Holle on 2010-03-11
Copyright (c) 2010 Made Better Studio. All rights reserved.

Bookmarking:
==layout
==common
==form

Colors:
brown - 42210b
blue - 00aabd
orange - fd961b
gray - bfbfbf
*/

/* ==layout */

html {width: 100%; height: 100%; margin: 0; padding: 0;}
body {width: 100%; height: 100%; margin: 0; padding: 0; background: url('images/bg-body.png'); font-size: 0.75em; font-family: Helvetica, Arial, Sans-Serif; color: #666;}

#container {position: relative; width: 888px; margin: 0 auto;}

#header {background: url('images/bg-content-top.png') no-repeat 5px top; padding: 23px 0 0 0; margin: 0 0 0 23px;}
#header-inner, #content {background: url('images/bg-content.png') repeat-y top left;}
#header-inner {padding: 1px 0 0 77px; min-height: 150px;}
#branding {margin: 10px 0 0 0; width: 756px;}
#home #branding {margin: 10px 0 0 5px; width: 756px;}

#primary-nav {position: absolute; left: 0px; width: 100px; padding-top: 7px; background: url('images/bg-pnav-top.png') no-repeat top right; text-transform: lowercase;}
#primary-nav #primary-nav-inner {background: url('images/bg-pnav.png') repeat-y bottom right; padding: 10px 1px 1px 1px;}
#primary-nav #primary-nav-btm {height: 8px; width: 100px; background: url('images/bg-pnav-btm.png') no-repeat bottom right;}

#content {margin: 0 0 0 23px; min-height: 350px;}
#content-inner {width: 750px; margin: 0 0 0 95px; padding: 0 0 20px 0; border-top: 1px solid #bfbfbf;}
#home #content-inner {padding: 5px 0 20px 0;}

.featured {position: relative; width: 530px; padding: 15px; height: 40px; margin: 0 0 5px 0; background: url('images/bg-news-slideshow.png'); color: #fff;}
.featured .featured-content {width: 420px; float: left;}
.featured .featured-link {position: absolute; bottom: 15px; right: 15px; width: 21px;}
#featured-slideshow {position:relative; height: 425px;}
#featured-slideshow div.active {position: absolute; z-index:10;}
#featured-slideshow div.last-active {position: absolute; z-index:9;}
#slideshow-1, #slideshow-2, #slideshow-3 {position: absolute; top: 0; left: 0; width: 560px; height: 70px;}
.hidden { display: none;}
#featured-nav {position: absolute; top: 415px; right: 0;}

#home .col-main {width: 560px; margin-right: 5px; float: left;}
#home .col-side {width: 185px; float: left;}
#internal .col-main {width: 415px; margin: 0 0 20px 55px; float: left;}
#internal .col-side {width: 248px; float: left; margin: 20px 0 20px 0;}
#recent-work {height: 425px; padding: 0 0 20px 0;}
.twitter-feed {float: right; width: 160px; padding: 0 0 23px 0; font-size: 0.917em; background: url('images/bg-twitter-btm.png') no-repeat bottom left;}
.twitter-feed-top {height: 30px; padding: 25px 0 0 20px; background: url('images/bg-twitter-top.png') no-repeat top left;}
.twitter-feed-inner {padding: 0 20px 10px 20px; background-color: #fde9d2;}
#home .page-content {float: left; width: 380px;}
.page-content {float: left; width: 415px;}
#section-overview {margin-bottom: 40px;}
.callout {clear: both; background: #42210b; color: #fff; padding: 5px;}
.callout-link {margin-top: 2px;}

#blog .col-full, #case-studies .col-full {clear: both; margin: 5px 0 20px 0;}
#blog .col-full {background: url('images/bg-blog.png') repeat-y top right; }
#blog .col-main, #case-studies .col-main {width: 550px; margin: 0 30px 0 15px; float: left;}
#blog .col-side, #case-studies .col-side {width: 140px; float: right; margin: 5px 0;}
#blog .col-full .col-side, #case-studies .col-full .col-side {width: 120px; padding: 10px;}
.post {border-bottom: 1px dashed #c0c0c0; padding: 0 0 25px 0; margin: 0 0 20px 0; font-family: Helvetica, Arial, Sans-Serif;}

#internal .post {padding: 0 0 5px 0; margin: 0 0 20px 0;}
.meta {color: #fd961b; margin: 3px 0 8px 0; font-size: 0.917em;}
.comments {clear: both;}

#footer {background: url('images/bg-content-btm.png') no-repeat 5px top; min-height: 75px; padding: 20px; margin: 0 0 0 23px; font-size: 0.833em;}

.center,.aligncenter {text-align: center;}
.right, .alignright {text-align: right;}
.left, .alignleft {text-align: left;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/* ==common elements */
h1 {font-size: 2em;}
.featured h1 {display: inline-block; float: left; width: 70px; margin: 0 10px 0 0; padding: 0; font-size: 1.75em; font-weight: normal;}
#home .page-content h1 {font-size: 2.5em; margin: 15px 0 5px 0; font-weight: normal;}
#home .page-content h1 span {color: #00aabd;}
#blog h1 {margin: 0;}
#blog h2, #case-studies h2 {margin: 10px 0 0 0;}
#recent-work h1 {font-size: 1.25em; margin: 0;}	
#home .col-side h2 {background-color: #42210b; padding: 8px 15px 5px; margin: 0; color: #fff; font-size: 0.917em; text-transform: lowercase;}
#home .col-side h2 span, .twitter-feed h2 span, .featured h1 span {color: #fd961b;}
#internal .col-side h2 {font-size: 2.08em; font-weight: normal; margin: 0;}
#internal .col-main h1 {background: url('images/bg-content-header.png') no-repeat; padding: 65px 0 0 0; margin: 0 0 20px 0; font-weight: normal;}
.col-side #in-the-news h2 {margin-bottom: 0;}	
.twitter-feed h2 {font-size: 0.917em; text-transform: lowercase;}
#blog .col-side h2 {color: #00aabd; font-size: 0.917em; margin: 0;}
#branding embed {margin: 0; padding: 0; vertical-align: bottom;}

a {color: #00aabd;}
a:hover {color: #fd961b;}
.twitter-feed a {color: #fd961b;}
#recent-work h1 a {text-decoration: none; color: #666;}
.featured-content a, .callout a {color: #fff; text-decoration: none;}
.featured-content a:hover, .callout a:hover {color: #fd961b;}

a img {border: 0;}
#branding img {margin: 30px 0 0 20px;}
.featured .featured-link img {vertical-align: bottom;}
.callout img.callout-title {float: left; width: 145px;}
.special-image {float: right; margin-left: 10px;}

#header-inner ul {margin: -4px 25px 0 0; padding: 0; list-style: none;}
#header-inner ul li {float: right; margin: 0 0 0 5px; padding: 12px 0 0 0; list-style: none; font-size: 0.917em;}
#header-inner ul li.tab {background-color: #00aabd;}

#header-inner ul li.tab a {display: block; padding: 5px 10px 10px 10px; color: #fff; text-transform: uppercase; text-decoration: none;}

#primary-nav ul {width: 100px; margin: 0; padding:0; color: #fd961b;}
#primary-nav li {text-align: right; list-style: none; padding: 0 15px 0 0; margin: 0 0 15px 0;}
#primary-nav li.current_page_item, #primary-nav li.current_page_ancestor, #blog #primary-nav li.page-item-8 {list-style-position:inside; list-style-image: url('images/blt-pnav.png'); font-weight: bold;}
#primary-nav li a {color: #fff; text-decoration: none;}
#primary-nav li a span {color: #fd961b;}

#featured-nav a {float: left; display: block; height: 9px; width: 9px; margin-left: 5px; background: url('images/nav-slideshow.png'); cursor: pointer;}
#featured-nav a.on {display: block; height: 9px; width: 9px; background: url('images/nav-slideshow-current.png'); cursor: pointer;}

#recent-work ul {margin: 5px 0 0 15px; padding: 0; list-style: none;}
#recent-work ul li {list-style: none; border-bottom: 1px solid #f2f2f2; padding: 0 0 5px 0; margin: 0 0 20px 0;}

#in-the-news ul {margin: 0; padding: 0; list-style: none;}
#in-the-news ul li {list-style: none; padding: 5px 5px 3px 15px; border-bottom: 1px dashed #c0c0c0; }
#in-the-news ul li a {display: inline-block; color: #666; text-decoration: none; padding: 0 15px 0 0; background:url('images/blt-readmore.png') no-repeat center right;}
#in-the-news ul li a span {color: #fd961b;}

ul#secondary-nav {margin: 0; padding: 0; list-style: none;}
ul#secondary-nav li {list-style: none; padding: 5px 5px 3px 15px; border-bottom: 1px dashed #c0c0c0; }
ul#secondary-nav li.current_page_item {list-style: none; padding: 5px 5px 3px 15px; border-bottom: 1px dashed #c0c0c0; background: url('images/bg-snav-current.png') repeat-x top left;}
ul#secondary-nav li a {color: #666; text-decoration: none; display:block;}
ul#secondary-nav li a:hover {color: #666; text-decoration: none; margin-left: -3px;}

#blog .col-side ul {margin: 0; padding: 0; list-style: none;}
#blog .col-side ul li {list-style: none; padding: 5px 5px 3px 0;}
#blog .col-side ul li.current_page_item {list-style: none; padding: 5px 5px 3px 0;}
#blog .col-side ul li a {color: #00aabd; text-decoration: none;}
#blog .col-side ul li a:hover {text-decoration: underline;}
#blog .col-full .col-side > ul > li {margin: 0 0 20px 0;}

p {line-height: 1.5em; margin: 0 0 10px 0; text-align: justify;}
#home p {text-align: left;}
#section-overview p {text-align: justify;}
#footer p {text-align: right; color: #fff;}
.callout p {float: left; width: 530px; margin: 0 20px; line-height: 25px;}

blockquote { margin: 0 0 10px 0; }
blockquote p {padding: 10px; display: table-cell;  background-color: #fde9d2;}

/* ==form elements */

input.search-txtbox {border: 1px dashed #c0c0c0; height: 15px; background: url('images/bg-search.png') no-repeat 5px 2px; padding: 2px 0 0 25px; margin: 0 0 5px 0; width: 113px; vertical-align: bottom;}
input.submit {height: 21px; background-color: #00aabd; border: 0; color: #fff;}
.comments textarea {width: 545px;}
.comments label {display: inline-block; min-width: 60px; text-align: right;}