@charset "UTF-8"; /* DW defaults to lower case but Udemy cites upper case */
/* "original" is a bad name for this. I'm using the original css file from the tutorial
on using css to adapt to various devices. When I start from scratch, my iPhone
fails to pick up the formatting. So instead, I'm keeping the html and the css 
and trying to pare down and modify the original. */


div.image {/* created for svg library */
	padding: 4px 2px 2px 2px;
	 
}

div.interactive {
	/* border-color: #aaa;
	border-width: 1px; */
	border: 1px solid #ccc; /* 3CF blue border so I can see it during development */
	padding: 2px 2px 2px 2px;
	/*overflow-y:scroll; */
	
}

div.section {
	border: 1px solid #87b6d5; /*#0C3 blue border so I can see it during development */
	padding: 2px 2px 2px 2px;

}

div.imagemenu { /* created for svg library image selections*/
	border: 1px solid #87b6d5; /*#0C3 blue border so I can see it during development */
	padding: 2px 2px 2px 2px;
	/*overflow: scroll;*/
	overflow-x: hidden;
	overflow-y: scroll;
	
	max-height: 300px;
	min-width: 130px;
}

button.category{
	width: 120px;
	background: rgba(200,200,200,1)  url(../common/arrowdownblack.png) no-repeat right 100%; 
	text-align:left;
}

button.color{/*created for svg library color buttons*/
	height: 1.5em; 
	width: 1.5em;
	border: none;
	
/*	width: 30px; /*	background-size: 10px 20px;
	/*background: url(arrowright.png) no-repeat right;*/
}

svg {
	border: 1px solid #FC3; /* green border so I can see it during development */
	padding: 4px 4px 4px 4px;
}

div.title {
	height: 20px;
}

div.menu {
	background-color: #333;
}

div.controllers {
	border: 1px solid #0C3; /* blue border so I can see it during development */
	padding: 2px 2px 2px 2px;
}

div.controller { }

div.iounits {
	border: 1px solid #0C3; /* blue border so I can see it during development */
	padding: 2px 2px 2px 2px;
}

div.iounit {}
div.iounitconfig{ /* float: right;*/ }

div.floating {
	opacity: 0.5;
	color:#F8E5BA;
	position: absolute;
	top: 4em;
	left: 0;
	background-color: #369;
	border: 1px solid #fff;
	padding: .2em;
	outline: 0;
}

