/**********************   Standard Travel Layout   *******************/

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

iPhone Portrait:
Width: 980px
Height: 1690px

iPhone Landscape:
Width: 980px
Height: 502px

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


@media only screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 980px) {
    .responsive span { display: none; }
    .responsive:after { content: 'max 980'; }	
  /* For mobiles: */
    html, body, h1, h2, textarea, select, span, li, input[type=text], input[type=checkbox]:not(old) + label, input[type=radio]:not(old) + label, input[type=button], input[type=range], input[type=range] + label, input[type=submit], select, select:focus, select:not(:focus), textarea, #marquee, .suggestedpage {
        font-size: 1em;
    }
    
    input {
        font-size: 1em;
    }

    .child-col
    {   
      vertical-align:top;
      text-align: justify;                 
      display: inline-block;   
      width: 700px;        
      margin:2px auto 30px auto;
      padding:5px 10px 5px 10px;
      background:#fafafa;  
      border:1px solid white;         
    }

    .child-colLRhdr {
        vertical-align: top;
        display: inline-block;
        margin: 2px auto 5px auto;
        padding: 5px 10px 5px 10px;
        background: #fafafa;
        width: 700px;
        border: 1px solid white;
    }

    .child-colL {
        vertical-align: top;
        display: inline-block;
        margin: 2px auto 5px auto;
        padding: 5px 10px 5px 10px;
        background: #fafafa;
        width: 700px;
        border: 1px solid white;
    }

    .child-colR {
        vertical-align: top;
        display: inline-block;
        margin: 2px auto 5px auto;
        padding: 5px 10px 5px 10px;
        background: #fafafa;
        width: 700px;
        border: 1px solid white;
    }  
     
    .destinationResult td {  font-size: 1em; } 
    .slider { width: 300px; margin-right:10px; }          
    #center { width:724px; margin: 10px 50px; }   /* 724 */    
    #map { zoom: 1.4; }
    #myMultiPointMap { zoom: 1; border: 1px solid gray; } /* zoom: 1.4 */
    .AirportPage { width:600px; height:500px; }
    .AirlineRoutePage { width: 700px; height: 500px; }
    .SuggestedPage { width: 722px; height: 600px; }
    .HotelMap { width: 700px; height: 400px; }
    #imgDestination { width: 700px; }
    
    
    /***************************** Mobile Slider Grid *****************************/    
    .slider-grid-container { grid-template-columns: auto; }

    .slider-grid-month-title { order: 0; padding-top:20px; }    
    .slider-grid-month-select { order: 1; }
    .slider-grid-temp-title { order: 2; }
    .slider-grid-temp-select { order: 3; }    

    .slider-grid-wet-title { order: 4; }
    .slider-grid-wet-select { order: 5; }
    .slider-grid-range-title { order: 6; }    
    .slider-grid-range-select { order: 7; }

    .slider-grid-cabin-title { order: 8; }
    .slider-grid-cabin-select { order: 9; padding-bottom:40px; }

    .slider-grid-search-btn { order: 10; margin:auto 10px; text-align:center; }
    /******************************************************************************/
    .destinationlist-grid-container { grid-template-columns: auto auto auto auto auto; }
    .destinationlist-grid-tails { display:none; }
    .sortbyrowhdr { display: none; }
    
}


