@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  src: local("PT Serif"), local("PTSerif-Regular"), url("https://fonts.gstatic.com/s/ptserif/v8/I-OtoJZa3TeyH6D9oli3ifesZW2xOQ-xsNqO47m55DA.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body {
  margin: auto;
  font-family: 'PT Serif';

}
#banner::before {
  content: "";
  height: 100px;
  width: 100%;
  background: url('https://d3b4yo2b5lbfy.cloudfront.net/wp-content/uploads/2016/11/6c5d32016-11_LWS3_Ep3_HomeBanner.jpg') right -300px no-repeat;
  background-color: white;
  position: absolute;
  top: 0;
}

p {
  margin: 0;
}

#container{
  min-height:100%;
  position:relative;
}

#banner {
  text-align: left;
  padding-left: 0px;
  background-color: rgba(100,100,100,1);
}

#main {
  min-height:100%;
  overflow:auto;
}
h1 {
  margin: 0.25em 0em 0.5em 0em;
  padding: 0.25em;
  font-size: 2em;
  font-family: 'Century Gothic', sans-serif;
  font-weight: 400;
  color: rgb(230,230,200);
  padding-top: 100px;
}

#top {
  text-align: center;
}

form {
  text-align: center;
}

#search {
  font-size: 150%;
  width: 15em;
}

#middle {
  width: 100%;
}

#results, #infobox {
  min-height: 450px;
}

#results {
  float: left;
  padding-left: 1%;
  max-width: 30%;
}

#results > div {font-size: 18px;}

.junk, .basic, .fine, .masterwork, .rare, .exotic, .ascended, .legendary, .achievement{
  cursor: pointer;
}
.junk:hover, .basic:hover, .fine:hover, .masterwork:hover, .rare:hover, .exotic:hover, .ascended:hover, .legendary:hover, .achievement:hover{
  background-color: rgba(0,0,0,0.1);
}

#infobox {
  float: right;
  text-align: left;
  width: 60%;
}

#boxes {
  display: table-cell;
}

#icon {
  display: table-cell;
  vertical-align:top;
}

.button-container form,
.button-container form div {
    display: inline;
}

.button-container button {
    display: inline;
    vertical-align: middle;
}

#footer{
  background-color: rgba(100,100,100,1);
  position:absolute;
  height:60px;
  width:100%;
  text-align:right;
}

#footer a, #footer p {
  text-decoration: none;
  font-size: 1em;
  font-family: 'Century Gothic', sans-serif;
  font-weight: 400;
  color: rgb(230,230,200);
}

#left form{
  text-align:left;
}

/* Color codes taken from http://gw2wbot.darthmaim.de/smiley/gw2itemsearch.html <3 */
.junk { color: #808080; }
.basic { color: #000000; }
.fine { color: #4f9dfe; }
.masterwork { color: #2dc50e; }
.rare { color: #f4c900; }
.exotic { color: #fda500; }
.ascended { color: #fb3e8d; }
.legendary { color: #800080; }