/* MAIN CONTAINING DIV FOR SLIDER */

#timeline{
height:440px;
overflow:hidden;
position:relative;
background:url('../images/dot.gif') left 45px repeat-x;
border-top:1px solid #A52A2A;
border-bottom:1px solid #A52A2A;
}

#timeline a{
border-bottom:none !important;
}

/* TIMELINE SCREEN SIZES STYLES */

@media screen and (min-width: 200px) {
#timeline{width:95%;}
}

@media screen and (min-width: 900px) {
#timeline{max-width:750px;}
}

@media screen and (min-width: 1200px) {
#timeline{width:750px;}
}

/* TOP ROW CONTAINING SLIDING NAV ITEMS */

ul#dates li a{
color:#A52A2A;
text-decoration:none;
-webkit-transition:0.5s;
transition:0.5s;
}

ul#dates li a:hover,
ul#dates li a.selected{
color: #CC9900;
}

#dates{
width:800px;
height:60px;
overflow:hidden;
}

#dates li{
list-style:none;
float:left;
height:50px;
text-align:center;
background:url('../images/biggerdot.png') center bottom no-repeat;
}

#dates a{
line-height:38px;
padding-bottom:10px;
}

/* DATES DIV SCREEN SIZES */

@media screen and (min-width: 200px) {
ul#dates {position:relative;right:80px;}
ul#dates li{font-size:0.95em !important;width:60px;}
ul#dates a.selected{font-size:1.1em;}
}

@media screen and (min-width: 320px) {
ul#dates {position:relative;right:130px;}
ul#dates li{font-size:1.05em !important;width:70px;}
ul#dates a.selected{font-size:1.2em;}
}

@media screen and (min-width: 480px) {
ul#dates {position:relative;right:100px;}
ul#dates li{font-size:1.15em !important;width:80px;}
ul#dates a.selected{font-size:1.3em;}
}

@media screen and (min-width: 600px) {
ul#dates {position:relative;right:140px;}
ul#dates li{font-size:1.05em !important;width:80px;}
ul#dates a.selected{font-size:1.2em;}
}

@media screen and (min-width: 768px) {
ul#dates {position:relative;right:120px;}
ul#dates li{font-size:1.15em !important;width:90px;}
ul#dates a.selected{font-size:1.3em;}
}

@media screen and (min-width: 900px) {
ul#dates {position:relative;right:80px;}
ul#dates li{font-size:1.15em !important;width:100px;}
ul#dates a.selected{font-size:1.3em;}
}

@media screen and (min-width: 1200px) {
ul#dates {position:relative;right:15px;}
ul#dates li{font-size:1.15em !important;width:100px;}
ul#dates a.selected{font-size:1.3em;}
}

/* SECOND ROW CONTAINING MAIN CONTENT */

#issues{
width:600px;
height:420px;
overflow:hidden;
}

#issues li{
width:700px;
height:350px;
list-style:none;
float:left;
}

#issues li.selected{
width:700px;
height:350px;
list-style:none;
float:left;
}

#issues li img{
float:left;
margin:10px 25px 10px 10px;
background:transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */      
zoom:1;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out; 
transition:all 2s ease-in-out;
-webkit-transform:scale(0.7,0.7);
-moz-transform:scale(0.7,0.7);
-o-transform:scale(0.7,0.7);
-ms-transform:scale(0.7,0.7);
transform:scale(0.7,0.7);
max-width:320px;
max-height:295px;
}

#issues li h1{
color:#ffcc00;
margin:4px 0;
text-shadow:#000 1px 1px 2px;
line-height:0.9em;
}

#issues li p{
line-height:1.1em;
}

/* ISSUES DIV SCREEN SIZE */

@media screen and (min-width: 200px) {
#issues li h1{font-size:1.6em;}
#issues li p{width:20%;font-size:0.9em;}
#issues li img{margin:10px -30px 10px -58px;max-width:170px;}
#issues li.selected img{-webkit-transform:scale(0.55,0.55);-moz-transform:scale(0.55,0.55);-o-transform:scale(0.55,0.55);transform:scale(0.55,0.55);}
img.speaker-icon{width:18%;height:auto;max-width:137px;}
}

