/**
*	Page centering, background
**/

body { 
	background-image: url('../gui-images/background.jpg'); 
	background-position:center 65px; 
	padding:10px 0 0 0; 
	text-align:center; 
	font: normal 12px verdana,arial,helvetica;
}
#container { 
	width:960px; margin:0 auto; 
}


/**
*	Site nav gfx & styles
***/

#menu {
	float:left;
	clear:left;
	width:980px;
	height:40px;
	padding:0 0 0 10px;	
	margin:0 0 -7px 0;
	position:relative;
	z-index:0;
}

#menu ul {
	text-indent:0;
	margin:0;
	padding:0;
	list-style-type:none;
	height:40px;
	position:relative;
	left:5px;
}

#menu ul li { float:left; }

#menu ul li a {
	padding-top:40px;
	overflow:hidden;
	display:block;
	height:0px !important;
	height /**/:40px;
	background-repeat:no-repeat;
}
#menu>ul>li>a { background-image:url('../gui-images/menu.png'); }
#menu ul li.home a { width:114px; background-position:0 0; }
#menu ul li.home a:hover { background-position:0 -40px; }
#menu ul li.about a { width:121px; background-position:-114px 0; }
#menu ul li.about a:hover { background-position:-114px -40px; }
#menu ul li.services a { background-position:-235px 0; width:148px; }
#menu ul li.services a:hover { background-position:-235px -40px; }
#menu ul li.portfolio a { background-position:-383px 0; width:161px; }
#menu ul li.portfolio a:hover { background-position:-383px -40px; }
#menu ul li.casestudies a { width:190px; background-position:-544px 0; }
#menu ul li.casestudies a:hover { background-position:-544px -40px; }
#menu ul li.testimonials a { width:194px; background-position:-734px 0; }
#menu ul li.testimonials a:hover { background-position:-734px -40px; }


/**
*	Pinboard links
***/
#services ul { margin:0; text-indent:0; padding:0; }
#services ul li { display:inline; float:left; }
#services ul li a { padding-top:163px; overflow:hidden; display:block; height:0px !important; width:145px; height /**/:163px; }
#services ul li.webdesign { margin-left:10px;   }
#services ul li.webdev a { width:158px; }
#services ul li.printdesign a { width:150px; }
#services ul li.other a { width:135px; }


/**
*	Frame specific styles
***/

#services { width:610px; height:167px; }
#services .top, #services .bottom { width:565px; }
#services .left, #services .right { height:122px; }
#services .content { background-image:url('../gui-images/pinboard.jpg'); }

#header { height:167px; width: 935px; }
#header .top, 
#header .bottom { width: 890px; }
#header .left, 
#header .right { height: 122px; }
#header .content { background-image:url('../gui-images/landscape.jpg'); background-position:0 1px;}
#header .content * { display:none; }

#aboutus { float:right; width:296px; height:300px; font-size:10px; z-index:10; }
#aboutus .top, 
#aboutus .bottom { width:251px; }
#aboutus .left, 
#aboutus .right { height: 255px; }
#aboutus .content p { margin:10px 10px 0 10px; font-family:Verdana, Helvetica, sans-serif; }
#aboutus .content img { position:relative; top:10px; left:2px; }

#servicedetails { width:610px; height:106px; }
#servicedetails .top, #servicedetails .bottom { width:565px; }
#servicedetails .left, #servicedetails .right { height:61px; }
#servicedetails .content { font-family:Verdana, Helvetica, sans-serif; font-size:10px; }
#servicedetails .content div { float:left; margin-left:12px;}
#servicedetails ul { margin:0; list-style-type:none; padding:0;}
#servicedetails h3 { margin:10px 0 0 0; font-size:12px;}

#footer { width:935px; height:45px; z-index:15;}
#footer .top, 
#footer .bottom { width:890px; }
#footer .left, 
#footer .right { height: 0px; }
#footer .content span { display:block; padding-top:17px; text-align:center; font-family:Verdana, Helvetica, sans-serif; font-size:14px; }
	

#example { 
	width:294px; 				/* width = desired width - 45px */
	height:200px; }				/* minimum height= ~ 45px	*/
