@charset "utf-8";
/************************************* GENERAL ***************************************/
@media (min-width: 864px) {
    body {
        background: url('images/hintergrund.jpg');	
    }
}

a {
    color: #ae211e;
}
/**************************************** LAYOUT ****************************************/
@media (min-width: 864px) {
    #page {
        background: url('images/hintergrund-oben.jpg') repeat-x;
    }
}

@media (min-width: 864px) {
    #copyright {
        color: #B3835F;
    }

    #copyright span {
        background-color: #811B19;
    }

    #copyright a {
        color: #b3423f;
    }
}

#pergament_top .left {
    background: url('images/pergament_top_left_index.png') no-repeat right;
}

/************************** CONTENT *********************************/

@media(min-width: 768px) {
    #main {
        min-height: 400px;
    }

    #main #content {
        min-height: 730px;
    }
    #main #content #body {
        min-height: 650px;
    }

    #main #content #body_inner {
        min-height: 600px;
    }
}

/****************************** LEFT ************************************/
#main #left #logo {
    background: url('images/menu_logo.png') no-repeat top right;
    width: 236px;
    height: 202px;
}

@media (min-width: 864px) {
    #main #left #menu {
        background: url('images/menu_bg.png') repeat-y right;
        width: 236px;
    }
}

#main #left #logo a {
    display: block;
    width: 200px;
    height: 200px;
}

#main #left #logo span {
    display: none;
}

#main #left #menu_bottom{
    background: url('images/menu_footer.png') no-repeat right;
    width: 236px;
    height: 97px;
}

/************************** EXTRAS *********************************/

#extras #einloggen {
    width: 237px;
    height: 164px;
    background: url('images/extras_einloggen_bg.png') no-repeat;
}

#extras #punktestand {
    width: 237px;
    height: 164px;
    background: url('images/extras_punktestand_bg.png') no-repeat;
}

#extras #punktestand .inner, #extras #einloggen .inner {
    width: 150px;
    position: relative;
    left:55px;
    top: 55px;
}

#extras #einloggen .inner {
    color: #423317;
    font-size: 12px;
    line-height: 16px;
    left: 70px;
    top: 63px;
}
a.einloggen {
    color: #4E6897;
    font-weight: bold;
}

a.einloggen:hover {
    color: #8f9cb4;
}


#extras #punktestand .inner .punkte {
    font-size: 11px;
    line-height: 15px;
    color: #B1A072;
    height: 31px;
    position: absolute;
    padding: 5px 0 0 20px;
}

#extras #punktestand .inner .gryffindor {
    background: url('images/extras_punktestand_gryffindor.png') no-repeat;    
    left: 5px;
    top: 10px;

}
#extras #punktestand .inner .ravenclaw {
    background: url('images/extras_punktestand_ravenclaw.png') no-repeat;
    left: 80px;
    top: 10px;
}
#extras #punktestand .inner .hufflepuff {
    background: url('images/extras_punktestand_hufflepuff.png') no-repeat;
    left: 5px;
    top: 50px;
}
#extras #punktestand .inner .slytherin {
    background: url('images/extras_punktestand_slytherin.png') no-repeat;
    left: 80px;
    top: 50px;
}


#extras #portschluessel {
    background: url('images/extras_portschluessel_bg.png') no-repeat;
    width: 237px;
    height: 269px;
}

#extras #portschluessel .inner {
    position: relative;
    padding-left: 60px;
    top: 70px;
}

#extras #portschluessel .table-spacing td {
    padding: 0 3px;
    position: relative;
}