styles.css

@charset "UTF-8";
/* 
    Document   : styles.css
    Created on : 06.07.2012, 12:21:59
    Author     : Christian Foellmann (foe-services.de)
    Description:
        Basis was css-code from the "ISPConfig 3: default theme" which was based on
        "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework 3.0.6
        by Copyright 2005-2008, Dirk Jesse (http://www.yaml.de)
*/

/* overall
-------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
}
html * { font-size: 100.01% }
body {
    font-family: "Trebuchet MS", sans-serif;
    font-size: 75.00%; 
    color: #444;
    background: url("../images/screen_bg.png") repeat-x top left fixed #EEEEEE;
    padding: 10px 0;
}

header, #nav, #main, footer {
    clear: both;
}
ul, ol, dl {
    margin: 0 0 1em 1em;
}
.skip, .hideme, .print {
    height: 1px;
    left: -1000em;
    position: absolute;
    top: -1000em;
    width: 1px;
}
a {color: #4D87C7; text-decoration:none;}
a:focus,
a:hover,
a:active {color:#182E7A; text-decoration:underline;}

hr {
    color: #fff;
    background:transparent;
    margin: 0 0 0.5em 0;
    padding: 0 0 0.5em 0;
    border:0;
    border-bottom: 1px #eee solid;
}




#page {
    min-width: 980px;
    max-width: 80%;
    background: #fff;
    text-align:left;
    margin: 0 auto;
    padding: 10px;
}

/* header
-------------------------------------------------------------- */
header {
    position: relative;
    color: #faf0e6;
    padding: 15px 2em 5px 20px;
    background: url("../images/header_bg.png") repeat-x top left #9a9a9a;
}
header h1 {
    font-size:2.5em;
    letter-spacing:-2px;
    line-height:65%;
    color: silver;
}
header span {
    color: #333333;
}

/* header/topsubnav
-------------------------------------------------------------- */
#topsubnav {
    position:absolute;
    top: 10px;
    right: 10px;
    text-align: right;
}
#topsubnav a { color: #f0f8ff; font-weight: normal; background:transparent; text-decoration:none; }
#topsubnav a:focus, 
#topsubnav a:hover,
#topsubnav a:active { text-decoration:underline; background-color: transparent;}

/* nav
    TODO: sprite image
-------------------------------------------------------------- */
#topNav ul {
    list-style: none;
    padding: 0 0 0 20px;
    margin: 0;
    background: #9a9a9a
}

#topNav ul li {
    display: inline;
    margin: 0 2px 0 0;
}

#topNav a {
    background: url("../images/x32_sprite.png") no-repeat #D3D3D3;
    color:black;
    display:inline-block;
    height:20px;
    padding-top:37px;
    text-align:center;
    text-decoration:none;
    width:78px;
}

#topNav a:hover {
    background-color: #eeeeee;
    color: #000000;
}
#topNav #topNav_current a {
    font-weight: bold;
    color: black;
    background-color: #ffffff;
}

.topnav-admin { background-position: 22px -74px !important; }
.topnav-client { background-position: 22px -1098px !important; }
.topnav-mail { background-position: 22px -780px !important; }
.topnav-mailuser { background-position: 22px -780px !important; }
.topnav-monitor { background-position: 22px -585px !important; }
.topnav-sites { background-position: 22px -523px !important; }
.topnav-dns { background-position: 22px -970px !important; }
.topnav-tools { background-position: 22px -10px !important; }
.topnav-help { background-position: 22px -715px !important; }
.topnav- { background-position: 22px -650px !important; }
.topnav-domain { background-position: 22px -905px !important; }
.topnav-dashboard { background-position: 22px -1035px !important; }
.topnav-vm { background-position: 22px -842px !important; }
.topnav-billing { background-position: 22px -1162px !important; }

/* main
-------------------------------------------------------------- */
#main { 
    background: #fff;
    padding: 1em 0;
}

/* main/sideNav + submenu
-------------------------------------------------------------- */
#sideNav { width: 200px; 
           float:left;
           padding: 0 10px 0 0; 
}

#submenu {
    width: 100%;
    overflow: hidden;
    margin: 0px;
    list-style-type: none;
    border-bottom: 2px #ddd solid;
}

#submenu ul { list-style-type: none; margin:0; padding: 0; }
#submenu li { float:left; width: 100%; margin:0; padding: 0; font-size:0.9em; }

#submenu a,
#submenu strong {
    display:block;
    width: 90%;
    padding: 2px 0px 2px 10%;
    text-decoration: none;
    background-color:#fff;
    color: #444;
    border-bottom: 1px #eee solid;
}

/* Menu Title */
#submenu li.title {
    width: 100%;
    padding: 0px;
    font-weight: bold;
    color: #444;
    background-color: #fff;
    border-top: 2px #888 solid;
    font-size: 1.1em;
}

#submenu li.title a {
    background-color: #f0f8ff;
    color: #444;
}
#submenu li.title a:hover {
    color: white;