* {
    margin: 0;
    padding: 0;
}

body {
    color: black;
    background-color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
}

/* Textformatierung */
h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 1.5em;
    line-height: 0.75em;
    text-transform: uppercase;
    text-align: left;
    color: #8F8F8F;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
}
h2 {
    margin-top: 1.5em;
    margin-bottom: 1em;
    color: #000066;
    font-size: 1.1em;
    clear: both;
}
h3 {
    font-size: 1.1em;
    margin-bottom: 1em;
    color: #000066;
    font-weight: normal;
    clear: both;
}

p {
    margin-bottom: 1em;
}
p.news, p.form_link {
    margin-bottom: 0.5em;
    padding-left: 20px;
    background: url(img/blue.gif) top left no-repeat;
}
p.mini {
    font-size: 80%;
    margin-bottom: 1em;
}
p.error {
    color: Red;
    font-size: larger;
    font-weight: bold;
}
p.info {
    background-image: url(img/blue.gif);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 15px;
}
p.strike {
    text-decoration:line-through;
}
p.clearfix {
  clear: both;
}


em {
    color: #000066;
    font-weight: normal;
    font-style: normal;
}
strong {
    color: #000066;
    font-weight: bold;
}

span.modul {
    font-weight: bold;
    color: #000066;
}
span.submodul {
    color: #000066;
    font-style: italic;
}
span.wichtig {
    color: #0CA4E7;
}

/* Bilder */
img {
    vertical-align: bottom;
    border: none;
}
img.rightTop {
    float: right;
    margin: 0 0 1.5em 1.5em;
    /*border: 1px solid red;*/
}
img.right {
    float: right;
    margin: 1.5em 0 1.5em 1.5em;
}
img.left {
    float: left;
    margin: 0 1.5em  1.5em 0;
}
img.box {
    margin-right: 2px;
    margin-top: 5px;
}

/* Links */
a:link {
    color: #666666;
}
a:visited {
    color: #666666;
}
a:hover, a:active {
    color: #0CA4E7;
}
a.top {
    background: url(img/top.gif) right center no-repeat;
    padding-right: 20px;
}
a.wichtig {
    color: #0CA4E7;
}
a.wichtig:hover, a.wichtig:active {
    color: #666666;
}
a.plz {
    display: block;
    float: right;
    width: 3em;
    margin-top: -1.2em;
    border: 1px solid white;
}
a.form_link {
    display: block;
    margin-bottom: 0.5em;
    padding-left: 15px;
    background-image: url(img/blue.gif);
    background-repeat: no-repeat;
    background-position: center left;
}

/* Listen */
ul {
    list-style-image: url(img/blue.gif);
    margin-left: 20px;
    margin-bottom: 1em;
}

dl, dd, dt {
    margin-bottom: 1em;
}
dt {
    font-style: italic;
}
dl.dataList dt {
    float: left;
    clear: left;
    width: auto;
    padding-right: 1em;
    margin-top: 0;
    margin-bottom: 0;
}
dl.dataList dd {
    float: left;
    width: auto;
    margin-bottom: 0;
}
dl.dataList:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Tabellen */
table {
    width: 100%;
}
th {
    padding-bottom: 0.5em;
    font-weight: bold;
    color: #000066;
}
td {
    padding-bottom: 0.5em;
    vertical-align: top;
}
table.vertcenter td {
    vertical-align: middle;
}

/* Soundbeispiel Tabellen */
table.soundexample {
    width: 580px;
    color: Black;
    background-color: #F2F1DA;
    padding-top: 0.25em;
    margin-bottom: 1em;
}
table.soundexample th {
    padding-left: 0.5em;
}
table.soundexample td {
    font-size: 85%;
    padding-left: 0.5em;
    padding-top: 0.25em;
}
table.soundexample td.beispiel a {
    font-weight: bold;
    font-size: 110%;
}
tr.alt {
    background-color: #E5E4C3;
}
table.soundexample th {
    text-align: left;
    color: Black;
}
th.beschreibung {
    width: 30%;
}
th.quelle {
    width: 35%;
}
th.beispiel {
    width: 35%;
}

