/*
################################################################################################
STRUCTURAL
################################################################################################
*/

body {
    text-align: center;
    color: #FFF;
    font-family: Regular, Helvetica, sans-serif;
    background: #F7F7F7;
}


.wrp {
    /*background: url(../bookmarklet/images/sprite.png) 0 -320px repeat-x;*/
    min-height: 400px;
}

.ctr {
    text-align: left;
    width: 952px;
    margin: auto;
}

#more .top-image {
    background: url(../media/uploads/home_madeforyou_1500x976_1.jpg) 0 0 no-repeat;
    background-size: cover;
    margin: 0 0 24px 0;
}

#more .top-image-wrp {
    background: #000;
    height: 400px;
}

.col3.col-1 {
    float: left;
    width: 140px;
    margin: 0 20px 0 0;
}

.col3.col-2 {
    float: left;
    width: 522px;
    border-right: 1px solid #CCC;
    margin: 0 20px 0 0;
    padding: 0 20px 0 0;
}

.col3.col-3 {
    float: left;
    width: 229px;
}


#account {
    color: #262626;
}

#account h2 {
    font-size: 24px;
    margin-bottom: 12px;
}

#account .section {
    margin: 46px 0 0 0;
}

#account .section.first { margin-top: 0; }

#account label,
#account input[type="text"],
#account textarea {
    display: block;
    width: 504px;
}

#account .col3.col-3 label {
    width: 100%;
}

#account select {
    width: 100%;
}

#account input[type="text"],
#account textarea, #account select {
    margin-bottom: 20px;
}

#account select {

}

#account label {
    color: #666;
    margin: 0 0 10px 0;
}

#account label span {
    color: #999;
    padding: 0 0 0 10px;
}

#account button {
    margin: 0 10px 0 0;
}

#account table.settings {
    width: 100%;
    margin: 0 0 20px 0;
}

#account table.settings th {
    color: #999;
    border-bottom: 1px solid #CCC;
}

#account table.settings th,
#account table.settings td  {
    padding: 8px 0;
    text-align: center;
}

#account table.settings .type {
    text-align: left;
}

#account table.settings input { float: rigth; }

#account .profilepic {
    position: relative;
    width: 140px;
    height: 140px;
    background-image: url(../bookmarklet/images/avatar_default.png);
    background-color: #999;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#account .profilepic .shadow {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../bookmarklet/images/shadow_bottom.png) center bottom no-repeat;
    background-size: 100% 100%;
}

#account .profilepic #upload {
    cursor: pointer;
    color: #FFF;
    font-size: 14px;
    position: absolute;
    height: 26px;
    padding: 14px 0 0 38px;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../bookmarklet/images/camera.png) 8px center no-repeat;
    text-shadow: 0 1px 0 rgba(0,0,0,0.6);
    margin-bottom: 0;
}

#account #filename {
    font-size: 14px;
    width: 122px;
    display: none;
}

#account #change-email .success,
#account #change-password .success {
  display: none
}

#account #change-email .details p {
    height: 152px;
}

#account #change-password .details p {
    height: 228px;
}
/*
################################################################################################
SIGN IN
################################################################################################
*/

#signin .pattern {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../dev_O/random/turtle/pattern.png);
    z-index: 0;
}

#signin .signin {
    display: none;
    position: absolute;
    width: 416px;
    text-align: left;
    z-index: 2;
}

/*
################################################################################################
PROFILE
################################################################################################
*/

.profile {
    padding: 0;
    margin: 0 0 20px 0;
    background: #262626; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    min-height: 130px;
}

.profile .avatar {
    float: left;
    width: 80px;
    height: 80px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #666;
    margin: 25px 20px 0 10px;
    border-radius: 100%;
}

.profile.magheader .avatar {
    width: 100px;
    height: 110px;
    margin: 10px 20px 10px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    border-radius: 0;
}

.profile .data { float: left; width: 792px; height: 110px; margin-top: 10px; }


.profile .data td.info { width: 500px; vertical-align: middle; }
.profile .data td.info .group { position: relative; }

.profile .data td.info h3 { font-size: 28px;  }
.profile .data td.info p { color: #666; margin: 6px 0 10px 0; width: 80%; }

.profile .data td.stats {
    font-family: Thin;
    font-size: 28px;
    padding: 12px;
    color: #CCC;
    border-left: 1px solid #444;
}

.profile .data td.stats span {
    text-transform: capitalize;
    font-family: Regular;
    display: block;
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #666;
}

.contributors {
    margin: 0 10px 0 10px;
    border-top: 1px solid #444;
    padding: 14px 0 20px 0;
}

.contributors h3 {
    color: #999;
    font-size: 13px;
    text-transform: uppercase;
}

.contributors h3 .fl_b_button { float: right; text-transform: none; margin: 0 0 0 10px; }

.contributors.none h3 .fl_b_button { float: left; text-transform: none; margin: 0; }

.contributors h3 .total {
    color: #666;
}

.contributors .owner { padding-right: 20px; }

.contributors .owner span.own-avatar {
  display: block;
}

.contributors table td.owner > div,
.contributors .co-avatars {
    margin: 10px 0 0 0;
}

.contributors .owner span.own-avatar,
.contributors .co-avatar {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background-color: #444;
    background-size: cover;
    backgound-repeat: no-repeat;
    border-radius: 100%;
}

.contributors .owner span.own-name,
.contributors .co-names {
    display: block;
    font-size: 13px;
    margin: 10px 0 0 0;
    color: #999;
}

/*
################################################################################################
MAGAZINES
################################################################################################
*/

body#magazines {
    background: #F7F7F7;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.content h1 a:hover { border-bottom: 2px solid rgba(0,0,0,0.2); }

.magazines {
    margin: 32px 0;
    width: 980px;
}

.magazines .cover-ctr, .stories .cover-ctr {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background-position: center center fixed no-repeat;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

.magazines .magazine,
#magazines .create {
    cursor: pointer;
    display: block;
    float: left;
    position: relative;
    width: 168px;
    height: 200px;
    background: #666;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    margin: 0 28px 70px 0;
    border: 0;
}


#magazines .create {
    margin-top: 32px;
    cursor: pointer;
    background: #F7F7F7 url(../bookmarklet/images/create_new_web.png) center center no-repeat;
    box-shadow: none;
    text-align: center;
    height: 110px;
    padding-top: 90px;
    color: #999;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    -webkit-transition: background-color 0.25s ease-out,color 0.25s ease-out;
       -moz-transition: background-color 0.25s ease-out,color 0.25s ease-out;
        -ms-transition: background-color 0.25s ease-out,color 0.25s ease-out;
         -o-transition: background-color 0.25s ease-out,color 0.25s ease-out;
            transition: background-color 0.25s ease-out,color 0.25s ease-out;
}

