/* centers the content on the page.  Have to code for different browsers that is why both the margin function and the text-align function are used. */  

#container {
  margin: auto;  
  text-align:center;  
}

/* Sets four different font styles just in case a particular computer doesn't contain one of the fonts. */
/* Sets the font size */
/* Sets the background color */
/* Sets the font color */

body {
  font-family: Georgia, Geneva, Arial, sans-serif;  
  font-size: small;
  background-color: #5a0c06;
  color: #a8623c;
}

/* Aligns the echelon logo to the left of the page */

#header {
  text-align: left;
}

/* Aligns the picture to the center of the page */

#picture {
  text-align: center;
  margin: auto;
  width:600px;
}

#intro {
  text-align:center;
}

/* Aligns the links to the center of the page and sets their font size 120% in relation to the original font size */

#links {
  font-size: 120%;
  text-align: center;
}

/* Sets link text decoration to none when the link is visited */

a:link, a:visited {
  color: #a8623c;
  text-decoration: none;
}

/* Sets the link text decoration to underline when a link is hovered over */

a:hover, a:active {
  color: #a8623c;
  text-decoration: underline;
}

/* Gets rid of the ugly border around images when they are made links to another page */

a:link img, a:visited img {
  border: 2px groove #a8623c;
}

a:hover img, a:active img, a:focus img {
  border: 2px groove white;
}

/* This span tag allows the || separating the links to be bold and black */

.separator {
  color: black;
  font-weight: bold;
}

/* This span tag sets the phone number and email to white so it is more visible */

.contact {
  color: white;
  font-weight: bold;
}

/* Floats the left and right column to the left/right of the page. */

#leftCol {
  float: left;
  width: 140px;
  padding-left: 10px;
} 

#rightCol {
  float: right;
  width; 140px;
  padding-right: 10px;
} 

/* Aligns the footer to the center of the page and sets the font size.  The clear: both property allows the footer to clear over the two floated elements so they don't get in the way */

#footer {
  text-align: center;
  font-size: 90%;
  clear: both;
  padding-top: 20px;
}

/* Sets the font size on the contact page */
#contact {
  font-size: 120%;
}