a {
	color: inherit; 
	text-decoration: none;
	cursor: pointer;}
a:visited {color: inherit;}
a:hover {color: inherit; text-shadow: 2px 2px 2px;}
a:active {color: inherit;}
* {
	margin: 0px;
	padding: 0px;}
html, body {height: 100%;}
body {
	background: #881919 url(images/concrete.png);
	overflow-y: hidden;
	text-align: justify;
	font-family: 'Open Sans', sans-serif;
	font-size: medium;
	color: #383838;}
table {margin: 0 auto;}
td {
    padding: 5px;
    vertical-align: top;
}
img {border: none;}
h1, .projectHeader {
	margin: 20px;
	text-align: center;
	font-size: x-large;
	font-family: 'Audiowide', cursive;
	text-shadow: 2px 2px 4px;}
h2, h3 {
	margin: 10px 20px;
	text-align: center;
	font-size: large;
	font-family: 'Audiowide', cursive;}
input, select {
    border: 1px solid;
    border-color: #abadb3 #fff #fff #abadb3;
    border-radius: 5px;}
p {margin: 10px 0px 10px 0px;}
li {
	margin-left: 20px;
	list-style-type: disc;}
hr {
	clear: both;
	color: #881919;}
pre {
	font-family: inherit;
	font-size: inherit;
	white-space: normal;}
textarea {
    border: 1px solid;
    border-color: #abadb3 #fff #fff #abadb3;
    border-radius: 5px;}
.centerElem {
    margin-left: 0;
    margin-right: 0;
}
.spacer {padding-top: 50px;}
#container {
	margin: 0 auto 0 auto;
	position: relative;
	height: 100%;}
#menu {
	width: 400px;
	float: left;
	padding-top: 20px;}
#menu-expand {display: none;}
#menu a:hover {
	text-shadow: none;
	cursor: pointer;}
#logo {
	float: right;
	margin-right: 5px;
	border: 2px solid black;
	border-radius: 5px;
	overflow: hidden;}
#mission {
	clear: both;
	float: right;
	width: 90%;
	color: #e4e4e4;
	padding: 30px 10px 10px 10px;}
#copyright {
	padding-right: 10px;
	font-size: small;
	color: #be2323;
	text-align: right;}
#copyright a:hover {color: #ff0000;}
#contentarea {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: 400px;
	width: calc(100% - 400px);
	border: 4px ridge #797979;
	border-radius: 20px 0px 0px 20px;
	border-top: none;
	border-bottom: none;
	background: #e4e4e4 url(images/shadow2.png) repeat-y;}
#content {
	height: 100%;
	position: relative;
	overflow-y: scroll;
	padding: 0px 15px;
	font-size: 90%;
	border-right: 1px solid #c7c7c7;}
#footer {
	position: absolute;
	bottom: 0;
	left: 0px;
	width: 100%;
	color: #9a9a9a;
	text-align: center;
	font-size: small;}
#projects-content {
    text-align: center;
}
#user {
	width: 500px;
	text-align: right;}
#resumeform {
	text-align: left;
	padding-top: 20px; 
	width: 600px; 
	margin: 0 auto;
}
#resumeform textarea {height: 75px;}
#resume pre {margin-left: 30px;}
#jobdetails {text-align: left;}
#jobdetails td {
	vertical-align: top;
	padding: 5px;}
#joblist {
	min-width: 400px;
	margin: 0 auto 0 auto;
	text-align: left;}
#joblist td {padding: 0px 10px 0px 0px;}
#plannerProVideo {
    width: 420px;
    height: 315px; 
    margin: 10px auto;
}
#plannerProVideo iframe {
    width: 100%;
    height: 100%;
}
#contact-content {
    width: 100%;
    padding: 20px 0px;
}

.full-display {display: block;}
.mobile-display {display: none;}
.center {text-align: center;}
.resumediv {
	padding-top: 20px;
	font-weight: bold;}
.form {
    max-width: 600px;
    display: inline-block;
    text-align: left;
}
.form input {width: 100%;}
.form textarea {
	width: 100%; 
	height: 10em;
	font-family: inherit;
	font-size: inherit;}
.form2 input,.form2 select {
	width: 450px;
	float: right;}
.form2 textarea {
	width: 100%;
	height: 300px;}
.adminbutton {
	margin: 5px 10px;
	width: 150px;
	padding: 2px 10px;
	background: #881919 url(images/shadow.png) repeat-x;
	background-position: bottom;
	color: #e4e4e4;
	border: 2px solid #420c0c;
	border-radius: 20px 7px;
	cursor: pointer;
	text-align: center;
	transition: background .4s, color .4s;
	-webkit-transition: background .4s, color .4s;}
