body
{
	margin: 0;
	padding: 0;
	font-size: 62.5%;
	background: #f5f3f0 url('img/body-bg.jpg') 0 0 repeat-x;
}

p, h1, h2, h3, h4, h5, h6, ul, li, ol, dl, dd, dt, img, blockquote, cite
{
	margin: 0;
	padding: 0;
}

a img { border: none; }



/*** Typography ***/

body, input, textarea
{
	font-family: "museo-sans-1", "museo-sans-2", Verdana, sans-serif;
	font-weight: 300;
	color: #6f736d;
}

div#side-bar
{
	color: #949991;
}

div#citation
{
	font-family: "Cambria", Georgia, serif;
	color: #9ca695;
	font-style: italic;
}

a { color: #899639; text-decoration: none; }
a:hover { text-decoration: underline; }

	/* exceptions on the links */
	div#side-bar a
	{
		color: #949991;
	}

p, h4, h5, ul, ol, dl, dd, blockquote, cite, textarea, input
{
	font-size: 1.3em;
	line-height: 1.6;
	margin-bottom: 1.5em;
}
	/* exceptions on the margin-bottom rule */
	li, dt, blockquote, h4, textarea, input
	{
		margin-bottom: 0;
	}

h2
{
	font-size: 3em;
	line-height: 1;
	font-weight: 100;
	margin-bottom: 0.15em;
}

	h2, h2 a
	{
		color: #bbc695;
		color: #899647;
	}
	
	h2 a:hover { text-decoration: none; color: #899639; }
	
	div.photo_teaser h2
	{
		color: #848c7e;
		font-size: 1.3em;
		font-weight: 700;
	}
	
		div.photo_teaser h2 a { color: inherit; }
		div.photo_teaser h2 a:hover { color: #899639; text-decoration: underline; }
		div.photo_teaser div.meta p { line-height: 1; }
		
h3 { font-size: 1.8em; font-weight: normal; }

div#side-bar h3
{
	font-size: 1.8em;
	line-height: 1.5;
	margin-bottom: 0;
	font-weight: normal;
	color: #bbc695;
}

.date
{
	color: #b2b2b2;
	margin-bottom: 1em;
}

ul.simple
{
	list-style-type: none;
}

div#main-content ul, div#main-content ol, div#main-content dl dd
{
	margin-left: 2em;
}

.quiet { color: #848c7e; }
.subtle { color: #b2b2b2; }



/*** Layout ***/

html { /* \*/height: auto !important;/**/ min-height: 100%; height: 100%; }
body { height: 100%; }
div#extra-wrap { height: 100%; }

div#site-wrapper
{
	position: relative;
	width: 960px;
	margin: 0 auto;
	height: 100%;
	background: url('img/body-stripe-casa.jpg') 929px 0 repeat-y;
}

div#header
{
	position: relative;
	overflow: visible;
	height: 157px;
	background: url('img/body-stripe-top-casa.jpg') 929px 0 no-repeat;
}

h1#site-title
{
	position: absolute;
	top: 38px;
	right: 90px;
	height: 35px;
	width: 280px;
}

	h1#site-title a
	{
		display: block;
		height: 100%; width: 100%;
		background: url('img/logotext.jpg');
		text-indent: -9999em;
	}
	
h2#logo
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 157px;
	width: 80px;
	margin: 0; padding: 0;
}

	h2#logo a
	{
		display: block;
		height: 100%; width: 100%;
		background: url('img/logo-camera.jpg');
		text-indent: -9999em;
	}
	
div#content-wrapper
{
	position: relative;
	margin: 0 90px 0 130px;
	padding: 0 0 40px 0;
}

	div#main-content
	{
		float: left;
		width: 470px;
		margin-right: 50px;
	}
	
	div#side-bar
	{
		float: left;
		width: 220px;
	}
	
div.post_teaser
{
	margin-bottom: 6em;
}

div.next-prev-links
{
	position: relative;
	clear: both;
	height: 20px;
}

	div.next-prev-links a
	{
		height: 20px;
		width: 41px;
		position: absolute;
		top: 0;
		display: block;
		text-indent: -9999em;
		outline: none;
	}
	
	div.next-prev-links a.previous { background: url('img/arrow-l.jpg') 0 0 no-repeat; left: 0; }
	div.next-prev-links a.next { background: url('img/arrow-r.jpg') 0 0 no-repeat; right: 0; }
	
	body#le-foto div.next-prev-links { margin-bottom: 2em; }

/* Photo stuff */
div.photo_full
{
	position: relative;
	margin: 2em 0 1em 0;
	line-height: 0;
}

	div.photo_full img
	{
		position: relative;
		width: 100%;
	}

div.photo_teaser
{
	margin-bottom: 6em;
}
	
	div.photo_teaser a.img-link
	{
		display: block;
		position: relative;
		height: 160px;
		width: 100%;
		overflow: hidden;
		clear: both;
	}

	div.photo_teaser a.img-link img
	{
		position: absolute;
		bottom: -75%;
		left: 0;
		width: 100%;
	}
	
	div.photo_teaser div.meta { position: relative; margin-bottom: 5px; }
	div.photo_teaser div.meta p { position: absolute; top: 0; right: 0; }
	
div.body { margin-top: 1.5em; }
	
	
/* rounded corner stuff */
div.photo_teaser span,
div.photo_full span, 
form div.field span
{ display: block; position: absolute; width: 6px; height: 6px; background-image: url('img/corners.png'); background-repeat: no-repeat; }
	
	span.tlc { top: 0; left: 0; background-position: top left; }
	span.trc { top: 0; right: 0; background-position: top right; }
	span.blc { bottom: 0; left: 0; background-position: bottom left; }
	span.brc { bottom: 0; right: 0; background-position: bottom right; }
	
	
/* forms etc */
form div.field
{
	clear: both;
	padding: 10px 10px;
	background: #ccc;
	float: left;
	margin: 0 0 10px 0;
	position: relative;
}
	
	form div.field label
	{
		display: inline-block;
		width: 120px;
		font-weight: bold;
		line-height: 1.5;
	}
	
	form div.field input
	{
		border: 3px solid white;
	}
	
	form div.field textarea
	{
		display: block;
		width: auto;
		border: none;
		margin: 20px 0 0 0;
		padding: 10px;
		width: 430px;
	}

	form p.submit,
	form div#comment-live-preview 
	{ clear: both; }
	
	form div#comment-live-preview { margin: 60px 0 0 0;}
	form div#comment-live-preview div.content
	{
		padding: 10px 0;
		border-top: 1px solid #d2d2d2;
		border-bottom: 1px solid #d2d2d2;
	}
	
	form p.submit input
	{
		float: left;
		width: 8em;
		background: #ccc;
		padding: 0.5em 0;
		margin: 0 10px 0 0;
		font-weight: bold;
		color: #6f736d;
		cursor: pointer;
		outline: none;
		font-size: 1em;
		border: 0px;
	}
	
/* comments */
div#comments
{
	margin-top: 6em;
}

	div.comment
	{
		border-top: 1px solid #d2d2d2;
		clear: both;
		position: relative;
		padding: 10px 0;
		margin: 1em 0 3em 0;
	}

	div.comment div.gravatar
	{
		width: 64px;
		position: absolute;
		left: 0;
	}
	
	div.comment div.meta h4 { display: inline; }
	div.comment div.meta p { margin: 0 0 0.5em 0; }
	
	div.comment div.comment-body,
	div.comment div.meta
	{
		margin: 0 10px 0 94px;
	}
	
	
/*** VALIKKO ***/

ul#menu
{
	position: absolute;
	top: 157px;
	left: 6px;
}
	
	ul#menu, ul#menu li
	{
		list-style-type: none;
	}
	
	ul#menu li
	{
		display: inline;
	}
	
	ul#menu li a
	{
		display: block;
		float: left;
		height: 234px;
		width: 22px;
		background: url('img/menu.jpg') 0 0 no-repeat;
		text-indent: -9999px;
		overflow: hidden;
		outline: none;
	}
	
	ul#menu li#mcasa a					{ background-position: 0 0; margin-right: 2px; }
	ul#menu li#mcasa a:hover,
	body#la-casa ul#menu li#mcasa a		{ background-position: 0 -234px; }
	
	ul#menu li#mstorie a				{ background-position: -24px 0; margin-right: 2px; }
	ul#menu li#mstorie a:hover,
	body#le-storie ul#menu li#mstorie a	{ background-position: -24px -234px; }
	
	ul#menu li#mfoto a					{ background-position: -48px 0; margin-right: 2px; }
	ul#menu li#mfoto a:hover,
	body#le-foto ul#menu li#mfoto a		{ background-position: -48px -234px; }
	
	
	
/*** sekalaista ***/

/*
 * Good old Clearfix. Due respect and recognition to everone/anyone who invented this, or helped develop it.
 * Search for the responsibles with google. I could mention positioniseverything.net and 456bereastreet.com
 * for the starters...
 */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block; margin: 0 0 1em 0;}
div#footer { margin-bottom: 0;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.right { float: right; }
.left { float: left; }

img.right { margin: 0 0 1.5em 20px; }
img.left { margin: 0 20px 1.5em 0; }