/*************************************************************************
	Ovarian Cancer Action: http://www.ovarian.org.uk/
	Developed by Electric Putty Ltd. <rob@electricputty.co.uk>

	MODULE: 	global.css
	PURPOSE:	all global rules for site
*************************************************************************/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* Auto float clearing
*************************************************************************/
.group:before,
.group:after { content: ""; display: table; }
.group:after { clear: both; }

/* hasLayout fix for < IE8 */
.lt-ie8 .group { zoom: 1; }

/* Apply a natural box layout model to all elements [http://paulirish.com/2012/box-sizing-border-box-ftw/]
/* Border-box polyfill for IE 6/7: [https://github.com/Schepp/box-sizing-polyfill#readme]
*************************************************************************/
*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(../site_scripts/boxsizing.htc);
}

/* Custom fonts
*************************************************************************/
@font-face {
	font-family: 'action';
	src: url('../site_fonts/action-light-webfont.eot');
	src: url('../site_fonts/action-light-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../site_fonts/action-light-webfont.woff') format('woff'),
	     url('../site_fonts/action-light-webfont.ttf') format('truetype'),
	     url('../site_fonts/action-light-webfont.svg#actionlight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../site_fonts/Raleway-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../site_fonts/Raleway-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('../site_fonts/Raleway-SemiBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../site_fonts/Raleway-SemiBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
	font-family: 'oca-icons';
	src: url('../site_fonts/oca-icons.eot');
	src: url('../site_fonts/oca-icons.eot?#iefix') format('embedded-opentype'),
	     url('../site_fonts/oca-icons.woff') format('woff'),
	     url('../site_fonts/oca-icons.ttf') format('truetype'),
	     url('../site_fonts/oca-icons.svg#oca-icons') format('svg');
	font-weight: normal;
	font-style: normal;
}

.action { font-family: 'action', "Century Gothic", Arial, sans-serif; }
.tex { font-family: 'Raleway', "Century Gothic", Arial, sans-serif; }

/* General Rules and classes
*************************************************************************/
html { background: #fff; font: normal 62.5%/1.4 "Raleway","Century Gothic",Arial,sans-serif; color: #666; }
body { line-height: 1.4; }
a {
	color: #0099A6;
	font-weight: normal;
	text-decoration: none;
	background: transparent;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

a:hover, a:focus, a:active { color: #8e1b73; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; text-decoration: underline; }

a img:hover { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; }

h1, .h1 { font-family: "action","Century Gothic","Arial",sans-serif; }

h1, .h1 { font-size: 54px; font-size: 5.4rem; line-height: 1.1; color: #00a8b5; }
h2, .h2 { font-size: 30px; font-size: 3.0rem; }
h3, .h3 { font-size: 22px; font-size: 2.2rem; }
h4, .h4 { font-size: 18px; font-size: 1.8rem; font-weight: bold; }
h5, .h5 { font-size: 15px; font-size: 1.5rem; font-weight: bold; }

p { font-size: 15px; font-size: 1.5rem; }

strong { font-weight: bold; }
em { font-style: italic; }

img { vertical-align: bottom; max-width: 100%; }

/* Super classes */
.big { font-size: 18px; font-size: 1.8rem; }
.caps { text-transform: uppercase; }
.sent { text-transform: capitalize; }
.hide { display: none; }
.last { margin-right: 0 !important; }
.list-clear { clear: both; }
.screen-reader { display: block !important; left: -9999px !important; position: absolute !important; top: -9999px !important; }

/* Accessibility */
.skipto { position: absolute; left: -999em; }
.accessible-offscreen { position:absolute; left:-10000em; }

/* Site setup
/*
*************************************************************************/
.site-wrapper { background: #fff; min-width: 320px; max-width: 1200px; margin: 0 auto; padding: 13px 15px 0; }
.lt-ie8 .site-wrapper { min-width:960px; }

/* Colours */
.bg-grey { background-color: #ebebeb; }
.grey { color: #ebebeb; }

.bg-purple { background-color: #8e1b73; }
	.bg-purple a { color: #fff; }
.purple { color: #8e1b73; }

.bg-teal { background-color: #00a8b6; }
	.bg-teal a { color: #fff; }
.teal { color: #00a8b6 }

.bg-teal-med { background-color: #008193; }
	.bg-teal-med a { color: #fff; }
.teal-med { color: #008193; }

.bg-teal-dark { background-color: #005c6f; }
	.bg-teal-dark a { color: #fff; }
.teal-dark { color: #005c6f; }

.bg-teal-light { background-color: #EDF9FA; }
.teal-light { color: #EDF9FA; }

/* Components
/*
*************************************************************************/
/* Form styles
*************************************************************************/
form { }

/* Composer forms */
.ff_composer { margin-bottom: 20px; }

/* Form intro */
.form-intro { color: #003399; }

/* Input rows */
form .field_wrap { clear: both; }

/* Labels */
form label, form .label { cursor: pointer; margin: 0 0 4px; font-size: 15px; font-size: 1.5rem;  }
	/* Text labels */
	form .field-label--text { display: block; font-weight: bold; }

	/* Input type text */
	form .input-text, form .input-textarea { width: 50%; margin: 0; border: 1px solid #aaa; padding: 6px 10px; }
		form .input-text:focus, form .input-textarea:focus { border: 1px solid #ddd; }

	/* Bottom margins on elements */
	form .input-text, form .input-textarea, form select, .form-para, .field-label--checkbox { margin-bottom: 12px; }

	/* Required fields */
	.ff_composer .required_item { margin-left: 4px; color:red; }

	/* radio list UL */
	form.ff_composer ul { margin: 0 0 12px 0; }
		form.ff_composer ul li { list-style: none; }

	/* Checkboxes */
	.ff_composer .field-label--checkbox { display: inline-block; }

	/* Text */
	.form-para { font-size: 12.5px; font-size: 1.25rem; }

	/* Form submit */
	form .button { cursor: pointer; }
		.ff_composer .button { font-size: 15px; font-size: 1.5rem; margin-top: 10px; }

/* Buttons
*************************************************************************/
.button {
	font-size: 14px;
	font-size: 1.4rem;
	background: #8e1b73;
	color: #fff;
	border: none;
	margin: 0;
	padding: 0 7px;
	line-height: 30px;
	display: block;
	cursor: pointer;
	position: relative;
	overflow: visible;
	font-family: 'Raleway', "Century Gothic", Arial, sans-serif;
	text-decoration: none;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
	.button:hover { background: #00a8b6; color: #fff; }

	.button .arrow {
		content: "";
		border-color: transparent #e535b4;
		border-style: solid;
		border-width: 0.35em 0 0.35em 0.45em;
		display: inline-block;
		height: 0;
		width: 0;
	}

	/* link specific */
	a.button { text-decoration: none; display: inline-block; color: #fff; }

	/* Text only button (inherits .button) */
	.button-text { color: #00a8b6; background: transparent; line-height: 1; padding: 0; font-size: 16px; font-size: 1.6rem; }
		.button-text:hover { background: transparent; color: #8e1b73; text-decoration: underline; }

	/* Button with circle icon */
		.button-arrow .icon-circle {
			display: inline-block;
			color: #FC3AC6;
			position: relative;
			top: 2px;
			margin-right: 5px;
			font-size:20px;
		}
			/* Circle arrow */
			.button-arrow .icon-circle span {
				content: "";
				border-style: solid;
				border-color: transparent transparent transparent #fff;
				border-width: 5px 0 5px 7px;
				left: 6px;
				top: 5px;
				display: block;
				position: absolute;
				height: 0;
				width: 0;
				outline: 0;
			}

		/* Large button with arrow (Used to be used for donate) */
		.button-arrow--large { margin-bottom: 20px; font-size: 22px; font-size: 2.2rem; width: 100%; padding: 5px 10px 7px; }
			.button-arrow--large .icon-circle { font-size: 26px; margin-right: 13px; top: 3px; }
				.button-arrow--large .icon-circle span { border-width: 6px 0 6px 8px; left: 7px; top: 6px; }

		/* Rounded donate button (Pink!) */
		.button-arrow--rounded { background: #e535b4; }

		@media only screen and (min-width: 855px) {
			.button-arrow--rounded {
				border-radius: 25px;
				margin-bottom: 20px;
				font-size: 22px;
				font-size: 2.2rem;
				width: 100%;
				padding: 7px 15px 9px;
			}
				.button-arrow--rounded .icon-circle { color: #8e1b73; font-size: 26px; margin-right: 13px; top: 3px; }
					.button-arrow--rounded .icon-circle span { border-width: 6px 0 6px 8px; left: 8px; top: 7px; }
		}



/* Arrow list
 * This is either applied straight to a UL, or a parent element like on
 * a box--info-card on a landing page.
*************************************************************************/
ul.arrow-list,
.arrow-list ul { font-size: 13px; font-size: 1.3rem; line-height: 1.4; margin-bottom: 12px; }
	.arrow-list ul li,
	.arrow-list ul span,
	ul.arrow-list li,
	ul.arrow-left span { padding: 0 0 0 1em; }
	.arrow-list ul span,
	ul.arrow-left span { display:inline-block; padding-left:0; }

		/* Here state */
		.arrow-list ul .here > a,
		ul.arrow-list .here > a { font-weight: bold; }

	/* List bullets */
	.arrow-list ul li:before,
	.arrow-left ul span:before,
	ul.arrow-list li:before,
	ul.arrow-left span:before {
		content: "";
		border-color: transparent #00a8b6;
		border-style: solid;
		border-width: 0.35em 0 0.35em 0.45em;
		display: block;
		height: 0;
		width: 0;
		left: -1em;
		top: 1em;
		position: relative;
	}
	.arrow-left ul span:before,
	ul.arrow-left span:before { left:0; top:0; }

/* Icons
*************************************************************************/
.icon {
	font-family: 'oca-icons';
	font-weight: normal;
	font-style: normal;
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
	.icon:hover { text-decoration: none; }

.icon-facebook:before { content: "\e600"; }
.icon-google-plus:before { content: "\e601"; }
.icon-twitter:before { content: "\e602"; }
.icon-youtube:before { content: "\e603"; }
.icon-search:before { content: "\e604"; }
.icon-circle:before { content: "\e605"; }
.icon-rss:before { content: "\e606"; }
.icon-pinterest:before { content: "\e607"; }


/* Responsive media container: http://avexdesigns.com/responsive-youtube-embed/
*************************************************************************/
.media-container { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; }
	.media-container iframe, .media-container object, .media-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Boxes, used for landing, homepage and featurebox
*************************************************************************/
.box { padding: 10px 12px; margin-bottom: 20px; }
	/* Bold box heading */
	.box__heading { font-weight: bold;  }
	/* Alternate heading: .large text */
	.box__lg-text { }

	/* Box list items */
	.box .arrow-list li { font-size: 15px; font-size: 1.5rem; }

	/* Editorial box link override */
	.box.editorial a { color: #00a8b6; }
		.box.editorial a:hover { color: #8e1b73; }

	/* Box with a picture and a border
	***********************************/
	.box--picture { border: 1px solid #cccccc; padding: 0; }
		/* Style the image (make sure it streches) */
		.box--picture__img { width: 100%; }
		/* Move the .box padding from parent to child (Image has no padding) */
		.box--picture__info { padding: 10px 12px; }
			/* Re-set the .box__heading class for picture boxes */
			.box--picture .box__heading { color: #8e1b73; font-size: 15px; font-size: 1.5rem; margin-bottom: 8px; }
			/* Change the text colour */
			.box--picture__info p { color: #666; margin-bottom: 8px; }

			.box--picture__info ul li { font-size: 15px; font-size: 1.5rem; list-style-type: disc; margin-left: 20px;}

			/* Meta information */
			.box--picture__meta { margin: -8px 0 8px; }
				.box--picture__meta p { margin: 0; font-size: 13px; font-size: 1.3rem; }


	/* Featurebox with a background image (uses .editorial)
	***********************************/
	.box--fbox {  }
		/* Override editorial p line height */
		.box.box--fbox p { line-height: 1.4; }

	/* Featurebox with a background image (uses .editorial)
	***********************************/
	.box--fbox-img {  }

		/* Teal innerwrap */
		.box--fbox-img .box__innerwrap { padding: 10px 12px; color: #fff; margin-top: 100px; }
			/* Highlight links so that they are obvious */
			.box--fbox-img .box__innerwrap a { text-decoration: underline; font-weight: bold; color: #fff; }

	/* how your support helps featurebox (used on product listing)
	***********************************/
	.box--fbox-support { background: url('../site_images/bg-fbox-smilingwomen.jpg') no-repeat left top; }
		.box--fbox-support a { padding: 0 0 10px; font-weight: bold; color: #fff; display: block; }
			.box.box--fbox-support a p { font-size: 25px; font-size: 2.5rem; line-height: 1.2; margin-bottom: 10px; }


/* Box listing component (with listing styles)
*************************************************************************/
.box-list { margin: 0 0 15px }

	/* Add equal margin to top and bottom */
	.box-list .box { margin: 15px 0; }

	/* Tweak to hover state for a */
	.box-list .box a:hover { text-decoration: none; }
		.box-list .box a:hover h3 { text-decoration: underline; }

	@media only screen and (min-width: 760px) {
		/* This is a UL, use negative margin to remove L+R margin for boxes */
		.box-list { margin-left: -15px; margin-right: -15px; }

			/* Box wrap (each LI if in a list) */
			.box-list__box-wrap { display: inline-block; vertical-align: top;  }

				/* Column list width */
				.box-list--2col .box-list__box-wrap { width: 50%; }
				/* 2 cols at lower res */
				.box-list--3col .box-list__box-wrap { width: 50%; }

			/* Add margin to all four sides */
			.box-list .box { margin: 15px; min-height: 110px; }
	}

	/* 3 col actually becomes 3 col here */
	@media only screen and (min-width: 1100px) {
		.box-list--3col .box-list__box-wrap { width: 33.33%; }
	}


/* Listing
*************************************************************************/
/* Lists of text or text with image, used for news/event listing and more */
.item-list {  }

	/* List items */
	.item { border-top: 1px solid #ccc; padding: 10px 0 15px; }
		.item__img { float: right; margin: 0 0 10px 25px; display: block; }
		.item__heading { font-size: 18px; font-size: 1.8rem; font-family: 'Raleway', "Century Gothic", Arial, sans-serif; margin-bottom: 8px; }
		.item__meta { font-weight: bold; margin: -6px 0 8px; }
		.item p {  }

	/* List divider */
	.item--divider { padding: 10px 0 14px; }
		.item--divider .item__heading { margin: 0; font-weight: bold; line-height: 1; }

	.item-list--compact { }
		/* List items */
		.item-list--compact .item { }
			.item-list--compact .item__img { }
			.item-list--compact .item__heading { font-weight: bold; font-size: 14px; font-size: 1.4rem; }
			.item-list--compact .item__heading a { font-weight: bold; }
			.item-list--compact .item__meta { font-weight: normal; }
			.item-list--compact .item p {  }

	.box__heading + .item-list--compact {
		margin-top: 15px;
	}


/* Paging
*************************************************************************/
.paging { border-top: 1px solid #ccc; padding: 10px 0; }

	/* Left side, count and select */
	.paging__left { float: left; }
		.paging__left select { margin-left: 10px; }

	/* Right side, prev/next links */
	.paging__right { float: right; }
		/* Make the non link text lighter */
		.paging__right p { color: #bbb; }

	/* ORDER BY
	**************/
	.paging__left--orderby p, .paging__left--orderby form { display: inline-block; }


/* Filtering
*************************************************************************/
.filter-desc { margin-bottom: 16px; }

/* Mobile only filter area */
.mobile-nav-filter { border-top: 1px solid #ccc; }
	.mobile-nav-filter__heading { margin: 10px 0 8px; }
	.mobile-nav-filter select { display: block; margin: 0 0 20px; }

@media only screen and (min-width: 855px) {
	.mobile-nav-filter { display: none; }
}


/* Tab switcher
*************************************************************************/
.tab-switcher {}

	/* tabs - switch links */
	.tab-switcher .tabs { display: none; }

		@media only screen and (min-width: 855px) {
			.tab-switcher .tabs { display: block; }
		}

		.tab-switcher .tabs li { display:inline-block; vertical-align:top; }

			.tab-switcher .tabs li a {
				display:block;
				min-height:60px;
				padding:5px;
				background:#e6c4de;
				color:#666;
				font-size:1.4em;
				border-right:2px solid #fff;
			}
				.tab-switcher .tabs li:last-child a { border-right:none; }
				.tab-switcher .tabs li a:hover, .tab-switcher .tabs li.here a { background:#8E1B73; color:#fff; }

			.tab-switcher .tabs-two li { width:50%; }
			.tab-switcher .tabs-three li { width:33.33%; }
			.tab-switcher .tabs-four li { width:25%; }
			.tab-switcher .tabs-five li { width:20%; }


	/* tab details - content */
	.tab-switcher .details {}
		.tab-switcher .tab { border-top:2px solid #8E1B73; padding-top:20px; margin-top:20px; }
		.tab-switcher .details-list { border-bottom:1px solid #ccc; padding-bottom:20px; margin-bottom:20px; }

		@media only screen and (min-width: 855px) {
			.tab-switcher .mobile-tab-title { display:none; }
			.tab-switcher .tab { border:1px solid #8E1B73; padding:20px; margin:0 0 40px 0; }
			.tab-switcher .hide-tab { display:none; }
		}


/* Details (definition) list (used on Event detail)
*************************************************************************/
.details-list { font-size:1.4em; }
	.details-list dt { display:inline-block; width:50%; font-weight:bold; margin-bottom:0.5em; }
	.details-list dd { display:inline-block; }

	/* Link colour */
	.details-list a { color: #8E1B73; }


/* RSS link
*************************************************************************/
.rss-link { margin-bottom: 20px; display: block; }
	.rss-link .icon-rss { font-size: 24px; float: left; margin-right: 10px; }
	.rss-link p { float: left; line-height: 24px; }


/* Header area
/*
*************************************************************************/
.site-header { border-bottom: 1px solid #c6cece; margin: 0 -15px; padding: 0 0 12px; }

	@media only screen and (min-width: 855px) {
		.site-header { margin: 0; border: none; }
	}

	/* Site logo */
	.site-logo { float: left; width: 100px; margin-left: 20px; }
		.site-logo a img:hover { filter: none; -ms-filter: none; }

		@media only screen and (min-width: 380px) {
			.site-logo { width: 130px; }
		}

		@media only screen and (min-width: 855px) {
			.site-logo { margin: 30px 0 0 0; width: 305px; }
		}

	/* Header links */
	.header-links { float: right; margin-right: 15px; }

		@media only screen and (min-width: 855px) {
			.header-links { margin: 0; }
		}

		.nav-top { float: left; }
			/* Site search
			****************/
			.site-search-wrap { position: relative; z-index: 8000; }

			/* Search icon (mobile) */
			.link-search {
				color: #008193;
				font-size: 26px;
				text-align: center;
				line-height: 30px;
				width: 40px;
				height: 30px;
				margin-left: 3px;
				background: #ebebeb;
				display: block;
				cursor: pointer;
				transition: background-color .2s ease-in-out;
			}
				.link-search:hover, .link-search-open { background: #d4d4d4; }

				@media only screen and (min-width: 855px) {
					.link-search { display: none; }
				}

			/* Hide the search input by default (open it via JS) */
			#site-search { display: none; background: #d4d4d4; padding: 8px; position: absolute; right: -108px; }
				#site-search .input-text { width: 250px; border-color: #eee; }
				#site-search .button-text { margin: 6px 0 0; padding: 4px 0; float: right; }

				@media only screen and (min-width: 855px) {
					.site-search-wrap { float: left; display: block; height: 48px; }

					#site-search { display: block; background: transparent; position: static; padding: 0; }
						#site-search .input-text { border-width: 4px; width: 150px; }
						#site-search .button-text { font-size: 15px; font-size: 1.5rem; float: none; display: inline-block; margin: 0 10px 0 10px; }
				}
				@media only screen and (min-width: 960px) {
					.site-search-wrap { height: 48px; padding-top: 8px; }

						#site-search .button-text { font-size: 16px; font-size: 1.6rem; float: none; display: inline-block; margin: 0 15px 0 10px; }
				}

			/* Social links */
			.nav-top .social-links { display: none; }

				@media only screen and (min-width: 855px) {
					.nav-top .social-links {
						line-height: 1;
						float: left;
						display: block;
						font-size: 24px;
						border: 1px solid #C6CECE;
						border-width: 0 1px;
						padding: 0px 5px;
					}
						.nav-top .social-links li { display: inline-block; padding: 3px; }
				}
				@media only screen and (min-width: 960px) {
					.nav-top .social-links { font-size: 34px; padding: 0 15px; }
						.nav-top .social-links li { display: inline-block; padding: 6px; }
				}


			/* Newsletter link */
			.header-links_newsletter { display: none; }
				@media only screen and (min-width: 855px) {
					.header-links_newsletter { float: left; display: block; padding-left: 6px; font-size: 15px; font-size: 1.5rem; line-height: 32px; }
				}
				@media only screen and (min-width: 960px) {
					.header-links_newsletter { float: left; display: block; padding-left: 15px; font-size: 16px; font-size: 1.6rem; line-height: 48px; }
				}

		/* Donate button */
		.header-links .button-donate { margin-left: 3px; float: left; width: auto; }
			.header-links .button-arrow .icon { display: none; }

			@media only screen and (min-width: 855px) {
				.header-links .button-donate { margin-top: 20px; margin-bottom: 0; display: block; clear: both; float: right; }

					.header-links .button-arrow .icon { display: inline-block; }
			}

		/* Navigation menu button */
		a.link-menu {
			margin-left: 3px;
			float: left;
			position: relative;
			width: 40px;
			line-height: 30px;
			text-align: center;
			padding: 0 7px;
			font-size: 20px;
			font-size: 2.2rem;
			background-color: #008193;
			color: #fff;
		}
			a.link-menu:hover, a.link-menu-open { background: #00a8b6; text-decoration: none; }

		.link-menu-connect {
			display: none;
			background: #00a8b6;
			position: absolute;
			top: 100%;
			right: 0;
			width: 40px;
			height: 19px;
		}

	/* Main nav (this also has a responsive min-width trigger of 855px set in the javascript)
	*****************************************/
	.nav-main { }
		.nav-main > li { border-bottom: 1px solid #006f82; }
			.nav-main li > a { display: block; background: #00a8b6; color: #fff; font-size: 13px; font-size: 1.3rem; padding: 12px 13px; }
				.nav-main li a:hover, .nav-main li.here > a { background: #005c6f; }

		/* Desktop nav */
		/***************/
		@media only screen and (min-width: 855px) {
			.nav-main { border-bottom: 1px solid #c6cece; }
				.nav-main > li { float: left; border: none; text-align: center; }
					.nav-main li > a { background: transparent; color: #454545; font-size: 15px; font-size: 1.5rem; padding: 12px 5px; }
						.nav-main li > a:hover, .nav-main li.here > a, .nav-main li.parent-here > a { color: #AF1C86; background: transparent; }

			/* nav widths */
			#nav-about-ovarian-cancer.first { width: 14.28%; }
			#nav-fundraising-and-events { width: 14.28%; }
			#nav-our-research { width: 14.28%; }
			#nav-your-stories { width: 14.28%; }
			#nav-news-and-blogs,
			#nav-news-and-campaigning { width: 14.28%; }
			#nav-our-campaigns,
			#nav-im-a-health-professional { width: 14.28%; }
			#nav-about-us.last { width: 14.28%; }
		}

		@media only screen and (min-width: 950px) {
			/* nav widths */
			#nav-about-ovarian-cancer.first { width: 18.56%; }
			#nav-fundraising-and-events { width: 20.52%; }
			#nav-our-research { width: 12.39%; }
			#nav-your-stories { width: 11.12%; }
			#nav-news-and-campaigning { width: 12.56%; }
			#nav-our-campaigns,
			#nav-im-a-health-professional { width: 14.36%; }
			#nav-about-us.last { width: 9.67%; }
		}

		@media only screen and (min-width: 1025px) {
			.nav-main li > a { font-size: 16px; font-size: 1.6rem; }
		}

		/* Second level (only shown in mobile) */
		.nav-main li > ul { display: none; }
			.nav-main li > ul li { border-top: 1px solid #005569; }
				.nav-main li > ul li a { background: #008193; padding: 12px 20px; }

				.nav-main > li.second-level-open > ul , .nav-main li li.second-level-open ul { display: block; }

		/* Second level indicator */
		.nav-main .more {
			position: relative;
			float: right;
			width: 40px;
			color: #fff;
			cursor: pointer;
			padding: 12px 15px;
			font-size: 13px;
			font-size: 1.3rem;
		}
			.nav-main .more:hover { background: #005c6f; }

			/* Nav arrow */
			.nav-main .more .nav-arrow {
				content: "";
				border-style: solid;
				border-color: #fff transparent ;
				border-width: 0.35em 0.45em 0 0.35em;
				left: 16px;
				top: 16px;
				display: block;
				position: absolute;
				height: 0;
				width: 0;
				outline: 0;
			}
				/* Arrow open */
				.nav-main .second-level-open .nav-arrow {
					border-color: transparent #fff;
					border-width: 0.35em 0 0.35em 0.45em;
					top: 14px;
					left: 18px;
				}

		/* Mobile only third level navigation (Link list in page) */
		.mobile-nav-extended { padding: 12px 13px 0; }
			.mobile-nav-extended h2 { font-weight: bold; color: #666; font-size: 13px; font-size: 1.3rem; }
			/* remove bottom margin from this .arrow-list as we add padding in .body-area */
			.mobile-nav-extended .arrow-list { margin-bottom: 0; }

			/* Hide this from desktop */
			@media only screen and (min-width: 855px) {
				.mobile-nav-extended { display: none; }
			}


/* Footer area
/*
*************************************************************************/
.site-footer { border-top: 1px solid #c5cfce; margin: 15px -15px 0; padding: 13px 15px; }

	/* Left side text */
	.site-footer__left { }
		.site-footer p, .site-footer__nav li { font-size: 12px; font-size: 1.2rem; }
		.site-footer p, .site-footer__nav ul { margin-bottom: 6px; }
		/* FSB logo */
		p.site-footer__fsb { height: 50px; padding: 18px 0 0 60px; background: url('../site_images/logo-fsb.png') no-repeat left top; margin-bottom: 15px; }
		/* Footer nav */
		.site-footer__nav ul { }
			.site-footer__nav li { display: inline-block; }

	/* Social Links */
	.site-footer .social-links { clear: both; font-size: 34px; margin: 0 auto; text-align: center; }
		.site-footer .social-links li { display: inline-block; padding: 15px 6px; }

	/* nominet award */
	.award { display: block; width: 163px; text-align: center; margin: 0 auto;}

	/* Desktop responsive */
	@media only screen and (min-width: 855px) {
		.site-footer { margin: 15px 0 0; padding: 13px 0; }

			.site-footer__left { float: left; width: 50%; }
			.site-footer .social-links { float: right; margin: 0 0 10px 0; width: auto; clear: none; }
				.site-footer .social-links li { padding: 0 0 0 12px; }
				.site-footer .social-links:first-child li { padding-left: 0; }

		.award {float: right; clear: right;}
	}



/* Main content area
/*
*************************************************************************/
/* Layout specific rules
************************/
.body-area { margin-top: 25px; }

/* Hide non-mobile columns */
.col1 { display: none; }
.col3--inner { display: none; }

	@media only screen and (min-width: 855px) {
		/* Remove body area margin */
		.body-area { margin-top: 0; }

		/* Show columns for desktop */
		.col1, .col2 {  display: inline; }
		.col1 { width: 20%; float: left;}
		.col2 { width: 80%; float: right; }

		/* Optional inner column, additional wrapper div required */
		.main--inner-col-wrap { width: 100%; float: left; margin-right: -230px; }
			.main--inner-col { margin-right: 230px; padding-right: 30px; }
		/* applied to secondary inner col */
		.col3--inner { float: left; display: block; width: 230px; }
	}

/* Breadcrumbs
************************/
.breadcrumbs { display: none; }

	@media only screen and (min-width: 855px) {
		.breadcrumbs { display: block; margin: 20px 0; }
			.breadcrumbs ul { font-size: 13px; font-size: 1.3rem; }
				.breadcrumbs li { float: left; padding: 0 8px 0 0; }
					.breadcrumbs li a { color: #00a8b5; padding-right: 5px; }
						.breadcrumbs li a:hover { color: #af1c86; }
				/* Here state */
				.breadcrumbs li.here { color: #333; }
	}

/* Secondary navigation
************************/
.nav-secondary { padding-right: 30px; }

	#nav-sub li { background: #F1F1F1; border-bottom: 1px solid #fff; }
		#nav-sub li a { line-height: 1.3; display: block; font-size: 15px; font-size: 1.5rem; padding: 7px 14px; }

			/* Second level */
			#nav-sub .here ul,
			#nav-sub .parent-here ul { border-top: 2px solid #fff; }

				#nav-sub .here li,
				#nav-sub .parent-here li { background: #ddd; }

					#nav-sub .here li a,
					#nav-sub .parent-here li a { padding-left: 25px; color: #007C88; }

	/* Hover, focus and here states */
	#nav-sub li a:hover,
	#nav-sub li a:focus,
	#nav-sub li.here > a, #nav-sub .parent-here ul li.here > a { background: #787878; color: #fff; }


/* Middle content
************************/
.main-wrap {  }
	.main {  }

	/* Page heading */
	.article-header { margin-bottom: 18px; }

	/* Page controls */
	.page-controls { color: #ccc; border: 1px solid #ccc; border-width: 1px 0; padding: 10px 0; margin-bottom: 20px; }

		.page-controls p { vertical-align: top; line-height: 23px; display: inline-block; }

		/* Hide the print button for mobile */
		.page-controls__print { display: none; }

		/* Social icons */
		.page-controls .icon-social { font-size: 23px; padding: 0 0 0 13px; text-decoration: none; }

		@media only screen and (min-width: 855px) {
			.page-controls__print { display: inline; }
		}

	/* Featured image */
	.img-featured { margin: 0 auto 20px; display: block; }

/* Additional content (right hand column .col3__inner) */
.additional-content {  }


/* Editorial styles (.editorial)
/*
*************************************************************************/
.editorial { }

.editorial h1, .editorial h2, .editorial h3, .editorial h4 { margin-bottom: 4px; }

.editorial h2 { font-family: 'action', "Century Gothic", Arial, sans-serif; }

.editorial p { margin-bottom: 12px; line-height: 1.7; }

.editorial a { color: #8e1b73; }
	.editorial a:hover { color: #008193; }

.editorial ul, .editorial ol { margin-bottom: 12px; margin-left: 20px; font-size: 15px; font-size: 1.5rem; }

.editorial li { list-style-position: outside; padding: 3px 0; }
	.editorial ul li { list-style: disc; }
	.editorial ol li { list-style: decimal; }

	.editorial ul ul, .editorial ol ol { font-size: 1em; }
	.editorial ul ul li { list-style: circle; }

ul.al-anchor-list { margin-bottom: 8px; }
ul.al-anchor-list li { list-style: square; padding: 1px 0; }

.editorial img { display: inline; }

	.editorial .img_left { float: left; margin: 0 15px 15px 0px; }
	.editorial .img_right { float: right; margin: 0 0px 15px 15px; }

.editorial .ed-img { display: block; margin: 15px; border: 1px solid #D6D8E2; padding: 3px; }

.editorial .standFirst { font-size: 1.4em; color: #DDB10A; }


/* Gallery styles (.page-gallery)
/*
*************************************************************************/
.page-gallery {}
	.page-gallery__title { clear: both; }
	.page-gallery__galleria { width: 100%; min-height: 450px; background: #fff; margin: 10px 0 20px; }


/* Home page styles
/*
*************************************************************************/
	/* Set some consistent header font styles for the homepage boxes */
	.body-area--home h2 { font-size: 32px; font-size: 3.2rem; line-height: 1.2; }
	.body-area--home h3 { font-size: 25px; font-size: 2.5rem; line-height: 1.1; }

	@media only screen and (min-width:855px) {
		.box-row--left  { margin-right:10%; }
		.box-row--right { margin-left:10%; }
	}

	/* box wrap - allows for scalable width boxes with fixed margins */
	.box-row .box-wrap { display:inline-block; vertical-align:top; width:100%; }

		@media only screen and (min-width:500px) {
			.box-row--2col .box-wrap { width:50%; }
			.box-row--2col .box { min-height:210px; margin:15px; position:relative; }
			.box-row--feature .box { min-height:255px; }
		}
		@media only screen and (min-width:600px) {
			.box-row--3col .box-wrap { width:33.33%; }
			.box-row--3col .box { min-height:255px; margin:15px; position:relative; }
		}

	/* different box types */
		/* boxes with partial bg image and solid colour */
		.box--bg-solid { background-position:right bottom; background-repeat:no-repeat; color:#fff; }
			.box--bg-solid a { color:#fff; }

		/* boxes with full-bleed bg image */
		.box--bg-full-bleed { background-repeat:no-repeat; background-position:center top; background-size:100% auto; padding:0; }
			.box__text-block__reversed { padding:5px 10px; }

			/* proportional padding to allow images to scale above text content */
			.box--bg-full-bleed { padding-top:50%; }
			.box-row--feature .box--bg-full-bleed { padding-top:40%; }

			/* reversed text blocks inside full-bleed box */
			@media only screen and (min-width:700px) {
				.box-row .box--bg-full-bleed { background-size:cover; padding-top:0; }
					.box__text-block { position:absolute; bottom:10px; left:10px; right:10px; }
			}

		/* boxes containing media (video) */
		.box--media { padding:0; }
			.box--media .media-container { min-height:210px; }

		/* box containing full image */
		.box--fullimage { border: 1px solid #ddd; padding: 0; }
			.box--fullimage img { display: block; }

		/* info-card boxes - image at the left/right/top */
		.box--info-card { border:1px solid #ddd; padding:10px; background:#fff; }

			.box--info-card h2, .box--info-card h3, .box--info-card h4 { color:#00a8b3; }
			.box--info-card h4, .box--info-card p { margin-bottom:10px; }
			.box--info-card ul li a { font-size: 15px; font-size: 1.5rem;}
			.box--info-card .button { display:inline-block; clear:both; float:left; line-height:1.8em; padding:2px 7px;  }

			/* info-card boxes - images */
			.box--info-card .box__img {  }
				.box--info-card .box__img--left  { margin:0 10px 10px 0; float:left; }
				.box--info-card .box__img--right { margin:0 0 10px 10px; float:right; }
				.box--info-card .box__img--top   { margin:0 0 10px 0; width:100%; height:auto; }

				@media (max-width:600px) and (min-width:500px) {
					.box--info-card .box__img--left,
					.box--info-card .box__img--right { width:100%; float:none; margin:0 0 10px 0; }
				}

			.box-row--3col .box--info-card .box__img--left,
			.box-row--3col .box--info-card .box__img--right { display:none; }

				@media only screen and (min-width:985px) {
					.box-row--3col .box--info-card .box__img--left,
					.box-row--3col .box--info-card .box__img--right { display:inherit; }
				}
			.box--info-card--list .editorial ul {

			}

	/* specific box styles */
		/* shortcuts box */
		.box--shortcuts { background-color:#00a8b6; }
			.box--shortcuts .arrow-list li:before { border-color: transparent #4edce0; }

			.box--shortcuts h2 { line-height: 1.2; }


			@media only screen and (min-width:785px) {
				.box--shortcuts { background-image:url(../site_images/home_box-bg_shortcuts.jpg); }
					.box--shortcuts h2 { margin-right:100px; }
					.box--shortcuts .arrow-list li:before { margin-right:120px; }
			}

		/* research box */
		.box--research { background-image:url(../site_images/home_box-bg_research.jpg); }
			.box--research a { color:#fff; }
			.box--research .box__text-block__reversed { background:#8d1b73; color:#fff; }
			.box--research .arrow-list li:before { border-color: transparent #e535b4; }
			.box--research .arrow-list a { color:#fff; }

		/* action box */
		.box--action { background-image:url(../site_images/bg-fbox-marathon.jpg); }
			.box--action .box__text-block__reversed { background:#fff; }
				.box--action .arrow-list { margin-bottom:0; }
					.box--action .arrow-list li:before { border-color: transparent #4fdde1; }

				.box--action h2 { background: #fff; color: #00a8b6; padding: 5px 10px 0; }

				@media only screen and (min-width:600px) {
					.box--action h2 { padding: 5px 10px; display: inline-block; margin-bottom: 2px; }
					.box--action .arrow-list { display:inline-block; vertical-align:top; width:47.5%; margin-right:2.5%; margin-bottom:12px; }
				}

		/* latest box */
		.box--latest { margin-top:30px; border:1px solid #ddd; background:#fafafa; }
			.box--latest h2 { margin-bottom:20px; }
			.box--latest h3 { color:#00a8b6; font-size: 25px; font-size: 2.5rem; }
			.box--latest .box__col--featured h3 { color:#8d1b73; line-height: 1.2; }
			.box--latest .box__col { margin-top:20px; border-top:1px solid #ddd; padding-top:10px; }
			.box--latest .box__col--featured .button {
				margin-top: 10px;
				font-size: 20px;
				padding: 2px 7px;
			}

			@media only screen and (min-width:600px) {
				.box--latest .box__col {
					display:inline-block;
					width:25%;
					vertical-align:top;
					border-left:1px solid #ddd;
					padding-left:10px;
					padding-right:10px;
					margin-top:0; border-top:none; padding-top:0; /* remove responsive styles */
				}
				.box--latest .box__col--featured { border-left:none; padding-left:0; }
			}

/* Page-specific styles
/*
*************************************************************************/

/* Event listing page
*************************************************************************/
.item-list--event {  }

	.item-list--event .item__meta p { margin-bottom: 3px; font-weight: normal; }

/* Event listing campaign pages
*************************************************************************/
.postcode-search {
	border: 1px solid #cccccc;
	margin: 15px 0;
	padding: 10px 12px;
    width: 280px;
}
	.postcode-search__input {
		display: inline-block;
		width: 150px;
		border: 1px solid #aaa;
		height: 30px;
		padding: 6px 10px;
	}
	.postcode-search__button {
		display: inline-block;
		width: 95px;
		float: right;
	}

.results-count {
	background: #EDF9FA;
}
	.results-count__text {
		color: #0099A6;
		padding: 10px 12px;
	}

/* Event Detail page
*************************************************************************/
.event-intro { margin-bottom: 25px; }
	.event-intro p { margin-bottom: 12px; line-height: 1.7; }
	.event-intro .img_right { float: right; margin: 0 0px 15px 15px; }

/* Event detail top area image */
@media (max-width:490px) {
	.event-intro .img_right { float:none; width:100%; margin:0 0 10px 0; }
}

/* A-Z Listing page
*************************************************************************/
/* Letter list */
.az-letter-list { margin-bottom: 20px; font-size: 18px; font-size: 1.8rem; }
	.az-letter-list li { display: inline-block; text-align: center; width: 52px; padding: 5px 0; border-right: 1px solid #ccc; }
		/* Here state */
		.az-letter-list li.here a { font-weight: bold; }

/* View all link */
.item__heading--az-view-all { padding-left: 5px; font-size: 12px; font-size: 1.2rem; text-transform: none; }


/* Product page
*************************************************************************/
/* Product Image */
.product-img-wrap { margin-bottom: 15px; }
	.product-img-wrap img { width: 100%; border: 1px solid #ccc; }
	.product-img-wrap p { text-align: center; font-size: 12px; font-size: 1.2rem; }

	@media only screen and (min-width: 855px) {
		.product-img-wrap { float: right; margin: 0 0 15px 15px; }
			.product-img-wrap img { width: auto; text-align: right; }
	}

/* Product meta */
.product-meta { margin-bottom: 15px; font-size: 16px; font-size: 1.6rem; }

/* Product button */
.product-button { margin: 8px 0 20px; font-size: 16px; font-size: 1.6rem; }