/* Reset CSS
 ======================================= */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	padding: 0;
	margin: 0;
}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset,img { 
	border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-weight: normal;
	font-style: normal;
}
ol,ul {
	list-style: none;
}
caption,th {
	text-align: left;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
	border: 0;
}

/* Clear
 ======================================= */
.clear {clear: both !important; line-height: 0 !important; height: 0 !important; width:0 !important; display: block !important; overflow:hidden !important;}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}

/* Common section
 ======================================= */

body {
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	
	font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
	font-size: 12.5px;
	line-height: 1.35em;
	color: #000;
	
	background: #6999C9;
}

/* Common */
.hidden { display: none; }

.desktop { display: block; }
.desktop-inline { display: inline; }
.desktop-inline-block { display: inline; }
.mobile, .mobile-inline, .mobile-inline-block { display: none; }

a { color: #6999c9; text-decoration: underline; }
a:hover { color: #4b6b8d; }
.hidden, .no-display { display: none; }

.a-center { text-align: center; }
.a-left { text-align: left; }
.a-right { text-align: right; }
.a-justify { text-align: justify; }

.f-left { float: left; }
.f-right { float: right; }

.bold, strong { font-weight: bold; }

.trebuchet { font-family: "Trebuchet MS", Helvetica, sans-serif; }

/* Text elements */
ul, ol {
	margin: 0 0 1.625em 2.5em;
}
ul {
	list-style: square;
}
ol {
	list-style-type: decimal;
}
ol ol {
	list-style: upper-alpha;
}
ol ol ol {
	list-style: lower-roman;
}
ol ol ol ol {
	list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul {
	margin-bottom: 0;
}

/* Flash messages
 ======================================= */
div.flash-error, div.flash-notice, div.flash-success
{
	padding:.8em;
	margin-bottom:1em;
	border:2px solid #ddd;
}

div.flash-error
{
	background:#FBE3E4;
	color:#8a1f11;
	border-color:#FBC2C4;
}

div.flash-notice
{
	background:#FFF6BF;
	color:#514721;
	border-color:#FFD324;
}

div.flash-success
{
	background:#E6EFC2;
	color:#264409;
	border-color:#C6D880;
}

div.flash-error a
{
	color:#8a1f11;
}

div.flash-notice a
{
	color:#514721;
}

div.flash-success a
{
	color:#264409;
}

/* Default Layout: 880px.
 ======================================= */
.global-wrapper {
	width: 880px;
	margin: 30px auto;
}

.logo {
	margin-bottom: 11px;
	float: left;
	width: 510px;
}
.top-link {
	float: right;
	width: 150px;
	color: #fff;
}
.top-link a { color: #fff; text-decoration: none; font-size:14px; }
.top-link a:hover { text-decoration: underline; }
.top-link ul { list-style: none; margin: 0; padding: 0; text-align: right; }
.top-link ul li { display: inline; }

footer {
	margin-top: 13px;
	color: #fff;
}
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }

/*		Tablet Layout: 919px.
---------------------------------------------*/
@media only screen and (max-width: 919px) {
	
	.global-wrapper {
		width: auto;
		margin-left: 15px;
		margin-right: 15px;
	}
	
	.logo img {
		width: 70%;
		max-width: 502px;
		min-width: 280px;
		height: auto;
	}
	
	footer {
		text-align: center;
	}
	
}

/*		Mobile Layout: 700px.
---------------------------------------------*/
@media only screen and (max-width: 700px) {
	.logo {
		float: none;
		width: auto;
		margin-bottom: 15px;
	}
}

/*		Mobile Layout: 520px.
---------------------------------------------*/
@media only screen and (max-width: 550px) {
	
	body {
		min-width: 320px;
	}
	
	.logo { text-align: center; }
	.logo img { width: 80%; }
	
	.top-link {
		float: none;
		width: auto;
		margin-bottom: 15px;
	}
	
}