/*
	screen.css
	
	Experiment Stylesheet.
	
	© Alexander Wright, 2013
	
	Design
	
	 ___________________________________________________
	|                                                   |
	|   Head                              				|
	|___________________________________________________|
	|   Navigation						                |
	|___________________________________________________|
	|  	Content                                          |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|___________________________________________________|
	|    Foot                                           |
	|___________________________________________________|
	
	
	
	Green Colour:	#339933 - on white backgrounds
					#66cc66 - on black backgrounds
	
	
 */
 
 @media screen {
	 
	.shadowBox {
		margin:						20px 10px;
		padding:					10px;
		box-shadow: 				0px 5px 10px #888888;		
	}
	 
	.purpleTop {
		border-top:					5px solid #6600CC;
	}

	.greenTop {
		border-top:					5px solid #339933;
	}

	.blueTop {
		border-top:					5px solid #3333CC;
	}

	.redTop {
		border-top:					5px solid #993333;
	}

	.yellowTop {
		border-top:					5px solid #fae535;
	}

	/*
		Thin ones
	*/

	.purpleTopThin {
		border-top:					2px solid #6600CC;
	}

	.greenTopThin {
		border-top:					2px solid #339933;
	}

	.blueTopThin {
		border-top:					2px solid #3333CC;
	}

	.redTopThin {
		border-top:					2px solid #993333;
	}

	.yellowTopThin {
		border-top:					2px solid #fae535;
	}
	 
	/* 
		Layout: 
		=============================================================================== 
	 */

	/* Work Around Default Padding Issues in Browsers: */
	* {
		margin:					0px;
		padding:				0px;	
		font-family: 			Century Gothic, sans-serif;
		font-weight:			normal;
		color:					#000000;
	}

	html,body {
		
		background-color:           #EEEEEE;
		background-image:           url(../gfx/bk/whitetile.png);
		background-position:        top center; 
		background-repeat:          repeat;
		text-align:            		center;
		margin:						0;
		padding:					0;
		height:						100%;
		
		-webkit-font-smoothing: antialiased;
		font-smooth:			always;
		font-size:				100%;	
	}

	/*
		Popup Stuff
	*/

	.popUpBox{   
		display: 					none;	
		background-color: 			#FFFFFF;
		top:						50%;
		left:						50%;
		width: 						600px;
		height: 					400px;	
		margin-top: 				-200px; /* Half the height */
		margin-left: 				-300px; /* Half the width */
		
		z-index: 					1001;
		box-shadow: 				0px 5px 10px #555555;	
	}

	.dimLayer {
		/*display: 					none;/**/
		outline: 					0px none;
		/*height: 					100%;
		width: 						100%;*/
		background: 				#333333;
		top: 						0px;
		left: 						0px;
		bottom:	 					0px;
		right:	 					0px;
		z-index: 					900;
		position:					absolute;
		opacity: 					0.5;
		filter: 					alpha(opacity=50);
		-ms-filter: 				"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		-khtml-opacity: 			0.5;
		-moz-opacity: 				0.5;
	}


	.popUpTitle {
		width: 						100%;
	}

	.popUpTitleClose{
		float: 						right;
		margin-right: 				5px;
		margin-top: 				5px;
	}

	.data {
		height: 					auto;
		overflow: 					hidden;
		padding: 					25px;
		width: 						550px;
	}

	.alertBar {
		width: 						100%;
		text-align: 				center;
		font-size: 					1.5em;
		color: 						#660000;
		background-color: 			#FF6666;
	}

	.successBar {
		width: 						100%;
		text-align: 				center;
		font-size: 					1.5em;
		color: 						#006600;
		background-color: 			#99FF99;
	}

	.successBar:hover {
		background-color: 			#CCFFCC;
	}


	/*
		Main Content
	*/

	#wrap {
		width:						100%;
		min-width:					1000px;
		min-height:					100%;
		position:					relative;
	}

	header {
		background:					#333333;
		padding:					10px;
		background-image: 			-moz-linear-gradient(top, #555555, #111111);
		background-image: 			-ms-linear-gradient(top, #555555, #111111);
		background-image: 			-webkit-linear-gradient(top, #555555, #111111);
		background-image: 			-o-linear-gradient(top, #555555, #111111);
		background-image: 			linear-gradient(top, #555555, #111111);
		width:						auto;
	}

	nav {
		padding:					5px 10px;
		background-color:			#332255;		
		background-image: 			-moz-linear-gradient(top, #332255, #221133);
		background-image: 			-ms-linear-gradient(top, #332255, #221133);
		background-image: 			-webkit-linear-gradient(top, #332255, #221133);
		background-image: 			-o-linear-gradient(top, #332255, #221133);
		background-image: 			linear-gradient(top, #332255, #221133);
		width:						auto;
		text-align:            		left;
		box-shadow: 				0px 5px 10px #888888;	
		border-top:					3px solid #6600CC;
	}

	#body {
		padding:					10px;
		padding-bottom:				70px;
	}
	
	
	#statusBar {
		width: 						100%;
		display: 					none;
	}
	
	#statusBar.error {		
		background-color:			#FF9999;
		display: 					inline;
	}
	
	#statusBar.warning {		
		background-color:			#FFFF99;
		display: 					inline;
	}
	
	#statusBar.success {		
		background-color:			#99FF99;
		display: 					inline;
	}
	
	.success {		
		background-color:			#99FF99;
		display: 					inline;
	}
	

	.control {
		background-color:			#FFFFFF;	
		text-align:					left;
		padding:					10px;
		margin: 					10px auto;
		
		overflow:					auto;
		float:						left;
		width: 						23%;
		box-shadow: 				0px 5px 10px #888888;	
	}
	

	
	


	.main {
		background-color:			#FFFFFF;
		text-align:					center;	
		padding:					10px;
		
		overflow:					auto;
		position:					inline;
		float:						right;
		width:						72%;
		display:					block; 
		box-shadow: 				0px 5px 10px #888888;

		margin:						10px auto;
	}
	

	
	.alerted {
		top:						145px;
	}

	.mainContent {
		width: 						auto;
		padding:					10px;
	}


	.homeScreen {
		overflow:					auto;
		position:					absolute;
		display:					block; 
		top:						95px;
		left:						0px;
		right:						0px;
		bottom:						70px;
		padding:					10px;
		text-align:					center;
	}

	.loginWrap {
		width:						600px;
		margin:						0 auto;
		text-align:					center;
	}
	
	.setupWrap {
		width:						800px;
		margin:						20px auto;
		text-align:					left;
		padding:					20px;
		background-color:			#FFFFFF;
		color:						#000000;		
		box-shadow: 				0px 5px 10px #888888;
	}
	
	.textWrap {
		padding:					10px 20px;
	}

	/*
		Stops JQuery placeholder IE fudge from being black
	*/
	.placeholder {
		color:						#888888;
	}

	.homeWrap {
		width:						800px;
		margin:						0 auto;
		text-align:					center;
	}
	
	
	.fullForm {
		width: 						100%;
	}
	
	.formLeft 	{
		float: 						left;
		width: 						50%;
	}
	
	.formRight {
		float: 						right;
		width: 						50%;
	}

	footer {
		color:						#FFFFFF;
		
		position:					absolute;
		bottom:						0;
		height:						17px;
		
		padding:					18px 0px 20px 0px;
		background-color:			#332255;		
		background-image: 			-moz-linear-gradient(top, #332255, #221133);
		background-image: 			-ms-linear-gradient(top, #332255, #221133);
		background-image: 			-webkit-linear-gradient(top, #332255, #221133);
		background-image: 			-o-linear-gradient(top, #332255, #221133);
		background-image: 			linear-gradient(top, #332255, #221133);
		width:						100%;
		
		text-align:            		center;
		font-size:					0.8em;
		
		border-top:					5px solid #6600CC;	
	}

	#clear {
		clear:						both;
	}

	#conditionalClear {
		clear:						none;
	}

	/*

		List ItemRenderers
		
		===========================================================================
	*/

	/* Home Links to main parts of the site */

	.homeList {
		clear:						left;
		float:						left;
		list-style:					none;
		margin:						0px;
		padding:					0px;
		text-align:					center;
	}

	.loginItem {
		background-color:			#FFFFFF;	
		text-align:					left;
		float:						left;
		padding:					0px;
		margin:						40px auto;
		width:						600px;
		box-shadow: 				0px 5px 10px #888888;	
		border-top:					5px solid #6600CC;
	}


	.projectItem {
		background-color:			#FFFFFF;	
		text-align:					centre;
		padding:					0px;
		margin:						20px;
		width:						740px;
		box-shadow: 				0px 5px 10px #888888;	
	}

	.projectItemInner {
		padding:	 				10px;
	}

	.projectSelect {
		margin:						10px 0px;
		width: 						100%;
		font-size:					1.5em;
	}

	.projectOption {
		width: 						100%;
		font-size:					1.5em;

	}

	.homeItem {
		background-color:			#FFFFFF;	
		text-align:					left;
		float:						left;
		padding:					10px;
		margin:						20px;
		width:						340px;
		box-shadow: 				0px 5px 10px #888888;	
	}


	.homeList {
		list-style-type:			none;
	}

	.homeRenderer {
		margin:						5px 0px;
		padding:					5px;
		border-bottom:				2px solid #6600CC;	
	}



	/*

		Manage Expts
		===========================================================================
	*/



	/* List ItemRenderers */

	.exptList {
		list-style-type:			none;
	}

	.exptListItem {
		margin:						10px 5px;
		padding:					10px;
		border-top:					2px solid #6600CC;
		box-shadow: 				0px 5px 10px #888888;		
	}

	
	/*
	
		Format categories 
		=======================================================================
	*/

	.category_list {
		width: 						95%;
		margin:						0 auto;
	}
	
	.category_list_left {
		width: 						30%;
		float:						left;
		padding:	 				5px;
		margin:						0 auto;
	}
	
	.category_list_mid {
		width: 						45%;
		float:						left;
		padding:	 				5px;
		margin:						0 auto;
	}
	
	.category_list_right {
		width:						10%;
		float:						left;
		padding:	 				5px;
		margin:						0 auto;
	}
	
	.category_list_control {
		width:						5%;
		float:						right;
		padding:	 				5px;
		margin:						0 auto;
	}
	
	input.createCategory {
		font-size:					1.2em;	
		width:  					95%;
		margin:						0px auto;
		padding:					5px 5px;
	}
	
	.check_list {
		width: 						95%;
		margin:						0 auto;
	}
	
	.check_list_mid {
		width: 						31%;
		float:						left;
		padding:	 				5px;
		margin:						0 auto;
	}
	


	/*

		Login Formatting

		===========================================================================
	*/

	.loginForm {
		padding:					20px 40px;
		margin:						20px auto;
		width:						400px;
		/*box-shadow: 				0px 5px 10px #888888;	
		border-top:					5px solid #6600CC;*/
	}






	/*

		Text

		===========================================================================
	*/

	h1 {
		text-align:					left;
		color:						#FFFFFF;
		padding:					0px;
	}
	
	h1.instruct {	
		padding: 					0px 0px 10px 0px;
	}

	h2 {
		padding:					5px;	
	}
	
	h2.instruct {	
		padding: 					10px 0px 0px 0px;
	}

	h3 {
		margin:						0px;
		padding:					5px;
	}

	h3 a{
		cursor:						pointer;
		font-weight:				bold;
		text-decoration:			none;
	}

	h3 a:hover{
		font-weight:				bold;
		text-decoration:			underline;
	}

	p {
		padding:					5px;
	}

	p a {
		color:						#6600CC;
		text-decoration:			none;
	}

	p a:hover {
		text-decoration:			underline;
	}

	p.create {
		font-size:					1.5em;	
		width:  					100%;
		margin:						5px 0px;
		padding:					0px;
	}
	
	p.instruct {
		font-size:					1em;	
		padding: 					10px 0px;
		width:						100%;	
	}
	
	
	p.red {
		color: 						#990000;
	}

	.homeHead {	
		text-align:					center;
		color:						#000000;
		padding:					30px 0px;
	}

	.note {
		font-size:					0.8em;
		font-style:					italic;
		text-align:					center;
		color:						#888888;
	}

	strong {
		font-weight:				bold;
	}

	.nav {
		color:						#FFFFFF;
		padding:					0px;
	}

	.centre {
		text-align:					center;
	}

	.left {
		text-align:					left;
	}

	.grey {
		color: 						#888888;
	}

	.black {
		color:						#000000;
	}

	p.purple {
		color:						#6600CC;
	}

	.bold{
		font-weight:				bold;
	}

	/*

		Visual

		===========================================================================
	*/

	button {

		margin:						0px 10px;
		cursor:						pointer;
		font-size:					1em;
		font-weight:				bold;
		padding:					5px 10px 5px 10px;
		color: 						#FFFFFF;	
		border-style: 				none;
		
		border-radius:				5px;
		-moz-border-radius:			5px;	
		box-shadow: 				0px 3px 5px #110022;
		
		background-color:			#6600CC;
	}
	
	button:hover {
		color: 						#FFFFFF;	
		background-color:			#9933FF;
	}
	
	
	
	/*
		Sidebar buttons
	*/
	
	button.sidebar {
		width: 						100%;
		margin: 					5px auto;
	}
	
	button.sidebarAdd {
		width: 						100%;
		margin: 					5px auto;
		background-color:			#339933;
		box-shadow: 				0px 3px 5px #112211;
	}

	button.sidebarAdd:hover {
		background-color:			#66CC66;
	}
	
	button.sidebarDelete {
		width: 						100%;
		margin: 					5px auto;
		background-color:			#993333;
		box-shadow: 				0px 3px 5px #221111;
	}

	button.sidebarDelete:hover {
		background-color:			#CC6666;
	}
	
	
	
	
	
	button.sidebarDisabled {
		width: 						100%;
		margin: 					5px auto;
		color: 						#CCCCCC;	
		background-color:			#888888;
	}
	
	button.sidebarDisabled:hover {
		color: 						#CCCCCC;	
		background-color:			#888888;
	}
	
	button.form {
		width: 						100%;
		margin: 					5px auto;
		font-size:					1.2em;
	}
	
	button.formDisabled {
		width: 						100%;
		margin: 					5px auto;
		font-size:					1.2em;
		background-color:			#888888;
		color: 						#CCCCCC;	
	}

	button.formDisabled:hover {
		background-color:			#888888;
		color: 						#CCCCCC;	
	}






	button.loginButton {
		font-size:					1.5em;
		margin:						20px 0px 10px 0px;
		width:						100%;
		padding:					10px;
	}

	button.addButton {
		font-size:					1.5em;
		margin:						10px 0px 25px 0px;
		padding:					10px 20px;
		background-color:			#339933;
		box-shadow: 				0px 3px 5px #112211;
	}

	button.addButton:hover {
		background-color:			#66CC66;
	}
	
	
	
	button.next {
		width: 						20%;
		min-width: 					150px;
		float:						right;
		margin-right: 				20px;
	}
	
	button.addButtonDisabled {
		font-size:					1.5em;
		margin:						10px 0px 25px 0px;
		padding:					10px 20px;
		background-color:			#888888;
		color:						#CCCCCC;
		box-shadow: 				0px 3px 5px #222222;
	}

	button.addButtonDisabled:hover {
		background-color:			#888888;
		color:						#CCCCCC;
	}
	
	


	button.deleteButton {
		font-size:					1.5em;
		margin:						10px 0px 25px 0px;
		padding:					10px 20px;
		background-color:			#993333;
		box-shadow: 				0px 3px 5px #221111;
	}

	button.deleteButton:hover {
		background-color:			#CC6666;
	}
	
	button.back {
		width: 						20%;
		min-width: 					150px;
		float:						left;
		margin-left: 				20px;
	}
	
	/*
		Midi buttons
	*/
	
	button.addButtonMid {
		font-size:					1em;
		margin:						10px;
		padding:					2px 10px 3px 10px;
		background-color:			#339933;
		box-shadow: 				0px 3px 5px #112211;
	}

	button.addButtonMid:hover {
		background-color:			#66CC66;
	}
	
	button.deleteButtonMid {
		font-size:					1em;
		margin:						10px;
		padding:					2px 10px 3px 10px;
		background-color:			#993333;
		box-shadow: 				0px 3px 5px #221111;
	}

	button.deleteButtonMid:hover {
		background-color:			#CC6666;
	}

	/*
		Mini Buttons
	*/

	button.addButtonMini {
		font-size:					0.8em;
		margin:						0px;
		padding:					5px;
		background-color:			#339933;
		box-shadow: 				0px 3px 5px #112211;
	}

	button.addButtonMini:hover {
		background-color:			#66CC66;
	}



	button.deleteButtonMini {
		font-size:					0.8em;
		margin:						0px;
		padding:					5px;
		background-color:			#993333;
		box-shadow: 				0px 3px 5px #221111;
	}

	button.deleteButtonMini:hover {
		background-color:			#CC6666;
	}



	button.disabled {
		background-color:			#666666;
	}

	button.disabled:hover {
		background-color:			#888888;
	}
	
	
	
	.buttonLeft {
		width:						100%;
		font-size:					1.2em;
	}




	input.login {
		font-size:					1.5em;	
		width:  					100%;
		margin:						10px 0px;
		padding:					5px;
	}
	

	input.create {
		font-size:					1.2em;	
		width:  					90%;
		margin:						11px 0px;
		padding:					10px;
	}
	
	
	
	textarea.create {
		font-size:					1.2em;	
		width:  					90%;
		margin:						9px 0px;
		padding:					10px;
	}

	input.form {
		font-size:					1.5em;	
		width:  					60%;
		margin:						20px 10px 10px 10px;
		padding:					5px;
	}
	
	input.exptCheck {
		width: 30px;
		height: 30px;
	}

	select.form {
		font-size:					1.5em;	
		width:  					60%;
		margin:						20px 10px 10px 10px;
		padding:					5px;
	}

	span.form {
		font-size:					1.5em;	
		margin:						20px 0px 10px 0px;
		padding:					5px 0px;
	}


	input.data {
		font-size:					1.2em;	
		width:  					98%;
		margin:						10px 0px;
		padding:					5px;
	}

	hr {
		color:					#6600CC;
		background-color:		#6600CC;
		border-style:			solid;
		height:					1px;
		margin:					10px;
	}
	
	hr.thin {
		/*border: 				none;*/
		height: 				0px;
		margin:					5px 0px;
	}

	hr.green {
		color:					#339933;
		background-color:		#339933;
	}

	hr.blue {
		color:					#3333CC;
		background-color:		#3333CC;
	}

	hr.red {
		color:					#993333;
		background-color:		#993333;
	}

	hr.yellow {
		color:					#fae535;
		background-color:		#fae535;
	}

} /* end @media screen */