@charset "UTF-8";
/* CSS Document */

body {
	color: #474F3E;
	background: none repeat scroll 0 0 #EEEEEE;
}

#IDFmap {
	width: 938px;
	height: 598px;
	margin: auto;
	position : relative;
	background-color: #CCC;
	border:1px solid #CCC;
	font-size : 14px;
	line-height : 1.42857;
	font-family : Arial,arial,sans-serif;
}


#IDFmap .mentions {
	bottom: 5px;
	left: 7px;
	color: #999;
	font-style: italic;
	font-size: 10px;
	position: absolute;
}

#IDFmap menu {
	position: absolute;
	padding : 0;
	margin : 0;
	bottom:0;
	top:0;
	left: 0;
	width : 235px;
	background-color: #e5e5e5;	
}

#IDFmap h1 {	
	height: 75px;
	background-color: #FFF;	
	top: 0;
	left: 0;
	right: 0;
	margin : 0;
	color:#e31f15;
	text-align:center;
	padding-top: 10px;
}

#IDFmap .todo {	
	margin : 0;
	color:#727272;
	font-style:italic;
	text-align:center;
	font-size: 11px;
	line-height: 12px;
	padding: 0;
}

/****************/

#IDFmap .menuContainer {	
	margin: 0;
	padding: 0;
	list-style:none;
	position: absolute;
	bottom: 88px;
}

#IDFmap .menu-button {
	position:relative;
	border:1px solid #CCC;
	background-color: #fff;
	width : 235px;
	margin-left: -1px;
	margin-top: 3px;
	padding: 0;
}

#IDFmap .menu-button a {
	display:block;
	background-color: #FFF;
	height: 25px;
	width: 100%;
	line-height: 28px;
	text-align:center;
	color: #e31f15;
	font-weight: bold;
	text-decoration: none;
}

#IDFmap .menu-button a span.icon {
	position:absolute;
	top: 6px;
	left: 17px;
	width : 13px;
	height: 13px;
	background: url( "img/sprite.png" ) -46px -60px;
}

#IDFmap .menu-button .content{
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
	display:block;
	height: 0;
	overflow: hidden;
	transition: height .5s ease-in-out 0s;
	-webkit-transition: height .5s ease-in-out 0s;
}

#IDFmap .menu-button .content li{
	position: relative;
	height: 30px;
	line-height: 30px;
	color:#727272;
	font-size: 11px;
	margin: 0;
	padding: 0;
	padding-left: 50px;
}

#IDFmap .menu-button .content li.lines2 {
	height: 28px;
	padding-top: 5px;
	line-height: 12px;
}

#IDFmap .menu-button .content .icon{
	position: absolute;
	left: 0;
	top: 0;
	width: 49px;
	height: 35px;
}

#IDFmap .menu-button .content .icon.monuments 	{ background: url( "img/sprite.png" ) -190px -0px; }
#IDFmap .menu-button .content .icon.poles		{ background: url( "img/sprite.png" ) -90px -0px; }
#IDFmap .menu-button .content .icon.quartiers 	{ background: url( "img/sprite.png" ) -90px -36px; }
#IDFmap .menu-button .content .icon.new-lines 	{ background: url( "img/sprite.png" ) -140px -36px; }
#IDFmap .menu-button .content .icon.old-lines 	{ background: url( "img/sprite.png" ) -140px -74px; }
#IDFmap .menu-button .content .icon.parcs	 	{ background: url( "img/sprite.png" ) -90px -72px; }
#IDFmap .menu-button .content .icon.urbanisation{ background: url( "img/sprite.png" ) -140px -0px; }
#IDFmap .menu-button .content .icon.reserves	{ background: url( "img/sprite.png" ) -190px -36px; }

#IDFmap .menu-button.opened a {
	background-color: #e31f15;
	color: #FFF;
}

#IDFmap .menu-button.opened a span.icon {
	background: url( "img/sprite.png" ) -46px -74px;
}

#IDFmap .menu-button.opened .content{
	height: auto;
}

#IDFmap .menuDropShadow {
	position:absolute;
	top: 0;
	left: 235px;
	background: url( "img/menuDropshadow.png" ) repeat-y transparent;	
	width: 5px;
	height: 100%;
	z-index:10;
}

/****************/


#IDFmap .zoom-toggle{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 81px;
	width : 231px;
	overflow: hidden;
	border: 2px #e31f15 solid;
}

