@charset "utf-8";


/* SCREEN CSS 
-----------------------------------------------------------------------
*/
/* Formatting CSS */

img#snow {
	display: none;
/*	position: absolute;
	z-index: 10;
	top: -20px;
	left: -10px;
	margin: 0;
	padding: 0;*/
}

.printonly, printOnly {display: none;}

html {
	min-width: 950px; /* fix bg in place - same as 'container' div */

}

body {
	margin: 0;
	padding: 0;
	background: #1698e1 url("../images/bg.jpg");
	color: #000;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 76%;
	line-height: 140%;
	text-align:center; /* fix IE centering */
	overflow-x: hidden;
}

h1 {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 1.5em;
}

h2 {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
}

h3 {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 1.1em;
}

p, form {
	font-family:  Verdana, Helvetica, Arial, sans-serif;
	color: #1a688f;
	font-size: 0.9em;
	line-height: 1.3em;
	margin: 0.75em 0;
}

a:link, a:visited {
	color: #000;
	font-weight: bold;
}

/*a:focus, a:active, a:hover {
	color: #fff;
	background-color: #000;
}*/

#evolveBox a, #redCowGames a, #news a, #featuresColumn a {padding: 1px 2px 2px 2px; margin-left: -2px;}

img {
	border: 0;
}

blockquote {}

ul {
	margin: 0;
	padding: 0;
}

ul li {
	list-style: url("images/listimg.gif") outside circle;
	margin: 0 0 0 1em;
}

abbr, acronym, .help {
  border-bottom: 1px dotted;
  cursor: help;
}

textarea, input {
	font-family:  Arial, Verdana, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1em;
	background: #fff!important;
	padding: 0 0.5em;
	border: 1px solid #1a688f;
	
}
textarea:focus, input:focus {
	background: #ddd!important;
	border: 1px solid #1a688f;
}

/* TEXT SELECTION HIGHLIGHT COLOURS */
::selection { /* Safari */
	background: #F241D7;
	color: #fff;
}
::-moz-selection { /* Firefox */
	background: #F241D7; 
	color: #fff;
}

#address ::selection { /* Safari */
	background: #000000;
	color: #fff;
}
#address ::-moz-selection { /* Firefox */
	background: #000000; 
	color: #fff;
}

/* General layout divs */

#bgGrad {
	margin: 0;
	padding: 23px 10px 10px 10px;
	background: transparent url("../images/bg-grad.jpg") repeat-x;
}

#wrapper {
	width: 956px;
	margin: 0 auto; /* centres */
	text-align: left; /* restore left justification */
	position: relative;
}

#topStrip {
	width: 956px;
	height: 8px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#topStrip div {
	width: 950px;
	height: 8px;
	margin: 0 auto;
	background-color: #fff;
	overflow: hidden;
}

#content {
	background: #fff url("../images/wrapper-bg.gif") repeat-y;
	border-bottom: 3px solid #247baa;
}

#contentInner {
	margin: 0 12px;
	padding: 0;
}

/* MAIN CONTENT STUFF */

p#skip {
	margin: -1em 0 0.5em 0;
	position: relative;
	z-index: 11;
	top: -7px;
	/* display: hidden; */
}
p#skip a:link, p#skip a:visited {
	color: #40A9EA;
	padding: 2px;
	margin: -2px;
}
p#skip a:active, p#skip a:focus {
	background-color: #000;
	color: #fff;
}
p#skip a:hover {
	background-color: #37ADED;
	color: #fff;
}

#mainHeader {
	height: 78px;
	background: #000 url("../images/main-heading-bg.jpg") repeat-x;
	margin: 0 0 6px 0;
	border-top: 1px solid #fff;
	float: left;
	width: 932px;
	position: relative;
}

#mainHeader h1#logo {
	width: 183px;
	height: 38px;
	background: transparent url("../images/logo.gif");
	position: absolute;
	top: 19px;
	left: 34px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	color: #fff;
	font-weight: bold;
}

#mainHeader #strapline {
	width: 318px;
	height: 14px;
	background: transparent url("../images/strapline.gif") no-repeat;
	position: absolute;
	top: 32px;
	right: 25px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
}

#topColumns {
	background: #74d0ff url("../images/topcolumns-bg.jpg") repeat-y;
	/*padding-top: 20px;*/
	width: 932px;
	clear: left;
	overflow:auto; /* INSTEAD OF CLEARFIX */
}

/* --------- Menu --------- */

#menuBox {
	width: 234px;
	float: left;
	padding: 0;
	margin: 0;
	position: relative; /* for ul z-index (don't apply this to ul or you'll be sorry when it comes to ie! */
}

