body {
	background-image:url('../images/background.jpg');
	background-repeat:no-repeat;
	background-position:center bottom;
	background-attachment:fixed;
	background-color:#006a9c;
	font-family: 'Khula', sans-serif;
	padding:0;
	margin:0;
}

body#home {
	padding-bottom:600px;
	background-attachment:scroll;
}

div#header {
	padding:30px 0 25px 0;
	text-align:center;
}

div#content {		
	width:92%;
	max-width:1000px;
	margin:1.5% auto;
}

div#col1 {
	width:50%;
	float:left;
	background:#004b6e;
	opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
    border-radius:10px;
    padding:3%;
    color:#FFF;
  }

div#col2 {
	width:40%;
	float:right;
}

div.news {
	background:#efefef;
	opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
    border-radius:10px;
    color:#000;
    padding:6%;
    margin-bottom:3%;
}	

div.news p:first-of-type {
	margin-top:0;
}

div#col3 {
	background-color: rgba(239,239,239,0.85);
    border-radius:10px;
    color:#000;
    padding:3%;
}

div#menucontainer {
	border-top:1px solid #FFF;
	border-bottom:1px solid #FFF;
	background:#004b6e;	
	margin:0 auto;
	text-align:center
}

ul#nav {
	background:#004b6e;
	list-style:none;
	margin:0 auto;
	padding:0;
	text-transform:uppercase;
	width:100%;
	max-width:1200px;
	font-weight:800;
	font-size:15px;
}

ul#nav li {
	display:inline-block;
	text-align:center;
}

ul#nav li:hover {
	background:#077bb1;
}

ul#nav li a {
	text-decoration:none;
	padding:11px 10px 5px 10px;
	display:inline-block;
	color:#FFF;
}

div#col1 p:first-of-type, div#col3 p:first-of-type {margin-top:0}	
div#col1 p:last-of-type, div#col2 p:last-of-type, div#col3 p:last-of-type {margin-bottom:0}

h1 {
	margin-top:0;
	font-size:24px;
	color:#004b6e;
}

h2 {
	margin-top:0;
	font-size:20px;
	color:#004b6e;
}

#content a {
	font-weight:bold;
	text-decoration:none;
	color:#004b6e;
}

span.blank {
	border-bottom:1px solid #000000;
	width:140px;
	display:inline-block;
	background:#cfcfcf;
	font-size:10px;
}

span.blankdot {
	border-bottom:2px dotted #000000;
	width:180px;
	display:inline-block;
}


ol#template li {
	margin-bottom:6px;
}

div#form {
	background-color: rgba(203,217,224,1);
	border:1px solid #7197a8;
	padding:3%;
	border-radius:8px;
	margin-top:20px;
	font-weight:bold;
	overflow:auto;
}

#form label {
	display:block;	
	margin-bottom:10px;
	overflow:auto;
}

#form label.checkbox {
	padding:10px 0 7px 0px;
	margin-bottom:0;
}

#form label.checkbox input {
	width:auto;
	float:none;
}

#form label span {
	width:20%;
	display:inline-block;
	padding-top:10px;
	text-align:right;
}

#form label input {
	border:1px solid #7197a8;
	border-radius:6px;
	padding:8px 7px 5px 7px;
	font-family: 'Khula', sans-serif;
	font-weight:bold;
	font-size:16px;
	display:inline-block;
	width:75%;
	float:right
}

#form a {
	background:#004b6e;
	padding:8px;
	font-weight:bold; 
	text-align:center;
	width:50%;
	display:block;
	margin:15px auto 0 auto;
	border-radius:8px;
	color:#FFF;
}

#form a:hover {
	background:#006a9c;
}

ol#bhalist {
	list-style:upper-latin;
}

.bestpractices ol {
  counter-reset: section;
  list-style-type: none;
  padding: 0;
}

.bestpractices li::before {
  counter-increment: section;
  content: counters(section, ".") ". ";
}

.bestpractices ol ol {
	padding-left: 20px;
}

.bestpractices ol li ol li ul {
	list-style: lower-roman;
}

.bestpractices ol li ol li ul li::before {
	content: none;
}

.bestpractices ol li ol li ol {
	list-style:decimal;
}

.bestpractices li {
	margin-bottom: 10px;
}

.bestpractices li:first-child {
	margin-top: 5px;
}


@media only screen and (max-width: 1000px) {
	body {
		background-image:url('../images/background-mobile.jpg');
		background-position:center;	
	}
	
	body#home {
		padding-bottom:0;
		background-attachment:fixed;
	}
	
	img#logo {
		width:60%;
	}
	
	div#col1, div#col3 {
		display:block;	
		float:none;
		width:auto;
		padding:5%;
		margin-bottom:15px;
	}
	
	div#col2 {
		display:block;	
		float:none;
		width:auto;
	}
	
	div.news {
		margin-bottom:15px;
	}
	
	div#form span, div#form input {
		width:90%;	
		display:block;
		text-align:left;
		float:none;
	}
	
	#form label.checkbox input {
		display:inline-block;
	}
	
	#form a {
		width:80%;
	}
}

@media only screen and (max-width: 450px) {
	ul#nav li, ul#nav li a {
		display:block;
	}

}