#example .top, 
#example .bottom { width:249px; }		/*  = container width - 45px	*/
#example .left, 
#example .right { height: 155px; }		/*  = container height - 45px	*/

/**
*	Frame generic settings
***/

.framedpanel {  
	position:relative; 
	float:left; 
	margin:14px 14px 13px 13px; 
	z-index:1;
}
.green .content { 
	background-color:#62c79f; 
}
.white .content { 
	background-color:#ffffff; 
}
.balsa .content { 
	background-image:url('../gui-images/balsa-backing.gif'); 
	background-repeat:repeat;
}
.cork .content { 
	background-image:url('../gui-images/cork-backing.gif'); 
	background-repeat:repeat;
}
.framedpanel .content { 
	width:100%; height:100%; 
	text-align:left; 
	position:relative; 
	float:left;
}


/**
*	Frame element positioning
*	Width and height specifications must be done on an individual frame basis
***/

.framedpanel .topleft, .framedpanel .top, .framedpanel .topright, .framedpanel .left, .framedpanel .right, .framedpanel .bottomleft, .framedpanel .bottom, .framedpanel .bottomright { position:absolute; }
.framedpanel .topleft { width:36px; height:36px; left:-14px; top:-13px; background-position:0 0;}
.framedpanel .top { height:23px; top:-13px; left:22px; background-repeat:repeat-x;}
.framedpanel .topright { width:43px; height:36px; right:-20px; top:-13px; background-position:-36px 0; }
.framedpanel .left { width:22px; top:23px; left:-14px; background-repeat:repeat-y; }
.framedpanel .right { width:22px; top:23px; right:-21px; background-repeat:repeat-y; }
.framedpanel .bottomleft { width:36px; height:44px; bottom:-22px; left:-14px; background-position:0 -36px; }
.framedpanel .bottom { height:23px; left:22px; bottom:-22px; background-repeat:repeat-x; }
.framedpanel .bottomright { width:43px; height:44px; right:-20px; bottom:-22px;  background-position:-36px -36px;}


/**
*	Frame image sources - pixel perfect, hand constructed containers
*	for browsers that support .png background images with alpha transparency
***/

.framedpanel .topleft		{ background-image:url('../gui-images/frame-corners.png'); 	}
.framedpanel .top		{ background-image:url('../gui-images/frame-horiz.png'); 	}
.framedpanel .topright	{ background-image:url('../gui-images/frame-corners.png'); 	}
.framedpanel .left		{ background-image:url('../gui-images/frame-vert.png'); 	}
.framedpanel .right		{ background-image:url('../gui-images/frame-vert.png'); 	}
.framedpanel .bottomleft	{ background-image:url('../gui-images/frame-corners.png'); 	}
.framedpanel .bottom		{ background-image:url('../gui-images/frame-horiz.png'); 	}
.framedpanel .bottomright	{ background-image:url('../gui-images/frame-corners.png');	}


/**
*	Graphic sources & details for height variable frames
***/

.framedpanel  { width:100%; margin:1px 0 -9px 0; clear:left; float:left; position:relative; }
.framedpanel  .top, 
.framedpanel  .bottom, 
.framedpanel .middle { background-repeat:no-repeat; float:left; clear:left; margin:0; padding:0; }
.framedpanel .middle { background-repeat:repeat-y;  }
.framedpanel  .middle .content { margin:0; }

#fullwidthwhitepanel  .top, #fullwidthwhitepanel  .bottom, #fullwidthwhitepanel .middle { width:967px; }
#fullwidthwhitepanel .top { background-image:url('../gui-images/bigframes/fullwidthwhitepanel-top.png'); height:36px; }
#fullwidthwhitepanel .bottom { background-image:url('../gui-images/bigframes/fullwidthwhitepanel-bottom.png'); height:44px; }
#fullwidthwhitepanel .middle { background-image:url('../gui-images/bigframes/fullwidthwhitepanel-middle.png'); }

