/*
Company:	Eye of the Storm
File:		main.css - This contains all the main styles for the website.

All the styles are separted into the following groups:
Global Browser Reset - this is handled by the reset-fonts.css file from YUI
HTML, Body - for the html and body tags
Layout - styles that define the layout of the site
Modules - styles for content modules
Nav - navigation bar
Default Headings - headings like h1, h2, etc
Common Text Styles - Styles for text
Default Lists - unordered and ordered lists
Forms - html forms
Default Links - links
Misc - anything that doesn't fit elsewhere
*/

/* @group HTML, Body */
body {
	background: url(../images/body-bkg.jpg) repeat-x 0 0 #fff;
	font-family: Verdana, sans-serif;
	text-align: center;
}
body div{
	text-align: left;
}
/* @end */



/* @group Layout */

/* Head */
div#hd {
	width: 890px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	margin-bottom: 20px;
}

/* Body */
div#bd {
	width: 890px;
	margin-left: auto;
	margin-right: auto;
}

/* Footer */
div#ft {
	width: 840px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 30px;
}
div#ft p {
	font-size: 85%;
	color: #7b7a6d;
}
div#ft a:link, div#ft a:visited {
	color: #7b7a6d;
	text-decoration: none;
}
div#ft a:hover {
	text-decoration: underline;
}
div#ft p.left-col {
	width: 500px;
	float: left;
	display: inline;
}
div#ft p.right-col {
	width: 200px;
	text-align: right;
	float: right;
	display: inline;
}
/* @end */

/* @group Modules */
/* Logo */
h1#logo {
	width: 258px;
	height: 36px;
	background: url(../images/eots_logo.gif) no-repeat top center;
	text-indent: -9000px;
	overflow: hidden;
	float: left;
	display: inline;
}
h1#logo a {
	display: block;
	height: 100%;
}

/* Main image */ 
div#mainpromo {
    position: relative;
	height: 264px;
}

div#mainpromo.home {
    background: url(../images/main/peace_chaos_2.jpg) no-repeat 0 0 #0e111a;
}
div#mainpromo.contrib1 {
    background: url(../images/tree.jpg) no-repeat 0 0 #0e111a;
    height: 275px;
}
div#mainpromo a {
	width: 100%;
	height: 264px;
	text-indent: -9000px;
	overflow: hidden;
	display: block;
}

div#divider {
    border-top: 1px solid #C7C7C7;
}

/* Light Content Block */
div.light-block {
	padding: 35px 23px;
}
div.light-block div.left-col {
	width: 248px;
	margin-right: 40px;
	float: left;
	display: inline;
}
div.light-block div.left-col-wide {
	width: 558px;
	float: left;
	display: inline;
}
div.light-block div.center-col {
	width: 270px;
	float: left;
	display: inline;
}
div.light-block div.center-col a:link, div.light-block div.center-col a:visited {
	color: #365087;
}
div.light-block div.right-col {
	width: 248px;
	float: right;
	display: inline;
}
div.light-block div.right-col p {
	color: #2c2c2c;
}


div.left-col-half {
	width: 400px;
	float: left;
	display: inline;
}
div.right-col-half {
	width: 400px;
	float: right;
	display: inline;
}

div.content h2{
    font: 1.5em "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida",Tahoma,Verdana,Arial,sans-serif;
    color: #474747;
}

div.content h2.hd-what {
	background: url(../images/hd-what.gif) no-repeat 0 0;
	width: 100%;
}
div.content h2.hd-how-you-help {
	background: url(../images/hd-how-you-help.gif) no-repeat 0 0;
	width: 100%;
}
div.content h2.hd-spread-the-word {
	background: url(../images/hd-spread-the-word.gif) no-repeat 0 0;
	width: 100%;
}
div.content h2.hd-mailinglist {
	background: url(../images/hd-mailinglist.gif) no-repeat 0 0;
	width: 100%;
}
div.content h3.hd-tell-us-story {
	background: url(../images/hd-tell-us-story.gif) no-repeat 0 0;
	width: 100%;
}
div.content h3.hd-join-the-network {
	background: url(../images/hd-join-network.gif) no-repeat 0 0;
	width: 100%;
}
div.content h3.hd-sponsors {
	background: url(../images/hd-sponsors.gif) no-repeat 0 0;
	width: 100%;
}



