/*-----------убрать в итогово версии-------------*/
HTML,BODY{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
/*-----------убрать в итогово версии--*/

BODY{
	position:relative;
}

#p_mainContainer,#p_mainContainer *,#p_background,#p_background *{	
	touch-action:none;
	-ms-touch-action: none;
	user-scalable:none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.p_interface{
	opacity:0;
}

#p_mainContainer{
	position:relative;
	width:727px;
	height:547px;
	color:#333;
	display:block;
}


#p_mainCanvas{
	position:absolute;
	left:0;
	top:0;
	opacity:0;
	z-index:2;
	/*cursor:pointer;*/
	border:1px solid #cbc;
}

.p_capturingCanvas{
	display:none;
	position:absolute;
}

#p_background{
	position:absolute;
	left:0;
	top:0;
	width:727px;
	height:547px;	
	overflow:hidden;
	z-index:1;
	user-scalable:none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-webkit-overflow-scrolling: touch;
	font-family:Arial, Helvetica, sans-serif;
}

.p_bgDefaultFone{
	background:#e5e6e5;
	background: linear-gradient(0deg, #e5e6e5, #f6f6f6);
}

#initSecondaryCanvas{
	position:absolute;
	opacity:0;
	left:0;
	top:0;
	width:727px;
	height:546px;
}

#topMenuContainer{
	position:absolute;	
	width:50.4px;
	height:22.2px;
	left:93px;
	top:0;
	z-index:100;
}

.bottomGtadient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.leftBottomPanel{	
	width:118px;
	height:44px;
	left:0;	
}

.rightBottomPanel{
	width:167.5px;
	height:44px;	
	right:0;
}

.leftBottomPanel,.rightBottomPanel{
	position:absolute;
	z-index:10000000;
	bottom:0 ! important;	
}

.rightPane{
	right:0;
	bottom:0;
}

.leftBottomPanelObject,.rightBottomPanelObject,.zoomObject,.topMenuPaneObject,.showPreviewObject,.hidePreviewObject,.morePuzzlesObject,.startOverObject,.sendToFriendObject,.exploreButtonObject{
	width:100%;
	height:100%;
}

SVG{
	display:block;
}

#p_fullScreen{
	height: 40px;
	width: 40px;	
}
#p_fullScreen{
	right:0;
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#p_fullScreen:active{
	background-position: -100px 0px;
}

#p_pause{
	width:32px;
	height:21px;
	right:131px;
	background-position: -180px -210px;
	background-repeat: no-repeat;
}

#p_pause:active{
	background-position:-260px -210px;
}

#p_timer{
	width:86px;
	height:21px;	
	right:43px;	
	background-position: -975px -45px;
	background-repeat: no-repeat;
	
}

.p_timerSpan{
	line-height:27px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#fff;
	text-align:center;
	font-size:17px;
}

.p_blueText{
	color:#116093;
}

#p_bottomPaneGrd{
	position: absolute;
	left:0;
	bottom:0px; 
	width: 100%;
	height:18px;
	text-align: center;
}

.p_bottomPaneLogoText{
	position: relative;
	z-index:1;
	width:140px;
	height:18px;
	display:block;
	margin:0 auto;
}

#showPreviewContainer{
	position:absolute;
	right:0;
	top:0;
	border:2px solid #bcbcbc;
	border-radius:0 0 0 3px;
	display:inline-block;
	z-index:-10000000000;
	display:none;
}

#showPreviewPicture{
	border-radius:0 0 0 3px;
	display:block;
}

#leftResizeZone{
	position:absolute;
	left:0;
	top:0;
	width:20px;
	height:100%;
	cursor:ew-resize;
}

#bottomResizeZone{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:20px;	
	cursor:ns-resize;
}

#showPreview{
	width:44px;
	height:44px;
	right:1px;
	top:1px;
	position:absolute;
}

#hidePreview{
	position:absolute;
	z-index:10000001;
	width:21px;
	height:21px;	
	left:0px;
	bottom:0px;
}

#topMenuPane{
	z-index:10000000;
	position:absolute;
}

#topMenuPane{	
	left:20px;
	top:0px;
	width:52px;
	height:218px;
}

@viewport {
	width: device-width !important;
}
@-ms-viewport{
	width:device-width !important;
	zoom:1;
}

