html { height: 100%; margin-bottom: 1px; padding-bottom: 1px;} /* To stop container div jumping a little to left or right depending on whether scroll bar is displayed */

/* For older browsers that don't recognise new HTML5 elements, and treat them as inline.
Is not enough to fix IE8 and older - need the HTML5shiv (or shim) in the HTML head section as well */
article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary
{
	display: block;
}

body 
{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: normal;
	background-color: #669999;
	color: #000000;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	margin-top: 20px;
	margin-bottom: 15px;	
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}

header
{
	border-top: 4px solid #ffffff;
	border-bottom: 4px solid #ffffff;
	padding-bottom: 0.9em;
	margin-bottom: 1em;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: #ffffff;
}

/* Note that the true width of wrapper is not 1029px but 950px - this is an IE workaround - see next bit of CSS below */
#wrapper
{
	width: 800px;
	border: solid #000000 3px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 1em;
	padding-left: 40px;
	padding-right: 35px;
	padding-bottom: 30px;
	background-color: #ffffff;
	position: relative;  border-radius: 25px;
}

/* IE width hack - 800px is the width we really want - we've had to increase it above to compensate for IE including both border and padding in width, which it shouldn't */
html>body #wrapper {
width: 719px;
} 

h1
{
	color: #ffffff;
	margin-top: 0.7em;
	margin-bottom: 0.5em;	
}

h2
{
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1.8em;
	color: #006479;
	font-style: italic;
}

h2.quotation
{
	font-size: 1.4em; color:#000000;
}

h3
{
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1.5em;
	color: #006479;
	font-style: italic;
	text-align: left;
	margin-bottom: 0.5em;
}

p
{
	color: #000000;
	margin-left: 0;
	margin-right: 0;	
	text-align: justify;
	line-height: 1.4em;	
}

img
{
	border: 1px solid #000000;  
}

img.leftalign
{
	float: left;
	margin-right: 2em;   

}
img.rightalign
{
	float: right; 
	margin-left: 2em;
	margin-top: 0.4em;
	margin-bottom: 1em;     

}

img.noborder
{
	border: none;  	
}

figure.FloatFigure
{
	float: left;
	margin-left: 0;
	margin-top: 0.5em;
	margin-right: 1.7em;  
}

figure.FloatFigure figcaption
{
	margin-top: 0.8em;
	margin-bottom: 1em;
	text-align: left;
	font-style: italic;
	font-size: 0.9em;
	line-height: 1.5em;
	color: #006479;
	width: 390px;
}

aside.videoclip
{
	float: right;
	width: 300px;
	margin-top: 0;
}

aside.videoclip p
{
	margin-top: 0.5em;
	margin-bottom: 0.3em;
	text-align: left;
	font-style: italic;
	font-size: 0.9em;
	line-height: 1.5em;
	color: #006479;
}

header img.leftside
{
	float: left;
	margin-top: 0.7em;
}

header img.rightside
{
	float: right;
	margin-top: 0.7em;	
}

nav
{
	margin-top: 0.3em;
	margin-bottom: 0.9em;
}

nav a
{
	letter-spacing: 0.05em; 
	font-weight: normal;
	text-decoration: none;
	padding-right: 2px;
	padding-left: 2px;
}

nav a:link, nav a:visited {
	color: #ffffff;
}

nav a:hover, nav a:active {
	color: #ffee00;
	border-bottom: 1px dotted; 
}

#wrapper a
{
	font-weight: normal;
	text-decoration: none;
}

#wrapper a:link, #wrapper a:visited {
	color: #55aa8e;
}

#wrapper a:hover, #wrapper a:active {
	color: #ff3f00;
	border-bottom: 1px dotted; 
}
blockquote {
	font-family: "Palatino Linotype", /*.."Book Antiqua", Palatino, serif;É*/
	color:  #006479;
	font-style: italic;	font-size: 1.1em;
	padding: .8em 1em 0.8em 1em;
	margin-left: 0;
	margin-top: 0.5em;	
	margin-bottom: 1.5em;
	background-color: #99b3ff; 
	text-align: left;
	width: 356px;  border-radius: 10px;
}