/*makes sure the overflow is hidden difines the native font */
body
{
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	color: black;
}
h1
{
	text-align:center;
	padding:0px;
	margin:0px;
	font-size: 1.6em;
	line-height: 0.7em;
	letter-spacing: -1px;
	color: #444;	
}
h2
{
	text-align:center;
	padding:0px;
	margin:0px;
	font-size: 1.2em;
	letter-spacing: -0.04em;
	color: #444;
	
}
/* this is the main div containing the google map */
#map
{
  width:100%;
  height:100%;
  position: absolute;
  left:0px;
  top:0px;
}
/* Positions all the nav bar */
#controlBoxWrap
{
	position:absolute;
	left:0px;
	top:0px;
	padding:0px 5px 5px 0px;
	margin:0px 0px 0px 5px;
	height:30px;
}
/* covers the whole screen */
#cloak
{
	position:absolute; 
	left:0px; 
	top:0px; 
	width:100%; 
	height:100%; 
	background-color:black; 
	opacity: 0.70;
	-moz-opacity: 0.70; /* older Gecko-based browsers */
	filter:alpha(opacity=30); /* For IE6&7 */
}
/* Shown at the beginning links back to blog and explains the site */
#splash
{
	width:567px; 
	height:411px; 
	position:absolute;
	left:50%;
	margin-left:-283px;
	top:50%;
	margin-top:-205px;
	font-family:sans-serif; 
	background-image:url('../images/splash.png'); 
	background-repeat:no-repeat;
}
/* thats me */
#designerLink
{
	position:absolute; 
	bottom:10px; 
	right:10px;
}
#demoButton
{
	width:100px;
	height:30px;
	background-Image:url('../images/demo.png');
	background-repeat:no-repeat;
	margin:0px 0px 0px 2px;
}
/* styles the content in the navigation drop downs */
div.controlContent
{
	width:268px;
	margin:0px 0px 0px 0px;
	padding:0px 10px 0px 10px;
	overflow:hidden;
	background-color:white;
	border-style:solid;
	border-width:0px 1px 1px 1px;
	border-color:#BBBDC0;
	opacity: 0.90;
	-moz-opacity: 0.90; /* older Gecko-based browsers */
	filter:alpha(opacity=90); /* For IE6&7 */
}
/* styles the navigation headers */
div.controlHeader1
{
	width:290px;
	height:30px;
	margin:0px 4px 0px 0px;
	padding:0px 0px 0px 0px;
	background-image: url('../images/header.png');
	background-repeat: no-repeat;
	background-position: left;
}
/* need to change this before theere was two kinds of header now there is only one */
div.controlHeader2
{
	width:290px;
	height:30px;
	margin:0px 4px 0px 0px;
	padding:0px 0px 0px 0px;
	background-image: url('../images/header.png');
	background-repeat: no-repeat;
	background-position: left;
}
/*style the divs in the active sound list */
div.soundBox
{
	margin:5px;
	padding:5px;
	background-color:b6d6ef;
}

div.conContainer
{
	float:left;	
	
}