/* To be deleted from metal style2.css - START */
#sixfourtywidthwhitepanel,
#sixfourtywidthwhitepanel .top, 
#sixfourtywidthwhitepanel .bottom, 
#sixfourtywidthwhitepanel .middle { width:640px; margin-right:-7px;}
#sixfourtywidthwhitepanel .top { background-image:url('../gui-images/bigframes/640widthwhitepanel-top.png'); height:36px; }
#sixfourtywidthwhitepanel .bottom { background-image:url('../gui-images/bigframes/640widthwhitepanel-bottom.png'); height:44px; }
#sixfourtywidthwhitepanel .middle { background-image:url('../gui-images/bigframes/640widthwhitepanel-middle.png');  }

#threethirtywidthgreenpanel { width: 327px; }
#threethirtywidthgreenpanel .top,
#threethirtywidthgreenpanel .bottom,
#threethirtywidthgreenpanel .middle { width: 334px; }
#threethirtywidthgreenpanel { clear:none; }
#threethirtywidthgreenpanel .top { background-image:url('../gui-images/bigframes/330widthgreenpanel-top.png'); height:36px; }
#threethirtywidthgreenpanel .bottom { background-image:url('../gui-images/bigframes/330widthgreenpanel-bottom.png'); height:44px; }
#threethirtywidthgreenpanel .middle { background-image:url('../gui-images/bigframes/330widthgreenpanel-middle.png');  }
/* To be deleted from metal style2.css - START */


/**
*	Generic site styles
***/

div.framedpanel p a, div.framedpanel li a {
	color:#5E8F7F;
	text-decoration:none;
}
div.framedpanel p a:hover, div.framedpanel li a:hover {
	text-decoration:underline;
}


/**
*	Styles for generic page layout
***/

div#fullwidthwhitepanel .content, div#sixfourtywidthwhitepanel .content {
	padding:0px 30px;
}
div#fullwidthwhitepanel .content {
	text-align: left;
}
div#fullwidthwhitepanel .content q {
	text-align: left;
}


/**
*	Styles for large image page layout
***/

body.largeimage {
	margin:0;
	padding:0;
}
.largeimage div#container {
	margin:0;
}
.largeimage img {
	margin:0;
	border: solid 1px #d6d6d6;
}


/**
*	Portfolio home page column text layout 
***/

.portfolioHome div#polaroidText {
	width:100%;
}
.portfolioHome .portfolio #polaroidText ul {
	width:100%;
	list-style-type:none;
	margin-left:0;
	padding-left:40px;
}
.portfolioHome .portfolio #polaroidText ul ul {
	list-style-type: circle;
}
.portfolioHome .portfolio #polaroidText .textcols {
	float:left;
}
.portfolioHome .portfolio #polaroidText ul.textcolumn {
	padding-left:16px;
}
.portfolioHome .portfolio #polaroidText h4 {
	margin-bottom:3px;
	color:#000;
	text-decoration:none;
}
.portfolioHome .portfolio h4 {
	display:none;
}


/**
*	Portfolio polaroids image layout 
***/

.portfolio .polaroids  {
	text-align: center;
}
.portfolio .polaroids img {
	margin: 0 10px;
	border:0;
}


/**
*	Portfolio screenshots
***/

div.screenshotsection {
	margin-top:20px;
}
div.screenshot {
	float:left;
	width:500px;
	margin-bottom:20px;
}
div.screenshot img {
	margin-right:20px;
}
div.notes {
	float:left;
	width:363px;
	margin-left:20px;
}
h5 {
	font-size:14px;
	margin: 0 0 6px;
}



/**
*	Case study polaroid white page image and column text layout 
***/

#caseStudies #polaroidText ul {
	list-style-type:none;
}
#caseStudies #polaroidText ul ul {
	list-style-type: circle;
}
#caseStudies #polaroidText .textcols {
	float:left;
}
#caseStudies #polaroidText ul.textcolumn {
	padding-left:20px;
}
#caseStudies #polaroidText h4 {
	margin-bottom:3px;
	color:#000;
	text-decoration:none;
}
#caseStudies .polaroids {
	text-align: center;
}
#caseStudies .polaroids img {
	margin: 0 10px;
	border:0;
}


/**
*	Style for testimonial page
***/

div.testimonials {
	float:left; 
	clear:left; 
	vertical-align:middle;
	padding-top:10px;
	width:900px;
}
div.testimonials img {
	margin:-10px 0 10px 30px;
}
div.testimonials h3 {
	text-align:left;
}


