/* Globals
=========================================== */
* { 
	margin: 0px; 
	padding: 0px; 
	text-indent: 0px; 
	
	font-family: Lato, Raleway, Verdana, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  font-weight: 500;
	/* font-size: 16px; */
	letter-spacing: 0px;
	list-style-type: none;
	word-wrap: break-word;
}


img { border: 0; }
a { text-decoration: none; font-weight: 700; color: inherit; }
#your-hubs a { color: #333; }

ul#ui-id-1.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content.tagit-autocomplete { z-index: 101; }
.tagit-new .ui-widget-content.ui-autocomplete-input { min-width: 300px; }
.tagit { max-width: 550px; }
a:hover, a.terms-link { color: #e06b00; }

/* Ron said this is okay */
.contentBox a { color: rgb(240,100,0); }
.contentBox a:hover { text-decoration: underline; }
.contentBox .newsHolder a, .contentBox .photoHolder a, .contentBox .rowItem a { font-weight: 500; color: #222; }
.contentBox .contentBoxFooter a:hover { text-decoration: none; }
.contentBox .toggleLink a { color: #222; }
.contentBox p, .contentBox span { font-family: Lato, Raleway, helvetica, sans-serif; }

body { color: #222; background: rgb(238,238,240); width: 100%; margin: 0px; padding: 0px; min-width: 1000px; }
body.empty { background: #fafafa; }
body.wide-body { min-width: 1200px; }
.empty-result { text-align:center; margin: 50px; }
#main-flash div {
  display: none;
}
#head-flash {
  height: 0;
  overflow: hidden;
  opacity: 0;
  background: rgb(26, 30, 31);
  background: rgba(26, 30, 31,0.93);
}

.flash {
  box-shadow: 0 0 6px #777;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  background: rgb(230,230,230);
  background: rgba(255,255,255,0.9);
  position: fixed;
  z-index: 1000;
  top: 0px;
  left: 0px;
  padding: 19px 25px;
  text-align: center;
  width: 100%;
  opacity: 1;
  cursor: pointer;
  border: none;
  overflow: hidden;
}

.flash p {
  font-size: 22px;
  line-height: 22px;
  margin: 0;
}
.flash.loading p {
}
.flash p img {
  padding-bottom: 7px;
}
.flash.notice p {
  color: #28b;
}
.flash.error {
  background: #b33;
}
.flash.error p {
  color: #fff;
}

.flash.other {
  color: #fff;
}

.signup-hero-copy h1.pricing-header { color: #fff; margin: 0 auto 15px auto; line-height: 1.3em; }

.spokt-sprite { background: url("/assets/spokt-sprite-4c0b2ade.png"); }

input[type=tel], input[type="text"], textarea, input[type="password"] {
  padding: 5px;
  outline:none; 
  background: #fcfcfc;
  border: solid 1px #ddd;
  border-radius: 3px;
  font-size: 16px;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
textarea { line-height: 24px; }
input[type=tel]:hover, input[type=tel]:focus, input[type="text"]:focus, textarea:focus, input[type="password"]:focus,
input[type="text"]:hover, textarea:hover, input[type="password"]:hover {
  background: #fcfcfc;
  border: solid 1px #aaa;
}

.payment-warning {
	background: #ffeee4;
	border: solid 1px #c44;
/*	background: #fdc;*/
	border-radius: 10px;
	overflow: hidden;
	padding-bottom: 25px;
	width: 80%;
	margin: 0 auto 25px;
}
.payment-warning p.pay-for-hub {
  text-align: center;
  padding: 0;
}
.payment-warning p.pay-for-hub a {
  color: #fdc;
  line-height: 14px;
  text-transform: uppercase;
  background-color: #c44;
  border-radius: 21px;
  padding: 7px 15px 9px;
}
.payment-warning p.pay-for-hub a:hover {
  color: #ffe;
  text-decoration: none;
  background-color: #a00;
}

.payment-warning h1 {
  background: #c44;
  padding: 5px;
  margin: 0 0 10px 0;
  text-align: center;
  font-size: 18px;
  color: #fafafa;
  font-weight: 400;
  margin:0;
  font-size: 24px;
  line-height: 40px;
  text-transform: uppercase;
}

.payment-warning p {
  padding: 15px 15px;
  color: #800;
  text-align: center;
}

.removeLink { text-decoration: none; color: #955; font-weight: 900; }
.removeLink:hover { color: #c44; }
.addResponseLink { line-height: 32px; }

input[type="text"]#search { font-size: 12px; padding: 3px; background: #eee; }
input[type="file"] { font-size: 14px; margin-top: 5px; }
#pageWrap { width: 100%; margin: 0 auto; position: relative; }

.clearing { clear: both; display: block; border: 0; padding: 0; margin: 0; line-height: 0px; }
.clearingIE { clear: both; display: block; border: 0; padding: 0; margin: 0; line-height: 1px;font-size: 1px; height: 0px; }
.clearing-top {	height: 0; font-size: 1px; margin: 0; clear: left; line-height: 1px; }
.clearfix:after {content:"\0020";display:block;height:1px;clear:both;visibility:hidden;overflow:hidden;}

.contentWrap { width: 1100px; margin: 40px auto 15px; position: relative; } 

body.wide-body .contentWrap { width: 1150px; }
body.wide-body .contentBox { width: 920px; }
body.wide-body .contentBox .hub-block-title.small-block { width: 890px; }
body.wide-body .contentBox .member-list-tools.hub-block-title.small-block { width: 881px; }
body.wide-body #header .inner { width: 1190px; }

#header .inner *, #footerWrap a, #footerWrap span { font-family: "Raleway", helvetica, sans-serif; }
.leftNav a { font-family: "Raleway", helvetica, sans-serif; }


.contentBox { position:relative; min-height: 340px; float: left; width: 860px; padding: 15px; border-radius: 8px; border: solid 1px rgb(220,221,217); border: none; background: rgb(249, 249, 249); background: rgba(26, 30, 31,0.03); box-shadow: 0 0 10px #ddd; box-shadow: none; border: solid 1px #e3e3e3; }
.desktop .contentBox { margin-left: 20px; }
.desktop.wide-body .contentBox { margin-left: 15px; }
.contentBox.no-nav { margin: 0 auto; float:none; }

.sequential-nav { margin-bottom: 35px; }
.sequential-nav-boundary { margin: 5px auto 5px auto; width: 755px; padding-left: 175px; height: 40px; }
.sequential-nav-inner { width: 720px; position: relative; }

.search-q { width:550px; }
.postMeta { z-index: 10; font-size: 12px; position: relative; right: 13px; margin-top: -30px; color: #777; font-weight: 400; position: relative; }

.postMeta { text-align: left; width: auto; margin-left: 67px; display: block; float: none; right: 0; margin-bottom: 0px; }

.postMeta a { display: inline-block; float: left; }

.postMeta .right .meta-glyph { opacity: .5; }
.replyPost:hover .postMeta .right .meta-glyph, .rootPost:hover .postMeta .right .meta-glyph { opacity: 1; }

.meta-tooltip { width: 20px; height: 20px; display: block; float: left; position: relative; text-align: center; top: -5px; }
.meta-glyph { background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -235px -46px; display: block; width: 20px; height: 20px; position: relative; top: 0; left: 0; }
.meta-tooltip:hover {  }

.meta-tooltip p { display: none; position: absolute; bottom: 29px; text-align: center; padding: 5px; min-width: 110px; font-size: 11px; text-transform: uppercase; font-weight: 600; color: #fff; background: #f06b1f; border-radius: 4px; margin: 0; margin-left: -50px; line-height: 1.2em; }

.meta-tooltip:hover p { display: block; }
.books-link.meta-tooltip:hover p { bottom: 20px; }
.meta-tooltip p a { color: #fff; text-align: left; font-weight: 600; }

.feature-photo.meta-tooltip .meta-glyph { background-position: -407px -126px; }
.edit-post-button.meta-tooltip .meta-glyph { background-position: -235px -46px; }
.viewers-link.meta-tooltip .meta-glyph { background-position: -282px -46px; }
.btnEdit.meta-tooltip .meta-glyph { background-position: -235px -46px; }
.deleteLink.meta-tooltip .meta-glyph { background-position: -325px -46px; }
.reply-link.meta-tooltip .meta-glyph { position: relative; background-position: -367px -46px; float: left; }
.download-link.meta-tooltip .meta-glyph { position: relative; background-position: -499px -47px; float: left; }


/* This is a crappy book icon */
.books-link.meta-tooltip .meta-glyph { position: relative; background-position: -230px -124px; float: left; }
.books-link.meta-tooltip:hover .meta-glyph { position: relative; background-position: -230px -164px; float: left; }

/* I like this one better */
.books-link.meta-tooltip .meta-glyph { position: relative; background-position: -280px -124px; float: left; }
.books-link.meta-tooltip:hover .meta-glyph { position: relative; background-position: -280px -164px; float: left; }

/* Book Meta Tool Tip */
.meta-tooltip p a { color: #fff; font-weight: 600; font-size: 11px; width: 100%; }
.books-link.meta-tooltip p { min-width: 131px; margin-left: -55px; background-color: rgba(15, 150, 180, 0.95);}
.books-link.meta-tooltip p a:hover { font-weight: 900; }

.feature-photo.meta-tooltip .meta-glyph { background-position: -407px -126px; }
.books-link.meta-tooltip p .add-post-to-book { text-align: center; width: 100%; }

.postMeta a.screen-reader-link { height: 1px; width: 1px; opacity: 0.1; overflow: hidden; margin: -3px; padding:0; }

.edit_book { margin: 50px 0 10px 70px; width: 350px; }
.edit_book input[type="text"] { width: 340px; }
#book_book_ids_to_absorb_ { width: 350px; }
.edit_book .button-row { margin: 10px 0 20px 0; padding-bottom: 20px; }
.edit_book .button-row.hr { border-bottom: solid 1px #ccc; }
.edit_book .txt12 { margin-top: 4px; }
.edit_book .txt16 { margin: 12px 0; color: #333; }
.edit_book .txt16 strong { font-weight: 600; color: #333; }


.rotate-left.meta-tooltip .meta-glyph { background-position: -407px -46px; }
.rotate-right.meta-tooltip .meta-glyph { background-position: -453px -46px; }

div.meta-data strong { width: 110px; display: inline-block; }

.view-options { text-align: right; padding: 0 0 15px 0; }
.view-options a { margin-right: 20px; padding: 5px;  }

/* Book List */

.book-list { width: 100%; }
.book { padding: 20px 0 0 24px; position: relative; width: 212px; float: left; height: 310px;  }
.book a, .book div { z-index: 30; position: relative; }
.book-list .book .book-graphic { position: absolute; top: 0; left: 0; height: 220px; z-index: 3; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: 2px -259px; width: 212px; padding: 20px 0 0 24px; }
.book-list.display-as-list .book .book-graphic { background: none; display:none; }

.book-list .book .cover-photo { border-radius: 5px; width: 150px; height: 90px; margin: 55px 0 0 30px; text-align: center; overflow: hidden; }
.book-list .book.no-photo .cover-photo { background: #333; box-shadow: inset 0 0 10px #222; }
.book-list .book.no-photo .book-title { background:none; }
.book-list .book .cover-photo .no-photo { padding: 26px 5px; text-transform: uppercase; color: #777; }
.book-list .book .cover-photo img { border-radius: 0px; margin: 0 auto; max-width: 150px; }
.book-list .book .book-title { margin: 2px 18px 15px 18px; height: 60px; text-align: center; }
.book-list .book .book-title a { color: #eee; }
.book-list .book .book-title a:hover { text-decoration: none; }
.book-list .book-meta { padding: 0px; text-align: center; min-height: 38px; font-size: 13px; }
.book-list a.see-all { text-align: center; display:block; margin-top: 13px; color: #444; text-transform: uppercase; font-weight: 600; }

/* .book .cover-photo .S { display: block; height: 90px; overflow: hidden;  } */
.book .cover-photo .S img { margin-top:-34px; border-radius: 4px; }

.book-list.display-as-list .book { float:none; width: auto; padding: 8px; height: 36px; }
.book-list.display-as-list .book .cover-photo.no-photo { display:none; }
.book-list.display-as-list .book .book-title { float: left; margin: 0; height: auto; width: 300px; text-align: left; }
.book-list.display-as-list .book .book-meta { float: left; margin: 0; height: auto; width: 250px; }
.book-list.display-as-list .book .book-title a { color: #555; }

.book-list.display-as-list .book.alternate-item { background: #efefef; }

.book-meta-box { position: relative; float: right; width: 260px; margin-top: 30px; }
.book-meta-box .book { padding: 60px 10px 10px 50px; width: 219px; height: 237px; }
.book-meta-box .book .book-title { text-align: center; font-weight: 700; margin: 7px 0; }
.book-meta-box .book .see-all { position:absolute; bottom: 12px; right: 12px; margin: 0 auto; display:block; font-size: 12px; text-transform: uppercase; }
.book-meta-box .book-stats { margin-top: 10px; font-size: 13px; text-transform: uppercase; line-height: 1.4em; }


ul#ui-id-1.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content.tagit-autocomplete { max-height: 250px; overflow-y: scroll; }


.site-row * { color: #fff; font-weight: 500; }
.site-row .site-row-element { float: left; padding: 4px;}
.site-row .site-name { width: 290px; }
.site-row .site-price { width: 90px; text-align: right; }
.site-row .import-checkbox { width: 180px; text-align: center; }
.site-row .site-total { float: right; width: 70px; text-align: right; }
.site-row.header { text-align: center; text-transform: uppercase; font-size: 15px; }
.site-row.total * , .site-row.header * { font-weight: 700; }

.signup-hero-copy h1.site-total { color: #fff; font-weight: 300; margin: 0 12px; padding: 0; float: left; line-height: 50px; }
.signup-hero-copy .mayflower-checkout { float: left; }

.signup-hero-copy-inner .mayflower p { font-weight: 400; font-size: 17px; }

.mayflower-signup-steps {  z-index: 10; margin-bottom: 50px; position: relative; font-size: 13px; font-weight: 500; color: #ddd; text-transform: uppercase; line-height: 1.5em; padding: 15px; width: 100%; text-align: center; margin: 0 auto; color: #222; background: rgba(0,0,0,0.0); margin-top: -40px; padding: 20px 0 0px 0; margin-bottom: 30px; }
.mayflower-signup-steps * { color: #222; font-weight: 500; font-size: 18px; }


.signup-step-container { width: 280px; float: left; }
.signup-step-container { width: 280px; float: left; }


.signup-step-container * { color: #222; text-align: center; line-height: 1.3em; }
.signup-step-container h6 { font-size: 53px; border: solid 2px #222; border-radius: 50px; width: 75px; height: 75px; font-weight: 300; margin: 0 auto 15px auto; }
.signup-step-container h6 span { display: block; font-size: inherit; width: 100%; height: 100%; font-weight: inherit; }
.signup-step-container.step-3 h6 span { position: relative; top: -5px; }
.signup-step-container p { font-size: 18px; }

.signup-step-arrow { width: 40px; height: 40px; margin-top: 20px; float: left; background: url(<%= asset_path 'spokt-sprite-new.png' %>) no-repeat; background-position: -606px -44px; margin-left: -15px; margin-right: -15px; }

.step-1-current .step-2, .step-1-current .step-3, .step-1-current .arrow-1, .step-1-current .arrow-2 { opacity: 0.3; }
.step-2-current .step-3, .step-2-current .arrow-2 { opacity: 0.3; }

.mayflower-details-paragraph { text-align: center; margin-top: 15px;margin-bottom: 20px; color: #fff; text-shadow: 0 0 20px rgba(0,0,0,0.2); }
.step-pay-mayflower .mayflower-details-paragraph { display: none; }

.site-row.header .site-name { text-align: left; }

.distinct-row { border-bottom: dashed 1px #888; padding: 7px 0; }
.checkout-button-wrap { margin-top: 30px; }

.migrations-status-list .distinct-row { border-bottom: none; border-top: dashed 1px #888;  }
.migrations-status-list .site-row.header { margin-bottom: 6px; }
.migrations-status-list form.button_to { position:static; }

.migrations-status-list p a { color: #eee; text-decoration: underline; }
.migration-notes { width: 100%; padding: 20px; }

.site-row .site-status { width: 130px; text-align: center; }
.site-row .site-next-step { width: 150px; text-align: right; }

.feature-photo.meta-tooltip:hover .meta-glyph { background-position: -407px -166px; }
.edit-post-button.meta-tooltip:hover .meta-glyph { background-position: -235px -91px; }
.viewers-link.meta-tooltip:hover .meta-glyph { background-position: -282px -91px; }
.btnEdit.meta-tooltip:hover .meta-glyph { background-position: -235px -91px; }
.deleteLink.meta-tooltip:hover .meta-glyph { background-position: -325px -91px; }
.reply-link.meta-tooltip:hover .meta-glyph { position: relative; background-position: -367px -91px; float: left; }
.rotate-left.meta-tooltip:hover .meta-glyph { background-position: -407px -91px; }
.rotate-right.meta-tooltip:hover .meta-glyph { background-position: -453px -91px; }
.download-link.meta-tooltip:hover .meta-glyph { position: relative; background-position: -499px -92px; float: left; }
a.download-link:hover { color: #f06b1f; text-decoration: none; }

.rotate-right.meta-tooltip p, .rotate-left.meta-tooltip p { background: #1f7cf0; }

.reply-link.meta-tooltip { width: auto; padding: 0 3px 3px 3px; border-radius: 4px; top: -4px; border: solid 1px transparent; }
.reply-link.meta-tooltip p { display: block; float: left; position: relative; top: 0; left: 0; background: none; color: #9d9d9d; width: auto; min-width: 0; margin: 0; padding-right: 0; font-weight: 500; }

.reply-link.meta-tooltip:hover { color: #fff; border: solid 1px #f06b1f; }
.reply-link.meta-tooltip:hover p { color: #f06b1f; }

.customer-notes { max-height: 235px; overflow: scroll; background: rgba(36, 40, 41,0.03); padding: 5px; border: solid 1px #e3e3e3; margin-bottom: 30px; }
.customer-notes-wrapper { background-color: rgba(255, 235, 0, 0.20); }
.customer-note { border-bottom: dotted 1px #ddd; margin-bottom: 12px; }
.note-meta { color: #aaa; font-size: 12px; }

.new_customer_note { margin-bottom: 30px; }
.new_customer_note label { text-transform: uppercase; margin-bottom: 8px; font-weight: 600; display: block; }

.customer-notes .message-row .message { float: left; width: 155px; font-size: 10px; }
.customer-notes .message-row .message span { color: #aaa;}
.customer-notes .message-row .message.message-subject { width: 220px; overflow: hidden; height: 14px; }

.post-time { font-size: 12px; font-weight: 400; color: #777; line-height: 21px; float: left; cursor: default; }
.post-time span.poster-name { font-size: 12px; font-weight: 600; color: #707070; line-height: 21px; }

.post-time span { font-size: inherit; font-weight: inherit; color: inherit; }


.postMeta a { font-size: 13px; font-weight: 300; text-decoration: none; color: #999; padding: 3px; }
.postMeta a:hover { font-weight: 500; }
.postMeta a.deleteLink:hover { color: rgb(200,0,0);}

.postMeta ul { display:inline; width: 0px; }
.postMeta ul li { display: none; }
.postMeta ul li.icon-graphic { display: block; background: url(<%= asset_path 'spokt-sprite.png' %>) no-repeat; width: 15px; height: 16px; display: inline-block; cursor: pointer; border:none; }
.postMeta ul li.icon-graphic:hover { background-position: -18px 0; }
.postMeta ul.active li.icon-graphic { background-position: -36px 0; position: absolute; top: 0px; right: 0px; padding:0; }
.postMeta ul.active { position:absolute; right: 0; top:0; background: rgb(244,244,246); padding: 10px 0 12px; width: 97px; height: auto; z-index: 90; border: solid 1px rgb(200,200,200); }
.postMeta ul.active li { display: block; text-align: center; border-bottom:solid 1px rgb(231,231,233); padding: 5px 0; margin: 0px 10px; }
.postMeta ul.active li.icon-graphic { border:none; margin: 0; }

.postMeta ul li span.spokt-sprite { display:inline-block; width: 16px; height: 16px; opacity: 0.7;  }
.postMeta ul li span.rotate-left {  background-position: -53px 2px; }
.postMeta ul li span.rotate-right { background-position: -69px 2px; }
.postMeta ul li a:hover span.spokt-sprite { opacity: 1; }

.profileTabs { display: block; float: none; clear: both; margin-bottom: 15px; margin-top: 10px; text-align: center; }
.profileTabs a { display: inline-block; margin: 0 5px; padding: 8px; background: rgb(102,139,167); color: #fff; width: 29%; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 16px; line-height: 24px; text-align: center; text-decoration: none; text-transform: uppercase; font-weight: 500; }
.profileTabs a.active { background: rgb(42,79,97); }
.profileTabs a:hover { background: rgb(30,70,90); text-decoration: none; }


.tab-links { padding: 0px; line-height: 40px; font-size: 18px; border: solid 1px #d9dddf; border-width: 0 0px 1px 0px; margin-top: 30px; width: 720px; margin-left: -15px; padding: 30px 0 0 30px; display: block; clear: both; margin-top: 0; top: 0; position: relative; margin-bottom: 30px; }
.tab-link { background: #f3f3f3; text-shadow: 1px 0 1px #fff; position: relative; top: 2px; height: 38px; line-height: 40px; padding: 0 12px; border: none;
border-top-left-radius: 0px; border-top-right-radius: 0px; float: left; margin-left: 10px; }
.contentBox a.tab-link { color: #555; }
a.tab-link:hover { color: #000; text-decoration: none;  }

.tab-link.selected { background: rgb(249, 249, 249); text-shadow: none; border: solid 1px #d9dddf; border-width: 1px 1px 0px 1px;  }
.tab { display:none; }

.wide-pref-select { border: solid 1px #ccc; background: none; -webkit-appearance: none; height: 38px; width: 380px; padding: 0 15px; }
.select-row { margin-right: 100px; margin-top: 20px; }
.delete-membership-link { font-size: 12px; text-transform: uppercase; }

.prefPane { display:none; }
.prefPane h2 { font-size: 18px;  margin: 10px 5px 10px 5px;}

p.majorMessage { text-align: center; font-size: 62px; font-weight: 100; color: #597192; margin-top: 45px;  }

.contentBox h1 { font-weight: 600; margin: 5px 5px 15px 5px;}

/*  SILVER BOX (Forms, etc.) */
.silverBoxWrapper { margin: 3px auto 0 auto; width: 708px; }
.silverBoxTop { width: 708px; display: block; }
.silverBoxBottom { width: 708px; height: 15px; line-height: 1px; font-size: 1px; margin: 0 auto; display: block; }
.silverBoxPad { padding: 15px 15px 0 15px; min-height: 200px; }
.twoColContentBGLeft { float: left; margin: 50px 0 0 18px; display: inline; }


#encoding_video_message { padding: 10px; margin: 10px 5px; font-size: 20px; line-height: 29px; }
#encoding_video_message div { font-size: 20px; line-height: 29px; }
#encoding_video_message.error div { color: #c66; }
#encoding_video_message.error div.error-heading { text-align:center;color:#eee; border-radius:5px; background: #C66;padding: 10px; font-weight:300; }
#encoding_video_message.error div.error-message { margin: 0 auto; margin: 10px 0; }

.video-list-message { min-height: 55px; line-height: 55px; color: #aaa; }
.video-list-message.error { color: #aaa; }
.videoItem a:hover { text-decoration: none; color: #ccc; }

/*  BODY CONTENT BG (Dark gradient bg for forms, posts, etc.) */
.darkGradBGHeadLeft { height: 42px; line-height: 42px; margin-right: 6px; width: 7px; float: left; }
.darkGradBGHead { height: 42px; line-height: 46px; font-size: 18px; margin-top: 6px; width: 733px; margin-left: -3px; position: relative; overflow: hidden; }
.darkGradBGHead span { font-size: inherit; }
form.edit_post_title { display: none; }

.contentBoxHeaderLink1 { height: 42px; line-height: 42px; padding: 0 12px; color: #fff; float: right;  border: solid #444; border-width: 0 1px 1px 1px; }
.darkGradBGHeadRight { height: 42px; line-height: 46px; padding: 0 12px; color: #fff; float: right;  }
.darkGradBGBorder { height: 1px; line-height: 1px; font-size: 1px; border: solid 1px #666; border-width: 1px 0px 0px 0px; position: absolute; top: 0px; display: block; width: 727px; margin-left: 3px; }

a.accent:hover { color: #e06b00; }


.darkGradBGWrap {  width: 733px; position: relative; }
.darkGradBGTop {  width: 733px; display: block; padding-top: 6px; }
.darkGradBGBottom {  width: 733px; height: 15px; line-height: 1px; font-size: 1px; margin: 0 auto; margin-bottom: -5px; display: block; }


/*  POST TITLE  */
.postTitleTextBox { width: 95%; font-size: 24px; margin: 10px 0 5px; }
.darkGradBGHeadRight a.orangeLink { color: #ccc; text-decoration: none; }
.darkGradBGHeadRight a.orangeLink:hover { color: #ea8a35; text-decoration: underline; }
form.edit_post_title { display:none; }

/*  CENTER LINES / SPACER LINES  */
.centerLineLight { line-height: 1px; font-size: 1px; height: 1px; width: 90%; margin: 7px auto; background: #fff; border-top: solid 1px #dfdfdf; overflow: hidden; }

.errorTxtBox { text-align: center; color: red; background: #fdd; padding: 8px; margin: 8px auto; line-height: 58px; border: solid 2px #f66; display: inline; clear: both; float: none; }

.sizeLinks { background:#080808; padding:7px; width:80px; height:20px; float:right;}
.sizeLinks a { padding:7px;}
.sizeLinks a:hover { background: #222; color:white;}
/* ACCEPT INVITATION.aspx
===========================================*/
#theBox1, #theBox2, #theBox3 { display: none; }
#theBoxBtn1, #theBoxBtn2, .loginHelpTxt1, .loginHelpTxt2 { display: block; }
.logInAsHolder { float: right; clear: none; display: inline; top: 8px; position: relative; }
.logInAs { font-size: 13px; padding: 4px; text-align: center; color: #fff; clear: both; display: block; position: relative; }
.logInAs a { font-weight: bold; text-transform: capitalize; font-size: 13px; color: #fff; }
.signUpAs { font-size: 13px; padding: 4px; text-align: center; color: #ccc; clear: both; display: block; position: relative; }
.signUpAs a { font-weight: bold; text-transform: capitalize; font-size: 13px; color: #eee; text-transform: uppercase; }
.spoktLoginBtn { width: 165px; height: 50px; margin: 0 auto; }

.aboutHeaderTxt { font-size: 23px; line-height: 30px; clear: both; }
.aboutTxtHolder { border-top: solid 3px #ccc; width: 210px; float: left; margin-left: 7px; padding-top: 3px; height: 120px; margin-top: 7px; font-size: 14px; line-height: 21px; display: inline; padding-bottom: 0; }
.aboutTxtBody { text-align: left; color: #555; font-size: 14px; }
.learnMoreLink { font-size: 15px; text-align: right; display: block; padding: 3px 15px 15px 0; }
.learnMoreLink2 { margin-top: -8px; }

.also_post_to { padding: 0 3px 3px 3px; display: block; float: left; width: 245px; text-align: left; overflow: hidden; }

/* Questions Buttons
======================================================== */
.questionBtn { width: 23px;
height: 27px;
float: right;
position: relative;
top: 1px;
margin-right: 5px;
display: inline;
}
.qb2 { width: 23px; height: 23px; float: left; position: relative; top: -2px; margin-left: 5px; float: right; margin-right: 17px; margin-top: 4px; display: inline; }
.qb2 a, .questionBtn a { border: solid 1px #eee;
background: rgb(150,187,225);
color: #fff;
font-weight: 100;
text-shadow: 1px 1px 0 #888;
line-height: 25px;
font-size: 20px;
border-radius: 16px;
width: 25px;
height: 25px;
display: block;
overflow: visible; }
.qb2 a:hover, .questionBtn a:hover { border: none; text-decoration: none; }
.qb2 a div, .questionBtn a div { display: none; }
.qb2 a:hover div, .questionBtn a:hover div { display: block; width: 330px; text-align: justify; line-height: 17px; position: absolute; right: 28px; top: 30px; background: #fefcc3; color: #333; border: solid 5px #fff38b; text-decoration: none; padding: 5px; text-shadow: none; }


.signup-box .signup-steps-wrapper .errorMessage, .errorMessage { color: #c22;}
.errorExplanation { color: #c22; }
#errorExplanation ul li { color: white; }
.errorBox, #errorExplanation { padding: 10px; background: rgba(155,0,0,0.7); margin-bottom: 20px; color: white; border-radius: 5px; }
.errorBox, #errorExplanation h2,.errorExplanation p, .errorExplanation li { color: white;}
#errorExplanation li { margin-left:5px; }
 
/* firefox hack */
.aboutTxtBody, x:-moz-any-link { font-size: 13px; }



.greybox { width:425px; float:left; margin: 15px 0px; padding:8px 13px;text-align: center; 
		background: #f4f4f4; -moz-border-radius: 8px; -webkit-border-radius: 8px; }

.greyboxleft { margin-right: 10px; }
.signUpLeft { width: 470px; }
.signUpLearnMore { width: 415px; }

#alternate_contact { margin-top: 5px; }
#alternate_contact li { height:28px; padding-bottom: 4px; }
#alternate_contact li img { height:28px;position:relative; top:8px;margin-right:5px; }

.contact-us-side-bar { width: 35%; float: left; clear: right; border-left: dashed 1px #ccc; padding: 0px 15px 5px 15px; margin-top: 35px; }
.contact-us-side-bar a { font-weight: 600; }

/*   WEB FORM
===============================================*/
.formHolder {  margin: 0px auto; display: block; }
.formHolder { color: #444; }
.formHolderBlue {  margin: 0px auto 10px auto; display: block; }
.formHolderBlue .formLabel { color: #444; }

#mainCol .formHolder h2 { font-size: 19px; line-height: 25px; margin: 5px 5px 10px 5px; color: #555; background: #f9f9f9; padding: 5px; text-decoration: underline; padding-bottom: 5px; border: dotted 1px #bbb; width: 380px; }
.formRow { clear: both; padding: 0px; margin: 5px 0 0 0; }
.formLabel { width: 205px; text-align: right; float: left; line-height: 28px; padding: 0px; margin: 0px; color: #777; font-size: 18px; color: #555; }

.formElement { float: left; clear: none; line-height: 20px; padding: 0px; margin: 0 0 0 5px; width: 145px; }
.formElement input { width: 210px; }
.formInput { height: 20px; padding: 0px; margin: 0px; float: left; position: relative; width: 150px; }
.formBtn { margin: 5px 0; }

.login-checkbox-label { text-align:left; padding:7px 1px; width: 180px; }

.errorRow {  }
.formBumper { width: 100px; float: left; clear: left; }
.formAsterisk { width: 10px; clear: right; text-align: left; float: left; line-height: 17px; margin: 0 0 5px 0; color: #f00; }
.formError { width: 380px; float: right; text-align: right; line-height: 17px; margin: 0 0 5px 0; color: #f00; }
.formError span { color: #f00; float: right; text-align: right; }

/* HUB FORMS
=========================================== */
.hubFormLabel { float: left; width: 130px; text-align: right; margin-right: 5px; font-size: 16px; }
.hubFormInput { margin-top: 5px; clear: right; }
.hubFormInputFlash { margin-top: 0px; clear: right; }

.orange em { color:#ea8a35; }
.contentBoxHeader em { font-size: 18px; }
.contentBoxHeader strong { font-size: inherit; font-weight: 600; }

*.blue, *.blue a { color: rgb(100,137,165); }
.blue a:hover { background: #ffa; color: #0c5184; }
.light, .light a { color: #999; }
.light a:hover, span.light a:hover { color: #444; background: #ffa; }
.light span { text-decoration: none; }
.dark, .dark a { color: #272727; }
.error, .error a { color: #f00; }
.txt10 { font-size: 10px; }
.txt11 { font-size: 11px; }
.txt12 { font-size: 12px; }
.txt13 { font-size: 13px; }
.txt14 { font-size: 14px; }
.txt15 { font-size: 15px; }
.txt16 { font-size: 16px; }
.txt17 { font-size: 17px; }
.txt18 { font-size: 18px; }
.txt20 { font-size: 20px; }
.txt21 { font-size: 21px; }
.right { text-align: right; }
.bold { font-weight: bold; }
.lh16 { line-height: 16px; }
.lh18 { line-height: 18px; }
.lh20 { line-height: 20px; }
.lh21 { line-height: 21px; }
.lh23 { line-height: 23px; }
h2 { font-weight: 600; margin-bottom:8px; }

.right { float: right; text-align: right; }
.center, .centered { float: none; text-align: center; }
.left { float: left; text-align: left; }
.u { text-decoration: underline; }	
.strong, strong, b, .strong *, strong *, b * { font-weight: 600; }	
em, i, em *, i * { font-style: italic; }
.underline { text-decoration: underline; }	
.highlight:hover { background: #ffa; color: #444; }
.justify { text-align: justify; }
	

#spinner { background:url("/assets/ajax-loader-22270925.gif"); width:31px; height:31px; margin:25px auto; }
#spinner.gray { background:url("/assets/ajax-arrows-blue-gray-4170a32f.gif"); width: 0px; height: 0px; margin: 0px 5px 0 5px; display:inline-block; }
#spinner.gray.visible { background:url("/assets/ajax-arrows-blue-gray-4170a32f.gif"); width: 16px; height: 16px; margin: 0px 5px 0 5px; display:inline-block; }

/* Header
=========================================== */
#headerWrap {  border-bottom: solid 1px #5c92b1; background: rgb(100,137,165); background: rgb(26, 30, 31); background: rgba(26, 30, 31,0.93); margin-bottom: 10px; width: 100%; height: 60px;  }
#headerBoundary { width: 960px; margin: 0 auto 0 auto; height: 60px; overflow: visible; position:relative;}
#headerLogo a { width: 164px; height: 64px; text-shadow: 0px 1px 0 #555;font-size: 38px; color: #fafafa; font-weight: 400; position:absolute; margin-top: 5px; left: 25px; text-indent: -5000000px; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>);
background-size: 1200px 800px; background-position: -23px -40px; zoom: 0.8; width: 200px; }
#headerCap { width: 33px; height: 64px; float: right; }

.linkHolder { position: absolute; right: 25px;  height: 32px; padding: 0 10px 0 10px;background: rgb(234, 234, 236);border: solid 1px rgb(212,212,217); border-top: none; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
.flushLinks { float: left; height: 18px; clear: none; cursor: default; color: #999; }
.flushLinks * { font-size: 14px; line-height: 34px; color: #597192; }
.flushLinks a { cursor: pointer; text-decoration: none; font-weight: 500; }
div.flushLinks span, .update { padding: 8px; margin: 0px; }
div.flushLinks a, .update { padding: 8px; margin: 0px; }


#flash { color: #28b; background: #ffb; padding: 4px 7px; border: solid 2px #ff0; float: none; font-size: 16px; margin: 0px auto 6px auto; line-height: 32px; text-align:center; }

#errorMessage { color: #28b; background: #ffb; padding: 4px 7px; border: solid 2px #ff0; float: none; font-size: 16px; margin: 0px auto 6px auto; line-height: 32px; text-align:center; }

#announcement_bar {  background: #ffc url("/assets/announceBG2-94d2dc90.png"); padding: 0px 0px; border-bottom: solid 1px #ff2; font-size: 20px; position: fixed; line-height: 52px; height: 52px; text-align:center; z-index:96; width:100%;  -moz-box-shadow: 0px 0px 8px #999; -webkit-box-shadow: 0px 0px 8px #999; box-shadow: 0px 0px 8px #999; }
#announcement_bar.scroll-away { position: absolute; }
#announcement_bar.not-ignorable .dismiss { visibility: hidden; }
#announcement_bar .dismiss:hover {  background: #f00; }
#announcement_bar .dismiss {  background: #d00; color: #fff; font-size: 31px; position: absolute; top:8px; right:25px; height:34px; width:34px;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height: 30px; text-align: center; margin: 0 auto; font-weight: 600; font-family: helvetica, arial; cursor: pointer; }
#announcement_bar_padding { height:51px; }
#announcement_bar a { color: #2785D5; font-size: 16px; }
#announcement_bar a.learn-more { display: block; background: #49f; color: white; position:absolute; right: 64px; width: 120px; top: 8px; border-radius: 4px; height: 34px; line-height: 34px; }
#announcement_bar a.learn-more:hover { background: #27d; }
.flash .dismiss { display: none; }
/* homePage main Column
	
	
	
	
	
	
	
	
=========================================== */

h1.homeHeader { font-size: 45px; 
font-weight: 400;
text-shadow: 1px 1px 2px #fafafa;
color: #666;

}

.homeStep {
  width: 300px;
  height: 300px;
  float: left;
  margin: 15px 18px 15px 0;
  padding:0;
  position:relative;
  background: #eaeaea;
  border-radius: 20px;
  border: solid 1px #dde;
}
.homeStep * {
  position:absolute;
  top:0;
  left:0;
  text-align: center;
}
.homeStep .bg {
  color: #ececed;
  text-shadow: 1px 0 10px rgba(110,137,155,0.15), -1px 0 10px rgba(120,137,155,0.15);
  font-weight: 600;
  height: 312px;
  width: 312px;
  font-size: 355px;
  line-height: 275px;
  z-index: 50;
}
.homeStep .banner {
  top:148px;
  height: 45px;
  padding: 5px 10px;
  background: rgb(100,137,165);
  opacity: 0.8;
  font-weight: 500;
  text-shadow: 0 1px 0 #888;
  color: #fafafa;
  z-index: 60;
  font-size: 17px;
}
.homeStep h2 {
  display:block;
  width: 294px;
  top: 100px;
  font-weight: 500;
  color: #ea8a35;
  font-size: 38px;
  opacity: 0.95;
  z-index: 70;
  text-shadow: 1px 1px 1px #eaeaea, -1px -1px 1px #eaeaea;
}

.demoVideoLink { background: #777; border-radius: 15px; width: 385px; height: 68px; margin-top: 15px; float:left; position:relative; }
.demoVideoLink * { color: #eee; position:absolute; }
.demoVideoLink h2 { top: 7px; left: 102px; font-weight: 500; font-size: 22px; }
.demoVideoLink .videoGraphic { top: 12px; left: 20px; font-size: 65px; line-height: 42px; }
.demoVideoLink .blurb { font-size: 15px; top: 35px; left: 120px; }
.demoVideoLink .chevron { top: 15px; right: 10px; font-weight: 900;font-size: 41px;line-height: 41px; text-shadow: 1px 0px 0px #444; }

.signUpLink { width: 542px; height: 68px; margin-top: 15px; float: left; margin-left: 15px;  }
.signUpLink a { color: #fafafa; font-weight:400; font-size: 44px; line-height: 68px; text-align:center; width: 542px; height: 68px; background: rgb(100,137,165); display: block; border-radius: 15px;}
.signUpLink a:hover { background: rgb(80,117,145); color: #fc2;}


.demoHubBox { background: #777; border-radius: 15px; float:right; width: 220px; position: relative; margin-top:25px; color: #eee; padding: 3px 0 8px 0; }
.demoHubBox h3 { color: #eee; margin: 10px; font-weight: 500; font-size: 15px; text-align: center; border-bottom: solid 1px #999; }
.demoHubForm { padding-top: 73px; margin: 0 auto; width: 268px; }


.loginBtn { display: block; margin: 15px auto; text-align: center; }
.forgotPswd { display: block; margin: 0px auto; text-align: center; }

.FPSignupBtn { margin: 0 auto; display: block; width: 327px; height: 140px; }


/* New Home/splash Page 
=========================================== */
.homePageLogin { clear: none; float: right; padding: 0px; margin: 3px 0 0 0; }
.homePageLogin .forgotPswd a { font-size: 10px; }
#homeLogin .logInAs, #homeLogin .logInAs a { font-size: 11px; padding: 0; background: none; clear: none; display: inline; }
#homeLogin .logInAs { float: left; clear: none; margin-left: 10px; position: relative; }

#homeLogin .formAsterisk font { height: 13px; line-height: 13px; font-size: 11px; color: red; }
.inputField { height: 17px; background: transparent; }


.forgot_password {color: #666; float: left; top: 15px; position: relative; color: #ccc; font-size: 11px; margin-right: 7px;}
.main_title {font-size: 33px; padding:10px; }


label.check-label span a { font-size: 15px; }
.paragraphs { padding: 10px; }
.paragraphs p { margin-top:10px; }
.paragraphs h4 { font-size: 18px;color:#fff;font-weight:normal; }

div.hub_usage_background { height: 10px; border: solid 1px #eee; border-color: #1F82C6; width: 350px; margin: 0 auto; border-radius: 5px; overflow: hidden; }
div.hub_usage_indicator { height: 10px; color: #eee; width:600px; background:url("/assets/hubUsageBar_03b2-a6ab1748.gif") no-repeat; background: #3C8EC7; background: #1F82C6; radius: 5px; }


div.hub_usage_background.capacity-70-percent-full, div.hub_usage_background.capacity-80-percent-full { border-color: #fa4; }
div.hub_usage_background.capacity-90-percent-full, div.hub_usage_background.capacity-100-percent-full { border-color: #c44; }

.capacity-70-percent-full div.hub_usage_indicator, .capacity-80-percent-full div.hub_usage_indicator {  background: #fa4; }
.capacity-90-percent-full div.hub_usage_indicator, .capacity-100-percent-full div.hub_usage_indicator { background: #c44; }



/* LEFTNAV
=========================================== */
li { vertical-align: bottom; }
li.clearing { height:0px; }
.leftNav { width: 180px; float: left; position: relative; padding: 0px; overflow: hidden; border-radius: 8px; border: solid 1px rgb(220,221,217); padding-top: 0px; }
.leftNav ul {  }

.linkFull, .linkPart { width: 180px; height: 38px; position: relative; margin-bottom: 0px; overflow: hidden; }

.leftNav a { text-shadow: 0 1px 0 #fff; height: 40px;  line-height: 38px;  display: block; text-indent: 10px; color: #597192; font-size: 17px; font-weight: 400; }
.leftNav .linkFull a.mainLink { width: 180px; }
.leftNav .linkFull a.mainLink:hover { color: #e06b00;  }
a.mainLink { float: left; }

.leftNav .linkPart a.mainLink { width: 137px; }
.leftNav .linkPart a.mainLink:hover {  color: #e06b00; }

.leftNav span { display: none; text-decoration: none; }

.leftNav a.linkAdd:hover span.orange { background: #ddd; background-position: -189px; position: absolute; left: 0; display: block; height: 28px; line-height: 28px; width: 117px; text-indent: 14px; font-size: 17px; font-weight: 600;  }

.leftNav a.linkAdd { text-align: center; width: 43px; height: 38px; float: left; font-size: 28px; font-weight: 500; }
.leftNav a.linkAdd:hover { color: #e06b00; }

.leftNav a.linkNext { line-height: 1.15em;}

.linkBorder { height: 1px; line-height: 1px; font-size: 1px; background: rgb(225,225,235); display: block; margin: 0 2px 0 2px; overflow: hidden; vertical-align: bottom; }
.LNTop { width: 180px; height: 55px; }
.LNTop span { padding: 8px 14px 0 14px; display: block; }
.LNBtm { width: 180px; padding: 0px; margin: 0px; }
.LNBtm a { margin: 0 auto; padding: 1px; position: relative; top: 7px; display: block; width: 75px; height: 75px; border: solid 1px #ccc; border-radius: 100px; overflow: hidden; }
.LNBtm a.avatar img { display: block; width: 100%; height: auto; }
.LNBtm a.avatar { background: #333; background: transparent; border-radius: 100px; margin: 10px auto 20px; display: block; color: #888; font-size: 30px; line-height: 75px; font-weight: 200; text-align: center; text-indent: 0; text-shadow: none;	 }


.form {margin: 0pt 0pt 10px 6px; font-size: 20px; color: rgb(68, 68, 68); line-height: 23px; text-align: left;text-decoration:none;}

.fieldWithErrors { display:inline; }
.fieldWithErrors input { color: red; }

div.alsoPostToHeader { color: #28c; padding: 4px 7px; float: none; margin: 0 0 1px 10px; line-height: 32px; }
.also_post_to label { font-size: 14px; }
/* HUB HOME
=========================================== */

.contentBoxHeader { position:relative; padding: 0 0 0 10px; height: 38px; line-height: 40px; font-size: 18px; border-bottom: solid 1px #c7cbcd; }
.toggleLink { position:absolute; top: 0px; height: 38px; line-height: 40px; padding: 0 12px; float: right; border:none; border-top-left-radius: 0px; border-top-right-radius: 0px; }
#unread_link { right: 132px; }
#recent_link { right: 0px; }

#oldest_first { right: 0px; }
#newest_first { right: 118px; }

.contentBoxHeaderRight {  }
.contentBoxHeader .last-activity-header { position: absolute; right: 10px; top: 7px; font-size: 12px; }

.toggleLink { background: rgb(240,240,241); text-shadow: 1px 0 1px #fff; }
.toggleLink.selected { background: rgb(249, 249, 249); text-shadow: none; }
#unread_link.selected { right: 130px; }
#newest_first.selected { right: 116px; }
#oldest_first.selected, div#recent_link.selected { border: solid 1px #c7cbcd; border-width: 1px 1px 0px 1px; }
#newest_first.selected, div#unread_link.selected { border: solid 1px #c7cbcd; border-width: 1px 1px 0px 1px; }

.newsHolder { width: 500px; display: block; margin: 10px 0 0 0; float: none; border-radius: 0px; overflow: hidden; }
.photoHolder { width: 312px; display: block; margin: 7px 0px 0 0 ;  float: none; text-align: left;  border-radius: 10px; }
.fullWideHolder { clear: both; display: block; margin: 7px 0px 0 0px;  border-radius: 10px; }

.contentBoxFooter { height: 30px; border-top: solid 1px #c7cbcd; padding: 7px 10px 0 10px; }
.contentBoxFooter a, a.add-hub-link {  text-decoration: none; border-radius: 20px; padding: 3px 10px; }
.contentBoxFooter a:hover, a.add-hub-link:hover { color: #333; text-shadow: 1px 0 1px #fff; background: rgb(231,237,242); }

.hubMemberRow { }
.memberAvatar { float:left; background: #333; color: #bbb; font-weight: 400; font-size: 16px; line-height: 32px; width: 30px; height: 30px; overflow: hidden; border-radius: 20px; text-align: center; margin-right: 7px; text-transform: uppercase; border: solid 1px #ccc; 



background: transparent;
width: auto; height: auto;


 }
.memberAvatar a { width: 30px; height: 30px; display: block; padding: 0px; margin: 1px; border-radius: 20px; overflow: hidden; }
.memberAvatar img { width: 100%; height: auto; top: 0; left: 0; position: relative; margin: 0; padding: 0; border-radius: 50%; }

.eventName { font-size: 13px; line-height: 28px; float:left; }
.memberName { float: left; }
.memberName a { font-size: 13px; line-height: 28px; }
.lastActivity { float:right; font-size: 13px; line-height: 28px; }
/*
.hubMemberRow .avatarExtraSmall { width: 25px; height: 25px;padding:0; padding-right: 5px; }
*/


.summaryTitle { display: block; }
.summaryTitle a { text-decoration: none; display: block; }
.summaryTitle a:hover { text-decoration: none; }
.summaryTitle { margin-bottom: 4px; }

h1.hubHome { } 

div#post-viewers.newsHolder { margin-left: 0; }
#post-viewers .rowItem a { position:absolute; top: 7px; left: 10px;}
#post-viewers .rowItem { padding-left: 40px; line-height: 28px; }


.contentBoxFooter div { height: 40px;  width:auto; }
.contentBoxFooter div.total-title {  float: left;  }
.contentBoxFooter div.total-unviewed { float: right; margin-right: 75px; }

.rowItem { padding: 6px 9px; position:relative; }
.newsHolder .rowItem *, #your-hubs .rowItem * { font-size: 13px; }
.alternateItem { background: rgb(240, 240, 241); }

/* SAFARI TEXT SHADOWS */
.shadow {
	text-shadow: #666666 5px 5px 5px;
}

p { line-height: 1.8em; margin-bottom: 7px; }

.URMsg { text-align: center; padding: 20px; font-size:22px; }
.URMsg p, .URMsg p a, .URMsg a { font-size:22px; line-height: 44px; }
.URMsg a { color: #049; }

.seqNav { display:inline; padding: 10px 0 5px 0;  }
.seqNav a { text-decoration: none; color: #fafafa; background: rgb(92,129,157); border-radius: 25px; padding: 4px 15px 6px; }
.seqNav a:hover { background: rgb(72,109,147); }
.seqNav.older { float:left; }
.seqNav.newer { float:right; }
.seqNav.next { position: relative; margin: 0 auto; width: 300px; display: block; clear: none; text-align: center; }
.seqNav.next a { background: #f06b20; float: none; }


form#new_invitation input[type=text] { width: 92%; }

div.value.invite-email-error { font-size: 13px; margin-bottom: 15px; text-transform: uppercase; font-weight: 700; color: red; margin-top: 5px; }

/*                         
In Place Editor 
============================================
.darkGradBGHead span { font-size: 18px; }
.in_place_editor_field { padding:8px;}
.orange span { color: #ea8a35; }
 
*/


#new_to_spokt .formElement input { width: 170px; }
/* viewPost.aspx & ucPostViewer.ascx
=========================================== */
/*  SILVER BOX (FOR POSTS ONLY!!!) */

.rootPostHolderWrapper { margin: 0; position: relative; }
.rootPostHolderTop { display: block; }
.rootPostHolderBottom { height: 15px; line-height: 1px; font-size: 1px; margin: 0 auto; display: block; }
.rootPostHolderPad { padding: 17px 15px 0 15px; position: relative; overflow: hidden; margin-bottom: -8px; }

.rootPostHolder .unviewed .postText p { font-weight:600; color: #333; }
.postText img { max-width: 100%; }
.unviewed .postText p, .unviewed .postText p * { font-weight:500; color: #333; }
.unviewed .postText p strong { font-weight: 700; }
.rootPostHolder .unviewed { border-left: solid 6px #f77500; border-top-left-radius: 7px; border-bottom-left-radius: 7px; margin-left: -7px;  }

.unviewed-count.unviewed a { color:#e06b00; text-shadow: 0 1px #ddd; }
.unviewed-count.unviewed a:hover { color:#c05b00; }

.rootPost, .replyPost .rootPostHolderWrapper { margin: 0; position: relative; }
.replyPost .rootPostHolderWrapperRight { display: block; }

.replyPost .rootPostHolderTop {  display: block; }
.replyPost .rootPostHolderTopRight { display: block; }

.replyPost .rootPostHolderBottom { height: 15px; line-height: 1px; font-size: 1px; margin: 0 auto; display: block; position: relative; overflow: hidden; margin-top: -6px; }
.replyPost .rootPostHolderBottomRight { height: 18px; width: 15px; float: right; position: relative; right: 0px; top: -2px; }

.replyPost { border-top:solid 1px #e8e8e8; padding-top: 9px; position: relative; }
.postText a, .unviewed .postText a { font-size: 15px;font-weight:600; }

.postText blockquote { padding: 7px 10px 7px 10px; line-height: 20px; color: #556; margin-left: 2px; border: solid 4px #dfdfdf; border-width: 0 4px 0 4px; background: rgba(239,239,239,0.5);  }
.postText blockquote cite { text-align: right; display: block; padding-right: 10px; }
.postText blockquote cite::before { content: ' '; display: block; }
.postText code { font-family: monaco, "courier new", "courier new", monospace; white-space:pre-wrap; font-size: 13px; line-height: 14px; }

.unviewed .new-status-light { content: " "; width: 10px; height: 10px; border-radius: 10px; position: absolute; margin-top: 20px; left: -9px; background: rgba(114, 189, 235, 1); border: solid 1px #fff; box-shadow: 0 0 0px 1px rgba(114, 189, 235,0); }
.status-light-line { width: 30px; height: 1px; background: rgba(114, 189, 235, 1); top: 5px; position: absolute; left: 0; display: none; }
/*.unviewed .avatarImage .pic { display: block; border-radius: 40px; border: solid 1px white; box-shadow: 0 0 0 1px rgba(114, 189, 235, 0); }*/
.avatarImage { overflow: none; }

#recent-feed .thread { border: solid 1px #ddd; margin-bottom: 30px; border-radius: 25px; padding: 7px 0; width: 600px;}
#recent-feed .meta-tooltip { display:none; }
#recent-feed .reply-link.meta-tooltip { display: inline-block; }
#recent-feed .replyPost { padding: 9px 0 0 15px; }
#recent-feed .unviewed .new-status-light { left: 6px; }

.nested { position: relative; }
.nested .nested .nested { position: static; }
.nested .replyPost { position: relative; }

.nested .replyHolder .replyHolder { margin-left: 20px; 
  -webkit-transition: margin-left 0.5s linear;
  -moz-transition: margin-left 0.5s linear;
  -ms-transition: margin-left 0.5s linear;
  -o-transition: margin-left 0.5s linear;
  transition: margin-left 0.5s linear;
 }
 .nested.only-so-deep .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder { margin-left: 0; }

.spinner img { position: absolute; left: 160px; top: 8px;}
.spinner {display:none;}

.post_photo {margin-bottom: 8px; position:relative;}
.replace-photo { margin-bottom: 8px; }

#member_list, .hub-settings { width:700px; clear: both; margin: 5px auto 20px auto; }
body.wide-body .contentBox #member_list { width: 100%; }


#member_list th, .hub-settings th { font-size: 14px; text-transform: uppercase; color: #555; font-weight: 700; }
#member_list tbody tr:hover, .hub-settings tbody tr:hover { background: #fff; }
#member_list td, .hub-settings td { font-size: 14px; padding: 8px 0; border-top: dotted 1px #ddd;  }
#member_list td .left a , .hub-settings td .left a { border-radius: 40px; overflow: hidden; display: block; position: relative; height: 25px; width: 25px; padding: 0; margin: 0; border: 0; }
#member_list td .left a img.avatarExtraSmall { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; position: relative; top: 0; left: 0; }

#member_list td .left { margin: 0 10px 0 10px; }

#member_list *, .hub-settings * { font-size: 14px; line-height: 25px; }
#member_list tbody, .hub-settings tbody { padding: 5px 0; }

.invite-powers { margin: 0 0 0 10px; }
#profilePane .invite-powers { margin: 10px 0 10px 40px; }
.invite-powers input[type=radio] { width: 20px; margin-right: 0px; margin-left: 20px; -webkit-appearance: radio; }
.kick-power { width: 78px; }
th.list-user-name, td.list-user-name { padding-left: 46px; width: 170px; }
th.email-column, td.email-column { width: 250px; }
th.address-column, td.address-column { width: 220px; }
th.phone-column, td.phone-column { width: 110px; }
th.joined-column, td.joined-column { width: 90px; }

#member-list-container a { color: #184076; }
#member-list-container a:hover { color: rgb(240,100,0); }

#member-list-container tbody.membership-list td { vertical-align: top; font-size: 13px; padding: 4px 6px; }
#member-list-container th { padding: 4px 6px; }
#member-list-container tbody.membership-list td a { font-size: 12px; }


.contentBox .member-list-tools.hub-block-title.small-block { border-top: solid 1px #ddd; padding: 10px 35px; background: #f4f4f4; border-radius: 0; width: 680px; }
.wide-body .contentBox .member-list-tools.hub-block-title.small-block {  border-top: none; background: #ddd; width: 681px; }

.contentBox .member-list-tools .btn { height: 16px; padding: 7px 12px 6px 12px; line-height: 16px; color: #777; }
.contentBox .member-list-tools a:hover.btn { text-decoration: none; }
.contentBox .member-list-tools a.download-csv { float: right; padding-top: 2px; color: #777; }
.contentBox .member-list-tools form { color: #777; }

a.download span.icon { display:inline-block; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -368px -122px; display: inline-block; width: 20px; height: 20px; position: relative; top: 2px; left: 0;  }
a:hover.download span.icon { background-position: -368px -162px; }
a:hover.download { color: rgb(240,100,0); text-decoration: none; }

.page-selector { margin-left: 5px; }

.postAvatar, .poster { float: left; width: 55px; min-height: 38px; margin: 0 0 0px 5px; display: block; color: #444; font-size: 13px; text-align: center; line-height: 18px; position: relative; }

.poster img { margin: 0 auto; clear: both; float: none; width: 100px; display: block; }

.replyName { font-size: 11px; color: #fff; }

.postBody { width: auto; padding: 0 0 23px 0; left: 6px; overflow: hidden; position: relative; min-height: 20px; margin-bottom: 0px; margin-left: 60px; margin-right: 15px; position: relative; min-height: 35px; }

.postLinks { position: relative; margin-top: -14px; float: left; display: block; }
.replyPost .replyWindow .postLinks { right: 14px; }
a.btnAddReply { display: block; float: left; clear: left; margin-right: 5px; }
a.btnAddReply:hover { }

.saveBtn { display: block; float: left; clear: left; }
.saveBtn:hover {  }
a.cancelBtn { display: block; float: left; clear: right; margin-left: 5px; font-weight: normal; }
a.cancelBtn:hover { }

input.btnPost { display: block; float: left; clear: left;  }
a.btnPost:hover { }

.searchBoxHolder { position: relative; top: -2px; right: -12px; display: inline; }

a.postViewers { display: inline; margin: 8px 0 0 4px; }

span.deletePost { display: block; float: left; margin: 8px 0 0 4px; }

.searchBox { position: absolute; right: 55px; top: 11px;}
.loginU, .loginP { position: absolute; top: 11px;}
.loginU { right: 175px; } 


#remember-this img { max-height: 180px; }
#remember-this .remember-photo { height: 180px; }
#remember-this .remember-photo img {  }
#remember-this .contentBoxFooter { position:relative; }
#remember-this .contentBoxFooter .reply-spinner.visible { left: 10px; top: 8px; }

a.btn.clear-button { height: 15px; line-height: 17px; }
/* PHOTOPOST PAGE
=========================================== */


/* Image Shadow */


/* smallCol
=========================================== */

.postText { font-size: 17px; line-height: 1.5em; margin-bottom: 15px; }
.postText h3 { font-size: 24px; margin: 8px 0 12px 0; font-weight: 500; }


.GSBtn a { width: 641px; height: 149px; margin: 10px auto; display: block; clear: both; }

/*  SEARCH PAGE
===============================================*/

.search-field { margin-bottom: 5px; }
.search-form select { border: solid 1px #ddd; border-radius: 3px; width: 560px; }
a.show-advanced-search { display:block; padding: 10px; color: #666; }

.searchResultBox b { color: #000; background: #ffa; background: rgba(255,255,000, 0.4);font-weight: 600; padding: 0 3px 0 3px; border-radius: 3px; }
.searchLink.right { color: #F8610C;}
.searchResult { border-radius: 5px; border: solid 1px #ddd; display:block; margin: 20px 8px 0 10px; padding: 12px; float:left; width:195px; height:300px; overflow:hidden; position: relative; }
.searchResult:hover {  }
.searchResult .search-header { width: 219px; height: 146px; overflow: hidden; margin-left: -12px; margin-top: -12px; }
/* this will hightlight search terms */
.searchResult em.old { background: rgba(0,115,255, 0.05); font-weight: 600; font-style: normal; font-size: inherit; border-radius: 15px; border: solid 1px #cef; padding: 1px 4px; margin: 1px -5px; }
.searchResult em { font-weight: 600; font-style: normal; font-size: inherit; }

.post-result .search-header, .poll-result .search-header { background: url("/assets/search-result-no-image-f8e2e71a.png") no-repeat; }

.alternateItem.searchResult {  }

.search-image { width: 219px; height: 146px; display: block; overflow: hidden; }
.search-image img { width: 219px; margin: -35px 0 0 0; }
.searchResult h3.summaryTitle a { margin: 12px 0 0; font-size: 14px; color: #334; font-weight: 700; text-transform: uppercase; }
.searchResult .posted-by { margin: 0px; font-size: 11px; color: #999; text-transform: uppercase; }
.searchResult .excerpt { margin: 0px; overflow: hidden; margin-top: 10px; font-size: 13px; color: #777; height: 80px; }
.excerpt a { font-size: 12px; }
.searchResult .view-post { padding: 30px 0 12px 0; display: block; position: absolute; bottom: 0; width: 100%; left: 0px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgb(249, 249, 249) 36%); }
.searchResult .view-post a { display:block; margin-top: 5px; text-transform: uppercase; color: #888; font-size: 13px; font-weight: 600; text-align: center; }
.searchResult .view-post a:hover { color: #555; text-decoration: none; }

.video-strip img { height: 147px; }
.book-search .hubFormLabel, .user-search .hubFormLabel { line-height: 40px; }



/* PAGINATION CONTROL
=========================================== */
#post_list { min-height: 692px; }
div.pagination { margin: 0 auto; }
.pagination div { margin-top: -7px; }
.pagination { color: #fafafa; padding: 8px 10px; line-height: 38px; }

.pagination a { color: #555; line-height: 17px; padding: 4px; border-radius: 3px; background: transparent; border: solid 1px #555; text-decoration: none; display:inline-block; min-width:25px; text-align: center; }
.pagination em.current { color: #fff; line-height: 17px; padding: 4px; border-radius: 3px; background: #555; border: solid 1px #555; text-decoration: none; display:inline-block; min-width:25px; text-align: center; font-style: normal; }
.pagination span.gap { color: #ccc; }
.pagination a.previous_page { padding-left: 15px; padding-right: 15px; }
.pagination a.next_page { padding-left: 15px; padding-right: 15px; }
.pagination a:hover { color: #eee; background: #555; }
.pagination span.disabled { color: #999; padding: 4px; border: solid 1px transparent; }
.paginator { text-align: center; color: white; }

.pagination span.previous_page, .pagination span.next_page { color: #999; padding: 0; padding-left: 15px; padding-right: 15px; border: solid 1px transparent; position: relative; display: inline-block; }

.fileUpload { width: 500px; padding: 0 0 0 0px; margin-left: 135px; }
.fileUpload a { display: inline-block; min-height: 28px; background: #fcfcfc; border-radius: 3px;  border: solid 1px #ddd; line-height: 28px; color: #556; padding: 0 17px; }
.fileUpload a:hover { text-decoration: none; color: #333; background: #fff; border: solid 1px #ccc; }

.fileUpload .upload { border-top: none; padding-top: 5px; width: 100%; max-width: 500px; color: #28c; font-size: 15px; line-height: 13px; }
.fileUpload .upload .progress { border: solid 1px #ddd; }
.fileUpload .upload .progress .bar { background-color: #59cf85; }


/* SIMPLE Footer
=========================================== */
#footerWrap { margin-top: 0px; padding-top: 50px; background: #1a1e1f; position: relative; font-size: 12px; }
#footerWrap * { line-height: 2em; }
.footerContent { width: 960px; margin: 0 auto; }


input.textbox_off, input.textbox_off:focus, input.textbox_off:hover { background-color: transparent; }
input.textbox_focus, input.textbox_focus:focus, input.textbox_focus:hover { background-color: #fafafc; }

form#login { padding: 0px 6px; position: relative; border: 1px solid gray; }
div#submit { float: left; clear: none; height: 32px; width: 80px; margin-top: 7px; }
div#submit input { padding: 5px 10px; border-radius: 20px; }
div#username, div#password { position: relative; float: left; margin-right: 8px; clear: none; font-size: 15px; margin-top: 7px; height: 31px; }

div#username > div, div#password > div { height: 21px; width: 136px; margin-right: 3px; }

input[type="text"]#user_session_login:-webkit-autofill, input[type="password"]#user_session_password:-webkit-autofill {
    -webkit-box-shadow:0 0 0 25px #eee inset; /* overrides the autofill background color with a thick inset border */
    -webkit-text-fill-color: #333;
}

input[type="text"]#user_session_login:-webkit-autofill:focus, input[type="password"]#user_session_password:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 25px #eee inset;
    -webkit-text-fill-color: #333;
} 


p.instructions { margin:0px 9px; }

input[type="text"]#user_session_login, input[type="password"]#user_session_password, .new_hub input#hub_name, .exampletext {
position: absolute;
height: 24px;
border-radius: 10px;
padding: 2px 6px;
width: 130px;
}
input[type="text"]#user_session_login, input[type="password"]#user_session_password { 
  border: none;
  box-shadow: none;
}

.new_hub input[type="submit"] { width: 50px;
  padding: 8px;
  float: right;border-radius: 40px;
  height:28px;line-height: 10px;margin-right:2px;
}

.exampletext { color: #999; background: #dfdfdf; overflow: hidden;line-height: 25px; }

#outer #pageWrap { background: none; width: 100%; }
.homePageLoginHolder { width: 950px; margin: 0 auto; display: block; float: none; position: relative; }
.homePageLogin { float: right; }
.homePageLogin input { border: none; outline-style: none; outline-width: 0px;  }

.seePlansBtn { margin-left: 10px; margin-bottom: -6px; }
.costCopy { color: #eee; font-size: 13px; line-height: 25px; margin-left: 10px; margin-right: 10px; clear: none;text-align: left; }

.footerColumn { width: 250px; float: left; margin-right: 30px; margin-bottom: 60px; }
#footerWrap .footerColumn h3 { font-family: "Chaparral Pro", Raleway, Georgia, "Helvetica Neue", Helvetica, "Source Sans Pro", "Open Sans", sans-serif; font-size: 18px; font-weight: 600; padding-bottom: 1px; border-bottom: none; margin-bottom: 10px; text-transform: uppercase; color: #959595; letter-spacing: 1px; }
.footerColumn a { font-size: 14px; font-weight: 400; line-height: 1.5em; }
.footerColumn div, .footerContent a, .footerContent span, .footerContent { font-size: 14px; }

#footerWrap * { color: #ddd; text-decoration: none; }
#footerWrap a { display: block; color: #ddd; text-decoration: none; }
#footerWrap a:hover { color: #fff; }
#footerWrap .footerColumn div { line-height: 20px; color: #b2b2b2; min-height: 22px; display: block; }
#footerWrap .footerBottom { background: #101415; height: 75px; line-height: 75px; }
#footerWrap .footerBottom * { height: 75px; line-height: 75px; }
#footerWrap .footerBottom a { display: inline; }
#footerWrap .footerBottom a:hover { text-decoration: underline; color: #57b1ff; }

.footerColumn.blogposts { width: 300px; }

.video_thumbs { margin: 0 5px 5px 0; padding:7px 7px 5px 8px;text-align:center; position:relative; }
.video_thumbs img { height: 100px; }

#downloadVideo { float:right; margin-right:5px; color:#888; }
/* PHOTO GRIDS
=========================================== */

/* These classes are for the photo grids */

.photoGroupBox { border: solid 3px transparent; width: 300px; margin: 3px; height: 300px; display: block; position: relative; }
.photoGroupBox a, #photo-grid a { overflow: hidden; border-radius: 4px; margin: 5px; position: relative; display: block; float:left; }  

a.s9 { width: 90px; height: 90px; }
a.s49 { width: 190px; height: 190px; }
a.s4 { width: 140px; height: 140px; }
a.sf  { width: 290px; height: 290px; }

.s49 img, .s4 img, .s9 img, .sf img { border: 0px; width: 100%; height: 100%; opacity: 0; }
a.s9:hover, a.s49:hover, a.s4:hover {  opacity: 0.8; }

/* Square Image 1/9th of the grid */
/* Square Image 4/9ths of the grid */
  

.header-avatar { display: inline-block; margin-right: 15px; position: relative; top: 25px; margin-top: -35px; }
  
#user_profile .label { width: 200px; color: #555; float:left; text-align:right; line-height: 1.6em }
#user_profile .value { float:left; width:300px; margin-left:10px; line-height: 1.6em; }
#user_profile h2 { font-weight: 300;
padding: 35px 0px 10px 20px;
border-bottom: solid 1px #ccc;
width: 520px;
margin: 0px 0px 10px 0px;
}
#user_profile .centerLineLight { margin:5px; }

p.hint { font-size: 12px; }
form#new_hub {
  margin: 10px;
}
/* NO SHRINKING ROLLOVERS
=========================================== */
/*
a.s9 img { width: 100px; height:100px; position: relative; top: 0px; left: 0px; }
a.s9 { border: 0px; width: 100px; height: 100px; position: relative; overflow: hidden; display: block; float: left; }
a.s9:hover { border: solid 10px #08f; width: 80px; height: 80px; position: relative; display: block; overflow: hidden; }
a.s9:hover img { position: absolute; top: -10px; left: -10px; }

a.s49 img { width: 200px; height: 200px; position: relative; display: block; }
a.s49 { border: 0px; width: 199px; height: 199px; position: relative; overflow: hidden; display: block; float: left; overflow: hidden; }
a.s49:hover img { position: absolute; top: -10px; left: -10px; width: 200px; height: 200px; }
a.s49:hover { border: solid 10px #f80; width: 180px; height: 180px; }
*/

/* SHRINKING ROLLOVERS
=========================================== */
/*
a.s9 { border: 0px; width: 100px; height: 100px; display: block; float: left; }
a.s9 img { width: 100px; height: 100px; }
a.s9:hover { border: solid 10px transparent; width: 80px; height: 80px; display: block; }
a.s9:hover img { width: 80px; height: 80px; display: block; }

a.s4 { border: 0px; width: 150px; height: 150px; display: block; float: left; }
a.s4 img { width: 150px; height: 150px; }
a.s4:hover { border: solid 10px transparent; width: 130px; height: 130px; display: block; }
a.s4:hover img { width: 130px; height: 130px; display: block; }

a.s49 { border: 0px; width: 200px; height: 200px; display: block; float: left; }
a.s49 img { width: 200px; height: 200px; }
a.s49:hover { border: solid 10px transparent; width: 180px; height: 180px; display: block; }
a.s49:hover img { width: 180px; height: 180px; display: block; }

a.sf { border: 0px; width: 300px; height: 300px; display: block; float: left; }
a.sf img { width: 300px; height: 300px; }
a.sf:hover { border: solid 10px transparent; width: 280px; height: 280px; display: block; }
a.sf:hover img { width: 280px; height: 280px; display: block; }
*/

.input-full-width { width:488px; }

img.gridImage.S { max-width: 250px; max-width: 250px; border-radius: 12px; }

div.postText p img, div.post_photo a img { border-radius: 8px; max-width: 99%; max-height: 600px; }

.faqHolder a { color: #F8610C; padding: 3px; }
.faqHolder a:hover { background: rgb(87, 177, 255); color: #fff;}
.faqHolder .faq { font-size: 12pt; line-height: 14pt; /* background: #ddd; */ width: 80%; }
.bigletter { font-size: 18pt; font-weight: 500; padding-bottom: 10px; border-bottom: dotted 1px #777; margin-bottom: 14px; }
.faq { margin-top: 10px; margin-bottom: 10px; border: 0px; padding: 9px; line-height: 18px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
.faq p {margin-bottom: 12px; font-size: 13pt; line-height: 25px; margin-left: 10px; }
.faq .faqlinks { float: right; margin: 35px 0px 5px 15px; width: 150px; background: transparent; border: solid 1px #ccc; padding: 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.faqlinks a { display: block; padding: 5px; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; }

div#view-photo { padding:25px;text-align:center;width:896px; margin: 0px auto; }
div#view-photo img { border-radius: 10px; margin-bottom: 5px; }
div#view-photo img.L { max-width: 800px; max-height: 800px; }
div#view-photo img.M { max-width: 624px; max-height: 607px; }
div#view-photo img.S { max-width: 250px; max-height: 250px; }


form.edit_post img.size-T { max-width: 200px; }

.photoViewer { background: #d6d6d6; margin: 10px; min-width:960px; border: solid 1px #ccc; clear: both; width: auto; position: relative; display: block; border-radius: 10px; }
.photoCaption { text-align: center; margin-bottom: 25px; font-size: 24px; text-shadow: 0 1px 0 #fff; color: #777; }

.four-zero-four h3 { font-size: 20px; line-height: 32px; margin-top: 8px; }
.four-zero-four ul { padding-left: 10px; }
/* HACKS 
=========================================== */

/* ===========================================
==============================================
HOLLY HACK -- ONLY USE FOR PEEKABOO BUG*/

/* Hides from IE5-mac \*/
* html .buggybox { height: 1%; }
/* End hide from IE5-mac */

/* Font Size Fix \*/
* html .txt10 { font-size: 10px; }
* html .txt11 { font-size: 11px; }
* html .txt12 { font-size: 12px; }
* html .txt13 { font-size: 13px; }
* html .txt14 { font-size: 14px; }
* html .txt15 { font-size: 15px; }
* html .txt16 { font-size: 16px; }
* html .txt17 { font-size: 17px; }
* html .txt18 { font-size: 18px; }
* html .txt19 { font-size: 19px; }
* html .txt20 { font-size: 20px; }
* html .txt21 { font-size: 21px; }
* html .txt22 { font-size: 22px; }
* html .txt23 { font-size: 23px; }
* html .searchBoxHolder { position: relative; top: 2px; }
* html .postTitleTextBox { width: 528px; font-size: 18px; margin-top: 7px; }
* html .aboutHeaderTxt { font-size: 22px; }
* html .aboutTxtHolder { font-size: 13px; }
/* End Font Size Fix */


/* \ */
* html .questionBtn a:hover div#questionEmail { top: -110px; }
* html .contentWrapHead { position: absolute; left: 0; top: 0; }
* html .contentWrap { padding-top: 16px; }
* html .seePlansBtn { margin-bottom: -3px; }
* html .videoBox { overflow: hidden; }
* html .videoBox { padding: 7px 15px 15px 15px; margin-top: 15px; }
* html .videoBoxHead { position: relative; top: -7px; margin-bottom: -7px; }

/* */

/* END HOLLY HACK
==============================================
============================================== */

/* THESE TARGET FF ONLY, THOUGH DON'T DISTINGUISH BETWEEN PC OR MAC */
html:not([lang*=""]):not(:only-child) .txt10 { font-size: 9px; }
html:not([lang*=""]):not(:only-child) .txt11 { font-size: 10px; }
html:not([lang*=""]):not(:only-child) .txt12 { font-size: 11px; }
html:not([lang*=""]):not(:only-child) .txt13 { font-size: 12px; }
html:not([lang*=""]):not(:only-child) .txt14 { font-size: 13px; }
html:not([lang*=""]):not(:only-child) .txt15 { font-size: 14px; }
html:not([lang*=""]):not(:only-child) .txt16 { font-size: 15px; }
html:not([lang*=""]):not(:only-child) .txt17 { font-size: 16px; }
html:not([lang*=""]):not(:only-child) .txt18 { font-size: 17px; }
html:not([lang*=""]):not(:only-child) .txt19 { font-size: 18px; }
html:not([lang*=""]):not(:only-child) .txt20 { font-size: 19px; }
html:not([lang*=""]):not(:only-child) .txt21 { font-size: 20px; }
html:not([lang*=""]):not(:only-child) .txt22 { font-size: 21px; }
html:not([lang*=""]):not(:only-child) .txt23 { font-size: 22px; }

/* END FIREFOX HACKS
===============================================*/


/* BEGIN IE7 HACKS
===============================================*/
	*:first-child+html .txt10 { font-size: 9px; }
	*:first-child+html .txt11 { font-size: 10px; }
	*:first-child+html .txt12 { font-size: 11px; }
	*:first-child+html .txt13 { font-size: 12px; }
	*:first-child+html .txt14 { font-size: 13px; }
	*:first-child+html .txt15 { font-size: 14px; }
	*:first-child+html .txt16 { font-size: 15px; }
	*:first-child+html .txt17 { font-size: 16px; }
	*:first-child+html .txt18 { font-size: 17px; }
	*:first-child+html .txt19 { font-size: 18px; }
	*:first-child+html .txt20 { font-size: 19px; }
	*:first-child+html .txt21 { font-size: 20px; }
	*:first-child+html .txt22 { font-size: 21px; }
	*:first-child+html .txt23 { font-size: 22px; }
/* END IE7 HACKS
===============================================*/

/* BEGIN SAFARI HACKS - (NOT NECESSARY ANYMORE NOW THAT WE'VE FOUND THE FF ONLY HACKS)
===============================================*/
/*
@media all and (min-width: 0px) {
	 body:not(:root:root) .txt10 { font-size: 10px; }
	 body:not(:root:root) .txt11 { font-size: 11px; }
	 body:not(:root:root) .txt12 { font-size: 12px; }
	 body:not(:root:root) .txt13 { font-size: 13px; }
	 body:not(:root:root) .txt14 { font-size: 14px; }
	 body:not(:root:root) .txt15 { font-size: 15px; }
	 body:not(:root:root) .txt16 { font-size: 16px; }
	 body:not(:root:root) .txt17 { font-size: 17px; }
	 body:not(:root:root) .txt18 { font-size: 18px; }
	 body:not(:root:root) .txt19 { font-size: 19px; }
	 body:not(:root:root) .txt20 { font-size: 20px; }
	 body:not(:root:root) .txt21 { font-size: 21px; }
	 body:not(:root:root) .txt22 { font-size: 22px; }
	 body:not(:root:root) .txt23 { font-size: 23px; }
}
*/
/* END SAFARI HACKS
===============================================*/

.spaceDescription { padding: 10px 25px; width: 320px; text-align: center; margin: 0 auto; font-size: 14px; display:block; }

/* ============================================
BEGIN POLLS STYLES
===============================================*/
a.responderNames { display: block; clear: both; height: 15px; padding-top: 3px; position: relative; cursor: default; }
a.responderNames span { display: none; }
a.responderNames:hover span { display: block;
position: absolute;
top: -25px;
line-height: 21px;
font-size: 13px;
color: #fff;
left: 50px;
text-decoration: none;
background: #44444f;
padding: 5px;
border-radius: 7px;
width: 270px;
border: none;
z-index: 1000;
overflow: scroll;
padding: 8px 16px;
height: 105px;
opacity: 0.95;
box-shadow: #999 3px 3px 10px 1px; 
}

.responseLabel, .responseCount, .responseRateBar, .responseGlass {float:left;}
.responseHeader { width: 505px; }
.responseLabel { text-align: left;  }
.responseCount { text-align: right; padding-right: 5px; line-height: 19px; position: relative; bottom: 0px; }

div#pollContent { padding-top: 10px; }

.pollOptions div { margin:6px;margin-left:20px; }
.pollOptions div a { padding: 4px 15px; text-decoration:none; }
.pollOptions div a:hover { background: rgb(100,137,165); border-radius: 25px; color: #fff; }
.noshow { height: 0px; width: 0px; }

.pollHolder { width: 620px; border-radius: 10px; }
.pollHeader { border-bottom: solid 1px #aaa; display: block; text-indent: 5px; padding: 9px 8px 6px 8px; }
.pollFooter { width: 590px; height: 32px; border-top: solid 1px #aaa; padding: 0 0 0 10px; margin: 20px 0 0 0; }
.pollFooter div { line-height: 32px; margin-left: 8px;  }
.pollFooter a {  padding: 2px 10px; text-decoration: none; }
.pollFooter a:hover { background: rgb(100,137,165); border-radius: 25px; color: rgb(244,244,246); }
.pollResponseLeft {width: 99px; float: left; clear: left; position: absolute; bottom: 1px;}
.pollResponseRight { width: 440px; float: right; clear: right; }
.responseCount {float: right; text-align: right; font-size: 18px; font-weight: 300; }
.pollBar { float: left; width: 376px; position: relative; }
.pollBG { height: 10px; position: relative; width: 375px; border: solid 1px #ccc; padding: 0; border-radius: 7px; }
.responseRateBarTen { height: 10px; position: absolute; top: 0; left: 0; border-radius: 5px; }
.pollPercent { text-indent: 5px; right: 0; width: 62px; font-size: 17px; position: absolute; bottom: -3px; }



/* END Polls Styles
===============================================*/


.avatarExtraSmall { height: 20px; width: 20px; padding: 2px; }
.avatarSmallRound { height: 45px; width: 45px; padding: 2px; border-radius: 40px; }
.avatarSmall { height: 50px; width: 50px; padding: 2px; }
.avatarMedium { height: 75px; width: 75px; padding: 0px; }
.avatarLarge { height: 70px; width: 70px; border-radius: 40px; }

.checkboxen label { padding-right:6px; }

th { text-align:left; font-weight: 700; }

.override { float:right;width:330px;margin-top:45px; }
.override div.newsHolder { width:315px;float:right;margin-right:10px; }
.override div.clearing-top { width:300px; }
.override div div.spaceDescription { width:263px; }

.postLinks a#attachmentDownload { position: relative; top: 12px; font-size: 11px; padding: 3px 3px 0px 14px; max-width: 400px; width: auto; line-height: 25px; font-size:14px; }

.profile-row { float: left; display:block; height: 44px; width: 658px; overflow:hidden; }

.profile-row .hubFormLabel { margin-top: 6px; float: left; line-height: 26px; }
.profile-row .hubFormInput { float: left; }
.profile-row .hubFormInput select { margin-top: 4px; }

.hubFormInput.label-less { margin-left: 137px; }
.profile-row.phone-numbers { height: auto; }
.profile-row .short-form-input { float: left; }

select { font-size: 16px; }

#your-hubs { top: 75px; right: 15px; width: 436px; border-radius: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.new-modal { position:absolute; display:none; z-index: 110;background: rgb(244, 244, 246); border-radius: 8px; }

.new-modal .contentBoxHeader, .new-modal .contentBoxHeaderLeft, .new-modal .contentBoxHeaderRight,
.new-modal .contentBoxFooter, .new-modal .contentBoxFooterRight, .new-modal .contentBoxFooterLeft { background: none; }
#your-hubs-bg { opacity: 0.4; cursor: pointer; }
#your-hubs div.rowItem span.left { width: 160px; }

.hubFormLabel { line-height: 29px; }

#plan-chooser { width: 500px; top: 100px; left: 258px; }
#plan-chooser p { background: #dedede; padding: 25px;padding-bottom:10px; }
#plan-chooser ul { background: #dedede; padding-left: 35px;padding-bottom: 25px; }
#plan-chooser ul li { line-height: 32px; }
#plan-chooser ul li label { padding-left: 5px; }

table.membership-preferences { width: 700px; }

#payment-form select { padding: 3px; font-size: 16px; color: #444; height: 32px; line-height: 32px; border: 1px solid #CCC; border-radius: 3px; margin-right: 10px; float:left; }
.translucent-form label.for-select { float: right; margin-right: 23px; }

.payment-left-side { width: 310px; float:left; margin-top: 0px; padding-right: 20px; }
.payment-left-side p.small { background: #ddd; font-size: 11px; margin-left: 0; padding: 4px 8px; position: relative; left: -4px; }
.payment-right-side { width: 530px; float:left; margin-top: 35px; }
.payment-info-entry { padding: 25px; overflow:hidden; }


.payment-right-side p.footnote { margin-left: 25px; padding: 12px 0px 0px 3px; border-top: dotted 1px #aaa; margin-top: 12px; text-align: center; color: #777; font-size: 12px; text-shadow: 0 1px 0 #eee; line-height: 1.8em; }
.payment-right-side p.footnote span.dark { color: #444; font-size: inherit; }

#annual-details { display:none; }

.payment-plan { width: 100%; height: 185px; margin: 0 0 35px 35px; background: #eee; background: rgba(255,255,255,0.45); display: block; float: left; clear: none; border: solid 1px #bbb; border-radius: 3px; text-decoration: none; text-shadow: 0 1px 0 #fff; box-shadow: 0px 1px 3px #bbb; box-shadow: 0px 1px 3px rgba(0,0,0,0.1); position: relative; }
a.payment-plan:hover { background: #f8f8f8; background: rgba(255,255,255,0.85); }
.payment-plan.selected { background: #f8f8f8; background: rgba(255,255,255,0.85); box-shadow: 0px 0px 6px #0088dd; box-shadow: 0px 0px 6px rgba(0,140,255,0.55); border-color: #888; }

.payment-plan span { display: block; clear: both; margin: 0 auto; text-align: center; font-size: 10px; color: #777; z-index: 10; }
.payment-plan strong { height: 85px;line-height: 45px; width: 75%; display: block; clear: both; margin: 0 auto 10px; float: none; text-align: center; font-size: 66px; border: solid 1px #ccc; border-width: 1px 0 1px; padding: 15px 0; }
.payment-plan .price-name { font-size: 12px; font-weight: 600; color: #444; text-shadow: 0 1px 0 #fff; margin: 10px 0; }
.payment-plan .change-period:hover { color: #0066cc; text-decoration: underline; font-weight: 600; }
span.plan-arrow { display: none; }
.payment-plan.year { display:none; }

.payment-left-side a.no-thanks { background: none; color: #666; text-shadow: 0 1px 0 #fff; margin: 15px 0; padding: 0; line-height: 11px; display: block; text-decoration: none; font-size: 11px; }
.payment-left-side a.no-thanks:hover { background: none; color: #333; }

.form-row { line-height: 22px; padding: 4px 0px 4px; }
.form-row.button {
  margin-top: 5px;
}

.form-row input[type="text"] {
  background: #fafafa;
  border: solid 1px #999;
  font-size: 18px;
  outline:none; padding: 4px;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px #bbb;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.form-row input:focus, .form-row input[type="text"]:focus,.form-row input[type="text"]:hover { 
  background: #fff;
  border: solid 1px #555;
}

.form-row input:focus, .form-row input[type="text"]:focus { 
  box-shadow: 0px 0px 6px #0088dd; 
  box-shadow: 0px 0px 6px rgba(0,140,255,0.55); 
  border-color: #888; 
}


.form-row label { display:block; font-weight: 600; padding-left: 3px; }

#freeloader-message, #delayed-message { text-align: center; background: rgb(100,137,165); color: #fff; font-size: 17px; margin: 0px 0 15px 0; padding: 10px; border-radius: 20px; border: solid 1px rgb(102,139,167);}
#freeloader-message a, #delayed-message a { color: #fff; }
#payment-buttons { margin-top: 5px; }
#payment-buttons input { display:inline-block; margin-right: 5px; }
#remind_me { padding: 5px 10px 5px; }

.form-row.button button.btn { font-size: 15px; }

.contentBox a.btn, .btn {
  text-decoration: none;
  display: inline-block;
  color: #777;
  text-align: center;
  border: 1px solid #bbb;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: .3em;
  text-transform: uppercase;
  background: #fff;
  font-weight: 500;
  padding: 7px 25px 7px;
  font-size: 15px;
  line-height: 28px;
}

.btn.btn-medium {
  padding: 7px 25px 7px;
  font-size: 15px;
  line-height: 28px;
}
.btn:first-child {
  margin-left: 0;
}
.btn:hover {
  color: #f06b1f;
  border-color: #f06b1f;
  
}
.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn.active, .btn:active {
  background-image: none;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: #e6e6e6;
  background-color: #d9d9d9;
  color: rgba(0, 0, 0, 0.5);
  outline: 0;
}
.btn.disabled, .btn[disabled] {
  cursor: default;
  background-image: none;
  background-color: #e6e6e6;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.btn-primary {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(top, #0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  background-color: #0044cc;
}
.btn-primary:active, .btn-primary.active {
  background-color: #003399 \9;
}
.btn-primary,
.btn-primary:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

.btn.btn-danger { background: #c44; color: #fff; margin-top: 12px; }
.btn.btn-danger:hover { text-decoration: none; color: #eee; background: #e44; }

.small-button { height: 14px; line-height: 14px; padding: 0; }

div.demo-hub-form { width: 350px; }
.new_hub .demo-hub-form label { display:block; }
.new_hub .demo-hub-form input#hub_name { font-size: 20px; height: 30px; width: 200px; display:block; }
.new_hub .form-row.button { display:block; margin-top: 30px; }
.new_hub .form-row.button .btn { float: left; height: 30px; display: block; }

.photo-container { float:right; position: relative; }
.photo-container .caption { color: #222; padding: 8px; display: block; position: absolute; bottom: 0; left: 0; width: 100%; background: rgb(250,250,250); background: rgba(215,215,215,0.8)}
.demo-photo { height: 400px;  }

table thead tr td { font-weight: 500; }
table tbody tr td.numeric { text-align: right; }
table tbody tr th { font-weight: 700; }
table tbody tr.error td { color: red; }
table.stats tbody tr td,table.stats tbody tr th { padding: 4px; }

div.rotation-controls {
  padding: 5px;
  text-align: center;
  color: #333;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: rgba(255,255,255,0.6);
  text-shadow: 0 1px 0 #eee;
  position:absolute; 
  bottom: 15px; left: 0;
  display:none; 
  width: 100px;
}
a.rotate-image {
  margin: 4px;
  opacity: 0.6;
  display:inline-block;
  width: 32px; height: 32px;
  background: url("/assets/spokt-sprite-4c0b2ade.png") -2px -20px no-repeat;
}

a.rotate-image.clockwise {
  background-position: -32px -20px;
  right: 54px;
}

a.rotate-image:hover {
  opacity: 1;
}

div.post_photo:hover div.rotation-controls { display: block; font-size: 13px; }
div.rotation-controls:hover { background: rgba(255,255,255,0.8);}

table.invitation-list tr th { font-size: 13px; padding: 3px;  }
table.invitation-list tr td { font-size: 13px; padding: 3px;  }
table.invitation-list tr td a { font-size: 13px; }


#homeLogin { float: right; display: inline; clear: none; margin-right: 8px; }
#homeLogin div.form { width: 545px; }

.hidden { display:none; }

.showmore { text-align: center; height: 31px; line-height: 32px;}
.showmore a { color: #aaa; }

.avatarImage { width: 48px; height: 48px; margin: 0 auto; overflow: hidden; display: block; }

.unaccepted-invitation-list { width: 100%; margin: 0; }
.unaccepted-invitations-box { margin: 20px 0;}
.unaccepted-invitations-box h2 { margin-top: 20px; }
.data-row .row-item, .unaccepted-invitation-list .row-item { float: left; width: 30%; line-height: 32px; height: 32px; }
.data-row.warning { background: rgba(250,0,0,0.04); }
.data-row.counts-match { background: rgba(0,250,0,0.05); }

.unaccepted-invitation-list .row-item-header { font-weight: 600; }
.unaccepted-invitation-list .join-hub a { color: #da6a25; font-weight: 600; }
.unaccepted-invitation-list .join-hub a:hover { color: #fa8a45; }
.unaccepted-invitation-list .join-hub { text-align: center; }
.unaccepted-invitation-row { margin-bottom: 5px; }

.hub-membership-row .row-item { width: 160px; font-size: 13px; line-height: 18px; height: auto; }
.hub-membership-row .row-item.hm-rank { width: 60px; }
.row-item.hm-status { width: 250px; }
#admin .admin-tool .hub-membership-row .row-item.hm-stats { font-size: inherit; width: 125px; }
.row-item.hub-payment { width: 200px; }

.hub-name { width: 203px; display: block; float: left; line-height: 1.5em; }
.next-unviewed { padding: 0 8px; }

.admin-payment-list { max-height: 140px; overflow: scroll; }
.small-admin-item { font-size: 12px; text-transform: uppercase; line-height: 25px; font-weight: 500; color: #777; }

#admin .admin-tool .hub-membership-row .row-item.row-item-discussions { width: 160px; }
.new-site-row .export-counts em.step-name { font-size: 25px; opacity: 0.1; }


table.admin-table { border-bottom: solid 1px #efefef; }
table.admin-table td { color: #555; font-size: 13px; border-top: solid 1px #efefef; padding: 5px; }
table.admin-table td .small-button { width: 100%; font-size: 12px; padding: 5px 0; height: 42px;}

tr.inquiry-review td textarea.inquiry-message { width: 100%; }
tr.inquiry-review.marked-as-spam td textarea.inquiry-message { color: #a00; }

.filter-reason {font-size: 12px; color: #888; text-align: center; }

#update-in-progress { display:none; }

.spam-it { color: #c00; }
.unspam-it { color: #0a0; }

.mf-payment-status a { font-size: inherit; }

form.conact-us-form label { display:block; margin: 10px 0 5px 0; }

.avatarImage, .avatarImage .pic, .avatarImage .pic img { width: 48px;   height: 48px; padding: 3px; }
.avatarImage .pic, .avatarImage .pic img { margin: 0; padding: 0; }
.avatarImage .pic { display: block; }

.postText p { width: auto; }

.replyPost.dynamic {
  border-top: none;
  margin: 7px 13px 0 0;
  position: relative;
  height: auto;
  margin-left: 100px;
  box-sizing: border-box;
}


.light, .light a {
color: #bbb;
text-decoration: none;
}

div.replyPost.dynamic div.replyControls {
  float: right;
  width: 200px;
  margin-top:10px;
  text-align: right;
  position:relative;
}

form.reply_form { padding: 15px 0; border-top: dashed 1px #ccc; }

.replyPost.dynamic textarea {
  width: 585px;
  min-height: 70px;
  border-color: #ccc;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
	width: 100%;
	margin-right: 15px;
	box-sizing: border-box!important;
}
.replyPost.dynamic .btnPost {
  float: right;
}
.reply-spinner {
  position:absolute;
  left: -12000px;
  top: 8px;
}
.reply-spinner.visible {
  left: 80px;
  top: 15px;
}
.pollResponseContainer {
  width: 540px; clear: both; position: relative; margin: 7px 0;
}

.special_info {
  display:none;
}

.pagination em, .pagination .disabled { color: #888; }

.video-js-box { float: left; border-radius: 10px; overflow: hidden; margin-top: 25px; }
.vjs-default-skin { color: #ffffff; }
.vjs-default-skin .vjs-loading-spinner::before { color: #fff; }
.vjs-default-skin .vjs-big-play-button::before { line-height: 1.6em; }
.vjs-default-skin .vjs-control-bar { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.vjs-default-skin .vjs-control-bar * { font-size: 1em; color: #ccc; }
.vjs-default-skin .vjs-control-bar,
.vjs-default-skin .vjs-big-play-button { color: #eee; background: rgba(0,0,0,0.4); }
.vjs-default-skin .vjs-big-play-button {
    border-color: rgba(255, 255, 255, 0.85);
    top: 162px;
    left: 282px;
    height: 80px;
    width: 155px;
    border-radius: 65px; 
}
.vjs-default-skin .vjs-slider { background: rgba(0,0,0,0.17666666666666667) }
.vjs-default-skin .vjs-control-bar { font-size: 118% }

.more-unviewed-for-you em { font-weight: 600; font-style: normal; color: #e06b00; }
.newsHolder .more-unviewed-for-you em { color: #444; }

.fullWideHolder .adjust-link-message { display: none; }

.newsHolder .adjust-below-message { display: none; }
.newsHolder .adjust-link-message a { color: #f06b00;  font-weight: 600; }

.new-hub-box p.after-new-hub-message { padding-left: 10px; padding-top: 20px; }
.pricing-box { float: right; width: 250px; position: absolute; top: 30px; right: 65px;  }
.pricing-box * { text-align: center; }
.pricing-box h1 { font-size: 25px; }
.big-price { font-size: 75px; text-align: center; }
.pricing-box p { margin-top: 7px; }


.reply-link {  }
.rootPost:hover a.reply-link, .replyPost:hover a.reply-link { display:inline; color: #e68630; }
.rootPost:hover a.reply-link:hover, .replyPost:hover a.reply-link:hover { color: #e1812c; }

/* ========================== 2014 styles ========================== */


* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: Lato, Raleway, "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; }

a { font-weight: 400; }

body { /* background: #101415; */ }
body.modal { background: #fff; }
body#home { width: 100%; height: 100%; }

#header { height: 75px; width: 100%; background: rgb(26, 30, 31); background: rgba(26, 30, 31,0.93); position: relative; }
#home #header .inner, #header .inner { width: 1140px; margin: 0 auto; padding: 0 15px; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.homePage #header { z-index: 50; }

.inner { width: 1000px; margin: 0 auto; padding: 0 15px; }

.inner .site-nav { float: right; line-height: 75px; height: 75px; }
.inner .site-nav a { display: block; float: left; margin: 0 15px; color: #ddd; }
.inner .site-nav a:hover { color: #fff; }

.hubsLink { font-weight: 600; }

.logo { width: 190px; height: 50px; display: block; float: left; background-image: url("/assets/spokt-sprite-new-9edf67af.png"); background-position: -23px -40px; margin-top: 14px;  }

a.button { border: solid 1px white; line-height: 38px; padding: 0 20px; border-radius: 5px; color: #fff; }

#header .inner .site-nav a.button { margin-top: 18px; }
#header .inner .site-nav a.button:hover { background: white; color: #333; }

.content-wrap { width: 1000px; position: relative; z-index: 1; background: #fff; margin: 0 auto; }
.content-wrap.wide-pages { width: 100%; }
.content-wrap.top-page-hero { margin-top: -76px; }


.hero-copy { padding-top: 75px; padding-left: 15px; z-index: 10; position: relative; min-height: 700px; margin: 0 auto; width: 1000px; }
.hero-image { position: absolute; top: 0; left: 0; z-index: 1; min-height: 700px; width: 100%; }

.hero-image.signup-hero-image { right: 0; bottom: 0; min-height: 500px; height: auto; }
.hero-image.signup-hero-image .hero-inner { height: 100%; }
.hero-inner { height: 700px; overflow: hidden; }

.hero-inner img { width: 100%; }

.hero-image.signup-hero-image-2 { min-height: 500px; height: 500px; width: 100%; }
.hero-inner.hero-inner-3 { min-height: 500px; height: 500px; }

.hero-copy h1 { font-size: 110px; font-family: "Chaparral Pro", "Brandon Grotesque", "Helvetica Neue", Helvetica, sans-serif; font-weight: 100; color: white; line-height: 0.85em; text-transform: uppercase; }
.hero-copy h1 br { font-size: 1px; height: 1px; clear: both; line-height: 1px; width: 100%; }


.hero-copy-inner.checkout-box .plan-chooser {
  float: left;
  margin: 0 20px;
  width: 230px;
  height: 170px;
  background: #f05b00;
  background: rgba(53, 91, 127, 0.4);
  border: 0;
  padding: 15px;
  color: rgba(244,244,244, 0.7);
  text-align: center;
  border-radius: 6px;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
}
.hero-copy-inner.checkout-box .plan-chooser.selected {
  background: rgba(242, 100, 42, 0.9);
  color: white;
}
.hero-copy-inner.checkout-box .plan-chooser.selected a {
  display:none; 
}

.plan-chooser span.selected-indicator {
  display:none; 
}

.hero-copy-inner.checkout-box .plan-chooser:hover {
  color: white;
}

.hero-copy-inner.checkout-box .plan-chooser .plan-name {
  text-transform: uppercase;
  font-size: 28px;
}
.hero-copy-inner.checkout-box .plan-chooser .amount {
  font-size: 20px;
}


.hero-copy-inner.checkout-box .plan-chooser a,.plan-chooser.selected span.selected-indicator {
  display: block;
  margin: 15px 0;
  color: rgba(244,244,244, 0.7);
  border: solid 1px #fff;
  border: solid 1px rgba(255,255,255,0.4);
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 18px;
  line-height: 30px;
  height: 42px;
}
.hero-copy-inner.checkout-box .plan-chooser.selected a, .hero-copy-inner.checkout-box .plan-chooser:hover a,.plan-chooser.selected span.selected-indicator {
  color: white;

}
.plan-chooser.selected span.selected-indicator {
  color: rgba(242, 100, 42, 0.9);
  background: white;
  border: none;
  /* margin-left: -15px; margin-right: -15px;
  border-radius: 0; */
}

.signup-hero-copy h1, h1.section-header { font-family: "Raleway", "Helvetica Neue", Helvetica, sans-serif; font-weight: 200; color: #575757; font-size: 38px; text-transform: uppercase; text-align: center; margin: 60px auto; }
.login-wrapper, .signup-form-wrapper { width: 600px; margin: 0 auto; background: #111; background: rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.2), inset 0 0 350px rgba(0,0,0,0.25);
padding: 35px 35px 25px 35px; margin-bottom: 40px; }
.login-wrapper .big-button { width: auto; margin-top: 10px; }
.hero-copy-inner .login-wrapper p { margin-bottom: 0; }


.signup-form-wrapper.mayflower { width: 700px; box-shadow: 0 0 50px rgba(0,0,0,0.3), inset 0 0 550px rgba(0,0,0,0.75); }

.signup-hero-copy-2 { min-height: 0; height: auto; }
.signup-hero-copy-2 h1.section-header { color: #fff; line-height: 1.4em; margin: 10px 0 30px; }
.signup-hero-copy-2 h1.section-header span { color: inherit; font-size: inherit; font-weight: 400; }
.signup-hero-copy-2 p.section-header { color: #fff; }
.signup-hero-copy-2 a.big.button { color: #fff; border-color: #fff; margin-bottom: 90px; font-weight: 300; font-size: 26px; line-height: 72px; }
.signup-hero-copy-2 a.big.button:hover { color: #333; background: #fff; }

/* Demo hero section: overlay text on hero image */
.demo-hero-section { position: relative; overflow: hidden; }
.demo-hero-section .hero-image.signup-hero-image-2 { position: absolute; top: 0; left: 0; z-index: 1; }
.demo-hero-section .signup-hero-copy-2 { min-height: 500px; height: 500px; }

.signup-hero-copy-inner h3 { color: #fff; font-family: "Chaparral Pro", "Brandon Grotesque", Raleway, "Helvetica Neue", Helvetica, sans-serif; font-size: 26px; text-transform: uppercase; line-height: 1.3em; margin-bottom: 8px; }
.reset-pass-link { color: #fff; text-decoration: underline; margin: 0 auto 15px; display: block; }


.translucent-form textarea:focus, 
.translucent-form input[type=tel]:hover, 
.translucent-form input[type=tel]:focus, 
.translucent-form input[type=password]:hover, 
.translucent-form input[type=password]:focus, 
.translucent-form input[type=text]:hover, 
.translucent-form input[type=text]:focus { color: #fff; background: #333; background: rgba(255,255,255,0.11); border: solid 1px white; border: solid 1px rgba(255,255,255,0.09);  }


.signup-box .translucent-form input:hover, .signup-box .translucent-form input:focus { border-color: rgba(59, 143, 148, 0.5); color: rgba(59, 143, 148, 1); }
.signup-box .translucent-form input[type=submit] { width: auto; }

.translucent-form textarea, .translucent-form input { font-size: 16px; line-height: 24px; padding: 13px 15px; color: #fff; background: #333; background: rgba(255,255,255,0.11); border: solid 1px white; border: solid 1px rgba(255,255,255,0.09); border-radius: 7px; width: 350px; float: left; margin-right: 15px; margin-bottom: 15px; }
.translucent-form input#password { width: 85%; }

.translucent-form .clearfix.form-line { position: relative; }
.translucent-form a.show-password { color: #fff; width: 14%; position:absolute; right: 0px; bottom: 13px; text-align: center; border: solid 1px #fff; border-radius: 4px; padding: 6px; font-size: 12px; }
.translucent-form a.show-password:hover { color: #f05b00; border-color: #f05b00;}

.login-wrapper .translucent-form label, .translucent-form label { float: left; line-height: 52px; color: white; font-size: 16px; text-transform: uppercase; }
.login-wrapper .translucent-form label { float: left; line-height: 52px; color: white; font-size: 16px; text-transform: uppercase; margin: 15px 0 8px 12px; line-height: 1.2em; color: #ddd; font-size: 14px; }

.translucent-form .screen-createUser { display:none; }
#stripe_error, .inline-error { display: block; color: #fff; background: #e92; background: rgba(255,140,40,0.7); clear: both; padding: 10px; margin-bottom: 15px; border-radius: 5px; font-size: 15px; }
#stripe_error { display:none; }

.translucent-form-narrow input[type=text], .translucent-form-narrow input[type=password] {
  width: 190px;
}
#already_spokt h3, #new_to_spokt h3 { cursor: pointer; }

.home-hero-copy-inner { position: absolute; bottom: 0; padding-bottom: 75px; }

.hero-copy-inner p { margin-bottom: 20px; }
.signup-hero-copy-inner p { color: #fff; font-family: "Raleway", "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; line-height: 1.7em; }
p.subline { color: #bbb; font-size: 15px; margin-bottom: 0; }
.signup-hero-copy.inner p.subline { margin-top: 12px; padding-right: 50px; margin-bottom: 0; }


.home-hero-copy-inner p span { color: #fff; font-size: 21px; font-family: "Raleway", "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; display: block; line-height: 1.6em; font-weight: 300; }

.home-hero-iti-links a.button { font-size: 18px; margin-left: 0; text-transform: none; }
.home-hero-iti-links a.button:hover { color: #333; background: white; }
.home-hero-iti-links a { margin-left: 20px; line-height: 38px; display: block; float: left; color: #fff; font-size: 15px; text-transform: uppercase; }
.home-hero-iti-links a.home-demo-link { float: none; font-size: 18px; color: rgba(255,255,255,0.8); color: rgba(255,255,255,1);font-weight: 600; margin-left: 0; }
.home-hero-iti-links a.home-demo-link:hover { color: #77fbb7; }


body #home #pageWrap { min-height: auto!important; }
#pageWrap { background: #fff; }

.big-button, a.big-button { cursor: pointer; font-size: 18px; line-height: 52px; padding: 0 45px; color: #fff; background: rgb(79,79,79); background: rgba(79,79,79,1); border-radius: 5px; display: inline-block; text-transform: uppercase; font-weight: 500; border: none; } 
.big-button:hover, a.big-button:hover { background: rgba(79,193,122,1); text-decoration: none; } 
.big-button.disabled, .big-button.disabled:hover, a.big-button.disabled, a.big-button.disabled:hover { cursor: default; background: rgb(180,180,180); background: rgba(180,180,180,1); }

.big-button.green, .secondary-checkout .signup-box .big-button.green { cursor: pointer; font-size: 18px; line-height: 52px; padding: 0 45px; color: #fff; background: rgb(79,193,122); background: rgba(79,193,122,0.88); border-radius: 5px; display: inline-block; text-transform: uppercase; font-weight: 500; border: none; } 
.big-button.green:hover { background: rgba(79,193,122,1); } 

.big-button.green.disabled, .big-button.green.disabled:hover, .secondary-checkout .signup-box .big-button.green.disabled, .secondary-checkout .signup-box .big-button.green.disabled:hover { cursor: default; background: rgb(20,100,30); background: rgba(20,91,30,0.9); }

#already_spokt .big-button, #new_to_spokt .big-button { font-size: 18px; line-height: 52px; padding: 0 45px; display: inline-block; text-transform: uppercase; font-weight: 500; }


.three-col-wrapper { margin-bottom: 60px; }
.three-col-wrapper .column { width: 32%; float: left; padding: 0 35px; }
.three-col-wrapper .column-1, .three-col-wrapper .column-2 { margin-right: 2%; }

.three-col-wrapper .column .thumb-wrapper { width: 250px; height: 250px; border-radius: 250px; border: solid 1px #d3d3d3; box-shadow: 0 0 12px rgba(0,0,0,0.14); overflow: hidden; }

.three-col-wrapper .column .thumb-wrapper img { width: 100%; }

.three-col-wrapper .column h1 { text-align: center; font-size: 19px; font-family: "Chaparral Pro", "Brandon Grotesque", Raleway, "Helvetica Neue", Helvetica, sans-serif; color: #575757; line-height: 1.5em; margin: 25px auto 10px; text-transform: uppercase; }

.three-col-wrapper .column p { text-align: center; font-size: 15px; font-family: "Raleway", "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; color: #575757; line-height: 1.6em; margin: 15px auto; margin-top: 0; padding: 0 5px; }

.big.button { display: inline-block; color: #ccc; font-size: 32px; font-family: "Raleway", "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; line-height: 80px; padding: 0 60px; border: solid 1px #ccc; border-radius: 5px; }

.big.button:hover { color: #2a2a2a; background: #fff; border-color: #fff; }

.iti.teal .big.button { border-color: #3fb9d8; color: #3fb9d8; }
.iti.teal .big.button:hover { background: #3fb9d8; color: #fff; }
.iti.teal p { color: #2d9aaf; color: #0aa5c1; }



.signup-page .big.button { margin: 0 auto; float: none; }
.no-account-link { text-align: center; display: block; margin: 0px auto; margin-top: -15px; margin-bottom: 80px; font-size: 18px; font-weight: 500; color: #fff; text-transform: uppercase; }


.iti p { color: #a4a4a4; font-size: 15px; text-align: center; margin: 15px auto 80px; width: 430px; }


body#hub-pages *, #hub-pages * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;  }

#hub-pages .contentWrap { padding-bottom: 23px; }






/* ================================================================= */
/* ==================== New Home Page Styles ======================= */
/* ================================================================= */

.three-col-wrapper .column p { color: #bbb; }
.three-col-wrapper .column h1 { color: #ccc; }
h1.section-header { color: #aaa; }
.content-wrap.wide-pages.signup-page { padding-top: 10px; background: #2a2a2a; }
.three-col-wrapper .column .thumb-wrapper { border: solid 1px #333; }
.testimonial-container { margin-bottom: 30px; }
.testimonial-wrapper { margin: 0px auto 50px; }
.testimonial-wrapper .attribution { margin-top: 15px; font-size: 20px; color: #888; margin-left: 35px; font-weight: 300; }
.testimonial-wrapper .attribution span { display: block; clear: both; font-weight: 200; }
.testimonial-wrapper .testimonial { border: solid 1px rgba(45, 154, 175, 0.26); position: relative;
 /* border: solid 1px rgba(45, 154, 175, 0.26); */ border: none; /* border-radius: 15px; */ padding: 25px 205px 25px 35px; padding-right: 25px; background: rgba(45, 154, 175, 0.0); box-shadow: 0 5px 25px rgba(0,0,0,0.15);

 }
 
.testimonial-wrapper .testimonial .quote { color: #2d9aaf; line-height: 1.65em; color: rgba(45, 154, 175, 0.96); color: #0aa5c1; }
.content-wrap.wide-pages.testimonials { overflow: hidden; width: 100%; display: block; }

 .testimonial-arrow { width: 12px; height: 12px; background: #fff; position: absolute; bottom: -6px; left: 45px; box-shadow: 5px 5px 10px rgba(0,0,0,0.10);
 transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */
 }
 
.signup-hero-copy-2 h1.section-header.demo-hub-blurb { line-height: 1.1em; margin: 10px 0 100px; }
 
 
/* =================================================================
.testimonial-wrapper.short { padding: 0 75px 0 165px; }
.testimonial-wrapper.short .testimonial .quote { font-size: 24px; line-height: 1.55em; }
.testimonial-wrapper.medium { padding: 0 100px 0 80px; }
.testimonial-wrapper.medium .testimonial .quote { font-size: 20px; }
.testimonial-wrapper.long { padding: 0 70px 0 130px; }
.testimonial-wrapper.long .testimonial .quote { font-size: 17px; }

================================================================= */
 
.testimonial-wrapper.short { padding: 0 125px; }
.testimonial-wrapper.short .testimonial .quote { font-size: 24px; line-height: 1.55em; }
.testimonial-wrapper.medium { padding: 0 20px; }
.testimonial-wrapper.medium .testimonial .quote { font-size: 20px; }
.testimonial-wrapper.long { padding: 0 50px; }
.testimonial-wrapper.long .testimonial .quote  { font-size: 17px; }


.testimonial-wrapper.short { padding: 0 215px; }
.testimonial-wrapper.medium { padding: 0 110px; }
.testimonial-wrapper.long { padding: 0 140px; }


.testimonial-pic { width: 170px; height: 100%; background: #eee; display: block; position: absolute; top: 0; right: 0; }

/* ================================================================= */
/* ================== END New Home Page Styles ===================== */
/* ================================================================= */








.translucent-form input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 1)
}

.translucent-form input:focus::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6)
}

/* .translucent-form input:focus + label { color: rgb(57, 203, 255); } */

.translucent-form input:-moz-placeholder {
    color: rgba(255, 255, 255, 1)
}

.translucent-form input:focus:-moz-placeholder {
    color: rgba(255, 255, 255, 0.6)
}


.terms-of-service { padding-right: 20%; }
.terms-of-service h1 { font-size: 30px; margin-bottom: 15px; }
.terms-of-service p { font-size:13px; margin-bottom: 25px; }


input { -webkit-appearance: none; }
input[type=checkbox] { -webkit-appearance: checkbox; }

.big.button.hub-pay-btn { display: table; margin: 0 auto; background: #fff; }
.big.button.hub-pay-btn:hover { background: #616161; }

.mayflower-sidebar-iti { background: url("/assets/MayFlower-06610251.png") 0 0; height: 237px; width: 178px; display: block; margin: 0 0 20px; border-radius: 8px; border: solid 1px #ccc; }

.mayflower-sidebar-iti:hover { background-position: 0 -246px; }
.mayflower-hero-inner { position: relative; z-index: 10; padding-bottom: 120px; }

.sub-column { width: 180px; float: left; }
.hero-inner.mayflower { height: 100%; }

.mayflower-hero-header { background-image: url("/assets/mayflower-sprite-f5cbc72d.png"); height: 350px; width: 800px; margin: 0 auto; }
.mayflower-hero-image.hero-image { height: 100%; min-height: 0; }


.mayflower-hero { padding-top: 86px; overflow: hidden; position: relative; margin-top: -76px; }
.mayflower-hero-info { width: 100%; background: #49b29f; background: rgba(73,178,159,0.8); padding: 20px; line-height: 1.3em; color: #fff; }
.mayflower-hero-info p { width: 1000px; line-height: 1.3em; color: #fff; margin: 0 auto; text-align: center; font-size: 26px; font-weight: 500; text-transform: uppercase; }
.mayflower-hero-info p strong { line-height: 1.3em; line-height: inherit; color: #fff; font-size: 26px; font-size: inherit; font-weight: 700; text-transform: uppercase; text-transform: inherit; }


.mayflower-hero-iti-wrapper { text-align: center; } 
.mayflower-hero-iti.button { padding: 25px 50px; color: #fff; font-size: 30px; font-weight: 500; border: none; background: #f96a53; background: rgba(240,104,56,0.9);background: #f96a53; border: solid 1px transparent; display: inline-block; margin-top: 70px; }
.mayflower-hero-iti.button:hover { background: #fff; color: #f96a53; }

.meet-mayflower .mayflower-hero-iti.button { margin-top: 40px; background: #4FBFAB; }
.meet-mayflower .mayflower-hero-iti.button:hover { background: #fff; border: solid 1px #34A490; color: #34A490; }

.mayflower-in-stages .mayflower-hero-iti.button { margin-top: 40px; background: #fff; color: #f96a53; }
.mayflower-in-stages .mayflower-hero-iti.button:hover { background: transparent; border: solid 1px #fff; color: #fff; }



.harbor-sidebar-iti { background: url(<%= asset_path 'harbor.png' %>) 0 0; height: 237px; width: 178px; display: block; margin: 0 0 20px; border-radius: 8px; border: solid 1px #ccc; }

.harbor-sidebar-iti:hover { background-position: 0 -246px; }
.harbor-hero-inner { position: relative; z-index: 10; padding-bottom: 120px; }

.sub-column { width: 180px; float: left; }
.hero-inner.mayflower { height: 100%; }

.harbor-hero-header { background-image: url(<%= asset_path 'harbor-sprite.png' %>); height: 350px; width: 800px; margin: 150px auto 80px; }
.harbor-hero-image.hero-image { height: 100%; min-height: 0; }

.harbor-hero { padding-top: 86px; overflow: hidden; position: relative; margin-top: -76px; }
.harbor-hero-info { width: 100%; background: #49b29f; background: rgba(73,178,159,0.8); padding: 20px; line-height: 1.3em; color: #fff; }
.harbor-hero-info p { width: 1000px; line-height: 1.3em; color: #fff; margin: 0 auto; text-align: center; font-size: 26px; font-weight: 500; text-transform: uppercase; }
.harbor-hero-info p strong { line-height: 1.3em; line-height: inherit; color: #fff; font-size: 26px; font-size: inherit; font-weight: 700; text-transform: uppercase; text-transform: inherit; }


.harbor-hero-iti-wrapper { text-align: center; } 
.harbor-hero-iti.button { padding: 25px 50px; color: #fff; font-size: 30px; font-weight: 500; border: none; background: #f96a53; background: rgba(240,104,56,0.9);background: #f96a53; border: solid 1px transparent; display: inline-block; margin-top: 70px; }
.harbor-hero-iti.button:hover { background: #fff; color: #f96a53; }

.meet-harbor .harbor-hero-iti.button { margin-top: 40px; background: #4FBFAB; }
.meet-harbor .harbor-hero-iti.button:hover { background: #fff; border: solid 1px #34A490; color: #34A490; }

.harbor-in-stages .harbor-hero-iti.button { margin-top: 40px; background: #fff; color: #f96a53; }
.harbor-in-stages .harbor-hero-iti.button:hover { background: transparent; border: solid 1px #fff; color: #fff; }
.harbor-wrap .three-col .column { background: transparent; }


#footerWrap h3 { text-align: left; }

#myTags { margin-bottom: 6px; }

.myfamily-logo { width: 250px; height: 115px; display: block; margin: 0 0 15px; padding: 0px; border-radius: 5px; margin: 0 32px; float: left; overflow: hidden; display: block; cursor: pointer; }


.myfamily-logo span { background: url(<%= asset_path 'myfamily-logo.png' %>) no-repeat; }
.myfamily-logo.v1 span { background-position: 0px 0px; width: 100%; height: 100%; display: block; }
.myfamily-logo.v1:hover span, .myfamily-logo.selected span { background-position: -250px 0px; }
.myfamily-logo.v1.selected:hover span { cursor: default; }
.myfamily-logo.v2 span { background-position: 0px -135px; width: 100%; height: 100%; display: block; opacity: 1; cursor: default; }
.myfamily-logo.v2:hover span { background-position: 0px -135px; }


.mayflower-form-row { width: auto; display: table; margin: 0 auto; }
.mayflower-form-row label { float: none; display: block; line-height: 2.3em; text-indent: 15px; }

.mayflower-submit { margin: 15px auto; }

.mayflower.signup-form-wrapper { margin-bottom: 90px; }
.mayflower-details * { color: #fff; }
.mayflower-details p { font-size: 14px; color: #aaa; }



.contentBox .hub-block-title { margin: 20px 0 20px; font-size: 35px; font-weight: 300; text-transform: uppercase; background: #222; background: rgba(26, 30, 31,0.93); color: #fff; padding: 50px 0; margin: 0; width: 100%; top: -15px; position: relative; left: -15px; width: 751px; border-radius: 8px 8px 0 0; }
.contentBox .hub-block-title.small-block { margin: 0px; font-size: 20px; font-weight: 300; text-transform: uppercase; background: #eee; background: rgba(26, 30, 31,0.05); color: #333; padding: 35px 0; font-weight: 400; width: 100%; top: -15px; position: relative; left: -15px; width: 751px; border-radius: 8px 8px 0 0; border-bottom: solid 1px #e0e0e0; }

.contentBox .js-hub-name { width: 751px; background: #333; background: rgba(26, 30, 31,0.88); padding: 25px 0; text-align: center; color: #fff; position: relative; top: -15px; left: -15px; text-transform: uppercase; }

.mf-match { width: 40px; position: relative; }
.match-true { background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-repeat: no-repeat; background-position: -535px -38px; }
.match-true:hover { background-position: -535px -81px; }

.match-true .match-tooltip { width: 580px; right: 35px; bottom: -35px; position: absolute; border-radius: 5px; background: #222; background: rgba(26, 30, 31,0.98); box-shadow: 0 0 15px rgba(0,0,0,0.3); color: #fff; padding: 15px; z-index: 10; display: none; }
.match-true:hover .match-tooltip { display: block; }

.match-true .match-tooltip .left, .match-true .match-tooltip .right { width: 48%; }
.match-true .match-tooltip .left * { text-align: right; padding-right: 5px; }
.match-true .match-tooltip .right * { text-align: left; padding-left: 5px; }
.match-true .match-tooltip p { border-bottom: dashed 1px #555; padding-bottom: 5px; margin: 3px 0; }
.match-true .match-tooltip .match-data { margin-bottom: 12px; }
.match-true .match-tooltip .center { margin: 15px 0 10px; }

.match-true .match-tooltip * { color: #eee; }
#member_list .match-true .match-tooltip h3 { text-transform: uppercase; font-size: 22px; color: #eee; margin: 5px 0 15px; }

/* ======================== END 2014 styles ======================== */




.admin-tool .customer-metadata .customer-name { float: left; font-size: 20px; font-weight: 400; line-height: 20px; }
.admin-tool .customer-metadata .customer-email { float: left; font-size: 14px; color: #777; line-height: 25px; margin-left: 15px; font-weight: 500; }

.admin-tool .btn.small-button, .btn.small-button { height: 19px; line-height: 18px; padding: 0 5px; font-size: 10px; margin: 0; margin-top: 3px; }

.admin-tool .hub-membership-row .row-item { height: auto; width: 137px; font-size: 11px; }
.admin-tool .export-counts, #mayflower-import .export-counts { font-size: 12px; text-transform: uppercase; font-weight: 500; border-top: dashed 1px #ddd;
margin-top: 7px; padding-top: 10px; border-top: dashed 1px #ccc; padding-bottom: 10px; position: relative;}
.admin-tool .export-counts { margin-left: 20px; padding-left: 0px; padding-right: 170px; padding-bottom: 0; }
#admin .hub-membership-row .export-counts .row-item, #mayflower-import .export-counts .row-item { width: 170px; z-index: 30; }

#admin .hub-membership-row .export-counts .row-item { z-index: 100; width: 21%; }

.export-counts em.step-name { opacity: 0.05; font-size: 45px; right: 0px; top: 5px; position: absolute; z-index: 1; line-height: 1em; }

.admin-tool a { color: #E6852C; font-weight: 500; }
.admin-tool a:hover { text-decoration: underline; }
#admin .admin-tool .hub-membership-row .row-item { width: 105px; line-height: 18px; }
#admin .hub-membership-row { border-top: solid 1px #e8e8e8; padding-top: 9px; font-size: 11px; }
#admin .hub-membership-row:first-child { border-top: none; }

#admin .hub-membership-row .row-item.hm-rank { width: 60px; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #333; }
#admin .hub-membership-row .row-item.hm-status, .hub-membership-row .row-item.hub-payment, .hub-membership-row .row-item.mf-payment-status { font-size: 10px; text-transform: uppercase; color: #333; width: 180px; }
#admin .hub-membership-row .row-item.hub-payment, .hub-membership-row .row-item.mf-payment-status { width: 190px; }
#admin .hub-membership-row .row-item.hub-name { width: 240px; margin-right: 10px; line-height: 16px; }
#admin .hub-membership-row .row-item.hub-name a { font-size: 14px; }
#admin .hub-membership-row { margin-bottom: 7px; }
#admin .hub-membership-row .row-item.mf-site-id {  width: 58px; font-weight: 600; }

#admin .hub-membership-row .row-item.mf-site-name { width: 200px; }
#admin .hub-membership-row .row-item.mf-site-status { width: 280px; font-size: 11px; text-transform: uppercase; font-weight: 500; }
#admin .hub-membership-row .row-item.mf-re-queue-button, .admin-tool .hub-membership-row .row-item.rejoin-hub { width: 68px; float: right; position: relative; top: -2px; }
#admin h2 { text-transform: uppercase; }
#admin .admin-tool .hub-membership-row .row-item.rejoin-hub { width: 48px; }

#admin .hub-subscription { line-height: 10px; font-size: 10px; text-transform: uppercase; color: #333; position: relative; padding: 5px 0; }
#admin .hub-subscription a, #admin .hub-subscription strong, #admin .hub-subscription em { font-size: 11px; }
#admin .hub-subscription form.button_to { position: absolute; right: 2px; bottom: 2px; }

#admin .contentBox { width: 760px; float: right; }
.admin-tool .export-counts {  }

#admin .admin-search-input { width: 186px; padding: 12px 12px 11px 12px; position: relative; top: 1px; }

#admin .admin-tool .admin-approval-list h2 { text-transform: none; }
#admin .avatar-wrap { width: 110px; position: absolute ;top: 0;right: 0; float:none; }
/* Hello! */
#admin .contentWrap { width: 1300px; }
#admin .contentBox { width: 1100px; }

.mayflower-site form.button_to { width: 100px;position:absolute;right:0; z-index: 45; text-align: right; }
div.value form.button_to { position: relative; }

.stripe-payment form.button_to, .fullWideHolder form.button_to { position: static; width:auto; text-align: left; }

.stripe-payment { margin-bottom: 3px; padding: 3px; }
.stripe-payment:hover { background: #eee;border-radius: 5px; }
.stripe-payment div { float: left; width: 250px; font-size: 12px; line-height: 18px;  }
.stripe-payment div.payment-amount { width: 280px; color: #aaa; }
.payment-history .stripe-payment div.payment-code { width: 140px; color: #aaa; }
.payment-history .stripe-payment div.payment-refund-button { width: 70px; }
.payment-history .stripe-payment div.payment-amount { width: 40px; color: #aaa; }
.payment-history .stripe-payment div.time-of-payment { float: left; width: 130px; }
.stripe-payment div.payment-amount strong { color: #555; }
.stripe-payment div.payment-refund-button { width: 100px; color: #aaa; }
.stripe-payment div.payment-refund-button a { opacity: .3; color: #aaa; }
.stripe-payment:hover div.payment-refund-button a { opacity: 1; color: #E6852C; text-decoration: none; }
.stripe-payment div.time-of-payment { float:right; text-align: right; color: #aaa; }
.stripe-customer { margin: 10px 0 30px; }

.stripe-payment .short-string { display: none; }
.mobile-show { display: none; }
.unsubscribe-message em { color: #fff; font-weight: 900; }

.short-string, .long-string { color: inherit; font-weight: inherit; }

div.mayflower-attachments { z-index: 50; float:right;width: 150px; margin: 45px 0 0 10px; padding: 0 0 35px 15px; border: none; border-left: solid 1px #eaeaea; }
div.mayflower-attachment { margin-top: 5px; }
div.mayflower-attachment a { line-height: 25px; }
div.mayflower-attachment a span.icon { display:inline-block; width:25px; height: 20px; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -500px -46px; }
/* It'd be nice to have a camera icon, and a link icon (globe? www?) in addition to the paperclip */
div.mayflower-attachment.side_car_image_attachment a span.icon  { }
div.mayflower-attachment.side_car_file_attachment a span.icon  { }
div.mayflower-attachment.side_car_link_attachment a span.icon  { }
.card-row { margin: 15px; border-bottom: dashed 1px #ddd; padding-bottom: 15px; }
.default-card { width: 170px; float: left; display: block; height: 35px; line-height: 40px; margin-right: 10px; text-transform: uppercase; font-size: 12px; }
a.make-default-card { width: 170px; float: left; display: block; height: 35px; margin-right: 10px; line-height: 40px; text-transform: uppercase; font-size: 12px; }

a.remove-card { font-size: 30px; border: solid 1px #ccc; color: #aaa; padding: 5px; border-radius: 30px; line-height: 32px; height: 32px; width: 32px; text-align: center; font-weight: 200; display: block; float: left; text-transform: uppercase; padding: 0 1px 3px 2px; float: right; }
a.remove-card:hover { text-decoration: none; color: rgb(240,100,0); border-color: rgb(240,100,0); }
.js-add-card { width: 300px; margin-top: 25px; display: block; margin-bottom: 40px; margin-left: 15px; }

#add-card-modal .card-row label { width: 170px; display: block; float: left; line-height: 33px; margin-right: 10px; text-align: right; }
#add-card-modal .card-row input#card_cvc { width: 80px; }
#add-card-modal .card-row select { display: block; float: left; width: 110px; margin-top: 6px; }

.subscribe-button-wrapper { position: relative; }
.subscribe-button-wrapper button { outline: none; }

.leftNav a.hub-avatar { height: 120px; width: 180px; display: block; text-align: center; line-height: 120px; font-size: 90px; font-weight: 200; color: #fff; color: rgba(255,255,255,0.7); text-shadow: none; text-indent: 0; }
.leftNav a.hub-avatar span.hub-name { height: 100%; width: 100%; position: absolute; display: block; text-align: center; line-height: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-shadow: none; text-indent: 0; -webkit-transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.leftNav a.hub-avatar span.hub-home-glyph { height: 70px; width: 65px; margin: 0 auto; position: absolute; margin-left: 50%; left: -32px; margin-top: 25px; display: block; opacity: 0; background: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -235px -560px; -webkit-transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; -webkit-transition-delay: 0s; transition-delay: 0s; }

/* .leftNav a.hub-avatar { background-repeat: no-repeat; background-position: center; -webkit-transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; overflow: hidden; border-radius: 6px 6px 0 0; box-shadow: inset 0 0 500px rgba(0,0,0,0.4); } */
.leftNav a.hub-avatar { background-repeat: no-repeat; background-position: center; -webkit-transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; overflow: hidden; border-radius: 6px 6px 0 0; box-shadow: inset 0 0 500px rgba(0,0,0,0.4); background-size: 180px 120px; }

.leftNav a.hub-avatar:hover { opacity: 1; color: rgba(255,255,255,0.2); box-shadow: inset 0 0 500px rgba(0,0,0,0); }
.leftNav a.hub-avatar:hover span.hub-name { opacity: 0; color: rgba(255,255,255,0.2); box-shadow: inset 0 0 500px rgba(0,0,0,0); -webkit-transition-delay: 0s; transition-delay: 0s; }
.leftNav a.hub-avatar:hover span.hub-home-glyph { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

.hub-avatar-chooser-wrapper { text-align: center; float: left; width: 46%; margin-bottom: 50px; }
.hub-avatar-chooser-inner {  margin-left: -5px; margin-right: 15px; width: 331px; height: 331px; position: relative; }
.hub-avatar-chooser-inner .avatar-option-thumb { position:relative; margin-left: 7px; margin-bottom: 7px; width: 100px; height: 100px; float: left; background: #eee; display: block; opacity: 0.7; overflow: hidden; }
.hub-avatar-chooser-inner .avatar-option-thumb img { width: 100%; }
.hub-avatar-chooser-inner .avatar-option-thumb:hover { opacity: 1; }
.hub-avatar-chooser-inner .avatar-option-thumb.selected { opacity: 1; }
.hub-avatar-chooser-inner .avatar-option-thumb span.hud { display: none; position: absolute; width: 100%; height: 100%; font-size: 105px; line-height: 90px; font-weight: 900; margin: 0; padding: 0; }
.hub-avatar-chooser-inner .avatar-option-thumb.selected span.hud.hud-checkmark { display:block; }
.hub-avatar-chooser-inner .avatar-option-thumb.selected:hover span.hud.hud-checkmark { display:none; }
.hub-avatar-chooser-inner .avatar-option-thumb.selected:hover span.hud.hud-remove { color: #c00; background: rgba(255, 255, 255, 0.8); opacity: 0.9; display: block; }
div.hub-avatar-placeholder.hub-avatar.clearfix { height: 120px; }
.hub-avatar-chooser-inner .hub-chooser-set { position: absolute; top: 0; left: 0; }
.hub-avatar-chooser-inner .hub-chooser-set-2 { display: none; }

.hub-avatar-set-chooser { margin: 0 0 8px; text-align: center; width: 317px;}
.hub-avatar-set-chooser a { width: 10px; height: 10px; border-radius: 5px; background: #ccc; display: inline-block; margin: 0 2px; }
.hub-avatar-set-chooser a.selected { background: #777; }

/* ============================= SPINNER ============================ */

/* from http://tobiasahlin.com/spinkit/ */

.spinner {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 8px;
  right: 170px;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* =========================== END SPINNER ========================== */




/* ======================== MAYFLOWER IMPORT ======================== */


#mayflower-import {  }
#mayflower-import h1 { text-transform: uppercase; font-size: 50px; font-weight: 300; margin: 30px auto; }
#mayflower-import h2 { text-transform: uppercase; font-size: 30px; font-weight: 300; }
#mayflower-import p { font-size: 20px; font-weight: 500; color: #777; width: 700px; text-align: center; margin: 25px auto 45px; }

#mayflower-import .mf-site-name { width: 370px; font-size: 16px; color: #444; font-weight: 500; padding: 0px 15px 0px 0; line-height: 28px; float: left; position: relative; margin-left: 15px; }
#mayflower-import .mf-site-name span { width: 9px; height: 9px; background: transparent; border: solid 3px #777; border-bottom-width: 0; border-left-width: 0; display: block; position: absolute; left: -17px; top: 9px;

transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */ }


#mayflower-import .spokt-hub-selector { float: right; margin-bottom: 7px; }
#mayflower-import .spokt-hub-selector select { width: 480px; border: none; -webkit-appearance: none; font-size: 16px; color: #444; font-weight: 500; border: none; border-radius: 0px; padding: 12px; background: #eee; outline: none; line-height: 23px; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: 410px -140px; border: solid 1px #ddd; }
#mayflower-import .spokt-hub-selector select:hover { background-color: #e0e0e0; background-position: 410px -190px; }
#mayflower-import .spokt-hub-selector .errorBox { background: #fc0; width: 480px; color: #333;}
#mayflower-import .spokt-hub-selector .errorBox a { color: #333; text-decoration: underline;font-weight: 600; }
#mayflower-import .spokt-hub-selector .errorBox h3 { text-transform: uppercase; font-weight: 500; margin-bottom: 15px; font-size: 26px; }


#mayflower-import .item-row { padding: 15px; background: #f8f8f8; border: solid 1px #eee; border-width: 1px 0; margin: 15px 0; }
#mayflower-import .item-row:hover { background: #fff; }
#mayflower-import .item-row.connected, #mayflower-import .item-row.connected:hover { background: #efe; border: solid 1px #afa; border-width: 1px 0; }
#mayflower-import .item-row.connected select { background: #efe; border-color: transparent; }
#mayflower-import .item-row.connected select:hover { background: #cfc; }

#mayflower-import .item-row.connected.warning { background: #fafafa; border-color: #fc0; }
#mayflower-import .item-row.connected.warning select { background: #eee; }
#mayflower-import .item-row.connected.warning .export-counts, #mayflower-import .item-row.connected.warning .export-counts strong { color: #999; }

#mayflower-import .mf-hub-connector { margin-bottom: 50px; position: relative; }
#mayflower-import .labels { margin: 0 15px 15px; font-size: 18px; text-transform: uppercase; font-weight: 600; }
#mayflower-import .labels .left, #mayflower-import .labels .right { font-size: inherit; text-transform: inherit; font-weight: inherit; text-align: left; }
#mayflower-import .labels .left { width: 370px; text-align: left; margin-left: 0px; }
#mayflower-import .labels .right { width: 453px; }
.button.inactive { cursor: default; border-color: #ccc; color: #ccc; }
#mayflower-import .button.green.big.large.inactive { position: relative; }
#mayflower-import .button.green.big.large.inactive span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fff; font-size: 18px; line-height: 24px; padding: 15px 15px 0; text-align: center; border-radius: 4px; color: #f44; font-weight: 500; display: none; }
#mayflower-import .button.green.big.large.inactive:hover span { display: block; }
#mayflower-import .button.green.big.large span { display: none; }
#mayflower-import a.button.green.big.large { line-height: 1.4em; padding: 15px 60px;
 }


#mayflower-import .new-hub-input { background: #ccc; background: rgba(255,255,255,0.93); }
#mayflower-import .new-hub-input label { font-size: 12px; text-transform: uppercase; margin-right: 5px; }
#mayflower-import .new-hub-input input {  width: 250px; margin-bottom: 15px; margin-left: 55px; }
#mayflower-import .new-hub-input a.cancel-button { font-size: 12px; text-transform: uppercase; margin-left: 5px; color: red; }
#mayflower-import .new-hub-input h3 { margin-bottom: 15px; }

#mayflower-import .reveal-modal { width: 600px; }
#mayflower-import strong { font-weight: 600; }

#mayflower-import .export-counts { background: #eee; padding: 15px; font-size: 13px; line-height: 1.7em;  border-top: none; background: #fff; background: transparent; color: #1a1; padding-bottom: 0; }
#mayflower-import .export-counts strong { font-size: inherit; text-transform: inherit; color: #191; font-weight: 700; }
#mayflower-import .export-counts .row-item { width: 200px; font-size: 13px; line-height: 18px; height: auto; float: left; color: #333; font-weight: 600; }

h3.data-count-header { text-transform: uppercase; font-weight: 500; margin-bottom: 10px; color: #888; margin-top: 0px; }

#error-message-modal { margin-top: 200px; }

.custom-invite-message { width: 90%; margin: 0 auto 0px; border: solid 0px #ddd; padding: 25px 40px; border-radius: 5px; }
.custom-invite-message label { display: block; clear: both; margin-bottom: 5px; text-indent: 5px; line-height: 1.5em; }
.custom-invite-message input { width: 400px; margin-bottom: 15px; display: block; padding: 12px; }
.custom-invite-message textarea { width: 614px; max-width: 100%; height: 170px; margin: 0 auto 20px; display: block; font-size: 16px; font-weight: 500; color: #333; line-height: 1.5em; padding: 12px; border: solid 1px #ccc; border-radius: 5px; background: #fff; }

.mayflower-import-terms { width: 800px; display: block; margin: 15px auto; height: 300px; font-weight: 600; padding: 15px; }
.finalize-import-button { width: 330px; }
.js-terms { display:none; }

.hub-home-message { background: #ffc; padding: 15px; line-height: 1.6em; font-size: 15px; width: 370px; margin-bottom: 15px; }

.mf-hub-connector .mig-link { font-size: inherit; font-weight: inherit; color: black; }
.mf-hub-connector .mig-link:hover { color: #e06b00; }





/* ====================== END MAYFLOWER IMPORT ====================== */











/* ====================== MYFAMILY LEGACY STYLES ====================== */



.postText .bb { font-weight: 700; margin-right: 8px; } 




/* ==================== END MYFAMILY LEGACY STYLES ==================== */






/* ==================== Uploader ========================= */

.upload { color: #555; }
.upload .progress { border-color: #ddd; }

.translucent-form .upload { color: #eee; border-top: none; }
.translucent-form .upload.upload-complete { opacity: 0.8; }
.translucent-form .upload.upload-complete .progress .bar { background: #3ECC44; }
.translucent-form .upload.upload-complete .complete-message { color: #eee; text-align: right; line-height: 18px; margin-top: 4px; }
.uploader-smart span { color: #999; }

.translucent-form .upload .progress { border-radius: 5px; }
.translucent-form .upload .progress .bar { background: #3ECCC4; border-radius: 5px; }



.upload-status-row { width: 580px; }
.upload-status-row-item { float: left; width: 100px; color: #777; }
.translucent-form .upload-status-row-item { color: #ddd; }
.upload-status-row-header { border-bottom: solid 1px #555; padding-bottom: 5px; margin-bottom: 5px; }
.upload-status-row-footer { border-top: solid 1px #555; margin: 10px 0 35px 0; }
.upload-status-row-header .upload-status-row-item { color: #111; }
.translucent-form .upload-status-row-header .upload-status-row-item { color: #fff; }
.translucent-form .upload-status-row-item a { color: #fff; }
.upload-status-row-item a:hover { color: #3ECCC4;}
.upload-status-row-item.upload-file-name { width: 220px; }
.upload-status-row-item.upload-file-count { width: 60px; }

.admin-tool { border-top: solid 1px #ddd; margin: 30px 10px; }
#admin .profile-wrap { margin: 20px 0; position: relative; }
.username-link { font-size: 20px; }
/* =========================== MOBILE ADMIN STYLES =========================== */

@media screen and (max-device-width: 520px), screen and (max-width:520px) {

  .mobile-show { display: block; }
  .mobile-static { display: static; }
  .mobile-hide { display: none; }

  body#admin { min-width: 300px; }
  #admin .sub-column { display: none; }
  #admin .contentBox { width: 94%; float: none; padding: 0; }
  #admin .contentWrap { width: 100%; }
  #admin #home #header, #admin #header { height: auto; }
  #admin #home #header .inner, #admin #header .inner { width: 100%; }
  #admin .inner .site-nav { height: auto; width: 100%; padding: 5px 0 15px; }
  #admin .inner .site-nav a { display: block; clear: both; line-height: 1.1em; padding: 5px 0; width: 100%; margin: 0; }
  #admin .admin-search-input { width: 100%; margin: 0 0 10px; }

  #admin .admin-tool .customer-metadata .customer-email { margin-left: 0; }
  #admin .avatar-wrap { width: 75px; position: absolute ; top: 0;right: 0; }

  #admin .unaccepted-invitation-list .row-item.row-item-header { display: none; }
  #admin .unaccepted-invitation-list .row-item { width: 100%; display: block; height: auto; }
  #admin .content-box {  }
  #admin .unaccepted-invitation-list .join-hub { float: none; clear: left; text-align: left; }
  #admin .payment-amount .short-string { display: inline; }
  #admin .payment-amount .long-string { display: none; }
  #admin .payment-amount { width: 75px; font-size: 11px; }
  #admin .time-of-payment { float: left; text-align: left; width: 100px; }
  #admin .payment-amount a, #admin .payment-amount a strong, #admin .payment-amount .short-string { font-size: inherit; }
  #admin .stripe-payment div { font-size: 10px; }
  #admin .stripe-payment div.payment-refund-button { width: 60px; }
  #admin .hub-subscription { line-height: 1.9em; }
  #admin .admin-tool .hub-subscription .small-button { margin-bottom: 5px; margin-left: 3px; }
  #admin .mayflower-site { max-width: 100%; width: 100%; overflow: hidden; }

  #admin #footerWrap { display: none; }



}

@media screen and (max-device-width: 320px), screen and (max-width:320px) {
  body#admin { min-width: 223px; }
  #admin #header { display:none; }

  #admin .inner .site-nav { display:none; }
  #admin .contentWrap { margin:0; }
  #admin .contentBox { border: 0; width: 100%; }
  #admin .admin-user-form { display:none; }
  #admin .customer-name { float:none; }
  #admin div.label { font-size:12px; }
  #admin .user-info .admin-tool { margin:0; border: 0; }
  .admin-tool .customer-metadata .customer-name { font-size: 14px; }
  #admin .new_customer_note label { font-size: 14px; }
  .username-link { font-size: 14px; }
  #admin .LNBtm.avatar-wrap { right: 7px; }
  #admin .LNBtm.avatar-wrap:hover { opacity: 0.1; }
  .small-admin-item { font-size: 10px; line-height: 13px; }
  #admin .hub-membership-row .row-item.hub-name { width: 200px; }
  #new_customer_note { max-width: 98%; }
  #admin h2 { font-size: 14px; }
  #admin .profile-wrap { margin: 0; }
  #admin .hub-membership-row { position: relative; }
  #admin .add-qc-user { position: absolute; right: 0; }
  #admin .time-of-payment { width: 90px; }
  #admin .stripe-payment div.payment-refund-button { width: 50px; }
  #admin .payment-amount { width: 60px; }
  #admin .stripe-payment { max-width: 219px; } 
  #admin .note-meta { font-size: 10px; }
  #admin .customer-note p { font-size: 11px; }
  .admin-tool .customer-metadata .customer-name { line-height: 14px; }
}



/* ========================= END MOBILE ADMIN STYLES ========================= */

.bottom-banner { width: 728px; margin: 20px 0 10px -4px; }
.top-banner { width: 320px; margin: 25px auto 5px; }

.ui-widget-content { border-color: #ddd; background: #fcfcfc; }
.ui-state-default, .ui-widget-content .ui-state-default { background: #def; }
.ui-menu .ui-menu-item { background: #feffff; }
.ui-menu .ui-menu-item:hover { background: #def; }

div.scrollingHotSpotLeft { cursor: url(/assets/cursor_arrow_left.cur" %>), w-resize; }
div.scrollingHotSpotRight {  cursor: url(/assets/cursor_arrow_right.cur" %>), e-resize; }

/* ========================= BEGIN TOOLTIP STYLES ========================= */

.tooltip { 
  display:none;
  position:absolute;
  z-index:9999;
  font-size: 12px;
  width:280px;    
  padding: 10px;

  border-radius: 4px; padding: 15px; background: rgba(255,255,255,.95); color: #333; border: solid 1px #bbb;
  background: #fefefe url(<%= asset_path 'noisebg.png' %>);   
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f5f5f5), color-stop(1, #fff));
  background-image: -moz-linear-gradient(center bottom, #f5f5f5 0%, #fff 100%);
  -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.3)/*, inset 0 0 130px rgba(0,0,0,.05)*/; 
  -moz-box-shadow: 0px 0px 6px rgba(0,0,0,.3)/*, inset 0 0 130px rgba(0,0,0,.05)*/; 
  box-shadow: 0px 0px 6px rgba(0,0,0,.3)/*, inset 0 0 130px rgba(0,0,0,.05)*/; 
}
.tooltip h4 { margin-top: 0px; color: #555; margin-bottom: 4px; font-weight: 500; }
.tooltip p { margin-bottom: 0px; text-transform: none; font-size: 14px; margin-top: 4px; color: #555; line-height: 1.4em; }
.tooltip p.footnote { font-size: 12px; color: #888; }

.tooltip.calendar-item { width: 200px; }
.tooltip.calendar-item h1 { font-size: 16px; }

/* ========================= END TOOLTIP STYLES ========================= */

/* ========================= BEGIN CALENDAR STYLES ========================= */

body.calendar .contentBox { width: 914px; background: #fff; }
body.wide-body.calendar .contentBox .hub-block-title.small-block { width: 945px; background: #26262a; background: rgba(26, 30, 31,0.89); border-bottom: none; }
.contentBox .hub-block-title.small-block.month-name { font-size: 30px; color: #eee; }
a.previous-month-button, a.next-month-button { color: #aaa; border-radius: 45px; border: solid 1px #bbb; padding: 0; width: 25px; height: 25px; line-height: 23px; text-align: center; display:block; position:absolute; top: 40px; }
a:hover.previous-month-button, a:hover.next-month-button { color: #ddd; text-decoration: none; border-color: #ddd; }
.previous-month-button { left: 40px; }
.next-month-button { right: 40px;  }

.calendar-month { margin: -15px 0 0 -15px; width: 950px; }

.day { padding-top: 30px; position: relative; overflow: auto; background-color: #fcfcfc; float: left; height: 128px; width: 134px; border-bottom: solid 1px #efefef; border-right: solid 1px #efefef;  }
.day.next-month, .day.previous-month { opacity: 0.5; }
.day:hover { opacity: 1; background-color: #fff;}
.day-number { position: absolute; top: 4px; right: 8px; }
.day.today .day-number { top: 3px; right: 3px; border-radius: 20px; background-color: #e44; color: #fff; width: 26px; height: 26px; text-align: center; line-height: 24px; }

.day.day-name { color: #fff; text-transform: uppercase; font-size: 13px; height: 28px; line-height: 28px; text-align: center; padding-top: 2px; background-color: #444c4f; border: none; padding: 0 1px 0 0; font-weight: 500; } 
.day.day-name:hover { background-color: #444c4f; }
.day:hover { overflow: visible; }

.day .event-list { overflow: auto; height: 108px; }
.day .event { cursor: default; margin-bottom: 2px;  padding: 3px 5px; background-color: #5a5; text-align: center; position: relative; line-height: 15px; }
.day .event .summary { font-size: 13px; color: white; line-height: 15px; }
.day .event:hover { min-height: 30px; }
.day .event:hover .summary { opacity: 0.4; }
.day .event .controls { visibility: hidden; position:absolute; top: 6px; left: 0; width: 100%; }

.day .event .controls a { display:inline-block; float: right; cursor:pointer; background-color: #efefef; border-radius: 30px; margin-right: 5px; }
.day .event .controls a span.icon { display:inline-block; width:25px; height: 23px; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -233px -44px; }
.day .event .controls a span.icon-edit {  }
.day .event .controls a span.icon-trash {  background-position: -323px -44px; }
.day .event .controls a:hover { background: #fff; }
.day .event .controls a:hover span.icon-edit { background-position: -233px -89px; }
.day .event .controls a:hover span.icon-trash { background-position: -323px -89px; }

.day .event:hover .controls {  visibility: visible; }

.day .event-birthday { background-color: #f80; }
.day .event-gathering { background-color: #148cfa; }
.day .event-other { background-color: #5b5; }
.day .event-weddinganniversary { background-color: #80f; }

.day a.new-event { display:block; visibility: hidden; background: #fff; text-align: center; border-radius: 10px; border: solid 1px #ddd; color: #ccc; text-decoration: none; font-size: 13px; margin-bottom: 2px;
padding: 3px 5px; position: absolute; bottom: 1px; padding: 2px 15px; right:2px; }
.day:hover a.new-event { display:block; visibility: visible; }
.day a.new-event:hover { text-decoration: none; background-color: #666; border-color: #666;color: #fff; }

.js-user-dropper input { display:none; }
.hubFormInput.select-list { height: 30px; line-height: 30px; }
.hubFormInput.select-list input { width: 300px; }
#event_birthday_for_user_id, #event_wedding_anniversary_for_user_id, #event_wedding_anniversary_and_for_user_id { max-width: 180px; }

.legend-controls { margin-top: 15px; float:right; }
.legend-controls .legend-item { font-size: 13px; cursor: pointer; color: #fff; border-radius: 15px; float: left; max-width: 150px; padding: 4px 9px; margin-right: 5px; }
.legend-item-title { font-size: 13px; width: 75px; color: #555; float:left; padding: 5px 4px; }
.legend-item.birthday { background: #f80; border: solid 1px #f80; }
.legend-item.other { background-color: #5b5; border: solid 1px #5b5; }
.legend-item.weddinganniversary { background-color: #80f; border: solid 1px #80f; }
.legend-item.gathering { background-color: #148cfa; border: solid 1px #148cfa;}
.legend-controls .legend-item.unchecked { background: transparent; color: #999; border-color: #ccc; }

.year-month-picker { margin: 7px auto 5px; }
.year-month-picker input.btn { font-size: 13px; height: 11px; line-height: 13px; border-radius:20px; width: 25px; padding: 5px 10px; }

.tab h2 { margin-bottom: 10px; text-align: center; font-family: "Raleway"; font-weight: 100; font-size: 26px; color: #888; } 


.down-arrow-wrapper { padding: 3px 5px 5px 4px; border: solid 1px #555; height: 12px; width: 12px; border-radius: 4px; overflow: hidden; right: 0; top: 0; display: inline-block; position: relative; top: 5px; margin-left: 5px; }
.arrow-down { cursor: pointer; width: 0; height: 0; margin: 4px auto 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #777; }
.down-arrow-wrapper.clicked { overflow: visible; }

.arrow-up { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #ececec; }

.year-month-picker .arrow-up {  position:absolute; top: -8px; left: 148px; }
.year-month-picker { z-index: 90; width: 300px; height: 45px; padding: 15px; background: #ececec; position: absolute; top: 20px; left: -146px; box-shadow: 0 0 35px rgba(0,0,0,0.5); border: solid 1px #ccc; border-radius: 5px; }


.contentBox .hub-block-title.small-block.month-name span.date-text { font-size: 30px; color: #eee; }
.calendar-holder {  margin: 15px 0; width: 310px;  }
.calendar-holder .contentBoxFooter { border:none; }
.calendar-holder .contentBoxHeader { border-color: #e7ebed; }

.small-calendar.calendar-month { width: 100%; margin:0px auto 0px auto; border-left: solid 1px #efefef; }
.small-calendar.calendar-month .day { width: 13.3%; height: 44px; padding: 1px; }
.small-calendar.calendar-month .day .event-dot {   margin: 0 auto; text-align: center; color: #777; }
.small-calendar.calendar-month .day.day-name { padding-left: 2px; height: 20px; line-height: 20px; }
.small-calendar.calendar-month .day[data-tt-id] { cursor: pointer; }
.small-calendar .day-number { position: relative; top: 0; right: 0; margin: 0 auto; text-align: center; color: #bbb; }
.small-calendar .day.today .day-number { color: #F57C10; background: transparent; border: none; top:0; right:0; line-height: 20px; height:20px; }
.small-calendar .day.today .event-dot { color: #F57C10; }
.small-calendar .day.today { }

/* ========================= END CALENDAR STYLES ========================= */




/* ================================================================================= */
/* ================================ NEW SIGNUP FLOW ================================ */
/* ================================================================================= */


.signup-flow-container { padding-bottom: 100px; /* Dark --> */ background: rgba(8, 31, 46, 1); background: #fff; }
.three-col { position: relative; margin-top: 55px; padding: 0 35px;}
.three-col .column { width: 31%; float: left; margin-right: 0%; background: rgba(0,0,0,0.8); background: rgba(51, 181, 162, 0.86); color: rgba(51, 181, 162, 0.86); border: 0; padding: 15px 0; }
.three-col .column.column-3 { margin-right: 0; }

.signup-flow-container .three-col { padding: 0; width: 1000px; position: relative; left: -24px; }
.signup-flow-container .three-col { text-align: center; }
.signup-flow-container .three-col .inner { padding: 10px 0 30px; height: 100%; }
.signup-flow-container .three-col .centering-wrapper { width: 785px; margin: 0 auto;  }

.signup-flow-container .three-col h1, .signup-flow-container .three-col h2, .signup-flow-container .three-col h3, .signup-flow-container .three-col .column p, .signup-flow-container .three-col div.price { color: #fff; }
.signup-flow-container h1 { margin-bottom: 15px; /* Dark --> */ color: rgba(43, 162, 150, 1); color: rgba(21, 167, 127, 1);  }
.signup-flow-container h2 { font-size: 24px; font-weight: 300; /* Dark --> */ color: #ccc; color: #777; margin: 0 auto 1em auto; text-align: center; }

.signup-flow-container .three-col .column { width: 32%; border: solid 1px #5c5c5c; border: none; border-radius: 5px; margin: 0; }
.signup-flow-container .three-col .column-2 { margin: 0 20px; background: rgba(51, 181, 162, 0.86); }
.signup-flow-container .three-col .column-2, .signup-flow-container .three-col .column-3 { width: 32%; }


.signup-flow-container .three-col .column p { font-size: 16px; line-height: 1.6em; text-align: center; font-weight: 500; }
.signup-flow-container .three-col .column.column-3 { margin-right: 0; }
.signup-flow-container .three-col .column p strong.storage { font-size: inherit; font-weight: 800; color: inherit; display: inline; opacity: 1; }

.signup-flow-container .three-col h3 { font-size: 28px; margin: 23px 0 10px; text-align: center; }
.signup-flow-container .signup-header h3 { margin: 0; color: inherit; font-family: "Chaparral Pro", Raleway, Georgia, "Helvetica Neue", Helvetica, "Source Sans Pro", "Open Sans", sans-serif; text-transform: uppercase; }
.signup-flow-container .three-col p.clearfix { margin-top: 0; margin-bottom: 8px; margin-left: 0; line-height: 1.5em; }
.signup-flow-container .three-col h3 strong { font-size: inherit; font-weight: 600; color: inherit; font-family: inherit; }
.signup-flow-container .three-col .price { border: solid 1px #fff; border: 0; line-height: 64px; height: 64px; text-align: center; margin: 0 auto; border-radius: 5px; font-size: 58px; font-weight: 300; margin-bottom: 20px; }
.signup-flow-container .three-col .price.non-sale-price { color: rgba(255,255,255,0.4); }
.signup-flow-container .three-col .price.sale-price { margin-bottom: 0; }
.signup-flow-container .three-col .price .savings-tag { width: 210px; margin-left: -125px; margin-bottom: -20px; height: 70px; display: inline-block; background-image: url("/assets/spokt-sprite-new-9edf67af.png"); overflow: visible; }
.signup-flow-container .three-col .column-1 .price .savings-tag { background-position: -579px -114px; }
.signup-flow-container .three-col .column-2 .price .savings-tag { background-position: -579px -194px; }
.signup-flow-container .three-col .column-3 .price .savings-tag { background-position: -559px -284px;  width: 220px; margin-left: -145px; margin-bottom: -23px; }

.signup-flow-container .three-col .price span.per-year { top: auto; margin-left: -5px; font-size: 32px; font-weight: 300; }
.signup-flow-container .three-col .price span.per-year.first-year { top: auto; margin-left: -2px; font-size: 32px; font-weight: 300; }
.signup-flow-container .three-col .price span.per-year span { font-size: 14px; font-weight: 400; position: relative; top: 1px; left: 3px; line-height: 1em; display: inline-block; text-transform: uppercase; }

.signup-flow-container .three-col .price span { font-family: inherit; font-size: 21px; position: relative; top: -11px; }

.signup-flow-container .three-col p { margin: 5px; }
.signup-flow-container .three-col p strong { font-weight: 300; font-size: 1.75em; margin-bottom: 20px; display: block; margin-top: -15px; opacity: .6; }
.signup-flow-container .three-col p.dim { color: #696767; color: rgba(173, 225, 219, 1); color: rgba(255,255,255,0.35); }

.signup-flow-container .three-col .column a { color: #fff; font-size: 26px; margin: 10px auto 33px; padding: 10px 0; display: block; text-transform: uppercase; width: 230px; border: solid 1px rgba(255,255,255,0.2); margin-top: 20px; border-radius: 5px; }
.signup-flow-container .three-col .column a:hover, .pricing .column a.selected { border-color: #fff; text-decoration: none; background: #fff; color: inherit; }

.signup-flow-container .three-col .call-us { margin: 35px auto 0; color: #888; font-size: 38px; font-weight: 300; }

.signup-flow-container p.bonus-pitch-blurb { margin: 20px 50px 0; /* Dark --> */ color: #ccc; color: #777; text-align: center; }
.signup-flow-container .subline { color: #7a7a7a; font-size: .8em; }

.signup-flow-container .three-col .column-1 { /* zoom: .94; */ position: relative; top: 2px; left: 10px; background: rgba(120, 158, 181, 1); background: rgba(95, 138, 152, 0.86); color: rgba(95, 138, 152, 1);
-webkit-transform: scale(.94); 
-moz-transform: scale(.94); 
-ms-transform: scale(.94); 
transform: scale(.94); 
-moz-top: 0;  }
.signup-flow-container .three-col .column-2 { /* zoom: .98; */ position: relative; top: 2px; background: rgba(98, 181, 181, 1); background: rgba(106, 174, 181, 0.86); color: rgba(106, 174, 181, 1);
-webkit-transform: scale(.98); 
-moz-transform: scale(.98); 
-ms-transform: scale(.98); 
transform: scale(.98); 
-moz-top: 0; }



		/* ================================================================================= */
		/* ======================= MOZ HACK FOR FIREFOX TOP POSITION ======================= */
		/* ================================================================================= */
		@-moz-document url-prefix() {
		
			.signup-flow-container .three-col .column-1, .signup-flow-container .three-col .column-2 { /*top: 0;*/ -moz-transform-origin: left top; }
			.signup-flow-container .three-col .column-1 { left: 12px; }
		
			.signup-flow-container .three-col .column-1 { top: 18px; }
			.signup-flow-container .three-col .column-2 { top: 8px; }
		
		}
		/* ================================================================================= */
		/* ===================== END MOZ HACK FOR FIREFOX TOP POSITION ===================== */
		/* ================================================================================= */


.signup-flow-container .three-col .column-3 { position: relative; }

.signup-flow-container .checkmark { font-size: 13px; opacity: .7; }







.disabled{ color: #888; }

.content-wrap.wide-pages.top-page-hero.signup-flow-container { width: 100%; overflow: hidden; float: left; }

.checkout-box, .signup-box { -webkit-transition: -webkit-transform ease-in-out 0.7s; -ms-transition: -webkit-transform ease-in-out 0.7s; -moz-transition: -webkit-transform ease-in-out 0.7s; transition: transform ease-in-out 0.7s; width: 615px; height: 101.9%; top: -1%; background: rgba(0,0,0,0.4); margin: 0 auto; background: #111; background: rgba(255,255,255,1); box-shadow: none; box-shadow: 0 0 15px rgba(0,0,0,0.2); padding: 35px 35px 25px 35px; margin-bottom: 40px; }
.checkout-box { min-height: 400px; }
.checkout-sheet { width: auto; height: auto; top: 0; bottom: 0; left: 0; right: 0; position: absolute; z-index: 100; background: #fff; margin: 20px; background: rgba(255,255,255,1); box-shadow: 0 0 35px rgba(0,0,0,0.2); padding: 20px; }
.checkout-sheet .dismiss-button { position: absolute; top: 10px; right: 15px; font-size: 45px; line-height: 45px; font-weight: 200; margin: 0; padding: 0; display: block; color: #888; }
.checkout-sheet .dismiss-button:hover { color: #f05b00; }

.signup-box.pay-form-left, .signup-box.pay-form-right { position: absolute; }
.signup-box .signup-steps-wrapper p, .signup-box p.subline.left, .signup-box h1, .signup-box h2, .signup-box h3, .signup-box label, .signup-box input { color: #333; }
.signup-form-wrapper { background: none; box-shadow: none; padding: 0; margin: 0; width: auto; }
.signup-box.pay-form-left { left: 0px; } .signup-box.pay-form-right { left: 0px; } 
.signup-box.pay-form-left { left: -5000px; }
.signup-box.pay-form-right { left: 5000px; }
.signup-box.plan-1 { border-width: 0; border-left-width: 6px; border-style: solid; border-color: rgba(95, 138, 152, 1); border-radius: 5px 0 0 5px; color: rgba(95, 138, 152, 1); }
.signup-box.plan-2 { border-width: 0; border-left-width: 6px; border-style: solid; border-color: rgba(106, 174, 181, 1); border-radius: 5px 0 0 5px; color: rgba(106, 174, 181, 1); }
.signup-box.plan-3 { border-width: 0; border-right-width: 6px; border-style: solid; border-color: rgba(51, 181, 162, 1); border-radius: 0 5px 5px 0; color: rgba(51, 181, 162, 1); }
.signup-form-wrapper h3 { margin-bottom: 0; text-align: center; }

.plan-1 input[type="tel"]:hover, .plan-1 input[type="tel"]:focus, .plan-1 input[type="text"]:focus, .plan-1 textarea:focus, .plan-1 input[type="password"]:focus, .plan-1 input[type="text"]:hover, .plan-1 textarea:hover, .plan-1 input[type="password"]:hover,
.plan-2 input[type="tel"]:hover, .plan-2 input[type="tel"]:focus, .plan-2 input[type="text"]:focus, .plan-2 textarea:focus, .plan-2 input[type="password"]:focus, .plan-2 input[type="text"]:hover, .plan-2 textarea:hover, .plan-2 input[type="password"]:hover,
.plan-3 input[type="tel"]:hover, .plan-3 input[type="tel"]:focus, .plan-3 input[type="text"]:focus, .plan-3 textarea:focus, .plan-3 input[type="password"]:focus, .plan-3 input[type="text"]:hover, .plan-3 textarea:hover, .plan-3 input[type="password"]:hover { border-color: inherit; }

.translucent-form label.for-select.left { float: left; line-height: 31px; margin-left: 3px; }
.translucent-form label { float: none; line-height: 1.3em; font-size: 12px; color: #3b86b1; color: inherit; display: block; margin-bottom: 4px; margin-left: 12px; }
.translucent-form textarea, .translucent-form input { width: 100%; clear: both; display: block; float: none; border-radius: 0; margin-bottom: 10px; }
.form-element { float: left; width: 262px; margin-right: 10px; }
.form-element.three-quarter { width: 408px; }
.form-element.one-quarter { width: 127px; }
.form-element.one-quarter.card-security-code { width: 130px; }
.form-element.one-quarter-small { width: 100px; }
.form-element.one-third { width: 180px; }
.form-element:nth-child(2n) { margin-right: 0px; }
.translucent-form .hub-name { width: 535px; }
.subscribe-button-wrapper .subline.left strong { font-size: inherit; color: inherit; font-family: inherit; font-weight: 600; clear: none; display: inline; opacity: 1; }


#card_month { width: 100%; outline: none; }
#card_year { width: 100%; outline: none; }

.form-element select { margin-bottom: 6px; }

.signup-box .translucent-form input { background: #eee; border-radius: 0; }
.signup-box.plan-1 .translucent-form input { color: rgba(39, 99, 116, 1); }
.signup-box.plan-2 .translucent-form input { color: rgba(59, 143, 148, 1); }
.signup-box.plan-3 .translucent-form input { color: rgba(30, 163, 144, 1); }

.translucent-form input::-webkit-input-placeholder { color: #aaa; }
.translucent-form input:focus::-webkit-input-placeholder { color: #ccc; }

.signup-box.plan-1 .double-bounce1, .signup-box.plan-1 .double-bounce2 { background-color: #80A1AD; }
.signup-box.plan-2 .double-bounce1, .signup-box.plan-2 .double-bounce2 { background-color: #6BAEB5; }
.signup-box.plan-3 .double-bounce1, .signup-box.plan-3 .double-bounce2 { background-color: #5EC4B5; }

.signup-box.plan-1 .big-button.green { background: rgba(95, 138, 152, 1); box-shadow: 0 5px 0 rgba(77, 111, 123, 1); }
.signup-box.plan-2 .big-button.green { background: rgba(106, 174, 181, 1); box-shadow: 0 5px 0 rgba(90, 147, 152, 1); }
.signup-box.plan-3 .big-button.green { background: rgba(51, 181, 162, 1); box-shadow: 0 5px 0 rgba(43, 154, 138, 1); }
.signup-box .big-button.green { opacity: 0.8; -webkit-transition: opacity ease-in-out 0.3s; -ms-transition: opacity ease-in-out 0.3s; -moz-transition: opacity ease-in-out 0.3s; transition: opacity ease-in-out 0.3s; background: #ccc; background: #ccc; background: #ccc; }
.signup-box .big-button.green:hover { opacity: 1; }
.subscribe-button-wrapper { margin-top: 15px; }

.signup-box.pay-form-right.entrance {
  -webkit-transform:translateX(-4639px);
  -webkit-transition-delay: 0s;
  -moz-transform:translateX(-4639px);
  -moz-transition-delay: 0s;
  -ms-transform:translateX(-4639px);
  -ms-transition-delay: 0s;
  transform:translateX(-4639px);
  transition-delay: 0s;
}

.signup-box.pay-form-left.entrance {
  -webkit-transform:translateX(5046px);
  -webkit-transition-delay: 0.1s;
  -moz-transform:translateX(5046px);
  -moz-transition-delay: 0.1s;
  -ms-transform:translateX(5046px);
  -ms-transition-delay: 0.1s;
  transform:translateX(5046px);
  transition-delay: 0.1s;
}
.column {
  -webkit-transition: -webkit-transform ease-in-out 0.5s;
  -ms-transition: transform ease-in-out 0.5s;
  -moz-transition: transform ease-in-out 0.5s;
  transition: transform ease-in-out 0.5s;
}

.signup-flow-container .three-col .column.exit-left {
  -webkit-transform:translateX(-5000px);
  -moz-transform: translateX(-5000px);
  -ms-transform: translateX(-5000px);
  transform:translateX(-5000px);
}

.signup-flow-container .three-col .column.exit-right {
  -webkit-transform:translateX(5000px);
  -moz-transform: translateX(5000px);
  -ms-transform:translateX(5000px);
  transform:translateX(5000px);
}

.column.delay {
  -webkit-transition-delay: 0.15s;
  -moz-transition-delay: 0.15s;
  -ms-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.signup-flow-container .three-col .column.column-1.selected-right {
	-webkit-transform:translateX(637px) scale(.94);
	-webkit-transition-delay: 0.2s;
	-ms-transform:translateX(637px) scale(.94);
	-ms-transition-delay: 0.2s;
	-moz-transform: translateX(637px) scale(.94);
	transform:translateX(637px) scale(.94);
	transition-delay: 0.2s;
	@-moz-document url-prefix() {
		position: relative; top: 500px;
		opacity: .5;
	} 
}

.features-list { }
.sidebar-testimonial { position: absolute; left: -500px; }
.spokt-credibility { position: absolute; left: -1000px; }


.signup-flow-container .three-col .column.column-1.selected-right .features-list, 
.signup-flow-container .three-col .column.column-1.selected-right .sidebar-testimonial, 
.signup-flow-container .three-col .column.column-1.selected-right .spokt-credibility,

.signup-flow-container .three-col .column.column-2.selected-right .features-list, 
.signup-flow-container .three-col .column.column-2.selected-right .sidebar-testimonial,
.signup-flow-container .three-col .column.column-2.selected-right .spokt-credibility,

.signup-flow-container .three-col .column.column-3.selected-left .features-list, 
.signup-flow-container .three-col .column.column-3.selected-left .sidebar-testimonial,
.signup-flow-container .three-col .column.column-3.selected-left .spokt-credibility
{
  transition-delay: 0.5s;
  -webkit-transform:translateX(500px);
  -moz-transform:translateX(500px);
  -ms-transform:translateX(500px);
  transform:translateX(500px);
}

/* $('.column-1').addClass("step-two") */
.signup-flow-container .three-col.step-1-complete .column.column-1.selected-right .sidebar-testimonial, 
.signup-flow-container .three-col.step-1-complete .column.column-1.selected-right .features-list,
.signup-flow-container .three-col.step-1-complete .column.column-1.selected-right .spokt-credibility,

.signup-flow-container .three-col.step-1-complete .column.column-2.selected-right .sidebar-testimonial, 
.signup-flow-container .three-col.step-1-complete .column.column-2.selected-right .features-list,
.signup-flow-container .three-col.step-1-complete .column.column-2.selected-right .spokt-credibility,

.signup-flow-container .three-col.step-1-complete .column.column-3.selected-left .sidebar-testimonial, 
.signup-flow-container .three-col.step-1-complete .column.column-3.selected-left .features-list,
.signup-flow-container .three-col.step-1-complete .column.column-3.selected-left .spokt-credibility
{
  transition-delay: 0.5s;
  -webkit-transform:translateX(1000px);
  -moz-transform:translateX(1000px);
  -ms-transform:translateX(1000px);
  transform:translateX(1000px);
}

.signup-flow-container .three-col.step-2-complete .column.column-1.selected-right .spokt-credibility,
.signup-flow-container .three-col.step-2-complete .column.column-1.selected-right .features-list,
.signup-flow-container .three-col.step-2-complete .column.column-1.selected-right .sidebar-testimonial,

.signup-flow-container .three-col.step-2-complete .column.column-2.selected-right .spokt-credibility,
.signup-flow-container .three-col.step-2-complete .column.column-2.selected-right .features-list,
.signup-flow-container .three-col.step-2-complete .column.column-2.selected-right .sidebar-testimonial,

.signup-flow-container .three-col.step-2-complete .column.column-3.selected-left .spokt-credibility,
.signup-flow-container .three-col.step-2-complete .column.column-3.selected-left .features-list,
.signup-flow-container .three-col.step-2-complete .column.column-3.selected-left .sidebar-testimonial
{
  transition-delay: 0.5s;
  -webkit-transform:translateX(0px);
  -moz-transform:translateX(0px);
  -ms-transform:translateX(0px);
  transform:translateX(0px);
}


.signup-flow-container .three-col .column.column-2.selected-right {
	-webkit-transform:translateX(313px) scale(.98);
	-webkit-transition-delay: 0.2s;
	transform:translateX(313px) scale(.98);
	transition-delay: 0.2s;
	-moz-top: 5px;
	-moz-transform: translateX(313px) scale(.98);
	-ms-transform:translateX(313px) scale(.98);
	-ms-transition-delay: 0.2s;
}

.signup-flow-container .three-col .column.column-3.selected-left {
	-webkit-transform:translateX(-635px);
	-webkit-transition-delay: 0.2s;
	-moz-transform: translateX(-635px);
	-moz-transition-delay: 0.2s;
	-ms-transform:translateX(-635px);
	-ms-transition-delay: 0.2s;
	transform:translateX(-635px);
	transition-delay: 0.2s;

}

.signup-box { overflow: hidden; }
.signup-steps-header, .signup-steps-wrapper { width: 2500px;  
-webkit-transition: -webkit-transform  0.4s ease-in-out 0.7s;
   -moz-transition: -moz-transform 0.4s ease-in-out 0.7s;
	-ms-transition: transform 0.4s ease-in-out 0.7s;
		transition: transform 0.4s ease-in-out 0.7s;
}
.signup-steps-header { 
	-webkit-transition-delay: 0.85s;
	   -moz-transition-delay: 0.85s;
		-ms-transition-delay: 0.85s;
			transition-delay: 0.85s;
 }

.step-1-complete .signup-box .signup-steps-wrapper, .step-1-complete .signup-box .signup-steps-header { 
	-webkit-transform:translateX(-605px); 
	   -moz-transform:translateX(-605px); 
		-ms-transform:translateX(-605px); 
			transform:translateX(-605px); 
}
.step-1-complete.step-2-complete .signup-box .signup-steps-wrapper, .step-1-complete.step-2-complete .signup-box .signup-steps-header { 
	-webkit-transform:translateX(-1210px); 
	   -moz-transform:translateX(-1210px); 
		-ms-transform:translateX(-1210px); 
			transform:translateX(-1210px); 
}

.step-1-complete.step-2-complete.step-3-complete .signup-box .signup-steps-wrapper, .step-1-complete.step-2-complete.step-3-complete .signup-box .signup-steps-header { 
	-webkit-transform:translateX(-1815px); 
	   -moz-transform:translateX(-1815px); 
		-ms-transform:translateX(-1815px); 
			transform:translateX(-1815px); 
}

.signup-form-wrapper { float: left; width: 535px; margin-right: 70px; min-height: 350px; }
.signup-header { float: left; width: 535px; margin-right: 70px; }

.signup-flow-container .content-wrap.testimonials { background: none; }
.signup-flow-container .content-wrap.testimonials { background: none; }
.signup-flow-container .testimonial-wrapper { position: relative; margin: 0 auto; margin-top: 70px; left: auto; right: auto; }
.signup-flow-container .testimonial { background: #fff; }
.signup-flow-container .testimonials .inner { margin: 0 auto; padding: 0; }
.signup-flow-container .content-wrap.wide-pages.testimonials { overflow: visible; margin-bottom: 50px; position: relative; left: -20px; }
.signup-flow-container .attribution { color: #333; }
.sidebar-testimonial .testimonial-pic { position: relative; top: auto; left: auto; right: auto; height: auto; width: auto; }
.sidebar-testimonial, .spokt-credibility { position: absolute; top: 0; left: -500px; width: 100%; 
	-webkit-transition: -webkit-transform ease-in-out 0.7s; 
	   -moz-transition:    -moz-transform ease-in-out 0.7s; 
		-ms-transition: 		transform ease-in-out 0.7s; 
			transition: 		transform ease-in-out 0.7s; 
}
.spokt-credibility { left: -1000px; }
.sidebar-testimonial .quote, .signup-flow-container .three-col .column .spokt-credibility p { color: #fff; font-size: 18px; line-height: 1.37em; font-weight: 400; padding: 0 20px; font-style: italic; }
.sidebar-testimonial .quote { font-weight: 400; }
.signup-flow-container .three-col .column .spokt-credibility p { font-style: normal; }
.sidebar-testimonial .attribution { color: #fff; font-size: 17px; line-height: 1.4em; font-weight: 300; padding: 0 20px;  }
.sidebar-testimonial .attribution span { font-weight: inherit; }
.column-content-wrap { overflow: hidden; position: relative; }
.features-list { position: relative; left: 0px; 
	-webkit-transition: -webkit-transform ease-in-out 0.7s; 
	   -moz-transition: -moz-transform ease-in-out 0.7s; 
		-ms-transition: transform ease-in-out 0.7s; 
			transition: transform ease-in-out 0.7s; 
}
.signup-box { color: rgba(106, 174, 181, 1); }
.signup-steps-glyphs { width: 465px; margin: 0 auto; }
.signup-steps-glyphs h4 { font-size: 26px; text-align: center; margin: 5px auto 5px; color: inherit; }
.signup-step-glyph { width: 70px; float: left; margin: 0px 0 5px; position: relative; padding-bottom: 50px; color: inherit; }
.steps-spacer { width: 97px; margin: 83px 15px 0; float: left; border-bottom: solid 1px #ccc; }
.signup-steps-glyphs .glyph { width: 70px; height: 70px; border-radius: 70px; border-style: solid; border-width: 1px; background-color: rgba(106, 174, 181, 1); border-color: rgba(106, 174, 181, 1); overflow: hidden; position: relative; }
.signup-steps-glyphs .glyph-label { text-align: center; font-size: 15px; line-height: 1.3em; text-transform: uppercase; width: 150px; position: absolute; bottom: 0; left: -45px; }

.signup-step-glyph .glyph-image { width: 70px; height: 70px; display: block; position: relative; top: 0; left: 0; background-image: url("/assets/spokt-sprite-new-9edf67af.png"); background-repeat: no-repeat; background-position: -903px -20px; }
.signup-step-glyph.signup-step-glyph-2 .glyph-image { background-position: -968px -19px; width: 0px; height: 0px; }
.signup-step-glyph.signup-step-glyph-3 .glyph-image { background-position: -1030px -18px; }

/* DARK GLYPH SHAPES */


.signup-step-glyph-1 .glyph-label, .step-1-complete .signup-step-glyph-2 .glyph-label, .step-2-complete .signup-step-glyph-3 .glyph-label { font-weight: 700; }
.step-1-complete .signup-step-glyph-1 .glyph-label, .step-2-complete .signup-step-glyph-2 .glyph-label, .step-3-complete .signup-step-glyph-3 .glyph-label { font-weight: 400; }

.plan-1, .plan-2, .plan-3 { border-color: rgba(106, 174, 181, 1); color: rgba(106, 174, 181, 1); }

.plan-1 .glyph { background-color: rgba(95, 138, 152, 1); border-color: rgba(95, 138, 152, 1); }
.plan-2 .glyph { background-color: rgba(106, 174, 181, 1); border-color: rgba(106, 174, 181, 1); }
.plan-3 .glyph { background-color: rgba(51, 181, 162, 1); border-color: rgba(51, 181, 162, 1); }

.step-1-complete .plan-1 .signup-step-glyph-1 .glyph, .step-2-complete .plan-1 .signup-step-glyph-2 .glyph, .step-3-complete .plan-1 .signup-step-glyph-3 .glyph { background-color: #a1c1ca; }
.step-1-complete .plan-2 .signup-step-glyph-1 .glyph, .step-2-complete .plan-2 .signup-step-glyph-2 .glyph, .step-3-complete .plan-2 .signup-step-glyph-3 .glyph { background-color: #92c7cd; }
.step-1-complete .plan-3 .signup-step-glyph-1 .glyph, .step-2-complete .plan-3 .signup-step-glyph-2 .glyph, .step-3-complete .plan-3 .signup-step-glyph-3 .glyph { background-color: #7dc8bd; }



/* ================================================================================= */
/* ============================== END NEW SIGNUP FLOW ============================== */
/* ================================================================================= */







.signup-box .signup-step-glyph .glyph { display: block; overflow: visible;  }
/* .signup-box .signup-step-glyph .glyph { display: block; overflow: visible; background-color: rgba(106, 174, 181, 1); border-color: rgba(106, 174, 181, 1); color: rgba(106, 174, 181, 1) } */

.step-1-complete .signup-step-glyph-1.signup-step-glyph .glyph { 

}        



.completed-checkmark, .glyph-waiting, .glyph-active { border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 70px 70px; border-style: solid; width: 70px; height: 70px; position: absolute; top: -1px; left: -1px; display: block;

/*-webkit-transition: all 300ms ease-in, background-color 0ms, z-index 2s 2s; */

}




/*

COLORS
.signup-box.plan-1 { border-width: 0; border-left-width: 6px; border-style: solid; border-color: rgba(95, 138, 152, 1); border-radius: 5px 0 0 5px; color: rgba(95, 138, 152, 1); }
.signup-box.plan-2 { border-width: 0; border-left-width: 6px; border-style: solid; border-color: rgba(106, 174, 181, 1); border-radius: 5px 0 0 5px; color: rgba(106, 174, 181, 1); }
.signup-box.plan-3 { border-width: 0; border-right-width: 6px; border-style: solid; border-color: rgba(51, 181, 162, 1); border-radius: 0 5px 5px 0; color: rgba(51, 181, 162, 1); }
*/


/*
.signup-box.plan-selected .signup-step-glyph-1 .glyph-background, .plan-selected .signup-step-glyph .glyph-background { position: relative; top: 70px; }
.glyph-waiting { top: 140px; }
.glyph-active { top: 210px; }
.completed-checkmark { top: 280px; }
*/



/* WHITE GLYPHS */

.completed-checkmark { border-width: 35px; border-style: solid; border-color: inherit; background-color: transparent; z-index: 10; background-color: inherit; 
-webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 0ms;
   -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 0ms;
	-ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 0ms;
		transition: border-width 200ms ease-in 0ms, z-index 0ms linear 0ms; }

.step-1-complete .signup-step-glyph-1 .completed-checkmark, 
.step-2-complete .signup-step-glyph-2 .completed-checkmark,
.step-3-complete .signup-step-glyph-3 .completed-checkmark 
{ 
border-width: 35px; border-style: solid; z-index: 50;
-webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms;
   -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms;
	-ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms;
		transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms;
}

.step-1-complete .plan-1 .signup-step-glyph-1 .completed-checkmark, 
.step-2-complete .plan-1 .signup-step-glyph-2 .completed-checkmark, 
.step-3-complete .plan-1 .signup-step-glyph-3 .completed-checkmark 
{  }

.step-1-complete .plan-2 .signup-step-glyph-1 .completed-checkmark, 
.step-2-complete .plan-2 .signup-step-glyph-2 .completed-checkmark, 
.step-3-complete .plan-2 .signup-step-glyph-3 .completed-checkmark 
{  }

.step-1-complete .plan-3 .signup-step-glyph-1 .completed-checkmark, 
.step-2-complete .plan-3 .signup-step-glyph-2 .completed-checkmark, 
.step-3-complete .plan-3 .signup-step-glyph-3 .completed-checkmark 
{  }




.signup-step-glyph-1 .completed-checkmark { background-image: url("/assets/signup-glyphs-1a-ba47e5bb.png"); border-color: inherit; }
.signup-step-glyph-2 .completed-checkmark { background-image: url("/assets/signup-glyphs-1b-fe93eb88.png"); border-color: inherit; }
.signup-step-glyph-3 .completed-checkmark { background-image: url("/assets/signup-glyphs-1c-d4f0d4ae.png"); border-color: inherit; }



/* ================ GLYPH WAITING ================== */
.glyph-waiting { border-width: 1px; background-color: transparent; z-index: 40; 
-webkit-transition: border-width 200ms ease-in 200ms, background-color 0ms, z-index 0ms linear 200ms; 
   -moz-transition: border-width 200ms ease-in 200ms, background-color 0ms, z-index 0ms linear 200ms; 
	-ms-transition: border-width 200ms ease-in 200ms, background-color 0ms, z-index 0ms linear 200ms; 
		transition: border-width 200ms ease-in 200ms, background-color 0ms, z-index 0ms linear 200ms; 
}

.signup-step-glyph-1 .glyph-waiting { z-index: 40; background-color: white; border-width: 1px; 
-webkit-transition: border-width 300ms ease-in 300ms, z-index 0ms linear 300ms;
   -moz-transition: border-width 300ms ease-in 300ms, z-index 0ms linear 300ms;
	-ms-transition: border-width 300ms ease-in 300ms, z-index 0ms linear 300ms;
		transition: border-width 300ms ease-in 300ms, z-index 0ms linear 300ms; }

.plan-1 .signup-step-glyph-1 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-1-58ef46fd.png"); }
.plan-2 .signup-step-glyph-1 .glyph-waiting { background-image: url("/assets/signup-glyphs-2-1-0aeae088.png"); }
.plan-3 .signup-step-glyph-1 .glyph-waiting { background-image: url("/assets/signup-glyphs-3-1-e0d098f3.png"); }

.plan-1 .signup-step-glyph-2 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-2-428fd6ac.png"); }
.plan-2 .signup-step-glyph-2 .glyph-waiting { background-image: url("/assets/signup-glyphs-2-2-3589407b.png"); }
.plan-3 .signup-step-glyph-2 .glyph-waiting { background-image: url("/assets/signup-glyphs-3-2-9ca31522.png"); }

.plan-1 .signup-step-glyph-3 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-3-303f34d2.png"); }
.plan-2 .signup-step-glyph-3 .glyph-waiting { background-image: url("/assets/signup-glyphs-2-3-a3afde1a.png"); }
.plan-3 .signup-step-glyph-3 .glyph-waiting { background-image: url("/assets/signup-glyphs-3-3-e5f4aa66.png"); }



.plan-selected .signup-step-glyph-1 .glyph-waiting { border-width: 35px; z-index: 10; 
-webkit-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms;
   -moz-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms;
	-ms-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms;
		transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; 
}
.step-1-complete .signup-step-glyph-2 .glyph-waiting { border-width: 35px; z-index: 10; 
-webkit-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms;
   -moz-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms;
	-ms-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms;
		transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms;
}
.step-1-complete.step-2-complete .signup-step-glyph-3 .glyph-waiting { border-width: 35px; z-index: 10; 
-webkit-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; 
   -moz-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; 
    -ms-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; 
		transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; 
}

.signup-step-glyph-1 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-1-58ef46fd.png"); border-color: inherit; }
.signup-step-glyph-2 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-2-428fd6ac.png"); border-color: inherit; background-color: white; }
.signup-step-glyph-3 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-3-303f34d2.png"); border-color: inherit; background-color: white; }

/* ================ GLYPH WAITING ================== */


/* ================= GLYPH ACTIVE ================== */

.signup-step-glyph-1 .glyph-active { background-image: url("/assets/signup-glyphs-1-2e815a62.png"); }
.signup-step-glyph-2 .glyph-active { background-image: url("/assets/signup-glyphs-2-dc543182.png"); }
.signup-step-glyph-3 .glyph-active { background-image: url("/assets/signup-glyphs-3-8091c492.png"); }

.plan-selected .glyph-active { background-color: inherit; }
.glyph-active { border-width: 35px; z-index: 10; 
-webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms;  
   -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms;  
    -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms;  
		transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms;  
}
.step-1-complete .signup-step-glyph-2 .glyph-active { border-width: 0px; z-index: 40; 
-webkit-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms;
   -moz-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms;
    -ms-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms;
		transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms;
}
.step-1-complete.step-2-complete .signup-step-glyph-3 .glyph-active { border-width: 0px;  z-index: 40;
-webkit-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; 
   -moz-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms;
    -ms-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; 
		transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; 
}

.signup-step-glyph .glyph-active { border-width: 35px; 
-webkit-transition: border-width 200ms ease-in 100ms, z-index 0ms linear 200ms; 
   -moz-transition: border-width 200ms ease-in 100ms, z-index 0ms linear 200ms; 
    -ms-transition: border-width 200ms ease-in 100ms, z-index 0ms linear 200ms; 
		transition: border-width 200ms ease-in 100ms, z-index 0ms linear 200ms; 
}
.plan-selected .signup-step-glyph-1 .glyph-active { background-color: inherit; border-width: 0px; z-index: 40; 
-webkit-transition: border-width 200ms ease-in 1100ms, z-index 0ms linear 1100ms; 
   -moz-transition: border-width 200ms ease-in 1100ms, z-index 0ms linear 1100ms; 
    -ms-transition: border-width 200ms ease-in 1100ms, z-index 0ms linear 1100ms; 
		transition: border-width 200ms ease-in 1100ms, z-index 0ms linear 1100ms; 
}
.user-went-back .plan-selected .signup-step-glyph-1 .glyph-active { background-color: inherit; border-width: 0px; z-index: 40; 
-webkit-transition: border-width 200ms ease-in 1200ms, z-index 0ms linear 1200ms; 
   -moz-transition: border-width 200ms ease-in 1200ms, z-index 0ms linear 1200ms; 
    -ms-transition: border-width 200ms ease-in 1200ms, z-index 0ms linear 1200ms; 
		transition: border-width 200ms ease-in 1200ms, z-index 0ms linear 1200ms; 
}

.step-1-complete .signup-step-glyph-1 .glyph-active { z-index: 30; background-color: inherit; border-width: 35px; 
-webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
   -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
    -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
		transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
}
.user-went-back.step-1-complete .signup-step-glyph-1 .glyph-active { z-index: 30; background-color: inherit; border-width: 35px; 
-webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
   -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
    -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
		transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
}

.step-1-complete.step-2-complete .signup-step-glyph-2 .glyph-active { z-index: 30; background-color: inherit; border-width: 35px; 
-webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
   -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
    -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
		transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
}
.step-1-complete.step-2-complete.step-3-complete .signup-step-glyph-3 .glyph-active { z-index: 30; background-color: inherit; border-width: 35px; 
-webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
   -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
    -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
		transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; 
}
/* ================= GLYPH ACTIVE ================== */

.user-went-back.step-1-complete .signup-step-glyph-1 .completed-checkmark {  }
.step-1-complete .signup-step-glyph-1 .completed-checkmark {  }
/* ================ GLYPH CHECKMARK ================ */

.step-1-complete .signup-step-glyph-1 .completed-checkmark { z-index: 50; border-width: 0px; 
-webkit-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
   -moz-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
    -ms-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
		transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
}
.step-1-complete.step-2-complete .signup-step-glyph-2 .completed-checkmark { z-index: 50; border-width: 0px; 
-webkit-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
   -moz-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
    -ms-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
		transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
}
.step-1-complete.step-2-complete.step-3-complete .signup-step-glyph-3 .completed-checkmark { z-index: 50; border-width: 0px; 
-webkit-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
   -moz-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
    -ms-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
		transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; 
}
.user-went-back.step-1-complete .signup-step-glyph-1 .completed-checkmark { z-index: 50; border-width: 0px; 
-webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms; 
   -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms; 
    -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms; 
		transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms; 
}
/**/
.user-went-back .signup-step-glyph-1 .completed-checkmark { z-index: 10; border-width: 35px; 
-webkit-transition: border-width 200ms ease-in 900ms, z-index 0ms linear 1200ms, background-color 0ms linear 1300ms; 
   -moz-transition: border-width 200ms ease-in 900ms, z-index 0ms linear 1200ms, background-color 0ms linear 1300ms; 
    -ms-transition: border-width 200ms ease-in 900ms, z-index 0ms linear 1200ms, background-color 0ms linear 1300ms; 
        transition: border-width 200ms ease-in 900ms, z-index 0ms linear 1200ms, background-color 0ms linear 1300ms; 
}
/* ================ GLYPH CHECKMARK ================ */




/* =============== GLYPH BACKGROUND ================ */
.glyph-background { z-index: 10; }

.glyph-background, .user-went-back .signup-step-glyph-1 .glyph-background { position: absolute; top: 9px; left: 9px; width: 50px; height: 50px; border-radius: 50%; z-index: 10;

-webkit-transition: all 400ms cubic-bezier(0.680,      0, 0.265,     1) 0.3s, background-color 0ms; /* older webkit */
-webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 0.3s, background-color 0ms; 
   -moz-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 0.3s, background-color 0ms; 
     -o-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 0.3s, background-color 0ms; 
        transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 0.3s, background-color 0ms; /* easeInOutBack */

}

.user-went-back .plan-selected .signup-step-glyph-1 .glyph-background, 
.user-went-back .plan-selected .step-1-complete .signup-step-glyph-2 .glyph-background, 
.user-went-back .plan-selected .step-1-complete.step-2-complete .signup-step-glyph-3 .glyph-background
{
width: 50px; height: 50px; top: 9px; left: 9px; 
-webkit-transition: all 0;
   -moz-transition: all 0;
    -ms-transition: all 0;
        transition: all 0;
}

.plan-selected .signup-step-glyph-1 .glyph-background
{ width: 70px; height: 70px; top: -1px; left: -1px; 

-webkit-transition: all 300ms cubic-bezier(0.680,      0, 0.265,     1) 1100ms, background-color 0ms; /* older webkit */
-webkit-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1100ms, background-color 0ms; 
   -moz-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1100ms, background-color 0ms; 
     -o-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1100ms, background-color 0ms; 
        transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1100ms, background-color 0ms linear 0ms, opacity 0ms linear 0ms, border 0ms linear 0ms; /* easeInOutBack */
}

.step-1-complete .plan-selected .signup-step-glyph-1 .glyph-background
{ width: 70px; height: 70px; top: -1px; left: -1px; 

-webkit-transition: all 300ms cubic-bezier(0.680,      0, 0.265,     1) 300ms, background-color 0ms; /* older webkit */
-webkit-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 300ms, background-color 0ms; 
   -moz-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 300ms, background-color 0ms; 
     -o-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 300ms, background-color 0ms; 
        transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 300ms, background-color 0ms; /* easeInOutBack */
}

.step-1-complete .plan-selected .signup-step-glyph-2 .glyph-background, 
.step-1-complete.step-2-complete .plan-selected .signup-step-glyph-3 .glyph-background
{ width: 70px; height: 70px; top: -1px; left: -1px; 

-webkit-transition: all 300ms cubic-bezier(0.680,      0, 0.265,     1) 1000ms, background-color 0ms; /* older webkit */
-webkit-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1000ms, background-color 0ms; 
   -moz-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1000ms, background-color 0ms; 
     -o-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1000ms, background-color 0ms; 
     	transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1000ms, background-color 0ms; /* easeInOutBack */
}


.glyph-background { background-color: inherit; }
/* =============== GLYPH BACKGROUND ================ */


.price-row .description { float: left; width: 350px; }
.price-row .amount { float: left; width: 50px; text-align: right; }



.manage-hub-domain-chooser .big-button { min-width: 256px; margin: 0 auto 15px; }
.manage-hub-domain-chooser p { width: 70%; margin: 0 auto 20px; color: #555; }
.manage-hub-domain-chooser p.subline { font-size: 13px; margin: 8px auto; }
.manage-hub-domain-chooser ol { margin: 15px auto; }
.manage-hub-domain-chooser li { list-style-type: decimal; margin: 8px 0 0 35px; }
.manage-hub-domain-chooser .note { margin: 30px 0; width: auto; font-size: 14px; padding: 20px 25px 25px; background: #f5f5f5;}
.manage-hub-domain-chooser p.domain-more-help-link { margin-bottom: 10px; text-align: center; }
.manage-hub-domain-chooser .domain-more-help { max-height: 0; margin: 0 auto 0; overflow: hidden; padding: 0 10px; 
-webkit-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
-moz-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
-ms-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
}
.manage-hub-domain-chooser .domain-more-help-inner { margin: 20px 0 30px; background: #fff; box-shadow: inset 0 0 1px #ccc, 0 0 10px 0 #eee; padding: 30px 15% 10px 15%; }
.manage-hub-domain-chooser .domain-more-help-inner h4 { font-size: 19px; }

.manage-hub-domain-chooser .domain-more-help.active { max-height: 1200px; transition: max-height 0.8s ease-in; }

.manage-hub-domain-chooser .add-existing-domain, .manage-hub-domain-chooser .register-new-domain { max-height: 0; overflow: hidden; position: relative; display: block; 
-webkit-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
-moz-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
-ms-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
}
.manage-hub-domain-chooser .add-existing-domain.active, .manage-hub-domain-chooser .register-new-domain.active { max-height: 1200px; 
-webkit-transition: max-height 1s ease-in; 
-moz-transition: max-height 1s ease-in; 
-ms-transition: max-height 1s ease-in; 
transition: max-height 1s ease-in; 
}
.choose-buttons { transition: max-height 600ms ease-in; max-height: 1200px; overflow: hidden; height: auto; position: relative; display: block; }
.choose-buttons.hidden { max-height: 0; 
-webkit-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
-moz-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
-ms-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
}
.manage-hub-domain-chooser .choose-buttons p { text-align: left; }

.domain-chooser-inner { margin-bottom: 45px; }
.manage-hub-domain-chooser .big-button.domain-check { min-width: 0; margin-top: 10px; margin-bottom: 10px; }
.register-new-domain .domain-chooser-inner { padding-top: 15px; }
.domain-chooser-inner input[type=text] { height: 32px; position: relative; top: 0px; margin-top: 0px; line-height: 32px; width: 360px; }
.domain-chooser-cancel { font-size: 25px; margin: 40px auto 20px auto; text-transform: uppercase; font-weight: 300; max-height: 0px; display: block; overflow: hidden; 
-webkit-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
-moz-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
-ms-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); 
}
.domain-chooser-cancel.active { max-height: 600px; color: #555; text-decoration: none; 
-webkit-transition: max-height 600ms ease-in;
-moz-transition: max-height 600ms ease-in;
-ms-transition: max-height 600ms ease-in;
transition: max-height 600ms ease-in;
}
.contentBox a.domain-chooser-cancel:hover, .domain-chooser-cancel.active:hover { text-decoration: none; color: rgb(240,100,0); }






/* ================================= DOMAIN CHECKOUT ================================== */
.checkout-inline-link { text-transform: uppercase; color: #aaa; font-size: 12px; }

.secondary-checkout { margin: 0 auto; }
.secondary-checkout .price-row { margin: 15px 0 0; width: auto; }
.secondary-checkout .price-row .description { width: 460px; }
.secondary-checkout .price-row .amount { float: right; width: 80px; padding-right: 10px; }

.secondary-checkout .price-row.total {  }
.secondary-checkout .price-row.total .description { text-transform: uppercase; font-size: 15px; padding-top: 15px; width: 390px; }
.secondary-checkout .price-row.total .amount { padding-top: 15px; border-top: solid 1px #ddd; width: 130px; }


.secondary-checkout .big-button.green { margin-top: 25px; }
.secondary-checkout .big-button.green.js-go-forward { margin-top: 8px; }


.js-new-domain { height: 40px; position: relative; top: 0px;line-height: 32px; width: 80%; margin: 0 auto; display: block; }

.new-domain-check-wrapper h2 { text-align: center; margin: 0 auto 15px; }

.secondary-checkout p.subline.left.js-charge-message { margin-top: 7px; float: left; margin-left: 0; }
.secondary-checkout p.subline.left.js-charge-message { margin-top: 7px; float: left; margin-left: 0; }

.signup-hero-copy.inner p.subline.left { padding-right: 0;line-height: 1.5em; margin: 0; color: #999; font-size: 12px; text-transform: uppercase; margin-top: 12px; width: 300px; }

.secondary-checkout button.big-button.green.right.js-go-forward { float: left; margin-right: 10px; margin-top: 0; }

.secondary-checkout .domain-success-message a { font-weight: 800; }

.question-icon { font-size: 10px; line-height: 11px; width: 13px; height: 13px; text-align: center; border-radius: 50%; border: solid 1px #ccc; display: inline-block; margin-left: 4px; color: #fff; background: #ccc; position: relative; top: -2px; font-weight: 800; font-family: helvetica; }
a:hover .question-icon { background-color: #e06b00; border-color: #e06b00; }




.harbor-checkout #header { opacity: 0.8; }

.harbor-checkout .inner.signup-hero-copy.hero-copy { min-height: 900px; }
.harbor-checkout .inner.signup-hero-copy.hero-copy h1 { color:#fff; text-shadow: 0px 0px 10px #036; }

.signup-hero-copy a { color: #f05b00;}
.signup-hero-copy a.big-button { color: #fff;}
/* =============================== END DOMAIN CHECKOUT ================================ */












/* ================================== .FAMILY EDITS =================================== */

.dot-family-landing .inner.home-hero-copy.hero-copy { min-height: 900px; }

.dot-family-landing #header .inner { display: none; }
#header .dot-family-header.inner { display: none; }
#home.dot-family-landing #header { background: transparent; padding-top: 25px; }
#home.dot-family-landing #header .dot-family-header.inner { display: block; width: 100%; }

.dot-family-landing #header a.logo { background-image: url("/assets/dot-family-sprite-8db0fa69.png"); background-size: 500px 500px; background-repeat: none; background-position: -30px -60px; height: 55px; }
.dot-family-landing .content-wrap.top-page-hero { /* margin-top: -100px; */ }

.dot-family-landing .home-hero-copy-inner { width: 100%; padding-bottom: 250px; }
.dot-family-landing .home-hero-copy-inner h1 { font-family: Lato, Raleway, "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; font-size: 42px; text-align: center; margin: 0 0 15px 0; color: white; font-weight: 300; width: 100%; }
.dot-family-landing .home-hero-copy-inner h1 span { font-size: inherit; font-weight: 600; color: inherit; }
.dot-family-landing .home-hero-copy-inner h2 { font-size: 22px; font-weight: 400; color: white; text-align: center; line-height: 1.2em; text-transform: uppercase; margin-bottom: 20px; }
.dot-family-landing .home-hero-copy-inner h2 span { background: url("/assets/dot-family-sprite-8db0fa69.png"); background-size: 500px 500px; background-repeat: none; background-position: -58px -169px; width: 100px; display: inline-block; }
.dot-family-landing .home-hero-copy-inner h2 span span { visibility: hidden; }

.dot-family-search-form { display: block; margin: 0 auto; text-align: center; }
.search-form-inner { padding: 8px; background-color: rgba(0,0,0,0.4); border-radius: 8px; display: inline-block; margin: 0 auto; }
.dot-family-search-form input[type=text] { width: 430px; height: 45px; color: #333; line-height: 30px; padding: 10px 15px; font-size: 20px; border-radius: 4px; margin-right: 7px; float: left; }
.dot-family-search-form input[type=submit], .dot-family-iti-btn { width: auto; height: 45px; color: #fff; background: #fb671f; line-height: 45px; padding: 0 35px; font-size: 20px; border: none; border-radius: 4px; float: left; }
.dot-family-iti-btn.green { background: #fb671f; }
.dot-family-landing .home-hero-copy-inner p { font-size: 13px; font-weight: 400; text-transform: uppercase; color: white; text-align: center; }
.dot-family-namesplash { text-align: center; height: 70px; }
.namesplash-blinking-cursor { font-size: 48px; font-weight: 300; position: relative; top: -1px; color: white; margin-right: -7px; }
.dot-family-landing .home-hero-copy-inner .dot-family-namesplash p { text-align: right; display: inline-block; width: 420px; margin-left: -230px; font-size: 40px; margin-bottom: 0; line-height: 1.1em; font-weight: 300; margin-right: -5px; }
.dot-family-namesplash div.dot-family-logo { text-align: left; display: inline-block; background-image: url("/assets/dot-family-sprite-8db0fa69.png"); background-size: 500px 500px; background-position: -275px -57px; background-repeat: none; width: 160px; height: 55px; top: 21px; position: relative; }

.dot-family-landing .search-form-inner input::-webkit-input-placeholder {
    color: rgba(0,0,0,0.35);
}
.dot-family-landing .search-form-inner input:focus::-webkit-input-placeholder {
    color: rgba(0,0,0,0.15);
}

.signup-flow-container .three-col .column-1 .price .savings-tag { background-position: -579px -370px; }
.signup-flow-container .three-col .column-2 .price .savings-tag { background-position: -579px -451px; }
.signup-flow-container .three-col .column-3 .price .savings-tag { background-position: -559px -540px; }

.dot-family-search-results-wrap { background: #fff; padding: 0; overflow: hidden; -webkit-transition: all ease-in-out 0.9s; transition: all ease-in-out 0.9s; position: relative; max-height: 1300px; }
.dot-family-search-results-wrap.closed { max-height: 0; }
.dot-family-search-results-wrap .inner { padding: 100px 0 150px 0; }
.dot-family-search-results .big-button.green { margin: 0 auto; }
.dot-family-search-results h3 { font-size: 29px; text-transform: uppercase; font-weight: 200; text-align: center; margin-top: 30px; }
.dot-family-search-results .iti-wrap { text-align: center; margin-top: 20px; font-size: 20px; margin-bottom: 30px; }
.dot-family-search-results .iti-wrap a { font-size: 26px; font-weight: 300; }
.dot-family-search-results .subline { margin: 20px 0 10px; text-transform: uppercase; font-weight: 300; color: #777; }
.dot-family-search-results p.try-again { font-size: 21px; }

.domain-available { display: none; }
.domain-available.premium { display: block; }
.domain-unavailable { display: none; }
.domain-suggestions { width: 1060px; margin: 40px 40px 0; }
.domain-suggestions h3 { font-size: 26px; margin: 0 0 30px; color: #999; font-weight: 300; }
.domain-available h3 em { font-weight: inherit; }
.domain-suggestions a { display: block; margin: 0px 60px 10px 0; border-bottom: solid 1px #eee; width: 430px; float: left; }
.close-dot-family-results { font-size: 80px; font-weight: 200; color: #aaa; top: 20px; right: 30px; line-height: 50px; position: absolute; z-index: 100; }
.dot-family-search-results-wrap input[type=submit] { font-size: 15px; }
.loading-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.92); z-index: 10;
 }
.loading-overlay h3 { font-size: 30px; top: 20%; position: relative; color: rgb(57, 181, 169); }



/* ==================================== SPINNERS ==================================== */
/* ================================================================================== */

.sk-folding-cube {
  margin: 20px auto;
  width: 100px;
  height: 100px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
  top: 30%;
  bottom: 50%;
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51, 181, 162, 1);

  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}





/* ================================== LOADING SPINNER ================================== */

.loading-spinner {
  margin: 100px auto;
  width: 180px;
  height: 5px;
  text-align: center;
  font-size: 10px;
  top: 40%; 
  bottom: 60%;
  z-index: 10000;
}

.loading-spinner > div {
  background-color: rgba(51, 181, 162, 1);
  height: 100%;
  width: 16px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.loading-spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.loading-spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.loading-spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.loading-spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(10.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(10.0);
    -webkit-transform: scaleY(10.0);
  }
}


/* ================================================================================== */
/* =================================== END SPINNERS ================================= */




/* ================================ END .FAMILY EDITS ================================= */


.inquiry-message { width: 500px; height: 150px; margin: 0; }




.amzn-native-header-text { color: red; display:none; }
.amzn-native-header { color: #888; }
.amzn-native-header:after { content: 'Support Spokt by Shopping Amazon'; }



.announcement-modal { padding: 40px; }
.announcement-modal h3 { margin: 10px auto 20px auto; display:block; text-align: center; font-size: 17px; }
.announcement-modal h4 { font-weight: 300; margin:25px 0px 5px 0px; font-size: 19px; }
.announcement-modal p { font-size: 14px; color: #3c3f40; line-height: 1.7em; margin: 0 auto 8px auto; }
.announcement-modal p strong { font-weight: 700; }
.announcement-modal p a { color: #ea4a05; }
.announcement-modal p a:hover { color: #000; text-decoration: underline; }
.announcement-modal a.dismiss-button { display:block; width: 300px; height: 50px; background: #444; color: #eee; line-height: 50px;text-align:center; margin: 20px auto;border-radius: 4px; }
.announcement-modal a.contact-button { display:block; margin: 15px auto; color: #259be7; text-decoration: none; text-align:center; }





/* =============================== BEGIN SUMMER 2016 ANNOUNCEMENT ================================ */

.summer-16-glyph-image { width: 100px; height: 100px; margin-right: 10px; overflow: hidden; background-repeat: none; float: left; background-image: url(<%= asset_path('Spokt-Ads-Announcement-Glyphs.png') %>); background-position: -18px -18px; }
.summer-16-glyph-2 { background-position: -121px -18px; }
.summer-16-glyph-3 { background-position: -224px -18px; }


.announcement-modal p { font-size: 16px; margin-top: 15px; }
.announcement-modal p em, .announcement-modal p a { font-size: inherit; }
.summer2016-announcement p { float: left; font-size: 16px; margin-top: 15px; font-size: 16px; margin-top: 15px; }

/* ================================ END SUMMER 2016 ANNOUNCEMENT ================================= */



#post_body_12073724.postBody { margin-left: 0; overflow: visible; }

.numInputWrapper input[type="text"]:hover, .numInputWrapper input[type="text"]:focus { background: transparent; }
.flatpickr-calendar {
  background: rgba(68, 68, 70, 0.95);
}

.flatpickr-days {
  width: auto;
  padding: 0;
  outline: 0;
  text-align: left;
  width: 315px;
  display: inline-block;
  flex-wrap: nowrap;
  justify-content: initial;
}



body#hub-pages .flatpickr-day, #hub-pages .flatpickr-day {
  /*max-width: 30px;
  height: 30px;
  line-height: 30px;
  width: 13.85714%;
  flex-basis: 13.85714%;*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
} 

body#hub-pages .flatpickr-weekdays, #hub-pages .flatpickr-weekdays {
  box-sizing: border-box;
}


.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background: #ee872f;
  border-color: #ee872f;
}

.numInputWrapper span {
  padding: 0 2px 0 6px;
}
.numInputWrapper span {
  right: -30px;
}

div.bullseye {
  color: #555559;
  font-size: 24px;
}

a.btn.centered.click-to-browse {
  margin: 13px auto 20px;
  border-color: #d8d8d8;
}

.dropzone {
  font-size: 40px;
  margin: 20px -15px 0;
  text-align: center;
  line-height: 60px;
  border: 1px solid #f0f0f4;
  border-left: none;
  border-right: none;
  padding: 45px;
  font-variant: all-petite-caps;
  font-weight: 100;
  background: #fefefe;
}

a.btn.centered {
  margin: 0 auto 10px;
  display: block;
  width: 170px;
}


div.photos-uploads-progress {
  margin: 10px -15px 10px -15px;
  padding: 10px;
  background: rgba(26, 30, 31,0.05);
  border-bottom: solid 1px #e0e0e0;
  border-top: solid 1px #e0e0e0;
  display: none;
}

.photos-uploads-progress .upload { color: #555; background: rgba(192, 192, 192, 0.46); float: left; width: auto; margin: 5px; border-top: none; position: relative; min-width: 60px; min-height: 60px; padding: 0; height: 90px; }

 
.upload-preview { max-width: 100%; max-height: 90px; margin: 0 auto; display: block; } 
/*
.photos-uploads-progress .upload.horizontal { max-height: 60px; }
.upload-preview { max-width: 90px; max-height: 90px; }
*/

.photos-uploads-progress .upload .remove-link { display:none; visibility: hidden; position: absolute; top: 0; left: 0; text-align: center; font-weight: 300; width: 100%; height: 100%; font-size: 90px; line-height: 83px; }
.photos-uploads-progress .upload .remove-link:hover { text-decoration: none; }
/* .photos-uploads-progress .upload.horizontal .remove-link { line-height: 53px; } */

.photos-uploads-progress .upload.not-uploading:hover canvas { opacity: 0.6; }
.photos-uploads-progress .upload.not-uploading:hover .remove-link { display:block; visibility: visible; }
.photos-uploads-progress .upload img { max-width: 100%; max-height: 90px; margin: 0 auto; display: block; }
.photos-uploads-progress .upload .name-and-progress { position: absolute; bottom: 0px; left: 0px; width: 100%; display: block;}
.photos-uploads-progress .upload .progress { margin: 0; height: 5px; border: none; background: transparent; }
.photos-uploads-progress .upload .progress .bar { height: 5px; }

.upload-spinner { background: url('<%= asset_path('block-loading-white.gif') %>') no-repeat; display:none; background-size: 9px 14px; width: 9px; height: 14px; position: absolute; opacity: 0.85; bottom: 4px; right: 4px; }
.photos-uploads-progress .upload.uploading img { opacity: 0.6; }
.photos-uploads-progress .upload.uploading .upload-spinner { display: block; }
.photos-uploads-progress .upload.upload-complete .upload-spinner { background-image: url("/assets/signup-glyphs-1-4-b31be673.png"); background-size: 52px 52px; height: 52px; width: 52px; opacity: 1; position: absolute; left: 50%;top: 50%;margin-left: -26px;margin-top: -26px; }
.photos-uploads-progress .upload.upload-complete img { opacity: 1.0; }
.photos-uploads-progress .upload.uploading:hover .remove-link, .photos-uploads-progress .upload.upload-complete:hover .remove-link { display:none; visibility: hidden;
  }

.dropzone.hover.in { background-color: #ded; }
.dropzone.hover.in .bullseye { color: green; }

.photos-uploads-progress .upload.uploading { background: #000; }
.uploading .upload-preview { opacity: 0.8; }

.upload-message {display:none; text-align: center; color: #fafafa; margin: 17px -16px; padding: 10px; font-size: 27px; background: #65656b; }

/* Darken completed uploads */
.photos-uploads-progress .upload.upload-complete { background: #000; }
.upload-complete .upload-preview { opacity: 0.5; }



/* Multi Photo Posts */

a.multiple { position: relative; }
.multiple .glyph {
  background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -453px -125px;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  display: block;
  opacity: 0.75;
}

.s9.multiple .glyph {
  right: 0px;
  bottom: 0px;
}


.post_photo.multi-main-viewer { margin: 0; text-align: center; border-top-left-radius: 10px; border-top-right-radius: 10px; display:block; height: 600px; }

.multi-main-viewer .photo { vertical-align: middle; display: inline-block; max-width: 98%; }
.vertical-alignment-helper { display: inline-block; height: 100%; vertical-align: middle; width: 0; padding: 0; }

/* what happens if we hide these:
.multi-main-viewer:hover a.main-photo-nav-link { display: block; }
*/
a.main-photo-nav-link { height: 30px; width: 110px; line-height: 30px; color: #666; font-weight: 900; background: rgba(0,10,30,0.2); display: none; position: absolute; bottom: 0; text-transform: uppercase; }
a.main-photo-nav-link:hover { color: #efefef; text-decoration: none; background: rgba(0,0,0,0.3); }
a.photo:hover { text-decoration: none; }
.previous-photo-link { left: 12px; border-bottom-left-radius: 20px; border-top-left-radius: 20px; }
.next-photo-link { right: 7px; border-bottom-right-radius: 20px; border-top-right-radius: 20px; }


.multi-thumb-strip { height: 127px; margin-left: 5px; width: 100%; overflow-x: scroll; overflow-y: hidden; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

.multi-thumb-strip .multi-thumb-inner-strip { margin: 6px 12px 6px 6px; height: 106px; overflow-y: hidden; }
.multi-thumb-strip .multi-thumb { float: left; border-radius: 0; margin-right: 6px; opacity: 0.6;
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden; 
}
.multi-thumb img { min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0; 
}


.multi-thumb-strip .multi-thumb.active { opacity: 1.0; }
.photo-tools { display: block; width: 40px; height: 25px; margin: 2px auto 0; }

.dots-wrapper { 
  margin: 5px auto 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 330px;
}

.dot {
  border-radius: 10px;
  background: rgba(50,50,50, 0.2);
  width: 10px;
  height: 10px;
  display: inline-flex;
  margin-left: 10px;
}

.dot.selected {
  background-color: rgba(50,120,240,0.8);
}

div.locked-modal-bg {
  color: #333;
  cursor: default;
  font-size: 46px;
  text-align: center;
  padding-top: 50%;
  background: rgba(255, 255, 255, 0.4);
}

/* Responsive hero heights */
@media (max-width: 768px) {
  .hero-image.signup-hero-image-2,
  .hero-inner.hero-inner-3,
  .home-hero.hero-image,
  .demo-hero-section .signup-hero-copy-2 {
    min-height: 300px !important;
    height: 300px !important;
  }
}