/*
Original design: Winter Response (7th November 2019)
Design by Stray Cat Web Development
*/



@font-face {
 font-family: 'abeezeeregular';
 
src: url('fonts/abeezee-regular-webfont.woff2') format('woff2'),
 url('fonts/abeezee-regular-webfont.woff') 
format('woff');
 font-weight: normal;
 font-style: normal 

}




@font-face {
 font-family: 'abeezeeitalic';
  
src: url('fonts/abeezee-italic-webfont.woff2') format('woff2'),
  url('fonts/abeezee-italic-webfont.woff') 
format('woff');
 font-weight: normal;
  font-style: italic}

@font-face { font-family: 'enriquetaregular' ; scr: url('fonts/enriqueta-regular.woff') format('woff');
font-weight: normal ; font-style: normal }
@font-face { font-family: 'enriquetabold' ; scr: url('fonts/enriqueta-bold.woff') format('woff');
font-weight: bold ; font-style: normal }




@font-face {
 font-family: 'lorabold';
  src: url('fonts/lora-bold-webfont.woff2') format('woff2'),
         
url('fonts/lora-bold-webfont.woff') format('woff');
 font-weight: bold;
 font-style: normal;

}





@font-face {
 font-family: 'lorabold_italic';
 src: url('fonts/lora-bolditalic-webfont.woff2') format('woff2'),
         
url('fonts/lora-bolditalic-webfont.woff') format('woff');
 font-weight: bold;
 font-style: italic;

}





@font-face {
 font-family: 'loraitalic';
 src: url('fonts/lora-italic-webfont.woff2') format('woff2'),
         
url('fonts/lora-italic-webfont.woff') format('woff');
    
font-weight: normal;
 font-style: italic;

}





