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

Main Style Sheet - Patrick Eley

Version:		1.2 (May 2008)

Last Edited: 	Ben Henshall

email: 			ben@tincan.co.uk

--------------------------------------------------------------------------------------*/

/* Color references 
	background grey - #E5E5DB
	text and dashed line - #9A9893
	link hover - yellow
	
*/

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

Global Settings

----------*/
 
* { /* set all padding and margin defaults to 0 */
	margin: 0;
	padding: 0;
}

img { /* remove image borders */
	border: 0;
}

ul, li { /* remove all list styling */
	list-style:none;
}
 
body{ 
	margin:0; 
	padding: 8px 12px 0 12px ; 
	background-color:#ddd;
	font: 62.5%/1.4 Georgia, serif; /* sets all font sizes to 10pt and line height to 14pt | 10pt = 1em */
	text-shadow: 0 0 0 #000; /* removes extra text shadow in Safari */
	color: #777;
}

hr {display: none;}

.clear {clear: both;}

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

Main Layout Structure

----------*/

#header{
	width:100%;
	border-bottom: 1px dashed #777;
	padding: 0 0 8px 0;
}
 
#maincol{  
	float: left; 
	width: 100%;
	font-size: 1.3em;
}

#header, #maincol, #footer {min-width: 960px;}

#level1 { /* Main Navigation */
	display: block;
	width: 100%;
	border-bottom: 1px dashed #777;
	float: left;
	height:2.6em;
}

#level1 .menu {
	display:block;
	margin-left: -2px;
	float: left;
	padding: 8px 0 0 0;
}

#level1 .menu .kwmenu, #level1 .menu .namedmenu {float: left;}

#level1 .menu li {
	float: left; 
	display: block;
}

#level1 .menu li:after { /* adds the '/' between list items - not supported in IE6/7 */
	content: "/";
}

#level1 .menu ul.namedmenu li:last-child, #level2 li:last-child {color: #E5E5DB;}/* hides the last 'content' li:after */

#level2 {
	display: block;
	width: 100%;
	padding: 0px 0 !important;
	margin: 0;
	float: left;
	background: #ddd url(../images/dashes_grey.gif) top left repeat-x;
	/*border-bottom: 1px dashed #777; !important*/
}

#level2 .menu {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	float: left;
	/*background: #E5E5DB url(../images/dashes_grey.gif) top left repeat-x;*/
}

#homepage #level2 {border-bottom: 0px; padding-top: 12px;}

/*#relatedlinks a {color: #000}*/
#levelsearch {
	display: block;
	width: 100%;
	padding: 8px 0;
	margin: 0;
	float: left;
	border-bottom: 1px dashed #777;
}

#level2 .block1 {
	display: block;
	float: left;
	/*width: 252px;*/
}

#level2 .block2{
	display: block;
	float: right;
	margin: 0.6em -10px 0 0 !important
}

.dashed {border-bottom: 1px dashed #777; !important; }
.dashed h1, .dashed .block2 {margin: 8px 0 !important; }

/* Project Boxes */

#level2 .project {
	position: relative;
	float: left; 
	width: auto;
	min-width: 99px;
	height: 203px;
	margin: 11px 0 2px 0;
	width: auto;
	padding: 0 12px 25px 0;
	border: 0
}

#level2 .image {
float: left;
/*height: 190px;*/
}


#level2 .project .title {
	position: absolute;
	bottom: 26px; 
	left: 0;
	display: block;
	width: auto;
	height: auto;
	line-height: 1.2em; /* needed for safari line height fix on rollover */
	font-style: italic;
}

#level2 .project .subtitle{
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
	top: 202px
}

/* */

#level3 { /* Content Page Subtitle */
	display: block;
	width: 100%;
	padding: 8px 0;
	float: left;
	border-bottom: 1px dashed #777;
}

#level3 .block1 {
	display: block;
	float: left;
	width: 500px;
	margin-right: 12px;
}

#level3 .block2{
	display: block;
	float: left;
	width: auto;
}

#level3 .block3{
	display: block;
	float: right;
	width: 250px;
}

#level3 .block3right {
	display: block;
	float: right;
}

#level4{ /* Content Page Main Content Area 
	margin-bottom: 8px; */
	display: block;
	width: 100%;
	padding: 12px 0 12px 0;
	float: left;
	border-bottom: 1px dashed #777;
}

