/* ----- RESET ----- */
@import url("reset.css");

html { overflow-y: scroll; -webkit-text-size-adjust:none; }

/* ----- GLOBAL ----- */
body { font-size: 12px; background: #222; }
html > body { font-size: 12px; }

img { behavior: url(framework/iepngfix.htc); }

#container { font: 1em/1.25em Arial, sans-serif, serif; color: #333; }

.clear { clear: both; }

/* ----- TYPOGRAPHY ----- */
@font-face { font-family: "TitilliumText"; src: url("../fonts/TitilliumText1.otf"); }
@font-face { font-family: "TitilliumText400"; src: url("../fonts/TitilliumText400wt.otf"); }
@font-face { font-family: "TitilliumText800"; src: url("../fonts/TitilliumText800wt.otf"); }
 
p { margin: 0 0 18px 0; }
.post p, .full_post p { font: 1em/20px Arial, sans-serif, serif; color: #333; }

h1 { font: 1.5em/1.5em 'TitilliumText400', Arial, sans-serif; color: #333; letter-spacing: .1em; margin: 0 0 7px 0; text-transform: uppercase; }
h2 { font: 1.1em/1.5em 'TitilliumText400', Arial, sans-serif; color: #333; letter-spacing: .1em; margin: 0 0 14px 0; text-transform: uppercase; }

em { font-style: italic; }
strong { font-style: bold; }

.by, .on { font: italic .85em Georgia, serif; color: #333; text-transform: lowercase; letter-spacing: -0.05em; display: inline; margin: 0 2px 0 0; }


/* ----- LAYOUT ----- */
#stage { width: 940px; margin: 0px auto; background: #333; }
#main_container { width: 820px; background: #FFF; float: left; }
#navigation_container { width: 120px; background: #333; float: right; }
#intro { width:820px; height: 80px; border-bottom: 3px solid #333; }
#intro p { width: 340px; position: relative; top: 19px; left: 120px; font: 11px/15px 'TitilliumText400', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; word-spacing: .1em; color: #333; }


/* ----- HEADER ----- */
#header { width: 820px; height: 60px; background: #f0f0f0; }
#logo { width: 280px; height: 60px; float: left; }
#search { width: 160px; height: 30px; background: url('../images/searchbar.gif') no-repeat; float: right; margin: 15px 60px 0 0; }
#searchbar { width: 130px; height: 16px; border: none; margin: 3px 0 0 8px; padding: 8px 0 0 0; float: left; font: 12px/22px 'TitilliumText400', Arial, sans-serif; text-transform: uppercase; }
#submit { float: right; }


/* ----- NAVIGATION ----- */
#navigation_container { padding: 46px 0 0 0; }
#navigation_container ul { padding: 25px 0 19px 0; list-style: none; border-bottom: 1px solid #414141; }
#navigation_container ul li { width: 90px; height: 30px; margin: 0 0 0 15px; text-align: right; }
#navigation_container ul li a { display: block; width: 80px; height: 30px; font: 1em/32px 'TitilliumText400', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; text-align: right; }

/* ----- CONTENT ----- */
.post_date { float: left; width: 120px; font: 24px/24px 'TitilliumText', Arial, sans-serif; color: #CCC; }
.date { width: 26px; margin: 27px 0 0 60px; }
.day, .month { border-bottom: 1px solid #F1F1F1; margin: 0 0 5px 0; }
.post_content { float: left; width: 340px; padding: 27px 0 0 0; }
.full_post_content { float: left; width: 460px; padding: 27px 0 0 0; }
.post h1 {  }
.post_content p { height: 140px; width: 340px; overflow: hidden; }
.full_post_content p { width: 460px; }
.post_photo { float: right; width: 340px; height: 255px; overflow: hidden; }
.post_related { float: right; width: 220px; position: relative; top: 29px; }
.post_footer { height: 41px; clear: both; border-top: 1px solid #e7e7e7; border-bottom: 3px solid #333; }
.post_categories { float: left; position: relative; top: 6px; left: 120px; font: 10px/10px 'TitilliumText400', Arial, sans-serif; color: #222; text-transform: uppercase; letter-spacing: .1em; word-spacing: .2em; }
.image_attribution { float: right; position: relative; top: 6px; right: 20px; font: 9px/9px 'TitilliumText400', Arial, sans-serif; color: #888; text-transform: uppercase; letter-spacing: .1em; word-spacing: .2em; }

.post_quote { float: left; width: 580px; padding: 27px 0 0 0; }
.post_quote h1 { margin: 0 0 16px 0; }

.post_image { margin: 0 0 30px 0; text-align: center; }

blockquote { padding: 0 0 0 40px; font: 20px/30px 'TitilliumText400', Arial, sans-serif; color: #333; margin: 0 0 20px 0; }



/* ----- SIDEBAR ----- */
#sidebar {  }


/* ----- PAGE SPECIFIC ----- */


/* ----- FOOTER ----- */
#footer { width: 820px; height: 20px; background: #F1F1F1; margin: 0px auto; }


/* ----- LINKS ----- */
.post p a:link, .post p a:visited, .post p a:active { color: #7ac11a; text-decoration: none; }
.post p a:hover { color: #333; text-decoration: none; }

.full_post p a:link, .full_post p a:visited, .full_post p a:active { color: #7ac11a; text-decoration: none; }
.full_post p a:hover { color: #333; text-decoration: none; }

h1 a:link, h1 a:visited, h1 a:active { color: #333; text-decoration: none; }
h1 a:hover { color: #7ac11a; text-decoration: none; }

.continue, #intro a { font: 1em/1.25em 'TitilliumText800', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.continue:link, #intro a:link, .continue:visited, #intro a:visited { color: #7ac11a; text-decoration: none; }
.continue:active, #intro a:active, .continue:hover, #intro a:hover { color: #333; text-decoration: none; }

.post_related a { font: 1em/20px 'TitilliumText800', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.post_related a:link, .post_related a:visited { color: #7ac11a; text-decoration: none; }
.post_related a:hover { color: #333; text-decoration: none; }

#navigation_container a:link, #navigation_container a:visited, #navigation_container a:active, #navigation_container a:hover { color: #FFF; text-decoration: none; }
#navigation_container li:hover { background: #7ac11a; }

.selected { background: #7ac11a; }

.post_date a:link, .post_date a:visited, .post_date a:active { color: #CCC; text-decoration: none; }
.post_date a:hover { color: #7ac11a; text-decoration: none; }

.post_categories a:link, .post_categories a:visited { font: 10px/10px 'TitilliumText800', Arial, sans-serif; color: #7ac11a; text-decoration: none; }
.post_categories a:active, .post_categories a:hover { font: 10px/10px 'TitilliumText800', Arial, sans-serif; color: #333; text-decoration: none; }

.image_attribution a:link, .image_attribution a:visited { font: 10px/10px 'TitilliumText800', Arial, sans-serif; color: #7ac11a; text-decoration: none; }
.image_attribution a:active, .image_attribution a:hover { font: 10px/10px 'TitilliumText800', Arial, sans-serif; color: #333; text-decoration: none; }

* {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	text-rendering: optimizeLegibility;
}

a { -webkit-transition: color .2s ease-in-out; }