/* ********************************** */ 
/*             Page Layout            */
/* ********************************** */
html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
 background-color:#999999;
} 
 
#contentContainer{ 
 width:800px; 
 text-align:left; 
 margin:0 auto;
 font-family:verdana, sans-serif;
 font-size: 13px;
} 
 
#masthead{
 position:relative;
 height:300px; 
 background-color:#999999; 
 width:100%;
 display:block;
 overflow:hidden;
} 

#wrapper {
 /* This is added in case the left column or main col are shorter than the other */
 background-color:#4573FA;
 margin: 0px 42px;
 /* padding-bottom: 10px;*/
}


#leftcol {
 /* To change width of col, alter width param here and in #twocols */
 /* width:17%; */
 width: 116px;
 float:left; 
 position:relative; 
 z-index: 3000; /* Required by IE because child elements cannot have a higher z-index than their parents */
}
 
#twocols{
 /* To change width of col, alter width param here and in #leftcol */
 /* We make width 3% less so the padding will fit (80+16+3=100) */
 /* width:82%; */
 width: 600px;
 float:right; 
 position:relative;
}

#rightcol{
 /* width:34%; If you use this, you have to make maincol 66% */ 
 float:right; 
 position:relative; 
 display: none;
}
 
#maincol{
 float: left; 
 position: relative; 
 /* width:66%; If you use this, you have to uncomment the width attribute of rightcol */
 /* width: 100%; */
 padding: 0px 5px 0px 10px;
 overflow: auto;
}

#footer{
 background-color:#88A5FB; 
 clear:both;
 display:block;
 overflow:hidden;
 margin: 0px 42px;
 border-top: 2px solid #0040C0;
 text-align: right;
 vertical-align: middle;
 padding: 5px; 
}

/* ********************************** */ 
/*          Nav Menu System           */
/* ********************************** */

#navMenuContainer {
 padding-left: 5px;
}

#navMenuTitle {
 padding-bottom: 2px;
}

#navMenu {
}

.navSubMenu {
 background: #4573FA;
 /** Done in jquery so the page looks nice in non JS browsers
 position: absolute;
 z-index: 100;
 display: none;
 **/
}

/** Done in jquery so the page looks nice in non JS browsers
#djScienceSubMenu {
 left: 130px;
 top: 70px;
}
**/
	
.navMenuItem {
  border-left: 2px solid #0040C0;
  border-right: 2px solid #0040C0;
  padding: 1px 2px;
  vertical-align: middle;
}

.navMenuItemTop {
  border-top: 2px solid #0040C0;
}	

.navMenuItemBottom {
  border-bottom: 2px solid #0040C0;
}

.navMenuItem img {
 display: inline;
}

.navBullet {
 margin: 5px 2px 2px 2px;
 float: right;
}

.navSubMenu div.navMenuItemTop {
  border-left: 2px solid #4573FA;
}

.socialMedia {
	margin-top: 5px;
	padding-left: 5px;
	text-align: left;
}

.shareThisButton {
	position: relative;
	left: -3px;
	margin: 5px 0px;
}

/* ********************************** */ 
/*             Page Links             */
/* ********************************** */

a:link {
	color:#FFCB01;
	background-color: transparent;
	text-decoration: none;
}
a:visited {
	color:#FFCB01;
	background-color: transparent;
	text-decoration: none;
}
a:active {
	color:#F90000;
	background-color: transparent;
	text-decoration: none;
}
a:hover {
	color:#F90000;
	background-color: transparent;
	text-decoration: none;
}

a.navigator:link {
	color:#88A5FB;
	background-color: transparent;
	text-decoration: none;
}

a.navigator:visited {
	color:#88A5FB;
	background-color: transparent;
	text-decoration: none;
}

a.navigator:hover {
	color:#F90000;
	background-color: transparent;
	text-decoration: none;
}

a.navigator:active {
	color:#F90000;
	background-color: transparent;
	text-decoration: none;
}

a.transparent:link {
	color:black;
	background-color: transparent;
	font-style: italic;
	text-decoration: none;
}

a.transparent:visited {
	color:black;
	background-color: transparent;
	font-style: italic;
	text-decoration: none;
	border: none;
}

a.transparent:hover {
	color:#F90000;
	background-color: transparent;
	font-style: italic;
	text-decoration: none;
	border: none;
}

a.transparent:active {
	color:#F90000;
	background-color: transparent;
	font-style: italic;
	text-decoration: none;
	border: none;
}

a.hidden:link,
a.hidden:visited {
	color:black;
	background-color: transparent;
	text-decoration: none;
}

a.hidden:hover,
a.hidden:active {
	color:#F90000;
	background-color: transparent;
	text-decoration: none;
}

a.button.download {
	-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
	background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
	background-color:#3d94f6;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #337fed;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #1570cd;
}a.button.download:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
	background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
	background-color:#1e62d0;
}a.button.download:active {
	position:relative;
	top:1px;
}

