/* CSS Document */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


body {
	max-width: 900px;
	margin:auto;
	background-color: #999;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36F), to(#333399));
    background-image: -webkit-linear-gradient(top, #09F, #000);
    background-image:    -moz-linear-gradient(top, #ffF, #aaf);
    background-image:     -ms-linear-gradient(top, #36F, #333399);
    background-image:      -o-linear-gradient(top, #36F, #333399);
	background-image:url(../images/grid_bg1.png);
	font-family:Verdana, Geneva, sans-serif;
	color:#fff;
}

header {
	height: 60px;
	background-color:#333;
	background-image:url(../images/met_gradient2_60.png);
	background-size: 20px 100%;
	background-repeat: repeat-x;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	moz-border-top-left-radius: 10px;
	moz-border-top-right-radius: 10px;
	
}

h1{
	font-family: 'Iceberg', cursive;
	font-size:20px;
	margin: 1px 1px;
	
}

h2{
	font-size:14px;
}

p{
	font-size:10px;
}


header div{
	padding: 0 10px;
	float:left;
}

header h1{
		
}

#gb_title {text-align:center; font-size:50px}

#scr_examp {
	width:100%;
	display:block;
	margin: 10px 0px 10px 0px;
	//box-shadow: 0px 0px 5px 3px #aaf;
	//-moz-box-shadow: 0px 0px 5px 3px #aaf;
	box-sizing: border-box;
	float:left;	
}

#main_header {
	height:120px;	
}

header#main_header h1 {
	float: left;
	padding:15px 15px;
}

header#main_header h2 {
	
	padding:10px 4px;
	margin: 0 0;
}

#goal {border-bottom: 1px solid #555;}	
#block_desc {border-bottom: 1px solid #555;}	

section a {
	text-decoration:none;
	color: 	#eee;
}

section h2 {margin: 10px 5px 10px 5px;}

section p {margin: 5px 5px 10px 5px;}

header p {margin: 5px 0;}

#board_instr_gap {
	height:50px;
	float:left;
	width:300px;	
}

#altpage {
	height: 470px;
	width: 300px;
	margin: 0px 10px;
	position:relative;
	float:left;
	background-color:#111;
	z-index:20;
	/*	display:none; */
	overflow:scroll;
	border-radius: 10px;
	moz-border-radius: 10px;
 }

#altpage section {
	padding: 0 10px;	
}

#subpage {
	float:left;	
}

#main_nav {
	float: right;
	width: auto;
	height: 60px;
	margin: 0 10px;
	//background-color:#333;
	position:relative;
	
}

.button_nav {
	height:40px;
	background-color:#333399;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36F), to(#333399));
    background-image: -webkit-linear-gradient(top, #36F, #333399);
    background-image:    -moz-linear-gradient(top, #36F, #333399);
    background-image:     -ms-linear-gradient(top, #36F, #333399);
    background-image:      -o-linear-gradient(top, #36F, #333399);
	float:left;
	margin:10px 8px;
	padding: 0;	
	border-radius: 5px;
	text-decoration:none;
	-moz-border-radius: 5px;
	box-shadow: 2px 2px 2px #333;
}

.button_nav h2 {
	padding:0 4px;	
}

#main_crash{ height:100px; position: relative; width:100%; }

#bluecrash {position:absolute; top:10px; left:20px; z-index:4;}
#redcrash {position:absolute; top:10px; left:140px; z-index:3;}

#playa {
	position:absolute;
	width:120px;
	height:120px;
	background-color:#03C;
	border: 2px solid #fff;
	top:100px;
	left:60px;
}

#obsta {
	position:absolute;
	width:120px;
	height:120px;
	background-color:#F00;
	border: 2px solid #FFF;
	top:160px;
	left:120px;
}

#main_board {
	max-width: 700px
	height: 360px;
	margin: 0 10px;
	background-color:#000;
	position:relative;
}

.board_block {
	width: 28px;
	height: 28px;
	float: left;
	border: 1px groove #FFF;
	/*past shadow color #3CF */
	box-shadow:0px 0px 5px 3px #aaf;
	-mox-box-shadow:0px 0px 5px 3px #aaf;
}

.board_block a {
	text-align:center;	
	font-size:12px;
}

.goal_area {
	border: 1px groove #00f;
	box-shadow:0px 0px 5px 3px #00f;
	-mox-box-shadow:0px 0px 5px 3px #00f;	
}

#settings {
	padding:10px 10px;	
}

