/* Element styles */
/* These will be used to apply site-wide styles */

body, p, ul, ol, h1, h2, h3, h4, h5, h6, form {
 margin: 0;
 padding: 0;
}

body {
 background: #79913a url(../images/backgrounds/background-daisy.jpg) no-repeat top center;
 text-align: center;
 font: 11px Arial;
 color: #666;
}

/* Text elements */
h1 {
 color: #015138;
 font-size: 26px;
 margin: 0 0 20px 0;
 font-weight: 200;
}

h2 {
 font-weight: bold;
 font-size: 12px;
 color: #000;
 margin: 0 0 7px 0;
}

h3 {
 font-weight: bold;
 font-size: 12px;
 color: #000;
 margin: 0 0 2px 0;
}

h2 + h3 {
	font-size: 11px;
	margin-bottom: 10px;
}

h4 {
	font-size: 11px;
	font-weight: bold;
}

p {
	margin: 0 0 10px 0;
}

strong {
	font-weight: bold;
}

/* Links */
/* Links within a body of text should have a standard underline rather than arrow */
p a {
	color: #666;
	padding: 0;
	background: 0 none;
	text-decoration: underline;
}

a, a.marked { 
 color: #000;
 font-size: 11px;
 text-decoration: none;	
 background: url(../images/design/link-arrow.png) no-repeat left;
 padding: 0 0 0 15px;
}

a.normal {
 background: none;
 padding: 0;	
}

a:hover {
	color: #015138;
}

a img {
	border: none;
}

/* For Social Bookmarking widget */
#at20mc a, #at15s a{
	background: none; padding: 0;	
}
/* List elements */

ul {
	padding: 0 0 0 25px;
	margin: 0 0 10px 0;
	list-style-image: url(../images/design/list-marker.png);
}

li {
	margin: 0 0 4px;
}

ul ul {
	margin: 0 0 0 10px;
}

ul.sitemap, ul.sitemap ul {
	list-style: none;
	list-style-image: none;
}

/* Form elements */
form {
	float: left;
	margin: 0 0 40px;
}

label {
	width: 95px;
	padding: 0 0 0 5px;
	margin: 5px 10px 0 0;
	float: left;
	text-align: right;
}

input[type="text"], input[type="password"] {
	width: 165px;
	padding: 5px 0 0 4px;
}

input[type="text"], input[type="password"] {
	height: 18px;
	border: 1px solid #969696;
	color: #000;
}

select {
	height: 20px;
	width: 170px;
	border: 1px solid #969696;
	color: #000;
}

/* Class styles */
/* These will be used for generic element styles */

/* Utility class - used to clear floating elements */
.clear {
	clear: both;
}

/* Generic class for orange button stylings - used on links and input[type="submit"] elements */
.button {
	height: 20px;
	color: #fff;
	display: inline-block;
	display: -moz-inline-block;
	font-size: 12px;
	background: url(../images/design/btn-bg.png) repeat-x;
	padding: 5px 8px 0;
	margin: 5px 0 15px;
	border: none;
}
.button:hover {
	color: #000;
	cursor: pointer;
}
/* input element specific styles */
input.button {
	float: right;
	margin: 0;
	padding: 0 8px 2px;
}

/* Specific class for larger, 'Sign up' buttons */
.sign-up-button {
	width: 128px;
	height: 32px;
	text-indent: -9999px;
	background: url(../images/design/signup-btn.jpg) no-repeat top left;
	display: block;
	margin: 10px 0 0;
}

.sign-up-button:hover {
	background-position: bottom left;
} 

/* Div class for expanding/drop-down sections. Class required by jQuery function */
.expandable {
	border-bottom: 1px solid #D1D1D1;
	margin-bottom: 8px;
}
/* Specific styles for header in expandable section - styles it similar to that of normal a tag */
div.expandable > h2, div.expandable > h3, div.expandable > h4 {
 background: url(../images/design/link-arrow.png) no-repeat left;
 padding: 0 0 0 15px;
 cursor: pointer;
}
/* Changes background arrow to point down - useful for expanding links */
div.expandable h2.arrow-down, div.expandable h3.arrow-down, div.expandable h4.arrow-down {
	background: url(../images/design/link-arrow-down.png) no-repeat left;
}
/* Removes secondary border from nested expanding sections */
.expandable .expandable {
	border: none;
}

