/*
YELLOW fee600
GREY1  a2a4a6
GREY2  eaebeb
GREY3  f3f3f4
GREY4  fdfcec
GREEN  2f6c35
BLUE   323274
*/

html {
    background-image: url(../images/background.png);
}

html.all-black {
    background-image: none;
    background: #000000;
}

html, body {
    font-family: 'Source Sans Pro', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

/* inputs */

input[type=checkbox] {
    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    border: none;
    padding: 0 20px 0 0;
    font-size: 9px;
    line-height: 21px;
    margin: 0;
    width: 55px;
    height: 21px;
    background: none;
    background-size: 35px 21px;
    background-position: 20px 0;
    background-repeat: no-repeat;
    background-image: url(../images/switch-0.png);
    cursor: pointer;
    text-transform: uppercase;
    color: inherit;
}

input[type=checkbox]:before {
    content: 'NO';
}

input[type=checkbox]:checked {
    background: none;
    background-size: 35px 21px;
    background-position: 20px 0;
    background-repeat: no-repeat;
    background-image: url(../images/switch-1.png);
}

input[type=checkbox]:checked:before {
    content: 'YES';
}

input[type-checkbox].onoff:before {
    content: 'OFF';
}
input[type-checkbox].onoff:checked:before {
    content: 'ON';
}

input[type=checkbox].share-facebook, input[type=checkbox].share-twitter, input[type=checkbox].share-facebook:checked, input[type=checkbox].share-twitter:checked {
    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    border: none;
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-position: 0 0;
    background-repeat: no-repeat;
    cursor: pointer;
}
input[type=checkbox].share-facebook {
    background-image: url(../images/share-facebook-0.png);
}
input[type=checkbox].share-twitter {
    background-image: url(../images/share-twitter-0.png);
}
input[type=checkbox].share-facebook:checked {
    background-image: url(../images/share-facebook-1.png);
}
input[type=checkbox].share-twitter:checked {
    background-image: url(../images/share-twitter-1.png);
}
input[type=checkbox].share-facebook:before, input[type=checkbox].share-twitter:before, input[type=checkbox].share-facebook:checked:before, input[type=checkbox].share-twitter:checked:before {
    content: none;
}

input[type=submit], button {
    display: inline-block;
    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    text-transform: uppercase;
    border: none;
    padding: 4px 12px;
    background-color: #fee600;
    color: #000000;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
}

.email_list button, .add_email button {
    font-size: 12px;
    line-height: 16px;
    padding: 2px 6px;
}

/* fullscreen */

.fullscreen {
    clear: both;
    width: 100%;
}

.fullscreen .inner {
    margin: 64px;
    width: auto;
}

@media screen and (min-width: 480px) {
    .fullscreen {
	width: 480px;
	margin: 0 auto;
    }
}

/* layers */

.layer {
    clear: both;
}

.layer .inner {
    margin: 0 auto;
    width: 800px;
}

#top {
    background: #000000;
    color: #ffffff;
    height: 40px;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 2;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #929497;
}

.all-black #top {
    border-bottom-style: none;
}

#nav {
    background: none;
    color: #000000;
    height: 70px;
    padding: 75px 0 35px 0;
}

#front-goals, #front-start {
    background: #ffffff;
    color: #000000;
}

#front-community {
    background: #eaebeb;
    color: #000000;
}

#front-start {
    padding-bottom: 36px;
    margin-bottom: 36px;
}

#signup-strip {
    background: #fee600;
    color: #000000;
    padding: 16px 0;
    text-align: center;
}
#signup-strip a {
    color: #000000;
}

#top-left {
    float: left;
    width: 256px;
    margin-right: 16px;
}
#top-middle {
    float: left;
    width: 256px;
    margin-right: 16px;
    font-size: 16px;
    line-height: 22px;
    padding: 10px 0;
    text-align: center;
}
#top-right {
    width: 256px;
    float: right;
    font-size: 14px;
    line-height: 20px;
    padding: 11px 0;
}
#top-left h1 {
    margin: 11px 0;
}

#top-middle a {
    color: #929497;
    display: inline-block;
}

#top-right a {
    color: #ffffff;
}

#top ul {
    list-style-type: none;
}

#top-left ul li {
    display: block;
    float: left;
    margin-right: 32px;
}

#top-middle ul li {
    display: inline-block;
    margin: 0 16px;
}

#top-right > ul > li {
    display: block;
    float: right;
    margin-left: 32px;
}

#top #notifications, #top #no-notifications {
    height: 19px;
    font-size: 14px;
    line-height: 19px;
}

#top #notifications {
    background-color: #ffe600;
    color: #000000;
    padding: 0;
    border-radius: 12px;
}

#top #notifications a {
    color: #000000;
    padding: 0 7px;
}

