/* WorkAudioBook sub pages */

/*  Layout:

    width >= 900px
      Menu is visible, menu button is hidden, width of <section> inside <main> is > 600 px

    width < 900px
      Menu is hidden, menu button is visible, width of <section> inside <main> is 290 .. 822 px
*/

/* WHOLE PAGE ========== */

/* Container Responsive ========== */

.container_responsive
{
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 1200px) 
{
    .container_responsive 
    {
        max-width: 1170px;

        margin-left: auto;
        margin-right: auto;
    }
}

/* SECTIONS ========== */

/* Header ========== */

header
{
    background-color: #44B6E6;
    color: white;
}

.header
{
    background-image: url( "/WorkAudioBook/Images/Header_Icon.png" );
    background-repeat: no-repeat;
    background-position: 15px center;

    padding-top: 8px;
    padding-bottom: 18px;
}

.header > *
{
    margin-top: 0px;
    margin-bottom: 0px;

    padding-left: 135px;
}

header h1 
{
    font-size: 32px;
    font-weight: 300;
}

header h2
{
    font-size: 20px;
    font-weight: 300;
}

@media (max-width: 699.99px)
{
    .header
    {
        background-image: none;
    }

    .header > *
    {
        padding-left: 0px;
    }

    header h1 
    {
        font-size: 28px;
    }

    header h2
    {
        font-size: 18px;
    }
}

@media (max-width: 499.99px)
{
    .header
    {
        padding-bottom: 10px;
    }

    header h1 
    {
        font-size: 22px;
    }

    header h2
    {
        font-size: 16px;
        font-weight: normal;
    }
}

/* Nav ========== */

.nav
{
    background-color: #D7EFFA;
}

.nav_flex
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    padding-top: 4px;
    padding-bottom: 4px;
}

.nav_flex > * 
{
    min-width: 0px;
    overflow: hidden;
}

.nav_menu_icon
{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    margin-left: -15px;
}

.nav_menu_icon a
{
    display: block;
}

.nav_menu_icon svg
{
    width: 24px;
    height: 24px;

    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 12px;
    margin-right: 12px;

    vertical-align: bottom;

    fill: #44B6E6;
}

@media (min-width: 900px)
{
    .nav_menu_icon
    {
        display: none;
    }
}

.nav_path
{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 60%;
    flex: 1 1 60%;

    padding-bottom: 1px;
}

.language
{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;

    text-align: right;
}

.language select
{
    border: none;
    padding: 4px;
    border-bottom: 1px solid #44B6E6;
}

@media (max-width: 499.99px)
{
    .language
    {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;

        padding-left: 10px;
    }

    .language_label
    {
        display: none;
    }
}

/* Menu & Main ========== */

.menu_main_flex
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    position: relative;

    margin-top: 10px;
}

.menu_main_flex > * 
{
    min-width: 0px;
    overflow: hidden;
}

.menu
{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 200px;
    flex: 0 0 200px;
}

.menu2
{
    padding-right: 5px;
    padding-bottom: 10px;
    
    border-right: 1px solid #CCC;
}

main
{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;

    padding-left: 20px;
}

@media (max-width: 899.99px)
{
    .menu_main_flex
    {
        margin-top: 0px;
    }

    .menu
    {
        display: none;
    }

    main
    {
        padding-left: 0px;
    }
}

.menu.active
{
    display: block;

    position: absolute;

    top: 0px;
    bottom: -20px;
    left: 0px;

    width: 260px;

    padding-top: 10px;
    padding-left: 10px;

    overflow-y: auto;

    background-color: white;

    box-shadow: 4px 1px 4px 0px rgba(0, 0, 0, 0.25);

    z-index: 1001;
}

.menu.active .menu2
{
    border-right: 1px solid white;
}

/* Menu ========== */

