/* =====================================================================	
	 	main.css
========================================================================		
   	Author: Paul Bennett
   	Date: 15/12/09
------------------------------------------------------------------------
	Comments
	
	Nameing Convetions: all selectors are to use camelCase naming
	E.g. rightPanel, mainContent, pageWrapper etc...
	
	By defining the font-size as 100% on the body, we can then use EMs 
	to define font-size/heights/widths on elements. This is because the 
	default font-size in all browsers is 16px.
	
	(desired font-size / 16 = value in EMs)
	
	0.625em		=	10px
	0.6875em	=	11px
	0.75em 		=	12px
	0.8125em	=	14px
	1em 		= 	16px
	
------------------------------------------------------------------------
   
   	 	
========================================================================*/ 

/* =General
	styles that will always apply to elements
	throughout the website.
	E.g. ul, li, a, p, blockquote etc...
----------------------------------------------------------------------*/
body {
	background: #FFF;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: #000;
	font-size: 100%;
	line-height: 1.25em;
}	
h1,h2,h3,h4,h5,h6 {
	/*font-family: Georgia, Times, "Times New Roman", serif;*/
	font-weight: normal;
}
h1 {
	color: #09579D;
	font-size: 1.5em;
	padding: 0 0 1.125em 0;
}
h3 {
	font-size: 1em;
	font-weight: bold;
}
h3.body, .three_quarter_col h3 {
	padding-bottom: 1em;
	color: #09579D;
}
h3.month {
	padding: 1em 0 0.25em;
	color: #09579D;
	font-size: 1.25em;
}
p, ul li, ol li {
	font-size: 0.8125em;
}
ul li p, ol li p {
	font-size: 1em;
}
a {
	color: #4978AD;
	text-decoration: underline;
}
a:visited {
	color: #87C435;
}
a:hover {
	color: #B42763;
}
a:active {
	color: #000;
}
.back_link {
	padding-top: 2em;
}
.centered {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
.quarter_col, .half_col, .three_quarter_col {
	margin-right: 24px;
	float: left;
	display: inline;
	position: relative;
}
.quarter_col {
	width: 222px;
}
.half_col {
	width: 468px;
}
.three_quarter_col {
	width: 714px;
}
.last_col {
	margin-right: 0;
}
.cmsedit {
	background: #09579D;
	color: #FFF;
	text-decoration: none;
	font-size: 0.75em;
	padding: 3px 6px;
	float: right;
    display: inline;
    margin: 0 0 10px 10px;
}
.cmsedit:hover {
	background: #B42763;
	color: #FFF;
}


/* =Header
----------------------------------------------------------------------*/
#header_wrapper {
	background: #00529B url(/img/header_bg.png) no-repeat center top;
}
#header {
	background: transparent url(/img/header_curve.png) no-repeat 184px 0;
	padding: 1em;
}
#header p {
	font-size: 0.75em;
	line-height: 1.25em;
	color: #FFF;
}
#header_banner {
	height: 60px;
	overflow: hidden;
}
#header_banner ul {
	position: relative;
	height: 60px;
	width: 468px;
	overflow: hidden;
}
#header_banner ul li {
	position: absolute;
	left: 0;
	top: 0;
	height: 60px;
	width: 468px;
	z-index: 8;
}
#header_banner li.active {
    z-index:10;
}
#header_banner li.last-active {
    z-index: 9;
}
#header_banner ul li a, #header_banner ul li a img {
	height: 60px;
	width: 468px;
	display: block;
}
#breadcrumb {
	clear: left;
	background: #94C94E url(../img/breadcrumb_bg.gif) bottom left repeat-x;
	color: #000;
	font-size: 0.875em;
	padding: 0.375em 0;
}
#breadcrumb p, #breadcrumb ol {
	float: left;
}
#breadcrumb p {
	width: 9%;
}
#breadcrumb ol {
	width: 90%;
	overflow: hidden;
}
#breadcrumb ol li {
	float: left;
	padding: 0 16px 0 5px;
	background: transparent url(/img/breadcrumb_seperator.gif) no-repeat right center;
}
#breadcrumb ol li.first {
	padding-left: 0;
}
#breadcrumb ol li.last {
	background: transparent;
}
#breadcrumb em {
	color: #FFF;
	font-style: normal;
}
#breadcrumb li, #breadcrumb li a {
	color: #000;
}

