/* style.css                            */
/*  styling for orphan programme        */


body{
	font-family:arial;
	margin:0;
}

td p{
	    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

h1 {color:#F7941D;}

.red {
	font-weight:bold;
	color:red;
}

header img {
	float:left;
	margin:5px;
	}

#masthead{
	overflow:hidden;
	background-color:#305697;
}
#mastheadTest{
	overflow:hidden;
	background-color:red;
}

#masthead #title, #mastheadTest #title{
	color:#F7941D;
	font-size:2em;
	font-family:arial;
	float:left;
	margin:20px 20px 20px 30px;
	
	
}


.homeLink {
	float:right;
	margin:30px;
}
.homeLink a{
	color:white;
	
}

#outer{
	margin:120px 10px 0 10px;
}
.navAdmin{
	margin:20px 0;
}

#searchbar{
	margin-bottom:10px;
}

.loggedin {
	float:right;
	color:white;
	background-color:#01AAA7;
	padding:5px;
	margin: 5px;
}
.loggedin img{
	float:right;
	padding-left:5px;
}

/* for the forms  */
.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.container * {
  box-sizing: border-box;
}

.flex-outer,
.flex-inner {
  list-style-type: none;
  padding: 0;
}

.flex-outer {
  max-width: 800px;
  margin: 0 auto;
  clear:both;
}

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-inner {
  padding: 0 8px;
  justify-content: space-between;  
}

.flex-outer > li:not(:last-child) {
  margin-bottom: 4px;
}

.flex-outer li label,
.flex-outer li p {
  padding: 8px;
  font-weight: 300;
  letter-spacing: .09em;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}

.flex-outer > li > label + *,
.flex-inner {
  /* flex: 1 0 220px; */
}

.flex-outer li p {
  margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
  padding: 4px;
  border: thin solid #01AAA7;
}

.flex-outer li select{
	max-width:185px;
}
.flex-outer li button {
  /* margin-left: auto; */
  padding: 8px 16px;
  border: none;
  background: #01AAA7;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

.flex-outer li button.selector {
	margin-left:0;
	width:90%;
	max-width:300px;
}
.flex-outer li.left220 {
	flex: 1 0 120px;
 	max-width: 320px;
 	float:left;
 	clear:left;
}
	

	
.flex-inner li {
  width: 100px;
}

.flex-outer.cropYield input{
	width:50px;
	margin-right:10px;
}
.flex-outer.cropYield select{
	width:150px;
	margin-right:10px;
}
.cropYield .col{width:65px;}

.nav-button{
  padding: 8px 16px;
  border: none;
  background: #01AAA7;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09e
}

table.table {
	width: 100%; 
	border-collapse:collapse;
 }

.table th, .table td { 
  text-align: left; 
  padding: 0.25em;
  border:solid thin grey;
}

.table th{
	background-color : grey;
	color:white;
}

.table tr { 
  border-bottom: 1px solid #DDD;
}
td.edit-buttons { text-align: right; }
button { 
  border-radius: 3px; 
  border: none; 
  margin: 0 0.25em; 
  transition: all 0.3s;
}

button:hover { 
  box-shadow: 0 0 4px rgba(3,3,3,0.8); 
  opacity: 0.9;
}

button.edit {
  padding: 8px 16px;
  border: none;
  background: #01AAA7;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px; }
  
button.delete {  padding: 8px 16px;
  border: none;
  background: #ff0000;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;  }

@media screen and (max-width: 800px) {
  tr { 
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0.5em 0;
    border: 1px solid rgba(3,3,3,0.2);
  }
  td, th {
    flex: 1 1 150px;
    border: 0.5px solid rgba(3,3,3,0.2);
  }
  td.edit-buttons, td.empty {
    /*flex: 1 0 90%;
    text-align: center;*/
  }
}

* { box-model: border-box; font-family: arial; }

/***  Tab Styles  */
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    overflow:hidden;
}

.featherlight .featherlight-content {
	width:80%;
}
.featherlight iframe {
	width:100%;
}

.photoDiv {
	float:left;
	padding:5px;
}

#allocTbl {
	border:1px solid black;
	margin-left:auto;
	margin-right:auto;
	width:100%; 
	max-width:800px;
	 border-collapse: collapse;
}

#allocTbl td { border:1px solid grey;}

tr.year {background-color:lightgrey;}


.adminCol
{
	border:1px solid grey;
	float:left;
	padding:20px;
	margin:20px;
	width:300px;
}