/* page layout */
/* header */

#hd {
    position: relative;
    padding: 0;
    background: fixed url(../style/images/header_bg.png) no-repeat center 0;
}

#hd,
#hd a,
#hd a:visited {
    color: #fff;
}

#hd .hd_user {
    position: relative;
    z-index: 1000;
    padding: 2px 12px 0;
    min-height: 24px;
    background: #444;
}

.debug #hd .hd_user {
    background: #7abc42;
    border-bottom: 2px solid #555;
}

#hd .hd_user ul {
    margin: 0;
    text-align: right;
}

#hd .hd_user ul li {
    position: relative;
    display: inline-block;
    margin-left: 25px;
    line-height: normal;
    list-style-type: none;
    vertical-align: top;
}

#hd .hd_user ul li a {
    padding: 0;
}

#hd .hd_user ul li a:hover {
    background-color: transparent;
    text-decoration: underline;
}

#hd .hd_user #help-link {
    display: block;
    margin-top: 4px;
    padding: 0 3px 0 19px;
    background: #ededed url(../style/images/icon_help.png) no-repeat 2px center;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #000;
    font: 12px/12px Arial, sans-serif;
    text-decoration: none;
}

#hd .hd_user ul li.notifications {
    overflow: hidden;
    width: 32px;
    height: 26px;
    background: url(../style/images/notifications_no_new.png) no-repeat;
    text-align: center;
}

#hd .hd_user ul li.notifications a {
    display: block;
    height: inherit;
}

#hd .hd_user ul li.notifications a:hover {
    text-decoration: none;
}

#hd .hd_user ul li.notifications.new {
    background: url(../style/images/notifications.png) no-repeat;
}

#hd .hd_user li.username span {
    float: left;
}

#hd .hd_user li.username img {
    float: left;
    margin-right: 10px;
}

#hd .hd_user li a {
    font: 13px/23px Arial, sans-serif;
}

#hd .hd_user .menu > a:after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    margin-top: 9px;
    border: 5px solid #fff;
    border-color: #fff transparent transparent;
    border-bottom: none;
    cursor: pointer;
    vertical-align: top;
}

#profile-menu a {
    padding-bottom: 9px;
}

#hd .hd_user .menu ul {
    display: none;
    position: absolute;
    top: 20px;
    left: -10px;
    float: none;
    padding: 5px 10px;
    background: #000;
    text-align: left;
}

#hd .hd_user li.menu:hover ul {
    display: block;
}

#hd .hd_user .menu li {
    float: none;
    margin: 0;
    white-space: nowrap;
}

#hd .hd_user .menu li {
    display: block;
    margin: 0;
}

#hd .hd_user .menu li a {
    padding: 0;
    background: none;
    color: #fff;
}

#hd .hd_user .menu .profile-link {
    float: right;
}

#hd .hd_inner .row {
    position: relative;
}

#lingq-logo {
    float: left;
    margin: 0 20px;
}

#language {
    float: left;
    box-shadow: 0 0 2px #b1d0dd;
    color: #000;
}

#hd #language a {
    color: #000;
}

#language button {
    height: 35px;
    background: #fff;
    background-image: -webkit-linear-gradient(bottom, #fff 0%, #FBFDFE 100%);
    background-image: linear-gradient(to bottom, #fff 0%, #FBFDFE 100%);
    border: 1px solid #a7ccdb;
    border-bottom-color: #449fc5;
    font-weight: bold;
    font-size: 16px;
}

#language button.dropdown-toggle {
    padding: 0 5px;
    border-left-color: #81bad2;
}

#language button.dropdown-toggle:before,
#hd #navigation #main-menu li.split-menu-button .dropdown-arrow:before,
#hd #navigation #main-menu li.learn .menu-button:after,
#hd #navigation #main-menu li.friends .menu-button:after,
#hd #navigation #main-menu li.tasks .menu-button:after {
    content: "";
    display: inline-block;
    border: 5px solid #2087c8;
    border-color: #2087c8 transparent;
    border-width: 5px 6px 0 7px;
}

