/*  Projekt: ET
    Stylesheet for SCREEN
    Date: 2010/02/02
    Author: Kai Kuehn, mic-app IT-Services
*/


/* COMMON */
* { /* overall reset */
  padding: 0;
  margin: 0;
}

/* Firefox scrollbar visible */
html { height: 101%; }

h1 { font-size: 160%; }
h2 { font-size: 150%; }
h3 { font-size: 140%; }
h4 { font-size: 130%; }
h5 { font-size: 100%; }


body {
  color: black;
  background: Silver;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
  min-width: 900px;
  min-height: 500px;
}

/* IDs & CLASSES */
#wrapper {
  color: black;
  background: White url(../images/escrima-background.jpg) no-repeat;
  width: 1000px;
  height: auto;
  border: 1px solid DimGray;
  margin: auto;
  margin-top: 5px;
}

/* DIV: Header */
#header {
  color: black;
  background: transparent;
  text-align: center;
  height: 190px;
  padding: 1px;
  margin: 0;
  }
  #header h1 {
    color: White;
    font-size: 140%;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    padding: none;
    margin: 15px 0 0 0;
  }
  #header img {
    padding: 0;
    margin: 0;
  }

/* DIV: Content */
#content {
  float: right;
  width: 750px;
  font-size: 85%;
  padding: 5px;
  padding-left: 20px;
  margin: 5px;
  margin-top: 20px;
}
  #content ul,
  #content ol {
    margin-left: 40px;
    margin-bottom: 30px;
  }
  #content li {
    margin-bottom: 1em;
  }
  #content ol span {
    color: Red;
  }
  #content ul span {
    color: Red;
  }
  #content ul h1 {
    font-size: 100%;
    font-weight: bold;
    color: black;
    font-style: normal;
    margin-bottom: 0;
  }
  #content h1 {
    color: FireBrick;
    text-align: left;
  }
  #content h1 span {
    color: Red;
  }
  #content h2 {
    color: FireBrick;
    font-size: 110%;
    text-align: left;
  }
  #content h3 {
    color: Black;
    font-size: 110%;
    text-align: left;
  }
  #content h3 span {
    color: Red;
  }
  #content h4 {
    color: Black;
    font-size: 100%;
    text-align: left;
  }
  #content p {
/*    width: 90%;*/
    padding-right: 1em;
/*    margin-top: 0.5em;*/
    margin-bottom: 1.5em;
  }
  #content table {
    float: none;
    margin: 10px 0 10px 0;
  }
  #content table span {
    color: Red;
  }
  #content hr {
    margin-top: 25px;
    margin-bottom: 25px;
  }
  #content a {
/*   background: transparent url(../images/textlink.gif) no-repeat left bottom;
   padding-left: 15px; */
   color: FireBrick;
   text-decoration: none;
   outline: none;
  }
  #content a:hover,
  #content a:focus {
    text-decoration: none;
    color: Red;
    border-bottom: 1px dotted;
    background-color: WhiteSmoke;
  }
  #content a:visited {
    color: FireBrick;
  }
  #content a img {
    float: none;
    background: none;
    padding: 0;
    border: 0;
    margin: 0;
    margin-top: 3px;
  }
  #content p span {
    color: Red;
  }

.altback {
  background: WhiteSmoke;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.breadcrumbs {
  color: DimGray;
  font-size: 80%;
  text-align: left;
}

.clearing {
  clear: both;
}

.copyright {
  color: black;
  text-align: center;
  font-size: 70%;
  margin-top: 1em;
}

.previewbox {
  background: WhiteSmoke;
  width: 80%;
  padding: 0.5em;
  border: 1px outset Black;
}
.preview {
  width: 200px;
  height: 138px;
  border: 1px outset Black;
}

.textlink {
   background: transparent url(../images/textlink.gif) no-repeat left bottom;
   padding-left: 15px;
   color: FireBrick;
   text-decoration: none;
   outline: none;
}
/*.textlink {
   background: transparent url(../images/textlink.gif) no-repeat right bottom;
   padding-right: 15px;
   color: FireBrick;
   text-decoration: none;
   outline: none;
} */

.buttonlink {
   background: Gainsboro;
   padding: 1px 5px 1px 5px;
   text-decoration: none;
   outline: none;
   border: 1px solid DimGray;
}

.pricing table {
  width: 80%;
}
  .pricing #descr {
    width: 75%;
    border-bottom: 1px dotted Silver;
  }
  .pricing #price {
    text-align: right;
    vertical-align: bottom;
    border-bottom: 1px dotted Silver;
  }

.rtimg {
  float: right;
  text-align: center;
}


/* DIV: LeftBar */
#leftbar {
  float: left;
  background: transparent;
  text-align: left;
  color: black;
  font-size: 85%;
  width: 190px;
  padding: 0;
  margin: 20px 0 5px 5px;
}