#magazines .create:hover {
    color: #666;
    background-color: rgba(0,0,0,0.1);
}

.magazines .magazine .shadow,
.item .mags .mag .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../bookmarklet/images/shadow_top.png) center top no-repeat;
    background-size: 100%;
    overflow: hidden;
}

.magazines .magazine .type {
    position: absolute;
    height: 26px;
    padding: 10px;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../bookmarklet/images/shadow_bottom.png) center bottom no-repeat;
    background-size: 100% 100%;
    opacity: 1;
    -webkit-transition: opacity 0.25s ease-out;
       -moz-transition: opacity 0.25s ease-out;
        -ms-transition: opacity 0.25s ease-out;
         -o-transition: opacity 0.25s ease-out;
            transition: opacity 0.25s ease-out;
}

.magazines .magazine .type .lock {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 16px;
    height: 22px;
    background: url(../bookmarklet/images/lock_white.png);
}

.magazines .magazine .type .multi {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 22px;
    background: url(../img/multi_white.png);
}

.stories .options #delete {
    cursor: pointer;
    float: right;
    width: 18px;
    height: 23px;
    margin: 2px 0 0 0;
    background: url(../bookmarklet/images/trash.png);
}

.magazines .magazine h1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #FFF;
    font-size: 20px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    font-family: Regular, Helvetica, sans-serif;
    margin: 8px 10px;
    word-wrap: break-word;
}

.magazines .magazine .cover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}


.manage {
    font-family: Medium;
    font-size: 13px;
    color: #999;
    position: absolute;
    height: 26px;
    -webkit-transition: all 0.25s ease-out;
       -moz-transition: all 0.25s ease-out;
        -ms-transition: all 0.25s ease-out;
         -o-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
}

.magazines .manage {
    bottom: -30px;
    left: 0;
    right: 0;
}

.group .manage {
    width: 400px;
    top: 4px;
    right: 10px;
}

.magazines .magazine.ui-sortable-helper .manage {
    opacity: 0;
}

.magazines .magazine .manage span,
.group .manage span {
   float: left;
   display: block;
   margin: 0 0 0 0;
   height: 28px;
   width: 28px;
   background: url(../img/manage.png) 0 0 no-repeat;
}

.group .manage span {
    float: right;
    margin: 0 0 0 10px;
    cursor: pointer;
}

.magazines .magazine .manage .share     { background-position: 0 0; }
.magazines .magazine .manage .edit      { background-position: 0 -28px; }
.magazines .magazine .manage .delete    { background-position: 0 -56px;
    padding: 0;
    float: right;
    margin: 0;
}

.magazines .magazine .manage .share:hover,
.magazines .magazine .manage .share.active  { background-position: -28px 0; }
.magazines .magazine .manage .edit:hover    { background-position: -28px -28px; }
.magazines .magazine .manage .delete:hover  { background-position: -28px -56px; }

.group .name { max-width: 334px; }

.group .manage.dark .share     { background-position: -56px 0; }
.group .manage.dark .edit      { background-position: -56px -28px; }
.group .manage.dark .delete    { background-position: -56px -56px; }
.group .manage.dark .reset     { background-position: -56px -84px; }

.group .manage.dark .share:hover,
.group .manage.dark .share.active
{ background-position: -84px 0; }
.group .manage.dark .edit:hover    { background-position: -84px -28px; }
.group .manage.dark .delete:hover  { background-position: -84px -56px; }
.group .manage.dark .reset:hover   { background-position: -84px -84px; }

.magazines .magazine .metadata {
    margin: 4px 0 0 0;
}

.magazines .magazine .metadata li {
    font-size: 12px;
    display: block;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
}

.magazines .magazine .metadata li span {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    margin: 0 4px;
}

#stories {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#stories .metadata {
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -28px;
    -webkit-transition: opacity 0.25s ease-out;
       -moz-transition: opacity 0.25s ease-out;
        -ms-transition: opacity 0.25s ease-out;
         -o-transition: opacity 0.25s ease-out;
            transition: opacity 0.25s ease-out;
}

#stories .metadata li {
    height: 20px;
    float: left;
    color: #999;
    font-family: Medium, Helvetica, sans-serif;
    font-size: 12px;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    line-height: 1.7;
}

#stories .metadata li.likes,
#stories .metadata li.comments,
#stories .metadata li.reflips,
#stories .metadata li.cover,
#stories .metadata li.delete {
    padding-left: 18px;
    margin: 0 8px 0 0;
    background: url(../bookmarklet/images/social.png) 0 0 no-repeat;
}

#stories .metadata li.reflips {
    padding-left: 22px;
}

#stories .metadata li.reflips .reflipcount {
    display: block;
    float: left;
    background: #BBB;
    color: #FFF;
    text-shadow: none;
    border-radius: 2px;
    padding: 2px 6px 2px 6px;
    margin: 2px 0 0 0;
    line-height: 1;
}

#stories .metadata li.reflips .refliparrow {
    display: block;
    float: left;
    background: url(../bookmarklet/images/reflip-arrow.png) 0 center no-repeat;
    width: 3px;
    height: 20px;
    margin: 0;
    padding: 0;
}

#stories .metadata li.likes { background-position: 0 0; }
#stories .metadata li.comments { background-position: 0 -20px; }
#stories .metadata li.reflips { background-position: 0 -40px; }
#stories .metadata li.cover { background-position: 0 -60px; float: right; margin: 0 0 0 8px; padding: 0; width: 15px; }
#stories .metadata li.delete { background-position: 0 -80px; float: right; margin: 0 0 0 8px; padding: 0; width: 15px; }

#stories .metadata li.cover:hover { background-position: 0 -160px; }
#stories .metadata li.delete:hover { background-position: 0 -180px; }

#stories .metadata li span {
    display: inline-block;
    margin: 0 6px;
}

#stories .error {
    margin: 12px;
    color: #262626;
}

.loadmore {
    cursor: pointer;
    text-align: center;
    background: #E5E5E5;
    color: #999;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    padding: 16px 0;
    display: none;
}

.loadmore:hover {
    color: #09C;
}

.story.ui-sortable-helper .metadata { opacity: 0; }

.bottom {
    padding: 40px 0;
}

/* Share options */

.share {
    position: relative;
}