@media screen and (min-width: 260px) {
#issues li p{width:24%;}
#issues li img{margin:10px -30px 10px -58px;max-width:180px;}
}

@media screen and (min-width: 320px) {
#issues li h1{font-size:1.8em;}
#issues li p{width:35%;font-size:0.92em;}
#issues li img{margin:10px -25px 10px -48px;max-width:170px;}
#issues li.selected img{-webkit-transform:scale(0.65,0.65);-moz-transform:scale(0.65,0.65);-o-transform:scale(0.65,0.65);transform:scale(0.65,0.65);}
img.speaker-icon{width:18%;height:auto;max-width:137px;}
}

@media screen and (min-width: 480px) {
#issues li h1{font-size:2.3em;}
#issues li p{width:50%;font-size:0.95em;}
#issues li img{margin:10px -10px 10px -30px;max-width:270px;}
#issues li.selected img{-webkit-transform:scale(0.8,0.8);-moz-transform:scale(0.8,0.8);-o-transform:scale(0.8,0.8);transform:scale(0.8,0.8);}
img.speaker-icon{width:18%;height:auto;max-width:137px;}
}

@media screen and (min-width: 600px) {
#issues li h1{font-size:2.0em;}
#issues li p{width:48%;font-size:1em;}
#issues li img{margin:10px -10px 10px -26px;max-width:250px;}
#issues li.selected img{-webkit-transform:scale(0.8,0.8);-moz-transform:scale(0.8,0.8);-o-transform:scale(0.8,0.8);transform:scale(0.8,0.8);}
img.speaker-icon{width:18%;height:auto;max-width:137px;}
}

@media screen and (min-width: 768px) {
#issues li h1{font-size:2.4em;}
#issues li p{width:60%;font-size:1em;}
#issues li img{margin:10px 0px 10px -15px;}
#issues li.selected img{-webkit-transform:scale(0.9,0.9);-moz-transform:scale(0.9,0.9);-o-transform:scale(0.9,0.9);transform:scale(0.9,0.9);}
img.speaker-icon{width:18%;height:auto;max-width:137px;}
}

@media screen and (min-width: 900px) {
#issues li h1{font-size:2.6em;}
#issues li p{width:70%;font-size:1.1em;}
#issues li img{margin:10px 10px 10px 3px;}
#issues li.selected img{-webkit-transform:scale(1.0,1.0);-moz-transform:scale(1.0,1.0);-o-transform:scale(1.0,1.0);transform:scale(1.0,1.0);}
img.speaker-icon{width:20%;height:auto;max-width:137px;}
}

@media screen and (min-width: 1200px) {
#issues li h1{font-size:2.6em;}
#issues li p{width:90%;font-size:1.15em;}
#issues li img{margin:10px 25px 10px 10px;}
#issues li.selected img{-webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);transform:scale(1.1,1.1);}
img.speaker-icon{width:20%;height:auto;max-width:137px;}
}

/* FORM SUBMIT BUTTON ON ALL QUIZZES */

div#timeline ul#issues li p input[type=button]{
background-color:#ffcc00;
color:#A52A2A;
height:30px;
border-radius:10px;
border:1px solid #999;
cursor:pointer;
box-shadow: 2px 2px 4px #aaa;
font-size:1.1em;
}

/* FORM SUBMIT BUTTON SCREEN SIZES */

@media screen and (min-width: 200px) {
div#timeline ul#issues li p input[type=button]{width:120px;}
}

@media screen and (min-width: 320px) {
div#timeline ul#issues li p input[type=button]{width:140px;}
}

@media screen and (min-width: 480px) {
div#timeline ul#issues li p input[type=button]{width:150px;}
}

@media screen and (min-width: 600px) {
div#timeline ul#issues li p input[type=button]{width:150px;}
}

@media screen and (min-width: 768px) {
div#timeline ul#issues li p input[type=button]{width:170px;}
}

