@charset "utf-8";
/***************************************************************************
 *                          (css) dm_codeide.css
 *                          --------------------
 *   begin                : 07-Apr-2015
 *   modified             : 20-Apr-2015
 *   copyright            : (C) 2015 Daniel Julivert
 *   email                : ghoulwiz@gmail.com
 *   description          : Datamining Coding IDE 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;
}


/********************************************************************************
  Coding IDE area
********************************************************************************/

.dmIDEArea {
	text-align: left;
	color: green;
	position: relative;
	font-family: 'VT323', "Courier New", Courier, monospace;
	font-size: 12px;
	background-color: #000000;
	background-image: url(../img/datamining.jpg);
	background-size: cover;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid green;
}

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

.dmIDEArea div.dmNameArea {
	position: absolute;
	text-align: right;
}

.dmHelpIcon {
	font-family: FontAwesome;
	font-size: 12px;
	cursor: help;
}

.dmToolTip, .dmPopupMessage {
	font-family: 'VT323', "Courier New", Courier, monospace;
	font-size: 14px;
	padding: 10px;
	max-width: 300px;
	background-color: black;
	border: 1px solid green;
	border-radius: 10px;
	box-shadow: 0 0 0 5px black;
	opacity: 0.8;
}

.dmPopupMessage {
	position: absolute;
	display: none;
	width: 50%;
	left: 25%;
	top: 50%;
	text-align: center;
	cursor: pointer;
}

.dmModalDarken {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: black;
	opacity: 0.8;
	display: none;
	z-index: 400;
}


/********************************************************************************
  Memory area and code grid
********************************************************************************/

.dmIDEArea #dmCodeArea {
	position: absolute;
	top: 0px;
}

.dmIDEArea #dmCodeArea div.codeGrid {
	position: absolute;
	border: 1px green solid;
	box-sizing: content-box;
	opacity: 0.2;
}
.dmIDEArea #dmCodeArea div.codeGridStart {
	box-shadow: inset 0px 0px 15px cyan;
}


/********************************************************************************
  Code blocks
********************************************************************************/

.dmIDEArea div.codeBlock {
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 9px;
	border-radius: 10px;
}

.dmIDEArea div.codeIcon {
	font-family: FontAwesome;
	text-align: center;
	line-height: 30px;
	font-size: 15px;
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

.dmBlockSelected {
	border-color: cyan !important;
	box-shadow: 0px 0px 5px cyan;
}


/********************************************************************************
  Code block arrows
********************************************************************************/

.dmBlockArrowUpYes:after, .dmBlockArrowRightYes:after, .dmBlockArrowDownYes:after, .dmBlockArrowLeftYes:after,
.dmBlockArrowUpNo:before, .dmBlockArrowRightNo:before, .dmBlockArrowDownNo:before, .dmBlockArrowLeftNo:before {
	font-family: FontAwesome;
	font-size: 10px;
	position: absolute;
  text-shadow:
		-1px -1px 0 #000,  
		 1px -1px 0 #000,
		-1px  1px 0 #000,
		 1px  1px 0 #000;
}
.dmBlockArrowUpYes:after, .dmBlockArrowRightYes:after, .dmBlockArrowDownYes:after, .dmBlockArrowLeftYes:after {
	color: lime;
}
.dmBlockArrowUpNo:before, .dmBlockArrowRightNo:before, .dmBlockArrowDownNo:before, .dmBlockArrowLeftNo:before {
	color: red;
}
.dmBlockArrowUpYes:after, .dmBlockArrowUpNo:before {
  content: "\f062";
	left: 50%;
	top: -5px;
}
.dmBlockArrowUpYes:after { margin-left: -9px; }
.dmBlockArrowUpNo:before { margin-left: 1px; }

.dmBlockArrowRightYes:after, .dmBlockArrowRightNo:before {
	content: "\f061";
	top: 50%;
	right: -5px;
}
.dmBlockArrowRightYes:after { margin-top: -9px; }
.dmBlockArrowRightNo:before { margin-top: 1px; }

.dmBlockArrowDownYes:after, .dmBlockArrowDownNo:before {
	content: "\f063";
	right: 50%;
	bottom: -5px;
}
.dmBlockArrowDownYes:after { margin-right: -10px; }
.dmBlockArrowDownNo:before { margin-right: 0px; }

.dmBlockArrowLeftYes:after, .dmBlockArrowLeftNo:before {
	content: "\f060";
	bottom: 50%;
	left: -5px;
}
.dmBlockArrowLeftYes:after { margin-bottom: -10px; }
.dmBlockArrowLeftNo:before { margin-bottom: 0px; }


/********************************************************************************
  Code block types
********************************************************************************/

#dmBlockSelector div.codeGridStart {
	background-color: black;
	color: cyan;
	border: 1px cyan solid;
}

