/******************************************************************/


/**** Responsive UI css for DSAL dictionaries -- Nov 2019, CMC ****/


/******************************************************************/


/**** small screens ****/


/**** search form first, top to bottom ****/

@font-face {font-family: 'RobotoSlab-Regular';
        src: url('fonts/static/RobotoSlab-Regular.ttf') format('truetype'); /*non-IE */
        }

@font-face {font-family: 'RobotoSlab-Medium';
        src: url('fonts/static/RobotoSlab-Medium.ttf') format('truetype'); /*non-IE */
        }

@font-face {font-family: 'RobotoSlab-Bold';
        src: url('fonts/static/RobotoSlab-Bold.ttf') format('truetype'); /*non-IE */
        }

@font-face {font-family: 'RobotoSlab-SemiBold';
        src: url('fonts/static/RobotoSlab-SemiBold.ttf') format('truetype'); /*non-IE */
        }

a:link {
   color: navy;
   text-decoration: underline;
}

a:visited {
   color: green;
   text-decoration: underline;
}

/**** main index/list pages ****/

.dico_list_wrapper {
   margin-top: 10px;
   margin-left: 40px;
   margin-right: 40px;
}

.dico_list {
   column-count: 4;
   column-width: 250px;
   column-gap: 4em;
   column-rule: 1px dotted #ddd;
   padding-left: 10%;
   padding-right: 10%;
}

.list_page_list {
   column-count: 4;
   column-width: 150px;
   column-gap: 4em;
   column-rule: 1px dotted #ddd;
   padding-left: 10%;
   padding-right: 10%;
}

.p_dico_list {
   display: block;
   margin-left: 20px;
   margin-bottom: 15px;
   font-size: 15px;
   font-family: "arial";
   font-weight: 400;
   font-size: 14px;
}

.p_list {
   display: block;
   margin-left: 20px;
   font-family: "RobotoSlab-Medium";
   font-weight: 500;
   font-size: 15px;
}

.CRL {
   font-family: "RobotoSlab-Medium";
   color: green;
   font-weight: 500;
   font-size: 15px;
}

/**** search forms ****/

#responsive_main_head {
    margin: auto;
    text-align: center;
    width: 80%;
    padding-bottom: 10px;
}

.responsive_index_banners {
    display: table;
    margin: auto;
    text-align: center;
    width: 80%;
    background-color: #91ACB7;
}

.responsive_index_banners_row {
    display: table-row;
}

#responsive_nav_table {
    border-spacing: 2px;
    display: table;
    margin: auto;
    text-align: center;
    width: 90%;
}

#responsive_nav_table_row {
    display: table-row;
    background-color: #91ACB7;
}

.responsive_blue_td {
    border-radius: 2px;
    box-shadow: .5px .75px .5px .25px #888888;
    border-spacing: 2px;
    display: table-cell;
    font-family: "RobotoSlab-Medium";
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    margin: auto;
    padding: 2px;
    height: 18px;
}

#responsive_dico_banner {
    margin: auto;
    text-align: center;
    width: 70%;
    padding-top: 10px;
    padding-bottom: 10px;
}

img.banner {
    width: 100%;
}

#responsive_help_table {
    border-spacing: 2px;
    display: table;
    margin: auto;
    text-align: center;
    width: 60%;
    padding-bottom: 10px;
}

#responsive_help_table_row {
    display: table-row;
    margin: auto;
    background-color: #BBC8A7;
}

.responsive_help_td {
    font-family: "RobotoSlab-Medium";
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}

#responsive_search {
    display: table;
    margin: auto;
    width: 90%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

#responsive_search_tr {
    display: table-row;
    margin: auto;
}

#responsive_search_td {
    font-family: "RobotoSlab-Medium";
    font-weight: 500;
    font-size: 12px;
    display: table-cell;
}

#responsive_search_buttons {
    display: table;
    margin: auto;
    text-align: center;
    padding-top: 10px;
    width: 100%;
}

#responsive_search_buttons_tr {
    display: table-row;
    margin: auto;
}

#responsive_search_buttons_td {
    display: table-cell;
    margin: auto;
}

hr {
    width: 90%;
}

.responsive_search_options {
    display: table;
    margin: auto;
    text-align: center;
    width: 90%;
    padding-top: 10px;
}