/* STYLES ONLY FOR PAGE 1, LEARN */

div.learn #issues li img.speaker-icon{
opacity:0.3;
cursor:pointer;
transform:none;
transition:all 2s ease-in-out;
}

div.learn #issues li img.speaker-icon:hover{
opacity:0.7;
cursor:pointer;
transition:all 2s ease-in-out;
}

div.learn ul#issues li h1{
margin-bottom:28px;
}

/* STYLES ONLY FOR PAGE 2, READ */

div.read ul#issues li p.choice{
color:#ffcc00;
}

div.read ul#issues li input[type=button]{
border-radius:0.2em;
position:relative;
}

/* READ PAGE SCREEN SIZES */

@media screen and (min-width: 200px) {
div.read ul#issues li p.choice{margin-left:80px;font-size:1em;}
div.read ul#issues li input[type=button]{left:80px;}
}

@media screen and (min-width: 320px) {
div.read ul#issues li p.choice{margin-left:95px;}
div.read ul#issues li input[type=button]{left:95px;}
}

@media screen and (min-width: 480px) {
div.read ul#issues li p.choice{margin-left:220px;font-size:1.2em;}
div.read ul#issues li input[type=button]{left:220px;}
}

@media screen and (min-width: 600px) {
div.read ul#issues li p.choice{margin-left:200px;}
div.read ul#issues li input[type=button]{left:200px;}
}

@media screen and (min-width: 768px) {
div.read ul#issues li p.choice{margin-left:250px;}
div.read ul#issues li input[type=button]{left:250px;}
}

@media screen and (min-width: 900px) {
div.read ul#issues li p.choice{margin-left:300px;font-size:1.4em;}
div.read ul#issues li input[type=button]{left:300px;}
}

@media screen and (min-width: 1200px) {
div.read ul#issues li p.choice{margin-left:320px;}
div.read ul#issues li input[type=button]{left:320px;}
}

/* STYLES FOR 3RD PAGE, LISTEN */

#issues li img.image-hear{
margin:0px;
float:none;
position:relative;
top:20px;
}

div.listen ul#issues input{
position:relative;
bottom:30px;
}

div.listen #issues li.selected img.speaker-icon{
transition:none;
opacity:0.3;
transtion:opacity 1s ease-out;
}

div.listen #issues li.selected img.speaker-icon:hover{
opacity:0.8;
transition:opacity 1s ease-in-out;
cursor:pointer;
}

div.listen ul#issues li p input[type=button]{
margin-top:60px;
position:relative;
}

/* LISTEN PAGE SCREEN SIZES */

@media screen and (min-width: 200px) {
div.listen #issues img.speaker-icon{margin-left:70px;}
div.listen #issues li.selected img.speaker-icon{margin:50px 0px 50px -45px;}
div.listen ul#issues li img.image-hear{top:30px;right:35px;transform:scale(0.35,0.35);}
div.listen ul#issues li input[type=button]{right:180px;}
div.listen ul#issues li h1,div.listen ul#issues li p{margin-left:10px;}
div.listen ul#issues input{margin-left:-30px;}
div.listen ul#issues input.choice-2{margin-left:-75px;}
div.listen ul#issues li img.image-hear{margin-left:-20px;}
div.listen ul#issues li p input[type=button]{margin:40px 0 0 230px;position:relative;}
}

@media screen and (min-width: 320px) {
div.listen ul#issues li input[type=button]{right:150px;}
div.listen #issues li.selected img.speaker-icon{margin:50px 0px 50px -35px;}
div.listen ul#issues li img.image-hear{right:40px;transform:scale(0.4,0.4);}
div.listen ul#issues input{margin-left:-40px;}
div.listen ul#issues input.choice-2{margin-left:-75px;}
div.listen ul#issues li img.image-hear{margin-left:0px;}
div.listen ul#issues li p input[type=button]{margin:40px 0 0 190px;position:relative;}
}

