/*  
Theme Name: Aarnin
Theme URI: http://tonilehtimaki.com
Description: Fresh artist theme for Aarni.
Version: 1.0
Author: Toni Lehtimäki
Author URI: http://tonilehtimaki.com
*/

/* ************************************************************************************************************************************************************

Obviously feel free to change the info above once you've added your own styling

************************************************************************************************************************************************************ */

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100% }
q:before, q:after { content:''}
a { outline: none; text-decoration:none }

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
* a { position:relative } /* Gets links displaying over a PNG background */
a img { border:none } /* Gets rid of IE's blue borders */


/* ******************

	UTILITY

********************* */
.floatleft {float: left;}
.floatright{float: right;}
.clear{clear: both;}
.button, .css_form_submit {border: 1px solid #EDFAC8;background: white;
padding: 2px 6px;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
color:#96CC00;}

.button:hover ,.css_form_submit:hover{background: #96CC00; color: white;}
.spacer{}

img.levy{border:2px solid #BFC5A1;}
/* ******************

	STRUCTURE #1F1B1B

********************* */
* {
margin: 0;
 }
html, body {
     height: 100%;
      
}
body{
width: 100%;
font-size: 62.5%; font-family:Georgia, san-serif; color:#F5F5F5;
	background:#1F1B1B;
}
#shadow {
position: relative;
margin:0 auto;
width: 640px;
background:url(http://aarnin.com/aarni/images/shadow.png) center center repeat-y;
z-index:15;
}

#page-wrap{
position: relative;
	background: #ffffff url(http://aarnin.com/aarni/images/wrap_background.jpg) top left no-repeat;
	width: 620px;
	min-height:972px; height: auto !important; height: 972px;
	margin: 0 auto;
	z-index: 21;
	
}

div.myspace a img{float:right; line-height: 0; margin: 32px 5px 10px 0; height: 31px; padding:0 5px;}
/* ******************

	Typography 

********************* */
p								 { font-size: 1.1em; line-height: normal; margin: 0 0 10px }
h1								{ font-size: 3.6em; font-family: Georgia, serif; font-weight: normal; }
h2									 { font-size: 2em; font-family: Georgia, serif; font-weight: normal; line-height: 20px }
h3									 { font-size: 1.8em; font-family: Georgia, serif; font-weight: normal; line-height: normal; margin: 0 0 10px }
h4									{ color: white; font-size: 2.0em; margin-bottom: 15px; }
.post h4							{ font-size: 1.8em; font-family: Georgia, serif; font-weight: normal; margin: 0 0 10px 0;
									  color: #D1AF7F; }
a {color:#f5f5f5;}
a:hover	{color:#D1AF7F;}								  
									  
a.post_header {color:#D1AF7F;}
a:hover.post_header {color:#f5f5f5;}
/** SOITIN **/
#soitin{
	position:absolute;
	left:50%;
	width:300px;
	margin:0 0 0 -550px;
	z-index: 1;
	color: #f5f5f5;
	display:none;


}
/** END SOITIN **/

/* ********************
	MYSPACE
********************* */

#myspace2{
position: relative;
height: 100px;
width:165px;
display: block;
}
#myspace2 a{
height: 45px;
background:transparent url(http://aarnin.com/aarni/images/myspace_logo_aarni.png) top left no-repeat;
text-indent: -999px;
position: relative;
left: 0px;
margin: 5px 0px;
padding: 5px 0;
display: block;
}
#myspace2 a:hover{
position: relative;
z-index: 5;
background:transparent url(http://aarnin.com/aarni/images/myspace_logo_aarni2.png) top left no-repeat;
display: block;
}
/* ******************

	Rounded Corners 

********************* */
.post					 { line-height: normal; margin: 15px 0.65em 40px 1em; position: relative; width: 340px; float: left }
.top_box				{position: absolute; margin-top: -15px;}
.bottom_box				{position: absolute;}
.content_box			 { 
color: #f5f5f5; font-size: 1.2em; 
font-family: Georgia, Arial, sans-serif; 
line-height: normal; background: url("http://aarnin.com/aarni/images/bfill.png") repeat-y center; 
text-align: left; 
display: block; 
padding: 5px 10px; 
position: relative;
}
.content_box h2 h3{line-height: 1em; }

div.content_box a,
div.content_box h2{color:#D1AF7F;}

div.content_box h2 {padding:15px 0px;}
div.content_box a:hover h2,
div.content_box a:hover{color:#f5f5f5;}
/*((((((((((())))))))))))))))))))))))))*/
.post2					 {  
line-height: normal; background: url("http://aarnin.com/aarni/images/bfill.png") repeat-y center;
padding:0 10px; position: relative; width: 320px; }

.top_box2				{position: absolute; margin-top: -15px;}
.bottom_box2				{position: absolute;}
.content_box2			 { 
color: #f5f5f5; font-size: 1.2em; 
font-family: Georgia, Arial, sans-serif;  
text-align: left; 
display: block; 
margin:10px 0 0;
padding:5px 0 20px 10px;
position: relative;
width: 340px;S
}
.content_box2 h2 h3{line-height: 1em; }

div.content_box2 a,
div.content_box2 h2{color:#D1AF7F;}

div.content_box2 h2 {padding:2px 0px 15px 0px;}
div.content_box2 a:hover h2,
div.content_box2 a:hover{color:#f5f5f5;}

.postmetadat {font-size: 0.8em;}
/*((((((((((())))))))))))))))))))))))))*/

.content p{padding: 5px 0;}
.inside	{ padding: 5px 20px; margin: 1em;
background: url(http://aarnin.com/aarni/images/bfill.png) center repeat-y; color:#f5f5f5; text-align: left; font: georgia, arial, sans-serif;

}
/*
Kommenttilomake
*/
div.commentbox_form							{ float: left; width: 325px;  position: relative; margin-top: 30px; line-height: 0; }
div.top_box_comment_form					{position: absolute; margin-top: -15px;}
div.bottom_box_commment_form				{position: absolute;}
.content_box_comment_form				{font-size: 1em; line-height: 1em; padding:2px 5px; background: url(http://aarnin.com/aarni/images/bfill_comment.png) top left repeat-y;  color:#f5f5f5; text-align: left; font-family: Georgia, Arial, sans-serif;}

div.content_box_comment_form h3				{font-size: 1.5em; line-height: 1em; }

div.comment_form input						{border:2px solid #f5f5f5;}
textarea#comment 					{position:relative; width: 290px; margin: 1em;}
/*
Komentti-normaali
*/
div.commentbox							 { line-height: 0; padding-top: 30px; position: relative; width: 325px; float: left }
div.top_box_comment					{position: absolute; margin-top: -15px;}
div.bottom_box_commment				{position: absolute;}
.content_box_comment				{font-size: 1.2em; line-height: 1.3em; padding:2px 5px; background: url(http://aarnin.com/aarni/images/bfill_comment.png) top left repeat-y;  color:#f5f5f5; text-align: left; font-family: Georgia, Arial, sans-serif;}

div.content_box_comment h3				{font-size: 1.5em; line-height: 1em; }

div.comment input						{border:2px solid #BFC5A1;}
textarea#comment 					{position:relative; width: 290px; margin: 0.8em; border:2px solid #BFC5A1;}
/* ******************

	NAVIGATION

********************* */
/*
First, the box's left edge is positioned at the horizontal center of the page using 
"position:absolute; left:50%;". T
hen, the box's left margin is set to the opposite of half the box's width using "margin-left:-(1/2width)px;". 
Note! padding (might) increase(s) the width
*/

	
#menu{
	position:absolute;
	left:50%;
	width:300px;
	margin: 250px 0 0 -450px;
	z-index: 1;
	color: #f5f5f5;


}
ul#nav li{
	position: relative;
	display: block;
	background: url(http://aarnin.com/aarni/images/menu2.png) top left no-repeat;
	width: 165px;
	height: 30px;

}
ul#nav li.uutiset a{
	position: relative;
	display: block;
	width: 165px;
	font-size: 1.8em; font-family:Georgia, san-serif; color:#000000;
	font-style: italic;
	padding: 1px 2px 1px 10px;
}
ul#nav li.esittely a{
	position: relative;
	display: block;
	width: 165px;
	font-size: 1.8em; font-family:Georgia, san-serif; color:#000000;
	font-style: italic;
	padding: 1px 2px 1px 10px;
}
ul#nav li.musiikki a{
	position: relative;
	display: block;
	width: 165px;
	font-size: 1.8em; font-family:Georgia, san-serif; color:#000000;
	font-style: italic;
	padding: 1px 2px 1px 10px;
}
ul#nav li.keikat a{
	position: relative;
	display: block;
	width: 165px;
	font-size: 1.8em; font-family:Georgia, san-serif; color:#000000;
	font-style: italic;
	padding: 1px 2px 1px 10px;
}
ul#nav li.blogi a{
	position: relative;
	display: block;
	width: 165px;
	font-size: 1.8em; font-family:Georgia, san-serif; color:#000000;
	font-style: italic;
	padding: 1px 2px 1px 10px;
}
ul#nav li.vieraskirja a{
	position: relative;
	display: block;
	width: 165px;
	font-size: 1.8em; font-family:Georgia, san-serif; color:#000000;
	font-style: italic;
	padding: 1px 2px 1px 10px;
}
ul#nav li.media a{
	position: relative;
	display: block;
	width: 165px;
	font-size: 1.8em; font-family:Georgia, san-serif; color:#000000;
	font-style: italic;
	padding: 1px 2px 1px 10px;
}
ul#nav li.yhteys a{
	position: relative;
	display: block;
	width: 165px;
	font-size: 1.8em; font-family:Georgia, san-serif; color:#000000;
	font-style: italic;
	padding: 1px 2px 1px 10px;
}
ul#nav li a:hover,
body#uutiset ul#nav li.uutiset a,
body#esittely ul#nav li.esittely a,
body#musiikki ul#nav li.musiikki a,
body#keikat ul#nav li.keikat a,
body#blogi ul#nav li.blogi a,
body#vieraskirja ul#nav li.vieraskirja a,
body#media ul#nav li.media a,
body#yhteys ul#nav li.yhteys a{
	position: relative;
	display: block;
	background: url(http://aarnin.com/aarni/images/menu1.png) top left no-repeat;
	width: 165px;
	height: 30px;
	color: #F5F5F5;
}
img#fox{
padding-left: 10px;
}
p#menu{
color: #F5F5F5;
}
/* ******************

	HEADER

********************* */
#page-header {
width: 100%;
overflow: hidden;
padding-left: 20px; /*offset of tabs relative to browser left edge*/
}
#page-header h2{font-size:2.4em;
padding:5px 7px 5px;
}
ul#page-header{
margin: 0 -1px 0 0;
padding: 0;
list-style-type: none;
}
h2#page-header{
font: bold 12px Verdana;
}
li#page-header{
display: inline;
margin: 0;
}
#page-header .page-header-left{
float: left;
display: block;
height: 42px;
width: 30px;
text-decoration: none;
margin: 0;
padding:0;
background: url(http://aarnin.com/aarni/images/page-header-left.png) top left repeat-x; /*background of tabs (default state)*/
}

