#body{background:#EDCE9F;padding:0;margin:0;font-family: arial, sans-serif;font-size:14px;}
body{background:#7A84DC;padding:0;margin:0;font-family: arial, sans-serif;font-size:14px;}

a:link {color:#74559E;text-decoration:none;}
a:visited {color:#74559E;text-decoration:none;}
a:active {color:#74559E;text-decoration:none;}
a:hover {color:#74559E;text-decoration:underline;}

.smlinktxt{font-size:90%;}

.tableBackground{
            background-repeat: no-repeat;
}


/* ----------- new CSS page elements ----------------- */
p, h1, h2, h3, h4, h5, a, ul, li, lo, address, td {
	font-family: Arial, Helvetica, sans-serif;
	text-align: left; 
}
/* You may use pixels or ems for text sizing */
p, div#content li {
	font-size: 14px;
	line-height: 14px;
	color: #4F1940;
}
div#content ul, div#content ol{
	padding:0 20px 0 60px;
}
h1 {
	font-size: 18px;
	font-weight: bold;
	color:#74559E
	}
h2 {
	font-size: 14px;
	font-weight: bold;
	color:#74559E;
	}
h3 {
	font-size: 14px;
	color:#74559E;
	}
div#top {background-color:#CAC873; height:21px; border-bottom: 2px #F90 solid; padding:4px 0 0 0;}	
div#container{
	width:960px;
	background-color:#F6CD90;
	padding:0;
	margin: 0 auto 20px auto;
}
div#content{
	width:700px;
	min-height:600px;
	float:right;
	background:url(../Images/css_bkgr/basic_bkgr.jpg);
	background-repeat:repeat-y;
	padding:20px 50px 20px 50px;
}
div#contenthome{
	width:800px;
	float:right;
	background:url(../Images/css_bkgr/basic_bkgr.jpg);
	background-repeat:repeat-y;
}
div#hplogos{
	width:800px;
	height:152px;
	background-image: url(../Images/css_bkgr/wings_home_wing.png);
	background-color:#F6CD90;
	background-repeat:no-repeat;
	background-position: 308px -5px;
	margin:-4px 0 0 0;
}
div#hplogos img.wings {
	padding:20px 0 0 75px;
	float:left;
}
div#network {
	float:right;
	width:390px;
	margin:60px 100px 0 0;
	padding:0 0 0 0px;
}
div#network img{
	padding:0 12px 0 12px;
}

img.left {
	float: left;
	margin: 0px 15px 10px 0px;
}
img.right {
	float: right;
	margin: 0px 0px 10px 15px;
}
.italic{
	font-style: italic;
}

div#footer{
	font-size:10px;
	width:950px;
	clear:both;
	background-color:#FFCC66;
	text-align:right;
	padding:5px;
}

div#themiddle{
	width:600px;
	padding:0;
	margin: 0 auto 20px auto;
}


/* -------------- login pages CSS ------------------- */

div#partlogin {
	float: left;
	height: 500px;
	width: 365px;
	margin:40px 0 0 -21px;
	text-align:right;
}
div#partlogin a:link, div#partlogin a:active, div#partlogin a:visited{
	background-image: url(../Images/css_bkgr/Part_login_a.png);
	background-repeat: no-repeat;
	background-position: right top;
	color: #F00;
	font-size: 24px;
	text-align:right;
	text-decoration:none;
	display:block;
	padding:125px 50px 150px 200px;
	width:115px;
	height:225px;
}
div#partlogin a:hover{
	background-image: url(../Images/css_bkgr/Participants_login_b.png);
	background-repeat: no-repeat;
	background-position: right top;
	color:#000;
}

div#leadlogin {
	float: right;
	height: 500px;
	width: 370px;
	margin:40px -14px 0 0
}
div#leadlogin a:link, div#leadlogin a:active, div#leadlogin a:visited{
	background-image: url(../Images/css_bkgr/Leader_login_a.png);
	background-repeat: no-repeat;
	background-position: left top;
	color: #F00;
	font-size: 24px;
	text-align:right;
	text-decoration:none;
	display:block;
	padding:125px 200px 150px 50px;
	width:120px;
	height:225px;
}
div#leadlogin a:hover{
	background-image: url(../Images/css_bkgr/Leader_Login_b.png);
	background-repeat: no-repeat;
	background-position: left top;
	color:#000;
}

div#loginBKGR {
	background-image: url(../Images/css_bkgr/login_green_butterfly.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 486px;
	width: 729px;
	margin: 0 -15px 0 -15px;
	padding: 0 15px 0 12px;
}
div#rightBTN{
	text-align:right;
	float:right;
	margin: 5px;
}
div#leftBTN{
	text-align:right;
	float:left;
	margin: 5px;
}
div#clearBOTH{
	clear:both;
}

/* ---------- photo gallery page ------------- */
#photoGallery table.border {
	border-width: 1px;
	border-style: solid;
	border-color: blue;
	background-color: #FFFF80;
}
#photoGallerybk {background: url(../Images/wingsGallery/photo-gallery-new.png) 0px 70px; padding-left:50px; background-repeat:no-repeat; width:653px; min-height:525px; margin-left:50px; }

div#contentphotoGallery{
	width:800px;
	min-height:600px;
	float:right;
	background:url(../Images/css_bkgr/basic_bkgr.jpg);
	background-repeat:repeat-y;
	padding:20px 0px 20px 0px;
}