@media only screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 981px) {
    .responsive span { display: none; }
    .responsive:after { content: 'min 981'; }	
  /* For mobiles: */
    html, body, h1, h2, textarea, select, span, li, input[type=text], input[type=checkbox]:not(old) + label, input[type=radio]:not(old) + label, input[type=button], input[type=range] + label, input[type=submit], select, select:focus, select:not(:focus), textarea, #marquee, .suggestedpage {
        font-size: 16px;
    } 
    .child-col
    {   
      vertical-align:top;
      text-align: justify;                 
      display: inline-block;   
      width: 700px;        
      margin:2px auto 30px auto;
      padding:5px 10px 5px 10px;
      background:#fafafa;  
      border:1px solid white;         
    }

    .child-colLRhdr {
        vertical-align: top;
        display: inline-block;
        margin: 2px auto 5px auto;
        padding: 5px 10px 5px 10px;
        background: #fafafa;
        width: 1520px;
        border: 1px solid white;
    }

    .child-colL {
        vertical-align: top;
        display: inline-block;
        margin: 2px auto 5px auto;
        padding: 5px 10px 5px 10px;
        background: #fafafa;
        width: 700px;
        border: 1px solid white;
    }

    .child-colR {
        vertical-align: top;
        display: inline-block;
        margin: 2px auto 5px auto;
        padding: 5px 10px 5px 10px;
        background: #fafafa;
        width: 700px;
        border: 1px solid white;
    }   
    .destinationResult td {  font-size: 16px; }    
    .slider { width: 300px; margin-right:10px; }        
    #center { width:724px; margin: 10px 50px; }       /* 524 */
    #map { zoom: 1.4; }
    #myMultiPointMap { zoom: 1; border: 1px solid gray; } /* zoom: 1.4 */
    .AirportPage { width: 600px; height: 500px; }
    .AirlineRoutePage { width: 700px; height: 500px; }
    .SuggestedPage { width: 722px; height: 600px; }
    .HotelMap { width: 700px; height: 400px; }
	#imgDestination { width:700px; }
    
    
    /***************************** Mobile Slider Grid *****************************/    
    .slider-grid-container { grid-template-columns: auto; }

    .slider-grid-month-title { order: 0; padding-top:20px; }      
    .slider-grid-month-select { order: 1; }
    .slider-grid-temp-title { order: 2; }
    .slider-grid-temp-select { order: 3; }    

    .slider-grid-wet-title { order: 4; }
    .slider-grid-wet-select { order: 5; }
    .slider-grid-range-title { order: 6; }    
    .slider-grid-range-select { order: 7; }

    .slider-grid-cabin-title { order: 8; }
    .slider-grid-cabin-select { order: 9; padding-bottom:40px; }

    .slider-grid-search-btn { order: 10; margin:auto 10px; text-align:center; }
    /******************************************************************************/
    .destinationlist-grid-container { grid-template-columns: auto auto auto auto auto; }
    .destinationlist-grid-tails { display:none; }
    .sortbyrowhdr { display: none; }
}

/* was 1770px */
@media only screen and (min-width: 1650px) {
    .responsive span { display: none; }
    .responsive:after { content: 'min 1650'; }	
  /* For desktop: */
    html, body, textarea, select, span, li, tr, input[type=text], input[type=button], input[type=submit] { font-size: small; } /* font-size: small; */     
    h1 { font-size:2em; }
    .child-col
    {
      vertical-align:top;
      display: inline-block;      
      margin:2px auto 5px auto;
      padding:5px 10px 5px 10px;
      background:#fafafa;   
      width:500px;   
      border:1px solid white;
    }

    .child-colLRhdr {
        vertical-align: top;
        display: inline-block;
        margin: 2px auto 5px auto;
        padding: 5px 10px 5px 10px;
        background: #fafafa;
        width: 1520px;
        border: 1px solid white;
    }

    .child-colL {
        vertical-align: top;
        display: inline-block;
        margin: 2px auto 5px auto;
        padding: 5px 10px 5px 10px;
        background: #fafafa;
        width: 400px;
        border: 1px solid white;
    }

    .child-colR {
        vertical-align: top;
        display: inline-block;
        margin: 2px auto 5px auto;
        padding: 5px 10px 5px 10px;
        background: #fafafa;
        width: 1120px;
        border: 1px solid white;
    }
    .suggestedpage { font-size: small; }  
    .destinationResult td {  font-size: small; }   
    .slider { width: 150px; }         
    #center { width:1580px; }        
    #map { zoom: 1; }
    #myMultiPointMap { zoom: 1; border: 1px solid gray; } /* zoom: 1 */
    .AirportPage { width: 800px; height: 600px; }
    .AirlineRoutePage { width: 1100px; height: 600px; }
    .SuggestedPage { width: 948px; height: 600px; }
    .HotelMap {  width: 500px; height: 400px; }
    #imgDestination { width: 300px; }
    
    
    /***************************** Wide Screen Slider Grid *****************************/  
    .slider-grid-container { grid-template-columns: auto auto auto auto auto; }

    .slider-grid-month-title { order: 0; padding-top:0;}
    .slider-grid-temp-title { order: 1; }
    .slider-grid-wet-title { order: 2; }
    .slider-grid-range-title { order: 3; }
    .slider-grid-cabin-title { order: 4; }

    .slider-grid-month-select { order: 5; }
    .slider-grid-temp-select { order: 6; }
    .slider-grid-wet-select { order: 7; }
    .slider-grid-range-select { order: 8; }
    .slider-grid-cabin-select { order: 9; padding-bottom:3px; }

    .slider-grid-search-btn { grid-area: 3 / 1 / span 3 / span 5; margin:10px; }
    /***********************************************************************************/
    .destinationlist-grid-container { grid-template-columns: auto auto auto auto auto auto; }
    .destinationlist-grid-tails { display:inherit; }
    .sortbyrowhdr { display: inherit; }   
}


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