.share .dismiss {
    display: none;
    position: absolute;
    width: 10000px;
    height: 10000px;
    top: -5000px;
    left: -5000px;
    background: transparent;
    z-index: 19999999;
}

.share .share-options {
    display: none;
    font-size: 14px;
    position: absolute;
    top: -52px;
    left: 28px;
    background: #F7F7F7;
    padding: 0 8px;
    min-width: 102px;
    border-radius: 2px;
    z-index: 20000000;
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.group .share .share-options {
    left: 36px;
}

.share .share-options li {
    cursor: pointer;
    color: #666;
    padding: 8px 0 8px 28px;
    border-bottom: 1px solid #CCC;
    background-image: url(../bookmarklet/images/share-options.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    white-space: nowrap;
}

.share .share-options li:hover {
    color: #262626;
}

.share .share-options li.email      { background-position: 0 0; }
.share .share-options li.copylink   { background-position: 0 -33px; }
.share .share-options li.twitter    { background-position: 0 -66px; }
.share .share-options li.facebook   { background-position: 0 -99px; }

.share .share-options li:last-child {
    border: none;
}
/*
################################################################################################
STORIES
################################################################################################
*/


#stories .content .loading {
  width: 30px;
  height: 30px;
  margin: 0 auto;
  margin-top: -40px;
}

.stories {
    margin: 32px 0;
    width: 981px;
}


.stories .cover-ctr {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.stories .story {
    cursor: pointer;
    display: block;
    float: left;
    position: relative;
    width: 216px;
    height: 240px;
    background: #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    margin: 0 29px 50px 0;
    border: 0;
}

.story:nth-child(4n) {
    /*margin-right: 0;*/
    width: 217px;
}

.stories .story .oncover {
    color: #262626;
    position: absolute;
    top: 18px;
    right: -38px;
    background: #FC0;
    width: 140px;
    padding: 6px 0;
    text-align: center;
    font-family: Bold, Helvetica, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    -webkit-transform-origin: center center;
       -moz-transform-origin: center center;
        -ms-transform-origin: center center;
         -o-transform-origin: center center;
            transform-origin: center center;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.stories .story .oncover.pinned {
  background: #289EDE;
}

.stories .story .oncover-ctr {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: none
}

.stories .story .oncover-ctr.show {
    display: block;
}

.stories .story .story-ctr {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 10px 8px 10px;
}

.stories .story p.timeago {
    font-family: Medium;
    margin-top: 6px;
    color: rgba(0,0,0,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stories .story p.sourceURL {
    color: rgba(0,0,0,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Regular;
    padding: 0;
    border: 0;
}

.stories .story h1 {
    font-family: Medium, Helvetica, sans-serif;
    font-size: 16px;
    color: #262626;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    line-height: 20px;
    margin: 0;
}

.stories .story.article h1 {
    padding: 6px 10px;
    max-height: 58px;
    overflow: hidden;
}

.stories .story p {
    border-top: 1px solid #CCC;
    margin: 0;
    padding: 6px 0 0 0;
    font-family: Regular, Helvetica, sans-serif;
    font-size: 13px;
    color: #999;
}

.stories .story.dark h1 {
    color: #FFF;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.stories .story.dark p {
    color: rgba(255,255,255,0.6);
}

.stories .story.dark p.timeago {
    border-top: 1px solid rgba(255,255,255,0.3);
}

/* article */

.stories .story.article p.text {
    font-family: Georgia, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #666;
    border: 0;
    margin: 0;
    padding: 0 12px 12px 12px;
    max-height: 98px;
    word-wrap: break-word;
    overflow: hidden;
}

/* article /w image */
.stories .story .image {
    background-position: center center;
    background-repeat: no-repeat;
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
    overflow: hidden;
    background-color: rgba(0,0,0,0.1);
}

.stories .story.article .image {
    height: 50%;
    overflow: hidden;
}

/* fullbleed */

.stories .story.fullbleed .image {
    height: 100%;
    overflow: hidden;
}

.stories .story.fullbleed .image img {
    height: 100%;
}

.stories .story.fullbleed .shadow, .stories .story.section .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../dev_O/random/turtle/magshadow.png) center bottom no-repeat;
    background-size: 100%;
}

/* section */
.stories .story.section .logo.small {
    top: 10px;
    left: 10px;
}

.stories .story.section h1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    font-size: 20px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    font-family: Regular, Helvetica, sans-serif;
    margin: 12px;
}

/* video */

.stories .story.video { background: #222; }

.stories .story.video .image {
    position: absolute;
    top: 25%;
    height: 50%;
    width: 100%;
    overflow: hidden;
}

.stories .story.video .play {
    position: absolute;
    top: 25%;
    height: 50%;
    width: 100%;
    overflow: hidden;
    background: url(../dev_O/random/turtle/play.png) center center no-repeat;
}

.stories .story.video .image p {
    position: absolute;
    width: 100%;
    bottom: 0;
    border: 0;
    padding: 60px 10px 6px 10px;
    margin: 0;
    color: #FFF;
    font-family: Medium, Helvetica, sans-serif;
    background: url(../dev_O/random/turtle/magshadow.png) center bottom no-repeat;
    background-size: 100% 100%;
}

.stories .story.video .story-ctr p {
    border: 0;
    color: #666;
}

/* audio */

.stories .story.audio { background: #222; }

.stories .story.audio .image {
    position: absolute;
    top: 20px;
    left: 38px;
    height: 140px;
    width: 140px;
    overflow: visible;
    box-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.stories .story.audio .image p {
    position: absolute;
    width: 100%;
    bottom: -24px;
    border: 0;
    padding: 0;
    margin: 0;
    color: #999;
    font-family: Medium, Helvetica, sans-serif;
}

.stories .story.audio .image p .artist {
    display: block;
    float: left;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stories .story.audio .image p .duration {
    display: block;
    float: right;
    color: #FFF;
}

.stories .story.audio .story-ctr p {
    border: 0;
    color: #666;
}

/* photo */

.stories .story.photo .image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 196px;
    overflow: hidden;
}

.stories .story.photo .image p {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0;
    padding: 60px 10px 6px 10px;
    margin: 0;
    color: #FFF;
    font-family: Medium, Helvetica, sans-serif;
    background: url(../dev_O/random/turtle/magshadow.png) center bottom no-repeat;
    background-size: 100% 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stories .story.photo .story-ctr p {
    border: 0;
}

/* status */

.stories .story.status {
    background: #EEE;
}

.stories .story.status p.text {
    font-family: Georgia, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #666;
    border: 0;
    margin: 0;
    padding: 16px;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    word-wrap: break-word;
    overflow: hidden;
    max-height: 157px;
}

/* album */

.stories .story.album .albums {
    margin: 4px;
}

.stories .story.album .image {
    float: left;
    width: 102px;
    height: 94px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.stories .story.album .image:nth-child(1) { margin: 0 4px 4px 0; }
.stories .story.album .image:nth-child(2) { margin: 0 0 4px 0; }
.stories .story.album .image:nth-child(3) { margin: 0 4px 0 0; }
.stories .story.album .image:nth-child(4) { margin: 0 0 0 0; }

.stories .story.album .story-ctr p {
    border: 0;
}

/* Share  button */
#stories #fl_b_share {
    position: absolute;
    top: -6px;
    right: 0;
}


/* Share button */
#stories .content .titlectr {
    position: relative;
}

#stories .content .titlectr .fl_b_button {
    float: right;
    margin-left: 12px;
}

/* Generic buttons */

.fl_b_button {
    display: inline-block;
    border-radius: 2px;
    font-family: Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    background: #FAFAFA;
    border: 1px solid #C8C8C8;
    color: #8B8B8B;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    height: 34px;
    padding: 0 8px;
    margin: 0;
    line-height: 34px;
    box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 1px 0 rgba(255,255,255,1);
    cursor: pointer;
}

input.fl_b_button {
    height: 36px;
}

.fl_b_button.mini {
    font-family: Medium;
    font-size: 14px;
    height: 26px;
    padding: 0 6px;
    line-height: 26px;
    color: #AAA;
    border: 1px solid #D2D2D2;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 1px 0 rgba(255,255,255,1);
}

.fl_b_button.mini.dark {
    background: transparent;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.4);
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.2);
}

.fl_b_button.mini:hover { background: rgba(0,0,0,0.1); }
.fl_b_button.mini.dark:hover { background: rgba(255,255,255,0.2); }

.fl_b_button.done {
    background: rgba(41,146,212,1);
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(66,180,231,1)), color-stop(100%,rgba(41,146,212,1)));
    background: -moz-linear-gradient(top, rgba(66,180,231,1) 0%,rgba(41,146,212,1) 100%);
    background: -o-linear-gradient(top, rgba(66,180,231,1) 0%,rgba(41,146,212,1) 100%);
    background: -ms-linear-gradient(top, rgba(66,180,231,1) 0%,rgba(41,146,212,1) 100%);
    background: linear-gradient(to bottom, rgba(66,180,231,1) 0%,rgba(41,146,212,1) 100%);
    border: 1px solid #235A94;
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 1px 0 rgba(255,255,255,0.2);
}

.fl_b_button.done.dark {
    border: 1px solid rgba(0,0,0,0.6);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(255,255,255,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

.fl_b_button.done:hover {
    background: rgba(66,180,231,1);
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(41,146,212,1)), color-stop(100%,rgba(66,180,231,1)));
    background: -moz-linear-gradient(top, rgba(41,146,212,1) 0%,rgba(66,180,231,1) 100%);
    background: -o-linear-gradient(top, rgba(41,146,212,1) 0%,rgba(66,180,231,1) 100%);
    background: -ms-linear-gradient(top, rgba(41,146,212,1) 0%,rgba(66,180,231,1) 100%);
    background: linear-gradient(to bottom, rgba(41,146,212,1) 0%,rgba(66,180,231,1) 100%);
}

/*
################################################################################################
SINGLE STORY ITEM / DETAIL VIEW
################################################################################################
*/

#detail .header {
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

#detail {
  min-height: 500px;
  overflow-x: hidden;
  position: relative;
  z-index: 2000000001;
  -webkit-transition: top 0.25s ease-out, left 0.25s ease-out;
     -moz-transition: top 0.25s ease-out, left 0.25s ease-out;
      -ms-transition: top 0.25s ease-out, left 0.25s ease-out;
       -o-transition: top 0.25s ease-out, left 0.25s ease-out;
          transition: top 0.25s ease-out, left 0.25s ease-out;
}


