/* #something = id  /  .something = class 
Use IDs when there is only one occurence per page. 
Use classes when there are one or more occurences per page. */

/* HTML TAG SETTINGS */

body { 
	width: 1000px; /*sets width of page */
    color: #000; 
    margin: auto; /* 0px; /* sets margin around entire page, this is what sets the page in teh center of the screen */
	background: #005952 url(/images/bgpattern.jpg); /*sets background image linking it to locaql /images directory */
	text-align: center; 
}

body, ol, ul, p { 
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:   14px;
  line-height: 130%;
}


h1 {
	margin-top: 0px;
	padding-top: 0px;
	color: #005952; font-size: 37px; font-family: Verdana, Arial Black, sans-serif;
    line-height: 125%;
}

h2 {
	margin-top: 0px;
	padding-top: 0px;
	color: #005952; font-size: 20px; font-family: Verdana, Arial Black, sans-serif; font-weight: bolder;
	letter-spacing:0px; 
    line-height: 125%;
}

pre {
  font-family: times, serif;
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

/* table */
table {
	padding: 5px;
	border: 0px;
/*    border: thin solid black; */
    width: 100%; 
	border-collapse: collapse; 	
}

/* table data */
td {
    font-family: futura, arial, sans-serif;
    font-size:   11px;
    vertical-align: top; 
	text-align: center; 
	padding: 6px; /* padding (uniform offset) inside a table's cell */
/*	border: thin solid grey;  */
	/* background-color: #000  this would set the color inside the cell to black */
}

/* table header */
th {
    font-size:   13px;
    vertical-align: middle;
    text-align: center;
	border-bottom: thin solid black;
}

/* these next two alternate the colors of rows ina table */

tr.even {
    background-color: #EBDDE2;
}

tr.odd {
}


/* below changes the colors and effects of links */

a { color: #000000;
	text-decoration: none;
}
a:visited { color: #000000; }
a:hover { color: #0044ee;}

a.button {
	background: url(/images/sitetoolguy.jpg) no-repeat left top;
}


img { border: 0px; }

.floatleft {
    float: left;
	margin-left: 10px;
}	

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


.center {
	text-align: center;
}


/* WEB PAGE IDs */

#wrapper {
    position: relative; 
	width: 950px;
	padding: 0 25px 0 25px; 
	background: url(/images/bg.jpg) repeat-y;
}

#header {
  padding: 0px;
/*  margin-top: 20px; */
  margin-bottom: 0px;
/*  margin-left: 25px; */
  position: relative;
  height: 150px;
  width: 950px; 
/*  background-color: #fff; */
/*  background: url(/images/header1.jpg) no-repeat 50% 0;  sets image */

}

#footer {

  clear: both; 
  background: url(/images/footertop.jpg) no-repeat scroll; /* sets image */
  background-color: #005952; 
  text-align: center; 
  padding: 0px;
  padding-top: 15px;
  margin: 0; 
  width: 950px;
 
}

#footer #navigationheads ul{
	list-style-type: none;	
	display: block;  
	text-align: left;
}

#footer a:hover { color: #ffffff; }

#sitetools {
	background: #ffffff; 
	width: 950px;
	margin-bottom: 10px;
	border: 1px solid green;
}

/* sitetools table */
#sitetools table {
	border: 0px;
/*    border: thin solid black; */
    width: 100%;
	border-collapse: collapse; 	
}

/* table data */
#sitetools td {
    font-family: futura, arial, sans-serif;
    font-size:   12px;
    vertical-align: top; 
	text-align: left; 
/*	line-height: 25px; */
	padding: 6px; /* padding (uniform offset) inside a table's cell */
/*	border: thin solid grey;  */
	/* background-color: #000  this would set the color inside the cell to black */
}

#sitetools td input {
	color: #888888;
}
 #sitetools td select {
	width: 250px;
	font-size: 13px;
    font-family: futura, arial, sans-serif;
	color: green;
} 

/* table header */
#sitetools th {
    font-size:   12px;
    vertical-align: middle;
    text-align: center;
	border-bottom: thin solid black;
}

