@charset "UTF-8";
/* CSS Document */

p, h1{	margin:0px;}

/**********************************************/
/*			2 COLUMNS SAME SIZE				  */
/**********************************************/
/*Step by step explanation to get n columns with same height to display border correctly

.mastercontainer defines new Row

.leftborder goes inside of mastercontainer and defines the border that will be displayed for the first column. it's width is boxleft's width + padding.

.rightborder goes inside leftborder and defines the border that will be displayed for the second column. It's width is boxright's width + padding. It's position should be relative left: leftborder's width + border*2 + boxright's margin.

.columncontainer goes inside rightborder and will contain the columns itself. It should be positioned left the same amount the rightborder was moved right.

*/


.leftborder{ width:375px; float:left; border:2px outset blue; box-shadow: 10px 10px 5px #888888;	-moz-box-shadow: 10px 10px 5px #888888;}

.rightborder{	float:left;	position:relative;	left:399px;	width:626px;	border:2px outset blue;	box-shadow: 10px 10px 5px #888888;-moz-box-shadow: 10px 10px 5px #888888;}

.columncontainer{	width:1024px;float:left;position:relative;left:-399px;}

.boxleft{width:335px;margin:0px; float:left;padding:20px;}
	
.boxright{width:586px;margin:0 0 0 15px;float:left;	padding:20px;text-align:center;}


/*		END OF 2 COLUMNS SAME SIZE			  */
/**********************************************/
.mastercontainer{ width:100%; clear:left;}
.left-container{border:1px solid blue; padding:5%; max-width:400px; width:85%; margin:0 auto;}
.right-container{ text-align:center; margin-top:20px; border-bottom:2px solid #C00; padding-bottom:20px;}

#controlscreentext{ border:1px solid blue; max-width:400px; width:85%; margin:0 auto; padding:5%; margin-bottom:20px;}


/*table style*/
th{ text-align:left;}
.tline{ padding-left:30px;  }
.ttitle{ background-color:#CCC;}
table td:nth-child(2) { text-align:center;}
table td:nth-child(3) { text-align:center;}
.fa{ color:green;}


/* Desktop Layout: 769px to a max of 800.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 1024px) {
.mastercontainer{ width:1024px;	clear:left;}
.left-container{ width:376px; max-width:376px; padding:20px; float:left; box-shadow: 8px 8px 5px rgba(0,0,0,0.4); -moz-box-shadow: 8px 8px 5px rgba(0,0,0,0.4); -webkit-box-shadow: 8px 8px 5px rgba(0,0,0,0.4); margin-bottom:20px;}
.right-container{ width:586px; float:left; margin-left:20px; margin-top:0px; border-bottom:none;}
.controlscreen{	width:988px; border:2px outset blue; padding:20px; box-shadow: 10px 10px 5px #888888; -moz-box-shadow: 10px 10px 5px #888888;}
#controlscreentext{ border:none; max-width:988px; width:988px; margin:auto 0; padding:20px;;}

}