/* =Main Content
----------------------------------------------------------------------*/
#home #main_content_wrapper {
	top: 2.1875em;
}
#main_content_wrapper {
	background: #FFF url(/img/page_grad_bg.png) repeat-x 0 0;
	position: relative;
	top: 4em;
}
#main_content {
	padding: 2em 0;
	position: relative;
}
#main_content p, #main_content ul, #main_content ol {
	padding-bottom: 1em;
}
#main_content li {
	background: url(/img/list_bullet.png) no-repeat 0 0.5625em;
	padding-left: 10px;
}
#languages_box {
	margin: -1.5em 0 1em 0;
	height: 45px;
	overflow: hidden;
}
#languages_box p {
	float: left;
	width: 490px;
	height: 45px;
	margin: 1px 0;
	text-indent: -9999em;
	padding: 0;
	background: #FFF url(/img/languages.png) no-repeat 0 0;
}
#home_bottom_boxes {
	background: #FFF url(/img/homepage_boxes_bottom.png) no-repeat left bottom;
	margin: 2em 0 0 0;
	overflow: hidden;
}

#useful_links h3 {
	background: #0B599D url(/img/quarter_box_top_blue.png) no-repeat 0 0;
	color: #FFF;
	padding: 10px;
}
#useful_links ul {
	background: url(/img/useful_bg.png) no-repeat 0 0;
	padding: 50px 10px 10px 10px;
}
#useful_links ul li {
	background: transparent url(/img/list_arrow.png) no-repeat 0 0.5em;
	padding-top: 0.25em;
}
#home #calendar h3 {
	background: #0B599D url(/img/half_box_top_blue.png) no-repeat 0 0;
	color: #FFF;
	padding: 10px;
}
#home #calendar h3 a {
	color:#fff;
	text-decoration: none;
}
#home #calendar ul {
	padding: 6px 10px 10px 10px;
}
#calendar_legend {
	position: relative;
}
#calendar_legend ul {
	padding-right: 222px;
}
#calendar_legend #calendar_all_link {
	position: absolute;
	right: 10px;
	top: 1.625em;
	font-size: 0.75em;
}
#home #calendar ul li {
	font-size: 0.75em;
}
#calendar ul li {
	background: transparent;
	padding: 0.375em 0 0.375em 26px;
	overflow: hidden;
	border-bottom: 1px solid #D9D9D9;
}
#calendar_legend ul li {
	border: none;
	padding: 0.125em 0 0.125em 20px;
}
#calendar ul li.last {
	border: none
}
#calendar ul li.month_heading {
	padding-top: 1em;
	padding-left: 0;
}
#calendar ul li.e_nbta, .e_nbta, #calendar_legend ul li.e_nbta {
	background: url(/img/event_nbta.png) no-repeat 0 0.6875em;
}
#calendar ul li.e_euro, .e_euro, #calendar_legend ul li.e_euro {
	background: url(/img/event_europe.png) no-repeat 0 0.6875em;
}
#calendar ul li.e_other, .e_other, #calendar_legend ul li.e_other {
	background: url(/img/event_other.png) no-repeat 0 0.6875em;
}
#calendar_legend ul li.e_nbta, #calendar_legend ul li.e_euro, #calendar_legend ul li.e_other {
	background-position: 0 0.375em;
}

