/*
Name: MAD MEN
Design Studio: Obox Design http://www.obox-design.com/
Version: 1.0
Author: Obox Design
Author URI: http://www.obox-design.com/
*/


/*--------------------------------------------------------------------------------------------------------------------------*/
/*- RESET - Courtesy of Eric Meyer's CSS Reset Awesomeness: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ ---*/
/*--------------------------------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, 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; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {outline: 0;}
body {line-height: 1; color: black; background: white;}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}


/*--*********************************************************************************--------*/
/*- IE6 WARNING - BEFORE WE DO ANYTHING!! WE NEED TO TELL EVERYONE TO GET RID OF IE 6 -------*/
/*-------------------------------------------------------------------------------------------*/
.no_ie{clear:both; border-bottom: 2px solid #a60000; background: #ffcece; color: #000; font-weight: bold; padding: 10px; text-align:center; }
	.no_ie h1{font-size: 22px; color: #a60000;}
	.no_ie p{margin: 0px; padding: 0px;}
	.no_ie a{color: #a60000; text-decoration: underline;}
	.no_ie a:hover{color: #000;}


/*-------------------------------------------------------------------------------------------*/
/*- SETUP STD CLASSES -----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
html{height: 100%; min-width: 881px;}
body{height: 100%; min-width: 881px; background: #101010 url(images/layout/body-bg.png) top repeat-y; color: #555; font-size: 12px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}

h1{font-size: 25px; margin: 0px 0px 20px; font-weight: lighter; line-height: 30px;}
	h1.h1-sub-title{padding: 20px;}
h2{font-size: 20px; margin: 0px 0px 10px; font-weight: lighter; line-height: 24px;}
h3{font-size: 17pt; margin: 0px 0px 10px; line-height: 24px;}
h4{margin: 0px; padding: 8px 0px 10px 0px; font-weight: lighter;}
h5{margin: 0px; padding: 8px 0px 10px 0px; font-weight: lighter;}
h6{margin: 0px; padding: 8px 0px 10px 0px; font-weight: lighter;}

h1, h2, h3, h4, h5, h6{color: #000; font-weight: lighter; font-family: Georgia, "Times New Roman", Times, serif;}

p{font-size: 12px; line-height: 22px; margin: 8px 0px; color: #555;}
div.copy { line-height: 22px; }
blockquote, blockquote p{font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-weight: lighter; color: #777; font-size: 18px; line-height: 30px;}

form{}
label{}
textarea, input{font-size: 12pt; font-family: Arial, Helvetica, sans-serif;}
input[type=radio]{}
input[type=checkbox]{}
input[type=image]{}
input[type=button]{padding: 8px;}


/*-------------------------------------------------------------------------------------------*/
/*- GLOBAL CLASSES --------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*--- Links ---*/
a{color: #f33; text-decoration: none; text-shadow: 0px 1px 0pt rgba(255, 255, 255, 0.70); cursor: pointer;}
	a:hover{color: #000;}
	a:active{text-decoration: underline;}
	
/*--- Layouts ---*/
.no_bg{background-image: none;}
.clearboth{clear: both}
.floatleft{float: left;}
.floatright{float: right;}
.floatright{float:right;}
.no_display{display: none;}

.alignleft{float: left; margin: 0px 20px 10px 0px;}
.alignright{float: right; margin: 0px 0px 10px 20px;}
.aligncenter{text-align: center;}

u{text-decoration: underline;}
strong{font-weight: bold;}
em{font-style: italic;}


/*-------------------------------------------------------------------------------------------*/
/*- GENERAL LAYOUT --------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
#container{width: 881px; margin: auto; padding-top: 80px;}
	.posterous_header{position: fixed; left: 0px;}

	#left-column{float: left; width: 279px; height: 100%; padding-top: 00px; position: relative;}
	#right-column{float: right; width: 600px; height: 100%; padding-top: 00px;}

#footer{clear: both; padding: 20px 0px 10px; margin: 0px 0px 0px;}


/*-------------------------------------------------------------------------------------------*/
/*- LEFT COLUMN -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.content{width: 210px; padding: 0px 0px 40px; margin-left: 30px;}
	.header{width: 210px;}
		h1.logo{padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #555; text-align: center; font-size: 20px !important;}
			h1.logo a{color: #fff;}
			h1.logo a:hover{color: #f33;}
		p.intro-text{text-align: center; color: #888; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif;}


	/*---------------------*/
	/*- LINK STYLING ------*/
	#left-column a{text-shadow: none; font-weight: lighter; text-transform: uppercase;}
		#left-column a.subscribe_link, #left-column a.unsubscribe_link{display: block; clear: both; padding: 10px 0px; border-bottom: 1px dotted #333; font-size: 10px; color: #777;}
		#left-column a:hover{color: #f33;}


	/*---------------------*/
	/*- PROFILE -----------*/
	.user-info{width: 190px; margin: 40px auto 0px; padding: 10px; background: #fff; border: 2px solid #ccc; font-size: 11px;}
		.user-info a .profile_border{float: left; display: block; width: 75px; height: 75px; margin: 0px; border: none !important;  overflow: hidden;}
		.user-info ul{float: right; width: 100px; line-height: 20px;}
			.user-info ul li{padding: 1px 0px; border-bottom: 1px dotted #ccc; display: block; color: #777;}
				.user-info ul li:last-child{border: none;}
				.user-info ul li a{display: block; color: #f33; }
				.user-info ul li a:hover{color: #000 !important;}


	/*---------------------*/
	/*- SIDEBAR ITEMS -----*/
	.sidebarunit{width: 210px; margin: 0px auto 20px;}
		.sidebarunit h6{padding: 5px 0px 3px; margin: 0px; color: #fff; text-align: left; border-bottom: 2px solid #555; font-size: 11px; font-style: italic; font-weight: bold; font-family: Georgia, "Times New Roman", Times, serif;}
		.sidebarunit div.social{clear: both; padding: 8px 0px; font-size: 10px; text-transform: uppercase; text-align: left;}
		.sidebarunit div.contributors a{float: left; display: inline; margin: 5px 10px 5px 0px;}
	
	/*---------------------*/
	/*- Subscriptions -------------*/
	.subscriptions{margin-top:20px;}
	.subscriptions .subscribe-site{padding-top:3px;}
	
	/*---------------------*/
	/*- PAGES -------------*/
	.pages{}
		.pages ul, .pages li{list-style: none !important;}
		.pages li{font-size: 10px; border-bottom: none; padding: 3px 0px;}
			.pages li a{display: block; padding: 3px 0px; font-size: 10px; color: #777;}
			.pages li a:hover{color: #f33 !important;}
			
			
	/*---------------------*/
	
	/*- ARCHIVE -------------*/
	.archives{}
  	.archives{font-size: 10px; border-bottom: none; padding: 0px 0px;}
  	.archives a{display: block; padding: 0px 0px; font-size: 10px; color: #777;}
  	.archives a:hover{color: #f33 !important;}
		
		.archives .archive {margin-top:7px;margin-bottom:7px;}
    .archives div.inner {margin-left:10px;line-height:1.6em;}
			
			
	/*---------------------*/
	
	/*- LINKS -------------*/
	.blog-links{}
		.blog-links ul, .blog-links li{list-style: none !important;}
		.blog-links li{font-size: 10px; border-bottom: none; padding: 3px 0px;}
			.blog-links li a{display: block; padding: 3px 0px; font-size: 10px; color: #777;}
			.blog-links li a:hover{color: #f33 !important;}
				
	
	/*---------------------*/
	/*- GEO TAG -----------*/
	.map{clear: both; width: 190px; height: 150px; margin-bottom: 10px;}
	
	
	/*--------------------------------------------*/
	/*- FOOTER -----------------------------------*/
	.footer{clear: both; width: 210px; margin-top: 30px;}
	

		/*-------------------------*/
		/*- SEARCH BAR ------------*/
		.searchunit h3{padding: 5px 0px 3px; margin: 0px 0px 10px; color: #fff; text-align: center; font-size: 11px; font-style: italic; font-weight: bold; font-family: Georgia, "Times New Roman", Times, serif;}
		
		.search-bar{width: 210px; height: 30px; margin: 0px auto 10px; background: #fff;
					-webkit-border-radius: 15px;
					-moz-border-radius: 15px;}
		.search-form input.search{float: left; width: 160px; position: relative; top: 6px; left: 10px; background: none; border: none; font-style: italic; font-size: 10pt;}
		.search-form input.search_button{margin: 8px 10px 0px 0px; font-size: 10pt; font-style: italic; width: 15px; float: right;}
		
		.search-sorter{width: 210px; margin: auto; line-height: 20px;}
			.search-sorter li{padding: 5px; border-bottom: 1px dotted #222; display: block; color: #333; font-size: 10px; width: 190px; color: #ccc;}
				.search-sorter li a{color: #777; text-shadow: none;}
				.search-sorter li a:hover{color: #f33; text-shadow: none;}
				.search-sorter li strong{ text-transform: uppercase;}


		/*-------------------------*/
		/*- VISIT OBOX ------------*/
		.visit-obox{clear: both; display: block; padding-top: 15px; margin: auto; text-align: center;}


/*-------------------------------------------------------------------------------------------*/
/*- RIGHT COLUMN ----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.post{padding: 0px 0px 5px;}


	/*-------------------------*/
	/*- POST CONTAINER --------*/
	.post-content{margin: 5px 0px 0px 48px; width: 500px; position: relative;}
	
		h2.post-title{padding: 0px 0px 15px; margin-bottom: 20px;  border-bottom: 1px dotted #ccc; text-align: left; font-weight: lighter;}
			h2.post-title a{font-weight: lighter; color: #000;}
				h2.post-title a:hover{color: #f33;}

		
	/*-------------------------*/
	/*- EDIT BOX --------------*/
	.editbox{width: 500px; position: absolute; top: -20px;}
	ul.mini_commands{visibility: hidden; position: relative; float: left; padding: 5px 0px; margin: 0px; font-size: 10px; text-align: left; text-transform: uppercase; line-height: 20px; list-style: none;}
		ul.mini_commands li{color: #999; padding: 0px 0px; float: left; margin-right: 20px;}
			ul.mini_commands li a{color: #999;}
				ul.mini_commands li a:hover{color: #000;}
			
	.post-content:hover ul.mini_commands{visibility: visible;}
	
		.post-content h5{border-bottom: 1px dotted #ccc; font-size: 10px; text-align: center; text-transform: uppercase; line-height: 20px;}


	/*-------------------------*/
	/*- DOWNLOAD LINK ---------*/
	.downloadlink{display: inline-block; padding: 5px 10px; margin: 15px auto 0px; background: #f5f5f5; border: 1px solid #e0e0e0; color: #000; font-size: 10px; font-style: italic;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;}
		.downloadlink:hover{border-color: #999; color: #444;}


	/*-------------------------*/
	/*- META DATA -------------*/
	ul.post-meta-data{clear: both; padding: 10px 28px; margin: 30px 22px 0px 22px; border-top: 1px dotted #ccc; border-bottom: 3px solid #ccc; text-transform: none; line-height: 20px; font-size: 10px;}
		ul.post-meta-data li{color: #333; padding: 0px 0px; float: left; margin-right: 15px; text-shadow: 0px 1px 0pt rgba(255, 255, 255, 0.70); list-style: none !important;}
			ul.post-meta-data li a{color: #444;}
				ul.post-meta-data li a:hover{color: #000;}
			ul.post-meta-data li.tags{clear: both; width: 480px;}
				ul.post-meta-data li.tags strong{color: #333; margin-right: 8px;}
				ul.post-meta-data li.tags a{color: #ff3333; margin-right: 8px;}
					ul.post-meta-data li.tags a:hover{color: #000;}
				
		ul.post-meta-data li.admin-button{float: right;}
		
		/*- RETWEET -*/
		ul.post-meta-data li.retweet-button{margin: 0px 15px 0 0 !important; padding: 0px !important;}
		ul.post-meta-data li.fb-like-button{margin: 0px !important; padding: 0px !important;}
		ul.post-meta-data li.retweet-button .posterous_retweet_widget, ul.post-meta-data li.fb-like-button .posterous_retweet_widget{margin: 0px !important;}
			ul.post-meta-data li.retweet-button .posterous_retweet_widget a.posterous_retweet{color: #333; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}
				ul.post-meta-data li.retweet-button .posterous_retweet_widget a.posterous_retweet:hover{color: #333; background-color: #54BFE7;}


	/*---------------------*/
	/*- GEO TAG -----------*/
	.map{clear: both; width: 210px; height: 150px; margin-bottom: 10px;}


	/*-------------------------*/
	/*- NEXT PREVIOUS BUTTONS -*/
	.next-prev{width: 460px; padding: 0px 20px; margin: 20px auto 20px 50px; border: 1px solid #ccc;}
			
		.next-prev a{display: inline-block; width: 49%; padding: 15px 0px; text-transform: uppercase; color: #ff3333; font-family: Georgia, "Times New Roman", Times, serif; font-weight: lighter;}
			a.next-page{float: right; border-left: 1px dotted #ccc; text-align: right;}
			a.prev-page{float: left;}
				a.next-page:hover{color: #000;}
				a.prev-page:hover{color: #000;}


/*-------------------------------------------------------------------------------------------*/
/*- POSTS CLASSES ---------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*- RESET SOME CLASSES FOR THE COPY AFTER CLEARING EVERYTHING AT THE TOP OF THE CSS  -*/
.post .copy p{clear: none;}
.post .copy ol, .post .copy ul{list-style: disc; margin: 0px 0px 10px 30px;}
	.post .copy ol li, .post .copy ul li{line-height: 22px; padding-bottom: 10px;}
.post .copy ol{list-style: decimal;}
.post .copy code, .post .copy pre{}
.post .copy img{}
.post .copy h2{line-height: 35px; margin-top: 20px;}
.post .copy h3{margin-top: 20px;}
.post .copy blockquote{border-left: 3px solid #e0e0e0; margin: 15px 0px; padding: 0px; font-style: italic; font-size: 13px;}


/*-------------------------------------------------------------------------------------------*/
/*- HOME PAGE COMMENTS ----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.posterous_comments{background: #f3f3f3; padding-top: 10px; border: 1px solid #ccc; margin-top: 30px;}
.posterous_comments .commentunit{clear: both; width: !important; padding: 0px 0px 10px; margin: 0px auto 0px !important; background: none !important; border: none; line-height: 20px;}
	.posterous_comments .commentunit .comment_spacer{display: none !important;}
	
	.posterous_comments .comment_hide_button{float: right; display: block; padding-top: 8px;}
		.posterousAddNewComment form .commentunit{padding: 10px !important; margin: 0px !important;}
		.posterousAddNewComment form .comment_label{padding: 0px !important; margin: 0px !important; height: auto;}
		.posterousAddNewComment form input[type=text]{width:  460px !important;}
		.posterousAddNewComment form textarea{width: 460px !important;}
		
/*-------------------------------------------------------------------------------------------*/
/*- POST PAGE COMMENTS ----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.comment_list{width: 500px; padding: 0px 0px 0px; margin: 0px auto 30px;}
	.comment_list:hover ul.mini_commands{visibility: visible;}
	.comment_list h3.comment-title{padding: 10px 0px; margin: 0px 0px 10px; border-bottom: 1px dotted #ccc; color: #000; font-size: 14px; font-weight: lighter; text-align: center;}
		.comment_list h3.comment-title a{color: #000;}
		.comment_list h3.comment-title a:hover{color: #f33;}
	
	.commentunit{clear: both; width: !important; padding: 0px 0px 10px; margin: 0px auto 30px !important; background: #f3f3f3; border: 1px solid #ccc; line-height: 20px;}
		
		.commentunit .comment_label{clear: both; height: 50px; padding: 0px 10px 0px; }
			.commentunit .comment_label .comment_date{float: right; font-size: 10px; color: #555; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif;}
			.commentunit .comment_label .comment_avatar{float: left !important; width: 43px; height: 43px; margin: 0px 10px 0px 0px; border: 1px solid #ccc; overflow: hidden;}
			.commentunit .comment_label .comment_avatar img{border: 4px solid #fff;}


		.commentunit .comment{clear: both; padding: 15px; margin: 0px 10px !important; text-align: left; color: #333; background: #fff; border: 1px solid #ccc; font-size: 12px; line-height: 22px;}
			.commentname{display: block; padding-bottom: 10px; font-size: 12px; text-transform: none;}
			.commentunit .comment p{margin: 0px; margin: 12px 0px 0px; color: #555;}
		
		.commentunit .mini-commands{clear: both; padding: 10px 0px; margin: 30px auto 0px; border-top: 1px dotted #ccc; font-size: 10px; text-align: right; text-transform: uppercase; line-height: 20px;}
			.commentunit .mini-commands li{color: #999; padding: 0px 0px; float: left; margin-right: 20px;}
				.commentunit .mini-commands li a{color: #999;}
					.commentunit .mini-commands li a:hover{color: #000;}

		.commentunit .mini_commands{float: none; clear: both;}
		
		
		/*-------------------------------------------------------------------------------------------*/
		/*- LEAVE A COMMENT -------------------------------------------------------------------------*/
		/*-------------------------------------------------------------------------------------------*/
		.leave-a-comment{clear: both; width: !important; padding: 0px 0px 10px; margin: 0px auto 30px !important; background: none; border: none; line-height: 20px;}
					
			.leave-a-comment h4.comment-title{padding: 10px 0px; margin: 0px 0px 10px; border-bottom: 1px dotted #ccc; color: #000; font-size: 14px; font-weight: lighter; text-align: center;}
			
			/*-------------------------*/
			/*- FORM ITEM CONTAINER ---*/
			.leave-a-comment .commentunit{border: none; color: #ccc; margin: 0px !important; padding: 0px !important; background: none; overflow: inherit;
											-moz-box-shadow: none; -webkit-box-shadow: none;}
			
			/*- NO CLUE WHAT THIS IS FOR, JUST HIDE IT -*/
			.leave-a-comment .comment_spacer{display: none;}
			
			/*------------------------------*/
			/*- LOGGED IN PIC OF COMMENTOR -*/
			.leave-a-comment .comment_profile_description{margin-bottom: 20px; color: #283237; font-weight: bold; font-style: italic;}
				.leave-a-comment .comment_profile_icon{width: 43px; height: 43px; margin: 0px 10px 0px 0px; border: 1px solid #ccc; overflow: hidden;}
						
				.leave-a-comment .comment_profile_icon img{border: 4px solid #fff !important;}
				.leave-a-comment .comment_profile_description a{color: #f33; font-style: normal;}
				.leave-a-comment .comment_profile_description a:hover{color: #000;}
			
			/*-------------------------*/
			/*- TEXT FORM -------------*/
			.leave-a-comment .comment_label{clear: both; width: 460px; height: auto; padding: 0px 0px 0px; margin: 10px 0px 5px 0px; border: none; text-align: left; color: #555; font-size: 12px; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif;}
			.leave-a-comment .comment_value{clear: both; margin: 0px 0px 0px;}
				.comment_value input[type=text]{padding: 8px !important; margin-bottom: 0px !important; background: #fff !important; border: 1px solid #ccc !important; color: #333 !important; font-size: 13px;}
				.comment_value textarea{padding: 8px !important; margin-bottom: 0px !important; background: #fff !important; border: 1px solid #ccc !important; color: #333 !important; font-size: 13px;}

				/*------------------------------*/
				/*- SUBMIT BUTTON AND CHECKBOX -*/
				.comment_value input[type=submit]{padding: 5px; margin: 10px 0px 0px !important; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif;}
						
				.post-to-facebook{display: block; padding: 5px 5px 5px 0px; margin: 10px 0px; color: #ccc; font-size: 12px; font-style: italic;}
				.submit-comment{padding: 2px 5px; clear: both; font-size: 12px;}


/*-----------------------------------------------------------------------------------------------------------------------------------*/
/*- CLEARFIX --- * I prefer not to touch this code, I don't recommend you do so either, it works... so don't fix whats working ;) * -*/
/*-----------------------------------------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear
{background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none;	margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0;}

/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after{clear: both; content: '.'; display: block; visibility: hidden; height: 0;}
.clearfix{display: inline-block;}
* html .clearfix{height: 1%;}
.clearfix{display: block;}


/*-------------------------------------------------------------------------------------------*/
/*- POSTEROUS ITEMS CUSTOMIZED --------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.posterousPrivateBox{position: absolute; top: 10px; left: 10px; z-index: 10; font-size: 10px;}
	.posterousPrivateBox div{clear: both; float: none; margin: 0px !important;}
	.posterousPrivateBox div a{display: block; cursor: pointer; position: relative; z-index: 11; color:#777; text-shadow: none;}
		.posterousPrivateBox div a:hover{color:#fff;}

.p_responses { margin: 20px 0px 10px 48px; width: 500px; }