/* ========================================== GENERAL SITE SETTINGS =================================== */ html optima { overflow-x:hidden; } /* prevent horizontal scrollbar - unsure why this site needs this */ body { background:#fff; color:#555; line-height:1.7; font-family: 'Roboto', sans-serif; } a { color:#336; } a[target="_blank"]:after { content:url('images/external.png'); } /* add icon to offsite links */ h1,h2,h3,h4,h5,h6 { color:#556; font-family: 'Roboto', sans-serif; line-height:1.2; } h1 { font-size:1.9rem; margin-top:0; } h2 { font-size:1.5rem; color:#229; } h3 { font-size:1.0rem; color:#779; margin:1rem 0; } .black { color:#000; } img { width:auto; max-width:100%; } div { width:auto; } /* previously had this as '100%' for the benefit of IE, but this breaks other things. Watch out for IE weirdness! :P */ .nowrap { white-space:nowrap; } .posrel { position:relative; } .w300 { font-weight:300; } .w400 { font-weight:400; } .w700 { font-weight:700; } .w900 { font-weight:900; } .whitebg { background:white; } .left { float:left; } .right { float:right; } hr { margin:1rem 0; border-top:solid 1px #aac; } .fullheight { height:100%; } .linksnodeco a { text-decoration:none; } input[type="submit"], input[type="button"], button, a.falsebutt { border:0; border-radius:4px; color:white; font-size:0.9rem; padding:3px 10px; line-height:1.7rem; background:#457; text-decoration:none; display:inline-block; } input[type="text"], input[type="password"], select, textarea { border:solid 1px #aa89bc; border-radius:4px; color:#444; font-size:0.9rem; padding:3px 10px; line-height:1.7rem; } div.fullwidth { margin:0 auto; height:100%; } div.widthrestrict { max-width:1200px; margin:0 auto; /* height:100%; */ padding:0.01px calc(5% + 5px); overflow:hidden; /* background:justatest#aaf; */ } /* overflow:hidden & invisibly small padding help to avoid unexpected margin collapses */ div.widthrestrictnopad { max-width:1200px; margin:0 auto; /* height:100%; */ padding:0.01px 0; overflow:hidden; /* background:justatest#aaf; */ } /* overflow:hidden & invisibly small padding help to avoid unexpected margin collapses */ div.partwidth { max-width:700px; margin:0 auto; /* height:100%; */ padding:0.01px calc(2% + 5px); overflow:hidden; /* background:justatest#aaf; */ } /* overflow:hidden & invisibly small padding help to avoid unexpected margin collapses */ div.partwidth2 { max-width:1000px; margin:0 auto; /* height:100%; */ padding:0.01px calc(2% + 5px); overflow:hidden; /* background:justatest#aaf; */ } /* overflow:hidden & invisibly small padding help to avoid unexpected margin collapses */ div.vertpad { padding-top:3rem; padding-bottom:3rem; } /* top/bottom padding for various divs */ img.naturalwidth { width:auto; margin:20px 0; display:inline-block; } img.fullwidth { width:100%; margin:20px 0; display:inline-block; } table.cfdebug { } /* FLEX SETTINGS */ /* default is for mobile display: full-width items in one column */ .flex, .flex1, .flex2, .flex3, .flex4, .flex5, .flex6, .flex7 { display:flex; flex-direction:column; margin-bottom:20px; align-items:center; } /* flex containers */ .flex > *, .flex1 > *, .flex2 > *, .flex3 > *, .flex4 > *, .flex5 > *, .flex6 > *, .flex7 > * { width:100%; text-align:center; flex-grow:0; padding-bottom:1.5rem; } /* flex items */ .flex > img, .flex1 > img, .flex2 > img, .flex3 > img, .flex4 > img, .flex5 > img, .flex6 > img, .flex7 > img { margin-bottom:20px; height:100%; } /* images that are flex items */ /* changes for wider displays: multiple columns or grids */ @media (min-width: 600px) { .flex, .flex1, .flex2, .flex3, .flex4, .flex5, .flex6, .flex7 { flex-direction:row; justify-content:space-between; align-items:stretch; } /* flex containers */ .flex1, .flex2, .flex3, .flex4, .flex5, .flex6, .flex7 { flex-wrap:wrap; } /* flex containers within which items wrap, to keep a certain number of items per row */ .flex > * { /* width:0; not sure why I used this but IE hates it */ width:initial; text-align:left; flex-grow:1; } /* flex items with variable number of items per row, no wrapping, items expand to fit width */ .flex1 > * { width:100%; text-align:left; } /* flex items with 1 item per row, wrapping */ .flex2 > * { width:48%; text-align:left; } /* flex items with 2 items per row, wrapping */ .flex3 > * { width:31%; } /* flex items with 3 items per row, wrapping */ .flex4 > * { width:21%; } /* flex items with 4 items per row, wrapping */ .flex5 > * { width:18%; } /* flex items with 5 items per row, wrapping */ .flex6 > * { width:15%; } /* flex items with 6 items per row, wrapping */ .flex7 > * { width:49%; } /* flex items with 6 items per row, wrapping */ } div#wrapper { min-height:100vh; } @media (min-width: 850px) { /* changes for wider screens */ div#menu { display:block !important; position:absolute; width:100%; bottom:0; background:none !important; } /* show normal menu */ div#div-menubutt { display:none !important; } /* display button to show menupage */ } /* changes for non-fixed header. See also change to headerHeight calculation at top of functions.js */ div#header { position:relative !important; } div#wrapper { margin-top:0 !important; } div#content2, div#content3, div#content4, div#content5, div#content7 { min-height:100vh !important; } /* div#buttstop holds the menu trigger button */ div#buttstop { right:20px; top:8px; position:absolute; } div#buttstop a { display:inline-block; border:0; margin-top:4px; } div#buttstop a + a { margin-left:-10px; } /* new stuff 23 april 2019 */ div#wrapper { display:flex; flex-direction:column; } /* IE min-height/flex fix */ div#screen1 { display:flex; flex-direction:column; min-height:100vh !important; } /* wraps header & first section; together should be 100vh; first section to be expanded by flex-grow:1; */ div#content1a { flex-grow:1; /* background:rgba(0,50,90,0.2); */ } /* first section; together with header should be 100vh; first section is expanded by flex-grow:1; background colour darkens bg photos */ #maximage { position:absolute !important; } /* contains full-screen background image slideshow animated by maximage script */ #latestannounce1 { margin:15px auto; } /* outer */ #latestannounce2 { display:inline-block; padding:3rem 2rem; background:rgba(255,255,255,0.7); border-radius:10px; font-size:1.4rem; color:#468; } /* inner */ /* ===================================== HEADER SECTION ===================================== */ div#header { background:#fff; min-height:100px; width:100%; z-index:150; padding-bottom:0.1px; display:flex; flex-direction:column; } a#headlogo { background:url('images/headerlogo2.png') no-repeat left center; background-size:contain; height:20vh; max-height:153px; min-height:100px; display:block; margin:0 0 0 0%; } a#headlogo2 { background:url('images/BoveyTraceyPool_LogoHeader02.png') no-repeat bottom left; background-size:contain; height:153px; display:block; margin:0 0 0 0%; } /* height + margin*2 + height&padding of mainmenu = height of header, used for content divs below */ /* BUTTON TO SHOW/HIDE MENU (SMALL SCREENS ONLY) */ a#menubutt { background:#444; color:#fff; border:solid 2px #fff; border-radius:5px; padding:0 2px 0 2px; text-align:center; font-size:1.6rem; line-height:105%; margin:5px 0; display:inline-block; text-decoration:none; } a#menubutt span::after { content:"\2630"; } /* menu symbol */ /* MENU ( FOR LARGE SCREENS ) */ div#menu { font-size:130%; /* letter-spacing:-0.04rem; */ z-index:100; background:#fff; display:none; } div#menu div { text-align:center; } div#menu li { margin:0; padding:0; background-image:none; } div#menu a { text-decoration:none; } ul.dropdown li.over > ul { display:block; } /* new display control rule - see script */ /* ul.dropdown li:hover > ul { display:block; } old on-hover display control rule */ /* LEVEL ONE */ ul.dropdown { position:relative; overflow:visible; z-index:100; list-style-type:none; margin:0; padding:0; display:flex; justify-content:flex-end; } ul.dropdown li { /* float:left; */ zoom:1; position:relative; display:inline-block; } ul.dropdown > li { /* width:100%; */ } ul.dropdown a:hover { color:#000; } ul.dropdown > li a { display:block; padding:10px 15px; border-right:1px solid #ddd; color:#000; font-weight:bold; } ul.dropdown > li:last-child a { border-right:0; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { background:#cde !important; color:#888; } ul.dropdown li.hover a { color:#b4d9ee; } /* LEVEL TWO */ ul.dropdown ul { /* width:280px; */ min-width:200px; display:none; position:absolute; top:100%; overflow:visible; z-index:201; margin:0; list-style-type:none; padding:0; } ul.dropdown ul li { font-weight:normal; background:#f6f6f6; color:#000; border-bottom:1px solid #9ac; float:none; display:block; } ul.dropdown ul li a { border-right:none; padding:10px 25px; display:block; text-align:left; } /* IE 6 & 7 Needs Inline Block */ /* LEVEL THREE */ ul.dropdown ul ul { left:100%; top:0; overflow:visible; z-index:201; list-style-type:none; padding:0; } /* MENU CHANGES FOR SMALL SCREENS */ @media (max-width: 850px) { /* for small screens */ div#menu { letter-spacing:0; margin-bottom:2px; } div#menu.menuShow { display:block !important; } div#menu .widthrestrict { padding:0; } /* LEVEL 1 */ ul.dropdown { display:block; } ul.dropdown li { display:block; } ul.dropdown li a { padding:1rem 0 !important; color:#fff; } ul.dropdown > li a { border-right:0; } ul.dropdown li a:hover { color:#ded; } ul.dropdown li:nth-child(odd) a { background:#000; } ul.dropdown li:nth-child(even) a { background:#222; } /* LEVEL TWO */ ul.dropdown ul { position:relative; } ul.dropdown ul li { display:inherit !important; border-bottom:0; } ul.dropdown ul li a { text-align:inherit; color:#444; } ul.dropdown ul li a:hover { color:#555; } ul.dropdown ul li:nth-child(odd) a { background:#aee; } ul.dropdown ul li:nth-child(even) a { background:#aff; } /* LEVEL THREE */ ul.dropdown ul ul { max-width:unset !important; position:static !important; } ul.dropdown ul ul li { } ul.dropdown ul ul li a { } ul.dropdown ul ul li:nth-child(odd) a { background:#898; } ul.dropdown ul ul li:nth-child(even) a { background:#9a9; } } /* NEW STYLES TO MAKE LEVEL 2 OF MENU HORIZONTAL (EXCEPT NOW IT'S BEEN CHANGED BACK TO VERTICAL AGAIN!) */ /* L1 - allow L2 to be horizontal */ ul.dropdown { position:static; } ul.dropdown li { position:static; } /* L2 - horizontal and full width */ ul.dropdown ul { background:#def; } ul.dropdown ul li { background:none; position:relative; } ul.dropdown ul li a { padding:10px 25px; } /* L3 - vertical, restricted width, placed below parent */ ul.dropdown ul ul { left:0; right:unset; top:100%; background:#eee; width:100%; min-width:320px; max-width:500px; position:absolute; } ul.dropdown ul li:nth-child(n+5) ul { left:unset; right:0; } /* high-numbered (right hand) L3 items aligned with right edge of parent to fit on screen */ ul.dropdown ul ul li { background:none; display:block; } ul.dropdown ul ul li:nth-child(odd) { background:#f7f7f7; } /* stripe L3 items */ ul.dropdown ul ul li a { padding:15px 20px; } /* FOR HORIZONTAL LEVEL 2 */ /* ul.dropdown ul { width:100%; left:0; } ul.dropdown ul li { display:inline-block; border-bottom:0; } ul.dropdown ul li a { padding-top:25px; padding-bottom:25px; } */ /* ======================================= HOMEPAGE SECTIONS (SMALL SCREEN SETTINGS) ================================== */ div#content1a { display:flex; align-items:center; flex-direction:row !important; padding:1px 0; color:#fff; margin-bottom:0 !important; position:relative; } div#content20 { min-height:100vh !important; background:#388; color:#fff; margin-bottom:0; align-items:center; justify-content:center; } div#content20 a { color:#dff; } div#content30 { min-height:100vh !important; background:#ddeef8; margin-bottom:0; align-items:center; } div#content2 { display:flex; align-items:center; } /* 'about the artist' section */ /* CONTENT DIV FOR STANDARD PAGE (ON SMALL SCREENS) */ /* div#content6 { flex-grow:1; align-items:center; flex-direction:row !important; padding:0; color:#556; margin-bottom:0 !important; background:#8a94cc; } */ div#content6 { flex-grow:1; flex-direction:column; padding:0; color:#556; margin-bottom:0 !important; background:#ab89bd; display:flex; } div#content6 > div { flex-grow:1; width:100%; display:flex; flex-direction:column; } div#content6 > div > div { flex-grow:1; width:100%; } /* CONTENT DIV FOR STANDARD PAGE (ON SMALL SCREENS) */ div#content6b { flex-grow:1; align-items:start; flex-direction:row !important; padding:0; color:#777; margin-bottom:0 !important; background:#ddeef8; } /* NARROWER CONTAINER FOR CONTENT WHEN REQUIRED */ .narrowcontent { max-width:750px; margin:0 auto; } .narrowcontent2 { max-width:850px; margin:0 auto; } /* PAGE TITLE */ .pagetitdiv { background:#a79f9f; } h1.pagetit { font-size:2.7rem; color:#33a; margin:3rem 0 1.5rem 0; font-weight:normal; line-height:1.2; } h2.pagesubtit { font-size:1.4rem; color:#446; margin:1.5rem 0 1.2rem 0; } h1.pagetitnews { font-size:2.3rem; color:#5ab; margin:0; position:relative; margin:13px 0; font-weight:normal; } /* UNUSED BANNER IMAGE */ @media (max-width: 500px) { /* at window sizes below 500px, we show a lower-res image; we'll also crop it to a narrower width with this css... */ img#bannerimg { width:160%; margin-left:-30%; } } /* ============================= Pre Dec 2024 homepage arrow background colour: e3d93a New: e7e6de ===================== */ h1.strap1 { font-size:120%; font-weight:bold; color:#000; margin:1rem auto 2rem auto; background:#e7e6de; border-radius:2rem; padding:2rem 4%; line-height:1.5; } @media (min-width: 500px) { /* at larger screen sizes */ h1.strap1 { font-size:150%; } } h1.strap1a { font-size:130%; font-weight:normal; color:#000; margin:1rem auto 2rem auto; background:#e7e6de; border-radius:2rem; padding:2rem 4%; line-height:1.5; } h1.strap2 { font-size:2.5rem; font-weight:normal; color:#5ab; margin:1rem 0 2rem 0; } h2.strap2a { font-size:1.4rem; font-weight:normal; color:rgba(255,255,255,0.75); margin:0 auto 0 auto; width:74%; } h1.strap3 { font-size:2.8rem; font-weight:bold; color:#378; margin:1rem 0; } h1.strap4 { font-size:2.5rem; font-weight:bold; color:#2a5292; margin:4rem 0 2rem 0; } h1.strap5 { font-size:1rem; font-weight:normal; color:#aaaaaa; margin:1rem auto 2rem auto; width:95%; } @media (min-width: 500px) { /* at larger screen sizes */ h1.strap5 { font-size:3.0rem; } } h1.strap6 { font-size:2rem; font-weight:normal; color:#94c125; margin:1rem auto 2rem auto; width:95%; } @media (min-width: 500px) { /* at larger screen sizes */ h1.strap6 { font-size:3.0rem; } } /* PAGEBUTTS V3 */ /* ============================= Pre Dec 2024 homepage arrow background colour: e3d93a New: e7e6de ===================== */ a.arrowbutt { opacity:1; display:inline-block; color:#000; border:solid 4px #000; background:#e7e6de; border-radius:12px; padding:10px 70px 10px 70px; font-size:1.4rem; text-decoration:none; margin:7vh 0 2vh 0; } /* a.arrowbutt:hover { opacity:0.8; } */ /* a.arrowbutt::after { content:url('images/downarrow.png'); position:relative; top:6px; left:10px; } */ a.arrowbutt::after { content:"\A \25bc"; margin-left:0.5em; color:#000; white-space:pre; } a.arrowbuttgreen { opacity:1; display:inline-block; color:#3ab; border:solid 2.5px #3ab; border-radius:12px; padding:10px 70px 10px 70px; font-size:1.4rem; text-decoration:none; margin:7vh 0 2vh 0; } a.arrowbuttgreen:hover { opacity:0.8; } a.arrowbutt2 { opacity:0.8; display:inline-block; color:#468; border:solid 2.5px #468; border-radius:12px; padding:10px 70px 10px 70px; font-size:1.4rem; text-decoration:none; margin:7vh 0 2vh 0; } a.arrowbutt2:hover { opacity:1; } a.arrowbutt2::after { content:"\25bc"; margin-left:0.5em; } a.arrowspace { opacity:1; display:inline-block; color:#faf8f2; border:solid 2.5px #faf8f2; border-radius:12px; padding:20px 70px 1px 70px; font-size:1.4rem; text-decoration:none; margin:7vh 0 2vh 0; } a.arrowspace:hover { opacity:0.8; } a.arrowspace2 { opacity:1; display:inline-block; color:#faf8f2; border:solid 2.5px #faf8f2; border-radius:12px; padding:20px 70px 100px 70px; font-size:1.4rem; text-decoration:none; margin:7vh 0 2vh 0; } a.arrowspace2:hover { opacity:0.8; } a.ablinkimg { display:inline-block; max-width:310px; margin-top:0rem; } /* optima butts */ /* PAGEBUTTS V2 a.explorebutt { display:inline-block; background:#000; color:#fff; text-decoration:none; padding:5px 30px; margin:20px 0; font-size:80%; } a.explorebutt span::after { content:"\25bc"; margin-left:0.5em; color:#fa0; } a.arrowbutt { display:inline-block; color:#fff; background:url('images/morebox5.png') no-repeat center center; background-size:contain; padding:40px 40px 45px 40px; font-size:1.4rem; text-decoration:none; margin:10vh 0 2rem 0; min-width:297px; } a.arrowbutt:hover { opacity:0.8; } a.arrowbuttgreen { display:inline-block; color:#94c125; background:url('images/morebox5green.png') no-repeat center center; background-size:contain; padding:40px 40px 45px 40px; font-size:1.4rem; text-decoration:none; margin:10vh 0 2rem 0; min-width:300px; } a.arrowbuttgreen:hover { opacity:0.8; } a.arrowbutt2 { opacity:0.8; display:inline-block; color:#658502; background:url('images/morebox6.png') no-repeat center center; background-size:contain; padding:40px 40px 45px 40px; font-size:1.4rem; text-decoration:none; margin:10vh 0 2rem 0; min-width:300px; } a.arrowbutt2:hover { opacity:1; } */ /* ORIGINAL ARROWBUT STYLE CODE a.arrowbutt { display:inline-block; color:#fff; background:url('images/morebox2a.png') no-repeat center center; background-size:contain; padding:40px 40px 45px 40px; font-size:1.4rem; text-decoration:none; margin:5rem 0 2rem 0; min-width:300px; } a.arrowbutt:hover { opacity:0.8; } a.arrowbutt2 { opacity:0.8; display:inline-block; color:#658502; background:url('images/morebox3a.png') no-repeat center center; background-size:contain; padding:40px 40px 45px 40px; font-size:1.4rem; text-decoration:none; margin:5rem 0 2rem 0; min-width:300px; } a.arrowbutt2:hover { opacity:1; } */ /* NEWS BOXES USED ON HOMEPAGE, NEWS PAGE, RESOURCE LIB (AND ELSEWHERE?!) DIV#NEWSBOXES SHOULD ALSO BE GIVEN A CLASS OF 'FLEX3' */ div#newsboxes a.newsstory { display:block; text-decoration:none; border:solid 1px #fff; border-radius:5px; padding:0; overflow:hidden; margin:0.5rem 0; position:relative; color:#716e6e; background:#fff; } div#newsboxes a.newsstory:hover { color:#000; } div#newsboxes a.newsstory img { width:100%; padding:3%; } /* div#newsboxes a.newsstory h2 { position:absolute; z-index:10; bottom:10%; left:0; background:#94c124; color:white; padding:5px; min-width:80%; } */ div#newsboxes a.newsstory h2 { background:#fff; color:#358; padding:5px; margin:0; text-align:left; padding:10px 3%; font-size:1rem; } div#newsboxes a.newsstory:hover h2 { background:#fff; color:#189; } div#newsboxes a.newsstory:hover img{ opacity:0.8; } div#newsboxes div.newspic { position:relative; } div#newsboxes div.newstext { padding:15px 15px 50px 15px; text-align:left; } div#newsboxes span.newsdate { display:block; font-size:0.75rem; padding:0 0 10px 0; } div#newsboxes a div.newsbutt { background:url('images/butt_more_sept2017.png') no-repeat center right #fff; border:solid 1px #94c124; border-radius:13px; height:26px; padding:3px 20px 0 0; width:120px; text-align:center; position:absolute; bottom:0; left:0; right:0; margin:0 auto 15px auto; } div#newsboxes a:hover div.newsbutt { background-color:#bde45c; } /* RESOURCE LIB PAGE */ div#toplinkstextsection.reslinkDOC { background:url('images/logo_doc.gif') no-repeat 15px 19px; padding-left:30px; } div#toplinkstextsection.reslinkPDF { background:url('images/logo_pdf.gif') no-repeat 15px 19px; padding-left:30px;} div#toplinkstextsection.reslinkGEN { background:url('images/logo_gen.gif') no-repeat 15px 19px; padding-left:30px;} div#toplinkstextsection.reslinkOFFSITE { background:url('images/logo_offsite.gif') no-repeat 15px 17px; padding-left:30px;} div#toplinkstextsection h2 { background:transparent !important; } a.newsstory[target="_blank"]::after { content:''; /* cancel auto-added external link symbol */ } a[class*=reslink]{ display:inline-block; font-weight:bold; padding:5px 5px 5px 40px; text-decoration:none; margin-bottom:25px; } a.reslinkDOC { background:url('images/logo_doc.gif') no-repeat 5px 9px; } a.reslinkPDF { background:url('images/logo_pdf.gif') no-repeat 5px 9px; } a.reslinkGEN { background:url('images/logo_gen.gif') no-repeat 5px 9px; } a.reslinkOFFSITE { background:url('images/logo_offsite.gif') no-repeat 5px 7px; } a.reslinkOFFSITE[target="_blank"]::after { content:''; /* cancel auto-added external link symbol */ } a[class*=reslink] span[class=small] { color:black; font-style:italic; font-weight:normal; } div.motivquote { color:white; opacity:0.4; padding:5rem 0; font-weight:bold; font-size:2rem; } /* VIDEO EMBED */ .vwOuter { margin:50px 10%; } .videoWrapper { position:relative; padding-bottom:56.25%; /* 56.25%=16:9 75%=4:3) */ /* padding-top:25px; */ height: 0; } .videoWrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; } /* INFOPAIRS */ div#infopairs > div.flex > div:first-child { padding:15px 5%; } /* for info divs */ /* changes for wider displays */ @media (min-width: 450px) { /* set the info div twice as big as the pic div */ div#infopairs > div.flex > div { flex-grow:1; } div#infopairs > div.flex > div:first-child { flex-grow:2; } /* swap the display order of the info & pic divs in even-numbered rows, for an alternating effect */ div#infopairs > div.flex:nth-child(even) > div { order:1; } div#infopairs > div.flex:nth-child(even) > div:first-child { order:2; } } /* TEXT-FLOWING COLUMNS */ .cols2,.cols3 { column-count:1; column-gap:4rem; margin:0 0 2rem 0; } /* changes for wider displays */ @media (min-width: 450px) { .cols2 { column-count:2; } .cols3 { column-count:3; } } .flexcaption { text-align:left; font-size:0.8rem; margin:1rem 0; } /* HOMEPAGE SECTION 3: MORE INFO BOXES */ div.moreinfoboxes { justify-content:space-around; } div.moreinfoboxes > div { background:#2d9dd5; min-height:300px; border-radius:2rem; width:300px; overflow:hidden; position:relative; margin:0.5rem; } div.moreinfoboxes > div > a { text-decoration:none; display:block; height:100%; width:100%; position:absolute; } div.moreinfoboxes > div > a > h3 { background:#293c7e; color:#fff; margin:0; padding:1rem; text-align:center; } div.moreinfoboxes > div > a > div { min-height:240px; } div.moreinfoboxes > div > a > div > div { width:65%; color:#fff; padding:1rem; } div.moreinfoboxes > div > a > div > div > span { display:inline-block; background:#293c7e; padding:0.3rem 1rem; border-radius:1rem; margin:1rem 0; } /* DIAMEDICA 2017 PRODUCT GROUP BOXES ON HOMEPAGE AND PRODUCT INTRO PAGE */ .homeprodboxes a { text-decoration:none !important; flex-direction:column !important; } .homeprodboxes .dummyitem { height:0; } @media (min-width: 450px) { .homeprodboxes a, .homeprodboxes .dummyitem { width:48%; } /* medium screens: 2 cols, override default flex width for tighter spacing */ } @media (min-width: 800px) { .homeprodboxes a, .homeprodboxes .dummyitem { width:24%; } /* wider screens: 4 cols, override default flex width for tighter spacing */ } /* WITH CHEVRON BUTTON .homeprodboxes a h2 { background:url('images/butt_homeprod_trans.png') 95% center no-repeat #aaa; padding:10px 50px 10px 10px; color:#fff; margin:0; min-height:4.5rem; flex-grow:1; text-align:center; } */ .homeprodboxes a h2 { background:#aaa; padding:10px 10px 10px 10px; color:#fff; margin:0; min-height:4.5rem; flex-grow:1; text-align:center; } .homeprodboxes a .homeprodimg { border:solid 1px #aaa; margin-top:3px; background-size:contain; background-repeat:no-repeat; background-position:center center; min-height:200px; flex-grow:1; } .homeprodboxes a .homeproddesc { border:solid 1px #aaa; margin-top:3px; text-align:center; padding:15px 30px; background:#eee; color:#444; min-height:4.5rem; flex-grow:1; } .homeprodboxes a:hover h2, .homeprodboxes a:hover .homeproddesc { background-color:#8b4; } div#breadcrumbs { color:#444; padding-bottom:1.5rem; } div#breadcrumbs a { color:inherit; text-decoration:none; } div#breadcrumbs a:hover { color:#9c2; } /* for news gallery */ .newsgall img { margin-bottom:20px; } /* ======================================== EVENTS TABLE ============================================================= */ table#ev { width:100%; overflow:hidden; border-radius:5px; } /* more corner-radius stuff just for IE :P */ table#ev tr:first-child > *:first-child { border-top-left-radius: 5px; } table#ev tr:first-child > *:last-child { border-top-right-radius: 5px; } table#ev tr:last-child td:first-child { border-bottom-left-radius: 5px; } table#ev tr:last-child td:last-child { border-bottom-right-radius:5px; } table#ev th#tabtitle { background:#58a; /* background:linear-gradient(to bottom, #8cd 10%,#489 50%); */ } table#ev h2 { color:#fff; } table#ev a { color:#089; text-decoration:none; display:block; padding:0 10px; } table#ev td { text-align:left; } table#ev th { background:#7ac; color:#fff; padding:0 10px; text-align:left; } table#ev tr:nth-child(odd) td { background:#ade; } table#ev tr:nth-child(even) td { background:#9cd; } table#ev tr:hover td { background:#58a; } table#ev tr:hover a { color:#fff; } div.monthpanel { overflow:hidden; border-radius:5px; } div.paneltext { background:#58a; color:#fff; padding:8px 10px; font-weight:bold; } div.paneltext a { color:#fff; } div.monthlist { } div.monthlistyear { background:#7ac; color:#fff; padding:0 10px; font-weight:bold; } div.monthlistcurrent { background:#7ac; color:#fff; padding:0 10px; font-weight:bold;} div.monthlist a:nth-child(odd) { background:#ade; } div.monthlist a:nth-child(even) { background:#9cd; } div.monthlist a { color:#089; display:block; padding:0 10px; text-decoration:none; } div.monthlist a:hover { background:#58a; color:#fff; } div#eventsflex div#rcol { padding:0; max-width:none; } @media (min-width: 600px) { /* override default widths for .flex2 items in events table */ div#eventsflex div#lcol { width:70%; } /* override default widths for .flex2 items in events table */ div#eventsflex div#rcol { width:26%; } /* override default widths for .flex2 items in events table */ div.monthpanel { margin-top:0; } } /* ======================================== NEW FOR OPTIMA 2019 ===================================== */ /* ============================= Pre Dec 2024 homepage boxout background colour: e3d93a New: e7e6de ===================== */ .flex2 > #rcol { margin:2rem 0; background:#e7e6de; padding:2rem 4%; border-radius:20px; } @media (min-width: 600px) { .flex2 > #rcol { margin:0; } } #footer { text-align:center; background:#501176; color:white; border-top:solid 2px white; padding:3rem 10%; } #footer a { color:white; text-decoration:none; } @media (max-width: 600px) { #footer > * { padding:0 !important; float:none !important; display:block; margin:0 auto; } } div.choosenav { margin-top:2em; display:flex; } div.choosenav div { width:24%; text-align:center; border:dotted 0px #aaaaaa; border-width:1px 0 0 0; color:#aaaaaa; } div.choosenav div+div { border-left-width:1px; } div.choosenav div span { display:block; padding:1rem 0; } div.choosenav div a { display:block; padding:1rem 0; color:#000000; text-decoration:none !important; } div.choosenav div a:hover { background:#eef; } div.choosenav.cntop { margin:0; padding-bottom:2em; } div.choosenav.cntop div { border-width:0 0 1px 0; } div.choosenav.cntop div+div { border-left-width:1px; } /* ======================================== /NEW FOR OPTIMA 2019 ===================================== */ /* ======================================= NEW FOR JANE POWELL 2019 =================================== */ /* columns for all pages */ div.pageitem { margin:1rem 0; } div#lcol { flex-grow:1; } div#rcol { background:#a79f9f; padding:2rem 3rem; /* max-width:450px; */ border-radius:6px; margin-top:2rem; margin-left:0; } @media (min-width: 600px) { div#rcol { margin-top:0; margin-left:4%; } } div#lcol td img, div#rcol td img { max-width:none; } /* bodge because images are not resized sensibly within table cells */ /* exam times tables */ table#examtable { border-collapse:collapse; border:0; width:100%; } table#examtable th, table#examtable td { border:solid 2px white; padding:4px 10px; font-size:11px; color:#222; } table#examtable th { background-color:#ff8822; } table#examtable td { background-color:#bbccee; text-align:center; } table#examtable td.datecol { background-color:#99aacc; font-style:italic; } /* ======================================= /NEW FOR JANE POWELL 2019 =================================== */ /* ====================================== NEW FOR DATACENTRE PRICING 2019 ============================== */ div.pagingblock { margin-bottom:1rem; text-align:right; } div.pagingblock span.current { display:inline-block; text-decoration:none; border-radius:2px; background:black; color:white; margin:0 2px; padding:0 6px; line-height:1.2; } div.pagingblock a { display:inline-block; text-decoration:none; border-radius:2px; background:white; color:black; margin:0 2px; padding:0 6px; line-height:1.2; } div.pagingblock a:hover { background:black; color:white; } div#pressmed h1 { color:#447; } div#pressmed a { display:block; text-decoration:none; margin-bottom:1rem; padding:18px 3%; background:rgba(255,255,255,0.4); line-height:1.4; border-radius:3px; color:#669; } div#pressmed a:hover { background:rgba(255,255,255,0.5); } div#pressmed a h2 { color:#447; margin:0; font-size:1.05rem; display:list-item; list-style-position:inside; list-style-type:square; font-weight:bold; } div#pressmed a h3 { color:#447; margin:0.2rem 0 0 0; font-size:0.9rem; font-weight:normal; font-style:italic; padding-left:1.5rem; } div#priceanal { margin-bottom:2rem; } div#priceanal h1 { color:#F15B14; } div#priceanal a { display:block; text-decoration:none; margin-bottom:1rem; padding:0; background:#F15B14; line-height:1.4; border-radius:3px; color:#fff; } div#priceanal a > div { padding:18px 3%; background:rgba(255,255,255,0); } div#priceanal a > div:hover { background:rgba(255,255,255,0.2); } div#priceanal a h2 { color:#fff; margin:0; font-size:1.05rem; display:list-item; list-style-position:inside; list-style-type:square; font-weight:bold; } div#priceanal a h3 { color:#fff; margin:0.2rem 0 0 0; font-size:0.9rem; font-weight:normal; font-style:italic; padding-left:1.5rem; } @media (min-width: 450px) { div#pressmed a h3 { float:right; } } #logdetsbar { line-height:2; padding:5px 10px; border-radius:4px; background:rgba(255,255,255,0.5); margin-bottom:1.4rem; } #tplogoutbutt { float:right; margin:0; } /* ====================================== /NEW FOR DATACENTRE PRICING 2019 ============================== */