#top #no-notifications {
    background-color: #929497;
    color: #000000;
    padding: 0;
    border-radius: 12px;
}

#top #no-notifications a {
    color: #000000;
    padding: 0 7px;
    display: inline-block;
}

#top .menu ul {
    display: none;
}

#top .menu ul li {
    margin-left: 16px;
}

#top .menu .dropit-submenu {
    background: #000000;
    padding: 12px 0;
    position: absolute;
    top: 20px;
    right: -24px;
    left: auto;
    box-shadow: 0px 0px 25px rgba( 0, 0, 0, 0.75 );
}

#top .menu .dropit-submenu a {
    font-weight: normal;
}

#top .menu ul, #top .menu li {
    float: none;    
}

#top .menu .dropit-submenu li.empty {
    height: 1px;
    background: #ffffff;
    margin: 4px 0;
}

#main {
    background: none;
}

#left {
    float: left;
    width: 256px;
    padding: 50px 0;
}

#right {
    float: right;
    width: 500px;
    padding: 50px 0;
}

.only-nav #left, .only-nav #right {
    padding: 0 0 50px 0;
}

#content {
    background: #ffffff;
    padding: 10px;
}

#nav ul {
  list-style-type: none;
}

#nav ul li {
  list-style-type: none;
  float: left;
  margin-right: 20px;
  font-size: 12px;
  line-height: 20px;
}

#nav ul li a {
  display: block;
  padding-top: 55px;
  height: 15px;
  width: 80px;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 50px 50px;
  text-align: center;
  color: #000000;
  font-size: 12px;
  font-weight: normal;
}
#nav ul li a span {
    display: inline-block;
    padding: 0px 4px;
    background: rgba( 255, 255, 255, 0.75 );
    box-shadow: 0px 0px 10px rgba( 255, 255, 255, 1 );
    border-radius: 4px;
}

#nav ul.right {
    float: right;
    margin-right: 16px;
}

#nav ul.right li {
    margin-left: 10px;
    width: 40px;
    margin-right: 0;
}

#nav ul.right li a {
  background-size: 30px 30px;
}

#nav ul.right li a span {
    display: none;
}

#nav-profile { background-image: url(../images/eyecon.png); }
.in-profile #nav-profile { background-image: url(../images/eyecon-grey.png); }

#nav-community { background-image: url(../images/bee.png); }
.in-community #nav-community { background-image: url(../images/bee-grey.png); }

#nav-reminders { background-image: url(../images/elephant.png); }
.in-reminders #nav-reminders { background-image: url(../images/elephant-grey.png); }

#nav-facebook { background-image: url(../images/facebook.png); }
#nav-twitter { background-image: url(../images/twitter.png); }

#nav #join-now {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    color: #6d6e70;
    float: left;
}

#nav #join-now a, #front-start .join-now a {
    text-transform: uppercase;
    display: inline-block;
    color: #000000;
    background: #fee600;
    padding: 4px 16px;
    margin-right: 8px;
}

/* strip */

#strip {
    background: #000000;
    color: #ffffff;
    height: 180px;
    padding: 35px 0;
}

#strip .avatar {
    width: 256px;
    height: 180px;
    float: left;
    margin-right: 44px;
}

#strip .avatar a, #strip .avatar img {
    display: block;
}

#strip .user {
    width: 500px;
    float: right;
    height: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 20px;
}

#strip .avatar img {
    display: block;
    float: right;
}

#strip .name-and-location {
    height: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
}

#strip .full-name {
    font-size: 20px;
    line-height: 26px;
}

#strip .location {
    margin-top: 6px;
    font-style: italic;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#strip .biography {
    height: 60px;
    width: 375px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 12px;
}

#strip h2 {
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
}

#strip .stats {
    color: #929497;
    list-style-type: none;
    clear: right;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    padding-top: 22px;
}

#strip .stats li {
    display: inline-block;
    margin-left: 16px;
}

#strip .links {
    clear: left;
    list-style-type: none;
}

#strip .links li {
    float: left;
    margin-right: 16px;
}

#strip .links a, #strip .links {
    color: #929497;
    font-weight: normal;
}

/* left */

#new-goal {
    width: 256px;
    margin-bottom: 16px;
}

#new-goal h2 {
    color: #ffffff;
    background: #000000;
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    background-image: url(../images/plus.png);
    background-position: 12px 12px;
    background-size: 35px 35px;
    background-repeat: no-repeat;
    cursor: pointer;
}

#new-goal ul, #new-goal li {
    list-style-type: none;
}

#new-goal.collapsed div {
    display: none;
}

#new-goal li {
    background: #ffffff;
    font-size: 14px;
    line-height: 20px;
    padding: 8px;
    border-top: 1px solid #a2a4a6;
}

#new-goal li a {
    display: block;
    background-image: url(../images/right-chevron.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 8px 14px;
}