#hd #navigation #main-menu li.learn .menu-button:after,
#hd #navigation #main-menu li.friends .menu-button:after,
#hd #navigation #main-menu li.tasks .menu-button:after {
    margin: 0 -15px 0 15px;
}

#language:hover button,
#hd #navigation #main-menu > li:hover {
    background: #f1f7fa;
    background-image: -webkit-linear-gradient(bottom, #fff 0%, #f1f7fa 100%);
    background-image: linear-gradient(to bottom, #fff 0%, #f1f7fa 100%);
    border: 1px solid #25a6f1;
    box-shadow: 0 1px 0 #449fc5;
}

#language-choices-switch-popup {
    margin: 0;
    padding: 8px;
    background: #fdfdfd;
    border: 1px solid #27a6ef;
    border-radius: 0px 4px 0 0;
    box-shadow: inset 0 -1px #449fc5;
}

#language-choices-switch-popup li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#language-choices-switch-popup a {
    display: inline-block;
    margin: 0px;
    padding: 4px 4px 4px 28px;
    width: 180px;
    background-repeat: no-repeat;
    background-position: 4px center;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}

#language-choices-switch-popup a.beta-languages {
    padding-left: 4px;
}

#language-choices-switch-popup a:hover {
    background-color: #f1f7fa;
}

#language-choices-switch-popup .active-lang-en,
#settings-tabs .active-lang-en {
    background-image: url(../img/country-flags/gb.png);
}

#language-choices-switch-popup .active-lang-es,
#settings-tabs .active-lang-es {
    background-image: url(../img/country-flags/es.png);
}

#language-choices-switch-popup .active-lang-fr,
#settings-tabs .active-lang-fr {
    background-image: url(../img/country-flags/fr.png);
}

#language-choices-switch-popup .active-lang-de,
#settings-tabs .active-lang-de {
    background-image: url(../img/country-flags/de.png);
}

#language-choices-switch-popup .active-lang-ru,
#settings-tabs .active-lang-ru {
    background-image: url(../img/country-flags/ru.png);
}

#language-choices-switch-popup .active-lang-ja,
#settings-tabs .active-lang-ja {
    background-image: url(../img/country-flags/jp.png);
}

#language-choices-switch-popup .active-lang-zh,
#settings-tabs .active-lang-zh {
    background-image: url(../img/country-flags/cn.png);
}

#language-choices-switch-popup .active-lang-ko,
#settings-tabs .active-lang-ko {
    background-image: url(../img/country-flags/kr.png);
}

#language-choices-switch-popup .active-lang-sv,
#settings-tabs .active-lang-sv {
    background-image: url(../img/country-flags/se.png);
}

#language-choices-switch-popup .active-lang-pt,
#settings-tabs .active-lang-pt {
    background-image: url(../img/country-flags/pt38.png);
}

#language-choices-switch-popup .active-lang-it,
#settings-tabs .active-lang-it {
    background-image: url(../img/country-flags/it.png);
}

/* Unsupported languages */
#language-choices-switch-popup .active-lang-eo,
#settings-tabs .active-lang-eo {
    background-image: url(../img/country-flags/eo.png);
}

#language-choices-switch-popup .active-lang-cs,
#settings-tabs .active-lang-cs {
    background-image: url(../img/country-flags/cz.png);
}

#language-choices-switch-popup .active-lang-ar,
#settings-tabs .active-lang-ar {
    background-image: url(../img/country-flags/sa.png);
}

#language-choices-switch-popup .active-lang-no,
#settings-tabs .active-lang-no {
    background-image: url(../img/country-flags/no.png);
}

#language-choices-switch-popup .active-lang-hu,
#settings-tabs .active-lang-hu {
    background-image: url(../img/country-flags/hu.png);
}

#language-choices-switch-popup .active-lang-th,
#settings-tabs .active-lang-th {
    background-image: url(../img/country-flags/th.png);
}