.menu2 > *
{
    display: block;
    
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.menu2 > *:hover
{
    background-color: #D7EFFA;
}

.menu2 > *.active
{
    background-color: #D7EFFA;

    border-left: 3px solid #79CBED;
}

.menu2 svg
{
    vertical-align: bottom;

    height: 20px;

    margin-right: 8px;

    fill: black;
}

/* MAIN COMMON ========== */

/* headers --- */

main h1
{
    display: table;

    font-size: 28px;
    font-weight: 400;

    padding-bottom: 2px;
    border-bottom: 5px solid #79CBED;
}

main h2
{
    display: table;

    font-size: 24px;
    font-weight: 400;

    padding-bottom: 2px;
    border-bottom: 3px solid #79CBED;
}

h2.see_also
{
    border-bottom: 3px solid #28A745;
}

main h3
{
    font-size: 20px;
    font-weight: bold;
}

/* section --- */

main section
{
    margin-left: 30px;
}

@media (max-width: 499.99px)
{
    main section
    {
        margin-left: 0px;
    }
}

/* lists --- */

main li
{
    margin-top: 4px;
    margin-bottom: 4px;
}

.more_space li
{
	padding-top: 8px;
	padding-bottom: 8px;
}

/* code --- */

code
{
	color: #008080;
}

/* tabs --- */

main .tab_header
{
    color: #0000EE;
    text-decoration: underline;
}

main .tab_header.active
{
    color: black;
    text-decoration: none;
}

/* img --- */

main img
{
    max-width: 100%;
    width: auto;
}

.vertical_align > img
{
    vertical-align: middle;
}

img.with_padding
{
    padding-top: 10px;
    padding-bottom: 10px;
}

img.float_right
{
	float: right;
	
	margin-left: 10px;
	margin-bottom: 10px;
}

img.float_right_small_button_windows
{
	float: right; 
	
	margin-left: 10px;
	margin-bottom: 10px;
	
	padding: 2px;
	border: 1px solid gray;
}

img.float_right_small_button_android
{
	float: right;
	
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	
	padding: 4px;
	border: 1px solid #BBB;
}

/* tables --- */

table
{
	border-collapse: collapse;

	border: 1px solid gray;
}

td
{
	border: 1px solid gray;

	padding: 4px 8px;
	
	vertical-align: top;
}

thead td
{
	background-color: #E0E0E0;
}

/* other --- */

.indent_left
{
	margin-left: 30px;
}

@media (max-width: 699.99px)
{
    .indent_left
    {
        margin-left: 0px;
    }
}

.indent_top
{
    margin-top: 30px;
}

.inner_nav_bar
{
    margin-top: 30px;
    
    padding-top: 10px;
    padding-bottom: 15px;
    
    padding-left: 15px;
    padding-right: 15px;
    
    background-color: #D7EFFA;
}

.entered_codes
{
    padding: 8px;

    background-color: #D0D0D0; 
}

.resulted_codes
{
    padding: 8px;

    background-color: #F0E68C; 
}

/* MAIN SPECIFIC ========== */

/* download audiobooks pages --- */

.book_flex
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    
    margin-bottom: 30px;
}

.book_flex > * 
{
    min-width: 0px;
    overflow: hidden;
}

.book_img
{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    
    margin-left: 30px;
    margin-right: 15px;
}

.book
{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.book_author 
{
    font-size: 14px;
}

.book_name
{
    font-size: 18px;
    
    padding-bottom: 2px;
    margin-bottom: 8px;
}

@media (max-width: 599.99px)
{
    .book_flex
    {
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    .book_img
    {
        margin-left: 0px;
    }
    
    .book
    {
        margin-top: 10px;
    }
    
    .book_author
    {
        border-left: 6px solid #79CBED;
        padding-left: 9px;
    }

    .book_name
    {
        border-left: 6px solid #79CBED;
        padding-left: 9px;
    }
}

.book_moreinfo
{
    padding-left: 15px;
    
    padding-bottom: 10px;
    
    color: #666;
}

.book_links
{
    padding-left: 15px;
}

.book_links > a
{
    padding-right: 15px;
    
    white-space: nowrap;
}

.book_chapters
{
    padding-left: 15px;
    padding-top: 15px;
    
    font-size: 14px;
}

.book_chapters ol
{
    margin-top: 5px;
}

.book_chapters a
{
    padding-left: 5px;
}

/* download Listen to English podcasts --- */

.podcast_date
{
    font-size: 12px;
    color: grey;
}

.podcast_name
{
    font-weight: 500;
}

.podcast_links
{
    vertical-align: middle;
}

.podcast_links > a
{
    padding: 5px;
}

/* registration form page --- */

.field_flex
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    margin-top: 10px;
}

.field_flex > * 
{
    min-width: 0px;
    overflow: hidden;
}

.field_flex_comment
{
    margin-top: 2px;
    font-size: 13px;
}

.field_label
{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 260px;
    flex: 0 0 260px;
    
    text-align: right;
    
    margin-right: 10px;
}

.field_input
{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.field_input > *
{
    vertical-align: middle;
}

.field_input_comment > *
{
    vertical-align: top;
}

.img_captcha
{
    margin-left: 10px; 
    
    margin-top: 2px; 
    margin-bottom: 2px;
}

@media (max-width: 699.99px)
{
    .field_flex
    {
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        flex-direction: column;
        
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        
        margin-top: 15px;
    }
    
    .field_label
    {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    
        text-align: left;
    
        margin-right: 0px;
        
        margin-bottom: 2px;
    }
}