/**********************************************************************************************

	CSS on Sails
	Title: photostoryweekly.com
	Author: XHTMLized (http://www.xhtmlized.com/)
	Date: February 2010

***********************************************************************************************

	1. BASE
			1.1 Reset
			1.2 Accessibility Navigation & Hide
			1.3 Clearfix
			1.4 Default Styles

	2. LAYOUT
			2.1 Structure
			2.2 Header
			2.3 Navigation
			2.4 Content
			2.5 Sidebar
			2.6 Footer

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 1.1 Reset
-----------------------------------------------------------------------------------------------*/

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
a, ins, del { text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { text-align: left; }

/* 1.2 Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/

ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }


/* 1.3 Clearfix
-----------------------------------------------------------------------------------------------*/

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 1.4 Default Styles
-----------------------------------------------------------------------------------------------*/

body { background: #161616; color: #fff; font: 62.5%/1.9em Georgia, "Times New Roman", Times, serif; text-align: center; }
hr { display: none; }
strong { font-weight: bold; }
em { font-style: italic; }
del { text-decoration: line-through; }
th { font-weight: normal; }
address, cite, dfn { font-style: normal; }
li { list-style: none; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
input, textarea, select { font-family: "Arial", "Helvetica", sans-serif; }
a { color: #90abc5; text-decoration: none; }
a:hover{ color: #90abc5; text-decoration: underline; }

p{ padding-bottom: 19px; }


/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 2.1 Structure
-----------------------------------------------------------------------------------------------*/

.container { width: 845px; position: relative; margin: 0 auto; text-align: left; font-size: 1.2em; }
#content { width: 640px; float: left; padding-top: 18px; }
#sidebar { width: 177px; float: right; padding-top: 28px; }
#footer { clear: both; padding: 10px 0 90px; border-top: 1px solid #7b7b7b; font-family: Arial, Helvetica, sans-serif; }


/* 2.2 Header
-----------------------------------------------------------------------------------------------*/

#header{ position: relative; height: 153px; background: url(../images/bg-header.gif) no-repeat; }
#header .site-name{ font-size: 20px; color: #d2dbbd; padding-top: 59px; margin-left: -1px; }
#header p.tagline{ position: absolute; top: 93px; left: 0; width: 102px; height: 22px; overflow: hidden; position: absolute; font-size: 9px; padding: 0;}
#header p.tagline span{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/txt-viewbook-top.gif) no-repeat; }


/* 2.3 Navigation
-----------------------------------------------------------------------------------------------*/

#navigation{ position: absolute; width: 222px; top: 46px; right: 0; line-height: 15px; }
#navigation p{ padding-bottom: 6px; }
.week-nav{ float: left; width: 118px; height:26px; background: #fff; color: #161616; position: relative; }
.year-nav{ float: left; width: 90px; height:26px; background: #fff; color: #161616; margin-left: 14px; position: relative; }
.week, .year{ font-size: 16px; text-transform: uppercase; }
.year{ display: block; width: 50px; padding: 5px 0 0 10px; }
.week{ display: block; width: 80px; margin: 0 auto; text-align: center; padding-top: 5px; }
.week-nav .prev,
.week-nav .next,
.week-nav .prev span,
.week-nav .next span{ position: absolute; width: 9px; height: 15px; overflow: hidden; cursor: pointer; }
.week-nav .prev{ left: 5px; top: 6px; }
.week-nav .next{ right: 5px; top: 6px; }
.week-nav .prev span{ left: 0; top: 0; background: url(../images/arrow-left.gif) no-repeat;}
.week-nav .next span{ left: 0; top: 0; background: url(../images/arrow-right.gif) no-repeat;}

.year-nav .arrow-down,
.year-nav .arrow-down span{ position: absolute; height: 9px; width: 15px; cursor: pointer; }
.year-nav .arrow-down{ right: 4px; top: 9px; overflow: hidden; }
.year-nav .arrow-down span{ left: 0; top: 0; background: url(../images/arrow-down.gif) no-repeat;}


/* 2.4 Content
-----------------------------------------------------------------------------------------------*/

.article{ float: left; clear: both; padding-bottom: 15px; width: 640px; }
.article .main{ float: left; width: 484px; }
.article .aside{ float: right; padding-top: 10px; width: 148px; font-size: 11px; color: #b3b3b3; }

.article h2{ font-size: 27px; text-transform: uppercase; font-weight: normal; line-height: 35px; padding-bottom: 20px; }
.article h2, .article h2 a{ color: #fff;}
.article h2 a:hover{ text-decoration: none; }
.cufon-ready .article h2{ font-size: 34px; margin-left: -2px;}

h4,
.post-info{ color: #d2dbbd; text-transform: uppercase; font: 12px/14px Arial, Helvetica, sans-serif; font-weight: bold; }
.post-info{ margin-top: -20px;}
.post-contex-info{ color: #999; }

h3{ font-size: 32px; color: #d2dbbe; font-weight: normal; line-height: 35px; padding-bottom: 20px; margin-top: -10px; }

.article .aside h4{ padding-bottom: 7px;}
.article .aside .text{ border-left: 1px solid #41443a; padding-left: 8px; }
.article .aside .text p{ padding-bottom: 0; margin-bottom: 15px; }
.article .aside .image-wrapper{ padding: 0 0 5px 8px; font-size: 11px; color: #808080; }
.article .aside .image-wrapper img{ float: left; margin-bottom: 5px; }
.icon-enlarge{ width: 11px; height: 11px; display:inline-block; overflow: hidden; text-indent: -999em; background: url(../images/icon-enlarge.gif) no-repeat; }

.article-header .share{ float: left; width: 484px; clear: both; padding: 5px 0 30px; }
.article-header .share li{ float: left; padding-right: 15px; font-family: Arial, Helvetica, sans-serif; }
.article-header .share li a{ display: inline-block; background-repeat: no-repeat; height: 14px; padding-top: 3px;}
.article-header .icon-facebook{ padding-left: 18px; background-image: url(../images/icon-facebook.gif);}
.article-header .icon-twitter{ padding-left: 24px; background-image: url(../images/icon-twitter-blue.gif);}
.article-header .icon-email{ padding-left: 37px; background-image: url(../images/icon-email.gif);}

h4 span.highlight{ display: inline-block; background: #272727; padding: 5px 7px; color: #fff; margin-bottom: 10px; }

.featured-article{ background: #2d2d2d; }
.featured-article .main{ padding: 10px 0 0 10px; width: 474px; }
.featured-article .aside{ padding-top: 0; }
.featured-article h4{ margin-bottom: 15px;}

#comments{ clear: both; float: left; width: 640px; margin-top: 20px; border-top: 3px solid #9d9d9d; padding-top: 5px; }
#comments h4{ padding-bottom: 12px; color: #949494; }
#comments fieldset{ background: #2d2d2d; padding: 7px 10px; font-family: Arial, Helvetica, sans-serif; }
#comments fieldset p{ float: right; padding: 0; display: inline; color: #a9af9a; line-height: 16px; }
#comments fieldset label{ float: left; line-height: 16px; }
#comments fieldset textarea{ width: 620px; height: 80px; margin-top: 5px; padding: 0; border: 0; background: #424242; }
#comments .btn-logout{ position: relative; display: inline-block; width: 48px; height: 17px; }
#comments .btn-logout span{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/btn-logout.gif) no-repeat; }
#comments button{ width: 94px; height: 17px; text-indent: -999em; margin: 3px 0 0; padding: 0; border: none; background: url(../images/btn-submit.gif) no-repeat; }

#comments ul{ padding: 23px 10px 45px; font-family: Arial, Helvetica, sans-serif; color: #d2dbbe; }
#comments ul h5{ color: #9d9d9d; font-weight: normal; }

/* 2.5 Sidebar
-----------------------------------------------------------------------------------------------*/

#sidebar h4{ padding-bottom: 2px; }

.site-info, .subscribe{ width: 157px; padding: 10px; background: #d2dbbd; color: #3f606e; }
.site-info a{ color: #3f606e; }

.subscribe{ margin-top: 3px; float: left; padding: 7px 10px 15px; }
#sidebar .subscribe h4{ color: #3f606e; padding-bottom: 5px; }
.subscribe p{ font-style: italic; }
.subscribe input{ float: left; width: 114px; height: 16px; border: 0; padding: 1px 3px 0; margin: 0; outline: none; color: #454444; font: 11px/1em Georgia, "Times New Roman", Times, serif; font-style: italic; }
.subscribe button{ position: relative; float: left; width: 29px; height: 17px; margin: 0 0 0 5px; padding: 0; border: 0; background: url(../images/btn-send.gif) no-repeat; text-indent: -999em; }

.recent{ float: left; width: 168px; padding-left: 9px; margin: 23px 0 0; border-left: 1px solid #41443a; color: #808080; font-family: Arial, Helvetica, sans-serif;}
#sidebar .recent h4{ line-height: 1em; margin-top: -2px; padding-bottom: 5px;}
.recent em{ display: block; font-style: normal; }
.recent li{ padding-top: 5px;}

.support{ float: left; width: 168px; padding-left: 9px; margin: 23px 0 0; border-left: 1px solid #41443a;}
#sidebar .support h4{ padding-bottom: 7px;}
.support li{ padding-bottom: 5px;}

.rss{ float: left; width: 177px; margin-top: 23px; }
.rss a{ display: inline-block; padding: 2px 0 0 26px; height: 16px; background: url(../images/ico-rss-blue.gif) no-repeat 0 0; font-family: Arial, Helvetica, sans-serif; }


/* 2.6 Footer
-----------------------------------------------------------------------------------------------*/

#footer .share-links{ float: right; }
#footer .share-links li{ float: left; padding-left: 15px; }
#footer .share-links li a{ float: left; height: 9px; padding-top: 10px; background-repeat: no-repeat; background-position: 0 0; color: #6d6b6b; font-size: 10px; line-height: 1em; }
#footer .share-links li a.icon-rss{ padding-left: 26px; background-image: url(../images/icon-rss.gif); }
#footer .share-links li a.icon-twitter{ padding-left: 21px; background-image: url(../images/icon-twitter.gif); }
#footer .share-links li a.icon-share{ padding-left: 21px; background-image: url(../images/icon-share.gif); }
#footer .share-links li a.icon-bookmark{ padding-left: 21px; background-image: url(../images/icon-bookmark.gif); }

#footer .presented-by{ width: 400px; float: left; }
#footer .presented-by .intro{ color: #90abc5; padding-bottom: 10px; }
#footer .presented-by .intro img{ display: block; margin-top: 2px; }
#footer .presented-by .tagline{ font-size: 22px; line-height: 27px; padding-bottom: 15px; }

#footer .footer-nav{ clear: both; padding-top: 20px; color: #777777; font-weight: bold; line-height: 1em; }
#footer .footer-nav li{ float: left; border-left: 1px solid #737773; padding: 0 3px; }
#footer .footer-nav li.first{ padding-left: 0; border: none;}
#footer .footer-nav li a{ color: #fff; }

/* Lightbox
2.7 ----------------------------------------------------------------------------------------------*/
.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 500px;
	height: 500px;
	padding: 16px;
	border: 16px solid white;
	background-color: white;
	z-index:1002;
	overflow: auto;
}