/* CSS Document */

body {
margin: 0px;
padding: 0px;
background:url(../GRAPHICS/background.gif);
}

#wrapper {
position: absolute;
left: 50%;
top: 50%;
margin-top: -260px;
margin-left: -384px;
background:url(../GRAPHICS/panelbackground.gif);
width: 768px;
height: 520px;
}

.overlay #wrapper {
background:url(../GRAPHICS/overlay-panel.gif);
}

.overlayBlank #wrapper {
background:url(../GRAPHICS/overlay-panelBlank.jpg);
}

.overlayBlankResource #wrapper {
background:url(../GRAPHICS/overlay-panelBlankResource.jpg);
}

.overlayBlankHelp #wrapper {
background:url(../GRAPHICS/overlay-panelBlankHelp.jpg);
}

.overlayIntro #wrapper {
background:url(../GRAPHICS/overlay-panelBlankIntro.jpg);
}


#index {
margin: 50px;
}

#index a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
#index a:hover{text-decoration:underline;}

#index img {position: absolute; margin-left: -10000px;}

/**********  BUTTONS  **************/

#nav {
position: absolute;
width: 400px;
height: 40px;
top: 7px;
right: 85px;}

a#help {
float: right;
display: block;
text-decoration: none;
width: 44px;
height: 40px;
background-image: url(../GRAPHICS/nav-help.gif);
background-position: 0px 40px;}
a#help:hover {background-position: 0px 0px;}

a#resources {
float: right;
display: block;
text-decoration: none;
width: 71px;
height: 40px;
background-image: url(../GRAPHICS/nav-resources.gif);
background-position: 0px 40px;}
a#resources:hover {background-position: 0px 0px;}

a#menu {
float: right;
display: block;
text-decoration: none;
width: 55px;
height: 40px;
background-image: url(../GRAPHICS/nav-menu.gif);
background-position: 0px 40px;}
a#menu:hover {background-position: 0px 0px;}

a#exit {
float: right;
display: block;
text-decoration: none;
width: 47px;
height: 40px;
background-image: url(../GRAPHICS/nav-exit.gif);
background-position: 0px 40px;}
a#exit:hover {background-position: 0px 0px;}

#back a{
position: absolute;
display: block;
width: 63px;
height: 68px;
left: 625px;
top: 441px;
background-image: url(../GRAPHICS/nav-back.gif);
background-position: 0px 68px;
font-size: 0px;}
#back a:hover {background-position: 0px 0px;}

#back a img {
width: 63px;
height: 68px;
border: none;
}

#next a{
position: absolute;
display: block;
width: 63px;
height: 68px;
left: 688px;
top: 441px;
background-image: url(../GRAPHICS/nav-next.gif);
background-position: 0px 68px;
font-size: 0px;
}
#next a:hover {background-position: 0px 0px; cursor:pointer;}

#next a img {
width: 63px;
height: 68px;
border: none;
}



#overlayBack #next a, #overlayBackExp #next a{
position: absolute;
display: block;
width: 59px;
height: 48px;
left: 674px;
top: 433px;
background-image: url(../GRAPHICS/nav-over-close.gif);
background-position: 0px 48px;
font-size: 0px;
}
#overlayBack #next a:hover, #overlayBackExp #next a:hover {background-position: 0px 0px;}

#overlayBack #next a img, #overlayBackExp #next a img {
width: 59px;
height: 48px;
border: none;
}


#overlayCont #next a, #overlayContExp #next a{
position: absolute;
display: block;
width: 59px;
height: 48px;
left: 674px;
top: 433px;
background-image: url(../GRAPHICS/nav-over-next.gif);
background-position: 0px 48px;
font-size: 0px;
}
#overlayCont #next a:hover, #overlayContExp #next a:hover {background-position: 0px 0px;}

#overlayCont #next a img, #overlayContExp #next a img {
width: 59px;
height: 48px;
border: none;
}


a span {
display:block;
margin-top: 24px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
text-align: center;
}

a:hover span {color: #333333;}

/**********  GRAPHIC  **************/

#spotgraphic {
position: absolute;
left: 12px;
top: 29px;
z-index: 500;
}

.overlay #spotgraphic{
position: absolute;
width: 382px;
height: 425px;
left: 37px;
top: 56px;
z-index: 500;
}

/**********  CONVERSATION STYLES  **************/

#textarea .question {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #C59A85;
	padding-top: 8px;
	padding-bottom: 15px;
	cursor: default;
}