/* Spread the word */
div.spread-word {
	margin-bottom: 30px;
}
div.spread-word a#myspace,
div.spread-word a#facebook,
div.spread-word a#digg
 {
	display: block;
	width: 75px;
	height: 71px;
	border: 1px solid #d4d4d2;
	text-indent: -9000px;
	overflow: hidden;
	margin-bottom: 15px;
	float: left;
	display: inline;
}
div.spread-word a#myspace {
	background: url(../images/myspace.gif) no-repeat 0 0 #f2f2f0;
	margin-right: 8px;
}
div.spread-word a#facebook {
	background: url(../images/facebook.gif) no-repeat 0 0 #f2f2f0;
	margin-right: 8px;
}
div.spread-word a#digg {
	background: url(../images/digg.gif) no-repeat 0 0 #f2f2f0;
}

div.spread-word a#myspace:hover {
	border: 1px solid #a0a191;
	background-color: #fafaf7;
}
div.spread-word a#facebook:hover {
	border: 1px solid #a0a191;
	background-color: #fafaf7;
}
div.spread-word a#digg:hover {
	border: 1px solid #a0a191;
	background-color: #fafaf7;
}

div.social-btns {
	text-align: center;
}

/* Homepage Highlight Box */
div.highlight-box {
	background-color: #f2f2f0;
	margin-bottom: 20px;
}
div.highlight-box div.highlight-box-content {
	width: 130px;
	padding-top: 10px;
	float: left;
	display: inline;
}

div.highlight-box p {
	font-size: 77%!important;
	margin: 0 0 10px 0!important;
}
div.highlight-box img {
	margin: 0 15px 0 0;
	float: left;
	display: inline;
}

/* Contact/team  Content */
div.team-item {
	background-color: #f2f2f0;
	padding: 10px;
	margin-bottom: 20px;
}

#info-content div.team-item-content {
    float: left;
	display: inline;
	width: 420px;
	padding-bottom: 20px;
}

div.team-item img {
	margin: 0 15px 0 0;
	float: left;
	display: inline;
}
div.team-item-content img {
	float: none;
}
#info-content div.team-item a {
	padding: 5px;
	font-size: 77%!important;
	text-decoration: none;
	background-color: #a1a08f;
}
#info-content div.team-item a:hover {
	background-color: #e5e8e0;
}

/* FAQ Content */

#faq-content dt{
	cursor: pointer;
	padding: 10px;
	margin-bottom: 5px;
	background: #F2F2F0 url(../images/plus.gif) no-repeat center right;
	padding-right: 20px;
}
#faq-content dt.open{
	background: #F2F2F0 url(../images/minus.gif) no-repeat center right;
}
#faq-content dd{
	display: none;
	width:530px;
	padding: 10px;
}
#faq-content ul{
	margin-left:  20px;
	margin-bottom: 2em;
}
#faq-content li{
	list-style: disc;
}

#faq-content h3{
	font: 1.2em "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida",Tahoma,Verdana,Arial,sans-serif;
    color: #474747;
	margin: 10px;
}


/* Terms Content */

#terms-content ul{
	margin-left:  20px;
	margin-bottom: 2em;
}
#terms-content li{
	list-style: disc;
}
#terms-content h4{
	margin-bottom: 1.2em;
}
/* Dark Content Block */
div.dark-block {
	padding: 35px 23px;
	background-color: #f2f2f0;
	border-top: 1px solid #d5d4ca;
	margin-bottom: 20px;
}
div.dark-block div.left-col {
	width: 410px;
	margin-right: 22px;
	float: left;
	display: inline;
}
div.dark-block div.center-col {
	width: 217px;
	float: left;
	display: inline;
	margin-right: 30px;
}

div.dark-block div.right-col {
    display:inline;
    float:left;
    width:152px;
}

div.dark-block h2.hd-whats-new {
	background: url(../images/hd-whats-new.gif) no-repeat 0 0;
	width: 100%;
}
div.dark-block h2.hd-archives {
	background: url(../images/hd-archive.gif) no-repeat 0 0;
	width: 100%;
}
div.dark-block h2.hd-favourites {
	background: url(../images/hd-favourites.gif) no-repeat 0 0;
	width: 100%;
}

p.byline {
	color: #7b7a6d!important;
}
p.byline a {
	font-weight: bold;
}
p.byline a:link, p.byline a:visited {
	color: #7b7a6d;
	text-decoration: none;
}

