/* CSS for my site 
Developed by Mohodin Rageh
Date: 11/11/07
Late edit: 19/01/08
Web :  www.codingpoint.co.uk
Email: mohodin@yahoo.com
*/


body {
	font: 90% Arial, Verdana, Sans-Serif;
	background:#D6E0E9;
	text-align: center; 
}

em{font-weight:bold; background: #FFFFC4;color:#333;}

a:hover {color: #822C07;}


ul.ul-list{
	line-height: 1.4em;
	margin: 5px 0 10px 25px;
	list-style-image: URL(../img/arrow.gif);
	color: #822C07;
}



.postal-address{
	width: 10em;
	font-weight:bold;
	margin:1.1em 0 0 .8em;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;	
	color:#fff;
	}

	

h1 {
	font-size: 1.8em;
	padding: 0 0 10px 0;	
	border-bottom: 1px solid #ccc;
	color: #ccc;
}



h2 {
	font-size: 1.6em;
	padding: 30px 0 2px 7px;
	color: #383111;
}

h3 {
	font-size: 1.4em;
	padding: 5px 0 0 10px;
}

h4 {
	font-size: 1.2em;
	padding: 5px 0 0 7px;
	color: #383111;
}


#container { 
	width: 840px;
	margin: 0 auto;
	padding: 0;
	background: #fff;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	text-align: left; 
}


#header {	
	margin: 0;
	padding: 0;
	height: 140px;
	clear: both;
	text-align: right;
	border-bottom: 1px solid #fff;
	background: #79AD0D url(../img/head66.jpg) top no-repeat;
	color: #808080;
}
#header #logo {
	margin: 20px 0 0 0;
	padding: 0;
	float:left;
	background: transparent;
	overflow: hidden;
	}
	

#navi {
	float: right;
	clear: right;
	margin: 0 0 10px 0;
	padding: 0;/*any value here will create border along the whole right column.*/
	width: 185px;
	font-size: 1em;
	background: #E5D580 url(../img/nv-bg5.jpg) top no-repeat;
}
	

#navi ul {	
	list-style: none;
	width: 185px;
	margin: 0 0 4px 0;
	padding: 0;
	font-size: 1em;
}	

#navi li {
	margin:3px 0 3px 0;
}

#navi li a {
    display: block;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	height: 21px;
	text-decoration: none;
	padding: 4px 3px 3px 4px;
	/*border-bottom: 1px solid #E6E6E6;*/
	background: transparent;
    color: #822C07;	
}	
	
#navi li a:hover {
  background-color: #7D5A3A;
  color: #FFF;
}



/*Columns start here*/
#right-col {
	width: 185px;
	background:#F8F7F7;
	border-left: 1px solid #DDD;
}


#right-col a {
	text-decoration: underline;
}

#right-col p {
	margin: 0;	
    padding:4px 4px 4px 7px;
    line-height: 1.5em;
    font-size: 1.1em;
    color: #000;
}

#right-col h2 {
	padding: 23px 0 2px 7px;
}

	


#middle-col {
	float: right;
	width: 320px;
	background:#fff;
	border-left: 1px solid #DDD;
}


#middle-col p {    
        padding:4px 8px 4px 6px;
        font-size: 1.1em;
        line-height: 1.5em;
        color: #000;
    }


#left-col {
	margin: 0 310px 0 0;
    width: 320px;
	text-align: left;
	background:#fff;
	border-left: 1px solid #c5dea1;
}


#left-col p {    
        padding:4px 5px 4px 8px;
		line-height: 1.5em;
        font-size: 1.1em;
        color: #000;
    }
	
	
#main-content {
	float: left;
	width: 640px;
	border-left: 1px solid #DDD;
}

#main-content p {    
        padding:4px 5px 4px 8px;
        font-size: 1.1em;
        line-height: 1.5em;
        color: #000;
    }

#main-content p.error{
 border-bottom: 1px solid red;
 color:red;
}