/* Div class to contain label/input pairs in forms */
div.input-group {
	clear: both;
	margin-bottom: 17px;
}
/* For asterisk to denote required field */
div.required span {
	color: #b63333;
	padding: 0 4px 0 0;
}

/* Small box to appear below images with related text */
.photo-desc {
	display: block;
	background: #eee;
	padding: 12px 14px 10px;
	color: #000;
	font-size: 10px;
}
/* For screenshots / related images - primarily within expandable sections */
.screenshot-container {
	border: none;
	margin: 10px 0;
}
.screenshot {
	width: 120px;
	float: left;
	margin: 0 0 0 12px;
}

.screenshot a {
	padding: 0;
	background: none;
	float: left;
}
.screenshot-container > .screenshot:first-child {
	margin: 0;
}

/* Generic list classes */
/* List class for, suprisingly, tabs. Required for jQuery function. */
ul.tabs {
	list-style: none;
	border-bottom: 1px solid #015138;
	margin-bottom: 15px;
	float: left;
	width: 565px;
}
ul.tabs li {
	height: 18px;
	float: left;
	margin: 0 4px -1px 0;
	padding: 6px 8px 0;
	background: url(../images/design/tab-bg.png) repeat-x;
	border-bottom: 1px solid #ff930c;
}
ul.tabs li a {
	padding: 0;
	background: none;
	color: #fff;
}
ul.tabs li.active {
	background: #fff none;
	border: 1px solid #015138;
	border-bottom-color: #fff;
}
ul.tabs li.active a {
	color: #000;
}

/* Class for featured-item elements - i.e groups that will contain an image, header and text for each item */
/* Uses: Features Points, News, Press releases etc */

div.feature-item {
	clear: both;
	margin: 0 0 14px;
	float: left;
}
div.feature-item  a {
	background: none;
	padding: 0;
}
div.feature-item  p, div.feature-item  h2, div.feature-item  h3 {
	width: 450px;
}
div.feature-item a, div.feature-item p, div.feature-item img, div.feature-item h2, div.feature-item h3 {
	float: left;
}
div.feature-item a.button {
	height: 15px;
	display: inline;
	background: url(../images/design/btn-bg.png) repeat-x;
	padding: 2px 13px;
}
div.feature-item img {
	margin: 0 12px 0 0;
}

/* Summary classes for home page - the series of 5 elements at bottom of page */
.summary-block {
	width: 137px;
	height: 148px;
	float: left;
	margin: 0 12px 0 0;
	background: #fff;
	border-top: 20px solid;
	border-bottom: 1px solid;
	position: relative;
}
.summary-block h2 {
	font-size: 12px;
	font-weight: bold;
	color: #000;
	margin: 10px 0 0 0;
}
.summary-block p {
	position: absolute;
	top: 42px;
}
.summary-block a {
	position: absolute;
	bottom: 6px;
}
/* Colour classes for each element - allows greater flexibility */
.red {
	border-top-color: #d62121;
	border-bottom-color: #d62121;
}
.orange {
	border-top-color: #f8981d;
	border-bottom-color: #f8981d;
}
.green {
	border-top-color: #015138;
	border-bottom-color: #015138;
}
.bright-green {
	border-top-color: #1df852;
	border-bottom-color: #1df852;
}

/* Background classes for website - apply to body element or if IE7, HTML element*/
.flowers {
	background: #79913a url(../images/backgrounds/background-daisy.jpg) no-repeat top center;
}
.arctic {
	background: #070c1a url(../images/backgrounds/background-arctic.jpg) no-repeat top center;
}
.coral {
	background: #081722 url(../images/backgrounds/background-coral.jpg) no-repeat top center;
}
.zebras {
	background: #151515 url(../images/backgrounds/background-zebra.jpg) no-repeat top center;
}
.forest {
	background: #00220b url(../images/backgrounds/background-forest.jpg) no-repeat top center;
}
.grain {
	background: #cef0fe url(../images/backgrounds/background-grain.jpg) no-repeat top center;
}
.desert {
	background: #040302 url(../images/backgrounds/background-dry.jpg) no-repeat top center;
}

