/*
Not much to see here. Just a modified theme
from Obox Design http://www.obox-design.com/
*/


/*-------------------------------------------------------------------------------------------*/
/*- RESET - http://html5doctor.com/html-5-reset-stylesheet/ ---------------------------------*/
/*-------------------------------------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	line-height:1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000; 
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
	display:block;
	height:1px;
	border:0;	
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

input, select {
	vertical-align:middle;
}


/*-------------------------------------------------------------------------------------------*/
/*- SETUP STD CLASSES -----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
body{margin: auto; width: 960px; background: #FFF url(images/background.jpg) no-repeat; color: #555; font-size: 13px; font-family: Georgia, "Times New Roman", Times, serif; line-height: 18px;}

h1, h2, h3, h4, h5, h6{color: #222; font-weight: normal;}
h1{margin: 0 0 20px; font-size: 24px; line-height: 30px;}
h2{padding: 10px 0; font-size: 16px; line-height: 20px;}
h3{margin: 0 0 10px; font-size: 14pt; line-height: 20px;}
h4, h5, h6{margin: 10px 0 5px 0;}

p{margin: 0 0 1em;}
blockquote, blockquote p{font-size: 13px; line-height: 30px; margin: 0 0 15px; color: #283237; font-weight: bold; font-style: italic;}

ul { margin-left:30px; }
ol { margin-left:30px; list-style-type: decimal; }

textarea, input{font-size: 12pt;}
input[type=button]{padding: 8px;}


/*-------------------------------------------------------------------------------------------*/
/*- GLOBAL CLASSES --------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*--- Links ---*/
a.std_link, a{color: #b43;}
a.std_link:hover, a:hover{color: #932;}
	
/*--- 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: 0 20px 10px 0;}
.alignright{float: right; margin: 0 0 10px 20px;}
.aligncenter{text-align: center;}

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

/*-------------------------------------------------------------------------------------------*/
/*- GENERAL LAYOUT --------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.logo{padding: 0; margin: 0 0 30px 0; text-align: center;}
.no-logo{padding: 0; margin: 0; text-align: center;}

#info{float: left; padding: 0 0 0 10px; width: 220px;}
#content{padding-top: 100px; float: right; width: 620px;}
footer{clear: both; padding: 10px 0; width: 620px; border-top: 1px dotted #ccc; float: right;}


/*-------------------------------------------------------------------------------------------*/
/*- SITE INFO -------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.intro-text{margin: 1em 0; color: #777; font-size: 12px;}

nav ul { margin: 0; }
nav li{float: left; font-size: 12px;}
nav li:before{content: "\00A0| ";}
nav li:first-child:before{content: "";}


/*-------------------------------------------------------------------------------------------*/
/*- CONTENT ---------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.date {color: #A43;}
.post{padding: 0 0 40px; position: relative;}

	/*-------------------------*/
	/*- ICONS -----------------*/
	.icon-container{width: 20px; height: 20px; padding: 10px; left: -60px; position: absolute; background: rgba(0,0,0,.05); -moz-border-radius: 2px; -webkit-border-radius: 2px;}
	.icon-container a{display: block; margin: 0; padding: 0; width: 20px; height: 20px; background-image: url(images/layout/icons.png); overflow: hidden; text-indent: -9999px;}
		.icon-note	{background-position: -0px -0px;}
		.icon-link	{background-position: -0px -80px;}
		.icon-chat	{background-position: -0px -160px;}
		.icon-video	{background-position: -0px -239px;}
		.icon-sound	{background-position: -0px -316px;}
		.icon-image	{background-position: -0px -394px;}
		.icon-quote	{background-position: -0px -468px;}

	/*-------------------------*/
	/*- POSTS -----------------*/
	.post-content{margin-right: 120px;}
		.post .post-title{margin-bottom: 20px; padding: 7px 0; border-bottom: 1px dotted #ccc;}
			.post .post-title a{color: #000; text-decoration: none;}
				.post .post-title a:hover{color: #A43;}
		
		/*-------------------------*/
		/*- QUOTES ----------------*/
		.quote blockquote{margin-top: 8px; font-weight: normal; color: #888; font-size: 20px; line-height: 28px;}
		.quote .dash {margin-right: .5em; float: left;}
		
		/*-------------------------*/
		/*- PHOTO -----------------*/
		.image .photo{margin-bottom: 15px;}
		
		/*-------------------------*/
		/*- VIDEO -----------------*/
		.video .video-clip{margin-bottom: 15px;}
		
		/*-------------------------*/
		/*- POST ------------------*/
		.note .post-content {margin-right: 0;}
		.note .post-content h2 {font-size: 20px; line-height: 24px;}
		.note .post-content p {font-size: 16px; line-height: 20px;}
		.note .post-content li {margin: 5px 0; font-size: 16px; line-height: 20px;}
		
		/*-------------------------*/
		/*- CHAT ------------------*/
		.chat ul.chat-item{margin-left: 0; color: #283237; line-height: 22px;}
			.chat ul.chat-item li{padding: 15px 0; border-bottom: 1px dotted #fff; overflow: auto;}
			
				.chat ul.chat-item li strong{float: left; display: inline-block; width: 120px; margin-right: 15px; color: #000; font-size: 10px; text-transform: uppercase; font-weight: normal;}
				.chat ul.chat-item li span{float: right; display: inline-block; width: 360px;}
				
				.chat ul.chat-item li.odd strong{color: #777;}
				.chat ul.chat-item li.odd span{color: #777;}

			.chat ul.chat-item li:last-child{padding-bottom: 0; border-bottom: none;}

		/*-------------------------*/
		/*- AUDIO -----------------*/
		.audio-container{padding: 20px; margin: 0 0 15px 0;}


	/*-------------------------*/
	/*- NEXT PREVIOUS BUTTONS -*/
	.next-prev{overflow: hidden;}
	.next-prev a{border-top: 1px dotted #ccc; padding: 10px 0; text-transform: uppercase; color: #ff3333; font-weight: normal;}
		a.next-page{padding-left: 1px; float: right;}
		a.prev-page{padding-right: 1px; float: left;}
			a.next-page:hover,
			a.prev-page:hover{color: #000;}


/*-------------------------------------------------------------------------------------------*/
/*- NOTES CLASSES ---------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
.notes-container{margin: 20px 50px 30px; padding: 10px; background: #eaeaea; border: 1px solid #ccc;}

	.notes-container h3.notes-title{padding: 0 0 10px; margin: 0; color: #333; font-size: 14px; font-weight: normal;}

	.notes-container ol {background: #fff; border: 1px solid #ccc;}
	.notes-container ol li{clear: both; padding: 10px 10px 8px; border-top: 1px dotted #ccc; line-height: 20px; color: #999; font-size: 11px;}
		.notes-container ol li:first-child{ border: none;}
		.notes-container ol li a{font-style: normal; font-weight: bold;}
			.notes-container ol li a img{float: left; display: inline-block; padding: 4px; margin-right: 10px; background: #fff; border: 1px solid #ccc;}
			.notes-container ol li a.tumblelog, .notes-container ol li a.source_tumblelog{float: none; padding: 0; margin: 0; background: none; border: none; border: none; color: #333;}
			.notes-container ol li a:hover{color: #f33;}


/*-------------------------------------------------------------------------------------------*/
/*- RESPONSIVENESS FOR IOS DEVICES ----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

@media screen and (max-width: 480px) {
	body { width: auto; -webkit-text-size-adjust: none; }
	h2 { padding: 5px 0; }
	#info { margin: 0; padding: 0 0 0 50px; width: auto; float: none; overflow: hidden; }
	#info h1 { margin-bottom: 10px; float: left; }
	#info p { display: none; }
	nav ul { margin-top: 37px; text-align: center; }
	nav li { display: inline; float: none; }
	#content { padding-top: 20px; padding-left: 50px; width: auto; float: none; }
	.date { padding-bottom: .1em; border-bottom: 1px solid #CCC; }
	footer { margin-left: 50px; padding: .5em 1em 2em 0; width: auto; float: none; }
	
	.icon-container { padding: 5px; left: -40px; background: rgba(0, 0, 0, 0.2); }
	.post-content { margin-right: 10px; }
	.post .post-title { padding: 4px 0; }
	.photo img { width: 100%; height: auto; }
	.note img { max-width: 100%; height: auto; }
	.video-clip object { width: 100%; height: auto; }
	.quote blockquote{ padding-top: 5px; font-size: 16px; line-height: 22px;}
}
@media screen and (max-width: 320px) {
	#info { margin: 0 auto; padding: 0 0 10px; float: none; }
	#info h1 { float: none; }
	nav ul { margin-top: 0; }
}