@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------------------------------- NEW_STYLES.CSS STARTS HERE */

@font-face {
	font-family: "FFMetaSerifWebPro";
	font-style: regular;
	font-weight: 500;
	src: url(https://use.typekit.net/af/c00e0b/0000000000000000773599ad/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff2"),url("https://use.typekit.net/af/c00e0b/0000000000000000773599ad/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff")
}
@font-face {
	font-family: "FFMetaSerifWebPro";
	font-style: italic;
	font-weight: 500;
	src: url(https://use.typekit.net/af/2ccb86/0000000000000000773599b7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3) format("woff2"),url(https://use.typekit.net/af/2ccb86/0000000000000000773599b7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3) format("woff")
}
@font-face {
	font-family: FFMetaWebPro;
	font-style: regular;
	font-weight: 700;
	src: url(https://use.typekit.net/af/9f5d07/0000000000000000773599cd/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/9f5d07/0000000000000000773599cd/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("woff")
}
@font-face {
	font-family: FFMetaWebPro;
	font-style: italic;
	font-weight: 700;
	src: url(https://use.typekit.net/af/818e87/0000000000000000773599ba/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("woff2"),url(https://use.typekit.net/af/818e87/0000000000000000773599ba/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("woff")
}
@font-face {
	font-family: FFMetaWebPro;
	font-style: regular;
	font-weight: 500;
	src: url(https://use.typekit.net/af/062ba4/00000000000000007735999d/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3) format("woff2"),url(https://use.typekit.net/af/062ba4/00000000000000007735999d/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3) format("woff")
}
@font-face {
	font-family: FFMetaWebPro;
	font-style: regular;
	font-weight: 400;
	src: url(https://use.typekit.net/af/52375b/0000000000000000773599ca/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/52375b/0000000000000000773599ca/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("woff")
}
@font-face {
	font-family: FFMetaWebPro;
	font-style: italic;
	font-weight: 400;
	src: url(https://use.typekit.net/af/37c53a/0000000000000000773599c7/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("woff2"),url(https://use.typekit.net/af/37c53a/0000000000000000773599c7/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("woff")
}


/*-------------------------------------------------- GENERAL */

body {
	font-family: FFMetaWebPro, Arial, Helvetica, sans-serif;
	font-size: 110%;
	text-align:left;
	color: black;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,p {
	margin-top:0;
	padding-top:0;
}

h3 {
	font-size: 150%;
}

h4 {
	font-size: 120%;
}

sup {
	font-size: smaller;
	color: #bd9797;
}

a{
	text-decoration: none;
	color:blue;
}

a:hover{
	text-decoration:underline;
	color:blue;
}

a:visited{
	color:blue;
}

hr {
	clear: both;
	margin: 1em 0;
	border-top: 1px solid #ddd;
}

small{
	font-size: 90%;
}

.wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

.forceleft {
	float:left;
}

.forceright {
	float:right;
}

.clear {
	clear:both;
}

.normal {
	font-style: normal;
	font-weight: normal;
}

.stickywicky {
	position: -webkit-sticky;
	position: sticky;
	top: 30px;
}

/*-------------------------------------------------- HEADER */

#header {
	margin: 15px 0;
	padding: 0;
}

.logo {
	float:left;
	width:240px;
	height:60px;
	padding: 0;
	margin: 0;}

.logo span{
	display:none;
}

#loginInfo {
	float: right;
	clear: right;
	margin: 0;
	padding-left: 35px;
	font-size: 100%;
	color: #303030;
	background-size: contain;
}

.logoutButton {
	padding: 4px 6px;
	margin: 0 3px 0 5px;
	background-color: #f7f7f7;
	color: #000000;
	font-size: 80%;
	font-weight: bold;
	border-radius: 5px;
	border: solid black 2px;
}

.logoutButton:hover {
	background-color: black;
	color: #f7f7f7;
}

#devServer {
	font-size: 120%;
	font-weight: bold;
	margin: 0;
	padding: 20px;
	width: calc(100%-40px);
	text-align: center;
	background-color: #ce2121;
	color:white;
}

#devServer a{
	color: #69d7e3;
}


/*-------------------------------------------------- NAVIGATION */

#navigation {
	padding: 15px 0;
	margin: 0;
	background-color:#621b40;
	color: #FFF;
	border-radius: 10px 10px 0 0;
}

#navigation h2{
	font-size: 130%;
	float: left;
	margin:0;
	padding: 0 0 0 25px;
}

#menu {
	float: right;
	text-align: right;
	font-size: 100%;
	margin: 0;
	padding: 0 10px 0 0;
	color: #eee;
}

#menu ul{
	margin: 3px 0 0 0;
	padding: 0
}

