/*Layout*/

body {
    margin:0
	}

#header	{
		padding-top:1%;
		text-align:center;
		/*background-color:#0066cc;*/
		padding-bottom:1%;
		font-size:1.6em;
		}
#nav-bar	{
			display:block;
			width:100%;
			height:auto;
			text-align:center;
			padding-left:350px;
			padding-bottom:6%;
			/*background-color:#3399ff;*/
			}
#content {
		float:right;
		width:100%;
		height:593px;
		text-align:center;
		padding-bottom:40%;
		/*line-height:1.4;*/
		font-size: 26px;
		line-height:1em;
		/*background-color:#3399ff;*/
		}
#content img	{
			padding-right:18.5%;
			}
#top img	{
		display:block;
		padding-left:42%;
		}
#lost img	{
			margin-left:-3.5%;
			/*padding-right:10%;*/
			display:block;
			}
#error {
		width:100%;
		height:593px;
		text-align:left;
		padding-left:25%;
		padding-bottom:10%;
		font-size: 26px;
		line-height:1em;
		/*background-color:#3399ff;*/
		}		
#footer {
		clear:both;
		padding-bottom:3%;
		text-align:center;
		/*background-color:#0066cc;*/
		}		
	
/* Forms */

#form 	 {	
		box-sizing: border-box;
		}
	
#form {
				border-radius: 5px;
				background-color: #fff;
				padding: 30px;
				width: 61%;
				height:auto;
				display:block;
				padding-left:25%;
				}

input[type=text], textarea {
					width: 100%;
					padding: 12px;
					border: 3px solid #000;
					box-sizing: border-box;
					margin-top: 6px;
					margin-bottom: 16px;
					resize: vertical;
					float:left;
					}

input[type=email], emailaddress {
							width: 100%;
							padding: 12px;
							border: 3px solid #000;
							box-sizing: border-box;
							margin-top: 6px;
							margin-bottom: 16px;
							resize: vertical;
							float:left;
							}

input[type=url], homepage {
						width: 100%;
						padding: 12px;
						border: 3px solid #000;
						box-sizing: border-box;
						margin-top: 6px;
						margin-bottom: 16px;
						resize: vertical;
						float:left;
						}

input[type=submit] {
				background-color: #cccc66;
				color:#fff;
				font-size:16px;
				padding: 12px 20px;
				border: none;
				cursor: pointer;
				}

input[type=submit]:hover {
					background-color: #000;
						}

input,label,textarea	{
					font-family: Liberation Sans,'Open Sans', sans-serif, Arial;
					color:#000;
					float:left;
						}

 /* Forms code ends */	
						
/* Navigation */

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    width: 600px;
    height:139px;
    background-color:lightgrey;
    flex-direction:wrap;
	margin-left:7%;
				}
            
.flex-container a	{
					text-decoration:none;
					font-family:liberation sans;
					color:#fff;
					text-align:center;
					text-bottom:20px;
					}

.flex-container a:hover	{
						color:#000;
						}
.flex-item1 :hover	{
					width: 80px;
					}
.flex-item3 :hover	{
					width: 80px;
					}
.flex-item5 :hover	{
					width: 80px;
					}
.flex-item8 :hover	{
					width: 80px;
					}
.flex-item10 :hover	{
					width: 80px;
					}
.flex-item12 :hover	{
					width: 80px;
					}
.flex-item1 {				/* Fihankra */
    background-color:#fff; 
    width: 100px;
    height: 100px;
    margin: 0px;
	text-align:center;
	padding-top:35px;
	padding-bottom:10px;
			}
.flex-item2 {				/* Home */
    background-color:#cccc66;
    width: 100px;
    height: 100px;
    margin: 0px;
    text-align:center;
	padding-top:55px;
			}
.flex-item3 {
    background-color:#fff;	/* Adinkrahene */
    width: 100px;
    height: 100px;
    margin: 0px;
    text-align:center;
	padding-top:35px;
	padding-bottom:10px;
			}