#page-header .page-header-midle{
float: left;
display: block;
text-decoration: none;
height: 28px;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
color:#000;
background: url(http://aarnin.com/aarni/images/page-header-midle.png) top left repeat-x; /*background of tabs (default state)*/
}
#page-header .page-header-right{
float: left;
display: block;
height: 42px;
width: 30px;
text-decoration: none;
margin: 0;
padding: 0; /*padding inside each tab*/
background: url(http://aarnin.com/aarni/images/page-header-right.png) top left repeat-x; /*background of tabs (default state)*/
}



h1#logo {
	width: 342px; height:  107px; background:url(http://aarnin.com/aarni/images/mainheader.png) top left no-repeat; text-indent:-9999px ;
	margin:0; float: left;
}
#header {
	padding:5px 0 0 0;
}
#header p{
	color: white; width:100px;
	float: left;
}
form#searchform {
	margin: 35px 5px 10px 0; 
	float: right;
	color:#ffffff;
}
input#header,
input.searchtextbox{
	border:1px solid #D5E8A2;
	background: url(http://aarnin.com/aarni/images/search-box.png) top left repeat;
	padding: 1px 1px;
	width:100px;
	height: 15px; 
	color:#F5F5F5;
	font-size: 1.2em;
	font-variant: small-caps;
}
/* ******************

	FOOTER - using sticky footer technique- done with negative margins

********************* */
.push{
     height: 200px;
     }
#footer{
	width: 640px;
	margin: 0 auto;
	position: relative;
    height: auto;

}
#footer-wrap{
background:transparent url(http://aarnin.com/aarni/images/shadow.png) top center repeat-y;

}
#footer-inside{
padding: 5px;
margin: 0 auto;
	width: 610px;
	position: relative;
 	font-size: 1.2em; line-height: 1.2em;
 	color: #D5E8A2;

 background: #3E3E3E url(http://aarnin.com/aarni/images/footbg.png) top left repeat-x;

}
#footer-bottom{
position: relative;
margin-top: -10px;
}



/*------------------------------------------------*/
div.testi { 
	float: left; width: 18em; padding: 20px; margin: 1em;
    background: #c92; color:#000; text-align: center; font: verdana, arial, sans-serif;
}