.map .map-top{
  background: #fff;
  padding-right: 190px;
  position: relative;
  zoom: 1;
}

.map-top .service{
  position: absolute;
  right: 190px;
  bottom: 3px;
  font-size: 12px;
  font-weight: bold;
}

.map-top .service a:hover{
  color: #6f4b90;
  text-decoration: none;
}

.map h1{
  color: #333333;
  margin-bottom: 0;
  font-size: 2.4em;
  background: #fff;
}

.map {
  background: url(../images/backgrounds/map.gif) 0 0 repeat-y;
}

.map .wrapper{
  background: url(../images/backgrounds/map-bottom.gif) 0 100% no-repeat;
}

.map .canvas{
  border-top: 1px solid #ccc;
  margin-left: 1px;
}

.map .map-left{
  width: 758px;
  float: left;
}

.map .map-right{
  width: 190px;
  float: left;
}

#content .map h2{
  background: url(../images/backgrounds/map-h2.gif) 100% 0 no-repeat;
  color: #fff;
  padding: 3px 12px;
}

/* ========== */
/* = Routes = */
/* ========== */

ul.routes{
  margin-left: 14px;
  margin-right: 1px;
}

ul.routes li{
  border-bottom: 1px solid #e8e8e8;
}

ul.routes label{
  position: relative;
  height: 26px;
  line-height: 26px;
  vertical-align: middle;
}

ul.routes .info{
  background: #f0f0f0;
  padding: 5px 0;
  font-size: 1.1em;
}

ul.routes label,
ul.routes .info{
  padding-left: 22px;  
}


/* ========== */
/* = Legend = */
/* ========== */

ul.legend{
  text-align: right;
  font-size: 1.1em;
  border-bottom: 1px solid #ccc;
  line-height: 22px;
}

ul.legend li{
  display: inline;
  padding-left: 1em;
}

ul.legend li img{
  padding: 3px 0.5em 4px 0;
}

ul.legend li,
ul.legend li img{
  vertical-align: middle;
}

/* ================ */
/* = Info bubbles = */
/* ================ */

div.mapinfo .head{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

div.mapinfo .content{
  font-size: 12px;
}

.map label{
  display:block;
  font-size: 12px;
}

.normal .head{
  color: #99cc00;
}

.average .head{
  color: #ff701e;
}

.severe .head{
  color: #c0001f;
}

.streams label{
  border-bottom: 1px solid #e8e8e8;
  line-height: 32px;
  height: 32px;
  background: url(../images/icons.gif) 95% 0 no-repeat;
  padding-left: 32px;
  padding-right: 45px;
  position: relative;
}

.streams label.last{
  border-bottom: 0 none;
}

.streams label,
.streams label input{
  vertical-align: middle;
}

ul.routes label input,
.streams label input{
  width: 14px;
  height: 14px;
  margin-top: -7px;
  top: 50%;
  left: 10px;
  position: absolute;
}

ul.routes label input{
  left: 0;
}

/* ========= */
/* = Icons = */
/* ========= */

.streams label.parking { background-position: 95% -32px; }
.streams label.carpool { background-position: 95% -64px; }
.streams label.vo { background-position: 95% -96px; }
.streams label.bus { background-position: 95% -128px; }
.streams label.park_and_ride { background-position: 95% -160px; }
.streams label.bike { background-position: 95% -192px; }
.streams label.ferry { background-position: 95% -224px; }
.streams label.train { background-position: 95% -256px; }
.streams label.subway { background-position: 95% -288px; }
.streams label.deelnemer { background-position: 95% -320px; }

/* ============= */
/* = Autoclear = */
/* ============= */

#fullscreen h2:after,
.streams:after,
#fullscreen .traffic:after,
#fullscreen .footer:after,
.map .wrapper:after{
	content: ".";
	visibility: hidden;
	clear: both;
	display: block;
	height: 0px;
}

#fullscreen h2,
.streams,
#fullscreen .traffic,
#fullscreen .footer,
.map .wrapper{
  zoom: 1;
}


/* ============== */
/* = Fullscreen = */
/* ============== */

#fullscreen{
  background: #fff;
}

#fullscreen h2{
  color: #fff;
  font-size: 1.4em;
  padding-left: 10px;
  background: url(../images/backgrounds/fullscreen-map.gif) 0 0 no-repeat;
  line-height: 22px;
  vertical-align: top;
}

#fullscreen h2 span{
  float: left;
  background: url(../images/backgrounds/fullscreen-back.gif) 100% 0 no-repeat;
  padding: 0 0 0 23px;
  width: 210px;
}

#fullscreen .map{
  position: absolute;
  top: 0;
  right: 10px;
  width: 788px;
  background: url(../images/backgrounds/fullscreen-map.gif) 0 100% no-repeat;
}

#fullscreen .map .wrapper{
  padding: 15px 7px 0 7px;
  background: #fff;
}

#fullscreen .footer{
  line-height: 24px;
  vertical-align: middle; 
}

#fullscreen .footer a{
  color: #fff;
}

#fullscreen .footer a:hover{
  color: #000;
  text-decoration: none;
}

#fullscreen .footer a span{
  background: url(../images/backgrounds/fullscreen-a.gif) 0 -37px no-repeat;
  padding-left: 13px;
}

#fullscreen .footer a:hover span{
  background: url(../images/backgrounds/fullscreen-a.gif) 0 4px no-repeat;  
}

#fullscreen .footer .back a span{
  background-position: 0 -38px;
}

#fullscreen .footer .back a:hover span{
  background-position: 0 3px;
}

#fullscreen .back{
  font-size: 1.2em;
  font-weight: bold;  
  text-align: right;
  padding-right: 30px;
  background: url(../images/backgrounds/fullscreen-back.gif) 100% 100% no-repeat;
}

#fullscreen .close{
  font-size: 1.4em;
  font-weight: bold;
  
  float: left;
  margin: -10px 0 0 10px;
  padding-left: 5px;
  background: url(../images/backgrounds/fullscreen-back.gif) 100% 100% no-repeat;  
  width: 150px;
}


#fullscreen div.traffic{
  margin-bottom: 10px;
}

#fullscreen ul.routes{
  margin-left: 0;
}

#fullscreen ul.legend{
  text-align: left;  
  padding-bottom: 15px;  
}

#fullscreen div.streams{
  margin-bottom: 30px;  
}

#fullscreen ul.legend,
#fullscreen .map h2{
  border-bottom: 1px solid #cccccc;    
  margin-bottom: 10px;
}

#fullscreen ul.routes .info,
#fullscreen ul.routes label{
  padding-left: 32px;  
}

#fullscreen h1{
  padding-left: 8px;
}

#fullscreen ul.routes label input{
  left: 10px;
}

#fullscreen #logo{
  position: absolute;
  left: 10px;
  bottom: 50px;
}

.map .printonly{
  display: none;
}

.map .hidden{
  display: none;
}