/*

Jappix - An open social platform
This is the fonts CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

@font-face {
    font-family: 'PT Sans';
    src: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=eot/ptsans.eot);
    src: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=eot/ptsans.eot#iefix) format('embedded-opentype'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=woff/ptsans.woff) format('woff'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=ttf/ptsans.ttf) format('truetype'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=svg/ptsans.svg#pt_sansregular) format('svg');
}

@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    src: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=eot/ptsansitalic.eot);
    src: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=eot/ptsansitalic.eot#iefix) format('embedded-opentype'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=woff/ptsansitalic.woff) format('woff'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=ttf/ptsansitalic.ttf) format('truetype'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=svg/ptsansitalic.svg#pt_sansitalic) format('svg');
}

@font-face {
    font-family: 'PT Sans';
    font-weight: bold;
    src: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=eot/ptsansbold.eot);
    src: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=eot/ptsansbold.eot#iefix) format('embedded-opentype'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=woff/ptsansbold.woff) format('woff'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=ttf/ptsansbold.ttf) format('truetype'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=svg/ptsansbold.svg#pt_sansbold) format('svg');
}

@font-face {
    font-family: 'PT Sans';
    font-weight: bold;
    font-style: italic;
    src: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=eot/ptsansbolditalic.eot);
    src: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=eot/ptsansbolditalic.eot#iefix) format('embedded-opentype'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=woff/ptsansbolditalic.woff) format('woff'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=ttf/ptsansbolditalic.ttf) format('truetype'),
         url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=fonts&f=svg/ptsansbolditalic.svg#pt_sansbold_italic) format('svg');
}
/*

Jappix - An open social platform
This is the main CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

* {
    margin: 0;
    padding: 0;
}

body {
    font: normal 14.6px 'PT Sans', sans-serif;
    text-shadow: 0 0 5px white;
}

h1 {
    margin-bottom: 15px;
}

a {
    text-decoration: none;
    color: black;
    outline-style: none;
}

a:hover,
a:focus {
    cursor: pointer;
    text-decoration: underline;
}

legend {
    color: black;
}

input,
textarea {
    background-color: white;
    border: 1px solid #636363;
    font-size: 0.95em;
    padding: 2px;
    outline-style: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: inset 0 3px 10px #dcdcdc;
    -webkit-box-shadow: inset 0 3px 10px #dcdcdc;
    box-shadow: inset 0 3px 10px #dcdcdc;
}

textarea {
    font-size: 1.1em;
    resize: none;
}

input:focus,
input[type="submit"]:hover,
input[type="reset"]:hover,
textarea:focus {
    border: 1px solid #e1a014;
    -moz-box-shadow: inset 0 3px 10px #edd9bc;
    -webkit-box-shadow: inset 0 3px 10px #edd9bc;
    box-shadow: inset 0 3px 10px #edd9bc;
}

input[type="submit"],
input[type="reset"] {
    cursor: pointer;
}

input[type="submit"]:active,
input[type="reset"]:active {
    -moz-box-shadow: inset 0 3px 15px #e1a753;
    -webkit-box-shadow: inset 0 3px 15px #e1a753;
    box-shadow: inset 0 3px 15px #e1a753;
}

input[disabled],
textarea[disabled] {
    background-color: #f3f3f3;
    border: 1px solid #989898;
}

input:placeholder {
    color: #78868a !important;
}

input:-moz-placeholder {
    color: #78868a !important;
}

input::-webkit-input-placeholder {
    color: #78868a !important;
}

input.placeholder {
    color: #78868a !important;
}

input[type="checkbox"] {
    margin-top: 2px;
}

input[type="checkbox"],
input[type="radio"] {
    background: transparent none !important;
    border: 0 none !important;
}

input.input-reset {
    background: transparent;
    border: 0 none;
    margin: 0;
    padding: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.please-complete,
.please-complete:hover,
.please-complete:focus {
    border: 1px #ac2525 solid !important;
    -moz-box-shadow: inset 0 3px 10px #f39c9c !important;
    -webkit-box-shadow: inset 0 3px 10px #f39c9c !important;
    box-shadow: inset 0 3px 10px #f39c9c !important;
}

.hidden {
    display: none !important;
}

.clear {
    clear: both !important;
    display: block !important;
}

/*

Jappix - An open social platform
This is the images CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

.body-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/background.png);
    background-repeat: repeat;
    background-color: #93c5fa;
}

.install-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/install.png);
    background-repeat: no-repeat;
}

.home-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/home.png);
    background-repeat: no-repeat;
}

.browsers-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/browsers.png);
    background-repeat: no-repeat;
}

.buttons-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/buttons.png);
    background-repeat: repeat-x;
}

.talk-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/talk.png);
    background-repeat: no-repeat;
}

.smileys-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/smileys.png);
    background-repeat: no-repeat;
}

.welcome-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/welcome.png);
    background-repeat: no-repeat;
}

.me-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/me.png);
    background-repeat: no-repeat;
}

.call-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/call.png);
    background-repeat: no-repeat;
}

.manager-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/manager.png);
    background-repeat: no-repeat;
}

.mobile-images {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=sprites/mobile.png);
    background-repeat: no-repeat;
}

.wait-small {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=wait/wait-small.gif);
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
}

.wait-medium {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=wait/wait-medium.png);
    background-repeat: no-repeat;
    height: 24px;
    width: 24px;
}

.wait-big {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=wait/wait-big.gif);
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
}

.wait-typing {
    background-image: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=wait/wait-typing.gif);
    background-repeat: no-repeat;
    height: 4px;
    width: 16px;
}
/*

Jappix - An open social platform
This is the board CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#board .one-board {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 10000;
    font-size: 0.92em;
    padding: 6px 8px 5px 8px;
    -moz-box-shadow: 0 0 8px #5c5c5c;
    -webkit-box-shadow: 0 0 8px #5c5c5c;
    box-shadow: 0 0 8px #5c5c5c;
}

#board .one-board:hover {
    cursor: pointer;
}

#board .one-board.visible {
    display: block;
}

#board .one-board.error {
    background-color: rgb(241,160,160);
    background-color: rgba(241,160,160,0.9);
    color: #420c0c;
}

#board .one-board.info {
    background-color: rgb(248,246,186);
    background-color: rgba(248,246,186,0.9);
    color: #2f2a02;
}

/*

Jappix - An open social platform
This is the home CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#home {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 550px;
    min-width: 875px;
}

#home .corporation,
#home .corporation .corp_network,
#home .aboutus,
#home .aboutus .aboutus_org,
#home .locale,
#home .obsolete {
    background-color: rgb(20,20,20);
    background-color: rgba(20,20,20,0.70);
    color: white;
    position: absolute;
    top: 0;
    text-shadow: 0 0 1px black;
    z-index: 100;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

#home .corporation,
#home .aboutus {
    height: 26px;
    width: 34px;
}

#home .corporation {
    background-position: 9px -120px;
    left: 12px;
}

html[dir="rtl"] #home .corporation {
    left: auto;
    right: 12px;
}

#home .aboutus {
    background-position: 9px -351px;
    left: 52px;
}

html[dir="rtl"] #home .aboutus {
    left: auto;
    right: 52px;
}

#home .corporation.hovered,
#home .aboutus.hovered {
    height: 28px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

#home .corporation .corp_network,
#home .aboutus .aboutus_org {
    width: 180px;
    padding: 10px 12px;
    top: 28px;
    left: 0;
    display: none;
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
}

html[dir="rtl"] #home .corporation .corp_network,
html[dir="rtl"] #home .aboutus .aboutus_org {
    left: auto;
    right: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-top-left-radius: 3px;
    border-top-right-radius: 0;
    border-top-left-radius: 3px;
}

#home .corporation.hovered .corp_network,
#home .aboutus.hovered .aboutus_org {
    display: block;
}

#home .corporation .corp_network h2,
#home .aboutus .aboutus_org h2 {
    font-size: 1.1em;
    margin: 12px 0 4px 0;
}

#home .corporation .corp_network h2.nomargin {
    margin-top: 0;
}

#home .aboutus.hovered .aboutus_org span.version {
    font-size: 0.8em;
    display: block;
}

#home .corporation .corp_network a,
#home .aboutus .aboutus_org span.one {
    margin: 2px 0;
    padding: 2px 6px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

#home .aboutus .aboutus_org span.one {
    display: block;
}

#home .corporation .corp_network a span,
#home .aboutus .aboutus_org span.one a.name,
#home .aboutus .aboutus_org span.one a.desc {
    margin: 2px 0;
    display: block;
}

#home .corporation .corp_network a span.name,
#home .aboutus .aboutus_org span.one a.name {
    font-weight: bold;
    font-size: 0.9em;
}

#home .corporation .corp_network a span.desc,
#home .aboutus .aboutus_org span.one a.desc {
    font-size: 0.7em;
    margin-left: 2px;
}

#home .locale {
    left: 92px;
    font-size: 0.85em;
}

html[dir="rtl"] #home .locale {
    left: auto;
    right: 92px;
}

#home .locale .current {
    height: 19px;
    padding: 3px 12px 4px 12px;
    font-weight: bold;
}

#home .locale .current:hover {
    cursor: default;
}

#home .locale .current .current_align {
    height: 19px;
    vertical-align: middle;
    display: table-cell;
}

#home .locale .list {
    margin: 2px 0 2px;
}

#home .locale .list a,
#home .corporation .corp_network a,
#home .aboutus .aboutus_org a {
    color: white;
    text-decoration: none;
    display: block;
}

#home .locale .list a {
    padding: 3px 10px;
}

#home .locale .list a:hover,
#home .locale .list a:focus,
#home .corporation .corp_network a:hover,
#home .corporation .corp_network a:focus,
#home .aboutus .aboutus_org span.one:hover {
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.1);
}

#home .locale .list a:hover,
#home .locale .list a:focus,
#home .corporation .corp_network a:hover,
#home .corporation .corp_network a:focus {
    cursor: pointer;
}

#home .locale .list a:active,
#home .corporation .corp_network a:active,
#home .aboutus .aboutus_org span.one:active {
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.14);
}

#home .obsolete {
    height: 60px;
    padding: 4px 10px;
    right: 12px;
    font-size: 0.9em;
    font-weight: bold;
    display: none;
}

html[dir="rtl"] #home .obsolete {
    right: auto;
    left: 12px;
}

#home .obsolete a {
    height: 33px;
    width: 33px;
    margin: 5px 2px 0 0;
    float: left;
}

html[dir="rtl"] #home .obsolete a {
    margin-right: 0;
    margin-left: 2px;
    float: right;
}

#home .obsolete a:hover,
#home .obsolete a:focus {
    opacity: 0.8;
}

#home .obsolete a:active {
    opacity: 0.6;
}

#home .obsolete a.firefox {
    background-position: 1px 0;
}

#home .obsolete a.chrome {
    background-position: -34px 0;
}

#home .obsolete a.safari {
    background-position: -68px 0;
}

#home .obsolete a.opera {
    background-position: -101px 0;
}

#home .obsolete a.ie {
    background-position: -135px 0;
}

#home .plane {
    background-position: 0 -432px;
    width: 507px;
    height: 328px;
    position: absolute;
    left: 0;
    top: 60px;
}

#home .main {
    position: absolute;
    top: 50%;
    margin-top: -200px;
    width: 800px;
    height: 400px;
    left: 50%;
    margin-left: -400px;
    z-index: 50;
}

#home .mainview {
    background-color: rgb(20,20,20);
    background-color: rgba(20,20,20,0.85);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 0 35px #5c5c5c;
    -webkit-box-shadow: 0 0 35px #5c5c5c;
    box-shadow: 0 0 35px #5c5c5c;
}

#home .left {
    float: left;
    width: 350px;
    height: 370px;
    margin: 15px 0 15px 15px;
    color: white;
    text-align: center;
    text-shadow: 0 1px 1px black;
}

html[dir="rtl"] #home .left {
    margin-left: 0;
    margin-right: 15px;
    float: right;
}

#home .left .logo {
    background-position: 0 0;
    float: left;
    margin: 30px 0 35px 30px;
    width: 291px;
    height: 86px;
}

#home .left p.upper {
    font-weight: bold;
    margin: 12px 0 35px 0;
}

#home .left p.secondary {
    margin: 8px 0 0 16px;
    font-size: 0.9em;
    width: 320px;
}

html[dir="rtl"] #home .left p.secondary {
    margin-left: auto;
    margin-right: 16px;
}

#home .right {
    background: #e4eef9;
    background: -moz-linear-gradient(top, #e4eef9, #c5e1ff);
    background: -webkit-gradient(linear, left top, left bottom, from(#e4eef9), to(#c5e1ff));
    background: -webkit-linear-gradient(top, #e4eef9 0%, #c5e1ff 100%);
    background: -o-linear-gradient(top, #e4eef9 0%, #c5e1ff 100%);
    float: right;
    width: 385px;
    height: 350px;
    margin: 15px 15px 15px 0;
    padding: 10px;
    font-size: 13.4px;
    text-align: justify;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 20px black;
    -webkit-box-shadow: 0 0 20px black;
    box-shadow: 0 0 20px black;
}

html[dir="rtl"] #home .right {
    float: left;
    margin-right: 0;
    margin-left: 15px;
}

#home .right h1 {
    font-size: 16px;
    padding-bottom: 4px;
    border-bottom: 1px black dotted;
}

#home .right p {
    margin-bottom: 4px;
}

#home .right p a {
    border-width: 0 0 1px 0;
    border-style: dotted;
    border-color: black;
}

#home .right p a:hover,
#home .right p a:focus {
    border-style: solid;
    text-decoration: none;
}

#home .right button {
    display: block;
    margin-left: 22px;
    width: 342px;
    height: 64px;
    text-decoration: none;
    font-weight: bold;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

#home .right button:focus {
    outline: 0 none;
}

html[dir="rtl"] #home .right button {
    margin-right: 21px;
    margin-left: auto;
}

#home .right button:hover {
    cursor: pointer;
}

#home .right button span {
    float: left;
}

html[dir="rtl"] #home .right button span {
    float: right;
}

#home .right button span.home-images {
    height: 16px;
    width: 16px;
    margin: 4px 7px 7px 24px;
}

html[dir="rtl"] #home .right button span.home-images {
    margin-right: 24px;
    margin-left: 7px;
}

#home .right button span.text {
    padding-left: 20px;
    font-size: 1.5em;
}

html[dir="rtl"] #home .right button span.text {
    padding-left: 0;
    padding-right: 20px;
}

#home .right .login {
    background-color: #72d071;
    background-position: 0 0;
    border: 1px solid #5cb55c;
    margin-top: 22px;
    -moz-box-shadow: 0 0 6px #89e389;
    -webkit-box-shadow: 0 0 6px #89e389;
    box-shadow: 0 0 6px #89e389;
}

#home .right .login:hover,
#home .right .login:focus {
    border: 1px solid #419141;
    -moz-box-shadow: 0 0 10px #72d071;
    -webkit-box-shadow: 0 0 10px #72d071;
    box-shadow: 0 0 10px #72d071;
}

#home .right .login:active {
    background-color: #97e896;
    background-position: 0 -80px;
}

#home .right .login span.text {
    color: #2d612d;
    text-shadow: 1px 1px 1px #5cb55c;
}

#home .right .login span.home-images {
    background-position: 0 -230px;
}

#home .right .register {
    background-color: #f6ef82;
    background-position: 0 -160px;
    border: 1px solid #e3db56;
    margin-top: 15px;
    -moz-box-shadow: 0 0 6px #f1e968;
    -webkit-box-shadow: 0 0 6px #f1e968;
    box-shadow: 0 0 6px #f1e968;
}

#home .right .register:hover,
#home .right .register:focus {
    border: 1px solid #d2c93f;
    -moz-box-shadow: 0 0 10px #e0d743;
    -webkit-box-shadow: 0 0 10px #e0d743;
    box-shadow: 0 0 10px #e0d743;
}

#home .right .register:active {
    background-color: #fdf7af;
    background-position: 0 -240px;
}

#home .right .register span.text {
    color: #6d6813;
    text-shadow: 1px 1px 1px #dbd56e;
}

#home .right .register span.home-images {
    background-position: 0 -204px;
}

#home .right p.notice {
    margin-top: 24px;
    font-size: 0.9em;
    font-weight: bold;
}

#home .right .navigation {
    clear: both;
    width: 385px;
    border-top: 1px black dotted;
    position: absolute;
    text-align: right;
    bottom: 25px;
    right: 25px;
    padding-top: 6px;
}

html[dir="rtl"] #home .right .navigation {
    right: auto;
    left: 25px;
}

#home .right .navigation a {
    margin-left: 10px;
    color: black;
    text-decoration: none;
    font-size: 0.9em;
    height: 16px;
    padding-left: 21px;
    float: right;
}

html[dir="rtl"] #home .right .navigation a {
    margin-left: 0;
    margin-right: 10px;
    float: left;
}

#home .right .navigation a:hover,
#home .right .navigation a:focus {
    text-decoration: underline;
}

#home .right .navigation a.unencrypted {
    background-position: 0 -256px;
}

#home .right .navigation a.encrypted {
    background-position: 0 -282px;
}

#home .right .navigation a.manager {
    background-position: 0 -152px;
}

#home .right .navigation a.mobile {
    background-position: 0 -178px;
}

#home .right .navigation a span.vert_center {
    height: 16px;
    vertical-align: middle;
    display: table-cell;
}

#home .friendsview {
    height: 65px;
    position: absolute;
    bottom: -65px;
    left: 15px;
    right: 15px;
    z-index: 1;
    opacity: 0.8;
}

#home .friendsview .friends {
    background: #e4eef9;
    background: -moz-linear-gradient(top, #e4eef9, #c5e1ff);
    background: -webkit-gradient(linear, left top, left bottom, from(#e4eef9), to(#c5e1ff));
    background: -webkit-linear-gradient(top, #e4eef9 0%, #c5e1ff 100%);
    background: -o-linear-gradient(top, #e4eef9 0%, #c5e1ff 100%);
    font-size: 11px !important;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -moz-box-shadow: 0 0 10px black;
    -webkit-box-shadow: 0 0 10px black;
    box-shadow: 0 0 10px black;
}

#home .friendsview .friends,
#home .friendsview .friends a {
    color: black;
}

#home .friendsview .friends .group {
    display: block;
    position: absolute;
    top: 10px;
    bottom: 10px;
}

#home .friendsview .friends .group.content {
    width: 340px;
    left: 10px;
}

#home .friendsview .friends .group.standard {
    width: 289px;
    padding-left: 10px;
    left: 360px;
}

#home .friendsview .friends .group.content table,
#home .friendsview .friends .group.standard table {
    margin-top: -4px;
}

#home .friendsview .friends .group.content table a,
#home .friendsview .friends .group.standard table a {
    text-decoration: underline;
}

#home .friendsview .friends .group.content table td {
    padding-top: 3px;
}

#home .friendsview .friends .group.content a.available_space,
#home .friendsview .friends .group.standard a.available_space,
#home .friendsview .friends a.group.refer {
    opacity: 0.75;
    -webkit-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    -o-transition: 0.3s linear;
    transition: 0.3s linear;
}

#home .friendsview .friends .group.content a.available_space:hover,
#home .friendsview .friends .group.content a.available_space:focus,
#home .friendsview .friends .group.standard a.available_space:hover,
#home .friendsview .friends .group.standard a.available_space:focus,
#home .friendsview .friends a.group.refer:hover,
#home .friendsview .friends a.group.refer:focus {
    opacity: 1;
}

#home .friendsview .friends .group.content a.available_space,
#home .friendsview .friends .group.standard a.available_space {
    border: 1px dashed #909090;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    padding-top: 14px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#home .friendsview .friends .group.standard a.available_space {
    left: 10px;
}

#home .friendsview .friends .group.standard br {
    display: none;
}

#home .friendsview .friends .group.standard a {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 1px;
    float: left;
    width: 50%;
}

#home .friendsview .friends .group.standard a:nth-child(even) {
    float: right;
}

#home .friendsview .friends a.group.refer {
    width: 81px;
    padding-left: 10px;
    right: 10px;
}

#home .friendsview .friends a.group.refer span {
    display: block;
}

#home .friendsview .friends a.group.refer span.icon {
    background-position: 0 -385px;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    -webkit-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    -o-transition: 0.3s linear;
    transition: 0.3s linear;
}

#home .friendsview .friends a.group.refer:hover span.icon,
#home .friendsview .friends a.group.refer:focus span.icon {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

#home .friendsview .friends a.group.refer span.label {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin-top: 6px;
}

#home .friendsview .friends .group .separator,
#home .friendsview .friends .group .separator .sep_top,
#home .friendsview .friends .group .separator .sep_bottom {
    position: absolute;
}

#home .friendsview .friends .group .separator {
    width: 1px;
    top: 0;
    bottom: 0;
    left: -1px;
}

#home .friendsview .friends .group .separator .sep_top,
#home .friendsview .friends .group .separator .sep_bottom {
    height: 50%;
    left: 0;
    right: 0;
}

#home .friendsview .friends .group .separator .sep_top {
    background: #eeeeee;
    background: rgba(0,0,0,0.3);
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.3)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    top: 0;
}

#home .friendsview .friends .group .separator .sep_bottom {
    background: #eeeeee;
    background: rgba(0,0,0,0.3);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.3)), color-stop(100%, rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    bottom: 0;
}

#home a.advanced {
    background-position: 0 -334px;
    font-size: 0.9em;
    height: 16px;
    margin-bottom: 10px;
    padding-left: 16px;
    float: left;
}

html[dir="rtl"] #home a.advanced {
    float: right;
}

#home fieldset.advanced {
    display: none;
}

#home .anonymouser input[type="text"] {
    width: 160px;
}

#home .homediv.registerer .success a {
    font-weight: bold;
    text-decoration: underline;
}

#home fieldset {
    border: 1px solid black;
    margin: 18px 0 12px 0;
    padding: 5px 0 4px 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

html[dir="rtl"] #home fieldset {
    padding-left: 6px;
}

#home legend {
    font-size: 0.9em;
    margin: 0 0 0 15px;
    padding: 0 2px;
    text-transform: uppercase;
}

#home label {
    width: 110px;
    display: block;
    float: left;
    clear: both;
    margin: 0 0 5px 12px;
}

html[dir="rtl"] #home label {
    margin-left: auto;
    margin-right: 12px;
    float: right;
}

#home input,
#home select {
    float: left;
    margin-bottom: 5px;
}

html[dir="rtl"] #home input,
html[dir="rtl"] #home select {
    float: right;
}

#home input[type="text"],
#home input[type="password"],
#home select {
    width: 140px;
    margin-top: -2px;
}

#home .submit {
    clear: both;
}

#home input[type="submit"] {
    min-width: 120px;
    float: right;
}

#home span.jid {
    display: block;
    float: left;
    margin: 0 4px;
}

html[dir="rtl"] #home span.jid {
    float: right;
}

#home input.nick,
#home input.server,
#home input.password,
#home input.spassword {
    width: 110px;
}

#home input.password {
    margin-right: 22px;
}

html[dir="rtl"] #home input.password {
    margin-right: auto;
}

html[dir="rtl"] #home input.spassword {
    margin-right: 22px;
}

html[dir="rtl"] #home .loginer input.remember,
html[dir="rtl"] #home .loginer input.password,
html[dir="rtl"] #home .loginer input.resource,
html[dir="rtl"] #home .loginer select.priority,
html[dir="rtl"] #home .anonymouser input.room,
html[dir="rtl"] #home .anonymouser input.nick {
    float: right;
}

#home img.captcha_img {
    margin: -2px 0 0 20px;
    float: left;
}

#home .info {
    padding: 6px;
    position: absolute;
    bottom: 62px;
    right: 35px;
    border-width: 1px;
    border-style: dotted;
    clear: both;
    width: 350px;
}

html[dir="rtl"] #home .info {
    right: auto;
    left: 35px;
}

#home .info.success {
    background-color: #aee578;
    border-color: #85b05c;
    display: none;
}

#home .info.fail {
    background-color: #f19d9d;
    border-color: #b34f4f;
}

#home .info.report {
    background-color: #f3f48b;
    border-color: #c9c66b;
    display: none;
}

#home .info.report span {
    text-decoration: underline;
}

#home .notice.simple {
    background-color: rgb(20,20,20);
    background-color: rgba(20,20,20,0.7);
    color: white;
    font-size: 0.9em;
    text-decoration: none;
    text-shadow: 0 1px 0 black;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 20px;
    z-index: 100;
    -moz-box-shadow: 0 0 25px #ababab;
    -webkit-box-shadow: 0 0 25px #ababab;
    box-shadow: 0 0 25px #ababab;
}

#home .notice.simple .title {
    background-color: rgb(20,20,20);
    background-color: rgba(20,20,20,0.4);
    background-position: 8px -299px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #141414;
    font-weight: bold;
    padding: 8px 8px 8px 30px;
}

#home .notice.simple .text {
    margin-left: 20px;
}

html[dir="rtl"] #home .notice.simple .text {
    margin-left: 0;
    margin-right: 20px;
}
/*

Jappix - An open social platform
This is the others CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#audio {
    display: none;
}

#top-content {
    position: absolute;
    right: 5px;
    left: 5px;
    top: 0;
    min-width: 860px;
    z-index: 50;
}

#main-content {
    position: absolute;
    top: 34px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    min-width: 850px;
    min-height: 450px;
}

#left-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 248px;
}

html[dir="rtl"] #left-content {
    left: auto;
    right: 0;
}

#right-content,
#suggest {
    background-color: rgb(20,20,20);
    background-color: rgba(20,20,20,0.85);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 260px;
    z-index: 10;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 0 6px #5c5c5c;
    -webkit-box-shadow: 0 0 6px #5c5c5c;
    box-shadow: 0 0 6px #5c5c5c;
}

html[dir="rtl"] #right-content {
    left: 0;
    right: 260px;
}

#general-wait {
    background: url(./get.php?h=5865292e3ae610bc218714ca754c83c9&t=images&f=others/blank.gif) repeat;
    z-index: 10000;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.general-wait-content {
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.9);
    background-position: 8px 8px;
    padding: 8px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 0 2px #000;
    -webkit-box-shadow: 0 0 2px #000;
    box-shadow: 0 0 2px #000;
}

html[dir="rtl"] .general-wait-content {
    right: auto;
    left: 5px;
}

.inbox-hidable,
.options-hidable,
.pep-hidable,
.pubsub-hidable,
.pubsub-hidable-cn,
.mam-hidable,
.commands-hidable,
.privacy-hidable,
.xmpplinks-hidable,
.muji-hidable {
    display: none;
}

#reconnect .pane {
    background-color: rgb(20,20,20);
    background-color: rgba(20,20,20,0.85);
    color: white;
    padding: 25px;
    z-index: 10000;
    text-shadow: 0 1px 1px black;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    -moz-box-shadow: 0 0 35px #232323;
    -webkit-box-shadow: 0 0 35px #232323;
    box-shadow: 0 0 35px #232323;
}

#reconnect .pane a {
    margin-top: -4px;
    float: right;
}

#suggest {
    width: 350px;
    height: 350px;
    margin-top: -175px;
    margin-left: -175px;
    left: 50%;
    right: auto;
    top: 50%;
}

#suggest .title {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 2px 2px black;
    position: absolute;
    top: 14px;
    left: 18px;
    right: 18px;
}

#suggest .content {
    background: #e4eef9;
    padding: 12px 12px 0 12px;
    position: absolute;
    left: 8px;
    right: 8px;
    top: 45px;
    bottom: 52px;
    overflow: auto;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 10px black;
    -webkit-box-shadow: 0 0 10px black;
    box-shadow: 0 0 10px black;
}

#suggest .content a.one {
    background-color: #e4eef9;
    border: 1px solid #ccdbde;
    margin-bottom: 8px;
    padding: 8px 12px;
    text-decoration: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    display: block;
}

#suggest .content a.one:hover,
#suggest .content a.one:focus {
    border: 1px solid #93c5fa;
}

#suggest .content a.one:active {
    border: 1px solid #419afa;
}

#suggest .content a.one.active {
    background-color: #f1f6fd;
    border: 1px solid #9dc4fc;
}

#suggest .content a.one span.icon,
#suggest .content a.one span.state {
    height: 16px;
    width: 16px;
}

#suggest .content a.one span.icon {
    background-position: 0 -1082px;
    margin: 0 15px 0 0;
    float: left;
}

#suggest .content a.one span.name {
    font-weight: bold;
    height: 16px;
    width: 250px;
    overflow: hidden;
    float: left;
}

#suggest .content a.one span.state {
    background-position: 0 -1661px;
    margin: -6px -16px 0 0;
    display: none;
    float: right;
}

#suggest .content a.one.active span.state {
    display: block;
}

#suggest .content a.one span.clear {
    display: block;
    clear: both;
}

#suggest .bottom {
    position: absolute;
    bottom: 13px;
    right: 8px;
    left: 8px;
}

#suggest .bottom a.next {
    float: right;
}
/*

Jappix - An open social platform
This is the tools CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#top-content .tools {
    background-color: rgb(232,241,243);
    background-color: rgba(232,241,243,0.6);
    padding: 3px 8px 5px 8px;
    min-width: 10px;
    height: 17px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#top-content .tools a {
    color: black;
    padding: 0 3px;
    margin: 0 1.5px;
}

#top-content .tools a:hover,
#top-content .tools a:focus {
    cursor: pointer;
    text-decoration: underline;
}

#top-content .tools-logo {
    background-position: 9px 2px;
    width: 74px;
    float: left;
}

html[dir="rtl"] #top-content .tools-logo {
    float: right;
}

#top-content .tools-all {
    float: right;
    text-align: right;
    margin-left: 8px;
    font-size: 0.9em;
    color: black;
    position: relative;
}

html[dir="rtl"] #top-content .tools-all {
    margin-left: 0;
    margin-right: 8px;
    float: left;
}

#top-content .call {
    background-position: 7px -2114px;
    display: none;
}

#top-content .call .notify {
    margin-left: 0;
    left: -2px;
}

#top-content .call.video {
    background-position: 7px -2205px;
}

#top-content .call.active,
#top-content .call.streaming {
    display: block;
}

#top-content .call.active {
    -webkit-animation: tool_active 1.5s infinite ease-in-out;
    -moz-animation: tool_active 1.5s infinite ease-in-out;
    -o-animation: tool_active 1.5s infinite ease-in-out;
    animation: tool_active 1.5s infinite ease-in-out;
}

#top-content .call.streaming {
    padding-left: 30px;
}

#top-content .call .streaming-items {
    display: none;
}

#top-content .call.streaming .streaming-items {
    display: block;
}

#top-content .call.streaming .streaming-items .counter {
    font-size: 11px;
    font-style: italic;
    font-weight: bold;
}

#top-content .call.streaming .streaming-items a.stop {
    background: #cc283f;
    border-left: 1px solid #a12032;
    color: #ffffff;
    font-size: 10px;
    text-shadow: 0 1px 1px #521019;
    text-transform: uppercase;
    text-decoration: none;
    margin: -3px -8px 0 8px;
    padding: 5px 6px 7px 6px;
    float: right;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#top-content .call.streaming .streaming-items a.stop:active {
    background: #a92134;
    padding-top: 6px;
    padding-bottom: 6px;
    -webkit-box-shadow: 0 1px 3px #000000 inset;
    -moz-box-shadow: 0 1px 3px #000000 inset;
    box-shadow: 0 1px 3px #000000 inset;
}

#top-content .notifications {
    background-position: 7px -1264px;
}

#top-content .music {
    background-position: 6px -1286px;
}

#top-content .notifications:hover,
#top-content .music:hover,
#top-content .call.streaming.video:hover,
.in_muji_call #top-content .call.streaming.audio:hover {
    cursor: pointer;
}

#top-content .music:hover,
#top-content .notifications:hover,
#top-content .call.streaming.video:hover,
.in_muji_call #top-content .call.streaming.audio:hover,
#top-content .music:focus,
#top-content .notifications:focus,
#top-content .call.streaming.video:focus,
.in_muji_call #top-content .call.streaming.audio:focus {
    background-color: rgb(232,241,243);
    background-color: rgba(232,241,243,0.7);
}

#top-content .music:active,
#top-content .notifications:active,
#top-content .call.streaming.video:active,
.in_muji_call #top-content .call.streaming.audio:active {
    background-color: rgb(232,241,243);
    background-color: rgba(232,241,243,0.8);
}

#top-content .actived,
#top-content .actived:hover,
#top-content .actived:focus,
#top-content .actived:active {
    background-color: rgb(232,241,243) !important;
    background-color: rgba(232,241,243,0.9) !important;
}

#top-content .notify {
    background-color: #c60505;
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    margin-left: -10px;
    padding: 1px 4px;
    position: absolute;
    bottom: -2px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

html[dir="rtl"] #top-content .notify {
    margin-left: auto;
    margin-right: -10px;
}

#top-content .tools-content {
    display: none;
    position: absolute;
    top: 25px;
}

html[dir="rtl"] #top-content .tools-content {
    margin-left: 0;
    right: auto;
}

.tools-content-subarrow {
    background-position: 0 -241px;
    opacity: 0.8;
    height: 10px;
    width: 18px;
    margin: 0 auto;
    display: block;
}

.tools-content-subitem {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    padding: 14px 6px 6px 6px;
    clear: both;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.notifications-content {
    width: 240px;
    right: -107px;
}

html[dir="rtl"] .notifications-content {
    left: -107px;
}

.notifications-content .tools-content-subitem {
    max-height: 250px;
    color: white;
    text-shadow: 0 1px 1px black;
    text-align: left;
    overflow-x: none;
    overflow-y: auto;
}

html[dir="rtl"] .notifications-content .tools-content-subitem {
    text-align: right;
}

.notifications-content .empty {
    color: white;
    font-size: 0.9em;
    text-decoration: underline;
    margin: -8px 4px 2px 0;
    display: none;
    float: right;
}

.notifications-content .nothing {
    font-size: 0.9em;
    margin: 5px;
}

.notifications-content .one-notification {
    padding: 6px 4px;
    font-size: 0.85em;
    clear: both;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.notifications-content .one-notification:hover,
.notifications-content .one-notification:focus {
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.1);
}

.notifications-content .one-notification:active {
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.2);
}

.notifications-content .avatar-container {
    float: left;
    width: 40px;
    height: 40px;
    margin: 0 8px 8px 0;
    text-align: center;
    background-repeat: no-repeat;
}

html[dir="rtl"] .notifications-content .avatar-container {
    float: right;
    margin-right: auto;
    margin-left: 8px;
}

.notifications-content .avatar {
    max-width: 40px;
    max-height: 40px;
}

.notifications-content .notification-text,
.notifications-content .notification-actions {
    margin-left: 48px;
    overflow: hidden;
}

html[dir="rtl"] .notifications-content .notification-text,
html[dir="rtl"] .notifications-content .notification-actions {
    margin-left: auto;
}

.notifications-content .notification-actions {
    margin-top: 3px;
}

.notifications-content .notification-actions a {
    color: white;
    font-weight: bold;
    font-size: 0.9em;
    text-decoration: underline;
    margin-right: 8px;
}

.notifications-content .one-notification .notification-actions span.talk-images {
    background-position: 0 -1828px;
    width: 16px;
    height: 16px;
    margin: -1px 6px 0 0;
    float: left;
}

html[dir="rtl"] .notifications-content .one-notification .notification-actions span.talk-images {
    margin-right: auto;
    margin-left: 6px;
    float: right;
}

.notifications-content .one-notification[data-type="subscribe"] .notification-actions span.talk-images {
    background-position: 0 -1796px;
}

.notifications-content .one-notification[data-type="invite_room"] .notification-actions span.talk-images {
    background-position: 0 -1812px;
}

.notifications-content .one-notification[data-type="send"] .notification-actions span.talk-images,
.notifications-content .one-notification[data-type="send_accept"] .notification-actions span.talk-images,
.notifications-content .one-notification[data-type="send_reject"] .notification-actions span.talk-images,
.notifications-content .one-notification[data-type="send_fail"] .notification-actions span.talk-images {
    background-position: 0 -1956px;
}

.notifications-content .one-notification[data-type="rosterx"] .notification-actions span.talk-images {
    background-position: 0 -1844px;
}

.notifications-content .one-notification[data-type="comment"] .notification-actions span.talk-images {
    background-position: 0 -1860px;
}

.notifications-content .one-notification[data-type="like"] .notification-actions span.talk-images {
    background-position: 0 -1876px;
}

.notifications-content .one-notification[data-type="quote"] .notification-actions span.talk-images {
    background-position: 0 -1892px;
}

.notifications-content .one-notification[data-type="wall"] .notification-actions span.talk-images {
    background-position: 0 -1908px;
}

.notifications-content .one-notification[data-type="photo"] .notification-actions span.talk-images {
    background-position: 0 -1924px;
}

.notifications-content .one-notification[data-type="video"] .notification-actions span.talk-images {
    background-position: 0 -1940px;
}

.notifications-content .one-notification[data-type="me_profile_new_success"] .notification-actions span.talk-images,
.notifications-content .one-notification[data-type="me_profile_remove_success"] .notification-actions span.talk-images,
.notifications-content .one-notification[data-type="me_profile_update_success"] .notification-actions span.talk-images {
    background-position: 0 -1660px;
}

.notifications-content .one-notification[data-type="me_profile_check_error"] .notification-actions span.talk-images {
    background-position: 0 -1640px;
}

.music-content {
    width: 220px;
    right: -97px;
}

html[dir="rtl"] .music-content {
    left: -97px;
}

.music-content .tools-content-subitem {
    height: 247px;
}

.music-content .player {
    background: #b5d5db;
    background: -moz-linear-gradient(top, #b5d5db, #adced4);
    background: -webkit-gradient(linear, left top, left bottom, from(#b5d5db), to(#adced4));
    background: -webkit-linear-gradient(top, #b5d5db 0%, #adced4 100%);
    background: -o-linear-gradient(top, #b5d5db 0%, #adced4 100%);
    height: 20px;
    padding: 2px 5px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.music-content .player a {
    margin: 2px;
    height: 16px;
    width: 16px;
    float: left;
}

html[dir="rtl"] .music-content .player a {
    float: right;
}

.music-content .player a:hover,
.music-content .player a:focus {
    opacity: 0.8;
}

.music-content .player a:active {
    opacity: 0.6;
}

.music-content .stop {
    display: none;
    background-position: 0 -270px;
}

.music-content .list {
    background-color: #e8f1f3;
    height: 188px;
    padding: 5px;
    text-align: left;
    overflow-y: auto;
    overflow-x: hidden;
}

html[dir="rtl"] .music-content .list {
    text-align: right;
}

.music-content p.no-results {
    display: none;
    color: black;
    font-size: 0.9em;
}

.music-content div.special {
    padding-bottom: 2px;
    margin-bottom: 6px;
    border-bottom: 1px solid #c3d4d7;
}

.music-content .song {
    display: block;
    margin: 3px 0;
    font-size: 0.8em;
}

.music-content .playing {
    font-weight: bold;
}

.music-content .search {
    background-color: #e8f1f3;
    height: 25px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.music-content .search input {
    margin: 2px;
    width: 198px;
    height: 15px;
}

.call-content {
    text-shadow: none;
    width: 230px;
    right: -102px;
}

html[dir="rtl"] .call-content {
    left: -102px;
}

.call-content .tools-content-subitem {
    position: relative;
}

.call-content .call-notify {
    height: 90px;
}

.call-content .call-notify .avatar-pane {
    width: 100px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

html[dir="rtl"] .call-content .call-notify .avatar-pane {
    left: auto;
    right: 0;
}

.call-content .call-notify .avatar-pane .avatar-container {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.call-content .call-notify .avatar-pane .avatar-container .avatar {
    min-height: 100%;
    max-height: 100%;
    min-width: 100%;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

html[dir="rtl"] .call-content .call-notify .avatar-pane .avatar-container .avatar {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.call-content .call-notify .avatar-pane .icon {
    opacity: 0.75;
    position: absolute;
    left: 8px;
    bottom: 8px;
}

.call-content .call-notify.notify-call_audio .avatar-pane .icon,
.call-content .call-notify.notify-broadcast_audio .avatar-pane .icon {
    background-position: 0 -120px;
    width: 33px;
    height: 33px;
}

.call-content .call-notify.notify-call_video .avatar-pane .icon,
.call-content .call-notify.notify-broadcast_video .avatar-pane .icon {
    background-position: 0 -154px;
    width: 33px;
    height: 22px;
}

.call-content .call-notify.notify-connecting .avatar-pane .icon {
    background-position: 0 -175px;
    width: 33px;
    height: 32px;
}

.call-content .call-notify.notify-error .avatar-pane .icon {
    background-position: 0 -207px;
    width: 33px;
    height: 31px;
}

.call-content .call-notify.notify-local_ended .avatar-pane .icon,
.call-content .call-notify.notify-remote_ended .avatar-pane .icon {
    background-position: 0 -238px;
    width: 33px;
    height: 34px;
}

.call-content .call-notify .notification-content {
    color: #ffffff;
    text-align: left;
    text-shadow: 0 1px 1px rgb(0,0,0);
    text-shadow: 0 1px 1px rgba(0,0,0,0.75);
    padding: 10px 10px 0 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100px;
}

html[dir="rtl"] .call-content .call-notify .notification-content {
    text-align: right;
    right: 100px;
    left: 0;
}

.call-content .call-notify .notification-content .fullname,
.call-content .call-notify .notification-content .text {
    display: block;
}

.call-content .call-notify .notification-content .fullname {
    font-weight: bold;
}

.call-content .call-notify .notification-content .text {
    font-size: 12px;
    text-transform: lowercase;
    margin-top: 2px;
}

.call-content .call-notify .notification-content .reply-buttons {
    text-align: center;
    padding-left: 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
}

html[dir="rtl"] .call-content .call-notify .notification-content .reply-buttons {
    padding-left: 0;
    padding-right: 10px;
}

.call-content .call-notify .notification-content .reply-buttons a.reply-button {
    margin-left: 4px;
    float: left;
}

html[dir="rtl"] .call-content .call-notify .notification-content .reply-buttons a.reply-button {
    margin-left: 0;
    margin-right: 4px;
    float: right;
}

.call-content .call-notify .notification-content .reply-buttons a.reply-button:active {
    margin-top: 0;
}

.call-content .call-notify .notification-content .reply-buttons a.reply-button.first {
    margin-left: 0;
}

html[dir="rtl"] .call-content .call-notify .notification-content .reply-buttons a.reply-button.first {
    margin-right: 0;
}

@-o-keyframes tool_active {
    0% {
        background-color: rgb(232,241,243);
        background-color: rgba(232,241,243,0.6);
    }
    50% {
        background-color: rgb(243,16,0);
        background-color: rgba(243,16,0,0.6);
    }
    100% {
        background-color: rgb(232,241,243);
        background-color: rgba(232,241,243,0.6);
    }
}

@-moz-keyframes tool_active {
    0% {
        background-color: rgb(232,241,243);
        background-color: rgba(232,241,243,0.6);
    }
    50% {
        background-color: rgb(243,16,0);
        background-color: rgba(243,16,0,0.6);
    }
    100% {
        background-color: rgb(232,241,243);
        background-color: rgba(232,241,243,0.6);
    }
}

@-webkit-keyframes tool_active {
    0% {
        background-color: rgb(232,241,243);
        background-color: rgba(232,241,243,0.6);
    }
    50% {
        background-color: rgb(243,16,0);
        background-color: rgba(243,16,0,0.6);
    }
    100% {
        background-color: rgb(232,241,243);
        background-color: rgba(232,241,243,0.6);
    }
}

@keyframes tool_active {
    0% {
        background-color: rgb(232,241,243);
        background-color: rgba(232,241,243,0.6);
    }
    50% {
        background-color: rgb(243,16,0);
        background-color: rgba(243,16,0,0.6);
    }
    100% {
        background-color: rgb(232,241,243);
        background-color: rgba(232,241,243,0.6);
    }
}

/*

Jappix - An open social platform
This is the roster CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#roster {
        background-color: rgb(20,20,20);
        background-color: rgba(20,20,20,0.85);
        color: #919191;
        padding: 15px 6px 4px 6px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -moz-box-shadow: 0 0 6px #5c5c5c;
        -webkit-box-shadow: 0 0 6px #5c5c5c;
        box-shadow: 0 0 6px #5c5c5c;
}

#roster .content {
        background: #e8f1f3;
        background: -moz-linear-gradient(top, #e8f1f3, #e4edef);
        background: -webkit-gradient(linear, left top, left bottom, from(#e8f1f3), to(#e4edef));
        background: -webkit-linear-gradient(top, #e8f1f3 0%, #e4edef 100%);
        background: -o-linear-gradient(top, #e8f1f3 0%, #e4edef 100%);
        color: #666666;
        height: 207px;
        padding: 4px 4px 0 4px;
        overflow-x: hidden;
        overflow-y: auto;
        -moz-border-radius-topleft: 3px;
        -moz-border-radius-topright: 3px;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
}

#roster .one-group {
        margin-bottom: 10px;
}

#roster .one-group a.group {
        color: #202c2f;
        font-size: 0.8em;
        margin: 3px 6px;
        padding-left: 12px;
        max-height: 15px;
        text-decoration: none;
        overflow: hidden;
        display: block;
}

html[dir="rtl"] #roster .one-group a.group {
        float: right;
}

#roster .one-group a.group.plus {
        background-position: -4px -1143px;
}

#roster .one-group a.group.minus {
        background-position: -4px -1162px;
}

#roster .one-group a.group:hover {
        cursor: pointer;
}

#roster .hidden-buddy,
#roster .foot-edit-finish,
.buddy-conf-more-display-available {
        display: none;
}

#roster .group-buddy {
        clear: both;
}

#roster .buddy {
        width: 100%;
        height: 50px;
        margin-bottom: 4px;
        clear: both;
}

#roster .buddy-click {
        background: #d9e7ea;
        width: 100%;
        height: 100%;
        overflow: hidden;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
}

#roster .buddy-click:hover,
#roster .buddy-click:focus {
        background: #cedee1;
        cursor: pointer;
}

#roster .buddy-click:active {
        background: #c3d3d7;
}

#roster .gateway {
        height: 27px;
}

#roster .gateway .name {
        margin-left: 0;
}

#roster .gateway .buddy-presence {
        float: left;
        overflow: hidden;
        width: 0;
        margin: 0 4px;
}

#roster .avatar-container {
        float: left;
        text-align: center;
        margin: 3px;
        width: 46px;
        height: 46px;
}

html[dir="rtl"] #roster .avatar-container {
        float: right;
}

#roster .avatar {
        max-width: 44px;
        max-height: 44px;
}

#roster .name {
        margin: 4px 3px 5px 56px;
}

html[dir="rtl"] #roster .name {
        margin-left: auto;
        float: right;
}

#roster .buddy-name {
        height: 17px;
        font-weight: bold;
        font-size: 0.85em;
        color: #264249;
        margin: 5px 0 5px 2px;
        overflow: hidden;
}

#roster .buddy.blocked p.buddy-name {
        text-decoration: line-through;
}

#roster .buddy-presence {
        height: 14px;
        font-size: 0.7em;
        color: #3a585e;
        padding: 2px 0 0 16px;
        margin-top: -3px;
}

html[dir="rtl"] #roster .buddy-presence {
        float: right;
}

#roster .unavailable,
#page-switch .unavailable,
#page-engine p.bc-infos span.show.unavailable {
        background-position: 0 -153px;
}

#roster .available,
#page-engine p.bc-infos span.show.available,
#page-engine .list .available,
#page-engine .list .chat,
#page-switch .available,
#my-infos .f-presence a[data-value="available"] span {
        background-position: 0 -169px;
}

#roster .away,
#page-engine p.bc-infos span.show.away,
#page-engine .list .away,
#page-switch .away,
#my-infos .f-presence a[data-value="away"] span {
        background-position: 0 -185px;
}

#roster .busy,
#page-engine p.bc-infos span.show.busy,
#page-engine .list .xa,
#page-engine .list .dnd,
#page-switch .busy,
#my-infos .f-presence a[data-value="xa"] span {
        background-position: 0 -201px;
}

#roster .error,
#page-switch .error,
#page-engine p.bc-infos span.show.error {
        background-position: 0 -217px;
}

#roster .buddy-infos {
        position: absolute;
        z-index: 100;
        width: 337px;
        color: white;
        font-size: 0.8em;
}

.buddy-infos-subarrow {
        background-position: 0 -241px;
        opacity: 0.8;
        width: 9px;
        height: 20px;
        margin-top: 12px;
        float: left;
}

html[dir="rtl"] .buddy-infos-subarrow {
        background-position: -10px -241px;
        float: right;
}

.buddy-infos-subitem {
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.8);
        padding: 8px 10px;
        width: 308px;
        text-shadow: 0 1px 1px black;
        float: left;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
}

html[dir="rtl"] .buddy-infos-subitem {
        float: right;
}

.manage-infos p.bm-authorize,
#rosterx .oneresult span.action.add {
        background-position: 0 -1181px;
}

.manage-infos p.bm-remove,
#rosterx .oneresult span.action.delete,
#attach div.one-file a.remove {
        background-position: 0 -1200px;
}

.manage-infos p.bm-remove {
        margin-bottom: 18px;
}

.manage-infos p.bm-rename {
        background-position: 0 -1216px;
}

.manage-infos p.bm-group {
        background-position: 0 -1241px;
}

.manage-infos div.bm-choose {
        max-height: 95px;
        margin: 0 0 8px 102px;
        overflow: auto;
}

.manage-infos div.bm-choose label {
        float: left;
        clear: both;
        margin-bottom: 1px;
}

.manage-infos div.bm-choose input {
        float: left;
}

.manage-infos div.bm-choose input[type="checkbox"] {
        margin: 0 6px 0 0;
}

.manage-infos div.bm-choose div {
        clear: both;
}

.manage-infos p.bm-rename,
.manage-infos p.bm-group {
        height: 26px;
}

.manage-infos p.bm-rename label,
.manage-infos p.bm-group label {
        width: 80px;
        padding-top: 3px;
        float: left;
}

html[dir="rtl"] .manage-infos p.bm-rename label,
html[dir="rtl"] .manage-infos p.bm-group label {
        float: right;
}

.manage-infos p.bm-rename input,
.manage-infos p.bm-group input {
        float: left;
        width: 155px;
}

html[dir="rtl"] .manage-infos p.bm-rename input,
html[dir="rtl"] .manage-infos p.bm-group input {
        float: right;
}

.manage-infos a.save {
        float: right;
        margin: 4px;
}

.buddy-infos-subitem p {
        margin: 6px 0;
        padding-left: 22px;
        height: 16px;
        overflow: hidden;
}

.buddy-infos-subitem a {
        color: white;
        text-decoration: underline;
}

.tune-note {
        background-position: 0 -676px;
}

.location-world {
        background-position: 0 -658px;
}

.call-jingle {
        background-position: 1px -2047px;
}

body.in_jingle_call .call-jingle,
body.in_muji_call .call-jingle,
body.in_jingle_call .roster-muji,
body.in_muji_call .roster-muji {
        opacity: 0.35;
}

.call-jingle,
.call-jingle a.audio,
.call-jingle a.video,
.call-jingle span.separator {
        display: none;
}

body.in_jingle_call .call-jingle a,
body.in_muji_call .call-jingle a,
body.in_jingle_call .roster-muji a,
body.in_muji_call .roster-muji a {
        cursor: default;
}

.view-individual {
        background-position: 0 -34px;
}

.edit-buddy {
        background-position: 0 -1008px;
}

#roster .filter {
        background-color: white;
        border-top: 1px solid #b8c2c4;
        height: 15px;
        padding: 2px 4px;
        font-size: 0.8em;
        -moz-border-radius-bottomleft: 3px;
        -moz-border-radius-bottomright: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -webkit-border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
}

#roster .filter input {
        border: none;
        color: #273a3f;
        width: 211px;
        padding: 0;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
}

#roster .filter a {
        display: none;
        background-color: #9a2d2d;
        color: white;
        height: 13px;
        width: 13px;
        margin-top: 1px;
        font-size: 0.8em;
        text-align: center;
        text-decoration: none;
        float: right;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
}

html[dir="rtl"] #roster .filter a {
        float: left;
}

#roster .filter a:hover,
#roster .filter a:focus {
        background-color: #8c2121;
}

#roster .filter a:active {
        background-color: #7e1919;
}

#roster .foot {
        padding: 9px 1px 3px;
}

#roster .roster-icon {
        height: 16px;
        width: 16px;
        margin: -3px 5px 0 0;
        float: left;
        position: relative;
}

html[dir="rtl"] #roster .roster-icon {
        margin-right: 0;
        margin-left: 5px;
        float: right;
}

#roster .roster-icon a.talk-images {
        height: 16px;
        width: 16px;
        display: block;
}

#roster .add,
#page-engine .text .tools-add {
        background-position: 0 -1047px;
}

#roster .join {
        background-position: 0 -1065px;
}

#roster .groupchat,
#page-switch .groupchat-default {
        background-position: 0 -1082px;
}

#roster .muji {
        background-position: 0 -2047px;
}

#roster .more {
        background-position: 0 -1100px;
}

#roster .foot-edit-finish a {
        color: white;
        font-size: 0.8em;
        margin: -3px 4px 0 0;
        float: right;
        display: block;
}

#roster .foot-edit-finish a:hover,
#roster .foot-edit-finish a:focus {
        text-decoration: underline;
        cursor: pointer;
}

.buddy-conf-item {
        position: absolute;
        left: -10px;
        width: 263px;
        color: white;
        z-index: 9998;
        font-size: 0.8em;
}

html[dir="rtl"] .buddy-conf-item {
        left: auto;
        right: -10px;
}

.buddy-conf-item:hover {
        cursor: default;
}

.buddy-conf-subarrow {
        background-position: 0 -241px;
        opacity: 0.8;
        height: 10px;
        width: 18px;
        margin-left: 9px;
        float: left;
}

html[dir="rtl"] .buddy-conf-subarrow {
        margin-left: auto;
        margin-right: 9px;
        float: right;
}

.buddy-conf-muji .buddy-conf-subarrow {
        margin-left: 8px;
}

html[dir="rtl"] .buddy-conf-muji .buddy-conf-subarrow {
        margin-right: 8px;
}

.buddy-conf-subitem {
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.8);
        margin-top: 10px;
        padding: 10px;
        text-shadow: 0 1px 1px black;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
}

.buddy-conf-p {
        margin-bottom: 4px;
        width: 220px;
        font-weight: bold;
        float: left;
}

html[dir="rtl"] .buddy-conf-p {
        float: right;
}

.buddy-conf-input {
        padding-top: 2px;
}

.buddy-conf-text {
        font-size: 11px;
        clear: both;
        margin-bottom: 3px;
}

.buddy-conf-text a {
        color: white;
}

.buddy-conf-text a:hover,
.buddy-conf-text a:focus {
        cursor: pointer;
        text-decoration: underline;
}

.buddy-conf-text a.buddy-conf-add-search {
        text-decoration: underline;
        margin-top: 6px;
        display: block;
}

.buddy-conf-select {
        font-size: 1.1em;
        clear: both;
        margin-bottom: 8px;
        width: 180px;
        height: 23px;
}

.join-jid {
        width: 220px;
        margin-top: 5px;
}

.add-contact-jid,
.add-contact-name,
.add-contact-gateway {
        width: 156px;
        margin-bottom: 4px;
}

.add-contact-name-get {
        font-size: 0.8em;
        display: none;
}

.buddy-conf-subitem label {
        clear: both;
}

.buddy-conf-subitem label span {
        width: 76px;
        height: 14px;
        margin-top: 3px;
        overflow: hidden;
        float: left;
}

html[dir="rtl"] .buddy-conf-subitem label span {
        float: right;
}

#buddy-conf-join ul {
        width: 224px;
        max-height: 160px;
        left: 10px;
        top: 50px;
}

html[dir="rtl"] #buddy-conf-join ul {
        left: auto;
        right: 10px;
}

.buddy-conf-join-select {
        margin: 8px 0 0 0;
}

/*

Jappix - An open social platform
This is the my-infos CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#my-infos {
    background-color: rgb(20,20,20);
    background-color: rgba(20,20,20,0.85);
    color: #919191;
    margin-top: 8px;
    padding: 15px 6px 6px 6px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 0 6px #5c5c5c;
    -webkit-box-shadow: 0 0 6px #5c5c5c;
    box-shadow: 0 0 6px #5c5c5c;
}

#my-infos .content {
    background: #e8f1f3;
    background: -moz-linear-gradient(top, #e4edef, #e8f1f3);
    background: -webkit-gradient(linear, left top, left bottom, from(#e4edef), to(#e8f1f3));
    background: -webkit-linear-gradient(top, #e4edef 0%, #e8f1f3 100%);
    background: -o-linear-gradient(top, #e4edef 0%, #e8f1f3 100%);
    color: #919191;
    max-height: 140px;
    padding: 1px 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#my-infos .element {
    height: 24px;
    margin: 6px 0;
    position: relative;
}

#my-infos .element .icon {
    background-color: white;
    border-color: #636363;
    border-width: 1px;
    border-style: solid;
    margin-left: 6px;
    height: 22px;
    width: 25px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

html[dir="rtl"] #my-infos .element .icon {
    margin-left: auto;
    margin-right: 6px;
}

#my-infos .element div.bubble a {
    width: 100%;
    height: 20px;
}

#my-infos .element .icon:hover,
#my-infos .element div.bubble a:hover {
    background-color: #f4f4f4;
}

#my-infos .element .icon:active,
#my-infos .element div.bubble a:active {
    background-color: #ededed;
}

#my-infos .f-presence div.bubble a[data-value="available"] {
    background-position: 4px -167px;
}

#my-infos .f-presence div.bubble a[data-value="away"] {
    background-position: 4px -183px;
}

#my-infos .f-presence div.bubble a[data-value="xa"] {
    background-position: 4px -199px;
}

#my-infos .f-mood div.bubble a[data-value="crazy"] {
    background-position: 4px -296px;
}

#my-infos .f-mood div.bubble a[data-value="excited"] {
    background-position: 4px -314px;
}

#my-infos .f-mood div.bubble a[data-value="playful"] {
    background-position: 4px -332px;
}

#my-infos .f-mood div.bubble a[data-value="happy"] {
    background-position: 4px -350px;
}

#my-infos .f-mood div.bubble a[data-value="shocked"] {
    background-position: 4px -368px;
}

#my-infos .f-mood div.bubble a[data-value="hot"] {
    background-position: 4px -386px;
}

#my-infos .f-mood div.bubble a[data-value="sad"] {
    background-position: 4px -404px;
}

#my-infos .f-mood div.bubble a[data-value="amorous"] {
    background-position: 4px -422px;
}

#my-infos .f-mood div.bubble a[data-value="confident"] {
    background-position: 4px -440px;
}

#my-infos .f-mood a[data-value] span {
    background-position: 0 -352px;
}

#my-infos .f-mood a[data-value="crazy"] span,
.mood-one {
    background-position: 0 -298px;
}

#my-infos .f-mood a[data-value="excited"] span,
.mood-two {
    background-position: 0 -316px;
}

#my-infos .f-mood a[data-value="playful"] span,
.mood-three {
    background-position: 0 -334px;
}

#my-infos .f-mood a[data-value="happy"] span,
.mood-four {
    background-position: 0 -352px;
}

#my-infos .f-mood a[data-value="shocked"] span,
.mood-five {
    background-position: 0 -370px;
}

#my-infos .f-mood a[data-value="hot"] span,
.mood-six {
    background-position: 0 -388px;
}

#my-infos .f-mood a[data-value="sad"] span,
.mood-seven {
    background-position: 0 -406px;
}

#my-infos .f-mood a[data-value="amorous"] span,
.mood-eight {
    background-position: 0 -424px;
}

#my-infos .f-mood a[data-value="confident"] span,
.mood-nine {
    background-position: 0 -442px;
}

#my-infos .f-activity div.bubble a[data-value="doing_chores"] {
    background-position: 4px -458px;
}

#my-infos .f-activity div.bubble a[data-value="drinking"] {
    background-position: 4px -476px;
}

#my-infos .f-activity div.bubble a[data-value="eating"] {
    background-position: 4px -494px;
}

#my-infos .f-activity div.bubble a[data-value="exercising"] {
    background-position: 4px -512px;
}

#my-infos .f-activity div.bubble a[data-value="grooming"] {
    background-position: 4px -548px;
}

#my-infos .f-activity div.bubble a[data-value="having_appointment"] {
    background-position: 4px -566px;
}

#my-infos .f-activity div.bubble a[data-value="inactive"] {
    background-position: 4px -530px;
}

#my-infos .f-activity div.bubble a[data-value="relaxing"] {
    background-position: 4px -620px;
}

#my-infos .f-activity div.bubble a[data-value="talking"] {
    background-position: 4px -602px;
}

#my-infos .f-activity div.bubble a[data-value="traveling"] {
    background-position: 4px -584px;
}

#my-infos .f-activity div.bubble a[data-value="working"] {
    background-position: 4px -638px;
}

#my-infos .f-activity a[data-value] span {
    background-position: 0 -514px;
}

#my-infos .f-activity a[data-value="doing_chores"] span,
.activity-doing_chores {
    background-position: 0 -460px;
}

#my-infos .f-activity a[data-value="drinking"] span,
.activity-drinking {
    background-position: 0 -478px;
}

#my-infos .f-activity a[data-value="eating"] span,
.activity-eating {
    background-position: 0 -496px;
}

#my-infos .f-activity a[data-value="exercising"] span,
.activity-exercising {
    background-position: 0 -514px;
}

#my-infos .f-activity a[data-value="grooming"] span,
.activity-grooming {
    background-position: 0 -550px;
}

#my-infos .f-activity a[data-value="having_appointment"] span,
.activity-having_appointment {
    background-position: 0 -568px;
}

#my-infos .f-activity a[data-value="inactive"] span,
.activity-inactive {
    background-position: 0 -532px;
}

#my-infos .f-activity a[data-value="relaxing"] span,
.activity-relaxing {
    background-position: 0 -622px;
}

#my-infos .f-activity a[data-value="talking"] span,
.activity-talking {
    background-position: 0 -604px;
}

#my-infos .f-activity a[data-value="traveling"] span,
.activity-traveling {
    background-position: 0 -586px;
}

#my-infos .f-activity a[data-value="working"] span,
.activity-working {
    background-position: 0 -640px;
}

#my-infos .element .icon.picker {
    border-width: 1px 0 1px 1px;
    float: left;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

html[dir="rtl"] #my-infos .element .icon.picker {
    border-width: 1px 1px 1px 0;
    float: right;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomright: 2px;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-right-radius: 2px;
    -webkit-border-bottom-left-radius: 0;
    border-top-right-radius: 2px;
    border-top-left-radius: 0;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 0;
}

#my-infos .element .icon.disabled {
    background-color: #f3f3f3;
    border-color: #989898;
    cursor: default;
}

#my-infos .element div.bubble {
    background-color: white;
    border-color: #636363;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    width: 25px;
    padding: 1px 0;
    position: absolute;
    bottom: 21px;
    left: 6px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

html[dir="rtl"] #my-infos .element div.bubble {
    left: auto;
    right: 6px;
}

#my-infos .element a {
    float: left;
}

html[dir="rtl"] #my-infos .element a {
    float: right;
}

#my-infos .element .icon span {
    height: 16px;
    width: 16px;
    margin: 3px 4px;
    display: block;
}

#my-infos .element input {
    height: 18px;
    width: 190px;
    font-size: 0.85em;
    padding-left: 4px;
    float: left;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-bottom-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

html[dir="rtl"] #my-infos .element input {
    padding-left: 2px;
    padding-right: 4px;
    float: right;
    -moz-border-radius-topright: 0;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 2px;
    border-top-right-radius: 0;
    border-top-left-radius: 2px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
}
/*

Jappix - An open social platform
This is the page-engine CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#page-engine {
    background-color: #f4f4f4;
    position: absolute;
    top: 40px;
    bottom: 6px;
    right: 6px;
    left: 6px;
    z-index: 8;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#page-engine .top {
    background: #e8f1f3;
    background: -moz-linear-gradient(top, #e8f1f3, #dee8ea);
    background: -webkit-gradient(linear, left top, left bottom, from(#e8f1f3), to(#dee8ea));
    background: -webkit-linear-gradient(top, #e8f1f3 0%, #dee8ea 100%);
    background: -o-linear-gradient(top, #e8f1f3 0%, #dee8ea 100%);
    border-bottom: 1px solid #d0d0d0;
    color: black;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 6px;
    height: 80px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

#page-engine .top .avatar-container {
    text-align: center;
    margin: 2px 0 0 10px;
    height: 76px;
    width: 76px;
    float: left;
}

html[dir="rtl"] #page-engine .top .avatar-container {
    margin-left: 0;
    margin-right: 10px;
    float: right;
}

#page-engine .top .avatar {
    max-height: 76px;
    max-width: 76px;
}

#page-engine .top .name {
    text-align: right;
    padding: 7px;
}

html[dir="rtl"] #page-engine .top .name {
    text-align: left;
}

#page-engine p.bc-name {
    font-size: 2.3em;
    margin-bottom: 5px;
}

#page-engine p.bc-infos {
    font-size: 0.85em;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 115px;
    right: 12px;
}

html[dir="rtl"] #page-engine p.bc-infos {
    left: 12px;
    right: 115px;
}

#page-engine .page-engine-chan[data-type="groupchat"] p.bc-infos {
    left: 12px;
}

#page-engine p.bc-infos span.show {
    padding-left: 18px;
}

#page-engine p.bc-infos a {
    text-decoration: underline;
}

#page-engine div.bc-pep {
    float: right;
}

html[dir="rtl"] #page-engine div.bc-pep {
    float: left;
}

#page-engine div.bc-pep a {
    height: 16px;
    width: 16px;
    margin-left: 4px;
    float: left;
}

html[dir="rtl"] #page-engine div.bc-pep a {
    margin-right: 4px;
    margin-left: 0;
}

#page-engine div.bc-pep a:hover {
    cursor: default;
}

#page-engine div.bc-pep a[href]:hover {
    cursor: pointer;
}

#page-engine .content,
#page-engine .list {
    font-size: 0.9em;
    position: absolute;
    top: 93px;
    right: 0;
    bottom: 29px;
    overflow: auto;
    -moz-box-shadow: inset 0 3px 10px #e8e8e8;
    -webkit-box-shadow: inset 0 3px 10px #e8e8e8;
    box-shadow: inset 0 3px 10px #e8e8e8;
}

#page-engine .content {
    left: 0;
    padding: 12px 14px 0;
}

#page-engine .content a {
    text-decoration: underline;
}

#page-engine .content .wait-mam {
    margin: 2px auto 14px auto;
    display: none;
}

#page-engine .page-engine-chan {
    display: none;
}

#page-engine .chat .content,
#page-engine .chat .list {
    bottom: 93px;
}

#page-engine .chat .content {
    padding-bottom: 24px;
}

#page-engine .groupchat-content {
    padding-bottom: 16px !important;
    right: 191px !important;
}

html[dir="rtl"] #page-engine .groupchat-content {
    right: 0 !important;
    left: 191px !important;
}

#page-engine .list {
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: #c8c8c8;
    padding: 8px 0 0;
    width: 190px;
    right: 0;
}

html[dir="rtl"] #page-engine .list {
    border-width: 0 1px 0 0;
    right: auto;
    left: 0;
}

#page-engine .list .role {
    display: none;
    margin-bottom: 10px;
}

#page-engine .list .title {
    font-weight: bold;
    color: #383838;
    margin-left: 8px;
}

#page-engine .list .user {
    background: #eff2f2;
    background: -moz-linear-gradient(top, #eff2f2, #ecefef);
    background: -webkit-gradient(linear, left top, left bottom, from(#eff2f2), to(#ecefef));
    background: -webkit-linear-gradient(top, #eff2f2 0%, #ecefef 100%);
    background: -o-linear-gradient(top, #eff2f2 0%, #ecefef 100%);
    border-color: #c8c8c8;
    border-width: 1px 0;
    border-style: solid;
    color: #383838;
    margin-bottom: 3px;
    overflow: hidden;
}

#page-engine .list .user:hover {
    background: #e9ecec;
    cursor: pointer;
}

#page-engine .list .user:active {
    background: #e3e7e7;
}

#page-engine .list .user.myself {
    background-color: #eff2f2;
    cursor: default;
}

#page-engine .list .user .user-details {
    height: 32px;
}

#page-engine .list .user .user-details .name {
    float: left;
    height: 18px;
    overflow: hidden;
    margin: 7px 0 7px 3px;
    padding-left: 18px;
}

html[dir="rtl"] #page-engine .list .user .user-details .name {
    margin-left: auto;
    margin-right: 8px;
    float: right;
}

#page-engine .list .user .user-details .avatar-container {
    text-align: center;
    float: right;
    height: 32px;
    width: 32px;
}

html[dir="rtl"] #page-engine .list .user .user-details .avatar-container {
    float: left;
}

#page-engine .list .user .user-details .avatar {
    max-height: 32px;
    max-width: 32px;
}

#page-engine .list .user .user-actions {
    margin-top: 2px;
    display: none;
}

#page-engine .list .user .user-actions .action {
    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: #e1e1e1;
    text-align: center;
    margin: 0 0 0 6px;
    padding: 0 6px 0 0;
    float: left;
}

#page-engine .list .user .user-actions .action a {
    width: 16px;
    height: 16px;
    margin: 2px 6px 1px 6px;
    display: inline-block;
    opacity: 0.8;
}

#page-engine .list .user .user-actions .action a:hover,
#page-engine .list .user .user-actions .action a:focus {
    opacity: 1;
}

#page-engine .list .user .user-actions .action.promote a {
    background-position: 0 -2156px;
}

#page-engine .list .user .user-actions .action.demote a {
    background-position: 0 -2172px;
}

#page-engine .list .user .user-actions .action.kick a {
    background-position: 0 -2188px;
}

#page-engine .list .user .user-actions .action.add {
    border-width: 0 0 0 1px;
    margin: 0 6px 0 0;
    padding: 0 0 0 6px;
    float: right;
}

#page-engine .list .user .user-actions .action.add a {
    background-position: 0 -1047px;
}

#page-engine .one-group {
    border-bottom: 1px dotted #d0d0d0;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

#page-engine .one-line {
    position: relative;
}

#page-engine .one-line.is-sending {
    opacity: 0.6;
}

#page-engine .one-line .correction-edit,
#page-engine .one-line .correction-label,
#page-engine .one-line.user-message[data-edited] .corrected-info,
#page-engine .one-line .message-marker {
    font-size: 0.8em;
    position: absolute;
    right: 0;
    top: 0;
}

html[dir="rtl"] #page-engine .one-line .correction-edit,
html[dir="rtl"] #page-engine .one-line .correction-label,
html[dir="rtl"] #page-engine .one-line.user-message[data-edited] .corrected-info,
html[dir="rtl"] #page-engine .one-line .message-marker  {
    left: 0;
    right: auto;
}

#page-engine .one-line .correction-edit,
#page-engine .one-line .correction-label {
    border: 1px solid #7f7f7f;
    color: black;
    font-size: 0.8em;
    text-decoration: none;
    margin-top: -1px;
    padding: 2px 5px;
    position: absolute;
    right: 0;
    top: 0;
}

#page-engine .one-line .correction-edit {
    opacity: 0.4;
    display: none;
}

#page-engine .page-engine-chan[data-correction="true"] .one-line .correction-edit:hover,
#page-engine .page-engine-chan[data-correction="true"] .one-line .correction-edit:focus {
    opacity: 1;
}

#page-engine .one-line.user-message[data-edited] .corrected-info,
#page-engine .one-line .message-marker {
    color: #969696;
    margin-top: 2px;
}

#page-engine .one-line .message-marker {
    display: none;
}

#page-engine .one-line .message-marker.message-marker-read {
    background-position: 0 -2227px;
    padding-left: 11px;
}

#page-engine .page-engine-chan[data-correction="true"] .one-line.user-message[data-mode="me"]:last-child:hover .correction-edit {
    display: block;
}

#page-engine .one-line.correction-active .corrected-info,
#page-engine .one-line.user-message[data-mode="me"]:last-child:hover .corrected-info {
    display: none;
}

#page-engine .one-line.correction-active .message-marker,
#page-engine .one-line.user-message[data-mode="me"]:last-child:hover .message-marker {
    display: none !important;
}

#page-engine .one-line .message-content {
    margin-right: 80px;
}

html[dir="rtl"] #page-engine .one-line .message-content {
    margin-right: 0;
    margin-left: 80px;
}

#page-engine .one-line,
#page-engine .one-group b.name {
    padding-left: 50px;
    word-wrap: break-word;
}

html[dir="rtl"] #page-engine .one-line,
html[dir="rtl"] #page-engine .one-group b.name {
    padding-left: auto;
    padding-right: 50px;
}

#page-engine .one-line.correction-active {
    opacity: 0.5;
}

#page-engine .one-group b.name {
    display: block;
    margin-bottom: 4px;
    line-height: 1.4;
}

#page-engine .one-group b.name.me {
    color: #123a5c;
}

#page-engine .one-group b.name.him {
    color: #801e1e;
}

#page-engine .one-group span.date {
    float: right;
    font-size: 0.95em;
}

html[dir="rtl"] #page-engine .one-group span.date {
    float: left;
}

#page-engine .one-group .avatar-container {
    text-align: center;
    margin: 4px 0 0 6px;
    height: 30px;
    width: 30px;
    float: left;
}

html[dir="rtl"] #page-engine .one-group .avatar-container {
    margin-left: auto;
    margin-right: 6px;
    float: right;
}

#page-engine .one-group .avatar {
    max-height: 30px;
    max-width: 30px;
}

#page-engine b.name.talk-images {
    background-position: 50px -99px;
    padding-left: 68px;
}

#page-engine .user-message {
    margin-bottom: 3px;
    line-height: 1.3;
}

#page-engine .system-message {
    color: #053805 !important;
    margin-bottom: 3px !important;
    padding-left: 0 !important;
}

html[dir="rtl"] #page-engine .system-message {
    padding-right: 0 !important;
}

#page-engine .system-message a {
    color: #053805 !important;
}

#page-engine .system-message p.help b {
    margin-bottom: 5px;
    text-decoration: underline;
    display: block;
}

#page-engine .system-message p.help em {
    width: 240px;
    text-decoration: underline;
    margin-left: 5px;
    float: left;
}

#page-engine .my-nick {
    font-weight: bold;
}

#page-engine .old-message {
    font-size: 11px !important;
    margin-bottom: 1px !important;
}

#page-engine .chatstate {
    background-color: rgb(234,234,234);
    background-color: rgba(234,234,234,0.8);
    color: #2c2c2c;
    padding: 3px 10px 2px 8px;
    position: absolute;
    bottom: 93px;
    left: 0;
    font-size: 0.75em;
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
}

html[dir="rtl"] #page-engine .chatstate {
    left: auto;
    right: 0;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 0;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 0;
}

#page-engine .text {
    height: 93px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#page-engine .footer {
    background: #e8f1f3;
    background: -moz-linear-gradient(top, #dee8ea, #e8f1f3);
    background: -webkit-gradient(linear, left top, left bottom, from(#dee8ea), to(#e8f1f3));
    background: -webkit-linear-gradient(top, #dee8ea 0%, #e8f1f3 100%);
    background: -o-linear-gradient(top, #dee8ea 0%, #e8f1f3 100%);
    border-color: #d0d0d0;
    border-width: 1px 0 0;
    border-style: solid;
    color: black;
    position: absolute;
    left: 0;
    right: 0;
    padding: 6px;
    height: 16px;
}

#page-engine .chat .footer {
    border-width: 1px 0;
    position: static;
}

#page-engine .chat-tools-content {
    height: 16px;
    width: 16px;
    margin-right: 8px;
    float: left;
}

html[dir="rtl"] #page-engine .chat-tools-content {
    float: right;
}

#page-engine .tools-tooltip {
    display: block;
    height: 16px;
    width: 16px;
    overflow: hidden;
    float: left;
}

#page-engine .text .chat-tools-smileys {
    margin-left: 4px;
}

html[dir="rtl"] #page-engine .text .chat-tools-smileys {
    margin-left: 0;
}

#page-engine .text .chat-tools-file.mini .bubble-file {
    z-index: 39;
}

#page-engine .text .chat-tools-file.mini .tooltip-subitem {
    width: 22px;
    height: 20px;
}

#page-engine .text .chat-tools-file.mini .wait {
    margin: -2px 0 0 -1px;
}

#page-engine .text .tools-smileys {
    background-position: 0 -388px;
}

#page-engine .text .tools-style {
    background-position: 0 -700px;
}

#page-engine .text .tools-file {
    background-position: 0 -1956px;
}

#page-engine .text .tools-save {
    background-position: 0 -719px;
}

#page-engine .text .tools-clear {
    background-position: 0 -739px;
}

#page-engine .text .tools-infos,
#channel .top div.shortcuts a.profile {
    background-position: 0 -758px;
}

#page-engine .text .tools-jingle-video {
    background-position: 0 -2048px;
}

#page-engine .text .tools-jingle-audio {
    background-position: 0 -2080px;
}

body.in_jingle_call #page-engine .text .tools-jingle-video,
body.in_jingle_call #page-engine .text .tools-jingle-audio,
body.in_muji_call #page-engine .text .tools-jingle-video,
body.in_muji_call #page-engine .text .tools-jingle-audio {
    opacity: 0.35;
    cursor: default;
}

#page-engine .text .chat-tools-file,
#page-engine .text .tools-add,
#page-engine .text .tools-mucadmin,
#page-engine .text .tools-jingle-video,
#page-engine .text .tools-jingle-audio {
    display: none;
}

#page-engine .text .tools-mucadmin {
    background-position: 0 -777px;
}

#page-engine .bubble-style label {
    margin: 0 0 3px 0 !important;
}

#page-engine .bubble-style label.font {
    height: 14px !important;
}

#page-engine .bubble-style label.font div.font-icon {
    background-position: 0 -1978px;
    width: 14px;
    height: 11px;
    float: left;
}

#page-engine .bubble-style label.font div.font-change,
#page-engine .bubble-style label.font div.fontsize-change {
    position: absolute;
}

#page-engine .bubble-style label.font div.font-change {
    left: 59px;
}

#page-engine .bubble-style label.font div.fontsize-change {
    left: 28px;
}

#page-engine .bubble-style label.font div.font-change a.font-current,
#page-engine .bubble-style label.font div.fontsize-change a.fontsize-current {
    text-decoration: none;
    float: left;
}

#page-engine .bubble-style label.font div.font-change a.font-current {
    width: 140px;
}

#page-engine .bubble-style label.font div.fontsize-change a.fontsize-current {
    width: 25px;
}

#page-engine .bubble-style label.font div.font-change a.font-current:hover,
#page-engine .bubble-style label.font div.font-change a.font-current:focus,
#page-engine .bubble-style label.font div.fontsize-change a.fontsize-current:hover,
#page-engine .bubble-style label.font div.fontsize-change a.fontsize-current:focus {
    text-decoration: underline;
}

#page-engine .bubble-style label.font div.font-change.listed,
#page-engine .bubble-style label.font div.fontsize-change.listed {
    margin-bottom: 15px;
}

#page-engine .bubble-style label.font div.font-change div.font-list,
#page-engine .bubble-style label.font div.font-change.listed a.font-current,
#page-engine .bubble-style label.font div.fontsize-change div.fontsize-list,
#page-engine .bubble-style label.font div.fontsize-change.listed a.fontsize-current,
#page-engine .bubble-style div.color-picker div.color-hex {
    border-style: solid;
    border-color: black;
    background: white;
    -moz-box-shadow: 0 0 5px #5f5f5f;
    -webkit-box-shadow: 0 0 5px #5f5f5f;
    box-shadow: 0 0 5px #5f5f5f;
}

#page-engine .bubble-style label.font div.font-change.listed a.font-current,
#page-engine .bubble-style label.font div.fontsize-change.listed a.fontsize-current {
    background: rgb(255,255,255);
    background: rgba(255,255,255, 0.8);
    border-width: 0 1px 1px 1px;
    color: black;
    text-shadow: none;
    text-decoration: none;
    padding: 2px 6px;
    position: absolute;
    top: -2px;
    left: -7px;
    z-index: 2;
    -moz-border-radius-bottomright: 2px;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

#page-engine .bubble-style label.font div.font-change.listed a.font-current {
    width: 133px;
}

#page-engine .bubble-style label.font div.fontsize-change.listed a.fontsize-current {
    width: 18px;
}

#page-engine .bubble-style label.font div.font-change div.font-list,
#page-engine .bubble-style label.font div.fontsize-change div.fontsize-list,
#page-engine .bubble-style div.color-picker div.color-hex {
    background: rgb(255,255,255);
    background: rgba(255,255,255, 0.9);
    border-width: 1px 1px 0 1px;
    padding: 2px 0;
    overflow: auto;
    position: absolute;
    bottom: 2px;
    left: -7px;
    z-index: 1;
    display: none;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-topleft: 2px;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
}

#page-engine .bubble-style label.font div.font-change div.font-list {
    width: 145px;
    height: 250px;
}

#page-engine .bubble-style label.font div.fontsize-change div.fontsize-list {
    width: 30px;
}

#page-engine .bubble-style label.font div.font-change.listed div.font-list,
#page-engine .bubble-style label.font div.fontsize-change.listed div.fontsize-list,
#page-engine .bubble-style div.color-picker.opened div.color-hex {
    display: block;
}

#page-engine .bubble-style label.font div.font-change div.font-list a,
#page-engine .bubble-style label.font div.fontsize-change div.fontsize-list a {
    font-size: 1em;
    text-shadow: none;
    font-weight: bold;
    text-decoration: none;
    color: black;
    padding: 3px 6px;
    display: block;
}

#page-engine .bubble-style label.font div.font-change div.font-list a:hover,
#page-engine .bubble-style label.font div.font-change div.font-list a:focus,
#page-engine .bubble-style label.font div.fontsize-change div.fontsize-list a:hover,
#page-engine .bubble-style label.font div.fontsize-change div.fontsize-list a:focus {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.8);
    color: white;
}

#page-engine .bubble-style label.font div.fontsize-change div.fontsize-list a.reset {
    background-position: 7px -2006px;
    height: 14px;
}

#page-engine .bubble-style label.font div.fontsize-change div.fontsize-list a.reset:hover,
#page-engine .bubble-style label.font div.fontsize-change div.fontsize-list a.reset:focus {
    background-position: 7px -2025px;
}

#page-engine .bubble-style label.bold {
    font-weight: bold;
}

#page-engine .bubble-style label.italic {
    font-style: italic;
}

#page-engine .bubble-style label.underline {
    text-decoration: underline;
}

#page-engine .bubble-style a.color {
    height: 12px;
    width: 18px;
    border-color: white;
    border-width: 1px;
    border-style: solid;
    margin: 4px 5px 0 0;
    float: left;
    opacity: 0.6;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
}

#page-engine .bubble-style a.color:hover,
#page-engine .bubble-style a.color:focus {
    opacity: 0.7;
}

#page-engine .bubble-style a.color.selected {
    opacity: 1;
    border-color: #ffb20d;
}

#page-engine .bubble-style div.color-picker {
    margin-left: 4px;
    float: left;
    position: relative;
}

#page-engine .bubble-style div.color-picker a.color-more {
    background-position: 1px -1991px;
    height: 14px;
    width: 14px;
    margin-top: 4px;
    float: left;
}

#page-engine .bubble-style div.color-picker div.color-hex {
    border-width: 1px;
    width: 80px;
    height: auto;
    padding: 3px 5px;
    text-shadow: none;
    bottom: -5px;
    left: -52px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

#page-engine .bubble-style div.color-picker div.color-hex span.hex-begin,
#page-engine .bubble-style div.color-picker div.color-hex input.hex-value {
    color: black;
    float: left;
}

#page-engine .bubble-style div.color-picker div.color-hex span.hex-begin {
    font-weight: bold;
    font-size: 1.2em;
    margin-right: 5px;
}

#page-engine .bubble-style div.color-picker div.color-hex input.hex-value {
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.1);
    border: none;
    width: 60px;
}

#page-engine .bubble-file .tooltip-subitem {
    width: 240px;
}

#page-engine .bubble-file input[type="file"] {
    width: 220px;
}

#page-engine .bubble-file input[type="submit"],
#page-engine .bubble-file input[type="reset"] {
    margin: 4px 4px 0 0;
}

#page-engine .text .compose,
#page-engine .muc-ask,
#page-engine .correction-toolbox {
    position: absolute;
    left: 0;
}

#page-engine .text .compose,
#page-engine .correction-toolbox {
    top: 29px;
    bottom: 12px;
}

#page-engine .text .compose {
    right: 12px;
}

html[dir="rtl"] #page-engine .text .compose {
    right: 0;
    left: 12px;
}

#page-engine .text.correction-active .compose {
    left: 120px;
}

html[dir="rtl"] #page-engine .text.correction-active .compose {
    right: 120px;
}

#page-engine .correction-toolbox {
    width: 120px;
}

html[dir="rtl"] #page-engine .correction-toolbox {
    right: 0;
    left: auto;
}

#page-engine .correction-toolbox .correction-editing,
#page-engine .correction-toolbox .correction-cancel {
    display: block;
    color: black;
    font-size: 0.8em;
    text-decoration: none;
    text-align: center;
    margin: 7px 12px;
    padding: 2px 5px;
}

#page-engine .correction-toolbox .correction-editing {
    font-weight: bold;
    margin-top: 8px;
}

#page-engine .correction-toolbox .correction-cancel {
    background: #d15e6b;
    border: 1px solid #cc273f;
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

#page-engine .muc-ask {
    right: 0;
    bottom: 0;
}

#page-engine .text textarea {
    border: 1px solid #c8c8c8;
    padding: 5px;
    height: 100%;
    width: 100%;
    font-size: 1.1em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-topleft: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

#page-engine .text.correction-active textarea {
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
}

html[dir="rtl"] #page-engine .text.correction-active textarea {
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}

#page-engine .muc-ask {
    background-color: #e8f1f3;
    height: 64px;
    font-size: 0.9em;
    right: 0;
    z-index: 2;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

#page-engine .muc-ask label {
    color: #224249;
    margin: 23px 10px 0 16px;
    font-weight: bold;
}

#page-engine .muc-ask input {
    width: 200px;
    margin: 19px 10px 0 10px;
    padding: 3px;
}

#page-engine .tooltip {
    position: absolute;
    bottom: 84px;
    margin-left: -13px;
    z-index: 40;
    font-size: 0.8em;
    color: white;
}

#page-engine .tooltip a {
    color: white;
    text-decoration: underline;
}

#page-engine .tooltip-subitem {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    padding: 10px;
    width: 200px;
    height: 110px;
    text-shadow: 0 1px 1px black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

html[dir="rtl"] #page-engine .tooltip-subitem {
    margin-right: -10px;
}

#page-engine .tooltip-subarrow {
    background-position: 0 -251px;
    opacity: 0.8;
    height: 10px;
    width: 18px;
    margin-left: 12px;
}

html[dir="rtl"] #page-engine .tooltip-subarrow {
    margin-right: -1px;
    margin-left: auto;
}

#page-engine .tooltip .tooltip-top {
    margin-bottom: 8px;
    font-weight: bold;
}

#page-engine .tooltip label {
    margin-bottom: 4px;
    float: left;
    clear: both;
}

#page-engine .tooltip label input[type="checkbox"] {
    margin: 0 6px 0 0;
    float: left;
}

html[dir="rtl"] #page-engine .tooltip label input[type="checkbox"] {
    margin-left: 6px;
    margin-right: 0;
}

#page-engine .tooltip label.select {
    margin-top: 5px;
}

#page-engine .tooltip input,
#page-engine .tooltip select {
    float: left;
}

html[dir="rtl"] #page-engine .tooltip input,
html[dir="rtl"] #page-engine .tooltip select {
    float: right;
}

#page-engine .tooltip select {
    width: 100px;
}

#page-engine .tooltip .tooltip-actionlog:hover,
#page-engine .tooltip .tooltip-actionlog:focus {
    cursor: pointer;
    text-decoration: underline;
}

/*

Jappix - An open social platform
This is the channel CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#channel .top div.update {
    position: absolute;
    top: 12px;
    left: 115px;
    right: 15px;
    bottom: 15px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

html[dir="rtl"] #channel .top div.update {
    right: 115px;
    left: 15px;
}

#channel .top p {
    font-size: 0.9em;
    margin-bottom: 10px;
}

#channel .top h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #232323;
}

#channel .top a {
    font-size: 0.9em;
    color: #232323;
}

#channel .top.individual div.update {
    right: 36px;
}

#channel .top.individual div.shortcuts,
#userinfos .main-infos div.shortcuts {
    width: 16px;
    float: right;
}

#channel .top.individual div.shortcuts {
    margin: 2px 5px 0 0;
}

#channel .top.individual div.shortcuts a,
#userinfos .main-infos div.shortcuts a {
    height: 16px;
    width: 16px;
    margin-bottom: 4px;
    display: block;
}

#channel .top.individual div.shortcuts a.message,
#userinfos .main-infos a.message {
    background-position: 0 -1717px;
}

#channel .top.individual div.shortcuts a.chat,
#userinfos .main-infos a.chat {
    background-position: 0 -1737px;
}

#channel .top.individual div.shortcuts a.command,
#userinfos .main-infos a.command {
    background-position: 0 -1758px;
}

#channel .microblog-body {
    height: 20px;
    margin-right: 50px;
}

html[dir="rtl"] #channel .microblog-body {
    margin-right: auto;
    margin-left: 50px;
}

#channel .microblog-body input {
    width: 100%;
    height: 100%;
    padding: 8px;
}

#channel .one-microblog-icon {
    position: absolute;
    top: 38px;
    right: 0;
}

html[dir="rtl"] #channel .one-microblog-icon {
    left: 0;
    right: auto;
}

#channel div.update .one-microblog-icon,
#channel div.update .postit {
    width: 16px;
    height: 16px;
    display: block;
}

#channel div.update .attach {
    background-position: 0 -79px;
    display: none;
}

#attach {
    position: absolute;
    width: 263px;
    margin-left: -227px;
    color: white;
    font-size: 0.85em;
    z-index: 9998;
    text-align: left;
    display: none;
}

#attach p {
    margin-bottom: 6px !important;
}

#attach input[type="submit"] {
    margin: 8px 0 6px 0;
}

#attach .wait {
    float: right;
    margin: 7px 5px;
}

#attach div.one-file {
    height: 16px;
    margin-top: 2px;
}

#attach div.one-file a.link {
    color: white;
    width: 215px;
    height: 14px;
    margin-left: 2px;
    overflow: hidden;
    float: left;
}

html[dir="rtl"] #attach div.one-file a.link {
    text-align: right;
    margin-left: auto;
    margin-right: 2px;
    float: right;
}

#attach div.one-file a.remove {
    width: 16px;
    height: 16px;
    float: left;
}

html[dir="rtl"] #attach div.one-file a.remove {
    float: right;
}

.attach-subarrow {
    background-position: 0 -241px;
    opacity: 0.8;
    height: 10px;
    width: 18px;
    margin-left: 226px;
}

.attach-subitem {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    padding: 10px;
    text-shadow: 0 1px 1px black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

html[dir="rtl"] .attach-subitem {
    position: absolute;
    left: 238px;
}

.attach-p {
    font-weight: bold;
    float: left;
}

#channel .one-update {
    margin-bottom: 12px;
    padding: 6px 6px 8px 6px;
    border-bottom: 1px dotted #d0d0d0;
    min-height: 50px;
    color: black;
    position: relative;
    display: none;
}

#channel .one-update .avatar-container {
    text-align: center;
    margin-right: 16px;
    float: left;
    height: 50px;
    width: 50px;
}

html[dir="rtl"] #channel .one-update .avatar-container {
    margin-right: auto;
    margin-left: 16px;
    float: right;
}

#channel .one-update .avatar-container:hover {
    cursor: pointer;
}

#channel .one-update img.avatar {
    max-height: 50px;
    max-width: 50px;
}

#channel .one-update div.body {
    line-height: 1.4;
    margin-left: 65px;
    opacity: 0.8;
}

#channel .one-update:hover div.body {
    opacity: 1;
}

#channel .one-update a.repeat {
    background-position: 0 -1681px;
    height: 16px;
    width: 16px;
    margin-right: 4px;
    float: left;
}

#channel .one-update span a {
    text-decoration: underline;
}

#channel .one-update p {
    display: block;
    margin: 0 12px 5px 0;
}

html[dir="rtl"] #channel .one-update p {
    margin-right: auto;
    margin-left: 12px;
}

#channel .one-update p b.name:hover {
    cursor: pointer;
    text-decoration: underline;
}

html[dir="rtl"] #channel .one-update p b.name {
    margin-left: 4px;
    float: right;
}

#channel .one-update p.infos {
    font-size: 0.9em;
}

#channel .one-update p.infos a.geoloc {
    background-position: 0 -1778px;
    color: #363636;
    margin-left: 18px;
    padding-left: 14px;
}

html[dir="rtl"] #channel .one-update p.infos a.geoloc {
    float: right;
}

#channel .one-update p.infos a.geoloc:hover,
#channel .one-update p.infos a.geoloc:focus,
#channel .one-update p.infos a.geoloc:active {
    color: #141414;
}

#channel .one-update p.file {
    font-size: 0.9em;
    margin: 6px 0 5px 10px;
}

#channel .one-update p.file a.link,
#inbox .inbox-new-file a.file {
    min-height: 16px;
    padding-left: 22px;
    text-decoration: underline;
    display: block;
}

#channel .one-update p.file a.link {
    margin-top: 4px;
}

#channel p.file a,
#inbox .inbox-new-file a.file {
    background-position: 0 -988px;
}

#channel p.file a.audio,
#inbox .inbox-new-file a.file.audio {
    background-position: 0 -899px;
}

#channel p.file a.image,
#inbox .inbox-new-file a.file.image {
    background-position: 0 -917px;
}

#channel p.file a.video,
#inbox .inbox-new-file a.file.video {
    background-position: 0 -935px;
}

#channel p.file a.document,
#inbox .inbox-new-file a.file.document {
    background-position: 0 -953px;
}

#channel p.file a.package,
#inbox .inbox-new-file a.file.package {
    background-position: 0 -971px;
}

#channel .one-update p.file a.thumb img {
    border: 1px solid #a2a2a2;
    max-width: 140px;
    max-height: 105px;
    margin: 4px 10px 2px 0;
    padding: 1px;
}

#channel .one-update p.file a.thumb img:hover {
    border-color: #464646;
}

#channel .one-update div.comments,
.popup.large div.comments {
    width: 410px;
    margin: 2px 0 2px 76px;
}

html[dir="rtl"] #channel .one-update div.comments {
    margin-left: auto;
    margin-right: 76px;
}

#channel .one-update div.comments div.arrow,
.popup.large div.comments div.arrow {
    background-position: 0 -1702px;
    width: 20px;
    height: 8px;
    margin-left: 20px;
    display: block;
}

html[dir="rtl"] #channel .one-update div.comments div.arrow,
html[dir="rtl"] .popup.large div.comments div.arrow {
    margin-left: auto;
    margin-right: 20px;
}

#channel .one-update div.comments div.comments-content,
.popup.large div.comments div.comments-content {
    background-color: #e5ebec;
    color: black;
    font-size: 0.9em;
    text-shadow: 0 1px 0 white;
}

#channel .one-update div.comments input,
.popup.large div.comments input {
    width: 356px;
    margin: 6px 0;
    padding: 4px 5px;
}

#channel .one-update div.comments span.icon,
.popup.large div.comments span.icon {
    background-position: 0 -1082px;
    height: 16px;
    width: 16px;
    margin: 10px;
    float: left;
}

html[dir="rtl"] #channel .one-update div.comments span.icon,
html[dir="rtl"] .popup.large div.comments span.icon {
    float: right;
}

#channel .one-update div.comments .one-comment.loading span.icon,
.popup.large div.comments .one-comment.loading span.icon {
    margin: 0 10px 0 0;
}

html[dir="rtl"] #channel .one-update div.comments .one-comment.loading span.icon,
html[dir="rtl"] .popup.large div.comments .one-comment.loading span.icon {
    margin: 0 0 0 10px;
}

#channel .one-update div.comments .one-comment,
.popup.large div.comments .one-comment {
    border-bottom: 1px solid #f4f4f4;
    padding: 4px 8px 0 8px;
    position: relative;
    display: block;
}

#channel .one-update div.comments .one-comment.compose,
.popup.large div.comments .one-comment.compose {
    border-bottom: 2px solid #f4f4f4;
    height: 36px;
    padding: 0;
}

#channel .one-update div.comments .one-comment.new,
.popup.large div.comments .one-comment.new {
    display: none;
}

#channel .one-update div.comments a.one-comment,
.popup.large div.comments a.one-comment {
    text-decoration: none;
}

#channel .one-update div.comments a.one-comment:hover,
#channel .one-update div.comments a.one-comment:focus,
.popup.large div.comments a.one-comment:hover,
.popup.large div.comments a.one-comment:focus {
    text-decoration: underline;
}

#channel .one-update div.comments .one-comment.loading,
.popup.large div.comments .one-comment.loading {
    padding-bottom: 5px;
}

#channel .one-update div.comments .one-comment div.marker,
.popup.large div.comments .one-comment div.marker {
    background-color: #6d8387;
    width: 2px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

#channel .one-update div.comments .one-comment .avatar-container,
.popup.large div.comments .one-comment .avatar-container {
    text-align: center;
    width: 30px;
    height: 30px;
    margin: 2px 8px 0 0;
    float: left;
}

html[dir="rtl"] #channel .one-update div.comments .one-comment .avatar-container,
html[dir="rtl"] .popup.large div.comments .one-comment .avatar-container {
    margin-right: auto;
    margin-left: 8px;
    float: right;
}

#channel .one-update div.comments .one-comment .avatar-container:hover,
.popup.large div.comments .one-comment .avatar-container:hover {
    cursor: pointer;
}

#channel .one-update div.comments .one-comment img.avatar,
.popup.large div.comments .one-comment img.avatar {
    max-height: 30px;
    max-width: 30px;
}

#channel .one-update div.comments .one-comment .comment-container,
.popup.large div.comments .one-comment .comment-container {
    float: left;
}

#channel .one-update div.comments .one-comment a.name,
.popup.large div.comments .one-comment a.name {
    font-weight: bold;
    text-decoration: none;
    font-size: 0.95em;
    padding-bottom: 2px;
    float: left;
}

html[dir="rtl"] #channel .one-update div.comments .one-comment a.name,
html[dir="rtl"] .popup.large div.comments .one-comment a.name {
    float: right;
}

#channel .one-update div.comments .one-comment a.name:hover,
#channel .one-update div.comments .one-comment a.name:focus,
.popup.large div.comments .one-comment a.name:hover,
.popup.large div.comments .one-comment a.name:focus {
    text-decoration: underline;
}

#channel .one-update div.comments .one-comment span.date,
#channel .one-update div.comments .one-comment a.remove,
.popup.large div.comments .one-comment span.date,
.popup.large div.comments .one-comment a.remove {
    font-size: 0.85em;
    float: right;
}

html[dir="rtl"] #channel .one-update div.comments .one-comment span.date,
html[dir="rtl"] #channel .one-update div.comments .one-comment a.remove,
html[dir="rtl"] .popup.large div.comments .one-comment span.date,
html[dir="rtl"] .popup.large div.comments .one-comment a.remove {
    margin-left: 2px;
    float: left;
}

#channel .one-update div.comments .one-comment.me:hover span.date,
.popup.large div.comments .one-comment.me:hover span.date {
    display: none;
}

#channel .one-update div.comments .one-comment.me a.remove,
.popup.large div.comments .one-comment.me a.remove {
    display: none;
}

#channel .one-update div.comments .one-comment.me:hover a.remove,
.popup.large div.comments .one-comment.me:hover a.remove {
    display: block;
}

#channel .one-update div.comments .one-comment p.body,
.popup.large div.comments .one-comment p.body {
    clear: both;
}

#channel a.more {
    background-position: 0 -334px;
    color: black;
    height: 16px;
    text-decoration: none;
    margin: -2px 0 14px 4px;
    padding-left: 20px;
    display: block;
    visibility: hidden;
}

#channel a.more:hover,
#channel a.more:focus {
    text-decoration: underline;
}

#channel a.mbtool {
    width: 11px;
    height: 11px;
    display: none;
    position: absolute;
    right: 0;
}

html[dir="rtl"] #channel a.mbtool {
    right: auto;
    left: 0;
}

#channel .one-update:hover a.mbtool {
    display: block;
}

#channel a.mbtool:hover,
#channel a.mbtool:focus {
    text-decoration: none;
}

#channel a.mbtool.profile {
    background-position: -1px -1333px;
    top: 24px;
}

#channel a.mbtool.repost {
    background-position: -1px -1354px;
}

#channel a.mbtool.remove {
    background-position: -1px -1312px;
}

#channel a.mbtool.repost,
#channel a.mbtool.remove {
    top: 6px;
}

#channel .footer {
    bottom: 0;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#channel .footer div {
    margin-left: 5px;
    padding-left: 24px;
    min-height: 16px;
    font-size: 0.85em;
    width: auto !important;
}

html[dir="rtl"] #channel .footer div {
    float: right;
}

#channel .footer .sync {
    background-position: 0 -804px;
    display: none;
}

#channel .footer .unsync {
    background-position: 0 -830px;
    display: none;
}

/*

Jappix - An open social platform
This is the page-switch CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#page-switch {
    position: absolute;
    top: 15px;
    left: 10px;
    right: 10px;
    z-index: 9;
}

#page-switch .chans {
    position: absolute;
    left: 0;
    right: 50px;
    top: 0;
    height: 25px;
    overflow: hidden;
}

html[dir="rtl"] #page-switch .chans {
    right: 0;
    left: 40px;
}

#page-switch .join,
#page-switch .more {
    position: absolute;
    top: 0;
}

#page-switch .join {
    right: 25px;
}

html[dir="rtl"] #page-switch .join {
    left: 25px;
}

#page-switch .more {
    right: 0;
}

html[dir="rtl"] #page-switch .more {
    right: auto;
    left: 0;
}

#page-switch .join-button,
#page-switch .more-button {
    background-color: #d9e7ea;
    width: 7px;
    height: 16px;
    padding: 1px 6px;
    font-size: 0.9em;
    text-decoration: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

#page-switch .join-button {
    background-position: 4px -2136px;
}

#page-switch .more-button {
    background-position: 6px -1372px;
}

#page-switch .join-content,
#page-switch .more-content {
    background-color: #d9e7ea;
    width: 200px;
    max-height: 400px;
    overflow: auto;
    position: absolute;
    margin: -2px 0 0 -181px;
    padding: 4px 0;
    font-size: 0.95em;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

html[dir="rtl"] #page-switch .join-content,
html[dir="rtl"] #page-switch .more-content {
    margin-left: 0;
    left: 0;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 0;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 0;
    border-top-right-radius: 3px;
    border-top-left-radius: 0;
}

#page-switch .join-content input.join-groupchat-xid {
    margin: 0 0 0 6px;
    width: 170px;
}

#page-switch .switcher {
    background-color: #d9e7ea;
    color: #17353b;
    height: 15px;
    padding: 5px 10px 5px 5px;
    margin: 0 2px;
    font-size: 0.85em;
    float: left;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

html[dir="rtl"] #page-switch .switcher {
    padding-left: 10px;
    padding-right: 5px;
    float: right;
}

#page-switch .more-content .switcher {
    background-color: #d9e7ea;
    float: none !important;
    margin: 0;
    font-size: 0.9em;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

#page-switch .more-content .switcher .exit {
    display: block;
}

#page-switch .join-button:hover,
#page-switch .join-button:focus,
#page-switch .more-button:hover,
#page-switch .more-button:focus,
#page-switch .switcher:hover,
#page-switch .switcher:focus,
#page-switch .more-content .switcher:hover,
#page-switch .more-content .switcher:focus {
    background-color: #cedee1;
    cursor: pointer;
}

#page-switch .join-button:active,
#page-switch .more-button:active,
#page-switch .switcher:active,
#page-switch .more-content .switcher:active {
    background-color: #c3d3d7;
}

#page-switch .switcher.activechan {
    background-color: #e8f1f3;
}

#page-switch .more-content .switcher.activechan {
    background-color: #d1e0e3;
}

#page-switch .icon {
    height: 16px;
    width: 16px;
    float: left;
}

html[dir="rtl"] #page-switch .icon {
    float: right;
}

#page-switch .name {
    float: left;
    margin-left: 4px;
    max-height: 16px;
    max-width: 140px;
    overflow: hidden;
}

html[dir="rtl"] #page-switch .name {
    float: right;
    margin-left: 0;
    margin-right: 4px;
}

#page-switch .exit {
    display: none;
    background-color: #bdd9dc;
    border: 1px solid #80aab0;
    color: #355e64;
    height: 14px;
    width: 13px;
    margin-left: 10px;
    font-size: 0.85em;
    text-align: center;
    text-decoration: none;
    float: right;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

html[dir="rtl"] #page-switch .exit {
    margin-left: 0;
    margin-right: 10px;
    float: left;
}

#page-switch .exit:hover,
#page-switch .exit:focus {
    background-color: #aac7cb;
}

#page-switch .exit:active {
    background-color: #9bbdc1;
}

#page-switch .activechan .exit {
    display: block;
    float: right;
}

html[dir="rtl"] #page-switch .activechan .exit {
    float: left;
}

#page-switch .chan-newmessage {
    background-color: #f6edc3 !important;
}

#page-switch .chan-newmessage:hover,
#page-switch .chan-newmessage:focus {
    background-color: #f1eac0 !important;
}

#page-switch .chan-newmessage:active {
    background-color: #ede4b8 !important;
}

#page-switch .composing,
#page-engine .list .user.composing {
    color: #217021 !important;
}

#page-switch .paused,
#page-switch .chan-unread .name,
#page-engine .list .user.paused {
    color: #2431ac !important;
}

#page-switch .active,
#page-engine .list .user.active {
    color: #353535 !important;
}

#page-switch .inactive,
#page-engine .list .user.inactive {
    color: #585858 !important;
}

#page-switch .gone {
    color: #851313 !important;
}

#page-switch .channel .icon {
    background-position: 0 -55px;
}

/*

Jappix - An open social platform
This is the smileys CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

.emoticon {
    width: 16px;
    height: 16px;
}

a.emoticon {
    margin: 2px;
    float: left;
}

a.emoticon:hover,
a.emoticon:focus {
    opacity: 0.8;
}

a.emoticon:active {
    opacity: 0.7;
}

img.emoticon {
    border: 0 none;
    vertical-align: bottom;
}

.emoticon-biggrin {
    background-position: 0 0;
}

.emoticon-devil {
    background-position: -16px 0;
}

.emoticon-coolglasses {
    background-position: -32px 0;
}

.emoticon-tongue {
    background-position: -48px 0;
}

.emoticon-smile {
    background-position: -64px 0;
}

.emoticon-wink {
    background-position: -80px 0;
}

.emoticon-blush {
    background-position: -96px 0;
}

.emoticon-stare {
    background-position: -112px 0;
}

.emoticon-frowning {
    background-position: -128px 0;
}

.emoticon-oh {
    background-position: -144px 0;
}

.emoticon-unhappy {
    background-position: -160px 0;
}

.emoticon-cry {
    background-position: -176px 0;
}

.emoticon-angry {
    background-position: -192px 0;
}

.emoticon-puke {
    background-position: -208px 0;
}

.emoticon-hugright {
    background-position: -224px 0;
}

.emoticon-hugleft {
    background-position: -240px 0;
}

.emoticon-lion {
    background-position: -256px 0;
}

.emoticon-pussy {
    background-position: -272px 0;
}

.emoticon-bat {
    background-position: -288px 0;
}

.emoticon-kiss {
    background-position: -304px 0;
}

.emoticon-heart {
    background-position: -320px 0;
}

.emoticon-brheart {
    background-position: -336px 0;
}

.emoticon-flower {
    background-position: -352px 0;
}

.emoticon-brflower {
    background-position: -368px 0;
}

.emoticon-thumbup {
    background-position: -384px 0;
}

.emoticon-thumbdown {
    background-position: -400px 0;
}

.emoticon-lamp {
    background-position: -416px 0;
}

.emoticon-coffee {
    background-position: -432px 0;
}

.emoticon-drink {
    background-position: -448px 0;
}

.emoticon-beer {
    background-position: -464px 0;
}

.emoticon-boy {
    background-position: -480px 0;
}

.emoticon-girl {
    background-position: -496px 0;
}

.emoticon-phone {
    background-position: -512px 0;
}

.emoticon-photo {
    background-position: -528px 0;
}

.emoticon-music {
    background-position: -544px 0;
}

.emoticon-cuffs {
    background-position: -560px 0;
}

.emoticon-mail {
    background-position: -576px 0;
}

.emoticon-rainbow {
    background-position: -592px 0;
}

.emoticon-star {
    background-position: -608px 0;
}

.emoticon-moon {
    background-position: -624px 0;
}

/*

Jappix - An open social platform
This is the popup CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

.lock {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.6);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 9999;
}

.popup {
    background-color: rgb(20,20,20);
    background-color: rgba(20,20,20,0.95);
    margin-top: -250px;
    margin-left: -330px;
    width: 640px;
    height: 500px;
    padding: 0 10px;
    position: absolute;
    z-index: 10000;
    left: 50%;
    top: 50%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 35px #232323;
    -webkit-box-shadow: 0 0 35px #232323;
    box-shadow: 0 0 35px #232323;
}

.popup.large {
    margin-left: -460px;
    width: 920px;
}

.popup .top {
    width: 600px;
    height: 45px;
    font-size: 1.2em;
    padding-top: 9px;
    color: white;
    margin: 14px 0 0 40px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 2px 2px black;
}

html[dir="rtl"] .popup .top {
    margin-right: 40px;
    margin-left: auto;
}

.popup .tab {
    width: 620px;
    height: 25px;
    margin: -5px 10px 0 10px;
    position: relative;
    z-index: 1;
}

.popup .tab a {
    background-color: #d9e7ea;
    color: #204249;
    width: 180px;
    height: 17px;
    padding: 4px 4px 4px 16px;
    margin-left: 5px;
    font-size: 0.94em;
    overflow: hidden;
    float: left;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

html[dir="rtl"] .popup .tab a {
    margin-left: 0;
    margin-right: 5px;
    padding-left: 4px;
    padding-right: 16px;
    float: right;
}

.popup .tab a:hover,
.popup .tab a:focus {
    background-color: #cedee1;
    text-decoration: none;
}

.popup .tab a:active {
    background-color: #c3d3d7;
    text-decoration: none;
}

.popup .tab a.tab-active {
    background-color: #e4eef9 !important;
}

.popup .one-lap {
    display: none;
}

.popup .one-lap.lap-active {
    display: block;
}

.popup .content {
    background: #e4eef9;
    background: -moz-linear-gradient(top, #e4eef9, #d0e5fa);
    background: -webkit-gradient(linear, left top, left bottom, from(#e4eef9), to(#d0e5fa));
    background: -webkit-linear-gradient(top, #e4eef9 0%, #d0e5fa 100%);
    background: -o-linear-gradient(top, #e4eef9 0%, #d0e5fa 100%);
    height: 358px;
    width: 640px;
    position: absolute;
    left: 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 20px black;
    -webkit-box-shadow: 0 0 20px black;
    box-shadow: 0 0 20px black;
}

.popup .content,
.popup .content a {
    color: #112a2f;
}

.popup.large div.comments {
    background-color: #f4f4f4;
    width: 272px;
    margin: 0;
    position: absolute;
    right: 10px;
    top: 63px;
    bottom: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.popup.large div.comments div.comments-content {
    font-size: 0.8em;
}

.popup.large div.comments input {
    width: 185px;
    min-width: 0;
}

.popup.large div.comments .one-comment {
    padding-bottom: 4px;
}

.popup.large div.comments .one-comment a {
    text-decoration: underline;
}

.popup.large div.comments div.comments-content {
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.popup .head {
    background: #f1f6fd;
    border: 1px #9dc4fc solid;
    width: 606px;
    height: 24px;
    margin: 0 10px 10px 10px;
    padding: 6px;
}

.popup .head-text {
    float: left;
    font-size: 0.9em;
    margin: 3px;
}

html[dir="rtl"] .popup .head-text {
    float: right;
}

.popup .head-actions {
    float: right;
    margin-top: 2px;
}

html[dir="rtl"] .popup .head-actions {
    float: left;
}

.popup .head-actions a {
    font-size: 0.9em;
    margin: 0 4px;
}

.popup .actions a {
    color: #30575f;
    font-size: 0.9em;
    margin-left: 5px;
}

.popup .head .head-input {
    float: right;
    width: 200px;
    padding: 2px;
}

html[dir="rtl"] .popup .head .head-input {
    float: left;
}

.popup .head .head-select {
    float: right;
    height: 24px;
}

html[dir="rtl"] .popup .head .head-select {
    float: left;
}

.popup .forms {
    font-size: 13.4px;
    width: 390px;
    height: 328px;
    margin: 15px;
    float: left;
}

.popup fieldset {
    border: 1px #547177 solid;
    margin: 0 0 15px 0;
    padding: 8px 2px 3px 2px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.popup legend {
    font-size: 0.9em;
    margin: 0 0 0 15px;
    padding: 0 2px;
    text-transform: uppercase;
}

.popup label {
    color: #1b1b1b;
    width: 150px;
    margin: 0 0 10px 12px;
    clear: both;
    float: left;
}

html[dir="rtl"] .popup label {
    margin-left: auto;
    margin-right: 12px;
    float: right;
}

.popup input,
.popup select {
    margin: 0 10px 10px 0;
    float: left;
}

html[dir="rtl"] .popup input,
html[dir="rtl"] .popup select {
    margin-right: 0;
    margin-left: 10px;
    float: right;
}

.popup input[type="text"] {
    min-width: 174px;
}

.popup select {
    min-height: 20px;
}

.popup .results {
    height: 310px;
    width: 620px;
    margin: -5px 0 0 10px;
    padding: 6px 0 0 0;
    overflow: auto;
}

html[dir="rtl"] .popup .results {
    margin-left: auto;
    margin-right: 10px;
}

.popup .results .no-results {
    margin: 6px 0;
    font-size: 0.85em;
    font-weight: bold;
}

.popup .results label {
    width: 180px;
    margin: 6px 4px 4px 4px;
}

.popup .results input,
.popup .results textarea,
.popup .results select {
    margin: 4px;
}

.popup .results input,
.popup .results select {
    min-width: 180px;
}

.popup .results input[type="checkbox"],
.popup .results input[type="radio"] {
    margin-top: 7px;
}

.popup .results textarea {
    width: 380px;
}

.popup .results .avatar-container {
    float: left;
    width: 60px;
    height: 60px;
    margin: 5px 12px 5px 9px;
    text-align: center;
    background-repeat: no-repeat;
}

html[dir="rtl"] .popup .results .avatar-container {
    margin-left: 12px;
    margin-right: 9px;
    float: right;
}

.popup .results img.avatar {
    max-width: 60px;
    max-height: 60px;
}

.popup .results .one-icon {
    height: 16px;
    width: 16px;
    margin: 10px 3px 0 8px;
    float: left;
}

html[dir="rtl"] .popup .results .one-icon {
    margin-left: 3px;
    margin-right: 8px;
    float: right;
}

.popup .results .one-icon.account,
.popup .results .one-icon.auth {
    background-position: 0 -777px;
}

.popup .results .one-icon.automation,
.popup .results .one-icon.client {
    background-position: 0 -1500px;
}

.popup .results .one-icon.collaboration {
    background-position: 0 -1520px;
}

.popup .results .one-icon.proxy,
.popup .results .one-icon.server,
.popup .results .one-icon.others {
    background-position: 0 -1540px;
}

.popup .results .one-icon.component,
.popup .results .one-icon.gateway {
    background-position: 0 -1560px;
}

.popup .results .one-icon.conference {
    background-position: 0 -1082px;
}

.popup .results .one-icon.directory {
    background-position: 0 -876px;
}

.popup .results .one-icon.headline,
.popup .results .one-icon.hierarchy {
    background-position: 0 -1580px;
}

.popup .results .one-icon.pubsub,
.popup .results .one-icon.store {
    background-position: 0 -1600px;
}

.popup .results .one-icon.loading {
    background-position: 0 -1620px;
}

.popup .results .one-icon.down {
    background-position: 0 -1640px;
}

.popup .results .one-host {
    font-weight: bold;
    width: 170px;
}

html[dir="rtl"] .popup .results .one-host {
    float: right;
}

.popup .results .one-type {
    width: 210px;
}

.popup .results .one-type,
.popup .results .one-host {
    float: left;
    overflow: hidden;
    margin: 9px 8px;
}

html[dir="rtl"] .popup .results .one-type,
html[dir="rtl"] .popup .results .one-host {
    float: right;
}

.popup .results .one-jid,
.popup .results .one-ctry,
.popup .results .one-fn {
    margin: 4px;
    width: 400px;
}

html[dir="rtl"] .popup .results .one-jid,
html[dir="rtl"] .popup .results .one-ctry,
html[dir="rtl"] .popup .results .one-fn {
    float: right;
}

.popup .results .one-fn {
    font-weight: bold;
}

.popup .results .one-jid {
    margin-top: 8px;
    font-size: 0.9em;
}

.popup .results .one-name {
    float: left;
    margin: 4px;
}

html[dir="rtl"] .popup .results .one-name {
    float: right;
}

.popup a.one-button {
    display: none;
    background-color: #f1f6fd;
    border: 1px solid #b9cbcf;
    margin-top: 1px;
    padding: 4px 8px;
    text-decoration: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.popup a.one-button:hover,
.popup a.one-button:focus {
    border: 1px solid #95b1b7;
}

.popup a.one-button:active {
    border: 1px solid #77989f;
}

.popup .results .oneresult:hover a.one-button {
    display: block;
}

.popup .results a.one-button,
#inbox .one-message a.one-button {
    float: right;
    padding: 3px 6px;
    margin-right: 4px;
}

html[dir="rtl"] .popup .results a.one-button,
html[dir="rtl"] #inbox .one-message a.one-button {
    float: left;
    margin-left: 4px;
    margin-right: auto;
}

.popup .results a.one-vjud {
    position: absolute;
    right: 4px;
}

html[dir="rtl"] .popup .results a.one-vjud {
    left: 4px;
    right: auto;
}

.popup .results a.one-add {
    top: 8px;
}

.popup .results a.one-chat,
.popup .results a.one-profile {
    top: 42px;
}

.popup .results .one-next {
    float: right;
    margin: 4px 8px 4px 4px;
    font-weight: bold;
}

html[dir="rtl"] .popup .results .one-next {
    margin-right: 4px;
    margin-left: 8px;
    float: left;
}

.popup .results .one-actions {
    width: 148px;
    margin: 4px;
    float: left;
}

.popup .results .one-actions a {
    width: 16px;
    height: 16px;
    padding: 2px 2px 4px 5px !important;
    margin-top: 2px;
}

.popup .results .one-actions a.browse {
    background-position: 3px -1396px;
}

.popup .results .one-actions a.command {
    background-position: 3px -1415px;
}

.popup .results .one-actions a.subscribe {
    background-position: 4px -1435px;
}

.popup .results .one-actions a.join {
    background-position: 3px -1455px;
}

.popup .results .one-actions a.search {
    background-position: 4px -1475px;
}

.popup .results a.submit,
.popup .results a.cancel,
.popup .results a.back {
    margin-right: 8px;
    float: right;
}

.popup .onetitle {
    font-size: 0.9em;
    padding: 4px;
    font-weight: bold;
}

.popup .oneinstructions {
    font-size: 0.9em;
    padding: 4px;
    margin: 8px 0;
}

.popup .oneresult {
    font-size: 0.9em;
    padding: 3px 0 4px 4px;
    border-bottom: 1px #9dc4fc solid;
    overflow: hidden;
    position: relative;
}

.popup .oneresult:hover {
    background: #e9f1fd;
}

.popup .oneresult[onclick]:hover {
    cursor: pointer;
}

.popup .oneresult[onclick]:active {
    background: #f1f6fd;
}

.popup .infos {
    background-color: rgb(255,239,104);
    background-color: rgba(255,239,104,0.8);
    border: 1px #decb2f solid;
    color: #3f3f3f;
    padding: 8px;
    margin: 10px;
    font-size: 0.8em;
}

.popup .infos p {
    margin-top: 10px;
}

.popup .infos p.infos-title {
    font-weight: bold;
}

.popup .bottom {
    width: 640px;
    height: 40px;
    position: absolute;
    bottom: 8px;
}

.popup .wait {
    display: none;
    margin: 8px 0 0 3px;
    float: left;
}

a.finish,
#suggest a.next {
    border: 1px solid white;
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.1);
    color: white;
    padding: 4px 8px;
    margin-right: 7px;
    font-size: 0.95em;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px black;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
}

a.finish:hover,
a.finish:focus,
#suggest a.next:hover,
#suggest a.next:focus {
    cursor: pointer;
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.2);
    -moz-box-shadow: 0 0 15px black;
    -webkit-box-shadow: 0 0 15px black;
    box-shadow: 0 0 15px black;
}

a.finish:active,
#suggest a.next:active {
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.3);
}

a.finish.disabled,
#suggest a.next.disabled {
    opacity: 0.2;
}

a.finish.disabled:hover,
a.finish.disabled:focus,
a.finish.disabled:active,
#suggest a.next.disabled:hover,
#suggest a.next.disabled:focus,
#suggest a.next.disabled:active {
    cursor: default;
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.1);
}

.popup a.finish {
    margin-top: 6px;
    float: right;
}

/*

Jappix - An open social platform
This is the vCard CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#vcard label {
    font-size: 0.94em;
    margin-top: 2px;
}

#vcard #vcard-avatar input[type="file"] {
    margin-left: 15px;
}

#vcard .avatar-container {
    float: left;
    text-align: center;
    margin: 20px 0 35px 35px;
    max-width: 96px;
    max-height: 96px;
}

html[dir="rtl"] #vcard .avatar-container {
    margin-right: 35px;
    margin-left: 0;
    float: right;
}

#vcard .avatar {
    max-width: 96px;
    max-height: 96px;
}

#vcard .avatar-delete {
    background-position: 3px -1195px;
    margin: 12px 25px 0 25px;
    padding-left: 20px;
    font-size: 0.9em;
    float: right;
}

html[dir="rtl"] #vcard .avatar-delete {
    float: left;
}

#vcard .no-avatar {
    width: 300px;
    color: #7c2222;
    padding: 10px;
    margin: 15px 0 20px 40px;
    background: #f8cece;
    border: 1px #ba6d6d solid;
    font-size: 0.8em;
}

html[dir="rtl"] #vcard .no-avatar {
    margin-left: auto;
    margin-right: 20px;
}

#vcard .forms textarea {
    height: 111px;
    width: 358px;
    margin: 5px 12px 10px 12px;
}

#vcard .forms .avatar-info {
    border-width: 1px;
    border-style: solid;
    display: none;
    width: 370px;
    height: 15px;
    font-size: 0.85em;
    padding: 10px;
}

#vcard .forms .avatar-wait {
    background-color: #9bcbed;
    color: #0a3858;
    border-color: #306780;
}

#vcard .forms .avatar-ok {
    background-color: #c4ed9b;
    color: #325213;
    border-color: #578030;
}

#vcard .forms .avatar-error {
    background-color: #e79595;
    color: #6a0b0b;
    border-color: #7c1010;
}

#vcard .infos {
    width: 179px;
    height: 328px;
    margin: 15px 15px 15px 0;
    padding: 0 8px;
    float: right;
}

#vcard .infos a {
    text-decoration: underline;
}

#vcard .send {
    float: right;
}

#vcard .send:hover {
    cursor: pointer;
}

/*

Jappix - An open social platform
This is the options CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#options label {
    width: 190px;
    font-size: 0.94em;
}

#options .forms {
    width: 610px;
    height: 328px;
    margin: 15px 15px 15px 15px;
    float: left;
}

#options .forms select {
    margin-top: -3px;
    min-width: 120px;
    float: left;
}

html[dir="rtl"] #options .forms select {
    float: right;
}

#options .forms a.linked {
    font-size: 0.9em;
    float: left;
}

#options .forms a.empty-archives {
    margin-top: -2px;
    margin-left: 5px;
}

html[dir="rtl"] #options .forms a.linked {
    float: right;
}

#options .forms.in_background fieldset {
    opacity: 0.5;
}

#options fieldset.privacy {
    display: none;
}

#options .sub-ask-delete, #options .sub-ask-pass, #options .sub-ask-pass-success {
    display: none;
}

#options .sub-ask {
    background: #cbdde1;
    border: 1px #879da2 dotted;
    width: 592px;
    padding: 8px;
    display: none;
    position: absolute;
    bottom: 15px;
}

#options .sub-ask-top {
    font-size: 0.9em;
    margin-top: -3px;
}

#options .sub-ask-title {
    margin-bottom: 4px;
    float: left;
}

#options .sub-ask-close {
    float: right;
}

#options .sub-ask-close:hover {
    cursor: pointer;
}

#options .sub-ask-content {
    clear: both;
    height: 25px;
    font-size: 0.9em;
    border-top: 1px #416972 solid;
    padding: 12px 0 0 0;
}

#options .sub-ask-content label {
    width: 125px;
}

#options .sub-ask-content input {
    width: 125px;
}

#options .sub-ask-bottom {
    clear: both;
    font-size: 0.9em;
    float: right;
    text-decoration: underline;
}

#options .sub-ask-bottom:hover {
    cursor: pointer;
}

/*

Jappix - An open social platform
This is the favorites CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#favorites .content {
    padding: 10px 0 10px 0;
}

#favorites .fedit-head-select {
    min-width: 190px;
    max-width: 210px;
}

#favorites .switch-fav {
    margin: 0 10px 0 10px;
    width: 200px;
    height: 355px;
    border-right: 1px #c0c0c0 dotted;
    float: left;
}

#favorites .room-switcher {
    width: 188px;
    height: 18px;
    border-bottom: 1px #9dc4fc solid;
    float: left;
    padding: 10px 6px;
    font-size: 0.9em;
}

#favorites .room-switcher:hover {
    background-color: #e9f1fd;
    cursor: pointer;
}

#favorites .room-switcher:active {
    background-color: #f1f6fd;
}

#favorites .switch-fav .icon {
    float: left;
    height: 16px;
    width: 16px;
    margin: 0 8px 0 0;
}

#favorites .switch-fav .room-list .list-icon {
    background-position: 0 -855px;
}

#favorites .switch-fav .room-search .search-icon {
    background-position: 0 -876px;
}

#favorites .static-fav {
    width: 385px;
    height: 335px;
    margin: 0 10px 0 0;
    padding: 10px;
    float: right;
}

#favorites .favorites-search {
    display: none;
}

#favorites .static-fav-head {
    width: 393px;
    margin: -10px;
}

#favorites .static-fav-results {
    width: 406px;
    height: 314px;
    margin: 10px -10px -10px -10px;
    padding: 6px 0 0 0;
}

#favorites .fedit-line {
    height: 30px;
    font-size: 0.9em;
    padding: 10px 0 4px 4px;
    border-bottom: 1px #9dc4fc solid;
}

#favorites .fedit-line:hover {
    background: #e9f1fd;
}

#favorites label {
    width: 140px;
    margin-top: 3px;
}

#favorites input {
    height: 18px;
    width: 186px;
    margin-top: 0;
    padding: 2px;
}

#favorites .fedit-select {
    min-width: 160px;
}

#favorites .fedit-actions {
    margin: 10px 0 0;
    font-size: 0.9em;
    float: right;
}

#favorites input[type="checkbox"] {
    margin-top: 5px;
    width: auto;
}

#favorites .fedit-terminate {
    float: right;
}

#favorites .fedit-add {
    display: block;
}

#favorites .fedit-edit {
    background-position: 2px -1240px;
}

#favorites .fedit-remove {
    margin: 0 8px 0 0;
}

#favorites .add,
.popup .results .one-button.one-add {
    background-position: 3px -1177px;
}

#favorites .remove,
#inbox .remove {
    background-position: 3px -1196px;
}

#favorites .join,
#inbox .reply,
#inbox .send,
.popup .results .one-button.one-chat,
.popup .results a.one-profile {
    background-position: 3px -124px;
}

#favorites .one-button,
#inbox .one-button,
.popup .results .one-button {
    padding-left: 20px !important;
    font-size: 0.98em;
}

#favorites .fsearch-results {
    overflow: auto;
}

#favorites .room-name {
    margin: 4px 2px 5px;
    max-width: 210px;
    float: left;
}

html[dir="rtl"] #favorites .room-name {
    float: right;
}

#favorites .fsearch-noresults {
    display: none;
    font-size: 0.9em;
    font-weight: bold;
}

/*

Jappix - An open social platform
This is the discovery CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#discovery .content {
    padding: 10px 0 10px 0;
}

#discovery .content p {
    margin: 5px 10px 5px 10px;
    text-align: justify;
    font-size: 0.85em;
}

#discovery .discovery-head,
#directory .directory-head,
#rosterx .rosterx-head,
#privacy .privacy-head {
    width: 606px;
    height: 24px;
    margin: 0 10px 10px 10px;
    padding: 6px;
    background: #f1f6fd;
    border: 1px #9dc4fc solid;
}

#discovery .disco-server-text,
#directory .directory-server-text {
    float: left;
    font-size: 0.9em;
    margin: 3px;
}

html[dir="rtl"] #discovery .disco-server-text,
html[dir="rtl"] #directory .directory-server-text {
    float: right;
}

#discovery .disco-server-input,
#directory .directory-server-input {
    width: 200px;
    height: 18px;
    float: right;
    margin-right: 10px;
    padding: 2px;
}

html[dir="rtl"] #discovery .disco-server-input,
html[dir="rtl"] #directory .directory-server-input {
    margin-right: 0;
    margin-left: 10px;
    float: left;
}

#discovery .disco-category {
    display: none;
    margin-bottom: 22px;
}

#discovery .disco-category-title {
    font-weight: bold;
}

#discovery .one-actions .one-button {
    float: right;
}

html[dir="rtl"] #discovery .one-actions .one-button {
    float: left;
}
/*

Jappix - An open social platform
This is the directory tool CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#directory .content {
    padding: 10px 0 10px 0;
}

/*

Jappix - An open social platform
This is the Ad-Hoc CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#adhoc .content {
    padding: 10px 0 10px 0;
}

#adhoc .adhoc-head {
    background-color: #f1f6fd;
    border: 1px #9dc4fc solid;
    width: 598px;
    height: 18px;
    font-size: 0.9em;
    margin: 0 10px 12px 10px;
    padding: 6px 10px;
}

#adhoc .one-actions .one-button {
    float: right;
}
/*

Jappix - An open social platform
This is the privacy CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#privacy .content {
    padding: 10px 0 10px 0;
}

#privacy .privacy-head div.list-left,
#privacy .privacy-head div.list-center,
#privacy .privacy-head div.list-right,
#privacy .privacy-first {
    float: left;
}

html[dir="rtl"] #privacy .privacy-head div.list-left,
html[dir="rtl"] #privacy .privacy-head div.list-center,
html[dir="rtl"] #privacy .privacy-head div.list-right {
    float: right;
}

#privacy .privacy-head div.list-left {
    margin-left: 5px;
}

#privacy .privacy-head div.list-center {
    border-right: 1px dotted #1b393f;
    height: 24px;
    width: 1px;
    margin-right: 15px;
    padding-left: 18px;
}

#privacy .privacy-head span,
#privacy .privacy-head a,
#privacy .privacy-item span,
#privacy .privacy-item a {
    float: left;
}

#privacy .privacy-head span {
    font-size: 0.9em;
    font-weight: bold;
    margin: 3px 10px 0 0;
}

html[dir="rtl"] #privacy .privacy-head span {
    margin-right: auto;
    margin-left: 10px;
    float: right;
}

#privacy .privacy-head input,
#privacy .privacy-head select {
    width: 180px;
}

#privacy .privacy-head input {
    margin-top: 1px;
}

#privacy .privacy-head select {
    margin-bottom: 0;
    margin-top: 2px;
}

html[dir="rtl"] #privacy .privacy-head select {
    margin-right: 0;
    margin-left: 10px;
}

#privacy .privacy-item select {
    margin-top: -2px;
}

#privacy .privacy-head span.left-space {
    margin-left: 16px;
}

#privacy .privacy-head a,
#privacy .privacy-item a {
    width: 20px;
    height: 20px;
    padding: 0;
    display: block;
}

#privacy .privacy-item a.item-add {
    background-position: 2px -1178px;
}

#privacy .privacy-head a.list-remove,
#privacy .privacy-item a.item-remove {
    background-position: 2px -1197px;
}

#privacy .privacy-item a.item-save {
    background-position: 3px -126px;
    width: auto;
    height: 19px;
    padding: 1px 7px 0 21px;
}

#privacy .privacy-item,
#privacy form,
#privacy .privacy-active {
    clear: both;
}

#privacy .privacy-item {
    margin: 17px 12px;
    font-size: 0.9em;
}

#privacy .privacy-item span {
    font-weight: bold;
}

html[dir="rtl"] #privacy .privacy-item span {
    margin-top: -5px;
    float: right;
}

#privacy .privacy-item select {
    width: 300px;
    margin: -4px 30px 0 10px;
}

html[dir="rtl"] #privacy .privacy-item select {
    margin-right: 10px;
    margin-left: 30px;
}

#privacy .privacy-item a {
    margin: -2px 6px 0 0;
}

html[dir="rtl"] #privacy .privacy-form input {
    margin-right: auto;
    margin-left: 10px;
}

#privacy .privacy-first,
#privacy .privacy-second,
#privacy .privacy-third {
    height: 195px;
    font-size: 0.9em;
    margin: 10px 0 0 10px;
    float: left;
}

html[dir="rtl"] #privacy .privacy-first,
html[dir="rtl"] #privacy .privacy-second,
html[dir="rtl"] #privacy .privacy-third {
    margin-right: 10px;
    margin-left: auto;
    float: right;
}

#privacy .privacy-first,
#privacy .privacy-second {
    border-width: 0 1px 0 0;
    border-style: dotted;
    border-color: #1b393f;
    padding-right: 14px;
}

html[dir="rtl"] #privacy .privacy-first,
html[dir="rtl"] #privacy .privacy-second {
    border-width: 0 0 0 1px;
}

#privacy .privacy-first {
    width: 125px;
}

#privacy .privacy-first label {
    margin: 50px 0 0 15px;
}

#privacy .privacy-first label input {
    margin-top: 2px;
}

#privacy .privacy-second {
    width: 205px;
}

#privacy .privacy-second label {
    margin: 2px 0 0 12px;
}

#privacy .privacy-second input[type="radio"],
#privacy .privacy-third input[type="checkbox"] {
    margin-top: 2px;
    margin-bottom: 2px;
}

#privacy .privacy-second input[type="text"],
#privacy .privacy-second select {
    width: 170px;
    margin: 2px 0 11px 12px;
    float: none;
}

#privacy .privacy-third label {
    width: auto;
    margin-top: 11px;
}

#privacy .privacy-third {
    width: 240px;
}

#privacy .privacy-active {
    margin: 34px 16px 0 16px;
    font-size: 0.9em;
}

#privacy .privacy-active-elements {
    float: right;
}

html[dir="rtl"] #privacy .privacy-active-elements {
    float: left;
}

#privacy .privacy-active input[type="text"] {
    width: 30px;
    margin: 0 0 0 8px;
    float: none;
}

html[dir="rtl"] #privacy .privacy-active input[type="text"] {
    margin-left: auto;
    margin-right: 8px;
}

#privacy .privacy-active input[type="checkbox"] {
    margin: 3px 5px 0 0;
    float: left;
}

html[dir="rtl"] #privacy .privacy-active input[type="checkbox"] {
    margin-left: 5px;
    margin-right: 14px;
    float: right;
}

#privacy .privacy-active label {
    width: auto;
    margin: 0 15px 0 0;
    clear: none;
}

html[dir="rtl"] #privacy .privacy-active label {
    margin-right: 0;
}
/*

Jappix - An open social platform
This is the inbox CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#inbox .content {
    padding: 10px 0 10px 0;
}

#inbox .content p {
    margin: 3px 10px;
    text-align: justify;
    font-size: 0.9em;
}

#inbox .inbox-results {
    height: 310px;
    width: 620px;
    margin: -5px 0 0 10px;
    padding: 6px 0 0 0;
    overflow: auto;
}

html[dir="rtl"] #inbox .inbox-results {
    margin-left: auto;
    margin-right: 10px;
}

#inbox .message-unread {
    background-color: #E9F1FD;
}

#inbox .one-message {
    font-size: 0.9em;
    border-bottom: 1px #b2c7cb solid;
}

#inbox .message-head {
    padding: 6px 0 7px 4px;
    overflow: hidden;
}

#inbox .message-head:hover {
    background-color: #e9f1fd;
    cursor: pointer;
}

#inbox .message-head:active {
    background-color: #f1f6fd;
}

#inbox .one-message.message-reading,
#inbox .one-message.message-reading .message-head {
    background-color: #f1f6fd;
}

html[dir="rtl"] #inbox .one-message a.one-button {
    float: right;
}

#inbox .avatar-container {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 7px;
    text-align: center;
    background-repeat: no-repeat;
}

html[dir="rtl"] #inbox .avatar-container {
    margin-left: 7px;
    margin-right: auto;
    float: right;
}

#inbox .avatar {
    max-width: 40px;
    max-height: 40px;
}

#inbox .message-jid,
#inbox .message-subject {
    float: left;
    margin: 0 2px;
    overflow: hidden;
}

html[dir="rtl"] #inbox .message-jid,
html[dir="rtl"] #inbox .message-subject {
    float: right;
}

#inbox .message-jid {
    width: 165px;
    font-weight: bold;
}

#inbox .message-subject {
    width: 355px;
}

#inbox .message-truncated {
    color: #42646b;
    font-size: 0.8em;
    margin: 23px 0 0 49px;
}

#inbox .message-body {
    padding: 8px 5px 5px 5px;
}

#inbox .message-body a {
    text-decoration: underline;
}

#inbox .message-meta {
    margin-top: 6px;
    padding: 3px 4px;
    border-top: 1px #b2c7cb dotted;
}

#inbox .message-meta span.date {
    color: #28474e;
    font-size: 0.8em;
    margin: 10px 0 0 4px;
    float: left;
}

#inbox .message-meta a {
    font-size: 0.98em;
    margin: 5px;
    float: right;
    display: block;
}

#inbox .inbox-noresults {
    font-weight: bold;
    display: none;
}

#inbox .a-show-messages {
    display: none;
}

#inbox .inbox-new {
    display: none;
    height: 300px;
    width: 620px;
    margin: -5px 0 0 10px;
    padding: 16px 0 0 0;
}

#inbox .inbox-new-block {
    border-top: 1px #686868 dotted;
    padding-top: 9px;
    min-height: 32px;
    clear: both;
}

#inbox .inbox-new-text {
    float: left;
    width: 100px;
}

#inbox .inbox-new-textarea {
    width: 460px;
    height: 109px;
    margin-bottom: 10px;
    float: left;
}

#inbox .inbox-new input {
    float: left;
}

html[dir="rtl"] #inbox .inbox-new-text,
html[dir="rtl"] #inbox .inbox-new-textarea,
html[dir="rtl"] #inbox .inbox-new input {
    float: right;
}

html[dir="rtl"] #inbox .inbox-new-text {
    margin-right: 20px;
}

html[dir="rtl"] #inbox .inbox-new input {
    margin-right: auto;
}

#inbox .inbox-new-to ul {
    width: 264px;
    max-height: 168px;
    font-size: 0.9em;
    left: 120px;
    top: 31px;
}

html[dir="rtl"] #inbox .inbox-new-to ul {
    left: auto;
    right: 130px;
}

#inbox .inbox-new-to-input {
    width: 260px;
}

#inbox .inbox-new-subject-input {
    width: 380px;
}

#inbox .inbox-new-file a {
    display: block;
    float: left;
}

#inbox .inbox-new-file a.file {
    font-size: 0.85em;
    height: 16px;
    max-width: 320px;
    margin: 3px 0 15px 013px;
    overflow: hidden;
}

#inbox .inbox-new-file a.one-button {
    font-size: 0.85em;
    margin: -2px 0 0 25px;
}

#inbox .inbox-new-send a {
    font-size: 0.85em;
    float: right;
    display: block;
}

html[dir="rtl"] #inbox .inbox-new-send a {
    margin-right: 18px;
}
/*

Jappix - An open social platform
This is the mucadmin CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#mucadmin .content {
    padding: 10px 0 10px 0;
}

#mucadmin .content p {
    margin: 5px 10px 5px 10px;
    text-align: justify;
}

html[dir="rtl"] #mucadmin .mucadmin-head-text {
    float: right;
}

#mucadmin .mucadmin-head-jid {
    text-decoration: underline;
    font-size: 0.9em;
    float: right;
    margin: 2px 4px 1px 1px;
}

html[dir="rtl"] #mucadmin .mucadmin-head-jid {
    margin-left: 4px;
    margin-right: 1px;
    float: left;
}

#mucadmin .mucadmin-forms {
    height: 310px;
    width: 620px;
    margin: -5px 0 0 10px;
    padding: 6px 0 0 0;
    overflow: auto;
}

html[dir="rtl"] #mucadmin .mucadmin-forms {
    margin-left: 0;
    margin-right: 10px;
}

#mucadmin .mucadmin-forms label {
    width: 260px;
}

#mucadmin .mucadmin-topic label,
#mucadmin .mucadmin-aut label,
#mucadmin .mucadmin-others label {
    font-size: 0.9em;
}

#mucadmin .mucadmin-forms textarea {
    height: 60px;
    width: 300px;
    margin: 5px 12px 10px 0;
}

html[dir="rtl"] #mucadmin .mucadmin-forms textarea {
    margin-right: 0;
}

#mucadmin .results {
    height: auto;
    width: auto;
    overflow: visible;
    margin: 5px;
}

#mucadmin .aut-group {
    float: left;
    padding-bottom: 4px;
}

html[dir="rtl"] #mucadmin .aut-group {
    float: right;
}

#mucadmin .one-aut {
    clear: both;
    margin: 0 10px 5px 0;
}

html[dir="rtl"] #mucadmin .one-aut {
    margin-right: 0;
    margin-left: 10px;
}

#mucadmin .aut-add {
    clear: both;
    float: left;
    margin-bottom: 5px;
    font-size: 0.9em;
}

html[dir="rtl"] #mucadmin .aut-add {
    float: right;
}

#mucadmin .aut-remove {
    float: left;
}

html[dir="rtl"] #mucadmin .aut-remove {
    float: right;
}

#mucadmin .aut-remove:hover,
#mucadmin .aut-remove:focus {
    font-weight: bold;
    text-decoration: none;
}

#mucadmin .mucadmin-others a {
    float: left;
    font-size: 0.9em;
}

html[dir="rtl"] #mucadmin .mucadmin-others a {
    float: right;
}
/*

Jappix - An open social platform
This is the integratebox CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#integratebox .top {
    height: 40px;
}

#integratebox .content {
    text-align: center;
    height: 385px;
}

#integratebox .one-media img {
    max-height: 385px;
    max-width: 640px;
}

#integratebox .one-media a img {
    border: none;
}

#integratebox .one-media audio {
    margin-top: 170px;
}

#integratebox .bottom {
    left: 10px;
}
/*

Jappix - An open social platform
This is the user-infos CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#userinfos .content {
    overflow: auto;
}

#userinfos .one-lap a {
    text-decoration: underline;
}

#userinfos .main-infos {
    margin: 20px 20px 8px 20px;
    height: 120px;
    background: white;
    position: relative;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

#userinfos .avatar-container {
    float: left;
    text-align: center;
    margin: 20px 35px;
    width: 80px;
    height: 80px;
}

html[dir="rtl"] #userinfos .avatar-container {
    float: right;
}

#userinfos .avatar {
    max-width: 80px;
    max-height: 80px;
}

#userinfos h1,
#userinfos h2,
#userinfos h3 {
    width: 410px;
    overflow: hidden;
}

#userinfos h1 {
    font-size: 2em;
    padding-top: 12px;
    margin-bottom: 4px;
}

#userinfos h2 {
    color: #447079;
    font-size: 1.1em;
    margin-bottom: 10px;
}

#userinfos h3 {
    color: #6e8388;
    font-size: 0.8em;
}

#userinfos .main-infos div.shortcuts {
    position: absolute;
    top: 10px;
    right: 12px;
}

html[dir="rtl"] #userinfos .main-infos div.shortcuts {
    right: auto;
    left: 12px;
}

#userinfos .block-infos {
    margin: 7px 20px;
    float: left;
}

#userinfos .one-line {
    margin: 4px 0;
    font-size: 12px;
    float: left;
}

#userinfos .one-line b.line-label {
    width: 120px;
    float: left;
}

html[dir="rtl"] #userinfos .one-line b.line-label {
    float: right;
}

#userinfos .one-line span.reset-info {
    float: left;
    width: 460px;
}

html[dir="rtl"] #userinfos .one-line span.reset-info {
    float: right;
}

#userinfos textarea {
    margin: 30px 0 0 30px;
    width: 572px;
    height: 292px;
}

html[dir="rtl"] #userinfos textarea {
    margin-right: 30px;
    margin-left: auto;
}
/*

Jappix - An open social platform
This is the search tool CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

.search {
    position: relative;
}

.search input.suggested {
    border-bottom: 1px solid white;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.search ul {
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.9);
    border-color: #e1a014;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    position: absolute;
    z-index: 1;
    padding: 3px 0;
    list-style: none;
    overflow: auto;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.search ul li {
    padding: 2px 6px;
    color: #3d3d3d;
    text-shadow: none;
}

.search ul li:hover {
    cursor: pointer;
}

.search ul li.hovered {
    background-color: rgb(225,160,20);
    background-color: rgba(225,160,20,0.3);
}

/*

Jappix - An open social platform
This is the welcome tool CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#welcome .infos {
    margin: 15px;
}

#welcome .infos p {
    margin-top: 6px;
}

#welcome .infos p.infos-title {
    margin-top: 0;
}

#welcome a.box {
    background-color: #e4eef9;
    border: 1px solid #ccdbde;
    margin: 12px 11px 4px 15px;
    padding: 10px;
    width: 270px;
    text-decoration: none;
    float: left;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

#welcome a.box.share {
    width: 350px;
    margin: 4px 130px;
    padding: 4px 10px;
    clear: both;
}

#welcome a.box.share.first {
    margin-top: 0;
}

#welcome a.box.share:hover span.go {
    display: block;
}

#welcome a.box:hover,
#welcome a.box:focus {
    border: 1px solid #93c5fa;
}

#welcome a.box:active {
    border: 1px solid #419afa;
}

#welcome a.box.enabled {
    background-color: #f1f6fd;
    border: 1px solid #9dc4fc;
}

#welcome a.box span {
    margin: 3px 0;
    display: block;
}

#welcome a.box span.logo {
    height: 35px;
    width: 35px;
    margin-right: 15px;
    float: left;
}

#welcome a.box span.logo.facebook {
    background-position: 0 0;
}

#welcome a.box span.logo.twitter {
    background-position: -35px 0;
}

#welcome a.box span.logo.plus {
    background-position: -70px 0;
}

#welcome a.box span.logo.waaave {
    background-position: -105px 0;
}

#welcome a.box span.option,
#welcome a.box span.name {
    font-size: 0.9em;
    font-weight: bold;
}

#welcome a.box span.description {
    font-size: 0.7em;
    margin-top: 7px;
}

#welcome a.box.share span.description {
    margin-top: 4px;
}

#welcome a.box span.image {
    height: 16px;
    width: 16px;
    margin: -30px 12px 0 0;
    float: right;
}

html[dir="rtl"] #welcome a.box span.image {
    margin-right: auto;
    margin-left: 12px;
    float: left;
}

#welcome a.box span.image.sound {
    background-position: 0 -900px;
}

#welcome a.box span.image.geolocation {
    background-position: 0 -658px;
}

#welcome a.box span.image.xmpp {
    background-position: 0 -990px;
}

#welcome a.box span.image.mam {
    background-position: 0 -1025px;
}

#welcome a.box span.image.offline {
    background-position: 0 -80px;
}

#welcome a.box span.tick,
#welcome a.box span.go {
    height: 16px;
    width: 16px;
    display: none;
    float: right;
}

#welcome a.box span.tick {
    background-position: 0 -1661px;
    margin: -52px -15px 0 0;
}

#welcome a.box span.go {
    background-position: 0 -1120px;
    margin: -28px 5px 0 0;
}

html[dir="rtl"] #welcome a.box span.go {
    margin-right: auto;
    margin-left: 5px;
    float: left;
}

#welcome a.box.enabled span.tick {
    display: block;
}

#welcome div.results {
    margin: -7px 15px;
    padding: 0;
    height: 272px;
    overflow: auto;
}

#welcome .bottom .finish.save {
    display: none;
}

/*

Jappix - An open social platform
This is the Jappix Me tool CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#me .content {
    padding: 10px 0;
}

#me .logo {
    background-position: 0 0;
    width: 300px;
    height: 61px;
    margin: 20px auto 0 auto;
    display: block;
}

#me .infos {
    margin-top: 30px;
}

#me .infos p {
    margin-top: 8px;
}

#me .infos p.infos-title {
    margin-top: 0;
}

#me .infos a {
    text-decoration: underline;
}

#me a.go {
    text-align: center;
    font-weight: bold;
    width: 300px;
    margin: 30px auto 0 auto;
    padding: 8px 12px;
    display: block;
}
/*

Jappix - An open social platform
This is the Roster Item Exchange tool CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#rosterx .content {
    padding: 10px 0 10px 0;
}

#rosterx .rosterx-head a {
    font-size: 0.9em;
    margin: 3px 4px;
    float: left;
}

html[dir="rtl"] #rosterx .rosterx-head a {
    float: right;
}

#rosterx .oneresult:hover {
    cursor: pointer;
}

#rosterx .oneresult span {
    margin: 4px 5px 0 5px;
    overflow: hidden;
    float: left;
}

html[dir="rtl"] #rosterx .oneresult span {
    float: right;
}

#rosterx .oneresult span.name {
    width: 230px;
    font-weight: bold;
}

#rosterx .oneresult span.xid {
    width: 270px;
    font-size: 0.9em;
}

#rosterx .oneresult span.action {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    float: right;
}

html[dir="rtl"] #rosterx .oneresult span.action {
    float: left;
}

#rosterx .oneresult span.action.modify {
    background-position: 0 -1244px;
}

html[dir="rtl"] #rosterx .oneresult input {
    margin-right: 10px;
    margin-left: 10px;
}
/*

Jappix - An open social platform
This is the call CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

.videochat_box {
    display: none;
}

.videochat_box .videochat_items {
    background: #ededed;
    border: 1px solid rgb(0,0,0);
    border: 1px solid rgba(0,0,0,0.8);
    text-shadow: none;
    min-width: 550px;
    min-height: 420px;
    overflow: hidden;
    position: absolute;
    left: 100px;
    right: 100px;
    top: 40px;
    bottom: 40px;
    -moz-box-shadow: 0 0 12px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.4);
    box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

.videochat_box .videochat_items .topbar {
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid rgb(0,0,0);
    border-bottom: 1px solid rgba(0,0,0,0.15);
    color: #ffffff;
    text-shadow: 0 1px 1px rgb(0,0,0);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 4;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
    box-shadow: 0 0 5px rgba(0,0,0,0.25);
}

.videochat_box .videochat_items .topbar .controls,
.videochat_box .videochat_items .topbar .elapsed {
    float: left;
}

html[dir="rtl"] .videochat_box .videochat_items .topbar .controls,
html[dir="rtl"] .videochat_box .videochat_items .topbar .elapsed {
    float: right;
}

html[dir="rtl"] .videochat_box .videochat_items .topbar .controls {
    margin-left: 0;
    margin-right: 50px;
}

.videochat_box .videochat_items .topbar .controls a {
    margin-top: 7px;
    float: left;
}

html[dir="rtl"] .videochat_box .videochat_items .topbar .controls a {
    float: right;
}

.videochat_box .videochat_items .topbar .controls a,
.call-content .call-notify .notification-content .reply-buttons a.reply-button {
    border-width: 1px;
    border-style: solid;
    font-size: 10px;
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    padding: 5px 6px 6px 6px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.videochat_box .videochat_items .topbar .controls a:active,
.call-content .call-notify .notification-content .reply-buttons a.reply-button:active {
    padding-top: 6px;
    padding-bottom: 5px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25) inset;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25) inset;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25) inset;
}

.videochat_box .videochat_items .topbar .controls a .icon {
    width: 14px;
    height: 14px;
    margin: -1px 7px 0 2px;
    float: left;
}

.videochat_box .videochat_items .topbar .controls a.stop,
.videochat_box .videochat_items .topbar .controls a.leave,
.call-content .call-notify .notification-content .reply-buttons a.reply-button.red {
    background: #cc283f;
    border-color: #5e121d;
}

.videochat_box .videochat_items .topbar .controls a.stop:active,
.videochat_box .videochat_items .topbar .controls a.leave:active,
.call-content .call-notify .notification-content .reply-buttons a.reply-button.red:active {
    background: #a92134;
    border-color: #480e16;
}

.videochat_box .videochat_items .topbar .controls a.stop .icon,
.videochat_box .videochat_items .topbar .controls a.leave .icon {
    background-position: 0 -62px;
}

.call-content .call-notify .notification-content .reply-buttons a.reply-button.green {
    background: #5ea45e;
    border-color: #1a2e1a;
}

.call-content .call-notify .notification-content .reply-buttons a.reply-button.green:active {
    background: #549253;
    border-color: #0f1a0f;
}

.videochat_box .videochat_items .topbar .controls a.mute,
.videochat_box .videochat_items .topbar .controls a.unmute,
.call-content .call-notify .notification-content .reply-buttons a.reply-button.blue {
    background: #6e8dc5;
    border-color: #303d55;
}

.videochat_box .videochat_items .topbar .controls a.mute,
.videochat_box .videochat_items .topbar .controls a.unmute {
    margin-left: 6px;
}

html[dir="rtl"] .videochat_box .videochat_items .topbar .controls a.mute,
html[dir="rtl"] .videochat_box .videochat_items .topbar .controls a.unmute {
    margin-left: 0;
    margin-right: 6px;
}

.videochat_box .videochat_items .topbar .controls a.mute:active,
.videochat_box .videochat_items .topbar .controls a.unmute:active,
.call-content .call-notify .notification-content .reply-buttons a.reply-button.blue:active {
    background: #6480b1;
    border-color: #222b3b;
}

.videochat_box .videochat_items .topbar .controls a.mute .icon {
    background-position: 0 -81px;
}

.videochat_box .videochat_items .topbar .controls a.unmute {
    display: none;
}

.videochat_box .videochat_items .topbar .controls a.unmute .icon {
    background-position: 0 -100px;
}

.videochat_box .videochat_items .topbar .elapsed {
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.1);
    border: 1px solid rgb(255,255,255);
    border: 1px solid rgba(255,255,255,0.25);
    outline: 1px solid rgb(0,0,0);
    outline: 1px solid rgba(0,0,0,0.2);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 10px 0 0 46px;
    padding: 2px 6px;
}

html[dir="rtl"] .videochat_box .videochat_items .topbar .elapsed {
    margin-left: 0;
    margin-right: 46px;
}

.videochat_box .videochat_items .topbar .actions {
    margin: 7px 15px 0 0;
    float: right;
}

html[dir="rtl"] .videochat_box .videochat_items .topbar .actions {
    margin-right: 0;
    margin-left: 15px;
    float: left;
}

.videochat_box .videochat_items .topbar .actions a {
    float: left;
}

.videochat_box .videochat_items .topbar .actions a.close {
    background-position: 0 -44px;
    width: 18px;
    height: 12px;
    margin-top: 6px;
}

.videochat_box .videochat_items .local_video {
    background-position: 0 -56px;
    border: 1px solid rgb(0,0,0);
    border: 1px solid rgba(0,0,0,0.5);
    width: 180px;
    height: 101px;
    opacity: 0.6;
    overflow: hidden;
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    -moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
    -webkit-transition: all 0.4s ease-in-out 0.2s;
    -moz-transition: all 0.4s ease-in-out 0.2s;
    -o-transition: all 0.4s ease-in-out 0.2s;
    transition: all 0.4s ease-in-out 0.2s;
}

html[dir="rtl"] .videochat_box .videochat_items .local_video {
    left: auto;
    right: 18px;
}

.videochat_box .videochat_items .local_video:disabled {
    opacity: 0.2 !important;
}

.videochat_box .videochat_items .local_video:hover {
    width: 320px;
    height: 180px;
    opacity: 1;
    cursor: pointer;
}

.videochat_box .videochat_items .local_video video {
    width: 100%;
}
/*

Jappix - An open social platform
This is the Jingle CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#jingle .videobox .topbar .card {
    margin: 4px 0 0 12px;
}

html[dir="rtl"] #jingle .videobox .topbar .card {
    margin-left: 0;
    margin-right: 12px;
}

#jingle .videobox .topbar .card,
#jingle .videobox .topbar .card .avatar-container,
#jingle .videobox .topbar .card .identity {
    float: left;
}

html[dir="rtl"] #jingle .videobox .topbar .card,
html[dir="rtl"] #jingle .videobox .topbar .card .avatar-container,
html[dir="rtl"] #jingle .videobox .topbar .card .identity {
    float: right;
}

#jingle .videobox .topbar .card .avatar-container {
    height: 32px;
    width: 32px;
}

#jingle .videobox .topbar .card .avatar-container .avatar {
    max-height: 32px;
    max-width: 32px;
}

#jingle .videobox .topbar .card .identity {
    margin: 1px 0 0 10px;
}

html[dir="rtl"] #jingle .videobox .topbar .card .identity {
    margin-left: 0;
    margin-right: 10px;
}

#jingle .videobox .topbar .card .identity .name,
#jingle .videobox .topbar .card .identity .xid {
    letter-spacing: 1px;
    display: block;
}

#jingle .videobox .topbar .card .identity .name {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

#jingle .videobox .topbar .card .identity .xid {
    font-size: 10px;
}

#jingle .videobox .topbar .controls {
    margin-left: 50px;
}

#jingle .videobox .remote_video {
    background-color: #000000;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

#jingle .videobox .remote_video video {
    width: 100%;
    height: 100%;
}

#jingle .videobox .branding {
    background-position: 0 0;
    width: 39px;
    height: 44px;
    opacity: 0.5;
    position: absolute;
    bottom: 16px;
    right: 24px;
    z-index: 2;
}

html[dir="rtl"] #jingle .videobox .branding {
    right: auto;
    left: 24px;
}
/*

Jappix - An open social platform
This is the Muji CSS stylesheet for Jappix

-------------------------------------------------

License: AGPL
Author: Valérian Saliou

*/

