* {

    margin: 0;

    border: 0;

    padding: 0;

}

#topbar{



    width: 1000px;

    margin-left: 100px ;

    height: 40px;



}

body{

    background: #FFFFFF;

    font: 14px/20px Arial, San-Serif;

    color: #555;

    width: 100%;

    margin: auto;

}

#logo{

    float: left;

    position: absolute;

}

#logo img{

    height: 40px;

    margin-left: 20px;

}

#menu-bar-container{

    

    background-color: #BB1919;

    height: 60px;

    border-top: 1px solid #cccccc;

    

}

#menu-bar-container h1{

    

    color: white;

    text-align: center;

    position: relative;

    top: 20px;

    font-weight: normal;

    

}



#menu-bar-1-container{

    text-align: left;

    background-color: #A91717;

    border-bottom: 1px solid white;

    width: 100%;

    

}

#menu-bar-1{

    

    width: 1000px;

    height: 40px;

}

#menu-bar-1 a{

    

    color: white;

    text-decoration: none;

    padding: 0 10px;

    border-right: 1px solid white;

    font-size: 16px;

    position: relative;

    top: 12px;

    

}



#menu-bar-1 a:hover{

    

    text-decoration: underline;

    

}



#menu-bar-2-container{

    text-align: center;

    background-color: #E87E04;

    width: 100%;

}

#menu-bar-2{

    

    width: 1000px;

    margin: 0 auto;

    height: 40px;

}

#menu-bar-2 a{

    

    color: white;

    text-decoration: none;

    padding: 0 10px;

    border-right: 1px solid white;

    font-size: 16px;

    position: relative;

    top: 12px;

    

}



#menu-bar-2 a:hover{

    

    text-decoration: underline;

    

}



#subject-container{

    

    height: 50px;

    text-align: center;

    background-color: #0F5474;

    border-top: 1px white solid;

    border-bottom: 1px white solid;

}



#subject-container h2{

    position: relative;

    top: 15px;

    color: white;

    text-decoration: none;

    font-weight: normal;

}

h3{

    line-height: 110%;

    padding: 5% 2%;

    text-align:center;

}

p{

    padding: 1%;

}

a{

    color: black;

    text-decoration: none;

    font-weight: bold;

}

a:hover{

    color: goldenrod;

    text-decoration: underline;

    text-decoration-style: solid 2px;

}

header{

    background: #8B307A;

    width: 100%;

    height: 86px;

    top: 0;

    left: 0;

    opacity: 0.90;

    margin-bottom: 1%;

}

table {

    border-collapse: collapse;

    color:#333136;

    background-color: #fdfdfd;

}



table, td {

    border: 1px solid black;

    padding: 4px;

}

tr {

    height: 30px;

}

.current{

    color: #FFF;

    text-decoration: underline;

}

#doc{

    margin:40px 0;

}

#content {

    margin: 0 auto;

    max-width: 1140px;

    margin-top: 110px;

}

.blueberry{

    max-width:960px;

    margin-top: 110px;

}

section{

    width: 55%;

    float: left;

    margin: auto;

    text-align: center;

}

.clear{

    clear: both;

}

article{

    margin: 0 auto;

    width: 100%;

    height: auto;

}

.history td{

    text-align:center;

    background-color: #33b5e5;

    color: white;

    border: solid white 1px;

}

.history td:hover{

    background-color:#0099cc;

}

.history a

{

    display:block;

    text-decoration:none;

}

.realtime-table a

{

    display:block;

    text-decoration:none;

}

aside{

    float:right;

    margin: 0;

    width: 40%;

    height: auto;

}

ul.history li{

    margin: auto;

    margin-bottom: 1%;

    background-color: #33b5e5;

    color: white;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

ul.history li:hover{

    background-color:#0099cc;

}



#containerTempGraph{

    width:100%;

    float:left;

}

#containerHumGraph{

    margin-top: 5px;

    width:100%;

    float:left;

}

#containerLightGraph{

    margin-top: 5px;

    width:100%;

    float:left;

}

#containerRainGraph{

    margin-top: 5px;

    width:100%;

    float:left;

}

#containerWinddirGraph{

    margin-top: 5px;

    width:100%;

    float:left;

}

#containerWindspdGraph{

    margin-top: 5px;

    width:100%;

    float:left;

}

#containerSoiltempGraph{

    margin-top: 5px;

    width:100%;

    float:left;

}

#containerSoilmoistureGraph{

    margin-top: 5px;

    width:100%;

    float:left;

}

#containerSoilmoistureGraph-2{

    margin-top: 5px;

    width:100%;

    float:left;

}

#system-img{

    width: 38%;

    float: left;

    padding: 3px;

}

#column-left{

    width: 39%;

    float: left;

    margin-bottom: 5px;

    border-top: 1px white solid;

    border-left: 0.5px white solid;

}

#table-1{

    width: 100%;

}

#table-1 img{

    position: relative;

    float: left;

}

.parameter{

    position: relative;

    top: 5px;

}

#column-right{

    width: 60%;

    float: right;

    border-top: 1px white solid;

}

#column-bottom{

    width: 100%;

    border-top: 1px white solid;

}

#rain-compare{

    width: 100%;

}





/*-------------------------------MEDIA------------------------*/

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

    body{



        width: 100%;



    }

    #column-left{

        width: 100%;

    }

    #column-right{

        width: 100%;

    }

    #menu-bar-container h1{

        font-size: 24px;

    }

    #menu-bar-2{

        width: 100%;

    }

    #containerTempGraph{

        width:100%;

        margin:auto;

    }

    #containerHumGraph{

        width:100%;

        margin:auto;

    }

    #containerLightGraph{

        width:100%;

        margin:auto;

    }

    #containerRainGraph{

        width:100%;

        margin:auto;

    }

    #containerWinddirGraph{

        width:100%;

        margin:auto;

    }

    #containerWindspdGraph{

        width:100%;

        margin:auto;

    }

    .realtime-table {

        width: 100%;

    }

    .history {

        width: 100%;

    }

    .icon{

        text-align: center;

    }

    #system-img{

        width: 100%;

    }

    #table1{

        width: 100%;

    }

    #graph{

        width: 100%;

    }

}

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

    header{



        width: 100%;



    }

    #menu-icon{

        display: inline-block;

    }

    nav ul, nav:active ul{

        display: none;

        position: absolute;

        padding: 20px;

        background: #405580;

        border: 1px solid #FFF;

        right: 20px;

        top: 60px;

        width: 50%;

        border-radius: 2px 0 2px 2px;

    }

    nav li {

        text-align:center;

        width: 100%;

        padding: 10px 0px;

        margin: 0;

    }

    nav:hover ul{

        display: block;

    }

    section{

        float: left;

        width: 100%;

        margin: 0;

        padding: 0;

    }

    article{

        float: left;

        width: 100%;

        margin: 0;

        padding: 0;

    }

    aside{

        float: left;

        width: 100%;

        margin: 0;

        padding: 0;

    }

}