@charset "utf-8";
/* CSS Document */

html {
  font-family: "Titillium Web", "Fjalla One";
  margin:0;
}

.index_bg {
background: url("TujausValokuvat/portaali.png") no-repeat center center fixed;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.tervetuloa_bg {
background: url("TujausValokuvat/demo.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.omatvaraukset_bg {
background: url("TujausValokuvat/demo.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.kayttajatiedot_bg {
background: url("TujausValokuvat/yhteys.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.lomake_bg {
background: url("TujausValokuvat/edut.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
	padding-bottom: 150px;
}

#ylapalkki {
	height: 90px;
	width: 750px;
	background: rgba(46,90,115,0.95);
	position: fixed;
	top:0;
	right:0;
	z-index: 4;
}

.index_bg #ylapalkki {
	visibility: hidden;
}

#asiakaslogo {
	position:fixed;
    height: 70px;        z-index: 0;
	top: 20px;
	left:20px;
	border-radius: 6px;
}

.index_bg #asiakaslogo {
	visibility:hidden;
}

.index_bg #vuokraamologo {
	visibility: visible;
	position:relative;
	height: 80px;
	z-index: 3;
	border-radius: 18px;
	top: 0px;
}

.index_bg #eiLogoa {
	position:fixed;
	width: 340px;
	top: 210px;
	left: 50%; transform: translate(-50%);
	text-align:center;
	z-index: 3;
}

.tervetuloa_bg #eiLogoa, #vuokraamologo {
	visibility:hidden;
}

.omatvaraukset_bg #eiLogoa, #vuokraamologo {
	visibility:hidden;
}

.kayttajatiedot_bg #eiLogoa, #vuokraamologo {
	visibility:hidden;
}

.lomake_bg #eiLogoa, #vuokraamologo {
	visibility:hidden;
}

.overlay {
 	position: absolute;
	display:none;
	z-index: -1;

    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.7);

    /* stretch to screen edges */
    top: 0;
	left: 0;
    bottom: 0;
    right: 0;
}


h1 {

}

h3{
	text-align:center;
}

h2{
	padding-left: 4px;
	font: Titillium Web;
	color: #3b7494;
}

#tarkemmattiedotId {
height: 10px;}

.login {
	padding-right:4px;
	padding-top:8px;
}

#tervetuloaOtsikot, #kirjautuminenOtsikko {
	margin-bottom: 30px;
	display: inline-block;
}

#login{
	background-color: white;
    padding: 20px;
	border-radius: 25px;
	padding-top: 20px;
	padding-bottom: 50px;
	position: absolute;
	top: 185px;
	left: 50%; transform: translate(-50%);
	text-align: center;
	width: 300px;
}

#aloita{
	margin-top: 30px;
	float: bottom;
}

#jarjestelmavalinta {
  width: 183px !important;
}

#jarjvalDiv{
  display:none;
}

input[type=text], select {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    /*width: 183px;*/
}

input[type=password], select {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    width: 183px;
}

input[type=submit] {
    width: 183px;
	  background-color: grey;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #3b7494;
}

#inputEmail {
  width:183px !important;
}

#unohditko {
	color: #3b7494;
	text-decoration: none;
}

#unohditko:hover {
	color: black;
}

#molemmatLaatikot {
	width: 1530px;
    padding: 20px;
	border-radius: 25px;
	margin-top: 100px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: auto;

}

/********************* kolmas boksi *****************/

#reunusUusiboksi {
position:relative;
	padding: 20px;
	max-width: 1444px;
	/*width: 562px;*/
	height: 430px;
	background: rgba(255,255,255,0.6);
	border-radius: 25px;
	margin: 15px;
	z-index: 1;
}

#varauksesiDiv2 {
	/*position: absolute;*/
	max-height: 390px;
	width: 1408px;
    background-color: white;
	padding: 20px;
	opacity: 0.95;
	border-radius: 25px;
	/*margin: auto;*/

}

