/*------------------------------------------------------------ BikeReg.com Responsive Style Sheet version: 1.0 author: derek allard email: derek@tunnel7.com website: http://www.tunnel7.com ------------------------------------------------------------*/ /* ======= RESET STYLES ======= */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, 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-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ *:focus { outline: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* old stuff */ .txtcentered { text-align: center; } /* ======= SASS DECLARATIONS ======= */ /* colors */ /* hover on support stripe */ /* striping on tables */ /* action stripe / button bg */ /* green text links */ /* footer bg / form bg */ /* footer headers / form text */ /* body outline */ /* sidebar content bg */ /* alerts */ /* alerts and such */ /* for box shadows */ /* to use: @include box-shadow(3px, 3px, 5px, 1px, $shadow); */ /* to use: @include text-shadow(3px, 3px, 0, $shadow); */ /* to use: @include border-radius(7px, 7px, 7px, 7px); */ /* to use: @include links($ltblue, $ltblue, $bluealt, $bluealt); */ /* to use: @include bottomlinks($ltblue, $ltblue, $bluealt, $bluealt); */ /* to use: @include box-sizing; */ /* to use: font-size: calc-em(32,16); */ /* ======= WEB FONTS ======= */ /* currently importing directly from google in */ /* ======= GLOBAL STYLES ======= */ body { font: normal 100% "Open Sans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; /* sets to 16px baseline */ background-color: white; color: #333333; line-height: 1.5em; position: relative; -webkit-font-smoothing: antialiased; } h1 { font: italic bold 1.5em "Open Sans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; } h2 { font: italic bold 1.125em "Open Sans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; margin: 1.25em 0 0 0; } .bottomline { margin-bottom: 2em; border-bottom: 1px solid #dddddd; } /*note reduced bottom margin from standard bottomline */ h2.bottomline { margin: 0em 0 0.5em 0; } h3 { font: italic normal 1.125em "Open Sans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; margin: 1.5em 0 0 0; } h4, h5, h6 { font: normal bold 0.875em "Open Sans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; margin: 1.5em 0 0 0; } /* inline buttons */ span.button, a.button:link, a.button:visited, a.smallbutton:link, a.smallbutton:visited, input.smallbutton:not(.noStyle) { transition: background-color 300ms ease-out; background: #95c033; color: white; border: none; padding: .25em .25em; display: inline-block; font-size: 0.75em; margin: 0.1em; -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; } a.smallbutton:link, a.smallbutton:visited { font-size: 0.75em; padding: .25em .5em; margin: .25em 0.5em .25em 0; } span.button:hover, a.button:hover, a.button:active, a.smallbutton:hover, a.smallbutton:active { background: #6c960b; } a.buttongray:link, a.buttongray:visited, input[type=button]:not(.noStyle).buttongray { transition: background-color 300ms ease-out; background: #999999; color: white; border: none; padding: .75em 1em; display: inline-block; font-size: 0.875em; margin: .5em 1em .5em 0; /* so they don't fall into each other */ -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; } a.buttongray:hover, a.buttongray:active, input[type=button].buttongray:hover { background: #333333; } a.buttonorange:link, a.buttonorange:visited, input[type=button]:not(.noStyle).buttonorange { transition: background-color 300ms ease-out; background: #e45924; color: white; border: none; padding: 0.1em 1em; display: inline-block; font-size: 0.75em; margin: .25em 1em .25em 0; /* so they don't fall into each other */ -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; } a.buttonorange:link:hover, a.buttonorange:visited:hover, input[type=button]:not(.noStyle).buttonorange:hover { background: #963918; } p.intro { font: italic bold 0.875em "Open Sans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; color: #999999; } p.action { font: italic normal 1.125em "Open Sans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; color: #999999; } body#ab #about a, body#nw #news a { /* nav on styling */ color: #95c033; } .fullwidth:after, .wrap:after, .main:after, .searchwrap:after, .slidewrap:after { /* to ensure there is a character written after so that element contains floated elements */ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .legal:after { display: none; } #accessnav { display: none; } .fullstyle p, .fullstyle li, .fullstyle blockquote, .fullstyle legend, .fullstyle caption, .fullstyle th, .fullstyle td { font-size: 0.875em; } dt { font-size: 1em; } dd { font-size: 0.85em; } p, ul, ol, dl { margin: .2em 0 1em 0; } dt, dd { line-height: 1.5; } dd { margin-bottom: 1em; } ul ul, ul ol, ol ol, ol ul { margin: 0; } embed, object, video { max-width: 100%; } img { /* adds space around images */ margin: 0; } img.paypal { margin-left: 0; } li li { /* ensures no double font ineritance */ font-size: 1em; } em, i { font-style: italic; } strong, b { font-weight: bold; } .meta { color: #999999; } .header.meta { color: #3f403d; } .alerts { background-color: #ececec; border: 1px solid #dddddd; font-style: italic; font-weight: bold; line-height: 1.2em; } .alerts ul { margin: .5em 0; } .alerts ul li { list-style: none; } .ie { display: none; } /* ======= LAYOUT GRID STYLES======= */ /* start with mobile first then go up from there - media queries for others at bottom */ .fullwidth { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .fullstyle .wrap, .searchwrap, .slidewrap { margin: auto; margin-top: 8px; /* background: #fff url('https://www.road-results.com/i/wrap_shadow.png') no-repeat bottom right; */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .main { width: 100%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .main #content { overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-bottom: 2em; } .main .sidebar { width: 100%; margin: 0; float: right; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .main .sidebar .googlead { margin-bottom: 2px; } /* GLOBAL HIDES */ .slidewrap .feature { /* hides feature box near homepage slideshow (turned on in media query below) */ display: none; } ul.searchresults { width: auto; padding: 0px; padding-top: 5px; padding-bottom: 5px; list-style-type: none; width: 200px; visibility: hidden; position: absolute; z-index: 100; top: 100%; left: 0; background-color: rgba(0, 85, 204, 0.8); -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; padding: 1em 0; } ul.searchresults li.searchresult, ul.searchresults li.searchresult_highlighted { font-size: 14px; list-style: none; margin-left: 0; padding: .5em 0 .5em 2em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-weight: bold; color: white; } ul.searchresults li.searchresult:hover, ul.searchresults li.searchresult_highlighted { color: #00559c; background-color: #8ec1ec; cursor: pointer; } #nav ul.dropdown ul.login { /* hides login dropdown from mobile nav */ display: none; } .tween { /* hides extra div on home slider / feature */ display: none; } /* ======= HEADER STYLES ======= */ .stripe { /* green area at top */ background-color: #95c033; color: white; padding: .5em 0; } .stripe p { font-size: 0.75em; margin: 0; line-height: 1.5em; text-align: center; /* CHANGE to align right on bigger screens */ } .stripe a:hover, .stripe a:active { color: #0473d0; } .top { /* logo and navigation */ background: white url("https://www.road-results.com/i/bg-top-shadow.jpg") repeat-x bottom left; padding-bottom: 1em; } .top .banner p { margin: 0; } .top .banner header { margin: 0.5em 0; width: 62.5%; /* to save some space for responsive nav */ /* width: percentage(258/960); CHANGE TO THIS ON DESKTOP */ } .top .banner header img { margin: 0; } .top .banner nav { padding-bottom: 1em; /* so there is a bit of space on mobile nav at the bottom */ } .top .banner nav ul li { display: inline; margin: 0 3em 0 0; } .top .banner nav ul li a.loggedin { /* for logged in my bikereg.com nav */ color: #6c960b; } .top .banner nav ul li ul { /* hide for now - come back to with responsive / flyout */ display: none; } .slidewrap img { margin: 0; } .searchwrap div { width: 100%; margin-bottom: .5em; } .searchwrap div input.searchfield { width: 68.125%; margin-right: 2.1875%; } .searchwrap div .searchbutton { width: 21.875%; } /* ======= MAIN CONTENT STYLES ======= */ .inside .maincontent { min-height: 600px; } .maincontent { padding-bottom: 5em; background-color: white; } .maincontent .searchwrap { text-align: center; /* CHANGE on different resolutions */ padding-top: .5em; } .maincontent .wrap { padding-top: 1em; padding-bottom: 1em; } .maincontent .sidebar-content { background-color: #ececec; border: 1px solid #dddddd; padding: 1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .maincontent .sidebar-content img { margin: 0; border: 2px solid white; -webkit-box-shadow: 3px 3px 5px 1px #999999; -moz-box-shadow: 3px 3px 5px 1px #999999; box-shadow: 3px 3px 5px 1px #999999; } .maincontent .wide { clear: both; } /* homepage styles */ .fullstyle .home .searchwrap { /* for full width / center effect of search box - this is really the same as the promoter one - kept separate in case future changes wanted on one or the other */ margin-bottom: 1em; } .fullstyle .home .searchwrap .search form { width: 100%; text-align: center; } .fullstyle .home .slidewrap .feature { background-color: #00559c; color: white; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 1em; -webkit-box-shadow: 3px 3px 5px 1px #999999; -moz-box-shadow: 3px 3px 5px 1px #999999; box-shadow: 3px 3px 5px 1px #999999; margin-bottom: 1em; } .fullstyle .home .slidewrap .feature h1 { color: #8ec1ec; } .fullstyle .home .slidewrap .feature p { font-size: 1em; } .fullstyle .home .slidewrap .slideshow { /* plugin styles for slideshow are below in plugin section */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .fullstyle .home .slidewrap .slideshow img { margin: 0; } .fullstyle .home .recentresults { margin-top: 1.5em; } .fullstyle .home div.upcoming, .fullstyle .home .recentresults { margin-bottom: 1em; } .fullstyle .home div.upcoming .header, .fullstyle .home .recentresults .header { background: #efefef; border-bottom: 1px solid #8ec1ec; } .fullstyle .home div.upcoming .header .meta, .fullstyle .home .recentresults .header .meta { color: #3f403d; padding: 1em; margin: 0; } .fullstyle .home div.upcoming dt.premier, .fullstyle .home div.upcoming dd.premier, .fullstyle .home .recentresults dt.premier, .fullstyle .home .recentresults dd.premier { background-color: #deedbc; } .fullstyle .home div.upcoming dt.premier, .fullstyle .home .recentresults dt.premier { margin-top: -0.25em; padding-top: 0.25em; } .fullstyle .home div.upcoming dd.premier, .fullstyle .home .recentresults dd.premier { /*margin-bottom: -0.25em;*/ padding-bottom: 0.25em; } .fullstyle .home div.upcoming dl.premier, .fullstyle .home .recentresults dl.premier { background-color: #deedbc; padding-top: 0.25em; margin-top: 0; margin-bottom: 0em; } .fullstyle .home div.upcoming dl.premier dd, .fullstyle .home .recentresults dl.premier dd { margin-bottom: 0px; padding-bottom: 0.5em; border-bottom: 1px solid #8ec1ec; } .fullstyle .home div.upcoming dl.premier dt, .fullstyle .home .recentresults dl.premier dt { padding-top: 0.5em; } .fullstyle .home div.upcoming .imminent, .fullstyle .home .recentresults .imminent { color: #e45924; } .fullstyle .home div.upcoming .closed, .fullstyle .home .recentresults .closed { color: red; } .fullstyle .home div.upcoming h2, .fullstyle .home .recentresults h2 { margin: 0 0 1em 0; } .fullstyle .home div.upcoming dl dt a, .fullstyle .home .recentresults dl dt a { /* for larger font size on event names */ font-size: 1.16667em; } .fullstyle .home h2.home { clear: both; margin: 1em 0; padding-top: 2em; } img.grayscale:hover { filter: url("data:image/svg+xml;utf8,#grayscale"); } .event, .cart, .manualentry { /*event page */ } .event .main h1 img, .event .main img.pin, .cart .main h1 img, .cart .main img.pin, .manualentry .main h1 img, .manualentry .main img.pin { /* to align star */ margin: 0; } .event .main h2.sub, .cart .main h2.sub, .manualentry .main h2.sub { margin: 0; font-weight: normal; color: #999999; line-height: 1; margin-bottom: .5em; } .event .main p, .event .main li, .event .main td, .event .main th, .event .main dt, .event .main dd, .cart .main p, .cart .main li, .cart .main td, .cart .main th, .cart .main dt, .cart .main dd, .manualentry .main p, .manualentry .main li, .manualentry .main td, .manualentry .main th, .manualentry .main dt, .manualentry .main dd { /* default to 12px fonts */ font-size: 0.75em; } .event .main li table#feeSchedule, .cart .main li table#feeSchedule, .manualentry .main li table#feeSchedule { border: 1px solid #dddddd; } .event .main p.heading, .cart .main p.heading, .manualentry .main p.heading { background-color: #00559c; color: white; font-weight: bold; font-style: italic; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: .3em 1em .3em 2em; margin-top: 1em; } .event .main p.choice, .event .main .selectall, .cart .main p.choice, .cart .main .selectall, .manualentry .main p.choice, .manualentry .main .selectall { font-size: 0.875em; font-weight: bold; margin-bottom: 0.1em; } /* ======= SUBFOOTER STYLES ======= */ .bottom { border-top: 15px solid #8ec1ec; background-color: #333333; color: white; text-align: center; /* CHANGE on desktop */ } .bottom .subfooter img { margin: 0; } .bottom .subfooter h1, .bottom .subfooter h2 { font: italic bold 1.875em "Open Sans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; color: #999999; margin-bottom: 0.25em; } .bottom .subfooter h3, .bottom .subfooter h4, .bottom .subfooter h5, .bottom .subfooter h6 { font: italic bold 1.125em "Open Sans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; color: #999999; margin-bottom: .5em; } .bottom .subfooter p, .bottom .subfooter li, .bottom .subfooter dd, .bottom .subfooter dt, .bottom .subfooter blockquote, .bottom .subfooter legend, .bottom .subfooter caption, .bottom .subfooter th, .bottom .subfooter td { font-size: 0.75em; } .bottom .subfooter a:link { color: #95c033; text-decoration: none; font-weight: normal; font-style: normal; } .bottom .subfooter a:visited { color: #95c033; } .bottom .subfooter a:hover { color: #6c960b; } .bottom .subfooter a:active { color: #6c960b; } .bottom .subfooter li { list-style-position: inside; /* needed for center alignment on mobile */ } .bottom .subfooter .about li, .bottom .subfooter .support li { list-style: none; margin: 0; } .bottom .subfooter ul.social { margin: 2em 0; } .bottom .subfooter ul.social li { display: inline; margin-right: .7em; } /* ======= FOOTER STYLES ======= */ .legal { background: black url("https://www.road-results.com/i/bg-footer.jpg") no-repeat top center; text-align: center; /* CHANGE on desktop */ } .legal .wrap { padding: 2em 0 9em 0; } .legal .wrap footer { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 1em; background-color: white; background-color: rgba(255, 255, 255, 0.75); -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; } .legal .wrap footer p { margin: 0; } .legal .wrap footer p, .legal .wrap footer li, .legal .wrap footer dd, .legal .wrap footer dt, .legal .wrap footer blockquote, .legal .wrap footer legend, .legal .wrap footer caption, .legal .wrap footer th, .legal .wrap footer td { font-size: 0.75em; } .legal .wrap footer a:link { color: #00559c; text-decoration: none; font-weight: normal; font-style: normal; } .legal .wrap footer a:visited { color: #00559c; } .legal .wrap footer a:hover { color: #6c960b; } .legal .wrap footer a:active { color: #6c960b; } .legal .wrap footer li { list-style: none; } .legal .wrap footer .logos { margin: 2em 0; } /* ======= FORM STYLES ======= */ p.meta select { /* for dropdowns on homepage */ background: #8ec1ec; color: #00559c; font-style: italic; font-weight: bold; } .ConfirmationMessage { background: #95c033; -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; color: white; padding: 1em; margin: 1em; } .ConfirmationMessage a:link { color: #8ec1ec; text-decoration: none; font-weight: bold; font-style: normal; } .ConfirmationMessage a:visited { color: #8ec1ec; text-decoration: none; font-weight: bold; font-style: normal; } .ConfirmationMessage a:hover { color: white; } .ConfirmationMessage a:active { color: white; } .feedback { background: #e45924; -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; color: white; padding: 1em; margin: 1em; } .feedback a:link { color: #8ec1ec; text-decoration: none; font-weight: bold; font-style: normal; } .feedback a:visited { color: #8ec1ec; text-decoration: none; font-weight: bold; font-style: normal; } .feedback a:hover { color: white; } .feedback a:active { color: white; } a.feedback:link, a.feedback:visited { background: #e45924; color: white; border: none; padding: .75em 1em; display: inline-block; font-size: 0.875em; margin: .5em 1em .5em 0; /* so they don't fall into each other */ -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; } dd { margin-bottom: 1em; } input:not(.noStyle), select:not(.noStyle), textarea:not(.noStyle), .RadComboBox .rcbInputCell .rcbInput { font: bold 0.875em "Open Sans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; padding: .5em 0.5em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 2px; } input:not(.noStyle)[type=image] { background: none; } /*input[type=text]:not(.noStyle), input[type=tel]:not(.noStyle), input[type=email]:not(.noStyle), input[type=password]:not(.noStyle), select:not(.noStyle), textarea:not(.noStyle), input[disabled]:not(.noStyle) { color: $black; background-color: $gray; border: 1px solid $nearblack; }*/ input.small { /* for cvv code */ width: 7em; margin-left: 0.2em; margin-right: 100px; } input[type="radio"], input[type="checkbox"], input[type="radio"]:focus, input[type="checkbox"]:focus { /* to make sure IE doesn't add bg color to these items */ background-color: transparent; border: 0px; padding: 0px; margin: 3px; /*margin: 3px; IE has no default margin */ } /* white placeholders when possible */ ::-webkit-input-placeholder { /* WebKit browsers */ color: #00559c; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #00559c; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #00559c; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #00559c; } .search ::-webkit-input-placeholder { /* WebKit browsers */ color: #999999; padding-left: 2px; } .search :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999999; padding-left: 2px; } .search ::-moz-placeholder { /* Mozilla Firefox 19+ */ padding-left: 2px; color: #999999; } .search :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999999; padding-left: 2px; } select:not(.noStyle) { /* strips away default styling to have uniform styling for selects */ appearance: none; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */ } input[type=button], input[type=submit] { -webkit-appearance: none; /* Safari and Chrome */ -webkit-border-radius: 0; border-radius: 0; } p input, p select, p textarea { /* prevents double inheritance of font size */ font-size: 1em; } input[type=password]:focus:not(.noStyle), input[type=tel]:focus:not(.noStyle), input[type=email]:focus:not(.noStyle), input[type=text]:focus:not(.noStyle), select:focus:not(.noStyle), textarea:focus:not(.noStyle) { background-color: white; color: #3f403d; box-shadow: 0 0 4px #e45924; border: 2px solid transparent; } input[type=tel]:focus:not(.noStyle), input[type=email]:focus:not(.noStyle), input[type=password]:focus:not(.noStyle), input[type=text]:focus:not(.noStyle), textarea:focus:not(.noStyle) { -webkit-appearance: none; } input.button:not(.noStyle), input[type="button"]:not(.noStyle), input[type="submit"]:not(.noStyle) { background-color: #95c033; color: white; border: none; -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; transition: background-color 300ms ease-out; } input.button:hover, input[type="button"]:hover, input[type="submit"]:hover { background-color: #6c960b; cursor: pointer; } /* ======= TABLE STYLES ======= */ .AltRowTable { border-collapse: collapse; } .AltRowTable > tr:nth-child(odd) td, .AltRowTable tbody tr:nth-child(odd) td { background-color: #FFFFFF; padding: 2px; } .AltRowTable tbody tr:nth-child(even) td, .AltRowTable > tr:nth-child(even) td { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; background-color: #EEEEEE; padding: 2px; } table:not(.noStyle) { width: 100%; /* this is a silly thing because gridviews dont make theads correctly*/ } table:not(.noStyle) thead, table:not(.noStyle) tfoot { background: #00559c; color: white; text-align: left; font-weight: bold; font-style: italic; } table:not(.noStyle) thead th, table:not(.noStyle) tfoot th { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: .3em; } table:not(.noStyle) thead th em, table:not(.noStyle) tfoot th em { display: block; font-weight: normal; line-height: 1; padding-bottom: .3em; } table:not(.noStyle) tbody th { background: #00559c; color: white; text-align: left; font-weight: bold; font-style: italic; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: .3em; } table:not(.noStyle) tbody th a { color: white; } table:not(.noStyle) tbody th em { display: block; font-weight: normal; line-height: 1; padding-bottom: .3em; } table:not(.noStyle) tr.subhead { background: #333333; color: #ececec; font-weight: bold; font-style: italic; } table:not(.noStyle) tr.even.noHover:hover { background-color: #e3ecf6 !important; color: #333333; } table:not(.noStyle) tr.odd.noHover:hover { background-color: white !important; color: #333333; } table:not(.noStyle) tr.even { background-color: #e3ecf6; } table:not(.noStyle) tr.even input[type=text]:focus, table:not(.noStyle) tr.even input[type=tel]:focus, table:not(.noStyle) tr.even input[type=email]:focus, table:not(.noStyle) tr.even input[type=password]:focus { background-color: white; color: #333333; } table:not(.noStyle) tr.selected { background-color: #95c033; color: white; } table:not(.noStyle) td { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } table:not(.noStyle) td.image { text-align: center; padding: 2em 0; } .nosearch .search { display: none; } .nosearch div.fma { height: 100px; min-height: 100px; } /* ======= MEDIA QUERIES ======== */ @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 479px) { /*general class you can use to get rid of stuff on small screens */ .hidemobile { display: none; } .maincontent .wrap { padding-left: 0px; padding-right: 0px; } .wrap, .searchwrap, .slidewrap { margin-left: 0px; margin-right: 0px; max-width: 100%; } } @media screen and (max-width: 767px) { .main .sidebar { display: none; } } @media screen and (min-width: 768px) { .main .sidebar { width: 160px; margin-left: 1em; float: right; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } } @media screen and (min-width: 768px) { /* desktops - this may be redundant - copy this over to ie.scss when final (ie8 and down doesn't understand media queries and we'll want to serve the desktop version to it) */ /* LAYOUT STYLES */ #nav li .mobileOverflow { display: block; } #nav ul.dropdown li.allRegions { display: none; } .fullwidth { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .cc { display: inline; margin: 0 0 0 2em; } img.tooltip { margin: 0px; } .fullstyle .wrap, .fullstyle .searchwrap, .fullstyle .slidewrap { margin: auto; max-width: 1260px; /* background: #fff url('https://www.road-results.com/i/wrap_shadow.png') no-repeat bottom right; */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; clear: both; } .fullstyle .main { width: 100%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 0.25em; /* give a bit more space on bigger screen */ } .fullstyle .main #content { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-left: 1em; } .fullstyle .main .wide { margin-left: 1em; } .fullstyle .nosidebar .main #content { /* for pages with no sidebar - use full area */ width: 100%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 1em; /* make sure some space to the right */ } .fullstyle .homebodywrap { margin-top: 0.5em; } /* homepage styles */ .fullstyle.home .slidewrap { /* all this are for equal height feature and slider */ } .fullstyle.home .slidewrap .intwrap { display: table; } .fullstyle.home .slidewrap .intwrap .feature { display: table-cell; vertical-align: top; width: 32.29167%; /* display: block; float: left; vertical-align: middle; width: percentage(310/960); margin-right: percentage(40/960); */ } .fullstyle.home .slidewrap .intwrap .tween { display: table-cell; width: 2.08333%; } .fullstyle.home .slidewrap .intwrap .slideshow { /* plugin styles for slideshow are below in plugin section */ display: table-cell; vertical-align: top; width: 65.625%; vertical-align: middle; } /*endbikereg only*/ /* PRESENTATION STYLES */ .top-ads .adwrap { width: 728px; margin-top: 2em; /* this is needed to fill the space fixed position of top stripe uses */ display: inline-block; } .top-ads .adwrap div { height: 90px; } .stripe { position: fixed; z-index: 9999; /* to ensure top stripe shows in front of slides */ } .stripe .wrap .support p { text-align: center; } .top .wrap .banner .top-ads { text-align: center; } .top .wrap .banner #nav { margin: 0 0 0.75em 0; } .top .wrap .banner #nav ul { float: left; } .searchwrap { margin-bottom: 1em; } .searchwrap div { text-align: left; float: left; width: 63.54167%; margin-bottom: .5em; } .searchwrap div input.searchfield { width: 79.5082%; margin-right: 1.63934%; } .searchwrap div .searchbutton { width: 14.7541%; } .searchwrap p.tour { float: left; text-align: left; width: 32.29167%; margin-left: 4.16667%; } .main .pullbox { float: right; width: 40.33613%; background-color: #ececec; border: 1px solid #dddddd; padding: 0 1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .main .pullbox li { list-style: none; margin-left: 0; } .bottom .wrap .subfooter { text-align: left; /* overrides center alignment */ float: none; padding: 2em 0 4em 0; } .bottom .wrap .subfooter h1, .bottom .wrap .subfooter h2, .bottom .wrap .subfooter h3, .bottom .wrap .subfooter h4, .bottom .wrap .subfooter h5, .bottom .wrap .subfooter h6 { /* to get everything to align */ margin-top: 0; } .bottom .wrap .subfooter .col1 { float: left; width: 47.91667%; margin: 0 2.08333% 0 1.04167%; } .bottom .wrap .subfooter .col2 { float: left; width: 22.91667%; margin: 0.5em 2.08333% 0 0; } .bottom .wrap .subfooter .col3 { float: left; width: 22.91667%; margin: 0.5em 1.04167% 0 0; } .legal .wrap footer .logos { margin: 1em 0; } .legal .wrap footer .logos ul li { display: inline-block; } } /* end media query */ @media screen and (min-width: 768px) { /* this strictly for moving navigation to right of logo */ .top .wrap .banner header { float: left; width: 20.83333%; margin-right: 0%; } .top .wrap .banner #nav { float: right; width: 79.16667%; margin-top: 2em; padding-bottom: 0; } .top .wrap .banner #nav ul { float: right; } } /* ======= PLUGIN STYLES ======= */ /* responsive nav - http://responsive-nav.com/ */ #nav ul { margin: 0; padding: 0; width: 100%; display: block; list-style: none; } #nav li { width: 100%; display: block; } #nav li li { /* for second and third tier indent */ margin-left: 2em; } .js #nav { clip: rect(0 0 0 0); transition: max-height 400ms; display: block; overflow: hidden; zoom: 1; } #nav.opened { max-height: 9999px; } .nav-toggle { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 70px; height: 55px; float: right; text-align: center; font-size: 0.75em; /* text-indent: -9999px; if you want to get rid of nav label uncomment this */ overflow: hidden; background: rgba(128, 128, 128, 0.5) url("../../img/hamburger.png") no-repeat 50% 33%; } @media screen and (min-width: 768px) { /* non toggle nav styles here */ .js #nav { position: relative; } .js #nav.closed { max-height: none; } .nav-toggle { display: none; } #nav ul { margin: 0; padding: 0; width: auto; /* so ul doesn't retain full width and gives more space to li */ display: block; list-style: none; } #nav li { width: auto; display: inline-block; font-size: 1em; /* larger font but only on top level nav */ } #nav li li { font-size: 0.875em; /* for secondary nav slightly smaller */ } #nav li li li { font-size: 1em; /* and make sure tertiary uses the same size as secondary */ } .js #nav { display: block; overflow: visible; /* this is needed to get flyouts to, well, flyout */ zoom: 1; } /* flyout menus - http://css-tricks.com/simple-jquery-dropdowns/ */ #nav { -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; /* LEVEL ONE */ /* LEVEL TWO */ /*specific offsets for menus so they are right-aligned */ /* LEVEL THREE */ } #nav ul.dropdown { /* absolute position here fixes the fall behind issue but complicates positioning */ position: relative; float: left; /* leaving this as right aligned (preferred) but could change to left to buy more space for tertiary flyout */ } #nav ul.dropdown li { padding-left: 15px; padding-right: 15px; float: left; zoom: 1; background: transparent; } #nav ul.dropdown li .promoterMobile { display: none; } #nav ul.dropdown li .promoterEvent { display: none; } #nav ul.dropdown > li { /* this is to make sure you're always hovering on the LI as you transition to the submenu */ margin-bottom: -16px; padding-bottom: 16px; } #nav ul.dropdown li.last { margin-right: 0; } #nav ul.dropdown li.promoterEvent { display: none; } #nav ul.dropdown li a { display: block; padding: 0; } #nav ul.dropdown li:last-child a { /* Doesn't work in IE */ border-right: none; } #nav ul.dropdown li.hover, #nav ul.dropdown li:hover { position: relative; } #nav ul.dropdown ul { min-width: 190px; visibility: hidden; position: absolute; z-index: 100; top: 34px; left: 0px; -webkit-border-radius: 0px 7px 7px 7px; -moz-border-radius: 0px 7px 7px 7px; border-radius: 0px 7px 7px 7px; padding: 0em 0; } #nav ul.dropdown ul.resultsdd { left: -110px; } #nav ul.dropdown ul.login { /* specific styles for login dropdown */ display: block; /* overrides hiding from mobile above */ left: -140px; padding: 1em; } #nav ul.dropdown ul.login li { padding-left: 0; } #nav ul.dropdown ul.login p { margin: .5em 0; } #nav ul.dropdown ul.login #forgotPassword a { height: auto; display: inline; margin: 0px; padding: 0px; } #nav ul.dropdown ul.login input[type=text]:focus, #nav ul.dropdown ul.login input[type=password]:focus, #nav ul.dropdown ul.login select:focus { background-color: white; color: #333333; } #nav ul.dropdown ul.login a { font-size: 12px; text-transform: none; } #nav ul.dropdown ul.login .rememberme { padding-top: 2px; margin-right: 10px; display: none; font-size: 10px; } #nav ul.dropdown ul.login .rememberme * { vertical-align: middle; } #nav ul.dropdown ul li { font-weight: normal; background: transparent; color: #00559c; float: none; width: 100%; margin-left: 0; } #nav ul.dropdown ul li a { /* these make sure the link area for hover is as tall and wide as can be (so hover doesn't break) */ width: 100%; padding: .5em 0 .5em 0em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* to make sure padding doesn't push li wider than intended */ } #nav ul.dropdown ul li a { /* IE 6 & 7 Needs Inline Block */ border-right: none; width: 100%; height: 100%; display: inline-block; } #nav ul.dropdown ul ul { left: 190px; width: 180px; background-color: rgba(227, 236, 246, 0.95); top: 0; } #nav ul.dropdown li:hover > ul { visibility: visible; } #nav ul.dropdown li.hover ul li ul li a { /* default flyout links: for flyout hover uses blue */ color: #00559c; background-color: transparent; } #nav ul.dropdown li.hover ul li ul li:hover { /* hover on flyout: only hovers show on link state - don't wait for hover to be added */ background-color: #00559c; } #nav ul.dropdown li.hover ul li ul li:hover a { color: white; } /* end flyout menus */ } /* end responsive nav */ /* invisible buttons */ /* .transparent-btns_nav { z-index: 3; position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 0; left: 0; display: block; background: #fff; /* Fix for IE6-9 opacity: 0; filter: alpha(opacity=1); width: 48%; text-indent: -9999px; overflow: hidden; height: 91%; } .transparent-btns_nav.next { left: auto; right: 0; } */ /* end responsive slides */ /* ======= HIDING ======= */ /* Featured Messaging Area ========================================================================== */ .fma { background-color: black \9; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; min-height: 700px; overflow-y: hidden; margin-top: 30px; } .logobar { padding-top: 30px; } .eventlist { width: 35%; float: left; padding: 0; min-height: 250px; } .fmaevent { transition: background-color 0.25s ease; width: 100%; height: auto; background-color: rgba(0, 0, 0, 0.8); clear: none; margin: 0 0 2px; padding: 0; } .fmaevent a { color: white; font-weight: bold; } .fmaevent img { vertical-align: middle; } #nearbyrecent .fmaevent:hover { background-color: rgba(0, 0, 0, 0.8); cursor: pointer; } .fmaevent h2 { color: #fff; } .fmaevent p { padding: 10px; margin: 0; color: #fff; font-size: 14px; line-height: 20px; } #resultssearch p { padding: 10px 10px 5px 10px; } #loginform .headerrow3 .fb_button_medium { color: white; background: #00559c; padding: 4px; -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; } .frontpageblock { margin-left: 5px; margin-right: 5px; display: inline-block; width: 250px; vertical-align: top; } .frontpageblock .headerrow1 > h2 { padding: 2px; padding-left: 5px; min-height: 35px; margin-bottom: 0em; margin-top: 0em; line-height: 35px; } .frontpageblock .frontpagefooter { text-align: center; font-weight: bold; } .frontpageblock .frontpagecontent { height: 350px; max-height: 350px; overflow-y: hidden; } .frontpageblock li { white-space: nowrap; overflow: hidden; } .timeline { width: 400px; color: #aaa; } .timelinepoints { margin-left: 4px; color: #aaa; font-size: 10px; } .toggler { display: inline-block; cursor: hand; } .timelineheader span.info { float: right; font-size: small; border: 1px solid #999; padding: 3px; margin-right: 8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } #timeline { max-height: 660px; overflow-y: auto; } #timelinehelp { max-width: 600px; background: #ddddff; padding: 5px; z-index: 101; font-weight: normal; margin-top: 5px; } .timeline .racedetails { font-size: smaller; vertical-align: top; text-align: center; width: 20%; display: inline-block; margin-top: 8px; margin-bottom: 8px; float: left; } .timeline .finishers { width: 78%; display: inline-block; float: right; } .timeline .finishers .timelineracecategoryname { margin-top: 4px; padding: 4px; padding-left: 8px; } .regnow { width: 103px; height: 26px; line-height: 10px; float: right; margin: 0 -20px 10px 15px; background-image: url(https://www.road-results.com/i/green-btn-small.png); padding-left: 10px; padding-top: 7px; margin-top: 10px; } span.regnow { font-size: 10px; font-weight: bold; } .learbmore { width: 430px; background-color: rgba(0, 0, 0, 0.7); float: right; margin: 0 0 0; padding: 2px 2px 10px 10px; } .learbmore h2 { color: #fff; font-size: 24px; margin: 0 0 5px; font-weight: 300; font-style: normal; } .learbmore h4 { color: #fff; font-size: 14px; margin: 0 0 5px; font-style: italic; } .learbmore p { color: #fff; font-size: 14px; margin: 0; font-weight: 300; font-style: normal; line-height: 22px; padding-bottom: 10px; padding-right: 3px; max-height: 370px; overflow-y: auto; } .learbmore p a { color: #fff; font-weight: bold; } .learn { width: 139px; height: 28px; line-height: 14px; float: left; margin-top: 0; padding-left: 12px; padding-top: 7px; margin-left: 0; } a.learn { font-size: 14px; font-style: italic; font-weight: bold; } .fullstyle .search { background-image: url(https://www.road-results.com/i/search-box.png); width: 672px; height: 42px; margin: 20px 0 0 15%; padding: 0; } .inside .search { background-image: url(https://www.road-results.com/i/search-box.png); width: 672px; height: 42px; margin: 50px 0 0 50px; padding: 0; } .search .inputs { height: 35px; font-size: 16px; font-weight: bold; border: 1px solid #fff; border-radius: 5px; width: 475px; margin-left: 60px; float: left; margin-top: 3px; } .inputs:focus { border-color: #BBB; outline: none; } .search .searchbutton { float: right; margin: 25px -50px 0 0; padding: 0; } /* Utility Navigation ========================================================================== */ .utility { width: 100%; min-height: 30px; top: 0px; position: fixed; z-index: 101; } .utilitynav { color: #ffffff; font-size: 14px; line-height: 16px; float: right; padding-top: 3px; padding-bottom: 3px; margin-right: 7px; margin-left: 7px; } .utilitynav a:hover { color: #fff; } /* Header ========================================================================== */ .logo { padding-top: 10px; padding-bottom: 10px; } /** menu =====================================================*/ div#navparent { z-index: 100; float: left; position: relative; left: 20px; top: 20px; } .inside div#navparent { top: 135px; } nav { height: 41px; display: inline-block; padding-top: 7px; padding-left: 4px; padding-right: 14px; margin-left: 0px; } nav ul { padding: 0; margin: 0; list-style: none; position: relative; display: block; } nav#nav ul li { color: #fff; float: left; list-style-type: none; margin-left: 0px; margin-right: 0px; } nav ul li a { color: #fff; font-size: 16px; text-transform: uppercase; padding-bottom: 7px; padding-top: 7px; white-space: nowrap; } /* Change this in order to change the Dropdown symbol */ li > a:after { content: ''; } li > a:only-child:after { content: ''; } /* The Dropdown Styles */ /* =================== */ /* Hide Dropdowns by Default */ nav ul ul { display: none; position: absolute; top: 34px; } /* Display Dropdowns on Hover */ nav ul li:hover > ul { display: list-item; z-index: 100; } /* Fisrt Tier Dropdown */ nav ul ul li a { font-size: 14px; } nav ul ul li { width: 170px; float: none; position: relative; border-bottom: none; padding: 2px 0 2px 10px; font-size: 12px; margin: 0 0 0 -20px; } /* Second, Third and more Tiers */ nav ul ul ul { margin: 0; } .footer { padding: 3px; background-color: #333; } .footer h2, .footer h3 { color: #96a5d2; } .footer h2 { font-size: 28px; font-style: italic; margin-top: 0.5em; } .footer h3 { font-size: 18px; font-style: italic; margin-top: 0.5em; } .footer p { color: #fff; font-size: 12px; } .row-full #search { text-align: center; margin: 15px; } .row-full #search input { transition: background-color 300ms ease-out; width: 365px; background: rgba(255, 255, 255, 0.6); border: 1px solid white; } .row-full #search input:focus { transition: background-color 300ms ease-out; background: rgba(255, 255, 255, 0.9); } #searchbox { float: right; clear: right; } #searchbox input { float: right; } #stats { text-align: center; } #stats a, #stats a:hover { font-weight: bold; color: white; } #nearbyrecent { float: left; max-width: 390px; margin-left: 20px; margin-top: 60px; } #timelinefrontpage { margin-top: 60px; float: right; margin-right: 20px; clear: right; } div.footer div ul:not(.ruInputs) { color: #fff; font-size: 12px; margin: 0 0 15px; padding: 0; list-style: none; } div.footer div ul:not(.ruInputs) > li { list-style: none; margin-left: 0px; } div.footer div ul.why:not(.ruInputs) { list-style: disc; margin: 0 0 15px 30px; } div.footer div ul.why:not(.ruInputs) > li { list-style: disc; } #grambanner { max-height: 100px; overflow: hidden; white-space: nowrap; } #grambanner a { max-width: 100px; } #grambanner img { max-height: 100px; max-width: 100px; margin-left: -2px; margin-right: -2px; } .footer-bottom { background-color: #000; padding-top: 50px; padding-bottom: 20px; } .footer a { color: #fff; font-weight: bold; } .footer-bottom p { color: #fff; font-size: 10px; } .lline { border-left: 1px solid #a4dd00; min-height: 250px; } .race { margin: 25px 0 -50px; padding: 0; background: url(../../img/reg-bg.png) left center no-repeat; overflow: hidden; text-align: left; } .race img { width: auto; height: auto; vertical-align: middle; } .race p { padding: 20px 0 5px 20px; color: #000000; font-size: 25px; line-height: 1.6; margin-bottom: 20px; margin-top: 0px; } .home .large-10 { width: 70.33333%; } .inside .large-10 { width: 100%; padding: 0px; } .mobileonly, #nav li.mobileonly, .promoterLoggedIn #nav ul.dropdown li.mobileonly, .promoterInEvent #nav ul.dropdown li.mobileonly { display: none; } /* race footer changes at 1060 and below */ @media screen and (min-width: 0) and (max-width: 1080px) { .large-9 { width: 60%; } .large-3 { width: 40%; } .race { margin: 10px 0; padding: 0; background: none; } .race p { padding: 20px 0 20px 20px; color: #FFF; font-size: 15px; display: block; } .race p span { float: left; clear: both; padding-bottom: 10px; } .race img { width: auto; height: auto; clear: both; float: left; padding-bottom: 10px; } } /* iPads (portrait and landscape) ----------- */ @media screen and (min-width: 480px) and (max-width: 1024px) { /* Styles */ .learbmore { margin-top: 10px; } .home .large-10 { float: right; width: 60%; margin-right: 0px; padding-right: 0px; } } /*move it up when the screen gets really small */ @media screen and (max-width: 849px) and (min-width: 768px) { div#navparent { top: 17px; } } @media screen and (max-width: 1024px) and (min-width: 768px) { /* these are the logo/navbar columns */ .large-5 { width: 36.66667%; } .large-7 { width: 63.33333%; padding: 0px; } .home .search { margin-left: 5px; width: 450px; float: right; clear: right; } .home .search .inputs { width: 80%; } .home .search .searchbutton { margin-right: 5px; margin-top: -10px; } } /* special alignment for frontpage search button when it wraps on small screens*/ @media screen and (max-width: 858px) and (min-width: 768px) { #nearbyrecent { margin-left: 0px; max-width: 340px; } #timelinefrontpage { margin-right: 0px; } .learbmore, .home .search, .home .large-10 { width: 400px; } .eventlist { width: 45%; } /* also special inner search */ .search .searchbutton { margin-right: 10px; } } /* below ipad*/ @media screen and (min-width: 0px) and (max-width: 767px) { /* Styles */ .fma { overflow-y: auto; } .js #nav { max-height: 0px; } .large-7 { display: none; } .large-5 { width: 50%; } .utility { position: relative; height: auto; } .logobar { padding-top: 0px; } .home .large-10 { width: 100%; margin-right: 0px; padding-right: 0px; } .fma { height: 55%; margin-top: 0px; } .inside .fma { min-height: 120px; } /*mobile nav */ .columns { padding: 0px; } nav { background: none; height: auto; font-weight: bolder; padding-left: 5px; padding-right: 5px; margin-bottom: 20px; padding-top: 0px; } nav ul ul { position: relative; top: 0px; } nav ul ul li { background-color: transparent; } nav ul li a { color: #00559c; text-transform: none; } nav#nav ul li { float: none; } /*hide nav */ div#navparent { top: 0px; left: 0px; position: relative; float: none; margin: 0; width: 100%; } .learbmore { width: 90%; height: auto; background-color: rgba(0, 0, 0, 0.7); float: left; margin: 1% 5%; padding: 15px 20px; } .learbmore h2 { color: #fff; font-size: 24px; margin: 0 0 5px; font-weight: 300; font-style: normal; } .learbmore p { color: #fff; font-size: 14px; margin: 0; font-weight: 300; font-style: normal; line-height: 22px; padding-bottom: 10px; } .eventlist { width: 90%; float: left; padding: 0; } .fmaevent { width: 100%; height: auto; background-color: rgba(0, 0, 0, 0.7); float: left; clear: both; margin: 0 0 2px; } .fmaevent p { padding: 10px; margin: 0; color: #fff; font-size: 14px; line-height: 20px; } .home .search { background: transparent; width: 90%; margin: 10px 0 0 10px; padding: 0; height: auto; } .inside .search { background-image: none; width: 90%; height: 42px; margin: 50px 0 0 5%; padding: 0; } .search .inputs { height: 30px; border: 1px solid #fff; border-radius: 5px; width: 90%; margin-left: 0; float: left; margin-top: 3px; } .inputs:focus { border-color: #BBB; outline: none; } .search .searchbutton { margin: -30px 10px 0 0px; padding: 0; } .large-2.lline { display: none; } .lline { border-left: none; min-height: 250px; } div.large-10.push-1.columns { margin: 0; padding: 0; width: 90%; } .push-1 { position: relative; right: auto; left: 0; padding-left: 0; margin-left: 0; } .large-9 { width: 60%; } .large-3 { width: 40%; } /* race page */ div#rightracecolumn { display: none; } /* we don't trust the page sizing on a phone */ .main #content, .main { overflow-x: auto; } } /* hide learn more below ipad */ @media screen and (min-width: 0px) and (max-width: 767px) { .learbmore { display: none; } .hidemobile { display: none; } .mobileonly, #nav li.mobileonly { display: block; } } /* Smartphones (portrait and landscape) ----------- */ @media screen and (min-width: 0px) and (max-width: 480px) { #logo { max-width: 250px; } #grambanner { display: none; } .votewindow { min-width: 0px; } div#simplemodal-container a.modalCloseImg { top: 0px; right: 0px; } .large-5 { width: 100%; } .seriesRegistrar { display: none; } .large-5 img { width: 65%; } /* Styles */ .inside .fma { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: auto; min-height: 120px; background-color: rgba(0, 0, 0, 0.7); } .inside .fma .search { margin-top: 6px; } .row-full input#searchinput { width: 250px; } .fma { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; } .large-10 { width: 100%; background-color: rgba(0, 0, 0, 0.7); padding-bottom: 10px; } .eventlist { width: 100%; float: left; padding: 0; } .fmaevent { width: 100%; height: auto; background-color: rgba(0, 0, 0, 0.7); float: left; clear: both; margin: 0 0 2px; padding: 0 0 20px; } .regnow { float: right; margin: 5px 5px 10px 15px; } .home .search { width: 95%; height: auto; margin: 10px 0 0 10px; padding: 0; float: left; } .inside .search { background: transparent; width: 90%; height: 42px; margin: 25px 0 0 5%; padding: 0; } .search .inputs { height: 30px; border: 1px solid #fff; border-radius: 5px; width: 90%; margin-left: 0; float: left; margin-top: 3px; } .inputs:focus { border-color: #BBB; outline: none; } .large-2.lline { display: none; } .lline { border-left: none; min-height: 250px; } .footer .large-2.columns { float: right; width: 25%; } .footer .large-3.columns { float: left; width: 50%; } .hidemobile { display: none; } div.large-10.push-1.columns { margin: 0; padding: 0; } .push-1 { position: relative; right: auto; left: 0; padding-left: 0; margin-left: 0; } .footer .large-2.columns { float: left; width: 100%; } .search { background-color: rgba(0, 0, 0, 0.7); margin: 0px; width: 100%; padding-left: 10px; padding-top: 10px; } .search .searchbutton { margin-top: -10px; } } /* iPads (portrait and landscape) ----------- */ @media screen and (min-width: 768px) and (max-width: 1024px) { /* Styles */ .large-9 { width: 60%; } a .large-3 { width: 40%; } } #logo { float: right; margin-top: 1em; margin-right: 1em; } #search { clear: right; } #search #searchinput { margin-top: 1em; } .timelinevisual { margin-right: 4px; text-align: right; } .timelinevisual .finishdecorator { height: auto; } .timelinetext { display: inline-block; } .timelinetext .points { font-size: smaller; font-weight: bold; } .timelineplace { min-width: 47px; margin-left: 8px; margin-top: 2px; margin-bottom: -5px; } .clear { clear: both; } .timelineplacenumeral { color: #888; font-size: 32px; font-family: Arial Black, Gadget, sans-serif; font-weight: bold; } .upgradeentry .timelineplacenumeral { color: #666; } .timelineplacesuffix { font-size: x-small; font-family: Arial Black, Gadget, sans-serif; margin-left: -11px; } .timelineentry { clear: both; font-size: smaller; vertical-align: bottom; } .timelineentry td { vertical-align: middle; } .timelineentry table { width: 100%; } .timeline.datatable1 { font-size: smaller; } .timeline { margin-right: 0px; margin-top: 0px; text-align: left; } .timeline .roundtop { padding-top: 2px; } .timelinedateheader { color: #fff; font-style: italic; font-size: smaller; padding-bottom: 3px; padding-left: 8px; } .timelineracecatheader { font-style: italic; padding-top: 5px; padding-left: 15px; } .timelineracecatheader a:hover { text-decoration: none; } .timelineracecatheader a { font-size: larger; color: #fff; } #conditionssummary { margin-left: 20px; font-size: 12px; font-style: normal; font-weight: normal; margin-top: 5px; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; vertical-align: middle; } #conditionssummary .smallconditions { padding-left: 5px; padding-right: 5px; } #resultstitle, .racecategoryname { font-family: 'Impact' ,Tahoma,Arial; font-size: 35px; line-height: 35px; font-weight: bold; color: #444; padding: 0px; vertical-align: middle; margin-bottom: 0px; min-height: 30px; } @media screen and (max-width: 767px) { #resultstitle, .racecategoryname { font-size: 25px; line-height: 25px; } } .racecategoryname { margin-right: 10px; } .ageselector, .subcategories { padding-left: 5px; color: #666; background: #dddddd; padding-bottom: 2px; } .ageselector a { color: #888; font-weight: normal; } .subcategories .subcategorylink { display: inline-block; margin-left: 5px; } .subcategories .subcategorylink .subcategoryresults { position: absolute; display: none; border: 1px solid #aaa; background: #f4f4ff; } .subcategories .subcategorylink .subcategoryresults table { border-collapse: collapse; } .subcategories .subcategorylink .subcategoryresults td { padding: 3px; } .sharebuttons { margin-top: 10px; margin-bottom: 10px; } .sharebuttons iframe { float: right; } .subcategories .subcategorylink .subcategoryresults tr:nth-child(odd) td { background: #fff; padding: 3px; } #rightracecolumn { max-width: 308px; display: inline-block; float: right; margin-left: 15px; } #leftracecolumn { display: block; margin-right: 15px; overflow: hidden; } @media screen and (max-width: 850px) { #rightracecolumn { display: none; float: none; } #leftracecolumn { display: block; margin-right: 15px; overflow: hidden; } } .headerrow1 { margin-top: 2em; min-height: 25px; line-height: 25px; color: #000000; font-weight: bold; } .headerrow1 img { vertical-align: middle; } .raceoptions { margin: 2px 10px 2px 2px; background: url(https://www.road-results.com/css/img/bg11.jpg); cursor: pointer; display: inline-block; padding: 2px; } .raceoptionsmenu { vertical-align: middle; position: absolute; border: 1px solid gray; background: #B9CEE1; padding: 3px; display: none; border-radius: 0px 3px 3px 3px; -moz-border-radius: 0px 3px 3px 3px; -webkit-border-radius: 0px 3px 3px 3px; } .ratingnumeral { position: relative; font-size: 32px; font-family: Arial Black, Gadget, sans-serif; font-weight: bold; color: #555; text-align: center; width: 94px; margin-top: 5px; display: inline-block; } .historyfooter { background: #ddd; } .expandMonth .headerrow1 { margin-top: 4px; } .expandMonth .headerrow1 img { margin-right: 4px; margin-top: 2px; } .stravareport { background: #efefef; } .stravareport ul { margin-left: 30px; } .alreadyfollowed { display: none; } div #alreadyfollowed { margin: 15px; } div .hidestrava { margin: 15px; } .skullrating { background: url(https://www.road-results.com/css/img/skullratingbg.png) no-repeat center; min-height: 40px; min-width: 40px; } .moisturerating, .beerrating, .accelrating, .elevationrating, .techrating { background-position: right center; background-repeat: no-repeat; min-height: 40px; min-width: 40px; } #conditionssummary { display: block; margin-top: 5px; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; vertical-align: middle; } #conditionssummary .racetags { float: left; margin-right: 20px; } #conditionssummary div { display: inline-block; } #conditionssummary .smallconditions { vertical-align: middle; } #conditionssummary .moisturerating, #conditionssummary .beerrating, #conditionssummary .accelrating, #conditionssummary .elevationrating, #conditionssummary .techrating { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display: inline-block; scale: 0.5; min-height: 20px; min-width: 20px; } .moisturerating { background-image: url(../../img/moistureratingbg.png); } .beerrating { background-image: url(../../img/beerratingbg.png); } .elevationrating { background-image: url(../../img/elevationratingbg.png); } .accelrating { background-image: url(../../img/accelratingbg.png); } .techrating { background-image: url(../../img/skullratingbg.png); } .ratingdescription { margin-bottom: 0px; color: #000; font-weight: bold; } .headerrow2 { min-height: 25px; font-size: 14px; border-bottom: 1px solid #888; margin-bottom: 5px; } .ageinfo { font-size: smaller; -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; background: #eee; border: 1px solid #ddd; padding: 7px; } .categoryheaderrow { margin-top: 1em; } .categoryheaderrow h2, .categoryheaderrow h1 { display: inline-block; } .ui-dialog { padding: 0px; padding: 3px; } .expanderimg { margin: 2px; } .topdatacell { padding-left: 5px; padding-right: 5px; } .topdatacell h1, .topdatacell h2 { margin-top: 0px; } #allresults { margin-top: 10px; } .faqlink { background: #99BBFF; border: 1px solid #666699; padding-left: 2px; padding-right: 2px; font-size: small; -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; } .faqlink:hover { background: #CCCCFF; } .sliderrow { padding: 5px; font-weight: bold; line-height: 40px; } .sliderrow:nth-child(even) { background: #fff; } .sliderrow:nth-child(odd) { background: #ddd; } .slider { display: inline-block; width: 40%; bottom: 0px; background-image: url(../../img/bg4.jpg); background-position: center top; background-repeat: repeat-x; } .ratingvalue { font-size: large; } #simplemodal-container a.modalCloseImg { background: url(../../img/x.png) no-repeat; /* adjust url as required */ width: 25px; height: 29px; display: inline; z-index: 3200; position: absolute; top: -15px; right: -18px; cursor: pointer; } #simplemodal-overlay { background-color: #000; } .followbutton, .linkbutton, .unfollowbutton { background: #8FBEF3; color: #333; border: 1px solid #666; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 1px 5px 1px 5px; margin: 5px; cursor: pointer; font-size: larger; font-weight: bold; width: 110px; } .linkbutton:hover { border: 1px solid #ffffff; text-decoration: none; background: #B0D0F2; } .followbutton:hover { background: #55ff88; text-decoration: none; } .unfollowbutton:hover { background: #e45924; text-decoration: none; } .popup { display: none; padding: 10px; } .inline { display: inline-block; } .coda-slider-wrapper .coda-slider { /****************************************************** * * Inner wrapper styles * *******************************************************/ background: #f2f2f2; /****************************************************** * * Width of the container. Typically you will want to * match this with the width of the panel as well. * *******************************************************/ width: 306px; } .coda-slider-wrapper .coda-slider .panel { /****************************************************** * * Width of each individual panel. * Typically you will want to match this with the width * of the container as well. * *******************************************************/ width: 306px; } #tweets { width: 306px; max-height: 306px; overflow-y: scroll; overflow-x: hidden; } .gramdiv { height: 350px; width: 306px; } .tweetblock { vertical-align: top; } .tweet { padding-right: 2px; text-align: right; } .tweetwrapper { padding-bottom: 3px; border-bottom: 1px solid gray; font-family: Arial; font-size: 14px; } .tweettime { float: right; color: #999; } .tweeter { font-weight: bold; } .tweetwrapper:nth-child(odd) { background: #efefef; } .tweetwrapper:nth-child(even) { background: #fff; } .voteinfo { width: 25%; display: inline-block; line-height: 15px; } .votewindow { background: white; min-width: 500px; } .datarow1 td, .datarow2 td { padding-top: 0px; padding-bottom: 0px; border-bottom: 1px solid gray; padding-left: 4px; padding-right: 4px; } .datarow1 td img, .datarow2 td img { vertical-align: middle; margin-left: 4px; margin-right: 4px; } .datarow3 td { padding-top: 0px; padding-bottom: 0px; padding-left: 4px; padding-right: 4px; } .datarow3 td img { vertical-align: middle; margin-left: 4px; margin-right: 4px; } td.number, th.number, table:not(.noStyle) tbody th.number { text-align: center; } #attribution { float: right; font-size: 12px; font-style: normal; font-weight: normal; font-family: Arial Black, Gadget, sans-serif; } #leftracecolumn #ajaxtarget { white-space: nowrap; font-size: smaller; max-height: 140px; overflow-y: auto; overflow-x: hidden; } .locationtools { font-size: smaller; margin: 5px; } .animal img { width: 100px; } .racemeta { float: right; } /* highlight results */ .ui-autocomplete span.hl_results { background-color: #ffff66; } /* loading - the AJAX indicator */ .ui-autocomplete-loading { background: white url("https://www.road-results.com/img/ui-anim_basic_16x16.gif") right center no-repeat; } /* scroll results */ .ui-autocomplete { max-height: 250px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; /* add padding for vertical scrollbar */ padding-right: 5px; -webkit-border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; } .ui-autocomplete li { font-size: 16px; -webkit-border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; } .ui-autocomplete .ui-state-focus { -webkit-border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; } #upgradeboard { font-size: smaller; } .allnews { margin-left: auto; margin-right: auto; max-width: 800px; } .allnews .fmaevent p { font-size: 16px; } .allnews .fmaevent { max-height: 630px; overflow-y: scroll; padding: 10px; } .allnews h1 { color: #fff; } .groupsprint { width: 50px; background: url(../../img/groupfinish.png); } .fieldsprint { width: 52px; background: url(../../img/fieldfinish.png); } .bottledecorator { vertical-align: middle; } .finishdecorator { height: 30px; text-align: center; font-weight: bold; line-height: 35px; display: inline-block; } #stats, #headlinecontainer, #leaderboard { padding: 2px; } #racerhistory { margin-left: 5px; } .resultstable .resultsrow { transition: background 250ms; transition-delay: 400ms; } .resultstable .resultsrow:target { background-color: #FBB040; } .widget #footer { font-size: smaller; } .widget #footer a { color: #fff; padding: 3px; }