/* Kysy ennen kopioimista.*/
/* mail@xiaotec.fi - xiaotec (c) */


.logo{width:auto; height:10%; margin-bottom: -4%;}
/* Tausta teema väri: 	#FFFFFF [Valkoinen]*/
/* Text color #949494 [harmaa] aikaisempi 555454*/
/* Link color #585858 [tummempi] aikaisempi #424242*/
/* #1 väri: 			#E0E0E0 [Vaalean Harmaa]*/
/* #2 väri:				#A80000 [Punainen]*/
/* #3 väri:				#2E2E2E [Tumman harmaa/Musta]*/
/* #4 väri:				#000000 [Musta]*/
/* #5 väri:       #77c7f7 [Sininen]*/

html, body {height: 90%;}
body{ -webkit-font-smoothing: antialiased; background-color:#242424; color:#949494; overflow-y: scroll; text-align: center; font-size:13px; font-family:"Calibri", sans-serif;} /* min-width:1255px; */


/*REMOVE ALL CRAP*/

/* 'BODY' */
div.alue {display:block; min-height: 99%;  margin: 0 auto; padding: 0;}					/* 'PAGE BLOCKER' */
	.alue0{display:block; } 
	/* 'CONTENT' */
	.alue1{display:block; overflow: visible; margin:0 auto; text-align:left;}

	/* 'EXTRA' --remove pls */
	.alue2{display:block; height: 100%;  margin-left: auto; margin-right: auto; padding:10px; text-align:left;}		
	.alue3{margin:0 auto;} /*Keskitetty&kapea*/


	/* Galleria --rename */
	.alue1a{display:block; width:1250px; overflow: hidden; margin:0 auto; margin: 8px;}

	/* Galleria info */
	.alue1b{display:block; overflow: hidden; margin:0 auto; margin-top: 580px;}

	.img {display:block; border:1px solid #2E2E2E; padding:10px; overflow: auto; margin-left: auto; margin-right: auto; text-align: left;}
	.pic {display:inline; max-height:200px; border:0 solid;} /* max-height:70px; */
	.kulma {display:block; border-radius: 5px; background: #2E2E2E; text-align: left; font-size:10px; padding: 1px; max-width: 600px; min-width: 100px; margin: 2px 0; overflow: auto; max-height: 140px;}
	.spc {display:block; height: 40px;}
	.sign  {width: 100%;display:block; height: auto;  clear: both; text-align: center; font-size:10px; font-family:arial, helvetica; letter-spacing:1px;}
	.sign2  {display:block; height: 49px; margin-top: -49px; clear: both; position: fixed; bottom: 0; width: 100%; color: white; text-align: center; font-size:10px; font-family:arial, helvetica; letter-spacing:1px;}





/**/
.header{top: 20px; background: #FFFFFF; width: 100%; left: 0; top: 0; box-shadow: 0 0 5px 10px #fff;}





/*navigator === */
.navih{background-color: #222222;
    border-color: #121212;top: 0;
	color: #949494;
    border-width: 0 0 1px;position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;}

.main {height: 35px; position: relative; float: left; display: inline-block; padding: 1px 8px 0px 10px; font-size: 1.2em; margin: 0px 0px 0px -18px;}
.main:hover .navi {width: auto; visibility: visible;opacity: 1;z-index: 1;transform: translateY(0%);transition-delay: 0s, 0s, 0.3s; background: #222222;} /*border: 1px solid*/

.blocks{width: 35px; height: 5px;background-color: #949494;margin: 6px 0;}
.blockn{margin: -9px 1px -10px -1px;}

.navi > li {width: auto; padding: 2.5px 0px 0px 15px; white-space: nowrap;}
.navi > li:hover {background: #FFFFFF; text-align: center; border: solid 1px #222222;} /*border-width: 1px 0px 1px 0px;*/
.navi > li > a {width: auto; padding: 14.5px 15px;}
.bar > ul {text-align: center; }


/*NEW simple IE7    border: 1px solid rgb(51, 51, 51);*/

.nout {
	position: absolute;
	margin-top: -7%;
	float: left;
    width: 25%;
}

.nin {
    display: block;
	opacity: 0;
	transition: all 0.5s;
}

.nin li {
    padding: 0px 5px 10px 5px;
	background: #222222;
	font-size: 1.2em;
}

.nout li {text-align: left;}
.nout li:hover > .nin {
    transition: all 0.5s;
	opacity: 1;
}


#menu { display: none;}
label[for="menu"] { font-size: 2em; }



	.hovermenu{position: absolute; display:none;  font-size:80%; border: thin solid; padding: 1%; color: #000000;} /**/
	.hide:hover + .hovermenu {display: block; opacity: 1;}
	.hidden a:hover {background-color: #f1f1f1}
	.dropdown:hover .hovermenu {display: block;}
	.menu{margin: 2px auto; padding-right: 1%;}


	.plink  {display: inline; text-align: center; border-right:1px solid #949494; color:#949494;  padding-left: 20px; padding-right: 20px; font-size: 1.1em; letter-spacing: 0.5px;}
	.plink1  {display: inline; text-align: center; color:#949494; padding-left: 20px; padding-right: 20px; font-size: 1.1em; letter-spacing: 0.5px;}
	.plink:hover, .plink1:hover{background-color:#000000; color:#949494;}





/* linkit */
a{text-decoration:none; color:#585858;} /*color:#000000;*/
a:link {text-decoration: none;}
	/*a:visited {color:#000000;}*/
	a:hover {color:#A80000;text-decoration: none;}
	a:focus {color:#77c7f7;}
	a:active {color:#77c7f7;}







/*#HOTFIXES*/

b,strong {font-weight: 700;text-decoration: none;}

.date{margin:0px; color:#77c7f7;}


.active{
    color:#77c7f7;
}

.hidden a:hover {background-color: #242424;}
.hidden  li { list-style-type: none; margin: 0; padding: 0;}
.vteksti a:hover {color: #E0E0E0;}

.btn{display: inline-block; background-color: #ff0039; white-space: nowrap; font-weight: bold; margin: 10 auto; border: 1px solid #000000; text-align: center;
    vertical-align: middle; touch-action: manipulation; padding: 10px 18px;
    font-size: 15px;
	line-height: 1.42857143;
	margin-top: 10px;
	color: #ffffff;
    border-radius: 0;}
/*.btn:after{content: "L\0000E4het\0000E4"; display:inline-block;}*/
/*.btn:hover{background-color: #f2f2f2;}*/

.ca{display: inline-block; font: normal normal normal 14px/1 FontAwesome;}
.ca::before{content: "\f07a";}


.btn2{display: inline-block; background-color: #ffffff; white-space: nowrap; font-weight: bold; margin: 10 auto; border: 1px solid #000000;}
.btn2:after{content: "Send"; display:inline-block;}
.btn2:hover{background-color: #f2f2f2;}

.email{display: none;} /*bot check*/
.name{font-size: 0px;} /*bot check*/









/* texti === */
p{padding-left:2em; padding-right:2em; letter-spacing: 0.5px;}

p.line {text-align: center; font-family:verdana; letter-spacing:1px; font-size:14px;}   /* Otsikko */
p.serif {text-indent:20px;text-align: left; white-space: pre-wrap;}			/* normaali */
p.serif0 {text-indent:inherit;}								/* huomio */
p.serif1 {text-indent:inherit; letter-spacing:0.1px;}					/* historia */
p.serif2 {text-indent:35px; letter-spacing:0.5px;}					/* ala_otsikko */
 .vteksti { text-indent:inherit; letter-spacing:0px; border-width:1px;}
 .notice {text-align: center; color: rgb(90, 87, 87); text-indent:inherit; letter-spacing:0px; white-space: pre-wrap;}
.textbox{max-width: 90%;}
.Message{padding: 20px 15% 20px 15%;}
.vbox{border: 1px solid #2E2E2E;}


/*[+]Teksti*/
	.dropdown {display: inline-block; width: 100%; text-align: center;} /* position: relative; */
	.hidden{ display:none;  min-width: 160px; font-size:80%; padding:5px; margin:0 auto; top: 8%; left: 5.5%;} /* position: fixed; */
	.hide{cursor: pointer; border: none; } /* position: fixed;left: 5%;top: 8%; */
	.hide:hover + .hidden {display: block; opacity: 1;}
	.hidden a:hover {background-color: #f1f1f1}
	.dropdown:hover .hidden {display: block;}
	.dropdown:hover .hide {color: #A80000;}



 /*Kuvat === */

.box { margin: 0 auto; ;padding: 35px; background-clip: padding-box; text-align: center;}
.store {width: 25%; height: auto; margin: 0 5%;}
.popbox {
	display: block;
    margin-left: auto;
    margin-right: auto;
		color: #000000;}
img {
	/*pointer-events: none;*/ /*This breaks clickable links you baka!*/
}

.hoverimg {
	/*position: relative;*/
	display: inline;
}

.hoverimg ,img{max-width: 100%;}

.hoverimg .hoverimg-top {
	display: none;
}
.hoverimg:hover .hoverimg-top {
	display: inline;
}
.hoverimg:hover .hoverimg-bottom {
	display: none;
}




/*Store*/
.content {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;

		color: #000000;


} /*outline: darkblue;
outline-style: solid;*/
.title{
	display: block;
		margin-left: auto;
		margin-right: auto;
		width: 50%;

		color: #000000;
}
img {border-radius: 8px;}


.container {padding: 10px 20px; margin:0 auto; height: 90%;} 

.wideitem{min-width: 500px;}

@media (min-width: 100px)
{
	.popup {margin: 125px auto; max-width: 90%;}

	.pull-left{min-width: 300px; padding-left: 15%;}
	.pull-right{max-width: 0; float: left!important;     margin: 12%;}
	.wideitem{min-width: 0;}

	.col-md-6{padding-right: 0px; padding-left: 0px;}

	.galleria-info {max-width: 100%;}
}

@media (min-width: 500px)
{
	.pull-left{min-width: 0; padding-left: 0%;}
	.pull-right{max-width: 200px; float: right!important;     margin: 0;}
	.col-md-6{max-width: 600px;margin: auto;}


	.galleria-info {max-width: 20%;}


}

@media (min-width: 768px)
{
	.container {width: 750px;}
	.popup {margin: 81px auto; max-width: 80%;}

}
@media (min-width: 992px)
{
	.wideitem{min-width: 500px;}
	.container {width: 970px;}
	.popup {margin: 100px auto; max-width: 70%;}


}

@media (min-width: 1050px)
{
	.col-md-6{padding-right: 40px; padding-left: 40px;}

}

@media (min-width: 1200px)
{
	.container {width: 1170px;}
	.popup {margin: 100px auto; max-width: 70%;}

	.pic {max-height:300px;} 
	body {font-size: 15px;}
	ul.u1 {font-size: 17px;}

}





/*.button {padding: 10px; border: 2px solid black;transition: all 0.3s ease-out;}
.button:hover {background: black;}*/

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 200ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {visibility: visible;opacity: 1;}

.popup {
  /*margin: 65px auto;*/
  padding: 20px;
  background: #fff;
  border-radius: 5px 5px 5px 5px;
  /*max-width: 70%;*/
  max-height: 80%;
  transition: all 1s ease-in-out;
  overflow: auto;
  text-align: left;
  /*position: absolute;
  right: 20%;*/
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
}

.popup .close {
  /*position: fixed;
  top: 20px;
  right: 20%;
	width: 5%;
	border-radius: 50px 50px 0px 0px;
	text-align: center;
  transition: all 200ms;
  font-size: 3em;
  font-weight: bold;
  text-decoration: none;
	background-color: #FFFFFF;
  color: #333;*/
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 700px;
  display: inline-block;
  margin: 0;}








/* laatikko */
.box {border-style:solid; border-width:1px; padding: 20px; overflow: auto; position: relative; white-space: pre-wrap; font-family: monospace; text-align: left; letter-spacing:0px;}
.vbox {border-style:solid; border-width:1px; padding: 20px; overflow: auto; position: relative; font-family: monospace; text-align: left; letter-spacing:0px;  max-width: 600px; border-color: #2E2E2E;}

.mbox {border-style:solid; border-width:1px; padding: 2%; overflow: auto; position: relative; text-align: left; letter-spacing:0px;  max-width: 400px; border-color: #2E2E2E; margin: auto;}

/* paivamaara */
.pvm {text-align:right; letter-spacing:0px; text-decoration:underline; font-size:10px; font-family:"Courier New", Courier, monospace; color:#E0E0E0;}
.pvm2 {text-align:right; letter-spacing:0px; font-size:9px;}

.pvmbox{display: block; cursor:help; min-width: 10%;}

.label {
    padding: 1px 3px 2px;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
	font-size:10px;
}

.pvmbox a p.new-txt span{position: relative;}
.pvmbox:hover a p.new-txt span {display: none; pointer-events: none;}
.pvmbox:hover a p.new-txt:after {content: "This Page modified MONTH:DD:YYYY"; cursor:help;}

/* vahvistukset */
.cmd{color: rgb(102, 102, 102); 
	background-color: black; 
	border-radius: 5px; padding-left: 4px;
  padding-right: 4px; user-select: text;
  display: inline-block;
  overflow: auto;
  text-indent: 0px;
  margin-bottom: -4px;
}
.txt{color: rgb(102, 102, 102);}
.txt1{color: rgb(80, 140, 255);} /*Blue*/
.txt2{color: red;}

span {white-space: pre-wrap;}



/* listat&taulukot */
ul {padding:0; margin:0; list-style-type:none;}
	.u1 {font-size:14px }

dl {counter-reset: num;}
	dt{margin-bottom: 2em; margin-top: 6em; font-size:22px; padding-left: 1em;}
	dt:before {counter-increment: num; content: "# ";} /*content: counter(num) "# "*/

table {border-collapse:collapse;}
table,td,th {border:1px solid #2E2E2E; padding: 5px;}
	tr{text-align:left;}
		table.link{max-width: 1000px; min-width: 100%;}
		table.eec{min-width: 800px;}
		table.eecp{min-width: 520px;}
		table.eec,eecp,td,th{margin: 2px;}

		table,img{height:auto; max-width: 80%;}









/* Autocomplete */
.autocomplete {
	position: relative;
	display: inline-block;
  }


  .autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	top: 100%;
	left: 0;

  }

  .autocomplete-items div {
	padding: 5px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
  }

  /*when hovering an item:*/
  .autocomplete-items div:hover {
	background-color: #e9e9e9;
  }

  /*arrow keys*/
  .autocomplete-active {
	background-color: #e9e9e9 !important;
  }



















/* ei käytössä */
hr {border: 1px dashed #242424;}	/* kappale jako */

	.a {list-style-type:none;}





/* signature */
.signature{width: 100%; height: 100%;}
	.signature:before {content: "...................::::::::...:::......::::.::.::..::::::::.........."}
.signatureb{width: 100%; height: 100%;}
	.signatureb:before {content: "...................::::::::...:::......::::.::.::..::::::::.........."}

.wrapper {height:10px; width:150px; margin:0 auto; overflow:hidden; margin-bottom: -5px;}
.marquee{position:relative; overflow:hidden; float:left;}
.marquee span{
white-space: nowrap;
display:inline;
position: relative;
left:0%;
-moz-animation: marquee 10s infinite linear 3s;
-webkit-animation: marquee 10s infinite linear 3s;
-o-animation: marquee 10s infinite linear 3s;
animation: marquee 10s infinite linear 3s;
}
.marquee:hover span{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
.marquee span:after {content:attr(rel); display:inline; color:black;}
@-webkit-keyframes marquee{
0% {left: 0%;}
100% {left: -50%;}
}
@-moz-keyframes marquee{
0% {left: 0%;}
100% {left: -50%;}
}
@-o-keyframes marquee{
0% {left: 0%;}
100% {left: -50%;}
}
@keyframes marquee{
0% {left: 0%;}
100% {left: -50%;}
}