/**
 * FONTS
 * ====================================================================================================
 */

@font-face {
  font-family: 'Avenir Black';
  src: url('/fonts/AvenirBlack.eot');
  src: local('Avenir Black Regular'), local('Avenir Black'), 
         url('/fonts/AvenirBlack.otf') format('opentype');
}

@font-face {
  font-family: 'Avenir Light';
  src: url('/fonts/AvenirLight.eot');
  src: local('Avenir Light Regular'), local('Avenir Light'), 
         url('/fonts/AvenirLight.otf') format('opentype');
}

/**
 * GLOBAL
 * ====================================================================================================
 */


body { background: #f0ece4 url('/images/page-background-diagonal.png'); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

.skip { left: -99999em; position: absolute; top: -99999em; }

a { color: #aac601; text-decoration: none; }
a:hover { color: #005558; }

#fonttest { left: -99999em; position: absolute; top: -99999em; }


/**
 * HEADER
 * ====================================================================================================
 */

body > header { background: url('/images/page-header.png') no-repeat 0 0; font-family: 'Avenir Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 2.666em; line-height: 1.333; margin: 75px auto; text-shadow: #eee 0 1px 0; text-transform: uppercase; width: 942px; }

body > header a { color: #000; display: block; height: 252px; padding: 30px 15px 0 435px; width: 492px; }
body > header a:hover { color: #aac601; }
body > header .greeting { display: block; font-family: 'Avenir Black', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.8em; line-height: 1; font-weight: bold; }
body > header strong { color: #aac601; font-family: 'Avenir Black', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; }
body > header a:hover strong { color: #000; }


/**
 * CONTENT
 * ====================================================================================================
 */

#content { background: url('/images/content-tag.png') no-repeat 0 36px; clear: both; margin: 635px auto 0; overflow: hidden; padding: 0 22px; width: 940px; }

#content p { font-size: 1.1em; line-height: 1.4; }

#content p img { float: right; padding: 20px 0 10px 20px; }

#content section { background: #fff url('/images/text-about.png') no-repeat 20px 20px; float: left; padding: 55px 20px 1px; text-shadow: #eee 0 1px 0; width: 580px; }

h1 { font-family: 'Avenir Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.666em; line-height: 1.2; margin: 0 0 0.75em; text-transform: uppercase; }
h1 strong { left: -99999em; position: absolute; top: -99999em; }
h1 em { color: #aac601; font-family: 'Avenir Black', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; }

#content img { margin: 0 0 1em; }

#content aside { float: left; padding: 0 0 0 20px; text-shadow: #e2dacc 0 -1px 0, #f7f5f1 0 1px 0; width: 300px; }

#content aside header { background: url('/images/text-contact.png') no-repeat 0 26px; font-family: 'Avenir Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.666em; line-height: 1.2; padding: 55px 0 0; margin: 0 0 0.75em; text-transform: uppercase; }
#content aside header strong { left: -99999em; position: absolute; top: -99999em; }

label { display: block; font-weight: normal; margin: 1.5em 0 0; text-transform: uppercase; }

input, input[type='text'], textarea { background: #fff; border: 1px solid #fff; font-family: 'Helevetica Neue', Helevetica, Arial, sans-serif; }
input, input[type='text'] { line-height: 1; padding: 9px 0; text-indent: 9px; width: 298px; }
textarea { height: 120px; line-height: 1.4; padding: 9px; width: 280px; }
input:focus, input[type='text']:focus, textarea:focus { border-color: #aac601; outline: 0 none; }

button { background-color: #005558; border: 0 none; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; color: #fff; display: block; float: left; font-family: 'Avenir Black', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; margin: 10px 0 0 10px; padding: 6px 0; cursor: pointer; text-align: center; text-transform: uppercase; width: 75px; }
button:focus, button:hover { background-color: #aac601; color: #fff; }
button.loading, button.loading:hover, button.loading:focus { background: #005558 url('/images/ajax-loader.gif') no-repeat 50% 50%; text-indent: -99999em; }

#result { display: block; float: right; font-weight: bold; margin: 18px 0 0; width: 204px; }


/**
 * PORTFOLIO
 * ====================================================================================================
 */

#portfolio { height: 550px; left: 0; overflow: hidden; position: absolute; top: 432px; width: 100%; }

#portfolio > section { height: 550px; margin: 0 auto; overflow: hidden; padding: 0; width: 940px; }

#portfolio .container { height: 550px; margin: 0 auto; overflow: hidden; padding: 0; width: 940px; }

#panels { height: 550px; list-style: none; margin: 0; padding: 0; position: relative; width: 99999em; }

.panel { display: none; line-height: normal; margin: 0; padding: 0 20px 0 0; visibility: hidden; }
#panels .active, .slider .panel { display: block; visibility: visible; }
.slider .panel { float: left; }

.panel section { background: url('/images/shadow-tag.png') no-repeat 10px 0; margin: 0 0 0 50px; padding: 25px 20px 0; position: relative; top: -61px; width: 400px; }
.panel div { background: #fff; padding: 20px 20px 2px; position: relative; text-shadow: #eee 0 1px 0; }

.teaser { background-color: #000; border: 10px solid #fff; }

h2 { font-size: 1em; font-weight: bold; text-transform: uppercase; }
h2 strong { color: #aac601; display: block; font-family: 'Avenir Black', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 2em; }
h2 span { font-size: 0.6em; }

.panel p { line-height: 1.4; }

.button, #controls span { background-color: #005558; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; color: #fff; cursor: pointer; display: block; float: left; font-family: 'Avenir Black', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; margin: 10px 0 0 10px; padding: 0.6em 0.9em; text-transform: uppercase; }
.button strong { left: -99999em; position: absolute; top: -99999em; }
.button:hover, #controls span:hover { background-color: #aac601; color: #fff; }

#controls { left: 0; position: absolute; top: 328px; width: 100%; }
#controls > div { margin: 0 auto; overflow: hidden; width: 940px; }

#controls .directions, #pointers { float: right; }
#controls span { margin: 10px 10px 10px 0; }

#pointers { list-style: none; margin: 0; padding: 0 5px; }
#pointers li { background: url('/images/pointers.gif') no-repeat 5px 50%; cursor: pointer; float: left; height: 46px; list-style: none; margin: 0; overflow: hidden; padding: 0; width: 20px; }
#pointers .active { background-position: -10px 50%; }
#pointers li:hover, #pointers .active:hover { background-position: -25px 50%; }
#pointers a { display: block; height: 46px; text-indent: 20px; }

/**
 * FOOTER
 * ====================================================================================================
 */
 
footer { background: url('/images/portfolio-tag.png') no-repeat 36px 53px; clear: both; font-size: 0.9em; line-height: 1.4; margin: 0 auto 50px; overflow: hidden; padding: 75px 0 0; text-shadow: #eee 0 1px 0; text-transform: uppercase; width: 940px; }

footer .details { background: #fff url('/images/text-copyright.png') no-repeat 20px 20px; float: left; height: 24px; margin: 0; padding: 84px 20px 20px; width: 580px; }
footer .addresses { background: #fff; float: left; font-style: normal; height: 98px; margin: 0; padding: 15px 20px; width: 280px; }
 
.license { left: -99999em; position: absolute; top: -99999em; }
footer .details * { display: block; }
address { font-style: normal; margin: 0; }
dd { margin: 0 0 1em; }