/* Month List */
div.content ul.months {
	margin-bottom: 20px;
}
div.content ul.months li {
	width: 100%;
	float: left;
	display: inline;
}
div.content ul.months li a {
	display: block;
	padding: 5px 5%;
	width: 90%;
	float: left;
	display: inline;
}
div.content ul.months li a:link, div.content ul.months li a:visited {
	text-decoration: none;
}
div.content ul.months li a:hover {
	background-color: #e5e8e0;
	text-decoration: none;
}
div.content ul.months li.active a:link, div.content ul.months li.active a:visited {
	background-color: #a1a08f;
	color: #fff;
}


/* Tag Cloud */
#tagcloud, #relatedtags{
    background-color: #e5e8e0;
    padding: 10px;
}

#tagcloud a, #relatedtags a{
    color: #518AC4;
    text-decoration: none;
}
#tagcloud a:hover, #relatedtags a:hover{
    color: #4A4A4A;
    text-decoration: ;
}


ul#similartags{
    border-top: 1px solid #d4d4d2;
    padding: 10px;
}

#similartags li {
    display: block;
    float: left;
    margin-right: 6px;
}
#similartags li:last-child {
    margin-right: 0px;
}
/* HR */
div.hr {
	background: url(../images/hr.gif) repeat-x 0 0;
	height: 1px;
	overflow: hidden;
	margin-bottom: 20px;
}
div.hr hr {
	display: none;
}

/* Content Image */
img.fullsize {
	margin-bottom: 20px;
}

/* Pagination */
p.pagination {
	color: #2c2c2c;
	text-align: center;
}
p.pagination a:link, p.pagination a:visited {
	color: #2c2c2c;
	text-decoration: none;
}
p.pagination a, p.pagination .current {
	padding: 4px 8px;
	background-color: #e5e8e0;
}
p.pagination .current {
    background-color: #a1a08f;
	color: #fff;
	margin-left: 4px;
}

/* Play Box */
div.play-box {
	border: 1px solid #d4d4d2;
	padding: 10px;
	background-color: #f7f7f5;
	margin-bottom: 10px;
}
div.play-box img {
	margin-right: 8px;
	float: left;
	display: inline;
}
div.play-box div.play-box-content {
    display:inline;
    float:left;
    padding-top:8px;
    text-align:center;
    width:129px;
}

a.play-btn, a.more-btn, a.read-btn {
	display: block;
	width: 61px;
	height: 19px;
	text-indent: -9000px;
	overflow: hidden;
	background: url(../images/play-btn.gif) no-repeat 0 0;
	margin-left: auto;
	margin-right: auto;
}
a.more-btn {
    background: url(../images/more-btn.gif) no-repeat 0 0;
}
a.read-btn {
    background: url(../images/read-btn.gif) no-repeat 0 0;
}
a.play-btn:hover, a.more-btn:hover, a.read-btn:hover {
	background-position: 0 -19px;
}

div.play-box h4 {
	font-size: 90%;
	color: #2c2c2c;
	margin-bottom: 10px;
}

div.clip {
	float:left;
	margin-right: 8px;
	width: 150px;
	min-height: 200px;
	border: 1px solid #d4d4d2;
	padding: 10px;
	background-color: #f7f7f5;
	margin-bottom: 10px;
	text-align: center;
}
div.clip div.clip-content {
	padding-top: 8px;    
}


/* Media player and downloads */

div#pdfdownload{
    margin-top: 30px;
    padding: 30px;
    padding-left: 210px;
    background: url(../images/PDF_icon.gif) no-repeat 30px center;
}

/* Subscribe RSS */
p.subscribe-rss a {
	display: block;
	background: url(../images/subscribe-rss-left.gif) no-repeat 0 0;
	height: 26px;
	font-size: 108%!important;
	float: left;
	display: inline;
}
p.subscribe-rss a:link, p.subscribe-rss a:visited {
	color: #474747;
	text-decoration: none;
}
p.subscribe-rss a span {
	display: block;
	height: 26px;
	background: url(../images/subscribe-rss-right.gif) no-repeat 100% 0;
	float: left;
	display: inline;
}
p.subscribe-rss a span span {
	background: url(../images/rss-icon.gif) no-repeat 92% 50%!important;
	line-height: 26px;
	padding: 0 30px 0 6px;
	float: left;
	display: inline;
}
p.subscribe-rss a:hover {
	background-position: 0 -26px;
}
p.subscribe-rss a:hover span {
	background-position: 100% -26px;
}
/* @end */

