/**************************
 * Palette 
 *         gold  #ffd65b
 *    dark blue  #3d5561
 *   light blue  #84a9b5
 ************************** */

body {
    padding:      0;
    margin:       0;
    color:        black;
    background:   #558;
    font-family:  Verdana, Arial, Helvetica, sans-serif;
    font-size:    12px;
}

p {
    margin:  1em 3em 1em 2em;
    text-align: justify;
    padding-left: 0em;
}

img {
    border-width:  0;
}

img.float {
    margin: 1em 2em 1em 2em;
}

blockquote {
    margin:  1em 4em 1em 4em;
}

/*###############################
FLOATING IMAGES
################################*/
.img-inline-left {
	float: left;
	margin-right: 1em;
}
.img-inline-right {
	float: right;
	margin-left: 1em;
	margin-right: 1em;
}
.img-inline-left, .img-inline-right {
   padding-top: 1em;
	text-align: center;
  border: 0; 
}

/*############################
FLOATING LISTS
#############################*/

ul.feature-list-bullet li {
	margin-top: 1em;
}
/*ul.feature-list-bullet li:hover, li a:hover {
   color: red;
	list-style-image: url(images/bullet.gif) !important; 
}  */
ul.feature-list-bullet + h2 {
	padding-top: 2em;
}
ul.feature-list-bullet {
	margin: 0;
	padding: 0;
	margin-left: 3em;
}
ul.feature-list-bullet li {
	width: 180pt;
	float: left;
	list-style: none !important;
	height: 1.7em;
}
html>body ul.feature-list-bullet li {  /* not for IE6/Win */
	height: auto;
	line-height: 1.7em;
	text-indent: -22px;
	margin-left: 20px; 
}
ul.feature-list-bullet li img {
	padding-right: 6px;
/*	width: 32px;
	height: 32px; */
	vertical-align: top;
}
html>body ul.feature-list-bullet li img {  /* not for IE6/Win */
/*	position: relative; */
	top: 2px;
}

/*###############################*/

ul.feature-list-bullet-long li {
	margin-top: 1em;
}
/* ul.feature-list-bullet-long li:hover, li a:hover {
   color: blue;
	list-style-image: url(images/bullet.gif) !important; 
}  */
ul.feature-list-bullet-long + h2 {
	padding-top: 2em;
}
ul.feature-list-bullet-long {
	margin: 0;
	padding: 0;
	margin-left: 3em;
}
ul.feature-list-bullet-long li {
	width: 260pt;
	float: left;
	list-style: none !important;
	height: 1.7em;
}
html>body ul.feature-list-bullet-long li {  /* not for IE6/Win */
	height: auto;
	line-height: 1.7em;
	text-indent: -22px;
	margin-left: 20px; 
}
ul.feature-list-bullet-long li img {
	padding-right: 6px;
/*	width: 32px;
	height: 32px; */
	vertical-align: top;
}
html>body ul.feature-list-bullet-long li img {  /* not for IE6/Win */
/*	position: relative; */
	top: 2px;
}

/*################################*/

ul.feature-list + h2 {
	padding-top: 2em;
}
ul.feature-list {
	margin: 0;
	padding: 0;
	margin-left: 3em;
}  
ul.feature-list li {
   margin-top: 0em; 
	width: 200pt; 
	float: left;
	padding-right: 1em;
	margin-left: 1em;
	padding-left: 12px;
	list-style-type: none;
	text-indent: -12px; 
}
/* ul.feature-list li:first-line {
     margin-left: -20px;
} */
html>body ul.feature-list li {  /* not for IE6/Win */
/*	height: auto;
	margin-left: 20px;  */  
}

/*###############################
SPLIT SCREEN 
################################*/
/* .split {
  width: 100%;
} */
.split-half {
	width: 86%; 
}
.split-half td {
	width: 29%;
}
html>body .split-half {   /* not for IE6/Win */
	width: 96%; 
}
html>body .split-half td {   /* not for IE6/Win */
	width: 29%;
}
.split-half p img {
  padding-right: 1em;
}
.split-half p {
  padding-bottom: 1em;
}
.split-half li {
   margin-left: 3em
}
/*
.split,
.split-half {
	float: left;
	padding: 0 2% 1em;
	vertical-align: top;
} */
/* .split *:first-child,
.split-half *:first-child {
	padding-top: 0;
	margin-top: 0;
}  */

