/*---------------------------------------------------------------------------------------------------------------------------------------

	CSS Document

-----------------------------------------------------------------------------------------------------------------------------------------
 	
	CONTENTS
	
	1	Browser Reset
	2	Page Structure
	3	Header
	4	Main Content
	5	Footer
	6	Miscellaneous

-----------------------------------------------------------------------------------------------------------------------------------------

	1 	Browser Reset

---------------------------------------------------------------------------------------------------------------------------------------*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
blockquote, a, em, img, strong, ol, ul, li, form {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
p {
	margin-bottom: 15px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a, a:visited, a:active {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/*---------------------------------------------------------------------------------------------------------------------------------------
	
	1 	Page Structure

---------------------------------------------------------------------------------------------------------------------------------------*/

#container {
	width: 1000px;								/* The width of the container */
	min-width: 990px;							/* Minimum width that the page can be scaled to without a scroll bar */
	margin: auto;								/* Container aligned centrally within browser window */
	height: auto;								/* The height is automatic dependent on content */
	overflow: hidden;							/* Allows us to float elements in the container */
	font-family: Arial, Verdana, Times, serif;	/* Default font */
	font-size: 0.8em;							/* Default font size */
	color: #383838;								/* Default font colour */ 
}

/*---------------------------------------------------------------------------------------------------------------------------------------

	2	Header

---------------------------------------------------------------------------------------------------------------------------------------*/

#header {
	width: 100%;								/* The header covers the full width of the container */
	background-color: #99CCCC;					/* Header background colour, surrounding the logo */
	padding-top: 1.5em;							/* The spacing above the IoN logo, header BG colour */								
	padding-bottom: 0.5em;						/* The spacing below the IoN logo, header BG colour */
	margin-bottom: 2em;							/* Spacing between the header and the main content, white in colour */
}
#header h1 {
	width: 100%;								/* IoN logo is to span the full width of the container */
	height: 62px;								/* This is the hard-coded height of the logo */
	text-indent: -1999px;						/* Move the text off-screen, replaced by logo */
	background: transparent url(../images/logo.jpg) no-repeat 0 0;		/* Logo location */
}
#header h1 a {
 	display: block;								/* Span the full width of the logo */
	width: 100%;								/* Full width of logo should act as hyperlink to IoN home */
	height: 100%;								/* Full height of logo should act as hyperlink to IoN home */
	outline: none;								/* Link/Logo has no outline */
	margin: 0;									/* Margins for the link */
	padding: 0;									/* Padding for the link */
}
#search-google {
	display: block;
	text-align: right;
	margin-top: 0.5em;
	margin-right: 0.7em;
}
.breadcrumb {
	margin-left: 0.75em;
	font: bold 0.9em Arial;
}

/*---------------------------------------------------------------------------------------------------------------------------------------

	3	Main Content

		A	Layout
		B	Left Column		-	Menu Bar
		C	Middle Column	-	Story
		D	Right Column	-	Links Bar

---------------------------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------------------------------

		A Layout

---------------------------------------------------------------------------------------------------------------------------------------*/

#main {
	width: 100%;								/* Main sections spans the full width of the container */
}
#menu-sidebar {
	width: 180px;								/* Width of the menu bar in terms of container percentage */
	float: left;								/* Floated left */
}
#story {
	width: 580px;									/* Takes up 58% of the main div */
	height: auto;								/* Height automatic dependent on content */
	float: left;								/* Floated left within main */
	margin-right: 1.2em;						/* Spacing between the news story and the right hand links column */
}
#links-sidebar {
	width: 210px;									/* Width of the links sidebar in terms of container percentage */
	float: left;								/* Floated left */
}

/*---------------------------------------------------------------------------------------------------------------------------------------

		B	Left Column		-	Menu Bar

---------------------------------------------------------------------------------------------------------------------------------------*/

