/* CSS Document - styles\mainstyle.css used  */
article {
    display: block;
} 
article { 
	display: block; 
	margin: 0px; 
	padding: 25px; 
}
aside {
/*	width: 200px;*/
	float: right;
	margin: 0px 0px 10px 40px;
	padding: 0px 0px 0px 20px;
	border-left: 2px solid #ccc;
}
aside p { 
	margin: 2%;

}
/*footer { border-top: 1px solid #ddd; margin: 0px; padding: 10px 25px 10px 10px; color: rgba(255,255,255,.4); }*/

.clearfix:before .clearfix:after {
	content: "";
	display: table; /*previously block was used */
	clear: both;	
/*	content: "\0020"; previously */
/*	overflow: hidden;*/
/*	height: 0;*/
}

.clearfix:after {
	clear: both;
}
body  {
	margin: 0;
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #333333;
	background-color: #FFF;
	/*	font-family: "Comic Sans MS", cursive;*/
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	background-image: none;
}
#container {
	position: relative;
	top: 0;
	left;0;
	margin: 0px auto;/*Important- sets the container to drop level for the maincontent to align at the top*/
	padding: 0px;	
	width: 100%;
	border: 0px; /*0 border width displays none*/
	font-size: 10px;	

/*	background-color: #CFC;	*/
}
* html #body{
height: 1%;
}
#header {
	float: left;
	margin: 0px;
	padding: 0px;
	padding-bottom: 2%;
	/*	padding-left: 1%;*/
	width: 100%;	/*header must be less for IE to display top menu*/
	height: 20%;
	text-shadow: 1px 1px 1px #000;
	color: #666;/*	color: #700203;*//*	background-color: #CFC;		
	border-style: groove;
	border-width: 2px;
	border-color: #3FF;*/
	background-color: rgba(0,102,153,0.3);
}
#header1 {
	float: left;
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 65%;
}
/*#headerverse {
	float: left;
	margin: 0px;
	padding: 0px;
	padding-top: 2%;
	width: 32%;
	color:#A0A0A4;
	border-style: groove;
	border-width: 1px;
	border-color: #FFF;
}*/
#header2 {
	position: relative;
	float: right;
	margin: 0px;
	padding: 0px;	
	padding-top: 1%;
	width: 35%;
	font-size: 1.75em;/*	font-weight: bold;*/
		font-family: "Comic Sans MS", cursive;
/*	color:#CFF; */

}
.join {
	font-size: 1.25em;
	padding: 0;
	margin: 0;
/*	padding-bottom: 1%;*/
}
.join2 {
	margin: 0;
	font-size: 1.5em;
	padding: 0;
/*	padding-bottom: 1%;*/
}
#header2 p {
	font-size:.9em;}
.headera {
	color: #CFF;
}
/* this next rule prevents Firefox adding a space beneath the
 * title image when displayed as application/xhtml+xml */
#header img {
 	background-color: transparent;*/
	margin: 0px;
	padding: 0px;
}
	
homepage {
	position: relative;
	float: right;
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: auto;
}

#headliner {
	float: right;
	padding: 0;
	margin: 0;
	width: 55%;
	height: 60%;
	padding: 0 1%;
	font-size: 1em;
	/*	padding-bottom: 1000em;
	margin-bottom: -1000em;*/
/*	color: #D7E6F0;*/
	overflow: auto;
	/*	color:#DBF2FF;*/
	color:#868686;
}
#content2 {
	display: none;
}

#headliner h3, h4{
	margin: 0;
	padding: 0;
	font-size: 2em;
}
#headliner p{
	font-size: 1.5em;
/*	color: #006;*/
	font-weight: bold;
}
#news {
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
	margin-top: 1%;
	width: 100%;
	color: #000066;
	/*	background-color: #CCCCFF;*/
	text-align: left;
}

#news h4 {
/*	background-color:#A6CAF0;*/
/*	color: #006;*/
	border:	medium;
	border-bottom-style: groove;
	padding: 1%;
	font-size: 175%;	
}
#news h4:hover  {
	/*	background-color:#D3B95C;*/
	/*		background-color:#F0F0F0;*/
	color: #333333;
	background-color: rgba(0,102,153,0.3);
}
#news h3  {
/*	color: #D3B95C;*/
	padding-left: 10%;
	font-size: 1.75em;
/*	color: #FFF;*/
}
#news p  {
	/*	color: #006;
	background-color: #D3B95C;*/
	font-size: 1.25em;
	padding: 0 2%;
/*	color: #333;	
	background-color: #DBF2FF;	*/
}

