/* Started from:
HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ 
See their source for comments, much editing by @alastc
*/

/* ==========================================================================
   Base styles, some normalise.css but not all
   ========================================================================== */


/* ==========================================================================

Colour:
light-red:      #d4422b;
dark-red:       #6B1B12;
bright-red:     #ef4f35;


  =========================================================================== */
@font-face {
    /* from https://github.com/elliakou/proxima-nova-web-fonts/tree/master/fonts */
    font-family: 'Proxima Nova';
    src: url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.eot');
    src: url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.woff') format('woff'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.ttf') format('truetype'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.svg#proxima_nova_altregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    color: #222;
    font-size: 1em;
    line-height: 1.5;
}

body {
    margin: 0;
    padding: 0 5px 0 5px; 
	background: #003851;
    font: 1em/1.5 'Proxima Nova', Helvetica, Arial, sans-serif;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 1.4em;
    margin: 1.3em 0 0.5em;
    letter-spacing: -0.05em;
    color: #333;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
 hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
/* better looking? */
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

textarea {
    resize: vertical;
}

/* Remove the gray background on active links in IE 10. */
a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
} 

/* Add the correct font weight in Chrome, Edge, and Safari. */
b,
strong {
    font-weight: bolder;
}

/* Remove the border on images inside links in IE 10. */
img {
    border-style: none;
}

/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
    padding: 3px 0 3px 5px;
}

/* Show the overflow in IE, / Edge. */
button,
input { 
    overflow: visible;
}
 
/* Remove the inheritance of text transform in Edge, Firefox, and IE. */
button,
select {
    text-transform: none;
}
 
/* Correct the inability to style clickable types in iOS and Safari. */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
*    `fieldset` elements in all browsers.
*/
legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress {
    vertical-align: baseline;
}

/* Remove the default vertical scrollbar in IE 10+. */
textarea {
    overflow: auto;
}

/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/* Add the correct display in Edge, IE 10+, and Firefox. */
details {
    display: block;
}

/* Add the correct display in all browsers. */
summary {
    display: list-item;
}

/* Add the correct display in IE 10. */
[hidden] {
    display: none;
}

* + * {
    margin-top: 1.1em;
}

/* ==========================================================================
   UKWA custom styles
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

a {
    color:#d4422b;
}
a:visited {
    color: #6B1B12;
}
a:hover {
    color: #ef4f35;
}
a:focus {
    color: #fff;
    background: #d4422b;
}

main p, main li {font-family: Helvetica, Arial, sans-serif;}

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }



/*  ========================================================================
    Header styles
    ======================================================================== */

.main-header {
    padding: 5px 0 0;
    position: relative;
}

.logo img {
    width: 100px;
    height: 70px;
    margin: 5px;
}

a.logo {display: inline-block;}

a.logo:hover, a.logo:focus {
    color: transparent;
    background: rgba(212, 66, 43, .5) url('/theme/images/home.svg') no-repeat 130% 170%;
    background-size: 50px 50px;
    outline: 1px solid white;
    outline-width: 0 0 1px 0;
}

#skiplink {
    position: absolute;
    top: 15px;
    height: 3em; /* IE11 */
    right: 0;
    margin: 1px;
    width: 100px;
    padding: 15px 0 15px;
    outline: 1px transparent solid;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
#skiplink svg {
    padding-bottom: 2px;
}
#skiplink .triangle {
    display: none;
    fill: #d4422b;
}
#skiplink:focus, #skiplink:hover {
    background-color: rgba(212, 66, 43, .5);
    outline-color:white;
}
#skiplink[aria-expanded=true] .triangle {
    display: block;
}
#skiplink[aria-expanded=true] .hamburger {
    display: none;
}

#discipline-menu {
    display: none;
}

.aux-nav {
    border-bottom: 1px #888 solid;
    background-color: #eee; /* IE9 */
    background-image: linear-gradient(#fff, #bbb);
    border-radius: 3px 3px 0 0;
    padding: 5px;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    max-width: 1001px; /* IE9 */
}

.aux-nav a, .aux-nav input[type=submit] { 
	margin: 0;
	background: #919191;
	color: #fff;
	padding: 3px 5px 2px;
	text-decoration: none;
	border-radius: 4px;
	text-transform: uppercase;
	text-shadow: 0 1px rgba(0, 0, 0, 0.5);
	border-top: 1px solid #666;
    border-bottom: 1px solid #FFF;
    max-width: 43%;
    overflow: hidden;
}
.aux-nav a:hover, .aux-nav a:focus, .aux-nav  input[type=submit]:hover, .aux-nav  input[type=submit]:focus {
    background: #fff;
    color: #919191;
    text-decoration: none;
    outline: none;
}

.aux-nav div[role=search], form#cse-search-box {
    margin: 0;
    float:right; /* IE9 */
}

