@import url('reset.css');

body {
	font: 100%/1.4 Tahoma, Verdana, Arial, Helvetica, sans-serif;
	background: #ECEDD5;
	background-image:url(../images/bg.png);
	margin: 0;
	padding: 0;
	color: #000;
	font-size: 13px;
}

b, strong {
	 font-weight:bold
   }

img {
	padding-right: 30px;
	border-width: 2px;
	border-color: #C1DE4B;
}

fieldset {

	display: inherit;
    margin: 0;
    padding: 0;
    border: none;
}

legend {
	display: none;
}
.navigation {	
}
	
	
/* Login Style */
.login {
	font-family: 100%/1.4 Tahoma, Verdana, Arial, Helvetica, sans-serif;
	line-height: 24px;
	font-size: 13px;
	background: #000;
	opacity: 0.9;
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	-moz-box-shadow: 1px 0px 2px #000;
	-webkit-box-shadow: 1px 0px 2px #000;
	box-shadow: 1px 0px 2px #000;
	position:relative
}

.login a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #FFF;
	display: block;
	float: left;
	font-size: 13px;
}

.login span a:link, .login span a:visited, .login span a:hover{
}

.login span.right{
	float: right;
}

.login span.right a {
	float: none;
	display: inline;
	color: #fff;
	text-decoration:none;
}

.login span.right a, .login span.right a:hover span.right .login a:active{
	float: none;
	border-bottom: none;
	display: inline;
	color: #fff;
	text-decoration:none;
}

