@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%;
}

noem {
  font-style: normal;
}

@font-face {
  font-family: "myfont";
  src: url('../fonts/Garamond/GARA.eot');
  src: url('../fonts/Garamond/GARA.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Garamond/GARA.woff') format('woff'),
       url('../fonts/Garamond/GARA.TTF') format('truetype'),
	   url('../fonts/Garamond/GARA.svg#myfont') format('svg');
  font-weight: normal;
  font-style: normal;
}		

@font-face {
  font-family: "myfont_2";
  src: url('../fonts/Franklin/FRABK.eot') ;
  src: url('../fonts/Franklin/FRABK.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Franklin/FRABK.woff') format('woff'),
       url('../fonts/Franklin/FRABK.TTF') format('truetype'),
	   url('../fonts/Franklin/FRABK.svg#myfont_2') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "myfont_3";
  src:url(../fonts/Edwardian/Edwardian_Script.TTF);

 }
@font-face {
  font-family: "myfont_3";
  src: url('../fonts/Edwardian/Edwardian_Script.eot') ;
  src: url('../fonts/Edwardian/Edwardian_Script.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Edwardian/Edwardian_Script.woff') format('woff'),
       url('../fonts/Edwardian/Edwardian_Script.TTF') format('truetype'),
	   url('../fonts/Edwardian/Edwardian_Script.svg#myfont_3') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "myfont_4";
  src: url('../fonts/Bodoni/BOD_B.eot') ;
  src: url('../fonts/Bodoni/BOD_B.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Bodoni/BOD_B.woff') format('woff'),
       url('../fonts/Bodoni/BOD_B.TTF') format('truetype'),
	   url('../fonts/Bodoni/BOD_B.svg#myfont_4') format('svg');
  font-weight: normal;
  font-style: normal;
}	
	
@font-face {
  font-family: "myfont_5";
  src: url('../fonts/Allegretto/Allegretto.eot');
  src: url('../fonts/Allegretto/Allegretto.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Allegretto/Allegretto.woff') format('woff'),
       url('../fonts/Allegretto/Allegretto.TTF') format('truetype'),
	   url('../fonts/Allegretto/Allegretto.svg#myfont_5') format('svg');
  font-weight: normal;
  font-style: normal;
}	
	
#wrapper{
	background-image:url(../img/logo_kuva.png);
	background-repeat:no-repeat;
	/*background-color: rgb(0,255,255);*/
		
}

#body-zoom {
  margin:auto;
}

@media screen and (min-width:100px) and (max-width:640px){
  #body-zoom {
    zoom: 38%;
    -moz-transform: scale(0.38);
    -moz-transform-origin: 50% 0;
  }
}
@media screen and (min-width:641px) and (max-width:960px){
  #body-zoom {
    zoom: 57%;
    -moz-transform: scale(0.57);
    -moz-transform-origin: 50% 0;
  }
}
@media screen and (min-width:961px) and (max-width:1024px){
  #body-zoom {
    zoom: 61%;
    -moz-transform: scale(0.61);
    -moz-transform-origin: 50% 0;
  }
}
@media screen and (min-width:1025px) and (max-width:1136px){
  #body-zoom {
    zoom: 68%;
    -moz-transform: scale(0.68);
    -moz-transform-origin: 50% 0;
  }
}
@media screen and (min-width:1137px) and (max-width:1280px){
  #body-zoom {
    zoom: 76%;
    -moz-transform: scale(0.76);
    -moz-transform-origin: 50% 0;
  }
}
@media screen and (min-width:1281px) and (max-width:1366px){
  #body-zoom {
    zoom: 81%;
    -moz-transform: scale(0.81);
    -moz-transform-origin: 50% 0;
  }
}
@media screen and (min-width:1367px) and (max-width:1600px){
  #body-zoom {
    zoom: 95%;
    -moz-transform: scale(0.95);
    -moz-transform-origin: 50% 0;
  }
}
@media screen and (min-width:1601px){
  #body-zoom {
    zoom: 100%;
    -moz-transform: scale(1);
    -moz-transform-origin: 50% 0;
  }
}

