@charset "utf-8";
/* CSS Document */

/* body {
    background: #fff url(../img/background-image-1.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-size: 1em;
    font-family: robotoregular, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}  */

body {
    background: #79bf4c url(../img/background-image-test.jpg) repeat-x;
    background-position: bottom center;
    background-attachment: fixed;
    font-size: 1em;
    font-family: robotoregular, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}




@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* @font-face {
    font-family: 'komikax';
    src: url('../fonts/KOMIKAX_-webfont.eot');
    src: url('../fonts/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/KOMIKAX_-webfont.woff') format('woff'),
         url('../fonts/KOMIKAX_-webfont.ttf') format('truetype'),
         url('../fonts/KOMIKAX_-webfont.svg#komika_axisregular') format('svg');
    font-weight: normal;
    font-style: normal;

} */

/* new font */
@font-face {
    font-family: 'playtime';
    src: url('../fonts/Playtime-webfont.eot');
    src: url('../fonts/Playtime-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Playtime-webfont.woff') format('woff'),
         url('../fonts/Playtime-webfont.ttf') format('truetype'),
         url('../fonts/Playtime-webfont.svg#playtimewithhottoddiesobliqRg') format('svg');
    font-weight: normal;
    font-style: normal;

}


a {
    color: #f7941e;
}

.panel h3 {
    font-family: playtime;
    color: #fff;
}

p.white {
    color: #fff;
   font-family: robotoregular, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p.no-margin {
    margin-top: 0;
    margin-bottom: 0;
     font-family: robotoregular, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}


#wrap {
    min-height: 100%;
    position: relative;
}

.full-width {
    max-width: 100%;
}

#small-bar {
    background: #3988c8;
    width: 100%;
}

nav #menu {
    margin-top: -2em;
}

header {
    padding-top: 1em;
    padding-bottom: 1em;
    background: #f7941e url(../img/header-bg.png) repeat;
    border-bottom: solid 4px #fff;
    /* margin-bottom: -2em; */
    /*background: url(../img/background-header-small.png) repeat-x top; */
}

header .panel.date {
    color: #f7941e;
    font-family: playtime;
    font-size: 2em;
    background: #fff;
    text-align: center;
    margin-top: 1em;
    border-color: #fff;
    margin-left: -1em;
    margin-right: -1em;
}

header .panel.date h2 {
    font-family: playtime;
    color: #f7941e;
}

header .menu {
    background: #fff;
    border-radius: 15px;
    color: #f7941e;
    font-size: 1.25em;
    font-family: playtime;
    border-color: #6eb43f;
}


header .menu a.fill {
    color: #f7941e;
    display: block;
    padding: 1em 0;

}

header .menu a:hover {
    background: #6eb43f;
    border-radius: 15px;
    color: #fff;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
}


header 


main a {
    border-bottom: dashed 1px;
    padding-bottom: 1px;
}

main a:hover {
    color: #6eb43f;
}

main {
   
}

/* main .panel.enter-now {
    background: #ee3b33;
    border: 2px #ee3b33;
    border-radius: 15px; 
    color: #fff;
}

main .panel.entry-fees {
    background: #fff200;
    border: 2px #fff200;
    border-radius: 15px; 
    color: #000;
} */

main .panel.enter-now {
    background: #6eb43f;
    border: 2px #6eb43f;
    border-radius: 15px;
    color: #fff;
    margin-top: 3em;
    margin-bottom: 3em;
}

main .panel.white {
    background: #fff;
    border: none;
    border-radius: 15px;
    color: #6eb43f;
}

/*  main .panel.sponsors {
    background: #6eb43f;
    border: 2px #6eb43f;
    border-radius: 15px;
    color: #fff;
} */

main .panel.title p {
    color: #fff;
}

main .panel.logo {
    background: #fff;
    border-radius: 15px;
    border: none;
}

main .panel.enter-single {
    background: #6eb43f;
    border: 2px #6eb43f;
    border-radius: 15px;
    color: #fff;
    margin-top: 1em;
} 

main .panel.enter-single.payment {
    margin-top: 2em;
}

main .panel.enter-single h2 {
    color: #fff;
    font-family: playtime;
    text-align: center;
    margin-bottom: 1em;
}

main .panel.enter-now p, main .panel.enter-now h2, main .panel.lap p, main .panel.lap h2 {
    color: #fff;
}

main .panel.enter-now h2, main .panel.entry-fees h2, main .panel.lap h2 {
    font-family: playtime;
    margin-bottom: 0.75em;
    font-size: 3.5em;
}