#menu-sidebar #news-menu {
	margin-right: 1em;							/* Spacing between the menu and the main story, white in colour */
}
#menu-sidebar #news-menu li {
	height: 2.5em;								/* This line coupled with line below has effect of centeringtext evrtically in li */
	line-height: 2.5em;							/* See line above */
	background-color: #99CCCC;					/* Background colour for list items */
	border-bottom: 0.1em solid gray;			/* A bottom border for each of the list items */
}
#menu-sidebar #news-menu li:hover {
	background-color: #333333;
}
#menu-sidebar #news-menu a {
	display: block;								/* Needed to allow us to set an explicit width to the a links */
	width: 95%;									/* Make the links span 95% of the li, making it clickable outwith the text */
	color: #383838;								/* Font colour for menu item links */
	text-transform: uppercase;					/* Capitalise the links */
	font-weight: bold;							/* Links are in bold type */
	padding-left: 0.5em;						/* Slight indentation of menu link text */
}
#menu-sidebar #news-menu li a:hover {
	text-decoration: none;
	color: #99CCCC;
}
#menu-sidebar .links-tab {
	background-color: #99CCCC;
	margin: 2em 1em 0 0;
	border: 0.1em solid #333333;
}
#menu-sidebar .date {
	color: #000066;								/* Navy blue colour */
	display: block;								/* Spans the full width of the column, pushing the title onto the second line */
}

/*---------------------------------------------------------------------------------------------------------------------------------------

		C	Middle Column	-	Story

---------------------------------------------------------------------------------------------------------------------------------------*/

#story p {
	line-height: 135%;							/* An increased line spacing in paragraph text */
	margin-bottom: 1.5em;						/* The spacing at the bottom of a <p>, dependent on current font size */
}
#story hr {
	height: 0.05em;								/* Height of the horizontal rule below news story title */
	color: #999999;								/* Colour of the horizontal rule */
	margin: 1em 0 1em 0;						/* Top and bottom margin for horizontal rule */
}
#story h2 {
	font: bold 2em Arial;						/* <h2> font */
	letter-spacing: -1px;						/* Lower letter spacing, neater */
	margin-top: 0.5em;							/* Spacing between date/source and the news story title */
}
#story h3 {
	font: bold 1.3em Arial;						/* <h3> font */
	margin-top: 0.5em;							/* Spacing between title and subtitle */
}
#story .date, #story .source {
	font-size: 0.85em;							/* Smaller font size */
	font-weight: bold;							/* Bold type */
	color: #99CCCC;
}
#story .source a {
	color: #99CCCC;
}
.news-image, .image-caption {						/* Automatic width allows the image's real width to be used */
	height: auto;								/* Automatic height allows the image's real height to be used */						/* Maximum image height allowed */			
}
.image-container {
width: 300px;
height: auto;
	float: right;								/* Float the image div, containing the image and the caption, to the left */								/* The image should not span more than 55% width of the story div */							/* Automatic height dependent on specific image */
	text-align: center;
    padding-left: 1.5em;						/* Primarily used for the centering of the caption text, better here than below */
	margin-bottom: 1em;

}
.image-caption {
	font-size: 0.85em;							/* Smaller font size for caption text */
	font-weight: bold;							/* Bold type */
	margin-top: 0.5em;							/* Spacing between the image and the caption */
	margin-bottom: 0.5em;						/* Spacing between the caption and the bottom of the image box */
}
#add-this {
	margin-top: 2em;							/* Margin at the top of the 'add this' icon */
}
.mainText {
	padding-bottom: 1em;						/* Spacing at the bottom of 'mainText' */
}
.rss {
	float: right;
	width: 28px;
	display: block;
}
/*---------------------------------------------------------------------------------------------------------------------------------------

		D	Right Column	-	Links Bar

---------------------------------------------------------------------------------------------------------------------------------------*/
.sidepanel {
    background-color: #99CCCC;					/* Light green background colour */
    border: 1px solid gray;						/* Grey border */
    margin: 0.7em 0;							/* Spacing at the top and bottom of the sidepanel */
	padding: 0.5em 0;							/* Padding at the top and bottom of the sidepanel */					
}
.sidepanel .header {
    margin-bottom: 0.5em;						/* Spacing between header and content of sidepanel */
	border-bottom: 1px solid gray;				/* Grey border */
}
.sidepanel .header h2 {
   	font-size: 1.2em;							/* Larger font-size */
    padding: 0 0.5em 0.5em 0.5em;				/* Header padding */
}
.sidepanel .body p {
    line-height: 125%;							/* Larger line height for body paragraph text */
    font-size: 0.85em;							/* Smaller font size */
	font-weight: bold;							/* Bold type */
    padding: 0 0.5em;							/* Left and right padding */
	margin-bottom: 0;							/* Over-ride default since their is only one paragraph */
}
.sidepanel .footer
	{
	padding-top: 0.5em;							/* Spacing between body and footer */
}
.sidepanel .footer a {
	display: block;								/* Make the link block span the full width of the sidepanel */
	text-align: center;							/* Center the link in this block */
	font-weight: bold;							/* Bold type */
	text-transform: uppercase;					/* Capitalise link text */
	background-color: #383838;					/* Dark grey background colour */
	margin: 0 0.5em;							/* Indentation around the link */
	padding: 0.5em 0;							/* Padding around the link */
	color: #FFFFFF;								/* White text colour */
}
.links-tab h5 {
	color: white;								/* White text */
	background-color: gray;						/* Background colour */
	padding: 0.5em;								/* Further padding added to the featured events tab title */
}
.links-tab {
	border: 1px solid gray;						/* Border round the featured events tab */
	margin: 0;									/* Indent all content within the featured events tab */
	margin-bottom: 1.2em;						/* Spacing between the different links tabs */
}
.links-tab li a {
	color: #383838;								/* Colour of the featured events links */
}
.links-tab li a:hover {
	text-decoration: none;						/* No underline when hovering over these links */
}
.links-tab li {
	padding: 0.5em;								/* Padding all round the list items */
	line-height: 120%;
	border-bottom: 1px solid gray;
	background-color: #99CCCC;
	font-size: 0.85em;
	font-weight: bold;
}
.links-tab h5 {
	padding: 0.5em;
	background-color: gray;
}
.links-tab h5 a {
	color: white;
}
#featured-events li:hover {
	background-color: #CCCCCC;
}
#links-sidebar .date {
	color: #000066;								/* Navy blue colour */
	display: block;								/* Spans the full width of the column, pushing the title onto the second line */
}
#SideGoogle {
    margin-top: 1em;
   	border: 1px solid #383838;									
	width: 94%;
    padding: 0.5em;
}

