/*
*******************************************************************************
*	(c) NEOCO
* 
*	filename: headerfooter.css
*	purpose:  default styles for www.neoco.com
*
*******************************************************************************

$Revision: 1 $
$Date: 21 April 2010 $
$LastChangedBy: alex $
*/

/* ------------------------------------------------------- */
/* CONTENTS
--------------------
	1. MAIN STYLES
	2. LAYOUT
	3. HEADER
	4. FOOTER
*/

/* ---------------------------------------------------------- 
	1. MAIN STYLES 
-----------------------------------------------------------*/

/* .hidden - always need this, used by our javascript libraries */
/* .clearfix - add this class to clear float containers */

/* COLOURS
		pink: #FF00B3;
		yellow: #FFFF00;
		green: #B4FF2A;
		turquoise: #1AFFFF;
*/

* {
	font-family: Helvetica, Arial, "Gill Sans", Lucida, "Helvetica Narrow",  sans-serif; /* sans-serif */
}
body {  
	text-align:left;
	font-size: 11px;
	background: #fff url(../images/bg.gif) no-repeat top center;
}
p {
	font-size: 14px;
	line-height: 16px;
	font-family: Georgia, "Times New Roman", Palatino, Bookman, "New Century Schoolbook", serif; /* serif */
}
a { text-decoration: underline; color: #FF00B3; font-family: inherit; }
a:active, input:active, a:hover, input:hover { outline: none; } /*prevents dotted outline on click, keeps for tab*/
.serif { font-family: Georgia, "Times New Roman", Palatino, Bookman, "New Century Schoolbook", serif; /* serif */ }
.sans {
	font-family: Helvetica, Arial, "Gill Sans", Lucida, "Helvetica Narrow",  sans-serif; /* sans-serif */ 
	font-size: 23px;
	line-height: 32px;
	color: #000;
}
/* hide from ie on mac \*/
html {
	min-height: 100%;				
}
#flashBg {
	z-index: 1;
	position: absolute;
}
/* end hide */
body {
	min-height: 100%;
}

/* hide flash and work titles until javascript detection occurs in general.js */
object,
body.workpage div#main h2,
body.workpage div#main h3,
body.workpage div#main p.sans {
	display: none;
}


/* ---------------------------------------------------------- 
	2. LAYOUT 
-----------------------------------------------------------*/

div#wrapper {
	width: 100%;
	min-width: 960px;	
	background-color: transparent;
	overflow: hidden;
	margin: 0 auto;
	z-index: 50;
	position: relative;
}
div#header, div#main, div#footer {
	width: 100%;
	float: left;
}
div.content {
	width: 960px;	
	margin: 0 auto;
	position: relative;
}
div#main {
	padding-bottom: 100px;
	position: relative;
}
div#footer {
	background-color: #FF00B3;
	padding-bottom: 20px;
}
div#main div#transtile {
	background: url(../images/85percent-tile.png) repeat;
	padding: 30px 0;
	width: 100%;
}

/* ---------------------------------------------------------- 
	3. HEADER
-----------------------------------------------------------*/

div#header div.content {
	padding: 30px 0 52px 0;
}
div#header h1 {
	float: left;
}
div#header h1 a {
	display: block;
	width: 164px;
	height: 53px;
	background: url(../images/logo.png) no-repeat;
	text-indent: -5000px;
}
div#header ul {
	float: right;
	overflow: hidden;
}
div#header li {
	float: left;
	height: 21px;
	padding-left: 8px;
	overflow: hidden;
}
div#header li a {
	display: block;
	height: 13px;
	background: url(../images/navi.png) no-repeat;
	text-indent: -5000px;
	padding: 4px;
	overflow: hidden;
}
div#header li.home a { width: 39px; background-position: 4px 4px; }
div#header li.why a { width: 119px; background-position: -478px 4px; }
div#header li.client a { width: 56px; background-position: -49px 4px; }
div#header li.about a { width: 47px; background-position: -121px 4px; }
div#header li.work a { width: 42px; background-position: -182px 4px; }
div#header li.blog a { width: 38px; background-position: -240px 4px; }
div#header li.newsletter a { width: 88px; background-position: -293px 4px; }
div#header li.contact a { width: 62px; background-position: -397px 4px; }

