﻿/* ---------------------------------------------------------------------------------------------
	File Name: main.css
			
	Developed By: Getachew Y. Assen

	Version: 1.0
	
	Copyright: All rights reserved. No part of this publication may be reproduced, distributed, 
	or transmitted in any form or by any means, including photocopying, recording, or other 
	electronic or mechanical methods, without the prior written permission of the publisher.
------------------------------------------------------------------------------------------------ */

/* reset browser css */
* {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-style:normal;
	margin:0;
	padding:0;
	border:0;
}

/* Global  */
html {
	font-size:16px;
	color:black;
	font-weight:normal;
	font-style:normal;
	font-family:Tahoma, Geneva, sans-serif;
}

body {
	background-color:#829FF9;
	margin:20px auto 20px auto;
}

/* Containers style */
#wrapper {
	width:1000px;
	height:1655px;
	margin:0px auto;
	background-color:#ffffff;
	border:medium #000000 solid;
}

/* Top area style */
#header {
	background-color:#FFFFFF;
	width:100%;
	height:auto;
	padding:0;
	overflow:hidden;
}

#logo {
	float:left;
	margin:0;
	padding:0 0 2px 0;
}

#logo img {
	width:100%;
	height:5%;
	padding:0;
	margin:5px 0 0 0;
}

/* Horizontal navigation bar style */
#nav {
	margin:0;
	padding:0;
	width: 100%;
	height: 30px;
	background:#666666;
	border-top:#000000 medium solid;
	border-bottom:medium #000000 solid;
}
#nav ul {
	margin:0;
	padding:0;
	height:100%;
	text-align:left;
	list-style: none;
	position: relative;
}

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

#nav a {
	display:block;
	margin: 0; 
	padding: 5px 20px 5px 10px;
	border-right: 1px solid white;
	font-size:medium;
	font-weight:bolder;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration: none;
}
#nav a:link {
	color:white;
	background:#666666;
}
#nav a:visited {
	color: white;
	background:#666666;
}
#nav a:focus {
	color:white;
	background-color:maroon;
}
#nav a:active {
	color:white;
	background-color:maroon;
}

#nav a:hover{
	color:white;
	background-color:maroon;
}

#nav ul ul {
	display: none;
	position: absolute; 
}	
#nav ul li:hover > ul {
	display:inherit;
}	
#nav ul ul li {
	width:230px;
	float:none;
	display:list-item;
	position: relative;
	border: 0.5px solid white;
}
	
li > a:after { content:  ' ▼'; }
li > a:only-child:after { content: ''; }

/* Content area style */
#content {
	margin:0;
	font-size:14px;
	float:left;
	width:590px;
	height:915px;
	padding:0 5px 0 0;
	margin-bottom:10px;
	margin-left:5px;
}

#content h1 {
	margin:5px 0;
	color:green;
	font-size:24px;
	border-bottom:3px black solid;
	padding:10px 0 5px 5px;
	font-weight:bold;
	text-align:center;
}

#content h2 {
	margin:0;
	color:#FF0000;
	font-size:24px;
	padding:10px 0 5px 0;
	font-weight:bold;
	text-align:center;
}

#content p {
	margin:0;
	line-height:160%;
	text-align:justify;
	padding:5px 0 0 5px;
}

/* Right sidebar area style */
#sidebar {
	margin:5px 10px 10px 0;
	font-size:14px;
	padding:0;
	float:right;
	width:380px;
	height:915px;
	padding-top:17px;
}

#sidebar p {
	margin:5px;
	line-height:160%;
	text-align:justify;
}

#sidebar img {
	display: block;
 	margin:auto;
}

#sidebar h2 {
	margin:5px 0 5px 0;
	color:#E88B00;
	font-size:24px;
	border-bottom:3px black solid;
	padding:10px 0;
	font-weight:bold;
	text-align:center;
}

/* Foot note area style */
#footer {
	clear:both;
	background-color:black;
	width:100%;
	height:50px;
	padding:10px 0;
	border-top:3px black solid;
}

#copy-right {
	float:left;
	width:60%;
	height:auto;
	margin:0;
	padding: 5px 0 10px 0;
}

#copy-right p {
	margin:0 0 0 200px;
	padding:0;
	width:auto;
	text-align:center;
	color:#F73E00;
	font-size:13px;
	font-style:italic;
	font-weight:bold;
}

#copy-right ul  {
	list-style: none;
}

#copy-right ul li {
	display:inline;
}

/* Social Media style */
#social-media {
	float:right;
	width:35%;
	height:auto;
	margin: 0 0 0 10px;
	padding:0;
}

#lebel {
	float:left;
	width:25%;
	margin: 20px 0 0 0;
	padding: 0;
}

#icons {
	float:left;
	width:60%;
	height:auto;
	margin: 0 10px 0 10px;
	padding:0;
}

#icons ul img {
	margin:5px;
	float:left;
	padding:0;
	width:42px;
	height:42px;
}

#lebel p {
	margin:0;
	padding:0;
	width:auto;
	text-align:right;
	color:#F73E00;
	font-size:13px;
	font-style:italic;
	font-weight:bold;
}

#social-media ul  {
	list-style: none;
}

#social-media ul li {
	display:inline;
}
