A Pen by Devin Cooper

/*Downloaded from https://www.codeseek.co/Ferrous/a-pen-by-devin-cooper-GZREWg */
* {
  box-sizing: border-box;  /*The width & height properties (and min/max properties) includes content, padding, and border, but not the margin*/
}

/*Elements --------------------*/

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

ul {
  margin-left: 0;      /*this gives white-space*/
  margin-right: 0;     /*between the ul and the*/
  padding-left: 10px;  /*left & right window*/
  padding-right: 22px; /*borders*/
}

li {
  display: inline;
  list-style: none;
  font-size: 14px;
  margin-right: 7px; /*gives white-space between li elements*/
}

a {
  text-decoration: none;
  color: #696969;
}

img {
  display: block;
  margin: 186px auto 28px auto;
}

button {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 10px 15px;
  appearance: none;
  box-shadow: none;
  border-radius: 0;
  background-color: white;
  border: solid 1px white;
  font-weight: bold;
  color: #696969;
}

/*Pseudo-classes --------------------*/

a:hover {
  text-decoration: underline;
}

button:hover {
  color: black;
  border: solid 1px #d3d3d3;
}

/*Classes --------------------*/

.wrapper {
  margin-left: auto;  /*this wrapper simply keeps the content*/
  margin-right: auto; /*from running into each other when the*/
  min-width: 960px;   /*window width is below 960px*/
}

.main-header {
  float: right;       /*places the top menu*/
  text-align: right;  /*to right side*/
}

.search-field {
  font-size: 1.1em; /*17.6px*/
  width: 485px;
  height: 2.3em;    /*41.6px*/
  display: block;   /*Centers to window and*/
  margin: 0 auto 30px auto; /*gives white space from logo*/
}

.btn {
  text-align: center; /*Centers buttons to window*/
}

.footer-wrapper {
  position: absolute; /*Positions footer-wrapper*/
  left: 0;            /*to bottom-left corner*/
  bottom: 0;          /*of window*/
  width: 100%;        /*Stretches footer-wrapper to 100% of windows width*/
  min-width: 960px;   /*Prevents menu-bottom-left & menu-bottom-right from running into each other when window size decreases*/
  background-color: #ededed;
  border-top: 1px solid #d3d3d3;
}

.footer-wrapper a:active {
  color: red; /*clicked on links turn red*/
}

.menu-bottom-left {
  height: 10px; /*gives footer-wrapper height of 10px for grey background*/
  float: left;  /*places menu on left side of window*/
}

.menu-bottom-right {
  height: 10px; /*gives footer-wrapper height of 10px for grey background*/
  float: right; /*places menu on right side of window*/
}

.menu-footer {
  font-size: 13px;
  margin-left: 20px; /*gives white-space between li elements in bottom menu*/
}

/*Clearfix --------------------*/

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}