body.home div#header li.home a,
div#header li.home a:hover { width: 39px; background-position: 4px -19px; background-color: #000; }
body.why div#header li.why a,
div#header li.why a:hover { width: 119px; background-position: -478px -19px; background-color: #000; }
body.clients div#header li.client a,
div#header li.client a:hover { width: 56px; background-position: -49px -19px; background-color: #000; }
body.about div#header li.about a,
div#header li.about a:hover { width: 47px; background-position: -121px -19px; background-color: #000; }
body.work_page div#header li.work a,
body.workpage div#header li.work a,
body.work div#header li.work a,
div#header li.work a:hover { width: 42px; background-position: -182px -19px; background-color: #000; }
body.search div#header li.blog a,
body.archive div#header li.blog a,
body.blog div#header li.blog a,
body.single div#header li.blog a,
div#header li.blog a:hover { width: 38px; background-position: -240px -19px; background-color: #000; }
body.newsletter div#header li.newsletter a,
div#header li.newsletter a:hover { width: 88px; background-position: -293px -19px; background-color: #000; }
body.contact div#header li.contact a,
div#header li.contact a:hover { width: 62px; background-position: -397px -19px; background-color: #000; }

body.work.learn div#header li.work a { background-position: -182px 4px; background-color: transparent; }

/* ---------------------------------------------------------- 
	4. FOOTER
-----------------------------------------------------------*/

div#footer div.columnOne {
	float: left;
	width: 350px;
	padding-top: 40px;
}
div#footer div.columnTwo {
	float: left;
	width: 204px;
	padding-top: 40px;
}
div#footer div.columnThree {
	float: right;
	width: 162px;
}
div#footer div.columnThree ul {
	float: right;
	overflow: hidden;
	width: 159px;
}
div#footer div.columnThree li {
	float: left;
	margin-right: 6px;
}
div#footer div.columnThree li.su {
	margin-right: 0px;
}
div#footer div.columnThree li.title {
	text-align: right;
	font-weight: bold;
	font-size: 13px;
	text-transform: uppercase;
	margin: 0;
	width: 100%;
	color: #fff;
	padding-top: 6px;
}
div#footer div.columnThree li a {
	display: block;
	width: 27px;
	height: 52px;
	background: url(../images/socialflags.png) no-repeat;
	text-indent: -5000px;
	overflow: hidden;
}
div#footer div.columnThree li.tw a { background-position: 0 0; }
div#footer div.columnThree li.fb a { background-position: -33px 0; }
div#footer div.columnThree li.di a { background-position: -67px 0; }
div#footer div.columnThree li.de a { background-position: -101px 0; }
div#footer div.columnThree li.su a { background-position: -134px 0; }
div#footer div.columnThree li.tw a:hover { background-position: 0px -52px; }
div#footer div.columnThree li.fb a:hover { background-position: -33px -52px; }
div#footer div.columnThree li.di a:hover { background-position: -67px -52px; }
div#footer div.columnThree li.de a:hover { background-position: -101px -52px; }
div#footer div.columnThree li.su a:hover { background-position: -134px -52px; }

div#footer div.columnTwo ul li {	
	margin-bottom: 20px;
}
div#footer div.columnTwo ul li a {	
	width: 154px;
	height: 42px;
	display: block;
	color: #fff;
	font-weight: bold;
	font-size: 13px;
	line-height: 13px;
	text-transform: uppercase;
	text-decoration: none;
	padding-left: 50px;
	padding-top: 10px;
}
div#footer div.columnTwo ul li a span {
	font-weight: bold;
	font-size: 17px;
	line-height: 19px;
	color: #000;
	text-transform: none;
	text-decoration: none;
	display: block;
}
div#footer div.columnTwo ul li.facebook a {
	background: url(../images/tag-facebook.png) no-repeat;
}
div#footer div.columnTwo ul li.twitter a {
	background: url(../images/tag-twitter.png) no-repeat;
}
div#footer div.columnTwo ul li.youtube a {
	background: url(../images/tag-youtube.png) no-repeat;
}
div#footer div.columnTwo ul li.rss a {
	background: url(../images/tag-rss.png) no-repeat;
}
div#footer div.columnTwo ul li.linked a {
	background: url(../images/tag-link.png) no-repeat;
}
div#footer div.columnTwo ul li a:hover {
	background-position: 0 -52px;
	color: #FF00B3;
}
div#footer div.columnTwo ul li a:hover span {
	color: #FF00B3;
}

