/* ------------------------
 * HTML ELEMENTS
 * --------------------- */
body {background-color:#F5F6F5;margin:20px;background-image:url('../content/layout/bodyBg.gif');}
body,
input,
select,
textarea,
th,
td {
	font-size: 14px;
	line-height: 1.6;
	font-family: Helvetica,"HelveticaNeue","Helvetica Neue",Arial,Verdana,sans-serif;
	color: #666;
}
img {border:0;}
form,
p {margin:10px 0 15px 0;}
table {margin:10px 0 15px 0;border-collapse:collapse;}
th {vertical-align:bottom;}
td {vertical-align:top;}
h1, h2, h3, h4, h5, h6 {
	font-family: Helvetica,"HelveticaNeue","Helvetica Neue",Arial,Verdana,sans-serif;
	margin:25px 0 10px 0;
	color:#222;
	font-weight: 600;
	line-height:1.2;}
	h2 a, .likeH2 a, 
	h3 a, .likeH3 a, 
	h4 a, .likeH4 a, 
	h5 a, .likeH5 a, 
	h6 a, .likeH6 a {color:#797979;text-decoration:none;}
		h2 a:hover, .likeH2 a:hover, 
		h3 a:hover, .likeH3 a:hover, 
		h4 a:hover, .likeH4 a:hover, 
		h5 a:hover, .likeH5 a:hover, 
		h6 a:hover, .likeH6 a:hover {text-decoration:underline;}
h1, .likeH1 {font-size:27px;margin-top:0;}
h2, .likeH2 {font-size:25px;margin-top:25px;}
h3, .likeH3 {font-size:22px;margin-top:22px;}
h4, .likeH4 {font-size:18px;margin-top:18px;}
h5, .likeH5 {font-size:16px;margin-top:16px;}
h6, .likeH6 {font-size:14px;margin-top:14px;}
a {color:#005fb8;}
	a:hover {text-decoration:none;}
table {border-collapse:collapse;margin:10px 0 15px 0;}
th {background-color:#888;color:#fff;vertical-align:top;}
td {background-color:#f9f9f9;}
th, 
td {border:1px solid #ccc;padding:5px 10px;}




/* ------------------------
 * USEFUL CLASSES 
 * --------------------- */
.clear {clear:both;height:1px;overflow:hidden;}
.error,
.success {padding:10px;}
.error {background-color:#fdd;border:1px solid #fbb;color:#f00;}
.success {background-color:#cfc;border:1px solid #ADA;color:#474;}
	/* ------------ STAFF SEARCH ------------ */
	.btn {border-radius:5px;background-color:#005fb8;color:#fff;padding:3px 15px;border:0;}
		.btn:hover {background-color:#4E4E6F;cursor:pointer;}
	/* ------------ STAFF SEARCH ------------ */
	form.search {}
	/* ------------ COLUMNS ------------ */
	.columns {}
	.col {float:left;}
	.col-1-3 {width:280px;margin-right:20px;}
	.col-last {margin-right:0;}
	/* ------------ PAGINATION ------------ */
	.pagination {margin:25px 0 10px 0;text-align:center;}
		.pagination a,
		.pagination em {background-color: #005fb8;color:#fff;background-position: right center;background-repeat: no-repeat;border-radius:5px;margin:0 5px;padding:5px 10px;text-decoration:none;}
		.pagination a:hover,
		.pagination em:hover {background-color:#4E4E6F;}
	/* ------------ SEARCH FORM ------------------*/
	form.search {margin:0 0 15px 15px; float:right;width:350px;background-color:#f0f0f0;border:1px solid #ddd;padding:10px 10px 0 10px;}
		form.search .medium {width:150px;}
		form.search select.medium {width:180px;}

		form.searchEnd {margin-left:5px;}
		form.search p {margin:0 0 10px 0;line-height:25px;}



/* ------------------------------------- 
 * SITE STRUCTURE
 * ----------------------------------- */
#container {margin:0 auto;width:1200px;}
	#page {background-color: #fff;border: 1px solid #ccc;margin-bottom:20px;}
		#header {
			border-bottom: 10px solid #005fb8;
			padding:15px 30px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
			#header form.search {margin:10px 0;}
		#content {padding:30px;}
	#footer {text-align: center;}
		#footer a {text-decoration:none;}
			#footer a:hover {text-decoration:underline;}




/* ------------------------------------- 
 * PAGE SPECIFIC
 * ----------------------------------- */
	/* ------------ HOMEPAGE MENU ------------ */
	#menuGrid {
		margin:30px 0 0 0;
		display: flex;
		justify-content: space-between;
	}
	#menuGrid .menuGridCol {
		width: 30%;
	}
		#menuGrid .module {
			background-color: #f9f9f9;
			border:1px solid #ddd;
			height: 200px;
		}
			#menuGrid .module  h4 {font-size:15px;margin:0;background-color:#888;color:#fff;padding:10px 20px;}
			#menuGrid .module .content {padding:20px;}
				#menuGrid  ul {list-style-type:none;list-style-position:inside;margin:0 0 20px 0;padding:0;}
					#menuGrid ul li {margin-bottom:5px;}
						#menuGrid ul a {
							margin:0 auto;width:80%;
							display:block;background-color:#88bbc8;padding:10px 30px 10px 10px;color:#fff;text-decoration:none;background-image:url('../content/layout/arrow-right.png');
							background-position: 95% center;
							background-repeat:no-repeat;}
							#menuGrid ul a:hover {background-position:96% center;}
					#menuGrid form {text-align:center;}
					#menuGrid input.field {width:100%;}
			#menuGrid .module form .field {width:150px;}

	/* ------------ AWR Listing ------------ */
	.meetsRightsAndBenefits td {background-color:#c0ebc0;}
	.id {width:100px;text-align:left;}
	.name {text-align:left;}
	.rights {width:10%;text-align:center;}
	.actions {width:60px;text-align:center;}
	.weeks {width:10%;text-align:center;}
	.role {width:20%;}
	.bookingDate {width: 10%;}


	/* ------------ Import Listing ------------ */
	.overflow {overflow:auto;margin-bottom:20px;}
	.import {margin-top:30px;}


#loginPage {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#loginPanel {
	width: 500px;
	margin-bottom: 10vh;
	text-align: center;
}
#loginPanel table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}
#loginPanel td {
	border: 0;
	padding: 0.5em;
	background-color: #fff;
}
#loginPanel input[type="text"],
#loginPanel input[type="password"] {
	width: 100%;
}
#loginPanel #page {
	padding: 30px;
}