@charset "utf-8";
/* CSS Document */

 body {
	margin: 0;
	padding: 0;
	color: #990000;
	background: #527BA7 center;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 1em;
}
.hdrhgt {
	margin-top: -0.7em;
	margin-bottom: 1em;
}

/*  margin and padding set to zero to remove space around the design */

#contentbottom {
	width: 660px;
	background: url("../images/contentbottom.gif") no-repeat bottom;
	margin: 0 auto;
	padding-top: 0px;
	border-top: 0px;
}
.rt-align {
	text-align: right;
}
.lft-align {
	text-align: left;
}



#content-top {
	width: 660px;
	background: url(../images/content-top%20copy.gif) no-repeat center;
	margin: 0 auto 0px;
	padding: 0em;
	height: 27px;
}


#main-img {
	background:	#CCC;
	margin: 0;
	text-align: center;
	padding: 0;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: red;
	border-bottom-color: red;
}

#container {
	background: #FFFFFF;
	margin-bottom: 0em;
	margin-right: auto;
	margin-left: auto;
	width: 660px;
	margin-top: 0px;
	border-bottom: 0px;
}
 
 #homelink {
	display: block;
	margin: 1em 2em 1em;
	padding: 2em 0 1em 1em;
	background: url(../images/mia.gif) 100% 100% no-repeat;
	background-color: #FFFFFF;
	}
	
/* homelink is an a (anchor) element that we want to display as a block with margins as specified and with an image in the block, all of which is clickable.  Basically this makes the entire masthead, less margins, clickable to link to the homepage */

#navlinks {
	margin: 0;
	padding: 0.5em 0;
	border-bottom-width: 2px;
	background-color: #CCCCCC;
	text-align: center;
	}
	
	/* the navlinks are an ordered list with elements that have margins and padding by default to make them show right, so margin set to zero removes the defaults.  Then the links are styled with padding instead.  BG color and text color are next specified to complete the styling of the links*/	
	
#navlinks li {
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #000066;
	font-weight: bold;
	}
	
	/* inline display for the ol, margin and padding makes the border appear centered as explained in the margins section under traing.  The 3em padding applied to the navlinks div pushes the whole ol to the right and makes it line up with the left edge of the image in the masthead. */
	
#navlinks li.last {
	border-right: 0;
	}
	
/* this removes the right border from the last link.  To do so requires a class of last that is applied to the last link in the markup. */
	
#navlinks a {
	color: #0E0E3E;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-variant: small-caps;
	}

/* this defines the color of the links, or a elements.  Note that the li elements have the a element as a child, so you could set the color of the li elements and the a elements would inherit that color (yes?) */

h1 	{
	color: #330033;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 2em;
	text-align: center;
	}
	
h1 a {
	text-decoration: none;
	color: #CC3300;
	}
	
h2	{
	color: #330033;
	font-weight: bold;
	margin: 0 0 2px 0;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 1.2em;
	line-height: 1.3em;
	text-align: center;
	}
.alnlft {
	text-align: left;
	margin-bottom: 1em;
}

	
h2 a { 
	text-decoration: none; 
	}
	
h3	{
	color: #330033;
	font-weight: bold;
	margin-top: 0;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	text-align: center;
	}
 
 h4 {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 1em;
	line-height: 1em;
	color: #000000;
	font-weight: bold;
}
li {
	font-family: "Trebuchet MS", Verdana, sans-serif;
}
a {
	text-decoration: none;
	color: #990000;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
}



 img {
	margin: 0 auto;
	display: block;
	padding: 0;
	}
	
	/*  masthead styles  ----------------*/

#masthead   {
	padding-right: 0px;
	padding-left: 0px;
	margin: 0em;
	padding-top: 1px;
}

/*  padding added to contain any margins that might be inside the
masthead div.  Without the padding, the margins would allow the color of
the element below to show through and appear as a space.  With the padding,
the color of the content area shows up to the inner edge of the border.  in other words,
all the way to the edge of the div.  */ 

#banner {
	margin: 0;
	border-bottom: 2px solid red;
	padding-top: 5em;
	}
	
#banner h2 {
	margin: 0em 0 1em 0em;
	}
 
	
#banner h3 {
	padding: 6px 0  0;
	}
	
#content {
	background-color:#FFFFFF;
	margin: 1px 2em 0;
	border-bottom-width: 1px;
	border-bottom-color: #FFFFFF;
	padding-bottom: 0.1px;
	}
	
#content img {
	margin: 5px auto auto;
	}
	
	
p {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 1em;
	text-align: justify;
	margin: 0px 0px 1.2em 0;
	line-height: normal;
	color: #000000;
}


#lftbox {
	width: 100px;
	height:	25px;
	border: 1px solid #FFFFFF;
	margin-left: 18em;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-top: 2em;
	}
	
#rtbox {
	width: 100px;
	height:	25px;
	border: 1px solid #FFFFFF;
	top: 1em;
	right: 1em;
	margin-left: 17em;
	margin-top: 3em;
	margin-bottom: 0em;
	}
	
#lang {
	margin: 1em 0 0em
	}
	
#footer {
	color: #000000;
	padding-bottom: 5px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999999;
	padding-top: 5px;
	}

#footer p {
	text-align: center;
	font-size: 0.7em;
	}
	
#imgbox {
	margin: 2em;
	}
	
#main-img img {
	float: none;
	}

#banner img {
	float: left;
	}

#container h1 {
	margin-top: -0.7em;
	}
 
#content h2 {
	margin-bottom: 15px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FF0000;
	padding-bottom: 0.5em;
	}
em {
	font-weight: bold;
	text-decoration: none;
	color: #000033;
}

.more {
	font-weight: bold;
	color: #000066;
}

#content h1 {
	padding-top: 1em;
	}