.aux-nav input[type=search] { 
	margin: 0;
	padding: 5px 3px 2px;
	border-radius: 3px;
    background: #fff url('/theme/images/search.svg') no-repeat 99% 50%;
    background-size: 1em;
}
.aux-nav input[type=search]:focus { 
	width: 180px;
	transition-property: width;
	transition-duration: 0.5s;
	transition-timing-function: ease;	
}


/*  ========================================================================
    Main nav styles
    ======================================================================== */

.mainnav {
    border-right: 1px #C0C0C0 solid;
    background-color: #fff;
    padding: 5px;
    margin: 0;
}

/* When hidden */
.main-header .mainnav[aria-hidden="true"] {
    max-height: 0;
    padding: 0;

}

.main-header .mainnav {
    width: auto;
    max-width: auto;
    overflow-y: hidden;
    max-height: auto;
    margin: 8px 0 0 0;
}

.mainnav ul {
    margin: 0;
    padding: 0;
    border-bottom: 1px #C0C0C0 solid;
    list-style-type: none;
    list-style-image: none;
}
.mainnav ul ul { border-bottom: 0;}
    
.mainnav li {margin: 0;}

.mainnav li a, .mainnav li strong {
    letter-spacing: -0.3px;
    font-size: 12px;
    border-top: 1px #C0C0C0 solid;
    display: block;
    padding: 5px;
    color: #393939;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
}
.mainnav li a:focus {
    color: white;
}
.mainnav li a:hover {
	text-decoration: underline;
}

.mainnav li strong {
    background: transparent url(/theme/images/red-bullet.svg) no-repeat 98% 50%;
}

.mainnav h2 {
    border-left: 2px #C92D19 solid;
    padding-left: 5px;
}

.mainnav nav h2 a {
    text-decoration: none;
}

.mainnav ul ul {
    padding: 0;
    margin: 0;
}
.mainnav ul ul a, .mainnav ul ul strong {
    padding-left: 30px;
}
.mainnav ul ul ul a, .mainnav ul ul ul strong {
    padding-left: 40px;
}
.mainnav ul ul ul ul a, .mainnav ul ul ul ul strong {
    padding-left: 50px;
}


/* ==========================================================================
  Main content area styles
   ========================================================================== */

main {
    display: block; /* IE11 */
    background-color: #fff; /* IE11 */
    background-color: rgba(255, 255, 255, .95);
    padding: 5px;
    margin-top: 0; 
}

h2 {font-size: 1.3em;}
h3 {font-size: 1.1em;}

main img, main #map_canvas {
    max-width: 100%;
    height: auto;
}

p.announce {
    font-size: 1.1rem;
    color: #6B1B12;
    font-weight: 600;
}
.announce a {
    color: blue;
}