/*##############################################################
## Headings and Horizontal Rules
##############################################################*/
h1 {
    background:  #fff;
    color:       black;
/*    width:       50%;  */
    font-variant: normal;
    font-style: normal;
    font-size-adjust: none;
    font-stretch: normal;
    margin-bottom: 0pt;
    font-family: arial, helvetica, verdana, sans-serif;
    font-size:   180%;
    font-weight: normal;
    border-style: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(204, 204, 204);
    border-width: 1px 1px 1px 0;
    margin:      .0em 0 0.5em 1em;
    padding:     .75em 0 .25em 0em;
}
h1.home { width: 40%; }

h2 {
    background:  #fff;
    color:       black;
/*    width:       300px;   */
    font-variant: normal;
    font-style: normal;
    font-size-adjust: none;
    font-stretch: normal;
    margin-bottom: 0pt;
    font-family: arial, helvetica, verdana, sans-serif;
    font-size:   140%;
    font-weight: normal;
    border-style: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(204, 204, 204);
    border-width: 1px 1px 1px 0;
    margin:      .5em 0 0.5em 1em;
    padding:     .25em 0 .25em 0em;
}

h3 {
    background:  #fff;
    color:       black;
/*    width:       300px;  */
    font-variant: normal;
    font-style: normal;
    font-size-adjust: none;
    font-stretch: normal;
    margin-bottom: 0pt;
    font-family: arial, helvetica, verdana, sans-serif;
    font-size:   120%;
    font-weight: normal;
    border-style: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(204, 204, 204);
    border-width: 1px 1px 1px 0;
    margin:      .5em 0 0.5em 1em;
    padding:     .25em 0 .25em 0em;
}

h4 {
    background:  #fff;
    color:       black;
/*    width:       300px;  */
    font-variant: normal;
    font-style: normal;
    font-size-adjust: none;
    font-stretch: normal;
    margin-bottom: 0pt;
    font-family: arial, helvetica, verdana, sans-serif;
    font-size:   110%;
    font-weight: normal;
    border-style: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(204, 204, 204);
    border-width: 1px 1px 1px 0;
    margin:      .5em 0 0.5em 1em;
    padding:     .25em 0 .25em 0em;
}

hr {
    margin-top: 2em;
    color:      #3d5561;
    background: #3d5561;
}

/*##############################################################
## Links
##############################################################*/
a {
    color:           #3d5561;
    text-decoration: underline;
}

