/* o-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-o */
/* | CSS fuer Haendler : Zweirad Dietrich                              | */
/* | Haendler-ID       : 204717                                        | */
/* + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + */
/* | History:                                                          | */
/* |                                                                   | */
/* | (BK) 2007 Mar. 26 = Kommentare zu den CSS-Selektoren erweitert    | */
/* | (BK) 2007 Jan. 04 = erweitert um CMS-Eintrageklassen              | */
/* | (BK) 2006 Dez. 12 = erweitert um 300kmh Gebrauchtwagenklassen     | */
/* | (BK) 2006 Dez. 11 = erste finale Version                          | */
/* o-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-o */

/* o-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-o */
/* | Hilfe und Erklaerungen zu den CSS-Klassen:                        | */
/* + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + */
/* | Die CSS-Klassen sind nach folgendem System benannt:               | */
/* |                                                                   | */
/* | <modulname>_<ebene>_<bezeichnung>                                 | */
/* |                                                                   | */
/* | wobei:                                                            | */
/* |                                                                   | */
/* |  <modulname>    =   Name des Moduls wo die Klasse verwendet wird  | */
/* |  <ebene>        =   Abkuerzung der Ebene wo die Klasse auftritt   | */
/* |  <bezeichnung   =   Beschreibt was formatiert wird                | */
/* |                                                                   | */
/* | Beispiel:                                                         | */
/* |                                                                   | */
/* |  produkte_w_hinweis                                               | */
/* |                                                                   | */
/* |  Wird im Modul Produkte und dort bei der Warenkorbansicht (w)     | */
/* |  fuer den Hinweistext genutzt.                                    | */
/* |                                                                   | */
/* |                                                                   | */
/* | Um die fuer Sie relevanten Klassen zu finden, gehen Sie so vor:   | */
/* |                                                                   | */
/* | 1. Ermitteln Sie das Modul und das Design welches bei Ihrer Seite | */
/* |    eingebaut ist. Das Design erkennen sie an der Dateiendung.     | */
/* |    Die Datei 'sonderangebote.asp' steht fuer das erste Design und | */
/* |    der Dateiname 'sonderangebote2.asp' steht fuer das zweite.     | */
/* |                                                                   | */
/* | 2. Suchen Sie in der Datei nach 'class' (ohne Apostrophe!) um     | */
/* |    alle relevanten Klassen fuer die Formatierung zu finden.       | */
/* |                                                                   | */
/* | HINWEIS:                                                          | */
/* |                                                                   | */
/* | Es kommt vor, das eine Klasse auf mehreren Seiten verwendet wird. | */
/* | Beispiel: rent_h_d_tabhead. Hier ist eine Ueberschrift in einer   | */
/* | Tabelle gemeint, welche in der Hauptansicht und der Detailansicht | */
/* | verwendet wird.                                                   | */
/* |                                                                   | */
/* | Informationen ueber die Formatierung von CSS Klassen finden Sie   | */
/* | unter: http://de.selfhtml.org/navigation/syntax.htm#css           | */
/* o-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-o */