#detail .loading{
  position: relative;
  top: 200px;
  left: 235px;
}

.item {
    color: #262626;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* container */
.item .type {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: #262626;
}

/* image placeholder */
.item .image {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* metadata */
.item .data {
    font-size: 14px;
    color: #FFF;
    position: absolute;
    padding: 20px 12px 12px 12px;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../bookmarklet/images/shadow_bottom.png) center bottom no-repeat;
    background-size: 100% 100%;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.item .type a { border: none; }

.item .data .source { font-family: Regular; display: block; color: rgba(255,255,255,0.6); font-size: 12px; }

/* types */

/* photo */
.item .photo .image { background-size: contain; }
.item .photo .data .source { color: rgba(255,255,255,0.6); font-size: 12px; float: right; }

/* article /w image */
.item .article .data { font-family: Medium; font-size: 28px; }

/* article no image */
.item .type.article.noimage { height: auto; }
.item .article.noimage .image { background-image: none !important; background-color: #DDD; text-decoration: none; }
.item .article.noimage .data { position: relative; padding-top: 40px; font-family: Medium; font-size: 28px; color: #262626; background-image: none !important; text-shadow: none; }
.item .article.noimage .data .source { display: block; color: rgba(0,0,0,0.4); font-size: 12px; }

/* audio */
.item .audio {
    padding: 12px 0;
    height: 176px;
}

.item .audio .image {
    margin: 0 auto;
    width: 134px;
    height: 134px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.item .audio .data {
    padding: 0;
    bottom: -40px;
    background-image: none !important;
    line-height: 1.3;
}

.item .audio .data .title {
    display: block;
    width: 134px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* video */
.item .video {
    padding: 12px 0;
    height: 176px;
}

.item .video .image {
    margin: 0 auto;
    width: 260px;
    height: 134px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.item .video .data {
    padding: 0;
    bottom: -40px;
    background-image: none !important;
    line-height: 1.3;
}

/* album */

.item .album {
    text-align: center;
}

.item .album .image {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 42px 0 0 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.item .album .data {
    background-image: none !important;
}

/* --- */

.item h3 {
    font-size: 16px;
    font-family: Medium;
    margin: 0 0 8px 0;
}

.item h3 span {
    color: #999;
    font-family: Regular;
}

.item .overflow {
    max-height: 200px;
    overflow: scroll;
}

.item .doublechin {
    margin: 12px 12px 0 12px;
    color: #999;
    font-size: 13px;
}

.item .attribution {
    margin: 12px 12px 0 12px;
    width: 456px;
    padding: 0 0 10px 0;
    line-height: 1.4;
    border-bottom: 1px solid #CCC;
}

.item .avatar {
    float: left;
    width: 32px;
    height: 32px;
    background-color: #CCC;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 10px 0 0;
    border-radius: 100%;
}

.item .sharedby {
    float: left;
    font-size: 14px;
    width: 414px;
    margin: -2px 0 0 0;
}

.item .comments .sharedby { width: 384px; }

.item .sharedby .author { font-family: Medium; margin: 0 5px 0 0; }
.item .sharedby .timeago { color: #999; margin: 0 5px 0 0; }
.item .sharedby .commentary { color: #666; line-height: 1.4; }

.item .reflips,
.item .likes,
.item .comments {
    margin: 20px 12px;
    width: 456px;
    overflow: hidden;
}

.item .reflips .mag {
    position: relative;
    float: left;
    width: 84px;
    height: 98px;
    margin: 0 9px 4px 0;
    background-color: #CCC;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    color: #FFF;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    font-family: Medium;
}

.item .reflips .mag:nth-child(5n) {
    margin-right: 0;
}

.item .reflips .mag:nth-child(n+6) {
    display: none;
}

.item .reflips .mag .shadow { padding: 0; }

.item .reflips .mag h1 {
    margin: 5px 5px 0 5px;
    font-size: 14px;
}

.item .reflips .mag p {
    margin: 0 5px;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
}

.item .likes .names {
    margin: 6px 0 0 0;
    font-size: 14px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.item .comments .comment {
    position: relative;
    margin: 0 0 20px 0;
    padding: 0 30px 0 0;
}

.item .comments .comment .delete {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #F00;
    background: url(../bookmarklet/images/social.png) 0 0 no-repeat;
    background-position: 0 -80px;
}

.item .comments .comment .delete:hover {
    background-position: 0 -180px;
}

.service {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 5px -1px 0;
}

.service.flipboard { background-image: url(../serviceIcons/v2/social-icon-flipboard-24.png); }
.service.twitter { background-image: url(../serviceIcons/v2/social-icon-twitter-24.png); }
.service.facebook { background-image: url(../serviceIcons/v2/social-icon-facebook-24.png); }
.service.googleplus { background-image: url(../serviceIcons/v2/social-icon-googleplus-24.png); }
.service.instagram { background-image: url(../serviceIcons/v2/social-icon-instagram-24.png); }
.service.flickr { background-image: url(../serviceIcons/v2/social-icon-flickr-24.png); }
.service.tumblr { background-image: url(../serviceIcons/v2/social-icon-tumblr-24.png); }
.service.soundcloud { background-image: url(../serviceIcons/v2/social-icon-soundcloud-24.png); }



/*
################################################################################################
SINGLE STORY PAGE
################################################################################################
*/

#story .col-right .comment {
    padding: 0 0 12px 0;
    margin: 0 0 12px 0;
}

#story .col-right .avatar {
    float: left;
    width: 60px;
    height: 60px;
    margin: 0 20px 0 0;
}

#story .col-right h3 {
    font-size: 20px;
    color: #666;
    margin: 0 0 12px 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

#story .col-right .avatar-likes {
    margin: 0 0 32px 0;
}

#story .col-right .avatar-likes .likes-count {
    float: left;
    font-family: Medium, Helvetica, sans-serif;
    margin: 0 18px 0 0;
    padding: 7px 0 0 28px;
    height: 35px;
    font-size: 22px;
    color: #666;
    background: url(../bookmarklet/images/sprite.png) -314px -239px no-repeat;
}

#story .col-right .avatar-likes img {
    float: left;
    margin: 0 6px 6px 0;
}

#story .col-right .bubble {
    margin: 0 0 0 80px;
}

#story .col-right .bubble h4 {
    font-family: Medium, Helvetica, sans-serif;
    font-size: 16px;
    margin: 0 0 6px 0;
}

#story .col-right .options {
    margin: 6px 0;
}

#story .col-right .options .delete {
    float: right;
    font-size: 14px;
    font-family: Medium, Helvetica, sans-serif;
    color: #999;
    border: 0;
    padding: 4px 0 4px 24px;
    background: url(../bookmarklet/images/sprite.png) -200px -210px no-repeat;
}

/*
################################################################################################
LINKS
################################################################################################
*/

a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

a.forgot {
    font-size: 14px;
}

/*
################################################################################################
ALERT / STATES
################################################################################################
*/

.state {
    height: 28px;
    padding: 4px 0 0 0;
    font-size: 20px;
    margin: 0 0 24px 0;
}

.state.dark {color: #FFF; }
.state.light { color :#262626; }

.state.error {
    padding: 4px 0 0 42px;
    color: #F90;
    background: url(../bookmarklet/images/sprite.png) 0 -100px no-repeat;
}

.state.question {
    padding: 4px 0 0 42px;
    color: #FFF;
    background: url(../bookmarklet/images/sprite.png) 0 0 no-repeat;
}

.state.success {
    padding: 4px 0 0 42px;
    color: #0C0;
    background: url(../bookmarklet/images/sprite.png) 0 0 no-repeat;
}

.notification {
    color: #FFF;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    padding: 20px 12px;
}

.notification.error {
    background: rgba(0,0,0,0.8) url(../bookmarklet/images/error.png) 20px center no-repeat;
}

.notification span { color: #CCC; }

.notification .close {
    position: absolute;
    right: 12px;
    top: 0;
    height: 58px;
    width: 58px;
    background: url(../bookmarklet/images/close.png) 0 0 no-repeat;
    cursor: pointer;
}

.notification .close:hover {
    background: url(../bookmarklet/images/close.png) 0 -58px no-repeat;
}

/*
################################################################################################
HEADER
################################################################################################
*/

.header {
    height: 70px;
    padding: 0;
    background: rgba(247,247,247,1);
    box-shadow: 0 1px 4px rgba(0,0,0,0);
}

.header .ctr {
    border-bottom: 1px solid #DDD;
    padding: 10px 0;
    background: rgba(247,247,247,1);
}

.header.light {
    border-bottom: 1px solid #DDD;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.header ul  { text-shadow: 0 1px 0 rgba(255,255,255,1); }

.header ul li {
    border: 0;
    color: #505050;
    height: 35px;
    padding: 15px 0 0 0;
    float: left;
    margin: 0 20px 0 0;
}

.header ul li.right {
    float: right;
    margin: 0 0 0 20px;
}

.header ul li a { color: #505050 };
.header ul li a:hover { color: #09C; }

.header ul li .avatar {
    margin: -6px 10px 0 0;
    display: block;
    float: left;
    background-color: #444;
    background-size: cover;
    backgound-repeat: no-repeat;
    border-radius: 100%;
}

.header ul li.signout { border-left: 1px solid #DDD; padding-left: 16px; }
.header ul li.signout a { color: #999; }

.header ul li.notifications .notifications-ctr {
    cursor: pointer;
    display: block;
    position: relative;
    margin: -4px 0 0 0;
    width: 32px;
    height: 32px;
    background: url(../img/notifications-icon.png) 0 0 no-repeat;
    z-index: 1000;
    border: 0;
}

.header ul li.notifications .notifications-ctr:hover {
    background-position: 0 -32px;
}

.header ul li.notifications .notifications-ctr .badge {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    position: absolute;
    top: -12px;
    left: 22px;
    padding: 2px 6px 1px 6px;
    border-radius: 10px;
    border: 2px solid #F7F7F7;
    color: #FFF;
    background: #009933;
    text-shadow: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    -webkit-transition: all 250ms ease;
}

.header ul li.notifications .notifications-ctr #notifications-list {
    display: none;
    position: absolute;
    top: 40px;
    right: -144px;
    width: 320px;
    max-height: 600px;
}


.header ul li.notifications .notifications-ctr:hover #notifications-list {
    display: block;
}

/*
################################################################################################
NOTIFICATIONS
################################################################################################
*/

#notifications-list {
    overflow: auto;
    background: #F7F7F7;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    border-radius: 3px;
    padding: 0;
    font-size: 14px;
    color: #666;
}

#notifications-list li {
    background: transparent;
    padding: 0;
    color: #505050;
    height: auto;
    float: none;
    margin: 0;
    line-height: 1.2;
    padding: 10px;
    border-bottom: 1px solid #DDD;
}

#notifications-list li:hover {
    background: #E5E5E5;
}


#notifications-list li .avatar {
    float: left;
    width: 32px;
    height: 32px;
}

#notifications-list li .preview {
    float: right;
    width: 40px;
    height: 40px;
}

#notifications-list li .avatar,
#notifications-list li .preview {
    background-size: cover;
    background-repeat: no-repeat;
}

#notifications-list li .msg {
    font-size: 14px;
    margin:0 50px 0 42px;
    color: #666;
    line-height: 1.2;
}

#notifications-list li .msg em {
    font-family: Medium;
    color: #262626;
}

