@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{}
a{outline: 0;}

body {
	font-family:"myfont_2", Sylfaen;
	color:#fef2f6;
 	background-color:#130205;
	text-align: justify;
}
@font-face{
 	font-family: "myfont_1"; 
 	src: url(fonts/Tw_Cen_MT_Condensed.eot?);
}

@font-face{
  	font-family: "myfont_1"; 
  	font: "Tw Cen MT Condensed";
  	src: url(fonts/Tw_Cen_MT_Condensed.TTF)format('truetype');
}	
@font-face{
 	font-family: "myfont_2"; 
 	src: url(fonts/sylfaen.eot?);
}

@font-face{
  	font-family: "myfont_2"; 
  	font: "Tw Cen MT Condensed";
  	src: url(fonts/sylfaen.ttf) format('truetype');
}	
h1{
	font-family:"myfont_1";	
	font-size:7em ;
	text-align:center;
	text-transform: uppercase; 
	text-shadow: -8px -9px  10px rgba(0,0,0,0.7); 
	filter:progid:DXImageTransform.Microsoft.Shadow(Color='#000000', Direction=315, PixelRadius='10',  ShadowOpacity='0.75');/* Для IE */
		 
}

h2{
  	font-family:"myfont_1";
	font-size:1.7em;
  	font-weight:lighter;
  	text-transform: uppercase; 
  	text-shadow: -5px -5px 7px rgba(0,0,0,0.7); 
  	filter:progid:DXImageTransform.Microsoft.Shadow(Color='#000000', Direction=315, PixelRadius='10',  ShadowOpacity='0.75');/* Для IE */
}

h3{
	font-family:"myfont_1";
  	font-size:1em;
  	font-weight:lighter;
  	padding:5px 30px 0 25px;
  	text-transform: uppercase; 
 }
  
h4{ 
  	font-size:1em;
  	font-weight:lighter;
 }
 
h5{
	color:#fef2f6;
	font-family:"myfont_1";
  	font-size:1.8em;
  	font-weight:lighter;
  	text-transform: uppercase; 
}

h6{
	color:#fef2f6;
	font-size:0.9em;
  	font-weight:lighter;  	
}

h7{	
	font-family:"myfont_1";
  	font-size:1.1em;
  	padding:0 20px 0 20px;
  	text-transform: uppercase; 
}

h8{	
	color:#fef2f6;
	font-weight:lighter;
	font-family:"myfont_1";
  	font-size:1.2em;  	
	letter-spacing:1px;
}

h9{	
	font-size:0.7em;
	font-weight:lighter;
	font-family:"myfont_2", Sylfaen ;
	text-transform:none;
}
h10{
	color:#fef2f6;
	font-family:"myfont_1";
  	font-size:1.5em;
  	font-weight:lighter;
  	text-transform: uppercase;  
	text-align: center;
	}

h11{
	color:#fef2f6;
	font-size:0.85em;
  	font-weight:lighter; 
}

a{text-decoration:none;}

a:link    {color:#fef2f6;}
a:visited {color:#f9e3ea;}
a:hover   {color: #130205;}
/*a:hover   {color: #2c0509;}*/


#tausta {
  position: absolute;
  top: 0;  
  width: 100%;
}

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

#wrapper {
  position: relative;
  margin: auto;
  width: 1401px;
  height: 988px;
  background: url(../img/tausta.png) no-repeat center;
  }

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

#navbar_tausta {
  position: absolute;
  left:0;
  top: 0;
  width: 100%;
}
#navbar_wrapper {
  position: absolute;
  left:0;
  top: 0;
  width: 100%;
}

#navbar {		
  position: absolute;
  left: 110px;
  width: 100%;
  font-family: "myfont_1";
  padding: 0 0 0 0;
}

#navbar a {
  display: inline-block; 
}
#navbar a:hover{ color:#964e57;}
#navbar_tausta, #navbar_wrapper, #navbar {
  height: 30px;
  background-color: black;
}

/* ------LOGO-----*/
#logo {
  position: absolute;
  top: 90px;
  left:140px;
  width:200px;
  height:100px;
  z-index:1000;
}
#logo h2{
	 z-index:1000;
	
}
#logo_line1 h2 {
  position: absolute;
  top:0;
  left:0;
  z-index:1000;
}

#logo_line2 h2 {
  position:absolute;
  top: 10px;
  left:9px;
  letter-spacing: 0px;
   z-index:1000;
}

#logo_line3 h2 {
  position:absolute;
  top:40px;
  left:0;
}

