/* 	UKCSI website
	HTML and CSS by Leon Paternoster (leon.paternoster@icsmail.co.uk)
*/


/* CONTENTS

	1. Basic settings and reset
	2. Layout
	3. Universal typography (base elements and site wide additional classes)
	4. Header
	5. Home page
	6. Results page
	7. About page
	8. Subscriptions page (labelled 'Add your organisation' in nav menu. 'Subscribe' is our internal term, 'Add...' means more
	9. Contact page
	10. Further information
	11. Footer
	
*/

@media screen, projection {

/* 	1. BASIC SETTINGS AND RESET */

/* 	Set some selector margins and padding to 0 to make broswer rendering predictable
	A full reset is overkill
*/

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

/* Some basic settings */

html {
	background-color: #EFEFEF;
	color: #333;
}

body {
	background-color: #FFF;
	color: #333;
	font-family: arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
	line-height: 24px;
	font-size: 100%;
	width: 960px;
	margin: 22px auto;
	padding: 22px 15px;
	border: 1px solid #CFCFCF;
	-webkit-box-shadow: 0 0 10px #CFCFCF;
	-moz-box-shadow: 0 0 10px #CFCFCF;
	box-shadow: 0 0 10px #CFCFCF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

a img {
	border: none;
}

/*	2. LAYOUT
	6 column grid
	30px margins
	
	Implement by adding a class and direction to an element
	
	The last column(s) in a row must have the class 'last' added to it,
	e.g. 'left three' and 'left three last' (six columns to a page).
	If you don't add 'last' the width of the columns will exceed the container's width:
	and that's not good.
*/

.one {
	width: 135px;
}

.two {
	width: 300px;
}

.three {
	width: 465px;
}

.four {
	width: 630px;
}

.five {
	width: 795px;
}

.six {
	width: 960px;
}

.clear {
	clear: both;
}

.left {
	float: left;
	margin-right: 30px;
	display: inline;
	overflow: hidden;
}

.right {
	float: right;
	margin-left: 30px;
	display: inline;
	overflow: hidden;
}

.last {
	margin-right: 0;
	margin-left: 0;
}

/*	3. UNIVERSAL TYPOGRAPHY */

a:link {
	color: #42856C;
}

a:visited {
	color: #888;
}

a:hover, a:active {
	color: #D85F0F;
}

p, ul, ol, dd {
	margin-bottom: 12px;
	font-size: 15px;
}

li {
	list-style-position: inside;
	margin-left: 48px;
}

abbr {
	border-bottom: 1px dotted #AAA;
	cursor: help;
}

.call {
	padding: 8px 8px;
	background-color: #42856C;
	color: #FFF;
	text-decoration: none;
	border: none;
	text-align: center;
	text-shadow: 1px 1px 1px #333;
	font-size: 21px;
	margin: 12px 0 24px 0;
	-webkit-border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow: 2px 2px #DFDFDF;
	-moz-border-radius: 10px 10px 10px 10px;
	-moz-box-shadow: 2px 2px #DFDFDF;
	-o-border-radius: 10px 10px 10px 10px;
	-o-box-shadow: 2px 2px #DFDFDF;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 2px 2px #DFDFDF;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;	
}

a.call_to_action:link, a.call_to_action:visited {
	padding: 8px 8px;
	background-color: #42856C;
	color: #FFF;
	text-decoration: none;
	border: none;
	-webkit-border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow: 2px 2px #DFDFDF;
	-moz-border-radius: 10px 10px 10px 10px;
	-moz-box-shadow: 2px 2px #DFDFDF;
	-o-border-radius: 10px 10px 10px 10px;
	-o-box-shadow: 2px 2px #DFDFDF;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 2px 2px #DFDFDF;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	text-shadow: 1px 1px 1px #444;
}

a.call_to_action:hover {
	background-color: #D85F0F;
}

.img_link {
	color: #FFF;
	border: none;
	text-decoration: none;
}

.doc_link {
	background-image: url(images/report.png);
	background-repeat: no-repeat;
	padding-left: 28px;
	font-weight: bold;
}

.email {
	background-image: url(images/mail.png);
	background-repeat: no-repeat;
	padding-left: 28px;
	background-position: left center;
}

.print {
	background-image: url(images/printer.png);
	background-repeat: no-repeat;
	padding-left: 28px;
	background-position: left center;
}

.highlight {
	background-color: #DFDFDF;
	border: 1px solid #DFDFDF;
	padding: 21px;
	width: 256px;
	margin-top: 11px;
}

.highlight h1 {
	padding: 18px 0 6px 0;
	font-size: 18px;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.highlight p,
.highlight li {
	font-size: 15px;
}

.shove_up {
	margin-top: 55px;
}

.breadcrumb {
	padding: 10px;
	border: 1px solid #DFDFDF;
	background-color: #DFDFDF;
}

/*	4. HEADER */

.mob {
	border-bottom: 1px dotted #DFDFDF;
	margin-bottom: 11px;
	color: #AAA;
}

.mob a:link, .mob a:visited, .mob a:hover {
	font-size: 12px !important;
	color: #AAA !important;
	text-decoration: none !important;
}

.logo {
	padding-top: 12px;
	margin-bottom: 12px;
	text-align: right;
}

.site-title {
	font-size: 24px;
	line-height: 60px;
	margin-bottom: 24px;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.site-title a:link, .site-title a:visited, .site-title a:hover, .site-title a:active {
	color: #42856C;
	text-decoration: none;
}

.nav {
	overflow: hidden;
	background-color: #D7E1DC;
	width: 960px;
}

.nav li {
	display: inline;
	float: left;
	width: 164px;
	border-right: 1px solid #FFF;
	text-align: center;
	color: #FFF;
	background-color: #D7E1DC;
	margin-left: 0;
	font-size: 14px;
}

.nav li a:link, .nav li a:visited {
	color: #444;
	display: block;
	text-decoration: none;
	border-bottom: none;
	padding: 5px 0 6px 0;
}

li.current {
	padding: 5px 0 6px 0;
	margin-left: 0;
}

.nav li a:hover, li.current {
	background-color: #42856C;
	color: #FFF;
}

/*	5.HOME PAGE */

	/* Lead */

.results_lead {
	padding-top: 10px;
	border-top: 1px dotted #DFDFDF;
	overflow: hidden;
}

.results_lead h1, .about_section h1 {
	font-size: 36px;
	line-height: 44px;
	letter-spacing: -1px;
	text-shadow: 1px 1px 1px #DFDFDF;
	margin-bottom: 11px;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.results_lead p {
	margin-bottom: 22px;
}

.results_lead object {
	margin-bottom: 0;
}

.teaser {
	font-size: 12px;
	background-image: url(images/report.png);
	background-repeat: no-repeat;
	padding-left: 28px;
}

/*	6. RESULTS PAGE */

.headlines {
	padding-top: 10px;
	border-top: 1px dotted #DFDFDF;
	overflow: hidden;
}

.headlines h1 {
	font-size: 36px;
	line-height: 44px;
	letter-spacing: -1px;
	text-shadow: 1px 1px 1px #DFDFDF;
	margin-bottom: 11px;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.headlines h2 {
	padding: 18px 0 6px 0;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.results .headlines ul li {
	list-style-type: none;
	list-style-image: url(images/new_pin.jpg);
	margin-bottom: 11px;
}

.headlines ul.sectoral_list li {
	list-style-image: none;
	list-style-type: disc;
	padding: 0;
}

.headlines img {
	display: block;
	margin: 0 auto 11px auto;
	max-width: 616px !important;
	height: auto !imprtant;
	border: 1px solid #DFDFDF;
	padding: 6px;
	background-color: #EEEFFF;
}

.download_results {
	padding-top: 10px;
	border-top: 1px dotted #DFDFDF;
}

.download_results h1 {
	font-size: 18px;
	margin-bottom: 11px;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

/*	7. ABOUT PAGE */

#about_contents, .about_section {
	padding-top: 10px;
	border-top: 1px dotted #DFDFDF;
}

#about_contents h1 {
	font-size: 18px;
	font-family: arial, helvetica, sans-serif;
}

#main_title {
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
	line-height: 44px;
	letter-spacing: -1px;
	text-shadow: 1px 1px 1px #DFDFDF;
	margin-bottom: 11px;
}	

#about_contents li {
	margin-left: 11px;
}

.about_section h2, .about_section h3, .about_section dt, .headlines h3 {
	padding: 18px 0 6px 0;
}

.about_section h2 {
	font-size: 21px;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.about_section h3, .about_section dt {
	font-size: 18px;
	color: #888;
}

.about_section dd {
	margin-left: 48px;
	margin-bottom: 0;
	list-style-type: circle;
}

/*	8. SUBSCRIPTIONS PAGE */

.subs_info, .subs_actions {
	padding-top: 10px;
	border-top: 1px dotted #DFDFDF;
}

.subs_info h1 {
	font-size: 36px;
	line-height: 44px;
	letter-spacing: -1px;
	text-shadow: 1px 1px 1px #DFDFDF;
	margin-bottom: 11px;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.subs_info h2, .subs_info h3 {
	padding: 18px 0 6px 0;
}

.subs_info h2 {
	font-size: 21px;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.subs_info h3, .subs_info dt {
	font-size: 18px;
	color: #888;
}

.subs_actions h1 {
	font-size: 18px;
	margin: 0;
}

/*	9. CONTACT PAGE */

.contact_info h1 {
	font-size: 36px;
	line-height: 44px;
	letter-spacing: -1px;
	text-shadow: 1px 1px 1px #DFDFDF;
	margin-bottom: 11px !important;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.contact_info h2, .subs_info h3 {
	padding: 18px 0 6px 0;
}

.contact_info h2 {
	font-size: 21px;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.contact_info h3, .subs_info dt {
	font-size: 18px;
	color: #888;
}

/*	10. FURTHER INFORMATION */

.further_information {
	padding: 10px 0 22px 0;
	border-top: 1px dotted #DFDFDF;
	overflow: hidden;
	line-height: 18px;
}

.further_information h2 {
	padding: 18px 0 6px 0;
	font-size: 16px;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", arial, calibri, 'lucida grande', 'helvetica neue', arial, 'trebuchet ms', 'deja vu sans', sans-serif;
}

.further_information p {
	color: #888;
	font-size: 13px;
}

.transcript h1 {
	margin-bottom: 22px;
	line-height: 1.25em;
}

.transcript p {
	width: 630px;
}

/*	11. FOOTER */

#footer {
	clear: both;
	padding-top: 10px;
	border-top: 2px solid #DFDFDF;
	color: #888;
	font-size: 12px;
	line-height: 16px;
	overflow: hidden;
}

#footer p {
	margin-bottom: 0;
	font-size: 13px;
}

.footer_links {
	margin-bottom: 11px;
}

.footer_links li {
	display: inline;
	margin-right: 22px;
	margin-left: 0;
	font-size: 13px;
}

.footer_links li a:link, .footer_links li a:visited, .footer_links li a:hover {
	text-decoration: none;
	color: #888;
}

.footer_links li a:hover {
	color: #D85F0F;
}

.sitemap h1 {
	margin: 22px 0;
}

.sitemap ul li ul li {
	margin-left: 22px !important;
}

} /* End screen, projection query */

@media print {

	* {
		background: #fff;
		color: #000;
	}
	
	html {
		font-size: 100%;
		line-height: 1.5;
		font-family: 'droid sans', arial, 'helvetica neue', sans-serif;
	}
	
	.nav, #footer, .further_information, #about_contents, .download_results, .subs_actions, .access, .highlight {
	display: none;
}

	a:link:after {
		content: " (" attr(href) ") ";
	}
	
} /* End print query */