/*
 * Reset
 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

q,
blockquote {
    quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
    content: none;
}

a img {
    border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block;
}

button {
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0 transparent none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    font: inherit;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

body {
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: normal;
    color: black;
}

/*
* Clear Fix
*/

.dy-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*
* Page Layout
*/

.page {
    overflow: hidden;
    min-height: 360px;
    width: 100%;
}

.page,
.page.ui-body-c {
    /* override jqMobile */
    background-color: white;
    background-image: none;
    font-family: inherit;
    color: inherit;
    text-shadow: none;
}

.detail.page,
.detail.page.ui-body-c,
.groups.page,
.groups.page.ui-body-c,
.events.page,
.events.page.ui-body-c,
.members.page,
.members.page.ui-body-c {
    background: #d9d9d9;
}

.page .header {
    position: relative; /* create stacking context for box shadow */
 }

.page .header.ui-bar-a {
    border: 0;
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    -o-box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    background-image: none;
    text-shadow: none;
}

.page .header.ui-header {
    overflow: visible;
}

.page .header .top_bar {
    height: 12px;
}

.page .header .menu {
    position: relative; /* for button and .panel */
    top: 0;
    right: 0;
}

.page .header .menu > button {
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 40px;
    background: #000000 url(../gfx/mobile-sprite.png) no-repeat center -30px; /* 100px/2 - 40px/2 */
    background-size: 50px auto; /* 100px / 2 */
    cursor: pointer;
}

.cht-headerButton {
    position: relative;
    top: 0;
    right: 0;
}

.cht-headerButton button {
    position: absolute;
    top: 0;
    right: 59px;
    width: 58px;
    height: 40px;
    background: #000;
    color: #ddd;
    cursor: pointer;
    font-size: 20px;
}

.cht-headerButton button::before {
    content: "\f086";
    font-family: 'ning-icon-fonts';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}

