body {
	background-color:#f3f3f3; /* ustawiamy kolor tła naszej strony */
	font-family: Arial, Helvetica, sans-serif; /* ustawiamy rodzine czcionki z której korzystamy */
}

#formularz {
        width:560px; /* ustawiamy szerokość formularza */
        margin:0 auto; /* jeżeli nasz formularz ma ustawioną szerokość wyśrodkowujemy go */
        background-color:#fff; /* dodajemy kolor tła naszemu formularzowi */
        border:2px solid #ccc; /* dodajemy obramowanie o szerokości 2px */
        border-radius:10px; /* zaokrąglamy tło naszego formularza */
		padding:10px; /* dodajemy margines wewnątrz naszego formularza */
        margin-top:10px; /* dodajemy margines górny naszego formularza */
}

#formularz label {
    display:block;/* ustawiamy by label rozpoczynał się od nowej linii*/
    margin-bottom:5px;/* dodajemy margines dolny */
    font-weight:bold; /* pogrubiamy czcionkę */
    text-transform: uppercase; /* zamieniamy wszystkie litery na duże */
    font-size:12px; /* ustawiamy wielkość czcionki */
    color:#555555; /* ustawiamy kolor czcionki */
}

#formularz input {
	padding:5px; /* dodajemy margines wewnątrz naszego pola */
	border-radius:3px; /* dodajemy zaokraglone rogi */
	border:1px solid #ccc; /* dodajemy obramowanie */
	margin-bottom:10px; /* dodajemy margines dolny */
	width:200px; /* ustalamy szerokość */
}

#formularz input#submit {
	width:200px; /* ustalamy szerokość */
	cursor:pointer; /* zmieniamy kursor */
	margin-bottom:0px;/* resetujemy margines dolny */
}
#top{
	text-align:center;
}
#success{
	width:500px;
	margin: 0 auto;
	margin-top:200px;
	padding-bottom:50px;
	padding-top:50px;
	text-align:center;
	background-color:#B7DEC0;
	border: 2px solid #11942E;
	border-radius:10px;
}
#waring {
	width:500px;
	margin: 0 auto;
	margin-top:200px;
	padding-bottom:50px;
	padding-top:50px;
	text-align:center;
	background-color:#F7F985;
	border: 2px solid #F0F40B;
	border-radius:10px;
}
#error{
	width:500px;
	margin: 0 auto;
	margin-top:200px;
	padding-bottom:50px;
	padding-top:50px;
	text-align:center;
	background-color:#FBC2C2;
	border: 2px solid #F23434;
	border-radius:10px;
}

#admin{
	margin:0 auto;
	margin-top:10px;
	padding:10px;
	background-color:#fff;
    border:2px solid #ccc;
	border-radius:10px;
	text-align:center;
	font-size:0.9em;
	overflow: hidden;
}
      /* ------------------------ POZIOME MENU CSS ------------------------ */
      /* wygląd elementu - ol */
      #menu {
        width:80%;
        margin:0 auto;
		margin-bottom: 15px;
        padding:0;
        list-style-type:none;
        background-image:linear-gradient(#FFF 0%, #EEE 30%, #DDD 70%, #FFF 100%);
      }

      /* naprawa wysokości elementu - ol */
      #menu:after {
        content:'';
        display:block;
        clear:both;
      }

      /* wygląd elementów - li*/ 
      #menu > li {
        float:left;
      }

      /* pierwszy element - li - elementu o identyfikatorze menu */
      #menu > li:first-child {
        background-color:red;
        width:20%;
      }

      /* drugi element - li - elementu o identyfikatorze menu */
      #menu > li:first-child + li {
        background-color:green;
        width:10%;
      }

      /* trzeci element - li - elementu o identyfikatorze menu */
      #menu > li:first-child + li + li {
        width:10%;
      }
	  #menu > li:first-child + li + li + li {
        width:10%;
      }
	  #menu > li:first-child + li + li + li + li{
        width:10%;
      }
	  #menu > li:first-child + li + li + li + li + li{
        width:20%;
      }
	  #menu > li:first-child + li + li + li + li + li + li{
        width:20%;
      }
      /* wygląd elementów - a */
      #menu > li > a {
        display:block;
        padding:15px;
        text-decoration:none;
        text-align:center;
        color:#000;
        background-color:#DDD;
        box-shadow:0 0 0 1px #FFF inset;
        background-image:linear-gradient(#FFF 0%, #EEE 30%, #DDD 70%, #FFF 100%);
      }

      /* wygląd elementów - a - po najechaniu kursorem myszki na element - li */
      #menu > li:hover > a {
        color:#00F;
        background-color:#FFF;
        background-image:none;
      }

      /* -------------------- ROZWIJANA CZĘŚĆ MENU CSS -------------------- */
      /* wygląd elementów - li - rodzica każdej części rozwijanej menu CSS */
      #menu > li {
        position:relative;
      }

      /* wygląd elementów - ul */
      #menu > li > ul {
        width:100%;
        visibility:hidden;
        position:absolute;
        z-index:1;
        margin:0;
        padding:0;
        list-style-type:none;
        background-color:#FFF;
      }

      /* wygląd elementów - ul - po najechaniu kursorem myszki na element - li */
      #menu > li:hover > ul {
        visibility:visible;
      }

      /* wygląd elementów - li */
      #menu > li > ul > li {
        box-shadow:0 -4px 4px -4px #AAA;
      }

      /* wygląd pierwszego dziecka elementu typu - li */
      #menu > li > ul > li:first-child {
        box-shadow:none;
      }

      /* wygląd ostatniego dziecka elementu typu - li */
      #menu > li > ul > li:last-child {
        box-shadow:0 -4px 4px -4px #AAA, 0 4px 4px -4px #AAA;
      }

      /* wygląd elementów - a */
      #menu > li > ul > li > a {
        display:block;
        text-decoration:none;
        padding:15px;
        color:#000;
      }

      /* wygląd elementów - a - po najechaniu kursorem myszki na element - li */
      #menu > li > ul > li:hover > a {
        color:#00F; 
        background-color:#F0F0F0;
        background-image:linear-gradient(#FFF, #EEE, #FFF);
      }

      /* --------------- ANIMOWANIE ROZWIJANEJ CZĘŚCI MENU CSS --------------- */
      /* wygląd elementów - ul */
      #menu > li > ul {
        transform:scaleY(0);
        -webkit-transform:scaleY(0);
        transform-origin:50% 0;
        -webkit-transform-origin:50% 0;
        transition:250ms;
      }

      /* wygląd elementów - ul - po najechaniu kursorem myszki na element - li */
      #menu > li:hover > ul {
        transform:scaleY(1);
        -webkit-transform:scaleY(1);
      }