@charset "utf-8";
/* CSS Document */


/* ~~ Color Variances for YMCA Danville website ~~ */

/* ~~ Various YMCA Focus Logos ~~ */

#header .focusblue {
	background: transparent url(images/blue_focus.gif) no-repeat;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	float:left;
	line-height:20px;
	margin:75px 0 0 10px;
	width:172px;
	height:46px;
}
#header .focusgreen {
	background: transparent url(images/green_focus.gif) no-repeat;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	float:left;
	line-height:20px;
	margin:75px 0 0 10px;
	width:172px;
	height:46px;
}
#header .focusred {
	background: transparent url(images/red_focus.gif) no-repeat;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	float:left;
	line-height:20px;
	margin:75px 0 0 10px;
	width:172px;
	height:46px;
}
#header .focusorange {
	background: transparent url(images/orange_focus.gif) no-repeat;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	float:left;
	line-height:20px;
	margin:75px 0 0 10px;
	width:172px;
	height:46px;
}
#header .focuspurple {
	background: transparent url(images/purple_focus.gif) no-repeat;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	float:left;
	line-height:20px;
	margin:75px 0 0 10px;
	width:172px;
	height:46px;
}
#header .phoneblue {
	font-size: 12px;
	font-weight:bold;
	text-transform:uppercase;
}
/* ~~ Color Name Title ~~ */

#header .nameblue {
	font-size:20px;
	font-weight:bold;
	float:right;
	color:#5c2e91;
	margin:17px 0 0;
	text-align:right;
}
#header .namegreen {
	font-size:20px;
	font-weight:bold;
	float:right;
	color:#0060af;
	margin:17px 0 0;
	text-align:right;
}
#header .namered {
	font-size:20px;
	font-weight:bold;
	float:right;
	color:#dd5828;
	margin:17px 0 0;
	text-align:right;
}
#header .nameorange {
	font-size:20px;
	font-weight:bold;
	float:right;
	color:#006b6b;
	margin:17px 0 0;
	text-align:right;
}
#header .namepurple {
	font-size:20px;
	font-weight:bold;
	float:right;
	color:#a92b31;
	margin:17px 0 0;
	text-align:right;
}
/* ~~ Navigation Bar Settings ~~ */

#header .navbarblue {
	text-align:center;
	background:url(images/blue_navbar.gif) repeat-x;
	width:950px;
	height:26px;
	margin:155px 0 0 0;
}
#header .navbargreen {
	text-align:center;
	background:url(images/green_navbar.gif) repeat-x;
	width:950px;
	height:26px;
	margin:155px 0 0 0;
}
#header .navbarred {
	text-align:center;
	background:url(images/red_navbar.gif) repeat-x;
	width:950px;
	height:26px;
	margin:155px 0 0 0;
}
#header .navbarorange {
	text-align:center;
	background:url(images/orange_navbar.gif) repeat-x;
	width:950px;
	height:26px;
	margin:155px 0 0 0;
}
#header .navbarpurple {
	text-align:center;
	background:url(images/purple_navbar.gif) repeat-x;
	width:950px;
	height:26px;
	margin:155px 0 0 0;
}

/* ~~ Navigation Blue Bar Settings ~~ */

#header .navigationblue ul, .navigationblue li{ list-style:none; padding:0px; margin:0px; display:inline-block;}
#header .navigationblue ul li{position:relative;}
#header .navigationblue ul li a {
	display:block; 
	padding:0px 10px; 
	margin:2px; 
	font-size:17px;
	color:#FFF;
	white-space:nowrap; 
	border-radius:5px;
	text-decoration:none;
	line-height:1.3em;
}

