.highlight{
  background:#EE7510;
  color:#333;
  padding:0 5px;
}



.dp-highlighter
{
  font-family: "Consolas", "Courier New", Courier, mono, serif;
  font-size: 12px;
  background-color: #E7E5DC;
  width: 99%;
  overflow: auto;
  margin: 18px 0 18px 0 !important;
  padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span 
{
  margin: 0;
  padding: 0;
  border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.dp-highlighter .bar
{
  padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
  padding-left: 0px;
}

.dp-highlighter ol
{
  list-style: decimal; /* for ie */
  background-color: #fff;
  margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
  padding: 0px;
  color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
  list-style: none !important;
  margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
  list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
  list-style-position: outside !important;
  border-left: 3px solid #6CE26C;
  background-color: #F8F8F8;
  color: #5C5C5C;
  padding: 0 3px 0 10px !important;
  margin: 0 !important;
  line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
  border: 0;
}

.dp-highlighter .columns
{
  background-color: #F8F8F8;
  color: gray;
  overflow: hidden;
  width: 100%;
}

.dp-highlighter .columns div
{
  padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
  background-color: #FFF;
  color: inherit;
}

.dp-highlighter ol li span
{
  color: black;
  background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
  margin: 0px;
}

.dp-highlighter.collapsed ol li
{
  display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
  border: none;
}

.dp-highlighter.printing .tools
{
  display: none !important;
}

.dp-highlighter.printing li
{
  display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
  padding: 3px 8px 3px 10px;
  font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: silver;
  background-color: #f8f8f8;
  padding-bottom: 10px;
  border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
  border-left: 0;
}

.dp-highlighter.collapsed .tools
{
  border-bottom: 0;
}

.dp-highlighter .tools a
{
  font-size: 9px;
  color: #a0a0a0;
  background-color: inherit;
  text-decoration: none;
  margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
  color: red;
  background-color: inherit;
  text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }



@keyframes shake{
  0% {   transform: translate(2px, 1px) rotate(0deg);  }
  10% {  transform: translate(-1px, -2px) rotate(-1deg);  }
  20% {  transform: translate(-3px, 0px) rotate(1deg);   }
  30% {  transform: translate(0px, 2px) rotate(0deg);   }
  40% {  transform: translate(1px, -1px) rotate(1deg);   }
  50% {  transform: translate(-1px, 2px) rotate(-1deg);  }
  60% {  transform: translate(-3px, 1px) rotate(0deg);   }
  70% {  transform: translate(2px, 1px) rotate(-1deg);   }
  80% {  transform: translate(-1px, -1px) rotate(1deg);   }
  90% {  transform: translate(2px, 2px) rotate(0deg);   }
  100% {   transform: translate(1px, -2px) rotate(-1deg);   }
}

@-moz-keyframes shake{
  0% {   -moz-transform: translate(2px, 1px) rotate(0deg);    }
  10% {  -moz-transform: translate(-1px, -2px) rotate(-1deg);  }
  20% {  -moz-transform: translate(-3px, 0px) rotate(1deg);     }
  30% {  -moz-transform: translate(0px, 2px) rotate(0deg);     }
  40% {  -moz-transform: translate(1px, -1px) rotate(1deg);     }
  50% {  -moz-transform: translate(-1px, 2px) rotate(-1deg);    }
  60% {  -moz-transform: translate(-3px, 1px) rotate(0deg);     }
  70% {  -moz-transform: translate(2px, 1px) rotate(-1deg);     }
  80% {  -moz-transform: translate(-1px, -1px) rotate(1deg);   }
  90% {  -moz-transform: translate(2px, 2px) rotate(0deg);     }
  100% { -moz-transform: translate(1px, -2px) rotate(-1deg);     }
}

@-webkit-keyframes shake {
  0% {   -webkit-transform: translate(2px, 1px) rotate(0deg);  }
  10% {  -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
  20% {  -webkit-transform: translate(-3px, 0px) rotate(1deg);   }
  30% {  -webkit-transform: translate(0px, 2px) rotate(0deg);   }
  40% {  -webkit-transform: translate(1px, -1px) rotate(1deg);   }
  50% {  -webkit-transform: translate(-1px, 2px) rotate(-1deg);   }
  60% {  -webkit-transform: translate(-3px, 1px) rotate(0deg);   }
  70% {  -webkit-transform: translate(2px, 1px) rotate(-1deg);   }
  80% {  -webkit-transform: translate(-1px, -1px) rotate(1deg);   }
  90% {  -webkit-transform: translate(2px, 2px) rotate(0deg);   }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg);   }
}

@-o-keyframes shake{
  0% {   -o-transform: translate(2px, 1px) rotate(0deg);  }
  10% {  -o-transform: translate(-1px, -2px) rotate(-1deg);  }
  20% {  -o-transform: translate(-3px, 0px) rotate(1deg);   }
  30% {  -o-transform: translate(0px, 2px) rotate(0deg);   }
  40% {  -o-transform: translate(1px, -1px) rotate(1deg);   }
  50% {  -o-transform: translate(-1px, 2px) rotate(-1deg);  }
  60% {  -o-transform: translate(-3px, 1px) rotate(0deg);   }
  70% {  -o-transform: translate(2px, 1px) rotate(-1deg);   }
  80% {  -o-transform: translate(-1px, -1px) rotate(1deg);   }
  90% {  -o-transform: translate(2px, 2px) rotate(0deg);   }
  100% {   -o-transform: translate(1px, -2px) rotate(-1deg);   }
}

.shake{
  display:inline-block;
}

.shake:hover,
.shake:focus{
  animation-name: shake;
  animation-duration: 0.8s;
  transform-origin:50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  
  -o-animation-name: shake;
  -o-animation-duration: 0.8s;
  -o-transform-origin:50% 50%;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
  
  -moz-animation-name: shake;
  -moz-animation-duration: 0.8s;
  -moz-transform-origin:50% 50%;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  
  -webkit-animation-name: shake;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}




.roll{
  -moz-animation-name: roll;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: 1;
  
  -o-animation-name: roll;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: 1;
  
  -webkit-animation-name: roll;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes roll {
    from { -webkit-transform: rotate(0deg) }
    to   { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes roll {
    from { -moz-transform: rotate(0deg) }
    to   { -moz-transform: rotate(360deg) }
}

@keyframes roll {
    from { transform: rotate(0deg) }
    to   { transform: rotate(360deg) }
}

#css3pie{
  border: 1px solid #696;
  padding: 60px 0;
  text-align: center;
  width: 200px;
  height:25px;
  background: #FC92E2;
  color:#000;
  margin:40px auto;
  
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  
  box-shadow: #666 0px 5px 8px;
  -webkit-box-shadow: #666 0px 5px 8px;
  -moz-box-shadow: #666 0px 5px 8px;

  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FC92E2), to(#FF7600));
  background: -webkit-linear-gradient(#FC92E2, #FF7600);
  background: -moz-linear-gradient(#FC92E2, #FF7600);
  background: -ms-linear-gradient(#FC92E2, #FF7600);
  background: -o-linear-gradient(#FC92E2, #FF7600);
  background: linear-gradient(#FC92E2, #FF7600);
  -pie-background: linear-gradient(#FC92E2, #FF7600);
  
  behavior: url(http://www.backbonetechnology.com/includes/libs/js/PIE/PIE.php);
}




.dp-highlighter
{
  font-family: "Consolas", "Courier New", Courier, mono, serif;
  font-size: 12px;
  background-color: #E7E5DC;
  width: 99%;
  overflow: auto;
  margin: 18px 0 18px 0 !important;
  padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span 
{
  margin: 0;
  padding: 0;
  border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.dp-highlighter .bar
{
  padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
  padding-left: 0px;
}

.dp-highlighter ol
{
  list-style: decimal; /* for ie */
  background-color: #fff;
  margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
  padding: 0px;
  color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
  list-style: none !important;
  margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
  list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
  list-style-position: outside !important;
  border-left: 3px solid #6CE26C;
  background-color: #F8F8F8;
  color: #5C5C5C;
  padding: 0 3px 0 10px !important;
  margin: 0 !important;
  line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
  border: 0;
}

.dp-highlighter .columns
{
  background-color: #F8F8F8;
  color: gray;
  overflow: hidden;
  width: 100%;
}

.dp-highlighter .columns div
{
  padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
  background-color: #FFF;
  color: inherit;
}

.dp-highlighter ol li span
{
  color: black;
  background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
  margin: 0px;
}

.dp-highlighter.collapsed ol li
{
  display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
  border: none;
}

.dp-highlighter.printing .tools
{
  display: none !important;
}

.dp-highlighter.printing li
{
  display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
  padding: 3px 8px 3px 10px;
  font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: silver;
  background-color: #f8f8f8;
  padding-bottom: 10px;
  border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
  border-left: 0;
}

.dp-highlighter.collapsed .tools
{
  border-bottom: 0;
}

.dp-highlighter .tools a
{
  font-size: 9px;
  color: #a0a0a0;
  background-color: inherit;
  text-decoration: none;
  margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
  color: red;
  background-color: inherit;
  text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }



/* Layout Styles
-------------------------------------------------------------- */

#container {
  min-height:100%;
  position:relative;
  background:#EEE;
    
  min-width:1120px;
  width:expression(document.body.clientWidth < 1120? "1120px": "auto");
}

#main {
  overflow:auto;
  padding-bottom:220px;
}

body > footer {
  width:100%;
  position:relative;
  margin-top:-220px;
  height:220px;
  clear:both;
  background:#181818;
  color:#979693;
  
  box-shadow:0 0 10px #777;
  -moz-box-shadow:0 0 10px #777;
  -webkit-box-shadow:0 0 10px #777;
  -o-box-shadow:0 0 10px #777;
  
  min-width:1120px;
  width:expression(document.body.clientWidth < 1120? "1120px": "auto");
}

#footer-content {
  width:1000px;
  margin:0px auto;
  padding-top:25px;
  position:relative;
}

#main > header {
  background:#FF7600;
  width:100%;
}

#header-content{
  width:1000px;
  height:220px;
  margin:0 auto;
  position:relative;
  /*overflow:hidden;*/
}

#logo {
  display:block;
  position:absolute;
  left:0;
  bottom:35px;
}

/*
.csstransitions #logo{
  bottom:300px;
  
  -webkit-transition:all 1s ease;
  -moz-transition:all 1s ease;
  -o-transition:all 1s ease;
  transition:all 1s ease;
  
  -webkit-transition-delay:0.7s;
  -moz-transition-delay:0.7s;
  -o-transition-delay:0.7s;
  transition-delay:0.7s;
}

.csstransitions #language-switcher{
  top:300px;
  
  -webkit-transition:all 1s ease;
  -moz-transition:all 1s ease;
  -o-transition:all 1s ease;
  transition:all 1s ease;
  
  -webkit-transition-delay:0.7s;
  -moz-transition-delay:0.7s;
  -o-transition-delay:0.7s;
  transition-delay:0.7s;
}
*/

#content {
  clear:both;
  padding-top:50px;
}

  
/* Main Menu Styles
-------------------------------------------------------------- */

#main-nav {
  overflow:hidden;
  float:left;
  width:100%;
  background:#3E3E3E;
  position:relative;
}

.touch #main-nav{
  height:44px;
}

#main-nav ul {
  clear:left;
  float:left;
  position:relative;
  left:50%;
  text-align:center;
}

#main-nav ul li {
  display:block;
  float:left;
  position:relative;
  right:50%;
}

#main-nav ul li a {
  color: #FFFFFF;
  background:#3E3E3E;
  display: block;
  margin: 0;
  font-size:16px;
  padding: 13px 26px;
  text-transform: uppercase;
  
  -webkit-transition:all 200ms ease;
  -moz-transition:all 200ms ease;
  -o-transition:all 200ms ease;
  transition:all 200ms ease;
}

