regluit/static/less/landingpage3.less

393 lines
7.3 KiB
Plaintext

@import "variables.less";
@import "learnmore.less";
#expandable {
display: none;
}
#main-container.main-container-fl .js-main {
width:968px;
background:#fff url("@{image-base}landingpage/container-top.png") top center no-repeat;
}
#js-maincol-fl {
padding:30px 30px 0 30px;
overflow:hidden;
#content-block {
background:none;
padding:0;
}
#js-main-container {
float: left;
width:672px;
}
.js-main-container-inner {
padding-right:40px;
}
h2.page-heading {
margin:0 0 20px 0;
color:@text-blue;
font-size: @font-size-header;
font-weight: bold;
}
}
#user-block {
width:100%;
clear:both;
}
#user-block1, .user-block2 {
float:left;
}
#user-block1 {
width:70%;
#block-intro-text {
float:left;
width:70%;
font-size: @font-size-header;
}
a#readon {
float: left;
font-size: @font-size-larger;
}
}
#js-rightcol, #js-rightcol2 {
float:right;
width:230px;
.jsmodule {
float: left;
width: 208px;
background:@pale-blue;
border:1px solid @blue-grey;
.one-border-radius(12px);
margin-bottom:10px;
padding: 0 10px 10px 10px;
&.last {
border-bottom:none;
padding-bottom:10px;
}
input {
.one-border-radius(32px);
border: none;
.height(36px);
width:90%;
outline: none;
padding-left: 16px;
}
input.signup {
background: url("@{image-base}landingpage/button.png") no-repeat 0 0;
//the following are part of what we need to move this from graphics to css
// which we will need if we institute a call-to-action color separately from green
//.border-radius(32px, 0, 0, 32px);
//background-color: @call-to-action;
border: medium none;
color: #FFF;
cursor: pointer;
display: inline-block;
font-weight: bold;
font-size: @font-size-default;
overflow: hidden;
padding: 0 31px 0 11px;
width: 111px;
}
}
div.button {
padding-top:10px;
}
label {
width:100%;
display:block;
clear:both;
padding:10px 0 5px 16px;
}
}
.google_signup {
.google_signup_div(24px);
}
.js-rightcol-padd {
padding:0;
}
h3.heading {
color:@text-blue;
font-weight:bold;
}
ul.ungluingwhat {
list-style: none;
padding:0;
margin:0 -10px;
li {
margin-bottom:7px;
background:#fff;
padding: 10px;
display:block;
overflow:hidden;
> span {
float: left;
}
}
.user-avatar {
width:43px;
img {
.one-border-radius(5px);
}
}
.user-book-info {
margin-left: 5px;
width: 160px;
word-wrap: break-word;
font-size: @font-size-larger;
line-height: @font-size-larger*1.3;
a {
font-weight: normal;
}
}
}
div.typo2 {
background:@pale-blue;
.one-border-radius(12px);
padding:10px;
font-style:italic;
}
div.signup_btn {
display:block;
overflow:hidden;
a {
background: url("@{image-base}bg.png") no-repeat scroll right top transparent;
color: #fff;
display: block;
font-size: @font-size-default;
font-weight: bold;
.height(36px);
letter-spacing: 1px;
text-decoration: none;
text-transform: capitalize;
float:left;
span {
background: url("@{image-base}bg.png") no-repeat scroll -770px -36px transparent;
display: block;
margin-right: 29px;
padding: 0 5px 0 15px;
}
}
}
.have-content-right-module {
.item-content {
float:left;
width:364px;
font-size: @font-size-larger;
height: 132px;
border-bottom:7px solid @bright-blue;
p {
margin-bottom:20px;
line-height:135%;
}
h2.page-heading {
padding-right:97px;
line-height:43px;
padding-bottom:4px;
padding-top: 5px;
}
}
.content-right-module {
width:268px;
float:right;
h3 {
color:@bright-blue;
text-transform:uppercase;
font-size:24px;
font-weight:normal;
padding:0;
margin:0 0 16px 0;
}
}
}
h2.page-heading {
color:#3c4e52;
font-size:28px !important;
font-style:italic;
font-weight:normal !important;
}
#js-maincontainer-faq {
clear: both;
overflow:hidden;
margin:15px 0;
width:100%;
}
.js-maincontainer-faq-inner {
float:right;
color:@text-blue;
font-size: @font-size-larger;
padding-right:60px;
a {
font-weight:normal;
color:@text-blue;
text-decoration:underline;
}
}
h3.module-title {
padding: 10px 0;
font-size: @font-size-header;
font-weight: normal;
}
.landingheader {
border-bottom: solid 5px @medium-blue;
float: left;
height:134px;
}
h3.featured_books {
clear: both;
font-weight: normal;
background: @pale-blue;
.border-radius(10px, 10px, 0, 0);
padding: 10px;
}
a.more_featured_books {
float: right;
width: 57px;
height: 305px;
margin: 5px 0;
border: 5px solid white;
background-image: url("/static/images/landingpage/signmeup-arrow-textblue.png");
background-repeat: no-repeat;
background-position: center;
&:hover {
background-image: url("/static/images/landingpage/signmeup-arrow-right.png");
cursor: pointer;
border-color: @pale-blue;
}
}
.spacer {
height: 15px;
width: 100%;
clear: both;
}
ul#as_seen_on {
margin: 15px 0;
position: relative;
height: 80px;
li {
float: left;
list-style-type: none;
padding: 10px;
line-height: 80px;
&:hover {
background: @bright-blue;
}
img {
vertical-align: middle;
max-width: 131px;
}
}
}
/* via http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
.speech_bubble {
position:relative;
margin:1em 0;
border:5px solid @medium-blue;
color:@text-blue;
.one-border-radius(10px);
background: #fff;
font-size: @font-size-header;
padding: 1.5em;
&:before {
content: "";
position: absolute;
top:-20px; /* value = - border-top-width - border-bottom-width */
bottom:auto;
left:auto;
right:60px; /* controls horizontal position */
border-width:0 20px 20px;
border-style: solid;
border-color: @medium-blue transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
&:after {
content: "";
position: absolute;
top:-13px; /* value = - border-top-width - border-bottom-width */
bottom:auto;
left:auto;
right:67px; /* value = (:before right) + (:before border-right) - (:after border-right) */
border-width:0 13px 13px;
border-style: solid;
border-color: #fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
span {
margin-left: 1em;
&:before {
position: absolute;
top: .75em;
left: .75em;
font-size: @font-size-header*2;
content:"\201C";
}
&:after {
position: absolute;
top: .75em;
font-size: @font-size-header*2;
content:"\201D";
}
}
}
#footer {
clear: both;
margin-top:30px;
}