@charset "utf-8";
/* Main styles for the Mango website. Originally created by Rachel Radford April 2010. */

/* Mini reset */
html, body, h1, h2, h3, h4, h5, p, fieldset, #casestudylist, #social ul{
	margin:0;
	padding:0;
}
/* HTML tags */
html {
	overflow-y:scroll; /* always show scroll so pages dont jump in FF */
	background:#efefef url(/img/bg_paper.jpg);
}
body {
	text-align:center;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#717073;
	background:transparent url(/img/bg_shadow.png) no-repeat top center;
	padding-top:13px;
}
h1 {
	font-family:"Century Gothic", "Apple Gothic", sans-serif ;
	text-transform:uppercase;
	font-weight:normal;
	color:#ee531a;
	letter-spacing:-1px;
	padding-bottom:18px;
}
h2 {
	text-transform:uppercase;
	font-weight:normal;
	font-size:14px;
	color:#ee531a;
}
h3 {
	font-size:14px;
	line-height:1.5;
	font-weight:normal;
	color:#000;
}
p, li, label, input, textarea, td, th {
	font-size:14px;
	line-height:1.5;
}
p {
}
a {
	text-decoration:none;
	color:#0a60ac;
}
a:hover {
	text-decoration:underline;
}
a:visited {
	color:#476f93;
}
a img {
}
a:hover img {
}
blockquote {
}
cite {
}
legend {
	display:none;
}
fieldset {
	border:medium none;
	padding-top:12px;
}
label {
	display:block;
	padding-bottom:6px;
	color:#000;
}
textarea  {
	display:block;
	height:108px;
	width:358px;
}
td, th {
}
th, table {
}
table {
}
acronym{
	border:none;	
}
/* Container */
#container {
	width:887px;
	margin:0 auto 40px auto;
	text-align:left;
	position:relative;
	background:#f8f8f6 url(/img/mango06.jpg) no-repeat top right;
	padding:30px;
}
/* Masthead */
#logo {
	text-align:center;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:9px;
	text-transform:uppercase;
	padding-bottom:37px;
}
#logo a {
	color:#717073;
}
#logo a:hover {
	text-decoration:none;
}
#logo img {
	border:none;
	margin-right:-23px; /*to compensate for centring and the PR in the logo*/
}
#nav, #nav ul {
	list-style:none;
	background:#ee531a;
}
#nav {
	margin:0 300px 0 -48px;
	padding:0 0 0 75px;
	height:2.5em;
}
#nav li {
	float:left;
	line-height:3;
	text-transform:uppercase;
	font-size:13px;
}
#nav li li {
	float:none;
	text-transform:none;
	line-height:2;
}
#nav a, #nav li:hover li a {
	color:#FFF;
	padding:0 9px;
}
#nav li li a {
	padding:0 18px;
	display:block;
}
#nav ul {
	padding:6px 0;
	margin:0;
	height:auto;
	position:absolute;
	left:-999em;
	z-index:999;
}
#nav li:hover a {
	text-decoration:none;
	color:#f7cdbe;
}
#nav li:hover li a:hover {
	background:#d9460f;
}
#nav li:hover ul {
	left:auto;
}
#nav .selected a {
	color:#f7cdbe;
}
#nav li li {
	float:none;
}
#nav li li a {
}
#nav span {
	display:block;
	width:18px;
	height:18px;
	background:transparent url(/img/shadow-orange.gif) no-repeat top right;
	position:absolute;
	left:-18px;
	margin-top:2.5em;
}
/* Content
Classes onecol and twocol applied to the body tag allow the content div to be floated left as required.
*/
#content{
	padding:70px 0 12px 0;
}
.twocol #content {
	float:left;
	width:600px;
}
#content p {
	padding:10px 0;
}
h3+p {
	padding-top:0;
}
#content h3 {
	padding:10px 0;
	margin:0;
}
h1+p{
	color:#000;	
}
#content img, #extra img {
	border:1px solid #e3e3e3;
	padding:4px;
}
/* Extra */
#extra {
	float:right;
	width:240px;
	padding-top:111px;
}
#extra div{
	border-bottom:1px solid #e3e3e3;
	padding:12px 0;
}
#extra form div{
	padding:0;
	border:none;
}
#extra h3{
	padding-top:12px;	
}
#extra h3 a{
	color:#000;	
}
/* Footer */
#footer {
	border-top:1px solid #e3e3e3;
	text-align:center;
	clear:both;
}
#footer li, #footer p {
	font-family:Helvetica, Arial, sans-serif;
	font-size:11px;
	padding-bottom:6px;
}
#footer li {
	text-transform:uppercase;
	list-style:none;
	margin:0;
	padding:0 6px;
	display:inline;
}
#footer a {
	color:inherit;
}
#footer .photo { /*logo for vcard */
	margin-bottom:-43px;
}
/* Classes */
.hidden {
	position:absolute;
	left:-999em;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.error{
	color:#900;
	background:#FFC;
}
#extra img.vcard{
	padding:0;
	border:none;
}
/*Email signup*/
#signupForm input{
	display:block;	
}
/*the list of case studies that sometimes appears on the right */
#casestudylist, #social ul{
	list-style:none;	
}
#casestudylist li{
	padding:12px 0;	
}
#casestudylist li a{
	color:#000;	
}
/*List of press releases that can appear on the right*/
#pressreleases ol{
	list-style:none;
	margin:0;
	padding:0;
}
#pressreleases li{
	padding:0.3em 0;	
}
#pressreleases span{
	font-size:0.8em;
	display:block;
}
/*social site links*/
#social li a, #pressKitLink a{
	display:block;
	padding:3px 0 3px 40px;	
	background:no-repeat left;
	text-transform:uppercase;
	color:#ee531a;
}
#social #twitter a{
	background-image:url(/img/icon_twitter.gif);	
}
#social #facebook a{
	background-image:url(/img/icon_facebook.gif);	
}
#social #foursquare a{
	background-image:url(/img/icon_foursquare.gif);	
}
#social #flickr a{
	background-image:url(/img/icon_flickr.gif);	
}
#social #blog a{
	background-image:url(/img/icon_blog.gif);	
}
#social #rss a{
	background-image:url(/img/icon_rss.gif);	
}
#pressKitLink{
	padding:12px 0;	
}
#pressKitLink a{
	background-image:url(/img/icon_download.gif);
}
/*Call to action*/
#calltoaction a{
	display:block;
	background:#d5140b;
	color:#fff;
	padding:0.6em;
	-moz-box-shadow: 3px 3px 0px #960a0e;
	-webkit-box-shadow: 3px 3px 0px #960a0e;
	box-shadow: 3px 3px 0px #960a0e;
}
#calltoaction a:hover{
	color:#f7d4d3;
	text-decoration:none;
	background:#e3160c;
	margin:-1px 0 1px -1px;
	-moz-box-shadow: 4px 4px 0px #960a0e;
	-webkit-box-shadow: 4px 4px 0px #960a0e;
	box-shadow: 4px 4px 0px #960a0e;
}
/* JS */
.scroll-buttons{
	display:none;	
}
/*Specific colour change for The Grove client */
.the-grove-content h1{
	color:#311841;
}
