/*----------------------------General Structure of the page -----------------------------------*/
.topmenu {
 margin-left:0px;
 margin-top:0px;
 float:left;
 min-width: 200px;
 width: 100%;
 max-width: 850px;
 border-collapse: collapse;
}
.sidemenu {
 margin-left:0px;
 margin-top:0px; 
 float:left;
 max-width:250px;
 border: 0px solid black;
 min-height:250px;
}

.workspace {
 margin-left:0px;
 margin-top:0px; 
 float:left;
 min-height:300px;
 min-width: 200px;
 max-width: 850px;
 width:100%;
 border-top:1px solid #2B67FF;
 border-collapse: collapse;
}

.footer {
 margin-left:0px;
 margin-top:0px; 
 float:left;
  width: 100%;
 min-width: 200px;
 max-width: 850px;
 min-height:25px;
 border-top:1px solid #bbb;
 border-collapse: collapse;
 text-align:center;
}

/* -------------------------Containers----------------------------------------*/
.fullLength	{
	float: left;
	margin: 1px auto;
	padding: 2px;
	width: 100%;
	border: 0px solid black;
	}

@media(min-width: 800px) {
	.fullLength { min-width:850px; }
}
 
@media(min-width: 480px) and (max-width: 800px) {
	.fullLength { min-width:480px; }
}

@media(min-width: 150px) and (max-width: 480px) {
	.fullLength{ min-width:150px; }
}
	
.view{
	float: left;
	margin: 3px;
	padding: 5px;
	width: 240px;
	border: 0px solid red;
}

.imgfull{
	float: left;
	margin: 3px;
	padding: 5px;
	}

.flex{
	float: left;
	margin: 3px;
	padding: 5px;
	width: 95%;
	min-width:200px;
	border-bottom: 1px solid blue;
}

.flexbox{
	float: left;
	margin: 2px;
	padding: 2px;
	border: 0px solid blue;
}

.holder{
	min-width:200px;
	max-width:270px;
	display: inline-block;
	margin:1px;
	padding:1px;
	border: 1px solid blue;
	text-align: left;
}

.largeView {
	float: left;
	margin: 3px auto;
	padding: 15px;
	width: 400px;
	text-align:justify;
	border: 0px solid black;
}

.invisible {
	float: left;
	margin: 2px;
	padding: 2px;
	width: 250px;
	border: 0px solid red;
}

.title{
	margin: 2px;
	padding: 2px;
	border-bottom: 0px solid red;
}

.details{
	float: left;
	margin: 2px;
	padding: 2px;
	width: 250px;
	border: 0px solid red;
}
	

.message {
	float: left;
	padding: 4px;
	width: 100%;
	background-color: #FDF856;
	font: normal 12px arial;
	text-align: center;
	color: #000;
}

.search{
	border-style:none;
	background-color:none;
	border:1px solid #2B67FF;
	height: 30px;
	width: 60%;
	font: bold 12px arial;
	color: #2B67FF;
}
/* -------------------------Container elements----------------------------------------*/
	
@media(min-width: 450px) and (max-width: 750px) {

	.formtitle .label{
		min-width: 100px;
	}
}
@media(min-width: 150px) and (max-width: 450px) {
	.imgfull { display:none;  }
	.flexbox .data {
		float:left;
	}
	
	.formtitle .label{
		min-width: 40px;
	}
}
/*----------------------------General Structure of the page -----------------------------------*/
.dropDown{
	float:left;
	font: normal 12px arial;
	list-style:none;
	margin:0;
	padding:0;
	width:200px;
}
.dropDown li{
	padding: 10px; 
	background:#FAFAFA;
	border-bottom:1px green solid;}
	
.dropDown li:hover{
		background:#F0F0F0;
	}
	
	
.outer{
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}

.container {
	text-align: center;
	position:relative;
	vertical-align:middle;
	display:table-cell;
	height: 400px;
}

