/***
*   General HTML styles
***/

body {
	background-image:url('../gui-images/background-image-repeat.jpg');
	background-position:top center;
	background-repeat:repeat-x;
	background-color:#000000;
	padding:20px;
}
h1 {
background-image:url(../gui-images/gui-logo.png);
background-repeat:no-repeat;
display:block;
float:left;
top:50px;
height:63px;
width:185px;
margin:104px 0 0 14px;
}
h1 span {
display:none;
}
h2 {
background-image:url(../gui-images/strapline.png);
background-repeat:no-repeat;
display:block;
float:left;
top:100px;
left:450px;
height:42px;
width:263px;
position:relative;
}
h2 span {
display:none;
}
img {
border:0;
}
/***
*  General CSS style
***/

#container {
margin:0 auto;
width:935px;
}


/***
*   General frame styles
***/

.framedpanel {
background-image:url(../gui-images/background-metal.jpg);
background-repeat:repeat;
float:left;
margin:7px 0;
position:relative;
z-index:1;
}
.topleft {
background-position:0 0;
}
.framedpanel .topleft,
.framedpanel .top,
.framedpanel .topright {
top:-7px;
}
.framedpanel .topleft,
.framedpanel .topright {
height:11px;
}
.framedpanel .topleft,
.framedpanel .left,
.framedpanel .bottomleft {
left:-19px;
}
.framedpanel .topleft,
.framedpanel .topright,
.framedpanel .bottomleft,
.framedpanel .bottomright {
//background-image:url(../images/frame-vert-shadow.png);
width:23px;
}
#aboutus .lefttop {
	width:19px;
}
.lefttop {
float:right;
background-position:right bottom;
height:100%;
width:23px;
}
.framedpanel .top {
height:11px;
background-position:bottom;
}
.framedpanel .top, .framedpanel .bottom {
left:4px;
}
.framedpanel .top,
.framedpanel .bottom {
background-image:url(../gui-images/frame-horiz-metal-2.png) !important;
}
.framedpanel .topright {
background-position:right top;
}
.righttop {
float:left;
background-position:left bottom;
height:100%;
width:23px;
}

.framedpanel .topright,
.framedpanel .right,
.framedpanel .bottomright {
right:-19px;
}
.framedpanel .left, 
.framedpanel .right {
top:4px;
}
.framedpanel .left,
.framedpanel .right,
.framedpanel .middle .left {
background-image:url(../gui-images/frame-vert-metal-2.png);
}
.framedpanel .bottomleft,
.framedpanel .bottom,
.framedpanel .bottomright {
height:12px;
}
.framedpanel .bottomleft {
background-position:left bottom;
}
#aboutus .leftbottom {
	width:19px !important;
}
.leftbottom {
float:right;
background-position: top right;
width:23px !important;
height:12px !important;
}
.right {
background-position:right;
}
.framedpanel .bottomleft,
.framedpanel .bottom,
.framedpanel .bottomright {
bottom:-8px;
}
.framedpanel .bottomright {
background-position:right bottom;
}
.rightbottom {
float:left;
background-position: top left;
width:23px !important;
height:12px !important;
}
.framedpanel .content {
background-position:0px 0px !important;
}
.joint {
background-image:url('../gui-images/frame-joint-2.png');
}
.topleft .joint,
.bottomleft .joint {
background-image:url('../gui-images/frame-joint-left.png');
}
.topright .joint,
.bottomright .joint {
background-image:url('../gui-images/frame-joint-right.png');
}
.green .content {
background-image:url(../gui-images/background-metal.jpg);
background-repeat:repeat;
}

/***
*   Home page
***/

/* Header panel styles */

#header {
height:165px;
}
#header .content {
background-image:url(../gui-images/landscape-image.jpg);
}
#header .topleft,
#header .top,
#header .topright {
top:-18px !important;
}
#header .topleft, #header .topright, #header .bottomleft, #header .bottomleft {
background-image:url(../gui-images/frame-corners-metal-2.png);
}
#header .topleft, #header .topright {
height:23px;
}
#header .top {
height:23px;
}
#header .left, #header .right {
height:157px;
}
#header .bottomleft, #header .bottomright {
background-image:url(../gui-images/frame-vert-metal-2.png);
}
#header .top, #header .bottom {
width:927px;
}
#header .bottom {
background-position:top;
}
#header .content {
background-repeat:no-repeat;
}

