/* CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline;}

body {line-height: 1;}

h1, h2, h3, h4, h5, h6 {clear: both; font-weight: normal;}

ol, ul {list-style: none;}

blockquote {quotes: none;}

blockquote:before, blockquote:after {content: ''; content: none;}

del {text-decoration: line-through;}

table {border-collapse: collapse; border-spacing: 0;}

a img {border: none;}

section, article, header, footer, nav, aside { display: block;}

i, b, em, cite {font-style: normal; font-weight: normal}



/* Basics */

body {background-color: rgb(230, 230, 230); margin: 0 0 40px 0; padding: 10px 0 0 0;}

body.form {background-color: rgb(255, 255, 255); margin: 0; padding: 0}

p {font-family: WhitneyBk; font-size: 16px; color: rgb(85, 85, 85); line-height: 21px; margin: 0 0 10px 0;}

p.hyphenate {text-align: justify}

a {color: black; text-decoration: none; border-bottom: none}

a:hover {-webkit-animation: link 1s ease-in; text-decoration: none; background-color: rgb(230, 230, 230)}

b {font-family: WhitneyMd; font-size: inherit; color: inherit}

i {font-family: WhitneyBkIt;}

cite {font-family: WhitneyBkIt;}

:focus {outline: 0;}

span.superscript {vertical-align: super; font-size: 11px; padding-left: 1px; line-height: normal; position: relative; top: 1px }

sup {vertical-align: super; font-size: 11px; padding-left: 1px; line-height: normal; position: relative; top: 0px; height: 0 }

hr.nothing {width: 1px; border: none; background-color: inherit; height: 1px; clear: both; margin: 0; padding: 0}

blockquote {margin: 0 20px 0 20px}

::selection {background-color: rgb(235, 235, 235); color: rgb(0, 0, 0)}

@-webkit-keyframes link { 0% {

background-color: inherit;
} 100% {

background-color: rgb(230, 230, 230);
}}



/* Header */

div#container {width: 1060px; margin: 0 auto; position: static; z-index: 1}



/* Sidebar */

nav {width: 175px; margin: 15px 35px 0 0px; position: fixed;}

nav header {margin-bottom: 15px}

nav header a {font-family: WhitneyBk; font-size: 28px; color: rgb(0, 0, 0); border-bottom: none}

nav header:hover a {-webkit-animation: title_a 1.5s ease-in-out; color: rgb(92, 115, 146); border-bottom: none}


ul#projects {list-style: none; margin: 10px 0 0 5px; padding: 0}

ul#projects li {font-family: WhitneyLt; font-size: 19px; color: rgb(125, 125, 125); margin: 0 0 13px 0px; text-align: }

ul#projects li:last-child {margin-bottom: 0}

ul#projects li a {color: inherit; border-bottom: none}

ul#projects li a.current {color: rgb(0, 0, 0)}

ul#projects li a.current {-webkit-animation: none}

ul#projects li a:hover {-webkit-animation: ease .75s ease-in; color: rgb(0, 0, 0); }

ul#projects li a:active {color: rgb(0, 0, 0)}

@-webkit-keyframes title_a { 0% {
color: rgb(0, 0, 0);
} 100% {
color: rgb(92, 115, 146);
}}

nav#mobile {display: none}



/* Main */

div.work, .workaddition {background-color: rgb(255, 255, 255); width: 800px; position: relative; z-index: 3; left: 210px; margin: 10px 0 0 0; padding: 2px 25px 25px 25px; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) }

div.workaddition {margin: 15px 0 0 0; padding: 25px 25px 12px 25px;}

article {margin-top: 10px;}

article.entry {background-color: rgb(255, 255, 255); width: 800px; position: relative; left: 210px; margin: 10px 0 0 0; padding: 25px 25px 12px 25px; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2)}

article.entry img {width: 100%; margin-bottom: 15px}

article.excerpt b {color: rgb(50, 50, 50)}

div#archive article {}

div.work img {width: 100%; padding-top: 25px}

div#introimages {width: 800px; height: 280px; margin-top: 25px}

div#introimages img {width: 800px; height: 280px; padding: 0}

