/* Start of CMSMS style sheet 'jope' */
/* Trimedia Oy */


/* Default fonts, colors & styling */
body {
   background: url("uploads/layout/bg.png");
   color:#2a2a2a; font-family: Times New Roman, Georgia; font-size:14px;
}
a {
   color: #e2494c; text-decoration: underline;
}
a:hover {
   color: #e2494c; text-decoration: none;
}
p {
   margin: 5px 0 5px 0;
   line-height: 1.3em;
}
h1 {
   margin-bottom: 15px;
   color: #000;font-size: 22px;
}
h2 {
   margin-bottom: 15px;
   color: #333; font-size: 18px;
}
h3 {
   margin-bottom: 15px;
   color: #666; font-size: 16px;
}
h4 {
   margin-bottom: 15px;
   color: #999; font-size: 14px;
}


/* Wraps & Blocks */

/****** CONTACT***********/



#contact-top{
   margin:0 auto; width: 470px; height: 270px;
   color:#FAF8EE;  background: #3A90A2;
   padding: 80px 0 0 50px;
}
#contact-top h3{
   color: #FAF8EE; font-size: 42px; display: block;font-weight: normal; text-shadow: 1px 1px 1px #e2494c;
   font-family: Steelfish-Regular; text-transform: uppercase;
}
#contact-top strong{
   color: #FAF8EE; font-size: 20px; line-height: 24px; display: block;font-weight: normal; 
   font-family: Steelfish-Regular; text-transform: uppercase;
}



/*********** HEAEDER ***********/

#header-ajankohtaista-wrap {background: url("uploads/layout/page-bg1.jpg") no-repeat center;height: 265px;}
#header-jope-wrap {background: url("uploads/layout/page-bg2.jpg") no-repeat center;height: 265px;}
#header-media-wrap {background: url("uploads/layout/page-bg5.jpg") no-repeat center;height: 265px;}
#header-levyt-wrap {background: url("uploads/layout/page-bg3.jpg") no-repeat center;height: 265px;}
#header-kirjat-wrap {background: url("uploads/layout/page-bg4.jpg") no-repeat center;height: 265px;}

#header-palaute-wrap {background: url("uploads/layout/page-bg3.jpg") no-repeat center;height: 265px;}
#header-keikat-wrap {background: url("uploads/layout/page-bg3.jpg") no-repeat center;height: 265px;}

#header-page {
   position: absolute; top: 0; right: 50%; margin-right: -460px;
   width: 920px; height: 265px; z-index: 100;
}


#header-wrap { height: 435px;}
#header-wrap #slider{
   width: 100%; height: 435px;
   position: absolute;
}


#header-wrap .slide1{background: url("uploads/layout/slide1.jpg") no-repeat center top; }
#header-wrap .slide2{background: url("uploads/layout/slide2.jpg") no-repeat center top; }
#header-wrap .slide3{background: url("uploads/layout/slide3.jpg") no-repeat center top; }

#header-wrap .slide1, #header-wrap .slide2, #header-wrap .slide3{height: 435px; width:100%;}

#header {
   position: absolute;  top: 0; right: 50%; margin-right: -460px;
   width: 920px; height: 435px; z-index: 100;
}

#logo {
   float: right;
   margin:145px 0 0 0;width: 640px;height: 195px;
   background: url("uploads/layout/logo.png") no-repeat;
   overflow: hidden;
}
#logo a {
   display: block;
   padding: 195px 0 0 0;
}

#logo-page {
   float: right;
   margin:105px 0 0 0;width: 470px;height: 142px;
   background: url("uploads/layout/logo-page.png") no-repeat;
   overflow: hidden;
}
#logo-page a {
   display: block;
   padding: 142px 0 0 0;
}


#next{
   padding: 2px 18px 10px 15px;
   background: url(uploads/layout/slide-nav-bg.png);
   position: absolute;  right: 58px;
   bottom: -3px; #bottom: -5px; bottom: -5px\0/; 
   color: #41a0b4; font-size: 42px; display: block;font-weight: normal; text-shadow: -1px -1px 1px #111;
   font-family: Steelfish-Regular;
   
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   transform: rotate(-5deg);
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
   
   cursor: pointer;
}
#prev{
   padding: 2px 18px 10px 15px;
   background: url(uploads/layout/slide-nav-bg.png);
   position: absolute; right: 0;
   bottom: -3px; #bottom: -5px; bottom: -5px\0/; 
   color: #41a0b4; font-size: 42px; display: block;font-weight: normal; text-shadow: -1px -1px 1px #111;
   font-family: Steelfish-Regular;
   
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   transform: rotate(-5deg);
   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
   
   cursor: pointer;
}

