/*
Theme Name: Hokkaido WordPress Theme
Theme URI:  http://wp.paragraphe.org/
Description: A Modernist Blog-a-rama
Version: 1.0
Author: Ignacio
Author URI: http://wp.paragraphe.org/
*/

/*~~~~~~~~~~~~
for a quick styling,
 I resume at the end
 the stratetgic places where
 you can change the colors
 ~~~~~~~~~~~~*/

/* Reset  */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
a img {border:none;}

/*Typography*/

body {
		font-size:85%;
		color:#111;
		background:#fff;
		line-height:1.5em;
		font-family: Georgia, serif;
	}
h1, h2, h3, h4, h5, h6 {
		font-weight:normal;
		color:#111;
		font-family: Georgia, serif;
		}
h1 {
		font-size:3em;
		line-height:1em;
		margin-bottom:0.5em;
		}
h2 {
		font-size:2em;
		margin-bottom:0.75em;
	}
h3 {
		font-size:1.5em;
		line-height:1;
		margin-bottom:1em;
	}
h4 {
		font-size:1.2em;
		line-height:1.25;
		margin-bottom:1.25em;
	}
h5 {
		font-size:1em;
		font-weight:bold;
		margin-bottom:1.5em;
	}
h6 {
		font-size:1em;
		font-weight:bold;
	}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
		margin:0;
		}
p{
		margin:0 0 1.5em;
	}
a:focus, a:hover {
		background:#eee;color:#111
		}
a{
		color:#F3342A;
		text-decoration:none;
	}
tt,code,pre {
		font:1em 'andale mono', 'lucida console', monospace;
		line-height:1.5;
		}
pre{
		padding:4em;
		background:#fcfcfc;
		border:1px solid #ddd;
		width:auto;
		height:auto;
		overflow:scroll;
		margin-bottom:3em;
		color:#999;
	}
em {
		font-style:italic;
	}
strong{
		font-weight:bold;
		}
li ul, li ol {
		margin:0 1.5em;
		}
ul, ol {
		margin:0 1.5em 1.5em 1.5em;
		}
ul {
		list-style-type:disc;
	}
ol {
		list-style-type:decimal;
	}
blockquote{
		margin:2em 0;
		padding:4em;
		font-family:georgia,serif;
		font-style:italic;
		font-size:1.2em;
		color:#111;
		border-top:1px dotted #111;
		border-bottom:1px dotted #111;
		}
	
::-moz-selection {
		background: #fff;
		color: #000;
		} 

::selection {
		background: #fff;
		color: #000;
		}
		
hr {
	background:#999;
	color:#999;
	clear:both;
	float:none;
	width:100%;
	height:1px;
	margin:0 0 1.45em;
	border:none
	}
	
/*Recurrent Classes*/

.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;}
.hide {display:none;}
.last {margin-right:0;padding-right:0;}
.center{text-align:center}
.right{text-align:right}
.italic{font-style:italic}
.padding{padding:3em}
.arial{font-family:arial,sans-serif;line-height:1.25em}
.clear {clear:both;}

/*Structure*/
.grey{
	width:100%;
	height:1em;
	background:#eee
	}
.container{
	width:1000px;
	margin:0 auto;
	margin-bottom:6em
	}
.head{
	width:40%;
	height:8em;
	line-height:8em;
	float:left;
	margin-top:3em
	}
.pages{
	width:60%;
	float:left;
	margin-top:5em;
	text-align:right
	}
.pages ul{
	margin:0;
	padding:0
	}
.pages li{
	display:inline;
	list-style-type:none;
	margin-right:2em;
	padding-right:2em;
	border-right:1px solid #ddd
	}
.pages li:last-child{
	border-right:none
	}
.module{
	width:17%;
	float:left;
	margin-right:3%
	}
.modulelast{
	margin-right:0%
	}
.module img{
	margin-right:1em
	}
.date{clear:both}
.author{clear:both}
.cats{clear:both}

