@charset "utf-8";
/***************************************************************************
 *                          (css) dm_gameengine.css
 *                          -----------------------
 *   begin                : 31-Mar-2015
 *   modified             : 17-Apr-2015
 *   copyright            : (C) 2015 Daniel Julivert
 *   email                : ghoulwiz@gmail.com
 *   description          : Datamining game CSS
 *
 ***************************************************************************/


@import url(http://fonts.googleapis.com/css?family=VT323);

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/********************************************************************************
  Game area
********************************************************************************/

.dmGameArea {
	text-align: left;
	color: green;
	position: relative;
	font-family: 'VT323', "Courier New", Courier, monospace;
	font-size: 12px;
	background-color: #000000;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid green;
	/*
	box-sizing: border-box;
	*/
}

.dmGameArea div {
	box-sizing: border-box;
}

.dmGameArea div.dmHelpIcon, .dmGameArea div.dmPauseIcon {
	font-family: FontAwesome;
	position: absolute;
	top: 3px;
	width: 15px;
	height: 15px;
	line-height: 13px;
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
	color: #32CD32;
	background-color: #000000;
	z-index: 100;
}
.dmGameArea div.dmHelpIcon  {
	border: 1px #32CD32 solid;
	right: 3px;
}
.dmGameArea div.dmPauseIcon {
	border: 1px black solid;
	right: 20px;
}

.dmGameArea div.dmHelpIcon:hover, .dmGameArea div.dmPauseIcon:hover {
	color: #000000;
	border: 1px #32CD32 solid;
	background-color: #32CD32;
}

.dmGameArea .dmTickCounter {
	position: absolute;
	right: 3px;
	bottom: 3px;
}

.dmGameArea #dmGameMemory {
	position: absolute;
	/*border: 1px green solid;*/
	background-color: #000000;
	background-image: url(../img/datamining.jpg);
	background-size: cover;
}


/********************************************************************************
  Splash title
********************************************************************************/

.dmGameArea div.dmSplashTitle {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: green;
	background-color: rgba(0,0,0,0.8);
	text-align: center;
	font-size: 16px;
	z-index: 1000;
}

.dmGameArea div.dmSplashTitle h1 {
	font-size: 72px;
	font-weight: bold;
	text-shadow: 0px 0px 5px green;
}

.dmGameArea div.dmSplashTitle span {
	border: 1px green solid;
	border-radius: 20px;
	padding: 5px 15px;
	cursor: pointer;
	background-color: black;
}

.dmGameArea div.dmSplashTitle span:hover {
	color: black;
	background-color: green;
}


/********************************************************************************
  Game cells
********************************************************************************/

.dmGameArea #dmGameMemory div.dmCell {
	position: absolute;
	left: 0px;
	top: 0px;
}

div.dmCell {
	width: 20px;
	height: 20px;
	font-size: 9px;
	border-radius: 5px;
}

.dmGameArea #dmGameMemory.dmMemoryHidden div.dmCell {
	opacity: 0;
}
.dmGameArea #dmGameMemory.dmMemoryShown div.dmCell {
	opacity: 0.4;
}

div.dmCell div.cellIcon {
	font-family: FontAwesome;
	text-align: center;
	line-height: 18px;
	position: absolute;
	font-size: 12px;
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

.dmDataVisible {
	opacity: 1 !important;
}

.dmDataAccessible {
	cursor: pointer;
	box-shadow: inset 0px 0px 2px #0000aa;
	border: 1px #0000aa solid;
	opacity: 1 !important;
}

.dmDataAccessed {
	cursor: help;
	border: 1px green solid;
	box-shadow: none;
	opacity: 1 !important;
}

.dmDataSelected {
	border: 1px cyan solid !important;
	box-shadow: 0px 0px 5px cyan;
}


/********************************************************************************
  Game cell types
********************************************************************************/

.dmDataType_io {
	background-color: #000022;
	color: #1c1c8a;
}

.dmDataType_workstn {
	background-color: #002200;
	color: green;
}

.dmDataType_database {
	background-color: #002222;
	color: #1c8a8a;
}

.dmDataType_firew {
	background-color: #220000;
	color: #840f0f;
}

.dmDataType_cpu {
	background-color: #222200;
	color: #7c7c00;
}

.dmDataType_hub {
	background-color: #004422;
	color: #00974d;
}

.dmDataType_gateway {
	background-color: #220022;
	color: #7c007c;
}

.dmDataType_host {
	background-color: #222244;
	color: #4f4fa5;
}


/********************************************************************************
  Game and log consoles
********************************************************************************/

#dmNodeInfo, #dmLogConsole, #dmSysInfo {
	position: absolute;
	/*border: 1px green solid;*/
	background-color: #000800;
	overflow: auto;
	left: 0px;
	top: 0px;
	box-sizing: border-box;
	padding: 2px;
}
#dmLogConsole, #dmSysInfo { border-right: 1px green solid; }
#dmSysInfo { border-bottom: 1px green solid; border-top: 1px green solid; }
#dmNodeInfo { border-top: 1px green solid; }

#dmNodeInfo p, #dmLogConsole p {
	margin: 0px;
	padding-left: 10px;
	text-indent: -10px;
}
#dmLogConsole p.dmAccessLogEntry { display: none; }
#dmLogConsole.dmShowAccessLogEntries p.dmAccessLogEntry { display: block; }

#dmLogConsole div.dmAccessLogToggleIcon {
	font-family: FontAwesome;
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 15px;
	height: 15px;
	line-height: 13px;
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
	color: green;
	background-color: #000000;
	z-index: 100;
}
#dmLogConsole div.dmAccessLogToggleIcon:hover {
	color: #000000;
	border: 1px green solid;
	background-color: green;
}

#dmSysInfo p {
	white-space: pre-wrap;
	margin: 0px;
}


/********************************************************************************
  Help window
********************************************************************************/

.dmHelpWindow {
	position: absolute;
	border-radius: 10px;
	border: 1px solid green;
	box-sizing: border-box;
	box-shadow: 0px 0px 10px green;
	background-color: #000800;
	overflow: auto;
	left: 10px;
	top: 10px;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: none;
}

.dmHelpWindow h2 {
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	margin-top: 0px;
	border-bottom: 1px solid green;
}