#notifications-list li .timeago {
    color: #999;
    white-space: nowrap;
}

/*
################################################################################################
CONTENT
################################################################################################
*/

.content {
    padding: 20px 0 0 0;
}

.content.flush { padding: 0; }

.content h1 {
    position: relative;
    display: inline-block;
    font-family: Regular, Helvetica, sans-serif;
    font-size: 24px;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    margin: 0 10px 0 0;
}

.content h1.contentheader {
    display: block;
    font-size: 16px;
    color: #999;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    padding: 0 0 6px 0;
    margin: 0;
    text-transform: uppercase;
    border-bottom: 1px solid #CCC;
}

.content h1.contentheader a {
    text-decoration: none;
    border: none;
    color: #666;
}
.content h1.contentheader a:hover { color: #09C; }

.content h1.contentheader span.crumb {
    display: inline-block;
    margin: 0 6px;
}

span.num {
    font-size: 24px;
    color: #CCC;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
}

#more .content h1 {
    margin: 0 20px 0 0;
}

.top-image .content h1 {
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}

.content h1 a {
    border: 0;
    color: #333;
}

/*
################################################################################################
MISC
################################################################################################
*/

.content h1 a {
    border: 0;
    color: #333;
}

/*
################################################################################################
MISC
################################################################################################
*/

.logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background: url(../bookmarklet/images/sprite.png) 0 0 no-repeat;
    z-index: 1;
    border: 0;
}

.logo.small {
    float: left;
    position: relative;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background: url(../bookmarklet/images/sprite.png) -100px 0 no-repeat;
    margin: 0 20px 0 0;
}

.legal, #more .legal {
    font-family: Medium, Helvetica, sans-serif;
    text-align: center;
    font-size: 12px;
    color: #999;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
}

#signin .legal {
    text-align: right;
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: rgba(255,255,255,0.5);
    z-index: 2;
    text-shadow: 0 1px 0 rgba(255,255,255,0);
}

.row {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8);
    margin: 0 0 24px 0;
}

.row.noborder {
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0);
    margin: 0;
}

#more .row { padding: 0 0 24px 0; }

#more .flipit {
  display: block;
  width: 200px;
  height: 88px;
  box-sizing: border-box;
  background: url(../dev_O/editor/flipit_200px_wide.png) no-repeat 0 0;
  border: none;
  margin: 20px 0 10px 0;
}

#more .video {
    background: rgba(0,0,0,1);
    background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(50,50,50,1)), color-stop(100%,rgba(0,0,0,1)));
    background: -moz-linear-gradient(top, rgba(50,50,50,1) 0%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(50,50,50,1) 0%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(50,50,50,1) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(50,50,50,1) 0%,rgba(0,0,0,1) 100%);
    text-align: center;
}

#more .video iframe {
    margin: 0 auto -3px auto;
}

#more .flipit span {
  display: none;
}

.col-left {
    float: left;
    margin: 32px 0 0 0;
    width: 238px;
}

#story .col-left {
    padding: 0 0 0 28px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}

.col-right {
    float: left;
    width: 654px;
    color: #262626;
    margin: 32px 0 0 32px;
}

.col-right p, #more p, .qa td {
    font-family: Georgia, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #262626;
}

#more .top-image p { color: #FFF; }

#more .qa td { vertical-align: top; padding: 10px 0 0 0; }
#more .qa td:first-child { padding: 0; }

#more p, #more .qa td { font-size: 16px; }

#more .qa td.question, #more .qa td.answer {
    font-family: Medium, Helvetica, sans-serif;
    font-size: 28px;
    padding-right: 20px;
}

#more .qa .qaq td p {
    font-family: Medium, Helvetica, sans-serif;
    font-size: 20px;
}

#more .qa .qaq td { padding: 0; vertical-align: middle;  }

#more .qa tr.qaq td, #more .qa tr.qaq td p { color:#262626; }
#more .qa tr.qaa td, #more .qa tr.qaa td p { color:#666; padding-bottom: 12px; }