.photoGalleryContent { margin:0 50px 0px 50px; }
.photoGallery-pgNav { width:700px; margin:0; padding:5px; color:#74559E; border-bottom:1px dotted #FFF; border-top:1px dotted #FFF; text-align:center;
font-size:14px;
font-weight:bold; }
.photoGallery-pgNav a { margin:0 5px; }


/* ---------- new custom classes ------------- */
.centerBTN{
	text-align:center;
	display:block;
	margin:0px auto 0px auto;
}
.rightBTN{
	text-align:right;
	display:block;
	margin:0px 0px 0px auto;
}
.rightTXT{
	text-align:right;
}

.centered {
  width: 85%;
  height: 50%;
  margin: 40% auto 0 auto;
} 

.formTable { background-color:#e5efb3; }

.formTable td {
	padding:3px;
	border-bottom:1px dotted #F4FFC2;
}
.indent {
	padding:0 0 0 10px;
	margin:0 0 0 10px;
}


/* ------------- new NAV --------------- */
div#nav{
	width:160px;
	float:left;
	position:relative;
}
ul#mainnav {
	background: #CAB4DA;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0px;
	list-style-type: none;
	}

ul#mainnav li {
	display: block;
	margin: 0px;
	padding: 0px;
	color: #FFF;
}

ul#mainnav li a:link, ul#mainnav li a:visited, ul#mainnav li a:active {
	font-size: 12px;
	font-weight:bold;
	text-decoration: none;
	text-align: left;
	display: block;
	width: 135px;
	height:20px;
	padding: 15px 10px 5px 15px;
	margin: 0;
	border-bottom: 8px solid #63538F;
	overflow:hidden;
}

ul#mainnav li a:hover, ul#mainnav li a.current:link, ul#mainnav li a.current:visited {
	background-color: #FBA400;
}
ul#subnav {
	position:absolute;
	float: left;
	width: 140px;
	margin: 0;
	list-style-type: none;
	top: 375px;
	color: #4F1940;
	height: 40px;
	padding: 25px 10px 20px 10px;
	display:none;
}
	
ul#subnav li {
	font-size:12px;
	font-weight:normal;
	margin: 0px;
	padding: 0px;
	color: #000000;
}
	
ul#mainnav li:hover ul#subnav {
	display: block;
}
	

div#caterpillar{
	width:160px;
	text-align:right;
	display:block;
}
div#caterpillar img{
	padding-top:150px;
	padding-bottom:25px;
}




/* Top Menu Code */
#topnav{width:800px;margin:0;padding:0;height:20px;}
#topnav ul{border:0;margin:0;padding:0;list-style-type:none;text-align:center;}
#topnav ul li{display: block;float:left;text-align:center;padding:0;margin:0;}
#topnav ul li a{width:131px;height:25px;border:1px solid #584178;
	padding-top: 3px;margin: 0;color: yellow;text-decoration:none;display:block;text-align:center;
	font: normal 13px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	background: url("/wings/css/nav_stripe.jpg") repeat-x 131px;}
#topnav ul li a:hover{color:#584178;background: url("/wings/css/nav_stripe_hover.jpg") repeat-x 131px;} 

/*For pop up text */
 #topnav li {position:relative;text-align:center;padding:10px 0px;margin:0px;color:#86418B;} 
 #topnav li ul { /* hover text */
	position: absolute;background-color:transparent;left: -999em; /* hides menus */}
#topnav li:hover ul, #topnav li.sfhover ul {left:0px;top:40px;}
li.upperbtn {font-size:14px;margin: 6px 0 0 0;padding:2px;}
li.lowerhov {font-size:12px;width:131px;}


/* FLMNH top bar link style */
a.flmnh:link, a.flmnh:visited, a.flmnh:active, .flmnhtxt {color:#00529B;text-decoration:none; font-size:110%;}
a.flmnh:hover{color:#996633;text-decoration:underline;}


/* ------------Spry Text Field --------------- */
/* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText {
	color: red !important;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {
	/*color: red !important;*/
}


/* ---------------- Spry Text Area -------------- */
/* SpryFormValidation.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */



/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textareaRequiredMsg,
.textareaMinCharsMsg,
.textareaMaxCharsMsg,
.textareaValidMsg {
	display:none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textareaRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}

/* The next three group selectors control the way the core element (TEXTAREA) looks like when the widget is in one of the states: * focus, required / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the TEXTAREA
 * - the widget id is placed on the TEXTAREA element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the TEXTAREA has a green background applied on it. */
.textareaValidState textarea, textarea.textareaValidState {
	background-color:#B8F5B1;
}

/* When the widget is in an invalid state the TEXTAREA has a red background applied on it. */
textarea.textareaRequiredState, .textareaRequiredState textarea, 
textarea.textareaMinCharsState, .textareaMinCharsState textarea, 
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
	background-color:#FF9F9F;
}

/* When the widget has received focus, the TEXTAREA has a yellow background applied on it. */
.textareaFocusState textarea, textarea.textareaFocusState {
	background-color:#FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textarea looks like.
 * It applies only when the widget has enforce max chars enabled and the user tries to type some more.
 */
.textareaFlashState textarea, textarea.textareaFlashState{
	color:red !important;
}
/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
textarea.textareaHintState, .textareaHintState textarea{
	/* color: red !important;*/
}