/*-----end of local storage styles-----------*/
#waitMessageDiv{
	display:inline-block;
	position:absolute;
	z-index:10000;
	visibility:hidden;
}

progress {
	display: block;
	width: 100px;
	border-radius : 8px;
	background: #fff;
	padding: 0;
	border: none;
	text-align: center;
	height: 20px;
	box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5);
	overflow:hidden;
	background: -o-linear-gradient(#4c4, #8f8 50%, #4c4);
}

#progressBarText {
	width: 100%;
	position: absolute;
	left: 0;
	z-index: 1;
	top:0;
	text-align: center;
	overflow:hidden;
	border-radius: 8px 8px;
	font: bold italic 14px Arial, Helvetica, sans-serif;
	line-height:20px;
}

progress::-moz-progress-bar {
  background: -moz-linear-gradient(#4c4, #8f8 50%, #4c4);
  border-radius: 8px;
}
progress::-webkit-progress-bar {
  background: #fff;
  box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5);

}
progress::-webkit-progress-value {
  background: -webkit-linear-gradient(#4c4, #8f8 50%, #4c4);
  border-radius: 8px;
}

/*-----finale state elements----------*/

.finalStateButtons{
	width:170px;
	height:30px;
	display:inline-block;
	margin-left:13px;	
}

.finalStateElements{
	display:none;
}

#finalStateBottomContainer,#finalStateTopContainer{
	z-index:10000000;
}

#finalStateBottomContainer{
	display:none;
	margin:auto;
	position:absolute;
	left:0;
	bottom:-30px;
	width:100%;
	height:30px;
}

#finalStateBottomContainer>DIV{
	display:inline-block;
	margin:auto;
}

#finalStateTopContainer{
	position:relative;
	top:-25px;
	width:436px;
	height:25px;
	margin:auto;
}

/*---end of finale state elements-----*/

#pauseMessageDiv{
	position:absolute;
	display:none;
	z-index:10000001;
	height:47px;
	line-height:47px;
	text-align:center;
}

#pauseMessageBg{
	position:absolute;
	top:0;
	left:0;
	box-sizing:border-box;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:0.6;
	border-radius:23px;
	padding:0 23px;
}

#pauseMessageText{
	position:relative;
	color:#eee;
	font-size:26px;
	padding:0 16px;
	font-family:Arial, Helvetica, sans-serif;
}

#noActionDiv{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:none;
	z-index:10000003;
}

.helpImageDiv{
	width:683px;
	height:543px;
	position:absolute;
	display:none;
}

.helpImageDiv .helpImageDivObject{
	width:100%;
	height:100%;
}

.p_bottomPaneLogo{
	cursor:default;
}

/*-----IE message-------*/
#ieMessage{
	position:relative;
	width:470px;
	top:177px;
	display:none;
	background-repeat:no-repeat;
	background-position:0% 0%;
	margin:auto;
	zoom:1;
}

#ieMessage DIV{
	margin-left:90px;
	font-size:x-large;
}

#ieMessage DIV A{
	font-size:x-large;
}

/*-------interfase-----------*/
/*-------showPreview-----------*/
#p_showPreview .U,#p_showPreview .UO{
	visibility:visible;
}
#p_showPreview .O,#p_showPreview .A{
	visibility:hidden;
}
.noMobile #p_showPreview:hover .O,.noMobile #p_showPreview:hover .UO{
	visibility:visible;
}
.noMobile #p_showPreview:hover .U,.noMobile #p_showPreview:hover .A{
	visibility:hidden;
}
#p_showPreview:active .A{
	visibility:visible ! important;
}
#p_showPreview:active .O,#p_showPreview:active .U,#p_showPreview:active .UO{
	visibility:hidden ! important;
}
#p_showPreview{
	cursor:pointer;
}

/*-----left panel----------*/
/*Up*/
#p_hint .U,#p_hint .UO{
	visibility:visible;
}
#p_hint .O, #p_hint .A{
	visibility:hidden;
}
/*Over*/
.noMobile #p_hint:hover .O,.noMobile #p_hint:hover .UO{
	visibility:visible;
}
.noMobile #p_hint:hover .U,.noMobile #p_hint:hover .A{
	visibility:hidden;
}
/*Down*/
#p_hint:active .A{
	visibility:visible ! important;
}
#p_hint:active .U,#p_hint:active .UO,#p_hint:active .O{
	visibility:hidden ! important;
}