.responsive_search_options_tr {
    display: table-row;
    margin: auto;
}

.search_options_td {
    display: table-cell;
    text-align: left;
    font-family: "arial";
    font-weight: 400;
    font-size: 14px;
    padding-bottom: 5px;
}

#responsive_dico_info {
    padding-top: 5px;
    margin: auto;
    width: 100%;
}

.responsive_blockquote {
   margin: auto;
   width: 90%;
   font-family: "arial";
   font-weight: 400;
   font-size: 14px;
}

.responsive_blockquote_main_pages {
   margin: auto;
   width: 90%;
   font-family: "RobotoSlab-Medium";
   font-size: 14px;
}

#responsive_links_table {
    display: table;
    padding-top: 10px;
    margin: auto;
    width: 90%;
}

.responsive_links_table_tr {
    display: table-row;
}

.responsive_links_table_td_left {
    display: table-cell;
    text-align: left;
    width: 50%;
    font-family: "RobotoSlab-Regular";
    font-size: 10px;
    padding-bottom: 10px;
}

.responsive_links_table_td_right {
    display: table-cell;
    text-align: right;
    width: 50%;
    font-family: "RobotoSlab-Regular";
    font-size: 10px;
    padding-bottom: 10px;
}

.include1 {
    margin: auto;
    width: 90%;
    font-family: "RobotoSlab-Regular";
    font-size: 10px;
}

.include2 {
    margin: auto;
    width: 90%;
    font-family: "RobotoSlab-Regular";
    font-size: 10px;
    padding-bottom: 10px;
}


/**** end of search form ****/


/**** query results now, starting with results header ****/

img.inline_image {
    margin: auto;
    height: auto;
    max-width: 25%;
    display: block;
}


/**** one off for hayyim, which had a handful of page images instead of keyed-in text ****/

img.full_inline_image {
    margin: auto;
    width: 100%;
    display: block;
    text-align: center;
}

#responsive_results_banner_table {
    display: table;
    margin: auto;
    width: 100%;
}

#responsive_banner_td_left {
    display: none;
}

#responsive_banner_td_center {
    display: table-cell;
    width: 100%;
    height: auto;
    text-align: center;
}

#responsive_banner_td_right {
    display: none;
}

#query_display {
    display: block;
    margin: auto;
    width: 90%;
    font-family: "RobotoSlab-Regular";
    font-size: 15px;
}

#query_display b {
    font-family: "RobotoSlab-Bold";
}

#transliteration_tip {
    display: block;
    font-family: "RobotoSlab-Regular";
    font-size: 15px;
    padding-top: 10px;
}

#transliteration_modal_override{
    font-family: "arial";
    font-size: 15px;
}

#display_toggle {
    display: block;
    margin: auto;
    width: 90%;
    font-family: "Book Antiqua", Georgia, "Times New Roman", Times, serif;
    font-size: medium;
}

#page {
    display: block;
    margin: auto;
    width: 95%;
}

#page_turner {
    display: block;
    margin: auto;
    width: 100%;
}

.turner {
    font-family: "RobotoSlab-Medium";
    font-size: 13px;
}

.results_display {
    display: block;
    margin: auto;
    width: 95%;
}

.hw_result {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    padding: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    background: #fff;
    font-family: "arial";
    font-size: 16px;
}

.hw_result b {
}

.h2 {
    display: block;
    margin: auto;
    width: 80%;
}

#responsive_footer_table {
    display: table;
    margin: auto;
    text-align: center;
}

#responsive_footer_td {
    display: table-cell;
    font-family: "RobotoSlab-Medium";
    font-size: 14px;
    text-align: center;
}

.container-borders .tableHeadCell,
.container-borders .tableCell {
    border: 1px solid black;
}

.container-no-borders .tableHeadCell,
.container-no-borders .tableCell {
    border: 0px;
}

.container-borders {
    display: table;
    padding: 10px;
}

.container-no-borders {
    display: table;
    padding: 10px;
}

.row {
    display: table-row;
}

.tableHeadCell {
    display: table-cell;
    padding-left: 2px;
    font-weight: bold;
    text-align: center;
}

.tableCell {
    display: table-cell;
    margin: auto;
    padding-right: 5px;
    padding-left: 2px;
}

var {
    font-style: normal;
}


/**** medium screens ****/

