@charset "UTF-8";
/*  CSS For squace landing pages.
    Also uses blueprint reset typography and forms
*/

button::-moz-focus-inner { border: 0; } /*Remvoed dotted borders around buttons*/
input[type=submit]::-moz-focus-inner { border: 0; } /*Remvoed dotted borders around buttons*/

body {
  font-size: 14px;
  color: #666
}
.container { 
  font-size: 18px;
}
/*Tools */
/*
  Ellipsis for ... 
   http://www.electrictoolbox.com/ellipsis-html-css/ 
   http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/
   jquery.text-overflow.js
 */
.ellipsis { 
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
/* font */
body, h2, a, a:active, a:visited { 
  color: #666;
}
a:hover {
  color: #d68131;
}
a:active, a:focus {
	outline: none;
}
.link-heading { 
 font-size: 20px; 
}
.link-title, .bookmark-title { 
  color: #d68131;
  font-weight: bold;
  height:30px;
}
/* Page */
.container { 
  width: 414px;
  margin: 0 auto;
}
.section { 
  width: 414px;
  float: left;
}
.inside { 
  margin: 15px;
  margin-top: 6px;
}
.y-sep { 
  height: 12px;
  clear: both;
}
/* Background */
body { 
  background-color: #1d4872;
  background-image: url(/images/landingpage/background-1x721.png);
  background-repeat: repeat-x;
}
.box { 
  background-color: #ffffff;
  -moz-border-radius: 10px; /*For IE: http://gist.github.com/77516 */
  -ie-border-radius: 10px;
  border-radius: 10px; 
  -webkit-border-radius: 10px;
}
/* Header */
#header { 
  margin-top: 20px;
  height: 51px;
  background-image: url(../../images/landing-page-title.png);
}
.header-logo { 
  float: left;
  width: 200px;
}
.header-logo img { 
  margin-top: 3px;
}

#signed-in-section {
  margin-top: 0;
}
.signed-in { 
  float: right;
  width: 160px;
  text-align: right;
  font-size: 12px;
  line-height: 14px;
  margin-top: -1px;
}
a.signed-in:hover { 
  cursor: pointer;
  color: #d68131;
}
.signed-in-name { 
  font-weight: bold;
}
a.signed-in-name {
  text-decoration: none;
}
#landing-page-no-auth #login-button { 
  margin-top: 5px;
  float: right;
}
/* Top */
#top {
  background-image: url(/images/landingpage/top-pic-414x145.png);
  height: 145px;
}
.error-bubble { 
  background-image: url(/images/landingpage/error-bubble-414x145.png);
  height: 145px;
}
.bubble { 
  background-image: url(/images/landingpage/bubble-376x145.png);
  height: 145px;
}
#top.error-area { 
  background-image: url(/images/landingpage/error-area-414x145.png);
  height: 145px;
}


/* Main */
#main {

}
#bookmark-page #main, #thanks-page #main { 
}
/*Main for add*/
#main h2 {
 font-size: 22px;
}
#main h1 {
 font-size: 22px;
}
#add-button { 
  background-image: url(/images/landingpage/add-to-my-stuff-94x19.png); 
  width: 94px;
  height: 19px;
}
#add-button:hover { 
  background-image: url(/images/landingpage/add-to-my-stuff-hover-94x19.png); 
}
#add-button:active { 
  background-image: url(/images/landingpage/add-to-my-stuff-active-94x19.png); 
}
.sign-up-button {
  background-image: url(/images/landingpage/sign-up-orange-54x19.png); 
  width: 54px;
  height: 19px;
  margin-top: 5px;
  float: right;
}
.sign-up-button:hover {
  background-image: url(/images/landingpage/sign-up-blue-54x19.png); 
}
.sign-up-button:active {
  background-image: url(/images/landingpage/sign-up-yellow-54x19.png); 
}

#addpage #add-button { 
  right: 20px;
}
#bookmark-page #add-button {
  right: 0;
  bottom: 10px;
  margin-top: 4px;
}
/*Drag this bookmarket */
#drag-this {
  background-image: url(/images/landingpage/drag-this-378x154.png);
  height: 154px;
  width: 378px;
  left: 20px;
}
#drag-this-text { /*Shows up in IE*/
  background-color: #999999;
  color: white;
  width: 256px;
  height: 68px;
  left: 25px;
  top: 56px;
  font-size: 16px;
  position: relative;
}
#drag-this img {
  margin-left:340px;