.event-list {
    border-width: 1px 0;
    border-color: #888;
    border-style: solid;
    margin-top: 0; 
}
.event-list h2 {
    margin-bottom: 0.3em;
    text-align: center;
}
.event-list ul {
    list-style-type: none;
    padding: 0; 
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.event-list li {
    flex-grow: 1;
    flex-basis: 150px;
    margin: 0 0 1rem 0;
    padding: 3px 10px 3px 56px;
    min-height: 56px;
    background-image: url('/theme/images/icons-52.svg?v=2');
    background-position: 0 -3px;
    background-repeat: no-repeat;
}
.event-list li.racing { background-position: 0 -195px;}
.event-list li.freestyle { background-position: 0 -95px ;}
.event-list li.wave { background-position: 0 -395px;}
.event-list li.slalom { background-position: 0 -295px;}
.event-list li.speed { background-position: 0 -495px;}

.event-list li time {
    white-space: nowrap;
}


/* News listing for landing pages */

.news-list h2 {
    text-align: center;
    font-weight: 400;
}

.news-list ul {
    margin: 0;
    padding: 0;
    border-top: 1px #D4D6D8 solid;
    list-style-type: none;
}

.news-list li {
    border-top: 1px white solid;
    border-bottom: 1px #D4D6D8 solid;
    margin: 0;
    position: relative;
    display: table;
    display: flex;
    padding: 10px 0;
    align-items: flex-start; 

}
.news-list li:after {/* IE9 */
    content: "";/* IE9 */
    display: table;/* IE9 */
    clear: both;/* IE9 */
}/* IE9 */

.news-list .icon {
    display: block;
    float: left; /* IE9 */
    width: 52px;
    flex-basis: 52px;
    flex-shrink: 0;
    height: 52px;
    margin: 0 5px 0 0; /* IE9 for the right margin */
    background-image: url('/theme/images/icons-52.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px #ccc;
}
.news-list .icon.racing { background-position: 0 -200px;}
.news-list .icon.freestyle { background-position: 0 -100px ;}
.news-list .icon.wave { background-position: 0 -400px;}
.news-list .icon.slalom { background-position: 0 -300px;}
.news-list .icon.speed { background-position: 0 -500px;}
.news-list .icon.custom { 
    background-position: 50% 50%;
    background-size: contain;
    box-shadow: none;
}

.news-list time {
    background: #fff;
    border: 1px #D4D6D8 solid;
    border-width: 1px 0;
    display: inline-block;
    font-size: 0.8em;
    padding: 2px 4px;
    position: absolute;
    right: 0px;
    top: -1.1em;
}

.news-list .text {
    padding-left: 5px;
    margin: 0 0 5px;
    align-self: center;
}
.news-list long .text {
    align-self: auto;
}
.news-list .text>a {
    font-size: 1.1em;
}
.news-list a {
    text-decoration: none;
}
.news-list .linkify:hover {
    background-color: white;
    cursor: pointer;
}

.news-list .linkify:hover a {
    color: #ef4f35;
    cursor: pointer;
    text-decoration: underline;
}
.news-list p {
    margin:0 5px 5px 0;
}

.pagination {
    text-align: center;
}

/* Nav area */


/* TODO responsive tables for event listings and entry */

.wrapper {
    overflow-x: auto;
    margin-top: 0.5em;
}

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}
/* events calendars */
table.vcalendar tr {
    border-bottom: 1px #ccc solid;
}
table.vcalendar td:first-child {
    width: 4em;
}

/* Lined table for the links pages */
table.lined td{
    border: 1px #ccc solid;
    border-width: 1px 1px 1px 0;
    padding: 5px;
}
table.lined td:first-child {
    width: 20%;
    text-align: center;
    border-width: 1px;
}

/*====================== Membership area ==================================== */

/* tab nav */
ul.categories { 
    list-style: none; 
    margin: -6px 0 0 20px;
    display: flex;
    padding: 0;
}
.categories li {
    float: left; 
    padding: 0; 
    margin: 5px 15px 0 0;
}
.categories li a, .categories li strong { 
    padding: 7px 5px 5px ; 
    border: 1px #ccc solid; 
}

.renewal {
    float: right;
    width: 7em;
    margin: 0;
    top: -40px;
}
.renewal p {
    margin: -5em 0 0 10px;
    padding: 0;
}

/*====================== Results listings =========================== */

ul.links {overflow: auto; list-style: none; margin: 0 0 25px 20px; padding: 0; }

ul.links li {float:left; margin: 0 10px 0 0; }


.links a.ct1_result {padding-left: 20px; background-image: url(/media/icons-16x16/table.png); background-repeat: no-repeat; background-position: center left;}
.links a.ct2_report {padding-left: 18px; background-image: url(/media/icons-16x16/comment.png); background-repeat: no-repeat; background-position: center left;}
.links a.ct3_pic {padding-left: 18px; background-image: url(/media/icons-16x16/photos.png); background-repeat: no-repeat; background-position: center left;}
.links a.ct4_video {padding-left: 18px; background-image: url(/media/icons-16x16/television.png); background-repeat: no-repeat; background-position: center left;}



/*====================== Galleries and lightboxes =========================== */

/* Photo-gallery for a lightbox, list for a non-lightbox list  */

ul.photo-gallery, ul.photo-list {  
    padding: 0.7em 0 0; 
    margin: -0.5em; 
    list-style-type: none;
    list-style-image: none;
    display: flex;
    flex-wrap: wrap;
}
ul.photo-gallery:after, ul.photo-list:after {/* IE9 */
    content: "";/* IE9 */
    display: table;/* IE9 */
    clear: both;/* IE9 */
}/* IE9 */

.photo-gallery li, .photo-list li { 
    float: left; /* IE9 */
    flex: 1 0 150px;
    margin: 0.5em 20px 1.5em; 
    text-align: center;
    max-width: 200px;
}
.photo-gallery.large li, .photo-list.large li { 
    max-width: 250px;
}

.photo-gallery li img, .photo-list li img { 
    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px #ccc;
    max-height: 120px;
}
.photo-gallery.large li img, .photo-list.large li img {
    max-height: 150px;
}
.photo-gallery li:hover, .photo-list li:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.photo-gallery li a:focus, .photo-list li a:focus {
    color: #fff;
    background-color: #ef4f35; 
}
.photo-gallery li span, .photo-list li span {
    display: block;
    margin-top: 3px;
}
.photo-gallery li a:focus span, .photo-list li a:focus span {
    background-color: #ef4f35; 
}

/* Lightbox */
#pop-over {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: rgba(0, 0, 0, .9);
    background-image: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    margin: 0;
    padding: 0;
} 
#pop-over.triggered {
    display: block;
}
#po-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    grid-template-rows: 80px 1fr;
    height: 100%;
    padding: 0;
    margin: 0;
}
#po-controls li {
    padding: 0; 
    margin: 0;
    align-self: center;
    overflow: hidden;
    position: relative;
    display: flex;
}
#po-controls .close {
    grid-column-start: span 2;
    height: 80px;
    display: flex;
}
#po-controls a {
    flex: 1 0 100%;
    text-indent: -9999em;
    outline: 0;
}
#po-controls a:focus {
    background-color: transparent;
}
#po-controls a:focus span, #po-controls a:hover span {
    opacity: 1;
}
#po-controls a:focus span {outline: 1px white solid;}
#po-close span, #po-prev span, #po-next span {
    background: rgba(0, 0, 0, .5) url(/theme/images/close.svg) no-repeat 50% 50%;
    background-size: 35px 35px; 
    position: absolute;
    width: 35px;
    height: 35px;
    top: 10px;
    right: 10px;
    opacity: 0.5;
}
#po-prev span{
    background-image: url(/theme/images/previous.svg);
    left: 10px;
    top: 50%;
} 
#po-next span {
    background-image: url(/theme/images/next.svg);
    top: 50%;
}