main fieldset {
    background: #fff;
    border-radius: 0 15px 15px 15px;
    border: none;
   
}

main fieldset legend {
    color: #6eb43f;
    padding: 0.25em 1em;
    border-radius: 15px 15px 0 0;
    margin-left: -1em;
    font-family: playtime;
    font-size: 1.25em;
}

main [data-abide] .error small.error {
    background: #ee3b33;
    margin-top: -3px;
    border-radius: 0 0 4px 4px;
}

main [data-abide] .error label.error {
    color: #ee3b33;
    font-weight: bold;
}

main label {
    color: #6eb43f;
}

main input[type="text"], main select {
    border-radius: 4px;
    border-color: #6eb43f;
    box-shadow: inset 0 1px 2px rgba(110,180,63,0.1);
    color: rgba(110,180,63,0.75);
    color: #000;
}

main select {
    background-color: #fff;
}

main select:hover {
    background: #fff;
    border-color: #6eb43f;
}

main input[type="text"]:focus, input[type="text"][disabled] {
    background: #f3ffea;
    border-color: #6eb43f;
}

main textarea[readonly] {
    background-color: #e6fed5;
    border-radius: 4px;
    border-color: #6eb43f;
    box-shadow: inset 0 1px 2px rgba(110,180,63,0.1);
    color: rgba(110,180,63,0.75);
}

main fieldset.personal { /* family entry Personal Details fieldset */
   background: #fff;
   border-radius: 15px 15px 15px 15px;
}

main fieldset.personal fieldset {
    background: #6eb43f;
}

main fieldset.personal fieldset label {
    color: #fff;
}

main fieldset.personal>legend {

}

main fieldset.personal fieldset legend {
    background: #6eb43f;
    color: #fff;
}

main input[type="submit"] {
    background: #fff;
    border-radius: 15px;
    font-family: playtime;
    color: #6eb43f;
}

main input[type="submit"]:hover {
    background: #f7941e;
}

main table.results {
    text-transform: lowercase;
}

main table.results a {
    border-bottom: none;
}

main table.results tr:nth-of-type(even), main table.fees tr:nth-of-type(even) {
    background: none;
}

main table.results {
    border-radius: 15px;
    padding-bottom: 0.75em;
    padding-top: 0.75em;
    margin-left: auto;
    margin-right: auto;
}

main table.results tr th {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5em;
    color: #6eb43f;
    font-family: playtime;
    padding-bottom: 0.75em;
}


main table.results tr td.header {
    background: #f7941e;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

/* current results table */

main table.results.current a {
    display: table;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 1em;
    color: #fff;
}

main table.results.current a:hover {
    background: #000;
}

main table.results.current tr td {
    font-size: 1.25em;
    padding: 0;
}

main table.results.current tr td.header {
    padding-top: 1em;
    padding-bottom: 1em;
}

main table.results.current td.header.girls {
    background: #6eb43f;
    padding: 1em;
}

main table.results.current td.header.boys {
    background: #f7941e;
}

main table.results.current td.girls {
    background: rgba(110,180,63,1.0);
}

main table.results.current td.girls a {
    color: #fff;
}

main table.results td.girls a:hover {
    background: #f7941e;
}

main table.results.current td.boys {
    background: rgba(247,148,30,1.0);
}

main table.results.current td.boys a {
    color: #fff;
}

main table.results.current td.boys a:hover {
    background: #6eb43f;
}

/* results listing table */

table.results-listing {
        background: #6eb43f;
    margin: 2em auto;
    border-radius: 15px;
    padding-bottom: 0.75em;
    padding-top: 0.75em;
    border: none;
}

table.results-listing tr th {
    text-transform: uppercase;
    color: #fff;
    font-size: 1.25em;
    background: #6eb43f;
    text-align: left;
}

table.results-listing tr th.header {
    text-align: center;
    font-size: 1.75em;
}

table.results-listing tr td {
   border-bottom: solid 1px #75bf43;
       color: #fff;
    font-size: 1.15em;
}

main table tr th, main table tr td {
    font-size: 1em;
    text-align: center;
}

main .button.single-enter, main .button.family-enter {
    background: #ee3b33;
    border-radius: 15px;
    font-weight: bold;
    width: 100%;
}

main .button.family-enter {
    background: #fff200;
    color: #f7941e;
}

main .button.single-enter:hover {
    background: #d8332b;
}

main .button.family-enter:hover {
    background: #efe300;
}

main .button.single-enter a {
    color: #fff;
    border-bottom: none;
}

main .button.family-enter a {
    color: #f7941e;
    border-bottom: none;
}

main .button.admin {
    background: #6eb43f;
    color: #fff;
}


p.download.single a, p.download.family a {
    color: #ee3b33;
    border-bottom: none;
    font-weight: bold;
    text-transform: uppercase;
}

p.download.single a:hover {
    background: #ee3b33;
    color: #fff;
}

p.download.family a {
    color: #f7941e;
}

p.download.family a:hover {
    background: #f7941e;
    color: #fff;
}

#previous-entry label {
    font-weight: bold;
}

