body {
    background-color : #00002A;
    font-family : Verdana, sans-serif;
    font-size : 1em;
    color:#000000;
    background-image : url('pliki/puzzle.png');
  }

a:link {
    color : inherit;
  }

div#logo {
    background-color:hsla(0, 0%, 6%, 0.9);
    border-bottom:5px #FFFF33 outset;
    border-top:5px #FFFF33 inset;
    
    -webkit-transition: 1s ease-out;
    -moz-transition: 1s ease-out;
    -o-transition: 1s ease-out;
    -khtml-transition: 1s ease-out;
    transition: 1s ease-out;

}

div#logo:hover {
   border-bottom:5px #FFFFCC outset;
   border-top:5px #FFFFCC inset;
   background-color:#000000;
}

div#logo:active {
   border-bottom:5px #FFFFCC dashed;
   border-top:5px #FFFFCC dashed;
   background-color:hsla(110, 100%, 30%, 0.6);
}

div#cale1, div#cale2 {
   background-color:hsla(240, 33%, 19%,0.65);
 } 

/*div#cale1:hover, div#cale2:hover {
   background-color:rgba(52, 49, 76,0.55);
}*/

nav div {
    border:1px #FFA858 solid;
    border-top: 7px #FFA858 solid;
    box-shadow: 0 0 5px 5px hsla(240, 33%, 35%, 0.75);
}
nav div:hover {
    border:1px #FFA858 solid;
    border-top: 7px #FFA858 solid;
    box-shadow: 0 0 5px 5px hsla(240, 33%, 45%, 0.75);
    border-radius: 5px;
}

nav div ul li {
    font-size:1.4em;
    color:#8F9CCB;
    -webkit-transition: color 0.4s linear;
    -moz-transition: color 0.4s linear;
    -o-transition: color 0.4s linear;
    -khtml-transition: color 0.4s linear;
    transition: color 0.4s linear;
}



nav div:hover {
    border:1px #FF9933 solid;
    border-top: 7px #FF9933 solid;
  }
 
 nav div:hover ul li {
    color:hsla(228,18%,28%,1);
    /* color: #3a3f53  kolor w hsla, żeby przeglądarki bez obsługi tegoz, nie zmienialy koloru czcionki naglowka Dla poczatkujacych*/
}

nav div ul li ul li ul li:hover, .fst:hover {
    background-color:#FFFF00;
    color:#000000;
  }


nav div ul li ul li ul li:active, .fst:active {
    background-color:#FF0000;
    color:#FFFFFF !important;
  }

nav div ul li ul li, nav div ul li ul li ul li, nav div ul li ul li ul li ul li {
    color : #000000;
    font-size : 14px;
    list-style-image : url('pliki/document.png');
    
    -webkit-transition: background 0.1s ease-out;
    -moz-transition: background 0.1s ease-out;
    -o-transition: background 0.1s ease-out;
    -khtml-transition: background 0.1s ease-out;
    transition: background 0.1s ease-out;
}

nav div:hover ul li ul li, nav div:hover ul li ul li ul li, nav div:hover ul li ul li ul li ul li {
    color : #000000;
}

/* pierwszy rząd - div#cale1 */

