/*
   ######################################################
   ##
   ##  css f�r www.xantiva.de
   ##
   ##  (C) 2007, by Mike K�ster, www.xantiva.de
   ##
   ##  1.9.2007
   ##
   ######################################################
*/


/* Basis Style - Sheet
   -------------------
   Hier werden alle Angaben zun�chst "zurueckgesetzt" um dann im eigenen
   CSS explizit gesetzt zu werden!
   Quelle: http://www.grochtdreis.de/adventskalender/advent.php  19 + 20
*/

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100.01%;
    background-color: #fff;
    color: #002952;
}

body, h1, h2, h3, h4, h5, h6, div, p, table, td, ul, ol, li, dd, dt, dl, blockquote, address, hr, pre {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}


/* Allgemeine Angaben */

body {
    font-weight: normal;
    font-size: 0.9em;
    /* Emu in der unteren rechten Ecke */
    background: #ffffff url(/images/webdesign-by-xantiva.de.png) bottom right no-repeat fixed;
}

img {
    border: none;
}

.clearer{
        height: 1px;
        overflow: hidden;
        margin-top: -1px;
        clear: both;
}


#content {
     margin-top: 150px;
     padding: 0px 80px 20px 250px;
}


#myborder {  /*  Damit der Contentbereich nicht zu breit wird. */
     width: 600px;
}

#content p {
    margin-bottom: 0.5em;
}

#content a {
   font-weight: bold;
   color: #004182;
}

#content a:hover, #content a:focus {
   color: #f93;
}

#content h1 {
    font: bold 1.5em/1.0em Tahoma, Verdana, Arial, Helvetica, sans-serif;
    margin-bottom: 0.7em;
    color: #004182;
}

#content h2 {
    font: bold 1.3em/1.0em Tahoma, Verdana, Arial, Helvetica, sans-serif;
    margin-top: 1.5em;
    margin-bottom: 0.7em;
    color: #004182;
}

#content h3 {
    font: bold 1.1em/1.0em Verdana, Arial, Helvetica, sans-serif;
    margin-top: 1.3em;
    margin-bottom: 0.7em;
    color: #004182;
}

#content h4 {
    font: bold 1.0em/1.0em Verdana, Arial, Helvetica, sans-serif;
    margin-top: 1.3em;
    margin-bottom: 0.7em;
    color: #004182;
}

#content ul {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#content ul li {
    font-size: 0.9em;
    margin-top: 0;
    margin-bottom: 0.7em;
}

#content ul li ul{
    margin-top: 0.5em;
    margin-bottom: 0.7em;
}

#content ul li ul li{
    font-size: 0.9em;
    margin-top: 0;
    margin-bottom: 0.7em;
}

#content .cite {
    font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    font-style:italic;
    background-color: #f0f0f0;
    margin:10px;
    padding:10px;
}


.more {
    font-size: 0.8em;
    color: #666;
}

.referenzen {
    clear: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

.referenzen img {
    float: left;
    margin: 0 20px 20px 0;
    padding: 2px;
    border: 1px solid #004182;

}

.start {
    font-size: 0.8em;
    color: #888;
}

/*  ##  Linke Spalte mit dem Hotline - Button
    ##  fliessend, aber links fixiert  ;-)
*/

#navigation {
    float: left;
    width: 195px;
    position: absolute;
    top: 150px;
    left: 0;
    text-align: center;
}

#navigation h3 {
    font: bold 0.8em/1.2em Verdana, Arial, Helvetica, sans-serif;
    padding-top: 10px;
    padding-bottom: 20px;
}

.navigation-link {
    text-decoration: none;
    font: bold 2.0em/1.3em Verdana;
    color: #f00;
}

.design {
    margin-top: 10px;
    font: normal 0.6em/1.3em Arial;
    color: #000;
}

.design a {
    color: #000;
}

#spacer {
    margin-bottom: 200px;
}


/*  ##  Header Bereich, oben fixiert  ;-)
*/

#header {
     position: absolute;
     top: 0;
     width: 100%;
/*     background-image:url(/images/header-background.png);
     background-repeat:repeat-x; */
     text-align: center;
}