.newslink a:link a:active {
	color: #33FFFF;
}
#news a:link a:active {
	color: #33FFFF;
}
#news img {
	float: left;
	align: left;
	padding-right: 1%;
}
/*#maincontent { IEE
	margin: 0px;
	margin-left: 20%;
	margin-right: 20%;
	width: 55.5%;
	text-align: left;
	padding-top: 1%; /*IMPT this lines up maincontent with container*/
/*	padding-bottom:5%;
	padding-left: 1%;
	padding-right: 1%;
	font-size: 100%;	
}*/
#beliefs {
	float: left;
	margin: 0px;
	padding: 0px;
	margin-left: 1%;
	padding-bottom: 2%;
	width: 90%;
	border-radius: 15px;
	text-align: left;
	padding: 0px 1%;
	/*	color: #036;*/
	color: #000000;
	font-size: 1.5em;
}
.clickon {
	font-size: 75%;
/*	color: #FC0;*/
	margin-left: 2%;
	text-decoration:underline;
}
#beliefs2 {
	float: left;
	margin: 0px;
	padding: 0px;
	margin-left: 1%;
	padding-bottom: 2%;
	width: 65%;
	border-radius: 15px;
	text-align: left;
	padding: 0px 1%;
	/*	color: #036;*/
	color: #660033;
	font-size: 1.5em;
}
#beliefs h4 {
	border:	medium;
	border-bottom-style: groove;
	padding-bottom: 1%;
	font-size: 110%;	
}
#beliefs h4:hover {
	color: #66CCFF;
	background-color: #036;
}
#beliefs h3 {
	font-size: 1.25em;
}
#beliefs p  {
	font-size: 95%;
	font-weight: bold;
}

#beliefs a:link a:active {
	color: #33FFFF;
}
#beliefs2 h4 {
	border:	medium;
	border-bottom-style: groove;
	padding-bottom: 1%;
	font-size: 110%;	
}
#beliefs2 h4:hover {
	color: #66CCFF;
	background-color: #036;
}
#beliefs2 h3 {
	font-size: 1.5em;
}
#beliefs2 p  {
	font-size: 125%;
	font-weight: bold;
	color: #333;
}

#maincontent {
	float: left;
	margin: 1%;
	margin-right: 0;
	padding: 0px;
	padding: 2%;
	width: 65%;
	text-align: left;
	border-radius: 15px;
	/*	padding-top: 1%; *//*IMPT this lines up maincontent with container*/
/*	color: #A6CAF0;*/
	color: #000;
	font-size: 2em;
	background-color: #d4e4ef;
}
#maincontent ul {
	float: left;
	margin: 1%;
	margin-left: 5%;
	padding: 0px;
	padding: 2%;
	text-align: left;
	text-decoration: none;
	/*	padding-top: 1%; *//*IMPT this lines up maincontent with container*/
/*	color: #A6CAF0;*/
	font-size: .75em;
}
#maincontent h3 {
	font-size: 1.2em;
	text-align: left;
/*	text-align: center;*/
}
#maincontent h4 {
	font-size: 1em;
}
#maincontent p {
	font-size: .75em;
}

.warning {
	color: #FF0000;
}	
.highlight {
	font-weight: bold;
	font-style: oblique;
	text-transform: capitalize;
	text-decoration: underline;
	}
	
#maincontent form {
	margin: 0;
	padding: 0;
	font-size: 100%;
}	
.smaller {
	font-size: 95%;
	color: #5BADFF;
/*	text-shadow: 1px 1px 1px #000;*/
}
#maincontent_plain {
	float: left;
	margin: 0px;
	margin-left: 1%;
	padding: 0px;
	width: 55%;
	text-align: left;
	padding: 0px 1%;
	border-radius: 15px;
	/*	padding-top: 1%; *//*IMPT this lines up maincontent with container*/
/*	color: #A6CAF0;*/
	color: #036;
	font-size: 1em;
	/*	background-color: #CCF;*/

	background-color: #a7cfdf;
}
#maincontent_plain p {
	font-size: 2em;
/*	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 50px;*/
	padding-left: 1%;
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #CCC;
	border-right-width: 3px;
	border-right-style: solid;
	border-right-color: #CCC;	
} 
#maincontent_plain h4 {
	font-size: 3em;
	text-align: center;
	line-height: 1%;
}
#maincontent_plain h3 {
	text-align: center;
	font-size: 2.5em;
	line-height: 4%;
}
.pitalic {
	font-style: italic;
	font-weight: bold;
	font-size: .75em;
}

