/* to jest informacja ważna m.in. dla google , która robi html uniwersalnym dla wszystkich przeglądarek*/
/* trzeba zdjąć margines z body ponieważ jest on z automatu jakis */
#body{
margin: 0;
}
/* robimy znacznik page , aby globalnie manewrować szerokością strony*/
#page{
width: 900px;
margin: 0 auto;
}
/*google lubi jak jest odnośnik o nazwie która coś realnie oznacza a żeby to ukryć robimy text-indent: -3000*/
/*display: block; zamienia na blokowy aby mozna było ustawiać marginesy wysokość i szerokość*/
/*position: absolute; ustawiamy aby wypozycjonować miejsce gdzie ma się znajdować coś*/
#firma{
/*text-decoration: none; usuwamy podkreślenie*/
color: #a8bf79;
font-size: 36px;
font-family: Tahoma, sans-serif;
text-decoration: none;
position: absolute;
top: 30px;
left: 114px
}
/*hover powoduje kolor w momencie najechania na odnosnik. Może jeszcze być visited, active*/
#firma:hover{
color: #666600 ;
}
#slogan{
color: #729998;
font-size: 15px;
font-family: Arial, sans-serif;
text-decoration: none;
z-index: 5;
margin-left: 258px;
position: absolute;
top: 115px;
left: 133px
}
#slogan:hover{
color: #000;
}
/* sprawdzamy kolory tła próbnikiem w PS, wysokość sprawdzamy zaznaczeniem i f8, marginesy też patrzymy zaznaczeniem*/
/* wstawiając obrazek w w tym przypadku w header, w znaczniku background wpisujemy 4 wartości: color image repeat(są 4 rodzaje repeat: no-repeat, repeat, repeat-x, repeat-y) position(podaje się 2 wartośći w px lub % po osi x i y ; */
/*position: relative; wpisujemy jeśli chcemy aby header było miejscem do którego ma się odnosić pozycjonowanie absolute*/
#logo{
background: url(logo4.jpg);
z-index: 1;
margin-left: 150px;
}
#firma{
z-index: 5;
margin-left: 251px;
}
#slogan{
z-index: 5;
margin-left: 258px;
}
/* dodaliśmy znacznik left aby dodać obrazek z zaokrągleniem aby nie zrzucało niżej reszty dodajemy znacznik float*/
#header1 .left{
background: #f2f2f0 url(header-left.jpg) no-repeat 0 0;
float: left;
width: 7px;
height: 169px;
position: absolute;
}
#menu{
background: url(menu-bg.jpg) repeat-x ;
height: 60px;
}
#menu ul{
list-style: none;
margin: 0 0 0 190px;
padding: 0;
}
#menu li{
font-size: 18px;
font-family: Arial, sans-serif;
float: left;
width: 120px;
text-align: center;
line-height: 59px;
}
#menu a{
display: block;
text-decoration: none;
color: black;
}
#menu a:hover{
font-size: 20px;
text-decoration: normal;
background: transparent url(menu-bg-on4.png) no-repeat 0 0;
}
a.br {
text-decoration: none;
}
#main a:hover {
font-size: 20px;
text-decoration: normal;
background: red;
}
#menu a:active{
text-decoration: none;
font-size: 36px;
background: transparent url(menu-bg-on4a.png) no-repeat 0 0;
}
#main{
background: url(main-bg.jpg) repeat-x ;
height: 1014px;
padding-top: 20px;
}
#lewa {
width: 200px;
float: left;
padding-top: 20px;
padding-left: 185px;
}
.bbox .tr {background: transparent url(box/tr.gif) no-repeat top right;}
.bbox .tl {background: transparent url(box/tl.gif) no-repeat top left;}
.bbox .t {background: transparent url(box/t.gif) repeat-x top left;}
.bbox .ttr {background: transparent url(box/ttr.gif) no-repeat top right;}
.bbox .ttl {background: transparent url(box/ttl.gif) no-repeat top left;}
.bbox .tt {background: transparent url(box/tt.gif) repeat-x top left;}
.bbox .bl {background: transparent url(box/bl.gif) no-repeat bottom left;}
.bbox .br {background: transparent url(box/br.gif) no-repeat bottom right;}
.bbox .b {background: transparent url(box/b.gif) repeat-x bottom left;}
.bbox .l {background: transparent url(box/l.gif) repeat-y top left;}
.bbox .r {background: transparent url(box/r.gif) repeat-y top right;}
.bbox .tcnt {margin: 0px 1px 6px 2px; padding-bottom: 1px; padding-right: 1px;}
.bbox .cnt {margin: 6px 0 6px 6px; padding-bottom:6px; padding-top:6px; padding-right: 6px;}
.bbox .title {margin: 6px 0 0px 6px; line-height: 42px; color: green; font-weight: bold; font-size: 14px;}
#prawa {
padding-top: 20px;
float: right;
width: 10px;
padding-right: 312px;
}
#lewaonas {
width: 200px;
float: left;
padding-top: 20px;
padding-left: 131px;
}
#lewatekst{
float: left;
margin-left: 9px;
width: 192px;
text-align: justify
}
#prawatekst{
float: right;
margin-right: 9px;
width: 192px;
text-align: justify;
}
#prawaonas {
padding-top: 20px;
float: right;
width: 10px;
padding-right: 270px;
}
#galeria a{
display: block;
float: left;
height: 86px;
margin-bottom: 7px;
overflow: hidden;
width: 144px;
margin-left: 34px;
}
#galeriaa a{
display: block;
float: left;
height: 104px;
margin-bottom: 7px;
overflow: hidden;
width: 144px;
margin-left: 2px;
}
#fejs{
background-color: blue;
color: #fff;
width: 250px;
height: 50px;
position: fixed;
top: 200px;
left: -200px;
}
#fejs:hover{
left: 0px;
}
#stopka{
background: url(stopka-bg.png) repeat-x;
height: 50px;
}
x#stopka .left{
background: url(stopka-bg-left.png) no-repeat;
width: 9px;
height: 50px;
float:left;
}
x#stopka .right{
background: url(stopka-bg-right.png) no-repeat 100%;
width: 9px;
height: 50px;
float:right;
}
#stopka ul{
list-style: none;
margin: 0 0 0 20px;
padding: 0;
}
#stopka li{
float: left;
font-size: 14px;
font-family: Arial, sans-serif;
line-height: 50px;
margin: 0 10px 0 10px;
}
#kontakt{
text-align: center;
}