@charset "utf-8";
/* SZKIELET poczatek */
/* Podstawowy łatwy do zrozumienia przykład budowy strony 'na divach z css'. Raczej nie ma czego tu szukać. */
body {
margin: 0;
padding: 0;
}

#kontener {
width: 900px; /* ewentualna zmiana szerokości strony tutaj */
border: solid 1px;
padding: 0;
margin: 0 auto;
position: relative;
}

#logo {
height: 100px;
width: 900px; /* szerokość strony  zmiana na procenty potem sprawdzic */
border: solid;
border-width: 0 0 1px;
}

#upperfoot {
height: 13px;
width: 894px; /* szerokość strony */
border: solid;
border-width: 0 0 1px;
padding: 2px 3px;
}

#menu {
float:left;
width: 198px;
padding: 0;
border: solid;
border-width: 0 0 1px 0;
}

#main {
float: right;
width: 681px; /* szerokość strony */
min-height: 657px;
margin: 0;
padding: 10px;
border: solid;
border-width: 0 0 1px 1px;
}

#foot {
clear: both;
height: 18px;
border: solid;
border-width: 0 0 0;
padding: 1px 0;
}

/* SZKIELET koniec */
/* Kolory - początek - zachęcam do zmian co jakiś czas -  Kolory - początek -  Kolory - początek -  Kolory - początek - */
body {
background-color: #cca879;
color: #444;
background-image: url(../gfx/tlobody.png);
background-repeat: repeat-x;
}

#upperfoot {
color: #666;
}

#kontener {
border-color: #555;
background-color: #efe8d9;
background-image: url(../gfx/tlokontener.png);
background-repeat: repeat-y;
border-radius: 0 0 10px 10px ;
-moz-border-radius: 0 0 10px 10px ;
-webkit-border-radius: 0 0 10px 10px ;
box-shadow: 0 0 20px -5px #000;
-moz-box-shadow: 0 0 20px -5px #000;
-webkit-box-shadow: 0 0 20px -5px #000;
}

#logo {
background-color: #fff2ce;
background-image: url(../gfx/logo.png);
background-repeat: no-repeat;
border-color: #555;
}

#upperfoot {
border-color: #555;
}

#menu {
background-image: url(../gfx/tlomenu.png);
background-repeat: no-repeat;
background-color: #fff2ce;
border-color: #555;
}

#menu ul.menu li {
color: #4a5381;
text-shadow: #bca869 1px -1px 2px;
}

#menu ul.menu ul li {
text-shadow: none;
}

#menu a {
color: #333;
}

#menu a:hover {
color: #4a5381;
}

#main {
border-color: #555;
background-color: #fff2ce;
background-image: url(../gfx/tlomain.png);
background-position: right bottom;
background-repeat: repeat-y;
border-radius: 0 0 0 10px ;
-moz-border-radius: 0 0 0 10px ;
-webkit-border-radius: 0 0 0 10px ;
}

#foot {
border-color: #555;
color: #888;
text-align: center;
}

a {
color: #4a5381;
}
a:active {
color: #aaaaaa;
}

a:hover {
color: #777;
}

h1 {
text-shadow: 0 0 2px #efe8d9, 0 0 2px #efe8d9, 0 0 5px #4a5381;
}

table{
background-color: #fff2ce;
}

table th {
background-color: #ffe9ad;
}
table caption {
color: #4a5381;
}

/* KOLORY - koniec*/
/* CZCIONKI i takie różne. - początek CZCIONKI i takie różne. - początek CZCIONKI - początek - CZCIONKI - początek - CZCIONKI - początek - CZCIONKI - początek */
body {
font-size: medium;
font-family: Tahoma, Geneva, sans-serif;
text-align: left;
font-size: 10pt;
}

#upperfoot{
font-size: 9pt;
}

#upperfoot span.data {
float: left;
}

#upperfoot span.wakacje {
float: right;
}

