/* 	Colours used:
/* 	Bright Red: #731305
/*	Dark Red: #590f04
/*	Pale Red/Pink: #FFD3C1
/*	Light Orange: #AE2F02
*/

/****************************************************************/
/************************ Basic Formatting **********************/
/****************************************************************/


body {
	background:#731305 url(images/body_bg.jpg) no-repeat center top fixed;
	font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
	color: #FFD3C1;
	font-size: 13px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

p {line-height:19px;}

a {color: #d0722a; text-decoration:none;}
a:hover {text-decoration:underline;}

img {border:0px;}

h2 {color:#ffffff; font-size:23px;  letter-spacing:1px ;}

h3 {color: #ffffff; font-size:17px;  letter-spacing:1px ;}



/* Use a Div and a span with the following class names, respectively,
 for the pullquotes in long sections of text */
.pullquote { float:left; text-align:left; display: inline; /* IE6 Problem */ font-size:15px; padding:5px 5px 0px 5px; margin:5px 10px 2px 0px; width:200px; background:#590f04; color:#ffffff;}
.pqname {text-align:right; display:block; font-size: 10px; letter-spacing:1px ;}

/* alternate box for testimonials in sidebars */
.pullbox{text-align:left;  padding:3px 5px 3px 3px; margin:2px 2px 7px 2px; background:#590f04; color:#ffffff;}

/* Put a span with the tag class on each service offered,
when presented on case study/testimonial pages */
.tag {font-size:10px; text-transform:uppercase; color:#FFD3C1; background:#AE2F02; padding:2px; margin-right:5px; border:1px solid #AE2F02; -moz-border-radius:3px; -webkit-border-radius:3px;}
.tag:hover {font-size:10px; text-transform:uppercase; color:#ffffff; background:#590f04; padding:2px; margin-right:5px; border:1px solid #590f04; -moz-border-radius:3px; -webkit-border-radius:3px; cursor:default;}

/* When you need something in a non-aligned box */
.box {padding:5px 5px 5px 5px; margin:5px 5px 15px 5px; background:#590f04;}

/* Incase we want to hide something (usually plain text)
from view but allow indexing by search engines, or reading
by screenreaders for the visually impaired.
Apply this class to anything, but usually on <h2> where
also using an image as your heading/title.*/
.hidden {display:none}

/* This one hides but keeps the space it occupied */
.novis {visibility:hidden}

/* extra formatting */
.center {text-align:center;}
.indent {float:right; clear:right; display: inline; /* IE6 Problem */}
.small {font-size:9px;}
.right {float:right; text-align:right; display: inline; /* IE6 Problem */}
.right img {padding-left:10px;}
.left {float:left; text-align:left; display: inline; /* IE6 Problem */}
.clear {clear:both;}

/****************************************************************/
/************* Layout and layout-specific formatting ************/
/****************************************************************/


/* Evertything goes inside the #container */
#container
	{
	width: 830px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	background:transparent;
	}

/* Navigation header. This is the topmost bar. */	
#navhead {
	text-align:center;
	padding: 0;
	background:transparent;
	}
	
#navhead a.navbar:hover {background-color:#731305;}	

#navhead img {border:0; padding:0;}

#navhead img.main {
	padding-bottom:10px;
}

/* Main header area, where the headline and slider dwell.
We introduce the site's purpose here with big delicious images. */

#mainhead
	{	text-align:center;
	background:transparent;
	}

#mainhead img {
	padding:25px 0 25px 0;
}	

/* Image slider fix for flashing images. Do not edit/remove */
#slider {
	margin:auto;
	position:relative;
	background:url(images/loading.gif) no-repeat 50% 50% transparent; 
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}

#slider2 {
	margin:auto;
	position:relative;
	background:url(images/loading.gif) no-repeat 50% 50% transparent; 
}
#slider2 img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}


/* The Content div holds the content, including other layout divs.
This is like a mini #container div. */
#content
	{
	width:820px;
	margin: auto;
	overflow: hidden;
	padding-top:15px;
	background:transparent;
	}

#content p {
	margin:5px;
	padding: 0 10px 10px 10px;

}
/* styling for the list on the services page */
ul.iconlist {list-style-type: none; padding:0;}
ul.iconlist li {padding:10px 0 15px 0;}
ul.iconlist img {padding:0 10px 0 0; float:left; clear:both; vertical-align:middle; display: inline; /* IE6 Problem */}


/* sitemap list styling */
ul.sitemap {padding:0 0 0 70px;}
ul.sitemap li {padding: 10px 0 0 0; font-size: 15px;}

/* When using images for headers/titles in the content areas, use this class */
img.col_title {
	padding:0 0;
	left: auto;
}

/* Images within columns that need to fit snug to the edge of their divs ONLY */
img.tight {
	padding: 0px;
	margin: 0px;
	border:3px solid #590f04; 
	
	}
	
img.gallery {border:3px solid #590f04; margin:7px;}


/* Column markup. l_col, m_col, and r_col are the three column layout as seen on the homepage.
l_wide works with r_col  on content pages such as Services.html.

Do not edit these - make a new ID if you need to change something! */	
#l_col {
	float:left;
	width:240px;
	padding: 15px;
	background:transparent;
	display: inline; /* IE6 Problem */
}
#m_col {
	float:left;
	width:250px;
	padding: 15px;
	background:transparent;
	display: inline; /* IE6 Problem */
}

#r_col {
	float:right;
	width:240px;
	padding: 15px;
	background:transparent;
	display: inline; /* IE6 Problem */
}

#l_wide {
	float:left;
	width: 520px;
	padding: 15px;
	background:transparent;
	display: inline; /* IE6 Problem */
}

/* Contact form styling */

label
{
width: 150px;
float: left;
text-align: right;
margin-right: 10px;
display: inline; /* IE6 Problem */
clear:both;
font-size:14px;
font-weight:bold;
}

label.long {width:100%; text-align:left; margin-left:20px;}



#contact p {padding:5px;}

input {background:#eeeeee;
color:#000000;
font-size:13px;
padding:3px;
border:1px solid #590f04;
-moz-border-radius:3px; -webkit-border-radius:3px;}

select {background:#eeeeee;
color:#000000;
font-size:13px;
padding:3px;
border:1px solid #590f04;}

textarea {background:#eeeeee;
color:#000000;
font-size:13px;
border:1px solid #590f04;
padding:3px;
-moz-border-radius:3px; -webkit-border-radius:3px;}

input[type=submit] {background:#eeeeee;
color:#000000;
font-size:13px;
border:1px solid #590f04;
padding:5px;
-moz-border-radius:3px; -webkit-border-radius:3px;}


/* Handling of the footer div and its contents */
#footer {
	width:800px;
	margin: 25px auto auto auto;
	padding: 10px 10px 10px 10px;
	font-size: 9px;
	
	background-color: #590f04;
	color: #AE2F02;
	text-align:center;
}

#footer.a {color: #d0722a; text-decoration:none;}
#footer.a:hover {text-decoration:underline; }

/* twitter widget */

ul.twitter_update_list {list-style-type: none;}
ul.twitter_update_list li {font-size:14px;}