#new-goal li:first-child {
    border-top: none;
}


#new-goal.custom li.newgoal-custom, #new-goal.time li.newgoal-time, #new-goal.quantity li.newgoal-quantity, #new-goal.frequency li.newgoal-frequency, #new-goal.choose li.newgoal-choose {
    background: #eaebeb;
}

#new-goal li:nth-child(odd) {
    background: #ffffff;
}

#my-goals {
    background: #ffffff;
    padding: 4px;
}

#my-goals h2 {
    font-size: 24px;
    line-height: 30px;
    text-transform: uppercase;
    margin-bottom: 32px;
    font-family: 'ExquiseFY-Black', serif;
}

#left .aside {
    background: #ffffff;
    padding: 8px;
}

#left .aside p {
    font-size: 16px;
    line-height: 20px;
}

#left .aside h2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

#my-goals h3 {
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    clear: both;
    background-size: 248px 18px;
    background-position: center 24px;
    background-repeat: no-repeat;
    padding-top: 44px;
    font-weight: bold;
    margin-bottom: 16px;
}

#my-goals h3.dreams {
    background-image: url(../images/dreams-line.png);
}

#my-goals h3.achieved {
    background-image: url(../images/achieved-line.png);
}

#my-goals h3.archived {
    background-image: url(../images/archived-line.png);
}

#my-goals form.delete-goal, form.delete-comment, form.delete-timeline {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    width: 20px;
    height: 20px;
}

#my-goals .goal.open {
  width: 120px;
  height: 100px;
  background: #a2a4a6;
  color: #ffffff;
  position: relative;
}

#my-goals .goal.open:nth-child(odd) {
  float: left;
  margin-bottom: 8px;
}

#my-goals .goal.open:nth-child(even) {
  float: right;
  margin-bottom: 8px;
}

#my-goals .goal.open img {
    display: block;
    position: absolute;
    left: 42px;
    top: 32px;
}

#my-goals .goal.open .updates {
    display: block;
    position: absolute;
    width: 100px;
    height: 36px;
    line-height: 36px;
    left: 10px;
    top: 29px;
    text-align: center;
    font-size: 36px;
    line-height: 36px;
}

#my-goals .updates .x {
    font-size: 18px;
}

#my-goals .goal.open.streak {
    background-image: url(../images/streak.png);
    background-size: 35px 18px;
    background-repeat: no-repeat;
    background-position: right 6px;
}

#my-goals .goal.open.dream {
    background-color: #000000;
    color: #ffffff;
}

#my-goals .goal.open.active {
    background-color: #fee600;
    color: #000000;
}

#my-goals .goal.closed {
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    padding: 8px 16px;
    margin-bottom: 4px;
    position: relative;
}

#my-goals .goal.closed.achieved {
    background: #ffe600;
}

#my-goals .goal.closed.archived {
    background: #323274;
    color: #ffffff;
}

#my-goals .goal.open h4 {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    bottom: 6px;
    width: 112px;
    overflow: hidden;
    margin: 0 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
    left: 0;
    height: 20px;
}

#my-goals .goal.closed h4 {
    overflow: hidden;
    margin: 0 4px;
    text-overflow: ellipsis;
    width: 208px;
    white-space: nowrap;
    height: 40px;
}

#my-goals .goal a {
    font-weight: normal;
}

.more-friends {
    background: #ffffff;
    padding: 12px;
}

.more-friends li {
    padding: 8px;
    height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.more-friends h2 {
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    margin-bottom: 12px;
}

.more-friends .follow-button {
    float: right;
    margin-left: 16px;
}

.more-friends li:nth-child(odd) {
    background-color: #eaebeb;
}

.more-friends li:nth-child(even) {
    background-color: #f3f3f4;
}

.more-friends li .avatar {
    float: left;
    margin-right: 12px;
}

.more-friends li .biography {
    height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 16px;
    margin-top: 8px;
}

/* right */

#right h1, .front h1, #right #journey-calendar {
    font-size: 20px;
    line-height: 24px;
    font-family: 'ExquiseFY-Black', serif;
    text-transform: uppercase;
}

#right h2 {
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
}

#right #publicgoal-heading {
    background: #000000;
    color: #ffffff;
    padding: 16px;
    margin-bottom: 16px;
}

#right #publicgoal-heading h2 {
    line-height: 28px;
    font-size: 14px;
}

#right #publicgoal-heading p {
    font-size: 14px;
    line-height: 20px;
}

#right #journey-calendar {
    font-size: 24px;
    line-height: 30px;
    background: #ffffff;
    padding: 12px 24px;
    margin-bottom: 24px;
    text-align: center;
}

#right #journey-calendar a {
    display: inline-block;
    margin: 0 12px;
}

#right #journey-calendar a {
    color: #a2a4a6;
}

