/**
 * Stylesheet fuer Deutsche Fliese
 *
 * seitenblick interaktive medien gmbh
 * Koenigstrasse 16, 70173 Stuttgart
 * fon: 0711/8599818-0
 * fax: 0711/8599818-40
 * e-Mail: info@seitenblick.de
 */


/******************************************************************************/
/*--- Allgemeine Definitionen ------------------------------------------------*/
/******************************************************************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  color: #333;
  font-size: 1em;
  font-family: Arial, Verdana, Sans-Serif;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: baseline;
}

html {
  overflow-y: scroll;
}

body {
  background: #000;
  line-height: 1.5;
  font-size: 100.01%;
}

a img {
  border: none;
}

a:hover {
  text-decoration: none;
}

a {
  color: #a80d2d;
}

p.download a {
  color: #000;
}

img {
  border: none;
}

hr {
  border: 0;
  border-top: 1px solid #999;
  height: 0px;
}

ul, ol {
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
}

.y {
  clear: both;
  font-size: 0.001em;
}

.c {
  clear: both;
}

.x {
  display: none;
}

.coloured {
  color: #a80d2d;
}

.spacer30 {
  float: left;
  height: 30px;
  width: 100%;
}


h2 {
  color: #a80d2d;
  font-size: 1.0625em;
  font-weight: bold;
}

.align_right {
  text-align: right;
}

.layout {
  /* wird beim IE6 für relative Elemente benötigt */
	height: 0;
	he\ight: auto;
	zoom: 1;
}

.fl {
  float: left;
}

.fr {
  float: right;
}


/******************************************************************************/
/*--- Layout -----------------------------------------------------------------*/
/******************************************************************************/

#wrapper {
  background: #0f0f0f;
  border: 1px solid #292929;
  margin: 20px auto 0 auto;
  padding-bottom: 23px;
  width: 926px;
}

#header {
  display: inline;
  float: left;
  font-size: 0.6875em;
  margin-left: 23px;
  width: 881px;
}

#menu {
  float: left;
  width: 100%;
}

#submenu {
  background-color: #a80d2d;
  float: left;
  height: 20px;
  margin: 3px 0 0 0;
  width: 100%;
}

#main {
  border-right: 5px solid #0f0f0f;
  clear: both;
  float: left;
  width: 658px;
}

#arrangement, .arrangement {
  background: none #222222;
}

#arrangement #content_expanded .img_box img,
.arrangement #content_expanded .img_box img {
  border-bottom: 6px solid #222222;
  border-left: 5px solid #222222;
  float:left;
}

#arrangement #content_expanded p,
.arrangement #jumplist,
#main.arrangement h1.headline {
  color: #FFFFFF;
}

 
#keyvisual {
  float: left;
  width: 658px;
}

#keyvisual .left {
  float: left;
  width: 219px;
}

#keyvisual .left img {
  float: left;
  border-bottom: 4px solid #0f0f0f;
}

#keyvisual .right {
  border-bottom: 4px solid #0f0f0f;
  border-left: 4px solid #0f0f0f;
  float: left;
  height: 354px;
}

.left_box {
  border-right: 5px solid #000;
  border-bottom: 4px solid #000;
  z-index: 1;
  position:relative;  
}

#box_caption {
  margin-top: 123px;
  position:absolute;
  z-index: 2;
}

.right_box {
  border-bottom: 4px solid #000;
}

#three_boxes .right {
  border-right: 0;
}


#content_wrapper {
  background: url("../i/bg_content.jpg");
  margin: 46px 23px 0 23px;
  position: relative;
}

#content {
  color: #000;
  float: left;
  padding: 25px 15px 10px 15px;
  width:  628px;
}

/* Inhaltsblock in der Content-Spalte */
#content .block {
  float: left;
  margin-bottom: 20px;
}

#content .block_left{
  float: left;
  text-align: center;
  width: 220px;
}

#content .block_center,
#content .block_center_home {
  margin-left: 230px;
}

.content_navi {
  margin-bottom: -5px;
  font-size: 0.6250em;  
}

.content_navi p,
.content_navi a {
  color: #999;
}

.content_navi hr {
  border: 0;
  border-top: 1px solid #999;
  height: 0px;
  margin-top:-8px;
}

#content_expanded {
  margin-left: 110px;
  padding: 20px 5px 30px 6px;
  width: 520px;
}

#content_expanded .img_box {
  margin-left: -5px;
  margin-top: 20px;
}
            
