/*
Theme Name: Huma.Me Version 1.
Theme URI: http://huma.me
Description: Two column layout
Author: Orginal template by http://matthewjamestaylor.com/. Modifications by Huma (admin@huma.me).
*/

/* Fix the default settings */
*{
  margin: 0;
  padding: 0;
  border: none;
  }
/* The body settings */
body {
	margin:0;
	padding:0;
	border:0;
	width:100%;
	background: #000 url('images/bg.jpg') repeat-x;
	min-width:700px; /* does not work in early IE versions */
	font: 60%/1.5 verdana, tahoma, arial, sans-serif;
}
/* The a settings */
a img {
	border: none;
	}

a {
	text-decoration:none;
}

a:link, a:visited, a:active {
	color: #04B4AE;
	 	}

a:hover	{
	color: #008B87;
   text-decoration: underline;
	}

p {
	margin:.4em 0 .8em 0;
	padding:0;
}
img {
	margin:10px 0 5px;
}


/* The header settings */
#header {
	clear:both;
	float:left;
	width:100%;
}

.logo{
	padding: 0;
	margin: 0 auto;
	width: 700px;
	height: 240px;
	text-align: center;
    background: url('images/hkarim.jpg') no-repeat;
	}

/* The welcome settings */

.welcome{
	padding: 105px 0 0 0;
	margin: 0 0 0 320px;
	text-align: left;
	color: #fff;
	clear: left;
	}

/* breadcrumb div */
.page {
	position:relative;
	clear:both;
	float:left;
	width:100%;
	overflow:hidden;
}
/*  content and menu settings */

.container {
	float:left;
	width:100%;
	position:relative;
}
.content, .menu {
	float:left;
	position:relative;
	padding:0 0 1em 0;
	overflow:hidden;
}
/* the sidebar settings */
.leftsidebar{
	background:#fff;
}
.leftsidebar .container  {
	right:75%;
	background:#fff;
}
.leftsidebar .content {
	width:60%;
	left:112%;
}
.leftsidebar .menu {
	width:31%;
	left:16%;
}
/* Footer settings */
#footer {
	clear:both;
	float:left;
	width:100%;
	background-color: #00B29A;

}
#footer p {
	padding:10px;
	margin:0 auto;
	color: #000;
	text-align: center;
}

#footer a {
	color: #15FFE1;
	}
#footer a:hover {
	color: #fff;
	text-decoration: none;
	}

/* The header navigation settings */

#header ul {
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
	background-color: #00B29A;
}
#header ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}
#header ul li a {
	display:block;
	float:left;
	margin:0 0 0 30px;
	padding: 18px 8px 18px 8px;
	text-align:center;
	text-decoration:none;
	position:relative;
	line-height:1.3em;
	font-size: 1.6em;
	font-weight: bold;
	text-transform: uppercase;
	left: 10%;
	width: 11%;
}
#header ul li a:hover {
		font-weight: bold;
	text-decoration:none;
}
#header ul li a span {
	display:block;
}

.web a {
	color: #97F7EB;
	}

.web a:hover{
	background-color: #97F7EB;
	color: #00B29A;
	}
.blends a {
	color: #97F7EB;
	}

.blends a:hover{
	background-color: #6BF7E7;
	color: #00B29A;
	}
.misc a {
	color: #97F7EB;
	}

.misc a:hover{
	background-color: #20EFD4;
	color: #D2FFFB;
	}
.info a {
	color: #97F7EB;
	}

.info a:hover{
	background-color: #08E3C6;
	color: #E7FFFC;
	}
.home a {
	color: #97F7EB;
	}

.home a:hover{
	background-color: #09D3B8;
	color: #E7FFFC;
	}

/* The botton div layer*/	
.reel {
	position:relative;
	clear:both;
	width:100%;
	overflow:hidden;
	background-color: #000;
}

/* BOX settings*/
.box {
	width: 200px;
	height: 150px;
	margin-left: 5px;
   	padding: 5px;
	background-color: #00B29A;
	}

.box:hover {
	background-color: #AEFFF8;
	}

.showcase {
	padding: 10px 0 5px 30px;
	margin: 0 auto;
	text-align: center;
	}

/* The header settings */

h1 {

	font-family: georgia,garamond, Serif;
	font-weight: bold;
	margin: 0.5em;
	line-height: 1.8em;
	}



h2, h3  {
	font-family: Verdana, Arial, Sans-Serif;
	font-weight: bold;
	margin: 0.5em;
	line-height: 1.6em;
	}



h1 {

	font-size: 1.7em;
	text-align: left;
	font-style: italic;
	border-bottom: #037667 1px solid;
	}



h2 {

	font-family:  Verdana, Arial, Sans-Serif;
	font-size: 1.3em;
	letter-spacing: 0;
	padding-top: 0.5em;
	border-bottom: #06A691 1px solid;
	}



