* {
    margin: 0;
    padding: 0;
}

body {
    color: Black;
    background: #EEEEEE;
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    font-size: small;
}

/* Anführungszeichen je nach Land */
:lang(de)    { quotes:"\201E" "\201C" "\201A" "\2018"; }
:lang(de-DE) { quotes:"\00BB" "\00AB" "\203A" "\2039"; }
:lang(de-CH) { quotes:"\00AB" "\00BB" "\2039" "\203A"; }
:lang(en)    { quotes:"\201C" "\201D" "\2018" "\2019"; }
:lang(fr)    { quotes:"\00AB\00A0" "\00A0\00BB" "\2039\00A0" "\00A0\203A"; }

/* Text */
h1 {
    font-family: Verdana, sans-serif;
    margin-bottom: 1em;
    font-size: 150%;
    border-bottom: 2px solid White;
}
.textonly h1, #content_col h1 {
    color: #5A7A5C;
    border-bottom-color: #5A7A5C;
}

h2 {
    font-family: Verdana, sans-serif;
    font-weight: normal;
    margin-bottom: 0.75em;
    font-size: 140%;
}
.textonly h2 {
    margin-top: 1em;
}

h3 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 120%;
}
div.distributorList h3 {
    padding-top: 0.25em;
}

p {
    margin-bottom: 0.5em;
}

div.box h2, div.box p {
    padding: 0.5em;
}

p.info {
    font-size: 80%;
}
p.wichtig {
    font-weight: bold;
    color: #5A7A5C;
    font-size: 110%;
}
p.cite:before {
    content:open-quote;
}
p.cite:after {
    content:close-quote;
}
#pic p.cite {
    padding-top: 2em;
    font-size: 120%;
    font-weight: bold;
}

p.imgtext {
    margin-top: 0.5em;
}

div.distributorList p {
    margin-bottom: 2em;
}

#info_col ul, #content_col ul, .textonly ul {
    margin-left: 1.5em;
}
ol {
    margin-left: 2em;
}
li {
    margin-bottom: 0.4em;
}

dl {
    width: 80%;
}
dt {
    clear: both;
    float: left;
    width: 75%;
    font-weight: bold;
}
dd {
    float: right;
    width: 20%;
    text-align: right;
}
dd.text {
    float: none;
    clear: both;
    width: 100%;
    margin-bottom: 1em;
    text-align: left;
    border-bottom: 1px dashed #DDD;
}

span.tm {
    font-size: 0.6em;
    text-transform: uppercase;
    vertical-align: super;
}
span.sup {
    vertical-align: super;
}

/* Links */
a {
    color: White;
}
a.info, p.info, p.pdf {
    font-size: 86%;
}
a.faq {
    text-decoration: none;
}
a.faq:active, a.faq:hover, a.faq:focus {
    text-decoration: underline;
}

#navi a {
    display: block;
    width: 125px;
    float: left;
    height: 2em;
    padding-top: 0.4em;
    color: #EDEDED;
    font-size: 86%;
    font-weight: bold;
    text-decoration: none;
}
#navi a:active, #navi a:hover, #navi a:focus, #navi a.actual {
    color: White;
    background-color: #BD0706;
    text-decoration: underline;
}

#pic a {
    display: block;
    color: #B1B1B7;
    font-size: 86%;
}

#content, #footer {
    color: White;
    background-color: #696969;
}

#content.textonly a {
    color: Black;
}

#content_col a {
    color: Black;
}

#info_col a {
    color: Black;
}

#footer a {
    padding-right: 2em;
}
#footer a:active, #footer a:hover, #footer a:focus {
    color: Black;
}


/* Formulare */

#frm {
    width: 740px;
    margin: 20px auto;
}
#frm br {
  clear: left;
}

#frm fieldset {
    margin: 0 0 20px;
    padding: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#frm label {
    float: left;
    clear: left;
    width: 250px;
    vertical-align: top;
}

input::-webkit-input-placeholder,
input:-moz-placeholder {
    color: #A6A6A6;
}

#frm textarea {
    background-color: #eee;
    width: 371px;
    padding: 3px 26px 3px 3px;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#frm input[type=email],
#frm input[type=text],
#frm select {
    background: #eee url(img/ico_validation.png) 379px -29px no-repeat;
    width: 371px;
    padding: 3px 26px 3px 3px;
    border: 1px solid #ccc;
    margin-bottom: 1em;

    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;
}

#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;
}