#menu li{
	display: inline;
	margin: 0 6px 0 0;
	padding: 0;
	list-style-type: none
}

#menu a {
	padding: 6px 8px;
	text-decoration: none;
	color: #eee;
	border-radius: 5px;
}

#menu a:hover{
	text-decoration: none;
	color: #fff;
	background-color: #290a1b;
}

#subtitle {
	font-size: 130% !important;
	margin: 0;
	margin-bottom: 25px;
	padding: 15px 25px;
	background-color:#BA0046;
	color: #FFF;
	border-radius: 0 0 10px 10px;
}


/*-------------------------------------------------- MESSAGES */

.message {
	margin: 15px 0;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	padding: 25px;
	border-radius: 10px;
}

.success {
	font-size: 130% !important;
	background-color: #A4EF64 !important;
	color:#000000;
}

.error {
	font-size: 130% !important;
	background-color: #FF0000 !important;
	color:#FFFFFF;
}

.general {
	font-size: 130% !important;
	background-color: #FF0000 !important;
	color:#FFFFFF;
}


/*-------------------------------------------------- CONTENT */

.content {
	/*min-height: 300px*/
}

.block {
	margin: 20px 0 0 0;
	padding: 25px;
	background-color: #f5f5f5; /*#f7f7f7;*/
	border-radius: 10px;
}

.comments {
	background-color: #fcf9ec;
}

.filler {
	min-height: 300px;
}

.floatleft {
	float:left;
	text-align:left;
	margin-right:20px;
}

.floatright {
	float:right;
	text-align:left;
}

.twocolumn {
	width:calc(49% - 50px);
}

.threecolumn {
	width:calc(33% - 60px);
}

.twothirdscolumn {
	width:calc(66% - 60px);
}


/*-------------------------------------------------- FOOTER */

#footer {
	clear: both;
	margin: 20px 0;
	padding: 25px 25px;
	background-color: #333;
	background-position: calc(100% - 25px) 25px;
	background-size: 100px;
	background-repeat: no-repeat;
	border-radius: 10px;
	font-size: 80%;
	color: #fff;
}

#footer a{
	color: #bbb;
}

#PrivacyMessage, #CookieMessage {
	display:none
}

/*-------------------------------------------------- FORMS */

form{
	margin: 0;
	padding: 0;
}

input.date {
	width: 150px;
	color: #000;
}

.userform input[type=text], .userform input[type=password], .userform select, .userform textarea{
  font-family: sans-serif;
  color:#4b4a4a;
  width: 100%;
  padding: 8px;
  border: 1px solid #888;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  font-size: 100% !important;
}

.smallfield {
	width:50% !important;
}

#userpanel form{
	display: inline;
	padding: 0;
	margin: 0;
}

.title {
	margin: 0;
	padding: 10px 0 0 0;
	font-weight: bold;
	font-style: italic;
}

.formobject {
	max-width: 535px;
	margin: 0;
	padding: 5px 0 10px 0;
}

.highlight {
	color: red;
}

.button {
	margin: 0 10px 0 0;
	padding: 10px;
	min-width: 80px;
	height: 40px;
	font-size: 100%;
	border-radius: 4px;
	border: none
}

.SaveButton {
	background-color: #48b048;
	color: white
}
.SaveButton:hover {
	background-color: #287d28;
}

.EditButton {
	background-color: #db730a;
	color: #ffffff;
}
.EditButton:hover {
	background-color: #c95300;
}