#menuBox ul {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	margin: 20px 0 20px 0;
	z-index: 10; /* so menu will be over middle col if enlarged (may not cover Flash though). */
}

#menuBox ul li {
	margin: 2px 0;
	padding: 0;
	list-style: none;
}

#menuBox ul li a:link, #menuBox ul li a:visited {
	font-size: 1.5em;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
	width: 214px;
	/* height: 1.25em; */
	margin: 0 ;
	padding: 5px 0 3px 20px;
	letter-spacing: -1px;
}

 #menuBox ul li a:active, #menuBox ul li a:focus, #menuBox ul li a:hover {
	color: #fff;
	background: #000;
	text-transform: uppercase;
	text-decoration: none;
}


 #menuBox ul li a.active {
	color: #fff;
	background: #41a5dc;
	text-transform: uppercase;
	text-decoration: none;
}

#menuBox ul li a img {
	margin: 0 10px 0 0;
	vertical-align:top; /* top */
	position: relative;
	top: 1px;
}

#menuBox ul li a em {
	font-style: normal;
	/*border-bottom: 2px solid #59BDEF;  accesskeys hints  ?? */
}

#menuBox h1 {
	font-family:  Verdana, Helvetica, Arial, sans-serif;
	color: #000;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.25em;
	margin: 10px 0 0 20px;
}

#menuBox p {margin: 5px 10px 10px 20px;}

/* Showreel */

#topColumns #showreel {
	width: 450px;
	float: left;
	padding: 0;
	margin: 0 7px;
}

/* Evolve */

#topColumns #evolveBox, #RightColumn #evolveBox {
	min-height: 304px;
	height: 25em;
	width: 234px;
	float: left;
	padding: 0;
	margin: 0;
	background: transparent url("../images/evolve-bg.jpg") no-repeat;
}

body#competition #evolveBox {
	float: none;
}

#evolveBox h3 {
	margin: 13px 0 0 20px;
	padding: 0 0 20px 0;
	font-size: 2em;
	color: #fff;
	background: transparent url("../images/EVOLVECMS.gif") no-repeat;
	text-indent: -9999px;
}

body#competition #evolveBox {padding-top: 13px;}

#evolveBox h3 span {color: #000;}

#evolveBox h4 {
	font-family:  Verdana, Helvetica, Arial, sans-serif;
	text-transform:none;
	color: #000;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.25em;
	margin: 0 0 10px 0;
	padding: 0 20px 50px 20px;
	background: transparent url("../images/CMS-bar.jpg") no-repeat left bottom;
}

#evolveBox p {
	margin: 5px 10px 10px 20px;
	width: 120px;
}

#evolveBox img#takeControl {
	position: absolute;
	right: -20px;
	top: 23em;
	margin: 0;
	padding: 0;
	border: 0;
}

/* LATEST NEWS HEADING BAR */

h3#latestNews {
	background: #000;
	color: #fff;
	padding: 5px 0 5px 260px;
	margin: 7px 0px;
	text-transform: uppercase;
	clear: both;
}

#news ul li a:link, #news ul li a:visited {color: #1a688f; font-weight: normal;}
#news ul li a:active, #news ul li a:hover, #news ul li a:focus {color: #000;}
#news ul li p strong a:link, #news ul li p strong a:visited {font-weight: bold;}
#news ul li a.more:link, #news ul li a.more:visited {color: #000; font-weight: bold;}
#news ul li a.more:focus, #news ul li a.more:active, #news ul li a.more:hover {color: #fff;}

/* BOTTOM COLUMNS etc */

#bottomColumns {
	background: #74d0ff url("../images/bottomcolumns-bg.jpg") repeat-y;
	width: 932px;
	clear: left;
	overflow:auto; /* INSTEAD OF CLEARFIX */
	margin: 0 0 9px 0;
}

#bottomColumns #redCowGames {
	background: transparent url("../images/red-cow-games.jpg") no-repeat;
	width: 234px;
	margin: 0 7px 0 0;
	float: left;
	position: relative;
}

#bottomColumns #redCowGames h2 {
	/*margin: 12px 0 0 10px;
	letter-spacing: -1px;*/
	text-indent: -9999px;
	background: transparent url("../images/games-h1.gif") no-repeat;
	width:234px;
	height:69px;
	text-transform: uppercase;
	font-size: 1.1em;
	font-weight: bold;
}

#bottomColumns #redCowGames p {
	margin: 250px 10px 20px 20px;
	color: #fff;
}
        
#bottomColumns #news {
	width: 450px;
	float: left;
	margin: 0 7px 0 0;
}