#IDFmap .zoom-toggle .content{
	position: relative;
	height: 180px;
	width : 100%;
	display:block;
	text-decoration: none;
	
	transition: margin-top .5s ease-in-out 0s;
	-webkit-transition: margin-top .5s ease-in-out 0s;
}

#IDFmap .zoom-toggle p{
	position:relative;
	padding-top: 10px;
	font-weight: bold;
	color: #e31f15;
	font-size: 16px;
	margin: 0px 0 0 17px;
	height: 75px;
}

#IDFmap .zoom-toggle p span{
	position:absolute;
	display:block;
	font-style:italic;
	font-weight:normal;
	color: #727272;
	font-size: 11px;
	line-height: 12px;
	height: 20px;
	z-index: 1;
}

#IDFmap .zoom-toggle .icon{
	position: absolute;
	right: 0;
	top: 0;
	height: 170px;
	width : 117px;
	background: url( "img/mapsIcon.png" ) 0 0;	
}

#IDFmap .zoom-arrow{
	position: absolute;
	left: 234px;
	bottom: 0;
	height: 85px;
	width : 7px;
	background: url( "img/sprite.png" ) -240px 0;
	z-index: 20;
	
}

#IDFmap .zoom-toggle.zoomed .content{
	margin-top: -85px;
}

#IDFmap .zoom-toggle:hover {
	background-color: #f5f5f5;
}

#IDFmap .zoom-toggle:hover .icon{
	background: url( "img/mapsIcon.png" ) -117px 0;	
}


/****************/

#mapView {
	position:absolute;
	overflow:hidden;
	width: 703px;
	height: 598px;
	left: 235px;
	top: 0;	
}

#mapContainer {
	position:absolute;
	top: 0;
	left : 0;
	cursor: none;
	zoom: 1;
}

#mapContainer .couronne .cursor {
	display:none;
	width: 16px;
	height: 16px;
	background: url( img/cursor_drag.gif );
	position:absolute;
	z-index: 1;
}

#mapContainer:hover .couronne .cursor {	
	display:block;
}

#mapContainer.dragging .couronne .cursor {
	background: url( img/cursor_grab.gif );
}

#mapContainer .couronne {
	display: none;
	position:absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

#mapView .mapLayer{
	z-index: 2;
}

#mapContainer .popins, #mapContainer img {
	width: 100%;
	height: 100%;
	position:absolute;
	left: 0;
	top: 0;
}

#mapContainer .popin{
	position:absolute;
	z-index: 30;
	min-width: 40px;
	min-height: 40px;
	margin-left: -20px;
	margin-top: -20px;
	background: url( "img/roll.png" ) 0 0;
	opacity: 0;
	
	transition: opacity .2s ease-in-out 0s;
	-webkit-transition: opacity .2s ease-in-out 0s;
}

#mapContainer .popin:hover{
	background: url( "img/sprite.png" )  0 -120px;
	opacity: 1;
}

#mapContainer .popin span{
	display:none;
	padding: 2px 5px;
	color: #FFF;
	font-size: 10px;
	background-color: #cc0000;
	padding : 1px 5px 2px 5px;
	margin-left: -10px;
	border-bottom: 1px solid #aa0000;
	border-top: 1px solid #FF4444;
	text-align:center;
	
}

#mapContainer .popin:hover span{
	display:block;
	cursor: default;	
	
}

/***************/

#mapView .zoom{
	background-color: #fff;
	position:absolute;
	right: 15px;
	top: 15px;	
	z-index : 12;
	cursor: default;
}

#mapView .zoomMore {
	width: 29px;
	height : 29px;
	background: url( img/sprite.png ) 0 0 no-repeat transparent;	
}

#mapView .zoomMore:hover {
	background-position: 0 -30px;	
}

#mapView .zoomLess {
	width: 29px;
	height : 29px;
	background: url( img/sprite.png ) -30px 0 no-repeat transparent;
	margin-top: 1px;	
}

#mapView .zoomLess:hover {
	background-position: -30px -30px;	
}

#mapView .zoomRule {
	position:relative;
	width: 29px;
	height: 109px;
	background: url( img/sprite.png ) -60px 0 no-repeat transparent;
}

#mapView .zoomCursor {
	position:absolute;
	left: 50%;
	top:0;
	margin-top: -0px;
	margin-left: -11px;
	width: 23px;
	height: 16px;
	background: url( img/sprite.png ) 0 -60px no-repeat transparent;	
}