/*
Name: RIBBON SECTION
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: "" "";}


/*-------------------------------------------------------------------------------------------*/
/*- SETUP STD CLASSES -----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
body{margin: 0px; padding: 0px; background: #f7f7f7;
	font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #595959;}

h1, h2, h3, h4, h5, h6{margin: 0px 0px 5px; padding: 0px 0px 5px; color: #fff; font-weight: lighter;}

h1{font-size: 35px; line-height: 37px;}
h2{font-size: 30px; line-height: 32px;}
h3{font-size: 20px; line-height: 18px;}
h4{font-size: 13px; line-height: 16px;}
h5{font-size: 12px; line-height: 15px;}
h6{font-size: 10px; line-height: 13px;}

p{line-height: 22px; margin-bottom: 12px;}
blockquote, blockquote p{}

form{}
label{}
textarea, input{font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #555;}
input[type=radio]{}
input[type=checkbox]{}
input[type=image]{}
input[type=button]{}


/*-------------------------------------------------------------------------------------------*/
/*- GLOBAL CLASSES --------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*--- Links ---*/
a{color: #283748; text-decoration: none;}
a:hover{color: #000;}
a:active{text-decoration: #333;}

	
/*--- 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 --------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

#header-container{position: relative; z-index: 1; padding: 40px 0px 10px; background: #f0f0f0 url(images/layout/bg.gif) repeat; border-bottom: 3px solid #777;}
	#header{width: 936px; margin: 0px 0px 0px 20px;}
#container{clear: both; width: 956px; margin: 0px 0px 0px 0px; position: relative; z-index: 1;}
	#left-column{float: left; width: 724px; padding: 30px 0px 30px 0px; background: url(images/layout/bg2.gif) repeat; position: relative; z-index: 1;
					border-right: 1px solid #ccc; }
	#right-column{float: right; width: 191px; padding: 30px 20px; margin: 0px 0px 0px -1px; background: #f7f7f7 url(images/layout/right-column-bg.png) left repeat-y; position: relative; z-index: 3;
				border-left: 1px solid #ccc;}

#footer-container{position: relative; z-index: 1; padding: 20px 0px 4px; background: #f0f0f0 url(images/layout/bg.gif) repeat; border-top: 3px solid #777; border-bottom: 3px solid #000;}
	#footer{width: 936px; margin: 0px 0px 0px 20px; padding: 8px 0px;}
	
/*-------------------------------------------------------------------------------------------*/
/*- HEADER ----------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

	/*--------------------------*/
	/*- HEADER ROW -------------*/
	.logo{float: left; padding: 29px 0px 10px; margin: 0px 20px 0px 0px; text-align: center;}
		.logo a{color: #fff;}

	/*--------------------------*/
	/*- PAGES ------------------*/
	ul.page-menu{ float: left; position: relative; top: 40px;}
		ul.page-menu li{float: left; margin-left: 20px;}
			ul.page-menu li a{color: #f33; font-size: 20px;}
				ul.page-menu li a:hover{color: #fff; font-size: 20px;}


/*-------------------------------------------------------------------------------------------*/
/*- LEFT COLUMN -----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.post-container{clear: both; padding-top: 40px; margin-bottom: 30px; background: url(images/layout/content-border-bg.png) top repeat-x;}
	#left-column li.post-container:first-child{background-image: none; padding-top: 0px;}
	#left-column li.post-container:last-child{background-image: none;}


	/*----------------------------*/
	/*- DATE ICON META CONTAINER -*/
	.date-container{ position: relative; float: left; width: 170px; min-height: 48px; background:url(images/layout/ribbon.png) right top no-repeat;}
		.long-bar{display: block; width: 9999px; height: 34px; position: absolute; right: 100%; top: 0px; background: #f0f0f0;}
		
		/*-------------------------*/
		/*- ICONS -----------------*/
		.icon-note, .icon-quote, .icon-chat, .icon-video, .icon-image, .icon-sound, .icon-link
			{display: block; float: right; padding: 0px; margin: 0px 20px 0px 0px; width: 98px; height: 34px; background: url(images/layout/icons.png) no-repeat; overflow: hidden; text-indent: -9999px;}
				.icon-image	{background-position: -0px -0px;}
				.icon-note	{background-position: -0px -58px;}
				.icon-chat	{background-position: -0px -115px;}
				.icon-video	{background-position: -0px -173px;}
				.icon-link	{background-position: -0px -231px;}
				.icon-quote	{background-position: -0px -288px;}
				.icon-sound	{background-position: -0px -346px;}
				
				
		/*-------------------------*/
		/*- POST META -------------*/
		.post-meta{width: 170px; margin: 50px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #b7b7b7; text-transform: uppercase;}
		.post-meta li{padding: 8px 25px 8px 0px; background: url(images/layout/sprite.png) no-repeat; text-align: right;}
			.post-meta li.date{background-position: 152px 7px;}
			.post-meta li.note-count{background-position: 152px -45px;}
			.post-meta li.short-url{background-position: 152px -362px;}
			.post-meta li.posted-by{background-position: 152px -487px;}
			.post-meta li.comment-count{background-position: 152px -538px;}
		.post-meta li a{color: #b7b7b7;}
			.post-meta li a:hover{color: #333;}


	/*----------------------------*/
	/*- POST CONTAINER -----------*/
	.post{float: right; width: 500px; min-height: 70px; padding: 0px 30px 0px 0px;}
	
		.video-item, .post img{display: block; margin-bottom: 20px; position: relative; border-bottom: 3px solid #f33;}
	
		/*-------------------------*/
		/*- POST TAGS -------------*/
		.tags{padding: 8px 0px 8px 16px; margin-top: 20px; background: url(images/layout/sprite.png) 0px -94px no-repeat;}
			.tags a{margin-right: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #b7b7b7; text-transform: uppercase;}
			.tags a:hover{color: #283748;}
		
		/* ------------------------*/
		/*- SOUND -----------------*/
		.audio-panel{}
		.audio-panel .art {float: left; width: 140px; height: 131px;}
			.audio-panel .art img {width: 140px; height: 140px; margin-right: 5px;}
		.audio-panel .audio-meta {margin: 0px 10px 10px 5px;}
			.audio-panel .play-count {height: 51px; padding-top: 1px; margin-bottom: 10px; position: relative; background: url(images/layout/sprite.png) 0px -170px no-repeat; overflow: hidden;}
			.audio-panel .player {position: absolute; width: 28px; height: 28px; top: 11px; left: 11px; overflow: hidden;}
				.audio-panel .play-count p {margin: 1px 0 0 65px; font-size: 29px; color: #273747;}
			.audio-panel .track, .audio-panel .artist { width: 300px; overflow: hidden;}
			.audio-panel .cd-icon, .audio-panel .mic-icon {float: left; height: 29px; padding: 4px 0px 0px 52px; margin: 5px 20px 0 12px; background: url(images/layout/sprite.png) 0px -242px no-repeat;}
				.audio-panel .cd-icon p, .audio-panel .mic-icon p{margin-top: 4px; color: #595959; font-size: 20px;}
				.audio-panel .mic-icon {background-position: 0px -293px;}
			.audio-panel .song-name{clear: both; display: none;}
		
		
		/*-------------------------*/
		/*- QUOTE -----------------*/
		blockquote{padding: 0px; margin: -7px 0px 10px; font-size: 25px; font-style: italic; line-height: 35px; color: #595959; font-family: Georgia, "Times New Roman", Times, serif;}
		p.quote-source{}
		
	
		/*-------------------------*/
		/*- CHAT ------------------*/
		ul.chat-item{line-height: 22px; margin: 0px !important;}
			ul.chat-item li{clear: both; border-bottom: 1px dotted #ccc; margin-bottom: 10px;}
				ul.chat-item li strong{font-size: 15px; margin-right: 10px; text-shadow: 0px 1px 0pt rgba(255, 255, 255, 0.99);}
				ul.chat-item li span{font-size: 13px; color: #595959;}
			ul.chat-item li:first-child{border-top: none; margin-top: 10px;}
			ul.chat-item li:last-child{border-bottom: none;}
			
			
		/*-------------------------*/
		/*- LINK ------------------*/
		.post-link{width: 570px; padding: 20px; margin-left: -20px; background: #E3E4E1; border: 1px solid #CED2D1;
						-moz-border-radius: 3px; -webkit-border-radius: 3px;}
			.post-link .date-container{ height: 50px; margin-bottom: 0px;}
			.post-link .post{width: 380px; padding: 0px; margin: 0px; height: auto;}
				.post-link .post h3{padding: 15px 0px 0px; margin: 0px;}
	
	
	/*-------------------------*/
	/*- NEXT PREVIOUS BUTTONS -*/
	.next-prev{margin-bottom: 30px;}
	.next-prev div{width: 171px; height: 48px; margin: 0px auto; background: url(images/layout/sprite.png) 0px -406px no-repeat;}
		.next-prev a{display: block; text-align: center; color: #fff; text-transform: uppercase; font-size: 10px; font-weight: bold; cursor: pointer;
					text-shadow: 0px 1px 0pt rgba(0, 0, 0, 0.40);}
			a.prev-page{float: left; width: 65px; padding: 12px 0px 12px 20px;}
			a.next-page{float: right; width: 65px; padding: 12px 20px 12px 0px;}
			.next-prev a:hover{color: #790000; text-shadow: 0px 1px 0pt rgba(255, 255, 255, 0.20);}
			
			
	/*-------------------------*/
	/*- FLICKR ----------------*/	
	.flickr{padding: 30px 0px 0px 6px; margin: 0px 0px 0px 0px; background: url(images/layout/content-border-bg.png) top repeat-x;}
	#flickr_badge_wrapper{height: 122px; overflow: hidden; margin: 0px; padding: 0px;}
		#flickr_badge_wrapper .flickr_badge_image{float: left; margin: 0px 10px; width: 110px; height: 110px; background: #f0f0f0; border: 1px solid #ccc; padding: 5px;}
		#flickr_badge_wrapper .flickr_badge_image a{display: block; width: 110px; height: 110px; overflow: hidden; text-align: center;}
		#flickr_badge_wrapper .flickr_badge_image:hover{background: #F66; border: 1px solid #f00;}
				#flickr_badge_wrapper .flickr_badge_image a img{min-width: 110px; text-align: center;}
			
			
/*-------------------------------------------------------------------------------------------*/
/*- POSTS CLASSES ---------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*- RESET SOME CLASSES FOR THE COPY AFTER CLEARING EVERYTHING AT THE TOP OF THE CSS  -*/
.post p{clear: none;}
.post ol, .post ul{list-style: disc; margin: 0px 0px 10px 30px;}
	.post ol li, .post ul li{line-height: 22px; padding-bottom: 10px;}
.post ol{list-style: decimal;}
.post code, .copy pre{}
.post img{}
.post h2{}
.post h3{}


/*-------------------------------------------------------------------------------------------*/
/*- NOTES CLASSES ---------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
ol.notes{clear: both; list-style: none !important; margin: 10px 0px 0px !important; padding: 0px  !important; background: #f9f9f9; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;}
	ol.notes li{padding: 8px 10px !important; margin: 0px !important; font-size: 11px; border-bottom: 1px dotted #ccc;}
		ol.notes li a{clear: both;}
			ol.notes li a:hover{color: #777;}
		ol.notes li span.action{color: #777;}
		ol.notes li.reblog{background: url(images/layout/notes-icon-sprite.png) 480px -774px no-repeat;}
		ol.notes li.like{background: url(images/layout/notes-icon-sprite.png) 480px 16px no-repeat;}
		ol.notes li img.avatar{display: none !important;}
		ol.notes li blockquote{clear: both; display: block; padding-left: 10px; margin: 10px 0px 10px -10px; border-left: 1px dotted #f33; font-size: 11px; line-height: 22px;
		font-family: Georgia, "Times New Roman", Times, serif;}
		ol.notes li blockquote a{}
			ol.notes li blockquote a:hover{color: #777;}

ol.notes li:last-child{border-bottom: none;}


/*-------------------------------------------------------------------------------------------*/
/*- RIGHT COLUMN ----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.content-area{margin-bottom: 30px;}
	
	#right-column a:hover{color: #f33;}
	
	#right-column h4{clear: both; padding: 0px 0px 0px; margin: 0px 0px 10px 0px; position: relative; font-size: 15px; color: #333; font-weight: bold; text-transform: none;
					text-shadow: 0px 1px 0pt rgba(255, 255, 255, 0.90);}
		#right-column h4 a{color: #333;}
			#right-column h4 a:hover{color: #f33;}
					
	#right-column p{font-size: 11px; margin-bottom: 0px; line-height: 18px;}
	.site-author{float: left; width: 35px; padding: 5px; margin: 0px 10px 5px 0px; background: #fff;
				 border: 1px solid #ccc;
				-moz-border-radius: 3px; -webkit-border-radius: 3px;}
			
	/*--------------------------------------------*/
	/*- SEARCH -----------------------------------*/
	.search-content{padding: 0px;}
		.search-bar{background: #fff; border: 1px solid #ccc; padding: 6px 6px; height: 22px;
			-moz-border-radius: 3px; -webkit-border-radius: 3px;}
		.search-form input.search{float: left; width: 115px; margin: 1px 0px 0px; padding: 2px 0px; background: none; border: none; line-height: normal;}
		.search-form input.search_button{float: right; display: block; margin: 0px; padding: 4px 3px; background: none; border: none; color: #fff; text-transform: uppercase; font-size: 10px; line-height: normal;
										background: #3D546C; text-align: center;
										text-shadow: 0px 1px 0pt rgba(0, 0, 0, 0.50);
										-moz-border-radius: 3px; -webkit-border-radius: 3px;}


	/*--------------------------------------------*/
	/*- TWITTER -----------------------------------*/
	#tweets a{display: block; padding: 10px 0px 10px 0px; white-space: normal; background: url(images/layout/twitter-icon.png) 0px 15px no-repeat; border-bottom: 1px dotted #ccc; font-size: 11px; font-weight: lighter; line-height: 20px;}
	#tweets a:first-child{padding-top: 0px;}
	#tweets a:last-child{border-bottom: none;}


	/*-------------------------------------*/
	/*- FOLLOWERS -------------------------*/	
	ul.followers{margin-top: 5px; padding: 10px;}
		ul.followers li{float: left; margin: 0px 10px 10px 0px !important; padding: 0px  !important; border: none !important; list-style: none !important;}


	/*-------------------------*/
	/*- LIKES -----------------*/
	#likes{ font-size: 11px; line-height: 22px;}
		#likes li{padding: 10px 0px; margin: 0px; border-bottom: 1px dotted #ccc;}
			#likes img {max-width: 190px; height: auto !important; margin-bottom: 10px;}
			#likes li p{margin-bottom: 0px;}
			#likes li .like_link a{font-weight: bold;}
			#likes li .post_info_bottom{display: block !important; margin-top: 8px; text-transform: uppercase; font-size: 9px;}
			#likes li:first-child{padding-top: 0px;}
			#likes li:last-child{border: none; padding-bottom: 0px;}


	/*--------------------------------------------*/
	/*- ADVERTISEMENT ----------------------------*/
	.advertisement{width: 220px; padding: 10px 10px; margin: 0px 0px 40px 0px; background: #E3E4E1; border: 1px solid #CED2D1;
					-moz-border-radius: 3px; -webkit-border-radius: 3px;}
		.advertisement a.detail{display: block; width: 160px; margin: 0px auto 5px; text-transform: uppercase; font-weight: bold; font-size: 10px;}
		.advertisement a.the-advert{display: block; width: 200px; margin: auto; text-align: center;}
			.advertisement a.the-advert img{display: block; margin: 0px auto 10px;}
		.advertisement a.the-advert span.advert-name{display: block; font-weight: bold; font-size: 12px; margin-bottom: 5px;}
		.advertisement a.the-advert span.advert-description{color: #525252; font-size: 12px; font-weight: lighter;}
		

	/*--------------------------------------------*/
	/*- SOCIAL BOOKMARKS -------------------------*/
	ul.social-bookmarks{margin-top: 5px;}
		ul.social-bookmarks li{float: left; margin: 0px 10px 10px 0px !important; padding: 0px  !important; border: none !important; list-style: none !important;}
			ul.social-bookmarks li a{display: block; width: 16px; height: 16px; background: url(images/layout/social-icons/social-set.png)  no-repeat; text-indent: -9999px; overflow: hidden;}
				
				ul.social-bookmarks li a.rss 		{background-position: -0px -26px;}
				ul.social-bookmarks li a.cargo 		{background-position: -24px -26px;}
				ul.social-bookmarks li a.behance 	{background-position: -48px -26px;}
				ul.social-bookmarks li a.twitter 	{background-position: -72px -26px;}
				ul.social-bookmarks li a.facebook 	{background-position: -96px -26px;}
				ul.social-bookmarks li a.redux 		{background-position: -120px -26px;}
				ul.social-bookmarks li a.delicious	{background-position: -144px -26px;}
				ul.social-bookmarks li a.magnolia 	{background-position: -168px -26px;}
				ul.social-bookmarks li a.tumblr 	{background-position: -192px -26px;}
				ul.social-bookmarks li a.posterous	{background-position: -216px -26px;}
				ul.social-bookmarks li a.flickr 	{background-position: -240px -26px;}
				ul.social-bookmarks li a.yahoo 		{background-position: -264px -26px;}
				ul.social-bookmarks li a.stumble 	{background-position: -288px -26px;}
				ul.social-bookmarks li a.reddit 	{background-position: -312px -26px;}
				ul.social-bookmarks li a.linkedin 	{background-position: -336px -26px;}
				ul.social-bookmarks li a.friendfeed {background-position: -360px -26px;}
				ul.social-bookmarks li a.lastfm 	{background-position: -384px -26px;}
				ul.social-bookmarks li a.wave 		{background-position: -408px -26px;}
				ul.social-bookmarks li a.evernote 	{background-position: -432px -26px;}
				ul.social-bookmarks li a.backtype 	{background-position: -456px -26px;}
				ul.social-bookmarks li a.dropular 	{background-position: -480px -26px;}
				ul.social-bookmarks li a.ffffound 	{background-position: -504px -26px;}
				
				/*-------------------------*/
				/*- HOVER -----------------*/
				ul.social-bookmarks li a.rss:hover 			{background-position: -0px -0px;}
				ul.social-bookmarks li a.cargo:hover 		{background-position: -24px -0px;}
				ul.social-bookmarks li a.behance:hover 		{background-position: -48px -0px;}
				ul.social-bookmarks li a.twitter:hover 		{background-position: -72px -0px;}
				ul.social-bookmarks li a.facebook:hover 	{background-position: -96px -0px;}
				ul.social-bookmarks li a.redux:hover		{background-position: -120px -0px;}
				ul.social-bookmarks li a.delicious:hover 	{background-position: -144px -0px;}
				ul.social-bookmarks li a.magnolia:hover 	{background-position: -168px -0px;}
				ul.social-bookmarks li a.tumblr:hover 		{background-position: -192px -0px;}
				ul.social-bookmarks li a.posterous:hover 	{background-position: -216px -0px;}
				ul.social-bookmarks li a.flickr:hover 		{background-position: -240px -0px;}
				ul.social-bookmarks li a.yahoo:hover 		{background-position: -264px -0px;}
				ul.social-bookmarks li a.stumble:hover 		{background-position: -288px -0px;}
				ul.social-bookmarks li a.reddit:hover 		{background-position: -312px -0px;}
				ul.social-bookmarks li a.linkedin:hover 	{background-position: -336px -0px;}
				ul.social-bookmarks li a.friendfeed:hover 	{background-position: -360px -0px;}
				ul.social-bookmarks li a.lastfm:hover 		{background-position: -384px -0px;}
				ul.social-bookmarks li a.wave:hover 		{background-position: -408px -0px;}
				ul.social-bookmarks li a.evernote:hover 	{background-position: -432px -0px;}
				ul.social-bookmarks li a.backtype:hover 	{background-position: -456px -0px;}
				ul.social-bookmarks li a.dropular:hover 	{background-position: -480px -0px;}
				ul.social-bookmarks li a.ffffound:hover 	{background-position: -504px -0px;}


/*-------------------------------------------------------------------------------------------*/
/*- RIGHT COLUMN ----------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
#footer p{color: #777; text-transform: uppercase; font-size: 10px; text-shadow: 0px 1px 0pt rgba(0, 0, 0, 0.60);}
	#footer p a{color: #ccc;}
		#footer p a:hover{color: #fff;}
		

/*-----------------------------------------------------------------------------------------------------------------------------------*/
/*- 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;}