.offScreen {
	position: absolute;
	width: 1px;
	left: 0px;
	top: -200px;
	margin-bottom: 100px; 
}



.hide { display: none; }

A.topic
{
	text-decoration: underline;
	font-weight: 600;
	color: #021056;
}
A:link{
	text-decoration: underline;
	color: #021056;
}


.center {
	text-align: center;
	}
.center h2 { text-align: center; }

/* And now we want to make everything look really good on newer browsers */


	Body {
		background-color: white;
    font-family: 'Asap', sans-serif;
		margin: 0px;
		padding: 10px;
	}

  .entireContent {
    max-width: 950px;
    margin: auto;
  }  
 	.header {
		width: 100%;
		text-decoration: none;
		margin-bottom: 1em;
		padding: 0px;

	}

	.header p {
  display: none;
	 	float: right; 
		text-align: right; 
		margin-right: 1em;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.8em;
		font-weight: normal;
		margin-top: 0.5em;
	}
	
	.header a { 
		text-decoration: none; 
		margin-top: 1em;
        color: white;
	}
		
  
	#logo {
		position: relative;
    width: 100%;

		margin: 0px;
		padding-bottom: 5px;
	}
  

	.homepage{
/*		background: white url("./images/menubk.jpg") repeat; */
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		border: 1px solid black;
/*		color: white; */
		text-align: left;
	}
	.heading {
		width: 100%;
		padding: 0px;
		text-align: center;
		text-decoration: none;
/*		border: 1px solid #2E2C7A;
		background: white url("./images/bar.jpg") right repeat; */
	}
	.heading2 {
		margin-top: 2em;
		width: 100%;
		padding: 0px;
		text-align: left;
		text-decoration: none;
		border-bottom: 1px solid #2E2C7A;
/*		background: white url("./images/bar.jpg") right repeat; */
	}
	.block{
		position: relative;
		display: block;
	}
  .box {
    text-align: center;
  }
	.boxL {
		width: 10em;
		display: inline-block;
		margin: 0px 0px 0px 0px;
		padding: 3px 0px 3px 3px;
		text-align: center;
		text-decoration: none;
		font-weight: 600;
/*		color: white;
		background: #294f7b url("./images/menubk.jpg") repeat; */
		background-color: #7fba00;
	}
	.boxR {
		width: 10em;
		display: inline-block;
		margin: 0px 0px 0px 0px;
		padding: 3px 0px 3px 3px;
		text-align: center;
		text-decoration: none;
		font-weight: 600;
/*		color: white;
		background: #294f7b url("./images/menubk.jpg") repeat; */
		background-color: #7fba00;
	}
	.box A{
		text-decoration: none;
		color: #FFFFFF;
	}
	.box A:Hover{
		text-decoration: underline;
		color: #FFFFFF;
	}
	H1,H2,H3,H4,H5,H6 {	
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		font-size: 1.2em;
		font-weight: 750;
		font-family: font-family: 'Voces', cursive;
		color: #666666;
		text-decoration: none;
	}
  h1 { 
    border-bottom: 1px solid #cccccc;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em; 
  }
	H2 {
		margin-top: 2px;
		margin-bottom: 0px;
		padding-bottom: 0px;
		text-align: left;
	}
	HR {
		height: 1px;
		border: 0px solid black;
		border-top: 1px solid #cccccc;
    margin: 2em;
	}
	.content p {
		margin: 5px 10px 13px 10px;
	}

	OL.answers {
		list-style-type: upper-alpha;
		margin-top: 5px;
		padding-right: 30px;
		color: black;
		text-align: left;
	}
	OL.answers LI
	{
		margin: 10px 0px 0px 20px;
	}
	#content UL {
		margin-top: 5px;
		padding-right: 30px;
		color: black;
		text-align: left;
	}
	#content UL LI{
		margin: 10px 0px 0px 20px;
	}
	#content UL LI.noIndent{
		margin: 10px 0px 0px 0px;
	}		
	#content UL.right LI {
		margin: 1px 0px 0px 0px;
		padding: 0;
	}
	#content UL.right {
		margin: 18px 10px 0px 210px;
		padding: 0;
	}
nav#sideNav {
    float: left;  
    margin: 2em 2em 2em -2em;
    width: 14em;
}
nav#sideNav li {
    list-style-type: none;
    padding: 1em 0em;
    border-bottom: solid 1px #cccccc;
}

nav#sideNav li:last-child {
    border-bottom: none;
}

nav#sideNav ul > li:hover {  

}
nav#sideNav li a {
    text-decoration: none;
}

nav#sideNav li ul li { margin-left: -1em; }

	#sidebar {

		width: 13em;
		min-width: 120px;
		float: left;
		margin-left: 15px;
    margin-right: 5px;
		padding: 0px;
    overflow: hidden;