#frm .validation01
{
    background: red;
    color: #fff;
    display: none;

    -moz-box-shadow: 0px 0px 4px #dddddd;
    -webkit-box-shadow: 0px 0px 4px #dddddd;
    box-shadow: 0px 0px 4px #dddddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#frm input:focus + .validation01                             { display: block; }

#frm input:focus:required:invalid + .validation01 .valid,
#frm input.error:focus + .validation01 .valid,
#frm input.required:focus + .validation01 .valid,
#frm input:focus + .validation01 .valid                  { display: none; }

#frm input:focus:required:valid + .validation01,
#frm input.valid:focus + .validation01                   { background: green; }

#frm input:focus:required:valid + .validation01 .invalid,
#frm input.valid:focus + .validation01 .invalid          { display: none; }

#frm input:focus:required:valid + .validation01 .valid,
#frm input.valid:focus + .validation01 .valid                { display: block; }

#frm fieldset input:required:valid
{
    background-color: #8EF05D;
    background-position: 379px -61px;
}
#frm fieldset input[type=submit]
{
    background-color: #eee;
}

/* Enhanced error styling */
#frm input.error
{
    background-color: pink;
    background-position: 379px 3px;
    outline: none;
}
#frm input.required
{
    background-color: #eee;
    background-position: 379px 29px;
}
#frm input.valid
{
    background-color: #8EF05D;
    background-position: 379px -61px;
}

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

/* andere Elemente */
img {
    border: none;
}
img.left {
    float: left;
    margin-top: 10px;
    margin-right: 47px;
}
img.left_last {
    float: left;
    margin-top: 10px;
}

#index img.left {
    float: left;
    margin-top: 10px;
    margin-right: 42px;
}
#index img.left_last {
    float: left;
    margin-top: 10px;
    margin-right: 0;
}

img.right, img.right_fix {
    float: right;
    margin-top: 10px;
    margin-left: 30px;
}

img.haken {
    float: left;
    padding-top: 0.4em;
}

div.display img, div.display_last img {
    margin-bottom: 15px;
}

#pic img {
    float: left;
}

#content img {
    border: none;
    margin-right: 1em;
    margin-bottom: 1em;
}

#content div.box img {
    float: right;
    border: none;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: -4px;
}

hr {
    color: #A5A6A5;
    background-color: #A5A6A5;
    margin: 0.5em 0;
}

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid Black;
    margin: 0.5em 0 1em;
}
th {
    background-color: #C2BDBD;
    font-weight: bold;
    text-align: left;
}
th, td {
    padding: 0.1em 0.5em;
}
tr.alt {
    background-color: #CBDECD;
}

/* Layer */
#container {
    margin: 0 auto;
    padding: 0;
    width: 850px;
    color: White;
}

#header {
    height: 95px;
    background: #222222;
    color: White;
}

#navi {
    height: 2em;
    background-color: #444444;
    color: #EDEDED;
    font-size: 120%;
    text-align: center;
    border-bottom: 1px solid #888888;
    border-top: 1px solid #888888;
}

#pic {
    height: 150px;
    padding-right: 1em;
    color: #B1B1B7;
    background-color: Black;
    border-bottom: 1px solid #A5A6A5;
    text-align: right;
}

#content {
    padding: 10px;
}

#content.two_col {
    background-color: White;
    color: Black;
    padding: 0;
    border-left: 1px solid #696969;
    border-right: 1px solid #696969;
}

#content.textonly {
    background-color: White;
    color: Black;
    padding: 1.5em;
    border-left: 1px solid #696969;
    border-right: 1px solid #696969;
}

#footer {
    padding: 10px;
}

#content_col {
    float: left;
    width: 580px;
    padding: 30px 10px;
    background-color: White;
    color: Black;
}

#info_col {
    float: right;
    width: 226px;
    padding: 10px 10px 30px;
    background-color: #CFCFCF;
    color: Black;
    border-left: 1px solid #A5A6A5;
    border-bottom: 1px solid #A5A6A5;
}

/* Clearer */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
}

/* Formulare */
form br {
    clear: both;
}
fieldset {
    padding: 0.5em;
}
legend {
    font-weight: bold;
}
label, select, input[type=text] {
    cursor: pointer;
}
label.left {
    float: left;
    text-align: right;
    width: 7em;
    padding-right: 1em;
}
select, input[type=text] {
    float: left;
}
input, textarea {
    color: Black;
    background-color: White;
}
input:focus, textarea:focus {
    color: Black;
    background-color: Silver;
}

/* versch. Boxen */

/* kleine Box */
div.display {
    float: left;
    width: 220px;
    margin-right: 50px;
    margin-top: 15px;
    margin-bottom: 30px;
}
div.display_last {
    float: left;
    width: 220px;
    margin-top: 15px;
    margin-bottom: 30px;
}

/* runde Boxen im Content */
.xsnazzy {
    background: transparent;
    margin: 10px;
}
.xtop, .xbottom {
    display: block;
    background: transparent;
    font-size: 1px;
}
.xb1, .xb2, .xb3, .xb4 {
    display: block;
    overflow: hidden;
}
.xb1, .xb2, .xb3 {
    height: 1px;
}
.xb2, .xb3, .xb4 {
    background: #444444;
    border-left: 1px solid #D2D2D2;
    border-right: 1px solid #D2D2D2;
}
.xb1 {
    margin: 0 5px;
    background: #D2D2D2;
}
.xb2 {
    margin: 0 3px;
    border-width: 0 2px;
}
.xb3 {
    margin: 0 2px;
}
.xb4 {
    height: 2px;
    margin: 0 1px;
}
.xboxcontent {
    display: block;
    padding: 1em;
    background: #444444;
    border: 0 solid #D2D2D2;
    border-width: 0 1px;
}

/* runde Boxen auf Overview-Seiten */
div.box {
    float: left;
    width: 392px;
    height: 172px;
    margin: 10px;
    margin-bottom: 20px;
    padding: 0;
    background-image: url(img/box_bg.gif);
}

/*
Prozentstandardschriftgrößen
100.01, 93, 86, 76, 60
*/