/*
 * styles for peakbagging tabs
 */
@media screen and (max-width: 550px) {
    .tab_header {
        font-size: 12px;
    }

    #tabs li {font-size: 12px; margin-left: 5px}    
}

.hide_map { display:none;}

#peaktable48 img {margin: 0px 3px}
#peaktable52 img {margin: 0px 3px}
#peaktable67 img {margin: 0px 3px}
#peaktable100 img {margin: 0px 3px}
#peaktable111 img {margin: 0px 3px}
#tableparks   img {margin: 0px 3px}
table.icon_table  { margin: 0px; font-size: 16px;}

.icon_table td {padding-left: 15px; padding-right: 30px}

.icons {margin: 0px; padding: 3px 5px 0px;}
.pad_left {padding-left: 3px; padding-right: 3px}

.ui-progressbar {    position: relative;  }
.progress-label {    position: absolute;    left: 40%;  font-size: .8em }
.my_bar { display: inline-block; vertical-align: bottom; margin-left: 20px; width: 100px;height: 24px}

#decal_67 { margin-left: 20px; margin-right: 20px; width:100px;}
#decal_48 { margin-left: 20px; margin-right: 20px; width:100px;}

@media screen and (max-width: 700px) {
    #decal_67 { width:75px;}
    #decal_48 { width:75px;}
}

table.tablesorter  {
    width: 90%;
    margin: 0px auto;
}

</style>

<style>

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px and also iPads specifically.

https://css-tricks.com/accessible-simple-responsive-tables/

*/
.info {display: inline-block; }
.ranks {display: inline-block; padding: 4px 23px 0px 6px; float: left; width: 30px}
.links {display: inline-block; float: left; padding: 5px 7px 0px; }
.lnk {display: inline-block; width: 16px; padding-right: 10px;}

.peakNotHiked {display: table-row;}
.peakHiked    {display: table-row;}

.summit {line-height: 20px; padding-left: 10px}
.blogs {line-height: 30px; padding-left: 10px}

.progress_div {float:right; margin-right: 20px; width: 30%}
td.decal {width: 290px}

.instructions {
    font-style: italic;
    margin-top: 15px;
    margin-bottom: 15px;
    display: inline-block;
    float: left;
    clear: both;
}

.instruction_icons {width: 100%; padding: 20px 10px; margin-bottom:20px}

@media only screen and (max-width: 800px) {

    .instructions {
	margin-top: 0px;
    }
    td.decal {width: 290px}
    .ranks {padding: 6px 10px 0px;}
    .lineheight {line-height: 1em}
}

@media only screen and (min-width: 701px) {
    .icons { width: 110px}
    .table_instructions {display: inline;}
}

@media only screen and (max-width: 700px) {
    .table_instructions {display:none}

    /* Force table to not be like tables anymore */
    .tablesorter table, .tablesorter thead, .tablesorter tbody, .tablesorter th, .tablesorter tr {
        display: block;
        font-size: 10pt;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .tablesorter thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .tablesorter tr { border: 1px solid #ccc; background-color: white}

    .tablesorter td {
        font-size: 10pt;
        display: block;

        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
    }

    .tablesorter td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0px;
        left: 6px;
        width: 40px;
        height: 2em;
        padding: 5px 5px 0px 10px;
        white-space: nowrap;
        line-height: 20px;
    }

    /*
    Label the data
    */
    #peaktable48 td:nth-of-type(1):before { content: "Peak: ";}
    #peaktable48 td:nth-of-type(2):before { content: "Rank in 48/111: ";}
    #peaktable48 td:nth-of-type(3):before { content: "Date hiked: ";}

    #peaktable52 td:nth-of-type(1):before { content: "Peak: "; }
    #peaktable52 td:nth-of-type(2):before { content: "Elev: "; line-height:8px;}
    #peaktable52 td:nth-of-type(3):before { content: "Rank in 52 WAV: ";}
    #peaktable52 td:nth-of-type(4):before { content: "Date hiked: ";}

    #peaktable67 td:nth-of-type(1):before { content: "Peak: ";}
    #peaktable67 td:nth-of-type(2):before { content: "Rank in 67/111: ";}
    #peaktable67 td:nth-of-type(3):before { content: "Date hiked: ";}

    #peaktable100 td:nth-of-type(1):before { content: "Peak: ";}
    #peaktable100 td:nth-of-type(2):before { content: "Rank in 100: ";}
    #peaktable100 td:nth-of-type(3):before { content: "Date hiked: ";}

    #peaktable111 td:nth-of-type(1):before { content: "Peak: ";}
    #peaktable111 td:nth-of-type(2):before { content: "Rank in 111: ";}
    #peaktable111 td:nth-of-type(3):before { content: "Date hiked: ";}

    #tableparks td:nth-of-type(1):before { content: "National Park: ";}
    #tableparks td:nth-of-type(2):before { content: "Link: ";}
    #tableparks td:nth-of-type(3):before { content: "Dates visited: ";}

    td.icon_itable { width:20px}

    .ctr { text-align: left; padding-top: 2px;}
    .pad_left { text-align: left; padding-top: 2px; padding-left: 130px}
    .icons {padding-top: 2px; padding-left: 130px}

    .disp { display: block}
}

.list_text {
    margin-bottom: 15px;
    width: 65%;
    float:left;
 }