#po-next, #po-prev {
    display: block;
    flex: 1 0 100%;
    height: 90vh;
    height: calc(100vh - 80px);
}

#po-description {
    position: relative;
    top: -2em;
    text-align: center;
    display: block;
    outline: 1px black solid;
    margin: 0 auto;
    width: 50%;
    color: white;
    background-color: rgba(0,0,0,0.7);
    padding: 5px;
}

.woty {
    border-radius: 2px;
    border: 1px #666 solid;
}
.woty:hover, .woty:focus {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.cl {clear:left;}

/* ==========================================================================
   Forms
   ========================================================================== */

/* p tags for the django forms */

#theForm > div, fieldset > div, #theForm > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5em;
    max-width: 400px;
}
#theForm > p.noflex {
    display: block;
}

#theForm fieldset {
    padding-top: 0;
    max-width: 400px;
} 
#theForm input:focus, #theForm select:focus {
    box-shadow: 0 3px 2px 0 rgba(212, 66, 43, .8);
}

#theForm label {
    flex: 1 1 120px;
    max-width: 220px;
    margin-top: 0.5em;
    align-self: flex-start;
}
#theForm > div > label + *, #theForm > p > label + * {
    flex: 1 0 220px;
    margin-top: 0.5em;
}
#theForm input[type="radio"], #theForm input[type="checkbox"] {
    margin: 0.5em 0.5em 0 3px;
}
select option {
    margin-top: 0;
}
.helptext {
    font-size: 80%;
    margin-top: 0;
}
#theForm input[type="submit"] { 
    margin-left: auto;
    margin-right: 3px;
    padding: 4px 8px;
    border-radius: 2px;
    border: 1px #666 solid;
}

dd {margin-top: 0;}

/* ==========================================================================
   Related boxes
   ========================================================================== */

/* Flex method for small screens */

.relatedbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-self: start; /*grid property so it's height shrinks */
    padding: 0;
    margin: 20px 0 0;
}

.relatedbox section {
    float: left; /* IE9 */
    color: #fff;
    border-top: 3px #C92D19 solid;
    background: rgba(0,56,81, 0.7);
    font-size: 0.8em;
    margin: 0 10px 30px;
    flex: 1 0 190px;
    max-width: 240px;
}

