@charset "utf-8";

/*
	00-SEmobile.css
	mobile device css
	Scott Starker
	Created: 3/2019
	Added: 7/15/2021
*/


/* Smartphone Layout: max-width: 480px. Inherits styles from Smartphone Layout. */

@media only screen and (max-width: 480px) {
    #mainContent {
        padding: 0;
        /* padding is the space inside the div box and margin is the space outside the div box */
        margin: 0;
        margin-top: 140px;
    }
    /********************************************************************************
 		Begin default 3 blue input text lines from 00-MainScript.inc.php
    ********************************************************************************/
    /*
		first section
    */
    .topEnter {
        margin-top: 16%;
    }
    .enter {
        /* postiion of the 3 blue inputs */
        margin-top: -580px;
        margin-bottom: 0;
        /*font-weight: bold;*/
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .enter > div {
        margin-bottom: 18px;
    }
    /* div for "List by Country" button */
    #listCountriesID > button {
        border: solid 2px #33628d;
        vertical-align: top;
        width: 80%;
        box-sizing: border-box;
        border-radius: 12px;
        font-size: 110%;
        background-color: #4079b0;
        color: white;
        /*background-image: url('../images/listCountry.png');*/
        background-position: 10px 10px;
        background-repeat: no-repeat;
        padding: 12px 20px 12px 20px;
    }
    /* input for "Language (or code)" and "Country" "buttons" */
    input[type=text] {
        border: solid 2px #33628d;
        vertical-align: top;
        width: 80%;
        box-sizing: border-box;
        border-radius: 12px;
        font-size: 120%;
        background-color: #4079b0;
        color: white;
        /*background-image: url('../images/search.png');*/
        background-position: 10px 10px;
        background-repeat: no-repeat;
        padding: 12px 18px 12px 18px;
    }
    .OpaqueWhite {
        height: 240px;
        /* height */
        margin-top: -234px;
        /* Start height of the "OpaqueWhite" */
        width: 90%;
        background-color: white;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center top;
        border-radius: 25px;
        opacity: 0.5;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        z-index: -5;
    }
    /*
		second section
    */
    /* "Home" button */
    #statements {
        top: -250px;
    }
    button.homeAbout {
        margin-top: 100px;
        margin-left: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    /* 6 navigational languages: 5 options */
    div.site {
        /*position: relative;
		top: -40px;*/
        display: none;
        text-decoration: none;
        width: 100%;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }
    #feedback {
        top: -360px;
    }
    #copyright {
        top: -280px;
    }
    /********************************************************************************
 		End default 3 input text lines from 00-MainScript.inc.php
    ********************************************************************************/
    .aboutButton {
        color: white;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }
    .aboutMyButton {
        position: relative;
        top: -900px;
        left: 0px;
    }
    .myFormButton {                     /* upsidedown triangle icon for right most blue input test line */
        margin-top: 0px;
        background-repeat: no-repeat;
        background-position: right;
        background-image: url('../images/listCountry.png');
        background-color: #4079b0;
    }
    .gridContainer {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        clear: none;
        float: none;
    }
    button.HomeButton {
        position: relative;
        top: 0px;
        left: 0px;
    }
    /********************************************************************
		Begin Language Name from 00-MainScript.inc.php
    ********************************************************************/
    div.MajorLanguages {
        width: 100%;
    }
    /* "Home" botton */
    div.MajorLanguages button {
        padding-top: 3px;
        padding-bottom: 4px;
        font-size: 80%;
        margin-left: 0px;
    }
    /* navigational languages drop-down */
    #sL {
    }
    /********************************************************************
		End Language Name from 00-MainScript.inc.php
    ********************************************************************/
    /********************************************************************
		Begin one Country from 00-MainScript.inc.php
    ********************************************************************/
    /* "Home" botton */
    #homeCountry {
        margin: 0;
        left: 40px;
        top: -574px;
        position: relative;
    }
    button.homeCountryButton {
        color: white;
        background-color: #4079b0;
        text-decoration: none;
        padding: 3px 8px 3px 8px;
        cursor: pointer;
        font-size: .9em;
    }
    /* navigational languages drop-down */
    div.FormCountry {
        max-width: 20%;
        left: 60%;
        top: -604px;
    }
    #sC {
    }
    /********************************************************************
		End one Country from 00-MainScript.inc.php
    ********************************************************************/
    li.aboutText {
        /*width: 100%;*/
        line-height: 35px;
        padding-top: 5px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
    }
    table.langTable {
        width: 100%;
    }
    table.langTable tr {
        border-bottom: thin solid black;
    }
    #langEmpty {
        height: 50px;
    }
    #empty {
        width: 100%;
        max-height: 60px;
    }
    #individualLanguage {
        width: 96%;
        border: none;
    }
    /* red audio bar */
    div.ourFlashPlayer {
        margin-left: 0px;
        /* the left space of the main bar of the jp audio player */
    }
    div.countryCounter {
        top: -420px;
    }
    /**************************************************************************************************************
 		Begin from LangSearch.js, 00-CountryTable.inc.php and 00_BegList.php
    ***************************************************************************************************************/
    .pickCountry {
        width: 100%;
    }
    /**************************************************************************************************************
 		End from LangSearch.js, 00-CountryTable.inc.php and 00_BegList.php
    ***************************************************************************************************************/
    /********************************************************************************
 		Begin function showCountry from LangSearch.js
    ********************************************************************************/
    .countryTitle {
        width: 100%;
    }
    /********************************************************************************
 		End function showCountry from LangSearch.js
    ********************************************************************************/
    /***************************************************************************************************************************************************
	Begin "Language Search" on function showLanguage (LangSearch.js) and Bigin "Country Search" in 00-CountryTable.inc.php and 00_BegList.php
    ***************************************************************************************************************************************************/
    /*#countrySection {}*/
    #countryTable {
        top: -580px;
    }
    div.langCol,
    #countryTable {
        height: auto;
        width: 100%;
    }
    p.colCountry1,
    p.colCountry2,
    p.moreThanCountry2 {
        display: block;
    }
    /******************
		first section
	******************/
    p.colLN1,
    p.colCountry1,
    p.colCode1,
    div.countryLN1,
    div.countryCountry1,
    div.countryCode1 {
        font-size: 94%;
        width: auto;
    }
    p.colAlt1,
    div.countryAlt1 {
        clear: both;
        display: none;
    }
    p.colLN1,
    div.countryLN1 {
        /*width: 30%;*/
        margin-left: 10px;
    }
    p.colCode1,
    div.countryCode1 {
        /*width: 20%;*/
        float: left;
    }
    p.colCode1::before,
    div.countryCode1::before {
        content: " -  [";
    }
    p.colCode1::after,
    div.countryCode1::after {
        content: "]";
    }
    p.colCountry1,
    div.countryCountry1 {
        /*width: 32%;*/
        float: left;
    }
    p.colCountry1::before,
    div.countryCountry1::before {
        content: " - ";
    }
    /*********************
		second sections
	*********************/
    div.colSecond,
    div.countrySecond,
    div.moreThanOneRODCode {
        height: auto;
        overflow: visible;
        display: block;
        padding-top: 10px;
    }
    div.colLN2,
    p.colCountry2,
    div.colCode2,
    div.countryLN2,
    p.countryCountry2,
    div.countryCode2,
    div.moreThanLN2,
    p.moreThanCountry2,
    div.moreThanCode2 {
        float: none;
        height: auto;
        overflow: visible;
        padding-top: 0;
        padding-bottom: 0;
        width: auto;
        display: inline;
    }
    div.colLN2,
    div.countryLN2,
    div.moreThanLN2 {
        font-weight: bold;
        /*float: left;*/
        /*width: 40%;*/
    }
    div.colLN2::after,
    div.countryLN2::after,
    div.moreThanLN2::after {
        content: "  -";
    }
    div.colLN2>div,
    div.countryLN2>div,
    div.moreThanLN2>div {
        display: inline;
        padding-left: 6px;
    }
    div.colCode2,
    div.countryCode2,
    div.moreThanCode2 {
        /*width: 10%;*/
        /*float: right;*/
        /*float: left;*/
    }
    div.colCode2::before,
    div.countryCode2::before,
    div.moreThanCode2::before {
        content: "- [";
    }
    div.colCode2::after,
    div.countryCode2::after,
    div.moreThanCode2::after {
        content: "]";
    }
    p.colCountry2,
    p.countryCountry2,
    p.moreThanCountry2 {
        /*width: 37%;*/
    }
    div.colAlt2,
    div.countryAlt2,
    div.moreThanAlt2 {
        float: none;
        height: auto;
        overflow: visible;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 4px;
        padding-bottom: 10px;
        margin-left: 4%;
        width: 90%;
        font-size: .9em;
    }
    div.colAlt2::before,
    div.countryAlt2::before,
    div.moreThanAlt2::before {
        font-style: italic;
        font-weight: bold;
        color: black;
    }
    div.colAlt2::after,
    div.countryAlt2::after,
    div.moreThanAlt2::after {
        /*clear: both:*/
    }
    /*************************************************************************************************************************************************
	End "Language Search" on function showLanguage (LangSearch.js) and Bigin "Country Search" in 00-CountryTable.inc.php and 00_BegList.php
**************************************************************************************************************************************************/
}

@media only screen and (min-width: 481px) and (max-width: 580px) {
    p.colCountry1,
    p.colCountry2,
    div.countryCountry1,
    p.countryCountry2,
    p.moreThanCountry2 {
        display: none;
    }
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) and (max-width: 1199px) {
    /*p.colCountry1, p.colCountry2, p.countryCountry1, p.countryCountry2, p.moreThanCountry2 {
		/*display: none;
	}*/
    div.colAlt2,
    div.countryAlt2,
    div.moreThanAlt2 {
        width: 33%;
    }
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) and (max-width: 768px) {
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
}