/*
Project - YMCA Winchester
*/


/* =reset
----------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%; vertical-align : baseline; background : transparent;
}
ol, ul { list-style: none; list-style-image: none; list-style-position: outside; list-style-type: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none;}
blockquote, q { quotes: "" ""; }
a img { border: none; }
abbr, acronym { border-bottom-width : 0; }
strong { font-weight : bold; }
em { font-style : italic; }

/* =defaults
----------------------------------------------------------------------------------------- */
a, a:link { color: #1c81bc; text-decoration: none; }
a:hover, a:focus { color: #555; text-decoration: none; border-bottom: 1px dotted; }
a.noBorder:hover, a.noBorder:focus { border-bottom: 0 none; }

img.left { float: left; margin: 10px 20px 16px 0; }
img.right { float: right; margin: 10px 0 16px 20px; }
img.border { border: 6px solid #d1d1d1; }
img.block { display: block; margin: 0 auto 16px; }
p.right { text-align: right; }

a.imgAnimation img, a.imgAnimation:link img { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; }
a.imgAnimation:hover img, a.imgAnimation:focus img { filter: alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; }
a.imgAnimation:hover, a.imgAnimation:focus { border-bottom: 0 none; }

strong.highlight { font-weight: normal; }
em.highlight { font-style: normal; color: #222; }

.download { overflow: auto; padding: 10px 0 22px; text-align: center; }
.download a, .download a:link { padding: 5px 10px; background-color: #555; border: 1px solid #333; font-size: 14px; line-height: 14px; font-weight: bold; color: #fff; text-decoration: none; text-shadow: 1px 1px 0 #333; }

.download a:hover, .download a:focus { background-color: #1c81bc; border: 1px solid #13699b; }

.note { clear: both; margin: 0 0 16px 0; padding: 10px 10px 0; background-color: #ddd; text-shadow: 1px 1px 0 #eee;  }

/* =layout / divisions
----------------------------------------------------------------------------------------- */
body { font: normal 12px/20px Helvetica, Arial, sans-serif; color: #555; height: 100%; background-color: #fff; }

#outerWrapper { position: relative; width: 929px; margin: 0 auto; padding: 0; overflow: hidden; background: url(../images/layout/outerWrapper-bg.gif) 0 113px scroll repeat-x #efefef; }

#ourFriends { width: 269px; height: 154px; position: absolute; bottom: 78px; left: 22px; }

#ourFriends a:hover, #ourFriends a:focus { border-bottom: 0 none; }
#ourFriends a:hover img, #ourFriends a:focus img { border-bottom: 0 none; }

/* =header
----------------------------------------------------------------------------------------- */
#header { position: relative; width: 929px; height: 113px; background: url(../images/layout/header/home.jpg) no-repeat; }
.vision #header { background-image: url(../images/layout/header/vision.jpg); }
.appeal #header { background-image: url(../images/layout/header/appeal.jpg); }
.youthArt #header { background-image: url(../images/layout/header/youthArt.jpg); }
.volunteer #header { background-image: url(../images/layout/header/volunteer.jpg); }
.staff #header { background-image: url(../images/layout/header/staff.jpg); }
.stJohns #header { background-image: url(../images/layout/header/stJohns.jpg); }
.contact #header { background-image: url(../images/layout/header/contact.jpg); }


#header h2 { position: absolute; width: 150px; top: 44px; right: 175px; font: bold 14px/ 20px Helvetica, Arial, sans-serif; text-shadow: 1px 1px 0 #eee; }
.appeal #header h2 { text-shadow: 1px 1px 0 #ccc; }
.volunteer #header h2 { color: #eed0d5; text-shadow: 1px 1px 0 #555; }
.staff #header h2 { color: #e2f3f9; text-shadow: 1px 1px 0 #555; }
.contact #header h2 { color: #e1c8ad; text-shadow: 1px 1px 0 #555; }

#miscLinks { position: absolute; width: 150px; height: 75px; right: 20px; top: 35px;}
#miscLinks li { display: inline; }
#miscLinks li a, #miscLinks li a:link { display: block; float: left; width: 37px; height: 37px; margin-right: 15px; background-repeat: no-repeat; text-indent: -9999px; -moz-opacity:1; opacity:1; }
#miscLinks li#twitter a, #miscLinks li#twitter a:link { background-image: url(../images/layout/twitter.png) }
#miscLinks li#facebook a, #miscLinks li#facebook a:link { background-image: url(../images/layout/facebook.png) }
#miscLinks li a:hover, #miscLinks li a:focus { -moz-opacity:0.90; opacity:0.90; border-bottom: 0 none; }


/* =menu
----------------------------------------------------------------------------------------- */
#menu { clear: both; width: 760px; height: 38px; margin: 0 auto 20px; background: none 0 0 scroll no-repeat transparent; }
#menu li {display: block; float: left; padding-right: 5px; }
#menu li a { display: block; float: left; width: 90px; height: 28px; padding-top: 10px; text-align: center; background-image: url(../images/layout/navMain-sprite.jpg); background-position: 0 0; background-attachment: scroll; background-repeat: no-repeat; font: normal 14px/18px Helvetica, Arial, sans-serif; color: #fff; text-decoration: none; text-shadow: 1px 1px 0 #555;}

#menu li#home a { background-position: 0 0; background-color: #db9401; }
.home #menu li#home a { background-position: 0 -38px; background-color: #db9401; }
#menu li#vision a { background-position: -90px 0; background-color: #fbd20a; }
.vision #menu li#vision a { background-position: -90px -38px; background-color: #fbd20a; }
#menu li#appeal a { background-position: -180px 0; background-color: #d06fbd; }
.appeal #menu li#appeal a { background-position: -180px -38px; background-color: #d06fbd; }
#menu li#youthArt a { background-position: -270px 0; background-color: #07a8a1; }
.youthArt #menu li#youthArt a { background-position: -270px -38px; background-color: #07a8a1; }
#menu li#volunteer a { background-position: -360px 0; background-color: #99071d; }
.volunteer #menu li#volunteer a { background-position: -360px -38px; background-color: #99071d; }
#menu li#staff a { background-position: -450px 0; background-color: #1c7eb6; }
.staff #menu li#staff a { background-position: -450px -38px; background-color: #1c7eb6; }
#menu li#stJohns a { background-position: -540px 0; background-color: #399515; }
.stJohns #menu li#stJohns a { background-position: -540px -38px; background-color: #399515; }
#menu li#contact a { background-position: -630px 0; background-color: #78510a; }
.contact #menu li#contact a { background-position: -630px -38px; background-color: #78510a; }

#menu li a:hover, #menu li a:focus { filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; border-bottom: 0 none; }

.home #menu li#home a:hover, .home #menu li#home a:focus,
.vision #menu li#vision a:hover, .vision #menu li#vision a:focus,
.appeal #menu li#appeal a:hover, .appeal #menu li#appeal a:focus,
.youthArt #menu li#youthArt a:hover, .youthArt #menu li#youthArt a:focus,
.volunteer #menu li#volunteer a:hover, .volunteer #menu li#volunteer a:focus,
.staff #menu li#staff a:hover, .staff #menu li#staff a:focus,
.stJohns #menu li#stJohns a:hover, .stJohns #menu li#stJohns a:focus,
.contact #menu li#contact a:hover, .contact #menu li#contact a:focus { color: #fff; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

/* =banner
----------------------------------------------------------------------------------------- */
#banner { clear: both; position: relative; width: 840px; height: 260px; margin: 0 auto 20px; padding: 20px; background: url(../images/banner/home.jpg) no-repeat center center; border: 1px solid #acacac; }

#voices { position: relative; width: 390px; height: 140px; padding: 70px 0 0 465px; }
#voices h2 { width: 440px; position: absolute; bottom: 0; right: 0; text-align: center; font:  bold 14px/20px Helvetica, Arial, sans-serif; color: #686666; text-shadow: 1px 1px 0 #fff; }
#voices img { float: left; display: block; width: 86px; height: 82px; margin-right: 28px; padding: 3px; background-color: #d1d1d1; border-bottom: 1px solid #3c3b35; filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; }
#voices a:hover img, #voices a:focus img { color: #fff; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

/* =content
----------------------------------------------------------------------------------------- */
#contentWrapper { clear: both; position: relative; overflow: hidden; width: 840px; margin: 0 auto 15px; padding: 15px 20px; border: 1px solid #acacac; text-shadow: 1px 1px 0 #fff; }

#content { float: left; width: 507px; padding: 0 25px 0 0; }
#content h1 { padding: 0 0 12px 0; font: italic 22px/28px Georgia, "Times New Roman", Times, serif; color: #333; }
#content h3 { padding: 0 0 12px 0; font: bold 12px/20px Helvetica, Arial, sans-serif; color: #333; }
#content p { padding-bottom: 16px; }
#content ul { padding: 10px 0 0 20px; }
#content li { list-style-type: circle; padding: 0 0 8px 6px; }

/* staffDetails */
.staffDetails { clear: both; margin: 0 0 16px 0; padding: 8px 16px 0; background-color: #e9e9e9; border: 1px solid #fff; text-shadow: 1px 1px 0 #eee;  }
#content .staffDetails h2 { margin: 0 0 2px 0; padding: 0 0 5px 0; font: bold 16px/20px Georgia, "Times New Roman", Times, serif; border-bottom: 1px solid #ddd; }
#content .staffDetails h2 em { font-style: normal; font-weight: normal; font-size: 14px; }
#content .staffDetails h4 { font-weight: normal; }
#content .staffDetails p.first { margin: 20px 0 0 0; }
#content .staffDetails p { padding: 5px 0 10px; }

.orange { background-color: #f0e9d9; border: 1px solid #fff; text-shadow: 1px 1px 0 #eee;  }
#content .orange h2 { color: #4c4127; border-bottom: 1px solid #d3cab4; }
#content .orange p { color: #4c4127; }
.yellow { background-color: #f3f3de; border: 1px solid #fff; text-shadow: 1px 1px 0 #eee;  }
#content .yellow h2 { color: #4f4f2d; border-bottom: 1px solid #dbdbc0; }
#content .yellow p, #content .yellow ul { color: #4f4f2d; }
.pink { background-color: #f4e4f1; border: 1px solid #fff; text-shadow: 1px 1px 0 #eee;  }
#content .pink h2 { color: #42243c; border-bottom: 1px solid #d6b6d0; }
#content .pink p { color: #42243c; }
.turquoise { background-color: #d9efee; border: 1px solid #fff; text-shadow: 1px 1px 0 #eee;  }
#content .turquoise h2 { color: #284947; border-bottom: 1px solid #b8d6d5; }
#content .turquoise p { color: #284947; }
.maroon { background-color: #f7e7ee; border: 1px solid #fff; text-shadow: 1px 1px 0 #eee;  }
#content .maroon h2 { color: #482635; border-bottom: 1px solid #e0c6d1; }
#content .maroon p { color: #482635; }
#content .maroon img.border { border-color: #d1a9ba; }
.blue { background-color: #e3eef5; border: 1px solid #fff; text-shadow: 1px 1px 0 #eee;  }
#content .blue h2 { color: #1c313d; border-bottom: 1px solid #b3cad7; }
#content .blue p { color: #1c313d; }
.white { background-color: #fff; border: 1px solid #eee; text-shadow: 1px 1px 0 #fff;  }
#content .white h2 { color: #555; border-bottom: 1px solid #ddd; }
#content .white p { color: #555; }

/* google map */
#content #map { float: right; width: 225px; height: 225px; margin: 0 0 20px 2px; padding: 0; border: 2px solid #eee; border-bottom: 2px solid #ccc; }


/* =sidebar
----------------------------------------------------------------------------------------- */
#sidebar { float: left; width: 308px; }

#ourWork h2 { padding: 0 20px; background: url(../images/layout/our-work-bg.gif) repeat-x #db9502; font: bold italic 18px/39px Georgia, "Times New Roman", Times, serif; color: #333; text-shadow: 1px 1px 0 #f0d182; }

#ourWork ul { padding: 20px 0 4px; font-family: Georgia, "Times New Roman", Times, serif; }

#ourWork li { margin: 0 0 0 10px; padding: 0 10px 12px 25px; background: url(../images/layout/our-work-bullet.gif) no-repeat left 4px; }

/* =footer
----------------------------------------------------------------------------------------- */
#footer { clear: both; width: 929px; padding: 20px 0 15px; background: url(../images/layout/footer-bg.gif) repeat-x bottom left #a0a0a0; color: #333; }

#miscInfo { width: 500px; padding: 10px 20px 22px 409px; background: url(../images/layout/miscInfo-bg.gif) repeat-x bottom left #c2c2c2; }

#miscInfo p { padding: 5px 0 10px; }
#miscInfo p.border { border-bottom: 1px dotted #eee; }

#copyright p { padding: 0 0 8px 22px; }
#copyright img.softscript { margin-bottom: -4px; filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; }
#copyright a:hover img, #copyright a:focus img { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
#copyright a:hover, #copyright a:focus { border-bottom: 0 none; }
#copyright .credits { padding-left: 350px; }
#copyright a:hover, #copyright a:focus { background-color: transparent; }

/* forms
----------------------------------------------- */

form { padding: 0 0 20px 0; }
fieldset { clear: both; }
label, button, input.submit { cursor: pointer; }

form .field, form .buttons { padding-top: 12px; }

form .field { padding-left: 210px; }

form .field label { display: inline; float: left; width: 120px; margin-left: -210px; padding-left: 40px; font-weight: bold; color: #555; }

input.text, textarea { width: 150px; border: 2px solid #eee; font: normal 11px Helvetica, Arial, Helvetica, sans-serif; color: #111; }

input.text:focus, textarea:focus { border: 2px solid #ccc; }

input.submit { margin-top: 6px; margin-left: 210px; padding-top: 2px; padding-bottom: 2px; background-color: #555; border: 0 none; font: bold 11px/16px Verdana, Arial, Helvetica, sans-serif; color: #fff; }
input.submit:hover, input.submit:focus, input.reset:hover, input.reset:focus {background-color: #1C81BC; }
input.reset { margin-left: 10px; }

/* =tabular Data
----------------------------------------------------------------------------------------- */
table.default { width: 500px; margin: 0 auto 18px; border-collapse: collapse; }
table.default th, table.default td { padding: 4px 10px; border: 1px solid #ddd; }
table.default th { background-color: #555; border: 1px solid #999; color: #fff; text-shadow: 1px 1px 0 #000; }


/* Vision Youth Diagram */
table.vision { width: 630px; margin: 0 0 18px; }
table.vision th, table.vision td { padding: 4px 2px; text-shadow: none; }
td.office { background-color: #fafac2; }
td.mSession { background-color: #00ccff; }
td.sSession { background-color: #07A8A1; color: #fff; }
td.oSession { background-color: #1C7EB6; color: #fff; }
td.DSession { background-color: #78510A; color: #fff; }
td.dadsAndKids { background-color: #d33a86; color: #fff; }
td.tripsOrSports { background-color: #a6a6a6; color: #fff; }
td.afterSchoolClub { background-color: #D06FBD; color: #fff; }
td.artsWorkshop { background-color: #99071D; color: #fff; }
td.yNot { background-color: #FBD20A; }
td.youngPeopleEvents { background-color: #008000; color: #fff; }
td.themenight { background-color: #DB9401; color: #fff; }
td.closed { background-color: #e6e6e6; }

/* =fancyBox
----------------------------------------------------------------------------------------- */
div#fancy_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 30; }

div#fancy_loading { position: absolute; height: 40px; width: 40px; cursor: pointer; display: none; overflow: hidden; background: transparent; z-index: 100; }
div#fancy_loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background: transparent url('../images/fancybox/fancy_progress.png') no-repeat; }
div#fancy_outer { position: absolute; top: 0; left: 0; z-index: 90; padding: 20px 20px 40px 20px; margin: 0; background: transparent; display: none; }
div#fancy_inner { position: relative; width:100%; height:100%; background: #FFF; } div#fancy_content { margin: 0; z-index: 100; position: absolute; }
div#fancy_div { background: #fff; height: 100%; width: 100%; z-index: 100; }

/* ----- */
div#fancy_div p { padding: 0 0 12px 0; color: #333; }
div#fancy_div .testimonial { float: left; width: 545px; margin: 0 0 10px;  padding: 5px 5px 10px; background-color: #eee; border: 2px solid #ccc; }
div#fancy_div .testimonial h4 { margin: 0; padding: 0; font: bold 14px/18px; text-transform: uppercase; }
div#fancy_div .testimonial p { padding: 8px 0 0; }
div#fancy_div .testimonial img { border: 2px solid #ccc; margin: 0 10px 0 0; }
div#fancy_div h3 { padding: 0 0 12px 0; font: bold 12px/20px Helvetica, Arial, sans-serif; color: #333; }
/* ----- */

img#fancy_img { position: absolute; top: 0; left: 0; border:0;  padding: 0;  margin: 0; z-index: 100; width: 100%; height: 100%; }
div#fancy_close { position: absolute; top: -12px; right: -15px; height: 30px; width: 30px; background: url('../images/fancybox/fancy_closebox.png') top left no-repeat; cursor: pointer; z-index: 181; display: none; }
#fancy_frame { position: relative; width: 100%; height: 100%; display: none; }
#fancy_ajax { width: 100%; height: 100%; overflow: auto; }
a#fancy_left, a#fancy_right { position: absolute;  bottom: 0px;  height: 100%;  width: 35%;  cursor: pointer; z-index: 111;  display: none; background-image: url("data:image/gif;base64,AAAA"); outline: none; overflow: hidden; }
a#fancy_left { left: 0px; }
a#fancy_right { right: 0px; }
span.fancy_ico { position: absolute;  top: 50%; margin-top: -15px; width: 30px; height: 30px; z-index: 112;  cursor: pointer; display: block; }
span#fancy_left_ico { left: -9999px; background: transparent url('../images/fancybox/fancy_left.png') no-repeat; }
span#fancy_right_ico { right: -9999px; background: transparent url('../images/fancybox/fancy_right.png') no-repeat; }
a#fancy_left:hover, a#fancy_right:hover { visibility: visible; background-color: transparent; } 
a#fancy_left:hover span { left: 20px; }
a#fancy_right:hover span { right: 20px; }
#fancy_bigIframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; }
div#fancy_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 70; border: 0; padding: 0; margin: 0; }
div.fancy_bg { position: absolute; display: block; z-index: 70; border: 0; padding: 0; margin: 0; }
div#fancy_bg_n { top: -20px; width: 100%; height: 20px; background: transparent url('../images/fancybox/fancy_shadow_n.png') repeat-x; }
div#fancy_bg_ne { top: -20px; right: -20px; width: 20px; height: 20px; background: transparent url('../images/fancybox/fancy_shadow_ne.png') no-repeat; }
div#fancy_bg_e { right: -20px; height: 100%; width: 20px; background: transparent url('../images/fancybox/fancy_shadow_e.png') repeat-y; }
div#fancy_bg_se { bottom: -20px; right: -20px; width: 20px; height: 20px; background: transparent url('../images/fancybox/fancy_shadow_se.png') no-repeat; }
div#fancy_bg_s { bottom: -20px; width: 100%; height: 20px; background: transparent url('../images/fancybox/fancy_shadow_s.png') repeat-x; }
div#fancy_bg_sw { bottom: -20px; left: -20px; width: 20px; height: 20px; background: transparent url('../images/fancybox/fancy_shadow_sw.png') no-repeat; }
div#fancy_bg_w { left: -20px; height: 100%; width: 20px; background: transparent url('../images/fancybox/fancy_shadow_w.png') repeat-y; }
div#fancy_bg_nw { top: -20px; left: -20px; width: 20px; height: 20px; background: transparent url('../images/fancybox/fancy_shadow_nw.png') no-repeat; }
div#fancy_title { position: absolute; z-index: 100; display: none; }
div#fancy_title div { color: #FFF; font: bold 12px Arial; padding-bottom: 3px; white-space: nowrap; }
div#fancy_title table { margin: 0 auto; }
div#fancy_title table td { padding: 0; vertical-align: middle; }
td#fancy_title_left { height: 32px; width: 15px; background: transparent url('../images/fancybox/fancy_title_left.png') repeat-x; }
td#fancy_title_main { height: 32px; background: transparent url('../images/fancybox/fancy_title_main.png') repeat-x; }
td#fancy_title_right { height: 32px; width: 15px; background: transparent url('../images/fancybox/fancy_title_right.png') repeat-x; }


/* =accessibilityEnhancements
----------------------------------------------------------------------------------------- */
hr { display: none; visibility: hidden; }
/*visualHide*/
.visuallyHidden { position: absolute; top: -500px; left: 0px; width: 1px; height: 1px; overflow: hidden; }

/* =webkit / mozilla
----------------------------------------------------------------------------------------- */
::selection { color: #fff; background-color: #333; } /* webkit */
::-moz-selection { color: #fff; background-color: #333; } /* mozilla */