main input.modify {
    background: #6eb43f;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #fff;
}

main input.modify:hover {
    background: #5ca02f;
}

h3.entry-fees {
    color: #fff;
    text-align: center;
    font-family: playtime;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
}

main table.fees {
    width: 100%;
    border: none;
    background: #fff;
    border-radius: 15px;
}

main table.fees tr th.fees {
    font-size: 1em;
    font-family: robotoregular, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5em;
    background: #f7941e;
    color: #fff;
    border-radius: 15px 15px 0 0;
}

main table.fees tr td {
    border-bottom: solid 1px #f7941e;
    color: #f7941e;
}

main table.fees tr:last-child td {
    border: none;
}

main table.race-times {
    background: #fff;
    margin: 0 auto;
    border-radius: 15px;
    border: none;
    width: 100%;
    font-size: 0.9em;
}

main table.race-times tr:nth-of-type(even) {
    background: none;
}

main table.race-times tr:nth-of-type(odd) {
    background: #fff200;
}

main table.race-times th {
    border-radius: 15px 15px 0 0;
}

main table.race-times tr:last-child td {
    border-radius: 0 0 15px 15px;
}

main .panel.white.lap .declaration {
    background: #6eb43f;
    margin-left: -0.75em;
    margin-right: -0.75em;
    margin-bottom: -2em;
    border-radius: 0 0 15px 15px;
}

main .panel.white.lap p {
    color: #6eb43f;
}

main .panel.white.lap .declaration p {
    padding: 0.5em;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

main .panel.white.lap .declaration p a {
    color: #fff;
    border-bottom: none;
}

main .panel.white.numbers {
    margin-top: 1em;
}

main .panel.white.numbers p {
    color: #6eb43f;
}

main .panel.white.lap h3, main .panel.white.numbers h3 {
    color: fff;
    line-height: 1.5em;
    background: #6eb43f;
    margin-left: -0.5em;
    margin-right: -0.5em;
    margin-top: -0.5em;
    border-radius: 15px 15px 0 0;
    padding-bottom: 0.5em;
}

main #sponsors {
    margin-top: 2em;
}

main #sponsors .panel.sponsor-title {
    background: #f7941e;
    border: none;
    color: #fff;
    border-radius: 15px;
}

main #sponsors h3.gold, main #sponsors h3.silver, main #sponsors h3.bronze, main #sponsors h3.supporting {
    text-align: center;
    font-family: playtime;
    color: #fff;
}

main .panel.title {
     background: #6eb43f;
    border: 2px #6eb43f;
    border-radius: 15px;
    margin-top: 2em;
}

main .panel.title h2 {
        color: #fff;
    font-family: playtime;
    text-align: center;
    font-size: 3.5em;
}

/* homepage banners */

#homepage {
    margin-bottom: 2em;
    margin-top: 3em;
}

.home-banner {
  background: #6eb43f;
  border-radius: 15px;
  margin-bottom: 2em;

}

.home-banner-img {
   background: url(../img/homepage-main-image.png) no-repeat;
    margin-left: -14px;
    margin-right: -20px;
    padding-bottom: 4em;
   height: 617px;
  overflow: visible;
 }
 
.home-banner-img h2 {
     color: #fff;
     font-family: playtime;
     text-align: right;
     margin-right: 2em;
     padding-top: 1em;
 }
 
 .home-banner-img h2.date {
     padding-top: 0;
 }
 
 .home-banner-img h2.single {
     padding-top: 0;
 }
 
 .home-banner-img h2.family {
     padding-top: 0;
 }
 
 .home-banner-img .button {
     margin-right: 1.75em;
     background: #ec2026;
     border-radius: 10px;
     margin-top: 6em;
     font-family: playtime;
     font-size: 1.5em;
 } 
 
 .home-banner-img .button:hover {
     background: #fff;
     color: #ec2026;
 }
 
 .home-banner-img p {
     margin-left: 13em;
     color: #fff;
     margin-right: 2.5em;
     text-align: right;
     margin-top: 12em;
 }

