/* Basic styling */
* {
    box-sizing: border-box;
    padding: 0;
    /*margin: 0;*/
    margin: auto;
    -moz-appearance: none;
    -webkit-appearance: none;    
}
body {
    font-family: sans-serif;
    max-width: 1920px;
    /*margin: auto;*/
    margin: 0 10px;
	line-height:1.5em;
	/*letter-spacing: normal;*/
}
h1, h2 {
	line-height:1.25em;
}
#skip a
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
} 
#skip a:focus
{
position:absolute;
left:20px;
top: 10px;
/*position:static;*/
width:auto;
height:auto;
font-family: verdana;
font-weight: bold;
background-color:black;
color:orange;
}
nav {
    /*background: #222;*/
    background: black;
    padding: 5px 20px;
}
#wrapper {    
    width: 100%;    
    margin: 0 auto;     
    /*padding-bottom: 50px;*/   
}
main {
    /*width: 100%;*/        
    padding: 20px;
}
.empty {
    height: 20px;
    width: 100%;
}

ul {
    list-style-type: none;
}
a {
    /*font-size:14px;*/
    color: white;
    text-decoration: none;
}
.currentitem {
    /*text-decoration: underline;*/
    text-decoration: none;
    font-weight: bold;
    font-size:20px;
	outline: 2px solid orange;
	padding: 7px 5px;
    /*outline: 2px dashed #3364FF;*/
}
a:focus {
    /*text-decoration: underline;
    font-weight: bold;
    font-size:20px;*/   
    /*outline: 2px dashed #3364FF;*/
    text-decoration: underline;
    outline: 2px dashed orange;
}
a:hover {
    /*text-decoration: underline;
    font-weight: bold;
    font-size:20px;*/
    text-decoration: underline;    
    outline: 2px dashed orange;
}

.logo a:hover {
    text-decoration: none;
}

.menu li {
    font-size: 20px;
    padding: 15px 5px;
    white-space: nowrap;
}
.logo a,
.toggle a {
    font-size: 30px;
text-decoration: none;
}

.button a{
    text-decoration:none;
} 


.button.secondary {
    /*border-bottom: 1px #444 solid;*/
	/*background-color:teal;*/
}

.button.secondary a{
    text-decoration:none;
}


footer {    
    width: 100%;     
    background: black;
    padding: 5px 30px;
    display: block;    
    text-align: center;
    color: white;
    clear: left;   
}
.footermenu {
    display: inline;
}
.footermenu li {    
    padding: 10px 5px;
    /*font-size: 13px;*/        
}
.footeritem {
    font-size: 12px;
    display: inline;
    width: auto;    
}
.footeritem .currentitem {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;    
}
.footeritem a {
    font-size: 12px;    
}
.footeritem a:hover {
    font-size: 12px;    
}
.footeritem a:focus {
    font-size: 12px;    
}


/* Mobile menu */

.menu {
    display: flex;
    flex-wrap: wrap;    
    justify-content: center;
    align-items: center;
}
.logo {
    flex: 1;   
    text-align: left;
}
.toggle {
    flex: 1;
    text-align: right;
    order: 3;
}
.toggle img:hover{
    outline: 3px dashed orange;
}
.item.button {    
    text-align: center;    
    width: auto;
    order: 1;
    display: block;
    -moz-appearance: none;
    -webkit-appearance: none;    
}


.item {
    width: 100%;
    text-align: center;
    order: 2;
    display: none;
}
.item.active {
    display: block;
}

.button.secondary {
        border: 0;
    }
    .button a {
        padding: 7.5px 15px;
        background: #757478;
        border: 1px #006d6d solid;
        text-decoration: none;
    }
	.button.logout a {
        /*padding: 7.5px 15px;*/
        background: black;
        /*border: 1px #006d6d solid;*/
        text-decoration: none;
    }
    .button.secondary a {
        background: transparent;
	text-decoration: none;    
    }
    .button a:hover {
        text-decoration: none;
    }
    .button a:focus {
        text-decoration: none;
    }
    .button:not(.secondary) a:hover {
        background: #006d6d;
        border-color: #005959;
    }
    .button.secondary a:hover {
        color: #ddd;
    }
.mobileShow {
        display: inline;
        font-size: 1.5em;
		line-height:1.25em;
}
.mobileHide {
        display: none; 		
}
.explain {
    width: 80%;
    margin:auto;
    margin-top:30px;    
    }
#definition {
    width: 95%;
    margin:auto;
    margin-top:30px;
	color:black;
	font-size:.9em;
	text-align:center;    
    }
#definition button{
    border: 2px solid magenta;
	font-size:.9em;
	text-align:center;
	padding-left:10px;
	padding-right:10px;
}
#definition button:focus{
    outline: 2px dashed #3364FF;
}
#definition:focus{
    outline: 2px dashed #3364FF;
}
.signupsection {
		width:100%;
		margin:auto;
		font-size:18px;
		text-align:center;
		/*border: 1px solid #000;*/
		border-radius:5px;
		padding:5px;;
}
.signupform {
		width:100%;
		border:1px solid #ccc;
		margin:auto;
		text-align:left;
		padding:5px;
}

