/* Copyright 2015-2020 - All rights reserved*/

/* Pocket device first design */

/* CORP COLORS */

.IS_RED {
/* was color:#f50402; */
color:#EB0019;
color:lab(52 89 77);
}

.IS_RED_Dark {
color:#B30700;
color:lab(39 89 77);
}

/* not used currently (2024) */
.IS_RED_Darker {
color:#A80009;
color:lab(31 89 77);
}

.IS_LIME {
color:#d9df20;
}

.dark_lime {
color:#bfbf00;
}

.provisional_green {
color:#76c630;
}

.tan {
color:#EA9E2D;
}

.tan2 {
color:#E96913;
}
.tan3 {
color:#D7620D;
}

.salmon1 {
color:#FEA99E;
}
.salmon2 {
color:#FD7062;
}

/* EOF CORP COLORS */




BODY {
background-color:#999;
color:#000;
margin:0;
padding:0;
word-wrap:break-word;		/* Hope doesnt break anything - maybe best to set in context*/

/* Stop mobile browsers hijacking text size */
/* Should really be set to "none" but webkit browsers have a bug...*/
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
text-size-adjust:100%;

font-family:"filson-soft", sans-serif;

/* Careful of defining too much - line-height etc can have knock-on effect*/
font-size:14px;
line-height:19px;
font-weight:300;
font-style:normal;
}




/*HTML5 bit for older browsers*/
header, footer, nav, section, aside, article, figure, figcaption {
display:block;
}

section	{
padding:0;
}

figure {
padding:0;
margin:10px 0;
}
figcaption {
padding:10px 0;
margin:0;
}

p {
margin:0;
padding:0;
}

ul, li {
list-style:none;
padding:0;
margin:0;
}

strong, b {
font-weight:700;
}




/* display:block;width:100% is a good way to auto-fit all images into their containers - good if used with figures or divs */
/* However if images are used outside of containers they will fill entire page etc */
img {
display:block;
width:100%;
border-style:none;
}


/* DEFAULT LINK STYLE FOR SITE */
/* Override locally for special cases - eg footer links */
/* 2025 update - underline styles can now be customised with offset, thickness, paint mode etc 
/* (using text-underline-offset: and text-decoration-thickness: etc) */
/* So using a bottom border hack is now officially obsolete. */
a {
font-weight:700;
text-decoration:none;
}

/* Ensure non-font style stuff only affects text in a <p> tag - otherwise would affect divs, images etc */
p a:link {
color:#EB0019;
color:lab(52 89 77);
text-decoration-line:underline;
text-decoration-style:solid;
text-underline-offset:3px;
text-decoration-thickness:1px;
}

p a:hover {
color:#B30700;
color:lab(39 89 77);
text-decoration:none;
}

p button, p a.button {
color:#fff;
}
    
a:link {
color:#000;
}

a:visited {
color:#000;
}

a:hover {
color:#333;
}

a:active {
color:#000;
}




/* BODY SKELETON */
/* This is all optimised for mobile first. Desktop is expanded in the responsive section */

/* GRID RULE */
/* Where possible, all margins and gaps should be the same (eg 8px) for consistency */
/* If necessary, this value can be made responsive. The point is we should always use a consistent measure*/

#ultra-wrapper {
margin:0 auto;
padding:0;
overflow:hidden;
background-color:#400;
}


/* Used if sections have their own sub-headers (eg on GC) (was #main-titlebar) */
#section_header	{
height:auto;		/* Height currently depends on content for easier responsiveness */
margin:0;
}


/* Was attached to section but more flexible with article */
/* Ultimately would be good to switch over to html5 semantic element 'main' */
/* Now experimenting with keeping margin/padding zero here and specifying on the elements inside (i.e inside header and bubble) */
/* This give more flexibility to change the internals (or add other bits) while keeping the main-page dimensions static */
#main-page {
position:relative;	/* Enforce relative so we can add absolute stuff (eg sidebars) which will stick to main-page and move with it */
padding:0;
margin:0;
left:0;

}

/* The article title - for design flexibility this sits outside the text bubble */
/* (But it can also be used inside the bubble if needed with a few tweaks to padding and margins) */
/* By default (outside the text-bubble) it stretches edge-to-edge, but by applying the .wequalizer  */
/* class to it (or its contents) it can easily align with the page content width instead. */
#main-page header {
padding-top:10px;
padding-bottom:1px;

}


.text-bubble {
margin:0;
padding-top:10px;
padding-bottom:20px;
}


/* Page coda - an area for global page bits such as share icons, link to top etc */
/* Will usually be styled as if part of the main page (eg text-bubble) and share the same margins etc */
#coda {
margin:0;
padding-top:10px;
padding-bottom:10px;

}


footer {
margin:0;
padding:0;
padding-top:20px;
padding-bottom:20px;
color:#000;
background-color:#f8f8f8;
min-height:50px;
}

footer a:link, footer a:visited {
font-weight:normal;
color:#444;
text-decoration-line: underline;
text-decoration-style: solid;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
footer a:hover {
color:#666;
text-decoration:none;
}

/* Often the footer will have a list of links */
footer ul {
}

footer li {
margin:12px 0;
}

/* IMPORTANT PAGE WIDTH SPECIFICATION */
/* This is where the content width and horizontal margin stuff is specified. */
/* Update Jan 2020.
/* We no longer use ultra-wrapper to size the page into a horrible boxy layout. */
/* Instead the important sub-sections are full-width and we constrain their content width using styles below. */
/* This allows widescreen sites with backgrounds extending to the full width of the screen */
/* This approach is also much more flexible than shoving everything into the ultra-wrapper box.*/
/* At mobile sizes the page width fits the current screen size (via width:auto) with minimal margins (via padding) */
/* At larger sizes we change to a fixed width page which floats in the centre (via margin:auto) */
/* But now we can change to fixed or variable page sizes as needed. */

/* Also available as a class: WEQUALIZER! */
/* We might also need to apply these width-constraining values to other elements on an ad-hoc basis */
/* For example there might be a site-specific nav bar or extra header or one-off panel. */
/* For these situations we have .wequalizer - a width-equalizer class */
/* This constrains the width (and sets the padding) of any otherwise full-width edge-to-edge block */
/* This can be applied to a block such as tabs-area to constrain it to the page content width values */
/* - or we can use it on a dummy div within such as block so the block is widescreen but its content matches the page.*/
/* This hopefully gives the flexibility we need while being consistent across sites.*/
/* Just be sure to set up any such elements without any horizontal values to avoid cascading clashes - */
/* .wequalizer is a class which means it takes lower priority than IDs or more specific targeting, so check it works */
#masthead, .text-bubble, #coda, .wequalizer {
margin-left:auto;
margin-right:auto;
padding-left:10px;
padding-right:10px;
width:auto;		/* Page content width (if not auto, must be at least min-width minus padding) */
}


/* EOF BODY SKELETON */


/* Applied to divs that are used as a shim to space out sections when scrollink smooth scrolling is used. */
.week_divider {
height:30px;
}


#main-page  .home-blah {
background-color:#fff;
box-shadow:0px 0px 4px 0px rgba(0,0,0,0.6);
}


.text-bubble.paper {
margin-top:16px;		/* If there's a white background, prevent it from crashing against the home-blah header */
/* This is a bit horrible - home-blah was a kludge in the first place. */
}




/* MASTHEAD AND NAV */

#masthead-wrapper {
position:relative;	/* Needed for absolutely positioned burger */
z-index:6000;
width:100%;
background-color:#202;
}


/* Burger dropdown is now within masthead-wrapper instead of masthead which no longer needs to expand to accommodate it */
/* Instead the masthead-wrapper expands */


#masthead {
position:relative;	/* Needed for absolutely positioned home URL box */
height:80px;		/* Specifying height - for proportional height see previous versions */
}


/* Main site logo and link to home page */
#home {
position:absolute;
display:inline-block;

background-size:1440px 720px;

/* LOCALHOST L@H */
background-image:url("https://sideevents.guide/svg-elements-2026-07.svg");		/* LIVE SITE */
background-repeat:no-repeat;

z-index:8999;		/* Must be under #burger-drop on mobile! */
}

/* Default full size logo - can be removed or added via js */
#home.full_logo {
margin-top:0px;
margin-left:-5px; /* Slight indent to visually compensate for ragged logo on larger screens */
width:250px;
height:80px;
background-position:-20px -386px;
}

