@charset "utf-8";
/* CSS Document */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
}
html{
	/*background-color:#810505;#550000 */
}
body{
	background-color:#810505;/*#550000 */
	font-family: Garamond, "myfont";
	height:776px;
	margin:auto;
}
#wrapper{/*background-color:#550000 ;*/}

h3{}
h4{font-size: 0.9em;}
h5{
	color:#fcf4f5;
	font-size:3.6em;
}
.shrift{
	font-weight:bold;
	/*font-size:1.2em;*/
}
/*-----------------LOGO-----------*/
#logo_valkoinen_kuva_mini{
	position:absolute;
	top:100px;
	right:219px;
	width:92px;
	height:41px;
	background-image: url(../img/logo_valkionen_kuva_mini.png);
}
/*---------- NAVIGATION ----------*/

a:link    {color:#fcf4f5;}
a:visited {color:#fcf4f5;}
a:hover   {color: #400f07;}

#kieli_bar, #navbar_bar {
	color:#fcf4f5;/**/
}
/*---------- CONTENT ----------*/

#johdanto_teksti{
	position:relative;
	top:0;
	margin-left:auto;
	margin-right:auto;
	width: 980px;
	font-weight:lighter;
	border:4px solid #fcf4f5;
	padding:20px;
	font-family:"myfont";
	font-size:1.1em;
	
}
#johdanto_nimi{
	font-family:"myfont_3";
	font-size:2.5em;
	color:#fcf4f5;
	text-align:center;
}
/*---------------------------------*/

#johdanto_kappale_1{
	display:inline-block;
	vertical-align:top;
	padding-right:20px;
	width:645px;
}
#johdanto_kuva_q6{
	display:inline-block;
	vertical-align:top;
	margin-top:10px;
	width:301px;
	height:200px;
	background-image:url(../img/johdanto/kuva_mini_q6.png);
}
#johdanto_kuva_q9{
	display:inline-block;
	vertical-align:top;
	width:471px;
	height:200px;
	background-image:url(../img/johdanto/kuva_mini_q9.png);
}
#johdanto_kappale_2{
	display:inline-block;
	vertical-align:top;
	padding-left:20px;
	width: 470px;		
}

#johdanto_kappale_3{
	display:inline-block;
	vertical-align:top;
	padding-right:20px;
	width:725px;
}
#johdanto_kuva_q12{
	display:inline-block;
	vertical-align:top;
	width:214px;
	height:300px;
	background-image:url(../img/johdanto/kuva_mini_q12.png);
}

#johdanto_kuva_q7{
	display:inline-block;
	vertical-align:top;
	width:302px;
	height:200px;
	background-image:url(../img/johdanto/kuva_mini_q7.png);
	margin-top:10px;
}
#johdanto_kappale_4{
	display:inline-block;
	vertical-align:top;
	padding-left:20px;
	width: 645px;		
}
/*------------------------------------*/
#johdanto_nimi_ru{
	font-family: "myfont_5";
	font-size:2.4em;
	color:#fcf4f5;
}
#lainaus{
	/*padding-left:50px*/
	color:#fcf4f5;
	font-size:1.1em;
	font-style:italic;	
}
#lainaus_1{
	color:#fcf4f5;
	font-size:1.1em;
	text-align:center;	
}
#kronologiaa{
	margin-left:100px;
	color:#fcf4f5;
	font-size:1.1em;
	line-height:1.2em;
	
}
#kirjallisuus{
	margin-left:100px;
	color:#fcf4f5;
	font-size:1.1em;
	line-height:1.2em;
	
}
#kirjallisuus li {
	padding: 0.5em;
}
#ups{
	position:relative;
	width:115px;
	height:32px;
	margin:auto;
	background-image: url(../img/ups.png);
}

/*---------- EINO INFO ----------*/

#eino_link{
	position:absolute;
	right:25px;
	top:30px;
	color:#fcf4f5;
	z-index:1000;
}
#kamera_mini{
        display: inline-block;
	width:63px;
	height:65px;
	background-image: url(../img/kamera_mini.png);
}
#eino_mini{
	position:relative;
        display: inline-block;
	text-align:left;
	top:-10px;
}