a:link     { color: #039; }
a:visited  { color: #609; }
a:hover    { color: #333; }
a:active   { color: #000; }

h1 a, h2 a {
    color:           black;
}

/*##############################################################
## Tables
##############################################################*/
table {
    border-collapse: collapse;
    padding: 0;
    margin-left:  auto;
    margin-right: auto;
}

th {
    font-size:   14px;
	 line-height: 16px;
    font-weight: bold;
    color:       #3d5561;
    padding:     .5em;
}

td {
    vertical-align: top;
    text-align:     left;
    font-size:      12px;
    line-height:    16px;
    font-family:    Verdana, Arial, Helvetica, sans-serif;
}

.form {
    text-align:   center;
}
.form table {
    border:         1px solid #3d5561;
}
.form table tr td, .form table tr th {
    border:         1px solid #3d5561;
}
.form table tr td.required, .form table tr td.optional {
    padding:        .25em 1em .25em 1em;
    text-align:     right;
}
.form table tr td.required {
    font-weight:    bold;
}
.form table tr td.optional {
    font-style:     italic;
}
.form table tr td.entry {
    text-align:     left;
}
.form input.submit {
    margin: 1em;
}

/*##############################################################
## Lists
##############################################################*/
ol, ul {
    margin-top: .5em;
    margin-bottom: .5em;
    margin-right: 4em;
}
li {
    margin-top: .5em;
    margin-bottom: .5em;
}

/* Description Lists */

dl {
     margin: 1em 4em 1em 4em;
}
dt {
    font-weight: bold;
    margin-top: .5em;
}
dd {
    margin-top: .25em;
}

/* nested descriptions */
dd dl {
    margin-top: .25em;
}
dd p {
    margin: .5em +0em .5em +0em;
}

/*##############################################################
## Code and other preformatted stuff
##############################################################*/
code {
    font-family: monospace; 
}
p code, blockquote code, dt code, dd code, li code {
    margin-left: 0;
}

pre, tt, code, kbd, samp { 
    font-family: monospace; 
    margin-left: 4em;
}

/*##############################################################
## Layout
##############################################################*/

#Banner {  
    background:   #dde;
    width:        100%;
    border-style: solid;
    border-color: #ffd65b;
    border-width: 0 0 0 0;
    padding:      7px 0 0px 0;
    margin:       0 0 0 0;
    white-space:   nowrap;
    background-image: url(http://www.resiprocate.org/resiprocate-small-trans.png);
    background-repeat: no-repeat;
    background-position: left;

    top:      0;
    left:     0;
        /* For IE5/Win's benefit height 
    = [correct height] + [top padding] + [top and bottom border widths] */
        height:69px; /* 52 + 7px + 0px = 59px */
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
        voice-family: "\"}\"";
        voice-family:inherit;
        height: 69px; /* the correct height */
}

/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Banner {height:69px;}

.banner_logo {
    margin: 7px 0 0 12px;
    float: left;
    width: 40%;
}

.banner_logo a {
    color: #558;
    font-size: 250%;
    padding: 0 0 0 91px;
}

#SiteSearch {
    /* display: none; */
    margin:     22px 15px 0 0;
    float:      right;
    text-align: right;
    vertical-align:     middle;
    font-size:  10px;
    width: 40%;
}
#SiteSearch input {
    border: 1px none #fff;
    color: black;
}
#SiteSearch input.doit {
    background: #84a9b5;
    color:      white;
}

/* ################################################################ 
 * L E F T   S I D E   N A V I G A T I O N
 * ################################################################ */
#Left {
    position:   absolute;
    top:        82px;
    left:       0;
    width:      120px;
    min-height: 90%;
    background: #558;
    padding:    0 14px 2px 14px;
}

/* Navigation Buttons */

.nav {  
    position:      relative;
    white-space:   nowrap;
    background:    #ece;
    color:         black;
    border-style:  none;
    border-width:  1px;
    border-color:  black;
    margin:        8px 5px 3px 5px;
    font-weight:   bold; 
}

.nav2 {  
    position:      relative;
    white-space:   nowrap;
    background:    #84a9b5;
    color:         black;
    border-style:  none;
    border-width:  1px;
    border-color:  #3d5561;
    margin:        0 0 3px 0;
    font-weight:   bold; 
    padding:    1px 0px 0px 0px;
}

.nav3 {  
    position:      relative;
    white-space:   nowrap;
    background:    #84a9b5;
    color:         black;
    border-style:  none;
    border-width:  1px;
    border-color:  #3d5561;
    margin:        0 0 3px 0;
    font-weight:   bold; 
}

.nav4 {  
    position:      relative;
    white-space:   nowrap;
    background:    #84a9b5;
    color:         black;
    border-style:  none;
    border-width:  1px;
    border-color:  #3d5561;
    margin:        0 0 3px 0;
    font-weight:   bold; 
}
.nav p {
    margin:  1px 1px 1px 1px;
    font-size:     130%;
    text-align: center;
}
.nav2 p {
    font-size:     100%;
    margin:  1px 3px 4px 3px;
}
.nav3 p {
    font-size:     90%;
    margin:  1px 3px 4px 1.5em;
}

.nav4 p {
    font-size:     85%;
    margin:  1px 3px 4px 2.5em;
}
.nav a, .nav2 a, .nav3 a, .nav4 a {
    text-decoration: none;
	display: block;
}
.nav a {  
    text-decoration: none;
    color:         #324;
}
.nav a:hover {  
    text-decoration: none;
    color:         #ffd65b;
}

.nav2 a,  .nav3 a,  .nav4 a {  
    text-decoration: none;
    color:         black;
}

.nav2 a:hover, .nav3 a:hover,  .nav4 a:hover {  
    text-decoration: none;
    color:         white;
}