body 
{ 
    /*background-image: url("images/Travel/Wallpapers/42545.jpg");*/
    background-size: cover;
    background-attachment: fixed;
}

html, body, textarea, select, span, li, input[type=text], input[type=button], input[type=submit]
{
    font-family:Verdana;    
    color:Black;
    margin:0;
    text-align:justify;
}

p { margin:5px 10px; }

a:link { color: #1C9AB0; text-decoration: none; }
a:active { color: #1C9AB0; text-decoration: none; }
a:visited { color: #1C9AB0; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }

hr
{
    border: none; border-bottom: 1px solid #1C9AB0;
    margin:0; padding:0;
}

h1
{
    float:right;
    margin:12px 70px 0 0;
    color:#1C9AB0;
    vertical-align:middle;
    /*text-shadow: 1px 1px #888;*/
}

h2
{
    color:#1C9AB0;    
}    

img
{ 
    border:0 solid white;
}

table 
{
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
} 

tr
{ 
    font-family: Tondo,Din-Regular,Verdana;
    color: #666666;
    vertical-align:top;
} 

td 
{
    border-top-style:hidden;
    border-top-width: 1px;
    border-top-color: Black;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    padding-left:10px;
    padding-right:10px;
    /*font-size:x-small;*/
} 

th  
{
    border-style:solid;
    border-top-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    padding-left:10px;
    padding-right:10px;
    text-align:left;
} 

/************************************** GRIDS **********************************************/
.slider-grid-container { display: grid; grid-gap: 3px; padding: 1px; }

.slider-grid-item { padding-left:10px; }

.slider-grid-month-title { font-weight:bold; text-align:left; }
.slider-grid-temp-title { font-weight:bold; text-align:left; }
.slider-grid-wet-title { font-weight:bold; text-align:left; }
.slider-grid-range-title { font-weight:bold; text-align:left; }
.slider-grid-cabin-title { font-weight:bold; text-align:left; }

.slider-grid-month-select { padding-bottom:40px; }
.slider-grid-temp-select { padding-bottom:40px; }
.slider-grid-wet-select { padding-bottom:40px; }
.slider-grid-range-select { padding-bottom:40px; }

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

.destinationlist-grid-container { width:100%; display: grid; grid-gap: 0; padding: 0; }

.destinationlist-grid-item { border:0px solid gray; padding-left:5px; }
.destinationlist-link:hover { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5); z-index:2; border-radius: 3px; }

.destinationlist-grid-flag { float: left; padding:0; margin:0; }
.destinationlist-grid-flag img { float: left; padding: 0; margin: 0; }
.destinationlist-grid-destination { float: left; padding-top: 5px; }
.destinationlist-grid-temp { float: right; padding-top: 5px; }
.destinationlist-grid-rain { float: right; padding-top: 5px; }
.destinationlist-grid-tails { float: right; padding-top: 5px; }

/*******************************************************************************************/
.header 
{
  min-width:750px;
  background-color: rgba(250,250,250,0.8); 
  height:70px;
}

.navbar
{
  width:100%;
  clear:both;
  background-color: rgba(28,154,176,0.4); 
}

.BackBtn
{
    height:50px;
    background-color:rgba(28,154,176,0.5);
    color: white;
    border:1px solid rgb(28,154,176);   
    transition-duration: 0.1s;
    float:right;
}
.BackBtn:hover {
  background-color: rgb(10,136,158);
  color: white;
}


#lblResult {
    font-size: large;
    margin: 15px 50px;
    color: #1C9AB0;
    font-weight: bold;
}


#invisiblewrapper /* not using */ {
    display: flex; /* establish flex container */
    flex-direction: row; /* default value; can be omitted */
    flex-wrap: nowrap; /* default value; can be omitted */
    justify-content: space-between; /* switched from default (flex-start, see below) */
}


