﻿/****************************/
/* CONTENTS:				*/
/*	Reset Styles			*/
/*  Base Styles				*/
/*  Layout Styles			*/
/*  Content Styles			*/
/*  Control Styles			*/
/*  <a></a>					*/
/****************************/


/*******************************/
/* START: Reset Styles		   */
/*******************************/
/* These could have been set by a browser's default CSS. */
* {
   margin: 0;
   padding: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
/*******************************/
/* END: Reset Styles		   */
/*******************************/
/*******************************/
/* START: base styles		   */
/*******************************/
html {overflow-y: scroll;}	/* Makes vertical scrollbar present at all times - CSS3 only */

body
{
	font-size: 85%;
	font-family: verdana, arial, helvetica, sans-serif;
	margin: 0 0 1.0em 0;
	color: #38393A;
	background-color: #38393A;
	text-align: center;
}
/* START: <a> Styles */
/* THIS STYLE HAS BEEN MOVED TO THE END OF THE CSS DUE TO */
/* PROBLEMS IN IE6 WITH THE HOVER ON VISITED LINKS */
/* END: <a> Styles */
p
{
	color: #38393A;
	line-height: 1.5em;
	font-size: 0.9em;
	margin: 0.8em 0 0.8em 0;
}
h1
{
	font-size: 2.45em;
	font-family: "HelveticaNeue-Light" , Helvetica Neue Light, Helvetica, Arial, Geneva, sans-serif;
	color: #38393A;
	margin: 0 0 0.8em 0;
	font-weight: normal;
	line-height: 1.2em;
	text-align: left;
}
h2
{
	color: #38393A;
	font-weight: bold;
	font-size: 1.5em;
	margin-bottom: 0.5em;
	text-align: left;
}
strong
{
	font-weight: bold;
	font-style: normal;
}
em
{
	font-style: italic;
	font-weight: normal;
}
ul
{
	font-size: 0.9em;
	list-style-type: disc;
}
/*******************************/
/* END: base styles		       */
/*******************************/


/*******************************/
/* START: layout styles		   */
/*******************************/
#wholedesign
{
	width: 72.0em;
	margin: 1.0em auto 0 auto;
	background-color: #D3D7BA;
	border: 0.1em solid #38393A;
	text-align: left;
}

/* START: Header Styles */
#header
{
	width: 69.85em;
	margin-left: 1.1em;
}
.headerleft
{
	width: 100%;
	float: left;
	position: relative;
	margin-left: 0.9em;
}
.headerleft ul
{
	list-style-type: none;
	font-size: 1.0em;
	margin: 1.5em 0 0.9em 1.1em;
	padding-left: 0; /* FOR FIREFOX */
}
.headerleft li
{
	padding-right: 2.0em;
	display: inline;
	line-height: 0.8em;
	position: relative;
	left: -2.0em;
}
.headerleft a:link, .headerleft a:active, .headerleft a:visited
{
	color: #38393A;
	text-decoration: none;
	font-weight: bold;
}
.headerleft a:hover
{
	color: #999999;
}
li.topmenuselected a:link, li.topmenuselected a:active, li.topmenuselected a:visited
{
	color: #999999;
}

#headerimage
{
	/*height: 6.9em;*/
	background-color: #D3D7BA;
	clear: both;
	overflow: hidden;
}
#headerimageholder
{
	float: left;
}
#headerimageholder img
{
	border: 0;
	/*height: 6.9em;
	width: 69.85em;*/
}
/* END: Header Styles */

/* START: Conent Area Styles */
#content
{
	width: 69.85em;
	margin:	 2.5em auto 0 1.1em;
}
#leftpanel
{
	width: 22.5%;
	float: left;
}
#leftpanel .spacer
{
	padding-top: 1.5em;
	clear: both;
}
#rightpanel
{
	width: 73.5%;
	float: right;
	text-align: justify;
	padding: 0 1.0em 0 0;
}

#pagecontent
{
	text-justify: auto;
}
#pagecontent .spacer
{
	padding-top: 1.0em;
	clear: both;
}
/* END: Conent Area Styles */

/* START: Page footer */
#footer
{
	width: 69.85em;
	margin: 0.5em 0 0.5em 1.1em;
	clear: both;
	padding-top: 1.4em;
}
.footercontent
{
	font-size: 0.9em;
	color: #38393A;
	line-height: 1.3em;
	text-align: center;
	padding: 0.7em 0 0.5em 0;
}
.footercontent H3
{
	color: #777777;
	font-weight: normal;
	font-size: 1.0em;
	margin: 0;
}
#footerline
{
	width: 100%;
	/*background-image: url("../images/footerline.gif");*/
	background-position: bottom left;
	background-repeat: no-repeat;
	border-bottom: 0.1em solid #38393A;
	padding: 2.3em 0 0.4em 0;
}
/* END: Page footer   */
/*******************************/
/* END: layout styles		   */
/*******************************/

/*******************************/
/* START: main menu styles     */
/*******************************/
.mainmenu
{
	list-style-type: none;
	margin: 0;
	padding: 0 0 0.5em 0;
	font-size: 1.0em;
	list-style-position: outside;
	font-weight: bold;
}
.mainmenu li
{
	/* USING AN IMAGE INSTEAD OF THE BORDER AVOIDS F/FOX BUGS
		border-bottom: 0.1em solid #38393A; */
	background-image: url("../images/menu_line.gif");
	background-repeat: repeat-x;
	background-position: bottom left;
	padding: 0.4em 0 0.4em 0;
}
.mainmenu a:link, .mainmenu a:active, .mainmenu a:visited
{
	color: #38393A;
	padding-left: 1.0em;
	text-decoration: none;
	display: block;
}
.mainmenu a:hover
{
	color: #999999;
	padding-left: 1.0em;
	background-image: url("../images/menumainpointer.gif");
	background-repeat: no-repeat;
	background-position: center left;
	text-decoration: none;
}


/*li.level1selected, li.level1expanded
{
	background-color: #DBD4C2;
	padding: 0.4em 0 0.6em 0.5em;
}*/
li.level1selected a:link, li.level1selected a:active, li.level1selected a:visited
{
	/*background-image: url("../images/menumainpointer.gif");
	background-repeat: no-repeat;
	background-position: center left;*/
	color: #999999;
}
/*li.level1selected a:hover
{
	background-image: url("../images/menumainpointer.gif");
	background-repeat: no-repeat;
	background-position: center left;
}
li.level1expanded a:link, li.level1expanded a:active, li.level1expanded a:visited
{
	background-image: url("../images/menumainpointerd.gif");
	background-repeat: no-repeat;
	background-position: center left;
}
li.level1expanded a:hover
{
	background-image: url("../images/menumainpointerd.gif");
	background-repeat: no-repeat;
	background-position: center left;
}
*/

li.level2, li.level2selected, li.level2expanded
{
	padding: 0.4em 0 0.6em 1.0em;
	font-weight: normal;
}
li.level2selected a:link, li.level2selected a:active, li.level2selected a:visited
{
	color: #999999;
	font-weight: normal;
}
/*
li.level3, li.level3selected, li.level3expanded
{
	background-color: #F4F2EC;
	padding: 0.4em 0 0.6em 1.5em;
}
li.level3 a:link, li.level3 a:active, li.level3 a:visited
{
	color: #CC3300;
}
li.level3 a:hover
{
	color: #CC3300;
}
li.level3selected a:link, li.level3selected a:active, li.level3selected a:visited
{
	color: #882200;
	background-image: url("../images/menumainpointer.gif");
	background-repeat: no-repeat;
	background-position: center left;
}
li.level3selected a:hover
{
	color: #882200;
}
li.level2expanded a:link, li.level2expanded a:active, li.level2expanded a:visited, li.level3expanded a:link, li.level3expanded a:active, li.level3expanded a:visited
{
	color: #38393A;
	background-image: url("../images/menumainpointerd.gif");
	background-repeat: no-repeat;
	background-position: center left;
}*/

/* START : SUB MENU BOXES */
#contactbox
{
	float: left;
	width: 14.8em;
	margin: 0.0em 0.1em 0.1em 0.1em;
	font-size: 0.9em;
	font-family: "HelveticaNeue-Light" , Helvetica Neue Light, Helvetica, Arial, Geneva, sans-serif;
	color: #38393A;
	background-color: #ffffff;
	padding: 1.0em 1.0em 1.0em 1.3em;
	border: 0.2em solid #38393A;
}
#contactboxheading
{
	padding: 0.1em 0 0.2em 0;
	font-family: "HelveticaNeue-Light" , Helvetica Neue Light, Helvetica, Arial, Geneva, sans-serif;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.4em;
}
#contactboxphone
{
	padding: 0 0 0.2em 0;
	font-weight: bold;
	font-size: 2.2em;
}
#contactboxemail
{
	padding: 0 0 0.2em 0em;
	font-weight: bold;
	font-size: 1.0em;
}
#contactboxemail a:link, #contactboxemail a:active, #contactboxemail a:visited
{
	color: #38393A;
	text-decoration: none;
	display: block;
}
#contactboxemail a:hover
{
	color: #999999;
	text-decoration: none;
}
#malvernbox
{
	width: 13.4em;
	margin: 2.4em 0 0 0;
	background-color: #ffffff;
	border: 0.1em solid #38393A;
	margin: 0.1em 0.1em 0.1em 0.1em;
	padding: 1.1em 1.0em 0em 1.2em;
	float: left;
	font-family: "HelveticaNeue-Light" , Helvetica Neue Light, Helvetica, Arial, Geneva, sans-serif;
}
#malvernboxheading
{
	width: 100%;
	padding: 0.1em 0 0.2em 0;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	font-size: 1.2em;
	color: #38393A;
}
#malvernboximage
{
	width: 100%;
	background-image: url("../images/malvernmedal.jpg");
	background-repeat: no-repeat;
	background-position: left;	
	padding: 0 0 10.0em 0;
}
#malvernboxtext
{
	width: 100%;
	font-size: 0.9em;
	color: #38393A;
	margin: 0.5em 0 0 0;
	text-align: center;
}
/* END : SUB MENU BOXES   */


/* START: SKIP LINKS */
.skipLink 
{
	position: absolute;
	overflow: hidden;
	width: 0; 
	height: 0;
}
.skipLink:active, .skipLink:focus 
{
	position: absolute;
	overflow: visible;
	width: auto; 
	height: auto;
	font-weight: bold;
	background-color: #FFFFCA;
	padding: 0.5em;
	border: solid 0.1em #000000;
	margin: 2.0em;
}
/* END: SKIP LINKS */
/*******************************/
/* END: main menu styles	   */
/*******************************/

/*******************************/
/* START: Content Styles       */
/*******************************/

/* START: General Page Styles */
.textbold
{
	font-weight: bold;
}
.textitalic
{
	font-style: italic;
}
.smallbold
{
	font-weight: bold;
	font-size: 0.8em;
	color: #38393A;
}
.parabreak
{
	width: 100%;
	background-image: url("../images/logo-web-page-break.gif");
	background-repeat: no-repeat;
	background-position: center center;
	padding: 1.5em 0 1.5em 0;
}

#serviceslist
{
	font-size: 0.9em;
	line-height: 1.5em;
}
#serviceslist a:link, #serviceslist a:active, #serviceslist a:visited
{
	font-size: 1.0em;
}
#serviceslist a:hover
{
	font-size: 1.0em;
}
.pageimage
{
	border: 0.1em solid #38393A;
	margin-top: 0.4em;	
}
/* END: General Page Styles */

/* START: Homepage Styles */

.contentpanelleft
{
	width: 38%;
	float: left;
/*	background-color: #38393A;  */
}
.contentpanelright
{
	width: 59%;
	float: right;
/*	min-height: 25.4em;
	background-color: #38393A; */
}
.contentpanelright .spacer
{
	padding-top: 1.0em;
	clear: both;
}

#homebox1
{
	width: 18.0em;
	margin: 0.1em 0.1em 0.1em 0.1em;
	background-color: #38393A;
	border: 0.1em solid #ffffff;
	padding: 1.0em 1.0em 0 1.0em;
	float: left;
	color: #ffffff;
}
#homebox1heading
{
	font-size: 1.2em;
	font-family: "HelveticaNeue-Light" , Helvetica Neue Light, Helvetica, Arial, Geneva, sans-serif;
	margin-bottom: 0.2em;
	font-weight: bold;
}
#homebox1body
{
	font-size: 0.9em;
	line-height: 1.5em;
	text-align: justify;
}
#homebox1 img
{
	border: 0.1em solid #ffffff;
	margin-bottom: 0.8em;
}
.righttopcontentbox
{
	width: 99%;
	float: left;
}

#homebox2
{
	width: auto;
	float: left;
}
#homebox2 img
{
	border: 0.1em solid #38393A;
}

/* Boxes 3&4 are the same so the next style isn't numbered like the others.
*/ 
#homeboxcontainer
{
	float: right;	
	width: 15.0em;
}
.homebox
{
	width: 13.15em;
	height: auto;
	background-color: #ffffff;
	border: 0.1em solid #38393A;
	padding: 1.0em 1.0em 1.0em 1.0em;
	background-color: #ffffff;
}
.homeboxheading
{
	background-color: #38393A;
	color: #ffffff;
	font-size: 1.0em;
	font-weight: bold;
	font-family: "HelveticaNeue-Light" , Helvetica Neue Light, Helvetica, Arial, Geneva, sans-serif;
	margin-bottom: 0.3em;
	padding: 0.2em 0.2em 0.2em 0.2em;
}
.homeboxbody
{
	font-size: 0.9em;
	line-height: 1.5em;
	text-align: left;
}
.homeboxbody img
{
	padding: 0.5em 0 0 1.0em;
}

#homebox5
{
	width: 28.2em;
	background-color: #ffffff;
	border: 0.1em solid #38393A;
	padding: 1.0em 1.0em 1.0em 1.0em;
	float: left;
}

#homebox5heading
{
	color: #38393A;
	font-size: 1.3em;
	font-weight: bold;
	font-family: "HelveticaNeue-Light" , Helvetica Neue Light, Helvetica, Arial, Geneva, sans-serif;
	margin-bottom: 0.2em;
}
#homebox5body
{
	font-size: 0.9em;
	line-height: 1.5em;
	padding-left: 0.2em;
	text-align: justify;
}
/* END: Homepage Styles */

/* START: Promotion Page Styles */
#promotioncontent
{
	padding-left: 14.0em;
}
#promotiontext
{
	width: 45em;
	padding: 2.0em 0 0 0;
	text-align: justify;
}
#promotionnotes
{
	font-size: 0.9em;
	padding: 1.5em 0 0 1.5em;
	text-align: justify;
	width: 43.5em;
}
/* END: Promotion Page Styles */

/* START: Portfolio Pages Styles */
.portfoliocredits
{
	font-size: 1.0em;
	line-height: 1.5em;
}
.portfoliocredits .what
{
	padding: 0 0 0 0;
	font-weight: bold;
}
.portfoliocredits .who
{
	padding: 2.0em 0 0 0;
}

.gallerycontainer
{
    position: relative;
    height: 600px;
}

.thumbnail img
{
    border: 0.2em solid #ffffff;
    margin: 0 0.5em 0.3em 0;
}
.thumbnail:hover
{
    background-color: transparent;
    border: 1em #999999;
}
.thumbnail:hover img
{
    border: 0.2em solid #38393A;
}

.thumbnail span /*CSS for enlarged image*/
{
    position: absolute;
    background-color: #D3D7BA;
    padding: 0;
    /*left: -1000px;*/
    border: 0;
    visibility: hidden;
    color: #38393A;
    text-decoration: none;
    font-weight: bold;
    
}
.thumbnail span img /*CSS for enlarged image*/
{
    border: 0;
    border-width: 0;
    padding: 0;
}
.thumbnail:hover span /*CSS for enlarged image*/
{
    visibility: visible;
    top: 0em;
    border: 1em #999999;
    left: 10.5em; /*position where enlarged image should offset horizontally */
    z-index: 50;
}
.thumbcaption
{
	font-size: 0.9em;
	font-weight: bold;
	padding: 0 0 0.3em 0;
}
.portfoliohelphover
{
	font-weight: bold;
	font-size: 0.8em;
	color: #38393A;
	text-align: left;
	padding: 1.5em 0 1.5em 0;
}
/* END: Portfolio Pages Styles */

/* START: Testimonial */
#testimoniallink a:link, #testimoniallink a:active, #testimoniallink a:visited
{
	font-size: 0.9em;
	font-weight: bold;
}
#testimoniallink a:hover
{
	font-size: 0.9em;
	font-weight: bold;
}
.testimonial
{
	color: #38393A;
	font-size: 0.9em;
}
.testimonialquote
{
	font-style: italic;
	font-weight: normal;
	padding: 0.3em 2.5em 0.3em 2.5em;
	line-height: 1.5em;
}
.testimonialquoteportfolio
{
	font-style: italic;
	font-weight: bold;
	padding: 0.3em 2.5em 0.3em 2.5em;
	line-height: 1.5em;
}
.testimonialauthor
{
	font-style: normal;
	font-weight: bold;
	padding: 0.3em 2.5em 0.3em 2.5em;
	text-align: right;
}
.testimonialauthorportfolio
{
	font-style: normal;
	font-weight: bold;
	padding: 0.3em 2.5em 0.3em 2.5em;
	text-align: right;
}
/* END: Testimonial */

/* START: Contact Page  */
#contactdetails
{
	font-size: 1.0em;
	width: auto;
	padding: 0 0 0 5.0em;
	text-align: left;
}
/*
#contactnumbers */
#contactaddress
{
	padding: 2.0em 0 0 0;
}
#contactemail
{
	padding: 2.0em 0 0 0;
}
/* END:  */


/* START: Design & Consultancy Page */
.coststable
{
	margin-top: 1.0em;
	width: 70%;
	border-collapse: collapse
}
.coststable TH
{
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 0.5em;
	padding: 0.5em 0 0.5em 0.5em;
	vertical-align: top;
	color: #ffffff;
	border-bottom: #D3D7BA 3px solid;
	background-color: #000000;
	text-align: left
}
.coststable TR
{
	background-color: #38393A;
}
.coststable TD
{
	font-weight: normal;
	font-size: 1.0em;
	margin-bottom: 0.5em;
	padding: 0.5em 0 0.5em 0.5em;
	vertical-align: top;
	color: #ffffff;
	border-bottom: #D3D7BA 1px solid;
	text-align: left
}
/* END: Design & Consultancy Page */


/* START:  */
/* END:  */

/*******************************/
/* END: Content Styles         */
/*******************************/


/*****************************************************************************/
/*****************************************************************************/
/* IMPORTANT NOTE - THE ANCHOR STYLING MUST ALWAYS BE THE LAST STYLE IN THIS */
/* CSS : PLACING IT HERE FIXES A PROBLEM IN IE6 WITH THE HOVER STYLES ON     */
/* VISITED LINKS                                                             */
/*****************************************************************************/
/*****************************************************************************/
a:link, a:active, a:visited
{
	color: #38393A;
	text-decoration: underline;
}
a:hover
{
	color: #999999;
	text-decoration: underline;
	border: none;
}
/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/