#language-choices-switch-popup .active-lang-tr,
#settings-tabs .active-lang-tr {
    background-image: url(../img/country-flags/tr.png);
}

#language-choices-switch-popup .active-lang-vi,
#settings-tabs .active-lang-vi {
    background-image: url(../img/country-flags/vn.png);
}

#language-choices-switch-popup .active-lang-pl,
#settings-tabs .active-lang-pl {
    background-image: url(../img/country-flags/pl.png);
}

#language-choices-switch-popup .active-lang-ml,
#settings-tabs .active-lang-ml {
    background-image: url(../img/country-flags/my.png);
}

#language-choices-switch-popup .active-lang-hi,
#settings-tabs .active-lang-hi {
    background-image: url(../img/country-flags/in.png);
}

#language-choices-switch-popup .active-lang-la,
#settings-tabs .active-lang-la {
    background-image: url(../img/country-flags/la_roma.png);
}

#language-choices-switch-popup .active-lang-el,
#settings-tabs .active-lang-el {
    background-image: url(../img/country-flags/gr.png);
}

#language-choices-switch-popup .active-lang-he,
#settings-tabs .active-lang-he {
    background-image: url(../img/country-flags/il.png);
}

#language-choices-switch-popup .active-lang-sw,
#settings-tabs .active-lang-sw {
    background-image: url(../img/country-flags/ke.png);
}

#language-choices-switch-popup .active-lang-nl,
#settings-tabs .active-lang-nl {
    background-image: url(../img/country-flags/nl.png);
}

#language-choices-switch-popup .active-lang-hk,
#settings-tabs .active-lang-hk {
    background-image: url(../img/country-flags/hk.png);
}

#language-choices-switch-popup .active-lang-id,
#settings-tabs .active-lang-id {
    background-image: url(../img/country-flags/id.png);
}

#language-choices-switch-popup .active-lang-bg,
#settings-tabs .active-lang-bg {
    background-image: url(../img/country-flags/bg.png);
}

#language-choices-switch-popup .active-lang-sr,
#settings-tabs .active-lang-sr {
    background-image: url(../img/country-flags/rs.png);
}

#language-choices-switch-popup .active-lang-fa,
#settings-tabs .active-lang-fa {
    background-image: url(../img/country-flags/ir.png);
}

#language-choices-switch-popup .active-lang-da,
#settings-tabs .active-lang-da {
    background-image: url(../img/country-flags/dk.png);
}

#language-choices-switch-popup .active-lang-fi,
#settings-tabs .active-lang-fi {
    background-image: url(../img/country-flags/fi.png);
}

#language-choices-switch-popup .active-lang-ro,
#settings-tabs .active-lang-ro {
    background-image: url(../img/country-flags/ro.png);
}

#language-choices-switch-popup .active-lang-uk,
#settings-tabs .active-lang-uk {
    background-image: url(../img/country-flags/ua.png);
}

#hd #language ul li {
    line-height: 150%;
}

#hd .value,
#hd label {
    font-weight: bold;
}

#hd .value,
#hd .value a {
    color: #00fced;
}

#hd label {
    color: #f0ff00;
}

#hd #tool-menu #user-name {
    float: left;
    margin-right: 0.5em;
}

#hd {
    padding-bottom: 15px;
}

#hd .words_qty {
    float: left;
    margin: 0 0 0 40px;
    color: #000;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

#hd .words_qty big {
    display: block;
    font-size: 18px;
}

#hd .header-well {
    float: right;
    margin: 13px 0 0;
    padding: 4px 6px;
    background: #a8d9ee;
    border: 1px solid #daeef6;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px #85b5c9;
}

#lang-brand {
    float: left;
    padding-top: 20px;
}

/* navigation */
#main-menu {
    float: right;
    margin: 3px 0;
}