#div_table_varauksesi2{
	background-color: white;
	width: 1398px;
	max-height: 300px;
	overflow-y: scroll;
	clear: both;
	/*overflow: auto;*/
}

#table_varauksesi2{
    background-color: white;
	border-radius: 25px;
	width: 1380px;
	height: 300px;
	border: 1px;
}

/****************************************************/


#varauksesiDiv {
	/*position: absolute;*/
	max-height: 390px;
    background-color: white;
	padding: 20px;
	opacity: 0.95;
	border-radius: 25px;
	/*margin: auto;*/
}

#aiemmatvarauksesiDiv {
	position: relative;
	max-height: 390px;
	background-color: white;
    padding: 20px;
	opacity: 0.95;
	border-radius: 25px;
	margin: auto;
}

#reunusVarauksesi {
	position: absolute;
	padding: 20px;
	max-width: 680px;
	/*width: 562px;*/
	height: 430px;
	background: rgba(255,255,255,0.6);
	border-radius: 25px;
	margin: 15px;
	z-index: 1;
}

#reunusAiemmatvarauksesi {
	position: relative;
	padding: 20px;
	width: 680px;
	height: 430px;
	background: rgba(255,255,255,0.6);
	border-radius: 25px;
	left: 50%;
	margin-top:30px;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	z-index: 1;
}

#molemmatLaatikotKayttaja{
	margin-top:120px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
}

#kayttajaDiv {
	top: 15px;
	background-color: white;
	opacity: 0.95;
    padding: 20px;
	border-radius: 25px;
	width: 800px;
	float: top;
}

#kirjautuminenDiv {
	top: 150px;
	background-color: white;
	opacity: 0.95;
    padding: 20px;
	border-radius: 25px;
	width: 800px;
	margin: 15px;
	float: bottom;
}

#omatvarauksetDiv {
    background-color: white;
	max-height: 390px;
	padding: 20px;
	opacity: 0.95;
	border-radius: 25px;
	width: 520px;
	margin: auto;
}

#reunusOmatvaraukset {
	width: 620px;
	height: 475px;
	background: rgba(255,255,255,0.6);
	border-radius: 25px;
	z-index: -1;
	margin:auto;
	padding-top: 30px;
	padding-left: 2px;
}

#lomake1Div {
	background-color: white;
	position: relative;
	top: 100px;
	/*left:50%; transform: translate(-50%);*/
	padding: 40px;
	opacity: 0.98;
	border-radius: 15px;
	width: 524px;
	margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 150px;
}

#lomake2Div {
	background-color: white;
	position: relative;
	top: 0px;
	padding: 40px;
	opacity: 0.98;
	border-radius: 15px;
	width: 524px;
	margin: auto;
}

#uusivaraus, #etsi_kaikkivarauksesi, #etsi_omatvarauksesi {
	opacity:1;
	width: 120px;
	margin-left: 4px;
	margin-bottom: 20px;
	margin-top: 15px;
	margin-right: 20px;
	float:right;
}

#table_varauksesi, #table_aiemmatvarauksesi, #table_omatvaraukset {
    background-color: white;
	border-radius: 25px;
	width: 620px;
	height: 300px;
	border: 1px;
}

#molemmatTarkemmat{
	position: absolute;
	top: 50%; left:50%; transform: translate(-50%,-50%);
	z-index: 50;
}

@media screen and (max-height: 800px) {

	#molemmatTarkemmat{
		position: absolute;
		top: 150px; left:50%; transform: translate(-50%);
		z-index: 50;
	}
}

#tarkemmatTiedotDiv {
	display:none;
	/*position: fixed;*/
	/*top:15%;
	left: 25%;*/
	background-color: white;
	border: 20px solid rgba(5,5,5,0.6);
    padding: 20px;
	border-radius: 25px;
	width: 800px;
	/*position:relative;
	top:150px;
	/*z-index: 3;*/
}

.table_tarkemmatTiedot {
	background-color: white;
	border-radius: 25px;
	border: 1px;
}