/* DIV: MenuBar */
#menubar {
  float: left;
  background-color: White;
  text-align: left;
  color: black;
/*  font-size: 85%;*/
  width: 182px;
  padding: 5px 0 5px 0;
  border: 1px outset Silver;
  margin: 20px 0 5px 5px;
  margin: 0 0 1em 0;
}
  #menubar h1 {
    font-size: 90%;
    font-weight: normal;
    text-align: left;
    color: Gray;
    padding: 0;
    border-bottom: 1px dotted Silver;
    margin: 15px 5px 10px 5px;
  }
  #menubar ul {
    margin: 0;
    margin-bottom: 1em;
  }
  #menubar a {
    color: black;
    display: block;
    text-decoration: none;
    padding: 3px 0 3px 10px;
  }
  #menubar li,
  #menubar a {
    list-style-type: none;
    border: 1px solid transparent;
    margin-left: 2px;
    margin-right: 2px;
  }
  #menubar a:hover {
    color: black;
    background: White;
    border: 1px inset DarkGray;
  }
  #menubar a:focus {
    outline: none;
  }
  #menubar a:active {
    color: red;
  }
  #menubar a:visited {
    color: black;
  }
  #menubar span {
    color: Maroon;
    font-size: 100%;
    font-style: italic;
  }
  #privattraining #item20 a,
  #gruppentraining #item21 a,
  #frauentraining #item22 a,
  #seminare #item24 a,
  #selbstschutz #item25 a,
  #escrima #item30 a,
  #kosten #item31 a,
  #termine #item32 a,
  #medien #item33 a,
  #referenzen #item34 a,
  #kaikuehn #item35 a,
  #links #item36 a,
  #newsletter #item37 a,
  #kontakt #item40 a,
  #seminaranmeldung #item41 a,
  #impressum #item42 a,
  #member #item43 a {
    color: Black;
    background: SeaShell;
    border: 1px inset DarkGray;
  }

.startpage {
  font-style: italic;
}

#tweety {
  float: left;
  width: 180px;
  padding: 1px;
  border: 1px outset Silver;
/*  margin: 0 0 5px 5px;*/
}
  #tweety h1 {
    font-size: 90%;
    color: FireBrick;
    letter-spacing: 2px;
    border-bottom: 1px dotted Silver;
    margin: 5px;
  }
  #tweety p {
    font-size: 90%;
    padding: 0.5em;
  }
  #tweety a {
    color: FireBrick;
    font-size: 85%;
    text-decoration: none;
    outline: none;
  }
  #tweety a:hover,
  #tweety a:focus {
    text-decoration: none;
    color: Red;
    background: GhostWhite;
  }
  #tweety a:visited {
    color: FireBrick;
  }


.gotop {
  text-align: right;
}

#picbar {
  float: right;
  width: 200px;
  margin-left: 5px;
}


.hinweis {
  background-color: WhiteSmoke;
  width: 90%;
  padding: 5px;
  border: 1px dotted Silver;
  border-top: none;
  border-bottom: none;
  margin: 2em 0 2em 0;
}

.link {
  width: 90%;
  background-color: WhiteSmoke;
  padding: 5px;
  border: 1px outset Silver;
  margin: 1em 0 0 0;
}
  .link a {
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 1em;
  }
  .link span {
    font-size: 80%;
    color: black;
  }

.smaller {
  font-size: 85%;
}

.leftimg {
  float: left;
  margin: 20px 40px 10px 5px;
}

.rightimg {
  float: right;
  margin: 5px 5px 10px 40px;  /* top von 20 auf 5 geändert 20100128 */
}

.profileimg {
  float: left;
  margin: 5px 10px 5px 0;
}

.galleryimg {
  border: 5px solid white;
  margin: 5px;
}

/* CLASS: Arrowlist */
.arrowlist {
  list-style-type: none;
  list-style-image: url(../images/arrow.gif);
  text-align: left;
  padding: 10px;
  margin-top: 10px;
  margin-left: 50px;
}
  .arrowlist li {
    margin-bottom: 15px;
  }
  .arrowlist span {
    color: Red;
    font-size: 85%;
  }
  .arrowlist h1 {
    font-size: 100%;
    font-weight: bold;
  }

/* CLASS: Starlist */
.starlist {
  list-style-type: none;
  list-style-image: url(../images/star.gif);
  text-align: left;
  font-size: 100%;
  padding: 10px;
  margin-left: 50px;
}
  .starlist li {
    margin-bottom: 15px;
  }
  .starlist h1 {
    font-size: 100%;
    font-weight: bold;
  }
  .starlist span {
    color: Red;
  }

