@charset "UTF-8";

/* Global Styles */

/* limited reset */
html, body, div, section, article, aside, header, hgroup, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
}

/* html5 display rule */
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}

body {
	font-family: Arial, sans-serif;
	font-weight: normal;
	overflow: hidden;
	background-image: url(../Images/BackHor.png);
	background-color: #16003b;
	background-attachment: fixed;
	background-position: top center;
	background-repeat: repeat-y;
}

#aboveWrapper {position: absolute; top: 0; width: 100%; text-align: center; display: none; z-index: 100;}

#wrapper {position: relative; margin: 0 auto; background-color: transparent; display: none; z-index: 100;}

a:link, a:visited, a:hover, a:active {font-size: .9em; color: #fff; text-decoration: none;}

#theHeader {display: none;}
#theNav {
	display: none;
	padding: 0 0 10px 0;
}

nav section a { /* color comes from global a */
	font-size: 0.9em;
	display: block;
	text-align: left;
	margin: 0 14px 7px;
	padding: 7px 0 7px 16px;
	border: 0.8px solid #575c7a;
	border-radius: 1em;
	background: linear-gradient(to bottom, #190b45 0%, #826dc6 50%, #0d0140 100%);
	box-shadow: 0 0 3px .6px #888;
}

nav section a:hover {
	background: linear-gradient(to bottom, #190b45 0%, #a898dc 50%, #0d0140 100%);
}

/*desktop styles*/
@media only screen and (min-width: 801px) {
	body {font-size: 15px;} /* base font size */
	#wrapper {min-width: 840px; max-width: 1280px;}
	header {border-radius: 0 0 25px 25px; box-shadow: 0 0 20px 3px #333; z-index: 30;}
	#sectDivOne, #sectDivTwo, #sectDivThree, #sectDivFour {width: 25%; float: left;}
}

/*tablet styles*/
@media only screen and (min-width: 501px) and (max-width: 800px) {
	body {font-size: 14.75px;} /* base font size */
	header {border-radius: 0 0 20px 20px; box-shadow: 0 0 12px 2px #333;}
	#wrapper {min-width: 520px; max-width: 800px;}
	#sectionOne, #sectionTwo {width: 50%; float: left;}
}

/*mobile styles*/
@media only screen and (min-width: 50px) and (max-width: 500px) {
	body {font-size: 14.5px;} /* base font size */
	header {border-radius: 0 0 15px 15px; box-shadow: 0 0 8px 1px #333;}
	#wrapper {min-width: 320px; max-width: 500px;}
	section {width: 100%; float: none;}
}