/*.........Basic Structural elements.....*/
#welcome{
font-family: Calibri, sans-serif;
font-size: .8em;
font-weight:700;
margin-left: 20px;
}

body{
width:100%;
height:100%;
background-image:url(http://www.greekbeforechristmas.com/themes/default/images/sky4.jpg);
background-repeat:no-repeat;
background-size: 1600px 2600px;
margin:0 0 0 0;
padding:0 0 0 0;

}

#page_title{
background-image:url(http://www.greekbeforechristmas.com/themes/default/images/Fill.jpg); 
background-repeat:repeat;
border: 1px solid black;
border-radius: 1em;
width: 80%;
height: 180px;
position: absolute;
left: 15px; top: 50px;
padding:0 0 0 20px;
margin:0 0 0 0;
line-height:1em;
z-index:-1;
}

#wrapper{
background-image:url(http://www.greekbeforechristmas.com/themes/default/images/sky.jpg); 
background-repeat:repeat;
border:1px solid black;
border-radius:2em;
position:absolute;
margin:0; padding: 0 15px 2em 15px;
left:280px; right: 80px; top: 260px;
z-index: -1;
}

/*.......Global elements.......*/

h1{
font-size:3em;
color: #C64D1F;
font-style:italic;
}

h2 {
font-size: 1.4em;
line-height:1.0em;
margin-bottom:-.5em;
padding-bottom:0em;
padding-top:.2em;
}
p.indent3{
font-size: 1.5em;
font-style: italic;
text-align: right;
padding-right: 25%;
line-height: .4em;
}

a:link{
text-decoration:none;
}

a:hover{
text-decoration: underline;
}

span.italic{
font-style: italic;
}


/*.....Divisions and special elements......*/

#cover{
position: absolute;
right:7%;
margin-top: 90px;
}

#cover img{
border: 1px solid black;
border-radius: .5em;
width: 250px;
}


#contents.toc ul{
list-style-type: none;

}

#wrapper a:link{

font-family:Calibri, Tahoma, "Arial Unicode", sans-serif;
font-size:1.2em;
color: #C64D1F;

}


/*    Exercise elements     */
#page_title.exercise{
top:15px; left: 30px;
height:80px;
font-size:.8em;
}

h1.exercise{
font-family: Calibri, "Arial Unicode", sans-serif;
}

#instructions{
position: relative;
top: 100px; 
left: 200px;
width: 75%;
}

#progress
{
position: absolute;
top: 35%;
background-color:#C64D1F;
font-family: Calibri, sans-serif;
font-size: 1em;
width:190px; 
height:90px;
text-align:center;
color: white;
padding:10px 10px 10px 10px;
margin: 0 0 0 0;
left: 20px;
}

#progress.exercise
{


}

span.progress_number{

font-size: 1.7em;
}






/*  Menus  */
#menu.gb4x{
width:240px;
margin: 250px 10px 0 10px;
padding: 0px 5px 10px 0;

line-height: 1.4em;

}

#menu ul {
list-style-type: none;
margin-left: 5px;
padding-left:0;
font-size: 1em;
}

#checkbox{
font-size: 1.5em;
}

#gletter{
color: #C64D1F;
font-size: 10em;
text-align:center;
}



#question{
   display: block;
 
   width:100%;
   height: 200px;
   text-align:center;
}


/* Buttons.  Classes: answer; info; nav */
input{
color:white;
background-color:#C64D1F;
border:1px solid #85c2de;
padding:9px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
font-weight:bold;
text-align: center;
font-size:.8em;

}



input.answer{
background-color:#C64D1F;
}

#autoseries{
position:absolute;
top:40px;
left:150px;
width: 800px;
height: 150px;
background-color:yellow;
}
#autoseries input{
margin-right:40px;
}

input.nav{
background-color:green;
}

input.info{
background-color:#ffcb05;
color:black;
}

input.keyboard{
width:70px;
height:60px;
background-color:white;
color:black;
font-size: 2em;
}
input.invisible{
display:none;
}

#name_button
{
display:inline;
position: relative;
left:2%;

}

#sound_button {

display: inline;
position: relative;
left: 10%;
}

#btnKnow{
display:inline;
position:absolute;
left:36.5%;
top:260px;
height:70px;
width:300px;

}

#btnNext{
position:absolute;
left:70%;
top:260px;
width:300px;
height:70px;
}

input:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
input:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }


/*   Unique to alphabet       */
#wrapper.alphabet{
height:50%;
}


#alpha_notes{
 font-family:Calibri, sans-serif;
 font-size:1em;

 width: 300px;
 height: 80px;
 position:absolute;
 top:260px;
}

#english_alpha{
font-family:Calibri, sans-serif;
font-size:5em;
position:absolute;
top:90px;
left:85px;
display:none;
}

#wrapper.keyboard{
position:absolute;
top:200px;
left:250px;
height:400px;
width:800px;
}

#progress.keyboard{
width: 150px;
top:500px;
}

#Next #btnNext {

top:440px;
width: 200px;
height:55px;

font-size:1.5em;

}

#keyboard_buttons{
padding-top:20px;
}

#alphakeys{
padding-top:45px;
}

#alpha_sound{
width:1;
height:1;
}

#instructions.keyboard{
left:40px;
top: 65px;
}


#text_display.keyboard{
position:absolute;
left:0;
top:200px;
width:200px;
margin:0 15px 15px 15px;
}

.keyboard h3{
text-align: center;
font-size: 1.3em;
}

.big{
font-size:2em;
color:#C64D1F
}

#next_diacriticals input{
position:relative;
top: 90px;
}

#replay{
position:absolute;
top:350px;
left:380px;
}

#replay input{

width:300px;
height:70px;

}

#progress.nonsense{
top:280px;
}

#wrapper
{
   position: absolute;
}

#wrapper.nonsense{
top: 200px;
left: 240px;
height: 100px;
padding-top:65px;
}

#wrapper.nonsense input{
font-size:1.6em;
font-weight:400;
}

#replay.nonsense{
position:absolute;
width:25%;
top:440px;
left:300px;
}

#nextNonsense{
position:relative;
top:60px;
left: 650px;
width:25%;
}