body         /* Used only to set the font style, size, color and other basic stuff. */ { color: #000000; font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif;
 background-color: #ffffff;  margin: 10px; line-height: 20px;}

#mainContent { margin: 10px; }

.table, .goals { width:98%; margin: 0px 10px 10px; border-top: 1px solid #7da300;
        border-left: 1px solid #7da300;
        border-bottom: 1px solid #7da300;
        background-color:#fff;
        border-spacing: 0px}
.table .tablerowAlt, .goals .lObjectiveAlt { background-color:#dde7bc; }
.table th, .goals th  { padding: 10px; font-weight: bold; border-right: 1px solid #7da300; background-color: #b5c874; text-align:left }
.table td, .goals td  { padding: 10px; border-right: 1px solid #7da300; text-align: left;}


td   /* Some browser do not accept the definition of the font size only in the BODY tag, therefore it is defined here again. */ 
    { font-size: 12px; }
p        /* Be aware that justify alignment might not be supportet by all browsers. */ { font-size: 12px; margin-bottom: 10px }
h1    /* Use your own colors to represent titles. Be aware that margins are cumulating if you have eg. a H2 title follwoing a H1 title. */ 
   { color: #000000; font-size: 14px; margin-top: 20px; margin-bottom: 15px; font-weight: bold; clear: both }
h2   { color: #000000; margin-top: 20px; margin-bottom: 15px; font-size: 14px; clear: both }
h3   { color: #000000; margin-top: 20px; margin-bottom: 15px; font-size: 13px;  clear: both }
h4   { color: #000000; margin-top: 20px; margin-bottom: 15px; font-size: 12px;  clear: both }
.header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #ECF4F9;
	border-bottom-width: 1px;
	border-color: #B5C874;
	}
	
#head {
	width:100%;
	height:47px;
	border-width:0px 0px 1px 0px;
	border-style:solid;
	border-color:#7DA300;
	background:#ECF4F9;
	}
	
a:link  /* Adjust the colors to your needs. Note that not underlining links might confuse some users. */ { }
a.bibLink { color: #1a1a1a; font-weight: normal }
a:visited { }
img   /* This overrides the border setting of the IMG tag. */ { border: none }
code   /* Adjust the font size to your needs. */ { color: #7da300; font-size: 12px; font-family: Courier, serif; font-weight: normal; line-height: 10px }
dt   /* Used for representing the glossary term (not the explanation!). */ { font-weight: bold; clear: both; }
ol, ul  {  }
li { font-size:12px; margin-bottom: 10px }
.bibliography li { margin-bottom: 30px; }
sub, sup   /* Used in the eLML element "formatted" */ { font-size: 8px }
.background /* Define the background color of your layout  here. */  { background-color: #e5eff1 }
.background_nav /* Define the background color of your navigation  here (if different from the main background color! Else just set this to the same value as .bacground). */  { background-color: #e8f6f8 }
.popupTitle   /* Defines the title of a eLML popup box. This is the part that you click on to open/close the box. */ { color: #efb77f; font-weight: bold; width: 95% }
.popupText    /* Defines the text of a eLML popup box. This is the part that appears when you click on the title. */ { background-color: #e0e0e0; display: none; margin-right: 1cm; margin-left: 1cm; padding: 5px; width: 85%; border: solid 2px #003000 }
.boxexample /* The eLML box element. */ 
{   background-color: #E9E9E9;  
    margin: 40px 40px 40px 40px; 
    padding: 10px 10px 20px 20px; 
    border: solid 1px #285571;
    border-left-width: 30px; 
}
.boxdefinition /* The eLML box element. */ 
{   background-color: #E9E9E9; 
    margin: 40px 40px 40px 40px; 
    padding: 10px 10px 22px 20px;
    border: solid 1px #B5C874; 
    border-left-width: 30px; 
}
.boxexercise /* The eLML box element. */ 
{   background-color: #E9E9E9; 
    margin: 40px 40px 40px 40px; 
    padding: 10px 10px 25px 20px;
    border: solid 1px #7DA300; 
    border-left-width: 30px; 
}
.boxhint /* The eLML box element. */ 
{   background-color: #E9E9E9; 
    margin: 40px 40px 40px 40px; 
    padding: 10px 10px 10px 20px;
    border: solid 1px #F0AC32; 
    border-left-width: 30px; 
}
.tutor      /* Paragraphs or parts only visible to tutors will be displayed like this. */ { color: red; font-weight: bold; background-color: yellow }

.icon  /* The icon is used in paragraph types like table, list, box etc. where the remark attribute is set. */ 
{   
    margin-left: -50px; 
    margin-top: -11px;
    float:left; 
}
.icondefinition { background-color: #B5C874;}
.iconexercise { background-color: #7DA300;}
.iconhint { background-color: #F0AC32;}
.content_table  /* All tables in eLML that are not part of the layout use this class. Define borders and margins here. */ { margin: 30px 0px; }
.term  /* A glossary term that is used inline in the text. */ { color: #7da300; cursor: default; white-space: nowrap;  }
.bibTitle  /* The title of a bibliography element (eg. book) in the bibliography list. Usually italic. */ { font-style: italic }
.bibAuthor /* The author of a bibliography element (eg. book). Usually bold. */  { font-weight: normal; }
.bibCommentFurther    /* The comment of a bibliography element (eg. book) in the recommended/further reading list. Not displayed in the bibliography list! */ { font-size: 9px }
.bibCommentSource   /* The comment of a bibliography element (eg. book) in the bibliography list. */ { font-size: 9px }
.legend  /* eLML elements like tables, multimedia (image, flash), lists etc. can have legends displayed usally centered below the element. */ { font-size: 10px; text-align: center; margin-top: 10px; margin-bottom: 10px }
.navigation  /* Define what the navigation looks like. */  { color: #1a1a1a; font-weight: normal; margin: 0 }
.navigation li { margin-bottom: 5px }
a.navigationLink  /* Define what the navigation links looks like. */ { color: #1a1a1a; font-weight: normal }
.nav /* back-forward navigation */ { margin-top: 20px; border-top: 1px solid #7da300; border-bottom: 1px solid #7da300; }
.columnMiddleRight /* Define space between columns */ { vertical-align:middle; padding-left: 15px }
.footer { margin-top: 15px; text-align: right; font-size: 10px; }

/* glossary tooltip */
.glossaryTooltip { background-color: #dde7bc; width:300px; border: 1px solid #7da300; font-size: 10px; }
.glossaryTooltip h4 {background-color: #b5c874; color: #000; margin: 0px; padding: 5px}
.glossaryTooltip p { padding: 5px; margin: 0px; }
.multimedia_paragraph_left  /* for multimedia objects that are used as paragraph and have no align or align=left */ { float: none; clear: both; padding: 1em 1em 1em 0; display: block; }
.multimedia_paragraph_center  /* for multimedia objects that are used as paragraph and have align=center */ { text-align: center; width: 100%; float: none; clear: both; padding: 1em; display: block; }
.multimedia_paragraph_right  /* for multimedia objects that are used as paragraph and have align=right */ { text-align: right; float: none; clear: both; padding: 1em 0 1em 1em; display: block; }
.multimedia_inline_left  /* for multimedia objects that are used as inline and have align=left */ { float: left; padding-right: 1em; padding-left: 0; display: inline; }
.multimedia_inline_center  /* for multimedia objects that are used as paragraph and have align=center */ { text-align: center; width: 100%; float: left; padding-right: 1em; padding-left: 1em; display: inline; }
.multimedia_inline_right  /* for multimedia objects that are used as paragraph and have align=right */ { text-align: right; float: right; padding-right: 0; padding-left: 1em; display: inline; }