.linkSeparator {
	color:#FFCB01;
	background-color: transparent;
	text-decoration: none;
	margin: 0px 5px;
}

/* *********************** */
/*     Page Elements       */
/* *********************** */

h1 {
	/* font-family: irwinallen, Impact, Verdana, sans-serif; */
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1em;
	color: #88A5FB;
	padding: 0px;
	margin: 0px;
	margin-bottom: 5px;
	border-bottom: 2px solid #88A5FB;
	text-shadow: #0040C0 0.2em 0.1em 0.1em;
	text-transform: uppercase;
	text-align: right;
}

h1.noBorder {
	border-bottom: none
}

h2 {
	font-size: 1.1em;
	font-weight: bold;
	color: black;
	padding: 0px;
	margin: 0px;
}

h3 {
	font-size: 1em;
	font-weight: bold;
	color: black;
	padding: 0px;
	margin: 0px;
}

p  {
	margin: 10px 0px;
}

table {
	font-family:verdana, sans-serif;
	font-size: 13px;
	border: 2px solid #88A5FB;
	margin: 5px 0px;
}

th {
	background: #88A5FB;
	color: #0633B9;
	text-align: left;
	padding: 2px 5px;
	vertical-align: top;
}

th.tableTitle {
	text-align: left;
	border-bottom: 1px solid #0633B9;
}

td {
	padding: 2px 5px;
	vertical-align: top;
	border-bottom: 1px solid #88A5FB;
}

iframe.audioPlayer {
	border: none;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	width: 165px;
	height: 75px;
}

.imageStyle1 {
	border: 1px solid black;
	margin: 5px;
}

img.lined {
	border-style: outset;
	border-color: #0633B9;
	border-width: 2px;
}

div.newsBox {
	border: 4px double #0633B9;
	margin-bottom: 10px;
	padding: 0px 5px;
}

.centeredContent {
	text-align: center;
}

.rightContent {
	text-align: right;
}

.socialMediaIcon {
	margin: 0px 0px;
	border: none;
}

.emailListSignup {
	margin: 4px 5px;
}

.contentBox {
	border: 2px solid #88A5FB;
	margin: 5px 0px;
	/* width: 100%; */
}

.contentBoxTitle {
	color: #0040C0;
	font-weight: bold;
	background: #88A5FB;
	padding: 5px;
}

.contentBoxContents {
	padding: 5px;
}

.pastEventListing {
	border-bottom: 1px solid #88A5FB;
}

.pastEventDescription {
	float: left;
	padding: 5px 0px;	
}

.pastEventImage {
	float: right;
	padding: 5px 0px;	
}

.clearBlock {
	clear: both;
}

.djmixbox {
	border: 2px solid #88A5FB;
	margin: 5px 0px;
}

.djmixname {
	color: #0040C0;
	font-weight: bold;
	background: #88A5FB;
	padding: 5px;
}

.djmixbody {
	height: 210px;
}

.djmixphoto {
	display: inline;
	float: left;
	padding: 5px;
}

.djmixdescription {
	padding: 5px;
	padding-left: 220px;
	margin-bottom: 20px;
}

.djmixplayer {
	text-align: center;
	display: inline;
	float: left;
	padding: 0px 20px;
}

.djmixdownload {
	padding-top: 20px;
	text-align: center;
}

.djmixdownload a, .button a {
	background: #88A5FB;
	padding: 2px 5px;
	font-weight: bold;
	border: 1px solid #0040C0;
}

.quote {
	font-style: italic;
	font-weight: bold;
	display: inline;
}

.strong {
	font-weight: bold;
}

.pressBlock {
	margin: 10px 0px;
}

.debug {
	background: pink;
	border: 1px solid black;
	overflow: auto;
}

table.pressKit {
	width:100%;
}

table.pressKit tr td {
	padding: 10px;
	font-size: 12px;
	font-weight:bold;
	font-family:arial;
	text-transform:uppercase;
}


/* ******************************************************************** */ 
/* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
/* ******************************************************************** */
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  
 
 
/* ******************************************************************** */ 
/*                      printer styles                                  */ 
/* ******************************************************************** */ 

@media print{ 
 /*hide the left column when printing*/ 
 #leftcol{display:none;} 

 /*hide the right column when printing*/ 
 #rightcol{display:none;} 
 #twocols, #maincol{width:100%; float:none;}
}




 /********************/
 /* Dungeon Game CSS */
 /********************/
 
.dg_canvas {
 	width: 500px;
 	height: 300px;
 	border: 2px solid black;
 	background: white;
 	position: relative;
}
 
.dg_console {
  	width: 500px;
 	height: 50px;
 	border: 1px solid black;
 	background: white;
 	margin-top: 5px;
 	overflow:auto;
}
 
.dg_block {
 	width: 10px;
 	height: 10px;
 	background: black;
 	position: absolute;
 	top: 0px;
 	left: 0px;
}