#header .navigationblue ul li a:hover{ background:#0089d0;}
#header .navigationblue ul ul{ 
    display:block;
	position:absolute; 
    top:-99999px; 
    left:0;
    opacity: 0; /* Hide sub level */
    -webkit-transition: opacity .4s ease-in-out; /* For chrome & safari */
    -moz-transition: opacity .4s ease-in-out; /* For mozilla firefox */
    -o-transition: opacity .4s ease-in-out; /* For opera */
    transition: opacity .4s ease-in-out; /* Not yet implemented, but will be available soon */
    z-index:497; 
    background:#0089d0; 
    padding: 5px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
    border-bottom-left-radius:6px; 
    border-bottom-right-radius:6px; 
}
#header .navigationblue ul ul ul { 
    position:absolute; 
    top:-99999px; 
    left:100%; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #444;
}
#header .navigationblue ul li:hover>ul{ opacity: 2; position:absolute; top:99%; left:0; background:#0060AF;}
#header .navigationblue ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#0060AF;}

/* ~~ Navigation Green Bar Settings ~~ */

#header .navigationgreen ul, .navigationgreen li{ list-style:none; padding:0px; margin:0px; display:inline-block;}
#header .navigationgreen ul li{position:relative;}
#header .navigationgreen ul li a {
	display:block; 
	padding:0px 10px; 
	margin:2px; 
	font-size:17px;
	color:#FFF;
	white-space:nowrap; 
	border-radius:5px;
	text-decoration:none;
	line-height:1.3em;
}

#header .navigationgreen ul li a:hover{ background:#01a490;}
#header .navigationgreen ul ul{ 
    display:block;
	position:absolute; 
    top:-99999px; 
    left:0;
    opacity: 0; /* Hide sub level */
    -webkit-transition: opacity .4s ease-in-out; /* For chrome & safari */
    -moz-transition: opacity .4s ease-in-out; /* For mozilla firefox */
    -o-transition: opacity .4s ease-in-out; /* For opera */
    transition: opacity .4s ease-in-out; /* Not yet implemented, but will be available soon */
    z-index:497; 
    background:#01a490; 
    padding: 5px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
    border-bottom-left-radius:6px; 
    border-bottom-right-radius:6px; 
}
#header .navigationgreen ul ul ul { 
    position:absolute; 
    top:-99999px; 
    left:100%; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #444;
}
#header .navigationgreen ul li:hover>ul{ opacity: 2; position:absolute; top:99%; left:0; background:#006b6b;}
#header .navigationgreen ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#006b6b;}

/* ~~ Navigation Red Bar Settings ~~ */

#header .navigationred ul, .navigationred li{ list-style:none; padding:0px; margin:0px; display:inline-block;}
#header .navigationred ul li{position:relative;}
#header .navigationred ul li a {
	display:block; 
	padding:0px 10px; 
	margin:2px; 
	font-size:17px;
	color:#FFF;
	white-space:nowrap; 
	border-radius:5px;
	text-decoration:none;
	line-height:1.3em;
}

#header .navigationred ul li a:hover{ background:#ed1c24;}
#header .navigationred ul ul{ 
    display:block;
	position:absolute; 
    top:-99999px; 
    left:0;
    opacity: 0; /* Hide sub level */
    -webkit-transition: opacity .4s ease-in-out; /* For chrome & safari */
    -moz-transition: opacity .4s ease-in-out; /* For mozilla firefox */
    -o-transition: opacity .4s ease-in-out; /* For opera */
    transition: opacity .4s ease-in-out; /* Not yet implemented, but will be available soon */
    z-index:497; 
    background:#ed1c24; 
    padding: 5px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
    border-bottom-left-radius:6px; 
    border-bottom-right-radius:6px; 
}
#header .navigationred ul ul ul { 
    position:absolute; 
    top:-99999px; 
    left:100%; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #444;
}

#header .navigationred ul li:hover>ul{ opacity: 2; position:absolute; top:99%; left:0; background:#a92b31;}
#header .navigationred ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#a92b31;}

/* ~~ Navigation Orange Bar Settings ~~ */

#header .navigationorange ul, .navigationorange li{ list-style:none; padding:0px; margin:0px; display:inline-block;}
#header .navigationorange ul li{position:relative;}
#header .navigationorange ul li a {
	display:block; 
	padding:0px 10px; 
	margin:2px; 
	font-size:17px;
	color:#FFF;
	white-space:nowrap; 
	border-radius:5px;
	text-decoration:none;
	line-height:1.3em;
}

