/* For sitewide elements of unglue.it. */ @import "variables.less"; /* remove before beta */ .preview { border: solid 3px @alert; .one-border-radius(7px); clear:both; padding: 5px 10px; font-size:13px; line-height: 17px; a { color: @call-to-action; } } .preview_top { .preview; width: 934px; margin:10px auto 0 auto; } .preview_content { .preview; width: 80%; margin: 10px auto; } /* 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", Arial, Helvetica, sans-serif; color:@text-blue; } #feedback { /* remove after alpha? */ position: fixed; top: 30%; left: 0; z-index:500; p { /* see http://scottgale.com/blog/css-vertical-text/2010/03/01/ */ a { color:white; font-size:24px; font-weight:normal; &:hover { color: @text-blue; } } writing-mode:tb-rl; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:block; bottom:0; width:160px; height:32px; .one-border-radius(32px); background: @call-to-action; margin-bottom: 0; text-align: center; margin-left: -67px; line-height: normal; } } a { font-weight:bold; font-size:13px; text-decoration:none; cursor:pointer; color: @medium-blue; &:hover { text-decoration: underline; } } 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 { .border-radius(8px, 8px, 0, 0); background: @medium-blue-grey; padding:0; margin:0; height:73px; span { font-size:19px; font-style: italic; color:@text-blue; 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; } /* Learn More menu */ .block-intro-text { padding-right: 10px; span.def { font-style: italic; } } a.readon { background:url("@{image-base}learnmore-downarrow.png") right center no-repeat; color:#fff; text-transform:capitalize; display:block; float:right; font-size:13px; font-weight:bold; &.down { background:url("@{image-base}learnmore-uparrow.png") right center no-repeat; } span { .border-radius(32px, 0, 0, 32px); background-color: @bright-blue; margin-right:34px; padding:0 5px 0 20px; .height(36px); display:block; } } .spread_the_word { height: 24px; width: 24px; position: top; margin-left:5px; } /* 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; overflow:auto; //emergency backstop to prevent usernames too long for truncate filter to force header into content area max-width: 240px; } &.last { a { background: url(@background-header) right top no-repeat; span { //background:url(@background-header) -770px -36px no-repeat; .border-radius(32px, 0, 0, 32px); background-color: @call-to-action; margin-right:29px; display:block; padding:0 5px 0 15px; color: white; } } } } } } .js-search { float:left; padding-top:25px; margin-left: 81px; input { float: left; } .inputbox { padding:0 0 0 15px; margin:0; border-top: solid 4px @bright-blue; border-left: solid 4px @bright-blue; border-bottom: solid 4px @bright-blue; border-right: none; .border-radius(50px, 0, 0, 50px); outline: none; // background:url(@background-header) -645px -180px; .height(28px); width:156px; float: left; color:@medium-blue; } .button { background:url("@{image-base}blue-search-button.png") no-repeat; padding:0; margin:0; width:40px; height:36px; display:block; border:none; text-indent:-10000px; cursor:pointer; } } .js-search-inner { float:right; } #welcome { overflow: hidden; } /* Explore column */ #js-leftcol { float:left; width:235px; margin-bottom: 20px; a { font-weight:normal; &:hover{ text-decoration:underline; } &.comingsoon:hover { text-decoration: none; cursor: default; &:after { content: " Coming soon!"; color: @call-to-action; } } } .jsmod-content { border: solid 1px @pale-blue; .border-radius(0, 0, 10px, 10px); } ul { &.level1 > li > a, &.level1 > li > span { border-bottom:1px solid @pale-blue; border-top:1px solid @pale-blue; .utilityheaders; padding:10px; } &.level2 li { .utilitylinks(5px, 10px); img { vertical-align: middle; .one-border-radius(5px); } .ungluer-name { .height(30px); } } } } /* Main content area: top */ #js-topsection { padding:15px 0 0 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*/ #main-container { margin: 15px 0 0 0; } #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; } } a.nounderline { text-decoration: none; }