/*******    RESET    *******/

html, body, span, applet, object, iframe, /*input,*/
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

input[type=text] {
	font-size: 90%;
}

/*input[type=text]:focus {
        background-color: #ecffff;
    }*/

textarea {
	font-size: 100%;
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*******    MAIN    *******/

body {
	font-size: 1.1em;
	line-height: 1.6em;
	font-family: 'Roboto', 'Trebuchet MS', Verdana, sans-serif;
}

select {
	color: #555;
}

a, .ui-widget-content a {
	color: #4C9CF1;
	text-decoration: none;
}

	a:hover {
		color: #444;
		text-decoration: underline;
	}

h1, h2, h3, h4, h5 {
	line-height: 1.25em;
	margin-bottom: .4em;
	font-weight: normal;
	color: #c81a1a;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.35rem;
}

h3 {
	font-size: 1.25rem;
}

h4 {
	font-size: 1.15rem;
}

h5 {
	font-size: 1.06rem;
}

select {
	border-radius: .5em;
	padding: .07em .125em;
	background-color: #f0f8fe;
	font-size: 1em;
}

ul.text {
	margin-bottom: 1.6em;
}

	ul.text li {
		padding: 0 .1em .3em .15em;
		line-height: 1.4em;
	}

p,
fieldset,
table,
pre {
	/* So things don't run into each other. */
	margin-bottom: 1em;
	line-height: 1.5em;
}

ol, ul, dl {
	/* Bringing lists on to the page with breathing room. */
	margin-left: 3em;
	line-height: 1.4em;
}

	ol li {
		/* Giving OL's LIs generated numbers. */
		list-style: decimal outside;
		margin: .75em 0;
	}

	ul li {
		/* Giving ul li generated disc markers. */
		list-style: disc outside;
		margin: .75em 0;
	}

	ul li {
		/* Giving ul li generated disc markers. */
		list-style: disc outside;
		margin: .75em 0;
	}

	dl dd {
		/* Giving UL's LIs generated numbers. */
		margin-left: 1em;
	}


strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

/****   Input    ****/

input[type="checkbox"] {
	padding-right: 6px;
}

/****   Input buttons    ****/

input[type="submit"] {
	/*margin: 12px 10px;*/
	padding: .3em 1.5em;
	border: 1px solid #003399;
	border-radius: 10px;
	font-size: 100%;
	color: #FFFFFF;
	background-color: #2989d8;
	border-color: #2989d8;
	background: #2989d8;
	background: -moz-linear-gradient(top, #2989d8 0%, #1e5799 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989d8), color-stop(100%,#1e5799));
	background: -webkit-linear-gradient(top, #2989d8 0%,#1e5799 100%);
	background: -o-linear-gradient(top, #2989d8 0%,#1e5799 100%);
	background: -ms-linear-gradient(top, #2989d8 0%,#1e5799 100%);
	/*background: linear-gradient(top, #2989d8 0%,#1e5799 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#1e5799',GradientType=0 );*/
}

	input[type="submit"]:hover {
		color: #d3f8f8;
		border-color: #FF0000;
	}

	/*  Removes outline Chrome draws around clicked buttons.  */
	input [type="submit"]:focus {
		outline: 0;
	}

	input[type="submit"].aspNetDisabled {
		border: 1px solid #C0C0C0;
		background-color: #808080;
		color: #C0C0C0;
	}

	input[type="submit"]:visited {
		background-color: #CCFFFF;
		color: #4291E0;
		border-color: #4291E0;
		flex-wrap: nowrap;
	}

.smallButtons input[type="submit"] {
	padding: .3em 1.5em;
	border: 1px solid #003399;
	border-radius: 10px;
	font-size: 70%;
}

/*  More space for multiple buttons input forms  */
.buttons {
	display: flex;
	flex-wrap: wrap;
	padding: 1em .5em;
	justify-content: space-between;
}

	.buttons input {
		margin: 0 .5em .5em 0;
	}

	.buttons.centered > span {
		width: 80%;
		text-align: center;
		margin: 0 auto;
	}

/***************************************************************************/
/*****************      Page layout based on flexbox       *****************/
/***************************************************************************/

.flex-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	/*-webkit-flex-flow: row wrap;*/
	margin: 0 auto 0 auto;
}

	.flex-container.space-around {
		justify-content: space-around;
	}

	/* Space around edge for small screens. Reset for larger screen. */
	.flex-container.siteLayout {
		padding: 0 4%;
	}

	/* Added to fix problems with full page expanded gallery 
    (on mobile, etc.).This removes the top margin that is 
    otherwise there to clear the absolutely-positioned header.*/
	.flex-container.gallery {
		margin-top: 1px;
	}


footer {
	order: 100; /* Force to bottom. */
}

/*  Smallest mobile browser windows < 600px: (Smallest screens) */
/*  Stack vertically, with main content on top.  */

.c1-of-3, .c2-of-3, .c1-of-2, .c2-of-2, .c3-of-3, .c4, .c5 {
	width: 100%;
}

.c2-of-3 {
	order: 1
}

.c1-of-3 {
	order: 2
}

.c3-of-3 {
	order: 3
}

.c1-of-1 {
	margin: 0 4%;
}

.c1-of-2 {
	order: 1
}

.c2-of-2 {
	order: 2
}


/*************************************************/
/******    Flex layout of multiple items    ******/
/*************************************************/

.item img {
	width: 100%;
	margin: 0 auto 6px auto;
	border-radius: 8px;
}


/*  Items in flex container will stack on smallest screens.  */
.items_2 {
	flex: 0 1 100%;
}

.items_3 {
	flex: 0 1 100%;
}

.items_4 {
	flex: 0 1 calc(100%);
}

.items_5 {
	flex: 0 1 calc(100%);
}

	/**  Widths for horizontal flex items with 1em space between them.  **/
	/*  Assumes left and right padding 2.5%, border-radius 1px.  */


	/*  Default img width to 100% to equal size of item div in flex container.  */
	.items_2 img, .items_4 img, .items_5 img {
		width: 100%;
	}

header.page {
	background: #fff;
	width: 100%;
	height: 65px;
	margin-bottom: 30px;
	top: 0;
	left: 0;
	border-bottom: 4px solid #4C9CF1;
	z-index: 100;
	/*position: fixed;    Fixed position interferes with menu overlaying page contents. */
}

#logo {
	margin: -2px 2px 0 5px;
	float: left;
	width: 232px;
	height: 68px;
	background: url(/Assets/Logos/logo.png) no-repeat center;
	background-size: contain;
	display: block;
}

header nav {
	float: right;
	padding-top: 13px;
	padding-right: 15px;
}

	header nav ul {
		list-style: none;
	}

	header nav li {
		font-weight: bold;
		display: inline-block;
		padding: 12px 14px 0 14px; /* Setting padding too high affects centering of flex container for columns! */
	}

footer {
	background: #fff;
	padding: 1rem 1rem;
	border-top: 2px solid #4C9CF1;
	font-size: .78rem;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

	footer .c1 {
		order: 3;
	}

	footer .c2 {
		order: 1;
	}

	footer .c3 {
		order: 2;
	}
		/* Extra space between links on small screens */
		footer .c2 li, footer .c3 li {
			padding-bottom: .5em;
		}

/*  Browser window > 600px:  */
/*  Rearrange footer content for narrow screens.  */
@media (min-width: 600px) {

	footer .c1 {
		order: 1;
	}

	footer .c2 {
		order: 2;
	}

		footer .c2 li, footer .c3 li {
			padding: 0;
		}

	footer .c3 {
		order: 3;
	}
}


/*  Browser window > 600px:  */
/*  Fill screen. Columns side by side. */
@media (min-width: 600px) {

	.c1-of-3, .c2-of-3, .c3-of-3, .c4, .c5 {
		order: 1;
	}

	.c1-of-3, .c3-of-3 {
		width: 20%;
	}

	.c1-of-3 {
		padding-right: 3%;
	}

	.c3-of-3 {
		padding-left: 3%;
	}

	.c2-of-3 {
		width: 54%;
	}


	/**  2 columns  **/
	.c1-of-2 {
		width: 70%;
		padding-right: 3%
	}

	.c2-of-2 {
		width: 24%;
		padding-left: 3%
	}


	.c4, .c5 {
		width: 100%;
	}

	/*.items_2 {
		flex: 0 1 calc(50% - 4px - 1em);
	}*/

	.items_3 {
		flex: 0 1 calc(50% - 6px - 1em);
	}

	.items_4 {
		flex: 0 1 calc(50% - 8px - 1em);
	}

	.items_5 {
		flex: 0 1 calc(33% - 10px - 1em);
	}
}

/**   > 850px   **/
@media (min-width: 850px) {
	/*  Items in flex container will be 2 items in each row on larger screens.  */

	/*.items_2 {
		flex: 0 1 calc(50% - 4px - 1em);
	}

	.items_3 {
		flex: 0 1 calc(33% - 6px - 1em);
	}

	.items_4 {
		flex: 0 1 calc(25% - 8px - 1em);
	}

	.items_5 {
		flex: 0 1 calc(20% - 10px - 1em);
	}*/
}

/**   > 1024px   **/
@media (min-width: 1024px) {
	/*  Items in flex container will have full number across on larger screens.  */

	.items_2 {
		flex: 0 1 calc(50% - 4px - 1em);
	}

	.items_3 {
		flex: 0 1 calc(33% - 6px - 1em);
	}

	.items_4 {
		flex: 0 1 calc(25% - 8px - 1em);
	}

	.items_5 {
		flex: 0 1 calc(20% - 10px - 1em);
	}
}

/* Browser window > 1300px: (maximum allowed) */

@media (min-width: 1300px) {

	.flex-container.siteLayout {
		width: 1300px;
	}

	.flex-container.siteLayout {
		padding: 0;
	}

	.c1-of-1, footer {
		width: 1300px;
		margin-left: auto;
		margin-right: auto;
	}

	/*  Items in flex container will be 2 items in each row on larger screens.  */
	.items_2 {
		flex: 0 1 49%;
	}
}


/*        nav styles         */

.level3, .level4 {
	background-color: #eaf4ff;
	color: #1e5799;
	border: solid 1px #444;
}

	.level3 li, .level4 li {
		margin: .15em;
		border: none;
		display: block;
	}

	.level3 a {
		border: none;
	}


/* Top menu, which collapses content narrow screens. */

#menu-icon {
	display: none;
	font-size: 1.1em;
	text-align: center;
	width: 4em;
	height: 3.2em;
	margin-right: .3em;
	background-image: url("/Assets/Icons/hamburger.png");
	background-repeat: no-repeat;
	background-position: bottom;
}

	#menu-icon div {
		padding: 8px;
	}

a:hover#menu-icon {
	visibility: hidden;
	background-color: #444;
	border-radius: 4px 4px 0 0;
}


/* MEDIA QUERY to shrink logo on narrow screens. */
@media only screen and (max-width : 430px) {
	#logo {
		width: 50%;
	}

	header nav {
		padding-top: 6px;
	}

	#menu-icon {
		width: 3.5em;
		height: 3.2em;
		margin-right: 0;
	}

	/* Login Button Text */
	#loginButton span {
		font-size: 1.15em;
		padding: .1em .5em;
		background: none;
	}
}

