@charset UTF-8;

/************  RESET **************/
html, body, div, a, p, img, ul, li, footer, header, section, h1, span, time, hgroup, a img, aside, form, input, article, h2, h3, h4, label, textarea, small {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
	text-decoration: none;
}

:focus { outline:none; }
::-moz-selection, ::selection { 
    color: #fffff;
	background: #00000; 
	}
ul { list-style: none; }
h1, h2, h3 { font-weight: lighter; }


/* Import Typefaces */
@font-face {
  font-family: 'PNS Light';
  src: url('fonts/pns-light-webfont.eot');
  src: local('fonts/pns-light-webfont'), 
       local('fonts/pns-light-webfont'), 
       url('fonts/pns-light-webfont.ttf') format('truetype'),
       url('fonts/pns-light-webfont.svg#font') format('svg'); 
  font-weight: normal;
  font-style: normal;
  }

@font-face {
  font-family: 'PNS Regular';
  src: url('fonts/pns-regular-webfont.eot');
  src: local('fonts/pns-regular-webfont'), 
       local('fonts/pns-regular-webfont'), 
       url('fonts/pns-regular-webfont.ttf') format('truetype'),
       url('fonts/pns-regular-webfont.svg#font') format('svg'); 
  font-weight: normal;
  font-style: normal;
  }

@font-face {
  font-family: 'PNS Bold';
  src: url('fonts/pns-bold-webfont.eot');
  src: local('fonts/pns-bold-webfont'), 
       local('fonts/pns-bold-webfont'), 
       url('fonts/pns-bold-webfont.ttf') format('truetype'),
       url('fonts/pns-bold-webfont.svg#font') format('svg'); 
  font-weight: normal;
  font-style: normal;
  }

@font-face {
  font-family: 'PNS Italic';
  src: url('fonts/pns-regitalic-webfont.eot');
  src: local('fonts/pns-regitalic-webfont'), 
       local('fonts/pns-regitalic-webfont'), 
       url('fonts/pns-regitalic-webfont.ttf') format('truetype'),
       url('fonts/pns-regitalic-webfont.svg#font') format('svg'); 
  font-weight: normal;
  font-style: normal;
  }
  
  @font-face {
  font-family: 'AG2';
  src: url('fonts/ag2.eot');
  src: local('fonts/ag2'), 
       local('fonts/ag2'), 
       url('fonts/ag2.ttf') format('truetype'),
       url('fonts/ag2.svg#font') format('svg'); 
  font-weight: normal;
  font-style: normal;
  }
  
em, i { 
  font-family: 'PNS Italic', Helvetica, Verdana, sans-serif; 
  font-style: normal;	
  }

strong, b { 
  font-family: 'PNS Bold', Helvetica, Verdana, sans-serif; 
  font-style: normal;	
  }


body { 
  font: 0.875em "PNS Regular", Helvetica, Verdana, sans-serif;
  -webkit-text-size-adjust: 100%;
  color: #3e4341;
  width: 100%; 
  max-width: 2000px;
  height: 100%; 
  background-color: rgba(62, 67, 65, 1);
  }

h1 { 
  color: #3e4140;
  font: 4em "AG2", sans-serif;
  margin: 0 0 0.1em 0;
  text-shadow: 0 1px 1px #FFFFFF;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  text-align: center;
  line-height: 0.875em;
  }
       
h2 {
  color: #515453;
  font: 1.563em "PNS Light", sans-serif;
  margin: 0 0 0.15em 0;
  }

h3 {
   font: 1.15em "AG2", sans-serif;
   text-transform: uppercase;
   letter-spacing: 0.15em; 
   color: #5a5a5a; 
   }
  
p a { color: #527364; }
   p a:hover { text-decoration: underline; }

#nav li a, .selected { font-size: 1.063em; }

p { 
  color: #333333;
  margin: 0 0 0.813em 0; 
  line-height: 1.313em;
  }



/* Container Styles */
#top {
  width: 100%; 
  height: 18em;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  background-color: #262626;
  background: center top repeat-x url('images/header_bg.jpg');
  }
  #top .logo {
     display: block;
     margin: 5.5em auto 0 auto;
     background: center top no-repeat url('images/header_logo_a.png');
     text-decoration: none;
     outline: none;
     }
     #top .logo img { 
        height: 6.875em
        width: 18.438em;
        opacity: 0; 
        -o-transition: all .7s linear; 
        -moz-transition: all .7s linear; 
        -webkit-transition: all .7s linear;
        transition: all .7s linear;
        }
  #top .logo img:hover { opacity: 1; }		  
	 
#nav {
  width: 100%; 
  margin: 0 auto;
  background-color: #ffffff;
  overflow: hidden;
  }
#nav .block { 
  margin: 0.675em auto 0.5em auto;
  }
  #nav li {
    display: inline-block;
    margin: 0;
    z-index: 1;
    text-decoration: none;
    outline: none;
    }
   #nav li a, #nav li .selected {
      padding: 1em 0 0.8em 0;
      color: #a8afac;
      display: block;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      -o-transition: all .5s linear; 
      -moz-transition: all .5s linear; 
      -webkit-transition: all .5s linear;
      transition: all .5s linear;
	  }
	 
#middle {
  width: 100%;
  background-color: #e7e7e7;
  padding: 2em auto 2em auto;
  }
  #middle .content, #middle .content_wide{
	 width: 90%;
	 margin: 0 auto 0 auto;
	 padding: 1em 0 1em 0;
	 max-width: 1000px;
     overflow: hidden;
	 text-align: center;
	 }
	 #middle .content_wide{ max-width: 1200px; }