@font-face {
 font-family: 'loraregular';
 src: url('fonts/lora-regular-webfont.woff2') format('woff2'),
         
url('fonts/lora-regular-webfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;

}

*{ margin : 0 ; padding : 0 }

/* General styles */

body { background : #fff ; color : #666 ; 
font : 1.1rem 'abeezeeregular',Tahoma,sans-serif ; line-height : 1.6em }

a { color : #007a99 ; text-decoration : none ; font-weight : 400 } 

a:hover { text-decoration : underline ; color : #555 }


p, ul, ol, dl  { margin : 0 0 15px 0 }
blockquote { margin : 0 0 15px 0 }

h1,h2,h3, h4 { font-family : 'enriquetaregular', 'loraregular', serif ; 
color : #007A99 ; font-weight : 400 ; line-height : 1.9rem }

h1 { font-size : 1.7rem ;  margin : 0 10px 15px }
h1 a { text-transform : none ; font-weight : 400 }
h1 a:hover {text-decoration : none ; color : #303030 }

h2 { font-size : 1.6rem ; margin : 5px 0 10px }
h3 {font-size : 1.4rem ; margin : 8px 0 10px 0 }
h4 {font-size : 1.2rem ; margin : 0 0 5px 0 }

img { max-width : 100% ; height : auto }

/* Header */

#header { margin : 25px auto ; width : 90% ; text-align : center }

p.header {text-align : center ; font-family : 'enriquetaregular', 'loraregular', sans-serif ; 
color : #007a99 ; font-weight : 400 ; font-size : 1.8rem ;
 line-height : 1.2rem ; width : 95% ; margin :0 auto 20px }
p.header a { text-decoration : none ; text-align : center ; color : #007a99 ; font-size : 1.8rem }

header > #slogan { color : #888 ; font-family : 'loraitalic' ; 
font-size : 1.3rem ; font-style : italic ; margin : 15px 0 20px }

.headerimage img {border-radius : 12px; margin-bottom : 10px }

/* Navigation menu */

div.navmenu { margin-bottom : 30px }
.navmenu a {font-size : 1.3rem ; margin: 0 20px }
.navmenu a.current { color : #005266 }

/* Ads */

.ad-top { max-width : 80% ; margin : auto }
.ad-content-top-right { float : right ; display : none }
#yw2020 { border : 1px #dc8989 solid ; padding : 6px }

/* Main content */

.main-content { max-width : 100% ; padding : 0 15px ; margin : auto }

/* Single column border */

.single-col-border { max-width : 100% ; margin : 20px auto 20px ; 
padding : 10px 15px 0px ; }

/*Grid*/

.grid { margin : auto ; max-width : 100% ; display : grid ; grid-gap : 20px ; 
grid-template-columns : repeat(auto-fill, minmax(340px, 1fr)) }
.box { padding : 0 15px ; }

/*Left-Right*/

.left-right { margin : auto ; max-width : 100% }
.left { max-width : 100% }
.right { display : none }

/* Menu list styles */

ul.menu { margin : 0 ; padding : 10px 0 }
ul.menu li { text-align : center ; font-size : 1.2em ; margin : 0 0 10px ; padding : 0 0 8px 0 ;
 color : #888 }
ul.menu li a { font-size : 1.2em ; font-weight : 400 }
ul.menu li a : hover { color : #333 ; text-decoration : none }


/*Lists & list markers*/

ul,ol { margin-left : 20px }
ul.circle { list-style-type : circle }
ol.alphabet { list-style-type : lower-latin }
ol.numbers { list-style-type : decimal }

/*Feature-Box*/

div.feature-box { background : #f2f2f2 ; color : #404040 ; padding : 5px ; border : 1px solid #007A99 ; 
margin-bottom : 10px }

/*Feature div*/

div.feature {margin:10px ; background:#f2f2f2 ; padding:5px ; border:2px solid; border-radius : 10px ; 
border-color : rgba(0,163, 204, 0.6) ; width : 75% ; margin : auto ; margin-top : 20px
margin-bottom : 20px }
img.sme { float : left ; padding-right : 20px ; padding-bottom : 15px }


/*Blockquote*/

blockquote.winter { width : 95% ; background : #F2F2F2 ; color : #4d4d4d ; border-left : 3px #007A99 solid ; 
border-top : 1px #cccccc solid ; border-right : 1px #cccccc solid ; border-bottom : 1px #cccccc solid ; 
padding : 8px }


/* Photo grid green */

div.photogrid-green { max-width : 100% ;  margin : auto ; box-sizing : border-box ; display : grid ; 
grid-template-columns : repeat(auto-fill, minmax(300px, 1fr)) ; 
grid-gap : 20px ; background-color : rgba(217, 242, 230, 0.6) ; padding : 20px ; 
border : 2px rgba(52, 152, 104, 0.6) solid ; border-radius : 8px ; box-shadow : 0 0 10px 10px #215f41 ;
margin-top : 25px ; margin-bottom : 25px }

div.photobox-green { box-sizing : border-box ;  display : flex ; align-items : center ;  justify-content : center ;
border : 2px rgba(52, 152, 104, 0.6) solid ; transition : border 0.5s }

div.photobox-green:hover, div.photobox-green:focus { border : 2px rgba(26, 76, 52, 1.0) solid }

.photobox-green img { max-width : 100% ; height : auto }


/* Photo grid blue */

div.photogrid-blue { max-width : 100% ;  margin : auto ; box-sizing : border-box ; display : grid ; 
grid-template-columns : repeat(auto-fill, minmax(300px, 1fr)) ; 
grid-gap : 20px ; background-color : rgba(230, 250, 255, 0.6) ; padding : 20px ; 
border : 2px rgba(0, 163, 204, 0.6) solid ; border-radius : 8px ; box-shadow : 0 0 4px 5px rgba(0, 102, 128, 0.5) ;
margin-top : 25px ; margin-bottom : 25px }

div.photobox-blue { box-sizing : border-box ;  display : flex ; align-items : center ;  justify-content : center ;
border : 2px rgba(0, 163, 204, 0.6) solid ; transition : border 0.5s }

div.photobox-blue:hover, div.photobox-blue:focus { border : 2px rgba(0, 41, 51, 1.0) solid }

.photobox-blue img { max-width : 100% ; height : auto }

/* Bus times table */

th, td { border : 1px solid black ; padding : 4px }
table.bus-times { width : 90% ; border : 2px #007a99 solid ; caption-side : top ; table-layout : fixed ;
border-collapse : collapse }
table.bus-times th { background-color : rgb(204, 204, 204) }
table.bus-times caption { font-size : 1.2em ; font-weight : normal ; background : #ccf5ff ; 
border : #007a99 solid ; border-width : 2px 2px 0 }

/*Figure and figcaption and arty image*/

figure { display : block ; margin : 0 0 15px 0 }
figcaption { font-size : 0.9em }
img.arty {border : 1px solid #323232 ; padding : 3px ; background : #fff ; border-radius : 12px ;
box-shadow : 3px 3px 5px #808080 }

/*Contact form*/

input { background-color : #F2F2F2 ; border : 2px solid #00a3cc ; border-radius : 10px ;
padding : 10px 15px ; margin : 6px 0 ; box-sizing : border-box }
input[type=submit] { background-color : #009900 ; color : #FFFFFF ; border : 2px #00CC00 outset ; 
width : 100px ; height : 35px ; margin-bottom : 10px }
textarea { background-color : #F2F2F2 ; border : 2px solid #00a3cc ; border-radius : 10px ;
padding : 10px 15px ; margin : 6px 0 ; box-sizing : border-box }
fieldset { background-color : #F2F2F2 ; border : 2px solid #00a3cc ; border-radius : 10px ;
padding : 10px 15px ; margin : 6px 0 ; box-sizing : border-box ; width : 50% }
input[type=radio] { width : 25px ; height : 25px }

/*Sign-up form*/

input.signup { border-color : #00A3cc ; padding : 5px 5px }

/* Additional text classes */

.slogan { color : #888 ; font-size : 1.2em }
.alignleft {text-align:left;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}
.alignjustify {text-align:justify;}
.nomargin {margin:0; padding:0;}
.separator {height:100px; margin:0; padding:0; background: #0a0a0a url(images/insidebg2.jpg) bottom center no-repeat; border-bottom:1px dotted #1a1a1a;}
.larger {font-size:1.2em;}
.smaller {font-size:0.9em;}
.spacer {margin:0 20px;}
.clear {clear:both;}
.hide {display:none;}
.border {border:1px solid red;}
#slogantory { color : #b30000 ; font-family : 'loraitalic' ; 
font-size : 1.6rem ; line-height : 1.8rem ; font-style : italic ; 
margin : 15px 15px 20px ; padding : 10px ; border : 1px black solid ; background-color : #f2f2f2 }


/* Footer */

#footer { background-color : #f2f2f2 ; border : 2px #b3b3b3 dotted ; border-bottom : 0px ;
color : #555 ; padding : 20px 0 5px ; max-width : 80% ; margin : 10px auto 0px }
#footer p { text-align : center }
#footer a { color : #007A99 ; font-weight : 400 ; text-decoration : none ; border-bottom : 1px dotted #ddd }
#footer a:hover { color : #444 ; text-decoration : none ; border-bottom : 1px dotted #eee }


/* Thumbnails div */

div.thumbnails img {width:160px; margin:0 10px 10px 0; border-radius:12px;}
div.thumbnails img.last {margin-right:0;}


/* Responsive element */

@media screen and (min-width : 500px)
{
body { font-size : 0.92rem }
p.header, p.header a { width : 95% }

.main-content { max-width : 95% }

.left-right { max-width : 95% }

.single-col-border { max-width : 95% ; box-sizing : border-box ; 
border-width : 2px ; border-color : rgba(0,163, 204, 0.6) ;
border-style : solid ; box-shadow : 2px 2px 2px 0 rgba(0, 122, 153, 0.5)  }

#footer { max-width : 95% }

.grid { margin : auto ; max-width : 95% ; display : grid ; grid-gap : 20px ; 
grid-template-columns : repeat(auto-fill, minmax(340px, 1fr)) }

.box { border-width : 2px ; 
border-color : rgba(0,163, 204, 0.6) ;
border-style : solid ; box-shadow : 2px 2px 2px 0 rgba(0, 122, 153, 0.5) } 

div.photogrid-green { max-width : 95% ; grid-template-columns : repeat(auto-fill, minmax(400px, 1fr)) }
div.photogrid-blue { max-width : 95% ; grid-template-columns : repeat(auto-fill, minmax(400px, 1fr)) }
}

@media screen and (min-width : 960px)
{
body { background : #fff url(images/background-1200.jpg) top center no-repeat }
p.header, p.header a { width : 65% ; font-size : 3rem }
.ad-content-top-right { display : inline-block ; width : 40% ; float : right }

h1 { font-size : 2.6rem ; line-height : 3.0rem }
h2 { font-size : 1.9rem ; line-height : 2.3rem }
h3 {font-size : 1.5rem }
h4 {font-size : 1.3rem }

.main-content { max-width : 85% }
.single-col-border {max-width : 85% }
.grid {max-width : 85% }
#footer { max-width : 85% }

.left-right { max-width : 85% ; display : grid ; grid-gap : 20px ; 
grid-template-columns : 2fr 1fr }

.right { display : block ; border-width : 0px 0px 0px 1px ; border-color : rgba(0,163, 204, 0.6) ; 
border-style : solid ; padding : 40px 0px 0px 20px }

div.photogrid-green { max-width : 85% ; grid-template-columns : repeat(auto-fill, minmax(440px, 1fr)) }
div.photogrid-blue { max-width : 85% ; grid-template-columns : repeat(auto-fill, minmax(440px, 1fr)) }
}

@media screen and (min-width : 1281px)
{
body { background : #fff url(images/background-1500.jpg) top center no-repeat
.ad-content-top-right { width : 50% }
p.header, p.header a { width: 70% ; font-size : 3.2rem }
#header { max-width : 75% }
div.navmenu { width : 75% }
ad.top { max-width : 75% }
.main-content { max-width : 75% }
.single-col-border { max-width : 75% }
.grid { max-width : 75% }
div.photgrid-green { max-width : 75% }
div.photgrid-blue { max-width : 75% }
.thumbnails { width : 75% }
#HCB_comment_box { width : 75% }
#footer { max-width : 75% }
table.race-details { width : 70% }
}