position:relative;
right:10px;
top:71px;
}
/* Combine form-box with *-form below */
.form-box { 
  background-color: #e6e6e6;
  color: #808080;
}
.form-box, .form-section { 
  width: 373px;
}
#category-form-part { 
  top: 150px;
}
#signup-form { 
  height: 272px;
}
html .first-item-container { 
  margin-top: 18px; /*HENRIK updated html in signuppage 20100228 TODO */
}
#login-form { 
  height: 100px;
}
#bookmark-form { 
  top: 48px;
  height: 96px;
}
/*Small rounded corners */
div.category, .textfield-tag, .textfield { 
  -moz-border-radius: 8px; /*For IE: http://gist.github.com/77516 */
  -ie-border-radius: 8px;
  border-radius: 8px; 
  -webkit-border-radius: 8px;
  overflow: hidden;
}
/* bookmark form */
.category {
  float: left;
  width: 113px; 
  height: 26px;
  margin-left: 13px;
  margin-bottom: 10px;
  cursor: pointer;
  font-weight: normal;
  font-size: 16px;
  text-align: center;
  border: 1px solid #bbb;
  background-color: #fff; /*For IE rounded-corners*/
}
/*Thanks to ie, the colors are also in bookmarklet.js*/
.category-hover {
  color: #fff;
  background-color: #d68131;
}/*We hover with js because IE cant hover on a div*/ 
.selected{
  color: #000000;
  background-color:  #d68131;
}
.cat-col-0 { 
  margin-left: 0;
}
.category-title {
	margin-top:10px;
}
.cat-col-0 { clear: both; }
/* signup form */
/*.form-box form,*/
 #bookmark-form-title-link {
  position: relative;
}
.form-box input { 
  margin: 0;
}
.item-container { 
  float: left;
  margin-left: 12px;
  margin-top: 12px;
  width: 390px;
  zoom: 1; /*IE7 */
}
.item {
  zoom: 1; /*IE7 */
  float:left;
  font-weight: bold;
  font-size: 14px;
  width: 84px;
  padding-top: 6px;
}
.textfield { 
  float: left;
  width: 226px; /* 280 - 2 x padding;*/
  height: 19px; 
  padding: 10px;
  padding-bottom: 4px;
  padding-top: 4px;
  font-size: 12px;
}

/* These two are for divs added by javascript for */
.textfield-hint-wrap { 
  position: relative;
}

.textfield-hint { 
  width: 226px;
  position: absolute;
  font-size: 12px;
  height: 19px;
  padding-left: 10px;
  padding-top: 6px;
}

.validation-mini-hint {
  width: 100px;
  position: absolute;
  right: 20px;
  font-size: 12px;
  height: 24px;
  padding-left: 10px;
  padding-top: 8px;
}

.validation-checkbox { 
  position: absolute;
  left: 338px;
  top: 7px;
  height: 13px;
  width: 18px;
}
.validation-checkbox.value-good { 
  background-image: url(/images/landingpage/check-ok-on-grey.png);
}
.validation-checkbox.value-bad { 
  background-image: url(/images/landingpage/check-error-on-grey.png);
}
.validation-checkbox.value-pending { 
  background-image: url(/images/landingpage/check-pending-on-grey.png);
}

.field-error-red { 
  color: #b23e51;
}

input.textfield:focus, 
html .next-field { 
 border-color: blue;
}
body.ua-firefox.major-le3.minor-le5 .textfield {
/* These two look good on firefox 3.5 but not on 3.6*/
  padding-bottom: 0;
  padding-top: 8px;
}
.textfield-tag { 
  width: 80px;
  height: 22px;
  padding-top: 6px;
  font-size: 12px;
  padding-left: 6px;
}
html .input-text-ish { /*Sync with input.text in forms.css */
  background-color: #fff;
  border:1px solid #bbb;
  height: 19px;
}
html .captcha-textfield, .textfield-hint.related-to-captcha {
  width: 96px;
  margin-right: 12px;
  overflow:hidden;
}
.button-submit { 
  cursor: pointer;
  font-size: 0; /*Unobtrusive, if css breaks they will see the text */
  color: grey;
  border: 0;
  margin: 0;
}
#terms-text {
  font-size: 10px;
  line-height: 12px;
  width: 200px;
  float: left;
}
#terms-text a, #terms-text a:visited, #terms-text a:active {
  color: #d68131;
  text-decoration: none;
}
#terms-text a:hover {
  text-decoration: underline;
}
#download-button { 
  right: 0;
  background-image: url(/images/landingpage/download-button-157x42.png);
  width: 157px;
  height: 42px;
  float: right;
}
#download-button.inactive { 
  background-image: url(/images/landingpage/download-button-inactive-157x42.png);
}
#download-button:hover { 
  background-image: url(/images/landingpage/download-button-hover-157x42.png);
}
#download-button:active { 
  background-image: url(/images/landingpage/download-button-active-157x42.png);
}

#forgot-possword-text {
	float: left;
}

#login-page #login-button {
}

