article, aside, canvas, details,
figcaption, figure, footer, header,
hgroup, nav, section, summary, video {
    display: block;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}

#page {
  width: 100%;
  height: 100%;  
  overflow: hidden; 
  position: relative;
  min-width: 960px;
  min-height: 600px;
}

header {
  height: 52px;
  background: url("../assets/ui/main_nav_bg.jpg");
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

header nav,
footer nav {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

header h1 {
  width: 341px;
  height: 63px;
  background: url("../assets/ui/sprite.png") -658px 0px no-repeat;
  text-indent: -10000px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0px;
  left: 0px;
}

header h1 a {
  width: 341px;
  height: 63px;
  display: block;
  cursor: pointer;
}


header ul {
  width: 604px;
  height: 52px;
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  margin-left: 356px;
  position: relative;
  z-index: 1;
}

header ul li{
  height: 52px;
  float: left;
}

header ul li.portfolio{ width: 133px; }
header ul li.sketches{ width: 137px; }
header ul li.blog{ width: 79px; }
header ul li.about{ width: 101px; }
header ul li.contact{ width: 113px; }


header ul li a{
  height: 52px;
  display: block;
  background-image: url("../assets/ui/sprite.png");
  text-indent: -10000px;
}

header ul li.portfolio a { background-position: 0px 0px;}
header ul li.sketches a { background-position: -133px 0px; }
header ul li.blog a { background-position: -270px 0px; }
header ul li.about a { background-position: -348px 0px; }
header ul li.contact a { background-position: -449px 0px; }

#portfolio li.portfolio a { background-position: 0px -52px;}
#sketches li.sketches a { background-position: -133px -52px; }
#blog li.blog a { background-position: -270px -52px; }
#about li.about a { background-position: -348px -52px; }
#contact li.contact a { background-position: -449px -52px; }

.nav_highlight {
  position: absolute;
  width: 82px;
  height: 52px;
  background-image: url("../assets/ui/sprite.png");
  background-position: -611px -52px;
  top: 0px;
  z-index: 0;
}

#portfolio .nav_highlight { left: 373px; }
#sketches .nav_highlight  { left: 516px; }
#blog .nav_highlight      { left: 622px; }
#about .nav_highlight     { left: 720px; width: 70px; }
#contact .nav_highlight   { left: 826px; }

/* Portfolio/Sketches sections */

#image {
  position: absolute;
  top: 66px;
  bottom: 195px;
  width: 100%;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#image img{
  width:0px;
  height: 0px;
  top: 0px;
  display: block;
  margin: 0 auto;
  position: absolute;
  z-index: 2;
}

#image canvas{
  width:0px;
  height: 0px;
  top: 0px;
  display: block;
  position: static;
  z-index: 10;
  border: 2px solid red;
}

#image .loading_indicator {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("../assets/ui/loading_indicator.gif");
  z-index: 0;
  display: none;
  pointer-events: none;
}

footer {
  background: url("../assets/ui/thumbnail_nav_bg.jpg");
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
}

footer nav {
  width: auto;
  float: left;
  position: relative;
  left: 50%;
}

footer ul {
  float:left;
  margin: 0 auto;
  padding: 14px 2px 0px 13px;
  list-style: none;
  position: relative;
  left: -50%;
  max-width: 945px;
}

footer ul li {
  width: 50px;
  height: 70px;
  margin: 0px 13px 13px 0px;
  float: left;
  border-radius: 2px;
  background: black;
  -webkit-user-select: none;
}

footer li.pagination {
  width: 0px;
  height: 0px;
  margin: 0px;
  float: left;
  border-radius: 0px;
  background: none;
  -webkit-user-select: none;  
}

footer li.pagination a{
  opacity: 1;
  border-radius: none;
  box-shadow: none;
  border: none;
  -webkit-transition: none;
}

footer li.previous a{
  width: 23px;
  background-image: url("../assets/ui/sprite.png");
  background-position: -588px -39px;
  height: 39px;
  position: absolute;
  left: -28px;
  top: 20px;
  text-indent: -10000px;
}

footer li.previous a:hover{
  background-position: -588px 0px;
}

footer li.next a{
  width: 26px;
  height: 39px;
  background-image: url("../assets/ui/sprite.png");
  background-position: -562px -39px;
  position: absolute;
  right: -26px;
  top: 20px;
  cursor: pointer;
  text-indent: -10000px;
}

footer li.next a:hover{
  background-position: -562px 0px;
}

footer ul li a {
  display: block;
  width: 50px;
  height: 70px;
  opacity: 0.6;
  border-radius: 2px;  
  box-shadow: -1px 1px 0px 2px #000;
  border: 1px solid #666666;
  -webkit-transition: opacity 100ms;
}

footer ul li a img{
  border: 0;
}

footer ul li a.active{
  opacity: 1;
  border: 1px solid #848484;
}


/* About/Contact sections */

a:link,
a:visited,
a:active {
  color: #b09f80;
  text-decoration: none;
}

a:hover {
  color: #b09f80;
  text-decoration: underline;
}

#about #main_content,
#contact #main_content {
  width: 856px;
  margin: 105px auto 0px;
  color: #ccc;
  font: 16px/1.5 Georgia, serif;
}


#photos img {
  border: 2px solid #454545;
  display: block;
  float: left;
  margin-left: 14px;
}

#photos img:first-child {
  margin-left: 0px;
}

#about .email,
#contact .email {
  display: none;
}

#contact form {
  clear: both;
}

#contact label {
  display: inline-block;
  width: 125px;
  vertical-align: top;
  text-align: right;
  margin: 0px 5px 10px 0px;
}

#contact .error input,
#contact .error textarea {
  border: 1px solid #a84941;
}

#contact .error_box {
  color: #a84941;
  border: 1px solid #a84941;
  padding: 0px 15px;
  margin: 10px 10px 10px 134px;
  float: left;
}
#contact .required {
  color: #a84941;
}
#contact .error label {
  color: #a84941;
}

#contact input {
  background: #333;
  border: 1px solid #444;
  height: 20px;
  color: #fff;
  line-height: 20px;
}

#contact input#name {
  width: 200px;
}

#contact input#email {
  width: 200px;
}

#contact input#subject {
  width: 602px;
}

#contact textarea {
  line-height: 20px;  
  background: #333;
  border: 1px solid #444;  
  width: 600px;
  height: 300px;
  color: #fff;  
}

#contact #send {
  display: inline-block;
  margin-left: 135px;
  margin-top: 10px;
  background: #5c574f;
  padding: 6px 20px;
  height: auto;
  border: 1px solid #756f65;
  border-radius: 2px;
  font: 16px Georgia, serif;
  color: #d2c7b3;
  cursor: pointer;
}

#contact #send:hover {
  background: #70695f;
  border: 1px solid #898277;
  color: #d2c7b3;
}