:root {
	--purple: #612a4f;
	--dark_purple: #53304b;
}

@font-face {
    font-family:		"brandon-grot-w01-light";
    src:				url("/skin.sussexosm/BrandonGrotW01-Light.ttf");
}

@font-face {
    font-family:		"montserrat";
    src:				url("/skin.sussexosm/Montserrat-Regular.ttf");
}

@font-face {
    font-family:		"Tahoma";
    src:				url("/skin.sussexosm/TAHOMA_0.TTF");
}

body {
	font-family:		Tahoma, sans-serif;
	margin:				0px;
	padding:			0px;
	background-color:	#f0f0f0;
}

p {
	font-family:		Tahoma, sans-serif;
}

h1 {
	font-family:		brandon-grot-w01-light, sans-serif;
	font-size:			35px;
	color:				GoldenRod;
}

h2 {
	font-family:		brandon-grot-w01-light, sans-serif;
	font-size:			20px;
	font-weight:		900;
	color:				var(--purple);
}

h3 { /* used by news */
	font-family:		brandon-grot-w01-light, sans-serif;
	font-size:			30px;
	font-weight:		900;
	color:				var(--dark_purple);
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
}

h4 { /* used by news */
	font-family:		brandon-grot-w01-light, sans-serif;
	font-size:			20px;
	font-weight:		900;
	color:				var(--pruple);
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
}

/* ---------------------- */

.animate-in {
	-webkit-animation:	fadeIn .5s ease-in;
	animation:			fadeIn .5s ease-in;
}

.animate-out {
	-webkit-transition:	opacity .5s;
	transition:			opacity .5s;
	opacity:			0;
}

@-webkit-keyframes fadeIn {
	from				{ opacity: 0; }
	to					{ opacity: 1; }
}

@keyframes fadeIn {
	from				{ opacity: 0; }
	to					{ opacity: 1; }
}

/* ---------------------- */

a {
	color:							black;
	text-decoration:				none;
}

.banner-table {
	border-style:		none;
	border-collapse:	collapse;
	width:				100%;
	height:				200px;
	margin:				0px;
	padding:			0px;
min-width: 1200px;
}

.banner-left {
	background:			url(/skin.sussexosm/banner-left-side.png);
	width:				300px;
}

.banner-mid {
	background:			url(/skin.sussexosm/banner-mid.png);
	text-align:			center;
	font-family:		brandon-grot-w01-light, sans-serif;
	font-size:			45px;
	color:				gold;
/*	text-shadow:		2px 2px 10px #000000;*/
	text-shadow:		1px 1px #303030;
}

.banner-right {
	background:			url(/skin.sussexosm/banner-right-side.png);
	width:				300px;
}