@media screen and (min-width: 480px) {
div.listen ul#issues li input[type=button]{right:110px;}
div.listen #issues li.selected img.speaker-icon{margin:50px 0px 50px -25px;}
div.listen ul#issues li img.image-hear{right:40px;transform:scale(0.75,0.75);}
div.listen ul#issues input{margin-left:-10px;}
div.listen ul#issues input.choice-2{margin-left:-55px;}
div.listen ul#issues li img.image-hear{margin-left:15px;}
div.listen ul#issues li p input[type=button]{margin:40px 0 0 210px;position:relative;}
}

@media screen and (min-width: 600px) {
div.listen ul#issues li input[type=button]{right:110px;}
div.listen #issues li.selected img.speaker-icon{margin:50px 0px 50px -25px;}
div.listen ul#issues li img.image-hear{right:40px;transform:scale(0.65,0.65);}
div.listen ul#issues input{margin-left:0px;}
div.listen ul#issues input.choice-2{margin-left:-45px;}
div.listen ul#issues li img.image-hear{margin-left:5px;}
div.listen ul#issues li p input[type=button]{margin:40px 0 0 190px;position:relative;}
}

@media screen and (min-width: 768px) {
div.listen ul#issues li input[type=button]{right:70px;}
div.listen #issues li.selected img.speaker-icon{margin:50px 10px 50px -10px;}
div.listen ul#issues li input[type=radio],div.listen ul#issues li img.image-hear{right:40px;transform:scale(0.9,0.9);}
div.listen ul#issues input{margin-left:20px;}
div.listen ul#issues input.choice-2{margin-left:10px;}
div.listen ul#issues li img.image-hear{margin-left:-10px;}
div.listen ul#issues li p input[type=button]{margin:60px 0 0 60px;position:relative;}
}

@media screen and (min-width: 900px) {
div.listen ul#issues li input[type=button]{right:40px;}
div.listen #issues li.selected img.speaker-icon{margin:50px 20px 50px 5px;}
div.listen ul#issues li h1,div.listen ul#issues li p{margin-left:210px;}
div.listen ul#issues li input[type=radio],div.listen ul#issues li img.image-hear{right:30px;transform:scale(1.0,1.0);}
div.listen ul#issues input{margin-left:10px;}
div.listen ul#issues input.choice-2{margin-left:40px;}
div.listen ul#issues li img.image-hear{margin-left:0px;}
div.listen ul#issues li p input[type=button]{margin:80px 0 0 -20px;position:relative;}
}

@media screen and (min-width: 1200px) {
div.listen ul#issues li input[type=button]{right:10px;}
div.listen #issues li.selected img.speaker-icon{margin:50px 20px 50px 5px;}
div.listen ul#issues li input[type=radio],div.listen ul#issues li img.image-hear{right:30px;transform:scale(1.1,1.1);}
div.listen ul#issues input{margin-left:10px;}
div.listen ul#issues input.choice-2{margin-left:50px;}
div.listen ul#issues li p input[type=button]{margin:80px 0 0 -40px;position:relative;}
}

/* STYLES FOR 4TH PAGE, WRITE */

div.write ul#issues li p input[type=text]{
color:#A52A2A;
font-size:1.1em;
border-radius:0.4em;
border:1px outset black;
padding:3px 2px 5px 8px;
box-shadow:0px 3px 6px #aaa;
}

/* WRITE PAGE SCREEN SIZES */

@media screen and (min-width: 200px) {
div.write ul#issues li p input[type=text]{width:65px;}
div.write ul#issues li p input[type=button]{margin:0px 0 0 0;position:relative;}
}

@media screen and (min-width: 320px) {
div.write ul#issues li p input[type=text]{width:auto;}
}

@media screen and (min-width: 480px) {

}

@media screen and (min-width: 600px) {
div.write ul#issues li p input[type=button]{margin:80px 0 0 0;position:relative;}
}

@media screen and (min-width: 768px) {
div.write ul#issues li p input[type=button]{margin:50px 0 0 0;position:relative;}
}

@media screen and (min-width: 900px) {

}

@media screen and (min-width: 1200px) {
div.write ul#issues li p input[type=button]{margin:60px 0 0 0px;position:relative;}
}