#muji .videochat_items {
    min-width: 600px;
    left: 60px;
    right: 60px;
}

#muji .remote_container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

/* Default video */
#muji .remote_container .remote_video_shaper {
    overflow: hidden;
    display: none;
    float: left;
    position: relative;
}

/* 1 video view */
#muji[data-count="1"] .remote_container .remote_video_shaper:nth-child(1) {
    width: 100%;
    height: 100%;
    display: block;
}

/* 2 video views */
#muji[data-count="2"] .remote_container .remote_video_shaper:nth-child(1),
#muji[data-count="2"] .remote_container .remote_video_shaper:nth-child(2) {
    width: 50%;
    height: 100%;
    display: block;
}

/* 3 video views */
#muji[data-count="3"] .remote_container .remote_video_shaper:nth-child(1),
#muji[data-count="3"] .remote_container .remote_video_shaper:nth-child(2),
#muji[data-count="3"] .remote_container .remote_video_shaper:nth-child(3) {
    height: 50%;
    display: block;
}

#muji[data-count="3"] .remote_container .remote_video_shaper:nth-child(1) {
    width: 100%;
    float: none;
}

#muji[data-count="3"] .remote_container .remote_video_shaper:nth-child(2),
#muji[data-count="3"] .remote_container .remote_video_shaper:nth-child(3) {
    width: 50%;
}

