body{
color:#555;
font:12px/16px sans-serif;
margin:0;
padding:0}

#main{
	margin:0 auto 150px !important;
	width:90%;}

#header{
	height:130px;
	margin:20px auto;
	text-align:center;
	width:100%}

#header p{margin:0 !important}


a{color:#319c8f;text-decoration:none;outline:none}
	a:hover{color:#000}
	a img, a.visited img{border:0;text-decoration:none}
	

#content{
	display:block;
	margin:0 auto 0;
	padding:0;
	width:90%;
	-webkit-column-count:3;
	-webkit-column-gap:15px;
	-webkit-column-fill:auto;
	-moz-column-count:3;
	-moz-column-gap:10px;
	-moz-column-fill:auto;
	column-count:3;
	column-gap:15px;
	column-fill:auto;
}


.post{
	margin:0 0 15px 0}


/** Quote **/

.quote{
	background:#efefef;
	margin:0 !important;
	width:100%}
	
.quote .quoteactual, .post .quote span.quoteactual a{
	color:#000;
	font-family:Georgia, Times, serif;
	font-size:16px;
	font-style:italic;
	line-height:23px}

.quote .quoteactual{
	margin:20px 20px 10px}


.quote .source {
	color:#999;
	padding:8px 20px 20px}


/** Link **/

.link{
	margin:0 0 16px 0}

.link a.link{
	color:#333;
	font-size:18px;
	line-height:24px;
	margin:0 0 16px 0;
	padding:0 0 16px 0}

.link a:hover{color:#0076c1}

.link .description{
	margin-top:0}

.post .link .description a{
	color:#0076c1;
	font-size:12px;
	margin:0}

.post .video .caption {margin-top:5px}   

.clear{clear:both}


/** Answer **/

.answerpost{
	background:#f2f2f2;
	margin:0;
	padding:20px
}

.askerbox{
	display:inline;
	float:left;
	width:200px}

.askerbox p.asker{
	color:#999;
	font-family:Georgia, Times, serif;

		font-size:14px;
	font-style:italic;
	line-height:18px;
	display:block;
	margin:0 0 16px 0}

.askerimg{
	display:inline;
	float:left;
	margin:0 0 0 20px}
	
	.askerimg img{
		border:2px solid #bababa;
		max-width:36px}
	
.question{
	font-family:Georgia, Times, serif;
	font-size:14px;
	font-style:italic;
	line-height:18px;
	margin:0 0 16px 0}
	
.answer{
	border-top:1px dotted #cacaca;
	margin:16px 0 0 0;
	padding:16px 0 0 0;
	color:#000;
		font-family:Georgia, Times, serif;
	font-size:14px;
	font-style:italic;
	line-height:18px;}	

/** Data **/

.data{
	border-bottom:1px solid #fff;
	color:#fff;
	font-size:12px;
	line-height:18px;
	padding-bottom:2px;
	margin:0 0 18px 0}

	.data p{
		margin:0 0 0 0;
		padding:0 0 0 0}
	.data a{color:#fff}
	.data a:hover{color:#0076c1}
	
	.data ol li{
		padding:0 0 16px 0}

	.data ol li a{color:#0076c1}
	
	.data ol li blockquote{
		background:#f6f6f6;
		margin:12px 0 0 32px;
		padding:8px 8px}
	
	.data ol li blockquote a{color:#555}

.post p.posttitle{font-size:14px; font-weight:700; margin:0; padding:0}

.post blockquote{
	margin:16px 0 16px 0; background:#eee; padding:16px 15px 5px; color: #000}




.quote{
	display: inline-block;
	margin: 0 2px 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;}



/** Photo **/

.photo{
	line-height:0}



/** Nav **/


nav{}
	
	nav a{
		background:#f4f4f4;
	 	color:#777;
	 	font-weight:normal;
	 	float:left;
	 	line-height:22px;
	 	height:28px;
	 	padding:8px 20px 8px;
	 	font-size:42px;
	 	font-family:"Lucida Sans", sans-serif;
	 	display:block;
	 	width:105px;
	 	-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-transition:background 0.3s ease;
		-moz-transition: background 0.3s ease;
		-o-transition: background 0.3s ease;
  		transition: background 0.3s ease;
		text-align:left;}

	nav a.next{
		float:right;
		text-align:right}
		
	nav a.askme{
		margin:0 auto 0;
		text-align:center;
		float:none;
		font-size:16px;
	 	padding:11px 20px 5px;		
	}


	nav a:hover{
		color:#888;
		background:#333}

img{width:100% !important; min-width:100%}

.photobox{display:block}


#header img{width:auto !important; min-width:0}





/* --- media queries ------------------------------------------------------------------------------------------------ */

@media screen and (max-width: 1600px)
{
}

@media screen and (max-width: 1400px)
{

	#main{
		width:80%;
	}


	#content{
		width:100%;
		-webkit-column-count: 3;
		-webkit-column-gap: 20px;
		-webkit-column-fill: auto;
		-moz-column-count: 3;
		-moz-column-gap: 20px;
		-moz-column-fill: auto;
		column-count: 3;
		column-gap: 20px;
		column-fill: auto;
	}	

	.post{
		margin-bottom:20px}
	
}


@media screen and (max-width: 1200px)
{
}

@media screen and (max-width: 1024px)
{
}

@media screen and (max-width: 1000px)
{


	#main{
		width:900px}
		
	#header{
		width:900px}

	#content{
		width:840px !important;
		-webkit-column-count: 2;
		-webkit-column-gap: 15px;
		-webkit-column-fill: auto;
		-moz-column-count: 2;
		-moz-column-gap: 15px;
		-moz-column-fill: auto;
		column-count: 2;
		column-gap: 15px;
		column-fill: auto;
	}
	
	.post img{min-width:408px}
	
	

}

@media screen and (max-width: 800px)
{
}

@media screen and (max-width: 768px)
{

	#main{
		width:700px}
		
	#header{
		width:700px}

	#content{
		width:620px !important;
		-webkit-column-count: 2;
		-webkit-column-gap: 10px;
		-webkit-column-fill: auto;
		-moz-column-count: 2;
		-moz-column-gap: 10px;
		-moz-column-fill: auto;
		column-count: 2;
		column-gap: 10px;
		column-fill: auto;
	}
	
	.post img{min-width:303px}
	

}

@media screen and (max-width: 640px)
{
    /* to avoid the adjustment of fonts on iOS devices you should keep this line */
    * { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
}

@media screen and (max-width: 600px)
{
}

@media screen and (max-width: 480px)
{
}

@media screen and (max-width: 400px)
{

	#main{
		width:95%}
		
	#header{
		width:100%}

	#content{
		width:95% !important;
		-webkit-column-count: 1;
		-webkit-column-gap: 10px;
		-webkit-column-fill: auto;
		-moz-column-count: 1;
		-moz-column-gap: 10px;
		-moz-column-fill: auto;
		column-count: 1;
		column-gap: 10px;
		column-fill: auto;
	}
	
	.post img{min-width:95%}
	
	
	nav{
		width:95% !important;
		margin: 30px auto 0;
		}
		
	nav a{
		width:60px !important;}

}

@media screen and (max-width: 320px)
{
}


/* --- iPad --------------------------------------------------------------------------------------------------------- */

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait)
{
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape)
{
}


/* --- iPhone 4(S) retina ------------------------------------------------------------------------------------------- */

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5)
{
	#main{}

}


/* --- print (optional) --------------------------------------------------------------------------------------------- */

@media print
{
}