/* mobiili tyyli */
@media only screen and (min-width: 0px) and (max-width: 1080px) {
	
.desktop {
	display: none; /* estää sisällön näyttämisen */
}

input[type=textarea] { 
	margin-top: 10px;
	border: 5px solid red; /* kehysten koko ja väri */
	width: 95%;
	height: 80px;
	font-size: 25; 
	border-radius: 16px; 
	background-color: pink;
	color: ivory;
}

input[type=text], select { /* alasveto valikon muokkaus, muokkaa myös tekstin syöttö kenttiä */
	height: 60px; /* korkeus */
	margin-top: 10px; /* ylä reunaan 10px väliä */
	font-size: 30; /* fontin koko */
	border-radius: 16px; /* kulmien pyöristys */
	text-align: center; /* sisällön keskitys vaakatasossa */
}

input[type=submit] { /* painikkeen muokkaus */
	height: 60px; /* korkeus */
	margin-top: 10px; /* ylä reunaan 10px väliä */
	margin-left: 20px; /* vasemmalle 20px väliä */
	font-size: 30; /* fontin koko */
	border-radius: 16px; /* kulmien pyöristys */
}

input[type=number] { /* muokkaa numeroiden syöttö kenttiä */
	margin-top: 10px; /* ylä reunaan 10px väliä */
	font-size: 30; /* fontin koko */
	border-radius: 16px; /* kulmien pyöristys */
	text-align: center; /* sisällön keskitys vaakatasossa */
	height: 60px; /* korkeus */
	width: 80px; /* leveys */
}

input[type=password] { /* muokkaa salasanan syöttö kenttiä */
	height: 60px; /* korkeus */
	margin-top: 10px; /* ylä reunaan 10px väliä */
	font-size: 30; /* fontin koko */
	border-radius: 16px; /* kulmien pyöristys */
	text-align: center; /* sisällön keskitys vaakatasossa */
}


body {
	margin: 0; /* turhat raot pois */
	font-family: arial; /* määritetään fontti */
	background-color: #142FB6;  /* tausta väri */
	color: #0B0B0B;  /* fontin väri */
	font-size: 30px; /* fontin koko */

}

table { /* taulukon muokkaus */
	width: 100%; /* taulukon leveys */
	height: auto; /* taulukon korkeus */
	margin: auto; /* keskitys leveys */
	margin-top: 30px; /* jätetään ylös tilaa */
	border: 10px solid #3E4143; /* kehysten koko ja väri */
}


th { /* taulukon otsikkojen muokkaus */
	font-size: 28pt; /* teksti koko */
	color: ivory; /* teksti väri */
	background-color: #142FB6; /* tausta väri  */
}

td { /* taulukon solujen muokkaus */
	font-size: 25pt; /* teksti koko */
	color: ivory; /* teksti väri */
	background-color: #42B9FE; /* tausta väri */
	border: 5px solid #3E4143; /* kehysten koko ja väri */
	text-align: center; /* tekstin keskitys */
	padding: 10px; /* sisällön ympärille lisä tilaa */
}

a:link, a:visited { /* tehdään linkeistä saman näköisiä vaikka sitä olisi jo klikattu */
  background-color: #142FB6; /* tausta väri */
  color: ivory; /* fontin väri */
  display: inline-block; /* mahdollistetaan linkkien alas päin siirto  */
  padding: 5px 20px; /* hengitys tilaa 5px ylös ja 20px sivulle, kehys tulee tämän tilan ympärille */
  text-align: center; /* keskitys vaakatasossa */
  text-decoration: none; /* poistetaan alleviivaus */
  border: solid ivory 4px; /* kehykset */
  border-radius: 30px; /* kulmien pyöristys */
  margin-top: 10px; /* tällä kehyksilleki hengitys tilaa ylös 10px */
  margin-right: 20px; /* tällä kehyksilleki hengitys tilaa oikeaan reunaan 20px */
  font-size: 50; /* fontin koko */
}

.header { /* määritetään header div */
	font-family: arial; /* määritetään fontti */ 
	width: 100%; /* leveys */
	
	text-align: center; /* keskitys vaakatasossa */
}

.sisus{ /* määritetään sisus div */
	font-family: arial; /* määritetään fontti */ 
	width: 100%; /* leveys */
	height: auto; /*korkeus */
	text-align: center; /* keskitys vaakatasossa */
	margin-top: 90px; /* hengitys tilaa ylös */
	margin-bottom: 60px; /* hengitys tilaa alas */
	color: ivory;
	font-size: 30px; /* fontin koko */
}

img {

	height: 90%;
	 border: solid ivory 6px; /* kehykset */
  border-radius: 30px; /* kulmien pyöristys */
  max-width: 95%;
   margin-bottom: 40px;
}

video {
	height: 90%;
	 border: solid ivory 6px; /* kehykset */
  border-radius: 30px; /* kulmien pyöristys */
  margin-top: 40px;
    max-width: 95%;

}


}






