/*=======================
Title: All styles for screen media. 
Author: Katrin Kerber katrin@cogdesign.com. 
Last updated: 28 January 2010 

Contents:
1. YUI RESET + YUI BASE
2. STRUCTURE RESET
3. TYPOGRAPHY
4. LINKS
5. FORMS
6. COLUMN SYSTEM
7. HACKS
8. JQUERY MODULAR COMPONENTS
9. CSS MODULAR COMPONENTS
10. SITE-SPECIFIC STYLES (GLOBALLY APPLIED)
11. SECTION-SPECIFIC STYLES
12. VISIBLE GRID GUIDE
========================*/


/* --[ =YUI RESET + YUI BASE]---------------------------- */
/* Copyright (c) 2009, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 3.0.0 build: 1549 */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/* Copyright (c) 2009, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 3.0.0 build: 1549*/
h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}p,fieldset,table,pre{margin-bottom:1em;}input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}

/* --[ =STRUCTURE RESET]------------------------------- */
html,html body{padding:0;margin:0;background-color:#fffef5;}
html>body div#wrapper {position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-color:#b00f1f;z-index:10000;}
div#header{position:relative;}
div#header #logo{display:block; padding:0; margin:0;}
div#content{position:relative;}
div#content div#main_content{position:relative;}
div#footer{position:relative;}


/* --[ =TYPOGRAPHY ]--------------------------- */
/* Standard */
body{font-size:75%;line-height:1.2em;font-family:Verdana, Geneva, sans-serif; color:#666666;} /* Set base font size to 14px for Internet Explorer 6 and below on Windows */
html>body{font-size:12px;} /* Ignored by IE6, but used by Firefox, Safari, IE7, Opera */       
p{font-size:1em;line-height:1.6em;margin:0 0 1em 0;}
h1,h2,h3,h4,h5,h6{clear:both; font-weight:normal;}
h1,h2,h3 {text-transform:uppercase;}
h1{font-family: Georgia, serif;font-size: 2.571429em; line-height:1.2em; margin:0 0 0.5em 0;}
h2{font-family: Georgia, serif;font-size: 1.285714em;line-height: 1.166667em;margin:0.857142em 0 0.380952em 0;font-weight:bold;}
h3{font-family: Georgia, serif;font-size:1em;line-height:1.05em;margin:1em 0 0.444444em 0;font-weight:bold;}
h4, h5, h6{font-size: 1.142857em;line-height:1.2em; margin:1.1875em 0 0.5625em 0;}
dl,ol,ul{margin:0 0 0.57142em 0;}    
ul, ol{margin-left:2.4em;}
ul li, ol li{font-size:1em; line-height:1.2em; margin:0 0 0.57142em 0;} 
dl dt{font-weight:bold; font-size:1em; line-height:1.2em;  margin:0.92857em 0 0.214285em 0;}
dl dd{font-size:1em; line-height:1.2em; margin:0 0 0.57142em 0;}                                         
sup,sub{position:relative;height:0;line-height:1px;vertical-align:baseline;}
sup{bottom:1ex;}
sub{top:.5ex;}  
ins{text-decoration:underline;}
del{text-decoration:line-through;}
dfn{font-style:italic;font-weight:bold;} 
pre {margin:0 0 0.7142857em 0;padding:0; overflow:auto; width:100%; font-family:courier, monospace;}
blockquote {margin:0; padding:0;font-size: 1.571429em;line-height:1.4em;}
blockquote p {font-family: Georgia, Arial, Verdana, sans-serif;font-size:  margin:0 0 0.5625em 0;text-indent:-8px;}
blockquote cite{font-size:0.857142em;line-height:1.2em;margin:-0.8333333em 0 0 0; font-style:italic;}
q{font-style:italic;}
hr{line-height:1.2em;margin:0 0 0.57142em 0;}
img {position:relative;}
a img{border:none;}  
table{margin:0 0 0.57142em 0; border-collapse:collapse;}
table th{font-weight:bold;text-align:left;}
table tr,table th,table td{margin:0;padding:0.25em 0.5em;border:none;}
table tfoot{font-size:0.714286em;line-height:2.1em;margin:0 0 1.5em 0;font-style:italic;}
table caption{height:21px;margin:0;}

/* --[ =LINKS ]--------------------------- */
/*
These are global link styles that are often over-written by declaration with greater specificity 
*/
a {outline: none;}
a:link {color:#b00f1f;text-decoration:none;}
a:visited {color:#b00f1f;text-decoration:none;}
a:link:hover, a:visited:hover {text-decoration:none;color:#666666;}
a:link:focus, a:visited:focus {text-decoration:none;color:#666666;}
a:link:active, a:visited:active {text-decoration:none;color:#666666;}
:focus{outline:none;}


/* --[ =FORMS ]--------------------------------------- */
form{position:relative;padding:0;margin:0;}
form fieldset{position:relative;padding:0;margin:0;}
form fieldset legend{display:none;}
form fieldset label{position:relative;display:block;font-size:1em;line-height:1.2em;font-weight:bold;float:none;margin:0.57142em 0 0.357142em 0;}
form fieldset input,form fieldset textarea,form fieldset select{border:1px solid #333;text-align:left;}
form fieldset input:focus,form fieldset textarea:focus,form fieldset select:focus{border-color:#b00f1f;}
form fieldset p.error{color:#1B0F03;margin:0 0 0.357142em 0;}
form fieldset input.error, form fieldset textarea.error {background-color:#b00f1f;color:#fff;border:1px solid #000;}
form fieldset label.error {color:#b00f1f;}
form fieldset input.checkbox{float:left;margin:0 0.5em 0.5em 0;clear:none;width:auto!important;}
form fieldset input,form fieldset textarea{position:relative;display:block;padding:7px 5px;margin-bottom:0.7em;font-size:1em;line-height:1.2em;clear:both;color:#333;}
form fieldset textarea{height:200px;}
input.submit {background-color:#b00f1f;color:#fff;border:none;cursor:pointer;}
input.submit:hover {background-color:#666666;}

/* --[ =COLUMN SYSTEM ]------------------------------- */
/* 
We use a flexible 960 pixels 12-column grid system and have developed
a flexible system to quickly create page structure.

You can define a column using the following options:

	col [adds 15px to the right margin]
	one|two|three|four|six|seven|eight|nine|ten|eleven|twelve [defines width of column] 
	padding [adds 15px padding]
	single|both [reduces width of column by 15 or 30 pixels]
	clear [optional] 
	float [optional]
	btm_margin [adds 15px bottom margin to columns]
	last [removes the margin set by col, useful for columns that are last in the row]

eg. <div class="col padding four float last></div>
*/
.col{margin:0 15px 0 0; position:relative;position:relative;display:block;} 
.padding{padding:15px;}
.last{margin:0;}
.float{float:left; display:inline-block;clear:none;}
.btm_margin{margin:0 0 1.5em 0; clear:left;}

/* 
Reduce the column width by Xpx if padding if Xpx is applied to column. 
Currently calculated to accomodate 15px padding, so  this single declaration
it will reduce the column width by 15px. 

The following stacked classes can behave irratically in IE6. Therefore, it is important to 
explicity declare widths for any element using this modular system within the IE6 style sheet.
*/
.single.one{width:50px;}
.single.two{width:130px;}
.single.three{width:210px;}
.single.four{width:290px;}
.single.five{width:370px;}
.single.six{width:450px;}
.single.seven{width:530px;}
.single.eight{width:610px;}
.single.nine{width:690px;}
.single.ten{width:770px;}
.single.eleven{width:850px;}
.single.twelve{width:930px; margin:0;}
/* Form elements column override */  
form fieldset div.one input, form fieldset div.one textarea{width:38px;}
form fieldset div.two input, form fieldset div.two textarea{width:118px;}
form fieldset div.three input, form fieldset div.three textarea{width:198px;}
form fieldset div.four input, form fieldset div.four textarea{width:278px;}
form fieldset div.five input, form fieldset div.five textarea{width:358px;}
form fieldset div.six input, form fieldset div.six textarea{width:438px;}
form fieldset div.seven input, form fieldset div.seven textarea{width:518px;}
form fieldset div.eight input, form fieldset div.eight textarea{width:598px;}
form fieldset div.nine input, form fieldset div.nine textarea{width:678px;}
form fieldset div.ten input, form fieldset div.ten textarea{width:758px;}
form fieldset div.eleven input, form fieldset div.eleven textarea{width:838px;}
form fieldset div.twelve input, form fieldset div.twelve textarea{width:918px;}
form fieldset div.one select{width:65px;}
form fieldset div.two select{width:145px;}
form fieldset div.three select{width:225px;}
form fieldset div.four select{width:305px;}
form fieldset div.five select{width:385px;}
form fieldset div.six select{width:465px;}
form fieldset div.seven select{width:545px;}
form fieldset div.eight select{width:625px;}
form fieldset div.nine select{width:705px;}
form fieldset div.ten select{width:785px;}
form fieldset div.eleven select{width:865px;}
form fieldset div.twelve select{width:945px;}
                                                        

/* 
Reduce the column width by Xpx if padding if Xpx is applied to column. 
Currently calculated to accomodate 15px padding, so  this both declaration
it will reduce the column width by 30px. 

The following stacked classes can behave irratically in IE6. Therefore, it is important to 
explicity declare widths for any element using this modular system within the IE6 style sheet.
*/
.both.one{width:35px;}
.both.two{width:115px;}
.both.three{width:195px;}
.both.four{width:275px;}
.both.five{width:355px;}
.both.six{width:435px;}
.both.seven{width:515px;}
.both.eight{width:595px;}
.both.nine{width:675px;}
.both.ten{width:755px;}
.both.eleven{width:835px;}
.both.twelve{width:915px; margin:0;}
/* Form elements column override */
form fieldset div.both.one input, form fieldset div.both.one textarea{width:23px;}
form fieldset div.both.two input, form fieldset div.both.two textarea{width:103px;}
form fieldset div.both.three input, form fieldset div.both.three textarea{width:183px;}
form fieldset div.both.four input, form fieldset div.both.four textarea{width:263px;}
form fieldset div.both.five input, form fieldset div.both.five textarea{width:343px;}
form fieldset div.both.six input, form fieldset div.both.six textarea{width:423px;}
form fieldset div.both.seven input, form fieldset div.both.seven textarea{width:503px;}
form fieldset div.both.eight input, form fieldset div.both.eight textarea{width:583px;}
form fieldset div.both.nine input, form fieldset div.both.nine textarea{width:663px;}
form fieldset div.both.ten input, form fieldset div.both.ten textarea{width:743px;}
form fieldset div.both.eleven input, form fieldset div.both.eleven textarea{width:823px;}
form fieldset div.both.twelve input, form fieldset div.both.twelve textarea{width:903px;}
form fieldset div.both.one select{width:50px;}
form fieldset div.both.two select{width:130px;}
form fieldset div.both.three select{width:210px;}
form fieldset div.both.four select{width:290px;}
form fieldset div.both.five select{width:370px;}
form fieldset div.both.six select{width:450px;}
form fieldset div.both.seven select{width:530px;}
form fieldset div.both.eight select{width:610px;}
form fieldset div.both.nine select{width:690px;}
form fieldset div.both.ten select{width:770px;}
form fieldset div.both.eleven select{width:850px;}
form fieldset div.both.twelve select{width:930px;}

.one{width:65px;}
.two{width:145px;}
.three{width:225px;}
.four{width:305px;}
.five{width:385px;}
.six{width:465px;}
.seven{width:545px;}
.eight{width:625px;}
.nine{width:705px;}
.ten{width:785px;}
.eleven{width:865px;}
.twelve{width:945px; margin:0;}

/* --[ =HACKS ]-------------------------------- */
/* Universal clear */
.clear{clear:both;display:block;overflow:hidden;}
/* Enhanced Universal Clearfix hack */
.clearfix:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
.clearfix { display: inline-block; }
/* Start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* Close commented backslash hack */

/* Global */
.inv{position:absolute;left:-900000px; z-index:-1; height:1px; float:left;clear:none;display:inline;}   

/* --[ =JQUERY MODULAR COMPONENTS ]--------------------------- */


/* --[ =CSS MODULAR COMPONENTS]------------------------------- */

   
/* --[ =SITE-SPECIFIC STYLES (GLOBALLY APPLIED)]------------------------------- */
div#header{margin:0 auto;padding:25px 0 5px 0;}
div#header #logo{display:block;height:95px;}
div#header a:hover#logo {filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
div#content{margin:0 auto;padding-top:10px;}
div#footer{margin:0 auto;padding:70px 0 20px 0;font-size: 0.857143em;color:#aeafaf;}

ul#navigation_accesibility{position:absolute; left:-900000px;}  

div#nav ul{padding:0;margin:0;}
div#nav ul li{display:inline;list-style:none;position:relative;}
div#nav ul li a{float:left;margin:0 1em 0 0;}

/* --[ =SECTION-SPECIFIC STYLES]------------------------------- */
.customwidth {width:510px;}
/* splash */
html.splash, html.splash body {background-color:#B00F1F;}
html.splash body{width:100%;height:100%;}
html.splash  body div#flash_wrapper{width:960px;height:100%;padding-top:100px;margin:0 auto;}
/* home page */
div.border {display:block;height:20px;width:785px;background:url('../site_assets/images/generic/border.gif') 0 50% no-repeat;}
div.card {position:relative;overflow:hidden;width:196px; height:150px;}
div.card img {position:absolute;top:0;left:0; width:196px; height:150px;}
div.card a span{position:absolute;width:176px;height:130px;line-height:1.3em;overflow:hidden;padding:10px;top:150px;left:0;z-index:1;background:url('../site_assets/images/generic/slider_bg.png') repeat-y;}
div.card a span strong {text-transform: uppercase;font-family:Georgia, serif;color:#b00f1f;}
div.card a span, 
div.card a:link span, 
div.card a:visited span, 
div.card a:link:hover span,
div.card a:visited:hover span,
div.card a:link:focus span,
div.card a:visited:focus span, 
div.card a:link:active span,
div.card a:visited:active span  {color:#666666;}
div.card a:hover span.nojava {top:55px;left:0;}
div#content div.border {padding-bottom:15px;}
div#addintro {width:170px;margin-right:26px;}
div#addintro p {font-size: 1.285714em;line-height: 1.3em;margin-bottom:0;}
a.addstory,
a:link.addstory,
a:visited.addstory {display:block;width:150px;height:45px;background:url('../site_assets/images/generic/addstory_btn.gif') 0 0 no-repeat;text-indent:-9000px;}
a:link:hover.addstory,
a:visited:hover.addstory,
a:link:focus.addstory,
a:visited:focus.addstory,
a:link:active.addstory,
a:visited:active.addstory {background-position:top right;}
div#content h2.more {margin-top:0;color:#b00f1f;}
div#content img.cubit {margin-top:-10px;}
div#story_listing {display:block;width:589px;background:url('../site_assets/images/generic/storylisting_border.gif') top center repeat-y;margin-top:15px;}
div#story_listing h3 {margin:0;}
div#story_listing div.story {padding-bottom:10px;}
div#story_listing div.story.left{display:block;width:278px;padding-right:16px;}
div#story_listing div.story.right{display:block;width:278px;padding-left:16px;}
div#story_listing div.story p {line-height:1.4em;}
div#story_listing div.story p span.author {font-family:Georgia, serif;color:#b00f1f;}
/* modal and story page content */
div#content.storymodal {width:485px;}
div#content.storymodal h1 {display:block;width:350px;font-size:1.5em;line-height: 1em;font-weight:bold;color:#b00f1f;padding-top:15px;}
div#content.storymodal div.cogstory {width:350px;}
div#content.storymodal p.author {font-size: 0.916667em;}
div#content.storymodal div.song {width:80px;padding-left:20px;}
div#content.storymodal div.song h3 {font-family:Verdana, Geneva, sans-serif;font-size:0.833333em;margin-top:5px;}
div#content.storymodal div.commenting {padding-top:10px;}
div#content.storymodal div.commenting h3 a {display:block;width:150px;height:45px;text-indent:-9000px;background:url('../site_assets/images/generic/comment_btn.gif') top left no-repeat;padding-bottom:10px;}
div#content.storymodal div.commenting h3 a:hover {background-position:top right;}
div#content.storymodal div.commenting div.comments {display:block;border-bottom:1px dotted #aeafaf;margin-bottom:10px;}
div#content.storymodal div.commenting div.comments.last {border:none;}
div#content.storymodal div.commentform {padding-top:10px;}
div#content.storymodal div.rating {display:block;width:275px;height:150px;float:left;padding:10px;border:1px solid #b00f1f;margin-top:20px;}
div#content.storymodal div.rating h3 {margin-top:0;color:#b00f1f;}
div#content.storymodal div.rating form {float:left;width:60px;padding:0 12px;}
div#content.storymodal div.rating form#yes {border-right:1px solid #aeafaf;border-left:1px solid #aeafaf;margin-left:8px;}
div#content.storymodal div.rating form#yes fieldset input.submit {display:block;width:60px;height:88px;text-indent:-9000px;background:url('../site_assets/images/generic/voteyes_btn.gif') top left no-repeat;}
div#content.storymodal div.rating form#maybe {border-right:1px solid #aeafaf;}
div#content.storymodal div.rating form#maybe fieldset input.submit {display:block;width:60px;height:88px;text-indent:-9000px;background:url('../site_assets/images/generic/votemaybe_btn.gif') top left no-repeat;}
div#content.storymodal div.rating form#no {border-right:1px solid #aeafaf;}
div#content.storymodal div.rating form#no fieldset input.submit {display:block;width:60px;height:88px;text-indent:-9000px;background:url('../site_assets/images/generic/voteno_btn.gif') top left no-repeat;}
div#content.storymodal div.rating form#yes fieldset input.submit:hover,
div#content.storymodal div.rating form#maybe fieldset input.submit:hover,
div#content.storymodal div.rating form#no fieldset input.submit:hover {background-position:top right;} 
div#content.storymodal div.rating_result {display:block;width:130px;float:left;padding-left:30px;margin-top:20px;}
div#content.storymodal div.rating_result img {padding-left:25px;}
div#content.storymodal div.rating_result p {text-align:center;}
div#content.storymodal div.rating_result p.novotes {padding-top:125px;}
div#content.storymodal div.rating_result p span {font-weight:bold;color:#b00f1f;text-transform:uppercase;}

/* story archive */
body#storyarchive h2.more {padding:10px 0 20px 0;}
body#storyarchive img.cubit {margin-top:0;}
body#storyarchive div#story_listing {display:block;width:785px;}
body#storyarchive div#story_listing div.story.left{display:block;width:376px;padding-right:16px;}
body#storyarchive div#story_listing div.story.right{display:block;width:376px;padding-left:16px;}
body#storyarchive a.addstory {float:right;margin-top:-15px;}
body#storyarchive p.pagination {text-align:right;padding-top:15px;}

/* footer */
div#footer div.links {border-top:1px solid #aeafaf;border-bottom:1px solid #aeafaf;padding:10px 0;margin-bottom:10px;}
div#footer div.links a {display:block;height:26px;width:196px;float:left;}
div#footer div.links a.cog {height:21px;margin-top:2px;background:url('../site_assets/images/generic/cog_logo.gif') top left no-repeat;} 
div#footer div.links a.twitter {background:url('../site_assets/images/generic/twitter.gif') top left no-repeat;} 
div#footer div.links a.flickr {background:url('../site_assets/images/generic/flickr.gif') top left no-repeat;} 
div#footer div.links a.vimeo {background:url('../site_assets/images/generic/vimeo.gif') top left no-repeat;} 
div#footer div.links a:hover{background-position:bottom left;}

/* --[ =GRID ]--------------------------------- */
/*
Activate these styles for positioning during development.
*/
/* 
div#footer,div#head,div#content,p.topofpage{background:none;}
html {background:transparent url('../site_assets/grid_baseline.gif') repeat center top;}
html body {background:transparent url('../site_assets/grid_columns.png') repeat-y center top;}

*/