.clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } html { position: relative; min-height: 100%; } body, input, button, textarea, select { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.4; } body { color: #302e2b; background-color: #f6f5f4; overflow-x: hidden; overflow-y: scroll; margin-top: 42px; margin-bottom: 80px; -webkit-transition: padding-top 0.2s ease-out; -moz-transition: padding-top 0.2s ease-out; -o-transition: padding-top 0.2s ease-out; transition: padding-top 0.2s ease-out; } h1, h2, h3 { margin: 0 0 20px 0; } h1, h2 { font-family: "adelle", Georgia, serif; font-weight: 300; } h1 { font-size: 36px; } h2 { font-size: 24px; } h3 { font-size: 21px; } h4 { font-size: 16px; } h1.big { font-size: 46.8px; } h1 small { font-size: 24px; margin-top: 13px; } a { color: #427ddd; font-weight: bold; text-decoration: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } a:hover { color: #302e2b; } .hide { display: none; } img { height: auto; max-width: 100%; } img.avatar { background-color: rgba(0, 0, 0, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } hr { border-width: 0; border-top: 1px solid #dfdbd7; margin: 40px 0; } hr.small { margin: 20px 0; } a img.avatar { vertical-align: middle; } [class^="icon-"], [class*=" icon-"] { font-size: 14px; } .right { float: right; } .left { float: left; } .m-top { margin-top: 20px; } .m-left { margin-left: 20px; } .m-right { margin-right: 20px; } .m-bottom { margin-bottom: 20px; } .p-top { padding-top: 20px; } .p-left { padding-left: 20px; } .p-right { padding-right: 20px; } .p-bottom { padding-bottom: 20px; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-small { font-size: 13px; } .faded { color: #827b73; } .faded a { color: #746e67; } .faded a:hover { color: #67625b; } .has-sub-title { margin-bottom: 0; } .sub-title { margin: 5px 0 20px 0; color: #827b73; } .label { padding: 2px 5px 1px 5px; font-size: 12px; line-height: 1.4; font-weight: bold; color: #ffffff; background-color: #59554f; text-transform: uppercase; vertical-align: 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .pro { vertical-align: middle; padding: 3px 6px; font-size: 12px; font-weight: bold; color: #ffffff; background-color: #ce580f; text-transform: uppercase; vertical-align: 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .pro.inverted { background-color: #ffffff; color: #ce580f; } .pro.middle { font-size: 18px; padding: 4px 8px; line-height: 1; -webkit-border-radius: 7.5px; -moz-border-radius: 7.5px; border-radius: 7.5px; } header.main .pro { vertical-align: 1px; } h1 .pro, h2 .pro, fieldset legend .pro, .pro.big { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 24px; padding: 6px 10px; line-height: 1; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } h2 .pro { font-size: 21px; padding: 5px 8px; } .show-mobile { display: none; } .box { padding: 20px; background-color: #ffffff; -webkit-box-shadow: 0 3px 0 #dfdbd7; -moz-box-shadow: 0 3px 0 #dfdbd7; box-shadow: 0 3px 0 #dfdbd7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .lite { font-weight: normal; } #mobile-menu-open { display: none; } .wrap { display: block; margin-left: auto; margin-right: auto; width: 940px; } .wrap.thinner { width: 800px; } .hide-login header.main .login, .hide-footer .footer { display: none; } .relative { position: relative; } .overflow-hidden { overflow: hidden; } .content { *zoom: 1; padding: 20px 0; } .content:before, .content:after { display: table; content: ""; line-height: 0; } .content:after { clear: both; } .content .inner { padding: 0 20px; } .pre-content .instruction { margin-bottom: 0; } .module { background-color: #ffffff; border: 1px solid #bdb5ad; -webkit-box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.05); box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.05); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .secondary .inner { word-wrap: break-word; padding-left: 0; } .template-1, .template-2 { background-image: url("/images/background.png"); background-position: 50% 0; background-repeat: repeat-y; } .template-1 .primary, .template-2 .primary { float: left; width: 720px; float: right; } .template-1 .secondary, .template-2 .secondary { float: left; width: 220px; } .template-1 .primary .inner { padding-right: 0; } .template-1 .primary .primary-aside { display: none; } .template-2 .primary .primary-main { float: left; width: 520px; } .template-2 .primary .primary-aside { float: left; width: 200px; } .template-2 .primary .primary-aside .inner { padding-right: 0; } .template-3 .primary .inner { padding: 0; } .template-3 .footer .inner { padding-left: 0; } .layout-full-width, .layout-full-width-wide { background-image: url("/images/background-full-width.png"); } .layout-full-width .content, .layout-full-width-wide .content { position: relative; } .layout-full-width .primary, .layout-full-width-wide .primary { padding-right: 20px; width: auto; float: none; } .layout-full-width .primary .inner, .layout-full-width-wide .primary .inner { padding: 0; } .layout-full-width .secondary, .layout-full-width-wide .secondary { position: absolute; top: 0; } .layout-full-width .secondary .inner, .layout-full-width-wide .secondary .inner { padding: 20px; } .layout-full-width .wrap, .layout-full-width-wide .wrap { *zoom: 1; width: auto; } .layout-full-width .wrap:before, .layout-full-width-wide .wrap:before, .layout-full-width .wrap:after, .layout-full-width-wide .wrap:after { display: table; content: ""; line-height: 0; } .layout-full-width .wrap:after, .layout-full-width-wide .wrap:after { clear: both; } .layout-full-width { background-position: -80px 0; } .layout-full-width .primary { padding-left: 240px; } .layout-full-width-wide { background-position: -40px 0; } .layout-full-width-wide .primary { padding-left: 260px; } .layout-full-width-wide .secondary { width: 260px; } .layout-full-width-wide .footer .inner { padding-left: 280px; } .footer { position: absolute; left: 0; bottom: 0; height: 60px; width: 100%; color: #827b73; } .footer .inner { margin: 20px 0; padding-left: 240px; } .footer .inner a { font-weight: normal; color: #827b73; } .footer .inner a:hover { color: #302e2b; } .nav a { text-decoration: none; } .nav-sidebar { margin: 0; padding: 0; list-style: none; } .nav-sidebar li { margin-bottom: 5px; } .nav-sidebar li h4 { text-transform: uppercase; font-size: 14px; color: #827b73; text-align: center; margin: 0; } .nav-sidebar li.back a { display: block; } .nav-sidebar li.item a { display: block; padding: 6.66666667px 10px 5.66666667px 10px; color: #9a958d; font-weight: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .nav-sidebar li.item a i { float: left; position: relative; top: 3px; width: 14px; text-align: right; margin-right: 10px; } .nav-sidebar li.item a [class^="ss-"], .nav-sidebar li.item a [class*=" ss-"] { vertical-align: -1px; } .nav-sidebar li.item a .num { position: relative; float: right; top: -2px; font-weight: bold; padding: 1px 7px; color: #ffffff; background-color: #b2a89f; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .nav-sidebar li.item a:hover { color: #302e2b; background-color: #eae8e5; } .nav-sidebar li.item a:hover .num { background-color: #302e2b; } .nav-sidebar li.item-bold a { color: #ce580f; } .nav-sidebar li.item-bold a .num { background-color: #ce580f; } .nav-sidebar li.item.active a { cursor: default; color: #f6f5f4; background-color: #9b58d5; } .nav-sidebar li.item.active a .num { color: #9b58d5; background-color: #f6f5f4; } .nav-sidebar li.seperator { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #dfdbd7; } .nav-sidebar li.sub-label { color: #827b73; font-weight: bold; padding: 6.66666667px 10px 5.66666667px 10px; } .nav-steps { margin: 0; padding: 0; list-style: none; font-size: 21px; } .nav-steps li { margin-bottom: 10px; } .nav-steps li a, .nav-steps li span { display: block; padding: 6.66666667px 10px 5.66666667px 10px; color: #9a958d; font-weight: 300; } .nav-steps li a i, .nav-steps li span i { float: left; width: 30px; font-style: normal; margin-right: 20px; text-align: center; color: white; background-color: #c8c2bb; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .nav-steps li.selected a, .nav-steps li.selected span { color: #302e2b; } .nav-steps li.selected a i, .nav-steps li.selected span i { background-color: #302e2b; } .nav-steps li.complete a, .nav-steps li.complete span, .nav-steps li.complete i { text-decoration: line-through; } .nav-filter { margin: 0; padding: 0; list-style: none; *zoom: 1; margin: 20px 0; } .nav-filter:before, .nav-filter:after { display: table; content: ""; line-height: 0; } .nav-filter:after { clear: both; } .nav-filter li { float: left; margin-right: 5px; } .nav-filter li span { display: block; padding: 6.66666667px 0 5.66666667px 0; color: #827b73; } .nav-filter li a { display: block; padding: 6.66666667px 10px 5.66666667px 10px; font-weight: normal; border: 2px solid #c4d6f4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .nav-filter li a i { vertical-align: 0; margin-right: 3px; } .nav-filter li a:hover { color: #f6f5f4; background-color: #427ddd; border-color: #1c4d9d; } .nav-filter li.active a { cursor: default; color: #f6f5f4; background-color: #427ddd; border-color: #1c4d9d; } .nav-inline { *zoom: 1; text-align: center; margin: 20px 0; } .nav-inline:before, .nav-inline:after { display: table; content: ""; line-height: 0; } .nav-inline:after { clear: both; } .nav-inline ul { margin: 0; padding: 0; list-style: none; } .nav-inline ul li { display: inline-block; } .nav-inline ul li a { display: inline-block; border: 2px solid #98b8ed; border-right-width: 0; padding: 5px 20px; } .nav-inline ul li a:hover { background-color: #d9e5f8; } .nav-inline ul li.active a, .nav-inline ul li a.active { color: #f6f5f4; background-color: #98b8ed; } .nav-inline ul li:first-child a { -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } .nav-inline ul li:last-child a { border-right-width: 2px; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } .nav-inline.nav-inline-left { text-align: left; } .nav-inline.nav-inline-left li { display: block; float: left; } .nav-inline.nav-inline-left li a { padding: 5px 13.33333333px; } .nav-inline.nav-inline-darker li a { border-color: #427ddd; } .nav-inline.nav-inline-darker li.active a, .nav-inline.nav-inline-darker li a.active { background-color: #427ddd; } .actions { *zoom: 1; padding: 0 0 20px 0; } .actions:before, .actions:after { display: table; content: ""; line-height: 0; } .actions:after { clear: both; } .actions .button { display: block; font-size: 21px; padding: 10px 15px; } .actions .button i { font-size: 28px; vertical-align: -2px; margin-right: 5px; } .in-page-actions { *zoom: 1; margin-bottom: 20px; } .in-page-actions:before, .in-page-actions:after { display: table; content: ""; line-height: 0; } .in-page-actions:after { clear: both; } .in-page-actions .button { float: left; margin-right: 10px; } .in-page-actions .right { float: right; margin-right: 0; margin-left: 10px; } .mini-actions { margin: 0; padding: 0; list-style: none; margin: 20px 0; } .mini-actions li { margin: 10px 0; } .mini-actions li a { display: block; } .pagination { *zoom: 1; margin-top: 40px; } .pagination:before, .pagination:after { display: table; content: ""; line-height: 0; } .pagination:after { clear: both; } .pagination a, .pagination span { float: left; display: block; padding: 5px 12px; color: #827b73; margin-right: 10px; background-color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .pagination a { font-weight: normal; } .pagination a:hover { color: #ffffff; background-color: #8232c8; } .pagination span.current { color: #ffffff; background-color: #75a9b1; } .nav-facets { margin: 0; padding: 0; list-style: none; } .nav-facets li.item a { display: block; padding: 6.66666667px 10px 5.66666667px 10px; color: #9a958d; font-weight: normal; } .nav-facets li.item a:hover { color: #302e2b; background-color: #eae8e5; } .nav-facets li.item.active a { cursor: default; color: #ffffff; background-color: #75a9b1; } .nav-facets li.sub-label { font-size: 12px; font-weight: 300; text-transform: uppercase; padding: 6.66666667px 10px 5.66666667px 10px; color: #b2aea8; } .nav-share { margin: 0; padding: 0; list-style: none; } .nav-share li { display: inline-block; margin-right: 5px; } .nav-share li a { display: inline-block; color: white; padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .nav-share li a i { margin-right: 3px; } .nav-share li a:hover { color: white; } .nav-share li a.twitter { background-color: #55acee; } .nav-share li a.twitter:hover { background-color: #2795e9; } .nav-share li a.facebook { background-color: #3b5999; } .nav-share li a.facebook:hover { background-color: #2d4474; } .nav-share li a.email { background-color: #b2a89f; } .nav-share li a.email:hover { background-color: #9b8f82; } .nav-share.centered { text-align: center; } .nav-share.centered li { margin: 0 5px; } .nav-share.large li a { padding: 7px 15px; font-size: 21px; } .nav-share.large li a i { font-size: 28px; vertical-align: -3px; margin-right: 5px; } .nav-page-tabs { background-color: white; } .nav-page-tabs ul { margin: 0; padding: 0; list-style: none; *zoom: 1; position: relative; } .nav-page-tabs ul:before, .nav-page-tabs ul:after { display: table; content: ""; line-height: 0; } .nav-page-tabs ul:after { clear: both; } .nav-page-tabs ul li { float: left; border-bottom: 4px solid transparent; -webkit-transition: border-bottom-color 0.2s ease-in-out; -moz-transition: border-bottom-color 0.2s ease-in-out; -o-transition: border-bottom-color 0.2s ease-in-out; transition: border-bottom-color 0.2s ease-in-out; } .nav-page-tabs ul li a { display: block; padding: 10px 20px; color: #7f7e7b; } .nav-page-tabs ul li a:hover { color: #302e2b; background-color: #eae8e5; } .nav-page-tabs ul li.active { border-bottom-color: #427ddd; } .nav-page-tabs ul li.active a { color: #302e2b; background-color: white; } .alert { padding: 10px 13.33333333px; background-color: #dfdbd7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .alert.success { color: #FFF; background-color: #48a55f; } .alert.info { color: #FFF; background-color: #75a9b1; } .alert.alert-flash { padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .alert.alert-flash .inner { padding: 10px; } .alert.alert-flash .close { float: right; color: #FFF; color: rgba(255, 255, 255, 0.5); margin-left: 10px; } .alert.alert-flash .close:hover { color: #FFF; } .alert.wide-alert { margin-bottom: 0; text-align: center; background-color: #DED94B; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .alert.wide-alert a { color: #302e2b; } .alert.wide-alert a:hover { color: #151413; } .layout-full-width .alert.alert-flash, .layout-full-width-wide .alert.alert-flash { margin-left: 0; } button:focus, input:focus, textarea:focus { outline: none; } input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea { display: block; width: 100%; background-color: #ffffff; padding: 6.66666667px 10px; border: 1px solid #c8c2bb; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } input[type="text"]:-moz-placeholder, input[type="email"]:-moz-placeholder, input[type="number"]:-moz-placeholder, input[type="password"]:-moz-placeholder, textarea:-moz-placeholder { color: #b2aea8; } input[type="text"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #b2aea8; } input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #b2aea8; } input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, textarea:focus { border-color: #427ddd; } input[type="text"].disabled, input[type="email"].disabled, input[type="number"].disabled, input[type="password"].disabled, textarea.disabled { color: #67625b; background-color: #fafaf9; } textarea { resize: none; } .select { position: relative; cursor: pointer; width: auto; height: 32px; background-color: #ffffff; border: 1px solid #c8c2bb; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .select i { position: absolute; top: 9px; right: 10px; color: #827b73; -webkit-transition: color 0.1s ease-in; -moz-transition: color 0.1s ease-in; -o-transition: color 0.1s ease-in; transition: color 0.1s ease-in; } .select select { position: absolute; cursor: pointer; display: block; width: 100%; margin: 0; padding: 0 20px 0 10px; line-height: 32px; height: 32px; border-width: 0; background: none; -webkit-appearance: none; text-overflow: ellispsis; } .select select:focus { outline: none; } fieldset { display: block; border-width: 0; padding: 0; margin: 0 0 40px 0; } fieldset legend { display: block; font-family: "adelle", Georgia, serif; font-weight: 300; font-size: 36px; margin: 0 0 20px 0; } fieldset legend.small { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 24px; } form .group { margin: 0 0 30px 0; } form .group label { display: block; font-weight: bold; margin: 0 0 10px 0; } form .group label.radio { font-weight: normal; } form .group label.radio input { margin-right: 6.66666667px; } form .group.small input[type="text"], form .group.small input[type="password"], form .group.small textarea { width: 200px; } form .process { position: relative; margin-top: 20px; } form .process .button { font-size: 21px; padding: 8px 16px; } form .helper { margin: 10px 0 20px 0; color: #827b73; } form .input-error { color: #E73B3B; font-weight: bold; } form .form-split { *zoom: 1; } form .form-split:before, form .form-split:after { display: table; content: ""; line-height: 0; } form .form-split:after { clear: both; } form .form-split .split { float: left; width: 50%; } form .form-split .split .group { padding-left: 10px; margin-bottom: 30px; } form .form-split .split:first-child .group { padding-left: 0; padding-right: 10px; } form .form-split .split-1 { width: 40%; } form .form-split .split-2 { width: 60%; } form .form-split.form-split-3 .split { width: 33%; } form .form-split.form-split-3 .split .group { padding: 0 10px; } form .form-split.form-split-3 .split:first-child .group { padding-left: 0; } form .form-split.form-split-3 .split:last-child .group { padding-right: 0; } .has-prefix { *zoom: 1; } .has-prefix:before, .has-prefix:after { display: table; content: ""; line-height: 0; } .has-prefix:after { clear: both; } .has-prefix .prefix { position: absolute; margin: 1px; width: 34px; text-align: right; background-color: #ffffff; padding: 6.66666667px 10px; background-color: #f6f5f4; border-right: 1px solid #c8c2bb; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .has-prefix input { float: left; padding-left: 44px; } .search-wrapper { position: relative; } .search-wrapper i { position: absolute; z-index: 1; font-size: 18px; line-height: 34px; width: 28px; text-align: right; color: #827b73; } .search-wrapper input[type="text"] { margin: 15px 0; padding-left: 33px; padding-right: 13px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } dl.info { margin-bottom: 20px; } dl.info dt { color: #827b73; font-weight: 300; margin-bottom: 5px; } dl.info dd { margin-left: 0; } #search-form { margin-top: 8px; margin-bottom: 20px; } #search-form .search-wrapper { display: block; } #search-form .search-wrapper input[type="text"] { margin-top: 0; } .forgotten { position: absolute; top: 0; right: 0; } .tandcs { color: #827b73; margin-top: 0; } .form-indent { margin-left: 20px; } .form-related { position: relative; padding: 20px 20px 0 20px; background-color: #ffffff; border: 1px solid #c8c2bb; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .form-related .group:last-child { margin-bottom: 0; } .slug { font-weight: normal; color: #827b73; } .slug span { background-color: white; color: #302e2b; padding: 1px 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .slug:hover span { background-color: #427ddd; color: white; } .innerds a.slug { color: #827b73 !important; } .modal { display: none; background-color: #f6f5f4; width: 400px; padding: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .modal .modal-actions { *zoom: 1; margin: 20px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid #dfdbd7; } .modal .modal-actions:before, .modal .modal-actions:after { display: table; content: ""; line-height: 0; } .modal .modal-actions:after { clear: both; } .modal .modal-actions .button { float: left; margin: 10px 20px 0 0; } .modal h4 { margin-top: 0; } .modal.wide { width: 700px; } .modal.mid { width: 500px; } .button { display: inline-block; padding: 5px 10px; font-weight: bold; color: #ffffff; background-color: #75a9b1; text-decoration: none; border-width: 0; -webkit-box-shadow: 0 2px 0 #58929b; -moz-box-shadow: 0 2px 0 #58929b; box-shadow: 0 2px 0 #58929b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .button:hover { color: #ffffff; background-color: #58929b; -webkit-box-shadow: 0 2px 0 #45747b; -moz-box-shadow: 0 2px 0 #45747b; box-shadow: 0 2px 0 #45747b; } .button:active { position: relative; top: 1px; -webkit-box-shadow: 0 1px 0 #45747b; -moz-box-shadow: 0 1px 0 #45747b; box-shadow: 0 1px 0 #45747b; } .button.action { color: #ffffff; background-color: #48a55f; -webkit-box-shadow: 0 2px 0 #39814b; -moz-box-shadow: 0 2px 0 #39814b; box-shadow: 0 2px 0 #39814b; } .button.action:hover { color: #ffffff; background-color: #39814b; -webkit-box-shadow: 0 2px 0 #295e36; -moz-box-shadow: 0 2px 0 #295e36; box-shadow: 0 2px 0 #295e36; } .button.action:active { -webkit-box-shadow: 0 1px 0 #295e36; -moz-box-shadow: 0 1px 0 #295e36; box-shadow: 0 1px 0 #295e36; } .button.fail { color: #ffffff; background-color: #953838; -webkit-box-shadow: 0 2px 0 #702a2a; -moz-box-shadow: 0 2px 0 #702a2a; box-shadow: 0 2px 0 #702a2a; } .button.fail:hover { color: #ffffff; background-color: #702a2a; -webkit-box-shadow: 0 2px 0 #4b1c1c; -moz-box-shadow: 0 2px 0 #4b1c1c; box-shadow: 0 2px 0 #4b1c1c; } .button.disabled, .button.disabled:hover { cursor: default; color: #9b8f82; background-color: #c8c2bb; -webkit-box-shadow: 0 2px 0 #bdb5ad; -moz-box-shadow: 0 2px 0 #bdb5ad; box-shadow: 0 2px 0 #bdb5ad; } .button.disabled:active { -webkit-box-shadow: 0 2px 0 #bdb5ad; -moz-box-shadow: 0 2px 0 #bdb5ad; box-shadow: 0 2px 0 #bdb5ad; top: 0; } .button.small { padding: 0 5px 1px 5px; } .button.small [class^="icon-"], .button.small [class*=" icon-"] { font-size: 10px; line-height: 1; } .button.big { font-size: 21px; padding: 8px 16px; } .button.big [class^="icon-"], .button.big [class*=" icon-"] { font-size: 28px; margin-right: 10px; line-height: 1; width: 28px; vertical-align: -3px; } .button.help { margin-left: 2px; padding: 2px 6px; line-height: 1; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .button.rounded { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .button.link-button { font-weight: 300; color: #427ddd; padding-left: 5px; padding-right: 5px; background-color: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .button.link-button:hover { color: #302e2b; } .sub-button { font-weight: 300; } .illustration-icon { display: block; width: 72px; height: 72px; color: #f6f5f4; background-color: #75a9b1; text-align: center; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .illustration-icon i { font-size: 32px; line-height: 81.6px; } .illustration-icon.big { width: 144px; height: 144px; } .illustration-icon.big i { font-size: 64px; line-height: 163.2px; } .illustration-icon.green { background-color: #48a55f; } .illustration-icon.red { background-color: #953838; } .illustration-icon.trophy { color: white; background-color: #e4d97b; -webkit-box-shadow: 0 2px 0 #dbcd51; -moz-box-shadow: 0 2px 0 #dbcd51; box-shadow: 0 2px 0 #dbcd51; } .instruction { padding: 20px; margin-bottom: 20px; background: #283b4e; color: #bfc4ca; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 3px 0 #17212c; -moz-box-shadow: 0 3px 0 #17212c; box-shadow: 0 3px 0 #17212c; } .instruction h1, .instruction h2, .instruction a { color: white; } .instruction .close { float: right; padding: 5px 10px; color: #bfc4ca; background-color: #17212c; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .instruction .close:hover { color: white; background-color: #05080b; } .instruction-secondary { margin: 20px 0; padding: 20px; background-color: #eae8e5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .instruction-secondary h4 { margin: 0 0 10px 0; } .instruction-secondary p { margin: 10px 0; } .instruction-secondary.mini { padding: 13.33333333px; } .tick-list { margin: 0; padding: 0; list-style: none; } .tick-list li:before { font-family: FontAwesome; content: "\f00c"; margin-right: 10px; } .un-list { margin: 0; padding: 0; list-style: none; } .un-list li { margin-top: 5px; } .decision-stack { *zoom: 1; margin: 0; padding: 0; list-style: none; margin: 40px -10px; } .decision-stack:before, .decision-stack:after { display: table; content: ""; line-height: 0; } .decision-stack:after { clear: both; } .decision-stack li .item { position: relative; display: inline-block; padding: 10px 10px 10px 56px; color: #827b73; font-weight: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .decision-stack li .item strong { display: block; color: #67625b; } .decision-stack li .item .illustration-icon { position: absolute; left: 10px; width: 36px; height: 36px; margin-right: 10px; margin-bottom: 10px; } .decision-stack li .item .illustration-icon i { font-size: 14px; line-height: 36px; color: white; } .decision-stack a.item:hover { background-color: white; } .info-item { margin: 20px 0; padding: 20px; background-color: #f6f5f4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .info-item .title { font-size: 16px; } .info-item .meta { border-top-width: 0; margin-top: 20px; margin-bottom: 0; } .info-item-wrapper { background-color: #f6f5f4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .info-item-wrapper header { padding: 15px; border-bottom: 1px solid #eae8e5; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .info-item-wrapper header .avatar { margin-right: 5px; vertical-align: -3px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .info-item-wrapper header h4 { margin: 0; } .info-item-wrapper header p { margin: 5px 0 0 0; } .info-item-wrapper footer { text-align: center; padding: 10px 15px; border-top: 1px solid #eae8e5; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .info-item-wrapper footer a { font-weight: normal; } .info-item-wrapper footer a:hover { color: #302e2b; } .info-item-wrapper .info-item { padding: 15px; margin: 0; } .onboarding { background-position: 50% 50%; background-color: white; } .onboarding .inner { padding: 40px 10px; } .onboarding .how-it-works { margin: 0; padding: 0; list-style: none; *zoom: 1; } .onboarding .how-it-works:before, .onboarding .how-it-works:after { display: table; content: ""; line-height: 0; } .onboarding .how-it-works:after { clear: both; } .onboarding .how-it-works li { position: relative; float: left; width: 31%; margin-right: 2%; } .onboarding .how-it-works li .num { position: absolute; font-size: 24px; color: white; background-color: black; font-weight: bold; text-align: center; width: 50px; height: 50px; line-height: 50px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .onboarding .how-it-works li .icon-chevron-right { position: absolute; top: 84px; right: 40px; color: #dfdbd7; font-size: 32px; } .onboarding .action a.close { text-decoration: underline; font-weight: normal; } .onboarding .action a.button { margin-right: 10px; } .tooltip { position: absolute; z-index: 1000; display: none; color: #f6f5f4; background-color: #59554f; width: 250px; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .tooltip h3 { margin-bottom: 10px; } .tooltip h4 { margin: 0 0 6.66666667px 0; } .tooltip hr { border-top-color: #746e67; margin: 10px 0; } .tooltip p { margin: 6.66666667px 0 0 0; } .tooltip .faded { color: #a7a5a1; } .tooltip:after { content: " "; position: absolute; height: 0; width: 0; pointer-events: none; border: solid transparent; border-color: rgba(89, 85, 79, 0); border-width: 6px; } .tooltip.tip-bottom:after { border-bottom-color: #59554f; bottom: 100%; left: 50%; margin-left: -6px; } .tooltip.tip-top:after { border-top-color: #59554f; top: 100%; left: 50%; margin-left: -6px; } .tooltip.tip-left:after { border-left-color: #59554f; left: 100%; top: 50%; margin-top: -6px; } .tooltip.tip-right:after { border-right-color: #59554f; right: 100%; top: 50%; margin-top: -6px; } .tooltip.invert { color: #302e2b; background-color: #dfdbd7; } .tooltip.invert:after { border-color: rgba(223, 219, 215, 0); border-bottom-color: #dfdbd7; } .tooltip.lite { color: #302e2b; background-color: #ffffff; } .tooltip.lite.tip-bottom:after { border-bottom-color: #ffffff; } .tooltip.lite.tip-top:after { border-top-color: #ffffff; } .tooltip.lite.tip-left:after { border-left-color: #ffffff; } .tooltip.lite.tip-right:after { border-right-color: #ffffff; } .tooltip.wide { width: 350px; } .tooltip.small { width: 150px; } .tooltip.user { background-position: 50% 50%; background-size: cover; width: 220px; } .tooltip.user a { color: #f6f5f4; } .tooltip.user h3, .tooltip.user h4 { font-size: 14px; padding: 0; margin: 0; } .tooltip.user h3 { color: #bebbb6; margin-bottom: 10px; } .tooltip.user .avatar { position: absolute; } .tooltip.user .info { display: block; padding-left: 65px; min-height: 50px; margin-bottom: 10px; } .tooltip.user .info .subtitle { color: white; color: rgba(255, 255, 255, 0.75); font-size: 12px; font-style: italic; margin: 5px 0 0 0; font-weight: normal; } .tooltip.user .info:hover { color: #ffffff; } .tooltip.user .reputation { background-color: transparent; border-color: white; margin: 0; } .tooltip.user .reputation .label { color: black; background-color: white; } .tooltip.user .reputation .rating { color: white; color: rgba(255, 255, 255, 0.75); } .tooltip.user .reputation .stars .star { color: white; } .features { *zoom: 1; } .features:before, .features:after { display: table; content: ""; line-height: 0; } .features:after { clear: both; } .feature { float: left; text-align: center; margin: 0; width: 160px; padding: 20px; } .feature .icon { font-size: 80px; height: 155px; line-height: 175px; background-color: white; color: black; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .feature .image { width: 155px; height: 155px; -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; -webkit-box-shadow: 0 0 0 10px #ffffff; -moz-box-shadow: 0 0 0 10px #ffffff; box-shadow: 0 0 0 10px #ffffff; } .feature .image img { display: block; } .feature strong { display: block; margin-top: 20px; font-weight: normal; font-size: 16px; } .feature strong span { display: block; font-weight: bold; font-size: 18px; margin-bottom: 10px; } .feature.one .icon { color: white; background-color: #c64b40; } .feature.two .icon { color: white; background-color: #283b4e; } .feature.three .icon { color: white; background-color: #1d8e77; } .feature.four .icon { color: white; background-color: #ce580f; } .feature.five .icon { color: white; background-color: #2b7cae; } .feature.six .icon { color: white; background-color: #2b7cae; } .feature.seven .icon { color: white; background-color: #7e8c8d; } .social { margin: 20px 0; } .social .col { float: left; width: 50%; } .featured-audio { *zoom: 1; margin: 40px -20px 20px 0; } .featured-audio:before, .featured-audio:after { display: table; content: ""; line-height: 0; } .featured-audio:after { clear: both; } .featured-audio hr { float: left; width: 100%; clear: both; margin: 20px 0; border-top-width: 0; } .featured-audio .item { position: relative; float: left; width: 246px; margin-right: 20px; margin-bottom: 20px; background-color: white; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .featured-audio .item .playback { position: absolute; top: 0; left: 0; right: 0; height: 246px; color: white; } .featured-audio .item .playback .inside { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; text-align: center; background-color: #333; background-color: rgba(0, 0, 0, 0.5); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .featured-audio .item .playback .inside i { font-size: 28px; line-height: 60px; font-weight: normal; } .featured-audio .item .playback:hover { background-color: rgba(0, 0, 0, 0.2); } .featured-audio .item .playback:hover .inner { background-color: #000; } .featured-audio .item .playback.playing { -webkit-box-shadow: inset 0 0 0 5px #302e2b; -moz-box-shadow: inset 0 0 0 5px #302e2b; box-shadow: inset 0 0 0 5px #302e2b; } .featured-audio .item .artwork { display: block; } .featured-audio .item .details { padding: 10px; text-align: left; } .featured-audio .item .details .user { float: left; margin-right: 10px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .featured-audio .item .details p { color: #67625b; font-size: 14px; font-weight: 300; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .featured-audio .item .details p strong { color: #302e2b; } .featured-audio .item .details p a { color: #827b73; } .featured-audio .item .details .work-with { clear: both; margin-top: 10px; padding-top: 7px; text-align: center; border-top: 2px solid #f6f5f4; } .featured-audio .item .details .work-with a { font-family: "Proxima Nova", "proxima-nova"; font-weight: 600; text-transform: uppercase; color: #427ddd; } .featured-audio .item .details .work-with a:hover { color: #302e2b; } @media screen and (max-width: 960px) { .featured-audio { margin-left: 4px; } } @media screen and (max-width: 740px) { .featured-audio { margin: 20px 0; } .featured-audio .item { width: 48%; margin: 0 0 4% 0; } .featured-audio .item .playback { height: auto; bottom: 0; } .featured-audio .item .playback .inside { width: 32px; height: 32px; margin-top: -16px; margin-left: -16px; } .featured-audio .item .playback .inside i { font-size: 14px; line-height: 32px; } .featured-audio .item .artwork { width: 100%; } .featured-audio .item .details, .featured-audio .item hr { display: none; } .featured-audio .item:nth-child(2n) { margin-left: 4%; } } #nav { position: fixed; z-index: 1; background-color: #000; top: 0; left: 0; bottom: 0; width: 160px; } #nav .logo { display: block; height: 55px; background: transparent url("/images/logo.png") 14px 14px no-repeat; margin-bottom: 3px; } #nav .logo span { display: none; } #nav .open { display: none; } #nav ul { margin: 0; padding: 0; list-style: none; font-size: 16px; } #nav ul li a { display: block; padding: 6px 0 6px 15px; color: #AAA; } #nav ul li a:hover { color: white; border-left: 4px solid white; } #nav ul li.active a { background-color: #f6f5f4; color: black; border-left-width: 0; } #nav ul li.seperator { margin: 15px; height: 2px; background-color: #333; } @media screen and (max-width: 740px) { #nav { position: fixed !important; top: 0 !important; left: 0; right: 0; bottom: inherit; width: auto; height: 42px; z-index: 5; } #nav .logo { margin-bottom: 0; width: 110px; height: 42px; background-position: 50% 50%; } #nav .open { display: block; position: absolute; top: 0; right: 0; width: 42px; height: 42px; line-height: 42px; text-align: center; color: #DDD; } #nav ul { position: fixed; top: 0; right: -160px; bottom: 0; background-color: black; width: 160px; padding-top: 4px; } #nav, #nav ul { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .wrap, #intro { position: relative; left: 0; -webkit-transition: left 0.2s ease-in-out; -moz-transition: left 0.2s ease-in-out; -o-transition: left 0.2s ease-in-out; transition: left 0.2s ease-in-out; } .open-side-menu { overflow: hidden; } .open-side-menu #nav { left: -160px; right: 160px; } .open-side-menu #nav ul { right: 0; } .open-side-menu .wrap, .open-side-menu #intro { left: -160px; } } #promo-nav-modal { text-align: center; } #promo-nav-modal .split-left, #promo-nav-modal .split-right { float: left; width: 329px; } #promo-nav-modal .split-left { padding-right: 20px; } #promo-nav-modal .split-right { padding-left: 20px; border-left: 2px solid #c8c2bb; } #promo-nav-modal .illustration-icon { margin: 0 auto 20px auto; } #promo-nav-modal p:last-child { margin-bottom: 10px; } #audio-approval .audio { float: left; width: 440px; } #audio-approval .brief { float: left; width: 320px; margin-left: 20px; } #audio-approval .owner img { width: 26px; height: 26px; vertical-align: -4px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } #audio-approval .box { padding: 20px 20px 10px 20px; margin-bottom: 20px; background-color: #ffffff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #audio-approval .box h3 { margin-bottom: 10px; } #audio-approval .box p { margin: 0 0 10px 0; } #audio-approval .box p a { font-weight: normal; text-decoration: underline; } #audio-approval .box p a:hover { color: #1c4d9d; } #audio-approval .player-area { position: relative; padding-left: 100px; } #audio-approval .player-area .playback { position: absolute; top: 20px; left: 20px; } #audio-approval .actions .button { float: left; margin-right: 20px; } body { margin-top: 0; margin-bottom: 0; -webkit-font-smoothing: antialiased; } .content { margin-top: 20px; } .player { display: none; } .lead { font-weight: 300; font-size: 18px; } .wrap { width: 780px; padding-left: 160px; } .innerds { *zoom: 1; } .innerds:before, .innerds:after { display: table; content: ""; line-height: 0; } .innerds:after { clear: both; } .innerds .thin { margin: 0 40px; } .innerds footer { margin-top: 40px; padding: 40px 0; color: #4c4843; border-top: 4px solid #d4cec9; font-size: 16px; } .innerds footer .illustration-icon { margin-right: 40px; } .innerds footer .sub-button { margin-left: 20px; font-size: 18px; } .innerds a:hover { color: black; } .innerds a.slug { color: #302e2b; } .innerds a.slug i { color: #427ddd; } header.promo { margin-bottom: 40px; padding: 60px 0; color: #FFF; background-size: cover; text-align: center; } header.promo h1 { margin: 0 0 20px 0; font-size: 56px; } header.promo .lead { font-size: 24px; margin: 0; } header.promo .faded { color: #FFF; color: rgba(255, 255, 255, 0.5); } header.promo hr { border-top-color: rgba(255, 255, 255, 0.25); margin: 40px 80px; } header.promo .illustration-icon { display: inline-block; margin-bottom: 40px; width: 100px; height: 100px; background-color: white; } header.promo .illustration-icon i { font-size: 48px; line-height: 112px; } header.promo.default { background-color: #262a2a; background-image: url("/images/homepage/trees.jpg"); } header.promo.default .illustration-icon { color: #262a2a; } header.promo.inspiration { background-color: #c64b40; background-image: url("/images/homepage/board.jpg"); } header.promo.inspiration .illustration-icon { color: #c64b40; } header.promo.testimonials { background-color: #283b4e; background-image: url("/images/homepage/table.jpg"); } header.promo.testimonials .illustration-icon { color: #283b4e; } header.promo.tour { background-color: #3f88b6; background-image: url("/images/homepage/stairs.jpg"); } header.promo.tour .illustration-icon { color: #3f88b6; } header.promo.consultation { background-color: #1d8e77; background-image: url("/images/homepage/blackboard.jpg"); } header.promo.consultation .illustration-icon { color: #1d8e77; } header.promo.success { background-color: #48a55f; } header.promo.success .illustration-icon { color: #48a55f; } footer.promo { background-color: white; margin-top: 40px; } footer.promo .wrap { *zoom: 1; } footer.promo .wrap:before, footer.promo .wrap:after { display: table; content: ""; line-height: 0; } footer.promo .wrap:after { clear: both; } footer.promo .wrap .col { margin: 0; padding: 0; list-style: none; float: left; width: 24%; margin: 0 0 0 1%; padding: 40px 0; color: #67625b; } footer.promo .wrap .col li { margin-bottom: 2px; } footer.promo .wrap .col li h4 { margin: 0 0 20px 0; } footer.promo .wrap .col li a { color: #6d9be5; font-weight: normal; } footer.promo .wrap .col li a i { display: inline-block; width: 16px; } footer.promo .wrap .col li a:hover { color: black; } footer.promo .wrap .col.first { width: 50%; margin-left: 0; } footer.promo .wrap .col.first .sub-button { font-weight: normal; margin-left: 10px; color: #6d9be5; } footer.promo .wrap .col.first .sub-button:hover { color: black; } footer.footer { position: inherit; height: auto; } footer.footer a { color: #827b73; } .about-avatar { border: 10px solid #ffffff; -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; } .team { margin: 0; padding: 0; list-style: none; *zoom: 1; } .team:before, .team:after { display: table; content: ""; line-height: 0; } .team:after { clear: both; } .team li { float: left; width: 33.333333%; text-align: center; } .team li h3, .team li p { margin: 5px; } .testimonials { *zoom: 1; } .testimonials:before, .testimonials:after { display: table; content: ""; line-height: 0; } .testimonials:after { clear: both; } .testimonials blockquote { float: left; width: 47%; text-align: center; font-size: 21px; font-weight: 300; margin: 0; padding-bottom: 40px; } .testimonials blockquote img { margin-bottom: 20px; width: 150px; } .testimonials blockquote p { margin: 0 0 10px 0; } .testimonials blockquote cite { display: block; font-size: 14px; font-weight: normal; font-style: normal; margin: 0; } .testimonials blockquote cite h3 { margin-bottom: 5px; } .testimonials blockquote.one { clear: left; margin-right: 3%; } .testimonials blockquote.two { margin-left: 3%; } #example-briefs { *zoom: 1; } #example-briefs:before, #example-briefs:after { display: table; content: ""; line-height: 0; } #example-briefs:after { clear: both; } #example-briefs .brief { float: left; width: 48%; margin: 20px 0; } #example-briefs .brief h3 { margin: 0 0 10px 0; } #example-briefs .brief .description { margin: 0 0 10px 0; } #example-briefs .brief .meta { margin: 0 0 10px 0; } #example-briefs .brief .meta em { color: #827b73; } #example-briefs .brief.one { margin-right: 2%; clear: left; } #example-briefs .brief.two { margin-left: 2%; } #social-beg { text-align: center; margin: 40px 0; } #social-beg .fb-like, #social-beg .twitter-follow-button { display: inline-block; margin: 0 10px; } #social-beg .twitter-follow-button { position: relative; top: 4px; } @media screen and (max-width: 1000px) { .wrap { width: 520px; } .innerds .thin { margin: 0; } .innerds footer .illustration-icon { display: none; } header.promo h1 { font-size: 42px; } header.promo .lead { font-size: 21px; } footer.promo .wrap .col { width: 26%; margin-left: 2%; } footer.promo .wrap .col.first { width: 44%; } footer.promo .wrap .col.first br { display: none; } footer.promo .wrap .col.first .sub-button { display: inline-block; margin: 10px 0 0 0; white-space: nowrap; } } @media screen and (max-width: 740px) { body { margin-top: 42px; } .wrap { width: 100%; padding-left: 0; } .inner { padding: 0 !important; } header.homepage .logo, header.homepage .login { display: none !important; } header.promo { padding: 20px; text-align: left; } header.promo h1 { font-size: 32px; } header.promo .lead { font-size: 18px; } .innerds { margin: 0 20px; } .innerds footer { padding: 20px 0; } .innerds footer .sub-button { display: block; margin: 20px 0 0 0; } .team li { float: none; width: auto; margin: 20px 0; } .testimonials blockquote { float: none; width: 100%; } .testimonials blockquote.one { margin-right: 0; } .testimonials blockquote.two { margin-left: 0; } .testimonials blockquote img { float: none; margin-right: 0; } #example-briefs .brief { float: none; width: 100%; margin: 40px 0 !important; } footer.promo .wrap { padding: 10px; width: auto; } footer.promo .wrap .col { float: none; width: auto !important; padding: 10px; margin: 0; } footer.promo .wrap .col.first br { display: none; } footer.promo .wrap .col.first .sub-button { display: block; margin-left: 0 !important; margin-top: 10px; } .footer .inner { padding-left: 20px !important; padding-right: 20px !important; } #promo-nav-modal { width: 100%; text-align: left; } #promo-nav-modal .illustration-icon { display: none; } #promo-nav-modal .split-left, #promo-nav-modal .split-right { float: none; width: auto; padding: 20px; } #promo-nav-modal .split-right { border-left-width: 0; } } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #nav .logo { background-image: url("/images/logo@2x.png"); background-size: auto 35px; } }