Synnefo

@import "../less/bootstrap.less";

@import "../less/django_forms.less";

@import "../less/tables.less";

@import "../less/xtra.less";

// mixins

.border-box {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    *behavior: url(boxsizing.htc);

}

@gradCol: #ddd;

body {

    #font.main();

}

.topbar {

    background-color: @shadowColor;

    .head {

        float: left;    

            padding: @gridGutterWidth/2-5;

    }

    .links {

        .clearfix();

        a {

            color: @black;

            text-decoration: none;

            display: block;

            float: left;

            margin-left: 10px;

            padding: @gridGutterWidth/2+1;

            &:hover {

                background-color: lighten(@black, 10%);

                color: @white;

            }

        }

        float: right;    

    }

}

// default link styles

section a, p a, form a, .section a, .styledlinks a {

    color: @black;

    text-decoration: none;

    border-bottom: 1px solid @linkColor;

    &:hover {

        color: @linkColor;

    }

    &.noborder {

        border: none;   

    }

    em {

        color: @blue;    

    }

}

a.simple {

    border: none;

}

a.action {

    color: @linkColor;

    border-bottom: none;

}

a img {

    border-bottom: none;

}

// body borders

.content-border {

    border-right: 1px solid @mainBorderColor;

    border-left: 1px solid @mainBorderColor;

}

.hidden {

    display: none !important;

}

// container sizing

.container, .topbar, .footer {

    .fixed-container();

    .content-border();

    padding: 0 @siteWhiteSpace;

}

.container {

    padding-bottom: @siteWhiteSpace;

    background-color: @white;

}

.topbar {

}

div.header {

    position: relative;

    margin-top: 4*@gridGutterWidth;

    margin-bottom: @gridGutterWidth;

    h1 {

        color: @shadowColor;

        display: inline;

        font-size: 2.3em;

        border-bottom: 1px solid @shadowColor;

        padding-bottom: 3px;

    }

}

.mainlogo {

    height: 36px;

    h1 { height: 36px }

    img {

        margin-left: -10px;

    }

}

.footer {

    border-bottom: 1px solid @mainBorderColor;

    border-top: 1px solid lighten(@mainBorderColor, 15%);

    padding-top: @gridGutterWidth;

    padding-bottom: @gridGutterWidth;

}

ul.inline {

    .clearfix();

    li {

        display: block;    

        float: left;

        margin-right: 1em;

    }

}

.mainnav.quicknav {

    position: absolute;

    right: 0;

    top: -2.6*@gridGutterWidth;

    margin:0;

    li {

        margin-right:0;

        margin-left: 1em;

    }

}

.navigation {

    height: 83px;    

}

.mainnav {

    font-size: 1.2em;

    &.subnav {

        margin-bottom: -@gridGutterWidth;

        li {

            margin-top: 1.2em;

        }

    }

    li {

        margin-top: 3*@gridGutterWidth;

    }

    li.active {

        a {

            /*border-bottom: 1px solid @linkColor;*/

            border-bottom: none;

            color: @linkColor;

        }

    }

    a {

        color: @black;

        text-decoration: none;

        &:hover {

            border-bottom: 1px solid @linkColor;

        }

        &.active, &:active {

            border-bottom: 1px solid @linkColor;

            color: @linkColor;

        }

    }

}

.bottom-section {

    .clearfix();

    .section {

        img {

            width: 200px;    

        }

    }

}

.top-section {

    .clearfix();

}

div.page {

    .makeRow();

    margin-top: 6*@gridGutterWidth;

    font-size: 1.1em;

    .page-inner {

        position: relative;    

    }

}

// columnlayout

.maincol {

    .makeColumn(5);

    &.wide {

        .makeColumn(6);    

    }

    &.full {

        .makeRow();

        margin-left: 0;

        .makeColumn(10);

    }

}

.appbar {

    height: 30px;

    background-color: @blue;

}

.rightcol {

    .offset(6.5);

    .columns(4);

    &.narrow {

        .offset(7.5);

        .columns(3);    

    }

    input[type=text], input[type=password] {

        width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5;    

    }

}

/* generic form styles */

input, textarea, .form-widget {

    background-color: @white;

    color: @gray;

    border-color: @black;

}