/* Alle Angaben dieser Datei beziehen sich auf den Monitor/Bildschirm. */
@media screen
{

/* --- Grundlage der ganzen Site --- */
/* Mit diesen Klassen koennen die Hintergrundeigenschaften der einzelnen Module bestimmt werden. */

body, body.agb_h_body, body.news_h_body, body.news_x_body, body.team_h_body, body.versicher_h_body, body.finanz_h_body, body.links_h_body, body.tipps_h_body, body.tipps_d_body, body.galerie_h_body, body.galerie_d_body, body.ring_h_body, body.veranst_h_body, body.veranst_d_body, body.gebraucht_h_body, body.gebraucht_d_body, body.rent_h_body, body.rent_d_body, body.produkte_h_body, body.produkte_d_body, body.produkte_w_body, body.kontakt_h_body, body.abverkauf_h_body, body.team_d_body, body.mkatalog_h_body, body.jobs_h_body, body.jobs_d_body, body.haendler_h_body, body.navigation_h_body, body.gebrwagen_h_body, body.gebrwagen_d_body, body.cms_h_body, body.cms_d_body
{
  background-color: #cc3300;
  background-image: none;
  background-repeat: repeat;
  background-attachment: fixed;
  margin-top:  10px;
  margin-left: 10px;
}

/* --- Linie/Strich --- */
/* Mit diesen Klassen koennen die so genannten horizontal ruler (Linien/Striche) in den einzelnen Modulen formatiert werden. */

hr, hr.produkte_h_linie, hr.gebraucht_d_linie, hr.ring_h_linie, hr.galerie_h_d_linie, hr.tipps_h_d_linie, hr.kontakt_h_linie, hr.agb_h_linie, hr.versicher_h_linie, hr.news_h_linie, hr.team_h_linie, hr.abverkauf_h_linie, hr.mkatalog_h_linie, hr.jobs_h_linie, hr.gebrwagen_h_linie, hr.rent_d_linie, hr.cms_h_linie
{
  color: #ffffff;
}

/* --- Textausgabe --- */
/* Mit diesen Klassen kann der Text auf den einzelnen Modulseiten formatiert werden. */

body, span, p, h1, h2, h3, h4, h5, h6, a, input, textarea, select, ol, ul, span.site_text, span.news_h_text, span.news_x_text, span.gebraucht_d_text, span.veranst_h_d_text, span.ring_h_text, span.finanz_h_text, span.versicher_h_text, span.agb_h_text, span.produkte_d_ogtext, span.produkte_w_hinweis, span.rent_h_d_text, span.rent_d_text, span.gebraucht_h_baujahr, span.galerie_h_text, span.tipps_h_d_text, span.links_h_text, span.kontakt_h_text, span.team_h_daten, span.kontakt_h_separator,
span.mkatalog_h_ogtext, /*Motorradkatalog*/ .default_text, .kleinueber /*-Motorradkatalog*/, span.mkatalog_h_biketypename, span.mkatalog_h_tabhead, span.mkatalog_h_data, span.jobs_h_d_jobtext, span.haendler_h_tabtext, span.mkatalog_h_preis
{
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  font-size: 13px;
  color: #ffffff;
}

/* Diese Klassen gibt es zur Formatierung von hervogehobenen Texten bzw. Inhalten auf den Modulseiten. */

span.site_htext, em, span.site_tabhead, span.gebraucht_h_preis, span.produkte_w_summe, span.produkte_h_tcombo, span.gebraucht_h_tcombo, span.gebraucht_d_htext, span.veranst_h_d_htext, span.ring_h_htext, span.finanz_h_htext, span.versicher_h_htext, span.kontakt_h_f_fieldname, span.team_h_name, span.team_h_position, span.agb_h_htext, span.tipps_h_d_name, span.news_h_datum, span.news_x_datum, span.team_h_htext, span.kontakt_h_htext, span.galerie_h_htext, span.rent_h_d_htext, span.produkte_h_bread, span.abverkauf_h_ersparnis, /*Motorradkatalog*/ .kleinueber /*-Motorradkatalog*/, span.mkatalog_h_biketypename, span.jobs_h_d_jobname, span.haendler_h_tabheadtext, span.mkatalog_h_aktionpreis
{
  font-weight: bold;
}

/* Mit diesen Klassen koennen Preisangaben bei der Produkte-, Abverkaufs- und Motorradkatalogsdetailansicht formatiert werden. */

span.produkte_h_preis, span.abverkauf_h_preis, span.mkatalog_h_preisdetail, span.mkatalog_h_aktionpreisdetail, span.mkatalog_h_probefahrt
{
  font-weight: bold;
  font-size: 16px;
}

/* Mit diesen Klassen werden die Namen der Motorraeder bei der Produkte- und Gebrauchtedetailansicht formatiert. */

span.produkte_d_name, span.gebraucht_d_name
{
  font-size: 32px;
}

/* Diese Klasse dient zur Formatierung des Textes der Warenkorbtabelle. */

span.produkte_w_text
{
  color: #ff5900;
}


/* --- Ueberschriften --- */
/* Alle Ueberschriften der ersten Ordnung werden mit folgenden Klassen formatiert. */

h1.site_head_o1, h1.news_h_head, h1.produkte_h_d_head, h1.produkte_w_head, h1.rent_h_d_a_head, h1.gebraucht_h_d_head, h1.veranst_h_d_head, h1.ring_h_head, h1.galerie_h_d_head, h1.tipps_h_d_head, h1.links_h_head, h1.finanz_h_head, h1.versicher_h_head, h1.kontakt_h_head, h1.team_h_head, h1.agb_h_www, h1.abverkauf_h_head, h1.mkatalog_h_head, h1.jobs_h_d_head, h1.haendler_h_head, h1.navigation_h_head, h1.gebrwagen_h_head, h1.gebrwagen_d_head, h1.cms_h_head, h1.cms_d_head
{
  font-weight: bold;
  font-size: 18px;
}

/* Alle Ueberschriften der zweiten Ordnung werden mit folgenden Klassen formatiert. Natuerlich koennen auch andere Klassen aehnlich formatiert werden. */

h2.site_head_o2, h2.agb_h_header, h2.gebraucht_d_name, h2.finanz_h_sumpreis, h2.kontakt_h_head2, h2.produkte_h_lztxt, h2.mkatalog_h_bikename, h2.mkatalog_h_markename, h2.galerie_h_selectedname, h2.gebrwagen_d_name, span.news_x_titel, span.team_d_name, span.cms_d_name
{
  font-weight: bold;
  font-size: 16px;
}

/* Wenn einfache Ueberschriften zB bei dem Newsinhalt keine Formatierung aufweisen, werden diese mit folgenden Klassen formatiert. (h1 - h6) */

h1
{
  font-weight: bold;
  font-size: 18px;
}

h2
{
  font-weight: bold;
  font-size: 16px;
}

h3
{
  font-weight: bold;
  font-size: 15px;
}

h4
{
  font-weight: bold;
  font-size: 13px;
}

h5
{
  font-weight: bold;
  font-size: 11px;
}

h6
{
  font-weight: bold;
  font-size: 9px;
}


/* --- Bilder --- */
/* Bilder die mit einem Rahmen angezeigt werden sollen sind hier zusammengefasst. Hierbei handelt es sich meist um die kleinen Bilder bei den Listen. */

img.site_bild_rahmen, img.news_h_kbild, img.produkte_h_w_bild, img.produkte_h_suchebild, img.rent_h_bild, img.gebraucht_h_suchebild, img.gebraucht_h_bild, img.galerie_h_d_bild, img.veranst_h_bild, img.abverkauf_h_bild, img.team_h_bild, img.gebrwagen_h_bild, img.cms_h_bild
{
  border-style: outset;
  border-width: 2px;
  border-color: #ff5900;
}

/* Bilder die keinen Rahmen haben sollen findet man hier. Das sind ueberwiegend die Bilder der Detailansichten. */

img.site_bild, img, img.news_x_gbild, img.produkte_d_bild, img.rent_d_bild, img.gebraucht_d_bild, img.veranst_d_bild, img.team_d_bildbig, img.mkatalog_h_markeimage, img.mkatalog_h_markeimage_selected, img.gebrwagen_d_bild, img.cms_d_bild
{
  border-style: none;
  border-width: 10px;
  border-color: #FF0000;
}


/* --- Links --- */
/* Prinzipiell sollen alle Links gleich und wie folgt formatiert werden. */

a
{
  text-decoration: underline;
  color: #0000ff;
}

/* Formatierung von Links die bereits besucht / angeklickt wurden. */

a:visited
{
  color: #404080;
}

/* Formatierung von Links ueber die gerade die Maus bewegt wird bzw. die gerade mit der Tastatur markiert wurden. */

a:hover, a:focus
{
  color: #c0c0ff;
}

/* Formatierung von Links die gerade angewaehlt werden. */

a:active
{
  color: #f0f0ff;
}

/* Formatierung der Links erster Ordnung ueberall wo es Links verschiedener Hierarchien gibt. Hierzu zaehlen zB der Produktkatalog, gewisse Galerieansichten usw. */

a.site_link_o1, a.produkte_h_link1, a.kontakt_h_oe_f_navlink, a.galerie_h_namelink
{
  font-size: 16px;
  font-weight: bold;
}

/* Zweite Hierarchieebene. Siehe vorheriger Kommentar. */

a.site_link_o2, a.news_h_titel, a.produkte_h_link2, a.links_h_link, a.kontakt_h_navlink, a.mkatalog_h_markenamelink, a.navigation_h_links, a.cms_h_namelink
{
  font-size: 15px;
}

/* Dritte Hierarchieebene. Siehe vorheriger Kommentar. */

a.site_link_o3, a.produkte_h_plink, a.produkte_d_anflink, a.rent_h_detlink, a.rent_d_a_zrcklink, a.gebraucht_h_namelink, a.gebraucht_h_nsuchelink, a.gebraucht_d_fvlink, a.gebraucht_d_extralinks, a.veranst_h_detlink, a.galerie_d_bildlink, a.tipps_h_link, a.kontakt_h_link, a.abverkauf_h_plink, a.team_h_namelink, a.mkatalog_h_bikelink, a.mkatalog_h_bikename, a.jobs_h_mehrlink, a.haendler_h_link, a.gebrwagen_h_namelink, a.news_h_smalltextlink
{
  font-size: 13px;
}


/* --- Buttons eines Formulars --- */
/* Prinzipiell werden alle Buttons auf den Modulseiten gleich formatiert. Folgende Klassen sind dazu notwendig. */

input.site_button, input.site_back_button, input.versicher_h_button, input.galerie_d_button, input.produkte_d_pabutton, input.produkte_d_w_button, input.rent_h_d_a_anfbutton, input.galerie_d_button, input.kontakt_h_button, input.produkte_d_extrabuttons, input.mkatalog_h_extrabuttons, input.jobs_d_backbutton
{
  background-color: #ff4000;
  border-style: outset;
  border-width: 2px;
  border-color: #ff4500;
  width: 200px;
}

/* Der + Button fuer das Anwaehlen einer Versicherungsalternative bei der Popup-Funktion ist sehr schmal. */

input.versicher_h_button, input.galerie_d_button
{
  width: 22px;
}


/* --- Textfelder eines Formulars --- */
/* Alle Textfelder, Textareas und List- bzw. Comboboxen sollen gleich aussehen und werden daher mit folgenden Klassen formatiert. */

input.site_textbox, input.site_textbox_klein, textarea, select, input.produkte_w_txtbox, input.rent_a_txtbox, input.kontakt_h_txtbox, select.produkte_h_combo, select.gebraucht_h_combo, textarea.kontakt_h_txtarea
{
  background-color: #ff4c00;
  border-style: inset;
  border-width: 2px;
  border-color: #ff4500;
  width: 320px;
}

/* Die Combobox bei der Gebrauchtmotorrads-Suchfunktion ist etwas schmaler formatiert. */

select.gebraucht_h_combo
{
  width: 180px;
}

/* Einige Textboxen sind schmaler und koennen mit folgender Klasse formatiert werden. */

input.site_textbox_klein
{
  width: 80px;
}

/* Mehrzeilige Textfelder (Textareas) sollen eine fixe Hoehe erhalten. */

textarea
{
  height: 118px;
}


/* --- Dropdown-Liste/Combobox eines Formulars --- */
/* Alle Comboboxen und Listboxen haben eine bestimmte Breite. Diese kann mit folgendem CSS-Selektor bestimmt werden. */

select
{
  width: 160px;
}


/* --- Tabellen --- */
/* Die Grundeinstellungen einer Tabelle und die der blinden Tabellen werden hier festgelegt. */

table, table.site_btab, table.techdattable, table.mkatalog_h_listtab
{
  border-collapse: collapse;
  background-color: transparent;
  border-style: none;
  border-width: 5px;
  border-color: #F0F0F0;
  margin: 2px;
  padding: 2px;
}


/* Tabellen die einen Rand aufweisen sollen werden hier formatiert. (fuer ohne Aussenrand, border-width: 0px; angeben) */

table.site_tab, table.site_tab tr td
{
  border-collapse: collapse;
  background-color: #f53d00;
  border-style: outset;
  border-width: 2px;
  border-color: #ff5900;
  margin: 2px;
  padding: 2px;
}

/* Tabellenzellen einer Tabelle mit Rand. Mit diesem Selektor kann man festlegen, wie das Gitternetz dieser Tabelle aussehen soll. */

table.site_tab tr td
{
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}

table.site_suchtab
{
  border-collapse: collapse;
  background-color: transparent;
  border-style: none;
  border-width: 0px;
  border-color: #F0F0F0;
  margin: 3px;
  padding: 2px;
}


/* --- Tabellenzellen einer Tabelle --- */
/* Mit diesen Klassen koennen die Zellen der Tabellen unterschiedlich formatiert werden. */

table tr td.site_tabhead, td.rent_h_d_tabhead, td.veranst_h_tabhead, td.ring_h_tabhead, td.news_x_tabhead, td.team_h_nametabdc, td.finanz_h_htabdc, td.team_d_nametabc, td.haendler_h_tabhead
{
  background-color: #ff4c00;
}


/* Tabellenzeilen einer Tabelle */
/* Mit den folgenden zwei Selektoren wird sichergestellt, dass gerade und ungerade Zeilen einer Tabelle unterschiedlich formatiert werden. */

tr.produkte_w_tabrgerade, tr.mkatalog_h_tabrbiketype, /*Motorradkatalog*/ .grau, .techdatgrey /*-Motorradkatalog*/, tr.haendler_h_tabrowgerade
{
  background-color: #ff4200;
  height: 20px;
}

tr.produkte_w_tabrungerade, tr.mkatalog_h_tabrheading, /*Motorradkatalog*/ .techdat /*-Motorradkatalog*/, tr.haendler_h_tabrowungerade
{
  background-color: #eb3b00;
  height: 20px;
}


/* --- weitere allgemeine Angaben fuer HTML-Eingaben --- */
/* Wenn einfache Aufzaehlungen zB bei dem Newsinhalt keine Formatierung aufweisen, werden diese mit folgenden Selektoren formatiert. (ol und ul) */

ol
{
  list-style-type: decimal;
  list-style-image: none;
  list-style-position: inside;
}

ul
{
  list-style-type: disc;
  list-style-image: none;
  list-style-position: inside;
}


}