#div_table_tarkemmatTiedotPysty {

	height: 320px;
	display: none;
}

#tablePysty {
	height:600px;
}

#div_table_tarkemmatTiedotVaaka {
	width: 800px;
	display: table-row;
}

#tableVaaka {
	width: 800px;
	height: 280px;
}

#tarkemmatTiedotDiv td {
	width: 200px;
	max-width: 250px;
}

#div_table_varauksesi, #div_table_aiemmatvarauksesi, #div_table_omatvaraukset {
	background-color: white;
	max-height: 300px;
	overflow-y: scroll;
	clear: both;
	/*overflow: auto;*/
}

#table_kayttajatiedot {
	width:800px;
	text-align: left;
}

button {
	color: white;
	border: 0px;
	background-color: transparent;
	font-size: 20px;
	font-weight: bold;
}

button:hover{
	color: #3b7494;
}
#kirjauduUlos:hover{
	background-color: #3b7494;
}

#uusivarausNappi{
	position: fixed; top: 50px; right: 570px;
}

#omatvarauksetNappi{
	position: fixed; top: 50px; right: 340px;
}

#kayttajaNappi{
	position: absolute; width: 270px; height: 50px; text-align: center; vertical-align:center; top: 38px; right: 60px; /*right: 90px;*/
}

#kirjauduUlos {
	 position: fixed; top: 50px; right: 30px;
 }

#suljenappi {
	float: right;
}

#muokkaa {
	position: relative;
	right: 5px;
	float:right;
	height: 30px;
	width: 130px;
	color: grey;
	background-color: white;
}

#muokkaa:hover {
	color: #5c9fc9;
}


#reunusKayttaja {
	padding: 20px;
	width: 840px;
	height: auto;
	background: rgba(255,255,255,0.6);
	border-radius: 25px;
	margin: auto;
	z-index: -1;
}

#reunusKirjautuminen {
	padding-top: 9px;
	padding-bottom: 5px;
	padding-left: 8px;
	width: 882px;
	height: 228px;
	background: rgba(255,255,255,0.6);
	border-radius: 25px;
	margin: auto;
	z-index: -1;
}

i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}


/*lomake*/

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */
   background-image: url("TujausValokuvat/nuoli.png");   /* add custom arrow */
   background-repeat: no-repeat;
   background-position: right center;
   border: 2px solid #c6c6c6;
   padding-left: 2px;
   margin:auto;
}

select::-ms-expand {
    display: none; /* hide the default arrow in ie10 and ie11 */
}

select:hover {
	background-color: #ebebeb;
}

#autoluokkaVR, #autoluokkaYA {
   width:515px;
}

#autoluokkaMA {
	width: 404px;
}

.maara {
   width:98px;
}

.sijaintiAlkaa, .sijaintiLoppuu {
   width:260px;
}

.pvmAlkaa, .pvmLoppuu {
   width:100px;
}

.kloAlkaaH, .kloLoppuuH, .kloAlkaaMin, .kloLoppuuMin {
   width:55px;
}

textarea {
	max-width: 512px;
	min-width: 512px;
}

#lomakeViitetieto, #lomakePakViitetieto {
  width:518px;
}

#lomakeEtunimi, #lomakeSukunimi, #lomakeOsoite, #lomakePostinro, #lomakePostitp, #lomakeMaa, #lomakePuh, #lomakeSapo, #lomakeReknro, #lomakeMaksaja {
	width: 248px;
}

#lomakeAsiakasyritys, #lomakeViite {
  width: 248px;
}

#lomakeProjekti, #lomakeTyovaihe, #lomakeTehtava {
	width: 160px;
}

#laheta {
	margin-top: 30px;
	margin-left: 170px;
}

#molemmatNapit {
	position:absolute;
	top:100px;
	right: 30px;
}

#karttaNappi{
	width: 100px;
	height: 20px;
	float:right;
	margin-left:5px;
	margin-right:2px;
	line-height: 2px;
}

#tiedotNappi{
	width: 100px;
	height: 20px;
	float:right;
	margin-right:5px;
	line-height: 2px;
}