/*		background: black url("./images/menubk.jpg") repeat;*/
		z-index: 10;
	}
	.sideGroup {
		margin: 0px;
		padding: 0px;
		width: 12em;
		border-top: 0px solid white;
    line-height: 2em;
	}

	.sideGroup p {
		margin: 0px;
    border-bottom: 1px solid #cccccc;
	}


	.sideGroup a {
		display: block;
		position: relative;
		padding: 3px 5px 2px 5px;
		margin: 0 4px 0 20px;
		width: auto;

		text-decoration: none;

	}
	

	.sideGroup a.head {
		margin-left: 1px;
		font-size: 1em;
    background-color: white;
	}

  
	.caption{
		clear: right;
		display: block;
	}

	.picboxLeft{
    display: none;
		float: left;

		margin: 2px 10px 5px 5px;
		border: 1px solid #038299;
		padding:0px;
	}
	.picboxRight{
    display: none;
		clear: right;
		float: right;

		padding: 0px;
		margin: 15px 0px 10px 10px;
		border: 1px solid #038299;
	}	
	.picboxBorder { 
    display: none;
		border: 1px solid #038299;
	}
  

	#content {
		position: relative;
		display: block;
		width: auto;
		padding: 15px 10px 10px 5px;
		margin-left: 15em;
		text-align: left;
		background: transparent;
    line-height: 1.5em;
	}






	.bioTopic{
		font-weight: 800;
		float: left;
		width: 10em;
		margin-top: 3px;
		text-align: right;
	}
	.bioText{
		margin: 3px 10px 0 11.5em;
	}


	.footer {
		clear: both;
		width: 100%;
		margin-top: 2em;
		text-align: center;

		padding-top: 5px;
		border-top: 1px solid black;
/*		background: black url("./images/menubk.jpg") repeat; 
		color: #FFFFFF;*/

	}

	.footer A{
/*		color: #FFFFFF; */
		padding: 1em;
		text-decoration: none;
	}
	
	.footerHome {
		clear: both;
		width: 100%;
		margin: 0px 0px 0px 0px;
		text-align: center;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: smaller;
		padding: 15px 0px 0px 0px;
		border-top: 1px solid white;
/*		background: black url("./images/menubk.jpg") repeat; 
		color: #FFFFFF;*/
		padding: 0px;
	}

	.footerHome A {
/*		color: #FFFFFF; */
		padding-left: 15px;
		text-decoration: none;
	}
	
/*	a.white { color: white; } */


  	.floatbox {
  		float: right;
		margin-top: 1em;
		width: 35%;
		border: solid 1px black;
		padding: 0;
	/*	background-color: white; */
  	}
	.floatbox h2 { 
		width: 100%;
		padding: 0px;
		margin-top: 0px;
		text-align: center;
		text-decoration: none;
		font-weight: normal;
		border-bottom: 1px solid #2E2C7A;
/*		background: white url("./images/bar.jpg") right repeat; */
	}

/* Challenge Yourself! Scenarios */

  div.answer_text { 
    margin-left: 2em;
    display: none; 
    font-weight: bold;
    }
  div.answer_text p.next {
    font-weight: normal;
  } 

  div.answer_text p.fact, div.answer_text p.note {
    font-weight: normal;
    font-style: italic;
  }
  .correct { color: green; }
  .incorrect { color: red; }

  li.answer { 
    display: list-item;
    margin-top: 1em; 
    }
  
  input.answer_selector { float: left; margin-left: -2000em; margin-top: 0.5em; }
  
  input.answer_selector:focus  { margin-left: -2em; }
  
  label.answer_label { cursor: pointer; color: purple; }
  label.answer_label:hover { text-decoration: underline; }
  
  input.answer_selector:checked ~ div.answer_text { display: block; }


/* TEST OF RESPONSIVE MENU */

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
  z-index: 100;
  position: relative;
  float: left;
  margin-left: 0.25em;
	display: none;

}

  #menu-text { 
    display: none;
    position: relative; 
    top: -1em;
    left: 0.5em; 
    padding: 0.5em;
    background-color: #ccc;
    color: navy;
    border-radius: 5px;
    }
  #burger:focus + #menu-text {
    display: block;
    }

/*Hide checkbox*/
input[type=checkbox]#show-menu {
    display: none;
}

/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked + #sidebar {
    display: block;
}

input[type=checkbox]:checked + #sidebar .sideGroup {
    text-align: center;
    width: 100%;

}

input[type=checkbox]:checked + #content {
    margin-left: 0em;
}
/*Responsive Styles*/

@media screen and (max-width : 780px){

 /* Hide menu */
  

  #header {
    padding: 0px;

  }
  #sidebar { 
    margin-left: 0px;
    display: none; 
    float: none;
    width: 100% !important;
    text-align: center;
    background-color: white;
    -webkit-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.75);
    }
    
  .sideGroup, .sideGroup p, .sideGroup a {
    width: 100% !important;
    text-align: center;
    margin-left: 0px !important;
    background-color: #eeeeee;
    padding-right: 4px;
  }
  .sideGroup a:hover {
    background-color: navy;
    color: white;
  }
  .sideGroup a.head {
	  background-color: #6480b0;
    color: white;
	}
  .sideGroup a.head:hover {
    background-color: navy;
  }
  #sidebar .sideGroup:last-child p {
    border-bottom: none;
  }
  .boxL, .boxR {
    display: block;
    width: 50%;
    margin: auto;
    padding: 1em;
    margin-bottom: 2em;
  }
  
  #content { position: relative; margin-left: 0em; }
	/*Display 'show menu' link*/
	.show-menu {
		display:block;

    }
}