HTML {
    height: 100%;
    /*	force (empty) scrollbar display, to keep layout centered */
    overflow-y: scroll;
}

BODY {
    height: 100%;
    margin: 0;
    padding: 0;

    background-color: white;

    color: black;
    font-family: verdana, sans-serif;
    font-size: 14px;
    overflow-y: auto;
}

BODY a {
    color: black;
}

.clear {
    /*	class to force parent height for element with float childnodes
    */
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
}

UL {
    list-style: none outside none;
}

#centered {
    position: relative;
    margin: 0 auto;
    width: 1000px;
    min-height: 610px;

    text-align: left;

    background: #c8c8c8 url(../media/bg_layout.png) repeat-y;
}

/*	header
*/

#header, #header-logout {
    display: block;
    position: relative;
    width: 100%;
    height: 137px;
}

#header {
    display: none; /* start with header-logout */
    background: white url(../media/bg_header.png) no-repeat;
}

.header-face {
    position: absolute;
    left: 5px;
    top: 0;
    width: 990px;
    height: 106px;
}

#header-title, #header-title-logout {
    text-align: center;
    padding-top: 10px;
}

#header-date {
    position: absolute;
    left: 95px;
    top: 32px;
}

#header-user {
    position: absolute;
    right: 95px;
    top: 32px;
    cursor: pointer;
}

#header-line {
    position: absolute;
    left: 95px;
    top: 57px;
    width: 800px;
    height: 10px;
}

#header-score {
    position: absolute;
    right: 104px;
    top: 2px;
    width: 43px;
    height: 23px;

    text-align: center;
    font-size: 12px;

    background: transparent url(../media/bg_button_my_score.png) no-repeat;

    z-index: 100;
}

#header-score canvas {
    position: absolute;
    left: 3px;
    top: 1px;
    z-index: -1;
}

#header-score img {
    margin: 1px 0 0 2px;
}

#header-tabs, #header-my-tabs {
    position: absolute;
    top: 106px;
    height: 31px;

    margin: 0;
    padding: 0;

    text-align: center;

}

#header-my-tabs {
    display: none;
}

#header-tabs li, #header-my-tabs li {
    position: relative;
    float: left;
    /*display:inline;*/

    width: 140px;
    height: 31px;
    margin-left: 15px;

    cursor: pointer;
}

#header-tabs div, #header-my-tabs div {
    position: absolute;
    left: 5px;
    top: 0;
    width: 130px;
    height: 24px;

    text-align: center;
}

#header-tabs div img, #header-my-tabs div img {
    margin-top: 1px;
}

#header-my-tabs li {
    width: 190px;
}

#header-my-tabs div {
    width: 180px;
}

.header-tab-selected {
    background: transparent url(../media/bg_tab.png) no-repeat;
}

.header-my-tab.header-tab-selected {
    background: transparent url(../media/bg_my_tab.png) no-repeat;
}

.header-tab-icon {
    position: absolute;
    left: 55px;
    bottom: 31px;
    padding-bottom: 1px;
}

#toggle-sound {
    position: absolute;
    right: 11px;
    top: 50px;
    cursor: pointer;
    z-index: 1000;
}

#toggle-sound a {
    width: 24px;
    height: 24px;
    background: url(../media/button_listen.png) no-repeat;
}

/*	header login / my
*/

.header-my {
    position: absolute;
    top: 7px;
    right: 10px;
    width: 111px;
    height: 28px;

    background: transparent url(../media/bg_button_my.png) no-repeat;
    cursor: pointer;

    text-align: center;

    /*background-color:rgba(255,255,255,.1);*/
}

#header-my a, #header-my-close a, #header-my-login a {
    top: 1px;
    width: 111px;
    height: 22px;
}

#header-my-close {
    display: none;
}

#header-my-close a {
    background: url(../media/buttons/button_read_nl.png) no-repeat;
}

