/* Colors used in this style sheet: medium blue body #62747d medium grey-blue of wrapper #606c71 lt purple wrapper outline #afacd6 lt blue content #7c9099 medium blue for events and services blocks #a6c1cd lt grey-blue of headers #324751 almost black text #15171d */ /* GLOBAL RESET -------------------------------------------------------*/ /* Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.2.2 */ html { margin: 0; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } /*---------------------------------------------------------------------*/ /*--SITE-WIDE STYLES---------------------------------------------------*/ body {background-color: #62747d; font-family: georgia, serif; font-size: 62.5%; color: #15171d;} h1, h2, h3, h4, h5, h6 {font-weight: bold; color: #324751;} li {background: url(/images/ico_bullet.png) 0px 10px no-repeat;} a {color: white;} a:link, a:visited {text-decoration: none;} a:hover, a:active {text-decoration: underline;} #wrapper { width: 960px; margin: 0 auto; padding: 0 0 1em 0; position: relative;} /*--WRAPPER HAS THREE ROWS (HD, BD, AND FT) ---------------------------*/ #hd {height: 200px; width: 960px;margin: 0 auto;} #hd h1 {text-indent: -9999px;} #bd {background: #606c71 url(/images/bg_blue_gradient_dk.jpg) repeat-x; margin: 0px; padding-left: 180px; padding-right: 180px; overflow: hidden; position: relative;} #bd .column {position: relative; float: left;} #ft {background: #606c71 url(/images/banner_footer.jpg) center top no-repeat; clear: both; font-size: 1.6em; line-height: 1.9em; text-align: center; padding: 40px 0px 0px 0px;} /*---------------------------------------------------------------------*/ /*--BD HAS THREE COLUMNS (CONTENT, NAV1, AND NAV2) --------------------*/ /*--NAV3 is currently in the HD until I can find a way to put in BD ) -*/ #content {width: 600px; padding: 0px; background: #7c9099 url(/images/bg_blue_gradient_lt.jpg) repeat-x; font-size: 1.6em; line-height: 1.9em; text-align: left; min-height: 666px;} #content h1 {font-size: 1.4em; margin: 0.2em 0em; margin-top: -5px; text-align: center;} #content h2, #content h3, #content h4, #content h5, #content h6 {padding: 0px 20px;} #content h2 {display: block; background: #b1babd; width: 560px; font-size:1.1em; padding: .2em 20px; margin-top: 1.2em;} #content dl {margin-left: 20px;} #content dd {line-height: 1.4em; margin: 0 1.6em 0 1.6em;} #content li {margin: 0 2.7em 0 2.7em; padding: 0 20px 0 20px;} #content p {margin: 0px 20px; text-indent: 1.6em;} #content p.noindent {text-indent: -.01em;} #content p.biblequote {text-indent: -.01em; line-height: 1.4em} #content p.sig {font-style: italic; text-align: right;} #content img.pic1 {float:left; margin: 10px 10px 10px -150px;} #content img.pic2 {float:right; margin: 10px -150px 10px 0px;} #content blockquote.biblequote {margin: 1em 3em; padding: 0.8em 0; background-color: #A5B0B3; -moz-border-radius: 1.5em; -webkit-border-radius: 1,5em;} #nav1 {position: relative; width: 180px; margin: 0px 0px 0px -780px; background: url(/images/bg_left_col.jpg) right top no-repeat;} #nav2 {width: 180px; margin-right: -100%; height: 300px; background: url(/images/bg_right_col.jpg) left top no-repeat; } #nav3 {width: 600px; position: absolute; top: 160px; left: 180px;background-image: url(/images/bg_multipage-top-2.png); background-repeat: no-repeat; background-position: 0 31px;} /*---------------------------------------------------------------------*/ /*--MENU 1 ON EVERY PAGE-----*/ #menu1 {width: 120px; margin: 60px 0px 10px 50px;} #menu1 li {background-image: none; padding:0} #menu1 a {display: block; width: 120px; height: 36px; text-indent: -9999px; outline: none; background-position: bottom left; background-repeat: no-repeat;} #menu1 a.home {background-image: url(/images/ir_home.png);} #menu1 a.blog {background-image: url(/images/ir_blog.png);} #menu1 a.beliefs {background-image: url(/images/ir_beliefs.png);} #menu1 a.messages {background-image: url(/images/ir_messages.png);} #menu1 a.ministries {background-image: url(/images/ir_ministries.png);} #menu1 a.contact {background-image: url(/images/ir_contact.png);} #menu1 a.events {background-image: url(/images/ir_events.png);} #menu1 a.links {background-image: url(/images/ir_links.png);} #menu1 a.visit {background-image: url(/images/ir_visit.png);} #menu1 a:link, #menu1 a:visited {background-position: bottom center;} #menu1 a:hover, #menu1 a:active {background-position: center center;} /*--MENU 2 ON EVERY PAGE-----*/ #menu2 img {display: block; margin: 0px auto 20px;} /*--MENU 3 ON EVERY PAGE-----*/ #menu3 img {background-color:red; display: block; margin: 0px auto 20px;} #menu3 {width: 580px; height: 40px; margin-left: 20px; } #menu3 li {position: relative; background-image: url(/images/bg_tab-3s.png); width: 127px; height: 31px; margin: 0 0 0 -12px; padding:0; float: left; background-position: center bottom; z-index: 900} #menu3 li.front {background-image: url(/images/bg_tab-2s.png); z-index: 1000;} #menu3 li.long {background-image: url(/images/bg_tab-3l.png); width: 175px;} #menu3 li.long.front {background-image: url(/images/bg_tab-2l.png);} #menu3 a {display: block; height: 28px; outline: none; margin-top: 5px; margin-left: 3px; background-position: center bottom; background-repeat:no-repeat; text-indent:-9999px;} #menu3 a.youth {width: 127px; background-image: url(/images/ir_youth.png);} #menu3 a.women {width: 127px; background-image: url(/images/ir_women.png);} #menu3 a.men {width: 127px; background-image: url(/images/ir_men.png);} #menu3 a.beliefs {width: 127px; background-image: url(/images/ir_beliefs-top.png);} #menu3 a.constitution {width: 175px; background-image: url(/images/ir_constitution.png);} #menu3 a.by-laws {width: 127px; background-image: url(/images/ir_by-laws.png);} #menu3 a.leadership {width: 127px; background-image: url(/images/ir_leaders.png);} #menu3 a:link, #menu3 a:visited {background-position: bottom center;} #menu3 a:hover, #menu3 a:active {background-position: center center;} /*--MOVE THESE TO THEIR RESPECTIVE PAGES WHEN FINISHED-----*/ /*--LEADERSHIP---------------*/ #leadership #menu3 a.leadership:hover, #menu3 a.leadership:active {background-position: bottom center;} #leadership .mct_thumb {float:left; height:90px; width:90px; margin-right:10px;} #leadership ul.bio {width:275px; float:left; margin-left:10px;} #leadership ul.bio li {height: 90px; overflow:hidden; background-image:none; margin:10px -10px 10px 10px; line-height:1.2em; background-color:#B1BABD; padding:10px;} /*---------------------------*/ #content.multipage {padding-top: 40px; } /*---------------------------------------------------------------------*/ /*--PAGE-SPECIFIC OVERRIDES---------------------------------------------*/ /*--BELIEFS PAGE-------------*/ #beliefs #hd {background: url(/images/banner_beliefs.jpg) center no-repeat;} #beliefs #menu1 a.beliefs:link, #beliefs #menu1 a.beliefs:visited {background-position: top center;} #beliefs #menu1 a.beliefs:hover, #beliefs #menu1 a.beliefs:active {background-position: center center;} #beliefs #menu3 a.beliefs:hover, #menu3 a.beliefs:active {background-position: bottom center;} #beliefs #content li {margin-top: 1.2em; line-height: 1.2em; background-position: 0px 6px;} /*---------------------------*/ /*--BY-LAWS------------------*/ #by-laws #menu1 a.beliefs:link, #by-laws #menu1 a.beliefs:visited {background-position: top center;} #by-laws #menu1 a.beliefs:hover, #by-laws #menu1 a.beliefs:active {background-position: center center;} #by-laws #menu3 a.by-laws:hover, #by-laws #menu3 a.by-laws:active {background-position: bottom center;} #by-laws .up-arrow {height: 64px; width: 146px; position: fixed; right: 0 ;top: 600px; background-image: url(/images/bg_up-arrow.png);} #by-laws a.contents {position: fixed; right: 0;; height: 64px; width: 146px; background-image: url(/images/ir_page-top.png); background-position: left bottom; background-repeat: no-repeat; text-indent:-9999px;} #by-laws a.contents:link, #by-laws a.contents:visited {background-position: left bottom ;} #by-laws a.contents:hover, #by-laws a.contents:active {background-position: left top ;} #by-laws #hd {background: url(/images/banner_beliefs.jpg) center no-repeat;} #by-laws #content li {background: none; text-indent: -1.6em; margin-top: 0;} #by-laws ol {margin-right: -1.4em;} #by-laws ol.level2>li {margin-left: -0; margin-right: 0;} #by-laws #toc {line-height: 1.6em;} #by-laws #toc li {background: none; margin-top: 1.2em; text-indent: 0;} #by-laws #toc ol {margin-left: -2.7em;} #by-laws #toc ol.level2 {margin-left: 0;} #by-laws #toc ol.level2>li {margin-top: 0;} #by-laws a.bookmark {color: #324751;} #by-laws h3 {margin-top: 1em;} #by-laws h2+p {margin-top: 1em;} /*---------------------------*/ /*--BLOG (WORDPRESS)---------*/ /*---------------------------*/ /*--CONSTITUTION AND BY-LAWS-*/ /*--CONSTITUTION-------------*/ #constitution #menu1 a.beliefs:link, #constitution #menu1 a.beliefs:visited {background-position: top center;} #constitution #menu1 a.beliefs:hover, #constitution #menu1 a.beliefs:active {background-position: center center;} #constitution #menu3 a.constitution:hover, #menu3 a.constitution:active {background-position: bottom center;} #constitution .up-arrow {height: 64px; width: 146px; position: fixed; right: 0 ;top: 600px; background-image: url(/images/bg_up-arrow.png);} #constitution a.contents {position: fixed; right: 0;; height: 64px; width: 146px; background-image: url(/images/ir_page-top.png); background-position: left bottom; background-repeat: no-repeat; text-indent:-9999px;} #constitution a.contents:link, #constitution a.contents:visited {background-position: left bottom ;} #constitution a.contents:hover, #constitution a.contents:active {background-position: left top ;}/*---------------------------*/ #constitution #hd {background: url(/images/banner_beliefs.jpg) center no-repeat;} #constitution #content li {background: none; text-indent: -1.6em; margin-top: 0;} #constitution #content ul>li {margin:1.2em 2.7em 0 2.7em; padding:0 20px; text-indent: 0; line-height: 1.2em; background:transparent url(/images/ico_bullet.png) no-repeat scroll 0 6px;} #constitution ol {margin-right: -1.4em;} #constitution ol.level2>li {margin-left: -0; margin-right: 0;} #constitution #toc {line-height: 1.6em;} #constitution #toc li {background: none; margin-top: 1.2em; text-indent: 0;} #constitution #toc ol {margin-left: -2.7em;} #constitution #toc ol>li {margin-top: 0;} #constitution #toc ol.level2 {margin-left: 0;} #constitution #toc ol.level2>li {margin-top: 0;} #constitution a.bookmark {color: #324751;} #constitution h3 {margin-top: 1em;} #constitution h2+p {margin-top: 1em;} /*---------------------------*/ /*--CONTACT PAGE-------------*/ #contact #hd {background: url(/images/banner_contact.jpg) center no-repeat;} #contact #menu1 a.contact:link, #contact #menu1 a.contact:visited {background-position: top center;} #contact #menu1 a.contact:hover, #contact #menu1 a.contact:active {background-position: center center;} /*---------------------------*/ /*--EVENTS (WORDPRESS)-------*/ /*---------------------------*/ /*--HOME PAGE----------------*/ #home .post-it1-l {float: left; margin: 8px 10px -20px 12px;} #home .post-it1-r {float: right; margin: 0px -20px -20px 0px; position: relative; z-index: 1000;} #home .news {float: right; width: 470px; padding-top: 20px; padding-bottom: 20px; border: #ecc95c solid 2px; margin: 5px -170px 0px 10px; position: relative; z-index: 1000; background-image: url(/images/bg_purple_stained_glass.png); -moz-border-radius: 1.4em; -webkit-border-radius: 1.4em;} #home .news a {color: #E0E0E0;} #home .news a:hover, #events_blurb a:active {color: #EEEECC; text-decoration: none;} #home .news a.more {display: block; width: 100px; height: 36px; text-indent: -9999px; background: url(/images/ir_events_more.png) bottom center no-repeat; margin: 0px 0px 0px 350px;} #home .news a.more:link, #events a.more:visited {background-position: bottom center;} #home .news a.more:hover, #events a.more:active {background-position: top center;} #home .news h2 {background: none; margin: -5px 0; padding: 0 0 0 20px; float: left; display: inline; width: auto; color: #15171d} #home .news img {float: right; margin: 0px 10px 10px 10px;} #home .post-it2 {float: left; margin: 15px 10px -25px -160px; z-index: 2000; position: relative;} #home div.closed {float: left; margin: 0px 10px -10px 12px; background-image: url(/images/pic_pink_post-it.png); width: 230px; height: 178px;} #home p.closed {text-indent: 0; margin: 23px 20px 10px 20px; text-align: center; font-family: helvetica, geneva, arial, sans-serif; font-size: 1.4em; color: #333;} #home .news p {font-size: 1em; line-height: 1.4em;} #home #hd {background: url(/images/banner_home.jpg) center no-repeat;} #home #nav1 {background: url(/images/bg_left_col_home.jpg) no-repeat;} #home #menu1 a.home:link, #home #menu1 a.home:visited {background-position: top center;} #home #menu1 a.home:hover, #home #menu1 a.home:active {background-position: center center;} #home #content .pic1 {position: relative; top: 0px; left: -225px; z-index: 250; float: none; margin: 0 0 -20px 0;} #home #content h1.top {background: url(/images/bg_h1_home_top.jpg) 0px 5px no-repeat;} #events_blurb {color: #a6c1cd; float: right; background: url(/images/bg_blue_stained_glass.png); border: #ecc95c solid 2px; margin: 10px -170px 0px 10px; padding: 5px 10px 10px 0px; width: 220px; font-size: .85em; -moz-border-radius: 2em; -webkit-border-radius: 2em; position: relative; z-index: 300; clear: both} #events_blurb h2 {background: url(/images/ir_events_blurb.png) bottom center no-repeat; width: 190px; height: 36px; margin: 0px auto; text-indent: -9999px} #events_blurb a {color: #EFD16E;} #events_blurb a:hover, #events_blurb a:active {color: #EEEECC; text-decoration: none;} #events_blurb a.more {display: block; width: 100px; height: 36px; text-indent: -9999px; background: url(/images/ir_events_more.png) bottom center no-repeat; margin: 0px 0px 0px 110px;} #events_blurb a.more:link, #events a.more:visited {background-position: bottom center;} #events_blurb a.more:hover, #events a.more:active {background-position: top center;} #events_blurb dt {font-weight: bold;} #events_blurb dd {margin: -.5em 0em .3em 1.2em;} #home .spacer {min-height: 260px;} #home #ft .pic1 {position: absolute; bottom: 40px; left: -45px;} /*---------------------------*/ /*--LINKS PAGE---------------*/ #links #hd {background: url(/images/banner_links.jpg) center no-repeat;} #links #menu1 a.links:link, #links #menu1 a.links:visited {background-position: top center;} #links #menu1 a.links:hover, #links #menu1 a.links:active {background-position: center center;} #links img.linklogo {float:left; clear:left; margin: 0px 5px -10px -10px; color:yellow} #links p {margin: 0px 0px 1em 0px; text-indent: 0;} #links a {font-style: italic} #links li {background-image: none; padding: 0} /*---------------------------*/ /*--MESSAGES (WORDPRESS)-----*/ /*---------------------------*/ /*--MINISTRIES PAGE----------*/ #ministries #hd {background: url(/images/banner_ministries.jpg) center no-repeat;} #ministries #menu1 a.ministries:link, #ministries #menu1 a.ministries:visited {background-position: top center;} #ministries #menu1 a.ministries:hover, #ministries #menu1 a.ministries:active {background-position: center center;} /*---------------------------*/ /*--MISSING (404) PAGE-------*/ #missing #hd {background: url(/images/banner_404.jpg) center no-repeat;} #missing img.pic1 {position: relative; float: none; margin-left: -25px; height: 700px; width:650px;} #missing #notfound p {line-height: 1.9em;} #missing #notfound label.hidden {display:none;} #missing #notfound input.searchsubmit {margin-bottom:1.2em;} #missing #notfound input.searchtext {width: 200px; margin-left:8em; margin-bottom:1.5em; height:1.5em;} #missing #notfound #form>p {text-align:left; line-height:1em; margin-left:4em; margin-bottom:.4em;} #missing #notfound #form {margin: 1em 3em 1em 3em; padding: 0.8em 0 0em 0; background-color: #A5B0B3; -moz-border-radius: 1.5em; -webkit-border-radius: 1.5em;} /*---------------------------*/ /*--MEMBERSHIP PAGES---------*/ #phones #hd {background: url(/images/banner_members.jpg) center no-repeat;} /*---------------------------*/ /*--MEN----------------------*/ #men #hd {background: url(/images/banner_men.jpg) center no-repeat;} #men #menu1 a.ministries:link, #men #menu1 a.ministries:visited {background-position: top center;} #men #menu1 a.ministries:hover, #men #menu1 a.ministries:active {background-position: center center;} #men #menu3 a.men:hover, #menu3 a.men:active {background-position: bottom center;} #men .img1 {float:right; margin-right:-120px; z-index:1000; position:relative; padding-left:10px;} #men .img2 {float:left; margin-left:-40px; padding-right:10px; padding-top:15px; } /*---------------------------*/ /*--SALVATION PAGE-----------*/ #salvation #hd {background: url(/images/banner_salvation.jpg) center no-repeat;} #salvation #content li {line-height: 1.2em; margin-bottom: 1.2em; background-position: 0 5px;} /* #salvation .step {clear: left; margin: 15px 0px;} #salvation span.drop-a, #salvation span.drop-b, #salvation span.drop-c {margin: 0px 5px 0px 0px; float: left; background: white center center no-repeat; height:32px; width: 32px; text-indent: -9999px;} #salvation #content li {background: none; margin: 0; margin-top: 1.2em; padding: 0; line-height: 1.2em;} */ /*---------------------------*/ /*--SPECIALEVENTS PAGE-------*/ #specialevents #hd {background: url(/images/banner_specialevents.jpg) center no-repeat;} /*---------------------------*/ /*--VISIT PAGE---------------*/ #visit #hd {background: url(/images/banner_visit.jpg) center no-repeat;} #visit #menu1 a.visit:link, #visit #menu1 a.visit:visited {background-position: top center;} #visit #menu1 a.visit:hover, #visit #menu1 a.visit:active {background-position: center center;} #visit #content .pic2 {margin: -400px -60px 10px 0px; position: relative; z-index:100;} #visit #content .map {position: relative; left: -30px;} #visit #service_times {position: absolute; width: 250px; top: 290px; left: 510px; color: #a6c1cd; background: url(/images/bg_blue_stained_glass.png); margin: 10px; padding: 5px 0px 20px 0px; font-size: .85em; z-index: 200; -moz-border-radius: 2em; -webkit-border-radius: 2em;} #visit #service_times h2 {background: url(/images/ir_weekly-services.png) bottom center no-repeat; width:210px ; height: 36px; margin: 0px auto; text-indent: -9999px} #visit #service_times dl {padding-left: 10px;} #visit #service_times dt {font-weight: bold;} #visit #service_times dd {margin: -.5em 0em .3em 1.2em;} /*---------------------------*/ /*--WOMEN--------------------*/ #women #hd {background: url(/images/banner_women.jpg) center no-repeat;} #women #nav1 {background: url(/images/bg_left_col_women.jpg) no-repeat;} #women #nav2 {height: 399px; background: url(/images/bg_right_col_women.jpg) left top no-repeat; } #women #menu1 a.ministries:link, #women #menu1 a.ministries:visited {background-position: top center;} #women #menu1 a.ministries:hover, #women #menu1 a.ministries:active {background-position: center center;} #women #menu3 a.women:hover, #menu3 a.women:active {background-position: bottom center;} #women .img1 {float:right; margin-right:-40px; padding-left:10px; padding-top:10px;z-index:1000; position:relative; } #women .img2 {float:left; margin-left:-140px; padding-top: 10px; padding-right:10px;} /*---------------------------*/ /*--YOUTH--------------------*/ #youth #hd {background: url(/images/banner_youth.jpg) center no-repeat;} #youth #menu1 a.ministries:link, #youth #menu1 a.ministries:visited {background-position: top center;} #youth #menu1 a.ministries:hover, #youth #menu1 a.ministries:active {background-position: center center;} #youth #menu3 a.youth:hover, #menu3 a.youth:active {background-position: bottom center;} #youth .img1 {float:right; margin-right:-90px; z-index:1000; position:relative; padding-left:10px;} #youth .img2 {float:left; margin-left:-140px; padding-right:10px;} /*---------------------------*/ /*---------------------------------------------------------------------*/ /* todo: Add some info to the messages home to explain what that section is about. todo: add full url to message downloads so they will work in a feed. (do it through SQL) todo: hide the images folder and check that all images alt-tags show up and that placeholders are sized correctly. todo: review security options from smashing magazine. todo: make menu items into one sprite todo: make tabs into sprite todo: make left and right columns into one sprite. todo: make top and bottom of contents into a sprite. todo: fill in date when constitution was put in place. todo: resave youth, women, men png images from cs4 (for better color management) then smush them. todo: optimize gallery images. todo: remove unneeded styles. todo: combine style sheets? todo: minify css todo: remove unneeded functions from highslide.js todo: minify js todo: style events differently for JEWELS (maybe others). todo: ourhanover.org, hanovercares.org todo: add the height wrapper (bd-wrapper - don't remember its purpose) from events index, archive, single, and footer to the other blogs and their style sheets, maybe even main pages? it is on the index page, the search.php, and the footer. todo: format event dates as "today" "tomorrow" "next sunday" etc. todo: when a single event or search form is shown, the categories are cut off the bottom. todo: future events down's have links in the calendar widget todo: put a gold outline on the central cross on the salvation graphic, also get rid of stray white on right crossbar. todo: add Oak Grove to visit page map and distance bullets. todo: make drop caps for salvation page. todo: add leadership page to contact page. todo: add missions page(s). todo: work Lindsey's page into the new design. todo: fix fixed-postition up arrow on Safari. */