.dmBlockType_noop {
	background-color: #111100;
	color: #444422;
	border: 1px #444422 solid;
}

.dmBlockType_send {
	background-color: #000022;
	color: #1c1c8a;
	border: 1px #1c1c8a solid;
}

.dmBlockType_receive {
	background-color: #220022;
	color: #7c007c;
	border: 1px #7c007c solid;
}

.dmBlockType_infect {
	background-color: #220000;
	color: #840f0f;
	border: 1px #840f0f solid;
}

.dmBlockType_crash {
	background-color: #222200;
	color: #7c7c00;
	border: 1px #7c7c00 solid;
}

.dmBlockType_download {
	background-color: #004422;
	color: #00974d;
	border: 1px #00974d solid;
}

.dmBlockType_condit {
	background-color: #222244;
	color: #4f4fa5;
	border: 1px #4f4fa5 solid;
}

.dmBlockType_math {
	background-color: #224422;
	color: #4fa54f;
	border: 1px #4fa54f solid;
}

.dmBlockType_set {
	background-color: #002200;
	color: green;
	border: 1px green solid;
}


/********************************************************************************
  Block selector and editor
********************************************************************************/

#dmBlockSelector, #dmBlockEditor {
	position: absolute;
	border: 1px green solid;
	background-color: #000800;
	left: 2px;
	top: 2px;
	border-radius: 8px;
	padding: 5px;
	overflow: auto;
}

#dmBlockSelector p {
	margin: 0px 0px 4px 0px;
}

#dmBlockSelector p div.codeBlock {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

#dmBlockEditor div.codeBlock {
	position: relative;
	float: left;
	margin-right: 10px;
}

.dmDelteBlock {
	font-family: FontAwesome;
	font-size: 10px;
	float: right;
	color: red;
	cursor: pointer;
	border: 1px red solid;
	border-radius: 10px;
	width: 12px;
	height: 12px;
	text-align: center;
	vertical-align: middle;
}

.dmDelteBlock:hover {
	background-color: red;
	color: black;
}

#dmBlockEditor div.dmBlockControls {
	float: right;
}

#dmBlockEditor div.dmBlockControls>div {
	display: inline-table;
	border-left: 1px green solid;
	padding-left: 5px;
	margin-left: 5px;
	text-align: center;
}

/* ----------------- Flow selectors ----------------- */

#dmBlockEditor div.dmFlowSelector div {
	font-family: FontAwesome;
	font-size: 10px;
	display: inline-block;
	position: relative;
	width: 30px;
	height: 30px;
}

#dmBlockEditor div.dmFlowSelector div.dmFlowSelectorYes span { color: lime; }
#dmBlockEditor div.dmFlowSelector div.dmFlowSelectorNo  span { color: red; }
#dmBlockEditor div.dmFlowSelector div.dmFlowSelectorOff span { color: #333333; }
#dmBlockEditor div.dmFlowSelector div.dmFlowSelectorToggle span.dmBitOn  { color: cyan; }
#dmBlockEditor div.dmFlowSelector div.dmFlowSelectorToggle span.dmBitOff { color: blue; }

