/* T A U S T A T */
body {
  background-color: #9e6b3c;
  background: url(taustat/ruskea.jpg) repeat top left;
	margin: 0;
	padding: 0;
}

main::after,
footer::after {
  content: "";
  display: block;
  clear: both;
}

main > :last-child {
  margin-bottom: 0;
  padding-bottom: 20px;
}

.wrap {
  text-align: center;
}

.ylatunniste {
  padding-bottom: 30px;
}

#yla {
    background: url(taustat/yla.jpg) no-repeat top left;
    margin: 0;
    padding: 0;
    border: 0;
    width: 900px;
    height: 135px;
}

#sisalto,
.ylatunniste,
.footerinfo {
  background: url(taustat/tekstitausta.jpg) repeat-y top left;
  margin: 0 auto;
  padding: 0;
  border: 0;
  width: 900px;
}

#ala {
  background: url(taustat/ala.jpg) no-repeat top left;
  margin: 0 auto;
  padding: 0;
  border: 0;
  width: 900px;
  height: 108px;
}

img.soikio {
    border: 0;
    margin: 0 0 0 0px;
    padding: 0;
    width: 550px;
    height: 360px;
}

/*N A V I G O I N T I */
#navi {
  width: 209px;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
}

a.navi {
    margin-bottom: 8px;
    padding: 5px 0 5px 0;
    width: 200px;
    height: 20px;
    display: block;
    border: 0;
    background-color: #9e6b3c;
    background-image: linear-gradient(to bottom, #b48456, #9e6b3c);
    border-radius: 5px;
    font-family: Georgia, Times, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

a.navi:hover {
    background-color: #B88556;
    background-image: linear-gradient(to bottom, #CE9E70, #B88556);
    color: #ffff33;
}

a.navi:active {
    background-color: #855223;
    background-image: linear-gradient(to bottom, #9B6B3D, #855223);
}

/* T E K S T I T */
h1 {
    font-family: Georgia, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #663300;
    margin: 0 80px 0 250px;
    text-align: left;
}

h2 {
    font-family: Georgia, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: normal;
    font-style: italic;
    letter-spacing: 1px;
    color: #663300;
    margin: 30px 80px 0 250px;
    text-align: left;
}

h3 {
    font-family: Georgia, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 0px;
    color: #663300;
    margin: 30px 80px 10px 250px;
    text-align: left;
}

h4 {
    font-family: Georgia, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    letter-spacing: 0px;
    color: #663300;
    margin: 10px 80px 0 250px;
    text-align: left;
}

p {
    font-family: Georgia, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000000;
    margin: 15px 90px 20px 250px;
    text-align: left;
    line-height: 20px;
}

p.lainaus {
    font-style: italic;
    color: #663300;
    font-size: 13px;
}

p.ala {
    font-family: Georgia, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
    margin: 0;
    padding: 0px 0 0 0;
    line-height: 24px;
}

.footerinfo .yhteystiedot {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footerinfo .yhteystiedot li {
  display: inline-block;
  font-family: Georgia, "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0px 0 0 0;
  line-height: 24px;
}

a {
    color: #663300;
    text-decoration: underline;
}

a:hover {
    color: #000000;
}

a:visited {
    text-decoration: none;
    color: #663300;
}

a.name : {
    text-decoration: none;
}

a.webdesign {
    font-family: Georgia, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #666666;
    text-decoration: none;
    padding, margin: 0;
}

a.webdesign:hover {
    color: #ffff33;
}

table {
    font-family: Georgia, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000000;
    margin: 15px 90px 20px 250px;
    text-align: left;
    line-height: 20px;
    border: 0;
    max-width: 550px;
    width: 100%;
}

table.kapea {
    margin: 15px 90px 20px 150px;
    width: 350px;
}

table.kapea_2 {
    margin: 15px 0px 20px 150px;
    width: 350px;
}

td {
    margin: 0;
    padding: 5px 10px 0 0;
    border-bottom: 1px #cc9966 dashed;
}

td.ei_viivoja {
    margin: 0;
    padding: 0px 10px 0 0;
    border: 0;
}

td.oikea {
    text-align: right;
    padding: 5px 0 0 0;
}

td.oikea2 {
    text-align: right;
    width: 150px;
    padding: 5px 0 0 0;
}

ul,
ol {
    font-family: Georgia, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000000;
    margin: 15px 90px 20px 250px;
    text-align: left;
    line-height: 16px;
}

li {
    margin: 9px 0 0 0;
}

img.kehys {
    border: 2px solid #CC9966;
    margin: 5px 0 5px 0;
}

img.kehys2 {
    border: 2px solid #CC9966;
    margin: 5px 70px 5px 5px;
    float: right;
}

img.kehys3 {
    border: 2px solid #CC9966;
    margin: 5px 10px 5px 20px;
}

img.kehys4 {
    border: 2px solid #CC9966;
    margin: 25px 170px 5px 5px;
    float: right;
}

img.kehys5 {
    border: 2px solid #CC9966;
    margin: 5px 10px 5px 0px;
}

img.iso {
    border: 2px solid #CC9966;
    margin: 5px 10px 5px 115px;
}

img.ruokalista {
    border: 0;
    margin: 0 5% 0 0;
    padding: 0;
    float: right;
}

/*KUVAGALLERIA-SIVU*/
#valokuvat {
    margin: 15px 100px 0 220px;
    border: 0;
    font-family: Tahoma, Verdana, Arial;
    font-size: 10px;
    color: #333333;
}

img {
    border: 0;
}

#lightbox {
    background-color: #eee;
    padding: 10px;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
    margin: 0 0 0 0px;
}

#lightboxDetails {
    font-size: 0.7em;
    padding-top: 0.4em;
    font-family: Tahoma, Verdana, Arial;
}

#lightboxCaption {
    float: left;
}

#keyboardMsg {
    float: right;
}