/* ##################################################################################################################################################################################### */

/* desktop tyyli */
@media only screen and (min-width: 1081px) {
	
.mobiili {
	display: none; /* estää sisällön näyttämisen */
}

input[type=textarea] { 
	margin-top: 10px;
	border: 5px solid red; /* kehysten koko ja väri */
	width: 95%;
	height: 80px;
	font-size: 25; 
	border-radius: 16px; 
	background-color: pink;
	color: ivory;
}

input[type=text], select { /* alasveto valikon muokkaus, muokkaa myös tekstin syöttö kenttiä */
	height: 30px; /* korkeus */
	margin-top: 10px; /* ylä reunaan 10px väliä */
	font-size: 14; /* fontin koko */
	border-radius: 16px; /* kulmien pyöristys */
	text-align: center; /* sisällön keskitys vaakatasossa */
}

input[type=submit] { /* painikkeen muokkaus */
	height: 30px; /* korkeus */
	margin-top: 10px; /* ylä reunaan 10px väliä */
	margin-left: 20px; /* vasemmalle 20px väliä */
	font-size: 14; /* fontin koko */
	border-radius: 16px; /* kulmien pyöristys */
}

input[type=number] { /* muokkaa numeroiden syöttö kenttiä */
	height: 30px; /* korkeus */
	margin-top: 10px; /* ylä reunaan 10px väliä */
	font-size: 14; /* fontin koko */
	border-radius: 16px; /* kulmien pyöristys */
	text-align: center; /* sisällön keskitys vaakatasossa */
	width: 60px; /* leveys */
}

input[type=password] { /* muokkaa salasanan syöttö kenttiä */
	height: 30px; /* korkeus */
	margin-top: 10px; /* ylä reunaan 10px väliä */
	font-size: 14; /* fontin koko */
	border-radius: 16px; /* kulmien pyöristys */
	text-align: center; /* sisällön keskitys vaakatasossa */
}

body {
	margin: 0; /* turhat raot pois */
	font-family: arial; /* määritetään fontti */
	background-color: #142FB6;  /* tausta väri */
	color: ivory;  /* fontin väri */
	margin-left: 15px;
}

table { /* taulukon muokkaus */
	width: 521px; /* leveys */
	float: right; /* saadaan taulukot oikeaan laitaan*/
	border: 5px solid #3E4143; /* kehysten koko ja väri */
	margin-bottom: 40px; /* alas tyhjää tilaa */
}


th { /* taulukon otsikkojen muokkaus */
	font-size: 20pt; /* teksti koko */
	color: ivory; /* teksti väri */
	background-color: #142FB6; /* tausta väri  */
}

td { /* taulukon solujen muokkaus */
	font-size: 14pt; /* teksti koko */
	color: ivory; /* teksti väri */
	background-color: #42B9FE; /* tausta väri */
	border: 3px solid #3E4143; /* kehysten koko ja väri */
	text-align: center; /* tekstin keskitys */
	padding: 5px; /* sisällön ympärille lisä tilaa */
}

a:link, a:visited { /* tehdään linkeistä saman näköisiä vaikka sitä olisi jo klikattu */
  background-color: #142FB6; /* tausta väri */
  display: inline-block; /* mahdollistetaan linkkien alas päin siirto  */
  padding: 5px 20px; /* hengitys tilaa 5px ylös ja 20px sivulle, kehys tulee tämän tilan ympärille */
  text-align: center; /* keskitys vaakatasossa */
  text-decoration: none; /* poistetaan alleviivaus */
  border: solid ivory 4px; /* kehykset */
  border-radius: 30px; /* kulmien pyöristys */
  margin-top: 10px; /* tällä kehyksilleki hengitys tilaa ylös 10px */
  margin-right: 20px; /* tällä kehyksilleki hengitys tilaa oikeaan reunaan 20px */
  font-size: 14; /* fontin koko */
  color: ivory;
}

.header { /* määritetään header div */
	font-family: arial; /* määritetään fontti */ 
	width: 100%; /* leveys */
	height: 80px; /*korkeus */
	text-align: center; /* keskitys vaakatasossa */
}

.sisus { /* määritetään sisus div */

	font-family: arial; /* määritetään fontti */ 
	width: 100%; /* leveys */
	height: auto; /*korkeus */
	margin-top: 20px; /* hengitys tilaa ylös */
	margin-bottom: 60px; /* hengitys tilaa alas */
}




.profiili { /* profiili divin muokkaus */
	float: left; /* saadaan divit vierekkäin */
	width: 350px; /* leveys */
	margin: auto; /* keskitys */
}

.profiilisisus { /* määritetään profiilisisus div */
	max-width: 700px; /* maksimi leveys */ /* max-width ja margin: auto, yhdessä nämä keskittävät divit */
	margin: auto; /* keskitys */
	font-family: arial; /* määritetään fontti */ 
	width: 100%; /* leveys */
	height: auto; /*korkeus */
	margin-top: 20px; /* hengitys tilaa ylös */
	margin-bottom: 60px; /* hengitys tilaa alas */
}

.rekisterointi { /* rekisterointi divin muokkaus */
	float: left; /* saadaan divit vierekkäin */
	width: 250; /* leveys */
}

.rekisterointisisus { /* määritetään rekisterointisisus div */
	max-width: 1000px; /* maksimi leveys */ /* max-width ja margin: auto, yhdessä nämä keskittävät divit */
	margin: auto; /* keskitys */
	font-family: arial; /* määritetään fontti */ 
}

.kirjautuminen { /* kirjautuminen divien muokkaus */
	float: left; /* saadaan divit vierekkäin */
	width: 250; /* leveys */
	margin-top: 40px; /* hengitys tilaa ylös */
}

.kirjautuminensisus { /* kirjautuminensisus divin muokkaus */
	max-width: 500px; /* maksimi leveys */ /* max-width ja margin: auto, yhdessä nämä keskittävät divit */
	margin: auto; /* keskitys */
	font-family: arial; /* määritetään fontti */ 
	margin-top: 60px; /* hengitys tilaa ylös */
}

.etusivusisus { /* määritetään etusivusisus div */
	max-width: 1024px; /* maksimi leveys */ /* max-width ja margin: auto, yhdessä nämä keskittävät divit */
	margin: auto; /* keskitys */
	font-family: arial; /* määritetään fontti */ 
}

.kuvanvaihtosisus { /* määritetään kuvanvaihtosisus div */
	max-width: 415px; /* maksimi leveys */ /* max-width ja margin: auto, yhdessä nämä keskittävät divit */
	margin: auto; /* keskitys */
	font-family: arial; /* määritetään fontti */ 
	margin-top: 60px; /* hengitys tilaa ylös */	
}

.muokkaa { /* muokkaa divien muokkaus */
	float: left; /* saadaan divit vierekkäin */
	width: 250; /* leveys */
	margin-top: 20px; /* hengitys tilaa ylös */
	margin-bottom: 40px; /* hengitys tilaa alas */
}

.muokkaasisus { /* määritetään muokkaasisus div */
	max-width: 750px; /* maksimi leveys */ /* max-width ja margin: auto, yhdessä nämä keskittävät divit */
	margin: auto; /* keskitys */
	font-family: arial; /* määritetään fontti */ 
	margin-top: 50px; /* hengitys tilaa ylös */
}

.luo1sisus { /* määritetään luo1sisus div */
	max-width: 300px; /* maksimi leveys */ /* max-width ja margin: auto, yhdessä nämä keskittävät divit */
	margin: auto; /* keskitys */
	font-family: arial; /* määritetään fontti */ 
	margin-top: 50px; /* hengitys tilaa ylös */
}

.luo2sisus { /* määritetään luo1sisus div */
	max-width: 550px; /* maksimi leveys */ /* max-width ja margin: auto, yhdessä nämä keskittävät divit */
	margin: auto; /* keskitys */
	font-family: arial; /* määritetään fontti */ 
	margin-top: 50px; /* hengitys tilaa ylös */
}

.turnaussisus { /* määritetään turnaussisus div */
	max-width: 1040px; /* maksimi leveys */ /* max-width ja margin: auto, yhdessä nämä keskittävät divit */
	margin: auto; /* keskitys */
	font-family: arial; /* määritetään fontti */ 
	margin-top: 50px; /* hengitys tilaa ylös */
}

.sarja { /* määritetään sarja div */
	width: 520px;
	height: 420px;
	float: left;
}

.playoffsisus { /* playoffsisus div */
	max-width: 1040px; /* maksimi leveys */ /* max-width ja margin: auto, yhdessä nämä keskittävät divit */
	margin: auto; /* keskitys */
	font-family: arial; /* määritetään fontti */ 
	margin-top: 50px; /* hengitys tilaa ylös */
}	
	
.sisus { /* kirjautuminensisus divin muokkaus */
	color: ivory; /* teksti väri */
	font-family: arial; /* määritetään fontti */ 
	margin-top: 40px; /* hengitys tilaa ylös */

}
	
img {

	height: 90%;
	 border: solid ivory 6px; /* kehykset */
  border-radius: 30px; /* kulmien pyöristys */
  max-width: 95%;
  margin-bottom: 40px;
}

video {
	height: 90%;
	 border: solid ivory 6px; /* kehykset */
  border-radius: 30px; /* kulmien pyöristys */
  margin-top: 40px;
    max-width: 95%;

}




	
}

}
		
}