@charset "utf-8";

/**
<------------------------------ container 940px -------------------------------->
<--------------------------------  main 940px ---------------------------------->
<-- sidebar 244px -->
<-- content margin-left: 295 px -->                            <- margin: 10px ->  
                                   <---- content (615px) ----->
*/


/**
----------------------------------------------------------
Regeln für allgemeine Elemente
---------------------------------------------------------- */

/* Alle kritischen Werte instanziieren */
* {
  margin: 0;
  padding: 0;
  vertical-align: top;
  border-spacing: 0;
}

/* Farben und Hintergrund setzen */
body {
  color: silver;
  background: #222222;
}

/* Schriftgröße kontrollieren */
body, td, th {
  font: normal 80.01% Verdana, sans-serif;
}

/* Tabellen */
table {
  background-color: #F5F5F5;
  color: black;
  border: 20px solid black;
  float: left;
}


td, th {
  padding: 2px 10px 2px 10px;
  font-size: 100%;
}

/* Links und Anker */
a:link {
  color: #00BFFF;
  background-color: transparent;
}
a:visited {
  color: #00BFFF;
  background-color: transparent;
}
a:hover,
a:focus {
  color: red;
  background-color: transparent;
}
a:active {
  color: #00BFFF;
  background-color: transparent;
}
a:link img, a:visited img,
a:hover img, a:focus img, a:active img {
  border: 0;
}

/* Überschriften */
h1, h2, h3, h4 {
  color: red;
  background-color: transparent;
}


/* Pseudo-Überschriften */
span#headline1 {
   color: red;
   font-size: 1.3em;
   margin: 0 0 1.25em 0;
}

/* Wichtiger Text */
span.headline {
   color: red;
   font-size: 1.3em;
   margin: 0 0 1.25em 0;
}



h1 {
  font-size: 1.3em;
  margin: 0 0 1.25em 0;
}


h2 {
  font-size: 1.3em;
}


h3 {
  font-size: 1.2em;
}


h4 {
  font-size: 1.1em;
}


h5 {
   font-size: 1.0em;
   color: #00BFFF;
   background-color: transparent;
}


h6 {
   color: yellow;
  background-color: transparent;
}
   


/* Absätze */
  p {
  margin: .8em 0;
  line-height: 18px;
}

/* Bilder */
img {
  vertical-align: bottom;
}

/* Listen */
dt {
  font-weight: bold;
}
dd {
  margin: .5em 0 1em 3em; 
}



/* Schaltflächen */
.button 
{ clear: both;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
}


/* Schatten unter Bildern */
DIV.shadow, DIV.shadow2, DIV.shadow3, DIV.shadow4, DIV.shadow5 {
   padding: 1px;
   border-radius: 10px;
   -moz-border-radius: 10px;
   }

DIV.shadow {
   background-color: #8e8e8e;
   border: 1px solid #959595;
   margin: 0px;
   }
DIV.shadow2 {
   background-color: #aaa;
   border: 1px solid #bebebe;
   margin: 0;
   }
DIV.shadow3 {
   background-color: #d1d1d1;
   border: 1px solid #e1e1e1;
   margin: 0;
   }
DIV.shadow4 {
   background-color: #ededed;
   border: 1px solid #f6f6f6;
   margin: 0;
   }
DIV.shadow5 {
   float: left;
   background-color: #fcfcfc;
   border: 1px solid #fff;
   margin: 10px 14px;
   }

DIV.shadow5 IMG {
   border: 0px solid #666;
   margin: -2px;
   display:block;
   position: relative;
   top: -3px;
   left: -3px;
   }

/**
----------------------------------------------------------
Zwei gleichgroße Textspalten
---------------------------------------------------------- */
div#columnLeft {
 width: 290px;
 margin: 0px;
 padding: 0 1px 20px 0;
 float:left; 
}

#columnLeft p {
 text-align: justify;
}

