/*
Theme Name: Mode Project 2009
Theme URI: http://modeproject.com/
Description: Custom Template system for Mode.
Version: 1.0
Author: Justin Mueller
Author URI: http://www.justinmueller.com/
*/

@import url(base.css);

/* Body
-------------------------------------------------------------- */
body {
	line-height: 1.5; /* Unitless for proper inheritance */
	padding: 0;
	margin: 0;
	background: #0F0F0F;
	font: 12px/18px Verdana, Helvetica, Tahoma, Arial, sans-serif;
	color: #666;
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { 
  font-weight: normal;
  font-style: italic;
  font-family: Georgia, serif;
  color: #D8DECB;
}

h1 { font-size: 2.3em; }
h2 { font-size: 1.6em; margin: 0 0 10px 0; text-transform: lowercase; }
h3 { font-size: 1.4em; margin: 0 0 0 0; }
h4 { font-size: 1.3em; margin: 5px 0 0 0; }
h5 { font-size: 1em; font-weight:bold; }
h6 { font-size: 1em; font-weight:bold; }

h2.post-title {
    margin-top: 0;
}

/* Text elements
-------------------------------------------------------------- */

a { color: #6692B1; text-decoration: none; }
a:hover { color: #98C3E0; }
a.img:hover { background-color: transparent; color: inherit; }

p       { line-height: 1.4em; }
#body p { margin: 0 0 0 0; padding: 0 0 1.5em 0; text-align:left; }
#body p.last { margin-bottom:0; }
#body p img { float: left; padding: 1.5em 1.5em 1.5em 0; margin:0; }
#body p img.top { padding-top:0; } /* Use this if the image is at the top of the <p>. */
#body { font-size: 0.9em; }

.main ul, .main ol { margin: 0 0 1.5em 1.5em; }
.main ol { list-style-type: decimal; }
.main dl { margin: 1.5em 0; }
.main dl dt  { font-weight: bold; }

.main li {
	margin: 0 0 10px 15px;
}

#content p.intro { font-size: 1.2em; line-height: 1.6; }

#bar p { margin: 0 0 0 10px; padding: 0 0 1em 0; text-align:left; line-height: 1.4; font-size: .9em; }

blockquote { margin: 0 0 1.5em 1.5em; color: #C33; font-style: oblique; }
strong     { font-weight: bold; }
em         { font-style: italic; }
pre        { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; }
code       { font:0.9em Monaco, monospace; }



/* Use this to create a horizontal ruler across a column. */
hr {
  background: transparent; 
  color: inherit;
  float: none; 
  width: 100%; 
  height: 0.1em;
  margin: 0 0 1.4em 0;
  border: none; 
  border-bottom: 1px dotted #C00;
}
* html hr { margin: 0 0 1.2em 0; } /* IE6 fix */


/* Tables
-------------------------------------------------------------- */



/* Forms
-------------------------------------------------------------- */
textarea { height:180px; width:300px; font-size:1.1em; }
form { margin-bottom:30px; }

label { width:80px; display:inline-block; cursor:pointer;padding:0 1em 0 0; text-align:right; float: left; }
div.required label {  }

input:focus textarea:focus { border:1px solid #000; }
input, textarea { color:#666; background:#D8DECB; padding:6px 5px 4px 5px; border:1px solid #369; margin:0 0 15px 0; }
select { color:#666; padding:5px; border:1px solid #999; margin:3px 0 15px 0; font-size:1em; 	outline:none;}
select option { padding:2px 4px 0 4px; background:#D8DECB; }

legend { padding:10px; font-size:1.4em; color:#666; }
fieldset { border:1px solid #999; padding:10px; margin:5px 0 10px; }
fieldset fieldset { border:none; }

/* Button Styles */
a.button {
    padding: 6px 10px;
    text-decoration: none;
}
.button {
  background:#369 url('../i/btn/shade.png') left bottom repeat-x;
  color:#D8DECB;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  width:auto;
  margin:1.2em 0 0;
  padding: 6px 4px 4px;
}
.button:hover { background-color:#69C; cursor:pointer; }
.button.secondary { background-color:#777; }
.button.secondary:hover { background-color:#6a9b32; cursor:pointer; }

form dd { margin: 0; }
form dt { clear: both; }
.login-form label { width: 80px; }



/* Main Areas
-------------------------------------------------------------- */
div#wrap {
	max-width: 2010px;
	min-width: 1024px;
	padding: 40px 35px;
}
div.container {
    clear: both;
}
div.side-box {
    clear: both;
    float: left;
    width: 180px;
    padding: 10px 0 20px;
    text-align: right;
    border-top: 1px solid #666;
}
div.side-box h2 {
    color: #D8DECB !important;
}
div.main-box {
    position: relative;
    padding: 10px 0 20px;
    margin-left: 210px; /* 210px from side bar plus 30px actual margin */
    border-top: 1px solid #666;
}
div#header div.side-box, div#header div.main-box {
    padding-bottom: 5px;
}

div#header, div#body, div#footer {
	clear: both;
}

/* Header
-------------------------------------------------------------- */
h1.logo a {
	display: block;
	float: right;
	width: 133px;
	height: 0;
	padding-top: 69px;
	font-size: 0px;
	line-height: 0%;
	background: transparent url(images/main-logo.png) no-repeat;
	overflow: hidden;
}

div#header .address-box {
    float: right;
    color: #D8DECB;
    font-family: Georgia, serif;
    font-style: italic;
    text-align: right;
}
div#header .address-box p {
    margin: 0;
    padding: 0;
}

/* Nav */
ul.main-nav {
	text-transform: uppercase;
}
ul.main-nav li {
    float: left;
	list-style: none;
	position: relative;
}
ul.main-nav li a {
    position: relative;
    top: -11px;
    display: block;
	padding: 10px 0 0;
	margin: 0 50px 0 0;
	border-top: 1px solid #666;
	font-size: 11px;
	color: #808080;
}
ul.main-nav li a:hover { 
    color: #6692B1;
	border-top: 1px solid #6692B1;
}
ul.main-nav li.active a, ul.main-nav li a:active {
	color: #6692B1;
	cursor: default;
	border-top: 1px solid #6692B1;
}

/* Sub Nav */
ul.sub-nav {
	margin: 0 0 10px;
	text-transform: lowercase;
}
ul.sub-nav li {
    display: inline;
	list-style: none;
	margin: 0 2em 0 0;
}
ul.sub-nav li.title {
    font-weight: normal;
    font-style: italic;
    font-family: Georgia, serif;
    font-size: 1.1em;
    color: #D8DECB;
    margin: 0 1em 0 0;
}
ul.sub-nav li a {
	color: #808080;
}
ul.sub-nav li a:hover { 
    color: #6692B1;
}
ul.sub-nav li.active a {
	color: #6692B1;
	cursor: default;
}

#body .postmetadata.alt {
    float: right;
    color: #D8DECB;
    text-align: right;
    padding-bottom: 0;
}

img.nomargin {
    margin: 0 !important;
    padding: 0 !important;
}

/* Body
-------------------------------------------------------------- */
ul.portfolio {
	margin: 0;
	padding: 0;
}
ul.portfolio li {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	border: 10px solid #CADC80;
	width: 400px;
	height: 100px;
}

div.accent {
	font-size: 0.8em;
	background: #CADC80;
	width: 410px;
	padding: 5px;
}
span.older a {
	float: left;
}
span.newer a {
	float: right;
}
div.accent a { color: #893; }
div.accent a:hover { color: #671; }
div.accent .disabled { text-decoration: line-through; }

#body p img.aligncenter {
    float: none;
    display: block;
    width: 100%;
    margin: 0 auto;
}

/* Latest
-------------------------------------------------------------- */
#latest {
    position: relative;
    height: 575px;
}
#latest-box {
    position: relative;
    height: 575px;
    overflow: hidden;
}
#latest-slider {
    position: absolute;
    height: 575px;
    width: 20000em;
    clear: both;
}
.latest-post {
    float: left;
    width: 850px;
    margin: 0 15px 0 0;
}
.latest-post h2 a {
    color: #D8DECB;
}
.latest-post img {
    width: 850px;
    height: 475px;
}
.latest-post p {
    display: block;
    height: 50px;
}
/* Next and Previous buttons */
a.prev, a.next {
	padding: 5px 4px 5px 0;
	cursor:pointer;
}
#latest a.prev, #latest a.next {
    position: absolute;
    top: 0px;
    display: block;
    height: 0px;
    width: 30px;
    background: #000;
    margin-top: 37px;
	padding: 478px 0 0 0;
	line-height: 0%;
	font-size: 0px;
	overflow: hidden;
	cursor:pointer;
}
#latest a.prev {
    left: 0px;
    background: url(images/arrow_left.png) no-repeat 50% 50%;
}
#latest a.next {
    right: 0px;
    background: url(images/arrow_right.png) no-repeat 50% 50%;
}
#latest a.disabled { visibility: hidden; }
a.prev:hover, a.next:hover { color: #333; }

/* Featured
-------------------------------------------------------------- */
.featured-post {
    float: left;
    width: 258px;
    height: 165px;
    margin: 0 15px 5px 0;
    color: #D8DECB;
}
.featured-post .title {
    line-height: 1em;
}
.featured-post img {
    width: 258px;
    height: 120px;
}

/* Feed
-------------------------------------------------------------- */
.feed-post {
    float: left;
    width: 200px;
    height: 9em;
    margin: 0 15px 5px 0;
    color: #D8DECB;
}
.feed-post .title {
    display: block;
    height: 40px;
}
.feed-post p {
    display: block;
    height: 50px;
}

/* Listing Pages
-------------------------------------------------------------- */
div.navigation {
    clear: both;
}

/* Blog Post
-------------------------------------------------------------- */
.full-post {
    clear: both;
}
.full-post h2.title a {
    color: #D8DECB;
}

.entry-col {
    float: left;
    width: 400px;
    margin: 0 15px 5px 0;
    color: #D8DECB;
}

/* About Photos
-------------------------------------------------------------- */
.photo-post {
    float: left;
    width: 404px;
    height: 229px;
    margin: 0 12px 12px 0;
    color: #D8DECB;
}
.photo-post img {
	display: block;
    width: 404px;
    height: 229px;
}

/* Peeps
-------------------------------------------------------------- */
.bio-post {
    float: left;
    width: 200px;
    height: 115px;
    margin: 0 15px 5px 0;
    color: #D8DECB;
}
.bio-post .title .cat {
    color: #6692B1;
}
.bio-post img {
	display: block;
    width: 200px;
    height: 85px;
}

/* Single Page
-------------------------------------------------------------- */
h2.post-title {
    text-transform: capitalize;
}

.main-media {
    float: left;
    display: block;
    width: 800px;
    margin: 0 12px 9px 0;
}
div.media a {
    float: left;
    display: block;
    width: 395px;
    height: 220px;
    margin: 0 12px 12px 0;
}

.column {
	margin: 0 12px 0 0;
}

/* Footer
-------------------------------------------------------------- */
div.container.footer {
    padding-top: 20px;
}

div#footer-logo {
    float: right;
	width: 25px;
	height: 0px;
	padding-top: 25px;
	line-height: 0%;
	font-size: 0;
	overflow: hidden;
	background: transparent url(images/icon.png) no-repeat;
}

div.footer .main-box {
    font-size: 10px;
}

ul.footer-icons {
	float: right;
	padding: 0;
	margin: 0;
}
ul.footer-icons li {
	float: left;
	list-style: none;
	padding: 0;
	margin: 0 0 0 5px;
}
ul.footer-icons li a {
	display: block;
	width: 25px;
	height: 0;
	padding-top: 25px;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
ul.footer-icons li a.vimeo {
	background: url(images/footer-icons/vimeo.png) no-repeat;
}
ul.footer-icons li a.twitter {
	background: url(images/footer-icons/twitter.png) no-repeat;
}
ul.footer-icons li a.rss {
	background: url(images/footer-icons/rss.png) no-repeat;
}
ul.footer-icons li a.linkedin {
	background: url(images/footer-icons/linked_in.png) no-repeat;
}
ul.footer-icons li a.flickr {
	background: url(images/footer-icons/flickr.png) no-repeat;
}
ul.footer-icons li a.facebook {
	background: url(images/footer-icons/facebook.png) no-repeat;
}
ul.footer-icons li a.youtube {
	background: url(images/footer-icons/you_tube.png) no-repeat;
}
/* Some default classes
-------------------------------------------------------------- */

p.small { font-size: 0.8em; margin-bottom: 1.875em; line-height: 1.875em; }
p.large { font-size: 1.2em; line-height: 2.5em; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.hide { display: none; }
img { border: none; }
.clearer { clear: both; }

.top { margin-top: 0; padding-top: 0; }

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

.message {
	background: #DEF;
	border: 1px solid #69C;
	padding: 10px;
	font-size: 0.9em;
}
#body .message p {
	padding-bottom: 5px;
}


/* Extra fancy typography
-------------------------------------------------------------- */

/* For great looking type, use this code instead of asdf: 
   <span class="alt">asdf</span>  
   Best used on prepositions and ampersands. */
  
.alt { 
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; 
  font-size: 1.2em;
  line-height: 1.1; /* Maintain correct baseline */
  font-style: italic;
}

/* For great looking quote marks in titles, replace "asdf" width:
   <span class="dquo">&#8220;</span>asdf&#8221;
   (That is, when the title starts with a quote mark). 
   (You may have to change this value depending on your font size). */  
   
.dquo { margin-left: -.7em; }

/* Force Lightbox to have small border */
#fancy_content {
	top: 1px !important;
	right: 1px !important;
	left: 1px !important;
	bottom: 1px !important;
}