/* €€€€€€€€€€€€€€€€€€€€ This stylesheet is a composite of the CHT site layout created by John Parker BSc MSc Inspirational Web Designs www.inspirationalwebdesigns.co.uk Plus adaptions of stylesheets which are freely available on the web, full credit is given Copyright (c) 2014 John Parker. All rights reserved. €€€€€€€€€€ */ /* CSS code available at www.smartmenus.org SmartMenus Core CSS (it's not recommended editing this) ===============================================================*/ #main-menu { text-align:center;position:absolute;top:90px; } #main-menu ul { text-align:left; } #main-menu > li { float:none; display:inline-block; margin-right:-4px; } *:first-child+html #main-menu > li { /* for IE7 */ display:inline; margin-right:0; zoom:1; } * html #main-menu li { /* for IE6 */ float:none; display:inline; zoom:1; } /* Override the above in collapsible mode. Make sure the break point width is the same as the one in the theme you use. */ @media screen and (max-width: 640px) { #main-menu { text-align:left; } #main-menu > li { display:block; margin-right:0; } } .sm,.sm ul,.sm li{display:block;list-style:none;padding:0;margin:0;line-height:normal;direction:ltr;} ul.sm li{position:relative;} ul.sm a{position:relative;display:block;} ul.sm a.disabled{cursor:default;} ul.sm ul{position:absolute;top:-999999px;left:-800px;width:100px;} ul.sm li{float:left;} ul.sm-rtl{direction:rtl;} ul.sm-rtl li{float:right;} ul.sm ul li,ul.sm-vertical li{float:none;} ul.sm a{white-space:nowrap;} ul.sm ul a,ul.sm-vertical a{white-space:normal;} * html ul.sm-vertical li{float:left;width:100%;} * html ul.sm-vertical ul li{float:none;width:auto;} *:first-child+html ul.sm-vertical>li{float:left;width:100%;} ul.sm ul.sm-nowrap>li>a{white-space:nowrap;} ul.sm:after{content:"\00a0";display:block;height:0;font:0/0 serif;clear:both;visibility:hidden;overflow:hidden;} * html ul.sm{height:1px;} *:first-child+html ul.sm{min-height:1px;} ul.sm li *,ul.sm li *:before,ul.sm li *:after{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;} ul.sm{-webkit-tap-highlight-color:rgba(0,0,0,0);} /* €€€€€€€€€€ */ /* Bespoke items */ body {font-family:Trebuchet, Arial, Helvetica, sans-serif;font-size:100%;color:#585858;} h99 {font-size:150%;margin-left:6px;color:#0040FF;background-color:#FFFFCC;padding:0px 2px 0px 2px;} input,textarea {width:200px} #xtitleHolder {width:100%;position:absolute;left:0px;top:0px;height:100px;background-image:url('../images/TitleBanner.gif');background-position:center;} #xtitleGirder {width:100%;position:absolute;left:0px; top:0px;height:100px; background-image:url('../images/Girder.gif');background-position:center;background-repeat: repeat-x;} #xtitleGirderStat {width:100%;position:absolute;left:0px; top:-5px;height:100px;background-image:url('../images/Girder90.gif');background-position:center;background-repeat: repeat-x;} #titleGirderStat {width:100%;position:absolute;left:0px; top:0px;height:95px; background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 86%, #207cca 89%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(86%,#2989d8), color-stop(89%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ } #millHolder {position:relative;top:220px;width:900px;height:444px;margin: 0 auto;background-image:url('../images/HomePageImage.gif');background-repeat:no-repeat;background-position:center; /* top:190px; */ border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;} #bespokeHolder {position:relative;top:240px;width:424px;height:600px;margin: 0 auto;background-image:url('../images/ChristmasOpenDay2016.jpg');background-repeat:no-repeat;background-position:center; border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;} #eventHolder {position:relative;top:210px;width:900px;height:450px;margin: 0 auto;background-image:url('../images/HomePageEvent.gif');background-repeat:no-repeat;background-position:center; border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;} #opendaysHolder {position:relative;top:210px;width:900px;height:450px;margin: 0 auto;background-image:url('../images/HomePageOpenDays.jpg');background-repeat:no-repeat;background-position:center; border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;} #indexMessageHolder {width:100%; position:absolute; top:150px;} #tagline {width:98%;position:absolute;left:1%;top:680px;min-height:25px;} /* top:675px; */ #eventsCollageHolder {position:relative;height:500px;width:833px;margin: 0 auto;background-image:url('../images/EventsCollage.gif');background-repeat:no-repeat;background-position:center; border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;} #galleryHolder {width:100%;position:absolute;left:0%;top:120px;min-height:25px;} #galleryTitle {width:98%;position:absolute;left:1%;top:50px;min-height:25px;font-size:1.3em} #buntingHolder {width:100%;position:relative;left:0px;height:100px; background-image:url('../graphics/bunting.png');background-position:center;background-repeat: repeat-x;} #simpleSlider {width: 720px ;margin: 0 auto;} #gutterSlider {width:720px;height:480px;margin: 0 auto; border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;padding:10px;} #ninesixoSlider {width: 960px ;margin: 0 auto;border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;padding:10px;} #visitSlider {width: 720px ;margin: 0 auto;border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;padding:10px;} #vSlideshow {width:500px;height:400px;margin: 0 auto;border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;padding:10px;} #MillWheel {width:800px; margin: 0 auto;} #WaterWheelGraphic {position:absolute;left:-12%;width:1%; margin: 0 auto;} #WaterWheelText {position:absolute;left:18%;width:80%; margin: 0 auto;} #WaterWheelDiary {position:absolute;top:350px; left:1%; width:97%; margin: 0 auto;} #pageadjCaption {width:100%;position:absolute;top:-30px;min-height:50px;} #pageadjCalendar {width:100%;position:absolute;top:50px;min-height:50px;} #pageHolder {width:96%; position:absolute;left:2%;top:150px;min-height:500px;} #pageadjLinks {width:98%;position:absolute;left:1%;top:120px;min-height:50px;} #pageadjProjects {width:99%;position:absolute;left:1%;top:340px;min-height:50px;} #pageadjSoCas {width:99%;position:absolute;left:1%;top:75px;min-height:50px;} #pageScrollArea {width:98%;position:absolute;left:1%;top:160px;min-height:500px;} #colLeftContact {width:35%; position:absolute;left:5%;top:100px;min-height:50px;} #colRightContact {width:55%; position:absolute;left:45%;top:75px;min-height:50px;} #colLeftLocation {width:37.5%; position:absolute;left:1%;top:80px;min-height:50px;} #colRightLocation {width:60%; position:absolute;left:39%;top:60px;min-height:50px;} #colLeftIndex {width:37.5%; position:absolute;left:1%;top:80px;min-height:50px;margin: 0 auto;} #colRightIndex {width:60%; position:absolute;left:39%;top:80px;min-height:50px;margin: 0 auto;} #colLeftVolunteering {width:37.5%; position:absolute;left:1%;top:80px;min-height:50px;} #colRightVolunteering {width:60%; position:absolute;left:39%;top:100px;min-height:50px;} #colLinksOne {width:30%; position:absolute;left:3%;top:100px;min-height:50px;} #colLinksTwo {width:30%; position:absolute;left:36%;top:100px;min-height:50px;} #colLinksThree {width:30%; position:absolute;left:69%;top:100px;min-height:50px;} #colLinksFour {width:95%; position:absolute;top:275px;min-height:50px;margin: 0 auto;} #ContainerBespokeWinnie {width:98%;min-height:160px;position:relative;} #ContainerContactForm {width:200px;min-height:200px} #ContainerProjects {width:200px;min-height:200px} #xContainerResidentGroups {width:100%;min-height:200px;position:relative;} #ContainerSoCas {width:200px;min-height:200px} #ContainerTrusteeNav {width:150px; position:absolute;left:10px;top:20px;} #charityL {position:absolute;left:25px;top:95px;width:200px;min-height:200px;z-index:10;text-align: center;font-size:95%;color:#000;text-shadow: 0px -2px 1px #FFF;} #copyrightR {position:absolute;right:25px;top:95px;width:200px;min-height:200px;z-index:10;text-align: center;font-size:95%;color:#000;text-shadow: 0px -2px 1px #FFF;} #frmProps {border:1px solid #000;padding:2px;width:100%;background-color:#FCFBDF;} #frmWidth {position:absolute;width:80%;left:10%;} #xsearchbar {position:absolute;top:740px;height:10px; width:60%;left:20%;} #searchbar {position:absolute;top:740px;height:10px; min-width:6px;left:38%;text-align:center} #shazam {text-align: center;} #shazbat {display:none;} #obit {border-style:solid;border-width:2px;border-color: #6e6e6e;box-shadow: 2px 2px 5px #A4A4A4;padding:5px;margin:5px;} #boxitin {position:relative;width:98%;margin: 0 auto;} #boxitintenem {position:relative;width:98%;min-height:5em;margin: 0 auto;} #boxitintenem {position:relative;width:98%;min-height:10em;margin: 0 auto;} #boxitintwelveem {position:relative;width:98%;min-height:12em;margin: 0 auto;} #boxitinfifteenem {position:relative;width:98%;min-height:15em;margin: 0 auto;} #boxitintwentyem {position:relative;width:98%;min-height:20em;margin: 0 auto;} #boxitinthirtyem {position:relative;width:98%;min-height:30em;margin: 0 auto;} #boxitinfortyem {position:relative;width:98%;min-height:40em;margin: 0 auto;} #boxitineightyC {position:relative;width:80%;margin: 0 auto;} #imagemapPcIndex {display:block;position:relative;width:600px;height:600px;margin: 0 auto;} #imagemapPhoneIndex {display:none;} #imagemapSevenIndex {display:none;} #width90pc {position:relative;width:90%;margin: 0 auto;} #width80pc {position:relative;width:80%;margin: 0 auto;} #width70pc {position:relative;width:70%;margin: 0 auto;} #privateview {position:relative;top:240px;width:900px;min-height:20em;margin: 0 auto;background-image:url('../images/hmcollotype.jpg');background-repeat:no-repeat;background-position:center; border: 2px solid;border-color: #000;border-radius: 15px;padding: 25px; -webkit-box-shadow: 15px 15px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 15px 15px 10px 0px rgba(0,0,0,0.75); box-shadow: 15px 15px 10px 0px rgba(0,0,0,0.75);} /* Static Header */ #header-wrap {position:fixed;height:auto;top:0;left:0;width:100%;z-index:10;} a.anchor{display: block; position: relative; top: -120px; visibility: hidden;} .center {margin-left: auto;margin-right: auto;width: 70%;} .eventsTable {border: 1px solid #000000;background-color: #FCFBDF;} .expstickybar { position:fixed; color:#FCFBDF; padding:5px; right:0;left:0; visibility:hidden; background:#084B8A; z-index:100; width:auto; } .expstickybar a{ color:#FCFBDF; } .padThumb5 {margin: 5px;} .padThumb10 {margin: 10px;} .lornaSpeak {font-size:95%;font-style:italic} .taglineOne {font-size: 200%;font-weight:bold;} .taglineTwo {font-size: 150%;} .textC {text-align: center;} .textCB {text-align: center;font-weight:bold;font-size:170%;} .textCU {text-align: center;text-decoration: underline;} .textCUB {text-align: center;text-decoration: underline;font-weight:bold;font-size:170%;} .textTitle {text-align: center;font-size: 300%;color:#FAEBAB;font-weight:bold;text-shadow: 0px 2px 1px #000, 0px -1px 1px #81DAF5;} .voteButton {text-align: center;font-size: 90%;} .tNailBorder{border-style:solid;border-width:1px;border-color: #6e6e6e;box-shadow: 0 5px 3px -3px #A4A4A4;padding:5px;} .tNailBorder5{border:1px solid #999;border-radius:1vw;background-color:#fff;box-shadow:5px 5px 5px #999;padding:5px;margin:0px 10px 5px;} .tNailBorder10{border-style:solid;border-width:1px;border-radius:1vw;border-color: #6e6e6e;box-shadow: 0 5px 3px -3px #A4A4A4;padding:10px;margin:0px 10px 5px;} .tZoomBorder5{border-style:solid;border-width:1px;border-color: #6e6e6e;box-shadow: 0 5px 3px -3px #A4A4A4;margin:0px 5px 5px;} p.ghost {color:#aaa;} /* Pale gray font for previous article */ p.padEvents {padding:0 0px 0px 50px} /* Padding for News page pop up */ p.padit {padding:0 5px 20px 10px} /* Padding for Activities */ p.plod {color:rgb(0,0,204);} /* Blue font for notices */ p.tallSpace {line-height:150%;} /* Extra line spacing */ p.boxed { border: 1px solid green ; } img.bottom {vertical-align: text-bottom;} img.top {vertical-align: text-top;} /* Combine with style */ /* --------------------------------------------------------------- Note that styles you apply to the main menu items are inherited by the sub menus items too. If you'd like to avoid this, you could use child selectors (not supported by IE6) - for example: .sm-gray > li > a { ... } instead of .sm-gray a { ... } ---------------------------------------------------------------*/ /* Menu box ===================*/ .sm-gray { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,0.3); background-image: linear-gradient(to bottom, #585858 0%, #E6E6E6 100%); } .sm-gray-vertical { -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3); -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3); box-shadow:0 1px 4px rgba(0,0,0,0.3); } .sm-gray ul { border:1px solid #A9A9A9; padding:7px 0; background:#fff; -moz-border-radius:0 0 4px 4px; -webkit-border-radius:0 0 4px 4px; border-radius:0 0 4px 4px; -moz-box-shadow:0 5px 12px rgba(0,0,0,0.3); -webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3); box-shadow:0 5px 12px rgba(0,0,0,0.3); } /* for vertical main menu subs and 2+ level horizontal main menu subs round all corners */ .sm-gray-vertical ul, .sm-gray ul ul { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } /* Menu items ===================*/ .sm-gray a { padding:13px 24px; color:#2e2e2e; font-size:18px; line-height:23px; font-family:Trebuchet, Arial, Helvetica, sans-serif;font-size:12pt; font-weight:bold; text-decoration:none; text-shadow:none; } .sm-gray a:hover, .sm-gray a:focus, .sm-gray a:active, .sm-gray a.highlighted { background-image:url(../imagesMenuGray/main-item-hover-bg.png); background-image: -ms-linear-gradient(top, #2E2E2E 0%, #E6E6E6 100%); background-image: -moz-linear-gradient(top, #2E2E2E 0%, #E6E6E6 100%); background-image: -o-linear-gradient(top, #2E2E2E 0%, #E6E6E6 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2E2E2E), color-stop(1, #E6E6E6)); background-image: -webkit-linear-gradient(top, #2E2E2E 0%, #E6E6E6 100%); background-image: linear-gradient(to bottom, #2E2E2E 0%, #E6E6E6 100%); color:#fff; } .sm-gray-vertical a { padding:9px 40px 8px 23px; background-image:url(../imagesMenuGray/vertical-main-item-bg.png); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ } /* SubMenu Properties */ .sm-gray ul a { padding:1px 20px 5px 20px; background:transparent; color:#6E6E6E; font-size:15px; text-shadow:none; } .sm-gray ul a:hover, .sm-gray ul a:focus, .sm-gray ul a:active, .sm-gray ul a.highlighted { background-image:url(../imagesMenuGray/main-menu-bg.png); background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ color:#F2F2F2; text-shadow:0 1px 0 rgba(0,0,0,0.3); } /* current items - add the class manually to some item or check the "markCurrentItem" script option */ .sm-gray a.current, .sm-gray a.current:hover, .sm-gray a.current:focus, .sm-gray a.current:active, .sm-gray ul a.current, .sm-gray ul a.current:hover, .sm-gray ul a.current:focus, .sm-gray ul a.current:active { background-position: 0% 0%; color: #fff; background-image: linear-gradient(top,#005a84 0%,#00749f 100%); background-color: #006892; background-repeat: repeat; background-attachment: scroll; } /* round the left corners of the first item for horizontal main menu */ .sm-gray > li:first-child > a { -moz-border-radius:8px 0 0 8px; -webkit-border-radius:8px 0 0 8px; border-radius:8px 0 0 8px; } /* round the corners of the first and last items for vertical main menu */ .sm-gray-vertical > li:first-child > a { -moz-border-radius:8px 8px 0 0; -webkit-border-radius:8px 8px 0 0; border-radius:8px 8px 0 0; } .sm-gray-vertical > li:last-child > a { -moz-border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px; border-radius:0 0 8px 8px; } .sm-gray a.has-submenu { } /* Sub menu indicators ===================*/ .sm-gray a span.sub-arrow { position:absolute; bottom:2px; left:50%; margin-left:-5px; /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */ width:0; height:0; overflow:hidden; border-width:5px; /* tweak size of the arrow */ border-style:solid dashed dashed dashed; border-color:#2e2e2e transparent transparent transparent; } .sm-gray-vertical a span.sub-arrow, .sm-gray ul a span.sub-arrow { bottom:auto; top:50%; margin-top:-5px; right:5px; left:auto; margin-left:0; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #2e2e2e; } /* Items separators ===================*/ .sm-gray li { border-left:1px solid #2E2E2E; } .sm-gray li:first-child, .sm-gray-vertical li, .sm-gray ul li { border-left:0; } /* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package ===================*/ .sm-gray span.scroll-up, .sm-gray span.scroll-down { position:absolute; display:none; visibility:hidden; overflow:hidden; background:#ffffff; height:20px; /* width and position will be automatically set by the script */ } .sm-gray span.scroll-up-arrow, .sm-gray span.scroll-down-arrow { position:absolute; top:-2px; left:50%; margin-left:-8px; /* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */ width:0; height:0; overflow:hidden; border-width:8px; /* tweak size of the arrow */ border-style:dashed dashed solid dashed; border-color:transparent transparent #247eab transparent; } .sm-gray span.scroll-down-arrow { top:6px; border-style:solid dashed dashed dashed; border-color:#247eab transparent transparent transparent; } /* --------------------------------------------------------------- Responsiveness These will make the sub menus collapsible when the screen width is too small. ---------------------------------------------------------------*/ /* decrease horizontal main menu items left/right padding to avoid wrapping */ /* €€€€€€€€€€ */ /* Settings for Tablets and Kindle devices ===================*/ @media screen and (max-width: 980px) { .sm-gray:not(.sm-gray-vertical) > li > a { padding-left:18px; padding-right:18px; } #main-menu {text-align:center;position:absolute;top:65px;} #xtitleGirderStat {width:100%;position:absolute;left:0px; top:0px;height:75px; background-image:url('../images/GirderKindle.gif')} #titleGirderStat {width:100%;position:absolute;left:0px; top:0px;height:75px; background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 86%, #207cca 89%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(86%,#2989d8), color-stop(89%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ } #millHolder {position:relative;top:170px;width:600px;height:296px;margin: 0 auto;background-image:url('../images/HomePageImage.gif');background-repeat:no-repeat;background-position:center;background-size: 600px 296px; border: 1px solid #000;padding:10px;box-shadow: 0 10px 6px -6px #A4A4A4;} #bespokeHolder {position:relative;top:170px;width:424px;height:600px;margin: 0 auto;background-image:url('../images/ChristmasOpenDay2016.jpg');background-repeat:no-repeat;background-position:center;background-size:424px 600px ; border: 1px solid #000;padding:10px;box-shadow: 0 10px 6px -6px #A4A4A4;} #eventHolder {position:relative;top:170px;width:600px;height:300px;margin: 0 auto;background-image:url('../images/HomePageEvent.gif');background-repeat:no-repeat;background-position:center;background-size: 600px 300px; border: 1px solid #000;padding:10px;box-shadow: 0 10px 6px -6px #A4A4A4;} #opendaysHolder {position:relative;top:170px;width:600px;height:300px;margin: 0 auto;background-image:url('../images/HomePageOpenDays.jpg');background-repeat:no-repeat;background-position:center;background-size: 600px 300px; border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;} #eventsCollageHolder {position:relative;height:360px;width:600px;margin: 0 auto;background-image:url('../images/EventsCollage.gif');background-repeat:no-repeat;background-position:center;background-size: 600px 360px; border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;} #indexMessageHolder {display:none;} #pageadjCaption{width:100%;position:absolute;top:-25px;min-height:50px;} #pageHolder {width:96%; position:absolute;left:2%;top:120px;min-height:500px;} #MillWheel {width: 800px ;margin: 0 auto; position:relative; left:10px;} #WaterWheelGraphic {position:absolute;left:-20%;width:1%; margin: 0 auto;} #WaterWheelText {position:absolute;left:31%;width:65%; margin: 0 auto;} #WaterWheelDiary {position:absolute;top:500px; left:1%; width:97%; margin: 0 auto;} #charityL {display:none;} #copyrightR {display:none;} #searchbar {position:absolute;top:550px;height:10px; width:60%;left:20%;} #tagline {display:none;} #imagemapPcIndex {display:none;} #imagemapPhoneIndex {display:none;} #imagemapSevenIndex {display:block;position:relative;width:450px;height:450px;margin: 0 auto;} #shazam {display:none;} #shazbat {display:block;text-align: center;font-weight:bold;} #privateview {position:relative;top:170px;width:600px;height:296px;margin: 0 auto;background-image:url('../images/hmcollotype.jpg');background-repeat:no-repeat;background-position:center;background-size: 950px 380px; border: 2px solid;border-color: #000;border-radius: 15px;padding: 25px; -webkit-box-shadow: 15px 15px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 15px 15px 10px 0px rgba(0,0,0,0.75); box-shadow: 15px 15px 10px 0px rgba(0,0,0,0.75);} /* Non-Static Header */ #header-wrap {position:fixed;height:auto;top:0;left:0;width:100%;z-index:10;} .textTitle {text-align: center;font-size: 225%;color:#FAEBAB;font-weight:bold;text-shadow: 0px 2px 1px #000, 0px -1px 1px #81DAF5;} .textCUB {text-align: center;text-decoration: underline;font-weight:bold;font-size:150%;} .taglineOne {font-size: 125%;font-weight:bold;} .taglineTwo {font-size: 100%;} } @media screen and (max-width: 850px) { .sm-gray:not(.sm-gray-vertical) > li > a { padding-left:18px; padding-right:18px; } } @media screen and (max-width: 750px) { .sm-gray:not(.sm-gray-vertical) > li > a { padding-left:10px; padding-right:10px; } } /* €€€€€€€€€€ */ /* SmartMenu SmartPhone Settings ===================*/ @media screen and (max-width: 640px) { /* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */ ul.sm-gray{width:auto !important;} ul.sm-gray ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;} ul.sm-gray>li{float:none;} ul.sm-gray>li>a,ul.sm-gray ul.sm-nowrap>li>a{white-space:normal;} ul.sm-gray iframe{display:none;} /* Uncomment this rule to disable completely the sub menus for small screen devices */ /*.sm-gray ul, .sm-gray span.sub-arrow, .sm-gray iframe { display:none !important; }*/ /* Menu box ===================*/ .sm-gray { background:transparent; -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3); -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3); box-shadow:0 1px 4px rgba(0,0,0,0.3); } .sm-gray ul { border:0; padding:0; background:#fff; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } .sm-gray ul ul { /* darken the background of the 2+ level sub menus and remove border rounding */ background:rgba(100,100,100,0.1); -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } /* Menu items ===================*/ .sm-gray a { padding:10px 5px 10px 28px !important; /* add some additional left padding to make room for the sub indicator */ background-image:url(../imagesMenuGray/deviceGradientBlue.png) !important; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ color:#FFF !important; } .sm-gray ul a { background:transparent !important; color:#6E6E6E !important; text-shadow:none !important; } .sm-gray a.current { background-image:url(../imagesMenuGray/current-item-bg.png) !important; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ color:#fff !important; } /* add some text indentation for the 2+ level sub menu items */ .sm-gray ul a { border-left:8px solid transparent; } .sm-gray ul ul a { border-left:16px solid transparent; } .sm-gray ul ul ul a { border-left:24px solid transparent; } .sm-gray ul ul ul ul a { border-left:32px solid transparent; } .sm-gray ul ul ul ul ul a { border-left:40px solid transparent; } /* round the corners of the first and last items */ .sm-gray > li:first-child > a { -moz-border-radius:8px 8px 0 0; -webkit-border-radius:8px 8px 0 0; border-radius:8px 8px 0 0; } /* presume we have 4 levels max */ .sm-gray > li:last-child > a, .sm-gray > li:last-child > ul > li:last-child > a, .sm-gray > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-gray > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-gray > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-gray > li:last-child > ul, .sm-gray > li:last-child > ul > li:last-child > ul, .sm-gray > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-gray > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-gray > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul { -moz-border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px; border-radius:0 0 8px 8px; } /* highlighted items, don't need rounding since their sub is open */ .sm-gray > li:last-child > a.highlighted, .sm-gray > li:last-child > ul > li:last-child > a.highlighted, .sm-gray > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-gray > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-gray > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted { -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } /* Sub menu indicators ===================*/ .sm-gray a span.sub-arrow, .sm-gray ul a span.sub-arrow { top:50%; margin-top:-9px; right:auto; left:6px; margin-left:0; width:17px; height:17px; font:bold 16px/16px monospace !important; text-align:center; border:0; text-shadow:none; background:rgba(0,0,0,0.1); -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; } /* Hide sub indicator "+" when item is expanded - we enable the item link when it's expanded */ .sm-gray a.highlighted span.sub-arrow { display:none !important; } /* Items separators ===================*/ .sm-gray li { border-left:0; } .sm-gray ul li { border-top:1px solid rgba(0,0,0,0.05); } .sm-gray ul li:first-child { border-top:0; } /* €€€€€€€€€€ */ /* Bespoke smartphone adjustments ===================*/ #main-menu {text-align:center;position:absolute;top:30px;} #xtitleGirderStat {width:100%;position:absolute;left:0px; top:0px;height:50px; background-image:url('../images/GirderPhone.gif')} #titleGirderStat {width:100%;position:absolute;left:0px; top:0px;height:50px; background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 86%, #207cca 89%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(86%,#2989d8), color-stop(89%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 86%,#207cca 89%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ } #millHolder {position:relative;top:120px;width:300px;height:148px;margin: 0 auto;background-image:url('../images/HomePageImagePhone@2x.gif');background-repeat:no-repeat;background-position:center; background-size: 300px 148px; border: 1px solid #000;padding:5px;box-shadow: 0 10px 6px -6px #A4A4A4;} #bespokeHolder {position:relative;top:100px;width:212px;height:300px;margin: 0 auto;background-image:url('../images/ChristmasOpenDay2016.jpg');background-repeat:no-repeat;background-position:center;background-size: 212px 300px; border: 1px solid #000;padding:5px;box-shadow: 0 10px 6px -6px #A4A4A4;} #eventHolder {position:relative;top:120px;width:300px;height:150px;margin: 0 auto;background-image:url('../images/HomePageEventPhone@2x.gif');background-repeat:no-repeat;background-position:center;background-size: 300px 150px; border: 1px solid #000;padding:5px;box-shadow: 0 10px 6px -6px #A4A4A4;} #opendaysHolder {position:relative;top:120px;width:300px;height:150px;margin: 0 auto;background-image:url('../images/HomePageOpenDaysPhone@2x.jpg');background-repeat:no-repeat;background-position:center;background-size: 300px 150px; border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;} #indexMessageHolder {display:none;} #eventsCollageHolder {position:relative;height:180px;width:300px;margin: 0 auto;background-image:url('../images/EventsCollagePhone@2x.jpg');background-repeat:no-repeat;background-position:center;background-size: 300px 180px; border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;} #tagline {display:none;} #privateview {position:relative;top:120px;width:280px;height:150px;margin: 0 auto;background-image:url('../images/hmcollotype.jpg');background-repeat:no-repeat;background-position:center;background-size: 950px 380px; border: 2px solid;border-color: #000;border-radius: 15px;padding: 25px; -webkit-box-shadow: 15px 15px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 15px 15px 10px 0px rgba(0,0,0,0.75); box-shadow: 15px 15px 10px 0px rgba(0,0,0,0.75);} #galleryHolder {width: 100%} #galleryTitle {width:98%;position:absolute;left:1%;top:30px;min-height:25px;font-size:1.1em} #pageadjCaption{width:100%;position:absolute;top:-15px;min-height:50px;} #pageHolder {width:96%; position:absolute;left:2%;top:50px;min-height:500px;} #pageadjNatCas{width:90%;position:absolute;left:5%;top:500px;min-height:50px;} #simpleSlider {width:100%} #gutterSlider {width:100%;height:100%;border-width:1px;border-style:solid;padding:0px;box-shadow: 0 5px 6px -6px #A4A4A4;} #visitSlider {width:100%;margin: 0 auto;border-width:1px;border-style:solid;border-color:#585858;padding:0px;box-shadow: 0 5px 5px -6px #A4A4A4;} #vSlideshow {width:100%;height:100%;border-width:1px;border-style:solid;padding:0px;border-color:#585858;box-shadow: 0 5px 6px -6px #A4A4A4;} #ninesixoSlider {width:100% ;margin: 0 auto;border-width:1px;border-style:solid;border-color:#585858;padding:0px;box-shadow: 0 5px 6px -6px #A4A4A4;} #vSlideshow{top:100px;width:125px;height:100px;margin: 0 auto;text-align:center} #MillWheel {width: 800px ;margin: 0 auto; position:relative; left:10px;} #WaterWheelGraphic {position:absolute;left:-20%;width:1%; margin: 0 auto;} #WaterWheelText {position:absolute;left:31%;width:65%; margin: 0 auto;} #WaterWheelDiary {position:absolute;top:1111px; left:1%; width:97%; margin: 0 auto;} #colLeftContact {width:100%; position:absolute;left:0%;top:470px;min-height:50px;} #colRightContact {width:100%; position:absolute;left:0%;top:25px;min-height:50px;} #colLeftLocation {width:100%; position:absolute;left:0%;top:25px;min-height:50px;} #colRightLocation {width:100%; position:absolute;left:0%;top:375px;min-height:50px;} #colLeftIndex {width:95%; position:absolute;left:0%;top:330px;min-height:50px;margin: 0 auto;} #colRightIndex {width:100%; position:absolute;left:0%;top:80px;min-height:50px;margin: 0 auto;} #colLeftVolunteering {font-size:75%;width:47.5%;top:40px;} #colRightVolunteering {width:50%;left:49%;top:60px;} #colLinksOne {width:90%; position:relative;left:5%;min-height:50px;} #colLinksTwo {width:90%; position:relative;left:5%;min-height:50px;} #colLinksThree {width:90%; position:relative;left:5%;min-height:50px;} #charityL {display:none;} #copyrightR {display:none;} #searchbar {position:absolute;top:600px;height:10px; width:60%;left:20%;} #shazam {display:none;} #shazbat {display:block;text-align: center;font-weight:bold;} #imagemapPcIndex {display:none;} #imagemapPhoneIndex {display:block;position:relative;width:250px;height:250px;margin: 0 auto;} #imagemapSevenIndex {display:none;} /* Non-Static Header */ #header-wrap {position:absolute;height:auto;top:0;left:0;width:100%;z-index:10;} a.anchor{display: block; position: relative; top: 0px; visibility: hidden;} p.tallSpace {line-height:100%;} .textTitle {text-align: center;font-size: 140%;color:#FAEBAB;font-weight:bold;text-shadow: 0px 2px 1px #000, 0px -1px 1px #81DAF5;} .textCUB {text-align: center;text-decoration: underline;font-weight:bold;font-size:120%;} .taglineOne {font-size: 100%;font-weight:bold;} .taglineTwo {font-size: 85%;} .tNailBorder5{border:1px solid #999;border-radius:1vw;background-color:#fff;box-shadow:3px 3px 3px #999;padding:2px;margin:0px 5px 3px;} } /* #main-menu config - instance specific stuff not covered in the theme */ #main-menu { position:relative; z-index:9; width:auto; } #main-menu ul { width:12em; /* fixed width only */ } /* Menu Toggle Button */ #menu-button { background: center center no-repeat transparent; background-image: url("../graphics/transparentHamburger.gif"); text-decoration: none; color: white; } #menu-button:before { content: ''; position: absolute; left: 5px; top: 30px; width: 1em; height: 0.15em; background: white; box-shadow: 0 0.25em 0 0 white, 0 0.5em 0 0 white; } #menu-button.collapsed:before { content: ''; position: absolute; left: 5px; top: 30px; width: 1em; height: 0.15em; background: white; box-shadow: 0 0.25em 0 0 white, 0 0.5em 0 0 white; } #main-menu.collapsed { display: none; } @media (min-width: 768px) { /* hide the button in desktop view */ #menu-button { display: none; } /* always show the menu in desktop view */ #main-menu.collapsed { display: block; } } /* Message to display on mobile devices */ #portraitmessage {display:none;} p.message {padding: 10px;} @media screen and (max-width: 640px) and (orientation:portrait){ #portraitmessage {display:inline;} #dropinboxv2cover{ width: 300px; /*change width to desired */ height: 200px; /*change height to desired. REMOVE if you wish box to be content's natural height box-shadow: 0px 10px 2px #888888; -moz-border-radius: 10px; border-radius: 10px; */ position:absolute; /*Don't change below 4 rules*/ z-index: 100; overflow:hidden; visibility: hidden; } #dropinboxv2{ width: 280px; /*change width to above width-20. */ height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/ border: 1px solid black; /*Customize box appearance*/ background-color:#F3F781; border-radius: 10px; padding: 4px; position:absolute; /*Don't change below 3 rules */ left: 0; top: 0; } }