#header-my-login a {
    width: 105px;
    left: 5px;
    background: url(../media/buttons/button_login_nl.png) no-repeat;
    background-position-x: center;
}

.header-my canvas {
    position: absolute;
    left: 3px;
    top: 1px;
}

.header-my img {
    position: absolute;
    z-index: 10;
}

#login-panel .support-body,
#register-panel .support-body {
    font-weight: normal;
}

#login-panel input {
    width: 100px;
    font-size: 12px;
}

#register-panel input:not([type="checkbox"]) {
    width: 150px;
    font-size: 12px;
}

#login-panel p,
#register-panel p {
    text-align: right;
    margin: 0 5px 14px 0;
}

#login-panel .failed,
#register-panel .failed {
    text-align: center;
    color: red;
}

#login-panel a {
    color: white;
    text-decoration: none;
}

#login-panel a:hover {
    text-decoration: underline;
}

#login-ok, #logout-ok, #register, #token-ok {
    position: relative;
    width: 97%;
    height: 22px;
}

#login-ok {
    margin-bottom: 6px;
}

#logout-ok {
    margin-top: 6px;
    width: 90%;
}

#login-ok a {
    width: 105px;
    height: 22px;
    background: url(../media/buttons/button_login_ok_nl.png) no-repeat;
    background-position-x: center;
}

#logout-ok a {
    width: 80px;
    height: 22px;
    background: url(../media/buttons/button_logout_nl.png) no-repeat;
}

#token-ok a {
    width: 150px;
    height: 22px;
    background: url(../media/buttons/button_link_token_nl.png) no-repeat;
}

#register a {
    width: 120px;
    height: 22px;
    background: url(../media/buttons/button_register_nl.png) no-repeat;
}

/*	contents
*/

#contents {
    position: relative;
    width: 100%;
}

.column {
    position: relative;
    float: left;
    margin-right: 15px;

    width: 265px;
    min-height: 1px;
}

#section {
    margin-left: 90px;
    padding-top: 27px;
}

#transition {
    visibility: hidden;

    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    min-height: 149px;

    z-index: 100;
}

#transition-header-face {
    width: 195px;
    height: 49px;
}

#transition-face {
    width: 100%;
}

/*	text (preview)
*/

.text {
    position: relative;
    float: left;
    width: 265px;
    /*margin-right:15px;*/

    cursor: pointer;
}

.text-header, .text-preview, .text-footer {
    position: relative;
    width: 100%;
}

.text-header {
    background: transparent url(../media/bg_text_header.png) no-repeat;
    padding-top: 5px;
}

.text-preview {
    background: transparent url(../media/bg_text_preview.png) repeat-y;
}

.text-footer {
    background: transparent url(../media/bg_text_footer.png) no-repeat 0 100%;
    padding-bottom: 20px;
}

.text-header-face {
    margin-left: 10px;
    width: 195px;
    height: 49px;
}

.text-title-face {
    position: relative;
    margin-left: 10px;
    width: 240px;
    min-height: 2px;
    z-index: 1;
}

.text-title {
    float: left;
    width: 195px;
    margin: -40px 0 10px 17px;

}

.text-preview-face {
    margin-left: 10px;
    width: 200px;
    min-height: 60px;

    padding: 10px 20px;

}

.text-footer-face {
    margin-left: 10px;
    width: 240px;
    text-align: center;
    line-height: 16px;
}

.text-footer-face img {
    position: relative;
    margin-top: 2px;
}

.text-footer-face .word {
    position: relative;
    float: left;
    margin-right: 10px;
    margin-bottom: 6px;

    height: 14px;
    padding: 0 7px;
    z-index: 1;
}