.relatedbox section * {
    margin-top: 0;
    line-height: 1.3;
}
.relatedbox header img {
    float:right;
    margin: 10px;
    width: 104px;
}
.relatedbox footer {
    text-align: right;
    padding: 10px 10px 5px;
	border-top: 1px #fff solid;
	border-color: rgba(255,255,255, 0.5);
}
.relatedbox section h2 { 
	font-size: 1.2em;
	font-weight: 400;
	padding: 15px 10px 10px 10px;
	border-bottom: 1px #fff solid;
	border-color: rgba(255,255,255, 0.5);
}

.relatedbox a {
    color: #fff;
}
.relatedbox a:hover, .relatedbox .linkify:hover {
    background-color: #C92D19;
    cursor: pointer;
}


.relatedbox section>p {
    padding: 10px;
}


.relatedbox section ul {
	margin-left: 0;
    list-style-image:none; 
    padding: 0;
}
.relatedbox section li { 
	list-style:none; 
	border-bottom: 1px #fff solid;
	border-color: rgba(255,255,255, 0.5);
	margin: 0;
}
.relatedbox section li:last-child { 
	border-color: rgba(255,255,255, 0);
}

.relatedbox section li a, .relatedbox section li strong {
	padding: 5px 0 5px 5px;
	display: block;
	text-decoration: none;
}
.relatedbox li.linkify:hover {
    background-color: #C92D19;
    cursor: pointer;
}
.relatedbox li.linkify:hover a {
    background-image: url(/theme/images/bullet-white.svg);
}

.relatedbox .vcalendar li a, .relatedbox .vcalendar li strong {
    background-image: url(/theme/images/bullet-red.svg);
    background-position: 5px 50%;
    background-repeat: no-repeat;
    padding: 5px 0 5px 20px;
}

.relatedbox section li strong {background-image: none ;}

.relatedbox .vcalendar li a:hover {
    text-decoration: underline;
}
li.vevent {padding: 5px 0 0 5px;position: relative;}
li.vevent:hover {

}
.linkify:hover a {
    text-decoration: underline;
}
li.vevent .summary {
    display: block;
    padding: 2px 0 1px 20px;
}
li.vevent .location {
	margin-right: 20px;
}
li.vevent a.entry_url {
	display: inline;
    padding: 3px 5px;
    background-image: none;
}

/* Sponsors area */
ul.sponsors {
	list-style-type: none;

}
.sponsors li {
    text-align: center;
}
.relatedbox .sponsors li a {
    border: 0;
    padding: 3px 0;
    background-image: none;
}

.sponsors img {
    opacity: 0.7;
    
}
.sponsors a:hover img {
	opacity: 1;
}


/* TODO set up the icons and links for social */



.connect a img {
    max-height: 1.5em;
    margin-right: 5px;
}




.connect li {
    padding: 5px;
}



/* ==========================================================================
   Footer
   ========================================================================== */

body>footer {
    clear: both; /* IE 9*/
    border-top: 1px #254E67 solid;
    margin: 0;
    position:relative;
    padding: 20px 0 10px 0;
    text-align: center;
	background-color: rgba(0,56,81, 0.7);
}

.landing>footer {
    margin: 0;
}

body>footer a {
    color: #fff;
    border-bottom: 0;
}
body>footer a:visited {
    color: #fff;
}
body>footer a:hover {
    color: #fff;
    background: #d4422b;
}

body>footer ul {
    list-style-type: none;
    list-style-image: none;
    padding: 0;
}

footer li {
    margin: 0 10px 0 0;
    padding:0;
}

body>footer small {
    color: #fff;
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

.alignleft, .img_left {
    float: left;
    margin: 0 10px 10px 0;
}
.alignright, .img_right {
    float: right;
    margin: 0 0 10px 10px;
}
.center, .centered {
    text-align: center;
    vertical-align: middle;
}

.hidden {
    display: none !important;
}


.visuallyhidden, .aux-nav input[type=submit] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

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

    /* expand the header area a bit */
    .logo img {
        width: 140px;
        height: 100px;
    }
    a.logo:hover, a.logo:focus {
        background-position: 110% 120%;
        background-size: 60px 60px;
    }
    #skiplink {
        font-size: 1.2em;
        margin: 20px 10px 10px;
    }
    #skiplink svg {
        width: 18px;
        padding-bottom: 4px;
    }
    .aux-nav input[type=submit] {
        clip: auto;
        height: auto;
        margin: 0 3px;
        overflow: visible;
        position: static;
        width: auto;
        white-space: inherit;
        padding: 4px;
        cursor: pointer;
    }
    .woty {
        max-width: 40%;
        margin-top: 0.4em;
    }
}

