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

  /*  =========================================================
  0. basic config
  1. metanavi
  2. topnavi
  3. keyvisual
  4. keyvisual search
  5. map teaser
  6. large map
  7. language setter
  8. auto-complete widget
  9. cart
  10. fixed navigation style (sticky navigation)
  11. newsticker
  ========================================================== */


  /*  =========================================================
   =0. basic config
      (header style config and loose elements like logo)
  ========================================================= */
  body > .header{
    width:100%; height:auto; margin-top: 85px;
    z-index:3; position:absolute; top: -85px; left: 0;
    min-width: 960px;
  }
  .header #bremenLogo{ width:200px; height:99px; position:absolute; top:0; left:0px;}
  .header #bremenLogo > img.small{ display: none;}

  .header #officialBremenShop {
    position: absolute; top: 104px; left: 0;
    width: 200px; height: 51px
  }
  .header #officialBremenShop > a {
    display: block; height: 46px;
    padding: 2px 2px 2px 60px;
    background: url('/portal/img/environment/trustedShop.png') scroll no-repeat 6px 2px #a6a6a6;
    background-color: rgba(166, 166, 166, 0.7);
    color: #fff;
    font-size: 1.4em; font-weight: bold; text-align: left;
  }
  .header #officialBremenShop > a > strong {
    font-weight: bold;
    font-size: 1.3em;
  }
  .header.fixed #officialBremenShop {display: none;}


  /*  =========================================================
   =1. metanavi
  ========================================================= */
  .header #metanaviTop{ width:100%; height:35px;}

  #metanaviTopContainer {
    float:right;
  }
  #metanaviTopContainer ul {
    list-style:none;
    padding:5px 20px 0 0; margin:0;
  }
  #metanaviTopContainer li {
    float:left;color:#fff;
    margin:0;font-weight: bold;
    font-size: 14px;
    line-height: 12px;
    padding: 5px 10px;
    border-right:1px solid #fff;
  }
  #metanaviTopContainer li:last-child {
    border-right:0;
  }
  #metanaviTopContainer li a {
    color:#fff;
    font-size: 16px;
    line-height: 13px;
    font-weight: bold;
  }

  .contentArea.noShoppingCart #metanaviTopContainer ul {
    padding-right: 0;
  }

  /*contactAccesTabs*/
  #tabsContactAccess{ float: right; font-size: 14px; font-weight: 700; color: white; line-height: 22px; padding: 6px 0 0 0; margin: 0 10px 0 0;}
  #tabsContactAccess > span{ display: block; float: left;}
  #tabsContactAccess > a{ display: block; float: left; width: 24px; height: 23px; background-image: url(../../../img/branding/default/header.contactAccessButtons.png);}
  #tabsContactAccess > a.phone{ background-position: 0 0;}
  #tabsContactAccess > a.phone:hover,
  #tabsContactAccess > a.phone:active,
  #tabsContactAccess > a.phone:focus,
  #tabsContactAccess > a.phone.active
  { background-position: 0 -23px;}
  #tabsContactAccess > a.callback{ background-position: 0 -92px;}
  #tabsContactAccess > a.callback:hover,
  #tabsContactAccess > a.callback:active,
  #tabsContactAccess > a.callback:focus,
  #tabsContactAccess > a.callback.active
  { background-position: 0 -115px;}
  #tabsContactAccess > a.contact{ background-position: 0 -46px;}
  #tabsContactAccess > a.contact:hover,
  #tabsContactAccess > a.contact:active,
  #tabsContactAccess > a.contact:focus,
  #tabsContactAccess > a.contact.active
  { background-position: 0 -69px;}
  #tabsContactAccess > a.bremenpro{ background-position: 0 -138px;}
  #tabsContactAccess > a.bremenpro:hover,
  #tabsContactAccess > a.bremenpro:active,
  #tabsContactAccess > a.bremenpro:focus,
  #tabsContactAccess > a.bremenpro.active
  { background-position: 0 -161px;}


  /*  =========================================================
   =2. topnavi
  ========================================================= */
  .header .nav {
    position: absolute; top: 0; left: 215px;
    padding: 0
  }
  .header .nav ul {
    position: relative;
    list-style-type: none;
    margin: 0; padding: 0;
  }
  .header .nav ul li {
    position: relative; float: left;
    width: 135px;
    margin: 0; padding: 0;
  }
  .header .nav ul > li.map {
    width: 160px;
    margin-left: 10px; padding-left: 9px;
    border-left: 1px solid #a6a6a6;
    background: url("/portal/img/branding/default/topNavi.map.png") no-repeat scroll 15px 15px rgba(0, 0, 0, 0);
  }
  .header .nav ul > li.map > a.top {
    padding-left: 60px;
  }
  .header .nav ul > li.microsite.default {
    width: 160px;
    background: url("/portal/img/branding/default/topNavi.congress.png") no-repeat scroll 15px 15px rgba(0, 0, 0, 0);
  }
  .header .nav ul > li.microsite.congress {
    width: 160px;
    background: url("/portal/img/branding/default/topNavi.tourism.png") no-repeat scroll 15px 9px rgba(0, 0, 0, 0);
  }
  .header .nav ul > li.microsite > a.top {
    padding-left: 60px;
  }
  .header .nav ul > li > a.top {
    display: block;
    height: 60px;
    margin: 0 1px 0 0; padding: 10px 10px 0;
    font-size: 18px; font-weight: bold; text-align: center;
  }

  /*subnavi*/
  .header .nav .nav{ display:none; position:absolute; padding:0 4px 4px; right:auto; top:auto; white-space:nowrap; left:-4px; border-top:4px transparent solid;}
  .header li:hover .nav{ display:block;}
  .header li.last .nav{ right:0; left:auto;}
  .header .nav .nav ul{ overflow:visible;}
  .header .nav .nav ul li{ display:block; float:none; padding:0 10px; position:static; width:auto;}
  .header .nav .nav ul li.first{ padding-top:10px;}
  .header .nav .nav ul li a{ margin:0; position:relative; font-size:14px; padding:10px 0 10px 10px; border-bottom:1px solid; display:block; background:0 center no-repeat; text-align: left;}
  .header .nav .nav ul li.last a{ border:0;}

  /*mapTypeSwitch*/
  #mapnavigation .mapTypeSwitch{ position:absolute; top: 26px; left: 100px; width:500px; text-align:right;}
  #mapnavigation .mapTypeSwitch a{ background:white; border:2px solid; white-space:nowrap; padding:5px 10px; margin:0 5px 0 0; font-size:11px; font-weight:bold; color:#717171;}
  #mapnavigation .mapTypeSwitch a.active{ background:#717171; color:white;}

  #headerNavigation {position: relative; width: 100%; height: 70px;}

  /*wrapper around top-navi*/
  #headerNavigation > .naviWrapper {
    position: absolute; left: 50%;
    width: 960px;
    margin: 0 0 0 -480px;
  }
  #headerNavigation .banderoleWrapper {
    min-width: 960px;
    width: 100%;
    overflow: hidden;
    height: 80px;
  }
  #headerNavigation .banderoleStaticWrapper {
    margin: 0 auto;
    width: 960px;
    position: relative;
  }
  .header.fixed #headerNavigation > .banderoleWrapper .banderole {
    display: none;
  }
  #headerNavigation > .banderoleWrapper .banderole {
    position: absolute; top: 0;
    height: 70px;
    background-color: #fff;
    z-index: -10;
  }

  #headerNavigation > .banderoleWrapper .banderole.left {
    right: 980px;
    width: 1000px;
    box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.6); -moz-box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.6); -webkit-box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.6);
  }
  #headerNavigation > .banderoleWrapper .banderole.right {
    right: -1260px;
    width: 2000px;
    box-shadow: -2px 2px 3px rgba(50, 50, 50, 0.6); -moz-box-shadow: -2px 2px 3px rgba(50, 50, 50, 0.6); -webkit-box-shadow: -2px 2px 3px rgba(50, 50, 50, 0.6);
  }
  /*  =========================================================
   =3. keyvisual
  ========================================================= */
  body.template_index #keyvisual {height: 850px;}
  #keyvisual{ width:100%; height:230px; position:relative; z-index:1; overflow:hidden;}

  #keyvisual #skyForLiveKeyvisual{ width:100%; height:100%; top:0; left:0; position:absolute;}

  #keyvisual > .contentArea {
    position: absolute; top: 0; left: 50%;
    margin-left: -480px;
    width: 960px;
  }

  #keyvisual .swush{ width:100%; height:200px; bottom:0; left:0; position:absolute;}

  #keyvisual .galleryItems {
    width: 100%;
    margin: 0; padding: 0;
  }
  #keyvisual .galleryItems > li {
    position: relative;
    display: block; height: 850px;
    background: no-repeat scroll center center transparent;
    background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;
  }
  #keyvisual .galleryItems img {display: none;}

  #keyvisual .galleryItems .hgroup {
    position: absolute; top: 200px; left: 50%;
    width: 960px; min-height: 100px;
    margin: 0 auto;
    z-index: 10;
  }
  #keyvisual .galleryItems .hgroup a {
    color: #fff;
    font-family: 'DesyrelRegular',Arial,Helvetica,Verdana,sans-serif;
  }
  #keyvisual .galleryItems .hgroup > h1,
  #keyvisual .galleryItems .hgroup > h2 {
    position: absolute;
    margin: 0; padding: 0;
    border: 1px solid transparent;
    text-shadow: 2px 2px 2px #999;
    background-color: #a6a6a6;
    transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform:rotate(-4deg);
  }
  #keyvisual .galleryItems .hgroup > h1 {top: 0; left: -390px; padding: 4px 16px; font-size: 5em;}
  #keyvisual .galleryItems .hgroup > h2 {top: 60px; left: -300px; padding: 3px 12px; font-size: 4em;}

  #keyvisual .galleryItems .hgroup > a.button {
    position: absolute; display: block;
    margin: 0; padding: 2px 20px;
    font-size: 1.8em;
    border: 1px solid transparent;
    background: url("../../../img/branding/default/bg.button.gif") repeat-x scroll 0 0 #AF0014;
    transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform:rotate(-4deg);
  }
  #keyvisual .galleryItems .hgroup > a.button.h1 {top: 71px; left: -310px;}
  #keyvisual .galleryItems .hgroup > a.button.h2 {top: 117px; left: -270px;}

  #keyvisual .galleryItems .description {
    display: none;
    position: absolute; left: 50%;
    width: 960px;
    margin: 0 auto; padding: 4px;
    z-index: 5;
  }
  #keyvisual .galleryItems .description.h1 {top: 275px;}
  #keyvisual .galleryItems .description.h2 {top: 310px;}
  #keyvisual .galleryItems .description .roundedBorder.roundedBorderTop {
    left: -375px;
    width: 378px;
    box-shadow: 0 1px 2px #000000; -moz-box-shadow: 0 1px 2px #000000; -webkit-box-shadow: 0 1px 2px #000000;
  }
  #keyvisual .galleryItems .description > .body {
    position: relative; left: -375px;
    width: 350px;
    padding: 20px 10px 10px 10px;
    text-align: left;
    background-color: #fff;
  }
  #keyvisual .galleryItems .description > .body > a.close {
    position: absolute; top: -10px; right: -10px;
    display: block; width: 21px; height: 21px;
    background: url("/portal/img/branding/default/button.removeRoom.png") repeat scroll 0 0 transparent;
  }
  #keyvisual .galleryItems .description > .body > h3 {
    margin: 0 0 10px 0;
    font-size: 2em; font-weight: bold; color: #717171;
  }
  #keyvisual .galleryItems .description > .body > p {
    margin: 10px 0 0 0;
    color: #717171;
  }
  #keyvisual .galleryItems .description > .body > p > a {
    padding: 0 10px 0 0;
    text-decoration: underline;
    color: #515151;
    background: url("/portal/img/objects/allg.link.arrow.right.gif") no-repeat scroll right center rgba(0, 0, 0, 0);
  }

  #keyvisual .dots {
    position: absolute; bottom: 135px; left: 50%;
    width: 960px; height: 16px;
    margin: 0 auto; padding: 0;
    z-index: 10;
  }
  #keyvisual .dots > li {
    display: block; float: left;
    margin: 0 5px;
  }
  #keyvisual .dots > li > a {
    display: block; width: 16px; height: 16px;
    background-color: rgb(220, 220, 220); background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid #fff;
    border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
    box-shadow: 2px 2px 3px #000; -moz-box-shadow: 2px 2px 3px #000; -webkit-box-shadow: 2px 2px 3px #000;
  }
  #keyvisual .dots > li > a.active {
    border: 1px solid #fff;
    background-color: #fff;
  }

  #keyvisual .coverFlow {
    position: absolute; top: 50%; left: 50%;
    height: 78px;
    margin: -78px auto 0;
    z-index: 101;
  }
  #keyvisual .coverFlow > a {
    position: absolute; top: 0;
    display: block; width: 51px; height: 78px;
    opacity: 0.75;
  }
  #keyvisual .coverFlow > a:active,
  #keyvisual .coverFlow > a:hover {
    opacity: 1;
  }
  #keyvisual .coverFlow > a.prev {
    left: -480px;
    background-image: url("/portal/img/objects/mainImage.prevArrow.png");
  }
  #keyvisual .coverFlow > a.next {
    left: 430px;
    background-image: url("/portal/img/objects/mainImage.nextArrow.png");
  }

  /*  =========================================================
   =4. keyvisual search
  ========================================================= */
  #keyvisual .keyvisualSearch{ position:absolute; top:130px; right:0;}
  #keyvisual .keyvisualSearch h4{ font-family:'DesyrelRegular', Arial, Helvetica, Verdana, sans-serif; font-size:23px; margin:0; padding:0;}

  #keyvisual .keyvisualSearch form{ padding:4px; position:relative; z-index:10; max-height:25px;}
  #keyvisual .keyvisualSearch form fieldset{ width:100%; height:25px; position:relative;}
  #keyvisual .keyvisualSearch input.text{ border:0; font-size:14px; font-style:normal; height:25px; float:left; background:5px center no-repeat;}
  #keyvisual .keyvisualSearch button{ height:25px; width:85px; float:right; margin:0; padding:0; font-family:'DesyrelRegular', Arial, Helvetica, Verdana, sans-serif; font-size:20px; font-weight:normal;}


  /*  =========================================================
   =5. map teaser
  ========================================================= */
  #keyvisual .mapTeaser{ width:230px; height:55px; position:absolute; top:150px; left:0;}
  #keyvisual .mapTeaser .image{ position:absolute;}
  #keyvisual .mapTeaser h4,
  #keyvisual .mapTeaser h5
  { position:absolute; left:60px; margin:0; padding:0;}
  #keyvisual .mapTeaser h4, #keyvisual .mapTeaser h4 a{ top:25px; font-family:'DesyrelRegular', Arial, Helvetica, Verdana, sans-serif; font-size:22px;}
  #keyvisual .mapTeaser h5, #keyvisual .mapTeaser h5 a{ top:10px;font-size:14px; font-weight:bold;}


  /*  =========================================================
   =6. large map
  ========================================================= */
  #largeMapContainer{ width:100%; position:relative; display:none; z-index:1;}
  #largeMapContainer .swush{ width:100%; height:215px; bottom:0; left:0; position:absolute; z-index:100; display:none;}

  #mapLarge {
    width: 100%;
  }

  /*marker classes*/
  .mtk-print-marker{ display:none;}

  .imx-cluster > span {
    display: block;
    width: 100%;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
  .imx-cluster-small > span {
    height: 61px;
    font-size: 14px;
    line-height: 61px;
  }
  .imx-cluster-large > span {
    height: 86px;
    font-size: 16px;
    line-height: 86px;
  }

  /*map closer*/
  #mapnavigation{ display:none;}
  #mapnavigation a.mapCloser{ padding-left:25px; background-position:10px center; background-repeat:no-repeat;}

  /*map legend*/
  #largeMapContainer .mapLegend{ position:absolute; top:125px; right:0; padding:6px; z-index:100; text-align:left;}
  #largeMapContainer .mapLegend .legend{ position:relative; background:white; padding:15px 7px 0;}
  #largeMapContainer .mapLegend .legend .preloader{ visibility:hidden;}
  #largeMapContainer .mapLegend .section{ width:268px;}
  #largeMapContainer .mapLegend .section.border{ border-bottom:1px solid; padding-bottom:10px; margin-bottom:10px;}

  #largeMapContainer .mapLegend .mapLegendTabs{ position:absolute; left:15px; top:-30px;}
  #largeMapContainer .mapLegend .mapLegendTabs a{ float:left; padding:5px 10px 30px 10px; margin:10px 5px 0 0; font-size:14px; font-weight:bold; -moz-transition: all .2s ease-out;}
  #largeMapContainer .mapLegend .mapLegendTabs a:last-of-type{ margin-left:0px;}
  #largeMapContainer .mapLegend .mapLegendTabs a.active,
  #largeMapContainer .mapLegend .mapLegendTabs a:hover
  { margin-top:0px;}

  #largeMapContainer .mapLegend h3{ font-size:16px; font-weight:bold; padding:0; margin:0 0 5px 3px;}
  #largeMapContainer .mapLegend .routePlanner {
    position: relative;
    max-height: 25px;
    padding: 4px;
    margin: 0 0 5px 0;
  }
  #largeMapContainer .mapLegend form fieldset{ height:25px; position:relative;}
  #largeMapContainer .mapLegend input.text{ border:0; background:transparent; font-size:14px; font-style:normal; height:25px; width:215px; }
  #largeMapContainer .mapLegend .routePlanner input.text{ width:250px; border: 3px solid #C4C4C4; }
  #largeMapContainer .mapLegend button{ height:25px; width:35px; float:right; margin:0; padding:0 0 0 5px;}

  #largeMapContainer .mapLegend p.routeCalcDisclaimer { padding: 0 4px; font-size: 12px; font-style: italic; color: #717171; }

  #largeMapContainer .mapLegend .section.nav{ overflow:auto;}
  #largeMapContainer .mapLegend .section.nav#routeplaner_panel{ display:block!important;}
  #largeMapContainer .mapLegend .section.nav#routeplaner_panel .adp-placemark{ margin:0 0 20px 0 !important;}
  #largeMapContainer .mapLegend .nav ul{ padding:0 0 0 10px; margin:0; list-style-type:none;}
  #largeMapContainer .mapLegend .nav ul li{ margin:0 0 10px;}
  #largeMapContainer .mapLegend .nav ul li span{ font-weight:bold; background:2px 3px no-repeat; display:block; padding:0 0 0 13px; margin:0 0 5px;}
  #largeMapContainer .mapLegend .nav ul li.active span{ background:0 5px no-repeat;}
  #largeMapContainer .mapLegend .nav ul li span,
  #largeMapContainer .mapLegend .nav ul li label
  { font-size:12px; cursor:pointer;}
  #largeMapContainer .mapLegend .nav ul li ul{ display:none; padding:0; margin:0 0 20px;}
  #largeMapContainer .mapLegend .nav ul li ul li{ background:none; padding:0; margin:0 0 5px;}

  /*infoboard*/
  .mtk-infowindow{ border:0 white solid;}
  #largeMapContainer .mtk-infowindow{ overflow:hidden; padding:3px; text-align:left; cursor:default;}
  #largeMapContainer .mtk-infowindow .infoBoard{ width:375px!important;}
  #largeMapContainer .mtk-infowindow .header{ width:100%; height:30px;}
  #largeMapContainer .mtk-infowindow .header a.windowCloser{ width:18px; height:18px; float:right; margin:6px; background:0 0 no-repeat;}
  #largeMapContainer .mtk-infowindow .header h4{ font-size:14px; font-weight:bold; padding:6px 0 0 10px; margin:0; font-style:italic;}

  #largeMapContainer .mtk-infowindow .header ul{ margin:0; padding:0; list-style-type:none;}
  #largeMapContainer .mtk-infowindow .header ul li{ float:left;}
  #largeMapContainer .mtk-infowindow .header ul li a{ font-size:14px; font-weight:bold; display:block; height:17px; padding:6px 15px 7px;}

  #largeMapContainer .mtk-infowindow .contentCollection{ width:100%; overflow:hidden;}
  #largeMapContainer .mtk-infowindow .content{ float:left; width:355px;  padding:10px 10px 5px;}

  #largeMapContainer .mtk-infowindow .content .image{ width:100px; overflow:hidden; background:white; float:left; margin:0 8px 8px 0;}
  #largeMapContainer .mtk-infowindow .content .image img{ width:100px;}

  #largeMapContainer .mtk-infowindow .content .webcam{ width:355px; overflow:hidden;}
  #largeMapContainer .mtk-infowindow .content .webcam img{ width:100%;}

  #largeMapContainer .mtk-infowindow .content h3{ font-size:16px; font-style:italic; margin:5px 0 8px;}
  #largeMapContainer .mtk-infowindow .content h3 span.info{ font-size:14px; font-weight:bold;}
  #largeMapContainer .mtk-infowindow .content h3 span.stars{ background:0 0 repeat-x; height:12px; display:block;}
  #largeMapContainer .mtk-infowindow .content p{ font-size:12px; margin:0 0 10px;}
  #largeMapContainer .mtk-infowindow .content p a{ text-decoration:underline;}
  #largeMapContainer .mtk-infowindow .content a.text{ float:right; font-style:italic; font-size:12px; text-decoration:underline; margin:0 0 0 20px;}

  #largeMapContainer .mtk-infowindow .content ul{ padding:0 0 0 12px; margin:0; list-style-type:square;}
  #largeMapContainer .mtk-infowindow .content ul li{ margin:0 0 5px; font-size:12px; }
  #largeMapContainer .mtk-infowindow .content ul li a{ text-decoration:underline;}
  #largeMapContainer .mtk-infowindow .content ul li span.price{ font-weight:bold; float:right;}

  #largeMapContainer .mtk-infowindow .header{ background:0 0 repeat-x;}

  #largeMapContainer .mtk-infowindow .mtk-routeplanner-info{ width:auto!important; font-size:14px; margin:0 5px; padding:5px 5px 5px 10px; cursor:pointer; background:0 center no-repeat;}
  #largeMapContainer .mtk-infowindow .mtk-infowindow-close{ display:none;}


  /*geo search*/
  .mtk-searchfield{ position:relative!important; z-index:100; opacity:.9; width:200px; margin:46px auto 0; padding:0 181px 0 579px; text-align:left;}
  .mtk-searchfield form{ width:200px; height:26px; margin:2px; background:#fff; border:none;}
  .mtk-searchfield form .mtk-location{ display: block; float: left; width: 13px; height: 13px; background: url("http://static.toursprung.com/images/layout/white/location.png") 0px 0px no-repeat; text-indent: -999999px; margin: 7px 6px 6px 6px; z-index: 130; position: relative;}

  .mtk-searchfield form input[type="text"]{ border:none !important; width:140px; height:24px; font:normal 12px Arial, Helvetica, sans-serif; color:#969696!important; float:left; background:#fff; z-index:120; position:relative;}

  .mtk-searchfield form .mtk-submitbutton{ border:none; width:32px; height:26px; border-left:1px solid #d3d3d3; float: left; background: url("http://static.toursprung.com/images/layout/white/searchbutton.png") center center no-repeat; cursor: pointer;}
  .ui-autocomplete{ background: #fff; width: 188px; border: 1px solid #cbcaca; border-bottom: 1px solid #7d7e7c; border-top: 1px solid #e5e5e5;list-style-type: none; font: normal 11px Arial, Helvetica, sans-serif; color: #4c4c4c; margin-top: -20px !important; position: relative !important;}

  .ui-autocomplete li a{ padding: 5px; display: block; border-bottom: 1px solid #e5e5e5;}
  .ui-autocomplete li a:hover,
  .ui-autocomplete li a.ui-state-hover
  { cursor: pointer; background: #e3e4e2; background: -moz-linear-gradient(top, #fff 0%, #e3e4e2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#e3e4e2)); background: -webkit-linear-gradient(top, #fff 0%,#e3e4e2 100%); background: -o-linear-gradient(top, #fff 0%,#e3e4e2 100%); background: -ms-linear-gradient(top, #fff 0%,#e3e4e2 100%); background: linear-gradient(top, #fff 0%,#e3e4e2 100%); border-bottom: 1px solid #ccc; -moz-border-radius: 0px !important; -webkit-border-radius: 0px !important; border-radius: 0px !important;}

  .ui-autocomplete li:last-child a,
  .ui-autocomplete li:last-child a:hover,
  .ui-autocomplete li:last-child a.ui-state-hover
  { border-bottom: none;}


  /*  =========================================================
   =7. language setter
  ========================================================= */

  #languageSetter {position: absolute; left: 0; top: 3px; padding: 5px 0;}

  #languageSetter img {margin: -2px 2px;}
  #languageSetter a {text-decoration: underline;}
  #languageSetter span, #languageSetter li {font-size: 12px;}

  #languageSetter ul {display: none; position: absolute; left: 0; top: 11px; width: 145px; padding: 5px 15px 10px; z-index: 10;}
  #languageSetter:hover ul {display: block;}
  #languageSetter.congress ul {width: 100px;}
  #languageSetter li {margin: 10px 4px 0; padding: 5px; list-style: none outside none;}
  #languageSetter li a {text-decoration: none;}

  #languageSetter .flag {padding: 0 0 0 25px; background: scroll no-repeat 0 3px transparent;}
  #languageSetter .eu {background-image: url(/portal/img/environment/flags/eu.png);}
  #languageSetter .de {background-image: url(/portal/img/environment/flags/de.png);}
  #languageSetter .en {background-image: url(/portal/img/environment/flags/en.png);}
  #languageSetter .fr {background-image: url(/portal/img/environment/flags/fr.png);}
  #languageSetter .it {background-image: url(/portal/img/environment/flags/it.png);}
  #languageSetter .es {background-image: url(/portal/img/environment/flags/es.png);}
  #languageSetter .cn {background-image: url(/portal/img/environment/flags/cn.png);}
  #languageSetter .sv {background-image: url(/portal/img/environment/flags/sv.png);}
  #languageSetter .nl {background-image: url(/portal/img/environment/flags/nl.png);}
  #languageSetter .ru {background-image: url(/portal/img/environment/flags/ru.png);}
  #languageSetter .pd {background-image: url(/portal/img/environment/flags/pd.png);}
  #languageSetter .pl {background-image: url(/portal/img/environment/flags/pl.png);}
  #languageSetter .da {background-image: url(/portal/img/environment/flags/da.png);}
  #languageSetter .no {background-image: url(/portal/img/environment/flags/no.png);}
  #languageSetter .lv {background-image: url(/portal/img/environment/flags/lv.png);}
  #languageSetter .fi {background-image: url(/portal/img/environment/flags/fi.png);}
  #languageSetter .lt {background-image: url(/portal/img/environment/flags/lt.png);}
  #languageSetter .jp {background-image: url(/portal/img/environment/flags/jp.png);}


  /*  =========================================================
   =8. auto-complete widget
  ========================================================= */

  body .ui-autocomplete {margin: 0; padding: 0; background: none repeat scroll 0 0 transparent;}
  body .ui-autocomplete {
    overflow: hidden; border: 4px solid;
  }

  body.template_imxCMS_search .ui-autocomplete {width: 612px !important;}

  body .ui-autocomplete .ui-menu-item {list-style: none outside none; padding: 2px 5px !important; font-size: 12px; text-align: left;}
  body .ui-autocomplete .btz-menu-item {list-style: none outside none; padding: 5px !important; font-size: 12px; text-align: left;}

  body .ui-autocomplete li.ui-autocomplete-category {padding: 3px 7px !important; font-size: 13px; clear: both; text-align: left;}

  body .ui-autocomplete .ui-menu-item span.hits {float: right;}
  body .ui-autocomplete .ui-menu-item .subline {position: relative; top: -6px; display: block; width: 190px; height: 28px; overflow: hidden; font-size: 10px;}

  body .ui-autocomplete .btz-menu-item img.itemImage {margin: 0 10px 0 0; float: left;}
  body .ui-autocomplete .btz-menu-item h5 {margin: 0; padding: 0; font-size: 12px;}
  body .ui-autocomplete .btz-menu-item h5 a {text-decoration: underline;}
  body .ui-autocomplete .btz-menu-item .subline {display: block; width: 190px; height: 28px; overflow: hidden; font-size: 11px;}
  body .ui-autocomplete .btz-menu-item .richItem {position: relative; height: 50px; margin: 0;}
  body .ui-autocomplete .btz-menu-item .stars {position: absolute; top: 20px; right: 15px; height: 15px; background: url(/portal/img/branding/default/icon.star.png) scroll repeat-x 0 0 transparent;}
  body .ui-autocomplete .btz-menu-item .stars.stars-1 {width: 17px;}
  body .ui-autocomplete .btz-menu-item .stars.stars-2 {width: 34px;}
  body .ui-autocomplete .btz-menu-item .stars.stars-3 {width: 51px;}
  body .ui-autocomplete .btz-menu-item .stars.stars-4 {width: 68px;}
  body .ui-autocomplete .btz-menu-item .stars.stars-5 {width: 85px;}
  body .ui-autocomplete .btz-menu-item .superior {position: absolute; top: 12px; right: 0px; font-size: 14px; font-family: 'DesyrelRegular', Arial, Helvetica, Verdana, sans-serif;}
  body .ui-autocomplete .btz-menu-item .price {position: absolute; top: 20px; right: 15px; font-size: 18px; font-weight: bold;}

  body .ui-autocomplete .ui-menu-item a.ui-corner-all { border-bottom: 1px solid; width: 95%;}
  body .ui-autocomplete .ui-menu-item:last-child a.ui-corner-all {border-bottom: 0 none;}

  body .ui-autocomplete .ui-menu-item a.ui-state-hover,
  body .ui-autocomplete .ui-menu-item a.ui-state-active
  {margin: 0; background-image: none; border: 0 none; border-bottom: 1px solid #cdcdcd; width: 95%;}


  /*  =========================================================
  =9. cart
  ========================================================= */
  .header #metanaviTop .shoppingCartLink {
    float:right;
    border:4px solid #8f0010; border-top:0; border-bottom:0;
  }
  .header #metanaviTop .shoppingCartLink span {
    display:block; height:30px;
    padding:5px 5px 0 25px; margin:0;
    background-color:#8f0010; background-position:5px center; background-repeat:no-repeat;
    font-size:14px; line-height:25px; font-family:'ArialNarrow', Arial, Helvetica, Verdana, sans-serif;
  }
  .header #metanaviTop .shoppingCartLink.active {
    border:4px solid rgba(0, 0, 0, 0.2); border-top:0; border-bottom:0;
  }
  .header #metanaviTop .shoppingCartLink.active span {
    background-color:#fff;
  }

  .shoppingCartTooltip {
    overflow:hidden;
    border:4px solid rgba(0, 0, 0, 0.2); border-top:0;
    background:none;
  }
  .shoppingCartTooltip .ui-tooltip-content {
    padding:5px 15px 10px; margin:0;
    background:#fff;
    color:#515151; font-size:12px; line-height:1.25em;
  }
  .shoppingCartTooltip .ui-tooltip-content h3,
  .shoppingCartTooltip .ui-tooltip-content p {
    padding:7px 0 3px 0; margin:0;
    font-size:12px;
  }
  .shoppingCartTooltip .ui-tooltip-content h3 {
    font-weight:bold;
  }
  .shoppingCartTooltip .ui-tooltip-content ul {
    list-style-type:square;
    padding:0 0 15px 15px; margin:0;
  }
  .shoppingCartTooltip .ui-tooltip-content li {
    padding:7px 0 0 0; margin:0;
  }
  .shoppingCartTooltip .ui-tooltip-content a {
    color:#e3001a;
  }

  .shoppingCartTooltip .ui-tooltip-content .content {
    border-top:1px solid #d9d9d9;
  }
  .shoppingCartTooltip .ui-tooltip-content .content.buttons {
    padding:15px 0 5px 0;
    text-align:right;
  }
  .shoppingCartTooltip .ui-tooltip-content .content a.button {
    padding:5px 10px; margin-left:5px;
    font-size:14px; font-weight:bold;
  }


  /*  =========================================================
   =10. fixed navigation style (sticky navigation)
  ========================================================= */
  .header.fixed{ transition: top .5s ease; -moz-transition: top .5s ease; -webkit-transition: top .5s ease; -o-transition: top .5s ease;}
  .header.fixed{ top: 0; margin: 0; position: fixed; z-index: 1000;}
  .header.fixed.visible{ top: 0px;}
  /*read bar with metanavgation, language setter, shoppingCart*/
  .header.fixed #metanaviTop{ position: relative; z-index: 101; top: 0; left: 0;}

  /*container of topNavigation*/
  .header.fixed > #headerNavigation{
    width: 100%; height: 50px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .95); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .95); -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .95);
    position: relative; z-index: 100;
  }

  /*remove padding from topnavigation*/
  .header.fixed #topnavigation{ padding: 0; left: 110px;}
  .header.fixed #topnavigation ul li{ width: auto;}
  .header.fixed #topnavigation ul > li.map {display: none;}
  .header.fixed #topnavigation ul > li.congress {background: none;}
  .header.fixed #topnavigation ul li a.top{
    font-size: 16px;
    height: 35px; margin: 0; padding: 15px 15px 0 15px;
    border-left: 1px #0d0d0d solid;
  }

  /*logo in #headerNavigation*/
  .header.fixed #bremenLogo{ display: block; width: 73px; height: 36px; margin: 6px 21px 0 0; float: left;}
  .header.fixed #bremenLogo > img.default{ display: none;}
  .header.fixed #bremenLogo > img.small{ display: block;}


}

