.green {
	color:#22FF22;
}
.red {
	color:#FF2222;
}

.map {
	border-spacing: 1px;
	background-size: 100%;
	background-image: url(../images/OverlayTile10.png);
	background-color: #F5FBFE;
}
.map div {
	border: 0px solid #000;
	border-radius:14%;
	padding: 0px;
	margin: 0px;
	background-size: 100%;
	transition:background-color .4s;
	-webkit-transition:background-color .4s;
	-o-transition:background-color .4s;
	-moz-transition:background-color .4s;
}
.map .w {
	background-image:	url(../images/OverlayTileFaceted50b.png);
	background-size: 100%;
	transition:background-color 0.6s ease-out;
	-webkit-transition:background-color 0.6s ease-out;
	-o-transition:background-color 0.6s ease-out;
	-moz-transition:background-color 0.6s ease-out;
}
.map .w:hover {
	background-image: url(../images/OverlayTileFaceted30.png);
}

.map .o {
	background-image: url(../images/OverlayTile10.png);
	background-color: #F5FBFE;
}
.map .p {
	background-image: url(../images/PathableOnly1.png);
	background-color: #FFFFEE;
}
.map .r {
	background-image: url(../images/OverlayTileFaceted50b.png);
	background-color: #b85555;
}
.map .r2 {
	background-color: #CCCCCC;
	background-image: url(../images/OverlayTileFaceted50b.png);
}
.map .r3 {
	background-color: #334;
	border-radius:0px;
}
.map .s {
	background-image: url(../images/OverlayStart50b.png);
	background-color: #fbfefb; 
}
.map .s2 {
	background-image: url(../images/OverlayStart2.png);
	background-color: #fbfefb; 
}
.map .f {
	background-image: url(../images/OverlayFinish50c.png);
	background-color: #666; 
}
.map .x {
	background-image: url(../images/Path1xRock.png);
	background-color: #fff; 
}
.map .x2 {
	background-image: url(../images/Path2xRock.png);
	background-color: #fff; 
}

/* CHECKPOINTS */
.map .c {
	background-image: url(../images/OverlayA50.png);
	background-color: #F777FF; 
}
.map .c2 {
	background-image: url(../images/OverlayB50.png);
	background-color: #FFFF11; 
}
.map .c3 {
	background-image: url(../images/OverlayC50.png);
	background-color: #FF4466; 
}
.map .c4 {
	background-image: url(../images/OverlayD50.png);
	background-color: #ff9911; 
}
.map .c5 {
	background-image: url(../images/OverlayE50.png);
	background-color: #00FFFF; 
}

/* TELEPORTS */
.map .t {
	background-image: url(../images/TeleportInW.png);
	background-color: #3377AA; 
}
.map .t2 {
	background-image: url(../images/TeleportIn.png);
	background-color: #44EE66; 
}
.map .t3 {
	background-image: url(../images/TeleportInW.png);
	background-color: #CC5544; 
}
.map .t4 {
	background-image: url(../images/TeleportIn.png);
	background-color: #55CCFF; 
}
.map .t5 {
	background-image: url(../images/TeleportInW.png);
	background-color: #005533; 
}
.map .u {
	background-image: url(../images/TeleportOutW.png);
	background-color: #3377AA;
}
.map .u2 {
	background-image: url(../images/TeleportOut.png);
	background-color: #44EE66; 
}
.map .u3 {
	background-image: url(../images/TeleportOutW.png);
	background-color: #CC5544;
}
.map .u4 {
	background-image: url(../images/TeleportOut.png);
	background-color: #55CCFF; 
}
.map .u5 {
	background-image: url(../images/TeleportOutW.png);
	background-color: #005533; 
}
/* PATHING */
.transition {
	width:100%;
	height:100%;
	transition:background-color .5s ease-out;
	-webkit-transition:background-color .5s ease-out;
	-o-transition:background-color .5s ease-out;
	-moz-transition:background-color .5s ease-out;
}
.map .path0-1 {
	background-image: url(../images/paths/Path1-1.png);
	border-radius:0px;
}
.map .path0-2 {
	background-image: url(../images/paths/Path1-2.png);
	border-radius:0px;
}
.map .path0-3 {
	background-image: url(../images/paths/Path1-3.png);
	border-radius:0px;
}
.map  .path0-4 {
	background-image: url(../images/paths/Path1-4.png);
	border-radius:0px;
}
.map .path1-1 {
	background-image: url(../images/paths/Path2-1.png);
	border-radius:0px;
}
.map .path1-2 {
	background-image: url(../images/paths/Path2-2.png);
	border-radius:0px;
}
.map .path1-3 {
	background-image: url(../images/paths/Path2-3.png);
	border-radius:0px;
}
.map .path1-4 {
	background-image: url(../images/paths/Path2-4.png);
	border-radius:0px;
}