#bottomColumns #news ul li {
	margin: 15px 15px;
	border-bottom: 1px dashed #000;
	list-style: none;
	padding: 0 0 1em 0;
}

/*#bottomColumns #news ul li:last-child {border:none;  margin-bottom: 0;} */ /* decent browsers only, although rejected by css validator! */
#bottomColumns #news ul li.last {border: none;  margin-bottom: 0;} /* for the rubbish browsers */
#bottomColumns #news ul li h5 {
	font-size: 1.1em;
	color: #000;
	background-color: #fff;
	padding: 2px 4px;
	margin: 0 0 0 -4px;
	display: inline;			/* ??? */
}

#bottomColumns #news ul li.newsItem p span { /* the date */
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-size: 0.8em;
	margin: 0.5em 0 0 0;
	color: #0279BB;
}

#bottomColumns #news ul li.newsItem p {
	margin: 0.5em 0;
}

#bottomColumns #news ul li.newsItem p a:link, #bottomColumns #news ul li.newsItem p a:visited {
	color: #1a688f;
	font-weight: normal;
}

#bottomColumns #news ul li.newsItem p a:active, #bottomColumns #news ul li.newsItem p a:focus {
	background-color: #000;
	color: #fff;
}
#bottomColumns #news ul li.newsItem p a:hover {
	background-color: transparent;
	color: #fff;
}

#bottomColumns #news ul li.newsItem p a.more:link, #bottomColumns #news ul li.newsItem p a.more:visited {
	font-weight: bold;
	color: #000;
}

#bottomColumns #news ul li.newsItem p a.more:active, #bottomColumns #news ul li.newsItem p a.more:focus, #bottomColumns #news ul li.newsItem p a.more:hover {
	background: #13A8FC;
	color: #fff;
}

 a.more:link,  a.more:visited {
	font-weight: bold;
	color: #000;
}
 a.more:active, a.more:focus,  a.more:hover {
	background: #13A8FC;
	color: #fff;
}

/* Misc */

.flash {
	display: block;
	background-color: #0279bb;
}

#myVideoShowreel {
	display: block;
	background-color: #a79d93; 
}

.slashes {
	letter-spacing: 0.2em;
	font-style: italic;
	margin: 0 0.1em 0 0;
}

#showreel {
	
}
#showreel h1 {
	position: absolute;
	text-indent: -9999px;
}

#tooltipImg {
	position:absolute;
	display:none;
	color:#fff;
}

iframe#googlemaps {
	display: block;
	width: 450px;
	height: 301px;
	border: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

#cms #content a:link#mb4 img, #cms #content a:visited#mb4 {margin-bottom: 300px;}

/* Inner Pages CSS including Red Cow and Portfolio home pages added 15/05/2008 */


#topColumnsInner {
	background: #74d0ff url("../images/three_columns.gif") repeat-y;
	/*padding-top: 20px;*/
	width: 932px;
	clear: left;
	overflow:auto; /* INSTEAD OF CLEARFIX */
	margin-bottom: 9px;
}

#LeftColumn {
	width: 234px;
	margin-right:7px;
	float:left;
}

/* -- CENTRE COL CSS -- */

#CentreColumn {
	width:450px;
	margin-right:7px;
	float:left;
}

#CentreColumn p, #CentreColumn ul {
	font-family:  Verdana, Helvetica, Arial, sans-serif;
	color: #1a688f;
	/* font-size: 0.9em; */
	line-height: 1.3em;
	margin: 0em 1em 0.8em 1em;
}

#CentreColumn  h1 {
	background: #000;
	color: #fff;
	padding: 5px;
	margin:0px;
	text-transform: uppercase;
	clear: both;
	border-top:7px solid #fff;
	border-bottom:7px solid #fff;
	font-size: 1.2em;
}

#CentreColumn  h2 {
	font-size: 1.1em;
	color: #000;
	background-color: #fff;
	padding: 2px 0.5em;
	margin:2em 6px 1em 6px; /* later revert first h2 back to margin-top:6px */
	/* text-transform:none; */
}
#CentreColumn  h2.firstH2 {margin-top:6px;}

#CentreColumn  h2.servicesH2 {
	background:none;
	color: #000;
	padding-top:20px;
	border-top:1px solid #1a688f;
}

#CentreColumn  h3 {margin-left: 1em;}


/* #CentreColumn p + h2 {margin-top: 2em;} */  /* IE ignores :(  use class instead. boooo. */

#CentreColumn ul {
	margin: 2em 4em;
	padding: 0;
}

#CentreColumn ul li {
	list-style: square outside url("../images/tick2.gif");
	margin: 0.8em 1em 0 0;
	color: #000;
	font-weight: bold;
	padding: 0 0 0 0;
}