#content_expanded .img_box img {
  border-left: 5px solid #fff;
  border-bottom: 6px solid #fff;
  float:left;
}

/* Landkarte bei der Händlersuche */
#map {
  float: left;
  width: 520px;
  height: 395px;
  background: #fff;
}

/* Artikel Infobox */
#infobox {
  font-size: 0.6875em;
  margin: 20px 0 20px 0;
  padding: 15px 10px 15px 30px;
  background: #ccc url("../i/bg_infobox.gif") no-repeat right bottom; 
}

#infobox .ul_title {
  font-weight: bold;
  text-transform: uppercase;
}

#infobox ul {
  list-style-type:disc;
  list-style-position: outside;
  margin-left: 20px; 
}

#infobox li {
  color: #a80d2d;
}

#infobox span {
  color: #000;
}

/* Formatierung der Bildunterschrift bei Lightbox Popups */

.lightbox_title {
  margin-right: 100px;
}

/* Min-Height Angaben für Seitentypen */

.min_height {
  min-height: 650px;
}

.min_height_keyvisual {
  min-height: 300px;
}

.min_height_boxes {
  min-height: 471px;
}

/* Teaserbox auf der rechten Seite */

#right {
  float: left;
  margin-bottom: 100px;
  width: 217px;
}

#right .block {
  background: #fff;
  border-bottom: 4px solid #0f0f0f;
  float: left;
  width: 217px;
}

#right .block.lottery {
  height: 354px;
}

#block_last {
  bottom: 1px;
  clear: both;
  float: right;
  height: 67px;
  padding: 3px;
  padding-bottom: 0px;
  position: absolute;
  right: 1px;
  text-align: left;
  width: 209px;
}

#block_last p {
  font-size: 0.6250em;
}

#block_login {
  background: url("../i/bg_login.jpg") no-repeat;
  background-position: 1px 1px;
  border-bottom: 4px solid #0f0f0f;
  float: left;
  height: 353px;
  width: 217px;
}

#block_login h3 {
  color: #a80d2d;
  font-size: 0.8750em;
  line-height: 1.2;
  margin: 50px 12px 5px 12px;
}

#block_login p {
  font-size: 0.6875em;
  margin: 0 12px;
}

/* Footer */

#footer {
  color: #666;
  font-size: 0.625em;
  margin: 0 auto 20px auto;
  text-align: right;
  width: 923px;
}




/******************************************************************************/
/*--- Inhalt -----------------------------------------------------------------*/
/******************************************************************************/

#keyvisual .right #big {
  background: url("../_klickmodell/i/startseite/flashfilm.jpg");
  height: 354px;
  width: 435px;
}

#keyvisual .right #cross_overlay {
  background: url("../_klickmodell/i/startseite/keyvisual_cross.png");
  height: 354px;
  width: 435px;
}

#logo_neu {
  text-align: right;
}

/*--- Navigationsmenue im Kopf -----------------------------------------------*/
#menu li {
  float: left;
  margin-right: 25px;
  text-transform: uppercase;
}

#menu li a {
  color: #949494;
}

#menu li a:hover {
  color: #fff;
  text-decoration: none;
}

#menu li.menuhighlight a {
  color: #fff;
}

/*--- Submenue im Kopf -------------------------------------------------------*/
#submenu li {
  float: left;
  padding: 3px 15px 0 0;
}

#submenu li.first {
  padding-left: 9px;
}

#submenu li a {
  color: #c1c1c1;
}

#submenu li a:hover {
  color: #fff;
}

#submenu li.highlight a {
  color: #fff;
  font-weight:bold;
}

/*--- Inhaltselemente --------------------------------------------------------*/
#content h1 {
  display: block;
  display: none;
}

#content h1.detail {
  display: block;
}

#content .block_center h2 a,
#content .block_center_home h2 a,
#content .block_center h1.detail a,
#content_expanded h1 a {
  color: #A80D2D;
}

#content #caption {
  background-color: #cccccc;
  color: #333;
  font-size: 1.250em;
  font-weight: normal;
  margin: -24px -14px 30px -14px;
  padding: 5px;
  padding-left: 12px;
}

#content .block_center h2,
#content .block_center_home h2,
#content .block_center h1.detail,
#content_expanded h1 {
  color: #a80d2d;
  font-size: 1.1250em;
  margin-bottom: 5px;
}