.text-footer-face .word CANVAS {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.text-footer-face > .level {
    position: relative;
    width: 100%;
    height: 50px;
    background: transparent none no-repeat 50% 50%;
}

.text-footer-face > .level > IMG {
    position: absolute;
    top: 23px;
}

.text-footer-face > .level > IMG.user-indicator {
    top: 23px;
    opacity: 0.8;
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(180deg);
}

/*	lesson
*/

#lesson {
    display: none;

    position: absolute;
    left: 5px;
    top: -31px;
    width: 990px;

    background: transparent url(../media/bg_content.png) repeat-y;

    z-index: 100;
}

#lesson-header {
    position: absolute;
    left: 0;
    top: -54px;
    width: 100%;
    height: 54px;

    background: transparent url(../media/bg_content_header.png) repeat-y;
}

#lesson-header-face {
    position: absolute;
    left: 15px;
    top: 5px;
    width: 915px;
    height: 49px;
}

#lesson-close {
    position: absolute;
    right: 5px;
    top: 12px;
    cursor: pointer;
}

#lesson-close a {
    width: 24px;
    height: 24px;
    background: url(../media/button_close.png) no-repeat;
}

#lesson-face {
    position: relative;
    margin-left: 15px;
    width: 960px;
}

#lesson-title {
    padding-left: 30px;
    padding-top: 12px;
    width: 845px;
}

#lesson-text {
    position: relative;
    float: left;
    width: 525px;
    padding: 20px 60px 20px 30px;
    margin-bottom: 30px;
    z-index: 1;
}

#lesson.semanticize #lesson-text, #lesson.semanticize #lesson-task, #lesson.semanticize #lesson-title,
#lesson.task #lesson-text-body {
    display: none;
}

#lesson-text .news-image {
    float: left;
    margin: 8px 15px 8px 0;
    max-width: 240px;
}

#lesson-text-footer {
    position: absolute;
    left: 0;
    bottom: -30px;
    width: 580px;
    padding-left: 30px;
    padding-right: 5px;

    text-align: right;
}

#lesson-text-rating {
    position: absolute;
    left: 30px;
    bottom: -26px;

    width: 125px;
}

#lesson-text-rating img {
    float: left;
}

/*	lesson, single view layout
*/

#lesson.single #lesson-text {
    /* width:850px; */
    width: 600px;
}

#lesson-single-navigation {
    position: relative;
    height: 24px;
}

#lesson.task #lesson-single-navigation {
    width: 525px;
}

#lesson-single-navigation > div {
    position: relative;
    height: 24px;
}

#lesson-single-prev {
    width: 140px;
    float: left;
    display: none;
}

#lesson.task #lesson-single-prev {
    display: block;
}

#lesson-single-prev a {
    left: 10px;
    width: 120px;
    height: 24px;
    background: url(../media/buttons/button_read_text_nl.png) no-repeat;
}

#lesson-single-submit, #lesson-single-next {
    width: 130px;
    float: right;
}

#lesson-single-done {
    width: 90px;
    float: right;
}

#lesson-single-submit, #lesson-single-done,
#lesson-single-navigation.submit > #lesson-single-next,
#lesson-single-navigation.done > #lesson-single-next {
    display: none;
}

#lesson-single-navigation.submit > #lesson-single-submit,
#lesson-single-navigation.done > #lesson-single-done {
    display: block;
}

#lesson-single-submit a, #lesson-single-next a {
    right: 10px;
    width: 110px;
    height: 24px;
    background: url(../media/buttons/button_continue_next_nl.png) no-repeat;
}

#lesson-single-submit a {
    background: url(../media/buttons/button_check_nl.png) no-repeat;
}

#lesson-single-done a {
    right: 10px;
    width: 70px;
    height: 24px;
    background: url(../media/buttons/button_ready_nl.png) no-repeat;
}

#lesson-sidebar {
    display: none;

    position: relative;
    float: left;
    width: 210px;
    padding: 0 30px;
    margin-bottom: 24px;
    z-index: 0;
}

#lesson-instruction {
    /* font-weight:bold; */
    margin-top: 23px;
    font-size: 16px;
}

#lesson.single #lesson-sidebar {
    display: block;
}

