/*Global*/

body{
	
	background: #F3F3F3;
	margin: 0 auto;
	padding: 0;


}


/*text*/
h1 {
	color: #4C4C4C;
	text-align: center;
}
h4 {
	text-align: center;
	margin: 5px;
}

body{
	font-family: Avenir;
}

a{
	text-decoration: none;
	color: black;
}


/*header*/
.header{
	background-color: white;	
	height:auto;
	position: fixed;
	width: 100%;
	border-bottom: solid rgb(181,181,181) 1px;
}

.header_wrapper{
	height: 100%;
	margin: 0 auto;
	padding-top: 1%;
	width: 80%;

	
}

.logo{
	display: inline-block;
	width: 15%;
}

#brown_logo{
	padding-top:5%;
}

#title{

	display: block;
	width: 100%;

}

#title p{
	float: right;
	letter-spacing: 5px;
	margin: 1% 0 1% 0;
}

hr{
	width: 100%;
	margin:0 auto;

}
.nav {
	width: 85%;
	display: inline;
	float: right;
	padding-top: 10px;
}




.menu{
	display: block;
	
}

.menu li{
	padding: 1% 40px 1% 0;
	
	display: inline-block;
	
	font-size: 12px;
}

.menu li:hover{
	font-weight: bold;
	

}

.menu ul{
	display: inline;
	padding-left: 0;
}





.login{
	display: inline;
	float: right;
	font-size: 12px;
	margin: 0;
	padding: 1% 0 1% 0;


	
}


/* drop down menu */

li a, .dropbtn{
	border: none;
}

.dropdown_content {
	
    display: none;
    width: 160%;
    padding-left: 100px; 
    margin-left:-40%;
    background-color: #D9D9D9;
  	
	
}

.dropdown_content a{
	
    font-size: 12;
    padding: 1% 30px 1% 0;
}

.dropdown_wrapper{
	margin: 0 auto;
	padding: 5px 0 5px 0;
	width: 72%;
}







/*====================== Content ====================== */

#content{
	width: 100%;
	height: auto;
	padding-top: 7%;
}

#content_wrapper{

	width: 80%;
	height: auto;
	margin: 0 auto;
	max-width: 1500px;
	min-width: 1000px;

}


#right_column,#left_column{
	display: inline-block;

}

#right_column{
	width: 24.5%;
	height: auto;
	font-family: Avenir;
}

#left_column{

	width: 74.5%;
	height: 800px;
	
	float:right;
}



/*left column panels*/
#select_wrapper{
	
	margin: 0 auto;
	padding-top: 5%;
	width: 90%;
	height: auto;
	padding-bottom: 5%;
}
#select_data_table{
	width: 100%;
	height: auto;
	background-color: #FFFFFF;
	display: block;
	margin-bottom: 4%;
	box-shadow: 0 0 5px rgba(180,180,180,10);
}


#selec_data,.button{
	display: block;
	text-align: center;
	color:#5B5B5B;
	font-size: 12px;
	background-color: #EAEAEA;
	text-align: center;
	margin-bottom: 3%;
	height: auto;

}

#selec_data{
	padding: 0.5% 5% 5% 5%;
	text-align: left;
}



/*graph table*/
#graph_table{

	width: 100%;
	background-color: #76797F;
	display: block;
	margin-bottom: 1.5%;
}

#graph_wrapper{
	margin: 0 auto;
	
	padding-top: 2.5%;
	width: 90%;
	height: auto;
	
}





/*buttons and inputs*/
#datasets input[type="radio"] {
	display: inline-block;

    vertical-align: middle;
    margin-left: 50%;
    cursor: pointer;
    
    border-radius: 50%;
    width: 12px;
    height: 12px;
    background: #D9D9D9;
    outline: none;
    -webkit-appearance: none;
}
#datasets input[type="radio"]:checked {
	background: #64BDFF;
	border: 3px solid #D9D9D9;
}


#input_data input[type="text"] {

	display: inline-block;
    vertical-align: middle;
  
    cursor: pointer;
    border:none;
    border-bottom: 1.5px solid #9C9C9C;
   
    background:  #EAEAEA;
    outline: none;
    -webkit-appearance: none;

    color:#5A5A5E;

    margin: 3% 0 3% 0;

    width: 100%;
}



#datasets input[type="submit"] {
	width: 90%; 
	margin: auto;
	text-align: center;
}

.button{
	padding: 3%;

	
}
.button:hover {
	padding: 3%;
	background-color: #64BDFF;
	color: white;
}
#reset{
	width: 32%;
	display: inline-block;
	float: right;
	

}
#how{
	width: 50%;
	display: inline-block;
	float: left;
	
}

#reset_button{
	height: 37px;
}

#howOFF{
	width: 50%;
	display: inline-block;
	float: left;
	
}

/*hint box*/
#hint_box{
	width: 100%;
	display: block;	
}

#hint{
	padding: 5px;
}

#hint_text{
	font-size: 12px;
}