#right #journey-calendar a.here {
    color: #000000;
}

#right h1 {
    margin-bottom: 16px;
}

#right .timeline .entry {
    margin-bottom: 36px;
    padding-top: 0px;
    position: relative;
}

#right .timeline .entry:last-child{
    margin-bottom: 0;
}

#right .add {
    position: relative;
    margin-bottom: 36px;
}

#right .call-to-action {
    padding-top: 0;
    margin-bottom: 36px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

#right .timeline .entry .heading {
    background-image: url(../images/up-triangle.png);
    background-size: 40px 20px;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding-bottom: 12px;
    position: relative;
}

#right .add .dates {
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-size: 12px;
    line-height: 16px;
}

#right .timeline .entry.no-type .heading, #right .timeline .entry.no-journey .heading {
    background-image: none;
    padding-bottom: 0;
}

#right .timeline .entry.type-streak {
    color: #ffffff;
    background: none;
    background-image: url(../images/streak-bg.png);
    background-size: 100% 100%;
    padding: 4px 16px;
    font-size: 14px;
    line-height: 26px;
}

#right .timeline .entry.type-join .user, #right .timeline .entry.type-archived .user, #right .timeline .entry.type-achieved .user {
    padding-bottom: 36px;
    background-size: 268px 20px;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 36px;
}
#right .timeline .entry.type-join {
    color: #000000;
    background-color: #ffe600;
}
#right .timeline .entry.type-join .user {
    background-image: url(../images/joined-timeline.png);
}

#right .timeline .entry.type-achieved {
    color: #000000;
    background-color: #ffe600;
}
#right .timeline .entry.type-achieved .user {
    background-image: url(../images/achieved-timeline.png);
}

#right .timeline .entry.type-archived {
    color: #ffffff;
    background-color: #323274;
}
#right .timeline .entry.type-archived .user {
    background-image: url(../images/archived-timeline.png);
}

#right .timeline .entry .comments {
    display: none;
    padding: 0 20px;
    background: #ffffff;
}

#right .timeline .entry {
    background-color: #f3f3f4;
}

#right .timeline .entry .user {
    font-size: 14px;
    line-height: 20px;
    padding: 12px 8px 0 8px;
}

#right .timeline .entry .user .avatar {
    float: left;
    margin-right: 12px;
}

#right .timeline .entry .user .full-name {
}

#right .timeline .entry .user .datetime {
    color: #6b6d6f;
}

#right .timeline .entry p {
    clear: both;
    padding: 12px 8px 12px 8px;
}

#right .add {
    padding: 12px 8px 4px 8px;
    background: #000000;
    color: #ffffff;
}

#right .add h2 {
    margin-top: 16px;
    font-size: 16px;
    line-height: 22px;
    height: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 32px;
}

#right .add .caption {
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 8px;
}

#right .add .checkin {
    float: left;
    height: 100px;
    width: 100px;
}

#right .add .checkin a {
    font-weight: normal;
}

#right .add .checkin input[type=submit], #right .add .checkin img {
    display: block;
    margin: 0 auto;
    cursor: pointer;
}
#right .add .checkin input[type=submit] {
    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    width: 75px;
    height: 75px;
    background: none;
    background-image: url(../images/checkin.png);
    background-size: 75px 75px;
    padding: 0;
    border-style: none;
}

#right .timeline .entry .strapline, #right .timeline .entry .goal-update {
    font-size: 14px;
    line-height: 20px;
}

#right .timeline .entry.no-strapline, #right .timeline .no-timeline {
    background: #a2a4a6;
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
}

#right .timeline .journey, #right .timeline .edit-journey {
    background: #fffce5;
    color: #000000;
    font-size: 14px;
    line-height: 20px;
}

#right .timeline .journey a, #right .timeline .comment p a {
    color: #323274;
    font-weight: normal;
}

#right .timeline .edit-journey {
    display: none;
    padding: 16px;
}

#right .timeline .edit-journey textarea {
    background: #ffffff;
    border: 1px solid #929497;
    width: 432px;
    margin: 4px;
}

#right .timeline .comment {
    position: relative;
    background-color: #ffffff;
    clear: both;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #a2a4a6;
    padding: 12px 8px 12px 8px;
    color: #000000;
    font-size: 12px;
    line-height: 16px;
}

#right .timeline .comment:first-child {
    margin-top: 0;
}

#right .timeline .add-comment {
    background: #ffffff;
    padding: 12px 8px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #a2a4a6;

}

#right .timeline .add-comment textarea {
    background: #eaebeb;
    width: 250px;
    height: 36px;
}

#right .timeline .comment .avatar, #right .timeline .add-comment .avatar {
    float: left;
    margin-right: 12px;
}