#lesson.single.semanticize #lesson-sidebar {
    display: none;
}

/*	lesson pre-test
*/

#lesson-semanticize {
    margin-left: 30px;
    font-size: 16px;
    width: 525px;
}

#semanticize-header {
    font-weight: bold;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

#semanticize-instructions {
    padding-left: 30px;
}

#semanticize-body {
    position: relative;
    width: auto;
    margin: 15px 0 30px 30px;
}

#semanticize-body.face-text {
    padding: 15px;
}

#semanticize-body > .drag {
    position: absolute;
    left: 0;
    top: 0;
    padding: 3px 6px;
    font-weight: bold;
    cursor: pointer;
}

#semanticize-body > .drop {
    position: relative;
    float: left;
    margin-top: 45px;

    width: 180px;
    height: 190px;
    padding: 5px 10px;

    line-height: 26px;
}

#semanticize-body > .drop > span {
    position: absolute;
    display: block;
    font-weight: bold;
}

#semanticize-body > .drop > .instruction {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    text-align: center;
}

#semanticize-body .support-combined > .definition.hidden {
    padding: 0;
}

#semanticize-body .support-main {
    background: no-repeat 99% 6px;
}

#semanticize-body .definition {
    font-weight: normal;
}

#semanticize-body .definition img {
    max-width: 160px;
}

/*
#semanticize-body > .definition .image, #definitionimagediv
{
	display:block;
	float:left;
	margin:0 30px 10px 10px;
	max-width:160px;
}
 */
#definitionimagediv {
    display: block;
    float: left;
    margin: 0 30px 10px 10px;
    max-width: 160px;
}

#semanticize-footer {
    height: 40px;
}

#semanticize-footer .button, #semanticize-instructions .button {
    position: relative;
    width: 140px;
    height: 24px;
    float: left;
}

#semanticize-footer .button a, #semanticize-instructions .button a {
    background-repeat: no-repeat;
}

#semanticize-next.button {
    float: right;
}

#semanticize-prev a {
    width: 140px;
    height: 24px;
    background: url(../media/buttons/button_previous_nl.png) no-repeat;
}

#semanticize-next a {
    width: 140px;
    height: 24px;
    background: url(../media/buttons/button_continue_next_nl.png) no-repeat;
}

/*	text support, settings
*/

.supported {
    /*cursor:pointer;*/
}

.support-type-select {
    position: relative;
    margin-top: -2px;
    height: 38px;

}

.support-type-select .face {
    position: absolute;
    left: 5px;
    top: 3px;
}

.support-type-content {
    max-height: 180px;
    overflow: auto;
    margin: 0 -10px;
    padding: 2px 15px;
}

.generated_source_warning {
    font-size: 0.8em;
    font-weight: normal;
    padding-top: 2px;
    clear: both;
}

.id_sentence_german {
    width: 100%;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    font-style: italic;
}

.id_sentence_dutch {
    width: 100%;
    text-align: right;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    padding-bottom: 10px;
}

#lesson-settings, #lesson-print {
    position: absolute;
    right: 12px;
    top: 46px;
    cursor: pointer;
    z-index: 1;
}

#lesson.task #lesson-settings, #lesson.task #lesson-print {
    display: none !important;
}

#lesson-settings a {
    width: 24px;
    height: 24px;
    background: url(../media/button_settings.png) no-repeat;
}

#text-settings .setting {
    position: relative;
    margin: 0 0 10px 5px;
    width: 170px;
    height: 30px;
    background: transparent none no-repeat 0 0;
}

#text-settings .slider {
    position: absolute;
    left: 30px;
    top: 10px;
    height: 15px;
    width: 135px;

    background: transparent url(../media/bg-slider.png) no-repeat 4px 4px;

}

#text-settings .slider > div {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;

    background: transparent url(../media/bg-slider-handle.png) no-repeat 0 0;
}

#text-settings .slider > div:hover {
    background-position: 0 100%;
}