#forms {

    .input, input {

        #font.main();

        border: 1px solid @gray;

        height:21px;

        display: inline-block;

        margin-bottom: -1px;

        padding: 0.8em;

        padding-left: 1.5em;

        z-index: 2;

        &:focus {

            position: relative;

            border: 1px solid #000;

            z-index: 100;

            label {

                z-index: 300;    

            }

        }

    }

}

.altcol {

    background-color: @altColor !important;

    &:hover {

        background-color: @linkColor !important;

    }

}

.section {

    em {

        color: @blue;

    }

    &.positioned {

        margin-bottom: 0;

        .content {

            .makeColumn(4);

        }

        img {

        }

        &.withimg {

            .img {

                .makeColumn(4);

            }

            img {

                float: left;    

            }

        }

        h3 {

            font-size: 1.2em;

            margin-bottom: @gridGutterWidth;    

        }

        .text {

            color: @black;    

        }

    }

    margin-bottom: 3*@gridGutterWidth; 

    .left, .right {

        width: 50%;

        float: left;

    }

    &.imagelist {

        margin-top: 2em;

        .clearfix();

        img {

            float: left;    

            margin-right: 4em;

            vertical-align: middle;

        }    

    }

}

input[readonly=true] {

    background-color: #ddd;

    color: darken(#ddd, 50%);

}

form.withlabels {

    label {

        width: 3*@gridColumnWidth + 2*@gridGutterWidth;

        display: block;

        float: left;

        padding-top: 1em;

    }

    input[type=text], input[type=password], textarea {

        width: 3*@gridColumnWidth + 2*@gridGutterWidth;

        &.long {

            width: 3*@gridColumnWidth + 2*@gridGutterWidth;

        }

    }

}

.login-section {

    a.button {

        margin-bottom: 0.2*@gridColumnWidth;    

        &:last-child {

            margin-bottom: none;    

        }

        &.withicon {

            background-repeat: no-repeat;

            background-position: 15px 50%;

            padding-left: 40px;

        }

    }    

    &.loggedin {

        padding-bottom: 0 !important;

        background-image: none !important;

    }

}

@errorColor: lighten(@red, 30%);

// forms

form {

    &.login {

        margin-bottom: 1.5*@gridGutterWidth; 

    }

    h2 {

        color: @black;

        margin-bottom: @gridGutterWidth;

        font-size: 1.1em;

        span {

            padding-bottom: 3px;

        }

    }

    .form-row {

        min-height: 2*@gridGutterWidth;

        position: relative;

        &.submit {

            margin-top: 1.5*@gridGutterWidth;

        }

        .extra-link {

            color: @gray;

            text-decoration: none;

            border: none;

            font-size: 0.8em;

            margin-top: 1.3em;

            float: right;

        }

    }

    &.innerlabels label { 

        position: absolute;

        top:1em;

        left:1.5em;

        color: #aaa;

    }

    &.innerlabels p {

        position: relative;    

    }

    textarea, input.text, input[type="text"], input[type="password"] {

        #forms.input();

    }

    input.submit, input[type="submit"] {

        .button();

    }

    textarea {

        height: 200px;

        width: 350px !important;

    }

    .with-errors {

        input, textarea, select {

            color: @red;

        }

        label {

            color: @errorColor;

        }

    }

}

.form-error {

    background-color: @red;

    color: #fff;

    font-size: 0.8em;

    padding: 5px 5px;

}

.form-errors.all {

    .form-error {

        position: relative;

        border-radius: 0;

        margin-bottom: 1.3em;

        padding: 0.5em;

    }

}

div.form-stacked {

    margin-bottom: 4em;

}

// content types

.rightcol .section {

    background-image: url("../images/dashed_border.png");

    background-repeat: repeat-x;

    background-position: left bottom;

    padding-bottom: 2*@gridGutterWidth;

    margin-bottom: 2*@gridGutterWidth;

}

.section {

    h2 {

        font-size: 1.1em;

        line-height: 1.3em;

        margin-bottom: 1.5*@gridGutterWidth;    

        a {

            color: #4085A6;

            border: none;

            line-height: 1.3em;

        }

    }

    h3 {

        font-size: 1.1em;    

        line-height: 1.3em;

        margin-bottom: 1.5*@gridGutterWidth;    

    }

    p {

        line-height: 1.7em;    

    }

    .section-img {

        margin-bottom: 1*@gridGutterWidth;    

    }

}

// page messages

.messages {

    .makeColumn(10);

    margin: 2em 0;

    background-color: #ddd;

    margin-left: 0;

    li {

        padding: 1em;    

        &.success { background-color: @green; color: @white }

        &.error { background-color: @red; color: @white }

        &.warning { background-color: @yellow; color: @black }

    }

}

// accounts specific styles

.service-desc {

    margin-top: 4em;    

}

// invitations table

table {

    td.consumed {

        color: @red;

    }

    tr.consumed {

        td.consumed {

            color: @green;    

        }

    }

}

.row { .makeRow() }

// footer

.footer {

    .makeRow()

    &:hover {

        a {

            color: @gray !important;

            .transit();

        }

    }

    a {

        color: lighten(@gray, 20%);    

        .transit();

        text-decoration: none;

        &:hover {

            color: darken(@gray, 50%);    

        }

    }

    li {

        margin-bottom: @gridGutterWidth/2;

        &.header {

            margin-bottom: @gridGutterWidth;    

        }

    }

    .col {

        .makeColumn(4);

        &:last-child, &.last {

            width: 140px;

            margin-right:0;

        }

    }

    .bottom.row {

        .col {

            .makeColumn(2);    

            &:last-child, &.last {

                width: 140px;

                margin-right:0;

            }

        }

    }

}

/*pagination*/

.pagination {

    a.page {

        display: inline !important;

    }    

}

/*blog styles*/

.blog-entries {

}

.blog-entry {

    .section();

    .clearfix();

    margin-bottom: 2*@gridGutterWidth;    

    .title {

        margin-bottom: 1em;    

        font-size: 1.1em;

        line-height: 1.4em;

    }    

    .media {

        img {

            border: 1px solid @gray;    

        }    

    }

    .intro-content, .content {

        margin-top: @gridGutterWidth;

        object {

            margin: @gridGutterWidth 0;    

        }

    }

    .entry-info {

        font-size: 0.7em;

        margin-top: @gridGutterWidth;    

    }

    &.single {

        .entry-info {

            margin-top: 0;

            margin-bottom: @gridGutterWidth;

        }    

    }

}

.section.twitter-feed {

    .tweet {

        &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none }

        line-height: 1.3em;

        font-size: 0.9em;

        margin-bottom: @gridGutterWidth;

        color: @gray;

        .date {

            display: block;

            font-size: 0.7em;

            a {

                text-decoration: none !important;

                border: none;

            }

        }

    }

}