footer {
	height: 60px;
	background-color:#333;
	background-image:url(../images/met_gradient2_60.png);
	background-size: 20px 100%;
	background-repeat: repeat-x;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	moz-border-bottom-left-radius: 10px;
	moz-border-bottom-right-radius: 10px;
	clear:both;
}

footer #select_text {
	height:40px;
	width:52px;
	font-size:10px;
	color:#FFFFFF;
	float:left;
	margin:10px 8px 10px 10px;	
	padding: 0px 2px;
}

footer a#bt_roll {
	height:40px;
	width:40px;
	background-color:#333399;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36F), to(#333399));
    background-image: -webkit-linear-gradient(top, #36F, #333399);
    background-image:    -moz-linear-gradient(top, #36F, #333399);
    background-image:     -ms-linear-gradient(top, #36F, #333399);
    background-image:      -o-linear-gradient(top, #36F, #333399);
	float:left;
	margin:10px 8px;
	padding: 0;	
	border-radius: 5px;
	text-decoration:none;
	-moz-border-radius: 5px;
	box-shadow: 2px 2px 2px #333;
}

footer a#bt_roll:hover {
	box-shadow: -2px -2px 2px #333;	
	
}

footer a#bt_roll p {
	font-size:10px;
	color:#FFFFFF;
	text-shadow:1px 1px 1px #000;
	margin: 13px 10px;
	text-decoration:none;
}

footer div.pnt_arrow {
	height:40px;
	font-size:12px;
	float:left;
	padding:20px 0px;	
}

footer #mov_txt {
	height:40px;
	width:40px;
	font-size:10px;
	color:#FFFFFF;
	float:left;
	margin:10px 6px;	
	padding: 0px 2px;
}

footer a#bt_exmove {
	height:40px;
	width:80px;
	background-color:#333399;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36F), to(#333399));
    background-image: -webkit-linear-gradient(top, #36F, #333399);
    background-image:    -moz-linear-gradient(top, #36F, #333399);
    background-image:     -ms-linear-gradient(top, #36F, #333399);
    background-image:      -o-linear-gradient(top, #36F, #333399);
	float:left;
	margin:10px 10px 10px 8px;
	padding: 0;	
	border-radius: 5px;
	text-decoration:none;
	-moz-border-radius: 5px;
	box-shadow: 2px 2px 2px #333;
}

footer a#bt_exmove p {
	font-size:10px;
	color:#FFFFFF;
	text-shadow:1px 1px 1px #000;
	margin: 7px 3px;
	text-decoration:none;
	text-align:center;
}

footer a#bt_exmove:hover {
	box-shadow: -2px -2px 2px #333;	
}

#goal, #block_desc, #howtoplay {
	padding: 10px 10px;
	}
#goal div, #block_desc div {margin: 2px 2px;}

#about_page h2 {
	margin: 10px 10px;	
}

#main_footer h2 {
	margin:0;
	line-height:60px;
	text-align:center
}

