/****************************** Styles *********************************/ .clef-badge-prompt { position: relative; min-height: 170px; } .clef-badge-prompt * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clef-badge-prompt .link-fade { display: none; } .clef-badge-prompt .dismiss { position: absolute; top: 5px; right: 10px; font-weight: bold; color: #AAA; font-size: 20px; } .clef-badge-prompt .dismiss:hover { color: #888; } .clef-badge { width: 100%; text-align: center; display: inline-block; margin: 10px auto; } .clef-badge * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clef-badge.pretty { display: block; overflow: hidden; text-indent: -579px; height: 50px; width: 140px; background: url("https://bit.ly/clef-wordpress-badge"); background-size: 100% 100%; opacity: .8; } .clef-badge.pretty:hover { opacity: 1; } .clef-login-form .clef-button-container { width: 188px; height: 35px; margin: auto; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword) .clef-login-container .clef-button-container { margin-bottom: 30px; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword) .clef-login-container .close-overlay, .clef-login-form:not(.login-action-register):not(.login-action-lostpassword) .clef-login-container .overlay-info, .clef-login-form:not(.login-action-register):not(.login-action-lostpassword) .clef-login-container .open-overlay { display: none; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-hidden:not(.clef-login-form-embed):not(.clef-override-or-invite) #login form#loginform { padding: 40px 20px; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-hidden:not(.clef-login-form-embed):not(.clef-override-or-invite) #login form#loginform input, .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-hidden:not(.clef-login-form-embed):not(.clef-override-or-invite) #login form#loginform label { display: none; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password):not(.interim-login) #login { padding-top: 50px; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) #login { width: 400px; max-width: 100%; margin: auto; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) #login input, .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) #login label { visibility: hidden; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) #login form { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 520px; position: relative !important; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) #login .clef-embed-wrapper { margin: auto !important; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .clef-login-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; overflow: visible; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .clef-login-container .clef-button-container { padding-top: 5px; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password):not(.clef-closed) p#nav { display: none; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password).clef-closed #login { width: 320px; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password).clef-closed #login input, .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password).clef-closed #login label { visibility: visible; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password).clef-closed #login form { height: auto; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password).clef-closed .clef-login-container { height: 25px; top: auto; bottom: 0; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password).clef-closed .clef-button-container { display: none; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password).clef-closed .overlay-info, .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password).clef-closed .close-overlay { display: none; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password).clef-closed .open-overlay { display: block; margin: 0; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .clef-button-container { margin: 0 auto; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .clef-button-container .spinner-container { display: none; text-align: center; position: absolute; top: 175px; left: 0; width: 100%; height: 100%; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .clef-button-container .spinner-container .spinner { margin-top: 25px; display: inline-block; float: none; width: 50px; height: 50px; background-image: url(../img/loading.gif); background-size: 100%; background-position: center; background-repeat: no-repeat; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-text { position: absolute; width: 100%; bottom: 12px; margin-top: 5px; text-align: center; display: block; color: #aaa; cursor: pointer; text-decoration: none; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-text:hover { color: #999; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-text:active { outline: none; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .or-container, .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .open-overlay { display: none; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-info { display: block; position: absolute; bottom: 10px; left: 0; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-info .info { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 90%; margin: auto; border: 1px solid #eee; padding: 10px; background: white; color: #999; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-info .info p { font-size: 11px; line-height: 15px; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-info .info p a { color: #999; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-info .info p:not(:last-child) { margin-bottom: 5px !important; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-info .open { height: 15px; width: 15px; font-size: 10px; text-align: center; line-height: 15px; border-radius: 15px; color: #ccc; border: 1px solid #ccc; cursor: pointer; margin-left: 10px; display: none; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-info .open:hover { color: #b3b3b3; border-color: #b3b3b3; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-info.closed .info { display: none; } .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite):not(.clef-auto-connect-account):not(.clef-show-username-password) .overlay-info.closed .open { display: block; } @media screen and (max-width: 400px) { .clef-login-form:not(.login-action-register):not(.login-action-lostpassword).clef-login-form-embed:not(.clef-override-or-invite) #login { width: 320px; padding: 0; } } .login-action-register.clef-login-form .clef-register-container { padding-top: 20px; } #clef-settings-container, #connect-clef-account { width: 100%; height: 100%; position: relative; } #clef-settings-container *, #connect-clef-account * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #clef-settings-container .message, #connect-clef-account .message { margin-top: 20px; margin-left: 0; display: none; } #clef-settings-container #clef-settings, #connect-clef-account #clef-settings { position: aboslute; top: 0; left: 0; } #clef-settings-container .settings-section, #connect-clef-account .settings-section { background: white; padding: 20px; margin: 20px 0; margin-left: 0 !important; *zoom: 1; max-width: 75em; margin-left: auto; margin-right: auto; } #clef-settings-container .settings-section h3, #clef-settings-container .settings-section h4, #connect-clef-account .settings-section h3, #connect-clef-account .settings-section h4 { margin: 0; } #clef-settings-container .settings-section:before, #clef-settings-container .settings-section:after, #connect-clef-account .settings-section:before, #connect-clef-account .settings-section:after { content: " "; display: table; } #clef-settings-container .settings-section:after, #connect-clef-account .settings-section:after { clear: both; } #clef-settings-container .settings-section .error.form-error, #connect-clef-account .settings-section .error.form-error { float: left; } #clef-settings-container .settings-section .inputs-container, #connect-clef-account .settings-section .inputs-container { display: block; float: left; margin-right: 1.85185%; width: 59.25926%; } #clef-settings-container .settings-section .inputs-container:last-child, #connect-clef-account .settings-section .inputs-container:last-child { margin-right: 0; } @media screen and (max-width: 768px) { #clef-settings-container .settings-section .inputs-container, #connect-clef-account .settings-section .inputs-container { display: block; float: left; margin-right: 1.85185%; width: 100%; } #clef-settings-container .settings-section .inputs-container:last-child, #connect-clef-account .settings-section .inputs-container:last-child { margin-right: 0; } } #clef-settings-container .settings-section .inputs-container .input-container, #connect-clef-account .settings-section .inputs-container .input-container { background: #EEE; padding: 10px; margin: 10px 0; display: block; float: left; margin-right: 1.85185%; width: 100%; } #clef-settings-container .settings-section .inputs-container .input-container:last-child, #connect-clef-account .settings-section .inputs-container .input-container:last-child { margin-right: 0; } #clef-settings-container .settings-section .inputs-container .input-container label, #connect-clef-account .settings-section .inputs-container .input-container label { display: block; float: left; margin-right: 1.85185%; width: 49.07407%; margin-right: 0 !important; } #clef-settings-container .settings-section .inputs-container .input-container label:last-child, #connect-clef-account .settings-section .inputs-container .input-container label:last-child { margin-right: 0; } @media screen and (max-width: 768px) { #clef-settings-container .settings-section .inputs-container .input-container label, #connect-clef-account .settings-section .inputs-container .input-container label { display: block; float: left; margin-right: 1.85185%; width: 100%; } #clef-settings-container .settings-section .inputs-container .input-container label:last-child, #connect-clef-account .settings-section .inputs-container .input-container label:last-child { margin-right: 0; } } #clef-settings-container .settings-section .inputs-container .input-container input, #clef-settings-container .settings-section .inputs-container .input-container select, #connect-clef-account .settings-section .inputs-container .input-container input, #connect-clef-account .settings-section .inputs-container .input-container select { float: right; width: auto; margin: 0; margin-bottom: 5px; } @media screen and (max-width: 768px) { #clef-settings-container .settings-section .inputs-container .input-container input, #clef-settings-container .settings-section .inputs-container .input-container select, #connect-clef-account .settings-section .inputs-container .input-container input, #connect-clef-account .settings-section .inputs-container .input-container select { clear: both; float: none; margin: 10px 0; } } @media screen and (max-width: 768px) { #clef-settings-container .settings-section .inputs-container .input-container input[type="checkbox"], #connect-clef-account .settings-section .inputs-container .input-container input[type="checkbox"] { width: 25px; } } #clef-settings-container .settings-section .inputs-container .ajax-settings-msg, #connect-clef-account .settings-section .inputs-container .ajax-settings-msg { clear: both; margin: 0; margin-bottom: 20px; position: relative; top: 10px; } #clef-settings-container .settings-section.multisite .inputs-container, #connect-clef-account .settings-section.multisite .inputs-container { display: block; float: left; margin-right: 1.85185%; width: 49.07407%; } #clef-settings-container .settings-section.multisite .inputs-container:last-child, #connect-clef-account .settings-section.multisite .inputs-container:last-child { margin-right: 0; } #clef-settings-container .settings-section.multisite .inputs-container .input-container, #connect-clef-account .settings-section.multisite .inputs-container .input-container { display: block; float: left; margin-right: 3.77358%; width: 100%; } #clef-settings-container .settings-section.multisite .inputs-container .input-container:last-child, #connect-clef-account .settings-section.multisite .inputs-container .input-container:last-child { margin-right: 0; } #clef-settings-container .sync .spinner-container, #connect-clef-account .sync .spinner-container { text-align: center; position: absolute; top: 100px; left: 0; width: 100%; height: 100%; } #clef-settings-container .sync .spinner-container .spinner, #connect-clef-account .sync .spinner-container .spinner { display: inline-block; float: none; } #clef-settings-container .sync iframe, #connect-clef-account .sync iframe { display: none; } #clef-settings-container .invite-users .invite-users-message, #connect-clef-account .invite-users .invite-users-message { margin: 10px 0 0 0; clear: both; } #clef-settings-container .invite-users .header h3, #clef-settings-container .invite-users .header h4, #connect-clef-account .invite-users .header h3, #connect-clef-account .invite-users .header h4 { margin-top: 0; margin-bottom: 5px; } #clef-settings-container .invite-users .button, #connect-clef-account .invite-users .button { margin-top: 20px; } #clef-tutorial { width: 100%; height: 100%; display: none; margin-top: 40px; *zoom: 1; max-width: 75em; margin-left: auto; margin-right: auto; } #clef-tutorial:before, #clef-tutorial:after { content: " "; display: table; } #clef-tutorial:after { clear: both; } #clef-tutorial * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #clef-tutorial .clef-tutorial-container { display: block; float: left; margin-right: 1.85185%; width: 59.25926%; margin-left: 20.37037%; min-width: 460px; } #clef-tutorial .clef-tutorial-container:last-child { margin-right: 0; } #clef-tutorial .tutorial-message { display: block; float: left; margin-right: 1.85185%; width: 59.25926%; margin-left: 20.37037%; padding: 10px; margin-top: 20px; margin-bottom: 20px; } #clef-tutorial .tutorial-message:last-child { margin-right: 0; } #clef-tutorial .sub { display: none; } #clef-tutorial .sub h1 { line-height: 1.3em; font-size: 20px; padding-bottom: 5px; border-bottom: 1px solid #EEE; margin-bottom: 20px; } #clef-tutorial .intro { text-align: center; } #clef-tutorial .intro h1 { text-align: center; font-size: 22px; margin-bottom: 0; font-weight: 500; } #clef-tutorial .intro .button { text-align: center; display: inline-block; margin: 40px auto; background: #0D9DDB; border: none; -webkit-box-shadow: 3px 3px #07587b; box-shadow: 3px 3px #07587b; border-radius: 0; font-weight: bold; font-size: 18px; } #clef-tutorial .intro .button:hover { background: #0c8cc3; } #clef-tutorial .intro .quotes { background: #DDD; padding: 5px; } #clef-tutorial .intro .quotes blockquote { color: #333; text-align: left; font-weight: 700; font-size: 17px; line-height: 1.2em; margin-bottom: 70px; } #clef-tutorial .intro .quotes blockquote .highlight { background: none; border: none; text-decoration: underline; } #clef-tutorial .intro .quotes blockquote cite { font-weight: 300; float: right; clear: both; margin-top: 30px; } #clef-tutorial .intro .quotes blockquote .highlight { padding: 3px 5px; text-decoration: none; display: inline-block; -webkit-transform: skewX(-3deg); -ms-transform: skewX(-3deg); transform: skewX(-3deg); color: white; } #clef-tutorial .intro .quotes blockquote .highlight.red { color: white; font-weight: bold; background: rgba(246, 80, 88, 0.6); } #clef-tutorial .intro .quotes blockquote .highlight.red:hover { background: #F65058; } #clef-tutorial .intro .quotes blockquote .highlight.orange { color: white; font-weight: bold; background: rgba(255, 153, 64, 0.6); } #clef-tutorial .intro .quotes blockquote .highlight.orange:hover { background: #FF9940; } #clef-tutorial .intro .quotes blockquote .highlight.green { color: white; font-weight: bold; background: rgba(0, 186, 110, 0.6); } #clef-tutorial .intro .quotes blockquote .highlight.green:hover { background: #00BA6E; } #clef-tutorial .intro .skip { float: right; color: #AAA; text-decoration: none; margin-top: 5px; } #clef-tutorial .intro .skip:hover { color: #999; text-decoration: underline; } #clef-tutorial .sync { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); border: 1px solid #e5e5e5; background: white; padding: 20px 25px; } #clef-tutorial .sync iframe { margin: auto; display: block; width: 400px; height: 500px; } #clef-tutorial .invite h1 { margin-bottom: 10px; } #clef-tutorial .invite .invite-users { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); border: 1px solid #e5e5e5; background: white; padding: 20px 25px; } #clef-tutorial .invite .invite-users .header h3 { display: none; } #clef-tutorial .invite .invite-users .header h4 { font-size: 16px; } #clef-tutorial .invite .invite-users .already-disabled { display: none; } #clef-tutorial .invite .invite-users .preview-container { margin-top: 30px; float: none; width: 100%; } #clef-tutorial .invite .invite-users .preview-container h4 { margin-top: 0; } #clef-tutorial .invite .next { display: inline-block !important; } #clef-tutorial .login { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); border: 1px solid #e5e5e5; background: white; padding: 20px 25px; } #clef-tutorial .login .button-wrapper { margin: 60px auto; width: 190px; } #clef-tutorial .login iframe { margin-top: 10px; width: 100%; height: 180px; } #clef-tutorial .using-clef { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); border: 1px solid #e5e5e5; background: white; padding: 20px 25px; } #clef-tutorial .using-clef h1 { border-bottom: 1px solid #EEE; padding-bottom: 5px; display: inline-block; } #clef-tutorial .using-clef h3 { color: #333; } #clef-tutorial .using-clef .next { margin: 20px 0; } #clef-tutorial .waltz { display: none; margin-top: 80px; padding: 10px; } #clef-tutorial .waltz img { display: block; float: left; margin-right: 1.85185%; width: 18.51852%; margin-top: 20px; } #clef-tutorial .waltz img:last-child { margin-right: 0; } #clef-tutorial .waltz .text { display: block; float: left; margin-right: 1.85185%; width: 79.62963%; margin-right: 0; } #clef-tutorial .waltz .text:last-child { margin-right: 0; } #clef-tutorial .waltz .text h1, #clef-tutorial .waltz .text p { margin: 5px; border: 0; } #clef-tutorial .waltz .buttons { clear: both; margin-bottom: 40px; position: relative; top: 30px; } #clef-tutorial .waltz .buttons .button { width: 44%; text-align: center; margin: 0; } #clef-tutorial .waltz .buttons .button:first-child { margin-right: 3%; margin-left: 4%; } #clef-tutorial .user, #clef-tutorial .no-sync { text-align: left; } #clef-tutorial .user h1, #clef-tutorial .no-sync h1 { text-align: left; } #clef-tutorial.user .no-user, #clef-tutorial.no-sync .no-user { display: none; } #clef-tutorial.user .user { display: block; opacity: 1; } #clef-tutorial.no-sync .no-sync { display: block; opacity: 1; } #connect-clef-account .skip { display: none; } #clef-settings-form * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #clef-settings-form .twitter-follow-button { position: relative; top: 4px; } #clef-settings-form .settings-section.pro-section { position: relative; display: none; } #clef-settings-form .settings-section.pro-section:before { width: 80px; height: 30px; line-height: 30px; background: #00BA6E; display: block; content: "PRO"; position: absolute; top: 0; right: 0; color: white; font-weight: bold; text-align: center; opacity: .7; } #clef-settings-form .settings-section.override-settings .inputs-container .input-container { background: none; padding: 0; margin: 0; clear: both; } #clef-settings-form .settings-section.override-settings .inputs-container label { width: auto; margin: 0; line-height: 25px; font-weight: bold; padding-left: 10px; background: #DDD; padding: 1px 5px; font-size: 9px; } @media screen and (max-width: 768px) { #clef-settings-form .settings-section.override-settings .inputs-container label { width: 100%; font-size: 12px; } } #clef-settings-form .settings-section.override-settings .inputs-container input { float: left; } #clef-settings-form .settings-section.override-settings .inputs-container .generate-override { float: left; width: auto; clear: both; cursor: pointer; color: #BBB; } #clef-settings-form .settings-section.override-settings .inputs-container .generate-override:hover { text-decoration: underline; } #clef-settings-form .settings-section.override-settings .inputs-container .override-buttons { margin-top: 10px; clear: both; } #clef-settings-form .settings-section.override-settings .inputs-container .override-buttons .button { display: inline-block; text-align: center; margin-top: 30px; } #clef-settings-form .settings-section.override-settings .preview-container { display: block; float: left; margin-right: 1.85185%; width: 38.88889%; display: none; } #clef-settings-form .settings-section.override-settings .preview-container:last-child { margin-right: 0; } #clef-settings-form .settings-section.override-settings .preview-container img { margin-top: 15px; width: 100%; } #clef-settings-form .settings-section.override-settings.set .preview-container { display: block; } #clef-settings-form .settings-section.override-settings.set .override-buttons { display: block; } #clef-settings-form .settings-section.support-settings .preview-container { padding-top: 10px; display: block; float: left; margin-right: 1.85185%; width: 38.88889%; } #clef-settings-form .settings-section.support-settings .preview-container:last-child { margin-right: 0; } @media screen and (max-width: 768px) { #clef-settings-form .settings-section.support-settings .preview-container { display: none; } } #clef-settings-form .settings-section.support-settings .preview-container .ftr-preview { background: #fff; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); padding: 20px; font-weight: 400; overflow: hidden; margin-top: 5px; } #clef-settings-form .settings-section.support-settings .preview-container .ftr-preview a { margin-top: 20px; } #clef-settings-form .settings-section.support-settings .support-html-container { margin-top: 20px; } #clef-settings-form .settings-section.support-settings .support-html-container textarea { width: 400px; padding: 10px; margin-bottom: 10px; } #clef-settings-form .settings-section.clef-settings .inputs-container label { display: block; float: left; margin-right: 1.85185%; width: 28.7037%; } #clef-settings-form .settings-section.clef-settings .inputs-container label:last-child { margin-right: 0; } #clef-settings-form .settings-section.clef-settings .inputs-container input[type="text"], #clef-settings-form .settings-section.clef-settings .inputs-container textarea { display: block; float: left; margin-right: 1.85185%; width: 69.44444%; } #clef-settings-form .settings-section.clef-settings .inputs-container input[type="text"]:last-child, #clef-settings-form .settings-section.clef-settings .inputs-container textarea:last-child { margin-right: 0; } @media screen and (max-width: 768px) { #clef-settings-form .settings-section.clef-settings .inputs-container input[type="text"], #clef-settings-form .settings-section.clef-settings .inputs-container textarea { display: block; float: left; margin-right: 1.85185%; width: 100%; } #clef-settings-form .settings-section.clef-settings .inputs-container input[type="text"]:last-child, #clef-settings-form .settings-section.clef-settings .inputs-container textarea:last-child { margin-right: 0; } } #clef-settings-form .password-settings { min-height: 400px; } #clef-settings-form .password-settings .input-container.custom-roles .title { display: block; width: 100%; margin-bottom: 10px; } #clef-settings-form .password-settings .input-container.custom-roles .custom-role label { clear: both; } #clef-settings-form .password-settings #login-form-view { display: block; float: left; margin-right: 1.85185%; width: 38.88889%; } #clef-settings-form .password-settings #login-form-view:last-child { margin-right: 0; } @media screen and (max-width: 768px) { #clef-settings-form .password-settings #login-form-view { display: none; } } #clef-settings-form .password-settings #login-form-view.only-clef:not(.embed-clef) #loginform { padding: 40px; } #clef-settings-form .password-settings #login-form-view.only-clef:not(.embed-clef) #loginform > *:not(.clef-button) { display: none; } #clef-settings-form .password-settings #login-form-view.only-clef:not(.embed-clef) #loginform .clef-button { margin-bottom: 0; } #clef-settings-form .password-settings #login-form-view.embed-clef #loginform { position: relative; height: 425px; } #clef-settings-form .password-settings #login-form-view.embed-clef #loginform .clef-button { display: none; } #clef-settings-form .password-settings #login-form-view.embed-clef #loginform .clef-overlay { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: white; } #clef-settings-form .password-settings #login-form-view.embed-clef #loginform .clef-overlay img { position: absolute; top: 10px; left: 10%; width: 80%; display: block; } #clef-settings-form .password-settings #login-form-view.embed-clef #loginform .clef-overlay div { display: block; } #clef-settings-form .password-settings #login-form-view.embed-clef #loginform .or-container { display: none; } #clef-settings-form .password-settings #login-form-view.embed-clef #loginform .overlay-text { position: absolute; width: 100%; bottom: 10px; left: 0; color: #aaa; text-align: center; } #clef-settings-form .password-settings #login-form-view.embed-clef.only-clef #loginform .overlay-text { display: none; } #clef-settings-form .password-settings #login-form-view #loginform { background: #fff; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); padding: 26px 24px 46px; font-weight: 400; overflow: hidden; margin-top: 5px; } #clef-settings-form .password-settings #login-form-view #loginform label { color: #777; font-size: 14px; } #clef-settings-form .password-settings #login-form-view #loginform .input { font-size: 24px; line-height: 1; width: 100%; padding: 3px; margin: 2px 6px 16px 0; } #clef-settings-form .password-settings #login-form-view #loginform .submit { float: right; margin-top: 0; } #clef-settings-form .password-settings #login-form-view #loginform .forgetmenot { font-weight: 400; float: left; margin-bottom: 0; } #clef-settings-form .password-settings #login-form-view #loginform .clef-button { margin-bottom: 27px; } #clef-settings-form .password-settings #login-form-view #loginform .clef-button img { height: 34px; width: 187px; margin: auto; display: block; } #clef-settings-form .password-settings #login-form-view #loginform .clef-button div { position: absolute; width: 100%; top: 50%; margin-top: 5px; text-align: center; display: block; color: #aaa; cursor: pointer; display: none; } #clef-settings-form .password-settings #login-form-view #loginform .clef-button div:hover { color: #999; } #clef-settings-form .password-settings #login-form-view #loginform .clef-overlay { display: none; } #clef-settings-form #clef-pro-section { display: none; } #clef-settings-form #clef-pro-section #clef-pro-customization .preview-container { display: block; float: left; margin-right: 1.85185%; width: 38.88889%; } #clef-settings-form #clef-pro-section #clef-pro-customization .preview-container:last-child { margin-right: 0; } #clef-settings-form #clef-pro-section #clef-pro-customization .button { float: right; margin-left: 10px; } #clef-settings-form #clef-pro-section #clef-pro-customization #custom-login-view img { max-height: 50px; margin: auto; margin-top: 20px; display: block; } #clef-settings-form #clef-pro-section #clef-pro-customization #custom-login-view p { border: 1px solid #eee; margin: 20px; padding: 10px; } #clef-settings-form .setting-info { font-weight: normal; font-size: 12px; color: #aaa; text-decoration: none; margin-left: 5px; } #clef-settings-form .setting-info:hover { color: #888; } .waltz { *zoom: 1; max-width: 75em; margin-left: auto; margin-right: auto; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); border: 1px solid #e5e5e5; background: white; padding: 20px 25px; margin: 10px 20px 10px 0; } .waltz:before, .waltz:after { content: " "; display: table; } .waltz:after { clear: both; } .waltz * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .waltz.settings { padding: 10px; margin-top: 40px; } .waltz.settings img { display: block; float: left; margin-right: 1.85185%; width: 8.33333%; margin-top: 7px; } .waltz.settings img:last-child { margin-right: 0; } @media screen and (max-width: 768px) { .waltz.settings img { display: block; float: left; margin-right: 1.85185%; width: 8.33333%; } .waltz.settings img:last-child { margin-right: 0; } } .waltz.settings .text { display: block; float: left; margin-right: 1.85185%; width: 49.07407%; } .waltz.settings .text:last-child { margin-right: 0; } @media screen and (max-width: 768px) { .waltz.settings .text { display: block; float: left; margin-right: 1.85185%; width: 79.62963%; } .waltz.settings .text:last-child { margin-right: 0; } } .waltz.settings .text h1 { font-size: 12px; margin: 0; } .waltz.settings .text p { margin: 0; font-size: 12px; } .waltz.settings .buttons { display: block; float: left; margin-right: 1.85185%; width: 38.88889%; margin-right: 0; margin-top: 15px; } .waltz.settings .buttons:last-child { margin-right: 0; } @media screen and (max-width: 768px) { .waltz.settings .buttons { display: block; float: left; margin-right: 1.85185%; width: 100%; } .waltz.settings .buttons:last-child { margin-right: 0; } } .waltz.settings .buttons .button { float: none; margin: 0; text-align: center; font-size: 12px; width: 45%; padding: 0; } .bruteprotect-install { background: #515953; padding: 40px; margin-top: 20px; } .bruteprotect-install p { color: white; font-size: 16px; line-height: 1.2em; font-family: "Helvetica Neue", "Helvetica", sans-serif; } .multisite-settings input[type="checkbox"] { position: relative; left: 30px; top: 1px; } .logout-hook-error { display: none; } .invite-users .preview-container { display: block; float: left; margin-right: 1.85185%; width: 38.88889%; } .invite-users .preview-container:last-child { margin-right: 0; } .invite-users .preview-container .email { width: 95%; margin: auto; margin-top: 15px; font-style: italic; border: 1px solid #EEE; padding: 10px; } .invite-users .preview-container .email p { font-size: 11px; } .invite-users .preview-container .email p:first-child { margin-top: 0; } #connect-clef-account .connect-clef-message { padding: 10px; margin: 20px 0 10px 0; } .clef-flash.updated { padding: 10px; } .clef-flash.updated img { float: left; margin-right: 10px; -webkit-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes spin { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes spin { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); } } body #wp-auth-check-wrap #wp-auth-check { width: 90%; margin-left: 0; left: 5%; max-height: none !important; height: 90%; }