/* default is for mobile. use @media screen and (min-width: 600px) { to set specifics for larger */

*, *:before, *:after {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
}

@media screen and (min-width: 600px) {
	/* for bigger devices */
	.onlyonmobile {
		/*display: none;*/
	}
}

/*general styles--------------------*/
body {
	font-family: Arial;
	font-size: 12px;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	text-align: center;
	background-color: #666;
	color: #000;
}
.popup {
	background-color: #fff;
	text-align: left;
	margin: 0;
}
td {
	font-family: Arial;
	font-size: 12px;
	color: #000;
}
h1 {
	font-family: Verdana;
	font-size: 18px;
	font-weight: bold;
	margin: 12px 0 12px 0;
	padding-bottom: 4px;
	color: #069;
	border-bottom: 1px solid #666;
}

h2 {
	color: #069;
	font-family: Verdana;
	font-size: 15px;
	margin: 8px 0 4px 0;
	font-weight: bold;
}
h3 {
	color: #666;
	font-family: Verdana;
	font-size: 13px;
	margin: 4px 0 2px 0;
}
a, a:visited, a:link, 
a h3, a:visited h3, a:link h3 { 
	color: #069;
	text-decoration: underline;
}
a:hover, a:active, a:hover h3, a:active h3 { color: #666; }
p {
	margin: 2px 0 5px 0;
	padding: 0;
}
ul, ol { margin: 2px auto 2px 35px; }
html > body ul, html > body ol { margin: auto; }
li { padding-bottom: 5px; }
input, select, button {
	font-size: 10px;
	color: #000;
	font-family: Verdana;
	margin: 0;
}
textarea, .textarea {
	font-size: 10px;
	font-family: Verdana;
	width: 605px !important;
	height: 50px;
}
hr {
    height: 1px;
	color: #ccc;
    background-color: #ccc;
    width: 100%;
    border: 0;
}
img { max-width: 100%; }
.bigtextarea {
	font-size: 10px;
	font-family: Verdana;
	width: 388px;
	height: 100px;
}
.lightbg { border: 1px solid #666; padding: 2px 5px 2px 5px; margin: 5px; }
.button { float: right; clear: left; }
.bold { font-weight: bold; }
.clear { clear: both; }
.clearleft { clear: left; }
.hidden { display: none; }
.error, .errornowidth, .errornarrow {
	margin: 10px 0 10px 0;
	padding: 5px;
	border: 1px solid #E63030;
	background: #eee;
	width: auto;
	color: #E63030;
	font-size: 10px;
	font-family: Verdana;
}
.errortext { 
    color: #E63030; 
    font-weight: bold;
}
.error td {
	color: #E63030;
	font-size: 10px;
	font-family: Verdana;
	padding-right: 15px;
	vertical-align: top;
}
a.errortext, a.errortext:visited, a.errortext:link { color: #E63030 !important; }
a.errortext:hover, a.errortext:active { color: #666 !important; }
.success, .successnowidth, .successnarrow {
	margin: 10px 0 10px 0;
	padding: 5px;
	border: 1px solid #069;
	background: #eee;
	width: auto;
	color: #069;
	margin: 5px 0 5px 0;
	font-size: 10px;
	font-family: Verdana;
}
#popuppagecontainer .success, #popuppagecontainer .error { width: auto; }
.errornarrow, .successnarrow {
	width: 45%;
	float: left;
	margin-right: 10px;
}
.success .heading, .error .heading, .successnarrow .heading, .errornarrow .heading {
	font-weight: bold;
	text-transform: capitalize;
	margin: 2px 0 5px 0;
	padding: 0;
	font-size: 11px;
}
.current, .instructions {
	margin: 5px 0 10px 0;
	font-size: 10px;
	font-family: Verdana;
	color: #666;
	clear: both;
}
.instructions {
	border: dashed 1px #ccc;
	padding: 2px 5px 2px 5px;
	position: relative;
	color: #666;
	width: auto;
	font-size: 10px;
	font-family: Verdana;
}
.intro {
	font-style: italic;
	margin: 5px 0 10px 0;
}
.prev {
	float: left;
	margin: 2px;
}
.next {
	float: right;
	margin: 2px;
}
.small {
	font-size: 10px;
	font-family: Verdana;
}
.grey { color: #999999; }
.left { float: left; }
.right { float: right; }
img.border {
	border: 1px solid #000;
	margin: 2px;
}
.leftcol, #leftcol {
	float: left;
	width: 48%;
}
.rightcol, #rightcol {
	float: right;
	width: 48%;
}
.contentimageright {
	float: right;
	margin: 2px;
}	
.emdevlink {	
	padding: 20px 0 20px 0;
	font-family: Verdana;
	font-size: 10px;
}
.emdevlink img {
	padding-bottom: 4px;
}

.superscript {
	font-size: 9px;
	float: right;
}
.mandatory {
		background: url(/functional/images/mandatory.gif) no-repeat right top;
}

@media screen and (max-width: 600px) {
	.emdevlink, .leftcol, .leftcoltext { /*left col containing menu etc*/
		display: none;
	}
	.mandatory {
		background: url(/functional/images/mandatory.gif) no-repeat left top;
		padding-left: 8px;
	}
	#leftcol, #rightcol { /*news & events columns on home page*/
		width: 100%;
		float: none;
		margin-bottom: 10px;
		overflow: auto;
	}
}

#finansummary {
	width: auto;
	background: #eeeeee;
	border: 1px solid #666;
	padding: 5px;
	padding-top: 5px;
}
	#finansummary .flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
#finansummary .total  {
    border-top: solid 1px #666; 
    font-weight: bold;
    padding: 5px 0 5px 0 ;
}
#finansummary .totaltop  {
    border-bottom: solid 1px #666; 
    font-weight: bold;
}

