/* ====================================================

Title: layout.css
Browser(s): All except IE6

Date created: April 25, 09
Last modified: April 26, 09 
Author: Ally Noormohamed

==================================================== */


/* --------------------------------------------------*/
/* =NORMALIZATION
   --------------------------------------------------*/

a, img{
	margin: 0;
	padding: 0;
	outline: none;
	border: 0;
}

/* --------------------------------------------------*/
/* =COMMON RULES
   --------------------------------------------------*/

body{
	margin: 20px 0 30px 0;
	padding: 0;
	font-family: tahoma, helvetica, sans-serif;
	background: #ffffff url('../images/bg-body.jpg') fixed top left;
}
p, ol, ul{
	line-height: 1.4em;
	font-size: 0.8em;
}
ol li{
	padding-bottom: 8px;
}

div#outside-wrapper{
	margin: 0;
	padding: 0;
	width: 1131px;
}
.hide{
	display: none;
}

/* ----on the left---- */

div#content-left-side{
	margin: 20px 0 30px 70px;
	padding: 0;
	float: left;
	position: relative;
	width: 794px;
	background-color: #ffffff;
}
div#content-left-side{
	color: #660000;
}
div#content-left-side h1{
	margin: 0;
	padding: 0;
	height: 187px;
	text-indent: -9999px;
	background: #ffffff url('../images/bg-hdr-ally-freelancer.gif') no-repeat top left;
}
div#content-left-side h2{
	margin: 35px 0 0 0;
	padding: 0;
	height: 40px;
	text-indent: -9999px;
}
div#content-left-side h2#recently-worked{
	margin-bottom: 20px;
	background: #ffffff url('../images/bg-recently-worked.gif') no-repeat top left;
}
div#content-left-side h2#about-me{
	background: #ffffff url('../images/bg-about-me.gif') no-repeat top left;
}
div#content-left-side h2#services{
	background: #ffffff url('../images/bg-services.gif') no-repeat top left;
}
div#content-left-side h2#portfolio{
	background: #ffffff url('../images/bg-portfolio.gif') no-repeat top left;
}
div#content-left-side h2#contact{
	background: #ffffff url('../images/bg-contact.gif') no-repeat top left;
}
div#content-left-side h3{
	margin: 18px 6px 18px 0;
	padding: 4px;
	font-size: 0.9em;
	font-weight: bold;
	color: #630d0d;
}
h3.project-title{
	background-color: #e6b766;
	border-top: 1px dotted #630d0d;
}
div#content{ 
	margin: 0;
	padding: 0 5px 30px 15px;
	width: 471px;
}
div#content img{
	padding: 2px;
	border: 1px solid #ed8923;
}
img.proj-thumbnail{ /* home page */
	margin-bottom: 30px;
}
/* portfolio page */
/*h3.another-project{ 
	padding-top: 20px !important;
	border-top: 2px solid #630d0d;
}*/
ul.project-list{
	margin: 10px 0 0 0;
	padding: 0;
	list-style: none;	
}
ul.project-list .deliverables{
	margin: 0;
	padding: 4px 4px 4px 4px;
	color: #ffffff;
	background-color: #ff9933;
}
ul.project-thmb-list{
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}
ul.project-thmb-list li{
	padding-right: 0px;
	display: inline;
}
ul#nav{
	margin: 10px 0 0 15px;
	padding: 0;
}
ul#nav li{
	display: inline;
}
ul.breadcrumbs{
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}
ul.breadcrumbs li{
	margin-right: 5px;
	padding-left: 10px;
	display: inline;
	background: url(../images/bg-arrow-right-orange.gif);
	background-repeat: no-repeat;
	background-position: 0 55%;
}

ul.breadcrumbs li.first{
	padding-left: 0px;
	background: none;
}

p#footer{
	clear: both;
	margin: 0 6px 0 0;
	padding: 8px 5px 0 0;
	font-size: 0.7em;
	border-top: 1px solid #630d0d;
}