@media only screen and (min-width: 700px) {
    body {
        outline: 1px red solid;
        background: #003851 url('/theme/images/backgrounds/slalom-07.jpg') no-repeat fixed top left;
        background-size: 180%; 
    }

    /* Float layout for IE 9 & 11 */
    .mainnav {
        width: 170px;/* IE9 */
        float: left;/* IE9 */
    }
    main {
        margin-left: 181px;/* IE9 */
        max-width: 800px; /* IE 11*/
    }

    /* Grid layout for larger screens, and un-do the IE changed above. */
    @supports (display: grid) {
        .main-header {grid-area: header;}
        footer[role=contentinfo] {grid-area: footer;}
        main {
            grid-area: main;
            margin-left: 0; /* IE9 */
        }
        .mainnav {
            grid-area: nav;
            width: auto;/* IE9 */
        }
        .relatedbox {grid-area: related;}

        body {
            display: grid;
            grid-template-columns: minmax(120px, 180px) minmax(330px, 650px) minmax(180px, 800px);
            grid-template-rows: auto;
            grid-template-areas: 
                "header header ."
                "nav main related"
                "footer footer footer";

            
        }
        .relatedbox{
            margin: 0;
            align-self: start;
        }
        /* Show discipline filter, but not for under IE9
        TODO: Test in IE 11, does it support @supports?
        */
    } /* End supports grid */

    #discipline-menu {
        position: absolute;
        display: block;
        top: 0;
        left: 180px;
        width: 400px;
        margin: 0;
    }

    #discipline-menu ul {
        display: flex;
        margin: 0;
        padding: 0;
    }
    #discipline-menu li {/* IE9 */
        float: left;
    }
    #discipline-menu ul a {
        letter-spacing: -1px;
        display: block;
        padding: 73px 14px 4px 6px;
        text-transform: uppercase;
        border-left: 1px #80b8c9 solid;
        color: #fff;
        text-decoration: none;
        transition:background-color 0.3s;
    }
    #discipline-menu a:hover, #discipline-menu a:focus { 
        text-decoration: underline;
        background-color: rgb(212,66,43);
        background-image: url('/theme/images/icons-52-trans.svg');
        background-repeat: no-repeat;
    }
    #discipline-menu li.freestyle a:hover, #discipline-menu li.freestyle a:focus { background-position: 50% 15px; }
    #discipline-menu li.speed a:hover, #discipline-menu li.speed a:focus { background-position: 50% -82px; }
    #discipline-menu li.racing a:hover, #discipline-menu li.racing a:focus { background-position: 50% -183px; }
    #discipline-menu li.slalom a:hover, #discipline-menu li.slalom a:focus { background-position: 50% -320px; }
    #discipline-menu li.wave a:hover, #discipline-menu li.wave a:focus { background-position: 50% -435px; }

    .long .icon {
        width: 104px;
        height: 104px;
        flex-basis: 104px;
        background-image: url('/theme/images/icons-110.svg');
        background-size: 104px auto;
        background-position: 0 -284px;
    }
    .news-list .long .icon.racing { background-position: 0 -1131px; }
    .news-list .long .icon.freestyle { background-position: 0 -564px; }
    .news-list .long .icon.wave { background-position: 0 -1698px; }
    .news-list .long .icon.slalom { background-position: 0 -851px;}
    .news-list .long .icon.speed { background-position: 0 -1418px; }
    .news-list .long .icon.ukwa { background-position: 0 -284px; }

}

@media only screen and (min-width: 1000px) {
    body {
        padding: 0 5px 0 25px;
    }
    @media (min-height: 500px) {
        .logo {
            margin-bottom: 30px;
        }
    }
    @media (min-height: 700px) {
        .logo {
            margin-bottom: 60px;
        }
        .landing main>h1 {
            position: absolute;
            top:125px;
            left: 210px;
            color: white;
        }
        .relatedbox {padding-top: 50px;}
        
    }

    main {padding: 5px 15px;}

    @supports (display: grid) {
        .relatedbox{
            margin: 0 0 0 15px;
        }
    }
    
    .event-list {
        border-width: 0;
    }

}

@media only screen and (min-width: 1300px) {
    body {
        padding-left: 50px;
       /* background-size: cover; */
    }
    .landing main>h1 { left: 240px;}


}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}