regluit/static/less/sitewide.less

/* For sitewide elements of unglue.it. */

@import "variables.less";

/* Local variables */
.utilityheaders {
    text-transform:uppercase;
    color:@text-blue;
    font-size:12px;
    display:block; 
}

.utilitylinks (@topbottom, @leftright) {
    padding:@topbottom @leftright;
    a {
        color:@medium-blue;
    }
}

/* Page-wide elements */
html, body {
    /* Necessary to make footer stretch to bottom of page */
    height:100%;
}

body{
    background:url(@background-body) 0 0 repeat-x;
    padding:0 0 20px 0;
    margin:0;
    font-size:12px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, sans-serif;
    color:@text-blue;
}

a {
    font-weight:bold;
    font-size:13px; 
    text-decoration:none;
    cursor:pointer;
    color: @medium-blue;
}

img {
    border:none;
}

h2 {
    &.content-heading {
        padding:15px;
        margin:0;
        font-size:19px;
        font-weight:normal;
        color:@text-blue;
        float:left;
        width:50%;
        
        span {
            font-style:italic;
        }
    }
}

h3 {
    &.jsmod-title {
        background:url(@background-header) 0 0 no-repeat;
        padding:0;
        margin:0;
        height:73px;
        
        span {
            font-size:17px;
            color:#fff;
            padding:26px 40px 27px 20px;
            display:block;
        }
    }
}

.js-page-wrap {
    position: relative;
    min-height: 100%;
}

.js-main {
    width:960px;
    margin:0 auto;
    clear:both;
    padding:0;
}

ul.menu{
    list-style:none;
    padding:0;
    margin:0;
}

a.readon {
    background:url(@background-header) 100% -72px no-repeat;
    color:#fff;
    text-transform:capitalize;
    display:block;
    float:right;
    font-size:13px;
    font-weight:bold;

    span {
        background:url(@background-header) -770px -108px no-repeat;
        margin-right:34px;
        padding:0 5px 0 20px;
        .height(36px);
        display:block;
    }
}

/* Header section */
#js-header {
    height:90px;
}

.js-logo {
    float:left;
    padding-top:10px;
    
    a {
        img { border: none;}
    }
}

.js-topmenu {
    float:right;
    padding-top:25px;

    ul {
        li {
            float:left;
            padding:0 10px;
            
            a {
                color:@text-blue; 
                .header-text;
            }
            
            span#welcome {
                color:@green;
                .header-text;
            }
            
            &.last {
                a {
                    background: url(@background-header) right top no-repeat;
                    
                    span {
                        background:url(@background-header) -770px -36px no-repeat;
                        margin-right:29px;
                        display:block;
                        padding:0 5px 0 15px;
                    }
                }
            }
        }
    }
}

.js-search {
    float:left;
    padding-top:25px;
    margin-left: 81px;
    
    input {
        float: left;
    }
    
    .inputbox {
        padding:0 0 0 15px;
        margin:0;
        border:none;
        outline: none;
        background:url(@background-header) -645px -180px;
        .height(36px);
        float: left;
        color:@medium-blue;
    }
    
    .button {
        background:url(@background-header) 100% -144px no-repeat;
        padding:0;
        margin:0;
        width:40px;
        height:36px;
        display:block;
        border:none;
        text-indent:-10000px;
        cursor:pointer;
    }
}

.js-search-inner { 
    float:right;
}

/* Explore column */
#js-leftcol {
    float:left;
    width:235px;
    margin-bottom: 20px;
    
    a {
        font-weight:normal;
        
        &:hover{
            text-decoration:underline;
        }
    }
    
    .jsmod-content {
        border:1px solid @pale-blue;
        margin-left:10px;
        .border-radius(0, 0, 10px, 10px);
    }

    ul {
        &.level1 > li > a {
            border-bottom:1px solid @pale-blue;
            border-top:1px solid @pale-blue; 
            .utilityheaders;
            padding:10px;
        }

        &.level2 li {
            .utilitylinks(5px, 10px);
        }
    }
}

/* Main content area: top*/
#js-topsection {
    padding:15px 0; overflow:hidden;
}

.js-topnews {
    float:left;
    width:100%;
}

.js-topnews1 {
    background:url("@{image-base}header/header-m.png") 0 0 repeat-y;
}
.js-topnews2 {
    background:url("@{image-base}header/header-t.png") 0 0 no-repeat;
}
.js-topnews3 {
    background:url("@{image-base}header/header-b.png") 0 100% no-repeat;
    display:block;
    overflow:hidden;
    padding:10px;
}

/* Main content area: main*/
#js-maincol-fr {
    float:right;
    width:725px;
}

div.content-block {
    overflow:hidden;
    background:url(@background-header) 100% -223px no-repeat;
    padding:0 0 0 7px;
    margin-bottom: 20px;
}

.content-block-heading a.block-link {
    float:right;
    padding:15px;
    font-size:11px;
    color:@text-blue;
    text-decoration:underline;
    font-weight:normal;
}

div.content-block-content {
    width:100%;
    overflow:hidden;
    padding-left: 10px;
    
    .cols3 .column {
        width:33.33%;
        float:left;
    }
}

/* Footer */
#footer {
    background-color: @pale-blue;
    clear: both;
    .utilityheaders;
    padding: 15px 0px 45px 0px;
    margin-top: 15px;
    overflow: hidden;
    
    .column {
        float:left;
        width: 25%;
        padding-top:5px;
        
        ul {
            padding-top:5px;
            margin-left:0;
            padding-left:0;
        }
        
        li {
            .utilitylinks(5px, 0);
            text-transform: none;
            list-style: none;
            margin-left: 0;
        }
    }
}

.pagination {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    clear: both;
    border-top: solid @text-blue thin;
    padding-top:7px;

    .endless_page_link {
      font-size: 13pt;
      border: thin @text-blue solid;
      font-weight: normal;
      margin: 5px;
      padding:1px;
    }
    .endless_page_current {
      font-size: 13pt;
      border: thin @text-blue solid;
      font-weight: normal;
      margin: 5px;
      padding:1px;
      background-color:@pale-blue;
    }
}