/*---------------------------------------------------------------------------------------------------------------------------------------

	4 Footer

---------------------------------------------------------------------------------------------------------------------------------------*/

#footer {
	width: 100%;								/* Footer spans the full width of the container */
	height: auto;								/* Automatic height dependent on content */
	float: left;								/* Float left */
	margin-top: 50px;							/* Spacing between main content and the footer */
	padding-top: 0px;							/* Spacing between main content and the footer, with the BG colour */
	background-color: #99CCCC;
	padding-bottom: 1.5em;						/* Spacing between the end of the footer and end of page, with the BG colour */
}
#bottom-menu {
	margin-bottom: 0.7em;						/* Spacing between the bottom of the menu and other footer content */
	text-align: center;							/* Central alignment for the menu */
	padding: 0.7em 0;							/* Top and bottom padding for bottom menu */
	background-color: gray;						/* Gray colour */
}
#bottom-menu li {
	display: inline;							/* Display the menu items adjacent to each other */
	padding-right: 80px;						/* Apply some spacing between menu items */
}
#bottom-menu li a {
	color: white;								/* Dark gray colour */
	text-transform: uppercase;					/* Capitalise menu links */
	font-weight: bold;							/* Bold type */
	font-size: 0.9em;							/* Smaller font size */
	text-decoration: none;						/* No underline */
}
#bottom-menu li a:hover {
	color: white;								/* White colour on hover of menu items */
}
#footer a:hover {
	color: gray;								/* Gray colour */
}
#footer a {
	color: #333333;								/* Dark gray colour */
	font-weight: bold;							/* Bold type */
	text-decoration: underline;					/* Underlined */
}
#footer p {
	padding-left: 15%;
	padding-bottom: 0.7em;
}
.close {
	display: block;								/* Spans the full width of the page in its own block */
	text-align: right;							/* Align text to the right of the page */
	margin-right: 75px;							/* Right indentation */
	margin-top: 2em;							/* Spacing between close window link and content above, no content below */
}

/*---------------------------------------------------------------------------------------------------------------------------------------

	6	Miscellaneous

---------------------------------------------------------------------------------------------------------------------------------------*/
.other-article {
	margin-top: 1em;
}