/* MEDIA QUERY to collapse header menu on narrow screens. */
/*@media only screen and (max-width : 900px) {*/

@media only screen and (max-width : 985px) {

	header nav {
		padding: 4px 0 0 0;
	}

	#menu-icon {
		display: inline-block;
	}

	header nav ul, header nav:active ul {
		display: none;
		position: absolute !important;
		padding: 20px;
		background: #fff;
		border: 5px solid #444;
		right: 20px;
		top: 60px;
		width: 50%;
		border-radius: 4px 0 4px 4px;
		z-index: 100000;
	}

	header nav li {
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}

	header nav:hover ul {
		display: block;
	}
}

.logo {
	margin-top: 8px;
}

/**************  Login  **************/

/* Login area in menu */
.loginMenu {
	position: relative;
	float: right;
	text-align: right;
	margin-top: 6px;
	margin-right: 10px;
}

	.loginMenu .welcome {
		font-size: .9em;
	}

	.loginMenu .status {
		font-weight: bold;
	}

/* Special Login Container (default to float:right) */
#loginContainer {
	position: relative;
	float: right;
	margin-top: 14px;
	margin-right: 8px;
	font-size: 12px;
}

/* Login Button */
#loginButton {
	display: inline-block;
	float: right;
	background: #d2e0ea url(/Assets/Login/buttonbg.png) repeat-x;
	border: 1px solid #899caa;
	border-radius: 3px;
	-moz-border-radius: 3px;
	position: relative;
	z-index: 30;
	cursor: pointer;
}

	/* Login Button Text */
	#loginButton span {
		color: #445058;
		font-size: 15px;
		font-weight: bold;
		text-shadow: 1px 1px #fff;
		padding: 7px 26px 7px 10px;
		background: url(/Assets/Login/loginArrow.png) no-repeat 53px 7px;
		display: block
	}

	#loginButton:hover {
		background: url(/Assets/Login/buttonbgHover.png) repeat-x;
	}

	#loginButton a:hover {
		text-decoration: none
	}

