/* Defaults */
body {
font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
font-size: 14px;
color: #000;
background: #dcdcdc;
padding: 0;
margin: 0px;
/* font-size: 16px;
 * IE displays an ugly font-size by default if I leave this out. If I leave it in, it won't resize the text */
}

p {
margin: .4em 0;
}

ul	{
		margin: 0;
}

input {
	margin: 0.2em; .5em;
}

input.center{
font-size: x-large;
font-family: Arial, sans-serif;
font-weight: bold;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.5em;
margin-top: 0em;
color: #600;
}

acronym {	/* Adds a dotted underline to acronyms as per Firefox default */
  border-bottom: 1px dotted black;
}

th { padding-top: 1.5em;
}

/* Images and Captions */

.image	{
	margin:auto;
}

.image img {
margin:auto;
}

.image div {
margin:auto;
font-size: smaller;
text-align: center; 	
}


.center-large {
margin: 1em auto;
text-align: center;
font-size: large;
}

/* Links */

/*
p a {
padding: .2em;  
} - causes unpredictable an extra line of space around images that are links and floated or displayed as block elements in Firefox
   That's why the style is only applied to links within paragraph text - I try to keep images outside paragraphs  */

a:link {
color: #339;
/* text-decoration : none; */
}

a:visited {
color: #306;
text-decoration : underline; 
}

a:hover {
color: #000099;
background: #eee;
text-decoration : none;
}

/* Outer layer */

#outer {
border: 1px solid #000000;
margin: auto ;
padding: 0;
width: 1000px; /* should be max-width but then IE6 won't display properly in high res */
background: #aaa; /* should be the same as that of nav-bar to give impresson that navbar goes all the way down */
}

/* Header for section above the navbar and content area */
.header {
background: #000;
position: relative;
height: 100%;  /* Ensures that the background of the header stays black when viewed through IE */
overflow: hidden; /* Preserves layout, stops other blocks from floating up into the header - now no need for <br> in HTML 
 * Has the advantage that it prevents the Donate text extending down over the Content area if the page text size is increased by the viewer */
}

.header a {	/* making link to front page readable when images turned off */
color: #99f;
text-decoration : underline; 
}

/* Used for the SPIRASI logo that links back to home page */
.logolink { 	
padding: 0;
}

.donate-corner {
	position: absolute;
	top: 10px;
	right: 0px;
	background-color: black;
	color: red;	
	font-size: large;
	font-variant: small-caps;
	text-align: center;
	padding: 0;
	width: 245px; /* 1000-66-687-2(for borders)*/
}

/*.donate-corner p	{
	margin: .3em 0;
}*/

.donate-corner a	{
	display: block;
	border: 2px solid;
	border-color: #daa #966 #966 #daa;
	width: 6em;
	background-color:red;
	color: white;
	padding: .5em; 
	text-decoration: none;
	font-weight:bold;
	margin: 0 auto;
}

.donate-corner a:hover	{
	border-color: #966 #daa #daa #966 ;
	background-color:red;
	color: blue;
}

.donate-corner a:visited	{
	color: white;
}

#navbar	{
/*border: 0px 1px 1px 0px solid; */
padding-top: .5em;
width: 190px;
margin-left: 0px;
background: #aaa;
float: left;
text-align: center;
line-height: 0em; 
/* Line height is set to 0 so that the line breaks don't separate the block elements with extraneous white space.
 * The line breaks follow each of the links (which are rendered by the CSS as block level elements) for accessibility reasons
 * http://www.w3.org/TR/WAI-WEBCONTENT/#tech-divide-links */
}

/* CSS to hide "skip navigation" links from sighted users but not browsers using screen readers */
#skip 	{
	display: none;
}

#navbar h3	{
margin-bottom: .5em;
margin-top: 1.5em;
}

#navbar	p {
margin-top: .2em;
padding-top: .2em;
font-variant: small-caps;
}

