/**
 * 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 lists
 * @author     gueldner
 * @since      26.07.2011
 * @version    $Id$
 **/
@media screen
{

  /*  =========================================================
  0. basic config
  1. onTop filter and response
  2. cover flow
  3. basic list element
  4. basic compact list element
  5. basic sub list element
  6. offer list specifics
  7. hotel list specifics
  8. event list specifics
  9. map in list
  10. tabbed list
  20. infoCorner
  ========================================================== */


  /*  =========================================================
   =0. basic config
  ========================================================= */
  .contentList{ width:100%;}
  .contentList.active{ display: block;}
  .contentList .detailView{ display:none;}


  /*  =========================================================
   =1. onTop filter and response
  ========================================================= */
  /*response*/
  .contentList .response{ width:620px; margin:0 0 20px;}
  .contentList .response h1{ margin:0 0 10px; padding:0; font-size:18px; font-weight:normal;}
  .contentList .response h1 strong{ font-size:20px; font-weight:bold;}
  .contentList .response h1 span{ font-weight:inherit;}

  .contentList .response p{ font-size:14px; margin:0;}
  .contentList .response p strong{ font-weight:bold;}

  /*filterform*/
  .contentList .filter{ width:600px; height:37px; border-bottom:1px solid; border-top:1px solid; padding:13px 0 0 20px; margin:0 0 30px;}
  .contentList .filter.placeHolder{ height:0px; line-height:0px; font-size:0px; border-bottom:0; padding:0;}
  .contentList .filter form{ display:inline;}
  .contentList .filter select[name=sort]{ margin-right:50px;}
  .contentList .filter select[name=sort],
  .contentList .filter select[name=view]{ width:300px;}

  /*errormessage for empty filtered lists*/
  .contentList .errorMessage{ width:100%;}
  .contentList .errorMessage img{ float:left; margin:0 30px 0 0;}
  .contentList .errorMessage .text{ float:left; width:480px; padding:20px 0 0;}
  .contentList .errorMessage h2{ font-family:'DesyrelRegular', Arial, Helvetica, Verdana, sans-serif; font-size:28px; margin:0; padding:0;}
  .contentList .errorMessage h3{ font-size:16px; font-weight:bold; margin:0; padding:0;}
  .contentList .errorMessage p{ font-size:14px; margin:30px 0 0; padding:0;}


  /*  =========================================================
   =2. cover flow
  ========================================================= */
  /*master coverflow for whole list*/
  .contentList .coverflow{ width:620px; padding:10px 0;}

  .contentList .coverflow a,
  .contentList .coverflow li
  { font-size:14px;}
  .contentList .coverflow a{ text-decoration:underline;}
  .contentList .coverflow a.inactive{ text-decoration:none;}

  .contentList .coverflow a.backLink,
  .contentList .coverflow a.nextLink
  { float:left; width:143px;}

  .contentList .coverflow a.backLink{ background:0 center no-repeat; padding:0 0 0 7px;}
  .contentList .coverflow a.nextLink{ text-align:right; background:right center no-repeat; padding:0 7px 0 0;}

  .contentList .coverflow ul{ list-style-type:none; float:left; margin:0; padding:0; width:320px; text-align:center}
  .contentList .coverflow ul li{ display:inline; margin:0 1px 0 0;}

  /*coverflow for sublist elements (ibe)*/
  .contentList tfoot.coverflow a{ float:none!important;}


  /*  =========================================================
   =3. basic list element
  ========================================================= */
  .contentList .listElement{ width:610px; max-height:142px; padding:5px; margin:0 0 10px; position:relative;}
  .contentList .listElement .innerContent{ width:610px; height:142px; position:relative; overflow:hidden;}

  .contentList .listElement .image{ width:189px; height:142px; margin:0 1px 0 0; overflow:hidden; float:left; position:relative;}
  .contentList .listElement .image img{ width:189px;}
  .contentList .listElement .image.skyline{ text-align:center; background:url(../../../img/environment/listimage.skyline.gif) 0 0 no-repeat;}
  .contentList .listElement .image.skyline img{ width:auto; height:auto; vertical-align:middle;}
  .contentList .listElement .image.skyline img.skylinehelper{ height:100%; width:1px; margin:0 0 0 -1px;}

  .contentList .listElement .text{ width:410px; padding:0 0 0 10px; float:left; position: relative;}
  .contentList .listElement .text.fullWidth{ width:600px;}
  .contentList .listElement .text .headline{ width:410px; height:31px; margin:0 0 8px -10px; padding:0 0 0 10px;}
  .contentList .listElement .text .headline h2{ margin:0; padding:4px; font-size:18px; font-weight:bold; float:left}
  .contentList .listElement .text .headline h2 a{ font-weight:bold; text-decoration: inherit; font-size: inherit;}
  .contentList .listElement .text p{ margin:0 0 5px; padding:0; width:315px; max-height: 77px; overflow: hidden;}
  .contentList .listElement .text p.fullWidth{ width:400px; margin-bottom:15px;}

  .contentList .listElement .text a.attribute{ float:right; margin:0 5px 0 0;}

  /*addressline in textarea*/
  .contentList .listElement .text p span.address{ font-style:italic; display:block; padding:0 0 5px;}

  .contentList .listElement .text a[class]
  { text-decoration:underline; font-size:14px;}
  .contentList .listElement .text a.moreInfos{ padding:0 7px 0 0; background:right center no-repeat;}
  .contentList .listElement .text a.mapMarker{ padding:0 50px 0 0; position:relative; margin:0 0 0 50px;}
  .contentList .listElement .text a.mapMarker span{ font-family:'DesyrelRegular', Arial, Helvetica, Verdana, sans-serif; font-size:23px; position:absolute; top:-5px; right:0; text-align:center; padding:0 21px 0 0; width:20px; height:33px; line-height:23px;}

  .contentList .listElement .text .weatherState {position: absolute; top: 31px; left: 0; width: 170px; height: 91px; padding: 10px;}
  .contentList .listElement .text .weatherState ul {margin: 0 0 62px 0; padding: 0;}
  .contentList .listElement .text .weatherState li {float: left; list-style: none outside none; width: 50%; margin: 0; text-align: center;}
  .contentList .listElement .text .weatherState li.last {margin: 0;}
  .contentList .listElement .text .weatherState span.label {font-size: 1.1em;}
  .contentList .listElement .text .weatherState p {width: auto; font-size: 1.3em; text-align: center;}
  .contentList .listElement .text .weatherState span.value {font-family:'DesyrelRegular', Arial, Helvetica, Verdana, sans-serif; font-size: 3em;}

  .contentList .listElement .text .weatherSymbols {position: absolute; top: 31px; left: 190px; width: 400px; height: 91px; padding: 10px;}
  .contentList .listElement .text .weatherSymbols p {width: auto; font-size: 1.3em;}
  .contentList .listElement .text .weatherSymbols .symbol {float: left; width: 33%; text-align: center;}

  .contentList .listElement ul.links {margin: 1em 0 0; padding: 0;}
  .contentList .listElement ul.links li {list-style: none outside none; float: left; margin-right: 1.5em;}
  .contentList .listElement ul.links li input {margin: 0 0.25em 0 0;}

  /*prospect list item changes*/
  .contentList .listElement.prospect .image{ width:99px; height:142px; margin:0 1px 0 0; overflow:hidden; float:left; position:relative;}
  .contentList .listElement.prospect .image img{ width:99px;}
  .contentList .listElement.prospect .text{ width:500px;}
  .contentList .listElement.prospect .text p {width: 485px}

  /*event list item changes*/
  .contentList .listElement.event .text p.fullWidth {height: 57px; overflow: hidden;}

  /* ibeServices for offer listElements*/
  .contentList .listElement .text a.ibeServices {
    color: #515151;
    margin: 0 20px 0 0;
    height: 20px;
    text-decoration: none;
  }

  .contentList .listElement .text a.ibeServices span {
    margin-left: 35px;
    padding:0 7px 0 0; background:right center no-repeat;
    background-image: url("../../../img/objects/allg.link.arrow.right.gif");
    vertical-align: top;
    text-decoration: underline;
  }

  /* ibeDates for offer listElements*/
  .contentList .listElement .text a.ibeDates {
    padding:0 7px 0 0; background:right center no-repeat;
    color: #515151;
    background-image: url("../../../img/objects/allg.link.arrow.right.gif");
    margin: 0 20px 0 0;
    height: 20px;
    vertical-align: top;
  }

  .contentList .listElement.offer .text a.moreInfos {
    height: 20px;
    vertical-align: top;
  }

  /*highlight / tipp indicator*/
  .contentList .listElement.highlight #recommendation {
    width: 42px;
    height: 42px;
    position: absolute;
    text-align: center;
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    -o-transform: rotate(-40eg);
    z-index: 10;
    left: 140px;
    top: 0px;
    -webkit-box-shadow: -1px 0px 2px #737373; /* webkit browser*/ -moz-box-shadow: -1px 0px 2px #737373; /* firefox */ box-shadow: -1px 0px 2px #737373;
    background: #e2001a; /* Old browsers */
    background: -moz-linear-gradient(top,  #e2001a 0%, #b30015 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2001a), color-stop(100%,#b30015)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e2001a 0%,#b30015 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e2001a 0%,#b30015 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e2001a 0%,#b30015 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e2001a 0%,#b30015 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2001a', endColorstr='#b30015',GradientType=0 ); /* IE6-9 */
  }

  .contentList .listElement.highlight #recommendation:before {
    content: "Tipp";
    line-height: 38px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    top: 0;
    left: 0;
    height: 42px;
    width: 42px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    z-index: 10;
    background: #e2001a; /* Old browsers */
    background: -moz-linear-gradient(top,  #e2001a 0%, #b30015 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2001a), color-stop(100%,#b30015)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e2001a 0%,#b30015 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e2001a 0%,#b30015 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e2001a 0%,#b30015 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e2001a 0%,#b30015 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2001a', endColorstr='#b30015',GradientType=0 ); /* IE6-9 */
  }

  /*  =========================================================
   =4. basic compact list element
  ========================================================= */
  .contentList .listElement.compact{ max-height:87px;}
  .contentList .listElement.compact .innerContent{ height:87px;}

  .contentList .listElement.compact .image{ width:116px; height:87px; margin:0;}
  .contentList .listElement.compact .image img{ width:116px;}

  .contentList .listElement.compact .text{ width:300px; padding:0 0 0 14px;}
  .contentList .listElement.compact .text h2{ font-weight:bold; font-size:18px; margin:5px 0 0; padding:0;}
  .contentList .listElement.compact .text h2 a{ font-weight:bold;}
  .contentList .listElement.compact .text p{ font-style:italic; display:block;}

  .contentList .listElement.compact a.button{ position:absolute; right:7px; bottom:7px; font-weight:bold; font-size:14px; padding:2px 7px 3px 5px;}
  .contentList .listElement.compact a.button img{ vertical-align:middle; margin:0 5px 0 0;}


  /*  =========================================================
   =5. basic sub list element
  ========================================================= */
  .contentList .subListElement{ width:610px; padding:5px; margin:0 0 30px; position:relative;}
  .contentList .subListElement .innerContent{ width:610px; position:relative; overflow:hidden;}

  .contentList .subListElement .innerContent a.text,
  .contentList .subListElement .innerContent .text a { text-decoration:underline;}
  .contentList .subListElement .innerContent .bookButton{ width:27px; height:22px; display:block; background:0 0 no-repeat;}
  .contentList .subListElement .innerContent .loadBreakfast {
    display: inline-block;
    width: 16px; height: 11px; margin-left: 3px;
    background: url('/portal/img/objects/ajaxloader-horizontal-small.gif') scroll no-repeat 0 2px transparent;
  }


  /*  =========================================================
   =6. offer list specifics
  ========================================================= */
  .contentList .listElement .text.large p{ width:400px; margin-bottom:5px;}

  .contentList .subListElement .innerContent a.image{ float:left; margin:0 7px 0 0; width:48px; height:32px; position:relative; overflow:hidden;}
  .contentList .subListElement .innerContent a.image .magnifier{ display:block; position:absolute; bottom:3px; right:3px; width:11px; height:11px; background:url(../../../img/objects/mainImage.magnifier.png) 0 0 no-repeat;}
  .contentList .subListElement .innerContent a.image img{ width:48px;}

  .contentList .subListElement .innerContent .stars{ float:right; padding:0;}
  .contentList .subListElement .innerContent .stars span.star{ float:right; height:15px; overflow:hidden; background:right 0 no-repeat;}
  .contentList .subListElement .innerContent .stars span.one{ width:18px;}
  .contentList .subListElement .innerContent .stars span.two{ width:37px;}
  .contentList .subListElement .innerContent .stars span.three{ width:56px;}
  .contentList .subListElement .innerContent .stars span.attribute{ display:none;}
  .contentList .subListElement .innerContent .stars p.attribute{ display:block; text-align:right; clear:both; font-family:'DesyrelRegular', Arial, Helvetica, Verdana, sans-serif; font-size:10px; margin:0; line-height:10px;}


  /*  =========================================================
   =7. hotel list specifics
  ========================================================= */
  .contentList .listElement.hotel {max-height: none;}
  .contentList .listElement.hotel .innerContent {height: auto;}

  .contentList .listElement.hotel .subListElement {margin: 5px 0 0; padding: 0;}
  .contentList .listElement.hotel .subListElement .text {width: auto;}
  .contentList .listElement.hotel .subListElement .text.price {width: 120px;}
  .contentList .listElement.hotel .subListElement .text a[class] {font-size: 11px;}

  .contentList .listElement.hotel .subListElement .contentTable {
    table-layout: fixed;
    box-sizing: border-box;
  }
  .contentList .listElement.hotel .subListElement thead {line-height: 24px;}
  .contentList .listElement.hotel .subListElement td.room {width: 240px;}
  .contentList .listElement.hotel .subListElement td.special {width: 140px; white-space: nowrap; text-align: right;}
  .contentList .listElement.hotel .subListElement td.pricing {width: 123px; text-align: right;}
  .contentList .listElement.hotel .subListElement td.booking {width: 27px;}
  .contentList .listElement.hotel .subListElement td > span.text {width: 100%; padding: 0;}
  .contentList .listElement.hotel .subListElement td > span.text.additions {width: auto; height: 15px; line-height: 15px;}
  .contentList .listElement.hotel .subListElement td > span.text.price {
    text-align: right;
    margin-right: 0;
  }

  .contentList .listElement.hotel .subListElement tbody td {border: 0 none;}

  .contentList .listElement.hotel.addressbase p {width: 305px;}
  .contentList .listElement.hotel.vacancy p {width: 400px;}
  .contentList .listElement.hotel p {width: 305px; margin: 0 0 10px 0; font-size: 13px;}
  .contentList .listElement.hotel p span.address {display: inline;}
  .contentList .listElement.hotel .text a[class] {font-size: 13px;}
  .contentList .listElement.hotel .text a.mapMarker {margin: 0 0 0 10px; padding: 0 26px 0 0;}
  .contentList .listElement.hotel .text a.mapMarker span {height: 16px; padding: 0; top: 0;}

  /*inclusive benefits*/
  .contentList .listElement.hotel a.inclusiveBenefits{
    color: #717171; font-size: 11px!important; float: right;
    margin: 4px 10px 0px 0px; padding: 2px 0px 0px 20px;
    background: transparent url(../../../img/objects/icon.hotel.inclusiveBenefits.gif) 0 50% no-repeat;
  }


  /*distances to POIs*/
  .contentList .listElement.hotel .distances {
    overflow: hidden;
    margin: 0; padding: 0; float: left;
  }
  .contentList .listElement.hotel .distances > li {
    list-style: none outside none;
    float: left;
    margin: 0 0 0 8px; padding: 0 0 0 23px;
    height: 25px; line-height: 25px;
    font-size: 11px; color: #717171;
    background: url("/portal/img/objects/distances.png") no-repeat scroll 0 0 transparent;
  }
  .contentList .listElement.hotel .distances > li.label {background-image: none; margin: 0; padding: 0;}
  .contentList .listElement.hotel .distances > li.city {background-position: 0 0;}
  .contentList .listElement.hotel .distances > li.train {background-position: 0 -50px;}
  .contentList .listElement.hotel .distances > li.motorway {background-position: 0 -100px;}
  .contentList .listElement.hotel .distances > li.airport {background-position: 0 -150px;}

  /*rating in headline*/
  .contentList .listElement .text .headline .rateHotel{ float:right; padding:5px 5px ;}
  .contentList .listElement .text .headline .rateHotel .normal{ font-size:11px;}
  .contentList .listElement .text .headline .rateHotel .large{ font-size:16px; font-weight:bold;}
  .contentList .listElement .text .headline .rateHotel .small{ font-size:11px;}
  .contentList .listElement .text .headline .rateHotel .label{ font-size:10px;}

  /*pricing in textArea*/
  .contentList .listElement .price{ float:right; text-align:right; margin:5px 10px 0 0;}
  .contentList .listElement .text .price{ margin:0 5px 0 0;}
  .contentList .listElement .price span.small{ font-size:12px;}
  .contentList .listElement .price span.large{ font-size:22px; font-weight:bold;}

  /*busker in textarea*/
  .contentList .listElement .text .busker{ background:0 0 no-repeat; padding:0 0 0 20px; float:right; margin:5px 5px 0 0; text-decoration:none!important;}
  .contentList .listElement .text .busker span{ display:block;}
  .contentList .listElement .text .busker .large{ font-size:18px; font-weight:bold; line-height:12px;}
  .contentList .listElement .text .busker .small{ font-size:10px;}


  /*  =========================================================
   =8. event list specifics
  ========================================================= */
  .contentList .listElement.eventDateHeadline{ margin:30px 0 15px;}
  .contentList .listElement .category{ float:right; padding:8px 5px 0 0; color:white; font-size:14px;}

  .contentList .listElement .text a.ticketlink{ padding:6px 32px 6px 0; margin:0 0 0 50px; background:right center no-repeat;}
  .contentList .listElement .text div.date{ float:right; font-size:12px; font-weight:bold; margin:0 5px 0 0;}

  .contentList .listElement.eventDateHeadline .innerContent{ height:auto;}
  .contentList .listElement.eventDateHeadline h3{ font-size:18px; font-weight:bold; margin:0; padding:5px;}


  /*  =========================================================
   =9. map in list
  ========================================================= */
  .contentList .listMapContainer{ width:610px; height:370px; padding:5px; position:relative; margin:0 0 30px;}
  .contentList .listMapContainer #mapList{width:100%; height:100%; overflow:hidden; position:relative;}
  .contentList .listMapContainer #mapList .preloader{ background-color:white;}


  /*  =========================================================
   =10. tabbed list
  ========================================================= */
  .tabbedListHeader {}

  .tabbedListHeader ul {height: 26px; margin: 30px 0; padding: 0; list-style: none outside none; border-bottom: 5px solid #C4C4C4;}
  .tabbedListHeader li {float: left; margin-right: 5px; padding: 5px; font-size: 16px;}
  .tabbedListHeader li.active {background-color: #C4C4C4;}
  .tabbedListHeader li a {color: #717171; font-weight: bold;}
  .tabbedListHeader li a .count {font-size: 0.8em; font-weight: normal;}


  /*  =========================================================
   =20. infoCorner
  ========================================================= */
  .contentList .listElement .image .infoCorner{ position:absolute; font-size:18px; top:0; left:0; text-align:left; width:64px; height:64px;}
  .contentList .listElement .image .infoCorner.bottom{ top:auto; left:auto; bottom:0; right:0; text-align:right;}

  /*infoCorner for price*/
  .contentList .listElement .image .infoCorner.price{ font-size:18px; width:71px; height:69px; padding:5px 0 0 3px; margin:0; font-family:'ArialNarrow', Arial, Helvetica, Verdana, sans-serif; line-height:15px; background-position:-49px 0;}
  .contentList .listElement .image .infoCorner.price span.subPrice{ font-size:12px; font-family:inherit; vertical-align:top; line-height:10px; padding-left:1px;}
  .contentList .listElement .image .infoCorner.price span.info{ font-size:14px; font-family:inherit;}

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

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

  .contentList .listElement .image .infoCorner.icon{ width:59px; height:59px; padding:5px 0 0 5px; background-position:-59px 0;}
  .contentList .listElement .image .infoCorner.bottom.icon{ padding:0 5px 5px 0;}
  .contentList .listElement .image .infoCorner.icon img{ width:auto; height:auto; position:static;}


}