body {font-family: Cambria serif; 
      font-size: 16px;
      background-color:white;
      margin:0;
	  }

 .headerLink:link {
  text-decoration: none;
  color:white;
  font-weight:normal;
}

.headerLink:visited {
  text-decoration: none;
  color:white;
  font-weight:normal;
}

.headerLink:hover {
  text-decoration: none;
  color:white;
  font-weight:normal;
}

.headerLink:active {
  text-decoration: none;
  color:white;
  font-weight:normal;
}
#pasekgorny {position: fixed;
             left: 0; right: 0; top: 0;
			 min-width: 305px;}
#paseknawigacji {position: fixed;
             left: 0; right: 0; top: 0;
			 z-index:3;
			 min-width:350px;
			 }
#nawigacja {position:fixed;
left: 0; right: 0; top: 0;
min-width: 305px;
z-index:3;}			 

#pierwiastekopis {margin-top:120px;
padding:20px 20px 20px 20px;
line-height: 1.75;
font-size:18px;
min-width: 350px;
}		
#wstepdoopisu {padding-right: 200px;
padding-bottom: 30px;
        margin-left:0;
		}	 
header {background-color:#00284d; 
     color:#ffffff;
     height: 30px; width: 100%;
     margin: 0; padding:10px 20px 10px 20px;
     font-size: 20px;
     display: inline-block;
     }

.Nav {float: left;
    overflow: hidden;
    background-color: #bec9db;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
background-color: #bec9db;
display: inline-block;
border-bottom: 1px solid #00284d;
    }

.listaNav {float: left;
    display: inline;
    padding: 0px;
    margin:0;
    background-color: #bec9db;
}
	
.linki {display: inline-block;
width:100%;
padding: 10px;
margin:0;
}	
	