div.asset {
	border: 1px solid ; 
	width: 300px;
	margin: 0px 2px 2px 2px;
	padding: 2px 2px 2px 2px;
}
div.asset:hover {background-color: rgba(44,80,117,.7); color: #fff;}

div.iounit {
	border: 1px solid #CC3; /* blue border so I can see it during development */
	padding: 2px 2px 2px 2px;
}

div.rack{ }

div.rack:hover {background-color: rgba(251,176,59,.7); color: #fff;}

div.brain {}

div.brain:hover {background-color: rgba(251,176,59,.7); color: #fff;}

div.module { }

div.module:hover {background-color: rgba(251,176,59,.7); color: #fff;}

div.about {background-color: rgba(44,80,117,.7); color: #fff;}

div.partSelector {
	position: absolute;
	float: right;
	font-size: 1.4em; 
	/*color: #276193; */
	margin: 2px 2px 2px 2px; 
	font-weight: normal; 
	border-width: 0px 0px 0px 0px;
	border-radius: 8px;
	background: linear-gradient(to bottom, rgba(221,81,21,0.5), rgba(102,0,0,0.5));
	/*background: url(timer.png) no-repeat 0px 0px;*/
}

div.brainselector{
	/*position: absolute;*/
	float: right;
	font-size: 1.4em; 
	/*color: #276193; */
	margin: 2px 2px 2px 2px; 
	font-weight: normal; 
	border-width: 0px 0px 0px 0px;
	border-radius: 8px;
	background: linear-gradient(to bottom, rgba(221,81,21,0.5), rgba(102,0,0,0.5));
}

div.message {
	position: absolute;
	float: right;
	font-size: 1.4em; 
	/*color: #276193; */
	margin: 2px 2px 2px 2px; 
	font-weight: normal; 
	border-width: 0px 0px 0px 0px;
	border-radius: 8px;
	background: linear-gradient(to bottom, rgba(221,81,21,0.5), rgba(102,0,0,0.5));
	/*background: url(timer.png) no-repeat 0px 0px;*/
}

div.tmpDescription {
	color: #0F3;
	float: right;
}

table {
	margin: 0px 0px 0px 0px;
}

tr {
	margin: 0px 0px 0px 0px;
}

td.menu {vertical-align: top;}
td.list {vertical-align: top;}

td.tCell { font-size: 10px;}

td.part {padding-left: 10px;}

p.asset {
	text-align:center;
}
p {
	margin: 1px 1px 1px 1px;
	font-size: 10px;	
}
p.channel{
	text-align: center;	
}
p.selection{
	font-size: 10px;
	margin: 0px 0px 0px 0px;
}
p.selection:hover {
	background-color: rgba(44,80,117,.7); color: #fff;
}

body {
	font-family: Arial;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	color: #999;
	background: #252525; /* #000*/
} /* Using padding values creates a problem with aligning canvases */

.caption { 
	width: 40px; 
	height: 40px;
	/*float: right; */
	color: #3CF;
	margin-left: 5px; 
	border-width: 1px 1px 1px 1px;
	border-radius: 2px;
	border-color: #3FF;
}

.firsttest {
	 width: 100%; 
}

.page {
	position: relative; 
	margin: 0px auto 0px, auto; 
	max-width: 900px;
	margin-left: 10px;
	font-size: 1em;
}

h1 { font-size: 1.8em; color: #276193; margin: 0px 0px .5em opx; font-weight: normal; }

button.edit {/* top of screen navigation of major topics */
	font-size: 1.4em; 
	color: #276193; 
	margin: 0px 0px .5em 0px; 
	font-weight: normal; 
	border-width: 0px 0px 0px 0px;
	border-radius: 8px;
}

button.ui {
	font-size: 1.4em; 
	/*color: #276193; */
	margin: 0px 0px .5em 0px; 
	font-weight: normal; 
	border-width: 0px 0px 0px 0px;
	border-radius: 8px;
	background: linear-gradient(to bottom, rgba(221,81,21,0.5), rgba(102,0,0,0.5));
	/*background: url(timer.png) no-repeat 0px 0px;*/
}

button.showhide {
	background: rgba(102,102,102,0.5) url(../common/arrow_down.png) no-repeat 100%;
	height: 20px;
	width: 20px;
	float: right;
}

button.topic {/* top of screen navigation of major topics */
	font-size: 1.4em; 
	color: #276193; 
	margin: 0px 0px .5em 0px; 
	font-weight: normal; 
	border-width: 0px 0px 0px 0px;
	border-radius: 8px;
}

/*button.toggle { font-size: 1.8em; color: #276193; margin: 0px 0px .5em 0px; font-weight: normal; }*/
button.back {font-size: 1.4em; 
	color: #ccc; 
	background-color: rgba(0,0,0,.6);
	margin: 0px 0px .5em 0px; 
	font-weight: normal; 
	border-width: 0px;
	border-radius: 4px;
	background: rgba(102,102,102,0.5) url(arrow_left.png) no-repeat left 100%;
	/*height: 16px;
	width: 30px;*/
	margin: 0px 1px .5em 1px; 
	padding: 0px 10px 0px 10px;
}

button.next {font-size: 1.4em; 
	color: #ccc; 
	background-color: rgba(0,0,0,.6);
	margin: 0px 0px .5em 0px; 
	font-weight: normal; 
	border-width: 0px;
	border-radius: 4px;
	background: rgba(102,102,102,0.5) url(arrow_right.png) no-repeat right 100%;
	/*height: 16px;
	width: 30px;*/
	margin: 0px 1px .5em 1px; 
	padding: 0px 10px 0px 10px;
}

/* medium screen */
@media screen and (min-width: 501px) and (max-width: 890px){ /* was 800px */
	img.topic {
			width: 100%; 
		} 
		
	button.topic { /*font-size: 0.8em; color: #276193; margin: 0px 0px .5em opx; font-weight: normal;*/
		/*color: #000; */
		padding: 2px 4px 2px 4px;
		font-weight: bold; 
		font-size: 1.2em;
		/* width: 10%;  */
		/*display: block; doesn't work on the button*/
		/*margin: 0px 10px 15px 10px;*/
		margin: 10px 10px .5em 0px;
	/*	background: #47657f url(../images/link_arrow_right.png) no-repeat right 50%; */
		border-radius: 16px;
		-moz-border-radius: 16px;
		-webkit-border-radius: 16px;
	 }
	
/* Small screen */
@media screen and (min-width: 150px) and (max-width: 500px){
	
	
	/*canvas{ width: 100%; height: 100%; } */
	img.topic {
			width: 100%; 
		} 
		
	div.count {
		/*float: right;*/
		margin-left: 5px;
	}

	h1 { font-size: 1em; color: #276193; margin: 0px 0px .5em 0px; font-weight: normal; }
	button.topic { /*font-size: 0.8em; color: #276193; margin: 0px 0px .5em opx; font-weight: normal;*/
		color: #fff;
		padding: 5px 8px 5px 8px;
		font-weight: bold; 
		font-size: 1.2em;
		/* width: 10%;  */
		/*display: block; doesn't work on the button*/
		/*margin: 0px 10px 15px 10px;*/
		margin: 2px 2px .5em 0px;
		border-radius: 16px;
		-moz-border-radius: 16px;
		-webkit-border-radius: 16px;
	 }

	body { padding: 0px; 
	font-size: .5em;
	} 
	
	.page { margin: 0px; padding: 0px; font-size: 1.2em;}

	.button_container{ /* contains back next buttons */
		margin-top: 10px;
		width: 100%;
	}
	
	button.back {
		/* height: 100px; */
		margin-left: 5px;
		background: url();
		background-color: rgba(128, 128, 128, 0.2);
		float: left;
		height: 100px;
		width: 5px;
	}
	
	button.next {
		/* height: 100px; */
		background: url();
		background-color: rgba(128, 128, 128, 0.2);
		float: right;
		height: 100px;
		width: 5px;
	}
	
	div.interactive {
		width: 95%;
	}
	div.imenu {
		float:right;
		width: 30px;
	}
	
	.page nav a:hober{
		color: #fff; background-color: #27425a;
	}
	.page footer { font-size: .8em;}
}