/*
Original design: Grid Response (30th April 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: '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.6rem }

a { color : #d06060 ; 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 : 'loraregular', Constantia, serif ; color : #d06060 ; font-weight : 400 ; 
line-height : 1.8rem }

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

h2 { font-size : 1.7rem ; margin : 0 0 10px }
h3 {font-size : 1.5rem ; margin : 0 0 10px 0 }
h4 {font-size : 1.2rem ; margin : 0 0 5px 0 }

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

/* Header */

#header { margin : 0 auto ; max-width : 100% ; text-align : center }

p.header { font-family : 'loraregular', Constantia, serif ; 
background : #762323 ;  font-weight : 400 ; 
color : #fff ; font-size : 1.6rem ; line-height : 1.2em ; 
padding : 1.2rem ; border-radius : 10px ; 
width : 95% ; border : 2px #0d0d0d solid ; box-shadow : 2px 2px 2px 0 rgba(64, 64, 64, 0.7); 
box-sizing: border-box ; margin : 0 auto 20px }
p.header a { text-decoration : none ; color : #fff }

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

/* Navigation menu */

div.navmenu { max-width : 100% ; margin : auto }
.navmenu a {font-size : 1.2rem ; margin: 0 10px 10px; display : inline-block ; padding : 0.5rem ;
background : #f2f2f2 ; border : 2px #d06060 solid ; border-radius : 10px ;
box-shadow : 2px 2px 2px 0 rgba(118, 35, 35, 0.5) }
.navmenu a.current { color : #762323 ; border-color : #762323 ;
box-shadow : 2px 2px 2px 0 rgba(79, 23, 23, 0.5)  }
.navmenu a:hover { color : #0d0d0d ; text-decoration : none ; border-color : #762323 ;
 box-shadow : 2px 2px 2px 0 rgba(79, 23, 23, 0.5) }
.navmenu a.current:hover { color : #0d0d0d ; text-decoration : none ; border-color : #0d0d0d ;
 box-shadow : 2px 2px 2px 0 rgba(59, 17, 17, 0.5) }

/* 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 : 0 15px  }

/*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 }

/* Thumbnails div */

.thumbnails { width : 80% ; margin : 20px auto 10px ; padding : 10px ; border-width : 2px ; 
border-color : rgba(208, 96, 96, 0.6) ; border-style : solid ; border-radius : 12px ;
box-shadow : 2px 2px 2px 0 rgba(118, 35, 35, 0.5) ; box-sizing : border-box ;
display : flex ; align-items : center ; justify-content : center ; overflow : hidden }
div.thumbnails img { width : 160px ; margin : 0 10px 10px 0 ; border-radius:12px }
div.thumbnails img.last {margin-right : 0}

/* Comments */
#HCB_comment_box { width : 80% ; margin : auto }

/* Header image */

#headerimage { border-radius : 12px ; display : block ; margin : auto }

/*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 div*/

div.feature { margin : 10px ; background:#f2f2f2 ; padding:5px ; border:2px #dc8989 solid; 
border-radius : 10px ; width : 75% ; margin : auto ; margin-top: 20px ; margin-bottom : 20px }
img.sme { float : left ; padding-right : 20px }

/*Blockquote*/

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

/*Buy button*/

p.buy-button { max-width : 50% ; padding : 5px 7px ; background-color : #F2F2F2 ; border : 2px #762323 solid ; 
border-radius : 5px ; box-shadow : 5px 2px 3px ; float : right }
p.buy-button > a { color : #763232 }

/* 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 }

/* Race details table */

th, td { border : 1px solid black ; padding : 4px }
table.race-details { width : 75% ; border : 2px #d06060 solid ; caption-side : top ; table-layout : fixed ;
border-collapse : collapse }
table.race-details th { background-color : rgb(204, 204, 204) }
table.race-details caption { font-size : 1.1em ; font-weight : bold ; background : #e8b0b0 ; padding : 5px }

/*Figure and figcaption and arty image*/

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

/*Contact form*/

input[type=text] { background-color : #F2F2F2 ; border : 2px solid #DC8989 ; border-radius : 10px ;
padding : 10px 15px ; margin : 6px 0 ; box-sizing : border-box }
input[type=email] { background-color : #F2F2F2 ; border : 2px solid #DC8989 ; 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 : 45px }
textarea { background-color : #F2F2F2 ; border : 2px solid #DC8989 ; border-radius : 10px ;
padding : 10px 15px ; margin : 6px 0 ; box-sizing : border-box }
fieldset { background-color : #F2F2F2 ; border : 2px solid #DC8989 ; border-radius : 10px ;
padding : 10px 15px ; margin : 6px 0 ; box-sizing : border-box ; width : 50% }
input[type=radio] { width : 25px ; height : 25px }

/* Buttons */

button { border : 2px  outset ; width : 80px ; height : 35px ; margin : 0px 20px 15px }
button#one-min { background-color : #FF0000 ; color : #FFFFFF ; border-color : #FF3333 }
button#two-min { background-color : #FF6600 ; color : #FFFFFF ; border-color : #FF8533 }
button#four-min { background-color : #009900 ; color : #FFFFFF ; border-color : #00CC00 }

/* Additional text classes */

.alignleft {text-align:left;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}
.alignjustify {text-align:justify;}
.nomargin {margin:0; padding:0;}
.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;}
.subhead { color : #888 ; font-family : 'loraitalic' ; font-size : 1.3rem ; font-style : italic ;
margin : 5px 0 20px }
.green { color : green }
.red { color : red }


/* Footer */

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

/* Responsive element */

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

.main-content { 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 : 1px ; border-color : rgba(208, 96, 96, 0.6) ; 
border-style : solid ; box-shadow : 2px 2px 2px 0 rgba(118, 35, 35, 0.5) }

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

.single-col-border { max-width: 95% ; box-sizing : border-box ; border-width : 1px ; 
border-color : rgba(208, 96, 96, 0.6) ;
border-style : solid ; box-shadow : 2px 2px 2px 0 rgba(118, 35, 35, 0.5) }

#footer{ max-width : 95% }

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

@media screen and (min-width : 960px)
{
body { background : #fff url(images/background.jpg) top center no-repeat }
p.header { width : 65% ; font-size : 1.8rem }
.ad-content-top-right { display : inline-block ; width : 40% ; float : right }
p.header { font-size : 3rem }
.navmenu a {font-size : 1.4rem ; margin: 0 20px 10px }
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(208, 96, 96, 0.4) ; 
border-style : solid ; padding : 40px 0px 0px 20px }

div.photogrid-green { 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 { font-size : 3.2em }
#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% }
.left-right { max-width : 75% }
div.photgrid-green { max-width : 75% }
.thumbnails { width : 75% }
#HCB_comment_box { width : 75% }
#footer { width : 75% }
table.race-details { width : 70% }
}