#p_edgesOnly .U,#p_edgesOnly .UO{
	visibility:visible;
}
#p_edgesOnly .O,#p_edgesOnly .A{
	visibility:hidden;
}
.noMobile #p_edgesOnly:hover .O,.noMobile #p_edgesOnly:hover .UO{
	visibility:visible;
}
.noMobile #p_edgesOnly:hover .A,.noMobile #p_edgesOnly:hover .U{
	visibility:hidden;
}
#p_edgesOnly:active .A{
	visibility:visible ! important;	
}
#p_edgesOnly:active .O,#p_edgesOnly:active .UO,#p_edgesOnly:active .U{
	visibility:hidden ! important;
}

.off #p_edgesOnly .UOoff,.noMobile .off #p_edgesOnly:hover .UOoff{
	visibility:visible;	
}
.off #p_edgesOnly:active .UOoff, #p_edgesOnly .UOoff, .noMobile #p_edgesOnly:hover .UOoff, #p_edgesOnly:active .UOoff{
	visibility:hidden;	
}

.off #p_edgesOnly .Aoff,.noMobile .off #p_edgesOnly:hover .Aoff, #p_edgesOnly .Aoff,.noMobile #p_edgesOnly:hover .Aoff, #p_edgesOnly:active .Aoff{
	visibility:hidden;
}

.off #p_edgesOnly:active .Aoff{
	visibility:visible ! important;	
}

#p_hint,#p_edgesOnly{
	cursor:pointer;
}
/*---------top menu-----*/
#toggleMenu .down_pane{
	visibility:visible;
}
#toggleMenu .up_pane{
	visibility:hidden;
}
.up #toggleMenu .down_pane{
	visibility:hidden;
}
.up #toggleMenu .up_pane{
	visibility:visible;
}

/*Up*/
#p_pullApart .U,#p_pullApart .UO,#p_pullApart .UA{
	visibility:visible;
}
#p_pullApart .A,#p_pullApart .O{
	visibility:hidden;
}
/*Over*/

.noMobile #p_pullApart:hover .O,.noMobile #p_pullApart:hover .UO{
	visibility:visible;
}
.noMobile #p_pullApart:hover .U,.noMobile #p_pullApart:hover .A,.noMobile #p_pullApart:hover .UA{
	visibility:hidden;
}
/*Down*/
#p_pullApart:active .A,#p_pullApart:active .UA{
	visibility:visible;
}
#p_pullApart:active .U,#p_pullApart:active .O,#p_pullApart:active .UO{
	visibility:hidden;
}

/*Up*/
#p_bgPattern .A,#p_bgPattern .O{
	visibility:hidden;
}
/*Over*/
.noMobile #p_bgPattern:hover .A,.noMobile #p_bgPattern:hover .U{
	visibility:hidden;
}
.noMobile #p_bgPattern:hover .O{
	visibility:visible;
}
/*Down*/
#p_bgPattern:active .U,#p_bgPattern:active .O,#p_bgPattern:active .UO{
	visibility:hidden;
}
#p_bgPattern:active .A{
	visibility:visible;
}
#p_mute .off_U{
	visibility:visible;
}
#p_mute .off_O{
	visibility:hidden;
}
.noMobile #p_mute:hover .off_U{
	visibility:hidden;
}
.noMobile #p_mute:hover .off_O{
	visibility:visible;
}

#p_mute .on_U{
	visibility:visible;
}
#p_mute .on_O{
	visibility:hidden;
}
.noMobile #p_mute:hover .on_U{
	visibility:hidden;
}
.noMobile #p_mute:hover .on_O{
	visibility:visible;
}

#p_mute #off{
	display:block;
}

#p_mute #on{
	display:none;
}

.on #p_mute #off{
	display:none;
}

.on #p_mute #on{
	display:block;
}
#p_help .A,#p_help .O{
	visibility:hidden;
}
.noMobile #p_help:hover .UO,.noMobile #p_help:hover .O{
	visibility:visible;
}
.noMobile #p_help:hover .UA,.noMobile #p_help:hover .A{
	visibility:hidden;
}
#p_help:active .A,#p_help:active .UA{
	visibility:visible;
}
#p_help:active .UO,#p_help:active .O{
	visibility:hidden;
}