/* Burger menu */

#burger {		/* this is a button */
position:absolute;	/* via masthead position:relative */
top:15px;
right:10px;
z-index:9010;		/* Must be on top of everything including #burger-drop menu */
}


#burger-drop {
z-index:9000;		/* Must be on top of everything (odd stacking order for our masthead elements) */
-webkit-transition:max-height 0.3s;
transition:max-height 0.3s;		/* Transition time for drop menu to close */
box-shadow:0px 2px 4px 0px rgba(0,0,0,0.6);
}

/* Transition time for burger menu to open */
#burger-drop.dropper_open {
-webkit-transition:max-height 1.1s !important;
transition:max-height 1.1s !important;
}

#burger-drop ul {
display:block;
margin:60px 0 0 0;	/* Space for burger icon */
padding:0;
background-color:#303;
}
#burger-drop li {
padding-top:5px;	/* Slight space between links for touchability */
padding-bottom:5px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
-webkit-transition:background-color 0.3s;
transition:background-color 0.3s;
}
#burger-drop a {
display:block;
padding:10px;		/* Give links a bit more size for touchability */
color:#fff;
font-size:16px;
line-height:16px;
font-weight:500;
}
#burger-drop li:hover {
background-color:#404;
color:#fff;
-webkit-transition:background-color 0.1s;
transition:background-color 0.1s;
}

/* EOF burger menu */



/* Site specific masthead/nav bits */




#tabs-area {
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:0;
min-height:30px;
background-color:#B30700;
background-color:lab(39 89 77);
overflow:hidden;
font-size:12px;
box-shadow:0px 0px 6px 0px rgba(0,0,0,0.3);
}



#tabs-area ul {
display:block;
margin:5px 0;
padding:0;
}

#tabs-area li {
margin:0;
margin-right:10px;
padding:0;
font-size:16px;
line-height:16px;
display:inline-block;
-webkit-transition:background-color 0.3s;
transition:background-color 0.3s;
}

#tabs-area a {
display:block;	/* Link fills the list element */
margin:0;
padding:5px 0;
color:#fff;
font-weight:400;
border-bottom:1px solid transparent;
}
#tabs-area a:hover {
border-bottom:1px solid #fff;
}

#tabs-area button, #tabs-area .button {
color:#fff;
margin:0px 0px;
padding:0 12px;
font-weight:600;
font-size:16px;
height:100%;		/* Enforce buttons to be same height as bar - this looks better */
}






/* Site specific drop panels powered by .dropper class */
/* Careful - these panels should all be zero height (inc borders) to prevent visual glitches */


/* Location picker ---------- */

#location_picker_btn {
z-index:10000;
position:absolute;
height:40px;
width:27px;
margin:0px 0px 0px 0px;
padding:0px 0px;
border-radius:0px;
line-height:12px;
background-color:#d9df20;
}

#location_picker_btn:hover{
background-color:#bfbf00;
}

#location_picker_btn.dropper_open {
background-color:transparent;
height:40px;
}
#location_picker_btn.dropper_open:hover {
background-color:#d9df20;
}

/* Change the picker icon to a close icon */
/* This is possibly more elegant than adding and removing icon elements */
#location_picker_btn.dropper_open span {
background-position:-244px -148px;
width:20px;
height:20px;
}


#location_picker_area {
background-color:rgba(217, 223, 32, 0.1);
}


#location_picker_panel {
padding-top:0;
padding-bottom:0;
padding-left:0px;
}
#location_picker_panel.dropper {
padding-left:40px;  /* space for button on the left if there's a dropper */
}

/* Transition time for panel to close */
#location_picker_panel {
-webkit-transition:max-height 0.3s !important;
transition:max-height 0.3s !important;
}

/* Transition time for panel to open */
#location_picker_panel.dropper_open {
-webkit-transition:max-height 3.1s !important;
transition:max-height 3.1s !important;
}

#location_picker_panel ul {
display:block;
margin:0;
padding:6px 0px 0px 0;  /* Juggling vertical gap between li items and padding of the ul */
}

#location_picker_panel li {
display:inline-block;
margin:0 4px 6px 0;   /* Small right-hand space between links for touchability (includes CR whitespace)*/
padding:0;        /* Links completely fill the li */
font-size:15px;
line-height:10px;
}

#location_picker_panel li a {
display:block;  /* Link completely fills li with no margin */
margin:0;
padding:8px 5px;		/* Pad out the link a bit for touchability */
color:#000;
font-weight:500;
background-color:#fff;
border:1px solid #000;
-webkit-transition:background-color 0.6s;
transition:background-color 0.6s;
}
#location_picker_panel li a:hover {
background-color:#d9df20;
-webkit-transition:background-color 0.1s;
transition:background-color 0.1s;
}

#location_picker_panel p {
padding:15px 0px 5px 5px;
}

/* Hide the little intro text on smaller screens */
#location_picker_panel li:first-child {
display:none;
}

/* Just a rule dividing masthead and location picker bar */
/* This is a cheat to avoid issues tangling with wequalizer and dropper height */
#location_picker_divider {
height:1px;
background-color:#000;
}



/* Share page drop panel ---------- */

/* Transition time for panel to open */
#sharing_panel {
-webkit-transition:max-height 0.3s !important;
transition:max-height 0.3s !important;
margin:5px 5px;
padding:0 10px;
background-color:#e8e8e8;
border-radius:5px;
}
/* Transition time for panel to open */
#sharing_panel.dropper_open {
-webkit-transition:max-height 1.5s !important;
transition:max-height 1.5s !important;
}

#sharing_panel H4 {
margin:15px 0;
font-size:16px;
}

/* EOF site specific panels */


#header-hero {
position:relative;
height:100px;
background-repeat:no-repeat;
background-size:cover;
background-position:top center;
}

/* Text displayed over header hero image */
#header-hero-text-generic, #header-hero-text-location {
display:inline-block;
margin-left:0;
height:33px;  /* 40 px total */
padding:7px 20px 0 15px;
overflow:hidden;
}
#header-hero-text-generic H1, #header-hero-text-location H1 {
margin:0;
padding:0;
/* Metronic is the nearest we got to Soho */
/* For now just keeping this font for big title stuff - it's ugly if overused */
font-family:"metronic-slab", serif;
font-weight:700;  /* Metronic has 300 400 700 900 */
  
font-size:22px;
line-height:22px;
color:#fff;
text-shadow:0px 0px 10px rgba(0,0,0,0.5);
}

#header-hero-text-generic {
background-color:rgba(245, 2, 2, 0.6);
}


/* Text displayed over header hero image - location sections */
#header-hero-text-location {
padding-left:40px;
background-color:rgba(191, 191, 0, 0.6);
}


/* EOF site specific masthead/nav bits */

/* EOF MASTHEAD AND NAV */



/* GLOBAL FORMS STUFF*/
/* Form reset */
form, fieldset, legend, input, textarea, select, option, label, button {
margin:0;
padding:0;
border:0 none;
border-collapse:collapse;
border-spacing:0;
border-radius:0;		/* iOS (and poss others) adds rounded corners */
font-family:inherit;
font-size:inherit;
font-weight:inherit;
background-color:transparent;	/* added due to button default */
text-decoration:none;
}

/* Consider using -moz-appearance / -webkit-appearance for further browser style reset stuff */

/* Remove unsightly outlines from various browsers (Mac Safari, Chrome, Android) */
/* WAIT! These are important for accessibility - they show keyboard users where they are while they move around the page */
/* Do NOT remove - instead restyle them */
input:focus, select:focus, textarea:focus, button:focus, a:focus {
/* outline:none !important; */
}
input:active, select:active, textarea:active, button:active, a:active {
/* outline:none !important; */
}

/* Kill FF specific padding - alternative would be to add padding to the anchor buttons so they match */
button::-moz-focus-inner {
padding:0;
border:0;
}

/* Mobile version of form needs to be pretty simple */
form {
padding:0;
}

input, textarea, select {
display:block;
width:100%;
margin-top:5px;
margin-bottom:5px;
padding:8px 5px;
background-color:#eee;
color:#000;
font-size:16px;
line-height:20px;
border:2px solid #aaa;
/*  Neat css3 solution to bust box with 100% width + padding */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
transition:border-color 0.0s;
}

