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

  /*  =========================================================

  1. ibe overlays
  2. process bar
  3. single shopping cart
  4. shopping cart functions
  5. user data output
  6. price category overlay

  ========================================================== */


  /*  =========================================================
   =1. ibe overlays
  ========================================================= */
  .ibeOverlayWindow{ width:620px; padding:10px; text-align:left;}

  .ibeOverlayWindow .content{ width:100%; padding-bottom:10px;}
  .ibeOverlayWindow .content.borderBottom{ border-bottom:1px solid;}
  .ibeOverlayWindow .content.paddingTop{ padding-top:30px;}
  .ibeOverlayWindow .content.buttons{ text-align:right; padding-top:20px;}

  .ibeOverlayWindow .content h1{ font-family:'DesyrelRegular', Arial, Helvetica, Verdana, sans-serif; font-weight:normal; font-size:30px; margin:5px 0;}
  .ibeOverlayWindow .content h2{ margin-bottom:0 0 10px;}
  .ibeOverlayWindow .content h3{ margin:0;}
  .ibeOverlayWindow .content h2,
  .ibeOverlayWindow .content h3
  { font-weight:bold; font-size:16px;}

  .ibeOverlayWindow .content a.text{ text-decoration:underline;}
  .ibeOverlayWindow .content p{ margin:0;}
  .ibeOverlayWindow .content p span.price{ font-size:20px; font-weight:bold; color:inherit;}

  .ibeOverlayWindow .content ul{ font-size:14px; margin:0; padding:0 0 0 15px; list-style-type:square;}
  .ibeOverlayWindow .content ul li{ padding:7px 0 0 0;}

  .ibeOverlayWindow .content a.button{ font-size:14px; font-weight:bold; padding:5px 10px; margin-left:5px;}
  .ibeOverlayWindow .content a.button img{ padding:0 7px 0 0;}

  .ibeOverlayWindow .content .marginHelper{ margin-top:7px; display:block;}

  .ibeOverlayWindow img.cvcCode{ margin:-15px 0 5px; float:left;}

  .ibeOverlayWindow .content label {
    color:#717171;
  }

  .ibeOverlayWindow .content a#bookMore{
    position:absolute;
    right: 10px;
    bottom: 61px;
  }

  /*  =========================================================
   =2. process bar
  ========================================================= */
  #ibeProcessBar{ width:950px; height:40px; padding:5px; position:relative;}
  #ibeProcessBar .labels{ width:100%; height:100%; position:relative; margin:0; padding:0; list-style-type:none; overflow:hidden;}

  #ibeProcessBar .labels li {
    float:left;
    width:237px; height:100%;
  }
  #ibeProcessBar .labels li.step-1,
  #ibeProcessBar .labels li.step-4 {
    width:238px;
  }
  #ibeProcessBar .labels li a{ font-size:2.2em; border-right:1px solid; display:block; padding:0 15px; margin:8px 0 0;}
  #ibeProcessBar .labels li a{ cursor:default;}
  #ibeProcessBar .labels li.accessable a{ cursor:pointer;}
  /*active label should not have the border. but make sure to set the margin right to one pixel to compensate the missing one pixel border*/
  #ibeProcessBar .labels li.active a,
  #ibeProcessBar .labels li.accessable:active a,
  #ibeProcessBar .labels li.accessable:focus a,
  #ibeProcessBar .labels li.accessable:hover a
  { border:0; margin-right:1px;}
  #ibeProcessBar .labels li:last-of-type a{ border:0; margin-right:0;}
  #ibeProcessBar .labels li a span{ color:inherit; font-size:.64em; display:block; margin-top:-5px;}


  /*  =========================================================
   =3. single shopping cart
  ========================================================= */
  .shoppingCart{ width:960px; margin:60px 0 0;}
  .shoppingCart h2{ font-size:25px; margin:0 0 5px; font-weight:bold;}
  .shoppingCart h3{ font-size:20px; font-weight:bold; margin:20px 0 -10px; padding:0;}

  .shoppingCart a {
    text-decoration:underline;
  }
  .shoppingCart a:hover, .shoppingCart a:focus {
    text-decoration:none;
  }

  .shoppingCart a.button{ font-size:14px; font-weight:bold; padding:3px 10px; margin-left:5px; text-decoration:none;}
  .shoppingCart a.button img{ padding:0 7px 0 0;}

  .shoppingCart .shoppingCartContent{ width:946px; padding:7px; position:relative; margin:0 0 10px;}
  .shoppingCart .shoppingCartContent div.tableContainer{ padding:5px 10px; position:relative; overflow:hidden;}
  .shoppingCart .shoppingCartContent table{ width:100%; border-collapse:collapse;}

  .shoppingCart .shoppingCartContent table td.percent10{ width:10%;}
  .shoppingCart .shoppingCartContent table td.percent20{ width:20%;}
  .shoppingCart .shoppingCartContent table td.percent25{ width:25%;}
  .shoppingCart .shoppingCartContent table td.percent30{ width:30%;}
  .shoppingCart .shoppingCartContent table td.percent40{ width:40%;}

  .shoppingCart .shoppingCartContent table td.right{ text-align:right;}
  .shoppingCart .shoppingCartContent table td.center{ text-align:center;}

  .shoppingCart .shoppingCartContent table thead{ border-bottom:2px solid;}
  .shoppingCart .shoppingCartContent table thead tr td{ padding:5px 10px 5px 0; font-size:1.6em; font-weight:bold; vertical-align:top;}

  .shoppingCart .shoppingCartContent table tbody tr{ border-bottom:1px solid;}
  .shoppingCart .shoppingCartContent table tbody tr:last-of-type,
  .shoppingCart .shoppingCartContent table tbody tr:last-of-type td{ border:0;}
  .shoppingCart .shoppingCartContent table tbody td{ font-size:1.4em; vertical-align:top; padding:16px 10px 16px 0;}

  .shoppingCart .shoppingCartContent table tbody ul{ padding:0 0 0 10px; margin:0; list-style-type:square;}
  .shoppingCart .shoppingCartContent table tbody ul li{ padding:0 0 5px;}
  .shoppingCart .shoppingCartContent table tbody ul li:last-child{ padding:0;}

  .shoppingCart .shoppingCartContent table tbody span{ font-size:.85em; color:inherit;}
  .shoppingCart .shoppingCartContent table tbody span.italic{ font-style:italic;}
  .shoppingCart .shoppingCartContent table tbody span.tiny{ font-size:.7em;}
  .shoppingCart .shoppingCartContent table tbody span.price{ font-size:1.57em; font-weight:bold;}
  .shoppingCart .shoppingCartContent table tbody span.terms {
    display: block;
    padding-top: 5px;
    color: #717171;
    font-size: 0.7em;
  }

  .shoppingCart .shoppingCartContent table tbody ul a {
    color:#717171; text-decoration:underline;
  }
  .shoppingCart .shoppingCartContent table tbody ul a:hover, .shoppingCart .shoppingCartContent table tbody ul a.focus {
    text-decoration:none;
  }

  #CONT_content .mainContentArea.fullWidth .tipTeaserArea {
    padding-top:0;
    border:0;
  }

  /*optional components form*/
  .shoppingCart form.optionalComponents{ position:relative;}
  .shoppingCart form.optionalComponents fieldset{ width:350px;}
  .shoppingCart form.optionalComponents label span{ font-weight:bold; font-size:1.14em; float:right;}

  /*teaser area*/
  .shoppingCart .teaserArea{ margin-right:-20px; width:980px;}

  /*payment infos*/
  .shoppingCart.paymentInfos{ margin:30px 0 0;}
  .shoppingCart.paymentInfos ul{ margin:0; padding:0 0 0 15px; list-style-type:square;}
  .shoppingCart.paymentInfos ul li{ margin:0 0 10px; font-size:1.4em;}
  .shoppingCart.paymentInfos ul li .info{ font-style:italic; font-size:.85em;}

  /*payment infos*/
  .resumeInfo{ margin:30px 0 0;}
  .resumeInfo ul{ margin:0; padding:0 0 0 15px; list-style-type:square;}
  .resumeInfo ul li{ margin:0 0 10px; font-size:1.4em;}
  .resumeInfo ul li .info{ font-style:italic; font-size:.85em;}

  /*payment infos*/
  .shoppingCart.terms input {
    float:left;
  }
  .shoppingCart.terms .terms-text {
    overflow:hidden;
  }
  .shoppingCart.terms .terms-text p {
    padding:2px 0 8px 10px; margin:0;
  }
  .shoppingCart.terms .terms-text p.formerror,
  .shoppingCart.terms .terms-text p.formerror a {
    font-weight:bold;
  }

  .template_action_shoppingCart_paymentData #cart-price-total .priceinfo-container {
    float: right;
    margin-right: 30px;
  }
  .template_action_shoppingCart_paymentData #shoppingCartFunctions .priceInfos {margin: 0;}
  div#ibeinformer {
    text-align: right;
    color: #717171;
  }
  .priceinfo-container div#pricedisclaimer {
    text-align: right;
    clear: both;
  }

  .template_action_shoppingCart_checkUserData div#pricedisclaimer,
  .template_action_shoppingCart_shoppingCart div#pricedisclaimer {
    display: block;
    margin-left: 15px;
  }

  /*  =========================================================
   =4. shopping cart functions
  ========================================================= */
  #shoppingCartFunctions{ width:960px; margin:50px 0 0; position:relative;}

  #shoppingCartFunctions .priceInfos{ float:right; text-align:right; padding:5px 0 0; margin:0 30px 0 0; position:relative;}
  #shoppingCartFunctions .priceInfos .normal{ font-size:1.2em;}
  #shoppingCartFunctions .priceInfos .price{ font-size:3em; font-weight:bold; text-decoration:underline;}

  #shoppingCartFunctions .button{ font-size:14px; font-weight:bold; padding:5px 10px; float:left; margin:15px 5px 0 0; position:relative;}
  #shoppingCartFunctions .button img{ margin:0 7px 0 0;}

  #shoppingCartFunctions .bigButton{ font-size:1.8em; font-weight:bold; padding:15px 10px; float:right; margin:5px 0 0;}

  #shoppingCartFunctionsSmall{ width:960px; margin:10px 0 20px;}
  #shoppingCartFunctionsSmall .priceInfos{ float:right; text-align:right; font-size:3em; font-weight:bold;}
  #shoppingCartFunctionsSmall .bigButton{ font-size:1.8em; font-weight:bold; padding:15px 10px; float:right; margin:5px 0 0;}
  #shoppingCartFunctionsSmall .button img{ margin:0 7px 0 0;}

  /* booking help */
  #shoppingCartFunctions .bookingHelp {
    width:960px; overflow:hidden;
    padding:10px 0 20px 0; margin:20px 0 0;
    text-align:left;
  }

  /* booking help structure */
  #shoppingCartFunctions .bookingHelp .half {
    width:470px; height:151px;
    padding:21px 0 0 0;
  }
  #shoppingCartFunctions .bookingHelp .half.left {
    float:left;
  }
  #shoppingCartFunctions .bookingHelp .half.right {
    float:right;
  }
  #shoppingCartFunctions .bookingHelp .content {
    position:relative;
    padding:0 21px 0 77px;
  }

  /* booking help text-formatting */
  #shoppingCartFunctions .bookingHelp .bold {
    font-size:1.6em; font-weight:bold;
  }
  #shoppingCartFunctions .bookingHelp .bold a {
    font-weight:bold;
  }
  #shoppingCartFunctions .bookingHelp .normal {
    font-size:1.4em;
  }
  #shoppingCartFunctions .bookingHelp .large {
    font-size:2.2em;
  }
  #shoppingCartFunctions .bookingHelp .light {
    font-size:1.2em; font-style:italic;
  }
  #shoppingCartFunctions .bookingHelp img {
    float:left;
    margin:0 10px 0 0;
  }
  #shoppingCartFunctions .bookingHelp ul {
    list-style:square;
    padding:0 0 0 18px;
    font-size:1.1em; font-style:italic;
  }
  #shoppingCartFunctions .bookingHelp li {
    padding:0 0 2px 0;
  }
  #shoppingCartFunctions .bookingHelp ul a {
    text-decoration:underline;
  }
  #shoppingCartFunctions .bookingHelp .trusted-info {
    display:none;
  }
  .trusted-info {
    width:420px;
    text-align:left;
  }
  .trusted-info a {
    color:#000; text-decoration:underline;
  }

  #shoppingCartFunctions .bookingHelp ul.creditcards {
    position:absolute; top:5px; right:20px;
    padding:0; margin:0;
    list-style:none;
  }
  #shoppingCartFunctions .bookingHelp ul.creditcards li {
    float:left;
    display:block; width:53px; height:33px;
    padding:0; margin:0 0 0 10px;
    text-indent:-9999px;
  }


  /*  =========================================================
   =5. user data output
  ========================================================= */
  .shoppingCart .userDataOutput{
    width:100%;
    padding:0 0 20px; margin:0 0 20px;
    border-bottom:1px solid;
  }
  .shoppingCart .userDataOutput:first-of-type{
    margin-top:25px;
  }
  .shoppingCart .userDataOutput:last-of-type{
    padding-bottom:0; margin-bottom:0;
    border-bottom:0;
  }

  .shoppingCart .userDataOutput .line{
    margin:0 0 10px 0;
  }

  .shoppingCart .userDataOutput .mainLabel{
    float:left;
    width:150px;
    margin:0 40px 0 0;
    text-align:left;
  }

  .shoppingCart .userDataOutput .group{
    overflow:hidden;
  }

  .shoppingCart .userDataOutput .section{
    float:left;
    width:auto;
    margin:0 40px 10px 0;
  }
  .shoppingCart .userDataOutput .label{
    font-size:1.2em;
    font-style:italic;
  }
  .shoppingCart .userDataOutput .data{
    font-size:1.6em;
  }

  .shoppingCart .userDataOutput .section .data{
    width:auto;
  }
  .shoppingCart .userDataOutput .section .data.textfield{
    width:770px;
  }

  .shoppingCart form.optionalComponents{
    margin:0;
    padding:0 0 0 15px;
    list-style-type:square;
  }
  .shoppingCart form.optionalComponents li{
    width:350px;
    font-size:1.4em;
  }
  .shoppingCart form.optionalComponents li span{
    font-weight:bold;
    font-size:1.14em;
    float:right;
  }


  /*  =========================================================
   =6. price category overlay
  ========================================================= */

  #hotelsForPriceCategory {
    margin: 10px;
    text-align: left;
  }
  #hotelsForPriceCategory > h1 {
    color: #717171;
    font-size: 3em;
    margin: 0 0 5px;
  }
  #hotelsForPriceCategory > h2 {
    color: #E3001A;
    font-size: 2em;
    margin: 0 0 10px;
  }

  #hotelsForPriceCategory > ul {
    list-style: disc outside none;
    margin: 20px;
    padding: 0;
  }
  #hotelsForPriceCategory > ul > li {
    font-size: 12px;
    margin: 8px 0;
  }
  #hotelsForPriceCategory > ul > li > a {
    background: url("/portal/img/objects/allg.link.arrow.right.gif") no-repeat scroll right center transparent;
    color: #717171;
    padding: 0 12px 0 0;
    text-decoration: underline;
  }






  .ui-effects-transfer {
    z-index:1000 !important;
    display:block; min-width:40px !important; height:40px !important;
    background:url('../../../img/branding/default/addToCart.gif') center center no-repeat;
  }


  /*  =========================================================
   =8. Contracting party
  ========================================================= */
  .contractingPartyInfo{
    width: 40%;
    float: right;
    margin-top: -11px;
  }
  .paymentForm{
    width: 60%
  }
}