/**
 * Tatoeba Project, free collaborative creation of multilingual corpuses project
 * Copyright (C) 2010  HO Ngoc Phuong Trang <tranglich@gmail.com>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http: //www.gnu.org/licenses/>.
 */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(../fonts/MaterialIcons-Regular.woff) format('woff'),
    url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

/*
 * Generic rules
 */
body, select, input, textarea, button, option, optgroup {
    font-family: "Noto Sans", sans-serif;

    /* Fonts for other languages */
    /*
    "Noto Kufi Arabic", "Noto Naskh Arabic",
    "Noto Nastaliq Urdu", "Noto Sans Armenian", "Noto Sans Avestan",
    "Noto Sans Balinese", "Noto Sans Bamum", "Noto Sans Batak",
    "Noto Sans Bengali", "Noto Sans Brahmi", "Noto Sans Buginese",
    "Noto Sans Buhid", "Noto Sans CJK JP", "Noto Sans CJK KR",
    "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans Canadian Aboriginal",
    "Noto Sans Carian", "Noto Sans Cham", "Noto Sans Cherokee",
    "Noto Sans Coptic", "Noto Sans Cuneiform", "Noto Sans Cypriot",
    "Noto Sans Deseret", "Noto Sans Devanagari", "Noto Sans Egyptian Hieroglyphs",
    "Noto Sans Ethiopic", "Noto Sans Georgian", "Noto Sans Glagolitic",
    "Noto Sans Gothic", "Noto Sans Gujarati", "Noto Sans Gurmukhi",
    "Noto Sans Hanunoo", "Noto Sans Hebrew", "Noto Sans Imperial Aramaic",
    "Noto Sans Inscriptional Pahlavi", "Noto Sans Inscriptional Parthian",
    "Noto Sans Javanese", "Noto Sans Kaithi", "Noto Sans Kannada",
    "Noto Sans Kayah Li", "Noto Sans Kharoshthi", "Noto Sans Khmer",
    "Noto Sans Lao", "Noto Sans Lepcha", "Noto Sans Limbu", "Noto Sans Linear B",
    "Noto Sans Lisu", "Noto Sans Lycian", "Noto Sans Lydian",
    "Noto Sans Malayalam", "Noto Sans Mandaic", "Noto Sans Meetei Mayek",
    "Noto Sans Mongolian", "Noto Sans Myanmar", "Noto Sans NKo",
    "Noto Sans New Tai Lue", "Noto Sans Ogham", "Noto Sans Ol Chiki",
    "Noto Sans Old Italic", "Noto Sans Old Persian", "Noto Sans Old South Arabian",
    "Noto Sans Old Turkic", "Noto Sans Oriya", "Noto Sans Osmanya",
    "Noto Sans Phags Pa", "Noto Sans Phoenician", "Noto Sans Rejang",
    "Noto Sans Runic", "Noto Sans Samaritan", "Noto Sans Saurashtra",
    "Noto Sans Shavian", "Noto Sans Sinhala", "Noto Sans Sundanese",
    "Noto Sans Syloti Nagri", "Noto Sans Syriac Eastern",
    "Noto Sans Syriac Estrangela", "Noto Sans Syriac Western",
    "Noto Sans Tagalog", "Noto Sans Tagbanwa", "Noto Sans Tai Le",
    "Noto Sans Tai Tham", "Noto Sans Tai Viet", "Noto Sans Tamil",
    "Noto Sans Telugu", "Noto Sans Thaana", "Noto Sans Thai", "Noto Sans Tibetan",
    "Noto Sans Tifinagh", "Noto Sans Ugaritic", "Noto Sans Vai",
    "Noto Sans Yi", "Noto Serif Armenian", "Noto Serif Georgian",
    "Noto Serif Khmer", "Noto Serif Lao", "Noto Serif Thai",
    */
}

div, p {
    word-wrap: break-word;
}

html, body {
    padding: 0;
    margin: 0;
    color: #222222;
    background: #F5F5F5;
}

textarea {
    border: 1px solid #ddd;
}

label, input[type="checkbox"] {
    vertical-align: middle;
}

a img {
    border: none;
}

a {
    color: #4caf50;
    text-decoration: none;
}

md-radio-button{
    margin: 16px 0px; 
}

a:hover {
    cursor: pointer;
    color: #DD8800;
}

.titleAnnexeLink {
    font-weight: normal;
    font-size: 13px;
    padding: 2px 8px;
    margin: 5px;
    border-radius: 4px;
    color: #fff;
    background: #4caf50;
}

.titleAnnexeLink:hover {
    color: #fff;
}

