/* - - - - - - - - - - - - - - - - - - - - - - *\
| stylesheet für www.orthim.de
| fasc | 2008-07-04
|
| inhaltsverzeichnis
| - CSS-Reset & RTE (include)
| - allg. Elemente
| - Branding
| - Inhaltsbereich
| - Footer
| - Navigation
| - seitespezifische Dinge
| - Formulare
|
\* - - - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - *\
| css-reset & RTE (include)
\* - - - - - - - - - - - - - - - - - - - */

@import "./@external/reset.css";


/* - - - - - - - - - - - - - - - - - - - *\
| allg. Elemente
\* - - - - - - - - - - - - - - - - - - - */

a, blockquote, caption, cite, div, h1, h2, h3, h4, h5, input, label, li, p, td {
  color: #585858;
  font-family: Verdana, Sans-Serif;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
}

blockquote {
  font-weight: bold;
  margin-top: 15px;
  width: 350px;
}

blockquote p {
  width: 100%;
}

body {
  background: #d1d6dc;
}

caption {
  font-weight: bold;
  margin-bottom: 3px;
  padding-left: 10px; padding-top: 20px;
  text-align: left;
}

cite {
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
}

h3 {
  font-size: 14px; font-weight: bold;
  margin-top: 18px; margin-bottom: 20px;
}

h4 {
  margin-top: 20px;
}

h5 {
  font-weight: bold;
}

h3, h4, h5, p {
  margin-left: 10px;
}

p {
  margin-bottom: 15px;
  width: 475px;
}

table {
  width: 475px;
}

td.name {
  font-weight: bold;
  padding-left: 10px;
}

td.amount {
  text-align: right;
  width: 30px;
}

td.unit {
  padding-left: 5px;
}

tr.odd td {
  background: #ddd;
}

tr.even td {
  background: #fff;
}

#content ul {
  margin-left: 10px; margin-bottom: 20px;
  width: 475px;
}

#content li {
  list-style-type: disc;
  margin-left: 15px;
}

#content a {
  color: #2b6d08;
}

.content-pic {
  margin: 20px 0 20px 10px;
}

/* - - - - - - - - - - - - - - - - - - - *\
| Branding
\* - - - - - - - - - - - - - - - - - - - */

#branding {
  width: 100%; height: 197px;
}

#branding #logo {
  background: url(../images/logo.png) no-repeat;
  float: left;
  position: relative; top: 18px; left: 45px;
  width: 257px; height: 112px;
}
* html body #branding #logo {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/logo.png", sizingMethod="image");
}

#branding #logo h1,
#branding #logo p {
  text-indent: -9999px;
}

#branding #logo a {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}

#product-branding {
  position: relative; left: 84px; top: 73px;
}

#product-branding h2 {
  color: #fff;
  font-size: 24px; font-weight: bold;
  line-height: 30px;
  margin-bottom: 10px;
}

#product-branding p {
  color: #fff;
  font-size: 14px; font-weight: bold;
  width: auto;
}

/* - - - - - - - - - - - - - - - - - - - *\
| Inhaltsbereich
\* - - - - - - - - - - - - - - - - - - - */

#content {
  display: block; float: left;
  position: relative; left: 80px;
  width: 584px;
}
html > body #content {
  left: 76px;
  width: 588px;
}

#content #packshot {
  float: right; 
  margin: 10px;
}

#content #author {
  float: right; 
  margin: 0 0 0 10px;
}

#content .pic {
  font-size: 10px;
  line-height: 14px;
  padding-left: 390px;
  width: 188px;
}
   
#wrapper {
  background: url(../images/wrapper.png) no-repeat left bottom #fff;
  overflow: hidden; width: 100%;
}

#page {
  position: relative;
  margin: 0 auto;
  width: 919px;
}

#product-head {
  overflow: hidden;
  width: 100%;
}


/* - - - - - - - - - - - - - - - - - - - *\
| Footer
\* - - - - - - - - - - - - - - - - - - - */

