/* comment: page formatting make a container to constrain width and center */
.pagecontainer {
      margin: auto;
      max-width: 980px;
      }
      
/* comment: sets base font size for entire document.  All other fonts in em units where 1 em is the same as the base unit (20 px) and 2 em is double etc. */
     
html {
	font-size: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	height: 100%;
}

body {
    margin-left: auto;
    margin-right: auto;
    background-color: black;
    height: 100%;
    overflow:hidden;
    
}

#logo {
    background-color: white; 
    float:left;
    width:60%;
    height: 46px;

}

#navright {
	background-color: white;
	float:right;
	height: 46px;
    width: 40%;
}

/* comment: make dropdown navigation menu*/
/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */
 
nav:after {
    content:"";
    display:table;
    clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:relative" */
nav ul {
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
    z-index: 4;
    }
    
/* Positioning the navigation items inline */
nav ul li {
    margin: 0px;
    display:inline-block;
    float: right;
    background-color: #B00000;
    }
    
/* Styling the links */
nav a {
    display:block;
    padding:0 10px;
    color:#FFF;
    font-size:20px;
    line-height: 46px;
    text-decoration:none;
    min-width:100px;
}

/* Background color change on Hover */
nav a:hover {
    background-color: maroon;
}
/* Next section deals with DROPDOWN menu stuff*/

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
    display: none;
    position: absolute;
    
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;
}
 
/* First Tier Dropdown */
nav ul ul li {
    float:none;
    display:list-item;
    position: relative;
}

#content {
	background-color: #282828;
	max-width: 100%;
	height:900px;
	margin:0 auto;
}

.button{
	background-color: #3A6B7D;
	border-style: solid;
	border-color: #99CCFF;
	height: 60px;
	width: 280px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	line-height: normal;
	text-align: center;
	color: #FFFFFF;
}

.button:hover{
background-color: #47525c;
}

.buttontext {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1em;
}


/* note: columns must add up to total width (100%) to work properly in IE and Firefox especially */
/* media queries below sets 2 columns if wider that 601 px and 1 column if less by changing the width of the columns to appropriate percentage */

@media (max-width: 600px) {
.column{
	background-color: white;
	float: left;
	height: auto;
	position: relative;
	width: 92%;
	margin-top: 10px;
	margin-left: 4%;
	margin-right: 4%;
}
}/* end media query 1 */

/* start media query 2: wide screen */
@media (min-width: 601px) {
.column{
	background-color:white;
	float:left;	
	/* height as % makes sure columns are equal heights when side by side on large screen*/
	height: 80%;
	position: relative;
	width: 46%;
	margin-top: 10px;
	margin-left:2%;
	margin-right:2%;
}
}/* end media query 2 */

/* column2 spans the entire width*/
.column2{
	background-color: white;
	float: left;
	height: auto;
	position: relative;
	width: 92%;
	margin-top: 10px;
	margin-left: 4%;
	margin-right: 4%;
}

h1{
	text-align: center;
	text-decoration: underline;
	font-size: 1em;
	padding: 4px 10px 4px 10px;
}

h2{
	text-align: center;
	text-decoration: underline;
	font-size: 1em;
	padding: 4px 10px 4px 10px;
	color:#3A6B7D;
}

h2:hover{
color: #99CCFF;
}


p{
	text-align: center;
	font-size: 0.8em;
	padding: 2px 10px 2px 10px;
}

/* hyperlink properties: no underline etc. */

a:link {
    text-decoration: none;
}