/* STYLES FOR LEFT AND RIGHT ARROWS */

#next,
#prev{
position:absolute;
top:0;
font-size:70px;
top:170px;
width:22px;
height:38px;
background-position:0 0;
background-repeat:no-repeat;
text-indent:-9999px;
overflow:hidden;
}

#next:hover,
#prev:hover{
background-position:0 -76px;
}

#next{
right:3px;
background-image:url('../images/next.png');
}

#prev{
left:0;
background-image:url('../images/prev.png');
}

#next.disabled,
#prev.disabled{
opacity:0.2;
}

/* NEXT AND PREVIOUS SCREEN SIZES */

@media screen and (min-width: 200px) {
#next, #prev{transform:scale(0.5,0.5);}
}

@media screen and (min-width: 320px) {
#next, #prev{transform:scale(0.7,0.7);}
}

@media screen and (min-width: 480px) {
#next, #prev{transform:scale(0.9,0.9);}
}

@media screen and (min-width: 600px) {
#next, #prev{transform:scale(1.0,1.0);}
}

@media screen and (min-width: 1200px) {
#next, #prev{transform:scale(1.0,1.0);}
}

/* STYLES FOR LEARN, READ, HEAR, WRITE MENU */

#first-words-nav{
margin:6px auto;
border:1px solid #CC9900;
box-shadow: 2px 2px 4px #aaa;
text-align:center;
}

#first-words-nav ul{
margin-left:-20px;
}

#first-words-nav ul li{
display:inline;
}

#first-words-nav .active,
#first-words-nav .non-active{
color:#FFCC00;
letter-spacing:0.1em;
}

#first-words-nav .non-active a:hover{
text-shadow:1px 1px 1px #888;
text-decoration:none !important;
color:#FFCC00 !important;
}

#first-words-nav a{
color:#FFCC00;
}

/* NAVIGATION DIV SCREEN SIZES */

@media screen and (min-width: 200px) {
#first-words-nav{width:95%;padding:4px;border-radius:0.3em;}
#first-words-nav ul li{padding:1px 0px 1px 0px;
margin:1px;}
#first-words-nav .active{font-size:1.1em;text-shadow:none;}
#first-words-nav .non-active{font-size:1.1em;text-shadow:none;}
}

@media screen and (min-width: 320px) {
#first-words-nav .active{font-size:1.3em;}
#first-words-nav .non-active{font-size:1.3em;}
}

@media screen and (min-width: 480px) {
#first-words-nav{width:90%;padding:6px;border-radius:0.4em;}
#first-words-nav .active{font-size:1.7em;text-shadow:1px 1px 1px #888;}
#first-words-nav .non-active{font-size:1.7em;text-shadow:1px 1px 0px #888;}
}

@media screen and (min-width: 600px) {
#first-words-nav .active{font-size:1.45em;}
#first-words-nav .non-active{font-size:1.45em;}
}

@media screen and (min-width: 768px) {
#first-words-nav{width:80%;padding:8px;border-radius:0.6em;}
#first-words-nav .active{font-size:1.7em;}
#first-words-nav .non-active{font-size:1.7em;}
}

@media screen and (min-width: 900px) {
#first-words-nav{width:68%;}
#first-words-nav .active{font-size:1.75em;}
#first-words-nav ul li{padding:3px 3px 3px 3px;
margin:3px;}
#first-words-nav .non-active{font-size:1.75em;}
}

@media screen and (min-width: 1200px) {
#first-words-nav{width:55%;}
#first-words-nav ul li{padding:3px 3px 3px 3px;
margin:3px;}
#first-words-nav .active{font-size:1.9em;}
#first-words-nav .non-active{font-size:1.9em;}
}

@media screen and (min-width: 200px) {

}

@media screen and (min-width: 320px) {

}

@media screen and (min-width: 480px) {

}

@media screen and (min-width: 600px) {

}

@media screen and (min-width: 768px) {

}

@media screen and (min-width: 900px) {

}

@media screen and (min-width: 1200px) {

}