#thefooter{
	width:100%;
	float:left;
	margin-bottom:3em
	}
.footerwidget{
	width:20%;
	float:left;
	padding-top:1em
	}
.footerwidgetlast{
	margin-right:0%
	}
.footerwidget ul{
	margin:0;
	padding:0
	}
.footerwidget li{
	list-style-type:none;
	height:auto
	}
.footerwidget ul li ul li{
	height:auto
	}
.footerwidget a{display:block;border-top:1px solid #ddd;}

.widget{margin-top:1em}

.titlemeta{
	width:37%;
	float:left;
	margin-right:3%
	}
.titlemeta img{
	width:300px;
	height:auto;
	padding:2px;
	border:1px solid #eee;
	float:left;
	margin:20px 0 20px 0;
	clear:both
	}
.article{
	width:60%;
	float:left;
	}
.article img{
	display:none
	}
.articlemeta{
	width:50%;
	float:left
	}
	
/*As all the images are floating at left in Single.php, and the caption is such a "rebel" againts that, I'm just hidding it.
You can delete the display:none and rearrange completely the layout to integrate the images again in the article's body.
But you should change as well some php in single.php. The best is you write me back for a customitzation.*/
div.wp-caption{
	min-width:304px;
	max-width:304px;
	margin-right:20px
	}
div.wp-caption img{
	border:none;
	}
.wp-caption{
	float:left;
	text-align:center;
	font-size:0.9em;
	border:1px solid #ddd;
	background:#F0F0F0;
	display:none /*<------the Crime*/
	}
.wp-caption p{}


.commenttemplate{width:550px}.commenttemplate img{display:inline}
.commenttemplate a{color:#F3342A;border-bottom:2px solid #eee}
.commenttemplate ol{margin:0;padding:0;color:#555;margin-bottom:2em;}
.commenttemplate textarea{width:520px;padding:2em}
.commentlist li{
	width:100%;
	display:block;
	list-style-type:none;
	margin-top:1em;
	padding:2em;
	background:#eee;
	border:1px solid #ddd;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	}
.commentlist li.odd{background:#fff}
.vcard{width:50%;float:left}
.avatar{float:left;border:3px solid #555}
.fn{text-transform:uppercase;font-style:normal;float:left;padding-left:2em;color:#F3342A}
.says{display:none}
.commentmetadata{width:50%;float:left;text-align:right;color:#F3342A}
.commentlist p{padding-top:2em;clear:both;line-height:1.75em;}

.fourzero{width:100%;margin: 0 auto}
.fourzero a{display:block;border-top:1px solid #999}
.fourzero ul{margin:0;padding:0;margin-bottom:2em}
.fourzero li{list-style-type:none}

.forty{width:40%;float:left}
.sixty{width:60%;float:left}

/*Down here I resume all the elements to which you can change the colors.
As important as the following, is the sifr-config.js file,
where you must change all the headings colors, as well as their background.
Here we will style just some CSS : links, body...*/

/*
Uncomment and change without fear : all the following
 code is a humble overwritting of the above
*/

/*body {
		color:#111;
		background:#fff;
	}
a:focus, a:hover {
		background:#eee;
		color:#111
		}
a{
		color:#F3342A;
	}
pre{
		background:#fcfcfc;
		border:1px solid #ddd;
		color:#999;
	}
blockquote{
		color:#111;
		border-top:1px dotted #111;
		border-bottom:1px dotted #111;
		}
hr {
	background:#999;
	color:#999;
	}
.grey{
	background:#eee
	}
.pages li{
	border-right:1px solid #ddd
	}
.footerwidget li{
	border-top:1px solid #ddd;
	}
.titlemeta img{
	border:1px solid #eee;
	}
.commentlist li{
	background:#eee;
	border:1px solid #ddd;
	}
.avatar{
	border:3px solid #555
	}
.fn{
	color:#F3342A
	}
.commentmetadata{
	color:#F3342A
	}
.fourzero a{
	border-top:1px solid #999
	}*/