﻿/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

	Stylesheet for Teach First
	media: all

 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

html
{
	margin: 0;
	padding: 0;
	font-size: 100%;
	background-color: #000;
	border: none;
}

body
{
	position: relative;
	min-width: 780px;
	margin: 0 auto 3em;
	padding: 0;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 62.5%; /* base = 10px */
	color: #333;
	line-height: 1.7em;
	border: none;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	Clearing floats
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.clearfix:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix
{
	display: inline-block;
}
.clearfix
{
	display: block;
}

.clear
{
	clear: both;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	Accessibility, SEO & Print
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.accessibility
{
	position: absolute;
	top: -999em;
	left: -999em;
}

.printOnly
{
	display: none;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	Elements
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

h1
{
	margin-top: .4em;
	margin-bottom: .4em;
	font-size: 4em;
	font-weight: normal;
	line-height: .8em;
	color: #696969;
}

h2
{
	margin-top: 1em;
	margin-bottom: .5em;
	font-size: 2.4em;
	font-weight: normal;
	line-height: 1.1em;
	color: #696969;
}

h3
{
	margin-top: 1.4em;
	margin-bottom: .4em;
	font-family: "Century Gothic", Helvetica, Arial, serif;
	font-size: 1.5em;
	line-height: 1.1em;
	color: #000;
}

h4
{
	margin-top: 1.4em;
	margin-bottom: .4em;
	font-size: 1.35em;
	color: #000;
}

h5, h6
{
	font-size: 1.4em;
}

pre,
code,
kbd,
tt,
samp
{
	font-family: "Andale mono", monospace;
}

p,
ul,
ol,
dl,
table,
pre
{
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 1em;
}
.primary p,
.primary ul,
.primary ol,
.primary dl,
.primary table,
.primary pre
{
	font-size: 1.3em;
}

.primary p.caption
{
	
	margin-top: -0.4em;
	font-size: 1.2em;
	font-style: italic;
	color: #666;
}

.date,
.location
{
	color: #333;
}
	.date strong,
	.location strong
	{
		color: #999;
		text-transform: uppercase;
	}


blockquote
{
	font-style: italic;
	margin: 0 2.1em 2.1em 2.1em;
}

strong
{
	font-weight: bold;
}

a:link
{
	color: #008fc2;
	text-decoration: none;
	outline: none;
}
a:visited
{
	color: #008fc2;
	text-decoration: none;
	outline: none;
}
a:hover,
a:focus,
a:active
{
	color: #008fc2;
	text-decoration: underline;
	outline: none;
}

ul
{
	margin-left: 0;
	padding-left: 1.4em;
}

ol
{
	list-style-type: decimal;
	margin-left: 0;
	padding-left: 2.8em;
}

ul ul,
ol ol,
ol ul,
ul ol
{
	margin-bottom: 0;
}

dt
{
	font-weight: bold;
	margin-top: 2.1em;
}

table
{
	border-spacing: 0;
	border-bottom: .1em solid #666;
	border-collapse: collapse;
}
	caption
	{
		font-weight: bold;
		padding-bottom: .8em;
		font-size: 1.7em;
	}
	thead th
	{
		border-top: .1em solid #666;
		border-bottom: .3em solid #666;
		padding-top: 0;
		padding-bottom: .8em;
	}
	tbody
	{
		border-top: .3em solid #666;
	}
	tbody tr th,
	tbody tr td
	{
		border-top: .1em solid #ddd;
	}
	th, td
	{
		text-align: left;
		padding: .4em .8em .3em .3em;
	}

/* forms */
form
{
	margin: 0;
}
	fieldset
	{
		margin: 0;
		padding: 0;
		border: none;
	}
	legend
	{
		visibility: hidden;
		height: 0;
		font-size: 0;
		line-height: 0;
	}
	input,
	textarea,
	select
	{
		font-family: inherit;
		font-size: 1.4em;
		line-height: inherit;
	}
	select
	{
		background-color: #fff;
	}
	textarea
	{
		width: 99%;
		display: block;
	}
	input[type='text'],
	input[type='password'],
	textarea,
	select
	{
		padding: 0;
		border: .1em solid #ccc;
		-webkit-border-radius: .1em;
		-moz-border-radius: .1em;
		border-radius: .1em;
		outline: none;
	}
	input[type='text']:focus,
	input[type='password']:focus,
	textarea:focus,
	select:focus
	{
		border-color: #008fc2;
	}

/* Images */
img
{
	border: none;
}
img.scale
{
	width: 100%;
}

/* Media */
.mediaWrapper
{
	margin-bottom: 1.4em;
	text-align: center;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	Layout
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Section element */
.section
{
	position: relative;
	width: 96%;
	max-width: 93.4em;
	min-width: 42em;
	overflow: hidden;
	margin: 0 auto;
	padding: 0 1%;
}
* html .section
{
	width: 93.4em;
	padding: 0;
}

/* Top border (content area) */
.topBorder
{
	float: left;
	width: 65.805%;
	padding-top: 1.8em;
	border-top: 1.8em solid #fff;
}

/* Primary content container */
.primary
{
	position: relative;
	width: 74.518%;
	float: right;
	/*display: inline;*/
	margin-top: 1.8em;
}
body.frontpage .primary,
body.calendar .primary
{
	margin-top: 0;
}
.primary.full,
.primary .primary.full
{
	width: 100%;
}
	.primary .primary
	{
		width: 65.805%;
		float: left;
		margin-top: 0;
	}
	body.frontpage .primary.full .primary,
	body.calendar .primary.full .primary
	{
		width: 74.5%;
		padding-top: 0;
	}

/* Secondary content container */
.secondary
{
	width: 25.588%;
	float: left;
}
.secondary.full
{
	width: 100%;
}
	.primary .secondary
	{
		margin-bottom: 1.4em;
		width: 31.609%;
		float: right;
		color: #d3d3d3;
	}
	body.frontpage .primary.full .secondary,
	body.calendar .primary.full .secondary
	{
		width: 23.554%;
	}
	body.wideExtra .primary .secondary
	{
		margin-top: 1.8em;
	}

/* Content area layout */
.inner
{
	padding: 1.8em 1.8em 1em;
}
.primary .primary .inner
{
	background-color: #fff;
}
.primary .primary.first .inner
{
	padding-top: 3em;
}
body.frontpage .primary.full .primary .inner,
body.calendar .primary.full .primary .inner
{
	padding-top: 0;
}
body.wideExtra .inner
{
	padding: 0 1.8em 2em;
}
.primary .secondary .inner
{
	padding: 1.7em 1.9em;
	margin-bottom: 1.8em;
	color: #d3d3d3;
	background: url('../Images/backgrounds/bg-secondary-inner.png') repeat 0 0;
}
.aside .inner
{
	margin-right: 1.8em;
}

.box
{
	margin-bottom: 1em;
	padding: 1em 1em .5em;
}

/* Aside */
.aside
{
	width: 25.482%;
	float: left;
	/*display: inline;*/
	/*border-top: 1.8em solid #fff;*/
}

/* Stretched background image */
#stretchWrapper
{
	position: fixed;
	width: 100%;
	height: auto;
	left: 0;
	top: 0;
	z-index: 0;
}
* html #stretchWrapper { position: absolute; }
	#stretchWrapper img
	{
		width: 100%;
		height: auto;
	}

/* Header */
#header
{
	position: relative;
	padding: .1em 0 0 0;
}

/* Title / logo */
#title
{
	margin-top: 1.3em;
	margin-bottom: 1.1em;
}
	#title a:link,
	#title a:visited,
	#title a:active
	{
		display: block;
		width: 341px;
		height: 76px;
		overflow: hidden;
		background: url('../Images/header/tfn-logo.png') no-repeat 0 0;
	}
	#title a:hover,
	#title a:focus
	{
		background-position: 0 -76px;
	}

/* Skip links */
#skipper
{
	position: absolute;
	top: 0;
	z-index: 2;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.8em;
}
	#skipper li
	{
		position: absolute;
		top: 0;
		margin: 0;
		padding: 0;
		white-space: nowrap;
	}
	#skipper li a,
	#skipper li a:link,
	#skipper li a:visited
	{
		display: inline-block;
		position: absolute;
		top: 0;
		left: -999em;
		z-index: 1000;
		padding: .6em .8em .5em;
		font-size: 1.3em;
		text-decoration: none;
		white-space: nowrap;
		color: #66b9d6;
		background: #000;
	}
	#skipper li a:focus,
	#skipper li a:active
	{
		left: 0;
		z-index: 1000;
	}
	/* You may find on certain page layouts that the skip 
	   link is appearing underneath other elements on the 
	   page in IE7 and below. If this is the case then try 
	   (un)commenting the two statements below, and if that 
	   does not work then try increasing the z-index value 
	   above as well */
	* html #skipper li a:active { position: relative; }
	*+html #skipper li a:focus, *+html #skipper li a:active { position: relative; }
		#skipper li a strong
		{
			color: #fff;
		}
		
/* Skip targets */
.skiptarget
{
	position: absolute;
	left: -999em;
}

/* Global navigation links */
#globalNav
{
	position: absolute;
	top: -0.1em;
	right: 0;
	margin: 0;
	padding: 0;
	text-align: right;
	color: #666;
}
* html #globalNav { right: 1.3em; }
	#globalNav ul
	{
		display: block;
		margin: 0;
		padding: 0;
		z-index: 1;
	}
		#globalNav ul li
		{
			display: inline;
			font-size: 1.2em;
			line-height: 1.8em;
		}
			#globalNav ul li li
			{
				background-image: none;
				background-repeat: no-repeat;
				background-position: top left;
			}
			#globalNav ul a:link,
			#globalNav ul a:visited,
			#globalNav ul a:focus,
			#globalNav ul a:hover,
			#globalNav ul a:active
			{
				display: inline-block;
				padding: .2em .5em;
				font-weight: bold;
				white-space: nowrap;
				text-decoration: none;
				color: #fff;
			}
			#globalNav ul a:focus,
			#globalNav ul a:hover
			{
				color: #fff;
				background-color: #008FC2;
			}
			#globalNav ul a:active
			{
				color: #000;
				background-color: #008FC2;
			}
			#globalNav ul a.textSizer
			{
				padding: .2em .4em;
			}
			#globalNav ul a small
			{
				font-size: 1em;
			}
			#globalNav ul a big
			{
				line-height: 1.4em;
			}
			#globalNav label,
			#globalNav select
			{
				margin-right: .7em;
			}

/* Main (top) navigation */
#mainNav
{
	position: relative;
	width: 100%;
}
	#mainNav .inner
	{
		display: block;
		overflow: hidden;
		width: 74.518%;
		padding: 0;
		white-space: nowrap;
		color: #fff;
		border-bottom: 1.8em solid #fff;
	}
		#mainNav .inner ul
		{
			float: right;
			display: block;
			position: relative;
			margin: 0;
			padding: 0;
			list-style: none;
			z-index: 1;
		}
			#mainNav .inner ul li
			{
				float: left;
				display: block;
				margin: 0;
				padding: 0 0 0 .3em;
			}
				#mainNav .inner ul a:link,
				#mainNav .inner ul a:visited,
				#mainNav .inner ul a:focus,
				#mainNav .inner ul a:hover,
				#mainNav .inner ul a:active
				{
					display: inline-block;
					padding: .4em .7em .35em;
					font-size: 1.2em;
					font-weight: bold;
					letter-spacing: .02em;
					text-transform: uppercase;
					text-decoration: none;
					white-space: nowrap;
					color: #fff;
					background-color: #092937;
				}
				#mainNav .inner ul a:focus,
				#mainNav .inner ul a:hover
				{
					background-color: #008fc2;
				}
				#mainNav .inner ul a:active,
				#mainNav .inner ul li.selected a
				{
					color: #092937;
					background-color: #fff;
				}
				#mainNav .inner ul li.selected a:focus,
				#mainNav .inner ul li.selected a:hover
				{
					color: #008fc2;
					background-color: #fff;
				}

/* navigation (side) */
#sideNav
{
	margin-bottom: 1.4em;
	padding: 0;
}
	#sideNav h2,
	#sideNav h3
	{
		margin-top: 0;
		padding-right: 1.4em;
		padding-left: 1.4em;
	}
	/* ul */
	#sideNav ul
	{
		margin: 0;
		padding: 0 1.8em 1.4em;
		list-style: none;
		background-color: #fff;
	}
		#sideNav ul ul
		{
			padding: 0;
		}
	/* li */
	#sideNav ul li
	{
		margin: 0;
		padding: 0;
		font-size: 1.1em;
		font-weight: bold;
		text-transform: uppercase;
		line-height: 1.35em;
	}
		#sideNav li li
		{
			font-size: 1em;
		}
	/* links */
	#sideNav ul li a:link,
	#sideNav ul li a:active,
	#sideNav ul li a:visited
	{
		display: block;
		padding: .3em 0;
		color: #053d56;
		border-top: .1em solid #dbd8d8;
	}
	#sideNav ul li.first a
	{
		border-top: none;
	}
	* html #sideNav ul li a { display: inline-block; }
	#sideNav ul li a:hover,
	#sideNav ul li.selected li a:hover,
	#sideNav ul li a:focus,
	#sideNav ul li.selected li a:focus,
	#sideNav ul li.selected li.current a:hover,
	#sideNav ul li.selected li.current a:focus
	{
		text-decoration: none;
		color: #008fc2;
	}
	#sideNav ul li.current a:link,
	#sideNav ul li.current a:active,
	#sideNav ul li.current a:visited
	{
		font-weight: bold;
		color: #008fc2;
	}
		#sideNav ul li li a:link,
		#sideNav ul li li a:active,
		#sideNav ul li li a:visited
		{
			font-weight: normal;
			padding-left: 1em;
			border-top: none;
		}
			#sideNav ul li li li a:link,
			#sideNav ul li li li a:active,
			#sideNav ul li li li a:visited
			{
				font-weight: normal;
				padding-left: 2.8em;
			}
				#sideNav ul li li li li a:link,
				#sideNav ul li li li li a:active,
				#sideNav ul li li li li a:visited
				{
					font-weight: normal;
					padding-left: 4.2em;
				}
		#sideNav ul li.current li a:link,
		#sideNav ul li.current li a:active,
		#sideNav ul li.current li a:visited
		{
			font-weight: normal;
			color: #053d56;
		}
		#sideNav ul li.selected li.current a
		{
			color: #008fc2;
		}

/* Breadcrumbs */
ul.breadcrumbs
{
	position: absolute;
	top: .8em;
	left: 1.4em;
	z-index: 100;
	width: 31em;
	margin: .1em 0 0;
	padding: 0;
	font-size: 1.2em;
	line-height: 1.2em;
	color: #4f4f4f;
}
	ul.breadcrumbs li
	{
		display: inline;
	}
		ul.breadcrumbs li a:link,
		ul.breadcrumbs li a:visited
		{
			color: #4f4f4f;
		}
		ul.breadcrumbs li a:hover,
		ul.breadcrumbs li a:focus
		{
			color: #222;
		}
		ul.breadcrumbs li span
		{
			padding: 0 .2em;
		}

p.print
{
	float: right;
	margin: -1.7em 0 0;
	font-size: 1.2em;
	color: #4f4f4f;
}
body.calendar p.print
{
	margin-top: -0.5em;
}
	p.print a
	{
		padding: .2em 0 .2em 1.4em;
		color: #4f4f4f;
		background: url('../Images/icons/print.png') no-repeat 0 50%;
	}
	p.print a:link,
	p.print a:visited
	{
		color: #4f4f4f;
	}
	p.print a:hover,
	p.print a:focus
	{
		color: #222;
	}

/* Frontpage teaser box */
.teaserBox
{
	position: relative;
	height: 32em;
	line-height: 1em;
}
	.imageBox
	{
		height: 32em;
		overflow: hidden;
	}
		.imageBox img.hide
		{
			display: none;
		}

	/* Frontpage teaser text box */
	.textBox
	{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 1em 0;
		background: url('../Images/backgrounds/bg-secondary-inner.png') repeat 0 0;
	}
		.textBox p
		{
			margin-bottom: .7em;
			padding-right: 1.4em;
			padding-left: 1.4em;
			font-family: "Century Gothic", Helvetica, Arial, serif;
			font-size: 1.5em;
			line-height: 1.2em;
			color: #d3d3d3;
		}
		.textBox ul
		{
			margin: 0;
			padding: 0 1.4em .5em;
			list-style: none;
		}
			.textBox ul li
			{
				float: left;
				display: block;
				margin: 0 0 0 1.2em;
				padding: .2em 0 0 1.2em;
				font-size: 1.75em;
				line-height: 1.2em;
				list-style: none;
				color: #fff;
				background: url('../Images/icons/arrow-up-frontpage.png') no-repeat 0 50%;
			}
			.textBox ul li.first
			{
				margin-left: 0;
			}

/* Link collection */
.linkCollection
{
	margin: 0 0 1em;
}
	.linkCollection h2
	{
		margin-top: 0;
		padding: .2em .5em;
		font-size: 2.1em;
		background-color: #d2d2d2;
	}
	.linkCollection .item
	{
		float: left;
		width: 45%;
		display: inline;
		margin-top: .2em;
		margin-bottom: 1.7em;
	}
	.linkCollection .item.right
	{
		float: right;
		padding-left: 2em;
		border-left: .2em solid #dbd8d8;
	}
	.linkCollection h3
	{
		margin-top: 0;
		margin-bottom: .3em;
	}
	.linkCollection img
	{
		margin-bottom: .5em;
	}

/* Frontpage link collection */
body.frontpage .linkCollection
{
	margin: 1.4em 0;
}
	body.frontpage .linkCollection .item
	{
		float: left;
		width: 35.4%;
		display: inline;
		margin-top: .7em;
		margin-bottom: .41em;
	}
		body.frontpage .linkCollection .item .inner
		{
			margin-right: 2em;
			padding: 0 2em 0 0;
			border-right: .2em solid #dbd8d8;
		}
	body.frontpage .linkCollection .item.right
	{
		width: 29%;
		margin-right: 0;
		padding-right: 0;
		padding-left: 0;
		border: none;
	}
		body.frontpage .linkCollection .item.right .inner
		{
			margin-right: 0;
			padding-right: 0;
			border-right: none;
		}
	body.frontpage .linkCollection h2
	{
		padding: .4em .8em;
		background-color: #d2d2d2;
	}
	body.frontpage .linkCollection h3
	{
		margin-top: 0;
	}
	body.frontpage .linkCollection img
	{
		margin-bottom: .7em;
	}

/* Page listing */
.pageListing
{
	margin: 0 0 1em;
}
	.pageListing h2
	{
		margin-top: 0;
	}
	.pageListing img
	{
		float: left;
		width: 43%;
		margin-top: .2em;
		margin-bottom: 1.6em;
	}
	.pageListing h3
	{
		margin-top: 0;
		margin-bottom: .2em;
		margin-left: 48%;
		color: #666;
	}
	.pageListing p
	{
		margin-bottom: 1.4em;
		margin-left: 48%;
	}

/* Calendar event listing */
.eventListing
{
	margin: 0 0 1em;
}
	.eventListing h2
	{
		margin-top: 0;
	}
	.eventListing img
	{
		float: left;
		width: 27%;
		margin-top: .2em;
		margin-bottom: 1.6em;
	}
	.eventListing .date,
	.eventListing .location
	{
		margin: 0 0 0 30%;
	}
	.eventListing h3
	{
		margin: .3em 0 .2em 30%;
		color: #666;
	}
	.eventListing p
	{
		margin: 0 0 1.4em 30%;
	}

/* Attachments */
.attachments
{
	padding-bottom: .4em;
}
	.primary .attachments .inner,
	.primary .primary .attachments .inner
	{
		padding: 1.5em;
		background-color: #e0dede;
	}
	.attachments h2
	{
		margin-top: 0;
		margin-bottom: 0;
		padding: .2em .5em;
		font-size: 2.1em;
		background-color: #d2d2d2;
	}
	.attachments ul
	{
		margin: 0 0 1.4em;
		padding: 0;
		list-style: none;
	}
		.attachments ul li
		{
			margin-bottom: .3em;
			padding-left: 1.5em;
			margin-left: 0;
			background: url('../Images/icons/attachments-list-dot.png') no-repeat 0 .3em;
		}

/* Inner headings */
.primary .secondary .inner h2
{
	margin-top: 0;
	margin-bottom: .5em;
	font-size: 2.4em;
	color: #fff;
}

.primary .secondary .inner h3
{
	margin-top: .8em;
	color: #fff;
}

.primary .secondary .inner h4
{
	margin-top: 0;
	margin-bottom: .7em;
	color: #fff;
}

.primary .secondary .inner img
{
	margin: 1em 0;
}
.primary .secondary .inner .search img
{
	margin: .8em 0 1.6em;
}

.primary .secondary .inner a:link,
.primary .secondary .inner a:visited
{
	color: #04b4f3;
}

/* Search link area */
.primary .secondary .inner a.search:link,
.primary .secondary .inner a.search:visited
{
	display: block;
	padding: .4em .2em;
	text-align: center;
	color: #fff;
	background-color: #008fc2;
}

/* Introduction */
.introduction
{
	margin-bottom: 1em;
	font-family: "Century Gothic", Helvetica, Arial, serif;
	font-size: 1.35em;
	line-height: 1.5em;
	color: #444;
}
	.introduction p
	{
		margin-bottom: .5em;
	}

/* Link list */
ul.linkList
{
	margin: 0;
	padding: 0;
	list-style: none;
}
	ul.linkList li
	{
		margin-bottom: .3em;
		margin-left: .5em;
		padding-left: 1em;
		background: url('../Images/icons/link-list-dot.png') no-repeat 0 .7em;
	}
	.primary .secondary .linkList li
	{
		margin-left: 0;
	}

/* Continue / Read more - links */
a.continue
{
	padding-left: 1em;
	background: url('../Images/icons/link-arrow.png') no-repeat 0 50%;
}

/* Highlight */
.highlight
{
	margin-bottom: 1.4em;
	background-color: #edf3bc;
	padding: 1.4em;
	color: #444;
	border: .4em solid #dde568;
}
	.highlight h2,
	.highlight h3
	{
		margin-top: 0;
	}
	.highlight p
	{
		margin-bottom: 0;
		margin-top: 1.4em;
	}
	.highlight ul
	{
		margin: 0;
		padding: 0 0 0 1.4em;
	}

/* Footer - info and disclaimer */
#footer
{
	clear: both;
	margin: 1.8em 0 0;
	padding: .5em 2em;
	color: #696969;
	background-color: #fff;
}
	#footer .section
	{
		min-height: 0;
	}
	#footer p.partners
	{
		margin-top: 1.2em;
		font-weight: bold;
		font-size: 1.4em;
	}
	#footer .footerLogos ul
	{
		margin: 0;
		padding: 0;
		line-height: 1.7em;
	}
		#footer .footerLogos ul li
		{
			float: left;
			display: block;
			margin-right: 2.3em;
			padding-bottom: .5em;
			vertical-align: top;
		}
	#footer .footerText
	{
		font-size: 1.2em;
	}
		#footer .footerText p
		{
			font-size: 1em;
		}

/* Error messages */
.errormsg
{
	color: red;
	font-weight: bold;
}

/* AddThis toolbox */
.addthis_toolbox
{
	margin: 1em 0;
}
