@CHARSET "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:700,400);

/************************************ Elements ************************************/
body {
	font-family:                           'Droid Sans', Verdana, sans-serif;
	font-size:                             10pt;
	color:                                 #000;
	background-color:                      #BBB;
	
	/* Always show vertical scrollbar so the content won't "jump" */
	overflow:                              -moz-scrollbars-vertical;
    overflow-y:                            scroll;
}

h1,h2,h3,h4,h5,h6 {
	font-weight:                           bold;
}

h1 {
	font-size:                             1.5em;
	text-align:                            center;
	margin-top:                            0.5em;
	margin-bottom:                         0.5em;
}

h2 {
	font-size:                             1.3em;
	margin-top:                            1em;
	margin-bottom:                         0.25em;
}

h3 {
	font-size:                             1.1em;
	margin-top:                            1em;
	margin-bottom:                         0.1em;
}

h4,h5,h6 {
	font-size:                             1em;
	margin-top:                            1em;
	margin-bottom:                         0em;
}

p {
	text-align:                            justify;
	
	margin-top:                            0.5em;
	margin-bottom:                         0.2em;
}

p br {
    margin-bottom:                         0.25em;
}

hr {
	margin-top:                            1em;
	margin-bottom:                         0.5em;
    margin-left:                           3em;
    margin-right:                          3em;
}

img {
	border:                                0px solid white;
}

td, th {
    vertical-align:                        top;    
}

/*************************************** Ids **************************************/
#container {
	z-index:                               2;
	display:                               block;
	width:                                 700px;
	margin-left:                           auto;
	margin-right:                          auto;
    margin-top:                            35px; /* main control height */
    padding:                               1em 2em 2em 2em;
	border-right:                          5px solid #888;
	border-bottom:                         5px solid #888;
	background-color:                      white;
}

#moduleControls {
	display:                               block;
	height:                                50px;
}

#moduleHeading {
	float:                                 left;
	font-size:                             1.75em;
	font-weight:                           bold;
	color:                                 #555;
	font-style:                            italic;
	padding-top:                           10px;
}

#moduleFeedback {}

#moduleHelp {}

#lessonHeading {
	display:                               block;
	font-size:                             2em;
	font-weight:                           bold;
	text-align:                            center;
	margin-top:                            0.5em;
	margin-bottom:                         1.5em;
}

#mainControlsContainer {
	position:                              absolute;
}


#BOTTOM_mainControls {
    display:                               block;
    position:                              fixed;
    
    height:                                55px;
    width:                                 100%;
    
    left:                                  0px;
    bottom:                                0px;
    
    background-image:                      url(../image/background/control_gradient_bbb_up.png);
    background-repeat:                     repeat-x;
}

#mainControls {
    display:                               block;
    position:                              fixed;
    
    height:                                55px;
    width:                                 100%;
    
    left:                                  0px;
    top:                                   0px;
    
    background-image:                      url(../image/background/control_gradient_bbb_down.png);
    background-repeat:                     repeat-x;
}


#mainControls .languageChooser {
    float:                                 right;
    margin-top:                            5px;
}

#mainControls .languageChooser .langButton {
    display:                               block;
    float:                                 right;
    width:                                 32px;
    height:                                32px;
    margin:                                0px 10px 0px 0px;
    cursor:                                pointer;
}

#mainControls .content {
    display:                               block;
    width:                                 700px;
    
    margin-top:                            10px;
    margin-left:                           auto;
    margin-right:                          auto;
    text-align:                            center;
}

#mainControls .content .navigButton {
	display:                               block;
	float:                                 right;
}


/************************************* Classes ************************************/


a.infoLink {
    /* 
        This link should not stand out from the text as much as  the normal links,
        since it is only used for explanatory links to articles about linguistic
        terms that the learners "should already know". It is basically just a 
        "didactic trick" that should reduce the learning obstacle.	
    */
    color:                                 black;
    border-bottom:                         1px dashed grey;
    text-decoration:                       none;
}