/* Undo the 100% width for these elements */
input[type="radio"],input[type="checkbox"] {
width:auto;
display:inline;
}

input:hover, textarea:hover, select:hover {
border:2px solid #666;
transition:border-color 0.0s;
}
input:focus, textarea:focus, select:focus {
border:2px solid #000;
background-color:#fff;
}

/* Slightly quirky placeholder pseudo element*/
::placeholder {
color:#aaa;
opacity:1;
}
input:focus::placeholder, textarea:focus::placeholder {
opacity:0;  /* hide the placeholder text when the box has focus */
}
::-ms-input-placeholder { /* MS Edge */
color:#aaa;
}

label {
display:block;
margin-top:10px;
}


/* INPUT RANGE SLIDER */
/* A pain because it requires a full set of browser-specific selectors for both track and thumb */
/* Basic CSS here cribbed from https://tippingpoint.dev/style-range-input-css */
/* Method: completely override default appearance and create entirely new ones */
/* There are only two objects: the 'thumb' (draggable button) and the 'track' (slide area) */
/* Unlike other solutions, the tippingpoint one doesn't style the actual track but the range object itself */
/* This saves having to do the cross-browser styling for the track */
/* Note: sliders can be made vertical using transform! */

input[type="range"] {
-webkit-appearance:none;
appearance:none;
margin:20px 0;
padding:0;
width:100%;
height:10px;   /* Used as the height of the track */
border-radius:5px;
border:none;
background:#ccc;   /* Neutral background of track */
background-image:linear-gradient(#f50402, #f50402);  /* Active area of track - size stretched via js (clever!) */
background-size:50% 100%;   /* Default to midway */
background-repeat:no-repeat;
cursor: ew-resize;
}

/* input[type="range"]:focus {
box-shadow:0 0 3px 1px #4b81dd;
outline:none;
} */

/* Cross-browser styles for Thumb */
input[type="range"]::-moz-range-thumb {
-webkit-appearance:none;
appearance:none;
height:26px;
width:26px;
border-radius:50%;
border:3px solid #EB0019;
border:3px solid lab(52 89 77);
background:#fff;
cursor:ew-resize;
box-shadow:0 1px 2px 0 rgba(0,0,0,0.5);
transition:background .3s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance:none;
height:26px;
width:26px;
border-radius:50%;
border:3px solid #EB0019;
border:3px solid lab(52 89 77);
background:#fff;
cursor:ew-resize;
box-shadow:0 1px 2px 0 rgba(0,0,0,0.5);
transition:background .3s ease-in-out;
}
input[type="range"]::-ms-thumb {
-webkit-appearance:none;
appearance:none;
height:26px;
width:26px;
border-radius:50%;
border:3px solid #EB0019;
border:3px solid lab(52 89 77);
background:#fff;
cursor:ew-resize;
box-shadow:0 1px 2px 0 rgba(0,0,0,0.5);
transition:background .3s ease-in-out;
}

/* Cross-browser styles for Thumb:hover */
input[type="range"]::-moz-range-thumb:hover {
box-shadow:0 1px 3px 0 rgba(0,0,0,0.7);
}
input[type="range"]::-webkit-slider-thumb:hover {
box-shadow:0 1px 3px 0 rgba(0,0,0,0.7);
}
input[type="range"]::-ms-thumb:hover {
box-shadow:0 1px 3px 0 rgba(0,0,0,0.7);
}

/* Cross-browser styles for Track */
input[type=range]::-moz-range-track {
-webkit-appearance:none;
appearance:none;
box-shadow:none;
border:none;
background:transparent;
}
input[type=range]::-webkit-slider-runnable-track  {
-webkit-appearance:none;
box-shadow:none;
border:none;
background:transparent;
}
input[type="range"]::-ms-track {
-webkit-appearance:none;
appearance:none;
box-shadow:none;
border:none;
background:transparent;
}

/* EOF input range slider */


/* BUTTONS AND CLICKABLES
1) Form buttons - these can be targeted easily with "form button" - hopefully without clash if mixed butts
2) Anchor button - for links that we want to look like buttons
3) UI buttons - icon clickables. Targeted with "ui"
4) UI anchors - for links that we want to look like icons

Can add icons within buttons (using spans I guess)

DEFAULT FOR BUTTONS SHOULD BE FORMY SUBMIT TYPE

*/

button, a.button, #burger-drop a.button {
display:inline-block;
vertical-align:top;
white-space:nowrap; /* Prevent button from splitting in a line wrap */
background-color:#EB0019;
background-color:lab(52 89 77);
cursor:pointer;
color:#fff;
border-radius:5px;
margin:5px 5px 5px 5px;
padding:5px 10px;
font-weight:800;
/*border-radius:10px;*/
font-size:18px;

/* Unlike anchors, button content is vertically centered */
/* Easiest way to make them both equivalent is with line height - make it the height of the button */
line-height:30px;

border:none;
-webkit-transition:background-color 0.3s;
transition:background-color 0.3s;
}

button:hover, a.button:hover, #burger-drop a.button:hover {
background-color:#B30700;
background-color:lab(39 89 77);
-webkit-transition:background-color 0.0s;
transition:background-color 0.0s;
}


/* Icon style button - everything comes from the SVG so no background color or anything here */
button.ui {
padding:0;
margin:0;
background-color:transparent;
}
button.ui:hover {
background-color:transparent;
}


/* Should really have primary and secondary button color schemes - primary (our desired action, eg GO!)*/
/* should be more attractive and clickable while secondary (cancel) should be more boring or unattractive */
/* This lesser_option class makes buttons boring - but is it better to tag the primaries or the secondaries? */
button.lesser_option {
background-color:#aaa;
}
button.lesser_option:hover {
background-color:#888;
}


/* Special case social media link buttons - buttons with only an icon so size adjusted */
/* (Width of icons is controlled at icon level) */
a.button.social {
margin:5px 10px 5px 0;
padding:5px 0 5px 0;
line-height:0;	/* Icons only so no text */
border-radius:0;
border-bottom:none;
/* background-color: By default we use site style but could color them individually (or via the svg) */
-webkit-transition:padding 0.2s;
transition:padding 0.2s;
}
a.button.social:hover {
padding-top:6px;	/* Add a slightly unconvincing button-press effect*/
padding-bottom:4px;
-webkit-transition:padding 0.1s;
transition:padding 0.1s;
}


/* Larger Call To Action buttons */
button.cta, a.button.cta {
margin:20px 10px 10px 10px;
padding:16px 20px;
font-size:26px;
line-height:28px;
border-radius:10px;
-webkit-transition:padding 0.2s;
transition:padding 0.2s;
}
button.cta:hover, a.button.cta:hover {
color:#fff;
background-color:#AD002B;
-webkit-transition:background-color 0.0s;
transition:background-color 0.0s;
}


/* Use to visually disable buttons etc */
.disabled, .disabled:hover {
pointer-events:none;	/* The best way to entirely deactivate stuff */
cursor:not-allowed !important;
opacity:0.5;
}



/* Contact form field */
textarea#comment {
height:100px;
}

textarea.code {
padding-top:6px;
padding-bottom:6px;
min-height:auto;
font-family:monospace;
}

#contact_error_message {
background-color:#f00;
color:#fff;
padding:0 10px;
margin:10px 0;
}

.field_error,.field_error:hover {
border:4px #f00 solid;
padding:3px 0px 3px 3px;
}

.field_error:focus {
border:4px #999 solid;
padding:3px 0px 3px 3px;
}

.field_error_unsanitary {
border:4px #f00 solid;
}

.submit_container {
text-align:center;
}

/* EOF GLOBAL FORM BITS*/




/* SPECIFIC FORM UI BITS */

/* The user control bar is a place to offer navigation, sort and filter options to the user */
/* It's basically just a generic bar for displaying buttons associated with search results */
/* This replaces search_filter_bar, search_sort_bar and search_nav_bar
/* Depending on context, there could be one bar for each kind of control (eg nav, sort) or they could all be combined */
/* If we ever need to distinguish between different bars stylistically we can always add classes such as .nav or .filter */

.user_control_bar {
text-align:center;
}

.user_control_bar button {
font-weight:normal;
font-size:15px;
line-height:20px;
margin:3px 1px;
padding:5px 7px;
}