/* primary content area of the webpage */
#firstmain {
    position: relative;
	float: left; 
	text-align: center;
	padding: 5px;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 660px; 
	min-height: 550px;
/*	background-color: #fff; */
/*	border: 1px solid green; */
}

#main {
    position: relative; 
	float: left; 
	text-align: center; 
	padding: 20px 10px 10px 20px;
	margin-right: 0px;
	margin-bottom: 10px;
	width: 650px; 
	min-height: 623px;
/*	background-color: #fff; */
/*	border: 1px solid green; */
}

/* secondary content ara of the webpage */
#second {
	float: left; 
	display: inline;
	padding: 5px;
	margin-left: 13px;
	/* text-align: right; */
	width: 245px; /* 20% of body */
	min-height: 452px; 
	background-color: #fff;
/*	border: 1px solid green; */

}

/* tagged CMS content section of webpages */
#tagged {
    position: relative; 
	float: left; 
	text-align: left; 
	width: 630px;
	padding: 10px;
	background-color: #fff;
	border-top: 3px double green;
}

/* section of affinity webpages for visitor self-id */
#friendtool {
    font-family: futura, arial, sans-serif;
    font-size:   12px;
    vertical-align: top; 
	text-align: left;
	border: 1px solid black;
    background: #aaaaaa url(/images/toolback.jpg) repeat-x;
	padding: 6px; 
	width: 635px;
	height: 88px;
}

#friendtool tr {
/*	line-height: 25px; */
}

#friendtool h2 {
	color: #005952;
	margin: 0px;
}

#friendtool td {
	text-align: left;
	padding: 2px;
}

#friendtool td input {
	color: #555555;
}
 

#friendtool th {
    font-size:   16px;
    vertical-align: middle;
    text-align: center;
	border-bottom: thin solid black;
}

/* section of affinity webpages for affinity membership listing */
#friendmembers {

}

/* section of affinity webpages for affinity member blog */
#friendblog {

}

#friendlist{
	text-align:center;
}

#friendlist ul {

}

#friendlist ul li {
	list-style-type: none;	
	padding: 5px;
	float: left; 

}

#friendlist ul li a {
	display: block;	
	text-decoration: underline;
	font-weight: bold;
}


#left30main
{
	text-align: center;
	position: relative;
	margin-top: 5px;
	padding: 5px 15px 5px 15px;
	float: left;
	margin-left: 25px;
	width: 275px;
	height: 240px; 
	overflow: hidden;
	border: thin black solid;
}

#cent30main
{
	text-align: center;
	position: relative;
	margin-top: 5px;
	padding: 5px 15px 5px 15px;
	float: left;
	margin-left: 10px;
	width: 275px;
	height: 240px; 
	overflow: hidden;
	border: thin black solid;
}

.left30newuser
{
	text-align: left;
	position: relative;
	margin-top: 5px;
	padding: 5px 15px 5px 15px;
	float: left;
	margin-left: 25px;
	width: 275px;
	height: 350px; 
	overflow: hidden;
	border: thin black solid;
}

.cent30newuser
{
	text-align: left;
	position: relative;
	margin-top: 5px;
	padding: 5px 15px 5px 15px;
	float: left;
	margin-left: 10px;
	width: 275px;
	height: 350px; 
	overflow: hidden;
	border: thin black solid;
}


.centnewuser
{
	text-align: left;
	position: relative;
	margin-top: 5px;
	padding: 5px 15px 5px 15px;
	float: left;
	margin-left: 10px;
	width: 592px;
	height: 400px; 
	overflow: hidden;
	border: thin black solid;
}


/* primary content area of the webpage */
.headmain {
	float: left; 
	text-align: center;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 650px; /* 75% of header */
	min-height: 100px;
/*    border: 1px solid gray; */
}


/* secondary content ara of the webpage */
.headsecond {
	float: left; 
	padding-right: 10px;
	text-align: right;
	width: 230px; /* 20% of header */
	min-height: 100px;
/*    border: 1px solid gray; */
}