.item_date {
	position: relative;
	top: -2em;
	padding: 0.3125em 0 1em 16px;
}
#calendar ul li span,
#calendar ul li strong,
#calendar ul li a {
	float: left;
}
#calendar ul li span strong {
	float: none;
}
#calendar ul li span.date {
	width: 18%;
	padding-right: 5%;
}
#calendar ul li span.details {
	width: 52%;
	padding-right: 5%;
}
#calendar ul li span.details a {
	width: auto;
	display: inline;
	float: none;
	text-align: left;
}
#calendar ul li a {
	width: 20%;
	text-align: right;
}
.separate_block {
	margin-top: 1em;
	padding-top: 1.5em;
	border-top: 1px solid #D9D9D9;
}
.separate_block_first {
	margin-top: 0;
	padding-top: 0;
	border: none;
}

/* List pages */
#main_content ul.articles li {
	background: url(../img/icon_article.png) top left no-repeat;
	padding-left: 30px;
	margin-bottom: 1em;
}
#main_content ul.articles li h2 {
	line-height: 25px;
	margin:0 0 0.2em 0;
	font-size: 1.3em;
}
#main_content ul.articles li p {
	margin-top: 0;
}
#main_content .three_quarter_col .article_date {
	position: relative;
	top: -1.5em;
	color: #777;
	padding-bottom: 0;
}
#main_content ul.articles li p.article_date {
	color: #777;
	padding-bottom: 0.25em;
	top: 0;
}


/* =Detail page promo boxes
----------------------------------------------------------------------*/
#detail_page_promos {
	overflow: hidden;
	height: 1%;
	background: url(../img/detail_boxes_bottom.png) bottom left no-repeat;
	margin: 1em 0;
}
#detail_page_promos div.quarter_col h3{
	background:#0B599D url(/img/quarter_box_top_blue.png) no-repeat scroll 0 0;
	color:#FFFFFF;
	padding:10px;
}

#detail_page_promos .sponsors ul {
	background: transparent;
	padding: 0 16px 16px 16px;
}
#detail_page_promos  .sponsors ul li {
	padding: 16px 0 0 0;
	background: none;
}
#detail_page_promos .sponsors ul li a {
	display: block;
	width: 190px;
	height: 50px;
}

/* =Search form
----------------------------------------------------------------------*/
#search_form {
	width: 222px;
	height: 22px;
	overflow: hidden;
	background: url(/img/searchbox.png) no-repeat 0 0;
	position: absolute;
	right: 0;
	top: 6px;
}
#search_form label {
	height: 0;
	position: absolute;
	left: -9999em;
}
#search_form input.text {
	width: 185px;
	margin-left: 10px;
	border: none;
	color: #2A2A2A;
	background: transparent;
	height: 14px;
	padding: 4px 0;
}


/* =Right Column
----------------------------------------------------------------------*/
.join_button, .contact_button {
	padding-bottom: 1em;
}
.join_button a, .contact_button a {
	width: 222px;
	display: block;
	height: 64px;
	text-indent: -9999em;
	overflow: hidden;
	color: #FFF;
}
.join_button a {
	background: #B52964 url(/img/join_btn.png) no-repeat 0 0;
}
.contact_button a {
	background: #0C5A9D url(/img/contact_btn.png) no-repeat 0 0;
}
.right_promo_box {
	background: #FFF url(/img/quarter_box_bottom.png) no-repeat left bottom;
	margin-bottom: 1em;
}
.right_promo_box h3 {
	background: #87C435 url(/img/quarter_box_top_green.png) no-repeat 0 0;
	color: #FFF;
	padding: 10px;
}
.right_promo_box ul {
	background: transparent;
	padding: 0 16px 16px 16px;
}
#right_col .right_promo_box ul li {
	padding: 16px 0 0 0;
	background: transparent;
}
.right_promo_box ul li a {
	display: block;
	width: 190px;
	height: 50px;
}
.right_sponsors {
	width: 222px;
	text-align: right;
	overflow: hidden;
	float: right;
}


/* =Footer
----------------------------------------------------------------------*/
#footer {
	border-top: 1px solid #D9D9D9;
	padding: 0.5em 0;
}
#footer p {
	padding-bottom: 1em;
	font-size: 0.625em;
}
#footer p, #footer a {
	color: #999;
}
#footer .last_col {
	text-align: right;
}