html{
	font-size:20px;
}
body {
	background-color:white;
	margin:0;
	font-family:Georgia;
}
a{
	text-decoration:none;
}

#heading{ 
	/*display:none;*/
	background-color:#14162d;
	color:white;/*#19aec7;*/
	font-size:1rem;
	text-align:center;
	margin: 0;
	height:1.2rem;
    padding:12px;
}
# search{display:none;}
/*#caption{
	display:none;
	margin:0rem;
	padding:0 0.2rem 0.5rem;
	font-size:0.7rem;
	text-align:center;
	background-color:#14162d;
	color:white;
}
#method_menu{
    width:100%;
}*/
ol a li{
	box-sizing:border-box;
	width:100%;
	/*height:1.4rem;*/
	list-style:none;
	color:#14162d;
	/*border-top: solid lightblue 1px;*/
    padding:8px;
	padding-left:50px;
	font-size:0.75rem;
    border-bottom:solid lightblue 1px;
	/*font-family:courier;*/
	/*transition-property:bkground-color,font-size;
	transition-duration:0.3s;*/
}
ol a li:hover{
	background-color:  #ebf6f9;
    transition:background-color 0.2s ease-out;
}


/*******************ACCORDION*********************/
			.accordion {
			  background-color: #14162d;
			  color: lightblue;
			  cursor: pointer;
			  padding: 18px;
			  width: 100%;
			  border: none;
			  text-align: left;
			  outline: none;
			  font-size: 0.8rem;
			  transition: 0.4s;
			  /*border-top-style:solid;
			  border-top-width:1px;*/
			  border-top: solid white 1px;
			  font-family:Georgia;
			  box-shadow:3px 3px 6px #aaaaaa;
			}

			.active, .accordion:hover {
			  /*background-color: lightblue;*/
			  color:white;
			}
		
			.accordion::after {
			  content: '\002B';
			  color: lightblue;
			  font-weight: bold;
			  float: right;
			  margin-left: 5px;
			}
			.accordion:hover:after {
				content: '\002B';
				color:white;
			}
			.active:hover:after {
			  content: "\2212";color:white;
			}
			.active:after {
			  content: "\2212";color:white;
			}

			.panel {
			  padding: 0 px;
			  background-color: white;
			  max-height: 0;
			  overflow: hidden;
			  transition: max-height 0.2s ease-out;
			  font-size:0.7rem;
			}
.panel ol{
    padding:0;
    margin:0;
}
/*******************************************************************/
#container{
	display:flex;
	flex-direction:column;
}
#left-sidebar{
	
	margin:0;
	padding:0;
	font-size:0.7rem;
	text-align:center;
	/*border-style:solid;
	border-width:1px;*/
}
figure{
	padding-top:10px;
	margin:0;
}


main{
	
	flex-direction:column;
	order:-1;
}
#main_heading{
	text-align:center;
	font-size:1rem;
}

#right-sidebar{
	
	margin:0;
	padding:10px;
	font-size:0.7rem;
	text-align:center;
}


	footer{
		display:flex;
		flex-direction:row;
		background-color:#14162d;
	}
	footer a {
		width:100%;
		box-sizing:border-box;
		margin:0;
		padding:12px;
		color:lightblue;
		font-size:0.6rem;
		text-align:center;
	}
	footer a:visited{
		color:lightblue;
	}


/*--------------FOR VIEWPORT WIDTH GREATER THAN 768 PIXELS--------------------*/
/*============================================================================*/
@media screen and (min-width:768px){
	body{
		margin-left:30%;
		margin-right:30%;
	}
	header{
		/*height:3.5rem;*/
		background-color:#14162d;
		display:flex;
		justify-content:center;
        padding:0 20px;
	}
	#heading{ 
		box-sizing:border-box;
		display:flex;
		font-size:2rem;
		padding:0.5rem;
		height:100%;
	}
	#caption{
		font-size:1rem;	
	}

	#container{
		display:flex;
		flex-direction:column;
	}
	main{
		width:100%;
		padding:0px;
		flex-direction:column;
		order:-1;
		
	}
	#left-sidebar{
        box-sizing :border-box;
		width:100%;
		margin:0px;
		padding:0px;
		/*height:100%;*/
		/*border-style:none;*/
		/*border-right-style:solid;*/
        border-left: solid lightblue 1px;
        border-right: solid lightblue 1px;
	}
    img{
    width:100%;
}
	#right-sidebar{
		display:none;
	}
	footer{
		flex-direction:row;
        margin:0;
        padding:0;
	}
}