/*
-------------------------------------------
		"Pamphlet Vol 2"
			v0.3 -beta
 ~ Makes it look like a Newspaper should ~
	
	HTML5 - CSS3 template
	2013 © Jyrki Ihalainen
	
	"I've had for some time this 
	idea about a simple text oriented 
	style, which would look like 
	a simple newspaper	or a pamphlet.
	Here it finally is. Have fun!"
	
	Using css reset 
	by Richard Clark
	
	Multicolumn-js fix for MSIE 
	by Cdric Savarese
	
	And 'Swiss 721 Black' and 'Libertinage' 
	from Open Font Library:
		http://openfontlibrary.org/en/font/swiss-black
		http://openfontlibrary.org/en/font/libertinage

------------------------------------------- */
		/* 
		html5doctor.com Reset Stylesheet
		v1.6.1
		Last Updated: 2010-09-17
		Author: Richard Clark - http://richclarkdesign.com 
		Twitter: @rich_clark
		*/

		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, canvas, details, figcaption, figure, 
		footer, header, hgroup, menu, nav, section, summary,
		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,details,figcaption,figure,
		footer,header,hgroup,menu,nav,section { 
			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;
		}

		/* change colours to suit your needs */
		ins {
			background-color:#ff9;
			color:#000;
			text-decoration:none;
		}

		/* change colours to suit your needs */
		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;
			cursor:help;
		}

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

		/* change border colour to suit your needs */
		hr {
			display:block;
			height:1px;
			border:0;   
			border-top:1px solid #cccccc;
			margin:1em 0;
			padding:0;
		}

		input, select {
			vertical-align:middle;
		}

/* -------------------------------------------------- Reset Ends --*/		


/* ----------------------------------------------- Common styles --*/
body {
	color: 		#444;
	background: #ccc url('raster.png');  
	
}

	p {
		font-family:'Libertinage', serif;
		font-weight:normal;
		font-style: normal; 
		font-size: 	16px;
		color:		#444;
		padding: 	0px 0 8px 0;
		line-height:1.15;
	}

	h1{
		font-size:	30px;
		padding: 	0 0 5px 0;
		font-family: 'Swiss 721', 'Arial Black', sans-serif;
		font-weight: bold;
		font-style: normal; 
	}

	h2{
		font-size:	20px;
		padding: 	0 0 5px 0;
		font-weight:bold;
	}

	h3{
		font-size: 	18px;
		padding: 	0 0 5px 0;
		font-weight:bold;
	}

	h4 h5 h6{
		font-size: 	16px;
		padding: 	0 0 5px 0;
		font-weight:bold;
	}
/* -------------------------------------------------- Structure --*/
	#wrap{
		margin: 	10px auto 10px auto;
		width:		920px;
		padding:	8px;
		background:	#fcfcfc;
		border: 	#444 1px solid ;
	}		

		#header{
			margin: 	0 auto;
			padding: 	10px ;
			width: 		900px;
			height: 	200px;
			text-align:	right;
		}
			#header-h{/* a box to place the header h1 and h2*/
				margin:	100px 20px 0 0 ; 
			}
				#header h1{
					font-size: 	50px;
				}
				
				#header h2{
				}
	
	
		#content{
			width:	900px;
			padding:8px;
		}

			#story{
				float: 	left;
				width:	580px;
				padding:10px;
			}
				
				
		
			#sidebar{
				float: 			right;
				width: 			260px;
				min-height: 	500px;
				border: 		none;
				background: 	url('raster.png'); 
				margin-top:		15px;
				padding:		10px;
			}	
				#sidebar ul {
					padding-left:30px;
				}
			
			#footer{
				clear: 		both;
				margin: 	0 auto;
				width:		900px;
				height: 	50px;
				border: 	#444 1px solid ;
			}
/* ------------------------------------------------ Main navigation --*/
	nav{
			clear: 		both;
			margin: 	0 auto;
			width: 		900px;
			height: 	40px;
			border: 	#111 2px solid ;
			background: #222;
	}	
		
		nav a {
			font-family: 	Arial, Verdana, sans-serif;
			font-weight:	bold;
			text-transform:	uppercase;
			letter-spacing: 1px;
			text-decoration:none; 
			color: 			#fff;
			
		}
		
			nav ul{
				float: 			right;
				list-style-type:none;
			}
			
				nav li{
					display:block;
					margin:	2px;
					height:	26px;
					padding:11px 15px 0 15px;
					float: 	left;
				}
					nav li:hover  {
						display:	block;
						background:	#444;
						padding-top:10px;
						float: 		left;
					}
					nav li:active {
						display:	block;
						background:	#666;
						height:		24px;
						padding-top:12px;
						float: 		left;
					}
				
				nav a:visited{
					text-decoration:none; 		
				}
				
				nav a:hover {
					text-decoration:none; 					
				}
				
				nav a:active {
					text-decoration:none; 	
								
				}
				
				
/* ------------------------------------------------- Define Columns --*/

.article {
	column-count: 3;
	-webkit-column-count: 3; /* Safari & Chrome */
	-moz-column-count: 3; /* Firefox */
	-ms-column-count: 3; /* Internet Explorer */
	-o-column-count: 3; /* Opera */

	column-gap: 20px;
	-webkit-column-gap: 20px; /* Safari & Chrome */
	-moz-column-gap: 20px; /* Firefox */
	-ms-column-gap: 20px; /* Internet Explorer */
	-o-column-gap: 20px; /* Opera */

	column-rule: #444 1px solid;
	-webkit-column-rule: #444 1px solid; /* Safari & Chrome */
	-moz-column-rule: #444 1px solid; /* Firefox */
	-ms-column-rule: #444 1px solid; /* Internet Explorer */
	-o-column-rule: #444 1px solid; /* Opera */

	padding-bottom:10px;
	padding-right: 10px;
	margin-top:10px;
	border-bottom: #444 1px solid;
}

/*---------------------------------------------------- Font Styles--*/

	#story h4 {
		padding: 		0 0 4px 0;
		font-family: 	Arial, Verdana, sans-serif;
		font-size: 		10px;
		font-weight: 	bold;
		text-transform:	uppercase;
		letter-spacing: 1px;
	}

	.article p {
		text-align: 	justify;
		hyphens: 		auto;
		-ms-hyphens: 	auto;
		-moz-hyphens: 	auto;
		-webkit-hyphens:auto;
	}
		p.author{
			font-family: 	sans-serif;
			font-size: 		10px;
			font-weight:	bold;
			text-transform:	uppercase;
			color:			#777;
			padding: 		0 20px 0 0 ;
			text-align:		right;
		}
		
		p.author-title{
			font-family: 	sans-serif;
			font-size: 		10px;
			text-transform:	uppercase;
			color:			#777;
			padding: 		0 20px 0 0 ;
			text-align:		right;
		}
	 p.timedate{
		font-family:sans-serif;
		font-size: 	10px;
		text-align:	right;
	}

/* ---------------------------------------------------- Random --*/ 
 
 hr{
padding:	0;
border-top:	#fff 1px solid;
}