/*--------- MONOROM's RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* render html5 elements as block  */
header, footer, section, aside, nav, article { display: block; }

/* no font-resize for IOS  */
html{ -webkit-text-size-adjust: none; }

/*--------- end of MONORM's RESET */



/*   apple: This style prevents fonts from getting bigger when rotating to landscape. */
html {
    -webkit-text-size-adjust: 100%;
}


body {
    background: white;
    color: #4D4F4F;

    font-family: 'Istok Web', sans-serif;
}

html, body {
    height: 100%;
    position: fixed;
    width:100%;
}

nav button:first-child, #nowForecastSection,#changeLakeSection{
 background-color: #81CFE0;
 }
 
#weather{
background-color: #3498DB;
color: #70e2f7;
}

nav {
    font-weight: 800;
    z-index:10;
    position: fixed;
    bottom: 0px;
    width:100%;
    height:40px;
    background-color: #34495E;
    text-align:center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* tab menu at the bottom */
nav button {
    border:none;
    background-color: transparent;
}

nav .glyphicon{
    font-size: 1.5em;
}

nav .btn {
    padding-left: 12%;
    padding-right:12%;
}

nav button:first-child{
    float:left;
}
nav button:last-child{
    float:right;
}

/* added when navButton is touched */
.activeButton{
       background-color: deepskyblue;
}


/*weatherNow table*/

#nowForecastSection{
	background:  linear-gradient(180deg,#81CFE0, #3498DB);
    box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.7), 0 12px 40px 0 rgba(0, 0, 0, 0.7);
    position:fixed;
    top:45px;
    width:100%;
    height:calc(100% - 185px);
    -webkit-transition:all 400ms ease-in-out 0.4s;
    -moz-transition:all 400ms ease-in-out 0.4s;
    -o-transition:all 400ms ease-in-out 0.4s;
    transition:all 400ms ease-in-out 0.4s;
    color: #34495E;
}
#nowForecastSection > section {
    overflow-y:scroll;
    overflow-x:hidden;
    height:calc(100% - 60px);
}


#scoreNowSVG{

    margin-top:0px;
    margin-bottom:0px;
}

#weather td:nth-child(even) {
    text-align: left;
    font-size:0.6em;
}

#weatherNowIconTable{
    font-size: 30px;
    margin-left:auto;
    margin-right:auto;
    width:80%;
    margin-top:0px;
    margin-bottom:0px;
}

#weatherNowIconTable td:first-child{
    text-align:right;
}

#weatherNowIconTable td:nth-child(even){
    text-align:center;
    font-size: 60px;
}
#weatherNowIconTable td:last-child{
    text-align:left;
}

/* forecast tables */
#weather table {
    table-layout: fixed;
    margin-left: 0;
    width: 100%;
    font-size: 2.5em;
    text-align: center;

}



h4,h3{
    margin-top:0px;
    padding-top: 15px;
    padding-bottom:15px;
}

/*Forecasts */
#weather{
    height:100%;
}

#changeLakeSection {
	color: #34495E;
    height:100%;
    width:100%;
    font-size: 1em;
    position:fixed;
}
#changeLakeSection select {

    background: #FFCF95;
    width: 80%;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 8px;
    height: 8%;
    -webkit-appearance: none;
    -moz-appearance:none;
}
 select:focus{
    background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
select:hover, input:not(input[type=text]):hover{
    cursor:pointer;
}

#todayForecastSection{

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #3498DB;
    position:fixed;
    top:calc(100% - 140px);
    height:calc(100% - 135px);

    -webkit-transition:all 400ms ease-in-out 0.4s;
    -moz-transition:all 400ms ease-in-out 0.4s;
    -o-transition:all 400ms ease-in-out 0.4s;
    transition:all 400ms ease-in-out 0.4s;
}


#todayForecastSection svg {
    margin-top:8px;
}


#hourlyForecastTable tr:nth-child(3n+1) {
    background:  linear-gradient(0deg,#446CB3, #3498DB);
}

#hourlyForecastTable tr:nth-child(3n+2){
    background-color: #446CB3;
}
#hourlyForecastTable tr:nth-child(3n+3){
    background-color: #446CB3;
}



#dailyForecastSection{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #3498DB;
    position:fixed;
    top:calc(100% - 90px);
    height:100%;

    -webkit-transition:all 400ms ease-in-out 0.4s;
    -moz-transition:all 400ms ease-in-out 0.4s;
    -o-transition:all 400ms ease-in-out 0.4s;
    transition:all 400ms ease-in-out 0.4s;
}

