body { 
  margin: 10;

} 

/* Az egész oldalnak adjunk egy háttérszínt a következő módon  */ 

body { 
  margin: 0; 

  background-attachment: fixed;
 background-color: #fc9d15;
 background-attachment: right

} 
body url{position : 5px;

} 



#fo {
  width: 595px;
  margin-left: auto;
  margin-right: auto;

} 




/* A repeat-y értékkel megadjuk a böngészőnek, hogy y, azaz függőleges irányban ismételje a mintánkat.   */

#tartalom {
  background : #f2f2f2 url(hatter.jpg) repeat-y;
  position : relative;
}


#kozep {
  margin: 20px 200px 30px 35px;
}


/* Ezzel megadunk a kozep azonosítóval kijelölt elem, azaz a szöveget és az egy szem képet tartalmazó elemnek felső, jobb, alsó és bal oldali margót.
A fenti sorrend fontos, a felső margótól kell indulnunk az óramutató járásával megegyező irányba haladva. 
  */

p {
  font-family: Verdana, Ariel, sans-serif;
  font-size: 11px;
  color: #575f00;
  text-align:justify;
}


/*  text-align:justify; 
A bekezdések tartalmának elrendezését sorkizártra állítottuk. 
 */


#kozep h3 {
  font-family: Verdana, Arial, sans-serif;
  font-weight: normal;
  color: #da6105;
  margin-bottom: 6px;
}

/*   */





img.floatright {    float: right;    margin: 1em;}
img.floatleft {    float: left;    margin: 1em;}




#kozep img {

  margin-right: 6px;
  margin-bottom: 3px;
}



/* A float jellemzővel megadhatjuk egy képnek, hogy szöveg folyja körül.   */


#attetszo {

  border: #f2aa55 2px solid;
  width: 180px;
  font-family: Verdana, Arial;
  font-size: 11px;
  line-height : 20px;
  font-weight: bold;
margin-left: 10px;
  margin-right: 10px;
position : absolute; top: 368px; right: -2px;
}

/*   */


#attetszo ul {
  list-style-type: none;
  padding-left: 10px;
  margin-left: 0px;
  margin-top: 10px;
}

/* Ezzel a meghatározással töröljük el a linkek előtt látható kis ikonokat, ami alapbeállítás, de mi inkább általunk készített képpel szeretnénk kicserélni a későbbiekben. 
Ezekre a meghatározásokra azért van szükség, mert a böngészők másképp jelenítik meg alapbeállításban a listát. Az Internet Explorerben alapbeállításban nem 0px a bal margó, viszont a bal padding értéke 0. Ezzel szemben Firefoxban alapbeállításban nem 0px a bal padding, viszont a bal margó értéke 0. Tehát jobban járunk, ha mind a két értéket mi határozzuk meg, hogy ugyanúgy jelenjen meg mind a két böngészőben.   */



#attetszo a:link, #attetszo a:visited, #attetszo a:active {
  color: #575f0f; 
  background : url(./pic/mancs.psd.gif) no-repeat;
  text-decoration: none;
  padding-left: 25px;
}

#attetszo a:hover {
  color : #da6105; 
  background : url(./pic/mancs1.psd.gif) no-repeat; 
} 



#attetszo1 {


  width: 180px;
  font-family: Verdana, Arial;
  font-size: 11px;
  line-height : 20px;
  font-weight: bold;
margin-left: 10px;
  margin-right: 10px;
position : absolute; top: 488px; right: -20px;
}
#attetszo1 a:link, #attetszo a:visited, #attetszo a:active {
 
 
  padding-left: 25px;
}


#menu {
  background-color: #da6105;
  padding-top: 3px;
  padding-bottom: 3px;
  color: #ffffff;

  font-family: Verdana, Ariel, sans-serif;
  font-size: 10px;
  text-align: center;
}

/*   */


#menu a {
  margin-left: 10px;
  margin-right: 10px;
}


/* 10-10px-t kapott mindegyik link elem jobb és bal oldalt, azaz így a szomszédos menüpontok 20px távolságra kerülnek egymástól. 
  */

#menu a:link, #menu a:visited, #menu a:active {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

/* 
a:link – Meghatározza, milyen stílusú legyen a link maga.
a: visited – Meghatározza, milyen stílusú legyen a link, amikor már látogattuk.
a:active – Meghatározza, milyen stílusú legyen a link, amikor használja a felhasználó.
a:hover – Meghatározza, milyen stílusú legyen a link, amikor felette tartja a felhasználó az egér mutatóját.

A #menu a:link, #menu a:visited, #menu a:active kijelölő csoportosított kijelölő, aminek tagjait ,-vel választjuk el egymástól. 
   */


#menu a:hover {
  color : #b2b867;
}


/*   */


#lablec {
  background: #f2f2f2 url(./pic/lablec.gif) no-repeat ;
  height: 99px;
  
       
}