.infoBox {
	position: relative;
	vertical-align:middle;
	border:1px solid black;
	min-height: 200px;
	width:100%;
}


.inner {
	width: 100%;
	height: 100%;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	border:0px solid #000;	
	
}

/* -------------------------Start of Menu CSS----------------------------------------*/
.menu {
  margin: auto;
  border-collapse: collapse;
  height: 20px;

  }

.menu td {
  background-color: #66C100;
  padding: 8px 8px;
  border: 0.1px solid #FFF;
  border-collapse:none;
}


.menu a{
  font: bold 13px arial;
  text-decoration: none;
  color: #FFF;
  
}

.menu a:hover {
  font: bold 13px arial;
  text-decoration: none;
  color: #000;
}
/* -------------------------End of Menu CSS----------------------------------------*/
.stafflist{
	float:left;
	font: normal 12px arial;
	list-style:none;
	margin:0;
	padding:0;
	width:300px;
}
.stafflist li{
	padding: 10px; 
	background:#FAFAFA;
	border-bottom:1px green solid;}
	
.stafflist li:hover{
		background:#F0F0F0;
	}

#search-box{
	padding: 1px;
	border: 1px #000000  solid;
}


.view	{
	float: left;
	margin: 1px auto;
	padding: 2px;
	width: 100%;
	border: 1px solid green;
	}
	
	
.view .holder{
	min-width:200px;
	max-width:270px;
	display: inline-block;
	margin:1px;
	padding:1px;
	border: 0px solid #555555;
	text-align: left;
}


.view .label{

	display: table-cell;
  font: normal 14px helvetica;
  color:#0c43f9;
  text-align:left;
  border: 0px solid #555555;
  padding: 2px;
}

.view .data{
	font: bold 14px 'arial';
	text-align:left;
	color: #000;
	min-height:20px;
	margin: 2px;
}

.formtitle{
  font: bold 14px helvetica;	
  color:#458135;
  margin: 2px;
  text-align:center;
  width:18%;
  height:30px;
  min-width:60px;
  border: 0px solid red;
}


.flex .formtitle{
	float: left;
}

.data{
	font: bold 13px 'Arial';
	text-align:left;
	color: #000;
	min-height:20px;
}

.data input{
	border-style: none;
	border: solid 1px #120041;
	height: 25px;
	min-width: 120px;
	max-width: 180px;
	margin:3px;
}

.view .data-wide {
	border-style: none;
	border: solid 0px #120041;
	height: 25px;
	width: 400px;
	margin:3px;
}



.flat input{
	border-style: none;
	border: solid 1px #000;
	height: 25px;
}

.flat textarea{
	border-style: none;
	border: solid 1px #000;
}

.title{
  font: bold 14px helvetica;	
  color:#458135;
  text-align:center;
}


.header{
  font: bold 15px helvetica;	
  color:#2B67FF;
  text-align:center;
}

.header1{
  font: bold 30px helvetica;	
  color:#2B67FF;
  text-align:center;
  
}

.header2{
  font: bold 20px helvetica;	
  color:#2B67FF;
  text-align:center;
   
}

.header3{
  font: bold 15px helvetica;	
  color:#66C100;
  text-align:center;
  display:inline-block;  
}
.edit th{
  font: normal 14px helvetica;	
  color:#000;
  text-align:right;
}

/*---------------------Experimental CSS on tables ---------------------------------*/
.tableDiv{
	display: table;
	width: 100%;
	margin-top:5px;
 }
 
.row{
	display: table-row;
 }
 
.row1{
	display: table-row;
	background-color: #FFF;
 }

.cord{
		background-color: #7CB7DF;
	display: table-row;

 }

.nasa{
	background-color: #7CB7DF;
	display: table-row;
 }


.jubilee{
	display: table-row;
	background-color:#B11A37;
	color:#FFF;
 }

.swing{
	background-color:#8E9C81;
	display: table-row;

 }
 