#footer {
  background: #d1d6dc;
  padding: 20px 0 0 340px;
}

#footer ul li {
  background: url(../images/footer-li.png) no-repeat 0px 1px;
  display: block;
  float: left;
  font-size: 11px;
  margin-left: 5px;
  padding-left: 8px;
}

#footer ul li.first {
  background: none;
  margin: 0; padding: 0;
}

#footer ul li a {
  font-size: 11px;
}


/* - - - - - - - - - - - - - - - - - - - *\
| Navigation
\* - - - - - - - - - - - - - - - - - - - */

#navigation {
  display: block; float: left;
  padding-bottom: 30px;
  position: relative; left: 45px;
  width: 255px; 
}

#navigation ul {
  height: 1px;
}
html > body #navigation ul {
  height: auto;
}

#navigation ul li {
  background-color: #818181;
  border-bottom: 1px solid #fff;
}

#navigation ul li {
  display: block;
}

#navigation ul li a {
  color: #fff;
  display: block;
  font-size: 11px; font-weight: bold;
  line-height: 29px;
  overflow: hidden;
  white-space: nowrap;
}

#navigation ul li a img {
  vertical-align: middle;
}
* html body #navigation ul li a img {
  margin: 7px 0 6px 0;
}

#navigation ul li a span {
  background-color: #fff;
  display: block;
  float: left;
  margin-right: 3px;
  width: 23px;
}
* html body #navigation ul li a span {
  margin-right: 0;
}

/* menüpunkte müssen hier einzeln designed werden */
#navigation ul li.startseite a span.product-color,
#navigation ul li.startseite a.active,
#navigation ul li.startseite a:hover {
  background-color: #2b6d08;
}

#navigation ul li.kani a span.product-color,
#navigation ul li.kani a.active,
#navigation ul li.kani a:hover {
  background-color: #9c2016;
}

#navigation ul li.orthobase-c-plus a span.product-color,
#navigation ul li.orthobase-c-plus a.active,
#navigation ul li.orthobase-c-plus a:hover {
  background-color: #edcd00;
}

#navigation ul li.orthosbase-multi-plus-magnesium a span.product-color,
#navigation ul li.orthosbase-multi-plus-magnesium a.active,
#navigation ul li.orthosbase-multi-plus-magnesium a:hover {
  background-color: #00599c;
}

#navigation ul li.orthobase-b-comp a span.product-color,
#navigation ul li.orthobase-b-comp a.active,
#navigation ul li.orthobase-b-comp a:hover {
  background-color: #d5a601;
}

#navigation ul li.q-10-peptid a span.product-color,
#navigation ul li.q-10-peptid a.active,
#navigation ul li.q-10-peptid  a:hover {
  background-color: #6d9a26;
}

#navigation ul li.q-10-peptid-plus-30 a span.product-color,
#navigation ul li.q-10-peptid-plus-30 a.active,
#navigation ul li.q-10-peptid-plus-30 a:hover {
  background-color: #6d9a26;
}

#navigation ul li.carosezin a span.product-color,
#navigation ul li.carosezin a.active,
#navigation ul li.carosezin a:hover {
  background-color: #008b5e;
}

#navigation ul li.orthobase-zym a span.product-color,
#navigation ul li.orthobase-zym a.active,
#navigation ul li.orthobase-zym a:hover {
  background-color: #008877;
}

#navigation ul li.satyrin-basentrank a span.product-color,
#navigation ul li.satyrin-basentrank a.active,
#navigation ul li.satyrin-basentrank a:hover {
  background-color: #b6064e;
}

#navigation ul li.orthobase-carnitin-extra a span.product-color,
#navigation ul li.orthobase-carnitin-extra a.active,
#navigation ul li.orthobase-carnitin-extra a:hover {
  background-color: #c61871;
}

#navigation ul li.orthobase-san a span.product-color,
#navigation ul li.orthobase-san a.active,
#navigation ul li.orthobase-san a:hover {
  background-color: #008bcf;
}

