body {
  background-color: #FFFFFF;
}

.page-wrapper {
  background: #EEEEEE;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;

  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow:    0px 0px 10px 0px rgba(0,0,0,0.75);
  box-shadow:         0px 0px 10px 0px rgba(0,0,0,0.75);
}

.page-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-content: center;
}

.menu-bar {
  padding: 0;
  width: 100%;
  background-color: #232323;
  border-bottom: 5px solid #0177AF;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.menu-bar ul, .menu-bar li {
  margin-bottom: 7px;
}

.menu-bar ul {
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  margin-left: 10%;
  margin-right: 10%;
}

.menu-bar li {
  padding-top: 7px;
  float: left;
  background: #232323;
  position: relative;
}

.menu-bar li a {
  color:      #FFFFFF;
  background: #232323;
  width: 100%;
  padding: 20px 40px;
  
  font: bold 15px/30px sans-serif;
  text-align:  center;
  text-decoration: none;
  text-shadow: 1px 0px 1px #222222;

  -webkit-transition: all .30s ease;
  -moz-transition:    all .30s ease;
  -ms-transition:     all .30s ease;
  -o-transition:      all .30s ease;
  transition:         all .30s ease;
}

.menu-bar li#current a{
  background-color: #0177AF;

}

.menu-bar li:hover a{
  background: #0177AF;
}

.menu-bar li#current:hover a{
  background-color: #0177AF;
}

.content-divider { 
  height: 1px;
  width: auto;
  margin-left:  15%;
  margin-right: 15%;
  margin-top: 15px;
  margin-bottom: 15px; 
  background: #CCCCCC;
  align-content: center;
 }

.content-block {
  margin-left: 10%;
  margin-right: 10%;

  align-content: center;
  /*box-sizing: border-box;*/
  display: block;
}

.aboutme-block {
  background: #1F1F1F;
  border-radius: 15px;
  padding-left: 3%;
  padding-right: 3%;
  padding-bottom: 3%;

  -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.75);
  -moz-box-shadow:    0px 3px 3px 0px rgba(0,0,0,0.75);
  box-shadow:         0px 3px 3px 0px rgba(0,0,0,0.75);

}

.aboutme-block .picture {
  float: left;
  margin-top: 5%;
}

.aboutme-block .picture img {
  display: block;
  border-radius: 7px;
}

.aboutme-block .aboutme-content {
  font: normal 13px/20px "Georgia";
  color: white;
  overflow: auto;
  padding-left: 4%;
  padding-right: 5%;
}

.aboutme-block .aboutme-content p {
  font: normal 13px/20px "Georgia";
  color: white;
}

.aboutme-block .aboutme-content a {
  color: #0177DF;
}

.aboutme-block .aboutme-content a:hover {
  color: #01DDFF;
}

.content-aboutme-top {
  /*background: white;*/
}

.content-aboutme-bottom {

}

.content-aboutme-bottom ul {
  list-style: none;
  position: relative;
}

.content-aboutme-bottom li {
  float: left;
  background: white;
  margin-right: 20px;
  padding: 5px 10px; 

  height: 25px;
  border-radius: 5px; 

  -webkit-box-shadow: inset 0px 0px 15px 1px rgba(0,0,0,0.75);
  -moz-box-shadow: inset    0px 0px 15px 1px rgba(0,0,0,0.75);
  box-shadow: inset         0px 0px 15px 1px rgba(0,0,0,0.75);
}

.content-aboutme-bottom li:hover {
  -webkit-box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.75);
  -moz-box-shadow: inset    0px 0px 5px 1px rgba(0,0,0,0.75);
  box-shadow: inset         0px 0px 5px 1px rgba(0,0,0,0.75);
}

.content-aboutme-bottom img {
  display: block;
  margin: auto;
  max-height: 25px;
}

.page-footer {
  text-align-last: center;
  font-family: sans-serif;
  color: #FFEEFF;
  background: #232323;
  height: 100%;
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 5px solid #0177AF;
}

.project-content {
  -webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow:    0px 3px 10px 0px rgba(0,0,0,0.75);
  box-shadow:         0px 3px 10px 0px rgba(0,0,0,0.75);
  background: #FEFEFE;
}

.project-content td.proj-img {
  background: #1F1F1F;

  -webkit-box-shadow: 0px 0px 5px 0px rgba(1,1,1,0.75);
  -moz-box-shadow:    0px 0px 5px 0px rgba(1,1,1,0.75);
  box-shadow:         0px 0px 5px 0px rgba(1,1,1,0.75);
}

.project-content img, .project-content iframe {
  display: block;
}

.project-content h2 {
  font: bold 20px/22px sans-serif;
  color: #111111;
}

.project-content .text {
  padding: 2% 5%;
  font: normal 14px/22px sans-serif;
  color: #222222;
}

.project-content p, .project-content li {
  font: normal 14px/22px sans-serif;
  color: #222222;
}

.project-content h2 a {
  color: inherit;
  font: inherit;
  text-decoration: none;
  text-shadow: 1px 0px 1px #DDDDDD;
}

.project-content h2 a:hover {
  color: #0177AF;
}

h2#my-name { 
  color: #01AACF;
}


.experience-block {
  background: #FEFEFE;
  padding: 2% 2%;

  -webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow:    0px 3px 10px 0px rgba(0,0,0,0.75);
  box-shadow:         0px 3px 10px 0px rgba(0,0,0,0.75);

}

.experience h2 {
  font: bold 20px/22px sans-serif;
  color: #111111;
}

.experience .text {
  padding: 2% 5%;
  font: normal 14px/22px sans-serif;
  color: #222222;
}

.experience p, .experience li, .project-content li {
  font: normal 14px/22px sans-serif;
  color: #222222;
}

.experience h2 a {
  color: inherit;
  font: inherit;
  text-decoration: none;
  text-shadow: 1px 0px 1px #DDDDDD;
}

.experience small {
  font: normal 12px/22px sans-serif;
}