#more .screens td { padding: 0; }

#more .screens td .imgwrap { width: 448px; height: 264px; position: relative; }
#more .screens td img       { width: 448px; height: 264px; background: #CCC; position: absolute; left: 0; bottom: 0; z-index: 1;  }
#more .screens td .outline  { width: 100%; height: 100%; box-shadow: inset 0 1px 6px rgba(0,0,0,0.4); position: absolute; left: 0; top: 0; z-index: 2; }

#more .screens td .imgwrap.single   { width: 916px; height: 264px; }
#more .screens td .single img       { width: 916px; height: 264px; }

#more .screens tr td                { padding-left: 10px; }
#more .screens tr td:first-child    { padding-right: 10px; }

/*
################################################################################################
POP
################################################################################################
*/

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1009;
    display: none;
}

.pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 480px;
    z-index: 1010;
    text-align: left;
    display: none;
    background: #F7F7F7;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    border-radius: 3px;
}

.pop .header {
    position: relative;
    height: 60px;
    background: transparent;
}

.pop .header .cancel {
    position: absolute;
    top: 12px;
    left: 12px;
}

.pop .header .done {
    position: absolute;
    top: 12px;
    right: 12px;
}

.pop .header h1 {
    text-align: center;
    font-family: Medium;
    font-size: 16px;
    color: #262626;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    padding: 22px 0 0 0;
    margin: 0 94px 0 94px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pop .details {
    margin: 0 12px;
    padding: 12px 0;
    border-top: 1px solid #CCC;
}

.pop .private {
    margin: 12px 0 0 0;
    padding: 12px 0;
    border-top: 1px dotted #CCC;
}

.pop .private input[type=checkbox] {
    float: left;
    margin: 5px 8px 0 0;
}

.pop .private .lock {
    display: block;
    float: left;
    margin: 0 8px 0 0;
    width: 16px;
    height: 22px;
    background: url(../bookmarklet/images/lock_gray.png);
}

.pop .private .label {
    float: left;
    margin: 2px 0 0 0;
    color: #999;
}

.pop input[type=text],
.pop input[type=email],
.pop input[type=password],
.pop textarea {
    width: 436px;
}

.pop select {
    width: 454px;
}


#signin .signin h1 {
    font-family: Light, Helvetica, sans-serif;
    font-size: 52px;
    text-shadow: 0 -2px 0 rgba(0,0,0,0.4);
    margin: 0 0 24px 0;
}

#signin .signin form {
    margin: 0 0 32px 0;
}

/*
################################################################################################
LISTVIEW
################################################################################################
*/

.list-content {
    border-top: 1px solid #DDD;
    margin: 0 10px 10px 10px;
    color: #262626;
}

.list-view li {
    font-family: Medium;
    padding: 12px 0;
    border-bottom: 1px solid #DDD;
}

.list-view li:last-child {
    border: none;
}

.list-view li .avatar {
    float: left;
    width: 32px;
    height: 32px;
    margin: 0 10px 0 0;
    background-color: #CCC;
    background-repeat: no-repeat;
    background-size: cover;
}

.list-view li .name {
    float: left;
    margin: 6px 0 0 0;
}

.list-view li .posts {
    float: right;
    margin: 9px 0 0 0;
    font-size: 14px;
    color: #999;
}

.list-view li .remove {
    float: right;
    margin: 3px 0 0 16px;
}

/*
################################################################################################
INPUTS, LABELS & FORMS
################################################################################################
*/

/* only used for login... everything else handled by flfield.css */
.text-field {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.6);
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
    margin: 0 0 12px 0;
    padding: 10px 8px;
    width: 438px;
    font-family: Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
}

textarea {
  height: 90px;
  resize:none;
  overflow: auto; /*Fix for IE not to show scrollbar*/
}

#signin .signin input {
    font-size: 32px;
    padding: 10px;
    color: #262626;
    background: rgba(255,255,255,0.6);
    text-shadow: 0 2px 0 rgba(255,255,255,0.3);
    box-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

::-webkit-input-placeholder  { color: #999 }
input:-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }


/* growl */

.growlc {
    position: fixed;
    top: 90px;
    width: 100%;
    text-align: center;
    color: white;
}

.growl{
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    background: black;
    width: 922px;
    opacity: 0.8;
    color: white;
    padding: 16px;
    font-size: 15px;
    word-wrap: break-word;
    margin: auto;
}

/*
################################################################################################
GET BOOKMARKLET
################################################################################################
*/
#getbookmarklet hr {
    border: 1px solid #ddd;
    margin: 1.7em 0;
}
#getbookmarklet .fl {
    float:left;
}
#getbookmarklet .clear {
    clear:both;
}
#getbookmarklet .mt {
    margin-top: 1em;
}
#getbookmarklet .mb {
    margin-bottom: 1em;
}
#getbookmarklet .col-1 {
    width:250px;
}
#getbookmarklet .col-2 {
    width:620px;
}

#getbookmarklet .widgetsample {
    width: 155px;
    height: 200px;
    border:1px solid #aaa;
    background-color:transparent;
    border-radius: 3px;
    margin-right:40px;
    cursor: pointer;
}

#getbookmarklet .widgetsample, 
#getbookmarklet .widgetsample h4 {
    border-color:#ddd;
    border-bottom:1px solid #ddd;
}

#getbookmarklet .widgetsample h4 {
    text-align: center;
    padding:1em;
    color:#666;
}

#getbookmarklet .widgetsample .sampleimg {
    background-position:center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 150px;
}

#getbookmarklet .widgetsample.flipit .sampleimg {
    background-image: url('../img/share_flip.png');
}

#getbookmarklet .widgetsample.pro .sampleimg {
    background-image: url('../img/share_badge.png');
}

#getbookmarklet .widgetsample.mag .sampleimg {
    background-image: url('../img/share_magazine.jpg');
}


#getbookmarklet .widgetsample.active,
#getbookmarklet .widgetsample.active h4 {
    border-color:#aaa;
    background-color:#f0f0f0;
}

#getbookmarklet .r-border {
    padding-right:40px;
}

#getbookmarklet .l-border {
    border-left:1px solid #ddd;
    padding-left:40px;
}

#getbookmarklet .content, #more .content {
     color: #262626;
}

#getbookmarklet section, #more section {
    margin-bottom: 40px;
}

#getbookmarklet section.last {
    margin-bottom: 0;
}

#getbookmarklet p a, #more p a {
    color: #09C;
}

#getbookmarklet .screenshot1 {
    background-image:url(../img/share_bookmarklet.jpg);
}