#footer{ 
	font-size: 1.3em;
	float: left;
	display: block;
	width: 100%;
	margin: 0 0 8px 0 !important;
	padding: 8px 0
}

#homepage #footer {margin-top: -4px;}

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

Search

----------*/

#quicksearch {
	display: block;
	float: right;
	text-align: right;
	padding:5px 0 0 0;
}

#quicksearch input {
	border: 1px solid #eeeeee;
	background-color: #E5E5DB;
	width: 246px;
	padding: 0.2em;
	font-weight: normal;
	color: #777; /* needed for IE - doesn;t inherit global text styles? */
	text-align: left;
	font-size: 1em;
	font-family: Georgia, serif;
}

#quicksearch input:hover {
	border: 1px solid #f3f3e9;
	background-color: #f3f3e9;
}

#quicksearch input:active, 
#quicksearch input:focus {
	 border: 1px solid #969690;
	 background-color: #f3f3e9;
}

#search_box form {margin: 0; padding: 0}
#search_box fieldset {border: 0}
#search_box legend {display: none;}

p.float_left {display: block; width: 33px; float: left}
.webblerpaging {display: block; float: left}
.webblerpaging .pagingprevious, .webblerpaging .pagingnext {display: none}
.webblerpaging a {margin: 0 0.3em}
.webblerpaging a.current {font-weight: bold}

/*
.searchresults {margin: 0 0 12px 0; display: block; float: left; width: 100%;}

.resultsnumber {display: block; float: left; font-weight: bold; font-size: 1.3em;}

.resultstext {margin-left: 25px; display: block; font-size: 1.3em; line-height: 1.3em;}

.resultsurl a {font-weight: bold; color: #000000;}
*/

span.searchgroup {display: none;}


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

Typography

----------*/

/* styles also defined in 'global Settings' */

a {
	text-decoration: none;
	color: #777;
}

a:hover {
	background-color: yellow;
	color: #000 !important;
}

#header h1 {
	font-weight: bold;
	color: #000;
	font-size: 1.3em;
	font-style: italic;
}

#header h1 a{
	color: #000 !important;	
}
#level1 .menu li a {margin: 0 2px}

/*#level1 .menu li.this a {color: #000;}*/

#level1 .menu a {padding: 0 1px;}

#level2 h1 {
	font-size: 1em;
	font-weight: normal;
	color: #000;
	margin: 1em 0 0 0;
}

#level2 .block2 a {color: #000;}

/*#level2 .project a .title  {color: #000;}*/

#level2 .project a:hover .title  {background-color: yellow; color: #000}

#level2 .project a:hover {cursor: pointer;}

#level2  ul {margin-left: -2px;}

#level2 li {
	float: left;
}

#level2 li:after{ /* adds the '/' between list items - not supported in IE6/7 */
	content: "/";
}

#level2 li a {
margin:0pt 2px;
}
/*
#level2 li:first-child {color: #E5E5DB;} hides the last 'content' li:after */


#level3 p {line-height: 1.3em;}

#level3 .block2 li {line-height:1.3em;}

#level3 .block3 p.next{padding-bottom: 17px;} 

#level4{line-height: 1.3em;}

#level4 .image {padding: 0 0 12px 0}

#footer a:hover {background-color: yellow;}

#header h1 a{color: #777;}

.linklist  {margin: -4px 0 0 0; padding: 0}
.linklist li {margin-bottom: 8px;}

.project .kwmenu {font-size: 1em;}

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

Images / Media

----------*/

.image {
	 clear: both;
}

.imagelist img{
	 padding: 0 12px 12px 0;
}

.wrap img {
float: left;
}

.quicktime {padding-bottom: 12px;}
.attachments {margin: 10px 0 0 0}
/* =------------------------------------------------------------------------

Colour Changes

----------*/

/* Keyword White */

body.white{
	background-color:#fff;
	color: #777;
 }

.white #level1 .menu ul.namedmenu li:last-child {color: #fff;}/* hides the last 'content' li:after */
/*.white #level1 .menu li:last-child {color: #fff;} hides the last 'content' li:after */
.white #level2 li:last-child {color: #fff;}/* hides the last 'content' li:after */
.white #level2 ul.kwmenu li:last-child {color: #fff !important}