/**
*	Styles for Services page
***/

.services ul {
	list-style-type: circle;
	padding-left:20px;
}
.services h3 {
	margin:0 0 6px 0;
}
.services h4 {
	margin:0 0 4px 0;
}
.services p {
	margin:0 0 10px 0;
}
.services div.webdesign {
	width:450px;
	margin-top:10px;
	float:left;
	
}
.services div.webdev {
	width:450px;
	margin-top:10px;
	float:right;
	display:inline;
}
.services div.print {
	width:450px;
	margin-top:10px;
	float:left;
	clear:both;
}
.services div.other {
	width:450px;
	margin-top:10px;
	float:right;
}
.services img {
	margin:0 10px;
}


/**
*	Page headers
***/

#about h3, #caseStudies h3, .portfolio h3, .services h3, #testimonials h3 {
	background-repeat:no-repeat;
	margin-top:0px;
	height:30px;
	width:295px;
}
#about h3 {
	background-image:url('../gui-images/header-about.jpg');
}
#caseStudies h3 {
	background-image:url('../gui-images/header-case-studies.jpg');
}
.portfolio h3 {
	background-image:url('../gui-images/header-portfolio.jpg');
}
.services h3 {
	background-image:url('../gui-images/header-services.jpg');
}
#testimonials h3 {
	background-image:url('../gui-images/header-testimonials.jpg');
}
.christmas-card h3 {
	background-image:url('../gui-images/header-christmas.jpg');
}
#about h3 span, #caseStudies h3 span, .portfolio h3 span, .services h3 span, #testimonials h3 span {
	display:none;
}


/**
*	Page SubHeader
***/

.services h4, .testimonials h4, .portfolio h4 {
	background-repeat:no-repeat;
	margin-top:0px;
	height:30px;
	width:400px;
}
.webdesign h4 {
	background-image:url('../gui-images/subheader-web-design.jpg');
}
.webdev h4 {
	background-image:url('../gui-images/subheader-web-dev.jpg');
}
.print h4 {
	background-image:url('../gui-images/subheader-print.jpg');
}
.other h4 {
	background-image:url('../gui-images/subheader-other.jpg');
}
.harveyJones h4 {
	background-image:url('../gui-images/subheader-harvey-jones.jpg');
}
.hobbsexperience h4 {
	background-image:url('../gui-images/subheader-hobbs-experience.jpg');
}
.hobbsfood h4 {
	background-image:url('../gui-images/subheader-hobbs-food.jpg');
}
.cornwall h4 {
	background-image:url('../gui-images/subheader-cornwall-holiday-let.jpg');
}
.email h4 {
	background-image:url('../gui-images/subheader-email.jpg');
}
.guiemail h4 {
	background-image:url('../gui-images/subheader-gui-email.jpg');
}
.webstandards h4 {
	background-image:url('../gui-images/subheader-web-standards.jpg');
}
.contentmanagement h4 {
	background-image:url('../gui-images/subheader-content-management.jpg');
}
.webmarketing h4 {
	background-image:url('../gui-images/subheader-web-marketing.jpg');
}
.seo h4 {
	background-image:url('../gui-images/subheader-seo.jpg');
}
.jeremybaines h4 {
	background-image:url('../gui-images/subheade-jeremy-baines.jpg');
}
.quickmode h4 {
	background-image:url('../gui-images/subheader-quickmode.jpg');
}
.nokia h4 {
	background-image:url('../gui-images/subheader-nokia.jpg');
}
.jojones h4 {
	background-image:url('../gui-images/subheader-jo-jones.jpg');
}
.rockpool h4 {
	background-image:url('../gui-images/subheader-rockpool.jpg');
}
.christmas-card h4 {
	background-image:url('../gui-images/subheader-christmas-card.jpg');
}
.portfolio h4 span, .services h4 span, .testimonials h4 span {
	display:none;
}



/**
*	List bullets
***/

.bullet, ul.textcolumn li, .portfolio li li, div.services .webdesign li, div.services .webdev li, div.services .print li, div.services .other li {
	list-style-image: url('../gui-images/bullet.jpg');
	list-style-type: none;
	margin-left:4px;
}