@charset "utf-8"; /* Kodierung der CSS-Datei in UNICODE */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Reset: Setzt alle Abstaende, Raender Einstellungen auf einen gewuenschten Urzustand  */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

body {
line-height: 1;
color: #fff;
background: #000 url(../images/bg_body.gif);
}

ol, ul {
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}

caption, th, td {
text-align: left;
font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}

blockquote, q {
quotes: "" "";
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Helper: Hilfskonstruktionen */
/* >>> Invisibility */
.invisible {
position: absolute; /* VORSICHT bei Hintergrundbildern im IE koennte es passieren, dass diese nicht angezeigt werden. hasLayout und height: 1% */
left: -9999px;
}

/* >>> Clearfix */
.clearfix:after {
content: ".";
visibility: hidden;
display: block; 
clear: both; 
height: 0;
}

.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* >>> Clear, unsichtbares Element zum Aufheben von Floats */
.clear {
visibility: hidden;
clear: both;
height: 0;
line-height: 0;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Angaben fuer alle Hauptbereiche */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
}

/* Links */
a {
color: #fff;
text-decoration: none;
}

a:link         { color: #fff; }
a:visited  { color: #fff; }
a:hover      { color: #fff; }
a:focus      { color: #fff; }
a:active    { color: #fff; }

/* Umschliessender Rahmen */
#site {
width: 95em;
margin: auto;
margin-top: 30px;
padding-bottom: 10px;
background: #000;
/*min-height: 62.2em;*/
}

/* IE6 */
* html #site {
width: 95.5em;
/*height: 62.65em;*/
}

/* IE7 */
*+ html #site {
width: 95.5em;
/*height: 62.65em;*/
}

/* Seitenkopf */
#header {
min-height: 7.4em;
background: url(../images/bg_header.jpg) no-repeat 0 0;
}

* html #header {
height: 7.4em;
}

* + html #header {
height: 7.4em;
}

/* Logo */
#header h1.logo {
display: block;
margin: 0 0 0 10px;
position: relative;
color: #fff;
}

.logo a,
.logo span.active {
display: block;
height: 53px;
width: 306px;
background: url(../images/lg_pipercross.gif) no-repeat 0 2px;
position: absolute;
}

/* Horizontale Navigation */
#topnavigation {
background: #333 url(../images/bg_topnavigation.jpg) repeat-x;
min-height: 2.6em;
}

* html #topnavigation {
height: 2.6em;
}

* + html #topnavigation {
height: 2.6em;
}

#topnavigation ul {
margin-left: 314px;
}

#topnavigation li {
display: block;
float: left;
background: url(../images/border_topnavigation_left.gif) no-repeat 0 0;
padding: 0;
margin: 0;
}

#topnavigation li.current {
background: #333 url(../images/border_topnavigation_left.gif) no-repeat 0 0;
}

#topnavigation li a {
display: block;
font-size: 1.2em;
line-height: 2.166em;
text-transform: uppercase;
margin: 0 0 0 2px;
padding: 0 8px 0 10px;
}

#topnavigation li a:hover {
background: #c0c0c0;
}

#topnavigation li a:focus {
background: #c0c0c0;
}

#topnavigation li span.last {
display: block;
background: url(../images/border_topnavigation_right.gif) no-repeat right 0;
padding-right: 2px;
}

/* Inhaltsbereich */
#content {
/*min-height: 452px;*/
margin: 20px;
}

* html #content {
/*height: 452px;*/
}

* + html #content {
/*height: 452px;*/
}

.box .body p {
font-size: 1.1em;
line-height: 1.545em;
margin: 0 0 0.636em 0;
}

.box .body strong {
font-size: 1.2em;
font-weight: bold;
line-height: 1em;
}

.box .body a {
color: #000;
}

/* Fusszeile */
#footer {
clear: both;
border: 1px solid #fff;
padding: 5px;
margin: 0;
font-size: 1.1em;
}

/* Links in Fusszeile */
#footer span {
float: left;
margin: 0 30px 0 0;
margin-left: 262px;
}

#footer a:hover {
text-decoration: underline;
}

#footer a:focus {
text-decoration: underline;
}

#footer li {
display: inline;
padding: 0;
margin: 0 0 0 30px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Boxen mit runden Ecken */
/* Box, allgemeine Werte */
.box {
position: relative;
margin: 0;
padding: 0;
color: #000;
}

.box .head {
margin: 0;
padding: 0;
}

.box .body {
margin: 0;
padding: 10px 10px;
}