main .panel.home {
    border-radius: 15px;
    border: none;
}

main a.school {
    border-bottom: none;
}

main .panel.home p {
    font-weight: bold;
}

main .panel.home.red {
    background: #ec2026;
}

main .panel.home.yellow {
    background: #fff100;
}

main .panel.home.orange {
    background: #f48024;
}

main .panel.home.yellow h2 {
    color: #ec2026;
    font-family: playtime;
    text-align: center;
    line-height: 1.15em;
}

main .panel.home.orange h2 {
    font-family: playtime;
    text-align: center;
    line-height: 1.15em;
    color: #fff;
}

main .panel.home.red h2 {
    font-family: playtime;
    text-align: center;
    color: #fff100;
}

main .panel.home.orange.right-col h2 {
}

main .panel.home.red {
    margin-top: -0.5em;
}

#ipodmodal, #schoolmodal, #schoolmodal2, #randommodal, #lapmodal, #itunesmodal, #medalmodal {
    background: #6eb43f;
    color: #fff;
    border-radius: 15px;
    border: none;
}

#lapmodal a {
    color: #fff;
    font-weight: bold;
    border-bottom: dashed 1px;
}

#lapmodal a:hover {
    background: #fff;
    color: #6eb43f;
}

img.image-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
}


footer {
    background: url(../img/background-footer.png) repeat-x top;
    padding: 1em 1em 0 1em;
    bottom: 0;
    left:0;
    text-align: center;
    position: fixed;
    color: #fff;
    width: 100%;
}
 footer #date h2 { color: #fff; font-family: playtime; font-size: 1em; margin-top: 0.25em; }

footer #contact a, footer #map a {
    color: #fff;
    border-bottom: none;
}


footer h3 a {
    font-size: 0.75em;
    font-family: playtime;
}


/* payment pages */

body#payment {
    background: #f7941e;
}

h4.payment {
    font-family: playtime;
    color: #6eb43f;
}

h4.payment span.orange {
    color: #f7941e;
}

body#payment input[type="submit"].button {
    background: #f7941e;
    color: #fff;
}

body#payment input[type="submit"].button:hover {
    background: #6eb43f;
}

/* payment success page */

body#success {

}

body#success .panel.success img.logo {
    margin: 1em auto 3em auto;
    display: block;
}

body#success .panel.success {
    background: #fff;
    color: #000;
    border-radius: 15px;
    border: none;
    margin-top: 2em;
}

body#success .panel.success h2, body#success .panel.success h3 {
    font-family: playtime;
    color: #6eb43f;
    margin-bottom: 1em;
    text-align: center;
}

body#success .panel.success h3 {
    margin-top: 1em;
}

body#success .panel.success span.orange, .panel.error span.orange {
    color: #f7941e;
    font-size: 1.05em;
    font-weight: bold;
}

body#success .panel.success table.times, body#success .panel.success table.entry {
    background: #6eb43f;
    margin: 2em auto;
    border-radius: 15px;
    padding-bottom: 0.75em;
    padding-top: 0.75em;
}

body#success .panel.success table.entry {
    font-size: 0.85em;
}

body#success .panel.success table.entry.guardian {
    background: #f7941e;
}

body#success .panel.success table.times tr:nth-of-type(even), body#success .panel.success table.entry tr:nth-of-type(even) {
    background: none;
}

body#success .panel.success table.times tr th, body#success .panel.success table.entry tr th {
    text-align: left;
    text-transform: uppercase;
    font-size: 1em;
    color: #fff;
    padding-bottom: 0.75em;
}

body#success .panel.success table.times tr td.header, body#success .panel.success table.entry tr td.header {
    background: #f7941e;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

body#success .panel.success table tr td, body#success .panel.success table.entry tr td {
    font-size: 1em;
    color: #fff;
    border-bottom: solid 1px #73be41;
}

body#success .panel.success table.entry.guardian tr td {
    border-bottom: solid 1px #fdb053;
}

body#success .panel.success a.button, body#success .button.small.orange {
    background: #f7941e;
    border-radius: 15px;
    font-weight: bold;
    color: #fff;
}

body#success .panel.success a.button:hover, body#sucess .button.small.orange:hover {
    background: #6eb43f;
    color: #fff;
}

body#success .panel.error, .panel.error {
    background: #fff;
    border: solid 1px #f7941e;
    border-radius: 15px;
}

