twister-html/css/style.css

@font-face
{
    font-family: "Open Sans";
    src: url("OpenSans-Regular.ttf");
}
@font-face
{
    font-family: "Open Sans";
    src: url("OpenSans-Bold.ttf");
    font-weight: bold;
}
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, textarea
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
textarea, input
{
    outline: none;
}
ol, ul, li
{
    list-style: none;
}
a
{
    text-decoration: none;
}
a:hover
{
    text-decoration: underline;
}
blockquote, q
{
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after
{
    content: '';
    content: none;
}
table
{
    border-collapse: collapse;
    border-spacing: 0;
}
html, body
{
    height: 100%;
    min-height: 100%;
    background: #ede9dc;
}
h3
{
    font-size: 14px;
    color: rgba( 0, 0, 0, .5 );
}
.clearfix:before,
.clearfix:after
{
    display: block;
    content: "";
    clear: both;
}
/*************************************
**************************** BUTTONS **
**************************************/
button
{
    background: #45474d;
    color: rgba( 255, 255, 255, .8 );
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}
button:hover
{
    color: #fff;
}
button.disabled
{
    opacity: .4;
}
button.disabled:hover
{
    color: rgba( 255, 255, 255, .8 );
}
/*************************************
**************************** MENU *****
**************************************/
.userMenu
{
    width: 900px;
    position: fixed;
    left: 50%;
    margin: 0 0 0 -450px;
    height: 40px;
    background: #45474d;
    z-index: 2;
}
.userMenu:after
{
    content: "";
    position: absolute;
    right: 0;
    width: 34px;
    height: 54px;
    background: url(../img/twister_mini.png) no-repeat right 5px;
}
.userMenu > ul
{
}
.userMenu > ul > li
{
    float: left;
    margin: 0;
}
.userMenu > ul > li > a
{
    line-height: 40px;
    height: 40px;
    padding: 0 20px 0 45px;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    opacity: .7;
    transition: all .2s linear;
    position: relative;
}
.userMenu li > a:hover
{
    text-decoration: none;
    opacity: 1;
}
.userMenu li.current > a
{
    color: #fff;
    opacity: 1;
}
.userMenu li.userMenu-home > a
{
    background: url(../img/home.png) no-repeat 5px center;
}
.userMenu li.userMenu-home:hover > a
{
    background: url(../img/home.png) no-repeat 5px center rgba( 0, 0, 0 , .4 );
}
.userMenu li.userMenu-home.current > a
{
    background: url(../img/home.png) no-repeat 5px center #b43e34;
}
.userMenu li.userMenu-connections > a
{
    background: url(../img/connections.png) no-repeat 5px center;
    padding: 0 30px 0 20px;
    opacity: 1;
}
.userMenu li.userMenu-connections:hover > a
{
    background: url(../img/connections.png) no-repeat 5px center rgba( 0, 0, 0 , .4 );
}
.userMenu li.userMenu-connections.current > a
{
    background: url(../img/connections.png) no-repeat 5px center #b43e34;
}
.userMenu li.userMenu-network > a
{
    background: url(../img/network.png) no-repeat 5px center;
}
.userMenu li.userMenu-network:hover > a
{
    background: url(../img/network.png) no-repeat 5px center rgba( 0, 0, 0 , .4 );
}
.userMenu li.userMenu-network.current > a
{
    background: url(../img/network.png) no-repeat 5px center #b43e34;
}
.userMenu li.userMenu-messages > a
{
    background: url(../img/messages.png) no-repeat center center;
    padding: 0 25px 0 35px;
    opacity: 1;
}
.userMenu li.userMenu-messages:hover > a
{
    background: url(../img/messages.png) no-repeat center center rgba( 0, 0, 0 , .4 );
}
.userMenu li.userMenu-messages.current > a
{
    background: url(../img/messages.png) no-repeat center center #b43e34;
}
.userMenu li.userMenu-profile > a
{
    background: url(../img/profile.png) no-repeat 5px center;
}
.userMenu li.userMenu-profile:hover > a
{
    background: url(../img/profile.png) no-repeat 5px center rgba( 0, 0, 0 , .4 );
}
.userMenu li.userMenu-profile.current > a
{
    background: url(../img/profile.png) no-repeat 5px center #b43e34;
}
.userMenu li.userMenu-config
{
    float: right;
    position: relative;
    margin-right: 40px;
}
.userMenu li.userMenu-search
{
    float: right;
    position: relative;
}
.userMenu li.userMenu-config > a
{
    background: url(../img/config.png) no-repeat 5px center;
    padding: 0 30px 0 45px;
}
.userMenu li.userMenu-config > a:after
{
    content: "▼";
    position: absolute;
    font-size: 10px;
    transition: all .2 linear;
}
.userMenu li.userMenu-config:hover > a,
.userMenu li.userMenu-config:active > a
{
    background: url(../img/config.png) no-repeat 5px center rgba( 0, 0, 0 , .4 );
}
.userMenu li.userMenu-messages > a:empty
{
    padding: 0 20px 0 30px;
    opacity: .7;
}
.wrapper
{
    width: 900px;
    margin: 0 auto;
    background: #f8f5ee;
    padding: 55px 15px 15px 15px;
    position: relative;
    z-index: 1;
    min-height: 100%;
}
.dashboard
{
    width: 320px;
    position: fixed;
    top: 55px;
}
.module
{
    border: solid 1px rgba( 69, 71, 77, .1 );
    background: #fff;
}
.messages-qtd
{
    position: absolute;
    background: #b43e34;
    color: #fff;
    padding: 3px;
    line-height: 12px;
    font-size: 8px;
    margin-top: 4px;
}
.userMenu-connections .messages-qtd
{
    margin: 4px 0 0 10px;
}
/*******************************************************
****************** CONFIG SUBMENU & SEARCH RESULTS *****
*******************************************************/
.dialog-modal
{
    display: none;
    background: rgba( 255, 255, 255, 1 );
    position: absolute;
    top: 45px;
    right: 10px;
    width: 250px;
    box-shadow: 0 2px 5px #65686f;
    border: solid 1px rgba( 69, 71, 77, .1 );
}
.dialog-modal:after
{
    content:"";
    width: 1px;
    background: transparent;
    position: absolute;
    top: -10px;
    right: 30px;
    border-right: solid 10px transparent;
    border-left: solid 10px transparent;
    border-bottom: solid 10px rgba( 255, 255, 255, 1 );
}
.userMenu-search .dialog-modal:after
{
    right: auto;
    left: 80px;
}
.direct-messages,
.dropdown-menu-item
{
    display: block;
    padding: 10px;
    font-size: 12px;
    border-top: solid 1px rgba( 69, 71, 77, .1 );
    color: rgba( 0, 0, 0, .7 );
}
.direct-messages:hover,
.userMenu-search-sugestions a:hover,
.userMenu-search-profiles li:hover a
{
    background: #45474d;
    color: #fff;
}
.userMenu-search-profiles li:hover span
{
    color: #fff;    
}
.userMenu-search-profiles button
{
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: #fff;
    z-index: 2;
}
.userMenu-search input[type="text"]
{
    float: right;
    padding: 3px 10px;
    margin: 9px 20px 0 0;
    border-radius: 10px;
    border: none;
}
.userMenu-search-sugestions
{
    border-bottom: solid 1px rgba( 69, 71, 77, .1 );    
}
.userMenu-search-sugestions a
{
    color: rgba( 0, 0, 0, .7 ); 
    padding: 5px 20px;
    font-size: 12px;
    display: block;
}
.userMenu-search-profiles a
{
    padding: 7px 4px;
    display: block;
    position: relative;
    z-index: 1;
}
.userMenu-search-profiles .mini-profile-info
{
    padding: 0;
}
.userMenu-search-profiles .mini-profile-photo
{
    width: 36px;
    height: 36px;
    margin: 0 5px;
}
.userMenu-search-profiles .mini-profile-name
{
    font-size: 12px;
    font-weight: bold;
    color: rgba( 0, 0, 0, .7 ); 
    padding: 0 75px 0 15px;
}
/***********************************
********************* MINI PROFILE
***********************************/
.mini-profile
{
    margin-bottom: 10px;
}
.mini-profile-info
{
    position: relative;
    padding: 5px;
}
.mini-profile-view
{
    display: block;
    color: rgba( 0, 0, 0, .5 );
    font-size: 12px;
    position: absolute;
    top: 32px;
    left: 65px;
    z-index: 1;
}
.mini-profile-name
{
    padding: 10px 5px 30px 5px;
    display: block;
    position: relative;
    z-index: 2;
}
.following-list .mini-profile-name
{
    padding: 5px 5px 5px 5px;   
}
.profile-data
{
    border-left: none;
    border-right: none;
    height: 60px;
}
.profile-data li
{
    border-right: solid 1px rgba( 69, 71, 77, .1 );
    padding: 10px 15px 2px 10px;
    float: left;
    height: 100%;
}
.profile-data li:last-child
{
    border-right: none;
}
.profile-data li a
{
    color: rgba( 0, 0, 0, .5 );
    font-size: 13px;
}
.profile-data li a:hover
{
    color: #b43e34;
}
.profile-data li a span.posts-count, .profile-data li a span.following-count, .profile-data li a span.followers-count
{
    font-weight: bold;
    display: block;
    font-size: 16px;
}
.mini-profile-actions
{
    position: relative;
    width: auto;
    display: inline-block;
}
.mini-profile-actions span
{
    color: #e34f42;
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    width: 70px;
    transition: all .2s linear;
}
.mini-profile-actions ul
{
    height: 0;
    overflow: hidden;
    position: absolute;
    transition: height .2s linear;
    background: #fff;
    z-index: 3;
}
.mini-profile-actions:hover span
{
}
.mini-profile-actions:hover span:after
{
}
.mini-profile-actions:hover ul
{
    height: 118px;
    box-shadow: 0 2px 5px #65686f;
}
.mini-profile-actions ul li
{
    white-space: nowrap;
    color: rgba( 0, 0, 0, .7 );
    font-size: 13px;
    cursor: pointer;
    padding: 5px;
    margin: 2px;
}
.mini-profile-actions ul li + li
{
    margin: 0 2px;  
}
.mini-profile-actions:hover ul li:hover
{
    background: rgba( 0, 0, 0, .7 );
    color: #fff;    
}
.mini-profile-info a:hover
{
    text-decoration: none;
}
/***********************************
********************* POST AREA ****
***********************************/
.post-area-new {
    padding-bottom: 4px;
}
.post-area-new textarea
{
    resize: none;
    width: 445px;
    display: block;
    transition: all .3s linear;
    height: 28px;
    border-radius: 3px;
    border: solid 1px rgba(0, 0, 0, .3 );
    margin-left: 55px;
    margin-bottom: 10px;
    padding: 4px;
    font-size: 13px;
}
.mini-profile .post-area-new
{
    padding: 9px;
}
.mini-profile .post-area-new textarea
{
    margin-left: 0;
    width: 100%;
}
.post-area-new.open textarea
{
    height: 80px;
    border: solid 1px rgba( 227, 79, 66, .5 );
    box-shadow: 0 0 10px rgba(0, 0, 0, .3 );
}
textarea.splited-post {
    box-shadow: none!important;
    animation-name: sent-part;
    animation-duration: 0,5s;
    animation-easing-function: linear;
    -webkit-animation-name: sent-part;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-easing-function: linear;
    -moz-animation-name: sent-part;
    -moz-animation-duration: 0.5s;
    -moz-animation-easing-function: linear;
}
@keyframes sent-part {
    from {
        height: 0px;
    }
    to {
        height: 80px;
    }
}
.post-area-extras
{
    overflow: hidden;
    height: 0;
    text-align: right;
}
.post-submit
{
    background: #45474d;
    color: rgba( 255, 255, 255, .8 );
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    display: inline-block;
    margin-top: 4px;
}
.post-area-new.open > .post-area-extras
{
    height: 35px;
    transition: all .6s linear;
}
.post-area-remaining
{
    font-size: 13px;
}
.post-area-remaining.warn
{
    color: #ff0000;
}
/***********************************
********************* WHO TO FOLLOW
***********************************/
.who-to-follow
{
    padding: 10px;
}
.who-to-follow h3
{
    display: inline;
}
.twister-user
{
    clear: both;
    padding-bottom: 10px;
    margin-top: 4px;
    border-bottom: solid 1px rgba( 69, 71, 77, .1 );
    border-top: solid 1px rgba( 69, 71, 77, .1 );
}
.twister-user + .twister-user
{
    border-top: none;
}
.twister-user-photo
{
    margin: 5px;
    display: inline-block;
    float: left;
    vertical-align: middle;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 20%;
    /*transform: rotate( 45deg );*/
}
.twister-user-info
{
  position: relative;
}
.twister-user-info span
{
    vertical-align: top;
}
.followers
{
    font-size: 12px;
    color: rgba( 0, 0, 0, .6 );
}
.followed-by
{
    color: #e34f42;
    font-size: 13px;
    cursor: pointer;
}
.twister-user-name,
.twister-by-user-name
{
    font-weight: bold;
    font-size: 14px;
    color: #e34f42;
    text-decoration: none;
}
.twister-user-tag
{
    font-style: italic;
    font-size: 12px;
    opacity: .6;
    margin-top: 4px;
    display: inline-block;
    letter-spacing: 0px;
}
.twister-user-remove
{
    float: right;
    font-size: 12px;
    margin: 5px;
    opacity: .5;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 120%;
}
.twister-user-remove:hover
{
    opacity: 1;
    text-decoration: none;
}
.follow
{
    background: none;
    border: solid 1px rgba( 0, 0, 0 ,.2 );
    padding: 3px 15px;
    color: rgba( 0, 0, 0 ,.4 );
}
.follow:hover
{
    color: rgba( 0, 0, 0 ,.7 );
}
.refresh-users,
.view-all-users
{
    color: #e34f42;
    cursor: pointer;
    font-size: 12px;
    border-left: solid 1px rgba( 69, 71, 77, .1 );
    padding-left: 8px;
}
/***********************************
********************* POST BOARD ***
***********************************/
.postboard
{
    margin-left: 335px;
    /*height: 150%;*/
    background: rgba( 255, 255, 255, .5 );
    border: solid 1px rgba( 69, 71, 77, .05 );
    padding: 10px;
}
.postboard h2
{
    font-weight: bold;
    line-height: 40px;
    color: rgba( 255, 255, 255, 1 );
    font-variant: small-caps;
    border-bottom: solid 1px rgba( 69, 71, 77, .1 );
    margin: 0 0 5px 0;
    padding-left: 5px;
    background: #e34f42;
    width: 513px;
}
.postboard h2.fixed
{
    z-index: 2;
    border-top: solid 4px #fbf9f6;
}
.postboard-posts
{
    position: relative;
    z-index: 1;
}
.postboard-news
{
    float: right;
    background: rgba( 0, 0, 0, .2 );
    border: none;
    display: inline-block;
    margin: 0;
    color: rgba( 255, 255, 255, .8 );
    padding: 0 15px;
    line-height: 40px;
    cursor: pointer;
    transition: all .2s linear;
    -moz-transition: all .2s linear;
}
.postboard-news:hover
{
    color: #fff;
    padding: 0 15px 0 25px;
}
.post,
.post .post,
.post .original.post,
.post .post.open
{
    background: #fff;
    position: relative;
    margin: 0 0 1px 0;
    transition: background .1s linear;
    -moz-transition: background .1s linear;
}
.post.open
{
    margin: 10px 0;
}
.postboard-posts > .post.open
{
    /*border-left: none;
    border-right: none;
    border-top: solid 2px #e34f42;
    border-bottom: solid 2px #e34f42;*/
    border: none;
}
.postboard-posts > .post:after
{
    content: "";    
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #e34f42;
    transition: all .2s linear;
}
.postboard-posts > .post.open:after
{
    width: 5px;
    /*right: -5px;*/
}
.post:hover,
.post .post
{
    background: #ececed;
}
.post:hover
{
    cursor: pointer;
}
.post.open:hover
{
    background: #fff;
}
.post-photo,
.mini-profile-photo
{
    margin: 5px;
    display: inline-block;
    float: left;
    vertical-align: middle;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 20%;
    /*transform: rotate( 45deg );*/
}
.post-photo img,
.mini-profile-photo img
{
    width: 48px;
    height: 48px;
}
.post-info span
{
    vertical-align: top;
}
.post-info-name,
.mini-profile-name
{
    font-weight: bold;
    font-size: 14px;
    color: #e34f42;
    text-decoration: none;
    padding-left: 2px;
}
.post-info-tag
{
    font-style: italic;
    font-size: 12px;
    opacity: .6;
    margin-top: 4px;
    display: inline-block;
    letter-spacing: 0px;
}
.post-info-time
{
    float: right;
    font-size: 12px;
    margin: 5px;
    opacity: .5;
    text-decoration: none;
}
.post-text
{
    font-size: 13px;
    margin: 2px 10px 4px 60px;
    word-wrap: break-word;
}
.post-context
{
    font-size: 11px;
    margin: 2px 10px 4px 60px;
}
.post-text a,
.post-context a,
.mini-screen-name
{
    color: #e34f42;
}
.mini-screen-name
{
    font-size: 13px;
    top: 40px;
}
.post-retransmited-icon
{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../img/repost.png) no-repeat left center;
    vertical-align: middle;
}
.post-interactions
{
    margin: 2px 10px 10px 60px;
    text-align: right;
    height: 23px;
}
.post-interactions span,
.post-expand
{
    color: #e34f42;
    cursor: pointer;
    font-size: 12px;
}
.post-expand
{
    position: absolute;
    left: 60px;
    padding-top: 3px;
}
.related .post-expand
{
    display: none;
}
.post-reply,
.post-propagate,
.post-favorite
{
    background: url(../img/reply.png) no-repeat left center;
    padding-left: 18px;
    margin-right: 3px;
    opacity: .7;
    display: none;
}
.post:hover .post-reply,
.post:hover .post-propagate,
.post:hover .post-favorite,
.original.open .post-interactions .post-reply,
.original.open .post-interactions .post-propagate,
.original.open .post-interactions .post-favorite,
.post:hover .original .post-interactions .post-reply,
.post:hover .original .post-interactions .post-propagate,
.post:hover .original .post-interactions .post-favorite
{
    display: inline-block;
}
.related.post:hover .post-reply,
.related.post:hover .post-propagate,
.related.post:hover .post-favorite
{
    display: inline-block;
}
.open .related .post-reply,
.open .related .post-propagate,
.open .related .post-favorite
{
    display: none!important;
}
.open .related:hover .post-reply,
.open .related:hover .post-propagate,
.open .related:hover .post-favorite
{
    display: inline-block!important;
}
.post-propagate
{
    background: url(../img/repost.png) no-repeat left center;
}
.post-favorite
{
    background: none;
    padding-left: 0;
}
.post-favorite:before
{
    content: "★";
}
.post-reply:hover,
.post-propagate:hover,
.post-favorite:hover
{
    text-decoration: underline;
    opacity: 1;
}
.expanded-content
{
    display: none;
    padding: 5px 5px 0 5px;
}
.image-preview
{
    max-height: 500px;
    max-width: 530px;
    width: auto;
    display: block;
    margin: 0 auto;
}
.preview-container
{
    max-height: 500px;
    width: 100%;
    text-align: center;
    overflow-y: auto;
}
.post-stats
{
    margin: 0 10px 0 55px;
    border-top: solid 1px rgba( 69, 71, 77, .1 );
    border-bottom: solid 1px rgba( 69, 71, 77, .1 );
}
.post-stats li
{
    display: inline-block;
}
.post-stats li.stat-count
{
    border-right: solid 1px rgba( 69, 71, 77, .1 );
    padding-right: 10px;
}
.post-stats li.stat-count span
{
    display: block;
    font-weight: bold;
    color: rgba( 0, 0, 0, .5 );
    font-size: 13px;
}
.post-stats li.stat-count span:last-child
{
    font-weight: normal;
}
.post-stats a
{
    position: relative;
}
.post-stats a img
{
    width: 24px;
    height: 24px;
    border-radius: 100%;
}
.user-name-tooltip
{
    display: none;
    position: absolute;
    background: #e34f42;
    font-size: 12px;
    white-space: nowrap;
    padding: 3px 5px;
    color: #fff;
    top: -42px;
    left: 0px;
    border-radius: 5px;
}
.user-name-tooltip:after
{
    content: "";
    position: absolute;
    width: 0;
    left: 4px;
    bottom: -5px;
    border-top: solid 5px #e34f42;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
}
.post-stats a:hover .user-name-tooltip
{
    display: inline-block;
}
/***********************************
******** LOGIN AND NETWORK PAGES ***
***********************************/
.singleBlock
{
    background: rgba( 255, 255, 255, .5 );
    border: solid 1px rgba( 69, 71, 77, .05 );
    padding: 10px;
}
.singleBlock h2
{
    font-weight: bold;
    line-height: 40px;
    color: rgba( 255, 255, 255, 1 );
    font-variant: small-caps;
    border-bottom: solid 1px rgba( 69, 71, 77, .1 );
    margin: 15px 0 0 0;
    padding-left: 5px;
    background: #e34f42;
}
.singleBlock h3
{
    font-weight: bold;
    margin: 10px 20% 10px 10px;
    border-bottom: solid 1px rgba( 0, 0, 0, .2 );
    padding-bottom: 10px;
}
.network.singleBlock ul
{
    padding-left: 20px;
    margin-left: 20px;
}
.network.singleBlock ul li
{
    line-height: 36px;
    font-size: 13px;
    list-style: circle;
}
.network.singleBlock button
{
    padding: 3px 10px;
}
.network.singleBlock ul li > span
{
    font-weight: bold;
    opacity: .7;
}
.singleBlock .spam-msg
{
    resize: none;
    width: 100%;
    display: block;
    border-radius: 3px;
    padding: 4px;
    font-size: 13px;
    height: 80px;
    border: solid 1px rgba( 227, 79, 66, .5 );
    box-shadow: 0 0 10px rgba(0, 0, 0, .3 );
    line-height: 20px;
    position: relative;
    margin-left: -20px;
    margin-bottom: 10px;
}
.highlight {
    background: rgba(255, 230, 0, 0.5);
    padding: 3px 5px;
    margin: -3px -5px;
    line-height: 1.7;
    border-radius: 3px;
    display:inline-block;
}
.connection-status
{
    border: 2px solid red;
}
.connection-status.connected
{
    border: 2px solid green;
}
.character-limit
{
    float: right;
    margin-right: 18px;
}
/*************************************
**************************** POPUP MODAL
**************************************/
.modal-blackout
{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba( 0, 0, 0, .6 );
    display: none;
    z-index: 3;
}
.modal-blackout.reply .post
{
    background: #ececed;
    padding: 10px 15px; 
}
.modal-wrapper
{
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba( 255, 255, 255, 1.0 );
    box-shadow: 0 0 30px rgba( 0, 0, 0, .6 );
}
.modal-header
{
    position: relative;
}
.modal-header h3
{
    padding: 5px;
    font-weight: bold;
    background: #e34f42;
    color: #fff;
}
.modal-close
{
    position: absolute;
    right: 0;
    top: 0;
    padding: 3px 10px;
    cursor: pointer;
    color: rgba( 255, 255, 255, .7 );
    font-weight: bold;
    border-left: solid 1px rgba( 255, 255, 255, .3 );
    transition: all .1s linear; 
}
.modal-close:hover
{
    color: #fff;
    background: rgba( 0, 0, 0, .1 );
}
.modal-back {
    position: absolute;
    right: 30px;
    top: 0;
    padding: 3px 10px;
    cursor: pointer;
    color: rgba( 255, 255, 255, .7 );
    font-weight: bold;
    border-left: solid 1px rgba( 255, 255, 255, .3 );
    transition: all .1s linear;
    display: none;  
}
.modal-back:hover
{
    color: #fff;
    background: rgba( 0, 0, 0, .1 );
}
.modal-buttons
{
    padding: 10px;
    text-align: right;
}
.modal-buttons button:last-child
{
    padding: 5px 20px;
}
/*************************************
****************** RETWIST POSTS MODAL
**************************************/
.reTwist .modal-wrapper
{
    width: 520px;
    margin: -100px 0 0 -260px;
}
.reTwist .post-expand,
.reTwist .post-interactions
{
    display: none;
}
/*************************************
****************** REPLY POSTS MODAL
**************************************/
.reply .modal-wrapper
{
    width: 520px;
    margin: -100px 0 0 -260px;
}
.reply .modal-buttons
{
    display: none;
}
.reply .post-expand,
.reply .post-interactions
{
    display: none;
}
/*************************************
****************** DIRECT MESSAGES MODAL
**************************************/
.directMessages .modal-wrapper
{
    width: 540px;
    height: 470px;
    margin: -200px 0 0 -280px;
    overflow-x: hidden;
}
.directMessages .modal-content
{
    overflow-y: auto;
    height: 300px;
}
.directMessages .modal-buttons
{
    display: none;
}
.direct-messages-list .post
{
    padding: 10px 30px 10px 15px;
    cursor: pointer;
}
.direct-messages-list .post:after
{
    content: "►";
    position: absolute;
    right: 10px;
    top: 50%;
    margin: -6px 0 0 0;
    color: rgba( 0, 0, 0, .4 );
}
.direct-messages-thread
{
    padding: 10px;
}
.direct-messages-thread .post
{
    min-height: 82px;
    margin-left: 65px;
}
.direct-messages-thread .post:after,
.direct-messages-thread .post:nth-child(2n):after
{
    content: "";
    width: 1px;
    background: transparent;
    position: absolute;
    top: 25px;
}
.direct-messages-thread .post:after
{
    border-top: solid 10px transparent;
    border-bottom: solid 10px transparent;
    border-right: solid 10px #ececed;
    left: -10px;
}
.direct-messages-thread .post-text
{
    margin: 2px 10px 4px 4px;
    word-wrap: break-word;
}
.direct-messages-thread .post-photo
{
    position: absolute;
    left: -65px;
}
.direct-messages-thread .post.sent
{
    margin-right: 60px;
    margin-left: 0;
}
.direct-messages-thread .post.sent:after
{
    border-top: solid 10px transparent;
    border-bottom: solid 10px transparent;
    border-right: none;
    border-left: solid 10px #ececed;
    right: -10px;
    left: auto;
}
.direct-messages-thread .post.sent .post-text
{
    margin: 2px 10px 4px 4px;
}
.direct-messages-thread .post.sent .post-photo
{
    position: absolute;
    right: -65px;
    left: auto;
}
/*************************************
****************** NEW USER MODAL
**************************************/
.new-user .modal-wrapper
{
    width: 720px;
    height: 400px;
    margin: -200px 0 0 -280px;
    overflow-x: hidden;
    overflow-y: hidden;
}
.new-user .modal-content
{
    margin: 10px 10px 10px 10px;
}
.new-user .modal-buttons,
.new-user .modal-close
{
    display: none;
}
.new-user .text
{
    margin: 0 0 15px 0;
}
.new-user .emphasis
{
    font-size: 18px;
    text-align: center;
}
.new-user .secret-key
{
    color: rgba( .5, 0, 0, 1.0 );
    font-weight: bold;
}
/*************************************
****************** HASHTAG MODAL
**************************************/
.hashtag-modal .modal-wrapper
{
    width: 560px;
    height: 470px;
    margin: -200px 0 0 -280px;
    overflow: hidden;
}
.hashtag-modal .modal-content
{
    overflow-y: auto;
    height: 440px;
}
.hashtag-modal .modal-buttons
{
    display: none;
}
.hashtag-modal .postboard
{
    margin-left: 0;
}
/*************************************
****************** FOLLOWING MODAL
**************************************/
.following-modal .modal-wrapper
{
    width: 560px;
    height: 470px;
    margin: -200px 0 0 -280px;
    overflow-x: hidden;
}
.following-modal .modal-content
{
    padding: 15px;
    height: 400px;
    overflow-y: auto;
}
.following-modal .modal-buttons
{
    display: none;
}
.following-modal ol
{
    margin: 5px;
}
.following-modal .open-profile-modal:hover
{
    text-decoration: none;
}
.following-modal .open-profile-modal img
{
    float: none;
}
.following-modal .open-profile-modal span
{
    vertical-align: middle;
}
.following-modal .open-profile-modal span:hover
{
    text-decoration: underline;
}
/*************************************
****************** LOADER ************
**************************************/
.postboard-loading
{
    text-align: right;
}
.postboard-loading div
{
    display: inline-block;
    width: 120px;
    height: 10px;
    background-color: #b43e34;
    border-radius: 100px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05);
    position: relative;
    margin: 10px 0 0 0;
}
.postboard-loading div:after
{
    border-radius: 50px;
    content: "";
    position: absolute;
    background-color: white;
    left: 2px;
    top: 2px;
    bottom: 2px;
    z-index: 999;
    animation-name: slide;
    animation-duration: 1.5s;
    animation-easing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: slide;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-easing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: slide;
    -moz-animation-duration: 1.5s;
    -moz-animation-easing-function: linear;
    -moz-animation-iteration-count: infinite;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
@keyframes slide 
{
  0% {
    right: 60px;
    left: 2px;
  }

  5% {
    left: 2px;
  }

  50% {
    right: 2px;
    left: 60px;
  }

  55% {
    right: 2px;
  }

  100% {
    right: 60px;
    left: 2px;
  }
}
@-webkit-keyframes slide
{
  0% {
    right: 100px;
    left: 2px;
  }

  5% {
    left: 2px;
  }

  50% {
    right: 2px;
    left: 100px;
  }

  55% {
    right: 2px;
  }

  100% {
    right: 100px;
    left: 2px;
  }
}
@-moz-keyframes slide
{
  0% {
    right: 60px;
    left: 2px;
  }

  5% {
    left: 2px;
  }

  50% {
    right: 2px;
    left: 60px;
  }

  55% {
    right: 2px;
  }

  100% {
    right: 60px;
    left: 2px;
  }
}

/* Options */
#playerVol {
    float: right;
    margin-right: 20px;
}
.volValue {
    float: right;
    margin-right: -163px;
    font: 12px "Open Sans", sans-serif;
}
#notifyForm p, #choseLanguage p, #keysOpt p {
    margin-top: 15px;
}
.suboptions {
    margin: 5px 30px;
    border: double 2px rgba( 69, 71, 77, .1 );
    height: 0px;
    overflow: hidden;
    transition: height 1s linear;
    -webkit-transition: height 1s linear;
    -moz-transition: height 1s linear;
    -o-transition: height 1s linear;
    -ms-transition: height 1s linear;
}

/* Autocomplite*/
.textcomplete-wrapper textarea {
    display: inline;
}
ul.dropdown-menu {
    position: absolute;
    top: 23px;
    left: 170px;
    z-index: 100;
    display: block;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(0,0,0, .2);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0, .2);
    box-shadow: 0 5px 10px rgba(0,0,0, .2);

}
ul.dropdown-menu li {
    line-height: 20px;

}
ul.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font: 13px/20px "Open Sans", sans-serif;
    white-space: nowrap;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}