a {color:#00284d;}
a:hover {font-weight: bold;}
a:visited {color:#00284d;}

.listaNav:visited {color:black; text-decoration: none;}
.linki:visited {color:black; text-decoration: none;}
.listaNav:hover {color: white !important; 
background-color: #00284d;}
.linki:hover {color: white !important;
background-color: #00284d;
font-weight:normal;}
.listaNav:active {color: white !important; 
background-color: #00284d;}
.linki:active {color: white !important; 
background-color: #00284d;
font-weight:normal;}
.linki:link {color:black; text-decoration: none;}

#opis, #opis2 {text-align:left;
       border: none;
       padding-left: 10px;
       }

div.one {background-color: white;
     text-align: center;
	 padding-top: 140px;
	 padding-bottom:50px;
       }


#calyslownik {margin-top:180px;}
table {margin: 0 auto;
        border-collapse: separate;
        border-spacing: 1px;
       empty-cells: hide;
     
       height: auto;
      }

td {width: 40px;
    height: 40px;
    border: 1px solid white;
   font-size: 12px;
    }

span {font-size: 10px
      overflow: hidden;
      text-align: center;}

.metale {background-color:#99dfff;}
.metaloidy {background-color:#b3e7ff;}
.metalealk {background-color: #4dc6ff;}
.metaleziemalk {background-color:#66cfff;}
.lantanowce {background-color:#adebeb;}
.aktynowce {background-color:#85e0e0;}
.polmetale {background-color: #ccccff;}
.niemetale {background-color:#ffcccc;}
.szlachetne {background-color:#ffffb3;}
.halogeny {background-color:#ffe6e6;}
.group {vertical-align: bottom;
        height:20px;
        background-color: #bec9db;}
.period {width: 20px;
         min-width:20px;
         height: 40px;
         text-align: center;
        background-color: #bec9db;}
.typ {height: 80%;
     border-radius:8px;
     }
.oznaczenia {border: 1px solid #00284d;
             border-bottom: none;
             border-radius:2px;
			 padding-bottom: 1%;}

button {border:none; 
        background-color: transparent;
        width:40px;
        height:40px;
        max-width: 70px;
         max-height:70px;
         font-family: Cambria serif; 
        font-size: 16px;
        }

button:focus {outline: 0;}
button:-moz-focusring {
  outline: 0;}

 
 #komunikatZlaNazwa {
	 display: none;
	 color: red;
	 margin-bottom:50px;
 }
 #szukanyPierw {
	 border-radius:8px;	
	 height: 30px;
	 padding:5px;
 }
.buttony {width:100%;
          height:auto;
		  float: left;
		  
		  border-bottom: 1px solid #00284d;
		  background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#bec9db), color-stop(100%,#b3d9ff));
  background: -webkit-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -moz-linear-gradient(top,   #dee4ed 4%, #b3d9ff 100%);
  background: -o-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -ms-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: linear-gradient(to bottom,  #dee4ed 4%,#b3d9ff 100%);}
.wlasciwosci {
              height:40px;
              min-width: 12.2%;
              padding-bottom:5px;
              font-size: 16 px;
              background-color:transparent;
              
			  margin-top:0;
              border-collapse: collapse;
              float: left;
              color:black;
              }
.wlasciwosci:hover {background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#004280), color-stop(100%,#00284d));
  background: -webkit-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -moz-linear-gradient(top,  #004280 31%, #00284d 100%);
  background: -o-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -ms-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: linear-gradient(to bottom,  #004280 31%,#00284d 100%);
                    color: white;
}

.litery:hover {background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#004280), color-stop(100%,#00284d));
  background: -webkit-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -moz-linear-gradient(top,  #004280 31%, #00284d 100%);
  background: -o-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -ms-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: linear-gradient(to bottom,  #004280 31%,#00284d 100%);
                    color: white;}
.klikniete {height:40px;
              min-width: 14.28%;
              
              font-size: 16 px;
              background-color:#dee4ed;
              
			  margin-top:0;
			  border: 1px solid #00284d;
              border-collapse: collapse;
              float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#004280), color-stop(100%,#00284d));
  background: -webkit-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -moz-linear-gradient(top,  #004280 31%, #00284d 100%);
  background: -o-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -ms-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: linear-gradient(to bottom,  #004280 31%,#00284d 100%);
                    color: white;
}

.klik {border: 1px solid #00284d;
             font-size:18px;
             border: 1px solid #00284d;
             width:auto;
			min-width:200px;
			border-radius:8px;
			background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#004280), color-stop(100%,#00284d));
  background: -webkit-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -moz-linear-gradient(top,  #004280 31%, #00284d 100%);
  background: -o-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -ms-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: linear-gradient(to bottom,  #004280 31%,#00284d 100%);
                    color: white;}

.kliknieteLiterki {background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#004280), color-stop(100%,#00284d));
  background: -webkit-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -moz-linear-gradient(top,  #004280 31%, #00284d 100%);
  background: -o-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -ms-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: linear-gradient(to bottom,  #004280 31%,#00284d 100%);
                    color: white;}

.buttony {width: 100%;}

.przerwa {height: 8px;}

.listapierw {
            font-size:16px;}

.listawlascpierw {padding-right: 25%;}
#lista {margin-top:170px;
      padding-left: 30px;
		min-width: 32%;
		float:left;
display:inline-block;}
#h2lista {padding-left: 30px;}
#listaWlasciwosci {margin-top:10px;
		min-width: 45%;
		float:left;}
#kolejnosciopis {float: left;
		width:550px;			
				position: fixed;
				margin-left:20%;
			margin-top:190px;
			}

#opisy {        font-size: 18px;
				padding: 40px;
				margin-top:30px;
				margin-bottom: 10px;
				margin-right: 80px;
				background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#bec9db), color-stop(100%,#b3d9ff));
  background: -webkit-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -moz-linear-gradient(top,   #dee4ed 4%, #b3d9ff 100%);
  background: -o-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -ms-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: linear-gradient(to bottom,  #dee4ed 4%,#b3d9ff 100%);
				border: 1px solid #00284d;
				border-radius: 8px;
                line-height: 1;
			    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height:auto;
position: relative;
}


.kolejnosc, #szukaj	{border: 1px solid #00284d;
              font-size:18px;
             width:auto;
			border-radius:8px;	
min-width:200px;			
			background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#bec9db), color-stop(100%,#b3d9ff));
  background: -webkit-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -moz-linear-gradient(top,   #dee4ed 4%, #b3d9ff 100%);
  background: -o-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -ms-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: linear-gradient(to bottom,  #dee4ed 4%,#b3d9ff 100%);
              }

		
#kolejnosc:focus, #szukaj:focus {background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#004280), color-stop(100%,#00284d));
  background: -webkit-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -moz-linear-gradient(top,  #004280 31%, #00284d 100%);
  background: -o-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -ms-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: linear-gradient(to bottom,  #004280 31%,#00284d 100%);
                    color: white;
                    border: 1px solid #bec9db;
                    border-radius:8px;}
#kolejnosc:hover, #szukaj:hover {background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#004280), color-stop(100%,#00284d));
  background: -webkit-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -moz-linear-gradient(top,  #004280 31%, #00284d 100%);
  background: -o-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: -ms-linear-gradient(top,  #004280 31%,#00284d 100%);
  background: linear-gradient(to bottom,  #004280 31%,#00284d 100%);
                    color: white;
                    border: 1px solid #bec9db;
					border-radius:8px;}			
	.literki 	{background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#bec9db), color-stop(100%,#b3d9ff));
  background: -webkit-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -moz-linear-gradient(top,   #dee4ed 4%, #b3d9ff 100%);
  background: -o-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -ms-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
	background: linear-gradient(to bottom,  #dee4ed 4%,#b3d9ff 100%);}			
 .litery {backgroundColor: transparent;
  margin:0;
  padding:0;
  border-collapse: collapse;
  }	
  #szukaj {
	 margin-bottom:50px;
	 min-width:80px;
	 height: 50px;
	 min-height:50px;
	 padding:5px;
 }   
  #wstep {margin:30px;
         font-size: 18px;}
  #pojeciaNaLitere {text-transform: uppercase;
                    margin:30px;
					}
  #opisPojecia {margin-left:30px;
                margin-right:600px;
				font-size: 18px;
                padding: 40px;
				border: 1px solid #00284d;
				background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#bec9db), color-stop(100%,#b3d9ff));
  background: -webkit-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -moz-linear-gradient(top,   #dee4ed 4%, #b3d9ff 100%);
  background: -o-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -ms-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: linear-gradient(to bottom,  #dee4ed 4%,#b3d9ff 100%);
				position: relative;
				border-radius: 8px;
                                line-height: 1.5;
								box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
								min-width:300px;
								z-index:0;
								display:none;}
.pierwOpis {border: 1px solid #00284d;
           border-radius:8px;
           padding-bottom: 20px;
		   padding-right: 200px;
		   padding-top: 20px;
		   padding-left:20px;
		   margin-bottom:10px;
		   background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#bec9db), color-stop(100%,#b3d9ff));
  background: -webkit-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -moz-linear-gradient(top,   #dee4ed 4%, #b3d9ff 100%);
  background: -o-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -ms-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: linear-gradient(to bottom,  #dee4ed 4%,#b3d9ff 100%);
		   }
								
@media only screen and (min-width: 1020px) {td {font-size: 16px;
                                                max-width: 45px;
                                                max-height:45px;
                                                }
                                            button {font-size:16px;
                                            width: 45px;
                                            height: 45px;
                                             max-width: 45px;
                                             max-height:45px;}
					    .group {font-size:16px;}
                                            .period {font-size: 16px;
                                            max-width: 20px;
                                            max-height:45px;}
                                            #opis, #opis2 {font-size:14px;}
                                            span {font-size:10px;}}
@media only screen and (min-width: 1400px) {.kolejnosc {min-width:25%;}
#kolejnosciopis {margin-left: 30%;}}

@media only screen and (min-width: 900px) {span {font-size:10px;}
                                          }

@media only screen and (max-width: 1400px) {
                                           #kolejnosciopis {margin-left: 40%;}}
										 

@media only screen and (max-width: 970px) {
                                           #opisy {min-width: 350px;}}		
@media only screen and (max-width: 1070px) {
                                           #kolejnosciopis {margin-left: 50%;
										   width:40%;}
										   #opisy {min-width: 350px;}}										   
@media only screen and (max-width: 945px) {div.one {padding-top:200px;}}
										   @media only screen and (max-width: 930px) {div.one {width:100%;}
                                            td {width: 30px;
                                                height:30px;
                                              max-width:30px;
                                                max-height:30px;
                                                font-size: 12px;}
                                            button {width: 30px;
                                                height:30px;
                                                 max-width:30px;
                                                    max-height: 30px;
                                                    font-size: 12px;}
                                               .group {font-size:12px;}
					                           .period {font-size: 12px;
                                                max-width: 20px;
                                                max-height:30px;}
                                           #opis, #opis2 {font-size:12px;}
                                           span {font-size:8px;}
										   #opisy {min-width: 300px;}
										   }									 
  @media only screen and (max-width: 1200px) {#wstepdoopisu, .pierwOpis {padding-right: 20px;}}
  @media only screen and (max-width: 1500px) {#opisPojecia {margin-right: 300px;}}
  @media only screen and (max-width: 1300px) {#opisPojecia {margin-right: 20px;}}
@media only screen and (min-width: 1200px) {td {font-size: 18px;
                                                max-width: 55px;
                                                max-height:55px;
                                                }
                                            button {font-size:18px;
						                            width: 55px;
                                                     height:55px;
                                                    max-width: 55px;
                                                    max-height: 55px;
                                                    }
                                           .group {font-size: 18px;}
					                       .period {font-size: 18px;
                                                max-width: 20px;
                                                max-height:55px;}
				#opis, #opis2 {font-size:16px;}
span {font-size:12px;}}

							
@media only screen and (min-width: 1440px) {
                                            button {font-size:18px;
						       width: 60px;
                                                   height:60px;
                                                    max-width: 60px;
                                                    max-height: 60px;
                                                   }
                                        .group {font-size: 18px;}
                                        .period {font-size: 18px;
                                                max-width: 20px;
                                                max-height:60px;}
                                         #opis, #opis2 {font-size:18px;}
                                         span {font-size:14px;}}
@media only screen and (max-width: 840px) {
                                           #kolejnosciopis {margin-left: 55%;}
										  #opisy {min-width: 250px;}}	
@media only screen and (max-width: 825px)	{#kolejnosciopis, #lista {margin-top:200px;}}										 
@media only screen and (max-width: 820px)	{#pierwiastekopis {margin-top:160px;}}

@media only screen and (max-width: 780px)	{.wlasciwosci {min-width:111.42px;}
                                             .klikniete {min-width:111.42px;}
											 #kolejnosciopis {margin-left: 420px;}
											 }
 @media only screen and (max-width: 770px)	{#lista {margin-top:750px;
                                                     width:90%;
													 margin-left:0px;
												 margin-right:20px;
												 padding:0;}
											 #kolejnosciopis {position:absolute;
											 width:90%;
												 margin-top:240px;
												 margin-left:20px;
												 margin-right:20px;
												 margin-bottom:10px;
												 z-index:0;
												 }
												 #opisy {position:normal;}
											 }
}	
		
		@media only screen and (max-width: 570px)	{div.one {padding-top:250px;}}
		
		@media only screen and (max-width: 520px)	{#pierwiastekopis {margin-top:200px;}
		#kolejnosciopis {margin-top:270px;
		}
		@media only screen and (max-width: 400px)	{#kolejnosciopis {margin-top:310px;}
		}
		#lista {margin-top:850px;}}
@media only screen and (max-width: 465px)	{div.one {padding-top:300px;}}

@media only screen and (max-width: 358px)	{#pierwiastekopis {margin-top:210px;}
}	
@media only screen and (max-width: 349px)	{div.one {padding-top:350px;}}

@media only screen and (max-height: 708px)	{#kolejnosciopis {position: absolute;}
		}		

#lista {min-width:350px;
         padding-bottom:50px;}									  
#header1 {padding: 20px;
          margin-left:20px;
          min-width: 25%;
         background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#bec9db), color-stop(100%,#b3d9ff));
  background: -webkit-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -moz-linear-gradient(top,   #dee4ed 4%, #b3d9ff 100%);
  background: -o-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -ms-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: linear-gradient(to bottom,  #dee4ed 4%,#b3d9ff 100%);
              }
#headerName, #headerName2 {display: inline-block;
                           width: 50%;
                           text-align: left;
                           text-transform: uppercase;
                           font-weight: bold;}
#biblio {margin:30px;
         margin-top:80px;
		 padding-bottom:50px;}
		 
 #kontakt {margin-top: 40px;
   line-height: 1.5;
   margin-left: 20px;
   padding:20px;
   width:80%;
   min-width: 350px;
   font-size: 18px;
   }

   form {border: 1px solid #00284d;
				background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#bec9db), color-stop(100%,#b3d9ff));
  background: -webkit-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -moz-linear-gradient(top,   #dee4ed 4%, #b3d9ff 100%);
  background: -o-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: -ms-linear-gradient(top,   #dee4ed 4%,#b3d9ff 100%);
  background: linear-gradient(to bottom,  #dee4ed 4%,#b3d9ff 100%);
				border-radius: 8px;
                                line-height: 1.5;
								box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
								width:70%;
								min-width: 350px;
								margin-top:20px;
								padding:30px;}
#komentarz {width:90%;
            height: 150px;}								

			#stopka {text-align:center;
			width: 100%;
			position:fixed;
			bottom:0;
			background-color:#00284d;
			color:white;
			
			}
/* form {margin-left: 900px;
      margin-bottom: 30 px;
      font-family:Cambria; serif;
      font-size 12px;}

input {margin-bottom: 30 px;
       font-family:Cambria; serif;
      font-size 12px;
       }

input#submit {font-family:Cambria; serif;
            font-size 12px;
             background-color:#004280;} */