#main-nav ul li a:hover,
#main-nav ul li a:active,
#main-nav ul li.active a{
  color:#333;
  background:#FFF;
  
  -webkit-transition:all 200ms ease;
  -moz-transition:all 200ms ease;
  -o-transition:all 200ms ease;
  transition:all 200ms ease;
}

#main-nav ul li.active a,
#main-nav ul li.active a:hover,
#main-nav ul li.active a:active{
}

#language-switcher{
  position:absolute;
  top:15px;
  right:0;
}

#language-switcher ul{
  float:right;
}

#language-switcher ul li{
  display:inline;
}

#language-switcher ul li a{
  color:#333;
  display: block;
  float:left;
  margin: 0;
  padding: 0 10px;
  text-transform: uppercase;
  font-size:14px;
}

#language-switcher ul li a:hover,
#language-switcher ul li a:active,
#language-switcher ul li.active a{
  color:#FFF;
}

#language-switcher ul li.divider a,
#language-switcher ul li.divider:hover a,
#language-switcher ul li.divider:active a{
  color:#FFF;
  padding:0;
}

/* Footer Styles
-------------------------------------------------------------- */

#footer-content a{
  color:#979693;
}

#footer-content a:hover,
#footer-content a:active{
  color:#FF7600;
}

#footer-contact,
#footer-copyright{
  cursor: default;  
}

#footer-contact,
#footer-contact p,
#footer-copyright,
#footer-copyright p{
  font:12px HelveticaNeueLight;
}

.ie6 #footer-contact,
.ie6 #footer-contact p,
.ie6 #footer-copyright,
.ie6 #footer-copyright p,
.ie7 #footer-contact,
.ie7 #footer-contact p,
.ie7 #footer-copyright,
.ie7 #footer-copyright p,
.ie8 #footer-contact,
.ie8 #footer-contact p,
.ie8 #footer-copyright,
.ie8 #footer-copyright p{
  font:12px "Helvetica Neue", Helvetica, Arial;
}

#footer-info{
  width:180px;
}

#footer-info #footer-logo{
  margin-bottom:20px;
}

#footer-info #footer-logo a{
  display:block;
}

#footer-info #bbt-links a{
  float:left;
  margin-right:15px;
}

#footer-menu{
  width:690px;
}

#footer-menu-wrapper{
  border-top:1px solid #E0E0E0;
  border-bottom:1px solid #E0E0E0;
  padding:5px 0;
}

footer p span,
#footer-copyright span{
  color:inherit;
  -webkit-transition:color 200ms ease;
  -moz-transition:color 200ms ease;
  -o-transition:color 200ms ease;
  transition:color 200ms ease;
}

footer p span:hover,
#footer-copyright span:hover{
  color:#FFF;
  -webkit-transition:color 200ms ease;
  -moz-transition:color 200ms ease;
  -o-transition:color 200ms ease;
  transition:color 200ms ease;
}

#footer-nav{
}

#footer-nav ul{
  width:810px;
  float:right;
}

.bit #footer-nav ul {
  width:570px; 
}

#footer-nav ul li{
  float:none;
  display: inline;
}

#footer-nav ul li a{
  display: block;
  float: left;
  font-size:13px;
  text-transform: uppercase;
  border-right:2px solid #FF7600;
  width:130px;
  text-align: right;
  padding:5px 30px 15px 0;
  letter-spacing: 1px;
}

.social-media{
  border-right: 2px solid #FF7600;
  float: left;
  padding:6px 30px 15px 22px;
  text-align: right;
}

#footer-nav ul li .social-media a{
  float: left;
  margin:0 0 0 20px;
  width:16px;
  height:16px;
  overflow: hidden;
  border:0;
  padding:0;
  text-align: left;
  
}

.social-media .facebook{
  background:url(/media/templates/facebook-btn.jpg) 0 0;
}

.social-media .facebook:hover,
.social-media .facebook:active{
  background-position:0 -19px;
}

.social-media .twitter{
  background:url(/media/templates/twitter-btn.jpg) 0 0;
}