.adminbutton:hover {
	background: #b32121 url(images/shadow.png) repeat-x;
	background-position: bottom;
	color: #fff;
	text-shadow: none;}
.button {
	margin: 5px 0px;
	padding: 2px 10px;
	background: #881919 url(images/shadow.png) repeat-x;
	background-position: bottom;
	color: #e4e4e4;
	border: 2px solid #420c0c;
	border-radius: 20px 7px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .4s, color .4s;
	-webkit-transition: background .4s, color .4s;}
.button:hover {
	background: #b32121 url(images/shadow.png) repeat-x;
	background-position: bottom;
	color: #fff;
	text-shadow: none;}
.menuitem {
	margin-top: 5px;
	padding-left: 20px;
	width: 80%;
	clear: both;
	float: right;
	color: #000;
	font-size: large;
	font-family: 'Audiowide', cursive;
	text-align: left;
	border: 2px solid black;
	border-right: none;
	border-radius: 20px 0px 0px 7px;
	background: #fff url(images/shadow.png) repeat-x;
	background-position: bottom;
	transition: width .4s;
	-webkit-transition: width .4s;}
.menuitem:hover {width: 90%;}
.programdetails {
	display: inline-block;
	text-align: left;}
.map {
    margin: 15px auto;
    width: 80%;
    height: 300px;
    border: 1px solid;
    border-color: #abadb3 #fff #fff #abadb3;
    border-radius: 5px;
    overflow: hidden;
}
.map iframe {width: 100%; height: 100%;}
.rfloat {float: right;}
.lfloat {float: left;}
.highlight {
	border-radius: 5px;
	transition: background .4s;
	-webkit-transition: background .4s;}
.highlight:hover {background: #fff;}
.postingLink {cursor: pointer;}
.postingLink:hover {text-shadow: 2px 2px 2px;}
a.traininglink:hover h2 {text-shadow: none;}
.trainingdiv {
	clear: both;
	padding-bottom: 40px;
	text-align: justify;}
.trainingdesc {
	margin-left: 320px;}
.traininglogo {
	width: 320px;
	float: left;
	text-align: center;}
@media only screen and (max-width: 950px) {        /*mobile portrait*/
    body {
        overflow-y: scroll;
        text-align: left;
    }
    img {max-width: 100%;}
    #container {z-index: 1;}
    #menu {/*changed*/
        position: fixed;
        width: 100%;
        max-width: 400px;
        height: 100%;
        margin-left: -100%;
        padding-top: 0;
        overflow-y: scroll;
        background: #881919;
        z-index: 10;}
    #menu-expand {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        padding: 15px 20px;
        background: #E4E4E4;
        z-index: 5;
        cursor: pointer;
    }
    .hamburger {
        display: block;
        width: 20px;
        height: 3px;
        margin-bottom: 3px;
        background: #383838;
        content: " ";
    }
    #noscriptMenu {
        font-weight: bold;
        font-size: 120%;
    }
    #menu-retract {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px 20px 15px;
        font-size: 30px;
        z-index: 10;
        cursor: pointer;
    }
    #logo {
        width: 100%;
        margin-right: 0px;
        border: none;
        border-radius: 0px;}
    #contentarea {/*changed*/
        position: relative;
        left: -400px;
        width: 100%;
        border: none;
        border-radius: 0px;
        background: #e4e4e4;}
    #content {
        height: auto;
        padding: 48px 15px 0px;}
    #projects-content {
        text-align: left;
    }
    #resumeform {
        text-align: left;
        padding-top: 20px; 
        width: 100%; 
        margin: 0 auto;
    }
    #contact-content {
        display: inline-block;
        min-width: 100%;
        padding: 20px 0px;
    }
    
    .full-display {display: none;}
    .mobile-display {display: block;}
    .form {
        width: 100%;
        display: inline-block;
        text-align: left;
    }
    .form2 input {
        width: 60%;}
    .menuitem {
        padding-right: 20px;
        text-align: right;}
    .map {margin: 15px auto;}
    .trainingdiv {text-align: left;}
    .trainingdesc {
        margin-left: 0;
        min-width : 100%;}
    .traininglogo {
        width: auto;
        float: none;}
}
@media only screen and (max-width: 460px) {        /*small mobile*/
    #plannerProVideo {
        width: 300px;
        height: 200px; 
    }
}
@media screen and (max-width: 700px) and (min-aspect-ratio: 1/1) {      /*mobile landscape*/
    
}