/*
Original design: Yorkshire Wildife (12th December 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 : #029786 ; 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 : #015249 ; font-weight : 400 ; 
line-height : 1.4em }
h1 a,h2 a,h3 a,h4 a { color : #015249 }

h1 { font-size : 1.8rem ; margin-bottom : 20px }
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.4rem ; margin : 0 0 10px 0 }
h4 {font-size : 1.2rem ; margin : 0 0 5px 0 }

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


/* Header */

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

p.header { font-family : 'enriquetaregular', 'loraregular', sans-serif ; 
color : #015249 ; font-weight : 400 ; font-size : 1.8em ;
 line-height : 1.4rem }
p.header a { text-decoration : none ; text-align : center ; color : #015249 }

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

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

/* Navigation menu */

div.navmenu { max-width : 100% ; margin : auto }
.navmenu a {color : #015249 ; font-size : 1.2rem ; margin: 0 10px 10px; display : inline-block ; padding : 0.5rem ;
background : #f2f2f2 ; border : 2px #015249 solid ; border-radius : 10px ;
box-shadow : 2px 2px 2px 0 rgba(1, 50, 45, 0.5) }
.navmenu a.current { color : #011917 ; border-color : #011917 ;
box-shadow : 2px 2px 2px 0 rgba(128, 128, 128, 0.5)  }
.navmenu a:hover { color : #01322d ; text-decoration : none ; border-color : #01322d ;
 box-shadow : 2px 2px 2px 0 rgba(1, 25, 23, 0.5) }
.navmenu a.current:hover { color : #01322d ; text-decoration : none ; border-color : #0d0d0d ;
 box-shadow : 2px 2px 2px 0 rgba(64, 64, 64, 0.5) }

/* Ads */

.ad-top { max-width : 85% ; margin : auto }
.ad-content-top-right { float : right ; display : none }

/* Main content */

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

/* Single column border */

.single-col-border { max-width : 100% ; margin : 0 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(1, 82, 73, 0.6) ; border-style : solid ; border-radius : 12px ;
box-shadow : 2px 2px 2px 0 rgba(2, 75, 66, 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*/

.feature { background:#f2f2f2 ; padding:10px ; border : 2px #77693C solid; 
box-shadow : 5px 5px #C0B283 ; margin : 20px 0 }
.feature img { max-width : 100% ; height : auto }


/* 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(242, 242, 242, 0.6) ; padding : 20px ; 
border : 2px rgba(1, 82, 73, 0.6) solid ; border-radius : 8px ; 
box-shadow : 0 0 6px 3px rgba(1, 50, 45, 0.5) ;
margin-top : 25px ; margin-bottom : 25px }

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

div.photobox-green:hover, div.photobox-green:focus { border : 2px rgba(1, 50, 45, 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 rgba(1, 82, 73, 0.6) ; 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 rgba(1, 82, 73, 0.6) ; 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 }

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

/* Footer */

#footer { background-color : #f2f2f2 ; border : 2px #b3b3b3 dotted ; border-bottom : 0px ;
color : #555 ; padding : 20px 0 5px ; width : 85% ; margin : auto }
#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, p.header a { width : 85% }

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

.left-right { 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(1, 82, 73, 0.6) ; 
border-style : solid ; box-shadow : 2px 2px 2px 0 rgba(2, 75, 66, 0.5) }

.single-col-border { max-width : 95% ; box-sizing : border-box ; border-width : 1px ; 
border-color : rgba(1, 82, 73, 0.6) ;
border-style : solid ; box-shadow : 2px 2px 2px 0 rgba(2, 75, 66, 0.5) }

div.navmenu { max-width : 95% ; margin : auto }

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-wildlife.jpg) top center no-repeat }
p.header, p.header a { width : 70% ; font-size : 3.0rem }
.ad-content-top-right { display : inline-block ; width : 40% ; float : right ; border-width : 1px ; 
padding : 8px ; border-color : rgba(1, 82, 73, 0.6) ; 
border-style : solid ; box-shadow : 2px 2px 2px 0 rgba(2, 75, 66, 0.5) }
p.header { font-size : 3rem }
.navmenu a {font-size : 1.4rem ; margin: 0 20px 10px }
h1 { font-size : 2.5rem }
h2 { font-size : 2rem }
h3 {font-size : 1.7rem }
h4 {font-size : 1.4rem }

.main-content { max-width : 85% }
.single-col-border { max-width : 85% }
.grid {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(1, 82, 73, 0.4) ; 
border-style : solid ; padding : 40px 0px 0px 20px }

div.navmenu { max-width : 85% ; margin : auto }
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, p.header a { font-size : 3.2em }
#header { 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% ; grid-template-columns : repeat(auto-fill, minmax(440px, 1fr))}
.left-right { max-width : 75% }
div.navmenu { max-width : 75% ; margin : auto }
div.photogrid-green { max-width : 75% }
.thumbnails { width : 75% }
#HCB_comment_box { width : 75% }
#footer { width : 75% }
table.race-details { width : 70% }
}