#finansummary .desc { width: 200px; }
#finansummary .amount { width: 100px; }
#finansummary .text { width: 220px; }
#finansummary .spacer { width: 40px; }
#finansummary h2 { padding-bottom: 8px; }
/*wysiwyg editor--------------------*/
#editor {
	text-align: left;
	background-color: #fff;
}
/*overlay / lightbox--------------------*/
#overlay, #overlayloading {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #666;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
#overlaybox, #overlayboxloading {
	position: fixed;
	margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
	left: 0;
	right: 0;
	padding: 5px;
	border: 1px solid #000;
	background-color: white;
	z-index: 1002;
	text-align: left;
	max-height: 700px;
	overflow: auto;
	width: 50%;
}
#overlayboxloading {
    left: 30%;
    width: 300px;
    text-align:center;
    vertical-align: middle;
    padding: 50px 0 50px 0;
}
@media screen and (max-width: 600px) {
	#overlaybox, #overlayboxloading {
		width: 90%;
		max-height: 500px;
	}
}

	/*help text key--------------------*/
	#helptext {
		width: 100%;
	}

		#helptext td {
			vertical-align: top;
			padding: 2px 5px 2px 2px;
		}

		#helptext .content {
			padding: 2px 15px 2px 15px;
		}

		#helptext .key {
			width: 120px;
			border: 1px solid #666;
			background-color: #eee;
			font-size: 10px;
			padding-left: 8px;
			padding-right: 5px;
		}

			#helptext .key h2, #helptext .nav h2 {
				margin: 5px 0 5px 0;
				font-size: 12px;
			}

			#helptext .key h3, #helptext .nav h3 {
				margin: 5px 0 5px 0;
				font-size: 10px;
			}

		#helptext .nav {
			width: 170px;
			border: 1px solid #666;
			background-color: #eee;
			padding-left: 8px;
			padding-right: 5px;
		}

			#helptext .nav .lvl1 {
				margin: 3px 0 3px 0;
			}

			#helptext .nav .lvl2 {
				margin: 3px 0 3px 10px;
			}

			#helptext .nav .lvl3 {
				margin: 3px 0 3px 20px;
			}

		#helptext .selected {
			font-weight: bold;
		}

	/*container styles--------------------*/
	#pagecontainer {
		background-color: #fff;
		text-align: left;
		position: relative;
		margin: 0 auto 0 auto;
	}

	#leftcontainer {
		display: none;
	}

	#contentcontainer {
		margin: 10px;
		overflow-x: scroll;
	}

	#popuppagecontainer {
		background: #fff;
		text-align: left;
	}

	#popupcontentcontainer {
		margin: 10px;
	}

	@media screen and (min-width: 600px) {
		/* for bigger devices */
		#pagecontainer {
			background: #fff url(/functional/images/navbg.gif) repeat-y;
			width: 80% !important;
			max-width: 1200px;
			min-width: 900px;
			margin: auto;
		}

		#contentcontainer {
			margin: 10px 10px 10px 182px;
			overflow: hidden;
		}

		#leftcontainer {
			width: 172px;
			display: block;
			float: left;
			margin: 0 0 0 0;
			text-align: center;
		}
	}

	/*header styles--------------------*/
	#headercontainer {
		background-color: #069;
		width: 100%;
		height: auto;
		min-height: 50px;
		padding: 10px 0;
	}

		#headercontainer .headtextmobile {
			background-color: #069;
			color: #fff;
			font-size: 30px;
			font-family: Verdana;
			font-weight: bold;
			width: 100% - 55px;
			padding-left: 55px;
			margin-top: -3px;
			height: auto;
		}

		#headercontainer .headtext, #headercontainer .headtext2 {
			display: none;
		}

	#popuppagecontainer #headercontainer .headtext {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		margin: 0;
	}

	#headercontainer .leftimage, #headercontainer .rightimage {
		display: none;
	}

	@media screen and (min-width: 600px) {
		/* for bigger devices */
		#headercontainer .leftimage, #headercontainer .rightimage {
			float: left;
			width: 172px;
			height: 92px;
			display: block;
		}

		#headercontainer .rightimage {
			float: right;
		}

		#headercontainer {
			height: 93px;
			padding: 0;
		}

			#headercontainer .headtext {
				background-color: #069;
				color: #fff;
				font-size: 30px;
				font-family: Verdana;
				font-weight: bold;
				float: left;
				padding: 25px;
				width: 580px;
				height: 42px;
				text-align: center;
				margin: 0 1px 0 1px;
				padding: 20px 0 20px 0;
				display: block;
			}

			#headercontainer .headtextmobile {
				display: none;
			}
	}

	/*top nav--------------------*/
	#topnavcontainer {
		background: #c33 url(/functional/images/topnavbg.gif) repeat-x;
		background-color: #39c;
		color: #000;
		width: 100%;
		border-bottom: 1px solid #fff;
		clear: both;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		align-content: stretch;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0;
	}

		#topnavcontainer li {
			text-align: center;
			border-left: 1px solid #fff;
			border-bottom: 1px solid #fff;
			width: 154px;
			padding: 0;
			list-style-type: none;
			flex: auto;
			display: flex;
			align-content: stretch;
			min-height: 28px;
		}

			#topnavcontainer li a {
				font-family: Verdana;
				color: #fff;
				text-decoration: none;
				font-weight: bold;
				font-size: 13px;
				display: block;
				padding: 5px 1px 0 0;
				width: 100%;
			}

				#topnavcontainer li a:hover, #topnavcontainer li a:active, #topnavcontainer li a.selected {
					background: #069 url(/functional/images/topnavselectedbg.gif) repeat-x;
					color: #fff;
					background-color: #069;
				}

		#topnavcontainer .first {
			border-left: 0px;
		}

	@media screen and (min-width: 600px) {
		/* for bigger devices */
		#topnavcontainer {
			flex-wrap: nowrap;
		}
	}

	@media screen and (max-width: 600px) {
		/* for smaller devices hide top nav */
		#topnavcontainer {
			display: none;
		}
	}
	/*login form styles--------------------*/
	@media screen and (min-width: 600px) {
		/* for smaller devices */
		.loginmobilelink, #contentcontainer #loginform { /*hide mobile login link*/
			display: none;
		}
	}

	#loginform {
		font-family: Verdana;
		font-size: 10px;
		text-align: left;
		padding: 5px 8px 10px 8px;
		width: 100%;
		background-color: #eee;
		float: left;
		margin-bottom: 0;
	}

		#loginform .error {
			width: 143px;
		}

		#loginform .button {
			clear: both;
			float: right;
			margin-top: 3px;
		}

		#loginform .textbox {
			font-size: 10px;
			width: 153px;
			margin-bottom: 3px;
		}

		#loginform .chkbox {
			float: left;
			margin-bottom: 2px;
			margin-top: 2px;
			margin-right: 3px;
		}

		#loginform .label {
			margin-top: 2px;
		}

		#loginform .helplinks {
			padding-top: 2px;
			clear: both;
		}

	#logoutform {
		font-family: Verdana;
		font-size: 10px;
		padding: 0 8px 5px 8px;
		width: 100%;
		text-align: left;
		background-color: #eee;
		float: left;
	}

		#logoutform #label {
			font-family: Verdana;
			padding-top: 3px;
		}

		#logoutform .button {
			font-size: 10px;
			margin-top: 5px;
			float: right;
		}

	@media screen and (max-width: 600px) {
		/* for smaller devices */
		#leftcontainer #loginform {
			display: none;
		}

		.loginmobilelink {
			display: block;
			position: absolute;
			top: 55px;
			left: 90px;
			width: 250px;
			font-size: 18px;
		}

		#logoutform {
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 45px;
		}

			#logoutform #label, #logoutform .button {
				float: left;
				margin: 0;
				padding: 0;
				clear: none;
			}

			#logoutform .button {
				float: right;
			}

			#logoutform #label span {
				font-size: 12px;
			}

			#logoutform .button input {
				font-size: 16px;
			}
	}
	/*footer styles--------------------*/
	#footercontainer {
		color: #fff;
		width: 100%;
		min-height: 20px;
		border-top: 1px solid #fff;
	}

		#footercontainer ul {
			background-color: #069;
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: space-around;
			width: 100%;
			min-height: 20px;
		}

		#footercontainer li {
			text-align: center;
			border-left: 1px solid #fff;
			padding: 2px 10px 2px 10px;
		}

			#footercontainer li a, #footercontainer .time {
				font-family: Verdana;
				font-size: 10px;
				color: #fff;
				text-decoration: none;
			}

				#footercontainer li a:hover, #footercontainer li a:active {
					color: #ccc;
					text-decoration: none;
				}

		#footercontainer .time {
			border-left: none;
			flex-grow: 1;
			text-align: left;
			padding-top: 3px;
		}


	/*left nav - for web --------------------*/
	@media screen and (min-width: 600px) {
		#mobilenav {
			display: none; /*hide mobile nav from web version*/
		}

		#leftnav {
			margin: 0 0 30px 0;
			clear: both;
		}

			#leftnav .level1, #leftnav .level2 {
				text-align: left;
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

			#leftnav .level3 {
				list-style-type: none;
				width: 100%;
				margin: 0;
				padding: 0;
			}

			#leftnav .level1 li, #leftnav .level2 li {
				float: left;
				background-color: #39c;
				width: 172px;
				padding: 0;
			}

			#leftnav .level3 li {
				float: right;
				margin: 0;
				padding: 0 0 0 8px;
				width: 164px;
			}

			#leftnav li a {
				font-family: Verdana;
				font-size: 11px;
				text-decoration: none;
				font-weight: normal;
				color: #fff;
				display: block;
				padding: 6px 2px 6px 8px;
				border-top: 1px solid #fff;
			}

			#leftnav .level3 li a {
				border: 0;
				padding: 4px 2px 4px 8px;
			}

			#leftnav li a:hover, #leftnav li a:active {
				color: #fff;
				background-color: #069;
			}

			#leftnav .level3 li a:hover, #leftnav .level3 li a:active {
				border-top: 1px solid #000; /*for some reason need this line for hover to work on level 2*/
				border: 0;
			}

			#leftnav li a.selected {
				font-weight: bold;
				color: #fff;
				background-color: #069;
			}

			#leftnav .level3 li a.selected {
				font-weight: normal;
				color: #fff;
				border: 0;
			}
	}

	/*mobile menu--------------------*/
	@media screen and (max-width: 600px) {
		/* for smaller devices */
		#leftcontainer {
			display: none;
		}

		#mobilenav {
			display: block;
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 1;
			-webkit-user-select: none;
			user-select: none;
		}

			/*check box used to show / hide menu*/
			#mobilenav input.hamburger {
				display: block;
				width: 40px;
				height: 40px;
				position: absolute;
				top: -5px;
				left: -5px;
				cursor: pointer;
				opacity: 0; /* hide this */
				z-index: 2; /* and place it over the hamburger */
				-webkit-touch-callout: none;
			}

			/*hamburger*/
			#mobilenav span.hamburger {
				display: block;
				width: 40px;
				height: 6px;
				margin-bottom: 6px;
				position: relative;
				background: #fff;
				border-radius: 3px;
				z-index: 1;
				transform-origin: 4px 0px;
				transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
			}

			/*rotate hamburger to cross when check the checkbox*/
			#mobilenav input:checked ~ span {
				background: #666;
				opacity: 1;
				transform: rotate(45deg) translate(1px, -2px);
			}
				/*hide middle span*/
				#mobilenav input:checked ~ span:nth-child(3) {
					opacity: 0;
					transform: rotate(0deg) scale(0.2, 0.2);
				}
				/*last span to go other direction*/
				#mobilenav input:checked ~ span:nth-child(4) {
					opacity: 1;
					transform: rotate(-45deg) translate(0, -2px);
				}

		#menu {
			background-color: #39c;
			position: absolute;
			width: 350px;
			margin: -100px 0 0 -50px;
			padding-left: 40px;
			padding-top: 100px;
			background: #ededed;
			list-style-type: none;
			-webkit-font-smoothing: antialiased;
			/* to stop flickering of text in safari */
			transform-origin: 0% 0%;
			transform: translate(-100%, 0);
			transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
		}

			#menu ul {
				text-align: left;
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

				#menu ul.level2 {
					margin-left: 10px;
				}

				#menu ul.level3 {
					margin-left: 20px;
				}

			#menu li {
				padding-bottom: 0;
			}

				#menu li a {
					font-size: 18px;
					text-decoration: none;
					font-weight: normal;
					color: #fff;
					display: block;
					padding: 8px 2px 6px 8px;
					border-top: 1px solid #fff;
					background-color: #39c;
				}

					#menu li a.selected {
						font-weight: bold;
						color: #fff;
						background-color: #069;
					}

			#menu .level2 li a, #menu .level3 li a {
				border-top: none;
			}

		/*slide menu from left when check the checkbox*/
		#mobilenav input:checked ~ div {
			transform: none;
		}
	}
	/*icons--------------------*/
	#icon {
		width: 16px;
		height: 16px;
		margin: 2px 3px 2px 3px;
		text-align: left;
	}
		#icon.messages {
			float: left;
		}

	.ui-datepicker-trigger {
		height: 16px;
		margin: 2px 2px 2px 2px;
		width: 16px;
		text-align: left;
	}

	#icon.nomargin {
		margin: 1px 0 1px 0;
		width: 16px;
	}

	#icon.text {
		margin-right: 10px;
		width: auto;
	}

	#icon.left {
		float: left;
	}

	#icon img, .icon {
		border: 0;
		border-radius: 5px;
	}

	#icon.nomargin img {
		margin: 0 !important;
	}

	#icon.text img {
		float: left;
		margin-right: 2px;
	}

	#icon.disabled {
		color: #999;
	}

	#icon img, .ui-datepicker-trigger {
		background-color: #069;
	}

		#icon a:hover img, .ui-datepicker-trigger:hover {
			background-color: #666;
			cursor: pointer;
		}

	#icon.iconerror img {
		background-color: #E63030;
	}

	#icon.C a:hover img, #icon.C img, #icon.D a:hover img, #icon.D img {
		background-color: #666;
	}

	#icon.A a:hover img, #icon.A img {
		background-color: #393;
	}

	#icon.W a:hover img, #icon.W img {
		background-color: #f60;
	}

	#icon.R a:hover img, #icon.R img {
		background-color: #E63030;
	}

	#icon.disabled img, #icon img.unselected {
		background-color: #999;
	}

	/*buy tickets--------------------*/
	#buyticket {
		float: right;
		border: 1px solid #666;
		background: #eee;
		padding: 0px 5px 5px 5px;
		margin: 0 0 5px 5px;
	}

		#buyticket .break {
			margin-bottom: 5px;
			padding-top: 5px;
			width: 100%;
			border-bottom: 1px solid #ddd;
			height: 1px;
			clear: both;
		}

		#buyticket .textbox {
			width: 30px;
			text-align: right;
		}

		#buyticket .textboxbig {
			width: 165px;
		}

		#buyticket table {
			margin: 0 0 2px 0;
			width: 165px;
		}

		#buyticket td {
			padding: 2px 0 2px 0;
			font-size: 11px;
			font-family: Verdana;
		}

	/*lists--------------------*/
	#list {
		border-bottom: 1px dashed #ccc;
		padding: 3px 0 8px 0;
		width: 100%;
		clear: both;
		float: left;
	}

		#list.top {
			border-top: 1px dashed #ccc;
		}

		#list .heading {
			font-weight: bold;
			border-bottom: 1px dashed #000;
		}

		#list .listitem {
			float: left;
			margin-right: 15px;
		}

		#list .image {
			float: right;
			margin: 5px 0 5px 10px;
			border: 1px solid #666;
			width: 120px;
		}

		#list .date, .date {
			color: #666;
			font-size: 10px;
			font-family: Verdana;
			margin-bottom: 2px;
		}

	/*list table--------------------*/
	#plaintable {
		clear: both;
	}

		#plaintable td {
			font-size: 10px;
			font-family: Verdana;
			padding: 0 5px 0 5px;
			height: 18px;
			vertical-align: top;
		}

	#listtable {
		clear: both;
		background-color: #eee;
		border-bottom: 1px solid #666;
		border-left: 1px solid #666;
	}

	#listtable ul {
		padding-left: 18px;
	}
	#listtable.print {
		border: 1px solid #000;
		border-top: none;
		border-left: none;
		background: none;
	}

	#listtable .heading {
		font-weight: bold;
		background-color: #069;
		color: #fff;
		vertical-align: middle;
	}

	#listtable.screen .heading {
		font-size: 11px;
	}

	#listtable .heading a {
		color: #fff;
	}

	#listtable .subheading {
		font-weight: bold;
		background-color: #999;
		height: 17px;
	}

	#listtable.screen .screensubheading {
		font-size: 11px;
	}

	#listtable td {
		font-size: 10px;
		font-family: Verdana;
		padding: 2px 5px 2px 5px;
		height: 18px;
		border-top: 1px solid #666;
		border-right: 1px solid #666;
		vertical-align: top;
	}

	#listtable.screen td {
		font-size: 9px;
		font-family: Verdana;
		padding: 2px 5px 1px 5px;
		height: auto;
		border-top: 1px solid #666;
		border-right: 1px solid #666;
		vertical-align: top;
		font-weight: bold;
	}

	#listtable.print td {
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		background: none;
		color: #000;
		vertical-align: middle;
	}

	#listtable.small td {
		font-size: 10px;
		font-family: Verdana;
		padding: 1px 3px 1px 3px;
	}

	#listable .peopledetails {
		position: absolute;
		top: 0;
		left: 0;
	}

	#listtable .tiny, #listtable.screen .tiny {
		font-size: 2px;
		height: 2px;
	}

	#listtable.fullwidth {
		width: 100%;
	}

	#listtable .nobold {
		font-weight: normal;
	}

	#listtable .bgwhite {
		background-color: #fff;
	}

	#listtable .nopadding {
		padding: 0 0 0 0;
		height: auto;
	}

	#listtable.noborder, #listtable .noborder {
		border: 0;
	}

	#listtable .noborderright {
		border-right: 0;
	}

	#listtable .noborderleft {
		border-left: 0;
	}

	#listtable.bordertop, #listtable .bordertop {
		border-top: 1px solid #666;
	}

	#listtable.borderright, #listtable .borderright {
		border-right: 1px solid #666;
	}

	#listtable .alt {
		background-color: #ddd;
	}

	#listtable.screen .alt {
		background-color: #ccc;
	}

	#listtable .level0 {
		font-weight: bold;
	}

	#listtable .cancel, .cancel {
		color: #999;
	}

	#listtable .accept, .accept {
		color: #393;
	}

	#listtable .wait, .wait {
		color: #f60;
	}

	#listtable .new, .new {
		color: #E63030;
	}

	#listtable .attention {
		background: url(/functional/images/attention.gif) no-repeat right top;
		padding-right: 14px;
	}

	#listtable .fee {
		width: 50px;
	}

	#listtable .icons4 {
		width: 100px;
	}

	#listtable .icons3 {
		width: 76px;
	}

	#listtable .icons2 {
		width: 55px;
	}

	#listtable .icons1 {
		width: 16px;
	}

	#listtable .currency {
		width: 60px;
	}

	#listtable .night {
		width: 175px;
	}

	#listtable .bunks {
		width: 100%;
	}

	#listtable .num {
		text-align: center;
	}

	#listtable .notenough {
		color: #E63030;
	}

	#listtable .image {
		width: 100px;
	}

	#listtable .cost {
		width: 60px;
	}

	#listtable .sort {
		width: 20px;
	}

	#listtable .quantity {
		width: 50px;
	}

	#listtable .total {
		width: 65px;
	}


