/* ------------------- Defining areas ---------------- */

body {
	background-color: white;
	margin: 0px;
	padding: 0px;
	}

#banner {
	background: url('../images/ds/banner-bg2.jpg') repeat-x bottom left;
	background-color: #3399cc; /* sky blue */
	position: relative;
	left: 0px;
	top: 50px; /* top margin same as height of title image */
	height: 80px; /*height of bg image minus 2xpadding, padding is needed or search box sticks to top */
	width: 100%;
	margin: 0px;
	padding: 10px 0px 10px 0px;
	}


#content-pane {
	position: relative;
	top: 50px; /* enough to clear the banner div */
	left: 0px;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	background-color: white;
	clear: both;
	background: url('../images/ds/content-bg.jpg') repeat-y top left;
	width: 931px;
	}

#content {
	position: relative;
	top: 10px;
	left: 0px;
	background-color: white;
	border: 4px double #006699; /* mid blue */
	margin: 0px 0px 10px 150px; /*left margin = width of tabs, linked to margin of title minus content-pane padding, right margin is width of deco-pane*/
	z-index: 1;
	padding: 10px 0px 0px 10px;
    width: 550px;
}

#tabs {
	background-color: transparent;
	width: 126px; /* margin of content  = negativemargin-borderwidth*/
	margin: 10px 14px 10px -151px; /*left margin is affected by the padding of activetabs right margin is for ie only, doesn't affect firefox*/
	float: none; /* necessary for a workaround a bug in ie6, this div MUST be enclosed in a div with float left */
	clear: both;
	position: relative;
}

#footer {
	position: relative;
	top: 2px;
	left: 0px;
	background-color: transparent;
	padding: 0px;
	width: 100%;
	}

#footer-banner {
	padding: 1px 0px 1px 0px;
	background-color: white;
	/* border: 3px solid #3399cc; /* sky blue */
	/*height: 60px; /*height of images + 2xpadding*/
	margin: 0px 0px 10px 200px; /* left margin = same margin as title */
	clear: none;

	}

#contact {
	/*width: 200px; /* same as deco pane */
	position: relative;
	float: right;
	right: 20px;
	display: inline;
	padding: 0px;
	background-color: transparent;
	}

#deco-pane {
	position: relative;
	float: right;
	top: 0px;
	right: 0px; /* need to account for image border if present */
	width: 160px; /* right margin of page-margin = width of deco-pane */
	margin: 0px 0px 0px 0px;
	background-color: white;
	padding: 0px;
	}

#search {
	margin: 20px 0px 0px 200px; /* left margin same as content pane */
	padding: 5px;
	background-color: transparent;
	position: relative;
	width: 600px; /*same as logo image */
	}

#contrib-banner {
	background-color: #003366; /* dark blue */
	position: relative;
	left: 0px;
	top: 50px; /* enough to clear the banner div */
	height: 1.0em;
	width: 100%;
	margin: 0px;
	padding: 0.2em 0px;
	}


#admin-banner {			/* currently the same as the partners style for consistency but can be changed */
	background-color: #003366; /* dark blue */
	position: relative;
	right: 0px;
	top: 40px; /* CHECK!!! */
	height: 1.0em;
	width: 100%;
	margin: 0px;
	padding: 0.2em 0px;
	}

/*hack to make clear work in IE6 and below */
* html #content {
height: 1%;
}


/* ---------------- layout styles --------------- */

.clear {
	clear: both;
	visibility: hidden;
	position: relative;
}

div.photo-left {
	margin: 10px;
	width: 400px;
	float: left;
	}
div.photo-right {
	margin: 10px;
	width: 400px;
	float: right;
	}

essay-left {
	text-align: left;
}

essay-right {
	text-align: right;
}

img {
	border: none;
	margin: 5px;
	}

img.left {
	margin: 5px;
	float: left;
	}

img.right {
	margin: 5px;
	float: right;
	padding: 0px;
	}

table {
	margin: 0px;
	padding: 0px;
	}
tr {
	margin: 0px;
	padding: 0px;
	}
td {
	margin: 0px;
	padding: 0px;
	text-align: center;
	}



.border {
	border: 3px solid #006699; /* mid blue */
}


/* --------------------------- text styles ------------------------ */


p {
	margin: 0.5em 0.6em;
	text-align: left;
	font-family: Arial, sans-serif;
	font-size: 100%;
	color: black;
	}

p.nav {
	margin: 0.2em 0.6em;
	text-align: right;
	font-family: Arial, sans-serif;
	font-size: 80%;
	color: black;
	}

p.sources {
	margin: 0.4em 0.6em;
	text-align: left;
	font-family: Arial, sans-serif;
	font-size: 90%;
	color: black;
	}

p.quote {
	margin: 0em 2.5em;
	text-align: left;
	font-family: Arial, sans-serif;
	font-size: 100%;
	color: black;
	font-style: italic;
	}

p.sitemap1 {
	margin: 0em 2em;
	text-align: left;
	font-family: Arial, sans-serif;
	font-size: 80%;
	color: black;
	}

p.sitemap2 {
	margin: 0em 4em;
	text-align: left;
	font-family: Arial, sans-serif;
	font-size: 80%;
	color: black;
	}