.button_head {
	height:20px;
	background-color:#333399;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36F), to(#333399));
    background-image: -webkit-linear-gradient(top, #36F, #333399);
    background-image:    -moz-linear-gradient(top, #36F, #333399);
    background-image:     -ms-linear-gradient(top, #36F, #333399);
    background-image:      -o-linear-gradient(top, #36F, #333399);
	float:left;
	margin:10px 10px;
	padding: 0;	
	border-radius: 5px;
	text-decoration:none;
	-moz-border-radius: 5px;
	box-shadow: 2px 2px 2px #333;
}	

.button_head p {
	text-shadow:1px 1px 1px #000;
	padding: 0 2px;	
	margin: 3px 0;
}

.top {
	margin:2px 5px;	
}

header#instr_head h1{
	padding: 0 15px;	
}

.ex_instr_butt {
	
	background-color:#333399;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36F), to(#333399));
    background-image: -webkit-linear-gradient(top, #36F, #333399);
    background-image:    -moz-linear-gradient(top, #36F, #333399);
    background-image:     -ms-linear-gradient(top, #36F, #333399);
    background-image:      -o-linear-gradient(top, #36F, #333399);
	float:left;
	margin:0px 10px 0px 8px;
	padding: 0;	
	border-radius: 5px;
	text-decoration:none;
	-moz-border-radius: 5px;
	box-shadow: 2px 2px 2px #333;
}

.ex_instr_butt p{
	padding: 0px 5px;	
}

.floatp {
	float:left;
	display:block;
	z-index:6;
	width:60px;
	height:28px;
	text-align:center;
}

.floatc {
	float:left;
	display:block;
	z-index:6;
	width:200px;
	height:28px;
	text-align:center;
}

.floatc p {
	font-size:10px;	
}

.float {
	float:left;	
	margin:2px 0;
}

.nofloat {
	float:none;
}

.sec_for {
	position: relative;
	background-color:#000;
	background-color:rgba(0,0,0,.90);
	margin:10px 10px;	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius:10px;
	border:1px solid rgba(51,51,51,1);
	overflow:auto;
}

.sec_for h2 {
	padding: 10px 10px;
}

#battleanim {
	display:none;
	position:absolute;
	background-color:#000;
	width:294px;
	height:54px;
	z-index:1;
	border: 3px groove #f00;
	box-shadow:0px 0px 5px 3px #F00;
	-mox-box-shadow:0px 0px 5px 3px #F00;
	
}

.head_anim {
	height:60px;	
}

#player_anim {
	width: 14px;
	height: 14px;
	z-index:6;
	background-image:url(../images/blockface_blue.png);
	background-position: center;
	background-size:100% 100%;
	/* background-color:#0033CC;
	border: 2px solid white; */
	display: block;
	position:absolute;
	top:40px;
	left:10px;
}

#obs_anim {
	width: 14px;
	height: 14px;
	z-index:4;
	background-image:url(../images/blockface_red.png);
	background-position: center;
	background-size:100% 100%;
	/* background-color:#F00; 
	border: 2px solid white;*/
	display: block;
	position:absolute;
	top:40px;
	left:270px;
}

#play_pwn{
	height:30px;
	width:90px;
	position:absolute;
	top:0px;
	left:5px;
	text-align:center
}

#colresult {
	height:30px;
	width:90px;
	position:absolute;
	top:0px;
	left:100px;
	text-align:center
}

#obs_pwn {
	height:30px;
	width:90px;
	position:absolute;
	top:0px;
	left:200px;
	text-align:center
}



/*Player block classes------------------------------------------*/

/* original colors blue #0033CC, purple #90C, light blue #0CF, green #093*/

.p_blue {
	width: 24px;
	height: 24px;
	z-index:6;
	// background-color:#0d009d;
	background-image:url(../images/blockface_blue_0d009d.png);
	background-position: center;
	background-size:100% 100%;
	display: block;
}

.p_purp {
	width: 24px;
	height: 24px;
	z-index:6;
	// background-color:#00f;
	background-image:url(../images/blockface_blue.png);
	background-position: center;
	background-size:100% 100%;
	display: block;
}

.p_lblue {
	width: 24px;
	height: 24px;
	z-index:6;
	// background-color:#448ccb;
	background-image:url(../images/blockface_blue_448ccb.png);
	background-position: center;
	background-size:100% 100%;
	display: block;
}

.p_green {
	width: 24px;
	height: 24px;
	z-index:6;
	// background-color:#6dcff6;
	background-image:url(../images/blockface_blue_6dcff6.png);
	background-position: center;
	background-size:100% 100%;
	display: block;
}

/*Condition classes --------------------------------*/

.freshp {
	border: 2px solid white;
}

.rdytoroll {
	border: 2px dashed #FFFF00;
}

.rdyToMove {
	border: 2px dotted #F00;
}

.movin {
	border: 2px groove #0F0;
}

.moveSpot {
	border: 1px groove #FF0;
	background-color:#9C6;
}

.moved {
	border: 2px groove #F60;
}

.hlight {
	background-color:rgb(153, 153, 255);
	background-color:rgba(153, 153, 255, 0.5);
}



/*Obstacle classes------------------------------------- */

.obstack{

}

.obmoved {
	
}

/* original colors red #f00, dark red #c00, brown #930, orange #f90 */

.ob_red {
	width: 24px;
	height: 24px;
	border: 2px solid white;
	z-index:4;
	// background-color:#611;
	background-image:url(../images/blockface_red_611.png);
	background-position: center;
	background-size:100% 100%;
	display: block;
}

.ob_dkred {
	width: 24px;
	height: 24px;
	border: 2px solid white;
	z-index:4;
	// background-color:#b00000;
	background-image:url(../images/blockface_red_b00000.png);
	background-position: center;
	background-size:100% 100%;
	display: block;
}

.ob_brown {
	width: 24px;
	height: 24px;
	border: 2px solid white;
	z-index:4;
	// background-color:#f00;
	background-image:url(../images/blockface_red.png);
	background-position: center;
	background-size:100% 100%;
	display: block;
}

.ob_orange {
	width: 24px;
	height: 24px;
	border: 2px solid white;
	z-index:4;
	// background-color:#f56;
	background-image:url(../images/blockface_red_f56.png);
	background-position: center;
	background-size:100% 100%;
	display: block;
}

@media only screen and (min-width: 540px) and (min-height: 600px){
	
	h1 {font-size:24px;}
	h2 {font-size:18px;}
	
	footer {
		height: 80px;	
	}
	
	#main_header, header {
		height: 90px;	
	}
	
	header#main_header h2 {
	
	padding:8px 4px;
	margin: 0 0;
	}
	
	#altpage p{
		font-size: 14px;	
	}
	
	#altpage header p{
		font-size: 14px;	
	}

