/*Thanks Steven Bradley for the fluid layouts :)*/

/*Layout*/

body {
    margin:0
	}

#header	{
		padding-top:1%;
		text-align:center;
		/*background-color:#0066cc;*/
		padding-bottom:1%;
		font-size:1.6em;
		}
#content {
		display:block;
		margin-left: auto;
		margin-right: auto;
		width:46%;
		height:auto;
		text-align:center;
		/*background-color:#3399ff;*/
		}
img.displayed {
			display: block;
			margin-left: auto;
			margin-right: auto;
			}
		
#plinth 	{
		display:block;
		background:url("../images/miscellaneous-symbol-background.jpg") no-repeat scroll 0 0 transparent;
		background-position:center;
		/*background-color:#339966;*/
		width:1500px;
		height:500px;	
		padding-top:120px;
		/*padding-bottom:110px;*/
		}
#Food-Symbolism	{
				float: left;
				/*background-color:#339966;*/
				padding-left:40px;
				width:20%;
				}		
#Food-Meaning	{
				float: right;
				/*background-color:#dddddd;*/
				margin-left:5px;
				padding-right:80px;
				width:66%;
				}		
#goals 	{
		display:block;
		background:url("../images/miscellaneous-goals-background.jpg") no-repeat scroll 0 0 transparent;
		background-position:center;
		background-size:contain;
		/*background-color:#339966;*/
		margin-left: auto;
		margin-right: auto;
		width:1400px;
		height:450px;
		padding-left:6px;
		padding-right:50px;
		padding-top:30px;
		padding-bottom:130px;
		}
/* blog gallery code */

#left-content {
			float:left;
			width:17%;
			height:265px;
			margin-top:6%;
			margin-left:11%;
			margin-right:0.5%;
			padding-right:0.5%;
			background:url("../images/skin-bleaching.jpg") no-repeat scroll 0 0 transparent;
			/*background-color:#3399ff;*/
			} /* left image */
#primary {
		float:left;
		width:4%;
		height:370px;
		background:url("../images/miscellaneous-kente-column.jpg") no-repeat scroll 0 0 transparent;
		/*background-color:#99cccc;*/
		} /* column 1 */
#middle-content {
		float:left;
		width:19%;
		height:265px;
		margin-top:6%;
		margin-left:0.1%;
		background:url("../images/sleep.jpg") no-repeat scroll 0 0 transparent;
		/*background-color:#3399ff;*/
		} /* middle image */
#secondary 	{
			float:left;
			width:4%;
			height:370px;
			background:url("../images/miscellaneous-kente-column.jpg") no-repeat scroll 0 0 transparent;
			/*background-color:#99cccc;*/
			} /* column 2 */
#right-content {
			float:left;
			width:19%;
			height:265px;
			margin-top:6%;
			margin-left:0.5%;
			margin-right:1%;
			background:url("../images/jaidus-cropped2.jpg") no-repeat scroll 0 0 transparent;
			/*background-color:#3399ff;*/
			} /* right image */			
.gutter {
		float:left;
		width:3%;
		height:530px;
		/*background-color:#ddd;*/
		}		
.desc p	{
		margin-left:-92%;
		padding-top:220px;
		text-align:center;
		width:230px;
		}
		
/* 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;
					}
		
/*Typography*/
	
h1	{
	font-family:SAF, Arial;				/* need complete font-families!!*/
	}
h2, h5	{
		font-family:Liberation Sans,'Open Sans', sans-serif, Arial;
		}
h2		{
		font-size:24px;
		color:#000000;
		font-style:bold;
		}
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;
			}
			
#Food-Symbolism p	{
					color:#000000;
					margin:auto;
					padding:auto;
					text-align: center;
					width:130%;
					font-size:22px;
					}
#Food-Meaning p		{
					margin:auto;
					padding:auto;
					text-align: center;
					width:50%;
					}
				
#footer 	{
		font-family:Liberation Sans,'Open Sans', sans-serif, Arial;
		font-size:16px;
		}
#info h2, p	{
			clear:both;
			text-align: left;
			font-size: 26px;
			line-height:1.2em;
			padding-left:280px;
			padding-right:280px;
			}
#info  p	{	
		clear:both;
		text-align: left;
		font-size: 24px;
		line-height:1.2em;
		padding-left:280px;
		padding-right:280px;
		}
#goals p	{
		text-align:left;
		color:#fff;
		width:700px;
		padding-bottom:5px;
		padding-left:380px;
		padding-right:40px;
		padding-top:20px;
		font-size:20px;
		/*background-color:#339966;*/
		}
		
.desc p	{
		font-family:Liberation Sans,'Open Sans', sans-serif, Arial;
		font-weight:bold;
		}
			
/*Links*/	

a:link, a:visited	{
					color:#fff;
					text-decoration:none;
					}	
#footer a  	{
			color:#000;
			text-decoration:none;
			}
li a:hover {
		background-color:#000;
		height:100px;
		width:97px;
		text-align:center;
		}
.desc a  	{
		color:#000;
		font-size:16px;
		text-decoration:none;
		/*text-align:center;
		background-color:#339966;*/
		}
		
/* 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%;
		}