/* Shop Tabellen */
th.anzahl {
    width: 15%;
    text-align: left;
}
th.bezeichnung {
    width: 70%;
    text-align: left;
}
th.preis, td.preis {
    width: 20%;
    text-align: left;
}
th.produkt {
    width: 25%;
    color: #000066;
    text-align: center;
}
table.zahlweise td {
    vertical-align: middle;
}

/* Pressebericht Tabellen */
table.presse th {
    padding-bottom: 1.5em;
}
table.presse td {
    padding-bottom: 2.5em;
}
th.magazin {
    width: 35%;
    color: #000066;
    text-align: center;
}
th.zitat {
    width: 40%;
    color: #000066;
    text-align: center;
}
td.zitat, td.magazin {
    font-size: 83%;
}
td.magazin {
    text-align: center;
}
td.logo {
    text-align: right;
    vertical-align: middle;
}

/* Formulare */
form {
    clear: both;
    line-height: 200%;
    margin-bottom: 1.5em;
}
form table {
    line-height: 120%;
}
form p, form ul {
    line-height: 140%;
}
#signup {
    margin: 20px auto;
    width: 660px;
}
fieldset {
    padding: 0.5em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
legend {
    color: #000066;
    font-weight: bold;
    padding: 0 0.5em;
}
#signup label {
    float: left;
    clear: left;
    width: 260px;
    vertical-align: top;
    font-size: 91%;
    font-weight: bold;
}
label.left {
    margin-left: 1em;
    color: #000066;
}
label, select, input[type=text] {
    cursor: pointer;
}
input::-webkit-input-placeholder,
input:-moz-placeholder {
    color: #A6A6A6;
}
textarea {
    background-color: #eee;
    width: 330px;
    border: 1px solid #ccc;
    margin-left: 1em;
    margin-bottom: 0.8em;
    padding-top: 3px;
    padding-bottom: 3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
input[type=email],
input[type=text],
select {
    background-color: #eee;
    border: 1px solid #ccc;
    width: 330px;
    margin-left: 1em;
    margin-bottom: 0.8em;
    padding-top: 3px;
    padding-bottom: 3px;

    moz-transition: background-color 1s ease;
    -webkit-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
input[type=email],
input[type=text] {
    background: #eee url(img/ico_validation.png) 379px -29px no-repeat;
}

/* Formulare Validierung */
input[type=text], input[type=email] {
    background: #eee url(ico_validation.png) 310px -29px no-repeat;
}
#frm input[type=text]:focus:not([pattern]):required:invalid,
#frm input[type=email]:focus:not([pattern]):required:invalid
{
    background-color: #FFD585;
    background-position: 379px -29px;
}


#signup fieldset input:required:valid
{
    background-color: #8EF05D;
    background-position: 310px -59px;
}

#signup input.error
{
    background-color: pink;
    background-position: 310px -29px;
    outline: none;
}
#signup input.required
{
    background-color: #eee;
    background-position: 310px -29px;
}
#signup input.valid
{
    background-color: #8EF05D;
    background-position: 310px -59px;
}

#signup input[type=submit].valid
{
    background-color: #eee;
}

#signup input.error::-webkit-input-placeholder,
#signup inputerror :-moz-placeholder {
    color: #fff;
}

/* spezielle Elemente */
#cc3 {
    float: none;
}

#container {
    width: 600px;
    margin: 20px auto;
}

#header {
    clear: left;
}
#header h1 {
    border-top: none;
}

#downloads {
    clear: both;
}