/* Interactive survey questions */
.question-panel {
margin:20px 0;
padding:20px 20px;
box-shadow:0px 0px 16px 0px rgba(0,0,0,0.3);
border-radius:20px;
background-color:#fff;
}

.question-panel ul {
position:relative;
margin:20px 0;
padding:0;
height:20px;
width:100%;
}

li.lowest, li.text-label, li.highest  {
position:absolute;
display:block;
margin-top:-10px;
font-size:12px;
line-height:13px;

}
li.lowest {
left:0px;
}
li.text-label {
display:block;
width:60%;  /* Prevent text from crashing into side labels (height will change instead) */
padding-left:20%;
padding-right:20%;
text-align:center;
}
li.highest {
right:0px;
}

.button-container {
height:60px;
}
.buttonright {
float:right;
}
/* EOF interactive survey questions */




/* EOF specific form ui bits*/



/* UNIVERSAL BITS */

.flr {
float:right;
margin-left:10px !important;
}

.ctr {
text-align:center;
}


/* Boxes - used mostly for defining button sizes */
/* Can be used with boxinho class to make squares */
/* Mobile device sizes are baseline - may redefine as larger on desktop etc*/

.bx16 {
width:16px;
height:16px;
}
.bx20 {
width:20px;
height:20px;
}
.bx28 {
width:28px;
height:28px;
}
.bx32 {
width:32px;
height:32px;
}
.bx40 {
width:40px;
height:40px;
}

/* New form of bx - aiming for dimensionless rather than rely on pixels */
/* So can make responsive and change size depending on screen size etc */
/* Limit to 3 or 4 sizes - should really label small, medium, large etc - make them x1.5 bigger each time or something  */
/* CURRENTLY NOT USED - CHECK STATUS OF THESE VS BX */
.dx1 {		/* Small - for icons within body text - generally should be same height as font-size  */
width:14px;
height:14px;
}
.dx2 {
width:24px;
height:24px;
}
.dx3 {
width:32px;
height:32px;
}
.dx4 {
width:40px;
height:40px;
}
.dx5 {
width:48px;
height:48px;
}


/* Handy widths - see also .column */
/* feel free to change or delete unused ones */
.w80 {width:80px;}
.w140 {width:140px;}
.w160 {width:160px;}	/* Menu drop size*/
.w180 {width:180px;}
.w200 {width:200px;}
.w210 {width:210px;}
.w220 {width:220px;}
.w240 {width:240px;}
.w260 {width:260px;}
.w280 {width:280px;}
.w320 {width:320px;}
.w340 {width:340px;}
.w360 {width:360px;}
.w400 {width:400px;}
.w450 {width:450px;}
.w500 {width:500px;}
.w560 {width:560px;}
.w600 {width:600px;}
.w640 {width:640px;}
.w700 {width:700px;}



/* Used in conjunction with w--- to make columns*/
/* Local instances may vary*/
.column {
vertical-align:top;	/* ensure inline-block does not align bottom (which is default)*/
display:inline-block;
position:relative;
}



/* Little box for bullet-like use
/* Size/margin modified elsewhere in context or else uses bx sizes*/
.boxinho {
display:inline-block;
padding:0px;
margin:0px 4px 0px 0px;
vertical-align:baseline;	/*Could align with text-top but ascent height varies*/
}

/* new clearfix */
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}



/* GLOBAL BITS OF INTERACTIVE UI - stuff that does stuff  ---------------------------------*/


/* DROPPERS - define a droppable section that can be opened and closed via toggleHeight */
/* If JS unavailable this is disabled via noscript.css */
/* Transition times are customized in the individual elements (eg #burger-menu) */
.dropper {
overflow:hidden;
max-height:0;
clear:both;
}

/* Dropper open state (added by js when button clicked) */
/* The transition time can be customized by using #element_id.dropper_open */
/* (It can also be used as the evil twin version of dropper - starting open instead of closed) */
.dropper_open {
overflow:hidden;
max-height:2200px;
clear:both;
}


/* Switch off the transition via js if needed */
.trans_off {
-webkit-transition:max-height 0s !important;
transition:max-height 0s !important;
}

/* EOF droppers */



/* SHOW/HIDE/FADE */
/* Show/hide/fade/transform classes appended to objects via js */

.show-me {
display:block !important;
}
.hide-me {
display:none !important;
}


/* REMINDER FOR BELOW - NEED TO SPECIFY TRANSITIONS AT BOTH ENDS (eg including neutral state) */
/* This may mean specifying an extra transition on the element's own css (or possibly creating a default transition style?) */

.fade-in {
opacity:1.0 !important;
-webkit-transition:opacity 1.2s !important;
transition:opacity 1.2s !important;
}
.fade-out {
opacity:0.0 !important;
-webkit-transition:opacity 1.5s;
transition:opacity 1.5s;
}

/* A dummy class used to designate targets of a js event listener */
/* But we also use it to ensure the off-screen fade out transition happens instantly */
/* Note we set the initial opacity to 0 via js to prevent invisible stuff if js is not working*/
.onview_fadein {
-webkit-transition:opacity 0s;
transition:opacity 0s;
}



/* CLICKABLE PANEL */

/* Clickable panel div - makes any div into a clickable link */
/* Works by forcing the link anchor within the div into a block that entirely covers its container div */
/* Do not use divs inside this div! Also only use ONE anchor!*/
/* Use overflow:hidden in context for tiles etc*/
/* Height and width can be defined in context (for tiles etc) */
/* To give box padding without jumping background, set background to anchor not div!! */
.clickable-panel {
margin:0px 0px 0px 0px;
width:100%;
height:auto;
}

.clickable-panel a {
position:relative;
top:0px;
left:0px;
display:block;
width:auto;	/* Need to specify some kind of width */
/* xpadding:10px; */	/* Padding must be done here as anchor must fill container */
/* Normally yes but we-re now using box-specific padding... cheating a bit */
color:#000;	/* If necessary override default anchor style*/
border-bottom:none !important; /* See search-result.clickable-panel */
}

.clickable-panel a:hover {
background-color:#BBB;
color:#000;	/* If necessary override default hover style*/
}


/* Dimmer switch overlay */
#dimmer	{
z-index:6000;	/* Must be above all */
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.6;
display:none;
}

/* Modal dialog box used with dimmer */
/* Now solely using dismiss/okay link button to dismiss */
/* Also a class version for site-specific things */
/* We use translate to center the box which can be an arbitary height and width */
#modalbox, .modalbox {
z-index:6100;	/* Must be above dimmer */
position:fixed;
top:50%;				/* Center arbitary-size box (measured from its top left coords) */
left:50%;
transform:translate(-50%,-50%);		/* Shunt up and to the left by half its half */
-ms-transform:translate(-50%,-50%);	/* IE 9 */
-webkit-transform:translate(-50%,-50%);	/* Safari */
width:300px;
padding:10px;
box-shadow:0px 0px 16px 0px rgba(0,0,0,0.3);
background-color:#eee;
border:0px solid #999;
color:#000;
display:none;
}


/* Annoying noscript alert bar */
/* All noscript css is handled via noscript.css */
#noscript-bar, #noscript-nudger {
display:none;
}

/* Even more annoying cookie alert bar */
#cookie-bar {
position:fixed;
bottom:-34px;	/* Hide bottom border (including possible drop shadow) */
z-index:10000;
background-color:#aaa;
border:8px solid #777;
margin:0 8%;
max-height:0;		/* switched on via js */
text-align:center;
overflow:hidden;
font-size:12px;
font-weight:800;
color:#444;
/*border-radius:20px;*/
box-shadow:0px 0px 22px 0px rgba(68,68,68,0.5);	/* #444 */
}

#cookie-bar p {
margin:0px 8px 2px 8px;
}

#cookie-bar button {
/*border-radius:6px;*/
background-color:#777;
color:#444;
margin-bottom:48px;	/* Avoid any browser status bits at bottom of window (plus room for minus bottom) */
padding:0 20px 0 20px;
font-weight:700;
}

#cookie-bar button:hover{
background-color:#666;
}



/* Fallback for clickable button if JS turned off */
/* Stretch noscripted anchor to cover container (normally a span styled as a button)*/
.hover-fallback a {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
display:block;
z-index:9000;
}



.svg-canvas-fallback {	/* div which is displayed if SVG not possible */
background-color:#777;
min-height:100px;
color:#eee;
text-align:center;
}