.social-media .twitter:hover,
.social-media .twitter:active{
  background-position:0 -19px;
}

.social-media .rss{
  background:url(/media/templates/rss-btn.jpg) 0 0;
}

.social-media .rss:hover,
.social-media .rss:active{
  background-position:0 -19px;
}

#footer-contact{
  padding-top:23px;
}

#footer-copyright{
  padding-top:28px;
}

#footer-copyright #html5-logo{
  float:right;
  padding-bottom:5px;
}

#footer-copyright #html5-logo a{
  margin-left:5px;
  float:left;
  display:block;
}

#footer-copyright #copyright{
  clear:both;
  float:right;
}


/* Global Styles
-------------------------------------------------------------- */

#content > header,
.content-box{
  width:1100px;
  margin:0 auto;
  clear:both;
}

.ie7 .content-box,
.ie8 .content-box{
  margin-top:expression('0px');
}

#super-header,
#footer-header h2{
  font:normal 60px HelveticaNeueLight;
  text-align: center;
  padding:0;
  text-shadow: 0px 2px 0px #FFF;
}

#super-header strong,
#footer-header h2 strong{
  font:normal 60px HelveticaNeueBold;
}

#tagline,
#footer-header h3{
  color: #999;
  font-size: 34px;
  font-style: italic;
  letter-spacing: -1px;
  text-align: center;
  padding-bottom:30px;
  
  text-shadow: 0px 2px 0px #FFF;
}

.sub-header{
  padding:70px 0 70px 80px;
}

.sub-header h2,
.sub-header h2 strong{
  font-weight: normal;
  font-style: italic;
  font-size:37px;
  color:#666;
  letter-spacing: -1px;
  line-height: 35px;
}

.sub-header h2 strong{
  display:block;
  color:#FF7600;
}

.article-menu .item .text h2 strong{
  color:#FF7600;
}

.article-menu .item .text strong{
  font-weight:normal;
}

.sub-header .desc{
  padding-top: 15px;
}

.sub-header .desc p{
  margin-bottom:10px;
}

.highlight{
  background:#FF7600;
  color:#FFF;
  padding:0 5px;
  
  -webkit-transition:  all 300ms ease;
  -moz-transition:  all 300ms ease;
  -o-transition:  all 300ms ease;
  transition:    all 300ms ease;
}

.csstransitions .highlight:hover,
.csstransitions .highlight:active{
  padding:0 15px;
  color:#FFF;
  
  -webkit-transition:  all 300ms ease;
  -moz-transition:  all 300ms ease;
  -o-transition:  all 300ms ease;
  transition:    all 300ms ease;
}

#header-banner{
  padding:20px 0;
  margin: 0 auto;
  text-align: center;
  width: 930px;
}

#header-banner strong.donothing{
  font-weight:normal;
  color:#999;
}

#header-banner .col1{
  float:right;
}

#header-banner .col2{
  float: right;
  font:italic 32px Georgia;
  letter-spacing: -1px;
  width: 560px;
  color:#999;
  padding:20px;
}

#header-banner .col2 strong{
  font-weight: normal;
  color:#FF7600;
}

#header-banner .col3{
  float:right;
  padding-top:40px;
}


/* Global Buttons
-------------------------------------------------------------- */

.white-btn{
  background: url("/media/templates/gbtn-bg.jpg") repeat-x 0 0;
  border: 2px solid #FFF;
  display: block;
  height: 26px;
  padding: 7px 15px 0;
  text-transform: capitalize;
  
  text-shadow:0px 2px 0px #FFF;
  
  -moz-box-shadow: 0 1px 3px #AAA;
  -o-box-shadow: 0 1px 3px #AAA;
  -webkit-box-shadow: 0 1px 3px #AAA;
  box-shadow: 0 1px 3px #AAA;
  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}

.ie7 .white-btn,
.ie8 .white-btn{
  border:1px solid #DDD;
}

.spacer3 { height:8px; }
.spacer10 { height:10px; }
.spacer15 { height:15px; }
.spacer20 { height:20px; }
.spacer15b {
    border-bottom: 1px solid grey;
    height: 18px;
    margin-bottom: 18px;
  }

.white-btn span{
  background: url("/media/templates/header-banner-right-arrow.png") no-repeat 0 50%;
  display: block;
  padding-left: 26px;
  white-space: nowrap;
}

.white-btn span strong,
.orange-btn span strong{
  font-weight: normal;
}


.orange-btn{
  background: url("/media/templates/orange-btn-bg.jpg") repeat-x 0 0;
  border: 2px solid #FFF;
  display: block;
  height: 26px;
  padding: 7px 15px 0;
  text-transform: capitalize;
  color:#FFF;
  
  text-shadow: 0 -1px 0 #FF4400;
  
  -moz-box-shadow: 0 1px 3px #AAA;
  -webkit-box-shadow: 0 1px 3px #AAA;
  -o-box-shadow: 0 1px 3px #AAA;
  box-shadow: 0 1px 3px #AAA;
  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}

.orange-btn:hover,
.orange-btn:active{
  color:#333;
}

.orange-btn span{
  background: url("/media/templates/white-arrow.png") no-repeat 0 50%;
  padding-left: 26px;
}

/* SUB TEMPLATE
-------------------------------------------------------------- */

#header-img{
  text-align: center;
  padding: 30px 0px;
}

#quote{
  width:600px;
  text-align: center;
  padding: 30px 0px;
  margin:0 auto;
}

.quote-5046 .img{
  margin-top:16px;
}

#quote .img{
  float:left;
}

#quote .text{
  float:right;
}

#quote .text,
#quote p{
  font:italic 35px Georgia;
  color:#999;
  letter-spacing: -1px;
}

#quote strong{
  color:#FF7600;
}

.blog #quote .text,
.blog #quote p,
.contact #quote .text,
.contact #quote p{
  text-align:left;
}

#quote .text{
  height:expression("auto");
}

.contact #quote{
  width:800px;
}

.port-land #quote,
.port-detail #quote{
  width:850px;
}

.port-land #quote .text,
.port-detail #quote .text{
  width:700px;
}

.expression #quote{
  width:750px;
}

.expression #quote .text{
  width:400px;
  text-align: center;
}

.blog #quote{
  width:560px;
}

.blog #quote .text{
  width:450px;
  text-align: center;
}

.contact #quote{
  width:835px;
  visibility: visible;
  display: block;
}

.contact #quote .text{
  width:670px;
}

#content{
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EEEEEE));
  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: -o-linear-gradient(top, #FFFFFF, #EEEEEE);
  background: linear-gradient(top, #FFFFFF, #EEEEEE);
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#EEEEEEFF)";
  zoom:1;*/
}

.home #content,
.expression #content{
  background: #FFF;
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#FFFFFFFF)";*/
}

.home,
.expression{
  background:#FFF;
}

.ie7 #content,
.ie8 #content{
  background:#FFF;
}

.sub #content{
  padding-bottom:100px;
}

#contact-locations{
  padding:70px 0;
}

#contact-locations .sub-header{
  padding:0 80px 25px;
}

#contact-locations .container{
  width:1100px;
  margin:0 auto;
}

#contact-locations .container .item{
  float:left;
  width:350px;
  margin-right:25px;
}

#contact-locations .container .item.nospace{
  margin:0;
}

#contact-locations .container .item h3{
  font:20px HelveticaNeueLight;
  padding-bottom:10px;
  text-align: center;
}

#contact-locations .container .item .img{
  padding-bottom:15px;
  position: relative;
}

#contact-locations .container .item .img img{
  border:3px solid #FFF;
  
  -webkit-box-shadow:0px 2px 2px #AAA;
  -moz-box-shadow:0px 2px 2px #AAA;
  -o-box-shadow:0px 2px 2px #AAA;
  box-shadow:0px 2px 2px #AAA;
}

#contact-locations .container .item .text{
  font:16px HelveticaNeueLight;
  text-align: center;
}

