body {
	font-size:100%;
}

/* część podstawowa menu */

/* wygląd głównego elementu - ol */
ol {
  list-style-type:none;
  padding:0em 1%;
  margin:0em;
  background-color:#0067A4;
  font-size:0.9375em;
  height:3.25em;
  line-height:2em;
  text-align:left;
}

/* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */
ol a {
  display:block;
  text-decoration:none;
  color:#FFFF;
  padding:0em 0.3125em;
}

/* wygląd elementów - li - wszystkich dzieci elementu - ol */
ol > li {
  float:left;
  width:7.5em;
  margin-left:0.0625em;
  background-color:#0067A4;
  height:3.25em;
}

/* wygląd elementu - li - pierwszego dziecka elementu - ol */
ol > li:first-child {
  margin-left:0em;
}

ol > li:nth-child(2){
  width:7.5em;
}

ol > li:nth-child(3){
  width:7.5em;
}

/* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover {
  background-color:#0083D1;
}

/* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover > a {
  color:#FFFF;
}

/* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover > ul {
  display:block;
}

/* część rozwijana menu */
/* wygląd głównych rozwijanych elementów - ul */
ol > li > ul {
  display:none;
  list-style-type:none;
  padding:0em;
  margin:0em;
  width:10em;
}

/* wygląd elementu - li - w części rozwijanej */
ol > li > ul > li {
  position:relative;
  background-color:#0067A4;
}

/* wygląd elementu - a - w części rozwijanej */
ol > li > ul > li > a {
  border-top:0.0625em solid #FFF;
}

/* wygląd elementu - li - w części rozwijanej, po najechaniu kursorem myszki na dany element - li */
ol > li > ul > li:hover {
  background-color:#0083D1;
}

/* wygląd elementu - a - w części rozwijanej, po najechaniu kursorem myszki na element - li */
ol > li > ul > li:hover > a {
  color:#FFFF;
}

/* parametry stałych elementów strony */
#menu {
  position:absolute;
  left:0%;
  top:12%;
  width:100%;
  z-index:2;
}

#main {
  position:absolute;
  left:1%;
  top:19%;
  width:99%;
  height:77%;
  overflow:auto;
  z-index:1;
}

#copyrightsBanner {
  position:absolute;
  left:0%;
  bottom:0%;
  width:100%;
  color:white;
  z-index:1;
}

#fbLogo {
  position:absolute;
  right:2%;
  top:0%;
}

#menuIcons {
  font-size:2.5em;
}

#pdfLoad {
  width:100%;
  height:86%;
  border:none;
}

#mainTitle {
  font-size:1.875em;
}

#mainText {
  font-size:1.5625em;
}

#graphText {
  font-size:1.5625em;
}

.graphTextMove:before {
  content:"\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
}

/* przeskalowanie tekstu strony do wersji mobilnej */
@media only screen and (max-width: 700px) {
  #mainTitle {
    font-size:1.5625em;
  }
}

@media only screen and (max-width: 700px) {
  #mainText {
    font-size:1.25em;
  }
}

@media only screen and (max-width: 700px) {
  #time {
    font-size:1.25em;
  }
}

/* ustawienia bannera z informacjami o prawach autorskich (musi być w css żeby dopasowywało się przy zoomowaniu)*/
#copyrights {
  padding:0em 1em;
  margin:0em;
  background-color:#0067A4;
  font-size:1.2em;
  height:2em;
  line-height:2em;
  text-align:center;
}

/* ustawienia bannera z informacjami o prawach autorskich żeby dopasowywały się do wersji mobilnej*/
@media only screen and (max-width: 700px) {
  #copyrights {
    padding:0em 1em;
  	margin:0em;
  	background-color:#0067A4;
  	font-size:0.5em;
  	height:2em;
  	line-height:2em;
  	text-align:center;
  }
}