/**
#columnLeft p:first-letter {
 color: yellow;
 font-size: 300%;
 border:20px;
 width: 40px;
 margin-right: 20px;
 margin-bottom: 20px;
 float: left;
 }
*/

div#columnRight {
 width: 290px;
 margin: 0 0 0 325px; 
 padding: 0 0 20px 1px;
}

#columnRight p {
 text-align: justify;
}



/**
----------------------------------------------------------
Helle Textbox links und rechts Bilder mit Breite 250px
---------------------------------------------------------- */
div#columnString {
 width: 325px;
 margin: 15px 0 15px 0; 
 float:left; 
 background-color: white;
 color: black;
}

div#columnStringInline {
 margin: 10px;
}


#columnStringInline p {
 text-align: justify;
}

#columnStringInline b {
 color: midnightblue;
}


div#columnImage {
 /**width:255px;
 margin: 0 0 0 360px;*/
 margin: 15px 0 0 360px;
}




/**
----------------------------------------------------------
Helle silberne Textbox links mit Breite 450px
---------------------------------------------------------- */
div#columnStringSilver {
 width: 450px;
 margin: 15px 0 15px 0; 
 float:left; 
 background-color: silver;
 color: black;
}

div#columnStringInlineSilver {
 margin: 20px;
}

div#columnStringInlineSilver h5 {
 color:dodgerblue;
}

#columnStringInlineSilver p {
 text-align: justify;
}

#columnStringInlineSilver b {
 color: crimson;
}



/**
----------------------------------------------------------
Helle silberne Textbox links mit 100 % Breite
---------------------------------------------------------- */
div#columnStringSilverWide {
 width: 100%;
 margin: 15px 0 15px 0; 
 float:left; 
 background-color: silver;
 color: black;
}

div#columnStringInlineSilverWide {
 margin: 20px;
}

div#columnStringInlineSilverWide h5 {
 color:dodgerblue;
}

#columnStringInlineSilverWide p {
 text-align: justify;
}

#columnStringInlineSilverWide b {
 color: crimson;
}





/**
----------------------------------------------------------
Helle weisse Textbox 
---------------------------------------------------------- */

div#columnStringInlineWhite {
}

#columnStringInlineWhite h4 {
 color:royalblue;
}

#columnStringInlineWhite p {
 color: black;
 text-align: justify;
}

#columnStringInlineWhite b,
#columnStringInlineWhite strong {
  color:black;
}





/**
----------------------------------------------------------
Author und Monat
---------------------------------------------------------- */

p#author {
  color:gray;
  text-align: right;  
 }






/**
----------------------------------------------------------
Regeln für besondere Bereiche
---------------------------------------------------------- */

/* Standardmäßig nicht sichtbare Inhalte zur Erleichterung der
   Orientierung mit assistiven Technologien */
.invisible {
  position: absolute;
  left: -9999px;
}


/** Hauptbereich
---------------------------------------------------------- */
/** Komplette Seite in "Container" horizontal zentrieren
---------------------------------------------------------- */

div#container {
  color: #5D5D5D; 
  background:black;

  /* vorher: background-color: white; */
  /* vorher: width: 920px; */
  width: 940px;
  margin: auto; /* Reicht eigentlich */
}


/* Für kaputte Browser */
body {
  /* Alle Inhalte horizontal zentrieren */
  text-align: center;
}
body * {
  /* Textausrichtung korrigieren */
  text-align: left;
}


/** Logo im Kopfbereich
---------------------------------------------------------- */

div#head {
   background: url(./graphic/elements/audiophil-logo[310x108px]amp.jpg) no-repeat; 
   height: 108px;
   top: 0px; 
   border: 1px solid black; 
}

div#headtext {
   position: relative;
   Top: 1px;
   left: 330px;
   color: red; 
   background: transparent;
   float: left;
}

#headtext h1 {
  font-size: 2.9em; 
  margin: 0.2em 0 0.1em 0; 
  font-size: 1.1em;
  float:left;
}