/* 4 video views */
#muji[data-count="4"] .remote_container .remote_video_shaper:nth-child(1),
#muji[data-count="4"] .remote_container .remote_video_shaper:nth-child(2),
#muji[data-count="4"] .remote_container .remote_video_shaper:nth-child(3),
#muji[data-count="4"] .remote_container .remote_video_shaper:nth-child(4) {
    height: 50%;
    width: 50%;
    display: block;
}

/* 5 video views */
#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(1),
#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(2),
#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(3),
#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(4),
#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(5) {
    height: 50%;
    display: block;
}

#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(1),
#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(2) {
    width: 50%;
}

#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(3),
#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(4),
#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(5) {
    width: 33.33333333%;
}

/* 6 video views */
#muji[data-count="6"] .remote_container .remote_video_shaper:nth-child(1),
#muji[data-count="6"] .remote_container .remote_video_shaper:nth-child(2),
#muji[data-count="6"] .remote_container .remote_video_shaper:nth-child(3),
#muji[data-count="6"] .remote_container .remote_video_shaper:nth-child(4),
#muji[data-count="6"] .remote_container .remote_video_shaper:nth-child(5),
#muji[data-count="6"] .remote_container .remote_video_shaper:nth-child(6) {
    height: 50%;
    width: 33.33333333%;
    display: block;
}