#battleanim {

	// width:294px;
	height:94px;

	
}

.head_anim {
	height:80px;	
}

#player_anim {
	width: 34px;
	height: 34px;
	
	top:60px;
	left:10px;
}

#obs_anim {
	width: 34px;
	height: 34px;
	
	top:60px;
	left:270px;
}

 p {
	font-size:14px;	
}

a h2{
	padding:0px 4px;	
}

.button_head {
	height:40px;

	padding: 0;	
	border-radius: 5px;
	text-decoration:none;
	-moz-border-radius: 5px;
	box-shadow: 2px 2px 2px #333;
}	

.button_head p {
	padding: 0 8px;	
	margin: 8px 0;
}



footer #select_text {
	height:60px;
	width:70px;
	font-size:13px;
	color:#FFFFFF;
	float:left;
	margin:10px 8px 10px 10px;	
	padding: 5px 5px;
}

footer a#bt_roll {
	height:60px;
	width:60px;
	background-color:#333399;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36F), to(#333399));
    background-image: -webkit-linear-gradient(top, #36F, #333399);
    background-image:    -moz-linear-gradient(top, #36F, #333399);
    background-image:     -ms-linear-gradient(top, #36F, #333399);
    background-image:      -o-linear-gradient(top, #36F, #333399);
	float:left;
	margin:10px 8px;
	padding: 0;	
	border-radius: 5px;
	text-decoration:none;
	-moz-border-radius: 5px;
	box-shadow: 2px 2px 2px #333;
}

footer a#bt_roll:hover {
	box-shadow: -2px -2px 2px #333;	
	
}

footer a#bt_roll p {
	font-size:14px;
	color:#FFFFFF;
	text-shadow:1px 1px 1px #000;
	margin: 18px 14px;
	text-decoration:none;
}

footer div.pnt_arrow {
	height:60px;
	font-size:12px;
	float:left;
	padding:30px 4px;	
}

footer #mov_txt {
	height:60px;
	width:60px;
	font-size:14px;
	color:#FFFFFF;
	float:left;
	margin:10px 8px;	
	padding: 0px 5px;
}

footer a#bt_exmove {
	height:60px;
	width:100px;
	background-color:#333399;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#36F), to(#333399));
    background-image: -webkit-linear-gradient(top, #36F, #333399);
    background-image:    -moz-linear-gradient(top, #36F, #333399);
    background-image:     -ms-linear-gradient(top, #36F, #333399);
    background-image:      -o-linear-gradient(top, #36F, #333399);
	float:left;
	margin:10px 10px 10px 8px;
	padding: 0;	
	border-radius: 5px;
	text-decoration:none;
	-moz-border-radius: 5px;
	box-shadow: 2px 2px 2px #333;
}

footer a#bt_exmove p {
	font-size:14px;
	color:#FFFFFF;
	text-shadow:1px 1px 1px #000;
	margin: 9px 3px;
	text-decoration:none;
	text-align:center;
}

footer a#bt_exmove:hover {
	box-shadow: -2px -2px 2px #333;	
}

.floatp {
	width:70px;	
}

.floatc {
	
}

}

@media only screen and (min-width: 640px) and (min-height: 600px){
    #block_desc, #howtoplay {
		box-sizing: border-box;
		width:46%;
		float:left;
		}
		
	#block_desc {border-right: 1px solid #555;border-bottom:none;}	
		
	#scr_examp {
		width:50%;
		margin: 10px 10px 10px 10px;
	}
	
}