/* GENERAL STYLE */
/* banana #F9F9E7 */
/* sage-olive #597A62 */
/* dark-green #13281E */

body {
  background-color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 150%;
  font-size: 12px;
  color: #333;
  text-decoration: none;
  margin: 0 0 0 0;
}

#container {
  width: 100%;
  height: 100%;
  position: relative;
}

#menu {
  position: fixed;
  top: 70px;
  left: 55px;
  margin: 0px;
  padding: 0px;
  line-height: 185%;
  z-index: 12;
}

#controls {
  position: fixed;
  top: 70px;
  right: 55px;
  margin: 0px;
  padding: 0px;
  line-height: 185%;
  z-index: 12;
}

#content {
  position: absolute;
  padding: 70px 0 0 270px;
}

/* IMAGES */

/*
.thumbnail {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

.thumbnail:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.thumbnail:nohover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
*/

#th_1 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_2 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_3 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_4 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_5 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_6 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_7 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_8 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_9 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_10 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_11 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_12 {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: pointer;
}

#th_1:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_2:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_3:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_4:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_5:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_6:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_7:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_8:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_9:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_10:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_11:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#th_12:hover {
  animation-name: colorize;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}


#profile_pic {
  max-width: 450px;
  height: auto; 
  margin-bottom: 10px;
}

/* Tried to do a decolorize animation when mouse leaves, but css doesn't support "onmouseleave"
.thumbnail:nohover {
    animation-name: decolorize;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
*/

/* ANIMATIONS */

@keyframes colorize{
  0% {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
  100% {
    filter: none;
    -webkit-filter: none;
  }
}

/*
@keyframes decolorize{
  0% {
    filter: none;
    -webkit-filter: none;
  }
  100% {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
}
*/

/* TEXT STYLES */

h1 {
  color: #111;
  font-family: Georgia, Times, serif;
  font-size: 24px;
  padding: 0 0 30px 0;
  line-height: 1.5;
  text-decoration: none;
  font-weight: normal;
  font-weight: 400;
  margin: 0 0 0 0;
}

p {
  font-size: 12px;
  color: #444;
  padding: 2px 3px 3px 3px;
  text-decoration: none;
}

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

#menu a {
  font-family: Helvetica, Arial, sans-serif;
  padding: 2px 3px 3px 3px;
}

#controls a {
  font-family: Helvetica, Arial, sans-serif;
  padding: 2px 3px 3px 3px;
}

a.junior {
  color: #555;
  text-decoration: none;
}

a:active {
  color: #F5FFBC;
}

a:hover {
    background: #13281E;
    color: #fff;
}


/* SELECTION */

::selection {
  color: #fff;
  background: #001109;
}

::-moz-selection{
  color:#fff;
  background:#001109;
}

a::-moz-selection{
  color:#F5FFBC;
}

a::selection {
  color:#F5FFBC;
}

a:hover::selection {
  text-shadow: none;
  color:#FFD35E;
}

a:hover::-moz-selection{
  text-shadow: none;
  color:#FFD35E;
}