/**
 * BTZ 2011
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2011 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage styles for portal teaser
 * @author     gueldner
 * @since      25.07.2011
 * @version    $Id$
 **/
@media screen
{

  /*  =========================================================
  0. frontdoor big
  1. frontdoor small
  2. context
  3. rubric
  4. map
  5. context info
  6. shoppingCart teaser
  10. infoCorner
  11. Germanwings teaser
  ========================================================== */


  /*  =========================================================
   =0. frontdoor big
  ========================================================= */
  #CONT_frontdoorContent .teaserArea .bigTeaser .teaser{ width:546px; float:left; position: relative; margin:3px 5px 0 0;}
  #CONT_frontdoorContent .teaserArea.congress .bigTeaser .teaser{ width:736px;}

  #CONT_frontdoorContent .teaserArea .bigTeaser .teaser .image{ width:275px; max-height:190px; padding:5px; margin:0 15px 0 0; position:relative; float:left;}
  #CONT_frontdoorContent .teaserArea .bigTeaser .teaser .image img{ position:relative; width:275px; height:190px; z-index: 20;}

  #CONT_frontdoorContent .teaserArea .bigTeaser .teaser .text{ width:246px; float:left}
  #CONT_frontdoorContent .teaserArea .bigTeaser .teaser .text h3{ font-size:20px; font-weight:bold; margin:0 0 10px; padding:0;}
  #CONT_frontdoorContent .teaserArea .bigTeaser .teaser .text h3 a{ font-size:inherit; font-weight:bold;}
  #CONT_frontdoorContent .teaserArea .bigTeaser .teaser .text p{ margin:0 0 10px; padding:0;}
  #CONT_frontdoorContent .teaserArea .bigTeaser .teaser .text p.subline{ font-style:italic; font-weight:bold;}
  #CONT_frontdoorContent .teaserArea .bigTeaser .teaser .text a.moreInfos{ text-decoration:underline; font-size:14px; padding:0 7px 0 0; background:right center no-repeat;}

  #CONT_frontdoorContent .teaserArea .bigTeaser .infoCorner.icon img {width: auto; height: auto;}
  #CONT_frontdoorContent .teaserArea .bigTeaser .playVideo {position: absolute; top: 55px; left: 80px; display: block; width: 116px; height: 87px; background: no-repeat scroll 0 0 transparent; z-index: 30;}

  #CONT_frontdoorContent .teaserArea.congress .bigTeaser .teaser .text{ width: 432px; height: 210px; overflow: hidden;}

  /*  =========================================================
   =1. frontdoor small
  ========================================================= */
  #CONT_frontdoorContent .teaserArea .smallTeaser .teaserCollection .teaser{ width:127px; max-height:77px; padding:5px; margin:0 11px 0 0; position:relative; float:left; cursor:pointer;}
  #CONT_frontdoorContent .teaserArea .smallTeaser .teaserCollection .teaser .infoCorner{ position:absolute; font-size:11px; top:5px; right:5px; width:53px; height:60px; padding:2px 2px 0 0; text-align:right; font-family:'ArialNarrow', Arial, Helvetica, Verdana, sans-serif; line-height:15px;}
  #CONT_frontdoorContent .teaserArea .smallTeaser .teaserCollection .teaser .infoCorner span{ font-size:11px; font-family:inherit;}

  #CONT_frontdoorContent .teaserArea .smallTeaser .teaserCollection .teaser img{ position:relative; width:127px; height:77px; z-index: 20;}

  #CONT_frontdoorContent .teaserArea .smallTeaser a.prevTeaser,
  #CONT_frontdoorContent .teaserArea .smallTeaser a.nextTeaser
  { height:79px; width:40px; float:left; margin-top: 6px;}

  #CONT_frontdoorContent .teaserArea .smallTeaser a.prevTeaser.inactive,
  #CONT_frontdoorContent .teaserArea .smallTeaser a.nextTeaser.inactive
  { opacity: .5; cursor: default;}

  #CONT_frontdoorContent .teaserArea .smallTeaser a.prevTeaser{ background-position: 0 0; margin-right: 10px; margin-left: 3px;}
  #CONT_frontdoorContent .teaserArea .smallTeaser a.nextTeaser{ background-position: 40px 0; margin-left: 13px;}

  #CONT_frontdoorContent .teaserArea a.moreTeaser.flow{position: absolute; height:33px; width:50px; margin:18px 0 0; background:right top no-repeat; float:left; font-size:12px; font-family:'ArialNarrow', serif, Helvetica, Verdana, sans-serif; line-height:14px;}
  #CONT_frontdoorContent .teaserArea a.moreTeaser.flow.left{bottom: 30px; left: -90px; text-align: left; padding:10px 0 0 30px; background-position: 0 -75px;}
  #CONT_frontdoorContent .teaserArea a.moreTeaser.flow.right{bottom: 30px; right: -90px; text-align: right; padding:10px 30px 0 0; background-position: right 0;}


  /*  =========================================================
   =2. context
      (used for teaser below sideNavigation as tipTeaser and in mainContent tabs)
  ========================================================= */
  .teaser.contextTeaser{ margin:0 0 45px; width:280px;}
  .teaser.contextTeaser .image{ width:270px; max-height:160px; position:relative; padding:5px; margin:0 0 10px; display:block;}
  .teaser.contextTeaser .image img{ position:relative; width:270px; height:160px;}

  .teaser.contextTeaser h4{ font-size:16px; font-weight:bold; margin:0; padding:0;}
  .teaser.contextTeaser h4 a{ font-weight:bold;}
  .teaser.contextTeaser p{ margin:0; padding:0;}
  .teaser.contextTeaser a.moreInfos{ text-decoration:underline; font-size:14px; padding:0 7px 0 0; background:right center no-repeat;}

  /*special treatment for tipTeaser variation*/
  .tipTeaserArea .teaser.contextTeaser{ width:300px; float:left; margin:0 20px 20px 0;}
  .tipTeaserArea .teaser.contextTeaser .image{ width:290px; max-height:172px;}
  .tipTeaserArea .teaser.contextTeaser .image img{ width:290px; height:172px;}

  /**/
  .teaser.contextTeaser .image .overlay{ width:100%; height:100%; position:absolute; top:0; left:0; background:center center no-repeat;}
  .teaser.contextTeaser .image.playVideo .overlay{ background-image:url(../../../img/objects/context.teaser.overlay.movie.png);}

  /*teaser group headings*/
  .contextArea .teaserGroup h3 {font-size:20px; font-weight:bold; margin:0; padding:0;}
  .contextArea .teaserGroup h4 {font-size:14px; font-weight:bold; margin:0.25em 0 0.75em; padding:0;}

  /*  =========================================================
   =3. rubric
  ========================================================= */
  #CONT_content .mainContentArea .rubricTeaserArea .teaser{ width:190px; margin:0 25px 65px 0; float:left;}
  #CONT_content .mainContentArea .rubricTeaserArea .teaser .image{ width:180px; max-height:200px; position:relative; padding:5px; margin:0 0 10px; display:block;}
  #CONT_content .mainContentArea .rubricTeaserArea .teaser .image img{ position:relative; width:180px; height:200px;}

  #CONT_content .mainContentArea .rubricTeaserArea .teaser h4{ font-size:16px; font-weight:bold; margin:0; padding:0;}
  #CONT_content .mainContentArea .rubricTeaserArea .teaser h4 a{ font-weight:bold;}
  #CONT_content .mainContentArea .rubricTeaserArea .teaser p{ margin:0; padding:0;}


  /*  =========================================================
   =4. map
  ========================================================= */
  #CONT_content .contextArea .mapTeaser{ width:280px; margin:0 0 60px;}

  #CONT_content .contextArea .mapTeaser .map{ width:270px; max-height:270px; padding:5px; position:relative; margin:0 0 5px;}
  #CONT_content .contextArea .mapTeaser .map .smallMap{ width:270px; height:270px; position:relative; overflow:hidden;}

  #CONT_content .contextArea .mapTeaser a.mapOpener{ float:right; font-size:14px; text-decoration:underline; background:right center no-repeat; padding:0 7px 0 0;}
  #CONT_content .contextArea .mapTeaser h5{ margin:15px 0 0; padding:0; font-size:16px; font-weight:bold;}

  #CONT_content .contextArea .mapTeaser ul{ list-style-type:square; margin:10px 0 0; padding:0 0 0 15px;}
  #CONT_content .contextArea .mapTeaser ul li{ font-size:14px; margin:0 0 5px;}
  #CONT_content .contextArea .mapTeaser ul li span{ font-weight:bold;}
  #CONT_content .contextArea .mapTeaser ul li a{ font-size:inherit;}


  /*  =========================================================
   =5. context info
  ========================================================= */
  .teaser.contextInfo{ margin:0 0 30px;}
  .teaser.contextInfo h3{ font-size:18px; font-weight:bold; margin:0; padding:0;}
  .teaser.contextInfo h3 a{ font-size:18px; font-weight:bold; text-decoration: none;}
  .teaser.contextInfo p.subline{ font-size:14px; font-weight:bold; margin:0 0 8px; padding:0;}
  .teaser.contextInfo p.subline a{ font-size:14px; font-weight:bold; text-decoration: none;}
  .teaser.contextInfo p.text{ font-size:12px; margin:0;}
  .teaser.contextInfo p.text img{ float:left; margin:0 10px 7px 0;}
  .teaser.contextInfo a{ font-size:12px; text-decoration:underline; padding:0; background:right center no-repeat;}

  .teaser.contextInfo a.bremer{ background:url(../../../img/environment/logo_bremer.gif) right center no-repeat; padding-right:65px;}


  /*  =========================================================
   =6. shoppingCart teaser
  ========================================================= */
  .shoppingCart .teaserArea .teaser{ width:225px; margin:0 20px 0 0; float:left;}
  .shoppingCart .teaserArea .teaser .image{ width:215px; max-height:240px; position:relative; padding:5px; margin:0 0 10px; display:block;}
  .shoppingCart .teaserArea .teaser .image img{ position:relative; width:215px; height:240px;}

  .shoppingCart .teaserArea .teaser h4{ font-size:16px; font-weight:bold; margin:0; padding:0;}
  .shoppingCart .teaserArea .teaser h4 a{ font-weight:bold;}
  .shoppingCart .teaserArea .teaser p{ margin:0; padding:0;}


  /*  =========================================================
   =10. infoCorner
  ========================================================= */
  .teaser .image .infoCorner{ position:absolute; font-size:18px; top:5px; right:5px; width:64px; height:64px; text-align:right;}

  /*infoCorner for price*/
  .teaser .image .infoCorner.price{ font-size:16px; width:71px; height:69px; padding:5px 3px 0 0; font-family:'ArialNarrow', Arial, Helvetica, Verdana, sans-serif; line-height:15px;}
  .teaser .image .infoCorner.price span{ font-size:14px; font-family:inherit;}

  /*infoCorner for icons (videos,webcams)*/
  .teaser .image .infoCorner.icon{ width:59px; height:59px; padding:5px 5px 0 0;}
  .teaser .image .infoCorner.icon img{ width:auto; height:auto; position:static;}

  /*infoCorner for stars*/
  .teaser .image .infoCorner.stars{ width:61px; height:61px; padding:3px 3px 0 0;}
  .teaser .image .infoCorner.stars span.star{ display:block; height:12px; overflow:hidden; background:0 0 no-repeat; float:right; clear:right;}
  .teaser .image .infoCorner.stars span.one{ width:12px;}
  .teaser .image .infoCorner.stars span.two{ width:24px;}
  .teaser .image .infoCorner.stars span.three{ width:36px;}

  .teaser .image .infoCorner.stars p.attribute{ display:none;}
  .teaser .image .infoCorner.stars span.attribute{ display:block; margin:5px 0 0; float:right; clear:right;}
  .teaser .image .infoCorner.stars span.superior{ background:center 0 no-repeat; width:10px; height:10px;}


  /*  =========================================================
   =11. Germanwings teaser
  ========================================================= */
  #teaserGermanwings form {position: relative; margin: -20px 0 30px 0; padding: 8px; width: 300px;}
  .mainContentArea.landingpage #teaserGermanwings form {position: relative; margin: 0 0 20px 640px; padding: 8px;}

  #teaserGermanwings fieldset {
    position: relative;
    margin: 0; padding: 50px 15px 0;
    background: url("/portal/img/extern/germanwings/bg.jpg") repeat-y scroll 0 0 transparent;
  }
  #teaserGermanwings label {
    display: block; float: left; width: 60px; padding: 3px 0 0;
    font-weight: 700; color: #FAEB0C;
  }
  #teaserGermanwings select {border: 1px solid #000; font-size: 12px; height: 20px; width: 200px; margin: 0 0 10px;}
  #teaserGermanwings input[type=image] {margin: 0 0 0 135px;}

  #teaserGermanwings .roundedBorder {box-shadow: 0 1px 2px black;}
  #teaserGermanwings .logo {
    position: absolute; top: 0; left: 0; width: 174px; height: 38px;
    background: url("/portal/img/extern/germanwings/logo.jpg") no-repeat scroll 0 0 transparent;
  }

}