/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,header,footer { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}

/** Yleiset muotoilut, fontti **/

html, body { height: 100%; }
html { overflow-y: scroll; }

body {
	background: #063547;
	background-image: url("/tausta.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100% 100%;
	color: #000000;
	text-align: center;
	font-family: Arial, Helvetica, "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
	font-size: 14px;
	line-height: 23px;
	margin: 0;
	padding: 0;
}

h1 { font-family: Arial, Helvetica, "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-size: 23px; font-style: normal; font-variant: normal; font-weight: bold; line-height: 23px; } 
h3 { font-family: Arial, Helvetica, "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; line-height: 23px; } 
p,li { font-family: Arial, Helvetica, "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; } 
blockquote { font-family: Arial, Helvetica, "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; } 
pre { font-family: Arial, Helvetica, "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; }
a, a:link, a:visited, a:active { color: #660000; text-decoration: none; }
a:hover { text-decoration: underline; }

#Bread h1 { padding: 20px 10px 10px 15px; } /** Oikeassa syötteessä reunukset **/
#Bread h3 { padding: 20px 10px 10px 20px; } /** Oikeassa syötteessä reunukset **/
#Bread p { padding: 20px 20px 0 20px; } /** Oikeassa syötteessä reunukset **/
#Bread iframe { padding: 10px 10px 20px 10px; } /** Oikeassa syötteessä reunukset **/
#Bread ul,ol,li { margin-left: 10px; padding: 10px 20px 0 20px; } /** Sisennys luetteloille **/

#BreadWide h1 { padding: 20px 10px 10px 15px; } /** Oikeassa syötteessä reunukset **/
#BreadWide h3 { padding: 20px 10px 10px 20px; } /** Oikeassa syötteessä reunukset **/
#BreadWide p { padding: 20px 20px 0 20px; } /** Oikeassa syötteessä reunukset **/
#BreadWide iframe { padding: 10px 10px 20px 10px; } /** Oikeassa syötteessä reunukset **/
#BreadWide ul,ol,li { margin-left: 10px; padding: 10px 20px 0 20px; } /** Sisennys luetteloille **/


/** Rakenne **/

#Primary {
	position: relative; margin: 0 auto; 
	width: 1000px; padding: 0; text-align: left;  
	background: #ffffff;
	-webkit-box-shadow: 0 0 30px #000;
	-moz-box-shadow: 0 0 30px #000;
	box-shadow: 0 0 30px #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

#RibbonBanner { 
	background: #000;
	color: #fff;
	font-weight: bold;
	margin-bottom: 1px;
	padding: 5px;
	font-size: 18px;	
	
}

#RibbonBanner a { color: #fff; }

#Header {
	position: relative;
	background-color: #ffffff;
	width: 998px;
	height: 210px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 20px;

}

#Contents {
	position: relative;
	margin: 0 auto;
	width: 998px;
	background: #EEE;
}

#Bread { /** Oikea palsta **/
	position: relative; 
	z-index: 1; 
	width: 678px; 
	min-height: 790px; 
	margin: 0 0 0 320px; 
	padding: 0; 
	padding-bottom: 10px;
	background: #FFFFFF;
	border-left: 1px dashed #104a62;
	height: 100%;
}
#BreadWide { /** Oikea palsta leveä **/
	position: relative; 
	z-index: 1; 
	width: 998px; 
	min-height: 750px; 
	margin: 0 ; 
	padding: 0; 
	background: #FFFFFF;
	border-left: 0;
	height: 100%;
}



/** Navigoinnin määrittelyt **/

#Up {
	  position: relative;
	  display: block;
	  visibility: visible;
      width: 100%;
	  max-width: 998px;
      margin: 0 auto;
      padding: 0;
      background-color: #660000 ;
	  text-align: center;
	  z-index: 10;
	  }
#Up ul.UpCategories { list-style: none; display: inline-block; margin: 0; padding: 0; }

#Up ul.UpCategories li {
      float: left;
	margin: 0;
	padding: 0;
  }
#Up ul.UpCategories li a {
      display: block;
      padding: 4px 13px;
	margin: 0;
      text-decoration: none;
      font-weight: bold;
      color: #fff;
      border-right: 1px solid #ccc; }
#Up ul.UpCategories li a:hover {
      color: #104a62;
      background-color: #ddd ; }
#Up ul.UpCategories li a.UpLastNavigationItem { border: 0; }




