/* GLOBAL */

html, body {
	padding: 0; 
	margin: 0; 
	width: 100%; 
	height: 100%; 
	font: 16px/19px Helvetica, Arial, sans-serif;
	}
	
a, img {
	border: 0; 
	text-decoration: none;}
	
ul, li {
	list-style: none; 
	margin: 0; 
	padding: 0;}
	
#btnDisable {width: 100%; height: 100%; position: fixed; top:0; bottom: 0; z-index: 999; background: #000; opacity: 0.5; display: none;}
#btnDisable2 {width: 100%; height: 100%; position: fixed; top:0; bottom: 0; z-index: 999; background: #000; opacity: 0.8; display: none;}


/* HEADER */

.topNav {
	position: fixed; 
	top:0; 
	left:0; 
	width: 100%; 
	height: 66px; 
	background: url(../img/header_bg.gif) top repeat-x; 
	display: block; 
	z-index: 9999999;}
	
#activityLogo {
	width: 418px; 
	height: 19px; 
	background: url(../img/activityLogo.gif); 
	text-indent: -999999px; 
	display: block; 
	float:left; 
	margin: 28px 0 0 13px;}

#SmithsonianLogo {
	width: 172px; 
	height: 20px; 
	background: url(../img/SmithsonianLogo.gif); 
	text-indent: -999999px; 
	display: block; 
	float:right; 
	margin: 27px 13px 0 0 ;}


/* FOOTER */

.btmNav {
	position: fixed; 
	bottom:0; 
	left:0; 
	width: 100%; 
	height: 38px; 
	background: url(../img/footer_bg.gif) top repeat-x; 
	display: block; 
	z-index: 9999999; 
	color: #fff; 
	font-size: 10px;}

.btmNav a {
	color: #fff; 
	text-transform: uppercase;}

.btmNav .posLeft {
	float: left; 
	margin: 13px 0 0 13px;}

.btmNav .posRight {
	float: right; 
	margin: 13px 13px 0 0;}
	
/* NAV BUTTONS */

nav {position: fixed; top: 68px; width: 100%; display: none;}

.txtBtn {
	padding: 13px; 
	font: 16px Arial, sans-serif; 
	text-transform: uppercase; 
	font-weight: bold; 
	display: block;
	letter-spacing: 1px;
	float:left;}

#introTxt {background: #ffe380;}
#introTxt a {color: #f1592a;}
#introTxt a:hover {color: #000;}

#storyTxt {background: #298c98;}
#storyTxt a {color: #fff;}
#storyTxt a:hover {color: #000;}

#meaningTxt {background: #f1592a;}
#meaningTxt a {color: #fff;}
#meaningTxt a:hover {color: #000;}