/* END OF UI BITS */




/* TYPE AND COLUMNS */



/*Dosis:400,200,300,500,600,700,800*/

p {
padding-top:6px;	/* could use margin but lets see */
padding-bottom:6px;	/* could use margin but lets see */
}

i,em {
font-style:italic;
}

sup,sub {
font-size:60%;
}


H1, H2, H3, H4, H5, H6 {
margin:0;
padding:0;
font-style:normal;
letter-spacing:0px;
}


H1 {
font-size:18px;
line-height:20px;
margin-bottom:12px;
}


H2 {
font-size:16px;
line-height:19px;
margin-top:8px;
margin-bottom:8px;
}

H3 {
font-size:14px;
line-height:14px;
margin:30px 0 10px 0;
padding:10px 0 10px 0;;
}


.txt-notes, figcaption {
font-size:14px;
line-height:15px;
}

.txt-small-print {
font-size:12px;
line-height:14px;
}


/* Section headers are an optional part of the framework - used as sub-mastheads eg on GC */
#section_header H1 {
}

#section_header H2 {
}


#main-page header H1 {
}


/* Horizontal rule - to make IE and Moz identical */
hr {
height:1px;
font-size:14px;
border:none;
color:#999;
background-color:#999;
}


/* EOF TYPE AND COLUMNS */



.share {
width:50px;
height:40px;
background-color:#eee;
}
.share:hover {
box-shadow:0px 0px 3px 0px rgba(0,0,0,0.5);	/* #444 */
background-color:#eee;
}




/* PULLOUT PANEL */
/* New for 2020, consolidated all panels into this one */
/* If several panel styles are needed in a site (eg GC), add specific classes to customize */
/* By default this is a full width panel at all sizes, usually with a tint and border */
/* But by adding the class .floatable to the div it can become a floating sized box. */
/* Can also make the panel a clickable link or button using the clickable div class */

.pullout-panel {
display:block;
padding:8px 10px 12px 10px;
margin:10px 0 10px 0;
float:none;
/*border-radius:12px;*/
border:1px solid #888;
background-color:#f8f8f8;
color:#000;
}

.pullout-panel a {
color:#fff;
}

.pullout-panel a:hover {
color:#ddd;
}

.pullout-panel.clickable-panel a:hover {
padding:5px;
margin:-5px;	/* Kludge to offset extra padding */
}

.pullout-panel H1 {
font-size:24px;
line-height:28px;
}

.pullout-panel H2 {
font-size:20px;
line-height:24px;
}

.pullout-panel H3 {
margin:10px 0 10px 0;
padding:0;
font-size:32px;
line-height:33px;
color:#fff;
border:0;
}

/* Default state of floatable panels */
/* Usually at mobile sizes they will behave as standard pullout-panels (i.e. full width)*/
.pullout-panel.floatable {
float:none;
}



/* SITE SPECIFIC STUFF =========================================================== */

#quick_links {
text-align:center;
}
#quick_links a {
display:inline-block;
margin:6px 3px;
padding:0 4px;
font-weight:normal;
font-size:16px;
line-height:20px;   /* otherwise picks up default from body */
color:#fff;
border:1px solid rgba(255,255,255,0.3);
-webkit-transition:border 0.2s;
transition:border 0.2s;
}
#quick_links a:hover {
padding:0 4px;
color:#fff;
border:1px solid rgba(255,255,255,0.8);
-webkit-transition:border 0.0s;
transition:border 0.0s;
}

#events-list {
margin:20px 0;
padding:0;
text-align:center;
}
.event-tiles {
margin:0;
padding:0;
color:#000;
text-align:center;
user-select:none;
-webkit-user-select:none;
}

.event-tiles li {
display:inline-block;
margin:0 0 20px 0;
text-align:left;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
vertical-align:top;
width:100%;
}

/* This anchor is a wrapper for the whole clickable tile */
.event-tiles li a {
display:block;
margin:0;
padding:0;
position:relative;	/* For position:absolute of some contents */
overflow:hidden;
background-color:rgba(255,255,255,0.8);
-webkit-transition:background-color 0.5s;
transition:background-color 0.5s;
}
     
.event-tiles li a:hover {
box-shadow:0px 0px 8px 0px rgba(0,0,0,0.1);
}

/* Targets .event-tiles li a:hover and affects the element following (.go)*/
.event-tiles li a:hover .go {
background-color:rgba(245,4,2,0.9);
-webkit-transition:background-color 0.1s;
transition:background-color 0.1s;
}

.event-tiles li p {
padding:0;
font-size:12px;
line-height:14px;
font-weight:300;
}

.event-list-week {
margin:0;
padding:0;
padding-top:20px;
padding-bottom:20px;
font-size:16px;
line-height:14px;
font-weight:normal;
color:rgba(255,255,255,0.8);
border-top:1px solid rgba(255,255,255,0.4);
}

.event-list-date {
margin:0;
padding:0;
padding-bottom:20px;
font-size:18px;
font-weight:300;
letter-spacing:0.5px;
color:#fff;
}

.event-list-time-bar {
margin:0;
padding:2px;
min-height:20px;
background-color:rgba(0,0,0,0.2);
}


.event-tiles .event-list-time {
margin-top:4px;
font-size:14px;
line-height:14px;
font-weight:700;
color:#fff;
}





.event-tiles .event-list-pic {
position:absolute;	/* Absolute position plus top/bottom:0 forces the element to stretch to the height of its container */
top:inherit;		/* For mobile we specify a height ans only align to the bottom of the tile so the title can be on top */
bottom:0;
width:140px;
height:115px;
overflow:hidden;
-webkit-transition:opacity 0.2s;
transition:opacity 0.2s;
}

.event-tiles img {
width:100%;		/* Force the image dims to stretch to the dimensions of its container */
height:100%;
object-fit:cover;	/* Resize the actual image within its boundary dim to correct aspect ratio (so it never squashes) */
}





.event-tiles .event-list-title {
margin:0;
margin-left:0;
padding:10px 10px;
overflow:hidden;    	/* enforce 3 lines max for title display */
max-height:160px;	/* If the title ever gets taller than this, crop the bugger */
background-color:rgba(255,255,255,1.0);
-webkit-transition:background-color 0.3s;
transition:background-color 0.3s;
}



.event-tiles .event-list-title H2 {
margin:0;
font-size:18px;
line-height:20px;
font-weight:500;
}


.event-list-org-name {
margin:0;
margin-left:140px;
padding:5px 5px;
height:60px;
overflow:hidden;    /* enforce 2 lines max for organiser display */
background-color:rgba(255,255,255,0.5);
}


.event-list-org-name H2 {
font-size:16px;
line-height:16px;
/*height:40px;*/
}

.event-list-venue {
position:relative;
margin:0;
margin-left:140px;
padding:5px 5px;
height:35px;
overflow:hidden;    /* enforce 2 lines max for venue display */
}


.event-tiles .icon-event-venue {
display:none;
}

.event-list-venue p {
position:absolute;	/* Positioning this absolutely so we can vertically align it to the bottom - it looks better */
bottom:5px;
left:5px;
right:25px;
}


.event-tiles .go {
width:25px;
height:25px;
position:relative;
float:right;
margin-top:5px;
margin-right:5px;
background-color:#EB0019;
background-color:lab(52 89 77);
-webkit-transition:background-color 0.5s;
transition:background-color 0.5s;
}



.event-tiles li a:hover {
background-color:rgba(255,255,255,0.7);
-webkit-transition:background-color 0.1s;
transition:background-color 0.1s;
}
.event-tiles li a:hover .event-list-pic {
opacity:0.9;
-webkit-transition:opacity 0.1s;
transition:opacity 0.1s;
}
.event-tiles li a:hover .event-list-title {
background-color:rgba(255,255,255,0.7);
-webkit-transition:background-color 0.1s;
transition:background-color 0.1s;
}
.event-tiles li a:hover .event-list-org-name {
background-color:rgba(255,255,255,0.4);
-webkit-transition:background-color 0.1s;
transition:background-color 0.1s;
}



/* FRONT PAGE HERO TILES */


.hero-tiles {
margin:20px 0;
padding:0;
color:#000;
text-align:center;
user-select:none;
-webkit-user-select:none;
}

