/* Style the main content and the sidebar */

.container{
	width: 100%;
	margin: 10px auto;
	overflow:hidden;
}

.hh1 {
color: #111; 
text-align:right;
font-family: 'Helvetica Neue', sans-serif; 
font-weight: bold; 
letter-spacing: -1px; 
line-height: 1; 
margin: 20px 10px 10px 10px; 
}

	
.main-section{
	background-color:#9A8CC6;
	border-left: 6px solid #994BFF;
	border-radius: 5px;
	color:#fff;
	width: 100%;
	float:left;
	min-height:auto;
	box-shadow: 10px 10px 5px grey;
	font-size: 50px; 
}

.main-sectionr{
	background-color:#FF7B7B;
	border-left: 6px solid red;
	border-radius: 5px;
	color:#fff;
	width: 100%;
	float:left;
	min-height:auto;
	box-shadow: 10px 10px 5px grey;
	font-size: 50px; 
}

.main-sectiono{
	background-color:#82C5E0;
	border-left: 6px solid #007FFF;
	border-radius: 5px;
	color:#fff;
	width: 100%;
	float:left;
	min-height:auto;
	box-shadow: 10px 10px 5px grey;
	font-size: 50px; 
}

.main-sections{
	background-color:#FE8032;
	border-left: 6px solid #FF4502;
	border-radius: 5px;
	color:#fff;
	width: 100%;
	float:left;
	min-height:auto;
	box-shadow: 10px 10px 5px grey;
	font-size: 50px; 
}



article {
  background-color: white;
  font-family: "ff-tisa-web-pro",serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  padding: 1em;
  -webkit-column-width: 350px;
  -moz-column-width: 350px;
  column-width: 350px;
}

.sidebar{
	background-color:#ccc;
	width:350px;
	float:right;
	height:400px;
}

.container p{
	padding-top:0px;
	text-align:left;
}

.note{
	text-align:left;
	padding-top:10px;
	font-style:italic;
}

/* This simple media query makes the column layout
   linear on smaller screens */

@media (max-width:900px){

	.container{
		width:100%;
	}

	.main-section, .sidebar{
		width:auto;
		margin-bottom:0px;
		float:none;
	}

}