/* Wikidot Main Style */

/* FONTS AND COLORS #0180B2*/

body {
    background-color:  #FFFFFF;
    color: #262624;
    font-family: "Helvetica Neue", "Open Sans", Calibri, Candara, Arial, sans-serif;
    }

    a           {color: #0180B2; text-decoration: none;}
    a:hover     {color: #f24747; text-decoration: none;}
    a:visited   {}
        
    .topbar                                 {background-color: #222222;}  
    .navbar-default                         {background-color: transparent; border-color: transparent; }
    .navbar-default .navbar-nav>li>a        {color: #ffffff;}
    .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a.active {color: #F24747;}  
    .navbar-default .navbar-brand           {color: transparent;}
    .navbar-default .navbar-brand:hover     {color: transparent;}
    
    @media (max-width: 768px) {
        .navbar-default .navbar-nav>li>a        {color: #ffffff;}
        .navbar-default .navbar-nav>li>a:hover  {color: #777777;}
    }
  
    .site-subtitle {
        font-weight: 100;
        color: #ffffff;
        font-size: 20px;
    }
        
  
/* TOPBAR AND MENU */

.topbar {min-height: 100px;}

.navbar-default {padding-top: 20px;}

.navbar-default .navbar-nav>li>a {
    font-size: 18px;
    font-weight: 100;
}

.navbar-collapse {border: 0; box-shadow: none;}

.wikidot-menu-collapse {margin-right: 90px;}

@media (max-width: 767px) {
    .wikidot-menu-collapse {margin-right: 0px;}
}

.site-name {float: left;}

.site-name a{
    background: url(../images/wikidot_logo.png) no-repeat;
    height: 59px;
    width: 197px;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: transparent;
}

.site-subtitle {
    float: left;
    margin: 15px 0px 0px 13px;
}

@media (max-width: 768px) {
    .nav > li {
        font-size: 22px;
        font-weight: 100;
        height: 42px;
        text-align: right;
    }
    .site-name a{
        background-size: 100px;
        height: 40px;
        margin-top: 12px;
    }
}

/* HIDE SUBTITLE */

@media (max-width: 992px) {
    .site-subtitle {display: none;}
}

/* LOGIN STATUS */
/* Login Status colors*/

.loginStatus .btn.disabled{
    color: #FFFFFF;
}
    
.loginStatus:hover .btn.disabled{
    border: 2px solid #FFFFFF;
    background-color: #000000;
}

.loginStatus ul li a:hover,
.loginStatus ul li a:focus,
.loginStatus ul li a:hover i,
.loginStatus ul li a:focus i{
    color: #FFFFFF;
}

/* Login Status style */

.loginStatus .printuser{/*display: none;*/}
.loginStatus {
    padding-top: 10px;
    position: absolute;
    right: 20px;
}

@media(max-width: 767px) {
    .loginStatus {
        right: 100px;
    }
}

.loginStatus .logged-in .btn{
    background: none;
    border: none;
    padding: 0;
}

.loginStatus .btn.disabled{
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 50;
    opacity: 1;
    filter: alpha(opacity=100);
    border: 2px solid #929292;
    width: 30px;
    height: 30px;
    border-radius: 100% !important;
    font-size: 0;
}

.loginStatus .btn.disabled.user-karma-level-5 {border-color: #ff2d2d;}
.loginStatus .btn.disabled.user-karma-level-4 {border-color: #ec810e;}
.loginStatus .btn.disabled.user-karma-level-3 {border-color: #fff20e;}
.loginStatus .btn.disabled.user-karma-level-2 {border-color: #61f328;}
.loginStatus .btn.disabled.user-karma-level-1 {border-color: #61f3a7;}

.loginStatus .btn.disabled::before{
    /* font-family: 'FontAwesome';
    font-size: 16px;
    content: '';*/
}

.loginStatus .btn.dropdown-toggle{
    position: absolute;
    left: 0px;
    width: 54px;
    height: 30px;
    z-index: 49;
    padding: 4px 0px 0px 28px; 
}

.loginStatus .btn.dropdown-toggle .caret {
    border-top: 4px solid transparent;
}

.loginStatus:hover .btn.dropdown-toggle .caret{
    border-top: 4px solid #FFFFFF;
}

.login-status-sign-in {
    background-color: #428bca !important;
    border-color: #357ebd !important;
    padding: 4px 8px !important;
    font-weight: 100;
}

.loginStatus ul{  right: -20px !important; }
.loginStatus ul li i{  margin-right: 7px; }

.loginStatus .login-status-create-account,
.loginStatus > span{
    display: none;
}

.loginStatus button .badge{
    position: absolute;
    top: -7px;
    left: -12px;
    background-color: #F24747;
}

.loginStatus ul li a .badge{  margin-left: 10px;}

.loginStatus .disabled .printuser img.small {
    margin: 0;
    height: 26px;
    width: 26px;
    padding: 0;
    background: none !important;
    box-sizing: content-box;
    border-radius: 100%;
}

.loginStatus .printuser-show {
    padding: 5px 0px 0px 15px;
}

.loginStatus .printuser-show .printuser img.small {
    height: 16px;
    padding: 0px 15px 0px 8px;
}

/* Backgrounds */
.welcome {
     min-height: 630px;
     background-image: url(../images/8.jpg);
     background-size: cover;
}

.awesome-features-bg {
    height: 600px;
    background-image: url(../images/18.jpg);
    background-size: cover;
}

.how-it-works-bg {
    height: 600px;
    background-image: url(../images/3.jpg);
    background-size: cover;
}

.account-bottom-bg {
    background-image: url(../images/14.jpg);
    background-size: cover;
}

@media (max-width: 768px) {
    .awesome-features-bg, .how-it-works-bg {
        max-height: 500px;
        background-size: cover;
    }
    .welcome, .account-bottom {
        background-size: cover;
    }
}

/* Welcome */

.welcome .container, .welcome .container .row {height: 100%;}

.welcome .container .row .create-account-col {
    background-color: rgba(0,0,0,0.6);
    color: #ffffff;
    height: 100%;
}

.welcome .col-md-7 {
    padding-top: 150px;
    font-style: italic;
    font-family: serif;
    color: #ffffff;
}

.welcome .col-md-7 p {
    text-shadow: 0px 0px 10px black, 0px 0px 20px black, 0px 0px 50px black;
}

@media (max-width: 992px) {
    .welcome .col-md-7 {
        font-size: 60px;
        text-align: center;
        padding: 31px 0;
    }
}


@media (min-width: 992px) {
    .welcome .col-md-7 {
        font-size: 60px;
    }
}

@media (min-width: 1200px) {
    .welcome .col-md-7 {
        font-size: 80px;
    }
}

/* Create Account Form */

.create-account-form {
    padding: 10px;
    font-size: 18px;
    min-height: 630px;
    text-align: center;
}

.create-account-form h1 {
    font-weight: 100;
    margin-bottom: 20px;
}

.create-account-form input {
    height: 50px;
    font-size: 20px;
    font-weight: 100;
}

.input-group-addon {color: #000000;}

.create-account-form input.text {
    border-left: 0px solid #FFF;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.create-account-form .input-group-addon {
    background-color: #FFF;
}

.create-account-form button {
     width: 100%;
     height: 60px;
     padding-top: 8px;
     font-weight: 100;
     font-size: 20px;
}

.create-account-form .tos-and-pp {
    font-size: 14px;
    font-weight: 200;
    text-align: center;
}

.create-account-form .fb-title {
    text-align: center;
}

.create-account-form .with-facebook .fb-connect-start {
    text-align: center;
}

.create-account-form .with-facebook .fb-connect-start input {
    width: 230px;
    height: 36px;
}

.create-account-form .with-facebook .fine-print{
    text-align: center;
    font-weight: 200;
    font-size: 14px;
    margin: 0 40px;
}

.input-group-addon.captcha-prepend {
    background-color: #FFF;
}

.create-account-form .input-group-btn button {
    height: 50px;
    width: auto;
}

.create-account-form .math-captcha-wrapper button {
    margin-top: 0px;
    height: 50px;
}

.create-account-form .logged-in {
    font-size: 26px;
    font-weight: 100;
    padding: 60px 40px;
}

.create-account-form .logged-in .icon-ok {
    color: #5cb85c;
}

.create-account-form-bottom {
    padding: 40px;
    font-size: 18px;
    background-color: rgba(0,0,0,0.6);
    color: #ffffff;
    min-height: initial;
}

.create-account-form-bottom .logged-in {
    text-align: center;
}

.create-account-form .logged-in .text h1 {
    padding-bottom: 20px;
}

.create-account-form .logged-in .button {
    text-align: center;
    padding: 30px 0;
}

/* What is Wikidot? */

.what-is-wikidot {
    background-color: #FFFFFF;
    padding: 30px 0 60px;
    text-align: center;
    font-weight: 200;
    font-size: 26px;
}

.what-is-wikidot h1{
    font-size: 50px;
    padding-bottom: 24px;
    font-weight: 200;
}

.what-is-wikidot .wikidot-is {
    font-weight: 200;
    font-size: 36px;
    padding: 20px 0;
}

@media (max-width: 768px) {
    .what-is-wikidot {font-size: 22px;}
    .what-is-wikidot h1 {font-size: 36px;}
}

.wikidot-front-special-stats {
    font-size: 23px;
    font-weight: 100;
}

.wikidot-front-special-stats .number {
    font-size: 34px;
    font-weight: 300;
}

/* How it works */

.how-it-works-title {
    position: absolute;
    font-size: 80px;
    font-weight: bold;
    color: #FFFFFF;
    width: 100%;
    text-align: right;
}

.how-it-works {
    padding: 40px 0 20px 0;
}

.how-it-works .feature {
    text-align: center;
    margin: 40px 0px 0px 0px;
}

.how-it-works .more-features-info a {
    font-size: 27px;
    font-family: serif;
    font-style: italic;
}

.how-it-works .feature-icon {
    color: #F24747;
}

.how-it-works .feature-title {
    font-family: serif;
    font-style: italic;
    font-size: 36px;
    color: #01A3B2;
    padding: 10px 0;
    }
    
@media (max-width: 768px) {
    .how-it-works {
        padding: 0;
    }
    .how-it-works-title {
        font-size: 40px;
        top: -43px !important;
        text-align: center;
        position: relative;
        }
}
    
/* Awesome Features */

.awesome-features-title {
    position: absolute;
    font-size: 80px;
    font-weight: bold;
    color: #FFFFFF;
    width: 100%;
    text-align: left;
}

.awesome-features {
    padding: 40px 0 20px 0;
}

.awesome-features .first-row {
    margin-bottom: 20px;
}

.awesome-features .feature {
    text-align: center;
    margin: 40px 0px 0px 0px;
}

.awesome-features .more-features-info {
    font-size: 30px;
    text-align: center;
}

.awesome-features .more-features-info a {
    font-size: 27px;
    font-family: serif;
    font-style: italic;
}

.awesome-features .feature-icon {
    color: #F24747;
}

.awesome-features .feature-title {
    font-family: serif;
    font-style: italic;
    font-size: 28px;
    color: #01A3B2;
    padding: 10px 0;
    }

.awesome-features .feature-description {
    font-weight: 200;
    font-size: 18px;
    text-align: justify;
    margin: 0 20px;
}

@media (max-width: 768px) {
    .awesome-features-title {
        font-size: 32px;
        top: -34px !important;
        text-align: center;
        position: relative;
        }
    .awesome-features {padding: 0px;}
    .awesome-features .feature {margin: 0;}
    .awesome-features .feature-title {padding: 0;}
}

/* FOOTER */

.footer {
    font-size: 23px;
    font-weight: 200;
    min-height: 300px;
    padding-top: 50px;
    background: #222222 url(../images/footer_background.png) bottom right no-repeat;
}

@media (max-width: 768px) {
    .footer {
        text-align: center;
    }
}

.license-area {
    color: #CCC;
    font-size: 12px;
    padding-top: 53px;
}

@media (max-width: 768px) {
    .license-area {
        text-align: center;
    }
}

.page-options-container {
    text-align: center;
}

#page-options-bottom a.btn {margin-bottom: 5px;}

#action-area {
    clear: both;
    padding-top: 20px;
}