/*
Style Guide:
Color Scheme:Colors selected from the logo 
Background color #C6D9EA
orange color: ff9937 for h1
navy blue from logo 013370 for background in navigation and also for h2, h3 and paragraphs in body
light blue from logo: 446fa2 for foreground color in the links in navigation

TextLogo: defined in .textlogo -- to be used whenever the name of United Way of Hunt county appears in the site
Table: Use is minimized as much as possible except for few pages like listing board members.
Gallery: Use of Lisghtbox script to display them enlarged and use of lists with block display to lay the thumbnails.
Feedback: feedback.asp to process the form.
*/

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	text-align: center;
}

/* 
It has width of 760px so as to enable comfortable viewing even from small screen resolution of 800*600.
Curves are placed at the four corners of the page using four divs to give a curved appearance to the page
Margin-left and margin-right are set to auto to center the content of the page in the browser window.
*/

div.upperleft {
	
	width: 955px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	
	background-color: #C6D9EA;
	background-image: url('images/upperleft.gif');
	background-repeat: no-repeat;
	background-position: top left;
}

div.upperright {
	background-image: url('images/upperright.gif');
	background-repeat: no-repeat;
	background-position: top right;
}

div.lowerleft {
	background-image: url('images/lowerleft.gif');
	background-repeat: no-repeat;
	background-position: bottom left;
}

div.lowerright {
	background-image: url('images/lowerright.gif');
	background-repeat: no-repeat;
	background-position: bottom right;
}

/*
This is intended to be used as text logo for United Way of Hunt county wherever its name appears in the site.
*/

.textlogo {
	font: 13px  Georgia, "Times New Roman", Times, serif;
	color: #446fa2;
	font-style: italic;
	background-color: transparent;
}
/* 
This is the navigation section which floats to the left of each page. The content of navigation is #included in each page.
Use of list and changing the background as the mouse is moved over the links gives the navigation button like look.
*/
#navigation {
	float: left;
	margin-top: 30px;
	margin-left: 15px;
	background-color: #013370;
}
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
#navigation li {
	width: 150px;
	border-bottom: 1px solid #66CCFF;
	margin: 0;
	padding: 0;
	font-size: 80%;
	vertical-align: bottom;
	text-align: left;
}
/*defining the appearance of hyper links in the navigation area*/
#navigation a:link, #navigation a:visited {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 12px solid #013370;
	border-right: 1px solid #013370;
	background-color: #446fa2;
	color: #FFFFFF;
	text-decoration: none;
}
#navigation a:hover {
	background-color: #013370;
	color: #FFFFFF;
}
/* 
Content has the main content of the page.
It has a width of 550 px and is floated to the right so as to separate from the navigation section.
The texts are justified and paragraphs have line height of 1.8em for easier reading.
*/

#content {
	width: 750px;
	margin-top: 30px;
	color: #013370;
	font-size: 13px;
	text-align: justify;
	float: right;
	padding-right: 1em;
	}
#content p {
	line-height: 1.8em;
	padding-right: 1em;
}
#content ol {
	line-height: 1.8em;
	margin-right: 1em;
}

/*
This defines the heading of level 1 for the site.
This level of heading is put at the top of each page for consistency
*/
#content h1 {
	font: normal 180% Georgia, "Times New Roman", Times, serif;
	color: #013370;
	background-color: transparent;
}
/*
This is heading of level two used for the secondary headings in the pages.
This kind of heading has a dotted border at the bottom
*/

#content h2 {
	font-size: 15px;
	color: #013370;
	background-color: transparent;
	border-bottom: 1px dotted #446fa2;
	margin-right: 1em;
}
/*Heading 3 is used for headings that are not much significant*/
#content h3 {
	font-size: 13px;
	color: #013370;
	background-color: transparent;
	margin-right: 1em;
	margin-bottom: .2em;
}

/*
defining the appearance of links is the page
the links change background and are underlined and over lined on hover
*/
#content a:link, #content a:visited
{
	text-decoration: underline;
	color: #013370;
}
#content a:hover
{
	text-decoration: underline overline;
	color: #fff;
	background-color:#013370;
}

/*
This defines the appearance of the footer, its content is #included for each page for easier editing.
*/
#footer {
	clear: both;
	font-size: 70%;
	color: #999;
	height: 4em;
	vertical-align: middle;
	text-align: center;
	padding-top: 2em;
}
/*defining the appearance of links in the footer section*/
#footer a:link, a:visited
{
	text-decoration: underline;
	color: #999;
}

/*to be used to clear floating elements on the both sides*/
.clear
{
	clear: both;
}
/*to center the text*/
.centered
{
	text-align: center;
}
/*images in the site have no border unless specified by the class they use*/
img
{
	border: none;
}
/*defining the horizontal ruler used in the site*/
hr
{
	border: none;
	background-color: #ADD8E6;
	width: 80%;
	color:#446fa2;
	height: 1px;
	text-align: center;
}

/* 
This section defines the appearance of the thumb nails in the photo gallery used in the events page
Use of list with block display lays the pictures with the description under them.
Java script Lightbox 1.0 has been used to enlarge the thumb nails.
*/
#gallery {
	list-style-type: none;
}
#gallery li {
	float: left;
	margin-right: 6px;
	margin-bottom: 10px;
	font: bold 0.8em Arial, Helvetica, sans-serif;
	color: #446fa2;
}
#gallery img {
	display: block;
	padding: 4px;
}

/*
Defining the appearance of the form to be used in the feedback section
*/
form {
	font-size: 12px;
	color: #013370;
}

input.txt {
  color: #00008B;
  background-color: #E3F2F7;
  border: 1px inset #00008B;
  width: 200px;
}
input.btn {
  color: #00008B;
  background-color: #ADD8E6;
  border: 1px outset #00008B;
}

form textarea {
  color: #00008B;
  background-color: #E3F2F7;
  border: 1px inset #00008B;
  width: 300px;
}
form p {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
}
form p label {
  float: left;
  width: 20%;
  font: bold 13px Arial, Helvetica, sans-serif;
}

.floatright
{
float: right;
padding: 10px;
margin: 10px;
}

.lightblue
{
	color:#66CCFF;
}
.red
{
color:#FF0000;
}

.searchresults
{
font: normal 180% Georgia, "Times New Roman", Times, serif;
color: #013370;
}

.big
{
font-size:20px;
}
.feedback
{
	padding: 5px;
	border: 1.5px dotted #66CCFF;
	background-color: #f1f8fa;
}

.joke
{
	padding: 5px;
	border: 1.5px dotted #66CCFF;
	background-color: #f1f8fa;
}

/*table for mukunda in nutshell
*/
.where_table
{
	color:#3f3f3f;
	border-collapse: collapse;
}
.row1
{
	border-top: 1px solid #e0e6e8;
	border-bottom: 1px solid #e0e6e8;
	background-color: #f1f8fa;
}
.row2
{
	background-color: #fff;
	
}

.clearboth
{
	clear: both;
}