.hero-tiles li {
position:relative;
display:inline-block;
overflow:hidden;
margin:0 0 20px 0;
padding-bottom:50%;
text-align:left;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
vertical-align:top;
width:100%;
background-repeat:no-repeat;
background-size:140%;
background-position:top center;
box-shadow:0px 0px 8px 0px rgba(0,0,0,0.3);
-webkit-transition:background-size 0.2s;
transition:background-size 0.2s;
}
.hero-tiles li:hover {
background-size:145%;
-webkit-transition:background-size 0.5s;
transition:background-size 0.5s;
}
/* This anchor is a wrapper for the whole clickable tile */
.hero-tiles li a {
display:block;
margin:0;
padding:0;
position:relative;	/* For position:absolute of some contents */
overflow:hidden;
height:258px;
width:100%;
position:absolute;
background-color:transparent;
}

.hero-tiles li a:hover {
box-shadow:0px 0px 8px 0px rgba(0,0,0,0.1);
}


/* Change .hero-titlebar on hover */
.hero-tiles li:hover .hero-titlebar {
-webkit-transition:background-color 0.5s;
transition:background-color 0.5s;
background-color:rgba(255,255,255,1.0);
}

.hero-titlebar {
margin:0;
padding:3px 0;
box-shadow:0px 0px 8px 0px rgba(0,0,0,0.8);
text-align:center;
background-color:rgba(255,255,255,0.9);
-webkit-transition:background-color 0.2s;
transition:background-color 0.2s;
}


.hero-tiles li p {
padding:0;
font-size:12px;
line-height:14px;
font-weight:300;
}
  

.hero-tiles h1, .hero-tiles h2 {
line-height:auto;
padding:0;
margin:0;
}

.hero-titlebar H2 {
margin:0;
font-size:14px;
line-height:16px;
}

/* EOF HERO TILES*/

/* header and home hero images are at the end of this file */



/* Generic circle - use with bx etc */
.dot {
border-radius:50%;
}


#event-page-details {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color:#fff;
padding:20px;
overflow:hidden;
width:100%;
font-size:18px;
line-height:22px;
}


#event-page-about {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color:#fff;
padding:20px;
width:100%;
overflow:hidden;
font-size:15px;
line-height:20px;
user-select:none;
-webkit-user-select:none;
}


.clear {
clear:both;
}


#googlemap {
width:100%;
height:300px;
background-color:#666;
}

#event-page-title {
}


#events-list h1, #events-list h2 {
line-height:auto;
padding:0;
margin:0;
}
.event-tiles h1, .event-tiles h2 {
line-height:auto;
padding:0;
margin:0;
}

.go-back-bar {
margin-top:0px;
margin-bottom:15px;
}
/* Same or similar to quick links style */
.go-back-bar a:link, .go-back-bar a:visited {
font-weight:normal;
color:#666;
border-bottom:solid #666 1px;
}
.go-back-bar a:hover {
border-bottom:none;
color:#888;
}

/* EOF site specific stuff ======================================================= */



/* ANIMATION STUFF */

/* Customise animate.css (separate file) */
/* This changes all the specified animations globally */
.animate__animated.animate__zoomIn, .animate__animated.animate__zoomOut {
  --animate-duration: 500ms;
  --animate-delay: 0.4s;
}

/* EOF animation stuff */


/* ICONS

/* Responsive sprites technique:*/
/* Use as background image of a sized div and shunt the image up/sideways so we only see this bit. */
/* For use as prortionally scaled masthead see previous versions - this is hopefully depreciated. */

/* IMPORTANT! The svg file needs to have width and height specified or it doesn't work in IE prior to Edge */
/* For the purposes of our sprite setup this doesn't make any difference so is perfectly safe to do */
/* Simply uncheck 'responsive' in the Illustrator svg options and width/height will be added*/
/* In the svg the code is something like this: eg viewBox="0 0 1280 8641" width="1280" height="8641" */

/* Assumption now is that all icons are clickable  - not a single case on GC where they arent! */
/* That being the case, can simplify everything by making the icon class button-like */

/* Icons now come in a limited number of fixed sizes. We no longer use the old bx classes to size them */
/* (Sizing them flexibly with bx would require monkeying around with the background-size - */
/* this is possible but horribly fiddly and also inefficient for the poor browser) */
/* Instead we specify a default size (28px) which covers most cases and then override this for individual icons as needed */
/* Dims are fixed to the coords of the svg graphic - for fixed pixel sizes this is easy to use as seen below */

/*
SVG icon scheme 2019
Based on boxes with dimensions that are multiples of 4px. All rows and columns have a 4px gap between them.
We have a standard Illustrator template with various standard sets of icon sizes and coords (including hover versions)

We have four main icon formats
1) Clickables = icons that can be clicked independently, eg a floating 'close' icon or an 'up to top' icon
2) Big clickables = as above but large, eg burger menu icon, tab icons
3) In-button icons = non-clickable icons inside a clickable button, usually accompanied by text
4) Non-clickable icons = static icons that purely illustrate, more or less like bullet points or special symbols


We try to standardize, so clickables and in-button icons are 32px, big clickables are 40px.
In-button icons should probably behave the same way as the button text when hovered, so we allow a row for these


Hover versions are the next row below normal icons. Use the same x coord and just change the y
(Could use background-position-y which is neater and more readable but is still not 100% browser compatible)
ALERT! For icons inside buttons (or .button links) we must target specifically, eg "button:hover .icon-name"
Best to distinguish in-button icons from standard clickable ones on the svg template

40 PX ICONS (big buttons eg burger menu)

Normal row top: 0px
Hover row top: 44px

left: 0px;
left: 44px;
left: 88px;
left: 132px;
left: 176px;
left: 220px;


28 PX ICONS (mostly normal buttons)

Normal row top: 88px;
Hover row top: 124px;

left: 0px;
left: 36px;
left: 72px;
left: 108px;
left: 144px;
left: 180px;
left: 216px;
left: 252px;
left: 288px;
left: 324px;
left: 360px;
left: 396px;

Depending on site we could have further rows of 32 px boxs - or 24px or even 18 px if needed
*/

.icon-burger,
.icon-to-top,
.icon-indicator-close,
.icon-indicator-down,
.icon-go,
.icon-send,
.icon-search,
.icon-help,
.icon-page-first,
.icon-page-last,
.icon-page-next,
.icon-page-prev,
.icon-revert,
.icon-sort-down,
.icon-sort-up,
.icon-facebook,
.icon-twitter,
.icon-linkedin,
.icon-whatsapp,
.icon-email,        /* from here can be site specific icons */
.icon-event-date,
.icon-event-time,
.icon-event-venue,
.icon-location-indicator-down,
.icon-scroll-up,
.icon-scroll-down,
.icon-scroll-left,
.icon-scroll-right,
.icon-not_used,
.icon-location-picker
{
display:inline-block;
vertical-align:top;

/* LOCALHOST L@H */
background-image:url("https://sideevents.guide/svg-elements-2026-07.svg");		/* LIVE SITE */
background-repeat:no-repeat;
background-size:1440px 720px;	/* height was auto, seems best to specify */
width:20px;			/* mobile first sizes */
height:20px;
}

.icon-burger {
background-position:-176px 0;
width:32px;		/* icon-burger icons are a bit different to the rest */
height:32px;
}
.icon-burger:hover {
background-position:-248px 0px;
}

.icon-burger-close {	/* Attached to burger via js */
/* The script adds this class to the burger id (rather than actually replacing icon-burger with it) */
/* This overrides the backgound-position (hence !important) so no need to include other attributes in this class */
background-position:-212px 0px !important;
}
.icon-burger-close:hover {
background-position:-284px 0px !important;
}


.icon-to-top {
background-position:-320px 0px;
width:28px;
height:28px;
}
.icon-to-top:hover {
background-position:-352px 0px;
}

/* Revert and Go are currently the same size for all devices */
.icon-revert {
background-position:-56px -92px;
width:24px;
height:24px;
}
button:hover .icon-revert, .button:hover .icon-revert {
background-position:-56px -120px;
}

/* Send icon for messages can now be different to the Go icon */
.icon-send {
background-position:-84px -92px;
width:24px;
height:24px;
}
button:hover .icon-send, .button:hover .icon-send {
background-position:-84px -120px;
}