#CentreColumn ul li a:link, #CentreColumn ul li a:visited {
	color: #000;
}
#CentreColumn ul li a:active, #CentreColumn  ul li a:focus {
	background: #13A8FC;
	color: #fff;
}
#CentreColumn ul li a:hover {
	background: #13A8FC;
	color: #fff;
}

#CentreColumn img#Badge {
	position: absolute;
	top: 23em;
	left:18em;
	margin: 0;
	padding: 0;
	border: 0;
}

/* -- RIGHT COL CSS -- */

#RightColumn {
	width:234px;
	float:left;
}

#RightColumn div.rightColTop {
	background: #74D0FF;
}

#RightColumn p {margin: 5px 10px 10px 20px;}

#RightColumn ul {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color:#1a688f;
	font-size:0.9em;
	margin: 0 10px 0 20px;
	padding: 0;
}

#RightColumn li {
	/* background:url(../images/yellow_bullet.gif); */
	background-repeat: no-repeat;
	padding: 0;
	list-style: square outside;
	margin: 0.5em 0 0.5em 13px;
	color: #000;
}

.bold {
	color:#000;
	font-weight:bold;
}


#RightColumn h2 {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	text-transform: uppercase;
	margin:0 17px;
	padding:17px 0;
	font-size:1.3em;
	letter-spacing: -1px;
	/* background: right center no-repeat url("../images/bg_arrow.gif"); */
	width:200px;
	height:18px; 
}


#RightColumn h3 {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	text-transform: uppercase;
	margin:0 20px;
	padding:17px 0 5px 0;
	letter-spacing: -1px;
	font-size: 1.15em;
}
#RightColumn img {
	margin:0 0 17px 17px;
}

a.quote {
	float:right;
	margin: 2em 10px 2em 0;
	width: 191px;
	height: 22px;
	text-indent: -9999px;
}
a.quote:link, a.quote:visited {background: transparent url("../images/request-a-quote.gif") 0 0 no-repeat;}
a.quote:active, a.quote:focus, a.quote:hover {background: transparent url("../images/request-a-quote.gif") 0 -22px no-repeat;}


/* FOOTER */

#footer {
	margin: 0 0 20px 0;
	font-size: 0.9em;
}
#footer p {
	color: #fff;
	display: inline;	
	margin: 10px 0 20px 0;
	float: right;
	width: 53em;
	padding: 10px;
}

#footer p span#fl {
	background: transparent url("../images/footer-edge.gif") bottom right no-repeat;
	width: 15px;
	padding: 4px;
}
#footer p span#fl em {visibility: hidden;}

#footer p span#fm {
	background-color: #000;
	padding: 4px;
}
#footer p span#fr {
	background: transparent url("../images/footer-edge.gif") top left no-repeat;
	width: 10px;
	padding: 4px;
}

#footer p span#fr em {visibility: hidden;}

#footer p a:link, #footer p a:visited {
	color: #fff;
	font-weight: normal;
	padding: 4px 4px 4px 4px;
	margin: -4px -4px -4px -4px;

}
#footer p a:active, #footer p a:focus, #footer p a:hover {
	color: #000;
	background-color: #fff;
}

/* -- BOTTOM COLUMNS --*/
        
#bottomColumns #featuresColumn, #RightColumn #featuresColumn {
	width: 234px;
	float: left;
	margin: 0;
	overflow:auto; /* INSTEAD OF CLEARFIX */
}

#bottomColumns #featuresColumn #specialOffers {
	width: 234px;
	background-color: #13a8fc;
	margin:0;
	border-bottom: 7px solid #fff;
	float: left;
}
#topColumnsInner #specialOffers {
	width: 234px;
	background-color: #13a8fc;
	margin:0;
	border-top: 7px solid #fff;
	float: left;
}
            
#bottomColumns #featuresColumn #dxblog, body#competition #topColumnsInner #dxblog {
	width: 234px;
	background-color: #68ccff;
	margin:0;
	float: left;
}
#topColumnsInner #dxblog {
	width: 234px;
	background-color: #13a8fc;
	margin:0;
	float: left;
	border-top: 7px solid #fff;
}


#bottomColumns #featuresColumn #specialOffers h3, #topColumnsInner #specialOffers h3 {
	text-indent: -9999px;
	background: transparent url("../images/special-h1.gif") no-repeat;
	width:165px;
	height:24px;
}