@media only screen and (min-width: 600px) {
    #responsive_main_head {
        margin: auto;
        text-align: center;
        width: 70%;
        padding-bottom: 10px;
    }
    #responsive_nav_table {
        display: table;
        margin: auto;
        text-align: center;
        width: 70%;
    }
    /**** skipping #responsive_nav_table_row ****/
    .responsive_blue_td {
        display: table-cell;
   	font-size: 15px;
        text-align: center;
        margin: auto;
        padding: 3px;
        height: 20px;
    }
    #responsive_dico_banner {
        margin: auto;
        text-align: center;
        width: 40%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /**** skipping img.banner ****/
    #responsive_help_table {
        display: table;
        border-spacing: 2px;
        margin: auto;
        text-align: center;
        width: 40%;
        padding-bottom: 10px;
    }
    /**** skipping #responsive_help_table_row ****/
    .responsive_help_td {
        background-color: #BBC8A7;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
    }
    #responsive_search {
        display: table;
        width: 90%;
        margin: auto;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /**** skipping #responsive_search_tr ****/
    #responsive_search_td {
        display: table-cell;
        font-size: 13px;
    }
    #responsive_search_buttons {
        display: table;
        margin: auto;
        text-align: center;
        padding-top: 10px;
        width: 40%;
    }
    /**** skipping #responsive_search_buttons_tr and #responsive_search_buttons_td ****/
    hr {
        width: 80%;
    }
    .responsive_search_options {
        display: table;
        margin: auto;
        text-align: center;
        width: 70%;
        padding-top: 10px;
    }
    /**** skipping .responsive_search_options_tr ****/
    .search_options_td {
        display: table-cell;
        font-size: 14px;
        text-align: left;
        margin: auto;
        padding-bottom: 10px;
    }
    #responsive_dico_info {
        padding-top: 5px;
        margin: auto;
        width: 80%;
    }
    .responsive_blockquote {
        margin: auto;
        width: 90%;
        padding-top: 10px;
        font-size: 14px;
    }


    .responsive_blockquote_main_pages {
        margin: auto;
        width: 90%;
        padding-top: 10px;
        font-size: 14px;
    }

    #responsive_links_table {
        display: table;
        padding-top: 10px;
        margin: auto;
        width: 90%;
    }
    /**** skipping .responsive_links_table_tr ****/
    .responsive_links_table_td_left {
        display: table-cell;
        text-align: left;
        width: 50%;
        font-size: 12px;
        padding-bottom: 10px;
    }
    .responsive_links_table_td_right {
        display: table-cell;
        text-align: right;
        width: 50%;
        font-size: 12px;
        padding-bottom: 10px;
    }
    .include1 {
        margin: auto;
        width: 90%;
        font-size: 12px;
    }
    .include2 {
        margin: auto;
        width: 90%;
        font-size: 12px;
        padding-bottom: 10px;
    }
    /**** end of search form ****/
    /**** query results now, starting with results header ****/
    img.inline_image {
        margin: auto;
	height: auto;
        max-width: 15%;
        display: block;
        text-align: center;
    }
    /**** one-off for hayyim ****/
    img.full_inline_image {
        margin: auto;
        width: 100%;
        display: block;
        text-align: center;
    }
    #responsive_results_banner_table {
        display: table;
        margin: auto;
        width: 100%;
    }
    #responsive_banner_td_left {
        display: table-cell;
        margin: auto;
        text-align: center;
        max-width: 33%;
    }
    #responsive_banner_td_center {
        display: table-cell;
        margin: auto;
        text-align: center;
        width: 33%;
    }
    #responsive_banner_td_right {
        display: table-cell;
        margin: auto;
        text-align: center;
        width: 33%;
    }
    /**** skipping #query_display, #display_toggle, #page ****/
    #page_turner {
        display: block;
        margin: auto;
        width: 90%;
    }
    .turner {
    	font-size: 14px;
    }
    /**** skipping .results_display, .hw_result, .h2, #responsive_footer_table, 
	#responsive_footer_td, and all tables in dictionary text data ****/
}


/**** large screens ****/