#contact-locations .container .item .text address{
  font-style: normal;
}

#contact-locations .container .item .img .bbt-logo30{
  background:url(/media/templates/logo30.png) no-repeat 50% 50%;
  width:350px;
  height:350px;
  position:absolute;
  top:0;
  left:0;
  display:block;
}



/* Home Styles
-------------------------------------------------------------- */
/* Showcase
-------------------------------------------------------------- */

.facebook-like{
  margin: 0 auto;
  padding-top: 10px;
  width: 80px;
}

#showcase{
  padding-top:30px;
  
}

#showcase .main{
  background:url(/media/templates/showcase-bg.jpg) no-repeat 50% 0;
  width:960px;  
  height:480px;
  padding:15px 70px 40px;
}

#showcase .screen{
  width:960px;  
  height:480px;
  position:relative;
  overflow:hidden;
  background:#FFF;
}

#showcase .shadow{
  width:960px;
  height:480px;
  position:absolute;
  top:0;
  left:0;
  
  box-shadow: 0 0 5px #333 inset;
  -moz-box-shadow: 0 0 5px #333 inset;
  -webkit-box-shadow: 0 0 5px #333 inset;
  -o-box-shadow: 0 0 5px #333 inset;
}

.no-boxshadow #showcase .shadow{
  background:url(/media/templates/showcase-shadow.png) no-repeat 0 0;
  
  box-shadow:0;
  -moz-box-shadow:0;
  -webkit-box-shadow:0;
  -o-box-shadow:0;
}

#showcase .container{
  position:absolute;
  top:0;
  left:0;
  width:5000px;
  height:480px;
  overflow:hidden;
  
  -webkit-backface-visibility: hidden;
  
  -webkit-transition:  all 500ms ease-out;
  -moz-transition:  all 500ms ease-out;
  -o-transition:  all 500ms ease-out;
  transition:    all 500ms ease-out;
}

.touch #showcase .container{
  -webkit-transition:  all 300ms ease;
  -moz-transition:  all 300ms ease;
  -o-transition:  all 300ms ease;
  transition:    all 300ms ease;
}

#showcase .container .item{
  float: left;
  height: 480px;
  overflow: hidden;
  width: 960px;
}

#showcase .container .item h3,
#showcase .container .item a,
#showcase .container .item div,
#showcase .container .item img{
  display:none;
}

.new-tag{
  background:url(/media/templates/new-tag.png) no-repeat 0 0;
  width:52px;
  height:54px;
  position: absolute;
  top:0;
  right:0;  
  
  -webkit-transform: scale(0);
  -moz-transform:  scale(0);
  -o-transform:     scale(0);
  transform:     scale(0);
  
  -webkit-transition:  -webkit-transform 200ms ease-out;
  -moz-transition:  -moz-transform 200ms ease-out;
  -o-transition:  -o-transform 200ms ease-out;
  transition:    transform 200ms ease-out;
}

.es .new-tag{
  background:url(/media/templates/new-tag-es.png) no-repeat 0 0;
}

.no-csstransforms .new-tag{
  display:none;
}

.new-tag.active{  
  -webkit-transform: scale(1);
  -moz-transform:  scale(1);
  -o-transform:     scale(1);
  transform:     scale(1);
  
  -webkit-transition:  -webkit-transform 200ms ease-out;
  -moz-transition:  -moz-transform 200ms ease-out;
  -o-transition:  -o-transform 200ms ease-out;
  transition:    transform 200ms ease-out;
}

.no-csstransforms .new-tag.active{
  display:block;
}

#showcase .prev,
#showcase .next{
  background:url(/media/templates/showcase-btn.png) no-repeat 0 0;
  width:23px;
  height:45px;
  position: absolute;
  top:210px;
  cursor:pointer;
}

#showcase .prev{
  left:-23px;
}

#showcase .prev:hover,
#showcase .prev:active{
  background-position:0 -48px;
}

#showcase .next{
  right:-23px;
  background-position:-27px 0;
}

#showcase .next:hover,
#showcase .next:active{
  background-position:-27px -48px;
}

#showcase .new-tag{
  right: -13px;
  top: -11px;
}

#showcase > footer{
  width:990px;
  margin:0 auto;
}

#showcase > footer .info{
  float:left;
  margin-bottom:10px;
  height:55px;
  width:800px;
}

#showcase > footer .info h3{
  font:17px HelveticaNeueLight;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom:15px;
  float:left;
  width:550px;
  height:35px;  
  border-bottom:1px solid #CCC;
}

.home #showcase > footer .info h3{
  text-transform: capitalize;
}

#showcase > footer .info h3 .divider{
  color:#FF7600;
  padding:0 10px;
}

#showcase > footer .info h3 .category .divider{
  padding:0;
}

#showcase > footer .info .see-more
{
  border-bottom:1px solid #CCC;
  height:35px;
}

.see-more{
  float:left;
  color:#666;
  display:block;
}

.see-more:hover,
.see-more:active{
  color:#FF7600;
}

.see-more span{
  background: url("/media/templates/header-banner-right-arrow.png") no-repeat 0 50%;
  padding-left: 26px;
}

#showcase > footer nav{
  float:right;
  padding:5px 0;
}

#showcase > footer nav a{
  background:url(/media/templates/showcase-dot.png) no-repeat 0 0;
  width:10px;
  height:11px;
  margin-left:20px;
  overflow: hidden;
  float:left;
  cursor:pointer;
}

#showcase > footer nav a.active{
  background-position:0 -19px;
}


/* Expression Showcase
-------------------------------------------------------------- */

.expression #showcase > footer .info{
  height:auto;
}

.expression #showcase > footer .info h3{
  height:auto;
  width:800px;
  padding-bottom:15px;
  white-space: normal;
}

.expression #showcase > footer .info h3 .body{
  color: #666666;
  font:16px HelveticaNeueLight;
  display:inline;
}

.expression #showcase > footer .info h3 .body p{
  display:inline;  
}

.expression #desc{
  width:850px;
  margin:0 auto;
}

.expression #desc p{
  margin-bottom:15px;
  text-align: center;
  line-height:23px;
}

.expression #desc p strong{
  font-weight: normal;
}

.expression .item h2{
  margin-bottom:30px;
}

.expression .item h2,
.expression .item h2 strong{
  font-weight: normal;
  font-style: italic;
  font-size:37px;
  color:#666;
  letter-spacing: -1px;
  line-height: 35px;
}

.expression .article-menu{
  width:670px;
  padding:30px 0 100px;
}

.expression .article-menu .item{
  padding:20px 0;
}

.expression .article-menu .item h2 strong{
  display:block;
  color:#FF7600;
}

.expression .article-menu .item .text{
  float: none;
  padding: 0;
  width: auto;
}

.expression .article-menu .item .text p{
  margin-bottom:15px;
  line-height:23px;
}

.expression .article-menu .item .link{
  float: none;
  margin-top: 30px;
  padding: 0;
  width: 100%;
}

.expression .article-menu .item .link .white-btn{
  display: block;
  float: right;
  position: relative;
}


/* Portfolio Banner
-------------------------------------------------------------- */

#portfolio-banner{
  background:url(/media/templates/portfolio-banner-bg.jpg) repeat-x 0 0;
  width:100%;
  height:196px;
  overflow:hidden;
  position:relative;
}

#portfolio-banner-wrapper{
  background:url(/media/templates/portfolio-banner-content-bg.jpg) no-repeat 50% 0;
  width:100%;
  height:196px;
  overflow:hidden;
  position:relative;
}

#portfolio-banner-content{
  width:800px;
  padding-top:35px;
  margin:0 auto;
}

#portfolio-banner .col1{
  float:left;
}

#portfolio-banner .col2{
  float:right;
  padding-top: 28px;
  width: 620px;
}

#portfolio-banner .col2 .info{
}

#portfolio-banner .col2 .info h2{
  font:30px HelveticaNeueLight;
  float:left;
}

#portfolio-banner .col2 .info h2 strong,
#portfolio-banner .col2 h2 strong{
  font-weight: normal;
}