/* Menusection panel */

#menusection {
margin:0;
}
#menusection .left, #menusection .right {
height:30px;
top:1px;
}

/* Menu panel */

div#menu {
display:block;
position:relative;
float:left;
width:935px;
height:31px;
background-image:url(../gui-images/background-metal-dark.jpg);
background-repeat:repeat;
z-index:20;
}
#menu ul {
height:31px;
width:940px;
list-style-type:none;
padding:0;
margin:0 3px;
}
#menu ul li {
float:left;
}
#menu ul li a {
background-repeat:no-repeat;
display:block;
overflow:hidden;
padding:0;
width:184px;
height:31px;
background-image:url('../gui-images/buttons.jpg');
background-position:inherit 0;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:1px;
color:#ffffff;
}
span.opacity {
display:none;
}
#menu ul li.home a {
background-position:-0 0;
}
#menu ul li.about a {
background-position:-184px 0;
}
#menu ul li.services a {
background-position:-368px 0;
}
#menu ul li.portfolio a {
background-position:-552px 0;
}
#menu ul li.testimonials a {
background-position:-736px  0;
width:192px;
}
#menu ul li.home a:hover {
background-position:0 -31px;
}
#menu ul li.about a:hover {
background-position:-184px -31px;
}
#menu ul li.services a:hover {
background-position:-368px -31px;
}
#menu ul li.portfolio a:hover {
background-position:-552px -31px;
}
#menu ul li.testimonials a:hover {
background-position:-736px  -31px;
width:192px;
}

/* Services panel */

#services {
height:167px;
}
#services .content {
background-image:url(../gui-images/background-metal-dark.jpg);
}
#services, #servicedetails  {
width:624px;
}
#services .top, #services .bottom, #servicedetails .top, #servicedetails .bottom {
width:616px;
}
#services .left, #services .right {
height:159px;
}

/* Services buttons */

.portfolio-buttons ul {
list-style-type:none;
}
.portfolio-buttons ul ul {
margin:20px auto 0;
}
.portfolio-buttons ul li {
float:left;
margin-bottom:20px;
width:190px;
}
.portfolio-buttons ul li ul li {
float:none;
margin-bottom:4px;
}
.portfolio-buttons ul li a {
background-image:url(../gui-images/polaroid-template.png);
display:block;
height:160px;
overflow:hidden;
text-align:center;
width:161px;
}
.webdesign .portfolio-buttons ul li {
	height:170px;
}

#home .portfolio-buttons ul li a {
background-image:url(../gui-images/polaroid-template-home.png);
}
.portfolio-buttons ul li img {
border:0;
height:112px;
//margin:13px 0 0 2px;
margin:13px 0 0 1px;
width:138px;
}
.portfolio-buttons ul li p {
    background-position: center center;
    background-repeat: no-repeat;
    height: 28px;
    margin: -2px 0 0 6px;
    padding: 0;
    width: 150px;
}
.portfolio-buttons ul li span {
display:none;
}
.portfolio-buttons ul li.webdesign a {
margin-top:-6px;
margin-bottom:6px;
}
.portfolio-buttons ul li.marketing a {
margin-top:-3px;
margin-bottom:3px;
}
.portfolio-buttons ul li.printdesign a {
margin-top:-4px;
margin-bottom:4px;
}
.portfolio-buttons ul li.other-services a {
margin-top:-3px;
margin-bottom:3px;
}

