html {
    min-width: 768px;
}

body {
    background-color: #DDD;

    font-size: 18px;
    font-family: "Microsoft YaHei", "Droid Sans", "Heiti SC";
}

footer {
    line-height: 4;

    font-size: 16px;
}

a {
    color: #73DCFF;
}

a:focus, a:hover {
    text-decoration: none;
}

.tooltip-inner {
    padding: 8px 16px;

    font-size: 18px;
    font-family: "Microsoft YaHei", "Droid Sans", "Heiti SC";
}

.dropdown-menu {
    font-size: inherit;
}

.dropdown-menu>.disabled>a,
.dropdown-menu>.disabled>a:focus,
.dropdown-menu>.disabled>a:hover {
    color: #AAA;
}

.dropdown-menu>li>a {
    padding: 10px 30px;
    color: inherit;
}

.dropdown-center {
    left: 50%;
    right: auto;
    transform: translate(-50%, 0);
}

.callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    background-color: #FFF;
}

.callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout-danger {
    border-left-color: #ce4844;
}

.callout-danger h4 {
    color: #ce4844;
}

.callout-warning {
    border-left-color: #aa6708;
}

.callout-warning h4 {
    color: #aa6708;
}

.callout-info {
    border-left-color: #1b809e;
}

.callout-info h4 {
    color: #1b809e;
}

.btn:hover,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.disabled:hover,
.btn.disabled:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
    background: none;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.btn {
    z-index: 0;
    position: relative;
    background: none;
    border: none;
    color: #999;
    min-width: 68px;
    padding: 10px 16px;
    margin-right: 1px;

    font-size: 24px;
    line-height: 1.3333333;
}

.btn:before {
    content:"";
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    border-radius: 4px;
    transform: skew(-20deg); 
}

.btn .glyphicon {
    top: 4px;
}

.btn-lg {
    padding: 10px 34px 12px 30px;
    margin-right: 4px;

    font-size: 32px;
}

.btn-full {
    min-width: 264px;
}

.btn-primary {
    color: #FFF;
}

.btn-primary:before {
    background-color: #73DCFF;
    box-shadow: 0px 0px 16px #73DCFF;
}

.btn-primary:hover:before {
    box-shadow: 0px 0px 16px #73DCFF, inset 0px 0px 32px rgba(255,255,255,0.5);
}

.btn-primary:active:before {
    box-shadow: 0px 0px 16px #73DCFF;
}

.btn-success {
    color: #FFF;
}

.btn-success:before {
    background-color: #91E291;
    box-shadow: 0px 0px 16px #91E291;
}

.btn-success:hover:before {
    box-shadow: 0px 0px 16px #91E291, inset 0px 0px 32px rgba(255,255,255,0.5);
}

.btn-success:active:before {
    box-shadow: 0px 0px 16px #91E291;
}

.btn-default:before {
    background-color: #FBFBFB;
    border: 2px solid #CCC;
}

.btn-default:hover:before {
    background-color: #FFF;
}

.btn-default:active:before {
    background-color: #FBFBFB;
}

.btn-green,
.btn-green:hover,
.btn-green:active,
.btn-green:focus {
    color: #91E291 !important;
}

.btn-green:before {
    border-color: #91E291;
}

.btn-blue,
.btn-blue:hover,
.btn-blue:active,
.btn-blue:focus {
    color: #74DCFE !important;
}

.btn-blue:before {
    border-color: #74DCFE;
}

.btn-red,
.btn-red:hover,
.btn-red:active,
.btn-red:focus {
    color: #FF9999 !important;
}

.btn-red:before {
    border-color: #FF9999;
}

.btn-jump {
    display: block;
    min-width: 110px;
    color: #FFF;

    font-size: 28px;
}

.btn-jump,
.btn-jump:hover,
.btn-jump:active,
.btn-jump:focus {
    color: #FFF !important;
}

.btn-jump:before {
    background-color: #99CCFF;
    box-shadow: 0px 0px 16px #999;
}

.btn-jump:hover:before {
    box-shadow: 0px 0px 16px #999, inset 0px 0px 32px rgba(255,255,255,0.5);
}

.btn-jump:active:before {
    box-shadow: 0px 0px 16px #999;
}

