@import url("https://fonts.googleapis.com/css?family=Cairo:400,700|Roboto:400,700");

/** global **/
body {margin:0px auto; padding:0; background:#80B763; font-family:"Cairo","sans-serif"; font-size:1.0em; color:#666;}
* {box-sizing: border-box;}

/** element defaults **/
table {width:100%; text-align:left; border-spacing: 0px;}
th, td {padding:5px;}
td img {vertical-align: middle;} 
th {color:#000;	border-bottom:1px solid #ccc; background-color:#fff; }
td {border-bottom:1px solid #f4f4f4;}
td.no {border-bottom:0px solid #f4f4f4;}
.row:hover {background:#eee; color:#000;}
code, blockquote {display:block; border-left:5px solid #ddd; padding:10px; margin-bottom:20px;}
blockquote p {font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; margin:0; height:1%;}
p {line-height:2.0em; margin-bottom:20px;}
a {color:#6FAB4F;}
a:hover {color:#000; text-decoration:none;}
a.link {color:#666; text-decoration:none;}
a.link:hover {color:#6fab4f; text-decoration:underline;}
a:focus {outline:none;}

input[type=text], select, textarea {font-family:"Cairo","sans-serif"; font-size:0.9em; color:#666; width:40%; padding:0 8px 0 8px; margin:10px 0 10px; border:1px solid #ccc; border-radius:4px; resize:vertical;}
textarea {font-family:"Cairo","sans-serif"; font-size:0.9em; color:#666; width: 100%;}
label {padding: 6px 6px 6px 0; display: inline-block;}
input[type=submit] {font-family:"Cairo","sans-serif"; font-size:0.9em; background-color:#80B763; color:white; padding:6px 20px; border:none; border-radius:4px; cursor:pointer; float:right;}
input[type=submit]:hover {background-color: #45a049;}
.container {border-radius: 5px; padding-top: 20px;}
.col2 {float: left; width: 17%; margin-top: 6px;}
.col5 {float: left; width: 83%; margin-top: 6px;}

/* Clear floats after the columns */
.msg:after {content: ""; display: table; clear: both;}

h1 {font-size:1.875em;}
h2 {color:#2F2F2F; font-size:1.8em;	font-weight:bold; padding:0 0 5px; margin:0;}
h3 {color:#80B763; font-size:1.6em;	padding-bottom:5px;}
h4 {color:#000; font-size:1.4em; padding-bottom:0px;}
h5 {color:#666666; font-size:1.2em; padding:0 0 5px;}
ul, ol {margin:0 0 35px 35px;}
li {padding-bottom:5px;}

/** wrapper **/
div#wrapper {margin:0px auto;	padding:0;}
.width {width:auto;	margin:0 auto;}

/** header **/
header {padding:30px 17px 30px;	/*margin:0 auto;*/}
header h1 {text-align:right;}
header h1 a, header h1 a:hover, header h1 a:visited {color:#fff; font-size:1.5em; text-decoration:none; letter-spacing:-2px;}
header h2 {color:#C4DDB6;	text-align:right; font-size:0.9375em;	font-weight:normal; padding-bottom:0; letter-spacing:0;}

/** body **/
section#body {padding:0; background:#80B763;}

/** content+sidebar styles **/
section#content {margin-left:230px; padding:20px;	background-color:#fff;}
.column-left {float:left;}
.column-right {float:right;}
aside#sidebar {width:230px;	position:fixed;}
nav#mainnav ul {padding:0; margin:0; list-style:none; font-family:"Roboto","sans-serif"; font-size:1.2em;}
nav#mainnav li {padding:0; border-bottom: 1px solid #99C581; border-top:1px solid #6FAB4F;}
nav#mainnav li.selected-item {border-bottom:none;}
nav#mainnav li.selected-item a, nav#mainnav li.selected-item a:hover {color:#80B763; font-weight:bold; background:#fff;}
nav#mainnav li a:hover {background:#669D48;	color:#fff; text-decoration:none;}
nav#mainnav li a {color:#F0F0F0; display:block;	padding:15px 17px; text-align:right; font-weight:bold; text-decoration:none;}
article {padding:10px 10px 30px; font-size:1.125em; border-bottom:1px solid #eee;}
article h2 {padding-bottom:0; line-height:1.1em; font-size:1.8em;}
article .article-info {color:#C0C0C0; font-size:0.75em; padding:0px 0px 10px;}
article .article-info a {color:#ccc;}

/** footer **/
footer {padding:20px 0px;}
footer p {color:#666;	margin:0;	font-size:0.8em; text-align:center;}
footer p a {color:#666;}
footer p a:hover {color:#333; border-bottom-color:#333;}

/** clear fix **/
.clear:after {display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.clear {clear:both; display:inline-block;}
.clear {display:block;}

/* gallery */
.gallery {display: flex; display: -webkit-flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: auto; align-content: flex-start; font-size: 14px; text-align: center;}
.box {box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 15px; border: solid 0px rgba(160, 160, 160, 0.3); display: block; width: 174px; border-radius: 7px; margin: 0 20px 20px 0;}
.box p {margin: 0px; padding: 0px; margin-bottom: 10px; line-height: 1em;}
.box h3 {margin: 0px; margin-bottom: 5px; line-height: 1em; font-size:1.25em;}
.imgbox {flex: 0 0 auto; margin: 5px;	width: 160px;	height: 120px; border-radius: 4px;}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 540px) {
.box {width: 110px;}
.imgbox {max-width: 90%; max-height: 90%;}
}

@media screen and (max-width: 600px) {
.container {padding-top: 0px;}
.col2, .col5, input[type=submit] {width: 100%; margin-top: 0;}
input[type=text], select, textarea {width: 100%;}
}

@media screen and (max-width:768px) {
body {font-size:0.875em;}
img {max-height:100%; max-width:100%;}	
.width {width:auto; padding-left:10px; padding-right:10px;}
.column-left, .column-right {margin:0px;}
header h1, header h2, nav#mainnav li a {text-align:center; padding:5px 7px;}
section#content, aside#sidebar {position:relative; float:none; width:auto; margin-left:0;}
header, header h1 a, header h1 a:hover {text-align:center; padding:10px 0 0 0; font-size:1.1em;}
}