#content .block_center h2.download {
  color: #000;
  font-size: 0.875em;
  margin-bottom: 5px;
}

#content_expanded h1 {
  margin-bottom: 0px;
}

#content .block_center h3,
#content .block_center_home h3,
#content .block_center h2.detail,
#content_expanded h2 {
  color: #a80d2d;
  font-size: 0.6875em;
  margin-top: 15px;
  margin-bottom: 0px;
}

#content .block_center p,
#content_expanded p {
  font-size: 0.6875em;
}

/* Spezieller Style fuer das Logo auf den Verbandsseiten */
#content .block_center .ext_logo_link {
  float: left;
  margin-top: 30px;
}

/* Spezielle Styles auf der Download-Seite */
#content .block_center p.download.lead {
  font-weight: bold;
  margin-bottom: 10px;
}

#content .block_center p.download.files {
  margin-top: 10px;
}

#content .block_center img {
  float:left;
  margin-right: 20px;
}

#content .block_center_home p {
  font-size: 0.75em;
}

.teaser {
  font-weight: bold;
}

.small {
  font-size: 0.6250em;
  margin-bottom: -5px;
}

.more {
  background: url("../i/icon_more.jpg");
  float: right;
  height: 12px;
  width: 18px;
}

#content .block a.more:hover {
  background-position: 18px 0;
}

.link_box {
  background-color: #a80d2d;
  color:#fff;
  font-size: 0.6875em;
  font-weight: bold;
  padding: 5px 15px;
}

.bgimage {
  background: url("../i/bg_content_logo.jpg") left bottom no-repeat;
}

#jumplist {
  font-size: 0.6875em;
  text-align: center;
}

#jumplist.imglist {
  margin-right: 100px;
}


/*--- Rechte Spalte ----------------------------------------------------------*/

/* Die Überschrift hat einen roten Hintergrund */
#right h2.header {
  background: #a80d2d;
  color: #fff;
  font-size: 0.8125em;
  font-weight: normal;
  height: 16px;
  margin: 1px 1px 20px 1px;
  padding: 5px;
}

#right img {
  float: left;
  margin: 1px 1px 1px 1px;
}

#right .block p {
  font-size: 0.75em;
  padding: 0 5px 10px 5px;
}

/* Teaser Artikel Box */

#right .block .artikel_caption {
  margin: 20px 10px 5px 5px;

}

#right .block .artikel_teaser {
  clear:left;
  margin-bottom: 30px;
  width: 180px;
  margin-left: 35px;
}

#right .block .artikel_teaser img {
  float:right;
}

#right .block .artikel_teaser p {
  font-size:0.6875em;
  font-weight: bold;
  color: #a80d2d;  
}




/******************************************************************************/
/*--- Formulare --------------------------------------------------------------*/
/******************************************************************************/

.input_text,
.input_zip, 
.input_town,
.contact_field,
textarea {
  background-color: #fff;
  border: 1px solid #999;
  font-size: 0.6875em;
}

.input_text {
  background-color: transparent;
  margin: 12px 12px 0 12px;
  padding: 2px;
  padding-left: 8px;
  width: 176px;
}

.input_button,
.contact_button {
  background-color: #999;
  border: 1px solid #999;
  font-size: 0.6875em;
  color: #fff;
  margin: 12px 18px 0 12px;
  padding: 1px 15px 1px 15px;
}

/* Kontaktseite */

.contact_button {
  font-weight: bold;
  margin-bottom:20px;
  margin-left: 183px;
}

.contact_field {
  margin-bottom: 10px;
  width: 260px;
}

textarea {
  font-family:Arial;
  height: 80px;
  resize: none;
  width: 260px
}

/* Haendler Map Seite */

.input_zip {
  width: 85px;
  padding: 2px;
  margin-right: 15px;  
}

.input_town {
  width: 240px;
  padding: 2px;
  margin-right: 5px;  
}

.search_bar {
  margin: 10px 0 20px 0px;

}

.map_result_frame {
  margin: 20px 0 20px 35px;
}

#content_expanded .map_result_frame h1 {
  color: #000;
  margin-bottom: 10px;
}

#content_expanded .map_result_frame img {
  float: left;
  margin-left: -30px;
}

/*---- STYLES FUER DIE ALTEN INHALTE! ---*/

.hersteller_logo {
  display: table-cell; 
  float:left; 
  padding:10px;
  text-align:center;  
  width:150px; 
}

.subrow {
  margin-top:20px;
}