<div id="login">
<form id="login_form">
<div class="field_container">
<input type="text" placeholder="Email Address">
</div>
<div class="field_container">
<input type="Password" placeholder="Password">
<button id="sign_in_button">
<span class="button_text">Sign In</span>
</button>
</div>
<div id="sign_in_options" class="field_container">
<div id="sign_in_alternatives_container">
<span id="google_sign_in_option">or you can <a href="#" id="google_sign_in" class="login_link">sign in with Google</a></span>
<span id="password_sign_in_option">or you can <a href="#" id="password_sign_in" class="login_link">sign in using a password</a></span>
</div>
<div id="remember_me_container">
<input name="user[remember_me]" type="hidden" value="0"><input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
<label class="login_link" for="user_remember_me" id="remember_me_label">stay signed in</label>
</div>
<div class="clearfix"></div>
</div>
</form><div id="chrome_web_store" style="opacity: 1;"><span id="chrome_logo"></span><h2>Using Google Chrome? <a id="chrome_ad_link" href="#">Get Login</a> for Chrome!</h2></div>
<div id="dont_have_an_account">
<h2>
Need to <a href="#" class="login_link">sign up</a> for an account
or <a href="#" id="forgot_password_link" class="login_link">reset</a> your password?
</h2>
</div>
</div>
button {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
font-family: inherit;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after { clear: both }
html { background-color: white }
body {
color: black;
font-family: "Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
font-size: 13px;
text-align: center;
}
input[type=text]:not(.basic),
input[type=tel]:not(.basic),
input[type=email]:not(.basic),
input[type=password]:not(.basic),
select:not(.basic),
textarea:not(.basic) {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #ccc;
display: inline-block;
font-size: 17px;
padding: 12px 16px;
width: 210px;
}
input[type=text]:focus:not(.basic),
input[type=tel]:focus:not(.basic),
input[type=email]:focus:not(.basic),
input[type=password]:focus:not(.basic),
select:focus:not(.basic),
textarea:focus:not(.basic) {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(89,222,44,0.4);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(89,222,44,0.4);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(89,222,44,0.4);
border-color: #59de2c;
outline: none;
}
input[type=text].error:not(.basic),
input[type=tel].error:not(.basic),
input[type=email].error:not(.basic),
input[type=password].error:not(.basic),
select.error:not(.basic),
textarea.error:not(.basic) { border-color: #f90 !important }
input[type=text].error:focus:not(.basic),
input[type=tel].error:focus:not(.basic),
input[type=email].error:focus:not(.basic),
input[type=password].error:focus:not(.basic),
select.error:focus:not(.basic),
textarea.error:focus:not(.basic) {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(255,153,0,0.4);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(255,153,0,0.4);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(255,153,0,0.4);
border-color: #f90;
}
body>#home section .section_title {
color: #f90;
font-size: 32px;
font-weight: 500;
}
body>#home section .section_subtitle {
color: #807b6e;
font-size: 18px;
font-weight: 500;
margin-top: 22px;
}
body>#home section .rounded_button {
border-radius: 500px;
-moz-border-radius: 500px;
-webkit-border-radius: 500px;
background-color: rgba(50,50,50,0.05);
background-repeat: repeat-x;
background-image: linear-gradient(225deg, rgba(50,50,50,0.01), rgba(50,50,50,0.05));
background-image: -moz-linear-gradient(225deg, rgba(50,50,50,0.01), rgba(50,50,50,0.05));
background-image: -ms-linear-gradient(225deg, rgba(50,50,50,0.01), rgba(50,50,50,0.05));
background-image: -o-linear-gradient(225deg, rgba(50,50,50,0.01), rgba(50,50,50,0.05));
background-image: -webkit-linear-gradient(225deg, rgba(50,50,50,0.01), rgba(50,50,50,0.05));
display: inline-block;
padding: 4px;
}
body>#home section .rounded_button:hover {
background-color: rgba(102,229,46,0.15);
background-repeat: repeat-x;
background-image: linear-gradient(225deg, rgba(102,229,46,0.07), rgba(102,229,46,0.15));
background-image: -moz-linear-gradient(225deg, rgba(102,229,46,0.07), rgba(102,229,46,0.15));
background-image: -ms-linear-gradient(225deg, rgba(102,229,46,0.07), rgba(102,229,46,0.15));
background-image: -o-linear-gradient(225deg, rgba(102,229,46,0.07), rgba(102,229,46,0.15));
background-image: -webkit-linear-gradient(225deg, rgba(102,229,46,0.07), rgba(102,229,46,0.15));
}
body>#home section .rounded_button:active { padding: 5px }
body>#home section .rounded_button:active span { padding: 6px 14px }
body>#home section .rounded_button span {
border-radius: 500px;
-moz-border-radius: 500px;
-webkit-border-radius: 500px;
background-color: #3baf16;
background-repeat: repeat-x;
background-image: linear-gradient(top, #66e52e, #3baf16);
background-image: -khtml-gradient(linear, left top, left bottom, from(#66e52e), to(#3baf16));
background-image: -moz-linear-gradient(top, #66e52e, #3baf16);
background-image: -ms-linear-gradient(top, #66e52e, #3baf16);
background-image: -o-linear-gradient(top, #66e52e, #3baf16);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66e52e), color-stop(100%, #3baf16));
background-image: -webkit-linear-gradient(top, #66e52e, #3baf16);
color: #fff;
display: inline-block;
font-size: 12px;
font-weight: bold;
padding: 7px 15px;
}
body>#home section .photo_container {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-position: -169px -1px;
background-repeat: no-repeat;
display: inline-block;
height: 100px;
padding: 8px;
width: 100px;
}
body>#home section .photo_container .photo {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-repeat: no-repeat;
display: inline-block;
height: 100px;
width: 100px;
}
body>#home section .quote {
color: #807b6e;
font-size: 23px;
font-weight: lighter;
line-height: 1.4em;
position: relative;
word-spacing: 1px;
}
body>#home section .quote .left_quote,
body>#home section .quote .right_quote {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-repeat: no-repeat;
display: inline-block;
height: 24px;
position: absolute;
top: 0;
width: 27px;
}
body>#home section .quote .left_quote {
background-position: -131px -39px;
left: 5px;
}
body>#home section .quote .right_quote {
background-position: -131px -64px;
right: 5px;
}
body>#home section .quote_attribution {
display: inline-block;
font-size: 14px;
}
body>#home section .quote_attribution b {
color: black;
display: inline-block;
font-weight: bold;
}
body>#home section .quote_attribution span {
color: #999488;
display: inline-block;
}
body>#home #main_section {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/main_section_background-3e25d942231ecfc538d700330e8192be.jpg);
background-position: center 15px;
background-repeat: no-repeat;
background-size: cover;
height: 433px;
position: relative;
}
body>#home #main_section>.positional {
margin: 0 auto;
position: relative;
width: 1071px;
}
body>#home #main_section>.positional #resource_swirl {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/resource_swirl-9fbfb13fdce897776158f38258f250de.png);
background-repeat: no-repeat;
height: 323px;
position: absolute;
left: 299px;
opacity: 0.68;
top: 15px;
width: 772px;
z-index: 1;
}
body>#home #main_section>.positional>.positional {
background-color: rgba(153,148,136,0);
background-repeat: repeat-x;
background-image: linear-gradient(top, rgba(153,148,136,0.35), rgba(153,148,136,0));
background-image: -khtml-gradient(linear, left top, left bottom, from(rgba(153,148,136,0.35)), to(rgba(153,148,136,0)));
background-image: -moz-linear-gradient(top, rgba(153,148,136,0.35), rgba(153,148,136,0));
background-image: -ms-linear-gradient(top, rgba(153,148,136,0.35), rgba(153,148,136,0));
background-image: -o-linear-gradient(top, rgba(153,148,136,0.35), rgba(153,148,136,0));
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(153,148,136,0.35)), color-stop(100%, rgba(153,148,136,0)));
background-image: -webkit-linear-gradient(top, rgba(153,148,136,0.35), rgba(153,148,136,0));
height: 368px;
padding: 65px 0 0;
width: 420px;
}
body>#home #main_section>.positional>.positional h1 {
color: #fff;
font-size: 36px;
font-weight: bold;
line-height: 50px;
text-shadow: 0 0 12px rgba(0,0,0,0.5);
}
body>#home #main_section>.positional>.positional #main_buttons {
margin: 40px 0 23px;
position: relative;
z-index: 2;
}
body>#home #main_section>.positional>.positional #main_buttons button {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgba(102,229,46,0.18);
cursor: pointer;
display: inline-block;
height: 56px;
padding: 5px;
vertical-align: top;
}
body>#home #main_section>.positional>.positional #main_buttons button:hover { background-color: rgba(102,229,46,0.3) }
body>#home #main_section>.positional>.positional #main_buttons button:active { padding: 6px }
body>#home #main_section>.positional>.positional #main_buttons button:active .button_text {
box-shadow: 0 0 8px rgba(0,0,0,0.35);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.35);
height: 44px;
padding: 0 16px;
}
body>#home #main_section>.positional>.positional #main_buttons button .button_text {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0 0 4px rgba(102,229,46,0.2);
-moz-box-shadow: 0 0 4px rgba(102,229,46,0.2);
-webkit-box-shadow: 0 0 4px rgba(102,229,46,0.2);
background-color: #3baf16;
background-repeat: repeat-x;
background-image: linear-gradient(top, #66e52e, #3baf16);
background-image: -khtml-gradient(linear, left top, left bottom, from(#66e52e), to(#3baf16));
background-image: -moz-linear-gradient(top, #66e52e, #3baf16);
background-image: -ms-linear-gradient(top, #66e52e, #3baf16);
background-image: -o-linear-gradient(top, #66e52e, #3baf16);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66e52e), color-stop(100%, #3baf16));
background-image: -webkit-linear-gradient(top, #66e52e, #3baf16);
color: #fff;
display: inline-block;
font-size: 18px;
font-weight: bold;
height: 46px;
line-height: 46px;
padding: 0 17px;
text-shadow: 0 0 3px #246b0d;
}
body>#home #main_section>.positional>.positional h3 {
height: 37px;
margin: 10px auto 0;
width: 127px;
}
body>#home #main_section>.positional>.positional h3>* {
display: inline-block;
line-height: 37px;
}
body>#home #main_section>.positional>.positional h3 b {
color: #A2EB83;
float: left;
font-size: 15px;
font-weight: bold;
}
body>#home #main_section>.positional>.positional h3 #learn_more {
color: #fff;
cursor: pointer;
float: right;
font-weight: 500;
font-size: 17px;
left: 11px;
position: relative;
}
body>#home #main_section>.positional>.positional h3 #learn_more:hover { opacity: 0.9 }
body>#home #main_section>.positional>.positional h3 #learn_more:hover span { opacity: 0.8 }
body>#home #main_section>.positional>.positional h3 #learn_more span {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-position: -131px -1px;
background-repeat: no-repeat;
display: inline-block;
height: 37px;
margin-left: -7px;
position: relative;
top: 1px;
width: 27px;
}
body>#home #main_section #light_bar {
background-color: rgba(255,255,255,0.25);
bottom: 0;
position: absolute;
height: 33px;
width: 100%;
z-index: 0;
}
body>#home #easy_section {
box-sizing: border-box;
-moz-box-sizing: border-box;
-wekbit-box-sizing: border-box;
height: 490px;
overflow: hidden;
padding: 0 10px;
position: relative;
margin: 0 auto;
width: 1071px;
}
body>#home #easy_section header {
float: right;
padding: 165px 0 0;
vertical-align: middle;
}
body>#home #easy_section header .rounded_button { margin-top: 45px }
body>#home #easy_section #screenshot {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
background-color: rgba(255,255,255,0.95);
background-repeat: no-repeat;
display: none;
height: 430px;
left: 6px;
position: absolute;
top: 30px;
width: 800px;
z-index: 3;
}
body>#home #easy_section #screenshots {
display: inline-block;
float: left;
padding: 140px 0 0;
}
body>#home #easy_section #screenshots li {
color: #807b6e;
display: inline-block;
vertical-align: top;
}
body>#home #easy_section #screenshots li:nth-child(2) { margin: 0 60px }
body>#home #easy_section #screenshots figure {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 0 7px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 7px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.25);
cursor: pointer;
margin: 0 0 24px;
height: 135px;
width: 220px;
}
body>#home #easy_section #screenshots figure:hover {
box-shadow: 0 0 8px rgba(0,0,0,0.45);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.45);
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.45);
}
body>#home #easy_section #screenshots #team_screenshot {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/screenshots/team-6c396e66857c2c665064fb48ecbac4ed.jpg);
background-position: -22px -163px;
background-repeat: no-repeat;
}
body>#home #easy_section #screenshots #tasks_screenshot {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/screenshots/tasks-a7ad851e7cdacc5985f6e05990d34fb5.jpg);
background-position: 0 -350px;
background-repeat: no-repeat;
}
body>#home #easy_section #screenshots #docs_screenshot {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/screenshots/docs-6091078182b895314acbec37d9644d8f.jpg);
background-position: -520px 0;
background-repeat: no-repeat;
}
body>#home #easy_section #screenshots p {
font-size: 16px;
line-height: 1.7em;
}
body>#home #connected_section {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/connected_section_background-f766f5eab5e641b914eaf5292010d397.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
height: 525px;
overflow-x: hidden;
position: relative;
z-index: 2;
}
body>#home #connected_section .positional {
height: 100%;
margin: 0 auto;
position: relative;
width: 1071px;
}
body>#home #connected_section .positional header {
float: left;
margin: 210px 0 0 81px;
position: relative;
z-index: 1;
}
body>#home #connected_section .positional header .section_subtitle { margin-top: 15px }
body>#home #connected_section .positional header .rounded_button { margin-top: 75px }
body>#home #connected_section .positional #hand_image {
background: url(https://d2umsx3twley6r.cloudfront.net/assets/website/hand_erasing-39780b43df6a71b001f599d6a796fe36.png);
background-repeat: no-repeat;
bottom: 0;
height: 386px;
position: absolute;
left: -180px;
width: 637px;
z-index: 0;
}
body>#home #connected_section .positional #services {
float: right;
margin: 230px 140px 0 0;
}
body>#home #connected_section .positional #services li {
display: inline-block;
margin: 0 12px;
position: relative;
}
body>#home #connected_section .positional #services li h4 {
color: #807b6e;
font-size: 22px;
font-weight: lighter;
position: absolute;
white-space: nowrap;
}
body>#home #connected_section .positional #services li .service_icon {
box-sizing: border-box;
-moz-box-sizing: border-box;
-wekbit-box-sizing: border-box;
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-repeat: no-repeat;
display: inline-block;
}
body>#home #connected_section .positional #services li .service_icon span {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-repeat: no-repeat;
display: inline-block;
}
body>#home #connected_section .positional #services li .service_dots {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-repeat: no-repeat;
display: inline-block;
height: 109px;
position: absolute;
width: 42px;
}
body>#home #connected_section .positional #services li#box_service { top: 7px }
body>#home #connected_section .positional #services li#box_service h4 {
left: -10px;
top: -99px;
}
body>#home #connected_section .positional #services li#box_service .service_icon {
background-position: -1px -189px;
height: 44px;
padding: 6px;
width: 44px;
}
body>#home #connected_section .positional #services li#box_service .service_icon span {
background-position: -63px -241px;
height: 32px;
width: 32px;
}
body>#home #connected_section .positional #services li#box_service .service_dots {
-o-transform: rotate(352deg);
-moz-transform: rotate(352deg);
-ms-transform: rotate(352deg);
-webkit-transform: rotate(352deg);
background-position: -231px -228px;
left: -59px;
top: -83px;
}
body>#home #connected_section .positional #services li#google_drive_service { top: 4px }
body>#home #connected_section .positional #services li#google_drive_service h4 {
left: 15px;
top: -109px;
}
body>#home #connected_section .positional #services li#google_drive_service .service_icon {
background-position: -1px -91px;
height: 52px;
padding: 6px;
width: 56px;
}
body>#home #connected_section .positional #services li#google_drive_service .service_icon span {
background-position: -58px -90px;
height: 40px;
width: 44px;
}
body>#home #connected_section .positional #services li#google_drive_service .service_dots {
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
background-position: -112px -118px;
left: -35px;
top: -95px;
}
body>#home #connected_section .positional #services li#dropbox_service h4 {
left: -123px;
top: 124px;
}
body>#home #connected_section .positional #services li#dropbox_service .service_icon {
background-position: -1px -234px;
height: 55px;
padding: 6px 7px;
width: 61px;
}
body>#home #connected_section .positional #services li#dropbox_service .service_icon span {
background-position: -63px -197px;
height: 43px;
width: 48px;
}
body>#home #connected_section .positional #services li#dropbox_service .service_dots {
-o-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-webkit-transform: rotate(220deg);
background-position: -155px -118px;
left: 9px;
top: 58px;
}
body>#home #connected_section .positional #services li#gmail_service { top: 7px }
body>#home #connected_section .positional #services li#gmail_service h4 {
left: 107px;
top: 118px;
}
body>#home #connected_section .positional #services li#gmail_service .service_icon {
background-position: -1px -143px;
height: 45px;
padding: 7px 6px;
width: 57px;
}
body>#home #connected_section .positional #services li#gmail_service .service_icon span {
background-position: -60px -131px;
height: 32px;
width: 45px;
}
body>#home #connected_section .positional #services li#gmail_service .service_dots {
-o-transform: rotate(320deg);
-moz-transform: rotate(320deg);
-ms-transform: rotate(320deg);
-webkit-transform: rotate(320deg);
background-position: -198px -118px;
left: 23px;
top: 54px;
}
body>#home #connected_section .positional #services li#google_calendar_service { top: 7px }
body>#home #connected_section .positional #services li#google_calendar_service h4 {
left: 10px;
top: -90px;
}
body>#home #connected_section .positional #services li#google_calendar_service .service_icon {
background-position: -1px -189px;
height: 44px;
padding: 6px;
width: 44px;
}
body>#home #connected_section .positional #services li#google_calendar_service .service_icon span {
background-position: -60px -164px;
height: 32px;
width: 32px;
}
body>#home #connected_section .positional #services li#google_calendar_service .service_dots {
-o-transform: rotate(210deg);
-moz-transform: rotate(210deg);
-ms-transform: rotate(210deg);
-webkit-transform: rotate(210deg);
background-position: -241px -118px;
left: 80px;
top: -56px;
}
body>#home #solid_section {
background: url(https://d2umsx3twley6r.cloudfront.net/assets/website/avatar_swirl-e25696afe186b0e959ca5efe88a8d0ab.jpg) 9% -700px repeat-y,url(https://d2umsx3twley6r.cloudfront.net/assets/website/avatar_swirl-e25696afe186b0e959ca5efe88a8d0ab.jpg) 89% -30px repeat-y;
padding: 70px 0 90px;
position: relative;
}
body>#home #solid_section hgroup,
body>#home #solid_section #testimonials { background-color: rgba(255,255,255,0.97) }
body>#home #solid_section hgroup {
box-shadow: 0 0 50px 50px rgba(255,255,255,0.98);
-moz-box-shadow: 0 0 50px 50px rgba(255,255,255,0.98);
-webkit-box-shadow: 0 0 50px 50px rgba(255,255,255,0.98);
display: inline-block;
margin: 0 auto;
padding: 20px 50px;
position: relative;
z-index: 1;
}
body>#home #solid_section .section_subtitle { line-height: 1.6em }
body>#home #solid_section #testimonials {
box-shadow: 0 0 150px 150px rgba(255,255,255,0.98);
-moz-box-shadow: 0 0 150px 150px rgba(255,255,255,0.98);
-webkit-box-shadow: 0 0 150px 150px rgba(255,255,255,0.98);
display: inline-block;
margin: 60px auto 0;
width: auto;
}
body>#home #solid_section #testimonials li {
overflow: hidden;
white-space: nowrap;
}
body>#home #solid_section #testimonials li:not(last-child) { margin: 0 0 35px }
body>#home #solid_section #testimonials li .photo_container,
body>#home #solid_section #testimonials li .positional { float: left }
body>#home #solid_section #testimonials li .positional {
margin-left: 25px;
text-align: left;
}
body>#home #solid_section #testimonials li .positional .quote { padding: 8px 46px 0 }
body>#home #solid_section #testimonials li .positional .quote_attribution {
margin: 17px 0 0;
padding: 0 0 0 46px;
}
body>#home #solid_section #testimonials li .positional .quote_attribution b { margin-right: 3px }
body>#home #solid_section #testimonials li#nasser_e .photo { background-position: -387px -304px }
body>#home #solid_section #testimonials li#seth_o .photo { background-position: -690px -203px }
body>#home #solid_section #testimonials li#immad_a .photo { background-position: -387px -405px }
body>#home #solid_section #testimonials li#eva_a .photo { background-position: -387px -1px }
body>#home #solid_section #testimonials li#nick_s .photo { background-position: -589px -304px }
body>#home #solid_section #testimonials li#paul_d .photo { background-position: -488px -1px }
body>#home #solid_section #button_container { display: block }
body>#home #solid_section #button_container .rounded_button {
clear: both;
margin: 30px auto 0;
}
body>#home #everyone_section {
background-color: #f5f3f0;
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/hill_background-4a90c16b6cc45e1d261b56da5fc65141.png);
background-position: bottom center;
background-repeat: no-repeat;
margin: 0 auto;
padding: 20px 0 30px;
position: relative;
}
body>#home #everyone_section .positional {
margin: 0 auto;
position: relative;
width: 1071px;
}
body>#home #everyone_section .positional .graphic {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-repeat: no-repeat;
position: absolute;
}
body>#home #everyone_section .positional .graphic#big_cloud {
background-position: -532px -506px;
height: 136px;
left: 10px;
opacity: 0.9;
top: 20px;
width: 258px;
z-index: 1;
}
body>#home #everyone_section .positional .graphic#small_cloud {
background-position: -1px -290px;
height: 92px;
left: 450px;
opacity: 0.75;
top: 190px;
width: 167px;
z-index: 1;
}
body>#home #everyone_section .positional hgroup {
margin: 0 auto;
padding: 40px 0 0;
position: relative;
z-index: 2;
}
body>#home #everyone_section .positional hgroup .rounded_button { margin-top: 35px }
body>#home #everyone_section .positional #use_cases {
font-size: 14px;
margin: 50px 0 0;
position: relative;
z-index: 2;
}
body>#home #everyone_section .positional #use_cases li {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-wekbit-box-sizing: border-box;
background-color: rgba(255,255,255,0.35);
color: #807b6e;
display: inline-block;
margin: 0 25px 30px;
padding: 20px 0;
vertical-align: top;
width: 267px;
}
body>#home #everyone_section .positional #use_cases h4 {
color: #57534b;
font-size: 16px;
font-weight: bold;
margin: 0 0 12px;
}
body>#home #everyone_section .positional #use_cases p {
display: inline-block;
line-height: 1.5em;
}
body>#home #signup_section {
border-top: 8px solid #f90;
margin: 0 auto;
padding: 175px 0 150px;
}
body>#home #signup_section hgroup .section_title {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-position: -1px -1px;
display: block;
height: 41px;
margin: 0 auto;
text-indent: -9000px;
width: 129px;
}
body>#home #signup_section hgroup .section_subtitle {
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
background-color: #fff;
display: inline-block;
font-size: 22px;
font-weight: normal;
margin: 0 auto;
padding: 0 15px;
position: relative;
top: 100px;
z-index: 1;
}
body>#pricing {
border-top: 8px solid #f90;
font-size: 15px;
margin: 0 auto;
padding: 40px 0 50px;
width: 100%;
}
body>#pricing h1 {
margin: 0 auto;
width: 130px;
}
body>#pricing h1 a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-position: -2px -2px;
border: 2px solid transparent;
display: block;
height: 41px;
text-indent: -9000px;
}
body>#pricing h1 a:hover {
box-shadow: 0 0 0 1px #f90;
-moz-box-shadow: 0 0 0 1px #f90;
-webkit-box-shadow: 0 0 0 1px #f90;
background-color: #f90;
background-position: -2px -47px;
border-color: #ffffff;
}
body>#pricing h2 {
background-color: #fff;
color: #807b6e;
font-size: 22px;
font-weight: normal;
padding: 0 15px;
}
body>#pricing #new_pricing_blurb { margin: 40px auto 0 }
body>#pricing #new_pricing_blurb span {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 5px solid #F5F3F0;
color: #807b6e;
display: inline-block;
font-size: 16px;
padding: 9px 12px;
}
body>#pricing #new_pricing_blurb a {
color: #f90;
font-weight: 500;
}
body>#pricing #new_pricing_blurb a:hover { text-decoration: underline }
body>#pricing #plans {
display: inline-block;
margin: 25px auto 0;
}
body>#pricing #plans .plan {
float: left;
margin: 55px 0 0;
width: auto;
}
body>#pricing #plans .plan:hover>.positional { background-color: rgba(245,243,240,0.5) }
body>#pricing #plans .plan:hover>.positional ul { color: #57534b }
body>#pricing #plans .plan:hover .feature_list { color: #57534b }
body>#pricing #plans .plan:hover .feature_list h4 { color: #3b3933 }
body>#pricing #plans .plan>.positional { border: 8px solid #F5F3F0 }
body>#pricing #plans .plan>.positional h3 {
color: #fff;
font-size: 22px;
font-weight: bold;
padding: 30px;
}
body>#pricing #plans .plan>.positional ul {
border-top: 4px solid #F5F3F0;
color: #807b6e;
margin: 0 30px;
padding: 10px 0;
}
body>#pricing #plans .plan>.positional ul li { margin: 20px 0 }
body>#pricing #plans .plan>.positional ul li h4 {
font-weight: bold;
display: inline-block;
}
body>#pricing #plans .plan>.positional .price {
font-size: 36px;
font-weight: 500;
padding: 0 0 30px;
}
body>#pricing #plans .plan>.positional .price small { font-size: 14px }
body>#pricing #plans .plan.business_plan {
margin-right: 10px;
position: relative;
top: 25px;
width: 250px;
}
body>#pricing #plans .plan.business_plan>.positional {
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-right: 0 none;
}
body>#pricing #plans .plan.business_plan>.positional .colored { color: #dc0000 }
body>#pricing #plans .plan.professional_plan>.positional {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 270px;
}
body>#pricing #plans .plan.professional_plan>.positional h3 { padding: 35px }
body>#pricing #plans .plan.professional_plan>.positional .colored { color: #57cc2c }
body>#pricing #plans .plan.professional_plan>.positional ul { padding: 15px 0 20px }
body>#pricing #plans .plan.professional_plan>.positional ul li { margin: 22px 0 }
body>#pricing #plans .plan.professional_plan>.positional .price {
font-size: 40px;
padding: 0 0 45px;
}
body>#pricing #plans .plan.standard_plan {
margin-left: 10px;
position: relative;
top: 25px;
width: 250px;
}
body>#pricing #plans .plan.standard_plan>.positional {
border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-left: 0 none;
}
body>#pricing #plans .plan.standard_plan>.positional .colored { color: #0A8DD9 }
body>#pricing #plans .plan .feature_list {
color: #807b6e;
padding: 30px 10px 0;
}
body>#pricing #plans .plan .feature_list h4 {
color: #726e62;
display: inline-block;
font-weight: bold;
}
body>#pricing #plans .plan .feature_list p { margin: 15px 0 30px }
body>#pricing #explanation {
background-color: rgba(245,243,240,0.5);
border-bottom: 8px solid #F5F3F0;
border-top: 8px solid #F5F3F0;
color: #656056;
font-size: 17px;
font-weight: 500;
margin: 100px auto 140px;
padding: 40px 0;
}
body>#pricing #explanation ul li {
display: inline-block;
line-height: 1.9em;
padding: 0 20px;
vertical-align: top;
width: 250px;
}
body>#pricing #explanation ul li b {
color: #49463f;
font-weight: bold;
}
body>#pricing #signup {
margin: -100px 0 0;
position: relative;
}
body>#pricing #signup h2 {
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
background-color: #fff;
color: #807b6e;
display: inline-block;
font-size: 22px;
font-weight: normal;
margin: 0 auto;
padding: 0 15px;
position: relative;
top: 100px;
z-index: 1;
}
body>#pricing_2 {
border-top: 8px solid #f90;
font-size: 15px;
margin: 0 auto;
padding: 40px 0 50px;
width: 100%;
}
body>#pricing_2 h1 {
margin: 0 auto;
width: 130px;
}
body>#pricing_2 h1 a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-position: -2px -2px;
border: 2px solid transparent;
display: block;
height: 41px;
text-indent: -9000px;
}
body>#pricing_2 h1 a:hover {
box-shadow: 0 0 0 1px #f90;
-moz-box-shadow: 0 0 0 1px #f90;
-webkit-box-shadow: 0 0 0 1px #f90;
background-color: #f90;
background-position: -2px -47px;
border-color: #ffffff;
}
body>#pricing_2 #plans {
display: inline-block;
margin: 50px auto 0;
white-space: nowrap;
}
body>#pricing_2 #plans .plan {
border: 8px solid #F5F3F0;
float: left;
padding: 20px 15px;
}
body>#pricing_2 #plans .plan:hover { background-color: rgba(245,243,240,0.5) }
body>#pricing_2 #plans .plan#starter_plan {
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-right: 0 none;
margin: 10px 10px 0 150px;
width: 210px;
}
body>#pricing_2 #plans .plan#starter_plan .price { font-size: 22px }
body>#pricing_2 #plans .plan#starter_plan .colored { color: #8d887a }
body>#pricing_2 #plans .plan#business_plan {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-color: #efedea;
margin: 0 110px 0 0;
padding: 30px 15px;
width: 250px;
}
body>#pricing_2 #plans .plan#business_plan .colored { color: #0A8DD9 }
body>#pricing_2 #plans .plan h2 {
font-size: 22px;
font-weight: bold;
padding: 0 0 20px;
}
body>#pricing_2 #plans .plan p {
color: #807b6e;
font-size: 14px;
line-height: 1.6em;
}
body>#pricing_2 #plans .plan .price {
font-size: 36px;
font-weight: 500;
line-height: 36px;
margin: 15px 0 0;
}
body>#pricing_2 #plans .plan .price small { font-size: 14px }
body>#pricing_2 #plans #feature_comparison {
color: #656056;
margin: 20px 110px 0 0;
}
body>#pricing_2 #plans #feature_comparison li {
overflow: hidden;
padding: 0;
}
body>#pricing_2 #plans #feature_comparison li:hover div {
background-color: rgba(245,243,240,0.75);
border-bottom: 2px solid white !important;
}
body>#pricing_2 #plans #feature_comparison li div {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
cursor: default;
float: left;
font-size: 15px;
padding: 15px 0;
white-space: nowrap;
}
body>#pricing_2 #plans #feature_comparison li div:nth-child(1) {
color: #807b6e;
font-size: 14px;
margin-right: 10px;
padding-right: 10px;
text-align: right;
width: 130px;
}
body>#pricing_2 #plans #feature_comparison li div:nth-child(2) {
border-bottom: 2px dotted #F5F3F0;
margin-right: 10px;
width: 248px;
}
body>#pricing_2 #plans #feature_comparison li div:nth-child(3) {
border-bottom: 2px dotted #F5F3F0;
font-weight: 500;
width: 296px;
}
body>#pricing_2 #explanation {
background-color: rgba(245,243,240,0.5);
border-bottom: 8px solid #F5F3F0;
border-top: 8px solid #F5F3F0;
color: #656056;
font-size: 15px;
font-weight: 500;
margin: 75px auto 140px;
padding: 40px 0;
}
body>#pricing_2 #explanation ul li {
display: inline-block;
line-height: 1.9em;
padding: 0 20px;
vertical-align: top;
width: 250px;
}
body>#pricing_2 #explanation ul li b {
color: #49463f;
font-weight: bold;
}
body>#pricing_2 #signup {
margin: -125px 0 0;
position: relative;
}
body>#pricing_2 #signup h2 {
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
background-color: #fff;
color: #807b6e;
display: inline-block;
font-size: 22px;
font-weight: normal;
margin: 0 auto;
padding: 0 15px;
position: relative;
top: 100px;
z-index: 1;
}
body>#survey {
border-top: 8px solid #f90;
font-size: 15px;
margin: 0 auto;
padding: 40px 0 50px;
width: 100%;
}
body>#survey h1 {
margin: 0 auto;
width: 130px;
}
body>#survey h1 a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-position: -2px -2px;
border: 2px solid transparent;
display: block;
height: 41px;
text-indent: -9000px;
}
body>#survey h1 a:hover {
box-shadow: 0 0 0 1px #f90;
-moz-box-shadow: 0 0 0 1px #f90;
-webkit-box-shadow: 0 0 0 1px #f90;
background-color: #f90;
background-position: -2px -47px;
border-color: #ffffff;
}
body>#survey h2 {
background-color: #fff;
color: #807b6e;
font-size: 22px;
font-weight: normal;
margin: 25px auto 0;
padding: 0 15px;
}
body>#survey form {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 8px solid #F5F3F0;
margin: 45px auto 0;
text-align: left;
width: 440px;
}
body>#survey form .form_section { padding: 20px }
body>#survey form .form_section:first-child { padding-top: 30px }
body>#survey form .form_section:last-child {
margin-bottom: 0;
padding-bottom: 30px;
}
body>#survey form .form_section.selected { background-color: #F5F3F0 }
body>#survey form .form_section.selected label { color: #000 }
body>#survey form label {
color: #57534b;
display: block;
font-size: 14px;
margin: 0 0 12px;
}
body>#survey form select {
font-size: 13px;
width: auto;
}
body>#survey form input[type=text],
body>#survey form input[type=tel],
body>#survey form textarea {
font-size: 13px;
margin: 0;
padding: 5px 8px;
width: 322px;
}
body>#survey form input[type=text].explanation,
body>#survey form input[type=tel].explanation,
body>#survey form textarea.explanation {
margin: 0 0 0 10px;
width: 200px;
}
body>#survey form input[type=text]:focus:not(.basic),
body>#survey form input[type=tel]:focus:not(.basic),
body>#survey form input[type=email]:focus:not(.basic),
body>#survey form input[type=password]:focus:not(.basic),
body>#survey form select:focus:not(.basic),
body>#survey form textarea:focus:not(.basic) {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(255,153,0,0.4);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(255,153,0,0.4);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(255,153,0,0.4);
border-color: #f90;
}
body>#survey form button {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgba(102,229,46,0.1);
cursor: pointer;
height: 56px;
padding: 5px;
width: auto;
}
body>#survey form button:hover { background-color: rgba(102,229,46,0.18) }
body>#survey form button:active { padding: 5px }
body>#survey form button:active .button_text {
box-shadow: 0 0 8px rgba(102,229,46,0.07);
-moz-box-shadow: 0 0 8px rgba(102,229,46,0.07);
-webkit-box-shadow: 0 0 8px rgba(102,229,46,0.07);
background-color: #4bbe18;
background-repeat: repeat-x;
background-image: linear-gradient(top, #4adc1c, #4bbe18);
background-image: -khtml-gradient(linear, left top, left bottom, from(#4adc1c), to(#4bbe18));
background-image: -moz-linear-gradient(top, #4adc1c, #4bbe18);
background-image: -ms-linear-gradient(top, #4adc1c, #4bbe18);
background-image: -o-linear-gradient(top, #4adc1c, #4bbe18);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4adc1c), color-stop(100%, #4bbe18));
background-image: -webkit-linear-gradient(top, #4adc1c, #4bbe18);
height: 46px;
width: auto;
}
body>#survey form button .button_text {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0 0 4px rgba(102,229,46,0.2);
-moz-box-shadow: 0 0 4px rgba(102,229,46,0.2);
-webkit-box-shadow: 0 0 4px rgba(102,229,46,0.2);
background-color: #3baf16;
background-repeat: repeat-x;
background-image: linear-gradient(top, #66e52e, #3baf16);
background-image: -khtml-gradient(linear, left top, left bottom, from(#66e52e), to(#3baf16));
background-image: -moz-linear-gradient(top, #66e52e, #3baf16);
background-image: -ms-linear-gradient(top, #66e52e, #3baf16);
background-image: -o-linear-gradient(top, #66e52e, #3baf16);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66e52e), color-stop(100%, #3baf16));
background-image: -webkit-linear-gradient(top, #66e52e, #3baf16);
color: #fff;
display: inline-block;
font-size: 18px;
font-weight: bold;
height: 46px;
line-height: 46px;
padding: 0 25px;
text-shadow: 0 0 3px #246b0d;
width: auto;
}
body>#signup {
border-top: 8px solid #f90;
margin: 0 auto;
padding: 90px 0 0;
width: 100%;
}
body>#signup h1 {
margin: 0 auto;
width: 130px;
}
body>#signup h1 a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-position: -2px -2px;
border: 2px solid transparent;
display: block;
height: 41px;
text-indent: -9000px;
}
body>#signup h1 a:hover {
box-shadow: 0 0 0 1px #f90;
-moz-box-shadow: 0 0 0 1px #f90;
-webkit-box-shadow: 0 0 0 1px #f90;
background-color: #f90;
background-position: -2px -47px;
border-color: #ffffff;
}
body>#signup h2 {
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
background-color: #fff;
color: #807b6e;
display: inline-block;
font-size: 22px;
font-weight: normal;
margin: 0 auto;
padding: 0 15px;
position: relative;
top: 88px;
z-index: 1;
}
body>#signup #signup_form { margin-top: 75px }
body>#signup #key_benefits {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 170px;
margin: 135px auto 0;
overflow: hidden;
width: 810px;
}
body>#signup #key_benefits .benefit_block {
float: left;
height: 110px;
padding: 30px 20px;
width: 230px;
}
body>#signup #key_benefits .benefit_block#workflow_benefit { background-color: #f1eeea }
body>#signup #key_benefits .benefit_block#workflow_benefit:hover {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/screenshots/team-6c396e66857c2c665064fb48ecbac4ed.jpg);
background-position: -192px -140px;
background-size: 500px 375px;
}
body>#signup #key_benefits .benefit_block#people_benefit { background-color: #e9e4de }
body>#signup #key_benefits .benefit_block#people_benefit:hover {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/tour/discussions-549dc1d90188db5e123c0d8848305735.png);
background-position: 13px -100px;
}
body>#signup #key_benefits .benefit_block#integrations_benefit { background-color: #f7f5f3 }
body>#signup #key_benefits .benefit_block#integrations_benefit:hover {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/tour/integrations-add87aabfddb312fe11fedd654933a4c.png);
background-position: -300px -147px;
}
body>#signup #key_benefits .benefit_block:hover {
border: 4px solid #ede9e4;
padding: 26px 16px;
}
body>#signup #key_benefits .benefit_block:hover h3,
body>#signup #key_benefits .benefit_block:hover p {
color: transparent;
text-indent: -9000px;
}
body>#signup #key_benefits h3 {
color: #49463f;
font-size: 15px;
font-weight: 500;
margin: 0 0 22px;
}
body>#signup #key_benefits p {
color: #656056;
font-size: 14px;
line-height: 1.6em;
}
#signup_form {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-wekbit-box-sizing: border-box;
border: 8px solid #F5F3F0;
margin: 87px auto 0;
padding: 80px 0 65px;
position: relative;
width: 1071px;
z-index: 0;
}
#signup_form.locked input,
#signup_form.locked button { opacity: 0.6 }
#signup_form.locked button { cursor: default }
#signup_form.locked button:hover,
#signup_form.locked button:active { background-color: rgba(102,229,46,0.1) }
#signup_form #signup_errors {
color: #f90;
display: block;
font-size: 15px;
font-weight: 500;
margin: 0 0 50px;
}
#signup_form input {
border-color: #F5F3F0;
border-style: solid;
border-width: 4px;
display: inline-block;
margin: 0 15px 0 0;
position: relative;
}
#signup_form input:focus {
border-color: #59de2c;
border-width: 2px;
padding: 14px 18px;
}
#signup_form input#signup_full_name_field { width: 205px }
#signup_form input#signup_email_field { width: 260px }
#signup_form input#signup_password_field { width: 185px }
#signup_form input.error {
border-width: 2px;
padding: 14px 18px;
}
#signup_form label {
color: #807b6e;
font-size: 15px;
margin: -20px 0 0 1px;
position: absolute;
z-index: 1;
}
#signup_form .error_message {
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
background-color: #f90;
color: white;
display: inline-block;
margin-top: 53px;
padding: 10px 16px;
position: absolute;
z-index: 1;
}
#signup_form .error_message#full_name_error { margin-left: -264px }
#signup_form .error_message#email_error { margin-left: -319px }
#signup_form .error_message#password_error { margin-left: -244px }
#signup_form button {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgba(102,229,46,0.1);
cursor: pointer;
height: 56px;
margin-left: 15px;
padding: 5px;
width: auto;
}
#signup_form button:hover { background-color: rgba(102,229,46,0.18) }
#signup_form button:active { padding: 5px }
#signup_form button:active .button_text {
box-shadow: 0 0 8px rgba(102,229,46,0.07);
-moz-box-shadow: 0 0 8px rgba(102,229,46,0.07);
-webkit-box-shadow: 0 0 8px rgba(102,229,46,0.07);
background-color: #4bbe18;
background-repeat: repeat-x;
background-image: linear-gradient(top, #4adc1c, #4bbe18);
background-image: -khtml-gradient(linear, left top, left bottom, from(#4adc1c), to(#4bbe18));
background-image: -moz-linear-gradient(top, #4adc1c, #4bbe18);
background-image: -ms-linear-gradient(top, #4adc1c, #4bbe18);
background-image: -o-linear-gradient(top, #4adc1c, #4bbe18);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4adc1c), color-stop(100%, #4bbe18));
background-image: -webkit-linear-gradient(top, #4adc1c, #4bbe18);
height: 46px;
width: auto;
}
#signup_form button .button_text {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0 0 4px rgba(102,229,46,0.2);
-moz-box-shadow: 0 0 4px rgba(102,229,46,0.2);
-webkit-box-shadow: 0 0 4px rgba(102,229,46,0.2);
background-color: #3baf16;
background-repeat: repeat-x;
background-image: linear-gradient(top, #66e52e, #3baf16);
background-image: -khtml-gradient(linear, left top, left bottom, from(#66e52e), to(#3baf16));
background-image: -moz-linear-gradient(top, #66e52e, #3baf16);
background-image: -ms-linear-gradient(top, #66e52e, #3baf16);
background-image: -o-linear-gradient(top, #66e52e, #3baf16);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66e52e), color-stop(100%, #3baf16));
background-image: -webkit-linear-gradient(top, #66e52e, #3baf16);
color: #fff;
display: inline-block;
font-size: 18px;
font-weight: bold;
height: 46px;
line-height: 46px;
padding: 0 25px;
text-shadow: 0 0 3px #246b0d;
width: auto;
}
#signup_form .switch_signup_method {
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
background-color: #fff;
color: #999488;
display: inline-block;
font-size: 15px;
margin: 0 auto;
padding: 0 12px;
position: relative;
top: 76px;
white-space: nowrap;
}
#signup_form .switch_signup_method#password_signup { display: none }
#signup_form .switch_signup_method .alt_signup_link {
color: #807b6e;
cursor: pointer;
font-weight: 500;
}
#signup_form .switch_signup_method .alt_signup_link:hover { color: #f90 }
#signup_form .switch_signup_method#google_signup #google_signup_icon {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-position: -228px -414px;
display: inline-block;
height: 15px;
margin: 0 6px 0 0;
position: relative;
top: 2px;
width: 21px;
}
#signup_form .switch_signup_method#google_signup .alt_signup_link:hover { color: #e73122 }
body>#login {
border-top: 8px solid #f90;
margin: 0 auto;
padding: 30px 0 0;
width: 100%;
}
body>#login h1 {
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
background-color: #fff;
display: inline-block;
margin: 0 auto;
position: relative;
top: 52px;
width: 130px;
z-index: 1;
}
body>#login h1:not(.subdomain_image):not(.subdomain) a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-position: -2px -2px;
border: 2px solid transparent;
display: block;
height: 41px;
text-indent: -9000px;
}
body>#login h1:not(.subdomain_image):not(.subdomain) a:hover {
box-shadow: 0 0 0 1px #f90;
-moz-box-shadow: 0 0 0 1px #f90;
-webkit-box-shadow: 0 0 0 1px #f90;
background-color: #f90;
background-position: -2px -47px;
border-color: #ffffff;
}
body>#login h1.subdomain {
max-width: 400px;
text-overflow: hidden;
top: 41px;
white-space: nowrap;
width: auto;
}
body>#login h1.subdomain a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-block;
font-size: 24px;
font-weight: 500;
padding: 0 15px;
}
body>#login h1.subdomain_image {
top: 55px;
width: auto;
}
body>#login h1.subdomain_image a,
body>#login h1.subdomain_image img {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-block;
height: 43px;
}
body>#login h1.subdomain_image a { padding: 4px 0 }
body>#login form {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-wekbit-box-sizing: border-box;
border: 8px solid #F5F3F0;
display: inline-block;
margin: 27px auto 0;
padding: 60px 50px 45px;
position: relative;
z-index: 0;
}
body>#login form .form_errors {
color: #f90;
display: block;
font-size: 15px;
font-weight: 500;
margin: 0 0 40px;
}
body>#login form .field_container {
margin: 0 auto 12px;
text-align: left;
width: auto;
}
body>#login form .field_container:last-child { margin-bottom: 0 }
body>#login form button {
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
background-color: #f6f6f6;
cursor: pointer;
margin-left: 12px;
height: 56px;
padding: 5px;
width: auto;
}
body>#login form button:hover { background-color: #f8f8f8 }
body>#login form button:active { padding: 5px }
body>#login form button:active .button_text {
box-shadow: 0 0 8px #ccc;
-moz-box-shadow: 0 0 8px #ccc;
-webkit-box-shadow: 0 0 8px #ccc;
background-color: #f6f6f6;
background-repeat: repeat-x;
background-image: linear-gradient(top, #f6f6f6, #f6f6f6);
background-image: -khtml-gradient(linear, left top, left bottom, from(#f6f6f6), to(#f6f6f6));
background-image: -moz-linear-gradient(top, #f6f6f6, #f6f6f6);
background-image: -ms-linear-gradient(top, #f6f6f6, #f6f6f6);
background-image: -o-linear-gradient(top, #f6f6f6, #f6f6f6);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #f6f6f6));
background-image: -webkit-linear-gradient(top, #f6f6f6, #f6f6f6);
height: 46px;
width: auto;
}
body>#login form button #google_openid_icon {
background-image: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png);
background-position: -211px -414px;
display: inline-block;
height: 15px;
margin-right: 3px;
position: relative;
top: -2px;
vertical-align: middle;
width: 16px;
}
body>#login form button .button_text {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2);
background-color: #f0f0f0;
background-repeat: repeat-x;
background-image: linear-gradient(top, #fafafa, #f0f0f0);
background-image: -khtml-gradient(linear, left top, left bottom, from(#fafafa), to(#f0f0f0));
background-image: -moz-linear-gradient(top, #fafafa, #f0f0f0);
background-image: -ms-linear-gradient(top, #fafafa, #f0f0f0);
background-image: -o-linear-gradient(top, #fafafa, #f0f0f0);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #f0f0f0));
background-image: -webkit-linear-gradient(top, #fafafa, #f0f0f0);
color: #807b6e;
display: inline-block;
font-size: 16px;
font-weight: 500;
height: 46px;
line-height: 46px;
padding: 0 25px;
text-shadow: 1px 1px 0 #fff;
width: auto;
}
body>#login form input[type=text],
body>#login form input[type=email],
body>#login form input[type=password] {
border-color: #F5F3F0;
border-style: solid;
border-width: 4px;
display: inline-block;
position: relative;
}
body>#login form input[type=text]:focus,
body>#login form input[type=email]:focus,
body>#login form input[type=password]:focus {
border-color: #59de2c;
border-width: 2px;
padding: 14px 18px;
}
body>#login form input[type=text].error,
body>#login form input[type=email].error,
body>#login form input[type=password].error {
border-width: 2px;
padding: 14px 18px;
}
body>#login form input[type=text][disabled],
body>#login form input[type=email][disabled],
body>#login form input[type=password][disabled] {
background-color: #F5F3F0;
color: #999488;
}
body>#login form .login_link {
color: #807b6e;
font-size: 13px;
font-weight: 500;
}
body>#login form .login_link:hover { color: #f90 }
body>#login form#login_form input[type=text],
body>#login form#login_form input[type=email],
body>#login form#login_form input[type=password] { width: 290px }
body>#login form#login_form #google_sign_in_button { display: none }
body>#login form#login_form #sign_in_options {
color: #999488;
font-size: 13px;
padding: 30px 0 0;
}
body>#login form#login_form #sign_in_options #sign_in_alternatives_container {
float: left;
width: 290px;
}
body>#login form#login_form #sign_in_options #sign_in_alternatives_container a { margin-left: 4px }
body>#login form#login_form #sign_in_options #sign_in_alternatives_container #password_sign_in_option { display: none }
body>#login form#login_form #sign_in_options #remember_me_container {
color: #807b6e;
float: right;
font-weight: 500;
margin-right: 5px;
}
body>#login form#login_form #sign_in_options #remember_me_container input[type="checkbox"] {
cursor: pointer;
margin-right: 3px;
}
body>#login form#login_form #sign_in_options #remember_me_container label {
cursor: pointer;
display: inline-block;
}
body>#login form#forgot_password input[type=text],
body>#login form#forgot_password input[type=email],
body>#login form#forgot_password input[type=password],
body>#login form#change_password input[type=text],
body>#login form#change_password input[type=email],
body>#login form#change_password input[type=password] { width: 290px }
body>#login form#forgot_password .field_container:last-child,
body>#login form#change_password .field_container:last-child { padding-top: 12px }
body>#login form#forgot_password button,
body>#login form#change_password button {
float: left;
margin: 0 auto;
}
body>#login form#forgot_password #back_to_login,
body>#login form#change_password #back_to_login {
float: right;
font-weight: 500;
line-height: 58px;
margin-left: 15px;
}
body>#login #chrome_web_store {
margin: 20px 0 0;
position: relative;
top: 32px;
}
body>#login #chrome_web_store #chrome_logo {
background: url(https://d2umsx3twley6r.cloudfront.net/assets/website/sprites-57e14dd7782dcbfa62637adc0ad5dba7.png) -1px -383px;
display: inline-block;
height: 61px;
margin: 0 15px 0 0;
vertical-align: middle;
width: 61px;
}
body>#login #chrome_web_store h2 {
color: #807b6e;
display: inline-block;
font-size: 14px;
vertical-align: middle;
}
body>#login #chrome_web_store a {
color: #f90;
border-bottom: 2px solid transparent;
display: inline-block;
font-size: inherit;
font-weight: 500;
padding-bottom: 2px;
}
body>#login #chrome_web_store a:hover { border-bottom: 2px solid #f90 }
body>#login #dont_have_an_account { margin: 80px 0 }
body>#login #dont_have_an_account h2 {
color: #807b6e;
font-size: 14px;
margin: 0 0 35px;
}
body>#login #dont_have_an_account a {
color: #f90;
border-bottom: 2px solid transparent;
display: inline-block;
font-size: inherit;
font-weight: 500;
padding-bottom: 2px;
}
body>#login #dont_have_an_account a:hover { border-bottom: 2px solid #f90 }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.