.portfolio-buttons ul li.bol p {
background-image:url(../gui-images/handwriting-bol.png);
}
.portfolio-buttons ul li.choke p {
background-image:url(../gui-images/handwriting-choke.png);
}
.portfolio-buttons ul li.harvey-jones p {
background-image:url(../gui-images/handwriting-harvey-jones.png);
}
.portfolio-buttons ul li.jeremy-baines p {
background-image:url(../gui-images/handwriting-jeremy-baines.png);
}
.portfolio-buttons ul li.jo-jones p {
background-image:url(../gui-images/handwriting-jo-jones.png);
}
.portfolio-buttons ul li.marketing p {
background-image:url(../gui-images/handwriting-other-services.png);
}
.portfolio-buttons ul li.nokia p {
background-image:url(../gui-images/handwriting-nokia.png);
}
.portfolio-buttons ul li.other-services p {
background-image:url(../gui-images/handwriting-other-services.png);
}
.portfolio-buttons ul li.printdesign p {
background-image:url(../gui-images/handwriting-design-for-print.png);
}
.portfolio-buttons ul li.quickmode p {
background-image:url(../gui-images/handwriting-quickmode.png);
}
.portfolio-buttons ul li.rockpool p {
background-image:url(../gui-images/handwriting-rockpool.png);
}
.portfolio-buttons ul li.cornwall-holiday-lets p {
background-image:url(../images/handwriting-cornwall-holiday-lets.png);
}
.portfolio-buttons ul li.viewpoint p {
background-image:url(../gui-images/handwriting-viewpoint.png);
}
.portfolio-buttons ul li.webdesign p {
background-image:url(../gui-images/handwriting-web-design.png);
}
.portfolio-buttons ul li.hgv p {
background-image:url(../gui-images/handwriting-hgv.png);
}
.portfolio-buttons ul li.lo p {
background-image:url(../gui-images/handwriting-lo.png);
}
.portfolio-buttons ul li.fpc p {
background-image:url(../gui-images/handwriting-fpc.png);
}
.portfolio-buttons ul li.wc p {
background-image:url(../gui-images/handwriting-wc.png);
}
.portfolio-buttons ul li.chb p {
background-image:url(../gui-images/handwriting-chb.png);
}
.portfolio-buttons ul li.base p {
background-image:url(../gui-images/handwriting-base.png);
}
.portfolio-buttons ul li.yb p {
background-image:url(../gui-images/handwriting-yb.png);
}
.portfolio-buttons ul li.fs p {
background-image:url(../gui-images/handwriting-fs.png);
}
.portfolio-buttons ul li.bo p {
background-image:url(../gui-images/handwriting-bo.png);
}
.portfolio-buttons ul li.bh p {
background-image:url(../gui-images/handwriting-bh.png);
}
.portfolio-buttons ul li.bcc p {
background-image:url(../gui-images/handwriting-bcc.png);
}
.portfolio-buttons ul li.jas p {
background-image:url(../gui-images/handwriting-jas.png);
}


/**
*  Portfolio other
**/

.portfolioOther .content ul li.marek p {
background-image:url(../gui-images/handwriting-marek.png);
}
.portfolioOther .content ul li.viewpoint p {
background-image:url(../gui-images/handwriting-web-design.png);
}
.portfolioOther .content ul li.gui-email p {
background-image:url(../gui-images/handwriting-gui-email.png);
}

/* Servicedetails panel */

#servicedetails h3 {
background-repeat:no-repeat;
margin-top:10px;
height:auto;
width:auto;
}
#servicedetails h3 {
display:block;
}
#servicedetails h4 {
background-repeat:no-repeat;
margin-top:10px;
height:auto;
width:auto;
}
#servicedetails h4 span {
display:block;
}
#servicedetails .left, #servicedetails .right {
height:108px;
}

/* Aboutus panel */

#aboutus {
height:296px;
}
#aboutus .content img {
width:100%;
}
#aboutus .top, #aboutus .bottom {
width:288px;
}
#aboutus .left, #aboutus .right {
height:288px;
}
#aboutus .topleft, #aboutus .left, #aboutus .bottomleft {
background-position:right center;
margin-left:4px;
width:19px;
}

/* Footer panel */

#footer {
height:45px;
width:935px;
z-index:15;
}
#footer .top, #footer .bottom {
width:927px;
}
#footer .left, #footer .right {
height:26px;
}
#footer .bottomleft, #footer .bottomright, #footer .bottomleft, #footer .bottomleft {
	background-image:url(../gui-images/frame-corners-metal-2.png);
}
#footer .bottomleft, #footer .bottom, #footer .bottomright {
	height:23px;
}
#footer .content span {
display:block;
font-family:Verdana,Helvetica,sans-serif;
font-size:14px;
padding-top:9px;
text-align:center;
}
#footer .leftbottom, #footer .rightbottom {
background-image:none;
}

/* Full width white panel */