#bottomColumns #featuresColumn #dxblog h3, body#competition #topColumnsInner #dxblog h3 {
	text-indent: -9999px;
	background: transparent url("../images/opportunities-h1.gif") no-repeat;
	width:203px;
	height:24px;
}
#topColumnsInner #dxblog h3 {
	text-indent: -9999px;
	background: transparent url("../images/blog-h1-darkerbg.gif") no-repeat;
	width:203px;
	height:24px;
}
            
#address {
	width: 234px;
	background-color: #F241D7; /* #F241D7; */
	margin:0;
	float: left;
	border-top: 7px solid #fff;
}

#address p.phone {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 2.3em;
	color: #000;
	font-weight: bold;
	margin: -0.5em 0 -0.5em 20px;
	padding:0;
}

#specialOffers h3, #dxblog h3, #address h3, #RightColumn #specialOffers h3, #RightColumn #dxblog h3 {
	text-transform: uppercase;
	margin: 10px 0px 0 20px;
	letter-spacing: -1px;
	padding: 0;
}

#specialOffers p, #dxblog p, #address p {
	color: #fff;
	font-weight: bold;
	margin: 10px 10px 10px 20px;
	line-height: 2em;
}


#address p {line-height: 1.6em;  margin: 18px 20px; font-size: 0.9em;}
#address p span {color: #000;}


#CentreColumn ul#contactOptionsList li {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 1.5em;
	margin: 1em;
	padding-left: 1px;
}

/* --- FORM --- */

form {
	margin: 0px 10px 20px 10px;
	padding: 0px 10px 0 10px;
	overflow: hidden;
	width: 410px;
}
.clearAll {
	clear:both;
	height:0;
}

form label, form p {	
	line-height: 2.3em;
	margin: 2em 0;
	padding: 0;
}
form p {font-size: 1em;}

form input, form textarea {
	float: right;
	margin: -1px 0 0 0;
	*margin: -23px 0 0 0;
	padding: 0 0.5em;
	width: 300px;
	resize: none; /* safari */
}
form input {height: 1.5em;}
form textarea {height: auto; overflow:auto;}


form input.submitbutton {
	float: right;
	margin: 1em 0 0 0;
	width: 100px;
	height: 2.5em;
	font-weight: bold;
	clear: both;
	border: 2px solid #1a688f;
}
form input.submitbutton:active, form input.submitbutton:focus, form input.submitbutton:hover {
	background-color: #F241D7!important;
	color: #fff;
	border: 2px solid #000;
}


/*  Checkboxes  */

form#contactform #checkboxes {
	width: 80%;
	padding-left: 10em;
}

form#contactform #checkboxes label {
	width: 10em;
	font-style: italic;
	float:left;
	clear: left;
	line-height: 1em;
	margin: 1em;
}

form#contactform #checkboxes input {
	width: auto;
	float: left;
	margin: 1em 0 0 0;
	border: 0;
	padding: 0;
	outline: 0;
	background: none!important;
}

/* Radio buttons */

form div.radios p {
	font-weight: bold;
	margin: 2em 0 0 0;
}

form div.radios label {
	font-weight: normal;
	float: none;
}

form div.radios input{
	float: none;
	padding: 0;
	margin: 0.5em;
	width: auto;
	height: auto;
	vertical-align: middle;
	background: none!important;
	border: 0;
}

form#compform p#dontcontact label {display: none;}
form#compform p#dontcontact input {
	float: none;
	width: auto;
	height: auto;
	margin: 0 0.5em;
	padding: 0;
	vertical-align: middle;
	background: none!important;
	border: 0;
}


/* Sitemap */

#CentreColumn ul#sitemap {margin-right: 10px;}

#CentreColumn ul#sitemap li {
	list-style: square outside url("../images/page_go.gif");
	position: relative;
	top: -2px;
	margin-right: 0;
}
#CentreColumn ul#sitemap li a {position: relative; top: -2px;}

#CentreColumn ul#sitemap li ul li a {font-weight:normal; font-size:0.9em;}


/* Resources */

#CentreColumn.resources ul li {
	list-style: square outside url("../images/page_world.gif");
	position: relative;
	top: -2px;
}
#CentreColumn.resources ul li a {position: relative; top: -2px;}

/* Competition */

ol#competition-terms {
	font-weight: normal;

}

ol#competition-terms li {
	font-size: 90%;
	color: #333;
	margin: 0.5em 2em 0.5em 0;
	font-weight: normal;
}

ol#competition-terms li ol {
	margin: 0.5em 0em;
}

ol#competition-terms li ol li {
	list-style-type: lower-roman;
	color: #333;
	font-size: inherit;
	font-weight: normal;
}



ul#sitemap li span {
	font-weight: normal;
	margin-left: 1em;
	font-size: 90%;
}