#right .timeline .add-comment input[type=submit] {
    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    text-transform: uppercase;
    font-weight: bold;
    padding: 4px 8px 4px 8px;
    margin: 0 auto;
    border: none;
    height: 24px;
    display: block;
    background-color: #a2a4a6;
    font-size: 12px;
    line-height: 16px;
    color: #ffffff;
    float: right;
}

#right .timeline .comment .full-name {
    padding: 0;
}

#right .timeline .comment p {
    padding-top: 0px;
    padding-bottom: 4px;
}

#right .timeline .comment .datetime {
    float: right;
}

#right .timeline .comment .datetime {
    color: #6b6d6f;
    font-size: 12px;
    line-height: 16px;
}

#right .timeline .comment p {
    padding-top: 4px;
    clear: none;
}

#right .timeline .entry .edit-journey-bar {
    background: #fffacc;
    clear: both;
    height: 16px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: #6b6d6f;
    font-size: 12px;
    line-height: 16px;
    padding: 7px 0;
}

#right .timeline .share-bar {
    height: 30px;
    background: #eaebeb;
}

#right .timeline .share-bar a, #right .timeline .share-bar img {
    display: block;
}

#right .timeline .share-bar a {
    float: right;
    margin: 8px 8px 8px 0;
}

#right .timeline .extend .edit-journey a {
    float: none;
    display: inline-block;
    background: #000000;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    margin: 4px 0 4px 4px;
    padding: 2px 8px;
}

#right #notification-list h2, #right #request-list h2, #right #user-list h2, #right #popular-list h2, #right #recommended-list h2, #right #similargoal-list h2, #right #reminder-list h2, #right #reminder-goal-list h2 {
    font-size: 16px;
    font-weight: bold;
}

#right .userlist-block {
    margin-top: 48px;
}

#right .userlist-block:first-of-type {
    margin-top: 0;
}

#right #notification-list h2 {
    background-image: url(../images/notification-large.png);
    background-size: 25px 25px;
    line-height: 25px;
    background-position: right center;
    background-repeat: no-repeat;
}

#right #request-list h2 {
    background-image: url(../images/notification-follow.png);
    background-size: 14px 15px;
    line-height: 22px;
    background-position: right center;
    background-repeat: no-repeat;
}

#right #reminder-goal-list {
    margin-top: 32px;
}

#right .notifications li, #right .requests li, #right .userlist li, #right .reminders li, #right .reminder-goals li {
    padding-top: 8px;
    border-top-style: solid;
    border-top-color: #929497;
    border-top-width: 1px;
    padding-bottom: 8px;
    font-size: 12px;
    line-height: 18px;
}

#right #reminder-list {
    background-image: url(../images/beta.png);
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: right top;
}

#right .notifications, #right .requests, #right .userlist, #right .reminders, #right .reminder-goals {
    margin-top: 16px;
    border-bottom-style: solid;
    border-bottom-color: #929497;
    border-bottom-width: 1px;
}

#right .requests .request img, #right .requests .request a, #right .requests .request form, #right .userlist .user form {
    display: inline-block;
}

#right .requests .request form, #right .userlist .user form {
    float: right;
    margin: 10px 0 0 16px;
}

#right .requests .full-name, #right .userlist .full-name {
    margin-left: 12px;
}

#right .notifications .notification {
    padding-left: 24px;
    background-repeat: no-repeat;
}

#right .notifications .notification.type-comment, #right .notifications .notification.type-comment-reply {
    background-image: url(../images/notification-comment.png);
    background-size: 17px 15px;
    background-position: 1px center;
}

#right .notifications .notification.type-streak {
    background-image: url(../images/notification-streak.png);
    background-size: 18px 15px;
    background-position: 0px center;
}

#right .notifications .notification.type-follow, #right .notifications .notification.type-followrequest {
    background-image: url(../images/notification-follow.png);
    background-size: 14px 15px;
    background-position: 2px center;
}

#right .notifications .datetime {
    color: #6b6d6f;
    font-size: 12px;
    line-height: 16px;
    font-style: italic;
}

#right #user-search {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
    margin-bottom: 32px;
}

#right #user-search label {
    display: none;
}

#right #user-search input[type=submit] {
    float: right;
    font-size: 14px;
    line-height: 18px;
    display: block;
}

#right #user-search input[type=text] {
    width: 75%;
    border-style: none;
    padding: 4px;
    font-size: 14px;
}

#right #private-or-hidden {
    background-color: #f1f1f2;
    text-align: center;
    padding: 16px;
}

#right #private-or-hidden p {
    margin-top: 16px;
}

/* front */

.front h1, .front h2, .front h3 {
    text-align: center;
}

.front h1 {
    margin-top: 12px;
}

.front h3 {
    padding-top: 25px;
}

.front h2 {
    font-size: 16px;
    line-height: 22px;
}

#front-start h1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
}