#portfolio-banner .col2 .info a{
  float:right;
}

#portfolio-banner .col2 h2{
  color:#666;
  font:19px HelveticaNeueLight;
  text-shadow:0px 2px 0 #FFF;
  padding-bottom:15px;
}

#featured-banner{
  text-align: center;
  padding:40px 0;
}

#social-media-banner{
  background:url(/media/templates/hdivider.png) no-repeat 50% 0;
  width:100%;
  margin:0 auto;
  height:343px;
  overflow:hidden;
}

.home #social-media-banner{
  background:url(/media/templates/social-media-banner-bg.jpg) repeat-x 0 0;
}

#social-media-banner #social-media{
  width:100%;
  height: 343px;
  overflow: hidden;
}

.home #social-media-banner #social-media{
  background:url(/media/templates/social-media-banner-content-bg.jpg) no-repeat 50% 0;
}

#social-media-banner #social-media-content{
  width: 946px;
  height: 343px;
  margin: 0 auto;
}

#social-media-banner .item{
  float: left;
  text-align: center;
  width: 280px;
  padding-top:45px;
}

#social-media-banner .item .img{
  height:105px;
}

#social-media-banner .item header{
  margin-bottom:20px;
}

#social-media-banner .item h3{
  color:#FF7600;
  font:35px HelveticaNeueLight;
  line-height: 30px;
}

#social-media-banner .item h3 strong{
  display:block;
  font-family: HelveticaNeueBold;
}

#social-media-banner .item .text{
  text-shadow: 0px 2px 0px #FFF;
}

#social-media-banner .item .text strong{
  font-weight: normal;
}

#social-media-banner .divider{
  width:3px;
  height:343px;
  padding:0 20px;
  float:left;
  background:url(/media/templates/vdivider.png) no-repeat 50% 50%;
}

#google-plus{
  margin: 12px auto 0;
  width: 70px;
}

#last-tweet{
}

#last-tweet small{
  display: block;
  font-size: 70%;
  font-style: italic;
  margin-top: 10px;
}

#last-tweet a{
  color:#FF7600;
}

#last-tweet a:hover,
#last-tweet a:active{
}

.facebook-like-wrapper{
  height: 25px;
  position: relative;
  overflow: hidden;
  width: 140px;
}

#facebook-like-iframe{
  border: medium none;
  height: 65px;
  left: -60px;
  overflow: hidden;
  position: absolute;
  top: -30px;
  width: 400px;
}

/* Client
-------------------------------------------------------------- */

#clients{
  padding-left:3px;
}

#clients .item{
  background:url(/media/templates/client-bg.png) no-repeat 0 0;
  float: left;
  width: 152px;
  height: 152px;
  overflow: hidden;
  margin:15px;
}

#clients .screen{
  position:relative;
  width:134px;
  height:134px;
  margin:7px 8px;
  overflow:hidden;
}

#clients .item header{
  display: none;
}

#clients .item .img{
  width: 134px;
  height: 134px;
  overflow:hidden;
}

#clients .item .img img{
  display:none;
}

#clients .item .hover{
  position:absolute;
  top:150px;
  left:0px;
  width:134px;
  height:134px;
  overflow: hidden;
  background:#FF7600;
  
  -webkit-transition:all 200ms ease-out;
  -moz-transition:all 200ms ease-out;
  -o-transition:all 200ms ease-out;
  transition:all 200ms ease-out;
}

#clients .item:hover .hover{
  top:0;
  
  -webkit-transition:all 200ms ease-out;
  -moz-transition:all 200ms ease-out;
  -o-transition:all 200ms ease-out;
  transition:all 200ms ease-out;
}

.no-csstransitions #clients .item .hover{
  top:0;
  display:none;
}

.no-csstransitions #clients .item:hover .hover{
  top:0;
  display:block;
}

#clients .item .hover h2{
  color: #FFFFFF;
  font: italic 20px Georgia;
  margin: 0 auto;
  padding-top: 35px;
  text-align: center;
  width: 110px;
}

/* Portfolio
-------------------------------------------------------------- */

#portfolio-landing{
  padding:50px 0;
}

#portfolio-landing .item,
#portfolio-nav .item{
  border-bottom: 1px solid #DDDDDD;
  float: left;
  margin: 0 24px 30px;
  padding-bottom: 10px;
  position: relative;
  width: 318px;
  cursor:pointer;
}

#portfolio-landing .item .img,
#portfolio-nav .item .img{
  background: url("/media/templates/portfolio-thumbnail-bg.png") no-repeat 0 0;
  cursor: pointer;
  display: block;
  height: 200px;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 6px 8px 13px;
  width: 302px;
}

#portfolio-landing .item .img a,
#portfolio-nav .item .img a{
  display: block;
  height: 200px;
  width: 302px;
  overflow:hidden;
}

#portfolio-landing .item .img img,
#portfolio-nav .item .img img{
  display:none;
}

#portfolio-landing .item .img a span,
#portfolio-nav .item .img a span{
  display: block;
  height: 200px;
  width: 302px;
  
  box-shadow: 0 0 4px #777777 inset;
  -moz-box-shadow: 0 0 4px #777777 inset;
  -o-box-shadow: 0 0 4px #777777 inset;
  -webkit-box-shadow: 0 0 4px #777777 inset;
}

#portfolio-landing .item .time,
#portfolio-nav .item .time{
  display: none;
}

#portfolio-landing .new-tag,
#portfolio-nav .new-tag{
  background:url(/media/templates/new-tag.png) no-repeat 0 0;
  width:52px;
  height:54px;
  display:block;
  position:absolute;
  right: -5px;
  top: -5px;
  display:none;
  z-index:999;
  
  -webkit-transform: scale(0);
  -moz-transform:  scale(0);
  -o-transform:     scale(0);
  transform:     scale(0);
  
  -webkit-transition:  -webkit-transform 200ms ease-out;
  -moz-transition:  -moz-transform 200ms ease-out;
  -o-transition:  -o-transform 200ms ease-out;
  transition:    transform 200ms ease-out;
}

.es #portfolio-landing .new-tag,
.es #portfolio-nav .new-tag{
  background:url(/media/templates/new-tag-es.png) no-repeat 0 0;
}

#portfolio-landing .new .new-tag,
#portfolio-nav .new .new-tag{
  display:block;
  
  -webkit-transform: scale(1);
  -moz-transform:  scale(1);
  -o-transform:     scale(1);
  transform:     scale(1);
  
  -webkit-transition:  -webkit-transform 200ms ease-out;
  -moz-transition:  -moz-transform 200ms ease-out;
  -o-transition:  -o-transform 200ms ease-out;
  transition:    transform 200ms ease-out;
}

#portfolio-landing .item h2,
#portfolio-nav .item h2{
  font:16px HelveticaNeueLight;
}

#portfolio-landing .item .title,
#portfolio-nav .item .title{
  display:block;
  float:left;
}

#portfolio-landing .item .see-more,
#portfolio-nav .item .see-more{
  float:right;
  margin-right:3px;
}

#portfolio-landing .item .title h2,
#portfolio-landing .item .see-more,
#portfolio-nav .item .title h2,
#portfolio-nav .item .see-more{
  -webkit-transition:color 200ms ease;
  -moz-transition:color 200ms ease;
  -o-transition:color 200ms ease;
  transition:color 200ms ease;
}

#portfolio-landing .item .title:hover h2,
#portfolio-landing .item .title:active h2,
#portfolio-landing .item:hover .title h2,
#portfolio-landing .item:hover .see-more,
#portfolio-nav .item .title:hover h2,
#portfolio-nav .item .title:active h2,
#portfolio-nav .item:hover .title h2,
#portfolio-nav .item:hover .see-more{
  color:#FF7600;
  
  -webkit-transition:color 200ms ease;
  -moz-transition:color 200ms ease;
  -o-transition:color 200ms ease;
  transition:color 200ms ease;
}

