/****************************************************
* Client: Jessica Brook Design
* Date:   May 2006
* Author: Moustique Design http://www.moustique.net/
****************************************************/

/* ---------------- TYPOGRAPHY ----------------*/

body {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 76%;/* font sizing in ems. decide on text sizes in relation to each other first. then change this value to control overall text size.*/
	color: #CCCCCC;
	background: #766D5E url('../images/tile_body_bg.gif') top left repeat;
	}
	
#header_top h1 {
display:none;
	}

h1 {
	font-size: 1.7em;
	font-weight:normal;
	}

h2 {
	font-size: 1.7em;
	font-weight:normal;
	}

h3 {
	font-size: 1em;
	font-weight:bold;
	}

h4 {
	font-size: 0.9em;
	font-weight: bold;
	margin: 1em;
	padding: 0;
	}

p {
	font-size:0.9em;
	text-align: justify;
	}

ol, ul {
margin: 0.5em 1em 0.5em 1em;
}
ol, ul,li {
font-size: 0.95em;
p
}

strong {font-weight: bold;}

em {font-style:italic;}

hr {
	border:1px solid #333;
	color:#fff;
	margin:10px 0px;
	background-color:transparent;
	}
/* ------------------ LINKS ------------------*/
a:link,
a:visited,
a:active {
color:#CCCCCC;
background-color:transparent;
}

a:hover {
color:#fff;
background-color:transparent;
}
/* ------------------ WRAPPER ------------------*/
#fake_table { /*used to centre site vertically*/
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table;
}

#fake_table_cell {/*used to centre site vertically*/
display: table-cell;
vertical-align: middle;
}

#wrapper {
margin-left:auto;
margin-right:auto;
width:800px;
}

/* ------------------ HEADER AREA ------------------*/
#header_top {
text-align:center;
background: #ccc url('../images/logo.gif') top left no-repeat;
height:153px;
}
/* ------------------ NAV & Site By Moustique ------------*/
#nav{
clear:both;
}

#nav ul {
padding: 4px 0 0 250px;
margin:0;
list-style-type:none;
text-align:center;
}

#nav ul:after {
content:" ";
display:block;
visibility:hidden;
clear:both;
}

#nav span,
#bottom span {
visibility:hidden;
}

#nav ul li {
float:left;
list-style-type:none;
margin: 0;
padding:0;
width:60px;
height:10px;
}

#nav ul a {
display:block;
width:60px;
height: 10px;
margin: 0;
padding:0;
text-decoration:none;
}

#bottom p { /*contains the Site By Moustique note. centres it.*/
margin-left:auto;
margin-right:auto;
}

#bottom a {
display:block;
width:143px;
height:9px;
text-decoration:none;
}

#siteby {/*this is for the Site By Moustique note*/
background:transparent url('../images/site_by_over.gif') center no-repeat;
width:143px;
height:9px;
}

#siteby a:hover,
#siteby a:active,
#siteby a.current {
background:transparent url('../images/site_by_out.gif') center no-repeat;
width:143px;
height:9px;
}
/*---------- NAV IMAGE MANAGEMENT -----------*/
#item_1 {
	background: url('../images/home_out.gif') center no-repeat;
	width: 60px;
	height:10px;
}


#item_1 a:hover,
#item_1 a:active,
#item_1 a.current {
	background: url('../images/home_over.gif') center no-repeat;
}

#item_2 {
	background: url('../images/portfolio_out.gif')  center no-repeat;
	width: 60px;
	height:10px;
}

#item_2 a:hover,
#item_2 a:active,
#item_2 a.current {
	background: url('../images/portfolio_over.gif')  center no-repeat;

}

#item_3 {
	background: url('../images/profile_out.gif')  center no-repeat;
	width: 60px;
	height:10px;
}

#item_3 a:hover,
#item_3 a:active,
#item_3 a.current {
	background: url('../images/profile_over.gif')  center no-repeat;
}

#item_4 {
	background: url('../images/services_out.gif') center no-repeat;
	width: 60px;
	height:10px;
}

#item_4 a:hover,
#item_4 a:active,
#item_4 a.current {
	background: url('../images/services_over.gif')  center no-repeat;
}

#item_5 {
	background: url('../images/contact_out.gif') center no-repeat;
	width: 60px;
	height:10px;
}

#item_5 a:hover,
#item_5 a:active,
#item_5 a.current {
	background: url('../images/contact_over.gif')  center no-repeat;
}
/* ------------------ MAIN CONTENT AREA ------------------*/
#main_content {}

#left_content {
float:left;
width:400px;
}

port_table { /*centres portfolio images if they are smaller than 400X382*/
display:table;
height:382px;
width:400px;
}

port_cell {/*used with above rule to centre portfolio images*/
display:table-cell;
vertical-align:middle;
text-align:center;
}

#right_content {
float:right;
width:360px;
height:382px;
overflow-y: scroll;
padding:0 15px;
}

/* ------------------ FOOTER MENU ------------------*/
#footer {
margin:1em 0;
text-align: center;
}

/* ------------------ MISC. CLASSES and IDs ------------------*/
top_align_cells {margin:1em 0;}

td { /*for the thumbnails on the profile page*/
vertical-align:top;
font:0.8em;
}

#right_content.noscroll {overflow:hidden;}/*for the contact page*/