#strip #quote {
    font-size: 18px;
    line-height: 24px;
    font-weight: normal;
    margin: 12px auto 0 auto;
    width: 600px;
    text-align: center;
}

#strip #quote q:before {
    padding-right: 2px;
    content: "\201C";
}

#strip #quote q:after {
    padding-left: 2px;
    content: "\201D";
}

#strip #quote cite {
    display: inline-block;
    font-weight: normal;
    font-style: normal;
    color: #929497;
}
#strip #quote cite:before {
    content: "\A0\2014\A0";
}

#front-logo {
    padding: 10px 0;
}

#front-logo img {
    display: block;
    margin: 0 auto;
}

#front-community #user-community {
    margin: 30px 0 10px 0;
    height: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#front-community #user-community h4 {
    margin: 5px 0 15px 0;
}

#front-goals #featured-goals {
    margin: 50px 0;
    padding-bottom: 64px;
}

#front-community #user-community, #front #user-community li, #front-goals #featured-goals, #front-goals #featured-goals li {
    list-style-type: none;
}

#front-community #user-community li, #front-goals #featured-goals li {
    float: left;
    width: 200px;
    margin-right: 100px;
}

#front-goals #featured-goals li {
    background: #f3f3f4;
    height: 84px;
    width: 184px;
    padding: 8px;
    position: relative;
}

#front-goals #featured-goals li a.join {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: #000000;
    color: #ffffff;
    text-transform: uppercase;
    padding: 2px 8px;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
}

#front-community #user-community #third-user, #front-goals #featured-goals #third-goal {
    margin-right: 0;
}

#front-community #user-community li .avatar, #front-community #user-community li h4 {
    text-align: center;
}

#front-community h5 {
    color: #929497;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
}

#front-community #user-community li h4 {
    margin-top: 8px;
    margin-bottom: 24px;
    line-height: 20px;
}

#front-goals #featured-goals li h4 a {
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
}

#front-goals #featured-goals li .count {
    font-size: 12px;
    line-height: 18px;
    font-weight: normal;
    color: #6b6d6f;
}

#front-community #user-community li .biography {
    color: #a2a4a6;
    font-size: 14px;
    line-height: 20px;
    margin: 5px 0 15px 0;
}

#front-community #user-community li .timeline {
    font-size: 14px;
    line-height: 20px;
}

#front-community #user-community li {
    height: 326px;
    overflow: hidden;
}

/* black */

#black {
    background: #000000;
    color: #ffffff;
    min-height: 100%;
    text-align: center;
    margin-top: 48px;
    line-height: 18px;
}

#black ul.bullet, #black ul.bullet li {
list-style-type: disc;
  text-align: left;
  margin-bottom: 5px;
}
#black ul.bullet {
margin-top: 20px;
margin-bottom: 20px;
}

#mc_embed_signup {
margin-top: 40px;
margin-bottom: 20px;
}

#black h1 {
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
}

#black label {
    float: none;
    display: inline-block;
    width: 100px;
    text-align: right;
    font-size: 12px;
    line-height: 18px;
}
#black p input[type=input], #black p input[type=email], #black p select, #black p textarea {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none;
}
#black .button {
    display: block;
}

#black table {
    vertical-align: baseline;
    width: 400px;
    margin: 12px auto 24px auto;
}
#black table th {
    text-align: right;
    padding: 8px 4px 8px 4px;
    vertical-align: baseline;
}
#black table thead th {
    text-align: left;
}
#black table td {
    text-align: left;
    padding: 4px 0 4px 4px;
    vertical-align: baseline;
}

#black table tfoot td {
    text-align: center;
}

#black .socialaccount_providers li, #black p, #black h1, #black .button, #black input[type=submit], #black button, #black .mc-field-group {
    margin-bottom: 8px;
}

#black #login-logo {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

#black .socialaccount_providers {
    margin-bottom: 25px;
}

#black .socialaccount_providers li a {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    padding: 4px;
    background: #ff0000;
    display: block;
    font-size: 16px;
    line-height: 20px;
}

#black .socialaccount_providers li a.twitter {
    background: #55acee;
}

#black .socialaccount_providers li a.facebook {
    background: #3B5998;
}

#black .helptext {
    display: none;
}

#black form.login label, #black form.signup label, #black.fullscreen form label {
    display: none;
}

#black form.login label[for=id_remember], #black.fullscreen form label[for=id_remember] {
    float: none;
    display: inline-block;
    width: 100px;
    text-align: right;
    font-size: 12px;
    line-height: 18px;
    margin-right: 8px;
}

#black form.login input[type=text], #black form.login input[type=password], #black form.signup input[type=text], #black form.signup input[type=email], #black form.signup input[type=password], #black.fullscreen form input[type=text], #black.fullscreen form input[type=password], #black.fullscreen form textarea {
    width: 98%;
    font-size: 16px;
    line-height: 22px;
    padding: 4px 1%;
    margin: 0;
}