/* @group Nav */
div#nav {
	float: right;
	display: inline;
}
div#nav ul li {
	margin-right: 2px;
	float: left;
	display: inline;
}
div#nav ul li a {
	display: block;
	background: url(../images/nav-right.gif) no-repeat 100% 0;
	line-height: 34px;
	height: 34px;
	float: left;
	display: inline;
}
div#nav ul li a span {
	display: block;
	background: url(../images/nav-left.gif) no-repeat 0 0;
	line-height: 34px;
	height: 34px;
	padding: 0 8px;
	float: left;
	display: inline;
}

div#nav a:link, div#nav a:visited {
	color: #6f6f6f;
	text-decoration: none;
}
div#nav ul li a.active:link, div#nav ul li a.active:visited {
	color: #fff;
}

div#nav ul li a:hover {
	background-position: 100% -34px;
}
div#nav ul li a:hover span {
	background-position: 0 -34px;
}
div#nav ul li a.active, div#nav ul li a.active:hover {
	background-position: 100% -68px;
}
div#nav ul li a.active span, div#nav ul li a.active:hover span {
	background-position: 0 -68px;
}
/* @end */

/* @group Default Headings */
div.content h2 {
	margin-bottom: 17px;
}
div.content h3 {
	margin-bottom: 6px;
}

/* image replacement headings*/
div.content h2.replace {
	height: 22px;
	text-indent: -9000px;
	overflow: hidden;
	margin-bottom: 17px;
}
div.content h3.replace {
	height: 22px;
	text-indent: -9000px;
	overflow: hidden;
	margin-bottom: 6px;
}
div.content h3.replace a {
	display: block;
	height: 100%;
}
/* @end */

/* @group Common Text Styles */
strong {
	font-weight: bold;
}
div.content p{
	font-size: 85%;
	color: #4a4a4a;
	line-height: 150%;
	margin-bottom: 20px;
}
.darkbold {
	font-weight: bold!important;
	color: #2c2c2c!important;
}

.error{
color:#EE2E2E;
padding: 10px;
background-color:#bc2c2c;
}

.searchterms{
padding: 10px;
background-color:#f2f2f0;
margin-bottom: 15px;
}

/* @end */

/* @group Default Lists */
div.content ul {
	font-size: 85%;
	color: #4a4a4a;
	line-height: 150%;
}
/* @end */

/* @group Forms */
form.email-signup input.txt {
	border: 1px solid #d4d4d2;
	background-color: #f2f2f0;
	color: #7b7a6d;
	width: 240px;
    padding:6px 6px 5px;
    overflow: visible;
}
form.email-signup p{
    text-align: center;
    margin: 0px;
    margin-bottom: 5px;
}

form.email-signup p label {
    display:block;
    float:left;
    margin:0px 5px 10px;
    line-height: 1.1em;
    text-align:left;
    width:180px;
}
form.email-signup #terms {
    margin:5px;
}


/* comments form */

#comment_form {  }
#comment_form fieldset { padding: 20px; background-color: #f2f2f0;	border-top: 1px solid #d5d4ca;}
#comment_form label { display: block; }
#comment_form input { padding: 5px; width: 156px; border:0 none;}
#comment_form p { margin-bottom: 0;}
#comment_form textarea { margin: 0; padding: 5px; width: 508px; height: 80px; border:0 none;}
#comment_form input[type='submit'] { margin-left: 5px; padding: 3px 20px; width: auto; height: auto; background: #999; color: #fff; cursor: pointer; }
#comment_form #author_info p { float: left; margin-bottom: 15px; margin-left: 10px;}
#comment_form #author_info p:first-child { margin-left: 0px;}

ol#comment_listing{
  border-top: 1px solid #d5d4ca;
  margin-bottom: 20px;
}
ol#comment_listing h3{
  margin: 20px 0px;
  font-size: 1.4em;
}
ol#comment_listing li{
  min-height:6em;
  padding: 15px;
  border-top: 1px solid #d5d4ca;
}
ol#comment_listing .comment-data{
  width: 140px;
  float: left;
  margin-bottom: 0;
}
ol#comment_listing .comment-number{
  color: #C0C0C0;
  font-size: 1.4em;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #d5d4ca;
  float: left;
  min-height: 6em;
}
ol#comment_listing abbr{
  color: #C0C0C0;
  font-size: 0.8em;
}
ol#comment_listing li blockquote{
  margin-left: 160px;
}