#muji .remote_container .remote_video_shaper .label_username {
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.6);
    color: #ffffff;
    font-size: 0.75em;
    padding: 3px 6px 4px 10px;
    position: absolute;
    top: 7px;
    left: 0;
    display: none;
}

html[dir="rtl"] #muji .remote_container .remote_video_shaper .label_username {
    padding-right: 10px;
    padding-left: 6px;
    left: auto;
    right: 0;
}

#muji[data-count="1"] .remote_container .remote_video_shaper .label_username,
#muji[data-count="2"] .remote_container .remote_video_shaper .label_username,
#muji[data-count="3"] .remote_container .remote_video_shaper:nth-child(1) .label_username,
#muji[data-count="4"] .remote_container .remote_video_shaper:nth-child(n+1):nth-child(-n+2) .label_username,
#muji[data-count="5"] .remote_container .remote_video_shaper:nth-child(n+1):nth-child(-n+2) .label_username,
#muji[data-count="6"] .remote_container .remote_video_shaper:nth-child(n+1):nth-child(-n+3) .label_username {
    top: 48px;
}

#muji .remote_container .remote_video_shaper:hover .label_username {
    display: block;
}

#muji .empty_message {
    text-align: center;
    margin-top: -11px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
}

#muji .empty_message .text {
    color: #ffffff;
    letter-spacing: 1px;
    font-size: 1.2em;
}