.port-detail #content > header,
.port-detail .content-box{
  width:1100px;
}

#portfolio-detail{
  width:984px;
  margin:0 auto;
}

#portfolio-detail article{
  position:relative;
  border-bottom:1px solid #CCC;
}

#portfolio-detail-header{
  margin-bottom: 40px;
  position:relative;
  border-top: 1px solid #CCCCCC;
  width:100%;
}

#portfolio-detail-header .left{
  border-bottom: 1px solid #CCCCCC;
  height: 30px;
  padding: 4px 0 5px;
  width: 300px;
  font: 18px HelveticaNeueLight;
}

#portfolio-detail-header .title{
  width:290px;
  padding-left:10px;
}

#portfolio-detail-header .divider{
  float: left;
  height: 30px;
  width: 42px;
}

#portfolio-detail-header h1{
  font: 18px HelveticaNeueLight;
  padding-top: 5px;
  padding-left:25px;
  background: url("/media/templates/light-right-arrow.png") no-repeat 0 9px;
}

#portfolio-detail-header .link{
  float: right;
  height: 23px;
  padding-top: 11px;
  text-align: right;
}

#portfolio-detail-header .category{
  height: 23px;
  padding-top: 11px;
  text-align: center;
  white-space: nowrap;
}

#portfolio-detail-header .category .divider{
  padding:0 3px;
  color:#FF7600;
  float:none;
  width: auto;
  height:auto;
}

#portfolio-detail-header .link a{
  padding-right: 20px;
}

#portfolio-detail-header .prev-project,
#portfolio-detail-header .next-project{
  background:url(/media/templates/showcase-btn.png) no-repeat -27px -47px;
  width:23px;
  height:45px;
  position: absolute;
  top:-2px;
  right:-23px;
  cursor:pointer;
  display:block;
  z-index:999;
  position: expression("absolute");
}

#portfolio-detail-header .prev-project{
  background-position:0 -47px;
  right:auto;
  left:-23px;
}

#portfolio-detail article .text img{
  box-shadow:0px 0px 5px #CCC;
  -moz-box-shadow:0px 0px 5px #CCC;
  -webkit-box-shadow:0px 0px 5px #CCC;
  -o-box-shdaow:0px 0px 5px #CCC;
}

#portfolio-detail article .detail-text{
  color: #555555;
  font:18px HelveticaNeueLight;
  line-height: 21px;
  padding-bottom: 40px;
  padding-top:40px;
}

#portfolio-detail article .detail-text p{
  margin-bottom:10px;
}

#portfolio-detail article .detail-text strong,
#portfolio-detail article .detail-text b{
  color:#FF7600;
  font-weight: normal;
}

#port-social{
  margin: 0 auto;
}

#port-social .site,
#port-social .facebook,
#port-social .twitter{
  float: left;
  font: 27px HelveticaNeueLight;
  height: 65px;
  margin: 45px 25px 0;
  padding: 0 0 0 80px;
  width: 195px;
  display: block;
  position: relative;
  text-shadow: 0px 2px 0px #FFF;
  text-align: center;
}

#port-social .twitter span,
#port-social .site span{
  display: block;
  padding-top: 15px;
}

#port-social .site .arrow,
#port-social .facebook .arrow,
#port-social .twitter .arrow{
  background:url(/media/templates/port-arrow.png) no-repeat 50% 0;
  position:absolute;
  top:-35px;
  left:135px;
  width:11px;
  height:10px;
  display: none;
}

#port-social .divider{
  float:left;
  width:3px;
  height:170px;
  padding:0px;
  background:url(/media/templates/port-divider.png) no-repeat 50% 50%;
}

#port-social .site{
  background:url(/media/templates/port-site.png) no-repeat 0 50%;
}

#port-social .facebook{
  background:url(/media/templates/port-facebook.png) no-repeat 0 50%;
}

#port-social .twitter{
  background:url(/media/templates/port-twitter.png) no-repeat 0 50%;
}


#portfolio-nav{
  padding-top:60px;
  padding-bottom:100px;
  background: #FFF;
  
  box-shadow: 0 0 5px #CCCCCC;
  -moz-box-shadow: 0 0 5px #CCCCCC;
  -webkit-box-shadow: 0 0 5px #CCCCCC;
  -o-box-shadow: 0 0 5px #CCCCCC;
}

.ie6 #portfolio-nav,
.ie7 #portfolio-nav,
.ie8 #portfolio-nav{
  border-top:1px solid #CCC;
}

#portfolio-nav > header{
  width:1018px;
  margin:0 auto 25px;
}

#portfolio-nav > header h2{
  float:left;
  font: 27px HelveticaNeueLight;
  padding-right:30px;
  background: url("/media/templates/light-right-arrow.png") no-repeat 100% 50%;
}

#portfolio-nav .screen{
  height: 255px;
  overflow: hidden;
  position: relative;
  width: 1018px;
  margin:0 auto;
}

#portfolio-nav .container{
  position:absolute;
  top:5px;
  left:0;
  height:255px;
  width: 8000px;
  
  -webkit-backface-visibility: hidden;
  
  -webkit-transition:  all 500ms ease-out;
  -moz-transition:  all 500ms ease-out;
  -o-transition:  all 500ms ease-out;
  transition:    all 500ms ease-out;
}

#portfolio-nav .wrapper{
  width:1018px;
  position:relative;
  margin:0 auto;
}

#portfolio-nav .wrapper .prev,
#portfolio-nav .wrapper .next{
  position:absolute;
  top:0px;
  padding-top:80px;
  padding-bottom:135px;
  left:-45px;
  font: 50px HelveticaNeueBold;
  color:#FF7600;
}

#portfolio-nav .wrapper .prev:hover,
#portfolio-nav .wrapper .prev:active,
#portfolio-nav .wrapper .next:hover,
#portfolio-nav .wrapper .next:active{
  color:#FF7600;
}

#portfolio-nav .wrapper .next{
  left:auto;
  right:-45px;
}

#portfolio-nav .item{
  margin: 0 30px 0 0;
  padding-bottom: 0;
}





/* Contact Styles
-------------------------------------------------------------- */

#contact-body .sub-header{
  width:330px;
}

#contact-form {
  padding: 40px 30px 70px 0;
}

.ie6 #contact-form,
.ie7 #contact-form{
  width:600px;
}

.ie6 #contact-form.mp-survey,
.ie7 #contact-form.mp-survey{
  width:auto;
}

.field{
  margin-bottom:20px;
}

label{
  float: left;
  padding-right: 10px;
  width: 130px;
  font-size:15px;
  padding:3px 0;
}

.field > input,
.field > textarea{
  display: block;
  float: right;
  font-size: 15px;
  padding: 2px;
  width: 450px;
  border:1px solid #CCC;
  
  -webkit-transition:border-color 300ms ease;
  -moz-transition:border-color 300ms ease;
  -o-transition:border-color 300ms ease;
  transition:border-color 300ms ease;
}

.field > input:focus,
.field > textarea:focus{
  border:1px solid #555;
  
  -webkit-transition:border-color 300ms ease;
  -moz-transition:border-color 300ms ease;
  -o-transition:border-color 300ms ease;
  transition:border-color 300ms ease;
}

textarea{
  height:250px;
}

#submit{
  width:auto;
  float: right;
  height: 32px;
  padding: 0 25px;
  border:0;
}

#buttonmp {
    border: 0 none;
    height: 32px;
    padding: 0 25px;
    width: auto;
  margin-left: 10px;
}

#contact-form .checkboxes{
  width:460px;
  float:right;
}

#contact-form .checkboxes .item{
  float:left;
  width:150px;
  height:50px;
}

body #contact-form .checkboxes input{
}

#contact-form .radio-label {
  width:auto; 
  padding:3px 15px 0px;
}

#contact-form .radio-label span {
  padding:0px 0px 0px 10px;
}

#contact-form .survey-sm {
   width:340px;
   float:left; 
}

#contact-form .radio-label input {
   vertical-align:middle; 
}

