/**
 * Reset
 */
* { padding: 0; margin: 0; }
html { background: #fff; color: #000; font: 400 13px/1.231 Arial, sans-serif; }
header, nav, section, article, footer { display: block; }
nav ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; }
img { border: 0; }
a { color: #aaa; text-decoration: none; }
a:hover { color: #fff; }
input, textarea { font-size: 13px; line-height: 16px; font-family: Arial, sans-serif; }


/**
 * Generic
 */
nav.horizontal li { float: left; }
nav.horizontal a { display: block; }

.hidden { display: none; }

.blank { display: block; overflow: hidden; text-indent: 200%; white-space: nowrap; }

.clearfix:before, .clearfix:after {	content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.left { float: left; }
.right { float: right; }

.page-width { position: relative; width: 1024px; margin: 0 auto; }

.logos { vertical-align: middle; }
.logos .logo { background: url(/images/progressive-sprite.png); display: inline-block; }
.logos .logo + .logo { margin-left: 10px; }

a.video { background: url(/images/progressive-sprite.png) no-repeat -400px -300px; color: #0cf; font-weight: 700; padding-left: 25px; }
a.video:hover { border-bottom: 1px dotted #0cf; }

#thx-logo { background-position: 0 -400px; width: 75px; height: 36px; }
#isf-logo { background-position: -100px -400px; width: 59px; height: 31px; }


/**
 * Header
 */
#global-header { background: #545454 url(/images/progressive-sprite.png) repeat-x 0 0; position: fixed; left: 0; top: 0; width: 100%; z-index: 1; }
#global-header > .page-width { height: 100px; }

#logo, #global-nav { float: left; }

#logo { margin: 40px 30px 0 30px; }
#logo a { background: url(/images/developers-logo.png) no-repeat center; width: 231px; height: 35px; background-size: contain;}

#global-nav, #global-nav a { height: 40px; line-height: 40px; }
#global-nav ul { margin-left: 50px; }
#global-nav { font-size: 12px; font-weight: 700; margin-top: 30px; overflow: visible; }
#global-nav li + li { background: url(/images/progressive-sprite.png) no-repeat 0 -450px; }
#global-nav a { padding: 0 14px; }
#global-nav a:hover, #global-nav .active a { color: #fff; }

#global-nav #flickr-link a { background: url(/images/progressive-sprite.png) no-repeat right -200px; padding-right: 24px; }
#global-nav #flickr-link a:hover { background-position: right -250px; }

#global-nav #store-link { background: none; position: absolute; right: 30px; padding: 0; border: 0; margin: 0; }
#global-nav #store-link a { background: url(/images/progressive-sprite.png) no-repeat right -400px; color: #0cf; padding-right: 19px; padding-left: 0; }
#global-nav #store-link a:hover { background-position: right -450px; color: #fff; }


/**
 * Sections
 */
.slide, .slide > .page-width { height: 675px; }
.section { background: #fff; color: #999; position: relative; }
.slide { background: no-repeat center center; position: relative; }
.caroufredsel_wrapper .slide { float: left; }
.slide .text { position: absolute; top: 130px; }
.text .title { color: #333; font-weight: 300; font-family: Lato, Arial, sans-serif; font-size: 40px; line-height: 1; text-transform: lowercase; }
.title .colour { color: #999; }
.text p, .text ul, .text li { margin-top: 15px; }
.text ul { margin-left: 20px; }

.navigation, .pagination { position: absolute; left: 50%; width: 1024px; margin-left: -512px; }

.navigation { top: 50%; margin-top: 50px; }
.navigation .control { background-image: url(/images/progressive-sprite.png); position: absolute; top: 50%; width: 100px; height: 100px; margin-top: -50px; opacity: .75; }
.navigation .control:hover { opacity: 1; }
.navigation .previous { background-position: 0 -100px; left: 0; }
.navigation .next { background-position: -100px -100px; right: 0; }

.pagination { bottom: 20px; height: 8px; line-height: 8px; text-align: center; }
.pagination a { background: url(/images/progressive-sprite.png) 0 -300px; display: inline-block; width: 8px; height: 8px; }
.pagination a + a { margin-left: 12px; }
.pagination .selected { background-position: 0 -310px; }
.pagination span { display: none; }

/* Dark sections */
.section.dark { color: #b9b9b9; }
.section.dark .title { color: #fff; }

/* Home */
#home { background-color: #2a2a2a; padding-top: 100px; }
#home .page-width .slide { height: 575px;}
#home .one-third a { display: block; }
#home .one-third .text { bottom: 0; width: 301px; padding: 20px 20px 30px 20px; color: #b9b9b9; top: auto; background: rgba(0, 0, 0, 0.5); }
#at-your-fingertips { background-image: url(/images/home/at-your-fingertips.jpg); }
#hear-the-quality { background-image: url(/images/home/hear-the-quality.jpg); }
#see-the-difference { background-image: url(/images/home/see-the-difference.jpg); }
#control-your-world { background-image: url(/images/home/control-your-world.jpg); }
#home .one-third { float: left; width: 341px; position: relative; height: 575px; }
#home .one-third:last-of-type { width: 342px; }
#home p a { color: #0cf; font-weight: 700;background: none; }
#home p a:hover { text-decoration: underline; }
#home .one-third a p { color: #b9b9b9; }
#home .one-third a:hover p { color: #b9b9b9; }
#home .slide a { display: block; }

/* Audiovisual */
#new-build-homes .text { left: 140px; }
#new-build-homes { background-image: url(/images/section-2/image-1.jpg); }
#new-build-homes .text { width: 290px; }
#new-build-homes .text .title { color: #999; }
#new-build-homes .text .title .colour { color: #fff; }
#attention-to-detail .text { left: 600px; }
#attention-to-detail { background-image: url(/images/section-2/image-2.jpg); }
#attention-to-detail .text { width: 290px; }
#design-team .text { left: 140px; }
#design-team { background-image: url(/images/section-2/image-3.jpg); }
#design-team .text { width: 350px; }
#acquisition .text { left: 600px; }
#acquisition { background-image: url(/images/section-2/image-4.jpg); }
#acquisition .text { width: 350px; }

/* Home technology */
#design-teams .text { left: 460px; }
#design-teams { background-image: url(/images/section-3/image-1.jpg); }
#design-teams .text { width: 400px; }
#built-by-hand .text { left: 140px; }
#built-by-hand { background-image: url(/images/section-3/image-2.jpg); }
#built-by-hand .text { width: 250px; }
#technology .text { left: 140px; }
#technology { background-image: url(/images/section-3/image-3.jpg); }
#technology .text { width: 540px; }
#interior-design .text { left: 140px; }
#interior-design { background-image: url(/images/section-3/image-4.jpg); }
#interior-design .text { width: 580px; }

/* Commercial */
#commercial .text { left: 140px; }
#corporate { background-image: url(/images/commercial/corporate.jpg); }
#corporate .text { width: 724px; }
#hospitality { background-image: url(/images/commercial/hospitality.jpg); }
#hospitality .text { width: 490px; }
#retail { background-image: url(/images/commercial/retail.jpg); }
#retail .text { width: 460px; }

/* Projects */
#projects { background-color: #fafafa; }
#projects .text { left: 140px; width: 724px; }
#projects .thumbnails { left: 140px; width: 724px; top: 430px; position: absolute; }
#projects .thumbnails img { float: left; margin-right: 20px; }
#projects .thumbnails #last-thumbnail { margin-right: 0; }
#projects a { color: #0cf; font-weight: 700; }
#projects a:hover { text-decoration: underline; }
.project-image { width: 800px;height: 500px; }
#fancybox-content div { overflow: hidden; }

/* About us */
#about-us { background-color: #000; }
#about-us .text { left: 140px; width: 400px; }
#about-progressive { background-image: url(/images/about-us/about-progressive.jpg); }
#developers-designers { background-image: url(/images/about-us/developers-designers.jpg); }

/* Contact */
#contact { background-color: #333; color: #fff; }
#contact a { color: #0cf; }
#contact a:hover { text-decoration: underline; }
#contact .page-width { width: 864px; padding: 130px 0 30px; }
#contact .half { width: 400px; }

#follow-us { margin-top: 10px; }
#follow-us .title, #follow-us nav { float: left; }
#follow-us .title { margin-right: 20px; }
#follow-us nav ul { margin: 10px 0 0; }
#follow-us nav li { margin: 0; }
#follow-us nav li + li { border-left: 1px solid #474747; }
#follow-us nav a { background: url(/images/progressive-sprite.png); width: 50px; height: 30px; }

#follow-us .twitter a { background-position: 0 -200px; }
#follow-us .facebook a { background-position: -50px -200px; }
#follow-us .youtube a { background-position: -100px -200px; }
#follow-us .flickr a { background-position: -150px -200px; }
#follow-us .twitter a:hover { background-position: 0 -250px; }
#follow-us .facebook a:hover { background-position: -50px -250px; }
#follow-us .youtube a:hover { background-position: -100px -250px; }
#follow-us .flickr a:hover { background-position: -150px -250px; }

.yoyo-form .feedback, .yoyo-form .control { margin: 16px 0; }
.yoyo-form .feedback, .yoyo-form .help { color: #0cf; }
.yoyo-form .feedback { padding: 10px; border: 1px solid #0cf; }
.yoyo-form .feedback.success { color: #0c0; border-color: #0c0; }
.yoyo-form .input { font-family: Arial, Sans-Serif; }
.yoyo-form .label { display: block; font-weight: 700; margin-bottom: 5px; }
.yoyo-form .label .required { font-weight: 400; font-style: italic; }
.yoyo-form .text .input { background: #000; color: #fff; display: block; width: 380px; border: 0; padding: 10px; }
.yoyo-form .text input { height: 16px; }
.yoyo-form textarea { resize: none; height: 130px; }
.yoyo-form .submit { margin-top: 20px; }
.yoyo-form .submit .input { background: none; color: #0cf; font-size: 16px; font-weight: 700; float: right; border: none; cursor: pointer; }
.yoyo-form .submit .input:hover { color: #fff; }
.yoyo-form .help { margin-top: 5px; }


/**
 * Footer
 */
#global-footer { background-color: #000; font-size: 12px; }
#global-footer, #global-footer a { color: #999; }
#global-footer a:hover { color: #ccc; }
#global-footer .page-width { width: 864px; height: 70px; padding-top: 30px; }

#copyright, #footer-nav { float: left; }
#credit { float: right; }

#footer-nav li { background: url(/images/progressive-sprite.png) no-repeat -200px -450px; padding-left: 11px; margin-left: 10px; }

#credit a { background: url(/images/progressive-sprite.png) no-repeat -100px -300px; width: 12px; height: 12px; }
#credit a:hover { background-position: -100px -320px; }

.nice-text { padding: 20px; }
.nice-text h1, .nice-text h2 { font-family: Lato, Arial, sans-serif; }
.nice-text h1 { font-size: 2.5em; text-transform: lowercase; }
.nice-text h2 { font-size: 1.5em; margin: 1em 0 .5em; }
.nice-text p { margin: 1em 0; }
.nice-text ul { list-style-type: disc; margin: 1em 3em; }
.nice-text li { margin: .333em 0; }