#eino_info{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:9999;
	display:none;
}
#eino_info .overlay{
	position: absolute;
	width:100%;
	height:100%;
	background-color:#0a0206;
	opacity:0.8;
}
#eino_info .close{
	position: absolute;
	top:10px;
	right:20px;
	width:27px;
	height:27px;
	background-image: url(../img/close.png);
}
#eino_info_main {
	position: relative;
	top:50px;
	width:800px;
	height:780px;
	margin:auto;
	background-color:#0a0206;
	border: solid 3px #fcf4f5;
}
#eino_otsikko{
	text-align:center;
	position:absolute;
	font-size:1em;
	color:#fcf4f5;
	left: 59px;
	width: 457px;
	height: 175px;
	top: 40px;
}
#eino_otsikko h1,
#eino_otsikko h5,
#eino_otsikko h7{
	color:#fcf4f5;
}
#eino_teksti_container{
	position:absolute;
	left:59px;
	width: 456px;
	top: 189px;
}
#eino_teksti{
	position:relative;
	width: 100%;
	font-size:1.1em;
}
#eino{
	position:absolute;
	right:58px;
	width:166px;
	height:242px;
	background-image: url(../img/eino_mini.png);
	top: 168px;
}
#kamera{
	position:absolute;
	right:57px;
	top:433px;
	width:166px;
	height:242px;
	background-image: url(../img/kamera.png);
}
#eino_ups_center{
	position:relative;
	width:100%;
	margin-top:32px;
}
#eino_ups{
	width:115px;
	height:32px;
	background-image: url(../img/ups.png);
	margin:auto;
}


/*-----------------------------------------------------*/

.kuva_label span{
	position:relative;
	padding-left:5px;
	padding-right:10px;
	bottom:-30px;
	font-family:"myfont_3";
	font-size:2em;
	color:#400f07;
	background-color:#fef5f4;
	border: solid 1px #400f07;	
	
}

.kuva_label{
	position: absolute;
	width:400%;
	left:-150%;
	bottom:0;
	overflow:visible;
	z-index:5000;
	text-align: center;
	background:transparent;
	display:none; /* IE javascript permissions! */
}

.kuva_label_center span{
	position:relative;
	padding-left:5px;
	padding-right:10px;
	top:50%;
	font-family:"myfont_3";
	font-size:2em;
	color:#400f07;
	background-color:#fef5f4;
	border: solid 1px #400f07;
}

.kuva_label_center{
	position: absolute;
	width:100%;
	height:100%;
	overflow:visible;
	z-index:5000;
	text-align: center;
	background:transparent;
	display:none; /* IE javascript permissions! */
}

/*---------- SIVUT/KUVAT (LIGHTBOX) ----------*/

.lb-closeContainer {
	position:absolute;
	right:5px;
	z-index:10001;
}
.lb-data {
	position:relative;
	top:-100px;
	width:100%;
	padding: 0;
	background-color:#f3efee;
	overflow:auto;
}
.lb-data .lb-details {
	position:relative;
	width:80%;
	/*text-align:center;*/
	left:10%;
}
.lb-data .lb-details .lb-caption{
	font-family:"myfont_2";
	color:#040301;
	/*font-size:1.2em;
	background-color:red;*/
}
.lb-data .lb-details .lb-number {
	/*visibility: hidden;*/
	background-color:transparent;
}
/*-----------------------------*/




/*---------- FOOTER ----------*/
#footer_valkoinen {
	text-decoration: none;
	color:#fcf4f5;
}
/*Псевдо классы 
Стили для ссылок

Используя псевдо классы, можно задать стили для четырех состояний ссылки:

    * a:link - селектор для обычной ссылки
    * a:visited - селектор для посещенной ссылки
    * a:hover - селектор для наведенной ссылки
    * a:active - селектор для активной ссылки

В спецификации селекторов больший приоритет имеет тот, который находится ниже в файле стилей. Поэтому для корректной работы селекторов для ссылки, их нужно распологать в следующем порядке:

   1.
      a:link {}
   2.
      a:visited {}
   3.
      a:hover {}
   4.
      a:active {}

Все свойства для ссылок можно описать, используя эти псевдо селекторы. Но можно и комбинировать псевдо селекторы, если это необходимо:

1.a:link, a:visited {color:blue;}
2.a:hover, a:active {color:red;}*/