/*
* CSS RESET
*/
input,html,body,div,span,iframe,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,strong,sub,sup,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%}
h1,h2,h3,h4,h5,h6{font-weight:var(--n)}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
table{border-collapse:collapse;border-spacing:0;table-layout:fixed}
blockquote::before,blockquote::after{content:none}
blockquote{quotes:none}
ul{list-style:none}
strong,b{font-weight:var(--b)}
abbr{cursor:help}
button,label,input[type=submit],input[type=button]{cursor:pointer}
textarea{border:1px solid #aaa;border-radius:.1875rem;font-size:100%}
p{margin:0 0 1em}
p>strong{font-weight:var(--b)}
p>em{font-style:italic}
kbd{border-radius:.1875rem;border:1px solid #aaa;box-shadow:0 .0625rem 0 rgba(12,13,14,.2),0 0 0 .125rem #fff inset;min-width:1.5rem;display:inline-block;text-align:center;text-transform:uppercase;color:#222;text-shadow:0 .0625rem 0 #fff;background:#eee;padding:0 .25rem}
.kbd{white-space:nowrap}
pre{font-family:'Courier New',monospace}
textarea:focus,select:focus,input[type=url]:focus,input[type=email]:focus,input[type=date]:focus,input[type=text]:focus,input[type=password]:focus{outline:0}
input[type=radio]:focus,input[type=checkbox]:focus{outline:1px solid #080}
input[type=url],input[type=email],input[type=text],input[type=password],input[type=date]{border-radius:.1875rem;border:1px solid #ccc;background:#fff;padding:.125rem 1rem}
input[type=submit]{-webkit-appearance:none;-moz-appearance:none;appearance:none}
img:-moz-loading{visibility: hidden} /* FIREFOX HACK TO STOP ALT TEXT SHOWING WHILE AN IMAGE IS LOADING */
/* colours etc */
:root {
/* color-scheme: light dark; */
}
:root {--body-bg-color:#fff;--site-bg-filter:opacity(100%);--user-bg-filter:grayscale(.9) contrast(.75) brightness(.6);--article-bg-color:rgba(255,255,255,.92);--jump-tabs-bg-color:rgba(255,255,255,.8);--popout-bg-color:#fff;--tooltip-bg-color:#222;--tooltip-text-color:#f2f2f2;--disabled-text-color:#aaa;--tagging-info-bg-color:#ddf;--default-text-color:rgba(0,0,0,.87);--default-text-color-hover:rgba(0,0,0,.95);--form-text-color:rgba(0,0,0,.87);--default-link-color:#0070c9;--results-table-header-bg-color:rgba(230,230,230,.7);--desaturate-if-dark-mode:1;--list-table-row-border-color:#ccc;--supported-by-bg-color:#343f50;--b:700;--n:400;--n-links:500;--default-button-bg:linear-gradient(#fff,#ddd);--default-button-border:#888;--first-event-color:#900;--dnf-etc:#900;--bib-bg:#fff;--bib-border:#ccc;--admin-edit-bar:#c3e1c3;--notice-bg-color:#fff1a8;--notice-text-color:#111;--moon-color:inherit;--sun-color:gold;--ajax-bg:#f2f2f2;--ajax-text:#555;--subtle-text:#aaa;--icon-color:rgba(0,0,0,.82);--notice-border-color:#444;--msg-info-bg:#def;--msg-error-bg:#edd;--msg-success-bg:#c3e1c3;--msg-warning-bg:#ddd;--msg-info-color:var(--default-text-color);--msg-error-color:var(--default-text-color);--msg-success-color:var(--default-text-color);--msg-warning-color:var(--default-text-color);--headers-color:#eee;--photoCard-stats-bg-color:#333;}
/* html */
html{height:100vh;background:#848484}
/* body element */
body{height:100%;min-width:320px;background:var(--body-bg-color)} /* if someone somehow has smaller than 320px, make them scroll - probably a small browser window rather than a small device */
/* dark/light theme toggle */
#theme-toggle{margin:4px auto;cursor:pointer;color:var(--default-text-color);z-index:5;background:var(--article-bg-color);border-radius:20px;height:40px;width:90px;display:flex;justify-content:space-around;box-shadow:0 0 9px 0 #000;}
#theme-toggle>.icon-sun{color:var(--sun-color);margin-top:-5px}
#theme-toggle>.icon-moon{color:var(--moon-color);margin-top:-5px}
/* if we have dark mode, let's desaturate images */
img{opacity:var(--desaturate-if-dark-mode)}
img:hover{opacity:1}
#topAdvertHolder img{opacity:1!important}
article{border-radius:min(4vw, 36px)}
page-tabs~article{border-radius:0 min(4vw, 36px) min(4vw, 36px) min(4vw, 36px)}
#supported-by{display:none;background:var(--supported-by-bg-color);border:0;box-shadow:0 0 9px 0 #000;}
#supported-by h1{border:0;text-shadow:none;box-shadow:none;color:#99a;font-size:.8rem;font-weight:bold;display:block;margin-bottom:2em;text-align:center}
#supported-by h1::after{content:none}
#supported-by ul{display:flex;flex-wrap:wrap;justify-content:space-around}
#supported-by li{flex:0 0 20%;text-align:center;padding:2% 5%}
#supported-by img{vertical-align:middle}
#supported-by li:first-child{flex:0 0 100%;padding:0}
#supported-by li:first-child img{max-width:15%}
#tog-details-page{display:flex;gap:2em;justify-content:flex-start;flex-wrap:wrap}
#tog-recents{max-width:60em}
#tog-bio{max-width:40em}
#tog-recents>div{display:flex;flex-wrap:wrap}
/*
* BOX-SIZING
*/
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
img{box-sizing:content-box}
#photog-uploaded-holder .svg-icon{width:1.5rem;margin-right:.5rem}
#photog-uploaded-holder .svg-icon.disabled{color:#aaa}
table.list .svg-icon{width:16px}
a.svg-icon{color:var(--icon-color)}
/*
* HTML & BODY ELEMENT
*/
html{overflow-y:scroll}
html,body{position:relative}
/*
* FONT FAMILIES
*/
body,select,input,textarea,button{font-family:system-ui,Roboto,sans-serif!important;font-weight:var(--n)}
/*
* FONT SIZINGS
*/
body{line-height:1.43;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:var(--default-text-color)}
#headers>h1{font-size:clamp(1.2em,3.56vw,2em)}
article h1{font-size:1.3rem}
#headers>#breadcrumbs,#headers>time{font-size:clamp(.8em,1.78vw,1em)}
h2{font-size:1.4rem}
main>h2{font-size:1.5rem}
.caption,.dummycaption{font-size:.8rem;font-weight:var(--n-links)}
.calendar-month>caption{font-size:1.6rem}
i{font-size:.7rem} /* only used for bracketed values on tables */
.list{font-size:.8rem}
.gallery{font-size:.8rem}
/*
* MATERIAL ICONS
*/
.material-icons{line-height:inherit!important;display:inline-block;vertical-align:middle}
a .material-icons{color:var(--default-text-color);font-size:1rem;position:relative;top:-.0625rem}
.material-icons.tooltip{cursor:help}
header .material-icons{color:#fff}
.material-icons{overflow:visible!important;width:auto!important}
/*
* HEADER AND FOOTER
*/
/* 300 as we have dark BG */
header,footer{font-weight:300;background:#121b2a;color:#fff;text-transform:uppercase;margin:0;padding:0;box-shadow:0 .0625rem .1875rem rgba(0,0,0,.68);position:relative;line-height:3rem}
header form .ajax{font-weight:var(--n)}
header a:hover{color:#fff}
/* PROFILE PICS */
/* profile pic 180px at 900px, 90px at 450px, and 20% of viewport inbetween */
body.premium #profilePic{z-index:6;aspect-ratio:1;width:154px;bottom:-12px;left:-25px;position:absolute;overflow:hidden;border-radius:50%;box-shadow:0 0 8px #000,0 0 3px #000;border:5px solid rgba(255,255,255,.92)}
body.premium #profilePic img{width:100%;aspect-ratio:1}
body.premium #headers>h1{margin-left:9rem}
body.premium article>form.ajax-get{margin-top:1em}
body.premium article>#filterForm{margin-top:.5em}
/* image fading */
body.premium main::before{transition:filter .75s}
body.premium main::before{filter:var(--user-bg-filter)}
body.premium main.showBgPhoto::before{opacity:1;filter:grayscale(0) contrast(1) brightness(1)}
/* handle the article etc transitions */
body.premium main :is(#otherriders,article,page-tabs,#headers){transition:opacity 1.2s,transform .8s;transition-delay:0s,.2s;transform-origin:50% 0%}
body.premium main.showBgPhoto :is(#otherriders,article,page-tabs,#headers){opacity:0;transform:scale(0);}
/* link to toggle showing bg photo */
.profile-background-button{z-index:8;text-align:center;cursor:pointer;transition:opacity 1s,top 1s;transition-delay:1s,0s;opacity:0;position:absolute;top:calc(1rem + 6.5rem);left:50%;transform:translateX(-50%);padding:0.3em 1em;border-radius: 1em;font-size: 0.8em;background: rgba(0,0,0,0.5);color:#fff;text-align:center}
.profile-background-button a{color:#fff;text-decoration:underline}
.profile-background-button p:first-child{margin:0;transition:opacity .5s,font-size 1s;transition-delay:.25s,.25s}
.profile-background-button{transition:top 1s;transition-delay:.5s}
.profile-background-button #extraInfo{opacity:0;margin-top:0;font-size:0;transition:opacity .4s,margin-top .4s,font-size .4s;transition-delay:.25s,.25s,.25s}
main.showBgPhoto .profile-background-button #extraInfo{opacity:1;font-size:1em;margin-top:1em}
main.showBgPhoto .profile-background-button p:first-child{opacity:0;font-size:0}
@media (max-width: 720px) {
.profile-background-button{top:calc(1rem + 9rem)}
main.showBgPhoto .profile-background-button{top:50vh!important;cursor:default} /* need to bump it down on narrow screens */
}
/* this is good from 850 to 450 */
@media (max-width: 850px) and (min-width: 450px) {
body.premium #profilePic{left:-25px;bottom:-12px;border-width:4px;width:clamp(90px, 20vw, 154px)}
body.premium #headers>h1{margin-left:clamp(4.75rem, -1.045rem + 20.61vw, 9rem)}
}
/* this is good from 450 down to 320 */
@media (max-width: 450px) {
.profile-background-button{top:calc(.5rem + max(30vw, 7.5rem))}
body.premium #profilePic{left:-25px;bottom:-12px;border-width:3px;width:clamp(90px, 20vw, 154px)}
body.premium #headers>h1{margin-left:4.75rem}
}
/* changes here */
header{position:fixed;top:0;z-index:50000;width:100%;height:6.5rem;display:grid;gap:3em;grid-template-areas:"logo search nav";grid-template-columns:343px minmax(260px, 1fr) auto;align-items:center}
header>#rnrwithintense{grid-area:logo}
header>#searchform{grid-area:search}
header>nav{display:flex;grid-area:nav;justify-content:flex-end}
.target{padding-top:7.5rem;margin-top:-7.5rem} /* for # fragment links */
/* this fixes overlapping header with anchor references */
:target::before{content:'';display:block;height:7.5rem;margin-top:-7.5rem}
header>#rnrwithintense{display:grid;grid-template-areas:"rnr with intense" "tagline tagline tagline";gap:0;grid-auto-columns:24.77% 10.36% 64.84%;grid-auto-rows:65px min-content;width:100%;max-width:343px}
header>#rnrwithintense>a>img{vertical-align:bottom}
header>#rnrwithintense>a>img,header>#rnrwithintense>a>svg,header>#rnrwithintense>#with{width:100%}
header>#rnrwithintense>#logo{grid-area:rnr}
header>#rnrwithintense>#with{grid-area:with;position:relative;left:-1%}
header>#rnrwithintense>#intense{grid-area:intense}
header>#rnrwithintense>a#intense>img{height:100%;width:auto!important;position:relative;top:-5px}
header>#rnrwithintense>#tagline{grid-area:tagline;line-height:1;font-size:clamp(.5rem,1.5vw,.85rem);white-space:nowrap}
header>#searchform{color:#fff}
/* the input box in the ajax search panels */
#sitesearch_s,#compare_s,#s{background:#fff;font-weight:var(--b);border-radius:.1875rem;color:var(--form-text-color);width:100%;max-width:452px;padding:.5rem}
#sitesearch_s::placeholder,#compare_s::placeholder,#s::placeholder{font-weight:700}
header #s{line-height:30px;vertical-align:middle;padding:.25rem 1rem}
#share-button{cursor:pointer;padding:0 .6em}
#mobileMenuLauncher{display:none;width:32px;height:32px;cursor:pointer}
#mobileMenuLauncher svg{width:32px}
/* changes here */
.ajax-get{line-height:1}
nav>ul{gap:0 2em;margin:0 2em 0 0;text-transform:uppercase;white-space:nowrap}
header nav>ul{display:grid;grid-auto-flow:column}
footer nav>ul{display:flex;flex-wrap:wrap}
nav>ul>li>a{color:#fff;text-decoration:none}
footer{padding-bottom:6em}
footer>p,nav{margin-bottom:0}
footer>p{float:left}
footer nav{float:right}
/*
* ROUNDED FORMS
*/
.rounded{width:450px;margin:0 auto}
.rounded>fieldset{width:100%;margin:0 auto}
.rounded h2{margin-bottom:2em;text-align:center;position:relative}
.rounded h2::after{content:'';position:absolute;bottom:-.6em;left:0;width:100%;height:.0625rem;background-image:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.75),rgba(0,0,0,0))}
.rounded input[type=text],.rounded input[type=password],.rounded input[type=email]{background:#f5f5f5;border:1px solid #eee;border-radius:.1875rem;box-shadow:0 0 .1875rem rgba(0,0,0,.3)}
.rounded p>i{display:inline-block;min-width:3rem;text-align:center;background:#121b2a;color:#fff;position:relative;left:.25rem}
.rounded p>i.fontLoaded{width:3rem!important}
.rounded button{line-height:1.7;padding:0 1.25rem}
.rounded button>i{margin-right:.625rem}
.rounded .forgot{float:left}
.rounded .remember{float:right}
.rounded .submit{padding-top:1em;text-align:center}
.rounded h3{margin-bottom:0}
.rounded ul.radios{display:flex}
.rounded ul.radios li{color:#444;position:relative}
.rounded ul.radios li input[type=radio]{position:absolute;visibility:hidden}
.rounded ul.radios li label{display:block;position:relative;padding:.5rem 0 .5rem 2.1875rem;margin-right:1em;cursor:pointer;z-index:1;transition:all .15s linear}
.rounded ul.radios li:hover label{color:var(--default-text-color)}
.rounded ul.radios li .check{display:block;position:absolute;border:2px solid #444;border-radius:100%;height:1.3125rem;width:1.3125rem;top:.8125rem;z-index:0;transition:all .15s linear}
.rounded ul.radios li:hover .check{border:2px solid #000}
.rounded ul.radios li .check::before{display:block;position:absolute;content:'';border-radius:100%;height:.5625rem;width:.5625rem;top:.25rem;left:.25rem;margin:auto;transition:all .15s linear}
.rounded input[type=radio]:checked~.check{border:2px solid #121b2a}
.rounded input[type=radio]:checked~.check::before{background:#121b2a}
.rounded input[type=radio]:checked~label{color:#121b2a}
#tog-settings{width:500px}
#tog-settings fieldset{width:500px}
.floatl select{font-size:1em;margin-left:3em;padding:.875rem;width:calc(100% - 3rem);background:#f5f5f5;border:1px solid #eee;border-radius:.1875rem;box-shadow:0 0 .1875rem rgba(0,0,0,.3)}
/*
* DATA PANELS ON ADVERTISING PAGE
*/
#advertise1,#advertise2{float:left;background:#eee;padding:1em;width:40%;border-radius:7px;margin:2em 5%;max-width:30em}
#advertise1>h2,#advertise2>h2{margin-top:0}
#__support aside{margin:1em 0 1em 1em;padding:0 1em;float:right;width:25em;background:#f5f5f5;border:1px solid #ccc;border-radius:5px}
/*
* ARTICLE
*/
article:nth-of-type(-n+2){clear:both} /* -n+2 means first 3 articles */
article{padding:.6em 2em 2em;background:var(--article-bg-color);border-top:0;clear:left;position:relative}
article>p:first-child:not(.eventpageheader){margin-top:1em}
article::after{content:'';display:table;clear:both}
article,#otherriders{box-shadow:0 3px 5px 0 rgba(0,0,0,.6)}
/*
* PHOTO DISPLAY OVERLAYS
*/
#photo-copyright-notice,#photo-filename{z-index:6;position:absolute;color:#eee;padding:.3125rem .625rem;margin:0}
#photo-copyright-notice>a,#photo-filename{text-shadow:0 0 .5rem #000,0 0 .5rem #000,0 0 .5rem #000,0 0 .5rem #000,0 0 .5rem #000,0 0 .5rem #000,0 0 .5rem #000}
#photo-copyright-notice>a{text-decoration:none!important;border-bottom:1px solid white;color:#ccc!important}
#photo-copyright-notice>a:hover{text-decoration:none!important;color:#fff!important}
#photo-filename{bottom:0;right:0}
#photo-copyright-notice{top:0;left:0}
#photo-copyright-notice a{color:#eee;text-decoration:underline}
#photo-copyright-notice a:hover{color:#fff}
#admincontrols{position:absolute;bottom:0;color:#fff;background:#000;padding:.25rem .5rem;margin:0;text-align:center;z-index:20}
#admincontrols a{color:#ccc}
#admincontrols a:hover{color:#fff}
#noteUnderHeadline{margin:-.45em 0 -.15em;font-style:italic;color:#f60;font-size:1em;font-weight:var(--b)}
#noteUnderHeadline>a,#noteUnderHeadline>a>i{color:#f60!important;text-decoration:none!important}
#noteUnderHeadline>a:hover{text-decoration:underline!important}
/*
* TAGGING PAGE
*/
#__tagging header{top:0;padding:0 1rem}
header>h1{text-shadow:none;float:left;padding-left:1rem;color:#f5f5f5;font-size:1.4em;position:relative;top:-15px}
header>h1>a{text-shadow:none}
#__tagging body{color:#222}
#__tagging footer,#__tagging #headers,#__tagging .aroot,#__tagging .aroot-bottom{display:none}
#__tagging #adminphotoinfo,#__tagging .adminfooterinfo,#__tagging #previewinfo,#__tagging #siteloginlinks,#__tagging #siteupdates,#__tagging #socialbuttons,#__tagging #photocontent>p{display:none}
#__tagging{background:#222;padding:0;overflow:hidden;height:100%}
#__tagging article{box-shadow:none;border:0;background:#222;color:#eee;padding:0;width:100%;margin:5rem 0 0;height:100%}
#__tagging article:not(.showWhenScreenTooSmall){visibility:hidden}
#__tagging main{background:#222;padding:0;margin:0;height:calc(100% - 5rem);min-height:calc(100% - 5rem);z-index:50001} /* z-index bigger than s so the div overlay popup works */
#__tagging main::before{display:none}
#__tagging #tagline{display:none}
#__tagging #tagform{float:none;margin:0 0 1em;z-index:10000}
#__tagging a{color:#6af;text-decoration:none}
#__tagging header a{color:#fff;text-decoration:underline}
#__tagging a:hover{text-decoration:underline}
.delete-link{text-decoration:none!important}
#__tagging #photo{max-width:10%;max-height:10%;transform:scale(10);transform-origin:top left;border:0}
#__tagging div.ajax{top:45px;width:calc(100% + 2px);left:-1px}
#__tagging article{display:flex}
#__tagging article>div{position:relative}
#__tagging .holder{margin-bottom:.5rem}
#holds_photo_to_tag{width:62%;margin-right:2em;overflow:hidden}
#__tagging header>#rnrwithintense{margin-top:-12px}
#__tagging #admincontrols a{color:#ccc;text-decoration:underline}
#__tagging #admincontrols a:hover{color:#fff}
#taggingcontrols{width:calc(38% - 4em);padding:0 2em 2em 0;overflow-y:auto;overflow-x:hidden}
#taggingcontrols h2{margin:1em 0 .25em}
#taggingcontrols h2.tag-title{margin:0}
#taggingcontrols::-webkit-scrollbar{border-radius:.5rem;width:1rem;background-color:#333}
#taggingcontrols::-webkit-scrollbar-track{border-radius:.5rem;-webkit-box-shadow:inset 0 0 .375rem rgba(0,0,0,.3);background-color:#333}
#taggingcontrols::-webkit-scrollbar-thumb{border-radius:.5rem;background-color:#555;border:1px solid #666}
#tagpagehelp{position:absolute;top:0;right:3rem}
#tagpagehelp>a>i{font-size:30px}
#tagpageclose{position:absolute;top:0;right:0;font-size:3.125rem;width:3rem;height:3rem;line-height:3rem;text-align:center}
#tagpageclose>a{text-decoration:none!important}
#keyboard{margin:.5em 0;width:100%}
.forTouchScreensOnly{display:none}
#keyboard .key{display:inline-block;width:31%;height:3vw;line-height:3vw;text-align:center;background:#333;margin:0 3.5% 3.5% 0;border-radius:1em;cursor:pointer}
#keyboard .key.disabled{background:#282828;color:#555;cursor:default}
#keyboard .key:nth-child(3n){margin-right:0}
#keyboard #button_next_untagged{width:100%;margin:0 0 .51em;border:0;color:#fff;padding:0;font-size:1em}
#button_next_untagged>span{font-size:2.5em;position:relative;top:-4px;color:#aaa;padding-left:6px;vertical-align:middle} /* enter key hint */
p.submit button{border:0;background:#e00;color:#fff}
#__tagging article.showWhenScreenTooSmall{display:none;padding:0 4em;text-align:center}
#__tagging .showRotate{font-size:4em;margin-bottom:.25em;visibility:hidden}
@media (min-height:600px) {
#__tagging .showRotate{visibility:visible}
}
/*
* HEADINGS
*/
#headers{z-index:4} /* this is needed for the profile pic transition when viewFullBgPhoto is clicked */
#headers,#headers a{color:var(--headers-color);font-weight:400}
#headers{float:left;max-width:100%;margin:0 0 .25em;text-shadow:0 0 .5rem #000,0 0 .5rem #000}
#headers>h1,#headers>h2{text-shadow:inherit}
#headers>h1{line-height:1.3;margin:.25em 0}
#headers a{text-decoration:underline;text-shadow:inherit}
#headers>h1 span:not(.tog-title):not(.rider-info){font-size:.7em}
#headers>h1 span.tog-title{background:rgba(255,255,255,.4);padding:0 .5em;border-radius:1em;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block;white-space:nowrap;line-height:1.7;height:1.8em;vertical-align:top}
#headers span.bib,.tag-title span.bib{text-shadow:none;border:0;box-shadow:0 0 3px #000}
/*
* PROFILE PICS
*/
h1>a:hover,nav>a:hover{text-shadow:0 0 .5rem #fff;color:#fff}
article h1{text-transform:uppercase;color:var(--default-text-color);margin-bottom:1em;display:inline-block;position:relative;text-shadow:none}
h1,.h1{font-weight:var(--n);font-size:2em;line-height:1;margin-bottom:.5em}
.h1{display:inline-block;margin:0 .25em 0 0}
h1>br{clear:none}
h1 .del{font-size:.4em;font-weight:var(--n);position:relative;top:-.1875rem;color:#666}
h1 .del a{color:#666}
h1 .secondary{font-size:.8em}
h1{text-shadow:#d5d5d5 .0625rem .0625rem .3125rem}
h1 a{text-shadow:#eef .0625rem .0625rem .3125rem}
h1 .title{float:left}
#__series h2,#__results h2{margin-top:2em}
/*
* INPUTS
*/
textarea,input:not([type=file]){padding:.125rem 1rem}
input[type=image]{padding:0}
textarea{padding:1rem}
input:focus{outline:none}
input:not(:placeholder-shown):invalid{border-color:#d00 !important}
/*
* LAYOUT
*/
main{position:relative;padding-top:6.5rem;padding-bottom:1.5rem;min-height:calc(100vh - 3rem)}
.doubleHeightAdvert main{padding-top:calc(6.5rem + 90px)}
main::before{content:url(https://a.rootsandrain.com/img/cdn/frontpage.jpg?2);text-indent:-9999px;overflow:hidden;position:fixed;left:0;right:0;top:6.4rem;filter:var(--site-bg-filter);height:100vh;background:#fff url(https://a.rootsandrain.com/img/cdn/frontpage.jpg?2) 50% 0 no-repeat;filter:brightness(.5);background-size:100%}
main.repaint::before{transform:translateZ(0)}
html article{z-index:1;width:auto}
html main,html footer,html header{padding-left:clamp(2%, 6.7% - 15px,5%);padding-right:clamp(2%, 6.7% - 15px,5%)} /* 2% at 320px, 5% at 900px, scaling inbetween */
html footer{overflow:hidden}
/* beacuse of container's ::before pseudo element (manon photo) all these need position:relative to show up */
#filterForm,#headers,#othereventnames{position:relative}
/*
* PHOTO CARDS
*/
div.photoCard{width:192px;border-radius:15px 15px 15px 15px;background:var(--popout-bg-color);text-align:center;box-shadow:0 0 3px rgba(0,0,0,1);display:flex;flex-direction:column;justify-content:space-between;margin:.75rem;font-size:.8rem}
div.photoCard a{color:var(--default-text-color);font-size:.8rem;text-decoration:none}
div.photoCard:hover{transform:scale(1.05);transform-origin:50% 50%;transition:all .3s cubic-bezier(.2, .8, .4, 1)}
div.photoCard img{width:100%;height:122px;object-fit:cover;margin-bottom:.4em;border-radius:15px 15px 0 0}
div.photoCard img:hover{transform:scale(1.1);transition:all .3s cubic-bezier(.2, .8, .4, 1);}
div.photoCard time{margin:0;display:block;color:var(--default-link-color)}
div.photoCard p{margin:.45em 0;display:block}
div.photoCard h2{margin:0;font-weight:var(--b);font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
div.photoCard .stats{background:var(--photoCard-stats-bg-color);color:#fff;display:flex;border-top:2px solid #666;margin-top:1em;font-size:.7rem;border-radius:0 0 15px 15px}
div.photoCard .stats div{flex:1 1 33.3%;padding:0.5rem .75rem 1rem}
div.photoCard .stats div span{font-size:1.2rem;display:block;margin-bottom:-.3rem}
div.photoCard .stats div:nth-child(2){border:1px solid #666;border-width:0 2px}
#__photographerPage div.photoCard .stats div{flex:1 1 50%;padding:0.5rem .75rem 1rem}
#__photographerPage div.photoCard .stats div:nth-child(2){border:0;border-left:2px solid #666}
div.photoCard::after{box-shadow: 0 0 10px rgba(0,0,0,.5);border-radius:15px;opacity: 0;content:'';transition:all .3s cubic-bezier(.2, .8, .4, 1);width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1}
div.photoCard:hover::after{opacity:1}
/*
* FRONT PAGE
*/
#frontpageflex{
display:inline-grid;gap:3.5em;grid-auto-columns: minmax(200px, 620px) minmax(200px, 1339px); /* grid - show six thumbs by default*/
position:relative;left:50%;transform:translateX(-50%); /* center */
margin:calc(7rem + 94px) 0 0 0; /* 3.5 rem either side of advert + advert height */
grid-template-areas: "results uploads"
"shop shop"
"supported-by supported-by";
}
#samsungwarning{grid-area:results}
#recentresults{grid-area:results}
#untaggedphotos{grid-area:uploads}
#shoppreview{grid-area:shop}
#supported-by{grid-area:supported-by}
@media (max-width:762px) {
/* if it goes small enough, wrap the two boxes */
#frontpageflex{grid-auto-columns:100%;grid-template-areas:"results"
"uploads"
"shop"
"supported-by"}
}
#shoppreview .items{width:100%;max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-around}
#shoppreview .items a{flex-basis:250px;flex-shrink:0;height:250px}
#shoppreview .items a img{transition:all 120ms ease-in-out}
#shoppreview .items a:hover img{transform:scale(1.1)}
#shoppreview .notes{margin:0;width:490px;text-align:right}
/* on home page and event videos page */
.morelink{float:right;clear:both;text-align:right;margin:1em 0 0}
.morelink>a{color:var(--default-text-color);text-decoration:none}
#__home .morelink{text-transform:uppercase}
.dnsetc{position:absolute;writing-mode:vertical-rl;left:19px}
.containsabsolute{position:relative}
.motoIndicator{display:inline-block;border-radius:20%;width:1.1em;height:1.2em;position:relative;top:4px;margin-right:.35em;margin-left:.35em}
/* circle */ .motoIndicator.s1{background-color:#4363d8;border-radius:50%}
/* square */ .motoIndicator.s2{background-color:#aaaaaa}
/* triangle */ .motoIndicator.s3{transform:scale(1.1);border-bottom:1.1em solid #f58231;width:0;height:0;border-left:.55em solid transparent;border-right:.55em solid transparent}
/* slant */ .motoIndicator.s4{background-color:#3cb44b;transform:skew(-20deg,0deg)}
/* slantback */ .motoIndicator.s5{background-color:#666666;transform:skew(20deg,0deg)}
/* circle */ .motoIndicator.s6{background-color:#b00000;border-radius:50%}
/* square */ .motoIndicator.s7{background-color:red}
/* triangle */ .motoIndicator.s8{transform:scale(1.1);border-bottom:1.1em solid purple;width:0;height:0;border-left:.55em solid transparent;border-right:.55em solid transparent}
/* slant */ .motoIndicator.s9{background-color:turquoise;transform:skew(-20deg,0deg)}
/* slantback */ .motoIndicator.s10{background-color:#222222;transform:skew(20deg,0deg)}
.moto-tooltip-title{padding:0.1em 0.3em;border-radius:5px;display:inline-block}
/* circle */ .moto-tooltip-title.s1{background:#4363d8;border-radius:.55em / 50%}
/* square */ .moto-tooltip-title.s2{background:#aaaaaa;color:#000}
/* triangle */ .moto-tooltip-title.s3{background:#f58231;clip-path:polygon(5% 0%,95% 0%,96.25% 8%,100% 95%,98.75% 100%,1.25% 100%,0% 95%,3.75% 8%);padding:0 .6em}
/* slant */ .moto-tooltip-title.s4{background:#3cb44b;transform:skew(-20deg,0deg);margin-left:.15em} .moto-tooltip-title.s4 span{display:inline-block;transform:skew(20deg,0deg)}
/* slantback */ .moto-tooltip-title.s5{background:#666666;transform:skew(20deg,0deg);margin-left:.15em} .moto-tooltip-title.s5 span{display:inline-block;transform:skew(-20deg,0deg)}
/* circle */ .moto-tooltip-title.s6{background:#b00000;border-radius:.55em / 50%}
/* square */ .moto-tooltip-title.s7{background:red;color:#000}
/* triangle */ .moto-tooltip-title.s8{background:purple;clip-path:polygon(5% 0%,95% 0%,96.25% 8%,100% 95%,98.75% 100%,1.25% 100%,0% 95%,3.75% 8%);padding:0 .6em}
/* slant */ .moto-tooltip-title.s9{background:turquoise;transform:skew(-20deg,0deg);margin-left:.15em} .moto-tooltip-title.s9 span{display:inline-block;transform:skew(20deg,0deg);color:#000}
/* slantback */ .moto-tooltip-title.s10{background:#000000;transform:skew(20deg,0deg);margin-left:.15em} .moto-tooltip-title.s10 span{display:inline-block;transform:skew(-20deg,0deg)}
#tooltip .trophyIcon>i{width:16px;margin-left:3px;line-height:.8}
#tooltip table td{padding:0 1em;white-space:nowrap}
#tooltip table td:nth-child(1){color:#b2b2b2;padding-left:0}
#tooltip table td:nth-child(2){color:#ccc}
#tooltip table td:nth-child(3){color:#999}
#tooltip table td:nth-child(4){color:#999;padding:0}
#tooltip table td:nth-child(5){color:#999;padding-right:0}
#tooltip table tr.hl{font-weight:var(--b);font-style:italic}
#tooltip table tr.hl td:nth-child(1){color:#ddd}
#tooltip table tr.hl td:nth-child(2){color:#f5f5f5}
#tooltip table tr.hl td:nth-child(3){color:#d2d2d2}
#tooltip table tr.hl td:nth-child(4){color:#d2d2d2}
#tooltip table tr.hl td:nth-child(5){color:#d2d2d2}
#tooltip #moto-detail-panel{margin-bottom:.5em;display:inline-flex;justify-content:space-around;flex-wrap:wrap;gap:2em}
#tooltip #moto-detail-panel div{flex:0 0}
@media (max-width:500px){
#tooltip td:nth-child(2){max-width:170px;overflow:hidden;text-overflow:ellipsis}
}
/*
* ORGANISER LOGOS
*/
#pageLogo{filter:drop-shadow(0 0 .4rem rgba(255,255,2555,.5));margin:1rem 0 1rem}
@media (max-width:850px){#pageLogo{zoom:.94}}
@media (max-width:800px){#pageLogo{zoom:.88}}
@media (max-width:750px){#pageLogo{zoom:.82}}
@media (max-width:700px){#pageLogo{zoom:.76}}
@media (max-width:650px){#pageLogo{zoom:.70}}
@media (max-width:550px){#pageLogo{zoom:.64}}
@media (max-width:500px){#pageLogo{zoom:.58}}
@media (max-width:450px){#pageLogo{zoom:.52}}
#pageLogo.brightLogo{filter:drop-shadow(0 0 .625rem #000)}
#pageLogo>img{filter:drop-shadow(0 0 .3125rem #fff)}
#pageLogo.brightLogo>img{filter:drop-shadow(0 0 .3125rem #000)}
/*
* BREADCRUMBS
*/
#breadcrumbs{margin:-.5em 0;font-style:italic}
#breadcrumbs,#breadcrumbs a{color:#bbb;font-weight:400}
#breadcrumbs a{text-decoration:none}
#breadcrumbs a:hover{text-decoration:underline}
/*
* EVENT INFO/OTHER NAMES ETC
*/
#othereventnames>a{color:#fff;text-decoration:underline}
#courseinfo{margin:0;color:#fff}
.eventinfo{text-align:center;font-size:1em}
.eventinfo>img{max-width:calc(min(600px,100%))}
/*
* EVENT SPONSOR STUFF
*/
#eventsponsors{margin:0 0 2em}
#eventsponsors>h2{text-align:center;margin:0}
#eventsponsors img:hover{-webkit-filter:grayscale(100%) opacity(70%);filter:grayscale(100%) opacity(70%)}
#eventsponsors img{-webkit-filter:none;filter:none;margin:0 10px}
#eventsponsors div{display:flex;justify-content:center;align-items:center;margin:.8em 0 1.5em}
/*
* RIDER DECORATIONS - WORLD CHAMPS, etc
*/
.stripes1,.stripes2,.stripes3{display:inline-block;position:relative;top:5px;padding-left:0.5em;width:40px}
.stripes1 div{height:7px}
.stripes1>:nth-child(1){background:linear-gradient(to right, rgb(0,125,205), rgba(0,0,0,0));width:25px;}
.stripes1>:nth-child(2){background:linear-gradient(to right, rgb(205,21,62), rgba(0,0,0,0));width:35px;}
.stripes1>:nth-child(3){background:linear-gradient(to right, rgb(0,0,0), rgba(0,0,0,0))}
.stripes1>:nth-child(4){background:linear-gradient(to right, rgb(55,185,55), rgba(0,0,0,0));width:35px;}
.stripes1>:nth-child(5){background:linear-gradient(to right, rgb(255,230,0), rgba(0,0,0,0));width:25px;}
.stripes2{top:0;width:50px} /* a bit wider to make up for how thin the bars are */
.stripes2 div{height:1px}
.stripes2>:nth-child(odd){margin-bottom:3px}
.stripes2>:nth-child(1){background:linear-gradient(to right, rgb(0,125,205), rgba(0,0,0,0))}
.stripes2>:nth-child(2){background:linear-gradient(to right, rgb(0,125,205), rgba(0,0,0,0));}
.stripes2>:nth-child(3){background:linear-gradient(to right, rgb(205,21,62), rgba(0,0,0,0))}
.stripes2>:nth-child(4){background:linear-gradient(to right, rgb(205,21,62), rgba(0,0,0,0));}
.stripes2>:nth-child(5){background:linear-gradient(to right, rgb(0,0,0), rgba(0,0,0,0))}
.stripes2>:nth-child(6){background:linear-gradient(to right, rgb(0,0,0), rgba(0,0,0,0));}
.stripes2>:nth-child(7){background:linear-gradient(to right, rgb(55,185,55), rgba(0,0,0,0))}
.stripes2>:nth-child(8){background:linear-gradient(to right, rgb(55,185,55), rgba(0,0,0,0));}
.stripes2>:nth-child(9){background:linear-gradient(to right, rgb(255,230,0), rgba(0,0,0,0))}
.stripes2>:nth-child(10){background:linear-gradient(to right, rgb(255,230,0), rgba(0,0,0,0));}
.stripes3 div{height:7px}
.stripes3>:nth-child(1){background:linear-gradient(to right, rgb(0,125,205), rgba(0,0,0,0));width:25px;}
.stripes3>:nth-child(2){background:linear-gradient(to right, rgb(205,21,62), rgba(0,0,0,0));width:35px;}
.stripes3>:nth-child(3){background:linear-gradient(to right, rgb(0,0,0), rgba(0,0,0,0))}
.stripes3>:nth-child(4){background:linear-gradient(to right, rgb(55,185,55), rgba(0,0,0,0));width:35px;}
.stripes3>:nth-child(5){background:linear-gradient(to right, rgb(255,230,0), rgba(0,0,0,0));width:25px;}
/*
* PHOTO GALLERY STUFF
*/
.gallery{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0;clear:both;margin-right:-8px}
.gallery>li{flex:0 0 auto;margin-right:1em;position:relative;margin:0 8px 8px 0} /* margin used to be 4px before long conversation with A.S. on 2022-11-18 */
.gallery>li:empty{height:0}
.gallery>li>a{display:block}
.gallery>li>a>img{display:block}
.gallery>li>.title{display:block;position:absolute;bottom:0;left:0;right:0;text-align:center;background:linear-gradient(0, rgba(0,0,0,.7), transparent);color:#ddd;padding:1em 0 .25em 0;z-index:3;line-height:1.5;overflow:hidden;text-overflow:ellipsis}
#ajaxListThumbsHolder>.gallery>li>.title{bottom:16px}
.gallery>li>.title>a{color:#ddd}
.gallery.priceless>li>.title{display:none}
.gallery>li>.x{position:absolute;top:0;right:0;font-size:25px;line-height:19px;padding:0 2px;text-align:center;text-decoration:none;background:#000;color:#fff;border:1px solid #fff;border-width:0 0 1px 1px;display:inline;cursor:pointer}
.gallery>li .thumbnailBarThatDesperadosWillRemoveWithInspectElementAnyway{z-index:1;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);padding:1em 0;position:absolute;display:flex;justify-content:center;align-items:center}
.gallery>li .thumbnailBarThatDesperadosWillRemoveWithInspectElementAnyway.odd{background:linear-gradient(0, transparent, rgba(255,255,255,0.5), transparent);padding:0 1em;writing-mode:vertical-rl}
.gallery>li .thumbnailBarThatDesperadosWillRemoveWithInspectElementAnyway span{display:inline;font-size:1.1em;white-space:nowrap;overflow:hidden;color:rgba(0,0,0,.9);font-weight:400}
.gallery>li .thumbnailBarThatDesperadosWillRemoveWithInspectElementAnyway.odd span{font-size:.9em;padding-bottom:2em}
.gallery>li .coverDivOhMyGodAreYouReallyStealingA192pxThumbnail-IFeelBadForYou{display:block;top:0;left:0;right:0;bottom:0;z-index:2;position:absolute;}
/*small version*/
.gallery.small>li{width:64px;flex:0 0 auto;margin-right:1em;height:90px;position:relative}
.gallery.small>li:empty{height:0}
.gallery.small>li:nth-child(1){opacity:1}
.gallery.small>li:nth-child(2){opacity:.88}
.gallery.small>li:nth-child(3){opacity:.76}
.gallery.small>li:nth-child(4){opacity:.64}
.gallery.small>li:nth-child(5){opacity:.52}
.gallery.small>li:nth-child(6){opacity:.40}
.gallery.small>li:nth-child(7){opacity:.28}
.gallery.condensed>li{margin:0!important;height:auto}
.gallery .notes{display:none}
.gallery time{white-space:nowrap}
#showAjaxListThumbs li{visibility:visible}
#rider-photos-holder h2{margin:1em 0 .25em}
#rider-photos-holder p{margin:-.25em 0 .5em}
/*
* PAGING - JUST ON GALLERY PAGES I THINK?
*/
.pagingControl:first-of-type{margin:0 0 0 .8em;position:relative;top:-1em}
.pagingControl{display:block;clear:both;margin-top:1em;text-align:center}
.pagingControl strong,.pagingControl a{padding:0 4px;border:1px solid #000}
.pagingControl strong{background:#000;color:#fff}
.pagingControl a{background:transparent;color:#666;border:1px solid #ccc;text-decoration:none}
.pagingControl a:hover{background:#fff;color:var(--default-text-color);border:1px solid #666}
/*
* JUMP TAB STYLING
*/
page-tabs{display:block;visibility:visible}
@media (max-width:600px){page-tabs{zoom:.95}}
@media (max-width:525px){page-tabs{zoom:.90}}
@media (max-width:450px){page-tabs{zoom:.85}}
@media (max-width:360px){page-tabs{zoom:.80}}
page-tabs{width:100%;height:2.9375rem;margin:0;position:relative;z-index:2;clear:both;visibility:hidden;white-space:nowrap;overflow:hidden} /*z-index 2 so that they overlap 's box shadow*/
page-tabs>a{position:relative;display:inline-block;vertical-align:top;color:var(--default-text-color);margin:0 .125rem;text-align:center;padding:0 .6rem;white-space:nowrap;overflow:hidden}
page-tabs>a:not(.sel){top:.1875rem;line-height:2.4375rem;background:var(--jump-tabs-bg-color)}
page-tabs>a.sel{top:0;opacity:.99;font-weight:var(--b);line-height:2.9375rem;background:var(--article-bg-color)}
page-tabs>a:first-child{margin-left:0;border-top-left-radius:.5rem}
page-tabs>a:last-child{margin-right:0;border-top-right-radius:.5rem}
page-tabs>a:hover,page-tabs>a:hover>i{color:var(--default-text-color)}
page-tabs>a.sel>i,page-tabs>a.sel:hover>i{color:var(--default-text-color-hover)}
page-tabs>a>span>span{font-size:.8em;color:#888}
page-tabs>a[title='Finish spreads'] i{transform:rotate(-90deg)}
page-tabs+script+article{top:0}
page-tabs.narrow a{padding-left:.7em;padding-right:.7em}
page-tabs.small a{font-size:.75em;padding-left:.25rem;padding-right:.25rem;line-height:1.3}
/*
* GIFT VOUCHERS
*/
#vouchers .voucher{width:clamp(280px,90vw,500px);aspect-ratio:5/2;background:url(/img/cdn/voucher.png);background-size:100%;position:relative;color:#eee;cursor:pointer}
#vouchers .voucher>*{margin:0;line-height:1}
#vouchers .voucher-tint-dark{position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5)}
#vouchers .voucher-tint-red{position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(255,0,0,.2)}
#vouchers .voucher-tint-blue{position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0,0,200,.2)}
#vouchers .voucher-tint-green{position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0,155,0,.2)}
#vouchers .voucher-tint-orange{position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(255,90,0,.4)}
#vouchers .voucher-bar{position:absolute;left:0;top:8%;width:100%;aspect-ratio:500/43;background:url(/img/cdn/voucher-bar.png);background-size:100%;padding-top:0.8%;text-transform:uppercase;line-height:150%;text-align:center;font-size:clamp(.56rem,2.86vw,1rem)}
#vouchers .voucher-amount{position:absolute;top:27%;left:6%;font-size:clamp(56px,17.87vw,100px)}
#vouchers .voucher-blurb{position:absolute;bottom:12.5%;left:6%;font-size:clamp(7.28px,2.32vw,13px)}
#vouchers .voucher-title{position:absolute;left:45%;top:36%;font-size:clamp(19.6px,6.26vw,35px);text-transform:uppercase}
#vouchers .threedigits .voucher-title{left:56%}
#vouchers .voucher-title>span{font-size:clamp(7.28px,2.32vw,13px);font-weight:var(--b)}
#vouchers h3{font-size:1rem;font-weight:700}
#vouchers h3,#vouchers p{margin:0 0 .5rem;text-align:center}
#vouchers .notes{font-size:0.7rem;font-weight:400}
#vouchers{display:flex;flex-wrap:wrap;justify-content:space-around;gap:2em}
#vouchers>div{flex-basis:clamp(280px,90%,500px)}
#vouchers #custominput{border:1px solid #aaa;width:63px;padding:0 0 0 .5em}
/*
* ADVERTS
*/
#topAdvertHolder{position:absolute;background:#fff;border:2px solid black;top:10rem;left:calc(50% - 366px);right:calc(50% - 366px);width:732px;aspect-ratio:732 / 94;overflow:hidden}
#topAdvertHolder.doubleHeight{aspect-ratio:732 / 184}
.adsbygoogle{display:block;width:728px;height:90px}
#imgad{position:relative;width:101%;height:auto}
/* adblock message */
#ab-message{text-align:center;padding:1.5em 1em;position:absolute;animation:fadeinwithdelay 3000ms;font-size:.95rem}
@media (max-width:732px) {
/* if the screen goes smaller than the advert width (+ border) */
#topAdvertHolder{left:2%;right:2%;width:96%;top:7.5rem}
#ab-message{font-size:1.96vw}
/* google ads not working on smaller resolutions at the moment - kill them */
.adsbygoogle,#ab-message{display:none}
#frontpageflex{margin-top:calc(12.363% - 2rem)}
body.doubleHeightAdvert #frontpageflex{margin-top:calc(23.490% - 2rem - 10px)}
}
/*
* SITE SKELETON MEDIA QUERIES
*/
@media (max-width:1200px){
footer>nav>ul>li:first-child>a{padding-left:0}
footer>nav{float:none!important}
}
/* header bar searchform */
/* as space runs out, slim the margin either side of the search box */
@media (max-width:1000px){
.svg-icon.shopping-basket{margin:0}
#basketlink>a>span{display:none}
#basketlink{margin-right:1rem !important}
nav.hamburger>ul{gap:1em}
}
@media (max-width:881px){
header>#rnrwithintense{width:100%}
}
@media (max-width:881px){
/* wrap the search to underneath the nav */
/* unless we're on the tagging page */
body:not(#__tagging) header{grid-template-areas: "logo nav"
"logo search"}
/* resize columns now there's only two of them */
body:not(#__taggin) header{grid-template-columns:343px 1fr;column-gap:5.448vw;row-gap:0}
/* nudge this up a smidge */
#searchform{position:relative;top:-5px}
}
@media (max-width:720px){
/* wrap the search to underneath everything else */
body:not(#__tagging) header{grid-template-columns:1fr 88px;grid-template-areas: "logo nav"
"search search"}
/* make more space for this to happen */
body:not(#__tagging) header{height:9rem}
body:not(#__tagging) .target{padding-top:10rem;margin-top:-10rem} /* for # fragment links */
body:not(#__tagging) main::before{top:8.9rem}
/* this fixes overlapping header with anchor references */
:target::before{content:'';display:block;height:10rem;margin-top:-10rem}
.results-table-header{top:calc(9rem)!important}
/*.table-top-scrollbar:not(:empty){top:calc(9rem + 11px)!important}*/
nav.fullscreen>ul{top:9rem !important}
body:not(#__tagging) main{padding-top:9rem !important}
.doubleHeightAdvert main{padding-top:calc(9rem + 90px) !important}
#frontpageflex{margin-top:calc(4em + 12.363% + 0px)}
body.doubleHeightAdvert #frontpageflex{margin-top:calc(4em + 23.490% - 10px)}
#topAdvertHolder{top:10rem !important}
#sitesearch_s{max-width:none !important}
#__tagging header h1 .hidewhensmall{display:none}
}
@media (max-width:680px){
#__tagging header h1{display:none}
}
@media (max-width:480px){
header>#rnrwithintense{grid-auto-rows:max(53px, calc(13vw)) min-content}
body:not(#__tagging) header{height:max(30vw, 7.5rem)}
body:not(#__tagging) .target{padding-top:max(34vw, 8.5rem);margin-top:min(-34vw, -8.5rem)} /* for # fragment links */
body:not(#__tagging) main::before{top:max(29vw, 7.4rem)}
/* this fixes overlapping header with anchor references */
:target::before{content:'';display:block;height:calc(max(30vw, 7.5rem) + 1rem);margin-top:calc(min(-30vw, -7.5rem) - 1rem)}
.results-table-header{top:max(30vw, 7.5rem)!important}
nav.fullscreen>ul{top:max(30vw, 7.5rem) !important}
body:not(#__tagging) main{padding-top:max(30vw, 7.5rem) !important}
.doubleHeightAdvert main{padding-top:calc(max(30vw, 7.5rem) + 90px) !important}
#topAdvertHolder{top:calc(1.5rem + max(30vw, 7.5rem)) !important}
}
@keyframes fadeinwithdelay {
0% { opacity: 0 }
90% { opacity: 0 }
100% { opacity: 1 }
}
/*
* AJAX POPUP
*/
.ajax-get>div{display:inline-block;position:relative}
.ajax-get .holder{display:inline;position:relative;top:0;left:0}
div.ajax{position:absolute;left:0;top:34px;width:452px;max-width:78vw;background:var(--ajax-bg);border:1px solid #000;display:none;color:var(--ajax-text);text-transform:none;z-index:100000001}
#searchform div.ajax{top:26px}
div.ajax .more{background:#ddd;padding:.25em}
div.ajax p{padding:0 .25em;margin:0;font-weight:var(--n)}
ul.ajax{position:relative;line-height:1.6}
ul.ajax li{padding:.3em;overflow:hidden;white-space:nowrap}
/* if we have a category match, highlight in green */
ul.ajax li.catfound{background:#009900;cursor:pointer}
ul.ajax li.catfound span.text{color:#eee}
ul.ajax li.hover{background:#395797;cursor:pointer}
ul.ajax li.hover span.text{color:#eee}
.extra-info{margin-left:.5em;font-size:.8em;color:grey;font-weight:var(--b);background:var(--tagging-info-bg-color);padding:0 .5rem .15rem;border-top-left-radius:1em;border-bottom-left-radius:1em}
.extra-info+.extra-info{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:3px}
.extra-info:last-of-type{border-top-right-radius:1em;border-bottom-right-radius:1em}
ul.ajax li span.text{margin-left:.5em}
span.bib{font-weight:var(--b);font-size:.9em;color:#000;background:var(--bib-bg);border:1px solid var(--bib-border);padding:0 3px;width:auto;display:inline-block;text-align:center;border-radius:3px}
td>span.bib{min-width:2.3rem}
#moto-detail-panel td>span.bib{min-width:0;width:auto;font-size:.7em;padding:0 1px;font-style:normal;position:relative;top:-1px}
ul.ajax span.bib{margin-left:.65em}
ul.ajax .flag{margin-right:0}
ul.ajax i{font-size:21px;line-height:21px!important}
ul.ajax strong{white-space:nowrap}
ul.ajax em{white-space:nowrap}
ul.ajax input{position:relative;top:-2px}
p.ajax{background:#fff;border:1px solid #000;position:relative;padding:0 .25em;color:#666}
#showAjaxListThumbs{display:block;overflow:hidden;height:614px;width:160px;background:rgba(0,0,0,.65);position:absolute;top:4em;right:1em;padding:.5em 1em 10px;z-index:1000001}
#showAjaxListThumbs h2{margin:0 0 .5em;color:#fff;font-size:1em}
#tagform{position:relative;margin:1em auto 2em}
#s{font-weight:var(--b);width:100%}
#compare_s{width:230px;font-weight:var(--b)}
/* this holds the preloaded next photo when tagging*/
#preload{display:none}
/*
* FLAGS
*/
.flag{opacity:.85;background-size:contain;background-position:50%;background-repeat:no-repeat;position:relative;display:inline-block;width:1.33333333em;left:0!important;top:-1px;line-height:1em;margin-right:.5em}
.note+.flag{margin-left:10px}
.flag::before{content:"\00a0"}
.f-an{background-image:url(//a.rootsandrain.com/img/flags/4x3/an.svg)} /* an.svg rather than ad.svg because adblockers */
.f-ae{background-image:url(//a.rootsandrain.com/img/flags/4x3/ae.svg)}
.f-af{background-image:url(//a.rootsandrain.com/img/flags/4x3/af.svg)}
.f-ag{background-image:url(//a.rootsandrain.com/img/flags/4x3/ag.svg)}
.f-ai{background-image:url(//a.rootsandrain.com/img/flags/4x3/ai.svg)}
.f-al{background-image:url(//a.rootsandrain.com/img/flags/4x3/al.svg)}
.f-am{background-image:url(//a.rootsandrain.com/img/flags/4x3/am.svg)}
.f-ao{background-image:url(//a.rootsandrain.com/img/flags/4x3/ao.svg)}
.f-aq{background-image:url(//a.rootsandrain.com/img/flags/4x3/aq.svg)}
.f-ar{background-image:url(//a.rootsandrain.com/img/flags/4x3/ar.svg)}
.f-as{background-image:url(//a.rootsandrain.com/img/flags/4x3/as.svg)}
.f-at{background-image:url(//a.rootsandrain.com/img/flags/4x3/at.svg)}
.f-au{background-image:url(//a.rootsandrain.com/img/flags/4x3/au.svg)}
.f-aw{background-image:url(//a.rootsandrain.com/img/flags/4x3/aw.svg)}
.f-ax{background-image:url(//a.rootsandrain.com/img/flags/4x3/ax.svg)}
.f-az{background-image:url(//a.rootsandrain.com/img/flags/4x3/az.svg)}
.f-ba{background-image:url(//a.rootsandrain.com/img/flags/4x3/ba.svg)}
.f-bb{background-image:url(//a.rootsandrain.com/img/flags/4x3/bb.svg)}
.f-bd{background-image:url(//a.rootsandrain.com/img/flags/4x3/bd.svg)}
.f-be{background-image:url(//a.rootsandrain.com/img/flags/4x3/be.svg)}
.f-bf{background-image:url(//a.rootsandrain.com/img/flags/4x3/bf.svg)}
.f-bg{background-image:url(//a.rootsandrain.com/img/flags/4x3/bg.svg)}
.f-bh{background-image:url(//a.rootsandrain.com/img/flags/4x3/bh.svg)}
.f-bi{background-image:url(//a.rootsandrain.com/img/flags/4x3/bi.svg)}
.f-bj{background-image:url(//a.rootsandrain.com/img/flags/4x3/bj.svg)}
.f-bl{background-image:url(//a.rootsandrain.com/img/flags/4x3/bl.svg)}
.f-bm{background-image:url(//a.rootsandrain.com/img/flags/4x3/bm.svg)}
.f-bn{background-image:url(//a.rootsandrain.com/img/flags/4x3/bn.svg)}
.f-bo{background-image:url(//a.rootsandrain.com/img/flags/4x3/bo.svg)}
.f-bq{background-image:url(//a.rootsandrain.com/img/flags/4x3/bq.svg)}
.f-br{background-image:url(//a.rootsandrain.com/img/flags/4x3/br.svg)}
.f-bs{background-image:url(//a.rootsandrain.com/img/flags/4x3/bs.svg)}
.f-bt{background-image:url(//a.rootsandrain.com/img/flags/4x3/bt.svg)}
.f-bv{background-image:url(//a.rootsandrain.com/img/flags/4x3/bv.svg)}
.f-bw{background-image:url(//a.rootsandrain.com/img/flags/4x3/bw.svg)}
.f-by{background-image:url(//a.rootsandrain.com/img/flags/4x3/by.svg)}
.f-bz{background-image:url(//a.rootsandrain.com/img/flags/4x3/bz.svg)}
.f-ca{background-image:url(//a.rootsandrain.com/img/flags/4x3/ca.svg)}
.f-cc{background-image:url(//a.rootsandrain.com/img/flags/4x3/cc.svg)}
.f-cd{background-image:url(//a.rootsandrain.com/img/flags/4x3/cd.svg)}
.f-cf{background-image:url(//a.rootsandrain.com/img/flags/4x3/cf.svg)}
.f-cg{background-image:url(//a.rootsandrain.com/img/flags/4x3/cg.svg)}
.f-ch{background-image:url(//a.rootsandrain.com/img/flags/4x3/ch.svg)}
.f-ci{background-image:url(//a.rootsandrain.com/img/flags/4x3/ci.svg)}
.f-ck{background-image:url(//a.rootsandrain.com/img/flags/4x3/ck.svg)}
.f-cl{background-image:url(//a.rootsandrain.com/img/flags/4x3/cl.svg)}
.f-cm{background-image:url(//a.rootsandrain.com/img/flags/4x3/cm.svg)}
.f-cn{background-image:url(//a.rootsandrain.com/img/flags/4x3/cn.svg)}
.f-co{background-image:url(//a.rootsandrain.com/img/flags/4x3/co.svg)}
.f-cr{background-image:url(//a.rootsandrain.com/img/flags/4x3/cr.svg)}
.f-cu{background-image:url(//a.rootsandrain.com/img/flags/4x3/cu.svg)}
.f-cv{background-image:url(//a.rootsandrain.com/img/flags/4x3/cv.svg)}
.f-cw{background-image:url(//a.rootsandrain.com/img/flags/4x3/cw.svg)}
.f-cx{background-image:url(//a.rootsandrain.com/img/flags/4x3/cx.svg)}
.f-cy{background-image:url(//a.rootsandrain.com/img/flags/4x3/cy.svg)}
.f-cz{background-image:url(//a.rootsandrain.com/img/flags/4x3/cz.svg)}
.f-de{background-image:url(//a.rootsandrain.com/img/flags/4x3/de.svg)}
.f-dj{background-image:url(//a.rootsandrain.com/img/flags/4x3/dj.svg)}
.f-dk{background-image:url(//a.rootsandrain.com/img/flags/4x3/dk.svg)}
.f-dm{background-image:url(//a.rootsandrain.com/img/flags/4x3/dm.svg)}
.f-do{background-image:url(//a.rootsandrain.com/img/flags/4x3/do.svg)}
.f-dz{background-image:url(//a.rootsandrain.com/img/flags/4x3/dz.svg)}
.f-ec{background-image:url(//a.rootsandrain.com/img/flags/4x3/ec.svg)}
.f-ee{background-image:url(//a.rootsandrain.com/img/flags/4x3/ee.svg)}
.f-eg{background-image:url(//a.rootsandrain.com/img/flags/4x3/eg.svg)}
.f-eh{background-image:url(//a.rootsandrain.com/img/flags/4x3/eh.svg)}
.f-er{background-image:url(//a.rootsandrain.com/img/flags/4x3/er.svg)}
.f-es{background-image:url(//a.rootsandrain.com/img/flags/4x3/es.svg)}
.f-et{background-image:url(//a.rootsandrain.com/img/flags/4x3/et.svg)}
.f-fi{background-image:url(//a.rootsandrain.com/img/flags/4x3/fi.svg)}
.f-fj{background-image:url(//a.rootsandrain.com/img/flags/4x3/fj.svg)}
.f-fk{background-image:url(//a.rootsandrain.com/img/flags/4x3/fk.svg)}
.f-fm{background-image:url(//a.rootsandrain.com/img/flags/4x3/fm.svg)}
.f-fo{background-image:url(//a.rootsandrain.com/img/flags/4x3/fo.svg)}
.f-fr{background-image:url(//a.rootsandrain.com/img/flags/4x3/fr.svg?newblue)}
.f-ga{background-image:url(//a.rootsandrain.com/img/flags/4x3/ga.svg)}
.f-gb{background-image:url(//a.rootsandrain.com/img/flags/4x3/gb.svg)}
.f-gd{background-image:url(//a.rootsandrain.com/img/flags/4x3/gd.svg)}
.f-ge{background-image:url(//a.rootsandrain.com/img/flags/4x3/ge.svg)}
.f-gf{background-image:url(//a.rootsandrain.com/img/flags/4x3/gf.svg)}
.f-gg{background-image:url(//a.rootsandrain.com/img/flags/4x3/gg.svg)}
.f-gh{background-image:url(//a.rootsandrain.com/img/flags/4x3/gh.svg)}
.f-gi{background-image:url(//a.rootsandrain.com/img/flags/4x3/gi.svg)}
.f-gl{background-image:url(//a.rootsandrain.com/img/flags/4x3/gl.svg)}
.f-gm{background-image:url(//a.rootsandrain.com/img/flags/4x3/gm.svg)}
.f-gn{background-image:url(//a.rootsandrain.com/img/flags/4x3/gn.svg)}
.f-gp{background-image:url(//a.rootsandrain.com/img/flags/4x3/gp.svg)}
.f-gq{background-image:url(//a.rootsandrain.com/img/flags/4x3/gq.svg)}
.f-gr{background-image:url(//a.rootsandrain.com/img/flags/4x3/gr.svg)}
.f-gs{background-image:url(//a.rootsandrain.com/img/flags/4x3/gs.svg)}
.f-gt{background-image:url(//a.rootsandrain.com/img/flags/4x3/gt.svg)}
.f-gu{background-image:url(//a.rootsandrain.com/img/flags/4x3/gu.svg)}
.f-gw{background-image:url(//a.rootsandrain.com/img/flags/4x3/gw.svg)}
.f-gy{background-image:url(//a.rootsandrain.com/img/flags/4x3/gy.svg)}
.f-hk{background-image:url(//a.rootsandrain.com/img/flags/4x3/hk.svg)}
.f-hm{background-image:url(//a.rootsandrain.com/img/flags/4x3/hm.svg)}
.f-hn{background-image:url(//a.rootsandrain.com/img/flags/4x3/hn.svg)}
.f-hr{background-image:url(//a.rootsandrain.com/img/flags/4x3/hr.svg)}
.f-ht{background-image:url(//a.rootsandrain.com/img/flags/4x3/ht.svg)}
.f-hu{background-image:url(//a.rootsandrain.com/img/flags/4x3/hu.svg)}
.f-id{background-image:url(//a.rootsandrain.com/img/flags/4x3/id.svg)}
.f-ie{background-image:url(//a.rootsandrain.com/img/flags/4x3/ie.svg)}
.f-il{background-image:url(//a.rootsandrain.com/img/flags/4x3/il.svg)}
.f-im{background-image:url(//a.rootsandrain.com/img/flags/4x3/im.svg)}
.f-in{background-image:url(//a.rootsandrain.com/img/flags/4x3/in.svg)}
.f-io{background-image:url(//a.rootsandrain.com/img/flags/4x3/io.svg)}
.f-iq{background-image:url(//a.rootsandrain.com/img/flags/4x3/iq.svg)}
.f-ir{background-image:url(//a.rootsandrain.com/img/flags/4x3/ir.svg)}
.f-is{background-image:url(//a.rootsandrain.com/img/flags/4x3/is.svg)}
.f-it{background-image:url(//a.rootsandrain.com/img/flags/4x3/it.svg)}
.f-je{background-image:url(//a.rootsandrain.com/img/flags/4x3/je.svg)}
.f-jm{background-image:url(//a.rootsandrain.com/img/flags/4x3/jm.svg)}
.f-jo{background-image:url(//a.rootsandrain.com/img/flags/4x3/jo.svg)}
.f-jp{background-image:url(//a.rootsandrain.com/img/flags/4x3/jp.svg)}
.f-ke{background-image:url(//a.rootsandrain.com/img/flags/4x3/ke.svg)}
.f-kg{background-image:url(//a.rootsandrain.com/img/flags/4x3/kg.svg)}
.f-kh{background-image:url(//a.rootsandrain.com/img/flags/4x3/kh.svg)}
.f-ki{background-image:url(//a.rootsandrain.com/img/flags/4x3/ki.svg)}
.f-km{background-image:url(//a.rootsandrain.com/img/flags/4x3/km.svg)}
.f-kn{background-image:url(//a.rootsandrain.com/img/flags/4x3/kn.svg)}
.f-kp{background-image:url(//a.rootsandrain.com/img/flags/4x3/kp.svg)}
.f-kr{background-image:url(//a.rootsandrain.com/img/flags/4x3/kr.svg)}
.f-kw{background-image:url(//a.rootsandrain.com/img/flags/4x3/kw.svg)}
.f-ky{background-image:url(//a.rootsandrain.com/img/flags/4x3/ky.svg)}
.f-kz{background-image:url(//a.rootsandrain.com/img/flags/4x3/kz.svg)}
.f-la{background-image:url(//a.rootsandrain.com/img/flags/4x3/la.svg)}
.f-lb{background-image:url(//a.rootsandrain.com/img/flags/4x3/lb.svg)}
.f-lc{background-image:url(//a.rootsandrain.com/img/flags/4x3/lc.svg)}
.f-li{background-image:url(//a.rootsandrain.com/img/flags/4x3/li.svg)}
.f-lk{background-image:url(//a.rootsandrain.com/img/flags/4x3/lk.svg)}
.f-lr{background-image:url(//a.rootsandrain.com/img/flags/4x3/lr.svg)}
.f-ls{background-image:url(//a.rootsandrain.com/img/flags/4x3/ls.svg)}
.f-lt{background-image:url(//a.rootsandrain.com/img/flags/4x3/lt.svg)}
.f-lu{background-image:url(//a.rootsandrain.com/img/flags/4x3/lu.svg)}
.f-lv{background-image:url(//a.rootsandrain.com/img/flags/4x3/lv.svg)}
.f-ly{background-image:url(//a.rootsandrain.com/img/flags/4x3/ly.svg)}
.f-ma{background-image:url(//a.rootsandrain.com/img/flags/4x3/ma.svg)}
.f-mc{background-image:url(//a.rootsandrain.com/img/flags/4x3/mc.svg)}
.f-md{background-image:url(//a.rootsandrain.com/img/flags/4x3/md.svg)}
.f-me{background-image:url(//a.rootsandrain.com/img/flags/4x3/me.svg)}
.f-mf{background-image:url(//a.rootsandrain.com/img/flags/4x3/mf.svg)}
.f-mg{background-image:url(//a.rootsandrain.com/img/flags/4x3/mg.svg)}
.f-mh{background-image:url(//a.rootsandrain.com/img/flags/4x3/mh.svg)}
.f-mk{background-image:url(//a.rootsandrain.com/img/flags/4x3/mk.svg)}
.f-ml{background-image:url(//a.rootsandrain.com/img/flags/4x3/ml.svg)}
.f-mm{background-image:url(//a.rootsandrain.com/img/flags/4x3/mm.svg)}
.f-mn{background-image:url(//a.rootsandrain.com/img/flags/4x3/mn.svg)}
.f-mo{background-image:url(//a.rootsandrain.com/img/flags/4x3/mo.svg)}
.f-mp{background-image:url(//a.rootsandrain.com/img/flags/4x3/mp.svg)}
.f-mq{background-image:url(//a.rootsandrain.com/img/flags/4x3/mq.svg)}
.f-mr{background-image:url(//a.rootsandrain.com/img/flags/4x3/mr.svg)}
.f-ms{background-image:url(//a.rootsandrain.com/img/flags/4x3/ms.svg)}
.f-mt{background-image:url(//a.rootsandrain.com/img/flags/4x3/mt.svg)}
.f-mu{background-image:url(//a.rootsandrain.com/img/flags/4x3/mu.svg)}
.f-mv{background-image:url(//a.rootsandrain.com/img/flags/4x3/mv.svg)}
.f-mw{background-image:url(//a.rootsandrain.com/img/flags/4x3/mw.svg)}
.f-mx{background-image:url(//a.rootsandrain.com/img/flags/4x3/mx.svg)}
.f-my{background-image:url(//a.rootsandrain.com/img/flags/4x3/my.svg)}
.f-mz{background-image:url(//a.rootsandrain.com/img/flags/4x3/mz.svg)}
.f-na{background-image:url(//a.rootsandrain.com/img/flags/4x3/na.svg)}
.f-nc{background-image:url(//a.rootsandrain.com/img/flags/4x3/nc.svg)}
.f-ne{background-image:url(//a.rootsandrain.com/img/flags/4x3/ne.svg)}
.f-nf{background-image:url(//a.rootsandrain.com/img/flags/4x3/nf.svg)}
.f-ng{background-image:url(//a.rootsandrain.com/img/flags/4x3/ng.svg)}
.f-ni{background-image:url(//a.rootsandrain.com/img/flags/4x3/ni.svg)}
.f-nl{background-image:url(//a.rootsandrain.com/img/flags/4x3/nl.svg)}
.f-no{background-image:url(//a.rootsandrain.com/img/flags/4x3/no.svg)}
.f-np{background-image:url(//a.rootsandrain.com/img/flags/4x3/np.svg)}
.f-nr{background-image:url(//a.rootsandrain.com/img/flags/4x3/nr.svg)}
.f-nu{background-image:url(//a.rootsandrain.com/img/flags/4x3/nu.svg)}
.f-nz{background-image:url(//a.rootsandrain.com/img/flags/4x3/nz.svg)}
.f-om{background-image:url(//a.rootsandrain.com/img/flags/4x3/om.svg)}
.f-pa{background-image:url(//a.rootsandrain.com/img/flags/4x3/pa.svg)}
.f-pe{background-image:url(//a.rootsandrain.com/img/flags/4x3/pe.svg)}
.f-pf{background-image:url(//a.rootsandrain.com/img/flags/4x3/pf.svg)}
.f-pg{background-image:url(//a.rootsandrain.com/img/flags/4x3/pg.svg)}
.f-ph{background-image:url(//a.rootsandrain.com/img/flags/4x3/ph.svg)}
.f-pk{background-image:url(//a.rootsandrain.com/img/flags/4x3/pk.svg)}
.f-pl{background-image:url(//a.rootsandrain.com/img/flags/4x3/pl.svg)}
.f-pm{background-image:url(//a.rootsandrain.com/img/flags/4x3/pm.svg)}
.f-pn{background-image:url(//a.rootsandrain.com/img/flags/4x3/pn.svg)}
.f-pr{background-image:url(//a.rootsandrain.com/img/flags/4x3/pr.svg)}
.f-ps{background-image:url(//a.rootsandrain.com/img/flags/4x3/ps.svg)}
.f-pt{background-image:url(//a.rootsandrain.com/img/flags/4x3/pt.svg)}
.f-pw{background-image:url(//a.rootsandrain.com/img/flags/4x3/pw.svg)}
.f-py{background-image:url(//a.rootsandrain.com/img/flags/4x3/py.svg)}
.f-qa{background-image:url(//a.rootsandrain.com/img/flags/4x3/qa.svg)}
.f-re{background-image:url(//a.rootsandrain.com/img/flags/4x3/re.svg)}
.f-ro{background-image:url(//a.rootsandrain.com/img/flags/4x3/ro.svg)}
.f-rs{background-image:url(//a.rootsandrain.com/img/flags/4x3/rs.svg)}
.f-ru{background-image:url(//a.rootsandrain.com/img/flags/4x3/ru.svg)}
.f-rw{background-image:url(//a.rootsandrain.com/img/flags/4x3/rw.svg)}
.f-sa{background-image:url(//a.rootsandrain.com/img/flags/4x3/sa.svg)}
.f-sb{background-image:url(//a.rootsandrain.com/img/flags/4x3/sb.svg)}
.f-sc{background-image:url(//a.rootsandrain.com/img/flags/4x3/sc.svg)}
.f-sd{background-image:url(//a.rootsandrain.com/img/flags/4x3/sd.svg)}
.f-se{background-image:url(//a.rootsandrain.com/img/flags/4x3/se.svg)}
.f-sg{background-image:url(//a.rootsandrain.com/img/flags/4x3/sg.svg)}
.f-sh{background-image:url(//a.rootsandrain.com/img/flags/4x3/sh.svg)}
.f-si{background-image:url(//a.rootsandrain.com/img/flags/4x3/si.svg)}
.f-sj{background-image:url(//a.rootsandrain.com/img/flags/4x3/sj.svg)}
.f-sk{background-image:url(//a.rootsandrain.com/img/flags/4x3/sk.svg)}
.f-sl{background-image:url(//a.rootsandrain.com/img/flags/4x3/sl.svg)}
.f-sm{background-image:url(//a.rootsandrain.com/img/flags/4x3/sm.svg)}
.f-sn{background-image:url(//a.rootsandrain.com/img/flags/4x3/sn.svg)}
.f-so{background-image:url(//a.rootsandrain.com/img/flags/4x3/so.svg)}
.f-sr{background-image:url(//a.rootsandrain.com/img/flags/4x3/sr.svg)}
.f-ss{background-image:url(//a.rootsandrain.com/img/flags/4x3/ss.svg)}
.f-st{background-image:url(//a.rootsandrain.com/img/flags/4x3/st.svg)}
.f-sv{background-image:url(//a.rootsandrain.com/img/flags/4x3/sv.svg)}
.f-sx{background-image:url(//a.rootsandrain.com/img/flags/4x3/sx.svg)}
.f-sy{background-image:url(//a.rootsandrain.com/img/flags/4x3/sy.svg)}
.f-sz{background-image:url(//a.rootsandrain.com/img/flags/4x3/sz.svg)}
.f-tc{background-image:url(//a.rootsandrain.com/img/flags/4x3/tc.svg)}
.f-td{background-image:url(//a.rootsandrain.com/img/flags/4x3/td.svg)}
.f-tf{background-image:url(//a.rootsandrain.com/img/flags/4x3/tf.svg)}
.f-tg{background-image:url(//a.rootsandrain.com/img/flags/4x3/tg.svg)}
.f-th{background-image:url(//a.rootsandrain.com/img/flags/4x3/th.svg)}
.f-tj{background-image:url(//a.rootsandrain.com/img/flags/4x3/tj.svg)}
.f-tk{background-image:url(//a.rootsandrain.com/img/flags/4x3/tk.svg)}
.f-tl{background-image:url(//a.rootsandrain.com/img/flags/4x3/tl.svg)}
.f-tm{background-image:url(//a.rootsandrain.com/img/flags/4x3/tm.svg)}
.f-tn{background-image:url(//a.rootsandrain.com/img/flags/4x3/tn.svg)}
.f-to{background-image:url(//a.rootsandrain.com/img/flags/4x3/to.svg)}
.f-tr{background-image:url(//a.rootsandrain.com/img/flags/4x3/tr.svg)}
.f-tt{background-image:url(//a.rootsandrain.com/img/flags/4x3/tt.svg)}
.f-tv{background-image:url(//a.rootsandrain.com/img/flags/4x3/tv.svg)}
.f-tw{background-image:url(//a.rootsandrain.com/img/flags/4x3/tw.svg)}
.f-tz{background-image:url(//a.rootsandrain.com/img/flags/4x3/tz.svg)}
.f-ua{background-image:url(//a.rootsandrain.com/img/flags/4x3/ua.svg)}
.f-ug{background-image:url(//a.rootsandrain.com/img/flags/4x3/ug.svg)}
.f-um{background-image:url(//a.rootsandrain.com/img/flags/4x3/um.svg)}
.f-us{background-image:url(//a.rootsandrain.com/img/flags/4x3/us.svg);opacity:1}
.f-uy{background-image:url(//a.rootsandrain.com/img/flags/4x3/uy.svg)}
.f-uz{background-image:url(//a.rootsandrain.com/img/flags/4x3/uz.svg)}
.f-va{background-image:url(//a.rootsandrain.com/img/flags/4x3/va.svg)}
.f-vc{background-image:url(//a.rootsandrain.com/img/flags/4x3/vc.svg)}
.f-ve{background-image:url(//a.rootsandrain.com/img/flags/4x3/ve.svg)}
.f-vg{background-image:url(//a.rootsandrain.com/img/flags/4x3/vg.svg)}
.f-vi{background-image:url(//a.rootsandrain.com/img/flags/4x3/vi.svg)}
.f-vn{background-image:url(//a.rootsandrain.com/img/flags/4x3/vn.svg)}
.f-vu{background-image:url(//a.rootsandrain.com/img/flags/4x3/vu.svg)}
.f-wf{background-image:url(//a.rootsandrain.com/img/flags/4x3/wf.svg)}
.f-ws{background-image:url(//a.rootsandrain.com/img/flags/4x3/ws.svg)}
.f-ye{background-image:url(//a.rootsandrain.com/img/flags/4x3/ye.svg)}
.f-yt{background-image:url(//a.rootsandrain.com/img/flags/4x3/yt.svg)}
.f-za{background-image:url(//a.rootsandrain.com/img/flags/4x3/za.svg)}
.f-zm{background-image:url(//a.rootsandrain.com/img/flags/4x3/zm.svg)}
.f-zw{background-image:url(//a.rootsandrain.com/img/flags/4x3/zw.svg)}
.f-eu{background-image:url(//a.rootsandrain.com/img/flags/4x3/eu.svg)}
.f-en{background-image:url(//a.rootsandrain.com/img/flags/4x3/gb-eng.svg)}
.f-ul{background-image:url(//a.rootsandrain.com/img/flags/4x3/gb-nir.svg)}
.f-sf{background-image:url(//a.rootsandrain.com/img/flags/4x3/gb-sct.svg)}
.f-wa{background-image:url(//a.rootsandrain.com/img/flags/4x3/gb-wls.svg)}
.f-un{background-image:url(//a.rootsandrain.com/img/flags/4x3/un.svg)}
.f-unknown{background-image:url(//a.rootsandrain.com/img/flags/4x3/unknown.svg)}
.f-__{background-image:url(//a.rootsandrain.com/img/flags/4x3/__.svg);background-size:cover;line-height:1.6em}
/* svg icons */
.svg-icon{line-height:inherit;display:inline-block;width:1.5rem}
.svg-icon svg{vertical-align:middle}
/*p>i.svg-icon svg{top:-5px} this was breaking the disabled photo untag button (other buttons in s, and the floatl formfield icons. What WAS it for...? */
/* this means we can target the fill colour using the css color property on the parent*/
.svg-icon svg{fill:currentColor}
.svg-icon svg path{fill:inherit}
/* if they're in a link in a table we probably want black and 1rem (16px) size */
/* this can't be td>a as sometimes (like resized sponsor names) there's a span inbetween */
td a>.svg-icon{color:var(--icon-color);width:1rem}
td a>.svg-icon svg{top:-2px}
/* jump menus */
page-tabs>a>.svg-icon{max-width:1.5rem}
page-tabs>a>.svg-icon:not(:only-child){margin-right:.5rem}
page-tabs>a>.svg-icon svg{top:-3px}
/* positioning */
.svg-icon svg{position:relative}
#tagpagehelp .svg-icon{width:1.875rem}
/* smaller */
#recentresults li .svg-icon{width:1.125rem;color:var(--icon-color);position:relative;top:-2px;left:-4px}
/* bigger */
.svg-icon.shopping-basket{width:1.5rem;margin-right:1rem;height:3rem;position:relative;top:-3px;color:#eee}
.svg-icon.shopping-basket svg{width:1.6rem;height:1.6rem}
#basketCount{font-size:.6875rem;font-weight:var(--b);width:1.25rem;text-align:center;position:absolute;left:3px;top:6px}
.svg-save{color:grey;font-size:24px;cursor:help;margin-left:.25em}
.svg-save svg{top:-2px}
#__event_results h2 .svg-icon{color:var(--default-text-color)}
/* msg icons */
div.msg .svg-icon{margin-left:1em;position:relative;top:-5px;left:-5px}
/* bottom of photo icons */
#admincontrols i{margin:0 .5rem}
#admincontrols i.disabled.svg-icon{color:#555}
#admincontrols a:hover i.svg-icon{color:#fff}
.svg-icon.photo-approved{z-index:1000000;color:#2ca1e7;font-size:2em;position:absolute;top:-9px;left:-4px;filter:drop-shadow(0 0 15px #fff) /*drop shadow doesn't work - might have to add it into the svg itself*/}
/*
* FLOAT-L FORM FIELDS
*/
@-webkit-keyframes autofill{to{color:#222;background:#f5f5f5}}
input:-webkit-autofill{-webkit-animation-name:autofill;-webkit-animation-fill-mode:both}
.floatl{position:relative;line-height:2;height:52px}
.floatl.tall{height:156px}
.floatl i{line-height:52px!important}
.floatl.tall i{line-height:156px!important}
.floatl .svg-icon svg{width:28px}
.floatl--focused .floatl__label{color:#2a8dea}
.floatl--active .floatl__label{opacity:1;visibility:visible;top:2px;background-color:transparent}
.floatl--active .floatl__input{padding-top:16px!important;padding-bottom:0!important}
textarea.floatl__input{height:100%;background:#f5f5f5}
.floatl__label{transition:all 120ms ease-in-out;visibility:hidden;opacity:0;position:absolute;display:inline-block;top:14px;left:64px;font-size:10px;font-weight:var(--b);z-index:2;color:#666}
.floatl__input{transition:all 120ms ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:8px 8px 8px 15px!important;position:absolute;top:0;left:48px}
.floatl i.svg-icon{transition:all 120ms ease-in-out;position:absolute;top:0;bottom:0;overflow:hidden;z-index:2}
input.floatl__input,textarea.floatl__input{width:calc(100% - 48px)}
input[required]::after{content:' *'}
.rounded p.notes{margin-top:-1.2em}
/*
* DATA TABLES
*/
.scroll-indicator{position:absolute;top:20px;right:-5px;font-size:3rem;
text-shadow: 0 0 0 rgba(0, 0, 0, 1);
transform: scale(1, 5);
animation: pulse2 2s infinite;
}
@keyframes pulse2 {
0% {
transform: scale(0.8, 4);
text-shadow: 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1, 5);
text-shadow: 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.8, 4);
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
}
.results-table-header{position:sticky;top:104px;z-index:100;margin:3em -2em 1em -2em;padding:.25em 2em 1em;background:var(--results-table-header-bg-color);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-top:1px solid black;border-bottom:1px solid black}
@supports not (backdrop-filter: blur(7px)) {
.results-table-header{background:var(--results-table-header-bg-color)}
}
.results-table-header>h2{font-size:clamp(1em,2.49vw,1.4em)}
.results-table-header>h2>span{white-space:nowrap}
.results-table-header>h2>span>a{display:inline-block;white-space:nowrap;vertical-align:text-bottom;font-size:0.6em;padding:.1em 1em;border-radius:2em;background:#0070c9;color:#fff}
.results-table-header>h2>span>a>span{padding-left:.5em}
.results-table-header>h2>span>a:first-child{margin-right:.5em}
.results-table-header>h2>span>a>.svg-icon{position:relative;top:-1px}
.table-top-scrollbar{position:absolute;top:auto;bottom:0;left:0;right:0;;height:0;overflow-x:auto;overflow-y:hidden}
.table-top-scrollbar:not(:empty){height:auto}
.table-top-scrollbar>div{height:1px}
.table-wrapper{overflow-x:auto;margin-left:-18px;padding-left:18px}
.table-wrapper.hide-scrollbars::-webkit-scrollbar{height:0}
.table-wrapper.hide-scrollbars{scrollbar-width:none}
.scrollbar::-webkit-scrollbar{height:12px;background:#fff}
.scrollbar::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 7px rgba(0,0,0,0.3);border-radius:0;background:#fff}
.scrollbar::-webkit-scrollbar-thumb{border-radius:0;-webkit-box-shadow:inset 0 0 7px rgba(0,0,0,.3);background:#777}
.scrollbar{scrollbar-width:thin;scrollbar-color:#777 #eee;border-radius:0}
.no-ellipsis{text-overflow:unset!important}
.no-ellipsis input{width:100%}
.list{margin-bottom:2em;clear:left}
h2 + .caption,h2 + .dummycaption{margin-top:-.5em}
.caption>span{white-space:nowrap}
.caption,.dummycaption{text-align:left;padding:0 0 1px;color:#757575}
.list>thead>tr>th{border-bottom:2px solid var(--list-table-row-border-color)}
.list>thead>tr>th:not(:empty){padding:.5em 1em .5em 0;white-space:nowrap;text-align:left;cursor:pointer;font-weight:var(--b)}
.list>tbody>tr>td{padding:.5em 1em .5em 0;white-space:nowrap;border:1px solid var(--list-table-row-border-color);border-width:1px 0}
.list>tbody>tr>td.wrap{white-space:normal;max-width:200px}
.list>thead>tr>th.less-important>a{opacity:.75}
span.less-important{opacity:.75;display:inline-block;transform:scale(.85)}
span.heatmapBg{color:#000;padding:.2em .5em;opacity:var(--desaturate-if-dark-mode);border-radius:.35em}
.list>tbody>tr>td.bold{font-weight:var(--b);border-left:1px solid #888!important;padding-left:1em}
.list>tbody>tr>td.date{border-left:none!important;padding-left:0!important}
.list>thead>tr>th.bold{font-weight:var(--b);border-left:1px solid #888!important;padding-left:1em}
.list>tbody>tr>td.result{text-align:right}
.list>thead>tr>th.compact:not(:empty){padding:.5em .5em .5em 0}
.list>tbody>tr>td.compact{padding:.5em .5em .5em 0}
.list>thead>tr>th>.sortdir{padding-left:3px;width:12px;display:inline-block}
.list>tbody>tr:last-child>td{border:0}
.list>tbody>tr>td:first-child{padding-left:1em}
#eventresults .list>tbody>tr>td:nth-child(2){padding-left:.5em}
.list>thead>tr>th:first-child{padding-left:1em}
.list>tbody>tr>td.date{text-align:right}
.list>thead>tr>th>a{color:var(--default-text-color)}
.list>tbody>tr.cnt_hl>td{background:#ddd}
.list>tbody>tr.cnt_hl .rn{font-weight:var(--b)}
.list>tbody>tr>td i:not(.svg-icon){color:var(--default-text-color);padding-left:4px}
.list.fulldetails>tbody>tr>td.break{border-right:1px solid #888!important}
.list.fulldetails>thead>tr>th.break{border-right:1px solid #888!important}
.list.fulldetails>tbody>tr>td.break + td{padding-left:1.5em}
.list.fulldetails>thead>tr>th.break + th>a{padding-left:1.5em}
.champs .rn{color:#222;text-decoration:underline;font-weight:bold}
tbody .dummy{color:var(--dnf-etc)!important}
/* moto trials observations */
.z0,.z1,.z2,.z3,.z5,.zx{margin-right:1px;width:8px;height:15px;text-indent:-999999px;display:inline-block;border-color:#F83E3E;border-style:solid}
.z0{border-bottom-width:1px;border-color:black}
.z1{border-bottom-width:3px}
.z2{border-bottom-width:6px}
.z3{border-bottom-width:9px}
.z5{border-bottom-width:15px}
.z0:hover,.z1:hover,.z2:hover,.z3:hover,.z5:hover{border-bottom-color:blue;cursor:help}
.z0:hover{border-bottom:2px solid blue}
.zB{border-right:2px solid #aaa;width:2px;margin:0 4px 0 3px;position:relative;top:2px;height:15px;display:inline-block}
.zx{background:black;position:relative;top:1px}
/* if we aren't showing a fulldetails table, make the maximum column width 50vw */
.list:not(.fulldetails)>tbody>tr>td:not(.wrap){max-width:50vw;overflow:hidden;text-overflow:ellipsis}
.list>tbody>tr>td.containsRiderAgeBar{overflow:visible!important}
/* colspanned cells */
.colspanned{vertical-align:top}
.colspanned span{text-align:center;font-style:italic;display:block;overflow:hidden;margin-right:1.5em}
.colspanned span::before,.colspanned span::after{border-top:1px dashed #888;content:'';display:inline-block;height:1px;position:relative;vertical-align:middle;width:50%}
.colspanned span::before{right:.5em;margin-left:-50%}
.colspanned span::after{left:.5em;margin-right:-50%}
/* if it's a result table it'll have trophy icons to the left of it, so left's shift it left so everything else lines up */
#rider-results-holder .table-top-scrollbar>div,
#event-results-holder .table-top-scrollbar>div,
#rider-results-holder .list,
#event-results-holder .list{margin-left:-15px}
#event-results-holder h2{margin-right:15px}
/* this rule allow us to hide columns responsively via responsive-tables.js */
.hide-c1 tr>:nth-child(1),.hide-c2 tr>:nth-child(2),.hide-c3 tr>:nth-child(3),.hide-c4 tr>:nth-child(4),.hide-c5 tr>:nth-child(5),.hide-c6 tr>:nth-child(6),.hide-c7 tr>:nth-child(7),.hide-c8 tr>:nth-child(8),.hide-c9 tr>:nth-child(9),.hide-c10 tr>:nth-child(10),.hide-c11 tr>:nth-child(11),.hide-c12 tr>:nth-child(12),.hide-c13 tr>:nth-child(13),.hide-c14 tr>:nth-child(14),.hide-c15 tr>:nth-child(15),.hide-c16 tr>:nth-child(16),.hide-c17 tr>:nth-child(17),.hide-c18 tr>:nth-child(18),.hide-c19 tr>:nth-child(19),.hide-c20 tr>:nth-child(20),.hide-c21 tr>:nth-child(21),.hide-c22 tr>:nth-child(22),.hide-c23 tr>:nth-child(23),.hide-c24 tr>:nth-child(24),.hide-c25 tr>:nth-child(25),.hide-c26 tr>:nth-child(26),.hide-c27 tr>:nth-child(27),.hide-c28 tr>:nth-child(28),.hide-c29 tr>:nth-child(29),.hide-c30 tr>:nth-child(30),.hide-c31 tr>:nth-child(31),.hide-c32 tr>:nth-child(32),.hide-c33 tr>:nth-child(33),.hide-c34 tr>:nth-child(34),.hide-c35 tr>:nth-child(35),.hide-c36 tr>:nth-child(36),.hide-c37 tr>:nth-child(37),.hide-c38 tr>:nth-child(38),.hide-c39 tr>:nth-child(39),.hide-c40 tr>:nth-child(40),.hide-c41 tr>:nth-child(41),.hide-c42 tr>:nth-child(42),.hide-c43 tr>:nth-child(43),.hide-c44 tr>:nth-child(44),.hide-c45 tr>:nth-child(45),.hide-c46 tr>:nth-child(46),.hide-c47 tr>:nth-child(47),.hide-c48 tr>:nth-child(48),.hide-c49 tr>:nth-child(49),.hide-c50 tr>:nth-child(50){display:none}
/* in podium view we want to highlight 1st 2nd and 3rd (but no the trophy column which comes first) */
.podium1>:nth-child(n+2){background:#ffe777!important}
.podium2>:nth-child(n+2){background:#ddd!important}
.podium3>:nth-child(n+2){background:#ecb580!important}
/* if the screen height is less than 720px, get rid of the sticky header */
@media (max-height:670px){
header{position:relative}
body:not(#__tagging) main::before{top:0}
/* either no padding, or 100px if there's an advert */
body:not(#__tagging) main{padding-top:0px}
body.doubleHeightAdvert:not(#__tagging) main{padding-top:90px !important}
.results-table-header{top:0!important} /* this line needs to be below the other important declarations for this element */
#__tagging article{margin-top:-1.5rem;height:100%}
}
@media (max-height:670px) and (max-width:732px) {
/* either no padding, or advert height + 20px if there's an advert */
body:not(#__tagging) main{padding-top:0px}
body.doubleHeightAdvert:not(#__tagging) main{padding-top:9.127vw !important} /* TODO INTENSE */
}
/*
* INSTANT BUY & OTHER BUTTON
*/
a.button,span.bought,input[type=button],button,input[type=submit]{border:1px solid var(--default-button-border);border-radius:3px;background:var(--default-button-bg);color:var(--default-text-color);padding:5px 8px;font-size:1em;font-weight:var(--n-links)}
span.bought{font-size:.9em;text-align:center}
.button_buy{border-color:#5a2700;background:linear-gradient(#fcce65,#ea9f44);font-size:.9em;color:#111}
.button_AOP{border-color:#2d5525;background:linear-gradient(#b6dfb3,#56c23a);font-size:.9em;color:#111}
a.button{margin-right:10px;color:var(--default-text-color);display:inline-block}
a.button:only-child{margin-right:0}
a.button:hover{color:var(--default-text-color);text-decoration:none}
a.button.sel{font-weight:var(--b)}
/*
* links to other course results on race results page
*/
#groupNames{text-align:center}
#groupNames a.button{border-radius:.5em;background:#b00;color:#fff;margin:1em;border:3px solid transparent;background-clip:padding-box}
#groupNames a.button.sel{background:#c00;border:3px solid black;font-weight:500!important}
#groupNames a.button input{cursor:pointer}
span.button.group-name{border-radius:.5em;background:#b00;color:#fff;font-size:1rem;padding:5px 8px;font-weight:var(--b)}
/* on event pages buttons are in the h2 next to category names and we want them to be more subtle */
#__event_results h2 a{padding:1px 7px 2px;position:relative;top:-4px;border:1px solid #aaa;border-radius:3px;background:linear-gradient(#fff,#eee)}
input[type=submit]{margin-right:10px}
input:only-child{margin-right:0}
p.callToAction{text-align:center}
p.callToAction a{display:inline-block;padding:30px;border-radius:15px;background:#e00;color:#fff;font-weight:var(--b);cursor:pointer}
p.callToAction a:hover{color:#fff}
p.claimButton{float:right;margin:0 0 1em 0}
p.claimButton a{padding:10px 20px;font-weight:var(--n);margin-right:0}
.claimedButton a{background:green!important;padding:10px 20px;font-weight:var(--n);margin-right:0}
div.columns{column-width:30em;padding-top:1.5em}
div.columns>:first-child{margin-top:0}
div.columns>:first-child>:first-child{margin-top:0}
div.columns>:first-child>:first-child>:first-child{margin-top:0}
div.columns section{break-inside:avoid}
/*
* AOP CORNER RIBBON
*/
.corner-ribbon{font-size:12px;width:380px;position:absolute;text-align:center;line-height:1.5;padding:.5em 3em .5em 4em;letter-spacing:1px;color:#f2f2f2;transform:rotate(30deg);transform-origin:0 0;top:-60px;right:-125px;border:1px solid #000;box-shadow:0 0 8px rgba(0,0,0,1);text-indent:15px;opacity:.9;background:#d43 linear-gradient(to bottom,#a02 0%,#c03 25%,#a02 100%);z-index:2}
.corner-ribbon a{color:#fff!important;text-decoration:underline!important}
/*
* TOOLTIPS
*/
body{
--tooltip-left:50%;
}
.question-mark{width:16px!important;height:16px!important;cursor:help;vertical-align:-4px}
#tooltip{text-align:center;color:var(--tooltip-text-color);background:var(--tooltip-bg-color);border-radius:10px;position:absolute;z-index:102;padding:1em 1.5em}
#tooltip.show{opacity:.97}
#tooltip::after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--tooltip-bg-color);border-bottom:0;content:'';position:absolute;left:var(--tooltip-left);bottom:-9px}
#tooltip.arrow-on-top::after{border-top:0;border-bottom:10px solid var(--tooltip-bg-color);top:-9px;bottom:auto;margin:0}
#tooltip{box-shadow:10px 10px 18px -4px #000}
#tooltip{max-width:500px}
@media (max-width:500px){
#tooltip{max-width:100%}
}
#tooltip.wide{max-width:100%}
/*
* BASKET & BASKET PAGE
*/
#basketlink>a{position:relative;display:inline-block;color:#fff;white-space:nowrap}
#basket-items th:last-child,.cartitem td:last-child{padding-left:1em}
.cartitem input{width:50px}
.cartitem .tn{width:128px;aspect-ratio:1}
.cartitem td{width:100px;vertical-align:top;border-bottom:1px solid #ccc;padding:2rem 0}
.cartitem:first-child td{border-top:1px solid #ccc}
.cartitem h2{margin:0 0 .7em!important;font-weight:var(--b);font-size:1.2em}
.cartitem p:not(.notes){margin:0 0 .5em!important}
#cart-totals{text-align:right;padding-top:1em;font-weight:var(--b);font-size:1.3em}
#paypal-button{text-align:right}
#basket-items{width:100%;margin-top:1em}
#basket-items>thead>tr>th{font-size:1.2em;padding-bottom:0.8em;font-weight:700;text-align:left}
#basket-items th:nth-child(1){width:auto} /* thumb width + some whitespace */
#basket-items th:nth-child(2){width:100px}
#basket-items th:nth-child(3){width:100px}
#basket-items :is(th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4)){text-align:center}
#__basket article{display:grid}
#__basket form[action*="paypal"]{text-align:right}
#__basket form[action*="paypal"] + hr{width:100%;margin-top:2rem}
#__basket hr + p{text-align:center;font-size:.7rem;margin:.25rem 0 -1rem}
/*
* EVENT PAGE HEADER
*/
.eventpageheader{padding:.75em 0 1rem;border-bottom:1px solid #ccc}
/*
* GOOGLE MAPS
*/
.GMAP_control{background:#fff;border-radius:2px;cursor:pointer;margin:10px 10px 10px 0;text-align:center}
.GMAP_control>div{color:rgb(25,25,25);font-family:system-ui,Roboto,Arial,sans-serif;font-size:11px;line-height:27.5px;padding:2px 8px}
.GMAP_control:hover{background:#ebebeb}
/* for some reason the stock google code doesn't do this, but we can add it here:*/
.gm-fullscreen-control{cursor:pointer}
/*
* REGION CODES
* TODO this shouldn't be a DB lookup!
*/
.au,.au a{font-weight:var(--b);color:#900}.au a:hover{color:#600}.ca,.ca a{font-weight:var(--b);color:#888}.ca a:hover{color:#555}.eu,.eu a{font-weight:var(--b);color:#f60}.eu a:hover{color:#d50}.gb,.gb a{font-weight:var(--b);color:#395797}.gb a:hover{color:#128}.ie,.ie a{font-weight:var(--b);color:#28f}.ie a:hover{color:#c00}.nz,.nz a{font-weight:var(--b);color:#70a}.nz a:hover{color:#508}.us,.us a{font-weight:var(--b);color:#222}.us a:hover{color:#000}.wc,.wc a{font-weight:var(--b);color:#070}.wc a:hover{color:#040}.za,.za a{font-weight:var(--b);color:#7a5}.za a:hover{color:#9c7}
/*
* SITE LOGIN LINKS
*/
#siteloginlinks{position:absolute;top:18px;color:#f5f5f5;font-size:.9em;right:0}
#siteloginlinks>a{color:#f5f5f5;font-weight:var(--b)}
#siteloginlinks>a:hover{color:#fff}
/*
* CALENDAR
*/
#calendar{display:flex;flex-wrap:wrap;justify-content:space-between;margin-right:-2em}
#calendar>.month{margin:0 2em 2em 0;overflow:hidden!important;border-radius:0 0 20px;box-shadow:2px 2px 8px rgba(0,0,0,.6);background:var(--popout-bg-color);flex:1 1 400px}
#calendar>.month>h2{font-size:1.5em;text-align:center}
#calendar>.empty-month{box-shadow:none;background:transparent}
#calendar>.month>.week{display:flex}
#calendar>.month>.week>.date{flex:0 0 65px;background:rgba(0,0,0,.2);color:var(--default-text-color);display:flex;align-items:center;justify-content:center}
#calendar>.month>.week>.events{font-size:.9em;background:rgba(0,0,0,.2);flex:1 1 300px;padding:1em 0;display:flex;justify-content:center;flex-flow:column}
#calendar>.month>.week>.events>span:not(:last-child){margin-bottom:.3em;display:block}
#calendar>.month>.week:nth-child(odd)>div{background:transparent}
#calendar>.month>.week.currentWeek>.date{background:#203369;color:#fff}
#calendar>.month>.week.currentWeek>.events{outline-offset:-3px;outline:3px solid #203369;padding-left:1em}
.highlight a{display:block;border:1px solid #888;border-radius:6px;padding:2px 6px;font-weight:var(--b);color:var(--default-text-color)!important}
#cal_hl1,#cal_hl2,#cal_hl3,#cal_hl4{width:220px;margin-right:10px}
#cal_hl4{margin-right:0}
.hl1 a,#cal_hl1{background:#ff9}
.hl2 a,#cal_hl2{background:#fb8}
.hl3 a,#cal_hl3{background:#bfb}
.hl4 a,#cal_hl4{background:#cdf}
.extrainfo{display:inline;color:var(--default-text-color);font-weight:var(--n);white-space:nowrap}
.uplift,.uplift a{color:#395797}
#cal_stragglers{font-size:.8em;margin:0 0 2em}
#cal_recents{font-size:.8em;margin:0 3em 2em 0}
.cal_extra strong{margin-right:.5em}
.cal_extra span,.cal_extra span a{font-weight:var(--n)!important}
.cal_extra span{background:#f5f5f5;border:1px solid #ccc;border-radius:.4em;margin:0 .5em .5em 0;padding:0 .4em;display:inline-block}
/*
* FROM OTHER CSS FILE, NEEDS MERGING...
*/
.indent,.bullets{margin-bottom:1em}
.cms ul,.bullets,.bullets ul{list-style-type:disc}
.cms ul,.indent,.bullets,.indent ul,.bullets ul,ol{padding-left:3em}
.cms li,ol li,.bullets li,.indent li{margin:0 0 .75em}
a{color:var(--default-link-color);text-decoration:none;font-weight:var(--n-links)}
a:hover{text-decoration:underline}
i{font-size:.8em;font-style:normal}
#__track .list{margin-left:5em;margin-bottom:2em}
.taggingnotes{clear:left;font-size:.8em}
.taggingnotes a{color:#d00}
.formseparator{margin-top:2em;clear:left}
.formseparator span{position:relative;top:-15px;left:50%;background:#f5f5f5;padding:5px}
#__event_results #eventviewoptions{font-size:1em;text-align:center}
#photocontent{position:relative;display:inline-block;margin:0 auto 1em;max-width:100%;text-align:left}
#photocontent>div:first-of-type{position:relative}
#slideshowinfo{text-align:right;font-size:.75em;float:right}
#previewinfo{font-size:.75em;margin:.25em 0}
#photo{border:3px solid #000;max-width:calc(100% - 6px);display:block}
#cover{z-index:1;position:absolute;top:0;bottom:0;left:0;right:0}
#photoAndContentHolder{justify-content:flex-end;display:flex;flex-wrap:wrap;margin-top:1em;flex-direction:row-reverse;margin:1em -1em 0}
#photoHolder{flex-grow:0;text-align:center;margin:0 1em}
#thejLoupe{position:absolute;width:250px;height:180px;background:#222;z-index:100000}
#magviewplus{z-index:100001;width:240px;height:152px;display:none;position:absolute;top:600px;left:0}
#zoomWrapper{overflow:hidden;margin-top:5px;margin-left:5px;width:240px;height:152px}
.gallery img,#photo,#magviewplus,#zoomWrapper img{opacity:1} /* overrule the dimming of dark mode photos */
#clicktoenhance{text-align:center;font-size:.7em;padding:4px;margin:0}
#clicktoenhance .enhance{color:#7d7}
#clicktoenhance{color:#aaa}
#compareform{margin:-12px 0 2em;clear:left}
#compareform>span{font-size:.7em}
#jsLoader{clear:both;text-align:center;padding:5em 0 80em}
#emailwarn:not(:empty){font-size:.8em;margin-left:4px;padding:1em;border:2px solid #a00;background:#fdd;border-radius:6px;color:#a00;font-weight:var(--b)}
#otherphotosofrider{clear:left;margin:-1.6em 1em 2em 0!important}
#otherphotosofrider img{vertical-align:middle;margin:0 2px 2px 0}
img.hidden-photo, .gallery li.hidden-photo{outline:4px solid #000;outline-offset:-4px}
.hidden-photo{opacity:0.5;filter:grayscale(1)}
img.hl, .gallery li.hl{outline:4px solid #0075fb;outline-offset:-4px}
.gallery li.hl-other{outline:2px solid #0075fb;outline-offset:-2px}
#taggingcontrols li.hl .title{bottom:4px;left:4px;right:4px;overflow:hidden;text-overflow:ellipsis}
#taggingcontrols li.hl-other .title{bottom:2px;left:2px;right:2px}
#taggingcontrols li.hl-other{border-radius:9px}
#taggingcontrols li.hl-other img{border-radius:9px}
#taggingcontrols li.hl-other .title{border-radius:0 0 7px 7px}
#taggingcontrols input[type=checkbox]{position:absolute;left:5px;top:5px;z-index:7;outline:none;transform:scale(1.5);box-shadow: 0px 0px 9px 0px rgba(0,0,0,1)}
#taggingcontrols input[type=checkbox]:checked{box-shadow:none}
/* this shows a count of how many photos are going to be untagged */
#untagcount:not(:empty){font-size:.8em;margin-left:-5px}
.cartitem .tn{display:block;margin:0}
.cartitem #otherphotosofrider{margin:0 0 0 0 !important}
.cartitem #otherphotosofrider img{width:62px;height:62px;margin:4px 4px 0 0}
.cartitem #otherphotosofrider img.hl{outline:0}
/* arrows for prev/next photo*/
#prevphoto{z-index:2;position:absolute;left:3px;top:3px;bottom:3px}
#nextphoto{z-index:2;position:absolute;right:3px;top:3px;bottom:3px}
#prevphoto a,#nextphoto a{display:flex;justify-content:center;align-items:center;height:100%;color:rgba(255,255,255,.8);text-shadow:0 0 5px rgba(0,0,0,.6),0 0 5px rgba(0,0,0,.6),0 0 5px rgba(0,0,0,.6);font-size:8vw}
#prevphoto a{padding:0 5vw 0 2vw}
#nextphoto a{padding:0 2vw 0 5vw}
#prevphoto a:hover,#nextphoto a:hover{text-decoration:none;color:rgba(255,255,255,1)}
#prevphoto a:hover{background:linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));color:rgba(255,255,255,1)}
#nextphoto a:hover{background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));color:rgba(255,255,255,1)}
#eventgraph{position:relative}
#eventgraph #chartcontainer{height:500px}
#chartcontainer{background:#333;border-radius:9px;margin:0 0 1em;clear:both}
#chartholder{position:relative;clear:both}
.highcharts-container,#chartcontainer{cursor:crosshair}
#findphotosof{float:left;clear:left;margin-top:0}
.true>td{font-weight:var(--b)}
#__inbox .outgoing,#__inbox .incoming{background:#eee;padding:1em;margin:1em;border:1px solid #ccc}
#__inbox .outgoing{margin-left:4em}
#__inbox table{border-width:0;border-collapse:collapse}
#__inbox th,#__inbox td{padding:5px 8px;color:var(--default-text-color);text-align:left;vertical-align:middle;border:0}
#__inbox tr{cursor:pointer}
#__inbox .unread{font-weight:var(--b)}
#__inbox .snippet{font-weight:var(--n)!important}
#__inbox td{border-bottom:1px solid #e5e5e5}
.short{width:80px}
.long{width:100%}
.vshort{width:60px}
#__upload .nobullets .notes{display:block;padding-left:25px;font-size:.8em;color:#666}
#__upload .nobullets li{margin-bottom:.5em!important}
#__upload .warning{color:#d00}
.incoming,.outgoing{background:#eee;padding:1em;margin:1em;border:1px solid #ccc}
.outgoing{margin-left:4em}
.tablehighlight td{font-weight:var(--b);background:#CEE4A8!important}
#recentresults li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.75em}
#recentresults li a:not(:first-child){margin-left:.5rem}
#recentresults abbr{cursor:default;text-decoration:none}
#recentresults .flag{margin:0 .5em}
#accountflags{text-align:center}
#accountflags img{margin-right:7px}
blockquote:not(.cms){font-size:.8em;border:1px solid #888;background:rgba(0,0,0,.1);padding:1em 2em;border-radius:3px;box-shadow:5px 5px 20px rgba(0,0,0,.2);margin:0 0 1em}
blockquote.cms {
font-family: Georgia, serif;
font-style:italic;
border-radius:40px;
font-size: 1.2em;
background:var(--popout-bg-color);
overflow-wrap:anywhere;
padding: 2em 2em 2em 4em;
line-height: 1.5;
position: relative;
color: var(--default-text-color);
}
blockquote.cms::before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 7em;
position: absolute;
left: -5px;
top: -18px;
color: #7a7a7a;
}
blockquote.cms cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 1em;
}
blockquote.cms cite::before {
content: "\2014 \2009";
}
#__widgets code{color:#666;font-style:italic}
#__worldcuppodiums .female a{color:purple}
#buyOptions{border-width:1px 0;max-width:700px;margin:0 1em 1em}
#buyOptions hr{margin-top:1.5em}
#buyOptions strong{float:left;clear:left}
#buyOptions strong:nth-of-type(2){margin-top:1em}
#buyOptions input[type=image]{border:0;position:relative;top:4px;width:75px;height:19px}
#buyOptions h3{font-size:1em;font-weight:var(--b);margin-bottom:.5em}
#buyOptions h4{font-size:.8em;font-weight:var(--b);margin-bottom:.5em}
.productGroup{margin:0 0 2em}
.productGroup::after{content:'';clear:both;display:block}
.productGroup form,.productgroup div{border-bottom:1px solid #ddd;margin:8px 0;padding-bottom:8px}
.productGroup form span{line-height:19px;display:inline-block}
.productGroup form span{line-height:19px;display:inline-block}
.productGroup form:last-of-type{border-bottom:0}
.buyForm{vertical-align:middle}
.productDescription{vertical-align:middle;width:calc(100% - 140px);padding-right:10px}
.buyForm button,.buyForm .bought{vertical-align:middle;width:100px}
.hoverinfo{text-decoration:underline;cursor:help}
.commercialEnquiryPanel{margin-bottom:0}
.footer_img{width:600px;height:122px;border:1px solid #ccc;display:none}
dl{margin-bottom:1em}
dt{font-weight:var(--b);width:100px;display:block;float:left;clear:left;margin:0 0 .5em}
dd{display:block;float:left;margin:0 0 .5em}
#donateform p{text-align:center}
.map{width:600px}
#map{height:300px;margin:0 0 .25em}
.note{color:#666}
.notes{font-size:.9em;max-width:none}
.smallnotes{font-size:.6em}
.logo_body{display:inline-block;width:86px;position:relative}
.logo_body img{position:absolute;top:-15px;left:0}
.img{text-align:center;background:#000;color:#fff;border:3px solid #000;line-height:1.8em;font-size:.9em;display:inline-block}
.img img,.img span{display:block}
.img a{color:#eee}
.img a:hover{color:#fff}
.imgright{float:right;width:auto;margin:1em 0 1em 1em}
.imgleft{float:left;width:auto;margin:1em 2em 1em 0}
.imgnorm{float:left;width:auto;margin:1em 0}
.x1924{visibility:hidden}
footer .x1924{display:none}
.synopsis{color:#666;font-size:1.1em}
.dl{font-size:1em}
p.info{font-size:1em;padding-bottom:2em;margin-bottom:2em;border-bottom:1px solid #aaa}
p.info span{display:block}
p.info .date{font-weight:var(--b)}
#footnotes{margin:2em 0;text-align:center}
.split a{font-weight:var(--n)!important}
.catE{font-size:1em}
.results caption{font-weight:var(--b);font-size:1.5em}
span.dummy{color:#666}
/* don't want ftw to be green on results page anymore */
b,strong.ftw,strong.ftw a{color:#080} /* used to be 090 but it didn't provide enough contrast for AA rules */
#eventresults strong.ftw, #eventresults strong.ftw a{color:var(--default-text-color)}
strong.fail,strong.fail a{color:#b00}
strong.soso,strong.soso a{color:#f60}
strong.ftw a,strong.fail a,strong.soso a{text-decoration:underline}
#compare tbody .totals strong{color:var(--default-text-color);font-size:1.2em}
.parse td{background:#def}
.parse th{font-size:2em;background:transparent}
.err,.err a{color:#f00;font-weight:var(--b)}
.faq{margin:0 0 3em}
p.date{font-size:.9em}
.uplift,.uplift a{color:#555}
.uplift a:hover{color:#111}
.uplift{font-size:.9em}
.tagwarn{font-weight:var(--b)}
.tagwarnsoso{color:#f60}
.tagwarnfail{color:#900}
/*
* FORM FILTERS
*/
#filterForm{margin:0 0 1em -.5em;z-index:100000000;display:flex;flex-wrap:wrap;line-height:2.5em}
#__home #filterForm{margin-bottom:0}
#filterForm.rightAligned{justify-content:flex-end}
.filteredContent{clear:left}
/* each individual filter "button" */
.filter{height:2.5em;display:inline-block;position:relative;border:1px solid transparent;padding:0 1.4em 0 .5em;cursor:pointer}
.filter.disabled{color:var(--disabled-text-color)}
.filter.selected{background:var(--popout-bg-color)!important}
.filter.selected,.filter:not(.disabled):hover{background:var(--popout-bg-color);border:1px solid #444;border-radius:.25em}
span.filter-highlight{font-weight:var(--b);color:#f94}
.filter input[type=text]{padding:0 15px;display:block;margin-bottom:.5em;width:100%;min-width:200px}
/* the "drop-down arrows" */
.filter::after{border:4px solid transparent;border-top-color:var(--default-text-color);content:'';height:0;width:0;position:absolute;right:8px;top:47%}
.filter.disabled::after{border-top-color:var(--disabled-text-color)}
/* the text and clear buttons shown in the filter button */
.filter>p>span.selectedfilteroptions{display:inline-block;max-width:115px;overflow-x:hidden;vertical-align:top;white-space:nowrap;text-overflow:ellipsis;padding-left:5px;font-weight:var(--n-links)}
.filter>p>span.selectedfilteroptions:empty{padding-left:0}
#recentresults .filter>p>span.selectedfilteroptions{max-width:50px}
.filter>p>.clearoptions{display:inline-block;font-size:16px;width:16px;color:#d00;margin-left:6px} /* width here gets toggled from 4px to 16px via JS */
.filter>p>.clearoptions:empty{width:0;margin-left:0} /* width here gets toggled from 4px to 16px via JS */
.clearoptions svg{top:-1px}
/* how labels inside the hidden panel behave */
.filter>.hiddenpanel>label{display:block;white-space:nowrap;line-height:2em;padding-left:.75em}
.filter>.hiddenpanel>label:hover>span:first-of-type{text-decoration:underline}
.filter>.hiddenpanel>label>a{font-size:.8em}
.filter>.hiddenpanel time{color:#37f;font-size:.9em;font-weight:var(--b)}
/* this hides the bottom border of the active filter */
.filter.selected::before{content:'';width:100%;height:5px;position:absolute;left:0;bottom:-1px;background:var(--popout-bg-color);z-index:5}
.hiddenpanel{background:var(--popout-bg-color);max-height:400px;max-width:98.4vw;overflow-y:auto;overflow-x:auto;border:1px solid #444;display:none;padding:1em 0 1em 1em;position:absolute;top:2.2em;left:-1px;border-radius:0 0 .25em .25em;z-index:2}
.hiddenpanel label :last-child{padding-right:1em}
.rightAligned .hiddenpanel{right:-1px;left:auto}
#__uplifts aside{float:right;width:20%;margin:2em 4em 1em 2.5em;padding:1em;background:#f5f5f5}
#ajaxloader{text-align:center;margin:4em 0 80em}
#allpodiums{margin-bottom:40px;float:left}
.yearpodiums{margin-bottom:40px;float:right;clear:right}
.organiserlogo{position:relative;width:260px;height:250px;margin:0 2% 10px 0;float:left;text-align:center}
.organiserlogo>div{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
.organiserctrlf{color:transparent;display:inline-block;margin:0 auto 1em}
.orgyears{font-size:.8em}
#orgworldseries{width:550px;margin:0 auto}
.droppoints{color:#a00;font-size:.8em}
#shoploader{text-align:center;margin:50px 0 10px}
#shoploader img{z-index:1}
#shopframe{z-index:2;background:transparent;margin:-75px 0 0;height:3000px;width:100%;border:0;overflow:scroll}
#myShop{font-family:system-ui,Roboto,sans-serif!important}
form .notes{font-size:.8em;font-style:italic;color:#666}
#facebook{float:right;width:330px;height:89px;margin:-8px 5px 1em 10px}
.female .cat{color:purple;font-weight:var(--b)}
.pwtoggle{padding-left:5px;font-size:.8em}
.pwtoggle input{position:relative;top:4px;left:-1px}
.requirednotes{text-align:right;font-size:.8em}
p.submit{text-align:right}
.error{color:#d00}
#magnifier{z-index:100;position:absolute;display:none;overflow:hidden;border:1px dashed #fff;cursor:crosshair}
.msg{border-radius:5px;padding:1em 2em .5rem;margin:1em 0;position:relative;background:var(--msg-info-bg);color:var(--msg-info-color);box-shadow:0 0 5px 0 #000;max-height:80vh;overflow-y:auto}
.msg.error{background:var(--msg-error-bg);color:var(--msg-error-color)}
.msg.success{background:var(--msg-success-bg);color:var(--msg-success-color)}
.msg.warning{background:var(--msg-warning-bg);color:var(--msg-warning-color)}
.msg h2{font-size:1em;font-weight:var(--b);display:inline-block;border-bottom:1px solid;border-color:inherit;margin-top:0!important}
.msg h3{font-size:1em;font-weight:var(--b);display:inline-block;border-bottom:1px solid;border-color:inherit;margin-top:0!important}
.msg .close{font-size:1.5em;padding:7px 9px 2px 7px;text-decoration:none!important;font-weight:var(--b);position:absolute;top:0;right:0;color:#444;line-height:1}
.msg a{color:rgba(0,0,0,.65)!important;font-weight:var(--b);text-decoration:underline!important}
.floatingMsg{position:fixed;left:50%;top:33%;transform:translate(-50%, -33%);width:80%;max-height:80%;max-width:60em}
#cloak{position:fixed;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:100000;top:0;left:0;display:flex;align-items:center;justify-content:center}
#js-confirm{max-width:450px;display:flex;flex-direction:column;justify-content:space-around;background:#f5f5f5;border-radius:2em;padding:1em 3em;text-align:center}
#js-confirm div{margin:2em 0}
#yes,#no{border-radius:1em;background:#d64;font-weight:bold;color:#fff;width:10em;padding:1em 2em;cursor:pointer;white-space:nowrap}
#no{margin-right:1em;background:#aaa}
span.numevents{font-size:.8em;color:var(--subtle-text)}
li.hover span.numevents{color:#ccc}
/*the two panels on the photos index page*/
#recentphotos{float:left;width:360px;margin-right:2%;padding-right:1%;border-right:1px solid #999}
#recentphotos ul{font-size:1.1em;margin-bottom:20px}
#recentphotos li{margin:0 0 1em;text-overflow:ellipsis;overflow:hidden}
#recentphotos .notes{font-size:.8em;color:#444}
#recentphotos strong{font-size:.8em}
#thegreatuntagged{float:left;width:calc(98% - 360px)}
#recent-uploads{display:flex;justify-content:center;margin:-.5em -.75em 0;flex-wrap:wrap}
.optfooter{color:#f60}
.flaglarge{position:relative;top:6px;margin-right:7px}
#otherriders{position:relative;float:right;max-width:100%;overflow:hidden;margin:2em 0 1em;background:var(--article-bg-color);border-radius:5px;border:1px solid rgba(0,0,0,.4)}
#otherriders h2{text-align:right;margin:0;font-size:1.2em;white-space:nowrap;padding:.25em 1em}
#otherriders h3{margin:0;font-size:1.1em;white-space:nowrap;padding:.25em 1em}
#otherriders ul{display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;margin:0 1em .45em}
#otherriders li{white-space:nowrap;margin-right:1em}
#otherriders li:empty{border:0;height:0}
#otherriders.collapsed{width:auto!important}
#otherriders.expanded{visibility:hidden}
#otherriders.collapsed{height:2.5em;overflow:hidden}
#otherriders.collapsed ul{visibility:hidden!important;margin:0;overflow:hidden}
#otherriders.collapsed h3{visibility:hidden;margin:0;height:0}
#otherriders h2{cursor:pointer}
#otherriders.collapsed h2::after{font-size:.5em;position:relative;top:-.3em;padding-left:1.5em;content:'╲╱'}
#otherriders.expanded h2::after{font-size:.5em;position:relative;top:-.3em;padding-left:1.5em;content:'╱╲'}
#select_event{font-family:'Courier New',Courier,monospace!important;font-size:1em;width:100%}
/*
* ORGANISER SOCIAL FEEDS
*/
#feeds_holder{display:flex}
#fb_feed{width:300px;flex-shrink:0}
#tw_feed{width:380px;flex-shrink:0}
#fb_feed{height:600px}
#tw_feed{overflow:auto;height:600px;border-left:40px solid #fff;border-right:40px solid #fff}
.ig_post{float:left;font-size:.8em;color:#666;width:150px;margin:0 0 10px 10px}
.ig_post h3{font-weight:var(--b);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig_post>div{position:relative;width:150px;height:150px;margin-bottom:4px}
.ig_post>div>a>.play_button{position:absolute;left:55px;border-radius:3px;top:55px;width:0;height:0;border-left:40px solid rgba(255,255,255,.8);border-top:20px solid transparent;border-bottom:20px solid transparent}
/*
* EVENT POSITION TROPHY ICONS
*/
.trophyIcon>i{font-size:1.4em;color:#fff}
.trophyGold>i{color:gold}
.trophySilver>i{color:silver}
.trophyBronze>i{color:brown}
.trophyCol{border:0!important;padding:0!important;min-width:18px}
.cnt_hl .trophyCol{background:transparent!important}
/*
* ANIMATIONS
*/
/* this is for the fake facebook chat icon, and activated when the icon is clicked */
@keyframes pulse{
0%{transform:scale(1)}
25%{transform:scale(1.10)}
50%{transform:scale(1)}
75%{transform:scale(.90)}
100%{transform:scale(1)}
}
/* this is for the 'show additional columns' link on tables of data */
@keyframes twitch{
0%{transform:none}
50%{transform:rotateZ(-10deg) scale(1.1)}
60%{transform:rotateZ(12.5deg) scale(1.1)}
68%{transform:rotateZ(-7.5deg) scale(1.1)}
75%{transform:rotateZ(7.5deg) scale(1.1)}
82%{transform:rotateZ(-6deg) scale(1.1)}
85%{transform:rotateZ(0) scale(1.1)}
100%{transform:rotateZ(0) scale(1)}
}
.caption>span>a{animation:twitch .5s ease-in 2s 1;display:inline-block}
/*
* PRINT
*/
@media print{
body{background:#fff}
.caption,footer,header,#topAdvertHolder,#bottomAdvertHolder,page-tabs,#headers,#pageLogo,#fake-chat{display:none}
body,main{background:#fff!important;margin:0!important;padding:0!important}
.results-table-header{margin:3em 0 1em 0}
body{zoom:70%}
abbr{border-bottom:none!important;text-decoration:none!important}
h2:first-of-type{page-break-before:avoid;margin-top:inherit}
h2{page-break-before:always;margin-top:0!important}
#eventsponsors h2,#seriespoints>h2:first-of-type{page-break-before:avoid;margin-top:1em}
a{color:#000!important}
td{max-width:300px!important;overflow:hidden!important;text-overflow:ellipsis}
article{border:0;box-shadow:none;width:100%!important}
main::before{display:none}
}
/*
* RESPONSIVE
*/
header>nav{overflow:hidden} /* this is needed for the JS function isOverflown */
/* once we have switched to the namburger menu with JS, need to justify what is left to the right */
/* if we try to do this to the menu before it's hamburgerised, the checkheaderwidth function doesn't measure the full width of the menu items. shrug. */
nav.hamburger>ul{justify-content:end}
/* if we have a hamburger menu (narrow screen) and it's not been expanded, hide middle items */
nav.hamburger:not(.fullscreen)>ul{display:none}
nav.fullscreen{} /* top:88px overlaps the header but gives us equal spacing between basket and the other options */
nav.fullscreen>ul{padding-left:0;background:#121b2a;position:absolute;top:6.5rem;width:100%;left:0;display:flex;flex-direction:column;align-items:flex-end;z-index:5;box-shadow:0 .0625rem .1875rem rgba(0,0,0,.68);padding-top:1rem}
nav.fullscreen>ul>li{text-align:center;display:block;flex-basis:min(3.75rem, 10vh);width:100%} /* because we're in a column, this is the height, not the width */
#basketlink{margin-right:2em}
/* if the screen is at least 600px wide, show hamburger menu as a line rather than a vertical list */
@media (min-width:600px){
nav.fullscreen>ul{flex-direction:row;justify-content:center;padding-top:0;gap:0;margin:0}
nav.fullscreen>ul>li{flex-basis:auto;width:auto;margin:0 1rem}
}
@media (max-width:1200px){
#feeds_holder{flex-direction:column}
#fb_feed{margin-bottom:3em}
#tw_feed{border:0;margin-bottom:3em}
}
@media (max-width:1120px){
#__support aside{float:none;width:100%;max-width:25em;margin:1em 0}
}
@media (max-width:414px){
div.photoCard{zoom:.8}
}
@media (max-width:375px){
div.photoCard{zoom:.7}
}
/* between 763px and 880px and below 480px, hide the venue names */
@media (max-width:880px) and (min-width:763px){
strong.venue{display:none}
#recentresults .flag{margin-left:0}
}
@media (max-width:480px){
strong.venue{display:none}
#recentresults .flag{margin-left:0}
}
/* photos page */
@media (max-width:1000px){
#recentphotos{width:calc(96% - 420px)}
#thegreatuntagged{width:420px}
}
@media (max-width:800px){
#recentphotos{width:calc(96% - 280px)}
#thegreatuntagged{width:280px}
}
/* /advertise */
@media (max-width:750px){
#advertise1,#advertise2{float:none;width:100%;margin:2em auto}
}
/* /photos/tag */
@media (max-width:728px){
#__tagging header{margin-top:0}
}
/* /photos/index */
@media (max-width:650px){
#recentphotos{width:calc(96% - 140px)}
#thegreatuntagged{width:140px}
}
@media (max-width:600px){
.results-table-header>h2>span>a>span{display:none} /* hide the "lap charts" and "finish spread" labels */
html footer{overflow:hidden;margin-top:-1px}
.corner-ribbon{font-size:11px!important;right:-140px!important;top:-69px!important}
article{padding:1em .75em}
.results-table-header{margin:3em -.75em 1em -.75em;padding:0 1em}
html article:last-of-type{margin-bottom:0}
nav>.fullscreen::after{top:0;right:0;width:0;height:0}
}
@media (max-width:599px){
#__tagging article{display:none}
#__tagging article.showWhenScreenTooSmall{display:block}
#__tagging main{display:grid;place-items:center;height:100%}
.showWhenScreenTooSmall>*{margin:0!important}
}
@media (max-width:580px){
.corner-ribbon{font-size:10px!important;right:-142px!important;top:-70px!important}
#recentresults>div:first-of-type{clear:left}
#recentresults>div>#filterForm.rightAligned{justify-content:flex-start;margin-left:-.1em}
#recentresults>h1{margin-bottom:.5em}
}
@media (max-width:520px){
.corner-ribbon{font-size:9px!important;right:-148px!important;top:-72px!important}
.hidewhensmall{display:none}
}
@media (max-width:480px){
.corner-ribbon{font-size:9px!important;right:-148px!important;top:-72px!important}
}
@media (max-width:450px){
.corner-ribbon{font-size:8px!important;right:-154px!important;top:-74px!important}
.rounded{width:100%;margin:0}
}
@media (max-width:420px){
#share-button{padding-right:0}
}
@media (max-width:400px){
.corner-ribbon{font-size:7px!important;right:-160px!important;top:-75px!important}
}
@media (max-width:350px){
.corner-ribbon{font-size:6px!important;right:-166px!important;top:-76px!important}
}
/*
* NEW CSS TO TIDY UP LATER GOES HERE
*/
.noncommercialwarning{margin:1em auto;padding:.3em 1em .2em;text-align:center;background:var(--notice-bg-color);border:1px solid var(--notice-border-color);color:var(--notice-text-color);border-radius:5px}
.noncommercialwarning span{text-decoration:underline;font-weight:var(--b);font-style:italic}
/* photo product panel */
#photoPricingPanel{width:100%;border:1px solid #ccc;border-width:1px 1px 0 1px}
#photoPricingPanel>div:first-of-type{cursor:pointer;background:#def;color:#111;padding:1em}
#hiddenproducts{padding:0 1em;overflow:hidden;transition:max-height 0.4s ease-in-out;border-top:1px solid #ccc}
#hiddenproducts div:first-child{margin-top:1em}
.expanded #hiddenproducts{border-bottom:1px solid #ccc} /* this used to have max height of 1000px, but why? Removed on 30th June 2021 after Adam Sherratt pointed it out in a messenger chat */
.collapsed #hiddenproducts{max-height:0}
#accordianlink{margin:-1em -1em -1em -4em;padding:1em;display:block;float:right;transition:transform 0.4s ease-in-out}
#accordianlink.open{transform:rotateX(180deg)}
#instruction{display:none}
#ctop-100-shootoutm td:nth-child(7),
#ctop-100-shootoutm td:nth-child(8),
#ctop-100-shootoutm td:nth-child(9),
#ctop-100-shootoutm td:nth-child(10),
#ctop-100-shootoutm td:nth-child(11),
#ctop-100-shootoutm td:nth-child(12),
#ctop-100-shootoutm td:nth-child(13),
#ctop-100-shootoutm td:nth-child(14),
#ctop-100-shootoutm td:nth-child(15),
#ctop-100-shootoutm td:nth-child(16),
#ctop-100-shootoutm td:nth-child(17),
#ctop-100-shootoutm td:nth-child(18),
#ctop-100-shootoutm td:nth-child(19),
#ctop-100-shootoutm td:nth-child(20),
#ctop-100-shootoutm td:nth-child(21),
#ctop-100-shootoutm th:nth-child(7),
#ctop-100-shootoutm th:nth-child(8),
#ctop-100-shootoutm th:nth-child(9),
#ctop-100-shootoutm th:nth-child(10),
#ctop-100-shootoutm th:nth-child(11),
#ctop-100-shootoutm th:nth-child(12),
#ctop-100-shootoutm th:nth-child(13),
#ctop-100-shootoutm th:nth-child(14),
#ctop-100-shootoutm th:nth-child(15),
#ctop-100-shootoutm th:nth-child(16),
#ctop-100-shootoutm th:nth-child(17),
#ctop-100-shootoutm th:nth-child(18),
#ctop-100-shootoutm th:nth-child(19),
#ctop-100-shootoutm th:nth-child(20),
#ctop-100-shootoutm th:nth-child(21){display:none}
#__event9302 table:not(#ctop-100-shootoutm) td:nth-child(6),
#__event9302 table:not(#ctop-100-shootoutm) th:nth-child(6){display:none}
.photo-tag span{display:inline-block;background:#ccc;color:#111;border-radius:3px;padding:3px 5px;margin:0 2px}
.photo-tag{line-height:1;margin-right:4px;display:inline-block}
.photo-tag a{color:#a00!important;padding:0 4px}
.photo-tag a:hover{border-radius:3px;background:#a00;color:#fff!important;text-decoration:none!important}
.photo-tag-append span{background:#222;color:#eee}
/* this is the new tag form "input" which is actually a contenteditable span */
span#s{display:block;line-height:30px;padding:8px 8px;background:#fff;border-radius:.1875rem;outline:none;width:100%;max-width:none}
span#s[placeholder]:empty::before{
content: attr(placeholder);
color: #555;
cursor: text;
font-weight:var(--b);
}
.catfound{font-weight:var(--b)}
/* order download page */
.orderdownload{width:256px;float:left;margin:0 30px 40px}
.orderdownload>h3{margin:0 0 0.25em;font-size:1em;text-decoration:underline;text-align:center}
.orderdownload>h3>a{font-weight:700;color:#000}
.orderdownload>a>img{margin-bottom:1em}
.orderdownload>a.downloadButton{position:relative;font-weight:700;width:200px;display:inline-block;margin:0 0 1em 32px;background:linear-gradient(0, #1d1d1d, #3e3e3e);color:#fff;border-radius:2em;padding:.75em 2em;text-align:left;letter-spacing:1px;transition:transform .15s ease-out}
.orderdownload>a.downloadButton:hover{text-decoration:none;transform:scale(1.1);transform-origin:center}
.orderdownload>a.downloadButton::after{content:'';width:60px;height:60px;display:block;position:absolute;border-radius:50%;background:#07af82;right:-1px;top:-6px}
.orderdownload>a.downloadButton i{width:40px;height:40px;display:block;position:absolute;right:9px;top:5px;z-index:1000}
.notdownloaded>a>img{opacity:0.5}
.downloaded{position:relative}
.downloaded::after{position:absolute;top:104px;left:104px;content:'✔';font-size:72px;color:#fff;text-shadow:0 0 .2rem #000,0 0 .3rem #000,0 0 .4rem #000,0 0 .5rem #000;pointer-events:none}
.download-progress-bar{height:25px;line-height:22px;width:100%;margin-top:10px;border-radius:4px;text-align:center;color:#000;font-family:monospace}
/* order download page */
/* Help/support page */
.q-and-a>h2{margin-bottom:0}
.q-and-a>h3 {position:relative;background:#00aabb;color:#fff;border-radius:1em;padding:1em;display:inline-block}
.q-and-a>h3::after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 0.75em solid transparent;
border-right-color: inherit;
border-left: 0;
margin-top: -0.375em;
margin-left: -0.75em;
}
.q-and-a>h3.top::after{border-top:0}
.q-and-a>h3.bottom::after{border-bottom:0}
.q-and-a>h3>.slash{font-size:1.5em;line-height:0}