/*
-----------------------------------------------
SJ Display Group
Author:   Spark Design - Nick Davies
Version:  05 July 2005
----------------------------------------------- */

body {
  margin:0;
  padding:0;
  background-color: #00ABED; 
  font-family: Verdana,Sans-serif;
  font-size: 11px;
  line-height:1.5em;
  color:#444;

 }

 #bodywrapper {
	width: 768px;
	padding: 20px 0px 0 0px;
	margin: 0px auto;
	position: relative;

}
 
 .pagewrapper {
	padding: 0 8px;
	background: url(../images/pagewrapper_bg.gif) repeat-y;
	background-color: #ffffff;

}
 .mastheadwrapper {padding: 0 8px; background: url(../images/mastheadwrapper_bg.gif) }
 #masthead {height: 233px; background: url(../images/masthead.jpg)}
 #masthead_small {height: 122px; background: url(../images/masthead_small.jpg)}
  
/* =Nav
----------------------------------------------- */
#nav {
	height: 24px; 
	text-align: left; 
	width: 100%;
	background-color: #3FA6CC; 
}

#nav ul {
  margin:0;
  padding:0;
  list-style:none;
  width: 752px;
  background-color: #3FA6CC; 
  }
#nav li {
  background: url(../images/menu_divider.gif) repeat-y right top;
  background-color: #3FA6CC; 
  float:left;
  margin:0;
  padding:0;
  line-height:normal;
  text-indent:0;
  }
#nav a, #nav strong {
  display:block;
  padding:5px 21px 6px;
  color:#E7E8F9;
  text-decoration:none;
  white-space:nowrap;
  border: none;
  }
/* Following rule allows entire region of link to to be 
   clickable in IE/Win. Holly Hack explained here:
   http://www.positioniseverything.net/explorer/escape-floats.html */
* html #nav a {
  width:1%;
  }
#nav a:hover, #nav #current a:hover strong, #nav #current strong {
  color:#E7E8F9;
  background: url(../images/menu_divider.gif) repeat-y right top;
  background-color: #0099FF;
  }
  
/* =layout
----------------------------------------------- */  
  
#main {
	float: left;
	margin: 0;
	width: 506px;
	height: 100%;
	background: url(../images/body_divider.gif) repeat-y top right;
	background-color: #fff;
}

* html #main  {
  	width: 466px;
  	height: 100%;
}
  
.main_story {
	text-align: left;
	margin: 0;
	width: 466px;
	vertical-align: top;
	padding: 20px;
}

/* 
#main_story p {
	font-size: 12px;
}
*/



.sub_story {
	text-align: left;
	margin: 0;
	width: 466px;
	background: url(../images/sub_divider.gif) repeat-x top left;
	padding: 20px;
}

.sub_story h1 {
	color: #EB9300;
}

#side {
	float: right;
	position: relative;
	margin: 0;
	height: 100%;
	background-color: #CCFFFF;
}

.right {
	text-align: left;
	vertical-align: top;
	margin: 0;
	width: 206px;
	background: url(../images/right_divider.gif) repeat-x left top;
	background-color: #CCFFFF;
	padding: 20px;
	position: relative;
}

.right h1 {
	color: #3399FF;
	padding: 0;
	margin: 0;
}

.right p {
	color: #777;
}

#footer {
	width: 768px;
	background: url(../images/footer.gif) no-repeat top left;
	color: #FFFFCC;
	padding: 20px;
	float: left;
	position: relative;
	margin: 0px;
}

#footer a, #footer a:hover {
	color: #FFFFFF;
	text-decoration:none;
	border: none;
}

#left {
	float: left;
	margin: 0;
	width: 246px;
	height: 100%;
	background: url(../images/body_divider.gif) repeat-y top right;
	background-color: #fff;
}

.left_story {
	text-align: left;
	margin: 0;
	width: 204px;
	vertical-align: top;
	padding: 20px;
}

#centre {
	margin: 0;
	float: left;
	width: 260px;
	height: 100%;
	background: url(../images/body_divider.gif) repeat-y top right;
	background-color: #fff;
}

.centre_story {
	text-align: left;
	margin: 0;
	width: 220px;
	vertical-align: top;
	padding: 20px;
}
  
/* =General
----------------------------------------------- */

h1 {
	font-family: "Trebuchet MS", Tahoma, Verdana, Arial;
	color: #EB9300;
	font-size: 18px;
	font-weight: normal;
	padding: 0;
	margin: 0;
}

p {
	margin-top: 8px;
}

img {
	margin-top: 8px; 
}

a {
	text-decoration:none;
	border-bottom:1px dotted #469;
}

a:hover {
	border-bottom:1px solid #469;
}

#noborder{
	border-bottom: none;
}


/* =Portfolio stuff
----------------------------------------------- */
.portfolio {
	width: 100%;
	padding: 1px 0px 5px 0px;
}

.portfolio img {
	border: none;
	float: left; 
	padding-right: 5px;
 }
 
.portfolio strong, .right strong {
	color:#2F7CC0;
 } 
 
.portfolio a, .portfolio a:hover {
	text-decoration: none;
	display:block;
	border: none;
	line-height: 14px;
   color:#444;
	
 }

/* -- Clear Fix -- */
.clearfix:after {
 content:".";
 display:block;
 height:0;
 clear:both;
 visibility:hidden;
 }
 .clearfix {display:inline-block;}
 /* Hide from IE Mac \*/
 .clearfix {display:block;}
 /* End hide from IE Mac */