#main-menu li {
    margin: 0;
    padding: 0 5px;
    height: 35px;
    background: #fff;
    background-image: -webkit-linear-gradient(bottom, #fff 0%, #fbfdfe 100%);
    background-image: linear-gradient(to bottom, #fff 0%, #fbfdfe 100%);
    border: 1px solid #a7ccdb;
    border-radius: 4px;
    box-shadow: 0 0 2px 1px #9fcde1;
    list-style-type: none;
}

#hd #navigation #main-menu li.split-menu-button.left_button {
    margin-right: 0;
    border-radius: 4px 0 0 4px;
}

#hd #navigation #main-menu li.split-menu-button.right_button {
    position: relative;
    margin-left: 1px;
    border-radius: 0 4px 4px 0;
}

#hd #navigation #main-menu li.split-menu-button.left_button a {
    border-radius: 2px 0 0 2px;
}

#hd #navigation #main-menu li.split-menu-button.right_button a {
    border-radius: 0 0 2px 0;
}

#hd #navigation #main-menu li.special {
    float: right;
}

#hd #navigation #main-menu > li:hover {
    box-shadow: 0 0 2px 1px #9fcde1;
}

#hd #navigation #main-menu > li > .menu-button {
    display: block;
    padding: 0 15px 0 43px;
    width: auto;
    height: 34px;
    background: url(../style/images/menu_icons.png) no-repeat 7px 8px;
    border-bottom: 1px solid #449fc5;
    color: #000;
    font: bold 14px/30px Arial, sans-serif;
    text-decoration: none;
}

#hd #navigation #main-menu li.split-menu-button .dropdown-arrow {
    display: inline-block;
    padding: 0;
    width: 23px;
    background: none;
    text-align: center;
}

#hd #navigation #main-menu li {
    position: relative;
    cursor: default;
}

#hd #navigation #main-menu li.friends > .menu-button {
    background-position: 7px -149px;
}

#hd #navigation #main-menu li.teach > a {
    background-position: 7px -70px;
}

#hd #navigation #main-menu li.forum > a {
    background-position: 7px -228px;
}

#hd #navigation #main-menu li.tasks > .menu-button {
    background-position: 12px -308px;
}

#hd #navigation #main-menu li > .menu-button {
    padding-right: 20px;
}

#hd #navigation #main-menu li.tasks .menu-button span {
    display: inline-block;
    padding-right: 15px;
}

#hd #navigation #main-menu li.current {
    height: 35px;
    background: #2087c8;
    border: 1px solid #25a6f1;
}

#hd #navigation #main-menu li.current > a {
    background-position: 7px -393px;
    color: #fefefe;
    line-height: 29px;
}

#hd #navigation #main-menu li.friends.current > a {
    background-position: 7px -553px;
}

#hd #navigation #main-menu li.forum.current > a {
    background-position: 7px -633px;
}

#hd #navigation #main-menu li ul {
    display: none;
    position: absolute;
    margin: 0;
    height: 30px;
}

#hd #navigation #main-menu li.special ul {
    right: 10px;
    left: auto;
}

#hd #navigation #main-menu li.active ul {
    display: block;
    z-index: 500;
}

#hd #navigation #main-menu li ul li {
    float: none;
    padding-bottom: 5px;
    height: auto;
    white-space: nowrap;
}

#hd #navigation #main-menu li ul li.active-lesson {
    white-space: normal;
}

#hd #navigation #main-menu li ul li,
#hd #navigation #main-menu li ul li:hover,
#hd #navigation #main-menu li ul li a {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#hd #navigation #main-menu li ul li a {
    overflow: hidden;
    text-decoration: none;
}

#hd #navigation #main-menu li.tasks.active {
    border-bottom: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

#hd #navigation #main-menu .tasks .menu:not(.over) .active-lesson:first-child,
#hd #navigation #main-menu .active .menu:not(.over) .menu-item-first,
#hd #navigation #main-menu .active li:hover,
#hd #navigation #main-menu .tasks .active-lesson:hover {
    background: #f1f7fa;
}

#hd #navigation #main-menu li ul {
    right: 0;
    padding: 0;
    height: auto;
    background: #fff;
    border: 1px solid #27a6ef;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: inset 0 -1px #449fc5;
}