#conversation #textarea a {
	position: relative;
	display:block;
	width: 80%;
	color:#663300;
	text-decoration: none;
	background-image: url(../GRAPHICS/conversationbullet.gif);
	background-repeat: no-repeat;
	background-position: 0px -183px;
	padding-left: 30px;
}

#conversation #textarea a:hover {
	color: #984B01;
	text-decoration: underline;
	background-position: 0px 0px;
}

/**********  MULTISELECT BUTTONS  **************/

#seeanswersbutton a{
position: absolute;
display: block;
width: 261px;
height: 73px;
left: 463px;
top: 387px;
background-image:url(../GRAPHICS/multiselectbutton.gif);
background-position: 0px 0px;
font-size: 0px;
z-index: 8000;
}

#seeanswersbutton a img{
width: 261px;
height: 73px;
border:none;
}


#seeanswersbutton a:hover{
background-position: 0px 73px;}

#multiselect #textarea p {
padding-left: 25px;
}

#multiselect #textarea p.question {
padding-left: 0px;
}

#multiselect #textarea input {
float: left;
margin-left: -25px;
height: 13px;
width: 13px;
}

/**********  EXPLORE ITEMS  **************/

a.exploreitem {
position: absolute;
background: none;
z-index: 1000;
}

a.exploreitem img {
z-index: 1000;
border: 0;
}

a.exploreitem span{
position: absolute;
width: 17px;
height: 17px;
margin: 0px;
padding: 0px;
top: 3px;
left: 3px;
background:url(../GRAPHICS/explorearrow.gif);
z-index: 2000;
}

a.exploreitem:visited span{
background:url(../GRAPHICS/explorecheck.gif);
}

/***********************/


#explore2 #button1 {
left: 141px;
top: 127px;
}

#explore2 #button2 {
left: 141px;
top: 238px;
}

/***********************/


#explore3 #button1 {
left: 141px;
top: 77px;
}

#explore3 #button2 {
left: 141px;
top: 188px;
}

#explore3 #button3 {
left: 141px;
top: 299px;
}


/***********************/

#explore4 #button1 {
left: 61px;
top: 127px;
}

#explore4 #button2 {
left: 227px;
top: 127px;
}

#explore4 #button3 {
left: 61px;
top: 238px;
}

#explore4 #button4 {
left: 227px;
top: 238px;
}

/***********************/

#explore5 #button1 {
left: 61px;
top: 77px;
}

#explore5 #button2 {
left: 227px;
top: 77px;
}

#explore5 #button3 {
left: 61px;
top: 188px;
}

#explore5 #button4 {
left: 227px;
top: 188px;
}

#explore5 #button5 {
left: 61px;
top: 299px;
}

/***********************/

#explore6 #button1 {
left: 61px;
top: 77px;
}

#explore6 #button2 {
left: 227px;
top: 77px;
}

#explore6 #button3 {
left: 61px;
top: 188px;
}

#explore6 #button4 {
left: 227px;
top: 188px;
}

#explore6 #button5 {
left: 61px;
top: 299px;
}

#explore6 #button6 {
left: 227px;
top: 299px;
}



/**********  AUDIO PLAYER  **************/


.expertaudio {
float: right;
width: 80px;
height: auto;
background: #FFFFFF;
border: 3px solid #FFFFFF;
margin: 5px;
}

.expertaudio p{
position: relative;
width: 80px;
}

.expertaudio img {
padding: 0px;
margin: 0px;
}

.expertaudio .playercontrols {
position: relative;
width: 80px;
height: 26px;
background: #000000;
margin: 0px;
_margin-top: -3px;
padding: 0px;
overflow: hidden;
}

.expertaudio .playercontrols embed {
width: 80px;
height: 26px;
}

.expertaudio a.scriptToggle {
position: relative;
display: block;
width: 80px;
height: auto;
margin-top: 2px;
text-align: center;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#222222;
background:#AAAAAA;
}

.expertaudio a.scriptToggle:hover {
color: #FFFFFF;}

#audioplayer {
	position: absolute;
	top: 465px;
	left: 465px;
	height: 17px;
	width: 134px;
}

.overlay #audioplayer {
position: absolute;
top: 444px;
left: 520px;
}

.overlay .expertaudio #audioplayer {
position: relative;
top: 0px;
left: 0px;
width: 80px;
}

#overlayBackExp #audioplayer, #overlayContExp #audioplayer {
position: relative;
top: 0px;
left: 0px;
}

#player1 {
margin: 0px;
margin-top: 0px;
padding: 0px;
height: auto;
}

#player2 {
margin: 0px;
margin-top: 0px;
padding: 0px;
height: auto;
}

