body {
    font-family: ClanOffc;
    margin:0px;
    font-family: Arial;
	font-size: 20px;
}


.layer {
    /*width: 749px;
    height: 486px;*/
    position: absolute;
    /*left: 25px;
    top: 25px;*/
}


#background {
    z-index: 0;
}

#canvas {
    z-index: 1;
}

#logosLContainer {
	width: auto;
	position: absolute;
}

#logosRContainer {
	width: auto;
	position: absolute;
}

#dotline {
    z-index: 2;
    position: absolute;
    /*left: 27px;
    top: 534px;*/
    width: auto;
    /*display: block;*/
    /*margin: 5px 115px;*/
    padding: 0px 10px;
    font-size: 12px;
}

#scene {
    z-index: 2;
    overflow: hidden;
}

#controlBg {
	z-index: 3;
	position: absolute;
}

#control {
	z-index: 3;
	position: absolute;
	font-size: 0px; /* to prevent affecting height by an inherited font-size */
}

#mask {
    z-index: 4;
    overflow: auto;
}

#state {
	font-size: 0px; /* to prevent affecting height by an inherited font-size */
}

#timer-label {
	font-size: 16px;
}

.timer-label-container {
	display: inline-block;
	height: 100%;
}

#tip-label {
	font-size: 16px;
}

.tip-label-container {
	display: inline-block;
	height: 100%;
}

.bg-mask {
    background-color: #B0B0B0;
    position: absolute;
}

.logo-gi {
    background: url('../assets/logo_gi.png') no-repeat;
    width: 117px;
    height: 55px;
    /*margin: 15px 0px 0px 25px;*/
	/*position: absolute;*/
}

.button-control {
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	display: inline-block;
}

.button-control:hover {
}

.game-btn-text {
    display: inline-block;
    cursor: pointer;
}

.framework-button {
	display: inline-block;
}

.framework-button-hover {
	display: inline-block;
}

.framework-button2-frame {
    position: relative;
    cursor: pointer;
}

div.framework-button2-text {
    cursor: pointer;
}

.framework-checkbox-frame {
    position: relative;
    cursor: pointer;
}

div.framework-checkbox-text {
    cursor: pointer;
}

.framework-textbox-frame {
    position: relative;
}

div.framework-textbox-text {
}

div.framework-draggable-frame {
    position: absolute;
}

div.framework-draggable-text {
}

.disable-select {
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
    cursor: default;
}

.dotline-dot {
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin: 0px 1px 0px 1px;
    position: relative;
}

.dotline-dot-num {
    font-family:ClanOffc;
    font-size: 12px;
    text-align: center;
    position:absolute;
    width:inherit;
}

.mask-menu-bg {
    z-index: -1;
    background: #FF0000;
    width: 100%;
    height: 100%;
    position: absolute;
}

.mask-menu-container {
    position: absolute;
}

.mask-menu-start-container {
    position: absolute;
}

.mask-menu-text {
    margin: 80px 60px 20px 60px;
}

.mask-menu-row {
    width: auto;
    /*background: #00FF00;*/
    margin: 5px 60px;
    cursor: pointer;
    padding: 3px 10px;
    font-size: 12px;
}

.mask-menu-row-text-container {
	display: inline-block;
	height: 100%;
}

.mask-menu-row-text {
    min-width: 180px;
}

.mask-menu-row-arrow-container {
	display: inline-block;
	height: 100%;
}

.mask-menu-row-arrow {
    background-repeat: no-repeat;
    background-position: center;
    margin: 0px 10px 0px 10px;
}

.mask-menu-row-dot {
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin: 0px 1px 0px 1px;
}

.mask-menu-row-dot-num {
    text-align: center;
}

.mask-menu-start-text {
    margin: 80px 60px 4px 60px;
}

.mask-menu-start-button {
    margin: 4px 60px 0px 60px;
    cursor: pointer;
}

.mask-ingame-bg {
    z-index: -1;
    background: #FF0000;
    opacity: 0.6;
    width: 100%;
    height: 100%;
    position: absolute;
}

.game-object {
    position: absolute;
}

.window-message {
    z-index: 4 !important;
}

.window-audio {
    min-width: 350px;
}

.window-photo {  
}

.window-video {
}

.window {
}

.window-message-content {
    min-height: 30px !important;
    padding: 10px !important;
}

.window-audio-content {
    min-height: 30px !important;
    padding: 2px 0px 0px 0px !important;
}

.window-photo-content {
    margin: 2px 0px 0px 0px !important;
    background-size: 100% 100% !important;
    min-width: 40px !important;
    min-height: 40px !important;   
}

.window-video-content {
    min-height: 30px !important;
    padding: 2px 0px 0px 0px !important;
    overflow: hidden !important;
}

.window-text-content {
    font-size: 15px;
}

/*
* Audio player
*/
.player-audio-timeline {
    margin: 4px 8px;
}

.player-audio-buttons {
    text-align: center;
    margin: 0px 0px 3px 0px;
}

.player-audio-prev {
    min-width: 50px;
}

.player-audio-play {
    min-width: 50px;
}

.player-audio-stop {
    min-width: 50px;
}

.player-audio-next {
    min-width: 50px;
}

.player-audio-list {
    margin: 6px 0px 6px 0px;
    max-height: 100px;
    overflow: auto;
}

.player-audio-list-item {
    padding: 3px;
    cursor: pointer;
    padding: 1px 10px 1px 10px;
}

.player-audio-list-item-active {
   background-color: rgba(0,0,0,1.0) !important;
}

.player-audio-list-item:hover {
     background-color: rgba(0,0,0,0.05);
}
/*
* Video player
*/
.player-video-display {
    background: #000000;
}

.player-video-timeline {
    margin: 6px 12px;
}

.player-video-buttons {
    text-align: center;
    margin: 0px 0px 3px 0px;
}

.player-video-play {
    min-width: 50px;
}

.player-video-stop {
    min-width: 50px;
}

.player-video-per25 {
    min-width: 50px;
    padding-left: 0px !important;
}

.player-video-per50 {
    min-width: 50px;
}

.player-video-per100 {
    min-width: 50px;
}
/*
* Keyboard
*/
.keyboard {
    padding: 2px 3px 3px 2px;
}

.keyboard-button {
    display: inline-block;
    min-width: 40px;
}

.keyboard-button-abc {
    min-width: 55px;
}

/*
* jQuery UI    
*/
/*.ui-widget {
    font-family: ClanOffc !important;
}*/

.ui-front {
	z-index: 3;
}

.noclose .ui-dialog-titlebar-close
{
    display:none;
}

/* Horizontal centering */
.h-center-parent {
    text-align: center;
}

/* Vertical centering */
.v-center-parent {
    font-size: 0px; /* remove margin between inlineblock elemnts */
}    
.v-center-child {
    display: inline-block;
    *display: inline; /** for ie6/7 */
	
	/* Zoom is a non-standard property and causes browser warning
	 * https://github.com/primefaces/primefaces/issues/5429 */
    /*zoom: 1;*/
	/* Replaced with the following: */
	transform: scale(1);
	transform-origin: 0 0;
	
    vertical-align: middle;
}
/* Browser has to support :after pseudo class */
.v-center-parent:after {
    display: inline-block;
    *display: inline;
    
	/* Zoom is a non-standard property and causes browser warning
	 * https://github.com/primefaces/primefaces/issues/5429 */
    /*zoom: 1;*/
	/* Replaced with the following: */
	transform: scale(1);
	transform-origin: 0 0;
	
    vertical-align: middle;
    height: 100%;
    width: 1;
    content: "";
}

/* Unselectable text */
.unselectable {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	cursor: default;
}