#contact-form .radio-label label.error {
  float:left !important; 
  text-align:left !important;
}

#contact-form .survey-comment {
  width:600px !important;
  height:100px !important;
  margin:15px 0px !important; 
  float:left !important;
}

.checkboxes input{
  display: block;
  float: left;
  margin-top: 1px;
  width: auto;
}

.checkboxes label{
  float: right;
  font-size: 14px;
  padding: 0 10px 0 0;
  width: 110px;
  display: block;
}

#contact-form label{
  text-shadow: 0px 2px 0px #FFF;
}

body label.error,
#contact-form label.error{
  clear: both;
  display: block;
  float: none;
  text-align: right;
  white-space: nowrap;
  width: 100%;
  padding: 5px 0;
  color:#FF7600;
  font-size:80%;
}

body input.error,
#contact input.error{
  border:1px solid #FF7600;
}


/* Article Menu Styles
-------------------------------------------------------------- */

.article-menu{
  width:800px;
  margin:0 auto;
  padding:30px 0 60px;
}

.article-menu .item{
  padding:60px 0;
  position:relative;
}

.article-menu .item .link{
  float:left;
  position:relative;
  text-align: center;
  width:108px;
  padding-bottom:65px;
}

.article-menu .item .link .white-btn{
  position:absolute;
  bottom:0px;
  white-space: nowrap;
}

.article-menu .item .text{
  float: right;
  padding-left:0;
  padding-right:50px;
  width: 480px;
}

.article-menu .item .text h2{
  font: italic 35px Georgia;
  color:666;
  padding-bottom:20px;
}

.article-menu .item .text .body{
  font:25px HelveticaNeueLight;
  line-height: 32px;
}

.article-menu .item.odd{

}

.article-menu .item.odd .link{
  float:right;
}

.article-menu .item.odd .text{
  float: left;
  padding-left: 80px;
  padding-right: 0;
}


/* Service Styles
-------------------------------------------------------------- */

.service #service-companies{
  text-align: center;
  padding-bottom:110px;
}

.service .article-menu{
  padding-bottom:0;
}

.service #footer-header{
  padding:60px 0;
}


/* Blog Styles
-------------------------------------------------------------- */

.blog hr{
  border-bottom:0;
}

.blog #tagline{
  padding:0;
}

.blog #social-media-banner{
  
}

#blog{
  color:#666;
  padding-bottom:100px;
}

#blog-sub-menu{
  float:left;
  width:175px;
  padding-right:25px;
  padding-top:40px;
  text-align: right;
  font-size:15px;
  
  -webkit-transition:  all 300ms ease;
  -moz-transition:  all 300ms ease;
  -o-transition:  all 300ms ease;
  transition:    all 300ms ease;
  
  transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -webkit-transition-delay: 100ms;
  -o-transition-delay: 100ms;
}

#blog-sub-menu ul{
  float:right;
}

#blog-sub-menu ul li{
  display: block;
}

#blog-sub-menu ul li a{
  display: block;
  margin-bottom:20px;
  text-transform: uppercase;
  color:#666;
  
  text-shadow:0px 2px 0px #FFF;
}

#blog-sub-menu ul li a:hover,
#blog-sub-menu ul li a:active,
#blog-sub-menu ul li.active a{
  color:#FF7600;
}

#posts,
#post-detail{
  float: left;
  width: 650px;
}

#blog > aside{
  float:right;
  width:200px;
  padding-top:40px;
  padding-right:20px;
  
  -webkit-transition:  all 300ms ease;
  -moz-transition:  all 300ms ease;
  -o-transition:  all 300ms ease;
  transition:    all 300ms ease;
  
  transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -webkit-transition-delay: 100ms;
  -o-transition-delay: 100ms;
}

.post{
  border-bottom:1px solid #CCC;
  border-left: 1px solid #CCCCCC;
  padding:40px 0 40px 25px;
}

#post-detail .post{
  border-bottom:0;
}

#social-share{
  border-bottom: 1px dotted #CCCCCC;
  border-top: 1px dotted #CCCCCC;
  margin:30px 0;
  padding:30px 0;
  position:relative;
  z-index:1;
}

.post h2,
.main-article .body-text h2{
  font:italic 25px Georgia;
  color:#666;
  margin-bottom:20px;
  text-shadow:0 2px 0 #FFF;
}

.post header a{
  display:block;
}

.post a:hover h2,
.post a:active h2{
  color:#FF7600;
}

.post .time{
  margin-bottom:20px;
  display:block;
}

.post .img{
  text-align: center;
  margin-bottom:20px;
  display: block;
}

.post img,
.blog-post-gallery .item img{
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  
  box-shadow: 0 3px 3px #888;
  -moz-box-shadow: 0 3px 3px #888;
  -webkit-box-shadow: 0 3px 3px #888;
  -o-box-shadow: 0 3px 3px #888;
}

body .post img.donothing{
  border-radius:0;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  -o-border-radius:0;
  
  box-shadow:none;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  -o-box-shadow:none;
}

.post h2 strong{
  color:#FF7600;
}

.post{
  color:#666;
}

#posts .text{
  display:none;
}

.post .text h1,
.post .text h2,
.post .text h3,
.post .text h4,
.post .text h5,
.post .text h6{
  padding:30px 0 0;
  font:25px HelveticaNeueLight;
  color:#333;
  margin:0;
}

.post .text p{
  color: #666666;
  line-height: 23px;
  padding: 13px 0;
}

.post .text ol{
  padding-left:40px;
}

.post .text ol li{
  padding-bottom:10px;
}

.post .text ul{
  padding:15px 0 15px 25px;
  list-style: square;
}

.post .text ul li{
  padding:3px 0 3px 10px;
}

.post .text a{
  color:#FF7600;
}

.post .text a:hover,
.post .text a:active{
  text-decoration: underline;
}

.post .text blockquote,
.post .text pre{
  background: #FFECE0;
  padding: 20px 15px;
  margin:15px 0;
  quotes: none;
  border-top:5px solid #FF7600;
  color:#333;
}

.post .text blockquote p,
.post .text pre code{
  color:#333;
  padding:0;
  margin:0;
}

.post .text table{
  width:100%;
  margin:20px 0;
}

.post .text table thead th{
  font-weight: normal;
  text-align: left;
  border-bottom: 1px solid #CCC;
  padding:8px 5px;
}

.post .text table tbody td{
  padding:8px 5px;
  border-bottom:1px dashed #CCC;
}

#blog-social-media ul{
  float:right;
}

#blog-social-media ul li{
  display: block;
}

#blog-social-media ul li a{
  display: block;
  text-align: right;
  margin-bottom:15px;
  
  text-shadow:0px 2px 0px #FFF;
  
  color:#666;
}

#blog-social-media ul li a:hover,
#blog-social-media ul li a:active{
  color:#FF7600;
}

#blog-social-media ul li a span{
  background:url("/media/templates/blog-social-media.png") no-repeat 100% 0;
  display: block;
  height: 24px;
  padding-right: 50px;
  padding-top: 7px;
  white-space: nowrap;
}

#blog-social-media ul li a.rss span{
  background-position:100% 0;
}

#blog-social-media ul li a.rss:hover span,
#blog-social-media ul li a.rss:active span{
  background-position:100% -150px;
}

#blog-social-media ul li a.facebook span{
  background-position:100% -47px;
}

#blog-social-media ul li a.facebook:hover span,
#blog-social-media ul li a.facebook:active span{
  background-position:100% -197px;
}

#blog-social-media ul li a.twitter span{
  background-position:100% -98px;
}

#blog-social-media ul li a.twitter:hover span,
#blog-social-media ul li a.twitter:active span{
  background-position:100% -248px;
}

#recent-post{
  margin-top:40px;
}

#recent-post h3{
  font-family:HelveticaNeueLight;
  text-transform: uppercase;
  color:#666;
  text-align: right;
  margin-bottom:20px;
  text-shadow:0px 2px 0px #FFF;
}