#next:hover, #prev:hover{
color: #e2494c;
}

#next:active, #prev:active{
text-shadow: none; padding: 2px 19px 10px 14px;
}

/*********** MAINMENU ***********/

#nav-wrap{
   background: url("uploads/layout/nav-bg.png") repeat-x;
   height: 105px; width: 100%;
   position: fixed; z-index: 101;
}
#nav{
   width: 980px; margin: 0 auto;
}
.nav#main{
   float:left; display:inline;
   margin:0 0 0 0;
   font-size:14px;
}
.nav#main li{
   float: left; display: inline;
   padding:16px 19px;
   font-family: Steelfish-Regular;
   border-right: 1px solid #4ca9b6; border-left: 1px solid #34737c;
}
.nav#main li a {
   color: #e2494c; font-size: 10px; text-transform: uppercase; text-decoration:none;
}
.nav#main li a strong{
   color: #e2494c; font-size: 42px; display: block;font-weight: normal; text-shadow: 1px 1px 0px #222;
  color: #FFF\0/;  #color: #FFF; 


}
.nav#main li a span{
   color: #34737c; font-size: 16px;font-weight: normal;
}



.nav#main li a:hover{
   color:#ff3333;text-decoration:none;
}
.nav#main li.currentpage a strong{
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

text-shadow: 1px 1px 0px #333;
}

/************* side nav ****************/
.nav#side{
   float:left; display:inline;
   margin:60px 0 0 0; padding: 20px 0 0 0;
   background: url("uploads/layout/side-bg.png") repeat-y left top;
   #background: url("uploads/layout/side-bg.png") repeat-y right top;
}
.nav#side li{
   font-family: Steelfish-Regular;
   height: 59px; width: 245px; padding: 7px 0 0 40px;
   background: url("uploads/layout/side-btn.png") no-repeat left top;
}
.nav#side li a {
   color: #fbfaf1; font-size: 40px; text-transform: uppercase; text-decoration:none;

}
.nav#side li a:hover {
   color: #fbfaf1; font-size: 40px; text-transform: uppercase; text-decoration:none;
}
.nav#side li.currentpage{
   background: url("uploads/layout/side-btn.png") no-repeat left -66px ;
}
.nav#side li:hover{
   background: url("uploads/layout/side-btn.png") no-repeat left -66px ;
}

.bottom-product{
   width: 285px; 
   float:left; display:inline;
   margin:0 0 0 0; padding: 20px 0;
   background: url("uploads/layout/side-bg.png") repeat-y left top;
   #background: url("uploads/layout/side-bg.png") repeat-y right top;
   #margin: 0 0 0 16px;
}
.bottom-product-inner{
   width: 180px;
   float:left; display:inline;
   margin:0 0 0 50px; padding: 20px 10px;
   background:#FBF9F0;
}


.video-wrap{float: left; margin: 20px 0 0 0;}

/*********************CONTENT*******************************/

#container-wrap {
   background: url("uploads/layout/content-bg.png") repeat-x;
}
#container {
   margin:0 auto; width: 920px; 
}



/******* index *********/
.content{
   float:left; display:inline;
}

.partners{ background: #FFF; float: left; width: 150px; padding: 20px 10px; margin: 0 0 30px 0; 

-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.partners img{width: 150px !important; height: auto !important; margin: 0 !important;}

.content h2{
   color: #494947; font-size: 40px; font-weight: normal;
   padding: 10px 0; margin: 0 0 15px 0; border-bottom: #494947 dotted 1px;
   font-family: Steelfish-Regular; text-transform: uppercase;
   text-align: left;
}

.content h2 span{
   color: #e2494c; font-size: 26px; font-weight: normal;
   padding: 10px 0; margin: -10px 0 0 0;
   font-family: Steelfish-Regular; text-transform: uppercase;
   text-align: left;
}


.content h4{
   color: #494947; font-size: 40px; font-weight: normal;
   padding: 10px 0; margin: 15px 0 15px 0; border-bottom: #494947 dotted 1px;
   font-family: Steelfish-Regular; text-transform: uppercase;
   float: left; width: 100%;
}

.content#index-left{
   width: 280px; margin: 45px 0 0 0;  
}
.content#index-center{
   width: 430px; margin: 45px 0 0 30px; 
}
.content#index-right{
   width: 150px; margin: 40px 0 0 30px;
   text-align: right;
}

.content#index-right img{
   margin: 0 0 22px 0;
}

/**JOPE**/
.content#jope-center{
   width: 430px; margin: 45px 0 0 0; 
}
.content#jope-right{
   width: 430px; margin: 45px 0 0 30px;
}