.info {
	text-align:                            justify;
	
    margin-left:                           3em;
    margin-right:                          3em;
    margin-top:                            1em;
    margin-bottom:                         1em;
    padding:                               1em;
    
    font-style:                            italic;
    background-color:                      #ccc;
}

p.info br {
	margin-bottom:                         0.5em;
}

p.spaced {
	margin-top:                            1em;
}

.hspace01 {
    margin-left:                           0.5em;
}

.hspace02 {
    margin-left:                           0.75em;
}

.hspace03 {
    margin-left:                           1em;
}

.vspace01 {
    margin-top:                            0.5em;
}

.vspace02 {
    margin-top:                            0.75em;
}

.vspace03 {
    margin-top:                            1em;
}

tr.vspace01 td {
    padding-top:                           0.5em !important;
}

tr.vspace02 td {
    padding-top:                           0.75em !important;
}

tr.vspace03 td {
    padding-top:                           1em !important;
}


td.overLine {
    border-top:                            2px solid black; 
    border-left:                           1px solid black;
    border-right:                          1px solid black;

    text-align:                            center; 
    font-size:                             0.85em;
    margin-left:                           0.5em;
    margin-right:                          0.5em;
}

.simpleList {
	list-style:                            none;
}

/* .simpleList */ li {
	margin-bottom:                         0.25em;
}

.sourceList {
    list-style:                            none;
    padding-left:                          1em;
    padding-right:                         1em;
}

.sourceList li {
    margin-bottom:                         1em;
    margin-left:                           0em;
    margin-right:                          0em;
}

li.wrong {
    list-style-type:                       disc;
    list-style-image:                      url("../image/other/asterisk_8.png");
}


table.simpleTable {
    margin-left:                           2em;
    margin-right:                          2em;
    border-collapse:                       collapse;
	border:                                0px solid white;
}

table.simpleTable td {
	padding:                               3px;
	vertical-align:                        top;
}


table.simpleTable td.desc {
	font-style:                            italic;
}

table.simpleTable th {
    padding:                               3px;
    vertical-align:                        top;
}

table.infoTable {
    margin-left:                           3em;
}

table.infoTable th {
    text-align:                            left;
    vertical-align:                        top;
    padding-right:                         2em;    
}

table.infoTable td {
    vertical-align:                        top;    
}

table.helpTable {
    border:                                0px solid black;
}

table.helpTable td {
    padding-bottom:                        1em;    
}


hr.quizSpacer {
	margin:                                3em;
}

.controlButton {
    display:                               block;
    float:                                 right;
    width:                                 48px;
    height:                                48px;
    margin-left:                           5px;
    cursor:                                pointer;
}

.content .lessonTitle {
    font-weight:                           bold;
}
.content img {
	vertical-align:                        middle;
}

.spacer01 {
   margin:                                 0px 20px;
}

.navigButton img {
    cursor:                                pointer;
    margin:                                -5px 5px 0px 5px;
}

.button {
    cursor:                                pointer;
}

.exerciseCounter {
    margin-bottom:                         1em;
    font-style:                            italic;
}

.exerciseAnswers {
	margin:                                1em;
}

.exerciseButton {
	margin-left:                           0.5em;
	margin-right:                          0.5em;
}


.optionalBox{    
    display:                                    none;
}

#qPage01 {
    display:                                    block;
}

.qPage {
    display:                                    none;
}

.question {
    font-weight:                                bold;
}

.freeText {
    height:                                     6em; 
    width:                                      650px;
}


.error {
    color:                                      red;
    border:                                     2px dashed red;
}

.error:after {
    content:                                    "*";
    color:                                      red;
    border:                                     2px dashed red;
}



#questionnaireError {
    display:                                    none;
    margin-top:                                 50px;
    /* margin-left:                                50px;*/
    text-align:                                 center;
    width:                                      100%;
    
    font-size:                                  1.5em;
    font-weight:                                bold;
    color:                                      red;        
}