.comments_error {
    color:#EE2E2E;
}
label.comments_error {
    color: #EE2E2E;
    width: 156px;
}

#comment_result { 
    padding: 20px; 
    background-color: #f2f2f0;	
    border: 1px solid #d5d4ca; 
    display: none;
}

/* @end */

/* @group Default Links - link visited hover active */
a:link, a:visited {
    cursor:pointer;
	color: #2c2c2c;
}
a:hover {
    cursor:pointer;
	text-decoration: none;
}

.post_title {
	font-weight: bold;
	color: #2c2c2c;
}
.post_title a {
	text-decoration: none;
}
.post_title a:hover {
	text-decoration: underline;
}
/* @end */



/* Media clips */

table.videotable{
    width:100%;
    border-collapse: separate;
    border-spacing: 7px;
}
.videotable td{
    vertical-align: top;
}
.videotable td p{
    margin-bottom: 10px;
}

.media_byline{
    color: #808080;
    color: #12151D;
    display:block;
    font-size:0.8em;
    line-height:1.2em;
    margin-top: 3px;
    padding: 3px;
    border-top: 1px solid #E5E8E0;
}

#nocontribs{
    padding: 20px;
}

/* @end */


/* Tabs */
#tabs {
  float:left;
  width:100%;
  line-height:normal;
  }
#tabs ul {
  margin:0;
  padding:0;
  list-style:none;
  }
#tabs li {
  display:inline;
  margin:0;
  padding:0;
  }
#tabs a {
  float:left;
  background:url("../images/tabs/tableft.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 10px;
  text-decoration:none;
  border-bottom:1px solid #E5E5E5;
  }
#tabs a span {
  float:left;
  display:block;
  background:url("../images/tabs/tabright.gif") no-repeat right top;
  padding:9px 18px 9px 11px;
  color:#FFF;
  margin-right: 3px;
  }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
  color:#518AC4;
  }
  
#tabs.audio #tab_audio a, #tabs.video #tab_video a,
#tabs.images #tab_images a, #tabs.written #tab_text a {
background-position:0% -150px;
border-width:0;
}
#tabs.audio #tab_audio a span, #tabs.video #tab_video a span,
#tabs.images #tab_images a span, #tabs.written #tab_text a span {
background-position:100% -150px;
padding-bottom:10px;
color:#333;
}

#tabs a:hover, #tabs a:hover span{
  background-position:0% -75px;
}
  
.tabbed{
    background: #fff;
}


/* @end */


/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide {
        display: none !important;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .ui-tabs-nav {
        display: none;
    }
}

/* Skin */
.ui-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 3px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.ui-tabs-nav li {
    float: left;
    margin: 0 0 0 2px;
}



.ui-tabs-nav a {
    float: left; /* fixes dir=ltr problem and other quirks IE */
    padding: 0 12px;
    background: url(../images/tabs/inlinetabright.gif) no-repeat;
    margin: 4px 0 0 0; /* position: relative makes opacity fail for disabled tab in IE */
    padding-left: 0;
    background-position: 100% 0;
    text-decoration: none;
    white-space: nowrap; /* @ IE 6 */
    outline: 0; /* @ Firefox, prevent dotted border after click */    
}
.ui-tabs-nav a:link, .ui-tabs-nav a:visited {
    color: #fff;
}
.ui-tabs-nav .ui-tabs-selected a {
    position: relative;
    top: 1px;
    z-index: 2;
    margin-top: 0;
    background-position:100% -150px;
}
.ui-tabs-nav a span {
    float: left; /* fixes dir=ltr problem and other quirks IE */
    padding: 0 12px;
    background: url(../images/tabs/inlinetableft.gif) no-repeat;
    padding-top: 1px;
    padding-right: 0;
    height:36px;
    line-height:36px;  
    background-position: 0 0;
}
.ui-tabs-nav .ui-tabs-selected a span {
    padding-top: 0;
    height:40px;
    line-height:40px;
    background-position:0 -150px;
    color:#6F6F6F;
}


.ui-tabs-nav a:hover{
    background-position:100% -75px;
    color: #6F6F6F;
}
.ui-tabs-nav a:hover span{
    background-position:0% -75px;
    color: #6F6F6F;
}

.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited,
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
    color: #000;
}
.ui-tabs-panel {
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
/*.ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}*/

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html .ui-tabs-nav  { /* auto clear @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}


/* @group Misc */
.clear {
	clear: both;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* @end */