.area {
	width:				950px;
	height:				-webkit-calc(100vh - 315px);
	height:				-moz-calc(100vh - 315px);
	height:				calc(100vh - 315px);
	background-color:	white;
	padding:			0px 20px 40px 20px;
	margin:				0px 30px 30px 30px;
	box-shadow:			0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.menu {
	font-family:		montserrat, sans-serif;
	font-size:			13px;
	padding:			13px 10px 10px 10px;
	color:				var(--dark_purple);
	border-top: 		1px solid var(--dark_purple);
	border-top-width:	1px;

}

.menu:hover {
	padding:			10px 10px 10px 10px;
	color:				var(--purple);
	border-top: 		1px solid var(--purple);
	border-top-width:	4px;
}

.menu-selected {
	font-family:		montserrat, sans-serif;
	font-size:			13px;
	padding:			10px;
	color:				GoldenRod;
	border-top: 		1px solid GoldenRod;
	border-top-width:	4px;

}

.menu-selected:hover {
	padding:			10px 10px 10px 10px;
	color:				#808080;
	border-top: 		1px solid #808080;
	border-top-width:	4px;
}

.menu-gap {
	width:				5px;
}

.footer {
	border-style:		none;
	border-collapse:	collapse;
	width:				100%;
	margin:				0px;
	padding:			0px;
	background-color:	var(--dark_purple);

}

.footer-area {
	width:				100%;
	color:				gold;
	padding:			20px 20px;
	margin:				0px;
	vertical-align:		bottom;
}

.footer-copyright-l {
	font-size:			12px;
	color:				gold;
	padding:			0px;
	margin:				0px;
	vertical-align:		bottom;
	text-align:			left;
}

.footer-copyright-r {
	font-size:			12px;
	color:				gold;
	padding:			0px;
	margin:				0px;
	vertical-align:		bottom;
	text-align:			right;
}

/* --------------------------
 * content styles
 */

@media only screen and (orientation: landscape) {

	/* --------------------------
	 * desktop
	 */

	.popup_info {
		max-width:					30vw;
		max-height:					200px;
		overflow:					hidden;
	}

	.bordered_picture {
		float:						left;
		background-color:			#f0f0f0;
		padding:					8px;
		margin:						0px 20px 0px 0px;
		font-family: 				'UbuntuCondensed';
		font-size:					14px;
	}
}

@media only screen and (orientation: portrait) {

	/* --------------------------
	 * handheld
	 */

	.popup_info {
		max-width:					90vw;
		max-height:					200px;
		overflow:					hidden;
	}

	.bordered_picture {
		float:						left;
		background-color:			#f0f0f0;
		padding:					12px;
		margin:						0px 0px 0px 0px;
		font-family: 				'UbuntuCondensed';
		font-size:					28px;
	}
}

.textbox_table {
	width:							100%;
/*	margin:							10;
	padding:						10; */
	border-spacing:					3vw;
}

.textbox {
	width:							40%;
	vertical-align:					top;
	background-color:				red;
	margin:							1.5vw;
	padding:						1.5vw;
}

.bordered_picture img {
	padding:						0px 0px 8px 0px;
}

.bordered_picture_left {
	float:							left;
	background-color:				#f0f0f0;
	padding:						8px;
	margin:							0px 20px 0px 0px;
	font-family: 					'UbuntuCondensed';
	font-size:						14px;
}
.bordered_picture_left img {
	padding:						0px 0px 8px 0px;
}

.list {
	padding:						20px;
	font-family:					'Raleway';
	font-size:						22px;
	color:							rgb(153, 51, 102);
}
.list:hover{
	background-color:				#fad7a0;
}

/*
 * EXTRA
 */

@media only screen and (orientation: landscape) {

	/* --------------------------
	 * desktop
	 */

	:root {

		--heading-font-sz:			40px;
		--minortitle-font-sz:		20px;
		--majortitlesolo-font-sz:	46px;
		--minortitlesolo-font-sz:	35px;
		--altheading-font-sz:		24px;

		--h1-font-sz:				36px;
		--body-font-sz:				18px;
		--p-font-sz:				16px;
		--a-font-sz:				14px;
		--ul-font-sz:				12px;
	}

	.portrait_only {
		display: none;
	}
	.landscape_only {
		display: ;
	}
}

@media only screen and (orientation: portrait) {

	/* --------------------------
	 * handheld
	 */

	:root {

		/* 4vw == 18px - all others scaled */
		--heading-font-sz:			8.88vw;
		--minortitle-font-sz:		4.44vw;
		--majortitlesolo-font-sz:	10.22vw;
		--minortitlesolo-font-sz:	7.77vw;
		--altheading-font-sz:		5.33vw;

		--h1-font-sz:				8.00vw;
		--body-font-sz:				4.00vw;
		--p-font-sz:				3.55vw;
		--a-font-sz:				3.11vw;
		--ul-font-sz:				2.66vw;
	}

	.portrait_only {
		display: ;
	}
	.landscape_only {
		display: none;
	}

	select {

		height: 		7vw;
		line-height:	7vw;
		font-size:		4vw;
		margin-bottom:	1vw;
	}
	option {

		height: 		7vw;
		line-height:	7vw;
		font-size:		4vw;
		margin-bottom:	1vw;
	}
	label {

		height: 		7vw;
		line-height:	7vw;
		font-size:		4vw;
		margin-bottom:	1vw;
	}
	input {

		height: 		7vw;
		line-height:	7vw;
		font-size:		4vw;
		margin-bottom:	1vw;
	}
}

.scroll_menubar {
	border-collapse:		collapse;
	border-spacing:			0px;
	margin:					0px;
	padding:				0px;
	min-width:				80%;
}
.scroll_menu_start {
	background-image:		url('/skin.v1/titlebar left.png');
	width:					93px;
	height:					85px;
	margin:					0px;
	padding:				0px;
	vertical-align:			top;
}
.scroll_menu_end {
	background-image:		url('/skin.v1/titlebar right.png');
	width:					93px;
	height:					85px;
	margin:					0px;
	padding:				0px;
	vertical-align:			top;
}
.scroll_menu_item {
	font-family:			"Droid Serif", "serif";
	font-size:				18px;
	color:					#ffffff;
	text-align:				center;
	margin:					0px;
	padding:				0px;
	vertical-align:			top;
}
.scroll_menu_item div {
	background-image:		url('/skin.v1/titlebar mid.png');
	font-family:			"Droid Serif", "serif";
	font-size:				18px;
	color:					#ffffff;
	text-decoration:		none;
	font-style:				normal;
	font-weight:			normal;
	padding:				5px;
	display:				block;
	height:					75px;
}
.scroll_menu_item div:hover {
	background-image:		url('/skin.v1/titlebar mid over.png');
	font-family:			"Droid Serif", "serif";
	font-size:				var(--body-font-sz);
	color:					#ffffff;
	text-decoration:		none;
	font-style:				normal;
	padding:				5px;
	display:				block;
	height:					75px;
}

.sectionblockbg {
	background:				#edf4ff;
	border-radius:			8px;
	border:					1px solid #B4B4B4;
	margin-bottom:			10px;
	padding-left:			10px;
}

.sectionblock {
	background:				#edf4ff;
	border-radius:			8px;
	border:					1px solid #B4B4B4;
	margin-bottom:			10px;
}

.sectionblock th {
	background:				#FFFFFF;
	text-align:				left;
	padding:				4px;
	font-family:			"Arial", "Helvetica", "sans-serif";
	font-size:				var(--p-font-sz);
	line-height:			var(--body-font-sz);
	color:					#FFAA00;
	font-weight:			bold; 
}

.sectionblock td {
	text-indent:			0px;
	margin-top:				8px;
	margin-bottom:			0px;
	font-family:			"sans-serif", "arial";
	font-size:				var(--ul-font-sz);
	line-height:			var(--body-font-sz);
	padding:				0px 10px 0px 10px;
	color:					#000000;
}

.account_table th {
	outline: 1px solid black;
}
.account_table td {
	outline: 1px dashed grey;
}
.account_table tr:hover td
{
	background-color: 		#9b2850;
 	color:					rgba(255,255,255,0.8);
}

.WSSheading {
	padding:				0px;
	font-family:			'Droid Serif', serif;
	font-weight:			bold;
	font-size:				var(--heading-font-sz);
	color:					#8AB3E2;
}
.WSSlogo {
	width:					100px;
}
.WSSmajortitle {
	padding:				0px;
	font-family:			"Times New Roman", "serif";
	font-weight:			normal;
	font-size:				var(--h1-font-sz);
	color:					#000000;
}
.WSSminortitle {
	padding:				0px;
	font-family:			"Times New Roman", "serif";
	font-weight:			normal;
	font-style:				italic;
	font-size:				var(--minortitle-font-sz);
	color:					#000000;
}
.WSSlogosolo {
	padding:				0px 40px 0px 0px;
}
.WSSmajortitlesolo {
	padding:				0px;
	font-family:			"Times New Roman", "serif";
	font-weight:			normal;
	font-size:				var(--majortitlesolo-font-sz);
	color:					#000000;
}
.WSSminortitlesolo
{
	padding:				0px;
	font-family:			"Times New Roman", "serif";
	font-weight:			normal;
	font-style:				italic;
	font-size:				var(--minortitlesolo-font-sz);
	color:					#000000;
}
.WSStable
{ 
	border-spacing:			0px;
	border-collapse:		separate;
	width:					100%;
}
.WSStable tr
{
	height:					110px;
}
.WSStable tr:hover td
{
	background-color:		#717f94;
	color:					white;
}