#muji .videoroom,
#muji .chatroom {
    position: absolute;
    top: 0;
    bottom: 0;
}

#muji .videoroom {
    background-color: #000000;
    left: 0;
    right: 280px;
}

html[dir="rtl"] #muji .videoroom {
    right: 0;
    left: 280px;
}

#muji .videoroom .topbar .controls {
    margin-left: 18px;
}

html[dir="rtl"] #muji .videoroom .topbar .controls {
    margin-right: 18px;
}

#muji .videoroom .topbar .elapsed {
    margin-left: 80px;
}

html[dir="rtl"] #muji .videoroom .topbar .elapsed {
    margin-right: 80px;
}

#muji .chatroom {
    background: #ffffff;
    width: 280px;
    right: 0;
}

html[dir="rtl"] #muji .chatroom {
    right: auto;
    left: 0;
}

#muji .videoroom .local_video {
    width: 140px;
    height: 78px;
}

#muji .videoroom .local_video:hover {
    width: 220px;
    height: 123px;
}

#muji .chatroom .chatroom_participants {
    background: #fcfcfc;
    border-bottom: 1px solid #e1e1e1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

#muji .chatroom .chatroom_participants .participants_default_view {
    text-align: center;
    height: 40px;
}

#muji .chatroom .chatroom_participants .participants_default_view .participants_counter,
#muji .chatroom .chatroom_participants .participants_default_view .participants_full {
    color: #444444;
    font-size: 0.9em;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 11px;
    display: inline-block;
}

