#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/**** normalise.scss ****/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block; }

audio,
canvas,
video {
  display: inline-block;
  display: inline; }

audio:not([controls]) {
  display: none; }

/*
[hidden] {
	display: none;
}
*/
h1, h2 {
  font-weight: bold;
  margin: 10px 0;
  padding: 0 0 5px 0;
  border-bottom: dashed 1px #666666; }

.projectlistitem-PELT, .projectlistitem-CBF, .projectlistitem-UKC, .projectlistitem-DR, .projectlistitem-SP, .projectlistitem-TDG, .projectlistitem-BPS, .projectlistitem-SS, .projectlistitem-CAP {
  width: 99.390244%;
  float: left;
  margin: 0;
  background-repeat: no-repeat; }

/**** base.scss */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  margin: 0; }

a {
  color: #000066;
  text-decoration: none;
  font-weight: bold; }

a:hover {
  text-decoration: underline; }

p {
  padding: 2px 0 8px 0;
  margin: 0; }

ul {
  margin-top: 0;
  margin-bottom: 4px; }

h1 {
  font-size: 1.5em; }

h2 {
  font-size: 1.4em; }

h3 {
  margin-bottom: 0; }

label {
  font-size: 0.9em;
  color: #666666;
  font-weight: bold;
  padding: 0;
  margin: 0 10px 0 0;
  vertical-align: top;
  text-align: right; }