.CancelButton {
	background-color: #c80404;
	color: #ffffff;
}
.CancelButton:hover {
	background-color: #920000;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-family: Arial, Helvetica, sans-serif;
	color: #b39e9e;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-family: Arial, Helvetica, sans-serif;
	color:  #968787;
}

::-ms-input-placeholder { /* Microsoft Edge */
	font-family: Arial, Helvetica, sans-serif;
	color:  #968787;
}

/*-------------------------------------------------- TABLES */

table {
	width: 100%;
	border: 1px #7a7a7a solid;
	border-spacing:0;
    border-collapse:collapse;
	background-color: #FFFFFF;
	margin: 0 0 15px 0;
}

td{
	font-size: 90%;
	padding: 8px 5px 8px 8px;
	text-align: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: dotted;
	border-bottom-style: none;
	border-left-style: dotted;
	border-top-color: #666666;
	border-right-color: #BEBEBE;
	border-left-color: #BEBEBE;
	vertical-align: top;
}

th{
	font-size: 95%;
	background-color: #717171;
	color: white;
	padding: 10px 5px 10px 8px;
	text-align: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: none;
	border-left-style: dotted;
	border-top-color: #BEBEBE;
	border-right-color: #BEBEBE;
	border-left-color: #BEBEBE;
}


/*-------------------------------------------------- STATUS COLOURS */

.status_Submitted, .status_Resubmitted, .status_Cancelled{
	color: gray;
}

.status_Approved, .status_Purchased{
	color:#093;
}

.status_Queried{
	color:#f70;
}

.status_Declined, .status_Rejected{
	color:#c00;
}

.box_Approved, .box_Purchased{
	background-color:#dfd;
}

.box_Queried{
	background-color:#fed;
}

.box_Declined, .box_Rejected{
	background-color:#fdd;
}


/*-------------------------------------------------- MISCELLANEOUS */

.enabled{
	background-color: #eaffb9 !important;
}

.disabled{
	color: white;
	background-color: #ff5d5d !important;
}

.NewButton {
	font-size: 110%;
	text-align: center;

}

.NewButton a{
	background-color: #2e8c2e;
	display:block;
	padding: 15px;
	color: white;
	text-decoration: none;
	border-radius:8px;
}

.NewButton a:hover{
	background-color: #48b048;
	text-decoration: none;
}

.ApplyClosed{
	background-color:#A81B1D;
	display:block;
	padding: 15px;
	color: white;
	font-size: 110%;
	text-align: center;
	border-radius:8px;
}

/*----------------------------------------------------------------------- SMALLER SCREENS */

@media only screen and (max-width: 1024px) {

	.wrapper {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	#main{
		padding: 0 15px;
	}

	.logo{
		margin: 0 0 0 15px;
		width:200px;
		height:55px;
	}

	#loginInfo {
		margin-right: 15px;
	}

	#navigation {
		border-radius: 0;
	}

	#navigation h2{
		padding: 0 0 0 15px;
	}

	#menu {
		padding: 0 10px 0 0;
	}

	#subtitle {
		border-radius: 0;
		padding: 15px
	}


	.block {
		margin: 0;
		padding: 0;
		border-radius: 0;
		background-color: white;
	}

	.floatright, .floatleft {
		float:none;
		margin:0
	}

	.twocolumn, .threecolumn, .twothirdscolumn {
		width: auto
	}

	#footer {
		min-height: 80px;
		margin: 0;
		padding: 20px 15px;
		border-radius: 0;
	}
}

/*--------------------------------------------------------------------------------- WMS_STYLES.CSS STARTS HERE */


/*-------------------------------------------------- GENERAL */

h3{
	font-size: 150%;
	margin-top: 20px;
}

.block h3{

	margin-top: 0px;
}

.admin {
	background-color:#4d995c !important;
}

.float_right{
	float: right
}

.nullnull{
	color:blue;
}

/*-------------------------------------------------- NAVIGATION */

.yourwork {
	border: 1px dotted #eee  !important;
	padding: 6px 0 !important;
	margin-left: 4px !important;
	border-radius: 5px !important;
	/*width: 200px !important;*/
}

#roottitle{
	float: left;
	height: 30px !important;
	padding: 15px !important;
	width: calc(100% - 240px);
}

