body {margin: 125px; background-color: #fff;} 

/* A - wyglad ogolny */

#menu {
  background: url(background.jpg) repeat-x center;
  height: 38px;
  padding: 10px;
} 

#menu a {
  display: block;
  position: relative;
  width: 110px;
  height: 38px;
  float: left;
  text-align: center;
  font: 11px/38px verdana, sans-serif;
  color: #000;
  text-decoration: none;
}

/* B - marginesy: górny i dolny, oraz boczny */

a:hover span {display: none;} /* B1 */
#menu a:hover { background: url(hover.gif) center no-repeat;} /* B2 */

#menu a span { margin-top: 3px;}

.o3 .left {margin-right: 25px; width: 85px;}
.o3 .left:hover {margin-right: 0px;}

/* C - z-index */

.o0, .o1, .o2, .o3 {
  position: relative;
  z-index: 1;
}

#menu a:hover { z-index: 0; }

/* D - span */

a span {
  width: 55px;
  height: 32px;
  position: absolute;
  top: 0;
  right: 0;
}

.left {
  width: 110px;
}


a .left:hover {
  display: block;
  width: 220px;
  position: absolute;
  background: url(left.gif) no-repeat center;  
}

a .right:hover {
  display: block;
  width: 220px;
  position: absolute;  
  left: 0; 
  background: url(right.gif) no-repeat center;
}

/* E - generowana zawartosc */

.o0 span:hover:after { content: "Index"; } 
.o1 span:hover:after { content: "Portfolio"; }
.o2 span:hover:after { content: "Kontakt"; }
.o3 span:hover:after { content: "Techblog"; } 

#menu a span:hover:after { 
  position: absolute;
  top: 0;
  display: block;
  width: 110px;
  height: 32px;
  color: #000;
  text-align: center;
  z-index: 0;
}

#menu a .left:hover:after {
  padding-left: 110px;
}

#menu a .right:hover:after {
  padding-right: 110px;
}

#menu a span:hover:after {margin-top: -3px;}

/* F */

#menu a:focus { outline: none;} /* usuniecie standardowego focusa z linkow, mozna zasymulowac go: { border: dotted #000; 1px;} */ 
#menu a:focus span { background: none; } /* poprawa bledu z tlem dla opery (po kliknieciu) */


/* G - wczytanie plikow .gif przy ladowaniu strony */

#menu { overflow: hidden; }

#menu .o0:after {
  content: "";
  display: block;
  width: 1px;
  height: 1px;
  background: url(left.gif);
  margin: -100px;
}
  
#menu:hover .o0:after { display: none; }

#menu .o1:after {
  content: "";
  display: block;
  width: 1px;
  height: 1px;
  background: url(right.gif);
  margin: -100px;
}
  
#menu:hover .o1:after { display: none; }

#menu .o2:after {
  content: "";
  display: block;
  width: 1px;
  height: 1px;
  background: url(hover.gif);
  margin: -100px;
}
  
#menu:hover .o2:after { display: none; }



/* H - to dla Safari - ukrycie elementow span */

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #menu a span { display: none; }
}


/* elementy strony nie związane z menu */

h1 {
  font: 18px verdana, sans-serif;
  color: #000;
  padding-bottom: 20px;
}

p {
  font: 11px verdana, sans-serif;
  color: #000;
  padding-top: 20px;
}

p a {
  color: #000;
}