@charset "UTF-8";
article, aside, footer, header, main, nav, section {
    display:block
};

html, body, h1, h2, h3, ul, li, a, p, article, footer, header, main, nav, section{
    /*
    You need to specify a measurement, typically px or em. You had 
    padding: 0;
    */
    padding: 10px;
    margin: 10px;   
};

body {
    width:960px;
    margin-right: auto;
    margin-left: auto;
    background-color: #eeeeee;
}

.banner {
    background-color: alicblue;
    color: #515A5A;
    padding: 10px 20px;
   
    font-family: monospace;
    
 
}

section {
    background-color:#eeeeee;
    color:darkslategray;
    margin-top:4px ;
    margin-bottom: 10px;   
    padding:1px; 
    padding-left: 5px;
    padding-right:5px;
    font-family:monospace ;
    
   
}

.homepageColumn01 {
    float:left;
    width: 32.5%;
    text-align: center;
	min-height: 200px;
}

.homepageColumn02 {
    float:left;
    margin-left:10px ;
    margin-right:10px ;
    width:32.5%;
    text-align: center;
	min-height: 200px;
}
.homepageColumn03 {
    float:left;
    width: 32.5%;
    text-align: center;
	min-height: 200px;
}


aside {
   
   
}

/*
Have a look at your nav. I have used bright colours to visually differentiate the differences between nav, nav ul, and nav ul li.

The user agent (the browser) has a lot of styles that it will force on your page and I have overwritten some of them by using the above specifiers.

This way you have very precise control over the padding and margins for each element of our naviation.

You can fine tune this to suit your needs. Once you have it looking the way you want on the indext page you an copy and paste it to all of your other pages. 

If you make a change later, just repeat the process of copy and paste.
*/

nav {
    background-color:#eeeeee;
    padding: 10px 20px;
    padding-left: 10px;
   
}

nav ul li{
    background-color:transparent;
    display: inline;
    padding-right: 20px;
    padding-left:10px;
    font-family: monospace;
}

nav ul {
    background-color:transparent;
    font-family: monospace;
    font-size: 20px; 
    margin: 0px;
    padding: 10px;
}

section h2 {
    color:darkslategray;
    font-family: monospace;
    text-align: left;
    font-size: 30px;
    
   
}
section h3 p{
    color:darkslategray;
    font-family: monospace;
    font-size: 40px;
  
    
 
    
}




a:hover {
    color: burlywood;
    text-decoration:none;
}

a:link {
    color: coral;
    text-decoration: none;
}

a:visited {
    color:coral;
    text-decoration: none;
}

a:active {
    color:aquamarine;
    text-decoration: none;
}
#currentPage {
    background-color: transparent;
    color: blue;
}

footer {
    clear:both;
    background-color:#eeeeee;
    color: darkslategray;
    padding: 10px 20px;
    padding-left: 10px;
    font-family: monospace;
    text-align: right;
}

* {box-sizing:border-box}

.blogImageContainer{
    float:left;
    margin: 0px 10px 0px 0px;
	width:300px;
    /*text-align: left;*/	
}

.blogImageContainer figure {
    margin: 0;
    padding: 0;
}

.blogImage{
	width:300px;
}
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #444;
  background-color:rgba(0,0,0,0.0);
  
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: transparent;
  font-size: 18px; 
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background colour to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: #ccc;
  font-size:15px ;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/*Accordion styles for blog*/
.active, .accordionblog:hover {
  background-color: #ccc;
}
.accordionblog {
  background-color:#eeeeee;
  font-family: monospace;
  font-size: 18px; 
  color: darkslategray;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
.panelblog {
  padding: 0 18px;
  font-family: monospace;
  color: darkslategray;
  font-size:15px ;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
/*End of accordion styles for blog*/
/*Styles for website form*/
.contactintro{
     font-size: 20px;
}
.contactform{
   background-color:#eeeeee;
    color:darkslategray;
    margin-top:4px ;
    margin-bottom: 10px;   
    padding:1px; 
    padding-left: 5px;
    padding-right:5px;
    font-size: 20px;
    font-family:monospace ;
    
}

.yourname{
    color:darkslategray;
}
.youremail{
    color:darkslategray;
}
.yourmessage{
    color:darkslategray;
}
.input{
    
}


.textarea{
    
    
}