#p_pullApart,#p_bgPattern,#p_mute,#p_help,#toggleMenu{
	cursor:pointer;
}

/*---------explore-------------*/
#explore .U,#explore .UO{
	visibility:visible;
}
#explore .O,#explore .OA,#explore .A{
	visibility:hidden;
}
.noMobile #explore:hover .O,.noMobile #explore:hover .UO,.noMobile #explore:hover .OA{
	visibility:visible;
}
.noMobile #explore:hover .U,.noMobile #explore:hover .A{
	visibility:hidden;
}
#explore:active .A,#explore:active .OA{
	visibility:visible ! important;
}
#explore:active .U,#explore:active .O,#explore:active .UO{
	visibility:hidden ! important;
}
#explore{
	cursor:pointer;
}
/*------more puzzles--------*/
#morePuzzles .O{
	visibility:hidden;
}
.noMobile #morePuzzles:hover .O{
	visibility:visible;
}

/*-----------send friend-----*/
#sendToFriend .O{
	visibility:hidden;
}
.noMobile #sendToFriend:hover .O{
	visibility:visible;
}

/*--------hide preview------------*/
#hidePreview .U,#hidePreview .UO{
	visibility:visible;
}
#hidePreview .A,#hidePreview .OA{
	visibility:hidden;
}
.noMobile #hidePreview:hover .UO,.noMobile #hidePreview:hover .OA{
	visibility:visible;
}
.noMobile #hidePreview:hover .U,.noMobile #hidePreview:hover .A{
	visibility:hidden;
}
#hidePreview:active .A,#hidePreview:active .OA{
	visibility:visible ! important;
}
#hidePreview:active .U, #hidePreview:active .UO{
	visibility:hidden ! important;
}
#hidePreview{
	cursor:pointer;
}
/*----------right panel--------------*/
/*Up*/
#p_pause .U,#p_pause .UO{
	visibility:visible;
}
#p_pause .O, #p_pause .A{
	visibility:hidden;
}
/*Over*/
.noMobile #p_pause:hover .O,.noMobile #p_pause:hover .UO{
	visibility:visible;
}
.noMobile #p_pause:hover .U,.noMobile #p_pause:hover .A{
	visibility:hidden;
}
/*Down*/
#p_pause:active .A{
	visibility:visible;
}
#p_pause:active .U,#p_pause:active .UO,#p_pause:active .O{
	visibility:hidden;
}

#p_fullScreen .U,#p_fullScreen .UO{
	visibility:visible;
}
#p_fullScreen .O, #p_fullScreen .A{
	visibility:hidden;
}

/*Over*/
.noMobile #p_fullScreen:hover .O,.noMobile #p_fullScreen:hover .UO{
	visibility:visible;
}
.noMobile #p_fullScreen:hover .U,.noMobile #p_fullScreen:hover .A{
	visibility:hidden;
}
/*Down*/
#p_fullScreen:active .A{
	visibility:visible;
}
#p_fullScreen:active .U, #p_fullScreen:active .UO, #p_fullScreen:active .O{
	visibility:hidden;
}
/*Up*/
.fs #p_fullScreen .U,.fs #p_fullScreen .UO{
	visibility:visible;
}
.fs #p_fullScreen .fson .O, .fs #p_fullScreen .fson .A{
	visibility:hidden;
}

/*Over*/
.noMobile .fs #p_fullScreen:hover .O,.noMobile .fs #p_fullScreen:hover .UO{
	visibility:visible;
}
.noMobile .fs #p_fullScreen:hover .U,.noMobile .fs #p_fullScreen:hover .A{
	visibility:hidden;
}
/*Down*/
/**/.fs #p_fullScreen:active .A{
	visibility:visible;
}
.fs #p_fullScreen:active .U,.fs #p_fullScreen:active .UO,.fs #p_fullScreen:active .O{
	visibility:hidden;
}

#fsoff{
	visibility:visible;
	display:block;
}
#fson{
	visibility:hidden;
	display:none;
}
.fs #fsoff{
	visibility:hidden;
	display:none;
}
.fs #fson{
	visibility:visible;
	display:block;
}