/* Classes for two-column layout in tab area - combination of text-block and side-block - one large, one small */
/* text-block is used primarily for text content, as you may guess from the name */
.text-block-small {
	width: 315px;
	float: left;
	border-right: 1px solid #D1D1D1;
	padding: 0 10px 0 0;
	margin: 0 15px 0 0;
}
.text-block-large {
	width: 375px;
	float: left;
	margin-right: 25px;
}
/* primarily for use with images or forms, but accomodates any other content */
.side-block-small {
	width: 190px;
	float: left;
}
.side-block-large {
	width: 245px;
	float: left;
}
.side-block-large label {
	width:45px;
	margin: 5px 20px 0 0;
}

/* Change standard paragraph / heading margins to accomodate larger amount of text */
.privacy-page h2 {
	margin-top: 20px;
}

/* Twitter feed class styles */
#twitter-feed-new {
	width: 584px;
	height: 50px;
	text-align: left;
	padding: 5px 0;
	background: #eee url(../images/design/twitter-logo.jpg) no-repeat 8px 8px;
	position: relative;
}

#twitter-feed-new p {
	margin: 0 0 0 60px;
	width: 360px;
}

#twitter-feed-new a.follow-btn {
	float: right;
	position: absolute;
	right: 20px;
	top: 22px;
	background: none;
}

/* Unique elements */
/* these are elements that will be used once per page */

/* Basic layout - two column design */
#container {
 width: 864px;
 min-height:560px;
 height:auto !important;
 height:560px;
 margin: 40px auto 35px;
 padding: 40px 0;
 background: #fff url(../images/design/strapline.png) no-repeat 625px 44px;
 position: relative;
}

#left-col {
 width: 200px;
 margin: 0 27px 0 0;
padding: 50px 7px 0 0;
background: url(../images/design/logo.png) no-repeat right top;
 float: left;
 text-align: right;
}

#right-col {
 width: 590px;
 float: left;
 text-align: left;
}
#right-col > h1 {
	margin: 48px 0 18px 0;
}

/* Navigation link - present in left column */
ul#nav {
 list-style-image: none;
 list-style: none;
 font-size: 13px;
 font-weight: normal;
}

ul#nav li {
	margin-bottom: 15px;
}
ul#nav li a {
	color: #666;
	padding: 0;
	background-image: none;
	font-size: 13px;
    font-weight: normal;
}
ul#nav li a:hover {
	color: #015138;
}
ul#nav li.active a {
 	background: url(../images/design/active-nav-box.png) no-repeat left;
	padding: 0 0 0 15px;
	color: #015138;
}

/* Footer element for copyright / logo */
#footer {
	font-size: 9px;
	text-align: right;
	width: 175px;
	position: absolute;
	bottom: 35px;
	left: 32px;
}
#footer a {
	font-size: 9px;
}

#footer img {
	margin-bottom: 10px;
}

/* Home page specific section - picture of the hand */
#index-intro-section {
	width: 285px;
	padding: 115px 15px 10px 285px;
	margin: 0 0 35px 0;
	background: url(../images/design/index-intro.png) no-repeat;
	border-bottom: solid 3px #015138;
}
/* Hide text - present in image, need to keep in for seo purposes */
#index-intro-section h1 {
	text-indent: -9999px;
}

/* Strapline element to keep text out of view (text version of background image for SEO) */
#strapline {
	position: relative;
	float: right;
	text-indent: -9999px;
}

#summary-section {
	margin: 0 0 15px;
	float: left;
}

/* For summary block class on index page - removes left margin in order to align properly to side of div */
div.summary-block + div.summary-block + div.summary-block + div.summary-block {
	margin: 0;
}

/* Should only need a single tab element per page - makes it quicker for jQuery function to work
* (id's can be found quicker than classes in the DOM)
*/
#tabs {
	margin-bottom: 25px;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #015138;
}

/* pagination element */
#pagination {
	text-align: right;
}
#pagination strong {
	float: left;
	color: #000;
	font-size: 12px;
}
#pagination a {
	background: none;
	padding: 0;
	margin: 0 4px;
	text-decoration: underline;
	color: #666;
	font-size: 12px;
}
#pagination a:hover {
	color: #015138;
	text-decoration: none;
}