h1 {font-family: WhitneyBk; color: rgb(50, 50, 50); font-size: 24px; font-weight: normal; font-style: normal; line-height: 1; margin: 0 0 10px 0;}

p.years {font-family: WhitneyBk; color: rgb(50, 50, 50); font-size: 24px;  line-height: 1; margin: 25px 0 10px 0px;}

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

ul.work li {margin: 0 0 0px 0}

ul.work li:last-child {margin-bottom: 22px}

ul.work li img {padding-top: 23px}

ul.work li.info {position: relative; z-index: 2; background-color: rgb(245, 245, 245); left: 824px; top: -38px; width: 25px; height: 25px; 
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1); margin-bottom: -35px; padding: 5px 0 5px 8px}

ul.work li.info a {font-family: WhitneyLt; font-size: 24px; color: rgb(225, 225, 225); border-bottom: none; position: static; 
z-index: 1}

h1.space {margin-top: 20px}

ul.cv {list-style: none; margin: 10px 0 0px 0; padding: 0}

ul.cv li {margin: 0 0 8px 5px; font-family: WhitneyBk; font-size: 16px; color: rgb(100, 100, 100); line-height:19px; }

ul.cv li b {color: rgb(50, 50, 50)}

ul.cv li:last-child {margin-bottom: 0px}

p.caption {font-size: 14px; line-height: 16px; margin: 7px 0 20px 0px; float: right;}

p.spacer {margin: 0 0 7px 20px}

a.permalink {font-family: WhitneyMd; font-size: inherit; border-bottom: none; color: rgb(50, 50, 50)}

a.permalink:hover {-webkit-animation: none; border-bottom: none}

a.details {color: rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0)}

a.details:hover {-webkit-animation: none; background-color: none }

hr.newsdivider {margin: 15px 40px 15px 40px; border: none; height: 1px; background-color: rgb(225, 225, 225); }

iframe.googlemap {margin: 8px 0 0px 0; border: none; width: 100%; height: 400px}

iframe.form {width: 100%; height: 30px; border: none;}

fieldset {margin: 0; padding: 0; border: none; width: 350px; margin: 0 auto}

input#email {width: 250px; margin: 0 5px 0 0; border: 1px solid rgb(150, 150, 150); font-family: WhitneyBk; font-size: 16px; color: rgb(100, 100, 100); padding: 2px; -webkit-animation: pulse 10s infinite ease-in-out; }

input#submit {width: 80px; font-family: WhitneyMd; font-size: 17px; color: rgb(80, 80, 80); border: none; background-color: inherit; cursor: pointer;}

@-webkit-keyframes ease { 0% {
color: inherit;
} 100% {
color: rgb(0, 0, 0);
}}

@-webkit-keyframes pulse { 0% {
border: 1px solid rgb(200, 200, 200);
} 50% {
border: 1px solid rgb(172, 185, 206);
} 100% {
border: 1px solid rgb(200, 200, 200);
}}



/* Footer */


/* Videos */

.video-js-box { text-align: left; position: relative; line-height: 0 !important; margin: 0; padding: 0 !important; border: none !important;  }

/* Video Element */
video.video-js { background-color: #000; position: relative; padding: 0; }
.vjs-flash-fallback { display: block; }

/* Poster Overlay Style */
.video-js-box img.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }

/* Subtiles Style */
.video-js-box .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }

/* Fullscreen styles for main elements */
.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; }
.video-js-box.vjs-fullscreen video.video-js,
.video-js-box.vjs-fullscreen .vjs-flash-fallback { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
.video-js-box.vjs-fullscreen img.vjs-poster { z-index: 1001; }
.video-js-box.vjs-fullscreen .vjs-spinner { z-index: 1001; }
.video-js-box.vjs-fullscreen .vjs-controls { z-index: 1003; }
.video-js-box.vjs-fullscreen .vjs-big-play-button { z-index: 1004; }
.video-js-box.vjs-fullscreen .vjs-subtitles { z-index: 1004; }

/* Styles Loaded Check */
.vjs-styles-check { height: 5px; position: absolute; }

/* Controls Below Video */
.video-js-box.vjs-controls-below .vjs-controls { position: relative; opacity: 1; background-color: #000; }
.video-js-box.vjs-controls-below .vjs-subtitles { bottom: 75px; } /* Account for height of controls below video */

/* Controls Layout */
.video-js-box .vjs-controls {
  position: absolute; margin: 0; opacity: 1; color: #fff;
  display: none; /* Start hidden */
  left: 0; right: 0; /* 100% width of video-js-box */ 
  width: 100%;
  bottom: 0px; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  height: 46px; /* Including any margin you want above or below control items */
  padding: 0; /* Controls are absolutely position, so no padding necessary */}

.video-js-box .vjs-controls > div { /* Direct div children of control bar */
  position: absolute; /* Use top, bottom, left, and right to specifically position the control. */
  text-align: center; margin: 0; padding: 0;
  height: 31px; /* Default height of individual controls */
  top: 5px; /* Top margin to put space between video and controls when controls are below */

  /* CSS Background Gradients 
     Using to give the aqua-ish look. */
  /* Default */ background-color: rgba(0, 0, 0, 0.5);}

/* Placement of Control Items */
.portfolio-css .vjs-controls > div.vjs-play-control       { left: 10px;   width: 30px;  }
.portfolio-css .vjs-controls > div.vjs-progress-control   { left: 40px;  right: 119px; } /* Using left & right so it expands with the width of the video */
.portfolio-css .vjs-controls > div.vjs-time-control       { width: 61px; right: 58px;  } /* Time control and progress bar are combined to look like one */
.portfolio-css .vjs-controls > div.vjs-volume-control     { width: 48px; right: 10px;  }

/* Removing curved corners on progress control and time control to join them. */
.portfolio-css .vjs-controls > div.vjs-progress-control {
  border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0;
  border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0;
}
.portfolio-css .vjs-controls > div.vjs-time-control { 
  border-top-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0;
  border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0;
}

/* Play/Pause */
.vjs-play-control { cursor: pointer !important; }
/* Play Icon */
.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
.vjs-paused .vjs-play-control span {
  width: 0; height: 0; margin: 8px 0 0 9px;
  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
  border-left: 15px solid rgb(150, 150, 150); /* Width & Color of play icon */
  /* Height of play icon is total top & bottom border widths. Color is transparent. */
  border-top: 8px solid rgba(0,0,0,0); border-bottom: 7px solid rgba(0,0,0,0);
}
.vjs-playing .vjs-play-control span {
  width: 5px; height: 15px; margin: 8px auto 0;
  /* Drawing the pause bars with borders */
  border-top: 0px; border-left: 4px solid rgba(150, 150, 150, 0.5); border-bottom: 0px; border-right: 4px solid rgba(150, 150, 150, 0.5);
}

/* Progress */
.portfolio-css .vjs-progress-holder { /* Box containing play and load progresses */
  position: relative; padding: 0; overflow:hidden; cursor: pointer !important;
  height: 15px; border: none;
  margin: 8px 1px 0 1px; /* Placement within the progress control item */
  border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;
}
.portfolio-css .vjs-progress-holder div { /* Progress Bars */
  position: absolute; display: block; width: 0; height: 15px; margin: 0; padding: 0;
  border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;
}
.portfolio-css .vjs-play-progress {
  /* CSS Gradient */
  /* Default */ background: rgba(150, 150, 150, 0.5);


}
.portfolio-css .vjs-load-progress {
  opacity: 0.8;
  /* CSS Gradient */
  /* Default */ background-color: rgba(100, 100, 100, 0.5);

}

/* Time Display */
.portfolio-css .vjs-controls .vjs-time-control { font-size: 14pt; line-height: 1; font-weight: normal; font-family: WhitneyLt; color: rgb(150, 150, 150) }
.portfolio-css .vjs-controls .vjs-time-control span { line-height: 30px; margin-right: 5px; margin-left: 7px }

.portfolio-css .vjs-duration-display {display: none}

div.vjs-time-control span {display: none}

div.vjs-time-control span.vjs-current-time-display {display: block}



/* Volume */
.portfolio-css .vjs-volume-control { cursor: pointer !important; }
.portfolio-css .vjs-volume-control div { display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
/* Drawing the volume icon using 6 span elements */
.portfolio-css .vjs-volume-control div span { /* Individual volume bars */
  float: left; padding: 0;
  margin: 0 3px 0 0; /* Space between */
  width: 3px; height: 0px; /* Total height is height + bottom border */
  border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
}
.portfolio-css .vjs-volume-control div span.vjs-volume-level-on { border-color: rgb(150, 150, 150); /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
.portfolio-css .vjs-volume-control div span:nth-child(1) { border-bottom-width: 15px; height: 4px; }
.portfolio-css .vjs-volume-control div span:nth-child(2) { border-bottom-width: 15px; height: 4px; }
.portfolio-css .vjs-volume-control div span:nth-child(3) { border-bottom-width: 15px; height: 4px; }
.portfolio-css .vjs-volume-control div span:nth-child(4) { border-bottom-width: 15px; height: 4px; }
.portfolio-css .vjs-volume-control div span:nth-child(5) { border-bottom-width: 15px; height: 4px; }
.portfolio-css .vjs-volume-control div span:nth-child(6) { border-bottom-width: 15px; height: 4px; margin-right: 3px; }

/* Fullscreen */
.portfolio-css .vjs-fullscreen-control { display: none }
.portfolio-css .vjs-fullscreen-control div {display: none}
/* Drawing the fullscreen icon using 4 span elements */
.portfolio-css .vjs-fullscreen-control div span { float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
.portfolio-css .vjs-fullscreen-control div span:nth-child(1) { /* Top-left triangle */
  margin-right: 3px; /* Space between top-left and top-right */
  margin-bottom: 3px; /* Space between top-left and bottom-left */
  border-top: 6px solid #fff; /* Height and color */
  border-right: 6px solid rgba(0,0,0,0);  /* Width */
}

/* Download Links - Used for browsers that don't support any video. */
.portfolio-css .vjs-no-video { font-size: small; line-height: 1.5; }

/* Big Play Button (at start) */
div.vjs-big-play-button {display: none}


/* Spinner Styles */
.vjs-spinner { display: none; }
/* Spinner circles */
.vjs-spinner div {display: none}

div.video-js-box {margin-bottom: 15px}



/* Media Queries */

/* Small Screens */

@media screen and (max-height: 800px) {div.sixsix {width: 660px;}}



/* iPhone & iPod Touch */

@media screen and (max-device-width: 480px) {

body {background-color: rgb(200, 200, 200)}

nav#projects {display: none}
nav#mobile {display: block; width: 780px; position: relative}

nav#mobile header {margin-top: 30px; margin-bottom: 60px}

nav#mobile header a {font-size: 124px;}

nav#mobile ul#projects li {float: left; margin-bottom: 40px}

nav#mobile ul#projects li a img {width:350px; -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);  }

nav#mobile ul#mobileinfo {width: 400px; margin: 0 auto}

nav#mobile ul#mobileinfo li {float: left;}

nav#mobile ul#mobileinfo li a {font-family: WhitneyBk; font-size: 96px}

nav#projects ul#projects {margin: 0px 0 0 5px; padding: 0;}

nav#projects ul#projects li a {display: none }

nav#projects ul#projects li a.current {display: block; font-family: WhitneyBk; font-size: 34px; color: rgb(150, 150, 150);}

div#container {width: 780px}
div.work, .workaddition {background-color: rgb(255, 255, 255); width: 100%; position: relative; z-index: 3; left: 0px; margin: 0px 0 0 0; padding: 2px 10px 2px 10px; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); margin: 0 auto}
div.workaddition {margin: 10px 0 0 0; padding: 10px 10px 12px 10px;}
ul.work li img {padding-top: 8px}
ul.work li:last-child {margin-bottom: 8px}
div#PDF {display: none}

div#info {display: none}

div#news {display: none}

div#mailinglist {display: none}
}




/* Temporary (For Portfolio Reviews) */

div#PDF {display: none}