/* For sitewide elements of unglue.it. */ @import "variables.less"; @import "download.less"; /* remove before beta */ .preview { border: solid 3px @alert; .one-border-radius(7px); clear:both; padding: 5px 10px; font-size: @font-size-default; width: 90%; a { color: @call-to-action; } } .launch_top { .preview; border-color: @green; margin:10px auto 0 auto; font-size: @font-size-larger; line-height: @font-size-larger*1.5; &.pale { border-color: @blue-grey; font-size: @font-size-default; } } .preview_content { .preview; width: 80%; margin: 10px auto; } /* Local variables */ .utilityheaders { text-transform:uppercase; color:@text-blue; font-size: @font-size-larger; display:block; } .utilitylinks (@topbottom, @leftright) { padding:@topbottom @leftright; a { color:@medium-blue; font-size: @font-size-larger; } } /* 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: @font-size-default; line-height: @font-size-default*1.3; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Arial, Helvetica, sans-serif; color:@text-blue; } #feedback { /* remove after alpha? */ position: fixed; bottom: 10%; right: 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); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); white-space:nowrap; display:block; bottom:0; width:160px; height:32px; .border-radius(0, 0, 10px, 10px); background: @call-to-action; margin-bottom: 0; text-align: center; margin-right: -67px; line-height: normal; } } a { font-weight:bold; font-size: inherit; text-decoration:none; cursor:pointer; color: @medium-blue; &:hover { text-decoration: underline; } } h1 { font-size: @font-size-larger*1.5; } h2 { font-size: @font-size-larger*1.25; } h3 { font-size: @font-size-larger*1.17; } h4 { font-size: @font-size-larger; } img { border:none; } img.user-avatar { float:left; margin-right:10px; .one-border-radius(7px); } input, textarea, a.fakeinput { border: 2px solid @blue-grey; .one-border-radius(5px); &:focus { border: 2px solid @call-to-action; outline: none; } } a.fakeinput:hover { text-decoration: none; } .js-search input { .one-border-radius(0); } h2 { &.content-heading { padding:15px; margin:0; font-size: @font-size-header; 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: @font-size-header; font-style: italic; color:@text-blue; padding:26px 40px 27px 20px; display:block; } } } input[type="submit"], a.fakeinput { background: @call-to-action; color: white; font-weight: bold; padding: 0.5em 1em; cursor: pointer; } .loader-gif[disabled="disabled"], .loader-gif.show-loading { background: url('/static/images/loading.gif') center no-repeat !important; } .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; } .errorlist { .errors; } .errorlist + input { border: 2px solid @alert !important; &:focus { border: 1px solid @call-to-action !important; } } .errorlist + textarea { border: 2px solid @alert !important; &:focus { border: 2px solid @call-to-action !important; } } /* add class clearfix to floats to make them self-clear */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Header section */ #js-header { height:90px; } .js-logo { float:left; padding-top:10px; a { img { border: none;} } } .js-topmenu { float:right; margin-top:25px; font-size: @font-size-larger; &#authenticated { .one-border-radius(5px); height: 36px; } &#authenticated:hover, &#authenticated.highlight { background: @blue-grey; cursor: pointer; position: relative; } &#authenticated.highlight span#welcome { background-image: url("/static/images/menu_bar_up_arrow_textblue.png"); } ul { &#user_menu { white-space:nowrap; display: none; z-index: 100; position: absolute; top: 36px; left: 0; padding: 0; overflow: visible; li { border-top: 1px solid white; list-style-type: none; float: none; background: @blue-grey; padding: 7px 10px; &:hover { background: @call-to-action; a { color: white; } #i_haz_notifications { border-color: white; background-color: white; color: @text-blue; } } a { height: auto; line-height: @font-size-larger*1.75; } span { margin-right: 10px; } } } li { float:left; position: relative; z-index: 50; a { color:@text-blue; .header-text; } span#welcome { .header-text; padding: 0 10px; margin-right: 5px; padding-right: 22px; img { vertical-align: middle; } background-image: url("/static/images/menu_bar_down_arrow_textblue.png"); background-repeat: no-repeat; background-position: right; } img { padding: 0; margin: 0; } &.last { padding-left: 20px; a { background: url(@background-header) right top no-repeat; span { .border-radius(32px, 0, 0, 32px); background-color: @call-to-action; margin-right:29px; display:block; padding:0 5px 0 15px; color: white; } } } } .unseen_count { border: solid 2px; .one-border-radius(700px); padding: 3px; line-height: 16px; width: 16px; cursor: pointer; text-align: center; &#i_haz_notifications { background-color: @call-to-action; color: white; border-color: white; } &#no_notifications_for_you { border-color: @pale-blue; background-color: @pale-blue; color: @text-blue; } } } } #i_haz_notifications_badge { .one-border-radius(700px); font-size: @font-size-default; border: solid 2px white; margin-left: -7px; margin-top: -10px; padding: 3px; background: @call-to-action; color: white; position: absolute; line-height: normal; } form.login, #login form { label { display: block; line-height: 18px; } input { width: 90%; .one-border-radius(5px); border: 1px solid @blue-grey; .height(18px); margin-bottom: 6px; &[type=submit] { text-decoration: capitalize; .actionbuttons; } &:focus { border: solid 1px @call-to-action; } } input[type="text"], input[type="password"] { .height(@font-size-default*1.75); margin-bottom: @font-size-default; border-width: 2px; } input[type="submit"] { font-size: @font-size-larger; } span.helptext { display: block; margin-top: -11px; font-style: italic; font-size: @font-size-default; } } #lightbox_content .google_signup { .google_signup_div(36px); } .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; } #locationhash { /* used solely to contain template variables for tabs.js; should not display */ display: none; } /* 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: @font-size-default; 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; } /* Explore column */ #js-leftcol { float:left; width:235px; margin-bottom: 20px; a { font-weight:normal; &:hover{ text-decoration:underline; } } .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; &.jsmodule { background: none; } } .content-block-heading a.block-link { float:right; padding:15px; font-size: @font-size-default; 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: @font-size-default; border: thin @text-blue solid; font-weight: normal; margin: 5px; padding:1px; } .endless_page_current { font-size: @font-size-default; border: thin @text-blue solid; font-weight: normal; margin: 5px; padding:1px; background-color:@pale-blue; } } a.nounderline { text-decoration: none; } /* Without this the slideshow resizes to the wrong height when you click the controls */ .slides_control { height: 325px !important; } #about_expandable { display: none; .one-border-radius(5px); border: solid 5px @blue-grey; background: white; z-index: 500; top: 25%; padding: 9px; max-width: 90%; .collapser_x { margin-top: -27px; margin-right: -27px; } } #lightbox_content { p { padding: 9px 0; font-size: @font-size-larger; line-height: 20px; a { font-size: @font-size-larger; line-height: 20px; } b { color: @call-to-action; } &.last { border-bottom: solid 2px @blue-grey; margin-bottom: 5px; } } .right_border { border-right: solid 1px @blue-grey; float: left; padding: 9px; } .signuptoday { float: right; margin-top: 0; clear: none; } h2 + form, h3 + form, h4 + form { margin-top: 15px; } } // need to style /about/X pages such that they will not conflict with lightboxed About from header .nonlightbox .about_page { .one-border-radius(5px); border: solid 5px @blue-grey; width: 75%; margin: 10px auto auto auto; padding: 9px; } .collapser_x { float: right; .height(24px); width: 24px; .one-border-radius(24px); -moz-box-shadow: -1px 1px @text-blue; -webkit-box-shadow: -1px 1px @text-blue; box-shadow: -1px 1px @text-blue; border: solid 3px white; text-align: center; color: white; background: @text-blue; font-size: 17px; z-index:5000; margin-top: -12px; margin-right:-22px; } .signuptoday { a { background: url("/static/images/icons/pledgearrow-hover.png") right center no-repeat; padding-right: 17px; color: white; &:hover { text-decoration: none; } } .one-border-radius(32px); background-color: @call-to-action; padding:0 15px; .height(36px); float: left; clear: both; margin: 10px auto; cursor: pointer; font-style: normal; } .central { width: 480px; margin: 0 auto; } li.checked { list-style-type:none; background:transparent url(/static/images/checkmark_small.png) no-repeat 0 0; margin-left: -20px; padding-left: 20px; }