#center 
{
  text-align: justify;
  overflow: hidden;
  position: relative;
  background-color: rgba(255,255,255,0.9); 
  margin: auto;
  max-width: 1640px;
  padding: 10px;
  border: 1px solid #efefef;
  margin-bottom:10px;
}



#Logo {
    /* https://editor.freelogodesign.org/?lang=en&companyname=Nice,%20this...&category=35  Font: Ubuntu letter spacing 14 */
    width: 100px;
    height: 44px;
    background-image: url(Images/NiceThis_Logo_100x44.png);
    /* $("#Logo").css("background-image", "url(Images/NiceThis_Logo_100x44.png)"); */
    border: 0px solid black;
    margin: 10px 0 10px 0;
    float: left;
}

.resultstable tr.even { background:#EEE; }
.resultstable tr.odd { background:#FFF; }

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

#ImportDiv
{
    float:left;
    margin-right: 50px;
}

#SearchDiv
{
    float:left;
    margin-right: 50px;
}

#UnusedLabelsDiv
{
    float:left;
    border:1px solid gray;
    padding: 10px;
}

#VideoWallpaper {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index:-1;
}

.noborder 
{
    border-top-style:solid;
    border: 0;
    padding-left:10px;
    padding-right:10px;
} 

.shadow { box-shadow: 5px 5px 7px grey; }

    
.alert { color:Red; }    



.cool { background-color:lightcyan; } /* below 19 */
.pleasant { background-color:lightyellow; } /* 20 to 23 */
.hot { background-color:orange; } /* 24 to 28 */
.roasting { background-color:orangered; } /* above 28 */

.ticker { z-index: 101; }

.footer
{
    color:Black;
    font-size:xx-small;  
    bottom:30px;  
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}
.footer a:link { color: Black; text-decoration: none; }
.footer a:active { color: Black; text-decoration: none; }
.footer a:visited { color: Black; text-decoration: none; }
.footer a:hover { color: Black; text-decoration: underline; }


.destinationResult {  
  /* transition: transform .2s;  Animation */
}

.destinationResult td {  
  vertical-align:middle;
  line-height: 27px;
  /* border: 1px solid gray; */
}

.destinationResult td a {  
  display: block;
}
 
.destinationResult:hover {
  /* transform: scale(1.01); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5); cursor: pointer;
  z-index:2;
  border-radius: 3px;
}

.destinationResult td:hover, a:hover { 
  color: #1C9AB0;
  text-decoration:none;
}

/* Now in the chart
.chartinstructions { font-size:small; margin:35px auto 1px auto;text-align:center; font-style:italic; }
*/

.single-child-col {
    vertical-align: top;
    text-align: justify;
    display: inline-block;
    margin: 2px auto 30px auto;
    padding: 5px 10px 5px 10px;
    background: #fafafa;
    border: 1px solid white;
}

.single-child-col p { padding:4px; }

.indicator { text-align:right; margin-right:10px; }

.country-indicator-grid-container {
    display:grid;
    grid-template-columns: auto auto auto;
}

.pushpinStyle {
    font: 8px arial,sans-serif;
}