#muji .chatroom .chatroom_participants .participants_default_view .participants_full {
    color: #5a6d7f;
    font-size: 0.8em;
    margin-left: 6px;
    display: none;
}

html[dir="rtl"] #muji .chatroom .chatroom_participants .participants_default_view .participants_full {
    margin-left: auto;
    margin-right: 6px;
}

#muji .chatroom .chatroom_participants .participants_default_view .participants_invite {
    background-position: 0 -287px;
    width: 13px;
    height: 13px;
    opacity: 0.6;
    display: block;
    position: absolute;
    top: 14px;
    right: 16px;
}

html[dir="rtl"] #muji .chatroom .chatroom_participants .participants_default_view .participants_invite {
    right: auto;
    left: 16px;
}

#muji .chatroom .chatroom_participants .participants_default_view .participants_invite:hover,
#muji .chatroom .chatroom_participants .participants_default_view .participants_invite:focus {
    opacity: 1;
}

#muji .chatroom .chatroom_participants .participants_invite_box {
    border-top: 1px solid #e1e1e1;
    display: none;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list {
    border-bottom: 1px solid #e1e1e1;
    padding: 4px 2px 2px 6px;
    display: none;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one {
    background: #d7e2f4;
    border: 1px solid #aab9f4;
    font-size: 0.75em;
    margin: 0 4px 3px 0;
    padding: 2px 4px;
    display: inline-block;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one.invite_unsupported {
    background: #f49d90;
    border-color: #de8780;
    color: #95443e;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one .invite_one_remove {
    background-position: 0 -300px;
    width: 9px;
    height: 9px;
    margin-left: 3px;
    margin-top: 1px;
    display: inline-block;
}

html[dir="rtl"] #muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one .invite_one_remove {
    margin-left: auto;
    margin-right: 3px;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one.invite_unsupported .invite_one_remove {
    background-position: 0 -309px;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one .invite_one_remove:hover,
#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one .invite_one_remove:focus,
#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one .invite_one_remove:active {
    background-position: 1px -317px;
    margin-left: 2px;
    margin-right: -1px;
    margin-bottom: -1px;
    padding: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one .invite_one_remove:hover,
#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one .invite_one_remove:focus {
    background-color: #8299ad;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one.invite_unsupported .invite_one_remove:hover,
#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one.invite_unsupported .invite_one_remove:focus {
    background-color: #ad625f;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one .invite_one_remove:active {
    background-color: #5b6e80;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_list .invite_one.invite_unsupported .invite_one_remove:active {
    background-color: #804847;
}

#muji .chatroom .chatroom_participants .participants_invite_box form.participants_invite_form {
    height: 32px;
    margin-left: 8px;
    position: relative;
}

html[dir="rtl"] #muji .chatroom .chatroom_participants .participants_invite_box form.participants_invite_form {
    margin-left: auto;
    margin-left: 0;
    margin-right: 8px;
}