#navigation ul li.orthobase-flavin a span.product-color,
#navigation ul li.orthobase-flavin a.active,
#navigation ul li.orthobase-flavin a:hover {
  background-color: #9c116d;
}

#navigation ul li.zellsalz a span.product-color,
#navigation ul li.zellsalz a.active,
#navigation ul li.zellsalz a:hover {
  background-color: #008051;
}

#navigation ul li.orthobase-glutathion-plus a span.product-color,
#navigation ul li.orthobase-glutathion-plus a.active,
#navigation ul li.orthobase-glutathion-plus a:hover {
  background-color: #0085C4;
}

#navigation ul li.orthobase-orthoflor a span.product-color,
#navigation ul li.orthobase-orthoflor a.active,
#navigation ul li.orthobase-orthoflor a:hover {
  background-color: #96ad16;
}

#navigation ul li.orthobase-orthoflor a {
  background-image: url(../images/navigation-orthobase-orthoflor.png);
  background-position: 0 0;
}

#navigation ul li.orthobase-orthoflor a span.product-color {
  background-color: transparent;
}
#navigation ul li.orthobase-orthoflor a.active,
#navigation ul li.orthobase-orthoflor a:hover {
  background-image: url(../images/navigation-orthobase-orthoflor.png);
  background-position: 0 30px;
}

#navigation ul li a.active span.product-color,
#navigation ul li a:hover span.product-color {
  background-image: url(../images/navi-active.png);
  background-position: center center;
  background-repeat: no-repeat;
}


/* - - - - - - - - - - - - - - - - - - - *\
| seitespezifische Dinge
\* - - - - - - - - - - - - - - - - - - - */

#index #branding {
  background: url(../images/header/startseite.jpg) no-repeat;
}

#index caption, #index h3 {
  color: #2b6d08;
}

#index #product-head {
  border-bottom: 6px solid #2b6d08;
}

#index #product-head h5 {
  padding-top: 20px;
}

#index #product-head p {
  margin-bottom: 0;
  padding-top: 10px;
  width: 300px;
}

#kani #branding {
  background: url(../images/header/kani.jpg) no-repeat;
}

#kani caption, #kani h3 {
  color: #9c2016;
}

#kani #product-head {
  border-bottom: 6px solid #9c2016;
}

#orthobase-c-plus #branding {
  background: url(../images/header/orthobase-c-plus.jpg) no-repeat;
}

#orthobase-c-plus caption, #orthobase-c-plus h3 {
  color: #edcd00;
}

#orthobase-c-plus #product-head {
  border-bottom: 6px solid #edcd00;
}

#orthobase-multi-plus-magnesium #branding {
  background: url(../images/header/orthobase-multi-plus-magnesium.jpg) no-repeat;
}

#orthobase-multi-plus-magnesium caption, #orthobase-multi-plus-magnesium h3 {
  color: #00599c;
}

#orthobase-multi-plus-magnesium #product-head {
  border-bottom: 6px solid #00599c;
}

#orthobase-b-comp #branding {
  background: url(../images/header/orthobase-b-comp.jpg) no-repeat;
}

#orthobase-b-comp caption, #orthobase-b-comp h3 {
  color: #d5a601;
}

#orthobase-b-comp #product-head {
  border-bottom: 6px solid #d5a601;
}

#q-10-peptid #branding {
  background: url(../images/header/q-10-peptid.jpg) no-repeat;
}

#q-10-peptid caption, #q-10-peptid h3 {
  color: #6d9a26;
}

#q-10-peptid #product-head {
  border-bottom: 6px solid #6d9a26;
}

#q-10-peptid-plus-30 #branding {
  background: url(../images/header/q-10-peptid-plus-30.jpg) no-repeat;
}

#q-10-peptid-plus-30 caption, #q-10-peptid-plus-30 h3 {
  color: #6d9a26;
}

#q-10-peptid-plus-30 #product-head {
  border-bottom: 6px solid #6d9a26;
}

#carosezin #branding {
  background: url(../images/header/carosezin.jpg) no-repeat;
}