div#duiso {
	
    background-image : url('pliki/duiso_fallback_background.png');

    background-image: -moz-linear-gradient(270deg, hsla(227, 56%, 86%,0.01) 10px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
    background-image: -webkit-linear-gradient(270deg, hsla(227, 56%, 86%,0.1) 20px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
    background-image: -ms-linear-gradient(270deg, hsla(227, 56%, 86%,0.1) 20px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
    background-image: -o-linear-gradient(270deg, hsla(227, 56%, 86%,0.01) 10px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
    background-image: -khtml-linear-gradient(270deg, hsla(227, 56%, 86%,0.1) 20px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
    background-image: linear-gradient(270deg, hsla(227, 56%, 86%,0.1) 20px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
    
    -webkit-transition: 2s ease-out;
    -moz-transition: 2s ease-out;
    -o-transition: 2s ease-out;
    -khtml-transition: 2s ease-out;
    transition: 2s ease-out;
    
    /*background-color:#C6CFEE;*/
    /*background-image : url('pliki/tlotabela');*/
    /*background-repeat : repeat-y;*/
  }

    div#duiso:hover {
/*	background-image: -moz-linear-gradient(270deg, hsla(227, 56%, 86%,0.45) 10px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
	background-image: -webkit-linear-gradient(270deg, hsla(227, 56%, 86%,0.45) 10px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
	background-image: -ms-linear-gradient(270deg, hsla(227, 56%, 86%,0.45) 10px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
	background-image: -o-linear-gradient(270deg, hsla(227, 56%, 86%,0.45) 10px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
	background-image: -khtml-linear-gradient(270deg, hsla(227, 56%, 86%,0.45) 10px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
	background-image: linear-gradient(270deg, hsla(227, 56%, 86%,0.45) 10px, hsla(227, 56%, 86%,0.85), hsla(242, 44%, 71%,1));
*/

	background-color:hsla(227, 66%, 86%,0.85);
  }

div#dbp {
	
	 background-image : url('pliki/dbp_fallback_background.png');
	
    background-image: -moz-linear-gradient(270deg, hsla(101, 58%, 85%,0.01) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
    background-image: -webkit-linear-gradient(270deg, hsla(101, 58%, 85%,0.01) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
    background-image: -ms-linear-gradient(270deg, hsla(101, 58%, 85%,0.01) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
    background-image: -o-linear-gradient(270deg, hsla(101, 58%, 85%,0.01) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
    background-image: -khtml-linear-gradient(270deg, hsla(101, 58%, 85%,0.01) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
    background-image: linear-gradient(270deg, hsla(101, 58%, 85%,0.01) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));

    -webkit-transition: 2s ease-out;
    -moz-transition: 2s ease-out;
    -o-transition: 2s ease-out;
    -khtml-transition: 2s ease-out;
    transition: 2s ease-out;
  
   /* background-color:#CAECBD;
    background-image : url('pliki/tlo_zielone.png');
    background-repeat : repeat-y;*/
  }

    div#dbp:hover {
/*	background-image: -moz-linear-gradient(270deg, hsla(101, 58%, 85%,0.45) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
	background-image: -webkit-linear-gradient(270deg, hsla(101, 58%, 85%,0.45) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
	background-image: -ms-linear-gradient(270deg, hsla(101, 58%, 85%,0.45) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
	background-image: -o-linear-gradient(270deg, hsla(101, 58%, 85%,0.45) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
	background-image: -khtml-linear-gradient(270deg, hsla(101, 58%, 85%,0.45) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
	background-image: linear-gradient(270deg, hsla(101, 58%, 85%,0.45) 10px, hsla(115, 46%, 70%,0.85), hsla(115, 46%, 70%,1));
*/

	background-color:hsla(115, 56%, 86%,0.85);
    }

div#dp {
	
		background-image : url('pliki/dp_fallback_background.png');
	
      background-image: -moz-linear-gradient(270deg, hsla(60, 100%, 82%,0.01) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
      background-image: -webkit-linear-gradient(270deg, hsla(60, 100%, 82%,0.01) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
      background-image: -ms-linear-gradient(270deg, hsla(60, 100%, 82%,0.01) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
      background-image: -o-linear-gradient(270deg, hsla(60, 100%, 82%,0.01) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
      background-image: -khtml-linear-gradient(270deg, hsla(60, 100%, 82%,0.01) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
      background-image: linear-gradient(270deg, hsla(60, 100%, 82%,0.01) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));

    -webkit-transition: 2s ease-out;
    -moz-transition: 2s ease-out;
    -o-transition: 2s ease-out;
    -khtml-transition: 2s ease-out;
    transition: 2s ease-out;
  
    /*background-color:#FFF99D;
    background-image : url('pliki/tlo_zolte.png');
    background-repeat : repeat-y;*/
  }
  
  div#dp:hover {
/*	background-image: -moz-linear-gradient(270deg, hsla(60, 100%, 82%,0.45) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
	background-image: -webkit-linear-gradient(270deg, hsla(60, 100%, 82%,0.45) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
	background-image: -ms-linear-gradient(270deg, hsla(60, 100%, 82%,0.45) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
	background-image: -o-linear-gradient(270deg, hsla(60, 100%, 82%,0.45) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
	background-image: -khtml-linear-gradient(270deg, hsla(60, 100%, 82%,0.45) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
	background-image: linear-gradient(270deg, hsla(60, 100%, 82%,0.45) 10px, hsla(60, 100%, 82%,0.85), hsla(44, 100%, 76%,1));
*/
	background-color:hsla(60, 100%, 88%,0.85);

  }
/* drugi rząd - div#cale2 */


div#gry {
    background-color:#FFFFCC;
    background-image : url('pliki/ktron.png');
    background-position : 100px 10px;
    background-repeat : no-repeat;
    -webkit-transition: 0.5s linear;
    -moz-transition: 0.5s linear;
    -o-transition: 0.5s linear;
    -khtml-transition: 0.5s linear;
    transition: 0.5s linear;
  }


div#ksiazka {
   background-color:#F6F3E2;
   background-image : url('pliki/pismo_zolte.png');
    -webkit-transition: 0.5s linear;
    -moz-transition: 0.5s linear;
    -o-transition: 0.5s linear;
    -khtml-transition: 0.5s linear;
    transition: 0.5s linear;
}


div#metatekst {
   background-color:#FFFFFF;
   background-image : url('pliki/pismo_biale.png');
    -webkit-transition: 0.5s linear;
    -moz-transition: 0.5s linear;
    -o-transition: 0.5s linear;
    -khtml-transition: 0.5s linear;
    transition: 0.5s linear;
}


/* <STOPKA> */

div#stopka {
    background-color:rgba(0,0,26,0.5);
    border-top: 3px #FFDD01 double;
    border-bottom:3px #FFDD01 solid;
    
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -khtml-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

div#stopka:hover {
   background-color:rgba(0,0,26,0.3);
   border-bottom:3px #DFC101 solid;
   border-top:3px #DFC101 double;
}

div#stopka:active {
   background-color:rgba(0,0,26,0.3);
   border-bottom:3px #FFFFFF dashed;
   border-top:3px #FFFFFF double;
}

/* </STOPKA> */