p.extras { /*I don't think this style is used any more */
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 70%;
	}

.partners {
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 60%;
	color: white;
	padding: 0px;
	margin: 0px;
	}

.admin {		/* currently the same as the partners style for consistency but can be changed */
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 70%;
	color: white;
	padding: 0px;
	margin: 0px;
	}

.activetab {
	width: 100%; /* linked to width of tabs div*/
	background-color: white;
	border-top: 4px double #006699; /* mid blue */
	border-left: 4px double #006699; /* mid blue */
	border-bottom: 4px double #006699; /* mid blue */
	margin: 10px 0px 0px -2px;
	text-align: right;
	color:  #006699; /* mid blue */
	font-family: Arial, sans-serif;
	font-weight: bolder;
	font-size: 100%;
	padding: 5px 8px 5px 5px; /*the padding adds to the total width of the tab */
	position: relative;
	z-index: 2;
}

.inactivetab {
	width: 100%; /* linked to width of tabs div*/
	background-color: white;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	margin: 10px 0px 0px -2px;
	text-align: right;
	color: #003366; /* dark blue */
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 100%;
	padding: 5px 8px 5px 5px;
	position: relative;
	z-index: 0;
}

.inactivetabtiny {
	font-size: 65%;
}

.alignright {
	text-align: right;
	}

h1 {
	text-align: center;
	color:  #003366; /* dark blue */
	font-family: Tahoma, Arial, sans-serif;
	font-size: 120%;
	margin: 0.2em 0px 0.1em 0px;
	padding: 0px;
	font-weight: bold;
	}

h2 {
	text-align: center;
	color: #003366; /* dark blue */
	font-family: Tahoma, Arial, sans-serif;
	font-size: 110%;
	margin: 1em 0px 0.1em 0px;
	padding-bottom: 10px;
	font-weight: bold;
	}

h2.author {
	text-align: center;
	color:  #003366; /* dark blue */
	font-family: Tahoma, Arial, sans-serif;
	font-size: 90%;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	}

h2.deco { /*this is used in the right hand pane */
	text-align: center;
	color: #003366; /* dark blue */
	font-family: Tahoma, Arial, sans-serif;
	font-size: 100%;
	margin: 1em 0px 0.1em 0px;
	padding-bottom: 2px;
	font-weight: bold;
	}

h3 {
	text-align: left;
	color:  #003366; /* dark blue */
	font-family: Tahoma, Arial, sans-serif;
	font-size: 100%;
	margin: 0.8em 0.2em 0.1em 0.2em; /* smaller left and right margins than paragraphs */
	padding-top: 10px;
	font-weight: bold;
	}

h4 {
	text-align: left;
	font-family: Arial, sans-serif;
	font-size: 80%;
	margin: 0.8em 0em 0.1em 0em;
	padding: 0px;
	}

li {
	margin: 0.2em 0.6em;
	text-align: left;
	font-family: Arial, sans-serif;
	font-size: 90%;
	color: black;
	}


.button {
	text-align: center;
	margin: 0px;
	padding: 0px;
}

form {
	text-align: center;
	margin: 0px;
	padding: 0px;
	font-family: Arial, sans-serif;
	font-size: 100%;
	color: black;
}

.button span {
	border: 1px solid #003366; /* dark  blue */
	background-color: #006699; /* mid blue */
	color: white;
	text-align: center;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 100%;
	padding: 5px;
	margin: 5px;
}

input {
	background-color: white;
	border: 1px solid #003366; /* dark  blue */
}


.searchButton {
    border: 1px solid #003366; /* dark  blue */
    background-color: #006699; /* mid blue */
    color: white;
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 100%;
    padding: 5px;
    margin: 0px;
}

.fieldName {
    font-weight: bold;
}

.fieldNameLocal {
    font-weight: bold;
    font-size: 80%;
}

/* ================= LINKS ================ */

a:link {
	color: #003366; /* dark  blue */
	font-weight: bold;
	text-decoration: none;
	}
a:visited {
	color: #003366; /* dark  blue */
	font-weight: bold;
	text-decoration: none;
	}
a:hover {
	color: #006699; /* mid blue */
	font-weight: bold;
	text-decoration: underline;
	}
a:active {color: #006699; /* mid blue */
	}

a.partner-link:link {
	color: white;
	font-weight: bold;
	text-decoration: none;
	}
a.partner-link:visited {
    color: white;
    font-weight: bold;
    text-decoration: none;
    }

a.admin-link:link { /* same as partner link */
	color: white;
	font-weight: bold;
	text-decoration: none;
	}

a.admin-link:visited { /* same as partner link */
    color: white;
    font-weight: bold;
    text-decoration: none;
    }


/* -------------- this code displays text behind the title image in case images are turned off, also improves google rating ----- */
h1#pageheader {
	margin: 0px;
	padding: 0px;
   	position: absolute;
	top: 0px;
	left: 160px; /*should line up with content pane left margin */
	width: 600px; /*same as title image */
	height: 50px; /*same as title image */
	overflow:hidden;
	clear: both;
	color: #006699; /* mid blue */
	}
h1#pageheader span {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
	width: 600px; /*same as title image */
	height: 50px; /*same as title image */
	background: url("../images/ds/elta-title.jpg") top left no-repeat;

	}