@charset "UTF-8";
* {
    margin: 0;
}

html, body {
    height: 100%;
}

/* this contains the menu and the page content it also keeps the footer in place */
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4.5em; /*this has to be the same as .footer, .push or the footer won't be in the right place */
}
/* this keeps the footer at the bottom */
.footer, .push {
    height: 4.5em;
}

/* this is the footer*/
.footer {
	width:98%;
	margin-left:1%;
}

/* this is the copyright font and box */
.footer p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#FFFFFF;
	background-color: #666666;
	-moz-border-radius-bottomleft: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	-webkit-border-bottom-right-radius: 20px;
	border: solid 2px #000000;
	padding-top: 1em;
	padding-bottom: 1em;
}

/* this is the grey box at the top of the page that contains the menu */
.wrapper #menu {
	position: relative;
	left:1%;
	top:10px;
	width:98%;
	height: 4.5em;
	z-index:1;
	background-color: #666666;
	-moz-border-radius-topleft: 20px;
	-webkit-border-top-left-radius: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-top-right-radius: 20px;
	border: solid 2px #000000;
	margin-bottom: 5px;
}
/* this is the position of my name in at the top left */
#name {
	position: relative;
	left: 8px;
	top: 2px;
}
/*this is the font for my name in the top left */
.JonMay {
	font-size: xx-large;
	font-weight: bold;
	color: #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*this is the font after my name*/
.meuk {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-large;
	color: #cccccc;
}
/*this is the div that the tabs are in*/
#navigation{
	position: relative;
	float:right;
	top: 2.85em;
	height: 2.2em;
	z-index:200;
	padding-right:20px;
}
/* this removes the indents and styling from the list */
#nav, #nav ul{
     margin:0;
	 padding:0px;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
 }
 /* this is the tabs defult tab */
 #nav a {
	color: #666666;
	background: #CCCCCC;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top:solid 2px #cccccc;
	border-left:solid 2px #cccccc;
	border-right:solid 2px #cccccc;
	border-bottom:solid 2px #000000;
	text-decoration:none;
	padding-left:10px;
	padding-right:10px;
	font-size: x-large;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*this is the mouse over tab*/
#nav a:hover{ 
	color: #666666;
	background:#FFFFFF;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top:solid 2px #FFFFFF;
	border-left:solid 2px #FFFFFF;
	border-right:solid 2px #FFFFFF;
	border-bottom:solid 2px #000000;
	padding-left:10px;
	padding-right:10px;
	font-size: x-large;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*this is the active tab each page body needs an id="section-" each list tab needs an id="menu-" giving this font a color will stop the popup hover from changing color */
#section-home #menu-home a,
#section-info #menu-info a,
#section-images #menu-images a,
#section-contact #menu-contact a, 
#nav a:active{
	background:#FFFFFF;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top:solid 2px #000000;
	border-left:solid 2px #000000;
	border-right:solid 2px #000000;
	border-bottom:solid 2px #FFFFFF;
	padding-left:10px;
	padding-right:10px;
	font-size: x-large;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* this is the positioning of the tabs*/
#nav li{
    float:left;
    position:relative;
	padding-right:3px;
}
/*this positions the nested list beyond the main menu*/
#nav ul {
	position:absolute;
	width:15em;
	top:1.7em;
	left:0%;
	display:none;
	z-index: 2;
}
/*this displays the pop up menu horizontaly*/
#nav li ul a{
    width:12em;
    float:left;
}
/*this is where the pop up menu will apeare */
#nav ul ul{
	top:auto;
	}	
/*this is where the pop up menu will apeare */
#nav li ul ul {
    left:12em;
    margin:10px;
}
/* these two hide and show the pop up menu*/
#nav li:hover ul ul{
    display:none;
    }
#nav li:hover ul{
    display:block;
    }
/*this is the space between the popup menu and the tabs. keeps the menu on screen if you roll into the white space*/
#pop{
	margin-top:4px; 
	
}
/* this is the pop up menu defult*/
 #subnav a{
 	color:#CCCCCC;
	background: #666666;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-top: .2em solid #FFFFFF;
	border-bottom:0px;
	border-left:0px;
	boarder-right:0px;
	font-size: large;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*this is the popup hover state*/
#subnav a:hover{ 
	color:#FFFFFF;
	background: #666666;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-top: .2em solid #FFFFFF;
	border-bottom:0px;
	border-left:0px;
	boarder-right:0px;
	font-size: large;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*this is the popup active state giving this font a color will stop the hover from working*/
#section-images #menu-images #pop a,
 #pop a:active{
	background: #666666;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border:0px;
	font-size: large;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}