.reel h2{
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 1.2em;
	letter-spacing: 0;
	padding-top: 0.5em;
	border-bottom: #fff 1px solid;
	color: #fff;

	}
h3 {
	font-size: 1.1em;
	}



h1, h1 a, h1 a:hover, h1 a:visited, .description {
	text-decoration: none;
	color: #037667;
	}



h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
	color: #037667;
	}



h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #menu h2, cite {
	text-decoration: none;
	}

/* The font size settings */

.content {
	font-size: 1.2em;
	
	}
.menu {
	font-size: 1.1em;

	}
.welcome {
	font-size: 1em;
	line-height: 1.4em
	}

/* The font class settings */
small {
	font-size: 0.9em;
	line-height: 1.5em;
	}

.tiny {
	font-size: 0.9em;
	}

.tween{
	font-size: 0.8em;
	}

.center {
	text-align: center;
	}


/* The image settings */

p img {
	padding: 0;
	max-width: 100%;
	}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}


/*	Sort out the lists	*/
/*	List settings	*/
ul	{
	margin: 0 0 0 30px;
	}

ul li {
	list-style-type: square;
	}

#leftbar li.marks {
	margin: 0;
	border-bottom: none;
	}

/* The p settings */
p.text	{
	text-indent: 20px;
	}


p.center {
	text-align: center;
	}

p.right	 {
	text-align: right;
	}



/* The font class settings */

.indent	{

	text-indent: 30px;
	margin: 2px 3px 5px 3px;
	}

.small {
	font-size: 0.9em;
	line-height: 1.5em;
	}

.center {
	text-align: center;
	}

.con
{
font-weight: bold;
}

/* bold em strong i */
b, i, strong, em {
     color: #36A293;
		}
/* The select alt acronmy abbr span settings */
select {
	width: 130px;
	}


.alt {
	margin: 0;
	padding: 10px;
	}

acronym, abbr {
	border-bottom: 1px dashed #36A293;
	padding: 1px;
	}
	
span.list {
	font-weight:bold;
	color: #36A293;
}

span.hello {
	font-weight:bold;
	color: #8BFFF0;
}

/* The blockquote settings */

blockquote {
	margin: 15px 10px 10px 10px;
	padding: 10px;
	background-color: #36A293;
	color: #D1F7F2;
	border: 1px solid #014038;
	}

blockquote li {
	list-style: none;
	}

blockquote ul {
  	padding: 0;
  	margin: 0;
  	list-style: none;
	}
input {
	padding: 2px;
	}
/* End input */

/* a settings for divs */
.reel a {
	color: #8BFFF0;
	}

.reel a:hover {
	color: #fff;
	text-decoration: none;
	}

.welcome a {
	color: #8BFFF0;
	}

.welcome a:hover {
	color: #09D3B8;
	text-decoration: none;
	}
.hidden{
	display: none;
	}
/*Div for tools and coding */


#toco
{   padding: 0;
	margin: 0;
	color: #36A293;
	}
	

.co {   
    float: left;
	padding: 0;
	margin: 0;
	height: 240px;
	}

.to {
	padding: 0 0 0 0;
	margin-left: 250px;	
	height: 240px;
	}

.bo {   
    float: left;
	padding: 0;
	margin: 0;	
		}

.so {
	padding: 0 0 0 0;
	margin-left: 250px;
	}
	
/*Hide the links names colour*/		
a.time{
	color: #000 !important;
	text-decoration: none;
	}
	
a.wel{
	color: #fff !important; 
	text-decoration: none;
	}

		
#design
{   padding: 0;
	margin: 0;
	width: 700px;
	}	
	

.pic

{   float: left;
	padding: 0;
	margin: 0;
	width: 250px;
	height: 150px;
	font-weight:bold;
}

.words

{

	padding: 0 0 0 0;
	margin-left: 260px;
	width: 300px;
}		

/* design box */
.project li {
  	 float: left;
	list-style: none;
	padding: 0 10px 0 0;
	margin-top: 8px;
	}

.project ul {
  	padding: 0;
  	margin: 0;
  	list-style: none;
 	 }

.project li a img{
  	 display: block;
	 border:#b4b4b4 1px none;
 	 background-color: #36A293;
	 height: 150px;
	 width: 200px;
	 margin: 0 0 0 0;
	 padding: 5px;	
   }

.project li a:hover img {
   	background-color: #09D3B8;
	  	}
/* hidden fields */
.hidden {
display: none;
}	

/* Clear Div */
.space
{
clear: left;
}

.clear{
clear: both;
}

.note {
color: #fff;
}

/* The input and form settings */
input, textarea, option, select {
	color: #000;
	border: 1px solid #000;
	background-color: #fff;
	font: inherit;
	text-decoration: none; 
	}