@media screen and (max-height:799px){
  /*keyvisual height*/
  body.template_index #keyvisual {height: 620px;}
  body.template_index #keyvisual .galleryItems > li {height: 620px;}

  /*keyvisual fulltextsearch*/
  #keyvisual .keyvisualSearch form{ width:375px;}
  #keyvisual .keyvisualSearch input.text{ background-position:0 -50px; width:280px;}
  body .ui-autocomplete {width: 375px !important;}


  /*map legend*/
  #largeMapContainer .mapLegend .section.nav{ max-height:200px;}
  #largeMapContainer .swush{ display:none;}

}

@media screen and (min-height:800px) and (max-height:899px){
  /*keyvisual height*/
  body.template_index #keyvisual {height: 700px;}
  body.template_index #keyvisual .galleryItems > li {height: 700px;}
}

@media screen and (min-height:900px) and (max-height:999px){
  /*keyvisual height*/
  body.template_index #keyvisual {height: 780px;}
  body.template_index #keyvisual .galleryItems > li {height: 780px;}
}

@media screen and (min-height:800px){

  /*keyvisual fulltextsearch*/
  #keyvisual .keyvisualSearch form{ width:415px;}
  #keyvisual .keyvisualSearch input.text{ padding-left:30px; width:295px;}
  body .ui-autocomplete {width: 415px !important;}

  /*map legend*/
  #largeMapContainer .mapLegend .section.nav{ max-height:400px;}

}