#recent-post ul{
  float:right;
}

#recent-post ul li{
  display: block;
}

#recent-post ul li a{
  display: block;
  margin-bottom:10px;
  text-transform: uppercase;
  color:#666;
  text-align: right;
  font-size:15px;
  text-shadow:0px 2px 0px #FFF;
}

#recent-post ul li a:hover,
#recent-post ul li a:active,
#recent-post ul li.active a{
  color:#FF7600;
}

#blog-nav{
  border-bottom: 1px solid #CCCCCC;
    padding: 15px 0;
}

#blog-nav .prev{
  font: 25px HelveticaNeueLight;
  color:#333;
  float:left;
  text-shadow: 0px 2px 0 #FFF;
}

#blog-nav .prev:hover,
#blog-nav .prev:active{
  color:#FF7600;
}

#blog-nav .prev span{
  color:#FF7600;
  padding-right:10px;
}

#blog-nav .next{
  font: 25px HelveticaNeueLight;
  color:#333;
  float:right;
  text-shadow: 0px 2px 0 #FFF;
}

#posts .read-more{
  padding-top:10px;
  font: 20px HelveticaNeueLight;
  color:#333;
  float:right;
  text-shadow: 0px 2px 0 #FFF;
}

#blog-nav .next:hover,
#blog-nav .next:active,
#posts .read-more:hover,
#posts .read-more:active{
  color:#FF7600;
}

#blog-nav .next span,
#posts .read-more span{
  color:#FF7600;
  padding-left:10px;
}

#blog-nav .prev-num,
#blog-nav .prev-num span,
#blog-nav .prev-num:hover,
#blog-nav .prev-num:active,
#blog-nav .next-num,
#blog-nav .next-num span,
#blog-nav .next-num:hover,
#blog-nav .next-num:active{
  color:#AAA;
  cursor:default;
}

.blog-post-gallery{
  padding-bottom:30px;
}

.blog-post-gallery .item{
  margin-right:10px;
}


.touch .white-btn,
.touch #submit,
.touch .orange-btn,
.touch #main-nav ul li a,
.touch #footer-nav ul li a
{
  font-family: "Helvetica Neue", Helvetica, Arial;
  letter-spacing: 0;
}


/* Article text
-------------------------------------------------------------- */

.article-text .body-text h1,
.article-text .body-text h2,
.article-text .body-text h3,
.article-text .body-text h4,
.article-text .body-text h5,
.article-text .body-text h6{
  padding:30px 0 0;
  font:25px HelveticaNeueLight;
  color:#333;
  margin:0;
}

.article-text .body-text p{
  color: #666666;
  line-height: 23px;
  padding: 13px 0;
}

.article-text .body-text ol{
  padding-left:40px;
}

.article-text .body-text ol li{
  padding-bottom:10px;
}

.article-text .body-text ul{
  padding:15px 0 15px 25px;
  list-style: square;
}

.article-text .body-text ul li{
  padding:3px 0 3px 10px;
}

.article-text .body-text a{
  color:#FF7600;
}

.article-text .body-text a:hover,
.article-text .body-text a:active{
  text-decoration: underline;
}

.article-text .body-text blockquote,
.article-text .body-text pre{
  background: #FFECE0;
  padding: 20px 15px;
  margin:15px 0;
  quotes: none;
  border-top:5px solid #FF7600;
  color:#333;
}

.article-text .body-text blockquote p,
.article-text .body-text pre code{
  color:#333;
  padding:0;
  margin:0;
}


.main-article{
  width:1000px;
  margin:0 auto;
}

.main-article .sub-header{
  padding:30px 0 0;
}

.main-article .body-text h2{
  margin-bottom:10px;
}

.main-article .body-text .field{
  margin-bottom:50px;
}

.charcount {
  font-size:14px;
  margin-left:15px;
}







/*-------------------------------------------------------------------------------
  HTML5 Reset :: style.css
-------------------------------------------------------------------------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
img, object, embed {max-width: 100%;}
html {overflow-y: scroll;} /* force a vertical scrollbar to prevent a jumpy page */
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;} /* tables still need cellspacing="0" in the markup */
th {font-weight: normal; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
input, select {vertical-align: middle;}
pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ }
input[type="radio"], input.radio { vertical-align: text-bottom; }
input[type="checkbox"], input.checkbox { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
a:hover, a:active {outline: none;}
small {font-size: 85%;}
strong, th {font-weight: bold;}
td, td img {vertical-align: top;}
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre, code, kbd, samp {font: 18px/24px HelveticaNeueLight;}

/* hand cursor on clickable elements */
.clickable, input[type=button], input[type=submit], button, input.button, input.submit{cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

input::-moz-focus-inner{ border:none; }
textarea{ resize:none; }
:focus { outline:0; }

/* let's clear some floats */
.clear{ clear:both; overflow: hidden; height:0; zoom: 1; }

.center { text-align:center; }
.right { float:right; }
.left { float:left; }
.aleft { text-align:left; }
.a-right { text-align:right; }
.show { display:block; }
.hide { display:none; }

/* Editable Styles
-------------------------------------------------------------- */

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #FFA300; color: #FFF; text-shadow: none;}
::selection {background: #FFA300; color: #FFF; text-shadow: none;}

/*  j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #FFA300;}

ins {background-color: #FFA300; color: #FFF; text-decoration: none;}
mark {background-color: #FFA300; color: #FFF; font-style: italic; font-weight: bold;}


/* anchor */
a {
  text-decoration:none;
  color:#333;
  -webkit-transition:color 200ms ease;
  -moz-transition:color 200ms ease;
  -o-transition:color 200ms ease;
  transition:color 200ms ease;
}

a:hover,
a:active {
  color:#FF7600;
  -webkit-transition:color 200ms ease;
  -moz-transition:color 200ms ease;
  -o-transition:color 200ms ease;
  transition:color 200ms ease;
}

/* <H> Tag */
h1,h2,h3,h4,h5,h6 {
  color:#333;
  font-family:Georgia;
  font-weight: normal;
}

section header h6, section footer h6{font-size: 1px; text-indent: -9999px; line-height: 1px;}

p { }

b { font-weight:normal; }

input,label,textarea,select{
  color:#333;
  font-family: HelveticaNeueLight;
  font-size: 16px;
}

.error{ }

hr {
  clear:both;
  border:0;
  border-top:1px solid #CCC;
  border-bottom:1px solid #FFF;
  border:expression('1px solid #CCC');
  margin:0;
  padding:0;
  display: block;
  height:1px;
}

html,html body {
  height:100%;
  width:100%;
  background:#FFF;
}

body {
  margin:0;
  padding:0;
  width:100%;
  font-size:18px;
  font-family: HelveticaNeueLight;
  color:#666;
}



.body-text{
  line-height:23px;
}










body.gr { font-family: helvetica, arial sans-serif; }

.gr #super-header,
.gr #footer-header h2 { font: 50px Helvetica; }

.gr #super-header strong, 
.gr #footer-header h2 strong { font: bold 50px Helvetica; }

.gr #header-banner .col2 { font: italic 30px Georgia; }

.gr #portfolio-banner .col2 .info h2 {  font: 28px Helvetica; }

.gr #portfolio-banner .col2 h2 { font: 18px/21px Helvetica; }

.gr .article-menu .item .text .body { font: 22px/30px Helvetica; }

.gr input, 
.gr label, 
.gr textarea, 
.gr select { font-family: Helvetica; font-size: 14px; }

.gr .checkboxes label { font-size: 13px; }

.gr #contact-locations .container .item .text { font: 15px Helvetica; }

.gr #contact-locations .container .item .text p { margin-bottom:5px; }

.gr .see-more span { font-size: 15px; }

.gr #quote .text, .gr #quote p {
    font: italic 30px Georgia;
}

.gr #language-switcher ul li a {  font-family: HelveticaNeueLight; }

.gr.es .new-tag { background: url("/media/new-tag-gr.png") no-repeat scroll 0 0 transparent; }