#footer {
    text-align: center;
}
#footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    font-variant: small-caps;
    font-weight: bold;
}
#footer p {
    clear: both;
    width: 90%;
    margin: 0 auto;
    padding-top: 1em;
}
#footer li a {
    color: Black;
    text-decoration: none;
    background-image: none;
}
#footer li.linkleft {
    display: block;
    width: 45%;
    float: left;
    text-align: right;
}
#footer li.linkleft a {
    display: block;
    padding-right: 5%;
    border-right: 2px solid black;
}
#footer li.linkleft a:hover {
    color: #0CA4E7;
}
#footer li.linkright {
    display: block;
    width: 45%;
    float: left;
    text-align: left;
}
#footer li.linkright a {
    display: block;
    padding-left: 5%;
}
#footer li.linkright a:hover {
    color: #0CA4E7;
}

/* Navigation */
#navigation {
    width: 600px;
    height: 84px;
}
#navigation img {
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}
#navigation a {
    display: block;
    margin: 0;
    padding: 0;
    float: left;
    width: 94px;
    height: 84px;
}
#navigation a.mainnav {
    display: inline;
    float: none;
}
#navigation a.home {
    width: 16px;
    height: 84px;
    background: White url(img/home1.gif) top left no-repeat;
}
#navigation a.home:hover {
    background-image: url(img/home2.gif);
}
#navigation a.produkte {
    width: 93px;
    height: 84px;
    background: White url(img/produkte1.gif) top left no-repeat;
}
#navigation a.produkte:hover {
    background-image: url(img/produkte2.gif);
}
#navigation a.support {
    background: White url(img/support1.gif) top left no-repeat;
}
#navigation a.support:hover {
    background-image: url(img/support2.gif);
}
#navigation a.bestellung {
    background: White url(img/bestellung1.gif) top left no-repeat;
}
#navigation a.bestellung:hover {
    background-image: url(img/bestellung2.gif);
}
#navigation a.newspresse {
    background: White url(img/newspresse1.gif) top left no-repeat;
}
#navigation a.newspresse:hover {
    background-image: url(img/newspresse2.gif);
}
#navigation a.community {
    background: White url(img/community1.gif) top left no-repeat;
}
#navigation a.community:hover {
    background-image: url(img/community2.gif);
}
#navigation a.unlock {
    background: White url(img/unlock1.gif) top left no-repeat;
}
#navigation a.unlock:hover {
    background-image: url(img/unlock2.gif);
}

/* Subnavigation */
#subnavigation, #subnavigation2 {
    height: 16px;
    width: 600px;
    border-bottom: 2px solid Black;
    border-top: 2px solid Black;
}
#subnavigation2 {
    height: 16px;
    border-top: none;
}
#subnavigation a, #subnavigation2 a {
    display: block;
    margin: 0;
    padding: 0;
    float: left;
    width: 93px;
    height: 16px;
    background: White center left no-repeat;
    border-right: 1px solid black;
    border-left: 1px solid White;
}

/* Produkte */
#subnavigation a.modeling {
    background-image: url(img/modeling1.gif);
    margin-left: 16px;
    border-left: none;
}
#subnavigation a.modeling:hover {
    background-image: url(img/modeling2.gif);
}
#subnavigation a.ll {
    background-image: url(img/ll1.gif);
}
#subnavigation a.ll:hover {
    background-image: url(img/ll2.gif);
}
#subnavigation a.ll_session {
    background-image: url(img/ll_session1.gif);
}
#subnavigation a.ll_session:hover {
    background-image: url(img/ll_session2.gif);
}
#subnavigation a.ultraanalog {
    background-image: url(img/ultraanalog1.gif);
}
#subnavigation a.ultraanalog:hover {
    background-image: url(img/ultraanalog2.gif);
}
#subnavigation a.ua_session {
    background-image: url(img/ua_session1.gif);
}
#subnavigation a.ua_session:hover {
    background-image: url(img/ua_session2.gif);
}
#subnavigation a.strum {
    background-image: url(img/strum1.gif);
    border-right: none;
}
#subnavigation a.strum:hover {
    background-image: url(img/strum2.gif);
}
#subnavigation2 a.strum_session {
    background-image: url(img/strum_session1.gif);
    margin-left: 16px;
    border-left: none;
}
#subnavigation2 a.strum_session:hover {
    background-image: url(img/strum_session2.gif);
}
#subnavigation2 a.strum_electric {
    background-image: url(img/strum_elec1.gif);
}
#subnavigation2 a.strum_electric:hover {
    background-image: url(img/strum_elec2.gif);
}
#subnavigation2 a.stringstudio {
    background-image: url(img/stringstudio1.gif);
}
#subnavigation2 a.stringstudio:hover {
    background-image: url(img/stringstudio2.gif);
}
#subnavigation2 a.tassman {
    background-image: url(img/tassman1.gif);
    border-right: none;
}
#subnavigation2 a.tassman:hover {
    background-image: url(img/tassman2.gif);
}