#closeButton {
    top: 5px;
    right: 5px;
}

#lightbox img {
    border: none;
    clear: both;
}

#overlay img {
    border: none;
}

#overlay {
    background-image: url(overlay2.png);
}

* html #overlay {
    background-color: #333;
    background-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

#navi-menu {
	display: none;
}

#headerLinkit {
	display: block;
}

.hevoset {
  max-width: 480px;
	margin-left: 250px;
}

.infolaatikko {
	margin-bottom: 30px;
}

.infotieto {
  max-width: 60%;
  float: left;
}
.infokuva {
	float: right;
	width: 40%;
}
.infotieto h2,
.infotieto h3 {
  margin: 0 0 20px;
}

.infotieto20 {
	float: left;
	width: 20%;
}

.infotieto25 {
	float: left;
	width: 25%;
}

.infotieto80 {
	float: left;
	width: 80%;
}

.infotieto20 p, .infotieto25 p, .infotieto80 p {
	margin: 0;
}

.infotieto p {
	margin: 0;
}

.float-none {
	clear: both;
}

.kehys {
	margin: 0;
	float: none;
	width: 80%;
	height: auto;
}

section.ohjelma {
	margin-bottom: 10px;
}

section.ohjelma p {
	margin: 0;
}

.vasen-margin {
	margin: 15px 100px 20px 220px;;
}

.formBox {
	margin: 15px 90px 20px 250px;
}

.formBox .formInput {
	text-align: left;
	margin-bottom: 10px;
}

.formBox .formInput:last-child {
  margin-bottom: 0;
  padding-bottom: 30px;
}

.formBox .formInput .field-name {
  display: inline-block;
  width: 150px;
}

.formBox .formInput p {
	margin: 0;
}

textarea {
  width: 100%;
}