/* scalowanie elementów pod różne urządzenia (loga nad menu i treści w pomiarze w czasie rzeczywistym) */
@media only screen and (max-width: 320px) {
  .live_desktop {
   	display:none;
  }
  .live_tablet {
  	display:none; 
  }
  .live_laptopS {
  	display:none;
  }
  .live_laptopL {
  	display:none;
  }
  #logopk {
  	position:absolute;
  	top:-0.1%;
  	left:0.5%;
    width:99%;
  }
  #pionierlablogo {
    position:absolute;
  	top:6.5%;
  	right:0.5%;
    width:75%;
  }
  #wykresPM {
  	position:relative;
  	left:-5%;
  	top:-1%;
  	width:99%;
  }
  #wykresNOSO {
  	position:relative;
  	left:-5%;
  	top:-1%;
  	width:99%;
  }
  #jakoscpowietrza {
    width:99%;
  }
  #indexspace {
  	position:absolute;
  	width:100%;
  	top:105%;
  }
  #measurementerr{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width: 30%;
  }
  #fromtime{
  	font-size: 1.875em;
  	font-family: Arial;
  }
  #measurementmain{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width:100%; 
  	height:20%; 
  }
  #measurementopt{
  	position:absolute; 
  	font-size: 1.5em; 
  	font-family: Arial; 
  	width:100%; 
  	height:20%;  
  	top:40%;
  }
  #measurementmeteo{
  	position:absolute; 
  	font-size: 1.25em;
  	font-family: Arial;
  	width:100%; 
  	height:20%;  
  	top:69%;
  }
  #timeinfo{
  	font-size: 0.5em; 
  	font-family: Arial;
  }
  #graphText {
  	font-size:0.4em;
  }
  .graphTextMove:before {
  	content:"";
  }
  ol {
  	font-size:0.7em;
  	height:3.25em;
  	line-height:2em;
  	text-align:left;
  }
  #main {
  	top:17%;
}
}

@media only screen and (min-width:321px) and (max-width: 375px) {
  .live_desktop {
    	display:none;
  }
  .live_tablet {
  	display:none; 
  }
  .live_laptopS {
  	display:none;
  }
  .live_laptopL {
  	display:none;
  }
  #logopk {
  	position:absolute;
  	top:-0.1%;
  	left:0.5%;
    width:99%;
  }
  #pionierlablogo {
    position:absolute;
  	top:6.5%;
  	right:0.5%;
    width:75%;
  }
  #wykresPM {
  	position:relative;
  	left:-5%;
  	top:-1%;
  	width:99%;
  }
  #wykresNOSO {
  	position:relative;
  	left:-5%;
  	top:-1%;
  	width:99%;
  }
  #jakoscpowietrza {
    width:99%;
  }
  #indexspace {
  	position:absolute;
  	width:100%;
  	top:105%;
  }
  #measurementerr{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width: 30%;
  }
  #fromtime{
  	font-size: 1.875em;
  	font-family: Arial;
  }
  #measurementmain{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width:100%; 
  	height:20%; 
  }
  #measurementopt{
  	position:absolute; 
  	font-size: 1.5em; 
  	font-family: Arial; 
  	width:100%; 
  	height:20%;  
  	top:40%;
  }
  #measurementmeteo{
  	position:absolute; 
  	font-size: 1.25em;
  	font-family: Arial;
  	width:100%; 
  	height:20%;  
  	top:69%;
  }
  #timeinfo{
  	font-size: 0.5em; 
  	font-family: Arial;
  }
  #graphText {
  	font-size:0.4em;
  }
  .graphTextMove:before {
  	content:"\00a0\00a0\00a0\00a0\";
  }
}

@media only screen and (min-width: 376px) and (max-width: 550px) {
  .live_desktop {
    	display:none;
  }
  .live_tablet {
  	display:none; 
  }
  .live_laptopS {
  	display:none;
  }
  .live_laptopL {
  	display:none;
  }
  #logopk {
  	position:absolute;
  	top:-0.1%;
  	left:0.5%;
    width:85%;
  }
  #pionierlablogo {
    position:absolute;
  	top:6.5%;
  	right:0.5%;
    width:65%;
  }
  #wykresPM {
  	position:relative;
  	left:-5%;
  	top:-1%;
  	width:99%;
  }
  #wykresNOSO {
  	position:relative;
  	left:-5%;
  	top:-1%;
  	width:99%;
  }
  #jakoscpowietrza {
    width:99%;
  }
  #indexspace {
  	position:absolute;
  	width:100%;
  	top:105%;
  }
  #measurementerr{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width: 30%;
  }
  #fromtime{
  	font-size: 1.875em;
  	font-family: Arial;
  }
  #measurementmain{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width:100%; 
  	height:20%; 
  }
  #measurementopt{
  	position:absolute; 
  	font-size: 1.5em; 
  	font-family: Arial; 
  	width:100%; 
  	height:20%;  
  	top:40%;
  }
  #measurementmeteo{
  	position:absolute; 
  	font-size: 1.25em;
  	font-family: Arial;
  	width:100%; 
  	height:20%;  
  	top:69%;
  }
  #timeinfo{
  	font-size: 0.5em; 
  	font-family: Arial;
  }
  #graphText {
  	font-size:0.4em;
  }
  .graphTextMove:before {
  	content:"\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
  }
}

