/**
 * map.css -> http://locusonus.org/soundmap/
 * version 03
 */
 

@import "marker.css";
@import "fullscreen.css";


#map
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 16px;
	border: 1px solid silver;
}

#info.fw a,
#map a
{
	text-decoration: none;
}

#map.fw
{
	right: 0px;
	bottom: 0px;
}

#Gmap
{
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	background: url('../img/map/bkg.png') repeat;
}

#Gmap.fw
{
	position: absolute;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
}

#map_err
{
    position: absolute;
    width: 400px;
    line-height: 20px;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -200px;
    text-align: center;
}

#map_loading
{
    position: absolute;
    width: 100px;
    line-height: 20px;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -50px;
	background-color: black;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 80%;
    opacity: 0.8;

    -webkit-animation: pulse 4s infinite;
    animation: pulse 4s infinite;
}
@-webkit-keyframes pulse
{
    0%   { opacity: 0.8; }
    50%  { opacity: 0.2; }
    100% { opacity: 0.8; }
}
@keyframes pulse
{
    0%   { opacity: 0.8; }
    50%  { opacity: 0.2; }
    100% { opacity: 0.8; }
}

#map_footer
{
	position: absolute;
	margin: 0;
	bottom: 0px;
	right: 10px;
	background-color: inherit;
	text-align: right;
	text-transform: lowercase;
}

#map_footer.fw
{
	display: none;
}



/* -- HEADER ------------------------------------------------------------------------------------ */

#map_header
{
	position: absolute;
	display: none;
	left: 2px;
	top: 2px;
	right: 2px;
	min-height: 30px;
	padding-left: 100px;
	padding-right: 93px;
}

#map_header.fw
{
	display: block;
}

#map_header p
{
	position: relative;
	padding: 10px 0px;
	margin: 0;
}

#map_header[class*="pushed-"] .corner
{
	position: absolute;
    right: 0;
	width: 4px;
	height: 4px;

	background: -moz-radial-gradient(0 100%, circle, rgba(255,0,0,0) 4px, white 4px);
	background: -webkit-radial-gradient(0 100%, circle, rgba(255,0,0,0) 4px, white 4px);
	background: radial-gradient(0 100%, circle, rgba(255,0,0,0) 4px, white 4px);

}



/* -- PLAYER ----------------------------------------------------------------------------------- */

#map_player
{
	display: inline-block;
	padding: 1px 0px 3px 0px;
}

#map_player.running
{
	background-color: white;
    border-radius: 3px;
    color: #FFA500;
    margin: -5px 20px 6px 10px;
    padding: 1px 7px 2px 3px;

    -moz-box-box-shadow: 0 0 3px gray;
	-webkit-box-shadow: 0 0 3px gray;
	box-shadow: 0 0 3px gray;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius:  3px;
}

#map_player a.button:after
{
	content: " :";
}

#map_player span.label,
#map_player a.error
{
	display: inline-block;
    padding-top: 4px;
}

#map_player span.label
{
	padding-left: 7px;
}

#map_player a.loading,
#map_player a.pause,
#map_player a.play,
#map_player a.stop
{
	display: inline-block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    overflow: hidden;
    text-indent: -1000px;
    vertical-align: middle;
}

#map_player a.loading
{
	background: url( '../img/player/loading.gif' ) no-repeat;
}

#map_player a.error
{
	background: url( '../img/player/error.png' ) no-repeat;
	height: 21px;
    padding-left: 26px;
}

#map_player a.pause,
#map_player a.stop
{
	background: url( '../img/player/play.png' ) no-repeat;
}

#map_player a.play
{
	background: url( '../img/player/pause.png' ) no-repeat;
}

#map_player_flashplayer
{
	position: absolute;
	visibility: hidden;
}

/* -- TOOLBAR ----------------------------------------------------------------------------------- */

 
#map_toolbar
{
	position: absolute;
	top: 8px;
	right: 10px;
	padding: 4px 8px 4px 0;
	background-color: white;
}

#map_toolbar div
{
	float: left;
}

#map_toolbar.fw
{
	top: 10px;
	right: 2px;
	height: 24px;
	background-color: inherit;
}


#map_rbutton,
#map_fbutton,
#map_wbutton,
#map_lbutton,
#map_obutton,
#map_ibutton,
#map_abutton,
#map_sbutton,
#map_tbutton,
#map_mbutton
{
	width: 20px;
	height: 20px;
	cursor: pointer;
	opacity: 0.4;
	margin-left: 3px;
}

#map_rbutton
{
	display: none;
	background: url('../img/map/reload.png') no-repeat;
}