h4 {
    margin: 10px 0 5px 20px;
    color: #555;
    font-size: 1.1em;
}

table {
    border-collapse: collapse;
    width: 100%;
}

fieldset {
    border: none;
}

dt {
    font-weight: bold;
}

svg {
    display: block;
    width: inherit;
    height: inherit;
    fill: currentColor; /* Needs https://github.com/jonathantneal/svg4everybody
                           to work on every browser */
}

rt {
    font-size: 50%;
    color: #A1A1A1;
}

.translations rt {
    font-size: 66%;
}

/* User Menu : Main Menu */

#top_menu_container {
    background-color: #414141;
    border-bottom: 1px solid #000000;
}

#top_menu {
    width: 960px;
    margin: auto;
    overflow: hidden;
    padding: 10px;
}

#top_menu .whatsNewItem {
    font-weight: bold;
    color: #FFCC00;
}

#top_menu a {
    color: #FFFFFF;
}

#top_menu a:hover {
    color: #FB6B10;
}


/*
 * Menu (Home, Browse, etc)
 */
#top_menu ul {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

#top_menu li {
    display: inline-block;
    padding: 0;
}

#top_menu .menuSection{
    display:block;
    line-height:30px;
    margin:0;
    padding:0 10px;
    text-align:center;
    text-decoration:none;
}

#top_menu li a:hover, #top_menu ul li:hover a{
    text-decoration:none;
}

#top_menu li ul{
    background:#414141;
    display:none;
    height:auto;
    padding:0;
    margin:0;
    border:0;
    position:absolute;
    width:225px;
    z-index:200;
}

#top_menu li:hover ul{
    display:block;
}

#top_menu li li {
    border-top: 1px solid #555;
    display:block;
    float:none;
    margin:0;
    padding:0;
    width:225px;
    line-height: 24px;
}

#top_menu li:hover li a {
    background:none;
}

#top_menu li ul a {
    display:block;
    margin:0;
    padding:7px 10px;
    text-align:left;
}

#top_menu li ul a:hover, #top_menu li ul li:hover a {
    border:0;
    text-decoration:none;
}

#top_menu .show {
    font-size: 1.2em;
    font-weight: bold;
}

.menuItem img {
    margin-left: 2px;
}


/* 
 * Interface Language Selector
 */

#languageSelection {
    margin-left: 10px;
    margin-top: 2px;
}

/* 
 * User Menu 
 */
#languageSelectionContainer,
#user_menu {
    line-height: 48px;
    float: right;
}

#profile img {
    position: relative;
    top: 2px;
    margin-right: 2px;
}

#log_out img {
    position: relative;
    top: 2px;
}

#inbox img {
    position: relative;
    top: 3px;
}

.newMessage {
    font-weight: bold;
}


/*
 * Container
 */

.container {
    width: 960px;
    margin: auto auto 10px;
}


/*
 * search bar
 */

.search_bar a {
    color: white;
}

.search_bar label {
    color: white;
    font-size: 15px;
}

.search_bar label[for="SentenceQuery"] {
    display: none;
}

#SentenceSearchForm {
    max-width: 960px;
    margin: auto;
}

#SentenceQuery {
    width: 400px;
    font-size: 20px;
    padding: 2px 5px;
    padding-right: 30px;
    height: 36px;
    border: 1px solid #DDDDDD;
    background-color: #FFFFFF;
}

.search_bar select {
    background-color: #FFFFFF;
    color: #111111;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    width: 200px;
    font-size: 14px;
    height: 36px;
}

.search_bar .input {
    position: relative;
}

.search_bar #clearSearch {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #CCCCCC;
    margin-left: -30px;
}

.search_bar .search-submit-button {
    width: 70px;
    min-width: 0;
}

.search_bar .search-submit-button.md-raised:hover {
    background-color: #DDDDDD;
}

.search_bar #arrow {
    padding: 0 10px;
    line-height: 40px;
    cursor: pointer;
}

.search-bar-extra a {
    color: #FFFFFF;
    margin: 0 10px;
    font-size: 15px;
}

.search-bar-extra a:hover {
    color: #111111;
}

.search-bar-extra a:before {
    content: '▸ ';
}


#logo {
    color: #EEEEEE;
    font-size: 24px;
    margin-right: 10px;
}

#logo .tatoeba-name,
#logo img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}

#tatoeba {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.7;
    filter: alpha(opacity=70);
    display: inline-block;
    padding: 5px 8px 5px 13px;
    background: #fff;
    color: #649B3D;
    font-size: 12px;
    border-top-left-radius: 20px;
    font-weight: bold;
}

/*
 * Content 
 */

