<style>

/*
  Primary Site colour: Yellow:  #E6D31D
  Background: Black:
 
 WET
 #1b75bc - dark blue
 #55c7de / 64c8ef - lightest blue - top of logo
 #00a2e2 - med blue @ bottom of logo
 
 */


 a:visited {
    color: #E6D31D;
}
a:link {
    color: #E6D31D;
}

.nav {
  display: table;
  width: 410px;
  max-width:95%;
  margin: 0px auto;
  padding: 5px;
  text-align: center;
}

.mids h4 {
    color: #E6D31D;
}
.mids:before,
.mids:after {
    content: ""; 
    display: table;
}

.mids:after {
    clear: both;
}
.mids {
    *zoom: 1;
    width: 410px;
    max-width: 95%;
	margin: 0px auto;
	padding: 0px;

}


  h1   {color:yellow}
  h4   {color:white}
  p    {color:darkgray}
  
  html	{height: 100%; margin: 0; padding: 0;}
	body	{height: 100%; margin: 0; padding: 0;
		 background-color:black; color:white}
  header  {
      /*position: fixed;
       transition: 0.2s;
      padding: 50px 10px;
      top: 0; */
      width: 100%;
     

}
  header.img { }
#main {
    width: 100%;
    min-width: 350px;
    margin: 0px auto;
    text-align:center;
}
#wrapper {
    height: 100%;
    width: 100%;
    overflow: auto;
    text-align:center;
}
#main::-webkit-scrollbar {
    display: none;
}
  details {
    font-weight:initial;
  }
  details[open]{    
  }
  details[open] summary {
    font-weight:bolder;
  }
  .system {
    overflow:auto;
    max-height: 600px;
    width:100%;
    text-align:center;
    -moz-box-shadow: 0 0 10px #6495ED;
    -webkit-box-shadow: 0 0 10px #6495ED;
    box-shadow: 0 0 10px #6495ED;
    
  }
  div.options {
    width:95%;
    max-height: 30px;
    height:30px;
    display: inline-block;
    overflow: hidden;
  //  background-color:#333841;
    padding-top: 0px;
  }
  div.option {
    float: left;
    width:50%;
  }
  div.selected {
    color:white;
    font-weight:bolder;
    border-top-style: solid;
    border-color: #6495ED;
    /* Increase Glow under the selected element 
    -moz-box-shadow: 0 0 10px #6495ED;
    -webkit-box-shadow: 0 0 10px #6495ED;
    box-shadow: 0 0 10px #6495ED;
*/
  }
  div.notselected {
    color:#969696;
    font-weight:normal;
  }
  div.head {
    margin: 5px 0 0;
  }
  
  /*=========== lab preview ========================*/
  a.sysdiv:link {
    text-decoration:none;
  }
  a.sysdiv:visited {
    text-decoration:none;
  }

  
  div.sysdiv {
  font-weight: 700;
  text-align:center;
  margin: 0 auto;
  height: 135px;
  width: 90%;
  min-width: 300px;
  background-color:#181818;
  padding: 10px;
  
    -moz-box-shadow: 0 0 12px #000000 inset;
    -webkit-box-shadow: 0 0 12px #000000 inset;
    box-shadow: 0 0 12px #000000 inset;
    
  }
  
  div.container {
    height: auto;
    width: 100%; 
    display:inline-block;   
  }
  
  div.flow {
  position:relative;
  float: left;
  width:48%;
  height: 70%;
  margin: 0px;
  	font: bold 36px/24px Helvetica, Sans-Serif;
  	    font-weight: 900;
  	    	text-shadow: 0px 1px 2px #b4d1ad;

  }
  div.time {
  font: 24px/18px Helvetica, Sans-Serif;
  	    font-weight: 900;
  	    	text-shadow: 0px 0px 0px #b4d1ad;
  }
  
  div.tablestats {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
  }
  table.statspage {
    width: 100%;
  }
  table.statspage td, th {
    text-align: center;
  }
  table.statspage th {
    color: grey;
  }
  th.dayhead {
    text-align:left;
    font-size:smaller;
    font-size: 75%;
    border-top-style: inset;
    border-color: dimgrey;
  }
  tr.line {
    width:75%;
    border-bottom-style: solid;
    border-color: DimGrey;
 }
  
  div.rescontent {
  width:100%;
  vertical-align: middle;
       font-weight: 900;
       margin:10px;

  }
  
  div.res {
  	text-shadow: 0px 1px 2px #b4d1ad;

  position:relative;
    text-align:center;
  float: right;
  width:48%;
  height: 70%;
  margin:0;
  	font: bold 36px/24px Helvetica, Sans-Serif;

  }
  /*==== seperating LOGs in labsystems.php ===*/
  div.linkframe {
  
  }
  div.linkcontent {

  }

  
  /*===========  photo capture =====================*/
    div.pichole {
    margin: 0;
    max-width:100%;
    max-height:100%;
    display: block;
  }
  .pichole img {
    max-height:100%;
    max-width:100%;
  }
  
  div.uploader {
    min-height:none;
    background:#181818;
  }
  /*======================= Alerts layout ===============================*/
  div.alert {
    width:100%;
    height:45px;
    max-height:60px;
    vertical-align: middle;
  }  
  div.alertboxOn {
    font-size: 2em;
    float: left;
    width: 45px;
    height: 100%;
    background:#ff0000;
    line-height: 45px;
    vertical-align: middle;
  }
  div.alertboxOff {
    font-size: 2em;
    float: left;
    width: 45px;
    height: 100%;
    background:#00aa00;
    line-height: 45px;
    vertical-align: middle;
  }
  div.alertbody {
    height: 100%;
    margin-left: 45px;
    width: 70%;
    float: left;
    vertical-align:middle;
  }
  div.alertDel {
    height: 100%;
    float: right;
    width:45px;
    background:#ff0000;
    line-height:45px;
  } 

  /*======================= Logs layout ===============================*/
  div.logday {
    width:100%;
    min-width:300px;
    min-height:45px;
    display: block;
   /* height: auto; */
    margin:0;
    -moz-box-shadow: 0 0 10px #000000 inset;
    -webkit-box-shadow: 0 0 10px #000000 inset;
    box-shadow: 0 0 10px #000000 inset;
    background:#181818;
  /*  max-height:300px; */
  }
  div.day {
  width:100%;
  min-width: 300px;
  height: 20px;
  margin: 0;
  }
  div.pics {
    float: left;
    margin: 0;
    max-width:40%;
    max-height:100%;
    display: block;
  }
  .pics img {
    max-height:500px;
    max-width:100%;
  }
  div.logentry {
    /* float: left; */
    overflow:auto;
    width:auto;
    max-width:100%;
    display:block;
    min-width:150px;
    min-height:40px;
    max-height:300px;
    margin: 0, 5px;
  }
  div.from {
    padding: 0 5px;
    float: left;
    text-align:right;
    margin:0 auto;
    width:auto;
    max-width:20%;
  }
  div.entry {
    margin:0 5px;
    float:right;
    width:80%;
    text-align:left;
    
  }
  div.clear{
        clear : both;
   }
  
  
  /*================================ button ================================


  selected
   #E6D31D - site color
   #948710
   
   text - #3d0743
  */
  a.btn {
  

	display: table; width: 60px; height: 35px; padding: 5px 0px 5px 0px; margin: 0 auto;
  line-height:200%;


	
	box-shadow: inset 0px 0px 6px #fff;
	-webkit-box-shadow: inset 0px 0px 6px #fff;
	border: 1px solid #5ea617;
	border-radius: 10px;
	
	font: bold 18px/14px Helvetica, Sans-Serif;
	text-align: center;
	display:table-cell;
	vertical-align: middle;
	text-transform: uppercase;
	text-decoration: none;
	color: #3d0743;
	text-shadow: 0px 1px 2px #b4d1ad;
	
	-moz-transition: color 0.25s ease-in-out;
	-webkit-transition: color 0.25s ease-in-out;
	transition: color 0.25s ease-in-out;
  /*  transition: 0.2s; */
		
}

	.btn:hover {
		color: #585148 ! important;
		
		-moz-transition: color 0.25s ease-in-out;
		-webkit-transition: color 0.25s ease-in-out;
		transition: color 0.25s ease-in-out;
	}
	
	a.mini {
		display: inline-block; min-width: 130px; height: 14px; padding: 2px 0px 0px 0px; margin: 0 auto; max-width: 15%;
		font: bold 14px/12px Helvetica, Sans-Serif;
	}
	
  a.minier {
  		display: inline-block; width: 20px; height: 14px; padding: 3px 0 3px 0; margin: 0 auto 1px auto;
		font: bold 14px Helvetica;
        text-align: center;
        vertical-align: middle;
        line-height:14px;

  }
  /*================================ button ================================*/
 /* flipped
  .red {
  background: #CC1100;  old browsers 
	background: -moz-linear-gradient(top, #CC1100 0%, #948710 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CC1100), color-stop(100%,#948710)); 
  }
  */
    .red {
  background: #CC1100; /* old browsers */
	background: -moz-linear-gradient(top, #948710 0%, #CC1100 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#948710), color-stop(100%,#CC1100)); /* webkit */

  }
  
  .yel {
  	background: #E6D31D; /* old browsers */
    background: -moz-linear-gradient(top, #E6D31D 0%, #948710 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E6D31D), color-stop(100%,#948710)); /* webkit */
  
  }
  
  .wet2 {
    background: #1b75bc; /* old browsers  - alt #00a2e2 */
    background: -moz-linear-gradient(top, #00a2e2 0%, #1b75bc 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a2e2), color-stop(100%,#1b75bc)); /* webkit */
    	color: #eeeeee ! important;  /* white font */
      text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3) ! important;
  }
  .wet1 {
    background: #00a2e2; /* old browsers  - alt #00a2e2 */
    background: -moz-linear-gradient(top, #00a2e2 60%, #64c8ef 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#00a2e2), color-stop(100%,#64c8ef)); /* webkit */
    color: #fff ! important;  /* white font */
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);

}


</style>