#map {
	height: 700px;
	width: 100%;
}


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

	html {
		height: 100%;
	}

	button {
	font-size: 28px;
	}

	#asiakaslogo {
    top: 137px;	left: 50%; transform: translate(-50%);
	}

	#molemmatLaatikot {
		width: 700px;
		height: 1000px;
		position: absolute;
		left: 50%; transform: translate(-50%);
		/*left: 13%;*/
		top: 200px;		margin:auto;
	}

	/*#varauksesiDiv {
		position:absolute;
	}*/

    #aiemmatVarauksesiDiv {
		position:relative;
    }

	#reunusAiemmatvarauksesi {
	position: relative;
	left: 0px;
	top: 500px;
	margin-bottom: 150px;
	}

	#ylapalkki {
		height: 120px;
		width:100%;
	}

	#molemmatLaatikotKayttaja {
		margin-top: 226px;
	}

	#table_kayttajatiedot {
	width:540px;
	}

	#reunusKayttaja{
	width: 580px;
	top: 200px;
}

	#kayttajaDiv {
		width: 540px;
		top:80px;
	}

	#tarkemmatTiedotDiv {
		width: 400px;
		height: auto;
		position: absolute;

		left: 50%; transform: translate(-50%, -50%);
		z-index: 2;
	}

	#div_table_tarkemmatTiedotVaaka {
		display: none;
	}
	#div_table_tarkemmatTiedotPysty {
		display: table-row;
	}

	#tarkemmattiedotId {
		height: 30px;
		width: 250px;
	}

	#lomake1Div,#lomake2Div {
	top: 220px;	}

	#uusivarausNappi{
		position: absolute; top: 44px; right:630px; /*right: 540px;*/
	}

	#omatvarauksetNappi{
		position: absolute; top: 44px; right: 340px; /*right: 330px;*/
	}

	#kayttajaNappi{
		position: absolute; width:250px; height: 50px; vertical-align: center; top: 38px; right: 80px; /*right: 90px;*/
	}

	#kirjauduUlos {
		 position: absolute; top: 50px; right:30px;
	}

	/********************* kolmas boksi *****************/

	#reunusUusiboksi {
		width: 677px;
	}

	#varauksesiDiv2 {
		width: 636px;
	}

	#div_table_varauksesi2{
		width:638px;
	}

	#table_varauksesi2{
		width: 620px;
	}

	/****************************************************/

/* ie tai oletus */

	#karttaNappi {
		position:relative;
		top:-34px;
		right:0px;
	}

	#tiedotNappi{
		position:relative;
		right:-110px;
	}

/* chrome */

	@media screen and (-webkit-min-device-pixel-ratio:0) {

	}

/* firefox */

	@-moz-document url-prefix() {

	}

}

@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {

		#tarkemmatTiedotDiv {
		position: absolute;
		top: 350px;
		z-index: 2;
	}

	#ui-datepicker-div {

	}

}

/*@media screen and (max-width: 800px) {

	#ylapalkki {
	height: 110px;
	}

	#asiakaslogo {
	top: 130px;
	}

	#uusivarausNappi{
	position: fixed; width:120px; top: 30px; right: 500px;
	}

	#omatvarauksetNappi{
		position: fixed; width:140px; top: 30px; right: 320px;
	}

	#kayttajaNappi{
		position: fixed; width: 220px; height: 50px; vertical-align: center; top: 30px; right:70px;
	}

	#kirjauduUlos {
		 position: absolute; top: 40px; right: 20px;
	}

	#molemmatLaatikot {
		position: absolute;
		left: 0px;
	}

	#lomake1Div {
		top:44px;
	}

}*/

.tervetuloa_bg th {
	background-color: #afafaf;
	min-width:100px;
}

#table_varauksesi th, #table_aiemmatvarauksesi th, #table_varauksesi2 th{
	text-align:center;
}

.otsikkorivi {
	height:30px;
}

