/* Arthur and the Invisibles CSS */

body {
width: 100%;
height: 100%;
position: relative;
background: #ffffff;
margin: 0;
}


body#index {
width: 100%;
height: 100%;
position: relative;
background: #000000;
margin: 0;
}


#wrapper {

width: 700px;
height: 100%;
background: #transparent;
margin: 0 auto 0 auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.75em;
position: relative;
font-weight: normal;

}

#wrapper_index {

width: 780px;
height: 100%;
background: #transparent;
margin: 0 auto 0 auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.75em;
position: relative;
font-weight: normal;
text-align: center;

}





/* general bits */


.hide {
display: none;
}

img {
border: none;
}

h1 a {
display: block;
background: transparent url('imgs/arthur_title_white.jpg') top left no-repeat;
height: 117px; 
width: 249px;
}

h3.worksheets {
clear: both;
color: #666600;
margin: 0;
font-size: 1.1em;

}

h3 {

font-size: 1.1em;
margin: 1em 0 0 0;
}


.left_image {

float: left;
}


.right_image {
margin: 0;
float: right;
}

#credits_div {

position: absolute;
top: 675px;
left: 200px;
text-align: center;
}

#credits_div img {
float: left;
padding: 0 2.5em 0 2.5em;

}



#copyright {
clear: both;
padding-top: 2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #404421;;

}

p.learning_objective {

margin-top: 0.2em;

}


ul {

margin-bottom: 0.5em;
}




/* nav */


#index_nav {
margin: 0;
float: left;
width:384px;
text-align: left;
padding-top: 2em;
}

#index_nav ul {
margin: 0;
padding: 0;
}


#index_nav li a#index_nav_teachers {
display: block;
width: 384px; 
height: 48px;
background: transparent url('imgs/index_teachers.gif') top left no-repeat;
}

#index_nav li a#index_nav_teachers:hover {
background-position: 0 -48px;
}

#index_nav li a#index_nav_synopsis {
display: block;
width: 384px; 
height: 43px;
background: transparent url('imgs/index_synopsis.gif') top left no-repeat;
}

#index_nav li a#index_nav_synopsis:hover {
background-position: 0 -43px;
}

#index_nav li a#index_nav_lesson {
display: block;
width: 384px; 
height: 53px;
background: transparent url('imgs/index_lesson.gif') top left no-repeat;
}

#index_nav li a#index_nav_lesson:hover {
background-position: 0 -53px;
}

#index_nav li a#index_nav_characters {
display: block;
width: 384px; 
height: 56px;
background: transparent url('imgs/index_characters.gif') top left no-repeat;
}

#index_nav li a#index_nav_characters:hover {
background-position: 0 -56px;
}


#index_nav li a#index_nav_quiz {
display: block;
width: 384px; 
height: 58px;
background: transparent url('imgs/index_quiz.gif') top left no-repeat;
}

#index_nav li a#index_nav_quiz:hover {
background-position: 0 -58px;
}





#index_nav li span {

display: none;
}







#teachers_nav {
width: 700px;
position: absolute;
top: 56em;
text-align: center;
margin: 0;
}

#synopsis_nav {
width: 700px;
position: absolute;
top: 48em;
text-align: center;
margin: 0;


}

#worksheets_nav {
width: 700px;
position: absolute;
top: 70em;
text-align: center;
margin: 0;


}


#characters_nav {
width: 700px;
position: absolute;
top: 56em;
text-align: center;
margin: 0;


}


#quiz_nav {
width: 700px;
position: absolute;
top: 48em;
text-align: center;
margin: 0;


}




#nav ul {
margin: 0;
padding-top: 30px;


}


#nav li {

display: inline;
font-size: 1.15em;
font-weight: normal;


}



#nav li a {

padding: 0 6px 0 0;
margin: 0 2px 0 0;
width: auto;
border-right: 1px #99CC00 solid;
}


#nav li#last a {
border-right: none;
}




/* link colours */

a:link {
	color: #669900;
}
a:visited {
	color: #666666;
}
a:hover {
	color: #CCCC00;
}
a:active {
	color: #99CC00;
}



/* bottom logo */


#logo {

border: 0;
padding: 20px 0 30px 0;
}


 

/* page specific */

#teachers {

margin-top: 1em;
position: absolute;
height: 30em;

}

h2#title_teachers {
background: transparent url('imgs/title_teachers.gif') top left no-repeat;
height: 17px;
width: 219px;
margin: 0 0 1em 0;
}

h2#title_teachers span, h2#title_synopsis span, h2#title_trailer span, h2#title_lesson span, h2#title_worksheets span, h2#title_characters span {
display: none;
}

#teachers_text {

width: 300px;
padding-right: 70px;
float: left;
background: transparent url('imgs/charact_arthur.jpg') bottom right no-repeat;

}

#synopsis {
margin-top: 1em;
width: 600px;
position: absolute;
height: 25em;

}


h2#title_synopsis {
background: transparent url('imgs/title_film.gif') top left no-repeat;
height: 15px;
width: 201px;
margin: 0 0 1em 0;
}

h2#title_trailer {
background: transparent url('imgs/title_trailer.gif') top left no-repeat;
height: 17px;
width: 224px;
margin: 0 0 1em 0;
}


#worksheets_outer {

background: transparent url('imgs/arthur_anim_2.gif') bottom right no-repeat;
margin: 0;
width: 500px;
position: absolute;
height: 60em;
padding-right: 150px;

}



#worksheets {

background: transparent url('imgs/arthur_anim_1.gif') top left no-repeat;
margin-top: 1em;
width: 250px;
padding-right: 50px;
position: absolute;
height: 60em;
padding-left: 150px;

}


h2#title_lesson {
background: transparent url('imgs/title_lesson.gif') top left no-repeat;
height: 17px;
width: 180px;
margin: 0 0 1em 0;
}

h2#title_worksheets {
background: transparent url('imgs/title_sheets.gif') top left no-repeat;
height: 17px;
width: 163px;
margin: 0 0 1em 0;
}


#characters {
margin-top: 1em;
width: 700px;
position: absolute;
height: 40em;
overflow: auto;

}


h2#title_characters {
background: transparent url('imgs/title_characters.gif') top left no-repeat;
height: 17px;
width: 216px;
margin: 0 0 1em 0;
}

.character_div {
clear: both;
width: 600px;
height: 17em;
margin: 0 0 3em 0;
}

.character_div p {

margin: 0.5em 0 1em 0;
}



.character_image {
height: 17em;
margin: 0;
float: left;
text-align: center;
width: 200px;
}

#quiz {

background: transparent url('imgs/arthur_anim3.gif') top left no-repeat;
margin-top: 1em;
width: 700px;
padding-left: 230px;
position: absolute;
height: 30em;

}





/* pdf links */


.pdf_div {
margin: 0;
position: relative;
width: 300px;

}

.pdf {
display: block;
top: 3em;
left: 315px;
margin: 1em 0 0 0;
background: transparent url('imgs/pdf.gif') top right no-repeat;
width: 32px;
height: 32px;
position: absolute;
}

.pdf2 {
display: block;
top: 1.5em;
left: 315px;
margin: 0.75em 0 0 0;
background: transparent url('imgs/pdf.gif') top right no-repeat;
width: 32px;
height: 32px;
position: absolute;
}



.pdf span, .pdf2 span {
display: none;
}