/**
 * @file common.blog.css
 * @type css
 * @date 08/02/2010
 * @author Rach
 * Template styling for all the blogs
 */

/******************************************************************************* Conatiner elements */

/*
		BLOG KEY-

		When writing CSS styling specifically for a blog, make sure to set the
		specificity with something like:

		.blog_wrapper#borrower_blog .body .nav .nav_block .body
		{
			background-image:url("../images/blog_container_middle.png");
		}

		Each blog's blog_wrapper should have an id, and unique styling can be
		specified with each id.  Additionally, styles for specific blogs should
		go in their own .less/.css file, such as "page.blog.borrower.less".

		Blog names:
		* StorageFront Renter [Bent] Blog - #renter_blog
		* StorageFront Owner [Marketing Ahead] Blog - #marketing_blog

		The styling of the post itself, the copy that the marketers write, should
		be stored in common.blogpost.css.  It should NOT be specified in this file!!
*/

.blog_wrapper
{
	width: 980px;
	min-height: 100px;
}

.blog_wrapper .header
{
	width: 980px;
	min-height: 50px;
}

.blog_wrapper .body
{
	width: 980px;
	min-height: 50px;
}

.blog_wrapper .body .posts
{
	float:left;
	width:725px;
}

.blog_wrapper .body .posts .notification,
.blog_wrapper .body .posts .notification_error
{
	width:500px;
	padding: 10px 10px 10px 10px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:15px;
	margin-top:10px;
}

.blog_wrapper .body .posts .notification
{
	width:500px;
	padding: 10px 10px 10px 10px;
	text-align:center;
	margin-top:10px;
	border: 2px solid #3976aa;
	background-color: #3977BB;
}

.blog_wrapper .body .posts .notification_error
{
	width:500px;
	padding: 10px 10px 10px 10px;
	text-align:center;
	margin-top:10px;
	border: 2px solid #FF0000;
	background-color: #FFFFFF;
}

.blog_wrapper .body .posts .notification_error,
.blog_wrapper .body .posts .notification_error h3,
.blog_wrapper .body .posts .notification_error h2
{
	color: #545861;
}

.blog_wrapper .body .posts .notification,
.blog_wrapper .body .posts .notification h3,
.blog_wrapper .body .posts .notification h2
{
	color: #FFFFFF;
}

.blog_wrapper .body .posts .notification h3,
.blog_wrapper .body .posts .notification_error h3
{
	font-size:12px;
	font-weight:bold;
	padding-top:0px;
	padding-bottom:0px;
}

.blog_wrapper .body .posts .notification h2,
.blog_wrapper .body .posts .notification_error h2
{
	font-size:14px;
	font-weight:bold;
	margin-bottom:8px;
}


.blog_wrapper .body .posts .post_container
{
	width:670px;
}

.blog_wrapper .body .posts .post_container .header
{
	width:670px;
}

.blog_wrapper .body .posts .post_container .header .title
{
	float:left;
	width:570px;
	margin-left:35px;
}

.blog_wrapper .body .posts .post_container .header .title h2 a
{
	text-decoration:none;
}

.blog_wrapper .body .posts .post_container .header .title h2 a:hover
{
	text-decoration:underline;
}

.blog_wrapper .body .posts .post_container .header .title p
{
	color:#83868D;
}

.blog_wrapper .body .posts .post_container .header .title p a
{
	color:#83868D;
	text-decoration:none;
}

.blog_wrapper .body .posts .post_container .header .title p a:hover
{
	color: #555b69;
	text-decoration:underline;
}

.blog_wrapper .body .posts .post_container .header .date
{
	float:right;
	text-align:center;
	width:74px;
	height:77px;
}

.blog_wrapper .body .posts .no_posts_available
{
	margin-top:25px;
	padding-left:25px;
	padding-right:25px;
	text-align:center;
	line-height:25px;
	font-size: 12px;
}

.blog_wrapper .body .posts .no_posts_available h2
{
	font-size:16px;
}

.blog_wrapper .body .posts .post_container .body
{
	width:670px;
}

.blog_wrapper .body .posts .post_container .body .avatar
{
	float:left;
	width:160px;
	height:160px;
	margin-left:-15px;
	margin-right:25px;
}

.blog_wrapper .body .posts .post_container .body .post_container
{
	float:left;
	font-size:13px;
	max-width:550px;
}