#rootlink{
	clear: right !important;
	float: right;
	font-size: 100%;
	font-weight: bold;
	margin: 10px 0 0 0;
	text-align: center !important;
}

#rootlink a{
	border-radius: 5px;
	color: #044b1d  !important;
	padding: 5px 7px;
	display:block;
	background-color: #65f598 !important;
	text-decoration: none;
}

#rootlink a:hover {
	background-color: #044b1d !important;
	color: #98febc  !important;
}

.rootmenu {
	color: #65f598 !important;
	background-color: #044b1d  !important;
	border-radius: 10px !important;
	margin-bottom: 20px !important
}

.rootmenu a {
	color: #beffd5  !important;
}

.adminsub{
	color: #044b1d  !important;
	background-color: #65f598 !important;
}

/*------------ PAGINATION */

.paginate {
	margin: 15px;
	font-size: 110%;
}

.paginate a {
	padding-left: 3px;
	padding-right: 3px;
}

.paginate a:hover{
	background-color: #afff61
}

.paginate strong {
	padding-left: 3px;
	padding-right: 3px;
}


/*-------------------------------------------------- MAIN CONTENT */

#subtitle {
	margin-bottom: 15px !important;
}

.message {
	background-color: #F0F2E8;
}

.message p{
	float:left;
	text-align: left;
	font-style: normal !important;
	font-weight: normal;
	font-size: 100%;
	padding:0;
	margin:0;
	line-height: 1.5;
	max-width: 70%;
}

.right {
	float:right !important;
	font-size: smaller !important;
	max-width: 25% !important
}

.highlight{
	color:red;
	font-weight: bold;
}

.nonfunded { background-color: #D0EEF1; }
.nonfunded input{ background-color: #d6eff1; width: 2em; font-size: small;}
.funded { background-color: #FFF4C8; }
.funded input{ background-color: #fff6d2; width: 2em; font-size: small; }

.admin_panel{
	margin: 10px 0 25px 0;
	padding: 15px;
	border-radius: 10px;
	clear: both;
	background-color: #F0F2E8;
}

.admin_links {
	color:white;
}

.admin_links a{
	color:white;
	font-size: 95%;
	background-color: #8869b8;
	padding: 4px 6px;
	margin: 0 7px 0 0;
	text-decoration: none;
	border-radius: 5px;
	cursor: pointer;
}

.admin_links a:hover{
	background-color: #593c85;
}

.entry_note {
	display:none;
	position: absolute;
	z-index: 1;
	width:280px;
	font-size: 90%;
	padding: 15px 16px;
	background-color: #ece1f3;
	border:2px solid #593c85;
	border-radius: 0 3px 3px 3px;
	color:black;
	font-weight: normal
}

.third_block{
	width: calc(33% - 20px);
	float: left;
	padding-left: 20px;
	min-width: 300px;
	border-right: 1px dotted black
}

#search, #namesearch{
	float:right;
	padding-top:25px;
}

#search input, #namesearch input{
	background-color: #f9f9f9;
	border:2px solid #898989;
	padding: 5px 10px;
	border-radius: 4px;
	color: #4a4949;
	font-size: 110%;
	width: 400px;
}

#namesearch input{
	width: 250px !important;
}

#livesearch, #livenamesearch{
	display: none;
	position: absolute;
	margin: 0 0 0 5px;
	z-index: 1;
	background-color: #f9f9f9;
	padding: 12px 10px 10px 10px;
	border:2px solid black;
	border-top: 0;
	width: 390px;
	color:black !important;
}

#livenamesearch {
	width: 240px !important;
}

#livesearch p{
	margin-top: 0;
}

/*--- TABLES ---*/

table {
	font-size: 110% !important;
	width: 100%;
	border: 1px #7a7a7a solid;
	border-spacing:0;
    border-collapse:collapse;
}

caption {
	text-align: left;
	font-size: 115%;
	font-weight: bold;
	padding-bottom: 10px;
}

tr {
	background-color: #fbfbfb;
}

