@import url(http://reset5.googlecode.com/hg/reset.min.css);
@import url(http://fonts.googleapis.com/css?family=Asap:400,400italic,700,700italic);

body, html {
	padding : 0;
	margin: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

sup {
	font-size:xx-small;
	vertical-align:top;
} 

#application {
	font-family: 'Asap';
	padding : 0;
	margin: 0;
	height: 100%;
	width: 100%;

  	display : -moz-box;
	display : -webkit-box;
	display : box;

	-moz-box-orient : vertical;
	-moz-box-flex : 1;
	
	-webkit-box-orient : vertical;
	-webkit-box-flex : 1;
	
	box-orient : vertical;
	box-flex : 1;
}

#visualization {
	width: 100%;

  	display : -moz-box;
	display : -webkit-box;
	display : box;
	
	-moz-box-orient : vertical;
	-moz-box-flex : 1;
	
	-webkit-box-orient : vertical;
	-webkit-box-flex : 1;
	
	box-orient : vertical;
	box-flex : 1;
}
#main-row {

	width: 100%;
  	display : -moz-box;
	display : -webkit-box;
	display : box;

	-moz-box-orient : horizontal;
	-moz-box-flex : 1;
	
	-webkit-box-orient : horizontal;
	-webkit-box-flex : 1;
	
	box-orient : horizontal;
	box-flex : 1;
}

#navigation-panel {
	background-color: #454545;
	position: relative;

	font-size: 1em;
	color: #000;
	padding: 10px;

	width: 100%;
	height: 30px;

	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
}

#navigation-panel .visualization-step {
	padding: 0 20px;
	border-right: 2px solid #000;
}

#navigation-panel .visualization-step.active {
	color: #fff;
}



header {
	background-color: #91948e;
	position: relative;

	font-size: 1em;
	color: #3a3c38;
	font-weight: bold;
	padding: 10px;

	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
}


#graphics-panel {
	background-color: #252525;

	-moz-box-flex : 1;	
	-webkit-box-flex : 1;
	box-flex: 1;
}

canvas {
	position: absolute;
}

#text-panel {
	padding-top: 5px;
	background-color: #202020;
	width: 400px;
}

.text-box {
	border-radius: 2px;
	line-height: 1.3em;
	font-size: 0.9em;
	background-color: #fff;
	margin: 10px;
	padding: 20px;

	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
}


.text-box p {
	margin-bottom: 20px;
}

.action-button {
	
	border-radius: 2px;
	margin-right: 10px;
	text-decoration: none;
	color: #fff;
	padding: 10px;
	background: #7db9e8;
	background: -moz-linear-gradient(top, #7db9e8 0%, #1e5799 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(100%,#1e5799));
	background: -webkit-linear-gradient(top, #7db9e8 0%,#1e5799 100%);
	background: -o-linear-gradient(top, #7db9e8 0%,#1e5799 100%);
	background: -ms-linear-gradient(top, #7db9e8 0%,#1e5799 100%);
	background: linear-gradient(top, #7db9e8 0%,#1e5799 100%);
}

.next-button {
	
	border-radius: 2px;
	text-decoration: none;
	color: #fff;
	padding: 10px;
	margin-right: 10px;
	background: #c9de96;
	background: -moz-linear-gradient(top, #c9de96 0%, #398235 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(100%,#398235));
	background: -webkit-linear-gradient(top, #c9de96 0%,#398235 100%);
	background: -o-linear-gradient(top, #c9de96 0%,#398235 100%);
	background: -ms-linear-gradient(top, #c9de96 0%,#398235 100%);
	background: linear-gradient(top, #c9de96 0%,#398235 100%);
}