input {
  width: 63.444444%;
  border: 1px solid #666666; }
  @media screen and (min-width: 768px) {
    input {
      width: 43.444444%; } }
  @media screen and (min-width: 1024px) {
    input {
      width: 34.444444%; } }

textarea {
  border: 0.1em solid #666666;
  height: 155px;
  width: 63.444444%; }
  @media screen and (min-width: 768px) {
    textarea {
      width: 43.444444%; } }
  @media screen and (min-width: 1024px) {
    textarea {
      width: 34.444444%; } }

video {
  max-width: 100%; }

.button {
  width: auto;
  color: #FFFFFF;
  font-weight: bold;
  background-color: #000000;
  padding: 4px 6px;
  text-align: center; }

form, form ul {
  width: 100%;
  margin: 0;
  padding: 0; }

.form li {
  list-style: none;
  margin: 15px 0 0 0;
  text-align: right;
  width: 83.853659%; }
  @media screen and (min-width: 768px) {
    .form li {
      width: 68.853659%; } }
  @media screen and (min-width: 1024px) {
    .form li {
      width: 65.853659%; } }

/**** helpers.scss ****/
.clearit {
  clear: both;
  padding: 0;
  margin: 0; }

.spacer {
  font-size: 0;
  height: 7px;
  clear: both; }

.doublespacer {
  font-size: 0;
  height: 14px;
  clear: both; }

.floatleft {
  float: left; }

.floatright {
  float: right; }

.aligncenter {
  text-align: center; }

.bottommargin10 {
  margin: 0 0 10px 0; }

.rightmargin5 {
  margin: 0 5px 0 0; }

.fullwidth {
  width: 100%; }

.zeroMP {
  margin: 0;
  padding: 0; }

.greyline {
  border-bottom: solid 1px #DDDDDD;
  margin: 10px 0; }

/**** layout.scss ****/
.wrapper {
  width: 93.8%;
  text-align: center;
  margin: 5px auto;
  padding: 0; }
  @media screen and (min-width: 768px) {
    .wrapper {
      border: 1px solid #DDDDDD; } }
  @media screen and (min-width: 1024px) {
    .wrapper {
      width: 76.8%; } }
  @media screen and (min-width: 1280px) {
    .wrapper {
      width: 66.8%; } }

.contentcolumn {
  text-align: left;
  padding: 10px 1.7647059% 15px 1.7647059%; }

/**** header.scss ****/
header {
  margin: 0;
  text-align: left; }

/* styles to hide header image in reduced widths */
.wrapper header {
  overflow: hidden; }

.wrapper header img {
  display: block;
  max-width: auto; }

/**** navigation.scss ****/
.navigation {
  margin: 0;
  padding: 0;
  display: block;
  border-bottom: 1px solid #DDDDDD;
  border-top: 1px solid #DDDDDD;
  text-align: center;
  color: #666666;
  font-size: 1.1em; }

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

.navigation li {
  margin: 0;
  display: inline;
  padding: 1.1764706%; }
  @media screen and (min-width: 1024px) {
    .navigation li {
      margin: 0 75px 0 0; } }

.navigation li a {
  text-decoration: none;
  color: #666666;
  padding: 1.1764706%; }

.navigation li a:hover {
  text-decoration: underline; }

.navigation .sel {
  font-weight: bold;
  line-height: 35px;
  color: #000000; }

/**** breadcrumb.scss ****/
.breadcrumb {
  display: none; }
  @media screen and (min-width: 768px) {
    .breadcrumb {
      display: block;
      margin: 0 0 13px 0;
      padding: 4px;
      border: 1px solid #CCCCCC; } }

.breadcrumb ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: left;
  color: #000066; }

.breadcrumb li {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: bold;
  color: #333333;
  font-size: 0.9em; }

.breadcrumb li a:link,
.breadcrumb li a:visited {
  font-weight: normal;
  color: #666666; }

/**** footer.scss ****/
.footer {
  clear: both;
  border-top: 1px solid #DDDDDD;
  padding: 4px 8px 6px 0;
  margin: 0;
  height: 10px;
  text-align: right;
  font-size: 0.75em;
  color: #666666; }

/**** projectlistitem.scss ****/
@media screen and (min-width: 320px) {
  .projectlistitem-PELT {
    background-image: none; } }
@media screen and (min-width: 768px) {
  .projectlistitem-PELT {
    background-image: url(../images/watermarks/PELT.jpg);
    background-position: 97.9% 0; } }

@media screen and (min-width: 320px) {
  .projectlistitem-CBF {
    background-image: none; } }
@media screen and (min-width: 768px) {
  .projectlistitem-CBF {
    background-image: url(../images/watermarks/CBF.jpg);
    background-position: 100% 0; } }

@media screen and (min-width: 320px) {
  .projectlistitem-UKC {
    background-image: none; } }
@media screen and (min-width: 768px) {
  .projectlistitem-UKC {
    background-image: url(../images/watermarks/UKC.jpg);
    background-position: 99.8% 0; } }

@media screen and (min-width: 320px) {
  .projectlistitem-DR {
    background-image: none; } }
@media screen and (min-width: 768px) {
  .projectlistitem-DR {
    background-image: url(../images/watermarks/DR.jpg);
    background-position: 100% 0; } }

@media screen and (min-width: 320px) {
  .projectlistitem-SP {
    background-image: none; } }
@media screen and (min-width: 768px) {
  .projectlistitem-SP {
    background-image: url(../images/watermarks/SP.jpg);
    background-position: 100% 0; } }

@media screen and (min-width: 320px) {
  .projectlistitem-TDG {
    background-image: none; } }
@media screen and (min-width: 768px) {
  .projectlistitem-TDG {
    background-image: url(../images/watermarks/TDG.jpg);
    background-position: 100% 0; } }

@media screen and (min-width: 320px) {
  .projectlistitem-BPS {
    background-image: none; } }
@media screen and (min-width: 768px) {
  .projectlistitem-BPS {
    background-image: url(../images/watermarks/BPS.jpg);
    background-position: 100% 0; } }

@media screen and (min-width: 320px) {
  .projectlistitem-SS {
    background-image: none; } }
@media screen and (min-width: 768px) {
  .projectlistitem-SS {
    background-image: url(../images/watermarks/SS.jpg);
    background-position: 100% 0; } }

@media screen and (min-width: 320px) {
  .projectlistitem-CAP {
    background-image: none; } }
@media screen and (min-width: 768px) {
  .projectlistitem-CAP {
    background-image: url(../images/watermarks/CAP.jpg);
    background-position: 100% 0; } }

.projectlistitem-details {
  width: 100%; }

.projectlistitem-details h1, .projectlistitem-details h2, .projectlistitem-details h3 {
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 1em;
  border: none;
  margin-left: 7em; }
  @media screen and (min-width: 768px) {
    .projectlistitem-details h1, .projectlistitem-details h2, .projectlistitem-details h3 {
      width: 60%; } }
  @media screen and (min-width: 1024px) {
    .projectlistitem-details h1, .projectlistitem-details h2, .projectlistitem-details h3 {
      width: 63%; } }

/**** portfolio.scss ****/
/* project detail page */
.project-details {
  width: 100%; }
  @media screen and (min-width: 768px) {
    .project-details {
      width: 48.780488%; } }

.portfolio-banner {
  display: block;
  float: none;
  width: 100%; }
  .portfolio-banner img {
    max-width: 100%; }
  @media screen and (min-width: 768px) {
    .portfolio-banner {
      float: right;
      margin: 0 0 10px 1%;
      width: 48.04878%; } }

/* portfolio banner and thumbnails in aside */
.portfolio {
  display: none; }
  @media screen and (min-width: 768px) {
    .portfolio {
      list-style: none;
      display: inline;
      text-align: center;
      margin: 0;
      padding: 0; } }

.portfolio li {
  float: left;
  margin: 5px 2.7918782% 5px 0;
  border: 1px solid #CCCCCC;
  padding: 5px 0;
  text-align: center;
  width: 30.964467%; }

.portfolio li:first-child {
  clear: both; }

@media screen and (min-width: 1280px) {
  .portfolio li:nth-child(3),
  .portfolio li:nth-child(6),
  .portfolio li:nth-child(9) {
    margin-right: 0; } }

.new {
  font-weight: bold;
  color: #961920;
  font-size: 1.1em;
  margin: 0 0 0 5px; }

.fa-twitter, .fa-linkedin, .fa-github {
  color: #666666;
  font-size: 120%; }

.fa-twitter:hover, .fa-linkedin:hover, .fa-github:hover {
  color: #000000; }