/* widok tabletu w pionie */
@media only screen and (min-width: 551px) and (max-width: 1023px) {
  .live_desktop {
    display:none;
  }
  .live_mobile {
    display:none;
  }
  .live_laptopS {
  	display:none;
  }
  .live_laptopL {
  	display:none;
  }
  #logopk {
  	position:absolute;
  	top:-0.2%;
  	left:0.5%;
    width:55%;
  }
  #pionierlablogo {
    position:absolute;
  	top:6%;
  	right:0.5%;
    width:40%;
  }
  #wykresPM {
  	position:relative;
  	left:-5%;
  	top:-1%;
  	width:99%;
  }
  #wykresNOSO {
  	position:relative;
  	left:-5%;
  	top:-1%;
  	width:99%;
  }
  #jakoscpowietrza {
    width:99%;
  }
  #indexspace {
  	position:absolute;
  	width:100%;
  	top:70%;
  }
  #measurementerr{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width: 30%;
  }
  #fromtime{
  	font-size: 1.25em;
  	font-family: Arial;
  }
  #measurementmain{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width:50%; 
  	height:20%;
  	top:15%; 
  }
  #measurementopt{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width:50%; 
  	height:20%;
  	left:50%;  
  	top:15%;
  }
  #measurementmeteo{
  	position:absolute; 
  	font-size: 1.25em;
  	font-family: Arial;
  	width:50%; 
  	height:20%;  
  	top:40%;
  }
  #timeinfo{
  	font-size: 0.625em; 
  	font-family: Arial;
  }
  #time {
  	font-size:1.25em;
  }
  #graphText {
  	font-size:0.7em;
  }
  .graphTextMove:before {
  	content:"\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
  }
}

/* widok tabletu w poziomie */
@media only screen and (min-width:844px) and (max-width:992px) and (min-height: 551px) and (max-height: 1023px) {
  .live_desktop {
    	display:none;
  }
  .live_mobile {
    	display:none;
  }
  .live_laptopS {
  	display:none;
  }
  .live_laptopL {
  	display:none;
  }
  #logopk {
  	position:absolute;
  	top:-0.2%;
  	left:0.5%;
    width:50%;
  }
  #pionierlablogo {
    position:absolute;
  	top:5.5%;
  	right:0.5%;
    width:35%;
  }
  #wykresPM {
  	position:relative;
  	left:-5%;
  	top:-1%;
  	width:99%;
  }
  #wykresNOSO {
  	position:relative;
  	left:-5%;
  	top:-1%;
  	width:99%;
  }
  #jakoscpowietrza {
    width:99%;
  }
  #indexspace {
  	position:absolute;
  	width:100%;
  	top:77%;
  }
  #measurementerr{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width: 30%;
  }
  #fromtime{
  	font-size: 1.25em;
  	font-family: Arial;
  }
  #measurementmain{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width:50%; 
  	height:20%;
  	top:15%; 
  }
  #measurementopt{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width:50%; 
  	height:20%;
  	left:50%;  
  	top:15%;
  }
  #measurementmeteo{
  	position:absolute; 
  	font-size: 1.25em;
  	font-family: Arial;
  	width:50%; 
  	height:20%;  
  	top:40%;
  }
  #timeinfo{
  	font-size: 0.625em; 
  	font-family: Arial;
  }
  #time {
  	font-size:1.25em;
  }
  #graphText {
  	font-size:0.7em;
  }
  .graphTextMove:before {
  	content:"\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  .live_desktop {
    	display:none;
  }
  .live_mobile {
    	display:none;
  }
  .live_tablet {
	display:none;
  }
  .live_laptopL {
  	display:none;
  }
  #logopk {
  	position:absolute;
  	top:-0.2%;
  	left:0.5%;
    width:48%;
  }
  #pionierlablogo {
    position:absolute;
  	top:6%;
  	right:0.5%;
    width:34%;
  }
  #wykresPM {
  	position:relative;
  	left:-5%;
  	top:-2%;
  	width:99%;
  }
  #wykresNOSO {
  	position:relative;
  	left:-5%;
  	top:-2%;
  	width:99%;
  }
  #jakoscpowietrza {
    width:99%;
  }
  #indexspace {
  	position:absolute;
  	width:100%;
  	top:57%;
  }
  #measurementerr{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width: 30%;
  }
  #fromtime{
  	font-size: 1.25em;
  	font-family: Arial;
  }
  #measurementmain{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width:30%; 
  	height:20%;
  	top:15%; 
  }
  #measurementopt{
  	position:absolute; 
  	font-size: 1.25em; 
  	font-family: Arial; 
  	width:30%; 
  	height:20%;
  	left:35%;  
  	top:15%;
  }
  #measurementmeteo{
  	position:absolute; 
  	font-size: 1.25em;
  	font-family: Arial;
  	width:30%; 
  	height:20%;
  	right:3%;  
  	top:15%;
  }
  #timeinfo{
  	font-size: 0.6251em; 
  	font-family: Arial;
  }
  #time {
  	font-size:1.25em;
  }
  #graphText {
  	font-size:1em;
  }
  .graphTextMove:before {
  	content:"\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
  }
}

