/*----------------------------------------------------------------------------- FMAPO Website Style Sheet version: 1 (release 9/9/08) author: C McCartney (cindymccartney@gmail.com) -----------------------------------------------------------------------------*/ @media screen { /* =General -----------------------------------------------------------------------------*/ body { padding: 0; margin: 0; font: 12px Trebuchet MS, Arial, Helvetica, sans-serif; text-align: center; /* Centered design work around for IE 5.X and 6 in quirks mode. */ min-width: 842px; /* Centered design work around for Netscape 6. */ overflow: -moz-scrollbars-vertical; background:#FFFFFF url(../images/bg.jpg) repeat-x; color:#3e3e3e; } body#two_column { background:#FFFFFF url(../images/bg_sp.jpg) repeat-x; } /* Class for clearing floats */ .clear { clear:both; } /* Remove border around linked images */ img { border: 0; } p { margin: 0.8em 0; } h1, h2, h3, h4, h5 { margin: 0.4em 0; } h1 { font-size: 1.5em; color:#808080; } h2 { font-size: 1.3em; color:#44494D; } h3 { font-size: 1.1em; color:#800080; } /* =Links -----------------------------------------------------------------------------*/ a:link { color:#800080; } a:visited { color:#808080; } a:hover { } /* =Structure -----------------------------------------------------------------------------*/ #container { width: 842px; margin: 0 auto; text-align: left; /* Centered design work around for IE 5.X and 6 in quirks mode. */ } #content_container { background:#fffbf9 url(../images/bg_content_container.jpg) repeat-x; text-align:left; } #content { width:842px; margin:0 auto;} #content p {margin: 8px 8px 3px 8px;} #content H2 {margin: 8px 8px 8px 8px; text-align: center;} #content H3 {margin: 8px 8px 3px 8px; } #footer { background:#E6E6E6; text-align:center; } #two_column #footer { height:56px; } /* =Navigation -----------------------------------------------------------------------------*/ ul#nav_main { height:33px; margin:0; padding:0; list-style-type:none; } ul#nav_main li { height:33px; float:left; position:relative; } ul#nav_main li span { width:100%; height:100%; position:absolute; } ul#nav_main li a { display:block; } * html #nav_main a:hover { background:#ccccff; } ul#nav_main li.about_us { width:159px; } ul#nav_main li.about_us a span,ul#nav_main li.about_us a:link span { background:url(../images/buttons/menu_about.jpg) no-repeat; } ul#nav_main li.about_us a:hover span,body.about_us ul#nav_main li.about_us a span { background:url(../images/buttons/menu_about.jpg) no-repeat 0 -46px; } ul#nav_main li.event_cal { width:159px; } ul#nav_main li.event_cal a span,ul#nav_main li.event_cal a:link span { background:url(../images/buttons/menu_eventcal.jpg) no-repeat; } ul#nav_main li.event_cal a:hover span,body.event_cal ul#nav_main li.event_cal a span { background:url(../images/buttons/menu_eventcal.jpg) no-repeat 0 -46px; } ul#nav_main li.class_cal { width:159px; } ul#nav_main li.class_cal a span,ul#nav_main li.class_cal a:link span { background:url(../images/buttons/menu_classcal.jpg) no-repeat; } ul#nav_main li.class_cal a:hover span,body.class_cal ul#nav_main li.class_cal a span { background:url(../images/buttons/menu_classcal.jpg) no-repeat 0 -46px; } ul#nav_main li.fundraising { width:159px; } ul#nav_main li.fundraising a span,ul#nav_main li.fundraising a:link span { background:url(../images/buttons/menu_fund.jpg) no-repeat; } ul#nav_main li.fundraising a:hover span,body.fundraising ul#nav_main li.fundraising a span { background:url(../images/buttons/menu_fund.jpg) no-repeat 0 -46px; } ul#nav_main li.news { width:159px; } ul#nav_main li.news a span,ul#nav_main li.news a:link span { background:url(../images/buttons/menu_newsltr.jpg) no-repeat; } ul#nav_main li.news a:hover span,body.news ul#nav_main li.news a span { background:url(../images/buttons/menu_newsltr.jpg) no-repeat 0 -46px; } #nav_sub { float:right; text-align:right; font-size:0.92em; } #nav_sub, #nav_sub a { color: #FFF; } #nav_sub a { text-transform:uppercase; text-decoration:none; } #nav_sub a:hover { text-decoration:underline; } #nav_supp { width:842px; margin:0 auto; padding-top:5px; font-size: 0.92em; } #nav_supp, #nav_supp a { color: #3e3e3e; } #nav_supp a { text-decoration: none; } #nav_supp a:hover { text-decoration: underline; } /* =Header -----------------------------------------------------------------------------*/ #branding { height:99px; } #branding h1 { width:224px; height:99px; margin:0; padding:0; float:left; position:relative; } #branding h1 span { width:100%; height:100%; position:absolute; background:url(../images/fmapologo.jpg) no-repeat; } .address { font-size:10px; color:#FFFFFF; margin-bottom:3px; } .note { font-size:24px; color:#73B919; } /* =Three Column -----------------------------------------------------------------------------*/ #three_column #content_main { display:inline; width:298px; height:190px; margin:20px 10px 0 3px; padding:0 2px; float:left; background:url(../images/txt_bg_purp.gif) no-repeat; } #three_column #content_sub { display:inline; width:200px; height:190px; margin:20px 0 0 5px; padding:0 2px; float:left; background:url(../images/txt_bg_blue.gif) no-repeat; } #three_column #content_supp{ display:inline; width:298px; height:190px; margin:20px 5px 0 0; padding:0 2px; float:right; background:url(../images/txt_bg_green.gif) no-repeat; } /* =Two Column -----------------------------------------------------------------------------*/ h2.banner { width:842px; height:44px; margin:0; padding:0; position:relative; } h2.banner span { width:100%; height:100%; position:absolute; } body.about_us h2.banner span { background:url(../images/banners/banner_about.jpg) no-repeat; } body.event_cal h2.banner span { background:url(../images/banners/banner_eventcal.jpg) no-repeat; } body.class_cal h2.banner span { background:url(../images/banners/banner_classcal.jpg) no-repeat; } body.fundraising h2.banner span { background:url(../images/banners/banner_fund.jpg) no-repeat; } body.news h2.banner span { background:url(../images/banners/banner_news.jpg) no-repeat; } body.resources h2.banner span { background:url(../images/banners/banner_resources.jpg) no-repeat; } body.contact_us h2.banner span { background:url(../images/banners/banner_contact.jpg) no-repeat; } body.board h2.banner span { background:url(../images/banners/banner_board.jpg) no-repeat; } body.privacy h2.banner span { background:url(../images/banners/banner_privacy.jpg) no-repeat; } body.forms h2.banner span { background:url(../images/banners/banner_forms.jpg) no-repeat; } body.uniforms h2.banner span { background:url(../images/banners/banner_uniforms.jpg) no-repeat; } body.directory h2.banner span { background:url(../images/banners/banner_directory.jpg) no-repeat; } #two_column #content_main { display:inline; width:604px; margin:25px 10 px 0 0; float:right; background:url(../images/bg_mid.jpg) repeat-y; } .padding { padding:10px; } #two_column #content_main h1 { margin: 25px 20px 5px 10px; } #two_column #content_sub { display:inline; width:198px; height:190px; margin-top:10px; padding:0 10px; float:left; } #two_column #content_sub_tall { display:inline; width:198px; height:500px; margin-top:10px; padding:0 10px; float:left; } #two_column #content_sub h2 { margin-top:5px; } #two_column #content_sub ul { padding:0; margin:0 0 0 5px; list-style-type:none; } #two_column #content_sub li { line-height:20px; } #two_column #content_sub li a { color:#641121; text-decoration:none; } #two_column #content_sub li a:hover { text-decoration:underline; } /* =Footer -----------------------------------------------------------------------------*/ #site_info { width:842px; margin:5px auto 0 auto; font-size: 0.92em; } #site_info, #site_info a { color: #3e3e3e;} #site_info a { text-decoration: none; } #site_info a:hover { text-decoration: underline; } /* =Tables -----------------------------------------------------------------------------*/ td { text-align: left; } td p { margin: 0px 0px 5px 0px; } /* =Misc 1 -----------------------------------------------------------------------------*/ .question { background: #FF0000; } .highlight { font-weight:bold; background:#FFFF00; } /* =Misc 2 -----------------------------------------------------------------------------*/ img.left { float:left; } img.right { float:right; } }