#p_pause,#p_fullScreen{
	cursor:pointer;
}
#p_timer{
	cursor:default;
}

/*--------start over------*/
#startOver .O{
		visibility:hidden;
	}
.noMobile #startOver:hover .O{
	visibility:visible;
}
	
	
#startOver,#toggleMenu,#p_help,#morePuzzles,#sendToFriend,#p_timer{
	cursor:pointer;
	touch-action:none;
	-ms-touch-action: none;
	user-scalable:none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#startOver,#toggleMenu,#morePuzzles,#sendToFriend,#p_zoomInButton,#p_zoomOutButton,.p_button{
	cursor:pointer;
}

#p_timer{
	cursor:default;
}

/*-----------zoom panel------*/
/*------in-------*/
/*Up*/
#p_zoomInButton .in_U{
	visibility:visible;
}
#p_zoomInButton .in_OA,#p_zoomInButton .in_A{
	visibility:hidden;
}
/*Over*/
.noMobile #p_zoomInButton:hover .in_OA{
	visibility:visible;
}
.noMobile #p_zoomInButton:hover .in_U,.noMobile #p_zoomInButton:hover .in_A{
	visibility:hidden;
}
/*Down*/
#p_zoomInButton:active .in_A,#p_zoomInButton:active .in_OA{
	visibility:visible;
}
#p_zoomInButton:active .in_U{
	visibility:hidden;
}
/*------out-------*/
/*Up*/
#p_zoomOutButton .out_U,#p_zoomOutButton .out_UO{
	visibility:visible;
}
#p_zoomOutButton .out_OA,#p_zoomOutButton .out_A{
	visibility:hidden;
}
/*Over*/
.noMobile #p_zoomOutButton:hover .out_UO,.noMobile #p_zoomOutButton:hover .out_OA{
	visibility:visible;
}
.noMobile #p_zoomOutButton:hover .out_U,.noMobile #p_zoomOutButton:hover .out_A{
	visibility:hidden;
}
/*Down*/
#p_zoomOutButton:active .out_OA,#p_zoomOutButton:active .out_A{
	visibility:visible;
}
#p_zoomOutButton:active .out_UO,#p_zoomOutButton:active .out_U{
	visibility:hidden;
}

/*--------from crsStyles.css-----------*/
#ieMessage{
	background-image:url(../images/templates/smile_sad.png);
}
/*---------fullscreenStyles.css----------*/
.fullscreenMode  #showPreviewContainer{
	border:4px solid #bcbcbc;
}

.fullscreenMode  #leftResizeZone{
	width:12px;
}

.fullscreenMode  #bottomResizeZone{
	height:12px;	
}

.fullscreenMode  #pauseMessageDiv{
	display:none;
	height:90px;
	line-height:90px;	
}

.fullscreenMode  #pauseMessageBg{
	border-radius:45px;
	padding:0 30px;
}

.fullscreenMode  #pauseMessageText{
	font-size:50px;
	padding:0 30px;
}

 #p_background.fullscreenMode  #searchHref{
	left:0px;
	top:3px;
	border:1px solid #bababa;
	border-radius:22px;
}

.fullscreenMode  .finalCanvasStyle{
	 box-shadow: 0 0 15px rgba(0,0,0,0.5);
	 cursor:pointer;
}

/*--------------end of finale state elements-----*/
@media all and (orientation:portrait) {
    #topMenuPane,#showPreview{/*,#showPreviewContainer*/
		z-index:10000000;
		position:absolute;
	}
}

@media all and (orientation:landscape) {
    #topMenuPane,#showPreview{/*,#showPreviewContainer*/
		z-index:10000000;
		position:absolute;
	}
}

.class{
	height: 1in; 
	left: -100%; 
	position: absolute; 
	top: -100%; 
	width: 1in;
}

.p_pointer{
	cursor: pointer;
}
/*
#p_background:fullscreen {
  width: 100% !important;
  height: 100% !important;
  background-color: pink;
}

#p_background:-webkit-full-screen {
  background-color: pink;
    width: 100% !important;
  height: 100% !important;
}*/

.topHiddenPanel {
	width: 100%;
	height: 18px;
	pointer-events: none;
	z-index: 10000001;
    position: relative;
}