a:hover {color: #000;}

.leftBtn {
	text-indent: -999999px;
	display: block;
	width: 45px;
	height: 45px;
	background: url(../img/nav_sprites.gif) 0 0 no-repeat;
}

.leftBtn:hover {
	background: url(../img/nav_sprites.gif) 0 -45px no-repeat;
}

.rightBtn {
	text-indent: -999999px;
	display: block;
	width: 45px;
	height: 45px;
	background: url(../img/nav_sprites.gif) -45px 0 no-repeat;
}

.rightBtn:hover {
	background: url(../img/nav_sprites.gif) -45px -45px no-repeat;
}


.upBtn {
	text-indent: -999999px;
	display: block;
	width: 45px;
	height: 45px;
	background: url(../img/nav_sprites.gif) -270px 0 no-repeat;
}

.upBtn:hover {
	background: url(../img/nav_sprites.gif) -270px -45px no-repeat;
}

.downBtn {
	text-indent: -999999px;
	display: block;
	width: 45px;
	height: 45px;
	background: url(../img/nav_sprites.gif) -315px 0 no-repeat;
}
.downBtn:hover {
	background: url(../img/nav_sprites.gif) -315px -45px no-repeat;
}

.closeBtn {
	text-indent: -999999px;
	display: block;
	width: 45px;
	height: 45px;
	background: url(../img/nav_sprites.gif) -225px 0 no-repeat;
	}
	
a.closeBtn:hover {
	background: url(../img/nav_sprites.gif) -225px -45px no-repeat;
	}


.zoomBtn {
	text-indent: -999999px;
	display: block;
	width: 45px;
	height: 45px;
	background: url(../img/nav_sprites.gif) -135px 0 no-repeat;
}

.zoomBtn:hover {
	background: url(../img/nav_sprites.gif) -135px -45px no-repeat;
}

.zoomInBtn {
	text-indent: -999999px;
	display: block;
	width: 45px;
	height: 45px;
	background: url(../img/nav_sprites.gif) -90px 0 no-repeat;
	z-index: 9999;
}

.zoomInBtn:hover {
	background: url(../img/nav_sprites.gif) -90px -45px no-repeat;
}

.helpBtn {
	text-indent: -999999px;
	display: block;
	width: 45px;
	height: 45px;
	background: url(../img/nav_sprites.gif) -180px 0 no-repeat;
	z-index: 999;
}

.helpBtn:hover {
	background: url(../img/nav_sprites.gif) -180px -45px no-repeat;
}

nav .leftBtn {position: absolute; right: 150px;}
nav .rightBtn {position: absolute; right: 105px;}
nav .zoomBtn {position: absolute; right: 60px;}
nav .zoomInBtn {position: absolute; right: 60px;}
nav .helpBtn {position: absolute; right: 0;}

/* TITLE SCREEN */

.gameIntro {
	width: 100%; height: 100%; position: fixed; top:0; left: 0; display: block; z-index: 999999; background: #ccc;
}

.titleBG {width: 100%; display: none;}

.titleBase {
	width: 454px; height: 349px; position: absolute; top: 50%; left: 50%; margin: -175px 0 0 -227px; background: url(../img/title_base.gif) no-repeat; padding: 12px 12px 20px 24px; display: none;
}

.titleTxt {display: none;}


/* MURAL AREA */

.muralArea {
	height: 100%; 
	display:block;
	z-index: -999999;}
	
img[usemap] {
	border: none; 
	width: auto; 
	height: 100%;}

/* TEXT DETAIL */

.zoomOut {
	width: 100%; height: 75%; position: fixed; top: 25%; left: 0; display: block; z-index: 9999; display: none; color: #fff; text-align: center;
}

.zoomOut img {
	border: none;
	width: 100%; 
	height: auto;}
	
	

.titleTxt, .detail .textframe {margin-top: 10px;}

/*.textframe {display: block; width: 500px;  height: 450px; overflow-y: hidden; float:left; margin: 0 20px 0 20px; margin-top: 10px; font-size: 13px; line-height: 18px;}*/

.textframe {
    display: block;
    overflow-x: hidden; /* only one item at time will be visible */
    width: 500px;
    height: 450px;
    float:left;
	margin-left: 20px;
    font-size: 16px; line-height: 19px;
}

.textGroup{
	display:block;
	width: 475px;
	padding-right: 100px;
	float:left;
}


.textEnd {display: none;}

.upBtn {position: absolute; top: 90px; right: 20px;}
.downBtn {position: absolute; top: 135px; right: 20px;}
	
/*	SYMBOL DETAIL */

.detail {
	width: 900px; 
	height: 460px; 
	padding: 20px; 
	background: #ffe380; 
	display: block; 
	position: fixed; 
	top: 50%; 
	left: 50%; 
	margin: -250px 0 0 -450px; 
	display:none;
	z-index: 9999;
	opacity: 0.9;}
	
.detail .closeBtn {
	position: absolute;
	top: 20px;
	right: 20px;}

.detail img{float:left;}	
	
.detail h3 {
	color: #298c98;
	font-size: 24px;
	height: 40px;
	background: url(../img/nav_sprites.gif) left bottom repeat-x;
	float:left;
	margin: 6px 0 0 20px;}
	
.detail .text {
	width: 275px;
	position: absolute;
	right: 20px;
	bottom: 20px;}
	
/* HELP SCREEN */

.helpScrn {color: #fff; z-index: 10000; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; }

.helpScrn .closeBtn {position: fixed; top: 70px; right: 0px; z-index: 9999999; display: block;}
.helpScrn li {z-index: 9999999; position: fixed;}

.help1 {top: 110px; left:  10px; width: 300px;}
.help2 {top: 70px;  right: 160px; width: 300px;}
.help3 {top: 50%; left: 50%; width: 300px; height: 50px; margin: -25px 0 0 -150px;}
.help4 {top: 110px; right: 0; width: 150px;}


/* NEW STYLES 2012.09.28 */


#intro {display:block; z-index: 1000;}
nav {display:block;}
#btnDisable {display: block;}
.hideDesktop {position: fixed; top: 68px; right: 115px; color: #fff; font-weight: normal; display: none;}

	
/* IPAD ONLY */

@media only screen and (device-width: 768px) {
	.hideMobile {display:none;}
	.hideDesktop {display: block;)
}