div#fullwidthwhitepanel.framedpanel {
background-color:#ffffff;
background-image:none !important; 
}
#fullwidthwhitepanel  .top, 
#fullwidthwhitepanel .bottom { 
width:100%; 
}
#fullwidthwhitepanel .middle { 
background-image:none; 
padding:16px;
width:903px;
}
div#fullwidthwhitepanel .content {
padding:0;
}
.left, .right {
height:100%;
}
.framedpanel .top, 
.framedpanel .bottom, 
.framedpanel .middle { 
float:left; 
clear:left; 
margin:0;
padding:0;
}

/* Site Reflection Image */

div#site-reflect {
background-image:url(../gui-images/site-reflect.png);
background-repeat:no-repeat;
float:left;
height:78px;
margin-bottom:40px;
margin-left:-15px;
margin-top:20px;
padding:39px;
width:965px;
}

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

.portfolioHome div#polaroidText {
width:100%;
}
.portfolioHome .portfolioHome .portfolio #polaroidText ul.textcolumn {
padding-left:16px;
}
.portfolioHome .portfolio #polaroidText ul li {
text-align:left;
}
.portfolioHome .portfolio #polaroidText .textcols {
float:left;
}
.portfolioHome #polaroidText ul {
margin: 0 auto;
width:660px;
}
.portfolioHome #polaroidText ul ul {
width:auto;
}
.portfolio li.textcols {
width:220px;
}

/**
*	List bullets
***/

li, ul.textcolumn li {
	list-style-image:url('../gui-images/bullet.gif');
	list-style-type:none;
	margin-left:4px;
}
#menu li, .portfolio-buttons li {
list-style-image:none;
margin-left:0;
}

/**
*   Standalone image */
**/

div.standalone-image {
}
div.standalone-image {
float:right;
margin:0 20px 50px 10px;
width:160px;
}
div.standalone-image a {
background-image:url(../gui-images/polaroid-template.png);
display:block;
height:160px;
margin-top:10px;
overflow:hidden;
text-align:center;
width:157px;
}
div.standalone-image img {
border:0;
height:111px;
margin:13px 0 0 5px;
width:138px;
}
div.standalone-image p {
background-repeat:no-repeat;
background-position:center;
height:26px;
margin:0;
padding:0;
width:157px;
}
div.standalone-image span {
display:none;
}
div.webdesign div.standalone-image p {
background-image:url(../gui-images/handwriting-web-design.gif);
}
div.webdev div.standalone-image p {
background-image:url(../gui-images/handwriting-web-development.gif);
}
div.print div.standalone-image p {
background-image:url(../gui-images/handwriting-design-for-print.gif);
}
div.other div.standalone-image p {
background-image:url(../gui-images/handwriting-other-services.gif);
}
div.jeremybaines div.standalone-image p {
background-image:url(../gui-images/handwriting-jeremy-baines.gif);
}
div.harveyJones div.standalone-image p {
background-image:url(../gui-images/handwriting-harvey-jones.gif);
}
div.cornwall div.standalone-image p {
background-image:url(../gui-images/handwriting-cornwall-holiday-lets.gif);
}
div#about div.standalone-image p {
background-image:url(../gui-images/handwriting-bol.gif);
}
.hgv div.standalone-image p {
background-image:url(../images/handwriting-hgv.gif);
}
.lo div.standalone-image p {
background-image:url(../images/handwriting-lo.gif);
}
.fpc div.standalone-image p {
background-image:url(../images/handwriting-fpc.gif);
}
.wc div.standalone-image p {
background-image:url(../gui-images/handwriting-wc.png);
}
.chb div.standalone-image p {
background-image:url(../gui-images/handwriting-chb.png);
}
.base div.standalone-image p {
background-image:url(../gui-images/handwriting-base.png);
}
.yb div.standalone-image p {
background-image:url(../gui-images/handwriting-yb.png);
}
.fs div.standalone-image p {
background-image:url(../gui-images/handwriting-fs.png);
}
.bo div.standalone-image p {
background-image:url(../gui-images/handwriting-bo.png);
}
.bh div.standalone-image p {
background-image:url(../gui-images/handwriting-bh.png);
}
.bcc div.standalone-image p {
background-image:url(../gui-images/handwriting-bcc.png);
}
.jas div.standalone-image p {
background-image:url(../gui-images/handwriting-jas.png);
}


/**
*	Portfolio screenshots
***/

