.brand-primary {
	color: @brand-primary;
}

.brand-success {
	color: @brand-success;
}

.brand-info {
	color: @brand-info;
}

.brand-warning {
	color: @brand-warning;
}

.brand-danger {
	color: @brand-danger;
}


html {
	overflow-y: scroll;
    font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
}

body {
	@media (min-width: 979px)
	{
		padding-top: 130px;
	}

	@media (max-width: 979px)
	{
		padding-top: 130px;
		padding-bottom: 50px;
	}
}

button, a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

// .hidden-xs {
// 	@media (max-width: 320px)
// 	{
// 		display: none;
// 	}
// }
//
// .hidden-sm {
// 	@media (max-width: 480px) and (min-width: 321px)
// 	{
// 		display: none;
// 	}
// }
//
// .hidden-md {
// 	@media (max-width: 800px) and (min-width: 481px)
// 	{
// 		display: none;
// 	}
// }
//
// .hidden-lg {
// 	@media (max-width: 1200px) and (min-width: 801px)
// 	{
// 		display: none;
// 	}
// }
//
// .hidden-xg {
// 	@media (max-width: 1500px) and (min-width: 1201px)
// 	{
// 		display: none;
// 	}
// }

.block, .show {
	display: block;
}

.bold {
	font-weight: bold;
}

a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
	text-decoration:none;
}

.alt-logins {
	margin: 0 0 0 1em;
	padding: 0;
	list-style-type: none;

	li {
		vertical-align: top;
		background: transparent;
		margin: 0.25em;
		.pointer;
		.inline-block;
	}
}

.jumbotron {
	word-wrap: break-word;
}

#content{
	padding-bottom:20px;
	-webkit-transition: opacity 100ms linear;
	-moz-transition: opacity 100ms linear;
	-ms-transition: opacity 100ms linear;
	-o-transition: opacity 100ms linear;
	transition: opacity 100ms linear;

	&.ajaxifying {
		-moz-opacity: 0.00;
		opacity: 0.00;
		-ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	}
}

.profile-image {
	width: 52px;
	height: 52px;

	&.small {
		width: 26px;
		height: 26px;
	}
}

.status {
	font-size: 10px;
	vertical-align: middle;

	&.online {
		color: #060;
	}

	&.away {
		color: #cc0;
	}

	&.dnd {
		color: #900;
	}

	&.offline {
		color: gray;
	}
}


.post-row .topic-item, #topics-container .category-item {
	-webkit-transition: background-color 500ms linear;
	-moz-transition: background-color 500ms linear;
	-ms-transition: background-color 500ms linear;
	-o-transition: background-color 500ms linear;
	transition: background-color 500ms linear;
}

.post-row .topic-item.highlight, #topics-container .category-item.highlight {
	background-color: lighten(@brand-info, 20%);
}

.fa-notebook {
	font-family:"iconfont" !important;
    font: normal normal normal 14px/1 iconfont !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
	&:before {
		content: "\e603";
	}
}

.fa-facebook-square {
	color:#3b5998;
	background:transparent;
}

.fa-twitter-square {
	color:#2fc2ef;
	background:transparent;
}

.fa-google-plus-square {
	color:#df5138;
	background:transparent;
}

.category .post-link, .topic .post-link {
	display:inline-block;
	width:90%;
	height:25px;
	font-size:10px;
	padding:0px;
}

.menu-icon {
	background: transparent;
	width: 20px;
	height: 20px;
	text-align: center;
	display: inline-block;
	line-height: 20px;
	cursor: pointer;
}

.fade-out {
	position: absolute;
	top: 190px;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 30px 0;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, white));
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), white);
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), white);
	background-image: -ms-linear-gradient(top, transparent, white);
	background-image: -o-linear-gradient(top, transparent, white);
}

.icon-container {
	.row {
		margin: 0;
		i {
			width:20px;
			height:20px;
			margin: 1px;
			.pointer;
			line-height: 20px;
			text-align: center;

			&:hover, &.selected {
				background: black;
				color: white;
			}
		}
	}
}

@media (max-width: 760px) {
	.chat-modal {
		width: 100%;
		height: 100%;
		top: 0px !important;
		left: 0px !important;

		.modal-dialog {
			margin: 0;
			height: 100%;
			z-index: @zindex-modal;
			.modal-content {
				height: 100%;
			}
		}

	}
}

//START: FIXES FOR BS3, may need to remove these when we get out of the RC releases
@media (max-width: 979px) {
	.hidden-mobile {
		// BS2/3's hidden-xs does not support inline-block, so here it is for now.
		display: none !important;
	}
}

@media (min-width: 760px) {
	.container > .navbar-header, .container > .navbar-collapse {
		padding-right: 0;
		margin-right: -11px;
	}
}

.badge {
	vertical-align: 17%;
}
//END: FIXES FOR BS3, may need to remove these when we get out of the RC releases




@playbill-width-xxg: 450px;
@playbill-width-xg: 400px;
@playbill-width-lg: 350px;
@playbill-width-md: 250px;

@playbill-rqwidth-xxg: 220px;
@playbill-rqwidth-xg: 195px;
@playbill-rqwidth-lg: 170px;
@playbill-rqwidth-md: 120px;