@media only screen and (min-width: 1440px) and (max-width: 1599px) {
  .live_desktop {
    	display:none;
  }
  .live_mobile {
    	display:none;
  }
  .live_tablet {
    	display:none;
  }
  .live_laptopS {
  	display:none;
  }
  #logopk {
  	position:absolute;
  	top:0%;
  	left:1%;
  	width:50%;
  }
  #pionierlablogo {
  	position:absolute;
  	top:2%;
  	right:1%;
  	width:43%;
  }
  #wykresPM {
  	position:relative;
  	left:-5%;
  	top:-3%;
  	width:99%;
  }
  #wykresNOSO {
  	position:relative;
  	left:-5%;
  	top:-3%;
  	width:99%;
  }
  #jakoscpowietrza {
  	width:65%;
  }
  #indexspace {
  	position:absolute;
  	width:100%;
  	top:50%;
  }
  #measurementerr{
  	position:absolute; 
  	font-size: 1.5em; 
  	font-family: Arial; 
  	width: 30%;
  }
  #fromtime{
  	font-size: 1.5em;
  	font-family: Arial;
  }
  #measurementmain{
  	position:absolute; 
  	font-size: 1.5em; 
  	font-family: Arial; 
  	width:30%; 
  	height:20%; 
  	top:17%;
  }
  #measurementopt{
  	position:absolute; 
  	font-size: 1.5em; 
  	font-family: Arial; 
  	width:30%; 
  	height:20%; 
  	left:33%; 
  	top:17%;
  }
  #measurementmeteo{
  	position:absolute; 
  	font-size: 1.5em;
  	font-family: Arial;
  	width:30%; 
  	height:20%; 
  	right:3%; 
  	top:17%;
  }
  #timeinfo{
  	font-size: 1em; 
  	font-family: Arial;
  }
  #time {
  	font-size:1.875em;
  }
  #graphText {
  	font-size:1em;
  }
  .graphTextMove:before {
  	content:"\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
  }
}

@media only screen and (min-width: 1600px) {
  .live_mobile {
    	display:none;
  }
  .live_tablet {
    	display:none;
  }
  .live_laptopS {
  	display:none;
  }
  .live_laptopL {
  	display:none;
  }
  #indexTitle {
  	font-size:1.875em;
	top:200%;
  }

  #indexText {
  	font-size:1.5625em;
  }
  #logopk {
  	position:absolute;
  	top:-0.5%;
  	left:1%;
  	width:39%;
  }
  #pionierlablogo {
  	position:absolute;
  	top:1%;
  	right:1%;
  	width:40%;
  }
  #jakoscpowietrza {
  	width:46%;
  }
  #indexspace {
  	position:absolute;
  	width:100%;
  	top:55%;
  }
  #wykresPM {
  	position:relative;
  	left:-5%;
  	top:0%;
  	width:100%;
  }
  #wykresNOSO {
  	position:relative;
  	left:-5%;
  	top:0%;
  	width:100%;
  }
  #measurementerr{
  	position:absolute; 
  	font-size: 1.875em; 
  	font-family: Arial; 
  	width: 30%;
  }
  #fromtime{
  	font-size: 1.875em;
  	font-family: Arial;
  }
  #measurementmain{
  	position:absolute; 
  	font-size: 1.875em; 
  	font-family: Arial; 
  	width:30%; 
  	height:20%;
  }
  #measurementopt{
  	position:absolute; 
  	font-size: 1.875em; 
  	font-family: Arial; 
  	width:30%; 
  	height:20%;
  	left:33%;  
  }
  #measurementmeteo{
  	position:absolute; 
  	font-size: 1.875em;
  	font-family: Arial;
  	width:30%; 
  	height:20%;  
  	right:3%;
  }
  #timeinfo{
  	font-size: 0.562em; 
  	font-family: Arial;
  }
  #time {
  	font-size:1.875em;
  }
}

/* ustawienia galerii zdjęć*/
div.gallery {
  border: 0.0625em solid #ccc;
}

div.gallery:hover {
  border: 0.0625em solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 0.9375em;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0em 0.375em;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 0.375em 0em;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

/* Parametry pod TV */
#wykresPMtv {
position:relative;
  left:-1%;
  top:0%;
  width:50%;
}
#wykresNOSOtv {
  position:relative;
  left:49%;
  top:-57%;
  width:50%;
}
#graphText {
  font-size:1em;
}

.graphTextMoveTV:before {
  content:"\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}