.white #header h1 a, .white #level2 .block1 h1 {color: #000 !important;}
.white #level2 .project a, .white #level2 .kwmenu a {color: #000 !important;}
.white .menu li.this a, .white #relatedlinks a {color: #777 !important;}
.white a:hover, .white #header h1 a:hover, .white .menu li.this a:hover, .white #level2 .project .title a:hover, .white #level2 .kwmenu a:hover, .white #relatedlinks a:hover {background: #FFFF00; color: #000 !important}

.white #level2 {
	display: block;
	width: 100%;
	padding: 8px 0;
	margin: 0;
	float: left;
	background: #fff url(../images/dashes_777.gif) top left repeat-x;
}

.white #level2 .menu {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	float: left;
}

.white #quicksearch input {
	border: 1px solid #eeeeee;
	background-color: #fff;
}

.white #level2 .subtitle a {color: #777 !important}
.white #level3 {border-bottom: 1px dashed #777 !important}

/*.white #level3 {
border: 0
}*/

/* Theme Black */

body.black{
	background-color:#000;
	color: #888;
 }

.black #header, .black #level1, .black #levelsearch, .black #level3, .black #level4, .black .dashed {
border-bottom: 1px dashed #888 !important;}

.black #level1 .menu ul.namedmenu li:last-child {color: #000 !important;}/* hides the last 'content' li:after */
.black .menu li.this, .black #header h1 {color: #888 !important;}
/*.black #level1 .menu li:last-child {color: #888;} hides the last 'content' li:after */
.black #level2 li:last-child {color: #888;}/* hides the last 'content' li:after */
.black #level2 ul.kwmenu li:last-child {color: #000 !important}

.black #header h1 a, .black #level2 .block1 h1 {color: #ccc !important;}
.black .menu li.this a, .black .menu li a {color: #888 !important;}
.black #level2 .project a, .black #level2 .kwmenu a {color: #ccc !important;}
.black a:hover, .black #header h1 a:hover, .black .menu li.this a:hover, .black #level2 .project .title a:hover, .black #level2 .kwmenu a:hover, .black #level1 a:hover {background: #FFFF00; color: #000 !important}
.black #relatedlinks a {color: #888}
.black #level2 {
	display: block;
	width: 100%;
	padding: 8px 0;
	margin: 0;
	float: left;
	background: #000 url(../images/dashes_888.gif) top left repeat-x;
}

.black #level2 .menu {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	float: left;
}

.black #level2 .subtitle a {color: #888 !important}
.black #level3 {border-bottom: 1px dashed #888 !important}

/*.black #level3 {
border: 0
}*/

/* Theme DarkGrey */

body.darkgrey{
	background-color:#333;
	color: #888;
 }

.darkgrey #header, .darkgrey #level1, .darkgrey #levelsearch, .darkgrey #level3, .darkgrey #level4, .darkgrey .dashed {
border-bottom: 1px dashed #888 !important;}

.darkgrey #level1 .menu ul.namedmenu li:last-child {color: #333 !important;}/* hides the last 'content' li:after */
.darkgrey .menu li.this, .darkgrey #header h1 {color: #888 !important;}
/*.darkgrey #level1 .menu li:last-child {color: #888;} hides the last 'content' li:after */
.darkgrey #level2 li:last-child {color: #888;}/* hides the last 'content' li:after */
.darkgrey #level2 ul.kwmenu li:last-child {color: #333 !important}

.darkgrey #header h1 a, .darkgrey #level2 .block1 h1 {color: #ccc !important;}
.darkgrey #level2 .project a, .darkgrey #level2 .kwmenu a {color: #ccc !important;}
.darkgrey #relatedlinks a {color: #888}
.darkgrey a:hover, .darkgrey #header h1 a:hover, .darkgrey .menu li.this a:hover, .darkgrey #level2 .project .title a:hover, .darkgrey #level2  .kwmenu a:hover {background: #FFFF00; color: #000 !important}

.darkgrey #level2 {
	display: block;
	width: 100%;
	padding: 8px 0;
	margin: 0;
	float: left;
	background: #333 url(../images/dashes_888.gif) top left repeat-x;
}

.darkgrey #level2 .menu {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	float: left;
}

.darkgrey #level2 .subtitle a {color: #888 !important}
.darkgrey #level3 {border-bottom: 1px dashed #888 !important}

/*.darkgrey #level3 {
border: 0
}*/