dynmap/web/dynmap_style.css

/*******************
 * Page setup
 */

html { 
	height: 100%
}

body {
	height: 100%;

	font-family: sans-serif;
	font-size: 11px;

	color: #fff;
	background: #000;

	margin: 0px;
	padding: 0px ; 
}

.dynmap .map .tile img {
	image-rendering: -moz-crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}


/*******************
 * fieldset and legend styles
 */

.dynmap fieldset {
	border: none;
	border-top: 1px solid rgba(196,196,196,0.4);
}

.dynmap legend {
	padding: 8px 4px;
	font-weight: bold;
}


/*******************
 * Map Setup
 */

#mcmap {
	width: 100%;
	height: 100%
}

.dynmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.dynmap > .map {
	width: 100%;
	height: 100%;
	background-color: #000;
}

/* Map Controls */
.gmnoprint{
	margin-top:-75px;
	margin-left:-20px
}

/* Google branding */

.dynmap > div.map > DIV > DIV:first-child + DIV, 
.dynmap > div.map > DIV > DIV:first-child + DIV + DIV { 
	visibility: hidden !important; 
}


/*******************
 * Alerts
 */

.alertbox {
	position: fixed;
	width: 50%;

	top: 0;
	left: 0;
	right: 0;

	text-align: center;
	color: #a00;
	background-color: #fff;

	margin: auto;
	padding: 5px;

	border: 1px solid #a00;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
	border-radius: 0 0 3px 3px;
}


/*******************
 * shared rules
 */

.dynmap .panel ul, .dynmap .panel li {
	list-style: none;

	padding: 0;
	margin: 0;
}

.maplist li a,
.playerlist li a {
	outline: none;
	text-decoration: none;
}

/*******************
 * sidebar panels
 */

.dynmap .sidebar {

	display: block;
	position: absolute;

	top: 0px;
	right: 0px;

	width: 250px;
	height: 100%;

	background: rgb(0,0,0); /* FU IE */
	background: rgba(0,0,0,0.6);
	color: #fff;

	border-left: 1px solid rgba(0,0,0,0.5);

	margin-right: -253px;
	/*margin-right: 251px;*/

	-moz-transition: all 0.6s ease-in-out;
	-webkit-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.dynmap .hitbar {

	display: block;
	position: fixed;

	right: 0px;
	top: 0px;

	height: 100%;
	width: 16px;

	text-align: center;

	background: url(sidebar_hint.png) rgb(0,0,0);
	background: url(sidebar_hint.png) rgba(0,0,0,0.6);
	background-repeat: no-repeat;
	background-position:center;

	border: 1px solid rgba(0,0,0,0.5);

	-moz-transition: all 0.6s ease-in-out;
	-webkit-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.dynmap .sidebar .panel > .pin {
	position: absolute;
	right: 4px;
	top: 4px;
	width: 16px;
	height: 16px;
	background-image: url(window_unpinned.png);
}

.dynmap .sidebar.pinned .panel > .pin {
	background-image: url(window_pinned.png);
}

/* magic and metrics */

.dynmap .sidebar:hover,
.dynmap .sidebar.pinned {
	margin-right: 0px;
}

.dynmap .sidebar < .hitbar:hover {
	margin-right: 0px;	
}

.dynmap .sidebar:hover .hitbar,
.dynmap .sidebar.pinned .hitbar {
	right: -120px;
}


/*******************
 * map list-specific styling
 */

.dynmap .panel .world {
	display: block;
	clear: both;

	width: 100%;
	line-height: 18px;
	margin: 0 0 30px 0;

	border-bottom: 1px solid rgba(128,128,128,0.3);

}

.dynmap .maplist .map {
	display: block;
	float: left;

	height: 18px;
	width: 18px;

	padding: 2px;
	margin: 5px 2px;
	
	border-radius: 3px;
	-moz-border-radius: 3px;
	
	background: rgba(32,32,32,0.6);
	border: 1px solid rgba(64,64,64,0.6);
}

.dynmap .maplist .map:hover {
	background: rgba(64,64,64,0.6);
	border: 1px solid rgba(128,128,128,0.6);
}

.dynmap .maplist .map.selected {
	background: rgba(128,128,128,0.5);
	border: 1px solid rgba(255,255,255,0.5);
}

.dynmap .maplist .map > a {
	display: block;

	text-indent: -99999px;
	outline: none;
}

.dynmap .maplist .map > a {
	background-repeat: no-repeat;
	background-position:center;
}

/*******************
 * player list-specific styles
 */

.dynmap .playerlist .player {

	display: inline-block;
	float: left;
	width: 100%;

	padding: 4px 0;
	border: 3px solid transparent;
}

.dynmap .playerlist .player:hover {
	background: rgba(64,64,64,0.6);
}

.dynmap .playerlist .player a {
	color: #fff;
}

/* may need to tweak this for canvas */

.dynmap .playerlist .playerIcon > * {
	vertical-align: middle;
	border: none;
}

.dynmap .playerlist .playerIcon {
	width: 16px;
	height: 16px;
	margin: 0px 7px;
	display: block;
	float: left;
}

.dynmap .playerlist .player.following {
	background: rgba(128,128,128,0.5);
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 3px;
	padding: 6px 2px;
	-moz-border-radius: 3px;
}

.dynmap .playerlist .player:hover .playericon {
	background: url(player_follow_off.png) no-repeat;
}

.dynmap .playerlist .player.following .playericon {
	background: url(player_follow_on.gif) no-repeat;
}

.dynmap .playerlist .player.following .playericon > *,
.dynmap .playerlist .player:hover .playericon > * {
	visibility: hidden;
}