[rbdr/grita] / views / style.less

@text_color: #666;
@background_color: #fff;
@emphasis_color: #222;
@light_color: #999;
@lighter_color: #ccc;
@border_color: #eee;
@error_color: #ffebe8;
@success_color: #f0fff0;

@font_stack: "Helvetica Neue", Helvetica, Arial, sans-serif;

*{
        margin: 0;
        padding: 0;
}

img{
        border: 0;
}

body{
        color: @text_color;
        background-color: @background_color;
        text-align: center;
        font-size: .625em;
        font-family: @font_stack;
}

#wrapper{
        margin: 0 auto;
        width: 960px;
        text-align: left;
}

#header #logo{
        background-image: url(/images/logo.png);
        background-repeat: no-repeat;
        width: 460px;
        height: 212px;
        display: block;
        margin: 10px 250px;
}

#header #logomini{
        background-image: url(/images/logomini.png);
        background-repeat: no-repeat;
        width: 140px;
        height: 65px;
        display: block;
        margin: 10px 410px;
}

#header #logo span, #header #logomini span{
        display: none;
}

#header #description p{
        font-size: 1.4em;
        line-height: 1.8em;
        margin: 10px 170px;
        width: 620px;
        color: @light_color;
}

#body h1{
        margin: 20px 90px;
        font-size: 2.4em;
        color: @emphasis_color;
}

#body h2{
        margin: 20px 90px;
        font-size: 1.8em;
        color: @emphasis_color;
}

#body h3{
        margin: 20px 90px;
        font-size: 1.6em;
        color: @emphasis_color;
}

#body p{
        margin: 20px 90px;
        font-size: 1.6em;
        line-height: 2.4em;
        text-indent: 3em;
        text-align: justify;
}

#body ul, #body ol{
        margin: 20px 90px;
        font-size: 1.4em;
        line-height: 1.8em;
}

#body ul li p, #body ol li p{
        font-size: 1em;
        margin: 0;
        line-height: 1em;
        text-indent: 0;
}

#body ul li, #body ol li{
        margin-left: 80px;
}

#body blockquote{
        margin: 20px 170px;
        text-align: justify;
        border-left: 2px solid @border_color;
        padding-left: 5px;
}

#body blockquote blockquote{
        margin: 10px;
}

#body pre{
        margin: 20px 170px;
        border: 1px solid @lighter_color;
        background-color: @border_color;
        padding: 10px;
}

#body pre code{
        font-size: 1.6em;
        line-height: 1.8em;
}

#body blockquote p{
        margin: 5px 0;
        text-indent: 0;
        font-size: 1.4em;
        line-height: 1.8em;
}

hr{
        margin: 10px;
        border: 0;
        border-bottom: 1px solid @border_color;
}

#body #sharing{
        text-align: center;
}

#body input.title, #body input.url{
        border: 1px solid @lighter_color;
        font-size: 1.6em;
        padding: 5px;
        margin: 0 90px;
        width: 770px;
}

#body #sharing input.url{
        width: 290px;
        margin-bottom: 10px;
        margin-top: 10px;
}

#body textarea.text{
        border: 1px solid @lighter_color;
        font-size: 1.6em;
        padding: 5px;
        margin: 0 90px;
        resize: vertical;
}

#body input.submit{
        width: 150px;
        font-size: 4.8em;
        margin: 10px 410px;
        padding: 20px;
}

#body #errors{
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 10px;
        font-size: 1.4em;
        margin: 0 90px;
        width: 760px;
        background-color: @error_color;
}

#body #success{
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 10px;
        font-size: 1.4em;
        margin: 0 90px;
        width: 760px;
        background-color: @success_color;
}

.tooltip{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        display: none;
}

#footer{
        height: 100px;
}