/*
—————————————
Fonts
—————————————
*/
@font-face {
	font-family:'Bliss';
		src:url('Font/blissbold.eot');
		src:url('Font/blissbold.eot?#iefix') format('embedded-opentype'),
			url('Font/blissbold.woff') format('woff'),
			url('Font/blissbold.ttf') format('truetype'),
			url('Font/blissbold.svg#Bliss') format('svg');
	font-weight:normal;
	font-style:normal;
}
::selection {
	background:#3a9fd9;
}
::-moz-selection {
	background:#3a9fd9;
}

/*
——————————————
Global
——————————————
*/
html {
	background:#fff url('/Images/bg-forest.jpg') center 144px no-repeat;
}
body {
	font:18px/20px 'Source Sans Pro', sans-serif;
	color:#222;
}
a {
	color:inherit;
	text-decoration:none;
}
strong {
	font-weight:bold;
}
em {
	font-style:italic;
}
img {
	-ms-interpolation-mode:bicubic;
}
p {
	margin-bottom:0.8em;
}
p.standfirst {
	font-size:18px;
	line-height:20px;
	margin-bottom:1.6em;
}
h2 {
	text-transform:uppercase;
	margin-bottom:0.5em;
	font:40px/1 Bliss;
}
h3 {
	font-weight:bold;
	margin-bottom:1em;
}

/*
——————————————
Header
——————————————
*/
#header-wrapper {
	background:#000;
	margin-bottom:6px;
}
#header {
	width:960px;
	height:138px;
	margin:auto;
	position:relative;
	background:url('/Images/bg-header2.jpg') 190px top no-repeat;
}
#logo {
	position:absolute;
	top:0; left:0;
}
#logo img {
	width:232px !important;
	height:138px !important;
}
h1 strong {
	display:block;
	position:absolute;
	top:28px; right:40px;
	width:270px;
	height:83px;
	background:url('/Images/logo-stpauls.png') no-repeat;
}
h1 span {
	display:none;
}

/*
——————————————
Content
——————————————
*/
#content {
	width:960px;
	margin:auto;
	padding-bottom:6px;
}
#intro, #success {
	padding:13px 50px 13px 200px;
	xheight:84px;
	font-size:19px;
	line-height:21px;
	margin-bottom:6px;
	background:url('/Images/bg-intro.jpg') -220px top no-repeat;
	background-size:contain;
}
#intro strong, #success strong {
	text-transform:uppercase;
}
#success small {
	font-size:0.8em;
	color:#fc0;
}

/*
——————————————
Tiles
——————————————
*/
#tiles {
	width:966px;
	margin-right:-6px;
}
#tiles li {
	float:left;
	margin:0 6px 6px 0;
}
#tiles a {
	display:block;
	width:316px !important;
	height:168px !important;
	background:#ddd;
	position:relative;
}
#tiles img {
	width:316px !important;
	height:168px !important;
}
#tiles strong {
	display:block;
	width:100%;
	height:25px;
	text-align:center;
	position:absolute;
	bottom:0; left:0;
	color:#fff;
	background:rgba(0,0,0,0.4);
	font-size:16px;
	font-weight:normal;
	line-height:25px;
	text-shadow:1px 1px 1px rgba(0,0,0,0.7);
}
#tiles span.icon {
	display:block;
	width:48px;
	height:48px;
	position:absolute;
	top:56px; left:126px;
	border:8px solid rgba(255,255,255,0);
	border-radius:32px;
	transition:border-color 200ms linear;
}
#tiles span.play {
	background:url('/Images/icon-play.png') no-repeat;
}
#tiles span.read {
	background:url('/Images/icon-read.png') no-repeat;
}
#tiles a:hover span.icon {
	border-color:rgba(255,255,255,0.6);
}

/*
——————————————
Stories
——————————————
*/
#stories {
	display:none;
	float:left;
}
#stories .story {
	display:none;
	width:578px;
	position:relative;
	font-size:16px;
	line-height:18px;
	padding:30px;
}
#stories img {
	display:block;
	width:180px;
	height:120px;
	background:#ddd;
	position:absolute;
	top:0; left:0;
}
#stories img.retina {
	display:none;
}
#stories li.reflection {
	position:relative;
	padding-left:195px;
	margin-bottom:40px;
}
#stories li.reflection h3 {
	font-size:16px;
	line-height:16px;
	background:#fc0 url('/Images/bg-open-day.png') repeat-y;
	background-size:383px 1px;
	border-left:5px solid #000;
	color:#fff;
	text-transform:uppercase;
	font-weight:normal;
	padding:5px 8px;
}

