@charset "utf-8";
/*
 * ==========================================================================
 * normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css
 * ========================================================================== */

/*
 * ==========================================================================
 * html5 display definitions
 * ========================================================================== */

/* corrects "block" display not defined in IE6/7/8/9 & FF3. */ 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
    display: block;
}
/* corrects "inline-block" display not defined in IE6/7/8/9 & FF3. */
audio, canvas, video {
    display: inline-block;
 *display: inline;
 *zoom: 1;
}
/* prevents modern browsers from displaying "audio" without controls. remove excess height in iOS5 devices. */
audio:not([controls]) {
    display: none;
    height: 0;
}
/* addresses styling for "hidden" attribute not present in IE7/8/9, FF3, S4. known issue: no IE6 support. */
[hidden] {
 display: none;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * base
 * ========================================================================== */

/* corrects text resizing oddly in IE6/7 when body "font-size" is set using "em" units. */
/* prevents iOS text size adjust after orientation change, without disabling user zoom. */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
/* addresses "font-family" inconsistency between "textarea" and other form elements. */
html, button, input, select, textarea {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}
/* addresses margins handled incorrectly in IE6/7. */
body {
    margin: 0;
    background-color: #FFF;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * links
 * ========================================================================== */

/* addresses "outline" inconsistency between chrome and other browsers. */
a:focus {
    outline: thin dotted;
}
/* improves readability when focused and also mouse hovered in all browsers. */
/* people.opera.com/patrickl/experiments/keyboard/test */
a:active, a:hover {
    outline: 0;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * typography
 * ========================================================================== */

/* addresses font sizes and margins set differently in IE6/7. */
/* addresses font sizes within "section" and "article" in FF4+, Chrome, S5. */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}
h3 {
    font-size: 1.17em;
    margin: 1em 0;
}
h4 {
    font-size: 1em;
    margin: 1.33em 0;
}
h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}
h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}
/* addresses styling not present in IE7/8/9, S5, Chrome. */
abbr[title] {
    border-bottom: 1px dotted;
}
/* addresses style set to "bolder" in FF3+, S4/5, Chrome. */
b, strong {
    font-weight: bold;
}
blockquote {
    margin: 1em 40px;
}
/* addresses styling not present in S5, Chrome. */
dfn {
    font-style: italic;
}
/* addresses styling not present in IE6/7/8/9. */
mark {
    background: #FF0;
    color: #000;
}
/* addresses margins set differently in IE6/7. */
p, pre {
    margin: 1em 0;
}
/* corrects font family set oddly in IE6, S4/5, Chrome. */
/* en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
code, kbd, pre, samp {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 1em;
}
/* improves readability of pre-formatted text in all browsers. */
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
/* addresses CSS quotes not supported in IE6/7. */
q {
    quotes: none;
}
/* addresses "quotes" property not supported in S4. */
q:before, q:after {
    content: '';
    content: none;
}
small {
    font-size: 75%;
}
/* prevents "sub" and "sup" affecting "line-height" in all browsers. gist.github.com/413930 */
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * lists
 * ========================================================================== */

/* addresses margins set differently in IE6/7. */
dl, menu, ol, ul {
    margin: 1em 0;
}
dd {
    margin: 0 0 0 40px;
}
/* addresses paddings set differently in IE6/7. */
menu, ol, ul {
    padding: 0 0 0 40px;
}
/* corrects list images handled incorrectly in IE7. */
nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * embedded content
 * ========================================================================== */

/* 1. removes border when inside "a" element in IE6/7/8/9, FF3. */
/* 2. improves image quality when scaled in IE7. code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}
/* corrects overflow displayed oddly in IE9. */
svg:not(:root) {
    overflow: hidden;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * figures
 * ========================================================================== */

/* addresses margin not present in IE6/7/8/9, S5, O11. */
figure {
    margin: 0;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * forms
 * ========================================================================== */

/* corrects margin displayed oddly in IE6/7. */
form {
    margin: 0;
}
/* cefine consistent border, margin, and padding. */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
/*
 *  * 1. corrects color not being inherited in IE6/7/8/9.
 *   * 2. corrects text not wrapping in FF3.
 *    * 3. corrects alignment displayed oddly in IE6/7.
 *     */
legend {
    border: 0;
    padding: 0;
    white-space: normal;
 *margin-left: -7px;
}
/*
 *  * 1. corrects font size not being inherited in all browsers.
 *   * 2. addresses margins set differently in IE6/7, FF3+, S5, Chrome.
 *    * 3. improves appearance and consistency in all browsers.
 *     */
button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
 *vertical-align: middle;
}
/* addresses FF3/4 setting "line-height" on "input" using "!important" in the UA stylesheet. */
button, input {
    line-height: normal;
}
/*
 *  * 1. avoid the WebKit bug in Android 4.0.* where (2) destroys native "audio" and "video" controls.
 *   * 2. corrects inability to style clickable "input" types in iOS.
 *    * 3. improves usability and consistency of cursor style between image-type "input" and others.
 *     * 4. removes inner spacing in IE7 without affecting normal text inputs. Known issue: inner spacing remains in IE6.
 *      */
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
 *overflow: visible;
}
/* re-set default cursor for disabled elements. */
button[disabled], input[disabled] {
    cursor: default;
}
/*
 *  * 1. addresses box sizing set to content-box in IE8/9.
 *   * 2. removes excess padding in IE8/9.
 *    * 3. removes excess padding in IE7. Known issue: excess padding remains in IE6.
 *     */
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
 *height: 13px;
 *width: 13px;
}
/*
 *  * 1. addresses "appearance" set to "searchfield" in S5, Chrome.
 *   * 2. addresses "box-sizing" set to "border-box" in S5, Chrome (include "-moz" to future-proof).
 *    */