#lesson-print {
    display: none;
    top: 75px;
}

#lesson-print a {
    width: 24px;
    height: 24px;
    background: url(../media/button_print.png) no-repeat;
}

/*	task
*/

#lesson-task {
    position: relative;
    float: left;
    width: 285px;
    padding: 0 30px;
    margin-bottom: 24px;
    z-index: 0;
}

#lesson-text > #lesson-task {
    display: none;
    float: none;
    padding: 0;
    width: 525px; /*	same as default text view */
}

#lesson.task #lesson-text > #lesson-task {
    display: block;
}

#task-header, #semanticize-header.task {
    min-height: 30px;
    padding-left: 30px;
    background: transparent url(../media/icon_task.png) no-repeat;
}

#task-select {
    margin: 15px 0 0 -30px;

    width: 300px;
    height: 36px;
}

#lesson.single #task-select {
    width: 100%;
    font-size: 16px;
    font-weight: normal;
}

#task-select > div.line {
    position: absolute;
    left: 0;
    top: 12px;
    width: 100%;
    height: 1px;
    background-color: #999999;
}

#task-select > a.tab {
    display: inline-block;
    position: relative;
    margin-right: 15px;
    width: 50px;
    height: 24px;
    background: transparent url(../media/bg-task-select.png) no-repeat 0 0;

    color: #999999;
    text-align: center;
    text-decoration: none;
    line-height: 23px;
}

#task-select > a.tab.selected {
    font-weight: bold;
}

#task-select > a.tab.active, #task-select > a.tab.done {
    color: black;
}

#task-select > a.tab:hover {
    color: #999999;
}

#task-select > a.tab.done {
    padding-right: 12px;
    width: 38px;
    background-position: 0 100%;
}

.task-option {
    position: relative;
    float: left;
    height: 36px;
    overflow: hidden;
}

.task-option a {
    top: 3px !important;
    height: 26px;
    background-repeat: no-repeat;
}

.task-option canvas {
    top: 3px !important;
}

.task-option.left {
    background: transparent url(../media/bg_task_select_left.png) 0 0 no-repeat;
}

.task-option.middle {
    background: transparent url(../media/bg_task_select_middle.png) 0 0 repeat-x;
}

.task-option.right {
    background: transparent url(../media/bg_task_select_right.png) 100% 0 no-repeat;
}

#task-intro {
    margin: 10px 0 20px 0;
    line-height: 24px;
}

#lesson.single #task-intro {
    color: #999999;
}

#task-intro img {
    vertical-align: bottom;
}

#task-body {
    width: 285px;
}

#lesson.single #task-body {
    width: auto;
}

#lesson.single #task-body .correct {
    color: black;
}

#task-body .nowrap {
    white-space: nowrap;
    display: inline-block;
    position: relative;
}

#task-body .spinner {
    float: left;
    margin: -3px 10px 0 0;
}

.blanks_option {
    font-weight: bold;
    cursor: pointer;
    padding-right: 7px;
}

#lesson.single .blanks_option {
    padding: 1px 7px;
}

.task-question {
    font-weight: bold;
}

#task-body .task-targetword {
    font-weight: bold;
    font-size: 150%;
}

#task-body label, #semanticize-body label {
    position: relative;
    padding-left: 30px;
    display: inline-block;
}

#task-body label.horizontal {
    position: relative;
    vertical-align: top;
    padding-top: 30px;
    padding-left: 0;
    line-height: 0;
    display: inline-block;
}

#task-body label .image {
    max-width: 160px;
    border: 1px solid;
}

#task-body label .image.horizontal {
    max-width: 152px;
    border: 1px solid;
}

.multichoice {
    display: none;
    /*
        position:absolute;
        left:0;
        top:2px;
        visibility:hidden;
     */
}

/* Vertial layout tests */
.checkbox {
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    background: transparent url(../media/bg-check.png) no-repeat 0 0;
}

