/*
Original design: My Response (22nd September 2017)
Design by David Mitchell, based on an Andreas Viklund template
*/

*{ margin : 0 ; padding : 0 }

/* General styles */

body { background : #fff url(images/background.jpg) top center no-repeat ; color : #666 ; 
font : 80% "ABeeZee",Tahoma,sans-serif ; line-height : 1.6em }

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

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

p.header { font-family : 'Enriqueta', sans-serif ; color : #d06060 ; font-weight : 400 ; font-size : 4.6em ;
 line-height : 1.2em }
p.header a { text-decoration : none }

p, ul, ol, dl  { margin : 0 0 15px 0 ; line-height : 1.6em ; font-size : 1.1em }
blockquote { margin : 0 0 15px 0 }

h1,h2,h3, h4 { font-family : 'Enriqueta', sans-serif ; color : #d06060 ; font-weight : 400 ; line-height : 1.4em }

h1 { font-size : 4.2em ; margin-bottom : 0 }
h1 a { text-transform : none ; font-weight : 400 }
h1 a:hover {text-decoration : none ; color : #303030 }

h2 { font-size : 2.8em ; margin : 0 0 10px }
h3 {font-size : 1.8em ; margin : 0 0 10px 0 }
h4 {font-size : 1.4em ; margin : 0 0 5px 0 }


/* Main layout container */

#layout { margin : 40px auto 0 ; width : 960px }


/* Grid classes, fixed width, 960px with 12 columns */

.col {float:left; margin:0 10px; overflow:hidden; }
.col img {max-width:100%;}
.row {width:960px; margin:20px auto 0; overflow:hidden;}
.row .row {margin:0 -10px; width:auto;	display:inline-block;}
.c1 {width:60px;}
.c2 {width:140px;}
.c3 {width:220px;}
.c4 {width:300px;}
.c5 {width:380px;}
.c6 {width:460px;}
.c7 {width:540px;}
.c8 {width:620px;}
.c9 {width:700px;}
.c10 {width:780px;}
.c11 {width:860px;}
.c12 {width:940px;}


/* Header image */

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


/* Navigation menu */

.navmenu a {font-size:1.2em; margin: 0 20px;}


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

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

/* Photo grid green */

div.photogrid-green { display : grid ; grid-template-columns : repeat(auto-fill, minmax(440px, 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 : 10px 10px 5px #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 }


/* 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.2em ; font-weight : bold ; background : #e8b0b0 }

/*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[type=text] { 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 }


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

body .navmenu a {font-size:1.4em;}
.navmenu a.current { color : #762323 }


/* Footer */

#footer { background-color : #f2f2f2 ; border : 2px #b3b3b3 dotted ; border-bottom : 0px }
#footer .col { color : #555 ; padding : 20px 0 }
#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 }


/* 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 only screen and (max-width : 960px)
{
#layout {width:auto; margin:0; padding:20px;}
.row {width:100%;}
.col {margin:0 0 20px 0;}
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {width:100%;}
h1 {margin:-15px auto 5px; line-height:1.4em;}
body .navmenu {margin:0px 0 -15px;}
body .navmenu a {font-size:1.4em; display:inline-block; line-height:2.0em;padding:7px 12px; margin:0 10px 8px 0; background-color:#111; border:1px solid #222; border-radius:10px;}

body .navmenu a.current {border-color:#444;}

.headerimage img {width:100%; height:auto;}
div.thumbnails img {width:24%; margin:0;}
div.thumbnails img.last {margin-right:0;}
}