#player3 {
margin: 0px;
margin-top: 0px;
padding: 0px;
height: auto;
}

#player4 {
margin: 0px;
margin-top: 0px;
padding: 0px;
height: auto;
}

#player5 {
margin: 0px;
margin-top: 0px;
padding: 0px;
height: auto;
}


/**********  TEXT  **************/

#textarea {
position:absolute;
left: 467px;
top: 67px;
width: 271px;
height: 336px;
color: #222222;
font-family: Verdana, Arial, Helvetica, sans-serif;
overflow: auto;
}


.overlay #textarea {
left: 440px;
top: 80px;
width: 270px;
height: 340px;
}

h1 {
font-size: 16px;
cursor: default;
}

#textarea p {
font-size: 13px;
cursor: default;
}

/********  AUDIO SCRIPT  ***********/

#audioToggle {
position: absolute;
width: 300px;
height: 30px;
top: 465px;
left: 155px;
text-align: right;
z-index: 600;
}

.overlay #audioToggle {
top: 444px;
left: 215px;
}

#audioToggle p{
position: absolute;
right: 0px;
height: 20px;
width: auto;
padding: 0px;
margin: 0px;
background-image: url(../GRAPHICS/audio-toggle-background.gif);
background-repeat: no-repeat;
background-position: right 0px;
}

.overlay #audioToggle p{
background-image: url(../GRAPHICS/audio-toggle-b-overlay.gif);}

#audioToggle p a{
position: relative;
top: 2px;
padding-left: 10px;
padding-right: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #2C2619;
text-decoration: none;
font-size: 11px;
}

#audioToggle p a:hover{
color: #FFFFFF;
}

#audioToggle p span.image{
position: absolute;
display:inline;
width: 1px;
height: 20px;
background-image: url(../GRAPHICS/audio-toggle-backside.gif);
background-repeat: no-repeat;
}

.overlay #audioToggle p span.image{
background-image: url(../GRAPHICS/audio-toggle-bside-over.gif);
}

#extraStuff {
position: absolute;
left: 50%;
top: 50%;
margin-top: 270px;
margin-left: -329px;
padding-bottom: 50px;
background: none;
width: 658px;
}

#readDocument {
float: right;
cursor: pointer;
}


#audioScript {}

#audioScript .header {
padding: 5px;
margin: 0px;
background-image: url(../GRAPHICS/audio-head-background.gif);
border: 1px solid #949784;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#audioScript .scriptText {
width: auto;
height: 100px;
padding: 15px;
margin: 0px;
background-image: url(../GRAPHICS/audio-body-background.gif);
border: 1px solid #949784;
border-top: none;
overflow: auto;
font-size: 12px;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;}

#document {
	background:url(../GRAPHICS/paper.jpg);
	padding-left: 60px;
	padding-right: 60px;
	margin-bottom: 30px;
	border: 1px solid #000000;
}

#document .header{
font-size:18px;
padding-top: 50px;
font-weight: bold;
}

#document .scriptText {
padding-bottom: 50px;
}

.hiddenScript, .hiddenDocument { visibility: hidden; height: 0px;}

.visibleScript, .visibleDocument { visibility: visible; height: inherit;}


/************* MENU *************/

#mainNavigation {
	position:absolute;
	left: 444px;
	top: 75px;
	width: 278px;
	height: 379px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#mainNavigation a {
	text-decoration:none;
	color:#333300;

}

#mainNavigation a:hover {
	text-decoration:none;
	color:#CC9900;
}

/************* BLANKS *************/

#blankNavigation {
	position:absolute;
	left: 326px;
	top: 75px;
	width: 384px;
	height: 354px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	overflow: auto;
}

#blankNavigation a {
	text-decoration:none;
	color:#333300;

}

#blankNavigation a:hover {
	text-decoration:none;
	color:#CC9900;
}

#nextBlank a{
position: absolute;
display: block;
width: 30px;
height: 30px;
left: 688px;
top: 441px;
font-size: 0px;
}
#nextBlank a:hover {cursor:pointer;}

#nextBlank a img {
width: 35px;
height: 30px;
border: none;
}

#nextIntro a{
position: absolute;
display: block;
width: 59px;
height: 47px;
left: 670px;
top: 433px;
background-image: url(../GRAPHICS/nav-nextIntro.gif);
background-position: 0px 47px;
font-size: 0px;
}
#nextIntro a:hover {background-position: 0px 0px; cursor:pointer;}

#nextIntro a img {
width: 59px;
height: 47px;
border: none;
}