/* box area for divisions inside main or secondary page areas */
.box {
	position: relative;
/*	border: 1px solid green; */
	padding: 5px;
}

.linedbox {
	position: relative;
	border: 1px solid grey; 
	padding: 15px;
}
/* special box area for featured or highlighted content w/in main or secondary page areas */
.featured {
	text-align: left;
	padding: 10px;
	min-height: 240px; 
}

.post {
	text-align: left;
	padding: 10px;
}

.pagehead {
	text-align: left;
	padding: 25px 20px 0 55px;
}


/* offset text box */
.note {
	font-size: .85em;
	font-style: italic;
	margin: 0 75px 10px 75px;
	background: #dddddd;
	border: 3px solid #000000;
	text-align: left; 
	padding: 10px;
}

/* For RedBox formatted popup boxes*/
#splash_page {

}


#neighborhoods {

}

#neighborhood td {
    font-family: futura, arial, sans-serif;
    font-size:   10px;
    vertical-align: top; 
	text-align: center; 
	height: 220px;
	padding: 6px; /* padding (uniform offset) inside a table's cell */
	border: thin solid grey;  
	/* background-color: #000  this would set the color inside the cell to black */
}

.redbox {
/*  position: absolute; */
  padding: 10px;
  margin: 20px;
  margin-left: 115px; 
  margin-right: 300px;
  border: medium solid black;
  background-color: white;
  width: 770px;
  min-height: 570px; 
  display: none; 
  z-index: 102;
}

.redbox .closebox {
/*	position: absolute;
	right: 3px;
	top: 3px; */
}

.storypopup {
  padding: 30px;
  margin: 20px;
  text-align: left;
  border: thin solid black;
  background-color: white;
  display: none; 
  min-height: 400px;
  width: 500px;	
  z-index: 101;
}

.story {
  padding: 30px;
  text-align: left;
}
.clearboth {
	clear: both;
}
/* For images in neighborhood popup */


.hood img {
	width: 120px;
}


#email_signup {
	height: 20px;
	width: 400px;
	position: absolute;
	left: 90px;
	top: 140px;
}

#languages {
	height: 30px;
	width: 400px;
	margin-left: 5px;

}

.sidesubbox {
	padding: 0px; padding-top: 10px; clear: both;
}

/* box for learn main page */

.learnbox {
	background: transparent url("/images/learnbox.jpg") no-repeat scroll 0 0; 
	display: block;
	height: 171px;
	margin: 0 0 10px 20px; 
	text-align: left;
	padding-left: 200px;  padding-top: 5px; padding-right: 10px;
}


table.donate {
	width: 400px;
	margin-left: 120px;
}

.donate td.label {
	text-align: right;
	font-size: 14px;
}

.donate td.input {
	text-align: left;
}

/* NAVIGATION STUFF */

#navigation {
/*	padding: 0 10 0 10; */	
/*	text-align: center; */
	
}

#navigation .box {

}

#navigation ul {
    width: 240px;
	padding-left: 15px;
	margin: 0px;
}

#navigation ul li.single {
	list-style-type: none;	
	height: 110px;
	width: 110px;
	float: left;
}

#navigation ul li.double {
	list-style-type: none;	
	height: 110px;
	width: 220px;
	float: left;
}

#navigation ul li.quarter {
	list-style-type: none;	
	padding-left: 5px; 
	padding-top: 30px;
	float: left;
	height: 50px;
	width: 50px;
}

#navigation ul li.youbox {
	text-align: center;
	list-style-type: none;	
	padding-left: 5px; padding-top: 10px; 
	margin-bottom: 10px;
	height: 150px;
	width: 200px;
	float: left;	
}


#navigation ul li.banner {
	text-align: center;
	list-style-type: none;
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px; 
	height: 30px;
}

#navigation ul li.banner h3 a{
	text-align: center;
	margin: 0px;
	padding: 0px; 
	height: 30px;
}


#navigation ul li a {
	display: block;	
	list-style-type: none;
/*	text-indent: -9999px; */
}