td {
	padding: 10px 8px 10px 8px;
	text-align:left;
	vertical-align:top;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: dotted;
	border-bottom-style: none;
	border-left-style: dotted;
	border-top-color: #666666;
	border-right-color: #BEBEBE;
	border-left-color: #BEBEBE;
}

thead tr {
	background-color: #717171;
}

th{
	color: white;
	padding: 12px 8px 12px 8px;
	text-align: center;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: none;
	border-left-style: dotted;
	border-top-color: #BEBEBE;
	border-right-color: #BEBEBE;
	border-left-color: #BEBEBE;
}

.th_note {

}

.th_note a{
	font-weight: bold !important;
	text-decoration: none !important;
	color: #717171 !important;
	padding: 0px 6px;
	cursor: pointer;
	background-color:#bcbcbc;
	font-size: 80%;
	border-radius: 10px;
}

.th_note a:hover{
	background-color:#ffffff;
}

table .admin_links {
	font-size: 80%;
	padding: 8px 0 0 0;
}

.completion_Optional {
	background-color: #dcf8fb;
}

.completion_Required {
	background-color: #fff5d4
}

.subheader{
	font-size: 110%;
	padding: 12px 8px 12px 8px;
	background-color: #dddddd
}

tbody tr:hover{
	background-color: #fff28b !important
}

.actual{
	background-color: #f3e4f2;
	font-weight: bold;
	border-right: grey 2px solid
}

/*--- FORMS ---*/

input,textarea,select {
	font-size: 100%;
}

label{
	font-weight: bold;
}

td input {
	font-size: 100% !important;
	border:solid #C1C1C1 1px;
	width: 30px !important
}

.admin_form div{
	padding: 10px;
	margin: 0 0 10px 0;
}

.admin_form div label{
	display: block;
	margin: 0 0 8px 0;
}

.admin_form input[type=text], .admin_form textarea, .admin_form select{
	clear:both;
	padding: 0;
	margin: 0;
}

.wider{
	width: 50%
}

.admin_form fieldset {
	padding: 10px;
	margin: 0 0 20px 10px;
	width: auto !important
}

.admin_form legend {
	font-weight: bold;
}

.admin_form fieldset label{
	font-weight: normal !important;
	margin-right: 8px;
}

.admin_form fieldset input{
	margin-right: 20px !important;
}

/*input[type=text], textarea {
	width: 30%;
}*/

input[type=submit] {
	background-color: #4e9e4e;
	border: none;
	border-radius: 3px;
	color:white;
	padding: 10px 20px;
	text-decoration: none;
	cursor: pointer;
}

input[type=submit]:hover {
	background-color: #2f702f;
}

.delete {
	background-color: #ca3a3a !important
}

.delete:hover {
	background-color: #9b2d36 !important
}

.form_error {
	background-color: #fbe3e3;
	border-radius: 3px;
}

.form_error p{
	color: #953434;
	padding: 0;
	margin: 0 0 10px 0;
	font-style: italic;
}

#CurrentSave{
	padding: 15px 25px !important;
	font-size: larger !important;
}



/*--------------------------------------------------------------------------------- EXTRA_STYLES.CSS STARTS HERE */


/*-------------------------------------------------- ANIMATED MESSAGES */

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.alert {
  position: relative;
  top: 10;
  left: 0;
  width: auto;
  height: auto;
  padding: 20px;
  margin: 20px 0;
  line-height: 1.8;
  border-radius: 10px;
  cursor: hand;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  animation-name: fadein;
  animation-duration: 1s;
}

.alert_checkbox {
  display: none;
}

:checked + .alert {
  display: none;
}

.alert_text {
	font-size: 120%;
}

.alert_close {
  float: right;
  font-size: 15px;
}

.clear {
  clear: both;
}

.alert_success {
  background-color: #ae4;
  color: #000;
}

.alert_error {
  background-color: #f44;
  color: #fff;
}

.alert_general {
  background-color: #72ddea;
  color: #022;
}


/*----------------------------------------------------------------------- SMALLER SCREENS */

@media only screen and (max-width: 1024px) {


  .rootmenu {
    border-radius: 0px !important;
    margin-bottom: 0px !important
  }
}