/* CLASS: Contentbox */
.contentbox {
  overflow: hidden;
  color: black;
  background-color: WhiteSmoke;
  width: 90%;
  border: 1px dotted Silver;
  border-right: none;
  border-left: none;
  margin-top: 1em;
  margin-bottom: 1em;
}
  .contentbox span{
    color: Black;
    font-weight: normal;
  }
  .contentbox h1 {
    font-size: 120%;
    padding: 0.2em 0 0.2em 0.5em;
    border-bottom: 1px dotted Silver;
    margin-top: 0;
    margin-bottom: 0.2em;
  }
  .contentbox p {
    padding: 0.5em;
    padding-bottom: 1px;
    margin: 0 0 0.5em 0.5em;
  }
  .contentbox ul {
    padding: 0;
    padding-left: 40px;
    margin-bottom: 20px;
  }
  .contentbox li {
    padding: 3px;
    padding-bottom: 5px;
    margin: 0;
  }
  .contentbox img {
    float: left;
    width: 60px;
    margin: 0.5em;
    margin-top: 1em;
  }

.terminh1 {
  background: LightGrey;
  width: 90%;
  padding: 0.2em 0 0.2em 0.5em;
}

.news {
  width: 90%;
  font-size: 120%;
  border-bottom: 1px dotted Silver;
  margin-bottom: 1em;
}

.videobox {
  overflow: hidden;
  color: black;
  width: 425px;
  padding: 5px;
  border: 1px solid Silver;
  margin: 15px;
}

.sidevideobox {
  float: right;
  overflow: hidden;
  color: black;
  width: 320px;
  padding: 0.5em;
  border: 1px solid Silver;
  margin: 2em;
}

.picturebox {
  overflow: hidden;
  color: black;
  background-color: WhiteSmoke;
  width: 90%;
  padding: 5px;
  padding-bottom: 1px;
  border: 1px dotted Silver;
  border-right: none;
  border-left: none;
  margin-top: 10px;
  margin-bottom: 15px;
}
  .picturebox h1 {
    font-size: 120%;
    padding-left: 5px;
  }

.gallery {
  width: 90%;
  background-color: WhiteSmoke;
  text-align: center;
  padding: 5px;
  border: 1px solid Silver;
}
  .gallery a {
    font-size: 85%;
  }

/* FORM: Newsletter */
.nlformular {
  color: black;
  font-size: 120%
  width: 90%;
  padding: 5px;
  padding-bottom: 10px;
  margin-top: 20px;
}
  .nlformular span {
    color: red;
  }
  .nlformular label {
    display: block;
    float: left;
    width: 100px;
    text-align: left;
    padding-top: 4px;
    padding-right: 1em;
    border-bottom: thin dotted Gainsboro;
    margin-bottom: 1em;
  }
  .nlformular input, select {
    display: block;
    float: left;
    cursor: pointer;
    width: 300px;
    background: GhostWhite;
    border: none;
    border-bottom: thin dotted Gainsboro;
    border: 1px solid Silver;
    margin-right: 1em;
  }
  .nlformular select {
    font-weight: bold;
    font-size: 120%;
    text-align: center;
    width: 300px;
    border: 1px solid Silver;
  }
  .nlformular input:hover,
  .nlformular select:hover {
    background: WhiteSmoke;
  }
  .nlformular input:focus,
  .nlformular select:focus {
    background: White;
  }
  .nlformular input#senden {
    float: left;
    width: 200px;
    height: 2em;
    background: LightGrey;
    padding: 2px;
    border: 2px solid;
    border-color: #efefef #000000 #000000 #efefef;
  }
  .nlformular input#senden:hover {
    background: WhiteSmoke;
  }

/* FORM: Kontaktform */
.kontaktformular {
  color: black;
  width: 90%;
  padding: 5px;
  padding-bottom: 10px;
  margin-top: 20px;
}
  .kontaktformular h2 {
    padding: 0 0 3px 0;
    border-bottom: 1px solid Gray;
  }
  .kontaktformular span {
    color: red;
    font-size: 100%;
  }
  .kontaktformular label {
    display: block;
    float: left;
    cursor: pointer;
    width: 200px;
    text-align: left;
    padding-right: 1em;
    border-bottom: thin dotted Gainsboro;
    margin-bottom: 0.5em;
  }
  .kontaktformular input, select {
    font-size: 100%;
    display: block;
    float: left;
    cursor: pointer;
    width: 400px;
    background: GhostWhite;
    border: none;
    border-bottom: thin dotted Gainsboro;
    margin-right: 1em;
  }
  .kontaktformular textarea {
    cursor: pointer;
    width: 610px;
    background: GhostWhite;
    border: thin solid Gainsboro;
    margin-right: 1em;
    margin-bottom: 1em;
  }
  .kontaktformular input:hover,
  .kontaktformular select:hover,
  .kontaktformular textarea:hover,
  .kontaktformular label:hover {
    background: Snow;
  }
  .kontaktformular input:focus,
  .kontaktformular select:focus,
  .kontaktformular textarea:focus {
    background: LightYellow;
  }
  .kontaktformular input#senden {
    float: left;
    width: 50%;
    font-size: 100%;
    background: LightGrey;
    padding: 2px;
    border: 2px solid;
    border-color: #efefef #000000 #000000 #efefef;
  }
  .kontaktformular input#senden:hover {
    background: FireBrick;
    color: white;
  }
  .kontaktformular input#checkbox {
    display: block;
    float: left;
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    margin-left: 2em;
  }
  .kontaktformular label#title {
    display: block;
    float: left;
    width: 400px;
    text-align: left;
    padding-right: 1em;
    border: none;
    margin-bottom: 0.5em;
  }
  .kontaktformular label#title span {
    color: Black;
    font-weight: bold;
  }