/* Login Box */
#loginBox {
	position: absolute;
	top: 34px;
	right: 0;
	display: none;
	z-index: 29;
}

/* If the Login Button has been clicked */
#loginButton.active {
	border-radius: 3px 3px 0 0;
}

	#loginButton.active span {
		background-position: 53px -76px;
	}

	/* A Line added to overlap the border */
	#loginButton.active em {
		position: absolute;
		width: 100%;
		height: 1px;
		background: #d2e0ea;
		bottom: -1px;
	}

/* Login Form */
#loginForm {
	width: 248px;
	border: 1px solid #899caa;
	border-radius: 3px 0 3px 3px;
	-moz-border-radius: 3px 0 3px 3px;
	margin-top: -1px;
	background: #d2e0ea;
	padding: 6px;
}

	#loginForm fieldset {
		margin: 0 0 12px 0;
		display: block;
		border: 0;
		padding: 0;
	}

fieldset#body {
	background: #fff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 10px 13px;
	margin: 0;
}

#loginForm #checkbox {
	width: auto;
	margin: 1px 9px 0 0;
	float: left;
	padding: 0;
	border: 0;
	*margin: -3px 9px 0 0; /* IE7 Fix */
}

#body label {
	color: #3a454d;
	margin: 9px 0 0 0;
	display: block;
	float: left;
}