#portfolio-box {
	font: normal 80%/18px Arial, Helvetica, sans-serif;
	position: relative;
	height: 100%;
    padding: 0 8px 4px 8px;
	color: #f0f3f9;
}

#portfolio-box p {
	line-height: 1.5em;
    font-size: 1em;
    padding: 0 8px 4px 8px;
}

#portfolio-box a:hover, #portfolio-box a:active, #portfolio-box a:focus{text-decoration: none;}

#portfolio-left {
	width: 295px;
	float: left;
    height:205px;
    border-left: 1px solid #eee;
}

#portfolio-left h3 {
	background: transparent url(../img/sample_screenshot.gif) left top no-repeat;
    width: 300px;
	height: 25px;
	}


#portfolio-right {
	margin-left: 330px;
	width: 280px;
    height:205px;
    border-left: 1px solid #eee;
    color:#333;
	}

		
#portfolio-right h3 {
		background: transparent url(../img/work_done.gif) left top no-repeat;
        width: 280px;
		height: 25px;
	   }
       
       
       

#branding-home {
	margin:  0 185px 0 0;
	width:650px;
	/*background: #1D1E27;*/
    background: #1b0f35 url(../img/branding.jpg) top no-repeat;
	height: 158px;
}


#branding-home p {
    padding:10px 6px 0 5px;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.4em;
	/*color:#333;*/
	color:#f3ff07;
}

#branding-portfolio {
	margin:  0 185px 0 0;
	width:648px;
	background: url(../img/pic2.jpg) top no-repeat;
	height: 12.8em;
}

#branding-about {
	margin:  0 185px 0 0;
	width:648px;
	background: url(../img/pic3.jpg) top no-repeat;
	height: 12.8em;
}

#branding-contact {
	margin:  0 180px 0 0;
	width:648px;
	background: url(../img/pic4.jpg) top no-repeat;
	height: 12.8em;
}


#branding-home h1, #branding-portfolio h1, #branding-about h1, #branding-contact h1 {
	margin: 0;
	font-size: 2.3em;
	font-weight: bold;
	padding: 8px 5px 5px 5px;
	border-bottom: 1px solid #ccc;
	/*color: #3A6794;*/
	color:#fff;
}

/*FORM styling starts here*/
label{
float: left;
width: 140px;
padding: 0 0 0 .7em;
font-weight: bold;
font-size: 92%;
}

input, select, textarea{
width: 180px;
margin-bottom: 5px;
}

textarea{
width: 220px;
height: 105px;
}

.shortfield {
width:100px;
}

.boxes{
width: 1em;
}
#submitter{
margin-left: 150px;
margin-top: 5px;
width: 90px;
}

/*
#footer {
	margin: 0;
	clear: both;
	background: #FFF;
	border-top: 1px solid #ccc;
}

#footer p {
	padding: 4px;
	clear:both;
	height:2.6em;
	text-align: left;
	color: #333;
}

#footer a {
	text-decoration: underline;
	color: #3A6794;
}

#footer a:hover {
	color: #822C07;
}
*/









#footer { 
width: 100%;
height:2.6em;
clear: both;
font-size: 86%;
overflow:hidden;
border-top: 1px solid #ccc;
background: #e4d789;
color: #333;
}
#footer p {padding: 5px;}
.clear { clear: both; background: none; }


#footer .copyright  {
float : left;
}
#footer .copyright a {text-decoration:none; color : #333;} 
#footer .copyright a:hover {	
	border-bottom: 1px solid #949229;	
	color:#ac3604; 
	}

#footer .designby {
text-align : right;
float : right;
} 

#footer .designby a {
	text-decoration:none; 	
	color: #333; 
	} 

#footer .designby a:hover {	
	border-bottom: 1px solid #949229;	
	color:#ac3604; 
	}

/*use it with this line*/
/*<div class="clear">&nbsp;</div>*/
.clear{
     width: 0;
     height: 0;
	 margin: 0;
     clear: both;
     display: block;
     float: none;
     overflow: hidden;
     visibility: hidden;

}