#nav_on {  
        background:    #FFF;
    color:         #3d5561;
    border-color:  black;
}
/* ################################################################ */

/* ################################################################ 
 * C O N T E N T
 * ################################################################ */
#Content {
    position:      absolute;
    min-height:    80%;
    top:           90px;
    left:          149px; 
    right:         12px;
    background:    white;
    border-style:  none;
    border-width:  1px;
    border-color:  #3d5561;
    padding:       0 0 0 0;
    margin:        0 0 0 0; 
}

/* 
 * BOD Content is used by the board private area -- it is 
 * essentially the same style as "Content", however, does not
 * leave room for a header and nav bar.
 */
#BODContent {
    position:      absolute;
    min-height:    80%;
    top:           12px;
    left:          12px; 
    right:         12px;
    background:    white;
    border-style:  solid;
    border-width:  1px;
    border-color:  #3d5561;
    padding:       0 0 0 0;
    margin:        0 0 0 0; 
}

/* ################################################################ 
 * F O O T E R
 * ################################################################ */
#Footer {  
    clear:        both;
    padding:      .5em 1em .25em 1em;
    border-style: solid;
    border-color: #3d5561;
    border-width: 1px 0 0 0;
        font-size:    10px; 
    margin-top:   3em;
}
.footer_left {
    float:      left;
    text-align: left;
}
.footer_right {
    float:      right;
    text-align: right;
}
#Footer p {
    clear: both;
    margin-top:    .25em;
    margin-bottom: .25em;
    text-align:    center;
}
/* ################################################################ */

/* ################################################################ 
 * F L O A T   B O X 
 * ################################################################ */
.FloatBox {
    float:         right;
    background:    #d7d7d7;
    color:         black;
    margin:        4px 4px 2px 4em;
    padding:       1em 1em 1em 1em;
    border-style:  solid;
    border-width:  1px 1px 1px 1px;
    border-color:  #3d5561;
    width:         33%;
}
.FloatBox h1, .FloatBox h2, .FloatBox h3 {
    width:        auto;
    padding:      0;
    border-width: 0;
    background: #d7d7d7;
}
.FloatBox a:link, .FloatBox a:visited {
    color:        black;
}
.FloatBox a:hover, .FloatBox a:hover {  
    color:         white;
}
.FloatBox a:active, .FloatBox a:active {  
    color:        #ffd65b;
}
.FloatBox p {
    text-align: justify;
    margin:  1em 1em 1em 1em;
}
.FloatBox blockquote {
    text-align: justify;
    margin:  1em 2em 1em 2em;
}
.FloatBox dl {
    margin-left: 0;
    margin-right: 0;
}
.FloatBox dt {
    margin-left: 1em;
    margin-right: 1em;
}
.FloatBox dd {
    margin-left: 3em;
    margin-right: 3em;
}
.FloatBox dd dl dt {
    margin-left: 0;
    margin-right: 0;
}
.FloatBox dd dl dd {
    margin-left: 2em;
    margin-right: 2em;
}
.FloatBox li, .FloatBox li li {
    margin-left:  1em;
    margin-right: 1em;
}

/* ################################################################ */

/* ################################################################ 
 * Three Column Layout (Home page and others)
 * ################################################################ */
#Container {
 /*   width:   100%;  */
    margin: 0px, 0px, 0px, 0em;
}

#MiddleColumnContent {
/*   position:   absolute;  */
    margin-right: 220px;  
}

.RightColumnContent {
    float:         right;
    background:    #d7d7d7;
    color:         black;
/*    margin:        0px 0px 0px 0em;  */
    border-style:  none;
    width:         215px;
   
}
.RightColumnContent h1, .RightColumnContent h2, .RightColumnContent h3 {
    width:        auto;
    background:    #d7d7d7; 
    padding:      0;
    margin:       6px;
    border-width: 0;
}
.RightColumnContent a:link, .RightColumnContent a:visited {
    color:        black;
}
.RightColumnContent a:hover {  
    color:         white;
}
.RightColumnContent a:active {  
    color:        #ffd65b;
}
.RightColumnContent p {
    text-align: left;
    margin:  0.5em 0.5em 1em 0.5em;
}
.RightColumnContent blockquote {
    text-align: justify;
    margin:  1em 2em 1em 2em;
}
.RightColumnContent dl {
    margin-left: 0;
    margin-right: 0;
}
.RightColumnContent dt {
    margin-left: 1em;
    margin-right: 1em;
}
.RightColumnContent dd {
    margin-left: 3em;
    margin-right: 3em;
}
.RightColumnContent dd dl dt {
    margin-left: 0;
    margin-right: 0;
}
.RightColumnContent dd dl dd {
    margin-left: 2em;
    margin-right: 2em;
}