/*  ##  Menu basiert auf dem Tabs 6 Template von
    ##  http://www.highdots.com/css-tab-designer/
    ##  Erg�nzt mit dem Tipp "Tab individualisieren von
    ##  http://www.thestyleworks.de/tut-art/listnav4.shtml
*/

#menu {
     position: absolute;
     top: 87px;
     float:left;
     width:100%;
     font: bold 93% Verdana,Arial,Helvetica,sans-serif;
     line-height:normal;
     border-bottom:1px solid #666;
     background-image:url(/images/menu-background1.png);
     background-repeat:repeat-x;
}

#menu ul {
     margin:0;
     padding:10px 10px 0 200px;
     list-style:none;
}

#menu li {
     display:inline;
     margin:0;
     padding:0;
}

#menu a {
     float:left;
     background:url("/images/menu-left.gif") no-repeat left top;
     margin:0;
     padding:0 0 0 4px;
     text-decoration:none;
}


#menu a span {
     float:left;
     display:block;
     background:url("/images/menu-right.gif") no-repeat right top;
     padding:5px 10px 4px 6px;
     color:#FFF;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {
     color:#FFF;
}
#menu a:hover {
     background-position:0% -42px;
}

#menu a:hover span {
     background-position:100% -42px;
}

#home #menu-home a,
#suchmaschinenoptimierung #menu-suchmaschinenoptimierung a,
#suchmaschinenoptimierung-glossar #menu-suchmaschinenoptimierung a,
#suchmaschinenoptimierung-grundlagen #menu-suchmaschinenoptimierung a,
#suchmaschinenoptimierung-tools #menu-suchmaschinenoptimierung a,
#webdesign #menu-webdesign a,
#leistungen #menu-leistungen a,
#online-shops #menu-online-shops a,
#referenzen #menu-referenzen a,
#kontakt #menu-kontakt a {
     background-position:0% -42px;
}


#home #menu-home a span,
#suchmaschinenoptimierung #menu-suchmaschinenoptimierung a span,
#suchmaschinenoptimierung-glossar #menu-suchmaschinenoptimierung a span,
#suchmaschinenoptimierung-grundlagen- #menu-suchmaschinenoptimierung a span,
#suchmaschinenoptimierung-tools #menu-suchmaschinenoptimierung a span,
#webdesign #menu-webdesign a span,
#leistungen #menu-leistungen a span,
#online-shops #menu-online-shops a span,
#referenzen #menu-referenzen a span,
#kontakt #menu-kontakt a span {
     background-position:100% -42px;
}


/*  ##  Zus�tzliches, einfaches Menue am Ende des Haupt Contents
*/

#second-menu {
     font-size: 0.9em;
     font-weight: normal;
     text-align:center;
     margin-top: 60px;
}

#second-menu li {
     display:inline;
}

#second-menu h3 {
     font-size: 0.8em;
}


/*  ##  Die Vorlage hier f�r kommt von
    ##  http://css.maxdesign.com.au/listamatic/vertical11.htm
*/

#submenu {
     text-align: left;
     margin-bottom: 200px;
}

#submenu ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
     font: bold 93% Arial,Helvetica,sans-serif;
     line-height:normal;
}

#submenu li {
     margin:0 0 1px 0;
}

#submenu a {
     display:block;
     padding:6px 0 8px 4px;
     width: 200px;
     background:url("/images/submenu.gif") no-repeat left top;
     text-decoration:none;
     color: #fff;
}

#submenu a:hover {
     background:url("/images/submenu-hover.gif") no-repeat left top;
}

#suchmaschinenoptimierung #submenu-suchmaschinenoptimierung a,
#suchmaschinenoptimierung-glossar #submenu-suchmaschinenoptimierung-glossar a,
#suchmaschinenoptimierung-grundlagen #submenu-suchmaschinenoptimierung-grundlagen a,
#suchmaschinenoptimierung-tools #submenu-suchmaschinenoptimierung-tools a,
#online-shops #submenu-online-shops a,
#online-shops-tools #submenu-online-shops-tools a {
     background:url("/images/submenu-hover.gif") no-repeat left top;
}

#zitate {
     margin-left: 10px;
     margin-right: 10px;
     color: #aaa;
     font-size: 0.8em;
}