.pagination .page {

    margin-left: 0;    

}

.entry-list {

    .since {

        font-size: 0.8em;    

    }

    .title {

        margin-bottom: 1em;    

    }

    .content, .text {

        margin-bottom: 2em;

        font-size: 0.8em;

    }

}

.initial_hidden {

    display: none;    

}

/*resources styles*/

@resCol: #FAAF40;

.resources {

    .categories {

        ul { .clearfix() }

        ul li { float: left; }

        .title {

            margin-bottom: @gridGutterWidth/2;    

        }

        ul li a {

            text-decoration: none;

            color: @resCol;

            margin-right: @gridGutterWidth;

        }

    }

    .list {

        margin-top: 4*@gridGutterWidth;

        .resource {

            .border-box();

            width: 33%;

            padding: 2*@gridGutterWidth;

            float: left;

            border: 1px solid @resCol;

            height: 12*@gridGutterWidth;

            .description {

                display: none;    

            }

        }    

    }

}

/* recaptcha */

#recaptcha_widget_div {

    margin-top: 10px;

    margin-left: -4px;

    #recaptcha_instructions_image {

        font-size: 0.8em;

        margin-bottom: 10px;

        display: block !important;

    }

}

.checkbox-widget.checked {

    background-color: #f00;

    background-image: url("../images/checkbox.png");

    background-position: 50% 50%;

}

.checkbox-widget {

    border: 1px solid @gray;

    width: 25px;

    height: 25px;

    display: block;

    float: left;

    cursor: pointer;

    margin-top: @gridGutterWidth/2 - 2;

}