/*listtable styles for parameter page*/
#listtable td.param-col { width: 70%; } 
#listtable td.value-col { width: 30%; word-wrap: break-word; word-break: break-word; } 
#listtable .param-name { display: inline-block; vertical-align: middle; } 
#listtable .edit-icon { display: inline-block; vertical-align: middle; } 
#listtable .param-description { display: block; } 


/*edit form styles--------------------*/
#editform {
	font-size: 11px;
	font-family: Verdana;
	padding: 5px;
	border: 1px solid #666;
	background: #eee;
	overflow: hidden;
	clear: both;
}


	#editform .fielderror, .fielderror {
		color: #E63030;
		font-weight: bold;
	}

	#editform .control {
		width: 100%;
		clear: both;
		margin: 3px 0 3px 0;
		padding-top: 5px;
		float: left;
	}

	#editform .disabled {
		color: #999;
	}

	#editform .textareacontrol, #editform .bigtextareacontrol {
		width: 100%;
		clear: both;
	}

	#editform .label, #listtable .label {
		font-size: 11px;
		font-family: Verdana;
		float: left;
		width: 165px;
		margin: 0 5px 2px 0;
		clear: both;
		text-align: right;
		padding-right: 5px;
	}

	#editform .labelheading {
		font-weight: bold;
		text-align: left;
	}

	#editform .fulllabel {
		font-size: 11px;
		font-family: Verdana;
		float: left;
		width: 100%;
		clear: both;
		overflow: auto;
	}

	#editform label {
		margin-right: 5px;
	}

	#editform .value, #editform .staticvalue, #listtable .value {
		font-size: 11px;
		font-family: Verdana;
		float: left;
		width: calc(100% - 180px);
	}

	#editform #listtable.fullwidth {
		width: 100%;
	}

	#editform .newline {
		font-size: 11px;
		font-family: Verdana;
		float: none;
		clear: both;
	}

	#editform .textbox, .longtextbox, .shorttextbox {
		float: left;
		font-size: 11px;
		font-family: Verdana;
		width: 388px;
	}

	#editform .spaceabove {
		margin-top: 5px;
	}

	#editform .shorttextbox {
		width: 208px;
	}

	#editform .longtextbox {
		width: 605px;
	}

		#editform .textquantity {
			width: 40px !important;
			float: none !important;
			font-size: 11px;
			font-family: Verdana;
		}

	#editform .meal {
		float: left;
		font-size: 11px;
		font-family: Verdana;
		float: left;
		width: 50px;
	}

	#editform .selectbox {
		float: left;
		font-size: 11px;
		font-family: Verdana;
		float: left;
		width: 393px;
	}

	#editform .multiselect {
		font-size: 11px;
		font-family: Verdana;
		float: left;
	}

	#editform .multiselectbox {
		width: 179px;
		height: 150px;
		float: left;
	}

	#editform .multiselectbuttons {
		float: left;
	}

	#editform .midtextbox {
		font-size: 11px;
		font-family: Verdana;
		float: left;
		width: 332px;
	}

	#editform .guest {
		display: flex;
	}

	#editform .guesttextbox {
		font-size: 11px;
		font-family: Verdana;
		float: left;
		width: 210px;
	}

	#editform .guesttextbox2 {
		font-size: 11px;
		font-family: Verdana;
		float: left;
		width: 266px;
	}

	#editform .typetextbox {
		font-size: 11px;
		font-family: Verdana;
		float: left;
		width: 120px;
	}

	#editform .date {
		display: flex;
	}

	#editform .datepicker {
		font-size: 11px;
		font-family: Verdana;
		margin-right: 2px;
	}

	#editform .dayofweek {
		margin: 3px 10px 0 1px;
	}

	#editform .time {
	}


	/*#editform #divcalendar {
	margin: 1px 2px 2px 2px;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	background-color: white;
}*/

	#editform .smalltextbox {
		font-size: 11px;
		font-family: Verdana;
		float: left;
		width: 65px;
		margin-left: 2px;
	}

	#editform .checks td {
		font-size: 11px;
		font-family: Verdana;
		vertical-align: middle;
	}

	#editform .checks {
		width: 100%;
	}

		#editform .checks input {
			padding-top: 3px;
		}

		#editform .checks label {
			padding-left: 5px;
		}

	#editform .caticon {
		margin: 0 5px -6px 2px;
	}

	#editform .tall input, #editform .tall label {
		height: 22px;
	}

	#editform .button, #listtable .button, .button {
		text-align: right;
		margin-left: 2px;
		margin-bottom: 2px;
		float: right;
	}

	#editform .gap {
		margin-bottom: 5px;
		padding-top: 2px;
		width: 100%;
		border-bottom: 1px solid #ddd;
		height: 1px;
		clear: both;
	}

	#editform .success {
		font-weight: bold;
	}

	#editform .rule {
		border-bottom: 1px solid #666;
		margin: 0 -2px 0 0;
		width: 433px;
		height: 5px;
		line-height: 0;
		clear: both;
	}

	#editform .help {
		color: #666;
		font-size: 10px;
		clear: both;
		float: left;
		width: 100%;
	}

		#editform .help ol {
			margin: 0;
		}

		#editform .help li {
			padding-bottom: 0;
		}

	#editform .image {
		margin-top: 2px;
	}

	#editform .stripecc {
		float: left;
		width: 310px;
	}

	.StripeElement {
		padding: 4px 12px;
		color: #32325d;
		background-color: white;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-shadow: 0 1px 3px 0 #e6ebf1;
		-webkit-transition: box-shadow 150ms ease;
		transition: box-shadow 150ms ease;
		font-family: Verdana;
		font-size: 11px;
	}

	.StripeElement--focus {
		box-shadow: 0 1px 3px 0 #cfd7df;
	}

	.StripeElement--invalid {
		border-color: #fa755a;
	}

	.StripeElement--webkit-autofill {
		background-color: #fefde5 !important;
	}

	/*autocomplete*/
	.ui-autocomplete-loading {
		background-image: url('/functional/images/spinner.gif');
		background-repeat: no-repeat;
		background-position: right center;
	}

	.ui-autocomplete {
		max-height: 150px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		text-align: left;
	}

	@media screen and (max-width: 600px) {
		#editform .label, #listtable .label {
			float: none;
			text-align: left;
			font-weight: 600;
			width: 100%;
		}

		#editform .value, #editform .staticvalue, #listtable .value,
		textarea, .textarea,
		#editform .selectbox, #editform .textbox, #editform .longtextbox {
			width: 100% !important;
			margin: 0;
		}
	}

	/*availability calendar--------------------*/
	#availcalendar {
		text-align: center;
		margin-right: 10px;
		margin-bottom: 10px;
	}

		#availcalendar .small {
			font-size: 9px;
		}

		#availcalendar h2 {
			text-transform: uppercase;
		}

	html > body #availcalendar {
		position: relative;
	}

		#availcalendar table {
			border-bottom: 1px #666 solid;
			border-left: 1px #666 solid;
			width: 100%;
		}

		#availcalendar td {
			font-size: 10px;
			font-family: Verdana;
			width: 14%;
			padding: 0;
		}

		#availcalendar .heading {
			text-align: center;
			height: 15px;
		}

		#availcalendar .today {
			background-color: #ccc;
		}

		#availcalendar .top {
			border-top: 1px #666 solid;
		}

		#availcalendar .left {
			float: none;
		}

		#availcalendar .events {
			background-color: #ccc;
			border: 1px solid #666;
			position: absolute;
			z-index: 10;
			top: 50px;
			left: 50px;
			text-align: left;
			padding: 0 10px 5px 10px;
		}

		#availcalendar .detail {
			margin-bottom: 10px;
		}

		#availcalendar .date {
			color: #000;
			width: 18%;
			text-align: center;
			float: left;
			font-weight: bold;
			height: 100%;
			min-height: 40px;
			padding-top: 2px;
		}

		#availcalendar .showbedtype {
			min-height: 60px;
		}

		#availcalendar .past {
			background: none;
			color: #666;
		}

		#availcalendar a:link, #availcalendar a:visited {
			color: #000;
		}

		#availcalendar a:hover, #availcalendar a:active {
			color: #fff;
		}

	.canbook {
		background-color: #00D200;
	}

	.nobook {
		background-color: #E63030;
	}

	.hurry {
		background-color: #FF9900;
	}

	#availkey td {
		padding: 2px 10px 2px 10px;
		text-align: center;
		clear: both;
		font-weight: bold;
		font-size: 10px;
		font-family: Verdana;
		margin: 5px 0 5px 0;
		border-left: 2px solid #fff;
	}

		#availkey td.key {
			text-align: right;
			padding-right: 2px;
		}

	#availcalendar .availcontainer {
		float: left;
		padding: 0;
		width: 80%;
		height: 100%;
		padding: 5% 0 5% 0;
	}

	#availcalendar .bunksavail {
		padding: 0;
		text-align: center;
		float: left;
		width: 100%;
	}

	#availcalendar .num {
		font-weight: bold;
		font-size: 12px;
	}

	#availcalendar .numsyb {
		font-weight: bold;
		font-size: 14px;
		float: left;
		width: 50px;
		text-align: left;
		padding-left: 20%;
	}

	#availcalendar .waitlist {
		color: #666;
		font-weight: normal;
	}

	#availcalendar img {
		border: 0;
	}

	@media screen and (max-width: 600px) {
		#availcalendar .availcontainer {
			display: none;
		}

		#availcalendar .date {
			width: 100%;
		}
	}

	/*bunk list--------------------*/
	#bunklist .draggable {
		color: #000;
		cursor: default;
		padding: 1px 0 1px 0;
		font-weight: normal;
		border: 1px solid #666;
		background-color: #fff;
		text-align: center;
		min-height: 36px !important;
		height: auto !important;
		height: 32px;
		vertical-align: middle;
	}

	.ui-draggable {
		z-index: 0;
	}

	.ui-draggable-dragging {
		z-index: 1;
	}

	html > body #bunklist .draggable {
		cursor: default;
	}

	#bunklist .tddrop {
		margin: 0;
		padding: 0;
	}

	#bunklist .divdrop {
		min-height: 36px;
		height: auto !important;
		height: 36px;
		padding: 2px 0 2px 0;
	}

		#bunklist .divdrop .draggable {
			margin: 0 4px 0 4px;
		}

	#bunklist .onhover {
		background-color: #069;
	}

	#bunklist .bgstatusR {
		background-image: url('/functional/images/bgStatusR.gif');
		background-repeat: no-repeat;
	}

	#bunklist .bgstatusW {
		background-image: url('/functional/images/bgStatusW.gif');
		background-repeat: no-repeat;
	}

	#bunklist .statusUnaccepted {
		color: #ff6666;
	}

	/*photo gallery--------------------*/
	#gallery {
		border-top: 1px dashed #ccc;
		width: 100%;
		clear: both;
	}

		#gallery.noborder {
			border: none;
		}

		#gallery td {
			border-bottom: 1px dashed #ccc;
			vertical-align: top;
		}

		#gallery .info {
			text-align: right;
			font-size: 10px;
			font-family: Verdana;
			vertical-align: top;
			padding-top: 8px;
			width: 200px;
		}

	@media screen and (max-width: 600px) {
		#gallery .info {
			width: auto;
			text-wrap: none;
			text-align: left;
		}

		#gallery .infotext {
			display: block;
		}
	}

	#gallery .thumbnail, #gallery .tinyimage {
		text-align: center;
		float: left;
		padding: 5px;
	}

	#gallery .thumbnail {
		margin: 4px 8px 4px 0;
		width: 170px;
		border: 1px solid #ccc;
		background-color: #eee;
	}

	#gallery .tinyimage {
		height: 81px;
		padding: 2px 2px 8px 2px;
		margin: 0 4px 4px 0;
	}

	#gallery .thumb {
		height: 170px;
	}

	#gallery .photo, #gallery .approved {
		padding: 3px;
		background-color: #fff;
	}

	#gallery .photo {
		border: 1px solid #E63030;
	}

	#gallery .approved {
		border: 1px solid #ccc;
	}

	#gallery a:hover img.photo, #gallery a:hover img.approved {
		border: 1px solid #000;
	}

	/*messageboard--------------------*/
	#message {
		border-top: 1px dashed #ccc;
		width: 100%;
		clear: both;
	}

		#message.noborder {
			border: none;
		}

		#message td {
			border-bottom: 1px dashed #ccc;
			padding-bottom: 5px;
		}

		#message .body {
			padding: 4px 0 4px 0;
			clear: both;
		}

		#message .info {
			text-align: right;
			font-size: 10px;
			font-family: Verdana;
			vertical-align: top;
			padding-top: 8px;
			width: 130px;
			color: #666;
		}

		#message h2, #message h3 {
			float: left;
		}

		#message h2 {
			margin-top: 3px;
		}

		#message .caticon {
			float: left;
			margin: 3px 5px 0 0;
		}

	#abstractmessage {
		float: right;
		width: 250px;
		border: 1px solid #666;
		padding: 0 3px 5px 3px;
		margin: 0 0 0 5px;
	}

	/*labels L7159--------------------*/
	#labelsL7159, #labelsL7159pagebreak {
		width: 195mm;
		margin: 13px 0 0 0;
	}

	#labelsL7159pagebreak {
		page-break-before: always;
	}

		#labelsL7159 td, #labelsL7159pagebreak td {
			width: 64mm;
			height: 33mm;
		}

	/*labels DL33--------------------*/
	#labelsDL33, #labelsDL33pagebreak {
		width: 195mm;
		margin: 13px 0 0 0;
	}

	#labelsDL33pagebreak {
		page-break-before: always;
	}

		#labelsDL33 td, #labelsDL33pagebreak td {
			width: 70mm;
			height: 25.4mm;
		}

	/*labels 8160--------------------*/
	#labels8160, #labels8160pagebreak {
		width: 195mm;
		margin: 13px 0 0 0;
	}

	#labels8160pagebreak {
		page-break-before: always;
	}

		#labels8160 td, #labels8160pagebreak td {
			width: 67mm;
			height: 25mm;
		}
	/*invoices--------------------*/
	#invoicesummary {
	}

	#invoiceprint {
		text-align: center;
	}

	#invoices {
		width: 550px;
		page-break-after: always;
		text-align: left;
		margin: 30px 0 30px 0;
		padding: 30px 0 0 0;
	}

		#invoices .header {
			text-align: center;
			font-weight: bold;
			font-size: 20px;
		}

		#invoices .address {
			float: left;
			margin: 30px 0 30px 0;
		}

		#invoices .date {
			float: right;
			margin: 30px 0 40px 0;
		}

		#invoices .heading {
			clear: both;
			font-weight: bold;
			text-align: center;
			padding: 0 0 25px 0;
			margin: 0 0 10px 0;
			border-bottom: solid 1px #ccc;
		}

		#invoices .subname {
			clear: both;
			float: left;
			width: 350px;
		}

		#invoices .numpeeps {
			float: left;
			width: 100px;
			text-align: right;
		}

		#invoices .subamount {
			float: left;
			width: 100px;
			text-align: right;
		}

		#invoices .totalrow, #invoices .subrow {
			clear: both;
		}

		#invoices .total {
			clear: both;
			float: left;
			width: 350px;
			border-top: solid 1px #ccc;
			border-bottom: solid 1px #ccc;
			margin: 20px 0 20px 0;
			padding: 20px 0 20px 0;
			font-weight: bold;
		}

		#invoices .totalamount {
			float: left;
			width: 200px;
			border-top: solid 1px #ccc;
			border-bottom: solid 1px #ccc;
			margin: 20px 0 20px 0;
			padding: 20px 0 20px 0;
			text-align: right;
			font-weight: bold;
		}

		#invoices .fammembers {
			clear: both;
			margin: 60px 0 30px 0;
		}

		#invoices .footer {
		}


	/*syb--------------------*/
	#syb {
		position: relative;
		width: 100%;
		border: 1px solid #666;
		width: 595px;
		height: 365px;
	}

		#syb .bg {
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
			width: 595px;
			height: 365px;
		}

		#syb .bunkhorizontal {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 9px;
			font-family: Verdana;
			text-transform: uppercase;
			padding: 18px 0 0 5px;
			/*width: 73px;
			height: 13px;*/
			width: 78px;
			height: 32px;
			background: url('/functional/images/bunkhorizontal.gif') no-repeat;
		}

		#syb .bunkvertical {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 9px;
			font-family: Verdana;
			text-transform: uppercase;
			padding: 37px 0 0 1px;
			/*width: 49px;
			height: 13px;*/
			width: 50px;
			height: 62px;
			background: url('/functional/images/bunkvertical.gif') no-repeat;
		}

		#syb .availablehorizontal, #syb .selectedhorizontal, #syb .availablevertical, #syb .selectedvertical {
			cursor: hand;
		}

		#syb .availablehorizontal {
			background-position: 0 0;
		}

		#syb .availablevertical {
			background-position: 0 0;
		}

		#syb .availablehorizontalhover, #syb .selectedhorizontalhover {
			background-position: -312px 0;
			color: #fff;
		}

		#syb .availableverticalhover, #syb .selectedverticalhover {
			background-position: -200px 0;
			color: #fff;
		}

		#syb .selectedhorizontal {
			background-position: -234px 0;
			color: #fff;
		}

		#syb .selectedvertical {
			background-position: -150px 0;
			color: #fff;
		}

		#syb .holdhorizontal {
			background-position: -156px 0;
			color: #fff;
		}

		#syb .holdvertical {
			background-position: -100px 0;
			color: #fff;
		}

		#syb .reservehorizontal {
			background-position: -78px 0;
			color: #fff;
		}

		#syb .reservevertical {
			background-position: -50px 0;
			color: #fff;
		}

	#links {
		font-size: 10px;
		font-family: Verdana;
		margin: 0 0 5px 0;
	}

		#links a {
			margin-left: 2px;
			margin-right: 2px;
		}

	#key {
		font-size: 10px;
		font-family: Verdana;
		position: relative;
		width: 100%;
		height: 35px;
	}

		#key .bunk {
			float: none;
			position: relative;
			margin-left: 5px;
		}

	#sybwait {
		width: 100%;
		border: 1px solid #000;
		width: 595px;
		height: 365px;
		background-color: #eee;
	}

	/*timer--------------------*/
	#timer .timer {
		font-size: 20px;
		font-weight: bold;
		margin-right: 15px;
	}

	#timer li {
		padding-bottom: 1px;
	}

	/*SYB allocate bunks page--------------------*/
	#allocate {
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		width: 100%;
	}

		#allocate td {
			font-size: 10px;
			font-family: Verdana;
			border-right: 1px solid #ccc;
			padding: 2px 4px 2px 4px;
			border-bottom: 1px solid #ccc;
		}

			#allocate td.night {
				text-align: center;
			}

			#allocate td.firstrow {
				font-weight: bold;
			}

		#allocate select {
			width: 60px;
		}