tr:nth-child(even) {
	background: #f7f7f7;
}
tr:nth-child(odd) {
	background: #ededed;
}

tr, td {
	max-width:190px;
	white-space:pre-wrap;
	word-wrap:break-word;
	text-align: left;
}

th, td {
	padding: 6px;
}

.kayttajatiedot_bg th {
	text-align:left;
	min-width:100px;
}

#table_varauksesi tr:hover, #table_aiemmatvarauksesi tr:hover, #table_varauksesi2 tr:hover{
	background-color: #5c9fc9;
}



/*************CLOCKPICKER**************/

.form-control {
   	width: 110px;
	height: 46px;
	padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
}






/*************DATEPICKER**************/

.kalenteri {
	width: 115px;
	height: 46px;
}

#ui-datepicker-div {
	width: 320px;
    position: relative;
    left: 50%;
    margin-left: -50px;

}

.ui-datepicker {
  background-color: white;
  margin: auto;
  	z-index: 20;

  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}

.ui-datepicker table {
	min-width: 320px;
	max-width: 320px;
}


.ui-datepicker-prev, .ui-datepicker-next {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  cursor: pointer;
  background-repeat: no-repeat;
  line-height: 600%;
  overflow: hidden;
}

.ui-datepicker-prev {
  float: left;
  background-image: url('TujausValokuvat/nuolivasen.png');
}
.ui-datepicker-next {
  float: right;
  background-image: url('TujausValokuvat/nuolioikea.png');
}

.ui-datepicker thead {
  background-color: #f7f7f7;
  background-image: -moz-linear-gradient(top,  #f7f7f7 0%, #f1f1f1 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#f1f1f1));
  background-image: -webkit-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
  background-image: -o-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
  background-image: -ms-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
  background-image: linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1',GradientType=0 );
  border-bottom: 1px solid #bbb;
}

.ui-datepicker th {
  background-color: #bdbdbd;
  text-align:center;
  text-transform: uppercase;
  font-size: 14px;
  padding: 5px 0;
  color: black;
  /*text-shadow: 1px 0px 0px #fff;*/
  filter: dropshadow(color=#fff, offx=1, offy=0);
}

.ui-datepicker-header {
  background-color: black;
  color: #e0e0e0;
  font-weight: bold;
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
  -moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
  box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
  text-shadow: 1px -1px 0px #000;
  filter: dropshadow(color=#000, offx=1, offy=-1);
  line-height: 30px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #111;
}

.ui-datepicker-title {
  text-align: center;
}



.ui-datepicker td span, .ui-datepicker td a {
  display: inline-block;
  font-weight: bold;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #666666;
  text-shadow: 1px 1px 0px #fff;
  filter: dropshadow(color=#fff, offx=1, offy=1);
}

/*.ui-datepicker-calendar .ui-state-default {
  background: #ededed;
  background: -moz-linear-gradient(top,  #ededed 0%, #dedede 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dedede));
  background: -webkit-linear-gradient(top,  #ededed 0%,#dedede 100%);
  background: -o-linear-gradient(top,  #ededed 0%,#dedede 100%);
  background: -ms-linear-gradient(top,  #ededed 0%,#dedede 100%);
  background: linear-gradient(top,  #ededed 0%,#dedede 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 );
  -webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
  -moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
  box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}*/

.ui-datepicker-unselectable .ui-state-default {
  background: #f4f4f4;
  color: #b4b3b3;
}

.ui-datepicker-calendar .ui-state-hover {
  background: white;
}

.ui-datepicker-calendar .ui-state-active {
  background: #6eafbf;
  -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  color: #e0e0e0;
  text-shadow: 0px 1px 0px #4d7a85;
  filter: dropshadow(color=#4d7a85, offx=0, offy=1);
  border: 1px solid #55838f;
  position: relative;
  margin: -1px;
}

.ui-datepicker a {
  text-decoration: none;
}


/*************DATEPICKER LOPPUU**************/


#loader {
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 50;
  width: 50px;
  height: 50px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}