.box-white .body {
margin: 0;
padding: 10px 20px;
background: #fff;
}

/* Ecken, allgemeine Werte */
.top-left,
.top-right,
.bottom-left,
.bottom-right {
display: block;
position: relative;
z-index: 2;
width: 3px;
height: 3px;
line-height: 0;
font-size: 0;
background-repeat: no-repeat;
}

.box .top-left,
.box .top-right,
.box .bottom-left,
.box .bottom-right {
width: 3px;
height: 3px;
}

.top-left,
.bottom-left {
float: left;
}

.top-right,
.bottom-right {
float: right;
}

.top-left,
.top-right {
margin-bottom: -3px
}

.top-left {
margin-right: -3px;
}

.bottom-left {
margin: -3px -3px 0 0;
}

.bottom-right {
margin-top: -3px;
}

/* .top-left */
.top-left {
top: 0;
left: 0;
}

/*
.box .top-left {
top: -1px;
left: -1px;
}
*/

/* .top-right */
.top-right {
top: 0;
right: 0;
background-position: right top;
}

/*
.box .top-right {
top: -1px;
right: -1px;
background-position: right top !important;
}
*/

/* .bottom-left */
.bottom-left {
bottom: 0;
left: 0;
background-position: left bottom;
}

/*
.box .bottom-left, {
bottom: -1px;
left: -1px;
}
*/

/* .bottom-right */
.bottom-right {
bottom: 0;
right: 0;
background-position: right bottom;
}

/*
.box .bottom-right {
bottom: -1px;
right: -1px;
background-position: right bottom;
}
*/

/* Farbige Boxen */
.label-green {
background: #3ca52b url(../images/bg_label_green.jpg) repeat-x 0 0;
}

.label-blue {
background: #00538a url(../images/bg_label_blue.jpg) repeat-x 0 0;
}

.label-darkred {
background: #8d1417 url(../images/bg_label_darkred.jpg) repeat-x 0 0;
}

.box-green .top-left,
.box-green .top-right,
.box-green .bottom-left,
.box-green .bottom-right {
background-image: url(../images/box_round_green.gif);
}

.box-blue .top-left,
.box-blue .top-right,
.box-blue .bottom-left,
.box-blue .bottom-right {
background-image: url(../images/box_round_blue.gif);
}

.box-darkred .top-left,
.box-darkred .top-right,
.box-darkred .bottom-left,
.box-darkred .bottom-right {
background-image: url(../images/box_round_darkred.gif);
}

.box-white .top-left,
.box-white .top-right,
.box-white .bottom-left,
.box-white .bottom-right {
background-image: url(../images/box_round_white.gif);
}

.box-white-frame .top-left,
.box-white-frame .top-right,
.box-white-frame .bottom-left,
.box-white-frame .bottom-right {
background-image: url(../images/box_round_white_frame.gif);
}

/* Boxenbreiten */
.w445 {
width: 445px;
}

/* Rahmen-Box fuer Startbilder */
.img-border {
border: 1px solid #fff;
border-top: none;
}

/* Header Onlineshop */
.header-onlineshop {
height: 43px;
background: url(../images/bg_label_onlineshop.jpg) repeat-x 0 0;
padding: 15px 0 0 20px;
}

/* Ueberschriften fuer Boxen */
.box h2 {
font-size: 1.8em;
font-weight: bold;
line-height: 1.5em;
margin: 0 auto;
}

#motorcycle h2 {
width: 117px;
}

#carpower h2 {
width: 99px;
}

#kontakt h2 {
width: 77px;
}

#newsletter h2 {
width: 102px;
}

#impressum h2 {
width: 103px;
}

.box h4 {
font-size: 1.5em;
font-weight: bold;
line-height: 1.5em;
margin-bottom: 10px;
}

#motorcycle h4 {
color: #3ca52b;
}

#carpower h4 {
color: #00538a;
}

h4 {
color: #000;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Angaben fuer spezielle Ausrichtungen */
.left {
float: left;
}

.right {
float: right;
}

.body img {
margin: 20px 0 10px 10px;
width: 120px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Angaben fuer Formular */
.formular label,
.formular input,
.formular textarea {
font-size: 1.2em;
}

.formular textarea {
font-family: Arial, Helvetica, sans-serif;
}

.formular table {
width: 100%;
}

.formular td {
padding: 5px;
vertical-align: top;
}

.formular td.last {
border-top: 1px solid #931919;
border-bottom: 1px solid #931919;
text-align: center;
}

.formular .error {
font-size: 1.2em;
color: #931919;
font-weight: bold;
}