#headtext h4 {
  font-size: 2.9em; 
  margin: 0.2em 0 0.1em 0; 
  font-size: 1.1em;
  float:left;
  color:#AFAFAF;
}


span#audiophil {
  font-size: 2.9em;
  font-weight:bold;
  margin: 0.1em 0 0.1em 0;
  color:red; 
}

span#online {
  font-size: 2.9em; 
  margin: 0.1em 0 0.1em 0; 
  font-weight:bold; 
  color: #999999; 
}



div#topschatten {
   background: url(./graphic/balken.jpg) repeat-x;
   height: 10px;
   margin-bottom:20px;

}



/** globale Navigation
---------------------------------------------------------- */
#head ul {
  clear: left;
  font-size: .9em;
  position: relative;
  top: 16px;
  left: 330px;
}
#head ul,
#head li {
  float: left;
  list-style: none;
}
#head ul a,
#head ul strong {
  color: white;
  background-color: black;
  text-decoration: none;
  /**padding: .2em 1em;*/
   margin: 0 2px 0 0;
}
#head ul a:visited {
  color: silver;
}

#head ul a:hover,
#head ul a:focus {
  text-decoration: underline;
}

#head li.skiplink {
  padding: 0;
}
#head li.skiplink a {
  color: white;
  background-color: black;
}
/* }
#head li.skiplink a {
  color: white;
  background-color: black;
} */


#head li.skiplink a:focus {
  color: white;
  background-color: black;
}

/** Hauptbereich/Inhaltsbereich
---------------------------------------------------------- */
div#main {
   margin-top: 0px;
   margin-left:auto;
   margin-right:auto;
   /** vorher:width:920px; */
   width:940px; 
   background: black;
}



/** Seitenspalte
---------------------------------------------------------- */

#sidebar {
  float:left;
  margin-top: 0px; 
  /** vorher:  margin-left: 0px; */
  margin-left: 20px;
  width: 244px; 
 }




/** Navigation
---------------------------------------------------------- */
    #menu 
      { margin: 10px 0 10px 0; 
      width: 242px;
      background-color: black;
      /**border: 1px solid gray;*/
      text-align:center
      } 

    #menu ul { list-style: none; width: 244px; float: left;} 

 
    #menu b {
    color: silver;
    text-transform: uppercase;
    font-size: 1.1em;
    }
 

    #menu a, #menu h2, #menu p
      { font-size: 1.1em; 
      line-height: normal;
      text-align:center;
      font-weight:bold;
      font-size:100%;
      color: #00BFFF; 
      background-color: #333333;
      display: block; 
      border-width: 1px; border-style: solid;
      text-decoration: none;
      margin: 0 0 0 0;
      border-color: gray;     
      padding: 10px 3px 10px 0;
      background: url(./graphic/elements/button[242x46px].jpg) no-repeat; } 

 
    #menu h2:hover, #menu a:hover, #menu p:hover
     { color: red; background:#333333;}
    #menu h2:visited { color: gray; background: blue; }  
    #menu li {position: relative;} 
    #menu ul ul { position: absolute; z-index: 500; top: 0; left:243px}
    #menu ul ul ul { position: absolute; top: 0; left: 243px }

    #menu ul ul,
    #menu ul li:hover ul ul,
    #menu ul ul li:hover ul ul {display: none;} 

    #menu ul li:hover ul,
    #menu ul ul li:hover ul,
    #menu ul ul ul li:hover ul {display: block;} 



/** Werbung1
---------------------------------------------------------- */
div#werbung1 {
  color: #5D5D5D;
  /* background-color: #F5F5F5;*/
  background-color: black;
  padding: 10px 3px 10px 5px;
}


#werbung1 p {
  color: blue;
  font-size: 0.8em;
  text-align: left;
}


#werbung1 h2 {
  color: #5D5D5D;
  font-size: 1.3em;
  text-align: left;
  text-transform: uppercase;
}

