/* Block display for HTML5 elements */
header, main, nav, footer, figure, figcaption, aside, section, article {
display: block;
}
/* Contact ID */
#contact {
font-size: 90%;
}
/* Mobile ID */
#mobile {
display: none;
}
/* Desktop ID */
#desktop {
display: inline;
}
/* Tablet display */
@media only screen and (max-width: 64em) {
body {
margin: 0;
background-color: #FFFFFF;
}
#wrapper {
min-width: 0;
width: auto;
box-shadow: none;
border: none;
}
header {
padding: 0.5em 0 0.5em 0;
height: auto;
}
h1 {
letter-spacing: 0.1em;
}
main {
margin-left: 0;
}
nav {
float: none;
width: auto;
text-align: center;
padding: 0.5em;
}
nav li {
display: inline;
padding: 0.25em 0.75em;
}
#heroHome, #heroBoard, #heroTraining {
margin-left: 0;
height: 200px;
}
footer {
margin-left: 0;
}
}
/* Smartphone display */
@media only screen and (max-width: 37.5em) {
main {
padding: 0.1em 1em;
font-size: 90%;
}
h1 {
font-size: 2em;
}
nav {
padding: 0;
}
nav li {
display: block;
margin: 0;
border-bottom: 2px solid #330000;
}
nav a {
display: block;
}
#heroHome, #heroBoard, #heroTraining {
background-image: none;
height: 0;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
}
* {
box-sizing: border-box;
}
body {
background-color: #FFFFFF;
}
header {
background-color: #00B386;
color: #FFFFFF;
height: 175px;
padding-top: 30px;
padding-left: 3em;
box-shadow: 0 4px 4px #133926;
font-family:serif;
font-weight:bold;
text-align: center;
}
a {
text-decoration: none;
}
nav {
padding: 1.5em;
font-size: 120%;
float: left;
width: 160px;
font-family:Arial,sans-serif;
}
nav ul {list-style-type: none;}
header h1 {font-size: 350%;}
#wrapper {
width: 80%;
margin: 0 auto;
background-color: #0C5442;
min-width: 900px;
max-width: 2050px;
box-shadow: 0 0 4px #133926;
border: 1.5pt solid #003300;
background-image: linear-gradient(to bottom, #FFFFFF, #0C5442);
}
main {
background-color: #FFFFFF;
margin-left: 190px;
padding-left: 30px;
}
h2 {
color: #00664D;
text-shadow: 1px 1px #CCCCCC;
}
footer {
margin-left: 190px;
padding: 15px;
background-color: #FFFFFF;
}
#heroHome, #heroBoard, #heroTraining {
margin-left: 190px;
}
main ul {
list-style: none;
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
nav a:link {
color: #00664D;
}
nav a:visited {
color: #7A7A52;
}
nav a:hover {
color: #FFFFFF;
}
/* Styles for the heroHome element */
#heroHome {
height: 300px;
background-image: url('sunsetHorse.png');
background-size: 100% 100%;
}
/* Styles for the heroBoard element */
#heroBoard {
height: 300px;
background-image: url('fenceline.png');
background-size: 100% 100%;
}
/* Styles for the heroTraining element */
#heroTraining {
height: 300px;
background-image: url('BayBella.png');
background-size: 100% 100%;
}
font-family: Arial, Helvetica, sans-serif;