/* -------------------------------------------------------------------- */
/*                                                                      */
/*  Climate change and your home landing page                           */
/*                                                                      */
/*  Author: Mark Hurrell for Message                                    */
/*  Date: 20 June 2008                                                  */
/*  Last Modified: -                                                    */
/*  Company: English Heritage                                           */
/*  URL: -                                                              */
/*                                                                      */
/*                                                                      */
/*      Table of Contents                                               */
/*                                                                      */
/*      1. CSS Reset _____________________________________ line 34      */
/*      2. Structure _____________________________________ line 92      */
/*      3. Typography ____________________________________ line 326     */
/*                                                                      */
/*                                                                      */
/* -------------------------------------------------------------------- */









/* -------------------------------------------------------------------- */
/*                                                                      */
/*      1. CSS Reset                                                    */
/*                                                                      */
/* -------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-family: inherit;
		vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
		outline: 0;
}

body {
		line-height: 1.5;
		color: black;
		background: #ffffff;
		font-size: 62.5%;
		font-family: Helvetica, Arial, sans-serif;
}

ol, ul {
		list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
		border-collapse: separate;
		border-spacing: 0;
}

caption, th, td {
		text-align: left;
		font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
		content: "";
}

blockquote, q {
		quotes: "" "";
}










/* -------------------------------------------------------------------- */
/*                                                                      */
/*      2. Structure                                                    */
/*                                                                      */
/* -------------------------------------------------------------------- */

body {
		background: #ffffff url(images/landing_page_bg.png) top left repeat-x;
}

	#branding {
			position: relative;
			width: 871px;
			height: 148px;
			margin: 0 auto;
			background: url(images/landing_page_branding.png) top left no-repeat;
	}
	
		#branding a#english_heritage {
				position: absolute;
				top: 50px;
				left: 0;
				width: 180px;
				height: 60px;
				overflow: hidden;
		}
		
		#branding a#eon {
				position: absolute;
				top: 60px;
				right: 0;
				width: 150px;
				height: 50px;
				overflow: hidden;
		}

			#branding a span {
					position: absolute;
					left: -5000px;
			}
			
	#container {
		position: relative;
		width: 871px;
		height: auto;
		margin: 30px auto;
	}
	
		#content {
				position: relative;
				width: 655px;
		}
		
			h1 {
					margin-right: 23px;
			}
			
			p.intro {
					margin: 10px 23px 20px 0;
			}
			
			div.callout {     /* modified for IE7 & IE6 */
					display: inline-block;
					margin: 10px 23px 10px 0;
			}
						
			div.callout:after {
					content: ".";
					display: block;
					height: 0;
					clear: both;
					visibility: hidden;
			}
			
				div.callout h2 {
						display: block;
						width: 346px;
						height: auto;
						padding: 12px 263px 8px 23px;
				}
				
				div.callout div.column_1 {
						position: relative;
						width: 336px;
						margin: 18px 0 18px 23px;
						float: left;
				}
				
					div.callout div.column_1 p {
							position: relative;
							margin-bottom: 18px;
					}
					
					div.callout#climate_change div.column_1 a {     /* modified for IE7 & IE6 */
							position: relative;
							display: block;
							width: 168px;
							background: #165077 url(images/landing_page_buttons.png) -208px bottom no-repeat;
					}
					
					div.callout#hearth_and_home div.column_1 a {     /* modified for IE7 & IE6 */
							position: relative;
							display: block;
							margin-bottom: 18px;
							width: 168px;
							background: #165077 url(images/landing_page_buttons.png) -544px bottom no-repeat;
					}
					
						div.callout#climate_change div.column_1 a span {
								display: block;
								width: 168px;
								height: 100%;
								background: transparent url(images/landing_page_buttons.png) -40px top no-repeat;
						}
					
						div.callout#hearth_and_home div.column_1 a span {
								display: block;
								width: 168px;
								height: 100%;
								background: transparent url(images/landing_page_buttons.png) -376px top no-repeat;
						}
						
							div.callout div.column_1 a span i {
									display: block;
									width: 120px;
									height: 100%;
									padding: 7px 36px 7px 12px;
									background: transparent url(images/landing_page_buttons.png) 138px center no-repeat;
							}
					
				div.callout div.column_2 {
						position: relative;
						background: #5a3f9a;
						margin-top: 25px;
						margin-bottom: 12px;
						right: -18px;
						width: 242px;
						float: left;
				}

					div.callout div.column_2 img {
							width: 242px;
					}
					
					div.callout div.column_2 h3 {
							margin: 14px 15px 7px;
					}
					
					div.callout div.column_2 p {
							margin: 0 15px 15px;
					}
			
				div.callout#climate_change {
						background: #d0dce4;
				}
				
					div.callout#climate_change h2 {
							background: #aabecc;
					}
			
				div.callout#hearth_and_home {
						background: #fff0c7;
				}
				
					div.callout#hearth_and_home h2 {
							background: #ffe29b;
					}
		
		#additional {
				position: absolute;
				top: 0;
				right: 0;
				width: 218px;
		}
		
			div.the_partnership {
					padding: 15px;
					background: #ebeaeb;
			}
			
				div#additional div.the_partnership h2 {
						margin-top: 0;
						margin-bottom: 15px;
				}
	
				div.the_partnership ul {
						margin-top: 7px;
				}
				
					div.the_partnership ul li {     /* modified for IE6 */
							margin-bottom: 7px;
							list-style-type: disc;
							list-style-position: inside;
					}
					
			div.news {
					padding: 0px;
					background: #FFFFFF;
			}
			
				div#additional div.news h2 {
						margin-top: 0;
						margin-bottom: 15px;
				}
	
				div.news ul {
						margin-top: 7px;
				}
				
					div.news ul li {     /* modified for IE6 */
							margin-bottom: 7px;
							list-style-type: disc;
							list-style-position: inside;
					}
					
					div#additional div.news ul li a {    
						display:inline;
					}
					
			div#additional h2 {
					margin-top: 7px;
			}
			
			div#additional li a {
					display: block;
					margin: 7px 0;
			}
			
			div#additional ul.links {
					margin-top: 5px;
			}
			
			div#additional ul.links li a {
					display: block;
					margin: 3px 0;
					padding: 3px 6px 2px;
					border: 1px solid #898788;
					background: #898788 url(images/landing_page_link.png) center right no-repeat;
			}
			
				div#additional ul.links li a:hover {
						border: 1px solid #605e5f;
						background-color: #999999;
				}