.icon-go {
background-position:-308px -90px;
width:24px;
height:24px;
}
button:hover .icon-go, .button:hover .icon-go {
background-position:-308px -118px;
}


.icon-search {
background-position:-96px -44px;
}
button:hover .icon-search, .button:hover .icon-search {
background-position:-96px -68px;
}


.icon-help {
background-position:-288px -44px;
}
.icon-help:hover {
background-position:-288px -68px;
}


.icon-indicator-down {
background-position:0px -44px;
height:16px;
margin-top:4px;
}
button:hover .icon-indicator-down, a.button:hover .icon-indicator-down {
background-position:0px -68px;
}


/* The icon-indicator-close is probably never actually used on the page */
/* The js version is attached via javascript after the user has opened something */
.icon-indicator-close, .icon-indicator-close-js {
background-position:-24px -44px !important;
}
button:hover .icon-indicator-close, .button:hover .icon-indicator-close, button:hover .icon-indicator-close-js {
background-position:-24px -68px !important;	/* Important as also used by js to override down indicators */
}


/* Page navigation icons */

.icon-page-first {
background-position:-120px -44px;
}
button:hover .icon-page-first, .button:hover .icon-page-first {
background-position:-120px -68px;
}

.icon-page-prev {
background-position:-144px -44px;
}
button:hover .icon-page-prev, .button:hover .icon-page-prev {
background-position:-144px -68px;
}

.icon-page-next {
background-position:-168px -44px;
}
button:hover .icon-page-next, .button:hover .icon-page-next {
background-position:-168px -68px;
}

.icon-page-last {
background-position:-192px -44px;
}
button:hover .icon-page-last, .button:hover .icon-page-last {
background-position:-192px -68px;
}


/* Results filter icons */

.icon-sort-down {
background-position:-216px -44px;
}
button:hover .icon-sort-down, .button:hover .icon-sort-down {
background-position:-216px -68px;
}

.icon-sort-up {
background-position:-240px -44px;
}
button:hover .icon-sort-up, .button:hover .icon-sort-up {
background-position:-240px -68px;
}


/* Social media icons */
.icon-email,.icon-facebook,.icon-linkedin,.icon-twitter,.icon-whatsapp {
width:28px;
height:28px;
margin:0 5px;
}

.icon-email {
}
.icon-email:hover {
}

.icon-facebook {
background-position:0 -212px;
}
.icon-facebook:hover {
background-position:-32px -212px;
}

.icon-linkedin {
background-position:-128px -212px;
}
.icon-linkedin:hover {
background-position:-160px -212px;
}

.icon-twitter {
background-position:-64px -212px;
}
.icon-twitter:hover {
background-position:-96px -212px;
}


/* Social media icons for 'share this' block */
.share-block .icon-facebook {
background-position:-260px -212px;
}
.share-block .icon-facebook:hover {
background-position:-260px -212px;
}
.share-block .icon-email {
background-position:-400px -212px;
}
.share-block .icon-email:hover {
background-position:-400px -212px;
}
.share-block .icon-linkedin {
background-position:-330px -212px;
}
.share-block .icon-linkedin:hover {
background-position:-330px -212px;
}
.share-block .icon-twitter {
background-position:-295px -212px;
}
.share-block .icon-twitter:hover {
background-position:-295px -212px;
}
.share-block .icon-whatsapp {
background-position:-365px -212px;
}
.share-block .icon-whatsapp:hover {
background-position:-365px -212px;
}

.share-block {
line-height:28px;
}

.share-block li {
margin:15px 0;
}
.share-block li:hover {
background-color:#fff;
}

#copy-link-text-field {
background-color:#fff;
}


/* Site specific icons */

.icon-location-picker {
background-position:-400px -300px;
width:30px;
height:40px;
}


.icon-location-indicator-down {
background-position:-216px -148px;
width:20px;
height:20px;
}
button:hover .icon-location-indicator-down {
background-position:-216px -176px;
}

.icon-location-indicator-close, .icon-location-indicator-close-js {
background-position:-244px -148px !important;
width:20px;
height:20px;
}
button:hover .icon-location-indicator-close, .button:hover .icon-location-indicaton-close, button:hover .icon-location-indicator-close-js {
background-position:-244px -176px !important;	/* Important as also used by js to override down indicators */
}



.icon-scroll-up {
background-position:-312px -44px !important;
width:20px;
height:20px;
border:1px solid rgba(255,255,255,0.3);
-webkit-transition:border 0.2s;
transition:border 0.2s;
}
.icon-scroll-up:hover {
border:1px solid rgba(255,255,255,0.8);
-webkit-transition:border 0.0s;
transition:border 0.0s;
}

.icon-event-date {
background-position:-168px -148px;
}

.icon-event-time {
background-position:0px -148px;
width:20px;
height:20px;
margin-top:-4px;
}

.icon-event-venue {
background-position:0px -172px;
width:40px;
height:30px;
margin-top:5px;
margin-left:5px;
}

/* eof icons */



/* ****************************************************************************** */

/* GOOGLEADS */

/* EOF GOOGLEADS */




/*************************************************************************/
/* RESPONSIVE SECTION */
/*************************************************************************/


/* RWD PHABLET */
/* between 415 and 639 */

@media screen and (min-width:415px){

BODY {
font-size:15px;
line-height:20px;
}

H2 {
font-size:18px;
line-height:21px;
}

input, textarea, select {
font-size:18px;
line-height:24px;
}



#masthead, .text-bubble, #coda, .wequalizer {

width:auto;		/* Page content fixed width (if not auto, must be at least min-width minus padding) */
}

/* Show little intro text on larger screens */
#location_picker_panel li:first-child {
display:inline-block;
}



.event-list-date {
font-size:22px;
}



#event-page-details {
}


#event-page-about {
}



} /* EOF PHABLET */



/*************************************************************************/
/* Note iPad always reports width of 768px - can use orientation query to check portrait or not */
/* This shouldnt be an issue as we are using min-width rather than specifics */
/* so anything larger than 768px (whether desktop or iPad in landscape mode) will all be caught */

/* RWD TABLET */
/* between 640 and 799 */
@media screen and (min-width:640px){




#home {
z-index:9001;		/* Must be above #burger-drop on desktop! */
}



#masthead, .text-bubble, #coda, .wequalizer {
padding-left:20px;
padding-right:20px;
width:auto;		/* Page content fixed width (if not auto, must be at least min-width minus padding) */
}

#masthead {
height:90px;
}

#home.full_logo {
margin-top:0px;
margin-left:-3px;
width:275px;
height:90px;
background-position:-20px -484px;
}


H1 {
font-size:22px;
line-height:20px;
}


H2 {
font-size:20px;
line-height:24px;
}

H3 {
font-size:16px;
line-height:16px;
}


form {
padding:0;
margin:0;
}


/* Make this nicer on a non-mobile screen */
#cookie-bar {
width:480px;
margin:0 auto;
left:0;		/* left and right:0 is an extra bit required when auto centering a fixed position div */
right:0;
font-size:16px;
}

#cookie-bar p {
margin:10px 18px 5px 18px;
}


.modalbox {
box-shadow:0px 0px 12px 0px rgba(68,68,68,0.5);	/* #444 */
}



#header-hero {
height:120px;
}

#header-hero-text-generic, #header-hero-text-location {
padding-top:10px;
height:40px;
}
#header-hero-text-generic H1, #header-hero-text-location H1 {
font-size:28px;
line-height:28px;
}

#header-hero-text-location {
padding-left:50px;
}

#location_picker_panel.dropper {
padding-left:50px;  /* space for button on the left if there's a dropper */
}

#location_picker_btn {
height:50px;
width:34px;
}
.icon-location-picker {
background-position:-450px -300px;
height:50px;
width:34px;
}


.event-tiles .event-list-pic {
position:absolute;	/* Absolute position plus top/bottom:0 forces the element to stretch to the height of its container */
top:0;
bottom:0;
height:inherit;	/* Unset height so it stretches to top and bottom of container */
}

.event-tiles .event-list-pic {
width:220px;
}

.event-tiles .event-list-title, .event-list-org-name, .event-list-venue {
margin-left:220px;
}

.event-tiles .event-list-title {
overflow:hidden;    	/* enforce 3 lines max for title display */
max-height:140px;	/* If the title ever gets taller than this, crop the bugger */
}



