/* ------------------------------------------------------------------ WEBSITE TEMPLATE STYLE SHEET FOR ANNUNCIATION CHURCH, KANSAS CITY --------------------------------------------------------------------- */ /* ------------------------------------------------------------------ GLOBAL STYLES - UNIVERSAL SELECTORS & FIXES --------------------------------------------------------------------- */ /* Sets browser padding and margin defaults to zero */ * { margin: 0; padding: 0; } /* IE 6 & 7 spacing hack */ * html img { display: block; } /* This keeps images wrapped in an anchor tag from displaying a border. Maybe. */ a img { border: none; display: inline; margin: 0; padding: 0; } /* Things I want to appear with styles off, but disappear when styles are on, are often wrapped in a div or span with this "hidden" class to hide them. */ .hidden { display: none; } /* this is a fix for IE/Mac, to keep the nav items from breaking. I think */ #header li { /*\*/overflow: hidden;/**/ } /*-------------------------------------------------------------------- GLOBAL STYLES - STRUCTURAL RULES ---------------------------------------------------------------------- */ body { font-family: arial; font-size: 80%; line-height: normal; text-align: center; margin: 0; padding: 0; color: #292928; background-color: #8b927e; } /*------------------------------------------*/ #container { width: 960px; margin: 0 auto; padding: padding: 0 0 10px 0; text-align: left; } #page_body { width: 960px !important; width: 960px; position: relative; top: 0px; float: left; margin: 0 0 0px 0; padding: 0px 0 0px 0; position:relative; z-index: 0; background-image: url(/assets/images/ui/body_bg.jpg); background-position: top left; background-repeat: repeat-y; } /*-------------------------------------------------------------------- Page Header ---------------------------------------------------------------------- */ #header { position: relative; top: 0; width: 100%; height: 218px; padding: 0; margin: 0; background-color: #500001; background-image: url(/assets/images/ui/header_bg.gif); background-position: top left; background-repeat: repeat-y; } #header_img { float: left; border: none; } /*-------------------------------------------- Breadcrumbs ---------------------------------------------*/ #breadcrumbs { z-index: 100; position: absolute; top: 35px; left: 165px; padding: 0; margin: 0; text-align: right; background-color: transparent; width: 790px; } .B_crumbBox { margin: 0 2em 0 0; font-family: Verdana; font-size: 75%; color: #999; } .B_homeCrumb { color: #999; margin: 0 3px; font-weight: normal; font-style: normal; } .B_crumb { color: #999; } .B_lastCrumb { color: #9c3922; font-weight: bold; } /* ------------------------------------------------------------------- HOMEPAGE COLUMNS ---------------------------------------------------------------------- */ /* --- COLUMN ONE --- */ #column_one_home { width: 163px; w\idth: 143px; /* IE hack */ position: relative; float: left; padding: 10px; height: 450px; display: block; overflow: hidden; background-color: #9c3922; } #column_one_home ul { list-style: none; } /* --- COLUMN TWO --- */ #column_two_home_wide { width: 815px; w\idth: 795px; /* IE hack */ padding: 0px; position: relative; top: 0; float: left; overflow: hidden; display: block; } #column_two_home ul { margin-left: 40px; margin-top: 10px; margin-bottom: 20px; } /* ------------------------------------------------------------------- HOMEPAGE CONTENT ---------------------------------------------------------------------- */ /* Homepage Image Slideshow */ #flash_movie { width: 370px; height: 245px; margin: 0; background-color: #650800; } /* Homepage Welcome Spot feature */ #welcome_info { /* make this appear to the right of the slideshow */ position:absolute; top:0; right:0; width: 425px; height: 245px; } #church_motto p { background-color: #650800; color: white; font-size: 16px; padding-top: 5px; padding-bottom: 3px; font-family: Georgia, serif; text-align: center; } #news_headlines { float: left; width: 500px; w\idth: 480px; /* IE hack */ height: 200px; background-color: #a99a6f; padding: 10px; margin: 0; } #news_headlines h2 { text-align: center; color: #000000; font-size: 18px; } .more a { color: #333; } #parish_events { float: left; width: 294px; w\idth: 274px; /* IE hack */ height: 200px; background-color: #f2eee5; padding: 10px; margin: 0; } #parish_events h2 { text-align: center; color: #000000; font-size: 18px; } #parish_events a { color: #333; } #parish_events a:hover { color: #cb6f14; } #quicklinks { float: left; width: 100%; height: 150px; background-color: #ece1c0; padding: 0; margin: 0; } #quicklinks h2 { text-align: center; margin: 0 0 15px 0; } .ql_column { width: 28%; float: left; border-right: 1px dotted #b4b4b4; padding: 0 15px; } .ql_column ul { list-style: none; } .ql_column ul li { padding: 4px 0; } .ql_column ul li img { margin: 0 4px 0 0; } .ql_column_last { width: 28%; float: left; border: none; padding: 0 15px; } .ql_column_last ul { list-style: none; } .ql_column_last ul li { padding: 4px 0; } .ql_column_last ul li img { margin: 0 4px 0 0; } #quicklinks a { color: #333; } /* ------------------------------------------------------------------- CONTENT PAGE COLUMNS -------------------------------------------------------------------- */ /* --- COLUMN ONE --- */ #column_one { width: 164px; w\idth: 144px; /* IE hack */ position: relative; float: left; padding: 10px; height: 500px; display: block; overflow: hidden; background-color: #9c3922; } #column_one ul { list-style: none; } /* --- COLUMN TWO --- */ #column_two { width: 632px; w\idth: 612px; /* IE hack */ padding: 10px 20px; position: relative; top: 75px; margin-bottom: 75px; float: left; overflow: visible; display: block; border-right: 1px dotted #999999; } #column_two ul { margin-left: 40px; margin-top: 10px; margin-bottom: 20px; } #column_two ul li { margin: 5px 0; } #column_two ol { margin-left: 40px; margin-top: 10px; margin-bottom: 20px; } #column_two ol li { margin: 5px 0; } /* --- COLUMN TWO WIDE --- */ #column_two_wide { width: 776px; w\idth: 756px; /* IE hack */ padding: 20px 20px; position: relative; top: 55px; margin-bottom: 55px; float: left; overflow: visible; display: block; } #column_two_wide ul { margin-left: 40px; margin-top: 10px; margin-bottom: 20px; } #column_two_wide ul li { margin: 5px 0; } #column_two_wide ol { margin-left: 40px; margin-top: 10px; margin-bottom: 20px; } #column_two_wide ol li { margin: 5px 0; } /* --- COLUMN THREE --- */ #column_three { width: 143px; w\idth: 123px; /* IE hack */ position: relative; top: 75px; margin-bottom: 75px; padding: 0 10px 0 10px; float: left; overflow: visible; display: block; font-size: 80%; font-family: verdana; } #column_three ul { list-style: none; } #column_three ul li { border-bottom: 1px dotted #ddd; } #column_three ul li a { border-bottom: none; } #annunciation_addthis { float: right; } #annunciation_addthis a { border-bottom: 0px none; } /*-------------------------------------------------------------------- Page Footer ---------------------------------------------------------------------- */ #footer { position: relative; top: 0px; margin: 0px 0 0 0; padding: 0; width: 100%; !important; float: left; background-color: #b4b4b4; height: 50px; border-top: 3px solid #aaa; } #footer p { text-align: center; font-size: 9px; font-family: Verdana; margin: 0px 0 10px 0; padding: 0; line-height: normal; color: #292928; } /*-------------------------------------------------------------------- Navigation Styles: Left-Side Navigation ---------------------------------------------------------------------- */ #sideNav { margin: 0; position: absolute; top: 30px; left: 18px; width: 80%; line-height: normal; } #sideNav .ditto_summaryPost { margin: 0; padding: 5px 0; border-bottom: 1px dotted #ddd; } #sideNav .ditto_summaryPost p { margin: 0; padding: 0; line-height: normal; text-align: center; } #sideNav .ditto_summaryPost a { text-decoration: none; color: #fff; font-size: 95%; border: none; } #sideNav .ditto_summaryPost a:hover { text-decoration: underline; } #sideNav .ditto_summaryPost img { display: none; border: transparent; margin: 0; padding: 0; } #sideNav .ditto_summaryText { padding: 0; margin: 0; } #sideNav h2 { border: none; margin: 0 5px 10px 5px; font-style: normal; } #sideNav h2 a { color: #900028; } #sideNav h2 a:hover { background-color: transparent; } /* #sideNav ul li { line-height: normal; margin: 0 0 0.4em 0; padding: 6px 0; border-bottom: 1px dotted #fff; } #sideNav ul li.last { } #sideNav ul li a { color: white; padding: 0; border: none; text-decoration: none; } #sideNav ul li a:hover { background-color: transparent; border-bottom: 1px dotted; } #sideNav ul li ul li { padding: 0; margin: 0; border-bottom: none; } */ /*-------------------------------------------------------------------- Navigation Styles: Top Navigation ---------------------------------------------------------------------- */ #navigation { /* main menu navigation component container */ position: relative; top: 0; z-index: 1000; /* make sure main menu displays in front of everything else */ left: 163px; padding: 0px; margin: 0px; height:28px; width:797px; background-color: #650800; font-size: 12px; } #navigation ul { /* main menu component */ position: relative; margin: 0; padding: 2px 0 0 0; list-style: none; width: 100%; } #navigation li { /* main menu items */ float: left; border-right: 1px solid #fff; padding: 0; list-style: none; text-align: center; margin: 0px; } #navigation li.last { /* turn off right line on last main menu item */ border-right: none; } #navigation a { /* Links on main menu */ font-family: Arial; text-transform: capitalize; font-size: 105%; font-weight: normal; display: list-item; text-decoration: none; color: white; margin: 0px; border-bottom: none; padding: 2px 0.99em; /* this setting is read by firefox and ie browsers*/ #padding: 2px 1.06em; /* ie hack - this setting is read by all ie browsers */ _padding: 2px 1.06em; * ie hack - this setting is read only by ie6 and older */ } #navigation ul li a { /* main menu item links */ display: block; text-decoration: none; min-height: 22px; } #navigation ul li ul { /* hide drop-down menu items by default (before hover) */ display: none; margin: 0; width: 200px; position: absolute; /* z-index: 600; opacity: 0.90; filter: alpha(opacity=90); */ /* IE patch */ } #navigation ul li ul li a { /* drop down menu item links */ display: block; width:200px; min-height: 18px; color: #500001; } #navigation ul li ul li { /* drop down menu items */ display: block; border-left: 1px solid #b4b4b4; border-right: 1px solid #b4b4b4; border-top: 1px solid #b4b4b4; background-color: #f5efd8; padding: 0px; text-align: left; z-index:600; margin:0; } #navigation ul li ul li.last { /* last item in drop down menu list */ display: block; border-right: 1px solid #b4b4b4; border-bottom: 1px solid #b4b4b4; } #navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul { /* hover over main menu item to show drop-down menu items */ display: block; } #navigation a:hover { /* hover over menu item or list item link to change background */ color:#ffffff; background-color:#990000; } #navigation a:active { text-decoration: none; } /* ---------------------------------------------------------------- Formatting for a STANDARD TABLE to be displayed on a content page ------------------------------------------------------------------- */ table { margin: 10px 0; border-top: 1px solid #b4b4b4; } table tr { } table tr td { padding: 6px 10px; vertical-align: top; border-bottom: 1px solid #b4b4b4; } table tr td ul { margin-left: 30px; } /* ---------------------------------------------------------------- Formatting for the GOOGLE Map ------------------------------------------------------------------- */ iframe { border: 3px solid #333333; float: left; margin: 20px; width: 680px; } /* ----------------------------------------------------------------- GLOBAL STYLES - COLUMN DIVISION ------------------------------------------------------------------*/ .column_one_divider { background-color: #DEDCE0; height: 1px; width: 435px !important; width: 420px; margin: 0 0 15px 0; clear: both; padding: 0; } .column_one_divider img { height: 1px; width: 435px !important; width: 420px; margin: 0; padding: 0; } .column_two_divider { background-color: #DEDCE0; height: 1px; width: 330px !important; margin: 0 -15px 15px !important; width: 300px; margin: 0 0 15px; clear: both; } .column_two_divider img { height: 1px; width: 330px !important; width: 300px; } .column_three_divider { background-color: #DEDCE0; height: 1px; width: 181px !important; margin: 0 -15px 15px !important; width: 151px; margin: 0 0 15px; clear: both; } .column_three_divider img { height: 1px; width: 181px !important; width: 151px; } /* ----------------------------------------------------------------- MAXIGALLERY STYLES-SITE PHOTO GALLERY ------------------------------------------------------------------*/ .imageview { width: 500px; height: auto; } .thumbs { text-align: left; font-family: Verdana; line-height: normal; font-size: 9px; } .thumbs li { padding: 10px; } .picture { text-align: left: left; clear: both; } /* ------------------------------------------------------------------- ONLINE CHAPEL -- APPEARS IN THE RIGHT COL. ON THE HOMEPAGE ---------------------------------------------------------------------- */ .Chapel { font: 11px/16px Arial; color: #5C523B; padding: 0.8em 1em; margin: 0; } .Chapel a { color: #5C523B; text-decoration: none; font-weight: bold; } .Chapel a:hover { color: white; text-decoration: none; background-color: #5c523b; font-weight: bold; } .Chapel ul { list-style: none; padding: 0; margin: 0; } .Chapel ul li { padding: 0 0 0.4em 0; margin: 0.4em 0; border-bottom: 1px dotted #b4b4b4; } /* ------------------------------------------------------------------- DITTO STYLES ---------------------------------------------------------------------- */ .ditto_summaryPost { margin: 10px 0; border-bottom: 1px dotted #ddd; } .ditto_summaryPost a { text-decoration: none; color: #333; } .ditto_summaryPost a:hover { color: #500001; } .ditto_summaryPost img { display: none; border: transparent; margin: 0; padding: 0; } .ditto_summaryText { padding: 0; margin: 0; } .summary { font-size: 14px; } .more { text-align: right; } .more a { text-decoration: none; border-bottom: 1px dotted; } .date { font-size: 9px; font-family: verdana; color: #333; }