#map_fbutton
{
	background: url('../img/map/fs-enter.png') no-repeat;
}

#map_wbutton
{
	background: url('../img/map/fw-on.png') no-repeat;
}

#map_toolbar.fw #map_wbutton
{
	background: url('../img/map/fw-off.png') no-repeat;
}

#map_obutton
{
	background: url('../img/map/options.png') no-repeat;
}

#map_lbutton
{
	background: url('../img/map/list.png') no-repeat;
}

#map_ibutton
{
	background: url('../img/map/infos.png') no-repeat;
}

#map_abutton
{
	background: url('../img/map/login.png') no-repeat;
}

#map_sbutton
{
	background: url('../img/map/server.png') no-repeat;
}

#map_mbutton
{
	background: url('../img/map/mix.png') no-repeat;
}

#map_tbutton
{
	background: url('../img/map/tweet.png') no-repeat;
}

#map_rbutton:hover,
#map_fbutton:hover,
#map_wbutton:hover,
#map_lbutton:hover,
#map_obutton:hover,
#map_ibutton:hover,
#map_abutton:hover,
#map_sbutton:hover,
#map_mbutton:hover,
#map_tbutton:hover
{
	opacity: 0.8;
}



/* -- OPTIONS ----------------------------------------------------------------------------------- */


#map_options
{
	display: none;
	position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
}

#info.fw a,
#map_options a
{
	color: red;
}

#map_options input[type="number"]
{
	width: 80%;
	border: none;
	background: rgba(255, 255, 255, 0.7);
	padding: 5px 5px 6px 5px;
	margin-top: 5px;
	border-radius: 2px;
	font-size: 90%;
}

#map_options input[type="checkbox"]
{
	display: none;
}

#map_options input[type="checkbox"] + label
{
	padding-left: 20px;
	background: url('../img/map/checkbox_no.png') no-repeat;
	line-height: 16px;
}
#map_options input[type="checkbox"]:checked + label
{
	padding-left: 20px;
	background: url('../img/map/checkbox_yes.png') no-repeat;
	line-height: 16px;
}

#map_style a
{
	padding-left: 15px;
	opacity: 0.5;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

#map_style a.current,
#map_style a:hover
{
	background: url('../img/map/active.png') no-repeat 3px 0;
	opacity: 1;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}

#map_options .close,
#info.fw .close
#twitter.fw .close
{
	z-index: 999;
	position: relative;
	float: right;
}

#info h2,
#map_options h3
{
    font-size: 100%;
	margin-top: 14px;
	padding-bottom: 3px;
	margin-bottom: 3px;
	border-bottom: 1px dotted #DEDEDE;
	position: relative;
}

#info h3
{
    font-size: 100%;
    margin-top: 22px;
}

#map_style,
#map_list,
#info div.panel,
#twitter
{
	padding-left: 10px;
	padding-right: 10px;
	width: 170px;
}

#map_header[class*="pushed-"],
#map_toolbar[class*="pushed-"]
{
	right: 192px;
}

#map_header.pushed-tweet,
#map_toolbar.pushed-tweet
{
	right: 422px;
}

#map_options .viewport
{
    position: absolute;
    top: 38px;
    bottom: 8px;
    width: 170px;
    height: auto;
}
#map.fw .viewport
{
	top: 48px;
}

#map_options .viewport_vscrollbar
{
	top: 2px;
	right: 0px;
	width: 8px;
	background-color: black;
	border-radius: 5px;
	opacity: 0.2;
	transition: opacity .1s ease-in-out;
	-moz-transition: opacity .1s ease-in-out;
	-webkit-transition: opacity .1s ease-in-out;
	-ms-transition: opacity .1s ease-in-out;
}

#map_options .viewport_vscrollbar:hover
{
	opacity: 0.5;
}

#map_options dl
{
	margin: 0;
}

#map_options dt,
#map_options dd
{
	padding: 0;
	margin: 0;
}

#map_options dt
{
	padding-top: 7px;
}

#map_options .options
{
	margin-left: 7px;
	padding-bottom: 7px;
	border-bottom: 1px solid #E8E8E8;
}
#map_options .options:last-child
{
	border: none;
}

#info p,
#map_options dl,
#map_options .options
{
	font-size: 10px;
}

#map_options small
{
	font-size: 80%;
}

#map_options .note
{
	opacity: 0.5;
}

#map_options label,
#map_options .label
{
	display: inline-block;
}

#map_options .label
{
	margin-top: 7px;
	margin-bottom: 3px;
}

#twitter,
#twitter .viewport
{
	width: 400px;
}

#twitter iframe
{
	height: 100%;
}