.flex-item4 {				/* Blog */
    background-color:#663300;
    width: 100px;
    height: 100px;
    margin: 0px;
    text-align:center;
	padding-top:55px;
			}
.flex-item5 {				/* Mpuannum */
    background-color:#fff;
    width: 100px;
    height: 100px;
    margin: 0px;
    text-align:center;
	padding-top:35px;
	padding-bottom:10px;
			}
.flex-item6 {				/* Customs */
    background-color:#cc6600;
    width: 100px;
    height: 100px;
    margin: 0px;
    text-align:center;
	padding-top:55px;
			}
.flex-item7 {				/* Food */
    background-color:#339966;
    width: 100px;
    height: 81px;
    margin: 0px;
    text-align:center;
	padding-top:60px;
			}
.flex-item8 {				/* Fawohodie */
    background-color:#fff;
    width: 100px;
    height: 100px;
    margin: 0px;
    text-align:center;
	padding-top:45px;
	padding-bottom:10px;
			}
.flex-item9 {				/* Sports */
    background-color:#00cccc;
    width: 100px;
    height: 83px;
    margin: 0px;
    text-align:center;
	padding-top:58px;
			}
.flex-item10 {				/* Okodee Mmowere */
    background-color:#fff;
    width: 100px;
    height: 100px;
    margin: 0px;
    text-align:center;
	padding-top:45px;
	padding-bottom:10px;
			}
.flex-item11 {				/* Arts */
    background-color:#cc3300;
    width: 100px;
    height: 83px;
    margin: 0px;
    text-align:center;
	padding-top:58px;
			}
.flex-item12 {				/* Yansaa */
    background-color:#fff;
    width: 100px;
    height: 100px;
    margin: 0px;
    text-align:center;
	padding-top:45px;
	padding-bottom:10px;
			}				
							
.flex-container ul 	{
					list-style-type: none;
					margin: 0;
					padding-bottom:2%;
					overflow: hidden;
					background-color: #333;
					}

.flex-container li 	{
					float:left;
					height:100px;
					width:96.9px;
					}

.flex-container li a 	{
					float:left;
					display: block;
					color: white;
					margin-right:5%;
					text-align: center;
					padding:12px 0px;
					text-decoration: none;
					}
					
/* Footer */

#footer {
		clear:both;
		/*background-color:#0066cc;*/
		padding-bottom:3.5%;
		}
#year	{
		float:left;
		padding-left:7%;
		}
#social-media	{
				float:left;
				padding-left:26%;
				}
#contact	{
			float:right;
			padding-right:7%;
			}
#about	{
		float:right;
		padding-right:9%;
		}
		
/*Typography*/
	
h1	{
	font-family:SAF;				/* need complete font-families!!*/
	}
#content h2	{
	text-align: left;
	padding-left:25%;
	}
h2	{
	text-align: left;
	}
h3	{
	text-align: left;
	padding-left:25%;
	}
h2,h3,h5	{
		font-family:Liberation Sans,'Open Sans', sans-serif, Arial;
		}
li,p	{
	font-family:Liberation Sans,'Open Sans', sans-serif, Arial;
	font-size:16px;
	}

p.blocktext {				/* tagline */
			text-align: center;
			display: block;
			margin-left: auto;
			margin-right: auto;
			font-size:0.5em;
			}
			
#form label	{
	font-family:Liberation Sans,'Open Sans', sans-serif, Arial;
	font-size:16px;
	text-align:left;
	padding-left:0.5%;
	padding-right:28%;
	float:left;
	width:100%;
	}
/*input[value=submit] 	{
				font-weight:600px;
					}8???/
			
/*Links*/
			
#content a	{
			color:#cccc66;
			font-size:18px;
			text-decoration:none;
			}
#content p	{
			text-align:left;
			padding-left:25%;
			padding-right:28%;
			}	
#footer a  	{
			color:#000;
			text-decoration:none;
			}
#error a		{
			color:#cccc66;
			text-decoration:none;
			font-weight:500;
			font-size:20px;
			}