/**********************************************************************
	Filename: akronymca.css
	Project:  akronymca.org
	
	Global style sheet
**********************************************************************/

/* BODY TAG */
body { margin:0px; background-color:#ffffff; }

/* Assign font and color to the general styles */
font, th, td, p, span, div, textarea, a, ul, li { font-family:Arial, sans-serif; font-weight:normal; font-size:12px; color:#000000; }
a { font-weight:bold; font-style:normal; color:#66ccff; text-decoration:none;}
a:hover { text-decoration: underline; }
hr { width:100%; height:1px; margin: 0px 0px 0px 0px; color:#739098; }
p { margin:0px 0px 20px 0px; padding:0px; }

/* heading tags */
h1, h2, h3, h4 { font-family:Arial, sans-serif; margin:0px; padding:0px; color:#ff3333; }
h1 { font-size:24px; font-weight:300; margin-bottom:5px; }
h2 { font-size:20px; font-weight:normal; margin-bottom:5px; }
h3 { font-size:14px; }
h4 { font-size:12px; }
h3 a { font-size:14px; color:#ff3333; }

/* HEADER */
#header { position:relative; width:800px; height:113px; text-align:left; }
#searchBar { width:220px; position:absolute; top:39px; right:0px; text-align:right; margin:0px; padding:0px; }
#socialMediaBar { position:absolute; top:33px; right:228px; }
input.btn { font-weight:bold; height:21px; }
input.txtSearch { height:15px; width:150px; border:1px solid #ababac; background-color:#f2f2f2; color:#999999; }

/* TOP NAV TABS */
#topNav { position:absolute; bottom:1px; right:0px; height:26px; }
#topNavBlue { float:left; width:139px; height:26px; background-image:url(../images/topNavBlue.gif); text-align:center; }
#topNavYellow { float:left; width:140px; height:26px; background-image:url(../images/topNavYellow.gif); text-align:center; }
#topNavGreen { float:left; width:139px; height:26px; background-image:url(../images/topNavGreen.gif); text-align:center; }
.topNavBlueLink { display:block; width:139px; height:21px; padding:5px 0px 0px 0px; color:#ffffff; font-size:14px; }
.topNavYellowLink { display:block; width:140px; height:21px; padding:5px 0px 0px 0px; color:#ffffff; font-size:14px; }
.topNavGreenLink { display:block; width:139px; height:21px; padding:5px 0px 0px 0px; color:#ffffff; font-size:14px; }
#topNavBlue a:hover { text-decoration:none; background-image:url(../images/arrowOnBlue.jpg); background-repeat:no-repeat; background-position:11px 8px; }
#topNavYellow a:hover { text-decoration:none; background-image:url(../images/arrowOnYellow.jpg); background-repeat:no-repeat; background-position:13px 8px; }
#topNavGreen a:hover { text-decoration:none; background-image:url(../images/arrowOnGreen.jpg); background-repeat:no-repeat; background-position:28px 8px; }

/* NAVIGATION */
.navigation { z-index:2; position:relative; width:783px; height:40px; padding:0px 0px 0px 17px; background-color:#ff3333; }
.navSection { position:relative; float:left; padding:0px 10px 0px 0px; }
.pagParent a { height:40px; color:#ffffff; font-size:14px; line-height:40px; }
.pagParent a:hover { color:#ffcc00; text-decoration:none; }

/* DROPDOWN */
.navDropDown { position:absolute; left:0px; top:40px; z-index:3; width:250px; border:1px solid #669999; background-color:#ddffff; }
.navDropDownLink a { display:block; height:15px; padding:3px 0px 3px 15px; color:#669999; font-weight:normal; text-align:left; }
.navDropDownLink a:hover { color:#ffffff; background-color:#77ddcc; font-weight:normal; text-decoration:none; }

.navDropDownChildLink a { display:block; height:15px; padding:3px 0px 3px 30px; color:#669999; font-weight:normal; text-align:left; }
.navDropDownChildLink a:hover { color:#ffffff; background-color:#77ddcc; font-weight:normal; text-decoration:none; }

/* SUB MENU */
#submenuNav { width:160px; padding:10px 0px 0px 0px; }
#submenu div { padding:0px 0px 5px 12px; font-weight:bold; color:#0e0b98; }
.submenuHeader{ color:#ff3333; font-size:18px; padding:0px 0px 0px 25px; }
.submenuOff a { text-decoration:none; font-weight:normal; color:#000000; }
.submenuOff a:hover { text-decoration:none; color:#66ccff; }
.submenuOn { background-image:url( '../images/subArrowOn.gif' ); background-repeat:no-repeat; }
.submenuOn a { text-decoration:none; font-weight:normal; color:#66ccff; }
.submenuOn a:hover { text-decoration:none; color:#66ccff; }

/* SUB MENU CHILDREN */
#subMenuChildren { margin:3px 0px 8px 15px; }
#subMenuChildren a { font-size:10px; }
#subChildHere { font-size:10px; color:#ff3333; font-weight:bold; }

/* MAIN ELEMENTS */
#page { width:798px; margin:0px; padding:0px; background-color:#ffffff; text-align:left; }
#contentContainer { width:798px; margin:0px; padding:0px; border-left:1px solid #eeeeee; border-right:1px solid #eeeeee; }
#contentContainerHome { width:800px; margin:0px; padding:0px; }
#contentContainerLanding { width:798px; margin:0px; padding:0px; border-left:1px solid #eeeeee; border-right:1px solid #eeeeee; background-image:url( '../images/containerLandingBG.gif' ); background-repeat:repeat-y; }

#leftSide { width:604px; margin:0px; padding:0px; }
#leftSideLanding { width:572px; margin:0px; padding:0px; }
#rightSide { float:right; width:191px; margin:0px; padding:0px; text-align:left; background-image:url(../images/subMenuBG.gif); background-repeat:no-repeat; }
#rightSideLanding { float:right; width:223px; margin:0px; padding:0px; background-color:#ffffff; background-image:url(../images/subMenuLandingBG.gif); background-repeat:repeat-x; }
#leftSideHome { width:523px; background-color:#3163ce; color:#ffffff; padding:15px 15px 0px 35px; border-right:#eeeeee 1px solid;}
#rightSideHome { width:189px; float:right; padding:15px 15px 0px 15px; }

.breadcrumbs { padding:15px 25px 0px 25px; font-weight:bold; color:#66ccff; }
.breadcrumbsSpacer { color:#66ccff; font-weight:bold; }
.breadcrumbs a { font-weight:bold; }

.breadcrumbs .stelterHeadline { font-size:12px; font-weight:bold; font-style:normal; color:#66ccff; }


#pagHeader { width:798px; position:relative; margin:0px; padding:0px; }
#pagHeaderText { position:absolute; top:38px; left:27px; margin:0px; }
#pagContent { padding:15px 25px 20px 25px; }
#homeContent { padding:0px; }

/* FOOTER */
#footer { width:800px; padding:8px 0px 10px 0px; }
#footer a { color:#33ccff; font-size:12px; font-weight:normal; }
#footer a:hover { text-decoration:underline; }
#copyright { float:left; width:500px; text-align:left; color:#33ccff; }
#footerLinks { float:right; width:300px; color:#33ccff; }

.homeLocationText { margin:15px 0px 18px 0px; border:1px solid #ababac; background-color:#f2f2f2; height:14px; color:#999999; }

/* HEADLINE BOXES */
#headlinesContainer { clear:both; width:798px; text-align:left; border:1px solid #eeeeee; }
.headlineBoxLeft { width:266px; }
.headlineBoxRight { width:266px; }
.headlineBoxMiddle { width:264px; }
.headlineTitle { padding:10px 0px 10px 15px; font-size:18px; color:#ffffff; }
.headlineContainer { padding:10px; }
.headlinePic { width:80px; float:left; padding:0px 10px 5px 0px; }
.headlineText { width:140px; float:left; }

/* BOXES */
.box { float:left; width:159px; border:1px solid #ffffff; margin:0px 20px 20px 0px; }
.boxLast { float:left; width:159px; border:1px solid #ffffff; margin:0px 0px 20px 0px; }
.boxImage { border-bottom:1px solid #ffffff; }
.boxLink { padding:10px 0px 10px 10px; background-color:#66ccff; }

/* YMCA MISSION */
#mission { clear:both; width:798px; height:28px; padding:12px 0px 0px 0px; text-align:center; font-weight:bold; color:#ffffff; background-color:#ff3333; border-left:1px solid #eeeeee; border-bottom:1px solid #eeeeee; border-right:1px solid #eeeeee; }

/* EMPLOYMENT */
.jobTable { margin:5px 0px 10px 5px; }
.jobTable td { padding:3px 0px 3px 0px; }
.jobSpacer { width:3%; }
.jobField { width:25%; font-weight:bold; padding-left:20px; }
.jobData { width:72%; }
.jobLocation { margin-top:5px; padding:5px 0px 5px 5px; border-top:1px solid #cccccc; background-color:#eeeeee; }

/* JOB APPLICATION */
.appTable { margin:5px 0px 5px 0px; }
.appField { width:33%; padding:2px 0px 2px 0px; }
.appData { width:67%; padding:2px 0px 2px 0px; }

.appDiv { margin:5px 0px 5px 0px; }
.appDivField { padding:2px 0px 2px 0px; }
.appDivData { padding:2px 0px 2px 0px; }

/* COMMENT FORM */
.comTable { margin:5px 0px 5px 0px; }
.comField { width:20%; padding:2px 0px 2px 0px; }
.comData { width:80%; padding:2px 0px 2px 0px; }

/* EVENT CALENDAR */
.eventTable { margin-top:5px; }
.eventTable td { padding:2px 0px 2px 0px; }
.eventField { width:25%; font-weight:bold; }
.eventData { width:75%; }

/* JOIN */
.joinTable { float:left; margin:0px 10px 10px 0px; }
.joinTable td { padding-bottom:4px; }

/* DOWNLOADS */
.downloadLocation { margin:5px 0px 5px 0px; padding:5px 0px 2px 0px; border-bottom:1px solid #cccccc; }

/* STELTER */
.stelterHeadlineWrapper { margin:0px 0px 5px 0px; }
.stelterHeadlineWrapper .stelterName { color:#ff3333; font-size:20px; font-weight:normal; }

.stelterBodyNameWrapper { margin:0px; }
.stelterBodyNameWrapper .stelterName { color:#ff3333; font-size:14px; font-weight:bold; }
.stelterBodyDescWrapper {}

.submenuOff a .stelterName { text-decoration:none; font-weight:normal; color:#000000; }
.submenuOff a:hover .stelterName { text-decoration:none; color:#66ccff; }

.stelterHeadline { color:#ff3333; font-size:20px; font-weight:normal; }

/*
.stelterTeaser { font-size:; color:; line-height:; font-weight:; }
.stelterArticleText { font-size:; color:; line-height:; font-weight:; }
.stelterCopyright { font-size:; color:; line-height:; font-weight:; }
.stelterArticleTitle { font-size:; color:; line-height:; font-weight:; }
.stelterArticleEbrochure { font-size:; color:; line-height:; font-weight:; }
.stelterDescription { font-size:; color:; line-height:; font-weight:; }
*/

.note { font-size:10px; }
.whitetext { color:#ffffff }
.redText { color:#ff3333; font-size:18px; padding:0px; }

.tbl { border-bottom:1px solid #cccccc; }
.tblh { color:#ff3333; font-size:14px; padding-bottom:4px; font-weight:bold; }
.tbld { padding:4px 0px 4px 0px; border-top:1px solid #cccccc; }

/* Image styles */
.LeftImage { margin:0px 10px 10px 0px; float:left; }
.CenterImage { margin:10px 0px 10px 0px; }
.RightImage { margin:0px 0px 10px 10px;float:right; }