body
{
    background-color:    #5b5b5a;
    
}
@font-face 
{ 
    font-family:         perpetua; 
    src:                 url(fonts/PERI__.TTF); 
}

/*--Setzt alle Abstände auf "Null"--*/
* 
{
    margin:             0;
    padding:            0;
} 

/*-- formatiert die Hauptmenüleiste --*/
.mainMenu 
{
    width:              1250px;
    margin:             auto;
    height:             100px;
    font-family:        perpetua;
    border:             0;
    background:         #373737; 
}

/*-- entfernt alle Aufzählungszeichen und Abstände des Standard Listenlayouts --*/
.mainMenu ul 
{

    padding:            0;
    margin:             0;
    list-style-type:    none;
    
}

/*-- Menü horizontal anzeigen --*/
.mainMenu li 
{
    float:              left;
    width:              250px;
    position:           relative;
  
}

.mainMenu ul li ul li
{
    text-align:center;
}

/*-- Links des Hauptmenü gestalten --*/
.mainMenu a, .mainMenu a:visited 
{
    display:            block;
    font-size:          38px;
    text-decoration:    none; 
    color:              #388773; 
    width:              250px; 
    height:             100px; 
    border:             1px solid #373737; 
    background:         #373737; 
    padding-left:       0px; 
    line-height:        100px;
    text-align:         center;
    margin-left:        0px;
}

/*-- Links des Submenüs gestalten --*/
.mainMenu ul ul a, .mainMenu ul ul a:visited 
{
    background:         #388773; 
    border:             1px solid #388773;
    font-size:          30px;
    color:              #fff; 
    height:             auto; 
    line-height:        1em; 
    padding:            5px 10px; 
    width:              auto;
}

/*-- Submenüs ausblenden --*/
.mainMenu ul ul 
{
    visibility:         hidden;
    position:           absolute;
    bottom:             101px;
    left:               0; 
}

/*-- Submeüs einblenden --*/
.mainMenu ul li:hover ul,
.mainMenu li:hover  > a         
{
    background-color:   #388773;
    visibility:         visible;
    color:              #fff;
    opacity:            0.85;
    filter:             alpha(opacity=85);
}

/* style the table so that it takes no part in the layout - required for IE to work */
.mainMenu table 
{
    border-collapse:    collapse; 
    border:             0; 
    position:           absolute; 
    left:               0; 
    bottom:             -1px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .mainMenu a, * html .mainMenu a:visited 
{
    width:              150px;
    w\idth:             139px;
}

* html .mainMenu ul ul a{
width:150px;
w\idth:129px;
}
/* ~~~~~~~~~~~~ BIS AUFLÖSUNG 1024px*768px ~~~~~~~~~~~~ */
@media screen and (max-width: 1024px) and (max-height: 768px){
    .mainMenu 
    {
        width:          850px;
        height:         75px;
    }
    .mainMenu li 
    {
        width:          170px;
    }
    .mainMenu a, .mainMenu a:visited 
    {
        width:          170px;
        height:             75px;
        line-height:        75px; 
    }
    .mainMenu ul ul 
    {
        bottom:             76px;
    }
    .mainMenu ul ul a, .mainMenu ul ul a:visited 
    {
        font-size:          25px;
    }
    .link_submenu
    {
        font-size:          25px;
    }
}
/* ~~~~~~~~~~~~ BIS AUFLÖSUNG 1680px ~~~~~~~~~~~~ */
@media screen and (min-width: 1025px) and (max-width: 1680px){
.mainMenu 
    {
        width:          1150px;
    }
    .mainMenu li 
    {
        width:          230px;
    }
    .mainMenu a, .mainMenu a:visited 
    {
        width:          230px;
    }    
} 

/* ~~~~~~~~~~~~ BIS AUFLÖSUNG 1920px ~~~~~~~~~~~~ */
@media screen and (min-width: 1681px)
{
 
    .mainMenu 
    {
        width:          1400px;
    }
    .mainMenu li 
    {
        width:          280px;
    }
    .mainMenu a, .mainMenu a:visited 
    {
        width:          280px;
    }    
}