#maincontent img {
	float: left;
	padding: 2%;
}
.wraptext {
	padding: 0px 2%;
}
#maincontent2 {
	float: left;
	margin: 0px;
	margin-top: 1%;
	padding: 0px;
	padding-left: 2.5%;
	padding-bottom: 2%;
	width: 95%;
	/*	height: 75%;*/
	border-radius: 15px;
	text-align: left;
	padding-right: 2.5%;
	color: #036;
	font-size: 1.5em;
}
#maincontent2 img {
	float: left;
	padding: 1%;
}
#maincontent2 h3 {
	font-size: 2em;
	text-align: left;
	padding: 0;
	margin: 0;
	padding-top: 1%
}
#maincontent2 h4 {
	font-size: 1em;
	padding: 5%;
}
#maincontent2 h5 {
	font-size: .75em;
	padding: 5%;
}
#maincontent2 p {
	font-size: .75em;
}
#blog {
	float: left;
	display: block;
	margin: 0px;
	margin-left: 1%;
	padding: 0px;
	padding-bottom: 2%;
	width: 78%;
	border-radius: 15px;
	text-align: left;
	padding: 0px 1%;
	/*	padding-top: 1%; *//*IMPT this lines up maincontent with container*/
/*	color: #A6CAF0;*/
	color: #036;
	font-size: 2em;
	/*	background-color: #CCF;*/
	background-color: #93A5C4;
}
#blog img {
	float: left;
	margin: 0;
	padding: 0;
	padding: 1%;
}
#blog h3 {
	font-size: 1.5em;
	text-align: center;
}
#blog h4 {
	font-size: 1.25em;
}
#blog p {
	font-size: 1em;
}
.event {
	font-size: 100%;
	font-weight: bold;
	text-align: left;
}
#menumessage {
	position: relative;
	float: left;
	margin: 0px;
	padding: 0px;
	width: 15%;
	color: #D3B95C;		
	font-size: 1.25em;
	/* 	background-color: #2A3F55;*/
}
#menumessage a {
	margin: 0px;/*	margin-left: 0px;*/ /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-bottom: 3%;
	display: block;
	text-align: center;
	padding: 3% 1%;
	font-weight: bold;
	font-size: 1em;
	/*	color: #A6CAF0;*/
	background-color: #99CCFF;
	text-decoration: none;
}
#menumessage a:link { /*settings on page open*/
	/*	background-color: #8DABB2;*/ /* same as side green background */
/*	color: #99FFFF;*/
	/*background-color: #8DABB2;*/ /* same as side green background */
/*	width:95%;*/
	color: #036;
	background-color: #99CCFF;
	padding-bottom: 3%;
	border-left: #908AA5 solid 2px;
	border-top: #908AA5 solid 2px;
	border-right: #2C263D solid 2px;
	border-bottom: #2C263D solid 2px;
  }
#menumessage a:visited { /*settings on visited menu*/
/*	width:95%;*/
/*	color: #D4BF00;	*/
	color: #036;
/*	background-color: #D6D6D6;*/
	background-color: #99CCFF;
	font-weight: bold;
	border-left: #908AA5 solid 2px;
	border-top: #908AA5 solid 2px;
	border-right: #2C263D solid 2px;
	border-bottom: #2C263D solid 2px;
  }  
#menumessage a:active, #menumessage a:hover{ /* active- when mouse clicks on menu option*/
	/*background-color: #CC9900;*/ /* reverse background and border options */
/*	width:95%;*/
	background-color: #036;
/*	color: #7FFFFF;*/
	color: #D4BF00;	
	font-weight: bolder;	
	border-left: #EBF3E7 solid 3px;
	border-top: #EBF3E7 solid 3px;
	border-right: #777E74 solid 3px;
	border-bottom: #777E74 solid 3px;
  }  	
#menumessage p, #menumessage h3 #menumessage h4{
	margin: 0px;	
	padding: 1%;
	margin-bottom: 2%;
}
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
	border-bottom: 15px solid #666; /* this creates the button separation */
	font-size:12px;
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 15px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	background: #8090AB;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background: #6F7D94;
	color: #FFF;
}

#sidemessage {
	float: right;
	margin: 0;
	margin-top: 1%;
	padding: 2%;
	width: 25%;
	font-size: 175%;
	text-align: center;
	font-weight: bold;
	border-radius: 15px;
	/*	color: #EBBF12;*/
/*	border-color: #333366;*/
	/*	border-width: 2px;*/
	border-color: D3B95C;
	border-style: groove;
	color: #603;/*	text-decoration: overline;
*/
	font-family: "Times New Roman", Times, serif;
}
#sidemessage h4 {
	/*	color: #808080;*/
/*	color: #C0DCC0;*/
	font-size: 150%;
}
#sidemessage ul {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	text-align: left;
}
#sidemessage ol {
	margin: 0px;
	padding: 0 0 1% 2%;
	font-size: 125%;
	text-align: left;
}
#sidemessage li {
/*	list-style-type: none;*/
	margin: 0px;
	padding: 0 0 1% 2%;
	font-size: 75%;
}
#rightmenu {
	/*	top: inherit;*/