.map .child {
	width:100%;
	height:100%;
	position:relative;
	display:inline-block;
	background-size:100%;
}


.playable .o {
	background-image: url(../images/OverlayTile10.png);
	background-color: #F5FBFE;
	transition:background-color .3s;
	-webkit-transition:background-color .3s;
	-o-transition:background-color .3s;
	-moz-transition:background-color .3s;
}
.playable .o :hover
{
	background-image: url(../images/OverlayTileFaceted20.png);
}

.tileDisplay div {
	float:left;
	border:1px solid blue;
	margin:2px;
	width:36px;
	height:36px;
}

/* grid stuff */



.mapMute {
	display:inline-block;
	width:17px;
	height:17px;
	background-size: 100%;
	position: relative;
    top: 5px;
	margin-right: 5px;
	border-radius:5px;
		
	transition:background-color 0.6s ease-out;
	-webkit-transition:background-color 0.6s ease-out;
	-o-transition:background-color 0.6s ease-out;
	-moz-transition:background-color 0.6s ease-out;
}
.mapMute_true {
	background-image:	url(../images/Mute.png);
	background-color: transparent;
}
.mapMute_false {
	background-image:	url(../images/Sound.png);
	background-color: transparent;
}
.mapMute_false:hover {
	background-color:#000;
}
.mapMute_true:hover {
	background-color:#CC0;
}


.grid_dsp_data {
	padding:1px;
	font-weight:bold;
}

.grid_outer {
	position:relative;
	padding: 2px 3px 3px;
	margin: 0 auto 2px;
	background-color: #334;
	border-radius: 2px;
	box-shadow: 0 0 2px #777;
}
.grid_outer a {
	color: #FFFF33;
}

.dsp_60 {
	width:60%;
}
.dsp_49 {
	width:49%;
}
.dsp_33 {
	width:32%;
}
.dsp_24 {
	width:23%;
}
.dsp_16 {
	width:16%;
}

.grid_dsp_left,
.grid_dsp_mid,
.grid_dsp_right {
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	float: left;
	padding:0px;
	color: #FFFFFF;
}
.grid_dsp_left {
	text-align:left;
}
.grid_dsp_mid {
	text-align:center;
}
.grid_dsp_right {
	text-align:right;
}