div#footer div.columnOne ul {
	overflow: hidden;
}
div#footer div.columnOne ul li {	
	margin-bottom: 35px;
	padding-left: 35px;
}
div#footer div.columnOne ul li.phone {
	background: url(../images/icon-phone.png) no-repeat;
}
div#footer div.columnOne ul li.email {
	background: url(../images/icon-mail.png) no-repeat;
}
div#footer div.columnOne ul li.cuppa {
	background: url(../images/icon-tea.png) no-repeat;
}
div#footer div.columnOne ul li h5 {
	font-weight: bold;
	font-size: 13px;
	line-height: 13px;
	text-transform: uppercase;
	color: #fff;
	padding-bottom: 5px;
}
div#footer div.columnOne ul li h6 {
	font-weight: bold;
	font-size: 17px;
	line-height: 19px;
	color: #000;
}
div#footer div.columnOne ul li h6 a {
	color: #000;
}
div#footer div.columnOne ul li h6 a:hover {
	text-decoration: none;
	color: #fff;
	background-color: #000;
}
div#footer div.columnOne p a {
	font-size: 12px;
	line-height: 18px;
	color: #fff;
	font-weight: normal;
}
div#footer div.columnOne p a:hover {
	color: #000;
	text-decoration: none;
}

div#footer div#digitalby {
	width: 128px;
	height: 50px;
	background: url(../images/digitalby.png) no-repeat 0 0;
	text-indent: -5000px;
	display: block;
	float: right;
	margin-top: 117px;
	margin-left: 34px;
	position: relative;
}
div#footer p#peerindex {
	float: right;
	overflow: hidden;
	padding-top: 38px;
}
div#footer p#peerindex a {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #FFFBAE;
	background-image: url(../images/pi_icon.png);
	background-position: 6px center;
	background-repeat: no-repeat;
	border: 1px solid #FFF533;
	display: inline-block;
	font-size: 18px;
	line-height: 26px;
	font-weight: bold;
	padding: 3px 6px 3px 26px;
	text-shadow: 2px 2px 2px #FFFFFF;
	white-space: nowrap;
	color: #333;
	font-family: Helvetica, Arial, "Gill Sans", Lucida, "Helvetica Narrow",  sans-serif;
	text-decoration: none;
}
div#footer div#digitalby div {
	text-indent: 0px;
	margin-top: 0;
}
/* tooltip styling */
div#footer div.tooltip {
    display: block;
    background: url(../images/tooltip-body.png) no-repeat left bottom;
    width: 166px;
    height: 185px;
    padding: 24px 26px 46px 26px;
    position: absolute;
}
div#footer div.tooltip p {
	color: #000;
	font-size: 12px;
	line-height: 16px;
	margin-bottom: 10px;
	display: block;
}
div#footer div.tooltip h3 {
	background: url(../images/knowmore.gif) no-repeat;
	width: 200px;
	height: 52px;
	text-indent: -5000px;
}
div#footer div.tooltip h4 {
	line-height: 25px;
}
div#footer div.tooltip h4 span {
	color: #fff;
	font-size: 20px;
	line-height: 23px;
	background-color: #FF00B3;
	padding: 1px;
}
div#footer div.tooltip p.phone {
	color: #FF00B3;
	font-weight: bold;
	font-size: 17px;
	line-height: 19px;
	background: url(../images/phone-email.png) no-repeat 0 3px;
	padding-left: 32px;
	margin: 0 0 8px 0;
	font-family: Helvetica, Arial, "Gill Sans", Lucida, "Helvetica Narrow",  sans-serif; /* sans-serif */ 
}
div#footer div.tooltip p.email {
	color: #FF00B3;
	font-weight: bold;
	font-size: 17px;
	line-height: 19px;
	background: url(../images/phone-email.png) no-repeat 0 -57px;
	padding-left: 32px;
	margin: 0 0 8px 0;
	font-family: Helvetica, Arial, "Gill Sans", Lucida, "Helvetica Narrow",  sans-serif; /* sans-serif */ 
}
div#footer div.tooltip p.web {
	color: #FF00B3;
	font-weight: bold;
	font-size: 17px;
	line-height: 19px;
	background: url(../images/phone-email.png) no-repeat 0 -117px;
	padding-left: 32px;
	font-family: Helvetica, Arial, "Gill Sans", Lucida, "Helvetica Narrow",  sans-serif; /* sans-serif */ 
}
div#footer div.tooltip p span {
	display: block;
	font-weight: bold;
	color: #000;
	font-size: 13px;
	line-height: 13px;
	text-transform: uppercase;	
}
div#footer div.tooltip p a {
	color: #FF00B3;
	font-size: 14px;
}
div#footer div.tooltip p a:hover {
	background-color: #FF00B3;
	color: #fff;
	text-decoration: none;
}

/* ---------------------------------------------------------- 
	END OF CSS FILE
	When the angels from above
	fall down and spread their wings like doves
	As we walk hand in hand,
	sisters, brothers,
	we'll make it to the Promised Land
-----------------------------------------------------------*/