#login-button { 
  background-image: url(/images/landingpage/log-in-orange-83x27.png);
  width: 83px;
  height: 27px;
  float: right;
}
#login-button:hover {
  background-image: url(/images/landingpage/log-in-blue-83x27.png);	
}
#login-button:active {
  background-image: url(/images/landingpage/log-in-yellow-83x27.png);	
}
#login-button.mini { 
  background-image: url(/images/landingpage/log-in-48x19.png);
  width: 48px;
  height: 19px;
}
#login-button.mini:hover {
  background-image: url(/images/landingpage/log-in-hover-48x19.png);	
}
#login-button.mini:active {
  background-image: url(/images/landingpage/log-in-active-48x19.png);	
}

#close-button { 
  margin-top: 20px;
  margin-bottom: 10px;
  background-image: url(/images/landingpage/close-55x19.png);
  width: 55px;
  height: 19px;
}
#close-button:hover {
  background-image: url(/images/landingpage/close-hover-55x19.png);
}
#close-button:active {
  background-image: url(/images/landingpage/close-active-55x19.png);
}
/*Sharing */
.share-button { 
  background-image: url(/images/landingpage/share-buttons-278x56.png);
  float:left;
  margin-right: 20px;
  height: 55px;
  width: 55px;
  cursor: pointer;
}
#share-email { 
}
#share-twitter { 
  background-position: -149px;
}
#share-facebook { 
  background-position: -76px;
}
#share-this { 
  background-position: -223px;
}
#close-button-container{ 
 clear: both;
}
/* footer */
#footer, #footer a { 
  color: white;
}
#footer a { 
  text-decoration: none;
}
#footer a:hover { 
  text-decoration: underline;
}
#terms { 
  text-align: center;
  font-size: 13px;
  margin-top: 6px;
}
/*Error messages if javascript is disabled.*/
#signup-form ol { 
  position: absolute;
  top: -230px;
  left: -13px;
  padding-left: 18px;
  color: red;
  background-color: white;
  border: 2px dotted;  
  width: 379px;
  z-index: 1;
}
#signup-form ol li { 
  font-size: 13px;
  margin: 3px;
}
.login-errors {
  height: 25px;
  left: 10px;
  color: red;
}
.bookmarklet-errors {
  left: 20px;
  color: red;
}

#read-more {
  cursor: pointer;
}
#landing-page-just-signed-up p { 
  font-size: 12px;
}
#sms-on-way-phone {
  font-size: 22px;
  color: #d68131;	
}
#sms-instructions a {
  color: #d68131;	
}
#sms-instructions p {
  margin: 0;
}
.hr-below {
  border-bottom: 1px solid;
}
#sms-instructions .small-top-margin {
  margin-top: 7px;
}
#smartphones {
  position: absolute;
  bottom: 185px;
  right: 80px;
}
#landing-page-just-signed-up #close-button {
  top: 182px;
}

/*Fix for ff 3.0*/
body.ua-firefox.major-le3.minor-le1 .sign-up-captcha {
  border: 0;
  margin: 0;
  padding: 0;
  margin-top: -3px;
}
#category-buttons-container {
	margin-top: 5px;
	min-height: 30px;
}
.confirmation-main {
	margin-left:-185px;
}
.box {
	margin: 0;
}
#bundles-buttons {
	clear: both;
	margin-bottom: 20px;
	height: 20px;
}
.login-buttons {
	margin-top: 10px;
	height: 40px;
}
.bottom-sign-up {
	height: 45px;
	margin-top: 20px;
}
#share-buttons {
	height: 60px;
}
#field-error {
	font-size:14px;
	margin-left:30px;
	margin-top:-130px;
	position:relative;
	width:350px;
}
.error-landing-page {
	margin-left: 0px;
	margin-right: 0px;
}
.devices-landing-page {
	height:80px;
	margin-left:59px;
	width:200px;
}
.radio-button-text {
	font-size: 12px;
	margin-left: 4px;
}
.main-landing-page {
	background-color: white;
}
.main-box-landing-page-container {
	width: 414px;
}
.landing-page-box-top {
	background-image: url(../../images/landing-page-bar-top.png);
	width: 414px;
	height: 16px;
	clear: both;
	font-size: 0px;
}
.landing-page-box-bottom {
	background-image: url(../../images/landing-page-bar-bottom.png);
	width: 414px;
	height: 16px;
	clear: both;
	font-size: 0px;
}
#page-description {
    font-size:18px;
	margin-left:30px;
	position:absolute;
	top:130px;
	z-index:200;
	width: 400px;
}

#err-msg-animation {
	background-position:center center;
	background-repeat:no-repeat;
}

.qr-container {
	clear: both;
	padding-top: 20px;
	overflow: auto;
}
.qr-screenshot {
	width: 207px;
	height: 155px;
	background-image: url(/images/landing-page-blue-box.png);
	float: left;
	padding-top: 10px;
	text-align: center;
}
.qr-link {
	width: 207px;
	height: 155px;
	float: right;
	background-image: url(/images/landing-page-blue-box.png);
	padding-top: 10px;
	text-align: center;
}
.qr-container h1 {
	font-size: 16px;
	color: white;
}
.qr-container a {
	font-size: 12px;
	color: white;
}