@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Template for designing a screen layout
 * (de) Gestaltungsvorlage für die Erstellung eines Screenlayouts
 *
 * @copyright       Copyright 2005-2008, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.0.6
 * @revision        $Revision: 202 $
 * @lastmodified    $Date: 2008-06-07 14:29:18 +0200 (Sa, 07 Jun 2008) $
 */

@media screen, projection
{
 /*------------------------------------------------------------------------------------------------------*/

 /**
  * Design of the Basic Layout | Gestaltung des YAML Basis-Layouts
  *
  * @section layout-basics
  */
  /* Page margins and background | Randbereiche & Seitenhintergrund */
  body { border-top: 10px solid #ff0000; margin: 0; font-family: Arial; }
  /* Layout: Width, Background, Border | Layout: Breite, Hintergrund, Rahmen */
  #page { background: url(/dph/structure_images/topAreaBackground.gif) top left repeat-x; position: absolute; width: 100%; height: 216px; }
  #mainContainer {  margin: auto; width: 1000px; }
  
  /* Design of the Main Layout Elements | Gestaltung der Hauptelemente des Layouts */
  #main { background: url(/dph/structure_images/mainContainerShadow3.png) 0 0 repeat-y; background-attachment: scroll; float: left; padding: 0 17px 0 17px; margin-top: -10px; width: 970px;  }
  #main:first-child { padding-top: 11px; }
  
  #bgWrapper { float: left; padding-bottom: 45px; } /* background wrapper, put a global gb img into this element*/

  #footer { background: url(/dph/structure_images/footerShadow2.png) 0 0 no-repeat; width: 970px; margin: 0 0 0 5px; padding: 0 0 0 23px; background-color: #fff; position: fixed; bottom: 0; } 

  #brandLayer { background: url(/dph/structure_images/brand_layer_background2.jpg) top left no-repeat;  float: left; height: 43px;  margin: 0 0 0 30px; width: 207px; }
  #brandLayer a img { border: none; float: left; margin: 7px 0 0 10px; width:47px; height: 27px;}
  #brandLayer ul { float: left; margin: 10px 0 0 10px; padding: 0; color: red; }
  #brandLayer ul li { background: url(/dph/structure_images/arrowRed.gif) center left no-repeat; display: inline; list-style-type: none; margin: 0 6px 0 0; padding-left: 9px; }
  #brandLayer ul li a { color: #535353; font-size: 12px; font-family: Arial; text-decoration: none; }
  #brandLayer ul li a:active,
  #brandLayer ul li a:hover { color: #b50200; text-decoration: none; }
  
  #corporate-layer { background: #d7d7d7; border: 1px solid #525252; height: 300px; left: 20px; position: absolute; bottom: 20px; width: 615px; }
  #corporate-layer p { background: #525252; height: 17px; float: none !important; font-size: 11px !important; margin: 0 0 7px !important; padding: 2px 0 0; text-align: right; }
  #corporate-layer p a { background: transparent; color: #fff; font-family: arial, helvetica, sans-serif; margin: 0 5px 0 0; text-decoration: none; }
  #corporate-layer p a:hover { text-decoration: underline; }
  #corporate-layer .stage { background: url(/dph/structure_images/background-stage.png) repeat-x ; margin: 0 5px; padding: 11px 0 0; }
  #corporate-layer{ position: absolute; bottom: 60px; left: 52px; display: none; }

  #footer p,#footer2 p { color: #a1a5aa; font-size: 10px; float: left; margin: 12px 0 0 10px; padding: 0; }
  #footer p span, #footer2 p span { font-size: 10px; margin: 0 .5em 0 .5em; }
  ul#footerNavigation { color: #990000; float: left; margin: 4px 0 0 0; padding: 0; }
  ul#footerNavigation li { color: #aaaacc; float: left; list-style-type: none; margin: 0 0 0 .5em; padding: 0; }
  ul#footerNavigation li a { color: #a1a5aa; margin: 0 .5em 0 0; font-size: 10px; }
  
  #footer2 { background: url(/dph/structure_images/footerShadow2.png) 0 0 no-repeat; width: 970px /*100%*/; position: absolute; float: left; margin: 0 -17px 0 -12px;}

  #footer{
    position:relative;
    height:42px;
}
.scroll #footer{
    position:fixed;
}

 /*------------------------------------------------------------------------------------------------------*/
 /**
  * Formatting of the Content Area | Formatierung der Inhaltsbereichs
  *
  * @section layout-main
  */

  #navCol { width: 190px /*194px*/; margin: 0; padding: 0; float: left;}
  #navCol_content a  { float: left; }
  #contentArea { font-size: 12px; line-height: 14px; width: 760px; float: right; margin: 0; padding: 0 20px 0 0; }


  /* 
   * 5/5 column
   * this column can only be placed bevor the navCol or / and after the contentAre
  */
  .special_cont { width: 100%; }
  
  .single_cont { width: 100%; float: left;  }
    
  .dual_cont { width: 100%; display: block; clear: both; float: left; }

  .dual1 { width: 50%; float: left;  }
  .dual2 { width: 50%; float: right;  }
  
  .textLeft { float: left;  display: inline;  }
  .textRight { float: right; border: 1px solid red; }
  
 /*------------------------------------------------------------------------------------------------------*/
 /**
  * Design of Additional Layout Elements | Gestaltung weiterer Layoutelemente
  *
  * @section layout-misc
  */
 
  #contentArea h1 { font-size: 16px; line-height: 16px; color: #fff; font-weight: bold; }
  #contentArea h2 { font-size: 14px; line-height: 14px; color: #fff; font-weight: bold; }
  #contentArea h3 { font-size: 12px; line-height: 12px; color: #fff; font-weight: bold; }
  #contentArea h4 { font-size: 17px; line-height: 20px; color: #fff; font-weight: bold; margin: 0; padding: 0; }

 /*
  * Floats
  */
  .flL { float: left; }
  .flR { float: right; }
  
  .maL10 { margin-left: 10px; }
  .maL20 { margin-left: 20px; }
  .maL50 { margin-left: 50px; }
  .maL100 { margin-left: 100px; }
  .maL150 { margin-left: 150px; }
  .maL200 { margin-left: 200px; }
  .maL250 { margin-left: 250px; }
  .maL300 { margin-left: 300px; }
  
  .maR10 { margin-right: 10px; }
  .maR20 { margin-right: 20px; }
  .maR50 { margin-right: 50px; }
  .maR100 { margin-right: 100px; }
  .maR150 { margin-right: 150px; }
  .maR200 { margin-right: 200px; }
  .maR250 { margin-right: 250px; }
  .maR300 { margin-right: 300px; }
  
  .maT10 { margin-top: 10px; }
  .maT20 { margin-top: 20px; }
  .maT50 { margin-top: 50px; }
  .maT100 { margin-top: 100px; }
  .maT150 { margin-top: 150px; }
  .maT200 { margin-top: 200px; }
  .maT250 { margin-top: 250px; }
  .maT300 { margin-top: 300px; }
  
  .maB10 { margin-bottom: 10px; }
  .maB20 { margin-bottom: 20px; }
  .maB50 { margin-bottom: 50px; }
  .maB100 { margin-bottom: 100px; }
  .maB150 { margin-bottom: 150px; }
  .maB200 { margin-bottom: 200px; }
  .maB250 { margin-bottom: 250px; }
  .maB300 { margin-bottom: 300px; }
  
  .paL10 { padding-left: 10px; }
  .paL20 { padding-left: 20px; }
  .paL50 { padding-left: 50px; }
  .paL100 { padding-left: 100px; }
  .paL150 { padding-left: 150px; }
  .paL200 { padding-left: 200px; }
  .paL250 { padding-left: 250px; }
  .paL300 { padding-left: 300px; }
  
  .paR10 { padding-right: 10px; }
  .paR20 { padding-right: 20px; }
  .paR50 { padding-right: 50px; }
  .paR100 { padding-right: 100px; }
  .paR150 { padding-right: 150px; }
  .paR200 { padding-right: 200px; }
  .paR250 { padding-right: 250px; }
  .paR300 { padding-right: 300px; }
  
  .paT10 { padding-top: 10px; }
  .paT20 { padding-top: 20px; }
  .paT50 { padding-top: 50px; }
  .paT100 { padding-top: 100px; }
  .paT150 { padding-top: 150px; }
  .paT200 { padding-top: 200px; }
  .paT250 { padding-top: 250px; }
  .paT300 { padding-top: 300px; }
 
  .paB10 { padding-bottom: 10px; }
  .paB20 { padding-bottom: 20px; }
  .paB50 { padding-bottom: 50px; }
  .paB100 { padding-bottom: 100px; }
  .paB150 { padding-bottom: 150px; }
  .paB200 { padding-bottom: 200px; }
  .paB250 { padding-bottom: 250px; }
  .paB300 { padding-bottom: 300px; }
 
  .eW100 { width: 100px; } 
  .eW150 { width: 150px; }
  .eW170 { width: 170px; }
  .eW180 { width: 180px; }    
  .eW190 { width: 190px; } 
  .eW200 { width: 200px; } 
  .eW250 { width: 250px; } 
  .eW300 { width: 300px; } 
  .eW350 { width: 350px; } 
  .eW360 { width: 360px; } 
  .eW380 { width: 380px; } 
  .eW760 { width: 760px; }
 
 /*
  * border
  */
  .b1 { border: 1px solid green; }
  .b2 { border: 1px solid blue; }
  .b3 { border: 1px solid aqua; }
  .b4 { border: 1px solid brown; }
  .b5 { border: 1px solid red; }
  .b6 { border: 1px solid #fff; }
  
 /*
  * background color
  */ 
  .bgC0 { background-color: #fff; }
  .bgC1 { background-color: #742612; }
  .bgC2 { background-color: #762814; }
  .bgC3 { background-color: red; }
  .bgC4 { background-color: #a4280c; }
  .bgC5 { background-color: #6a1709; }
 
 /*
  * background image
  */  
  .bgI1 { background: url(/dph/structure_images/tmpl_5.jpg) top left repeat-y; }
  .bgI2 { background: url(/dph/structure_images/background-content2.jpg) top left repeat-y; }
  
 /*
  * text color
  */ 
  .txtC1 { color: #fff; }
  .txtC1 a { color: #e2e2e2; }

  .sip1 { padding: 10px; }
  .sip2 { padding: 20px; }
  .sip3 { padding: 30px; }
   
  /*
   * brandspecific formats
   */
   


   .redDotNav { background-color: #fff; width: 80%;}
   
  .teaser a {
   }
   
   .iFramer {
        background: url(/dph/structure_images/iframe.gif) top left no-repeat;
        float: left;
        padding-top: 8px;
        border-left: 1px solid #521208;
    }
   
   .iFramer h3 {
        padding-left: 17px;
        font-family: Arial;
        font-size: 12px;
        color: #ffed00;
   }
   
   .iFramer .iframeWrapper {
        background-color: #811803;
        border-right: 1px solid #521208;
        border-bottom: 1px solid #521208;
        padding: 17px 17px 17px 17px;
   }

      
   .imageGallery {
    padding-left: 17px;
    padding-right: 17px;
    padding-bottom: 17px;
    width: 706px;
    border-top: 1px solid #521206;
    float: left;
    background-color: #521208;
}
    .imageGallery ul {
        margin: 0;
        padding: 17px 0 17px 0;
        float: left;
        width: 100%;
    }
    .imageGallery ul li {
        margin: 0;
        padding: 0;
        text-align: center;
        list-style-type: none;
        list-style-image: none;
    }

    .imageGallery ul img {
        
    }
    .imageGallery .leftScroll {
        float: left;
        margin-right: 17px;
        cursor: pointer;
    }
    .imageGallery .rightScroll {
        float: right;
        cursor: pointer;
    }
    .imageGallery .nav {
        width: 622px;
        text-align: center;
        float: left;
    }
    .imageGallery .nav img {
        margin-right: 8px;
        vertical-align:top;
        cursor: pointer;
        width: 115px;
    }
    .imageGallery .nav img.active {
        border: 2px solid #ffed00;
    }
   /* .imageGallery .nav img.horizontal {    
        width: 115px;    
    }
    .imageGallery .nav img.vertikal {    
        width: 75px;
    }*/
 
    .slideShow { width: 326px; background-color: #521208; padding: 16px; border: 1px solid #541108; float: left;}
    .slideShow  ul { margin: 0; padding: 0; }
    .slideShow .leftScroll,
    .slideShow .rightScroll { float: left; }
    .slideShow  li { margin: 0; padding: 0; list-style-type: none; }
    .slideShow ul li img { width: 326px; }
    .slideShowNav { width: 280px; float: left; text-align: center; }
    .slideShowNav span { cursor :pointer; font-size: 12pt; text-decoration: none; margin-right: 6px; color: #eb9270;}
    .slideShowNav span:hover { color: #eb9270; }
    .slideShowNav span.active { color: #ffed00; text-decoration: underline; }
   
    /* These are standard sIFR styles... do not modify */
    .sIFR-flash {
        visibility: visible !important;
        margin: 0;
    }
    .sIFR-replaced {
        visibility: visible !important;
    }
    span.sIFR-alternate {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        display: block;
        overflow: hidden;
    }
    /* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
    .sIFR-flash + div[adblocktab=true] { display: none !important; }
    .redDotNav { display: block; background-color: #fff; padding: 2px 0 2px 10px; }
    
    .flashCont embed { float: left; border: 1px solid red; margin:0; padding:0; top: 0; }

  #sendafriend {
    width: 397px;
    margin: auto;
    font-size: 12px;
}
#sendafriend img { margin: 10px 0 10px 97px; }
#sendafriend fieldset { border: 1px solid #a1a5aa; float: left; width: 100%; padding: 0 0 10px 0; margin-bottom: 15px;}
#sendafriend div.formBorder { border-top: 10px solid #f2f2f2; }
#sendafriend div.inputField { clear: both; padding: 5px 0 5px 0;}
#sendafriend fieldset label { display: block; width: 40%; float: left; margin-left: 10px; margin-right: 10px;}    
#sendafriend fieldset label span { margin-left: .5em; color: red; font-weight: bold; }
#sendafriend p { margin: 0 0 10px 0; }
#sendafriend p span { color: red; font-weight: bold; margin-right: .5em; }    
#sendafriend input { display: block; float: left; width: 50%; }    
#sendafriend button {
    margin-right: 8px;
    height: 22px;
    background-color: transparent;
    background-image: url(/dph/structure_images/buttonBackground.png);
    background-repeat: no-repeat;
    background-position: left center;
    border: 1px solid #a1a5aa;
    /*font-size: 110%;*/
}

#sendafriend button div { margin: 1px 5px 8px 5px; }
#sendafriend textarea { margin-bottom: 10px; width: 397px; height: 80px; font-family: Arial; }
 #sendafriend button div {
  background: url(/dph/structure_images/arrowRed2.gif) no-repeat 0 .4em;
  padding: 0 5px 0 10px;
}

.videoPlayer { background: url(/dph/structure_images/player_background.gif) top left no-repeat; padding: 20px; width: 320px; height: 295px; }


.arrow a { color: #fff; padding-left: 27px; background: url(/dph/structure_images/arrows.gif) 0 3px no-repeat; }
.arrow a:hover,
.arrow a:active, { color: ffed00; }

#contentArea a { color: #ffed00; }
}