@charset "UTF-8";
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th{margin:0;padding:0;border:0;outline:0;font-size:100%;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}@font-face{font-family:'Open Sans';src:url('//includes.okccdn.com/flat/fonts/OpenSans/Light/OpenSans-Light-webfont.eot');src:url('//includes.okccdn.com/flat/fonts/OpenSans/Light/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Light/OpenSans-Light-webfont.woff') format('woff'),url('//includes.okccdn.com/flat/fonts/OpenSans/Light/OpenSans-Light-webfont.ttf') format('truetype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Light/OpenSans-Light-webfont.svg#open_sanslight') format('svg');font-weight:300;font-style:normal}@font-face{font-family:'Open Sans';src:url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.eot');src:url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.woff') format('woff'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.ttf') format('truetype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');font-weight:300;font-style:italic}@font-face{font-family:'Open Sans';src:url('//includes.okccdn.com/flat/fonts/OpenSans/Regular/OpenSans-Regular-webfont.eot');src:url('//includes.okccdn.com/flat/fonts/OpenSans/Regular/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Regular/OpenSans-Regular-webfont.woff') format('woff'),url('//includes.okccdn.com/flat/fonts/OpenSans/Regular/OpenSans-Regular-webfont.ttf') format('truetype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Regular/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');font-weight:400;font-style:normal}@font-face{font-family:'Open Sans';src:url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.eot');src:url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.woff') format('woff'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.ttf') format('truetype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');font-weight:400;font-style:italic}@font-face{font-family:'Open Sans';src:url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.eot');src:url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.woff') format('woff'),url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.ttf') format('truetype'),url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');font-weight:600;font-style:normal}@font-face{font-family:'Open Sans';src:url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.eot');src:url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.woff') format('woff'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.ttf') format('truetype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');font-weight:600;font-style:italic}@font-face{font-family:'Open Sans';src:url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.eot');src:url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.woff') format('woff'),url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.ttf') format('truetype'),url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');font-weight:700;font-style:normal}@font-face{font-family:'Open Sans';src:url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.eot');src:url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.woff') format('woff'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.ttf') format('truetype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');font-weight:700;font-style:italic}@font-face{font-family:'Open Sans';src:url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.eot');src:url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.woff') format('woff'),url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.ttf') format('truetype'),url('//includes.okccdn.com/flat/fonts/OpenSans/SemiBold/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');font-weight:800;font-style:normal}@font-face{font-family:'Open Sans';src:url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.eot');src:url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.woff') format('woff'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.ttf') format('truetype'),url('//includes.okccdn.com/flat/fonts/OpenSans/Italic/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');font-weight:800;font-style:italic}@font-face{font-family:"ok-icon";src:url("ok-icon.eot");src:url("//includes.okccdn.com/flat/fonts/ok-icon/2015-12-16-a/ok-icon.eot?#iefix") format("embedded-opentype"),url("//includes.okccdn.com/flat/fonts/ok-icon/2015-12-16-a/ok-icon.woff") format("woff"),url("//includes.okccdn.com/flat/fonts/ok-icon/2015-12-16-a/ok-icon.ttf") format("truetype"),url("//includes.okccdn.com/flat/fonts/ok-icon/2015-12-16-a/ok-icon.svg#1408557315") format("svg");font-weight:normal;font-style:normal}[data-icon]:before{font-family:"ok-icon" !important;content:attr(data-icon);font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[class^="i-"]:before,[class*=" i-"]:before{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.okicon:before{line-height:inherit !important}.i-instagram:before{content:"i"}.i-thumb-no:before{content:"N"}.i-list:before{content:"="}.i-gear:before{content:"g"}.i-mobi-checkmark:before{content:"\005C"}.i-arrow-triangle-up:before{content:"W"}.i-quickmatch-star:before{content:"S"}.i-mobi-chevron-down:before{content:"{"}.i-likes:before{content:"1"}.i-arrow-triangle-down:before{content:"w"}.i-back-to-top:before{content:"B"}.i-form-circle:before{content:"o"}.i-star:before{content:"s"}.i-messages:before{content:"m"}.i-close-circle:before{content:"X"}.i-mobi-chevron-left:before{content:"["}.i-boost:before{content:"b"}.i-photo-stack:before{content:"j"}.i-lock-closed:before{content:"l"}.i-more-arrow:before{content:"2"}.i-replied:before{content:"R"}.i-ellipsis-v:before{content:"E"}.i-form-square:before{content:"n"}.i-globe:before{content:"3"}.i-arrow-triangle-right:before{content:"A"}.i-camera:before{content:"k"}.i-arrow-left:before{content:"<"}.i-refresh:before{content:"r"}.i-link:before{content:"#"}.i-tag:before{content:"5"}.i-arrow-down:before{content:"v"}.i-ellipsis-h:before{content:"e"}.i-events:before{content:"C"}.i-pc:before{content:"Q"}.i-close:before{content:"x"}.i-maximize:before{content:"+"}.i-mobi-chevron-up:before{content:"}"}.i-trash:before{content:"T"}.i-report:before{content:"P"}.i-arrow-right:before{content:">"}.i-browse:before{content:"h"}.i-pencil:before{content:"p"}.i-arrow-up:before{content:"^"}.i-dropbox:before{content:"d"}.i-visitors:before{content:"V"}.i-arrow-triangle-left:before{content:"a"}.i-okc-app-icon:before{content:"O"}.i-checkmark:before{content:"c"}.i-mobi-chevron-right:before{content:"]"}.i-twitter:before{content:"t"}.i-facebook-inverted:before{content:"F"}.i-magnifier:before{content:"q"}.i-alert:before{content:"!"}.i-star-mutual:before{content:"M"}.i-facebook:before{content:"f"}.i-thumb-yes:before{content:"Y"}.i-lock-open:before{content:"L"}.i-less-arrow:before{content:"@"}.i-id-badge:before{content:"4"}.i-minimize:before{content:"-"}@charset "UTF-8";#nav-boost-intro-popover .contents{background-size:115px auto}#boost_purchase_modal .boostcontent .boosticon,#boost_purchase_modal.five_x_more .boostcontent .boosticon,#boost_purchase_modal.fifteen_minutes .boostcontent .boosticon{background-size:216px auto}body{background:#104da1}@-webkit-keyframes specialmode-bg{0%{background-color:#104da1}25%{background-color:#ffe36c}75%{background-color:#ea1c53}100%{background-color:#104da1}}@-moz-keyframes specialmode-bg{0%{background-color:#104da1}25%{background-color:#ffe36c}75%{background-color:#ea1c53}100%{background-color:#104da1}}@keyframes specialmode-bg{0%{background-color:#104da1}25%{background-color:#ffe36c}75%{background-color:#ea1c53}100%{background-color:#104da1}}@-webkit-keyframes specialmode-shadow{0%{box-shadow:0 0 0 2px #104da1}25%{box-shadow:0 0 0 2px #ffe36c}75%{box-shadow:0 0 0 2px #ea1c53}100%{box-shadow:0 0 0 2px #104da1}}@-moz-keyframes specialmode-shadow{0%{box-shadow:0 0 0 2px #104da1}25%{box-shadow:0 0 0 2px #ffe36c}75%{box-shadow:0 0 0 2px #ea1c53}100%{box-shadow:0 0 0 2px #104da1}}@keyframes specialmode-shadow{0%{box-shadow:0 0 0 2px #104da1}25%{box-shadow:0 0 0 2px #ffe36c}75%{box-shadow:0 0 0 2px #ea1c53}100%{box-shadow:0 0 0 2px #104da1}}body.specialmode,body.specialmode #navigation{-webkit-animation:specialmode-bg 800ms linear 0s infinite;-moz-animation:specialmode-bg 800ms linear 0s infinite;animation:specialmode-bg 800ms linear 0s infinite}body.specialmode #navigation .nav-notifications .badge{-webkit-animation:specialmode-shadow 800ms linear 0s infinite;-moz-animation:specialmode-shadow 800ms linear 0s infinite;animation:specialmode-shadow 800ms linear 0s infinite}body.mac.webkit *{text-rendering:optimizeLegibility}body,input,button,textarea{font-family:'Open Sans',sans-serif;font-weight:normal;color:#5e6573;font-size:15px;line-height:22px}::selection{color:#fff !important;background-color:#9dbaf2 !important}::-moz-selection{color:#fff;background-color:#9dbaf2 !important}strong{font-weight:600;font-family:'Open Sans',sans-serif}a{display:inline;text-decoration:none;outline:none;color:#3260c7}a:hover{color:#4c7bd9}a:active{color:#9dbaf2}h1,h2,h3,h4,h5,h6{font-weight:600;font-family:'Open Sans',sans-serif}h2{padding-bottom:14px;color:#474d59;font-weight:600;font-size:18px;line-height:14px;font-weight:600;font-family:'Open Sans',sans-serif}span.pretty_print{font-family:"courier new";font-size:13px}span.print_block{display:block;padding:0 0 0 32px}.hidden{display:none !important}.opacity_20{opacity:0.2}.opacity_40{opacity:0.4}.opacity_50{opacity:0.5}.opacity_60{opacity:0.6}.opacity_80{opacity:0.8}ul{list-style:none}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.monolith{margin-left:30px;margin-right:30px}.page-section{width:940px;margin:0 auto}.page-left{width:525px;float:left}.page-right{width:300px;float:right}.page-right .page-right-block{margin-bottom:50px}.page-right .page-right-block .okad{margin:0;padding:0}.page-right .page-right-block.grayaside + .grayaside{margin-top:-40px}.page-right .page-right-block.upgrade_ad + *{margin-top:-30px}body.fullwidth #page,body.fullwidth #navigation,body.fullwidth #leaderboard_container{min-width:910px}body.fullwidth #page{padding-top:65px;width:100%}body.fullwidth #page #main_content{background:#fafbfd;border-radius:0;padding-bottom:0}body.fullwidth #page .page-restrict{margin:0 auto;max-width:1060px;padding-left:60px;padding-right:60px}@media (max-width:1000px){body.fullwidth #page .page-restrict{max-width:1000px;padding-left:30px;padding-right:30px}}body.fullwidth #page .page-section{width:100%}body.fullwidth #page .page-content{width:100%}body.fullwidth #page .page-featured{color:#f3f5f9;background-color:#104da1;padding-bottom:25px;padding-top:50px}body.fullwidth #page .page-content{padding-bottom:50px;padding-top:50px;position:relative}body.fullwidth #page .page-content::after{clear:both;content:"";display:table}body.fullwidth #page .page-main,body.fullwidth #page .page-aside{float:left}body.fullwidth #page .page-main{padding-left:0;padding-right:60px;width:-moz-calc(100% - 300px);width:-webkit-calc(100% - 300px);width:calc(100% - 300px)}@media (max-width:1000px){body.fullwidth #page .page-main{padding-right:30px}}body.fullwidth #page .page-aside{width:300px}body.fullwidth #page .page-aside-block{margin-bottom:57px}body.fullwidth #page .page-aside ~ .page-main{padding-left:60px;padding-right:0}body.fullwidth #page footer.page-section{background-color:#104da1;padding:20px 0}body.fullwidth #page footer.page-section #footer{margin:0 auto;max-width:940px;padding-left:60px;padding-right:60px;padding-top:0;padding-bottom:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}body.fullwidth #page footer.page-section #footer_nav{padding:0;width:-moz-calc(100% - 130px);width:-webkit-calc(100% - 130px);width:calc(100% - 130px)}body.fullwidth #page footer.page-section #footer_nav li{display:inline-block;float:none}body.fullwidth #page footer.page-section #footer #copyright{float:none;padding:0}body.fullwidth #page footer.page-section #footer::after{content:none}body.fullwidth.boost-shown #page .page-left-inner{min-width:auto}article,aside,details,dialog,figure,header,footer,main,nav,section,summary{display:block}#global_js_errors{height:0;overflow:hidden}.clearfix:after{content:"";display:table;clear:both}font[color="red"]{display:none}.rollingnumber{display:block;overflow:hidden;position:relative}.rollingnumber .comma,.rollingnumber .digit{position:absolute;display:block;-webkit-transition:margin 0s;-moz-transition:margin 0s;transition:margin 0s}.rollingnumber .digit .prev,.rollingnumber .digit .curr,.rollingnumber .digit .next{display:block}#navigation{height:66px;background:#104da1;border-bottom:1px solid rgba(255,255,255,0.1);position:absolute;top:0;left:0;right:0;z-index:90000}#navigation .nav-left > *,#navigation .nav-right > *{float:left}#navigation .nav-left,#navigation .nav-right{position:absolute}#navigation .nav-left{left:0;padding-left:15px}#navigation .nav-right{right:0;padding-right:18px;background:#104da1;box-shadow:-15px 0 10px -5px #104da1}#navigation.fixed{position:fixed}body.okc2014_onboarding #navigation,body.okc2014_onboarding .nav-user-menu{z-index:92002}body.okc2014_onboarding #nav-notifications-tooltip{z-index:92003}#logo a{position:relative;display:block;overflow:hidden;height:65px;padding-top:15px;padding-right:12px;padding-left:15px}#logo a .icon{display:block;width:60px;height:41px;background-image:url(//cdn.okccdn.com/media/img/sprites/okc2014/okc2014_e56373.png);background-repeat:no-repeat;display:block;width:60px;height:41px;background-position:0px -37px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2){#logo a .icon{background-image:url('//cdn.okccdn.com/media/img/sprites/okc2014/okc2014_e56373@2x.png');-webkit-background-size:208px 128px;-moz-background-size:208px 128px;background-size:208px 128px}}#logo a .text{position:absolute;display:block;text-indent:-9999px}.nav-item li{float:left}.nav-item a{position:relative;display:block;color:#d6e1f9}.nav-item a:hover{color:#fff}.nav-item a:active .text,.nav-item a:active .glyph{opacity:.5}.logged-out-tagline{margin-left:10px;font-size:16px;line-height:65px;color:#d5e0f8}.nav-links a{padding:4px 23px 0;font-size:16px;line-height:61px}.nav-notifications{margin-right:-3px}.nav-notifications a{color:#9dbaf2;position:relative;width:62px;height:60px}.nav-notifications a:hover{color:#d5e0f8}.nav-notifications a .text,.nav-notifications a .glyph,.nav-notifications a .okicon{display:block}.nav-notifications a .text{position:absolute;top:0;text-indent:-9999px}.nav-notifications a .glyph{padding:7px 6px}.nav-notifications a .okicon{position:relative;width:50px;height:50px;line-height:50px;font-size:28px;text-align:center}.nav-notifications a .okicon.i-visitors{font-size:28px;left:-4px;top:1px}.nav-notifications a .okicon.i-likes{font-size:35px;left:-3px;top:1px}.nav-notifications a .okicon.i-messages{font-size:29px;top:3px;left:-1px}.nav-notifications .badge{position:absolute;top:11px;left:34px;padding-top:4px;padding-left:6px;padding-right:6px;height:22px;border-radius:11px;min-width:22px;color:#fff;background:#4c7bd9;font-family:Helvetica,Arial,sans-serif;text-align:center;box-shadow:0 0 0 2px #104da1;font-size:12px;line-height:normal;-webkit-transition:background 100ms ease-in,color 100ms ease-in;-moz-transition:background 100ms ease-in,color 100ms ease-in;transition:background 100ms ease-in,color 100ms ease-in}body.firefox .nav-notifications .badge{padding-top:6px}body.windows.ie7 .nav-notifications .badge,body.windows.ie8 .nav-notifications .badge,body.windows.ie9 .nav-notifications .badge,body.windows.ie10 .nav-notifications .badge,body.windows.ie11 .nav-notifications .badge,body.windows.safari .nav-notifications .badge{padding-top:5px}.nav-notifications .badge.pink{background:#fb674e}.nav-notifications .badge.entering{background:#ea1c53;-webkit-animation:pop-open 250ms 1;-moz-animation:pop-open 250ms 1;animation:pop-open 250ms 1}.nav-notifications .badge.incrementing{background:#ea1c53;-webkit-animation:pulse 250ms 1;-moz-animation:pulse 250ms 1;animation:pulse 250ms 1}.nav-notifications li.locked a,.nav-notifications li.locked a:hover{pointer-events:none}.nav-user{float:left;position:relative}.nav-user.nav-user-menu-shown .nav-user-menu{opacity:1;visibility:visible;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:opacity 200ms ease,-webkit-transform 150ms ease;-moz-transition:opacity 200ms ease,-moz-transform 150ms ease;transition:opacity 200ms ease,transform 150ms ease}.nav-user-image{height:60px;position:relative;display:block;padding:13px 12px 0}.nav-user-image .text{position:absolute;top:-500px}.nav-user-image .nav-user-image-thumb{border-radius:20px;overflow:hidden;width:40px;height:40px;position:relative;-webkit-transition:box-shadow 100ms ease;-moz-transition:box-shadow 100ms ease;transition:box-shadow 100ms ease}.nav-user-image .nav-user-image-thumb,.nav-user-image .nav-user-image-thumb img{display:block}.nav-user-image .nav-user-image-thumb img{width:42px;height:42px;margin-left:-1px;margin-top:-1px}.nav-user-menu{position:absolute;top:71px;right:2px;background:#fff;width:200px;border-radius:2px;z-index:91000;box-shadow:0 0 0 1px rgba(0,17,53,0.16),0 0 5px 0 rgba(0,17,53,0.16);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);opacity:0;visibility:hidden;-webkit-transform:scale(0.97);-moz-transform:scale(0.97);-ms-transform:scale(0.97);-o-transform:scale(0.97);transform:scale(0.97);-webkit-transform-origin:178px 0;-moz-transform-origin:178px 0;-ms-transform-origin:178px 0;-o-transform-origin:178px 0;transform-origin:178px 0;-webkit-transition:opacity 100ms ease,-webkit-transform 100ms ease,visibility 0ms 100ms ease;-moz-transition:opacity 100ms ease,-moz-transform 100ms ease,visibility 0ms 100ms ease;transition:opacity 100ms ease,transform 100ms ease,visibility 0ms 100ms ease}.nav-user-menu:before{content:"";position:absolute;right:22px;top:-16px;height:0;width:0;border-top:8px solid transparent;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #fff;-webkit-filter:drop-shadow(0 -1px 0 rgba(0,17,53,0.16));-moz-filter:drop-shadow(0 -1px 0 rgba(0,17,53,0.16));-ms-filter:drop-shadow(0 -1px 0 rgba(0,17,53,0.16));-o-filter:drop-shadow(0 -1px 0 rgba(0,17,53,0.16));filter:drop-shadow(0 -1px 0 rgba(0,17,53,0.16))}.nav-user-menu li:after{content:"";display:table;clear:both}.nav-user-menu li:before{content:" ";display:block;position:relative;margin:0 15px;height:1px;background:#ebedf2}.nav-user-menu li .nav-user-menu-item{display:block;padding:15px 21px;color:#5e6573;min-height:20px;font-size:15px;line-height:21px}.nav-user-menu li .nav-user-menu-item:hover{color:#4c7bd9}.nav-user-menu li:first-child:before{display:none}.nav-user-menu li:last-child .nav-user-menu-item{min-height:22px;line-height:19px}.nav-user-menu li.upgrade:before{display:none}.nav-user-menu li.upgrade .nav-user-menu-item{background:#00d280;color:#fff;border-bottom-left-radius:2px;border-bottom-right-radius:2px}.nav-user-menu li.upgrade .nav-user-menu-item:hover{background:#48e588;color:#fff}.nav-addphoto{padding:11.5px;padding-left:18px}.nav-addphoto button.flatbutton{font-size:14px;width:86px;text-align:center}body.lang-de .nav-addphoto button.flatbutton{width:140px}.nav-signup{margin-right:12px}.nav-signup .flatbutton{float:left;margin-left:10px;margin-top:11.5px;width:100px;height:40px;border-radius:3px}.nav-signup .flatbutton.silver{border-color:rgba(255,255,255,0.35)}.nav-signup .flatbutton.silver,.nav-signup .flatbutton.silver:hover{color:#fff}#page,#leaderboard_container,#navigation{min-width:940px;-webkit-transition-property:padding-right,min-width;-moz-transition-property:padding-right,min-width;transition-property:padding-right,min-width;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}#navigation .nav-right{-webkit-transition:right 150ms ease;-moz-transition:right 150ms ease;transition:right 150ms ease}body.lang-de #page{min-width:1090px}body.boost-shown #page,body.boost-shown #navigation{min-width:1160px;padding-right:220px}body.boost-shown #navigation .nav-right{right:220px}body.boost-shown.lang-de #page{min-width:1310px}body.boost-shown #action_bar{margin-left:-580px}body.boost-shown .nav-boost{width:0}body.boost-shown .panel-boost{width:220px;height:100vh;overflow:visible}.nav-boost{-webkit-transition:width 150ms ease;-moz-transition:width 150ms ease;transition:width 150ms ease}.nav-boost .nav-boost-container{position:relative;padding:11.5px;padding-left:18px}.nav-boost button.flatbutton{font-size:14px;width:86px;text-align:center}.nav-boost button.flatbutton .okicon{font-size:20px;vertical-align:middle;margin-left:-3px}.nav-boost button.flatbutton.rushhour{box-shadow:0 0 14px #30b7c4;background-color:#76dadd;background-image:url('//cdn.okccdn.com/media/img/icons/usernav/rush_hour_bg.gif')}#boost_purchase_modal{padding:0;background:white;width:720px;height:422px;border:0;overflow:hidden;border-radius:8px}#boost_purchase_modal h2.title{margin-bottom:20px}#boost_purchase_modal .content{margin:0}#boost_purchase_modal .boostcontent{position:relative;overflow:hidden;float:left;width:362px;height:422px;background:#4c7bd9;color:white}#boost_purchase_modal .boostcontent .boosticon{margin:38px 0 17px 65px;width:216px;height:195px;background-image:url('//cdn.okccdn.com/media/img/illustrationsV3/large/1x/boost_drk.png');background-position:center bottom;background-repeat:no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#boost_purchase_modal .boostcontent .boosticon{background-image:url('//cdn.okccdn.com/media/img/illustrationsV3/large/2x/boost_drk.png')}}#boost_purchase_modal .boostcontent h2{color:white;font-size:24px;line-height:34px;font-weight:300;padding-bottom:16px}#boost_purchase_modal .boostcontent p{padding-left:32px;padding-right:32px;font-size:16px;line-height:24px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}#boost_purchase_modal .boostinfo{width:380px}#boost_purchase_modal .selectboosts{width:295px;margin:30px 0 0 32px;display:block;float:left}#boost_purchase_modal .selectboosts .boost-select-form .boost-select-list{text-align:left}#boost_purchase_modal .selectboosts .boost-select-form .boost-select-list label{display:block;padding:32px 0;padding-left:60px;background:#fff;margin:0;color:#949aa6;border-radius:4px;border-bottom:1px solid #f3f5f9;font-size:16px;line-height:24px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}#boost_purchase_modal .selectboosts .boost-select-form .boost-select-list label strong{color:#474d59}#boost_purchase_modal .selectboosts .boost-select-form .boost-select-list label .icon{top:50%;margin-top:-9.5px;left:21px}#boost_purchase_modal .selectboosts .boost-select-form .boost-select-list label.checked{box-shadow:inset 0 0 0 2px #9dbaf2}#boost_purchase_modal .selectboosts .boost-select-form .boost-buy{width:180px;margin-top:26px;margin-bottom:14px}#boost_purchase_modal .selectboosts .boost-select-form .boost-cancel{display:block;text-align:center;color:#949aa6}#boost_purchase_modal .selectboosts .boost-select-form .boost-cancel:hover{color:#aeb4bf}#boost_purchase_modal.five_x_more,#boost_purchase_modal.fifteen_minutes{width:694px;height:410px}#boost_purchase_modal.five_x_more .boostcontent,#boost_purchase_modal.fifteen_minutes .boostcontent{height:410px;width:404px}#boost_purchase_modal.five_x_more .boostcontent .boosticon,#boost_purchase_modal.fifteen_minutes .boostcontent .boosticon{margin:31px 0 22px 89px;width:208px;height:178px;background-size:contain;background-image:url('//cdn.okccdn.com/media/img/illustrationsV3/large/1x/boost_drk.png');background-position:center bottom;background-repeat:no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#boost_purchase_modal.five_x_more .boostcontent .boosticon,#boost_purchase_modal.fifteen_minutes .boostcontent .boosticon{background-image:url('//cdn.okccdn.com/media/img/illustrationsV3/large/2x/boost_drk.png')}}#boost_purchase_modal.five_x_more .boostcontent h2,#boost_purchase_modal.fifteen_minutes .boostcontent h2{line-height:30px;margin-bottom:9px}#boost_purchase_modal.five_x_more .selectboosts,#boost_purchase_modal.fifteen_minutes .selectboosts{width:240px;margin:30px 0 0 25px}#boost_purchase_modal.fifteen_minutes .boostcontent .boosticon{margin:45px 0 35px 89px}#boost_purchase_modal.selectboosts--withsubs{width:720px;height:472px}#boost_purchase_modal.selectboosts--withsubs:after{content:"";display:table;clear:both}#boost_purchase_modal.selectboosts--withsubs .boostcontent{width:363px;height:472px}#boost_purchase_modal.selectboosts--withsubs .boostcontent h2{font-weight:400;padding-bottom:18px}body.lang-de #boost_purchase_modal.selectboosts--withsubs,body.lang-de #boost_purchase_modal.selectboosts--withsubs .boostcontent{height:510px}#boost_purchase_modal.selectboosts--withsubs .boosticon.boosticon-pkgs{margin-top:44px;margin-left:62px;margin-bottom:40px}#boost_purchase_modal.selectboosts--withsubs .boosticon.boosticon-subs{margin:44px 0 40px 57px;width:221px;height:195px;background:url("//cdn.okccdn.com/media/img/boostsubs/1x/illustration-large.png") top left no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#boost_purchase_modal.selectboosts--withsubs .boosticon.boosticon-subs{background-image:url("//cdn.okccdn.com/media/img/boostsubs/2x/illustration-large.png");background-size:221px auto}}#boost_purchase_modal.selectboosts--withsubs .selectboosts-type{display:none;position:relative;height:42px;border:1px solid #ccd0d9;width:294px;border-radius:2px;overflow:hidden;margin-bottom:30px}#boost_purchase_modal.selectboosts--withsubs .selectboosts-type:after{content:"";display:table;clear:both}#boost_purchase_modal.selectboosts--withsubs .selectboosts-type .selectboosts-type-option{background:transparent;border:0;padding:0;cursor:pointer;margin:0;position:absolute;top:0;width:146px;line-height:40px}#boost_purchase_modal.selectboosts--withsubs .selectboosts-type .selectboosts-type-option.selectboosts-type-pkgs{left:0;border-right:1px solid #ccd0d9}#boost_purchase_modal.selectboosts--withsubs .selectboosts-type .selectboosts-type-option.selectboosts-type-subs{right:0}#boost_purchase_modal.selectboosts--withsubs.selectboosts--showsubpromo .selectboosts .boost-select-form .boost-select-list label{padding-top:26px;padding-bottom:26px}#boost_purchase_modal.selectboosts--withsubs.selectboosts--showsubpromo .selectboosts-type{display:block}#boost_purchase_modal.selectboosts--withsubs.selectboosts--subs .selectboosts-type-subs,#boost_purchase_modal.selectboosts--withsubs.selectboosts--pkgs .selectboosts-type-pkgs{color:#5e6573}#boost_purchase_modal.selectboosts--withsubs.selectboosts--subs .selectboosts-type-subs:hover,#boost_purchase_modal.selectboosts--withsubs.selectboosts--pkgs .selectboosts-type-pkgs:hover{background:inherit;color:#5e6573;cursor:default}#boost_purchase_modal.selectboosts--withsubs.selectboosts--subs .selectboosts-type-pkgs,#boost_purchase_modal.selectboosts--withsubs.selectboosts--pkgs .selectboosts-type-subs{background:#f3f5f9;color:#aeb4bf}#boost_purchase_modal.selectboosts--withsubs.selectboosts--subs .selectboosts-type-pkgs:hover,#boost_purchase_modal.selectboosts--withsubs.selectboosts--pkgs .selectboosts-type-subs:hover{background:#ebedf2;color:#949aa6}#boost_purchase_modal.selectboosts--withsubs.selectboosts--subs .selectboosts-item--subs{display:block}#boost_purchase_modal.selectboosts--withsubs.selectboosts--subs .selectboosts-item--pkgs{display:none}#boost_purchase_modal.selectboosts--withsubs.selectboosts--pkgs .selectboosts-item--subs{display:none}#boost_purchase_modal.selectboosts--withsubs.selectboosts--pkgs .selectboosts-item--pkgs{display:block}.modal.boosts-success{width:467px;margin-top:100px}.modal.boosts-success .heading{font-weight:400;color:#fff;background:#4c7bd9;font-size:24px;line-height:108px}.modal.boosts-success .boosts-success-head{padding-bottom:0;font-weight:400;margin-bottom:25px;font-size:24px;line-height:36px}.modal.boosts-success .buttons{margin-top:33px;margin-bottom:12px}.modal.boosts-success .buttons .flatbutton{width:180px}.boosts-success-list{margin-left:38px;margin-right:50px}.boosts-success-list-item{position:relative;text-align:left;padding-left:28px;padding-bottom:27px;font-size:18px;line-height:27px}.boosts-success-list-item:before{display:block;position:absolute;top:7px;left:0;color:#00d280;font-size:18px;line-height:18px;font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"c"}.selectboosts-item--carousel{position:relative;overflow:hidden;width:363px}.selectboosts-item--carousel .selectboosts-item--slides{position:relative;-webkit-transition:left 200ms ease-in-out;-moz-transition:left 200ms ease-in-out;transition:left 200ms ease-in-out}.selectboosts-item--carousel .selectboosts-item--slides:after{content:"";display:table;clear:both}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-0{width:0px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-0{left:0px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-1{width:363px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-1{left:-363px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-2{width:726px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-2{left:-726px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-3{width:1089px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-3{left:-1089px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-4{width:1452px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-4{left:-1452px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-5{width:1815px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-5{left:-1815px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-6{width:2178px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-6{left:-2178px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-7{width:2541px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-7{left:-2541px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-8{width:2904px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-8{left:-2904px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-9{width:3267px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-9{left:-3267px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--slides-10{width:3630px}.selectboosts-item--carousel .selectboosts-item--slides.selectboosts-item--active-slide-10{left:-3630px}.selectboosts-item--carousel .selectboosts-item--slide{float:left;width:363px}.selectboosts-item--carousel .selectboosts-item--slide-controller{margin-top:13px}.selectboosts-item--carousel .selectboosts-item--slide-controller-button{background:transparent;border:0;padding:0;cursor:pointer;position:relative;overflow:hidden;display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:5px;background:#07408d}.selectboosts-item--carousel .selectboosts-item--slide-controller-button.active,.selectboosts-item--carousel .selectboosts-item--slide-controller-button:hover{background:#fff}.selectboosts-item--carousel .selectboosts-item--slide-controller-button:first-child{margin-left:0}.selectboosts-item--carousel .selectboosts-item--slide-controller-button .reader-text{position:absolute;top:0;left:500px}#boost_purchase_modal.selectboosts--single.selectboosts--subs .boostcontent h2{padding-top:20px}#boost_purchase_modal.selectboosts--single.selectboosts--subs .selectboosts .boost-select-form .boost-select-intro{margin:0 10px;font-size:16px;line-height:24px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}#boost_purchase_modal.selectboosts--single.selectboosts--subs .selectboosts .boost-select-form .boost-select-list label.boost-select-list-single{position:relative;text-align:center;padding:20px 0;margin-top:34px;margin-bottom:21px}#boost_purchase_modal.selectboosts--single.selectboosts--subs .selectboosts .boost-select-form .boost-select-list label.boost-select-list-single .boost-select-list-single-text{font-weight:500;color:#5e6573;font-size:16px;line-height:19px}#boost_purchase_modal.selectboosts--single.selectboosts--subs .selectboosts .boost-select-form .boost-select-list label.boost-select-list-single .boost-select-list-single-price{font-weight:100;display:block;color:#717986;margin-left:-5px;font-size:32px;line-height:39px}#boost_purchase_modal.selectboosts--single.selectboosts--subs .selectboosts .boost-select-form .boost-select-list label.boost-select-list-single .best-value-flag{top:9px;padding-left:10px;padding-right:13px}.panel-boost{position:fixed;top:0;bottom:0;right:0;overflow:hidden;width:0;background:#052f6a;-webkit-transition:width 150ms ease;-moz-transition:width 150ms ease;transition:width 150ms ease}.panel-boost .boost-controller{width:220px}.panel-boost .boost-state{display:none}#boosts.confirming .panel-boost .boost-confirming,#boosts.running .panel-boost .boost-running,#boosts.reporting .panel-boost .boost-report{display:block}.boost-state{text-align:center}.boost-timer{position:relative;margin:14px auto 0;width:90px;padding:0 10px;height:40px;white-space:nowrap;line-height:38px;text-align:left;background:#002251;border-radius:3px}.boost-timer .icon,.boost-timer .boost-timer-clock{vertical-align:top;display:inline-block}.boost-timer .icon{color:#6cd0d9;display:inline-block;font-size:20px}.boost-timer .icon:before{line-height:inherit}.boost-timer .boost-timer-clock,.boost-timer.boost-timer-starting{color:#fff;white-space:nowrap}.boost-timer.boost-timer-starting{text-align:center}.boost-progress{margin:19px auto 0;width:150px;background:#002251}.boost-progress,.boost-progress .bar{height:3px;border-radius:1.5px}.boost-progress .bar{display:block;background:#6cd0d9}.boost-timer-bonus{display:block;position:absolute;left:-75px;top:50%;margin-top:-15px;width:60px;height:30px;padding:0 10px;background:#00133d;color:#6cd0d9;border-radius:3px;white-space:nowrap;visibility:hidden;opacity:1;font-size:13px;line-height:30px;-webkit-transition:opacity 0ms ease-in,visibility 0ms ease-in;-moz-transition:opacity 0ms ease-in,visibility 0ms ease-in;transition:opacity 0ms ease-in,visibility 0ms ease-in}.boost-timer-bonus .tail{position:absolute;right:-8px;top:50%;margin-top:-8px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid #00133d}#boosts.hasbonus .boost-timer-bonus{visibility:visible;opacity:1;-webkit-transition:opacity 100ms ease-in,visibility 0s ease-in;-moz-transition:opacity 100ms ease-in,visibility 0s ease-in;transition:opacity 100ms ease-in,visibility 0s ease-in}.boost-running-viewers,.boost-report-viewers{margin:27px 0 17px;font-size:13px;color:#fff}.boost-running-people{width:180px;margin:17px auto 0}.boost-running-people .match{float:left;margin:0 5px 10px;opacity:1}.boost-running-people .match,.boost-running-people .match img{display:block;width:35px;height:35px}.boost-running-people .match img{color:#142d69;background:#051950;border-radius:50%;-webkit-transition:opacity 100ms ease-in;-moz-transition:opacity 100ms ease-in;transition:opacity 100ms ease-in}.boost-running-people .match.new{-webkit-animation:pop-open 300ms 1;-moz-animation:pop-open 300ms 1;animation:pop-open 300ms 1}.boost-running-people .match.hid{display:none}.boost-report-actions .boost-report-buttons{margin-top:24px}.boost-report-actions button{display:block;margin:0 auto}.boost-report-actions .boost-report-reactivate{width:130px;text-align:left;padding:0 24px}.boost-report-actions .boost-report-reactivate .icon{display:inline-block;font-size:20px;vertical-align:middle;margin-left:-5px}.boost-report-actions .boost-report-close{height:40px;line-height:40px;color:#9dbaf2;margin-top:10px;background:transparent;border:0;padding:0;cursor:pointer}.boost-report-actions .boost-report-close:hover{color:#d5e0f8}.boost-running-cancel{position:absolute;top:29px;right:27px;background:transparent;border:0;padding:0;cursor:pointer;height:10px;width:10px;border-radius:50%;background:rgba(255,255,255,0.2)}.boost-subspromo{display:none;margin:20px 28px 0;padding-top:148px;background:url("//cdn.okccdn.com/media/img/boostsubs/1x/illustration-medium.png") left top no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){.boost-subspromo{background-image:url("//cdn.okccdn.com/media/img/boostsubs/2x/illustration-medium.png");background-size:150px auto}}.boost-subspromo .boost-subspromo-heading{color:#fff;font-weight:400;padding:0;font-size:18px;line-height:26px}.panel-boost--showsubpromo .boost-report-buttons--promoonly,.panel-boost--showsubpromo .boost-subspromo{display:block}.panel-boost--showsubpromo .boost-report-buttons--goagain,.panel-boost--showsubpromo .boost-goagain{display:none}.panel-boost--goagain .boost-subspromo{background:url("//cdn.okccdn.com/media/img/boostsubs/1x/illustration-small.png") 20px 25px no-repeat;margin:20px;padding:163px 20px 30px;border:1px solid #204ca2;border-radius:5px}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){.panel-boost--goagain .boost-subspromo{background-image:url("//cdn.okccdn.com/media/img/boostsubs/2x/illustration-small.png");background-size:127px auto}}.panel-boost--goagain .boost-subspromo .boost-subspromo-heading{font-size:16px;line-height:24px}.panel-boost--goagain .boost-subspromo .boost-report-buttons{margin-top:18px}.panel-boost--goagain .boost-subspromo .boost-report-buttons .flatbutton{width:130px}.panel-boost--goagain.panel-boost--showsubpromo .boost-report-buttons--promoonly{display:none}.panel-boost--goagain.panel-boost--showsubpromo .boost-report-buttons--goagain,.panel-boost--goagain.panel-boost--showsubpromo .boost-goagain{display:block}#boost_activity_toggler{display:none;position:absolute;top:0;left:0;right:0}.reporting #boost_activity_toggler,.running #boost_activity_toggler{display:block}#boost_activity_toggler a{display:block;font-size:15px;height:50px;line-height:50px;padding-left:35px;background:#30b7c4;border-top-left-radius:2px;border-top-right-radius:2px}#boost_activity_toggler a .icon{position:absolute;display:block;width:20px;height:20px;top:13px;text-align:center}#boost_activity_toggler a .icon.i-boost{left:12px;font-size:18px;line-height:30px}#boost_activity_toggler a .icon.i-minimize,#boost_activity_toggler a .icon.i-maximize{right:14px;color:rgba(255,255,255,0.53)}#boost_activity_toggler a .icon.i-minimize{display:none;top:12px;font-size:13px;line-height:30px}#boost_activity_toggler a .icon.i-maximize{display:block;font-size:13px;line-height:28px}#boost_activity_toggler a,#boost_activity_toggler a:hover{color:#fff}#boost_activity_toggler a:hover .i-minimize,#boost_activity_toggler a:hover .i-maximize{color:#fff}#boost_activity_toggler .text_autoboost{display:none}#im_footer.autoboost #boost_activity_toggler .text_autoboost{display:inline}#im_footer.autoboost #boost_activity_toggler .text_boost{display:none}#boost_activity_toggler .close{position:absolute;display:none;top:0;bottom:0;right:0;width:50px;font-size:13px;color:#72dade;text-align:center}#boost_activity_toggler .close:hover{color:#fff;cursor:pointer}#im_footer.reporting.hasnotifications.expanded #boost_activity_toggler a .icon.i-minimize,#im_footer.reporting.hasnotifications.expanded #boost_activity_toggler a .icon.i-maximize{display:none}#im_footer.reporting.hasnotifications.expanded #boost_activity_toggler a .close{display:block}#im_footer.reporting.hasnotifications.expanded #boost_activity_toggler a:hover{cursor:default}.orbit_event .indicator{display:none;width:9px;height:9px;background:#30b7c4;border-radius:50%;position:absolute;top:40.5px;left:5px;margin-top:-4px}#im_footer.hasnotifications.running #event_display,#im_footer.hasnotifications.reporting #event_display{padding-top:50px;-webkit-transition:none;-moz-transition:none;transition:none}#im_footer.hasnotifications.running #event_display:after,#im_footer.hasnotifications.reporting #event_display:after{display:none}#im_footer.hasnotifications.running.collapsed #event_display,#im_footer.hasnotifications.reporting.collapsed #event_display{bottom:0}#im_footer.hasnotifications.running #event_display_body,#im_footer.hasnotifications.reporting #event_display_body{height:0;overflow:hidden}#im_footer.hasnotifications.running .orbit_inner,#im_footer.hasnotifications.reporting .orbit_inner{padding-left:20px}#im_footer.hasnotifications.running .orbit_event .indicator,#im_footer.hasnotifications.reporting .orbit_event .indicator{display:block;visibility:hidden;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 250ms ease-in,visibility 0ms ease-in 250ms;-moz-transition:opacity 250ms ease-in,visibility 0ms ease-in 250ms;transition:opacity 250ms ease-in,visibility 0ms ease-in 250ms}#im_footer.hasnotifications.running .orbit_event .close,#im_footer.hasnotifications.reporting .orbit_event .close{display:none}#im_footer.hasnotifications.running .orbit_event.new .indicator,#im_footer.hasnotifications.reporting .orbit_event.new .indicator{visibility:visible;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transition:opacity 0s ease-in,visibility 0ms ease-in;-moz-transition:opacity 0s ease-in,visibility 0ms ease-in;transition:opacity 0s ease-in,visibility 0ms ease-in}#im_footer.hasnotifications.running.expanded #event_display_body,#im_footer.hasnotifications.reporting.expanded #event_display_body{height:auto;overflow-x:hidden;overflow-y:auto;max-height:243px}#im_footer.hasnotifications.running.expanded #boost_activity_toggler .action.i-minimize,#im_footer.hasnotifications.reporting.expanded #boost_activity_toggler .action.i-minimize{display:block}#im_footer.hasnotifications.running.expanded #boost_activity_toggler .action.i-maximize,#im_footer.hasnotifications.reporting.expanded #boost_activity_toggler .action.i-maximize{display:none}#im_footer.hasnotifications.running.flashed #boost_activity_toggler a,#im_footer.hasnotifications.reporting.flashed #boost_activity_toggler a{-webkit-animation:boost-panel-flash 2000ms infinite;-moz-animation:boost-panel-flash 2000ms infinite;animation:boost-panel-flash 2000ms infinite}#autoboost_info{display:none}#im_footer.hasnotifications.reporting.autoboost #event_display_body #autoboost_info{display:block}#im_footer.hasnotifications.reporting.autoboost #event_display_body #autoboost_info .orbit_event_inner{height:auto;padding:13px 17px}#im_footer.hasnotifications.reporting.autoboost #event_display_body #autoboost_info p{color:#999;font-size:13px;line-height:22px;text-align:center}#im_footer.hasnotifications.reporting.autoboost #event_display_body #autoboost_info p strong{font-weight:600;font-family:'Open Sans',sans-serif}#im_footer.hasnotifications.reporting.autoboost #event_display_body #autoboost_info .icon{display:none}body.mac #im_footer.hasnotifications.running.expanded #event_display_body::-webkit-scrollbar,body.mac #im_footer.hasnotifications.reporting.expanded #event_display_body::-webkit-scrollbar{-webkit-appearance:none}body.mac #im_footer.hasnotifications.running.expanded #event_display_body::-webkit-scrollbar:vertical,body.mac #im_footer.hasnotifications.reporting.expanded #event_display_body::-webkit-scrollbar:vertical{width:11px}body.mac #im_footer.hasnotifications.running.expanded #event_display_body::-webkit-scrollbar:horizontal,body.mac #im_footer.hasnotifications.reporting.expanded #event_display_body::-webkit-scrollbar:horizontal{height:11px}body.mac #im_footer.hasnotifications.running.expanded #event_display_body::-webkit-scrollbar-thumb,body.mac #im_footer.hasnotifications.reporting.expanded #event_display_body::-webkit-scrollbar-thumb{border-radius:8px;border:2px solid white;background-color:rgba(0,0,0,0.5)}.okmasthead.boosting,#leaderboard_wrapper.boosting,.okad.boosting{overflow:hidden;height:0 !important}#rush_hour_modal{width:380px;margin-top:120px;overflow:hidden;border-top:none}#rush_hour_modal .heading{background:#30b7c4;padding:30px 0}#rush_hour_modal .heading h3{font-weight:300;font-family:'Open Sans',sans-serif;color:#fff;font-size:32px}#rush_hour_modal .desc{margin-bottom:35px}#rush_hour_modal .content{margin:0}#rush_hour_modal .content #rush_hour_promote{position:relative;display:block;margin:0 auto 20px;line-height:46px;height:46px;width:180px;text-indent:15px}#rush_hour_modal .content #rush_hour_promote .icon{position:absolute;top:4px;left:14px;font-size:23px}#rush_hour_modal .content #rush_hour_dismiss{color:#949aa6;border-bottom:1px solid #ccd0d9}#rush_hour_modal .content #rush_hour_dismiss:hover{color:#aeb4bf}#rush_hour_modal .close{color:#fff}#nav-boost-intro-popover{position:absolute;width:280px;top:72px !important;right:10px !important;left:auto !important}#nav-boost-intro-popover .contents{padding-top:150px;background-image:url('//cdn.okccdn.com/media/img/illustrationsV3/xsmall/1x/boost_lt.png');background-position:center bottom;background-repeat:no-repeat;background-position:center 30px}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#nav-boost-intro-popover .contents{background-image:url('//cdn.okccdn.com/media/img/illustrationsV3/xsmall/2x/boost_lt.png')}}#nav-boost-intro-popover .tail{margin-left:0;left:auto;right:36px}#page{position:relative;padding-top:85px;-webkit-transition-property:padding-right min-width;-moz-transition-property:padding-right min-width;transition-property:padding-right min-width;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}.boost-shown #page{min-width:1160px}#main_content{border-top:1px solid transparent;background:#f3f5f9;border-radius:3px;padding-bottom:60px}#main_content:after{content:"";display:table;clear:both}#footer{color:#4c7bd9;height:auto;margin:0 auto;min-height:278px;padding:35px 0;width:100%;-webkit-font-smoothing:antialiased;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;line-height:45px}#footer:after{content:"";display:table;clear:both}#footer a{color:#4c7bd9;-webkit-transition:color 100ms ease,border-color 100ms ease;-moz-transition:color 100ms ease,border-color 100ms ease;transition:color 100ms ease,border-color 100ms ease}#footer a:hover{color:#9dbaf2}#footer #footer-copyright{clear:left;cursor:default;float:left;text-align:left;font-size:16px;line-height:45px}#footer .footer-social{text-align:right;font-size:0;line-height:0}#footer .footer-social a{border:1px solid #4c7bd9;border-radius:100%;color:#4c7bd9;display:inline-block;height:45px;margin:0 6px;text-align:center;width:45px;font-size:16px;line-height:45px}#footer .footer-social a:last-child{margin-right:0}#footer .footer-social a i{font-size:20px;line-height:45px}#footer .footer-social a:hover{border-color:#9dbaf2;color:#9dbaf2}@media (max-width:940px){#footer{font-size:15px;line-height:30px}#footer #footer-copyright{margin:15px 0 35px;font-size:15px;line-height:30px}#footer .footer-social{clear:left;float:left;margin-left:-6px}}#footer_nav{float:left;margin-left:-7px;font-size:0;line-height:0}#footer_nav:after{content:"";display:table;clear:both}#footer_nav li{display:block;float:left;font-size:16px;line-height:45px}#footer_nav li a{display:block;padding:0 7px;color:#4c7bd9}#footer_nav li a:hover{color:#9dbaf2}#copyright{float:right;padding:0 7px}#guest_footer{clear:both;padding-top:35px}#guest_footer ul{list-style:none}#guest_footer li{display:inline;float:left;padding:0 10px 0 0;font-size:13px;line-height:22px}#guest_footer h3{margin:0 0 5px}#footer_big{position:relative;color:#2f5dc9;font-family:'Open Sans',sans-serif;font-size:13px;line-height:22px}#footer_big:after{content:"";display:table;clear:both}#footer_big a{color:#2f5dc9}#footer_big a:hover{color:#4c7bd9}#footer_big .link_set{float:left;width:175px}#footer_big .link_set h4{padding-bottom:15px;font-weight:600;font-family:'Open Sans',sans-serif;font-size:17px;line-height:17px}#footer_big .social_links,#footer_big .copyright{position:absolute;right:0}#footer_big .social_links{top:0;font-size:22px}#footer_big .social_links a{float:right;height:25px;margin-left:15px;position:relative;width:22px}#footer_big .social_links .icon_text{bottom:0;display:block;left:0;line-height:500px;overflow:hidden;position:absolute;right:0;top:0}#footer_big .copyright{bottom:0}.more-people-list .section_title{border-bottom:1px solid #ccd0d9;padding-bottom:14px;color:#474d59;font-weight:600;font-size:18px;line-height:14px;font-weight:600;font-family:'Open Sans',sans-serif}.more-people-list ul:after{content:"";display:table;clear:both}.more-people-list li{margin-top:10px;padding-bottom:10px;position:relative;color:#5e6573;border-bottom:1px solid #ccd0d9}.more-people-list li .user_image{position:absolute;top:0;left:0;overflow:hidden;border-radius:50%}.more-people-list li .user_image,.more-people-list li .user_image img{display:block;width:50px}.more-people-list li .profile_info{min-height:50px;padding-left:70px}.more-people-list.faces-only ul{margin-top:10px}.more-people-list.faces-only li{float:left;padding:0;width:66px;height:66px;border:0;margin:6px}.more-people-list.faces-only li:nth-child(4n-3){margin-left:0}.more-people-list.faces-only li:nth-child(4n){margin-right:0}.more-people-list.faces-only .user_image,.more-people-list.faces-only .user_image img{float:left;width:100%;height:100%}.best-value-flag{display:none;position:absolute;top:-4px;right:-8px;padding:2px 8px;padding-left:5px;background:#fb674e;border-top-right-radius:2px;border-bottom-right-radius:2px;color:#fff;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:13px;font-size:13px;line-height:19px}.best-value-flag:after{content:" ";display:block;position:absolute;top:23px;right:1px;height:0;width:0;border-top:7px solid #fa2f0d;border-right:7px solid transparent}.best-value-flag .best-value-decoration-wrapper{position:absolute;overflow:hidden;top:0;left:-19px;width:20px;height:100%}.best-value-flag .best-value-decoration{display:block;position:absolute;right:-8px}.best-value-flag .best-value-decoration.best-value-decoration1{top:0;height:0;width:0;border-top:30px solid #fb674e;border-left:15px solid transparent}.best-value-flag .best-value-decoration.best-value-decoration2{bottom:0;height:0;width:0;border-bottom:30px solid #fb674e;border-left:15px solid transparent}.checked .best-value-flag{display:block}body.okc2014 .okshadowbox{box-shadow:none;border-radius:5px;background:#fff;border:1px solid #ccd0d9}body.okc2014 .okshadowbox .close{color:#949aa6;background:transparent;top:20px;right:20px;text-indent:0;width:13px;height:13px;font-size:13px;line-height:13px}body.okc2014 .okshadowbox .close:before{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"x"}body.okc2014 .okshadowbox .close:hover{color:#aeb4bf}.modal.alist_options_promo{position:absolute;top:50px;width:880px;z-index:92002;overflow:hidden}.modal.alist_options_promo .content{margin:0}.modal.alist_options_promo .flag{position:absolute;top:41px;left:-10px;background:#fb674e;border-radius:5px 0 0 0;padding:0 20px 0 29px;height:46px;color:#fff;font-size:18px;line-height:46px;z-index:1}.modal.alist_options_promo .flag:before{content:"";position:absolute;bottom:-6px;left:0px;border-color:transparent;border-style:solid;border-width:3px 5px;border-top-color:#c53227;border-right-color:#c53227}.modal.alist_options_promo .flag:after{content:"";position:absolute;right:-13px;top:0px;border-color:#fb674e;border-style:solid;border-width:23px 13px 23px 0;border-right-color:transparent}.modal.alist_options_promo .left{position:absolute;left:-1px;top:-1px;bottom:-1px;width:440px;background:#4c7bd9;color:#fff;border-radius:2px 0 0 2px}.modal.alist_options_promo .left .pretitle{color:#9dbaf2;height:52px;font-size:22px;line-height:52px}.modal.alist_options_promo .left .pretitle.godmode{color:#fff;margin:0 auto 12px;height:55px;line-height:55px;width:247px;border:2px dashed #9dbaf2;border-radius:27.5px}.modal.alist_options_promo .left .hero-icon{display:none}.modal.alist_options_promo .left h3{color:#fff;font-weight:300;font-size:39px;line-height:48px}.modal.alist_options_promo .left .subtitle{color:#fff;font-weight:600;height:46px;font-size:18px;line-height:56px}.modal.alist_options_promo .left .heading{position:absolute;left:60px;right:60px;height:252px;top:50%;margin-top:-136px}.modal.alist_options_promo .left .heading .nowrap{white-space:nowrap}.modal.alist_options_promo .right{padding-left:438px;text-align:left;font-size:15px;line-height:20px}.modal.alist_options_promo .right .features{margin-top:5px;margin-right:14px;margin-bottom:20px}.modal.alist_options_promo .right .features li{position:relative;padding:10px;padding-left:55px;padding-bottom:17px;font-size:16px;line-height:22px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.modal.alist_options_promo .right .features li .icon{position:absolute;top:10px;left:22px;color:#fd6d55;font-size:22px}.modal.alist_options_promo .right .features li .icon:before{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"c"}.modal.alist_options_promo .right .features li h4{padding:0;color:#474d59;font-weight:600;margin-right:4px}.modal.alist_options_promo .right .features li h4,.modal.alist_options_promo .right .features li p{display:inline}.modal.alist_options_promo .right .disclosure{padding-top:10px;margin:0 15px 3px;text-align:center;color:#949aa6;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:18px}.modal.alist_options_promo .right .disclosure .withduration,.modal.alist_options_promo .right .disclosure .withtax{display:none}.modal.alist_options_promo .right .buttons{margin-top:16px}.modal.alist_options_promo .right .buttons li{display:block;text-align:center;margin:0}.modal.alist_options_promo .right .buttons button{display:inline-block}.modal.alist_options_promo .right .buttons .addfeatures{width:180px}.modal.alist_options_promo #enhanced_alist_price.hastax .withtax{display:inline}.modal.alist_options_promo #enhanced_alist_price.hasduration .onemonth{display:none}.modal.alist_options_promo #enhanced_alist_price.hasduration .withduration{display:inline}.modal.alist_options_promo.modal{-webkit-transition:none;-moz-transition:none;transition:none}.modal.alist_options_promo.modal.show{-webkit-animation-name:bounce-in-from-bottom;-moz-animation-name:bounce-in-from-bottom;animation-name:bounce-in-from-bottom;-webkit-animation-duration:500ms;-moz-animation-duration:500ms;animation-duration:500ms;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition:none;-moz-transition:none;transition:none}.modal.alist_options_promo.premium_upgrade .flag,.modal.alist_options_promo.premium_upgrade .left .pretitle{display:none}.modal.alist_options_promo.premium_upgrade .left .hero-icon{display:block;margin:0 auto 34px}.modal.alist_options_promo.premium_upgrade .left .hero-icon,.modal.alist_options_promo.premium_upgrade .left .hero-icon svg{width:210px;height:185px}.modal.alist_options_promo.premium_upgrade .left .heading{height:389px;margin-top:-194.5px;left:45px;right:45px}div.upgrade_ad.upgrade_ad-premium .wrapper{background:transparent;border:0;padding:0;cursor:pointer;background:#4e7dd6;font-size:16px;color:#fff;padding-left:100px;padding-right:50px;overflow:hidden;text-align:left;display:block;width:100%}div.upgrade_ad.upgrade_ad-premium .wrapper .icon{background:transparent;margin-top:0;top:-12px;left:-18px}div.upgrade_ad.upgrade_ad-premium .wrapper .icon,div.upgrade_ad.upgrade_ad-premium .wrapper .icon svg{width:105px;height:92px}div.upgrade_ad.upgrade_ad-premium .wrapper .arrow{background:none;color:#2e5cca;font-size:24px;margin-top:-11px;height:24px}div.upgrade_ad.upgrade_ad-premium .wrapper .arrow:before{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:">"}div.upgrade_ad.upgrade_ad-premium.upgrade_ad-twoline .wrapper{padding-left:110px;padding-top:12px;padding-bottom:12px;height:90px}div.upgrade_ad.upgrade_ad-premium.upgrade_ad-twoline .wrapper .icon{top:-16px;left:-28px}div.upgrade_ad.upgrade_ad-premium.upgrade_ad-twoline .wrapper .icon,div.upgrade_ad.upgrade_ad-premium.upgrade_ad-twoline .wrapper .icon svg{width:124px;height:109px}#p_okpay{background:transparent;padding-bottom:100px}.okpay-app{position:relative;width:807px;margin:0 auto;background:#fff;border-radius:6px;overflow:hidden}.okpay-app.okpay-app--useinfo{width:500px}.okpay-app:after,.okpay-body:after{content:"";display:table;clear:both}.okpay-nav,.okpay-body,.okpay-sidesummary{float:left}.okpay-nav{width:145px}.okpay-body{width:662px}.okpay-form{width:364px}.okpay-sidesummary{width:298px}.okpay-app--update{width:609px}.okpay-app--update .okpay-body{width:464px}.okpay-close{background:transparent;border:0;padding:0;cursor:pointer;position:absolute;top:12px;right:12px;width:50px;height:50px}.okpay-close .okicon{color:#aeb4bf;display:block;text-align:center;font-size:16px;line-height:50px}.okpay-close:hover .okicon{color:#ccd0d9}.okpay-body{position:relative;background:#f3f5f9;min-height:468px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.okpay-body:before{content:"";position:absolute;display:block;left:-8.5px;width:15px;height:15px;background:#f3f5f9;-webkit-transition:top 120ms ease-out;-moz-transition:top 120ms ease-out;transition:top 120ms ease-out;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.okpay-body .okpay-sidesummary{padding-top:88px;padding-right:50px}.okpay-app--card .okpay-body:before{top:102px}.okpay-app--paypal .okpay-body:before{top:214px}.okpay-app--bitcoin .okpay-body:before{top:326px}.okpay-sidesummary,.okpay-form{position:relative;padding:35px 30px;float:left}.okpay-sidesummary .okpay-learnmore-open{margin-left:-150px}.okpay-summary-name,.okpay-summary-description,.okpay-learnmore{padding-bottom:20px}.okpay-summary-name{color:#474d59}.okpay-price{width:192px}.okpay-price-label,.okpay-price-value{vertical-align:top;line-height:22px;padding:3px 0}.okpay-price-label{float:left;text-align:left}.okpay-price-value{text-align:right}.okpay-price-total{font-weight:600}.okpay-vat{color:#aeb4bf;font-size:13px}.okpay-learnmore{margin-top:-15px}.okpay-learnmore-toggler{background:transparent;border:0;padding:0;cursor:pointer;color:#3260c7;white-space:nowrap}body.chrome.mac .okpay-learnmore-toggler{padding-right:5px}.okpay-learnmore-toggler:hover{color:#4c7bd9}.okpay-learnmore-toggler:active{color:#9dbaf2}.okpay-learnmore-open{position:fixed;top:75px;left:50%;margin-left:-225px;z-index:10;background:#fff;width:450px;padding:30px;border:1px solid #ccd0d9;font-size:14px}.okpay-learnmore-open .okpay-learnmore-close{margin-top:30px}.okpay-app.okpay-app--useinfo{background:#f3f5f9}.okpay-hasinfosummary{padding-bottom:30px}.okpay-hasinfosummary .okpay-price{padding:15px 0;margin:30px 0;border:1px solid #ccd0d9;border-width:1px 0}.okpay-hasinfosummary .okpay-vat{margin-left:30px;margin-right:30px}.okpay-hasinfosummary .okpay-summary-name{background:#fff;color:#5e6573;padding-top:23px;padding-bottom:23px;margin-bottom:30px;border-bottom:1px solid #ccd0d9;font-size:18px;line-height:26px}.okpay-hasinfosummary .okpay-summary-description{font-size:16px;line-height:26px}.okpay-hasinfosummary .okpay-summary-name,.okpay-hasinfosummary .okpay-summary-description,.okpay-hasinfosummary .okpay-learnmore,.okpay-hasinfosummary .okpay-hasinfosummary-footer{padding-left:30px;padding-right:30px}.okpay-hasinfosummary .okpay-price{margin-left:30px;margin-right:30px;font-size:16px;line-height:26px;width:-moz-calc(100% - 60px);width:-webkit-calc(100% - 60px);width:calc(100% - 60px)}.okpay-hasinfosummary .okpay-learnmore-open{top:96px}.okpay-hasinfosummary-footer{padding-top:30px}.okpay-hasinfosummary-footer:after{content:"";display:table;clear:both}.okpay-hasinfosummary-footer .okpay-hasinfosummary-left{float:left}.okpay-hasinfosummary-footer .okpay-hasinfosummary-right{float:right}.okpay-hasinfosummary-footer .okpay-purchasebutton{width:180px}.okpay-hasinfosummary-footer .okpay-hasinfosummary-cardinfo,.okpay-hasinfosummary-footer .okpay-change{float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:245px;text-align:right;font-size:16px;line-height:50px}body.chrome.mac .okpay-hasinfosummary-footer .okpay-hasinfosummary-cardinfo,body.chrome.mac .okpay-hasinfosummary-footer .okpay-change{padding-right:2px}.okpay-hasinfosummary-footer .okpay-change{background:transparent;border:0;padding:0;cursor:pointer;margin-left:15px}.okpay-hasinfosummary-footer .okpay-change strong{margin-left:5px;font-weight:normal;color:#3260c7}.okpay-hasinfosummary-footer .okpay-change strong:hover{color:#4c7bd9}.okpay-hasinfosummary-footer .okpay-change strong:active{color:#9dbaf2}.modal.alistpremium-confirm{width:500px;padding:0}.modal.alistpremium-confirm .okpay-hasinfosummary .okpay-summary-name{font-weight:normal}div.okad{width:300px;margin-bottom:20px;-webkit-transition:height 200ms ease;-moz-transition:height 200ms ease;transition:height 200ms ease}div.okad div.frame{width:300px}div.okad div.frame iframe{border:0}div.okad p.notice{font-size:13px;line-height:20px;font-weight:normal;color:#aeb4bf;text-align:center;padding:4px 0px 5px 0px}div.okad p.notice a{display:inline-block;color:#949aa6;border-bottom:1px solid #ccd0d9;font-family:'Open Sans',sans-serif}#leaderboard_container{overflow:hidden}#leaderboard_wrapper{background:#000f2d;border-bottom:1px solid #3269c8;margin-bottom:-1px;-webkit-transition:height 200ms ease;-moz-transition:height 200ms ease;transition:height 200ms ease}#leaderboard_wrapper p{color:#FFF;margin-bottom:0;position:relative;text-align:center;top:-5px}#leaderboard_wrapper p a{color:#F83265;font-weight:bold}#leaderboard{line-height:0;padding:10px 0;text-align:center}#leaderboard .ad-container,#leaderboard .ad-container .format.format--leader,#leaderboard .ad-container iframe{display:inline-block}div#skyscraper_floater_wrapper{}div#skyscraper_floater_region,div#skyscraper_floater_region2{top:0px;width:194px}.side_skyscraper_ad .block_wrapper{padding:14px 12px 12px}.side_skyscraper_ad .block_wrapper div.block{width:160px;height:600px}.side_skyscraper_ad .block_wrapper p{color:#dce6fe;padding:0px;margin:8px 0 0;line-height:16px}.side_skyscraper_ad .block_wrapper p a{display:block;text-align:left}.ad_wrapper p{color:#7FA1C8;font-size:10px;text-align:center;text-transform:uppercase}p.ad_notifier a.upgrade{font-style:italic;padding-left:10px;font-weight:bold}p.ad_notifier{font-size:10px;color:#ccc;text-align:center;margin-bottom:5px;text-transform:uppercase}iframe.ad{display:block;margin:0;padding:0;background:#fff}#leaderboard.hastextads{padding-top:5px}#textads{position:relative;margin:0 auto;padding-top:7px;width:748px;height:27px;overflow:hidden;text-align:center;font-size:13px;line-height:20px}#textads a.textad{display:inline-block;padding:0 22px;border-left:1px solid #223976;color:#95b5ff;white-space:nowrap}#textads a.textad.first{border:0}#textads img{position:absolute}p.page_banner{overflow:hidden;height:39px;line-height:39px;padding:0px 10px 0 30px !important;margin:-1px 0 0 0 !important;font-size:15px;position:relative;background:#e7eef5;color:#2855A2;box-shadow:none;border-bottom:1px solid #9dbaf2;border-radius:3px 3px 0 0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}p.page_banner.left{padding:0px 25px 0px 34px !important}p.page_banner a{display:block;height:39px;line-height:39px;color:#2855A2;text-decoration:none}p.page_banner a:hover{text-decoration:none}p.page_banner a.close{position:absolute;right:10px;z-index:20;width:13px}p.page_banner a.close:hover{text-decoration:none !important}p.page_banner.left a.close{left:10px}p.page_banner a span{font-size:10px}p.page_banner a.close span{margin:7px 0;width:13px;height:14px;color:#2855A2}p.page_banner a.close:hover span{background-position:0px -14px}p.page_banner strong{padding-right:6px}p.page_banner.pink{color:#f93b66;background:#fcecf2;box-shadow:none;border-color:#fedbe3}p.page_banner.pink:hover{background:#fee5eb}p.page_banner.pink a{color:#f93b66;background:transparent}p.page_banner.pink a span{color:#ff597e}p.page_banner.pink a.close span{color:#ff8aa4}p.page_banner.green{color:#539722;background:#e8f2e0}p.page_banner.green a{color:#539722}p.page_banner.green a span{color:#539722}p.page_banner.green a.close span{color:#539722}body.dont_unexpand #wrapper,body.dont_unexpand #page{width:1148px}body.dont_unexpand #footer{padding:0 0 40px}div#takeover_boxes,div#takeover_boxes a.takeover_link{display:none}div#alist_member_banner{margin:0;box-shadow:s0px 0px 6px 0px rgba(0,0,0,0.4)}div#alist_member_banner a{display:block;background-color:#edf1f8}div#alist_member_banner a:hover{background-color:#e6ecf6}div#alist_member_banner div#leaderboard{height:16px;width:914px;padding:20px;background-image:url(//cdn.okccdn.com/media/img/alist/alist_member_banner_back.png);background-position:right center;background-repeat:no-repeat}div#alist_member_banner div#leaderboard p{font-size:14px;color:#2855a2;text-align:center;line-height:16px;height:16px}body.spotlight div#alist_member_banner div#leaderboard{padding-right:120px;background-position:914px center}.format--leader,.format--leader_addl{min-width:728px;min-height:90px}.format--box,.format--box_addl{width:300px;height:250px}.format--half_page{width:300px;height:600px}body.hideallads div.okad,body.hideallads div#home_ad,body.hideallads div#leaderboard_wrapper,body.hideallads div#skyscraper_floater_wrapper,body.hideallads div#skyscraper_floater_wrapper2,body.hideallads.expanded div#skyscraper_floater_wrapper,body.hideallads.expanded div#skyscraper_floater_wrapper2{display:none}body.hide_leader div#leaderboard_wrapper{display:none}body.hide_sky div#skyscraper_floater_wrapper,body.hide_sky.expanded div#skyscraper_floater_wrapper{display:none}body.hide_sky_r div#skyscraper_floater_wrapper2,body.hide_sky_r.expanded div#skyscraper_floater_wrapper2{display:none}.noanimation{-webkit-transition:none !important;-moz-transition:none !important;transition:none !important}@-webkit-keyframes fade-in{0%{opacity:0;visibility:hidden}1%{opacity:0;visibility:visible}100%{opacity:1;visibility:visible}}@-moz-keyframes fade-in{0%{opacity:0;visibility:hidden}1%{opacity:0;visibility:visible}100%{opacity:1;visibility:visible}}@keyframes fade-in{0%{opacity:0;visibility:hidden}1%{opacity:0;visibility:visible}100%{opacity:1;visibility:visible}}@-webkit-keyframes fade-out{0%{opacity:1;visibility:visible}99%{opacity:0;visibility:hidden}100%{opacity:0;visibility:hidden}}@-moz-keyframes fade-out{0%{opacity:1;visibility:visible}99%{opacity:0;visibility:hidden}100%{opacity:0;visibility:hidden}}@keyframes fade-out{0%{opacity:1;visibility:visible}99%{opacity:0;visibility:hidden}100%{opacity:0;visibility:hidden}}@-webkit-keyframes fade-in-up{0%{margin-top:5px;opacity:0.2}100%{margin-top:0;opacity:1}}@-moz-keyframes fade-in-up{0%{margin-top:5px;opacity:0.2}100%{margin-top:0;opacity:1}}@keyframes fade-in-up{0%{margin-top:5px;opacity:0.2}100%{margin-top:0;opacity:1}}@-webkit-keyframes fade-in-down{0%{margin-top:-5px;opacity:0.2}100%{margin-top:0;opacity:1}}@-moz-keyframes fade-in-down{0%{margin-top:-5px;opacity:0.2}100%{margin-top:0;opacity:1}}@keyframes fade-in-down{0%{margin-top:-5px;opacity:0.2}100%{margin-top:0;opacity:1}}@-webkit-keyframes fade-in-left{0%{opacity:0.2;transform:translateX(-5px)}100%{opacity:1;transform:translateX(0)}}@-moz-keyframes fade-in-left{0%{opacity:0.2;transform:translateX(-5px)}100%{opacity:1;transform:translateX(0)}}@keyframes fade-in-left{0%{opacity:0.2;transform:translateX(-5px)}100%{opacity:1;transform:translateX(0)}}@-webkit-keyframes fade-in-right{0%{opacity:0.2;transform:translateX(5px)}100%{opacity:1;transform:translateX(0)}}@-moz-keyframes fade-in-right{0%{opacity:0.2;transform:translateX(5px)}100%{opacity:1;transform:translateX(0)}}@keyframes fade-in-right{0%{opacity:0.2;transform:translateX(5px)}100%{opacity:1;transform:translateX(0)}}@-webkit-keyframes bounce-in-top{0%{opacity:0;-webkit-transform:translateY(-1000px)}60%{opacity:1;-webkit-transform:translateY(30px)}80%{-webkit-transform:translateY(-10px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes bounce-in-top{0%{opacity:0;-moz-transform:translateY(-1000px)}60%{opacity:1;-moz-transform:translateY(30px)}80%{-moz-transform:translateY(-10px)}100%{-moz-transform:translateY(0)}}@keyframes bounce-in-top{0%{opacity:0;-webkit-transform:translateY(-1000px);-moz-transform:translateY(-1000px);-ms-transform:translateY(-1000px);-o-transform:translateY(-1000px);transform:translateY(-1000px)}60%{opacity:1;-webkit-transform:translateY(30px);-moz-transform:translateY(30px);-ms-transform:translateY(30px);-o-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-ms-transform:translateY(-10px);-o-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes bounce-in-from-bottom{0%{opacity:0;-webkit-transform:translateY(200px)}50%{opacity:1;-webkit-transform:translateY(-20px)}80%{-webkit-transform:translateY(15px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes bounce-in-from-bottom{0%{opacity:0;-moz-transform:translateY(200px)}50%{opacity:1;-moz-transform:translateY(-20px)}80%{-moz-transform:translateY(15px)}100%{-moz-transform:translateY(0)}}@keyframes bounce-in-from-bottom{0%{opacity:0;-webkit-transform:translateY(200px);-moz-transform:translateY(200px);-ms-transform:translateY(200px);-o-transform:translateY(200px);transform:translateY(200px)}50%{opacity:1;-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-ms-transform:translateY(-20px);-o-transform:translateY(-20px);transform:translateY(-20px)}80%{-webkit-transform:translateY(15px);-moz-transform:translateY(15px);-ms-transform:translateY(15px);-o-transform:translateY(15px);transform:translateY(15px)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes expand-from-center{0%{-webkit-transform:scale(0.8);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}@-moz-keyframes expand-from-center{0%{-moz-transform:scale(0.8);opacity:0}100%{-moz-transform:scale(1);opacity:1}}@keyframes expand-from-center{0%{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);opacity:0}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1}}@-webkit-keyframes badge-bounce{0%{margin-bottom:-50px}50%{margin-bottom:-6px}70%{margin-bottom:-12px}87%{margin-bottom:-9px}100%{margin-bottom:-10px}}@-moz-keyframes badge-bounce{0%{margin-bottom:-50px}50%{margin-bottom:-6px}70%{margin-bottom:-12px}87%{margin-bottom:-9px}100%{margin-bottom:-10px}}@keyframes badge-bounce{0%{margin-bottom:-50px}50%{margin-bottom:-6px}70%{margin-bottom:-12px}87%{margin-bottom:-9px}100%{margin-bottom:-10px}}@-webkit-keyframes badge-emphasis-short{0%{padding:0px 5px;right:12px;margin-bottom:-10px}50%{padding:3px 7px;right:10px;margin-bottom:-12px}100%{padding:0px 5px;right:12px;margin-bottom:-10px}}@-moz-keyframes badge-emphasis-short{0%{padding:0px 5px;right:12px;margin-bottom:-10px}50%{padding:3px 7px;right:10px;margin-bottom:-12px}100%{padding:0px 5px;right:12px;margin-bottom:-10px}}@keyframes badge-emphasis-short{0%{padding:0px 5px;right:12px;margin-bottom:-10px}50%{padding:3px 7px;right:10px;margin-bottom:-12px}100%{padding:0px 5px;right:12px;margin-bottom:-10px}}@-webkit-keyframes numberless-badges-pulse{0%{width:10px;height:10px;margin-bottom:-4px;right:13px}50%{width:18px;height:18px;margin-bottom:-8px;right:9px}100%{width:10px;height:10px;margin-bottom:-4px;right:13px}}@-moz-keyframes numberless-badges-pulse{0%{width:10px;height:10px;margin-bottom:-4px;right:13px}50%{width:18px;height:18px;margin-bottom:-8px;right:9px}100%{width:10px;height:10px;margin-bottom:-4px;right:13px}}@keyframes numberless-badges-pulse{0%{width:10px;height:10px;margin-bottom:-4px;right:13px}50%{width:18px;height:18px;margin-bottom:-8px;right:9px}100%{width:10px;height:10px;margin-bottom:-4px;right:13px}}@-webkit-keyframes badge-slide-up{0%{margin-bottom:-50px}100%{margin-bottom:-4px}}@-moz-keyframes badge-slide-up{0%{margin-bottom:-50px}100%{margin-bottom:-4px}}@keyframes badge-slide-up{0%{margin-bottom:-50px}100%{margin-bottom:-4px}}@-webkit-keyframes badge-slide-up-pulse{0%{margin-bottom:-50px}28%{width:10px;height:10px;margin-bottom:-4px;right:13px}46%{width:20px;height:20px;margin-bottom:-9px;right:8px}64%{width:10px;height:10px;margin-bottom:-4px;right:13px}82%{width:20px;height:20px;margin-bottom:-9px;right:8px}100%{width:10px;height:10px;margin-bottom:-4px;right:13px}}@-moz-keyframes badge-slide-up-pulse{0%{margin-bottom:-50px}28%{width:10px;height:10px;margin-bottom:-4px;right:13px}46%{width:20px;height:20px;margin-bottom:-9px;right:8px}64%{width:10px;height:10px;margin-bottom:-4px;right:13px}82%{width:20px;height:20px;margin-bottom:-9px;right:8px}100%{width:10px;height:10px;margin-bottom:-4px;right:13px}}@keyframes badge-slide-up-pulse{0%{margin-bottom:-50px}28%{width:10px;height:10px;margin-bottom:-4px;right:13px}46%{width:20px;height:20px;margin-bottom:-9px;right:8px}64%{width:10px;height:10px;margin-bottom:-4px;right:13px}82%{width:20px;height:20px;margin-bottom:-9px;right:8px}100%{width:10px;height:10px;margin-bottom:-4px;right:13px}}@-webkit-keyframes pop-message-open{0%{opacity:.6;visibility:visible;-webkit-transform:scale(.75)}100%{opacity:1;-webkit-transform:scale(1)}}@-moz-keyframes pop-message-open{0%{opacity:.6;visibility:visible;-moz-transform:scale(.75)}100%{opacity:1;-moz-transform:scale(1)}}@keyframes pop-message-open{0%{opacity:.6;visibility:visible;-webkit-transform:scale(.75);-moz-transform:scale(.75);-ms-transform:scale(.75);-o-transform:scale(.75);transform:scale(.75)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-webkit-keyframes pop-open{0%{opacity:0;visibility:visible;-webkit-transform:scale(.5)}70%{-webkit-transform:scale(1.1)}100%{opacity:1;-webkit-transform:scale(1)}}@-moz-keyframes pop-open{0%{opacity:0;visibility:visible;-moz-transform:scale(.5)}70%{-moz-transform:scale(1.1)}100%{opacity:1;-moz-transform:scale(1)}}@keyframes pop-open{0%{opacity:0;visibility:visible;-webkit-transform:scale(.5);-moz-transform:scale(.5);-ms-transform:scale(.5);-o-transform:scale(.5);transform:scale(.5)}70%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-webkit-keyframes flash{0%{opacity:1}25%{opacity:0.5}50%{opacity:1}75%{opacity:0.5}100%{opacity:1}}@-moz-keyframes flash{0%{opacity:1}25%{opacity:0.5}50%{opacity:1}75%{opacity:0.5}100%{opacity:1}}@keyframes flash{0%{opacity:1}25%{opacity:0.5}50%{opacity:1}75%{opacity:0.5}100%{opacity:1}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1)}10%{-webkit-transform:scale(.93)}40%{-webkit-transform:scale(1.1)}80%{-webkit-transform:scale(.97)}100%{-webkit-transform:scale(1)}}@-moz-keyframes pulse{0%{-moz-transform:scale(1)}10%{-moz-transform:scale(.93)}40%{-moz-transform:scale(1.1)}80%{-moz-transform:scale(.97)}100%{-moz-transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(.93);-moz-transform:scale(.93);-ms-transform:scale(.93);-o-transform:scale(.93);transform:scale(.93)}40%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}80%{-webkit-transform:scale(.97);-moz-transform:scale(.97);-ms-transform:scale(.97);-o-transform:scale(.97);transform:scale(.97)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-webkit-keyframes bubble-down{0%{opacity:1;bottom:0;visibility:visible}50%{opacity:.75;bottom:30px}100%{opacity:0;bottom:-50px;visibility:hidden}}@-moz-keyframes bubble-down{0%{opacity:1;bottom:0;visibility:visible}50%{opacity:.75;bottom:30px}100%{opacity:0;bottom:-50px;visibility:hidden}}@keyframes bubble-down{0%{opacity:1;bottom:0;visibility:visible}50%{opacity:.75;bottom:30px}100%{opacity:0;bottom:-50px;visibility:hidden}}@-webkit-keyframes bubble-replace{0%{opacity:1;bottom:0;visibility:visible}25%{opacity:1}50%{opacity:0.25;bottom:44px}100%{opacity:0;bottom:-50px;visibility:hidden}}@-moz-keyframes bubble-replace{0%{opacity:1;bottom:0;visibility:visible}25%{opacity:1}50%{opacity:0.25;bottom:44px}100%{opacity:0;bottom:-50px;visibility:hidden}}@keyframes bubble-replace{0%{opacity:1;bottom:0;visibility:visible}25%{opacity:1}50%{opacity:0.25;bottom:44px}100%{opacity:0;bottom:-50px;visibility:hidden}}@-webkit-keyframes bubble-up{0%{opacity:0;bottom:-50px;visibility:visible}50%{opacity:1;bottom:15px}80%{bottom:-10px}100%{bottom:0}}@-moz-keyframes bubble-up{0%{opacity:0;bottom:-50px;visibility:visible}50%{opacity:1;bottom:15px}80%{bottom:-10px}100%{bottom:0}}@keyframes bubble-up{0%{opacity:0;bottom:-50px;visibility:visible}50%{opacity:1;bottom:15px}80%{bottom:-10px}100%{bottom:0}}@-webkit-keyframes boost-panel-flash{0%{background:#76dadd}70%{background:#30b7c4}100%{background:#76dadd}}@-moz-keyframes boost-panel-flash{0%{background:#76dadd}70%{background:#30b7c4}100%{background:#76dadd}}@keyframes boost-panel-flash{0%{background:#76dadd}70%{background:#30b7c4}100%{background:#76dadd}}@-webkit-keyframes oscillate-vertical{0%{-webkit-transform:translateY(0)}25%{-webkit-transform:translateY(-2px)}50%{-webkit-transform:translateY(0)}75%{-webkit-transform:translateY(2px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes oscillate-vertical{0%{-moz-transform:translateY(0)}25%{-moz-transform:translateY(-2px)}50%{-moz-transform:translateY(0)}75%{-moz-transform:translateY(2px)}100%{-moz-transform:translateY(0)}}@keyframes oscillate-vertical{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(-2px);-moz-transform:translateY(-2px);-ms-transform:translateY(-2px);-o-transform:translateY(-2px);transform:translateY(-2px)}50%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}75%{-webkit-transform:translateY(2px);-moz-transform:translateY(2px);-ms-transform:translateY(2px);-o-transform:translateY(2px);transform:translateY(2px)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes shadow-pulse{0%{opacity:0.8;-webkit-transform:scale(1)}25%{opacity:0.7;-webkit-transform:scale(1.05)}50%{opacity:0.8;-webkit-transform:scale(1)}75%{opacity:0.9;-webkit-transform:scale(0.95)}100%{opacity:0.8;-webkit-transform:scale(1)}}@-moz-keyframes shadow-pulse{0%{opacity:0.8;-moz-transform:scale(1)}25%{opacity:0.7;-moz-transform:scale(1.05)}50%{opacity:0.8;-moz-transform:scale(1)}75%{opacity:0.9;-moz-transform:scale(0.95)}100%{opacity:0.8;-moz-transform:scale(1)}}@keyframes shadow-pulse{0%{opacity:0.8;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}25%{opacity:0.7;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}50%{opacity:0.8;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}75%{opacity:0.9;-webkit-transform:scale(0.95);-moz-transform:scale(0.95);-ms-transform:scale(0.95);-o-transform:scale(0.95);transform:scale(0.95)}100%{opacity:0.8;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-webkit-keyframes enter-left-then-slowly-fade-out{0%{opacity:0;visibility:visible;margin-left:-20px}4%{margin-left:8px}8%{margin-left:-3px}14%{margin-left:0;opacity:1}85%{opacity:1}99%{opacity:0}100%{visibility:hidden}}@-moz-keyframes enter-left-then-slowly-fade-out{0%{opacity:0;visibility:visible;margin-left:-20px}4%{margin-left:8px}8%{margin-left:-3px}14%{margin-left:0;opacity:1}85%{opacity:1}99%{opacity:0}100%{visibility:hidden}}@keyframes enter-left-then-slowly-fade-out{0%{opacity:0;visibility:visible;margin-left:-20px}4%{margin-left:8px}8%{margin-left:-3px}14%{margin-left:0;opacity:1}85%{opacity:1}99%{opacity:0}100%{visibility:hidden}}@-webkit-keyframes zoom-in-out{from{-webkit-transform:scale(0.75)}to{-webkit-transform:scale(1)}75%{-webkit-transform:scale(1.02)}}@-moz-keyframes zoom-in-out{from{-moz-transform:scale(0.75)}to{-moz-transform:scale(1)}75%{-moz-transform:scale(1.02)}}@keyframes zoom-in-out{from{-webkit-transform:scale(0.75);-moz-transform:scale(0.75);-ms-transform:scale(0.75);-o-transform:scale(0.75);transform:scale(0.75)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}75%{-webkit-transform:scale(1.02);-moz-transform:scale(1.02);-ms-transform:scale(1.02);-o-transform:scale(1.02);transform:scale(1.02)}}@-webkit-keyframes tile-load{from{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transform:translateY(20px)}to{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes tile-load{from{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-moz-transform:translateY(20px)}to{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-moz-transform:translateY(0)}}@keyframes tile-load{from{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transform:translateY(20px);-moz-transform:translateY(20px);-ms-transform:translateY(20px);-o-transform:translateY(20px);transform:translateY(20px)}to{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes show-subtiles{from{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transform:scale(1)}to{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transform:scale(1.4)}}@-moz-keyframes show-subtiles{from{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-moz-transform:scale(1)}to{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-moz-transform:scale(1.4)}}@keyframes show-subtiles{from{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}to{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);-o-transform:scale(1.4);transform:scale(1.4)}}aside.grayaside{padding:18px 20px 20px;background:#ebedf2;margin-bottom:10px}aside.grayaside h3{margin-bottom:10px;padding-bottom:0;color:#474d59;font-size:18px;line-height:24px}aside.grayaside p,aside.grayaside li{color:#5e6573}aside.grayaside p{margin-bottom:5px}aside.grayaside > .content ul{margin:10px 0 5px;list-style-type:disc}aside.grayaside > .content ul li{display:list-item;padding:2px 0}aside.grayaside > .buttons{margin-top:15px;text-align:left}aside.grayaside > .buttons .flatbutton{display:block;width:auto;padding:0 20px;margin-bottom:5px}aside.grayaside > .buttons .flatbutton:last-child{margin-bottom:0}aside.grayaside > .buttons.fixedwidth .flatbutton{width:170px}.blank_state_wrapper{width:100%;padding:0 30px}.blank_state_wrapper .blank_state{padding:69px 20px 79px;text-align:center}.no-borderimage .blank_state_wrapper .blank_state{border:1px dashed #aeb4bf;border-radius:4px}.borderimage .blank_state_wrapper .blank_state{-webkit-border-image:url("//cdn.okccdn.com/media/img/template/pq-blank-state-border.png") 7 repeat;-moz-border-image:url("//cdn.okccdn.com/media/img/template/pq-blank-state-border.png") 7 repeat;-o-border-image:url("//cdn.okccdn.com/media/img/template/pq-blank-state-border.png") 7 repeat;border-image:url("//cdn.okccdn.com/media/img/template/pq-blank-state-border.png") 7 repeat;border-style:solid;border-width:7px}.blank_state_wrapper .blank_state.no_buttons{padding:107px 20px}.blank_state_wrapper .blank_state > h2,.blank_state_wrapper .blank_state > p{color:#5e6573}.blank_state_wrapper .blank_state > h2{padding-bottom:0;margin-bottom:18px;font-weight:600;font-family:'Open Sans',sans-serif;font-size:22px}.blank_state_wrapper .blank_state > p{margin-bottom:6px;font-size:15px;line-height:24px}.blank_state_wrapper .blank_state > .buttons{display:inline-block;margin-top:24px}.blank_state_wrapper .blank_state > .buttons .flatbutton{float:left;margin-left:10px;width:auto;min-width:120px;padding-right:15px;padding-left:15px}.blank_state_wrapper .blank_state > .buttons .flatbutton:first-child{margin-left:0}.blank_state_wrapper .blank_state.helvetica > h2,.blank_state_wrapper .blank_state.helvetica > p{margin:0;color:#949aa6;font-size:16px;line-height:22px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.blank_state_wrapper .blank_state.helvetica > h2{margin-bottom:5px}.blank_state_wrapper .blank_state.helvetica > p{font-weight:400}.blank_state_wrapper#profile_bs{margin-top:60px}.blank_state_wrapper#empty_album,.blank_state_wrapper#empty_profile_album{display:none;margin-top:-20px}.blank_state_wrapper#empty_album .popover_container:after,.blank_state_wrapper#empty_profile_album .popover_container:after{content:"";display:table;clear:both}.blank_state_wrapper#empty_album .popover,.blank_state_wrapper#empty_profile_album .popover{margin-top:0px;margin-left:50%;left:-195px;bottom:54px}.blank_state_wrapper#events_bs{float:left;width:530px;padding:0 10px}.blank_state_wrapper#rejects_bs{padding:0 10px}.blank_state_wrapper#rejects_bs .blank_state{padding-top:70px;padding-bottom:90px}.blank_state_wrapper#home_carousel_bs{margin:36px 0;padding:0}.blank_state_wrapper#home_carousel_bs .blank_state{padding-bottom:69px}.blank_state_wrapper#home_activity_bs{padding:0;margin-bottom:50px}.blank_state_wrapper#home_activity_bs .blank_state{padding-bottom:69px}.blank_state_wrapper#match_bs{margin:0 0 50px}.blank_state_wrapper#match_no_results_bs{margin:50px 0 100px}.blank_state_wrapper#match_bs,.blank_state_wrapper#match_no_results_bs{float:left;padding:0 10px}.blank_state_wrapper#profile_bs{margin-bottom:300px}.blank_state_wrapper#questions_bs{margin-bottom:200px;padding:0 10px}.self .blank_state_wrapper#questions_bs{margin-top:20px}.blank_state_wrapper#visitors_bs{margin:40px 0 200px}.blank_state_wrapper#visitors_bs .flatbutton.browse{width:140px}.blank_state_wrapper#intoyou_bs{margin:40px 0 200px}.blank_state_wrapper#votes_bs{margin:40px 0 200px}.blank_state_wrapper#gayprivacy_bs{margin-top:60px;margin-bottom:300px}.blank_state_wrapper#essays2015_bs,.blank_state_wrapper#personality_chart_2015_bs,.blank_state_wrapper#profile_tests_bs{padding:0;margin-top:20px}.blank_state_wrapper#qm_essay_bs{padding:0}.page-left .blank_state_wrapper{padding:0}.emojione{display:inline-block;width:20px;height:20px;padding:1px}#messages .previewline .emojione{position:relative;top:3px;margin-top:-4px;height:14px;width:14px}#thread .message_body .emojione{position:relative;top:5px;margin-top:-5px}.essay .essay .emojione{position:relative;top:5px;margin-top:-8px}.essays2015-essay-content .emojione{position:relative;top:3px;margin-top:-2px}.essays2015-essay.large .essays2015-essay-content .emojione{width:32px;height:32px}.global_messaging .messages .emojione{position:relative;top:5px;margin-top:-6px}div.big_dig #questions .question .answer .note .emojione,div.big_dig #questions .question .your_explanation .value .emojione{display:inline-block;position:relative;float:none;top:3px;margin:-4px 0 0 0;height:14px;width:14px}#full_albums .photo .text .emojione{position:relative;top:5px;margin-top:-8px}#p_valentines2015 .emojione{position:relative;top:5px;margin-top:-8px;width:26px;height:26px}#photo_overlay .caption .emojione{position:relative;top:4px}#feedback_banner{position:fixed;top:0;left:0;right:0;width:auto;height:90px;line-height:90px;margin:0;padding:0;visibility:hidden;z-index:92500;color:#FFF;font-size:18px;text-align:center;-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition-property:-webkit-transform,visibility;-moz-transition-property:-moz-transform,visibility;transition-property:transform,visibility;-webkit-transition-duration:200ms,0ms;-moz-transition-duration:200ms,0ms;transition-duration:200ms,0ms;-webkit-transition-delay:0ms,200ms;-moz-transition-delay:0ms,200ms;transition-delay:0ms,200ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}#feedback_banner.success{background:#00d280}#feedback_banner.error{background:#fb674e}#feedback_banner .inner{opacity:0;-webkit-transform:translateY(15px);-moz-transform:translateY(15px);-ms-transform:translateY(15px);-o-transform:translateY(15px);transform:translateY(15px);-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;transition-property:transform,opacity;-webkit-transition-duration:200ms;-moz-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}#feedback_banner.show{visibility:visible;-webkit-transition-delay:0ms;-moz-transition-delay:0ms;transition-delay:0ms;-webkit-transform:translateY(0%);-moz-transform:translateY(0%);-ms-transform:translateY(0%);-o-transform:translateY(0%);transform:translateY(0%)}#feedback_banner.show .inner{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px);-webkit-transition-delay:150ms;-moz-transition-delay:150ms;transition-delay:150ms}#feedback_banner a{color:inherit;text-decoration:underline}#feedback_banner.success a:hover{color:#d6f4df}#feedback_banner.error a:hover{color:#ffc0bb}a.flatbutton{display:block}button.flatbutton{border:none;padding:0;vertical-align:top}a.flatbutton,button.flatbutton{width:120px;height:42px;line-height:41px;font-size:15px;white-space:nowrap;color:#fff;text-align:center;text-transform:none;overflow:hidden;border-radius:2px;-webkit-transition-property:background-color,color,border;-moz-transition-property:background-color,color,border;transition-property:background-color,color,border;-webkit-transition-duration:75ms;-moz-transition-duration:75ms;transition-duration:75ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease;cursor:pointer}a.flatbutton:hover,a.flatbutton.hover,button.flatbutton:hover,button.flatbutton.hover{color:#fff}a.flatbutton,a.flatbutton.okblue,button.flatbutton,button.flatbutton.okblue{background-color:#3260c7}a.flatbutton:hover,a.flatbutton.hover,a.flatbutton.okblue:hover,a.flatbutton.okblue.hover,button.flatbutton:hover,button.flatbutton.hover,button.flatbutton.okblue:hover,button.flatbutton.okblue.hover{background-color:#4c7bd9}a.flatbutton:active,a.flatbutton.okblue:active,button.flatbutton:active,button.flatbutton.okblue:active{background-color:#376bd5}a.flatbutton.hollow,a.flatbutton.okblue.hollow,button.flatbutton.hollow,button.flatbutton.okblue.hollow{background:none;color:#3260c7;border:1px solid #3260c7}a.flatbutton.hollow:hover,a.flatbutton.hollow.hover,a.flatbutton.okblue.hollow:hover,a.flatbutton.okblue.hollow.hover,button.flatbutton.hollow:hover,button.flatbutton.hollow.hover,button.flatbutton.okblue.hollow:hover,button.flatbutton.okblue.hollow.hover{color:#4c7bd9;border-color:#4c7bd9}a.flatbutton.hollow:active,a.flatbutton.okblue.hollow:active,button.flatbutton.hollow:active,button.flatbutton.okblue.hollow:active{color:#376bd5;border-color:#376bd5}a.flatbutton.blue,button.flatbutton.blue{background-color:#3260c7}a.flatbutton.blue:hover,a.flatbutton.blue.hover,button.flatbutton.blue:hover,button.flatbutton.blue.hover{background-color:#4c7bd9}a.flatbutton.blue:active,button.flatbutton.blue:active{background-color:#376bd5}a.flatbutton.blue.hollow,button.flatbutton.blue.hollow{background:none;color:#3260c7;border:1px solid #3260c7}a.flatbutton.blue.hollow:hover,a.flatbutton.blue.hollow.hover,button.flatbutton.blue.hollow:hover,button.flatbutton.blue.hollow.hover{color:#4c7bd9;border-color:#4c7bd9}a.flatbutton.blue.hollow:active,button.flatbutton.blue.hollow:active{color:#376bd5;border-color:#376bd5}a.flatbutton.yellow,button.flatbutton.yellow{background-color:#f8c637}a.flatbutton.yellow:hover,a.flatbutton.yellow.hover,button.flatbutton.yellow:hover,button.flatbutton.yellow.hover{background-color:#ffd939}a.flatbutton.yellow:active,button.flatbutton.yellow:active{background-color:#ffd420}a.flatbutton.yellow.hollow,button.flatbutton.yellow.hollow{background:none;color:#f8c637;border:1px solid #f8c637}a.flatbutton.yellow.hollow:hover,a.flatbutton.yellow.hollow.hover,button.flatbutton.yellow.hollow:hover,button.flatbutton.yellow.hollow.hover{color:#ffd939;border-color:#ffd939}a.flatbutton.yellow.hollow:active,button.flatbutton.yellow.hollow:active{color:#ffd420;border-color:#ffd420}a.flatbutton.gray,button.flatbutton.gray{background-color:#EEE}a.flatbutton.gray:hover,a.flatbutton.gray.hover,button.flatbutton.gray:hover,button.flatbutton.gray.hover{background-color:#F1F1F1}a.flatbutton.gray:active,button.flatbutton.gray:active{background-color:#e4e4e4}a.flatbutton.gray.hollow,button.flatbutton.gray.hollow{background:none;color:#EEE;border:1px solid #EEE}a.flatbutton.gray.hollow:hover,a.flatbutton.gray.hollow.hover,button.flatbutton.gray.hollow:hover,button.flatbutton.gray.hollow.hover{color:#F1F1F1;border-color:#F1F1F1}a.flatbutton.gray.hollow:active,button.flatbutton.gray.hollow:active{color:#e4e4e4;border-color:#e4e4e4}a.flatbutton.clear,button.flatbutton.clear{background-color:transparent}a.flatbutton.clear:hover,a.flatbutton.clear.hover,button.flatbutton.clear:hover,button.flatbutton.clear.hover{background-color:rgba(174,180,191,0.1)}a.flatbutton.clear:active,button.flatbutton.clear:active{background-color:rgba(160,167,180,0.1)}a.flatbutton.clear.hollow,button.flatbutton.clear.hollow{background:none;color:transparent;border:1px solid transparent}a.flatbutton.clear.hollow:hover,a.flatbutton.clear.hollow.hover,button.flatbutton.clear.hollow:hover,button.flatbutton.clear.hollow.hover{color:rgba(174,180,191,0.1);border-color:rgba(174,180,191,0.1)}a.flatbutton.clear.hollow:active,button.flatbutton.clear.hollow:active{color:rgba(160,167,180,0.1);border-color:rgba(160,167,180,0.1)}a.flatbutton.silver,button.flatbutton.silver{background-color:transparent}a.flatbutton.silver:hover,a.flatbutton.silver.hover,button.flatbutton.silver:hover,button.flatbutton.silver.hover{background-color:rgba(174,180,191,0.1)}a.flatbutton.silver:active,button.flatbutton.silver:active{background-color:rgba(160,167,180,0.1)}a.flatbutton.silver.hollow,button.flatbutton.silver.hollow{background:none;color:transparent;border:1px solid transparent}a.flatbutton.silver.hollow:hover,a.flatbutton.silver.hollow.hover,button.flatbutton.silver.hollow:hover,button.flatbutton.silver.hollow.hover{color:rgba(174,180,191,0.1);border-color:rgba(174,180,191,0.1)}a.flatbutton.silver.hollow:active,button.flatbutton.silver.hollow:active{color:rgba(160,167,180,0.1);border-color:rgba(160,167,180,0.1)}a.flatbutton.red,button.flatbutton.red{background-color:#f95133}a.flatbutton.red:hover,a.flatbutton.red.hover,button.flatbutton.red:hover,button.flatbutton.red.hover{background-color:#fb674e}a.flatbutton.red:active,button.flatbutton.red:active{background-color:#fa5235}a.flatbutton.red.hollow,button.flatbutton.red.hollow{background:none;color:#f95133;border:1px solid #f95133}a.flatbutton.red.hollow:hover,a.flatbutton.red.hollow.hover,button.flatbutton.red.hollow:hover,button.flatbutton.red.hollow.hover{color:#fb674e;border-color:#fb674e}a.flatbutton.red.hollow:active,button.flatbutton.red.hollow:active{color:#fa5235;border-color:#fa5235}a.flatbutton.white,button.flatbutton.white{background-color:#FFF}a.flatbutton.white:hover,a.flatbutton.white.hover,button.flatbutton.white:hover,button.flatbutton.white.hover{background-color:#ebedf2}a.flatbutton.white:active,button.flatbutton.white:active{background-color:#dcdfe8}a.flatbutton.white.hollow,button.flatbutton.white.hollow{background:none;color:#FFF;border:1px solid #FFF}a.flatbutton.white.hollow:hover,a.flatbutton.white.hollow.hover,button.flatbutton.white.hollow:hover,button.flatbutton.white.hollow.hover{color:#ebedf2;border-color:#ebedf2}a.flatbutton.white.hollow:active,button.flatbutton.white.hollow:active{color:#dcdfe8;border-color:#dcdfe8}a.flatbutton.green,button.flatbutton.green{background-color:#00d280}a.flatbutton.green:hover,a.flatbutton.green.hover,button.flatbutton.green:hover,button.flatbutton.green.hover{background-color:#48e588}a.flatbutton.green:active,button.flatbutton.green:active{background-color:#32e279}a.flatbutton.green.hollow,button.flatbutton.green.hollow{background:none;color:#00d280;border:1px solid #00d280}a.flatbutton.green.hollow:hover,a.flatbutton.green.hollow.hover,button.flatbutton.green.hollow:hover,button.flatbutton.green.hollow.hover{color:#48e588;border-color:#48e588}a.flatbutton.green.hollow:active,button.flatbutton.green.hollow:active{color:#32e279;border-color:#32e279}a.flatbutton.teal,button.flatbutton.teal{background-color:#30b7c4}a.flatbutton.teal:hover,a.flatbutton.teal.hover,button.flatbutton.teal:hover,button.flatbutton.teal.hover{background-color:#4fc5d0}a.flatbutton.teal:active,button.flatbutton.teal:active{background-color:#3bbecb}a.flatbutton.teal.hollow,button.flatbutton.teal.hollow{background:none;color:#30b7c4;border:1px solid #30b7c4}a.flatbutton.teal.hollow:hover,a.flatbutton.teal.hollow.hover,button.flatbutton.teal.hollow:hover,button.flatbutton.teal.hollow.hover{color:#4fc5d0;border-color:#4fc5d0}a.flatbutton.teal.hollow:active,button.flatbutton.teal.hollow:active{color:#3bbecb;border-color:#3bbecb}a.flatbutton.silver,a.flatbutton.silver:hover,a.flatbutton.silver.hover,a.flatbutton.clear,a.flatbutton.clear:hover,a.flatbutton.clear.hover,a.flatbutton.gray,a.flatbutton.gray:hover,a.flatbutton.gray.hover,a.flatbutton.white,a.flatbutton.white:hover,a.flatbutton.white.hover,a.flatbutton.hollow,a.flatbutton.hollow:hover,a.flatbutton.hollow.hover,button.flatbutton.silver,button.flatbutton.silver:hover,button.flatbutton.silver.hover,button.flatbutton.clear,button.flatbutton.clear:hover,button.flatbutton.clear.hover,button.flatbutton.gray,button.flatbutton.gray:hover,button.flatbutton.gray.hover,button.flatbutton.white,button.flatbutton.white:hover,button.flatbutton.white.hover,button.flatbutton.hollow,button.flatbutton.hollow:hover,button.flatbutton.hollow.hover{line-height:39px}a.flatbutton.silver,a.flatbutton.silver:hover,a.flatbutton.silver.hover,a.flatbutton.gray,a.flatbutton.gray:hover,a.flatbutton.gray.hover,a.flatbutton.white,a.flatbutton.white:hover,a.flatbutton.white.hover,button.flatbutton.silver,button.flatbutton.silver:hover,button.flatbutton.silver.hover,button.flatbutton.gray,button.flatbutton.gray:hover,button.flatbutton.gray.hover,button.flatbutton.white,button.flatbutton.white:hover,button.flatbutton.white.hover{border:1px solid #ccd0d9;color:#5e6573}a.flatbutton.clear.light-bg:not([disabled]),button.flatbutton.clear.light-bg:not([disabled]){color:#5e6573;border:1px solid #ccd0d9}a.flatbutton.clear.dark-bg:not([disabled]),button.flatbutton.clear.dark-bg:not([disabled]){color:#d5e0f8;border:1px solid #4879c1}a.flatbutton.gray,button.flatbutton.gray{color:#5e6573}a.flatbutton.black,button.flatbutton.black{color:#fff}a.flatbutton.disabled,a.flatbutton:disabled,button.flatbutton.disabled,button.flatbutton:disabled{cursor:default;color:#949aa6}a.flatbutton.disabled:focus,a.flatbutton:disabled:focus,button.flatbutton.disabled:focus,button.flatbutton:disabled:focus{box-shadow:none}a.flatbutton.disabled,a.flatbutton.disabled:hover,a.flatbutton.disabled.hover,a.flatbutton:disabled,a.flatbutton:disabled:hover,a.flatbutton:disabled.hover,button.flatbutton.disabled,button.flatbutton.disabled:hover,button.flatbutton.disabled.hover,button.flatbutton:disabled,button.flatbutton:disabled:hover,button.flatbutton:disabled.hover{background-color:#ebedf2}a.flatbutton.disabled.faded,a.flatbutton:disabled.faded,button.flatbutton.disabled.faded,button.flatbutton:disabled.faded{color:#fafafa}a.flatbutton.disabled.faded,a.flatbutton.disabled.faded:hover,a.flatbutton.disabled.faded.hover,a.flatbutton:disabled.faded,a.flatbutton:disabled.faded:hover,a.flatbutton:disabled.faded.hover,button.flatbutton.disabled.faded,button.flatbutton.disabled.faded:hover,button.flatbutton.disabled.faded.hover,button.flatbutton:disabled.faded,button.flatbutton:disabled.faded:hover,button.flatbutton:disabled.faded.hover{background-color:#ebedf2}a.flatbutton.disabled.glow,a.flatbutton:disabled.glow,button.flatbutton.disabled.glow,button.flatbutton:disabled.glow{-webkit-animation:none;-moz-animation:none;animation:none}a.flatbutton.big,button.flatbutton.big{min-width:140px;height:50px;line-height:49px;font-size:16px;font-weight:400;border-radius:4px}a.flatbutton.big.silver,a.flatbutton.big.clear,a.flatbutton.big.white,button.flatbutton.big.silver,button.flatbutton.big.clear,button.flatbutton.big.white{line-height:47px}a.flatbutton.fitted,button.flatbutton.fitted{width:auto;padding:0 20px}a.flatbutton.rainbow,button.flatbutton.rainbow{position:relative;overflow:hidden}a.flatbutton.rainbow:after,button.flatbutton.rainbow:after{content:"";position:absolute;height:100%;top:0;left:100%;width:200%;pointer-events:none;z-index:1;background:-webkit-linear-gradient(-315deg,transparent 0%,transparent 17.5%,#db2e1f 18%,#db2e1f 27%,#f16900 27.5%,#f16900 37%,#feac00 37.5%,#feac00 50%,#4ab42f 50.5%,#4ab42f 63%,#008ad8 64%,#008ad8 74%,#7d208c 74.5%,#7d208c 83%,transparent 83.5%,transparent 100%);background:linear-gradient(45deg,transparent 0%,transparent 17.5%,#db2e1f 18%,#db2e1f 27%,#f16900 27.5%,#f16900 37%,#feac00 37.5%,#feac00 50%,#4ab42f 50.5%,#4ab42f 63%,#008ad8 64%,#008ad8 74%,#7d208c 74.5%,#7d208c 83%,transparent 83.5%,transparent 100%);-webkit-transition:left 0ms linear;-moz-transition:left 0ms linear;transition:left 0ms linear}a.flatbutton.rainbow:hover:after,button.flatbutton.rainbow:hover:after{left:-200%;-webkit-transition-duration:800ms;-moz-transition-duration:800ms;transition-duration:800ms}a.flatbutton.rainbow > span,button.flatbutton.rainbow > span{position:relative;z-index:2}.okcountdown.hasflip{height:69px;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.okcountdown.hasflip .colon{width:12px;height:69px;line-height:64px;color:#5e6573;font-size:32px;font-weight:300;font-family:'Open Sans',sans-serif}.okcountdown.hasflip .flipper{background:#949aa6;color:#fff;position:relative;width:51px;height:69px;-webkit-perspective:800px;-moz-perspective:800px;perspective:800px;font-weight:300;font-family:'Open Sans',sans-serif;font-size:36px;border-radius:4px}.okcountdown.hasflip .flipper .background_top{background:#474d59}.okcountdown.hasflip .flipper .background_bottom{background:#5e6573}.cssanimations .okcountdown.hasflip .flipper.flip_down .background_top{background:#3c414b}.cssanimations .okcountdown.hasflip .flipper.flip_down .front{background:#474d59}.cssanimations .okcountdown.hasflip .flipper.flip_down .back{background:#5e6573}.cssanimations .okcountdown.hasflip .flipper.flip_down.flip .background_top{background:#474d59}.cssanimations .okcountdown.hasflip .flipper.flip_down.flip .background_bottom{background:#535965}.cssanimations .okcountdown.hasflip .flipper.flip_up .background_bottom{background:#535965}.cssanimations .okcountdown.hasflip .flipper.flip_up .front{background:#5e6573}.cssanimations .okcountdown.hasflip .flipper.flip_up .back{background:#474d59}.okcountdown.hasflip .flipper.flip .background_bottom{background:#5e6573}.okcountdown.hasflip .flipper.flip .background_top{background:#3c414b}.okcountdown.hasflip .flipper .background_top,.okcountdown.hasflip .flipper .background_bottom,.okcountdown.hasflip .flipper .front,.okcountdown.hasflip .flipper .back{display:block;position:absolute;left:0;width:51px;height:34px;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.okcountdown.hasflip .flipper .background_top{top:0;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;line-height:69px}.okcountdown.hasflip .flipper .background_bottom{bottom:0;overflow:hidden;border-bottom-left-radius:4px;border-bottom-right-radius:4px;line-height:0}.okcountdown.hasflip .flipper .front,.okcountdown.hasflip .flipper .back{left:1px;width:49px;height:34px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}.no-cssanimations .okcountdown.hasflip .flipper .front,.no-cssanimations .okcountdown.hasflip .flipper .back{display:none}.cssanimations .okcountdown.hasflip .flipper.flip_down .front,.cssanimations .okcountdown.hasflip .flipper.flip_down .back{top:0}.cssanimations .okcountdown.hasflip .flipper.flip_down .front{z-index:900;-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg);-o-transform:rotateX(0deg);transform:rotateX(0deg);overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;line-height:69px;-webkit-transform-origin:0 bottom;-moz-transform-origin:0 bottom;-ms-transform-origin:0 bottom;-o-transform-origin:0 bottom;transform-origin:0 bottom}.cssanimations .okcountdown.hasflip .flipper.flip_down .back{z-index:800;overflow:hidden;border-bottom-left-radius:4px;border-bottom-right-radius:4px;line-height:0;-webkit-transform:rotateX(180deg) translateY(35px);-moz-transform:rotateX(180deg) translateY(35px);-ms-transform:rotateX(180deg) translateY(35px);-o-transform:rotateX(180deg) translateY(35px);transform:rotateX(180deg) translateY(35px);-webkit-transform-origin:0 bottom;-moz-transform-origin:0 bottom;-ms-transform-origin:0 bottom;-o-transform-origin:0 bottom;transform-origin:0 bottom}.cssanimations .okcountdown.hasflip .flipper.flip_down.flip .front{-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-ms-transform:rotateX(-180deg);-o-transform:rotateX(-180deg);transform:rotateX(-180deg)}.cssanimations .okcountdown.hasflip .flipper.flip_down.flip .back{-webkit-transform:rotateX(0deg) translateY(35px);-moz-transform:rotateX(0deg) translateY(35px);-ms-transform:rotateX(0deg) translateY(35px);-o-transform:rotateX(0deg) translateY(35px);transform:rotateX(0deg) translateY(35px)}.cssanimations .okcountdown.hasflip .flipper.flip_up .front,.cssanimations .okcountdown.hasflip .flipper.flip_up .back{top:50%}.cssanimations .okcountdown.hasflip .flipper.flip_up .front{z-index:900;-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg);-o-transform:rotateX(0deg);transform:rotateX(0deg);overflow:hidden;border-bottom-left-radius:4px;border-bottom-right-radius:4px;line-height:0}.cssanimations .okcountdown.hasflip .flipper.flip_up .back{z-index:800;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;line-height:69px;-webkit-transform:rotateX(-180deg) translateY(-35px);-moz-transform:rotateX(-180deg) translateY(-35px);-ms-transform:rotateX(-180deg) translateY(-35px);-o-transform:rotateX(-180deg) translateY(-35px);transform:rotateX(-180deg) translateY(-35px)}.cssanimations .okcountdown.hasflip .flipper.flip_up.flip .front{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg)}.cssanimations .okcountdown.hasflip .flipper.flip_up.flip .back{-webkit-transform:rotateX(0deg) translateY(-35px);-moz-transform:rotateX(0deg) translateY(-35px);-ms-transform:rotateX(0deg) translateY(-35px);-o-transform:rotateX(0deg) translateY(-35px);transform:rotateX(0deg) translateY(-35px)}.okcountdown.hasflip .flipper.no_transition .background_top,.okcountdown.hasflip .flipper.no_transition .background_bottom,.okcountdown.hasflip .flipper.no_transition .front,.okcountdown.hasflip .flipper.no_transition .back{-webkit-transition:none;-moz-transition:none;transition:none}div.discountbanner #freebie_countdown .okcountdown .flipper{background:#4c7bd9;color:#fff}div.discountbanner #freebie_countdown .okcountdown .flipper .background_top{background:#104da1}div.discountbanner #freebie_countdown .okcountdown .flipper .background_bottom{background:#3260c7}.cssanimations div.discountbanner #freebie_countdown .okcountdown .flipper.flip_down .background_top{background:#0e428a}.cssanimations div.discountbanner #freebie_countdown .okcountdown .flipper.flip_down .front{background:#104da1}.cssanimations div.discountbanner #freebie_countdown .okcountdown .flipper.flip_down .back{background:#3260c7}.cssanimations div.discountbanner #freebie_countdown .okcountdown .flipper.flip_down.flip .background_top{background:#104da1}.cssanimations div.discountbanner #freebie_countdown .okcountdown .flipper.flip_down.flip .background_bottom{background:#2d56b3}.cssanimations div.discountbanner #freebie_countdown .okcountdown .flipper.flip_up .background_bottom{background:#2d56b3}.cssanimations div.discountbanner #freebie_countdown .okcountdown .flipper.flip_up .front{background:#3260c7}.cssanimations div.discountbanner #freebie_countdown .okcountdown .flipper.flip_up .back{background:#104da1}div.discountbanner #freebie_countdown .okcountdown .flipper.flip .background_bottom{background:#3260c7}div.discountbanner #freebie_countdown .okcountdown .flipper.flip .background_top{background:#0e428a}.okmasthead.alistpromo.countdown .okcountdown .flipper{background:#104da1;color:#fff;font-weight:300}.okmasthead.alistpromo.countdown .okcountdown .flipper .background_top{background:#3260c7}.okmasthead.alistpromo.countdown .okcountdown .flipper .background_bottom{background:#4c7bd9}.cssanimations .okmasthead.alistpromo.countdown .okcountdown .flipper.flip_down .background_top{background:#2d56b3}.cssanimations .okmasthead.alistpromo.countdown .okcountdown .flipper.flip_down .front{background:#3260c7}.cssanimations .okmasthead.alistpromo.countdown .okcountdown .flipper.flip_down .back{background:#4c7bd9}.cssanimations .okmasthead.alistpromo.countdown .okcountdown .flipper.flip_down.flip .background_top{background:#3260c7}.cssanimations .okmasthead.alistpromo.countdown .okcountdown .flipper.flip_down.flip .background_bottom{background:#376bd5}.cssanimations .okmasthead.alistpromo.countdown .okcountdown .flipper.flip_up .background_bottom{background:#376bd5}.cssanimations .okmasthead.alistpromo.countdown .okcountdown .flipper.flip_up .front{background:#4c7bd9}.cssanimations .okmasthead.alistpromo.countdown .okcountdown .flipper.flip_up .back{background:#3260c7}.okmasthead.alistpromo.countdown .okcountdown .flipper.flip .background_bottom{background:#4c7bd9}.okmasthead.alistpromo.countdown .okcountdown .flipper.flip .background_top{background:#2d56b3}.modal.incognito-modal,#incognito_promo{margin-top:150px;padding:0}.modal.incognito-modal:after,#incognito_promo:after{content:"";display:table;clear:both}.modal.incognito-modal .content,#incognito_promo .content{margin:0}.modal.incognito-modal .buttons li,#incognito_promo .buttons li{display:block;margin:0}.modal.incognito-modal .buttons .flatbutton,#incognito_promo .buttons .flatbutton{width:180px}.modal.incognito-modal .buttons .simplecancel,#incognito_promo .buttons .simplecancel{margin-top:10px;font-size:14px;line-height:20px}.incognito-modal-left{float:left;background:#4c7bd9;border-radius:4px 0 0 4px;padding:30px}.incognito-modal-left .incognito-modal-head,.incognito-modal-left .incognito-modal-body{color:white}.incognito-modal-right{float:left}.modal.incognito-modal .incognito-plan-savings,.modal.incognito-modal .incognito-modal-helper-text,.modal.incognito-modal .incognito-plan-choose{display:none}.modal.incognito-modal-packages,.incognito-modal-packages{width:640px}.modal.incognito-modal-packages .incognito-modal-left,.incognito-modal-packages .incognito-modal-left{width:363px;height:412px}.modal.incognito-modal-packages .incognito-modal-left .incognito-modal-bandit,.incognito-modal-packages .incognito-modal-left .incognito-modal-bandit{height:181px;background:url("//cdn.okccdn.com/media/img/incognito/1x/incognito-xsmall_lt.png") center 17px no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){.modal.incognito-modal-packages .incognito-modal-left .incognito-modal-bandit,.incognito-modal-packages .incognito-modal-left .incognito-modal-bandit{background-image:url("//cdn.okccdn.com/media/img/incognito/2x/incognito-xsmall_lt.png");background-size:130px 132px}}.modal.incognito-modal-packages .incognito-modal-left .incognito-modal-head,.incognito-modal-packages .incognito-modal-left .incognito-modal-head{font-weight:400;margin-bottom:1px;font-size:24px;line-height:34px}.modal.incognito-modal-packages .incognito-modal-left .incognito-modal-body,.incognito-modal-packages .incognito-modal-left .incognito-modal-body{font-size:15px;line-height:22px}.modal.incognito-modal-packages .incognito-modal-right,.incognito-modal-packages .incognito-modal-right{width:277px;padding:28px 18px}.modal.incognito-modal-packages .buttons,.incognito-modal-packages .buttons{margin-top:43px}.incognito-modal-feature{position:relative;padding-left:30px;padding-bottom:33px;text-align:left}.incognito-modal-feature .okicon{display:inline-block;position:absolute;left:0;top:0;font-size:18px;color:#00d280}.incognito-modal-feature .incognito-modal-head{padding-bottom:11px}#incognito_promo.modal .incognito-modal-carousel{overflow:hidden;height:132px;margin-bottom:16px}#incognito_promo.modal .incognito-modal-slides{width:1212px;height:132px;-webkit-transition-property:-webkit-transform,margin-left;-moz-transition-property:-moz-transform,margin-left;transition-property:transform,margin-left;-webkit-transition-duration:300ms;-moz-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}#incognito_promo.modal .incognito-modal-slide{float:left;width:303px;height:132px}#incognito_promo.modal .incognito-modal-carousel-nav{width:72px;margin:0 auto}#incognito_promo.modal .incognito-modal-carousel-nav-button{display:block;float:left;width:18px;height:18px;padding:4px;background:transparent;border:0;padding:0;cursor:pointer}#incognito_promo.modal .incognito-modal-carousel-nav-button:before{content:"";display:block;background:#104da1;width:10px;height:10px;border-radius:5px;margin:0 auto}#incognito_promo.modal .incognito-modal-carousel-nav-button:hover:before{background:#9dbaf2}#incognito_promo.modal .incognito-modal-carousel-nav.incognito-modal-slide-0 .incognito-modal-carousel-nav-button[data-index="0"]:before{background:#fff}#incognito_promo.modal .incognito-modal-carousel.incognito-modal-slide-0 .incognito-modal-slides{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);-ms-transform:translateX(0px);-o-transform:translateX(0px);transform:translateX(0px)}#incognito_promo.modal .incognito-modal-carousel-nav.incognito-modal-slide-1 .incognito-modal-carousel-nav-button[data-index="1"]:before{background:#fff}#incognito_promo.modal .incognito-modal-carousel.incognito-modal-slide-1 .incognito-modal-slides{-webkit-transform:translateX(-303px);-moz-transform:translateX(-303px);-ms-transform:translateX(-303px);-o-transform:translateX(-303px);transform:translateX(-303px)}#incognito_promo.modal .incognito-modal-carousel-nav.incognito-modal-slide-2 .incognito-modal-carousel-nav-button[data-index="2"]:before{background:#fff}#incognito_promo.modal .incognito-modal-carousel.incognito-modal-slide-2 .incognito-modal-slides{-webkit-transform:translateX(-606px);-moz-transform:translateX(-606px);-ms-transform:translateX(-606px);-o-transform:translateX(-606px);transform:translateX(-606px)}#incognito_promo.modal .incognito-modal-carousel-nav.incognito-modal-slide-3 .incognito-modal-carousel-nav-button[data-index="3"]:before{background:#fff}#incognito_promo.modal .incognito-modal-carousel.incognito-modal-slide-3 .incognito-modal-slides{-webkit-transform:translateX(-909px);-moz-transform:translateX(-909px);-ms-transform:translateX(-909px);-o-transform:translateX(-909px);transform:translateX(-909px)}.incognito-modal-form{text-align:left}.okform label.radio.incognito-plan{display:block;padding:29px 0;padding-left:54px;margin:0;color:#949aa6;border-radius:4px;border-bottom:1px solid #f3f5f9;white-space:nowrap}.okform label.radio.incognito-plan .icon{top:50%;margin-top:-9px;left:28px}.okform label.radio.incognito-plan strong{color:#474d59}.okform label.radio.incognito-plan.incognito-plan-selected{box-shadow:inset 0 0 0 2px #9dbaf2}.incognito-modal-nonus .okform label.radio.incognito-plan{padding-left:44px}.incognito-modal-nonus .okform label.radio.incognito-plan .icon{left:18px}.okmasthead.incognito-masthead{background:#07408d;border-bottom:1px solid #4c7bd9;height:130px}.okmasthead.incognito-masthead .inner{width:1090px}.okmasthead.incognito-masthead .text{padding-top:32px;padding-bottom:38px;padding-left:214px;margin-left:0;color:#d5e0f8;width:824px;background:url("//cdn.okccdn.com/media/img/incognito/1x/incognito-small.png") left 53px no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){.okmasthead.incognito-masthead .text{background-image:url("//cdn.okccdn.com/media/img/incognito/2x/incognito-small.png");background-size:150px 149px}}.okmasthead.incognito-masthead .text em{font-style:normal;font-weight:600;color:#ffd939}.okmasthead.incognito-masthead .text p{font-size:20px;line-height:30px}.okmasthead.incognito-masthead .button{padding-top:37px;padding-right:72px}.okmasthead.incognito-masthead .button .flatbutton{width:143px;font-size:18px}div.upgrade_ad.incognito .wrapper{padding-left:123px;background:#4c7bd9;color:#fff}div.upgrade_ad.incognito .text b,div.upgrade_ad.incognito .text strong{margin-right:4px}div.upgrade_ad.incognito .icon{width:77px;height:65px;top:auto;bottom:0;margin-top:0;left:21px;background:url("//cdn.okccdn.com/media/img/incognito/1x/incognito-xxsmall.png") left 23px no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){div.upgrade_ad.incognito .icon{background-image:url("//cdn.okccdn.com/media/img/incognito/2x/incognito-xxsmall.png");background-size:77px 76px}}div.upgrade_ad.incognito .arrow{background:none;color:#3260c7;height:30px;margin-top:-15px;text-align:right;font-size:18px;line-height:30px}div.upgrade_ad.incognito .arrow:before{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:">"}.page-right div.upgrade_ad.incognito{margin-bottom:30px}.page-right div.upgrade_ad.incognito .wrapper{padding-left:78px}.page-right div.upgrade_ad.incognito .icon{width:48px;height:44px;top:auto;bottom:0;margin-top:0;left:14px;background:url("//cdn.okccdn.com/media/img/incognito/1x/incognito-xxxsmall.png") left top no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){.page-right div.upgrade_ad.incognito .icon{background-image:url("//cdn.okccdn.com/media/img/incognito/2x/incognito-xxxsmall.png");background-size:48px 48px}}.incognito-cover{position:absolute;top:0;left:0;right:0;overflow:hidden}.incognito-cover-profile{background:rgba(40,77,152,0.7);color:#76ee9d;text-align:center;height:40px;-webkit-transition:height 150ms ease-in,background 75ms ease-in;-moz-transition:height 150ms ease-in,background 75ms ease-in;transition:height 150ms ease-in,background 75ms ease-in;font-size:15px;line-height:40px}.incognito-cover-button{cursor:default;background:#104da1;height:65px;padding-left:3px;text-align:left;color:#48e588;font-size:16px;line-height:65px}.incognito-toggler{cursor:pointer;background:#f3f5f9;border-radius:2px 2px 0 0;height:60px !important;border:0}.nav-user-menu .incognito-toggler .nav-user-menu-item{height:60px;line-height:61px;padding-top:0;padding-bottom:0;-webkit-transition:background 150ms ease-in;-moz-transition:background 150ms ease-in;transition:background 150ms ease-in}.nav-user-menu .incognito-toggler + li:before{background:none}.incognito-toggle{float:right;width:34px;padding:5px 0;margin-top:14px;cursor:pointer}.incognito-toggle:after{content:"";display:table;clear:both}.incognito-toggle .incognito-switch{display:block;float:left;width:34px;height:22px}.incognito-switch{display:block;position:relative;border-radius:11px;-webkit-transition:background 150ms ease-in;-moz-transition:background 150ms ease-in;transition:background 150ms ease-in}.incognito-switch-position{display:block;position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;-webkit-transition:left 150ms ease-in;-moz-transition:left 150ms ease-in;transition:left 150ms ease-in}.incognito-toggler-label{float:left}.incognito-toggler-label .incognito-toggler-labelstate{display:none}.nav-right.incognito-state-on .incognito-switch{background:#00d280}.nav-right.incognito-state-on .incognito-switch-position{left:15px}.nav-right.incognito-state-on .incognito-toggler-label .incognito-toggler-label-on{display:inline}.nav-right.incognito-state-on #spotlighttokens{display:none}.nav-right.incognito-state-on .incognito-cover{opacity:1;visibility:visible;-webkit-transition:visibility 0ms linear,opacity 150ms ease 10ms;-moz-transition:visibility 0ms linear,opacity 150ms ease 10ms;transition:visibility 0ms linear,opacity 150ms ease 10ms}.nav-right.incognito-state-on .incognito-cover-profile:hover{background:rgba(40,77,152,0.5)}.nav-right.incognito-state-off .incognito-cover{opacity:0;visibility:hidden;-webkit-transition:opacity 150ms ease 0ms,visibility 0ms linear 250ms;-moz-transition:opacity 150ms ease 0ms,visibility 0ms linear 250ms;transition:opacity 150ms ease 0ms,visibility 0ms linear 250ms}.nav-right.incognito-state-off .incognito-toggler .nav-user-menu-item{color:#ccd0d9}.nav-right.incognito-state-off .incognito-toggler .nav-user-menu-item .incognito-switch{background:#ccd0d9}.nav-right.incognito-state-off .incognito-toggler .nav-user-menu-item:hover{color:#aeb4bf}.nav-right.incognito-state-off .incognito-toggler .nav-user-menu-item:hover .incognito-switch{background:#aeb4bf}.nav-right.incognito-state-off .incognito-switch-position{left:3px}.nav-right.incognito-state-off .incognito-toggler-label .incognito-toggler-label-off{display:inline}#incognito-toggler-popover{position:absolute;right:90px;top:78px;text-align:center;width:320px}#incognito-toggler-popover,#incognito-toggler-popover *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#incognito-toggler-popover h2.title{padding-top:158px;background:url("//cdn.okccdn.com/media/img/incognito/1x/incognito-xsmall_lt.png") center 6px no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#incognito-toggler-popover h2.title{background-image:url("//cdn.okccdn.com/media/img/incognito/2x/incognito-xsmall_lt.png");background-size:130px 132px}}#incognito-toggler-popover .desc{font-size:15px;line-height:22px}#incognito-toggler-popover .big.blue.flatbutton.close{width:180px}#incognito-toggler-popover .tail{margin-left:80px;width:10px;height:10px;top:-5px}#incognito-toggler-popover.nophoto{right:10px}#incognito-toggler-popover.nophoto .tail{margin-left:115px}.modal.incognito-upsell{width:467px;margin-top:100px}.modal.incognito-upsell .heading{font-weight:400;color:#fff;background:#4c7bd9;font-size:24px;line-height:98px}.modal.incognito-upsell .incognito-upsell-head{padding-top:6px;padding-bottom:0;font-weight:400;font-size:24px;line-height:38px}.modal.incognito-upsell .incognito-upsell-subhead{padding-bottom:20px;font-size:15px;line-height:32px}.modal.incognito-upsell .buttons{margin-top:30px}.modal.incognito-upsell .buttons .flatbutton{width:180px}.modal.incognito-upsell .buttons .simplecancel{margin-top:10px;margin-bottom:12px}.incognito-upsell-list{margin-left:91px}.incognito-upsell-list-item{position:relative;text-align:left;padding-left:28px;font-size:18px;line-height:33px}.incognito-upsell-list-item:before{display:block;position:absolute;top:7px;left:0;color:#00d280;font-size:18px;line-height:18px;font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"c"}#p_settings .monolith #incognitoDowngrade .incognito-downgrade-comments{min-height:106px}#p_settings .monolith #incognitoDowngrade #incognito-downgrade-passwordContainer{display:block;float:left}#p_settings .monolith #incognitoDowngrade label[for="incognito-downgrade-deletebilling"]{margin-top:20px}#p_settings .monolith #incognitoDowngrade .incognito-downgrade-deletebilling-wrapper label{margin-top:20px}#p_settings .monolith #incognitoDowngrade .incognito-downgrade-submit{width:180px}body:not(.okc2014) .okmasthead.incognito-masthead,body:not(.okc2014) .okmasthead.incognito-masthead .okform label,body:not(.okc2014) .modal.incognito-modal,body:not(.okc2014) .modal.incognito-modal .okform label,body:not(.okc2014) div.upgrade_ad.incognito,body:not(.okc2014) div.upgrade_ad.incognito .okform label{font-size:15px;line-height:22px}body:not(.okc2014) .okmasthead.incognito-masthead,body:not(.okc2014) .okmasthead.incognito-masthead *,body:not(.okc2014) .modal.incognito-modal,body:not(.okc2014) .modal.incognito-modal *,body:not(.okc2014) div.upgrade_ad.incognito,body:not(.okc2014) div.upgrade_ad.incognito *{font-family:'Open Sans',sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body:not(.okc2014) .okmasthead.incognito-masthead .flatbutton,body:not(.okc2014) .modal.incognito-modal .flatbutton,body:not(.okc2014) div.upgrade_ad.incognito .flatbutton{height:42px;font-size:15px;line-height:42px}body:not(.okc2014) .okmasthead.incognito-masthead .flatbutton.big,body:not(.okc2014) .modal.incognito-modal .flatbutton.big,body:not(.okc2014) div.upgrade_ad.incognito .flatbutton.big{height:50px;font-size:18px;line-height:50px}body:not(.okc2014) .okmasthead.incognito-masthead .inner{padding:0 !important}body:not(.okc2014) .modal.incognito-modal h2{padding-bottom:14px;color:#474d59;font-weight:600;font-size:18px;line-height:14px;font-weight:600;font-family:'Open Sans',sans-serif}body:not(.okc2014) .modal.incognito-modal .incognito-modal-feature h2.incognito-modal-head{padding-bottom:11px}body:not(.okc2014) .modal.incognito-modal .incognito-modal-left h2.incognito-modal-head{color:#fff}body:not(.okc2014) .modal.incognito-modal.incognito-modal-single .buttons{margin-top:2px !important;margin-bottom:0 !important}body:not(.okc2014) .modal.incognito-modal.incognito-modal-packages .buttons{margin-top:43px !important;margin-bottom:0 !important}body:not(.okc2014) div.upgrade_ad.incognito{margin-top:20px;font-size:15px;margin-bottom:-11px}body:not(.okc2014) div.upgrade_ad.incognito .text{letter-spacing:0;font-size:15px}body:not(.okc2014) div.upgrade_ad.incognito .arrow{width:14px;height:26px;right:14px;top:50%;margin-right:12px;margin-top:-13px;-webkit-transition:margin-right 200ms ease;-moz-transition:margin-right 200ms ease;transition:margin-right 200ms ease}body:not(.okc2014) div.upgrade_ad.incognito a:hover .arrow{margin-right:6px}#im_footer{overflow:visible;width:auto;position:fixed;bottom:0;right:0;z-index:91500}#global_messaging_container{position:relative;z-index:2;float:left;margin-right:40px;margin-left:-63px;width:0;height:20px}#global_messaging_container .global_messaging{position:absolute;bottom:0;left:0}#event_display_container{position:relative;z-index:1;overflow:hidden;float:left;margin:0 40px 0 -78px;width:0;height:20px;font-family:'Open Sans',sans-serif}.hasnotifications #event_display_container{overflow:visible;width:270px;margin-left:-63px;-webkit-transition:width 0s linear,margin 0s linear;-moz-transition:width 0s linear,margin 0s linear;transition:width 0s linear,margin 0s linear}#event_display_container,.remove_last_notification #event_display_container{-webkit-transition:width 250ms ease-in 250ms,margin 250ms ease-in 250ms;-moz-transition:width 250ms ease-in 250ms,margin 250ms ease-in 250ms;transition:width 250ms ease-in 250ms,margin 250ms ease-in 250ms}.has_global_messaging_panels #event_display_container{margin-right:92px}#event_display{position:absolute;width:270px;bottom:-81px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,17,53,0.16),0 0 5px 0 rgba(0,17,53,0.16);-webkit-transition:padding-top 100ms ease-in,bottom 200ms ease-in 200ms;-moz-transition:padding-top 100ms ease-in,bottom 200ms ease-in 200ms;transition:padding-top 100ms ease-in,bottom 200ms ease-in 200ms}#event_display:after{content:" ";position:absolute;z-index:201;top:0;left:0;width:270px;height:6px;background:#4c7bd9;border-top-left-radius:2px;border-top-right-radius:2px}.hasnotifications #event_display{bottom:20px}.hasnotifications.remove_last_notification #event_display{bottom:-81px}.hasnotifications.haspromo.collapsed #event_display,.hasnotifications.hasreport.collapsed #event_display{bottom:0}#event_display.no_transition,.haspromo #event_display,.hasreport #event_display{-webkit-transition:none;-moz-transition:none;transition:none}#event_display_body{position:relative;z-index:201;background:#fff;overflow:hidden;border-radius:2px;max-height:242px}.haspromo #event_display_body,.hasreport #event_display_body{border-top:0;border-top-left-radius:0;border-top-right-radius:0}#event_display_body .orbit_event{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;width:100%;height:81px;overflow:hidden;-webkit-transition:height 200ms ease-in;-moz-transition:height 200ms ease-in;transition:height 200ms ease-in;border-top:1px solid #ebedf2}#event_display_body .orbit_event,#event_display_body .orbit_event *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#event_display_body .orbit_event:first-child{border-color:#fff;border-top-left-radius:2px;border-top-right-radius:2px;margin-top:-1px}#event_display_body .orbit_event:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}#event_display_body .orbit_event .orbit_inner{padding:20px 17px}#event_display_body .orbit_event img{display:block;width:40px;height:40px;float:left;margin-right:14px;border-radius:50%}#event_display_body .orbit_event .info{padding-top:1px}#event_display_body .orbit_event .info .user{font-size:15px;color:#5e6573}#event_display_body .orbit_event .info .action{font-size:13px;line-height:20px;color:#949aa6}#event_display_body .orbit_event .okicon{font-size:14px}#event_display_body .orbit_event .okicon.i-star{color:#f8c637}#event_display_body .orbit_event .event_link{display:block;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%}#event_display_body .orbit_event .close{display:none;width:24px;height:24px;position:absolute;z-index:2;top:50%;margin-top:-12px;right:14px;font-size:13px;line-height:28px;color:#ccd0d9;text-align:center}#event_display_body .orbit_event .close:hover{color:#aeb4bf}#event_display_body .orbit_event:hover .close{display:block}#event_display_body .orbit_event.dispelled{height:0;border:0}#event_display_body .orbit_event.dispelled_hard{display:none}#im_footer.haspromo #event_display_body .orbit_event:hover a.close,#im_footer.hasreport #event_display_body .orbit_event:hover a.close{display:none}@media all and (min-width:0px){head ~ body div.im_text{overflow:scroll}:root head ~ body div.im_text{overflow-y:scroll;overflow-x:hidden}}#im_footer.prok_test_0 div.im_from_staffrobot{display:none}.okform{color:#5e6573;opacity:0;-webkit-transition:opacity 200ms ease-in-out;-moz-transition:opacity 200ms ease-in-out;transition:opacity 200ms ease-in-out}.okform.initialized{opacity:1}.okform .clearbtn,.okform .chosen-container .chosen-single abbr{position:absolute;top:10px;right:12px;width:22px;height:22px;font-size:22px;line-height:22px}.okform .clearbtn:before,.okform .chosen-container .chosen-single abbr:before{color:#949aa6;font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"X"}.okform .clearbtn:hover:before,.okform .chosen-container .chosen-single abbr:hover:before{color:#aeb4bf}.okform label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.okform label.above{display:block;margin-bottom:10px}.okform label.checkbox,.okform label.radio{vertical-align:top;position:relative;display:inline-block;padding-left:30px;margin-bottom:10px;line-height:19px}.okform label.checkbox .icon,.okform label.radio .icon{position:absolute;display:block;top:0;left:0;width:19px;height:19px;background:url('//cdn.okccdn.com/media/img/forms/form_spriteV9.png') no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){.okform label.checkbox .icon,.okform label.radio .icon{background-image:url('//cdn.okccdn.com/media/img/forms/form_spriteV9@2x.png');background-size:24px 740px}}.okform label.checkbox .icon{background-position:0 0}.okform label.checkbox:hover .icon,.okform label.checkbox.focus .icon{background-position:0 -38px}.okform label.checkbox.checked .icon{background-position:0 -76px}.okform label.checkbox.checked:hover .icon{background-position:0 -528px}.okform label.checkbox.checked.focus .icon{background-position:0 -528px}.okform label.checkbox.disabled .icon,.okform label.checkbox.disabled:hover .icon{background-position:0 -376px}.okform label.checkbox.disabled.checked .icon{background-position:0 -414px}.okform label.radio .icon{background-position:0 -114px}.okform label.radio:hover .icon{background-position:0 -152px}.okform label.radio.checked .icon{background-position:0 -191px}.okform label.radio.checked:hover .icon{background-position:0 -565px}.okform label.radio.disabled .icon,.okform label.radio.disabled:hover .icon{background-position:0 -452px}.okform label.radio.disabled.checked .icon{background-position:0 -490px}.okform input,.okform textarea{padding:9px;padding-right:16px;background:#FFF;border:1px solid #ccd0d9;color:#5e6573;margin:0 10px 10px 0;border-radius:2px;font-size:15px;line-height:22px;box-shadow:none !important;-webkit-transition:border-color 75ms ease-in;-moz-transition:border-color 75ms ease-in;transition:border-color 75ms ease-in}.okform input::-webkit-input-placeholder,.okform textarea::-webkit-input-placeholder{color:#aeb4bf}.okform input::-moz-placeholder,.okform textarea::-moz-placeholder{color:#aeb4bf}.okform input:-moz-placeholder,.okform textarea:-moz-placeholder{color:#aeb4bf}.okform input:-ms-input-placeholder,.okform textarea:-ms-input-placeholder{color:#aeb4bf}.okform input:hover,.okform textarea:hover{border-color:#aeb4bf}.okform input:focus,.okform textarea:focus{border-color:#9dbaf2}.okform input[disabled],.okform input[readonly],.okform textarea[disabled],.okform textarea[readonly]{background-color:#f4f6f6;border-color:#d5dbdb;color:#d5dbdb}.okform input[type="radio"],.okform input[type="checkbox"],.okform textarea[type="radio"],.okform textarea[type="checkbox"]{position:absolute;top:4px;left:2px;margin:0 !important;padding:0;z-index:-1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}.okform textarea{display:block;width:100%;height:160px;max-height:460px;resize:none;overflow:auto}.okform textarea.clone{position:absolute !important;top:-9999px !important;left:-9999px !important;min-height:0 !important}.okform .buttons:after{content:"";display:table;clear:both}.okform .buttons .btn{float:left;margin:0 5px 10px 0}.okform .placeholder{position:absolute;top:0;left:12px;line-height:36px;color:#aeb4bf;width:100%;text-align:left !important}.okform .inputcontainer{position:relative;display:inline-block;margin:0 10px 10px 0}.okform .inputcontainer.statussuccess .icon,.okform .inputcontainer.statussuccess .okform-feedback.message{color:#1fc174}.okform .inputcontainer.statussuccess .icon:before{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"c"}.okform .inputcontainer.statuserror input,.okform .inputcontainer.statuserror textarea,.okform .inputcontainer.statuserror .chosen-container .chosen-single{border-color:#f95133}.okform .inputcontainer.statuserror .icon,.okform .inputcontainer.statuserror .okform-feedback.message{color:#f95133}.okform .inputcontainer.statuserror .icon:before{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"!"}.okform .inputcontainer.statuserror.select .icon{display:none}.okform .inputcontainer.statussuccess input,.okform .inputcontainer.statussuccess textarea,.okform .inputcontainer.statuserror input,.okform .inputcontainer.statuserror textarea{padding-right:30px}.okform .inputcontainer.select{min-width:60px}.okform .inputcontainer.select .icon{right:25px}.okform .inputcontainer.empty .clearbtn{display:none}.okform .inputcontainer input,.okform .inputcontainer textarea{width:100%;margin:0}.okform .inputcontainer .okform-feedback.message{padding-top:5px;display:block;line-height:30px;height:30px;overflow:hidden;text-align:left;-webkit-transition:height 200ms ease-in;-moz-transition:height 200ms ease-in;transition:height 200ms ease-in}.okform .inputcontainer .okform-feedback.message.empty{padding-top:0 !important;height:0 !important}.okform .inputcontainer .icon{position:absolute;height:16px;width:16px;top:13px;right:11px;pointer-events:none;line-height:16px}.okform .inputcontainer .suggestions{position:absolute;z-index:1000;width:260px;display:block;margin-top:14px;visibility:visible;opacity:1;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;transition:opacity 200ms linear}.okform .inputcontainer .suggestions.hide{visibility:hidden;opacity:0;-webkit-transition:visibility 0s 200ms,opacity 200ms linear;-moz-transition:visibility 0s 200ms,opacity 200ms linear;transition:visibility 0s 200ms,opacity 200ms linear}.okform .inputcontainer .suggestions.left,.okform .inputcontainer .suggestions.right{width:265px;top:-75px}.okform .inputcontainer .suggestions.left .message .arrow,.okform .inputcontainer .suggestions.right .message .arrow{top:70px}.okform .inputcontainer .suggestions.left .message .arrow:after,.okform .inputcontainer .suggestions.right .message .arrow:after{content:" ";display:block;position:absolute;top:-11px}.okform .inputcontainer .suggestions.left .list,.okform .inputcontainer .suggestions.right .list{border-color:#f95133}.okform .inputcontainer .suggestions.left{left:-285px}.okform .inputcontainer .suggestions.left .message .arrow{right:-20px;left:auto;height:0;width:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid transparent;border-left:10px solid #f95133}.okform .inputcontainer .suggestions.left .message .arrow:after{right:-10px;left:auto;height:0;width:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:11px solid transparent;border-left:11px solid white}.okform .inputcontainer .suggestions.right{right:-285px}.okform .inputcontainer .suggestions.right .message .arrow{left:-20px;right:auto;height:0;width:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent;border-right:10px solid #f95133}.okform .inputcontainer .suggestions.right .message .arrow:after{left:-10px;right:auto;height:0;width:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:11px solid transparent;border-right:11px solid white}.okform .inputcontainer .suggestions .message{position:relative;height:auto;display:block;padding:10px 17px;background:#f95133;color:#FFF;overflow:visible;border-top-left-radius:5px;border-top-right-radius:5px;-webkit-transition:background-color 200ms ease-in;-moz-transition:background-color 200ms ease-in;transition:background-color 200ms ease-in}.okform .inputcontainer .suggestions .message .icon{top:15px;color:#fff}.okform .inputcontainer .suggestions .message .arrow{position:absolute;top:-20px;left:20px;height:0;width:0;border-top:10px solid transparent;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #f95133}.okform .inputcontainer .suggestions .list{max-height:200px;overflow-y:auto;margin-top:0;background:#FFF;padding:10px 0;border:1px solid #ccd0d9;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;color:#555555}.okform .inputcontainer .suggestions .list li{margin:0;padding:7px 17px;list-style:none}.okform .inputcontainer .suggestions .list li.description{font-weight:bold}.okform .inputcontainer .suggestions .list li:not(.description){cursor:pointer}.okform .inputcontainer .suggestions .list li:not(.description):hover{color:#4c7bd9}.okform .inputcontainer .suggestions .list li:not(.description) a{color:inherit}.inputcontainer.hassuggestions > .icon{display:none}.okform .inputcontainer.large input{padding-top:14px;padding-bottom:14px;padding-left:14px}.okform .inputcontainer.large .icon{right:27px;top:16px}.okform .inputcontainer.large .clearbtn{height:24px;width:24px;right:16px;top:15px;background-position:0 -671px}.okform .inputcontainer.large .clearbtn:hover{background-position:0 -715px}.okform .inputcontainer.large .placeholder{left:22px;line-height:46px}.chosen-container{position:relative;display:inline-block;vertical-align:middle;zoom:1;*display:inline;-webkit-user-select:none;-moz-user-select:none;user-select:none}.chosen-container .chosen-drop{position:absolute;top:100%;left:-9999px;z-index:1010;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px solid #aaa;border-top:0;background:#fff}.chosen-container.chosen-with-drop .chosen-drop{left:0}.chosen-container a{cursor:pointer}.chosen-container-single .chosen-single{position:relative;display:block;overflow:hidden;background-clip:padding-box;text-decoration:none;white-space:nowrap}.chosen-container-single .chosen-default{color:#aeb4bf}.chosen-container-single .chosen-single span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chosen-container-single .chosen-single abbr{position:absolute;top:6px;right:26px;display:block;width:12px;height:12px;font-size:1px}.chosen-container-single .chosen-single div{position:absolute;top:0;right:0;display:block;height:100%}.chosen-container-single .chosen-single div b{display:block;width:100%;height:100%}.chosen-container-single .chosen-search{position:relative;z-index:1010;margin:0;white-space:nowrap}.chosen-container-single .chosen-search input[type="text"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;height:auto;outline:0}.chosen-container-single .chosen-drop{background-clip:padding-box}.chosen-container-single.chosen-container-single-nosearch .chosen-search{position:absolute;left:-9999px}.chosen-container .chosen-results{position:relative;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.chosen-container .chosen-results li{display:none;margin:0;list-style:none}.chosen-container .chosen-results li.active-result{display:list-item;cursor:pointer}.chosen-container .chosen-results li.disabled-result{display:list-item;color:#ccc;cursor:default}.chosen-container .chosen-results li.highlighted{background-color:#3875d7;color:#fff;border-color:transparent}.chosen-container .chosen-results li.no-results{display:list-item;background:#f4f4f4}.chosen-container .chosen-results li.group-result{display:list-item;font-weight:bold;cursor:default}.chosen-container .chosen-results li.group-option{padding-left:15px}.chosen-container .chosen-results li em{font-style:normal;text-decoration:underline}.chosen-container-multi .chosen-choices{position:relative;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;width:100%;height:auto !important;height:1%;cursor:text}.chosen-container-multi .chosen-choices li{float:left;list-style:none}.chosen-container-multi .chosen-choices li.search-field{margin:0;padding:0;white-space:nowrap}.chosen-container-multi .chosen-choices li.search-field input[type="text"]{margin:1px 0;padding:5px;outline:0;border:0 !important;background:transparent !important;color:#666;font-size:100%;line-height:normal;border-radius:0}.chosen-container-multi .chosen-choices li.search-field .default{color:#999}.chosen-container-multi .chosen-choices li.search-choice{position:relative;margin:3px 0 3px 5px;padding:3px 20px 3px 5px;border:1px solid #aaa;border-radius:3px;background-color:#e4e4e4;background-clip:padding-box;color:#333;line-height:13px;cursor:default}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close{position:absolute;top:4px;right:3px;display:block;width:12px;height:12px;font-size:1px}.chosen-container-multi .chosen-choices li.search-choice-disabled{padding-right:5px;border:1px solid #ccc;background-color:#e4e4e4;color:#666}.chosen-container-multi .chosen-choices li.search-choice-focus{background:#d4d4d4}.chosen-container-multi .chosen-results{margin:0;padding:0}.chosen-container-multi .chosen-drop .result-selected{display:list-item;color:#ccc;cursor:default}.chosen-container-active .chosen-single{border:1px solid #5897fb}.chosen-container-active.chosen-with-drop .chosen-single{border:1px solid #aaa;-moz-border-radius-bottomright:0;border-bottom-right-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0}.chosen-container-active.chosen-with-drop .chosen-single div{border-left:none;background:transparent}.chosen-container-active .chosen-choices{border:1px solid #5897fb}.chosen-container-active .chosen-choices li.search-field input[type="text"]{color:#111}.chosen-disabled{cursor:default}.chosen-disabled .chosen-single,.chosen-disabled .chosen-choices .search-choice .search-choice-close{cursor:default}.chosen-container{position:relative;font-weight:normal}.chosen-container .chosen-single,.chosen-container .chosen-choices{position:relative;line-height:36px;padding:2px;padding-left:12px;padding-right:26px;margin:0;border:1px solid #ccd0d9;background:#FFF;color:#5e6573;border-radius:2px;-webkit-transition:border-color 75ms ease-in;-moz-transition:border-color 75ms ease-in;transition:border-color 75ms ease-in}.chosen-container .chosen-single:hover,.chosen-container .chosen-choices:hover{border-color:#aeb4bf}.chosen-container .chosen-single > div{width:12px;height:12px;top:15px;right:12px;margin-top:0;font-size:12px;line-height:12px}.chosen-container .chosen-single > div b{display:block;color:#949aa6;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity:0.7;-webkit-transition:opacity 75ms ease-in;-moz-transition:opacity 75ms ease-in;transition:opacity 75ms ease-in}.chosen-container .chosen-single > div b:before{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"w"}.chosen-container .chosen-single > abbr + div{display:none}.chosen-container .chosen-single:not(.chosen-default){padding-right:36px}.chosen-container .chosen-drop{z-index:100;width:100%;border-bottom:1px solid #ccd0d9;background:#FFF;border-radius:0 0 4px 4px}.chosen-container .chosen-drop .chosen-search{overflow:hidden;height:0;-webkit-transition-property:height;-moz-transition-property:height;transition-property:height;-webkit-transition-duration:75ms;-moz-transition-duration:75ms;transition-duration:75ms;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.chosen-container .chosen-drop .chosen-search input{padding-left:32px;background-image:url('//cdn.okccdn.com/media/img/questions/questions_spriteV3.png');background-position:10px -110px;background-repeat:no-repeat;border-bottom-left-radius:0;border-bottom-right-radius:0}.chosen-container .chosen-drop .chosen-results{max-height:222px;padding:0;margin:0;overflow:auto;-webkit-transition:max-height 75ms ease-in-out;-moz-transition:max-height 75ms ease-in-out;transition:max-height 75ms ease-in-out}.chosen-container .chosen-drop .chosen-results li{padding:5px 10px;line-height:36px}.chosen-container .chosen-drop .chosen-results li.highlighted{background:#4c7bd9}.chosen-container .chosen-drop .chosen-results li.highlighted a{color:#FFF !important}.chosen-container .chosen-drop .chosen-results li.highlighted:last-child{border-radius:0 0 4px 4px}.chosen-container .chosen-drop .chosen-results li a{color:#5e6573}.chosen-container .chosen-default{color:#aeb4bf}.chosen-container.chosen-container-active .chosen-single{border-color:#9dbaf2}.chosen-container.chosen-container-active .chosen-single > div b,.chosen-container:not(.chosen-disabled):hover .chosen-single > div b{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}.chosen-container.chosen-disabled .chosen-single{border-color:#ccd0d9 !important;background-color:#f4f6f6;color:#aeb4bf}.chosen-container.chosen-disabled .chosen-single > div b{background:url('//cdn.okccdn.com/media/img/forms/form_spriteV9.png') no-repeat 6px -338px}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){.chosen-container.chosen-disabled .chosen-single > div b{background-image:url('//cdn.okccdn.com/media/img/forms/form_spriteV9@2x.png');background-size:24px 740px}}.chosen-container.chosen-searching .chosen-drop .chosen-search{height:42px;opacity:1}.chosen-container.chosen-searching .chosen-drop .chosen-results{max-height:180px;height:180px}.chosen-container .chosen-choices{padding:2px 2px 2px 6px}.chosen-container .chosen-choices .search-choice{margin:3px 3px 3px 0;padding:3px 25px 3px 5px;line-height:22px;background:#fff;color:#5e6573}.chosen-container .chosen-choices .search-choice .search-choice-close{position:absolute;right:6px;top:50%;margin-top:-7px;width:14px;height:14px;background:url('//cdn.okccdn.com/media/img/forms/form_spriteV9.png') no-repeat 0px -603px}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){.chosen-container .chosen-choices .search-choice .search-choice-close{background-image:url('//cdn.okccdn.com/media/img/forms/form_spriteV9@2x.png');background-size:24px 740px}}.chosen-container .chosen-choices .search-choice .search-choice-close:hover{background-position:0px -637px}.chosen-container .chosen-choices .search-field input[type="text"]{color:#aeb4bf}.okmasthead{overflow:hidden;height:130px;background:#07408d;border-bottom:1px solid #4c7bd9;-webkit-transition:height 200ms ease;-moz-transition:height 200ms ease;transition:height 200ms ease}.okmasthead .inner{width:964px;margin:0 auto}.okmasthead .text{float:left;width:600px;padding-top:2px;margin-left:50px}.okmasthead .text h3,.okmasthead .text.headsubhead .head{padding-bottom:14px;color:#474d59;font-weight:600;font-size:18px;line-height:14px;font-weight:600;font-family:'Open Sans',sans-serif;color:#fff;padding-top:23px;padding-bottom:4px;font-weight:400;font-size:22px;line-height:30px}.okmasthead .text p,.okmasthead .text.headsubhead .subhead{color:#e4edfd;font-size:16px;line-height:24px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.okmasthead .button{float:right;padding-top:45px}.okmasthead .button p.btn{width:182px}.okmasthead .close{display:block;position:absolute;top:0;right:0;width:40px;height:40px}.okmasthead .close .icon{color:#e4edfd;font-size:14px;position:absolute;top:50%;left:50%;margin-left:-7px;margin-top:-7px}.okmasthead .close:hover{cursor:pointer}.okmasthead .close:hover .icon{color:#aeb4bf}body.staffbar .okmasthead .close{top:31px}.okmasthead.closed,.okmasthead.alistpromo.closed{height:0 !important}.okmasthead.closed .close,.okmasthead.alistpromo.closed .close{display:none}body.expanded .okmasthead .inner{padding-right:184px}body.expanded.okc2014 .okmasthead .inner{padding-right:0}.okmasthead.alistpromo,.okmasthead.alistpromo .inner{height:110px}.okmasthead.alistpromo .inner{position:relative}body.okc2014 .okmasthead.alistpromo .inner{width:1120px}.okmasthead.alistpromo .text{float:none;position:absolute}.okmasthead.alistpromo .button{float:none;position:absolute;top:50%;right:22px;padding-top:0;margin-top:-19px}.okmasthead.alistpromo.intoyou{border-bottom-color:#3260c7}.okmasthead.alistpromo.intoyou .button{right:125px;margin-top:-23px}.okmasthead.alistpromo.intoyou .button .flatbutton{width:185px}.okmasthead.alistpromo.intoyou .close{top:0}.okmasthead.alistpromo.intoyou .image{display:block;margin-left:40px;width:200px;height:110px;background:url("//cdn.okccdn.com/media/img/alist/pq_alist_leaderboard_intoyou.png") 0 0 no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){.okmasthead.alistpromo.intoyou .image{background-image:url("//cdn.okccdn.com/media/img/alist/pq_alist_leaderboard_intoyou@2x.png");background-size:200px auto}}.okmasthead.alistpromo.intoyou .text{top:26px;left:300px;margin:0;padding:0}.okmasthead.alistpromo.intoyou .text p{color:#fff;font-weight:300;font-family:'Open Sans',sans-serif;font-size:22px;line-height:30px}.okmasthead.alistpromo.intoyou .text p strong{font-weight:400}.okmasthead.alistpromo.intoyou .flatbutton{font-size:18px;font-weight:300}.okmasthead.alistpromo.countdown{padding-top:10px}.okmasthead.alistpromo.countdown .button{right:125px;margin-top:-23px}.okmasthead.alistpromo.countdown .button .flatbutton{width:185px}.okmasthead.alistpromo.countdown .close{top:0}.okmasthead.alistpromo.countdown,.okmasthead.alistpromo.countdown .text{height:130px}.okmasthead.alistpromo.countdown p span{display:block}.okmasthead.alistpromo.countdown p span.textcountdown{display:inline}.okmasthead.alistpromo.countdown .okcountdown{position:absolute;left:72px;top:50%;margin-top:-33px}.okmasthead.alistpromo.countdown .text{left:250px;width:620px}.okmasthead.alistpromo.countdown .text.oneliner{margin-top:-14px}.okmasthead.anniversarypromo{border-bottom:1px solid #01102c;background:#d5f7f7}.okmasthead.anniversarypromo,.okmasthead.anniversarypromo .inner{height:108px}.okmasthead.anniversarypromo .inner{position:relative;z-index:0}.okmasthead.anniversarypromo .ribbon{width:1230px;height:101px;position:absolute;left:50%;margin-left:-615px;bottom:0;background:#4fc5d0;color:#fff;text-align:center}.okmasthead.anniversarypromo .ribbon:before,.okmasthead.anniversarypromo .ribbon:after{content:"";position:absolute;display:block;bottom:-12px;border-style:solid;border-color:#76dadd;z-index:-1}.okmasthead.anniversarypromo .ribbon:before{left:-49px;border-left-width:24px;border-right-width:37px;border-top-width:50.5px;border-bottom-width:50.5px;border-left-color:transparent}.okmasthead.anniversarypromo .ribbon:after{right:-49px;border-right-width:24px;border-left-width:37px;border-top-width:50.5px;border-bottom-width:50.5px;border-right-color:transparent}.okmasthead.anniversarypromo .ribbon .message{font-size:28px;line-height:101px;white-space:nowrap;font-weight:300;font-family:'Open Sans',sans-serif}.okmasthead.anniversarypromo .ribbon .message .discount{font-size:70px;text-shadow:0 1px 1px #1e737b;font-weight:600;font-family:'Open Sans',sans-serif}.okmasthead.anniversarypromo .ribbon .message .flatbutton{position:absolute;right:25px;top:50%;margin-top:-25px;padding:0 34px;font-size:15px;line-height:50px;height:50px;color:#4fc5d0;border:0;width:auto;font-weight:600;font-family:'Open Sans',sans-serif}.okmasthead.anniversarypromo .ribbon .message .flatbutton:hover{background:#fff;color:#30b7c4}.okmasthead.anniversarypromo .ribbon .message span{vertical-align:middle;display:inline-block;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.okmasthead.anniversarypromo .ribbon .message span.left,.okmasthead.anniversarypromo .ribbon .message span.right{width:43%}.okmasthead.anniversarypromo .ribbon .message span.left{padding-right:10px;text-align:right}.okmasthead.anniversarypromo .ribbon .message span.right{padding-left:10px;text-align:left}.okmasthead.anniversarypromo .ribbon .message span.discount{width:14%}.okmasthead.anniversarypromo .ribbon .message:before,.okmasthead.anniversarypromo .ribbon .message:after{content:"";position:absolute;display:block;border-style:solid;border-color:#30b7c4 transparent transparent transparent;bottom:-12px}.okmasthead.anniversarypromo .ribbon .message:before{left:0;border-width:12px 0 0 12px}.okmasthead.anniversarypromo .ribbon .message:after{right:0;border-width:12px 12px 0 0}#support_okc_masthead{height:130px;background:#084AA4;border-bottom:1px solid #0F3B87}#support_okc_masthead .inner{width:1150px;padding-right:0}#support_okc_masthead .support_icon,#support_okc_masthead .text,#support_okc_masthead .flatbutton{position:relative;float:left}#support_okc_masthead .text{top:34px;margin-right:20px;font-size:20px;line-height:30px;font-weight:400;color:#d5e0f8;-webkit-font-smoothing:antialiased}#support_okc_masthead .text strong{font-weight:700;color:#FFF}body.firefox #support_okc_masthead .text{font-weight:300}body.firefox #support_okc_masthead .text strong{font-weight:600}#support_okc_masthead .flatbutton{height:50px;top:37px;font-size:18px;line-height:50px;font-weight:400;-webkit-font-smoothing:antialiased}#support_okc_masthead.stamp .support_icon{bottom:0;margin-left:30px;margin-right:45px;background-image:url(//cdn.okccdn.com/media/img/sprites/alist-masthead/alist-masthead_993b03.png);background-repeat:no-repeat;display:block;width:158px;height:130px;background-position:-187px 0px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2){#support_okc_masthead.stamp .support_icon{background-image:url('//cdn.okccdn.com/media/img/sprites/alist-masthead/alist-masthead_993b03@2x.png');-webkit-background-size:345px 220px;-moz-background-size:345px 220px;background-size:345px 220px}}#support_okc_masthead.stamp .text{width:610px;margin-right:52px}#support_okc_masthead.stamp .flatbutton{width:155px}#support_okc_masthead.rubber_ducky .support_icon{top:20px;margin-left:31px;margin-right:60px;background-image:url(//cdn.okccdn.com/media/img/sprites/alist-masthead/alist-masthead_993b03.png);background-repeat:no-repeat;display:block;width:112px;height:90px;background-position:0px -130px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2){#support_okc_masthead.rubber_ducky .support_icon{background-image:url('//cdn.okccdn.com/media/img/sprites/alist-masthead/alist-masthead_993b03@2x.png');-webkit-background-size:345px 220px;-moz-background-size:345px 220px;background-size:345px 220px}}#support_okc_masthead.rubber_ducky .text{width:680px;margin-right:44px}#support_okc_masthead.rubber_ducky .flatbutton{width:125px}#support_okc_masthead.earth_heart .support_icon{bottom:0;margin-right:42px;background-image:url(//cdn.okccdn.com/media/img/sprites/alist-masthead/alist-masthead_993b03.png);background-repeat:no-repeat;display:block;width:187px;height:130px;background-position:0px 0px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2){#support_okc_masthead.earth_heart .support_icon{background-image:url('//cdn.okccdn.com/media/img/sprites/alist-masthead/alist-masthead_993b03@2x.png');-webkit-background-size:345px 220px;-moz-background-size:345px 220px;background-size:345px 220px}}#support_okc_masthead.earth_heart .text{margin-right:46px;font-size:22px}#support_okc_masthead.earth_heart .flatbutton{width:155px}.billingwoes,.billingwoes .text{height:130px}.billingwoes .inner{width:1030px}.billingwoes .inner:after{content:"";display:table;clear:both}.billingwoes .text{background:url(//cdn.okccdn.com/media/img/alist/billingwoes.svg) left top no-repeat;padding-left:290px;width:780px;margin-left:-20px;background-size:auto 150px}.billingwoes .button{padding-top:40px}.billingwoes .button,.billingwoes .button button.flatbutton{width:193px}.binary_rating_button,.binary_rating_button.flatbutton.silver{text-align:center;line-height:34px;-webkit-transition:background 75ms linear,color 75ms linear,border 75ms linear;-moz-transition:background 75ms linear,color 75ms linear,border 75ms linear;transition:background 75ms linear,color 75ms linear,border 75ms linear}.binary_rating_button .rating_like,.binary_rating_button.flatbutton.silver .rating_like{display:inline-block}.binary_rating_button .rating_liked,.binary_rating_button .rating_unlike,.binary_rating_button.flatbutton.silver .rating_liked,.binary_rating_button.flatbutton.silver .rating_unlike{display:none}.binary_rating_button .icon,.binary_rating_button.flatbutton.silver .icon{display:inline-block;vertical-align:middle;width:18px;height:18px;font-size:18px;color:#aeb4bf;margin-top:-4px;margin-right:5px;margin-left:-6%}.binary_rating_button .icon:before,.binary_rating_button.flatbutton.silver .icon:before{display:block}.binary_rating_button.liked,.binary_rating_button.flatbutton.silver.liked{background:#ffb640;border-color:#ffb640;color:white}.binary_rating_button.liked .rating_liked,.binary_rating_button.flatbutton.silver.liked .rating_liked{display:inline-block}.binary_rating_button.liked .rating_like,.binary_rating_button.flatbutton.silver.liked .rating_like{display:none}.binary_rating_button.liked .icon,.binary_rating_button.flatbutton.silver.liked .icon{color:white}.binary_rating_button.liked:hover,.binary_rating_button.flatbutton.silver.liked:hover{background-color:#ffc25f;border-color:#ffc25f}.binary_rating_button.liked:active,.binary_rating_button.flatbutton.silver.liked:active{background-color:#ffb640;border-color:#ffb640}.binary_rating_button.icon_only,.binary_rating_button.flatbutton.silver.icon_only{display:block;width:19px;height:18px;padding:0;background:transparent;border:none;font-size:18px;line-height:18px}.binary_rating_button.icon_only .icon,.binary_rating_button.flatbutton.silver.icon_only .icon{margin-left:0}.binary_rating_button.icon_only .rating_like,.binary_rating_button.icon_only .rating_liked,.binary_rating_button.flatbutton.silver.icon_only .rating_like,.binary_rating_button.flatbutton.silver.icon_only .rating_liked{display:none}.binary_rating_button.icon_only,.binary_rating_button.icon_only .icon,.binary_rating_button.flatbutton.silver.icon_only,.binary_rating_button.flatbutton.silver.icon_only .icon{color:#aeb4bf}.binary_rating_button.icon_only.liked,.binary_rating_button.flatbutton.silver.icon_only.liked{background:none}.binary_rating_button.icon_only.liked,.binary_rating_button.icon_only.liked .icon,.binary_rating_button.flatbutton.silver.icon_only.liked,.binary_rating_button.flatbutton.silver.icon_only.liked .icon{color:#ffb640}.binary_rating_button.icon_only.liked .rating_like,.binary_rating_button.icon_only.liked .rating_liked,.binary_rating_button.flatbutton.silver.icon_only.liked .rating_like,.binary_rating_button.flatbutton.silver.icon_only.liked .rating_liked{display:none}#limelight_container{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:91950}#limelight{position:absolute;box-shadow:0 0 0 1500px rgba(17,17,17,0.8);box-shadow:0 0 0 100vw rgba(17,17,17,0.8);box-shadow:0 0 0 100vmax rgba(17,17,17,0.8);border-radius:100%;opacity:0;cursor:pointer;-webkit-transform:scale(6);-moz-transform:scale(6);-ms-transform:scale(6);-o-transform:scale(6);transform:scale(6);-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;transition-property:transform,opacity;-webkit-transition-duration:600ms;-moz-transition-duration:600ms;transition-duration:600ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}#limelight.isShowing{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}#limelight.isShowing .limelight-info{opacity:1}#limelight.isShowing .limelight-info--left{-webkit-transform:translateX(-100%) translateY(-50%);-moz-transform:translateX(-100%) translateY(-50%);-ms-transform:translateX(-100%) translateY(-50%);-o-transform:translateX(-100%) translateY(-50%);transform:translateX(-100%) translateY(-50%)}#limelight.isShowing .limelight-info--right{-webkit-transform:translateX(100%) translateY(-50%);-moz-transform:translateX(100%) translateY(-50%);-ms-transform:translateX(100%) translateY(-50%);-o-transform:translateX(100%) translateY(-50%);transform:translateX(100%) translateY(-50%)}#limelight.isShowing .limelight-info--top{-webkit-transform:translateY(-100%) translateX(-50%);-moz-transform:translateY(-100%) translateX(-50%);-ms-transform:translateY(-100%) translateX(-50%);-o-transform:translateY(-100%) translateX(-50%);transform:translateY(-100%) translateX(-50%)}#limelight.isShowing .limelight-info--bottom{-webkit-transform:translateY(100%) translateX(-50%);-moz-transform:translateY(100%) translateX(-50%);-ms-transform:translateY(100%) translateX(-50%);-o-transform:translateY(100%) translateX(-50%);transform:translateY(100%) translateX(-50%)}#limelight .limelight-info{position:absolute;width:400px;color:#FFF;opacity:0;cursor:default;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;transition-property:transform,opacity;-webkit-transition-duration:300ms;-moz-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:650ms;-moz-transition-delay:650ms;transition-delay:650ms}#limelight .limelight-info--left{top:50%;left:-50px;text-align:right;-webkit-transform:translateX(-110%) translateY(-50%);-moz-transform:translateX(-110%) translateY(-50%);-ms-transform:translateX(-110%) translateY(-50%);-o-transform:translateX(-110%) translateY(-50%);transform:translateX(-110%) translateY(-50%)}#limelight .limelight-info--right{top:50%;right:-50px;text-align:left;-webkit-transform:translateX(110%) translateY(-50%);-moz-transform:translateX(110%) translateY(-50%);-ms-transform:translateX(110%) translateY(-50%);-o-transform:translateX(110%) translateY(-50%);transform:translateX(110%) translateY(-50%)}#limelight .limelight-info--top{top:-50px;left:50%;text-align:center;-webkit-transform:translateY(-110%) translateX(-50%);-moz-transform:translateY(-110%) translateX(-50%);-ms-transform:translateY(-110%) translateX(-50%);-o-transform:translateY(-110%) translateX(-50%);transform:translateY(-110%) translateX(-50%)}#limelight .limelight-info--bottom{bottom:-50px;left:50%;text-align:center;-webkit-transform:translateY(110%) translateX(-50%);-moz-transform:translateY(110%) translateX(-50%);-ms-transform:translateY(110%) translateX(-50%);-o-transform:translateY(110%) translateX(-50%);transform:translateY(110%) translateX(-50%)}#limelight .limelight-info-title,#limelight .limelight-info-body{margin-bottom:30px;text-shadow:1px 1px 3px rgba(0,0,0,0.5)}#limelight .limelight-info-title{font-size:22px;line-height:32px}#limelight .limelight-info-title strong{color:#00d280}#limelight .limelight-info-body{font-size:18px;line-height:28px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}#limelight .limelight-info-cta{min-width:106px;height:50px;line-height:50px;width:auto;cursor:pointer}button.facebook_button,a.facebook_button{position:relative}button.facebook_button,button.facebook_button:disabled,button.facebook_button:disabled:hover,a.facebook_button,a.facebook_button:disabled,a.facebook_button:disabled:hover{background-color:#4d6faf}button.facebook_button:hover,a.facebook_button:hover{background-color:#5c7fc1}button.facebook_button:after,a.facebook_button:after{display:block;content:' ';width:11px;height:17px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAASklEQVQ4jWP4//8/AxZsBMS7gfjLfySATaEqEH/8jwVgUzwbm0Jciu8iyS8AYgGYHDbFP5AUiyDLYVOM02aSFRMLaKyYdh4c1ooB5Mp/zkT9CA4AAAAASUVORK5CYII=);background-repeat:no-repeat;position:absolute;top:12px;left:15px}button.facebook_button:disabled:after,a.facebook_button:disabled:after{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5}#login_box button.flatbutton,#signup button.flatbutton{font-weight:600;font-size:inherit}#login_box{width:214px;padding:28px 48px 40px;margin-top:60px;font-size:13px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}#login_box.started_open{margin-top:120px}#login_box.started_open::before{content:'';display:block;position:absolute;right:0;bottom:100%;left:0;height:120px;background:url('//cdn.okccdn.com/media/img/template/pq_splash_logo.png') center center no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#login_box.started_open::before{background-image:url('//cdn.okccdn.com/media/img/template/pq_splash_logo@2x.png');background-size:206px 66px}}#login_box .title{margin:0 0 20px 0;text-align:center;font-size:22px;line-height:36px}#login_box .description{margin:-10px 0 30px}#login_box > .content{margin:0;overflow:hidden}#login_box > .close{display:none}#login_box .inputcontainer{width:100%;margin-right:0}#login_box button{width:100%;margin:10px 0;height:46px;line-height:46px}#login_box .forgot_password,#login_box .login_again{margin:7px 0;text-align:center}#login_box .forgot_password > a,#login_box .login_again > a{color:#949aa6}#login_box .forgot_password > a:hover,#login_box .login_again > a:hover{color:#474d59}#login_box .loginbox_action{position:relative;width:214px;float:left;margin-right:310px;opacity:1;visibility:hidden;-webkit-transition:opacity 300ms ease-in-out;-moz-transition:opacity 300ms ease-in-out;transition:opacity 300ms ease-in-out}#login_box .loginbox_action:last-child{margin-right:0}#login_box .actions_container{width:3668px;margin:0}#login_box .actions_container.show_fbc{margin-left:0px}#login_box .actions_container.show_fbc #facebook_connect{visibility:visible}#login_box .actions_container,#login_box .actions_container.show_login{margin-left:-524px}#login_box .actions_container #login_actions,#login_box .actions_container.show_login #login_actions{visibility:visible}#login_box .actions_container.show_reactivate{margin-left:-1048px}#login_box .actions_container.show_reactivate #account_reactivation{visibility:visible}#login_box .actions_container.show_reactivate #account_reactivation h2.title{background:url('//cdn.okccdn.com/media/img/misc/welcome_back_computer.png') center 30px no-repeat}#login_box .actions_container.show_recovery{margin-left:-1572px}#login_box .actions_container.show_recovery #password_recovery{visibility:visible}#login_box .actions_container.show_recovery_success{margin-left:-2096px}#login_box .actions_container.show_recovery_success #password_recovery_success{visibility:visible}#login_box .actions_container.show_recovery_success #password_recovery_success h2.title{background:url('//cdn.okccdn.com/media/img/misc/rocket_mail.png') top center no-repeat}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#login_box .actions_container.show_recovery_success #password_recovery_success h2.title{background-image:url('//cdn.okccdn.com/media/img/misc/rocket_mail@2x.png');background-size:92px 160px}}#login_box .actions_container.show_totp{margin-left:-2620px}#login_box .actions_container.show_totp #totp_entry{visibility:visible}#login_box .actions_container.show_provisional_block{margin-left:-3144px}#login_box .actions_container.show_provisional_block #provisional_block{visibility:visible}#login_box .actions_container.show_provisional_block h3.subtitle{font-size:19px;font-weight:600;color:#4c7bd9;border-top:1px solid #ebedf2;padding-top:80px;padding-bottom:18px}#login_box .actions_container.show_provisional_block p{color:#5e6573;font-size:16px;line-height:25px}#login_box .actions_container.transition_action .loginbox_action{opacity:0}#login_box .strikey{text-align:center;margin:24px 0 31px 0}#login_box .strikey::before,#login_box .strikey::after{content:' ';position:absolute;margin-top:11px;width:43%;border-top:1px solid rgba(0,0,0,0.1)}#login_box .strikey::before{left:0}#login_box .strikey::after{right:0}#login_box #log_in_facebook{background-color:#3B5999;margin:0}#login_box #log_in_facebook:hover{background-color:#466ab6}#login_box #log_in_facebook::after{top:14px;left:18px}#login_box #login_passwordContainer{margin-bottom:10px}#login_box #login_passwordContainer .message{color:#ff715e}#login_box #account_reactivation h2.title{padding-top:180px}#login_box #recovery_submit{margin-top:0}#login_box #password_recovery_success h2.title{padding-top:170px;margin-top:0}#login_box #totp_save_box{padding-top:20px}#login_box .screen{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;background-color:#fff;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 100ms ease-in-out;-moz-transition:opacity 100ms ease-in-out;transition:opacity 100ms ease-in-out}#login_box.screen .screen{z-index:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}#messages-dropdown-wrapper{margin-right:-29px;position:absolute;z-index:90001;-webkit-transform-origin:340px 0;-moz-transform-origin:340px 0;-ms-transform-origin:340px 0;-o-transform-origin:340px 0;transform-origin:340px 0;opacity:0;pointer-events:none;visibility:hidden;-webkit-transform:scale(0.97);-moz-transform:scale(0.97);-ms-transform:scale(0.97);-o-transform:scale(0.97);transform:scale(0.97);-webkit-transition:opacity 100ms ease,-webkit-transform 100ms ease,visibility 0ms 100ms ease;-moz-transition:opacity 100ms ease,-moz-transform 100ms ease,visibility 0ms 100ms ease;transition:opacity 100ms ease,transform 100ms ease,visibility 0ms 100ms ease}#messages-dropdown-wrapper.show{opacity:1;visibility:visible;pointer-events:auto;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:opacity 200ms ease,-webkit-transform 150ms ease;-moz-transition:opacity 200ms ease,-moz-transform 150ms ease;transition:opacity 200ms ease,transform 150ms ease}#messages-dropdown-wrapper.fixed{position:fixed;top:62px !important}#messages-dropdown{width:400px;height:380px;background:#fff;border-radius:3px;box-shadow:0 0 0 1px rgba(0,17,53,0.16),0 0 5px 0 rgba(0,17,53,0.16)}#messages-dropdown:after{content:" ";display:block;position:absolute;top:-16px;right:52px;height:0;width:0;border-top:8px solid transparent;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #fff}.messages-dropdown-header{display:block;position:absolute;z-index:2;top:0;left:0;width:100%;height:50px;padding-top:16px;padding-left:20px;font-size:18px;color:#5e6573}.messages-dropdown-header:hover{color:#4c7bd9}.messages-dropdown-header:after{content:" ";display:block;position:absolute;height:1px;background:rgba(148,154,166,0.35);top:50px;left:0;width:100%}#messages-dropdown .okmailbox-body-threadlist,#messages-dropdown > .loader{position:absolute;z-index:1;top:50px;left:0;width:100%;height:280px}#messages-dropdown > .loader{overflow:hidden}#messages-dropdown .okmailbox-body-threadlist{overflow-x:hidden;overflow-y:auto}.messages-dropdown-empty-message{display:block;width:100%;padding:127px 50px 0;color:#949aa6;font-size:16px;line-height:26px;text-align:center}#messages-dropdown .mboxthread{position:relative;height:82px;margin-bottom:1px;background:#fff;border-radius:3px;box-shadow:0 1px 1px #ccd0d9}#messages-dropdown .mboxthread > a{display:block;padding:20px}#messages-dropdown .mboxthread:hover .mboxthread-timestamp{opacity:0;visibility:hidden;-webkit-transition:opacity 200ms ease 0ms,visibility 0ms linear 300ms;-moz-transition:opacity 200ms ease 0ms,visibility 0ms linear 300ms;transition:opacity 200ms ease 0ms,visibility 0ms linear 300ms}#messages-dropdown .mboxthread:hover .mboxthread-actions{opacity:1;visibility:visible;-webkit-transition:visibility 0ms linear,opacity 200ms ease 10ms;-moz-transition:visibility 0ms linear,opacity 200ms ease 10ms;transition:visibility 0ms linear,opacity 200ms ease 10ms}#messages-dropdown .mboxthread--is-spam{display:none}#messages-dropdown .mboxthread-loading .loader{position:absolute;top:50%;left:50%}#messages-dropdown .mboxthread-icon{position:absolute;top:42px;left:18px;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}#messages-dropdown .mboxthread-icon-unread{display:block;width:10px;height:10px;background:#4c7bd9;border-radius:100%}#messages-dropdown .mboxthread-icon-remoteread{color:#ccd0d9}#messages-dropdown .mboxthread-photo{float:left;width:40px;height:40px;margin-left:25px;margin-right:15px}#messages-dropdown .mboxthread-photo img{height:100%;width:100%;border-radius:100%}#messages-dropdown .mboxthread-username{color:#474d59;padding:4px 0 4px;font-weight:600;font-size:16px;line-height:22px}#messages-dropdown .mboxthread-snippet{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;max-width:64%;color:#aeb4bf;font-size:14px;line-height:22px}#messages-dropdown .mboxthread-timestamp{position:absolute;top:20px;right:30px;opacity:1;visibility:visible;-webkit-transition:visibility 0ms linear,opacity 200ms ease 10ms;-moz-transition:visibility 0ms linear,opacity 200ms ease 10ms;transition:visibility 0ms linear,opacity 200ms ease 10ms;color:#aeb4bf;font-size:14px;line-height:40px}#messages-dropdown .mboxthread-actions{position:absolute;top:22px;right:24px;opacity:0;visibility:hidden;-webkit-transition:opacity 200ms ease 0ms,visibility 0ms linear 300ms;-moz-transition:opacity 200ms ease 0ms,visibility 0ms linear 300ms;transition:opacity 200ms ease 0ms,visibility 0ms linear 300ms}#messages-dropdown .mboxthread-actions button{display:inline-block;width:36px;text-align:center;height:36px;line-height:36px;font-size:22px;color:#5e6573;background:none;border:none;cursor:pointer;opacity:0.5;-webkit-transition:opacity,50ms;-moz-transition:opacity,50ms;transition:opacity,50ms}#messages-dropdown .mboxthread-actions button:hover{opacity:1}#messages-dropdown .threadlist-enter,#messages-dropdown .threadlist-leave{position:absolute;width:100%;left:0;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;transition-property:transform,opacity;-webkit-transition-duration:10ms;-moz-transition-duration:10ms;transition-duration:10ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}#messages-dropdown .threadlist-enter,#messages-dropdown .threadlist-leave.threadlist-leave-active{opacity:0}#messages-dropdown .threadlist-enter{-webkit-transform:translateX(150px);-moz-transform:translateX(150px);-ms-transform:translateX(150px);-o-transform:translateX(150px);transform:translateX(150px)}#messages-dropdown .threadlist-leave.threadlist-leave-active{-webkit-transform:translateX(-150px);-moz-transform:translateX(-150px);-ms-transform:translateX(-150px);-o-transform:translateX(-150px);transform:translateX(-150px)}#messages-dropdown .threadlist-leave,#messages-dropdown .threadlist-enter.threadlist-enter-active{opacity:1;-webkit-transform:translateX(0px);-moz-transform:translateX(0px);-ms-transform:translateX(0px);-o-transform:translateX(0px);transform:translateX(0px)}#messages-dropdown .threadrow-enter,#messages-dropdown .threadrow-leave{-webkit-transition-property:opacity;-moz-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:400ms;-moz-transition-duration:400ms;transition-duration:400ms;-webkit-transition-timing-function:linear;-moz-transition-timing-function:linear;transition-timing-function:linear}#messages-dropdown .threadrow-enter,#messages-dropdown .threadrow-leave.threadrow-leave-active{opacity:0}#messages-dropdown .threadrow-leave,#messages-dropdown .threadrow-enter.threadrow-enter-active{opacity:1}#messages-dropdown .threadicon-enter,#messages-dropdown .threadicon-leave{-webkit-transition:opacity 50ms ease;-moz-transition:opacity 50ms ease;transition:opacity 50ms ease}#messages-dropdown .threadicon-enter,#messages-dropdown .threadicon-leave.threadicon-leave-active{opacity:0}#messages-dropdown .threadicon-leave,#messages-dropdown .threadicon-enter.threadicon-enter-active{opacity:1}#messages-dropdown .mboxthread{background:none;box-shadow:none}#messages-dropdown .mboxthread:after{content:" ";display:block;position:absolute;bottom:-1px;left:20px;width:360px;height:1px;background:#ebedf2}#messages-dropdown .mboxthread:hover .mboxthread-timestamp{opacity:1;visibility:visible;-webkit-transition:visibility 0ms linear,opacity 0ms ease 10ms;-moz-transition:visibility 0ms linear,opacity 0ms ease 10ms;transition:visibility 0ms linear,opacity 0ms ease 10ms}#messages-dropdown .mboxthread:last-child:after{display:none}#messages-dropdown .mboxthread-icon{position:absolute;left:14px}#messages-dropdown .mboxthread-icon-remoteread{position:relative;top:1px;font-size:13px}#messages-dropdown .mboxthread-icon-replied{color:#ccd0d9}#messages-dropdown .mboxthread-photo{margin-top:2px;margin-right:13px;margin-left:5px}#messages-dropdown .mboxthread-username{padding:0}#messages-dropdown .mboxthread-timestamp{top:9px;right:20px;margin:0;font-size:13px;line-height:normal;color:#ccd0d9}#messages-dropdown .mboxthread-actions{top:30px;right:20px}#messages-dropdown .mboxthread-actions button{font-size:18px}.messages-dropdown-footer{position:absolute;z-index:2;bottom:0;left:0;width:100%;height:50px;padding-top:14px;font-size:14px;color:#4c7bd9;text-align:center}.messages-dropdown-footer:hover{color:#9dbaf2}.messages-dropdown-footer:after{content:" ";display:block;position:absolute;height:1px;background:rgba(148,154,166,0.35);bottom:50px;left:0;width:100%}.oktooltip.dark.messages-dropdown-tooltip,.oktooltip.small.messages-dropdown-tooltip{z-index:90002}.global_messaging .header{height:63px;padding-top:12px;padding-bottom:10px;position:absolute;z-index:3;left:0;width:100%;padding-right:20px;padding-left:20px;background:#fff;top:0;border-top-left-radius:2px;border-top-right-radius:2px}.global_messaging .header .border{position:relative;left:0;float:left;width:100%;height:1px}.global_messaging .header .border{bottom:-11px;background:rgba(148,154,166,0.35)}.global_messaging .header .linkwrap{float:left;margin-left:-4px}.global_messaging .header .image{position:relative;float:left;width:40px;height:40px}.global_messaging .header .image img,.global_messaging .header .image .unread_message_icon{position:absolute;top:0;left:0}.global_messaging .header .image img{width:100%;height:100%;border-radius:50%}.global_messaging .header .image .online{position:absolute;overflow:hidden;bottom:-2px;left:-4px;width:16px;height:16px;border-radius:50%;border:2px solid #fff;background:#48e588;line-height:500px}.global_messaging .header .image .unread_message_icon{display:none}.global_messaging .header .image .unread_message_icon .icon{position:absolute}.global_messaging .header .image .unread_message_icon .i-messages{top:2px;left:2px;font-size:22px;color:#1fc174}.global_messaging .header .image .unread_message_icon .i-ellipsis-h{display:block;top:0;left:7px;font-size:12px;line-height:24px;color:#fff}.global_messaging .header h2{position:absolute;left:56px;margin:0;margin-bottom:0;max-width:60%;padding:0;padding-top:9px;padding-bottom:10px;padding-left:13px;font-size:16px;line-height:22px;color:#5e6573;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis}.global_messaging .header .controls{float:right;margin-top:5px;margin-right:-4px;position:relative}.global_messaging .header .options,.global_messaging .header .minimize,.global_messaging .header .close{position:relative;z-index:2;float:left;margin-left:4px;width:30px;height:30px;color:#aeb4bf;font-size:13px;line-height:34px;text-align:center}.global_messaging .header .options:first-child,.global_messaging .header .minimize:first-child,.global_messaging .header .close:first-child{margin-left:0}.global_messaging .header .options:hover,.global_messaging .header .minimize:hover,.global_messaging .header .close:hover{color:#949aa6}.global_messaging .header .options.options,.global_messaging .header .minimize.options,.global_messaging .header .close.options{font-size:14px}.global_messaging .header .maximize{display:none;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%}.global_messaging .header .popover{opacity:0;visibility:hidden;-webkit-transition:opacity 150ms ease 0ms,visibility 0ms linear 250ms;-moz-transition:opacity 150ms ease 0ms,visibility 0ms linear 250ms;transition:opacity 150ms ease 0ms,visibility 0ms linear 250ms;position:absolute;z-index:3;top:41px;left:-60px;width:150px}.global_messaging .header .popover.show{opacity:1;visibility:visible;-webkit-transition:visibility 0ms linear,opacity 150ms ease 10ms;-moz-transition:visibility 0ms linear,opacity 150ms ease 10ms;transition:visibility 0ms linear,opacity 150ms ease 10ms}.global_messaging .header .popover .contents{border:none;box-shadow:0 0 0 1px rgba(0,17,53,0.16),0 0 5px 0 rgba(0,17,53,0.16);padding:0}.global_messaging .header .popover .contents:after{content:"";display:table;clear:both}.global_messaging .header .popover .contents .block{display:block}.global_messaging .header .popover .contents .unblock{display:none}.global_messaging .header .popover .contents--is-blocked .block{display:none}.global_messaging .header .popover .contents--is-blocked .unblock{display:block}.global_messaging .header .popover .contents--is-inactive .block,.global_messaging .header .popover .contents--is-inactive .unblock,.global_messaging .header .popover .contents--is-inactive .flag{display:none}.global_messaging .header .popover .tail{top:-8px}.global_messaging .header .popover button,.global_messaging .header .popover a{background:transparent;border:0;padding:0;cursor:pointer;position:relative;float:left;width:100%;padding:13px 15px 12px;color:#5e6573;text-align:left;font-size:14px;line-height:21px}.global_messaging .header .popover button:first-child,.global_messaging .header .popover a:first-child{margin-top:0}.global_messaging .header .popover button:hover,.global_messaging .header .popover a:hover{color:#4c7bd9}.global_messaging .header .popover button:before,.global_messaging .header .popover a:before{content:" ";display:block;position:absolute;bottom:-1px;width:80%;height:1px;background:#ebedf2}.global_messaging .header .popover button:last-of-type:before,.global_messaging .header .popover a:last-of-type:before{opacity:0}.global_messaging .header .popover .delete-options{display:none;float:left;width:120px;margin:0 15px;border-top:1px solid #ebedf2}.global_messaging .header .popover .delete-options .delete-cancel,.global_messaging .header .popover .delete-options .delete-confirm{float:left;width:50%;padding-right:0;padding-left:0}.global_messaging .header .popover .delete-options .delete-cancel.delete-confirm,.global_messaging .header .popover .delete-options .delete-confirm.delete-confirm{text-align:right;color:#f95133}.global_messaging .header .popover .delete-options .delete-cancel.delete-confirm:hover,.global_messaging .header .popover .delete-options .delete-confirm.delete-confirm:hover{color:#fb674e}.global_messaging .header .popover .delete-options .delete-cancel:before,.global_messaging .header .popover .delete-options .delete-confirm:before{display:none}.global_messaging .header .popover--is-deleting .delete-trigger{display:none}.global_messaging .header .popover--is-deleting .delete-options{display:block}.global_messaging .header.first_message_success.new_template{z-index:4;left:auto;right:0;width:0;background:transparent}.global_messaging .header.first_message_success.new_template > a,.global_messaging .header.first_message_success.new_template .options,.global_messaging .header.first_message_success.new_template .minimize{display:none}.global_messaging .header.first_message_success.old_template .options,.global_messaging .header.first_message_success.old_template .minimize{opacity:0}.global_messaging .timestamp .message,.global_messaging .message_meta,.global_messaging .scam_warning{float:left;clear:both}.global_messaging .message,.global_messaging .scam_warning div{position:relative;top:0;clear:both;margin-top:20px;padding:12px 18px 14px;border-radius:2px;font-size:14px;line-height:21px;white-space:pre-wrap;word-wrap:break-word}.global_messaging .message.message,.global_messaging .scam_warning div.message{max-width:320px}.global_messaging .message:before,.global_messaging .scam_warning div:before{content:" ";position:absolute;bottom:9px}.global_messaging .message.theirs,.global_messaging .scam_warning div.theirs{float:left;margin-right:84px;margin-left:36px;background:#ebedf2;color:#5e6573}.global_messaging .message.theirs:before,.global_messaging .scam_warning div.theirs:before{left:-12px;height:0;width:0;border-top:13px solid #ebedf2;border-left:13px solid transparent}.global_messaging .message.theirs a,.global_messaging .scam_warning div.theirs a{color:#5e6573;text-decoration:underline}.global_messaging .message.theirs a:hover,.global_messaging .scam_warning div.theirs a:hover{color:#949aa6}.global_messaging .message.yours,.global_messaging .scam_warning div.yours{float:right;margin-right:36px;margin-left:84px;background:#4c7bd9;color:#fff}.global_messaging .message.yours:before,.global_messaging .scam_warning div.yours:before{right:-12px;height:0;width:0;border-top:13px solid #4c7bd9;border-right:13px solid transparent}.global_messaging .message.yours a,.global_messaging .scam_warning div.yours a{color:#fff;text-decoration:underline}.global_messaging .message.yours a:hover,.global_messaging .scam_warning div.yours a:hover{color:#d5e0f8}.global_messaging .message.just_appended,.global_messaging .scam_warning div.just_appended{opacity:0}.global_messaging .timestamp{width:100%;margin-top:25px;margin-bottom:-5px;text-align:center;font-size:14px;line-height:21px;color:#ccd0d9}.global_messaging .messages > li:first-child > .timestamp{margin-top:15px}.global_messaging .message_meta{width:100%;margin-top:5px;margin-bottom:-4px;font-size:14px;line-height:21px;color:#ccd0d9}.global_messaging .message_meta.yours{text-align:right;padding-right:36px}.global_messaging .message_meta.theirs{text-align:left;padding-left:36px}.global_messaging .message_meta .read_receipt .icon{position:relative;top:1px;margin-right:3px}.global_messaging .scam_warning{padding-right:36px;padding-left:36px}.global_messaging .scam_warning:before{display:none}.global_messaging .scam_warning div{background:#ffded7;color:#f95133}.global_messaging .scam_warning div a{color:#949aa6;text-decoration:underline}.global_messaging .scam_warning div a:hover{color:#5e6573}.global_messaging .mutual_match{float:left;width:100%;padding-right:36px;padding-left:36px;text-align:center}.global_messaging .mutual_match .mutual_match_contents{float:left;width:100%;margin-top:18px;padding:12px 0;background:#FFE8C3;color:#FFAB23;border-radius:2px}.global_messaging .mutual_match .icon_wrapper{display:inline-block;width:36px;height:36px;margin-right:10px;border:2px solid #FFB640;color:#FFB640;border-radius:50%;font-size:18px;line-height:36px}.global_messaging .mutual_match .title{position:relative;bottom:3px;font-size:16px;line-height:22px}.global_messaging .mutual_match .subtitle{display:none}.global_messaging .mutual_match.mutual_match_big .subtitle{float:left;width:100%;display:block;margin-top:17px;color:#ffb640;font-size:16px;line-height:22px}.global_messaging .spinner_li{padding-top:20px}.global_messaging .spinner_li .spinner_wrapper{float:left;width:28px;height:28px;position:relative;left:50%;width:28px;margin-left:-14px}.global_messaging .compose{position:absolute;z-index:3;left:0;width:100%;padding-right:20px;padding-left:20px;background:#fff;bottom:0;min-height:140px;padding-top:23px;padding-bottom:18px;opacity:0;-webkit-transition:none;-moz-transition:none;transition:none}.global_messaging .compose .border{position:relative;left:0;float:left;width:100%;height:1px}.global_messaging .compose .border{top:-24px;background:rgba(148,154,166,0);-webkit-transition:background 200ms linear;-moz-transition:background 200ms linear;transition:background 200ms linear}.global_messaging .compose.show_border .border{background:rgba(148,154,166,0.35)}.global_messaging .compose.hide_border .border{display:none}.global_messaging .compose.initialized{opacity:1}.global_messaging .compose .inputcontainer.textarea{float:left;width:100%;margin:0;margin-bottom:10px}.global_messaging .compose .inputcontainer.textarea textarea{min-height:60px;max-height:126px;padding:11px 8px 8px 13px;font-size:14px;line-height:21px}.global_messaging .compose .message{display:none;margin:0;padding:0;max-width:100%;-webkit-transition:none;-moz-transition:none;transition:none}.global_messaging .compose.has_error .message{display:block}.global_messaging .compose .draft_message{float:left;max-width:130px;margin-top:10px;color:#aeb4bf;opacity:0;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;transition:opacity 200ms linear}.global_messaging .compose .draft_message.error{color:#fb674e}.global_messaging .compose .draft_message.show{opacity:1;-webkit-transition:opacity 75ms linear;-moz-transition:opacity 75ms linear;transition:opacity 75ms linear}.global_messaging .compose label,body.okc2014 .global_messaging .compose.okform label.checkbox{float:right;margin-top:10px;margin-bottom:8px;color:#aeb4bf;cursor:pointer;font-size:14px;line-height:18px;padding-right:26px;padding-left:0}.global_messaging .compose label input,body.okc2014 .global_messaging .compose.okform label.checkbox input{left:0;right:2px}.global_messaging .compose label .icon,body.okc2014 .global_messaging .compose.okform label.checkbox .icon{left:auto;top:0;right:0;opacity:0.85}.global_messaging .compose label:hover .icon,.global_messaging .compose label.focus .icon,body.okc2014 .global_messaging .compose.okform label.checkbox:hover .icon,body.okc2014 .global_messaging .compose.okform label.checkbox.focus .icon{opacity:1}.global_messaging .compose button,.global_messaging .compose button.flatbutton{float:right;margin-left:20px;width:90px;height:36px;line-height:36px;font-size:14px;line-height:36px}.global_messaging .compose.enter_to_send button{display:none}.global_messaging .compose_message{position:absolute;z-index:3;left:0;width:100%;padding-right:20px;padding-left:20px;background:#fff;bottom:0;font-size:16px;line-height:22px;padding:25px 0 30px;text-align:center;color:#aeb4bf}.global_messaging .compose_message .border{position:relative;left:0;float:left;width:100%;height:1px}.global_messaging .compose_message .border{top:-24px;background:rgba(148,154,166,0);-webkit-transition:background 200ms linear;-moz-transition:background 200ms linear;transition:background 200ms linear}.global_messaging .compose_message.show_border .border{background:rgba(148,154,166,0.35)}.global_messaging .compose_message:before{content:"";position:absolute;top:0;left:50%;height:1px;width:400px;margin-left:-200px;background:#ccd0d9}.global_messaging .compose_message a{color:#4c7bd9}.global_messaging .compose_message a:hover{color:#9dbaf2}#global_messaging_overflow{position:absolute;z-index:20;display:block;bottom:0;left:0;width:75px;height:50px;font-family:'Open Sans',sans-serif}#global_messaging_overflow,#global_messaging_overflow #global_messaging_overflow_trigger{color:#5e6573;font-size:16px;line-height:22px}#global_messaging_overflow,#global_messaging_overflow *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#global_messaging_overflow #global_messaging_overflow_trigger{position:relative;display:block;width:100%;height:100%;padding-top:14px;padding-left:11px;background:#fff;border-top-left-radius:2px;border-top-right-radius:2px;box-shadow:0 0 0 1px rgba(0,17,53,0.16),0 0 5px 0 rgba(0,17,53,0.16)}#global_messaging_overflow #global_messaging_overflow_trigger .icon{position:absolute}#global_messaging_overflow #global_messaging_overflow_trigger .i-messages{top:2px;left:2px;font-size:22px;color:#4c7bd9}#global_messaging_overflow #global_messaging_overflow_trigger .i-ellipsis-h{display:none}#global_messaging_overflow #global_messaging_overflow_trigger .icon_wrapper{position:relative;float:left;width:25px;height:25px}#global_messaging_overflow #global_messaging_overflow_trigger .count{float:left;width:27px;margin-top:1px;margin-left:2px;text-align:center;font-size:18px}#global_messaging_overflow #global_messaging_overflow_trigger .count.three_digit{font-size:15px}#global_messaging_overflow #global_messaging_overflow_trigger:hover{background:#f3f5f9}#global_messaging_overflow #global_messaging_overflow_threads{position:absolute;bottom:50px;width:240px;min-height:50px;max-height:275px;overflow:auto;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,17,53,0.16),0 0 5px 0 rgba(0,17,53,0.16);opacity:0;visibility:hidden;-webkit-transform:translateY(15px);-moz-transform:translateY(15px);-ms-transform:translateY(15px);-o-transform:translateY(15px);transform:translateY(15px);-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;transition-property:transform,opacity;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}#global_messaging_overflow #global_messaging_overflow_threads .global_messaging{position:relative;box-shadow:none;border-radius:0;border-top:1px solid #ccd0d9}#global_messaging_overflow #global_messaging_overflow_threads .global_messaging:first-child{border-top:0}#global_messaging_overflow #global_messaging_overflow_threads .global_messaging:hover{background:#f3f5f9}#global_messaging_overflow #global_messaging_overflow_threads .global_messaging,#global_messaging_overflow #global_messaging_overflow_threads .global_messaging.minimized{width:100%}#global_messaging_overflow #global_messaging_overflow_threads .header{background:none}#global_messaging_overflow.unread_messages #global_messaging_overflow_trigger .icon{position:absolute}#global_messaging_overflow.unread_messages #global_messaging_overflow_trigger .i-messages{top:2px;left:2px;font-size:22px;color:#1fc174}#global_messaging_overflow.unread_messages #global_messaging_overflow_trigger .i-ellipsis-h{display:block;top:0;left:7px;font-size:12px;line-height:24px;color:#fff}#global_messaging_overflow.show_threads #global_messaging_overflow_trigger{border-radius:0}#global_messaging_overflow.show_threads #global_messaging_overflow_trigger .i-messages{color:#aeb4bf}#global_messaging_overflow.show_threads #global_messaging_overflow_threads{opacity:1;visibility:visible;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}#global_messaging_overflow.open_left #global_messaging_overflow_threads{right:0;border-bottom-right-radius:0}#global_messaging_overflow.open_right #global_messaging_overflow_threads{left:0;border-bottom-left-radius:0}#global_messaging_overflow_intro_tooltip{z-index:20005;max-width:266px;margin-left:-106px}#global_messaging_overflow_intro_tooltip .arrow{margin-left:96px}#global_messaging_overflow_intro_tooltip .new{color:#f28d18;font-weight:600;font-family:'Open Sans',sans-serif}.global_messaging.mobile_mode .message,.global_messaging.mobile_mode .scam_warning div{font-size:16px;line-height:21px}.global_messaging.mobile_mode .compose label,.global_messaging.mobile_mode .compose input[type="checkbox"]{display:none}.global_messaging.mobile_mode .compose textarea,.global_messaging.mobile_mode .compose input,.global_messaging.mobile_mode .compose textarea:focus{font-size:16px}@-webkit-keyframes global-messaging-open{0%{opacity:0.4;-webkit-transform:translateY(50px)}100%{opacity:1;-webkit-transform:translateY(0px)}}@-moz-keyframes global-messaging-open{0%{opacity:0.4;-moz-transform:translateY(50px)}100%{opacity:1;-moz-transform:translateY(0px)}}@keyframes global-messaging-open{0%{opacity:0.4;-webkit-transform:translateY(50px);-moz-transform:translateY(50px);-ms-transform:translateY(50px);-o-transform:translateY(50px);transform:translateY(50px)}100%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}.global_messaging{position:relative;overflow:hidden;float:left;width:440px;height:430px;background:#fff;box-shadow:0 0 0 1px rgba(0,17,53,0.16),0 0 5px 0 rgba(0,17,53,0.16);border-top-left-radius:2px;border-top-right-radius:2px;font-family:'Open Sans',sans-serif;opacity:1;-webkit-transition:opacity 150ms linear;-moz-transition:opacity 150ms linear;transition:opacity 150ms linear}.global_messaging.not_shown{opacity:0.6;-webkit-transition:opacity 75ms linear;-moz-transition:opacity 75ms linear;transition:opacity 75ms linear}.global_messaging,.global_messaging *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.global_messaging ul{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;position:absolute;z-index:2;width:440px;height:207px;top:63px;overflow-y:auto;-webkit-transform:translateZ(0)}.global_messaging ul li{position:relative;float:left;width:100%}.global_messaging ul.messages{opacity:0}.global_messaging ul.messages.show{opacity:1}.global_messaging .appended_message{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:absolute;overflow:visible;z-index:1;top:auto;width:100%}.global_messaging .appended_message.transition{-webkit-transition:bottom 200ms ease-in-out;-moz-transition:bottom 200ms ease-in-out;transition:bottom 200ms ease-in-out}.global_messaging .appended_message.transition .message{-webkit-transition:padding-bottom 300ms ease-in-out;-moz-transition:padding-bottom 300ms ease-in-out;transition:padding-bottom 300ms ease-in-out}.global_messaging .appended_message .just_appended{opacity:1;padding-bottom:22px}.global_messaging .appended_message .timestamp,.global_messaging .appended_message .message_meta{opacity:0}.global_messaging .loading_bar_wrapper{position:absolute;z-index:4;top:62px;left:20px;width:400px;height:2px;opacity:0;-webkit-transition:opacity 150ms linear;-moz-transition:opacity 150ms linear;transition:opacity 150ms linear}.global_messaging .loading_bar_wrapper.loading{opacity:1;-webkit-transition:opacity 0ms linear;-moz-transition:opacity 0ms linear;transition:opacity 0ms linear}.global_messaging .loading_bar_wrapper.loading .loading_bar{-webkit-transition:width 400ms ease-in-out;-moz-transition:width 400ms ease-in-out;transition:width 400ms ease-in-out}.global_messaging .loading_bar_wrapper.slow .loading_bar{-webkit-transition:width 2000ms ease-in-out;-moz-transition:width 2000ms ease-in-out;transition:width 2000ms ease-in-out}.global_messaging .loading_bar_wrapper .loading_bar{width:100%;height:100%;background:#00d280}.global_messaging.staff ul.messages li:last-child,.global_messaging.disabled ul.messages li:last-child{margin-bottom:20px}.global_messaging.loading{position:absolute;right:0;left:auto !important;height:285px}.global_messaging.minimized{width:240px;height:50px}.global_messaging.minimized .header{height:50px;padding-top:13px;padding-right:13px;padding-left:18px}.global_messaging.minimized .header:hover{background:#f3f5f9}.global_messaging.minimized .header .image{width:25px;height:25px;margin-left:-4px}.global_messaging.minimized .header .image .online{display:none}.global_messaging.minimized .header h2{left:40px;max-width:72%;padding-top:1px;padding-left:9px}.global_messaging.minimized .header .controls{margin-top:-4px}.global_messaging.minimized .header .maximize{background-color:rgba(255,255,255,0);display:block}.global_messaging.minimized .header .close{margin-top:2px;opacity:0;-webkit-transition:opacity 100ms linear;-moz-transition:opacity 100ms linear;transition:opacity 100ms linear}.global_messaging.minimized .header:hover .close{opacity:1}.global_messaging.minimized .messages{opacity:0}.global_messaging.no_messages,.global_messaging--failure{height:285px}.global_messaging.no_messages.no_messages_error,.global_messaging--failure.no_messages_error{height:309px}.global_messaging.no_messages .header .border,.global_messaging.no_messages .header .options,.global_messaging--failure .header .border,.global_messaging--failure .header .options{display:none}.global_messaging.no_messages .compose,.global_messaging--failure .compose{padding-top:0}.global_messaging.no_messages .compose label,.global_messaging--failure .compose label{display:none}.global_messaging.no_messages .compose .inputcontainer.textarea textarea,.global_messaging--failure .compose .inputcontainer.textarea textarea{min-height:157px;height:157px;max-height:157px}.global_messaging.no_messages .global_messaging_failure_error,.global_messaging--failure .global_messaging_failure_error{position:absolute;top:50%;margin-top:-10px;padding:0 20px;text-align:center;color:#f95133}.global_messaging.no_messages.minimized .compose{display:none}.global_messaging.unread_messages .header .image img{display:none}.global_messaging.unread_messages .header .image .unread_message_icon{display:block}.global_messaging .message_success_wrapper.old_template{opacity:0;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;transition:opacity 200ms linear}.global_messaging .message_success_wrapper.old_template.show{opacity:1}.global_messaging .message_success_wrapper.old_template .message_success{position:absolute;top:62px;left:20px;width:400px;height:60px;background:#bcf1cd;border-radius:2px;text-align:center;color:#1fc174;font-size:16px;line-height:60px}.global_messaging .message_success_wrapper.old_template .alist{position:absolute;bottom:36px;left:0;width:100%;text-align:center;color:#aeb4bf;font-size:14px;line-height:21px}.global_messaging .message_success_wrapper.old_template .alist a{color:#aeb4bf;text-decoration:underline}.global_messaging .message_success_wrapper.old_template .alist a:hover{color:#949aa6}.global_messaging .message_success_wrapper.new_template{z-index:3;position:absolute;left:0;right:0;top:0;bottom:0;background:#fafbfd;border-top-left-radius:2px;border-top-right-radius:2px;opacity:0;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;transition:opacity 200ms linear}.global_messaging .message_success_wrapper.new_template.show{opacity:1}.global_messaging .message_success_wrapper.new_template.show_similar .message_success_similar{display:block}.global_messaging .message_success_wrapper.new_template .message_success{text-align:center;background:#fff;padding:20px 0 17px;padding-right:10px;border-top-left-radius:2px;border-top-right-radius:2px}.global_messaging .message_success_wrapper.new_template .message_success h2{font-weight:400;color:#1fc174;padding:0;font-size:16px;line-height:22px}.global_messaging .message_success_wrapper.new_template .message_success .sidenote{color:#aeb4bf;font-size:14px;line-height:21px}.global_messaging .message_success_wrapper.new_template .message_success .sidenote a{color:#aeb4bf;text-decoration:underline}.global_messaging .message_success_wrapper.new_template .message_success .sidenote a:hover{color:#949aa6}.global_messaging .message_success_wrapper.new_template .message_success_similar{border-top:1px solid #ebedf2;text-align:center}.global_messaging .message_success_wrapper.new_template .message_success_similar h2{padding-top:3px;padding-bottom:2px;font-size:18px;line-height:70px;font-weight:600;font-family:'Open Sans',sans-serif}.global_messaging .message_success_wrapper.new_template .message_success_similar .similar_users{width:360px;margin:0 auto}.global_messaging .message_success_wrapper.new_template .message_success_similar .similar_users .similar_user{float:left;border-radius:50%;overflow:hidden;margin:0 15px}.global_messaging .message_success_wrapper.new_template .message_success_similar .similar_users .similar_user,.global_messaging .message_success_wrapper.new_template .message_success_similar .similar_users .similar_user a,.global_messaging .message_success_wrapper.new_template .message_success_similar .similar_users .similar_user img{display:block;width:90px;height:90px}.oktooltip.global_messaging_tooltip,.oktooltip.global_messaging_tooltip.small,.oktooltip.global_messaging_tooltip.dark{z-index:91501}#global_messaging_scam_warning{width:520px}#global_messaging_scam_warning .content{font-size:15px;line-height:22px;text-align:left}#global_messaging_scam_warning .content ol{list-style-type:disc}#global_messaging_scam_warning .content ol li{margin-top:8px;margin-left:20px}#global_messaging_scam_warning.aligncenter .buttons{margin-top:35px;margin-bottom:15px}#windowshade,.modal{visibility:hidden;opacity:0;-webkit-transition-property:visibility,opacity,background;-moz-transition-property:visibility,opacity,background;transition-property:visibility,opacity,background;-webkit-transition-duration:0ms,200ms,200ms;-moz-transition-duration:0ms,200ms,200ms;transition-duration:0ms,200ms,200ms;-webkit-transition-timing-function:linear,ease-in,ease-in;-moz-transition-timing-function:linear,ease-in,ease-in;transition-timing-function:linear,ease-in,ease-in;-webkit-transition-delay:200ms,0ms,0ms;-moz-transition-delay:200ms,0ms,0ms;transition-delay:200ms,0ms,0ms}#windowshade.show,.modal.show{visibility:visible;opacity:1;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in}#windowshade{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;background:rgba(17,17,17,0.7);z-index:92000}#windowshade.quickbuy:not(.windowshade-okpay){background:rgba(235,237,242,0.96)}#windowshade .modal.show{position:relative}body.okc2014_onboarding #windowshade{top:65px}body.okc2014_onboarding.staffbar:not(.staffbar-bottom) #windowshade{top:95px}.modal{position:absolute;margin:60px 0;left:50%;top:0;width:720px;margin-left:-360px;padding:30px 30px 30px;background:#fafbfd;z-index:20002;border-radius:5px}.modal > .heading{margin-top:-30px;margin-left:-30px;margin-right:-30px;margin-bottom:30px;border-top-left-radius:5px;border-top-right-radius:5px}.modal .image{margin-bottom:15px}.modal .title{padding:0;margin-bottom:5px;font-weight:400;font-size:18px;line-height:74px}.modal .content{margin:0}.modal .content.empty{margin-top:0}.modal .content > .title:first-of-type{margin-bottom:40px}.modal .buttons{margin-top:40px}.modal .buttons ul{margin:0}.modal .buttons ul li{display:inline-block;vertical-align:top;margin-right:5px}.modal .buttons ul li.align-right{float:right}.modal .buttons ul li:last-child{margin-right:0}.modal .buttons .flatbutton,.modal .buttons .btn{vertical-align:top;width:auto;min-width:120px;margin:0}.modal .buttons .btn a{padding:0 20px}.modal .buttons .btn.simple a{padding:0}.modal .buttons .simplecancel{display:inline-block;font-size:15px;line-height:21px;color:#949aa6;box-shadow:0 1px 0 #949aa6;margin-top:16px;background:transparent;border:0;padding:0;cursor:pointer}.modal .buttons .simplecancel:hover{box-shadow:none}.modal > .close{display:block;position:absolute;top:0;right:0;width:74px;height:74px;color:#aeb4bf;text-align:center}.modal > .close:hover{color:#5e6573}.modal > .close .icon,.modal > .close .icon:before{font-size:15px;line-height:74px}.modal .title + .content:not(.empty),.modal .desc + .content:not(.empty){margin-top:40px}.modal .drag_area{height:0;width:0;overflow:visible;display:none}.modal .drag_area .top,.modal .drag_area .left,.modal .drag_area .right,.modal .drag_area .bottom{position:absolute}.modal .drag_area .top,.modal .drag_area .bottom{width:100%;height:30px;left:0}.modal .drag_area .left,.modal .drag_area .right{top:0;bottom:0;width:30px}.modal .drag_area .top{top:0}.modal .drag_area .left{left:0}.modal .drag_area .right{right:0}.modal .drag_area .bottom{bottom:0}.modal.draggable .drag_area{display:block}.modal.default_type .title_container{height:74px;padding:0 30px;margin-top:-30px;margin-left:-30px;margin-right:-30px;margin-bottom:30px;background:#FFF;border-bottom:1px solid #ebedf2;border-top-left-radius:5px;border-top-right-radius:5px}.modal.default_type .title{text-align:left}.modal.inline_type{box-shadow:1px 2px 10px 0 rgba(148,154,166,0.6)}.modal.inline_type .title{margin:0;font-size:24px;line-height:52px}.modal.inline_type .desc{font-size:16px;line-height:22px}.modal.small{width:440px}.modal.behind{z-index:19999}.modal.alignleft{text-align:left}.modal.aligncenter{text-align:center}.modal.alignright{text-align:right}.modal.alignright > .close{right:auto;left:0}.modal.no_close > .close{display:none}.modal.stackedbuttons .buttons ul li{display:block;margin:0}.modal.stackedbuttons .buttons ul li .flatbutton{display:inline-block}.modal.fullbleedheading > .heading{border-radius:2px 2px 0 0}.modalform .content{padding-top:40px;padding-bottom:12px}.open-what-i-want{background:transparent;border:0;padding:0;cursor:pointer;width:100%;text-align:left}@-webkit-keyframes stripes{0%{background-position:0 0}100%{background-position:-30px 0}}@-moz-keyframes stripes{0%{background-position:0 0}100%{background-position:-30px 0}}@keyframes stripes{0%{background-position:0 0}100%{background-position:-30px 0}}.wiw-form-row{margin-top:35px}.wiw-form-row:after{content:"";display:table;clear:both}.wiw-form-row:first-child{margin-top:0}.wiw-form-headline{display:block;margin-top:33px;padding-top:58px;border-top:1px solid #ebedf2;font-size:18px;color:#474d59}.wiw-form-headline:after{content:"";display:table;clear:both}.wiw-form-headline:first-child{margin-top:0;padding-top:0;border-top:0}.wiw-form-gender,.wiw-form-age,.wiw-form-status,.wiw-form-nearme,.wiw-form-monogamous{width:250px}.wiw-form-gender .oknf-label,.wiw-form-age .oknf-label,.wiw-form-monogamous .oknf-label{margin-bottom:16px}.wiw-form-gender,.wiw-form-status{float:left}.wiw-form-age,.wiw-form-nearme{float:right}.wiw-form-age input{display:inline;width:98px}.wiw-form-age-label{display:inline-block;width:50px;text-align:center}.wiw-form-status .oknf-label,.wiw-form-nearme .oknf-label{margin-bottom:11px}.wiw-form-lookingfor .oknf-checkbox{width:205px;margin-top:11px}.wiw-form-error{color:#f95133}.wiw-form-show-plus{background:transparent;border:0;padding:0;cursor:pointer;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;display:block;width:100%;margin-top:55px;margin-bottom:50px;padding-bottom:30px;border-bottom:1px solid #ccd0d9;font-size:16px;color:#3260c7;text-align:left}.wiw-form-show-plus:hover{color:#104da1}.wiw-form-plus{width:100%;padding:30px;background:#f3f5f9;border-radius:4px}.wiw-form-plus,.wiw-form-plus:first-child{margin-top:35px}.wiw-form-plus-note-tag{position:relative;bottom:6px;left:8px;float:right;width:80px;height:36px;border-radius:36px;border:1px solid #ff8aa4;color:#f93b66;text-align:center;line-height:36px}.wiw-form-plus-note-link{margin-left:6px}.wiw-form-plus-error{margin-top:0 !important}.wiw-form-alist{margin-left:10px;font-size:14px;color:#ff597e;font-weight:normal}.wiw-form-alist:hover{color:#f93b66}.wiw-form-height--disabled{color:#aeb4bf}.wiw-form-height .oknf-label{margin-bottom:16px}.wiw-form-height .oknf-select,.wiw-form-height-separator{float:left}.wiw-form-height .oknf-select{min-width:100px;width:100px}.wiw-form-height-separator{width:57px;line-height:46px;text-align:center}.wiw-form-height .oknf-message{float:left;width:100%}.wiw-form-ethnicity .oknf-checkbox,.wiw-form-religion .oknf-checkbox{float:left;width:50%}.wiw-form-ethnicity .oknf-checkbox,.wiw-form-ethnicity .oknf-checkbox:first-child,.wiw-form-religion .oknf-checkbox,.wiw-form-religion .oknf-checkbox:first-child{margin-top:11px}.flexbox .wiw-form-ethnicity .wiw-form-ethnicity-fields,.flexbox .wiw-form-ethnicity .wiw-form-religion-fields,.flexbox .wiw-form-religion .wiw-form-ethnicity-fields,.flexbox .wiw-form-religion .wiw-form-religion-fields{width:50%;height:160px;display:-webkit-box;display:-moz-box;display:box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;flex-direction:column;-ms-flex-direction:column;-webkit-box-lines:multiple;-moz-box-lines:multiple;box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flexbox .wiw-form-ethnicity .wiw-form-ethnicity-fields .oknf-checkbox,.flexbox .wiw-form-ethnicity .wiw-form-religion-fields .oknf-checkbox,.flexbox .wiw-form-religion .wiw-form-ethnicity-fields .oknf-checkbox,.flexbox .wiw-form-religion .wiw-form-religion-fields .oknf-checkbox{width:100%}.wiw-form .looking-for-quantity{display:block;width:100%;margin-top:30px}.wiw-form .looking-for-quantity-title{font-size:14px}.wiw-form .looking-for-quantity-bar-wrapper{position:relative;width:100%;height:15px;margin-top:9px;border-radius:15px;background:#fafbfd}.wiw-form .looking-for-quantity-bar{position:absolute;z-index:2;top:0;left:0;height:100%;border-radius:15px;-webkit-transition-property:width background-color;-moz-transition-property:width background-color;transition-property:width background-color;-webkit-transition-duration:300ms;-moz-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}.wiw-form .looking-for-quantity--calculating .looking-for-quantity-bar{background:#949aa6;width:0;-webkit-transition:none;-moz-transition:none;transition:none}.wiw-form .looking-for-quantity--calculating .looking-for-quantity-bar-wrapper:after{content:"";position:absolute;overflow:hidden;top:0;left:0;width:100%;height:100%;background-color:transparent;background-image:-webkit-linear-gradient(-215deg,#e4edfd 25%,transparent 25%,transparent 50%,#e4edfd 50%,#e4edfd 75%,transparent 75%,transparent);background-image:linear-gradient(-55deg,#e4edfd 25%,transparent 25%,transparent 50%,#e4edfd 50%,#e4edfd 75%,transparent 75%,transparent);background-size:30px 40px;-webkit-animation:stripes 900ms linear infinite;-moz-animation:stripes 900ms linear infinite;animation:stripes 900ms linear infinite;border-radius:15px}.wiw-form .looking-for-quantity--good .looking-for-quantity-bar{width:100%;background:#1fc174}.wiw-form .looking-for-quantity--decent .looking-for-quantity-bar{width:70%;background:#f8c637}.wiw-form .looking-for-quantity--low .looking-for-quantity-bar{width:30%;background:#fb674e}.wiw-form .looking-for-quantity--none .looking-for-quantity-bar{width:5%;background:#fb674e}#p_settings #downgrade_modal,#downgrade_modal{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:625px;padding-bottom:0}#p_settings #downgrade_modal .heading,#downgrade_modal .heading{position:relative;overflow:hidden;height:285px;background:#4c7bd9}#p_settings #downgrade_modal .heading .bubble1,#p_settings #downgrade_modal .heading .bubble2,#downgrade_modal .heading .bubble1,#downgrade_modal .heading .bubble2{position:absolute}.cssanimations #p_settings #downgrade_modal .heading .bubble1,.cssanimations #p_settings #downgrade_modal .heading .bubble2,.cssanimations #downgrade_modal .heading .bubble1,.cssanimations #downgrade_modal .heading .bubble2{opacity:0}#p_settings #downgrade_modal .heading .bubble1,#downgrade_modal .heading .bubble1{top:36px;right:82px;width:285px;height:74px;background:url("//cdn.okccdn.com/media/img/alist/pq_downgrade_modal_bubble1.png")}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#p_settings #downgrade_modal .heading .bubble1,#downgrade_modal .heading .bubble1{background-image:url("//cdn.okccdn.com/media/img/alist/pq_downgrade_modal_bubble1@2x.png");background-size:285px 74px}}#p_settings #downgrade_modal .heading .bubble2,#downgrade_modal .heading .bubble2{top:136px;left:49px;width:317px;height:110px;background:url("//cdn.okccdn.com/media/img/alist/pq_downgrade_modal_bubble2.png")}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#p_settings #downgrade_modal .heading .bubble2,#downgrade_modal .heading .bubble2{background-image:url("//cdn.okccdn.com/media/img/alist/pq_downgrade_modal_bubble2@2x.png");background-size:317px 110px}}#p_settings #downgrade_modal .heading.trigger_animation .bubble1,#p_settings #downgrade_modal .heading.trigger_animation .bubble2,#downgrade_modal .heading.trigger_animation .bubble1,#downgrade_modal .heading.trigger_animation .bubble2{-webkit-animation:pop-open 200ms;-moz-animation:pop-open 200ms;animation:pop-open 200ms;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards}#p_settings #downgrade_modal .heading.trigger_animation .bubble2,#downgrade_modal .heading.trigger_animation .bubble2{-webkit-animation:pop-open 200ms;-moz-animation:pop-open 200ms;animation:pop-open 200ms;-webkit-animation-delay:480ms;-moz-animation-delay:480ms;animation-delay:480ms;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards}#p_settings #downgrade_modal h2,#p_settings #downgrade_modal h3,#downgrade_modal h2,#downgrade_modal h3{color:#3260c7}#p_settings #downgrade_modal h2,#downgrade_modal h2{margin-top:37px;font-weight:300;font-family:'Open Sans',sans-serif;font-size:39px;text-align:center}#p_settings #downgrade_modal h3,#downgrade_modal h3{font-family:'Open Sans',sans-serif;font-weight:400;font-size:20px}#p_settings #downgrade_modal .content,#downgrade_modal .content{position:relative;padding-top:16px;margin-bottom:18px;min-height:212px}#p_settings #downgrade_modal .content a,#downgrade_modal .content a{display:inline-block;text-decoration:none}#p_settings #downgrade_modal .content .confirm,#downgrade_modal .content .confirm{width:190px;margin-top:0;height:46px;font-size:15px;line-height:46px}#p_settings #downgrade_modal .content .deny,#downgrade_modal .content .deny{margin-top:11px;font-size:15px;color:#949aa6;padding-bottom:4px;border-bottom:1px solid #949aa6;cursor:pointer}#p_settings #downgrade_modal .content .deny:hover,#downgrade_modal .content .deny:hover{color:#aeb4bf;border-color:#aeb4bf}#p_settings #downgrade_modal .content .fineprint,#downgrade_modal .content .fineprint{position:absolute;bottom:5px;left:0;width:100%;font-size:13px;text-align:center;color:#949aa6}#p_settings #downgrade_modal .content .error_message,#downgrade_modal .content .error_message{display:none;position:absolute;top:45%;left:0;width:100%;text-align:center;font-size:22px;line-height:32px;color:#f95133}@-webkit-keyframes left-arm{0%{-webkit-transform:rotate(0deg)}25%{-webkit-transform:rotate(-5deg)}50%{-webkit-transform:rotate(0deg)}75%{-webkit-transform:rotate(5deg)}100%{-webkit-transform:rotate(0deg)}}@-moz-keyframes left-arm{0%{-moz-transform:rotate(0deg)}25%{-moz-transform:rotate(-5deg)}50%{-moz-transform:rotate(0deg)}75%{-moz-transform:rotate(5deg)}100%{-moz-transform:rotate(0deg)}}@keyframes left-arm{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}25%{-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-ms-transform:rotate(-5deg);-o-transform:rotate(-5deg);transform:rotate(-5deg)}50%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}75%{-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);-o-transform:rotate(5deg);transform:rotate(5deg)}100%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes right-arm{0%{-webkit-transform:rotate(0deg)}25%{-webkit-transform:rotate(5deg)}50%{-webkit-transform:rotate(0deg)}75%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg)}}@-moz-keyframes right-arm{0%{-moz-transform:rotate(0deg)}25%{-moz-transform:rotate(5deg)}50%{-moz-transform:rotate(0deg)}75%{-moz-transform:rotate(-5deg)}100%{-moz-transform:rotate(0deg)}}@keyframes right-arm{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}25%{-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);-o-transform:rotate(5deg);transform:rotate(5deg)}50%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}75%{-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-ms-transform:rotate(-5deg);-o-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes blink{0%{opacity:0}97.9%{opacity:0}98%{opacity:1}99.9%{opacity:1}100%{opacity:0}}@-moz-keyframes blink{0%{opacity:0}97.9%{opacity:0}98%{opacity:1}99.9%{opacity:1}100%{opacity:0}}@keyframes blink{0%{opacity:0}97.9%{opacity:0}98%{opacity:1}99.9%{opacity:1}100%{opacity:0}}#downgrade_modal2,#p_settings #downgrade_modal2{width:790px;height:432px;padding:0}#downgrade_modal2 *,#p_settings #downgrade_modal2 *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#downgrade_modal2 .heading,#p_settings #downgrade_modal2 .heading{position:relative;overflow:hidden;float:left;width:395px;height:100%;margin:0;padding-top:64px;background:#4c7bd9;border-top-left-radius:2px;border-bottom-left-radius:2px}#downgrade_modal2 .heading h2,#p_settings #downgrade_modal2 .heading h2{color:#fff;font-weight:300;font-family:'Open Sans',sans-serif;font-size:36px;line-height:43px}#downgrade_modal2 .heading .illustration_wrapper,#p_settings #downgrade_modal2 .heading .illustration_wrapper{position:absolute;height:234px;bottom:-16px;left:-45px}#downgrade_modal2 .heading .body,#downgrade_modal2 .heading .left-arm,#downgrade_modal2 .heading .right-arm,#p_settings #downgrade_modal2 .heading .body,#p_settings #downgrade_modal2 .heading .left-arm,#p_settings #downgrade_modal2 .heading .right-arm{position:absolute}#downgrade_modal2 .heading .body,#p_settings #downgrade_modal2 .heading .body{top:0;left:0;z-index:2;width:345px;height:234px;background:url("//cdn.okccdn.com/media/img/alist/pq_downgrade_modal_body.png")}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#downgrade_modal2 .heading .body,#p_settings #downgrade_modal2 .heading .body{background-image:url("//cdn.okccdn.com/media/img/alist/pq_downgrade_modal_body@2x.png");background-size:345px 234px}}#downgrade_modal2 .heading .left-arm,#p_settings #downgrade_modal2 .heading .left-arm{top:57px;left:-15px;z-index:1;width:117px;height:29px;background:url("//cdn.okccdn.com/media/img/alist/pq_downgrade_modal_left_arm_v2.png");-webkit-animation:left-arm 8000ms linear infinite;-moz-animation:left-arm 8000ms linear infinite;animation:left-arm 8000ms linear infinite;-webkit-transform-origin:100% 10px;-moz-transform-origin:100% 10px;-ms-transform-origin:100% 10px;-o-transform-origin:100% 10px;transform-origin:100% 10px}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#downgrade_modal2 .heading .left-arm,#p_settings #downgrade_modal2 .heading .left-arm{background-image:url("//cdn.okccdn.com/media/img/alist/pq_downgrade_modal_left_arm_v2@2x.png");background-size:117px 29px}}#downgrade_modal2 .heading .right-arm,#p_settings #downgrade_modal2 .heading .right-arm{top:83px;left:290px;z-index:3;width:117px;height:29px;background:url("//cdn.okccdn.com/media/img/alist/pq_downgrade_modal_right_arm.png");-webkit-animation:right-arm 8000ms linear infinite;-moz-animation:right-arm 8000ms linear infinite;animation:right-arm 8000ms linear infinite;-webkit-transform-origin:0px 10px;-moz-transform-origin:0px 10px;-ms-transform-origin:0px 10px;-o-transform-origin:0px 10px;transform-origin:0px 10px}@media (min--moz-device-pixel-ratio:1.25),(-o-min-device-pixel-ratio:1.25/2),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){#downgrade_modal2 .heading .right-arm,#p_settings #downgrade_modal2 .heading .right-arm{background-image:url("//cdn.okccdn.com/media/img/alist/pq_downgrade_modal_right_arm@2x.png");background-size:117px 29px}}#downgrade_modal2 .heading .eye,#p_settings #downgrade_modal2 .heading .eye{position:absolute;z-index:3;width:20px;height:20px;padding-top:9px;padding-left:6px;-webkit-transform:skewX(-44deg);-moz-transform:skewX(-44deg);-ms-transform:skewX(-44deg);-o-transform:skewX(-44deg);transform:skewX(-44deg);background:#fff8dc;opacity:0;-webkit-animation:blink 6300ms linear infinite;-moz-animation:blink 6300ms linear infinite;animation:blink 6300ms linear infinite}#downgrade_modal2 .heading .eye .blink,#p_settings #downgrade_modal2 .heading .eye .blink{background:#000;width:8px;height:2px}#downgrade_modal2 .heading .eye1,#p_settings #downgrade_modal2 .heading .eye1{top:30px;left:157px}#downgrade_modal2 .heading .eye2,#p_settings #downgrade_modal2 .heading .eye2{top:35px;left:236px}#downgrade_modal2 .content,#p_settings #downgrade_modal2 .content{float:right;position:relative;width:395px;height:100%;padding:0;padding-top:36px;margin:0;min-height:212px}#downgrade_modal2 .content h3,#p_settings #downgrade_modal2 .content h3{font-weight:600;font-family:'Open Sans',sans-serif;font-size:18px;color:#5e6573}#downgrade_modal2 .content h3.success_message,#p_settings #downgrade_modal2 .content h3.success_message{display:inline-block;max-width:210px}#downgrade_modal2 .content .box,#p_settings #downgrade_modal2 .content .box{display:inline-block;width:302px;padding:26px 0;margin-top:8px;font-weight:600;font-family:'Open Sans',sans-serif;font-size:22px;line-height:32px;color:#4c7bd9;border:2px dashed #d5e0f8;border-radius:4px}#downgrade_modal2 .content span,#p_settings #downgrade_modal2 .content span{display:inline-block;margin-top:18px;color:#5e6573;font-size:15px;line-height:24px}#downgrade_modal2 .content a,#p_settings #downgrade_modal2 .content a{display:inline-block;text-decoration:none}#downgrade_modal2 .content .confirm,#p_settings #downgrade_modal2 .content .confirm{width:190px;margin-top:32px;height:46px;font-size:15px;line-height:46px}#downgrade_modal2 .content .deny,#p_settings #downgrade_modal2 .content .deny{margin-top:11px;font-size:15px;color:#949aa6;padding-bottom:4px;border-bottom:1px solid #949aa6;cursor:pointer}#downgrade_modal2 .content .deny:hover,#p_settings #downgrade_modal2 .content .deny:hover{color:#aeb4bf;border-color:#aeb4bf}#downgrade_modal2 .content .success_message,#downgrade_modal2 .content .error_message,#p_settings #downgrade_modal2 .content .success_message,#p_settings #downgrade_modal2 .content .error_message{display:none;position:absolute;top:38%;left:0;width:100%;text-align:center}#downgrade_modal2 .content .success_message,#p_settings #downgrade_modal2 .content .success_message{color:#4c7bd9}#downgrade_modal2 .content .success_message .success_title,#p_settings #downgrade_modal2 .content .success_message .success_title{font-weight:600;font-family:'Open Sans',sans-serif;font-size:26px}#downgrade_modal2 .content .success_message .success_text,#p_settings #downgrade_modal2 .content .success_message .success_text{margin-top:8px;font-size:18px;line-height:24px}#downgrade_modal2 .content .error_message,#p_settings #downgrade_modal2 .content .error_message{font-size:22px;line-height:32px;color:#f95133}#upgrade_bounce_modal .okcountdown{margin:auto}#upgrade_bounce_modal .flatbutton{display:inline-block;width:auto;margin-top:30px;padding-right:20px;padding-left:20px}.modal.flagform{width:520px}.modal.flagform form .select{width:240px;float:right;margin-right:0px}.modal.flagform form .select .chosen-container{width:100% !important}.modal.flagform form .select .chosen-container .chosen-results li{border:0}.modal.flagform form .input_group{width:380px;margin-bottom:20px}.modal.flagform form .input_group:last-child{margin-bottom:0px}.modal.flagform form .input_group label{line-height:36px}.modal.flagform form .input_group textarea{display:block;width:380px;height:68px !important}#userblocked_flagged{width:480px}#delete_confirm .loader{position:relative;width:40px}#delete_confirm .success{display:none;width:40px;height:40px;margin:0;padding:0;border-radius:50%;background:#1fc174;text-align:center;color:#fff;font-size:22px;line-height:45px}#delete_confirm .success.show{display:block}#block_modal,#flag_modal{width:500px}#block_modal .title,#flag_modal .title{margin-bottom:15px}#block_modal .desc p,#flag_modal .desc p{font-size:14px;line-height:18px}#block_modal .modal_error,#flag_modal .modal_error{display:inline-block;width:100%;padding-top:18px;font-size:13px;color:#f95133}.reactmodal{display:inline-block;width:600px;margin-top:100px;background:#fafbfd;border-radius:5px;text-align:left}.reactmodal .OkModalContent-main{padding:0;background:transparent}.reactmodal-header{height:85px;padding:0px 40px;background:#fff;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:1px solid #ebedf2;color:#5e6573;font-size:20px;line-height:84px;font-family:'Open Sans',sans-serif;font-weight:600;font-family:'Open Sans',sans-serif}.reactmodal-header-close{background:transparent;border:0;padding:0;cursor:pointer;position:relative;overflow:hidden;float:right;width:50px;height:50px;margin-top:17px;margin-right:-25px;font-size:15px;color:#aeb4bf}.reactmodal-header-close:hover{color:#949aa6}.reactmodal-header-close .reader-text{position:absolute;left:150px}.reactmodal-header-close .icon:before{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"x"}.reactmodal-contents{padding:40px}.reactmodal-buttons{margin-top:45px}.reactmodal-buttons button,.reactmodal-buttons button.big{margin-left:10px;min-width:120px;width:120px}.reactmodal-buttons button:first-child,.reactmodal-buttons button.big:first-child{margin-left:0}#mutual_match_modal,.mutual-match-modal{width:440px}#mutual_match_modal .content,.mutual-match-modal .content{margin-top:30px}#mutual_match_modal .content:after,.mutual-match-modal .content:after{content:"";display:table;clear:both}#mutual_match_modal .content .userpic,.mutual-match-modal .content .userpic{display:inline-block;width:150px;height:150px;margin:0 10px;border-radius:100%}#mutual_match_modal .content .userpic img,.mutual-match-modal .content .userpic img{width:100%;height:100%;opacity:1;border-radius:100%;-webkit-transition:opacity 150ms ease-in-out;-moz-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out}#mutual_match_modal .content .userpic img.hide,.mutual-match-modal .content .userpic img.hide{opacity:0}#mutual_match_modal.show,.mutual-match-modal.show{-webkit-transition:none;-moz-transition:none;transition:none;-webkit-animation:zoom-in-out 200ms ease-in;-moz-animation:zoom-in-out 200ms ease-in;animation:zoom-in-out 200ms ease-in}.oknf{font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.oknf *,.oknf *:before,.oknf *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.oknf-label{display:block;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:bold;font-size:16px}.oknf-checkbox,.oknf-radio,.oknf-select,.oknf-switch{position:relative;display:inline-block;min-height:20px;min-width:20px;line-height:20px;font-size:16px;line-height:20px;cursor:pointer}.oknf-checkbox.oknf-checkbox--has-label,.oknf-checkbox.oknf-radio--has-label,.oknf-radio.oknf-checkbox--has-label,.oknf-radio.oknf-radio--has-label,.oknf-select.oknf-checkbox--has-label,.oknf-select.oknf-radio--has-label,.oknf-switch.oknf-checkbox--has-label,.oknf-switch.oknf-radio--has-label{padding-left:33px}.oknf-checkbox input,.oknf-radio input,.oknf-switch input{position:absolute;opacity:0.01}.oknf-checkbox input:focus,.oknf-radio input:focus,.oknf-switch input:focus{outline:none}.oknf-checkbox-decoration::before,.oknf-checkbox-decoration::after,.oknf-checkbox-decoration::before,.oknf-checkbox-decoration::after,.oknf-radio-decoration::before,.oknf-radio-decoration::after,.oknf-radio-decoration::before,.oknf-radio-decoration::after{content:" ";display:block;position:absolute;top:0;left:0;width:20px;height:20px;-webkit-transition:border-color 75ms linear;-moz-transition:border-color 75ms linear;transition:border-color 75ms linear;border-radius:3px}.oknf-checkbox--disabled,.oknf-checkbox--disabled:hover,.oknf-radio--disabled,.oknf-radio--disabled:hover{cursor:default}.oknf-radio-decoration::before{border-radius:50%}.oknf-select{display:block;min-width:250px;height:46px;background:#fff;border-radius:3px;-webkit-transition:box-shadow 75ms linear;-moz-transition:box-shadow 75ms linear;transition:box-shadow 75ms linear;font-size:16px;line-height:46px;color:#5e6573}.oknf-select:not(.oknf-select--disabled):hover::before,.oknf-select.focus::before{color:#5e6573}.oknf-select--disabled{opacity:0.6}.oknf-select--disabled select,.oknf-select--disabled select:hover,.oknf-select--disabled,.oknf-select--disabled:hover{cursor:default}.oknf-select::before{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"v";position:absolute;top:1px;right:16px;color:#aeb4bf;font-size:13px;-webkit-transition:color 75ms linear;-moz-transition:color 75ms linear;transition:color 75ms linear}.oknf-select select{display:block;position:absolute;z-index:2;top:0;left:0;min-width:100%;height:100%;min-height:100%;font-size:16px}.oknf-select select{cursor:pointer;opacity:0}.oknf-select-active{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;padding-right:40px;padding-left:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;color:#5e6573}.oknf-select-active--placeholder{color:#aeb4bf}.oknf-select-clear{background:transparent;border:0;padding:0;cursor:pointer;position:absolute;z-index:3;overflow:hidden;right:8px;top:9px;width:30px;height:30px;background:#fff;font-size:11px;line-height:30px;text-align:center;color:#aeb4bf;-webkit-transition:color 75ms linear;-moz-transition:color 75ms linear;transition:color 75ms linear}.oknf-select-clear:hover{color:#949aa6}.oknf-select-clear-text{position:absolute;left:40px}.oknf-select-clear:before{content:"";font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"x"}.oknf-switch{padding-left:43px;line-height:26px}.oknf-switch--has-label{padding-left:56px}.oknf-switch-decoration{position:absolute;top:0;left:0;display:block;width:43px;height:26px;padding:3px;border-radius:26px;-webkit-transition:background 75ms linear;-moz-transition:background 75ms linear;transition:background 75ms linear}.oknf-switch-decoration::before{content:" ";display:block;width:20px;height:20px;background:#fff;border-radius:50%;-webkit-transition:-webkit-transform 75ms linear;-moz-transition:-moz-transform 75ms linear;transition:transform 75ms linear}.oknf-switch input:checked ~ .oknf-switch-decoration{background:#1fc174}.oknf-switch input:checked ~ .oknf-switch-decoration::before{-webkit-transform:translateX(17px);-moz-transform:translateX(17px);-ms-transform:translateX(17px);-o-transform:translateX(17px);transform:translateX(17px)}.oknf-switch--has-bg{min-width:250px;height:46px;padding-top:10px;padding-left:66px;background:rgba(0,0,0,0.05);border-radius:3px}.oknf-switch--has-bg .oknf-switch-decoration{top:10px;left:10px}.oknf-typable-wrapper{position:relative;display:inline-block}.oknf-textarea,.oknf-input{position:relative;padding-right:13px;padding-left:13px;min-width:65px;border-radius:4px;-webkit-transition-property:background-color,border-color,color;-moz-transition-property:background-color,border-color,color;transition-property:background-color,border-color,color;-webkit-transition-duration:75ms;-moz-transition-duration:75ms;transition-duration:75ms;font-size:16px;line-height:24px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#5e6573}.oknf-textarea:focus:not(.oknf-input--error):not(.oknf-textarea--error),.oknf-input:focus:not(.oknf-input--error):not(.oknf-textarea--error){border-color:#9dbaf2}.oknf-textarea--error,.oknf-textarea--success,.oknf-input--error,.oknf-input--success{padding-right:30px}.oknf-textarea--error,.oknf-input--error{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iM3B4IiBoZWlnaHQ9IjEzcHgiIHZpZXdCb3g9IjAgMCAzIDEzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4gICAgICAgIDx0aXRsZT4hIGNvcHk8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxwYXRoIGQ9Ik0wLjAwMTk1MzEyNSwwIEwwLjAwMTk1MzEyNSw3Ljk5ODA0Njg4IEwyLjk5ODA0Njg4LDcuOTk4MDQ2ODggTDIuOTk4MDQ2ODgsMCBMMC4wMDE5NTMxMjUsMCBaIE0xLjUsMTAuMDAzOTA2MiBDMS4wNzY4MjA4LDEwLjAwMzkwNjIgMC43MjEzNTU2MDUsMTAuMTQ3Nzg1IDAuNDMzNTkzNzUsMTAuNDM1NTQ2OSBDMC4xNDU4MzE4OTUsMTAuNzIzMzA4NyAwLjAwMTk1MzEyNSwxMS4wNzg3NzM5IDAuMDAxOTUzMTI1LDExLjUwMTk1MzEgQzAuMDAxOTUzMTI1LDExLjkwODIwNTIgMC4xNDU4MzE4OTUsMTIuMjU5NDM4NiAwLjQzMzU5Mzc1LDEyLjU1NTY2NDEgQzAuNzIxMzU1NjA1LDEyLjg1MTg4OTUgMS4wNzY4MjA4LDEzIDEuNSwxMyBDMS45MjMxNzkyLDEzIDIuMjc4NjQ0MzksMTIuODUxODg5NSAyLjU2NjQwNjI1LDEyLjU1NTY2NDEgQzIuODU0MTY4MTEsMTIuMjU5NDM4NiAyLjk5ODA0Njg4LDExLjkwODIwNTIgMi45OTgwNDY4OCwxMS41MDE5NTMxIEMyLjk5ODA0Njg4LDExLjA3ODc3MzkgMi44NTQxNjgxMSwxMC43MjMzMDg3IDIuNTY2NDA2MjUsMTAuNDM1NTQ2OSBDMi4yNzg2NDQzOSwxMC4xNDc3ODUgMS45MjMxNzkyLDEwLjAwMzkwNjIgMS41LDEwLjAwMzkwNjIgTDEuNSwxMC4wMDM5MDYyIFoiIGlkPSIhLWNvcHkiIGZpbGw9IiNGOTUxMzMiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==);background-position:right 15px center;background-repeat:no-repeat}.oknf-textarea--success,.oknf-input--success{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMTMgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmMgY29weSAyPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8cGF0aCBkPSJNMTEuMTQ2NDg0NCwwLjUyMzQzNzUgTDQuNDY4NzUsNy4xNzU3ODEyNSBMMS44MjgxMjUsNC41MzUxNTYyNSBMMC4xMDE1NjI1LDYuMjYxNzE4NzUgTDQuNDY4NzUsMTAuNjI4OTA2MiBMMTIuODQ3NjU2MiwyLjI1IEwxMS4xNDY0ODQ0LDAuNTIzNDM3NSBaIiBpZD0iYy1jb3B5LTIiIGZpbGw9IiMxRkMxNzQiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==);background-position:right 10px center;background-repeat:no-repeat}.oknf-textarea--is-searching,.oknf-input--is-searching{background-image:url("//cdn.okccdn.com/media/img/throbbers/throbber-sm.gif");background-position:right 10px center;background-repeat:no-repeat}.oknf-textarea{padding:13px;min-height:92px;resize:none}.oknf-textarea--error,.oknf-textarea--success{padding-right:33px}.oknf-textarea--error{background-position:93% 18px}.oknf-textarea--success{background-position:94% 20px}.oknf-input{height:46px}.oknf-input[type="search"]{-webkit-appearance:textfield}.oknf-input[type="search"]::-webkit-search-decoration,.oknf-input[type="search"]::-webkit-search-cancel-button{display:none}.oknf-searchbtn{background:transparent;border:0;padding:0;cursor:pointer;position:absolute;right:6.5px;padding:2px 6.5px;top:50%;pointer-events:none;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}.oknf-searchbtn .okicon{font-size:13px;color:#aeb4bf;text-indent:-9999px}.oknf-searchbtn--clearable{pointer-events:auto}.oknf-searchbtn--clearable:hover .okicon{color:#5e6573}.oknf .oknf-label,.oknf--gray .oknf-label{color:#5e6573;letter-spacing:normal}.oknf label,.oknf--gray label{color:#5e6573}.oknf .oknf-checkbox input ~ .oknf-checkbox-decoration::before,.oknf .oknf-checkbox input ~ .oknf-radio-decoration::before,.oknf .oknf-radio input ~ .oknf-checkbox-decoration::before,.oknf .oknf-radio input ~ .oknf-radio-decoration::before,.oknf--gray .oknf-checkbox input ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-checkbox input ~ .oknf-radio-decoration::before,.oknf--gray .oknf-radio input ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-radio input ~ .oknf-radio-decoration::before{border:1px solid #ccd0d9;background:#fff}.oknf .oknf-checkbox input:hover ~ .oknf-checkbox-decoration::before,.oknf .oknf-checkbox input:hover ~ .oknf-radio-decoration::before,.oknf .oknf-checkbox input:focus ~ .oknf-checkbox-decoration::before,.oknf .oknf-checkbox input:focus ~ .oknf-radio-decoration::before,.oknf .oknf-radio input:hover ~ .oknf-checkbox-decoration::before,.oknf .oknf-radio input:hover ~ .oknf-radio-decoration::before,.oknf .oknf-radio input:focus ~ .oknf-checkbox-decoration::before,.oknf .oknf-radio input:focus ~ .oknf-radio-decoration::before,.oknf--gray .oknf-checkbox input:hover ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-checkbox input:hover ~ .oknf-radio-decoration::before,.oknf--gray .oknf-checkbox input:focus ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-checkbox input:focus ~ .oknf-radio-decoration::before,.oknf--gray .oknf-radio input:hover ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-radio input:hover ~ .oknf-radio-decoration::before,.oknf--gray .oknf-radio input:focus ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-radio input:focus ~ .oknf-radio-decoration::before{background:#fff;border-color:#949aa6}.oknf .oknf-checkbox input:checked ~ .oknf-checkbox-decoration::before,.oknf .oknf-checkbox input:checked ~ .oknf-radio-decoration::before,.oknf .oknf-radio input:checked ~ .oknf-checkbox-decoration::before,.oknf .oknf-radio input:checked ~ .oknf-radio-decoration::before,.oknf--gray .oknf-checkbox input:checked ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-checkbox input:checked ~ .oknf-radio-decoration::before,.oknf--gray .oknf-radio input:checked ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-radio input:checked ~ .oknf-radio-decoration::before{background:#e4edfd;border-color:#4c7bd9}.oknf .oknf-checkbox input:checked[type=checkbox] ~ .oknf-checkbox-decoration::after,.oknf .oknf-radio input:checked[type=checkbox] ~ .oknf-checkbox-decoration::after,.oknf--gray .oknf-checkbox input:checked[type=checkbox] ~ .oknf-checkbox-decoration::after,.oknf--gray .oknf-radio input:checked[type=checkbox] ~ .oknf-checkbox-decoration::after{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"c";text-align:center;font-size:10px;line-height:20px;color:#4c7bd9}.oknf .oknf-checkbox input:checked[type=radio] ~ .oknf-radio-decoration::after,.oknf .oknf-radio input:checked[type=radio] ~ .oknf-radio-decoration::after,.oknf--gray .oknf-checkbox input:checked[type=radio] ~ .oknf-radio-decoration::after,.oknf--gray .oknf-radio input:checked[type=radio] ~ .oknf-radio-decoration::after{width:8px;height:8px;margin-top:6px;margin-left:6px;background:#4c7bd9;border-radius:50%}.oknf .oknf-checkbox input:checked:hover ~ .oknf-checkbox-decoration::before,.oknf .oknf-checkbox input:checked:hover ~ .oknf-radio-decoration::before,.oknf .oknf-checkbox input:checked:focus ~ .oknf-checkbox-decoration::before,.oknf .oknf-checkbox input:checked:focus ~ .oknf-radio-decoration::before,.oknf .oknf-radio input:checked:hover ~ .oknf-checkbox-decoration::before,.oknf .oknf-radio input:checked:hover ~ .oknf-radio-decoration::before,.oknf .oknf-radio input:checked:focus ~ .oknf-checkbox-decoration::before,.oknf .oknf-radio input:checked:focus ~ .oknf-radio-decoration::before,.oknf--gray .oknf-checkbox input:checked:hover ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-checkbox input:checked:hover ~ .oknf-radio-decoration::before,.oknf--gray .oknf-checkbox input:checked:focus ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-checkbox input:checked:focus ~ .oknf-radio-decoration::before,.oknf--gray .oknf-radio input:checked:hover ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-radio input:checked:hover ~ .oknf-radio-decoration::before,.oknf--gray .oknf-radio input:checked:focus ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-radio input:checked:focus ~ .oknf-radio-decoration::before{background:#e4edfd;border-color:#9dbaf2}.oknf .oknf-checkbox input[disabled],.oknf .oknf-radio input[disabled],.oknf--gray .oknf-checkbox input[disabled],.oknf--gray .oknf-radio input[disabled]{cursor:default}.oknf .oknf-checkbox input[disabled] ~ .oknf-checkbox-label,.oknf .oknf-checkbox input[disabled] ~ .oknf-radio-label,.oknf .oknf-radio input[disabled] ~ .oknf-checkbox-label,.oknf .oknf-radio input[disabled] ~ .oknf-radio-label,.oknf--gray .oknf-checkbox input[disabled] ~ .oknf-checkbox-label,.oknf--gray .oknf-checkbox input[disabled] ~ .oknf-radio-label,.oknf--gray .oknf-radio input[disabled] ~ .oknf-checkbox-label,.oknf--gray .oknf-radio input[disabled] ~ .oknf-radio-label{color:#aeb4bf;cursor:default}.oknf .oknf-checkbox input[disabled]:hover ~ .oknf-checkbox-decoration::before,.oknf .oknf-checkbox input[disabled]:hover ~ .oknf-radio-decoration::before,.oknf .oknf-checkbox input[disabled] ~ .oknf-checkbox-decoration::before,.oknf .oknf-checkbox input[disabled] ~ .oknf-radio-decoration::before,.oknf .oknf-radio input[disabled]:hover ~ .oknf-checkbox-decoration::before,.oknf .oknf-radio input[disabled]:hover ~ .oknf-radio-decoration::before,.oknf .oknf-radio input[disabled] ~ .oknf-checkbox-decoration::before,.oknf .oknf-radio input[disabled] ~ .oknf-radio-decoration::before,.oknf--gray .oknf-checkbox input[disabled]:hover ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-checkbox input[disabled]:hover ~ .oknf-radio-decoration::before,.oknf--gray .oknf-checkbox input[disabled] ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-checkbox input[disabled] ~ .oknf-radio-decoration::before,.oknf--gray .oknf-radio input[disabled]:hover ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-radio input[disabled]:hover ~ .oknf-radio-decoration::before,.oknf--gray .oknf-radio input[disabled] ~ .oknf-checkbox-decoration::before,.oknf--gray .oknf-radio input[disabled] ~ .oknf-radio-decoration::before{background:#ebedf2;border-color:#ccd0d9}.oknf .oknf-checkbox input[disabled]:hover ~ span::after,.oknf .oknf-checkbox input[disabled] ~ span::after,.oknf .oknf-radio input[disabled]:hover ~ span::after,.oknf .oknf-radio input[disabled] ~ span::after,.oknf--gray .oknf-checkbox input[disabled]:hover ~ span::after,.oknf--gray .oknf-checkbox input[disabled] ~ span::after,.oknf--gray .oknf-radio input[disabled]:hover ~ span::after,.oknf--gray .oknf-radio input[disabled] ~ span::after{color:#aeb4bf !important}.oknf .oknf-checkbox input:not([disabled]):hover ~ .oknf-checkbox-label,.oknf .oknf-checkbox input:not([disabled]):hover ~ .oknf-radio-label,.oknf .oknf-checkbox input:not([disabled]):checked ~ .oknf-checkbox-label,.oknf .oknf-checkbox input:not([disabled]):checked ~ .oknf-radio-label,.oknf .oknf-radio input:not([disabled]):hover ~ .oknf-checkbox-label,.oknf .oknf-radio input:not([disabled]):hover ~ .oknf-radio-label,.oknf .oknf-radio input:not([disabled]):checked ~ .oknf-checkbox-label,.oknf .oknf-radio input:not([disabled]):checked ~ .oknf-radio-label,.oknf--gray .oknf-checkbox input:not([disabled]):hover ~ .oknf-checkbox-label,.oknf--gray .oknf-checkbox input:not([disabled]):hover ~ .oknf-radio-label,.oknf--gray .oknf-checkbox input:not([disabled]):checked ~ .oknf-checkbox-label,.oknf--gray .oknf-checkbox input:not([disabled]):checked ~ .oknf-radio-label,.oknf--gray .oknf-radio input:not([disabled]):hover ~ .oknf-checkbox-label,.oknf--gray .oknf-radio input:not([disabled]):hover ~ .oknf-radio-label,.oknf--gray .oknf-radio input:not([disabled]):checked ~ .oknf-checkbox-label,.oknf--gray .oknf-radio input:not([disabled]):checked ~ .oknf-radio-label{color:#5e6573}.oknf .oknf-select,.oknf--gray .oknf-select{box-shadow:#ccd0d9 0 1px 2px}.oknf .oknf-select:not(.oknf-select--disabled):hover,.oknf .oknf-select.focus,.oknf--gray .oknf-select:not(.oknf-select--disabled):hover,.oknf--gray .oknf-select.focus{box-shadow:#949aa6 0 1px 2px}.oknf .oknf-switch-decoration,.oknf--gray .oknf-switch-decoration{background:#ccd0d9}.oknf .oknf-switch:active .oknf-switch-decoration,.oknf .oknf-switch input:focus ~ .oknf-switch-decoration,.oknf--gray .oknf-switch:active .oknf-switch-decoration,.oknf--gray .oknf-switch input:focus ~ .oknf-switch-decoration{background:#bdc3ce}.oknf .oknf-switch input:checked:active ~ .oknf-switch-decoration,.oknf .oknf-switch input:checked:focus ~ .oknf-switch-decoration,.oknf--gray .oknf-switch input:checked:active ~ .oknf-switch-decoration,.oknf--gray .oknf-switch input:checked:focus ~ .oknf-switch-decoration{background:#1bab67}.oknf .oknf-textarea,.oknf .oknf-input,.oknf--gray .oknf-textarea,.oknf--gray .oknf-input{background-color:#fff;border:1px solid #ccd0d9}.oknf .oknf-textarea:hover:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf .oknf-textarea:focus:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf .oknf-textarea--is-searching,.oknf .oknf-input:hover:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf .oknf-input:focus:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf .oknf-input--is-searching,.oknf--gray .oknf-textarea:hover:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf--gray .oknf-textarea:focus:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf--gray .oknf-textarea--is-searching,.oknf--gray .oknf-input:hover:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf--gray .oknf-input:focus:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf--gray .oknf-input--is-searching{background-color:#fff;border-color:#aeb4bf}.oknf .oknf-textarea[disabled],.oknf .oknf-textarea[disabled]:hover,.oknf .oknf-input[disabled],.oknf .oknf-input[disabled]:hover,.oknf--gray .oknf-textarea[disabled],.oknf--gray .oknf-textarea[disabled]:hover,.oknf--gray .oknf-input[disabled],.oknf--gray .oknf-input[disabled]:hover{background:#ebedf2;border-color:#ebedf2;color:#949aa6;cursor:default}.oknf .oknf-textarea--error,.oknf .oknf-input--error,.oknf--gray .oknf-textarea--error,.oknf--gray .oknf-input--error{background-color:#fff;border-color:#fb674e}.oknf .oknf-helper-text,.oknf--gray .oknf-helper-text{display:block;width:100%;margin-top:12px;color:#949aa6;font-size:14px}.oknf .oknf-message,.oknf--gray .oknf-message{display:block;min-width:250px;margin-top:10px;font-size:14px;letter-spacing:normal;color:#5e6573;opacity:0;-webkit-transition:opacity 150ms linear;-moz-transition:opacity 150ms linear;transition:opacity 150ms linear}.oknf .oknf-message--show,.oknf--gray .oknf-message--show{opacity:1}.oknf .oknf-message--error,.oknf--gray .oknf-message--error{color:#f95133}.oknf .oknf-message--success,.oknf--gray .oknf-message--success{color:#1fc174}.oknf--blue .oknf-label{color:#fff;letter-spacing:0.3px}.oknf--blue label{color:#e4edfd}.oknf--blue .oknf-checkbox input ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-checkbox input ~ .oknf-radio-decoration::before,.oknf--blue .oknf-radio input ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-radio input ~ .oknf-radio-decoration::before{border:1px solid #9dbaf2;background:transparent}.oknf--blue .oknf-checkbox input:hover ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-checkbox input:hover ~ .oknf-radio-decoration::before,.oknf--blue .oknf-checkbox input:focus ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-checkbox input:focus ~ .oknf-radio-decoration::before,.oknf--blue .oknf-radio input:hover ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-radio input:hover ~ .oknf-radio-decoration::before,.oknf--blue .oknf-radio input:focus ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-radio input:focus ~ .oknf-radio-decoration::before{background:rgba(76,123,217,0.5);border-color:#9dbaf2}.oknf--blue .oknf-checkbox input:checked ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-checkbox input:checked ~ .oknf-radio-decoration::before,.oknf--blue .oknf-radio input:checked ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-radio input:checked ~ .oknf-radio-decoration::before{background:#fff;border-color:#fff}.oknf--blue .oknf-checkbox input:checked[type=checkbox] ~ .oknf-checkbox-decoration::after,.oknf--blue .oknf-radio input:checked[type=checkbox] ~ .oknf-checkbox-decoration::after{font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"c";text-align:center;font-size:10px;line-height:20px;color:#4c7bd9}.oknf--blue .oknf-checkbox input:checked[type=radio] ~ .oknf-radio-decoration::after,.oknf--blue .oknf-radio input:checked[type=radio] ~ .oknf-radio-decoration::after{width:8px;height:8px;margin-top:6px;margin-left:6px;background:#4c7bd9;border-radius:50%}.oknf--blue .oknf-checkbox input:checked:hover ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-checkbox input:checked:hover ~ .oknf-radio-decoration::before,.oknf--blue .oknf-checkbox input:checked:focus ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-checkbox input:checked:focus ~ .oknf-radio-decoration::before,.oknf--blue .oknf-radio input:checked:hover ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-radio input:checked:hover ~ .oknf-radio-decoration::before,.oknf--blue .oknf-radio input:checked:focus ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-radio input:checked:focus ~ .oknf-radio-decoration::before{background:#fff;border-color:#9dbaf2}.oknf--blue .oknf-checkbox input[disabled],.oknf--blue .oknf-radio input[disabled]{cursor:default}.oknf--blue .oknf-checkbox input[disabled] ~ .oknf-checkbox-label,.oknf--blue .oknf-checkbox input[disabled] ~ .oknf-radio-label,.oknf--blue .oknf-radio input[disabled] ~ .oknf-checkbox-label,.oknf--blue .oknf-radio input[disabled] ~ .oknf-radio-label{color:#4c7bd9;cursor:default}.oknf--blue .oknf-checkbox input[disabled]:hover ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-checkbox input[disabled]:hover ~ .oknf-radio-decoration::before,.oknf--blue .oknf-checkbox input[disabled] ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-checkbox input[disabled] ~ .oknf-radio-decoration::before,.oknf--blue .oknf-radio input[disabled]:hover ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-radio input[disabled]:hover ~ .oknf-radio-decoration::before,.oknf--blue .oknf-radio input[disabled] ~ .oknf-checkbox-decoration::before,.oknf--blue .oknf-radio input[disabled] ~ .oknf-radio-decoration::before{background:transparent;border-color:#4c7bd9}.oknf--blue .oknf-checkbox input[disabled]:hover ~ span::after,.oknf--blue .oknf-checkbox input[disabled] ~ span::after,.oknf--blue .oknf-radio input[disabled]:hover ~ span::after,.oknf--blue .oknf-radio input[disabled] ~ span::after{color:#4c7bd9 !important}.oknf--blue .oknf-checkbox input:not([disabled]):hover ~ .oknf-checkbox-label,.oknf--blue .oknf-checkbox input:not([disabled]):hover ~ .oknf-radio-label,.oknf--blue .oknf-checkbox input:not([disabled]):checked ~ .oknf-checkbox-label,.oknf--blue .oknf-checkbox input:not([disabled]):checked ~ .oknf-radio-label,.oknf--blue .oknf-radio input:not([disabled]):hover ~ .oknf-checkbox-label,.oknf--blue .oknf-radio input:not([disabled]):hover ~ .oknf-radio-label,.oknf--blue .oknf-radio input:not([disabled]):checked ~ .oknf-checkbox-label,.oknf--blue .oknf-radio input:not([disabled]):checked ~ .oknf-radio-label{color:#fff}.oknf--blue .oknf-select{box-shadow:rgba(0,0,0,0.4) 0 1px 2px}.oknf--blue .oknf-select:not(.oknf-select--disabled):hover,.oknf--blue .oknf-select.focus{box-shadow:rgba(0,0,0,0.4) 0 1px 2px}.oknf--blue .oknf-switch-decoration{background:#4c7bd9}.oknf--blue .oknf-switch:active .oknf-switch-decoration,.oknf--blue .oknf-switch input:focus ~ .oknf-switch-decoration{background:#376bd5}.oknf--blue .oknf-switch input:checked:active ~ .oknf-switch-decoration,.oknf--blue .oknf-switch input:checked:focus ~ .oknf-switch-decoration{background:#1bab67}.oknf--blue .oknf-textarea,.oknf--blue .oknf-input{background-color:#ebedf2;border:1px solid #ebedf2}.oknf--blue .oknf-textarea:hover:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf--blue .oknf-textarea:focus:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf--blue .oknf-textarea--is-searching,.oknf--blue .oknf-input:hover:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf--blue .oknf-input:focus:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),.oknf--blue .oknf-input--is-searching{background-color:#fff;border-color:#fff}.oknf--blue .oknf-textarea[disabled],.oknf--blue .oknf-textarea[disabled]:hover,.oknf--blue .oknf-input[disabled],.oknf--blue .oknf-input[disabled]:hover{background:#4c7bd9;border-color:#4c7bd9;color:#9dbaf2;cursor:default}.oknf--blue .oknf-textarea--error,.oknf--blue .oknf-input--error{background-color:#fff;border-color:#fb674e}.oknf--blue .oknf-helper-text{display:block;width:100%;margin-top:12px;color:#9dbaf2;font-size:14px}.oknf--blue .oknf-message{display:block;min-width:250px;margin-top:10px;font-size:14px;letter-spacing:0.3px;color:#5e6573;opacity:0;-webkit-transition:opacity 150ms linear;-moz-transition:opacity 150ms linear;transition:opacity 150ms linear}.oknf--blue .oknf-message--show{opacity:1}.oknf--blue .oknf-message--error{color:#f95133}.oknf--blue .oknf-message--success{color:#1fc174}.okcountdown{display:inline-block;overflow:hidden;white-space:nowrap;text-align:center}.okcountdown .colon{float:left}.okcountdown .flipper.hours,.okcountdown .colon.hourscolon{display:none}.okcountdown.showhours .flipper.hours,.okcountdown.showhours .colon.hourscolon{display:block}.okcountdown .flipper{float:left;text-align:center}#okphotos_overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;text-align:center;z-index:92000;background:rgba(0,0,0,0.8);opacity:0;font-family:'Open Sans',sans-serif;-webkit-transition-property:opacity;-moz-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:225ms;-moz-transition-duration:225ms;transition-duration:225ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}#okphotos_overlay.show{opacity:1}#okphotos_overlay.show > .content{opacity:1;-webkit-transition-delay:225ms;-moz-transition-delay:225ms;transition-delay:225ms}#okphotos_overlay.full_photos #album_selector #album_select_0{background:none;color:#aeb4bf;cursor:default;pointer-events:none}#okphotos_overlay.full_photos #album_selector #album_select_0:before{content:"!";font-size:15px;top:0;padding:0 3px}#okphotos_overlay.full_photos #album_selector #album_select_0:after{content:"full";color:#f95133;float:right}#okphotos_overlay > .content{width:540px;margin:auto;opacity:0;-webkit-transition-property:opacity;-moz-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:225ms;-moz-transition-duration:225ms;transition-duration:225ms;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0;-moz-transition-delay:0;transition-delay:0}#okphotos_overlay .user_tips{font-size:15px;line-height:20px;color:#949aa6}#okphotos_overlay.viewer #okphotos_header{width:0;height:0}#okphotos_overlay.no_photos #okphotos_reset{display:none}#okphotos_action_area{position:relative;width:100%;margin-top:60px}#okphotos_action_area:after{content:"";display:table;clear:both}#okphotos_action_area .action{display:none;width:100%;height:505px;background:#FFF;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#okphotos_action_area .action .action_header,#okphotos_action_area .action .action_content,#okphotos_action_area .action .action_footer{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#okphotos_action_area .action .action_header{position:absolute;top:0;left:0;right:0;height:68px;padding:25px;text-align:left;background:#FFF;box-shadow:0 -1px #ebedf2 inset;border-top-right-radius:5px;border-top-left-radius:5px;z-index:2}#okphotos_action_area .action .action_header:after{content:"";display:table;clear:both}#okphotos_action_area .action .action_header .title{font-size:18px;line-height:18px;color:#474d59;font-weight:400}#okphotos_action_area .action .action_content{position:relative;height:100%;padding:25px;overflow:auto;z-index:1;opacity:1;border-radius:5px;-webkit-transition:opacity 125ms ease;-moz-transition:opacity 125ms ease;transition:opacity 125ms ease}#okphotos_action_area .action .action_content.has_header{padding-top:93px}#okphotos_action_area .action .action_content.has_footer{padding-bottom:98px}#okphotos_action_area .action .action_footer{position:absolute;left:0;right:0;bottom:0;height:73px;padding:12.5px 25px;background:#FFF;box-shadow:0 1px #ebedf2 inset;border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:2}#okphotos_action_area .action .action_footer a,#okphotos_action_area .action .action_footer .flatbutton{height:48px;line-height:48px}#okphotos_action_area .action .action_footer .flatbutton{float:right;font-size:18px;font-weight:300;border-radius:3px;margin-left:10px}#okphotos_action_area .action .action_footer .flatbutton.green{background-color:#59C578}#okphotos_action_area .action .action_footer .flatbutton.disabled{background-color:#ccd0d9}#okphotos_action_area #okphotos_action_close{position:absolute;top:25px;right:25px;font-size:16px;color:#aeb4bf;z-index:3}#okphotos_action_area #okphotos_action_close:hover{color:#5e6573}@media screen and (min-height:800px){#okphotos_overlay > .content{width:720px}#okphotos_action_area .action{height:650px}}#okphotos_error .container{position:relative;top:40px;width:360px;height:320px;margin:auto;border-radius:10px}#okphotos_error .error_icon{width:100px;height:100px;margin:auto;margin-bottom:40px;background:#f95133;border-radius:100%}#okphotos_error .error_icon .icon{position:relative;top:34px;left:1px;font-size:34px;color:#FFF}#okphotos_error .text{margin-bottom:20px;font-size:28px;line-height:36px;font-weight:300;color:#5e6573}#okphotos_error .desc{font-size:15px;line-height:20px;margin-bottom:50px;color:#aeb4bf}#okphotos_error .flatbutton{height:56px;line-height:56px;font-size:15px;width:180px;border-radius:5px}#okphotos_action_area #okphotos_upload,#okphotos_action_area #okphotos_upload .action_content{height:370px}#okphotos_overlay.upload #okphotos_action_area{top:67.5px}#okphotos_upload #service_picker{padding-top:1px}#okphotos_upload .title{margin-top:50px;font-weight:300;font-size:32px;line-height:22px}#okphotos_upload .services{margin:60px auto 40px;text-align:center}#okphotos_upload .services .service{position:relative;display:inline-block;width:120px;vertical-align:top;cursor:pointer;color:#949aa6}#okphotos_upload .services .service:hover{color:#474d59}#okphotos_upload .services .service .icon{display:block;height:50px;font-size:50px;margin:0 auto 10px;-webkit-transition:color,opacity;-moz-transition:color,opacity;transition:color,opacity;-webkit-transition-duration:125ms;-moz-transition-duration:125ms;transition-duration:125ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}#okphotos_upload .services .service .label{padding-bottom:3px;font-size:15px;line-height:15px}#okphotos_upload .services #service_computer .icon{font-size:52px}#okphotos_upload .services #service_facebook:hover .icon{color:#3B5998}#okphotos_upload .services #service_instagram:hover .icon{color:#C08D64}#okphotos_upload .services .mac_only{display:none}.mac #okphotos_upload .services .mac_only{display:inline}.mac #okphotos_upload .services .pc_only{display:none}#okphotos_upload #okphotos_upload_form{display:inline-block;vertical-align:top;overflow:hidden}#okphotos_upload #okphotos_upload_form input{position:absolute;top:-500px;width:80px}#okphotos_upload iframe{display:none}#okphotos_upload .dragndrop_hint{margin-top:45px;font-size:15px;color:#aeb4bf}#okphotos_upload .dragndrop_message{position:absolute;top:50%;left:50%;width:400px;margin-left:-200px;margin-top:-12px;font-size:24px;line-height:24px;text-align:center;color:#5e6573;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 150ms;-moz-transition:opacity 150ms;transition:opacity 150ms}#okphotos_upload #okphotos_dragndrop{position:absolute;top:5px;left:5px;right:5px;bottom:5px;background:#FFF;opacity:0;z-index:0;-webkit-transition:opacity 200ms ease;-moz-transition:opacity 200ms ease;transition:opacity 200ms ease}#okphotos_upload .picker_wrapper{position:relative;z-index:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transition:opacity 150ms;-moz-transition:opacity 150ms;transition:opacity 150ms}#okphotos_upload.drag_over{position:relative;z-index:100}#okphotos_upload.drag_over #okphotos_dragndrop{border:3px dashed #aeb4bf;border-radius:5px;z-index:100;opacity:1}#okphotos_upload.drag_over .dragndrop_message{opacity:1;z-index:101;pointer-events:none}#okphotos_upload #okphotos_rules{position:absolute;left:50%;bottom:40px;width:380px;margin-left:-190px;padding:0;color:#ccd0d9;font-size:14px;line-height:22px}#okphotos_overlay.upload #okphotos_action_area.loading .picker_wrapper{opacity:0;pointer-events:none}@media screen and (min-height:800px){#okphotos_overlay.upload > .content{width:600px}#okphotos_action_area #okphotos_upload,#okphotos_action_area #okphotos_upload .action_content{height:440px}#okphotos_upload .title{font-size:38px;line-height:48px}#okphotos_upload #service_picker .service{width:146px}#okphotos_upload #service_picker .service .icon{font-size:68px;height:68px;margin-bottom:15px}#okphotos_upload #service_picker .service .label{font-size:16px}#okphotos_upload #service_picker #service_computer .icon{font-size:71px}}#okphotos_photo_tiles.action .action_content{padding-left:15px;padding-right:15px}#okphotos_photo_tiles #photo_tiles_header{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#okphotos_photo_tiles #photo_tiles_header .title,#okphotos_photo_tiles #photo_tiles_header .subtitle{position:relative;font-size:18px;line-height:18px;color:#474d59;padding:0;opacity:1;visibility:visible;-webkit-transition:visibility 0ms linear,opacity 225ms ease 10ms;-moz-transition:visibility 0ms linear,opacity 225ms ease 10ms;transition:visibility 0ms linear,opacity 225ms ease 10ms}#okphotos_photo_tiles #photo_tiles_header .subtitle{display:none;padding-left:20px}#okphotos_photo_tiles #photo_tiles_header .subtitle:hover{color:#949aa6}#okphotos_photo_tiles #photo_tiles_header .icon{position:absolute;top:0;left:0;color:#949aa6;font-size:11px;line-height:22px}#okphotos_photo_tiles .tile_holder{width:100%;-webkit-transition:opacity 300ms ease-in-out;-moz-transition:opacity 300ms ease-in-out;transition:opacity 300ms ease-in-out}#okphotos_photo_tiles .tile_holder:after{content:"";display:table;clear:both}#okphotos_photo_tiles .tile_holder .photo_tile{position:relative;display:block;float:left;width:30%;padding-top:30%;margin:0 1.6% 20px;text-align:left;cursor:pointer;opacity:0;vertical-align:top;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}#okphotos_photo_tiles .tile_holder .photo_tile:hover .image_container{opacity:0.92}#okphotos_photo_tiles .tile_holder .photo_tile:hover .radio{opacity:1}#okphotos_photo_tiles .tile_holder .photo_tile .image_container{position:absolute;top:0;left:0;width:100%;padding-top:100%;overflow:hidden;border-radius:4px;background:#000;-webkit-transition:opacity 125ms ease-in-out;-moz-transition:opacity 125ms ease-in-out;transition:opacity 125ms ease-in-out}#okphotos_photo_tiles .tile_holder .photo_tile .image_container img{display:block;position:absolute;top:-999px;left:-999px;right:-999px;bottom:-999px;height:100%;margin:auto}#okphotos_photo_tiles .tile_holder .photo_tile .radio{position:absolute;bottom:5px;right:5px;width:32px;height:32px;border:2px solid #FFF;border-radius:100%;opacity:0.2;background:rgba(0,0,0,0.25);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#okphotos_photo_tiles .tile_holder .photo_tile .radio .icon{display:block;height:100%;width:100%;color:#FFF;font-size:14px;line-height:36px;text-align:center;background-color:#59C578;border-radius:100%;opacity:0}#okphotos_photo_tiles .tile_holder .photo_tile .radio .icon:before{position:relative;left:1px}#okphotos_photo_tiles .tile_holder .photo_tile .title{font-size:15px;line-height:30px;margin:0;color:#5e6573;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#okphotos_photo_tiles .tile_holder .photo_tile .desc{font-size:13px;line-height:13px;color:#aeb4bf}#okphotos_photo_tiles .tile_holder .photo_tile.loaded{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-animation:tile-load 600ms cubic-bezier(0.165,0.84,0.44,1);-moz-animation:tile-load 600ms cubic-bezier(0.165,0.84,0.44,1);animation:tile-load 600ms cubic-bezier(0.165,0.84,0.44,1)}#okphotos_photo_tiles .tile_holder .photo_tile.error .image_container img{display:none}#okphotos_photo_tiles .tile_holder .photo_tile.error .image_container .i-photo-stack{position:absolute;top:50%;width:100%;text-align:center;color:#FFF;font-size:24px;margin-top:-12px;font-size:64px;margin-top:-32px}#okphotos_photo_tiles .tile_holder .photo_tile.no_radio .radio{display:none}#okphotos_photo_tiles .tile_holder .photo_tile.selected .radio{border:none;opacity:1}#okphotos_photo_tiles .tile_holder .photo_tile.selected .radio .icon{opacity:1;-webkit-animation:pop-open 125ms 1;-moz-animation:pop-open 125ms 1;animation:pop-open 125ms 1}#okphotos_photo_tiles .tile_holder .photo_tile.disabled{cursor:default}#okphotos_photo_tiles .tile_holder .photo_tile.disabled .radio{display:none}#okphotos_photo_tiles .tile_holder .photo_tile.disabled:hover img{opacity:0.3}#okphotos_photo_tiles .tile_holder .photo_tile.too_small:hover .image_container:after{position:absolute;top:0;left:0;right:0;bottom:0;content:"Sorry,I'm too small.";display:block;background:rgba(0,0,0,0.7);text-align:center;padding:38% 20px 0;color:#FFF;font-size:16px;line-height:20px}#okphotos_photo_tiles #photo_subtile_holder{display:none;opacity:0;visibility:hidden;-webkit-transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms;-moz-transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms;transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms}#okphotos_photo_tiles.show_subtiles #photo_tiles_header .title{display:none}#okphotos_photo_tiles.show_subtiles #photo_tiles_header .subtitle{display:block}#okphotos_photo_tiles.show_subtiles #photo_tile_holder{display:none;opacity:0;visibility:hidden;-webkit-transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms;-moz-transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms;transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms}#okphotos_photo_tiles.show_subtiles #photo_subtile_holder{display:block;opacity:1;visibility:visible;-webkit-transition:visibility 0ms linear,opacity 225ms ease 10ms;-moz-transition:visibility 0ms linear,opacity 225ms ease 10ms;transition:visibility 0ms linear,opacity 225ms ease 10ms}#okphotos_photo_tiles.transitioning .action_content{overflow:hidden !important}#okphotos_photo_tiles.transitioning #photo_tiles_header .title,#okphotos_photo_tiles.transitioning #photo_tiles_header .subtitle,#okphotos_photo_tiles.transitioning #photo_tile_holder,#okphotos_photo_tiles.transitioning #photo_subtile_holder{position:absolute;display:block;opacity:0;visibility:hidden;-webkit-transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms;-moz-transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms;transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms}#okphotos_photo_tiles #photo_tiles_loader{height:0px;background-image:url('//cdn.okccdn.com/media/img/throbbers/dotbar-gray.gif');background-position:center;background-repeat:no-repeat;-webkit-transition-property:height,opacity;-moz-transition-property:height,opacity;transition-property:height,opacity;-webkit-transition-duration:225ms;-moz-transition-duration:225ms;transition-duration:225ms;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;transition-timing-function:ease}#okphotos_photo_tiles.loading #photo_tiles_loader{height:30px}#okphotos_overlay.photo_tiles #okphotos_action_area.loading .action_content{opacity:0}#okphotos_edit{position:relative}#okphotos_edit .action_content{background:#f3f5f9}#okphotos_edit #okphotos_edit_wrapper{margin:auto;width:100%;height:100%;border-radius:4px;-webkit-transition:opacity 225ms ease;-moz-transition:opacity 225ms ease;transition:opacity 225ms ease}#okphotos_edit .crop_header,#okphotos_edit .caption_header,#okphotos_edit .reloading_header{display:none}#okphotos_edit #okphotos_frame{position:relative;margin:auto}#okphotos_edit #okphotos_photo{display:block;max-width:100%;max-height:100%;margin:auto;border-radius:4px}#okphotos_edit .simplecrop_container{width:100%;height:100%}#okphotos_edit #okphotos_edit_actions .inputcontainer{position:absolute;display:block;top:-90px;left:50%;width:400px;margin-left:-200px}#okphotos_edit #okphotos_edit_actions .inputcontainer textarea{display:block;min-height:84px;font-size:15px;line-height:22px;border-top-right-radius:0;border-bottom-right-radius:0}#okphotos_edit #okphotos_edit_actions:after{content:"";display:table;clear:both}#okphotos_edit #okphotos_edit_cancel{float:left;color:#ccd0d9}#okphotos_edit #okphotos_edit_cancel:hover{color:#aeb4bf}#okphotos_edit #okphotos_edit_cancel .icon{font-size:9px}#okphotos_edit.crop #okphotos_cropper,#okphotos_edit.crop .crop_header{display:block}#okphotos_edit.crop #okphotos_details,#okphotos_edit.crop #okphotos_edit_actions .inputcontainer{display:none}#okphotos_edit.caption #okphotos_details,#okphotos_edit.caption .caption_header{display:block}#okphotos_edit.caption #okphotos_cropper{display:none}#okphotos_edit.reloading .crop_header,#okphotos_edit.reloading .caption_header{display:none}#okphotos_edit.reloading #okphotos_edit_wrapper{opacity:0.15}#okphotos_edit.reloading #okphotos_edit_actions{opacity:0;visibility:hidden;-webkit-transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms;-moz-transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms;transition:opacity 225ms ease 0ms,visibility 0ms linear 325ms}#okphotos_overlay.finished #okphotos_action_area{top:2.5px}#okphotos_finished.action{height:500px;width:380px;margin:auto;text-align:center}#okphotos_finished .reassurance{padding-top:30px;font-weight:300;font-size:32px;line-height:38px}#okphotos_finished #okphotos_cropped_photo{display:block;height:190px;width:190px;margin:40px auto;border-radius:100%}#okphotos_finished button,#okphotos_finished a{display:block;margin:auto}#okphotos_finished button{width:140px;margin-bottom:20px;height:46px;line-height:46px;font-size:18px;font-weight:400}#okphotos_finished a{font-size:15px;text-decoration:none;color:#949aa6}#okphotos_finished a:hover{color:#aeb4bf}#okphotos_overlay.finished #okphotos_action_close{display:none}#okphotos_overlay.full_photos #upload_another{display:none}.simplecrop_container{overflow:hidden;position:relative;text-align:center;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.simplecrop_container .crop_components{pointer-events:none;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 225ms ease-in-out;-moz-transition:opacity 225ms ease-in-out;transition:opacity 225ms ease-in-out}.simplecrop_container.active .crop_components{pointer-events:auto;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}.simplecrop_container .image_frame{display:block;position:relative;margin:auto;overflow:hidden;height:100%}.simplecrop_container .image_frame .image_holder{height:100%}.simplecrop_container .image_frame img{display:block;max-width:100%;max-height:100%;pointer-events:none}.simplecrop_container .crop_area{position:absolute;cursor:move;background:rgba(255,255,255,0.08);box-shadow:0 0 0 1000px rgba(243,245,249,0.7)}.simplecrop_container .guides{display:none;position:absolute;height:100%;width:100%;border:1px solid rgba(255,255,255,0.25)}.simplecrop_container .guides.guides_h{left:0;top:33.3%;height:33.3%;border-left:none;border-right:none}.simplecrop_container .guides.guides_v{top:0;left:33.3%;width:33.3%;border-top:none;border-bottom:none}.simplecrop_container .crop_handle{box-sizing:content-box;position:absolute;height:18px;width:18px;padding:5px}.simplecrop_container .crop_handle span{position:fixed;display:block;height:18px;width:18px;border-radius:100%;background:#FFF;box-shadow:0 0 5px rgba(0,0,0,0.2)}.simplecrop_container .crop_handle.handle_e{cursor:e-resize;right:-14px;top:50%;margin-top:-14px}.simplecrop_container .crop_handle.handle_n{cursor:n-resize;left:50%;margin-left:-14px;top:-14px}.simplecrop_container .crop_handle.handle_w{cursor:w-resize;left:-14px;top:50%;margin-top:-14px}.simplecrop_container .crop_handle.handle_s{cursor:s-resize;bottom:-14px;left:50%;margin-left:-14px}.simplecrop_container .crop_handle.handle_ne{cursor:ne-resize;right:-14px;top:-14px}.simplecrop_container .crop_handle.handle_nw{cursor:nw-resize;left:-14px;top:-14px}.simplecrop_container .crop_handle.handle_sw{cursor:sw-resize;bottom:-14px;left:-14px}.simplecrop_container .crop_handle.handle_se{cursor:se-resize;bottom:-14px;right:-14px}.simplecrop_container.diagonal_handles .crop_handle.handle_n,.simplecrop_container.diagonal_handles .crop_handle.handle_e,.simplecrop_container.diagonal_handles .crop_handle.handle_s,.simplecrop_container.diagonal_handles .crop_handle.handle_w{display:none}a#closehover{top:20px}a#photoclose{position:fixed;top:15px;right:15px;display:block;width:50px;height:50px;outline:none;z-index:1001;background:none}a#photoclose .icon{position:absolute;top:50%;left:50%;margin-left:-10px;margin-top:-10px;background-image:url(//cdn.okccdn.com/media/img/sprites/close-x-small/close-x-small_56332f.png);background-repeat:no-repeat;display:block;width:20px;height:20px;background-position:0px 0px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2){a#photoclose .icon{background-image:url('//cdn.okccdn.com/media/img/sprites/close-x-small/close-x-small_56332f@2x.png');-webkit-background-size:40px 34px;-moz-background-size:40px 34px;background-size:40px 34px}}a#photoclose:hover{background:none}a#photoclose:hover .icon{background-image:url(//cdn.okccdn.com/media/img/sprites/close-x-small/close-x-small_56332f.png);background-repeat:no-repeat;display:block;width:20px;height:20px;background-position:-20px 0px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2){a#photoclose:hover .icon{background-image:url('//cdn.okccdn.com/media/img/sprites/close-x-small/close-x-small_56332f@2x.png');-webkit-background-size:40px 34px;-moz-background-size:40px 34px;background-size:40px 34px}}body.windows a#photoclose{right:15px}.oktooltip{display:none;position:absolute;top:20px;left:95px;max-width:275px;background:#FFF;border:1px solid #5e8ce3;color:#5e6573;cursor:default;text-align:left;-webkit-backface-visibility:hidden;border-radius:4px;z-index:89500}.oktooltip.dark,.oktooltip.small{z-index:91000}.oktooltip .heading,.oktooltip .msg{font-weight:400;line-height:22px;font-family:'Open Sans',sans-serif}.oktooltip .heading{display:none;background:#5e8ce3;font-weight:600;padding:10px 10px 10px 20px}.oktooltip .heading .title{color:#FFF}.oktooltip .heading .progress{color:#c0d5fd;float:right}.oktooltip .heading .close_btn,.oktooltip .heading .prev_btn,.oktooltip .heading .next_btn{display:none;float:right;width:26px;height:26px;line-height:26px;padding:0;margin:-2px 0 0 5px;color:#FFF;font-size:13px;text-align:center;border:none;border-radius:100%;background-color:#5e8ce3;opacity:0.7;-webkit-transition:background 100ms ease-in-out,opacity 100ms ease-in-out;-moz-transition:background 100ms ease-in-out,opacity 100ms ease-in-out;transition:background 100ms ease-in-out,opacity 100ms ease-in-out}.oktooltip .heading .close_btn:hover,.oktooltip .heading .prev_btn:hover,.oktooltip .heading .next_btn:hover{cursor:pointer;background-color:#7ca2e8;opacity:1}.oktooltip .heading .close_btn .icon,.oktooltip .heading .prev_btn .icon,.oktooltip .heading .next_btn .icon{position:relative}.oktooltip .heading .close_btn .icon{font-size:10px;top:1px}.oktooltip .heading .prev_btn,.oktooltip .heading .next_btn{background-color:#7ca2e8}.oktooltip .heading .prev_btn .icon{left:-1px;top:2px}.oktooltip .heading .next_btn .icon{left:1px;top:2px}.oktooltip .msg{padding:20px 20px}.oktooltip .arrow,.oktooltip .arrow:before{position:absolute}.oktooltip .arrow:before,.oktooltip .arrow:after{content:''}.oktooltip.has_close .close_btn{display:block}.oktooltip:not(.has_close) .heading{padding-right:17px}.oktooltip.has_steps .close_btn{display:none}.oktooltip.has_steps .prev_btn,.oktooltip.has_steps .next_btn{display:block}.oktooltip.has_heading .heading{display:block}.oktooltip.open{display:block;-webkit-animation-direction:normal;-moz-animation-direction:normal;animation-direction:normal}.oktooltip.closing{display:block;-webkit-animation-direction:reverse !important;-moz-animation-direction:reverse !important;animation-direction:reverse !important}.oktooltip.invisible{display:block;visibility:hidden}.oktooltip.on_top{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.on_top .arrow{left:50%;margin-left:-10px;bottom:-20px;height:0;width:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid transparent;border-top:10px solid #5e8ce3}.oktooltip.on_top .arrow:before{left:-10px;bottom:-9px;height:0;width:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid transparent;border-top:10px solid #FFF}.oktooltip.on_right{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.on_right .arrow{top:50%;margin-top:-10px;left:-20px;height:0;width:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent;border-right:10px solid #5e8ce3}.oktooltip.on_right .arrow:before{top:-10px;left:-9px;height:0;width:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent;border-right:10px solid #FFF}.oktooltip.on_bottom{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.on_bottom .arrow{left:50%;margin-left:-10px;top:-20px;height:0;width:0;border-top:10px solid transparent;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #5e8ce3}.oktooltip.on_bottom .arrow:before{left:-10px;top:-9px;height:0;width:0;border-top:10px solid transparent;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #FFF}.oktooltip.on_bottom.has_heading{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.on_bottom.has_heading .arrow{left:50%;margin-left:-10px;top:-20px;height:0;width:0;border-top:10px solid transparent;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #5e8ce3}.oktooltip.on_bottom.has_heading .arrow:before{display:none}.oktooltip.on_left{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.on_left .arrow{top:50%;margin-top:-10px;right:-20px;height:0;width:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid transparent;border-left:10px solid #5e8ce3}.oktooltip.on_left .arrow:before{top:-10px;right:-9px;height:0;width:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid transparent;border-left:10px solid #FFF}.oktooltip.no_open_animation{-webkit-animation:none !important;-moz-animation:none !important;animation:none !important}.oktooltip.no_word_break{white-space:nowrap}.oktooltip.no_transition{-webkit-transition-duration:0s;-moz-transition-duration:0s;transition-duration:0s}.oktooltip.error{border-color:#fb674e}.oktooltip.error .msg a{color:#fb674e}.oktooltip.error .msg a:hover{color:#f95133}.oktooltip.error .heading{background:#fb674e}.oktooltip.error .heading .close_btn{background-color:#fb674e}.oktooltip.error .heading .close_btn:hover{background-color:#fc9280}.oktooltip.error.on_top{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.error.on_top .arrow{left:50%;margin-left:-10px;bottom:-20px;height:0;width:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid transparent;border-top:10px solid #fb674e}.oktooltip.error.on_top .arrow:before{left:-10px;bottom:-9px;height:0;width:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid transparent;border-top:10px solid #FFF}.oktooltip.error.on_right{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.error.on_right .arrow{top:50%;margin-top:-10px;left:-20px;height:0;width:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent;border-right:10px solid #fb674e}.oktooltip.error.on_right .arrow:before{top:-10px;left:-9px;height:0;width:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent;border-right:10px solid #FFF}.oktooltip.error.on_bottom{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.error.on_bottom .arrow{left:50%;margin-left:-10px;top:-20px;height:0;width:0;border-top:10px solid transparent;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fb674e}.oktooltip.error.on_bottom .arrow:before{left:-10px;top:-9px;height:0;width:0;border-top:10px solid transparent;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #FFF}.oktooltip.error.on_bottom.has_heading{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.error.on_bottom.has_heading .arrow{left:50%;margin-left:-10px;top:-20px;height:0;width:0;border-top:10px solid transparent;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fb674e}.oktooltip.error.on_bottom.has_heading .arrow:before{display:none}.oktooltip.error.on_left{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.error.on_left .arrow{top:50%;margin-top:-10px;right:-20px;height:0;width:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid transparent;border-left:10px solid #fb674e}.oktooltip.error.on_left .arrow:before{top:-10px;right:-9px;height:0;width:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid transparent;border-left:10px solid #FFF}.oktooltip.small{max-width:5000px;color:#FFF;background:#000;border:none;text-align:center;pointer-events:none;border-radius:2px}.oktooltip.small .msg{white-space:nowrap;padding:7px 15px}.oktooltip.small.on_top{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.small.on_top .arrow{left:50%;margin-left:-5px;bottom:-10px;height:0;width:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid transparent;border-top:5px solid #000}.oktooltip.small.on_top .arrow:before{display:none}.oktooltip.small.on_right{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.small.on_right .arrow{top:50%;margin-top:-5px;left:-10px;height:0;width:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;border-right:5px solid #000}.oktooltip.small.on_right .arrow:before{display:none}.oktooltip.small.on_bottom{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.small.on_bottom .arrow{left:50%;margin-left:-5px;top:-10px;height:0;width:0;border-top:5px solid transparent;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000}.oktooltip.small.on_bottom .arrow:before{display:none}.oktooltip.small.on_left{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.small.on_left .arrow{top:50%;margin-top:-5px;right:-10px;height:0;width:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid transparent;border-left:5px solid #000}.oktooltip.small.on_left .arrow:before{display:none}.oktooltip.dark{color:#fff;background:#000;border:none}.oktooltip.dark .msg{padding-top:14px;padding-bottom:14px}.oktooltip.dark.on_top{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.dark.on_top .arrow{left:50%;margin-left:-5px;bottom:-10px;height:0;width:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid transparent;border-top:5px solid #000}.oktooltip.dark.on_top .arrow:before{display:none}.oktooltip.dark.on_right{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.dark.on_right .arrow{top:50%;margin-top:-5px;left:-10px;height:0;width:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;border-right:5px solid #000}.oktooltip.dark.on_right .arrow:before{display:none}.oktooltip.dark.on_bottom{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.dark.on_bottom .arrow{left:50%;margin-left:-5px;top:-10px;height:0;width:0;border-top:5px solid transparent;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000}.oktooltip.dark.on_bottom .arrow:before{display:none}.oktooltip.dark.on_left{-webkit-animation:fade-in 200ms 1;-moz-animation:fade-in 200ms 1;animation:fade-in 200ms 1}.oktooltip.dark.on_left .arrow{top:50%;margin-top:-5px;right:-10px;height:0;width:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid transparent;border-left:5px solid #000}.oktooltip.dark.on_left .arrow:before{display:none}.oktooltip .msg ul{list-style-type:disc;margin-left:17px}body.windows .oktooltip.small .msg,body.windows .oktooltip.dark .msg{font-weight:normal;letter-spacing:0.01em}div.pages{clear:both;padding:20px 0;position:relative}div.pages ul li{color:#949aa6;font-size:15px;line-height:80px}div.pages ul li a{display:block;font-weight:normal;text-align:center;padding:0;color:#949aa6;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.pages ul li a:hover{color:#4c7bd9}div.pages ul li.prev{position:absolute;right:50%;margin-right:73px}div.pages ul li.prev a{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAMAAACETmeaAAAABlBMVEUAAACUmqbrZs2uAAAAAXRSTlMAQObYZgAAAB1JREFUeNqNxrEJAAAAwjD7/9OCOItdUiUKbO6RAQVKAB6YY6uZAAAAAElFTkSuQmCC');background-repeat:no-repeat;background-position:0 35px;padding-left:15px;color:#949aa6}div.pages ul li.prev a:hover{color:#4c7bd9}div.pages ul li.prev.disabled{display:none}div.pages ul li.next{position:relative;left:50%;float:left;margin-left:-40px;width:80px;height:80px}div.pages ul li.next a{color:#FFF;width:100%;height:100%;background:#4c7bd9;border-radius:40px;-webkit-transition:background-color 100ms ease-in;-moz-transition:background-color 100ms ease-in;transition:background-color 100ms ease-in}div.pages ul li.next a:hover{background:#3260c7}div.pages ul li.next a.loading{background:#ccd0d9}div.pages ul li.next.disabled a,div.pages ul li.next.disabled a:hover,div.pages ul li.next.disabled a:active{background:#ebedf2;color:#aeb4bf;cursor:default}div.pages ul li.count{position:absolute;left:50%;margin-left:73px}div.pages ul li.count a{display:inline;border-bottom:1px solid #aeb4bf;color:#949aa6}div.pages ul li.count a:hover{color:#4c7bd9}.pages_content{opacity:1;-webkit-transition:opacity 300ms ease-in-out;-moz-transition:opacity 300ms ease-in-out;transition:opacity 300ms ease-in-out}.pages_content.transition_content{opacity:0}.popover{position:relative;text-align:left;-webkit-backface-visibility:hidden}.popover .contents{padding:30px;background:#fff;border:1px solid #ccd0d9;color:#5e6573;border-radius:5px}.popover h2.title{font-size:18px;line-height:15px;padding-bottom:20px;color:#474d59}.popover .content.empty{display:none}.popover .desc{line-height:22px;margin-bottom:25px;margin-top:-5px}.popover .buttons ul{margin:0}.popover .buttons ul li{display:inline-block;vertical-align:top;margin-right:5px}.popover .buttons ul li.align-right{float:right}.popover .buttons ul li:last-child{margin-right:0}.popover .buttons .flatbutton,.popover .buttons .btn{vertical-align:top;width:auto;min-width:120px;margin:0}.popover .buttons .btn a{padding:0 20px}.popover .buttons .btn.simple a{padding:0}.popover .tail{position:absolute;width:14px;height:14px;background:#fff;border:0px solid #ccd0d9;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.popover.arrowdown .tail,.popover.arrowtop .tail{border-right-width:1px;border-bottom-width:1px;bottom:-7px;left:50%;margin-left:50%}.popover.arrowup .tail,.popover.arrowbottom .tail{border-top-width:1px;border-left-width:1px;top:-7px}.popover.arrowleft .tail{border-bottom-width:1px;border-left-width:1px;left:-7px}.popover.arrowright .tail{border-top-width:1px;border-right-width:1px;right:-7px}.popover.arrowup .tail,.popover.arrowdown .tail,.popover.arrowbottom .tail,.popover.arrowtop .tail{left:50%;margin-left:-7px}.popover.arrowleft .tail,.popover.arrowright .tail{top:50%;margin-top:-7px}.popover.aligncenter{text-align:center}.popover.aligncenter .buttons{margin:0 auto}.popover.okpopover{position:absolute;display:none;z-index:92001;width:318px}.popover.okpopover.arrowup,.popover.okpopover.arrowbottom{-webkit-animation:fade-in-up ease 300ms 1;-moz-animation:fade-in-up ease 300ms 1;animation:fade-in-up ease 300ms 1}.popover.okpopover.arrowdown,.popover.okpopover.arrowtop{-webkit-animation:fade-in-down ease 300ms 1;-moz-animation:fade-in-down ease 300ms 1;animation:fade-in-down ease 300ms 1}.popover.okpopover.arrowleft{-webkit-animation:fade-in-left ease 300ms 1;-moz-animation:fade-in-left ease 300ms 1;animation:fade-in-left ease 300ms 1}.popover.okpopover.arrowright{-webkit-animation:fade-in-right ease 300ms 1;-moz-animation:fade-in-right ease 300ms 1;animation:fade-in-right ease 300ms 1}.popover.okpopover.invisible{display:block;visibility:hidden}.popover.okpopover.open{display:block;-webkit-animation-direction:normal;-moz-animation-direction:normal;animation-direction:normal}.popover.okpopover.no_open_animation{-webkit-animation:none !important;-moz-animation:none !important;animation:none !important}div.profile_info .username,div.profile_info .userinfo{vertical-align:top;white-space:nowrap;text-overflow:ellipsis}div.profile_info .username{position:relative;display:inline-block}div.profile_info .username .name{display:inline-block;color:#5e6573;padding-top:3px}div.profile_info .username a.name:hover{color:#474d59}div.profile_info .userinfo{font-size:13px;color:#949aa6;cursor:default;overflow:hidden}div.profile_info .userinfo span{display:inline-block;vertical-align:top}div.profile_info .userinfo span.dot{width:12px;text-align:center}.quickview{display:none;position:absolute;width:400px;background:#fff;border-radius:5px;box-shadow:0 0 0 1px rgba(0,17,53,0.16),0 0 5px rgba(0,17,53,0.16);z-index:91501;-webkit-animation:fade-in-up 150ms ease 1;-moz-animation:fade-in-up 150ms ease 1;animation:fade-in-up 150ms ease 1}.quickview .inner{padding:20px 12px;overflow:hidden;border-radius:5px;opacity:1;visibility:visible;-webkit-transition:visibility 0ms linear,opacity 100ms ease 10ms;-moz-transition:visibility 0ms linear,opacity 100ms ease 10ms;transition:visibility 0ms linear,opacity 100ms ease 10ms}.quickview .spinner{position:absolute !important;top:50% !important;left:50% !important}.quickview.show{display:block}.quickview.loading{min-height:180px}.quickview.loading.interests{min-height:136px}.quickview.loading .inner{opacity:0;visibility:hidden;-webkit-transition:opacity 0ms ease 0ms,visibility 0ms linear 100ms;-moz-transition:opacity 0ms ease 0ms,visibility 0ms linear 100ms;transition:opacity 0ms ease 0ms,visibility 0ms linear 100ms}.quickview.loading .arrow{background:#fff}.quickview-arrow{content:"";display:block;position:absolute;left:50%;bottom:-7px;background:#FFF;width:14px;height:14px;box-shadow:1px 1px 0 0 rgba(0,17,53,0.16),2.5px 2.5px 5px rgba(0,17,53,0.08);-webkit-transform:translateX(-50%) rotate(45deg);-moz-transform:translateX(-50%) rotate(45deg);-ms-transform:translateX(-50%) rotate(45deg);-o-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg)}.flipped .quickview-arrow{background:#4c7bd9;bottom:auto;top:-7px;box-shadow:-1px -1px 0 0 rgba(0,17,53,0.16),-2.5px -2.5px 5px rgba(0,17,53,0.08)}.loading .quickview-arrow{background:#fff}.quickview-top{position:relative;margin-top:-20px;margin-left:-12px;margin-right:-12px;height:80px;padding:12px 15px;background:#4c7bd9}.quickview-top:after{content:"";display:table;clear:both}.quickview-top-photo{position:absolute;top:12px;left:15px;width:56px;height:56px;margin:auto}.quickview-top-photo img{display:block;width:100%;height:auto;border-radius:100%}.quickview-top-photo-online{display:none;position:absolute;bottom:0;left:-4px;width:16px;height:16px;background:#48e588;border-radius:100%;border:2px solid #4c7bd9}.quickview-top-photo-online.isOnline{display:block}.quickview-top-username,.quickview-top-demo{padding-left:66px}.quickview-top-username{padding-top:6px;font-size:18px;line-height:36px;color:#fff}.quickview-top-username:hover{color:#FFF;opacity:0.8}.quickview-top-demo{font-size:14px;line-height:14px;color:#9dbaf2;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.quickview-top-demo:after{content:"";display:table;clear:both}.quickview-top-demo-age,.quickview-top-demo-location{float:left}.quickview-top-demo-location:before{content:"•";padding:0 4px}.quickview-top-percentage{position:absolute;top:12px;right:15px;width:70px;text-align:center;color:#FFF;font-weight:300;font-size:24px;line-height:56px}.quickview-top-percentage span{position:relative;top:-4px;font-size:18px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.quickview-bottom{padding-top:14px}.qvtraits{height:35px;overflow:hidden;margin-bottom:10px}.qvtraits-trait{position:relative;display:inline-block;height:35px;padding:0 8px;margin-right:4px;line-height:31px;color:#5e6573;border:2px solid #ebedf2;border-radius:4px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.qvtraits-trait .okicon{font-size:11px;margin-right:4px}.qvtraits-trait .okicon.i-less-arrow{color:#aeb4bf}.qvtraits-trait .okicon.i-more-arrow{color:#00d280}.qvtags{height:22px;padding-left:2px;overflow:hidden;color:#aeb4bf;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;line-height:22px}.qvtags-tag{display:inline-block}.qvinterests{padding-left:2px;overflow:hidden;font-size:15px;line-height:22px}.qvinterests-label{display:inline-block;font-weight:600;color:#5e6573;padding-right:4px}.qvinterests-interest{display:inline;color:#949aa6}.qvempty{color:#ccd0d9;font-style:italic;font-size:15px;line-height:22px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.quickview .pin,.quickview .personality_type{position:absolute;bottom:5px;opacity:0;background:#FFF;border:1px solid #ebedf2;border-radius:4px}.quickview .pin:hover,.quickview .personality_type:hover{opacity:1}.quickview .pin{right:5px;font-size:15px;line-height:18px}.quickview .personality_type{right:32px;font-size:15px;line-height:18px}body .quickbuybox .inner{background:transparent}body .quickbuybox,body .quickbuybox .inner,body .quickbuybox iframe{width:100%}body .quickbuybox,body.secure .quickbuybox,body.comfree .quickbuybox{height:100%;margin-top:0;margin-left:0;position:fixed;top:0;left:0;z-index:92001;padding-left:0px}body.expanded,body.secure.expanded,body.comfree.expanded{padding-left:0}body.show_enhanced_promo .iframewrapper,body.secure.show_enhanced_promo .iframewrapper,body.comfree.show_enhanced_promo .iframewrapper{opacity:0}body .quickbuybox .inner{height:100%;background:transparent;border:none;position:relative;overflow:hidden;overflow-y:auto;border-radius:0;box-shadow:none}body.ie7 .quickbuybox .inner,body.ie8 .quickbuybox .inner{border:2px solid #ddd;position:absolute;z-index:999}body.ie7 .quickbuybox .inner,body.ie8 .quickbuybox .inner{background:#fff}body .iframewrapper{width:900px;height:450px;margin-left:-450px;margin-top:0;top:60px;left:50%;position:absolute;opacity:1;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in}body .quickbuybox iframe{display:block;height:450px;border:0;background:transparent;visibility:hidden}body .quickbuybox.ready iframe{visibility:visible}body.ie7 .quickbuybox iframe{visibility:visible !important}div.tabbed_heading{position:relative;height:auto;margin:0px 30px 40px;padding-top:27px;border-bottom:1px solid #ccd0d9;font-family:'Open Sans',sans-serif}div.tabbed_heading h1{height:26px;margin:0;padding-bottom:12px;line-height:20px;color:#474d59;font-size:26px;font-weight:300;letter-spacing:0px;color:#474d59;height:40px;font-weight:300;font-size:28px;line-height:36px}div.tabbed_heading ul.page_tabs{margin-top:9px;padding-left:0;height:30px}div.tabbed_heading ul.page_tabs li{float:left;padding:0;margin-right:30px;height:31px;color:#474d59;font-weight:400;-webkit-font-smoothing:antialiased;font-size:18px;line-height:25px}div.tabbed_heading ul.page_tabs li a{padding:0;margin:0;display:block;color:#474d59}div.tabbed_heading ul.page_tabs li a:hover{color:#4c7bd9}div.tabbed_heading ul.page_tabs li a .count.zero{display:none}div.tabbed_heading ul.page_tabs li.showzeroes a .count.zero{display:inline}div.tabbed_heading ul.page_tabs li.active{color:#4c7bd9;border-bottom:3px solid #4c7bd9}div.tabbed_heading ul.page_tabs li.active a,div.tabbed_heading ul.page_tabs li.active a:hover{cursor:default;color:#4c7bd9}div.tabbed_heading ul.page_tabs li.private{background-image:url(//cdn.okccdn.com/media/img/icons/tab_lock.png);background-position:right 0px;background-repeat:no-repeat}div.tabbed_heading ul.page_tabs li.private.active{background-position:right -1px}div.tabbed_heading ul.page_tabs li.private a,div.tabbed_heading ul.page_tabs li.private a:hover{padding-right:23px}div.tabbed_heading ul.page_tabs li img{position:absolute;top:9px;right:-18px}div.tabbed_heading ul.page_tabs li.active img{display:none}div.tabbed_heading a.blue_tab{position:absolute;top:33px;right:0;padding:0px 22px;height:30px;line-height:31px;font-size:12px;background:#d5e1ed;border-radius:5px;box-shadow:0px 1px 0px #f3f5f9}div.tabbed_heading a.blue_tab:hover{color:#142d69}div.tabbed_heading.no_tabs h1{padding-bottom:11px}.page-featured h1{font-size:30px;font-weight:300;margin-bottom:5px;margin-left:-1px;margin-right:0;margin-top:0}.tabs{margin:0 auto -25px}.tabs-item{font-size:18px;font-weight:300}.tabs-item a{display:inline-block;color:#9dbaf2;padding:20px;-webkit-transition:color 100ms ease;-moz-transition:color 100ms ease;transition:color 100ms ease}.tabs-item.is-active a{position:relative}.tabs-item.is-active a:after{border-bottom:4px solid #9dbaf2;bottom:0;content:"";left:20px;position:absolute;width:-moz-calc(100% - 40px);width:-webkit-calc(100% - 40px);width:calc(100% - 40px)}.tabs-item.is-active a,.tabs-item a:hover{color:#f3f5f9}.tabs-item:first-child{margin-left:-20px}noscript p{padding:20px;margin-top:-1px;font-size:15px;background:#fb674e;color:#fff;text-align:center;font-family:'Open Sans',sans-serif}noscript p strong{font-weight:600;font-family:'Open Sans',sans-serif}noscript p a{color:#fff;text-decoration:underline}noscript p a:hover{opacity:.8}font[color=red]{display:none}#okparty{-webkit-animation:fade-in 1000ms 1;-moz-animation:fade-in 1000ms 1;animation:fade-in 1000ms 1;-webkit-animation-delay:500ms;-moz-animation-delay:500ms;animation-delay:500ms}#mobile_note{margin:0;position:relative;z-index:210}#mobile_note a{display:block;background:#07408d;padding:30px 15px;text-align:center;font-size:1.2em;color:#4c7bd9}#re_enable_staff{position:fixed;bottom:0;right:0;padding:5px 10px;display:block;color:#fff;font-size:10px;background:#2a2f35;border-top-left-radius:5px}#re_enable_staff:hover{background:#474d59}.noscroll{overflow:hidden}div.upgrade_ad{position:relative;margin-bottom:20px;font-size:15px;line-height:30px}div.upgrade_ad .wrapper{display:block;position:relative;padding:18px 45px 16px 80px;min-height:65px;border-radius:2px}div.upgrade_ad .icon,div.upgrade_ad .arrow{background-image:url(//cdn.okccdn.com/media/img/alist/alist_sprite_2014-09-16.png);background-repeat:no-repeat;display:block;position:absolute}div.upgrade_ad .icon{width:50px;height:50px;left:16px;top:50%;margin-top:-25px}div.upgrade_ad .text{font-weight:400}div.upgrade_ad .text strong,div.upgrade_ad .text b{font-weight:600}div.upgrade_ad .text.hasbody{display:block;padding:6px 0;line-height:22px}div.upgrade_ad .header,div.upgrade_ad .body{display:block}div.upgrade_ad .body{padding-bottom:6px}div.upgrade_ad .arrow{width:14px;height:26px;right:14px;top:50%;margin-right:12px;margin-top:-13px;-webkit-transition:margin-right 200ms ease;-moz-transition:margin-right 200ms ease;transition:margin-right 200ms ease}div.upgrade_ad:hover .arrow{margin-right:6px}div.upgrade_ad.small .wrapper{padding-top:17px;padding-bottom:11px;padding-left:65px}div.upgrade_ad.small .icon{left:6px}div.upgrade_ad.intoyou .wrapper{background-color:#ffe8c3;color:#ef860d}div.upgrade_ad.intoyou .icon{background-position:0px -100px}div.upgrade_ad.intoyou .arrow{background-position:-50px -100px}div.upgrade_ad.searchby .wrapper{background-color:#ffe5eb;color:#ff3684}div.upgrade_ad.searchby .icon{background-position:-100px -100px}div.upgrade_ad.searchby .arrow{background-position:-150px -100px}div.upgrade_ad.receipts .wrapper{background-color:#eee5f2;color:#9e40cc}div.upgrade_ad.receipts .icon{background-position:-200px -100px}div.upgrade_ad.receipts .arrow{background-position:-250px -100px}div.upgrade_ad.comfree .wrapper{background-color:#ebedf2;color:#5e6573}div.upgrade_ad.comfree .icon{background-position:-300px -100px}div.upgrade_ad.comfree .arrow{background-position:-350px -100px}div.upgrade_ad.browse .wrapper{background-color:#e2eafa;color:#3260c7}div.upgrade_ad.browse .icon{background-position:-400px -100px}div.upgrade_ad.browse .arrow{background-position:-450px -100px}div.upgrade_ad.storage .wrapper{background-color:#e7eeea;color:#3e9453}div.upgrade_ad.storage .icon{background-position:-500px -100px}div.upgrade_ad.storage .arrow{background-position:-550px -100px}div.upgrade_ad.username .wrapper{background-color:#eaf2de;color:#6da91b}div.upgrade_ad.username .icon{background-position:-700px -100px}div.upgrade_ad.username .arrow{background-position:-750px -100px}div.upgrade_ad.promote .wrapper{background-color:#e6f5f4;color:#42aca7}div.upgrade_ad.promote .icon{background-position:-800px -100px}div.upgrade_ad.promote .arrow{background-position:-850px -100px}div.upgrade_ad.filters .wrapper{background-color:#eee5f2;color:#9e40cc}div.upgrade_ad.filters .icon{background-position:-900px -100px}div.upgrade_ad.filters .arrow{background-position:-950px -100px}div.upgrade_ad.unlock .wrapper{background-color:#eee5f2;color:#9e40cc}div.upgrade_ad.unlock .icon{background-position:-1000px -100px}div.upgrade_ad.unlock .arrow{background-position:-1050px -100px}div.upgrade_ad.priority .wrapper{background-color:#eee5f2;color:#9e40cc}div.upgrade_ad.priority .icon{background-position:-1100px -100px}div.upgrade_ad.priority .arrow{background-position:-1150px -100px}div.upgrade_ad.answers .wrapper{background-color:#bcf1cd;color:#1fc174}div.upgrade_ad.answers .icon{background-position:-1200px -100px}div.upgrade_ad.answers .arrow{background-position:-1250px -100px}div.upgrade_ad.unlock.small .wrapper{padding-top:14px;padding-bottom:11px;padding-left:46px;min-height:50px}div.upgrade_ad.unlock.small .icon{left:1px}div.upgrade_ad.unlock.small .text{font-size:13px}div.upgrade_ad.unlock.small .arrow{margin-right:4px}div.upgrade_ad.unlock.small:hover .arrow{margin-right:0}div#legal_box{width:300px;min-height:240px;position:absolute;top:53px;left:-367px;background:#f9f9f9;border:1px solid #fff;padding:20px;font-size:13px;line-height:20px;opacity:0;visibility:hidden;z-index:5000;border-radius:5px 0 0 5px;box-shadow:0 5px 25px rgba(0,0,0,0.45);-webkit-transition:visibility 0s linear 350ms,opacity 100ms ease-in 100ms;-moz-transition:visibility 0s linear 350ms,opacity 100ms ease-in 100ms;transition:visibility 0s linear 350ms,opacity 100ms ease-in 100ms}div#confirm_password div#legal_box{top:0;padding:0;min-height:227px;width:360px;left:-379px}div#confirm_password a#legal_more.multi_month + div#legal_box{left:-349px;min-height:224px;width:330px}div#confirm_password div#legal_box p{padding:20px}div#legal_box.visible{opacity:1;visibility:visible;z-index:100;-webkit-transition:opacity 50ms;-moz-transition:opacity 50ms;transition:opacity 50ms}div#legal_box span{display:block}div#legal_box.visible{opacity:1;visibility:visible;z-index:100;-webkit-transition:opacity 0ms;-moz-transition:opacity 0ms;transition:opacity 0ms}form#upgrade_form.alternate div.summary div.description div#legal_box p,div#legal_box p{color:#777;font-size:13px;line-height:20px;cursor:default}div#legal_box span.tail{position:absolute;width:11px;height:21px;background:url(//cdn.okccdn.com/media/img/icons/cards.png) -180px 0px no-repeat;right:-11px;top:120px;-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-ms-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1)}a#legal_more.multi_month + div#legal_box span.tail{top:152px}div#confirm_password div#legal_box span.tail{top:170px}div#confirm_password a#legal_more.multi_month + div#legal_box span.tail{top:186px}#read_receipt_promo div.image{padding-left:9px;padding-top:20px}div.user_row_item{display:block;position:relative;width:auto;height:121px;margin:0 0 10px 0;padding:0;border:none;border-bottom:1px solid #ccd0d9;background:#FFF;font-family:'Open Sans',sans-serif;border-radius:2px;-webkit-transition-property:height,margin,opacity,background,border-color;-moz-transition-property:height,margin,opacity,background,border-color;transition-property:height,margin,opacity,background,border-color;-webkit-transition-duration:300ms,300ms,300ms,75ms,75ms;-moz-transition-duration:300ms,300ms,300ms,75ms,75ms;transition-duration:300ms,300ms,300ms,75ms,75ms;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}div.user_row_item:after{content:"";display:table;clear:both}div.user_row_item .user_image{float:left;width:125px;height:120px;margin-right:20px;border-radius:2px 0 0 2px;overflow:hidden}div.user_row_item .user_image img{display:block;width:125px;height:125px;margin-top:-2.5px}div.user_row_item .user_info{height:auto;padding-top:19px;line-height:21px}div.user_row_item .user_info .username,div.user_row_item .user_info .userinfo{max-width:235px}div.user_row_item .user_info .username{font-size:18px}div.user_row_item .user_info .username .name{padding:0;padding-bottom:2px;color:#474d59}div.user_row_item .user_info .userinfo{font-size:15px;color:#aeb4bf}div.user_row_item:hover .user_info .username .name{color:#000}div.user_row_item .into_you{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;width:40px;height:40px;border:2px solid #ffb640;border-radius:100%;color:#ffb640;text-align:center;font-size:18px;line-height:39px;position:absolute;bottom:50%;right:97px;cursor:pointer;z-index:1000;overflow:hidden;margin-bottom:-20px}div.user_row_item .into_you .text{position:absolute;left:-200px}div.user_row_item .binary_rating_button{position:absolute;left:145px;bottom:18px;z-index:3;-webkit-transition:none;-moz-transition:none;transition:none;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}div.user_row_item:hover .binary_rating_button,div.user_row_item.you_like .binary_rating_button{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}div.user_row_item.you_like .timestamp{left:160px}div.user_row_item .match_percentage{position:absolute;top:50%;right:30px;margin-top:-25.5px;line-height:20px;height:45px;color:#474d59;text-align:center}div.user_row_item .match_percentage .percentage,div.user_row_item .match_percentage .label{display:block}div.user_row_item .match_percentage .percentage{font-size:18px;line-height:24px}div.user_row_item .match_percentage .label{font-size:15px;line-height:23px}div.user_row_item:hover .timestamp{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity:0.3}div.user_row_item .timestamp,div.user_row_item .hide_btn,div.user_row_item .favorite_btn{position:absolute;font-size:15px;bottom:16px;color:#aeb4bf;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}div.user_row_item .timestamp{width:50%;left:145px;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}div.user_row_item .hide_btn:hover,div.user_row_item .favorite_btn:hover{color:#474d59}div.user_row_item .hide_btn,div.user_row_item .favorite_btn,div.user_row_item.you_like .timestamp{left:180px}div.user_row_item:hover .hide_btn,div.user_row_item:hover .favorite_btn{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}div.user_row_item:hover .timestamp{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}div.user_row_item.you_like .timestamp .hour_minute{display:none}div.user_row_item .favorite_btn .favorite{display:inline}div.user_row_item .favorite_btn .unfavorite{display:none}div.user_row_item.favorite .favorite_btn .favorite{display:none}div.user_row_item.favorite .favorite_btn .unfavorite{display:inline}div.user_row_item .new_icon{display:block;width:10px;height:10px;position:absolute;top:50%;left:-24px;margin-top:-5px;background:#4c7bd9;border-radius:100%}div.user_row_item .link_cover a{display:block;position:absolute;padding:0;margin:0}body.ie9 div.user_row_item .link_cover a{background:transparent}div.user_row_item .link_cover .top{top:0;left:0;right:0;height:80px}div.user_row_item .link_cover .bottom{bottom:0;left:0;right:0;height:15px}div.user_row_item .link_cover .left{left:0;top:0;bottom:0;width:125px}div.user_row_item .link_cover .right{right:0;top:0;bottom:0;width:310px}div.user_row_item .unhide_msg{display:none;margin-left:30px;font-size:15px;line-height:88px}div.user_row_item.hide{height:88px;background:#ebedf2;border-color:transparent}div.user_row_item.likes_you .match_percentage{top:50%}div.user_row_item.transitioning{overflow:hidden}div.user_row_item.remove{overflow:hidden;height:0;opacity:0;margin:0;pointer-events:none}div.user_row_item.remove .hide_btn,div.user_row_item.remove .favorite_btn{display:none}div.user_row_item.dummy{border-bottom:0}div.user_row_item.dummy:after{content:"";display:table;clear:both}div.user_row_item.dummy .user_image,div.user_row_item.dummy .user_info span,div.user_row_item.dummy .timestamp{background:#ccd0d9;color:#ccd0d9}div.user_row_item.dummy .match_percentage div{color:#ccd0d9;background:#ccd0d9;overflow:hidden}div.user_row_item.dummy .match_percentage .percentage{height:16px;margin-bottom:5px}div.user_row_item.dummy .match_percentage .label{height:10px;width:80%;margin:auto}div.user_row_item.dummy .user_info div,div.user_row_item.dummy .timestamp{overflow:hidden}div.user_row_item.dummy .user_info .username{height:15px;margin-bottom:5px}div.user_row_item.dummy .user_info .userinfo{height:12px}div.user_row_item.dummy .timestamp{height:12px;opacity:1 !important}.user_list .time_divider.dummy{line-height:14px}.user_list .time_divider.dummy span{color:#ccd0d9;background:#ccd0d9}.user_list .time_divider.dummy span:before,.user_list .time_divider.dummy span:after{border-color:#ccd0d9}#dummy_cover{position:absolute;top:0;left:-10px;right:-355px;z-index:1;min-height:300px;bottom:0;background-color:rgba(243,245,249,0.5);background-image:-webkit-linear-gradient(rgba(243,245,249,0.5),rgba(243,245,249,0.5),rgba(243,245,249,0.95));background-image:linear-gradient(rgba(243,245,249,0.5),rgba(243,245,249,0.5),rgba(243,245,249,0.95))}.OkModal{height:0;left:0;position:fixed;top:0;width:100%;z-index:999999}.OkModal .OkModal-inner{position:relative;top:115px}.OkModal-inner{opacity:0;transition:opacity 150ms ease;z-index:999999}.OkModal-inner.is-visible{opacity:0.99;transition:opacity 300ms ease}.modal-enter,.modal-appear{opacity:0.01}.modal-enter.modal-enter-active,.modal-appear.modal-appear-active{opacity:1;-webkit-transition:opacity 300ms ease;-moz-transition:opacity 300ms ease;transition:opacity 300ms ease}.modal-leave{opacity:1}.modal-leave.modal-leave-active{opacity:0.01;-webkit-transition:opacity 150ms ease;-moz-transition:opacity 150ms ease;transition:opacity 150ms ease}.OkModalContent{border-radius:5px;box-shadow:1px 2px 10px 0 rgba(0,0,0,0.1);left:50%;overflow:hidden;position:absolute;top:15px;z-index:999999;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}.OkModalContent:not(.reactmodal){max-width:550px;width:100%;text-align:center}.OkModalContent:not(.reactmodal){max-width:550px;width:100%;text-align:center}.OkModalContent:not(.reactmodal) .OkModalContent-main{background-color:#fff;padding:34px 45px;font-size:16px;line-height:26px}.OkModalContent-header{background-color:#4c7bd9;color:#fff;padding:40px}.OkModalContent-headline{font-family:'Open Sans';font-size:32px;font-weight:300}.OkModalContent-subheadline{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:18px;font-weight:700;line-height:24px;margin-bottom:13px;padding-bottom:0}.OkModalContent-image{max-width:143px}.OkModalContent-image + .OkModalContent-headline{padding-top:30px}.OkModalContent-body{font-family:'Helvetica Neue',Helvetica,sans-serif;margin:0 auto}.OkModalContent-button{margin-top:33px}.OkModalContent-button a{height:auto;padding:4.5px 26px;width:auto}.OkModalContent-dismiss{font-family:'Helvetica Neue',Helvetica,sans-serif;margin-top:13px}.OkModalContent-button a{display:inline-block}.OkModalContent-dismiss span{border-bottom:1px solid #949aa6;color:#949aa6;cursor:pointer}.OkModalContent-dismiss span:hover{color:#5e6573}.FullscreenOverlay{left:0;position:fixed;top:0;z-index:999999;text-align:center}.FullscreenOverlay-inner{background-color:rgba(17,17,17,0.7);height:100%;left:0;position:absolute;top:0;width:100%}.OkModal--scrollingoverlay .FullscreenOverlay-inner{position:fixed;bottom:0;right:0;overflow:auto}.OkModal--scrollingoverlay .FullscreenOverlay-inner .OkModalContent{margin-bottom:100px}[data-okmodal]{position:relative;z-index:10}.OkModal-inbox-full .OkModalContent-body{max-width:396px}.OkModal-photoblocker .OkModalContent-body{max-width:326px}.OkModal-swly-stars .OkModalContent-body{max-width:410px}.OkModal-browse-invisibly{position:absolute;top:120px;width:100%;left:0}// ============================================================================= // Z-Indexes // ----------------------------------------------------------------------------- // ============================================================================= // Z-Index // // All global style z-indices should be made as variables here,to try to // prevent things sitting on top of each other improperly. Each entry should // have a brief comment explaining what it is,to prevent confusion. // ----------------------------------------------------------------------------- $Z-profile-thumbs:1;// Thumbs on profiles;profile will add +1 and +2 and +3 $Z-match-alist-modal:500;// When a non-a-list user tries an a-list search $Z-questions-search:1000;// The suggestions that come out of the questions search bar $Z-under-action-bar:9998;// Profile action bar $Z-action-bar:9999;// Profile action bar $Z-btt-button:19000;// Back to top button on match search $Z-modal-behind:19999;// For modals that shouldn't take priority over others $Z-modal:20002;// Default modal z $Z-spotlight-top:20002;// Tooltip used for all spotlight info $Z-spotlight-error:20003;// Error message for spotlight $Z-tracker:20004;// Onboarding tracker $Z-tooltip-guide:89500;// OkTooltips that should appear lower than the header bar $Z-header-bar:90000;// Header bar $Z-notifications:91500;// Notifications $Z-boost-menu:90500;// User menu in header bar $Z-tooltip:91000;// OkTooltips,some are within modals $Z-user-menu:91000;// User menu in header bar $Z-nudge:91750;// Profile nudges $Z-limelight:91950;// Limelight shade,sits behind modal $Z-modal-shade:92000;// Modal shade that covers content $Z-okpopovers:92001;// Modal shade that covers content $Z-photo-overlay:92000;// Overlay for the new OkPhotos $Z-feedback:92500;// Feedback success or error banner $Z-staffbar:100000;// Staffbar,should probably on top all the time // Conditional Z-indecies. They must be more or less than another Z-index. $Z-quickbuy:$Z-modal-shade + 1;// Quickbuy checkout modal. $Z-over-quickbuy:$Z-quickbuy + 1;$Z-global-messaging-tooltips:$Z-notifications + 1;$Z-quickview:$Z-notifications + 1;$Z-questions-comparison:$Z-questions-search + 1;// The popover telling you that you haven't answered enough of their questions $Z-messages-dropdown:$Z-header-bar + 1;// ============================================================================= // Colors // ----------------------------------------------------------------------------- $Colors-white:#FFF;$Colors-black:#000;$Colors-blue-7:#07408d;$Colors-blue-6:#e4edfd;$Colors-blue-1:#104da1;$Colors-blue-3:#4c7bd9;$Colors-blue-2:#3260c7;$Colors-blue-5:#d5e0f8;$Colors-blue-4:#9dbaf2;$Colors-blues:(7:#07408d,6:#e4edfd,1:#104da1,3:#4c7bd9,2:#3260c7,5:#d5e0f8,4:#9dbaf2);$Colors-yellow-7:#ffaf0d;$Colors-yellow-6:#ffe36c;$Colors-yellow-1:#e8a610;$Colors-yellow-3:#ffd939;$Colors-yellow-2:#f8c637;$Colors-yellow-5:#f9f3dc;$Colors-yellow-4:#f9eaac;$Colors-yellows:(7:#ffaf0d,6:#ffe36c,1:#e8a610,3:#ffd939,2:#f8c637,5:#f9f3dc,4:#f9eaac);$Colors-gray-7:#f3f5f9;$Colors-gray-6:#ebedf2;$Colors-gray-1:#474d59;$Colors-gray-3:#949aa6;$Colors-gray-10:#1e1e1e;$Colors-gray-2:#5e6573;$Colors-gray-9:#2a2f35;$Colors-gray-5:#ccd0d9;$Colors-gray-8:#fafbfd;$Colors-gray-4:#aeb4bf;$Colors-grays:(7:#f3f5f9,6:#ebedf2,1:#474d59,3:#949aa6,10:#1e1e1e,2:#5e6573,9:#2a2f35,5:#ccd0d9,8:#fafbfd,4:#aeb4bf);$Colors-purple-1:#9e40cc;$Colors-purple-3:#d0a9e9;$Colors-purple-2:#b96fe0;$Colors-purple-4:#eadeef;$Colors-purples:(1:#9e40cc,3:#d0a9e9,2:#b96fe0,4:#eadeef);$Colors-flavor-gray:#474D59;$Colors-flavor-teal:#00AEBD;$Colors-flavor-pink:#EA1C53;$Colors-flavor-blue:#4C7BD9;$Colors-flavor-green:#1FC173;$Colors-flavor-purple:#7D208C;$Colors-flavors:(gray:#474D59,teal:#00AEBD,pink:#EA1C53,blue:#4C7BD9,green:#1FC173,purple:#7D208C);$Colors-orange-1:#f28d18;$Colors-orange-3:#ffd38c;$Colors-orange-2:#ffb640;$Colors-oranges:(1:#f28d18,3:#ffd38c,2:#ffb640);$Colors-pride-i:#7d208c;$Colors-pride-b:#008ad8;$Colors-pride-y:#feac00;$Colors-pride-g:#4ab42f;$Colors-pride-r:#db2e1f;$Colors-pride-o:#f16900;$Colors-prides:(i:#7d208c,b:#008ad8,y:#feac00,g:#4ab42f,r:#db2e1f,o:#f16900);$Colors-red-1:#f95133;$Colors-red-3:#ffc0bb;$Colors-red-2:#fb674e;$Colors-red-5:#e84832;$Colors-red-4:#fa8575;$Colors-reds:(1:#f95133,3:#ffc0bb,2:#fb674e,5:#e84832,4:#fa8575);$Colors-green-6:#76ee9d;$Colors-green-1:#1fc174;$Colors-green-3:#48e588;$Colors-green-2:#00d280;$Colors-green-5:#d6f4df;$Colors-green-4:#bcf1cd;$Colors-greens:(6:#76ee9d,1:#1fc174,3:#48e588,2:#00d280,5:#d6f4df,4:#bcf1cd);$Colors-pink-6:#fcecf2;$Colors-pink-1:#ea1c53;$Colors-pink-3:#ff597e;$Colors-pink-2:#f93b66;$Colors-pink-5:#fedbe3;$Colors-pink-4:#ff8aa4;$Colors-pinks:(6:#fcecf2,1:#ea1c53,3:#ff597e,2:#f93b66,5:#fedbe3,4:#ff8aa4);$Colors-teal-1:#30b7c4;$Colors-teal-3:#76dadd;$Colors-teal-2:#4fc5d0;$Colors-teal-5:#9ee8e8;$Colors-teal-4:#d5f7f7;$Colors-teals:(1:#30b7c4,3:#76dadd,2:#4fc5d0,5:#9ee8e8,4:#d5f7f7);// ============================================================================= // Layout 2013 Sizes // ----------------------------------------------------------------------------- // ============================================================================= // Layout 2013 Sizes // currently used in template.scss and sidebar.scss in sidebar goodie // ----------------------------------------------------------------------------- $Structure-leftbar-width:194px;$Structure-rightbar-width:194px;$Structure-content-width:780px;// ============================================================================= // Global variables for okc2014 // ----------------------------------------------------------------------------- // Global site variables $S-2014:1;$S-gutter:30px;$S-gutter-modal:40px;$S-gutter-right:50px;$S-width-page:940px;$S-width-page-ad:300px;$S-width-page-gutter:55px;$S-width-page-left:$S-width-page - $S-width-page-ad - $S-gutter*2 - $S-width-page-gutter;$S-width-boost-panel:220px;$S-width-modal:720px;$S-width-modal-small:380px + $S-gutter*2;$S-height-nav:65px;$S-height-input:42px;$S-height-input-big:50px;// this size is used for okform inputs with the "large" class. // no fucking clue which that is. // if you're trying to match the height with big buttons,use `input-large.` $S-height-input-large:52px;// this is the "min-width" of the page (and might include some blue bg) // it should be enough that the headerbar never wraps $S-width-wrapper:$S-width-page;$S-color-body-bg:$Colors-blue-1;$S-color-page-text:$Colors-gray-2;$S-color-page-bg:$Colors-gray-7;$S-color-page-border:$Colors-gray-5;$S-color-head-bg:#000f2d;$S-radius-page:3px;$S-time-panel-open:150ms;// Native form spacing variables $oknf-fieldset-margin:35px;$oknf-select-margin:16px;$oknf-input-margin:16px;$oknf-switch-margin:11px;$oknf-checkbox-margin:11px;$oknf-radio-margin:11px;// Some elements are supposed to look like h1s,but they're whatever actual // element they are. So use a mixin to get their styles global. @mixin okc-h1{color:$Colors-gray-1;// this is only here because we need to override the height set on h1 height:40px;font-weight:300;@include type(28px,36px)}// Some elements are supposed to look like h2s,but they're whatever actual // element they are. So use a mixin to get their styles global. @mixin okc-h2{padding-bottom:14px;color:$Colors-gray-1;font-weight:600;// the line height is the capital height so top margins are exact @include type(18px,14px);@include open-sans-semibold}// override the open sans mixins to (a) not set the font family and (b) not anti-alias @mixin open-sans{font-family:'Open Sans',sans-serif}@mixin open-sans-light{font-weight:300}@mixin open-sans-semibold{font-weight:600}@mixin open-sans-bold{font-weight:700}// ============================================================================= // Bourbon extracts // ----------------------------------------------------------------------------- // neat forces border-box-sizing on all elements unless this is here. $border-box-sizing:false;// Settings // Variable settings for /addons/prefixer.scss $prefix-for-webkit:true !default;$prefix-for-mozilla:true !default;$prefix-for-microsoft:true !default;$prefix-for-opera:true !default;$prefix-for-spec:true !default;// required for keyframe mixin $em-base:16px !default;// Custom Helpers @function _gradient-positions-parser($gradient-type,$gradient-positions){@if $gradient-positions and ($gradient-type == linear) and (type-of($gradient-positions) != color){$gradient-positions:_linear-positions-parser($gradient-positions)}@else if $gradient-positions and ($gradient-type == radial) and (type-of($gradient-positions) != color){$gradient-positions:_radial-positions-parser($gradient-positions)}@return $gradient-positions}@function _linear-positions-parser($pos){$type:type-of(nth($pos,1));$spec:null;$degree:null;$side:null;$corner:null;$length:length($pos);// Parse Side and corner positions @if ($length > 1){@if nth($pos,1) == "to"{// Newer syntax $side:nth($pos,2);@if $length == 2{// eg. to top // Swap for backwards compatability $degree:_position-flipper(nth($pos,2))}@else if $length == 3{// eg. to top left $corner:nth($pos,3)}}@else if $length == 2{// Older syntax ("top left") $side:_position-flipper(nth($pos,1));$corner:_position-flipper(nth($pos,2))}@if ("#{$side}#{$corner}" == "left top") or ("#{$side}#{$corner}" == "top left"){$degree:_position-flipper(#{$side}) _position-flipper(#{$corner})}@else if ("#{$side}#{$corner}" == "right top") or ("#{$side}#{$corner}" == "top right"){$degree:_position-flipper(#{$side}) _position-flipper(#{$corner})}@else if ("#{$side}#{$corner}" == "right bottom") or ("#{$side}#{$corner}" == "bottom right"){$degree:_position-flipper(#{$side}) _position-flipper(#{$corner})}@else if ("#{$side}#{$corner}" == "left bottom") or ("#{$side}#{$corner}" == "bottom left"){$degree:_position-flipper(#{$side}) _position-flipper(#{$corner})}$spec:to $side $corner}@else if $length == 1{// Swap for backwards compatability @if $type == string{$degree:$pos;$spec:to _position-flipper($pos)}@else{$degree:-270 - $pos;//rotate the gradient opposite from spec $spec:$pos}}$degree:unquote($degree + ",");$spec:unquote($spec + ",");@return $degree $spec}@function _position-flipper($pos){@return if($pos == left,right,null) if($pos == right,left,null) if($pos == top,bottom,null) if($pos == bottom,top,null)}@function _radial-arg-parser($G1,$G2,$pos,$shape-size){@each $value in $G1,$G2{$first-val:nth($value,1);$pos-type:type-of($first-val);$spec-at-index:null;// Determine if spec was passed to mixin @if type-of($value) == list{$spec-at-index:if(index($value,at),index($value,at),false)}@if $spec-at-index{@if $spec-at-index > 1{@for $i from 1 through ($spec-at-index - 1){$shape-size:$shape-size nth($value,$i)}@for $i from ($spec-at-index + 1) through length($value){$pos:$pos nth($value,$i)}}@else if $spec-at-index == 1{@for $i from ($spec-at-index + 1) through length($value){$pos:$pos nth($value,$i)}}$G1:null}// If not spec calculate correct values @else{@if ($pos-type != color) or ($first-val != "transparent"){@if ($pos-type == number) or ($first-val == "center") or ($first-val == "top") or ($first-val == "right") or ($first-val == "bottom") or ($first-val == "left"){$pos:$value;@if $pos == $G1{$G1:null}}@else if ($first-val == "ellipse") or ($first-val == "circle") or ($first-val == "closest-side") or ($first-val == "closest-corner") or ($first-val == "farthest-side") or ($first-val == "farthest-corner") or ($first-val == "contain") or ($first-val == "cover"){$shape-size:$value;@if $value == $G1{$G1:null}@else if $value == $G2{$G2:null}}}}}@return $G1,$G2,$pos,$shape-size}@function _radial-positions-parser($gradient-pos){$shape-size:nth($gradient-pos,1);$pos:nth($gradient-pos,2);$shape-size-spec:_shape-size-stripper($shape-size);$pre-spec:unquote(if($pos,"#{$pos},",null)) unquote(if($shape-size,"#{$shape-size},",null));$pos-spec:if($pos,"at #{$pos}",null);$spec:"#{$shape-size-spec}#{$pos-spec}";// Add comma @if ($spec != ' '){$spec:"#{$spec},"}@return $pre-spec $spec}// User for linear and radial gradients within background-image or border-image properties @function _render-gradients($gradient-positions,$gradients,$gradient-type,$vendor:false){$pre-spec:null;$spec:null;$vendor-gradients:null;@if $gradient-type == linear{@if $gradient-positions{$pre-spec:nth($gradient-positions,1);$spec:nth($gradient-positions,2)}}@else if $gradient-type == radial{$pre-spec:nth($gradient-positions,1);$spec:nth($gradient-positions,2)}@if $vendor{$vendor-gradients:-#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec}$gradients)}@else if $vendor == false{$vendor-gradients:"#{$gradient-type}-gradient(#{$spec}#{$gradients})";$vendor-gradients:unquote($vendor-gradients)}@return $vendor-gradients}@function _shape-size-stripper($shape-size){$shape-size-spec:null;@each $value in $shape-size{@if ($value == "cover") or ($value == "contain"){$value:null}$shape-size-spec:"#{$shape-size-spec}#{$value}"}@return $shape-size-spec}// Custom Functions // Programatically determines whether a color is light or dark // Returns a boolean // More details here http://robots.thoughtbot.com/closer-look-color-lightness @function is-light($hex-color){$-local-red:red(rgba($hex-color,1.0));$-local-green:green(rgba($hex-color,1.0));$-local-blue:blue(rgba($hex-color,1.0));$-local-lightness:($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;@return $-local-lightness > .6}// Flexible grid @function flex-grid($columns,$container-columns:$fg-max-columns){$width:$columns * $fg-column + ($columns - 1) * $fg-gutter;$container-width:$container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;@return percentage($width / $container-width)}// Flexible gutter @function flex-gutter($container-columns:$fg-max-columns,$gutter:$fg-gutter){$container-width:$container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;@return percentage($gutter / $container-width)}// The $fg-column,$fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. // This function takes the fluid grid equation (target / context = result) and uses columns to help define each. // // The calculation presumes that your column structure will be missing the last gutter:// // -- column -- gutter -- column -- gutter -- column // // $fg-column:60px;// Column Width // $fg-gutter:25px;// Gutter Width // $fg-max-columns:12;// Total Columns For Main Container // // div{// width:flex-grid(4);// returns (315px / 995px) = 31.65829%;// margin-left:flex-gutter();// returns (25px / 995px) = 2.51256%;// // p{// width:flex-grid(2,4);// returns (145px / 315px) = 46.031746%;// float:left;// margin:flex-gutter(4);// returns (25px / 315px) = 7.936508%;//}// // blockquote{// float:left;// width:flex-grid(2,4);// returns (145px / 315px) = 46.031746%;//}//}@function golden-ratio($value,$increment){@return modular-scale($value,$increment,$golden)}@function grid-width($n){@return $n * $gw-column + ($n - 1) * $gw-gutter}// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. // // $gw-column:100px;// Column Width // $gw-gutter:40px;// Gutter Width // // div{// width:grid-width(4);// returns 520px;// margin-left:$gw-gutter;// returns 40px;//}@function linear-gradient($pos,$gradients...){$type:linear;$pos-type:type-of(nth($pos,1));// if $pos doesn't exist,fix $gradient @if ($pos-type == color) or (nth($pos,1) == "transparent"){$gradients:zip($pos $gradients);$pos:false}$type-gradient:$type,$pos,$gradients;@return $type-gradient}// Scaling Variables $golden:1.618;$minor-second:1.067;$major-second:1.125;$minor-third:1.2;$major-third:1.25;$perfect-fourth:1.333;$augmented-fourth:1.414;$perfect-fifth:1.5;$minor-sixth:1.6;$major-sixth:1.667;$minor-seventh:1.778;$major-seventh:1.875;$octave:2;$major-tenth:2.5;$major-eleventh:2.667;$major-twelfth:3;$double-octave:4;@function modular-scale($value,$increment,$ratio){$v1:nth($value,1);$v2:nth($value,length($value));$value:$v1;// scale $v2 to just above $v1 @while $v2 > $v1{$v2:($v2 / $ratio);// will be off-by-1}@while $v2 < $v1{$v2:($v2 * $ratio);// will fix off-by-1}// check AFTER scaling $v2 to prevent double-counting corner-case $double-stranded:$v2 > $v1;@if $increment > 0{@for $i from 1 through $increment{@if $double-stranded and ($v1 * $ratio) > $v2{$value:$v2;$v2:($v2 * $ratio)}@else{$v1:($v1 * $ratio);$value:$v1}}}@if $increment < 0{// adjust $v2 to just below $v1 @if $double-stranded{$v2:($v2 / $ratio)}@for $i from $increment through -1{@if $double-stranded and ($v1 / $ratio) < $v2{$value:$v2;$v2:($v2 / $ratio)}@else{$v1:($v1 / $ratio);$value:$v1}}}@return $value}// Convert pixels to ems // eg. for a relational value of 12px write em(12) when the parent is 16px // if the parent is another value say 24px write em(12,24) @function em($pxval,$base:$em-base){@if not unitless($pxval){$pxval:strip-units($pxval)}@if not unitless($base){$base:strip-units($base)}@return ($pxval / $base) * 1em}// Convert pixels to rems // eg. for a relational value of 12px write rem(12) // Assumes $em-base is the font-size of <html> @function rem($pxval){@if not unitless($pxval){$pxval:strip-units($pxval)}$base:$em-base;@if not unitless($base){$base:strip-units($base)}@return ($pxval / $base) * 1rem}// This function is required and used by the background-image mixin. @function radial-gradient($G1,$G2,$G3:null,$G4:null,$G5:null,$G6:null,$G7:null,$G8:null,$G9:null,$G10:null,$pos:null,$shape-size:null){$data:_radial-arg-parser($G1,$G2,$pos,$shape-size);$G1:nth($data,1);$G2:nth($data,2);$pos:nth($data,3);$shape-size:nth($data,4);$type:radial;$gradient:$G1,$G2,$G3,$G4,$G5,$G6,$G7,$G8,$G9,$G10;$type-gradient:$type,$shape-size $pos,$gradient;@return $type-gradient}// Srtips the units from a value. e.g. 12px -> 12 @function strip-units($val){@return ($val / ($val * 0 + 1))}// Add percentage of white to a color @function tint($color,$percent){@return mix(white,$color,$percent)}// Add percentage of black to a color @function shade($color,$percent){@return mix(black,$color,$percent)}// Return vendor-prefixed property names if appropriate // Example:transition-property-names((transform,color,background),moz) -> -moz-transform,color,background // @function transition-property-names($props,$vendor:false){$new-props:();@each $prop in $props{$new-props:append($new-props,transition-property-name($prop,$vendor),comma)}@return $new-props}@function transition-property-name($prop,$vendor:false){// put other properties that need to be prefixed here aswell @if $vendor and $prop == transform{@return unquote('-'+$vendor+'-'+$prop)}@else{@return $prop}}// Convert shorthand to the 4-value syntax @function unpack($shorthand){@if length($shorthand) == 1{@return nth($shorthand,1) nth($shorthand,1) nth($shorthand,1) nth($shorthand,1)}@else if length($shorthand) == 2{@return nth($shorthand,1) nth($shorthand,2) nth($shorthand,1) nth($shorthand,2)}@else if length($shorthand) == 3{@return nth($shorthand,1) nth($shorthand,2) nth($shorthand,3) nth($shorthand,2)}@else{@return $shorthand}}// CSS3 Mixins // http://www.w3.org/TR/css3-animations/#the-animation-name-property- // Each of these mixins support comma separated lists of values,which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. // Official animation shorthand property. @mixin animation ($animations...){@include prefixer(animation,$animations,webkit moz spec)}// Individual Animation Properties @mixin animation-name ($names...){@include prefixer(animation-name,$names,webkit moz spec)}@mixin animation-duration ($times...){@include prefixer(animation-duration,$times,webkit moz spec)}@mixin animation-timing-function ($motions...){// ease | linear | ease-in | ease-out | ease-in-out @include prefixer(animation-timing-function,$motions,webkit moz spec)}@mixin animation-iteration-count ($values...){// infinite | <number> @include prefixer(animation-iteration-count,$values,webkit moz spec)}@mixin animation-direction ($directions...){// normal | alternate @include prefixer(animation-direction,$directions,webkit moz spec)}@mixin animation-play-state ($states...){// running | paused @include prefixer(animation-play-state,$states,webkit moz spec)}@mixin animation-delay ($times...){@include prefixer(animation-delay,$times,webkit moz spec)}@mixin animation-fill-mode ($modes...){// none | forwards | backwards | both @include prefixer(animation-fill-mode,$modes,webkit moz spec)}@mixin appearance ($value){@include prefixer(appearance,$value,webkit moz ms o spec)}// // Backface-visibility mixin // @mixin backface-visibility($visibility){@include prefixer(backface-visibility,$visibility,webkit spec)}// // Background property for adding multiple backgrounds using shorthand // notation. // @mixin background($background-1,$background-2:null,$background-3:null,$background-4:null,$background-5:null,$background-6:null,$background-7:null,$background-8:null,$background-9:null,$background-10:null,$fallback:null){$backgrounds:$background-1,$background-2,$background-3,$background-4,$background-5,$background-6,$background-7,$background-8,$background-9,$background-10;$fallback-color:false;@if (type-of($fallback) == color) or ($fallback == "transparent"){$fallback-color:$fallback}@else{$fallback-color:_extract-background-color($backgrounds)}@if $fallback-color{background-color:$fallback-color}background:_background-add-prefix($backgrounds,webkit);background:_background-add-prefix($backgrounds)}@function _extract-background-color($backgrounds){$final-bg-layer:nth($backgrounds,length($backgrounds));@if type-of($final-bg-layer) == list{@for $i from 1 through length($final-bg-layer){$value:nth($final-bg-layer,$i);@if type-of($value) == color{@return $value}}}@return false}@function _background-add-prefix($backgrounds,$vendor:false){$backgrounds-prefixed:();@for $i from 1 through length($backgrounds){$shorthand:nth($backgrounds,$i);// Get member for current index $type:type-of($shorthand);// Get type of variable - List (gradient) or String (image) // If shorthand is a list (gradient) @if $type == list{$first-member:nth($shorthand,1);// Get first member of shorthand // Linear Gradient @if index(linear radial,nth($first-member,1)){$gradient-type:nth($first-member,1);// linear || radial $gradient-args:false;$gradient-positions:false;$shorthand-start:false;@if type-of($first-member) == list{// Linear gradient plus additional shorthand values - lg(red,orange)repeat,... $gradient-positions:nth($first-member,2);$gradient-args:nth($first-member,3);$shorthand-start:2}@else{// Linear gradient only - lg(red,orange),... $gradient-positions:nth($shorthand,2);$gradient-args:nth($shorthand,3);// Get gradient (red,blue)}$gradient-positions:_gradient-positions-parser($gradient-type,$gradient-positions);$gradient:_render-gradients($gradient-positions,$gradient-args,$gradient-type,$vendor);// Append any additional shorthand args to gradient @if $shorthand-start{@for $j from $shorthand-start through length($shorthand){$gradient:join($gradient,nth($shorthand,$j),space)}}$backgrounds-prefixed:append($backgrounds-prefixed,$gradient,comma)}// Image with additional properties @else{$backgrounds-prefixed:append($backgrounds-prefixed,$shorthand,comma)}}// If shorthand is a simple string (color or image) @else if $type == string{$backgrounds-prefixed:join($backgrounds-prefixed,$shorthand,comma)}}@return $backgrounds-prefixed}//Examples://@include background(linear-gradient(top,orange,red));//@include background(radial-gradient(circle at 40% 40%,orange,red));//@include background(url("/images/a.png") no-repeat,linear-gradient(orange,red));//@include background(url("image.png") center center,linear-gradient(orange,red),url("image.png"));// // Background-image property for adding multiple background images with // gradients,or for stringing multiple gradients together. // @mixin background-image($images...){background-image:_add-prefix($images,webkit);background-image:_add-prefix($images)}@function _add-prefix($images,$vendor:false){$images-prefixed:();$gradient-positions:false;@for $i from 1 through length($images){$type:type-of(nth($images,$i));// Get type of variable - List or String // If variable is a list - Gradient @if $type == list{$gradient-type:nth(nth($images,$i),1);// linear or radial $gradient-pos:null;$gradient-args:null;@if ($gradient-type == linear) or ($gradient-type == radial){$gradient-pos:nth(nth($images,$i),2);// Get gradient position $gradient-args:nth(nth($images,$i),3);// Get actual gradient (red,blue)}@else{$gradient-args:nth(nth($images,$i),2);// Get actual gradient (red,blue)}$gradient-positions:_gradient-positions-parser($gradient-type,$gradient-pos);$gradient:_render-gradients($gradient-positions,$gradient-args,$gradient-type,$vendor);$images-prefixed:append($images-prefixed,$gradient,comma)}// If variable is a string - Image @else if $type == string{$images-prefixed:join($images-prefixed,nth($images,$i),comma)}}@return $images-prefixed}//Examples://@include background-image(linear-gradient(top,orange,red));//@include background-image(radial-gradient(50% 50%,cover circle,orange,red));//@include background-image(url("/images/a.png"),linear-gradient(orange,red));//@include background-image(url("image.png"),linear-gradient(orange,red),url("image.png"));//@include background-image(linear-gradient(hsla(0,100%,100%,0.25) 0%,hsla(0,100%,100%,0.08) 50%,transparent 50%),linear-gradient(orange,red));@mixin border-image($images){-webkit-border-image:_border-add-prefix($images,webkit);-moz-border-image:_border-add-prefix($images,moz);-o-border-image:_border-add-prefix($images,o);border-image:_border-add-prefix($images);border-style:solid}@function _border-add-prefix($images,$vendor:false){$border-image:null;$images-type:type-of(nth($images,1));$first-var:nth(nth($images,1),1);// Get type of Gradient (Linear || radial) // If input is a gradient @if $images-type == string{@if ($first-var == "linear") or ($first-var == "radial"){$gradient-type:nth($images,1);// Get type of gradient (linear || radial) $gradient-pos:nth($images,2);// Get gradient position $gradient-args:nth($images,3);// Get actual gradient (red,blue) $gradient-positions:_gradient-positions-parser($gradient-type,$gradient-pos);$border-image:_render-gradients($gradient-positions,$gradient-args,$gradient-type,$vendor)}// If input is a URL @else{$border-image:$images}}// If input is gradient or url + additional args @else if $images-type == list{$type:type-of(nth($images,1));// Get type of variable - List or String // If variable is a list - Gradient @if $type == list{$gradient:nth($images,1);$gradient-type:nth($gradient,1);// Get type of gradient (linear || radial) $gradient-pos:nth($gradient,2);// Get gradient position $gradient-args:nth($gradient,3);// Get actual gradient (red,blue) $gradient-positions:_gradient-positions-parser($gradient-type,$gradient-pos);$border-image:_render-gradients($gradient-positions,$gradient-args,$gradient-type,$vendor);@for $i from 2 through length($images){$border-image:append($border-image,nth($images,$i))}}}@return $border-image}//Examples:// @include border-image(url("image.png"));// @include border-image(url("image.png") 20 stretch);// @include border-image(linear-gradient(45deg,orange,yellow));// @include border-image(linear-gradient(45deg,orange,yellow) stretch);// @include border-image(linear-gradient(45deg,orange,yellow) 20 30 40 50 stretch round);// @include border-image(radial-gradient(top,cover,orange,yellow,orange));// // Shorthand Border-radius mixins // @mixin border-top-radius($radii){@include prefixer(border-top-left-radius,$radii,spec);@include prefixer(border-top-right-radius,$radii,spec)}@mixin border-bottom-radius($radii){@include prefixer(border-bottom-left-radius,$radii,spec);@include prefixer(border-bottom-right-radius,$radii,spec)}@mixin border-left-radius($radii){@include prefixer(border-top-left-radius,$radii,spec);@include prefixer(border-bottom-left-radius,$radii,spec)}@mixin border-right-radius($radii){@include prefixer(border-top-right-radius,$radii,spec);@include prefixer(border-bottom-right-radius,$radii,spec)}@mixin box-sizing ($box){// content-box | border-box | inherit @include prefixer(box-sizing,$box,webkit moz spec)}@mixin calc($property,$value){#{$property}:-webkit-calc(#{$value});#{$property}:calc(#{$value})}@mixin columns($arg:auto){// <column-count> || <column-width> @include prefixer(columns,$arg,webkit moz spec)}@mixin column-count($int:auto){// auto || integer @include prefixer(column-count,$int,webkit moz spec)}@mixin column-gap($length:normal){// normal || length @include prefixer(column-gap,$length,webkit moz spec)}@mixin column-fill($arg:auto){// auto || length @include prefixer(column-fill,$arg,webkit moz spec)}@mixin column-rule($arg){// <border-width> || <border-style> || <color> @include prefixer(column-rule,$arg,webkit moz spec)}@mixin column-rule-color($color){@include prefixer(column-rule-color,$color,webkit moz spec)}@mixin column-rule-style($style:none){// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid @include prefixer(column-rule-style,$style,webkit moz spec)}@mixin column-rule-width ($width:none){@include prefixer(column-rule-width,$width,webkit moz spec)}@mixin column-span($arg:none){// none || all @include prefixer(column-span,$arg,webkit moz spec)}@mixin column-width($length:auto){// auto || length @include prefixer(column-width,$length,webkit moz spec)}@mixin filter($function:none){// <filter-function> [<filter-function]* | none @include prefixer(filter,$function,webkit spec)}// CSS3 Flexible Box Model and property defaults // Custom shorthand notation for flexbox @mixin box($orient:inline-axis,$pack:start,$align:stretch){@include display-box;@include box-orient($orient);@include box-pack($pack);@include box-align($align)}@mixin display-box{display:-webkit-box;display:-moz-box;display:-ms-flexbox;// IE 10 display:box}@mixin box-orient($orient:inline-axis){// horizontal|vertical|inline-axis|block-axis|inherit @include prefixer(box-orient,$orient,webkit moz spec)}@mixin box-pack($pack:start){// start|end|center|justify @include prefixer(box-pack,$pack,webkit moz spec);-ms-flex-pack:$pack;// IE 10}@mixin box-align($align:stretch){// start|end|center|baseline|stretch @include prefixer(box-align,$align,webkit moz spec);-ms-flex-align:$align;// IE 10}@mixin box-direction($direction:normal){// normal|reverse|inherit @include prefixer(box-direction,$direction,webkit moz spec);-ms-flex-direction:$direction;// IE 10}@mixin box-lines($lines:single){// single|multiple @include prefixer(box-lines,$lines,webkit moz spec)}@mixin box-ordinal-group($int:1){@include prefixer(box-ordinal-group,$int,webkit moz spec);-ms-flex-order:$int;// IE 10}@mixin box-flex($value:0.0){@include prefixer(box-flex,$value,webkit moz spec);-ms-flex:$value;// IE 10}@mixin box-flex-group($int:1){@include prefixer(box-flex-group,$int,webkit moz spec)}// CSS3 Flexible Box Model and property defaults // Unified attributes for 2009,2011,and 2012 flavours. // 2009 - display (box | inline-box) // 2011 - display (flexbox | inline-flexbox) // 2012 - display (flex | inline-flex) @mixin display($value){// flex | inline-flex @if $value == "flex"{// 2009 display:-webkit-box;display:-moz-box;display:box;// 2012 display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;// 2011 (IE 10) display:flex}@elseif $value == "inline-flex"{display:-webkit-inline-box;display:-moz-inline-box;display:inline-box;display:-webkit-inline-flex;display:-moz-inline-flex;display:-ms-inline-flexbox;display:inline-flex}@else{display:$value}}// 2009 - box-flex (integer) // 2011 - flex (decimal | width decimal) // 2012 - flex (integer integer width) @mixin flex($value){// Grab flex-grow for older browsers. $flex-grow:nth($value,1);// 2009 @include prefixer(box-flex,$flex-grow,webkit moz spec);// 2011 (IE 10),2012 @include prefixer(flex,$value,webkit moz ms spec)}// 2009 - box-orient (horizontal | vertical | inline-axis | block-axis) // - box-direction (normal | reverse) // 2011 - flex-direction (row | row-reverse | column | column-reverse) // 2012 - flex-direction (row | row-reverse | column | column-reverse) @mixin flex-direction($value:row){// Alt values. $value-2009:$value;$value-2011:$value;$direction:"normal";@if $value == row{$value-2009:horizontal}@elseif $value == "row-reverse"{$value-2009:horizontal;$direction:reverse}@elseif $value == column{$value-2009:vertical}@elseif $value == "column-reverse"{$value-2009:vertical;$direction:reverse}// 2009 @include prefixer(box-orient,$value-2009,webkit moz spec);@if $direction == "reverse"{@include prefixer(box-direction,$direction,webkit moz spec)}// 2012 @include prefixer(flex-direction,$value,webkit moz spec);// 2011 (IE 10) -ms-flex-direction:$value}// 2009 - box-lines (single | multiple) // 2011 - flex-wrap (nowrap | wrap | wrap-reverse) // 2012 - flex-wrap (nowrap | wrap | wrap-reverse) @mixin flex-wrap($value:nowrap){// Alt values. $alt-value:$value;@if $value == nowrap{$alt-value:single}@elseif $value == wrap{$alt-value:multiple}@elseif $value == "wrap-reverse"{$alt-value:multiple}@include prefixer(box-lines,$alt-value,webkit moz spec);@include prefixer(flex-wrap,$value,webkit moz ms spec)}// 2009 - TODO:parse values into flex-direction/flex-wrap // 2011 - TODO:parse values into flex-direction/flex-wrap // 2012 - flex-flow (flex-direction || flex-wrap) @mixin flex-flow($value){@include prefixer(flex-flow,$value,webkit moz spec)}// 2009 - box-ordinal-group (integer) // 2011 - flex-order (integer) // 2012 - order (integer) @mixin order($int:0){// 2009 @include prefixer(box-ordinal-group,$int,webkit moz spec);// 2012 @include prefixer(order,$int,webkit moz spec);// 2011 (IE 10) -ms-flex-order:$int}// 2012 - flex-grow (number) @mixin flex-grow($number:0){@include prefixer(flex-grow,$number,webkit moz spec);-ms-flex-positive:$number}// 2012 - flex-shrink (number) @mixin flex-shrink($number:1){@include prefixer(flex-shrink,$number,webkit moz spec);-ms-flex-negative:$number}// 2012 - flex-basis (number) @mixin flex-basis($width:auto){@include prefixer(flex-basis,$width,webkit moz spec);-ms-flex-preferred-size:$width}// 2009 - box-pack (start | end | center | justify) // 2011 - flex-pack (start | end | center | justify) // 2012 - justify-content (flex-start | flex-end | center | space-between | space-around) @mixin justify-content ($value:flex-start){// Alt values. $alt-value:$value;@if $value == "flex-start"{$alt-value:start}@elseif $value == "flex-end"{$alt-value:end}@elseif $value == "space-between"{$alt-value:justify}@elseif $value == "space-around"{$alt-value:center}// 2009 @include prefixer(box-pack,$alt-value,webkit moz spec);// 2012 @include prefixer(justify-content,$value,webkit moz ms o spec);// 2011 (IE 10) -ms-flex-pack:$alt-value}// 2009 - box-align (start | end | center | baseline | stretch) // 2011 - flex-align (start | end | center | baseline | stretch) // 2012 - align-items (flex-start | flex-end | center | baseline | stretch) @mixin align-items($value:stretch){$alt-value:$value;@if $value == "flex-start"{$alt-value:start}@elseif $value == "flex-end"{$alt-value:end}// 2009 @include prefixer(box-align,$alt-value,webkit moz spec);// 2012 @include prefixer(align-items,$value,webkit moz ms o spec);// 2011 (IE 10) -ms-flex-align:$alt-value}// 2011 - flex-item-align (auto | start | end | center | baseline | stretch) // 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch) @mixin align-self($value:auto){$value-2011:$value;@if $value == "flex-start"{$value-2011:start}@elseif $value == "flex-end"{$value-2011:end}// 2012 @include prefixer(align-self,$value,webkit moz spec);// 2011 (IE 10) -ms-flex-item-align:$value-2011}// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch) // 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch) @mixin align-content($value:stretch){$value-2011:$value;@if $value == "flex-start"{$value-2011:start}@elseif $value == "flex-end"{$value-2011:end}@elseif $value == "space-between"{$value-2011:justify}@elseif $value == "space-around"{$value-2011:distribute}// 2012 @include prefixer(align-content,$value,webkit moz spec);// 2011 (IE 10) -ms-flex-line-pack:$value-2011}// Order of the includes matters,and it is:normal,bold,italic,bold+italic. @mixin font-face($font-family,$file-path,$weight:normal,$style:normal,$asset-pipeline:false){@font-face{font-family:$font-family;font-weight:$weight;font-style:$style;@if $asset-pipeline == true{src:font-url('#{$file-path}.eot');src:font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),font-url('#{$file-path}.woff') format('woff'),font-url('#{$file-path}.ttf') format('truetype'),font-url('#{$file-path}.svg##{$font-family}') format('svg')}@else{src:url('#{$file-path}.eot');src:url('#{$file-path}.eot?#iefix') format('embedded-opentype'),url('#{$file-path}.woff') format('woff'),url('#{$file-path}.ttf') format('truetype'),url('#{$file-path}.svg##{$font-family}') format('svg')}}}// Font feature settings mixin and property default. // Examples:@include font-feature-settings("liga");// @include font-feature-settings("lnum" false);// @include font-feature-settings("pnum" 1,"kern" 0);// @include font-feature-settings("ss01","ss02");@mixin font-feature-settings($settings...){@if length($settings) == 0{$settings:none}@include prefixer(font-feature-settings,$settings,webkit moz ms spec)}@mixin hyphens($hyphenation:none){// none | manual | auto @include prefixer(hyphens,$hyphenation,webkit moz ms spec)}// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) @mixin hidpi($ratio:1.3){@media only screen and (-webkit-min-device-pixel-ratio:$ratio),only screen and (min--moz-device-pixel-ratio:$ratio),only screen and (-o-min-device-pixel-ratio:#{$ratio}/1),only screen and (min-resolution:#{round($ratio*96)}dpi),only screen and (min-resolution:#{$ratio}dppx){@content}}@mixin image-rendering ($mode:auto){@if ($mode == crisp-edges){-ms-interpolation-mode:nearest-neighbor;// IE8+ image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}@else{image-rendering:$mode}}// Legacy support for inline-block in IE7 (maybe IE6) @mixin inline-block{display:inline-block;vertical-align:baseline;zoom:1;*display:inline;*vertical-align:auto}// Adds keyframes blocks for supported prefixes,removing redundant prefixes in the block's content @mixin keyframes($name){$original-prefix-for-webkit:$prefix-for-webkit;$original-prefix-for-mozilla:$prefix-for-mozilla;$original-prefix-for-microsoft:$prefix-for-microsoft;$original-prefix-for-opera:$prefix-for-opera;$original-prefix-for-spec:$prefix-for-spec;@if $original-prefix-for-webkit{@include disable-prefix-for-all();$prefix-for-webkit:true;@-webkit-keyframes #{$name}{@content}}@if $original-prefix-for-mozilla{@include disable-prefix-for-all();$prefix-for-mozilla:true;@-moz-keyframes #{$name}{@content}}$prefix-for-webkit:$original-prefix-for-webkit;$prefix-for-mozilla:$original-prefix-for-mozilla;$prefix-for-microsoft:$original-prefix-for-microsoft;$prefix-for-opera:$original-prefix-for-opera;$prefix-for-spec:$original-prefix-for-spec;@if $original-prefix-for-spec{@keyframes #{$name}{@content}}}@mixin linear-gradient($pos,$G1,$G2:null,$G3:null,$G4:null,$G5:null,$G6:null,$G7:null,$G8:null,$G9:null,$G10:null,$fallback:null){// Detect what type of value exists in $pos $pos-type:type-of(nth($pos,1));$pos-spec:null;$pos-degree:null;// If $pos is missing from mixin,reassign vars and add default position @if ($pos-type == color) or (nth($pos,1) == "transparent"){$G10:$G9;$G9:$G8;$G8:$G7;$G7:$G6;$G6:$G5;$G5:$G4;$G4:$G3;$G3:$G2;$G2:$G1;$G1:$pos;$pos:null}@if $pos{$positions:_linear-positions-parser($pos);$pos-degree:nth($positions,1);$pos-spec:nth($positions,2)}$full:$G1,$G2,$G3,$G4,$G5,$G6,$G7,$G8,$G9,$G10;// Set $G1 as the default fallback color $fallback-color:nth($G1,1);// If $fallback is a color use that color as the fallback color @if (type-of($fallback) == color) or ($fallback == "transparent"){$fallback-color:$fallback}background-color:$fallback-color;background-image:-webkit-linear-gradient($pos-degree $full);// Safari 5.1+,Chrome background-image:unquote("linear-gradient(#{$pos-spec}#{$full})")}@mixin perspective($depth:none){// none | <length> @include prefixer(perspective,$depth,webkit moz spec)}@mixin perspective-origin($value:50% 50%){@include prefixer(perspective-origin,$value,webkit moz spec)}// Requires Sass 3.1+ @mixin radial-gradient($G1,$G2,$G3:null,$G4:null,$G5:null,$G6:null,$G7:null,$G8:null,$G9:null,$G10:null,$pos:null,$shape-size:null,$fallback:null){$data:_radial-arg-parser($G1,$G2,$pos,$shape-size);$G1:nth($data,1);$G2:nth($data,2);$pos:nth($data,3);$shape-size:nth($data,4);$full:$G1,$G2,$G3,$G4,$G5,$G6,$G7,$G8,$G9,$G10;// Strip deprecated cover/contain for spec $shape-size-spec:_shape-size-stripper($shape-size);// Set $G1 as the default fallback color $first-color:nth($full,1);$fallback-color:nth($first-color,1);@if (type-of($fallback) == color) or ($fallback == "transparent"){$fallback-color:$fallback}// Add Commas and spaces $shape-size:if($shape-size,'#{$shape-size},',null);$pos:if($pos,'#{$pos},',null);$pos-spec:if($pos,'at #{$pos}',null);$shape-size-spec:if(($shape-size-spec != ' ') and ($pos == null),'#{$shape-size-spec},','#{$shape-size-spec}');background-color:$fallback-color;background-image:-webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));background-image:unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})")}@mixin transform($property:none){// none | <transform-function> @include prefixer(transform,$property,webkit moz ms o spec)}@mixin transform-origin($axes:50%){// x-axis - left | center | right | length | % // y-axis - top | center | bottom | length | % // z-axis - length @include prefixer(transform-origin,$axes,webkit moz ms o spec)}@mixin transform-style ($style:flat){@include prefixer(transform-style,$style,webkit moz ms o spec)}// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. // Example:@include transition (all 2s ease-in-out);// @include transition (opacity 1s ease-in 2s,width 2s ease-out);// @include transition-property (transform,opacity);@mixin transition ($properties...){// Fix for vendor-prefix transform property $needs-prefixes:false;$webkit:();$moz:();$spec:();// Create lists for vendor-prefixed transform @each $list in $properties{@if nth($list,1) == "transform"{$needs-prefixes:true;$list1:-webkit-transform;$list2:-moz-transform;$list3:();@each $var in $list{$list3:join($list3,$var);@if $var != "transform"{$list1:join($list1,$var);$list2:join($list2,$var)}}$webkit:append($webkit,$list1);$moz:append($moz,$list2);$spec:append($spec,$list3)}// Create lists for non-prefixed transition properties @else{$webkit:append($webkit,$list,comma);$moz:append($moz,$list,comma);$spec:append($spec,$list,comma)}}@if $needs-prefixes{-webkit-transition:$webkit;-moz-transition:$moz;transition:$spec}@else{@if length($properties) >= 1{@include prefixer(transition,$properties,webkit moz spec)}@else{$properties:all 0.15s ease-out 0s;@include prefixer(transition,$properties,webkit moz spec)}}}@mixin transition-property ($properties...){-webkit-transition-property:transition-property-names($properties,'webkit');-moz-transition-property:transition-property-names($properties,'moz');transition-property:transition-property-names($properties,false)}@mixin transition-duration ($times...){@include prefixer(transition-duration,$times,webkit moz spec)}@mixin transition-timing-function ($motions...){// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() @include prefixer(transition-timing-function,$motions,webkit moz spec)}@mixin transition-delay ($times...){@include prefixer(transition-delay,$times,webkit moz spec)}@mixin user-select($arg:none){@include prefixer(user-select,$arg,webkit moz ms spec)}@mixin placeholder{$placeholders:":-webkit-input" ":-moz" "-moz" "-ms-input";@each $placeholder in $placeholders{&:#{$placeholder}-placeholder{@content}}}// Addons & other mixins @mixin button ($style:simple,$base-color:#4294f0,$text-size:inherit,$padding:7px 18px){@if type-of($style) == string and type-of($base-color) == color{@include buttonstyle($style,$base-color,$text-size,$padding)}@if type-of($style) == string and type-of($base-color) == number{$padding:$text-size;$text-size:$base-color;$base-color:#4294f0;@if $padding == inherit{$padding:7px 18px}@include buttonstyle($style,$base-color,$text-size,$padding)}@if type-of($style) == color and type-of($base-color) == color{$base-color:$style;$style:simple;@include buttonstyle($style,$base-color,$text-size,$padding)}@if type-of($style) == color and type-of($base-color) == number{$padding:$text-size;$text-size:$base-color;$base-color:$style;$style:simple;@if $padding == inherit{$padding:7px 18px}@include buttonstyle($style,$base-color,$text-size,$padding)}@if type-of($style) == number{$padding:$base-color;$text-size:$style;$base-color:#4294f0;$style:simple;@if $padding == #4294f0{$padding:7px 18px}@include buttonstyle($style,$base-color,$text-size,$padding)}&:disabled{opacity:0.5;cursor:not-allowed}}// Selector Style Button // @mixin buttonstyle($type,$b-color,$t-size,$pad){// Grayscale button @if $type == simple and $b-color == grayscale($b-color){@include simple($b-color,true,$t-size,$pad)}@if $type == shiny and $b-color == grayscale($b-color){@include shiny($b-color,true,$t-size,$pad)}@if $type == pill and $b-color == grayscale($b-color){@include pill($b-color,true,$t-size,$pad)}@if $type == flat and $b-color == grayscale($b-color){@include flat($b-color,true,$t-size,$pad)}// Colored button @if $type == simple{@include simple($b-color,false,$t-size,$pad)}@else if $type == shiny{@include shiny($b-color,false,$t-size,$pad)}@else if $type == pill{@include pill($b-color,false,$t-size,$pad)}@else if $type == flat{@include flat($b-color,false,$t-size,$pad)}}// Simple Button // @mixin simple($base-color,$grayscale:false,$textsize:inherit,$padding:7px 18px){$color:hsl(0,0,100%);$border:adjust-color($base-color,$saturation:9%,$lightness:-14%);$inset-shadow:adjust-color($base-color,$saturation:-8%,$lightness:15%);$stop-gradient:adjust-color($base-color,$saturation:9%,$lightness:-11%);$text-shadow:adjust-color($base-color,$saturation:15%,$lightness:-18%);@if is-light($base-color){$color:hsl(0,0,20%);$text-shadow:adjust-color($base-color,$saturation:10%,$lightness:4%)}@if $grayscale == true{$border:grayscale($border);$inset-shadow:grayscale($inset-shadow);$stop-gradient:grayscale($stop-gradient);$text-shadow:grayscale($text-shadow)}border:1px solid $border;border-radius:3px;box-shadow:inset 0 1px 0 0 $inset-shadow;color:$color;display:inline-block;font-size:$textsize;font-weight:bold;@include linear-gradient ($base-color,$stop-gradient);padding:$padding;text-decoration:none;text-shadow:0 1px 0 $text-shadow;background-clip:padding-box;&:hover:not(:disabled){$base-color-hover:adjust-color($base-color,$saturation:-4%,$lightness:-5%);$inset-shadow-hover:adjust-color($base-color,$saturation:-7%,$lightness:5%);$stop-gradient-hover:adjust-color($base-color,$saturation:8%,$lightness:-14%);@if $grayscale == true{$base-color-hover:grayscale($base-color-hover);$inset-shadow-hover:grayscale($inset-shadow-hover);$stop-gradient-hover:grayscale($stop-gradient-hover)}box-shadow:inset 0 1px 0 0 $inset-shadow-hover;cursor:pointer;@include linear-gradient ($base-color-hover,$stop-gradient-hover)}&:active:not(:disabled),&:focus:not(:disabled){$border-active:adjust-color($base-color,$saturation:9%,$lightness:-14%);$inset-shadow-active:adjust-color($base-color,$saturation:7%,$lightness:-17%);@if $grayscale == true{$border-active:grayscale($border-active);$inset-shadow-active:grayscale($inset-shadow-active)}border:1px solid $border-active;box-shadow:inset 0 0 8px 4px $inset-shadow-active,inset 0 0 8px 4px $inset-shadow-active}}// Shiny Button // @mixin shiny($base-color,$grayscale:false,$textsize:inherit,$padding:7px 18px){$color:hsl(0,0,100%);$border:adjust-color($base-color,$red:-117,$green:-111,$blue:-81);$border-bottom:adjust-color($base-color,$red:-126,$green:-127,$blue:-122);$fourth-stop:adjust-color($base-color,$red:-79,$green:-70,$blue:-46);$inset-shadow:adjust-color($base-color,$red:37,$green:29,$blue:12);$second-stop:adjust-color($base-color,$red:-56,$green:-50,$blue:-33);$text-shadow:adjust-color($base-color,$red:-140,$green:-141,$blue:-114);$third-stop:adjust-color($base-color,$red:-86,$green:-75,$blue:-48);@if is-light($base-color){$color:hsl(0,0,20%);$text-shadow:adjust-color($base-color,$saturation:10%,$lightness:4%)}@if $grayscale == true{$border:grayscale($border);$border-bottom:grayscale($border-bottom);$fourth-stop:grayscale($fourth-stop);$inset-shadow:grayscale($inset-shadow);$second-stop:grayscale($second-stop);$text-shadow:grayscale($text-shadow);$third-stop:grayscale($third-stop)}border:1px solid $border;border-bottom:1px solid $border-bottom;border-radius:5px;box-shadow:inset 0 1px 0 0 $inset-shadow;color:$color;display:inline-block;font-size:$textsize;font-weight:bold;@include linear-gradient(top,$base-color 0%,$second-stop 50%,$third-stop 50%,$fourth-stop 100%);padding:$padding;text-align:center;text-decoration:none;text-shadow:0 -1px 1px $text-shadow;&:hover:not(:disabled){$first-stop-hover:adjust-color($base-color,$red:-13,$green:-15,$blue:-18);$second-stop-hover:adjust-color($base-color,$red:-66,$green:-62,$blue:-51);$third-stop-hover:adjust-color($base-color,$red:-93,$green:-85,$blue:-66);$fourth-stop-hover:adjust-color($base-color,$red:-86,$green:-80,$blue:-63);@if $grayscale == true{$first-stop-hover:grayscale($first-stop-hover);$second-stop-hover:grayscale($second-stop-hover);$third-stop-hover:grayscale($third-stop-hover);$fourth-stop-hover:grayscale($fourth-stop-hover)}cursor:pointer;@include linear-gradient(top,$first-stop-hover 0%,$second-stop-hover 50%,$third-stop-hover 50%,$fourth-stop-hover 100%)}&:active:not(:disabled),&:focus:not(:disabled){$inset-shadow-active:adjust-color($base-color,$red:-111,$green:-116,$blue:-122);@if $grayscale == true{$inset-shadow-active:grayscale($inset-shadow-active)}box-shadow:inset 0 0 20px 0 $inset-shadow-active}}// Pill Button // @mixin pill($base-color,$grayscale:false,$textsize:inherit,$padding:7px 18px){$color:hsl(0,0,100%);$border-bottom:adjust-color($base-color,$hue:8,$saturation:-11%,$lightness:-26%);$border-sides:adjust-color($base-color,$hue:4,$saturation:-21%,$lightness:-21%);$border-top:adjust-color($base-color,$hue:-1,$saturation:-30%,$lightness:-15%);$inset-shadow:adjust-color($base-color,$hue:-1,$saturation:-1%,$lightness:7%);$stop-gradient:adjust-color($base-color,$hue:8,$saturation:14%,$lightness:-10%);$text-shadow:adjust-color($base-color,$hue:5,$saturation:-19%,$lightness:-15%);@if is-light($base-color){$color:hsl(0,0,20%);$text-shadow:adjust-color($base-color,$saturation:10%,$lightness:4%)}@if $grayscale == true{$border-bottom:grayscale($border-bottom);$border-sides:grayscale($border-sides);$border-top:grayscale($border-top);$inset-shadow:grayscale($inset-shadow);$stop-gradient:grayscale($stop-gradient);$text-shadow:grayscale($text-shadow)}border:1px solid $border-top;border-color:$border-top $border-sides $border-bottom;border-radius:16px;box-shadow:inset 0 1px 0 0 $inset-shadow;color:$color;display:inline-block;font-size:$textsize;font-weight:normal;line-height:1;@include linear-gradient ($base-color,$stop-gradient);padding:$padding;text-align:center;text-decoration:none;text-shadow:0 -1px 1px $text-shadow;background-clip:padding-box;&:hover:not(:disabled){$base-color-hover:adjust-color($base-color,$lightness:-4.5%);$border-bottom:adjust-color($base-color,$hue:8,$saturation:13.5%,$lightness:-32%);$border-sides:adjust-color($base-color,$hue:4,$saturation:-2%,$lightness:-27%);$border-top:adjust-color($base-color,$hue:-1,$saturation:-17%,$lightness:-21%);$inset-shadow-hover:adjust-color($base-color,$saturation:-1%,$lightness:3%);$stop-gradient-hover:adjust-color($base-color,$hue:8,$saturation:-4%,$lightness:-15.5%);$text-shadow-hover:adjust-color($base-color,$hue:5,$saturation:-5%,$lightness:-22%);@if $grayscale == true{$base-color-hover:grayscale($base-color-hover);$border-bottom:grayscale($border-bottom);$border-sides:grayscale($border-sides);$border-top:grayscale($border-top);$inset-shadow-hover:grayscale($inset-shadow-hover);$stop-gradient-hover:grayscale($stop-gradient-hover);$text-shadow-hover:grayscale($text-shadow-hover)}border:1px solid $border-top;border-color:$border-top $border-sides $border-bottom;box-shadow:inset 0 1px 0 0 $inset-shadow-hover;cursor:pointer;@include linear-gradient ($base-color-hover,$stop-gradient-hover);text-shadow:0 -1px 1px $text-shadow-hover;background-clip:padding-box}&:active:not(:disabled),&:focus:not(:disabled){$active-color:adjust-color($base-color,$hue:4,$saturation:-12%,$lightness:-10%);$border-active:adjust-color($base-color,$hue:6,$saturation:-2.5%,$lightness:-30%);$border-bottom-active:adjust-color($base-color,$hue:11,$saturation:6%,$lightness:-31%);$inset-shadow-active:adjust-color($base-color,$hue:9,$saturation:2%,$lightness:-21.5%);$text-shadow-active:adjust-color($base-color,$hue:5,$saturation:-12%,$lightness:-21.5%);@if $grayscale == true{$active-color:grayscale($active-color);$border-active:grayscale($border-active);$border-bottom-active:grayscale($border-bottom-active);$inset-shadow-active:grayscale($inset-shadow-active);$text-shadow-active:grayscale($text-shadow-active)}background:$active-color;border:1px solid $border-active;border-bottom:1px solid $border-bottom-active;box-shadow:inset 0 0 6px 3px $inset-shadow-active;text-shadow:0 -1px 1px $text-shadow-active}}// Flat Button // @mixin flat($base-color,$grayscale:false,$textsize:inherit,$padding:7px 18px){$color:hsl(0,0,100%);@if is-light($base-color){$color:hsl(0,0,20%)}background-color:$base-color;border-radius:3px;border:none;color:$color;display:inline-block;font-size:inherit;font-weight:bold;padding:7px 18px;text-decoration:none;background-clip:padding-box;&:hover:not(:disabled){$base-color-hover:adjust-color($base-color,$saturation:4%,$lightness:5%);@if $grayscale == true{$base-color-hover:grayscale($base-color-hover)}background-color:$base-color-hover;cursor:pointer}&:active:not(:disabled),&:focus:not(:disabled){$base-color-active:adjust-color($base-color,$saturation:-4%,$lightness:-5%);@if $grayscale == true{$base-color-active:grayscale($base-color-active)}background-color:$base-color-active;cursor:pointer}}// Modern micro clearfix provides an easy way to contain floats without adding additional markup. // // Example usage:// // // Contain all floats within .wrapper // .wrapper{// @include clearfix;// .content,// .sidebar{// float:left;//}//}@mixin clearfix{&:after{content:"";display:table;clear:both}}// Acknowledgements // Beat *that* clearfix:[Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php) // directional-property mixins are shorthands // for writing properties like the following // // @include margin(null 0 10px);// ------ // margin-right:0;// margin-bottom:10px;// margin-left:0;// // - or - // // @include border-style(dotted null);// ------ // border-top-style:dotted;// border-bottom-style:dotted;// // ------ // // Note:You can also use false instead of null @function collapse-directionals($vals){$output:null;$A:nth($vals,1);$B:if(length($vals) < 2,$A,nth($vals,2));$C:if(length($vals) < 3,$A,nth($vals,3));$D:if(length($vals) < 2,$A,nth($vals,if(length($vals) < 4,2,4)));@if $A == 0{$A:0}@if $B == 0{$B:0}@if $C == 0{$C:0}@if $D == 0{$D:0}@if $A == $B and $A == $C and $A == $D{$output:$A}@else if $A == $C and $B == $D{$output:$A $B}@else if $B == $D{$output:$A $B $C}@else{$output:$A $B $C $D}@return $output}@function contains-falsy($list){@each $item in $list{@if not $item{@return true}}@return false}@mixin directional-property($pre,$suf,$vals){// Property Names $top:$pre + "-top" + if($suf,"-#{$suf}","");$bottom:$pre + "-bottom" + if($suf,"-#{$suf}","");$left:$pre + "-left" + if($suf,"-#{$suf}","");$right:$pre + "-right" + if($suf,"-#{$suf}","");$all:$pre + if($suf,"-#{$suf}","");$vals:collapse-directionals($vals);@if contains-falsy($vals){@if nth($vals,1){#{$top}:nth($vals,1)}@if length($vals) == 1{@if nth($vals,1){#{$right}:nth($vals,1)}}@else{@if nth($vals,2){#{$right}:nth($vals,2)}}// prop:top/bottom right/left @if length($vals) == 2{@if nth($vals,1){#{$bottom}:nth($vals,1)}@if nth($vals,2){#{$left}:nth($vals,2)}// prop:top right/left bottom}@else if length($vals) == 3{@if nth($vals,3){#{$bottom}:nth($vals,3)}@if nth($vals,2){#{$left}:nth($vals,2)}// prop:top right bottom left}@else if length($vals) == 4{@if nth($vals,3){#{$bottom}:nth($vals,3)}@if nth($vals,4){#{$left}:nth($vals,4)}}// prop:top/right/bottom/left}@else{#{$all}:$vals}}@mixin margin($vals...){@include directional-property(margin,false,$vals...)}@mixin padding($vals...){@include directional-property(padding,false,$vals...)}@mixin border-style($vals...){@include directional-property(border,style,$vals...)}@mixin border-color($vals...){@include directional-property(border,color,$vals...)}@mixin border-width($vals...){@include directional-property(border,width,$vals...)}@mixin ellipsis($width:100%){display:inline-block;max-width:$width;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}$georgia:Georgia,Cambria,"Times New Roman",Times,serif;$helvetica:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;$lucida-grande:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;$monospace:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;$verdana:Verdana,Geneva,sans-serif;@mixin hide-text{overflow:hidden;&:before{content:"";display:block;width:0;height:100%}}// // Generate a variable ($all-text-inputs) with a list of all html5 // input types that have a text-based input,excluding textarea. // http://diveintohtml5.org/forms.html // $inputs-list:'input[type="email"]','input[type="number"]','input[type="password"]','input[type="search"]','input[type="tel"]','input[type="text"]','input[type="url"]',// Webkit & Gecko may change the display of these in the future 'input[type="color"]','input[type="date"]','input[type="datetime"]','input[type="datetime-local"]','input[type="month"]','input[type="time"]','input[type="week"]';$unquoted-inputs-list:();@each $input-type in $inputs-list{$unquoted-inputs-list:append($unquoted-inputs-list,unquote($input-type),comma)}$all-text-inputs:$unquoted-inputs-list;// Hover Pseudo-class // $all-text-inputs-hover:();@each $input-type in $unquoted-inputs-list{$input-type-hover:$input-type + ":hover";$all-text-inputs-hover:append($all-text-inputs-hover,$input-type-hover,comma)}// Focus Pseudo-class // $all-text-inputs-focus:();@each $input-type in $unquoted-inputs-list{$input-type-focus:$input-type + ":focus";$all-text-inputs-focus:append($all-text-inputs-focus,$input-type-focus,comma)}// You must use interpolation on the variable:// #{$all-text-inputs}// #{$all-text-inputs-hover}// #{$all-text-inputs-focus}// Example // // #{$all-text-inputs},textarea{// border:1px solid red;//}// // Generate a variable ($all-button-inputs) with a list of all html5 // input types that have a button-based input,excluding button. // $inputs-button-list:'input[type="button"]','input[type="reset"]','input[type="submit"]';$unquoted-inputs-button-list:();@each $input-type in $inputs-button-list{$unquoted-inputs-button-list:append($unquoted-inputs-button-list,unquote($input-type),comma)}$all-button-inputs:$unquoted-inputs-button-list;// Hover Pseudo-class // $all-button-inputs-hover:();@each $input-type in $unquoted-inputs-button-list{$input-type-hover:$input-type + ":hover";$all-button-inputs-hover:append($all-button-inputs-hover,$input-type-hover,comma)}// Focus Pseudo-class // $all-button-inputs-focus:();@each $input-type in $unquoted-inputs-button-list{$input-type-focus:$input-type + ":focus";$all-button-inputs-focus:append($all-button-inputs-focus,$input-type-focus,comma)}// Active Pseudo-class // $all-button-inputs-active:();@each $input-type in $unquoted-inputs-button-list{$input-type-active:$input-type + ":active";$all-button-inputs-active:append($all-button-inputs-active,$input-type-active,comma)}// You must use interpolation on the variable:// #{$all-button-inputs}// #{$all-button-inputs-hover}// #{$all-button-inputs-focus}// #{$all-button-inputs-active}// Example // // #{$all-button-inputs},button{// border:1px solid red;//}@mixin position ($position:relative,$coordinates:null null null null){@if type-of($position) == list{$coordinates:$position;$position:relative}$coordinates:unpack($coordinates);$top:nth($coordinates,1);$right:nth($coordinates,2);$bottom:nth($coordinates,3);$left:nth($coordinates,4);position:$position;@if ($top and $top == auto) or (type-of($top) == number){top:$top}@if ($right and $right == auto) or (type-of($right) == number){right:$right}@if ($bottom and $bottom == auto) or (type-of($bottom) == number){bottom:$bottom}@if ($left and $left == auto) or (type-of($left) == number){left:$left}}// // Example:@include prefixer(border-radius,$radii,webkit ms spec);// // Variables located in /settings/_prefixer.scss @mixin prefixer ($property,$value,$prefixes){@each $prefix in $prefixes{@if $prefix == webkit{@if $prefix-for-webkit{-webkit-#{$property}:$value}}@else if $prefix == moz{@if $prefix-for-mozilla{-moz-#{$property}:$value}}@else if $prefix == ms{@if $prefix-for-microsoft{-ms-#{$property}:$value}}@else if $prefix == o{@if $prefix-for-opera{-o-#{$property}:$value}}@else if $prefix == spec{@if $prefix-for-spec{#{$property}:$value}}@else{@warn "Unrecognized prefix:#{$prefix}"}}}@mixin disable-prefix-for-all(){$prefix-for-webkit:false;$prefix-for-mozilla:false;$prefix-for-microsoft:false;$prefix-for-opera:false;$prefix-for-spec:false}@mixin retina-image($filename,$background-size,$extension:png,$retina-filename:null,$retina-suffix:_2x,$asset-pipeline:false){@if $asset-pipeline{background-image:image-url("#{$filename}.#{$extension}")}@else{background-image:url("#{$filename}.#{$extension}")}@include hidpi{@if $asset-pipeline{@if $retina-filename{background-image:image-url("#{$retina-filename}.#{$extension}")}@else{background-image:image-url("#{$filename}#{$retina-suffix}.#{$extension}")}}@else{@if $retina-filename{background-image:url("#{$retina-filename}.#{$extension}")}@else{background-image:url("#{$filename}#{$retina-suffix}.#{$extension}")}}background-size:$background-size}}@mixin size($size){@if length($size) == 1{@if $size == auto{width:$size;height:$size}@else if unitless($size){width:$size + px;height:$size + px}@else if not(unitless($size)){width:$size;height:$size}}// Width x Height @if length($size) == 2{$width:nth($size,1);$height:nth($size,2);@if $width == auto{width:$width}@else if not(unitless($width)){width:$width}@else if unitless($width){width:$width + px}@if $height == auto{height:$height}@else if not(unitless($height)){height:$height}@else if unitless($height){height:$height + px}}}// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) // Timing functions are the same as demo'ed here:http://jqueryui.com/demos/effect/easing.html // EASE IN $ease-in-quad:cubic-bezier(0.550,0.085,0.680,0.530);$ease-in-cubic:cubic-bezier(0.550,0.055,0.675,0.190);$ease-in-quart:cubic-bezier(0.895,0.030,0.685,0.220);$ease-in-quint:cubic-bezier(0.755,0.050,0.855,0.060);$ease-in-sine:cubic-bezier(0.470,0.000,0.745,0.715);$ease-in-expo:cubic-bezier(0.950,0.050,0.795,0.035);$ease-in-circ:cubic-bezier(0.600,0.040,0.980,0.335);$ease-in-back:cubic-bezier(0.600,-0.280,0.735,0.045);// EASE OUT $ease-out-quad:cubic-bezier(0.250,0.460,0.450,0.940);$ease-out-cubic:cubic-bezier(0.215,0.610,0.355,1.000);$ease-out-quart:cubic-bezier(0.165,0.840,0.440,1.000);$ease-out-quint:cubic-bezier(0.230,1.000,0.320,1.000);$ease-out-sine:cubic-bezier(0.390,0.575,0.565,1.000);$ease-out-expo:cubic-bezier(0.190,1.000,0.220,1.000);$ease-out-circ:cubic-bezier(0.075,0.820,0.165,1.000);$ease-out-back:cubic-bezier(0.175,0.885,0.320,1.275);// EASE IN OUT $ease-in-out-quad:cubic-bezier(0.455,0.030,0.515,0.955);$ease-in-out-cubic:cubic-bezier(0.645,0.045,0.355,1.000);$ease-in-out-quart:cubic-bezier(0.770,0.000,0.175,1.000);$ease-in-out-quint:cubic-bezier(0.860,0.000,0.070,1.000);$ease-in-out-sine:cubic-bezier(0.445,0.050,0.550,0.950);$ease-in-out-expo:cubic-bezier(1.000,0.000,0.000,1.000);$ease-in-out-circ:cubic-bezier(0.785,0.135,0.150,0.860);$ease-in-out-back:cubic-bezier(0.680,-0.550,0.265,1.550);@mixin triangle ($size,$color,$direction){height:0;width:0;$width:nth($size,1);$height:nth($size,length($size));$foreground-color:nth($color,1);$background-color:transparent !default;@if (length($color) == 2){$background-color:nth($color,2)}@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left){$width:$width / 2;$height:if(length($size) > 1,$height,$height/2);@if $direction == up{border-top:$width solid $background-color;border-left:$width solid $background-color;border-right:$width solid $background-color;border-bottom:$height solid $foreground-color}@else if $direction == right{border-top:$width solid $background-color;border-bottom:$width solid $background-color;border-right:$width solid $background-color;border-left:$height solid $foreground-color}@else if $direction == down{border-left:$width solid $background-color;border-right:$width solid $background-color;border-bottom:$width solid $background-color;border-top:$height solid $foreground-color}@else if $direction == left{border-top:$width solid $background-color;border-bottom:$width solid $background-color;border-left:$width solid $background-color;border-right:$height solid $foreground-color}}@else if ($direction == up-right) or ($direction == up-left){border-top:$height solid $foreground-color;@if $direction == up-right{border-left:$width solid $background-color}@else if $direction == up-left{border-right:$width solid $background-color}}@else if ($direction == down-right) or ($direction == down-left){border-bottom:$height solid $foreground-color;@if $direction == down-right{border-left:$width solid $background-color}@else if $direction == down-left{border-right:$width solid $background-color}}@else if ($direction == inset-up){border-width:$height $width;border-style:solid;border-color:$background-color $background-color $foreground-color}@else if ($direction == inset-down){border-width:$height $width;border-style:solid;border-color:$foreground-color $background-color $background-color}@else if ($direction == inset-right){border-width:$width $height;border-style:solid;border-color:$background-color $background-color $background-color $foreground-color}@else if ($direction == inset-left){border-width:$width $height;border-style:solid;border-color:$background-color $foreground-color $background-color $background-color}}@mixin word-wrap($wrap:break-word){word-wrap:$wrap;@if $wrap == break-word{overflow-wrap:break-word;word-break:break-all}}// Soon to be deprecated Mixins // // These mixins/functions are deprecated // They will be removed in the next MAJOR version release // @mixin box-shadow ($shadows...){@include prefixer(box-shadow,$shadows,spec)}@mixin background-size ($lengths...){@include prefixer(background-size,$lengths,spec)}// This is used a lot in our stylesheets,sorry! @mixin border-radius ($radii...){border-radius:$radii}// Checks if a number is even @function is-even($int){@if $int%2 == 0{@return true}@return false}// Checks if an element belongs to a list @function belongs-to($tested-item,$list){@each $item in $list{@if $item == $tested-item{@return true}}@return false}// Contains display value @function contains-display-value($query){@if belongs-to(table,$query) or belongs-to(block,$query) or belongs-to(inline-block,$query) or belongs-to(inline,$query){@return true}@return false}// Parses the first argument of span-columns() @function container-span($span:$span){@if length($span) == 3{$container-columns:nth($span,3);@return $container-columns}@else if length($span) == 2{$container-columns:nth($span,2);@return $container-columns}@else{@return $grid-columns}}@function container-shift($shift:$shift){$parent-columns:$grid-columns !default;@if length($shift) == 3{$container-columns:nth($shift,3);@return $container-columns}@else if length($shift) == 2{$container-columns:nth($shift,2);@return $container-columns}@else{@return $parent-columns}}// Generates a striped background @function gradient-stops($grid-columns,$color:$visual-grid-color){$transparent:rgba(0,0,0,0);$column-width:flex-grid(1,$grid-columns);$gutter-width:flex-gutter($grid-columns);$column-offset:$column-width;$values:($transparent 0,$color 0);@for $i from 1 to $grid-columns*2{@if is-even($i){$values:append($values,$transparent $column-offset,comma);$values:append($values,$color $column-offset,comma);$column-offset:$column-offset + $column-width}@else{$values:append($values,$color $column-offset,comma);$values:append($values,$transparent $column-offset,comma);$column-offset:$column-offset + $gutter-width}}@return $values}// Layout direction @function get-direction($layout,$default){$direction:nil;@if $layout == LTR or $layout == RTL{$direction:direction-from-layout($layout)}@else{$direction:direction-from-layout($default)}@return $direction}@function direction-from-layout($layout){$direction:nil;@if $layout == LTR{$direction:right}@else{$direction:left}@return $direction}@function get-opposite-direction($direction){$opposite-direction:left;@if $direction == left{$opposite-direction:right}@return $opposite-direction}@function new-breakpoint($query:$feature $value $columns,$total-columns:$grid-columns){@if length($query) == 1{$query:$default-feature nth($query,1) $total-columns}@else if length($query) % 2 == 0{$query:append($query,$total-columns)}@if not belongs-to($query,$visual-grid-breakpoints){$visual-grid-breakpoints:append($visual-grid-breakpoints,$query,comma)}@return $query}//$column:golden-ratio(1em,3) !default;// Column width $column:39px !default;// Column width //$gutter:golden-ratio(1em,1) !default;// Gutter between each two columns $gutter:12px !default;// Gutter between each two columns $grid-columns:12 !default;// Total number of columns in the grid //$max-width:em(1088) !default;// Max-width of the outer container $max-width:93.75% !default;// Max-width of the outer container $border-box-sizing:true !default;// Makes all elements have a border-box layout $default-feature:min-width;// Default @media feature for the breakpoint() mixin $default-layout-direction:LTR !default;$visual-grid:false !default;// Display the base grid $visual-grid-color:blue !default;$visual-grid-index:front !default;// Show grid behind content (back) or overlay it over the content (front) $visual-grid-opacity:0.2 !default;$visual-grid-breakpoints:() !default;$parent-columns:$grid-columns !default;$fg-column:$column;$fg-gutter:$gutter;$fg-max-columns:$grid-columns;$container-display-table:false !default;$layout-direction:nil !default;@function flex-grid($columns,$container-columns:$fg-max-columns){$width:$columns * $fg-column + ($columns - 1) * $fg-gutter;$container-width:$container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;@return percentage($width / $container-width)}@function flex-gutter($container-columns:$fg-max-columns,$gutter:$fg-gutter){$container-width:$container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;@return percentage($gutter / $container-width)}@function grid-width($n){@return $n * $gw-column + ($n - 1) * $gw-gutter}@function get-parent-columns($columns){@if $columns != $grid-columns{$parent-columns:$columns}@else{$parent-columns:$grid-columns}@return $parent-columns}@function is-display-table($container-is-display-table,$display){$display-table:false;@if $container-is-display-table == true{$display-table:true}@else if $display == table{$display-table:true}@return $display-table}@mixin reset-display{$container-display-table:false}@mixin reset-layout-direction{$layout-direction:$default-layout-direction}@mixin reset-all{@include reset-display;@include reset-layout-direction}@if $border-box-sizing == true{*{@include box-sizing(border-box)}}// Remove last element gutter @mixin omega($query:block,$direction:default){$table:if(belongs-to(table,$query),true,false);$auto:if(belongs-to(auto,$query),true,false);@if $direction != default{@warn "The omega mixin will no longer take a $direction argument. To change the layout direction,use row($direction) or set $default-layout-direction instead."}@else{$direction:get-direction($layout-direction,$default-layout-direction)}@if $table{@warn "The omega mixin no longer removes padding in table layouts."}@if length($query) == 1{@if $auto{&:last-child{margin-#{$direction}:0}}@else if contains-display-value($query) and $table == false{margin-#{$direction}:0}@else{@include nth-child($query,$direction)}}@else if length($query) == 2{@if $auto{&:last-child{margin-#{$direction}:0}}@else{@include nth-child(nth($query,1),$direction)}}@else{@warn "Too many arguments passed to the omega() mixin."}}@mixin nth-child($query,$direction){$opposite-direction:get-opposite-direction($direction);&:nth-child(#{$query}){margin-#{$direction}:0}@if type-of($query) == number{&:nth-child(#{$query}+1){clear:$opposite-direction}}}@mixin outer-container{@include clearfix;max-width:$max-width;margin:{left:auto;right:auto}}@mixin span-columns($span:$columns of $container-columns,$display:block){$columns:nth($span,1);$container-columns:container-span($span);// Set nesting context (used by shift()) $parent-columns:get-parent-columns($container-columns);$direction:get-direction($layout-direction,$default-layout-direction);$opposite-direction:get-opposite-direction($direction);$display-table:is-display-table($container-display-table,$display);@if $display-table{display:table-cell;width:percentage($columns / $container-columns)}@else{float:#{$opposite-direction};@if $display != no-display{display:block}@if $display == collapse{@warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead."}@if $display == collapse or $display == block-collapse{width:flex-grid($columns,$container-columns) + flex-gutter($container-columns);&:last-child{width:flex-grid($columns,$container-columns)}}@else{margin-#{$direction}:flex-gutter($container-columns);width:flex-grid($columns,$container-columns);&:last-child{margin-#{$direction}:0}}}}@mixin row($display:block,$direction:$default-layout-direction){@include clearfix;$layout-direction:$direction;@if $display == table{display:table;@include fill-parent;table-layout:fixed;$container-display-table:true}@else{display:block;$container-display-table:false}}@mixin shift($n-columns:1){@include shift-in-context($n-columns)}@mixin shift-in-context($shift:$columns of $container-columns){$n-columns:nth($shift,1);$parent-columns:container-shift($shift);$direction:get-direction($layout-direction,$default-layout-direction);$opposite-direction:get-opposite-direction($direction);margin-#{$opposite-direction}:$n-columns * flex-grid(1,$parent-columns) + $n-columns * flex-gutter($parent-columns);// Reset nesting context $parent-columns:$grid-columns}@mixin pad($padding:flex-gutter()){$padding-list:null;@each $value in $padding{$value:if($value == 'default',flex-gutter(),$value);$padding-list:join($padding-list,$value)}padding:$padding-list}@mixin fill-parent(){width:100%;@if $border-box-sizing == false{@include box-sizing(border-box)}}@mixin media($query:$feature $value $columns,$total-columns:$grid-columns){@if length($query) == 1{@media screen and ($default-feature:nth($query,1)){$default-grid-columns:$grid-columns;$grid-columns:$total-columns;@content;$grid-columns:$default-grid-columns}}@else{$loopTo:length($query);$mediaQuery:'screen and ';$default-grid-columns:$grid-columns;$grid-columns:$total-columns;@if length($query) % 2 != 0{$grid-columns:nth($query,$loopTo);$loopTo:$loopTo - 1}$i:1;@while $i <= $loopTo{$mediaQuery:$mediaQuery + '(' + nth($query,$i) + ':' + nth($query,$i + 1) + ') ';@if ($i + 1) != $loopTo{$mediaQuery:$mediaQuery + 'and '}$i:$i + 2}@media #{$mediaQuery}{@content;$grid-columns:$default-grid-columns}}}@mixin breakpoint($query:$feature $value $columns,$total-columns:$grid-columns){@warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.";@if length($query) == 1{@media screen and ($default-feature:nth($query,1)){$default-grid-columns:$grid-columns;$grid-columns:$total-columns;@content;$grid-columns:$default-grid-columns}}@else if length($query) == 2{@media screen and (nth($query,1):nth($query,2)){$default-grid-columns:$grid-columns;$grid-columns:$total-columns;@content;$grid-columns:$default-grid-columns}}@else if length($query) == 3{@media screen and (nth($query,1):nth($query,2)){$default-grid-columns:$grid-columns;$grid-columns:nth($query,3);@content;$grid-columns:$default-grid-columns}}@else if length($query) == 4{@media screen and (nth($query,1):nth($query,2)) and (nth($query,3):nth($query,4)){$default-grid-columns:$grid-columns;$grid-columns:$total-columns;@content;$grid-columns:$default-grid-columns}}@else if length($query) == 5{@media screen and (nth($query,1):nth($query,2)) and (nth($query,3):nth($query,4)){$default-grid-columns:$grid-columns;$grid-columns:nth($query,5);@content;$grid-columns:$default-grid-columns}}@else{@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details."}}@mixin nth-omega($nth,$display:block,$direction:default){@warn "The nth-omega() mixin is deprecated. Please use omega() instead.";@include omega($nth $display,$direction)}@mixin grid-column-gradient($values...){background-image:deprecated-webkit-gradient(linear,left top,left bottom,$values);background-image:-webkit-linear-gradient(left,$values);background-image:-moz-linear-gradient(left,$values);background-image:-ms-linear-gradient(left,$values);background-image:-o-linear-gradient(left,$values);background-image:unquote("linear-gradient(left,#{$values})")}@if $visual-grid == true or $visual-grid == yes{body:before{content:'';display:inline-block;@include grid-column-gradient(gradient-stops($grid-columns));height:100%;left:0;margin:0 auto;max-width:$max-width;opacity:$visual-grid-opacity;position:fixed;right:0;width:100%;pointer-events:none;@if $visual-grid-index == back{z-index:-1}@else if $visual-grid-index == front{z-index:9999}@each $breakpoint in $visual-grid-breakpoints{@if $breakpoint != nil{@include media($breakpoint){@include grid-column-gradient(gradient-stops($grid-columns))}}}}}// ============================================================================= // Illustrations // ----------------------------------------------------------------------------- // ___ _ _ // (/ // // _/_ _/_o _ // / // //,,(/ _ __,/,__ _ (// _/_(/_(/_(_/_/_)_(__/ (_(_/(_(__(_(_)/ /_) // // The definitive mixin for all re-used illustrations. // // Available names are:// browse // filters // likesyou // search // // Available sizes are:// xsmall // small // medium // large // xlarge // // Available shadows are:// null (No argument) // dark // light // Also requires an update in emails/templates/include/data.pub $version:3;// We need to keep a big-ass list of all the images widths due to retina stuff. // We don't have sass maps yet since we're not on 3.3,so the only way we can // dynamically pull from these variables is to make them placeholders,because // sass allows for string interpolation with placeholder extensions. %width-boost-xsmall{background-size:115px auto}%width-boost-small{background-size:147px auto}%width-boost-medium{background-size:184px auto}%width-boost-large{background-size:216px auto}%width-boost-xlarge{background-size:270px auto}%width-browse-xsmall{background-size:51px auto}%width-browse-small{background-size:66px auto}%width-browse-medium{background-size:86px auto}%width-browse-large{background-size:100px auto}%width-browse-xlarge{background-size:136px auto}%width-filters-xsmall{background-size:82px auto}%width-filters-small{background-size:104px auto}%width-filters-medium{background-size:133px auto}%width-filters-large{background-size:154px auto}%width-filters-xlarge{background-size:212px auto}%width-likesyou-xsmall{background-size:78px auto}%width-likesyou-small{background-size:100px auto}%width-likesyou-medium{background-size:125px auto}%width-likesyou-large{background-size:145px auto}%width-likesyou-xlarge{background-size:200px auto}%width-search-xsmall{background-size:66px auto}%width-search-small{background-size:85px auto}%width-search-medium{background-size:105px auto}%width-search-large{background-size:123px auto}%width-search-xlarge{background-size:171px auto}@mixin illustration($name,$size,$shadow:''){$suffix:'.png';@if $shadow == 'light'{$suffix:'_lt.png'}@else if $shadow == 'dark'{$suffix:'_drk.png'}background-image:url('//cdn.okccdn.com/media/img/illustrationsV#{$version}/#{$size}/1x/#{$name}#{$suffix}');background-position:center bottom;background-repeat:no-repeat;@extend %width-#{$name}-#{$size};@media #{$retinaQuery}{background-image:url('//cdn.okccdn.com/media/img/illustrationsV#{$version}/#{$size}/2x/#{$name}#{$suffix}')}}// ============================================================================= // Sprites generated from frontendscripts/sprite.py // ----------------------------------------------------------------------------- // * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - // - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * // * - * - // - * This file was automatically generated by frontendscripts/sprite.py - * // * - If you need to change a sprite in one of these files,run that script. * - // - * - * // * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - // - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * // alist-free-trial-end-modal_d176d6 @mixin alist-free-trial-end-modal-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/alist-free-trial-end-modal/alist-free-trial-end-modal_d176d6.png);background-repeat:no-repeat;display:block;@if $filename == browse{width:57px;height:75px;background-position:-119px 0px}@else if $filename == intoyou{width:119px;height:118px;background-position:0px 0px}@else if $filename == searchby{width:70px;height:73px;background-position:-176px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin alist-free-trial-end-modal-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/alist-free-trial-end-modal/alist-free-trial-end-modal_d176d6@2x.png');-webkit-background-size:246px 118px;-moz-background-size:246px 118px;background-size:246px 118px}@mixin alist-free-trial-end-modal-sprite($filename){@include alist-free-trial-end-modal-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include alist-free-trial-end-modal-2x-sprite}}// alist-free-trial-start-modal_0803c6 @mixin alist-free-trial-start-modal-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/alist-free-trial-start-modal/alist-free-trial-start-modal_0803c6.png);background-repeat:no-repeat;display:block;@if $filename == browse{width:57px;height:73px;background-position:-83px 0px}@else if $filename == intoyou{width:83px;height:80px;background-position:0px 0px}@else if $filename == searchby{width:70px;height:71px;background-position:-140px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin alist-free-trial-start-modal-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/alist-free-trial-start-modal/alist-free-trial-start-modal_0803c6@2x.png');-webkit-background-size:210px 80px;-moz-background-size:210px 80px;background-size:210px 80px}@mixin alist-free-trial-start-modal-sprite($filename){@include alist-free-trial-start-modal-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include alist-free-trial-start-modal-2x-sprite}}// alist-masthead_993b03 @mixin alist-masthead-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/alist-masthead/alist-masthead_993b03.png);background-repeat:no-repeat;display:block;@if $filename == duckie{width:112px;height:90px;background-position:0px -130px}@else if $filename == perks{width:158px;height:130px;background-position:-187px 0px}@else if $filename == planetheart{width:187px;height:130px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin alist-masthead-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/alist-masthead/alist-masthead_993b03@2x.png');-webkit-background-size:345px 220px;-moz-background-size:345px 220px;background-size:345px 220px}@mixin alist-masthead-sprite($filename){@include alist-masthead-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include alist-masthead-2x-sprite}}// boosts_fa775b @mixin boosts-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/boosts/boosts_fa775b.png);background-repeat:no-repeat;display:block;@if $filename == close-x{width:20px;height:20px;background-position:-175px 0px}@else if $filename == rocket{width:175px;height:175px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin boosts-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/boosts/boosts_fa775b@2x.png');-webkit-background-size:195px 175px;-moz-background-size:195px 175px;background-size:195px 175px}@mixin boosts-sprite($filename){@include boosts-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include boosts-2x-sprite}}// carousel_b97e05 @mixin carousel-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/carousel/carousel_b97e05.png);background-repeat:no-repeat;display:block;@if $filename == next-hover{width:18px;height:28px;background-position:-54px 0px}@else if $filename == next{width:18px;height:28px;background-position:-36px 0px}@else if $filename == prev-hover{width:18px;height:28px;background-position:-18px 0px}@else if $filename == prev{width:18px;height:28px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin carousel-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/carousel/carousel_b97e05@2x.png');-webkit-background-size:72px 28px;-moz-background-size:72px 28px;background-size:72px 28px}@mixin carousel-sprite($filename){@include carousel-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include carousel-2x-sprite}}// close-x-small_56332f @mixin close-x-small-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/close-x-small/close-x-small_56332f.png);background-repeat:no-repeat;display:block;@if $filename == x-blue{width:14px;height:14px;background-position:-14px -20px}@else if $filename == x-dark-hover{width:20px;height:20px;background-position:-20px 0px}@else if $filename == x-dark{width:20px;height:20px;background-position:0px 0px}@else if $filename == x-white{width:14px;height:14px;background-position:0px -20px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin close-x-small-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/close-x-small/close-x-small_56332f@2x.png');-webkit-background-size:40px 34px;-moz-background-size:40px 34px;background-size:40px 34px}@mixin close-x-small-sprite($filename){@include close-x-small-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include close-x-small-2x-sprite}}// glue:0.3 hash:1832e2eb9f // god-mode-2_1832e2 @mixin god-mode-2-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/god-mode-2/god-mode-2_1832e2.png);background-repeat:no-repeat;display:block;@if $filename == answer{width:100px;height:86px;background-position:-200px 0px}@else if $filename == heat{width:100px;height:85px;background-position:0px -86px}@else if $filename == popularity{width:100px;height:86px;background-position:-100px 0px}@else if $filename == priority{width:100px;height:86px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin god-mode-2-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/god-mode-2/god-mode-2_1832e2@2x.png');-webkit-background-size:300px 171px;-moz-background-size:300px 171px;background-size:300px 171px}@mixin god-mode-2-sprite($filename){@include god-mode-2-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include god-mode-2-2x-sprite}}// god-mode-ads_2b7f0f @mixin god-mode-ads-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/god-mode-ads/god-mode-ads_2b7f0f.png);background-repeat:no-repeat;display:block;@if $filename == eye-gold-small{width:25px;height:20px;background-position:-32px -76px}@else if $filename == eye-white-large{width:63px;height:50px;background-position:0px 0px}@else if $filename == eye-white-med{width:42px;height:34px;background-position:-63px 0px}@else if $filename == triangle-boost{width:32px;height:26px;background-position:0px -76px}@else if $filename == triangle-check{width:32px;height:26px;background-position:-64px -50px}@else if $filename == triangle-star{width:32px;height:26px;background-position:-32px -50px}@else if $filename == triangle-up{width:32px;height:26px;background-position:0px -50px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin god-mode-ads-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/god-mode-ads/god-mode-ads_2b7f0f@2x.png');-webkit-background-size:105px 102px;-moz-background-size:105px 102px;background-size:105px 102px}@mixin god-mode-ads-sprite($filename){@include god-mode-ads-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include god-mode-ads-2x-sprite}}// god-mode_e253b9 @mixin god-mode-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/god-mode/god-mode_e253b9.png);background-repeat:no-repeat;display:block;@if $filename == eye-gold-mail-sent{width:84px;height:67px;background-position:0px 0px}@else if $filename == eye-gold-med{width:34px;height:27px;background-position:-84px 0px}@else if $filename == eye-white-small{width:29px;height:23px;background-position:-84px -27px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin god-mode-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/god-mode/god-mode_e253b9@2x.png');-webkit-background-size:118px 67px;-moz-background-size:118px 67px;background-size:118px 67px}@mixin god-mode-sprite($filename){@include god-mode-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include god-mode-2x-sprite}}// hs-alist_4b011d @mixin hs-alist-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/hs-alist/hs-alist_4b011d.png);background-repeat:no-repeat;display:block;@if $filename == continue-hover{width:9px;height:13px;background-position:-217px -127px}@else if $filename == continue{width:9px;height:13px;background-position:-208px -127px}@else if $filename == invisible{width:136px;height:127px;background-position:0px -127px}@else if $filename == likes{width:136px;height:127px;background-position:-136px 0px}@else if $filename == next-hover{width:18px;height:28px;background-position:-190px -127px}@else if $filename == next{width:18px;height:28px;background-position:-172px -127px}@else if $filename == prev-hover{width:18px;height:28px;background-position:-154px -127px}@else if $filename == prev{width:18px;height:28px;background-position:-136px -127px}@else if $filename == search{width:136px;height:127px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin hs-alist-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/hs-alist/hs-alist_4b011d@2x.png');-webkit-background-size:272px 254px;-moz-background-size:272px 254px;background-size:272px 254px}@mixin hs-alist-sprite($filename){@include hs-alist-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include hs-alist-2x-sprite}}// hs-signup_effb33 @mixin hs-signup-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/hs-signup/hs-signup_effb33.png);background-repeat:no-repeat;display:block;@if $filename == bird{width:104px;height:116px;background-position:-208px 0px}@else if $filename == coffee{width:104px;height:116px;background-position:-104px 0px}@else if $filename == facebook{width:12px;height:20px;background-position:0px -116px}@else if $filename == socks{width:104px;height:116px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin hs-signup-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/hs-signup/hs-signup_effb33@2x.png');-webkit-background-size:312px 136px;-moz-background-size:312px 136px;background-size:312px 136px}@mixin hs-signup-sprite($filename){@include hs-signup-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include hs-signup-2x-sprite}}// into-you-popsicle_d393f3 @mixin into-you-popsicle-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/into-you-popsicle/into-you-popsicle_d393f3.png);background-repeat:no-repeat;display:block;@if $filename == drip-bottom{width:8px;height:19px;background-position:-105px -4px}@else if $filename == drip-top{width:19px;height:4px;background-position:-105px 0px}@else if $filename == popsicle-main{width:105px;height:186px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin into-you-popsicle-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/into-you-popsicle/into-you-popsicle_d393f3@2x.png');-webkit-background-size:124px 186px;-moz-background-size:124px 186px;background-size:124px 186px}@mixin into-you-popsicle-sprite($filename){@include into-you-popsicle-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include into-you-popsicle-2x-sprite}}// glue:0.3 hash:cf291a0262 // match-filter_cf291a @mixin match-filter-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/match-filter/match-filter_cf291a.png);background-repeat:no-repeat;display:block;@if $filename == a-list-modal-bg{width:130px;height:122px;background-position:0px 0px}@else if $filename == availability-hover{width:45px;height:38px;background-position:-180px -198px}@else if $filename == availability-off{width:45px;height:38px;background-position:-135px -198px}@else if $filename == availability-on{width:45px;height:38px;background-position:-90px -198px}@else if $filename == background-hover{width:45px;height:38px;background-position:-45px -198px}@else if $filename == background-off{width:45px;height:38px;background-position:0px -198px}@else if $filename == background-on{width:45px;height:38px;background-position:-220px -152px}@else if $filename == dealbreakers-hover{width:45px;height:38px;background-position:-220px -114px}@else if $filename == dealbreakers-off{width:45px;height:38px;background-position:-220px -76px}@else if $filename == dealbreakers-on{width:45px;height:38px;background-position:-220px -38px}@else if $filename == filters-hover{width:24px;height:20px;background-position:-180px -160px}@else if $filename == filters{width:24px;height:20px;background-position:-135px -122px}@else if $filename == looks-hover{width:45px;height:38px;background-position:-220px 0px}@else if $filename == looks-off{width:45px;height:38px;background-position:-135px -160px}@else if $filename == looks-on{width:45px;height:38px;background-position:-90px -160px}@else if $filename == more-hover{width:45px;height:38px;background-position:-45px -160px}@else if $filename == more-off{width:45px;height:38px;background-position:0px -160px}@else if $filename == more-on{width:45px;height:38px;background-position:-175px -114px}@else if $filename == personality-hover{width:45px;height:38px;background-position:-175px -76px}@else if $filename == personality-off{width:45px;height:38px;background-position:-175px -38px}@else if $filename == personality-on{width:45px;height:38px;background-position:-175px 0px}@else if $filename == questions-hover{width:45px;height:38px;background-position:-90px -122px}@else if $filename == questions-off{width:45px;height:38px;background-position:-45px -122px}@else if $filename == questions-on{width:45px;height:38px;background-position:0px -122px}@else if $filename == vices-hover{width:45px;height:38px;background-position:-130px -76px}@else if $filename == vices-off{width:45px;height:38px;background-position:-130px -38px}@else if $filename == vices-on{width:45px;height:38px;background-position:-130px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin match-filter-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/match-filter/match-filter_cf291a@2x.png');-webkit-background-size:265px 236px;-moz-background-size:265px 236px;background-size:265px 236px}@mixin match-filter-sprite($filename){@include match-filter-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include match-filter-2x-sprite}}// message-filters_cbcc33 @mixin message-filters-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/message-filters/message-filters_cbcc33.png);background-repeat:no-repeat;display:block;@if $filename == expand-hover{width:13px;height:8px;background-position:-51px 0px}@else if $filename == expand{width:13px;height:8px;background-position:-26px -36px}@else if $filename == lock-hover{width:12px;height:16px;background-position:-30px -18px}@else if $filename == lock{width:12px;height:16px;background-position:-18px -18px}@else if $filename == open-hover{width:18px;height:18px;background-position:0px -18px}@else if $filename == open{width:18px;height:18px;background-position:-24px 0px}@else if $filename == retract-hover{width:13px;height:8px;background-position:-13px -36px}@else if $filename == retract{width:13px;height:8px;background-position:0px -36px}@else if $filename == tooltip-lock{width:9px;height:13px;background-position:-42px 0px}@else if $filename == unlock-arrow-hover{width:6px;height:8px;background-position:-57px -8px}@else if $filename == unlock-arrow{width:6px;height:8px;background-position:-51px -8px}@else if $filename == unlock-lock-hover{width:12px;height:18px;background-position:-12px 0px}@else if $filename == unlock-lock{width:12px;height:18px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin message-filters-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/message-filters/message-filters_cbcc33@2x.png');-webkit-background-size:64px 44px;-moz-background-size:64px 44px;background-size:64px 44px}@mixin message-filters-sprite($filename){@include message-filters-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include message-filters-2x-sprite}}// mobile-download_afbb91 @mixin mobile-download-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/mobile-download/mobile-download_afbb91.png);background-repeat:no-repeat;display:block;@if $filename == android-button{width:104px;height:36px;background-position:0px -36px}@else if $filename == ios-button{width:124px;height:36px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin mobile-download-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/mobile-download/mobile-download_afbb91@2x.png');-webkit-background-size:124px 72px;-moz-background-size:124px 72px;background-size:124px 72px}@mixin mobile-download-sprite($filename){@include mobile-download-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include mobile-download-2x-sprite}}// navigation-2013_aa7f37 @mixin navigation-2013-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/navigation-2013/navigation-2013_aa7f37.png);background-repeat:no-repeat;display:block;@if $filename == events{width:17px;height:17px;background-position:-17px -18px}@else if $filename == matches{width:16px;height:16px;background-position:-39px 0px}@else if $filename == messages{width:19px;height:17px;background-position:-20px 0px}@else if $filename == quickmatch{width:17px;height:17px;background-position:0px -18px}@else if $filename == search-active{width:15px;height:15px;background-position:0px -35px}@else if $filename == search{width:15px;height:15px;background-position:-39px -16px}@else if $filename == visitors{width:20px;height:18px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin navigation-2013-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/navigation-2013/navigation-2013_aa7f37@2x.png');-webkit-background-size:55px 50px;-moz-background-size:55px 50px;background-size:55px 50px}@mixin navigation-2013-sprite($filename){@include navigation-2013-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include navigation-2013-2x-sprite}}// new-user-guide_961949 @mixin new-user-guide-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/new-user-guide/new-user-guide_961949.png);background-repeat:no-repeat;display:block;@if $filename == add-photo{width:80px;height:80px;background-position:-160px 0px}@else if $filename == like{width:80px;height:80px;background-position:-80px -80px}@else if $filename == pick-plan{width:80px;height:80px;background-position:0px -80px}@else if $filename == profile{width:80px;height:80px;background-position:-80px 0px}@else if $filename == questions{width:80px;height:80px;background-position:0px 0px}@else if $filename == success{width:54px;height:54px;background-position:-160px -80px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin new-user-guide-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/new-user-guide/new-user-guide_961949@2x.png');-webkit-background-size:240px 160px;-moz-background-size:240px 160px;background-size:240px 160px}@mixin new-user-guide-sprite($filename){@include new-user-guide-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include new-user-guide-2x-sprite}}// glue:0.3 hash:e5637333c8 // okc2014_e56373 @mixin okc2014-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/okc2014/okc2014_e56373.png);background-repeat:no-repeat;display:block;@if $filename == likes-hover{width:50px;height:50px;background-position:-158px -50px}@else if $filename == likes{width:50px;height:50px;background-position:-158px 0px}@else if $filename == logo-full{width:108px;height:37px;background-position:0px 0px}@else if $filename == logo{width:60px;height:41px;background-position:0px -37px}@else if $filename == messages-hover{width:50px;height:50px;background-position:-100px -78px}@else if $filename == messages{width:50px;height:50px;background-position:-50px -78px}@else if $filename == visitors-hover{width:50px;height:50px;background-position:0px -78px}@else if $filename == visitors{width:50px;height:50px;background-position:-108px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin okc2014-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/okc2014/okc2014_e56373@2x.png');-webkit-background-size:208px 128px;-moz-background-size:208px 128px;background-size:208px 128px}@mixin okc2014-sprite($filename){@include okc2014-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include okc2014-2x-sprite}}// glue:0.3 hash:d8a589f5ce // okpay_d8a589 @mixin okpay-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/okpay/okpay_d8a589.png);background-repeat:no-repeat;display:block;@if $filename == bitcoin-logo-lg{width:236px;height:50px;background-position:0px -66px}@else if $filename == cardtype-active-amex{width:45px;height:28px;background-position:-180px -190px}@else if $filename == cardtype-active-disc{width:45px;height:28px;background-position:-135px -190px}@else if $filename == cardtype-active-mast{width:45px;height:28px;background-position:-90px -190px}@else if $filename == cardtype-active-visa{width:45px;height:28px;background-position:-45px -190px}@else if $filename == cardtype-inactive-amex{width:45px;height:28px;background-position:0px -190px}@else if $filename == cardtype-inactive-disc{width:45px;height:28px;background-position:-202px -152px}@else if $filename == cardtype-inactive-mast{width:45px;height:28px;background-position:-157px -152px}@else if $filename == cardtype-inactive-visa{width:45px;height:28px;background-position:-112px -152px}@else if $filename == cvv-info-hover{width:17px;height:17px;background-position:-236px -83px}@else if $filename == cvv-info{width:17px;height:17px;background-position:-236px -66px}@else if $filename == nav-active-bitcoin{width:56px;height:38px;background-position:-56px -152px}@else if $filename == nav-active-card{width:56px;height:36px;background-position:-168px -116px}@else if $filename == nav-active-paypal{width:56px;height:36px;background-position:-112px -116px}@else if $filename == nav-inactive-bitcoin{width:56px;height:38px;background-position:0px -152px}@else if $filename == nav-inactive-card{width:56px;height:36px;background-position:-56px -116px}@else if $filename == nav-inactive-paypal{width:56px;height:36px;background-position:0px -116px}@else if $filename == paypal-logo-lg{width:258px;height:66px;background-position:0px 0px}@else if $filename == paypal-logo-sm{width:41px;height:12px;background-position:0px -218px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin okpay-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/okpay/okpay_d8a589@2x.png');-webkit-background-size:258px 230px;-moz-background-size:258px 230px;background-size:258px 230px}@mixin okpay-sprite($filename){@include okpay-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include okpay-2x-sprite}}// okphotos_8cdc6e @mixin okphotos-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/okphotos/okphotos_8cdc6e.png);background-repeat:no-repeat;display:block;@if $filename == AlbumBG{width:62px;height:58px;background-position:0px 0px}@if $filename == Instagram-Icon{width:55px;height:55px;background-position:-62px 0px}@if $filename == PCActive{width:54px;height:50px;background-position:0px -58px}@if $filename == PC{width:54px;height:50px;background-position:-54px -58px}@if $filename == MacActive{width:54px;height:50px;background-position:-117px 0px}@if $filename == Mac{width:54px;height:50px;background-position:-117px -50px}@if $filename == DropboxActive{width:54px;height:50px;background-position:0px -108px}@if $filename == Dropbox{width:54px;height:50px;background-position:-54px -108px}@if $filename == InstagramActive{width:50px;height:50px;background-position:-108px -108px}@if $filename == Instagram{width:50px;height:50px;background-position:-171px 0px}@if $filename == FacebookActive{width:50px;height:50px;background-position:-171px -50px}@if $filename == Facebook{width:50px;height:50px;background-position:-171px -100px}@if $filename == AddIcon{width:46px;height:37px;background-position:0px -158px}@if $filename == Error{width:40px;height:40px;background-position:-221px 0px}@if $filename == Report{width:15px;height:19px;background-position:-221px -40px}@if $filename == Crop{width:19px;height:19px;background-position:-236px -40px}@if $filename == Edit{width:17px;height:17px;background-position:-221px -59px}@if $filename == Delete{width:13px;height:17px;background-position:-238px -59px}@if $filename == Lock{width:12px;height:16px;background-position:-221px -76px}@if $filename == Move{width:14px;height:10px;background-position:-233px -76px}}// profile-2013_d825e1 @mixin profile-2013-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/profile-2013/profile-2013_d825e1.png);background-repeat:no-repeat;display:block;@if $filename == play-button{width:78px;height:78px;background-position:0px 0px}@else if $filename == success-check{width:28px;height:22px;background-position:-78px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin profile-2013-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/profile-2013/profile-2013_d825e1@2x.png');-webkit-background-size:106px 78px;-moz-background-size:106px 78px;background-size:106px 78px}@mixin profile-2013-sprite($filename){@include profile-2013-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include profile-2013-2x-sprite}}// glue:0.3 hash:eded5ef861 // profile-panel_eded5e @mixin profile-panel-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/profile-panel/profile-panel_eded5e.png);background-repeat:no-repeat;display:block;@if $filename == details{width:25px;height:25px;background-position:-50px 0px}@else if $filename == like-hover{width:25px;height:25px;background-position:-25px -25px}@else if $filename == like{width:25px;height:25px;background-position:0px -25px}@else if $filename == liked{width:25px;height:25px;background-position:-25px 0px}@else if $filename == wiw{width:25px;height:25px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin profile-panel-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/profile-panel/profile-panel_eded5e@2x.png');-webkit-background-size:75px 50px;-moz-background-size:75px 50px;background-size:75px 50px}@mixin profile-panel-sprite($filename){@include profile-panel-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include profile-panel-2x-sprite}}// profile_392c48 @mixin profile-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/profile/profile_392c48.png);background-repeat:no-repeat;display:block;@if $filename == play-button{width:78px;height:78px;background-position:0px 0px}@if $filename == message-icon{width:27px;height:24px;background-position:-78px 0px}@if $filename == like-icon{width:24px;height:23px;background-position:-78px -24px}@if $filename == like-icon-active{width:24px;height:23px;background-position:-78px -47px}@if $filename == video-preview{width:22px;height:16px;background-position:0px -78px}@if $filename == questions-check{width:22px;height:22px;background-position:-105px 0px}@if $filename == questions-bang{width:22px;height:22px;background-position:-105px -22px}@if $filename == details-ellipsis{width:21px;height:6px;background-position:-105px -44px}@if $filename == match-percent{width:17px;height:17px;background-position:-105px -50px}@if $filename == see-more-arrow{width:16px;height:10px;background-position:-105px -67px}}// glue:0.3 hash:5ab3d0f289 // settings_5ab3d0 @mixin settings-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/settings/settings_5ab3d0.png);background-repeat:no-repeat;display:block;@if $filename == browse-invisibly{width:61px;height:59px;background-position:0px -46px}@else if $filename == card{width:73px;height:46px;background-position:-73px 0px}@else if $filename == paypal{width:73px;height:46px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin settings-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/settings/settings_5ab3d0@2x.png');-webkit-background-size:146px 105px;-moz-background-size:146px 105px;background-size:146px 105px}@mixin settings-sprite($filename){@include settings-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include settings-2x-sprite}}// signup-2014-simpleblue_b3d19b @mixin signup-2014-simpleblue-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/signup-2014-simpleblue/signup-2014-simpleblue_b3d19b.png);background-repeat:no-repeat;display:block;@if $filename == bird{width:104px;height:116px;background-position:-208px 0px}@else if $filename == coffee{width:104px;height:116px;background-position:-104px 0px}@else if $filename == facebook{width:12px;height:20px;background-position:0px -116px}@else if $filename == socks{width:104px;height:116px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin signup-2014-simpleblue-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/signup-2014-simpleblue/signup-2014-simpleblue_b3d19b@2x.png');-webkit-background-size:312px 136px;-moz-background-size:312px 136px;background-size:312px 136px}@mixin signup-2014-simpleblue-sprite($filename){@include signup-2014-simpleblue-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include signup-2014-simpleblue-2x-sprite}}// glue:0.3 hash:dbe411f7f8 // signup-incognito_dbe411 @mixin signup-incognito-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/signup-incognito/signup-incognito_dbe411.png);background-repeat:no-repeat;display:block;@if $filename == header{width:128px;height:130px;background-position:0px 0px}@else if $filename == icon-attention{width:94px;height:48px;background-position:-128px 0px}@else if $filename == icon-controlgame{width:59px;height:70px;background-position:0px -130px}@else if $filename == icon-ownprivacy{width:74px;height:72px;background-position:-128px -48px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin signup-incognito-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/signup-incognito/signup-incognito_dbe411@2x.png');-webkit-background-size:222px 200px;-moz-background-size:222px 200px;background-size:222px 200px}@mixin signup-incognito-sprite($filename){@include signup-incognito-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include signup-incognito-2x-sprite}}// glue:0.3 hash:d0f25a9ea1 // success-gift_d0f25a @mixin success-gift-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/success-gift/success-gift_d0f25a.png);background-repeat:no-repeat;display:block;@if $filename == arrow{width:308px;height:241px;background-position:0px -458px}@else if $filename == clouds{width:826px;height:207px;background-position:0px -116px}@else if $filename == marker{width:15px;height:24px;background-position:-944px -116px}@else if $filename == message{width:344px;height:135px;background-position:0px -323px}@else if $filename == moon{width:118px;height:129px;background-position:-826px -116px}@else if $filename == stars{width:1107px;height:116px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin success-gift-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/success-gift/success-gift_d0f25a@2x.png');-webkit-background-size:1107px 699px;-moz-background-size:1107px 699px;background-size:1107px 699px}@mixin success-gift-sprite($filename){@include success-gift-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include success-gift-2x-sprite}}// glue:0.3 hash:15b90bcbe1 // upgrade-enhanced_15b90b @mixin upgrade-enhanced-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/upgrade-enhanced/upgrade-enhanced_15b90b.png);background-repeat:no-repeat;display:block;@if $filename == attractiveness{width:55px;height:72px;background-position:0px -72px}@else if $filename == autoboost{width:55px;height:72px;background-position:-110px 0px}@else if $filename == priority{width:55px;height:72px;background-position:-55px 0px}@else if $filename == questions{width:55px;height:72px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}// glue:0.3 hash:7544be5882 // upgrade_7544be @mixin upgrade-1x-sprite($filename){background-image:url(#{$css-imagepath}media/img/sprites/upgrade/upgrade_7544be.png);background-repeat:no-repeat;display:block;@if $filename == answers{width:76px;height:65px;background-position:-152px -195px}@else if $filename == browse-invisibly{width:76px;height:65px;background-position:-76px -195px}@else if $filename == flavors{width:76px;height:65px;background-position:0px -195px}@else if $filename == kill-ads{width:76px;height:65px;background-position:-152px -130px}@else if $filename == likes-you{width:76px;height:65px;background-position:-228px -67px}@else if $filename == lookingforplus{width:76px;height:67px;background-position:-228px 0px}@else if $filename == message-filters{width:76px;height:65px;background-position:-76px -130px}@else if $filename == message-storage{width:76px;height:65px;background-position:0px -130px}@else if $filename == priority{width:76px;height:65px;background-position:-152px -65px}@else if $filename == prognosis{width:76px;height:65px;background-position:-152px 0px}@else if $filename == read-receipts{width:76px;height:65px;background-position:-76px -65px}@else if $filename == search-filters{width:76px;height:65px;background-position:0px -65px}@else if $filename == sm-answers{width:43px;height:37px;background-position:-304px -111px}@else if $filename == sm-browse-invisibly{width:43px;height:37px;background-position:-304px -74px}@else if $filename == sm-flavors{width:43px;height:37px;background-position:-304px -37px}@else if $filename == sm-kill-ads{width:43px;height:37px;background-position:-304px 0px}@else if $filename == sm-likes-you{width:43px;height:37px;background-position:-258px -260px}@else if $filename == sm-message-filters{width:43px;height:37px;background-position:-215px -260px}@else if $filename == sm-message-storage{width:43px;height:37px;background-position:-172px -260px}@else if $filename == sm-priority{width:43px;height:37px;background-position:-129px -260px}@else if $filename == sm-prognosis{width:43px;height:37px;background-position:-86px -260px}@else if $filename == sm-read-receipts{width:43px;height:37px;background-position:-43px -260px}@else if $filename == sm-search-filters{width:43px;height:37px;background-position:0px -260px}@else if $filename == sm-username{width:43px;height:37px;background-position:-228px -195px}@else if $filename == sm-visitors{width:43px;height:37px;background-position:-228px -132px}@else if $filename == username{width:76px;height:65px;background-position:-76px 0px}@else if $filename == visitors{width:76px;height:65px;background-position:0px 0px}@else{@warn "you passed a file name that does not exist in the sprite"}}@mixin upgrade-2x-sprite{background-image:url('#{$css-imagepath}media/img/sprites/upgrade/upgrade_7544be@2x.png');-webkit-background-size:347px 297px;-moz-background-size:347px 297px;background-size:347px 297px}@mixin upgrade-sprite($filename){@include upgrade-1x-sprite($filename);@media only screen and (-webkit-min-device-pixel-ratio:2.0),only screen and (min--moz-device-pixel-ratio:2.0),only screen and (-o-min-device-pixel-ratio:200/100),only screen and (min-device-pixel-ratio:2.0){@include upgrade-2x-sprite}}// ============================================================================= // okicon // ----------------------------------------------------------------------------- @mixin okicon($char){font-family:"ok-icon" !important;font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;@if $char == "instagram"{content:"i"}@if $char == "thumb-no"{content:"N"}@if $char == "list"{content:"="}@if $char == "gear"{content:"g"}@if $char == "mobi-checkmark"{content:"\005C"}@if $char == "arrow-triangle-up"{content:"W"}@if $char == "quickmatch-star"{content:"S"}@if $char == "mobi-chevron-down"{content:"{"}@if $char == "likes"{content:"1"}@if $char == "arrow-triangle-down"{content:"w"}@if $char == "back-to-top"{content:"B"}@if $char == "form-circle"{content:"o"}@if $char == "star"{content:"s"}@if $char == "messages"{content:"m"}@if $char == "close-circle"{content:"X"}@if $char == "mobi-chevron-left"{content:"["}@if $char == "boost"{content:"b"}@if $char == "photo-stack"{content:"j"}@if $char == "lock-closed"{content:"l"}@if $char == "more-arrow"{content:"2"}@if $char == "replied"{content:"R"}@if $char == "ellipsis-v"{content:"E"}@if $char == "form-square"{content:"n"}@if $char == "globe"{content:"3"}@if $char == "arrow-triangle-right"{content:"A"}@if $char == "camera"{content:"k"}@if $char == "arrow-left"{content:"<"}@if $char == "refresh"{content:"r"}@if $char == "link"{content:"#"}@if $char == "tag"{content:"5"}@if $char == "arrow-down"{content:"v"}@if $char == "ellipsis-h"{content:"e"}@if $char == "events"{content:"C"}@if $char == "pc"{content:"Q"}@if $char == "close"{content:"x"}@if $char == "maximize"{content:"+"}@if $char == "mobi-chevron-up"{content:"}"}@if $char == "trash"{content:"T"}@if $char == "report"{content:"P"}@if $char == "arrow-right"{content:">"}@if $char == "browse"{content:"h"}@if $char == "pencil"{content:"p"}@if $char == "arrow-up"{content:"^"}@if $char == "dropbox"{content:"d"}@if $char == "visitors"{content:"V"}@if $char == "arrow-triangle-left"{content:"a"}@if $char == "okc-app-icon"{content:"O"}@if $char == "checkmark"{content:"c"}@if $char == "mobi-chevron-right"{content:"]"}@if $char == "twitter"{content:"t"}@if $char == "facebook-inverted"{content:"F"}@if $char == "magnifier"{content:"q"}@if $char == "alert"{content:"!"}@if $char == "star-mutual"{content:"M"}@if $char == "facebook"{content:"f"}@if $char == "thumb-yes"{content:"Y"}@if $char == "lock-open"{content:"L"}@if $char == "less-arrow"{content:"@"}@if $char == "id-badge"{content:"4"}@if $char == "minimize"{content:"-"}}// ============================================================================= // Actual mixins // ----------------------------------------------------------------------------- // ============================================================================= // Font mixins // ----------------------------------------------------------------------------- // Open Sans @mixin open-sans{font-family:'Open Sans',sans-serif}@mixin open-sans-light{font-weight:300;@include open-sans}@mixin open-sans-semibold{font-weight:600;@include open-sans}@mixin open-sans-bold{font-weight:700;@include open-sans}// Helvetica @mixin helvetica{font-family:Helvetica Neue,Helvetica,Arial,sans-serif}@mixin font-brandon-bold{font-weight:400;-webkit-font-smoothing:antialiased;font-family:'brandon-grotesque','Open Sans',sans-serif}// ============================================================================= // Where the images at // ----------------------------------------------------------------------------- $css-imagepath:"//cdn.okccdn.com/";// ============================================================================= // Retina sprites // ============================================================================= $retinaRatio:'1.25';$retinaQuery:"(min--moz-device-pixel-ratio:#{$retinaRatio}),(-o-min-device-pixel-ratio:#{$retinaRatio}/2),(-webkit-min-device-pixel-ratio:#{$retinaRatio}),(min-device-pixel-ratio:#{$retinaRatio}),(min-resolution:#{$retinaRatio}dppx)";// $image is the path to the 2x spritesheet. Should already be run thru url(''). // $width and $height are the dimensions of the original sprite sheet. @mixin image-2x($image,$width,$height){@media #{$retinaQuery}{// on retina,use image that's scaled by 2 background-image:$image;background-size:$width $height}}// ============================================================================= // Reusable retina icons // ============================================================================= @mixin into-you-icon{@include box-sizing(border-box);position:relative;display:block;width:40px;height:40px;border:2px solid $Colors-orange-2;border-radius:100%;color:$Colors-orange-2;text-align:center;@include type(18px,39px)}// ============================================================================= // Ellipsis // ----------------------------------------------------------------------------- @mixin ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis}// ============================================================================= // Opacity // ----------------------------------------------------------------------------- @mixin opacity($opacity){filter:unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");opacity:$opacity}// ============================================================================= // Calc // ----------------------------------------------------------------------------- @mixin calc($property,$expression){#{$property}:-moz-calc(#{$expression});#{$property}:-webkit-calc(#{$expression});#{$property}:calc(#{$expression})}// ============================================================================= // OkForm // ----------------------------------------------------------------------------- // Mixin to set the width of custom selects. // Apply it to the container added by OkForm (#seletidContainer). @mixin select-size($size){width:$size;.chosen-container{width:100% !important}}// ============================================================================= // Arrow // ----------------------------------------------------------------------------- @mixin arrow($direction,$size,$color,$borderWidth:'none',$borderColor:#FFF){@if ($borderWidth != 'none'){&:after,&:before{right:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}}&:after{right:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;@if ($borderWidth != 'none'){}}&:after{border-color:rgba(136,183,213,0);border-right-color:#88b7d5;border-width:30px;top:50%;margin-top:-30px}}// ============================================================================= // Various // ----------------------------------------------------------------------------- // center an object of known width @mixin center($width,$position:relative){position:$position;left:50%;width:$width;margin-left:$width * -0.5}// Vertically and horizontally center things @mixin vertically-center($height,$position:relative,$etc:0px){height:$height;position:$position;bottom:50%;margin-bottom:-($height/2 + $etc)}// Vertically and horizontally center things @mixin vertically-center-top($height,$position:relative,$etc:0px){height:$height;position:$position;top:50%;margin-top:-($height/2 + $etc)}// similar to above,but better @mixin vertical-align{position:relative;top:50%;@include transform(translateY(-50%))}// fade in/out an element then toggle its visibility // - direction:hide or show // - time:transition time in ms // - delay (optional):how long before the transition kicks in @mixin fade-and-hide($direction,$time,$delay:0ms){// cast time as milliseconds $time:$time + 0ms;$delay:$delay + 0ms;@if $direction == hide{opacity:0;visibility:hidden;@include transition(opacity $time ease $delay,visibility 0ms linear $time + $delay + 100)}@if $direction == show{opacity:1;visibility:visible;@include transition(visibility 0ms linear,opacity $time ease $delay + 10ms)}}@mixin type($font-size,$line-height){font-size:$font-size;line-height:$line-height}@mixin filter($filter){-webkit-filter:$filter;-moz-filter:$filter;-ms-filter:$filter;-o-filter:$filter;filter:$filter}// add the word-wrap mixin from newer bourbon @mixin word-wrap($wrap:break-word){word-wrap:$wrap;@if $wrap == break-word{overflow-wrap:break-word;word-break:break-all}}// size a carousel component @mixin carousel($slide-width,$slide-height,$slide-padding){.carousel_rotator{width:$slide-width;height:$slide-height - $slide-padding * 2;padding:$slide-padding}.slide{width:$slide-width;height:$slide-height}.controls{.carousel_next,.carousel_prev{height:$slide-height;line-height:$slide-height}}}// used for most any element that hovers over content $S-global-shadow-color:rgba(0,17,53,0.16);$S-global-shadow-triangle-color:rgba(0,17,53,0.1);@mixin global-shadow-style{box-shadow:0 0 0 1px $S-global-shadow-color,0 0 5px 0 $S-global-shadow-color}@mixin global-shadow-triangle($dir,$size:20px){position:absolute;content:"";@include triangle($size,#FFF,$dir);@if $dir == 'down'{left:50%;margin-left:-($size / 2);bottom:-$size;@include filter(drop-shadow(0 1px 0 $S-global-shadow-color) drop-shadow(0 1px 1px $S-global-shadow-triangle-color))}@if $dir == 'up'{left:50%;margin-left:-($size / 2);top:-$size;@include filter(drop-shadow(0 -1px 0 $S-global-shadow-color) drop-shadow(0 -1px 1px $S-global-shadow-triangle-color))}@if $dir == 'right'{top:50%;margin-top:-($size / 2);right:-$size;@include filter(drop-shadow(1px 0 0 $S-global-shadow-color) drop-shadow(1px 0 1px $S-global-shadow-triangle-color))}@if $dir == 'left'{top:50%;margin-top:-($size / 2);left:-$size;@include filter(drop-shadow(-1px 0 0 $S-global-shadow-color) drop-shadow(-1px 0 1px $S-global-shadow-triangle-color))}}// ============================================================================= // Vendor prefixes for shimmer // ----------------------------------------------------------------------------- ///@mixin vendor($prop,$ars){// -webkit-#{$prop}:$args;// -moz-#{$prop}:$args;// #{$prop}:$args;//}@mixin bg-vendor($args){background:-webkit-gradient($args);background:-moz-gradient($args);background:gradient($args)}// bare button @mixin bare-button(){background:transparent;border:0;padding:0;cursor:pointer}// same styles as normal links (use this to quickly style buttons like links) @mixin basic-link(){display:inline;text-decoration:none;outline:none;color:$Colors-blue-2;&:hover{color:$Colors-blue-3}&:active{color:$Colors-blue-4}}// incognito carousel helper @mixin incognito-carousel($width-slide,$height-slide,$count-slide,$size-nav-dot,$size-nav-padding){// slides // ----------------------------------------------------------------------------- .incognito-modal-carousel{overflow:hidden;height:$height-slide;margin-bottom:16px}.incognito-modal-slides{width:$width-slide*$count-slide;height:$height-slide;@include transition-property(transform,margin-left);@include transition-duration(300ms);@include transition-timing-function(ease-in-out)}.incognito-modal-slide{float:left;width:$width-slide;height:$height-slide}// nav // ----------------------------------------------------------------------------- $size-nav:$size-nav-dot + $size-nav-padding*2;.incognito-modal-carousel-nav{width:$size-nav*$count-slide;margin:0 auto}.incognito-modal-carousel-nav-button{display:block;float:left;width:$size-nav;height:$size-nav;padding:$size-nav-padding;@include bare-button;&:before{content:"";display:block;background:$Colors-blue-1;width:$size-nav-dot;height:$size-nav-dot;border-radius:$size-nav-dot/2;margin:0 auto}&:hover{&:before{background:$Colors-blue-4}}}// positioning // ----------------------------------------------------------------------------- @for $i from 0 through ($count-slide - 1){.incognito-modal-carousel-nav.incognito-modal-slide-#{$i}{.incognito-modal-carousel-nav-button[data-index="#{$i}"]:before{background:#fff}}.incognito-modal-carousel.incognito-modal-slide-#{$i}.incognito-modal-slides{@include transform(translateX(-$width-slide*$i))}}}// ============================================================================= // Styling for html-only inputs // ----------------------------------------------------------------------------- @mixin input-colors($text,$text-selected,$background,$border,$border-focused,$background-selected,$border-selected,$border-hover,$border-checked-hover,$decoration-selected){// common styles ///////////////////////////////////////////////////////////////////////////// // due to some layout issues when checkbox wrappers have percentage widths,// move the decoration one pixel to the right and the wrapper one pixel to // the left to compensate .radio-wrapper,.checkbox-wrapper{display:inline-block;position:relative;right:1px;overflow:hidden;padding-left:23px;@include type(14px,18px);color:$Colors-gray-3;input{position:absolute;top:0;left:-200px}.decoration{position:absolute;top:1px;left:1px;border-width:1px;border-style:solid}}// checkboxes ////////////////////////////////////////////////////////////////////////////// .checkbox-wrapper{$checkbox-size:14px;.decoration{width:$checkbox-size;height:$checkbox-size;border-radius:2px;@include transition(border-color,75ms,linear)}// checked state input:checked ~ .decoration:after{position:absolute;top:1px;left:0;width:100%;text-align:center;@include okicon("checkmark");@include type(10px,10px);color:$Colors-blue-3}}// radios ////////////////////////////////////////////////////////////////////////////// .radio-wrapper{// must be even,or else the dot's going to look uncentered $radio-size:16px;.decoration{width:$radio-size;height:$radio-size;border-radius:50%}// selected state $dot-size:$radio-size * 0.5;input:checked ~ .decoration:after{content:" ";display:block;position:absolute;top:50%;left:50%;margin-top:$dot-size * -0.5;margin-left:$dot-size * -0.5;width:$dot-size;height:$dot-size;border-radius:50%;background:$Colors-blue-3}}// colors ///////////////////////////////////////////////////////////////////////////// .radio-wrapper,.checkbox-wrapper{color:$text;.decoration{border-color:$border;background:$background}// disabled state input:disabled ~ .decoration,input:disabled ~ .checkbox-text{opacity:0.5}// keyboard focus input:focus ~ .decoration{border-color:$border-focused}// checked state input:checked ~ .checkbox-text{color:$text-selected}input:checked ~ .decoration{background:$background-selected;border-color:$border-selected}// hover states &:hover{// hover when not disabled input:enabled ~ .decoration{border-color:$border-hover}// hover when not disabled and checked input:enabled:checked ~ .decoration{border-color:$border-checked-hover}}// checkbox checked &.checkbox-wrapper input:checked ~ .decoration:after{color:$decoration-selected}// radio selected &.radio-wrapper input:checked ~ .decoration:after{background:$decoration-selected}}}// That's it! (Don't delete this,it enforces a line break at the end) // That's it! (Don't delete this,forces a linebreak.) // Global stuff body{background:$S-color-body-bg}// super secret stuffs @include keyframes(specialmode-bg){0%{background-color:$S-color-body-bg}25%{background-color:#ffe36c}75%{background-color:$Colors-pink-1}100%{background-color:$S-color-body-bg}}@include keyframes(specialmode-shadow){0%{box-shadow:0 0 0 2px $S-color-body-bg}25%{box-shadow:0 0 0 2px #ffe36c}75%{box-shadow:0 0 0 2px $Colors-pink-1}100%{box-shadow:0 0 0 2px $S-color-body-bg}}body.specialmode{&,#navigation{@include animation(specialmode-bg 800ms linear 0s infinite)}#navigation .nav-notifications .badge{@include animation(specialmode-shadow 800ms linear 0s infinite)}}body.mac.webkit *{text-rendering:optimizeLegibility}body,input,button,textarea{// write out the font family here,because we want @include open-sans to do nothing // (so we don't write the font family everywhere) font-family:'Open Sans',sans-serif;font-weight:normal;color:$S-color-page-text;@include type(15px,22px)}::selection{color:#fff !important;background-color:$Colors-blue-4 !important}::-moz-selection{color:#fff;background-color:$Colors-blue-4 !important}strong{@include open-sans-semibold}a{@include basic-link}// use semibold on headings,not bold h1,h2,h3,h4,h5,h6{@include open-sans-semibold}h2{@include okc-h2}// pretty-printing span.pretty_print{font-family:"courier new";font-size:13px}span.print_block{display:block;padding:0 0 0 32px}.hidden{display:none !important}.opacity_20{opacity:0.2}.opacity_40{opacity:0.4}.opacity_50{opacity:0.5}.opacity_60{opacity:0.6}.opacity_80{opacity:0.8}ul{list-style:none}// ============================================================================= // Global stuff only,please! // Only put something here if it's used in more than one section! // ----------------------------------------------------------------------------- *{@include box-sizing(border-box)}.monolith{margin-left:$S-gutter;margin-right:$S-gutter}.page-section{width:$S-width-page;margin:0 auto}.page-left{width:$S-width-page-left;float:left}.page-right{width:$S-width-page-ad;float:right;.page-right-block{margin-bottom:$S-gutter-right;.okad{margin:0;padding:0}// if the block is the second aside in a row,lop off some margin &.grayaside + .grayaside{margin-top:-40px}// ditto if it's an upgrade ad &.upgrade_ad + *{margin-top:-30px}}}// ============================================================================= // As of April 2016 "fullwidth" is the new canonical layout. // ----------------------------------------------------------------------------- $fw--site-max-width:940px;$fw--sidebar-width:300px;$fw--h-gutter:60px;$fw--v-gutter:50px;body.fullwidth{#page,#navigation,#leaderboard_container{min-width:910px}}body.fullwidth #page{padding-top:$S-height-nav;width:100%;// Winning the specificity battle,a.k.a. why we shouldn't style with IDs. #main_content{background:$Colors-gray-8;border-radius:0;padding-bottom:0}.page{&-restrict{margin:0 auto;max-width:$fw--site-max-width + ($fw--h-gutter * 2);padding-left:$fw--h-gutter;padding-right:$fw--h-gutter;@media (max-width:1000px){max-width:$fw--site-max-width + ($fw--h-gutter);padding-left:$fw--h-gutter / 2;padding-right:$fw--h-gutter / 2}}&-section{width:100%}&-content{width:100%}&-featured{color:$Colors-gray-7;background-color:$Colors-blue-1;padding-bottom:$fw--v-gutter / 2;padding-top:$fw--v-gutter}&-content{padding-bottom:$fw--v-gutter;padding-top:$fw--v-gutter;position:relative;&::after{clear:both;content:"";display:table}}&-main,&-aside{float:left}&-main{padding-left:0;padding-right:$fw--h-gutter;@include calc(width,"100% - #{$fw--sidebar-width}");@media (max-width:1000px){padding-right:$fw--h-gutter / 2}}&-aside{width:$fw--sidebar-width;&-block{margin-bottom:57px}}}// For some reason SCSS wasn't working well when doing sibling // selectors with ampersands,so I broke this out into another // section. .page-aside ~ .page-main{padding-left:$fw--h-gutter;padding-right:0}$fw--copyright-width:130px;footer.page-section{background-color:$Colors-blue-1;padding:20px 0;#footer{margin:0 auto;max-width:$fw--site-max-width;padding-left:$fw--h-gutter;padding-right:$fw--h-gutter;padding-top:0;padding-bottom:0;@include box-sizing(content-box);&_nav{padding:0;@include calc(width,"100% - #{$fw--copyright-width}");li{display:inline-block;float:none}}#copyright{float:none;padding:0}&::after{content:none}}}}// Solves a layout bug when the boost panel is open. body.fullwidth.boost-shown #page .page-left-inner{min-width:auto}// IE11 is a real piece of shit and doesn't interpret some HTML5 els as block. // Fuck IE11. article,aside,details,dialog,figure,header,footer,main,nav,section,summary{display:block}#global_js_errors{height:0;overflow:hidden}.clearfix{@include clearfix}font[color="red"]{display:none}// Rolling numbers .rollingnumber{display:block;overflow:hidden;position:relative;.comma,.digit{position:absolute;display:block;@include transition(margin 0s)}.digit{.prev,.curr,.next{display:block}}}// Sidebar and Nav // vars $height-user-thumb:40px;$height-notification-badge:22px;$height-notification-icon:50px;$height-notification-border:2px;$height-usermenu-padding:15px;$height-usermenu-item:50px - $height-usermenu-padding*2;$width-notification:62px;$width-user-menu:200px;$user-menu-radius:2px;$color-active:#fff;$color-nav-bg:$S-color-body-bg;$color-user-menu-bg:#fff;$color-notification-normal:$Colors-blue-3;$color-notification-pink:$Colors-red-2;$color-nav-link:#d6e1f9;$color-nav-hover:#fff;$color-nav-active:#9dbaf2;// structure #navigation{// minwidth is set in the boosts structure file height:$S-height-nav + 1;// 1 for border background:$color-nav-bg;border-bottom:1px solid rgba(255,255,255,.1);position:absolute;top:0;left:0;right:0;z-index:$Z-header-bar;.nav-left,.nav-right{> *{float:left}}// These are absolutely positioned so that they never wrap .nav-left,.nav-right{position:absolute}.nav-left{// there should be one gutter's worth of margin // and there's already 15px of padding on the logo left:0;padding-left:$S-gutter - 15px}.nav-right{// there should be one gutter's worth of margin // and there's already 12px of margin on the other stuff right:0;padding-right:$S-gutter - 12px;// For if it has to cover nav-left,when they get too close. background:$color-nav-bg;box-shadow:-15px 0 10px -5px $color-nav-bg}&.fixed{position:fixed}}// when the onboarding windowshade is up,modify the z-indices of menus body.okc2014_onboarding{#navigation,.nav-user-menu{z-index:$Z-okpopovers + 1}#nav-notifications-tooltip{z-index:$Z-okpopovers + 2}}// logo #logo{a{// help the blank text disappear position:relative;display:block;overflow:hidden;height:$S-height-nav;padding-top:15px;padding-right:12px;padding-left:15px;.icon{display:block;width:60px;height:41px;@include okc2014-sprite(logo)}.text{position:absolute;display:block;text-indent:-9999px}}}// navigation .nav-item{li{float:left}a{position:relative;display:block;color:$color-nav-link;&:hover{color:$color-nav-hover}&:active{.text,.glyph{opacity:.5}}}}.logged-out-tagline{margin-left:10px;@include type(16px,$S-height-nav);color:$Colors-blue-5}// ============================================================================= // text navigation // ----------------------------------------------------------------------------- $offset-top:4px;.nav-links{a{padding:$offset-top 23px 0;@include type(16px,$S-height-nav - $offset-top)}}// notifications .nav-notifications{// pull this over 3px,for whatever reason. margin-right:-3px;a{color:$Colors-blue-4;// help the text get hidden position:relative;width:$width-notification;// make this a little less tall,so people don't accidentally click on this height:$S-height-nav - 5px;&:hover{color:$Colors-blue-5}.text,.glyph,.okicon{display:block}.text{position:absolute;top:0;text-indent:-9999px}.glyph{// the top padding is supposed to be the nav height minus the notification height,// but that's an odd number,so let's just cut to the chase:it's 7. // but if you need it again:($S-height-nav - $height-notification-icon)/2 $padding-left:($width-notification - $height-notification-icon)/2;padding:7px $padding-left}.okicon{position:relative;width:$height-notification-icon;height:$height-notification-icon;line-height:$height-notification-icon;font-size:28px;text-align:center;&.i-visitors{font-size:28px;left:-4px;top:1px}&.i-likes{font-size:35px;left:-3px;top:1px}&.i-messages{font-size:29px;top:3px;left:-1px}}}.badge{position:absolute;// top and left are straight outta the PSD! top:11px;left:34px;// Top padding instead of line height for better cross-browser performance. padding-top:4px;padding-left:6px;padding-right:6px;height:$height-notification-badge;border-radius:$height-notification-badge/2;min-width:$height-notification-badge;color:#fff;background:$color-notification-normal;font-family:Helvetica,Arial,sans-serif;text-align:center;// use box shadow for this thing;borders will intrude into the el due to // border-box box-shadow:0 0 0 $height-notification-border $color-nav-bg;@include type(12px,normal);@include transition(background 100ms ease-in,color 100ms ease-in);// the type in here is very finicky,so do a bunch of shit // to make it look passable in each browser. body.firefox &{padding-top:6px}body.windows.ie7 &,body.windows.ie8 &,body.windows.ie9 &,body.windows.ie10 &,body.windows.ie11 &,body.windows.safari &{padding-top:5px}&.pink{background:$color-notification-pink}// add some opening flair &.entering{background:$Colors-pink-1;@include animation(pop-open 250ms 1)}// add some flair when the thing is incrementing &.incrementing{background:$Colors-pink-1;@include animation(pulse 250ms 1)}}// When a nav item is disabled. Admin only. li.locked a,li.locked a:hover{pointer-events:none}}// user_menu $right-offset:22px;$x-offset:$width-user-menu - $right-offset;.nav-user{float:left;position:relative;&.nav-user-menu-shown{.nav-user-menu{opacity:1;visibility:visible;@include transform(scale(1));@include transition(opacity 200ms ease,transform 150ms ease)}}}.nav-user-image{height:$S-height-nav - 5px;position:relative;display:block;padding:13px 12px 0;.text{position:absolute;top:-500px}.nav-user-image-thumb{border-radius:$height-user-thumb/2;overflow:hidden;width:$height-user-thumb;height:$height-user-thumb;position:relative;@include transition(box-shadow 100ms ease);&,img{display:block}img{width:$height-user-thumb + 2;height:$height-user-thumb + 2;margin-left:-1px;margin-top:-1px}}}.nav-user-menu{position:absolute;top:$S-height-nav + 6px;right:2px;background:$color-user-menu-bg;width:$width-user-menu;border-radius:$user-menu-radius;z-index:$Z-user-menu;@include global-shadow-style;@include transform(translateZ(0));opacity:0;visibility:hidden;@include transform(scale(0.97));@include transform-origin($x-offset 0);@include transition(opacity 100ms ease,transform 100ms ease,visibility 0ms 100ms ease);$triangle-size:16px;&:before{content:"";position:absolute;right:$right-offset;top:-$triangle-size;@include triangle($triangle-size,$color-user-menu-bg,up);// use filters to cheat a top border on the triangle @include filter(drop-shadow(0 -1px 0 $S-global-shadow-color))}li{@include clearfix;// fake the border with pseudoelements so that the links can span the // entire width of the li,and the border can be less wide &:before{content:" ";display:block;position:relative;margin:0 15px;height:1px;background:$Colors-gray-6}.nav-user-menu-item{display:block;padding:$height-usermenu-padding 21px;color:$Colors-gray-2;min-height:$height-usermenu-item;@include type(15px,$height-usermenu-item + 1);&:hover{color:$Colors-blue-3}}&:first-child{&:before{display:none}}&:last-child .nav-user-menu-item{min-height:$height-usermenu-item + 2;line-height:$height-usermenu-item - 1}&.upgrade{&:before{display:none}.nav-user-menu-item{background:$Colors-green-2;color:#fff;@include border-bottom-radius($user-menu-radius);&:hover{background:$Colors-green-3;color:#fff}}}}}// an upload button appears if they have no photos and no onboarding. // the html is in templates/okc2014/boost.html because it makes more sense there. .nav-addphoto{$width-padding:($S-height-nav - $S-height-input)/ 2;$width-padding-left:18px;padding:$width-padding;padding-left:$width-padding-left;button.flatbutton{font-size:14px;width:86px;text-align:center;// german is wide body.lang-de &{width:140px}}}// loggedout .nav-signup{margin-right:12px;.flatbutton{float:left;margin-left:10px;margin-top:($S-height-nav - 42)/2;width:100px;height:40px;border-radius:3px;// special one-off for silver buttons in the header &.silver{border-color:transparentize(white,0.65);&,&:hover{color:#fff}}}}// structure $color-user-menu-bg:#fff;$color-boost-menu-bg:#052f6a;$width-boost-menu:250px;$width-page-de:1090px;// the page and headerbar have a min-width that increases when the boost panel // is on screen (so that the headerbar doesn't overflow) #page,#leaderboard_container,#navigation{min-width:$S-width-wrapper;@include transition-property(padding-right,min-width);@include transition-duration($S-time-panel-open);@include transition-timing-function(ease)}#navigation .nav-right{@include transition(right $S-time-panel-open ease)}// german is a long language body.lang-de #page{min-width:$width-page-de}body.boost-shown{#page,#navigation{min-width:$S-width-wrapper + $S-width-boost-panel;padding-right:$S-width-boost-panel}#navigation .nav-right{right:$S-width-boost-panel}// german shit &.lang-de #page{min-width:$width-page-de + $S-width-boost-panel}// profile action bars (and other fixed-position stuff) needs to be adjusted too #action_bar{margin-left:-($S-width-boost-panel + $S-width-page)/2}.nav-boost{width:0}.panel-boost{width:$S-width-boost-panel;height:100vh;overflow:visible}}// navigation $width-boost-padding:($S-height-nav - $S-height-input)/ 2;$width-boost-padding-left:18px;// .nav-boost == #boosts .nav-boost{@include transition(width $S-time-panel-open ease);.nav-boost-container{position:relative;padding:$width-boost-padding;padding-left:$width-boost-padding-left}button.flatbutton{font-size:14px;width:86px;text-align:center;.okicon{font-size:20px;vertical-align:middle;// move over 3px margin-left:-3px}&.rushhour{box-shadow:0 0 14px $Colors-teal-1;background-color:$Colors-teal-3;background-image:url('//cdn.okccdn.com/media/img/icons/usernav/rush_hour_bg.gif')}}}// modal $modal-width:720px;$modal-subs-height:472px;$modal-pkgs-height:422px;$width-toggle:146px;#boost_purchase_modal{padding:0;background:white;width:$modal-width;height:$modal-pkgs-height;border:0;overflow:hidden;border-radius:8px;h2.title{margin-bottom:20px}.content{margin:0}.boostcontent{position:relative;overflow:hidden;float:left;width:362px;height:$modal-pkgs-height;background:$Colors-blue-3;color:white;.boosticon{margin:38px 0 17px 65px;width:216px;height:195px;@include illustration('boost','large','dark')}h2{color:white;font-size:24px;line-height:34px;font-weight:300;padding-bottom:16px}p{padding-left:$S-gutter + 2;padding-right:$S-gutter + 2;@include type(16px,24px);@include helvetica}}.boostinfo{width:380px}.selectboosts{width:$width-toggle * 2 + 3;margin:30px 0 0 $S-gutter + 2;display:block;float:left;.boost-select-form{.boost-select-list{text-align:left;$padding-top-label:32px;$padding-left-label:60px;label{display:block;padding:$padding-top-label 0;padding-left:$padding-left-label;background:#fff;margin:0;color:$Colors-gray-3;border-radius:4px;border-bottom:1px solid $Colors-gray-7;@include type(16px,24px);@include helvetica;strong{color:$Colors-gray-1}.icon{top:50%;margin-top:(-19px/2);left:21px}&.checked{box-shadow:inset 0 0 0 2px $Colors-blue-4}}}.boost-buy{width:180px;margin-top:26px;margin-bottom:14px}.boost-cancel{display:block;text-align:center;color:$Colors-gray-3;&:hover{color:$Colors-gray-4}}}}&.five_x_more,&.fifteen_minutes{width:694px;height:410px;.boostcontent{height:410px;width:404px;.boosticon{margin:31px 0 22px 89px;width:208px;height:178px;background-size:contain;@include illustration('boost','large','dark')}h2{line-height:30px;margin-bottom:9px}}.selectboosts{width:240px;margin:30px 0 0 25px}}&.fifteen_minutes{.boostcontent .boosticon{margin:45px 0 35px 89px}}}// With subscription play // ----------------------------------------------------------------------------- #boost_purchase_modal.selectboosts--withsubs{width:720px;height:$modal-subs-height;@include clearfix;.boostcontent{width:363px;height:$modal-subs-height;h2{font-weight:400;padding-bottom:18px}}body.lang-de &{&,.boostcontent{height:510px}}// icons .boosticon{&.boosticon-pkgs{margin-top:44px;margin-left:62px;margin-bottom:40px}&.boosticon-subs{$boosticon-root:"#{$css-imagepath}media/img/boostsubs";$boosticon-width:221px;$boosticon-height:195px;$boosticon-url:url("#{$boosticon-root}/1x/illustration-large.png");$boosticon-url2x:url("#{$boosticon-root}/2x/illustration-large.png");margin:44px 0 40px 57px;width:$boosticon-width;height:$boosticon-height;background:$boosticon-url top left no-repeat;@include image-2x($boosticon-url2x,$boosticon-width,auto)}}// adjust toggler .selectboosts-type{display:none;position:relative;height:$S-height-input;border:1px solid $S-color-page-border;width:$width-toggle*2 + 2px;border-radius:2px;overflow:hidden;margin-bottom:$S-gutter;@include clearfix;.selectboosts-type-option{@include bare-button;margin:0;position:absolute;top:0;width:$width-toggle;line-height:$S-height-input - 2;&.selectboosts-type-pkgs{left:0;border-right:1px solid $S-color-page-border}&.selectboosts-type-subs{right:0}}}// only show the toggler if we're showign promos &.selectboosts--showsubpromo{.selectboosts{.boost-select-form .boost-select-list label{padding-top:26px;padding-bottom:26px}}.selectboosts-type{display:block}}// ENABLED &.selectboosts--subs .selectboosts-type-subs,&.selectboosts--pkgs .selectboosts-type-pkgs{color:$Colors-gray-2;&:hover{background:inherit;color:$Colors-gray-2;cursor:default}}// DISABLED &.selectboosts--subs .selectboosts-type-pkgs,&.selectboosts--pkgs .selectboosts-type-subs{background:$Colors-gray-7;color:$Colors-gray-4;&:hover{background:$Colors-gray-6;color:$Colors-gray-3}}&.selectboosts--subs{.selectboosts-item--subs{display:block}.selectboosts-item--pkgs{display:none}}&.selectboosts--pkgs{.selectboosts-item--subs{display:none}.selectboosts-item--pkgs{display:block}}}// Boosts sub confirmation // ----------------------------------------------------------------------------- .modal.boosts-success{width:467px;margin-top:100px;.heading{font-weight:400;color:#fff;background:$Colors-blue-3;@include type(24px,108px)}.boosts-success-head{padding-bottom:0;font-weight:400;margin-bottom:25px;@include type(24px,36px)}.buttons{margin-top:33px;margin-bottom:12px;.flatbutton{width:180px}}}.boosts-success-list{margin-left:38px;margin-right:50px}.boosts-success-list-item{position:relative;text-align:left;padding-left:28px;padding-bottom:27px;@include type(18px,27px);&:before{display:block;position:absolute;top:7px;left:0;color:$Colors-green-2;@include type(18px,18px);@include okicon("checkmark")}}// carousel styling $slide-width:363px;.selectboosts-item--carousel{position:relative;overflow:hidden;width:$slide-width;.selectboosts-item--slides{@include clearfix;position:relative;@include transition(left 200ms ease-in-out);// set slide widths for a reasonable number of slides @for $i from 0 through 10{// set the widths for the container &.selectboosts-item--slides-#{$i}{width:$slide-width * $i}// set the container's offset for each active position &.selectboosts-item--active-slide-#{$i}{left:$slide-width * $i * -1}}}.selectboosts-item--slide{float:left;width:$slide-width}.selectboosts-item--slide-controller{margin-top:13px}.selectboosts-item--slide-controller-button{@include bare-button;position:relative;overflow:hidden;display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:5px;background:$Colors-blue-7;&.active,&:hover{background:#fff}&:first-child{margin-left:0}.reader-text{position:absolute;top:0;left:500px}}}// Single boost sitch // ----------------------------------------------------------------------------- #boost_purchase_modal.selectboosts--single.selectboosts--subs{.boostcontent h2{padding-top:20px}.selectboosts .boost-select-form{.boost-select-intro{margin:0 10px;@include type(16px,24px);@include helvetica}.boost-select-list label.boost-select-list-single{position:relative;text-align:center;padding:20px 0;margin-top:34px;margin-bottom:21px;.boost-select-list-single-text{font-weight:500;color:$Colors-gray-2;@include type(16px,19px)}.boost-select-list-single-price{font-weight:100;display:block;color:#717986;margin-left:-5px;@include type(32px,39px)}.best-value-flag{top:9px;padding-left:10px;padding-right:13px}}}}// panel // ============================================================================= // Structure // ----------------------------------------------------------------------------- $color-background:#002251;$color-highlight:#6cd0d9;.panel-boost{position:fixed;top:0;bottom:0;right:0;// hide overflow overflow:hidden;// start at width 0,and expand to full width width:0;background:$color-boost-menu-bg;@include transition(width $S-time-panel-open ease);.boost-controller{width:$S-width-boost-panel}.boost-state{display:none}#boosts.confirming & .boost-confirming,#boosts.running & .boost-running,#boosts.reporting & .boost-report{display:block}}// ============================================================================= // Common stuff // ----------------------------------------------------------------------------- .boost-state{text-align:center}// ============================================================================= // Timer // ----------------------------------------------------------------------------- .boost-timer{position:relative;margin:14px auto 0;width:90px;padding:0 10px;height:40px;white-space:nowrap;// make the line height a little smaller,since digits sit low line-height:38px;text-align:left;background:$color-background;border-radius:3px;.icon,.boost-timer-clock{// top seems to be the easiest way to align,I think because they share lineheight vertical-align:top;display:inline-block}.icon{color:$color-highlight;display:inline-block;font-size:20px;// fuck okicon's line height &:before{line-height:inherit}}.boost-timer-clock,&.boost-timer-starting{color:#fff;white-space:nowrap}&.boost-timer-starting{text-align:center}}.boost-progress{margin:19px auto 0;width:150px;background:$color-background;&,.bar{height:3px;border-radius:1.5px}.bar{display:block;background:$color-highlight}}.boost-timer-bonus{display:block;position:absolute;left:-75px;top:50%;margin-top:-15px;width:60px;height:30px;padding:0 10px;background:#00133d;color:$color-highlight;border-radius:3px;white-space:nowrap;visibility:hidden;opacity:1;@include type(13px,30px);@include transition(opacity 0ms ease-in,visibility 0ms ease-in);.tail{// 8px is the height of the triangle position:absolute;right:-8px;top:50%;margin-top:-8px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid #00133d}#boosts.hasbonus &{visibility:visible;opacity:1;@include transition(opacity 100ms ease-in,visibility 0s ease-in)}}// ============================================================================= // Viewers // ----------------------------------------------------------------------------- .boost-running-viewers,.boost-report-viewers{margin:27px 0 17px;font-size:13px;color:#fff}// ============================================================================= // Person field // ----------------------------------------------------------------------------- $width-thumb:35px;$width-gutter:10px;$num-thumbs-across:4;.boost-running-people{width:($width-thumb + $width-gutter) * $num-thumbs-across;margin:17px auto 0;.match{float:left;margin:0 ($width-gutter/2) $width-gutter;opacity:1;&,img{display:block;width:$width-thumb;height:$width-thumb}img{color:#142d69;background:#051950;border-radius:50%;@include transition(opacity 100ms ease-in)}&.new{@include animation(pop-open 300ms 1)}&.hid{display:none}}}// ============================================================================= // Report // ----------------------------------------------------------------------------- .boost-report-actions{.boost-report-buttons{margin-top:24px}button{display:block;margin:0 auto}.boost-report-reactivate{width:130px;text-align:left;padding:0 24px;.icon{display:inline-block;font-size:20px;vertical-align:middle;margin-left:-5px}}.boost-report-close{height:40px;line-height:40px;color:$Colors-blue-4;margin-top:10px;@include bare-button;&:hover{color:$Colors-blue-5}}}// ============================================================================= // Admin // ----------------------------------------------------------------------------- .boost-running-cancel{position:absolute;top:29px;right:27px;@include bare-button;height:10px;width:10px;border-radius:50%;background:rgba(255,255,255,.2)}// ============================================================================= // Subs promo // ----------------------------------------------------------------------------- $boosticon-root:"#{$css-imagepath}media/img/boostsubs";.boost-subspromo{display:none;margin:20px 28px 0;padding-top:148px;$boosticon-url:url("#{$boosticon-root}/1x/illustration-medium.png");$boosticon-url2x:url("#{$boosticon-root}/2x/illustration-medium.png");background:$boosticon-url left top no-repeat;@include image-2x($boosticon-url2x,150px,auto);.boost-subspromo-heading{color:#fff;font-weight:400;padding:0;@include type(18px,26px)}}.panel-boost--showsubpromo{.boost-report-buttons--promoonly,.boost-subspromo{display:block}.boost-report-buttons--goagain,.boost-goagain{display:none}}// one experiment still shows goagain .panel-boost--goagain{.boost-subspromo{$boosticon-url:url("#{$boosticon-root}/1x/illustration-small.png");$boosticon-url2x:url("#{$boosticon-root}/2x/illustration-small.png");background:$boosticon-url 20px 25px no-repeat;@include image-2x($boosticon-url2x,127px,auto);margin:20px;// top padding:25px padding + illustration height + 26px padding padding:(25px + 112px + 26px) 20px $S-gutter;border:1px solid #204ca2;border-radius:5px;.boost-subspromo-heading{@include type(16px,24px)}.boost-report-buttons{margin-top:18px;.flatbutton{width:130px}}}&.panel-boost--showsubpromo{.boost-report-buttons--promoonly{display:none}.boost-report-buttons--goagain,.boost-goagain{display:block}}}// activity $boost-toggler-height:50px;$fade_speed:250ms;$height_notification:81px;#boost_activity_toggler{display:none;position:absolute;top:0;left:0;right:0;.reporting &,.running &{display:block}a{display:block;font-size:15px;height:$boost-toggler-height;line-height:$boost-toggler-height;padding-left:35px;background:$Colors-teal-1;@include border-top-radius(2px);.icon{position:absolute;display:block;width:20px;height:20px;top:13px;text-align:center;&.i-boost{left:12px;@include type(18px,30px)}&.i-minimize,&.i-maximize{right:14px;color:transparentize(#fff,0.47)}&.i-minimize{display:none;top:12px;@include type(13px,30px)}&.i-maximize{display:block;@include type(13px,28px)}}&,&:hover{color:#fff}&:hover{.i-minimize,.i-maximize{color:#fff}}}// show "autoboost" text when it's an autoboost .text_autoboost{display:none}#im_footer.autoboost &{.text_autoboost{display:inline}.text_boost{display:none}}.close{position:absolute;display:none;top:0;bottom:0;right:0;width:50px;font-size:13px;color:#72dade;text-align:center;&:hover{color:#fff;cursor:pointer}}// when reporting,hide the min/max stuff and show the close button // (this has to be a little specific to overwrite other shit) #im_footer.reporting.hasnotifications.expanded &{a{.icon.i-minimize,.icon.i-maximize{display:none}.close{display:block}&:hover{cursor:default}}}}.orbit_event{.indicator{display:none;width:9px;height:9px;background:$Colors-teal-1;border-radius:50%;position:absolute;top:$height_notification / 2;left:5px;margin-top:-4px}}#im_footer.hasnotifications.running,#im_footer.hasnotifications.reporting{#event_display{padding-top:$boost-toggler-height;@include transition(none);// kill the notification bar &:after{display:none}}&.collapsed #event_display{bottom:0}#event_display_body{height:0;overflow:hidden}.orbit_inner{padding-left:20px}.orbit_event{.indicator{display:block;visibility:hidden;@include opacity(0);@include transition(opacity $fade_speed ease-in,visibility 0ms ease-in $fade_speed)}.close{display:none}&.new .indicator{visibility:visible;@include opacity(1);@include transition(opacity 0s ease-in,visibility 0ms ease-in)}}&.expanded{#event_display_body{height:auto;overflow-x:hidden;overflow-y:auto;max-height:$height_notification * 3}#boost_activity_toggler .action.i-minimize{display:block}#boost_activity_toggler .action.i-maximize{display:none}}&.flashed{#boost_activity_toggler a{@include animation(boost-panel-flash 2000ms infinite)}}}#autoboost_info{display:none}#im_footer.hasnotifications.reporting.autoboost{#event_display_body #autoboost_info{display:block;.orbit_event_inner{height:auto;padding:13px 17px}p{color:#999;font-size:13px;line-height:22px;text-align:center;strong{@include open-sans-semibold}}.icon{display:none}}}body.mac{#im_footer.hasnotifications.running,#im_footer.hasnotifications.reporting{&.expanded{#event_display_body{&::-webkit-scrollbar{-webkit-appearance:none}&::-webkit-scrollbar:vertical{width:11px}&::-webkit-scrollbar:horizontal{height:11px}&::-webkit-scrollbar-thumb{border-radius:8px;border:2px solid white;background-color:rgba(0,0,0,.5)}}}}}// ads .okmasthead,#leaderboard_wrapper,.okad{&.boosting{overflow:hidden;height:0 !important}}#rush_hour_modal{width:380px;margin-top:120px;overflow:hidden;border-top:none;.heading{background:$Colors-teal-1;padding:30px 0;h3{@include open-sans-light;color:#fff;font-size:32px}}.desc{margin-bottom:35px}.content{margin:0;#rush_hour_promote{position:relative;display:block;margin:0 auto 20px;line-height:46px;height:46px;width:180px;text-indent:15px;.icon{position:absolute;top:4px;left:14px;font-size:23px}}#rush_hour_dismiss{color:$Colors-gray-3;border-bottom:1px solid $Colors-gray-5;&:hover{color:$Colors-gray-4}}}.close{color:#fff}}#nav-boost-intro-popover{position:absolute;width:280px;top:72px !important;right:10px !important;left:auto !important;.contents{padding-top:150px;@include illustration('boost','xsmall','light');background-position:center 30px}.tail{margin-left:0;left:auto;right:36px}}// Body #page{// minwidth is set in the boosts structure file position:relative;// this leaves room for the nav height // (We compare the scroll position to this to see whether to fix or no) // plus top page padding,minus the transparent border on #main_content padding-top:$S-height-nav + 20px;// padding-right is used to open right-side panels @include transition-property(padding-right min-width);@include transition-duration($S-time-panel-open);@include transition-timing-function(ease);// when the boost panel is up,the min-width should increase too .boost-shown &{min-width:$S-width-wrapper + $S-width-boost-panel}}#main_content{// this transparent border collapses margins inside the page,which are // usually intended to increase PADDING at the top border-top:1px solid transparent;background:$S-color-page-bg;border-radius:$S-radius-page;padding-bottom:$S-gutter*2;@include clearfix}// Footie #footer{color:$Colors-blue-3;height:auto;margin:0 auto;min-height:278px;padding:35px 0;width:100%;-webkit-font-smoothing:antialiased;@include helvetica;@include type(16px,45px);@include clearfix;a{color:$Colors-blue-3;@include transition(color 100ms ease,border-color 100ms ease);&:hover{color:$Colors-blue-4}}#footer-copyright{clear:left;cursor:default;float:left;text-align:left;@include type(16px,45px)}.footer-social{text-align:right;// Stop the white space between inline-block elements. @include type(0,0);a{border:1px solid $Colors-blue-3;border-radius:100%;color:$Colors-blue-3;display:inline-block;height:45px;margin:0 6px;text-align:center;width:45px;@include type(16px,45px);&:last-child{margin-right:0}i{@include type(20px,45px)}&:hover{border-color:$Colors-blue-4;color:$Colors-blue-4}}}@media (max-width:940px){@include type(15px,30px);#footer-copyright{margin:15px 0 35px;@include type(15px,30px)}.footer-social{clear:left;float:left;margin-left:-6px}}}#footer_nav{float:left;margin-left:-7px;@include clearfix;// Stop the white space between inline-block elements. @include type(0,0);li{display:block;float:left;@include type(16px,45px);a{display:block;padding:0 7px;color:$Colors-blue-3;&:hover{color:$Colors-blue-4}}}}#copyright{float:right;padding:0 7px}#guest_footer{clear:both;padding-top:35px;ul{list-style:none}li{display:inline;float:left;padding:0 10px 0 0;@include type(13px,22px)}h3{margin:0 0 5px}}// Big footer used on singleton pages // ----------------------------------------------------------------------------- #footer_big{$color:#2f5dc9;position:relative;color:$color;@include clearfix;@include open-sans;@include type(13px,22px);a{color:$color;&:hover{color:$Colors-blue-3}}.link_set{float:left;width:175px;h4{padding-bottom:15px;@include open-sans-semibold;@include type(17px,17px)}}.social_links,.copyright{position:absolute;right:0}.social_links{top:0;font-size:22px;a{float:right;height:25px;margin-left:15px;position:relative;width:22px}.icon_text{bottom:0;display:block;left:0;line-height:500px;overflow:hidden;position:absolute;right:0;top:0}}.copyright{bottom:0}}// Common Components .more-people-list{$user-list-image-size:50px;$user-list-padding:10px;.section_title{border-bottom:1px solid $S-color-page-border;@include okc-h2}ul{@include clearfix}li{margin-top:$user-list-padding;padding-bottom:$user-list-padding;position:relative;color:$Colors-gray-2;border-bottom:1px solid $S-color-page-border;.user_image{position:absolute;top:0;left:0;overflow:hidden;border-radius:50%;&,img{display:block;width:$user-list-image-size}}.profile_info{min-height:$user-list-image-size;padding-left:$user-list-image-size + 20px}}$faces-only-image-size:66px;&.faces-only{ul{margin-top:10px}li{float:left;padding:0;width:$faces-only-image-size;height:$faces-only-image-size;border:0;margin:6px;&:nth-child(4n-3){margin-left:0}&:nth-child(4n){margin-right:0}}.user_image{&,img{float:left;width:100%;height:100%}}}}$flag-color:$Colors-red-2;.best-value-flag{display:none;position:absolute;top:-4px;right:-8px;padding:2px 8px;padding-left:5px;background:$flag-color;@include border-right-radius(2px);color:#fff;@include helvetica;font-size:13px;@include type(13px,19px);&:after{content:" ";display:block;position:absolute;top:23px;right:1px;@include triangle(7px,darken($flag-color,13%),up-left)}.best-value-decoration-wrapper{position:absolute;overflow:hidden;top:0;left:-19px;width:20px;height:100%}.best-value-decoration{display:block;position:absolute;right:-8px;$decoration-size:15px;&.best-value-decoration1{top:0;@include triangle($decoration-size $decoration-size * 2,$flag-color,up-right)}&.best-value-decoration2{bottom:0;@include triangle($decoration-size $decoration-size * 2,$flag-color,down-right)}}}// only show the best value flag when that plan is selected .checked .best-value-flag{display:block}// Box of shame. Don't you dare launch with this thing alive. // Feel free to be really fucking specific. body.okc2014{// ========================================================================= // Global // ------------------------------------------------------------------------- // css/globals/okshadowbox.scss .okshadowbox{box-shadow:none;border-radius:5px;background:#fff;border:1px solid $S-color-page-border;.close{color:$Colors-gray-3;background:transparent;top:20px;right:20px;text-indent:0;width:13px;height:13px;@include type(13px,13px);&:before{@include okicon("close")}&:hover{color:$Colors-gray-4}}}}// central location for all alist premium stuffs // Enhanced Alist Modal // ----------------------------------------------------------------------------- .modal.alist_options_promo{$width_modal:880px;position:absolute;top:50px;width:$width_modal;z-index:$Z-over-quickbuy;overflow:hidden;// kill the top margin on content .content{margin:0}.flag{position:absolute;top:41px;left:-10px;background:$Colors-red-2;border-radius:5px 0 0 0;padding:0 20px 0 29px;height:46px;color:#fff;@include type(18px,46px);// pop that shit up front,jack z-index:1;&:before{$color:#c53227;content:"";position:absolute;bottom:-6px;left:0px;// adapted from triangle.scss,which only supports equilateral triangles border-color:transparent;border-style:solid;border-width:3px 5px;border-top-color:$color;border-right-color:$color}&:after{$color:$Colors-red-2;content:"";position:absolute;right:-13px;top:0px;border-color:$color;border-style:solid;border-width:23px 13px 23px 0;border-right-color:transparent}}.left{position:absolute;left:-1px;top:-1px;bottom:-1px;width:$width_modal/2;background:$Colors-blue-3;color:#fff;border-radius:2px 0 0 2px;.pretitle{color:$Colors-blue-4;height:52px;@include type(22px,52px);&.godmode{$height_godmode:55px;color:#fff;margin:0 auto 12px;height:$height_godmode;line-height:$height_godmode;width:247px;border:2px dashed $Colors-blue-4;border-radius:$height_godmode/2}}.hero-icon{display:none}h3{color:#fff;font-weight:300;@include type(39px,48px)}.subtitle{color:#fff;font-weight:600;height:46px;@include type(18px,56px)}// the header is three lines,and the pre / sub are one each. // that means we have a height of the entire unit. .heading{position:absolute;left:60px;right:60px;$height_left:52px + 56px + 48px*3;height:$height_left;top:50%;// move up 20px from the center,so it's pretty margin-top:-$height_left/2 - 10px;// it's a little ugly,but let's not let some words wrap .nowrap{white-space:nowrap}}}.right{// I'm not sure why this is -2,it's magic padding-left:$width_modal/2 - 2;text-align:left;@include type(15px,20px);.features{margin-top:5px;margin-right:14px;margin-bottom:20px;li{position:relative;padding:10px;padding-left:55px;padding-bottom:17px;@include type(16px,22px);@include helvetica;.icon{position:absolute;top:10px;left:22px;color:#fd6d55;font-size:22px;&:before{@include okicon("checkmark")}}// &.popularity .icon{@include god-mode-2-sprite("popularity")}// &.heat .icon{@include god-mode-2-sprite("heat")}// &.priority .icon{@include god-mode-2-sprite("priority")}// &.answer .icon{@include god-mode-2-sprite("answer")}h4{padding:0;color:$Colors-gray-1;font-weight:600;margin-right:4px}h4,p{display:inline}}}// price stuff .disclosure{padding-top:10px;margin:0 15px 3px;text-align:center;color:$Colors-gray-3;@include helvetica;@include type(14px,18px);.withduration,.withtax{display:none}}.buttons{margin-top:16px;li{display:block;text-align:center;margin:0}button{display:inline-block}.addfeatures{width:180px}}}#enhanced_alist_price.hastax{.withtax{display:inline}}#enhanced_alist_price.hasduration{.onemonth{display:none}.withduration{display:inline}}// use a better transition // (this has to overwrite modal styles so be extra specif!) &.modal{@include transition(none);&.show{@include animation-name(bounce-in-from-bottom);@include animation-duration(500ms);@include animation-iteration-count(1);@include transition(none)}}// adjustments &.premium_upgrade{.flag,.left .pretitle{display:none}.left{.hero-icon{display:block;margin:0 auto 34px;&,svg{width:210px;height:185px}}.heading{height:389px;margin-top:(-389px/2);left:45px;right:45px}}}}// upgradeads // ----------------------------------------------------------------------------- div.upgrade_ad.upgrade_ad-premium{.wrapper{@include bare-button;background:#4e7dd6;font-size:16px;color:#fff;padding-left:100px;padding-right:50px;overflow:hidden;// buttons aren't naturally full-width without this text-align:left;display:block;width:100%;.icon{background:transparent;margin-top:0;top:-12px;left:-18px;&,svg{width:105px;height:92px}}.arrow{background:none;color:#2e5cca;font-size:24px;margin-top:-11px;height:24px;&:before{@include okicon("arrow-right")}}}&.upgrade_ad-twoline{.wrapper{padding-left:110px;padding-top:12px;padding-bottom:12px;height:90px;.icon{top:-16px;left:-28px;&,svg{width:124px;height:109px}}}}}// include some okpay styles to fake the confirmation thing // structure // ============================================================================= // Vars // ----------------------------------------------------------------------------- $height-nav-item:112px;$height-nav-label:31px;$height-nav-padding:66px;$width-form:364px;$width-nav:145px;$width-summary:298px;$width-hasinfosummary:500px;$width-updatepadding:100px;$color-body:$Colors-gray-7;// ============================================================================= // Page layout // ----------------------------------------------------------------------------- #p_okpay{background:transparent;// add some bottom padding so we have some wiggle room. padding-bottom:100px}.okpay-app{position:relative;width:$width-form + $width-nav + $width-summary;margin:0 auto;background:#fff;border-radius:6px;overflow:hidden;&.okpay-app--useinfo{width:$width-hasinfosummary}}.okpay-app,.okpay-body{@include clearfix}// normal cc form .okpay-nav,.okpay-body,.okpay-sidesummary{float:left}.okpay-nav{width:$width-nav}.okpay-body{width:$width-form + $width-summary}.okpay-form{width:$width-form}.okpay-sidesummary{width:$width-summary}// hide the summary when we're just updating shit .okpay-app--update{width:$width-form + $width-nav + $width-updatepadding;.okpay-body{width:$width-form + $width-updatepadding}}// shared close button .okpay-close{@include bare-button;position:absolute;top:12px;right:12px;width:50px;height:50px;.okicon{color:$Colors-gray-4;display:block;text-align:center;@include type(16px,50px)}&:hover .okicon{color:$Colors-gray-5}}// body $width-tail:15px;.okpay-body{position:relative;background:$color-body;min-height:$height-nav-item*3 + $height-nav-padding*2;@include helvetica;&:before{content:"";position:absolute;display:block;left:-($width-tail/2 + 1px);width:$width-tail;height:$width-tail;background:$color-body;@include transition(top 120ms ease-out);@include transform(rotate(45deg))}// the top padding on the side summary should be the same as the // card form's heading .okpay-sidesummary{padding-top:35px + 22px + 26px + 5px;padding-right:50px}}@each $billing-type,$index in (card:0,paypal:1,bitcoin:2){.okpay-app--#{$billing-type}.okpay-body:before{top:$height-nav-item*$index + $height-nav-padding + 36px}}.okpay-sidesummary,.okpay-form{position:relative;padding:35px $S-gutter;float:left}.okpay-sidesummary{// move over the learnmore box in this state .okpay-learnmore-open{margin-left:-150px}}// summary .okpay-summary-name,.okpay-summary-description,.okpay-learnmore{padding-bottom:20px}.okpay-summary-name{color:$Colors-gray-1}// Price table $width-label:50px;.okpay-price{width:192px}.okpay-price-label,.okpay-price-value{$height-padding:3px;vertical-align:top;line-height:28px - $height-padding*2;padding:$height-padding 0}.okpay-price-label{float:left;text-align:left}.okpay-price-value{text-align:right}.okpay-price-total{font-weight:600}.okpay-vat{color:$Colors-gray-4;font-size:13px}.okpay-learnmore{// close to 15px of space above and below. margin-top:-15px}.okpay-learnmore-toggler{@include bare-button;color:$Colors-blue-2;white-space:nowrap;body.chrome.mac &{padding-right:5px}&:hover{color:$Colors-blue-3}&:active{color:$Colors-blue-4}}$width-learnmore:450px;.okpay-learnmore-open{position:fixed;top:75px;left:50%;margin-left:-($width-learnmore/2);z-index:10;background:#fff;width:$width-learnmore;padding:$S-gutter;border:1px solid $S-color-page-border;font-size:14px;.okpay-learnmore-close{margin-top:$S-gutter}}// hasinfosummary .okpay-app.okpay-app--useinfo{background:$color-body}.okpay-hasinfosummary{padding-bottom:$S-gutter;.okpay-price{padding:($S-gutter/2) 0;margin:$S-gutter 0;border:1px solid $S-color-page-border;border-width:1px 0}.okpay-vat{margin-left:$S-gutter;margin-right:$S-gutter}.okpay-summary-name{$padding:(72px - 26px)/2;background:#fff;color:$Colors-gray-2;padding-top:$padding;padding-bottom:$padding;margin-bottom:$S-gutter;border-bottom:1px solid $S-color-page-border;@include type(18px,26px)}.okpay-summary-description{@include type(16px,26px)}.okpay-summary-name,.okpay-summary-description,.okpay-learnmore,.okpay-hasinfosummary-footer{padding-left:$S-gutter;padding-right:$S-gutter}.okpay-price{// tables don't use the box model,so we can't just set // left/right margins + 100% width // we have to calc the width margin-left:$S-gutter;margin-right:$S-gutter;@include type(16px,26px);@include calc(width,"100% - #{$S-gutter*2}")}// move down the learnmore box in this state .okpay-learnmore-open{top:96px}}.okpay-hasinfosummary-footer{padding-top:$S-gutter;@include clearfix;.okpay-hasinfosummary-left{float:left}.okpay-hasinfosummary-right{float:right}.okpay-purchasebutton{width:180px}.okpay-hasinfosummary-cardinfo,.okpay-change{float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:245px;text-align:right;@include type(16px,$S-height-input-big);body.chrome.mac &{padding-right:2px}}.okpay-change{@include bare-button;margin-left:$S-gutter/2;strong{margin-left:5px;font-weight:normal;color:$Colors-blue-2;&:hover{color:$Colors-blue-3}&:active{color:$Colors-blue-4}}}}// confirmation overrides // ----------------------------------------------------------------------------- .modal.alistpremium-confirm{width:500px;padding:0;.okpay-hasinfosummary .okpay-summary-name{font-weight:normal}}div.okad{width:300px;margin-bottom:20px;@include transition(height 200ms ease)}div.okad div.frame{width:300px}div.okad div.frame iframe{border:0}div.okad p.notice{@include type(13px,20px);font-weight:normal;color:$Colors-gray-4;text-align:center;padding:4px 0px 5px 0px}div.okad p.notice a{display:inline-block;color:$Colors-gray-3;border-bottom:1px solid $Colors-gray-5;font-family:'Open Sans',sans-serif}#leaderboard_container{overflow:hidden}#leaderboard_wrapper{background:$S-color-head-bg;border-bottom:1px solid #3269c8;margin-bottom:-1px;@include transition(height 200ms ease)}#leaderboard_wrapper p{color:#FFF;margin-bottom:0;position:relative;text-align:center;top:-5px}#leaderboard_wrapper p a{color:#F83265;font-weight:bold}#leaderboard{line-height:0;// Prevents layout jank on page load. padding:10px 0;text-align:center;.ad-container{&,.format.format--leader,iframe{display:inline-block}}}div#skyscraper_floater_wrapper{}div#skyscraper_floater_region,div#skyscraper_floater_region2{top:0px;width:$Structure-leftbar-width}.side_skyscraper_ad .block_wrapper{padding:14px 12px 12px}.side_skyscraper_ad .block_wrapper div.block{width:160px;height:600px}.side_skyscraper_ad .block_wrapper p{color:#dce6fe;padding:0px;margin:8px 0 0;line-height:16px}.side_skyscraper_ad .block_wrapper p a{display:block;text-align:left}.ad_wrapper p{color:#7FA1C8;font-size:10px;text-align:center;text-transform:uppercase}p.ad_notifier a.upgrade{font-style:italic;padding-left:10px;font-weight:bold}p.ad_notifier{font-size:10px;color:#ccc;text-align:center;margin-bottom:5px;text-transform:uppercase}iframe.ad{display:block;margin:0;padding:0;background:#fff}#leaderboard.hastextads{padding-top:5px}#textads{position:relative;margin:0 auto;padding-top:7px;width:748px;height:20px + 7px;overflow:hidden;text-align:center;@include type(13px,20px)}#textads a.textad{display:inline-block;padding:0 22px;border-left:1px solid #223976;color:#95b5ff;white-space:nowrap}#textads a.textad.first{border:0}#textads img{position:absolute}p.page_banner{overflow:hidden;height:39px;line-height:39px;padding:0px 10px 0 30px !important;margin:-1px 0 0 0 !important;font-size:15px;position:relative;background:#e7eef5;color:#2855A2;box-shadow:none;border-bottom:1px solid #9dbaf2;border-radius:3px 3px 0 0;@include helvetica}p.page_banner.left{padding:0px 25px 0px 34px !important}p.page_banner a{display:block;height:39px;line-height:39px;color:#2855A2;text-decoration:none;&:hover{text-decoration:none}}p.page_banner a.close{position:absolute;right:10px;z-index:20;width:13px;&:hover{text-decoration:none !important}}p.page_banner.left a.close{left:10px}p.page_banner a span{font-size:10px}p.page_banner a.close span{margin:7px 0;width:13px;height:14px;color:#2855A2}p.page_banner a.close:hover span{background-position:0px -14px}p.page_banner strong{padding-right:6px}p.page_banner.pink{color:$Colors-pink-2;background:$Colors-pink-6;box-shadow:none;border-color:$Colors-pink-5;&:hover{background:lighten($Colors-pink-5,2%)}}p.page_banner.pink a{color:$Colors-pink-2;background:transparent}p.page_banner.pink a span{color:$Colors-pink-3}p.page_banner.pink a.close span{color:$Colors-pink-4}p.page_banner.green{color:#539722;background:#e8f2e0}p.page_banner.green a{color:#539722}p.page_banner.green a span{color:#539722}p.page_banner.green a.close span{color:#539722}body.dont_unexpand #wrapper,body.dont_unexpand #page{width:1148px}body.dont_unexpand #footer{padding:0 0 40px}div#takeover_boxes,div#takeover_boxes a.takeover_link{display:none}div#alist_member_banner{margin:0;box-shadow:s0px 0px 6px 0px rgba(0,0,0,.4)}div#alist_member_banner a{display:block;background-color:#edf1f8}div#alist_member_banner a:hover{background-color:#e6ecf6}div#alist_member_banner div#leaderboard{height:16px;width:914px;padding:20px;background-image:url(//cdn.okccdn.com/media/img/alist/alist_member_banner_back.png);background-position:right center;background-repeat:no-repeat}div#alist_member_banner div#leaderboard p{font-size:14px;color:#2855a2;text-align:center;line-height:16px;height:16px}body.spotlight div#alist_member_banner div#leaderboard{padding-right:120px;background-position:914px center}.format{&--leader,&--leader_addl{min-width:728px;min-height:90px}&--box,&--box_addl{width:300px;height:250px}&--half_page{width:300px;height:600px}}body.hideallads{div.okad,div#home_ad,div#leaderboard_wrapper,div#skyscraper_floater_wrapper,div#skyscraper_floater_wrapper2,&.expanded div#skyscraper_floater_wrapper,&.expanded div#skyscraper_floater_wrapper2{display:none}}body.hide_leader{div#leaderboard_wrapper{display:none}}body.hide_sky{div#skyscraper_floater_wrapper,&.expanded div#skyscraper_floater_wrapper{display:none}}body.hide_sky_r{div#skyscraper_floater_wrapper2,&.expanded div#skyscraper_floater_wrapper2{display:none}}// ------------------------------------------------------------------------------ // Centralized repository of CSS animations. // // Halt right there! Are you about to add a rad,reusable style? Please add it // to html/sandbox/fed/example/animations.html,so that others might be able to // find and reuse it! // ============================================================================== .noanimation{@include transition(none !important)}@include keyframes(fade-in){0%{opacity:0;visibility:hidden}1%{opacity:0;visibility:visible}100%{opacity:1;visibility:visible}}@include keyframes(fade-out){0%{opacity:1;visibility:visible}99%{opacity:0;visibility:hidden}100%{opacity:0;visibility:hidden}}@include keyframes(fade-in-up){0%{margin-top:5px;opacity:0.2}100%{margin-top:0;opacity:1}}@include keyframes(fade-in-down){0%{margin-top:-5px;opacity:0.2}100%{margin-top:0;opacity:1}}@include keyframes(fade-in-left){0%{opacity:0.2;transform:translateX(-5px)}100%{opacity:1;transform:translateX(0)}}@include keyframes(fade-in-right){0%{opacity:0.2;transform:translateX(5px)}100%{opacity:1;transform:translateX(0)}}@include keyframes(bounce-in-top){0%{opacity:0;@include transform(translateY(-1000px))}60%{opacity:1;@include transform(translateY(30px))}80%{@include transform(translateY(-10px))}100%{@include transform(translateY(0))}}@include keyframes(bounce-in-from-bottom){0%{opacity:0;@include transform(translateY(200px))}50%{opacity:1;@include transform(translateY(-20px))}80%{@include transform(translateY(15px))}100%{@include transform(translateY(0))}}@include keyframes(expand-from-center){0%{@include transform(scale(0.8));opacity:0}100%{@include transform(scale(1));opacity:1}}@include keyframes(badge-bounce){0%{margin-bottom:-50px}50%{margin-bottom:-6px}70%{margin-bottom:-12px}87%{margin-bottom:-9px}100%{margin-bottom:-10px}}@include keyframes(badge-emphasis-short){0%{padding:0px 5px;right:12px;margin-bottom:-10px}50%{padding:3px 7px;right:10px;margin-bottom:-12px}100%{padding:0px 5px;right:12px;margin-bottom:-10px}}@include keyframes(numberless-badges-pulse){0%{width:10px;height:10px;margin-bottom:-4px;right:13px}50%{width:18px;height:18px;margin-bottom:-8px;right:9px}100%{width:10px;height:10px;margin-bottom:-4px;right:13px}}@include keyframes(badge-slide-up){0%{margin-bottom:-50px}100%{margin-bottom:-4px}}@include keyframes(badge-slide-up-pulse){0%{margin-bottom:-50px}28%{width:10px;height:10px;margin-bottom:-4px;right:13px}46%{width:20px;height:20px;margin-bottom:-9px;right:8px}64%{width:10px;height:10px;margin-bottom:-4px;right:13px}82%{width:20px;height:20px;margin-bottom:-9px;right:8px}100%{width:10px;height:10px;margin-bottom:-4px;right:13px}}@include keyframes(pop-message-open){0%{opacity:.6;visibility:visible;@include transform(scale(.75))}100%{opacity:1;@include transform(scale(1.0))}}@include keyframes(pop-open){0%{opacity:0;visibility:visible;@include transform(scale(.50))}70%{@include transform(scale(1.10))}100%{opacity:1;@include transform(scale(1.0))}}@include keyframes(flash){0%{opacity:1}25%{opacity:0.5}50%{opacity:1}75%{opacity:0.5}100%{opacity:1}}@include keyframes(pulse){0%{@include transform(scale(1.0))}10%{@include transform(scale(.93))}40%{@include transform(scale(1.1))}80%{@include transform(scale(.97))}100%{@include transform(scale(1.0))}}@include keyframes(bubble-down){0%{opacity:1;bottom:0;visibility:visible}50%{opacity:.75;bottom:30px}100%{opacity:0;bottom:-50px;visibility:hidden}}@include keyframes(bubble-replace){0%{opacity:1;bottom:0;visibility:visible}25%{opacity:1}50%{opacity:0.25;bottom:44px}100%{opacity:0;bottom:-50px;visibility:hidden}}@include keyframes(bubble-up){0%{opacity:0;bottom:-50px;visibility:visible}50%{opacity:1;bottom:15px}80%{bottom:-10px}100%{bottom:0}}@include keyframes(boost-panel-flash){0%{background:#76dadd}70%{background:#30b7c4}100%{background:#76dadd}}@include keyframes(oscillate-vertical){0%{@include transform(translateY(0))}25%{@include transform(translateY(-2px))}50%{@include transform(translateY(0))}75%{@include transform(translateY(2px))}100%{@include transform(translateY(0))}}@include keyframes(shadow-pulse){0%{opacity:0.8;@include transform(scale(1.0))}25%{opacity:0.7;@include transform(scale(1.05))}50%{opacity:0.8;@include transform(scale(1.0))}75%{opacity:0.9;@include transform(scale(0.95))}100%{opacity:0.8;@include transform(scale(1.0))}}// ================================================================ // Display then hide // ---------------------------------------------------------------- // expects a 15 second timeout @include keyframes(enter-left-then-slowly-fade-out){0%{opacity:0;visibility:visible;margin-left:-20px}4%{margin-left:8px}8%{margin-left:-3px}14%{margin-left:0;opacity:1}85%{opacity:1}99%{opacity:0}100%{visibility:hidden}}// ================================================================ // Mutual match modal // ---------------------------------------------------------------- //on enter @include keyframes(zoom-in-out){from{@include transform(scale(0.75))}to{@include transform(scale(1))}75%{@include transform(scale(1.02))}}// ================================================================ // OkPhotos // ---------------------------------------------------------------- @include keyframes(tile-load){from{@include opacity(0);@include transform(translateY(20px))}to{@include opacity(1);@include transform(translateY(0))}}@include keyframes(show-subtiles){from{@include opacity(1);@include transform(scale(1))}to{@include opacity(0);@include transform(scale(1.4))}}// ============================================================================= // Gray text asides // ----------------------------------------------------------------------------- aside.grayaside{padding:18px 20px 20px;background:$Colors-gray-6;margin-bottom:10px;h3{margin-bottom:10px;padding-bottom:0;color:$Colors-gray-1;@include type(18px,24px)}p,li{color:$Colors-gray-2}p{margin-bottom:5px}> .content ul{margin:10px 0 5px;list-style-type:disc;li{display:list-item;padding:2px 0}}> .buttons{margin-top:15px;text-align:left;// auto-size the flat buttons so we don't have to finesse each one .flatbutton{display:block;width:auto;padding:0 20px;margin-bottom:5px;&:last-child{margin-bottom:0}}&.fixedwidth{.flatbutton{width:170px}}}}// blank states eat up all the width that you give them,but the dashed outline // gets some padding from the edges .blank_state_wrapper{width:100%;padding:0 30px;.blank_state{padding:69px 20px 79px;text-align:center;// default border .no-borderimage &{border:1px dashed $Colors-gray-4;border-radius:4px}// browsers that support border image get a slightly nicer one .borderimage &{$border-image:url("#{$css-imagepath}media/img/template/pq-blank-state-border.png");@include border-image($border-image 7 repeat);border-width:7px}&.no_buttons{padding:107px 20px}>{h2,p{color:$Colors-gray-2}h2{padding-bottom:0;margin-bottom:18px;@include open-sans-semibold;font-size:22px}p{margin-bottom:6px;@include type(15px,24px)}.buttons{display:inline-block;margin-top:24px;.flatbutton{float:left;margin-left:10px;width:auto;min-width:120px;padding-right:15px;padding-left:15px;&:first-child{margin-left:0}}}}&.helvetica{> h2,> p{margin:0;color:$Colors-gray-3;@include type(16px,22px);@include helvetica}> h2{margin-bottom:5px}> p{font-weight:400}}}// styling for specific cases ////////////////////////////////////////////////////////////////////////////// &#profile_bs{margin-top:60px}&#empty_album,&#empty_profile_album{display:none;margin-top:-20px;.popover_container{@include clearfix}.popover{margin-top:0px;margin-left:50%;left:-195px;bottom:54px}}&#events_bs{float:left;width:530px;padding:0 10px}&#rejects_bs{padding:0 10px;.blank_state{padding-top:70px;padding-bottom:90px}}&#home_carousel_bs{margin:36px 0;padding:0;.blank_state{padding-bottom:69px}}&#home_activity_bs{padding:0;margin-bottom:50px;.blank_state{padding-bottom:69px}}&#match_bs{margin:0 0 50px}&#match_no_results_bs{margin:50px 0 100px}&#match_bs,&#match_no_results_bs{float:left;padding:0 10px}&#profile_bs{margin-bottom:300px}&#questions_bs{margin-bottom:200px;padding:0 10px}.self &#questions_bs{margin-top:20px}&#visitors_bs{margin:40px 0 200px;.flatbutton.browse{width:140px}}&#intoyou_bs{margin:40px 0 200px}&#votes_bs{margin:40px 0 200px}&#gayprivacy_bs{margin-top:60px;margin-bottom:300px}&#essays2015_bs,&#personality_chart_2015_bs,&#profile_tests_bs{padding:0;margin-top:20px}&#qm_essay_bs{padding:0}}// if the blank state appears in page-left,kill the padding .page-left .blank_state_wrapper{padding:0}.emojione{display:inline-block;width:20px;height:20px;padding:1px}// Mailbox previews,shrink and make less invasive #messages .previewline .emojione{position:relative;top:3px;margin-top:-4px;height:14px;width:14px}// Message threads,to bring in line with the line-height. #thread .message_body .emojione{position:relative;top:5px;margin-top:-5px}// Profile essays .essay .essay .emojione{position:relative;top:5px;margin-top:-8px}.essays2015-essay-content .emojione{position:relative;top:3px;margin-top:-2px}.essays2015-essay.large .essays2015-essay-content .emojione{width:32px;height:32px}// global messaging .global_messaging .messages .emojione{position:relative;top:5px;margin-top:-6px}// Question explanations. Monster selectors. div.big_dig #questions .question .answer .note .emojione,div.big_dig #questions .question .your_explanation .value .emojione{display:inline-block;position:relative;float:none;top:3px;margin:-4px 0 0 0;height:14px;width:14px}// photo captions #full_albums .photo .text .emojione{position:relative;top:5px;margin-top:-8px}// valentines 2015 page #p_valentines2015 .emojione{position:relative;top:5px;margin-top:-8px;width:26px;height:26px}// Photo overlay captions #photo_overlay .caption .emojione{position:relative;top:4px}// ============================================================================= // Feedback banner // // Global component that hides at the top until it expands. // ----------------------------------------------------------------------------- $banner-height:90px;$text-color:#FFF;$success-color:$Colors-green-2;$error-color:$Colors-red-2;$anim-speed:200ms;#feedback_banner{position:fixed;top:0;left:0;right:0;width:auto;height:$banner-height;line-height:$banner-height;margin:0;padding:0;visibility:hidden;z-index:$Z-feedback;color:#FFF;font-size:18px;text-align:center;@include transform(translateY(-100%));@include transition-property(transform,visibility);@include transition-duration($anim-speed,0ms);@include transition-delay(0ms,$anim-speed);@include transition-timing-function(ease);&.success{background:$success-color}&.error{background:$error-color}.inner{opacity:0;@include transform(translateY(15px));@include transition-property(transform,opacity);@include transition-duration($anim-speed);@include transition-timing-function(ease)}&.show{visibility:visible;@include transition-delay(0ms);@include transform(translateY(0%));.inner{opacity:1;@include transform(translateY(0px));@include transition-delay($anim-speed * 0.75)}}a{color:inherit;text-decoration:underline}&.success{a:hover{color:$Colors-green-5}}&.error{a:hover{color:$Colors-red-3}}}@mixin focus-style{box-shadow:0 0 8px transparentize(#30b7c4,0.2)}@mixin cancel-focus-style{box-shadow:none}@mixin flatbutton($color-name,$default-color,$hover-color){background-color:$default-color;&:hover,&.hover{background-color:$hover-color}&:active{background-color:darken($hover-color,5%)}&.hollow{background:none;color:$default-color;border:1px solid $default-color;&:hover,&.hover{color:$hover-color;border-color:$hover-color}&:active{color:darken($hover-color,5%);border-color:darken($hover-color,5%)}}}a.flatbutton{display:block}button.flatbutton{border:none;padding:0;vertical-align:top}a.flatbutton,button.flatbutton{width:120px;height:$S-height-input;line-height:$S-height-input - 1px;font-size:15px;white-space:nowrap;color:#fff;text-align:center;text-transform:none;overflow:hidden;border-radius:2px;@include transition-property(background-color,color,border);@include transition-duration(75ms);@include transition-timing-function(ease);cursor:pointer;&:hover,&.hover{color:#fff}// default color is blue &,&.okblue{@include flatbutton('blue',#3260c7,#4c7bd9)}// Supplied by ButtonColors in colors.dict. &.blue{@include flatbutton('blue',#3260c7,#4c7bd9)}&.yellow{@include flatbutton('yellow',#f8c637,#ffd939)}&.gray{@include flatbutton('gray',#EEE,#F1F1F1)}&.clear{@include flatbutton('clear',transparent,rgba(#aeb4bf,0.1))}&.silver{@include flatbutton('silver',transparent,rgba(#aeb4bf,0.1))}&.red{@include flatbutton('red',#f95133,#fb674e)}&.white{@include flatbutton('white',#FFF,#ebedf2)}&.green{@include flatbutton('green',#00d280,#48e588)}&.teal{@include flatbutton('teal',#30b7c4,#4fc5d0)}// Overrides &.silver,&.clear,&.gray,&.white,&.hollow{// silver,gray,and white buttons have borders,so the line height must // change to make the text in-line with other adjacent buttons. // they also get different border-colors and colors &,&:hover,&.hover{line-height:$S-height-input - 3px}}&.silver,&.gray,&.white{&,&:hover,&.hover{border:1px solid $Colors-gray-5;color:$Colors-gray-2}}&.clear{&.light-bg:not([disabled]){color:$Colors-gray-2;border:1px solid $Colors-gray-5}&.dark-bg:not([disabled]){color:$Colors-blue-5;border:1px solid #4879c1}}&.gray{color:$Colors-gray-2}&.black{color:#fff}// Disabled &.disabled,&:disabled{cursor:default;color:$Colors-gray-3;&:focus{@include cancel-focus-style}&,&:hover,&.hover{background-color:$Colors-gray-6}// for buttons that should look faded &.faded{color:#fafafa;&,&:hover,&.hover{background-color:$Colors-gray-6}}// Disable default blue glow &.glow{@include animation(none)}}// Big:the 50px tall button &.big{min-width:140px;height:$S-height-input-big;line-height:$S-height-input-big - 1;font-size:16px;font-weight:400;border-radius:4px;&.silver,&.clear,&.white{line-height:$S-height-input-big - 3}}// fit button to width &.fitted{width:auto;padding:0 20px}}// Rainbow flash. Awww yeaaaah. a.flatbutton,button.flatbutton{&.rainbow{position:relative;overflow:hidden;&:after{content:"";position:absolute;height:100%;top:0;left:100%;width:200%;pointer-events:none;z-index:1;@include background(linear-gradient(45deg,transparent 0%,transparent 17.5%,$Colors-pride-r 18%,$Colors-pride-r 27%,$Colors-pride-o 27.5%,$Colors-pride-o 37%,$Colors-pride-y 37.5%,$Colors-pride-y 50%,$Colors-pride-g 50.5%,$Colors-pride-g 63%,$Colors-pride-b 64%,$Colors-pride-b 74%,$Colors-pride-i 74.5%,$Colors-pride-i 83%,transparent 83.5%,transparent 100%));@include transition(left 0ms linear)}&:hover:after{left:-200%;@include transition-duration(800ms)}> span{position:relative;z-index:2}}}$width:51px;$height:68px;$br:2px;$duration:300ms;// apply all colors via this mixin so that they can be easily overwritten @mixin flipper-color($bg,$top-bg,$bottom-bg,$color){background:$bg;color:$color;.background_top{background:$top-bg}.background_bottom{background:$bottom-bg}.cssanimations &.flip_down{.background_top{background:darken($top-bg,5%)}.front{background:$top-bg}.back{background:$bottom-bg}&.flip{.background_top{background:$top-bg}.background_bottom{background:darken($bottom-bg,5%)}}}.cssanimations &.flip_up{.background_bottom{background:darken($bottom-bg,5%)}.front{background:$bottom-bg}.back{background:$top-bg}}&.flip{.background_bottom{background:$bottom-bg}.background_top{background:darken($top-bg,5%)}}}@mixin flipper-top-style{overflow:hidden;@include border-top-radius(4px);line-height:$height + 1}@mixin flipper-bottom-style{overflow:hidden;@include border-bottom-radius(4px);line-height:0}$container-height:69px;$colon-width:12px;.okcountdown.hasflip{height:$container-height;@include transform(translateZ(0));.colon{width:$colon-width;height:$container-height;// turn down the line-height by 5px,since the colon is offset but about 5px line-height:$container-height - 5px;color:$Colors-gray-2;font-size:32px;@include open-sans-light}}.okcountdown.hasflip .flipper{@include flipper-color($Colors-gray-3,$Colors-gray-1,$Colors-gray-2,#fff);position:relative;width:$width;height:$height + 1;@include perspective(800px);@include open-sans-light;font-size:36px;border-radius:$br + 2;// styles common to the top,bottom,and moving parts .background_top,.background_bottom,.front,.back{display:block;position:absolute;left:0;width:$width;height:$height / 2;@include transition(all $duration ease-in-out)}.background_top{top:0;@include flipper-top-style}.background_bottom{bottom:0;@include flipper-bottom-style}.front,.back{left:1px;width:$width - 2;height:$height / 2;@include transform-style(preserve-3d);@include backface-visibility(hidden);@include transform-origin(0 0)}// kill the flipping panel for old browsers .no-cssanimations &{.front,.back{display:none}}// styles for the counter flipping from top to bottom $flipped-y:$height * 0.5;.cssanimations &.flip_down{.front,.back{top:0}.front{z-index:900;@include transform(rotateX(0deg));@include flipper-top-style;@include transform-origin(0 bottom)}.back{z-index:800;@include flipper-bottom-style;@include transform(rotateX(180deg) translateY($flipped-y + 1));@include transform-origin(0 bottom)}// trigger the animation,flipping the bottom to the top &.flip{.front{@include transform(rotateX(-180deg))}.back{@include transform(rotateX(0deg) translateY($flipped-y + 1))}}}// styles for the counter flipping from bottom to top $flipped-y:$height * -0.5;.cssanimations &.flip_up{.front,.back{top:50%}.front{z-index:900;@include transform(rotateX(0deg));@include flipper-bottom-style}.back{z-index:800;@include flipper-top-style;@include transform(rotateX(-180deg) translateY($flipped-y - 1))}// trigger the animation,flipping the bottom to the top &.flip{.front{@include transform(rotateX(180deg))}.back{@include transform(rotateX(0deg) translateY($flipped-y - 1))}}}// disable all animations,useful for resetting the "flip" class &.no_transition{.background_top,.background_bottom,.front,.back{@include transition(none)}}}// define additional colors here,where the color mixin is guaranteed to exist div.discountbanner #freebie_countdown .okcountdown .flipper{@include flipper-color($Colors-blue-3,$Colors-blue-1,$Colors-blue-2,#fff)}.okmasthead.alistpromo.countdown .okcountdown .flipper{@include flipper-color($Colors-blue-1,$Colors-blue-2,$Colors-blue-3,#fff);font-weight:300}$imagepath:"#{$css-imagepath}media/img/";// modal // ============================================================================= // Structure // ----------------------------------------------------------------------------- .modal.incognito-modal,#incognito_promo{margin-top:150px;padding:0;@include clearfix;.content{margin:0}.buttons{li{display:block;margin:0}.flatbutton{width:180px}.simplecancel{margin-top:10px;@include type(14px,20px)}}}.incognito-modal-left{float:left;background:$Colors-blue-3;border-radius:4px 0 0 4px;padding:30px;.incognito-modal-head,.incognito-modal-body{color:white}}.incognito-modal-right{float:left}// modal-specific code (as opposed to the inline version) .modal.incognito-modal{.incognito-plan-savings,.incognito-modal-helper-text,.incognito-plan-choose{display:none}}// ============================================================================= // Packages Structure // ----------------------------------------------------------------------------- $width:640px;$width-left:363px;$width-right:$width - $width-left;$height:412px;// get specific to overwrite .modal .modal.incognito-modal-packages,.incognito-modal-packages{width:$width;.incognito-modal-left{width:$width-left;height:$height;.incognito-modal-bandit{height:181px;background:url("#{$imagepath}incognito/1x/incognito-xsmall_lt.png") center 17px no-repeat;@include image-2x(url("#{$imagepath}incognito/2x/incognito-xsmall_lt.png"),130px,132px)}.incognito-modal-head{font-weight:400;margin-bottom:1px;@include type(24px,34px)}.incognito-modal-body{@include type(15px,22px)}}.incognito-modal-right{width:$width-right;padding:28px 18px}.buttons{margin-top:43px}}// ============================================================================= // About list // ----------------------------------------------------------------------------- .incognito-modal-feature{position:relative;padding-left:30px;padding-bottom:33px;text-align:left;.okicon{display:inline-block;position:absolute;left:0;top:0;font-size:18px;color:$Colors-green-2}.incognito-modal-head{padding-bottom:11px}}// ============================================================================= // Carousel // ----------------------------------------------------------------------------- #incognito_promo.modal{@include incognito-carousel($width-slide:303px,$height-slide:132px,$count-slide:4,$size-nav-dot:10px,$size-nav-padding:4px)}// ============================================================================= // Plans // ----------------------------------------------------------------------------- .incognito-modal-form{text-align:left}// this has to be almost painfully specific to leap `.okform label.radio` $padding-top-label:29px;$padding-left-label:28px;.okform label.radio.incognito-plan{display:block;padding:$padding-top-label 0;padding-left:$padding-left-label + 26px;margin:0;color:$Colors-gray-3;border-radius:4px;border-bottom:1px solid $Colors-gray-7;// prevent wrapping (which happens we specify USD) white-space:nowrap;.icon{top:50%;// icons are 19px wide,but use 18 because it makes it a little higher margin-top:(-18px/2);left:$padding-left-label}strong{color:$Colors-gray-1}&.incognito-plan-selected{box-shadow:inset 0 0 0 2px $Colors-blue-4}// find 10px more padding if we have to fit in "US $" .incognito-modal-nonus &{padding-left:$padding-left-label + 26px - 10px;.icon{left:$padding-left-label - 10px}}}// masthead .okmasthead.incognito-masthead{background:$Colors-blue-7;border-bottom:1px solid $Colors-blue-3;height:130px;.inner{width:1090px}.text{$padding-left:214px;padding-top:32px;padding-bottom:38px;padding-left:$padding-left;margin-left:0;color:$Colors-blue-5;width:610px + $padding-left;background:url("#{$imagepath}incognito/1x/incognito-small.png") left 53px no-repeat;@include image-2x(url("#{$imagepath}incognito/2x/incognito-small.png"),150px,149px);em{font-style:normal;font-weight:600;color:$Colors-yellow-3}p{@include type(20px,30px)}}.button{padding-top:37px;padding-right:72px;.flatbutton{width:143px;font-size:18px}}}// upgrade_ad div.upgrade_ad.incognito{.wrapper{padding-left:123px;background:$Colors-blue-3;color:#fff}.text{b,strong{margin-right:4px}}.icon{width:77px;height:65px;top:auto;bottom:0;margin-top:0;left:21px;background:url("#{$imagepath}incognito/1x/incognito-xxsmall.png") left 23px no-repeat;@include image-2x(url("#{$imagepath}incognito/2x/incognito-xxsmall.png"),77px,76px)}.arrow{background:none;color:$Colors-blue-2;height:30px;margin-top:-15px;text-align:right;@include type(18px,30px);&:before{@include okicon("arrow-right")}}// smaller one for right rail ads .page-right &{margin-bottom:30px;.wrapper{padding-left:78px}.icon{width:48px;height:44px;top:auto;bottom:0;margin-top:0;left:14px;background:url("#{$imagepath}incognito/1x/incognito-xxxsmall.png") left top no-repeat;@include image-2x(url("#{$imagepath}incognito/2x/incognito-xxxsmall.png"),48px,48px)}}}// switch // ============================================================================= // Vars // ----------------------------------------------------------------------------- // since this uses a lot of headerbar measurements,reuse that shit $height-user-thumb:40px;$height-notification-badge:22px;$height-notification-icon:50px;$height-notification-border:2px;$height-usermenu-padding:15px;$height-usermenu-item:50px - $height-usermenu-padding*2;$width-notification:62px;$width-user-menu:200px;$user-menu-radius:2px;$color-active:#fff;$color-nav-bg:$S-color-body-bg;$color-user-menu-bg:#fff;$color-notification-normal:$Colors-blue-3;$color-notification-pink:$Colors-red-2;$color-nav-link:#d6e1f9;$color-nav-hover:#fff;$color-nav-active:#9dbaf2;$width-toggle-element:34px;$width-toggle-gutter:10px;$height-toggle-element:22px;$height-toggle-container:60px;$width-switch-gutter:3px;$width-switch:$height-toggle-element - $width-switch-gutter*2;$speed-transition:150ms;// ============================================================================= // The thing that covers your shit when you're locked down. // ----------------------------------------------------------------------------- // both .incognito-cover{position:absolute;top:0;left:0;right:0;overflow:hidden;// thumbnail &-profile{background:rgba(40,77,152,.7);color:$Colors-green-6;text-align:center;height:$height-user-thumb;@include transition(height $speed-transition ease-in,background 75ms ease-in);@include type(15px,$height-user-thumb)}// boost button &-button{cursor:default;background:$color-nav-bg;// we have to included the padded area,so in total it's the whole nav height height:$S-height-nav;// push it over just a little bit padding-left:3px;text-align:left;color:$Colors-green-3;@include type(16px,$S-height-nav)}}// ============================================================================= // toggle // ----------------------------------------------------------------------------- // the list element in the user menu .incognito-toggler{cursor:pointer;background:$Colors-gray-7;border-radius:$user-menu-radius $user-menu-radius 0 0;height:$height-toggle-container !important;border:0;// overwrite some defaults .nav-user-menu & .nav-user-menu-item{height:$height-toggle-container;line-height:$height-toggle-container + 1;padding-top:0;padding-bottom:0;@include transition(background $speed-transition ease-in)}// hide the border in the element after the toggler .nav-user-menu & + li:before{background:none}}// the switch-toggle .incognito-toggle{float:right;width:$width-toggle-element;// make the click area bigger padding:5px 0;// vertically center in the link margin-top:($height-toggle-container - $height-toggle-element - 10px)/2;// light this whole thing up on hover cursor:pointer;@include clearfix;.incognito-switch{display:block;float:left;width:$width-toggle-element;height:$height-toggle-element}}// just the switch .incognito-switch{display:block;position:relative;border-radius:$height-toggle-element/2;@include transition(background $speed-transition ease-in);&-position{display:block;position:absolute;width:$width-switch;height:$width-switch;border-radius:50%;background:#fff;top:$width-switch-gutter;@include transition(left $speed-transition ease-in)}}// label .incognito-toggler-label{float:left;.incognito-toggler-labelstate{display:none}}// ============================================================================= // User pane states // ----------------------------------------------------------------------------- .nav-right{&.incognito-state-on{.incognito-switch{background:$Colors-green-2}.incognito-switch-position{left:$width-toggle-element - $width-switch-gutter - $width-switch}.incognito-toggler-label .incognito-toggler-label-on{display:inline}#spotlighttokens{display:none}.incognito-cover{@include fade-and-hide(show,$speed-transition)}.incognito-cover-profile:hover{background:rgba(40,77,152,.5)}}&.incognito-state-off{.incognito-cover{@include fade-and-hide(hide,$speed-transition)}.incognito-toggler .nav-user-menu-item{color:$Colors-gray-5;.incognito-switch{background:$Colors-gray-5}&:hover{color:$Colors-gray-4;.incognito-switch{background:$Colors-gray-4}}}.incognito-switch-position{left:$width-switch-gutter}.incognito-toggler-label .incognito-toggler-label-off{display:inline}}}// onboarding #incognito-toggler-popover{position:absolute;right:90px;top:78px;text-align:center;width:320px;// just make everything border-box &,*{@include box-sizing(border-box)}h2.title{padding-top:158px;background:url("#{$imagepath}incognito/1x/incognito-xsmall_lt.png") center 6px no-repeat;@include image-2x(url("#{$imagepath}incognito/2x/incognito-xsmall_lt.png"),130px,132px)}.desc{@include type(15px,22px)}.big.blue.flatbutton.close{width:180px}// custom tail position .tail{margin-left:80px;width:10px;height:10px;top:-5px}// if they got no photo,move that shit over &.nophoto{right:10px;.tail{margin-left:115px}}}// upsell .modal.incognito-upsell{width:467px;margin-top:100px;.heading{font-weight:400;color:#fff;background:$Colors-blue-3;@include type(24px,98px)}.incognito-upsell-head{padding-top:6px;padding-bottom:0;font-weight:400;@include type(24px,38px)}.incognito-upsell-subhead{padding-bottom:20px;@include type(15px,32px)}.buttons{margin-top:30px;.flatbutton{width:180px}.simplecancel{margin-top:10px;margin-bottom:12px}}}.incognito-upsell-list{margin-left:91px}.incognito-upsell-list-item{position:relative;text-align:left;padding-left:28px;@include type(18px,33px);&:before{display:block;position:absolute;top:7px;left:0;color:$Colors-green-2;@include type(18px,18px);@include okicon("checkmark")}}// downgrade #p_settings .monolith #incognitoDowngrade{.incognito-downgrade-comments{min-height:106px}#incognito-downgrade-passwordContainer{display:block;float:left}label[for="incognito-downgrade-deletebilling"]{margin-top:20px}.incognito-downgrade-deletebilling-wrapper{label{margin-top:20px}}.incognito-downgrade-submit{width:180px}}// shame body:not(.okc2014){.okmasthead.incognito-masthead,.modal.incognito-modal,div.upgrade_ad.incognito{&,.okform label{@include type(15px,22px)}&,*{@include open-sans;@include box-sizing(border-box)}.flatbutton{height:42px;@include type(15px,42px);&.big{height:50px;@include type(18px,50px)}}}.okmasthead.incognito-masthead{.inner{padding:0 !important}}.modal.incognito-modal{h2{padding-bottom:14px;color:$Colors-gray-1;font-weight:600;// the line height is the capital height so top margins are exact @include type(18px,14px);@include open-sans-semibold}.incognito-modal-feature h2.incognito-modal-head{padding-bottom:11px}// overwrite that shit .incognito-modal-left h2.incognito-modal-head{color:#fff}&.incognito-modal-single .buttons{margin-top:2px !important;margin-bottom:0 !important}&.incognito-modal-packages .buttons{margin-top:43px !important;margin-bottom:0 !important}}div.upgrade_ad.incognito{margin-top:20px;font-size:15px;margin-bottom:-11px;.text{letter-spacing:0;font-size:15px}.arrow{width:14px;height:26px;right:14px;top:50%;margin-right:12px;margin-top:-13px;@include transition(margin-right 200ms ease)}a:hover .arrow{margin-right:6px}}}// instant_events //////////////////////////////////////////////////////////////////////////////// // everything is wrapped in this #im_footer{overflow:visible;width:auto;position:fixed;bottom:0;right:0;z-index:$Z-notifications}// global messaging //////////////////////////////////////////////////////////////////////////////// #global_messaging_container{position:relative;z-index:2;float:left;margin-right:40px;margin-left:-63px;width:0;height:20px;.global_messaging{position:absolute;bottom:0;left:0}}// event notifications (including boost reports) //////////////////////////////////////////////////////////////////////////////// $notification-width:270px;$notification-height:81px;#event_display_container{position:relative;z-index:1;overflow:hidden;float:left;margin:0 40px 0 -78px;width:0;height:20px;@include open-sans;.hasnotifications &{overflow:visible;width:$notification-width;margin-left:-63px;@include transition(width 0s linear,margin 0s linear)}&,.remove_last_notification &{@include transition(width 250ms ease-in 250ms,margin 250ms ease-in 250ms)}// for users in the global messaging experiment,when messages are open .has_global_messaging_panels &{margin-right:92px}}#event_display{position:absolute;width:$notification-width;bottom:$notification-height * -1;border-radius:2px;@include global-shadow-style;@include transition(padding-top 100ms ease-in,bottom 200ms ease-in 200ms);// add a blue bar to the notifications to make it "fun" &:after{content:" ";position:absolute;z-index:201;top:0;left:0;width:$notification-width;height:6px;background:$Colors-blue-3;@include border-top-radius(2px)}.hasnotifications &{bottom:20px}.hasnotifications.remove_last_notification &{bottom:$notification-height * -1}.hasnotifications.haspromo.collapsed &,.hasnotifications.hasreport.collapsed &{bottom:0}&.no_transition,.haspromo &,.hasreport &{@include transition(none)}}#event_display_body{position:relative;z-index:201;background:#fff;overflow:hidden;border-radius:2px;max-height:$notification-height * 3 - 1;.haspromo &,.hasreport &{border-top:0;@include border-top-radius(0)}}// orbit events:the pop up notifications #event_display_body .orbit_event{@include box-sizing(border-box);position:relative;width:100%;height:$notification-height;overflow:hidden;@include transition(height 200ms ease-in);border-top:1px solid $Colors-gray-6;&,*{@include box-sizing(border-box)}&:first-child{border-color:#fff;@include border-top-radius(2px);margin-top:-1px}&:last-child{@include border-bottom-radius(2px)}.orbit_inner{padding:20px 17px}img{display:block;width:40px;height:40px;float:left;margin-right:14px;border-radius:50%}.info{padding-top:1px;.user{font-size:15px;color:$Colors-gray-2}.action{@include type(13px,20px);color:$Colors-gray-3}}.okicon{font-size:14px;&.i-star{color:$Colors-yellow-2}}// take up the whole m'f'er .event_link{display:block;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%}.close{display:none;width:24px;height:24px;position:absolute;z-index:2;top:50%;margin-top:-12px;right:14px;@include type(13px,28px);color:$Colors-gray-5;text-align:center;&:hover{color:$Colors-gray-4}}&:hover{.close{display:block}}&.dispelled{height:0;border:0}&.dispelled_hard{display:none}}#im_footer.haspromo #event_display_body .orbit_event:hover a.close,#im_footer.hasreport #event_display_body .orbit_event:hover a.close{display:none}// Media Selectors @media all and (min-width:0px){head~body div.im_text{overflow:scroll}:root head~body div.im_text{overflow-y:scroll;overflow-x:hidden}}// PROK testing #im_footer.prok_test_0 div.im_from_staffrobot{display:none}// structure // Colors $errorRed:$Colors-red-1;$borderInactive:$Colors-gray-5;$borderHover:$Colors-gray-4;$borderActive:$Colors-blue-4;$borderLight:$Colors-gray-5;$placeholder:$Colors-gray-4;$fontColor:$Colors-gray-2;$suggestionHover:$Colors-blue-3;// Animation $formAnim:200ms;$formAnimFast:75ms;// Sprite $sprite:url('//cdn.okccdn.com/media/img/forms/form_spriteV9.png');$sprite2x:url('//cdn.okccdn.com/media/img/forms/form_spriteV9@2x.png');$spriteWidth:24px;$spriteHeight:740px;@mixin form-sprite-2x{@include image-2x($sprite2x,$spriteWidth,$spriteHeight)}$questionsSprite:url('//cdn.okccdn.com/media/img/questions/questions_spriteV3.png');// Misc. $inputPadding:($S-height-input - 2px - 22px)/2;$inputPaddingRightIcon:30px;.okform{color:$fontColor;opacity:0;@include transition(opacity $formAnim ease-in-out);&.initialized{opacity:1}// the clear buttons are the same in two places,so just declare them here .clearbtn,.chosen-container .chosen-single abbr{$width-icon:22px;position:absolute;top:($S-height-input - $width-icon)/2;right:12px;width:$width-icon;height:$width-icon;@include type($width-icon,$width-icon);&:before{color:$Colors-gray-3;@include okicon("close-circle")}&:hover{&:before{color:$Colors-gray-4}}}}// basics .okform{// Checkboxes / Radios // ------------------------------------------------------------------------- label{@include user-select(none);&.above{display:block;margin-bottom:10px}&.checkbox,&.radio{vertical-align:top;position:relative;display:inline-block;padding-left:30px;margin-bottom:10px;line-height:19px;.icon{position:absolute;display:block;top:0;left:0;width:19px;height:19px;background:$sprite no-repeat;@include form-sprite-2x}}&.checkbox{.icon{background-position:0 0}&:hover .icon,&.focus .icon{background-position:0 -38px}&.checked{.icon{background-position:0 -76px}&:hover .icon{background-position:0 -528px}}&.checked.focus .icon{background-position:0 -528px}&.disabled,&.disabled:hover{.icon{background-position:0 -376px}}&.disabled.checked{.icon{background-position:0 -414px}}}&.radio{.icon{background-position:0 -114px}&:hover .icon{background-position:0 -152px}&.checked{.icon{background-position:0 -191px}&:hover .icon{background-position:0 -565px}}&.disabled,&.disabled:hover{.icon{background-position:0 -452px}}&.disabled.checked .icon{background-position:0 -490px}}}// Inputs / textareas // ------------------------------------------------------------------------- input,textarea{padding:$inputPadding;padding-right:16px;background:#FFF;border:1px solid $borderInactive;color:$Colors-gray-2;margin:0 10px 10px 0;border-radius:2px;@include type(15px,22px);@include box-shadow(none !important);@include transition(border-color $formAnimFast ease-in);@include placeholder{//font-size:15px !important;color:$placeholder}&:hover{border-color:$borderHover}&:focus{border-color:$borderActive}&[disabled],&[readonly]{background-color:#f4f6f6;border-color:#d5dbdb;color:#d5dbdb}// See above @ label for checkbox / radio styles. &[type="radio"],&[type="checkbox"]{position:absolute;top:4px;left:2px;margin:0 !important;padding:0;z-index:-1;@include opacity(0)}}textarea{display:block;width:100%;height:160px;max-height:460px;resize:none;overflow:auto;&.clone{position:absolute !important;top:-9999px !important;left:-9999px !important;min-height:0 !important}}.buttons{@include clearfix;.btn{float:left;margin:0 5px 10px 0}}.placeholder{position:absolute;top:0;left:12px;line-height:36px;color:$placeholder;width:100%;text-align:left !important}}// inputcontainer .okform .inputcontainer{position:relative;display:inline-block;margin:0 10px 10px 0;&.statussuccess{.icon,.okform-feedback.message{color:$Colors-green-1}.icon:before{@include okicon("checkmark")}}&.statuserror{input,textarea,.chosen-container .chosen-single{border-color:$errorRed}.icon,.okform-feedback.message{color:$errorRed}.icon:before{@include okicon("alert")}// don't show a ! when it's a select &.select{.icon{display:none}}}&.statussuccess,&.statuserror{input,textarea{padding-right:$inputPaddingRightIcon}}// Select specific styles &.select{min-width:60px;.icon{right:$inputPadding + 16}}// Hide certain elements when empty &.empty{.clearbtn{display:none}}input,textarea{width:100%;margin:0}.okform-feedback.message{padding-top:5px;display:block;line-height:30px;height:30px;overflow:hidden;text-align:left;@include transition(height $formAnim ease-in);&.empty{padding-top:0 !important;height:0 !important}}.icon{position:absolute;height:16px;width:16px;top:13px;right:$inputPadding + 2;pointer-events:none;line-height:16px}}// suggestions .okform .inputcontainer .suggestions{position:absolute;z-index:1000;width:260px;display:block;margin-top:14px;visibility:visible;opacity:1;@include transition(opacity $formAnim linear);&.hide{visibility:hidden;opacity:0;@include transition(visibility 0s $formAnim,opacity $formAnim linear)}&.left,&.right{width:265px;top:-75px;.message{.arrow{top:70px;&:after{content:" ";display:block;position:absolute;top:-11px}}}.list{border-color:$errorRed}}&.left{left:-265px - 20;.message{.arrow{right:-20px;left:auto;@include triangle(20px,$errorRed,right);&:after{right:-10px;left:auto;@include triangle(22px,white,right)}}}}&.right{right:-265px - 20;.message{.arrow{left:-20px;right:auto;@include triangle(20px,$errorRed,left);&:after{left:-10px;right:auto;@include triangle(22px,white,left)}}}}.message{position:relative;height:auto;display:block;padding:10px 17px;background:$errorRed;color:#FFF;overflow:visible;@include border-top-radius(5px);@include transition(background-color $formAnim ease-in);.icon{top:15px;color:#fff}.arrow{position:absolute;top:-20px;left:20px;@include triangle(20px,$errorRed,up)}}.list{max-height:200px;overflow-y:auto;margin-top:0;background:#FFF;padding:10px 0;border:1px solid $borderLight;border-top:none;@include border-bottom-radius(5px);color:#555555;li{margin:0;padding:7px 17px;list-style:none;&.description{font-weight:bold}&:not(.description){cursor:pointer;&:hover{color:$suggestionHover}a{color:inherit}}}}}// Hide redundant icon when suggestions are up. .inputcontainer.hassuggestions > .icon{display:none}// large $largePaddingX:22px;$largePaddingY:13px;.okform .inputcontainer.large{input{$padding:($S-height-input-large - 2px - 22px)/2;padding-top:$padding;padding-bottom:$padding;padding-left:$padding}.icon{right:$largePaddingX + 5px;top:$largePaddingY + 3px}.clearbtn{height:24px;width:24px;right:16px;top:15px;background-position:0 -671px;&:hover{background-position:0 -715px}}.placeholder{left:22px;line-height:46px}}// chosen_default // @group Base .chosen-container{position:relative;display:inline-block;vertical-align:middle;zoom:1;*display:inline;-webkit-user-select:none;-moz-user-select:none;user-select:none;.chosen-drop{position:absolute;top:100%;left:-9999px;z-index:1010;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px solid #aaa;border-top:0;background:#fff}&.chosen-with-drop .chosen-drop{left:0}a{cursor:pointer}}// @end // @group Single Chosen .chosen-container-single{.chosen-single{position:relative;display:block;overflow:hidden;background-clip:padding-box;text-decoration:none;white-space:nowrap}.chosen-default{color:$placeholder}.chosen-single span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chosen-single abbr{position:absolute;top:6px;right:26px;display:block;width:12px;height:12px;font-size:1px}.chosen-single div{position:absolute;top:0;right:0;display:block;height:100%;b{display:block;width:100%;height:100%}}.chosen-search{position:relative;z-index:1010;margin:0;white-space:nowrap;input[type="text"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;height:auto;outline:0}}.chosen-drop{background-clip:padding-box}&.chosen-container-single-nosearch .chosen-search{position:absolute;left:-9999px}}// @end // @group Results .chosen-container .chosen-results{position:relative;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;li{display:none;margin:0;list-style:none;&.active-result{display:list-item;cursor:pointer}&.disabled-result{display:list-item;color:#ccc;cursor:default}&.highlighted{background-color:#3875d7;color:#fff;border-color:transparent}&.no-results{display:list-item;background:#f4f4f4}&.group-result{display:list-item;font-weight:bold;cursor:default}&.group-option{padding-left:15px}em{font-style:normal;text-decoration:underline}}}// @end // @group Multi Chosen .chosen-container-multi{.chosen-choices{position:relative;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;width:100%;height:auto !important;height:1%;cursor:text;li{float:left;list-style:none;&.search-field{margin:0;padding:0;white-space:nowrap;input[type="text"]{margin:1px 0;padding:5px;outline:0;border:0 !important;background:transparent !important;color:#666;font-size:100%;line-height:normal;border-radius:0}.default{color:#999}}&.search-choice{position:relative;margin:3px 0 3px 5px;padding:3px 20px 3px 5px;border:1px solid #aaa;border-radius:3px;background-color:#e4e4e4;background-clip:padding-box;color:#333;line-height:13px;cursor:default;.search-choice-close{position:absolute;top:4px;right:3px;display:block;width:12px;height:12px;font-size:1px}}&.search-choice-disabled{padding-right:5px;border:1px solid #ccc;background-color:#e4e4e4;color:#666}&.search-choice-focus{background:#d4d4d4}}}.chosen-results{margin:0;padding:0}.chosen-drop .result-selected{display:list-item;color:#ccc;cursor:default}}// @end // @group Active .chosen-container-active{.chosen-single{border:1px solid #5897fb}&.chosen-with-drop .chosen-single{border:1px solid #aaa;-moz-border-radius-bottomright:0;border-bottom-right-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0;div{border-left:none;background:transparent}}.chosen-choices{border:1px solid #5897fb;li.search-field input[type="text"]{color:#111}}}// @end // @group Disabled Support .chosen-disabled{cursor:default;.chosen-single,.chosen-choices .search-choice .search-choice-close{cursor:default}}// @end // selects $chosenResultsHeight:222px;.chosen-container{position:relative;font-weight:normal;/// Styles shared between chosen single and multiple /// .chosen-single,.chosen-choices{position:relative;line-height:36px;padding:2px;padding-left:12px;padding-right:26px;margin:0;border:1px solid $borderInactive;background:#FFF;color:$fontColor;border-radius:2px;@include transition(border-color $formAnimFast ease-in);&:hover{border-color:$borderHover}}/// Single (Regular select list) /// .chosen-single{// Arrow icon inactive > div{$width-icon:12px;width:$width-icon;height:$width-icon;top:($S-height-input - $width-icon)/2;right:12px;margin-top:0;@include type($width-icon,$width-icon);b{display:block;color:$Colors-gray-3;@include opacity(0.7);@include transition(opacity $formAnimFast ease-in);&:before{@include okicon("arrow-triangle-down")}}}// when there's a close button,make that the main icon // and remove the other one > abbr + div{display:none}// when it's not the default,add more padding &:not(.chosen-default){padding-right:36px}}.chosen-drop{$border_radius:4px;z-index:100;width:100%;border-bottom:1px solid $borderInactive;background:#FFF;border-radius:0 0 $border_radius $border_radius;.chosen-search{overflow:hidden;height:0;@include transition-property(height);@include transition-duration($formAnimFast);@include transition-timing-function(ease-in-out);input{padding-left:32px;background-image:$questionsSprite;background-position:10px -110px;background-repeat:no-repeat;@include border-bottom-radius(0)}}.chosen-results{max-height:$chosenResultsHeight;padding:0;margin:0;overflow:auto;@include transition(max-height $formAnimFast ease-in-out);li{padding:5px 10px;line-height:36px;&.highlighted{background:$Colors-blue-3;a{color:#FFF !important;// important is for ie8}&:last-child{border-radius:0 0 $border_radius $border_radius}}a{color:$fontColor}}}}// Placeholder .chosen-default{color:$placeholder}// Active &.chosen-container-active{.chosen-single{border-color:$borderActive}}&.chosen-container-active,&:not(.chosen-disabled):hover{// Arrow icon active .chosen-single > div b{@include opacity(1)}}// Disabled &.chosen-disabled{.chosen-single{border-color:$borderInactive !important;background-color:#f4f6f6;color:$placeholder;>div b{background:$sprite no-repeat 6px -338px;@include form-sprite-2x}}}// Searching &.chosen-searching{.chosen-drop{.chosen-search{height:$S-height-input;opacity:1}.chosen-results{max-height:222px - $S-height-input;height:$chosenResultsHeight - $S-height-input}}}/// Multiple /// .chosen-choices{padding:2px 2px 2px 6px;.search-choice{margin:3px 3px 3px 0;padding:3px 25px 3px 5px;line-height:22px;background:#fff;color:$fontColor;.search-choice-close{position:absolute;right:6px;top:50%;margin-top:-7px;width:14px;height:14px;background:$sprite no-repeat 0px -603px;@include form-sprite-2x;&:hover{background-position:0px -637px}}}.search-field{input[type="text"]{color:$placeholder}}}}// ============================================================================= // For everything that appears in the leaderboard spot. // ----------------------------------------------------------------------------- .okmasthead{overflow:hidden;height:130px;background:$Colors-blue-7;border-bottom:1px solid $Colors-blue-3;@include transition(height 200ms ease);.inner{width:964px;margin:0 auto}.text{float:left;width:600px;padding-top:2px;margin-left:50px;h3,&.headsubhead .head{@include okc-h2;color:#fff;padding-top:23px;padding-bottom:4px;font-weight:400;@include type(22px,30px)}p,&.headsubhead .subhead{color:$Colors-blue-6;@include type(16px,24px);@include helvetica}}.button{float:right;padding-top:45px;p.btn{width:182px}}.close{display:block;position:absolute;top:0;right:0;width:40px;height:40px;$iconSize:14px;.icon{color:$Colors-blue-6;font-size:$iconSize;position:absolute;top:50%;left:50%;margin-left:-$iconSize / 2;margin-top:-$iconSize / 2}&:hover{cursor:pointer;.icon{color:$Colors-gray-4}}// staffbar futzing body.staffbar &{top:31px}}&.closed,&.alistpromo.closed{height:0 !important;.close{display:none}}}body.expanded .okmasthead .inner{padding-right:184px}body.expanded.okc2014 .okmasthead .inner{padding-right:0}.okmasthead.alistpromo{&,.inner{height:110px}.inner{position:relative;body.okc2014 &{width:1120px}}.text{float:none;position:absolute}.button{float:none;position:absolute;top:50%;right:22px;padding-top:0;// this is purposefully pushed down 4px margin-top:-19px}}@mixin masthead-update-styles{.button{right:125px;margin-top:-23px;.flatbutton{width:185px}}.close{top:0}}// intoyou A-List ad with new illustrations .okmasthead.alistpromo.intoyou{@include masthead-update-styles;border-bottom-color:$Colors-blue-2;$img-root:"#{$css-imagepath}media/img/alist/pq_alist_leaderboard_intoyou";$img-width:200px;$img-height:110px;.image{display:block;margin-left:40px;width:$img-width;height:$img-height;background:url("#{$img-root}.png") 0 0 no-repeat;@include image-2x(url("#{$img-root}@2x.png"),$img-width,auto)}.text{top:26px;left:300px;margin:0;padding:0;p{color:#fff;font-weight:300;@include open-sans;@include type(22px,30px);strong{font-weight:400}}}.flatbutton{font-size:18px;font-weight:300}}// countdown ads .okmasthead.alistpromo.countdown{@include masthead-update-styles;padding-top:10px;&,.text{height:130px}p{span{display:block}span.textcountdown{display:inline}}.okcountdown{position:absolute;left:72px;top:50%;margin-top:-33px}.text{left:250px;width:620px;&.oneliner{margin-top:-14px}}}// anniversary party! $ribbon_width:1230px;$ribbon_height:101px;$ribbon_side_width:61px;$ribbon_side_divot_width:24px;$ribbon_fold_size:12px;$ribbon_color_fore:$Colors-teal-2;$ribbon_color_back:$Colors-teal-3;$ribbon_color_fold:$Colors-teal-1;$ribbon_background:$Colors-teal-4;@mixin ribbon-tail($side){$distance:$ribbon_side_width - $ribbon_fold_size;$divot_width:$ribbon_side_divot_width;$divot_height:$ribbon_height/2;$non_divot_width:$ribbon_side_width - $ribbon_side_divot_width;@if $side == left{&:before{left:-$distance;border-left-width:$divot_width;border-right-width:$non_divot_width;border-top-width:$divot_height;border-bottom-width:$divot_height;border-left-color:transparent}}@else{&:after{right:-$distance;border-right-width:$divot_width;border-left-width:$non_divot_width;border-top-width:$divot_height;border-bottom-width:$divot_height;border-right-color:transparent}}}.okmasthead.anniversarypromo{border-bottom:1px solid #01102c;background:$ribbon_background;&,.inner{height:108px}.inner{// the ribbon uses some negative z-index stuff // so reset the z-index here // also this can't have a background color! do that shit elsewhere! position:relative;z-index:0}.ribbon{width:$ribbon_width;height:$ribbon_height;position:absolute;left:50%;margin-left:-$ribbon_width/2;bottom:0;background:$ribbon_color_fore;color:#fff;text-align:center;// Ribbon tails &:before,&:after{content:"";position:absolute;display:block;bottom:-$ribbon_fold_size;border-style:solid;border-color:$ribbon_color_back;z-index:-1}@include ribbon-tail(left);@include ribbon-tail(right);.message{font-size:28px;line-height:$ribbon_height;white-space:nowrap;@include open-sans-light;.discount{font-size:70px;text-shadow:0 1px 1px #1e737b;@include open-sans-semibold}.flatbutton{// position absolutely so it centers properly position:absolute;right:25px;top:50%;margin-top:-25px;padding:0 34px;font-size:15px;line-height:50px;height:50px;color:$Colors-teal-2;border:0;width:auto;@include open-sans-semibold;&:hover{background:#fff;color:$Colors-teal-1}}// float the spans so the discount is smack dab in the center span{vertical-align:middle;display:inline-block;text-align:center;@include box-sizing(border-box);&.left,&.right{width:43%}&.left{padding-right:10px;text-align:right}&.right{padding-left:10px;text-align:left}&.discount{width:14%}}// folds &:before,&:after{content:"";position:absolute;display:block;border-style:solid;border-color:$ribbon_color_fold transparent transparent transparent;bottom:-$ribbon_fold_size}&:before{left:0;border-width:$ribbon_fold_size 0 0 $ribbon_fold_size}&:after{right:0;border-width:$ribbon_fold_size $ribbon_fold_size 0 0}}}}// Support OKC Masthead #support_okc_masthead{height:130px;background:#084AA4;border-bottom:1px solid #0F3B87;.inner{width:1150px;padding-right:0}.support_icon,.text,.flatbutton{position:relative;float:left}.text{top:34px;margin-right:20px;font-size:20px;line-height:30px;font-weight:400;color:$Colors-blue-5;-webkit-font-smoothing:antialiased;strong{font-weight:700;color:#FFF}body.firefox &{font-weight:300;strong{font-weight:600}}}.flatbutton{height:50px;top:37px;font-size:18px;line-height:50px;font-weight:400;-webkit-font-smoothing:antialiased}&.stamp{.support_icon{bottom:0;margin-left:30px;margin-right:45px;@include alist-masthead-sprite(perks)}.text{width:610px;margin-right:52px}.flatbutton{width:155px}}&.rubber_ducky{.support_icon{top:20px;margin-left:31px;margin-right:60px;@include alist-masthead-sprite(duckie)}.text{width:680px;margin-right:44px}.flatbutton{width:125px}}&.earth_heart{.support_icon{bottom:0;margin-right:42px;@include alist-masthead-sprite(planetheart)}.text{margin-right:46px;font-size:22px}.flatbutton{width:155px}}}// ============================================================================= // Billing woes // ----------------------------------------------------------------------------- .billingwoes{&,.text{height:130px}.inner{width:1030px;@include clearfix}.text{background:url(#{$css-imagepath}media/img/alist/billingwoes.svg) left top no-repeat;padding-left:290px;width:780px;margin-left:-20px;@include background-size(auto 150px)}.button{padding-top:((130px - 50px)/2);&,button.flatbutton{width:193px}}}// a set of general styles for the binary rating button $binary-rating-transition-time:75ms;.binary_rating_button,.binary_rating_button.flatbutton.silver{text-align:center;line-height:34px;@include transition(background $binary-rating-transition-time linear,color $binary-rating-transition-time linear,border $binary-rating-transition-time linear);.rating_like{display:inline-block}.rating_liked,.rating_unlike{display:none}.icon{display:inline-block;vertical-align:middle;width:18px;height:18px;font-size:18px;color:$Colors-gray-4;margin-top:-4px;margin-right:5px;margin-left:-6%;// the actual:before has a wonky layout due to display:inline // so let's just jackhammer that into place &:before{display:block}}&.liked{background:$Colors-orange-2;border-color:$Colors-orange-2;color:white;.rating_liked{display:inline-block}.rating_like{display:none}.icon{color:white}&:hover{background-color:lighten($Colors-orange-2,6%);border-color:lighten($Colors-orange-2,6%)}&:active{background-color:$Colors-orange-2;border-color:$Colors-orange-2}}// a version of the like button that is just a star. used in user rows. &.icon_only{display:block;width:19px;height:18px;padding:0;background:transparent;border:none;@include type(18px,18px);.icon{margin-left:0}.rating_like,.rating_liked{display:none}&,.icon{color:$Colors-gray-4}&.liked{background:none;&,.icon{color:$Colors-orange-2}.rating_like,.rating_liked{display:none}}}}$limelight-trans-speed:600ms;$info-trans-speed:300ms;#limelight_container{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:$Z-limelight}#limelight{position:absolute;box-shadow:0 0 0 1500px rgba(17,17,17,0.8);box-shadow:0 0 0 100vw rgba(17,17,17,0.8);box-shadow:0 0 0 100vmax rgba(17,17,17,0.8);border-radius:100%;opacity:0;cursor:pointer;@include transform(scale(6));@include transition-property(transform,opacity);@include transition-duration($limelight-trans-speed);@include transition-timing-function(ease);&.isShowing{opacity:1;@include transform(scale(1));.limelight-info{opacity:1;&--left{@include transform(translateX(-100%) translateY(-50%))}&--right{@include transform(translateX(100%) translateY(-50%))}&--top{@include transform(translateY(-100%) translateX(-50%))}&--bottom{@include transform(translateY(100%) translateX(-50%))}}}.limelight-info{position:absolute;width:400px;color:#FFF;opacity:0;cursor:default;@include transition-property(transform,opacity);@include transition-duration($info-trans-speed);@include transition-timing-function(ease);@include transition-delay($limelight-trans-speed + 50);&--left{top:50%;left:-50px;text-align:right;@include transform(translateX(-110%) translateY(-50%))}&--right{top:50%;right:-50px;text-align:left;@include transform(translateX(110%) translateY(-50%))}&--top{top:-50px;left:50%;text-align:center;@include transform(translateY(-110%) translateX(-50%))}&--bottom{bottom:-50px;left:50%;text-align:center;@include transform(translateY(110%) translateX(-50%))}&-title,&-body{margin-bottom:30px;text-shadow:1px 1px 3px rgba(#000,0.5)}&-title{font-size:22px;line-height:32px;strong{color:$Colors-green-2}}&-body{font-size:18px;line-height:28px;@include helvetica}&-cta{min-width:106px;height:50px;line-height:50px;width:auto;cursor:pointer}}}$errorRed:#ff715e;$lb_width:214px;$lb_height:350px;$lb_padding_x:48px;$lb_outer_width:$lb_width + ($lb_padding_x * 2);$animSpeed:300ms;// MAKE SURE TO UPDATE THIS IN LOGINBOX.COFFEE button.facebook_button,a.facebook_button{position:relative;&,&:disabled,&:disabled:hover{background-color:#4d6faf}&:hover{background-color:#5c7fc1}&:after{display:block;content:' ';width:11px;height:17px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAYAAAAL4VbbAAAASklEQVQ4jWP4//8/AxZsBMS7gfjLfySATaEqEH/8jwVgUzwbm0Jciu8iyS8AYgGYHDbFP5AUiyDLYVOM02aSFRMLaKyYdh4c1ooB5Mp/zkT9CA4AAAAASUVORK5CYII=);background-repeat:no-repeat;position:absolute;top:12px;left:15px}&:disabled:after{@include opacity(0.5)}}#login_box,#signup{button.flatbutton{font-weight:600;font-size:inherit}}#login_box{width:$lb_width;padding:28px $lb_padding_x 40px;margin-top:60px;font-size:13px;@include box-sizing(content-box);&.started_open{margin-top:120px;&::before{content:'';display:block;position:absolute;right:0;bottom:100%;left:0;height:120px;background:url('//cdn.okccdn.com/media/img/template/pq_splash_logo.png') center center no-repeat;@include image-2x(url('//cdn.okccdn.com/media/img/template/pq_splash_logo@2x.png'),206px,66px)}}// Modal components .title{margin:0 0 20px 0;text-align:center;@include type(22px,36px)}.description{margin:-10px 0 30px}> .content{margin:0;overflow:hidden}> .close{display:none}// General components .inputcontainer{width:100%;margin-right:0}button{width:100%;margin:10px 0;height:46px;line-height:46px}.forgot_password,.login_again{margin:7px 0;text-align:center;> a{color:#949aa6;&:hover{color:#474d59}}}// Action containers .loginbox_action{position:relative;width:$lb_width;float:left;margin-right:$lb_outer_width;opacity:1;visibility:hidden;@include transition(opacity $animSpeed ease-in-out);&:last-child{margin-right:0}}.actions_container{$number-of-children:7;// The actions make up the width of this. The reason we do margin n shit is // so that the modal is always the height of the highest action. width:($lb_outer_width + $lb_width) * 7;margin:0;@mixin show-action($position,$action_selector){margin-left:-($lb_width + $lb_outer_width) * $position;#{$action_selector}{visibility:visible}}// Facebook Connect &.show_fbc{@include show-action(0,'#facebook_connect')}// Login,default &,&.show_login{@include show-action(1,'#login_actions')}// Account reactivate &.show_reactivate{@include show-action(2,'#account_reactivation');#account_reactivation h2.title{// Only load image when it's shown background:url('//cdn.okccdn.com/media/img/misc/welcome_back_computer.png') center 30px no-repeat}}// Password recovery &.show_recovery{@include show-action(3,'#password_recovery')}// Recovery success &.show_recovery_success{@include show-action(4,'#password_recovery_success');#password_recovery_success h2.title{// Only load image when it's shown background:url('//cdn.okccdn.com/media/img/misc/rocket_mail.png') top center no-repeat;@include image-2x(url('//cdn.okccdn.com/media/img/misc/rocket_mail@2x.png'),92px,160px)}}// 2FA &.show_totp{@include show-action(5,'#totp_entry')}// provisional profiles &.show_provisional_block{@include show-action(6,'#provisional_block');h3.subtitle{font-size:19px;font-weight:600;color:$Colors-blue-3;border-top:1px solid $Colors-gray-6;padding-top:80px;padding-bottom:18px}p{color:$Colors-gray-2;@include type(16px,25px)}}&.transition_action{.loginbox_action{opacity:0}}}// Login // "or" .strikey{text-align:center;margin:24px 0 31px 0;&::before,&::after{content:' ';position:absolute;margin-top:11px;width:43%;border-top:1px solid rgba(0,0,0,0.1)}&::before{left:0}&::after{right:0}}#log_in_facebook{$fb-bg:#3B5999;background-color:$fb-bg;&:hover{background-color:lighten($fb-bg,8%)}&::after{top:14px;left:18px}margin:0}#login_passwordContainer{margin-bottom:10px;.message{color:$errorRed}}// Facebook connect // Login actions #login_actions{}// Reactivate account #account_reactivation{h2.title{padding-top:180px}}// Password recovery #password_recovery{}#recovery_submit{margin-top:0}// Recovery success #password_recovery_success{h2.title{padding-top:170px;margin-top:0}}#totp_save_box{padding-top:20px}.screen{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;background-color:#fff;@include opacity(0);@include transition(opacity 100ms ease-in-out)}&.screen{.screen{z-index:1;@include opacity(1)}}}$width-notification:62px;$messages-dropdown-width:400px;$messages-dropdown-height:380px;$right-offset:60px;$triangle-size:16px;$messages-dropdown-padding:20px;$header-height:50px;$footer-height:50px;$x-offset:$messages-dropdown-width - $right-offset;@mixin translucent-border{content:" ";display:block;position:absolute;height:1px;background:transparentize($Colors-gray-3,0.65)}#messages-dropdown-wrapper{margin-right:$right-offset * -1 + $width-notification / 2;position:absolute;z-index:$Z-messages-dropdown;@include transform-origin($x-offset 0);opacity:0;pointer-events:none;visibility:hidden;@include transform(scale(0.97));@include transition(opacity 100ms ease,transform 100ms ease,visibility 0ms 100ms ease);&.show{opacity:1;visibility:visible;pointer-events:auto;@include transform(scale(1));@include transition(opacity 200ms ease,transform 150ms ease)}&.fixed{position:fixed;top:$S-height-nav - 3 !important}}#messages-dropdown{width:$messages-dropdown-width;height:$messages-dropdown-height;background:#fff;border-radius:3px;@include global-shadow-style;&:after{content:" ";display:block;position:absolute;top:$triangle-size * -1;right:$right-offset - ($triangle-size / 2);@include triangle($triangle-size,#fff,up)}}.messages-dropdown-header{display:block;position:absolute;z-index:2;top:0;left:0;width:100%;height:$header-height;padding-top:16px;padding-left:$messages-dropdown-padding;font-size:18px;color:$Colors-gray-2;&:hover{color:$Colors-blue-3}&:after{@include translucent-border;top:$header-height;left:0;width:100%}}#messages-dropdown .okmailbox-body-threadlist,#messages-dropdown > .loader{position:absolute;z-index:1;top:$header-height;left:0;width:100%;height:$messages-dropdown-height - $header-height - $footer-height}#messages-dropdown > .loader{overflow:hidden}#messages-dropdown .okmailbox-body-threadlist{overflow-x:hidden;overflow-y:auto}.messages-dropdown-empty-message{display:block;width:100%;padding:127px 50px 0;color:$Colors-gray-3;@include type(16px,26px);text-align:center}// include the okmailbox thread styles,with a few overrides #messages-dropdown{// these variables are required for the threads include $thread-height:82px;$thread-margin:1px;$thread-padding:20px;$thread-inner-height:40px;$thread-fade-speed:200ms;.mboxthread{position:relative;height:$thread-height;margin-bottom:$thread-margin;background:#fff;border-radius:3px;box-shadow:0 1px 1px $Colors-gray-5;> a{display:block;padding:$thread-padding}&:hover{.mboxthread-timestamp{@include fade-and-hide(hide,$thread-fade-speed)}.mboxthread-actions{@include fade-and-hide(show,$thread-fade-speed)}}&--is-spam{display:none}&-loading{.loader{position:absolute;top:50%;left:50%}}&-icon{position:absolute;top:42px;left:18px;@include transform(translateX(-50%) translateY(-50%));&-unread{display:block;width:10px;height:10px;background:$Colors-blue-3;border-radius:100%}&-remoteread{color:$Colors-gray-5}}&-photo{float:left;width:$thread-inner-height;height:$thread-inner-height;margin-left:25px;margin-right:15px;img{height:100%;width:100%;border-radius:100%}}&-username{color:$Colors-gray-1;padding:4px 0 4px;font-weight:600;@include type(16px,22px)}&-snippet{display:inline-block;@include ellipsis;max-width:64%;color:$Colors-gray-4;@include type(14px,22px)}&-timestamp{position:absolute;top:$thread-padding;right:30px;@include fade-and-hide(show,$thread-fade-speed);color:$Colors-gray-4;@include type(14px,$thread-inner-height)}$btn-size:36px;&-actions{position:absolute;top:$thread-padding + (($thread-inner-height - $btn-size) / 2);right:24px;@include fade-and-hide(hide,$thread-fade-speed);button{display:inline-block;width:$btn-size;text-align:center;height:$btn-size;line-height:$btn-size;font-size:22px;color:$Colors-gray-2;background:none;border:none;cursor:pointer;opacity:0.5;@include transition(opacity,50ms);&:hover{opacity:1}}}}// Animations .threadlist-enter,.threadlist-leave{position:absolute;width:100%;left:0;@include transition-property(transform,opacity);@include transition-duration(10ms);@include transition-timing-function(ease)}.threadlist-enter,.threadlist-leave.threadlist-leave-active{opacity:0}.threadlist-enter{@include transform(translateX(150px))}.threadlist-leave.threadlist-leave-active{@include transform(translateX(-150px))}.threadlist-leave,.threadlist-enter.threadlist-enter-active{opacity:1;@include transform(translateX(0px))}.threadrow-enter,.threadrow-leave{@include transition-property(opacity);@include transition-duration(400ms);@include transition-timing-function(linear)}.threadrow-enter,.threadrow-leave.threadrow-leave-active{opacity:0}.threadrow-leave,.threadrow-enter.threadrow-enter-active{opacity:1}.threadicon-enter,.threadicon-leave{@include transition(opacity 50ms ease)}.threadicon-enter,.threadicon-leave.threadicon-leave-active{opacity:0}.threadicon-leave,.threadicon-enter.threadicon-enter-active{opacity:1}.mboxthread{background:none;box-shadow:none;// bottom border &:after{content:" ";display:block;position:absolute;bottom:-1px;left:$messages-dropdown-padding;width:$messages-dropdown-width - $messages-dropdown-padding * 2;height:1px;background:$Colors-gray-6}&:hover{.mboxthread-timestamp{@include fade-and-hide(show,0)}}&:last-child:after{display:none}&-icon{position:absolute;left:14px;&-remoteread{position:relative;top:1px;font-size:13px}&-replied{color:$Colors-gray-5}}&-photo{margin-top:2px;margin-right:13px;margin-left:5px}&-username{padding:0}&-timestamp{top:9px;right:$messages-dropdown-padding;margin:0;@include type(13px,normal);color:$Colors-gray-5}&-actions{top:30px;right:20px;button{font-size:18px}}}}.messages-dropdown-footer{position:absolute;z-index:2;bottom:0;left:0;width:100%;height:$footer-height;padding-top:14px;font-size:14px;color:$Colors-blue-3;text-align:center;&:hover{color:$Colors-blue-4}&:after{@include translucent-border;bottom:$footer-height;left:0;width:100%}}.oktooltip.dark.messages-dropdown-tooltip,.oktooltip.small.messages-dropdown-tooltip{z-index:$Z-messages-dropdown + 1}// variables //////////////////////////////////////////////////////////////////////////////// $messaging-width:440px;$messaging-height:430px;$messaging-br:2px;$side-padding:20px;$header-height:62px;$header-top-padding:12px;$header-bottom-padding:10px;$compose-height:140px;$compose-padding:23px;$message-top-margin:20px;$message-side-margin:36px;$message-top-padding:12px;$message-side-padding:18px;$message-bottom-padding:14px;$message-br:2px;$timestamp-top-margin:25px;$timestamp-bottom-margin:-5px;$minimized-width:240px;$minimized-height:50px;$new-message-duration:300ms;$fsize-small:14px;$lheight-small:21px;$fsize-large:16px;$lheight-large:22px;// mixins //////////////////////////////////////////////////////////////////////////////// // a mixin to provide styles for elements that float on top of the messages @mixin on-top-of-messages($side){$border:transparentize($Colors-gray-3,1);$active-border:transparentize($Colors-gray-3,0.65);$active-border-fallback:$Colors-gray-6;position:absolute;z-index:3;left:0;width:100%;padding-right:$side-padding;padding-left:$side-padding;background:#fff;.border{position:relative;left:0;float:left;width:100%;height:1px}@if $side == "top"{top:0;@include border-top-radius($messaging-br);.border{bottom:$header-bottom-padding * -1 - 1px;background:$active-border}}@if $side == "bottom"{bottom:0;.border{top:$compose-padding * -1 - 1;background:$border;@include transition(background 200ms linear)}&.show_border .border{background:$active-border}}}@mixin message-icon-styles{top:2px;left:2px;font-size:22px}@mixin unread-messages-icon{.icon{position:absolute}.i-messages{@include message-icon-styles;color:$Colors-green-1}.i-ellipsis-h{display:block;top:0;left:7px;@include type(12px,24px);color:#fff}}@mixin conversation-icon{.icon{position:absolute}.i-messages{@include message-icon-styles;color:$Colors-blue-3}.i-ellipsis-h{display:none}}// includes //////////////////////////////////////////////////////////////////////////////// $image-size:$header-height - $header-top-padding - $header-bottom-padding;$image-offset:-4px;.global_messaging .header{height:$header-height + 1;padding-top:$header-top-padding;padding-bottom:$header-bottom-padding;@include on-top-of-messages(top);.linkwrap{float:left;margin-left:$image-offset}.image{position:relative;float:left;width:$image-size;height:$image-size;img,.unread_message_icon{position:absolute;top:0;left:0}img{width:100%;height:100%;border-radius:50%}$dot-size:16px;$border-size:2px;.online{position:absolute;overflow:hidden;bottom:$border-size * -1;left:$border-size * -1 - 2;width:$dot-size;height:$dot-size;border-radius:50%;border:$border-size solid #fff;background:$Colors-green-3;line-height:500px}.unread_message_icon{display:none;@include unread-messages-icon}}h2{position:absolute;left:$image-size + $side-padding + $image-offset;margin:0;margin-bottom:0;max-width:60%;padding:0;padding-top:9px;padding-bottom:10px;padding-left:13px;@include type($fsize-large,$lheight-large);color:$Colors-gray-2;font-weight:400;@include ellipsis}.controls{float:right;margin-top:5px;margin-right:-4px;position:relative}$control-size:30px;.options,.minimize,.close{position:relative;z-index:2;float:left;margin-left:4px;width:$control-size;height:$control-size;color:$Colors-gray-4;@include type(13px,34px);text-align:center;&:first-child{margin-left:0}&:hover{color:$Colors-gray-3}&.options{font-size:14px}}// a link to expand the fucker covers the entirety and is transparent .maximize{display:none;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%}// options popover $popover-width:150px;$popover-offset:$popover-width * -0.5 + 15;// 15 for the parent el width $popover-padding:15px;.popover{@include fade-and-hide(hide,150);position:absolute;z-index:3;top:$header-height - $control-size + 9;left:$popover-offset;width:$popover-width;&.show{@include fade-and-hide(show,150)}.contents{@include clearfix;border:none;@include global-shadow-style;padding:0;.block{display:block}.unblock{display:none}&--is-blocked{.block{display:none}.unblock{display:block}}&--is-inactive{.block,.unblock,.flag{display:none}}}.tail{top:-8px}button,a{@include bare-button;position:relative;float:left;width:100%;padding:13px $popover-padding 12px;color:$Colors-gray-2;text-align:left;@include type($fsize-small,$lheight-small);&:first-child{margin-top:0}&:hover{color:$Colors-blue-3}// fake the border with pseudoelements so that the links can span the // entire width of the li,and the border can be less wide &:before{content:" ";display:block;position:absolute;bottom:-1px;width:80%;height:1px;background:$Colors-gray-6}&:last-of-type:before{opacity:0}}// special behavior in the delete area .delete-options{display:none;float:left;width:$popover-width - $popover-padding * 2;margin:0 $popover-padding;border-top:1px solid $Colors-gray-6;.delete-cancel,.delete-confirm{float:left;width:50%;padding-right:0;padding-left:0;&.delete-confirm{text-align:right;color:$Colors-red-1;&:hover{color:$Colors-red-2}}&:before{display:none}}}&--is-deleting{.delete-trigger{display:none}.delete-options{display:block}}}&.first_message_success{&.new_template{// put even higher than the message success,which is z-index:3 z-index:4;// this is ugly,but... make the header only as wide as the close button left:auto;right:0;width:0;background:transparent;// hide some extra buttons,and th e thumbnail > a,.options,.minimize{display:none}}&.old_template{.options,.minimize{opacity:0}}}}@mixin small-text{font-size:$fsize-small;line-height:$lheight-small;color:$Colors-gray-5}.global_messaging{$other-side-margin:84px;.timestamp .message,.message_meta,.scam_warning{float:left;clear:both}.message,.scam_warning div{position:relative;top:0;clear:both;margin-top:$message-top-margin;padding:$message-top-padding $message-side-padding $message-bottom-padding;border-radius:$message-br;@include type($fsize-small,$lheight-small);white-space:pre-wrap;word-wrap:break-word;&.message{max-width:$messaging-width - $message-side-margin - $other-side-margin}$tail-size:13px;&:before{content:" ";position:absolute;bottom:9px}&.theirs{float:left;margin-right:$other-side-margin;margin-left:$message-side-margin;background:$Colors-gray-6;color:$Colors-gray-2;&:before{left:-$tail-size + 1;@include triangle($tail-size,$Colors-gray-6,up-right)}a{color:$Colors-gray-2;text-decoration:underline;&:hover{color:$Colors-gray-3}}}&.yours{float:right;margin-right:$message-side-margin;margin-left:$other-side-margin;background:$Colors-blue-3;color:#fff;&:before{right:-$tail-size + 1;@include triangle($tail-size,$Colors-blue-3,up-left)}a{color:#fff;text-decoration:underline;&:hover{color:$Colors-blue-5}}}&.just_appended{opacity:0}}.timestamp{width:100%;margin-top:$timestamp-top-margin;margin-bottom:$timestamp-bottom-margin;text-align:center;@include small-text}// the first message's timestamp,if present,gets less padding .messages > li:first-child > .timestamp{margin-top:15px}// sent from chat,read receipts .message_meta{width:100%;margin-top:5px;margin-bottom:-4px;@include small-text;&.yours{text-align:right;padding-right:$message-side-margin}&.theirs{text-align:left;padding-left:$message-side-margin}.read_receipt{.icon{position:relative;top:1px;margin-right:3px}}}.scam_warning{padding-right:$message-side-margin;padding-left:$message-side-margin;&:before{display:none}div{background:#ffded7;color:$Colors-red-1;a{color:$Colors-gray-3;text-decoration:underline;&:hover{color:$Colors-gray-2}}}}$mm-bg:#FFE8C3;$mm-color:#FFAB23;$mm-icon:#FFB640;.mutual_match{float:left;width:100%;padding-right:$message-side-margin;padding-left:$message-side-margin;text-align:center;.mutual_match_contents{float:left;width:100%;margin-top:18px;padding:12px 0;background:$mm-bg;color:$mm-color;border-radius:$message-br}.icon_wrapper{display:inline-block;width:36px;height:36px;margin-right:10px;border:2px solid $mm-icon;color:$mm-icon;border-radius:50%;@include type(18px,36px)}.title{position:relative;bottom:3px;@include type($fsize-large,$lheight-large)}.subtitle{display:none}// initial state gets a larger version &.mutual_match_big{.subtitle{float:left;width:100%;display:block;margin-top:17px;color:$Colors-orange-2;@include type($fsize-large,$lheight-large)}}}// a loader for reverse infiniscroll .spinner_li{padding-top:20px;$spinner-size:28px;.spinner_wrapper{float:left;width:$spinner-size;height:$spinner-size;@include center($spinner-size)}}}.global_messaging .compose{@include on-top-of-messages(bottom);min-height:$compose-height;padding-top:$compose-padding;padding-bottom:$compose-padding - 5;&.hide_border .border{display:none}// only show initialized okforms opacity:0;@include transition(none);&.initialized{opacity:1}.inputcontainer.textarea{float:left;width:100%;margin:0;margin-bottom:10px;textarea{min-height:60px;max-height:126px;padding:11px 8px 8px 13px;@include type($fsize-small,$lheight-small)}}// hide the okform status message by default,and override some styles // inherited from the messages ul .message{display:none;margin:0;padding:0;max-width:100%;@include transition(none)}&.has_error{.message{display:block}}.draft_message{float:left;max-width:130px;margin-top:10px;color:$Colors-gray-4;opacity:0;@include transition(opacity 200ms linear);&.error{color:$Colors-red-2}&.show{opacity:1;@include transition(opacity 75ms linear)}}// "enter to send" checkbox. redone from the standard to have the checkbox // on the right label,body.okc2014 &.okform label.checkbox{float:right;margin-top:10px;margin-bottom:8px;color:$Colors-gray-4;cursor:pointer;@include type($fsize-small,$lheight-small - 3);// put the check on the right padding-right:26px;padding-left:0;input{left:0;right:2px}.icon{left:auto;top:0;right:0;opacity:0.85}&:hover .icon,&.focus .icon{opacity:1}}button,button.flatbutton{float:right;margin-left:20px;// for "enter to send" width:90px;// set these explicitly,so that they do not change in the next template height:36px;line-height:36px;@include type($fsize-small,36px)}&.enter_to_send{button{display:none}}}.global_messaging .compose_message{@include on-top-of-messages(bottom);@include type($fsize-large,$lheight-large);padding:25px 0 30px;text-align:center;color:$Colors-gray-4;&:before{content:"";position:absolute;top:0;left:50%;height:1px;width:400px;margin-left:-200px;background:$Colors-gray-5}a{color:$Colors-blue-3;&:hover{color:$Colors-blue-4}}}// the overflow manager #global_messaging_overflow{position:absolute;z-index:20;display:block;bottom:0;left:0;width:75px;height:$minimized-height;@include open-sans;&,#global_messaging_overflow_trigger{color:$Colors-gray-2;@include type($fsize-large,$lheight-large)}&,*{@include box-sizing(border-box)}#global_messaging_overflow_trigger{position:relative;display:block;width:100%;height:100%;padding-top:14px;padding-left:11px;background:#fff;@include border-top-radius($messaging-br);@include global-shadow-style;@include conversation-icon;$icon-size:25px;.icon_wrapper{position:relative;float:left;width:$icon-size;height:$icon-size}.count{float:left;width:27px;margin-top:1px;margin-left:2px;text-align:center;font-size:18px;&.three_digit{font-size:15px}}&:hover{background:$Colors-gray-7}}// the popup which lists threads #global_messaging_overflow_threads{position:absolute;bottom:$minimized-height;width:$minimized-width;min-height:$minimized-height;max-height:$minimized-height * 5.5;overflow:auto;background:#fff;border-radius:$messaging-br;@include global-shadow-style;opacity:0;visibility:hidden;@include transform(translateY(15px));@include transition-property(transform,opacity);@include transition-duration(150ms);@include transition-timing-function(ease);.global_messaging{position:relative;box-shadow:none;border-radius:0;border-top:1px solid $Colors-gray-5;&:first-child{border-top:0}&:hover{background:$Colors-gray-7}// force responsive width for people with lots of tabs open and scrollbars &,&.minimized{width:100%}}.header{background:none}}&.unread_messages{#global_messaging_overflow_trigger{@include unread-messages-icon}}&.show_threads{#global_messaging_overflow_trigger{border-radius:0;.i-messages{color:$Colors-gray-4}}#global_messaging_overflow_threads{opacity:1;visibility:visible;@include transform(translateY(0px))}}// direction for the thread popup &.open_left #global_messaging_overflow_threads{right:0;border-bottom-right-radius:0}&.open_right #global_messaging_overflow_threads{left:0;border-bottom-left-radius:0}}#global_messaging_overflow_intro_tooltip{z-index:20005;max-width:266px;// this fucker's off center so it doesn't overlap the messaging window $offset:-106px;margin-left:$offset;.arrow{margin-left:$offset * -1 - 10}.new{color:$Colors-orange-1;@include open-sans-semibold}}// some styles specific to mobile devices .global_messaging.mobile_mode{.message,.scam_warning div{@include type(16px,21px)}// hide enter to send .compose{label,input[type="checkbox"]{display:none}textarea,input,textarea:focus{font-size:16px}}}// messenger styles //////////////////////////////////////////////////////////////////////////////// @include keyframes(global-messaging-open){0%{opacity:0.4;@include transform(translateY(50px))}100%{opacity:1;@include transform(translateY(0px))}}.global_messaging{position:relative;overflow:hidden;float:left;width:$messaging-width;height:$messaging-height;background:#fff;@include global-shadow-style;@include border-top-radius($messaging-br);@include open-sans;// Disable for now,return to it later // @include animation(global-messaging-open 100ms ease 1);// Flash when opened twice opacity:1;@include transition(opacity 150ms linear);&.not_shown{opacity:0.6;@include transition(opacity 75ms linear)}&,*{@include box-sizing(border-box)}ul{@include box-sizing(content-box);position:absolute;z-index:2;width:$messaging-width;height:$messaging-height - $header-height - $compose-height - 21;top:$header-height + 1;// 1 = border overflow-y:auto;// this is a little crazy,but forcing gpu here keeps a display bug from // happening on /match (where scrollbars in the global messaging system were // vanishing when it was overlapping a user_info block on a match card) -webkit-transform:translateZ(0);li{position:relative;float:left;width:100%}&.messages{opacity:0;&.show{opacity:1}}}// a wrapper for a newly appended message to animate in .appended_message{@include box-sizing(border-box);position:absolute;overflow:visible;z-index:1;top:auto;width:100%;&.transition{@include transition(bottom $new-message-duration - 100 ease-in-out);.message{@include transition(padding-bottom $new-message-duration ease-in-out)}}// overwrite the default styles for appended messages .just_appended{opacity:1;padding-bottom:$message-top-padding + 10}// hide all timestamps and meta info when shit's flying around .timestamp,.message_meta{opacity:0}}.loading_bar_wrapper{position:absolute;z-index:4;top:$header-height;left:$side-padding;width:$messaging-width - $side-padding * 2;height:2px;opacity:0;@include transition(opacity 150ms linear);&.loading{opacity:1;@include transition(opacity 0ms linear);.loading_bar{@include transition(width 400ms ease-in-out)}}&.slow{.loading_bar{@include transition(width 2000ms ease-in-out)}}.loading_bar{width:100%;height:100%;background:$Colors-green-2}}// Staff and disabled have the compose message,which needs a lil' room. &.staff,&.disabled{ul.messages{li:last-child{margin-bottom:20px}}}// loader for when we don't have any user data yet $loader-size:32px;&.loading{position:absolute;right:0;left:auto !important;height:285px}&.minimized{width:$minimized-width;height:$minimized-height;.header{height:$minimized-height;padding-top:13px;padding-right:13px;padding-left:18px;&:hover{background:$Colors-gray-7}.image{width:25px;height:25px;margin-left:-4px;.online{display:none}}h2{left:40px;max-width:72%;padding-top:1px;padding-left:9px}.controls{margin-top:-4px}.maximize{background-color:rgba(255,255,255,0);// ie9 hack to get maximize on top of windows display:block}.close{margin-top:2px;opacity:0;@include transition(opacity 100ms linear)}&:hover{.close{opacity:1}}}.messages{opacity:0}}// when you open a messaging window with a new person &.no_messages,&--failure{height:285px;// hate to hard code this,but fuck it &.no_messages_error{height:309px}.header{.border,.options{display:none}}.compose{padding-top:0;// hide the "enter to send" checkbox label{display:none}$new-message-compose-height:157px;.inputcontainer.textarea textarea{min-height:$new-message-compose-height;height:$new-message-compose-height;max-height:$new-message-compose-height}}.global_messaging_failure_error{position:absolute;top:50%;margin-top:-10px;padding:0 20px;text-align:center;color:$Colors-red-1}}&.no_messages.minimized{.compose{display:none}}&.unread_messages .header{$animation-time:5000ms;.image{img{display:none}.unread_message_icon{display:block}}}// message sending success .message_success_wrapper.old_template{opacity:0;@include transition(opacity 200ms linear);&.show{opacity:1}$success-height:60px;.message_success{position:absolute;top:$header-height;left:$side-padding;width:$messaging-width - $side-padding * 2;height:$success-height;background:$Colors-green-4;border-radius:2px;text-align:center;color:$Colors-green-1;@include type($fsize-large,$success-height)}.alist{position:absolute;bottom:36px;left:0;width:100%;text-align:center;color:$Colors-gray-4;@include type($fsize-small,$lheight-small);a{color:$Colors-gray-4;text-decoration:underline;&:hover{color:$Colors-gray-3}}}}.message_success_wrapper.new_template{// put on top of messages z-index:3;position:absolute;left:0;right:0;top:0;bottom:0;background:#fafbfd;@include border-top-radius($messaging-br);opacity:0;@include transition(opacity 200ms linear);&.show{opacity:1}&.show_similar .message_success_similar{display:block}.message_success{text-align:center;background:#fff;padding:20px 0 17px;// push this over 10px padding-right:10px;@include border-top-radius($messaging-br);h2{font-weight:400;color:$Colors-green-1;padding:0;@include type($fsize-large,$lheight-large)}.sidenote{color:$Colors-gray-4;@include type($fsize-small,$lheight-small);a{color:$Colors-gray-4;text-decoration:underline;&:hover{color:$Colors-gray-3}}}}$width-icon:90px;$width-padding:15px;.message_success_similar{border-top:1px solid $Colors-gray-6;text-align:center;h2{padding-top:3px;padding-bottom:2px;@include type(18px,70px);@include open-sans-semibold}.similar_users{width:($width-icon + $width-padding*2)*3;margin:0 auto;.similar_user{float:left;border-radius:50%;overflow:hidden;margin:0 $width-padding;&,a,img{display:block;width:$width-icon;height:$width-icon}}}}}}.oktooltip.global_messaging_tooltip{&,&.small,&.dark{z-index:$Z-global-messaging-tooltips}}// scam warning modal #global_messaging_scam_warning{width:520px;.content{@include type(15px,22px);text-align:left;ol{list-style-type:disc;li{margin-top:8px;margin-left:20px}}}&.aligncenter .buttons{margin-top:35px;margin-bottom:15px}}$padding-height:$S-gutter;$padding-width:$S-gutter;$title-height:74px;// Matched with Modal.animationSpeed in modal.coffee $speed-animation:200ms;// structure // Animation stuff #windowshade,.modal{visibility:hidden;opacity:0;@include transition-property(visibility,opacity,background);@include transition-duration(0ms,$speed-animation,$speed-animation);@include transition-timing-function(linear,ease-in,ease-in);@include transition-delay($speed-animation,0ms,0ms);&.show{visibility:visible;opacity:1;@include transition(opacity $speed-animation ease-in)}}// windowshade #windowshade{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;background:rgba(#111,0.7);z-index:$Z-modal-shade;&.quickbuy:not(.windowshade-okpay){background:rgba(235,237,242,.96)}.modal.show{position:relative}body.okc2014_onboarding &{top:$S-height-nav}body.okc2014_onboarding.staffbar:not(.staffbar-bottom) &{top:$S-height-nav + 30px}}// modal .modal{position:absolute;margin:60px 0;left:50%;top:0;width:$S-width-modal;margin-left:$S-width-modal * -0.5;padding:$padding-height $padding-width $padding-height;background:$Colors-gray-8;z-index:$Z-modal;border-radius:5px;// Modal components // ------------------------------------------------------------------------- > .heading{margin-top:-$padding-height;margin-left:-$padding-width;margin-right:-$padding-width;margin-bottom:30px;border-top-left-radius:5px;border-top-right-radius:5px}.image{margin-bottom:15px}.title{padding:0;margin-bottom:5px;font-weight:400;@include type(18px,$title-height)}.content{margin:0;&.empty{margin-top:0}// if the content has a title,drop some margin in it > .title:first-of-type{margin-bottom:$S-gutter-modal}}.buttons{margin-top:$S-gutter-modal;ul{margin:0;li{display:inline-block;vertical-align:top;margin-right:5px;&.align-right{float:right}&:last-child{margin-right:0}}}.flatbutton,.btn{vertical-align:top;width:auto;min-width:120px;margin:0}.btn a{padding:0 20px}.btn.simple a{padding:0}.simplecancel{display:inline-block;font-size:15px;line-height:21px;color:$Colors-gray-3;box-shadow:0 1px 0 $Colors-gray-3;margin-top:16px;// in case it's a button background:transparent;border:0;padding:0;cursor:pointer;&:hover{box-shadow:none}}}> .close{display:block;position:absolute;top:0;right:0;width:$title-height;height:$title-height;color:$Colors-gray-4;text-align:center;&:hover{color:$Colors-gray-2}.icon,.icon:before{@include type(15px,$title-height)}}// Element interactions // ------------------------------------------------------------------------- .title,.desc{+ .content:not(.empty){margin-top:$S-gutter-modal}}// Draggable stuff // ------------------------------------------------------------------------- $dragSize:30px;.drag_area{height:0;width:0;overflow:visible;display:none;.top,.left,.right,.bottom{position:absolute}.top,.bottom{width:100%;height:$dragSize;left:0}.left,.right{top:0;bottom:0;width:$dragSize}.top{top:0}.left{left:0}.right{right:0}.bottom{bottom:0}}&.draggable{.drag_area{display:block}}// Modal types // ------------------------------------------------------------------------- &.default_type{.title_container{height:$title-height;padding:0 30px;margin-top:-$padding-height;margin-left:-$padding-width;margin-right:-$padding-width;margin-bottom:30px;background:#FFF;border-bottom:1px solid $Colors-gray-6;border-top-left-radius:5px;border-top-right-radius:5px}.title{text-align:left}}&.inline_type{box-shadow:1px 2px 10px 0 rgba($Colors-gray-3,0.6);.title{margin:0;@include type(24px,52px)}.desc{@include type(16px,22px)}}// Modifier classes // ------------------------------------------------------------------------- &.small{width:$S-width-modal-small}&.behind{z-index:$Z-modal-behind}&.alignleft{text-align:left}&.aligncenter{text-align:center}&.alignright{text-align:right;> .close{right:auto;left:0}}&.no_close{> .close{display:none}}// stack buttons -- handy if you have a cancel link &.stackedbuttons{.buttons{ul{li{display:block;margin:0;.flatbutton{display:inline-block}}}}}// fullbleedheading -- handy if you need to wipe out the border &.fullbleedheading{> .heading{border-radius:2px 2px 0 0}}}.modalform{.content{padding-top:40px;padding-bottom:12px}}$quantity-bar-stripe-width:30px;$quantity-bar-stripe-color:$Colors-blue-6;$quantity-bar-height:15px;// "what I want" modal,on quickmatch and profile .open-what-i-want{@include bare-button;width:100%;text-align:left}@include keyframes(stripes){0%{background-position:0 0}100%{background-position:$quantity-bar-stripe-width * -1 0}}.wiw-form{&-row{@include clearfix;margin-top:$oknf-fieldset-margin;&:first-child{margin-top:0}}&-headline{@include clearfix;display:block;margin-top:33px;padding-top:58px;border-top:1px solid $Colors-gray-6;font-size:18px;color:$Colors-gray-1;&:first-child{margin-top:0;padding-top:0;border-top:0}}&-gender,&-age,&-status,&-nearme,&-monogamous{width:250px}&-gender,&-age,&-monogamous{.oknf-label{margin-bottom:$oknf-select-margin}}&-gender,&-status{float:left}&-age,&-nearme{float:right}&-age{input{display:inline;width:98px}&-label{display:inline-block;width:50px;text-align:center}}&-status,&-nearme{.oknf-label{margin-bottom:$oknf-switch-margin}}&-lookingfor{.oknf-checkbox{width:205px;margin-top:$oknf-checkbox-margin}}&-error{color:$Colors-red-1}// looking for plus ///////////////////////////////////////////////////////////////////////////// // button to open the section &-show-plus{@include bare-button;@include helvetica;display:block;width:100%;margin-top:55px;margin-bottom:50px;padding-bottom:30px;border-bottom:1px solid $Colors-gray-5;font-size:16px;color:$Colors-blue-2;text-align:left;&:hover{color:$Colors-blue-1}}// the section itself &-plus{width:100%;padding:30px;background:$Colors-gray-7;border-radius:4px;&,&:first-child{margin-top:$oknf-fieldset-margin}// a-list users get some copy reminding them that this shit is private &-note{$tag-width:80px;$tag-height:36px;// the A-List "pill" &-tag{position:relative;bottom:6px;left:8px;float:right;width:$tag-width;height:$tag-height;border-radius:$tag-height;border:1px solid $Colors-pink-4;color:$Colors-pink-2;text-align:center;line-height:$tag-height}// the non A-List "learn more" link &-link{margin-left:6px}}&-error{margin-top:0 !important;// fuck me,right?}}// the little "a-list" tags next tot the form elements for non-alist users &-alist{margin-left:10px;font-size:14px;color:$Colors-pink-3;font-weight:normal;&:hover{color:$Colors-pink-2}}&-height{&--disabled{color:$Colors-gray-4}.oknf-label{margin-bottom:$oknf-select-margin}.oknf-select,&-separator{float:left}.oknf-select{min-width:100px;width:100px}&-separator{width:57px;line-height:46px;text-align:center}.oknf-message{float:left;width:100%}}&-ethnicity,&-religion{.oknf-checkbox{float:left;width:50%;&,&:first-child{margin-top:$oknf-checkbox-margin}}.flexbox &{.wiw-form-ethnicity-fields,.wiw-form-religion-fields{width:50%;height:160px;@include display(flex);@include flex-direction(column);@include flex-wrap(wrap);.oknf-checkbox{width:100%}}}}.looking-for-quantity{display:block;width:100%;margin-top:30px;&-title{font-size:14px}&-bar-wrapper{position:relative;width:100%;height:$quantity-bar-height;margin-top:9px;border-radius:$quantity-bar-height;background:$Colors-gray-8}&-bar{position:absolute;z-index:2;top:0;left:0;height:100%;border-radius:$quantity-bar-height;@include transition-property(width background-color);@include transition-duration(300ms);@include transition-timing-function(ease)}// states &--calculating{.looking-for-quantity-bar{background:$Colors-gray-3;width:0;@include transition(none)}.looking-for-quantity-bar-wrapper{&:after{content:"";position:absolute;overflow:hidden;top:0;left:0;width:100%;height:100%;@include linear-gradient(-55deg,$quantity-bar-stripe-color 25%,transparent 25%,transparent 50%,$quantity-bar-stripe-color 50%,$quantity-bar-stripe-color 75%,transparent 75%,transparent,$fallback:transparent);background-size:$quantity-bar-stripe-width 40px;@include animation(stripes 900ms linear infinite);border-radius:$quantity-bar-height}}}&--good{.looking-for-quantity-bar{width:100%;background:$Colors-green-1}}&--decent{.looking-for-quantity-bar{width:70%;background:$Colors-yellow-2}}&--low{.looking-for-quantity-bar{width:30%;background:$Colors-red-2}}&--none{.looking-for-quantity-bar{width:5%;background:$Colors-red-2}}}}// alist downgrade 20% off offer modal #p_settings #downgrade_modal,#downgrade_modal{@include box-sizing(border-box);width:625px;padding-bottom:0;.heading{position:relative;overflow:hidden;height:285px;background:$Colors-blue-3;.bubble1,.bubble2{position:absolute}$bubble1:"#{$css-imagepath}media/img/alist/pq_downgrade_modal_bubble1";$bubble1-width:285px;$bubble1-height:74px;$bubble2:"#{$css-imagepath}media/img/alist/pq_downgrade_modal_bubble2";$bubble2-width:317px;$bubble2-height:110px;$bubble-time:200ms;.cssanimations &{.bubble1,.bubble2{opacity:0}}.bubble1{top:36px;right:82px;width:$bubble1-width;height:$bubble1-height;background:url("#{$bubble1}.png");@include image-2x(url("#{$bubble1}@2x.png"),$bubble1-width,$bubble1-height)}.bubble2{top:136px;left:49px;width:$bubble2-width;height:$bubble2-height;background:url("#{$bubble2}.png");@include image-2x(url("#{$bubble2}@2x.png"),$bubble2-width,$bubble2-height)}&.trigger_animation{.bubble1,.bubble2{@include animation(pop-open $bubble-time);@include animation-fill-mode(forwards)}.bubble2{@include animation(pop-open $bubble-time);@include animation-delay($bubble-time * 2.4);@include animation-fill-mode(forwards)}}}h2,h3{color:$Colors-blue-2}h2{margin-top:37px;@include open-sans-light;font-size:39px;text-align:center}h3{@include open-sans;font-weight:400;font-size:20px}.content{position:relative;padding-top:16px;margin-bottom:18px;min-height:212px;a{display:inline-block;text-decoration:none}$button-height:46px;.confirm{width:190px;margin-top:0;height:$button-height;@include type(15px,$button-height)}.deny{margin-top:11px;font-size:15px;color:$Colors-gray-3;padding-bottom:4px;border-bottom:1px solid $Colors-gray-3;cursor:pointer;&:hover{color:$Colors-gray-4;border-color:$Colors-gray-4}}.fineprint{position:absolute;bottom:5px;left:0;width:100%;font-size:13px;text-align:center;color:$Colors-gray-3}.error_message{display:none;position:absolute;top:45%;left:0;width:100%;text-align:center;@include type(22px,32px);color:$Colors-red-1}}}@include keyframes(left-arm){0%{@include transform(rotate(0deg))}25%{@include transform(rotate(-5deg))}50%{@include transform(rotate(0deg))}75%{@include transform(rotate(5deg))}100%{@include transform(rotate(0deg))}}@include keyframes(right-arm){0%{@include transform(rotate(0deg))}25%{@include transform(rotate(5deg))}50%{@include transform(rotate(0deg))}75%{@include transform(rotate(-5deg))}100%{@include transform(rotate(0deg))}}@include keyframes(blink){0%{opacity:0}97.9%{opacity:0}98%{opacity:1}99.9%{opacity:1}100%{opacity:0}}// alist downgrade 20% off offer modal Version Two $modal-width:790px;$modal-left-width:395px;$modal-right-width:$modal-width - $modal-left-width;#downgrade_modal2,#p_settings #downgrade_modal2{width:$modal-width;height:432px;padding:0;*{@include box-sizing(border-box)}.heading{position:relative;overflow:hidden;float:left;width:$modal-left-width;height:100%;margin:0;padding-top:64px;background:$Colors-blue-3;@include border-left-radius(2px);h2{color:#fff;@include open-sans-light;@include type(36px,43px)}$base:"#{$css-imagepath}media/img/alist/pq_downgrade_modal_";$body:"#{$base}body";$body-width:345px;$body-height:234px;$left-arm:"#{$base}left_arm_v2";$left-arm-width:117px;$left-arm-height:29px;$right-arm:"#{$base}right_arm";$right-arm-width:117px;$right-arm-height:29px;.illustration_wrapper{position:absolute;height:$body-height;bottom:-16px;left:-45px}.body,.left-arm,.right-arm{position:absolute}.body{top:0;left:0;z-index:2;width:$body-width;height:$body-height;background:url("#{$body}.png");@include image-2x(url("#{$body}@2x.png"),$body-width,$body-height)}.left-arm{top:57px;left:-15px;z-index:1;width:$left-arm-width;height:$left-arm-height;background:url("#{$left-arm}.png");@include image-2x(url("#{$left-arm}@2x.png"),$left-arm-width,$left-arm-height);@include animation(left-arm 8000ms linear infinite);@include transform-origin(100% 10px)}.right-arm{top:83px;left:290px;z-index:3;width:$right-arm-width;height:$right-arm-height;background:url("#{$right-arm}.png");@include image-2x(url("#{$right-arm}@2x.png"),$right-arm-width,$right-arm-height);@include animation(right-arm 8000ms linear infinite);@include transform-origin(0px 10px)}$wrapper-size:20px;$eye-width:8px;$eye-height:2px;.eye{position:absolute;z-index:3;width:$wrapper-size;height:$wrapper-size;padding-top:($wrapper-size - $eye-height) / 2;padding-left:($wrapper-size - $eye-width) / 2;@include transform(skewX(-44deg));background:#fff8dc;opacity:0;@include animation(blink 6300ms linear infinite);.blink{background:#000;width:$eye-width;height:$eye-height}}.eye1{top:30px;left:157px}.eye2{top:35px;left:236px}}.content{float:right;position:relative;width:$modal-right-width;height:100%;padding:0;padding-top:36px;margin:0;min-height:212px;h3{@include open-sans-semibold;font-size:18px;color:$Colors-gray-2;&.success_message{display:inline-block;max-width:210px}}.box{display:inline-block;width:302px;padding:26px 0;margin-top:8px;@include open-sans-semibold;@include type(22px,32px);color:$Colors-blue-3;border:2px dashed $Colors-blue-5;border-radius:4px}span{display:inline-block;margin-top:18px;color:$Colors-gray-2;@include type(15px,24px)}a{display:inline-block;text-decoration:none}$button-height:46px;.confirm{width:190px;margin-top:32px;height:$button-height;@include type(15px,$button-height)}.deny{margin-top:11px;font-size:15px;color:$Colors-gray-3;padding-bottom:4px;border-bottom:1px solid $Colors-gray-3;cursor:pointer;&:hover{color:$Colors-gray-4;border-color:$Colors-gray-4}}.success_message,.error_message{display:none;position:absolute;top:38%;left:0;width:100%;text-align:center}.success_message{color:$Colors-blue-3;.success_title{@include open-sans-semibold;font-size:26px}.success_text{margin-top:8px;@include type(18px,24px)}}.error_message{@include type(22px,32px);color:$Colors-red-1}}}#upgrade_bounce_modal{.okcountdown{margin:auto}.flatbutton{display:inline-block;width:auto;margin-top:30px;padding-right:20px;padding-left:20px}}.modal.flagform{width:520px;form{.select{width:240px;float:right;margin-right:0px;.chosen-container{width:100% !important;.chosen-results li{border:0}}}.input_group{width:380px;margin-bottom:20px;&:last-child{margin-bottom:0px}label{line-height:36px}textarea{display:block;width:380px;height:68px !important}}}}#userblocked_flagged{width:480px}// message delete modal on a message thread page #delete_confirm{.loader{position:relative;width:40px}$size:40px;.success{display:none;width:$size;height:$size;margin:0;padding:0;border-radius:50%;background:$Colors-green-1;text-align:center;color:#fff;@include type(22px,45px);&.show{display:block}}}// block and report modals #block_modal,#flag_modal{width:500px;.title{margin-bottom:15px}.desc p{@include type(14px,18px)}.modal_error{display:inline-block;width:100%;padding-top:18px;font-size:13px;color:$Colors-red-1}}$reactmodal-width:600px;$reactmodal-br:5px;$reactmodal-padding:40px;$reactmodal-header-height:84px;$reactmodal-field-margin:35px;.reactmodal{display:inline-block;width:$reactmodal-width;margin-top:100px;background:$Colors-gray-8;border-radius:$reactmodal-br;text-align:left;// overwrite some OkModal stuff .OkModalContent-main{padding:0;background:transparent}&-header{height:$reactmodal-header-height + 1;// 1 = border padding:0px $reactmodal-padding;background:#fff;@include border-top-radius($reactmodal-br);border-bottom:1px solid $Colors-gray-6;color:$Colors-gray-2;@include type(20px,$reactmodal-header-height);@include open-sans;@include open-sans-semibold;$button-size:50px;&-close{@include bare-button;position:relative;overflow:hidden;float:right;width:$button-size;height:$button-size;margin-top:17px;margin-right:-25px;// to compensiate for extra clickability font-size:15px;color:$Colors-gray-4;&:hover{color:$Colors-gray-3}.reader-text{position:absolute;left:$button-size * 3}.icon:before{@include okicon("close")}}}&-contents{padding:$reactmodal-padding}&-buttons{margin-top:$reactmodal-field-margin + 10;button,button.big{margin-left:10px;min-width:120px;width:120px;&:first-child{margin-left:0}}}}$modal_width:440px;$pic_width:150px;#mutual_match_modal,.mutual-match-modal{width:$modal_width;.content{@include clearfix;margin-top:30px;.userpic{display:inline-block;width:$pic_width;height:$pic_width;margin:0 10px;@include border-radius(100%);img{width:100%;height:100%;opacity:1;@include border-radius(100%);@include transition(opacity 150ms ease-in-out);&.hide{opacity:0}}}}&.show{@include transition(none);@include animation(zoom-in-out 200ms ease-in)}}// // OkCupid Native Forms // // // -cc c&- // b!!bc bB // c!bb22b 22 // c!b222b !b cc--- // b!!2B2!Bc`bb cbbb!B&2c // bB2!B2B&2cbB22!c cccbbbccc- // c2!22&B#!B!2&bbcccc!!c // -222&&B&!cBbBc bbcbbb // cbc-cc!c 22&B2&B22#bbbbcbb!!b // !&##!bbbbb- !2222222&22 cbcc!b2- --cc!b // -bbc!2bbcbb b22BB2B2Bbbcbcb!!!2`-bcbbcc // B#2!bbbc!22&2B2Bc bbbb!bBc-cb!b // &&22bbb!2BBB!2Bb-!b2!!!!-bb!! // cBB22!b2B&BB22Bbb2!2b!Bcc!!2c // 22222b!B&B&2bB2!!!!bB2c2b22 // b!B2&B2!2222bB2!2!!2!c2!2B- // c!2c2!222BB2!&B!!!2!b!!!&c // c2!- !#2b2BB2&B!!2!b!bbbc // 22c!$&2bbB22#22!!bb!!2b // bb!B&B!!b22!#Bbb!!!bBb // bbB&B22!!bB2&bb!!2!!2 // b2!&B!!!bb22bc2b2!!2c // !b&&!!!bb2!b2b!2!2! // c!B#bb2!b!!!2bBB!B // !2#!b!2!!bbbbB2B!` // cBB2!!B!2!!!!B!2 // 2B2b!2!222!B22! // 2#2!2B!B&!!&!Bc // b&22B2!BB!2BB2 // -BB2222!22B2&b // B&2BBB!2BBb&c // !&B&222B&!bB // c&B#!22B&b2! // 2#&b!B!&bB- // -&#bb2b&2! // 2#!b2bBB- // -&2b!!&b // !#!!2B // 2&B&c // c&B! // &# // 2B // 22 // 22 b // 22 cc // !2 cb // !2 ! // !2cb // c!!b !2bb // c!! !Bbb - // c22 !Bbb !b // - !BbbB!c -2b`-bc // bB!- c&#!2!c c2b b2c // c22c-B&B22 c2!-!! // b!!bcc2B! b!!c2b // !2!-c!B-c!2!2b // !BbbB&2c!!2!! // c&&2!!2!2B2! // c!#&bbc2&B2 // `!#2ccB&! // `2$22$2 // 2$&! // &2` // 2!` // 2! // 2! // // Wood Lily (Lilium Philadelphicum) // // // Over thousands of years,native plants have adapted to the climate,soils,// and environmental conditions of our area. They have developed the ability to // thrive in our humid summers and freezing winters and to entice local insects,// birds,and other animals to pollinate their flowers and disperse their // fruits. Native plants are responsible for clean air,pure water,soil // stability,flood abatement,and wild animal habitat. Humans depend on these // ecological processes every day. Thus native plants are the building blocks // of our biological diversity and essential to healthy,functioning ecosystems. // // http://www.nycwildflowerweek.org/nyc_native_plant.pdf // //////////////////////////////////////////////////////////////////////////////// // Variables //////////////////////////////////////////////////////////////////////////////// // sizes $oknf-element-size:20px;$oknf-element-padding:13px;$oknf-br:3px;$oknf-min-width:250px;$oknf-height:46px;$oknf-transition:75ms;$oknf-switch-width:43px;$oknf-switch-height:26px;$oknf-switch-button-size:20px;// input icons $oknf-error-icon:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iM3B4IiBoZWlnaHQ9IjEzcHgiIHZpZXdCb3g9IjAgMCAzIDEzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4gICAgICAgIDx0aXRsZT4hIGNvcHk8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxwYXRoIGQ9Ik0wLjAwMTk1MzEyNSwwIEwwLjAwMTk1MzEyNSw3Ljk5ODA0Njg4IEwyLjk5ODA0Njg4LDcuOTk4MDQ2ODggTDIuOTk4MDQ2ODgsMCBMMC4wMDE5NTMxMjUsMCBaIE0xLjUsMTAuMDAzOTA2MiBDMS4wNzY4MjA4LDEwLjAwMzkwNjIgMC43MjEzNTU2MDUsMTAuMTQ3Nzg1IDAuNDMzNTkzNzUsMTAuNDM1NTQ2OSBDMC4xNDU4MzE4OTUsMTAuNzIzMzA4NyAwLjAwMTk1MzEyNSwxMS4wNzg3NzM5IDAuMDAxOTUzMTI1LDExLjUwMTk1MzEgQzAuMDAxOTUzMTI1LDExLjkwODIwNTIgMC4xNDU4MzE4OTUsMTIuMjU5NDM4NiAwLjQzMzU5Mzc1LDEyLjU1NTY2NDEgQzAuNzIxMzU1NjA1LDEyLjg1MTg4OTUgMS4wNzY4MjA4LDEzIDEuNSwxMyBDMS45MjMxNzkyLDEzIDIuMjc4NjQ0MzksMTIuODUxODg5NSAyLjU2NjQwNjI1LDEyLjU1NTY2NDEgQzIuODU0MTY4MTEsMTIuMjU5NDM4NiAyLjk5ODA0Njg4LDExLjkwODIwNTIgMi45OTgwNDY4OCwxMS41MDE5NTMxIEMyLjk5ODA0Njg4LDExLjA3ODc3MzkgMi44NTQxNjgxMSwxMC43MjMzMDg3IDIuNTY2NDA2MjUsMTAuNDM1NTQ2OSBDMi4yNzg2NDQzOSwxMC4xNDc3ODUgMS45MjMxNzkyLDEwLjAwMzkwNjIgMS41LDEwLjAwMzkwNjIgTDEuNSwxMC4wMDM5MDYyIFoiIGlkPSIhLWNvcHkiIGZpbGw9IiNGOTUxMzMiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==);$oknf-success-icon:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMTMgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmMgY29weSAyPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8cGF0aCBkPSJNMTEuMTQ2NDg0NCwwLjUyMzQzNzUgTDQuNDY4NzUsNy4xNzU3ODEyNSBMMS44MjgxMjUsNC41MzUxNTYyNSBMMC4xMDE1NjI1LDYuMjYxNzE4NzUgTDQuNDY4NzUsMTAuNjI4OTA2MiBMMTIuODQ3NjU2MiwyLjI1IEwxMS4xNDY0ODQ0LDAuNTIzNDM3NSBaIiBpZD0iYy1jb3B5LTIiIGZpbGw9IiMxRkMxNzQiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==);// General styles (structual stuff,which applies regardless of color) //////////////////////////////////////////////////////////////////////////////// .oknf{@include helvetica;*,*:before,*:after{@include box-sizing(border-box)}// the label for a form element &-label{display:block;@include helvetica;font-weight:bold;font-size:16px}// the wrapper for an individual form element &-checkbox,&-radio,&-select,&-switch{position:relative;display:inline-block;min-height:$oknf-element-size;min-width:$oknf-element-size;line-height:$oknf-element-size;@include type(16px,$oknf-element-size);cursor:pointer;&.oknf-checkbox--has-label,&.oknf-radio--has-label{padding-left:$oknf-element-size + $oknf-element-padding}}// style common to radios,selects,and switches:hide the default input via // opacity &-checkbox input,&-radio input,&-switch input{position:absolute;opacity:0.01;// opacity:0 inputs don't trigger click events in firefox &:focus{outline:none}}// checkboxes and radios ////////////////////////////////////////////////////////////////////////////// &-checkbox,&-radio{// general styles ///////////////// &-decoration::before,&-decoration::after,&-decoration::before,&-decoration::after{content:" ";display:block;position:absolute;top:0;left:0;width:$oknf-element-size;height:$oknf-element-size;@include transition(border-color $oknf-transition linear);border-radius:$oknf-br}&--disabled{&,&:hover{cursor:default}}}&-radio{&-decoration::before{border-radius:50%}}// selects ////////////////////////////////////////////////////////////////////////////// $select-bg:#fff;&-select{display:block;min-width:$oknf-min-width;height:$oknf-height;background:$select-bg;border-radius:$oknf-br;@include transition(box-shadow $oknf-transition linear);@include type(16px,$oknf-height);color:$Colors-gray-2;&:not(.oknf-select--disabled):hover,&.focus{&::before{color:$Colors-gray-2}}&--disabled{opacity:0.6;select,select:hover,&,&:hover{cursor:default}}// down chevron &::before{@include okicon("arrow-down");position:absolute;top:1px;right:16px;color:$Colors-gray-4;font-size:13px;@include transition(color $oknf-transition linear)}select{display:block;position:absolute;z-index:2;top:0;left:0;min-width:100%;height:100%;min-height:100%;// in chrome,when you set the font size to 16,// it sets the text size to 14px. // that's a stupid rule. // but it is what it is. font-size:16px}select{cursor:pointer;opacity:0}// the current value &-active{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;padding-right:40px;padding-left:14px;@include ellipsis;color:$Colors-gray-2;&--placeholder{color:$Colors-gray-4}}// an optional clear button $clear-size:30px;&-clear{@include bare-button;position:absolute;z-index:3;overflow:hidden;right:8px;top:9px;width:$clear-size;height:$clear-size;background:$select-bg;@include type(11px,$clear-size);text-align:center;color:$Colors-gray-4;@include transition(color $oknf-transition linear);&:hover{color:$Colors-gray-3}&-text{position:absolute;left:40px}&:before{content:"";@include okicon("close")}}}// iOS-style switch ////////////////////////////////////////////////////////////////////////////// &-switch{padding-left:$oknf-switch-width;line-height:$oknf-switch-height;&--has-label{padding-left:$oknf-switch-width + $oknf-element-padding}$switch-offset:($oknf-switch-height - $oknf-switch-button-size) / 2;&-decoration{position:absolute;top:0;left:0;display:block;width:$oknf-switch-width;height:$oknf-switch-height;padding:$switch-offset;border-radius:$oknf-switch-height;@include transition(background $oknf-transition linear);&::before{content:" ";display:block;width:$oknf-switch-button-size;height:$oknf-switch-button-size;background:#fff;border-radius:50%;@include transition(transform $oknf-transition linear)}}// on state /////////// $switch-on-position:$oknf-switch-width - $oknf-switch-button-size - $switch-offset * 2;input:checked ~ .oknf-switch-decoration{background:$Colors-green-1;&::before{@include transform(translateX($switch-on-position))}}// version with a background container ////////////////////////////////////// $bg-padding:($oknf-height - $oknf-switch-height) / 2;&--has-bg{min-width:$oknf-min-width;height:$oknf-height;padding-top:$bg-padding;padding-left:$oknf-switch-width + $bg-padding + $oknf-element-padding;background:rgba(#000,0.05);border-radius:$oknf-br;.oknf-switch-decoration{top:$bg-padding;left:$bg-padding}}}// text inputs ////////////////////////////////////////////////////////////////////////////// &-typable-wrapper{position:relative;display:inline-block}&-textarea,&-input{position:relative;padding-right:$oknf-element-padding;padding-left:$oknf-element-padding;min-width:65px;border-radius:$oknf-br + 1;@include transition-property(background-color,border-color,color);@include transition-duration($oknf-transition);@include type(16px,24px);@include helvetica;color:$Colors-gray-2;&:focus:not(.oknf-input--error):not(.oknf-textarea--error){border-color:$Colors-blue-4}// error and success states have an icon on the right,so add additional padding // to keep text from overlapping with the icon. &--error,&--success{padding-right:30px}// background props split out to define bg color separately from icons &--error{background-image:$oknf-error-icon;background-position:right 15px center;background-repeat:no-repeat}&--success{background-image:$oknf-success-icon;background-position:right 10px center;background-repeat:no-repeat}// searching state gets a loader &--is-searching{background-image:url("#{$css-imagepath}media/img/throbbers/throbber-sm.gif");background-position:right 10px center;background-repeat:no-repeat}}// textarea-specific modifications &-textarea{padding:$oknf-element-padding;min-height:$oknf-height * 2;resize:none;&--error,&--success{padding-right:33px}&--error{background-position:93% 18px}&--success{background-position:94% 20px}}// input-specific modifications &-input{height:$oknf-height;&[type="search"]{-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{display:none}}}// search button ////////////////////////////////////////////////////////////////////////////// &-searchbtn{@include bare-button;position:absolute;right:$oknf-element-padding / 2;padding:2px #{$oknf-element-padding / 2};top:50%;pointer-events:none;@include transform(translateY(-50%));.okicon{font-size:13px;color:$Colors-gray-4;text-indent:-9999px}&--clearable{pointer-events:auto;&:hover .okicon{color:$Colors-gray-2}}}}// The mixin which applies colors //////////////////////////////////////////////////////////////////////////////// @mixin oknf (// checkboxes/radios $oknf-checkbox-default-bg,$oknf-checkbox-default-border,$oknf-checkbox-default-hover-bg,$oknf-checkbox-default-hover-border,$oknf-checkbox-active-bg,$oknf-checkbox-active-border,$oknf-checkbox-active-color,$oknf-checkbox-active-hover-bg,$oknf-checkbox-active-hover-border,$oknf-checkbox-disabled-bg,$oknf-checkbox-disabled-border,$oknf-checkbox-disabled-color,// text inputs $oknf-input-default-bg,$oknf-input-default-border,$oknf-input-default-hover-bg,$oknf-input-default-hover-border,$oknf-input-disabled-bg,$oknf-input-disabled-color,// text styles $oknf-legend-color,$oknf-legend-letter-spacing,$oknf-label-color,$oknf-label-hover-color,// selects $oknf-select-box-shadow,$oknf-select-hover-box-shadow,// switch $oknf-switch-inactive-bg){// labels and legends ////////////////////////////////////////////////////////////////////////////// .oknf-label{color:$oknf-legend-color;letter-spacing:$oknf-legend-letter-spacing}label{color:$oknf-label-color}// checkboxes and radios ////////////////////////////////////////////////////////////////////////////// .oknf-checkbox input,.oknf-radio input{// default state //////////////// & ~ .oknf-checkbox-decoration::before,& ~ .oknf-radio-decoration::before{border:1px solid $oknf-checkbox-default-border;background:$oknf-checkbox-default-bg}// default + hover/focus //////////////////////// &:hover,&:focus{& ~ .oknf-checkbox-decoration::before,& ~ .oknf-radio-decoration::before{background:$oknf-checkbox-default-hover-bg;border-color:$oknf-checkbox-default-hover-border}}// checked/selected /////////////////// &:checked{& ~ .oknf-checkbox-decoration::before,& ~ .oknf-radio-decoration::before{background:$oknf-checkbox-active-bg;border-color:$oknf-checkbox-active-border}&[type=checkbox] ~ .oknf-checkbox-decoration::after{@include okicon("checkmark");text-align:center;@include type(10px,$oknf-element-size);color:$oknf-checkbox-active-color}$radio-offset:12px;// must be an even number $radio-size:$oknf-element-size - $radio-offset;$radio-margin:($oknf-element-size - $radio-size) / 2;&[type=radio] ~ .oknf-radio-decoration::after{width:$radio-size;height:$oknf-element-size - $radio-offset;margin-top:$radio-margin;margin-left:$radio-margin;background:$oknf-checkbox-active-color;border-radius:50%}}// checked/selected + hover/focus ///////////////////////////////// &:checked:hover,&:checked:focus{& ~ .oknf-checkbox-decoration::before,& ~ .oknf-radio-decoration::before{background:$oknf-checkbox-active-hover-bg;border-color:$oknf-checkbox-active-hover-border}}// disabled /////////// &[disabled]{cursor:default;& ~ .oknf-checkbox-label,& ~ .oknf-radio-label{color:$oknf-checkbox-disabled-color;cursor:default}&:hover ~ .oknf-checkbox-decoration::before,&:hover ~ .oknf-radio-decoration::before,& ~ .oknf-checkbox-decoration::before,& ~ .oknf-radio-decoration::before{background:$oknf-checkbox-disabled-bg;border-color:$oknf-checkbox-disabled-border}&:hover ~ span::after,& ~ span::after{color:$oknf-checkbox-disabled-color !important}}// hover or checked /////////////////// &:not([disabled]):hover,&:not([disabled]):checked{& ~ .oknf-checkbox-label,& ~ .oknf-radio-label{color:$oknf-label-hover-color}}}// selects ////////////////////////////////////////////////////////////////////////////// .oknf-select{box-shadow:$oknf-select-box-shadow 0 1px 2px;&:not(.oknf-select--disabled):hover,&.focus{box-shadow:$oknf-select-hover-box-shadow 0 1px 2px}}// iOS-style switch ////////////////////////////////////////////////////////////////////////////// .oknf-switch{&-decoration{background:$oknf-switch-inactive-bg}&:active .oknf-switch-decoration,input:focus ~ .oknf-switch-decoration{background:darken($oknf-switch-inactive-bg,5%)}input:checked:active ~ .oknf-switch-decoration,input:checked:focus ~ .oknf-switch-decoration{background:darken($Colors-green-1,5%)}}// text inputs ////////////////////////////////////////////////////////////////////////////// .oknf-textarea,.oknf-input{background-color:$oknf-input-default-bg;border:1px solid $oknf-input-default-border;&:hover:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),&:focus:not(.oknf-input--error):not(.oknf-textarea--error):not([disabled]),&--is-searching{background-color:$oknf-input-default-hover-bg;border-color:$oknf-input-default-hover-border}&[disabled],&[disabled]:hover{background:$oknf-input-disabled-bg;border-color:$oknf-input-disabled-bg;color:$oknf-input-disabled-color;cursor:default}&--error{background-color:#fff;border-color:$Colors-red-2}}// helper text ////////////////////////////////////////////////////////////////////////////// .oknf-helper-text{display:block;width:100%;margin-top:12px;color:$oknf-input-disabled-color;font-size:14px}// feedback messages ////////////////////////////////////////////////////////////////////////////// .oknf-message{display:block;min-width:$oknf-min-width;margin-top:10px;font-size:14px;letter-spacing:$oknf-legend-letter-spacing;color:$Colors-gray-2;opacity:0;// must match js transition time @include transition(opacity $oknf-transition * 2 linear);&--show{opacity:1}&--error{color:$Colors-red-1}&--success{color:$Colors-green-1}}}// Include the color themes //////////////////////////////////////////////////////////////////////////////// .oknf{&,&--gray{@include oknf(// checkboxes/radios $oknf-checkbox-default-bg:#fff,$oknf-checkbox-default-border:$Colors-gray-5,$oknf-checkbox-default-hover-bg:#fff,$oknf-checkbox-default-hover-border:$Colors-gray-3,$oknf-checkbox-active-bg:$Colors-blue-6,$oknf-checkbox-active-border:$Colors-blue-3,$oknf-checkbox-active-color:$Colors-blue-3,$oknf-checkbox-active-hover-bg:$Colors-blue-6,$oknf-checkbox-active-hover-border:$Colors-blue-4,$oknf-checkbox-disabled-bg:$Colors-gray-6,$oknf-checkbox-disabled-border:$Colors-gray-5,$oknf-checkbox-disabled-color:$Colors-gray-4,// text inputs $oknf-input-default-bg:#fff,$oknf-input-default-border:$Colors-gray-5,$oknf-input-default-hover-bg:#fff,$oknf-input-default-hover-border:$Colors-gray-4,$oknf-input-disabled-bg:$Colors-gray-6,$oknf-input-disabled-color:$Colors-gray-3,// text styles $oknf-legend-color:$Colors-gray-2,$oknf-legend-letter-spacing:normal,$oknf-label-color:$Colors-gray-2,$oknf-label-hover-color:$Colors-gray-2,// selects $oknf-select-box-shadow:$Colors-gray-5,$oknf-select-hover-box-shadow:$Colors-gray-3,// switch $oknf-switch-inactive-bg:$Colors-gray-5)}}.oknf{&--blue{@include oknf(// checkboxes/radios $oknf-checkbox-default-bg:transparent,$oknf-checkbox-default-border:$Colors-blue-4,$oknf-checkbox-default-hover-bg:rgba($Colors-blue-3,0.5),$oknf-checkbox-default-hover-border:$Colors-blue-4,$oknf-checkbox-active-bg:#fff,$oknf-checkbox-active-border:#fff,$oknf-checkbox-active-color:$Colors-blue-3,$oknf-checkbox-active-hover-bg:#fff,$oknf-checkbox-active-hover-border:$Colors-blue-4,$oknf-checkbox-disabled-bg:transparent,$oknf-checkbox-disabled-border:$Colors-blue-3,$oknf-checkbox-disabled-color:$Colors-blue-3,// text inputs $oknf-input-default-bg:$Colors-gray-6,$oknf-input-default-border:$Colors-gray-6,$oknf-input-default-hover-bg:#fff,$oknf-input-default-hover-border:#fff,$oknf-input-disabled-bg:$Colors-blue-3,$oknf-input-disabled-color:$Colors-blue-4,// text styles $oknf-legend-color:#fff,$oknf-legend-letter-spacing:0.3px,$oknf-label-color:$Colors-blue-6,$oknf-label-hover-color:#fff,// selects $oknf-select-box-shadow:rgba(#000,0.4),$oknf-select-hover-box-shadow:rgba(#000,0.4),// switch $oknf-switch-inactive-bg:$Colors-blue-3)}}// all styles for the flipping counter are in flip_counter.scss,// since that sucker's a little more complicated // but this should work for a basic setup. .okcountdown{display:inline-block;overflow:hidden;white-space:nowrap;text-align:center;.colon{float:left}// hide hours by default .flipper.hours,.colon.hourscolon{display:none}// if we show hours,show another section and colon &.showhours{.flipper.hours,.colon.hourscolon{display:block}}// basic flipper positioning .flipper{float:left;text-align:center}}// ============================================================================= // OkPhotos. Globally available uploader. // ----------------------------------------------------------------------------- // VARIABLES // --------------------------------------------------------------------------- // Should match up with OkPhotos.coffee $animSpeedShort:125ms;$animSpeed:225ms;$animSpeedLong:600ms;$radius:4px;$panelPadding:60px;$panelBg:$Colors-gray-7;$overlayBg:#000;$headerPadding:25px;$headerHeight:68px;$headerFontSize:18px;$headerLineHeight:18px;$headerDescSize:15px;$actionPadding:25px;$actionWidth:540px;$actionHeight:505px;$actionSmallWidth:520px;$actionBg:#FFF;$actionRadius:5px;$actionFooterHeight:73px;$actionFooterLineHeight:48px;$thumbWidth:60px;$thumbHeight:53px;$handleWidth:26px;$sidebarBg:$overlayBg;$sidebarBorder:#323741;$sidebarWidth:$thumbWidth + 8;$sidebarPadding:$actionWidth - $actionSmallWidth - $sidebarWidth;$actionHeaderZ:100;$resetBtnZ:200;$albumSelectorZ:1000;// Large stuff $largeQuery:"screen and (min-height:800px)";$largeActionWidth:720px;$largeActionHeight:650px;// PANEL STYLES // --------------------------------------------------------------------------- #okphotos_overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;text-align:center;z-index:$Z-photo-overlay;background:rgba($overlayBg,0.8);opacity:0;@include open-sans;@include transition-property(opacity);@include transition-duration($animSpeed);@include transition-timing-function(ease);&.show{opacity:1;> .content{opacity:1;@include transition-delay($animSpeed)}}&.full_photos{// Disable adding new photos when photos are full. #album_selector{#album_select_0{background:none;color:$Colors-gray-4;cursor:default;pointer-events:none;&:before{content:"!";font-size:15px;top:0;padding:0 3px}&:after{content:"full";color:$Colors-red-1;float:right}}}}> .content{width:$actionWidth;margin:auto;opacity:0;@include transition-property(opacity);@include transition-duration($animSpeed);@include transition-timing-function(ease-in-out);@include transition-delay(0)}.user_tips{font-size:15px;line-height:20px;color:$Colors-gray-3}// Action states &.viewer{#okphotos_header{width:0;height:0}}// Empty photos state &.no_photos{#okphotos_reset{display:none}}}// ACTION AREA // --------------------------------------------------------------------------- #okphotos_action_area{position:relative;width:100%;margin-top:60px;@include clearfix;.action{display:none;width:100%;height:$actionHeight;background:$actionBg;border-radius:$actionRadius;@include box-sizing(border-box);.action_header,.action_content,.action_footer{@include box-sizing(border-box)}.action_header{position:absolute;top:0;left:0;right:0;height:$headerHeight;padding:$actionPadding;text-align:left;background:#FFF;box-shadow:0 -1px $Colors-gray-6 inset;border-top-right-radius:$actionRadius;border-top-left-radius:$actionRadius;z-index:2;@include clearfix;.title{font-size:$headerFontSize;line-height:$headerLineHeight;color:$Colors-gray-1;font-weight:400}}.action_content{position:relative;height:100%;padding:$actionPadding;overflow:auto;z-index:1;opacity:1;border-radius:$actionRadius;@include transition(opacity $animSpeedShort ease);&.has_header{padding-top:$actionPadding + $headerHeight}&.has_footer{padding-bottom:$actionPadding + $actionFooterHeight}}.action_footer{position:absolute;left:0;right:0;bottom:0;height:$actionFooterHeight;padding:($actionPadding / 2) $actionPadding;background:#FFF;box-shadow:0 1px $Colors-gray-6 inset;border-bottom-left-radius:$actionRadius;border-bottom-right-radius:$actionRadius;z-index:2;a,.flatbutton{height:$actionFooterLineHeight;line-height:$actionFooterLineHeight}.flatbutton{float:right;font-size:18px;font-weight:300;border-radius:3px;margin-left:10px;&.green{background-color:#59C578}&.disabled{background-color:$Colors-gray-5}}}}#okphotos_action_close{position:absolute;top:$actionPadding;right:$actionPadding;font-size:16px;color:$Colors-gray-4;z-index:3;&:hover{color:$Colors-gray-2}}}// Body alterations // Large screen fixes @media #{$largeQuery}{#okphotos_overlay{> .content{width:$largeActionWidth}}#okphotos_action_area{.action{height:$largeActionHeight}}}// ERROR SCREEN // --------------------------------------------------------------------------- #okphotos_error{.container{position:relative;top:40px;width:360px;height:320px;margin:auto;border-radius:10px}.error_icon{width:100px;height:100px;margin:auto;margin-bottom:40px;background:$Colors-red-1;border-radius:100%;.icon{position:relative;top:34px;left:1px;font-size:34px;color:#FFF}}.text{margin-bottom:20px;font-size:28px;line-height:36px;font-weight:300;color:$Colors-gray-2}.desc{font-size:15px;line-height:20px;margin-bottom:50px;color:$Colors-gray-4}.flatbutton{height:56px;line-height:56px;font-size:15px;width:180px;border-radius:5px}}// PHOTO UPLOADER // --------------------------------------------------------------------------- $uploaderHeight:370px;$uploadPadding:30px;$serviceWidth:120px;$serviceIconSize:50px;$largeUploaderWidth:600px;$largeUploaderHeight:440px;$largeServiceWidth:146px;$largeServiceIconSize:68px;// Add some extra oomph to the selector. #okphotos_action_area #okphotos_upload{&,.action_content{height:$uploaderHeight}}// Fix the spacing from the top #okphotos_overlay.upload #okphotos_action_area{top:($actionHeight - $uploaderHeight) / 2}#okphotos_upload{#service_picker{// To get it to respect margin-top on elements inside. padding-top:1px}.title{margin-top:50px;font-weight:300;@include type(32px,22px)}.services{margin:60px auto 40px;text-align:center;.service{position:relative;display:inline-block;width:$serviceWidth;vertical-align:top;cursor:pointer;color:$Colors-gray-3;&:hover{color:$Colors-gray-1}.icon{display:block;height:$serviceIconSize;font-size:$serviceIconSize;margin:0 auto 10px;@include transition(color,opacity);@include transition-duration(125ms);@include transition-timing-function(ease)}.label{padding-bottom:3px;@include type(15px,15px)}}// Service specific tweaks #service_computer .icon{font-size:$serviceIconSize + 2}#service_facebook:hover .icon{color:#3B5998}#service_instagram:hover .icon{color:#C08D64}// Mac tweaks .mac_only{display:none}.mac &{.mac_only{display:inline}.pc_only{display:none}}}#okphotos_upload_form{display:inline-block;vertical-align:top;overflow:hidden;// Prevent scrolling inside the form on input interaction. input{position:absolute;top:-500px;width:80px}}iframe{display:none}// Drag and drop .dragndrop_hint{margin-top:45px;font-size:15px;color:$Colors-gray-4}.dragndrop_message{position:absolute;top:50%;left:50%;width:400px;margin-left:-200px;margin-top:-12px;font-size:24px;line-height:24px;text-align:center;color:$Colors-gray-2;@include opacity(0);@include transition(opacity 150ms)}#okphotos_dragndrop{position:absolute;top:5px;left:5px;right:5px;bottom:5px;background:$actionBg;opacity:0;z-index:0;@include transition(opacity 200ms ease)}.picker_wrapper{position:relative;z-index:1;@include opacity(1);@include transition(opacity 150ms)}&.drag_over{position:relative;z-index:100;#okphotos_dragndrop{border:3px dashed $Colors-gray-4;border-radius:5px;z-index:100;opacity:1}.dragndrop_message{opacity:1;z-index:101;pointer-events:none}}// User tips #okphotos_rules{position:absolute;left:50%;bottom:40px;width:380px;margin-left:-190px;padding:0;color:$Colors-gray-5;@include type(14px,22px)}}// Loading state #okphotos_overlay.upload #okphotos_action_area.loading{.picker_wrapper{opacity:0;pointer-events:none}}@media #{$largeQuery}{// Add some extra oomph to the selectors. #okphotos_overlay.upload > .content{width:$largeUploaderWidth}#okphotos_action_area #okphotos_upload{&,.action_content{height:$largeUploaderHeight}}#okphotos_upload{.title{font-size:38px;line-height:48px}#service_picker{.service{width:$largeServiceWidth;.icon{font-size:$largeServiceIconSize;height:$largeServiceIconSize;margin-bottom:15px}.label{font-size:16px}}#service_computer .icon{font-size:$largeServiceIconSize + 3}}}}// PHOTO TILES // --------------------------------------------------------------------------- $tileSize:30%;$tileMargin:1.6%;#okphotos_photo_tiles{&.action .action_content{padding-left:15px;padding-right:15px}#photo_tiles_header{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;.title,.subtitle{position:relative;font-size:$headerFontSize;line-height:$headerLineHeight;color:$Colors-gray-1;padding:0;@include fade-and-hide(show,$animSpeed)}.subtitle{display:none;padding-left:20px;&:hover{color:$Colors-gray-3}}.icon{position:absolute;top:0;left:0;color:$Colors-gray-3;font-size:11px;line-height:22px}}.tile_holder{width:100%;@include clearfix;@include transition(opacity 300ms ease-in-out);.photo_tile{position:relative;display:block;float:left;width:$tileSize;padding-top:$tileSize;margin:0 $tileMargin 20px;text-align:left;cursor:pointer;opacity:0;vertical-align:top;@include transform(translateZ(0));&:hover{.image_container{opacity:0.92}.radio{opacity:1}}.image_container{position:absolute;top:0;left:0;width:100%;padding-top:100%;overflow:hidden;border-radius:$radius;background:#000;@include transition(opacity $animSpeedShort ease-in-out);img{display:block;position:absolute;top:-999px;left:-999px;right:-999px;bottom:-999px;height:100%;margin:auto}}.radio{position:absolute;bottom:5px;right:5px;width:32px;height:32px;border:2px solid #FFF;border-radius:100%;opacity:0.2;background:rgba(0,0,0,0.25);@include box-sizing(border-box);.icon{display:block;height:100%;width:100%;color:#FFF;font-size:14px;line-height:36px;text-align:center;background-color:#59C578;border-radius:100%;opacity:0;&:before{position:relative;left:1px}}}.title{font-size:15px;line-height:30px;margin:0;color:$Colors-gray-2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desc{font-size:13px;line-height:13px;color:$Colors-gray-4}&.loaded{@include opacity(1);@include animation(tile-load $animSpeedLong cubic-bezier(0.165,0.84,0.44,1))}&.error{.image_container{img{display:none}.i-photo-stack{position:absolute;top:50%;width:100%;text-align:center;color:#FFF;font-size:24px;margin-top:-12px;font-size:64px;margin-top:-32px}}}&.no_radio{.radio{display:none}}&.selected{.radio{border:none;opacity:1;.icon{opacity:1;@include animation(pop-open $animSpeedShort 1)}}}&.disabled{cursor:default;.radio{display:none}&:hover img{opacity:0.3}}&.too_small:hover{.image_container:after{position:absolute;top:0;left:0;right:0;bottom:0;content:"Sorry,I'm too small.";display:block;background:rgba($overlayBg,0.7);text-align:center;padding:38% 20px 0;color:#FFF;font-size:16px;line-height:20px}}}}#photo_subtile_holder{display:none;@include fade-and-hide(hide,$animSpeed)}&.show_subtiles{#photo_tiles_header{.title{display:none}.subtitle{display:block}}#photo_tile_holder{display:none;@include fade-and-hide(hide,$animSpeed)}#photo_subtile_holder{display:block;@include fade-and-hide(show,$animSpeed)}}&.transitioning{// overflow,position,and display is all to maintain position while flow // is out of whack. .action_content{overflow:hidden !important}#photo_tiles_header .title,#photo_tiles_header .subtitle,#photo_tile_holder,#photo_subtile_holder{position:absolute;display:block;@include fade-and-hide(hide,$animSpeed)}}// Loader #photo_tiles_loader{height:0px;background-image:url('//cdn.okccdn.com/media/img/throbbers/dotbar-gray.gif');background-position:center;background-repeat:no-repeat;@include transition-property(height,opacity);@include transition-duration($animSpeed);@include transition-timing-function(ease)}&.loading #photo_tiles_loader{height:30px}}// Loading state #okphotos_overlay.photo_tiles #okphotos_action_area.loading{.action_content{opacity:0}}// PHOTO CROP / EDIT // --------------------------------------------------------------------------- #okphotos_edit{position:relative;.action_content{background:$Colors-gray-7}#okphotos_edit_wrapper{margin:auto;width:100%;height:100%;border-radius:$radius;@include transition(opacity $animSpeed ease)}// Hide some stuff initially .crop_header,.caption_header,.reloading_header{display:none}// Photo #okphotos_frame{position:relative;margin:auto}#okphotos_photo{display:block;max-width:100%;max-height:100%;margin:auto;border-radius:$radius}// Crop stuff .simplecrop_container{width:100%;height:100%}// Caption stuff $captionSize:84px;#okphotos_edit_actions{.inputcontainer{position:absolute;display:block;top:-90px;left:50%;width:400px;margin-left:-200px;textarea{display:block;min-height:$captionSize;font-size:15px;line-height:22px;@include border-right-radius(0)}}}// Shared buttons #okphotos_edit_actions{@include clearfix}#okphotos_edit_cancel{float:left;color:$Colors-gray-5;&:hover{color:$Colors-gray-4}.icon{font-size:9px}}// Crop state &.crop{#okphotos_cropper,.crop_header{display:block}#okphotos_details,#okphotos_edit_actions .inputcontainer{display:none}}// Caption state &.caption{#okphotos_details,.caption_header{display:block}#okphotos_cropper{display:none}}// Photo submission reloading state &.reloading{.crop_header,.caption_header{display:none}#okphotos_edit_wrapper{opacity:0.15}#okphotos_edit_actions{@include fade-and-hide(hide,$animSpeed)}}}// PHOTO UPLOAD FINISHED // --------------------------------------------------------------------------- $finishedHeight:500px;// Fix the spacing from the top #okphotos_overlay.finished #okphotos_action_area{top:($actionHeight - $finishedHeight) / 2}#okphotos_finished{// Just to boost up it's priority &.action{height:$finishedHeight;width:380px;margin:auto;text-align:center}.reassurance{padding-top:30px;font-weight:300;@include type(32px,38px)}#okphotos_cropped_photo{display:block;height:190px;width:190px;margin:40px auto;border-radius:100%}button,a{display:block;margin:auto}button{width:140px;margin-bottom:20px;height:46px;line-height:46px;font-size:18px;font-weight:400}a{font-size:15px;text-decoration:none;color:$Colors-gray-3;&:hover{color:$Colors-gray-4}}}#okphotos_overlay{// Hide close button on final screen &.finished{#okphotos_action_close{display:none}}// Disable add another button when photos are full. &.full_photos{#upload_another{display:none}}}// SIMPLECROP STYLES // --------------------------------------------------------------------------- $coverColor:#F3F5F9;$coverOpacity:0.7;$cropAreaBrightness:0.08;$guidesColor:#FFF;$guidesOpacity:0.25;$handleColor:#FFF;$handleSize:18px;$handlePadding:5px;.simplecrop_container{overflow:hidden;position:relative;text-align:center;height:100%;@include user-select(none);.crop_components{pointer-events:none;@include opacity(0);@include transition(opacity $animSpeed ease-in-out)}&.active{.crop_components{pointer-events:auto;@include opacity(1)}}.image_frame{display:block;position:relative;margin:auto;overflow:hidden;height:100%;.image_holder{height:100%}img{display:block;max-width:100%;max-height:100%;pointer-events:none}}.crop_area{position:absolute;cursor:move;background:rgba(#FFF,$cropAreaBrightness);box-shadow:0 0 0 1000px rgba($coverColor,$coverOpacity)}.guides{display:none;position:absolute;height:100%;width:100%;border:1px solid rgba($guidesColor,$guidesOpacity);&.guides_h{left:0;top:33.3%;height:33.3%;border-left:none;border-right:none}&.guides_v{top:0;left:33.3%;width:33.3%;border-top:none;border-bottom:none}}.crop_handle{box-sizing:content-box;position:absolute;height:$handleSize;width:$handleSize;padding:$handlePadding;span{// To get around overflow hidden position:fixed;display:block;height:$handleSize;width:$handleSize;border-radius:100%;background:$handleColor;box-shadow:0 0 5px rgba(0,0,0,0.2)}&.handle_e{cursor:e-resize;right:-($handlePadding + $handleSize / 2);top:50%;margin-top:-($handlePadding + $handleSize / 2)}&.handle_n{cursor:n-resize;left:50%;margin-left:-($handlePadding + $handleSize / 2);top:-($handlePadding + $handleSize / 2)}&.handle_w{cursor:w-resize;left:-($handlePadding + $handleSize / 2);top:50%;margin-top:-($handlePadding + $handleSize / 2)}&.handle_s{cursor:s-resize;bottom:-($handlePadding + $handleSize / 2);left:50%;margin-left:-($handlePadding + $handleSize / 2)}&.handle_ne{cursor:ne-resize;right:-($handlePadding + $handleSize / 2);top:-($handlePadding + $handleSize / 2)}&.handle_nw{cursor:nw-resize;left:-($handlePadding + $handleSize / 2);top:-($handlePadding + $handleSize / 2)}&.handle_sw{cursor:sw-resize;bottom:-($handlePadding + $handleSize / 2);left:-($handlePadding + $handleSize / 2)}&.handle_se{cursor:se-resize;bottom:-($handlePadding + $handleSize / 2);right:-($handlePadding + $handleSize / 2)}}&.diagonal_handles{.crop_handle{&.handle_n,&.handle_e,&.handle_s,&.handle_w{display:none}}}}// OkPhotos updates // --------------------------------------------------------------------------- a#closehover{top:20px}a#photoclose{position:fixed;top:15px;right:15px;display:block;width:50px;height:50px;outline:none;z-index:1001;background:none;.icon{position:absolute;top:50%;left:50%;margin-left:-10px;margin-top:-10px;@include close-x-small-sprite(x-dark)}&:hover{background:none;.icon{@include close-x-small-sprite(x-dark-hover)}}body.windows &{right:15px}}// ============================================================================= // Help tooltips // ----------------------------------------------------------------------------- // three flavors:// no class:white with a blue border // dark:black with a smaller arrow // small:black,centered,smaller padding $bgColor:#FFF;$textColor:#5e6573;$bgColorDark:#000;$textColorDark:#FFF;$borderColor:#5e8ce3;$headTitleColor:#FFF;$headProgressColor:#c0d5fd;$borderColorError:#fb674e;$animSpeed:200ms;$arrowSize:20px;$arrowSizeSmall:10px;$sprite:url('//cdn.okccdn.com/media/img/icons/tooltip_sprite.png');$sprite2x:url('//cdn.okccdn.com/media/img/icons/tooltip_sprite@2x.png');$spriteHeight:78px;$spriteWidth:26px;@mixin tooltip-sprite-2x{@include image-2x($sprite2x,$spriteWidth,$spriteHeight)}// Mixin that allows for solid or border arrows. Really verbose,but covers // all bases pretty robustly. @mixin border-arrow($size,$side,$bg,$border:''){$dir:'?';.arrow{@if $side == 'top' or $side == 'bottom'{left:50%;margin-left:-($size / 2)}@if $side == 'left' or $side == 'right'{top:50%;margin-top:-($size / 2)}@if $side == 'top'{bottom:-($size);$dir:'down'}@if $side == 'bottom'{top:-($size);$dir:'up'}@if $side == 'left'{right:-($size);$dir:'right'}@if $side == 'right'{left:-($size);$dir:left}@if $border != ''{@include triangle($size,$border,$dir);&:before{@if $side == 'top' or $side == 'bottom'{left:-$size / 2}@if $side == 'left' or $side == 'right'{top:-$size / 2}@if $side == 'top'{bottom:-$size / 2 + 1}@if $side == 'bottom'{top:-$size / 2 + 1}@if $side == 'left'{right:-$size / 2 + 1}@if $side == 'right'{left:-$size / 2 + 1}@include triangle($size,$bg,$dir)}}@else{@include triangle($size,$bg,$dir);&:before{display:none}}}@include animation(fade-in $animSpeed 1)}.oktooltip{display:none;position:absolute;top:20px;left:95px;max-width:275px;background:$bgColor;border:1px solid $borderColor;color:$textColor;cursor:default;text-align:left;-webkit-backface-visibility:hidden;// Fixes text flashing border-radius:4px;// give all non-dark tooltips a lower z-index // ------------------------------------------------------------------------- z-index:$Z-tooltip-guide;&.dark,&.small{z-index:$Z-tooltip}// Details // ------------------------------------------------------------------------- .heading,.msg{font-weight:400;line-height:22px;@include open-sans}.heading{display:none;background:$borderColor;font-weight:600;// this is 10,and not 12,because if the message is one line,// you can see the arrow where it overlaps the header padding:10px 10px 10px 20px;.title{color:$headTitleColor}.progress{color:$headProgressColor;float:right}.close_btn,.prev_btn,.next_btn{display:none;float:right;width:26px;height:26px;line-height:26px;padding:0;margin:-2px 0 0 5px;color:#FFF;font-size:13px;text-align:center;border:none;border-radius:100%;background-color:$borderColor;opacity:0.7;@include transition(background 100ms ease-in-out,opacity 100ms ease-in-out);&:hover{cursor:pointer;background-color:lighten($borderColor,7%);opacity:1}.icon{position:relative}}.close_btn .icon{font-size:10px;top:1px}.prev_btn,.next_btn{background-color:lighten($borderColor,7%)}.prev_btn .icon{left:-1px;top:2px}.next_btn .icon{left:1px;top:2px}}.msg{padding:20px 20px}.arrow,.arrow:before{position:absolute}.arrow:before,.arrow:after{content:''}// States &.has_close{.close_btn{display:block}}&:not(.has_close){.heading{padding-right:17px}}&.has_steps{.close_btn{display:none}.prev_btn,.next_btn{display:block}}&.has_heading{.heading{display:block}}&.open{display:block;@include animation-direction(normal)}&.closing{display:block;@include animation-direction(reverse !important)}&.invisible{display:block;visibility:hidden}&.on_top{@include border-arrow($arrowSize,'top',$bgColor,$borderColor)}&.on_right{@include border-arrow($arrowSize,'right',$bgColor,$borderColor)}&.on_bottom{@include border-arrow($arrowSize,'bottom',$bgColor,$borderColor);// Since the heading is colored,make the whole thing colored when it's on the bottom. &.has_heading{@include border-arrow($arrowSize,'bottom',$borderColor)}}&.on_left{@include border-arrow($arrowSize,'left',$bgColor,$borderColor)}&.no_open_animation{@include animation(none !important)}&.no_word_break{white-space:nowrap}&.no_transition{@include transition-duration(0s)}// Error theme // ------------------------------------------------------------------------- &.error{border-color:$borderColorError;.msg a{color:$borderColorError;&:hover{color:#f95133}}.heading{background:$borderColorError;.close_btn{background-color:$borderColorError;&:hover{background-color:lighten($borderColorError,10%)}}}&.on_top{@include border-arrow($arrowSize,'top',$bgColor,$borderColorError)}&.on_right{@include border-arrow($arrowSize,'right',$bgColor,$borderColorError)}&.on_bottom{@include border-arrow($arrowSize,'bottom',$bgColor,$borderColorError);&.has_heading{@include border-arrow($arrowSize,'bottom',$borderColorError)}}&.on_left{@include border-arrow($arrowSize,'left',$bgColor,$borderColorError)}}// Small theme // ------------------------------------------------------------------------- &.small{max-width:5000px;color:$textColorDark;background:$bgColorDark;border:none;text-align:center;pointer-events:none;@include border-radius(2px);.msg{white-space:nowrap;padding:7px 15px}&.on_top{@include border-arrow($arrowSizeSmall,'top',$bgColorDark)}&.on_right{@include border-arrow($arrowSizeSmall,'right',$bgColorDark)}&.on_bottom{@include border-arrow($arrowSizeSmall,'bottom',$bgColorDark)}&.on_left{@include border-arrow($arrowSizeSmall,'left',$bgColorDark)}}// Dark theme // ------------------------------------------------------------------------- &.dark{color:#fff;background:$bgColorDark;border:none;.msg{padding-top:14px;padding-bottom:14px}&.on_top{@include border-arrow($arrowSizeSmall,'top',$bgColorDark)}&.on_right{@include border-arrow($arrowSizeSmall,'right',$bgColorDark)}&.on_bottom{@include border-arrow($arrowSizeSmall,'bottom',$bgColorDark)}&.on_left{@include border-arrow($arrowSizeSmall,'left',$bgColorDark)}}}// Typography // ----------------------------------------------------------------------------- .oktooltip .msg{ul{list-style-type:disc;margin-left:17px}}// on windows,the letter weight looks poopy in the darker tooltips body.windows .oktooltip{&.small,&.dark{.msg{font-weight:normal;letter-spacing:0.01em}}}$width-circle:80px;$width-gutter:33px;$color-text:$Colors-gray-3;$color-text-hover:$Colors-blue-3;$color-underline:$Colors-gray-4;div.pages{clear:both;padding:20px 0;position:relative;ul{li{color:$color-text;@include type(15px,$width-circle);a{display:block;font-weight:normal;text-align:center;padding:0;color:$color-text;-webkit-touch-callout:none;@include user-select(none);&:hover{color:$color-text-hover}}&.prev{position:absolute;right:50%;margin-right:($width-circle/2) + $width-gutter;a{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAMAAACETmeaAAAABlBMVEUAAACUmqbrZs2uAAAAAXRSTlMAQObYZgAAAB1JREFUeNqNxrEJAAAAwjD7/9OCOItdUiUKbO6RAQVKAB6YY6uZAAAAAElFTkSuQmCC');background-repeat:no-repeat;background-position:0 35px;padding-left:15px;color:$color-text;&:hover{color:$color-text-hover}}&.disabled{display:none}}&.next{position:relative;left:50%;float:left;margin-left:-($width-circle/2);width:$width-circle;height:$width-circle;a{color:#FFF;width:100%;height:100%;background:$Colors-blue-3;border-radius:$width-circle/2;@include transition(background-color 100ms ease-in);&:hover{background:$Colors-blue-2}&.loading{background:$Colors-gray-5}}&.disabled{a,a:hover,a:active{background:$Colors-gray-6;color:$Colors-gray-4;cursor:default}}}&.count{position:absolute;left:50%;margin-left:($width-circle/2) + $width-gutter;a{display:inline;border-bottom:1px solid $color-underline;color:$color-text;&:hover{color:$color-text-hover}}}}}}.pages_content{opacity:1;@include transition(opacity 300ms ease-in-out)}.pages_content.transition_content{opacity:0}$anim-speed:300ms;$arrow-size:14px;.popover{position:relative;text-align:left;-webkit-backface-visibility:hidden;// Fixes text flashing. .contents{padding:30px;background:#fff;border:1px solid $S-color-page-border;color:$Colors-gray-2;border-radius:5px}h2.title{font-size:18px;line-height:15px;padding-bottom:20px;color:$Colors-gray-1}.content.empty{display:none}.desc{line-height:22px;margin-bottom:25px;margin-top:-5px}.buttons{ul{margin:0;li{display:inline-block;vertical-align:top;margin-right:5px;&.align-right{float:right}&:last-child{margin-right:0}}}.flatbutton,.btn{vertical-align:top;width:auto;min-width:120px;margin:0}.btn a{padding:0 20px}.btn.simple a{padding:0}}.tail{position:absolute;width:$arrow-size;height:$arrow-size;background:#fff;border:0px solid $S-color-page-border;@include transform(rotate(45deg))}&.arrowdown .tail,&.arrowtop .tail{border-right-width:1px;border-bottom-width:1px;bottom:-$arrow-size / 2;left:50%;margin-left:50%}&.arrowup .tail,&.arrowbottom .tail{border-top-width:1px;border-left-width:1px;top:-$arrow-size / 2}&.arrowleft .tail{border-bottom-width:1px;border-left-width:1px;left:-$arrow-size / 2}&.arrowright .tail{border-top-width:1px;border-right-width:1px;right:-$arrow-size / 2}&.arrowup .tail,&.arrowdown .tail,&.arrowbottom .tail,&.arrowtop .tail{left:50%;margin-left:-$arrow-size / 2}&.arrowleft .tail,&.arrowright .tail{top:50%;margin-top:-$arrow-size / 2}&.aligncenter{text-align:center;.buttons{margin:0 auto}}}// special JS-generated popovers .popover.okpopover{position:absolute;display:none;z-index:$Z-okpopovers;width:318px;// vary entry animation by the direction &.arrowup,&.arrowbottom{@include animation(fade-in-up ease $anim-speed 1)}&.arrowdown,&.arrowtop{@include animation(fade-in-down ease $anim-speed 1)}&.arrowleft{@include animation(fade-in-left ease $anim-speed 1)}&.arrowright{@include animation(fade-in-right ease $anim-speed 1)}&.invisible{display:block;visibility:hidden}&.open{display:block;@include animation-direction(normal)}&.no_open_animation{@include animation(none !important)}}// ============================================================================= // Profile info summary // ----------------------------------------------------------------------------- div.profile_info{.username,.userinfo{// hide long lines with ellipses,avoid inline-block space vertical-align:top;white-space:nowrap;text-overflow:ellipsis}.username{// make it relative / inline-block so we can position the im icon absolutely position:relative;display:inline-block;.name{display:inline-block;color:$Colors-gray-2;padding-top:3px}a.name{&:hover{color:$Colors-gray-1}}}.userinfo{font-size:13px;color:$Colors-gray-3;cursor:default;overflow:hidden;span{display:inline-block;vertical-align:top;&.dot{width:12px;text-align:center}}}}$padding-x:12px;$padding-y:20px;// Values should match @mixin global-shadow-style $arrow-size:14px;// Keep it even $shadow-size:5px;$shadow-color:rgb(0,17,53);$shadow-alpha:0.16;$top-padding-y:12px;$top-padding-x:15px;$photo-size:56px;$trait-height:35px;$top-color:$Colors-blue-3;.quickview{display:none;position:absolute;width:400px;background:#fff;border-radius:5px;box-shadow:0 0 0 1px rgba($shadow-color,$shadow-alpha),0 0 $shadow-size rgba($shadow-color,$shadow-alpha);z-index:$Z-quickview;@include animation(fade-in-up 150ms ease 1);.inner{padding:$padding-y $padding-x;overflow:hidden;border-radius:5px;@include fade-and-hide(show,100ms)}.spinner{position:absolute !important;top:50% !important;left:50% !important}&.show{display:block}&.loading{min-height:180px;&.interests{min-height:136px}.inner{@include fade-and-hide(hide,0ms)}.arrow{background:#fff}}}.quickview-arrow{content:"";display:block;position:absolute;left:50%;bottom:-$arrow-size / 2;background:#FFF;width:$arrow-size;height:$arrow-size;box-shadow:1px 1px 0 0 rgba($shadow-color,$shadow-alpha),($shadow-size / 2) ($shadow-size / 2) $shadow-size rgba($shadow-color,$shadow-alpha / 2);@include transform(translateX(-50%) rotate(45deg));.flipped &{background:$top-color;bottom:auto;top:-$arrow-size / 2;box-shadow:-1px -1px 0 0 rgba($shadow-color,$shadow-alpha),(-$shadow-size / 2) (-$shadow-size / 2) $shadow-size rgba($shadow-color,$shadow-alpha / 2)}.loading &{background:#fff}}// Top,user info stuff .quickview-top{position:relative;margin-top:-$padding-y;margin-left:-$padding-x;margin-right:-$padding-x;height:80px;padding:$top-padding-y $top-padding-x;background:$top-color;@include clearfix}.quickview-top-photo{position:absolute;top:$top-padding-y;left:$top-padding-x;width:$photo-size;height:$photo-size;margin:auto;img{display:block;width:100%;height:auto;border-radius:100%}&-online{display:none;position:absolute;bottom:0;left:-4px;width:16px;height:16px;background:$Colors-green-3;border-radius:100%;border:2px solid $top-color;&.isOnline{display:block}}}.quickview-top-username,.quickview-top-demo{padding-left:$photo-size + 10px}.quickview-top-username{padding-top:6px;@include type(18px,36px);color:#fff;&:hover{color:#FFF;opacity:0.8}}.quickview-top-demo{@include type(14px,14px);color:$Colors-blue-4;@include helvetica;@include clearfix}.quickview-top-demo-age,.quickview-top-demo-location{float:left}.quickview-top-demo-location:before{content:"•";padding:0 4px}.quickview-top-percentage{position:absolute;top:$top-padding-y;right:$top-padding-x;width:70px;text-align:center;color:#FFF;font-weight:300;@include type(24px,$photo-size);span{position:relative;top:-4px;font-size:18px;@include helvetica}}// Bottom,content stuff .quickview-bottom{padding-top:14px}.qvtraits{height:$trait-height;overflow:hidden;margin-bottom:10px}.qvtraits-trait{position:relative;display:inline-block;height:$trait-height;padding:0 8px;margin-right:4px;line-height:$trait-height - 4;color:$Colors-gray-2;border:2px solid $Colors-gray-6;border-radius:4px;@include helvetica;.okicon{font-size:11px;margin-right:4px;&.i-less-arrow{color:$Colors-gray-4}&.i-more-arrow{color:$Colors-green-2}}}.qvtags{height:22px;padding-left:2px;overflow:hidden;color:$Colors-gray-4;@include helvetica;@include type(15px,22px)}.qvtags-tag{display:inline-block}.qvinterests{padding-left:2px;overflow:hidden;@include type(15px,22px);&-label{display:inline-block;font-weight:600;color:$Colors-gray-2;padding-right:4px}&-interest{display:inline;color:$Colors-gray-3}}.qvempty{color:$Colors-gray-5;font-style:italic;@include type(15px,22px);@include helvetica}// Admin stuff .quickview{.pin,.personality_type{position:absolute;bottom:5px;opacity:0;background:#FFF;border:1px solid $Colors-gray-6;border-radius:4px;&:hover{opacity:1}}.pin{right:5px;@include type(15px,18px)}.personality_type{right:32px;@include type(15px,18px)}}// ---------------------------------------------------------------------------- // Global,outer styles of the quickbuy box // ---------------------------------------------------------------------------- body .quickbuybox .inner{background:transparent}body .quickbuybox,body .quickbuybox .inner,body .quickbuybox iframe{width:100%}body,body.secure,body.comfree{.quickbuybox{height:100%;margin-top:0;margin-left:0;position:fixed;top:0;left:0;z-index:$Z-quickbuy;padding-left:0px}&.expanded{padding-left:0}&.show_enhanced_promo{.iframewrapper{opacity:0}}}body .quickbuybox .inner{height:100%;background:transparent;border:none;position:relative;overflow:hidden;overflow-y:auto;border-radius:0;box-shadow:none}body.ie7 .quickbuybox .inner,body.ie8 .quickbuybox .inner{border:2px solid #ddd;position:absolute;z-index:999}body.ie7 .quickbuybox .inner,body.ie8 .quickbuybox .inner{background:#fff}body .iframewrapper{width:900px;height:450px;margin-left:-450px;margin-top:0;top:60px;left:50%;position:absolute;opacity:1;@include transition(opacity 200ms ease-in)}body .quickbuybox iframe{display:block;height:450px;border:0;background:transparent;visibility:hidden}body .quickbuybox.ready iframe{visibility:visible}body.ie7 .quickbuybox iframe{visibility:visible !important}div.tabbed_heading{position:relative;height:auto;margin:0px $S-gutter 40px;padding-top:27px;border-bottom:1px solid $Colors-gray-5;@include open-sans;h1{height:26px;margin:0;padding-bottom:12px;line-height:20px;color:$Colors-gray-1;font-size:26px;font-weight:300;letter-spacing:0px;@include okc-h1}ul.page_tabs{margin-top:9px;padding-left:0;height:30px;li{float:left;padding:0;margin-right:$S-gutter;height:31px;color:$Colors-gray-1;font-weight:400;-webkit-font-smoothing:antialiased;@include type(18px,25px);a{padding:0;margin:0;display:block;color:$Colors-gray-1;&:hover{color:$Colors-blue-3}// sometimes we show counts in here,but they could be zero // by default,hide zeroes .count.zero{display:none}}// sometimes SHOW zeroes &.showzeroes{a .count.zero{display:inline}}&.active{color:$Colors-blue-3;border-bottom:3px solid $Colors-blue-3;a,a:hover{cursor:default;color:$Colors-blue-3}}//----------------------------------- // Legacy,however potentially usable //----------------------------------- &.private{background-image:url(//cdn.okccdn.com/media/img/icons/tab_lock.png);background-position:right 0px;background-repeat:no-repeat;&.active{background-position:right -1px}a,a:hover{padding-right:23px}}img{position:absolute;top:9px;right:-18px}&.active img{display:none}}}a.blue_tab{position:absolute;top:33px;right:0;padding:0px 22px;height:30px;line-height:31px;font-size:12px;background:#d5e1ed;border-radius:5px;box-shadow:0px 1px 0px $Colors-gray-7;&:hover{color:#142d69}}&.no_tabs{h1{padding-bottom:11px}}}$banner-padding:-25px;// Matches the bottom padding value for the banner. $tabs-padding:20px;.page-featured{h1{font-size:30px;font-weight:300;margin-bottom:5px;margin-left:-1px;margin-right:0;margin-top:0}}.tabs{margin:0 auto $banner-padding;&-item{font-size:18px;font-weight:300;a{display:inline-block;color:$Colors-blue-4;padding:$tabs-padding;@include transition(color 100ms ease)}&.is-active a{position:relative;// This is kind of a wacky way to make a border but it lets us keep a big // hit area around the link while having a border that only underlines the // text,rather than the whole padded element. &:after{border-bottom:4px solid $Colors-blue-4;bottom:0;content:"";left:$tabs-padding;position:absolute;@include calc(width,"100% - #{$tabs-padding * 2}")}}&.is-active a,a:hover{color:$Colors-gray-7}&:first-child{margin-left:-20px}}}// extras and various template styles // Noscript message noscript{p{padding:20px;margin-top:-1px;font-size:15px;background:$Colors-red-2;color:#fff;text-align:center;@include open-sans;strong{@include open-sans-semibold}a{color:#fff;text-decoration:underline;&:hover{opacity:.8}}}}// Hide pub errors by default. They get shown for staff in staffbar.scss. font[color=red]{display:none}// Party mode:the gift that keeps on giving #okparty{@include animation(fade-in 1000ms 1);@include animation-delay(500ms)}// If a user hits the desktop site from a mobile device,tell them to switch #mobile_note{margin:0;position:relative;z-index:210;a{display:block;background:$Colors-blue-7;padding:30px 15px;text-align:center;font-size:1.2em;color:$Colors-blue-3}}// Re-enable staff link for when you're forcing non-staff #re_enable_staff{position:fixed;bottom:0;right:0;padding:5px 10px;display:block;color:#fff;font-size:10px;background:$Colors-gray-9;border-top-left-radius:5px;&:hover{background:$Colors-gray-1}}// Class for disabling scrolling .noscroll{overflow:hidden}// Upgrade Ads // ----------------------------------------------------------------------------- @mixin upgrade-ad($bg-color,$text-color,$position){.wrapper{background-color:$bg-color;color:$text-color}// all of the ad icons are below larger ones $y-position:-100px;// the icon and arrows are staggered $icon-offset:-50px;.icon{background-position:$position $y-position}.arrow{background-position:($position + $icon-offset) $y-position}}div.upgrade_ad{position:relative;margin-bottom:20px;@include type(15px,30px);.wrapper{display:block;position:relative;padding:18px 45px 16px 80px;min-height:65px;border-radius:2px}.icon,.arrow{background-image:url(//cdn.okccdn.com/media/img/alist/alist_sprite_2014-09-16.png);background-repeat:no-repeat;display:block;position:absolute}.icon{width:50px;height:50px;left:16px;top:50%;margin-top:-25px}.text{font-weight:400;strong,b{font-weight:600}&.hasbody{display:block;padding:6px 0;line-height:22px}}.header,.body{display:block}.body{padding-bottom:6px}.arrow{width:14px;height:26px;right:14px;top:50%;margin-right:12px;margin-top:-13px;@include transition(margin-right 200ms ease)}&:hover{.arrow{margin-right:6px}}// smaller version:moves the icon and text a bit to the left &.small{.wrapper{padding-top:17px;padding-bottom:11px;padding-left:65px}.icon{left:6px}}// ratings &.intoyou{$bg:lighten($Colors-orange-3,10.8%);$text:darken($Colors-orange-1,2.7%);@include upgrade-ad($bg,$text,0px)}// match search options &.searchby{@include upgrade-ad(#ffe5eb,#ff3684,-100px)}// read receipts &.receipts{$bg:lighten($Colors-purple-4,2%);@include upgrade-ad($bg,$Colors-purple-1,-200px)}// kill the ads &.comfree{@include upgrade-ad($Colors-gray-6,$Colors-gray-2,-300px)}// invisible browsing &.browse{$bg:lighten($Colors-blue-5,3%);@include upgrade-ad($bg,$Colors-blue-2,-400px)}// message storage &.storage{@include upgrade-ad(#e7eeea,#3e9453,-500px)}// change username &.username{@include upgrade-ad(#eaf2de,#6da91b,-700px)}// spotlight &.promote{@include upgrade-ad(#e6f5f4,#42aca7,-800px)}// filters &.filters{$bg:lighten($Colors-purple-4,2%);@include upgrade-ad($bg,$Colors-purple-1,-900px)}// unlock filters &.unlock{$bg:lighten($Colors-purple-4,2%);@include upgrade-ad($bg,$Colors-purple-1,-1000px)}// Message Priority &.priority{$bg:lighten($Colors-purple-4,2%);@include upgrade-ad($bg,$Colors-purple-1,-1100px)}// See Answers &.answers{@include upgrade-ad($Colors-green-4,$Colors-green-1,-1200px)}// Incognito &.incognito{// this is implemented in css/globals/incognito.scss // sorry!}// special case for the small unlock icon &.unlock.small{.wrapper{padding-top:14px;padding-bottom:11px;padding-left:46px;min-height:50px}.icon{left:1px}.text{font-size:13px}.arrow{margin-right:4px}&:hover .arrow{margin-right:0}}}// A-list subscription legal womp womp // ----------------------------------------------------------------------------- div#legal_box{width:300px;min-height:240px;position:absolute;top:53px;left:-367px;background:#f9f9f9;border:1px solid #fff;padding:20px;font-size:13px;line-height:20px;opacity:0;visibility:hidden;z-index:5000;@include border-radius(5px 0 0 5px);@include box-shadow(0 5px 25px rgba(0,0,0,.45));@include transition(visibility 0s linear 350ms,opacity 100ms ease-in 100ms)}div#confirm_password div#legal_box{top:0;padding:0;min-height:227px;width:360px;left:-379px}div#confirm_password a#legal_more.multi_month + div#legal_box{left:-349px;min-height:224px;width:330px}div#confirm_password div#legal_box p{padding:20px}div#legal_box.visible{opacity:1;visibility:visible;z-index:100;@include transition(opacity 50ms)}div#legal_box span{display:block}div#legal_box.visible{opacity:1;visibility:visible;z-index:100;@include transition(opacity 0ms)}form#upgrade_form.alternate div.summary div.description div#legal_box p,div#legal_box p{color:#777;font-size:13px;line-height:20px;cursor:default}div#legal_box span.tail{position:absolute;width:11px;height:21px;background:url(//cdn.okccdn.com/media/img/icons/cards.png) -180px -0px no-repeat;right:-11px;top:120px;@include transform(scaleX(-1))}a#legal_more.multi_month + div#legal_box span.tail{top:152px}div#confirm_password div#legal_box span.tail{top:170px}div#confirm_password a#legal_more.multi_month + div#legal_box span.tail{top:186px}// Read Receipt ads -- messages,profile // ----------------------------------------------------------------------------- #read_receipt_promo div.image{padding-left:9px;padding-top:20px}// USER ROW -------------------------------------------------------------------- // ----------------------------------------------------------------------------- $urBg:#fff;$urAnim:300ms;$urAnimFast:75ms;$urTextDark:$Colors-gray-1;$urTextLight:$Colors-gray-4;$urLinkHover:$Colors-gray-1;$width-thumb:125px;$height-thumb:120px;$height-hidden:88px;div.user_row_item{display:block;position:relative;width:auto;height:$height-thumb + 1;margin:0 0 10px 0;padding:0;border:none;border-bottom:1px solid $Colors-gray-5;background:#FFF;@include clearfix;@include open-sans;border-radius:2px;@include transition-property(height,margin,opacity,background,border-color);@include transition-duration($urAnim,$urAnim,$urAnim,$urAnimFast,$urAnimFast);@include transition-timing-function(ease-in-out);// User info ----------------------------------------- .user_image{float:left;width:$width-thumb;height:$height-thumb;margin-right:20px;border-radius:2px 0 0 2px;overflow:hidden;img{display:block;width:$width-thumb;height:$width-thumb;margin-top:-($width-thumb - $height-thumb)/2}}.user_info{height:auto;padding-top:19px;line-height:21px;.username,.userinfo{max-width:235px}.username{font-size:18px;.name{padding:0;padding-bottom:2px;color:$urTextDark}}.userinfo{font-size:15px;color:$urTextLight}}&:hover .user_info{.username .name{color:#000}}// Ratings ------------------------------------------- .into_you{// this is up first because it declares position @include into-you-icon;position:absolute;bottom:50%;right:97px;cursor:pointer;z-index:1000;overflow:hidden;margin-bottom:-20px;.text{position:absolute;left:-200px}}.binary_rating_button{position:absolute;left:145px;bottom:18px;z-index:3;@include transition(none);@include opacity(0)}&:hover .binary_rating_button,&.you_like .binary_rating_button{@include opacity(1)}&.you_like .timestamp{left:160px}// Match percentage ----------------------------------- .match_percentage{position:absolute;top:50%;right:30px;margin-top:-(24px + 21px)/2 - 3;line-height:20px;height:24px + 21px;color:$urTextDark;text-align:center;.percentage,.label{display:block}.percentage{@include type(18px,24px)}.label{@include type(15px,23px)}}&:hover .timestamp{@include opacity(0.3)}// Actions --------------------------------------------- .timestamp,.hide_btn,.favorite_btn{position:absolute;font-size:15px;bottom:16px;color:$urTextLight;@include opacity(0)}.timestamp{width:50%;left:$width-thumb + 20px;@include opacity(1)}.hide_btn,.favorite_btn{&:hover{color:$urLinkHover}}.hide_btn,.favorite_btn,&.you_like .timestamp{left:180px}&:hover{.hide_btn,.favorite_btn{@include opacity(1)}.timestamp{@include opacity(0)}}&.no_time{}&.you_like{.timestamp{.hour_minute{display:none}}}.favorite_btn{.favorite{display:inline}.unfavorite{display:none}}&.favorite .favorite_btn{.favorite{display:none}.unfavorite{display:inline}}// Icons --------------------------------------------- .new_icon{display:block;width:10px;height:10px;position:absolute;top:50%;left:-24px;margin-top:-5px;background:$Colors-blue-3;border-radius:100%}// Link cover ---------------------------------------- .link_cover{a{display:block;position:absolute;padding:0;margin:0;// for some reason,links don't work in ie9 unless there's a background color? body.ie9 &{background:rgba(0,0,0,0)}}.top{top:0;left:0;right:0;height:80px}.bottom{bottom:0;left:0;right:0;height:15px}.left{left:0;top:0;bottom:0;width:$width-thumb}.right{right:0;top:0;bottom:0;width:310px}}// Unhide message ------------------------------------ $height-hidden:88px;.unhide_msg{display:none;margin-left:30px;@include type(15px,$height-hidden)}// Class modifiers ----------------------------------- &.hide{height:$height-hidden;background:$Colors-gray-6;border-color:transparent}// The star indicating you liked them used to be under the match % // Now that we have more room to place them side-by-side,override that &.likes_you{.match_percentage{top:50%}}&.transitioning{overflow:hidden}&.remove{overflow:hidden;height:0;opacity:0;margin:0;pointer-events:none;.hide_btn,.favorite_btn{display:none}}}// DUMMY USER ROW -------------------------------------------------------------- // ----------------------------------------------------------------------------- $dummyColor:$Colors-gray-5;div.user_row_item.dummy{border-bottom:0;@include clearfix;.user_image,.user_info span,.timestamp{background:$dummyColor;color:$dummyColor}.match_percentage{div{color:$dummyColor;background:$dummyColor;overflow:hidden}.percentage{height:16px;margin-bottom:5px}.label{height:10px;width:80%;margin:auto}}.user_info div,.timestamp{overflow:hidden}.user_info{.username{height:15px;margin-bottom:5px}.userinfo{height:12px}}.timestamp{height:12px;opacity:1 !important}}.user_list .time_divider.dummy{line-height:14px;span{color:$dummyColor;background:$dummyColor;&:before,&:after{border-color:$dummyColor}}}#dummy_cover{position:absolute;top:0;left:-10px;// make the dummy cover also cover the right-hand column right:-($S-width-page-ad + $S-width-page-gutter);z-index:1;// sometimes the user list is position:relative so we can center things // on it. (like in the visitors field.) // if that's the case,this could end up too short to cover the right side. // so set a min-height on it. min-height:300px;bottom:0;// transparentize DECREASES the passed-in value from 1 // so higher is more see-through and lighter! @include linear-gradient(transparentize($Colors-gray-7,0.5),transparentize($Colors-gray-7,0.5),transparentize($Colors-gray-7,0.05))}// Modals typically need to be at or near the top of the stacking // context. This particular modal sits above everything but the StaffBar // at the time I'm writing this. @foley Nov. 13,2015 $reallyHighZIndex:999999;$windowShadeColor:rgba(17,17,17,0.7);// These values match the JavaScript values in // js/_source/okmodal/util/Constants.js $fadeInTime:300ms;$fadeOutTime:150ms;.OkModal{height:0;left:0;position:fixed;top:0;width:100%;z-index:$reallyHighZIndex;// When the modal is inside the default wrapper,push it down a little more // than normal. & &-inner{position:relative;top:115px}&-inner{opacity:0;transition:opacity $fadeOutTime ease;z-index:$reallyHighZIndex}&-inner.is-visible{opacity:0.99;transition:opacity $fadeInTime ease}}// transitions for modals which use the Modal.jsx component,but not OkModal .modal-enter,.modal-appear{opacity:0.01}.modal-enter.modal-enter-active,.modal-appear.modal-appear-active{opacity:1;@include transition(opacity $fadeInTime ease)}.modal-leave{opacity:1}.modal-leave.modal-leave-active{opacity:0.01;@include transition(opacity $fadeOutTime ease)}.OkModalContent{border-radius:5px;box-shadow:1px 2px 10px 0 rgba(0,0,0,0.1);left:50%;overflow:hidden;position:absolute;top:15px;z-index:$reallyHighZIndex;@include transform(translateX(-50%));// some settings shouldn't be applied to reactmodal &:not(.reactmodal){max-width:550px;width:100%;text-align:center}// some settings shouldn't be applied to reactmodal &:not(.reactmodal){max-width:550px;width:100%;text-align:center;.OkModalContent-main{background-color:#fff;padding:34px 45px;@include type(16px,26px)}}&-header{background-color:#4c7bd9;color:#fff;padding:40px}&-headline{font-family:'Open Sans';font-size:32px;font-weight:300}&-subheadline{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:18px;font-weight:700;line-height:24px;margin-bottom:13px;padding-bottom:0}&-image{// Matches the width Millie provided for modals. We need this max-width // because some SVGs stretch to fill up the entire container. max-width:143px}&-image + &-headline{padding-top:30px}&-body{font-family:'Helvetica Neue',Helvetica,sans-serif;margin:0 auto}&-button{margin-top:33px;a{height:auto;padding:4.5px 26px;width:auto}}&-dismiss{font-family:'Helvetica Neue',Helvetica,sans-serif;margin-top:13px}&-button a{display:inline-block}&-dismiss span{border-bottom:1px solid $Colors-gray-3;color:$Colors-gray-3;cursor:pointer;&:hover{color:$Colors-gray-2}}}.FullscreenOverlay{left:0;position:fixed;top:0;z-index:$reallyHighZIndex;text-align:center;&-inner{background-color:$windowShadeColor;height:100%;left:0;position:absolute;top:0;width:100%;// position scrolling modals slightly differently .OkModal--scrollingoverlay &{position:fixed;bottom:0;right:0;overflow:auto;.OkModalContent{margin-bottom:100px}}}}[data-okmodal]{position:relative;z-index:10}// Customizations... if you need to alter the appearance of an individual modal // do it here. .OkModal-inbox-full{.OkModalContent-body{max-width:396px}}.OkModal-photoblocker{.OkModalContent-body{max-width:326px}}.OkModal-swly-stars{.OkModalContent-body{max-width:410px}}.OkModal-browse-invisibly{position:absolute;top:120px;width:100%;left:0}