/*
——————————————
Banners
——————————————
*/
#open-day {
	height:66px;
	background:#fc0 url('/Images/bg-open-day.png') repeat-y;
	margin-bottom:6px;
	text-align:center;
	color:#fff;
	text-shadow:-2px 2px 3px rgba(0,0,0,0.25);
	text-transform:uppercase;
	font:38px/66px Bliss;
	clear:both;
	overflow:hidden;
}
#open-day br {
	display:none;
}
#open-day strong {
	margin-right:6px;
}
#open-day img,
#extra-info img {
	display:inline-block;
	width:151px;
	height:34px;
	margin-left:15px;
	position:relative;
	top:3px;
}
#extra-info {
	height:66px;
	color:#fff;
	background:#1b1919; 
	margin-bottom:6px;
	text-align:center;
	font-size:20px;
	line-height:66px;
}
#extra-info img {
	top:10px;
}
#website {
	height:44px;
	background:#f4a718 url('/Images/bg-website.png') repeat-y;
	text-align:center;
	color:#111;
	line-height:44px;
	clear:both;
}
#website a {
	color:#fff;
	font-weight:bold;
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	margin-left:5px;
}

/*
——————————————
Story view
——————————————
*/
#content.view-story #intro {
	display:none;
}
#content.view-story #stories {
	display:block;
}
#content.view-story #tiles {
	float:right;
	width:316px;
	margin:-174px 0 0 0;
	margin:-87px 0 0 0;
}
#content.view-story #open-day {
	font-size:34px;
}
#content.view-story #open-day,
#content.view-story #extra-info {
	width:638px;
	height:81px;
	line-height:81px;
	letter-spacing:0;
	margin-bottom:6px;
}
#content.view-story #open-day img,
#content.view-story #extra-info img {
	top:8px;
	margin-left:11px;
}

/*
——————————————
Lists
——————————————
*/
ul.bullet {
	margin-bottom:1em;
}
ul.bullet li {
	padding-left:1em;
	margin-bottom:.5em;
}
ul.bullet li:before {
	display:inline-block;
	width:1em;
	content:'■';
	color:#fc0;
	font-size:.7em;
	position:relative;
	top:-.2em; left:-.4em;
	margin-left:-1em;
}

/*
——————————————
Registration
——————————————
*/
.form {
	padding-top:20px;
}
.form h3.error-title {
	color:#e93e23;
	margin-left:58px;
}
fieldset {
	float:left;
	margin-left:58px;
}
.form p {
	padding-left:130px;
	position:relative;
	margin-bottom:0.6em;
}
.form label {
	position:absolute;
	top:4px; left:0;
}
.form label span {
	font-size:0.9em;
	color:#f90;
}
.form input.text {
	border:1px solid #ccc;
	width:250px;
	border-radius:3px;
	padding:2px;
	-webkit-appearance:none;
}
.form select {
	border:1px solid #ccc;
}
.form input.error,
.form select.error {
	border-color:#e93e23;
}
.form p.checkbox,
.form p.button,
.form p.key {
	padding:0;
	margin-top:1.5em;
}
.form p.checkbox label {
	position:static;
	margin-left:4px;
}
.form p.button input {
	width:100px;
	height:34px;
	outline:none;
	-webkit-appearance:none;
	border-radius:0;
}
.form p.key {
	font-size:14px;
}
.form p.key span {
	color:#f90;
}
#success a {
	border-bottom:1px solid #ccc;
}

/*
——————————————
Scrollbar
——————————————
*/
#scroller {
	width:471px;
	padding-right:20px;
	overflow-y:scroll;
}
::-webkit-scrollbar {
    width:12px;
    border-radius:10px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius:10px;
    background:rgba(255,255,255,0.15);
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5), 0 0 10px rgba(255,255,255,0.3);
    box-shadow:inset 0 0 6px rgba(0,0,0,0.5), 0 0 10px rgba(255,255,255,0.3);
	background:#fc0;
}
::selection {
	background:#fc0;
}
::-moz-selection {
	background:#fc0;
}

/*
——————————————
Retina Images
——————————————
*/
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

	#header-wrapper {
		background-image:url('/Images/bg-header@2x.png');
		background-size:960px 208px;
	}
	h1 strong {
		background-image:url('/Images/logo-stpauls@2x.png');
		background-size:270px 83px;
	}
	#tiles span.play {
		background-image:url('/Images/icon-play@2x.png');
		background-size:48px 48px;
	}
	#tiles span.read {
		background-image:url('/Images/icon-read@2x.png');
		background-size:48px 48px;
	}
}