.checkbox.checked {
    background-position: 0 33.33%;
}

.checkbox.correct {
    background-position: 0 66.66%;
}

.checkbox.incorrect {
    background-position: 0 100%;
}

/* Horizontal layout tests */
label.horizontal .checkbox {
    position: absolute;
    left: 43%;
    top: 0;
    width: 24px;
    height: 24px;
    background: transparent url(../media/bg-check.png) no-repeat 0 0;
}

label.horizontal .checkbox.checked {
    background-position: 0 33.33%;
}

label.horizontal .checkbox.correct {
    background-position: 0 66.66%;
}

label.horizontal .checkbox.incorrect {
    background-position: 0 100%;
}

div.image-container {
    position: relative;
}

.texttospeech {
    position: relative;
    float: left;
    margin-right: 2px;
    margin-top: 1px;

    height: 24px;
    width: 24px;
}

.texttospeech a {
    width: 24px;
    height: 24px;
    background: url(../media/button_listen.png) no-repeat;
}

#lesson.single.task #lesson-task .texttospeech a {
    background: url(../media/button_support_listen.png) no-repeat;
}

#task-footer {
    margin-top: 10px;
    padding-right: 20px;
}

#lesson.single #task-footer {
    display: none !important;
}

#task-footer div {
    float: right;
    position: relative;
    height: 24px;
}

#task-submit {
    width: 120px;
}

#task-submit a {
    width: 120px;
    height: 24px;
    background: url(../media/buttons/button_check_nl.png) no-repeat;
}

#task-skip {
    width: 130px;
    margin-left: 5px;
}

#task-skip a {
    width: 110px;
    height: 24px;
    right: 10px;
    background: url(../media/buttons/button_continue_nl.png) no-repeat;
}

/*	my (profile tabs)
*/

#my {
    display: none;

    position: relative;
    width: 800px;

    margin-left: 100px;
    padding-top: 0;
}

#my-header {
    height: 27px;
    padding-top: 6px;
    text-align: center;
    background-color: #ffffff;
    margin: 0 -5px;
}

#my-footer {
    display: none;

    position: relative;
    margin-top: 40px;
    height: 30px;
}

#my-page {
    padding: 0 15px;
}

/*	my-progress
*/

.progress-score {
    vertical-align: middle;
    margin: 0 3px 0 10px;
}

#progress-results {
    min-height: 403px;
}

#progress-prev, #progress-next {
    visibility: hidden;

    position: relative;
    float: right;
    margin-top: 4px;

    width: 160px;
    height: 24px;
}

#progress-prev {
    margin-right: 10px;
}

#progress-prev a {
    width: 160px;
    height: 24px;
    background: url(../media/buttons/button_newer_nl.png) no-repeat;
}

#progress-next {
    margin-right: 20px;
}

#progress-next a {
    width: 160px;
    height: 24px;
    background: url(../media/buttons/button_older_nl.png) no-repeat;

}

#progress-paging {
    float: right;
    padding: 0 7px;
}

.result {
    position: relative;
    width: 100%;
    min-height: 40px;

    cursor: pointer;
}

.result .icon {
    float: left;
    width: 50px;
    height: 40px;
}

.result .icon img {
    position: absolute;
    left: 7px;
    top: 0;
    z-index: 1;
}

.result .icon canvas {
    position: absolute;
    left: 10px;
    top: 2px;
    z-index: 0;
}

.result .title {
    float: left;
}

.result .stats {
    float: right;
    margin-right: 25px;
    margin-top: 6px;
}

.result .stats img {
    vertical-align: middle;
    margin: 0 3px 0 15px;
}

/*	my-words
*/

.result .expand {
    float: left;
    margin: 10px 8px 0 25px;
}

.result-expanded {
    margin-left: 60px;
    min-height: 40px;

}