#loginForm #body fieldset label {
	display: block;
	float: none;
	margin: 0 0 6px 0;
}

/* Default Input */
#loginForm input {
	width: 92%;
	border: 1px solid #899caa;
	border-radius: 3px;
	-moz-border-radius: 3px;
	color: #3a454d;
	font-weight: bold;
	padding: 8px 8px;
	box-shadow: inset 0px 1px 3px #bbb;
	-webkit-box-shadow: inset 0px 1px 3px #bbb;
	-moz-box-shadow: inset 0px 1px 3px #bbb;
	font-size: 12px;
}

/* Sign In Button */
#loginForm .loginButton {
	width: auto;
	float: left;
	background: #339cdf url(/Assets/Login/loginbuttonbg.png) repeat-x;
	color: #fff;
	padding: 7px 10px 8px 10px;
	text-shadow: 0px -1px #278db8;
	border: 1px solid #339cdf;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	margin: 0 12px 0 0;
	cursor: pointer;
	*padding: 7px 2px 8px 2px; /* IE7 Fix */
}

/* Forgot your password */
#loginForm span {
	text-align: center;
	display: block;
	padding: 7px 0 4px 0;
}

	#loginForm span a {
		color: #3a454d;
		text-shadow: 1px 1px #fff;
		font-size: 12px;
	}

input:focus {
	outline: none;
}