/**TUOTANTO**/
.content#tuotanto-center{
   width: 580px; margin: 45px 0 0 0; 
}
.content#tuotanto-right{
   width: 280px; margin: 45px 0 0 60px;
}


/********* MEDIA ***************/


.images-wrap{
   float: left; display: inline;
   width: 45px; height: 45px;
   overflow: hidden; 
   border: #41a0b4 solid 5px;
   margin: 0 12px 12px 0;
}


.images-wrap:hover{
   border: #e2494c solid 5px;
}

.press-wrap{
   float: left; display: inline;
   width: 270px; 
   border: #41a0b4 solid 5px;
   margin: 0 12px 12px 0;
}


.press-wrap:hover{
   border: #e2494c solid 5px;
}

/********* Calendar ***************/

.calendar-event{   float: left; display: inline;width: 100%; border-bottom: #DDD4B9 dotted 1px; padding: 10px 0; }
.calendar-date-from{  float: left;    font-size: 30px; font-weight: bold;
   font-family: Steelfish-Regular; text-transform: uppercase;    color: #e2494c; font-size: 32px; font-weight: normal;
   display: inline;
   width: 120px;}

.calendar-event .event-details{ 
     float: left; display: inline; width: 300px;}

.calendar-event .event-details h3{margin:0;  color: #41a0b4; font-size: 29px; font-weight: normal; font-family: Steelfish-Regular;} 

/***************NEWS *********************/
.post {
 float: left; width: 280px;
   margin: 15px 0;
}

.post .day{
   color: #e2494c; font-size: 34px; font-weight: bold;
   font-family: Steelfish-Regular; text-transform: uppercase;
   float: left; display: inline;
   width: 55px;
}

.post .year{
   color: #ddd4b9; font-size: 29px; font-weight: normal;
   font-family: Steelfish-Regular; text-transform: uppercase;
   float: left; display: inline;
   
   -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 

}

.post h3{
   color: #41a0b4; font-size: 32px; font-weight: normal;
   font-family: Steelfish-Regular;
   float: left; display: inline; width: 180px;
   margin: 0 0 0 5px;
}

.post h3 a{
   color: #41a0b4; text-decoration: none;
}
.post .text{
   color: #494947;
   float: left; display: inline; width: 280px;
   margin: 15px 0;
}

/******* banner wrap ******/

.index-top-banner{
   background: url("uploads/images/bannerit/jopet-banneri.png") no-repeat;

   float: left; display: inline; width: 430px; height: 122px; margin:  35px 0;
}

.index-top-banner #banner{

   float: left; display: inline; width: 154px; height: 122px; margin: 0 0 0 270px;

}

/***************video *********************/

.video-box-wrap{
   float: left; display: inline; width: 195px; height: 120px; margin: 15px 8px;
}
.video-box {
   float: left; display: inline; width: 185px; height: 115px; 
   overflow: hidden;
   border: 5px #41a0b4 solid;
   
   background: #494947;
   
   -moz-box-shadow: 4px 4px 0px #e2494c;
   -webkit-box-shadow: 4px 4px 0px #e2494c;
   box-shadow: 4px 4px 0px #e2494c;
	
	/* For IE 8 */   
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
.video-box:hover {
   border: 5px #41a0b4 solid;
      
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   
   margin: 4px 0 0 4px;
	
	/* For IE 8 */   
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

.all-vid{
   color: #41a0b4;
   float: left; width: 420px;margin: 20px 0 15px 0; 
   text-align: right;
   font-family: Steelfish-Regular; font-size: 25px;

}
.all-vid-page{
   color: #41a0b4;
   float: left; width: 580px;margin: 20px 0 15px 0; 
   text-align: left;
   font-family: Steelfish-Regular; font-size: 25px;

}

.all-vid a, .all-vid-page a {color: #41a0b4; text-decoration: none;}
.all-vid a:hover, .all-vid-page a:hover{color: #e2494c; }

.all-vid a span{color: #e2494c;}


.all-news a{
   background: #41a0b4; padding: 15px 0;
   float: left; width: 280px;margin: 0; 
   text-align: center;
   font-family: Steelfish-Regular; font-size: 25px;
  color: #FFF; text-decoration: none;
}

.all-news a:hover{
   background: #e2494c; 
}

/************** FB BOX ****************/

#fb-box {
   background: #ddd4b9;
   float: left; width: 410px;margin: 25px 0 55px 0; padding: 10px;
}


#fb-box h3{
   background: url("uploads/layout/face-header.png") no-repeat;
   width: 280px;
   margin: 0 0 10px -26px; padding: 26px 20px;
   color: #faf8ee;font-family: Steelfish-Regular; font-size: 40px; font-weight: normal; text-transform: uppercase; 
}



/**********************FOOTER******************************/


#footer {
   margin: 45px auto 20px auto; padding: 10px 0 20px 0; width: 920px;
   color: #b0a278;
   border-top: #ddd4b9 solid 5px;
   font-size: 10px;  text-transform: uppercase;
}
#footer li{
   float: left; display: inline; padding: 0 5px;
}
#footer li a{
   color: #b0a278;
   font-size: 10px;  text-transform: uppercase;
}



.left{
   float: left; display: inline;
   width: 400px;
}

.left .text{
   float: left; display: inline;
   width: 220px; margin: 10px 0 0 0;
}

.left .image{
   float: left; display: inline;
   width: 100px; margin: 0 0 0 0;
}

.center{
  float: left; display: inline;
  background: #ddd4b9 url("uploads/layout/up-arrow.png") no-repeat center 25px;

  height: 60px;
  -moz-border-radius:75px;
  -webkit-border-radius: 75px;
  width: 60px;
  margin: -45px 0 0 30px;
  
  border: solid #faf8ee 6px;
  overflow: hidden;
  }
.center:hover{
  background: #C4BA9B url("uploads/layout/up-arrow.png") no-repeat center 25px;
  }
  
  
.center a {display: block;padding: 80px 0 0 0;}

  
.right{
   float: right; display: inline;
   width: 300px; #width: 330px;
   margin: 8px 0 0 0;
   text-align: right;
}






/*********************** Clears etc ******************/

.clear {
   clear: both;
}


/***********************GoogleMaps******************/
#map{
   width:235px; height:235px;
}