.moduleProgress {
    position: relative;
    float: right;
    margin-top: 11px;
    margin-right: 25px;
    width: 266px;
    height: 18px;
    background: transparent url(../media/bg_module_progress.png) no-repeat;
}

.moduleProgress .bar {
    position: absolute;
    left: 3px;
    top: 1px;
    height: 12px;
    overflow: hidden;
}

.moduleProgress .bar CANVAS {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.moduleProgress .bar DIV {
    position: absolute;
    top: 0;
    height: 12px;
    background: transparent url(../media/bg_module_progress_gloss.png) no-repeat 0 0;
    z-index: 1;
}

.moduleProgress .bar .learned {
    left: 0;
}

.moduleProgress .bar .week {
    right: 0;
    background-position: -6px 0;
}

.moduleTable {
    line-height: 20px;
    margin-top: 7px;
    margin-bottom: 33px;

    background: transparent url(../media/bg_module_table.png) repeat;
}

.moduleTable .header {
    height: 40px;
    vertical-align: top;
}

.moduleTable .check {
    float: left;
    width: 18px;
    height: 18px;
}

/*	my-preferences
*/

#preferences-form {
    padding-left: 230px;
    padding-top: 47px;

    width: 350px;

    line-height: 22px;
}

#preferences-form p {
    margin-top: 0;
    margin-bottom: 18px;
}

#preferences-form input, #preferences-form select {
    width: 150px;
    float: right;
    font-size: 12px;
}

#preferences-form select {
    width: 180px;
}

#preferences-submit {
    position: relative;
    float: right;
    margin-right: 40px;

    width: 120px;
    height: 24px;
}

#preferences-submit a {
    width: 120px;
    height: 24px;
    background: url(../media/buttons/button_update_nl.png) no-repeat;
}

/*	gui elements
*/

.bold {
    font-weight: bold;
}

.loading-small {
    width: 16px;
    height: 16px;
}

.loading-large {
    width: 32px;
    height: 32px;
}

.button canvas, .button a {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}

.button a {
    z-index: 10;
}

.button a:hover {
    background-position: 50% 100%;
}

.pagecurl,
.pagecurl canvas {
    position: absolute;
    top: 0;
    right: 0;

    width: 45px;
    height: 49px;
}

.textcurl {
    top: 5px;
    right: 15px;
}

.lessoncurl {
    top: 5px;
    right: 15px;
}

.support {
    position: absolute;
    z-index: 1000;
}

.support canvas {
    position: absolute;
    width: 100%;
    height: 15px;
}

.support-header, .support-body, .support-footer {
    width: 100%;
    position: relative;
}

.support-header div, .support-footer div {
    float: left;
    width: 50%;
}

.support-header, .support-header div {
    height: 20px;
}

.support-header canvas {
    bottom: 0;
}

.support-header .support-arrow {
    bottom: 12px;
    height: 25px;
    width: 30px;
    background: transparent url(../media/bg_support_arrow_header.png) 15px 0 no-repeat;
    padding: 0 15px;
}

.support-header-left {
    background: transparent url(../media/bg_support_header_left.png) 0 0 no-repeat;
}

.support-header-right {
    background: transparent url(../media/bg_support_header_right.png) 100% 0 no-repeat;
}

.support-footer, .support-footer div {
    height: 25px;
}

.support-footer canvas {
    top: 0;
}

.support-footer .support-arrow {
    top: 12px;
    height: 25px;
    width: 30px;
    background: transparent url(../media/bg_support_arrow_footer.png) 15px 0 no-repeat;
    padding: 0 15px;
}

.support-footer-left {
    background: transparent url(../media/bg_support_footer_left.png) 0 0 no-repeat;
}

.support-footer-right {
    background: transparent url(../media/bg_support_footer_right.png) 100% 0 no-repeat;
}

.support-body-content {
    float: left;
    margin-left: 10px;
    padding: 0 10px;

    border: 0 solid transparent;
    border-left-width: 3px;
    border-right-width: 3px;
}

