body { background-color:#000; color:#000; font-size:14px; line-height:18px; font-family:Arial; background-image:url(/images/bgd_new.jpg); background-repeat:no-repeat; background-position:top center; margin:0px; padding:0px; } p{ margin:0px; padding:0px; } ul{padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px; } h1,h2,h3,h4,h5,h6{ padding:0px; margin:0px; } h1{ font-size:20px; } h2{ font-size:18px; } h3{ font-size:16px; } h4{ font-size:14px; } h5{ font-size:12px; } h6{ font-size:11px; } form{ width:252px; display:inline; } #top, #top .top_bar, #header, #content{ width:100%; background-position:center; background-repeat:no-repeat; } #top{ /*height:125px;*/ } #header{ /*height:345px;*/ } #content{ min-height:800px; } #top_nav, #search_bar, #main_navigation, #flash, #footer, #content .container, #header .container{ width:955px; margin:0 auto;} /* ALL HEADER MATERIALS */ #top .top_bar{ height:34px; background:url(/images/top_nav_background.png) repeat-x; } #top_nav{} #top_nav ul#top_navigation{ height:34px; font-size:13px; font-weight:bold; list-style:none; float:right; margin:0px; padding:0px; overflow:hidden; } #top_nav ul#top_navigation li{ display:inline; } #top_nav ul#top_navigation li{ color:#B13424; display:inline; } #top_nav ul#top_navigation li a{ color:#2E3192; text-decoration:none; cursor:pointer; } #top_nav ul#top_navigation li a:hover{ color:#B13424; } #top_nav ul#top_navigation li span{ display:block; width:10px; height:34px; float:left; background-repeat:no-repeat; } #top_nav ul#top_navigation li span.lt{ background-image:url(/images/top_nav_lt.png); } #top_nav ul#top_navigation li span.mid{ width:auto; background-image:url(/images/top_nav_mid.png); background-repeat:repeat-x; padding:8px 3px 0px 3px; } #top_nav ul#top_navigation li span.mid span.phone{ width:20px; height:18px; background-image:url(/images/top_nav_phone.png); } #top_nav ul#top_navigation li span.rt{ background-image:url(/images/top_nav_rt.png); } #search_bar{ height:22px; clear:both; color:#2E3192; font-size:13px; font-weight:bold; } #search_bar span{ } #search_bar #datetime, #search_bar #weather{ margin-right:8px; margin-left:8px; } #search_bar #weather #temperature{ color:#B13424; } #search_bar #search input[type="text"]{ width:222px; border:1px solid #2E3192; background:url(/images/search_input_background.jpg) repeat-x; padding:4px; padding-bottom:3px; color:#999; } #search_bar #search input[type="text"].active{ border:1px solid #B13424; color:#2E3192; } #search_bar #search input[type="image"]{ position:relative; top:7px;} #main_navigation{ height:30px; margin-top:43px; background:url(/images/main_nav_background.jpg) repeat-x; line-height:16px; } #main_navigation a[title="home"]{ width:38px; height:34px; display:block; float:left; background:url(/images/home_icon.png) no-repeat; position:relative; top:-10px; left:12px; } #main_navigation ul{ float:left; margin-left:-20px; } #main_navigation ul li{ display:none; } /* hide all main nav links, showing only those we want */ #main_navigation ul li[name="about us"], #main_navigation ul li[name="community"], #main_navigation ul li[name="events"], #main_navigation ul li[name="photo gallery"], #main_navigation ul li[name="member directory"], #main_navigation ul li[name="join bcba"]{ display:inline; } #main_navigation ul li a{ display:block; float:left; padding-top:5px; padding-left:10px; padding-right:10px; color:#fff; text-decoration:none; } #main_navigation ul li a.first{ padding-left:0px; } #main_navigation ul li a:hover{ color:#fff200; } /* HOME PAGE FLASH AREA */ #header #flash{ height:345px; background:url(/images/flash_background.png); text-align:left; } #header #flash .container{ position:relative; left:-38px; } #header #flash #main_logo{ width:297px; height:135px; display:block; float:right; background:url(/images/main_logo.png) no-repeat; margin-top:-400px; text-indent:-9999em;/*position:relative; top:-400px; left:0px; z-index:20;*/ } #header #flash .content{ height:210px; overflow:hidden; margin-top:-270px; text-align:right; } #header #flash .content div{ width:385px; height:210px; overflow:hidden; text-align:left; float:right; margin:25px; position:relative; z-index:20; } #header #flash .content h1{ font-family:Georgia, "Times New Roman"; font-size:22px; color:#3D40A3; font-weight:normal; margin-bottom:8px; } #header #flash .content p{ margin-bottom:8px; } #header #flash .content ul{ list-style:none; padding-top:8px; } #header #flash .content ul li{ margin-bottom:8px; background:url(/images/arrow.gif) 0px 3px no-repeat; padding-left:15px; } #header #flash .content ul li a { color:#3D40A3; text-decoration:underline; } #header #flash .content ul li a:hover { color:#B13424; } /* MAIN CONTENT AREA */ #content{ margin-top:-6px;}/* countering the top padding of child #main_highlights_home; if someone could explain to me why the padding of a child element affects the margin of the parent of said child's parent element, I would appreciate the piece of mind. */ #content .container, #header .container{ width:955px; min-height:300px; background:url(/images/content_background.png); background: url(/themes/bcba/images/inside_bg.png) top left repeat-y;} /* HOME PAGE: ALL HIGHLIGHTS / GENERAL */ #main_highlights_home{ padding:6px 0 6px 0; float:left; } #main_highlights_home .highlight{ width:680px; } #main_highlights_home .highlight h2{ color:White; text-transform:uppercase; font-size:14px; font-weight:normal; padding:8px; padding-left:16px; } #main_highlights_home .highlight p{ width:400px; margin-left: 260px; margin-top:16px; padding:0px; } #main_highlights_home .highlight .topic{ height:32px; display:block; text-align:right; margin-top:16px; margin-bottom:8px; float:right; overflow:hidden; } #main_highlights_home .highlight .topic span{ height:33px; display:block; float:left; background-repeat:no-repeat; } #main_highlights_home .highlight .topic .mid{ background:url(/images/highlight_button_mid.png) repeat-x; padding:8px 2px 0 2px;} #main_highlights_home .highlight .topic .rt{ width:27px; background-image:url(/images/highlight_button_rt.png); } #main_highlights_home .highlight .topic a:hover{ color:#b13424; } /* HOME PAGE: BLUE HIGHLIGHT */ #main_highlights_home .blue{ background:url(/images/highlight_background_blue.png); } #main_highlights_home .blue h2{ background-color:#3D40A3; } #main_highlights_home .blue .img{ border:0px solid #3D40A3; border-width:0px 4px 4px 0px; } #main_highlights_home .blue .topic .lt{ width:27px; background-image:url(/images/highlight_button_lt_blue.png); } #main_highlights_home .blue .topic a{ color:#3d40a3; } /* HOME PAGE: GREEN HIGHLIGHT */ #main_highlights_home .green{ background:url(/images/highlight_background_green.png); margin:6px 0 6px 0; } #main_highlights_home .green h2{ background-color:#798b24; } #main_highlights_home .green .img{ border:0px solid #798b24; border-width:0px 4px 4px 0px; } #main_highlights_home .green .topic .lt{ width:27px; background-image:url(/images/highlight_button_lt_green.png); } #main_highlights_home .green .topic a{ color:#798b24; } /* HOME PAGE: RED HIGHLIGHT */ #main_highlights_home .red{ background:url(/images/highlight_background_red.png); } #main_highlights_home .red h2{ background-color:#b13424; } #main_highlights_home .red .img{ border:0px solid #b13424; border-width:0px 4px 4px 0px; } #main_highlights_home .red .topic .lt{ width:27px; background-image:url(/images/highlight_button_lt_red.png); } #main_highlights_home .red .topic a{ color:#b13424; } #main_highlights_home .red .topic a:hover{ color:#3d40a3; } /* HOME PAGE: SIDEBAR HIGHLIGHTS */ /* NOT TO SELF. Self? Are you there? #sidebar_highlights_home is adjusted using positioning because of the margin wierdness: adjusting #sidebar_highlights_home .promotion (margin-top -50px) adjusts the margin-top value of #content .container while the position of #sidebar_highlights_home remains unchanged. Why, oh why is this happening so?? */ #sidebar_highlights_home{ width:226px; color:#fff; margin-left:705px; position:relative; top:-50px;} #sidebar_highlights_home h3{ margin-bottom:4px; } #sidebar_highlights_home .promotion{ /* was margin-top: -50px; see #sidebar_highlights_home for temp(?) fix*/ } #sidebar_highlights_home .promotion h3{ color:#DFD97B; font-weight:normal; } #sidebar_highlights_home .promotion a{ color:#DFD97B; text-decoration:underline; } #sidebar_highlights_home .promotion a:hover{ color:#fff; } #sidebar_highlights_home .highlight h3{ color:#8BC3FB; font-weight:normal; } #sidebar_highlights_home .highlight a{ color:#8BC3FB; text-decoration:underline; } #sidebar_highlights_home .highlight a:hover{ color:#fff; } #sidebar_highlights_home a.topic{ display:block; text-align: right; margin-top:8px; } #sidebar_highlights_home .bottom{ border-bottom:1px dashed white; margin-bottom:24px; padding-bottom:24px; } #sidebar_highlights_home .top{ border-top:1px dashed white; margin-top:24px; padding-top:24px; } #sidebar_highlights_home .last{ padding-bottom:6px; } /* FOOTER AREA */ #footer{ clear:both; } #footer ul{ list-style:none; margin:0px; padding:0px; } #footer ul li{ margin-bottom:4px; } #footer, #footer a{ color:#fff; text-decoration:none; } #footer a:hover{ color:#fff200; text-decoration:underline; } #footer_contact, #footer_links, #footer_blog{ float:left; width:300px; padding-top:36px; padding-bottom:36px; } #footer_contact{ padding-top:18px; } #footer_links{ margin:0 27px 0 27px; } #footer_contact #footer_logo{ display:block; width:257px; height:117px; background:url(/images/footer_logo.png) no-repeat; text-indent:-9999em; margin-bottom:8px; } #footer_contact p { margin-left:20px; } #footer_links h4, #footer_blog h4{ width:85%; font-weight:normal; text-transform:uppercase; padding-bottom:4px; margin-bottom:8px; border-bottom:1px dashed #fff; } #footer_blog ul a, #footer_contact a{ color:#fff200; text-decoration:underline; } #footer_blog ul a:hover, #footer_contact a:hover{ text-decoration:none; } #footer_blog ul span{ display:block; margin-top:2px; } /* inside pages content area */ .inside_logo{ position:relative; top:-29px; left:658px; z-index:25; width:297px; height:135px; margin-top:-135px; display:block; background:url(/images/main_logo.png) no-repeat; margin-top:-0px; text-indent:-9999em; } #header .container{ background-image:none; position:relative; z-index:20; } #header .container #sidebar{ width:280px; } #header .container #sidebar div{} #header .container #sidebar .top_black{ width:280px; height:6px; background:url(/images/content_background.png); } #header .container #sidebar .crumb{ width:280px; height:22px; background:url(/images/flash_background.png); } #header .container #sidebar .crumb ul{ width:500px; list-style:none; position:relative; z-index:20; white-space:nowrap; margin:0px; padding:2px 0 0 16px; } #header .container #sidebar .crumb ul li{ display:inline; color:#3D40A3; font-size:11px; } #header .container #sidebar .crumb ul li a{ color:#000; text-decoration:underline; } #header .container #sidebar .crumb ul li strong{ color:#000; } #header .container #sidebar .content{ min-height:267px; background:url(/images/content_background.png); padding-top:6px; } #header .container #sidebar .content .sidebar_nav{ margin: 24px 25px 24px 25px; padding-left:0px; padding-bottom:24px; border-bottom:1px dashed white; list-style:none; } #header .container #sidebar .content .sidebar_nav li{ width:80%; margin-top:10px; } #header .container #sidebar .content .sidebar_nav li a{ display:inline-block; color:#8BC3FB; padding:2px 5px 2px 25px; background:url(/images/sidebar_nav_image.png) no-repeat; } #header .container #sidebar .content .sidebar_nav li a:hover{ color:#fff; } #header .container #sidebar .content h3{ margin-bottom:4px; } #header .container #sidebar .content .promotion, #header .container #sidebar .content .highlight{ margin-left:25px; margin-right:25px; color:#fff; } #header .container #sidebar .content .promotion h3{ color:#DFD97B; font-weight:normal; } #header .container #sidebar .content .promotion a{ color:#DFD97B; text-decoration:underline; } #header .container #sidebar .content .promotion a:hover{ color:#fff; } #header .container #sidebar .content .highlight h3{ color:#8BC3FB; font-weight:normal; } #header .container #sidebar .content .highlight a{ color:#8BC3FB; text-decoration:underline; } #header .container #sidebar .content .highlight a:hover{ color:#fff; } #header .container #sidebar .content a.topic{ display:block; text-align: right; margin-top:8px; } #header .container #sidebar .bottom{ border-bottom:1px dashed white; margin-bottom:24px; padding-bottom:24px; } #header .container #sidebar .top{ border-top:1px dashed white; margin-top:24px; padding-top:24px; } #header .container #sidebar .last{ padding-bottom:6px; } #header .container #main{ width:955px; /*background:url(/images/flash_background.png);*/ background: url(/themes/bcba/images/inside_bg.png) top left repeat-y; border:1px solid transparent; } #header .container #main .content{ width:900px; margin:90px 0 0 25px; } #header .container #main .content h1, #header .container #main .content h2{ font-family:"Georgia"; color:#3A3D9D; font-size:22px; font-weight:normal; } #header .container #main .content h2{ color:#000; font-size:18px; } #header .container #main .content p, #header .container #main .content ul{ margin-top:8px; margin-bottom:8px; padding-bottom:8px; /*list-style-image:url(/images/bullet_arrow.png);*/list-style-image:none; } #header .container #main .content ul li{ margin-bottom:4px; } #header .container #main .content a{ color:#3A3D9D; text-decoration:underline; } #header .container #main .content a:hover{ color:#b13424; } #header .container #main .content li a{ color:#8bc3fb; text-decoration:underline; } #header .container #main .content li a:hover{ color:white; } #header .container #main #page_controls{ width:100px; height:20px; float:right; margin-top:89px; margin-right:25px; overflow:hidden; } #header .container #main #page_controls a{ display:block; width:20px; height:20px; overflow:hidden; float:right; margin-left:5px; background-repeat:no-repeat; } #header .container #main #page_controls a[title="Increase Font Size"]{ background:url(/images/page_controls_swatch.gif) 0px 0px; } #header .container #main #page_controls a[title="Decrease Font Size"]{ background:url(/images/page_controls_swatch.gif) 20px 0px; } #header .container #main #page_controls a[title="Print This Page"]{ background:url(/images/page_controls_swatch.gif) 40px 0px; } #header .container #main #page_controls a[title="Email Link to This Page"]{ background:url(/images/page_controls_swatch.gif) 60px 0px; } #header .container #main #page_controls a[title="Increase Font Size"]:hover{ background-position:0px 100%; } #header .container #main #page_controls a[title="Decrease Font Size"]:hover{ background-position:20px 100%; } #header .container #main #page_controls a[title="Print This Page"]:hover{ background-position:40px 100%; } #header .container #main #page_controls a[title="Email Link to This Page"]:hover{ background-position:60px 100%; } .clear{ clear:left; }