.cht-countNotification {
    display: none;
    border-radius: 0.5em;
    -webkit-box-shadow: 0 1px 1px rgba(100, 100, 100, 0.5);
    box-shadow: 0 1px 1px rgba(100, 100, 100, 0.5);
    background-color: #E50505;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#E50505), to(#d31717));
    background: transparent linear-gradient(#E50505, #d31717);
    font: normal bold 8px/8px sans-serif;
    padding: 0.25em 0.5em;
    position: absolute;
    top: 8px;
    right: 70px;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(100, 100, 100, 0.5);
    text-decoration: none;
}

.page .header .menu > .panel {
    /* High z-index to ensure the menu appears over premium Ning Ads (BAZ-35697) */
    z-index: 99999999;
    position: absolute;
    top: 44px;
    right: 0;
    width: 200px;
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid #333;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    height: 0;
    display: none;
    opacity: 0;
    -moz-transition-property: height, opacity;
    -webkit-transition-property: height, opacity;
    -o-transition-property: height, opacity;
    transition-property: height, opacity;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.page .header .menu > .panel ul {
    list-style: none;
    text-align: left;
}

.page .header .menu > .panel ul > li {
    line-height: 42px;
    margin: 0;
    border-top: 1px solid #444;
    border-bottom: 1px solid #555;
}

.page .header .menu > .panel ul > li:first-child {
    border-top: none;
}

.page .header .menu > .panel ul > li:last-child {
    border-bottom: none;
}

.page .header .menu > .panel ul > li a {
    padding: 0 20px;
    font-weight: 300;
    color: rgba(200, 200, 200, 0.8);
    /* Cut off long menu items: */
    display: block;
    white-space: nowrap;
    overflow-x: hidden;
}

.page .header .menu > .panel ul > li a:active {
    color: white;
    background: rgba(98,165,233,0.8);
}

.page .header .menu > .panel ul > li a img {
    height: 20px;
    position: relative;
    top: 4px;
}

.page .header .masthead {
    padding: 10px 8px;
    z-index: 10; /* so shadow is cast on menu */
    height: 20px;
    cursor: pointer;
}

.page .header .masthead h1 {
    margin-right: 50px; /* for menu button */
    padding: 0 8px 4px 0; /* BAZ-33483 */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 16px; /* minimum, will be scaled up if possible */
    line-height: 20px;
    overflow: hidden;
    height: 100%;
}

/* Styling for a wrapped h1 -- see scaletext plugin */
.page .header .masthead h1 .wrapped {
    line-height: 18px;
}

.page .canvas {
    line-height: 1.125; /* 18px / 16px */
}

.page .canvas.ui-content {
    padding: 0px;
}

/* The page-body is the main part of the page, under the action bar if any. */
.page-body {
    padding: 8px;
    /* Ensure the page-body is at least tall enough to show slide-down forms,
       so that they don't get cut off (BAZ-34015). */
    min-height: 350px;
}

.page-body:after {
    display: block;
    content: "";
    clear: both;
}

.detail.page .page-body {
    padding: 0 0 16px 0;
    color: #515b61;
    text-shadow: 0 1px 0 white;
}

.detail.page .page-body > h2 {
    margin-left: 20px;
}

/*
* Content
*
* scope for classes inserted into user content (i.e., by TinyMCE)
*/

.content {
    overflow: hidden;
    line-height: 1.5;
}

.content img,
.xg_user_generated img {
    max-width: 100%;
    height: auto; /* required if the <img> has a hard-coded height */
}

.content img.align-left {
    float: left;
    max-width: 50%;
    margin: .25em 1em .25em 0;
}

.content img.align-right {
    float: right;
    max-width: 50%;
    margin: .25em 0 .25em 1em;
}

.content img.align-center,
.content img.align-full {
    display: block;
    margin: .25em auto;
}

.content .font-size-1 {
    font-size: 8px;
}

.content .font-size-2 {
    font-size: 10px;
}

.content .font-size-3 {
    font-size: 12px;
}

.content .font-size-4 {
    font-size: 14px;
}

.content .font-size-5 {
    font-size: 16px;
}

.content .font-size-6 {
    font-size: 10px;
}

.content .font-size-7 {
    font-size: 24px;
}

.content .nofloat {
    float: none;
}

.content .clear {
    clear: both;
}

.content .align-right {
    text-align: right;
}

.content .align-center {
    text-align: center;
}

.content .br {
    white-space: normal;
}

.content .nobr {
    white-space: nowrap;
}

.xg_user_generated > * {
    margin-top: 1em;
}

.xg_user_generated ul {
    list-style-type: square;
    list-style-position: outside;
    padding-left: 2em;
}

.xg_user_generated ol {
    list-style-type: decimal;
    list-style-position: outside;
    padding-left: 2em;
}

.xg_user_generated b,
.xg_user_generated strong {
    font-weight: bold;
}

.xg_user_generated i,
.xg_user_generated em {
    font-style: italic;
}

/*
* Sprites
*/

/* mobile-sprite.png is 100px wide, but is double resolution, so the effective
   width is 50px.  Individual icons are centered on x=25 and y=50i for icon index i.
   The position offsets can therefore be computed based on the size of the icon
   (or more accurately, the size of the area they're centered in) and their index.
   Typically:
        left: (width of image)/2 - 25px
        top: (height of image)/2 - i*50px
*/

.xg_sprite {
    display: inline-block;
    background: transparent url(../gfx/mobile-sprite.png) no-repeat;
    background-size: 50px auto; /* show the image at half size */
    padding-left: 20px /* 16px image width + 4px spacing */;
    line-height: 20px;
    height: 20px;
}

.xg_sprite.xg_sprite-comment   { background-position: -17px -390px; }
.xg_sprite.like-link-1         { background-position: -17px -440px ;}
.xg_sprite.like-link-2         { background-position: -17px -490px ;}
.xg_sprite.like-link-3         { background-position: -17px -540px ;}
.xg_sprite-event               { background-position: -17px -590px; }
.xg_sprite-rss                 { background-position: -17px -640px; }
.xg_sprite.xg_sprite-megaphone { background-position: -17px -740px; }
.xg_sprite-up                  { background-position: -17px -790px; }
.xg_sprite-reply               { background-position: -17px -840px; }

.xg_sprite.xg_sprite-play-music {
    background-position: -13px -688px;
    height: 24px;
    line-height: 24px;
    padding-left: 24px;
    text-indent: -9999px;
}

/* not really a sprite, but a unicode left arrow */

a.xg_back .ui-btn-text:before {
    content: "\2190"; /* &larr; */
    padding-right: .5em;
}

/* tweaks for special uses of like buttons */
.likebox .like-button-1 a,
.likebox .like-link-1 { background-position: -17px -442px; }
.like-button-1 a { background-position: -17px -444px; }
.likebox .like-button-1 a { background-position: -17px -442px; }

.like-button-2 a { background-position: -17px -493px; }
.likebox .like-button-2 a { background-position: -17px -491px; }

.like-button-3 a { background-position: -17px -540px; }

.ui-body-c a.ui-link.xg_sprite {
    font-weight: inherit;
}

/*
* Like Links
*/

.like-link .change {
   display: none; /* no hover effects on mobile */
}

/*
 * Listing pages
 */

.ui-mobile ul.discussions li,
.ui-mobile ul.blog-posts li {
    padding-left: 71px;
    padding-right: 8px;
}

.discussions.page .page-body > h1,
.blog-posts.page .page-body > h1 {
    padding-left: 8px;
    padding-top: 8px;
}

/* Disable truncation for list descriptions. */

.post ul#comments .ui-li-desc {
    white-space: normal;
}

/*
* Grid preview for photo listing
*/

ul.grid-preview {
    width: 100%;
    overflow: hidden;
    padding: 4px; /* same as on li > a */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul.grid-preview > li {
    width: 25%; /* 4 across (phone portrait) */
    float: left;
    position: relative; /* positioning context for img and .post-title */
}

@media only screen and ( min-width: 480px ) {
    ul.grid-preview > li {
        width: 16.666%; /* 6 across (phone landscape, tablet portrait)*/
    }
}

@media only screen and ( min-width: 960px ) {
    ul.grid-preview > li {
        width: 11.111%; /* 9 across (tablet landscape)*/
    }
}

ul.grid-preview > li > a {
    display: block;
    padding: 4px;
    color: white;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
}

ul.grid-preview > li > a.ui-link,
ul.grid-preview > li > a.ui-link:visited,
ul.grid-preview > li > a.ui-link:hover,
ul.grid-preview > li > a.ui-link:active {
    font-weight: normal;
    color: white;
}

ul.grid-preview > li > a .thumbnail {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* force 1:1 aspect ratio */
    background-size: cover;
    background-position: center;
    outline: 1px solid #ccc;
}

.photoList .page-body {
    padding: 0 0 8px 0;
}


/*
 * Member listings
 */
.groups.page .page-body,
.events.page .page-body,
.members.page .page-body,
.blog-posts.page .page-body,
.discussions.page .page-body {
    padding: 0 0 8px 0;
}
.groups.page .page-body,
.events.page .page-body,
.members.page .page-body {
    color: #515b61;
    text-shadow: 0 1px 0 white;
}
ul.events > li.divider {
    padding: .5em 15px;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    border-width: 0;
    border-top-width: 1px;
    border: 1px solid #456F9A;
    background: #5E87B0;
    color: white;
    text-shadow: 0 1px 1px #3E6790;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#6FACD5),to(#497BAE));
    background-image: -webkit-linear-gradient(#6FACD5,#497BAE);
    background-image: -moz-linear-gradient(#6FACD5,#497BAE);
    background-image: -ms-linear-gradient(#6FACD5,#497BAE);
    background-image: -o-linear-gradient(#6FACD5,#497BAE);
    background-image: linear-gradient(#6FACD5,#497BAE);
}

ul.groups > li,
ul.events > li.event,
ul.members > li {
    clear: both;
    position: relative; /* context for avatar */
    padding: 8px 8px 8px 94px /* 8px padding + avatar + 12px gutter */;
    min-height: 74px; /* height+padding+border of avatar */
    border-bottom: 1px solid #6f6f6f;
    border-top: 1px solid white;
    word-wrap: break-word;
}

ul.groups > li .dy-avatar,
ul.events > li .dy-avatar,
ul.members > li .dy-avatar,
ul.blog-posts > li .dy-avatar,
ul.discussions > li .dy-avatar {
    left: 8px;
}

ul.groups h3,
ul.events h3,
ul.members h3 {
    margin-top: 1em;
}

ul.groups a,
ul.events a,
ul.members a {
    text-shadow: white 0 1px 0, rgba(0, 0, 0, .5) 0px -1px 0;
}

/*
 * Detail Views
 */

.view .headline {
    margin: 0 20px; /* 20px = comments padding + border + margin */
    padding: 16px 0 16px 62px;
                /* 62px = 48px avatar + 2*2px padding + 2*1px border + 8px gap */
    color: inherit;
}

.view .headline:after {
    display: block;
    content: "";
    clear: both;
}

.view .headline .dy-avatar {
    margin-left: -62px; /* = - padding-left of headline */
}

.view .headline h1 {
    color: black;
    word-wrap: break-word;
}

.view .headline .metadata {
    margin-top: 0;
    color: inherit;
}

.view .headline .status {
    margin: 1em 0;
    word-wrap: break-word;
}

.view .headline .status::before {
    display: inline;
    content: "\201C";
}

.view .headline .status::after {
    display: inline;
    content: "\201D";
}

.view .headline .description {
    margin-top: .5em;
    font-size: 87.5%; /* 14px / 16px */
    line-height: 1.25em;
}

.view > h2 {
    margin: .5em 20px;
}

.view .content {
    margin: 0 20px; /* same as headline */
}

/*
 * Commenting on Detail Views
 */

.comment-section {
    margin: 1em 9px .5em;
    color: black;
    text-shadow: none;
    border: 1px solid #999;
    background: white;
}

.comment-section .load-previous-comments-link {
    position: relative;
}

.comment-section .load-previous-comments-link img.spinner {
    position: absolute;
    height: 20px;
    margin-top: -10px;
    top: 50%;
    margin-left: 5px;
    display: none;
}

.comment-section ul.comments {
    padding: 0 10px;
}

.comment-section ul.comments.threaded {
    background: #eaeaea;
}

.comment-section ul.comments.threaded.current {
    background: white;
}

.comment-section ul.comments.threaded > li {
    padding-bottom: 0;
}

.comment-section ul.comments.threaded > li.current,
.comment-section ul.comments.threaded.current > li {
    padding-bottom: 8px;
}

.comment-section ul.comments > li .lead-comment a.show-comments {
    clear: right;
    float: right;
    margin-top: .5em;
    margin-left: .5em;
    width: 1em;
}

.comment-section ul.comments > li .lead-comment a.reply {
    float: right;
    margin-top: .5em;
    text-indent: -9999px;
}

.comment-section ul.comments > li > a.reply {
    float: right;
    display: none;
    margin-top: .5em;
}

.comment-section ul.comments > li.current > a.reply {
    display: block;
}

.comment-section ul.comments li .delete-section {
    position: absolute;
    right: 0;
    top: 5px;
    background: white;
    padding: 0 0 8px 8px;
}

/** Fix delete section bg color for threaded comments */
.comment-section ul.comments.threaded .delete-section {
    background: #EAEAEA;
}
.comment-section ul.comments.threaded.current .delete-section {
    background: white;
}

.comment-section ul.comments li .delete-section > .delete-button {
    margin-right: 0;
}

.comment-section ul.comments li a.delete-button {
    background: #e10036;
    background-image: -webkit-gradient(linear, center top, center bottom, from(#e10036), to(#be0000));
    background-image: -webkit-linear-gradient(#e10036, #be0000);
    background-image: -moz-linear-gradient(#e10036, #be0000);
    background-image: -ms-linear-gradient(#e10036, #be0000);
    background-image: -o-linear-gradient(#e10036, #be0000);
    background-image: linear-gradient(#e10036, #be0000);
    border-color: #cc0033;
}

.discussion.page .page-body > a.reply {
    float: right;
    display: block;
    margin-top: .5em;
    margin-right: 10px;
}

.comment-section ul.comments > li a.show-comments:active,
.comment-section ul.comments > li a.close-comments:active {
    background: #62a5e9;
    color: white;
}

.comment-section ul.comments > li.current > .lead-comment a.reply,
.comment-section ul.comments > li.current > .lead-comment a.show-comments {
    display: none;
}

.comment-section ul.comments > li a.close-comments {
    visibility: hidden;
    float: right;
    top: 8px;
    right: 10px;
    text-indent: -9999px;
}

.comment-section ul.comments > li.current > a.close-comments {
    visibility: visible;
}

.comment-section ul.comments > li a.show-comments.dy-displaynone {
    display: none;
}

.comment-section ul.comments.threaded > li {
    display: none;
}

.comment-section ul.comments.threaded.current > li {
    display: block;
}

.comment-section ul.comments.threaded > li.current {
    display: block;
}

.comment-section ul.comments > li .nested-comments {
    display: none;
    margin: 8px 0 0 -42px;
    border: 1px solid #999;
    background: white;
}

.comment-section ul.comments > li:after {
    display: block;
    content: "";
    clear: both;
}

.comment-section ul.comments > li.current > .nested-comments {
    display: block;
}

.comment-section ul.comments .comment,
.feed-story .content-comment,
.feed-story .feed-story-title,
.feed-story .rich-excerpt {
    word-wrap: break-word;
}


/*
 * Photos
 * TODO: move to its own file
 */

.photo.page .view .content {
    margin: 0;
    background: black;
    height: 0;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    position: relative;
}

.photo.page .view .content .swipearea {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.photo.page .view .content > .swipearea.loading {
    opacity: .5;
}

/*
* Sign In Page
*/
p.additional-info {
    font-size: 0.7em;
}

/* Override margin in .new-profile.page form input.ui-input-text */
.new-profile.page .canvas form input.year {
    display: inline-block;
    width: 5em;
    margin-left: 6px;
}

/* Submit button on the Create Profile page. */
.new-profile.page .form-buttons {
    margin-top: 1em;
}

.new-profile.page fieldset.date div.ui-select,
.new-profile.page fieldset.date input {
    vertical-align: middle;
}

.new-profile.page input[type=file] {
    display: block;
    margin-bottom: 1em;
}

#do-not-display-gender + div.ui-slider-switch {
    /* Override display: inline-block in jQuery Mobile CSS. */
    display: block;
}

ul.error {
    list-style-type: square;
    list-style-position: outside;
    padding-left: 2em;
}

.authentication.page form a.cancel-button {
    float: left;
    margin: 0;
}

.new-profile.page form div.ui-btn-inline,
.authentication.page form div.ui-btn {
    float: right;
    margin: 0;
}

.passwordReset.page form input.ui-input-text,
.authentication.page form input.ui-input-text {
    margin: 1em 0;
}

ul.authentication-providers {
    text-align: center;
}

ul.authentication-providers li {
    margin: 0 7px;
    display: inline-block;
}

ul.authentication-providers a {
    background: url(../gfx/providers-sprite.png) no-repeat top left;
    display: inline-block;
    text-indent: -9999em;
    width: 32px;
    height: 32px;
}

ul.authentication-providers a.service-fb {
    background-position: 0 0;
}

ul.authentication-providers a.service-google {
    background-position: 0 -82px;
}

ul.authentication-providers a.service-tw {
    background-position: 0 -164px;
}

ul.authentication-providers a.service-yahoo {
    background-position: 0 -246px;
}

ul.authentication-providers a.service-linkedin {
    background-position: 0 -410px;
}

.authentication.page div.or {
    margin: 1em 5px;
    text-align: center;
    text-transform: uppercase;
    background: url(../gfx/line.png) repeat-x center center
}

.authentication.page div.or span {
    color: #333;
    background-color: #eee;
    font-size: 11px;
    padding: 2px 11px;
}

.passwordReset.page .page-body > p,
.signin.page .page-body p.instruction,
.authentication.page .page-body p.other-action {
    clear: both;
    margin: 1em 0;
    text-align: center;
}

.new-profile.page p.instruction {
    margin-bottom: 0.5em;
}

/* label.question distinguishes question labels from answer labels, such as
   those on checkboxes. */
.new-profile.page label.question,
.signin.page label.question,
.signup.page label.question {
    display: block;
    color: #333;
    font-weight: bold;
    margin-bottom: .5em;
    margin-top: 1em;
}

label.constant-contact,
/* Override jQuery Mobile's .ui-checkbox .ui-btn. */
form .ui-checkbox label.constant-contact {
    margin: 1em 0;
}

.signup.page fieldset#birthdate .ui-select {
    display: block;
    float: left;
    width: 32%;
    margin: 0 -1px 0 0;
}

.signup.page fieldset#birthdate .ui-select .ui-btn-text {
    text-overflow: clip; /* don't want ellipses on such short labels; better to just clip */
}

.signup.page fieldset#birthdate .ui-select:first-child,
.signup.page fieldset#birthdate .ui-select:last-child {
    width: 34%;
}

.signup.page fieldset#birthdate .ui-select .ui-btn,
.signup.page fieldset#birthdate .ui-select .ui-btn-inner  {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * ReCAPTCHA ReStyling
 * The .signup.page prefix on each selector is for specificity
 * The !important is because ReCAPTCHA applies it throughout
 */

.signup.page #recaptcha_widget {
    margin: 1em 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    position: relative;
}

.captcha-area #recaptcha_widget {
    padding: 5px 5px 0 5px;
    position: relative;
}

.signup.page #recaptcha_image {
    margin: 10px auto;
    max-width: 100% !important;
}

.signup.page #recaptcha_image img {
    max-width: 100% !important;
}

.captcha-area #recaptcha_image {
    padding-top: 5px;
    width: 100% !important;
}

.captcha-area #recaptcha_image img {
    /* Stretch it a little bit to fill the available space in the dialog. */
    width: 100% !important;
}

.captcha-area a.recaptcha-audio-button,
.captcha-area a.recaptcha-visual-button,
.captcha-area a.recaptcha-help,
.signup.page a.recaptcha-audio-button,
.signup.page a.recaptcha-visual-button,
.signup.page a.recaptcha-help {
    display: none;
}

.captcha-area a.recaptcha-refresh {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 14px;
    height: 12px;
    text-indent: -9999px;
    background: url(../../index/gfx/icons/xg_buttonimage-222.png) no-repeat;
}

.signup.page a.recaptcha-refresh {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 0 2px 0 3px;
    text-indent: -9999px;
    background: #333 url(../gfx/mobile-sprite.png) no-repeat;
    background-position: center -84px /* (32/2) - (200/2) */;
    background-size: 50px auto;
}

/*
* Thumbnails
*/

.dy-content-thumb-link {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

.dy-content-thumb-link img {
    vertical-align: top;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    /* Fix for placeholder not going away when input is focused, in Chrome.
       See "Issue 106714 in chromium: Placeholder attribute won't disappear after focusing an input field"
       http://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/6faceeffa08ad74a/f73798eaa96f0fc8?lnk=raot */
    color: transparent;
    text-shadow: none;
}

.header-ad, .footer-ad {
    overflow-x: hidden;
}

.ui-simpledialog-container .ui-header .ui-title {
    /* Override jqMobile header margins in dialogs created by simpledialog plugin */
    margin-left: 0;
    margin-right: 0;
}

.ui-simpledialog-container p {
    margin: 1em 5px;
    line-height: 1.3;
}

.ui-simpledialog-container a.ok-button {
    float: right;
}

.ui-simpledialog-container p.error {
    padding: 0;
    color: red;
}

.status-form .ui-btn .ui-btn-inner {
    min-width: 4em;
}

.action-bar-dropdown .cancel-button,
form.status-form a.ui-btn.cancel-button {
    float: left;
    margin: 0;
}

form.status-form div.ui-btn {
    float: right;
    margin: 0;
}

.status-form .post-to-others {
    clear: both;
    text-align: right;
    line-height: 21px;
    padding: 1em 0;
}

.status-form .check-button {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #666;
    background-image: url('../gfx/mobile-sprite.png');
    background-size: 50px auto;
    background-color: white;
    background-repeat: no-repeat;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    margin: 0 0 0 .5em;
    vertical-align: middle;
    padding: 7px 5px;
    height: 32px /* 1px + 7px + 16px + 7px + 1px */;
    width: 48px /* 1px + 5px + 16px + 4px + 16px + 5px + 1px */;
}

.status-form .check-button span {
    width: 16px;
    height: 16px;
    display: block;
    float: right;
}

.status-form .check-button.checked span {
    background: transparent url('../gfx/mobile-sprite.png') no-repeat;
    background-size: 50px auto;
    background-position: -17px /* (16/2) - 25 */ -992px /* (16/2) - 1000 */;
}

.status-form .twitter.check-button {
    background-position: -12px /* 16/2 + 5 - 25 */ -935px /* 16/2 + 7 - 950 */;
}

.status-form .facebook.check-button {
    background-position: -12px /* 16/2 + 5 - 25 */ -885px /* 16/2 + 7 - 900 */;
}

.status-update {
    word-wrap: break-word;
}

/**
 * Action Bar
 */

.actionBarContainer {
    height: 34px;
    z-index: 400; /* jquery simpledialog is shown at 500 so we want to be below this */
    position: relative; /* stacking context */
    visibility: hidden; /* made visible with js once location is determined */
}

.actionBarContainer.fixed-bottom {
    /* applied dynamically on devices that support position:fixed */
    position: fixed;
    bottom: 0;
    width: 100%;
}

.page .page-body.with-pinned-action-bar {
    padding-bottom: 42px; /* (8px page-body padding) + (34px for action bar) */
}

.search-bar,
.actionBar {
    /* Generated using http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#4B4B4B')"; /* IE8/9, to facilitate in browser testing */
    background-image: -ms-linear-gradient(bottom, #4B4B4B 0%, #333333 100%); /* IE10 */
    background-image: -moz-linear-gradient(bottom, #4B4B4B 0%, #333333 100%); /* Mozilla Firefox */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4B4B4B), color-stop(1, #333333)); /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-linear-gradient(bottom, #4B4B4B 0%, #333333 100%); /* Webkit (Chrome 11+) */
    background-image: linear-gradient(bottom, #4B4B4B 0%, #333333 100%); /* Proposed W3C Markup */
    height: 100%;
}

.actionBar {
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    -webkit-box-shadow: 0 -1px 1px rgba(255,255,255,.5) inset;
    box-shadow: 0 -1px 1px rgba(0,0,0,.5) inset;
}

.fixed-bottom .actionBar {
    border-width: 1px 0 0 0;
    -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5) inset;
    box-shadow: 0 1px 1px rgba(255,255,255,.5) inset;
}

.actionBarContainer .action-bar-dropdown {
    position: absolute;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 400; /* same as actionBarContainer */
}

.actionBarContainer.fixed-bottom .action-bar-dropdown {
    bottom: 34px;
}

.actionBar .leftActions {
    float: left;
    margin-left: 20px;
}

.actionBar .leftActions a {
    margin-right: 16px;
}

.actionBar .rightActions {
    float: right;
    margin-right: 20px;
}

.actionBar .rightActions a {
    margin-left: 16px;
}

.actionBar a {
    line-height: 34px;
    padding-left: 28px; /* 24px image width + 4px space */
    display: inline-block;
    background: url(../gfx/mobile-sprite.png) no-repeat;
    background-size: 50px auto;
}

.actionBar a.icon {
    /* these have no text visible */
    text-indent: -9999px;
    padding-left: 0;
    width: 24px;
    height: 34px;
}

.actionBar a.refresh {
    background-position:  center -83px /* (34/2) - (200/2) */;
}

.actionBar a.updateStatus, .actionBar a.edit {
    background-position:  center -133px /* (34/2) - (300/2) */;
}

.actionBar a.add {
    background-position:  center -1083px /* (34/2) - (2200/2) */;
}

.actionBar a.comment {
    background-position: -13px /* (24/2)px - (50/2)px */ -183px /* (34/2) - (400/2) */;
}

.actionBar a.like-icon-1 { /* heart */
    background-position: -13px /* (24/2)px - (50/2)px */ -233px /* (34/2) - (500/2) */;
}

.actionBar a.like-icon-2 { /* star */
    background-position: -13px /* (24/2)px - (50/2)px */ -283px /* (34/2) - (600/2) */;
}

.actionBar a.like-icon-3 { /* thumbs up */
    background-position: -13px /* (24/2)px - (50/2)px */ -333px /* (34/2) - (700/2) */;
}

.actionBar a.trash { /* trash can */
    background-position: center -1133px /* (34/2) - (2300/2) */;
}

.actionBar .rightActions a.friend-request-sent,
.ui-body-c .xg_theme .actionBar a.friend-request-sent {
    /* Make the text appear to the left of the icon (BAZ-34859) */
    background-position: right -1183px /* (34/2) - (2400/2) */;
    padding-left: 0;
    padding-right: 50px;
    margin-left: 0;
    margin-right: -9px;
    color: white;
}

.actionBar a.add-friend { /* head with (+) sign */
    background-position: center -1183px /* (34/2) - (2400/2) */;
    width: 32px;
}

.actionBar a.delete-friend { /* head with (-) sign */
    background-position: center -1233px /* (34/2) - (2500/2) */;
    margin-bottom: -12px;
}

.actionBar a.join-group { /* heads with (+) sign */
    background-position: center -1283px /* (34/2) - (2600/2) */;
    width: 48px;
}

.actionBar a.rsvp {
    background-position: center -1333px /* (34/2) - (2700/2) */;
}

.page .xg_theme .actionBar a.comment,
.page .xg_theme .actionBar a.like {
    /* Override .ui-body-c .xg_theme a.ui-link in theme.css */
    color: white;
}

.action-bar-dropdown {
    padding: 0 8px;
    background: #A7B7C4;
}

.action-bar-dropdown input.ui-input-text,
.action-bar-dropdown textarea.ui-input-text,
.comment-form textarea.ui-input-text {
    margin: 1em 0;
    outline: none;
    resize: none;
    padding: .5em;
    line-height: 1.5;
}

.action-bar-dropdown .message {
    background-color: #c6d3da;
    padding: .5em .5em;
    margin: .5em 0;
}

.action-bar-dropdown .message p {
    margin-bottom: .5em;
}

.action-bar-dropdown .message p:last-child {
    margin-bottom: 0;
}

.action-bar-dropdown .ui-select {
    margin: 1em 0;
}

.action-bar-dropdown input.ui-input-text {
    height: 2.5em; /* 1.5em line-height + 2 * .5em padding */
}

.action-bar-dropdown textarea.ui-input-text {
    height: 4em; /* 2* 1.5em line-height + 2 * .5em padding */
}

.add-blogpost-form textarea.ui-input-text,
.add-discussion-form textarea.ui-input-text {
    height: 7em; /* 4* 1.5em line-height + 2 * .5em padding */
}

.action-bar-dropdown textarea.ui-input-text:focus,
.action-bar-dropdown textarea.ui-focus {
    outline: none;
    box-shadow: none;
}

.add-friend-error-form .ui-btn,
.friend-request-sent-form .ui-btn,
.comment-form .ui-btn,
.action-bar-dropdown .confirm-button {
    float: right;
    margin: 0 0 1em 0;
}

.action-bar-dropdown .confirm-button .ui-btn {
    margin: 0;
}

.action-bar-dropdown .confirm-button .maybe-button.ui-btn,
.action-bar-dropdown .confirm-button .attend-button.ui-btn {
    margin-left: 5px;
}

.event-header .confirm-button .decline-button.ui-btn {
    margin-left: -30px;
    margin-right: 0;
}

.event-header .confirm-button .maybe-button.ui-btn,
.event-header .confirm-button .attend-button.ui-btn {
    margin-left: 2px;
    margin-right: 0;
}

.group-header .confirm-button {
    display: inline;
}

.add-discussion-form .ui-select {
    float: left;
    margin-top: 0;
}

.comment-form:after {
    display: block;
    content: " ";
    clear: both;
}

.footer-comment-form {
    padding-left: 8px;
    padding-right: 8px;
}

.comment-section > .comment-form,
.nested-comments > .comment-form {
    padding: 1em 8px .5em;
    background: #A7B7C4;
    box-shadow: 0 2px 2px rgba(0,0,0,.5) inset;
}

/*
 * File upload
 * Styled after: http://www.quirksmode.org/dom/inputfile.html
 */

.fileinputs {
    position: relative; /* positioning context */
    margin: 1em 0;
    padding: 5px;
    border: 1px solid #aaa;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    line-height: 1.5em;
    background: #f9f9f9;
    -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 4px 0px inset;
    box-shadow: rgba(0,0,0,0.2) 0px 1px 4px 0px inset;
}

.fileinputs .fakefile {
    white-space: nowrap;
    overflow: hidden;
}

.fileinputs .fakefile > a {
    float: left;
    margin: 0;
}

.ui-body-c .xg_theme .fileinputs .fakefile > a.ui-btn {
    color: #333;
}

.fileinputs .fakefile .filename {
    padding-left: .5em;

}

.fileinputs .fakefile > a .ui-btn-inner {
    padding: 0 20px;
}

.fileinputs .fakefile > a .ui-btn-text {
    z-index: auto; /* not a real button, the file input is */
}

.fileinputs input[type="file"] {
    /* this has to come after the .fakefile in the DOM, otherwise
       it would require z-index to be set */
    font-size: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* we want clicks to go to the file input,
                   but we want to see the button+span beneath */
    cursor: pointer;
}


/** Displayed when loading more content at the bottom of the activity feed */
.actionBar .refreshSpinner {
    display: none;
    margin-top: 6px;
    width: 22px;
    height: 22px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    background: url(../../lib/js/jquery/jquery.mobile/images/ajax-loader.gif);
    background-size: 23px 23px;
    background-repeat: no-repeat;
}

.passwordReset p {
    margin-bottom: 15px;
    margin-top: 15px;
}

.editPassword p {
    margin-bottom: 10px;
    margin-top: 10px;
}

.editPassword .ui-btn,
.passwordReset .ui-btn {
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
}

.authentication.page p.other-action {
    margin-bottom: 10px;
}

.passwordReset .success {
    background: #e7f7d1 url(../../index/gfx/msg/success.png) scroll no-repeat 8px center;
    border: 1px solid #c3dd93;
    color: #434342;
    padding: 10px 10px 10px 42px;
}

p.notification {
    background: #F7F5D6 url(../../index/gfx/msg/warning.png) scroll no-repeat 8px center;
    padding: 8px 12px 8px 40px;
}

.dy-displaynone,
.actionBar a.dy-displaynone {
    display: none;
}

input.ui-input-text,
textarea.ui-input-text {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.ui-input-text.ui-corner-all {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.footerSpinner {
    width: 100%;
    visibility: hidden;
    text-align: center;
}

/* Avatars with Badges */

.dy-avatar {
    display: inline-block;
    overflow: hidden; /* in case we get a larger image */
    font-size: 6px;
    line-height: 1;
    position: relative; /* positioning context for badge */
    text-align: left;
}

/** We apply a white frame to avatar images in mobile bazel */
span.dy-avatar {
    background: white;
    padding: 2px;
    border: 1px solid #ABAAA6;
}

span.dy-avatar.dy-avatar-64 { padding: 4px; }
span.dy-avatar.dy-avatar-144 { padding: 6px; }

/** Positioning for the avatar in the headline for details pages*/
span.profile-avatar,
span.headline-avatar {
    float: left;
    margin-right: 8px;
}

.mobile-like span.profile-avatar {
    margin: 0 5px 5px 0;
}

/** Positioning for the avatar in the activity feed and list views (comments, blogs, discussions) */
span.list-avatar,
span.feed-avatar {
    top: 8px;
    left: 0px;
    position: absolute;
}

/* avatar sizes */
.dy-avatar.dy-avatar-184 { width: 184px; height: 184px; font-size: 12px; }
.dy-avatar.dy-avatar-164 {
    height: 164px;
    width: 164px;
}
.dy-avatar.dy-avatar-144 { width: 144px; height: 144px; font-size: 12px; }
.dy-avatar.dy-avatar-96  { width:  96px; height:  96px; font-size: 12px; }
.dy-avatar.dy-avatar-64  { width:  64px; height:  64px; font-size:  8px;}
.dy-avatar.dy-avatar-48  { width: 48px; height: 48px; font-size:  6px;}
.dy-avatar.dy-avatar-32  { width: 32px; height: 32px; font-size:  6px;}
.dy-avatar.dy-avatar-full-width {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    font-size: 12px;
}

.dy-avatar > img.photo {
    width: 100%;
    height: 100%;
}

.dy-avatar > img.dy-badge-image {
    position: absolute; /* use with position classes (e.g., top-left) */
    width: 33%;  /* default, but overridde later */
    height: 33%;
}

/* normalize badge sizes */
.dy-avatar.dy-avatar-144 > img.dy-badge-image { width: 48px; height: 48px; }
.dy-avatar.dy-avatar-96 > img.dy-badge-image { width: 32px; height: 32px; }
.dy-avatar.dy-avatar-64 > img.dy-badge-image { width: 24px; height: 24px; }
.dy-avatar.dy-avatar-48 > img.dy-badge-image { width: 24px; height: 24px; }
.dy-avatar.dy-avatar-32 > img.dy-badge-image { width: 16px; height: 16px; }

/* positions of badges */

.dy-avatar .dy-badge-image,
.dy-avatar .dy-badge-text {
    /* set all directions by default in one place here,
       then override unwanted ones to "auto" below */
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
}

.dy-avatar.dy-avatar-64 .dy-badge-image,
.dy-avatar.dy-avatar-64 .dy-badge-text {
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
}

.dy-avatar.dy-avatar-144 .dy-badge-image,
.dy-avatar.dy-avatar-144 .dy-badge-text {
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
}

.dy-avatar .dy-badge-text.top-left,
.dy-avatar .dy-badge-text.top-right {
    bottom: auto;
}

.dy-avatar .dy-badge-text.bottom-left,
.dy-avatar .dy-badge-text.bottom-right {
    top: auto;
}

.dy-avatar .dy-badge-image.top-left {
    bottom: auto;
    right: auto;
}

.dy-avatar .dy-badge-image.bottom-left {
    top: auto;
    right: auto;
}

.dy-avatar .dy-badge-image.top-right {
    bottom: auto;
    left: auto;
}

.dy-avatar .dy-badge-image.bottom-right {
    top: auto;
    left: auto;
}

.dy-badge-text {
    display: block;
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    max-height: 50%;
    padding: .5em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* default colors -- overidden on a per-category basis */
    color: white;
    background: transparent;
}
.dy-badge-text-label {
    position: relative;
}
.dy-badge-text-bg {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.noselect {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.search-bar {
    height: 52px; /* 22px line-height + 2*6px input padding +
                     2*1px border 2*8px box padding */
}

.search-bar .search-input {
    padding: 8px;
}
.search-bar .search-input.withFilterMenu {
    margin-left: 58px; /* = width of button */
    border-left: 1px solid #111;
}

.search-bar .ui-input-search,
.search-bar .search {
    border-radius: 1em;
    margin: 0; /* Override jQuery Mobile CSS */
}

.page .filterMenu {
    position: relative; /* for button and .panel */
    width: 58px;
}

.page .filterMenu > button {
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 52px; /* = height of search-bar */
    background: url(../gfx/mobile-sprite.png) no-repeat center -1024px; /* 2100px/2 - 52px/2 */
    background-size: 50px auto; /* 100px / 2 */
    border-right: 1px solid #888;
    cursor: pointer;
}

.page .filterMenu > .panel {
    z-index: 2000;
    position: absolute;
    top: 56px; /* button height + 4px space */
    left: 0;
    width: 200px;
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid #333;
    border-radius: 4px;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    text-shadow: none;

}

.page .filterMenu > .panel ul {
    list-style: none;
    text-align: left;
}

.page .filterMenu > .panel ul > li {
    line-height: 42px;
    margin: 0;
    border-top: 1px solid #444;
    border-bottom: 1px solid #555;
}

.page .filterMenu > .panel ul > li:first-child {
    border-top: none;
}

.page .filterMenu > .panel ul > li:last-child {
    border-bottom: none;
}

.page .filterMenu > .panel ul > li a {
    padding: 0 20px;
    font-weight: 300;
    color: rgba(200, 200, 200, 0.8);
    /* Cut off long menu items: */
    display: block;
    white-space: nowrap;
    overflow-x: hidden;
}

.page .filterMenu > .panel ul > li a:active {
    color: white;
    background: rgba(98,165,233,0.8);
}

.page .filterMenu > .panel ul > li a img {
    height: 20px;
    position: relative;
    top: 4px;
}

/* Profile page */

.profile .view .headline {
    padding: 16px 0 16px 166px;
                /* 166px = 144px avatar + 2*6px padding + 2*1px border + 8px gap */
    color: inherit;
}

.private.profile .view p {
    padding-top: 8px;
}

.profile .view .headline .dy-avatar {
    border: 1px solid #bfbfbf;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    float: left;
    margin-right: 10px;
    margin-left: -166px; /* = - padding-left of headline */
}


.profile .featured {
    margin-top: 2em;
    word-wrap: break-word;
}

.profile .questions {
    background-color: #ffffff;
    border: 1px solid #999999;
    margin: .5em 10px .5em 9px; /* margin-left + border + padding = margin-left of headline */
    padding: 10px;
    word-wrap: break-word;
}

.profile .questions dt {
    font-weight: bold;
}

.profile .questions dd {
    margin: .25em 0 .5em 0;
}

/*
 * Error Page
 */

.email-verification.page .page-body h1,
.pending.page .page-body h1,
.error-page .page-body h1 {
    padding-bottom: 8px;
}

.email-verification.page .page-body p,
.pending.page .page-body p,
.error-page .page-body p {
    padding-bottom: 8px;
}

.error-page .page-body ul {
    list-style-type: square;
    list-style-position: outside;
    padding-left: 2em;
}

.mobile-like {
    padding: 0 20px;
    clear: both;
}

.mobile-like .likers {
    padding-top: 4px;
}

/*
 * Error, Success, Notification Messages
 */

.dy-error-msg,
.dy-success-msg,
.dy-warning-msg,
.dy-ning-msg {
    padding: 16px 12px 8px 40px;
    margin-bottom: 5px;
    clear: both;
}

.page-body > .dy-error-msg,
.page-body > .dy-success-msg,
.page-body > .dy-warning-msg,
.page-body > .dy-ning-msg {
    /* negative margins to cover page-body's padding */
    margin: -8px -8px 5px -8px;
}

.detail.page .page-body .dy-error-msg,
.detail.page .page-body .dy-success-msg,
.detail.page .page-body .dy-warning-msg,
.detail.page .page-body .dy-ning-msg {
    /* detail pages have no padding */
    margin: 0 0 5px 0;
}

.page .canvas .page-body .dy-error-msg p,
.page .canvas .page-body .dy-success-msg p,
.page .canvas .page-body .dy-warning-msg p,
.page .canvas .page-body .dy-ning-msg p {
    padding: 0;
}

.dy-error-msg > *,
.dy-success-msg > *,
.dy-warning-msg > *,
.dy-ning-msg > * {
    margin-bottom: .5em;
}

.dy-error-msg {
    background: #ffe4df url(../../index/gfx/msg/error.png) scroll no-repeat 16px 16px;
    color: red;
}

.dy-success-msg {
    background: #e7f7d1 url(../../index/gfx/msg/success.png) scroll no-repeat 16px 16px;
}

.dy-warning-msg {
    background: #F7F5D6 url(../../index/gfx/msg/warning.png) scroll no-repeat 16px 16px;
}

.dy-ning-msg {
    background: #e9f8fe url(../../index/gfx/msg/ning.png) scroll no-repeat 16px 16px;
}

span.icon {
    padding-left: 20px;
    background-image: url(../../index/gfx/iphone/iphone-core.png);
    background-repeat: no-repeat;
}
span.icon.private {
    background-position: 1px -700px;
}
span.icon.required {
    background-position: 0 -800px;
}

.new-profile.page label {
    /* Ensure that all labels on the Create Profile page have display: block.
       Otherwise the required icon won't appear on them (for some reason). */
    display: block;
}
.photo-upload-unavailable-message {
    display: none;
}

/*
 * Activity Feed for Mobile
 */
ul.comments > li,
ul.blog-posts > li,
ul.feed-items > li,
ul.discussions > li,
.status-section,
.feed-story {
    padding: 8px 0 8px 58px;
    clear: both;
    border-top: 1px dotted #d9d9d9;
    min-height: 54px; /* height+padding+border of avatar */
    position: relative; /* context for avatar */
}

ul.feed-items > li {
    padding-left: 0;
    padding-right: 0;
}

ul.comments > li {
    padding-left: 42px;
    min-height: 38px; /* height+padding+border of avatar */
}

ul.comments > li:first-child,
ul.blog-posts > li:first-child,
ul.feed-items > li:first-child,
ul.discussions > li:first-child,
.status-section:first-child,
.feed-story:first-child {
    border-top: none;
}

.feed-story .feed-story-header a {
    font-weight: 500;
}

ul.blog-posts h3,
ul.feed-items h3,
ul.discussions h3,
ul.comments h3,
.feed-story .feed-story-title {
    font-weight: 500;
    line-height: 1.25em;
}

p.member-count,
p.metadata,
ul.blog-posts p.author,
ul.discussions p.author {
    font-size: 87.5%; /* 14px/16px */
    color: #999;
}

ul.comments p.comment,
ul.blog-posts p.author,
ul.discussions p.author,
.status-section p.status,
.feed-story .feed-event-info .content-comment,
.feed-story .feed-story-body {
    margin-top: .5em;
    display: block;
}

.feed-story .feed-icon {
    margin-right: 7px;
    float: left;
}

p.metadata,
.feed-event-info,
.feed-reactions,
.discussions .reactions,
.blog-posts .reactions {
    margin-top: .5em;
}

p.member-count {
    margin-bottom: .5em;
}

.activity.page .feed-story .feed-event-info a.xg_lightfont, /* Override .ui-body-c .xg_theme a.ui-link in theme.css */
.feed-story .feed-event-info .event-info-timestamp {
    font-size: 87.5%; /* 14px/16px */
    color: #999;
    font-weight: normal;
}

ul.feed-items img {
    max-width: 100%;
    height: auto;
}

/*
 * RSS feeds, listings and details
 */

.rss.detail .view .headline {
    padding-left: 0; /* unless we have a feed icon */
}

.rss.detail ul.feed-items > li {
    margin: 1em 10px;
    border: 1px solid #999;
    background: white;
    padding: 10px;
}

.rss.detail ul.feed-items h3 a.ui-link { /* override theme.css */
    color: black;
}

.rss.detail .view .content {
    margin: 1em 0;
}

.rss.detail p.metadata {
    color: #b0b0b0;
}

/*
 * Avatars
 * =======
 */

ul.comments img.avatar {
    height: 26px; /* 32px - 2*(2px padding + 1px border) */
    width: 26px;
}

/*
 * Friending Stories
 * ==================
 */
.feed-story-friending img.friend-2 {
    left: 0 !important;
    position: relative;
    float: left;
    margin-right: 5px;
}

.feed-story-friend {
    padding-left: 46px;
    min-height: 31px;
}

.feed-story-friend .item-icon {
    left: 8px;
    display: none;
}

.feed-friend-icon {
    position: absolute;
    top: 5px;
    left: 0;
}

#xg_themebody > #xg .indented_content .rich-detail img,
#xg_themebody > #xg .indented_content .rich-excerpt img,
body > #xg #xg_body .indented_content .rich-detail img,
body > #xg #xg_body .indented_content .rich-excerpt img {
    max-width:100%;
    width:auto;
}

.rich {
    margin-top: .5em;
}

/*
 *  Rich Thumbs
 *  ============
 */

.rich-thumb {
    float: left;
    padding-right: 8px;
}

.rich-thumbs a span {
    height: auto;
    margin-right: 5px;
    vertical-align: top;
    border: 1px solid #999;
}

.rich-thumbs a:last-child img {
    margin-right: 0;
}

/*
 * Rich Detail
 */

.rich-detail .continue-link {
    padding-left: 1em;
}

.ui-body-c .rich-detail a.ui-link {
    font-weight: inherit;
}

.rich-detail .links > li {
    margin-top: 1em;
}

.feed-more {
    margin-top: .5em;
}
/*
 * Rich Excerpt
 */

.rich-excerpt {
    margin-top: .5em;
}

/*
 * Comment counts and Like counts
 */

.comments-number,
.like-link /* Signed out */,
.like-link .value /* Signed in */ {
   display: inline-block;
   width: 2em;
   font-weight: bold !important; /* Override font-weight: inherit in .ui-body-c a.ui-link.xg_sprite */
}

ul.discussions .reactions,
ul.blog-posts .reactions {
   font-weight: bold !important; /* Override font-weight: inherit in .ui-body-c a.ui-link.xg_sprite */
}

ul.discussions .reactions a,
ul.blog-posts .reactions a {
    margin-right: 10px;
    width: 32px;
}

.feed-reactions .like-link .details,
.feed-reactions .like-link .likes-number .details,
.feed-reactions .xg_sprite-comment .details,
.feed-reactions .like-link .change {
    display: none;
}

/*
 * Status detail page
 */

a.load-previous-comments-link {
    display: block;
    width: 100%;
    padding: 10px;
    text-align:center;
    font-size: 87.5%; /* 14px / 16px */
    font-weight: 500;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * Groups
 */

.event .view .headline
.group .view .headline {
    margin: 0 9px;
    padding-bottom: 0;
}

.group.discussions .page-body {
    padding: 0;
}

.group.discussions .page-body ul.discussions {
    margin: 0 9px;
    color: black;
    text-shadow: none;
    border: 1px solid #999;
    background: white;
}

.event .page-body > p,
.group .page-body > p {
    margin: 0 9px;
}

a.website-or-map {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* text-overflow: ellipsis requires display: block */
    display: block;
}

.group.discussions .page-body ul.discussions > li {
    margin: 0 8px;
}

.mobile-tabs {
    text-align: center;
    padding: 0 9px;
    margin: .5em 0 1.5em;
    font-size: 87.5%; /* to get the English text to fit, but probably welcome in other languages */
}

.mobile-tabs a {
    width: 32.7%;
}

.mobile-tabs a .ui-btn-inner {
    padding: .5em 0;
    text-overflow: clip;
}

.group.discussion .page-body > a {
    margin: .5em 10px;
}

/* Override .ui-body-c .xg_theme a.ui-btn in theme.css */
.ui-body-c .xg_theme .mobile-tabs a.ui-btn {
    color: #222;
}

.ui-body-c .xg_theme .mobile-tabs a.ui-btn-active {
    color: white;
}

.group-header .group-description {
    display: none;
}

.alternate-text-padding {
    padding: 8px;
}

.glam-ads a img {
    /* Eliminate whitespace below ad image. */
    vertical-align: bottom;
}
.glam-ads > img[height="1"] {
    /* Take any 1x1 pixels out of the flow, so that they won't start a new line after the ad image (BAZ-35589) */
    position: absolute;
}

.mce-tinymce {
    margin-bottom: 1em!important;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls {
    min-width: 300px;
}