#muji .chatroom .chatroom_participants .participants_invite_box form.participants_invite_form .invite_validate {
    background: #f9f9f9;
    border: 1px solid #e7e7e7;
    color: #94a6aa;
    text-decoration: none;
    padding: 4px 6px 5px 6px;
    display: none;
    position: absolute;
    top: 4px;
    right: 9px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
}

#muji .chatroom .chatroom_participants .participants_invite_box form.participants_invite_form .invite_validate:active {
    padding-top: 5px;
    padding-bottom: 4px;
}

#muji .chatroom .chatroom_participants .participants_invite_box form.participants_invite_form .invite_validate .invite_validate_icon {
    background-position: 0 -329px;
    width: 14px;
    height: 11px;
    margin-top: 2px;
    display: block;
}

#muji .chatroom .chatroom_participants .participants_invite_box form.participants_invite_form .invite_input_container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 41px;
}

html[dir="rtl"] #muji .chatroom .chatroom_participants .participants_invite_box form.participants_invite_form .invite_input_container {
    right: 0;
    left: 41px;
}

#muji .chatroom .chatroom_participants .participants_invite_box form.participants_invite_form input.invite_xid {
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search {
    max-height: 220px;
    overflow: auto;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one {
    border-top: 1px solid #e1e1e1;
    height: 28px;
    display: block;
    position: relative;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.hover,
#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.focus {
    background: #f5f7ff;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.active {
    background: #eef1f8;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.participant_search_unsupported {
    background: #f6f6f6;
    color: #969696;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.participant_search_unsupported.hover,
#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.participant_search_unsupported.focus {
    background: #f1f1f1;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.participant_search_unsupported.active {
    background: #efefef;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .avatar-container {
    text-align: center;
    height: 20px;
    width: 20px;
    margin: 4px 0 0 6px;
    float: left;
}

html[dir="rtl"] #muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .avatar-container {
    float: right;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .avatar-container .avatar {
    max-height: 20px;
    max-width: 20px;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .details {
    position: absolute;
    top: 0;
    left: 40px;
    right: 0;
    bottom: 0;
}

html[dir="rtl"] #muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .details {
    right: 40px;
    left: 0;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .details .name,
#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .details .feature {
    position: absolute;
    display: block;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .details .name {
    font-size: 0.8em;
    top: 6px;
    left: 0;
    right: 50px;
    bottom: 0;
}

html[dir="rtl"] #muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .details .name {
    right: 0;
    left: 50px;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .details .feature {
    width: 16px;
    height: 16px;
    top: 6px;
    right: 16px;
    opacity: 0.75;
    display: none;
}

html[dir="rtl"] #muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one .details .feature {
    right: auto;
    left: 7px;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.participant_search_has_audio .details .feature,
#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.participant_search_has_video .details .feature {
    display: block;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.participant_search_has_audio .details .feature {
    background-position: 0 -340px;
}

#muji .chatroom .chatroom_participants .participants_invite_box .participants_invite_search .participant_search_one.participant_search_has_video .details .feature {
    background-position: 0 -356px;
}

#muji .chatroom .chatroom_view {
    padding: 4px 4px 12px 8px;
    overflow: auto;
    position: absolute;
    top: 41px;
    left: 0;
    right: 0;
    bottom: 41px;
}