.rahmen {
  padding: 1em;
  border: 1px solid Gray;
}


/* CLASS: Seminarbox */
.kontaktformular .seminarbox {
  overflow: hidden;
  color: black;
  background-color: White;
  width: 90%;
  padding: 5px;
  padding-bottom: 1px;
  border: 1px solid Silver;
  margin-top: 5px;
  margin-bottom: 5px;
}
  .kontaktformular .seminarbox h1 {
    font-size: 110%;
    background-color: WhiteSmoke;
    padding: 2px 0 2px 2px;
    margin-top: 2px;
    margin-bottom: 2px;
  }
  .kontaktformular .seminarbox p {
    margin: 0px 0px 2px 5px;
  }
  .kontaktformular .seminarbox label {
    float: right;
    color: black;
    font-weight: bold;
    letter-spacing: 2px;
    background: Gainsboro url(../images/arrow.gif) no-repeat right;
    width: 150px;
    text-align: left;
    padding: 2px 0 2px 1em;
    border: none;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
  }
  .kontaktformular .seminarbox input#checkbox {
    display: block;
    float: right;
    cursor: pointer;
    width: auto;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid black;
    margin: 0;
    padding: 0;
  }
  .kontaktformular .seminarbox input#checkbox:checked {
    background: Tomato;
  }


/* FORM: Seminarform */
.seminarform {
  margin-bottom: 1em;
}
  .seminarform select {
    display: block;
    cursor: pointer;
    font-size: 80%;
    width: 200px;
    background: SeaShell;
    border: thin dotted Gainsboro;
  }
  .seminarform select:hover,
  .seminarform select:focus {
    background: GhostWhite;
  }
  .seminarform select:focus{
    outline: none;
  }
  .seminarform label {
    display: block;
    cursor: pointer;
    font-size: 80%;
    text-align: left;
    padding-right: 1em;
    border: thin solid Transparent;
  }

.rightfloat {
  float: right;
}

.leftfloat {
  float: left;
}

form br { /* Alle Zeilenumbrüche in Formularen auswählen */
  clear: both; /* das floating der labels und inputs aufheben */
}

.checkmarklist {
    list-style-image: url(../images/haken.gif);
}
  .checkmarklist li {
    margin-bottom: 15px;
  }

.indexbox {
  color: black;
  background-color: GhostWhite;
  font-size: 100%;
  width: 100%;
  padding: 5px;
  padding-bottom: 1px;
  border: 1px solid Silver;
  border-bottom: 0;
  border-top: 0;
  margin-top: 10px;
  margin-bottom: 15px;
}

#sidebar {
  float: right;
  color: black;
  width: 20%;
  padding: 0;
  margin: 30px 5px 5px 5px;
}

.sidebox {
  color: black;
  background-color: WhiteSmoke;
  font-size: 80%;
  width: 95%;
  padding: 5px;
  margin-bottom: 20px;
}
  .sidebox h1 {
    color: white;
    text-align: center;
    background: #336699;
    font-size: 120%;
    padding: 3px;
  }
  .sidebox p {
    margin: 5px 0 5px 0;
  }
  .sidebox ul {
    padding: 0;
    padding-left: 20px;
    margin: 5px 0 5px 0;
  }
  .sidebox li {
    padding: 3px;
    margin: 0;
  }

/* DIV: Footer */
#footer {
  clear: both;
  color: WhiteSmoke;
  background-color: FireBrick;
  font-size: 80%;
  line-height: 1.5em;
  text-align: center;
  padding: 2px;
  border-top: 1px solid DimGray;
  margin: 25px 0px 0px 0px;
}
  #footer a {
   color: Gold;
   text-decoration: none;
   outline: none;
  }
  #footer a:hover,
  #footer a:focus {
    text-decoration: none;
    color: Gold;
    border-bottom: 1px dotted;
    background: Black;
  }
  #footer a:visited {
    color: Gold;
  }