.row2{
	display: table-row;
	background-color: #B9EBB0;
 }

.rowError{
	display: table-row;
	background-color: #F64609;
 }
 
.fullLength td{
	font: normal 13px helvetica;
}

.cell{
  display: table-cell;
  padding: 5px 0px 3px 3px;
  border: 1px solid black;
  font: normal 14px helvetica;

 }
.cellError{
  display: table-cell;
  padding: 5px 0px 3px 3px;
  border: 1px solid black;
  font: normal 14px helvetica;
	background-color: #F64609;
 }
 
 .cellR{
  display: table-cell;
  padding: 2px;
  text-align: right;
  border: 1px solid black;
  font: normal 14px helvetica;
 }
 
.cellHeader{
  display: table-cell;
  font: bold 14px helvetica;
  color:#1A82A8;
  text-align:center;
  padding: 2px;
  border: 1px solid black;
 }

.cell .rowspan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  min-height:25px;
}

.cell .colspan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  min-height:25px;
}

/* -------------------------End of View CSS----------------------------------------*/
.login {
 /*background-color: #5B745D;*/
	width: 200px;
	padding: 20px;
	text-align:center;	
	}

.checkBox {
	color: #0082B6;
	font: bold 14px helvetica;
	display: inline-block;
	margin: 5px;
	cursor: pointer;
	padding: 5px 10px 10px 7px;
	border: 1px solid #222;
}


.large input {
	height: 40px;
	width: 200px;
	font: bold 14px arial;
	color: #000;
	border-style:none;
	border:2px solid #2B67FF;
	}
	
.large input:placeholder{
	font: bold 14px arial;
	color: #66C100;
}

.text {
	text-align: left;
	font: bold 14px arial;
	color: #1A82A8;
	}
	
.smalltext{
 font: normal 10px arial;
 text-align: center;
 color: #000;
}
	
.message {
	background-color: #FFFF00;
	padding: 0px;
	text-align:center;
	font: bold 12px arial;
	color: #2B67FF;
	width: relative;
	}

#submit{
	border-style:none;
	background-color:#2B67FF;
	padding: 8px 12px 8px 14px;
	height: 34px;
	font: bold 12px helvetica;
	color: #FFF;
}

#unSubmit{
	border-style:none;
	background-color:#D7D7E1;
	padding: 8px 12px 8px 14px;
	height: 34px;
	font: bold 12px helvetica;
	color: #2B67FF;
}

.editSubmit{
	border-style:none;
	background-color:#2B67FF;
	padding: 2px 10px 3px 10px;
	height: 24px;
	font: bold 12px helvetica;
	color: #FFF;
}


.postSubmit{
	border-style:none;
	border:0px solid #ff2596;
	font:bold 14px arial; 
	min-height: 29px;
	padding: 2px 10px 3px 10px; 
	text-decoration:none; 
	text-align:center;
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	color: #FFFFFF;
	background-color: #66C100; 
}

.deleteSubmit{
	border-style:none;
	border:0px solid #ff2596;
	font:bold 14px arial; 
	min-height: 29px;
	padding: 4px 12px 6px 12px; 
	margin: 4px 12px 6px 12px; 
	text-decoration:none; 
	text-align:center;
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	color: #FFFFFF;
	background-color: #FF0000; 
}


.buttonSubmit{
	border-style:none;
	border:3px solid #6D8363;
	font:bold 14px helvetica; 
	margin: 8px 8px 8px 10px; 
	padding: 8px 8px 8px 10px; 
	text-decoration:none; 
	text-align:center;
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	color: #FFFFFF;
	background-color: #26394C; 
}

	
.buttonSubmit:hover{
	border-style:none;
	border:3px solid #4A0C0C;
	font:bold 14px helvetica; 
	padding: 8px 8px 8px 10px; 
	text-decoration:none; 
	text-align:center;
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	color:#000 ;
	background-color: #FFF; 
}	

