/* --------------------------------------------------------------------------------------------------------- Denmark Web site PART 1 : Overall standard layout components 1.1 Main layout components 1.2 Navigation Components 1.3 Footer PART 2: Common content formatting 2.1 Text 2.2 Links & special button links 2.3 Content 2.4 Specials PART 3 : Specific pages with specific layout and formatting needs 3.1 Plone Template related 3.2 Home page 3.3 Experience meditation 3.4 Thought for today 3.5 Calendar 3.6 Mailinglist 3.7 Sitemap 3.8 Locations near you page styles 3.9 Feedback page 3.10 FAQ 3.11 Events 3.12 Inner Space --------------------------------------------------------------------------------------------------------- */ /* ------------------- Comment on how to use: ---------------------- - the code marked with "permanent - do not touch unless really necessary or wanted" is the essential code to make the layout stand and contains most of the positioning CSS - little changes here would very likely break parts if not the full layout; if needed some of these settings can be adapted by using overruling statements in the 'customizable sections'. - the code in the customized sections is adaptable as the name says - it allows to modify the 'skin' of the layout and even if this code would be totally omitted the foundation of the layout should still stand. - to allow maximum flexibility as much formatting and 'skin' related code has been added to the 'adaptable' areas - for font colouring, background colours etc. this is quite easy, however for spacing with margins and paddings some initial choices might have been made in the permanent areas as these seemed the best starting point for most of the layouts which are going to be made available - if needed they can be overruled but be especially carefull with containers set to 100%, as adding borders or padding to these areas tend to easily break the layout in IE6; to avoid a maximum of hacks for this browser a point of awareness is to set margin/padding/border on the containing divs in stead of doing so directly on the container set to 100%. - each page will receive a default id for the body tag, something like , with a matching name for the choosen template in Plone for this specific page ; this happens automatically and will trigger off the provided CSS for the page. If needed one can however provide another ID for a specific page - this can be done through the Plone management pages - such an approach may be the only solution to some complexer design issues, where pages and containers need to be addressed very specifically. - the code has been divided into 3 logical parts for layout, common content and specific pages; this means that some css selectors will be repeated in two or even all 3 parts or in several subsections... and at the same time some selectors will be repeated in both the permanent and customized areas of each section.... however in this way it should be easier to find one's way throughout the code and allow a methodological approach - special attention is needed towards the order of the declarations ; this is often a good starting point when debugging - the firebug addon for FF is definitely a good help too if no other CSS editor is available - bottlenecks, traps and dangerous point have explaining comments - the pure "hacks" to make the code work in IE7,IE6 (and IE5, but partially as this browser can be considered dead) have been added to special stylesheets IE6.css, IE7.css which are detected by conditional comments in the xhtml - if there's a need for extra hacks in a layout, then be sure to checkout these stylesheets too and add or overrule declaration there as well. - the print.css takes a minimum of CSS on board and sets header and all navigation areas to "unvisible" when printing - also all main borders & background have been removed - please adapt asper your liking and also consider editing the print.css when adding new pages / templates. */ /* --------------------------------------------------------------------------------------------------------- PART 1 : Overall standard layout components --------------------------------------------------------------------------------------------------------- */ /* ----------------------- 1.1 Main layout components --------------------------*/ /* permanent - do not touch unless really necessary or wanted */ body {min-width:780px; margin:0; padding:0; text-align:center;}/* centered design, considering IE 5 and IE6 quirck mode*/ #container {max-width:955px; margin:0 auto; padding:10px 0; text-align:left;} #header {margin:0 10px; padding:0; height:110px; background:url(images/header.jpg) left top no-repeat;} #printLogo {display:none; visibility:hidden;} #navigation {margin:1px 10px 0 10px; padding:0;} #toolboxWrapper { margin:1px 0 0 0; } #toolbox {padding:5px 0 5px 10px; margin:0; line-height:22px; height:22px;} #mainMenu {list-style:none; text-align:center; clear:both; margin:0; padding:0; position:relative; z-index:10; width:auto;}/*IE7 needs auto width*/ #trail {margin:0;} #mainBody {clear:both; float:left; margin:0 0 10px 0; width:100%;} #secondaryNavigation {float:left; width:220px; clear:both;} #subMenu { padding:0; margin:0 0 4px 0; width:auto; background: #fff; } #contentContainer { margin:0 10px 0 240px; min-height:525px; z-index:1; position:relative; padding:10px 0 0 0; } /* no margin bottom for IE7*/ #contentContainerExtra {margin:0; float:right; width:98%; position:relative;} /* width here sometimes needs auto, sometimes auto, depending on designs(liquid layout) *//*in this layout width: 98% seems best*/ #content { margin:0 auto; padding:5px 10px 0 0; z-index:1; clear:both; position:relative; } #footer {clear:both; padding:0; margin:10px 10px 0 10px; line-height:25px; height:25px;} .clearer {height:1%; clear:both; background-color:transparent; overflow:hidden;} span.clearer {display:block; height:1px; margin-bottom:-1px;} /* used to force certain non floated containers to contain their floated children properly */ /* Customized settings - layout */ body { background-color: #F0C696; background-image: url(images/bg.gif); } #container {background-color: #fff;} #header { background-color: #d0c29b; } /* needs to be same as logo background */ #navigation {background-color:#fff;} #toolboxWrapper { background:#d0c29b; } #toolbox {color:#e2e2e2;} #mainMenu {line-height:45px; height:45px; background-image: url(images/topnavbg.jpg); background-repeat: repeat-x; background-position: center top;} #secondaryNavigation {margin:0 0 0 10px; padding: 0; /*height:517px;*/} #footer { font-size:0.7em; background:#d1c29c; color:#6f6752; } /* ---------------------- 1.2 Navigation Components ----------------------- */ /*toolbox - permanent - do not touch unless really necessary or wanted */ #accessJumps {position:absolute; left:-9000px; font-size:0.7em;} #searchForm {display: block; float:left; margin: 0px 10px} /*navigation*/ #navigation input { height:15px; position:relative; float:left; line-height: 15px; } #navigation select { float:left; width:14em; height: 20px; } #navigation label {display:block; float:left; padding:1px 10px 0 0; line-height:16px;} input#searchText {width:14em;} #navigation #searchButton { position:relative; top:0px; height:19px; } #navigation #textSize {display:block; margin:1px 0 0 10px; width:13em; float:right; line-height:18px; padding:0; white-space: nowrap; } /* Customized settings - toolbox */ #searchForm { font-family:Verdana, Arial, Helvetica, Geneva, sans-serif; color:#6f6752; font-size:0.7em; padding-top:1px; } /*navigation*/ #navigation input { border:1px solid; background-color:#fff; font-size:1em; color: #817f80; } #navigation select { background-color:#fff; margin-top:-1px; color: #817f80; font-size: 1em; } #navigation label { color:#6f6752; font-weight:normal; } #navigation #searchButton { background-color:#D2D2D2; color:#817f80; font-weight:bold; margin-right:25px; } #navigation #textSize { font-weight:normal; color:#6f6752; font-size:0.7em; padding-top:0px; } #navigation #textSize a {text-decoration:none; color:#fff; padding-right:3px;} #navigation #textSize a:hover { color:#9E8DBA; } #navigation #textSize .largeTextSize {font-size:1.5em;} #navigation #textSize .mediumTextSize {font-size:1.25em;} #navigation #textSize .smallTextSize {font-size:1em; padding-left:7px;} /* main menu - permanent - do not touch unless really necessary or wanted */ #mainMenu li {margin:0; padding:0; float:left; display:block; text-align:center; position:relative;} #mainMenu #home {margin:0; width:14%;} #mainMenu #menu0 {margin:0; width:20%;} #mainMenu #menu1 {margin:0; width:21%;} #mainMenu #menu2 {margin:0; width:22%;} #mainMenu #menu3 {margin:0; width:22.7%;} #mainMenu ul {padding:0; margin:0; list-style:none; z-index:10; position:absolute; text-align:center; display:none; left:0; right:0; overflow:visible; width:auto; -moz-opacity:0.9; opacity: 0.9;}/* IE 7 collapsing menu items... width solves this - filter:alpha(opacity=90) does not validate and moved to IE7.css - overflow is for IE7 too */ #mainMenu ul li{min-height:1%; padding:0; margin:0; float:none; width:auto;} #mainMenu a {display:block; margin:0; padding:0; white-space:nowrap; height:1%;} /* height gives IE HasLayout - all links are blocks - reset margin/padding */ #mainMenu li a {line-height:25px; overflow:visible; white-space:nowrap;} #mainMenu li:hover ul {display:block;} /*IE doesn't get hover on li: need for javascript menu */ /* Customized settings - main menu */ /*main menu*/ #mainMenu #home, #mainMenu #menu0, #mainMenu #menu1, #mainMenu #menu2, #mainMenu #menu3 {margin:7px 0 0 0;} #mainMenu ul li {line-height:22px; border:1px solid #ACBA8D; border-bottom:none; margin: -1px 0 0 0; } /*IE needs line-height here too*/ #mainMenu a { text-decoration:none; font-weight:bold; color:#63839c; font-size: 1em; border-right:2px #63839c dotted; font-family: Georgia, "Times New Roman", Times, serif; padding: 0 0 3px 0; } /* links main menu items */ #mainMenu ul li a { font-size:0.7em; font-weight:bold; color:#63839c; background-color:#E2DAC5; background-image:none; line-height:22px; text-transform: none; font-family: Verdana, Arial, Helvetica, sans-serif; border:none; } /* links main submenu items */ #mainMenu ul li.last {margin:0; padding:0; border-bottom:1px solid #99AC75;} /*#mainMenu ul li:last-child {border-width:1px 1px 1px 1px; padding:0; margin:0;} alternative expression not understood by IE*/ #mainMenu li a:hover, #mainMenu li:hover { background-color:#FCDA81; color:#fff !important; } #mainMenu li a:active, #mainMenu li:active {background-color:transparent;} #mainMenu li ul li a:hover {background-color:#FCDA81; color:#fff;} #mainMenu #menu3 a {border:none;} /* trailer - permanent - do not touch unless really necessary or wanted */ #countryIndicator { width:220px; float:left; border:none; margin:0; padding:0; line-height:28px; } #breadcrumbs { margin:0 0 0 220px; padding: 0; line-height:28px; } #breadcrumbs span {display:block; padding:0 5px 0 25px; } /* Customized settings - trailer */ #countryIndicator { color:#6f6752; background:#d1c29c; } #countryIndicator span { display:block; padding: 0 0 0 20px; font-weight:bold; font-size:100%; font-family: Georgia, "Times New Roman", Times, serif; margin: 0 0 0 10px; background: #ddd3ba; } #breadcrumbs { background:#ddd3ba; color:#333; font-size: 0.7em; } #breadcrumbs span { color: #968C72; } #breadcrumbs a.crumbs { color:#6f6752; border-bottom:1px #6f6752 solid; text-decoration:none; } #breadcrumbs a.crumbs:hover { color:#9E8DBA; border: none; text-decoration: none; } /* secondary navigation - country navigation - permanent - do not touch unless really necessary or wanted */ /* Customized settings - secondary navigation - country navigation */ #secondaryNavigation h3.subMenuTitle {text-transform:capitalize; margin: 10px 0 0 20px; color:#003300; font-weight:bold;} #subMenu li { padding:0; margin:1px 0 0 0; list-style:none; background:#d1c29c; } #subMenu li.subItem0 {background:#d1c29c url(images/submenuBgd1_4.jpg) no-repeat 10px top;} #subMenu li.subItem1 {background:#d1c29c url(images/submenuBgd2_4.jpg) no-repeat 10px top;} #subMenu li.subItem2 {background:#d1c29c url(images/submenuBgd3_4.jpg) no-repeat 10px top;} #subMenu li.subItem3 {background:#d1c29c url(images/submenuBgd4_4.jpg) no-repeat 10px top;} #subMenu li.subItem4 {background:#d1c29c url(images/submenuBgd5_4.jpg) no-repeat 10px top;} #subMenu li.subItem5 { background:#d1c29c url(images/submenuBgd6_4.jpg) no-repeat 10px top; letter-spacing: -0.03em; } #subMenu li.subItem6 {background:#d1c29c url(images/submenuBgd7_4.jpg) no-repeat 10px top;} #subMenu li.subItem7 {background:#d1c29c url(images/submenuBgd8_4.jpg) no-repeat 10px top;} #subMenu li a { color:#6f6752; padding:0 0 0 30px; text-decoration:none; border:none; font-size:0.7em; display:block; line-height: 45px; font-weight:bold; margin: 0;} #subMenu li a:hover { color:#63839c; text-decoration:none; } #subMenu li a.active { } #subMenu li.subItem0 a:hover { background:#d1c29c url(images/submenuBgd1_3.jpg) no-repeat 10px top; } #subMenu li.subItem1 a:hover { background:#d1c29c url(images/submenuBgd2_3.jpg) no-repeat 10px top; } #subMenu li.subItem2 a:hover { background:#d1c29c url(images/submenuBgd3_3.jpg) no-repeat 10px top; } #subMenu li.subItem3 a:hover { background:#d1c29c url(images/submenuBgd4_3.jpg) no-repeat 10px top; } #subMenu li.subItem4 a:hover { background:#d1c29c url(images/submenuBgd5_3.jpg) no-repeat 10px top; } #subMenu li.subItem5 a:hover { background:#d1c29c url(images/submenuBgd6_3.jpg) no-repeat 10px top; } #subMenu li.subItem6 a:hover { background:#d1c29c url(images/submenuBgd7_3.jpg) no-repeat 10px top; } #subMenu li.subItem7 a:hover { background:#d1c29c url(images/submenuBgd8_3.jpg) no-repeat 10px top; } #subMenu .subOption { padding:0 0 5px 0; margin:-2px 0 0 25px; display: none; } /* #subMenu li .subOption li a {font-size:0.6em; padding:0; line-height:15px; background:url(images/bullet_sub2.gif) left 5px no-repeat; border:none; padding:0 0 0 12px; text-decoration:none; border:none;} #subMenu li .subOption li a:hover {background: url(images/bullet_sub2_hover.gif) left 5px no-repeat; color:#B35438;} */ /* Quicklinks/Floaters - Related Links - permanent - do not touch unless really necessary or wanted */ /* Customized settings - Quicklinks/Floaters */ ul#quickLinks {margin:0; padding:0;} ul#quickLinks li { list-style-type:none; margin:0; padding:0; line-height:14px; } ul#quickLinks li a { display:block; width:220px; height:72px; padding:0; margin:0 0 4px 0; font-size:0; text-decoration:none; text-align:center; color:#6F6752; text-indent: -9999px; } ul#quickLinks li a:hover {color:#fff; text-decoration:none;} .thoughtToday, .mailList, .bookShop, .expMeditation {background-repeat: no-repeat; background-position: center bottom;} .thoughtToday {background-image:url(images/butt_tftd_on.jpg);} .mailList {background-image:url(images/butt_ml_on.jpg);} ul#quickLinks li a.bookShop { background-image:url(images/butt_book_on.jpg); display: none; } .expMeditation { background-image:url(images/butt_expmed_on.jpg); } .thoughtToday:hover {background-image:url(images/butt_tftd_off.jpg);} .mailList:hover {background-image:url(images/butt_ml_off.jpg);} ul#quickLinks li a.bookShop:hover {background-image:url(images/butt_book_off.jpg); display:none;} .expMeditation:hover {background-image:url(images/butt_expmed_off.jpg);} /* ------------------------------ 1.3 footer - fully customizable -------------------------------- */ #footer a { color:#6f6752; text-decoration:none; } #footer a:hover { color:#fff; text-decoration:none; } #copyright{float:left; padding:0 0 0 25px;} #footerLinks{float:right; padding:0 25px 0 0;} /* --------------------------------------------------------------------------------------------------------- PART 2: Common content formatting - fully customizable --------------------------------------------------------------------------------------------------------- */ /* --------- 2.1 Text ----------*/ body {font-size:1em; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;} td {vertical-align:middle;} h1, h2, h3 ,h4 {font-family:Georgia, "Times New Roman", Times, serif;} p { color:#6f6752; margin:0; font-size:0.7em; line-height:175%; padding: 0; } h2 { font-size:0.9em; font-weight:bold; padding:0; margin:0 0 10px 0; color:#63839C; text-transform:none; } h3{ font-size:0.75em; font-weight:bold; margin: 0 0 10px 0; padding:0; color:#ACBA8D; } h4{ font-size:0.7em; font-weight:bold; margin:-8px 0 10px 0; padding:0; color:#BA8D9B; } form {font-size:0.7em;} /* ------------------------------ 2.2 Links & special button links ---------------------------------*/ a {color:#9E8DBA;} a:hover {color:#7C65A3; text-decoration:underline;} a img {border:none;} #content a{ color:#9E8DBA; text-decoration:underline; } #content a:hover { color:#7C65A3; } #content a.buttlink { font-size:1em; font-weight:bold; color:#6f6752; text-decoration:none; /* border:1px solid #ACBA8D */ ; margin:0; font-size:100%; /* background: #fff url(images/butllink.gif) no-repeat right center;*/ text-decoration:none; padding:0; position: relative; top: 0px; } #content a.buttlink:hover { color:#EBAC05; text-decoration:none; /* background:#FCDA81 url(images/butllinkhover.gif) no-repeat right center; border:1px solid #ACBA8D; */ } #content a.buttlinknormal {font-weight:bold; border:0; padding:0;} #content a.buttlinknormal:hover {color:#ae587f; border-bottom:1px #ae587f solid;} /*print link*/ #print { clear:both; padding:1px 10px 0 20px; margin:0; line-height:24px; height:24px; border-top-width: 1px; border-top-style: solid; border-top-color: #63839C; position: relative; top: 20px; } /*default is hidden set visibility: visible; to change - IE7 needs height*/ #print a { background:url(images/print.gif) no-repeat left center; padding:0 0 0 25px; font-size:0.8em; border:0; display:block; float:right; } #print a:hover{ border-bottom:0; } /* ----------- 2.3 Content ------------ */ #contentContainer h1 { float:left; font-size:1.3em; display:block; margin:0; padding:0; width:85%; color: #63839C; font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.6em; } #contentContainer h1 span { margin:0; padding:0; z-index:1; font-weight:normal; float:left; display:block; } #content ul { margin:10px 0 30px 30px; padding:0; font-size:0.7em; color:#968C72; } #content ul li { font-size:inherit; line-height:1.8em; background:url(images/bullet.jpg) no-repeat left 3px; padding: 0 0 0 20px; margin: 0; list-style: none; } #content p {margin:0 0 15px 0; line-height:1.8em; text-align:justify;} #content p.first {padding:10px 0 0 0;} #content p span.quote { color:#A3986A; font-weight: bold; } #content p.quote { font-size:0.7em; color:#968C72; font-weight: bold; } /* content div and system still uses .hrule, but should be replaced with hr by time */ .hrule { height:10px; margin:0 0 10px 0; padding:0; /*background:url(images/hr.jpg) repeat-x bottom;*/ border-top:1px solid #ACBA8D; clear:both; } hr { background:none; border-bottom:1px solid #ACBA8D; margin:20px 0; clear:both; height:1px; position: relative; top: 10px; } #content img { border:1px solid #63839C; margin: 10px; padding: 4px; } /* overal setting for images in content area */ #content img.firstfloatright {float:right; margin:5px 20px 20px 30px;} #content img.floatleft {float:left; margin:2px 30px 20px 20px;} #content img.floatright {float:right; margin:2px 20px 20px 30px;} #content img.flushtr {border:none; float:right; margin:0 0 10px 20px;} #content img.flushl {border:none; float:left; margin:10px 20px 10px 0;} #content img.flushr {border:none; float:right; margin:10px 0 10px 20px;} .split { border-bottom:1px dashed #6B4E3E; border-top:1px dashed #6B4E3E; color:#6B4E3E; font-size:0.8em; font-weight:bold; margin:40px 20px 25px 20px; padding:3px 0; } /*---------- 2.4 Specials ------------ */ /* --------------------------------------------------------------------------------------------------------- PART 3 : Specific pages with specific layout and formatting needs - Customizable unless noted differently --------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------- 3.1 Plone Template layout related - Customizable ------------------------------------------------ */ /* specific code related to certain plone templates or page code for specific Plone templates only */ /* template A*/ #typeA #contentContainer { } /* template B*/ #typeB #content img {float:right; display:block; } #typeB #content h3 {margin:0 0 15px 0;} #typeB #content h3.split {margin:30px 0 30px 0 } /* template C*/ #typeC #content img {border:none; zoom:1;} /* template G */ #content #midknow {clear:both; margin:0; padding:10px;} #knowtxt {clear:both;} .kquotetxt { color:#BA8D9B; font-size:0.7em; font-style:italic; font-weight:bold; line-height:175%; } #typeG #content .quote { color:#6B4E3E; font-size:110%; font-style:italic; font-weight:bold; } #sideknowledge {display:inline; float:left; margin:0 20px 20px 0pt; width:200px;} #content img.qstart {border:0 none; display:inline; float:left; margin:0 10px 0 0;} #content img.qend {border:0 none; display:inline; float:right; margin:15px 0pt 0pt;} #typeG #content h2{margin:0 20px 10px 0; font-size:0.7em; } #typeG #content p.first {padding:0;} #typeG #content h4 { margin:10px 0 0 0; color:#BA8D9B; font-size:0.7em; } #kquote img {background-color:transparent;} /* template K */ .heading3 { border-bottom:2px solid #ACBA8D; margin:0 10px 14px 0; padding:20px 0 3px 0; position:relative; } .heading3First { border-bottom:2px solid #ACBA8D; margin:0 10px 14px 0; padding:20px 0 3px 0; position:relative; } .heading3 h3, .heading3First h3 { background:url(images/right2.gif) no-repeat right top; color:#fff; display:inline; font-size:0.75em; font-weight:bold; margin:0; padding:5px 12px 4px 9px; } /* #typeK #content img {border:none;} */ /* ---------- 3.2 Home page ------------- */ /*#homeView #contentContainer { border: none; padding: 0; min-height: 300px; } #homeView #subMenu {margin:0;} #homeView #contentContainer h1 {color:#6F6F6F; position: absolute; } #homeView #contentContainerExtra { width:100%; } #homeTopics { margin:0 10px; clear: both; } .homeTopicsRow {clear:both;} #tfToday {float:left; width:200px; height:200px; color:#acacac; background:url(images/h_tftd.jpg) no-repeat center 75%;} #meditation {float:left; width: 51%; height:220px; padding: 10px; background:#BDCFDD; } #mailingList {float:right; width:198px; height:200px; color:#acacac; background:url(images/h_ml.jpg) no-repeat center 75%; } #bookShop {float:left; height:200px; width: 200px; color:#FFF; background:#BDCFDD url(images/h_book.jpg) no-repeat center 75%;} #courses {float:left; width:53%; height:220px; } #experience {float:right; width:198px; height:200px; color: #FFFFFF; background:#BDCFDD url(images/h_expmed.jpg) no-repeat center 75%; } #courses h1, #meditation h1 { font-family: garamond, Verdana, Arial, Helvetica, Geneva, sans-serif; font-size: 160%; font-weight: normal; color: #006FB2; background:url(images/h1bluebullet.gif) no-repeat left top; padding: 17px 0 0 60px; height:42px; border:0; margin: 3px 0 0 0; } #courses h1 { background:url(images/h1bullet.gif) no-repeat 10px top; color:#6F6F6F; padding: 17px 0 0 68px; } #homeTopics #meditation a:link, #homeTopics #meditation a:visited, #homeTopics #meditation a:hover, #homeTopics #meditation a:active { text-decoration:none; color:#B35438; font-weight:bold; } #tfToday, #mailingList, #bookShop, #experience {font-size: 150%; font-family: "Times New Roman", Times, serif; font-variant: small-caps; padding:10px;} #courses ul {margin: 0 0 16px 60px; padding: 0;list-style: none;} #courses li { background:url(images/bullet_course.gif) 0 center no-repeat; padding: 10px 0 10px 30px; margin: 0; color:#448297; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; line-height: 1em; } #homeView #footer {margin-top:0;}*/ /*----------------------- 3.3 Experience meditation --------------------------*/ /* actual content and styles */ #MeditationBoxes {float:left; margin:20px 0; width:100%;} /* IE7 needs width here*/ .row{margin: 0 20px 0 20px; clear:both;} #whoami, #myhome, #innerpeace, #forgive, #peace, #stillness { background: no-repeat left top; height:150px; width:46%; margin:0 0 18px 0; padding:0; } /* common for all boxes - width & margin stretch the boxes, but layout may collapse */ #whoami {background-image:url(images/whoami.jpg);} #myhome {background-image:url(images/myhome.jpg);} #innerpeace {background-image:url(images/innerpeace.jpg);} #forgive {background-image:url(images/forgive.jpg);} #peace {background-image:url(images/peace.jpg);} #stillness {background-image:url(images/stillness.jpg);} #whoami, #myhome, #innerpeace {float:left;} #forgive, #peace, #stillness {float:right;} #MeditationBoxes h1 { background-image:none; float:none; border:none; margin:0; padding:0; width: 100%; }/* overruling some general h1 settings */ #MeditationBoxes .row h1 {margin:113px 0 0 0; padding:5px 0; color:#fff; text-align:center; font-weight:normal; font-size:1em;} #whoami h1, #whoami {background-color:#945F59;} #myhome h1, #myhome {background-color:#A26C21;} #innerpeace h1, #innerpeace {background-color:#2F5785;} #forgive h1, #forgive {background-color:#3E67AF;} #peace h1, #peace {background-color:#2C7853;} #stillness h1, #stillness {background-color:#5D5639;} #whoami a, #myhome a, #innerpeace a, #forgive a, #peace a, #stillness a {color:#fff; border:0;} #whoami a:hover, #myhome a:hover, #innerpeace a:hover, #forgive a:hover, #peace a:hover, #stillness a:hover {color:#eb9f4e; border:0; } /* new code for futur update: This is a total concept - only background images and font settings need to be changed */ /*#experienceMeditation {float:left; margin:0; padding:0;} #experienceMeditation ul {padding:0; list-style-type:none; clear:both; margin: 0;} #experienceMeditation li {padding:0; margin:7px; display:block; float:left; height:140px; line-height:100%;} #whoami, #myhome, #innerpeace, #forgive, #peace, #stillness {width:200px;} #experienceMeditation li a {text-align:center; margin:110px 0 0 0; padding:5px; display:block;} /* customizable /*#meditationexp #contentContainer {min-height:725px;} /* for certain templates*/ /*#experienceMeditation li a {font:1.1em Arial, Helvetica, sans-serif; color:#fff; border:none;} #experienceMeditation li a:hover {color:#003300; border:none;} #whoami {background:#945F59 url(images/whoami.jpg) 0 0 no-repeat;} #myhome {background:#A26C21 url(images/myhome.jpg) 0 0 no-repeat;} #innerpeace {background:#2F5785 url(images/innerpeace.jpg) 0 0 no-repeat;} #forgive {background:#3E67AF url(images/forgive.jpg) 0 0 no-repeat;} #peace {background:#2C7853 url(images/peace.jpg) 0 0 no-repeat;} #stillness {background:#5D5639 url(images/stillness.jpg) 0 0 no-repeat;}*/ /* ------------------- 3.4 Thought for today ---------------------- */ /* This is a total concept - only background images and font settings need to be changed */ /* #special2 #content { width:95%; position:relative; } template special 2 */ #TFTcontact {display:block; float:right; width:70px; margin:10px 10px 0 0;} #TFTcontact a {padding:0 3px;} #thoughtForToday { position:relative; background:url(images/thought/day_image.jpg) no-repeat center bottom; height:500px; font-family:Georgia, "Times New Roman", Times, serif; top: 10px; } /* customizable */ #thoughtForToday p { color:#ACBA8D; font-size:1.65em; font-weight:normal; line-height:1.1em; margin-left:14px; text-align:left; } #thoughtForToday .firstCap { color:#ACBA8D; float:left; font-size:4.5em; margin: -20px 0 400px 10px; padding:0 2px 0 0; } /* ------------ 3.5 Calendar --------------- */ /* do not touch unless really necessary or wanted */ table#calendar {margin:0; padding:0; border-collapse:collapse;} .cal_month {text-align:center; height:30px; vertical-align:middle; margin-bottom:0;} .cal_month select {border:none;} .cal_month form {margin-bottom:0; margin-top:3px;} .cal_days td {width:13%; text-align: center; height:28px; padding:6px 0 0 0;} .closeThisOut {display:block; text-align:right; margin:0; } #content .closeThisOut a:link, #content .closeThisOut a:visited {border:none; margin:0; padding:2px; text-align:center; text-decoration:none;} #whatsOn #frame {margin:0; position:absolute; left:23%; top:-70px; visibility:hidden; z-index:3; padding:3px 0 0 0; } /* allow border for IE7 and IE6 on top of clearThis button */ #whatsOn form {font-size:12px;} /* customizable */ #whatsOn #contentContainer {min-height:750px;} #calendar {font-family:verdana, arial; position:relative; z-index:2;} .cal_month { border:1px solid #ACBA8D; background-color:#FCDA81; color:#6f6752; font-weight:bold; font-size:0.8em; } .cal_month select, .cal_month option { color:#6f6752; font-weight:bold; background-color:#FCDA81; } .cal_dates td { height:112px; background-color:#fff; border:1px #ACBA8D dashed; border-top:none; text-align:right; vertical-align:bottom; padding:0; color:#6f6752; font-weight:normal; font-size:230%; margin:0; } #content .cal_dates span {display:inline; padding:0 3px 0 0; bottom:0;} .notThisMonth {color: #dadada;} .cal_days td { border-bottom:1px dashed #ACBA8D; border-right:1px dashed #ACBA8D; border-left:1px dashed #ACBA8D; color:#BA8D9B; font-weight:bold; font-size:0.8em; } .cal_days td.sat, .cal_days td.sun { color:#93A569; } #content .hasEvent { background-color:#FCDA81; text-align:left; margin:0; padding:2px; position:relative; height:108px; z-index:5; } #content .hasEvent .dayEvent { position:absolute; vertical-align: bottom; bottom:0px; right:0; text-align:right; display:block; color: #63839C; } #content .hasEvent .eventlink {display:block;} #content .hasEvent .eventlink a, #content .hasEvent .eventlink a:link, #content .hasEvent .eventlink a:visited {font-size:10px; padding:0; margin:0; font-weight:normal; display:inline; vertical-align:top; line-height:14px; color:#6F6F6F;} #content .hasEvent .eventlink a:hover { font-size: 10px; color:#404040; font-weight:normal; } #content .closeThisOut a:link, #content .closeThisOut a:visited {color:#FFFFFF; font-size:0.8em; background-color:#ACBA8D; } #content .closeThisOut a:hover {font-weight:bold; text-decoration:underline;} /* Iframe Activity Popup - Customizable */ #frame iframe {height:520px; width:400px; clear:both;} #iframe { background:none #fff; border:3px solid #ACBA8D; margin:0; padding:10px; text-align:left; min-width:350px; overflow:auto; } /* overruling body properties from main stylesheet for the iframe html */ .ProgramDetail { border:solid 1px #ACBA8D; margin:0; padding:10px; width:350px; height:470px; } .ProgramDetail .date { color:#6B7A4B; font-size:0.8em; margin:0 0 10px 0; font-weight:bold; } .ProgramDetail .title { color:#BA8D9B; font-size:1.4em; font-weight: bold; margin:0 0 10px 0; } .ProgramDetail img {padding:0 10px 0 0;} .ProgramDetail p, .ProgramDetail td,.ProgramDetail th, .ProgramDetail span {font-size:0.8em; line-height:1.3em; color:#9F9F9F; margin:10px 0; padding:0;} /* If tables would still be rendered by Plone .ProgramDetail table {margin:10px; clear:both;} .ProgramDetail th {color:#83cad1; text-align:left; font-weight:normal;}*/ /* ------------ 3.6 Mailinglist --------------- */ #mailingIframe { background:none #fff; position:relative; min-height:350px; width:100%; } /* iframe html file uses this ID xhtml */ body#mailinglistcontainer {margin:auto 20px; background:none #fff; min-width:300px; max-width:650px; width:100%; margin:20px 10px; color:#030; line-height:1.5em; padding:0; text-align:left;} /*overwrite background used in parent theme pages - body prefix is important here */ body#mailinglistcontainer #contentContainer {background:none; background-color:transparent;} /*overwrite background used in parent theme pages*/ body#mailinglistcontainer p { font-size:0.95em; margin-top:7px; padding-left:2px; } body#mailinglistcontainer h1 {font-size:100%;} /*issuee with confirming messages */ body#mailinglistcontainer form { font-size:0.75em; margin:10px 0; color:#969696; } /*overriding basic setting for forms in theme*/ body#mailinglistcontainer input, body#mailinglistcontainer textarea { margin:0 10px; border:1px solid #ACBA8D; padding:1px; color:#6f6752; overflow:auto; font-size: 1em; } body#mailinglistcontainer #submit, body#mailinglistcontainer input[type="submit"] { background:#fff url(images/butllink.gif) no-repeat right center; color:#9E8DBA; padding:5px; margin: 10px 0 10px 45px; font-weight:bold; width:28em; border: 1px solid #ACBA8D; font-size: 1em; } body#mailinglistcontainer #submit:hover, body#mailinglistcontainer input[type="submit"]:hover { color:#fff; font-weight:bold; background:#FCDA81 url(images/butllinkhover.gif) no-repeat right center; border:1px solid #ACBA8D; } /* redo of mailinglist with current/old form */ body#mailinglistcontainer font.required, body#mailinglistcontainer br {display:none;} body#mailinglistcontainer li {list-style:none;} body#mailinglistcontainer p a {margin:0 0 25px 45px; font-weight:bold; font-size:0.75em; } body#mailinglistcontainer p a:hover {} body#mailinglistcontainer table, body#mailinglistcontainer td {margin:10px 0 0 0; padding:0;} body#mailinglistcontainer ul.list {margin-top:10px;} body#mailinglistcontainer li.list {padding-top:3px;} .poweredphplist {font-size:9px; font-variant:small-caps; font-weight:normal; padding:0; margin:50px 0 0;} .poweredphplist a:link, .poweredphplist a:active, .poweredphplist a:visited {font-size:9px; font-variant:small-caps; font-weight:normal; color:#666666; text-align:center; text-decoration:none; padding:2px;} .poweredphplist a:hover {color: #d90501;} /* for future use, redo of mailingslist*/ /* body#mailinglistcontainer form label {display:block;margin:0 0 0 35px; line-height:2em;} body#mailinglistcontainer form label.emailText {margin-left:0;} body#mailinglistcontainer p.unSubscribe {margin:0 0 25px 45px; font-weight:bold;} body#mailinglistcontainer p.unSubscribe a:hover {color:#d90501;} body#mailinglistcontainer p.private {background:url(images/lockSymbol.gif) no-repeat left center; padding: 0 0 0 35px; line-height:2.2em;} body#mailinglistcontainer #submit, #mailinglistcontainer #reset {background:#e24c46; border:1px solid #9c0300; color:#fff; padding:5px; margin: 10px 0 10px 45px; font-weight:bold; width:18em;} body#mailinglistcontainer #submit:hover, #mailinglistcontainer #reset:hover {color:#d90501; font-weight:bold; background:#f0d742;} */ /* ------------ 3.7 Sitemap --------------- */ #content ul#sitemap { padding:0 0 0 40px; margin:0; font-size:75%; } #content #sitemap li {list-style: none; padding:0 0 0 20px; margin:0; background:url(images/folder_icon.gif) no-repeat 0 0.3em; line-height:2.0em;} /*give it more weight*/ #sitemap li ul {font-size: inherit; padding: 0 0 0 20px; margin:-3px 0 0 0;} #sitemap li ul li {font-size: inherit; padding: 0 0 0 20px; margin:0; line-height:1.8em;} /*IE doesn't understand inherit - see IE7.css and IE6.css for workaround) /* ---------------------- 3.8 Locations near you ------------------------- */ /* map image*/ #locationsIntro {margin: auto 20px;} #map #locationsIntro img {border:0; float:none; margin:20px 0 0 0;} /*becomes tricky here, overruling template setting */ #map #print {clear:both;} /* form sections*/ /*adding template ID here is optional, depending on template and other pages*/ #map #addressForm {margin:20px 35px; padding:0; float:left; width:25em;} #map #addressForm label { color:#6f6752; display:block; font-weight:bold; width:95px; line-height:22px; float:left; clear:left; padding:0; } #map #addressForm select { float:left; font-size:1em; width:13em; border:1px solid #ACBA8D; color:#6f6752; height:18px; margin:3px 0; } /* result table */ #mapresults { font-size:70%; color:#6B4E3E; line-height:175%; margin:20px 20px 20px 20px; padding:0; border:0; clear:both; } #mapresults td { vertical-align:top; padding:10px 20px 10px 20px; border-bottom:1px dashed #ACBA8D; } #mapresults td.tdborderlast {border-right:1px #99ba67 dashed;border-bottom: 0;} #mapresults td.tdborderlastcorner {border:0;} #mapresults .tdborder { border-right:1px dashed #ACBA8D; } #mapresults #cityh { width:8%; font-size:100%; font-weight:bold; color:#ACBA8D; } #mapresults #address { width:27%; font-size: 100%; font-weight: bold; color:#ACBA8D; } #mapresults #contactinfo { width:70%; font-size:100%; font-weight:bold; color:#ACBA8D; } #mapresults .pinktxt { font-weight:bold; color:#ACBA8D; } /* ------------------------------- 3.9 Feedback page ---------------------------------- */ #contact {font-size:1em; margin:5px 0 30px 20px;/* float:left; */} /*no width here to avoid problems with IE6*/ #contact label { width:7em; text-align:right; padding:0 10px 0 0; float:left; font-size:1em; line-height:1.5em; } #contact input, #contact textarea { margin:0; width:16em; border:1px solid #ACBA8D; padding:1px; color: #6f6752; } #contact #comments {width:16em; overflow:auto;} /* only FF not exactly as should? */ #contact p {margin:20px 0 0 0;} #contact #submit, #contact #reset { color:#9E8DBA; font-weight:bold; font-size:1em; padding:5px; border: 1px solid #ACBA8D; background: #fff; } #contact #submit { margin-left:8em; width:11em; float:left; } #contact #reset { margin-left:1em; width:5em; float:left; } #contact #submit:hover, #contact #reset:hover { color:#fff; cursor:pointer; background: #FCDA81; border: 1px solid #ACBA8D; } /* old code if ever this comes back through plone content table#contact{border: 0;padding: 0;margin: 0 0 0 5px;} table#contact input{height: 16px; color: #36525D; font-size: 70%; border: 1px #DEA181 solid; margin: 3px 0;} table#contact td{ vertical-align: top; line-height:16px;} table#contact p{margin: 0 12px 20px 20px;} table#contact td.label{text-align: right;} table#contact #submit, table #contact #reset{height: 26px;font-weight: bold;color: #C63200;text-decoration: none;padding: 5px 9px 4px 10px;margin: 0 20px 0 0;background-color: #FCD7C5;border: 0;border-right: 1px #C63200 solid;border-bottom: 1px #C63200 solid;} table#contact textarea{width: 264px;height: 70px;color: #36525D;font-size: 70%;border: 1px #DEA181 solid;overflow: auto;} */ /* ------------------------------- 3.10 FAQ ---------------------------------- */ #faq #content #faqList{margin:0 0 0 25px; padding:1px;} #faq #content ul { margin:10px; font-size:0.85em; font-family: Verdana, Geneva, sans-serif; } /* change this to reset size for whole list*/ #faq #content ul li { font-size:inherit; line-height:1.8em; list-style-type:disc; background:none; padding-left:0; } #faq #content #faqList > .faqTitle, .faqTitle { font-size:1em; list-style-type:square; color:#ACBA8D; margin-top:15px; font-weight:bold; font-family: Georgia, "Times New Roman", Times, serif; } /* not all browsers understand*/ #faq #content #faqList ul ul, #faq #content #faqList ul ul ul {list-style-type:disc;} #faq #content ul p { font-size:0.95em; margin:5px 0; line-height:1.3em; color:#6F6F6F; font-weight:normal; } /* ------------------------------- 3.11 EVENTS ---------------------------------- */ .cal {width:86px; height:105px; margin:6px 16px 16px 16px; background:url(images/datebg.gif) no-repeat; float:right;} .calfirst {width:86px; height:105px; margin:22px 16px 16px 16px; background:url(images/datebg.gif) no-repeat; float:right;} h3.eventtitlefirst { font-size: 1em; margin-top:16px; margin-bottom:0; margin:0 10px 0 0; padding-top:15px; } h3.eventtitle { font-size: 1em; margin-bottom:0; } #events h4 { font-weight:normal; font-size:0.7em; } .date { margin:0 0 10px 0; display: block; font-size:0.75em; color:#6B7A4B; font-weight:bold; } .number { font-size:3em; color:#63839C; display:block; margin:9px 4px 0 0; text-align:center; } .month { font-size:1.7em; color:#6B7A4B; display:block; text-transform:uppercase; margin:-6px 6px 0 0; text-align:center; } #events .hrule, #events hr { margin:0 0 15px 0; } form#eventRegistration { font-size:1em; } form#eventRegistration input, form#eventRegistration select { border:1px solid #ACBA8D; color:#6f6752; font-size:12px; } form#eventRegistration #submit, form#eventRegistration #reset { color:#9E8DBA; font-weight:bold; font-size:0.85em; padding:5px; border: 1px solid #ACBA8D; background: #fff; } form#eventRegistration #submit { margin-left:8em; width:11em; float:left; } form#eventRegistration #reset { margin-left:1em; width:5em; float:left; } form#eventRegistration #submit:hover, form#eventRegistration #reset:hover { color:#fff; cursor:pointer; background: #FCDA81; border: 1px solid #ACBA8D; } /* ------------------------------- 3.12 Inner Space ---------------------------------- */ /*#innerspacehead {height: 227px; display: block; background:url(images/innerspace.jpg) no-repeat right; margin-right: 5px;}*/ #innerspacecontainer { background:url(images/innerspacebg.jpg) left center no-repeat; height: 550px; width:630px; margin:0 auto; } .row {margin: 0 20px; clear: both;} #covent, #cambridge, #wembley, #romford, #oxford, #chelmsford {width:200px; background:no-repeat top center; height:133px; float:left; padding:0;} #covent {background-image:url(images/coventgarden.jpg);} #wembley {background-image:url(images/wembley.jpg);} #cambridge {background-image:url(images/cambridge.jpg);} #romford {background-image:url(images/romford.jpg);} #oxford {background-image:url(images/oxford.jpg);} #chelmsford {background-image:url(images/chelmsford.jpg);} #covent, #cambridge, #oxford{margin:15px 35px 28px 35px;} #wembley,#romford, #chelmsford {margin: 15px 35px 60px 35px;} #innerspacecontainer .row h1 {border-top: #fff solid 1px; margin: 103px 0 0 0; padding: 3px 0; color: #fff; text-align: center; font-size: 100%; font-family: verdana, arial; text-transform: uppercase; background: none; width: 100%; } #innerspacecontainer #covent h1 {background-color:#B7531E;} #innerspacecontainer #wembley h1 {background-color:#FFA451;} #innerspacecontainer #cambridge h1 {background-color:#BD8E50;} #innerspacecontainer #romford h1 {background-color:#A7A49B;} #innerspacecontainer #oxford h1 {background-color:#B65130;} #innerspacecontainer #chelmsford h1 {background-color:#C88B3C;} #covent a, #wembley a, #cambridge a, #romford a, #oxford a, #chelmsford a {color:#fff; border:0; text-decoration: none; font-weight: normal;} #covent a:hover, #wembley a:hover,#cambridge a:hover,#romford a:hover, #oxford a:hover,#chelmsford a:hover { color: #FBDC5D; border: 0; text-decoration: none; font-weight: normal; }