.event-tiles .event-list-title H2 {
font-size:20px;
line-height:20px;
}


.event-list-org-name {
padding-left:10px;
}


.event-list-org-name H2 {
font-size:16px;
line-height:16px;
}

.event-list-venue {
position:relative;
height:35px;
}

.event-tiles .icon-event-venue {
display:inline-block;
}


.event-list-venue p {
position:absolute;	/* Positioning this absolutely so we can vertically align it to the bottom - it looks better */
bottom:5px;
left:50px;
right:50px;
}

.event-tiles .go {
width:25px;
height:25px;
position:relative;
float:right;
margin-top:5px;
margin-right:5px;
}




.event-tiles .event-list-title H2 {
font-size:22px;
line-height:22px;
}


#googlemap {
width:100%;
height:400px;
}


/* Multiple tiles per row obviously have spaces between them */
/* Without using new flex technique we just add left and right margins to the tiles */
/* and then compensate for surplus margins at the edges of the row by minussing the container margins */
/* This is not perfect as the percentage of the tile width needs to account for the margin widths */
/* which are measured in fixed pixels. 
/* Unlike hero-tiles, this is applied to the entire events-list div as it includes other stuff not just the tiles */
#events-list, .hero-tiles {
margin-left:-5px;
margin-right:-5px;
text-align:left;
}

#events-list {
text-align:left;
}

.hero-tiles li {
width:46.80%;
height:200px;
margin:0 5px 20px 5px;
padding-bottom:0;
}

.hero-titlebar {
padding:5px 0;
}

.hero-titlebar H2 {
font-size:16px;
line-height:18px;
}



/* EXPAND BURGER MENU FOR NON-MOBILE SCREENS */
/* The expanded menu list instantly replaces the burger icon and drop-down menu */
/* We set the menu height using min-height instead of max-height to avoid collision with mobile styles */
/* Otherwise the transitions on mobile affect the burger-drop on desktop sizes */
/* Handily, min-height takes precedence over max-height so we just side-step the max-height transition */

#burger {
display:none;
}


#burger-drop {
position:absolute;
top:0;
left:auto;
width:100%;
min-height:55px;	/* Set height with min-height to avoid clash with max-height that mobile styles use */
background-color:transparent;
box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0);
    
}


/* On mobile this is a positioned inline element within the burger-drop bar */
/* Seems better to keep the burger-drop as a full-width bar (unless it clashes with anything?) */
#burger-drop ul {
position:absolute;
display:inline;
margin:0;
padding:0;
padding-top:12px;
padding-bottom:4px;
padding-right:10px;
right:0;
border-bottom:none;
background-color:transparent;

}
#burger-drop li {
display:inline;
padding:0;
margin:0;
padding-top:4px;	/* Slight space between links for touchability */
padding-bottom:4px;

border-top:none;
font-size:20px;
line-height:40px;	/* Ensure (non-mobile) menu links are vertically centered (to line up with button) */
border-bottom:none;
}
#burger-drop a {
display:inline;
color:#fff;
margin-left:5px;
margin-right:5px;
padding-left:0px;
padding-right:0px;
background-color:transparent;
-webkit-transition:color 0.5s;
transition:color 0.5s;
}
#burger-drop a:hover {
color:#666;
background-color:transparent;
-webkit-transition:color 0.1s;
transition:color 0.1s;
}
#burger-drop a.button:hover {
color:#fff;
}
#burger-drop li:hover {
background-color:transparent;
}


/* Ensure the drop-down menu is not present on desktop sizes. */
/* Otherwise it would still be present if the user clicked the burger and then enlarged the window. */
/* We use max-height as per mobile styles which doesn't clash with the min-height (see note above)*/
/* It might be better to reset the burger drop menu completely if the window resizes? (requiring js) */
#burger-drop.dropper_open {
max-height:0;
-webkit-transition:max-height 0s !important;
transition:max-height 0s !important;
}


#burger-drop a.button {
margin:5px 5px 5px 5px;
padding:2px 10px;

font-size:16px;

line-height:30px;

}


/* EOF burger menu */


} /* EOF TABLET */




/*************************************************************************/

/* RWD NETBOOK (or larger tablet???)*/
/* Between 800 and 1023 */
/* This is a variable width version of the laptop size for better intermediate use */
@media screen and (min-width:800px){

BODY {
font-size:16px;
line-height:21px;
}


#masthead, .text-bubble, #coda, .wequalizer {
padding-left:20px;
padding-right:20px;
width:764px;
}

.text-bubble {
padding-top:20px;
}


#main-page header {
padding-top:30px;
}


/* Jumps from a container-filling box to a floaty right-bar style pullout box*/
.pullout-panel.floatable {
width:220px;
margin:20px 0px 12px 10px;	/* Align right*/
float:right;
}


.user_control_bar button {
font-size:15px;
line-height:25px;
margin:5px 5px;
padding:5px 10px;
}


/* Burger icons - desktop size */


/* Page navigation icons - desktop */

.icon-page-first {
background-position:-140px -92px;
width:24px;
height:24px;
}
button:hover .icon-page-first, .button:hover .icon-page-first {
background-position:-140px -120px;
}

.icon-page-prev {
background-position:-168px -92px;
width:24px;
height:24px;
}
button:hover .icon-page-prev, .button:hover .icon-page-prev {
background-position:-168px -120px;
}

.icon-page-next {
background-position:-196px -92px;
width:24px;
height:24px;
}
button:hover .icon-page-next, .button:hover .icon-page-next {
background-position:-196px -120px;
}

.icon-page-last {
background-position:-224px -92px;
width:24px;
height:24px;
}
button:hover .icon-page-last, .button:hover .icon-page-last {
background-position:-224px -120px;
}


/* Results filter icons - desktop */

.icon-sort-down {
background-position:-252px -92px;
width:24px;
height:24px;
}
button:hover .icon-sort-down, .button:hover .icon-sort-down {
background-position:-252px -120px;
}

.icon-sort-up {
background-position:-280px -92px;
width:24px;
height:24px;
}
button:hover .icon-sort-up, .button:hover .icon-sort-up {
background-position:-280px -120px;
}


.event-tiles .event-list-pic {
width:280px;
}

.event-tiles .event-list-title, .event-list-org-name, .event-list-venue {
margin-left:280px;
}





.event-tiles .event-list-title H2 {
font-size:24px;
line-height:24px;
}

#event-page-about {
margin-left:52%;
width:47%;
}

#event-page-details {
width:51%;
float:left;
}

} /* EOF NETBOOK */




/*************************************************************************/

/* RWD LAPTOP * Fixed size */
/* Between 1024 and 1279 */
@media screen and (min-width:1024px){


#masthead, .text-bubble, #coda, .wequalizer {
padding-left:40px;
padding-right:40px;
width:804px;		/* Page content fixed width (if not auto, must be at least min-width minus padding) */
}
.text-bubble {
padding-top:20px;
padding-left:20px;
padding-right:20px;
}

#main-page header {
padding-top:30px;
}


footer {
padding-top:30px;
padding-bottom:30px;
}


.event-tiles .event-list-pic {
width:300px;
}

.event-tiles .event-list-title, .event-list-org-name, .event-list-venue {
margin-left:300px;
}



.hero-tiles li {
height:260px;
}

#header-hero {
height:150px;
}

#header-hero-text-generic, #header-hero-text-location {
padding-top:13px;
height:52px;
}
#header-hero-text-generic H1, #header-hero-text-location H1 {
font-size:32px;
line-height:32px;
}

#header-hero-text-location {
padding-left:60px;
}

#location_picker_panel.dropper {
padding-left:60px;  /* space for button on the left if there's a dropper */
}

#location_picker_btn {
height:65px;
width:40px;
}
.icon-location-picker {
background-position:-500px -300px;
height:65px;
width:40px;
}

} /* EOF LAPTOP */




/*************************************************************************/

/* RWD DESKTOP * Fixed size */
/* 1280 upwards*/
@media screen and (min-width:1280px) {



#main-page header {
padding-top:30px;
}

#masthead, .text-bubble, #coda, .wequalizer {

/* Previous width of 1130px was too much, no need to expand further */
}




} /* EOF DESKTOP */




/* TEST AREA */


.event_description {
max-height:500px;
overflow:hidden;
}


.paper {
background-color:#fff;

}



/* EOF IMAGE URLS */