/* S K A A L A U S */
@media screen and (max-width: 900px) {
	.vasen-margin {
		margin: 0;
	}

    #navi {
        display: block;
        width: 100%;
    }

	#navi-menu {
		display: block;
	}

	#headerLinkit {
		display: none;
	}

  #navi .navi {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
  }

	#sisalto,
  .ylatunniste,
  .footerinfo {
		display: block;
    margin: auto;
    width: 100%;
    height: auto;
    background-size: 100%;
	}

  #yla {
    height: 100%;
    background-size: cover;
  }

  #yla, #ala {
    display: block;
    width: 100%;
    margin: auto;
  }

  #ala {
    background-size: 100%;
  }

    img.soikio {
		width: 70%;
  		height: auto;
    }

	p,h1,h2,h3,h4,h5,h6,ul,ol {
		margin: 15px 90px 20px 100px;
	}

  h1 {
    margin-top: 0;
  }

	div#valokuvat {
		margin: 15px 30px 0 30px;
	}

	p.ala {
		text-align: center;
		margin: 0;
	}

  .hevoset {
    max-width: 80%;
    margin: 0 auto;
  }

  table.tunnit,
  table.leirit {
    margin: 0 auto;
    max-width: 580px;
    width: 100%;
  }

	.formBox {
		margin: 0 auto;
		width: 70%;
	}

}

@media screen and (max-width: 680px) {
	.vasen-margin {
		margin: 0;
	}

	#navi {
		display: block;
		width: 100%;
	}

	#headerLinkit {
		display: none;
	}

	#navi-menu {
		display: block;
	}

	#navi .navi {
		display: block;
    margin-left: auto;
    margin-right: auto;
		width: 95%;
	}

	#sisalto,
  .ylatunniste,
  .footerinfo {
		display: block;
		margin: auto;
		width: 100%;
		height: auto;
		background-size: 100%;
	}

  #yla {
    height: 100%;
  }

	#yla, #ala {
		display: block;
		width: 100%;
		margin: auto;
		background-size: 100%;
	}

	img.soikio {
		width: 70%;
		height: auto;
	}
	p,h1,h2,h3,h4,h5,h6,ul,ol {
		margin: 15px 35px 20px 35px;
	}

  h1 {
    margin-top: 0;
  }

	img.kehys2, img.kehys3, img.iso {
		margin: 0;
		float: none;
		width: 80%;
		height: auto;
	}

	img.ruokalista {
		display: none;
	}

	div#valokuvat {
		margin: 15px 30px 0 30px;
	}

	p.ala {
		text-align: center;
		margin: 0;
	}

	.formBox {
    margin: 0 auto;
		width: 80%;
	}

	.formBox .formInput input,
  .formBox .formInput select,
  .formBox .formInput textarea {
		width: 90%;
	}

  table.tunnit,
  table.leirit,
  table.tunnit tbody,
  table.leirit body,
  table.tunnit tr,
  table.leirit tr,
  table.leirit td,
  table.tunnit td {
    display: block;
    width: 100%;
  }

  table.kapea,
  table.kapea_2,
  table.tunnit,
  table.leirit {
    max-width: 80%;
    margin: 0 auto;
  }

  table.tunnit tr,
  table.leirit tr {
    border-bottom: 1px #cc9966 dashed;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  table.tunnit td,
  table.leirit td {
    border-bottom: none;
    text-align: left;
  }

  table.tunnit td {
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
  }

}

/* P E R H O S E T   J A   K U V I T U S  */
img.oikea {
}

img.oikea2 {
}

img.oikea3 {
  margin: 0 50% 0 0;
}

img.vasen {
}

img.vasen2 {
}

img.vasen3 {
}

@media screen and (min-width: 768px) {
  img.oikea {
    float: right;
    margin: 0 50px 0 0;
  }

  img.oikea2 {
    float: right;
    margin: 0 120px 0 0;
  }

  img.oikea3 {
    float: right;
    margin: 0 250px 0 0;
  }

  img.vasen {
    float: left;
    margin: 0 0 0 40px;
  }

  img.vasen2 {
    float: left;
    margin: -200px 0 0 70px;
  }

  img.vasen3 {
    float: left;
    margin: -350px 0 0 -20px;
  }
}