/* act button */
#navigation ul li a.actbutton { 	
						background: transparent url("/images/buttons/act_button.jpg") no-repeat scroll 0 0;
}


#navigation ul li a.actbutton:hover { 
						background: transparent url("/images/buttons/act_button_hover.jpg") no-repeat scroll 0 0;  
}

/* learn button */
#navigation ul li a.learnbutton { 	
						background: transparent url("/images/buttons/learn_button.jpg") no-repeat scroll 0 0;
}


#navigation ul li a.learnbutton:hover { 
						background: transparent url("/images/buttons/learn_button_hover.jpg") no-repeat scroll 0 0;  
}

/* contact button */
#navigation ul li a.contactbutton { 	
						background: transparent url("/images/buttons/contact_button.jpg") no-repeat scroll 0 0;
}


#navigation ul li a.contactbutton:hover { 
						background: transparent url("/images/buttons/contact_button_hover.jpg") no-repeat scroll 0 0;  
}

/* meet button */
#navigation ul li a.meetbutton { 	
						background: transparent url("/images/buttons/meet_button.jpg") no-repeat scroll 0 0;
}


#navigation ul li a.meetbutton:hover { 
						background: transparent url("/images/buttons/meet_button_hover.jpg") no-repeat scroll 0 0;  
}

/* multimedia button */
#navigation ul li a.multimediabutton { 	
						background: transparent url("/images/buttons/multimedia_button.jpg") no-repeat scroll 0 0;
}


#navigation ul li a.multimediabutton:hover { 
						background: transparent url("/images/buttons/multimedia_button_hover.jpg") no-repeat scroll 0 0;  
}

/* donate button */
#navigation ul li a.donatebutton { 	
						background: transparent url("/images/buttons/donate_button.jpg") no-repeat scroll 0 0;
}


#navigation ul li a.donatebutton:hover { 
						background: transparent url("/images/buttons/donate_button_hover.jpg") no-repeat scroll 0 0;  
}

#navigation ul li a.yourstory { 	
						background: transparent url("/images/buttons/your_story_button.jpg") no-repeat scroll 0 0;
						width: 210px;
						height: 110px;
}

#navigation ul li a.yourstory:hover { 
						background: transparent url("/images/buttons/your_story_button_hover.jpg") no-repeat scroll 0 0;  
						width: 210px;
						height: 110px;
						padding: 5px;
}

#navigation ul li a.friends { 	
						background: transparent url("/images/buttons/friends_button.jpg") no-repeat scroll 0 0;
						width: 210px;
						height: 110px;
}

#navigation ul li a.friends:hover { 
						background: transparent url("/images/buttons/friends_button_hover.jpg") no-repeat scroll 0 0;  
						width: 210px;
						height: 110px;
}

#navigation a {
	height: 100px; 
/*	text-indendent: -9999px; */
}


/* Navigation bar for splash page */

#navigationsplash {
/*	padding: 0 10 0 10; */	
/*	text-align: center; */
	
}

#navigationsplash .box {

}

#navigationsplash ul {
    width: 900px;
	padding-left: 15px;
	margin: 0px;
}

#navigationsplash ul li.single {
	list-style-type: none;	
	height: 110px;
	width: 110px;
	float: left;
}

#navigationsplash ul li.double {
	list-style-type: none;	
	height: 110px;
	width: 220px;
	float: left;
}

#navigationsplash ul li.quarter {
	list-style-type: none;	
	padding-left: 5px; 
	padding-top: 30px;
	float: left;
	height: 50px;
	width: 50px;
}

#navigationsplash ul li.sidesubbox {
	text-align: center;
	list-style-type: none;	
	padding-left: 5px; padding-top: 10px; 
	margin-bottom: 10px;
	height: 150px;
	width: 200px;
	float: left;	
}


#navigationsplash ul li.banner {
	text-align: center;
	list-style-type: none;
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px; 
	height: 30px;
}

#navigationsplash ul li.banner h3 a{
	text-align: center;
	margin: 0px;
	padding: 0px; 
	height: 30px;
}


#navigationsplash ul li a {
	display: block;	
	list-style-type: none;
