/*
This stylesheet should be used to implement the look and feel of your site. The styles for implementing the basic layout of elements within the page can be found in the layout.css file.
This stylesheet expects the following divs to be present in the HTML, in the order specified:
body
	div#all
		div#header
		div#content
		div#mainnav
		div#sidebar
		div#footer
*/
/* specify colours for all major areas of the page  */
body
{
}
div#all {
	 background-color:#ffffff;
}
div#header
{
	background-color: #ffffff ;
	border-bottom: 4px solid #2763A5;
	border-bottom-style: ridge;
	/* background-image: url("/images/header_background.jpg"); */
	
}
div#mainnav
{
	background-color:  #ffffff /* mainnav bg color */;
}
div#content
{
  background-color: white;
  /*padding: 2ex 2em 0.25em 2em; */
  padding: 2ex 2em 2em 2em;
  /*border: 1px solid #31309C; */
}
/* HEADER STYLES  */
/* styles for arranging the two images in the header */  
div#header 
{
	text-align: right;
}
img#world_logo
{
	position: absolute;
	top: 0px;
	left: 5px;
}
img#text_logo
{
	position: absolute;
	top: 0px;
	left: 94px;
}
/* FOOTER STYLES  */
div#footer
{
	/* centre-align the footer text, and make it a little smaller and paler than normal text  */
	text-align: center;
	font-size: 0.9em;
	color: #999;
	background-color: #ffffff;
	border-top: 4px solid #2763A5;
	border-top-style: ridge;
}
/* INLINE CONTENT IMAGES  */
/* often when you place images in the page as content, you want the surrounding textual content to wrap around it. If this is the case, give the img tag a class of 'inline' so that th styles below will be applied */
.inline
{
	float: right;
	clear: right;
	margin-right: 7px;
	margin-bottom: 7px;
}
/* styling for code snippets divs */
code{
	font-size: 1.3em;
	padding: 0.3em;
}
/*headline links  - styles for displaying links as a headline with associated image beneath*/
a.headline-link
{
	text-align: center;
	display: block;
	float: left;
	margin: 10px;
	font-family: lucida grande;
	font-style: normal;
	letter-spacing: 0.2em;
	width: 194px;
	background-color: #222; 
	border: 2px solid #222;
	color: #ffffff;
	padding: 3px;
	padding-bottom: 203px;
	text-decoration: none;
}
/*  change the background and border colour on mouseover or focus */
a:hover.headline-link, a:focus.headline-link
{
	background-color: #000;
	border-color: #000;
}
/* for every headline link, give it an id and then specify an appropriate image*/
#headline-1
{
	background-image: url('../images/chameleon.jpg');
	background-repeat: no-repeat;
	background-position: bottom left;
}
#headline-2
{
	background-image: url('../images/flower.jpg');
	background-repeat: no-repeat;
	background-position: bottom left;
}
#headline-3
{
	background-image: url('../images/chillies.jpg');
	background-repeat: no-repeat;
	background-position: bottom left; 
}
/* panels stuff */
/*style a div with a border around it. Set padding to 0px so that the h2 contained within the div can appear flush to the border of the div */
div.panel
{
background-color:white;
padding: 0px;
clear: both;
border: 2px solid #999;
margin: 1em;
margin-top: 2.5em;
}
/* set the  border-bottom  of the  h2 within the panel div to be the same as the  border for the div 
Set the background colour of the h2 to a dark colour that's similar to the div border colour, but a bit lighter 
*/
div.panel h2
{
border-bottom: 2px solid  #999;
color: #ffffff;
background-color:  #aaa;
padding: 2px;
margin: 0px;
text-align: center;
font-size: 1.1em;
}
/* add some margin to any element that's likely to appear in the panel div - this is done individually so that the h2 within the panel div remains flush to the border */
div.panel p, div.panel img, div.panel h3, div.panel h4, div.panel table, div.panel ul, div.panel form, div.panel div
{
	margin: 10px;
}
/*  a general class to apply to elemnts that you want to clear (for example, a paragrpah that ocurs before or after the floated headline links) */
.clear
{
	clear: both;
}

ul {
	margin-left:20;	
	padding:1;
}
li {
	margin-left:20;	
	padding:1;
}

#site-slogan
{
	color: #aaa;
	margin: 0;
	font-size: 85%;
	margin-left: 20px;
}