#dmBlockEditor div.dmFlowSelector div span {
	width: 10px;
	height: 10px;
	position: absolute;
}
#dmBlockEditor div.dmFlowSelector div span:first-child {
	left: 0px;
	top: 10px;
}
#dmBlockEditor div.dmFlowSelector div span:nth-child(2) {
	left: 10px;
	top: 0px;
}
#dmBlockEditor div.dmFlowSelector div span:nth-child(3) {
	left: 10px;
	bottom: 0px;
}
#dmBlockEditor div.dmFlowSelector div span:nth-child(4) {
	right: 0px;
	top: 10px;
}
#dmBlockEditor div.dmFlowSelector div span:nth-child(5) {
	right: 10px;
	top: 10px;
}

#dmBlockEditor div.dmFlowSelector div:not(.dmFlowSelectorOff) span {
	cursor: pointer;
}
#dmBlockEditor div.dmFlowSelector div:not(.dmFlowSelectorOff) span:hover {
  text-shadow: 0px 0px 3px cyan;
}

/* ----------------- Dropdown selectors ----------------- */

#dmBlockEditor div.dmSelectorDropdownVariable,
#dmBlockEditor div.dmSelectorDropdownChannel,
#dmBlockEditor div.dmSelectorDropdownCondition,
#dmBlockEditor div.dmSelectorDropdownOperation {
	font-size: 18px;
	font-weight: bold;
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 26px;
	border-radius: 10px 5px;
	text-align: center;
}

#dmBlockEditor div.dmSelectorDropdown {
	position: absolute;
	top: 0px;
	background-color: black;
	padding: 5px;
	border: 1px green solid;
	border-radius: 15px;
	box-shadow: 0px 0px 10px green;
}

#dmBlockEditor div.dmSelectorDropdown>div {
	margin: 0px 1px;
}

/* ----------------- Variable and channel selectors ----------------- */

#dmBlockEditor div.dmSelectorDropdownVariable {
	color: #444488;
	border: 1px #444488 solid;
	background-color: #111122;
}

#dmBlockEditor div.dmSelectorDropdownChannel {
	color: #226688;
	border: 1px #226688 solid;
	background-color: #001122;
}

/* ----------------- Condition and Operation selectors ----------------- */

#dmBlockEditor div.dmSelectorDropdownCondition {
	color: #884444;
	border: 1px #884444 solid;
	background-color: #221111;
}

#dmBlockEditor div.dmSelectorDropdownOperation {
	color: #668822;
	border: 1px #668822 solid;
	background-color: #112200;
}


/********************************************************************************
  IDE menu
********************************************************************************/

#dmBlockSelector div.dmMenuIcon {
	font-family: FontAwesome;
	font-size: 18px;
	text-align: center;
	position: absolute;
	top: 2px;
	right: 2px;
	width: 22px;
	height: 20px;
	cursor: pointer;
	color: green;
	border-radius: 5px;
}
#dmBlockSelector div.dmMenuIcon:hover {
	background-color: green;
	color: black;
}

#dmBlockSelector div.dmMenuArea {
	position: absolute;
	top: 2px;
	right: 2px;
	display: none;
	border-radius: 10px;
	background-color: black;
	border: 1px green solid;
	overflow: hidden;
	white-space: nowrap;
	box-shadow: 0 0 10px green;
}

#dmBlockSelector div.dmMenuArea p {
	cursor: pointer;
	margin: 0;
	padding-right: 10px;
	/*border-radius: 5px;*/
}
#dmBlockSelector div.dmMenuArea p:hover {
	background-color: green;
	color: black;
}


/********************************************************************************
  Clickable entities
********************************************************************************/

.dmIDEArea .dmClickable {
	cursor: pointer;
}

.dmIDEArea .dmClickable:hover {
	border: 1px lime solid !important;
	opacity: 1 !important;
}