/** Werbung2
---------------------------------------------------------- */
div#werbung2 {
  color: #5D5D5D;
  /* background-color: #F5F5F5;*/
  background-color: black;
  padding: 10px 3px 10px 5px;
}


#werbung2 p {
  color: blue;
  font-size: 0.8em;
  text-align: left;
}


#werbung2 h2 {
  color: #5D5D5D;
  font-size: 1.3em;
  text-align: left;
  text-transform: uppercase;
}


/** Audioplan-Banner
--------------------------------------------------------- */
div#audioplan {
  color: #5D5D5D;
  background-color: black; 
}


/** Silent Wire Banner
--------------------------------------------------------- */
div#SilentWire { 
  margin: 10px 0 10px 0; 
  border:1px solid silver;
  color: #5D5D5D;
  background-color: black;} 
  #silentwire src {margin: 20px 0 20px 0;}



/** ahp Banner
--------------------------------------------------------- */
div#ahp {
  margin-bottom:10px; 
  margin-top:10px; 
  border:1px solid silver;
  color: #5D5D5D;
  background-color: black; 
  width: 243px;
}



/** HighEndNovum Banner
--------------------------------------------------------- */
div#highendnovum {
  
  margin-bottom:10px; 
  margin-top:10px; 
  border:1px solid gold;
  color: #5D5D5D;
  background-color: black; 
  width: 243px;
}




/** Klang und Kunst Banner
--------------------------------------------------------- */
div#KlangUndKunst {
  margin-top:10px;
  margin-bottom:10px; 
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  width: 243px;
 
  border:1px solid silver;
  color: #5D5D5D;
  background-color: black; 
}




/** Aktuelles
---------------------------------------------------------- */
div#today {
  color: blue;
  background-color: #00BFFF;
  font-weight: bold;
  margin: 10px 0px 10px 0px; 
  padding: 0 15px 30px 15px;
  /*border-top: 50px solid #EBE9DF;*/ 
}
#today h2,
#today h3,
#today h4 {
  color: gold;
  background-color: blue;
  margin: 0 58px 15px -15px;
  padding: 2px 10px 3px 10px;
  text-transform: uppercase;
  font-size: 1.1em;
}


#today p {
  margin: .2em 0; 
}


#today a {
  color: blue;
  background-color: #00BFFF;
}

#today strong,
#today a:hover,
#today a:focus {
  color: white;
  background-color: #00BFFF;
}

#today a:visited {
   color: gray;
}


/** Meta-Tags
---------------------------------------------------------- */
div#tagsBorder {
  margin: 80px 0 40px 0;
  border: 1px dimgray solid;
  width:241px;
  }
div#tagsContent {
  margin: 10px 10px 10px 10px;
  width:221px;
  }
#tagsContent p {
  color:crimson;
  }
#tagsContent span {
  color: dimgray;
  margin:0 10px 0 10px;
  }

/** Content 
---------------------------------------------------------- */
div#content {
  color: silver;
  /** vorher: margin: 10px 0px 0px 295px; */
  margin: 10px 20px 0px 295px;
  padding: 20px 0px 10px 0px;
  /* Behebt den 3-Pixel-Textsprung-Bug und andere Bugs im IE 6 */
  height: 1%;  
}


div#content_bgwhite {
  color: black;
  background-color:white; 
  margin: 10px 0px 0px 295px;
  padding: 20px 0px 10px 0px;
  /* Behebt den 3-Pixel-Textsprung-Bug und andere Bugs im IE 6 */
  height: 1%;  
}

#content_bgwhite a {
  color: #0070C0;
}
#content_bgwhite a:hover,
#content_bgwhite a:focus {
  color: #00BFFF;
}
#content_bgwhite a:visited {
   color: gray;
}
#content_bgwhite p {
   text-align:justify;
}