@media screen and (min-width:1300px){
  /*resize the contentArea for the maplegend to snap it to the right border on large screens*/
  #largeMapContainer .contentArea{ width:auto;}
}

@media screen and (min-width: 450px) and
(max-width: 1200px) {
  /* Darstellung auf Netbooks */
  #headerNavigation .banderoleWrapper .banderole.left {
    display:none;
  }
  #headerNavigation .banderoleWrapper .banderole.right {
    left: 220px;
    width: 78%;
    box-shadow: -2px 2px 3px rgba(50, 50, 50, 0.6); -moz-box-shadow: -2px 2px 3px rgba(50, 50, 50, 0.6); -webkit-box-shadow: -2px 2px 3px rgba(50, 50, 50, 0.6);
  }

}

/*  =========================================================
 =11. newsticker
========================================================= */
#keyvisualNewstickerContainer {
  position: absolute;
  top: 130px;
  left: 250px;
}

#keyvisualNewstickerContainer > ul > li {
  display: none;
}

/* liScroll styles */
.tickercontainer { /* the outer div with the black border */
  background: transparent;
  width: 238px;
  height: 32px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
  position: relative;
  left: 5px;
  top: 3px;
  width: 228px;
  overflow: hidden;
  background:#FFFFFF;
}
ul.newsticker { /* that's your list */
  position: relative;
  left: 250px;
  font: bold 10px Verdana;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.newsticker li {
  float: left; /* important: display inline gives incorrect results when you check for elem's width */
  margin: 0 30px 0 0;
  padding: 0;
  background: #fff;
  line-height:25px;
}
ul.newsticker a {
  white-space: nowrap;
  padding: 0;
  color: #000;
  font-size: 14px;
  margin: 0 10px 0 0;
}
ul.newsticker span {
  margin: 0 10px 0 0;
}

#keyvisualNewstickerContainer .roundedBorder.roundedBorderTop {
  z-index:0;
}

@media screen and (max-width: 905px) {
  #keyvisualNewstickerContainer {
    display: none;
  }
}