.buttonLink{
	border-style:none;
	border:0px solid #ff2596;
	font:bold 12px helvetica; 
	padding: 5px 5px 5px 6px; 
	text-decoration:none; 
	text-align:center;
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	color: #FFFFFF;
	background-color: #000 
}

	
.buttonLink:hover{
	border-style:none;
	border:0px solid #007AFF;
	font:bold 12px helvetica; 
	padding: 5px 5px 5px 6px; 
	text-decoration:none; 
	text-align:center;
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	color:#ffffff ;
	background-color:#A511C8 ; 
}	


/*----------------------------------------- Responsive Menu -------------------------------------*/
.subMenu {
	display:block;
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto !important;
	text-align: center;
	line-height:19px !important;
	
}

.subMenu * {
	-webkit-tap-highlight-color:transparent !important;
	font-family:Arial;
}
.subMenu a {
	color:#ebebeb;
	text-decoration:none;
}
.subMenu .subMenu-main-list, .subMenu .subMenu-main-list li {
	margin:0px;
	padding:0px;
}
.subMenu ul {
	display:block;
	width:auto !important;
	margin:0 auto !important;
	overflow:hidden;
	list-style:none;
}


/* sublevel menu - in construction */
.subMenu ul li ul, .subMenu ul li ul li, .subMenu ul li ul li a {
	display:none !important;
	height:0px !important;
	width:0px !important;
}
/* */


.subMenu .subMenu-main-list li {
	display:inline;
	padding:padding:0px;
	margin:0px !important;
}
.subMenu-toggled {
	display:none;
	width:100%;
	position:relative;
	overflow:hidden;
	margin:0 auto !important;
}
.subMenu-button:hover {
	cursor:pointer;
}
.subMenu .subMenu-toggled ul {
	display:none;
	margin:0px !important;
	padding:0px !important;
}
.subMenu .subMenu-toggled ul li {
	display:block;
	margin:0 auto !important;
}


/* GRAPHITE STYLE */

.subMenu.graphite .subMenu-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font: bold 13px arial;
	color: #FFFFFF;
	background-color:#66C100;
	border-left:1px solid #555555;
	background-repeat:repeat-x;
}
.subMenu.graphite .subMenu-main-list li a:hover {
	background-color:#529C45;
}

.subMenu.graphite .subMenu-toggled {
	width:100%;
	background-color:#66C100;
	min-height:36px;
	border-radius:6px;
}
.subMenu.graphite .subMenu-toggled-controls {
	display:block;
	height:36px;
	color:#FFF;
	text-align:left;
	position:relative;
	background-repeat:repeat-x;
	border-radius:6px;
}
.subMenu.graphite .subMenu-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
	color:white;
	text-shadow:1px 1px 1px black;
}
.subMenu.graphite .subMenu-button {
	display:block;
	position:absolute;
	right:15px;
	top:8px;
}

.subMenu.graphite .subMenu-button span {
	display:block;
	margin-top:4px;
	height:2px;
	background:white;
	width:24px;
}
.subMenu.graphite .subMenu-toggled ul li a {
	display:block;
	width:90%;
	background-color:#66C100;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #333333;
	border-top:1px solid #777777;
	text-shadow:1px 1px 1px #333333;
}
.subMenu.graphite .subMenu-toggled ul li a:active {
	background-color:#66C100;
	border-bottom:1px solid #444444;
	border-top:1px solid #444444;
}
/*----------------------------------End of Responsive Menu -----------------------------------------*/

.menuTop{
	text-align:right;
	font: bold 12px arial;
	padding-bottom:3px;
	border:0px solid red;
	width:100%;
}

.menuTop a{
	text-decoration: none;
	font: bold 12px arial;
	padding:5px;
	color: green;
	width:100%;
}


.Jubilee {
	background-color:#FF8C8C;
}

.CORD {
	background-color:#D3EEC1;
}

.SWING {
	background-color:#676767;
}