From d4e564d7d955909dcb4b5554d6fd1d116c7c9d81 Mon Sep 17 00:00:00 2001 From: Paul Adam Davis Date: Tue, 19 Aug 2014 15:25:24 +0100 Subject: [PATCH] Refactor auth CSS This means signing screen icons now depend on new markup --- ghost/admin/assets/sass/layouts/auth.scss | 93 +++++------------- ghost/admin/assets/sass/layouts/setup.scss | 21 ++-- ghost/admin/docs/dist/css/ghost-ui.css | 108 +++++++-------------- ghost/admin/docs/dist/css/ghost-ui.min.css | 4 +- 4 files changed, 67 insertions(+), 159 deletions(-) diff --git a/ghost/admin/assets/sass/layouts/auth.scss b/ghost/admin/assets/sass/layouts/auth.scss index eb7542c193..2db6fd1ef8 100644 --- a/ghost/admin/assets/sass/layouts/auth.scss +++ b/ghost/admin/assets/sass/layouts/auth.scss @@ -70,8 +70,8 @@ max-width: 264px; } - div { // Yes. Really. - // TODO: This ^ can be improved 1000% + .email-wrap, + .password-wrap { position: relative; margin: 0 0 5px 0; background: lighten($darkgrey, 10%); @@ -82,8 +82,8 @@ } } - // TODO: make more specific - input { + .email, + .password { display: inline-block; clear: both; padding: 8px 0 8px 8px; @@ -100,62 +100,30 @@ background: lighten($darkgrey, 15%); } - } + } // .email, .password .email-wrap { - position: relative; - @include icon($i-mail, 12px) { - position: absolute; - bottom: 11px; - left: 8px; - z-index: 100; - } margin-right: 3px; @media (max-width: 630px) { margin-right: 0; - } - .email { - padding-left: 28px; - border-radius: 2px 0 0 2px; - } - } - - .password-wrap { - position:relative; - @include icon($i-lock, 10px) { - position: absolute; - bottom: 12px; - left: 11px; - z-index: 100; - } - .password { - padding-left: 28px; - border-radius: 0 2px 2px 0; - } - } - - @media (min-width: 631px) { - .email-wrap, - .email-wrap .email { - border-radius: 2px 0 0 2px; - } - .password-wrap, - .password-wrap .password { - border-radius: 0 2px 2px 0; - } - } + } // .email-wrap @media (max-width: 630px) { - .email-wrap, - .email-wrap .email, - .password-wrap, - .password-wrap .password { + .email, + .password { border-radius: 2px; } } - + @media (min-width: 631px) { + .email { + border-radius: 2px 0 0 2px; + } + .password { + border-radius: 0 2px 2px 0; + } + } button { width: 85px; @@ -171,7 +139,7 @@ width: 100%; margin-bottom: 1em; } - } + } // button .meta { clear: both; @@ -186,7 +154,7 @@ color: lighten($midgrey, 5%); text-decoration: none; } - } + } // a } // .login-form @@ -283,34 +251,25 @@ display: table-cell; vertical-align: middle; - div { // Yes. Really. - // TODO: Again, can make this better. + .email-wrap { position: relative; margin: 0 0 1em 0; background: lighten($darkgrey, 10%); float: left; - } + border-radius: 2px; + width: 100%; + } // .email-wrap - input { + .email { padding: 8px 10px; + border-radius: 2px; @include transition(background ease 0.25s); &:focus { border: none; background: lighten($darkgrey, 15%); } - - } - - .email-wrap { - width: 100%; - position:relative; - border-radius: 2px; - - .email { - border-radius: 2px; - } - } + } // .email button { width: 100%; @@ -320,6 +279,6 @@ min-height: 30px; min-width: 80px; box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset; - } + } // button } // .forgotten-form \ No newline at end of file diff --git a/ghost/admin/assets/sass/layouts/setup.scss b/ghost/admin/assets/sass/layouts/setup.scss index 63030cb6b2..a53decc7a8 100644 --- a/ghost/admin/assets/sass/layouts/setup.scss +++ b/ghost/admin/assets/sass/layouts/setup.scss @@ -3,7 +3,7 @@ // -------------------------------------------------- // Slug: /ghost/setup/ // -------------------------------------------------- -// These styles cover /ghost/setup/ which is the first +// These styles cover /ghost/setup/ which is the first // screen that appears on a new Ghost install .ghost-setup { @@ -56,25 +56,13 @@ } } - // .form-group { - // padding-left: 110px; - - // @media (max-width: 550px) { - // padding-left: 0; - // } - // } - - input { + .form-group input { // width: 300px; padding: 7px; border: none; color: #fff; background: lighten($darkgrey, 10%); - @include transition(background ease 0.25s); - - // @media (max-width: 550px) { - // width: 100%; - // } + @include transition(background 0.25s ease); &:focus { border:none; @@ -91,6 +79,7 @@ margin: 0; font-weight: 200; font-size: 26px; + letter-spacing: 0; color: $lightgrey; @media (max-width: 550px) { @@ -104,7 +93,9 @@ border: none; font-weight: 200; font-size: 16px; + letter-spacing: 0; color: $midgrey; + white-space: nowrap; @media (max-width: 550px) { font-size: 14px; diff --git a/ghost/admin/docs/dist/css/ghost-ui.css b/ghost/admin/docs/dist/css/ghost-ui.css index 727308d265..c1c7a31935 100644 --- a/ghost/admin/docs/dist/css/ghost-ui.css +++ b/ghost/admin/docs/dist/css/ghost-ui.css @@ -3344,15 +3344,15 @@ a.badge:hover, a.badge:focus { @media (max-width: 550px) { .setup-form label { width: 100%; } } - .setup-form input { + .setup-form .form-group input { padding: 7px; border: none; color: #fff; background: #3c4043; - -webkit-transition: background ease 0.25s; - -moz-transition: background ease 0.25s; - transition: background ease 0.25s; } - .setup-form input:focus { + -webkit-transition: background 0.25s ease; + -moz-transition: background 0.25s ease; + transition: background 0.25s ease; } + .setup-form .form-group input:focus { border: none; background: #484c50; } .setup-form input:-webkit-autofill { @@ -3361,6 +3361,7 @@ a.badge:hover, a.badge:focus { margin: 0; font-weight: 200; font-size: 26px; + letter-spacing: 0; color: #e2edf2; } @media (max-width: 550px) { .setup-form h1 { @@ -3371,7 +3372,9 @@ a.badge:hover, a.badge:focus { border: none; font-weight: 200; font-size: 16px; - color: #7d878a; } + letter-spacing: 0; + color: #7d878a; + white-space: nowrap; } @media (max-width: 550px) { .setup-form h2 { font-size: 14px; } } @@ -3447,15 +3450,18 @@ a.badge:hover, a.badge:focus { @media (max-width: 630px) { .login-form { max-width: 264px; } } - .login-form div { + .login-form .email-wrap, + .login-form .password-wrap { position: relative; margin: 0 0 5px 0; background: #3c4043; float: left; } @media (max-width: 630px) { - .login-form div { + .login-form .email-wrap, + .login-form .password-wrap { margin-bottom: 1em; } } - .login-form input { + .login-form .email, + .login-form .password { display: inline-block; clear: both; padding: 8px 0 8px 8px; @@ -3464,75 +3470,30 @@ a.badge:hover, a.badge:focus { -moz-transition: background ease 0.25s; transition: background ease 0.25s; } @media (max-width: 630px) { - .login-form input { + .login-form .email, + .login-form .password { width: 264px; -webkit-transition: none; -moz-transition: none; transition: none; } } - .login-form input:focus { + .login-form .email:focus, + .login-form .password:focus { border: none; background: #484c50; } .login-form .email-wrap { - position: relative; margin-right: 3px; } - .login-form .email-wrap:before { - font-family: "GhostIcons"; - font-weight: normal; - font-style: normal; - vertical-align: -7%; - text-transform: none; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - content: "\e012"; - font-size: 12px; - position: absolute; - bottom: 11px; - left: 8px; - z-index: 100; } - .login-form .email-wrap:hover { - text-decoration: none; } @media (max-width: 630px) { .login-form .email-wrap { margin-right: 0; } } - .login-form .email-wrap .email { - padding-left: 28px; - border-radius: 2px 0 0 2px; } - .login-form .password-wrap { - position: relative; } - .login-form .password-wrap:before { - font-family: "GhostIcons"; - font-weight: normal; - font-style: normal; - vertical-align: -7%; - text-transform: none; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - content: "\e02c"; - font-size: 10px; - position: absolute; - bottom: 12px; - left: 11px; - z-index: 100; } - .login-form .password-wrap:hover { - text-decoration: none; } - .login-form .password-wrap .password { - padding-left: 28px; - border-radius: 0 2px 2px 0; } - @media (min-width: 631px) { - .login-form .email-wrap, - .login-form .email-wrap .email { - border-radius: 2px 0 0 2px; } - .login-form .password-wrap, - .login-form .password-wrap .password { - border-radius: 0 2px 2px 0; } } @media (max-width: 630px) { - .login-form .email-wrap, - .login-form .email-wrap .email, - .login-form .password-wrap, - .login-form .password-wrap .password { + .login-form .email, + .login-form .password { border-radius: 2px; } } + @media (min-width: 631px) { + .login-form .email { + border-radius: 2px 0 0 2px; } + .login-form .password { + border-radius: 0 2px 2px 0; } } .login-form button { width: 85px; height: 36px; @@ -3627,25 +3588,22 @@ a.badge:hover, a.badge:focus { color: #a5acae; display: table-cell; vertical-align: middle; } - .forgotten-form div { + .forgotten-form .email-wrap { position: relative; margin: 0 0 1em 0; background: #3c4043; - float: left; } - .forgotten-form input { + float: left; + border-radius: 2px; + width: 100%; } + .forgotten-form .email { padding: 8px 10px; + border-radius: 2px; -webkit-transition: background ease 0.25s; -moz-transition: background ease 0.25s; transition: background ease 0.25s; } - .forgotten-form input:focus { + .forgotten-form .email:focus { border: none; background: #484c50; } - .forgotten-form .email-wrap { - width: 100%; - position: relative; - border-radius: 2px; } - .forgotten-form .email-wrap .email { - border-radius: 2px; } .forgotten-form button { width: 100%; height: 36px; diff --git a/ghost/admin/docs/dist/css/ghost-ui.min.css b/ghost/admin/docs/dist/css/ghost-ui.min.css index 4bd4a6ff65..9209c85ad6 100644 --- a/ghost/admin/docs/dist/css/ghost-ui.min.css +++ b/ghost/admin/docs/dist/css/ghost-ui.min.css @@ -6,8 +6,8 @@ .page-title{display:block;height:44px;line-height:44px;margin:0;padding:0 15%;color:#fff;font-size:1.8rem;font-weight:normal;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (min-width: 900px){.page-title{height:60px;line-height:60px}} .menu-button{display:block;position:absolute;top:0;left:0;width:44px;height:44px;color:#fff}.menu-button:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e005";font-size:18px;line-height:44px}.menu-button:hover{text-decoration:none}.page-content{position:absolute;top:60px;right:0px;bottom:0px;left:0px;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch}@media (max-width: 900px){.page-content{top:44px}} .ghost-setup{color:#7d878a;background:#242628}@media (max-width: 550px){.ghost-setup{background:#18191b}}.ghost-setup main{top:15px}@media (max-width: 550px){.ghost-setup main{top:0}} -.setup-box{display:table;max-width:500px;height:90%;margin:0 auto;padding:0}.setup-form{max-width:530px;padding:40px;color:#a5acae;background:#18191b;border-radius:2px}@media (max-width: 400px){.setup-form{padding:15px}}.setup-form header{margin-bottom:30px}.setup-form label{color:#e2edf2;font-weight:300}@media (max-width: 550px){.setup-form label{width:100%}}.setup-form input{padding:7px;border:none;color:#fff;background:#3c4043;-webkit-transition:background ease 0.25s;-moz-transition:background ease 0.25s;transition:background ease 0.25s}.setup-form input:focus{border:none;background:#484c50}.setup-form input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px #e2edf2 inset !important}.setup-form h1{margin:0;font-weight:200;font-size:26px;color:#e2edf2}@media (max-width: 550px){.setup-form h1{font-size:20px}}.setup-form h2{margin:6px 0 0 0;padding:0;border:none;font-weight:200;font-size:16px;color:#7d878a}@media (max-width: 550px){.setup-form h2{font-size:14px}}.setup-form p{font-size:12px;line-height:1.4em;color:#7d878a}.setup-form footer{margin:30px 0 5px 0}.setup-form .btn-green{width:100%;padding:0.9em 1.8em;font-size:13px}.ghost-login,.ghost-signup,.ghost-forgotten,.ghost-reset{color:#7d878a;background:#242628}@media (max-width: 400px){.ghost-login,.ghost-signup,.ghost-forgotten,.ghost-reset{background:#242628}}.ghost-login main,.ghost-signup main,.ghost-forgotten main,.ghost-reset main{top:15px}.ghost-login input,.ghost-signup input,.ghost-forgotten input,.ghost-reset input{line-height:1.4em;font-size:1.1em;font-weight:200;border:none;color:#fff;background:transparent;box-shadow:none;margin:0;position:relative}.ghost-login input:-webkit-autofill,.ghost-signup input:-webkit-autofill,.ghost-forgotten input:-webkit-autofill,.ghost-reset input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px #e2edf2 inset !important}.login-box,.signup-box,.forgotten-box,.reset-box{max-width:530px;height:90%;margin:0 auto;padding:0;display:table}@media (max-width: 630px){.login-box,.signup-box,.forgotten-box,.reset-box{max-width:264px;text-align:center}} -.login-form{max-width:530px;color:#a5acae;display:table-cell;vertical-align:middle}@media (max-width: 630px){.login-form{max-width:264px}}.login-form div{position:relative;margin:0 0 5px 0;background:#3c4043;float:left}@media (max-width: 630px){.login-form div{margin-bottom:1em}}.login-form input{display:inline-block;clear:both;padding:8px 0 8px 8px;width:216px;-webkit-transition:background ease 0.25s;-moz-transition:background ease 0.25s;transition:background ease 0.25s}@media (max-width: 630px){.login-form input{width:264px;-webkit-transition:none;-moz-transition:none;transition:none}}.login-form input:focus{border:none;background:#484c50}.login-form .email-wrap{position:relative;margin-right:3px}.login-form .email-wrap:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e012";font-size:12px;position:absolute;bottom:11px;left:8px;z-index:100}.login-form .email-wrap:hover{text-decoration:none}@media (max-width: 630px){.login-form .email-wrap{margin-right:0}}.login-form .email-wrap .email{padding-left:28px;border-radius:2px 0 0 2px}.login-form .password-wrap{position:relative}.login-form .password-wrap:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e02c";font-size:10px;position:absolute;bottom:12px;left:11px;z-index:100}.login-form .password-wrap:hover{text-decoration:none}.login-form .password-wrap .password{padding-left:28px;border-radius:0 2px 2px 0}@media (min-width: 631px){.login-form .email-wrap,.login-form .email-wrap .email{border-radius:2px 0 0 2px}.login-form .password-wrap,.login-form .password-wrap .password{border-radius:0 2px 2px 0}}@media (max-width: 630px){.login-form .email-wrap,.login-form .email-wrap .email,.login-form .password-wrap,.login-form .password-wrap .password{border-radius:2px}}.login-form button{width:85px;height:36px;margin:0 0 0 10px;padding:0.5em 1.37em;min-height:30px;min-width:80px;box-shadow:rgba(255,255,255,0.15) 0 1px 0 inset}@media (max-width: 630px){.login-form button{margin:0;width:100%;margin-bottom:1em}}.login-form .meta{clear:both;color:#7d878a}.login-form a{color:#646d70;font-size:0.9em}.login-form a:hover{color:#8a9396;text-decoration:none}.signup-form,.reset-form{max-width:280px;color:#a5acae;display:table-cell;vertical-align:middle}@media (max-width: 630px){.signup-form,.reset-form{width:264px}}.signup-form div,.reset-form div{position:relative;margin:0 0 1em 0;background:#3c4043;float:left;display:table}.signup-form input,.reset-form input{width:280px;padding:8px 10px}@media (min-width: 631px){.signup-form input,.reset-form input{-webkit-transition:background ease 0.25s;-moz-transition:background ease 0.25s;transition:background ease 0.25s}}@media (max-width: 630px){.signup-form input,.reset-form input{width:264px}}.signup-form input:focus,.reset-form input:focus{border:none;background:#484c50}.signup-form .name-wrap,.reset-form .name-wrap{position:relative;border-radius:2px}.signup-form .name-wrap .name,.reset-form .name-wrap .name{border-radius:2px}.signup-form .email-wrap,.reset-form .email-wrap{position:relative;border-radius:2px}.signup-form .email-wrap .email,.reset-form .email-wrap .email{border-radius:2px}.signup-form .password-wrap,.reset-form .password-wrap{position:relative;border-radius:2px}.signup-form .password-wrap .password,.reset-form .password-wrap .password{border-radius:2px}.signup-form button,.reset-form button{width:100%;height:36px;margin:0 0 1em 0;padding:0.5em 1.37em;min-height:30px;min-width:80px;box-shadow:rgba(255,255,255,0.15) 0 1px 0 inset}.forgotten-form{max-width:280px;color:#a5acae;display:table-cell;vertical-align:middle}.forgotten-form div{position:relative;margin:0 0 1em 0;background:#3c4043;float:left}.forgotten-form input{padding:8px 10px;-webkit-transition:background ease 0.25s;-moz-transition:background ease 0.25s;transition:background ease 0.25s}.forgotten-form input:focus{border:none;background:#484c50}.forgotten-form .email-wrap{width:100%;position:relative;border-radius:2px}.forgotten-form .email-wrap .email{border-radius:2px}.forgotten-form button{width:100%;height:36px;margin:0 0 1em 0;padding:0.5em 1.37em;min-height:30px;min-width:80px;box-shadow:rgba(255,255,255,0.15) 0 1px 0 inset}.content-view-container{position:relative;height:100%;width:100%}@media (max-width: 800px){.content-view-container{overflow-x:hidden}} +.setup-box{display:table;max-width:500px;height:90%;margin:0 auto;padding:0}.setup-form{max-width:530px;padding:40px;color:#a5acae;background:#18191b;border-radius:2px}@media (max-width: 400px){.setup-form{padding:15px}}.setup-form header{margin-bottom:30px}.setup-form label{color:#e2edf2;font-weight:300}@media (max-width: 550px){.setup-form label{width:100%}}.setup-form .form-group input{padding:7px;border:none;color:#fff;background:#3c4043;-webkit-transition:background 0.25s ease;-moz-transition:background 0.25s ease;transition:background 0.25s ease}.setup-form .form-group input:focus{border:none;background:#484c50}.setup-form input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px #e2edf2 inset !important}.setup-form h1{margin:0;font-weight:200;font-size:26px;letter-spacing:0;color:#e2edf2}@media (max-width: 550px){.setup-form h1{font-size:20px}}.setup-form h2{margin:6px 0 0 0;padding:0;border:none;font-weight:200;font-size:16px;letter-spacing:0;color:#7d878a;white-space:nowrap}@media (max-width: 550px){.setup-form h2{font-size:14px}}.setup-form p{font-size:12px;line-height:1.4em;color:#7d878a}.setup-form footer{margin:30px 0 5px 0}.setup-form .btn-green{width:100%;padding:0.9em 1.8em;font-size:13px}.ghost-login,.ghost-signup,.ghost-forgotten,.ghost-reset{color:#7d878a;background:#242628}@media (max-width: 400px){.ghost-login,.ghost-signup,.ghost-forgotten,.ghost-reset{background:#242628}}.ghost-login main,.ghost-signup main,.ghost-forgotten main,.ghost-reset main{top:15px}.ghost-login input,.ghost-signup input,.ghost-forgotten input,.ghost-reset input{line-height:1.4em;font-size:1.1em;font-weight:200;border:none;color:#fff;background:transparent;box-shadow:none;margin:0;position:relative}.ghost-login input:-webkit-autofill,.ghost-signup input:-webkit-autofill,.ghost-forgotten input:-webkit-autofill,.ghost-reset input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px #e2edf2 inset !important}.login-box,.signup-box,.forgotten-box,.reset-box{max-width:530px;height:90%;margin:0 auto;padding:0;display:table}@media (max-width: 630px){.login-box,.signup-box,.forgotten-box,.reset-box{max-width:264px;text-align:center}} +.login-form{max-width:530px;color:#a5acae;display:table-cell;vertical-align:middle}@media (max-width: 630px){.login-form{max-width:264px}}.login-form .email-wrap,.login-form .password-wrap{position:relative;margin:0 0 5px 0;background:#3c4043;float:left}@media (max-width: 630px){.login-form .email-wrap,.login-form .password-wrap{margin-bottom:1em}}.login-form .email,.login-form .password{display:inline-block;clear:both;padding:8px 0 8px 8px;width:216px;-webkit-transition:background ease 0.25s;-moz-transition:background ease 0.25s;transition:background ease 0.25s}@media (max-width: 630px){.login-form .email,.login-form .password{width:264px;-webkit-transition:none;-moz-transition:none;transition:none}}.login-form .email:focus,.login-form .password:focus{border:none;background:#484c50}.login-form .email-wrap{margin-right:3px}@media (max-width: 630px){.login-form .email-wrap{margin-right:0}}@media (max-width: 630px){.login-form .email,.login-form .password{border-radius:2px}}@media (min-width: 631px){.login-form .email{border-radius:2px 0 0 2px}.login-form .password{border-radius:0 2px 2px 0}}.login-form button{width:85px;height:36px;margin:0 0 0 10px;padding:0.5em 1.37em;min-height:30px;min-width:80px;box-shadow:rgba(255,255,255,0.15) 0 1px 0 inset}@media (max-width: 630px){.login-form button{margin:0;width:100%;margin-bottom:1em}}.login-form .meta{clear:both;color:#7d878a}.login-form a{color:#646d70;font-size:0.9em}.login-form a:hover{color:#8a9396;text-decoration:none}.signup-form,.reset-form{max-width:280px;color:#a5acae;display:table-cell;vertical-align:middle}@media (max-width: 630px){.signup-form,.reset-form{width:264px}}.signup-form div,.reset-form div{position:relative;margin:0 0 1em 0;background:#3c4043;float:left;display:table}.signup-form input,.reset-form input{width:280px;padding:8px 10px}@media (min-width: 631px){.signup-form input,.reset-form input{-webkit-transition:background ease 0.25s;-moz-transition:background ease 0.25s;transition:background ease 0.25s}}@media (max-width: 630px){.signup-form input,.reset-form input{width:264px}}.signup-form input:focus,.reset-form input:focus{border:none;background:#484c50}.signup-form .name-wrap,.reset-form .name-wrap{position:relative;border-radius:2px}.signup-form .name-wrap .name,.reset-form .name-wrap .name{border-radius:2px}.signup-form .email-wrap,.reset-form .email-wrap{position:relative;border-radius:2px}.signup-form .email-wrap .email,.reset-form .email-wrap .email{border-radius:2px}.signup-form .password-wrap,.reset-form .password-wrap{position:relative;border-radius:2px}.signup-form .password-wrap .password,.reset-form .password-wrap .password{border-radius:2px}.signup-form button,.reset-form button{width:100%;height:36px;margin:0 0 1em 0;padding:0.5em 1.37em;min-height:30px;min-width:80px;box-shadow:rgba(255,255,255,0.15) 0 1px 0 inset}.forgotten-form{max-width:280px;color:#a5acae;display:table-cell;vertical-align:middle}.forgotten-form .email-wrap{position:relative;margin:0 0 1em 0;background:#3c4043;float:left;border-radius:2px;width:100%}.forgotten-form .email{padding:8px 10px;border-radius:2px;-webkit-transition:background ease 0.25s;-moz-transition:background ease 0.25s;transition:background ease 0.25s}.forgotten-form .email:focus{border:none;background:#484c50}.forgotten-form button{width:100%;height:36px;margin:0 0 1em 0;padding:0.5em 1.37em;min-height:30px;min-width:80px;box-shadow:rgba(255,255,255,0.15) 0 1px 0 inset}.content-view-container{position:relative;height:100%;width:100%}@media (max-width: 800px){.content-view-container{overflow-x:hidden}} .content-list{width:33%;padding:15px;position:absolute;bottom:0;top:0;left:0;border-right:#edece4 1px solid;background:#fff}@media (max-width: 800px){.content-list{width:auto;right:0;z-index:500;border:none}}.content-list .content-filter{position:relative;z-index:300}.content-list .content-filter>a{padding:5px;margin-left:-5px}.content-list .content-filter .menu-drop{display:block}.content-list .btn-green{position:absolute;top:9px;right:20px;z-index:700;padding:2px 4px 3px 5px;color:#fff !important}.content-list .btn-green:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e032"}.content-list .btn-green:hover{text-decoration:none}.content-list .content-list-content{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;padding-top:40px}.content-list .entry-title{font-size:1.6rem;line-height:1.25em;font-weight:normal}.content-list .views{float:right;text-align:right;margin-left:15px}.content-list .views:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e025";font-size:10px;color:#aaa9a2}.content-list .views:hover{text-decoration:none}@media (max-width: 800px){.content-list .views{float:none}}.content-list .status{font-size:1.3rem;font-weight:300}.content-list .status .draft{color:#e25440}.content-list .status .scheduled{color:#f2a925}.content-list .featured .status:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e026";font-size:11px;margin-right:10px;vertical-align:7%}.content-list .featured .status:hover{text-decoration:none}.content-list ol{list-style:none;padding:0;margin:0;border-top:#edece4 1px solid}.content-list li{margin:0;padding:0;border-bottom:#edece4 1px solid;position:relative}.content-list li a{display:block;padding:20px 20px;color:rgba(0,0,0,0.5)}@media (max-width: 400px){.content-list li a{padding:15px}}@media (max-width: 800px){.content-list li a{padding-right:40px}}.content-list li a:after{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e01d";position:absolute;top:50%;margin-top:-6px;right:15px}.content-list li a:hover{text-decoration:none}@media (min-width: 801px){.content-list li a:after{display:none}}.content-list li a:hover{text-decoration:none}@media (min-width: 801px){.content-list li.active{border-bottom:#e8eaeb 1px solid;background:#f7f7f3;box-shadow:#e8eaeb 0 -1px 0,rgba(0,0,0,0.06) 7px 0 0 inset,#e8eaeb 1px 0 0 inset}.content-list li.active .views{color:#242628;font-weight:normal}.content-list li.active .views:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e025";font-size:10px;color:#242628}.content-list li.active .views:hover{text-decoration:none}} .content-preview{width:67%;padding:15px;position:absolute;bottom:0;top:0;right:0;overflow:auto;background:#fff}@media (max-width: 800px){.content-preview{width:auto;left:100%;right:-100%;margin-left:15px;border:none}}.content-preview .unfeatured{vertical-align:-6%;margin:0 7px 0 -5px;padding:5px}.content-preview .unfeatured:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e027";font-size:14px}.content-preview .unfeatured:hover{text-decoration:none}.content-preview .featured{vertical-align:-6%;margin:0 7px 0 -5px;padding:5px}.content-preview .featured:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e026";font-size:14px}.content-preview .featured:hover{text-decoration:none}.content-preview .normal{text-transform:none;margin:0 3px}.content-preview .content-preview-content{padding:80px 40px;word-break:break-word;hyphens:auto}.content-preview .content-preview-content .wrapper{max-width:700px;margin:0 auto}.content-preview .post-controls{float:right;position:relative;top:3px}.content-preview .post-settings-menu{position:absolute;top:35px;right:-3px}.content-preview .post-edit:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e00f";font-size:14px}.content-preview .post-edit:hover{text-decoration:none}.content-preview img{width:100%;height:auto}.no-posts-box{position:relative;height:90%;margin:0px auto;padding:0px;display:table;z-index:600}@media (max-width: 800px){.no-posts-box{position:fixed;top:45%;left:50%}}.no-posts-box .no-posts{vertical-align:middle;display:table-cell;text-align:center}@media (max-width: 800px){.no-posts-box .no-posts{display:block;position:relative;left:-50%}}.no-posts-box .no-posts h3{color:#aaa9a2;font-weight:200;font-size:2em}.entry-container .entry-title{height:60px;padding:0 20px;position:relative}.entry-container .entry-title input{width:100%;height:60px;border:0;margin:0;padding:0;font-size:3.6rem;font-weight:bold;letter-spacing:-1px;background:transparent}.entry-container .entry-title input:focus{outline:0}@media (min-width: 401px){.editor .notifications{bottom:40px}}.editor .entry-container{position:relative;height:100%}.editor .entry-markdown{left:0}.editor .entry-preview{right:0;border-left:#edece4 1px solid}.editor .entry-markdown,.editor .entry-preview{width:50%;padding:15px;position:absolute;bottom:40px;top:60px;border-top:#edece4 1px solid;background:#fff}@media (max-width: 1000px){.editor .entry-markdown,.editor .entry-preview{top:100px;left:0;right:0;width:100%;border:none;z-index:100;min-height:380px}.editor .entry-markdown .markdown,.editor .entry-markdown .entry-preview-content,.editor .entry-preview .markdown,.editor .entry-preview .entry-preview-content{height:50px;overflow:hidden}}@media (max-width: 1000px){.editor .entry-markdown .floatingheader,.editor .entry-preview .floatingheader{cursor:pointer;width:50%;color:#fff;font-weight:normal;background:#aaa9a2;position:absolute;top:-40px;left:0;box-shadow:rgba(0,0,0,0.1) 0 -2px 3px inset}.editor .entry-markdown .floatingheader a,.editor .entry-preview .floatingheader a{color:#fff}}.editor .entry-markdown .floatingheader a,.editor .entry-preview .floatingheader a{color:#aaa9a2}.editor .entry-markdown .floatingheader .entry-word-count,.editor .entry-preview .floatingheader .entry-word-count{float:right;position:relative;top:2px}@media (max-width: 1000px){.editor .entry-markdown:not(.active) .markdown-help:hover:before,.editor .entry-preview:not(.active) .markdown-help:hover:before{color:#fff}}.editor .entry-markdown.active,.editor .entry-preview.active{z-index:200}.editor .entry-markdown.active .markdown,.editor .entry-markdown.active .entry-preview-content,.editor .entry-preview.active .markdown,.editor .entry-preview.active .entry-preview-content{height:auto;overflow:auto}@media (max-width: 1000px){.editor .entry-markdown.active header,.editor .entry-preview.active header{border-top:#edece4 1px solid;cursor:auto;color:#aaa9a2;background:#fff;box-shadow:none}.editor .entry-markdown.active header a,.editor .entry-preview.active header a{color:#aaa9a2}}@media (max-width: 400px){.editor .entry-markdown .markdown-help,.editor .entry-markdown .entry-word-count,.editor .entry-preview .markdown-help,.editor .entry-preview .entry-word-count{display:none}}.editor .entry-markdown-content textarea{border:0;width:100%;min-height:auto;height:100%;max-width:100%;margin:0;padding:10px 20px 50px 20px;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-overflow-scrolling:touch}@media (max-width: 600px){.editor .entry-markdown-content textarea{padding:10px}}@media (min-width: 601px) and (max-width: 1000px){.editor .entry-markdown-content textarea{padding:15px}}@media (min-width: 1001px){.editor .entry-markdown-content textarea{top:40px}}@media (max-height: 560px){.editor .entry-markdown-content textarea{height:calc(100% - 40px)}}.editor .entry-markdown-content textarea:focus{outline:0}.editor .CodeMirror{height:auto;position:absolute;top:0;left:0;right:0;bottom:0;font-family:Inconsolata,monospace;font-size:1.4em;line-height:1.3em;color:#3c4043}.editor .CodeMirror .CodeMirror-focused,.editor .CodeMirror .CodeMirror-selected{color:#242628;background:#b3d5f3;text-shadow:none}.editor .CodeMirror ::selection{color:#242628;background:#b3d5f3;text-shadow:none}.editor .CodeMirror-lines{padding:65px 0 40px 0}@media (max-width: 1000px){.editor .CodeMirror-lines{padding-top:25px}}@media (max-width: 400px){.editor .CodeMirror-lines{padding:15px 0}}.editor .CodeMirror pre{padding:0 40px}@media (max-width: 400px){.editor .CodeMirror pre{padding:0 15px}}.editor .cm-header{color:#000;font-size:1.4em;line-height:1.4em;font-weight:bold}.editor .cm-variable-2,.editor .cm-variable-3,.editor .cm-keyword{color:#3c4043}.editor .cm-string,.editor .cm-strong,.editor .cm-link,.editor .cm-comment,.editor .cm-quote,.editor .cm-number,.editor .cm-atom,.editor .cm-tag{color:#000;font-weight:bold}@media (max-width: 1000px){.editor .entry-preview .floatingheader{right:0;left:auto;border-right:none}}.editor .entry-preview-content{position:absolute;top:0;right:0;bottom:0;left:0;padding:60px 40px 40px 40px;overflow:auto;word-break:break-word;hyphens:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}@media (max-width: 1000px){.editor .entry-preview-content{padding-top:20px}}@media (max-width: 400px){.editor .entry-preview-content{padding:15px}}@media (max-width: 1000px){.editor .scrolling .floatingheader{box-shadow:none}}@media (max-width: 1000px){.editor .scrolling .floatingheader::before,.editor .scrolling .floatingheader::after{display:none}}@media (max-width: 1000px){.editor .scrolling .CodeMirror-scroll,.editor .scrolling .entry-preview-content{box-shadow:0 5px 5px rgba(0,0,0,0.05) inset}} .markdown-help{position:relative;top:-5px;right:-5px;float:right;padding:5px}.markdown-help:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e018";color:#cfceca}.markdown-help:hover{text-decoration:none}.markdown-help:hover:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e018";color:#aaa9a2}.markdown-help:hover:hover{text-decoration:none}.entry-preview-content,.content-preview-content{font-size:1.4em;line-height:1.5em}.entry-preview-content a,.content-preview-content a{color:#5ba4e5;text-decoration:underline}.entry-preview-content .btn,.content-preview-content .btn{text-decoration:none;color:#35393b}.entry-preview-content .img-placeholder,.content-preview-content .img-placeholder{border:5px dashed #35393b;height:100px;position:relative}.entry-preview-content .img-placeholder span,.content-preview-content .img-placeholder span{display:block;height:30px;position:absolute;margin-top:-15px;top:50%;width:100%;text-align:center}.entry-preview-content a.image-edit,.content-preview-content a.image-edit{width:16px;height:16px}.entry-preview-content img,.content-preview-content img{max-width:100%;height:auto;margin:0 auto}.js-embed-placeholder,.iframe-embed-placeholder{background:#f9f9f9;border:none;padding:100px 20px;font-family:"Open Sans",sans-serif;font-weight:bold;font-size:1.6rem;text-align:center}body.zen{background:#f3f2ed}body.zen .usermenu{display:none}body.zen .global-nav,body.zen .page-header,body.zen #publish-bar{opacity:0;height:0;overflow:hidden;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;transition:all 0.5s ease-out}body.zen .page-content{top:0;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;transition:all 0.5s ease-out}body.zen .entry-markdown,body.zen .entry-preview{bottom:0;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;transition:all 0.5s ease-out}#publish-bar{height:40px;padding:0;color:#7d878a;background:#1a1c1d;position:fixed;bottom:0;left:0;right:0;z-index:900;box-shadow:0 -2px 8px rgba(0,0,0,0.2);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}@media (max-width: 1000px){#publish-bar{font-weight:normal}}#publish-bar .post-settings:hover,#publish-bar .post-settings.active{color:#e2edf2}#publish-bar .post-settings-menu{position:absolute;bottom:41px;right:-3px}#publish-bar .splitbtn{margin-top:5px}#publish-bar .splitbtn .btn{border-top:rgba(255,255,255,0.3) 1px solid}.extended-tags{position:static;min-height:100%}.extended-tags #entry-tags:after{right:10px}.extended-tags .tags{width:281px}.extended-tags .tag-label,.extended-tags .tag-label.touch{color:#fff}.extended-tags .tag-input{width:100%;margin-top:5px;padding-top:5px;padding-left:10px;border-top:1px solid #242628}.extended-tags .right{display:none}#entry-tags{position:absolute;top:0;left:0;right:0;bottom:0;text-transform:none;padding:10px 0 0 0}#entry-tags:after{content:"";position:fixed;top:10px;right:220px;width:20px;height:26px;background-color:rgba(26,28,29,0);background-image:-webkit-linear-gradient(left, rgba(26,28,29,0),#1a1c1d);background-image:linear-gradient(to right,rgba(26,28,29,0),#1a1c1d);z-index:9999;pointer-events:none}@media (max-width: 400px){#entry-tags:after{right:200px}}#entry-tags .tags{position:relative;display:inline-block;vertical-align:middle;width:auto;max-width:80%;max-width:calc(100% - 250px);height:22px;padding-left:5px;padding-bottom:20px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap;-webkit-transition:width 0.2s linear;-moz-transition:width 0.2s linear;transition:width 0.2s linear}@media (max-width: 400px){#entry-tags .tags{display:block;max-width:calc(100% - 230px);padding-bottom:0}}#entry-tags .tag-label{display:block;float:left;padding:1px 8px 0 8px;-webkit-transition:all 0.15s ease-out 0s;-moz-transition:all 0.15s ease-out 0s;transition:all 0.15s ease-out 0s}#entry-tags .tag-label:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e003"}#entry-tags .tag-label:hover{text-decoration:none}#entry-tags .tag-label:hover{cursor:pointer;color:#e2edf2}#entry-tags .tag-label.touch{color:inherit}#entry-tags input[type="text"].tag-input{display:inline-block;vertical-align:top;color:#e2edf2;font-weight:300;background:transparent;border:none;width:150px;margin-top:-8px;line-height:1;padding:9px}@media (max-width: 400px){#entry-tags input[type="text"].tag-input{position:absolute;top:11px;right:170px;width:20px}}#entry-tags input[type="text"].tag-input:focus{outline:none}#entry-tags .tag{display:inline;margin-right:2px;padding:0 5px;color:#e2edf2;white-space:nowrap;background:#596063;border-radius:3px;box-shadow:rgba(255,255,255,0.2) 0 1px 0 inset,#000 0 1px 3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#entry-tags .tag:after{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e034";font-size:8px;color:#242628;margin-left:4px;vertical-align:10%;text-shadow:rgba(255,255,255,0.15) 0 1px 0;-webkit-transition:all 0.15s ease-out 0s;-moz-transition:all 0.15s ease-out 0s;transition:all 0.15s ease-out 0s}#entry-tags .tag:hover{text-decoration:none}#entry-tags .tag:hover{cursor:pointer}#entry-tags .tag:hover:after{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e034";font-size:8px;color:#e2edf2;margin-left:4px;vertical-align:10%;text-shadow:none}#entry-tags .tag:hover:hover{text-decoration:none}.suggestions{bottom:100%}.suggestions li.selected{background:#5ba4e5;box-shadow:rgba(255,255,255,0.2) 0 1px 0 inset,rgba(0,0,0,0.5) 0 1px 5px}.suggestions li a{padding-left:25px}.suggestions mark{background:none;color:white;font-weight:bold}#entry-controls{display:inline-block;position:relative;padding:0;z-index:9000}#entry-controls.unsaved .post-settings-menu{padding-bottom:0}#entry-controls.unsaved .post-settings-menu .post-setting:nth-child(3) td{border-bottom:none}#entry-controls.unsaved .post-settings-menu .delete{display:none}#entry-actions{margin-right:6px;position:relative}#entry-actions .dropdown{position:absolute;bottom:49px;right:0}#entry-actions .dropdown .dropdown-menu{top:auto;left:auto;right:100%;bottom:100%}#entry-actions-menu{position:absolute;bottom:50px;right:-5px}.post-settings{display:inline-block;padding:0 10px;color:#7d878a;-webkit-transition:all 0.15s ease-out 0s;-moz-transition:all 0.15s ease-out 0s;transition:all 0.15s ease-out 0s;position:relative;top:1px}.post-settings:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e006";font-size:14px}.post-settings:hover{text-decoration:none}.post-settings:hover,.post-settings.active{color:#242628}.post-settings-menu .dropdown-menu{top:auto;bottom:100%;left:auto;right:100%}.markdown-help-container{padding-bottom:20px}.modal-markdown-help-table{margin-top:0}.post-settings-menu{background:#fcfcfc;width:100%;max-width:350px}.post-settings-header{position:relative;padding:19px 24px}.post-settings-header h4{font-weight:normal;font-size:1.6rem;line-height:1.375;margin:0}.post-settings-header .close{right:0}.post-settings-header .close:before{right:22px}.subview .post-settings-header h4{text-align:center}.subview .post-settings-header .back{left:0}.subview .post-settings-header .back:before{left:19px}.post-settings-header-action{position:absolute;top:0;bottom:7px;width:45px;padding:0}.post-settings-header-action:before{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);color:#c0bfb6;font-size:2rem}.post-settings-header-action:hover:before{color:#7d878a}.post-settings-content{padding:0 24px 24px}.post-settings-content .image-uploader{padding-top:35px;padding-bottom:35px;margin:0 0 1.5rem 0}.post-settings-content textarea{height:108px}.post-settings-content .nav-list{margin-top:3rem}.seo-preview{font-family:Arial, sans-serif;line-height:1.46}.seo-preview-title{font-size:1.6rem;text-decoration:underline;color:#1E0FBE}.seo-preview-link{font-size:1.3rem;color:#006621;margin:2px 0}.seo-preview-description{font-size:1.3rem;color:#545454}.settings-menu{width:25%;position:fixed;top:60px;left:0;bottom:0;z-index:700;background:#fff;box-shadow:#edece4 1px 0 0}@media (max-width: 900px){.settings-menu{width:100%}}@media (max-width: 900px){.settings-menu{top:44px}}.settings-menu ul{list-style:none;margin:0;padding:0;border-top:none}@media (max-width: 900px){.settings-menu ul{border-bottom:#edece4 1px solid}}.settings-menu li{border-top:#fff 1px solid}@media (max-width: 900px){.settings-menu li{margin-right:0;border-top:#edece4 1px solid}}.settings-menu li a{display:block;border-bottom:#edece4 1px solid;padding:15px 15px 15px 40px;border-bottom:none;color:#aaa9a2}@media (max-width: 900px){.settings-menu li a{padding-left:15px}.settings-menu li a:after{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e01d";float:right;margin-top:5px}.settings-menu li a:hover{text-decoration:none}}.settings-menu li a:hover,.settings-menu li a:focus{color:#242628;background:#edece4;text-decoration:none}.settings-menu li a:before{margin-right:20px}@media (max-width: 900px){.settings-menu li a:before{margin-right:15px}}@media (min-width: 900px){.settings-menu li.active{margin-right:0;position:relative;z-index:300;border-top:#edece4 1px solid;box-shadow:#fff 1px 0 0, #edece4 0 1px 0;-webkit-transition:all 0.15s ease-out 0s;-moz-transition:all 0.15s ease-out 0s;transition:all 0.15s ease-out 0s}.settings-menu li.active a{color:#242628;font-weight:bold;background:#fff}.settings-menu li.active a:focus{background:#edece4}}.settings-menu li:first-of-type{border-top:none}.settings-menu li:first-of-type.active{border-top:none}.settings-menu .about a:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e000"}.settings-menu .about a:hover{text-decoration:none}.settings-menu .general a:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e006"}.settings-menu .general a:hover{text-decoration:none}.settings-menu .publishing a:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e02d"}.settings-menu .publishing a:hover{text-decoration:none}.settings-menu .services a:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e020"}.settings-menu .services a:hover{text-decoration:none}.settings-menu .users a:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e002"}.settings-menu .users a:hover{text-decoration:none}.settings-menu .appearance a:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e021"}.settings-menu .appearance a:hover{text-decoration:none}.settings-menu .apps a:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e00b"}.settings-menu .apps a:hover{text-decoration:none}.settings-menu .code a:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e03e"}.settings-menu .code a:hover{text-decoration:none}.settings-content{margin-left:25%}.settings-content .settings-general img{max-width:100%;max-height:400px}.settings-content .content{padding:40px}@media (max-width: 900px){.settings-content .content{padding-left:15px;padding-right:15px}}@media (max-width: 550px){.settings-content .content{padding:0 15px 40px}}