/* Support */
#subnavigation a.supportformular {
    background-image: url(img/supportformular1.gif);
    margin-left: 109px;
    border-left: none;
}
#subnavigation a.supportformular:hover {
    background-image: url(img/supportformular2.gif);
}
#subnavigation a.faq {
    background-image: url(img/faq1.gif);
}
#subnavigation a.faq:hover {
    background-image: url(img/faq2.gif);
}
#subnavigation a.download {
    background-image: url(img/download1.gif);
    border-right: none;
}
#subnavigation a.download:hover {
    background-image: url(img/download2.gif);
}

/* Bestellung */
#subnavigation a.bestellformular {
    background-image: url(img/bestellformular1.gif);
    margin-left: 204px;
    border-left: none;
}
#subnavigation a.bestellformular:hover {
    background-image: url(img/bestellformular2.gif);
}
#subnavigation a.haendler {
    background-image: url(img/haendler1.gif);
    border-right: none;
}
#subnavigation a.haendler:hover {
    background-image: url(img/haendler2.gif);
}

/* Presse */
#subnavigation a.presseberichte {
    background-image: url(img/presseberichte1.gif);
    margin-left: 299px;
    border-left: none;
}
#subnavigation a.presseberichte:hover {
    background-image: url(img/presseberichte2.gif);
}
#subnavigation a.presseinfos {
    background-image: url(img/presseinfos1.gif);
    border-right: none;
}
#subnavigation a.presseinfos:hover {
    background-image: url(img/presseinfos2.gif);
}

/* Community */
#subnavigation a.head2head {
    background-image: url(img/head2head1.gif);
    margin-left: 12px;
    border-left: none;
}
#subnavigation a.head2head:hover {
    background-image: url(img/head2head2.gif);
}
#subnavigation a.techtalk {
    background-image: url(img/techtalk1.gif);
}
#subnavigation a.techtalk:hover {
    background-image: url(img/techtalk2.gif);
}
#subnavigation a.forum {
    background-image: url(img/forum1.gif);
}
#subnavigation a.forum:hover {
    background-image: url(img/forum2.gif);
}
#subnavigation a.sounds {
    background-image: url(img/sounds1.gif);
}
#subnavigation a.sounds:hover {
    background-image: url(img/sounds2.gif);
}
#subnavigation a.userlibrary {
    background-image: url(img/userlibrary1.gif);
    border-right: none;
}
#subnavigation a.userlibrary:hover {
    background-image: url(img/userlibrary2.gif);
}

/* Unlock */
#subnavigation a.registrierung {
    background-image: url(img/registrierung1.gif);
    margin-left: 485px;
    border-left: none;
}
#subnavigation a.registrierung:hover {
    background-image: url(img/registrierung2.gif);
}

div.leftCol {
    float: left;
    width: 45%
}
div.rightCol {
    float: right;
    width: 50%
}
div.right {
    float: right;
}
p.clear {
    clear: both;
    margin: 0;
}