body { background: #821212 url(../images/bg.gif) repeat-x; font: 12px Arial, Verdana, sans-serif; color: #fff; }

h4 { display: none; }

a { color: #fff; }
a:hover { text-decoration: none; }
a { outline: none; }

strong { font-weight: bold; line-height: 1.6em; }

#wrapper { width: 900px; margin: 50px auto 0; position: relative; }

h1 { border-bottom: 1px solid #d65252; padding: 0 0 12px; }
h1 a { display: block; width: 504px; height: 43px; text-indent: -9999px; background: url(../images/josef-ispas-trans.png); }
body.en h1 a { width: 512px; background: url(../images/josef-ispas-en-trans.png); }

ul#language { position: absolute; top: 0; right: 0; overflow: hidden; }
ul#language li { border-right: 1px solid #fff; margin: 0 6px 0 0; padding: 0 6px 0 0; float: left; height: 13px; }
ul#language li.active { font-weight: bold; text-decoration: underline; }
ul#language li.last { border: 0; margin: 0; padding: 0; }
ul#language li a { text-decoration: none; }
ul#language li a:hover { text-decoration: underline; }

ul#navi { margin: 12px 0 75px; }

#content-overview { overflow: hidden; height: 305px; }
#content-overview a { font-weight: bold; position: absolute; bottom: 0; left: 0; }
#content-overview p { margin: 225px 0 0; line-height: 1.6em; width: 155px; }

body.en #content-overview p { width: 195px; }

#content-overview .box { float: left; width: 225px; height: 305px; background-repeat: no-repeat; position: relative; }
#content-overview .box.angebot01 { background-image: url(../images/angebot01/bg-trans.png); }
#content-overview .box.angebot02 { background-image: url(../images/angebot02/bg-trans.png); }
#content-overview .box.angebot03 { background-image: url(../images/angebot03/bg-trans.png); }
#content-overview .box.angebot04 { background-image: url(../images/angebot04/bg-trans.png); }

.popup { display: none; width: 370px; padding: 40px 40px 80px; background: #000 url(../images/overlay-bg.gif) repeat-x;  z-index: 1000; line-height: 1.6em; }
.popup ul { list-style: disc; color: #fff; margin: 0 0 0 15px; }
.popup ul li span { line-height: 1.6em; color: #999; }
.popup .images { text-align: center; overflow: hidden; margin: 25px 0; }
.popup .images img { border: 5px solid #333; margin: 0 5px; }
.popup .sign { width: 164px; height: 75px; background: url(../images/unterschrift-trans.png) no-repeat; position: absolute; right: 30px; bottom: -20px; }
.popup a.schliessen { display: block; width: 131px; height: 14px; background: url(../images/schliessen-trans.png); text-indent: -9999px; position: absolute; right: 0; top: -22px; }
body.en .popup a.schliessen { width: 43px; height: 14px; background: url(../images/close-trans.png); }
.popup .popup-nav { position: absolute; bottom: 10px; left: 10px; color: #ccc; }
.popup .popup-nav a { color: #666; }
.popup p { line-height: 1.6em; margin: 0 0 15px; color: #ccc; }
.popup p a { color: #ccc; }
.popup p strong{color:#fff;}

.popup#lebenslauf img, .popup#curriculum-vitae img { float: left; margin: 0 10px 10px 0; border: 5px solid #333; }
.popup#lebenslauf ul, .popup#curriculum-vitae ul { width: 215px; float: left; }

.popup h2 { text-indent: -9999px; margin: 0 0 25px; }
.popup#probespielbetreuung-fuer-bratsche h2 { background: url(../images/angebot01/headline-trans.png) no-repeat; width: 353px; height: 28px; }
body.en .popup#audition-preparation-for-viola h2 { background: url(../images/angebot01/headline-en-trans.png) no-repeat; width: 320px; height: 28px; }
.popup#hochschulvorbereitung-fuer-bratsche-und-geige h2 { background: url(../images/angebot02/headline-trans.png) no-repeat; width: 385px; height: 56px; }
body.en .popup#preparation-for-studying-viola-and-violin-at-a-university h2 { background: url(../images/angebot02/headline-en-trans.png) no-repeat; width: 363px; height: 56px; }
.popup#weiterbildung-fuer-profis-und-laien h2 { background: url(../images/angebot03/headline-trans.png) no-repeat; width: 260px; height: 56px; }
body.en .popup#further-education-for-professionals-and-non-professionals h2 { background: url(../images/angebot03/headline-en-trans.png) no-repeat; width: 372px; height: 56px; }
.popup#instrumentalunterricht-fuer-bratsche-und-geige h2 { background: url(../images/angebot04/headline-trans.png) no-repeat; width: 277px; height: 56px; }
body.en .popup#viola-and-violin-lessons h2 { background: url(../images/angebot04/headline-en-trans.png) no-repeat; width: 254px; height: 21px; }

#lebenslauf h2 { text-indent: -9999px; height: 28px; width: 232px; background: url(../images/headline-lebenslauf-trans.png) no-repeat; }
body.en #curriculum-vitae h2 { height: 19px; width: 183px; background: url(../images/headline-curriculum-vitae-trans.png) no-repeat; }
#kontakt h2 { text-indent: -9999px; height: 28px; width: 232px; background: url(../images/headline-kontakt-trans.png) no-repeat; }
body.en #kontakt h2 { height: 19px; width: 84px; background: url(../images/headline-contact-trans.png) no-repeat; }
#kontakt-gesendet h2 { text-indent: -9999px; height: 28px; width: 141px; background: url(../images/headline-vielendank-trans.png) no-repeat; }
body.en #kontakt-sent h2 { height: 28px; width: 119px; background: url(../images/headline-thankyou-trans.png) no-repeat; }
#impressum h2 { text-indent: -9999px; height: 28px; width: 232px; background: url(../images/headline-impressum-trans.png) no-repeat; }
body.en #imprint h2 { height: 28px; width: 82px; background: url(../images/headline-imprint-trans.png) no-repeat; }

form { width: 368px; padding: 20px 0 0; }
form label { display: block; width: 80px; float: left; line-height: 20px; }
form input.text, form textarea { border: 1px solid #000; padding: 3px; width: 280px; margin: 0 0 10px; font: 12px Arial, Verdana, sans-serif; }
form input.text.validation-failed, form textarea.validation-failed { border: 1px solid red; background: #f3e3e3; }
form input.submit { float: right; height: 24px; width: 90px; background: #333; color: #fff; }
form input.submit:hover { background: #a51717; cursor: pointer; }

#footer { border-top: 1px solid #a64b4b; padding: 12px 0 35px; position: relative; margin: 80px 0 0; width: 900px; }
#footer a:hover { text-decoration: none; }
#footer #copy { float: left; }
#footer ul { float: left; }
#footer ul li { border-left: 1px solid #fff; margin: 0 0 0 6px; padding: 0 0 0 6px; float: left; height: 13px; }
#footer #evenmedia { position: absolute; right: 0; top: 12px; color: #c38989; }
#footer #evenmedia a { color: #c38989; }

#overlay { background: url(../images/overlay-trans.png); position: fixed; top: 0; left: 0; height: 100%; width: 100%; visibility: hidden; z-index: 999; }