#hd #navigation #main-menu li.tasks {
    position: relative;
}

#hd #navigation #main-menu li.tasks ul {
    margin: 0;
}

#hd #navigation #main-menu li.learn ul li.menu-item,
#hd #navigation #main-menu li.friends ul li.menu-item,
#hd #navigation #main-menu li.tasks ul li.menu-item {
    float: none;
    display: block;
    margin: 0;
    padding: 4px 5px;
    list-style: none;
}

#hd #navigation #main-menu li.learn ul li.menu-item a,
#hd #navigation #main-menu li.friends ul li.menu-item a,
#hd #navigation #main-menu li.tasks ul li.menu-item a {
    padding: 0;
    height: auto;
    background: none;
    font: 11px Arial, sans-serif;
}

#hd #navigation #main-menu li.learn ul li .menu-item-icon,
#hd #navigation #main-menu li.friends ul li .menu-item-icon,
#hd #navigation #main-menu li.tasks ul li .menu-item-icon {
    float: left;
    margin-right: 5px;
    width: 24px;
    height: 15px;
}

#hd #navigation #main-menu li ul li a {
    display: block;
    color: #2087C8;
    font: bold 12px Arial, sans-serif;
    word-wrap: break-word;
    text-align: left;
}

#hd #navigation #main-menu li ul li a:before {
    content: "";
    position: relative;
    top: 2px;
    display: inline-block;
    margin-right: 5px;
    width: 18px;
    height: 15px;
    background: url(../images/tasks/icons/icons_small_before.png) no-repeat left top;
}

#hd #navigation #main-menu li ul li.menu-icon-join-conversation a:before {
    background-position: left -34px;
}

#hd #navigation #main-menu li ul li.menu-icon-teach a:before {
    height: 17px;
    background-position: left -330px;
}

#hd #navigation #main-menu li ul li.menu-icon-import-lesson a:before {
    background-position: left -118px;
}

#hd #navigation #main-menu li ul li.menu-icon-find-tutor a:before {
    background-position: left -101px;
}

#hd #navigation #main-menu li ul li.menu-icon-library a:before {
    background-position: left -135px;
}

#hd #navigation #main-menu li ul li.menu-icon-my-lessons a:before {
    background-position: 3px -266px;
}

#hd #navigation #main-menu li ul li.menu-icon-review-vocabulary a:before {
    background-position: 2px -251px;
}

#hd #navigation #main-menu li ul li.menu-icon-tutors a:before {
    background-position: 2px -101px;
}

#hd #navigation #main-menu .menu-icon-learn a:before,
#hd #navigation #main-menu .menu-icon-exchange a:before {
    background: url(../style/images/menu_icons.png) no-repeat 2px 2px;
    background-size: 18px 577px;
}

#hd #navigation #main-menu .menu-icon-exchange a:before {
    background-position: 2px -121px;
}

#hd #navigation #main-menu li.tasks ul li.active-lesson img {
    float: left;
    margin-right: 5px;
    width: 24px;
    height: 24px;
}

#hd #navigation #main-menu li.tasks ul li.active-lesson {
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

#hd #navigation #main-menu li.tasks ul li.active-lesson a:before {
    display: none;
}

#hd #navigation #main-menu li.tasks ul li.active-lesson span {
    padding: 0;
    background-image: none;
    color: #666;
    vertical-align: top;
}

#hd #navigation #main-menu li.learn ul li.menu-item-first,
#hd #navigation #main-menu li.tasks ul li.menu-item-task-first,
#hd #navigation #main-menu li.friends ul li.menu-item-first {
    padding-top: 10px;
}

#hd #navigation #main-menu li.learn ul li:last-child,
#hd #navigation #main-menu li.tasks ul li:last-child {
    padding-bottom: 10px;
}

#hd #navigation #main-menu #courses-submenu {
    left: 2em;
}

#hd #navigation #main-menu #community-submenu {
    left: 9em;
}

#hd #navigation #main-menu #tutor-submenu {
    right: 2em;
}