#navbar a {
text-decoration : none;
line-height: 1.2em;
display: block;
margin: auto;
width: 80%;
padding: .3em; 
border-top: 1px solid #966;
}
#navbar a:link {
color: #009;
}
#navbar a:visited {
color: #009;
}
#navbar a:hover {
color: #000;
background : #ccc;
text-decoration : none;
}

#navbar .default-formatting a 	{
display: inline;
border: 0;
text-decoration : none;
padding: 0;
line-height: 1em;
font-variant: normal;
color: #009;
}

#navbar .default-formatting p 	{
margin: .5em;
padding: 0;
line-height: 1em;
font-variant: normal;
color: #040;
}

#navbar .default-formatting a:hover {
background : inherit;
text-decoration : underline;
}


.donate {
font-weight: bold;
font-size: x-large;
}

/* Content Section */

.content {
padding: 1em;
margin: 0;
margin-left: 2px;
color: black;
background: white;
overflow: hidden;  /* Necessary for the navbar to stay visible on the left. */
min-height: 70em; /* Ensures the content section pushes the footer past the bottom of the navbar */
height: auto;
}
/* for Internet Explorer */
/*\*/
* html .content {
height: 70em;
overflow: visible;
}
/**/


.content h1	{
	margin-top:0.5em;
	text-align: center;
	margin-bottom: 0em;
}

.content h2	{
	font-family: Georgia, serif;
	font-size: 1.4em;
	/*text-align: center; */
	margin-bottom: 0em;
	margin-top: 1em;
	clear: left;	/* I'd use clear:both but then archived and other news items drop below the float boxes on the RHS */
}

h2.featured	{
	font-family: Georgia, serif;
	font-size: 1.5em;
	color: #633;
}

.content h3	{
	/*font-family: Georgia, serif; */
	font-size: 1.1em;
	margin-bottom: 0em;
	margin-top: 1em;
	color: #222;
}

.content h4	{
	margin-bottom: 0px;
	font-size: 1em;
}


.content hr	{
	height: 1px;
	background: #ccc;
	border: 1px ;
}

.content img	{
	margin: 0px;
	border: solid black 1px;
}

img.right	{ /* float image to right with a gap of .5em from the text */
	float: right;
	margin-left: .5em
}
img.left	{ /* float image to left with a gap of .5em from the text */
	float: left;
	margin-right: .5em
}
img.center	{
	display: block;
	margin: .3em auto
}	/* center an image in the space available to it */


.content-footer	{
	width: 45em;
	margin: auto;
	padding: .5em;
	background: #eee;
	font-family: sans-serif;
}

.box {
	width: 15em;
	background-color: #FFF0F5;
	margin: .5em;
	padding: .5em;
	padding-bottom: 5px;
/*	The container div is floated to the right so that the boxes appear one under the other */
	border: 1px solid #ccc;
	overflow:hidden;
}


.box h2	{
	margin-top:0;
}

.highlight-box {
border: 1px solid red; 
background:#eee;
width: 80%;
margin: auto;
font-size: .9em; 
padding: .5em;
}

.note-box {
font-size: 0.9em;
border: 1px solid #bbb;
background: #eee;
padding: .5em;
margin: .5em;
overflow: hidden;
}

.author {
text-align: right;
}


.footer {
background: #c5c5c5; 
height: 100%; /* needed for IE so that the background fills the whole lot of the footer area */
border: solid #000000; 
border-width: 1px 0 0; 
/* overflow: hidden; */
position: relative;
margin: 0;
padding: 0;
}

.footer a	{
background: inherit;
}

.footer-left	{
position: absolute; 
top: 0.5em;
left: 0.5em;
font-size: .8em;
}

.footer-right	{
position: absolute; 
top: 0.5em;
right: 0em;
padding: .5em;
}

.footer-center	{
position: static;
width: 27em;
margin:auto;
font-size: .8em; 
padding: .7em;
margin-top: 0em;
margin-bottom: 0em;
}

.disclaimer	{
width: 80%;
margin:auto;
font-size: .9em;
}