body#success main .panel.success h2.login {
    color: #6eb43f;
    font-weight: bold;
    font-size: 1.5em;
    text-align: left;
}


/* style the footer modals */

h2#modalTitle {
    font-family: playtime;
    color: #fff;
    margin-bottom: 0.5em;
}

 .reveal-modal .close-reveal-modal {
     color: #fff;
 }
 
#ContactModal p {
    font-size: 1.25em;
}

#ContactModal, #MapModal {
    background: #f7941e;
    border-radius: 15px;
    color: #fff;
    border: none;
}

#MapModal {
    background: #6eb43f;
}

@media only screen and (min-width: 40.063em) and (max-width: 64em){  /* Medium only */
 footer #date h2 { font-size: 1.5em; }
   /* header { background: url(../img/backround-header-medium.png) repeat-x top; } */
     #contact img { margin-bottom: -3.5em; margin-top: -2.5em; }
  #map img { margin-bottom: -3.5em; margin-top: -2.5em; }
  main .panel.home h2 { font-size: 1.15em; }
  
   .home-banner-img h2 {
     color: #fff;
     font-family: playtime;
     text-align: right;
     margin-right: 1em;
     padding-top: 0.5em;
 }
 
 .home-banner-img h2.date {
     padding-top: 0;
 }
 
 .home-banner-img h2.single {
     padding-top: 5em;
 }
 
 .home-banner-img h2.family {
     padding-top: 0;
 }
 
 .home-banner-img .button {
     margin-right: 1.75em;
     background: #ec2026;
     border-radius: 10px;
     margin-top: 1em;
     font-family: playtime;
     font-size: 1.5em;
 }
 
}

@media only screen and (min-width: 64.063em){ /* Large-up */
    footer #date h2 { color: #fff; font-family: playtime; font-size: 2.5em; margin-top: 0.25em; }
    header { margin-bottom: 3em; }
     /* header { background: url(../img/background-header.png) repeat-x top; } */
        #contact img { margin-bottom: -6em; margin-top: -2.5em; }
  #map img { margin-bottom: -6em; margin-top: -2.5em; }
  main .panel.white.lap {
    margin-top: 5em;
}


main .panel.home.yellow h2 { /* large up only */
    text-transform: uppercase;
    font-weight: bold;
    font-size: 2.25em;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
display: inline-block;
}

main .panel.home.yellow.right-col h2 { /* large up only */
    text-transform: uppercase;
    font-weight: bold;
    font-size: 2.25em;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
display: inline-block;
}

main .panel.home.orange { /* large up only */
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.25em;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
display: inline-block;
    margin-top: -0.5em;
}

main .panel.home.orange.right-col { /* large up only */
    text-transform: uppercase;
    font-weight: bold;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
display: inline-block;
    margin-top: -0.5em;
}

main .panel.home.orange h2, main .panel.home.orange.right-col h2 {
    font-size: 1.35em;
} 


main .panel.home.red.right-col h2 { /* large up only */
    text-transform: uppercase;
    font-weight: bold;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
display: inline-block;
    margin-top: -0.5em;
    font-size: 2em;
}

main .panel.home.red h2 {
    -webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
display: inline-block;
}

 .home-banner-img h2 {
     color: #fff;
     font-family: playtime;
     text-align: right;
     margin-right: 1em;
     padding-top: 0.5em;
 }
 
 .home-banner-img h2.date {
     padding-top: 0;
 }
 
 .home-banner-img h2.single {
     padding-top: 5em;
 }
 
 .home-banner-img h2.family {
     padding-top: 0;
 }
 
 .home-banner-img .button {
     margin-right: 1.75em;
     background: #ec2026;
     border-radius: 10px;
     margin-top: 1em;
     font-family: playtime;
     font-size: 1.5em;
 }

  }
  
@media only screen and (min-width: 40.063em) {  /* Medium screens and up - USE if large and medium are same value */

  nav #menu {margin-top: 0; }
  header { margin-bottom: 1em; }
body#success .panel.success table.entry {
    font-size: 1em;
}


header .panel.date {
    color: #f7941e;
    font-family: playtime;
    font-size: 2em;
    border: none;
    background: #fff;
    margin-top: -1em;
    text-align: center;
    border-radius: 0 0 15px 15px;
    border-color: #f7941e;
    padding-top: 1em;
    margin-left: 0;
    margin-right: 0;
}
 header .menu { font-size: 1.75em; }
 
  .home-banner-img p {
     margin-top: 0;
     margin-left: 10em;
 }

}