#black.fullscreen form input[type=file] {
    width: auto;
    margin: 0 auto;
    padding: 4px 0;
}

/*
#black form.signup select {
    padding: 0;
    margin: 0;
    border-style: none;
    border-width: 0;
    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    border-radius: 0;
}
*/

#black form.login input[type=checkbox], #black.fullscreen form input[type=checkbox] {
    margin-right: 24px;
}

#black form.login button, #black form.signup button, #black.fullscreen form button, #black.fullscreen form input[type=submit] {
    font-size: 16px;
    line-height: 20px;
}

/* goal form */

.goalform {
    margin-bottom: 12px;
}

.goalform .goal-box h3 {
    background: #f3f3f4;
    color: #000000;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    padding: 8px 16px;
    text-transform: uppercase;
    text-align: center;
    position: relative;
}
.goalform .goal-box h3 input {
    position: absolute;
    right: 16px;
    top: 8px;
    display: block;
}

.goalform .goal-box {
    background: #ffffff;
    margin: 12px 0 0 0;
    padding: 0;
}

.goalform .goal-box.goal-expander p:last-child {
    border-bottom-style: solid;
    border-bottom-color: #a2a4a7;
    border-bottom-width: 1px;
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.goalform .goal-box p {
    margin-top: 12px;
    text-align: center;
}

.goalform .goal-name.goal-box p:first-child {
    margin-top: 0;
}

.goalform .goal-box.goal-privacy p {
    padding: 12px 12px 0 12px;
}

.goalform .goal-box.goal-dream {
    background: none;
    background-image: url(../images/dream-separator.png);
    background-size: 477px 20px;
    background-repeat: no-repeat;
    background-position: center top;
}

.goalform .goal-box.goal-dream p {
    padding: 24px 12px 0 12px;
    font-size: 16px;
    line-height: 32px;
}
.goalform .goal-box.goal-dream p input[type=checkbox] {
    margin-right: 10px;
}

.goalform .goal-box.goal-privacy p {
    text-align: left;
}

.goalform .goal-box.goal-privacy select {
    float: right;
    margin: 0;
    padding: 0;
}

.goalform .goal-box.goal-privacy label {
    display: inline;
    text-transform: uppercase;
}

.goalform .goal-bar {
    text-align: right;
    background: #f3f3f4;
    margin-top: 12px;
    padding: 8px 16px;
}

.goalform .goal-bar.goal-archived {
    background-color: #323274;
    color: #ffffff;
}

.goalform .goal-bar.goal-achieved {
    background-color: #ffe600;
    color: #000000;
}

.goalform .goal-box.goal-reminder h3 {
    background-color: #000000;
    color: #ffffff;
}

.goalform .goal-box.goal-reminder .slider {
    background-image: url(../images/beta.png);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: right 8px;
}

.goalform .goal-bar label {
    float: left;
    text-align: left;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 20px;
}

.goalform .goal-box.goal-reminder p, .goalform .goal-box.goal-reminder li {
    font-size: 14px;
    text-align: left;
    line-height: 24px;
}

.goalform .goal-box.goal-reminder li {
    padding: 6px 12px;
}

.goalform .goal-box.goal-reminder p {
    padding: 6px 128px;
    margin-top: 0;
    margin-bottom: 16px;
}

.goalform .goal-box.goal-reminder p span, .goalform .goal-box.goal-reminder li span {
    display: inline-block;
    float: right;
}

.goalform .goal-box.goal-reminder li {
    background-repeat: no-repeat;
    background-position: 12px center;
    padding-left: 40px;
}

.goalform .goal-box.goal-reminder li.reminder-time {
    background-image: url(../images/time.png);
    background-size: 21px 21px;
}

.goalform .goal-box.goal-reminder li.reminder-date {
    background-image: url(../images/calendar.png);
    background-size: 21px 21px;
}

.goalform .goal-box.goal-reminder li.reminder-finish {
    background-image: url(../images/noentry.png);
    background-size: 21px 21px;
}

.goalform .goal-box.goal-reminder li.reminder-prompt {
    background-image: url(../images/bell.png);
    background-size: 18px 20px;
}

.goalform .goal-box.goal-reminder li.reminder-frequency {
    background-image: url(../images/recycle.png);
    background-size: 21px 21px;
}

.goalform .goal-box.goal-reminder li, .goalform .goal-box.goal-reminder h4 {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #929497;
    line-height: 24px;
}

.goalform .goal-box.goal-reminder h4 {
    background-color: #f1f1f2;
    font-size: 14px;
    padding: 6px 12px;
    text-transform: uppercase;
    text-align: center;
}

.goalform .goal-box.goal-reminder h5 {
    text-align: center;
    font-size: 14px;
    padding: 24px 8px 16px 8px;
}


.goalform .goal-bar input, .goalform .goal-bar input:checked {
    display: inline-block;
    margin-left: 8px;
}

.goalform .submit {
    margin-top: 12px;
    text-align: right;
}

#popular-goals li {
    height: 38px;
    padding: 6px 12px;
}
#popular-goals li div {
    float: right;
    padding: 10px 0;
}
#popular-goals li div img {
    display: block;
}