/** Hinnasto **/

#Hinnasto { 
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	border: 3px double #330000;
	width: 573px;
	position: relative;
} 
#Hinnasto dl { 
	width: 100; 
	overflow: hidden; 
	padding: 10px;
	margin: 0;
}

#Hinnasto dt {
	float: left;
	width: 70%;
	padding: 0;
	margin: 0;
}

#Hinnasto dd { 
	float: right;
	width: 30%;
	padding: 0;
	margin: 0;
}


/** ID:t **/

#Logo { position: relative; margin: 0 auto; height: 225px; margin-top: 0px; }
#vuokraapalju { width: 90%; display: block; margin-left: auto; margin-right: auto; margin-top: 20px; }
#Video { width: 573px; height: 350px; border: 0; margin: 0 auto; display: block; margin-bottom: 15px; }
#FBwrapper { float: left; }
#Kalenteri { position: relative; max-width: 900px; display: block; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 30px; }
#Kalenteri img { padding: 0; }
#Googlemaps { width: 500px; height: 400px; border: 0; display: block; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 15px; }
#Galleria { width: 90%; position: relative; padding-bottom: 76%; border: 0; display: block; margin-left: auto; margin-right: auto; margin-top: 15px; }
#Galleria img { width: 100%; max-width: 980px; }
#Giframe { width:100%; height:100%; position: absolute; top:0; left:0; border: 0; margin: 0 auto;}
#Virhe { display: none; visibility: hidden; }
#footer { margin-top: 2px; color: #fff; }

/** luokat **/ 


.red { color: red; }

/** Responsive CSS **/

/** 1. break point = Kun näytön leveys alittaa 1200 px, vasen Facebook-palkki katoaa. **/

@media screen and (max-width: 1000px) {

html { overflow-x: hidden; }

#Primary {width: 100%; max-width: 1000px; }
#Header, #Contents { width: 100%; max-width: 998px; }
#Bread { width: 100%; max-width: 998px; margin: 0; border: 0;}
#BreadWide { width: 100%; max-width: 998px; margin: 0; border: 0;}

#FBwrapper { display: none; visibility: hidden; }
#Galleria { width: 90%; position: relative; padding-bottom: 76%; border: 0; display: block; margin-left: auto; margin-right: auto; margin-top: 15px; }
#Galleria img { width: 100%; max-width: 980px; }

}

@media screen and (max-width: 700px) {

body{ /** Tekstikoko pienenee **/
	font-size: 13px;
	line-height: 19px;
		
}

#Primary {width: 100%; max-width: 700px; }
#Header, #Contents { width: 100%; max-width: 698px; }
#Bread { width: 100%; max-width: 698px; margin: 0; border: 0;}
#BreadWide { width: 100%; max-width: 698px; margin: 0; border: 0;}
#FBwrapper { display: none; visibility: hidden; }
#Galleria { width: 90%; position: relative; padding-bottom: 76%; border: 0; display: block; margin-left: auto; margin-right: auto; margin-top: 15px; }
#Galleria img { width: 100%; max-width: 680px; }

#Up { border-left: 0; border-right: 0; max-width: 698px; }
#Up ul.UpCategories { width: 100%; max-width: 698px; margin: 0; padding: 0;}
#Up ul.UpCategories li { float: none; max-width: 698px; display: inline; margin: 0; padding: 0; }
#Up ul.UpCategories li a { width: 100%; max-width: 698px; border-right: 0; border-bottom: 1px solid #ccc; margin: 0; padding: 5px 0 5px 0;} 

}

@media screen and (max-width: 600px) {

#Kalenteri { display: none; visibility: hidden;  }
#Virhe { display: inline; visibility: visible; }
#Galleria { width: 90%; position: relative; padding-bottom: 76%; border: 0; display: block; margin-left: auto; margin-right: auto; margin-top: 15px; }
#Galleria img { width: 100%; max-width: 580px; }

@media screen and (max-width: 400px) {

/** ID:t **/

#Logo { width: 95%; height: auto; }
#Video { width: 95%; height: auto; }
#Googlemaps { width: 95%; height: auto; }
#Hinnasto { width: 95%; }
#Header {height: auto; }
#Galleria { width: 90%; position: relative; padding-bottom: 76%; border: 0; display: block; margin-left: auto; margin-right: auto; margin-top: 15px; }
#Galleria img { width: 100%; max-width: 380px; }

}