.RightColumnContent ul {
   padding: 0 0 0 2em;
   margin-left:   1em;
   margin-right:  1em;
}

.RightColumnContent ul li {
   margin-left:   0em;
   margin-right:  1em;
}

.RightColumnContent li, .RightColumnContent li li {
    margin-left:  1em;
    margin-right: 1em;
}

/* ################################################################ */



/*##############################################################
  ## Alert Box - use only for very important time-sensitive notices
  ##############################################################*/

.AlertBox {
   margin-left:   10%;
   margin-right:  10%;
   border:        4px solid white;
   font-weight:   normal;
   color:         black;
}

.AlertBox table
{
   border: 2px solid #84a9b5;   
}

.AlertBox h1, .AlertBox h2 {
  border-bottom-style: none;
}
.AlertBox th {
   color: black;
   backgrouond:  #d7d7d7;
}

.AlertBox td {
  padding: 2px;
  text-align: center;
  background:  #d7d7d7;
}

/*  .AlertBox a, .AlertBox p a, .AlertBox a:hover, .AlertBox p a:hover,.AlertBox a:visited, .AlertBox p a:visited,.AlertBox a:active, .AlertBox p a:active {
color:  #ffd65b;
}  */

/*****************************************************************/

.tbd {
    background: #ffeeee;
    font-style: italic;
}

/*##############################################################
  ## News & Events listings. Format - date in left column, description in right column.
  ##############################################################*/

.newseventstable, .newseventshome { 
	margin:  1em 1em 1em 4em;
}

.newseventstable th {
	width: 250px;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	vertical-align: top;
	text-align: left;
	padding: 4px;
}
.newseventshome th {
	width: 125px;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	vertical-align: top;
	text-align: left;
	padding: 4px;
}
.newseventstable td, .newseventshome td {
	vertical-align: top;
	font-size: 12px;
	line-height: 16px;
	padding: 4px;

}

/*##############################################################
  ## Event pictures table. 
  ##############################################################*/

.eventspicturestable, .eventspictureshome { 
	margin:  1em 1em 1em 4em;
}

.eventspicturestable th {
	width: 250px;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	vertical-align: top;
	text-align: left;
	padding: 4px;
}
.eventspictureshome th {
	width: 125px;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	vertical-align: top;
	text-align: left;
	padding: 4px;
}
.eventspicturestable td, .eventspictureshome td {
	width: 250px;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	vertical-align: top;
	text-align: left;
	padding: 4px;

}



br { margin: 0; padding: 0; }
/*##############################################################
  ## Workarounds
  ##############################################################*/

/** on IE, get rid of form vertical slop */
form input {
    padding: 0; 
    margin:  0;
    vertical-align:  top;
}



/*##############################################################
  ## Feature  table 
  ##############################################################*/

.feature-table { 
	margin:  1em 1em 1em 4em;
}

.feature-table th {
/*	width: 250px;  */
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	vertical-align: top;
	text-align: center;
	padding: 4px;
}
.feature-table td {
/*	width: 250px;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	vertical-align: top;
	text-align: left;
	padding: 4px; */ 
}
.feature-table tr td p{
  padding: 0;
  margin-top: 0;
}
.feature-table tr th p {
   text-align: center;
/*   width: 150px; */
   margin: 0;
   padding: 0 1em 15px 1em;
}
.feature-table tr th img {
  padding-bottom: 15px;
}

/*##############################################################
  ## Screenshot  table 
  ##############################################################*/

div.screenshots a {
	width: 250px;
	min-height: 250px;
	margin: 2em;
	display: block;
	float: left;
	text-decoration: none;
	
	text-align: center;
	background: none !important;
}