#dailyForecastSection svg {
    margin-top:8px;
}
#dailyForecastTable tr:nth-child(3n+1) {
    background-image: linear-gradient(0deg, #446CB3, #3498DB);
}
#dailyForecastTable tr:nth-child(3n+2){
    background-color: #446CB3;
}
#dailyForecastTable tr:nth-child(3n+3){
    background-color: #446CB3;
}

#dailyForecastSection tr,#hourlyForecastSection tr  {
border-left: 3px solid #3498DB;
}

/*
@media screen and (min-width: 1000px) {
    
    nav {
        position: absolute;
        bottom: auto;
}
   
#changeLakeSection {
    position: absolute;
}
    
    #weather{
        overflow-y:scroll;
        display: -webkit-flex;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
    }
    #todayForecastSection{
        width: calc(100% / 2 - 10px);
		-ms-flex-basis: auto;
		-webkit-flex-basis: auto;
		flex-basis: auto;
		position:relative;
		padding-bottom: 50px;
		margin: 0 2px;
        height:500px;
        top:auto;

        
         -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none;
    }
    #dailyForecastSection{
        width: calc(100% / 2 - 10px);
		-ms-flex-basis: auto;
		-webkit-flex-basis: auto;
		flex-basis: auto;
		position:relative;
		padding-bottom: 50px;
		margin: 0 2px;
       top:auto;
        height:500px;
        
        
    -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none;
        
    }
    #nowForecastSection{
      width: calc(100% / 2 - 10px);
		-ms-flex-basis: auto;
		-webkit-flex-basis: auto;
		flex-basis: auto;
		position:relative;
		padding-bottom: 50px;
		margin: 0 2px;
       top:auto;
        height:500px;
        
         -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none;
    
    }
}
*/
@media screen and (min-width: 700px) {
    
    nav .glyphicon {
        top:5px;
        margin-right:10px;
        color: #34495E;
    }
    nav {
        font-size:1.5em;
        position: relative;
        bottom: auto;
        padding-top:10px;
        height:70px;
        box-shadow:none;
}
 
    nav .btn {
        border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
	height: 60px;
    padding-left:10px;
    padding-right:10px;
    width:200px;
    }
    
    nav button{
         background-color: #FFCF95;
    }

nav button:first-child{
    float:none;
}
nav button:last-child{
     background-color:#FFF691;
    float:none;
}

    /* first and last button ignores this...workaround..less work than handling in js */
    .activeButton{
        background-color: #FFCF95;
    }

   
#changeLakeSection {
   /* background-color: #228cc8;*/
    position: relative;
    height: auto;
    padding-top:50px;
}
    
    #changeLakeTitle{
        display:inline;
        padding-right: 10px;
    }

    #nowForecastTitle{
        visibility: hidden;
    }
    #changeLakeSection select, #changeLakeSection select:focus {
        background: url("../img/arrow-down.png")  no-repeat 170px center;
        background-color:transparent;
        width:200px;
        height:50px;
        font-size:17px;
        border: 2.5px dotted #3498DB;    

        
    }
    
    #weather{
        position: relative;
        overflow-y: scroll;
    }
    
    
    #currentWeatherScoreTable{
    float:left;
}
#currentWeatherScoreTable td:last-child {
    padding-left:20px;
}

    
    
    
 #todayForecastSection{
       position: relative;
        height:auto;
         top:auto;
           padding-bottom: 0px;
     margin-bottom: 90px;
        box-shadow: none;
        float:left;
        width:50%;
    }
    
    #dailyForecastSection{
         position: relative;
         height:auto;
         top:auto;
        padding-bottom: 0px; 
        margin-bottom: 90px;
        box-shadow: none;
          float:left;
        width:50%;
        
    }
    
    #nowForecastSection{
        position: relative;
        height:auto;
     top:auto;
   padding-bottom: 60px;  
        box-shadow: none;
    }
    
    #nowForecastSection table{
        width:50%;
        margin-left:auto;
        margin-right:auto;
    }
    
    #weather table {
        box-shadow: none;
    }

    
    #scoreNowSVG{
    cursor:pointer;
    height:230px;
   width:80%;
        float:right;
        display:block;
    }
    footer{
        position:relative;
        float:right;
        margin-bottom:80px;
        padding-right:20px;
        margin-top:50px;
    }
    
    a{
        color:inherit;
    }
    
}