body
{
  font-family: 'Lora', serif;
  color: white;
  background-color: black;
}

ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li, a
{
  text-decoration: none;
  color: grey;
}

li
{
  display: block;
  padding: 2.5%;
}

a:hover, a.home, a.bw, a.nature, a.animal, a.food, a.abstract, a.about, a.contact
{
  color: white;
}

#signature, #signature2
{
  display: inline-block;
  width: 20%;
  margin-top: 1%;
}

img
{
    width: 100%;
}

#signature2
{
  width: 19%;
  text-align: right;
  margin-top: 0;
}

.spacer
{
  margin-top: 25%;
}

#homephoto
{
  position: absolute;
  display: inline-block;
  right: 0px;
  height: 100%;
  width: 70%;
  top: 0px;
}

#navBar
{
  display: inline-block;
  width: 10%;
  margin-top: 5%;
  margin-left: 5%;
}

#grid, .bigImg
{
  display: inline-block;
  width: 80%;
  float: right;
}

.doubleImage, img a
{
  display: inline;
  width: 50%;
}

.single, img a
{
  width: 100%;
}

.form
{
  display: inline-block;
  width: 50%;
  padding: 5%;
}

#ratingComment
{
  display: block;
  width: 50%;
}

fieldset
{
  display: inline;
  border: none;
  padding: 0;
  margin: 0;
}

.comments
{
  display: block;
  padding: 1%;
  width: auto;
}

.button
{
  text-decoration: none;
  padding: 2.5%;
  margin: 2.5%;
  border: 1px solid;
  border-radius: 50px;
}

.button:hover
{
  background-color: rgb(255, 255, 255, 0.5);
}

#commentContainer
{
  display: inline-block;
  float: right;
  width: 80%;
  text-align: left;
}

.name
{
  display: inline;
  font-weight: bold;
}

.individualComment
{
  display: inline;
  color: grey;
}

input
{
  border:2px solid black;
	border-radius: 50px;
}

input:focus, textarea:focus
{
  outline: 0;
  background-color: grey;
}

#standaloneImg
{
  display: inline;
  float: right;
  width: 60%;
  margin-top: 5%;
}

#bio
{
  font-size: 18px;
  display: inline-block;
  float: right;
  width: 15%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  margin-top: 5%;
}

h1#error
{
  position: absolute;
  display: inline-block;
  margin-top: 5%;
  margin-left: 20%;
  text-align: center;
}

#contact
{
  padding-left: 15%;
}

/* The following CSS lines are modified from https://jsfiddle.net/leaverou/CGP87/ */
#rating
{
    float:left;
}

#rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

#rating:not(:checked) > label
{
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:100%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

#rating:not(:checked) > label:before
{
    content: '★ ';
}

#rating > input:checked ~ label
{
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

#rating:not(:checked) > label:hover,
#rating:not(:checked) > label:hover ~ label
{
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

#rating > input:checked + label:hover,
#rating > input:checked + label:hover ~ label,
#rating > input:checked ~ label:hover,
#rating > input:checked ~ label:hover ~ label,
#rating > label:hover ~ input:checked ~ label
{
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

#rating > label:active
{
    position:relative;
    top:2px;
    left:2px;
}