/***************FORM*******************/

.inputwrap {
   float: left; clear: left;
   padding: 5px 0px 3px 0; width: 580px;
}
.inputwrap label{
   float: left; width: 160px;
}
.inputwrap input {
   float: left;
   padding:10px 5px; width: 410px;
   background-color:#C9C2A3;
   border:0;
   color:#FFFFFF;
}
.inputwrap textarea{
   float: left;
   padding:10px 5px; width: 410px;
   background-color:#C9C2A3;
   border:0;
   color:#FFFFFF;
}
.submit{
   float: left;clear: left;
   padding: 0;width: 580px;
}

.submit input{
   float: right;
   padding:8px 15px 8px 15px;
   background-color:#E2494C;
   color:#fff;font-family: Steelfish-Regular; text-transform: uppercase; font-size:20px;
   border:0; margin: 0 0 30px 0;
   cursor:pointer;
}

/************ALBUMS***********************/

.album{
	width:580px;
	float: left;
	margin:0 0 10px 0;
	padding:5px;
        border-bottom:#2a2a2a dotted 1px;
	}
	
.album h4{

   color: #e2494c; font-size: 26px;
   font-family: Steelfish-Regular; text-transform: uppercase;
        border: none;
        margin: 0 0 15px 0;
	}
	
.album h5{
	font-size:12px;
	font-family:"Helvetica Neue", Helvetica, Arial, sans;
	text-transform:uppercase;
	color:#666;
        font-weight:normal;
	}
.album h5 span{
	color:#666;
        font-weight:bold;
	}

.album .image{
        width: 190px
        height: 190px;
        overflow: hidden;
        margin: 5px 35px 5px 0;
        float:left;
        border:#999 solid 1px;
        display:inline;
	}

.album .image img{
        max-width: 190px;
	}

.album .text{
	font-size: 12px;
	/*text-transform:uppercase;*/
	width: 320px;
        margin: 5px 0 5px 0;
        float:left;
}

/******/

.album-cover-wrap{
   float: left; display: inline; width: 110px; height: 115px; margin: 10px 35px 20px 0;
}
.album-cover {
   float: left; display: inline; width: 120px; height: 120px; 
   overflow: hidden; position: relative;
   border: 5px #41a0b4 solid;
   
   background: #494947;
   
   -moz-box-shadow: 4px 4px 0px #e2494c;
   -webkit-box-shadow: 4px 4px 0px #e2494c;
   box-shadow: 4px 4px 0px #e2494c;
	
	/* For IE 8 */   
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
.album-cover img{
   width: 120px;
}
/*
.album-cover:hover {
   border: 5px #41a0b4 solid;
      
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   
   margin: 4px 0 0 4px;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}*/

.boxcaption{
	float: left;
	position: absolute;
	background: #000;
	color: #FFF;
	height: 100%;
	width: 100%;
	top: 150px;
	opacity: .85;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
 }
 
 .boxcaption h3{
   margin: 12px 5px 0 10px; 
   color: #e2494c; font-size: 22px; font-weight: normal;
   font-family: Steelfish-Regular; text-transform: uppercase;
 }
 .boxcaption h3 a{
   text-decoration: none;
 }


/* End of 'jope' */