/* general (sitewide) styles for Changer Social Schools */

@import url(http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo);

body {
    font-family: "Ubuntu", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

h1, h2, h3, h4, h5, h6 {
    color: @headerColor;
}

h2 {
    font-size: 24px;
    line-height: 28px;
}

.theme-3 {
   font-family: 'Arial', 'Ubuntu', sans-serif;
}

.theme-3 p {
    color: #666666;
    font-size: 14px;
}

.theme-3 h1,
.theme-3 h2 {
    font-family: 'Swanky and Moo Moo', 'Arial', sans-serif;
}

.theme-3 h2 {
    font-size: 36px;
}

.theme-3 h3 {
    font-size: 18px;
}

.theme-3 h3,
.theme-3 h4,
.theme-3 h5,
.theme-3 h6, {
    font-family: 'Arial', 'Ubuntu', sans-serif;
}

.themeColor {
    color: @themeColor;
}

.black {
    color: #000000;
}

a {
    .linkColor(@themeColor);
}

.meta-info {
    color: @grayLight;
}

.white-widget {
    background: @white;
    .box-shadow(0 2px 6px darken(@grayLight, 10%));
    .border-radius(3px);
}



/* styles for the main content containers */

.css-content-transparent {
    background-color: rgba(245,245,245, 0.7);
    .box-shadow(0 0 6px darken(@grayLight, 10%) inset);
    padding: 20px;
    .border-radius(3px);
    border-bottom: 1px solid rgba(255,255,255, 0.4);
}

.css-content-white {
    .white-widget;
    padding: 20px;
}

.content-header {
    font-weight: 400;
    color: @themeHeader;
    text-align: center;
    text-shadow: 0 1px 0 white;
    margin: 0px;
}

.content-sub-header {
    font-weight: 100;
}

.content-description {
    text-align: center;
    display: block;
}

.description {
    text-align: center;
}

.content-item {
    width: 145px;
    margin-right: 20px;
    .box-sizing(border-box);
    float: left;
}

.no-content-community, .no-content-dashboard {
    position: relative;
    text-align: center;
    h2 {
        color: @themeColor;
    }
}

.no-content-dashboard:after {
    background: url("img/no-content-arrow-left.png") no-repeat;
    position: absolute;
    width: 150px;
    height: 150px;
    top: 30px;
    left: -60px;
    content: '';
}

.no-content-community:after {
    background: url("img/no-posts-arrow.png") no-repeat;
    position: absolute;
    width: 100px;
    height: 150px;
    top: -90px;
    left: 530px;
    content: '';
}

/* mask for file input buttons */

.file-input-mask {
    display: inline-block;
    position: relative;
    input {
        opacity: 1;
        position: relative;
        z-index: 2;
        cursor: pointer;
        opacity: 0;
    }
    .btn-file-input {
        position: absolute;
        left: 0px;
        top: 8px;
    }
}

/* Style for css-thumbnails */

.css-thumb {
    border: 1px solid rgba(0,0,0,0.2);
    .border-radius(2px);
}

.invite-delete {
    float: left;
    margin-left: 10px;
}

/* cms specific styles */

.main-content {
    margin-bottom: 20px;
    background-color: @white;
    overflow: hidden;
}

.news-container, .news-theme-3 {
    padding: 10px;
    margin-bottom: 20px;
    min-height: 400px;
    max-height: 700px;
    overflow: scroll;
    border: 1px solid #DDDDDD;
    .border-radius(4px);
}

.news-container {
    border-top: none;
    .border-radius(0px 0px 4px 4px);
    margin-top: -20px;
}

.css-well {
    background-color: fadeout(@themeColor, 95%);
    border: 1px solid fadeout(@themeColor, 90%);
    margin-top: 30px;
}

.content-block {
    margin-bottom: 20px;
}

.circle {
    .border-radius(500px 500px 500px 500px);
    overflow: hidden;
    position: relative;
    padding-bottom: 100%;
    margin-bottom: -50%;
    border: 10px solid @white;
    .box-shadow(0 0 10px @themeColor);
    img {
        position: absolute;
    }
}

/* topnav and footer responsive styles to override bootstrap */

@media (max-width: 979px) {
    .css-topbar, .footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .navbar, .css-stripes {
        margin-left: -20px;
        margin-right: -20px;
    }
}

/* global styles for events */

.event-icon {
    width: 90px;
    float: left;
    margin-right: 10px;
}

.event-details {
    min-width: 200px;
    float: left;
    margin-top: 10px;
}

.event-icon-month {
    background: @eventColor;
    text-align: center;
    .border-radius(3px 3px 0 0);
    border: 1px solid darken(@eventColor, 10%);
    color: @white;
}

.event-icon-day {
    text-align: center;
    .border-radius(0 0 3px 3px);
    border: 1px solid @grayLighter;
    border-top: none;
    background: @white;
}

.event-icon-day-number {
    font-size: 46px;
    line-height: 46px;
    font-weight: 600;
    margin-bottom: 0px;
}

.meta-info {
    color: @grayLight;
}

.event-multiday-time {
    margin-bottom: 0px;
    strong {
        text-transform: uppercase;
    }
}

.event-singleday-time {
    font-size: 24px;
}

.event-location {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 10px;
}

/* specific event styles for events page */

.event-list-item {
    padding: 20px 0 20px 0;
    border-bottom: 1px solid @grayLighter;
    h3 {
        font-weight: 100;
        margin: 0px;
        line-height: 24px;
    }
}

.border-right {
    padding-right: @ss-max-padding;
    border-right: 1px solid @grayLighter;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .border-right {
        border-right: 0px;
        padding-right: 0px;
    }
}

.nav-stacked {
    .active > a {
        border-left: 4px solid @themeColor !important;
    }
}

.breadcrumb-theme-3 {
    position: relative;
    margin-top: 109px;
    border-bottom: 1px solid @grayLighter;
    .breadcrumb {
        background-color: @white;
        margin-bottom: 0px;
        text-shadow: none;
        padding-right: 0px;
    }
}

@media (max-width: 980px) {
    .breadcrumb-theme-3 {
        margin-top: 0px;
    }
}

/* specific styles for theme-3 */

.row-banners {
    margin-bottom: 40px;
}

.theme-3 .plugin_link {
    display: block;
}

.content-theme-3 {
    padding-top: 40px;
    .nav {
        border-style: solid;
        border-width: 44px 40px 42px 25px;
        -moz-border-image: url("img/theme-3-submenu.jpg") 44 40 42 25 repeat;
        -webkit-border-image: url("img/theme-3-submenu.jpg") 44 40 42 25 repeat;
        -o-border-image: url("img/theme-3-submenu.jpg") 44 40 42 25 repeat;
        border-image: url("img/theme-3-submenu.jpg") 44 40 42 25 fill repeat;
    }
    .nav-stacked > li > a {
        color: rgba(255,255,255,0.7);
        border: none;
        text-transform: uppercase;
        &:hover {
            background: none;
            border: none;
            color: white;
        }
    }
    .nav-stacked > .active a {
        background: none;
        color: white;
        font-weight: bold;
        border-left: none !important;
    }
    .plugin_file {
        background-color: @themeColor;
        .border-radius(4px);
        a {
            display: block;
            color: @white;
            padding: 10px;
            font-size: 16px;
        }
    }
}

.widgets-theme-3 {
    padding-top: 40px;
}