@playbill-qrwidth-xxg: 110px;
@playbill-qrwidth-xg: 100px;
@playbill-qrwidth-lg: 100px;
@playbill-qrwidth-md: 80px;
// PoppinL
.container {
	.navbar-header > a{
		box-sizing: border-box;
		height: 50px;
	}
	.navbar-collapse {
		float: right;
	}
	max-width: 1200px !important;

	@media (max-width: @screen-xs-max) {
		width:90% !important;
		#playbills{
			display: none;
		}
		.thread-sort{
			display: block;
			ul{
				width: 100%;
				li{
					width: 32%;
					text-align: center;
					a{
						padding: 12px 0 !important;
						margin: 0 !important;
					}
				}
			}
		}
	}

	@media (min-width: @screen-xs-max) and (max-width: @screen-md){
		#playbills{
			display: none;
		}
	}

	@media (min-width: @screen-md) and (max-width: @screen-lg){
		width:90% !important;
		#search-fields .form-control{
			width: 150px;
			padding-right: 30px;
		}
		.navbar-header > a{
			margin-right: 0;
		}
		.category{
			padding-right: @playbill-width-md + 30px;
			ul.pagination{
				position: relative;
				left: (@playbill-width-md + 30px) / 2;
			}
		}

		#playbills{
			width: @playbill-width-md;
			right: 5%;
			.pb_qrcode{
				width: @playbill-rqwidth-md;
				font-size: 10px;
				img{
					width: @playbill-qrwidth-md;
				}
				i.rqicon{
					margin-right: 10px;
				}
			}
			.pb_flag{
				top: 20px;
				padding-top: 125px;
			}
		}
	}

	@media (min-width: @screen-lg) and (max-width: @screen-xg){
		width:92% !important;
		.category{
			padding-right: @playbill-width-lg + 30px;
			ul.pagination{
				position: relative;
				left: (@playbill-width-lg + 30px) / 2;
			}
		}

		#playbills{
			width: @playbill-width-lg;
			right: 4%;
			.pb_qrcode{
				width: @playbill-rqwidth-lg;
				font-size: 10px;
				img{
					width: @playbill-qrwidth-lg;
				}
				i.rqicon{
					margin-right: 10px;
				}
			}
			.pb_flag{
				top: 45px;
				padding-top: 125px;
			}
		}
	}

	@media (min-width: @screen-xg) and (max-width: @screen-xxg){
		width: 80% !important;
		.category{
			padding-right: @playbill-width-xg + 30px;
			ul.pagination{
				position: relative;
				left: (@playbill-width-xg + 30px) / 2;
			}
		}

		#playbills{
			width: @playbill-width-xg;
			right: 10%;
			.pb_qrcode{
				width: @playbill-rqwidth-xg;
				font-size: 12px;
				img{
					width: @playbill-qrwidth-xg;
				}
				i.rqicon{
					margin-right: 10px;
				}
			}
			.pb_flag{
				top: 50px;
				padding-top: 155px;
			}
		}
	}

	@media (min-width: @screen-xxg){
		width: 65% !important;
		.category{
			padding-right: @playbill-width-xxg + 30px;
			ul.pagination{
				position: relative;
				left: (@playbill-width-xxg + 30px) / 2;
			}
		}

		#playbills{
			width: @playbill-width-xxg;
			right: 17.5%;
			.pb_qrcode{
				width: @playbill-rqwidth-xxg;
				font-size: 12px;
				img{
					width:@playbill-qrwidth-xxg;
				}
				i.rqicon{
					margin-right: 10px;
				}
			}
			.pb_flag{
				top: 50px;
				padding-top: 155px;
			}
		}
	}
}
.clone-btn {
    position: absolute;
    right: 4px;
    top: 4px;
    background-color: #69f;
    padding: 4px 8px;
    border-radius: 8px;
    color: #fff;
    &:focus,
    &:hover {
        background-color:#1a47c1;
        color:#fff;
    }
}
.fr {
	float:right;
}
.fl {
	float:left;
}
a {
    color:#69f;
    &:focus,
    &:hover {
        color:#69f;
        text-decoration:none;
    }
}


@-webkit-keyframes square-spin {
	25% {
		-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
		transform: perspective(100px) rotateX(180deg) rotateY(0);
	}
	50% {
		-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
		transform: perspective(100px) rotateX(180deg) rotateY(180deg);
	}
	75% {
		-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
		transform: perspective(100px) rotateX(0) rotateY(180deg);
	}
	100% {
		-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
		transform: perspective(100px) rotateX(0) rotateY(0);
	}
}

@keyframes square-spin {
	25% {
		-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
		transform: perspective(100px) rotateX(180deg) rotateY(0);
	}
	50% {
		-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
		transform: perspective(100px) rotateX(180deg) rotateY(180deg);
	}
	75% {
		-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
		transform: perspective(100px) rotateX(0) rotateY(180deg);
	}
	100% {
		-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
		transform: perspective(100px) rotateX(0) rotateY(0);
	}
}

.square-spin > div {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	width: 30px;
	height: 30px;
	background: #69f;
	-webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
	animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}

@-webkit-keyframes ball-beat {
	50% {
		opacity: 0.2;
		-webkit-transform: scale(0.75);
		transform: scale(0.75);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes ball-beat {
	50% {
		opacity: 0.2;
		-webkit-transform: scale(0.75);
		transform: scale(0.75);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.ball-beat > div {
	background-color: #fff;
	width: 12px;
	height: 12px;
	border-radius: 100%;
	margin: 0 3px;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	display: inline-block;
	-webkit-animation: ball-beat 0.7s 0s infinite linear;
	animation: ball-beat 0.7s 0s infinite linear;
}
.ball-beat > div:nth-child(2n-1) {
	-webkit-animation-delay: -0.35s !important;
	animation-delay: -0.35s !important;
}