#middle ul { list-style: none outside none; }
.thumbnail li {
  float: left;
  margin: 0.25%;
  width: 24.5%;
  display: inline;
  float: left;
  position: relative;
  }
  .overlay {
    background: none repeat scroll 0 0 rgba(231, 231, 231, 0);
	color: rgba(121, 116, 120, 0);
    opacity: 0;
    display: block;
    float: left;
	height: 100%;
	width: 100%;
	position: absolute;
	padding: 0;
	-o-transition: all .4s linear; 
    -moz-transition: all .4s linear; 
    -webkit-transition: all .4s linear;
	transition: all .4s linear;
	text-align: center;
	}
	li a { text-decoration: none; }
	li a h2 { 
	   margin: 0 10% 0 10%;
	   padding: 40% 0 1.5% 0;
	   border-bottom: 1px dotted #BBBBBB; 
	   }
	li a .nav_description { 
	   display: block;
	   text-align: center;
	   margin: 3% 0 1.5% 0;
	   }
	.thumbnail li:hover .overlay {
       background: none repeat scroll 0 0 rgba(231, 231, 231, 1);
	   color: rgba(121, 116, 120, 1);
	   opacity: 0.93;
	   display: block;
	   }
  .thumbnail li p { margin: 0; }
  .thumbnail img { 
     float: left;
	 width: 100%;
	 height: auto;
	 max-width: 100%; 
	 }


/* Two Columns */
#middle .artwork {
   float: left;
   width: 62%;
   height: auto;
   max-width: 100%;
   margin: 0 0% 0 0.5em;
   }
#middle .artwork_wide {
   width: 100%;
   max-width: 100%;
   height: auto;
   margin: 0 0 0.5em 0;
   }
.description, .description_wide {
   text-align: left;
   float: right;
   width: 35%;
   max-width: 33em;
   }
   .description_wide {
      width: 99%; 
      float: none; 
      margin: 1em 0 0 0;
      }
.callout {
	display: block;
	margin: 0 0 1.2em 0;
	height: 1em;
	text-align: center;
    background-image: url('images/dotted.png');
    }
    .callout h3 {
       display: inline;
       text-transform: uppercase;
       letter-spacing: 0.3em;
       margin-top: 0.5em;
       font: 1.1em "AG2", sans-serif;
       padding: 0 0.875em;
       background-color: #e7e7e7;
       } 
   .description p { max-width: 35em; }


/* Footer */
#bottom { width: 100%; }
  #bottom .content { 
     width: 91%;
     max-width: 1005px;
     margin: 2em auto 3em auto;
     overflow: hidden;
     }
  #bottom p { color: #757575; }
  #bottom a {
     background-size: 100% auto;
     width: 40px; 
     height: 41px;
     margin: 0 0.5% 1em 0;
     display: inline-block;
     text-decoration: none;
     outline: none;
     }
     #bottom img {
       width: 100%; 
       opacity: 0; 
       -o-transition: all .5s linear; 
       -moz-transition: all .5s linear; 
       -webkit-transition: all .5s linear;
	   transition: all .5s linear;
	   }
       #bottom img:hover { opacity: 1; }

/* Resume */

#resume_header { 
  width: 100%;
  height: 15em; 
  margin: 7em auto 0 auto;
  }

#resume_header_about {
  float: right; 
  text-align: left;
  }
  #resume_header_about a { color: #527364; }
  .resume_droplet { 
    display: block;
    float: right; 
    margin: -0.5em 5% 0 5%;
    }
  #resume_header h1, #resume_leftcol h1, #resume_rightcol h1 { text-align: left; }

#resume_leftcol, #resume_rightcol { 
  text-align: left;
  width: 45%; 
  float: left;
  margin: 0 2% 0 3%;
  }
  #resume_rightcol { 
    float: right;
    margin: 0 3% 0 2%; 
    }
    
  
  

/* Media Queries */

/* Three Columns */
@media only screen and (max-width : 1100px),
only screen and (max-device-width : 1100px) {
	.thumbnail li { width: 32.8%; }
}

/* Artwork Shift */
@media only screen and (max-width : 820px),
only screen and (max-device-width : 820px) {
   #middle .artwork, .description { 
       width: 99%; 
       float: none;
       margin: 0; 
      }
   .description { margin: 1em 0 0 0; }
   
/* Two Columns */
@media only screen and (max-width : 750px),
only screen and (max-device-width : 750px) {
	.thumbnail li { width: 49.5%; }
	#resume_leftcol, #resume_rightcol { 
      float: none;
      width: 100%;
      }

/* One Column Mobile */
@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {
   body { font-size: 1em; }
   #top .logo img:hover { opacity: 0; }
   #top .logo { background: center top no-repeat url('images/header_logo_mobile.png'); }
   .thumbnail li {
      width: 100%; 
      margin-bottom: 25%;
      }
   .overlay {
      height: 25%;
      margin: 100% 0 0 0;
      display: block;
      background: none repeat scroll 0 0 rgba(231, 231, 231, 1);
      color: rgba(121, 116, 120, 1);
      opacity: 1;
      }
      li a h2 { padding: 3% 0 1% 0; }
	  li a .nav_description { margin: 2% 0 3% 0; }
	 #bottom a { margin: 0 0 1em 0; }
   #bottom img { opacity: 1; }
   .description p { font-size: 1.2em; }
   #bottom .content { text-align: center; }
   #bottom .content p { text-align: left;  }
   .resume_droplet { display: none; }
}