html[dir="rtl"] #muji .chatroom .chatroom_view {
    padding-left: 8px;
}

#muji .chatroom .chatroom_view .room_message {
    margin-top: 10px;
    position: relative;
}

#muji .chatroom .chatroom_view .room_message.me .message_content {
    float: left;
}

html[dir="rtl"] #muji .chatroom .chatroom_view .room_message.me .message_content {
    float: right;
}

#muji .chatroom .chatroom_view .room_message.him .message_content {
    margin-right: 30px;
    float: right;
}

html[dir="rtl"] #muji .chatroom .chatroom_view .room_message.him .message_content {
    margin-right: auto;
    margin-left: 30px;
    float: left;
}

#muji .chatroom .chatroom_view .room_message .message_content .message_bubble {
    font-size: 0.85em;
    padding: 7px 12px 8px 12px;
    display: block;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

#muji .chatroom .chatroom_view .room_message.me .message_content .message_bubble {
    background-color: #8dc2ef;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
}

html[dir="rtl"] #muji .chatroom .chatroom_view .room_message.me .message_content .message_bubble {
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}

#muji .chatroom .chatroom_view .room_message.him .message_content .message_bubble {
    background-color: #bcdf6a;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}

html[dir="rtl"] #muji .chatroom .chatroom_view .room_message.him .message_content .message_bubble {
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
}

#muji .chatroom .chatroom_view .room_message .message_content .message_author {
    color: #6c6c6c;
    font-size: 0.75em;
    margin-top: 2px;
    display: block;
}

#muji .chatroom .chatroom_view .room_message.him .message_content .message_author {
    text-align: right;
}

html[dir="rtl"] #muji .chatroom .chatroom_view .room_message.him .message_content .message_author {
    text-align: left;
}

#muji .chatroom .chatroom_view .room_message .message_avatar {
    position: absolute;
    right: 0;
    bottom: 16px;
}

html[dir="rtl"] #muji .chatroom .chatroom_view .room_message .message_avatar {
    right: auto;
    left: 0;
}

#muji .chatroom .chatroom_view .room_message .message_avatar.avatar-container {
    text-align: center;
    height: 24px;
    width: 24px;
}

#muji .chatroom .chatroom_view .room_message .message_avatar.avatar-container .avatar {
    max-height: 24px;
    max-width: 24px;
}

#muji .chatroom form.chatroom_form {
    background: #fcfcfc;
    border-top: 1px solid #e1e1e1;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#muji .chatroom form.chatroom_form .message_icon {
    background-position: 0 -272px;
    width: 17px;
    height: 15px;
    position: absolute;
    top: 13px;
    left: 12px;
}

html[dir="rtl"] #muji .chatroom form.chatroom_form .message_icon {
    left: auto;
    right: 12px;
}

#muji .chatroom form.chatroom_form .message_separator {
    background: #e9e9e9;
    width: 1px;
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 40px;
}

html[dir="rtl"] #muji .chatroom form.chatroom_form .message_separator {
    left: auto;
    right: 40px;
}

#muji .chatroom form.chatroom_form .message_input_container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 52px;
}

html[dir="rtl"] #muji .chatroom form.chatroom_form .message_input_container {
    left: auto;
    right: 52px;
}

#muji .chatroom form.chatroom_form .message_input_container input.message_input {
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}