/** Where the categories / social media links / etc go **/
.blog_wrapper .body .posts .post_container .body .post_container .addendum
{
	margin-top:20px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .comments a
{
	color:#545861;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .category_spacer
{
	clear:both;
	height:20px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .comment
{
	border-bottom: 1px solid #C9D0DF;
	margin-bottom:20px;
	margin-left:10px;
	margin-top:20px;
	padding:5px 5px 20px;
	width:550px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .comment .body
{
	min-height:0;
	width:550px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .comment .light_comment_sub
{
	font-size:11px;
	color:#AAAAAA;
	font-weight:normal;
}


.blog_wrapper .body .posts .post_container .body .post_container .addendum .comment .author h3 a
{
	color:#545861!important;
	cursor:pointer;
	text-decoration:none!important;
	font-size:12px;
	font-weight:bold;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .comment .author
{
	color:#AAAAAA;
	font-size:10px;
	padding-bottom:15px;
}


.blog_wrapper .body .posts .post_container .body .post_container .addendum .post_comment_form .left
{
	float:left;
	width:215px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .post_comment_form .left_checkbox
{
	float:left;
	width:250px;
	padding-top:13px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .post_comment_form .right
{
	float:left;
	padding-left:15px;
	font-size:13px;
	padding-top:3px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .post_comment_form .button_right
{
	float:right;
}


.blog_wrapper .body .posts .post_container .body .post_container .addendum .post_comment_form .textarea_wrapper
{
	background-image:url("../images/lazy-textarea-blog-comments.png");
	background-repeat:no-repeat;
	width:522px;
	height:222px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .post_comment_form .clear
{
	clear:both;
	height:10px;
}

/** Navigation bar **/
.blog_wrapper .body .nav
{
	float:right;
	width:240px;
}

.blog_wrapper .body .nav .nav_block
{
	width:230px;
}

.blog_wrapper .body .nav .nav_block #nav_categories
{
	width:230px;
}
.blog_wrapper .body .nav .nav_block #nav_archives
{
	width:230px;
}
.blog_wrapper .body .nav .nav_block #nav_contributors
{
	width:230px;
}
.blog_wrapper .body .nav #nav_contributors a
{
	color:#3977BB!important;
	text-decoration:none;
}
.blog_wrapper .body .nav #nav_contributors a:hover
{
	text-decoration:underline;
}

.blog_wrapper .body .nav .nav_block #nav_tweets
{
	width:230px;
}

.blog_wrapper .body .nav .nav_block .header
{
	width:230px;
}

.blog_wrapper .body .nav .nav_block .body
{
	width:180px;
	padding-right:20px;
	font-size:13px;
}

.blog_wrapper .body .nav .nav_block .footer
{
	width:230px;
}

/******************************************************************************* Text styling */

/** Post title field **/
.blog_wrapper .body .posts .post_container .header .title h1,
.blog_wrapper .body .posts .post_container .header .title h1 a,
.blog_wrapper .body .posts .post_container .header .title h2,
.blog_wrapper .body .posts .post_container .header .title h2 a
{
	font-size: 26px;
	font-weight: bold;
	color: #3977BB;
}

/** Author field **/
.blog_wrapper .body .posts .post_container .header .title p,
.blog_wrapper .body .posts .post_container .header .title p a
{
	font-size: 14px;
	font-weight:bold;
	color: #545861;
	line-height:20px;
}

/** Date text **/
.blog_wrapper .body .posts .post_container .header .date p.month
{
	color: #FFFFFF;
	font-size: 12px;
	font-weight:bold;
	padding-top:6px;
	padding-right:10px;
}

.blog_wrapper .body .posts .post_container .header .date p.day
{
	font-size: 28px;
	font-weight:bold;
	color: #545861;
	padding-right:10px;
}

.blog_wrapper .body .posts .post_container .header .date p.year
{
	font-size: 10px;
	font-weight: bold;
	padding-right:10px;
	margin-top:-5px;
}

/** Post-post "Categories" header **/
.blog_wrapper .body .posts .post_container .body .post_container .addendum h3
{
	font-size: 15px;
	font-weight: bold;
	color: #545861;
	padding:0;
}

/** Post-post Categories links **/
.blog_wrapper .body .posts .post_container .body .post_container .addendum ul
{
	list-style: none outside none;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum ul li
{
	font-size: 12px;
	line-height: 15px;
	background:none;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .comment_count a
{
	color:#545861;
	text-decoration:none;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .comment_count a:hover
{
	color: #545B94;
}


.blog_wrapper .body .posts .post_container .body .post_container .addendum .social_media ul li
{
	float: left;
	margin-right:5px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum  .prev_next_nav
{
	font-weight:bold;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .prev_next_nav a
{
	color: #3977BB;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .category_list ul
{
	margin-top:10px;
}


.blog_wrapper .body .posts .post_container .body .post_container .addendum .category_list ul li
{
	padding:0px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .category_list ul li a
{
	font-size:14px;
	font-weight:normal;
	text-decoration:none;
	margin:0;
	line-height:18px;
	color: #3977BB;
}
.blog_wrapper .body .posts .post_container .body .post_container .addendum .category_list ul li a:hover
{
	text-decoration:underline;
}
.blog_wrapper .body .posts .post_container .body .post_container .addendum .category_list ul li
{
	padding-bottom:7px !important;
	padding-left:0;
	padding-right:0;
	padding-top:0;
}


.blog_wrapper .body .posts .post_container .body .post_container .addendum .category_list ul li a:hover
{
	color:#3978CC;
}

/** Nav stylings **/
.blog_wrapper .body .nav .nav_block .body h4
{
	color: #545861;
	font-size: 18px;
	font-weight: bold;
	padding-left: 20px;
	padding-top: 34px;
}

.blog_wrapper .body .nav .nav_block .year_icon_collapsed,
.blog_wrapper .body .nav .nav_block .year_icon_expanded
{
	float:left;
	width:16px;
	height:16px;
	cursor:pointer;
}

.blog_wrapper .body .nav #nav_archives .year
{
	padding-bottom:0px;
	margin-bottom:0px;
	cursor:pointer;
	color: #3977BB;
	text-decoration:none;
	float:left;
	font-size:12px;
}

.blog_wrapper .body .nav #nav_archives .year:hover
{
	text-decoration:underline;
}


.blog_wrapper .body .nav #nav_archives .sub_year
{
	clear:both;
	font-size:12px;
}

.blog_wrapper .body .nav #nav_archives ul.months
{
	padding-top:0px;
}

.blog_wrapper .body .nav #nav_archives ul li.month
{
	padding-left: 0;
	margin-left: 25px;
	clear:both;
}

.blog_wrapper .body .nav .nav_block .year_icon_collapsed
{
	background:url("../images/blog-specific/treenav_arrowright.png") no-repeat 0px 2px;
}

.blog_wrapper .body .nav .nav_block .year_icon_expanded
{
	background:url("../images/blog-specific/treenav_arrowdown.png") no-repeat 0px 2px;
}

.blog_wrapper .body .nav .nav .tweets
{
	padding-bottom:25px;
}

.blog_wrapper .body .nav #nav_tweets .inner_nav
{
	position:relative;
}


.blog_wrapper .body .nav #nav_tweets .header
{
	position:relative;
}

.blog_wrapper .body .nav #nav_tweets .header .twitter_icon,
.blog_wrapper .body .nav #nav_tweets .body .twitter_icon
{
	height:16px;
	position:absolute;
	right:80px;
	top:38px;
	width:16px;
	max-width:20px;
}

/* h4 styling should be in the body for most cases, but with LS Borrower blog, it's in the header */

.blog_wrapper .body .nav .nav_block .body ul
{
	list-style: none outside none;
}

.blog_wrapper .body .nav .nav_block .body ul li
{
	font-size: 13px;
	line-height: 18px;
}

.blog_wrapper .body .nav .nav_block .body ul li a
{
	color: #3977BB;
	text-decoration: none;
}
.blog_wrapper .body .nav .nav_block .body ul li a:hover
{
	color: #3978CC;
	text-decoration: underline;
}

/** Twitter feed on nav bar **/
.blog_wrapper .body .nav .nav_block .body .tweets p
{
	font-size: 11px;
	line-height: 14px;
}

.blog_wrapper .body .nav .nav_block .body .tweets p a
{
	color: #3977BB;
	text-decoration:none;
}

.blog_wrapper .body .nav .nav_block .body .tweets p a:hover
{
	text-decoration:underline;
	color: #3978CC;
}

.blog_wrapper .body .nav .nav_block .body .tweets p.sub_text
{
	padding-top: 5px;
	padding-bottom:10px;
	margin-left:-5px;
	width:180px;
	font-size: 11px;
	line-height: 14px;
	text-decoration:none;
	color: #AAAAAA;
}

.blog_wrapper .body .nav #nav_tweets .body .tweets .sub_text a
{
	color: #AAAAAA;
}

/******************************************************************************* Text input */

.blog_wrapper .body .posts .post_container .body .post_container .addendum .post_comment_form .left input[type=text]
{
	border:0;
	width:200px !important;
	background:transparent;
	padding-top:2px;
	padding-left:5px;
	padding-right:5px;

	color:#888888!important;
}

.button_right em
{
	color:#FFFFFF!important;
}


.blog_wrapper .body .posts .post_container .body .post_container .addendum .post_comment_form .textarea_wrapper
{
	background:url("../images/Blog_Comment_Textarea_smaller.png") no-repeat;
	height:222px;
	width:497	px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .post_comment_form .comment_textbox_bg
{
	background:url("../images/Blog_Comment_Textbox.png") no-repeat;
	height:24px;
}

.blog_wrapper .body .posts .post_container .body .post_container .addendum .post_comment_form .textarea_wrapper textarea
{
	font-family:verdana;
	color:#888888!important;
	font-size:13px;
	height:210px;
	overflow-y: auto;
	overflow-x: auto;
	padding:5px;
	width:510px;
	background:none repeat scroll 0 0 transparent;
	border-style:none;
}

/******************************************************************************* Miscellaneous */

.clear
{
	clear:both;
	height:0;
}

.hr_bar
{
	clear:both;
	max-height:1px;
	min-height:1px;
	background-color:#AAAAAA;
	width:560px;
	margin-top:20px;
	margin-bottom:25px;
	margin-left:166px;
}

.post_container .addendum h2 a,
.post_container .addendum a h2,
.post_container .addendum h3 a,
.post_container .addendum a h3,
.post_container .addendum p a,
.post_container .addendum a p,
.post_container .addendum strong a,
.post_container .addendum a strong,
.post_container .addendum em a,
.post_container .addendum a em,
.post_container .addendum a,
.post_container .addendum
 a span,
.post_container .addendum span a,
.post_container .addendum ul li a,
{
	color:#545861;
}