/* ----on the right---- */

div#content-right-side{
	margin: 5px 0 0 0;
	padding: 0;
	position: absolute;
	top: -15px;
	left: 570px;
	width: 337px;
	color: #ffffff;
}
img#contact-info{
	margin: 5px 0 20px 0;
}
div.highlight{
	margin: 0 0 25px 0;
	padding: 0 15px 0 15px;
	border: 4px solid #d6ba78;
	color: #ffffff;
	background-color: #8c6239;
}
div.highlight ul, .highlight ol{
	margin: 0;
	padding: 0 0 0 25px;
}
div.vcard{
	margin-bottom: 25px;
	height: 135px;
	text-indent: -9999px;
	background: url('../images/bg-email-phone.png') no-repeat bottom left;	
}
.reading img{
	padding: 2px;
	border: 1px solid #ffffff;
}
.another-book{
	padding-top: 12px;
	border-top: 1px dotted #ffffff;
}
div.highlight h3{
	font-size: 0.9em;
	font-weight: bold;
}
h3#services, h3#about-me, h3#when-to-start, 
h3#why-design, h3#why-do-it, h3#cost,
h3#i-read, h3#outside-work, h3#elsewhere-on-web{
	margin: 0 0 0 0;
	padding: 10px 0 4px 0;
	text-indent: -9999px;
}
h3#services{
	background: url('../images/bg-small-what-i-do.gif') no-repeat bottom left;
}
h3#about-me{
	background: url('../images/bg-small-about-me.gif') no-repeat bottom left;
}
h3#when-to-start{
	background: url('../images/bg-small-when-to-start.gif') no-repeat bottom left;
}
h3#why-do-it{
	padding-top: 23px;
	background: url('../images/bg-small-why-do-it.gif') no-repeat bottom left;
}
h3#cost{
	background: url('../images/bg-small-cost.gif') no-repeat bottom left;
}
h3#i-read{
	padding-top: 23px;
	margin-bottom: 20px;
	background: url('../images/bg-small-i-read.gif') no-repeat bottom left;
}
h3#outside-work{
	padding-top: 23px;
	background: url('../images/bg-small-outside-work.gif') no-repeat bottom left;
}
h3#elsewhere-on-web{
	padding-top: 23px;
	background: url('../images/bg-small-elsewhere-on-web.gif') no-repeat bottom left;
}
ul.social-web{
	margin: 10px 0 10px 0 !important;
	padding: 0 !important;
	list-style-type: none;
}
ul.social-web li{
	padding: 10px 0 0 25px;
}

ul.social-web li.facebook{
	background: url('../images/icon-facebook.png') no-repeat 0 12px;
}
ul.social-web li.twitter{
	background: url('../images/icon-twitter.png') no-repeat 0 12px;
}
ul.social-web li.linkedin{
	background: url('../images/icon-linkedin.png') no-repeat 0 12px;
}

/* --------------------------------------------------*/
/* =LINKS
   --------------------------------------------------*/

/* ---links on the left--- */

div#content-left-side a, div#content-left-side a:link{
	color: #f26522;
	text-decoration: none;
}
div#content-left-side a:visited{
	color: #8c6239;
}
div#content-left-side p a:hover, /* keep the images out of it */ 
div#content-left-side ul a:hover,
div#content-left-side ol a:hover{
	border-bottom: 2px solid #f26522;
}
ul#nav li a img{
	outline: none !important;
}
ul#nav li a:hover,
ul.project-thmb-list li a:hover{
	border: none !important;
	/*border-bottom: 3px solid #790000;*/
}

/* ---links on the right--- */

.highlight a, .highlight a:link{
	color: #fff200;
	text-decoration: none;
}
.highlight a:visited{
	color: #fbaf5d;
}
.highlight a:hover{
	border-bottom: 2px solid #fff200;
}