@charset "iso-8859-1";
/* CSS Document
Fin Masiko Oy CSS
*/
* {
margin: 0;
padding: 0;
border: 0;
outline:none; /*mozilla fix, dotted line remove */
} 
body {
background: #cbd0e8 url(images/tausta_sininen.jpg) repeat-x;
}
hr {
border: 0;
margin: 0 auto;
background-color: #c2d0f8;
height: 2px;
width: 90%;
}
#sivu {
width: 679px;
margin: 0 auto;
/*background: url(images/taustakuva_valko.png) top left repeat; */
}
#header {
height: 153px;
}
#valikko {
text-align:center;
margin:0 auto;
height:30px;
border: solid #1d375b 1px;
border-top:0;
border-bottom:0;
background:url(images/valikkotausta.png) top left repeat-x;
}
#valikko_wrap {
height:7px;
background:url(images/valikko_wrap.png) top left repeat-x;
}
#main {
background: url(images/taustakuva_valko.png) top left repeat;
min-height:500px;
padding: 1px;
height:auto !important;
height:500px;
/* IE fix */
}
#sisalto {
margin: 5px 5px 5px 5px;
}
#footer {
position: relative;
margin: 10px auto;
height: 80px;
text-align:center;
width:679px;
background: url(images/taustakuva_valko.png) top left repeat;
}
#takatausta {
margin: 0 auto;
width: 1000px;
background:url(images/takatausta7.jpg) no-repeat;
}
/* tarkistus vaan mustalle taustalle
#tausta {  
margin: 0 auto;
width: 1000px;
background:#000 no-repeat;
}
*/


/* ------------  banneritilat  ---------- */


#tarjous_oikea{
position: relative;
float: right;
top: 33px;
right: 10px;
width: 145px;
height: 460px;
}
#tarjous_vasen{
text-align:center;
position: relative;
float: left;
top: 33px;
left: 19px;
width: 136px;
height: 511px;
}


/* ------------ etusivun ulkoasu  ---------- */

#kielet_boxi{
position: relative;
width: 150px;
height: 70px;
background: url(images/taustakuva_valko.png) top left repeat;
}
#kielet{
position: relative;
left: 5px;
top: 5px;
width: 140px;
height: 60px;
background: url(images/taustakuva_valko.png) top left repeat;
}
#etusivu_boxi1{  /* sliderin div */
top:5px;
text-align:left;
position: relative;
height: 175px;
}
#kauha{  /* kauhasivun teksiboxi */
float:right;
position: relative;
right: 20px;
height: 500px;
width: 250px;
}
#validfloat{
position: relative;
}
#keskitys{
text-align:center;
margin:0 auto;
}
#marginaali{
margin: 0 0 0 50px;
}

/*fontit*/

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
line-height: 20px;
text-align: center;
margin: 50px;
color: #333333;
}
h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
line-height: 20px;
text-align: center;
color: #333333;
}
h5 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
line-height: 20px;
text-align: left;
margin: 10px;
color: #333333;
}
h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
line-height: 20px;
text-align: center;
margin: 10px;
color: #333333;
}
h4 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: small-caps;
font-weight: normal;
font-size: smaller;
line-height: 0.8em;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-align: center;
text-indent: 0ex;
font-size:10px;
line-height: 18px;
text-align: center;
color: #333333;
}
h6 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
text-align: center;
color: #333333;
}
#sisalto p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
font-size: smaller;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-indent: 0ex;
font-size:12px;
text-align: left;
color: #333333;
}
#uutta p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
line-height: 0.8em;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-indent: 0ex;
font-size:10px;
text-align: center;
color: #333333;
}
#footer h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #333333;
text-align:center;
margin: 0px 0px 0px 0px;
font-size:16px;
}


/* kuvat */



img.vasen{ 
    float: left; 
}
img.oikea { 
    float: right; 
 }
img.keskelle {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#makeMeScrollable
{
width:100%;
height: 330px;
position: relative;
}
#makeMeScrollable div.scrollableArea *
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
#karttaboxi {
margin: 0px 0px 0px 50px;
}

/* mouseover */
.link img{
	opacity: 1.0;
	}
.link:hover img{
	opacity: 0.5;
	}
/* Lightboxi */

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox img{
width: auto;
height: auto;
}
#lightbox a img{
border: none;
}
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{
left: 0;
}
#hoverNav a{
outline: none;
}
#prevLink, #nextLink{
width: 49%;
height: 100%;
}
#prevLink {
left: 0;
float: left;
width: 63px;
}
#nextLink {
right: 0;
float: right;
width: 63px;
}
#prevLink:hover, #prevLink:visited:hover {
background: url(images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
background: url(images/nextlabel.gif) right 15% no-repeat;
}
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	;
}
#imageData{
padding:0 10px;
color: #666; 
}
#imageData #imageDetails{
width: 70%;
float: left;
text-align: left;
}	
#imageData #caption{
font-weight: bold;
}
#imageData #numberDisplay{
display: block; clear: left; padding-bottom: 1.0em;
}			
#imageData #bottomNavClose{
width: 66px; float: right;  padding-bottom: 0.7em; outline: none;
}	 	
#overlay{
position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000;
}

/* Sliderit etusivulle */

#slider1 {
    width: 667px; /* important to be same as image width */
    height: 278px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
}

#slider2 {
    width: 667px; /* important to be same as image width */
    height: 165px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
}

#slider1Content, #slider2Content {
    width: 667px; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
	margin-left: 0;
}

.slider1Image, .slider2Image {
    float: left;
    position: relative;
	display: none;
}

.slider1Image span {
    position: absolute;
	font: 12px/18px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 667px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

.slider2Image span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 667px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.slider1Image span strong, .slider2Image span strong {
    font-size: 16px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
	width: 667px !important;
}
.left {
	top: 0;
    left: 0;
	width: 200px !important;
	height: 280px;
}
.slider2Image .left {
	top: 0;
    left: 0;
	width: 178px !important;
	height: 280px;
}
.right {
	right: 0;
	bottom: 0;
	width: 200px !important;
	height: 265px;
}
ul { list-style-type: none;}