@media only screen and (min-width: 768px) {
    #responsive_main_head {
        margin: auto;
        text-align: center;
        width: 40%;
        padding-bottom: 10px;
    }
    #responsive_nav_table {
        display: table;
        margin: auto;
        text-align: center;
        width: 60%;
        border-spacing: 2px;
    }
    #responsive_nav_table_row {
        display: table-row;
        margin: auto;
        background-color: #91ACB7;
    }
    .responsive_blue_td {
        display: table-cell;
        font-size: 15px;
        text-align: center;
        margin: auto;
        padding: 3px;
        height: 20px;
    }
    #responsive_dico_banner {
        margin: auto;
        text-align: center;
        width: 30%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    img.banner {
        width: 100%;
    }
    #responsive_help_table {
        border-spacing: 2px;
        display: table;
        margin: auto;
        text-align: center;
        width: 30%;
        padding-bottom: 10px;
    }
    /**** skipping #responsive_help_table_row ****/
    .responsive_help_td {
        font-size: 13px;
        font-weight: bold;
        text-align: center;
    }
    #responsive_search {
        width: 70%;
        margin: auto;
        display: table;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /**** skipping #responsive_search_tr ****/
    #responsive_search_td {
        font-size: 13px;
        display: table-cell
    }
    #responsive_search_buttons {
        display: table;
        margin: auto;
        text-align: center;
        padding-top: 10px;
        width: 40%;
    }
    /**** skipping #responsive_search_buttons_tr and #responsive_search_buttons_td ****/
    hr {
        width: 80%;
    }
    .responsive_search_options {
        display: table;
        margin: auto;
        text-align: center;
        width: 60%;
        padding-top: 10px;
    }
    /**** skipping .responsive_search_options_tr ****/
    .search_options_td {
        display: table-cell;
        font-size: 14px;
        text-align: left;
        margin: auto;
        padding-bottom: 10px;
    }
    #responsive_dico_info {
        padding-top: 5px;
        margin: auto;
        width: 80%;
    }
    .responsive_blockquote {
        margin: auto;
        width: 90%;
        padding-top: 10px;
   	font-size: 14px;
    }

    .responsive_blockquote_main_pages {
        margin: auto;
        width: 90%;
        padding-top: 10px;
        font-size: 14px;
    }

    #responsive_links_table {
        display: table;
        padding-top: 10px;
        margin: auto;
        width: 90%;
    }
    /**** skpping .responsive_links_table_tr ****/
    .responsive_links_table_td_left {
        display: table-cell;
        text-align: left;
        width: 50%;
        font-size: 12px;
        padding-bottom: 10px;
    }
    .responsive_links_table_td_right {
        display: table-cell;
        text-align: right;
        width: 50%;
        font-size: 12px;
        padding-bottom: 10px;
    }
    .include1 {
        margin: auto;
        width: 90%;
        font-size: 12px;
    }
    .include2 {
        padding-bottom: 10px;
        margin: auto;
        width: 90%;
        font-size: 12px;
    }
    /**** end of search form ****/
    /**** query results now, starting with results header ****/
    img.inline_image {
        margin: auto;
	height: auto;
        max-width: 15%;
        display: block;
        text-align: center;
    }
    /**** hayyim ****/
    img.full_inline_image {
        margin: auto;
        width: 100%;
        display: block;
        text-align: center;
    }
    #responsive_results_banner_table {
        display: table;
        width: 100%;
    }
    #responsive_banner_td_left {
        display: table-cell;
        margin: auto;
        text-align: center;
        width: 33%;
    }
    #responsive_banner_td_center {
        display: table-cell;
        margin: auto;
        text-align: center;
        width: 33%;
    }
    #responsive_banner_td_right {
        display: table-cell;
        margin: auto;
        text-align: center;
        width: 33%;
    }
    /**** skipping #query_display, #display_toggle ****/
    #page {
        display: block;
        margin: auto;
        width: 90%;
    }
    #page_turner {
        display: block;
        margin: auto;
        width: 90%;
    }
    .turner {
    	font-size: 14px;
    }
    .results_display {
        display: block;
        margin: auto;
        width: 90%;
    }
    /**** skipping .hw_result and .h2 ****/
    #responsive_footer_table {
        display: table;
        margin: auto;
        text-align: center;
    }
    #responsive_footer_td {
        display: table-cell;
        font-size: 15px;
        text-align: center;
    }
    /**** skipping rules for all tables in dictionary text data ****/
    /**** and that's it.... ****/
}