.support-body-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: transparent url(../media/bg_support_body_left.png) repeat-y;
}

.support-body-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: transparent url(../media/bg_support_body_right.png) repeat-y;
}

.support-main {
    padding: 0 5px;
}

.support-main > .loading-small {
    float: right;
    margin: 3px 2px 0 0;
}

.support-combined {
    margin: 5px 5px 0 5px;
    border-top: 4px solid;
}

.support-listen {
    position: relative;
    float: left;
    width: 24px;
    height: 24px;
    margin-right: 3px;
}

.support-listen a, .read-whole-text {
    width: 24px;
    height: 24px;
    background: url(../media/button_support_listen.png) no-repeat;
}

.read-whole-text-container {
    cursor: pointer;
}

.support-combined > div {
    margin: 10px 0;
    width: auto !important;
}

.support-combined > div a.prefs {
    float: right;
    clear: left;
    font-size: 12px;
    font-weight: normal;
}

.support-combined > div a.prefs:hover {
    text-decoration: none;
}

.support-combined > .translation > i {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
}

.support-combined > .translation > .error {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #e60000;
}

.support-combined > .definition {
    padding: 5px 10px;
    font-style: normal;
}

.support-combined > .definition p:first-child {
    margin-top: 0;
}

.support-combined > .definition p:last-child {
    margin-bottom: 0;
}

.support-combined > .definition > img, .support-combined > .definition > #swiffycontainer {
    display: block;
    float: left;
    margin: 5px 5px 5px 0;
    max-width: 120px;
}

.support-combined > .definition > .col {
    margin-left: 130px;
}

.support-combined p {
    font-weight: normal;
}

.support-body-content .support-combined .support-body.concordance {
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid;
}

.support-body-content .support-combined .support-body.concordance:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none
}

.preferencesLink {
    font-size: 0.8em;
    font-weight: normal;
    text-align: right;
    clear: both;
}

.sourceName {
    font-size: 0.8em;
    font-weight: normal;
    float: right;
    padding-top: 2px;
    padding-left: 5px;
}

.concordanceline {
    display: block;
    font-style: normal;

}

.concordanceline.firstLine {
    padding-top: 10px;
}

.semanticize-item.secondary {
    display: none;
}

#feedback {
    display: none;
    margin-top: 34px;
    position: absolute;
    left: 5px;
    top: -31px;
    width: 89%;
    height: 500px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    padding: 5%;
    z-index: 100;
}

#feedback h1.feedback-title {
    margin-top: -4%;
    margin-bottom: 4%;
}

.close-feedback {
    cursor: pointer;
    float: right;
    width: 24px;
    height: 24px;
    margin: -5%;
    background: url(../media/button_close.png) no-repeat;
}

#feedback form {
    display: inline-block;
    height: 100%;
    width: 100%;
}

input[type=radio].image-radio {
    display: none;
}

input[type=radio] + img {
    cursor: pointer;
    border: 2px solid transparent;
    margin: 5px;
}

input[type=radio]:checked + img {
    border: 2px dashed white;
    border-radius: 30px;
}

.feedback-container {
    clear: both;
    margin-bottom: 5%;
}

.smiley-container {
    margin-top: 1%;

}

.feedback-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90%;
    margin: 2% 5%;
}

#feedback .button {
    padding: 1%;
    display: inline-block;
    border: 1px solid white;
    border-radius: 4px;
    cursor: pointer;
}

#feedback label {
    width: 160px;
    float: left;
}

.feedback_title {
    width: auto !important;
    float: none !important;
}

#feedback label span {
    width: inherit;
    display: block;
    text-align: center;
    height: 20px;
}

.level-feedback {
    margin-top: 30px;
    display: inline-block;
}

.close-feedback-large {
    cursor: pointer;
    display: inline-block;
    height: 35px;
    line-height: 70px;
    margin-left: 10px;
}

.close-feedback-large:hover {
    text-decoration: underline;
}