/** "Hier bin ich"-Information
---------------------------------------------------------- */
div#aktPos {
  color:darkgrey;
  margin-bottom:30px;
  /**width:620px;*/
  background-color:#333333;
  border:1px solid #333333;
}
div#aktPos_bgwhite {
  color:black;
  margin: 0 5px 30px 5px;
  /**width:620px;*/
  background-color:#EFEFEF;
  border:1px solid #CFCFCF;
  padding: 5px 15px 5px 15px;
}


/** Fußzeile
---------------------------------------------------------- */
div#footer {
   background: url(./graphic/balken.jpg) repeat-x;
   background-color: black;
   margin-top: 20px;
   margin-left:auto;
   margin-right:auto;
   width:910px; 
   text-align: center;  
   clear: both;   
   padding: 15px 20px;
 
}

#footer p {
   text-align: center;
   margin: 5px 0px 5px 0px;
   color: gray;
}

/**
----------------------------------------------------------
Regeln für besondere Dokumente
---------------------------------------------------------- */
/* Tabellen */
table#AudioplanTestkoffer {
  background-color: #F5F5F5;
  color: black;
  border-width: 20px;
  border-style: solid;
  border-color: white;
  margin-right: 0px;
  float: left;
}
  /*  old: border: 1; */
  /*  old: width: 615px; */
  /*  old: rules: rows; */



#AudioplanTestkoffer th {
  padding: 2px 10px 2px 10px;
  font-size: 100%;
  
}

#AudioplanTestkoffer td {
  padding: 2px 10px 2px 10px;
  font-size: 100%;
  background-color: silver;
}


/* -----------Tabelle 1 --------------- */

table#table1 { 
   border-width: 1px;
   border-color: silver;
   border-style: solid; 
   border-collapse:collapse;  
}

#table1 thead {
  background-color:dimgray;
  color:orangered;
}
#table1 tbody {
  background-color: #333333;
  color:silver;
}
#table1 h2 {
  color:red;
  font-size: 1.1em;
}
#table1 td, th {
  padding: 2px 10px 2px 10px;
  font-size: 100%;
  border: 1px gray solid;
}

/* -----------Tabelle 2 (bisher nur auf Startseite)--------------- */

table#table2 { 
   border-width: 1px;
   border-color: silver;
   border-style: solid; 
   border-collapse:collapse;  
   margin-bottom:20px;
}

#table2 thead {
  background-color:white;
  color:black;
}
#table2 tbody {
  background-color: white;
  color:black;
}
#table2 h2 {
  color:red;
  font-size: 1.1em;
}
#table2 td, th {
  padding: 2px 20px 2px 20px;
  font-size: 100%;
  border: 1px gray solid;
}
#table2 p {
   text-align:justify;}


/** --------------------
    Silent Wire Vertrieb
    -------------------- */

table#SW_Vertrieb {
  background-color: #F5F5F5;
  color: black;
  border-width: 20px;
  border-style: solid;
  border-color: white;
  margin-right: 20px;
  float: left;
}
 /* old: border: 1; */ 
 /* old: rules: rows; */


#SW_Vertrieb th {
  padding: 2px 10px 2px 10px;
  font-size: 100%;
  
}

#SW_Vertrieb td {
  padding: 2px 10px 2px 10px;
  font-size: 100%;
  background-color: silver;
}


/** --------------------
    Audioquest Vertrieb
    -------------------- */

table#vertrieb_audioquest {
  background-color: #F5F5F5;
  color: black;
  border-width: 20px;
  border-style: solid;
  border-color: white;
  margin-right: 20px;
 
}
 /* rules: rows; */
 /* border: 1; */
 /*  width: 625px; */
 /* float: left; */

#vertrieb_audioquest th {
  padding: 2px 10px 2px 10px;
  font-size: 100%; 
}

#vertrieb_audioquest td {
  padding: 2px 10px 2px 10px;
  font-size: 100%;
  background-color: silver;
}