#popular-goals li a {
    font-weight: normal;
}
#popular-goals li h4 {
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    font-weight: normal;
}
#popular-goals li p {
    font-size: 12px;
    line-height: 18px;
}

#popular-goals li:nth-child(odd) {
    background: #f3f3f4;
}

/* iconography */

.throbber-black, .throbber-white {
    margin-top: 36px;
    text-align: center;
}

form.delete-goal input[type=submit], form.delete-comment input[type=submit], form.delete-timeline input[type=submit] {
    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    width: 20px;
    height: 20px;
    background: none;
    background-image: url(../images/delete.png);
    background-size: 20px 20px;
    padding: 0;
    border-style: none;
}

.edit {
    display: block;
    width: 38px;
    height: 15px;
    background-image: url(../images/pencil.png);
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: top left;
    font-size: 12px;
    line-height: 13px;
    text-align: right;
    color: #929497;
    font-weight: normal;
    border-bottom-style: solid;
    border-bottom-color: #929497;
    border-bottom-width: 1px;
    padding-top: 2px;
}

.comment-count {
    display: inline-block;
    height: 12px;
    background-image: url(../images/comment.png);
    background-size: 14px 12px;
    background-repeat: no-repeat;
    background-position: top left;
    font-size: 12px;
    line-height: 12px;
    text-align: right;
    color: #929497;
    font-weight: normal;
    padding-left: 20px;
}

.edit:after {
    content: "Edit";
}

.join-goal {
    float: right;
    margin: 0;
    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    border: none;
    display: inline-block;
    padding: 4px 24px;
    background-color: #fee600;
    color: #000000;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
}

.entry .edit, .add .edit, .user .edit, #my-goals .edit, .reminder .edit, .reminder-goal .edit {
    float: right;
}

.timeline .edit {
    margin-top: 12px;
    margin-right: 8px;
}

.add .edit {
    margin-top: 0;
}

#strip form.follow-user, #strip form.unfollow-user, #strip .this-is-you, #strip .no-follow-box {
    clear: right;
    float: right;
    margin: 16px 0 0 156px;
}

#strip .this-is-you, #strip .no-follow-box {
    height: 32px;
    display: block;
    margin: 0 auto;
    padding: 4px 8px;
}

form.follow-user input[type=submit], form.unfollow-user input[type=submit], form.approve-user input[type=submit], form.reject-user input[type=submit], form.block-user input[type=submit], form.unblock-user input[type=submit] {
    font-size: 12px;
    line-height: 18px;
    padding: 4px 8px 4px 8px;
    margin: 0 auto;
    border: none;
    height: 24px;
    display: block;
}

form.follow-user input[type=submit], form.reject-user input[type=submit], form.approve-user input[type=submit], form.block-user input[type=submit], form.unblock-user input[type=submit] {
    background-color: #a2a4a6;
}
form.unfollow-user input[type=submit] {
    background-color: #fee600;
}

/* page */

.page p, .page li {
    font-size: 16px;
    line-height: 20px;
    margin-top: 10px;
}

.page ul, .page li {
    list-style-type: disc;
}

.page li {
    margin-left: 25px;
}

/* calendar */

table.calendar {
    margin: 0 auto 32px auto;
}

table.calendar-key {
    width: 100%;
    margin: 0 0 32px 0;
}

table.calendar:last-child {
    margin: 0 auto 0 auto;
}

table.calendar, table.calendar th, table.calendar td, table.calendar-key, table.calendar-key th, table.calendar-key td {
    border-style: solid;
    border-width: 1px;
    border-color: #929497;
    border-collapse: collapse;
}

table.calendar-key th, table.calendar-key td {
    font-size: 12px;
    line-height: 20px;
    padding: 4px;
}
table.calendar-key td {
    width: 17%;
    text-align: center;
}
table.calendar-key td img, table.calendar-key td span {
    display: inline-block;
    vertical-align: middle;
}

table.calendar td h4, table.calendar-key th h4 {
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 4px;
}

table.calendar thead th {
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
}

table.calendar tbody tr {
    height: 67px;
}

table.calendar td {
    width: 67px;
    height: 67px;
    padding: 4px 0;
    margin: 0;
    text-align: center;
}

table.calendar td img {
    display: inline-block;
}

/* overrides */

.deleteme {
    background: #ff0000;
    color: #ffffff;
}