#wrapper_aloitus, #wrapper{
	/*background-color: rgb(0,255,255);*/
	position:relative;
	width:1024px;
	margin:auto;
	top: 6px;
}
#header{
	position:relative;
	width:1024px;
	height:190px;
	margin:auto;
}
#header_sivut{
	position:relative;
	width:1024px;
	height:250px;
	margin:auto;
}
p{
	font-family:"myfont";
	color:#fcf4f5;
	font-size: 1em;
	}
h1{
	font-family:"myfont_3";	
	font-size:4em;
	font-weight:lighter;
	/* text-shadow: -8px -9px  10px rgba(0,0,0,0.7); смещение_по_горизонтали,  смещение_по_ вертикали, размытие, цвет;*/
	/*letter-spacing:6px;интервал между символами*/
	/*filter:progid:DXImageTransform.Microsoft.Shadow(Color='#000000', Direction=315, PixelRadius='10',  ShadowOpacity='0.75'); Для IE */
		 
}

h2{
	font-family:"myfont_4"; 
	font-size:3em ;
	font-weight:lighter;
	
}
h3{
	font-family:"myfont_2";
	text-transform: uppercase; /* Заглавные буквы */
	font-size:0.9em;/**/
  	font-weight:lighter;  
}
h4{
	font-family: Garamond, "myfont";
	font-size: 0.9em;
	text-decoration: none;
	font-weight:lighter;
}
h5{
	font-family:"myfont_5";/**/
	font-size:3.6em;
	font-weight:lighter;
	letter-spacing:-3px;/*интервал между символами*/
}

h6{
	font-family:"myfont_3";	
	font-size:1em;
	font-weight:lighter;
}
h7{
	font-family:"myfont_3";	
	font-size:1.8em;

}
h8{font-size:0.7em;
	font-weight:lighter;
	color:#747266;
	letter-spacing:4px;/*интервал между символами*/
	letter-spacing:2px;/*интервал между символами*/
	text-transform: uppercase; /* Заглавные буквы */
}

a{text-decoration:none;}

a:link    {color:#400f07;}
a:visited {color:#400f07;}
a:hover   {color: #810505;}
/*---------- оформление ссылок ----------*/
a.linkki:link{
	text-decoration:underline;
}
a.linkki_etusivu:link{
	color:#400f07;
}
a.linkki_etusivu:visited{
	color:#400f07;
}
a.linkki_etusivu:hover{
	color:#810505;
}
/*-----------------LOGO-----------*/

#logo{
	position:absolute;
	padding-top:30px;
	width:492px;
	height:192px;
	margin:auto;
	left: 284px;
	top: 19px;
}
#logo_1{
	position:absolute;
	top: 11px;
	/*left:530px;*/
	width:192px;
	height:50px;
	left: 0px;
	text-align:right;
}
#logo_2{
	position:absolute;
	text-align: center;
	/*left:690px;*/
	top: 28px;
	width:51px;
	height:58px;
	left: 196px;
	}
#logo_3{
	position:absolute;
	top: 25px;
	/*right:450px;*/
	width:243px;
	height:50px;
	left: 249px;
	text-align:left;
}
#nimi{
	position:absolute;
	top: 128px;
	width:1024px;
	text-align:center;
	left: 0px;
	
}
/*-----------------------------*/
#logo_valkoinen h1,
#logo_valkoinen_top h1
{
	color:#fcf4f5;font-size:4em;
}

#logo_valkoinen h2,
#logo_valkoinen_top h2
{
	color:#fcf4f5;font-size:3em;
}


#logo_valkoinen,
#logo_valkoinen_top
{
	position:absolute;
	padding-top:30px;
	width:492px;
	height:192px;
	margin:auto;
	left:284px;
}

#logo_valkoinen
{
	bottom:10px;
}

#logo_valkoinen_top{
	top:19px;
}

#logo_valkoinen_1{
	position:absolute;
	top: 11px;
	width:192px;
	height:50px;
	left: 0px;
	text-align:right;
}
#logo_valkoinen_2{
	position:absolute;
	text-align: center;
	top: 28px;
	width:51px;
	height:58px;
	left: 196px;
}
#logo_valkoinen_3{
	position:absolute;
	top: 25px;
	width:243px;
	height:50px;
	left: 249px;
	text-align:left;
}
		
