@charset "UTF-8";
/********************************************************************
*
*Purpose : Main style sheet, containing colour, layout, typography
*
*Author : Ed Stivala, N3W Media
*
*Client : KM Design - own site
* 
*
* File Organisation :
*	GENERIC, RESET & UTILITY
*	COLOUR & TYPOGRAPHY
*	PAGE LAYOUTS - BLOCK LEVEL
*	PAGE LAYOUTS - Minor Elements
*		 
*
********************************************************************/


/************************************
*
*	GENERIC, RESET & UTILITY
*
************************************/
* {
	margin:0;
	padding:0;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	}

.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

a:active, a:focus { outline: 0; }  /* stops dotted outline in Firefox */

/************************************
*
*	COLOUR & TYPOGRAPHY
*
************************************/

body  {
	font: 100% Arial, Helvetica, sans-serif;
	font-size:0.625em;   /* this makes 1em = 10px so that it is easier to caluculate font sizes using ems */
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	background:#ABA585;
}

h1 {
	font-size:24px;	/* Using px font sizing to make sure the min-height for th footer menu renders better*/
	font-weight:bold;
	color:#FCAF1A;
	margin-top:20px;
	margin-bottom:10px;
	}

h2 {
	font-weight:bold;
	margin-top:20px;
	margin-left:20px;
	}

p {
	line-height:120%;
	margin-left:20px;
	margin-right:20px;
	margin-bottom:15px;	
	}
a {
	text-decoration:none;
	font-weight:bold;
	}
	
.white {
	color:#FFFFFF;
	}
.black {
	color:#000000;
	}
.normal {
	font-weight:normal;
	}


/************************************
*
*	PAGE LAYOUTS - BLOCK LEVEL
*
************************************/

#container, #container_news { 
	width: 900px;
	height:450px;  
	background: #231F20; 
	margin: 100px auto 0 auto; /* the auto margins (in conjunction with a width) center the page */
	padding: 0 0 0 0;
	border: none;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

#container_news { 
	background: #231F20 url(../images/news/news_background.gif) bottom left no-repeat; 
} 

#contentBox {
	background:#F26631;
	float:right;
	width:450px;
	height:450px;
}
	#contentBox ul {
		margin:0 0 0 20px;
		}
	#contentBox li {
		list-style:none;
		color:#FFFFFF;
		}
			

#contentBoxLogos {
	background:#FF7200; /* orange*/
	float:right;
	width:450px;
	height:450px;
}

#footer {
	width:900px;
	height:30px;
	background:#ABA585;
	padding:0;
	margin:auto;
	text-align:right;
	}


/************************************
*
*	PAGE LAYOUTS - Minor Elements
*
***********************************
/*** SITE WIDE ***/
#kmlogo {
	position:relative;
	top:90px;
	left:20px;
	}
	
/*********************************************** LOGOS PAGE ***/	
.instruction {
	font-size: 80%; 
}

.description {
	font-size: 100%; 
}

/*********************************************** HOME PAGE ***/	
#easal_char {
	position:relative;
	left:28px;
	top:180px;
	}

#home_lead_para {
	color:#FFFFFF;
	padding:125px 0 0 0;
}
	
/******************************************* ABOUT SECTION ***/
#approach_char {
	position:relative;
	left:230px;
	top:30px;
	}
#title_graphic {
	margin-top:20px;
	margin-left:20px;
	}
#who_char {
	position:relative;
	left:130px;
	top:35px;
	}

#eco_list {
	margin: 0 0 0 15px;  /* The eco arrow graphic has 5px approx of space to its left so we allow for this in the offset of the UL in the page*/
	list-style:none;
	}	
#eco_list li {
	background:url(../images/about_section/eco-arrow.jpg) no-repeat;  /* Using a background image as it is more cross browser consistent*/ 
	padding: 4px 0 0 35px; /* Because we are using a background image we need to position the text correctly for it*/
	color:#FFFFFF;
	margin-bottom:10px;
	}
#disciplines {
	margin-left:19px;
	margin-top:20px;
	color:#FFFFFF;
	}
#simplicity_list {
	margin-bottom:0;
	padding-bottom:0;
	}
	
/******************************************* PORTFOLIO SECTION ***/
.portfolio_graphic {
	position:relative;
	top:20px;
	left:20px;
	}
.portfolio_link {
	text-decoration:underline;
	font-weight:normal;
	}
.logo_graphic {
	position:relative;
	top:190px;
	left:36px;
	}
.next { 
	position:relative;
	bottom:-160px;
	right:-370px;
	}
.next_branding { 
	position:relative;
	bottom:-160px;
	right:-280px;
	}
.next_logos {
	margin: 0 30px 0 0;
}
	
.logo_desc {
	margin: 0 0 6px 0;
}
#graphical_menu_1row {   /* One Row Configuration */
	float:right;
	margin:117px 12px 0 0;   /* the table uses 8px cellpadding so this is allowed for in the margin offset */
	}

#graphical_menu_2row {      /* Two Row Configuration */
	float:right;
	margin:12px 12px 0 0;
	}
.graphical_menu img {
	border:none;
	}
.graphical_menu a:focus, #graphical_menu a:active {
	border:none;
	}  
/******************************************* CLIENT SECTION ***/
table.client_list1, table.client_list2 {
	float: left;
	margin: 19px 0 0 20px; /*Table is used to display the client lists, so we need to adjust the margin to account for the invisible border!*/
	color:#FFFFFF;
	}

table.client_list2 {
	float: left;
	margin: 19px 0 0 0; /*Table is used to display the client lists, so we need to adjust the margin to account for the invisible border!*/
	color:#FFFFFF;
	}

#client_list {
	margin: 19px 0 0 20px; /*Table is used to display the client lists, so we need to adjust the margin to account for the invisible border!*/
	color:#FFFFFF;
	}

/******************************************* TESTIMONIAL SECTION ***/
#testimonialBox {
	background:url(../images/illustrations/testimonials.jpg);
	float:right;
	width:450px;
	height:450px;
	color:#FFFFFF;
	}
.testimonial_text {
	margin-bottom:0px;
}
.testimonial_attribute {
	font-style:italic;
}
#testimonialBox a {
	margin-left:20px;
	font-weight:normal;
	}

/******************************************* NEWS SECTION ***/

/******************************************* CONTACT SECTION ***/
#contact_details {
	color:#FFFFFF;
	margin:20px 0 0 0;
	}
#contact_details p {
	line-height:120%;
	}
#contact_details a {
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	}
/******************************************* SITEMAP PAGE ***/

.page_list li {
	margin:15px 0 0 0;
	}
.sub_page_list li {
	margin:0 0 0 13px;
	}