#header .navigationorange ul li a:hover{ background:#f47920;}
#header .navigationorange ul ul{ 
    display:block;
	position:absolute; 
    top:-99999px; 
    left:0;
    opacity: 0; /* Hide sub level */
    -webkit-transition: opacity .4s ease-in-out; /* For chrome & safari */
    -moz-transition: opacity .4s ease-in-out; /* For mozilla firefox */
    -o-transition: opacity .4s ease-in-out; /* For opera */
    transition: opacity .4s ease-in-out; /* Not yet implemented, but will be available soon */
    z-index:497; 
    background:#f47920; 
    padding: 5px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
    border-bottom-left-radius:6px; 
    border-bottom-right-radius:6px; 
}
#header .navigationorange ul ul ul { 
    position:absolute; 
    top:-99999px; 
    left:100%; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #444;
}

#header .navigationorange ul li:hover>ul{ opacity: 2; position:absolute; top:99%; left:0; background:#dd5828;}
#header .navigationorange ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#dd5828;}

/* ~~ Navigation Purple Bar Settings ~~ */

#header .navigationpurple ul, .navigationpurple li{ list-style:none; padding:0px; margin:0px; display:inline-block;}
#header .navigationpurple ul li{position:relative;}
#header .navigationpurple ul li a {
	display:block; 
	padding:0px 10px; 
	margin:2px; 
	font-size:17px;
	color:#FFF;
	white-space:nowrap; 
	border-radius:5px;
	text-decoration:none;
	line-height:1.3em;
}

#header .navigationpurple ul li a:hover{ background:#92278f;}
#header .navigationpurple ul ul{ 
    display:block;
	position:absolute; 
    top:-99999px; 
    left:0;
    opacity: 0; /* Hide sub level */
    -webkit-transition: opacity .4s ease-in-out; /* For chrome & safari */
    -moz-transition: opacity .4s ease-in-out; /* For mozilla firefox */
    -o-transition: opacity .4s ease-in-out; /* For opera */
    transition: opacity .4s ease-in-out; /* Not yet implemented, but will be available soon */
    z-index:497; 
    background:#92278f; 
    padding: 5px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
    border-bottom-left-radius:6px; 
    border-bottom-right-radius:6px; 
}
#header .navigationpurple ul ul ul { 
    position:absolute; 
    top:-99999px; 
    left:100%; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #444;
}

#header .navigationpurple ul li:hover>ul{ opacity: 2; position:absolute; top:99%; left:0; background:#5c2e91;}
#header .navigationpurple ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#5c2e91;}


/* ~~ Navigation Blue Bar Smalle Setting ~~ */

#header .navigationbluet ul, .navigationbluet li{ list-style:none; padding:0px; margin:0px; display:inline-block;}
#header .navigationbluet ul li{position:relative;}
#header .navigationbluet ul li a {
	display:block; 
	padding:0px 10px; 
	margin:2px; 
	font-size:16px;
	color:#FFF;
	white-space:nowrap; 
	border-radius:5px;
	text-decoration:none;
	line-height:1.3em;
}

#header .navigationbluet ul li a:hover{ background:#0089d0;}
#header .navigationbluet ul ul{ 
    display:block;
	position:absolute; 
    top:-99999px; 
    left:0;
    opacity: 0; /* Hide sub level */
    -webkit-transition: opacity .4s ease-in-out; /* For chrome & safari */
    -moz-transition: opacity .4s ease-in-out; /* For mozilla firefox */
    -o-transition: opacity .4s ease-in-out; /* For opera */
    transition: opacity .4s ease-in-out; /* Not yet implemented, but will be available soon */
    z-index:497; 
    background:#0089d0; 
    padding: 5px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
    border-bottom-left-radius:6px; 
    border-bottom-right-radius:6px; 
}
#header .navigationbluet ul ul ul { 
    position:absolute; 
    top:-99999px; 
    left:100%; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #444;
}
#header .navigationbluet ul li:hover>ul{ opacity: 2; position:absolute; top:99%; left:0; background:#0060AF;}
#header .navigationbluet ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#0060AF;}