div.screenshotsection {
	margin-top:20px;
}
div.screenshot {
	float:left;
	width:100%;
	margin:0 auto 20px auto;
}
div.screenshot-new {
	float:left;
	width:100%;
	margin:0 auto 20px auto;
}
div.screenshot img {
	margin-right:20px;
}
div.notes {
	float:left;
	width:100%;
	margin-left:20px;
}
h5 {
	font-size:14px;
	margin: 0 0 6px;
}


/**
*	Page headers
***/

h3 {
	background-repeat:no-repeat;
	margin-top:0px;
	height:30px;
	width:295px;
}
h3 span {
	display:none;
}

#about h3 {
	background-image:url('../gui-images/header-about.jpg');
}
#caseStudies h3 {
	background-image:url('../gui-images/header-case-studies.jpg');
}
.christmas-card h3 {
	background-image:url('../gui-images/header-christmas.jpg');
}
#contact h3 {
	background-image:url('../gui-images/header-contact.jpg');
}
.portfolio h3,
.portfolio-new 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-2010 h3 {
	background-image:url('../gui-images/subheader-gui-christmas-card-2010.jpg');
}
.software h3 {
	background-image:url('../gui-images/header-software.jpg');
}

/**
*	Page SubHeader
***/

h4 {
background-repeat:no-repeat;
margin-top:0px;
height:30px;
width:400px;
}
h4 span {
display:none;
}
.bol h4 {
	background-image:url('../gui-images/subheader-bol.jpg');
}
.christmas-card h4 {
	background-image:url('../gui-images/subheader-christmas-card.jpg');
}
.contentmanagement h4 {
	background-image:url('../gui-images/subheader-content-management.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');
}
.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');
}
.jeremybaines h4 {
	background-image:url('../gui-images/subheade-jeremy-baines.jpg');
}
.jojones h4 {
	background-image:url('../gui-images/subheader-jo-jones.jpg');
}
.marek h4 {
	background-image:url('../gui-images/subheader-marek.jpg');
}
.nokia h4 {
	background-image:url('../gui-images/subheader-nokia.jpg');
}
.other h4 {
	background-image:url('../gui-images/subheader-other.jpg');
}
.print h4 {
	background-image:url('../gui-images/subheader-print.jpg');
}
.quickmode h4 {
	background-image:url('../gui-images/subheader-quickmode.jpg');
}
.rockpool h4 {
	background-image:url('../gui-images/subheader-rockpool.jpg');
}
.seo h4 {
	background-image:url('../gui-images/subheader-seo.jpg');
}
.webdesign h4 {
	background-image:url('../gui-images/subheader-web-design.jpg');
}
.webdev h4 {
	background-image:url('../gui-images/subheader-web-dev.jpg');
}
.webmarketing h4 {
	background-image:url('../gui-images/subheader-web-marketing.jpg');
}
.hgv h4 {
	background-image:url('../gui-images/subheader-hgv.jpg');
}
.lo h4 {
	background-image:url('../gui-images/subheader-lo.jpg');
}
.fpc h4 {
	background-image:url('../gui-images/subheader-fpc.jpg');
}
.wc h4 {
	background-image:url('../gui-images/subheader-wc.jpg');
}
.chb h4 {
	background-image:url('../gui-images/subheader-chb.jpg');
}
.base h4 {
	background-image:url('../gui-images/subheader-base.jpg');
}
.yb h4 {
	background-image:url('../gui-images/subheader-yb.jpg');
}
.fs h4 {
	background-image:url('../gui-images/subheader-fs.jpg');
}
.bo h4 {
	background-image:url('../gui-images/subheader-bo.jpg');
}
.bh h4 {
	background-image:url('../gui-images/subheader-bh.jpg');
}
.bcc h4 {
	background-image:url('../gui-images/subheader-bcc.jpg');
}
.jas h4 {
	background-image:url('../images/subheader-jas.jpg');
}
#christmas-2010 .leftcol h4 {
	background-image:url('../gui-images/subheader-print-cut-out-and-fold.jpg');
}
#christmas-2010 .rightcol h4 {
	background-image:url('../gui-images/subheader-simply-print-and-fold.jpg');
}
.swivl h4 {
	background-image:url('../gui-images/subheader-swivl.jpg');
}


/**
*  SWIVL demo page
********************************************************************************************/

iframe {
	width:100%;
}
.software .notes {
	margin:0;
}