@charset "utf-8";
/* CSS Document */

body{
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:95%;
	margin:auto;
	padding:auto;
}
#header{
	height:155px;
	width: 100%;
	position: fixed;
	top:-10px;
	background:url(/images/pcbanner.jpg) no-repeat center  #f9f9f9;
	font-family: 'intro_bold_capsregular', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-transform:uppercase;
	font-weight:bold;
	color:#141414;
	box-shadow: 0px 3px 8px #737373;
	margin: 0;
	padding: 20px 0 0 0;
	text-align: center;
	z-index: 40;
}


.font12{
	font-size:12px;
	font-weight:normal;
}

#container{
	width:80%;
	height: 100%;
	max-height:800px;
	max-width:1600px;
	margin:220px auto 0 auto;
	text-align:center;
	font-family: 'intro_bold_capsregular', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
	font-size: 93%;
	text-transform:uppercase;
	font-weight:normal;
	z-index: 30;
}

#bio{
	width:700px;
	margin-left:auto;
	margin-right:auto;
}

/* ====================================================== LINKS */

a:link, a:visited{
   	color:#990;
   	text-decoration:none;
}
a:active, a:hover{
	color:#141414;
	text-decoration:none;
}

.lang img{
	box-shadow:2px 3px 8px #737373;
}

.lang a{
	opacity:0.7;
}
.lang a:hover{
	opacity:1.0;
}

.etsy a img{
	opacity:1.0;
	box-shadow:2px 3px 8px #bababa;
}
.etsy a:hover img{
	box-shadow:2px 3px 8px #737373;
}

.some a{
	opacity:0.7;
}
.some a:hover{
	opacity:1.0;
}



/* ======================================================== NAVI */

#navbar{margin-top:127px;background-color:#ffffff;width:100%;height:2em;white-space: nowrap;}
#nav{max-width:50em;margin:auto;padding:auto;background-color:#ffffff;}

#nav > a{display: none;}
#nav li{position: relative;list-style-type:none; padding-top:4px;padding-bottom:2px;padding-left:0;padding-right:0;margin-top:0px;margin-bottom:0px;margin-left:0;margin-right:0;background-color:#ffffff;}
 
/* first level */
#nav > ul{height: 1.5em; padding:0;margin:0;}
#nav > ul > li{width: 20%;height: 100%;float: left;}
 
/* second level */
#nav li ul{display: none;position: absolute;top: 100%;}
#nav li:hover ul{display: block;}

/* ====================================================== CONTENT */

#biotext{
	max-width:700px;
	text-align:justify;
	text-transform:none;
	line-height:1.5;
}
.bioquote{
	text-align:center;	
	font-style:italic;
	font-size:120%;
}
h1{
	font-size:150%;
}
h2{
	font-size:120%;
}
#omakuva{
	float:right;
	margin-left:30px;
	-moz-box-shadow: 5px 5px 10px #d4d4d4;
	-webkit-box-shadow: 5px 5px 10px #d4d4d4;
	box-shadow: 5px 5px 10px #d4d4d4;
}

.biokuvat{
	float:right;
	}

#cv{
	font-size:80%;
	width:120px;
	height:15px;
	background:#909090;
	color:#fff;
	font-style:italic;
	font-family:Georgia, "Times New Roman", Times, serif;
	display:block;
	padding:10px;
	text-align:center;
	vertical-align:central;
	margin-top:30px;
}
#cv:hover{
	background:#666;
}
#cvlink{
	color:#fff;
	font-size:125%;
}

.mininotes{
	text-transform:none;
	font-size:85%;
    color: #818181;
}

#container img{
	max-height:600px;
	max-width:100%;
}

/* ====================================================== FOOTER */
#footer{
	clear:both;
}

/* ====================================================== VIDEO */

#video{
	min-width:900px;
	width:80%;
	height:auto;
	margin-bottom:40px;
}
#videofig video{
	visibility:visible;
	width:80%;
	height:auto;
}

video{
	visibility:hidden;
	width:80%;
	height:auto;
}

/* ====================================================== FIGURE */

figure{
	margin-bottom:10%;
}
figcaption{
	text-transform:none;
	background-color:#ededed;
	padding:10px;
	width:60%;
	margin-right:auto;
	margin-left:auto;
}

/* ====================================================== MEDIA QUERY */

@media only screen and ( max-width: 40em ) /* 640 */ {
#container{font-size:100%;margin:140px auto 0 auto;}
#figure{max-width:750px; width:100%;}
.lang img{width:30%;}
.etsy img{width:70%;}
#header a{font-size:100%;}
#header{
	height:115px;
	width: 100%;
	position: fixed;
	top:-10px;
	background:url(/images/mobilebanner.jpg) no-repeat center  #f9f9f9;
	font-family: 'intro_bold_capsregular', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
	font-size:130%;
	text-transform:uppercase;
	font-weight:normal;
	color:#141414;
	box-shadow: 0px 3px 8px #737373;
	margin: 0;
	padding: 10px 0 0 0;
	text-align: center;
	z-index: 40;
}
#navbar{margin-top:0;padding-top:0;height:2.5em;}
#nav{padding-top:0;margin-top:0;}
#omakuva{float:none;}
#bio, #biotext{width:auto;}
#cv{height:auto;}


#nav{position: relative;width:100%;width:100%;}
#nav ul{background:#ffffff; padding-bottom:0.8em;}
#nav:not( :target ) > a:first-of-type,#nav:target > a:last-of-type{display: block;}
#nav > a{
	width: 2.1em; /* 50 */
	height: 1.25em; /* 50 */
	text-align: left;
	position: relative;
	font-size:200%;
}
 
/* first level */
#nav > ul{height: auto;display: none;position: absolute;left: 0;right: 0;}
#nav:target > ul{display: block;}
#nav > ul > li{width: 100%;float: none;}

/* second level */
#nav li ul{position: static;}
}