.grid_inner {
	border-spacing: 0px;
	padding: 0px;
	margin: 0px;
	border: 0px;
/* 
	width: 35px;
	height: 35px;
 */
}
.grid_table
{
	position:relative;
	padding: 0px;
	margin-top:1px;
	margin-bottom:1px;
	margin-left:auto;
	margin-right:auto;
	border-top: 0px solid #000;
	border-left: 0px solid #000;
	border: 1px solid #000;
	border-spacing: 0px;
}
.grid_table td, .grid_table th {
	padding: 0px;
	margin: 0px;
}
/* TODO: Depreciate this completely .. */
.grid_td, 
.grid_td_rocks, .grid_td_gray, .grid_td_path, .grid_td_blanks, .grid_td_walls,
.grid_td_start, .grid_td_startB, .grid_td_finish, 
.grid_td_cpa, .grid_td_cpb, .grid_td_cpc, 
.grid_td_cpd, .grid_td_cpe, 
.grid_td_animate, .grid_td_animate_pre, 
.grid_td_tp1_in, .grid_td_tp2_in, .grid_td_tp3_in, .grid_td_tp4_in, .grid_td_tp5_in,
.grid_td_tp1_out, .grid_td_tp2_out, .grid_td_tp3_out, .grid_td_tp4_out,.grid_td_tp5_out,
.grid_td_path0-1 , .grid_td_path0-2, .grid_td_path0-3, .grid_td_path0-4,
.grid_td_path1-1 , .grid_td_path1-2, .grid_td_path1-3, .grid_td_path1-4,
.grid_td_rockxpath1, .grid_td_rockxpath2
{
	border-radius:14%;
	padding: 0px;
	margin: 0px;
	border: 0px;
	width: 35px;
	height: 35px;
	line-height:3px;
	background-image: url(../images/OverlayTileFaceted50b.png);
	background-size: 100%;
	transition:background-color .3s;
	-webkit-transition:background-color .3s;
	-o-transition:background-color .3s;
	-moz-transition:background-color .3s;
}
.grid_td
{
	background: #F5FBFE url(../images/OverlayTile10.png);
	transition:background-color .3s;
	-webkit-transition:background-color .3s;
	-o-transition:background-color .3s;
	-moz-transition:background-color .3s;
}
.grid_td:hover
{
	background: #CCCCCC url(../images/OverlayTileFaceted20.png);
}
.grid_td:click
{
	background: #CCCCCC url(../images/OverlayTileFaceted20.png);
	transition:background-color 0s;
	-webkit-transition:background-color .5s;
	-o-transition:background-color 0s;
	-moz-transition:background-color 0s;
}
.grid_td_pressed {
	background: #111122;
}

.grid_td_tp1_in, .grid_td_tp2_in, .grid_td_tp3_in, .grid_td_tp4_in, .grid_td_tp5_in,
.grid_td_tp1_out, .grid_td_tp2_out,.grid_td_tp3_out, .grid_td_tp4_out,.grid_td_tp5_out,
.grid_td_cpa, .grid_td_cpb, .grid_td_cpc, .grid_td_cpd, .grid_td_cpe
{
	transition:background-color 2s;
	-webkit-transition:background-color2s;
	-o-transition:background-color 2s;
	-moz-transition:background-color 2s;
}

.no_transition {
	transition:background-color 0s;
	-webkit-transition:background-color 0s;
	-o-transition:background-color 0s;
	-moz-transition:background-color 0s;
}


.mapdisplay, .mapdisplay_up
{
	position:absolute;
	width:auto;
	height:auto;
	box-shadow: 10px 10px 5px #000055; /* Opera */
	-webkit-box-shadow: 10px 10px 5px #000055; /* Safari and Chrome */

	-webkit-transform: 
		skew(10deg,10deg) 
		scale(.3, .3)
		translate(-390px, -230px)
		rotate(1deg)
		rotateX(0deg)
	;
	-moz-transform: 
		skew(10deg,10deg) 
		scale(.3, .3)
		translate(-390px, -230px)
		rotate(1deg)
		rotateX(0deg)
	;
	/* Remember, we need to duplicate all of this with prefix -o- and w/o prefix for opera, ff, netscape. */
	-webkit-transition:-webkit-transform 2s;
	-webkit-transition-delay: 0s;
	-moz-transition:-webkit-transform 2s;
	-moz-transition-delay: 0s;
	z-index:1;
}
.mapdisplay_up
{

	-webkit-transform: 
		skew(0deg,0deg) 
		scale(1, 1)
		translate(0px, 0px)
		rotate(0deg)
		rotateX(0deg)
	;
	-moz-transform: 
		skew(0deg,0deg) 
		scale(1, 1)
		translate(0px, 0px)
		rotate(0deg)
		rotateX(0deg)
	;
	-webkit-transition:-webkit-transform 1s;
	-moz-transition:-webkit-transform 1s;
	z-index:2;
}
.mapdisplay_up:hover { 
	background:#10e;
}
.mapdisplay:hover  { 
	z-index:3; 
	background:#10e;
}

.mapgallery
{
	position:relative;
	float: left;
	width:auto;
	height:700px;
	background: #110088; 
	color: #FFF;
}
.mapgallery a
{
	color: #FFFF33;
}


.mapcontainer
{
	border:1px solid #000;
	position:relative;
	float: left;
	width:300px;
	height:200px;
	background: #220099; 
}
.clear { clear: both;}