#content {
    width: 100%;
    background: #FFFFFF;
    min-height: 550px;
    padding: 20px 0;
}

#annexe_content {
    float: right;
    width: 270px;
}

#main_content {
    margin-right: 290px;
}

.section {
    padding: 20px;
    margin-bottom: 20px;
}
.section h1, .section h2 {
    margin-top: 5px;
}

.module {
    padding: 10px 10px 5px 10px;
    margin: 0 0 20px 0;
    font-size: 14px;
    border-bottom: 1px solid #ededed;
    background: linear-gradient(to top, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0) 100%);
}
#annexe_content .module {
    margin-left: 5px;
}

#annexe_content ul {
    margin: 0;
    padding-left: 0;
}

#annexe_content ul li {
    list-style-type: none;
}


/*
 * Footer 
 */
#footer {
    padding-bottom: 10px;
}

#footer .category {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    font-size: 16px;
}

#footer .category h3 {
    border-bottom: 1px solid #E2E2E2;
    font-size: inherit;
    font-weight: normal;
    padding: 0 0 15px 0;
}


#footer ul {
    margin: 0;
    padding: 0;
}
#footer li {
    list-style: none;
    font-size: 15px;
    margin: 5px 0;
}
#footer .license {
    font-size: 15px;
    margin-top: 20px;
}
#footer .license .text,
#footer .cc-by-icon {
    display: inline-block;
}
#footer .license .text {
    max-width: 820px;
    margin-left: 10px;
}

/*
 * HTML Elements
 */
.more_link {
    text-align: right;
}


/*
 * ">>"
 */
.ToLanguage {
    font-size: 1.3em;
    margin: 0 5px;
}

/*
 * Flash message
 */
#flashMessage {
    margin: 20px 5% 40px 5%;
    padding: 20px;
    color: #ffffff;
    background: #424242;
    border: none;
    border-radius: 2px;
}

/*
 * Warning
 */
.warning {
    font-size: 15px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #FFC1B5;
    background-color: #FFDDD6; 
    color: #D1523C;
}

/* 
 * Important 
 */
.important {
    color: red;
}

#session_expired {
    color: red;
    padding: 10px;
    background-color: #F1F1F1;
    border: #E1E1E1 1px solid;
}

/*
 * Login Form 
 */
#UserLoginForm_FromBar {
    position: absolute;
    top: 60px;
    z-index: 1000;
    min-width: 270px;
    padding: 5px 10px;
    background: #414141;
    color: #FFF;
    border: 1px solid #000000;
    border-top: none;
}

#UserLoginForm_FromBar fieldset {
    border: 0;
    text-align: right;
    line-height: 25px;
}

#UserLoginForm_FromBar label {
    text-align: right;
}

#UserLoginForm_FromBar input[type='text'], #UserLoginForm_FromBar input[type='password'] {
    width: 120px;
    display: inline-block;
    padding: 3px 5px;
    color: #414141;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.25);
}

#UserLoginForm_FromBar input[type='submit'] {
    width: 120px;
    background: #222;
    display: inline-block;
    padding: 4px 10px 5px;
    color: #FFF;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    font-size: 0.9em;
}

#UserLoginForm_FromBar p {
    margin: 0;
    padding: 0;
}


/*
 * Other
 */
.annexeMenu {
    list-style: none;
}

.annexeMenu .item {
    margin: 5px 0;
}

.annexeMenu .item:before {
    content: "\00BB \0020";
}

.profile-actions {
    margin: 20px 0;
}

.profile-action-item {
    display: block;
    margin: 5px 0;
}

.profile-action-item svg,
.profile-action-item span {
    display: inline;
    vertical-align: middle;
    margin-right: 3px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 *
 */
.announcement {
    display: none;
    margin: 20px;
    padding: 20px;
    background: #06A;
    color: #ffffff;
    border-radius: 5px;
    font-size: 20px;
}
.announcement .close.button {
    float: right;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 10px;
}
.announcement a {
    color: #FFD800;
    border-radius: 2px;
}

/*
 * Angular Material override
 */

md-toolbar {
    transition: none;
}

.md-button {
    padding: 0 10px;
    font-size: 16px;
}

md-list-item.md-2-line .md-list-item-text h3,
md-list-item.md-2-line > ._md-no-style .md-list-item-text h3,
md-list-item.md-3-line .md-list-item-text h3,
md-list-item.md-3-line > ._md-no-style .md-list-item-text h3 {
    line-height: inherit;
}

md-card md-card-header md-card-avatar .md-user-avatar, md-list-item .md-avatar {
    border-radius: 10%;
}