/* ------DECOR-----*/
#decor-up, #decor-down, #decor-arfa, #decor-up-line1, #decor-up-line2, #decor-up-line3, #decor-down-line1, #decor-down-line2, #decor-down-line3 {
  position: absolute;
  z-index:1234;
}
#decor-up-line1, #decor-down-line1{
  border-top: 1px solid #7b5057;
}
#decor-up-line2, #decor-up-line3, #decor-down-line2, #decor-down-line3{
  border-left: 1px solid #7b5057;
}
#decor-up {
  top:80px;
  left:50px;
}
#decor-down {
  bottom:130px;
  right:40px;
}
#decor-arfa
{
  top:10px;
  left:0;
  width:50px;
  height:70px;
  background-image:url(../img/arfa.png);
}
#decor-up-line1{
  top:90px;
  left:-15px;
  width:255px;
  height:0;
}
#decor-up-line2{
  top:-10px;
  left:60px;
  width:0;
  height:280px;
}
#decor-up-line3{
  top:30px;
  left:70px;
  width:0;
  height:300px;
}
#decor-down-line1{
  bottom:90px;
  right:-15px;
  width:255px;
  height:0;
}
#decor-down-line2{
  bottom:-10px;
  right:60px;
  width:0;
  height:280px;
}
#decor-down-line3{
  bottom:30px;
  right:70px;
  width:0;
  height:300px;
}

/*----KIELI----*/

#kieli {
  position:absolute;
  right:10em;
  top: 3em;
}
#kieli_active, #kieli_bar, #kieli_inactive {
	display: inline-block; 
	padding: 0 5px 0 5px;
}
#kieli_bar {
	color:#fef2f6;
}
#kieli_active a {
	text-decoration:underline;
}

/*----CONTENT----*/

#content {
  width: 980px;
  height: 70%;
  position:absolute;
  top:130px;
  left:210px;  
}
#johdanto_teksti a{
	text-decoration: underline;
}
#agora_tila_teksti a{
	text-decoration: underline;
}
#valokuvat_teksti a{
	text-decoration: underline;
}
a.valokuvat_link:link{
	color:#valokuvat;
}
a.valokuvat_link:visited{
	color:#valokuvat;
}
a.valokuvat_link:hover{
	color:#130205;
}
/*----SCROLL----*/

.jspVerticalBar {
    width: 12px;
	background-color:transparent;
}
.jspTrack {
	background-color:transparent;/**/      
}

.jspArrow.jspArrowUp{background:url(../img/scroll/nuoli_y.png) no-repeat center top;}

.jspArrow.jspArrowDown{background:url(../img/scroll/nuoli_a.png) no-repeat center bottom;}

.jspDrag {
	background-color:transparent;
	background-image: url(../img/scroll/drag.png);	    
}

/*------------------TEKSTIT ---------------*/

#agora_tila_teksti, #hurmos_tila_teksti_fi,
#hurmos_tila_teksti_en, #hybris_teksti,
#jannite_teksti, #johdanto_teksti, #karsimys_teksti,
#kuoro_teksti, #naamiot_teksti, #perhe_teksti,
#valokuvat_teksti, #ohjaaja_teksti,
#oliver_teksti, #oliver_teksti_1,
#kuuloke_teksti_1, #kasiohjelmat_teksti{
	font-size:1.1em;
	line-height: 1.4;
}
#hybris_teksti, #jannite_teksti,#karsimys_teksti,
#kuoro_teksti, #perhe_teksti,
#kasiohjelmat_teksti{
	text-align:start;}
/*------------------NAVBAR ---------------*/

.perhe, .kuoro, .hybris, .karsimys, .jannite,
.valokuvat, .naamiot, .kuuloke, .kasiohjelmat,
.video, .esitykset, .tekijat{
	position:relative;	 
	/*background-color: #f0e9de #4f0e1e;*/
	padding: 5px 5px 2px 5px;
	margin:0 20px 0 20px;
}

/*------------------NAVBAR VALOKUVAT---------------*/

.navbarValokuvat{
	background-color: #130205;/**/
	position: absolute;
	top:40px;
	left:150px;
	width:700px;
	height:30px;
	margin:auto;
	padding-top:5px;
	text-align:center;	
	z-index:5000;
}

.navbarValokuvat a{}

.navbarValokuvat a:link{color:#fef2f6;} /* fef2f6 - селектор для обычной ссылки*/
.navbarValokuvat a:hover{color:#130205; background-color:#6b142a; } /*- селектор для наведенной ссылки*/
.navbarValokuvat a:active{color:#fef2f6;} /*- селектор для активной ссылки*/


/*------------------NAVBAR DOWN---------------*/

.navbarDown{
	background-color: #130205;/**/
	position: absolute;
	bottom:0;
	width:1420px;
	height:30px;
	margin:auto;
	margin: 0 0 0 -220px; 
	padding-top:5px;
	text-align:center;	
	
}

.navbarDown a{}

.navbarDown a:link{color:#fef2f6;} 
.navbarDown a:hover{color:#130205; background-color:#6b142a; } 
.navbarDown a:active{color:#fef2f6;} 

/*----FOOTER----*/

#footer {
  position: relative;
  top: -150px;
  text-align: center;
  min-width: 1401px;  
  font-size: 0.9em;
  text-decoration: none;
}