/* -------------------------------------------------------------------- */
/*                                                                      */
/*      3. Typography                                                   */
/*                                                                      */
/* -------------------------------------------------------------------- */

h1 {
		font-size: 4.1em;
		font-family: "Gill Sans", "Trebuchet MS", sans-serif;
		line-height: 1.1;
		color: #165077;
		font-weight: 400;
}

div.callout h2 {
		font-size: 2.1em;
		font-family: "Gill Sans", "Trebuchet MS", sans-serif;
		line-height: 1.1;
		color: #000000;
		font-weight: 400;
}

div.callout div.column_2 h3 {
		font-size: 1.3em;
		font-family: Helvetica, Arial, sans-serif;
		color: #ffffff;
		font-weight: 800;
}

div#additional div.the_partnership h2 {
		font-size: 1.7em;
		font-family: Helvetica, Arial, sans-serif;
		color: #da203d;
		font-weight: 800;
}
div#additional div.news h2 {
		font-size: 1.7em;
		font-family: Helvetica, Arial, sans-serif;
		color: #da203d;
		font-weight: 800;
}


div#additional h2 {
		font-family: "Gill Sans", "Trebuchet MS", sans-serif;
		font-size: 1.8em;
		color: #da203d;
		font-weight: 400;
}

p {
		font-size: 1em;
		font-family: Arial, Helvetica, sans-serif;
		color: #333333;
		line-height: 1.35;
}

	p.intro {
			font-size: 1.8em;
	}
	
	div.callout div.column_1 p {
			font-size: 1.2em;
	}
	
	div.callout div.column_2 p {
			font-size: 1.1em;
			line-height: 1.2;
			color: #ffffff;
	}
	
	div.the_partnership p {
			font-size: 1.2em;
			font-weight:  800;
			line-height: 1.3;
	}
	
	div.news p {
			font-size: 1.2em;
			font-weight:  800;
			line-height: 1.3;
	}
	
div.the_partnership li {
		font-size: 1.2em;
		line-height: 1.3;
		color: #444444;
}

div.news li {
		font-size: 1.2em;
		line-height: 1.3;
		color: #444444;
}

div#additional li a {
		font-size: 1.1em;
		line-height: 1.2;
		color: #333333;
		text-decoration: none;
		font-weight: 800;
}

	div#additional li a.read_more {
			font-weight: 400;
	}

	div#additional li a:hover {
			text-decoration: underline;
	}
	
	div#additional ul.links li a {
			color: #ffffff;
	}
	
		div#additional ul.links li a:hover {
				text-decoration: none;
		}

i {
		font-style: normal;
}

	div.callout div.column_1 a {
			font-size: 1.2em;
			font-weight: 800;
			color: #ffffff;
			text-decoration: none;
	}