* { box-sizing: border-box; }

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFFF; /* Set background color */
	margin: 0px;
}

#wrapper { width: auto;
		  margin-left: auto;
		  background-color: #0c5442;
		  min-width: 0px;
		  max-width: 1000px; 
		  box-shadow: none;
		  /*background-image: linear-gradient(to bottom, #FFFFFF, #0C5442);*/
		  background-image: linear-gradient(to bottom, #FFFFFF, #0C5442);
		  border: none;
		  margin-right: auto;
}

header { background-color: #00B386;
	color: #FFFFFF; 
	text-align: center; 
	height: auto; 
	padding-top: 0.5em;
	padding-left: 0em;
	padding-bottom: 0.5em; }
    

nav {
    font-weight: bold;
    padding: 0.5em; /* Change padding */
    float: none; /* Configure left float */
    width: auto; /* Set width */
	font-size: 120%; 
}

nav a {
    text-decoration: none; /* Removes underline from links */
}

/* Navigation area styles for links */
nav ul {
    list-style-type: none; /* No list markers */
    margin: 0; /* Zero margin */
    padding-left: 0; /* Zero left padding */
    font-size: 1.2em; 
}

nav ul a:link {
    color: #00664D; /* Unvisited links color */
}

nav ul a:visited {
    color: #7A7A52; /* Visited links color */
}

nav ul a:hover {
    color: #FFFFFF; /* Hover links color */
}

h1, h2, h3 {
    font-family: Georgia, 'Times New Roman', serif;
}
h2 { color: #00664D; }
h3 { color: #000033; }
dt { color: #00664D; }
main ul {
    list-style-image: url('marker.gif');
}

main {
    background-color: #FFFFFF; /* Set white background */
    margin-left: 0px; /* Configure left margin */
    padding: 1px 20px 20px 30px; /* Change left padding */
	display: block;
}

footer {
    font-size: 75%;
    font-style: italic;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    background-color: #FFFFFF; /* Set white background color */
    margin-left: 0px; /* Set left margin */
	padding: 20px;
}

.barn {
    color: #70DBDB;
    font-weight: bold;
}

#contact {
    font-size: 90%;
}

/* Hero selectors */
#heroHome { background-image: url(sunsetHorse.png);
			height: 200px;
			margin-left: 0px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
}

#heroBoard { background-image: url(fenceline.png);
			height: 200px;
			margin-left: 0px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
}
#heroTraining { background-image: url(BayBella.png);
			height: 200px;
			margin-left: 0px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
}
    /*margin-left: 190px; */
	
	@media only screen and (max-width: 64em) {
    
    body {
        font-size: 1.2em; /* Adjust font size */
    }

    .container {
        padding: 20px; 
    }

    .sidebar {
        display: none; 
    }

    .main-content {
        width: 100%; 
    }
}

@media only screen and (max-width: 37.5em) {
    /* Main element styles */
    main {
        padding: 0.1em 1em; /* Top and bottom padding, left and right padding */
        font-size: 90%; /* Font size */
    }

    /* H1 element styles */
    h1 {
        font-size: 2em; /* Font size */
    }

    /* Nav element styles */
    nav {
        padding: 0; /* Padding */
    }

    /* Navigation list items */
    nav li {
        display: block; /* Block display */
        margin: 0; /* No margin */
        border-bottom: 2px solid #330000; /* Bottom border */
    }

    /* Navigation hyperlinks */
    nav a {
        display: block; /* Block display for hyperlinks */
    }

    /* Hero sections */
    #heroHome, #heroBoard, #heroTraining {
        display: none; /* Hide images */
        background-image: none; /* Remove background image */
        height: 0; /* Height set to 0 */
    }

    /* Mobile ID styles */
    #mobile {
        display: inline; /* Inline display */
    }

    /* Desktop ID styles */
    #desktop {
        display: none; /* Hide desktop */
    }
}
/* 1. Style rule for the table element */
table {
  border: 1.5px solid #006600; /* Dark green border */
  border-collapse: collapse; /* Remove cell spacing */
}

/* 2. Style rule for td and th elements */
td, th {
  padding: 0.5em; /* Add padding */
  border: 1px solid #006600; /* Dark green border */
}

/* 3. Alternating row colors using :nth-of-type */
tr:nth-of-type(odd) {
  background-color: #ECF9EC; /* Light blue for odd rows */
}

/* 4. Change h3 text color */
h3 {
  color: #006646;
}
label {
  float: left;            
  display: block;         
  text-align: right;      
  width: 125px;           
  padding-right: 2em;     
}
input, textarea {
  display: block;        
  margin-bottom: 20px;   
}
input[type="submit"] {
  width: 135px;          
  margin-left: 20px;     
}
@media (max-width: 37.5em) {
  label {
    float: none;         
    text-align: left;    
  }

  input[type="submit"] {
    margin-left: 0;      
  }
}

h1 { letter-spacing: 0.1em}