#menu ul.menu {
display: block;
list-style: none;
margin: 0;
padding:0;
}
#menu ul.menu li {
list-style: none;
display: block;
font-size: 14pt;
font-family: 'Bookman Old Style', serif;
letter-spacing: 1px;
margin: 9px 0 5px 5px;
padding: 0
}
#menu ul.menu li:first-child {
margin-top: 3px;
}
#menu ul.menu ul  {
display: block;
padding: 0;
margin: 0;
}
#menu ul.menu ul li {
margin: 0;
height: 18px;
}
#menu ul.menu ul li:first-child {
margin-top: 0;
}
#menu a:before {
content: "»  ";
font-size: 12px;
}
#menu a {
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
padding: 0 10px 0 15px;
margin: 0;
font-size: 13px;
letter-spacing: 0;
font-weight: normal;
}
#menu a:hover {
padding: 0 5px 0 20px;
}
#menu a:active {
}
#main {
text-align: justify;
}
#main img {
margin:7px;
border: solid 1px;
}
#foot {
padding: 0 10px;
text-align: right;
font-size: 9pt;
}
p {
text-indent: 2em;
}
a {
text-decoration: none;
}
a:active {
color: black;
}
a:focus {
outline: none;
} 
a.out {
text-decoration: underline;
}
h1{
font-size: 19pt;
text-align: center;
}
h2{
font-size: 16pt;
}
h3{
font-size: 14pt;
}
h4{
font-size: 12pt;
}
ul, ul li {
list-style: circle;
text-indent: 0;
}

ul.klasy, ul.klasy li {
list-style: decimal;
}

ul.wydarzenia, ul.wydarzenia li {
list-style: none;
font-size: 11pt;
}

#nauczyciele ul li {
list-style: none;
font-size: 10pt;
}

#nauczyciele li {
font-size: 11pt;
padding: 2px 0;
}

table {
margin: 10px auto;
box-shadow: 3px 2px 4px #cca879;
-moz-box-shadow: 3px 2px 4px #cca879;
}
table, table tr, table td {
border: solid 1px;
border-collapse: collapse;
border-spacing: 0;
padding: 3px;
}
table caption {
border: 0;
font-size: 13pt;
padding: 3px 4px;
}
table th {
border: solid 1px;
border-collapse: collapse;
border-spacing: 0;
padding: 3px;
}
/* CZCIONKI koniec*/



/**/
span#na_gore {cursor:pointer; clear:right; float: right; visibility:hidden;}
span#na_gore:hover {text-decoration: underline;}

.hid {visibility: hidden;}
/* FOTOGALERIA - poczatek*/
#fotogaleria_tlo {position: fixed; background-color: #000000;
	top: 0px; left:0px; bottom: 0px; right: 0px;
	opacity: 0.7;
	/*pozdrowienia dla ie*/
	filter: alpha(opacity=70);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; display:none;
}
#fotogaleria_tresc_x {position: fixed; background-color: #FFFFFF;
	width: 400px; height: 266px;
	top: 50%; left: 50%; margin-left: -200px; margin-top: -200px;
	padding: 0px; display:none;
}
#zdjecia_tresc .x {display:none;position: absolute; top:0px; left: 0px; width: 20px; height: 20px; border: 1px solid red;
	cursor: pointer; background-color: #DDDDDD;
}

#mapka {display: none; width: 600px; height: 400px; margin: 0 auto; border: 1px solid #000000;}
#fotogaleria{position: fixed; top:0px; left:0px;/* bottom: 0px;*/ right: 0px;}

/* galeria */
.pikachoose{width:622px;margin:50px auto auto auto;}
/* This is the ul you have all your images in */
.pikachoose ul{padding-left:0;width:610px;/*height:180px;*/margin:0;overflow:auo;}
.pikachoose ul li{float: left;border:1px solid #555;padding:2px;background:#777;margin:0 3px 4px 0;position:relative;overflow:hidden;}
.pikachoose ul li div img{position:relative;cursor:pointer;}

/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
.pika_main{width:606px;height:414px;display:block;position:relative;margin-bottom:10px;}
/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img{position:absolute;top:2px;left:2px;}
.pika_back_img{position:relative;top:0px;}
.pika_subdiv{position:relative;border:1px solid #555;background:#777;padding:2px;}
.pika_subdiv img, .pika_subdiv a img{border:none;}
.pika_caption{width:500px;height:16px;padding-top:4px;text-align:center;position:absolute;bottom:7px;left:3px;background:url('black.png') top left;}
.pika_caption a{color:white;}

.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('play.png') top center no-repeat;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('pause.png') top center no-repeat;}

/* kiedys sie tym zajac */
.pika_navigation {display:none;}
.pika_navigation a{font-size: 12px; text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}

/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:5px;left:5px;height:456px;width:100px;background:url('rewind.png') top left no-repeat;}
.pika_next_hover{position:absolute;top:5px;right:5px;height:456px;width:100px;background:url('fastf.png') top right no-repeat;}

/* FOTOGALERIA - koniec */