/*----------------------*/
.line {
	position:absolute;
	top:157px;
	color:#fcf4f5;
	margin: 0 10px 0 10px;
	width: 1004px;
	left: -285px;
	border-bottom: 1px #fcf4f5 solid;

}


/*---------- NAVIGATION ----------*/

#sivut_navigatio {
	position:absolute;
	bottom:10px;
	width:100%;
	height:62px;
}

#navbar, #navbar_valkoinen{
	position:absolute;
	left:2px;
	top: 66px;
}

#navbar_sivut{
	position:absolute;
	left:2px;
	top:22px;
	z-index:1000;
}
	
/*---- sivut nimi  ----*/

#sivut_nimi{
	position:relative;
	height:37px;
	top:12px;
	margin:auto;
}
#sivut_nimi span{
	position:relative;
}
#nuoli_vasen{
	position:absolute;
	top: 5px;
	left:-35px;
	width:22px;
	height:27px;
	background-image: url(../img/nuoli_vasen.png);
}
#nuoli_oikea{
	position:absolute;
	top: 5px;
	right:-45px;
	width:22px;
	height:27px;
	/*background-color:white;*/
	/*background-image: url(../img/nuoli_oikea.png);*/
}
a:link #nuoli_oikea{
	background-image:url(../img/nuoli_oikea.png);
}
a:hover #nuoli_oikea{
	background-image:url(../img/nuoli_oikea_hover.png);
}
a:active #nuoli_oikea{
	background-image:url(../img/nuoli_oikea.png);
}


a:link #nuoli_vasen{
	background-image:url(../img/nuoli_vasen.png);
}
a:hover #nuoli_vasen{
	background-image:url(../img/nuoli_vasen_hover.png);
}
a:active #nuoli_vasen{
	background-image:url(../img/nuoli_vasen.png);
}
/*----KIELI----*/

#kieli, #kieli_valkoinen{
	position:absolute;
	right:2px;
	top: 66px;
}

#kieli_sivut{
	position:absolute;
	right:2px;
	top:22px;
}

#kieli_active, #kieli_bar, #kieli_inactive, #navbar_active, #navbar_bar, #navbar_inactive {
	display: inline-block; /* Строчно-блочный элемент */
	padding: 0 0px 0 0px;/*  Поля вокруг ссылок */
}
#kieli_active a, #navbar_active a{
	text-decoration:underline;
}

/*---------- CONTENT ----------*/
#sivu_teksti{
	/*background-color: #fef2f6;*/
	color:#fef2f6;
	font-weight:lighter;
	width: 373px;
	position:absolute;
	top: 20px;
	left:-1px;
	height: 443px;
	font-size:1.07em;
	
}

/*-------- HOVER BORDER ------*/
.lb-default
{
	border: solid 3px #fcf4f5;
}

.lb-hover
{
	border: solid 3px #400f07;/*border фотографий*/
}

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

.lb-data .lb-details .lb-caption{
	font-size:100%;
}
.lb-data .lb-details .lb-number {
	font-size:75%;
}

/*---------- FOOTER ----------*/
#footer {
	position: absolute;
	text-align: center;
	min-width: 1024px;
	font-size: 0.9em;
	text-decoration: none;
	left: 204px;
	width: 1024px;
}
#footer_valkoinen {
	position: relative;
	width: 1024px;
	min-width: 1024px;
	margin:auto;
	padding-top:50px;
	padding-bottom:50px;
	text-align: center;
	font-size: 0.9em;
	text-decoration: none;
}

/*---------- ARROW-UP ----------*/
#arrow-up {
	position:fixed;
	bottom: 50px;
	left: 50px;
	width: 124px;
	height: 74px;
	visibility:hidden;
	background-image:url(../img/arrow-up.png);
	background-repeat:no-repeat;
}

#arrow-up.active {
	visibility:visible;
}
#arrow-up.hover {
	background-image:url(../img/arrow-up_hover.png);
}

/*Псевдо классы 
Стили для ссылок

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

    * 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;}*/