@charset "UTF-8";
/* CSS Document for Portfolio 2009 / Johanna Rotko */

body { 
	font-family:"Georgia", Times New Roman, Times, serif;
	margin-top:-1px; 
	line-height:100%;
	font-size:75%;}

.top_image {
	margin:0px auto;
	background:url(../images/bg_stripes_up.gif) no-repeat;
	position:relative;
	z-index:2000;
	}

#navi_image{
	margin:0px auto;
	padding-top:92px;
	width:805px;
	background: url(../images/navi_gray.jpg) no-repeat;
	position:relative;
}

.button{
	position:absolute;
	left:750px;
	top:20px;
}

/* Navigation*/
ul.navi,
ul.navi li,
ul.navi ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}


/*Navin reunat*/
ul.navi li a,
ul.navi li a:visited {
 display:block;
 border-style: solid;
 border-width: 1px;
 border-color:#646464 #262626 #464646 #b6b6b6;
 font-family:"Georgia", Times New Roman, Times, serif;
 color: #fff; text-decoration: none; font-weight:bold;
 margin-top:-1px;
 }

ul.navi {
 position: relative;
 z-index: 300;
 float: left;
 margin-top:-30px;
 margin-left:7px;
}

/*alanavi piiloon / hide subnavi*/
ul.navi li ul {
display: none; padding:0px; margin:0px;}

/*Päänavi vierekkäin sekä oikeinpäin vasemmalta oikeelle / Main navi next to each other and left to right*/
ul.navi li {
 float:left;
 position:relative;
}


/* Alanavi / subnavi */
ul.navi ul {
	position:absolute;
	display:block;
	right: 0;
	padding:0px;
	margin:0px;
	border-top: none;
	border-left: solid 1px #646464;
}	

ul.navi ul li {
 float: none;
 margin:0px;
 padding:0px;
}
	
/*Alanavi näkyviin koko lista / subnavi visible, whole list*/
ul.navi li:hover ul {
	display:block; 
	position:absolute; 
	top:25px; 
	left:0px;
	background:transparent;
	z-index:500;
}

/*Välit päänaviin / space for main navi*/
ul.navi a,
ul.navi span {
 display: block;
 padding: 3px 35px 6px 15px;
}
	