#carosezin caption, #carosezin h3 {
  color: #008b5e;
}

#carosezin #product-head {
  border-bottom: 6px solid #008b5e;
}

#orthobase-zym #branding {
  background: url(../images/header/orthobase-zym.jpg) no-repeat;
}

#orthobase-zym caption, #orthobase-zym h3 {
  color: #008877;
}

#orthobase-zym #product-head {
  border-bottom: 6px solid #008877;
}

#satyrin-basentrank #branding {
  background: url(../images/header/satyrin-basentrank.jpg) no-repeat;
}

#satyrin-basentrank caption, #satyrin-basentrank h3 {
  color: #b6064e;
}

#satyrin-basentrank #product-head {
  border-bottom: 6px solid #b6064e;
}

#orthobase-carnitin-extra #branding {
  background: url(../images/header/orthobase-carnitin-extra.jpg) no-repeat;
}

#orthobase-carnitin-extra caption, #orthobase-carnitin-extra h3 {
  color: #c61871;
}

#orthobase-carnitin-extra #product-head {
  border-bottom: 6px solid #c61871;
}

#orthobase-san #branding {
  background: url(../images/header/orthobase-san.jpg) no-repeat;
}

#orthobase-san caption, #orthobase-san h3 {
  color: #008bcf;
}

#orthobase-san #product-head {
  border-bottom: 6px solid #008bcf;
}

#orthobase-flavin #branding {
  background: url(../images/header/orthobase-flavin.jpg) no-repeat;
}

#orthobase-flavin caption, #orthobase-flavin h3 {
  color: #9c116d;
}

#orthobase-flavin #product-head {
  border-bottom: 6px solid #9c116d;
}

#zellsalz #branding {
  background: url(../images/header/zellsalz.jpg) no-repeat;
}

#zellsalz caption, #zellsalz h3 {
  color: #008051;
}

#zellsalz #product-head {
  border-bottom: 6px solid #008051;
}

#orthobase-glutathion-plus #branding {
  background: url(../images/header/orthobase-glutathion-plus.jpg) no-repeat;
}

#orthobase-glutathion-plus caption, #orthobase-glutathion-plus h3 {
  color: #008051;
}

#orthobase-glutathion-plus #product-head {
  border-bottom: 6px solid #008051;
}

#orthobase-orthoflor #branding {
  background: url(../images/header/orthobase-orthoflor.jpg) no-repeat;
}

#orthobase-orthoflor caption, #orthobase-orthoflor h3 {
  color: #96ad16;
}

#orthobase-orthoflor #product-head {
  border-bottom: 6px solid #96ad16;
}


/* - - - - - - - - - - - - - - - - - - - *\
| Formulare
\* - - - - - - - - - - - - - - - - - - - */
/* - - -    formulare    - - - */
input, textarea {
  border: 1px solid #6B6C6E;
}

form {
  margin-left: 10px;
}

form p {
  margin: 0;
}

form .col {
  float: left;
  width: 450px;
}

form .varchar,
form .textbox,
form .file,
form .checkbox,
form .submit {
  
  clear: both;
  float: none;
  margin: 3px 0;
}

form .checkbox {
  margin: 5px 0;
}

form .submit {
  margin-left: 180px;
}

form .label {
  clear: left;
  display: block;
  float: left;
  padding-top: 3px;
  width: 180px;
  margin: 3px 0;
}

form .input {
  display: block;
  float: left;
  margin: 3px 0;
}

form .checkbox .input {
  display: block;
  float: left;
  margin-left: 60px;
}
html>body form .checkbox .input {
  margin-left: 180px;
}

form .checkbox .label {
  clear: none;
}


.error { color: #d00; font-weight: bold; }
.success {color: #090; font-weight: bold; }

.fifty {
  width: 135px;
}
.seventyfive {
  width: 203px;
}
.twentyfive {
  width: 67px;
}
.full {
  width: 275px;
}
input.submit {
  margin-top: 30px;
  width: 75px;
}

.zeile {
  width: 300px;
}

.checkbox {
  border: none;
}