.processsignup {
		width:100%;
		margin:auto;
		font-size:18px;
		text-align:left;
		border: 1px solid #000;
		border-radius:5px;
		padding:5px;;
}
.loginform {
		width:100%;
		margin:auto;
		font-size:20px;
		text-align:left;
		border: 1px solid #000;
		border-radius:5px;
		padding:10px;
	}
.content {
	width: 95%;
        display: block;
	margin-top:10px;
	margin-right:auto;
	margin-bottom:10px;
	margin-left:auto;
        /*padding: 20px;*/		
	}
    
	.contentrow {
	width: 100%;
	/*display: block;
	min-height:760px;*/
	border-style: solid;
	border-width: 1px;
	border-color: #eee;	
	border-radius: 25px;
    }
    .contentrow:after {
    content: "";
	display: table;
	clear: both;	
    }
    
    
}

/* Tablet menu */
@media all and (min-width: 600px) {

    .menu {
        justify-content: center;
    }
    .logo {
        flex: 1;
    }
        
    .item.button {
        width: auto;
        order: 1;
        display: block;
    }
    .toggle {
        flex: 1;
        text-align: right;
        order: 2;
    }
    .button.secondary {
        border: 0;
    }
    .button a {
        padding: 7.5px 15px;
        background: #757478;
        border: 1px #006d6d solid;
    }
    .button.secondary a {
        background: transparent;    
    }
    .button a:hover {
        text-decoration: none;
    }
    .button a:focus {
        text-decoration: none;
    }
    .button:not(.secondary) a:hover {
        background: #006d6d;
        border-color: #005959;
    }
    .button.secondary a:hover {
        color: #ddd;
    } 
    .signupsection {
		width:80%;
		margin:auto;
		font-size:20px;
		text-align:center;
		border: 1px solid #000;
		border-radius:5px;
		padding:10px;
	}
	.signupform {
		width:50%;
		border:1px solid #ccc;
		margin:auto;
		text-align:left;
		padding:10px;
	}
	.processsignup {
		width:80%;
		margin:auto;
		font-size:20px;
		text-align:left;
		border: 1px solid #000;
		border-radius:5px;
		padding:10px;
	}
    .content {
	width: 95%;
        display: block;
	margin-top:10px;
	margin-right:auto;
	margin-bottom:10px;
	margin-left:auto;
        /*padding: 20px;*/		
	}
    .contentrow {
	width: 100%;
    display: block;	        		    						
    }
	.contentrow {
	width: 100%;
	/*min-height:760px;*/
	border-style: solid;
	border-width: 1px;
	border-color: #eee;	
	border-radius: 25px;
    }
    .contentrow:after {
    content: "";
	display: table;
	clear: both;	
    }
    
    
   
}


/* Desktop menu */
@media all and (min-width: 992px) {
    .menu {
        justify-content: center;
    }
    .logo {
        flex: 1;
    }
    .graphic {
        display: block;
        text-align: right;
	order: 1;
    }        
    
	.item.logout {
        width: auto;
        order: 2;
        display: block;
    }
	.item.button {
        width: auto;
        order: 2;
        display: block;
    }
    .toggle {
        display:none;        
    } 
       
    .item {
        /*flex: 1;*/
        display: block;
        width: auto;
        text-align: right;
        order: 3;
    }
	#definition {
    width: 60%;
    margin:auto;
    margin-top:30px;
	color:black;
	font-size:.9em;
	text-align:center;
    }
	#definition button{
    border: 2px solid magenta;
	font-size:.9em;
	text-align:center;
	padding-left:10px;
	padding-right:10px;
    }
	#definition button:focus{
    outline: 2px dashed #3364FF;
    }
	#definition:focus{
    outline: 2px dashed #3364FF;
    }
    .signupsection {
		width:80%;
		margin:auto;
		font-size:20px;
		text-align:center;
		/*border: 1px solid #000;*/
		border-radius:5px;
		padding:10px;
	}
	.signupform {
		width:100%;
		border:1px solid #ccc;
		margin:auto;
		text-align:left;
		padding:10px;
	}
	.processsignup {
		width:80%;
		margin:auto;
		font-size:20px;
		text-align:left;
		border: 1px solid #000;
		border-radius:5px;
		padding:10px;
	}
	.processsignupresults {
		width:60%;
		margin:auto;
		font-size:20px;
		text-align:center;
		border: 1px solid #000;
		border-radius:5px;
		padding:10px;
	}
	.loginform {
		width:60%;
		margin:auto;
		font-size:20px;
		text-align:left;
		border: 1px solid #000;
		border-radius:5px;
		padding:10px;
	}
    
    .menu li {
        padding: 15px 10px;
    }
    .menu li.button {
        padding-right: 0;
    }
    .mobileShow {
        display: none;
    }
    .mobileHide {
        display: block;        
        margin-top:5%;
		margin-right:0px;
        text-align: right;
		font-size:1.3em;
		font-weight:bold;
		width:70%;
    }
	
    .content {
	width: 60%;
    display: block;      	
	margin-right:auto;
	margin-bottom:10px;
	margin-left:auto;
    padding: 20px;
	}
	
	.contentrow {
	width: 100%;
	/*min-height:760px;*/
	border-style: solid;
	border-width: 1px;
	border-color: #eee;	
	border-radius: 25px;
	padding: 20px;
    }
    .contentrow:after {
    content: "";
	display: table;
	clear: both;	
    }
	
    
}