input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
/* removes inner padding and search cancel button in S5, Chrome on OS X. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
 -webkit-appearance: none;
}
/* removes inner padding and border in FF3+. */
button::-moz-focus-inner, input::-moz-focus-inner {
 border: 0;
 padding: 0;
}
/*
 *  * 1. removes default vertical scrollbar in IE6/7/8/9.
 *   * 2. improves readability and alignment in all browsers.
 *    */
textarea {
    overflow: auto;
    vertical-align: top;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * tables
 * ========================================================================== */

/* remove most spacing between table cells. */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * customized reset values
 * ========================================================================== */

p {
    -webkit-hyphens: auto;
    -epub-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
b, strong, .strong {
    font-weight: bold;
}
dfn, em, .em {
    font-style: italic;
}
small, .small {
    font-size: 75%;
}
ul, ol {
    padding: 0;
    list-style-type: none;
}
dd {
    margin: 0;
}
.sidebar ul, .sidebar ol, .commentlist {
    list-style: none;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * custom styles
 * ========================================================================== */

/******************************************************************
 * clearfix
 * ******************************************************************/

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
    display: inline-block;
}
.content:after, .chatBox:after, .msgBox:after, footer:after, .subNav:after, #jPanelMenu-menu li:after, .msg-cont:after {
    content: "";
    display: table;
    clear: both;
}
/* hides from IE-mac \*/
* html .clearfix {
   height: 1%;
}
.clearfix {
   display: block;
}
/******************************************************************
tools
******************************************************************/

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.ir {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}                       
/******************************************************************
typography
******************************************************************/

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
/******************************************************************
 * display inline block lists
 * ******************************************************************/

.msgExtra .indicator {
    text-align: center;
}
.msgExtra .indicator li {
    display: inline-block;
    vertical-align: top;
}
/******************************************************************
 * buttons
 * ******************************************************************/

.chatBox .btnChatExtra, .msgBox .btnChatExtra, .chatBox .msgBox .btnMsgExtra, .msgBox .chatBox .btnMsgExtra, .msgBox .btnMsgExtra, .chatBox .btnSend, .msgBox .btnSend, .jPanelMenu header.main .btn-header, .jPanelMenu header.main .btn-header-inv {
    display: inline-block;
    border: 1px solid #9a9a9a;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -border-radius: 4px;
    border-radius: 4px;
    width: 100%;
    background-color: #9a9a9a;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c4c4c4), to(#9a9a9a));
    background-image: -webkit-linear-gradient(top, #c4c4c4, #9a9a9a);
    background-image: -moz-linear-gradient(top, #c4c4c4, #9a9a9a);
    background-image: -o-linear-gradient(top, #c4c4c4, #9a9a9a);
    background-image: linear-gradient(to bottom, #c4c4c4, #9a9a9a);
    color: #f7f7f7;
    text-decoration: none;
    text-align: center;
}
.chatBox .btnChatExtra, .msgBox .btnChatExtra, .chatBox .msgBox .btnMsgExtra, .msgBox .chatBox .btnMsgExtra, .msgBox .btnMsgExtra {
    text-decoration: none;
    background-image: none;
    background-color: #5e5e5e;
}
/******************************************************************
 * grid stylesheet
 * ******************************************************************/

.section {
    clear: both;
    padding: 0;
    margin: 0 auto;
    width: 96%;
}
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.col {
    display: block;
    float: left;
    margin: 0 0 0 1.6%;
    padding: 0;
}
.col:first-child {
    margin-left: 0;
}
/* all browsers except IE6 and lower */
/* grid of six */

.span_6_of_6 {
    width: 100%;
}
.span_5_of_6 {
    width: 83.06%;
}
.span_4_of_6 {
    width: 66.13%;
    white-space: nowrap;
    overflow: hidden;
}
.span_3_of_6 {
    width: 49.2%;
    white-space: nowrap;
    overflow: hidden;
}
.span_2_of_6 {
    width: 32.26%;
    white-space: nowrap;
    overflow: hidden;
}
.span_1_of_6 {
    width: 15.33%;
    min-height: 26px;
}
/* grid of four */

.span_4_of_4 {
    width: 100%;
}
.span_3_of_4 {
    width: 74.6%;
}
.span_2_of_4 {
    width: 49.2%;
}
.span_1_of_4 {
    width: 23.8%;
}
/* grid of three */

.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}
.onecol {
    width: 5.801104972%;
}
.twocol {
    width: 14.364640883%;
}
.threecol {
    width: 22.928176794%;
}
.fourcol {
    width: 31.491712705%;
}
.fivecol {
    width: 40.055248616%;
}
.sixcol {
    width: 48.618784527%;
}
.sevencol {
    width: 57.182320438000005%;
}
.eightcol {
    width: 65.74585634900001%;
}
.ninecol {
    width: 74.30939226%;
}
.tencol {
    width: 82.87292817100001%;
}
.elevencol {
    width: 91.436464082%;
}
.twelvecol {
    width: 99.999999993%;
}
/* layout and column defaults */

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
    position: relative;
    float: left;
    margin-left: 2.762430939%;
}
.first {
    margin-left: 0;
}
.last {
    float: right;
}
.modalDialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 0.4ms ease-in;
    -moz-transition: opacity 0.4ms ease-in;
    transition: opacity 0.4ms ease-in;
    pointer-events: none;
    font-size: 12px;
}
.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}
.modalDialog div {
    max-height: 92%;
    width: 92%;
    position: relative;
    margin: 10% auto;
    padding: 1em;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 1px 2px #ccc inset;
    -webkit-box-shadow: 0 1px 2px #ccc inset;
    box-shadow: 0 1px 2px #ccc inset;
    background-color: #666666;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9a9a9a), to(#666666));
    background-image: -webkit-linear-gradient(top, #9a9a9a, #666666);
    background-image: -moz-linear-gradient(top, #9a9a9a, #666666);
    background-image: -o-linear-gradient(top, #9a9a9a, #666666);
    background-image: linear-gradient(to bottom, #9a9a9a, #666666);
    color: #fff;
    text-align: center;
}
.modalDialog div ul {
    max-height: 120px;
    overflow-y: auto;
    pointer-events: auto;
}
.modalDialog .close {
    background-color: #666666;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9a9a9a), to(#666666));
    background-image: -webkit-linear-gradient(top, #9a9a9a, #666666);
    background-image: -moz-linear-gradient(top, #9a9a9a, #666666);
    background-image: -o-linear-gradient(top, #9a9a9a, #666666);
    background-image: linear-gradient(to bottom, #9a9a9a, #666666);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    -border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.85);
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.85);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.85);
    color: #fff;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * general styles
 * ========================================================================== */

body {
    /*background: #9ea8ac;*/
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
    font-size: 100%;
    line-height: 1.5em;
}
body.other {
    background: #FFF;
}
body.open {
    overflow: hidden;
}
img {
    vertical-align: bottom;
    outline: 0;
    max-width: 100%;
    height: auto;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * link styles
 * ========================================================================== */

a, a:visited {
    color: white; /* mobile tap color */
}
a:hover, a:focus, a:visited:hover, a:visited:focus {
    color: white;
}
a:link, a:visited:link {
    /* this highlights links on iPhones/iPads. so it basically works like the :hover selector for mobile devices. */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * heading
 * ========================================================================== */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
    text-rendering: optimizelegibility;
    font-weight: 500;
}
/* if you're going to use webfonts, be sure to check your weights http://css-tricks.com/watch-your-font-weight */
/* removing text decoration from all heading links */
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
    text-decoration: none;
}
h1, .h1 {
    font-size: 2.5em;
    line-height: 1.333em;
}
h1.pc {
    display: none;
}
h2, .h2 {
    font-size: 1.75em;
    line-height: 1.4em;
    margin-bottom: 0.375em;
}
h3, .h3 {
    font-size: 1.125em;
}
h4, .h4 {
    font-size: 1.1em;
    font-weight: 700;
}
h5, .h5 {
    font-size: 0.846em;
    line-height: 2.09em;
    text-transform: uppercase;
    letter-spacing: 2px;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * content styles
 * ========================================================================== */

.page {
    background: #9ea8ac;
}
.page_okasegi {
    background: #fff;
    margin-top: -70px;
}
.content {
    position: relative;
    margin-top: 60px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    margin-right: auto;
    margin-left: auto;
}
/* list page */
.gList {
    text-align: center;
}
.gList li {
    width: 145px;
    height: 145px;
    position: relative;
    display: inline-block;
    overflow: hidden;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    -border-radius: 20px;
    border-radius: 20px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
    margin-bottom: 2%;
    margin-left: 1%;
    margin-right: 1%;
}
.gList img {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    -border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 0px;
    width: 100%;
}
.gList .shine {
    position: absolute;
    top: 0;
    left: 0;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0.2)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%);
    /* IE10+ */
    background: linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%);
    /* W3C */
    height: 70px;
    width: 100%;
    box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    -border-radius: 20px;
    border-radius: 20px;
    border-bottom-right-radius: 100px 20px;
    border-bottom-left-radius: 100px 20px;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * video chat
 * ========================================================================== */

.chat-main {
    position: relative;
}
.chat-main .btn-chat-cont {
    position: absolute;
    top: .5em;
    left: .5em;
    z-index: 8;
}
.chat-main .btn-chat-cont a {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    -border-radius: 2px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: .5em 1em;
    text-decoration: none;
    display: block;
    margin-bottom: .5em;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.chat-main .btn-chat-cont .subNavOpener.active i {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.chatBox, .msgBox {
    padding: 5px 2%;
    background-color: #ccc;
    width: 100%;
}
.chatBox .chatInput, .msgBox .chatInput, .chatBox .msgBox .msgInput, .msgBox .chatBox .msgInput, .msgBox .msgInput {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 6px 5px 7px;
    -webkit-appearance: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    -border-radius: 2px;
    border-radius: 2px;
}
.chatBox .btnChatExtra, .msgBox .btnChatExtra, .chatBox .msgBox .btnMsgExtra, .msgBox .chatBox .btnMsgExtra, .msgBox .btnMsgExtra {
    display: block;
    text-align: center;
    padding: 5px;
    width: 100%;
}
.chatBox .btnSend, .msgBox .btnSend {
    padding: 5px;
}
#chatExtra {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
#chatExtra .swipe {
    height: 0;
}
#chatExtra .swipe-wrap {
    padding: 10px 0;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * login page
 * ========================================================================== */

.loginArea {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
.loginArea img {
    margin-bottom: 2em;
}
.loginEmail, .loginPass, .btnLogin {
    width: 100%;
    display: block;
    line-height: 24px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    color: #999;
    -webkit-appearance: none;
    border-radius: 0;
}
.loginEmail {
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    border-top-right-radius: 4px;
}
.loginPass {
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid #fff;
}
.btnLogin {
    margin-top: 1em;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -border-radius: 4px;
    border-radius: 4px;
    background-color: #f1f1f1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f1f1f1));
    background-image: -webkit-linear-gradient(top, #fefefe, #f1f1f1);
    background-image: -moz-linear-gradient(top, #fefefe, #f1f1f1);
    background-image: -o-linear-gradient(top, #fefefe, #f1f1f1);
    background-image: linear-gradient(to bottom, #fefefe, #f1f1f1);
    font-weight: bold;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * footer
 * ========================================================================== */

footer {
    margin-top: 1em;
    text-align: center;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * generic styles
 * ========================================================================== */

::-moz-selection {
}
::selection {
}
.jPanelMenu-panel {
    background-color: #FFFFFF !important;
}
.jPanelMenu header.main {
    background-color: #e5e5e5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e5e5e5));
    background-image: -webkit-linear-gradient(top, #fff, #e5e5e5);
    background-image: -moz-linear-gradient(top, #fff, #e5e5e5);
    background-image: -o-linear-gradient(top, #fff, #e5e5e5);
    background-image: linear-gradient(to bottom, #fff, #e5e5e5);
    -moz-box-shadow: 0 2px 5px rgba(34, 34, 34, 0.5);
    -webkit-box-shadow: 0 2px 5px rgba(34, 34, 34, 0.5);
    box-shadow: 0 2px 5px rgba(34, 34, 34, 0.5);
    position: fixed;
    top: 0;
    left: inherit; /* fix for chrome */
    width: 100%;
    max-width: none;
    padding: 12px 0;
    height: 50px;
    border-bottom: 1px solid #fff;
    z-index: 9999;
    color: #fff;
}
.jPanelMenu header.main #mainNav {
    height: 25px;
}
.jPanelMenu header.main #logo {
    width: 100px;
    margin: 0 auto;
    display: block;
}
.jPanelMenu header.main .btn-header i, .jPanelMenu header.main .btn-header-inv i {
    line-height: 26px;
    vertical-align: middle;
    position: relative;
    font-size: 24px;
}
.jPanelMenu header.main .btn-header i span, .jPanelMenu header.main .btn-header-inv i span {
    position: absolute;
    top: -6px;
    right: -4px;
    text-align: center;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    vertical-align: middle;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    -border-radius: 8px;
    border-radius: 8px;
    min-height: 16px;
    min-width: 8px;
    padding: 0 4px;
    background-color: #dd1695;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0C', endColorstr='#dd1695');
    background-image: -ms-linear-gradient(top, #F0C 0%, #dd1695 100%);
    background-image: -moz-linear-gradient(top, #F0C 0%, #dd1695 100%);
    background-image: -o-linear-gradient(top, #F0C 0%, #dd1695 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0C), color-stop(1, #dd1695));
    background-image: -webkit-linear-gradient(top, #F0C 0%, #dd1695 100%);
    background-image: linear-gradient(top bottom, #F0C 0%, #dd1695 100%);
    border: solid 1px #CC0066;
    text-shadow: none;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.jPanelMenu header.main .btn-header-inv {
    border: 0;
    background: none;
    color: #ccc;
}
.jPanelMenu header.main h1 {
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 28px;
    vertical-align: middle;
    color: #F0C;
}
.jPanelMenu header.main a {
    color: #F0C;
    text-decoration: none;
}
.jPanelMenu header.main nav {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
.subNav {
    margin-top: 14px;
}
.subNav ul {
    text-align: center;
    height: 0;
    overflow: hidden;
    background-color: #868686;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#696969), to(#868686));
    background-image: -webkit-linear-gradient(top, #696969, #868686);
    background-image: -moz-linear-gradient(top, #696969, #868686);
    background-image: -o-linear-gradient(top, #696969, #868686);
    background-image: linear-gradient(to bottom, #696969, #868686);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    margin: 0;
    padding: 0;
}
.subNav li {
    width: 25%;
    display: inline-block;
    float: left;
    border-right: 1px solid #ccc;
}
.subNav a {
    width: 100%;
    font-size: 10px;
    text-decoration: none;
    color: #fff;
    vertical-align: middle;
}
.subNav a i {
    font-size: 30px;
    line-height: 30px;
    padding: 0;
    display: block;
    margin: 10px auto 0;
}
.subNav a small {
    position: relative;
    top: -4px;
    font-size: 11px;
}
#jPanelMenu-menu {
    background: #666;
    padding: 0;
    margin: 0;
}
#jPanelMenu-menu .searchArea {
    height: 50px;
    text-align: left;
    border-bottom: solid 1px #333;
    padding: 10px 0 0 15px;
}
#jPanelMenu-menu .searchArea form {
    display: inline-block;
    vertical-align: middle;
}
#jPanelMenu-menu .searchArea #searchInput {
    position: relative;
    padding: .25em 0.5em;
    background-color: #333;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -border-radius: 4px;
    border-radius: 4px;
    border: none;
    outline: none;
    width: 92%;
    font-size: 14px;
    color: #FFF;
    padding: 5px 10px;
}
#jPanelMenu-menu ul {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ccc;
}
#jPanelMenu-menu .icn {
}
#jPanelMenu-menu .icn-user {
    background-position: 0 0;
}
#jPanelMenu-menu .icn-home {
    background-position: 0 -48px;
}
#jPanelMenu-menu li a {
    background-color: #666;
    display: block;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #333;
    padding: 10px 0;
    text-decoration: none;
    text-shadow: 0 -1px 2px #222222;
    color: #fff;
    vertical-align: middle;
}
#jPanelMenu-menu li span {
    background-color: #666;
    display: block;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #333;
    padding: 10px 0;
    text-decoration: none;
    text-shadow: 0 -1px 2px #222222;
    color: #fff;
    vertical-align: middle;
    font-size: 80%;
    text-align: center;
}
#jPanelMenu-menu li a:hover, #jPanelMenu-menu li a:focus {
    background-color: #333;
    -moz-box-shadow: 0 1px 5px rgba(34, 34, 34, 0.9);
    -webkit-box-shadow: 0 1px 5px rgba(34, 34, 34, 0.9);
    box-shadow: 0 1px 5px rgba(34, 34, 34, 0.9);
    color: #fff;
}
#jPanelMenu-menu li a:hover span, #jPanelMenu-menu li a:focus span {
    background-position: -48px 0;
}
#jPanelMenu-menu li a span {
    display: block;
    float: left;
    width: 48px;
    height: 48px;
    line-height: 86px;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: 14px;
}
#jPanelMenu-menu li a i {
    font-size: 24px;
    margin: 0 10px;
}
#jPanelMenu-menu li a i.new-msg-no {
    font-size: 100%;
    font-style: normal;
    margin: 0;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * popup menus
 * ========================================================================== */

.pop {
    position: relative;
}
.pop:before, .pop:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -10px;
}
.pop.active:before {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #666666;
    border-bottom: 20px solid #666666;
    position: absolute;
    z-index: 9;
    top: 25px;
}
.pop-outer {
    width: 96%;
    margin: 0 auto;
    display: none;
    position: absolute;
    top: 50px;
    top: 55px;
    left: 0;
    right: 0;
    z-index: 100000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 1px 2px #ccc inset;
    -webkit-box-shadow: 0 1px 2px #ccc inset;
    box-shadow: 0 1px 2px #ccc inset;
    background-color: #666666;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9a9a9a), to(#666666));
    background-image: -webkit-linear-gradient(top, #9a9a9a, #666666);
    background-image: -moz-linear-gradient(top, #9a9a9a, #666666);
    background-image: -o-linear-gradient(top, #9a9a9a, #666666);
    background-image: linear-gradient(to bottom, #9a9a9a, #666666);
    padding: 10px;
    border: 1px solid #666666;
    pointer-events: auto;
    overflow: hidden;
}
.pop-outer h3 {
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 21px;
    position: relative;
    margin-bottom: .25em;
}
.pop-outer h3 span {
    position: absolute;
    top: 0;
    right: 0;
}
.pop-outer h3 i {
    font-size: 21px;
}
.pop-outer .popScroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    color: #000;
    min-height: 200px;
    max-height: 300px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    -border-radius: 8px;
    border-radius: 8px;
    background-color: #FFF;
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * media queries
 * ========================================================================== */

@media only screen and (min-width: 768px) {
.jPanelMenu header.main #logo {
    width: 120px;
    margin: 0 auto;
    display: block;
}
}
/*
 * ========================================================================== */

/*
 * ==========================================================================
 * messenger
 * ========================================================================== */

.messages {
    padding-bottom: 20px;
}
.msg-cont {
    border-top: 1px solid #e5e5e5;
    padding: 10px 10px 20px;
    color: #000;
}
.msg-cont .timestamp {
    background-color: #fff;
    width: 200px;
    margin: -27px auto 0;
    padding: 5px;
    color: #bbb;
    text-align: center;
    font-size: 12px;
}
.msg-cont .speech-bubble {
    position: relative;
    display: block;
    width: 70%;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    -border-radius: 6px;
    border-radius: 6px;
    background-color: #e0ffb3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eaffcc), to(#e0ffb3));
    background-image: -webkit-linear-gradient(top, #eaffcc, #e0ffb3);
    background-image: -moz-linear-gradient(top, #eaffcc, #e0ffb3);
    background-image: -o-linear-gradient(top, #eaffcc, #e0ffb3);
    background-image: linear-gradient(to bottom, #eaffcc, #e0ffb3);
    padding: 10px;
    /* ----- */
    font-size: 13px;
    line-height: 1.3em;
    /* ----- */
    border: 1px solid #bbb;
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}
.msg-cont .speech-bubble:before, .msg-cont .speech-bubble:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 0 0 0 1px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}
.msg-cont .speech-bubble:before {
    z-index: 5;
}
.msg-cont .speech-bubble:after {
    z-index: 4;
}
.msg-cont.self img.avatar {
    display: block;
    float: right;
    margin-left: 10px;
}
.msg-cont.self .speech-bubble {
    float: right;
    background-color: #e0ffb3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eaffcc), to(#e0ffb3));
    background-image: -webkit-linear-gradient(top, #eaffcc, #e0ffb3);
    background-image: -moz-linear-gradient(top, #eaffcc, #e0ffb3);
    background-image: -o-linear-gradient(top, #eaffcc, #e0ffb3);
    background-image: linear-gradient(to bottom, #eaffcc, #e0ffb3);
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}
.msg-cont.self .speech-bubble:before {
    background: -webkit-linear-gradient(-45deg, #eaffcc, #e0ffb3);
    background: -moz-linear-gradient(-45deg, #eaffcc, #e0ffb3);
    background: -o-linear-gradient(-45deg, #eaffcc, #e0ffb3);
    background: -ms-linear-gradient(-45deg, #eaffcc, #e0ffb3);
    background: linear-gradient(-45deg, #eaffcc, #e0ffb3);
    right: -5px;
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}
.msg-cont.self .speech-bubble:after {
    background-color: #bbb;
    right: -6px;
}
.msg-cont.recipient img.avatar {
    display: block;
    float: left;
    margin-right: 10px;
    width: 50px;
    height: 50px;
}
.msg-cont.recipient .speech-bubble {
    float: left;
    background-color: #f1f1f1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f1f1f1));
    background-image: -webkit-linear-gradient(top, #fefefe, #f1f1f1);
    background-image: -moz-linear-gradient(top, #fefefe, #f1f1f1);
    background-image: -o-linear-gradient(top, #fefefe, #f1f1f1);
    background-image: linear-gradient(to bottom, #fefefe, #f1f1f1);
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}
.msg-cont.recipient .speech-bubble:before {
    background: -webkit-linear-gradient(-45deg, #fefefe, #f1f1f1);
    background: -moz-linear-gradient(-45deg, #fefefe, #f1f1f1);
    background: -o-linear-gradient(-45deg, #fefefe, #f1f1f1);
    background: -ms-linear-gradient(-45deg, #fefefe, #f1f1f1);
    background: linear-gradient(-45deg, #fefefe, #f1f1f1);
    left: -5px;
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}
.msg-cont.recipient .speech-bubble:after {
    background-color: #bbb;
    left: -6px;
}
.msg-cont .btn-play {
    position: relative;
    width: 80px;
    height: 25px;
    display: inline-block;
    background-color: #1a1a1a;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#1a1a1a));
    background-image: -webkit-linear-gradient(top, #333333, #1a1a1a);
    background-image: -moz-linear-gradient(top, #333333, #1a1a1a);
    background-image: -o-linear-gradient(top, #333333, #1a1a1a);
    background-image: linear-gradient(to bottom, #333333, #1a1a1a);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    -border-radius: 25px;
    border-radius: 25px;
    text-decoration: none;
    vertical-align: middle;
    margin-right: 10px;
    text-align: center;
    padding: 2px 10px;
    /* ----- */
    font-size: 13px;
    line-height: 1.5em;/* ----- */
}
.msg-cont .btn-play:before {
    font-family: 'FontAwesome';
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 25%;
    left: 10px;
    margin-top: -0.25em;
    content: "\f04b";
}
.msg-cont .btn-play:active {
    background-color: #e5e5e5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e5e5e5));
    background-image: -webkit-linear-gradient(top, #fff, #e5e5e5);
    background-image: -moz-linear-gradient(top, #fff, #e5e5e5);
    background-image: -o-linear-gradient(top, #fff, #e5e5e5);
    background-image: linear-gradient(to bottom, #fff, #e5e5e5);
}
/* sticker */
.msg-cont .sticker {
    position: relative;
    display: block;
    padding: 10px;
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}
.msg-cont.self .sticker {
    float: right;
    text-align: right;
}
.msg-cont.recipient .sticker {
    float: left;
    text-align: left;
}
/******************************************************************
 * message input area
 * ******************************************************************/

.msgAll {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    /*
 *  --- msgInput = 1 line high --- */
    height: 46px;
    /*
 *  --- msgInput = 2 line high --- */
    height: 70px;
}
.msgBox {
    border-top: 1px solid #ccc;
    background-color: #e1e3e9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f1f4), to(#e1e3e9));
    background-image: -webkit-linear-gradient(top, #f0f1f4, #e1e3e9);
    background-image: -moz-linear-gradient(top, #f0f1f4, #e1e3e9);
    background-image: -o-linear-gradient(top, #f0f1f4, #e1e3e9);
    background-image: linear-gradient(to bottom, #f0f1f4, #e1e3e9);
}
.msgBox .msgInput {
    border: 1px solid #ccc !important;
    background-color: #FFF;
    overflow: hidden !important;
    white-space: normal;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -border-radius: 4px;
    border-radius: 4px;
    color: #000;
    /*
 *  --- msgInput = 2 line high --- */
    height: 60px;
    font-family: "Meiryo UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
    /* ----- */
    font-size: 13px;
    line-height: 1.3em;/* ----- */
}
.msgBox .msgInput img {
    height: 24px !important;
}
.msgBox .btnMsgExtra {
    background-color: #e1e3e9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f1f4), to(#e1e3e9));
    background-image: -webkit-linear-gradient(top, #f0f1f4, #e1e3e9);
    background-image: -moz-linear-gradient(top, #f0f1f4, #e1e3e9);
    background-image: -o-linear-gradient(top, #f0f1f4, #e1e3e9);
    background-image: linear-gradient(to bottom, #f0f1f4, #e1e3e9);
    border: 1px solid #ccc;
}
.msgBox .btnMsgExtra i {
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    color: #333;
}
.msgBox .btnMsgExtra.active i {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.msgBox .btnSend {
    background-color: #e1e3e9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f1f4), to(#e1e3e9));
    background-image: -webkit-linear-gradient(top, #f0f1f4, #e1e3e9);
    background-image: -moz-linear-gradient(top, #f0f1f4, #e1e3e9);
    background-image: -o-linear-gradient(top, #f0f1f4, #e1e3e9);
    background-image: linear-gradient(to bottom, #f0f1f4, #e1e3e9);
    border: 1px solid #ccc;
    padding: 8px 5px;
    font-size: 90%;
    color: #333;
}
.msgExtra {
    background-color: #333;
}
.msgExtra .msgExtra-menu {
    text-align: center;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    margin: 0;
    border-top: 1px solid #444;
}
.msgExtra .msgExtra-menu li {
    width: 33.33333%;
    display: inline-block;
    float: left;
    border-right: 1px solid #444;
    border-left: 1px solid #222;
    border-top: 1px solid #222;
    border-bottom: 1px solid #444;
    height: 79px;
}
.msgExtra .msgExtra-menu li.active {
    background-color: #222;
}
.msgExtra .msgExtra-menu li a {
    width: 100%;
    font-size: 10px;
    text-decoration: none;
    vertical-align: middle;
}
.msgExtra .msgExtra-menu li a i {
    font-size: 30px;
    padding: 0;
    display: block;
    margin: 10px auto 0;
}
.msgExtra .msgExtra-menu li a small {
    position: relative;
    top: -4px;
    font-size: 11px;
}
.msgExtra .swipe {
    background-color: #333;
    margin: 0 auto;
    width: 96%;
    overflow: hidden;
    position: relative;
}
.msgExtra .swipe-wrap {
    overflow: hidden;
    position: relative;
}
.msgExtra .swipe-wrap .swipe-cont {
    float: left;
    width: 100%;
    position: relative;
}
/*
 * -- message options -- */

.msgExtra img {
    max-height: 64px;
}
.msgExtra #smileySwipe, .msgExtra #giftSwipe, .msgExtra #stickerSwipe, .msgExtra #selfieSwipe {
    height: 0px;
    visibility: hidden;
}
.msgExtra #giftSwipe .swipe-wrap, .msgExtra #smileySwipe .swipe-wrap, .msgExtra #stickerSwipe .swipe-wrap, .msgExtra #selfieSwipe .swipe-wrap {
    padding-top: 10px;
}
.msgExtra .smileyIndicator, .msgExtra .giftIndicator, .msgExtra .stickerIndicator, .msgExtra .selfieIndicator {
    height: 30px;
    width: 200px;
    margin: 0 auto;
    padding: 5px 0;
    font-size: 30px;
    line-height: 1em;
}
.msgExtra .smileyIndicator ul, .msgExtra .giftIndicator ul, .msgExtra .stickerIndicator ul, .msgExtra .selfieIndicator ul {
    padding: 0;
    margin: 0;
    text-align: center;
}
.msgExtra .smileyIndicator li, .msgExtra .giftIndicator li, .msgExtra .stickerIndicator li, .msgExtra .selfieIndicator li {
    text-align: center;
    padding: 0 .1em;
    color: #999;
    display: inline;
}
.msgExtra .smileyIndicator .current, .msgExtra .giftIndicator .current, .msgExtra .stickerIndicator .current, .msgExtra .selfieIndicator .current {
    color: white;
}
/*
 * -------------------- */

.msgExtra .backMenuBtn {
    width: 100%;
    text-align: center;
}
.msgExtra .backMenuBtn a {
    text-decoration: none;
}
/******************************************************************
 * message list
 * ******************************************************************/

.msgOuter {
    position: relative;
    min-height: 500px;
    display: block;
}
.msgInner {
    position: absolute;
    padding: 0;
    margin: 0;
    width: 100%;
    top: 0;
    left: 0;
}
.msgInner.extraLength {
    width: 116.92%;
    left: -19.8%;
}
.msgInner.noDeco ul:before {
    content: "";
}
.msgInner.noDeco ul li.msgArea {
    text-align: left;
    vertical-align: middle;
}
.msgInner.popList {
    position: static;
}
.msgInner.popList li.msgArea {
    width: 83.06%;
}
.msgInner ul {
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}
.msgInner ul:before {
    font-family: 'FontAwesome';
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 1em;
    color: #999;
    margin-top: -0.5em;
    content: "\f054";
}
.msgInner ul.chosen {
    background-color: #eee;
}
.msgInner li {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    text-align: left;
}
.msgInner li.chkArea {
    width: 15.33%;
    margin-left: 0;
    text-align: center;
}
.msgInner li.avatarArea {
    width: 15.33%;
}
.msgInner li.avatarArea img {
    width: 144px;
}
.msgInner li.msgArea {
    width: 66.13%;
    vertical-align: top;
    padding: 2px 8px;
}
.msgInner li.msgArea h4 {
    position: relative;
    padding: 0;
    margin: 0;
    color: #000;
    font-size: 0.8em;
}
.msgInner li.msgArea h4 span {
    position: absolute;
    top: 0;
    right: 0;
    color: #dd1695;
    font-size: 0.8em;
}
.msgInner li.msgArea p {
    padding: 0 1em 0 0;
    margin: 0;
    color: #666;
    font-size: 0.6em;
}
.msgInner input[type="checkbox"] {
    display: none;
}
.msgInner input[type="checkbox"] + span:before {
    font-family: 'FontAwesome';
    font-size: 2em;
    color: #ccc;
}
.msgInner input[type="checkbox"] + span:before {
    content: "\f10c"; /* circle-blank */
}
.msgInner input[type="checkbox"]:checked + span:before {
    content: "\f058";
    /* icon-ok-sign */
    color: #d5256d;
}
/* radio button */
.msgInner input[type="radio"] {
    display: none;
}
.msgInner input[type="radio"] + span:before {
    font-family: 'FontAwesome';
    font-size: 2em;
    color: #ccc;
}
.msgInner input[type="radio"] + span:before {
    content: "\f10c";/* circle-blank */
}
.msgInner input[type="radio"]:checked + span:before {
    content: "\f058";
    /* icon-ok-sign */
    color: #d5256d;
}
/*
 * ==========================================================================
 * other design elements
 * ========================================================================== */

.wrapper {
    padding: 5px 15px 15px;
    font-size: 0.7em;
}
.wrapper a {
    color: #666;
}
.wrapper h2 {
    font-size: 1.2em;
    font-weight: bold;
}
.wrapper input.btnLogin {
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}
.indicator {
    height: 30px;
    width: 200px;
    margin: 0 auto;
    padding: 5px 0;
    font-size: 30px;
}
.indicator ul {
    padding: 0;
    margin: 0;
}
.indicator li {
    text-align: center;
    padding: 0 .25em;
}
.indicator .current {
    color: #f00;
}
.content .scheduleArea {
    width: 80%;
    margin: auto;
}
.content .scheduleArea #scheduleDate, .content .scheduleArea #scheduleTime, .content .scheduleArea #scheduleMsg, .content .scheduleArea #scheduleBtn {
    padding: 4px 10px;
    border: 1px solid #999;
    outline: none;
    display: block;
    width: 100%;
    height: 42px;
    line-height: 36px;
    font-size: 16px;
    color: #aaa;
    background-color: #f1f1f1;
    -moz-box-shadow: inset 2px 2px 2px 0px #ddd;
    -webkit-box-shadow: inset 2px 2px 2px 0px #ddd;
    box-shadow: inset 2px 2px 2px 0px #ddd;
}
.content .scheduleArea #scheduleDate {
    -webkit-border-top-left-radius: 10px;
    -moz-border-top-left-radius: 10px;
    -ms-border-top-left-radius: 10px;
    -o-border-top-left-radius: 10px;
    -border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-top-right-radius: 10px;
    -ms-border-top-right-radius: 10px;
    -o-border-top-right-radius: 10px;
    -border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}
.content .scheduleArea #scheduleTime {
    border-top: none;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    -ms-border-bottom-left-radius: 10px;
    -o-border-bottom-left-radius: 10px;
    -border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -ms-border-bottom-right-radius: 10px;
    -o-border-bottom-right-radius: 10px;
    -border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.content .scheduleArea #scheduleMsg {
    margin-top: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -border-radius: 10px;
    border-radius: 10px;
}
.content .scheduleArea #scheduleBtn {
    margin: 10px 0;
    color: #444;
    border: 1px solid #9a9a9a;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -border-radius: 10px;
    border-radius: 10px;
    background-color: #c7cad4;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#efeff2), to(#c7cad4));
    background-image: -webkit-linear-gradient(top, #efeff2, #c7cad4);
    background-image: -moz-linear-gradient(top, #efeff2, #c7cad4);
    background-image: -o-linear-gradient(top, #efeff2, #c7cad4);
    background-image: linear-gradient(to bottom, #efeff2, #c7cad4);
}
.favoriteListPanel .titleBar, .scheduleListPanel .titleBar {
    background-color: #586274;
    height: 50px;
    line-height: 50px;
    font-size: 1.2em;
    text-align: center;
    border-bottom: 1px solid #fff;
    color: #fff;
}
.favoriteListPanel ul {
    margin: 0;
    padding: 0;
}
.favoriteListPanel ul li {
    width: 100%;
    height: 81px;
    clear: both;
    border-bottom: 1px solid #ccc;
    line-height: 80px;
}
.favoriteListPanel ul li div {
    color: #333;
    font-size: 1.0em;
    float: left;
}
.favoriteListPanel ul li div.favoriteCheck {
    width: 13%;
    text-align: center;
}
.favoriteListPanel ul li div.favoriteImg {
    min-width: 13%;
}
.favoriteListPanel ul li div.favoriteImg img {
    width: 80px;
    height: 80px;
}
.favoriteListPanel ul li div.favoriteName {
    width: 50%;
    overflow: hidden;
    height: 80px;
}
.favoriteListPanel ul li div.favoriteInfo {
    width: 40%;
    overflow: hidden;
    text-align: left;
    line-height: 24px;
    padding-left: 5px;
}
.favoriteListPanel ul li div.favoriteInfo .scheduleName, .favoriteListPanel ul li div.favoriteInfo .scheduleDate, .favoriteListPanel ul li div.favoriteInfo .scheduleTime {
    color: #7e7e7e;
    display: block;
    font-size: 0.8em;
    float: left;
    clear: both;
}
.favoriteListPanel ul li div.favoriteInfo .scheduleName {
    color: #333;
    font-size: 0.9em;
    height: 26px;
    overflow: hidden;
}
.favoriteListPanel ul li input.startChatBtn {
    font-size: 0.9em;
    height: 50%;
    min-width: 11%;
    border: 1px solid #C09;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    -border-radius: 6px;
    border-radius: 6px;
    background-color: #ce29a5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fd33ca), to(#ce29a5));
    background-image: -webkit-linear-gradient(top, #fd33ca, #ce29a5);
    background-image: -moz-linear-gradient(top, #fd33ca, #ce29a5);
    background-image: -o-linear-gradient(top, #fd33ca, #ce29a5);
    background-image: linear-gradient(to bottom, #fd33ca, #ce29a5);
    color: #fff;
    text-decoration: none;
    text-align: center;
}
.favoriteListPanel ul li input.disabled {
    background-color: #fd98e4;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fd98e4), to(#e694d2));
    background-image: -webkit-linear-gradient(top, #fd98e4, #e694d2);
    background-image: -moz-linear-gradient(top, #fd98e4, #e694d2);
    background-image: -o-linear-gradient(top, #fd98e4, #fe99e5);
    background-image: linear-gradient(to bottom, #fd98e4, #e694d2);
}
/* message count */

#message_count, .message_count {
    font-size: 12px;
    text-align: center;
}

/*
 * ========================================================================== */

/*
 * ==========================================================================
 * hide from mobile devices
 * ========================================================================== */

@media only screen and (max-width: 1024px) {
div.header, footer, aside.profile, .pconly {
    display: none;
}
/*
 * ------------------------------ */
/* message navigation pc only
 * ------------------------------ */

.msgnavbtm {
    display: none;
}
/*
 * ------------------------------ */

}

/*
 * ========================================================================== */