/*alanavin hovers / subnavi hovers*/	
ul.navi li:hover ul li a:hover {color:#000;}

ul.navi li ul li {
	background:url(../images/gray_repeat.png) repeat-x; margin-top:-2px; margin-bottom:-1px; padding:0px; height:27px;}
	
/*Alanavin välit / space for subnavi*/
ul.navi ul li a {
margin:0px;
padding:8px 0px 2px 15px;
}	  
		
/* main hovers with colors*/
ul.navi li.first  a:hover, a:active {
	background: url(../images/navi/gray_repeat.png) repeat-x; /*color:#fff;*/ }
	
ul.navi li.second a:hover, a:active{
	background:url(../images/navi/repeat_red.png) repeat-x;/*color:#501801;*/ }

ul.navi li.third a:hover, a:active {
	background:url(../images/navi/repeat_blue.png) repeat-x;/* color:#02405a;*/} 
	
ul.navi li.fourth a:hover, a:active  {
	background:url(../images/navi/repeat_orange.png) repeat-x; /*color:#b15903;*/}

a.hide{
	cursor:default;}
					
	
 /*Main hovers selected 	
ul.navi li.second.selected a {
	background:url(../images/navi/lightgreen_repeat.png) repeat-x;}
ul.navi li.third.selected a {
	background:url(../images/navi/lightgreen_repeat.png) repeat-x;}
ul.navi li.fourth.selected a  {
	background:url(../images/navi/lightgreen_repeat.png) repeat-x;}

/* Alanavin alanavi
ul.navi ul ul li a,
ul.navi ul ul *.dir { padding:5px 8px; }

/*alanavin alanavi oikeeseen kohtaan
ul.navi ul ul {
 top: 0px;
 left: 99%;
}*/
/*
ul.navi ul ul {
	top: 0;
	right: auto;
	left: 100%;
	margin-top: 0;
	border-top: none;
	border-left: none;
	}

/*Alanavin ala hover
ul.navi ul ul li a,
ul.navi ul ul *.dir { background:#842701; }

ul.navi ul li span.dir {
	color:#fff;
	background:#842701 url(../images/nav-arrow-black.png) no-repeat right;
}

ul.navi ul li > *.dir {
	color:#fff;
	background:#842701;
	font-weight:bold;
}*/

	
.leftcolumn {
float:left;
width:150px;
}
	
.container {
	margin:0px auto;
	padding:0px;
	padding-top:20px;
	width:805px;
	color:#fff;
	}
	
.container_2 {
	margin:0px auto;
	padding:0px;
	width:805px;
	color:#fff;
	}	
	
.content_white {
padding:0px 0px 0px 30px;
margin-top:-10px;
color:#000;
position:relative;
z-index:100;
}

.content_white_web {
padding:0px 0px 0px 30px;
margin-top:-10px;
color:#000;
position:relative;
z-index:100;
}

.content_white_photos {
padding:0px 0px 0px 10px;
margin-top:-10px;
color:#000;
position:relative;
z-index:100;
}

.content_white_digi {
padding:0px 0px 20px 30px;
margin-top:-10px;
color:#000;
position:relative;
z-index:100;
}

.content_white p {
width:600px;
color:#000;
margin-bottom:10px;
}


.content_black {
	background-color: #000;
	color:#fff;
	}
	
.content_black_digi {
	background-color: #000;
	color:#fff;
	z-index:100;
	}	
	
/*Digiart content*/
.flash {
	position:relative;
	z-index:99;
	padding:50px 0px 50px 50px;
	}
	
.flash_pysty {
	position:relative;
	z-index:99;
	padding:50px 0px 50px 220px;
	}	
	
.flash2 {
	position:relative;
	z-index:99;
	padding:0px;
	}	
	
.flash_picture {
border:none;
	}

/*Show me more by css play. Safari made me do it with hover*/
.holder {width:500px; margin:1px; padding:0.5em; }
.holder h2 {text-align:left;}
a.hid {color:#fff; text-decoration:none; outline-style:none;}
a.hid em {display:none;}
a.hid:hover {text-decoration:none; }
a.hid:active, a.hid:focus {background:#000;}
a.hid:active span, a.hid:focus span {display:none;}
a.hid:active em, a.hid:focus em, a.hid:hover em {display:block; color:#66b310; width:100%; font-style:normal; cursor:default;padding:0.3em;}
.clear {clear:both;}

/*Content stuff*/	
.textbox_index {
padding:0px 20px;
margin-left:180px;
width:460px;
position:relative;
z-index:100;
}	

.textbox_index h1 {
text-transform:uppercase;
font-size:14px;
color:#fff;
background:url(../images/star.gif) no-repeat;
padding-bottom:1px;
padding-left:25px;
padding-top:2px;
margin-bottom:0.5em;
}
	
p 	{
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:18px;
margin-top:1px;
margin-bottom:15px;
}

p.space{
margin-top: 0px;
margin-bottom: 4px;
}


.content_white_web h1, .content_white_web h2, .content_white_web h3, .content_white_web h4 	{
color:#842701;
}

.content_white_photos h1, .content_white_photos h2, .content_white_photos h3, .content_white_photos h4 	{
color:#056a94; margin-left:20px;
}

.content_black_digi h1, .content_black_digi h2, .content_black_digi h3, .content_black_digi h4 	{
color:#b15903;
}

.content_white_digi h1, .content_white_digi h2, .content_white_digi h3, .content_white_digi h4 	{
color:#b15903;
}
/*
h1 {
font-size:12px;
color:#3e0e00;
background:url(../images/star.gif) no-repeat;
padding-left:25px;
padding-bottom:5px;
}	*/

h2 {
text-transform:uppercase;
font-size:13px;
color:#79b71a;
padding-top:5px;
}

h3 {
font-size:13px;
color:#024103;
font-weight:bold;
margin-bottom:1px;
}

h4 {
font-size:12px;
color:#79b71a;
font-weight:bold;
margin-bottom:1px;
}

.content {
padding:1px 0px 20px 10px;
}

li 	{
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0px;
list-style:circle;
color:#024103;
line-height:16px;
}

li a 	{
color:#66b310;
padding:0px;
text-decoration:none;
}

a:link, a:visited  {
	color:#66b310;
	text-decoration:none;
	border:none;
	background:none;
}

a:hover, a:active {
	color:#66b310;
	text-decoration:underline;
	border:none;
}

.footer	{
width:805px;
background:url(../images/footer_mv.jpg) no-repeat;
height:187px;
text-align:center;
position:relative;
margin:0px auto;
}

.footer_white	{
width:805px;
background:url(../images/footer_white.jpg) no-repeat;
height:187px;
position:relative;
margin-top:20px;
margin-left:-35px;
}

.footer_white_menu	{
width:805px;
background:#fff url(../images/footer_white.jpg) no-repeat;
height:187px;
position:relative;
margin-top:0px;
margin-left:0px;
}

.footer2	{
margin:0px auto;
background:#fff url(../images/footer_stripes.gif) no-repeat center;
height:300px;
text-align:center;
color:#66b310;
padding-top:10px;
}

.footer3 {
margin:0px auto;
background:#000;
text-align:center;
color:#af0808;
}

a.footer3  {
text-decoration:none;
color:#af0808;
}

/*Vertical menu*/
#menu_vertical {
display:block;
/*width:500px;*/
position:relative;
padding:0px;
margin:0px auto;
float:left;
}

#menu_vertical ul {
display:inline;
padding:0px;
margin:0px;
}

#menu_vertical li {
display:inline;
padding:0px;
margin:0px;
}

#menu_vertical li a,
#menu_vertical li a:visited {
margin:0px;
margin-left:2px;
margin-right:10px;
text-decoration:none;
}

#menu_vertical li a:hover,
#menu_vertical li a:active {
background:none;
text-decoration:underline;
}

#menu_vertical li.summer {
margin-left:20px;
list-style:circle;
}
#menu_vertical li.winter {
margin-left:335px;
list-style:circle;
}

a.top,
a:hover.top {
border:0px;
position:absolute;
background:url(../images/kuu.jpg) no-repeat;
padding-left:55px;
padding-top:15px;
padding-bottom:50px;
left:350px;
top:30px;
z-index:1000;
color:#66b310;
text-decoration:none;
	}