.menu{
	width: 100%;
	margin: 0 0;
	padding: 10px 0 0 0;
	list-style: none;
	background: #3D1730;
    background: -moz-linear-gradient(#3D1730, #260E1E);
    background: -webkit-gradient(linear,left bottom,left
top,color-stop(0, #260E1E),color-stop(1, #3D1730));
    background: -webkit-linear-gradient(#3D1730, #260E1E);
    background: -o-linear-gradient(#3D1730, #260E1E);	
    background: -ms-linear-gradient(#3D1730, #260E1E);	
    background: linear-gradient(#3D1730, #260E1E);	
}

.menu li{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
	text-align: center;
}

.menu a{
	float: left;
	height: 25px;
	text-align: center;
	padding-left: 35px;
	padding-right: 0px;
	color: #FFF;
	text-transform: uppercase;
	font: 11px/25px bold Arial, Helvetica;
	letter-spacing: 1px;
	text-decoration: none;
}

.menu li:hover > a{
	color: #fafafa;
}

*html .menu li a:hover{ /* IE6 */
	color: #fafafa;
}

.menu li:hover > ul{
	display: block;
}

/* Sub-menu */

.menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 35px;
	min-width: 150px;
    z-index: 99999;
    background: #045e72;
	background: -moz-linear-gradient(#16788e,  #045e72);	
	background: -webkit-gradient(linear, left top, left bottom,
from(#045e72), to(#0186ba));
	background: -webkit-linear-gradient(#16788e,  #045e72);
	background: -o-linear-gradient(#16788e,  #045e72);
	background: -ms-linear-gradient(#16788e,  #045e72);
	background: linear-gradient(#16788e,  #045e72);
}

.menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
}

.menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html .menu ul a{ /* IE6 */
	height: 10px;
	width: 150px;
}

*:first-child+html .menu ul a{ /* IE7 */
	height: 10px;
	width: 150px;
}

.menu ul a:hover{
    background: #CCCDCE;
	color: #000;
}

.menu ul li:first-child a{
}

.menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #CCCDCE;
}

.menu ul li:first-child a:hover:after{
    border-bottom-color: #CCCDCE;
}

.menu ul li:last-child a{
}

/* Clear floated elements */
.menu:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html .menu             { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */

.menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #3D1730;
}

.menu ul li:first-child a:hover:after{
    border-bottom-color: #CCCDCE;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices
to zero padding and margin on lists. For consistency, you can either
specify the amounts you want here, or on the list items (LI, DT, DD)
they contain. Remember that what you do here will cascade to the .nav
list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

h1 {
	font-size: 30px;
	font-family: 'Gilda Display', serif;
	color: #4E3275;
	padding-bottom: 10px;
}

h2 {
	font-size: 20px;
	font-family: 'Gilda Display', serif;
	color: #3D1730;
	padding-top: 15px;
	padding-bottom: 5px;	
}

h3 {
	font-size: 16px;
	font-family: 'Gilda Display', serif;
	color: #045e72;
	padding-top: 15px;
	padding-bottom: 5px;	
}

h4 {
	font-size: 14px;
	font-family: 'Gilda Display', serif;
	color: #16788e;
	padding-top: 15px;
	padding-bottom: 5px;	
}
	
p {
}
	
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where
margins can escape from their containing div. The remaining bottom
margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements
within the divs, instead of the divs themselves, gets rid of any box
model math. A nested div with side padding can also be used as an
alternate method. */
}

a img { /* this selector removes the default blue border displayed in
some browsers around an image when it is surrounded by a link */
	border: none;
}

.holder {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	line-height: 25px;
	font-size: 13px;
	background: #000;
	opacity: 0.9;
	z-index: 9999;
	text-transform: none;
	position: relative;
	padding-left: 20px;
	width: 100%;
}

.holder a, a:visited, a:hover, a:active{


	
}
.holder span.left {
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #999;
	text-transform: none;
	padding-left: 0px;
}

.holder span.left i {
	font-size: 10px;
}

.holder span.right{
	float: right;
	padding-right: 100px;
}

.holder span.left a, .holder span.left a:link, holder span.left
a:active, .holder span.left a:visited, .holder span.left a:hover {
	float: none;
	display: inline;
	text-decoration:none;
	color: #fff;
	padding-left: 10px;
}

.holder span.right a, .holder span.right a:link, holder span.right
a:active, .holder span.right a:visited, .holder span.right a:hover {
	float: none;
	display: inline;
	text-decoration:none;
	color: #fff;
	padding-right: 20px;
}

/* ~~ this container surrounds all other divs giving them their
percentage-based width ~~ */
.container {
	width: 90%;
	max-width: 1260px;/* a max-width may be desirable to keep this layout
from getting too wide on a large monitor. This keeps line length more
readable. IE6 does not respect this declaration. */
	min-width: 780px;/* a min-width may be desirable to keep this layout
from getting too narrow. This keeps line length more readable in the
side columns. IE6 does not respect this declaration. */
	margin: 0 auto; /* the auto value on the sides, coupled with the width,
centers the layout. It is not needed if you set the .container's width
to 100%. */
	
	background-color: #FFF;
}

/* ~~the header is not given a width. It will extend the full width of
your layout. It contains an image placeholder that should be replaced
with your own linked logo~~ */

.header {
	background-image:url(../images/header.jpg);
}

.header h1 {
	font-family:  'Belleza', 'Gilda Display', serif;
	letter-spacing: 2px;
	font-variant: small-caps;
	font-size: 35px;
	text-shadow: #999 1px 1px 20px;
	padding-top: 150px;
	text-align: end;
}

.header h1 a:link, .header h1 a:visited, .header h1 a:hover, .header h1
a:active, .header h1 a:focus{
	color: #000;
	text-decoration: none;
}

.footer {
}
/* ~~ This is the layout information. ~~

1) Padding is only placed on the top and/or bottom of the div. The
elements within this div have padding on their sides. This saves you
from any "box model math". Keep in mind, if you add any side padding or
border to the div itself, it will be added to the width you define to
create the *total* width. You may also choose to remove the padding on
the element in the div and place a second div within it with no width
and the padding necessary for your design.

*/

.content {
	margin: 0px;
	margin-left:auto;
	margin-right:auto;
	padding: 20px;
	height: 100%;
}

.content p {
	padding-bottom: 15px;
}

/* ~~ Styling for your site's links must remain in this order -
including the group of selectors that create the hover effect. ~~ */
.content a:link {
	color:#260E1E;
	text-decoration: none;
	border-bottom:1px dotted;  /* unless you style your links to look
extremely unique, it's best to provide underlines for quick visual
identification */
}
.content a:visited {
	/*color: #4E5869;*/
	color: #260E1E;
	text-decoration: none;
	border-bottom:1px dotted;
}

.content a:hover, .content a:active, .content a:focus { /* this group of
selectors will give a keyboard navigator the same hover experience as
the person using a mouse. */
	
	color: #045e72;
	/*color: #260E1E;*/
	text-decoration: none;
	border-bottom: none;
}

.content h6 {
	border-bottom: 1px dotted;
	padding-bottom: 15px;
	margin-left: 100px;
	margin-right: 100px;
	
}
	
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in
the headings and paragraph rule above. Padding was placed on the bottom
for space between other elements on the lists and on the left to create
the indention. These may be adjusted as you wish. */
}

.content ul {
	list-style-type:square
}


.main {
	margin-left: 20px;
	float:right;
	margin-bottom: 20px;
}
	
.a href, .news_feature {
	float: left;
	border-right: 1px dotted;
	padding-right: 35px;
	margin-bottom: 20px;
}

.a href p, .news_feature p {
	padding-bottom: 15px;
	padding-right: 0px;
}

.a href h1, .news_feature h1 {
	font-family: 'Gilda Display', serif;
	font-size: 18px;
	font-weight: bold;
	text-align:center;
	text-transform:uppercase;
	/*
	border-bottom: 1px dotted;
	margin-left: 25px;*/
	
}



.a href h2, .news_feature h2 {
	font-size: 15px;
	font-family: Tahoma, serif;
	font-weight: bold;
	color: #16788e;
	padding-bottom: 10px;
	padding-right: 0px;
}

.a href img, .news_feature img {
	padding-bottom: 15px;
	padding-left: 20px;
}

.newsbox{
	
	
	border-style:  dotted;
	

	border-color: #4E3275;
	border-width: 1px 0px 1px 0px;
	
}

.image {
	padding-left: 20px;
}

.donateform {
	padding: 15px;
	text-align: right;
	float: right;
}
/* ~~ The footer ~~ */
.donateimage {
	/*text-align: center;
	padding-left: 20px;*/
	border-bottom: none;
}
.donateimage a:link {
	text-decoration: none;
	border-bottom:none;
}
.donateimage a:visited {
	text-decoration: none;
	border-bottom:none;
}

.donateimage a:hover, a:active, a:focus { /* this group of selectors
will give a keyboard navigator the same hover experience as the person
using a mouse. */
	text-decoration: none;
	border-bottom:none;
}
.footer {
	color: #FFF;
	font-size: 10px;
	letter-spacing: 1px;
	text-align: center;
	text-shadow:0px 0px 10px #03404C;
	padding: 5px 0;
	background: #045e72;
	background: -moz-linear-gradient(#16788e,  #045e72);	
	background: -webkit-gradient(linear, left top, left bottom,
from(#045e72), to(#0186ba));
	background: -webkit-linear-gradient(#16788e,  #045e72);
	background: -o-linear-gradient(#16788e,  #045e72);
	background: -ms-linear-gradient(#16788e,  #045e72);
	background: linear-gradient(#16788e,  #045e72);
}

.footer p {
	padding-top: 10px;
	padding-bottom: 10px;
}

.footer a:hover, .footer a:active, .footer a:focus, .footer a:link, .footer a:visited, .footer a {

	color: #FFF;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your
page. The floated element must precede the element it should be next to
on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your
page. The floated element must precede the element it should be next to
on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as
the final element following the last floated div (within the #container)
if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.clr{
	clear: both;
}
.imagewrapleft {
	text-align: left;
	padding-top: 10px;
	padding-right: 40px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin: 0px;
	float: left;
	clear: none;
}
.imagewraptop {
	text-align: left;
	padding-top: 10px;
	padding-right: 40px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin: 0px;
	float: left;
	clear: none;
}
.profileleft {
	float: left;
	border-right: 1px dotted;
	padding-right: 20px;
	padding-left: 50px;
	width: 30%;
	text-align: right;
}



.profileleft img {
	padding-bottom: 15px;
	padding-left: 20px;
	
}

.profilebio {
	
	clear: both;
	padding-left: 50px;
	padding-right: 50px;

}

.profileheader {
	
	margin-left: 20px;
	float:left;
	width: 70%;
	
}

.donate {
	margin-left: 2em;
	margin-right: 2em;
	clear:both;
	margin-bottom: 2em;
}
	
.donatecontent {
	padding: .5em;
	text-align: center;
	
	background: #045e72;

	border-radius: 0.5em;
	border: 0.1em dotted #045e72;
	font-size: 1.5em;
	color: #fff;
}

.donatecontent a, .donatecontent a:hover, .donatecontent a:visited {
	color: #fff;
	
}
.donatecontent a:active {
	color: #fff;
}
.donatecontent a:link {
	color: #fff;
}

.memberslanding {
		width: 100%;
		clear: both;
    

}
.activemembers {
	width: 35%;
	float: left;
	clear: none;
}

.emeritusmembers {
	width: 35%;
	float: left;
	clear: none;

}
.greenparagraph
{
	font-size: 16px;
	font-family: 'Gilda Display', serif;
	color: #045e72;
	padding-top: 15px;
	padding-bottom: 5px;	
}
.profilebacklink
{
	font-size: 16px;
	font-family: 'Gilda Display', serif;
	color: #045e72;
	padding-top: 15px;
	padding-bottom: 5px;	
	text-align: right;
}

.justify {
	text-align: justify;
}

.formrow {
	vertical-align: top;
	text-align: left;
	clear: both;
	width: 90%;
}

.formleft {
	clear: none;
	width: 30%;
	float: left;
}

.formright {

	clear: none;
	width: 70%;
	float: right;
}

hr .dotted {

	border-bottom:1px dotted;


	border-color: #4E3275;
	
}
.righttext {
text-align: right;

}
.homeimage {
	max-width: 100%;
	height: auto;
}

.homeimageborder {
	width: 60%;
	margin-left: 10px;
	margin-right: 10px;
	border-style: solid;
	border-radius: 10px;

	border-color: #16a8d1;
	border-width: 2px;
	float: left;
	clear: none;
	font-size: 10px;
}
.homeimagebordersmall {
	width: 100px;
	margin-left: 10px;
	margin-right: 10px;
	border-style: solid;
	border-radius: 10px;

	border-color: #16a8d1;
	border-width: 2px;
	float: left;
	clear: none;
	font-size: 10px;
}

.homeimageborderright {
	width: 60%;
	margin-left: 10px;
	margin-right: 10px;
	border-style: solid;
	border-radius: 10px;

	border-color: #16a8d1;
	border-width: 2px;
	float: right;
	clear: none;
	font-size: 10px;
}

.homeimagesmall {
	width: auto;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 0px;

	border-style: solid;
	border-radius: 10px;

	border-color: #16a8d1;
	border-width: 2px;
	float: left;
	clear: none;
	font-size: 10px;
}