* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 1vw 5vw;
  text-align: left;
  background: #fff;
  color: #000;
}

.header h1 {
	margin-bottom:0;
}

.header p {
	margin-top:0;
}

.header img {
	float:left;
	margin-right:1em;
	
}
/* Style the top navigation bar */
.navbar {
    
  display: flex;
  background-color: #eee;
/*   background-image:url('img/nav-overlay.png'); /* , url('img/header-bg.jpg');
  background-position: bottom left;*/
  padding-left:5vw;
  padding-right:5vw;
  max-height:3em;
/*  border-top: 3px solid #b69e6f;
  box-shadow: 10px 10px 8px 10px #b69e6f; */
}

/* Style the navigation bar links */
.navbar a {
  color: #000;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
  opacity:1;
  font-size:1.2em;

}

.navbar a.home {
  background-image: url('img/icon-home.jpg');
  background-position: center center;
  background-size: contain;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
/*   text-decoration:underline; */
  text-decoration-color:#b69e6f;
}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;  
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 20%;
  background-color: #f1f1f1;
  /* padding-right:5vw; */
  border-left: 10px solid #071931;
}

.side h2{
	font-size:0.9em;
	color:#fff;
	padding:5px 1em 5px 4em;
	background-color: #2b73bd;
	max-width:75%;
	border-radius: 10px 10px 0 0;
	margin-bottom:0;
	margin-top:2em;
	font-weight:normal;
}

.side .newposts,
.side .postcategories {
	width:100%;
	background-color:#c3d8ed;
	padding: 1em 2em;
	margin-bottom: 2em;
}

.side .newposts a,
.side .postcategories a {
	font-size:0.9em;
	font-weight:bold;
	padding:0.5em 2em;
	color:#000;
	text-decoration:none;
	display:block;
}

.side .postcategories a {
	font-size:0.9em;
}

/* Main column */
.main {
  flex: 80%;
  background-color: white;
/*   padding-left:5vw; */
  padding-top:2em;
  padding-bottom:2em;
}

.main .main-content {
/*   border-top: 5px solid #071931; */
  margin-top: 1em;
  padding-top:1em;
}

.main .main-content img.article-photo {
/*	float:left;
	margin-right:1em;
	margin-top:1em; */
    margin:0 auto;
    display:block;
}

.main .main-content h1 {
	font-weight:normal;
	font-size:1.5em;		
}

.main .main-content h2 {
	font-weight:normal;
	font-size:3em;
/*	line-height:1.7em;	
 	margin-top:1.5em; */
}

.main .main-content h3 {
	font-weight:normal;
	font-size:0.8em;
	line-height:1.2em;	
	margin-top:1.5em;
}

.main .main-photo-wrapper {
	float:left;
	width:60%;
}

.main .main-thumbs-wrapper {
	float:right;
	width:40%;
}

/*.main img {
	border: 2px solid #000;
}*/

.clr {
	clear:both;
}
5
/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #d73cbe;
/*  background-image:url('img/header-bg.jpg'); */
  min-height:2.5em;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
  
  .main .main-photo-wrapper {
  	max-width:100%;
  }
}



form label { display:inline-block; width: 10%; }

input { width: 40%; }

.formsend {
    margin-top: 3em;
    margin-left: 12em;
    background-color: LightBlue;
    padding: 15px 30px;
    width: 10%;
    border:0;
    border-radius:5px;
    
}

#rules-label {
    width:90% !important;
}