/*	position: relative;*/
	float: right;
	margin: 0;
	padding: 0;
	width: 15%;
/*	background-color: #036;*/
	display: block;
	margin-bottom: 5%;
}
#rightmenu img {
	margin: 0;
	padding: 0;
	background: none;
	border: groove;
	border-color: #93A5C4;
	border-width: thick; 
	margin-bottom: 20%;
}
#rightmenu img:hover {
	border-color: #FFBF00;
}


/* Miscellaneous classes for reuse */
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.img1 {
	background-image: url(../images/Visitors_Welcome.jpg);	
}
.img2 {
	background-image: url(../images/Youth_Find_Action.jpg);	
}
.img3 {
	background-image: url(../images/Members_Connect.jpg);	
}

.nav ul {
	margin: 0px;
	padding: 0px;
	width: 100%;
/*	height: 25%;*/
	display: block;
	list-style-type: none;
	text-align: right; 	
 }
.nav li {
	margin-bottom: 10%;
	width: 100%;
 }
#sidemessage  a {
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	margin: 0px;
	padding: 0px;
	padding-top: 5%;
	padding-right: 1%;
	padding-bottom: 1%;
	padding-left: 1%;
/*	background-image: url(../images/menugraphic.png);*/
/*	background-image: url(../images/starbanner2.gif);	
	background-repeat: repeat;	*/
  }
.nobullet {
	text-decoration: none;
	text-align: left;
}

#sidemessage  a:link { /*settings on page open*/
	/*	background-color: #8DABB2;*/ /* same as side green background */
/*	color: #99FFFF;*/
	/*background-color: #8DABB2;*/ /* same as side green background */
/*	width:95%;*/
	color: #C0DCC0;
/*	border-left: #908AA5 solid 3px;
	border-top: #908AA5 solid 3px;
	border-right: #2C263D solid 3px;
	border-bottom: #2C263D solid 3px;*/
  }
#sidemessage  a:visited { /*settings on visited menu*/
/*	width:95%;*/
/*	color: #D4BF00;	*/
	color: #7FFFFF;	
	font-weight: bold;
/*	border-left: #908AA5 solid 3px;
	border-top: #908AA5 solid 3px;
	border-right: #2C263D solid 3px;
	border-bottom: #2C263D solid 3px;*/
  }  
#sidemessage  a:active, #sidemessage  a:hover{ /* active- when mouse clicks on menu option*/
	/*background-color: #CC9900;*/ /* reverse background and border options */
/*	width:95%;*/
/*	background-color: #036;*/
/*	color: #7FFFFF;*/
	color: #D4BF00;	
	font-weight: bolder;	
/*	border-left: #EBF3E7 solid 3px;
	border-top: #EBF3E7 solid 3px;
	border-right: #777E74 solid 3px;
	border-bottom: #777E74 solid 3px;*/
  }  
  /* special style for link to identify current page */
/*#thispage a:link, #thispage a:visited,
#thispage a:hover, #thispage a:active {
  background-color: #A8B2A3;
  color: #FFF;
}*/
a.button {
	color: #A6CAF0;
	font-weight: bold;
	font-size: 1em;
	text-decoration: none;
	text-align: center;
}
#footer {
	position: relative;
	width: 100%;
	/*	float: left;*/
/*	background: url("../images/lblue_texture.jpg") repeat-x #4a4a4a; width: 100% !important; */
 	margin: 0px;
	margin-top: 15%;
	padding: 0px;
	padding: .25% 0px;
	/*	color: #036;*/
	color: #333333;
	/*	color: #8090AB;	*/
/*	background-color: #93A5C4;*/
	font-size: 75%;
	font-weight: bold;
	text-align: center;	/*position: relative;*//* this gives IE6 hasLayout to properly clear */	/*clear: both;*/ /* this clear property forces the .container to understand where the columns end and contain them */	/*position: relative;*//* this gives IE6 hasLayout to properly clear */
/*	clear: both;*/ /* this clear property forces the .container to understand where the columns end and contain them */
} 
.footer1 {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 15%;
	font-size: 75%;
	display: block;
	text-align: left;
	color: #333333;		
}
.footer1 ul {
	list-style-type: none;
	color: #333333;		
}
.footer1 ul a{
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	color: #333333;
}

.form_info_icon {
	cursor: help;
	vertical-align: middle;
/*	background-image: url(../images/infonew.gif);*/
}
.form_warn_icon {
	cursor: help;
	vertical-align: middle;
/*	background-image: url(../images/warn.gif);*/
}

.form_mandatory {
	color: #FF0000;
}
#FloatDesc {
	border: 1px solid black;
	padding: 3px;
	color: #036;
	background-color: #D3B95C;
	width: 42%;/*	background-color: #CCF;*/
}