/* 'Holly Hack' - Guards agains WIN/IE guillotine/peek-a-boo bug*/
/* Hides from IE5-mac \*/
* HTML DIV {
	height: 1%;
}
/* End hide from IE5-mac */
BODY {
	color: #777;
	background: #ede9e6;
	font-size: 62.5%; /* 10px */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0 0 8px 0;
	padding: 0 0 8px 0;
}
A {
	color: #000;
	text-decoration: underline;
}
A:hover, A:active, A:focus {
	color: #000;
	text-decoration: none;
}
H1 {
	font-size: 1.55em;
	font-weight: normal;
}
H2 {
	font-size: 1.3em;
	font-weight: normal;
}
H3 {
	font-size: 1.2em;
	font-weight: normal;
}
/**************************************************************
* ELEMENT TIDYUP
**************************************************************/
ACRONYM { border: 0; }
A:focus { outline: none; }
IMG { border: 0; }
.hidden { display: none; }
/**************************************************************
* CONTAINER
**************************************************************/
#container {
	background: #fff;
	font-size: 1.2em;
	max-width: 784px;
	width: 784px;
	margin: 0 auto;
	padding-top: 8px; 
	position: relative;
}
#container-curves {
	background: url(../images/container-bl.gif) no-repeat 0 0;
	height: 22px;
	clear: both;
	overflow: hidden;
	position: relative;
	margin-top: -13px;
}
#container-curves .br {
	background: url(../images/container-br.gif) no-repeat 0 0;
	width: 22px;
	height: 22px;
	overflow: hidden;
	position: absolute;
	right: 0;
}
/**************************************************************
* LOGO AND PAGEHEADER
**************************************************************/
#logo {
	float: left;
	display: block;
	margin: 0.3em 0 0 2em;
}
#pageheader-wrapper {
	background: #fff url(../images/pageheader-tl.gif) no-repeat 0 0;
	float: right;
	width: 70%;
	margin: 0 9px 0 0;
	display: inline; /* fix ie6 double margin bug */
}
#pageheader {
	width: 100%;
	text-align: right;
	background: url(../images/pageheader-tr.gif) no-repeat top right;
	border-bottom: 1px solid #b2b2b2;
	position: relative;
}
#pageheader:after { /* clearing of div, so in encompasses its floating child elements */
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
/**************************************************************
* SEARCH
**************************************************************/
#google {
	position: absolute;
	right: 40%;
	top: 0.2em;
}
#search {
	width: 30%;
	margin: 0;
	padding: 1.3em 3em 0 0.8em;
	border-left: 1px solid #b2b2b2;
	float: right;
}
#q {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.05em;
	vertical-align: middle;
	border: 1px solid #b2b2b2;
	width: 10.5em; 
}
#sarrow {
	vertical-align: middle;
}
#search LABEL{
	font-size: 10px;
	color: #fff;
	float: right;
}
/**************************************************************
* TOP NAV
**************************************************************/
#topnav {
	font-size: 1.1em;
	margin: 1em 1em 0 0;
	padding: 0; 
	list-style: none;
	float: right;
	position: relative;
	z-index: 2;
	display: inline;
}
#topnav LI {
	background: url(../images/topmenu-off-l.gif) no-repeat bottom left;
	margin: 0 0 -1px 0;
	padding: 0;
	float: left;
}
#topnav LI A {
	background: url(../images/topmenu-off-r.gif) no-repeat bottom right;
	color: #666;
	font-weight: bold;
	text-decoration: none;
	display: block;
	padding: .5em 1em;
}
#topnav LI A:hover, #topnav LI A:active, #topnav LI A:focus {
	text-decoration: underline;
}
#topnav LI.on {
	background: url(../images/topmenu-on-l.gif) no-repeat bottom left;
}
#topnav LI.on A {
	background: url(../images/topmenu-on-r.gif) no-repeat bottom right;
}
/**************************************************************
* FLASH AREA
**************************************************************/
#flash {
	width: 766px;
	height: 198px;
	/* border: 1px solid #b2b2b2; */
	background: url(../images/flash_holding.gif) no-repeat;
	margin: 0 9px;
	clear: right;
	position: relative;
	top: -1px;
	display: block;
}
/**************************************************************
* HOMEPAGE 3-COLUMN
**************************************************************/
#columngroup {
	margin: 0 auto;
	width: 100%;
	min-height: 300px;
	clear: both;
	font-size: 0.9em;
}
#columngroup:after { /* clearing of div, so in encompasses its floating child elements */
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
#columngroup A {
	color: #777;
	text-decoration: none;
}
#columngroup A:hover, #columngroup A:active, #columngroup A:focus {
	color: #666;
	text-decoration: underline;
}
#column1, #column2, #column3 {
	width: 248px;
	float: left;
	padding: 9px 9px 0 0;
	min-height: 300px;
}
#column1 {
	padding-left: 9px;
}
#column1 DIV, #column2 DIV, #column3 DIV {
	background: #fff url(../images/hp-box-bg.gif) repeat-x bottom left;
	width: 100%;
	border: 1px solid #b2b2b2;
	border-bottom: 4px solid #000;
	margin-bottom: 10px;
	position: relative;
}
#column1 DIV.pressed,
#column2 DIV.pressed,
#column3 DIV.pressed {
	background: #eee;
}
#columngroup H2.handle {
	font-size: 1.7em;
	font-weight: normal;
	margin: 0;
	display: block;
	background: url(../images/hp-box-tl.gif) no-repeat 0 0;
	position: relative;
	top: -1px;
	left: -1px;
	padding: 0.7em 0.5em 0.5em 1.7em;
    cursor: move;
	border-bottom: 1px dashed #b2b2b2;
}
#columngroup H2.handle A {
	color: #28b4e5;
	text-decoration: none;
}
#columngroup H2.handle A:hover, H2.handle A:active, H2.handle A:focus {
	color: #28b4e5;
	cursor: pointer;
	text-decoration: underline;
}
#columngroup DIV.pressed H2.handle {
	background: none;
}
A.more, A.less {
	background: no-repeat 0 0;
	height: 16px;
	width: 17px;
	display: block;
	position: absolute;
	top: 1.5em;
	text-indent: -5000px;
	display: none;
}
A.more {
	background-image: url(../images/hp-box-plus.gif);
	right: 32px;
}
A.less {
	background-image: url(../images/hp-box-minus.gif);
	right: 10px;
}
.circleimg {
	position: absolute;
	right: -7px;
	top: 57px;
}
.latestprojects P, .casestudy P,
.aboutus P, .subscribe P {
	margin: 2em 3em;
}
/**************************************************************
* INDIVIDUAL HOMEPAGE BOXES
**************************************************************/
.customisehomepage {
	height: 250px;
}
.customisehomepage IMG {
	position: relative;
	right: -8px;
	float: right;
	z-index: 2;
}
.customisehomepage P {
	font-size: 1.3em;
	padding-left: 2em;
	margin: 0.8em 0;
	z-index: 3;
	position: absolute;
}
.whatsnew UL, whatsnew LI {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.whatsnew UL {
	margin: 0.8em 3em;
}
.whatsnew LI {
	padding: 1em 0;
	border-top: 1px solid #000;
}
.whatsnew LI.first {
	border-top: 0;
}
.whatsnew SPAN {
	color: #000;
	font-weight: bold;
}
.latestprojects IMG {
	margin: 0 auto;
	display: block;
}
.latestprojects SPAN {
	display: block;
	height: 115px;
	width: 160px;
	overflow: hidden;
	margin: 0.8em auto 0;
	border: 1px solid #ddd;
}
#column1 .latestprojects A.plink,
#column2 .latestprojects A.plink,
#column3 .latestprojects A.plink {
	color: #000;
	font-weight: bold;
	text-align: center;
	display: block;
	padding: 0.4em 3em 0.8em;
}
.subscribe FORM {
	width: 80%;
	margin: 0.5em auto 1.5em;
}
.subscribe INPUT {
	float: left;
	margin: 0 0 0 2px;
}
.subscribe LABEL{
	display: none;
}
/**************************************************************
* INCLUDE BOXES (BUILDING ON HP BOX STYLES)
**************************************************************/
.includebox {
	font-size: 0.9em;
	border: 1px solid #b2b2b2;
	border-bottom: 4px solid #000;
	margin: 9px 9px 10px 0;
}
.includebox H2 {
	font-size: 1.7em;
	font-weight: normal;
	margin: 0;
	display: block;
	background: url(../images/hp-box-tl.gif) no-repeat 0 0;
	position: relative;
	top: -1px;
	left: -1px;
	padding: 0.7em 0.5em 0 1.7em;
}
.includebox H3 {
	color: #000;
	font-size: 1.2em;
	margin: 1em;
}
.includebox OL, .includebox 0L LI  {
	margin: 0;
	padding: 0;
}
.includebox OL {
	margin: 0.7em 1.5em 0.7em 0;
}
.includebox OL LI {
	padding-bottom: 0.7em;
}
.includebox UL, .includebox UL LI {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.includebox UL {
	margin: 0.7em 1.5em;
}
.includebox UL LI {
	padding: 0.7em 0;
	border-top: 1px solid #000;
}
.includebox UL LI.first {
	border-top: 0;
}
.includebox P {
	margin: 0.7em 1.5em 1.5em;
}
.includebox A {
	font-weight: bold;
	color: #777;
}
.includebox A#email {
	color: #e4007b; /* magenta */
}
.includebox A:hover, .includebox A:active, .includebox A:focus {
	color: #666;
}
.includebox SPAN {
	float: left;
	display: block;
	width: 4em;
}
/**************************************************************
* CONTENT + RIGHT COLUMN
**************************************************************/
#content {
	padding: 0 9px 9px 9px;
	margin-right: 275px;
	margin-top: -1.25em;
}
#rightcol {
	width: 260px;
	float: right;
	margin-top: -2em;
}
/**************************************************************
* SECTION INTRO AREA
**************************************************************/
#sectionintro {
	width: 764px;
	height: 133px;
	border: 1px solid #b2b2b2;
	margin: 0 9px 2em;
	clear: right;
	position: relative;
	top: -1px;
	display: block;
	background: #dddc1f url(../images/sectionintro-bg.jpg) no-repeat right;
}
#sectionintro H1 {
	font-size: 1.7em;
	margin: 1.3em 300px 0.5em 30px;
}
#sectionintro H2 {
	font-size: 1.2em;
	margin: 1.0em 300px 1em 30px;
}
#sectionintro P {
	font-size: 0.9em;
	margin: 0em 300px 1em 30px;
}
#sectionintro-corner {
	position: absolute;
	top: -1px;
	left: -1px;
	height: 20px;
	width: 20px;
	background: url(../images/sectionintro-corner.gif) no-repeat 0 0;
	z-index: 2;
}
/**************************************************************
* OVERVIEW BOXES - NEWS STYLE
**************************************************************/
DIV.overviewbox {
	border: 1px solid #b2b2b2;
	margin: 0 0 1em 2em;
}
DIV.overviewbox .header {
	font-weight: bold;
	padding: 0.5em 0.8em;
	border-bottom: 1px solid #000;
	background: url(../images/overviewbox-header-bg.gif) repeat-x bottom left;
}
DIV.overviewbox .header SPAN {
	font-size: 0.9em;
}
DIV.overviewbox P {
	margin: 0.8em;
	font-size: 0.9em;
}
/**************************************************************
* OVERVIEW BOXES - PORTFOLIO/SERVICES STYLE
**************************************************************/
DIV.overviewbox2 {
	font-size: 0.9em;
	border: 1px solid #b2b2b2;
	border-bottom: 4px solid #000;
	margin: 0 0 9px 9px;
	float: left;
	width: 247px;
}
DIV.overviewbox2 H2 {
	font-size: 1.2em;
	font-weight: 600;
	margin: 0;
	display: block;
	background: url(../images/overviewbox2-header-tl.gif) no-repeat 0 0;
	position: relative;
	top: -1px;
	left: -1px;
	padding: 0.4em 1.7em 0.4em 0.8em;
}
DIV.overviewbox2 A.header {
	color: #fff;
	text-decoration: none;
	background: #c8bfb6 url(../images/overviewbox2-header-tr.gif) no-repeat right center;
	display: block;
}
DIV.overviewbox2 A.header:hover,
DIV.overviewbox2 A.header:active,
DIV.overviewbox2 A.header:focus {
	text-decoration: underline;
}
DIV.overviewbox2 P {
	margin: 0.5em 0.8em;
}
/**************************************************************
* PORTFOLIO
**************************************************************/
#fullsize {
	position: absolute;
	left: 0;
    top: 0;
	z-index: 10;
	background: #fff;
	border: 1px solid #000;
	text-align: right;
}
/**************************************************************
* CLIENTS
**************************************************************/
UL.clients, #clientgroups {
	font-weight: bold;
	float: left;
	margin: 0 0 2em 2em;
	padding: 0;
	list-style-type: none;
}
UL.clients {
	padding-left: 2em;
}
UL.first {
	border-left: 1px solid #000;
}
UL.clients LI A {
	color: #777;
}
UL.clients LI.faded,
UL.clients LI.faded A {
	color: #aaa;
}
UL.clients LI.highlighted,
UL.clients LI.highlighted A {
	color: #e4007b; /* magenta */
}
/**************************************************************
* PREV/NEXT
**************************************************************/
.prevnext {
	font-size: 0.9em;
	padding-top: 3em;
	clear: both;
}
/**************************************************************
* BREADCRUMB
**************************************************************/
#breadcrumb {
	font-size: 0.9em;
	padding-bottom: 0.1em;
}
/**************************************************************
* FOOTER
**************************************************************/
#footer {
	font-size: 0.9em;
	background: #fff url(../images/footer-bg.gif) repeat-x 0 0;
	border: 1px solid #b2b2b2;
	padding: 2em;
	clear: both;
	line-height: 2em;
	margin: 0 9px;
}
#footer IMG {
	float: right;
}
#footer SPAN, #footer A {
	color: #777;
	padding-left: 0.5em;
}
#footer A {
	text-decoration: underline;
}
#footer A:hover, #footer A:active, #footer A:focus {
	color: #666;
	text-decoration: none;
}
#contact, #privacy, #terms, #reset {
	border-right: 1px solid #000;
	padding-right: 0.8em;
}
/**************************************************************
* STYLE OVERRIDES
**************************************************************/
BODY.magenta { background: #e4007b; }
BODY.limegreen { background: #dddc1f; }
BODY.orange { background: #f18e00; }
BODY.yellow { background: #fedc00; }
BODY.cyan { background: #28b4e5; }
BODY.darkgrey { background: #a2968a; }
BODY.magenta #container-curves { background-image: url(../images/container-bl-magenta.gif); }
BODY.magenta #container-curves .br { background-image: url(../images/container-br-magenta.gif); }
BODY.limegreen #container-curves { background-image: url(../images/container-bl-limegreen.gif); }
BODY.limegreen #container-curves .br { background-image: url(../images/container-br-limegreen.gif); }
BODY.orange #container-curves { background-image: url(../images/container-bl-orange.gif); }
BODY.orange #container-curves .br { background-image: url(../images/container-br-orange.gif); }
BODY.yellow #container-curves { background-image: url(../images/container-bl-yellow.gif); }
BODY.yellow #container-curves .br { background-image: url(../images/container-br-yellow.gif); }
BODY.cyan #container-curves { background-image: url(../images/container-bl-cyan.gif); }
BODY.cyan #container-curves .br { background-image: url(../images/container-br-cyan.gif); }
BODY.darkgrey #container-curves { background-image: url(../images/container-bl-darkgrey.gif); }
BODY.darkgrey #container-curves .br { background-image: url(../images/container-br-darkgrey.gif); }
/**************************************************************
* START CLASSES REQUIRED BY WYSIWYG
**************************************************************/
.textunderline {/* underlined text */
	text-decoration: underline;
}
.textdefault { /* a text 'reset' class for use in wysiwyg only, should match default text style */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;  /* 11px/14px */
	font-weight: normal;
	text-decoration: none;
	color: #777;
}

/*** LIST CLASSES ***/

UL.circle {list-style-type: circle;}
UL.disk {list-style-type:  disk;}
UL.square {list-style-type: square;}
OL.decimal {list-style-type: decimal;}
OL.lower-alpha {list-style-type: lower-alpha;}
OL.upper-alpha {list-style-type: upper-alpha;}
OL.lower-roman {list-style-type: lower-roman;}
OL.upper-roman {list-style-type: upper-roman;}

/*** TABLE, IMAGE AND PARAGRAPH TEXT ALIGNMENT ***/
 
TABLE.left, P.left, IMG.left { /* align table or <p>-wrapped image/image to the left */
	float: left;
	margin: 0 10px 10px 0;
}
TABLE.right, P.right, IMG.right { /* align table or <p>-wrapped image/image to the right */
	float: right;
	margin: 0 0 10px 10px;
}
TABLE.center { /* align table to the centre */
	margin: 0 auto;
}
P.center { /* align <p>-wrapped image to the left */
	text-align: center;
}
P.textcenter { /* align paragraph text to the centre */
	text-align: center;
	display: block;
}
P.textleft {/* align paragraph text to the left */
	text-align: left;
	display: block;
}
P.textright { /* align paragraph text to the right */
	text-align: right;
	display: block;
}
P.textjustify { /* 'justify' align paragraph text */
	text-align: justify;
	display: block;
}

/*** TABLE, IMAGE AND PARAGRAPH TEXT ALIGNMENT ***/

TABLE.datatable {
	border-style: solid;
	border-color: #a2968a; /* dark grey */
	border-width: 1px 0 0 1px;
	margin-bottom: 2px;
}
TABLE.datatable TH {
	border-style: solid;
	border-color: #a2968a; /* dark grey */
	border-width: 0 1px 1px 0;
	background-color: #ede9e6;
	padding: 4px;
	text-align: left;
	vertical-align: top;
}
TABLE.datatable TH.plaintext { /* for default text in a <th> */
	font-weight: normal;
	text-align: left;
}
TABLE.datatable TD {
	border-style: solid;
	border-color: #a2968a; /* dark grey */
	border-width: 0 1px 1px 0;
	padding: 4px;
	text-align: left;
	vertical-align: top;
}
TABLE.datatable TD TD { /* remove borders from nested table cells */
	border-width: 0;
}
TABLE.datatable CAPTION {
	color: #fff;
	border-style: solid;
	border-color: #a2968a; /* dark grey */
	font-weight: bold;
	padding: 4px;
	text-align: left;
	border-width: 1px 1px 0px 1px;
	background-color: #a2968a; /* dark grey */
}
/******************************
* END CLASSES REQUIRED BY WYSIWYG
/******************************/