#getbookmarklet p span.chromestore {
    float:right;
    position: relative;
    padding-right:40px;
}

#getbookmarklet .chromeicon {
    position: absolute;
    right:0;
    top:-5px;
    display: block;
    height:30px;
    width:30px;
    padding-right:35px;
    background:url(../img/chrome.png) right center no-repeat;
}

#getbookmarklet .chrome_extension a.chrome_extension_screenshot {
    background-image:url(../img/chrome-extension.jpg);
    height: 235px;
    display: block;
    text-indent: -5000px;
    margin:20px 0;
}

#getbookmarklet .graye0 {
    background-color:#e0e0e0;
}
#getbookmarklet .flipbutton {
    padding: 52px;
    width:40%;
    margin: 20px 0;
    text-align: center;
}

#getbookmarklet h2, #more h2 {
    font-size: 32px;
    margin: 32px 0 20px 0;
    font-family: Medium;
}

#getbookmarklet h2.first {
    margin-top: 12px;
}

#getbookmarklet .content p, #more .content p {
    font-family: Georgia, sans-serif;
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

#getbookmarklet .flipitbutton {
    text-decoration: none;
    display: inline-block;
    border: none;
    width: 260px;
    height: 88px;
    background: url(../img/flipbutton.png) 0 0 no-repeat;
    background-size: 100% 100%;
    text-indent: -10000px;
}

#getbookmarklet .flipitbutton.oldflipit {
    text-indent: 0px;
    opacity: 0.5;
}

#getbookmarklet .flipitbutton.oldflipit span {
    color: #666;
}

#getbookmarklet .dragthis {
    font-family: Medium;
    font-size: 20px;
    margin-top: 20px;
    color: #666;
}

#getbookmarklet .gotoeditor {
    display: block;
    text-decoration: none;
    border: 0;
    margin-top: 20px;
}

#getbookmarklet .line, #more .line {
    height: 1px;
    background: #DDD;
}

#getbookmarklet .buildform {
    margin-top: 30px;
}
#getbookmarklet .fieldwrap {
    /* for label on top of input appearance */
    float:left;
    margin-right: 20px;
    padding-right: 5px;
}

#getbookmarklet .fieldwrap label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

#getbookmarklet .fieldwrap input {
    display: block;
    width:100%;
}

#getbookmarklet .fieldwrap.userurl {
    width:310px;
}
#getbookmarklet p.userurl {
    width:410px;
}

#getbookmarklet .fieldwrap.fullname {
    width:120px;
}

#getbookmarklet .fieldwrap.magazineurl {
    width:420px;
}

#getbookmarklet .buildform p {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 9pt;
}

#getbookmarklet .errorform h4 {
    margin: 1em 0;
    font-weight: bold;
}

#getbookmarklet .errorform h4, 
#getbookmarklet .errorform p {
    color:#ca0608;
}

#getbookmarklet textarea.copypaste {
    width:99%;
    background-color: #dcdcdc;
    border-color: #bbb;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    padding: 5px;
    height: 40px;
    color: #656565;
}

#getbookmarklet .previewandcode h4, 
#getbookmarklet .previewandcode p {
    margin:1em 0;
}

#getbookmarklet .medgray {
    color:#bcbcbc;
}

#getbookmarklet #magazine.buildform .previewandcode .fl.mag {
    width:27%;
}
#getbookmarklet .magloading {
    background-color:#eee;
    height:200px;
    width:150px;
}

#getbookmarklet #magazine.buildform .previewandcode .fl.copy {
    width:72%;
}

#more .content .faq-left p {
    float: left;
    width: 45%;
}

#more .content .faq-left .image {
    float: right;
    width: 45%;
    height: 300px;
    background: url(../dev_O/editor/FlipItWide.png) center center no-repeat;
    background-size: contain;
}

#more .content .faq-right p {
    float: right;
    width: 45%;
}

#more .content .faq-right .image {
    float: left;
    width: 45%;
    height: 300px;
    background: url(../dev_O/editor/share.png) center center no-repeat;
    background-size: contain;
}

#more .content .faq-full p {
    float: none;
    width: 100%;
}

#more .content .faq-full .image {
    float: none;
    width: 100%;
    height: 700px;
    background: url(../dev_O/editor/editor_home.png) center center no-repeat;
    background-size: contain;
}

#edit_preference button.flbutton.unsub.unsub-all {
  width: 240px;
}

#edit_preference .flbutton.unsub, #edit_preference span.unsub-text {
  width: 120px;
  text-shadow: none;
  display: block;
  float: left;
  height: 32px;
  line-height: 32px;
  margin: 0;
  border: none;
}

#edit_preference .flbutton.unsub {
  background: transparent;
  box-shadow: none;
  color: #999;
}
#edit_preference .flbutton.unsub:hover {
  color: #666;
}
#edit_preference span.unsub-text {
  color: #262626;
  background: url(../img/subscribe-check.jpg) 0 50% no-repeat transparent;
  box-shadow: none;
  cursor: default;
  font-family: Medium;
}

#edit_preference .unsub-all {
  text-align: right;
  padding-right: 25px;
}

#edit_preference table.settings.settings-standalone th {
  text-align: left;
  border: none;
}
#edit_preference table.settings.settings-standalone thead tr {
  border: none;
}

#edit_preference table.settings.settings-standalone tbody tr {
  border-bottom: solid 1px #ccc;
}

#edit_preference table.settings.settings-standalone th,
#edit_preference table.settings.settings-standalone td {
  padding: 20px 0;
}

.alert-lightbox-success-container {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.alert-lightbox-success-container .alert-lightbox-success {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  margin-left: -200px;
  height: auto;
  margin-top: -100px;
  padding: 20px;

  background-color: #f7f7f7;
}

.alert-lightbox-success-container .alert-lightbox-success p {
  color: #999;
  margin: 1em auto;
}

.alert-lightbox-success-container .alert-lightbox-success button.flbutton.close-lightbox {
  text-shadow: none;
  color: white;
  line-height: 32px;
  background-color: #d71200;
  border: none;
}

tr.bottom-plug {
  border-bottom: none;
}

#edit_preference table.settings.settings-standalone tr.bottom-plug td:first-child {
  text-align: left;
  color: #999;
}

#edit_preference table.settings.settings-standalone tr.bottom-plug td {
  text-align: right;
}

#edit_preference table.settings.settings-standalone tr.bottom-plug a {
  margin: 0 7px;
}

body.unsubscribe-page .ctr {
  width: 800px;
}