/*	text-indent: -9999px; */
}

/* act button */
#navigationsplash ul li a.actbutton { 	
						background: transparent url("/images/buttons/act_button.jpg") no-repeat scroll 0 0;
}


#navigationsplash ul li a.actbutton:hover { 
						background: transparent url("/images/buttons/act_button_hover.jpg") no-repeat scroll 0 0;  
}

/* learn button */
#navigationsplash ul li a.learnbutton { 	
						background: transparent url("/images/buttons/learn_button.jpg") no-repeat scroll 0 0;
}


#navigationsplash ul li a.learnbutton:hover { 
						background: transparent url("/images/buttons/learn_button_hover.jpg") no-repeat scroll 0 0;  
}

/* contact button */
#navigationsplash ul li a.contactbutton { 	
						background: transparent url("/images/buttons/contact_button.jpg") no-repeat scroll 0 0;
}


#navigationsplash ul li a.contactbutton:hover { 
						background: transparent url("/images/buttons/contact_button_hover.jpg") no-repeat scroll 0 0;  
}

/* meet button */
#navigationsplash ul li a.meetbutton { 	
						background: transparent url("/images/buttons/meet_button.jpg") no-repeat scroll 0 0;
}


#navigationsplash ul li a.meetbutton:hover { 
						background: transparent url("/images/buttons/meet_button_hover.jpg") no-repeat scroll 0 0;  
}

/* multimedia button */
#navigationsplash ul li a.multimediabutton { 	
						background: transparent url("/images/buttons/multimedia_button.jpg") no-repeat scroll 0 0;
}


#navigationsplash ul li a.multimediabutton:hover { 
						background: transparent url("/images/buttons/multimedia_button_hover.jpg") no-repeat scroll 0 0;  
}

/* donate button */
#navigationsplash ul li a.donatebutton { 	
						background: transparent url("/images/buttons/donate_button.jpg") no-repeat scroll 0 0;
}


#navigationsplash ul li a.donatebutton:hover { 
						background: transparent url("/images/buttons/donate_button_hover.jpg") no-repeat scroll 0 0;  
}

#navigationsplash ul li a.yourstory { 	
						background: transparent url("/images/buttons/your_story_button.jpg") no-repeat scroll 0 0;
						width: 210px;
						height: 110px;
}

#navigationsplash ul li a.yourstory:hover { 
						background: transparent url("/images/buttons/your_story_button_hover.jpg") no-repeat scroll 0 0;  
						width: 210px;
						height: 110px;
						padding: 5px;
}

#navigationsplash ul li a.friends { 	
						background: transparent url("/images/buttons/friends_button.jpg") no-repeat scroll 0 0;
						width: 210px;
						height: 110px;
}

#navigationsplash ul li a.friends:hover { 
						background: transparent url("/images/buttons/friends_button_hover.jpg") no-repeat scroll 0 0;  
						width: 210px;
						height: 110px;
}

#navigationsplash a {
	height: 100px; 
/*	text-indendent: -9999px; */
}

#storylist ul li {
	list-style-type: none;	
	display: block;
	float: left;
}


.preloaded-images {
	visibility: hidden;
	overflow: hidden;
	height: 1px;
	width: 1px;
}

.preload1 {
	background-image:url(/images/buttons/your_story_button_hover.jpg);
	display: none;
}

.preload2 {
	background-image:url(/images/buttons/donate_button_hover.jpg);
	display: none;
}
.preload3 {
	background-image:url(/images/buttons/multimedia_button_hover.jpg);
	display: none;
}
.preload4 {
	background-image:url(/images/buttons/meet_button_hover.jpg);
	display: none;
}
.preload5 {
	background-image:url(/images/buttons/contact_button_hover.jpg);
	display: none;
}
.preload6 {
	background-image:url(/images/buttons/learn_button_hover.jpg);
	display: none;
}
.preload7 {
	background-image:url(/images/buttons/act_button_hover.jpg);
	display: none;
}


.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}


/* ERROR HANDLING STYLES */
#errorExplanation {
  text-align:left;
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}