.active .btn-jump:before {
    background-color: #FF9999;
}

.btn-section {
    padding: 10px 32px 10px 26px;
}

.container-main {
    box-shadow: 0 0 10px #BBB;
    background: url(../images/background.png) center no-repeat;
    background-color: #FFF;
    background-attachment: fixed;
}

.jump-group {
    z-index: 1;
    position: fixed;
    top: 100px;
    margin-left: -64px;
}

.jump-group a {
    color: #FFF;
    background: none;
}

.jump-group>li>a {
    padding: 8px 15px;
}

.jump-group>li>a:focus,
.jump-group>li>a:hover {
    background: none;
}

.nav-decorate {
    height: 4px;
    margin: 0 -16px 4px -16px;

    background-color: #666;
}

.nav-aligned {
    margin-left: -16px;
    margin-right: -16px;

    border: none;
    border-radius: 0;

    background-color: #666;
    box-shadow: 0 0 10px #BBB;
}

.nav-aligned a {
    color: #CCC;
}

.nav-aligned a:hover {
    color: #AAA;
}

.nav-icon {
    text-align: center;
    padding-top: 12px;
    
    font-size: 22px;
}

.nav-icon-left {
    padding-right: 20px;
}

.nav-icon-right {
    padding-left: 20px;
}

.nav-header {
    height: 50px;
}

.nav-header:before {
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #AAA;
    background-image:linear-gradient(to top, #BBB, #AAA);
    transform: skew(-20deg); 
}

.nav-header-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    color: #FFF;
    line-height: 1.9;
    text-align: center;
    font-size: 26px;
    font-weight: 200;
}

.container-content {
    padding: 0 72px 72px 100px;
    color: #666;
    line-height: 1.6;
}

.content-jumbotron {
    padding: 40px 0 16px 0;
}

.jumbotron-left {
    margin-right: -40px;
}

.jumbotron-lang {
    white-space: nowrap;
    margin-right: 14px;
}

.jumbotron-code {
    color: #999;
    margin-top: 60px;
    white-space: nowrap;

    font-size: 32px;
}

.jumbotron-app {
    color: #666;
    margin-top: 16px;
    margin-bottom: 0;
    white-space: nowrap;

    font-size: 64px;
}

.jumbotron-btn-1 {
    margin-top: 14px;
    margin-left: -20px;
}

.jumbotron-btn-2 {
    margin-top: 14px;
    margin-left: -48px;
    white-space: nowrap;
}

.container-content>h1 {
    margin-top: 48px;
    padding: 48px 0 32px 0;
    color: #666;

    border-top: 4px solid #CCC;

    font-size: 64px;
}

.content-btn-download {
    width: 80%;
    margin-top: 32px;
    margin-bottom: 32px; 
}

.thumbnail-content {
    display: inline-block;
    padding: 16px;
}

.bottom-separator {
    margin-bottom: 32px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.bottom-margin {
    margin-bottom: 32px;
}

.forum-frame {
    width: 100%;
    height: 450px;
    overflow-y: hidden;
    margin-bottom: 8px;
}

.forum-post {
    margin: 4px;
}

.forum-post>a {
    text-decoration: none;
}

.forum-btn-post {
    width: 80%;
}

.post-avatar {
    float: left;
    width: 48px;
    height: 48px;
    margin: 0;
    padding-top: 10px;
    color: #CCC;

    font-size: 20px;
    text-align: center;
}

.post-content {
    position: relative;
    color: #999;
    margin: 0 0 6px 56px;
}

.post-title {
    padding: 15px;
    margin-bottom: 10px;
}

a:hover .post-title {
    color: #333;
}

.post-info {
    position: absolute;
    bottom: 0;
    left: 15px;
    color: #CCC;

    font-size: 14px;
}

.post-date {
    position: absolute;
    bottom: 0;
    right: 15px;
    color: #CCC;

    font-size: 14px;
}

.irc-frame {
    width:100%;
    height:450px;

    border: 1px solid #CCC;
    border-radius: 4px;
}

/* center lightbox */
#lightboxOverlay { position: fixed !important; top: 0; left: 0; height: 100% !important; width: 100% !important; }
#lightbox { position: fixed !important; top: 50% !important; transform: translateY(-50%); }