jsApp.children.common.css

/***** font face for js-app-children *****/
@font-face {
	font-family: "Open sans";
    src: url("fonts/OpenSans-Regular.ttf");
}

*:focus {
	outline: 3px dashed #0180ff;
}

.js-app-layer,
.js-app-startScreen
{
	font-family: 'Open sans', sans-serif;
}

.js-app-layer h3,h2 {
	margin: 1em;
}

.js-app-children-border
{
	border: 5px solid #8C8C8C;
	border-radius: 15px;
}

/**** start screen ****/
.js-app-startScreen
{
	text-align: center;
	margin: 0 auto;
	max-width: 685px;
	padding: 3em;
}

.js-app-startScreen h3.start-app-name {
	font-size: 3em;
	font-weight: bold;
	word-wrap: normal;
	margin: 1em;
}

/**** END start screen ****/
.js-app-button
{
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
}

.js-app-button-round {
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 3em;
	height: 3em;
	border-radius: 1.5em;
	font-family: inherit;
}

.js-app-button-big
{
  display: inline-block;
  padding: 0.25em 2.5em;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: bold;
  /* line-height: 2.428571; */
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 4px solid #808080;
  border-radius: 10px;
  font-family: inherit;
}

.js-app-button-big:hover,
.js-app-button-round:hover
{
	background-color: #EEEEEE;
}
.js-app-button
{
	background-color: #FFFFFF;
	color: #000000;
	padding: 7px;
	border: 3px solid #EEEEEE;
	border-radius: 3px;
	font-family: inherit;
}

.js-app-layer.featherlight .featherlight-content {
	padding: 0;
	box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

.js-app-layer .js-app-cf {
	border-top: 5px solid #8C8C8C;
	text-align: center;
	background: #FFFFFF;
}

.js-app-layer .warning {
	background: none;
	border: none;
	padding: none;
	border-radius: 0;
}
.js-app-layer .leave,
.js-app-layer .finish,
.js-app-layer .pause,
.js-app-layer .drag-and-drop,
.js-app-layer .warning,
.js-app-layer .js-app-error { text-align:center;}

.js-app-layer .small-screen { display:none; padding: 20px; text-align: center;}
.js-app-layer .small-screen h3,div { margin-left : 0; margin-right: 0; /*font-size: 1.5em;*/}
.js-app-layer .js-app-footer {
	width:100%;
	position:absolute;
	bottom:0;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.js-app-layer .leave h3.leave-heading,
.js-app-layer .error h3.error-heading,
.js-app-layer .finish h3.finish-heading,
.js-app-layer .pause h3.pause-heading,
.js-app-layer .warning h3.warning-heading,
.js-app-layer .drag-and-drop h3.drag-and-drop-message {
	font-size: 2em;
	margin-top: 8em;
}

.js-app-layer .finish {
	position: absolute;
	width: 100%;
	height: 100%;
}

/* error */
.js-app-layer .js-app-error .error-content { text-align: left;}
.js-app-layer .js-app-error .error-oops { color: #FF0000; font-size: 3em;}
.js-app-layer .js-app-error .error-avatar { width: 20em; height: 20em; display:inline-block; margin: 2em 0;}

.js-app-layer .loading-wrapper { text-align: center; }

.js-app-layer h3.loading {
	font-size: 2em;
	margin-top: 8em;
}

.js-app-layer footer button { margin: 10px; }

.js-app-layer header.js-app-instruction-container {
	border-bottom: 5px solid #8C8C8C;
	padding: 1em;
}

.js-app-layer .uppercase,
.js-app-startScreen .uppercase{
	text-transform: uppercase;
}
.js-app-layer .error { text-align: center;}
.js-app-layer .footer {background-color: #FFFFFF;}

/***** Points Indicator *******/
.js-app-layer .js-app-pointsIndicatorContainer .point
{
  width: 15px;
  height: 15px;
  border-radius: 7.5px;
  display: inline-block;
  border: 5px solid #8C8C8C;
  margin: 5px;
}

.js-app-layer .js-app-pointsIndicatorContainer .not-solved
{
  background-color: #FFFFFF;
  border: 2px solid #8C8C8C;
}

.js-app-layer .js-app-pointsIndicatorContainer .solved
{
  background-color: blue;
}

.js-app-layer .js-app-pointsIndicatorContainer .active.not-solved
{
  border: 5px solid #36AAD1;
}

.js-app-layer .js-app-pointsIndicatorContainer .correct
{
  background-color: green;
}

.js-app-layer .js-app-pointsIndicatorContainer .wrong
{
	background-color: red;
}


.js-app-layer .js-app-pointsIndicatorContainer .point.point-medium
{
	width: 20px;
	height: 20px;
	border-radius: 15px;
	display: inline-block;
	margin: 3px;
	border: 3px solid #8C8C8C;
}

.js-app-layer .js-app-pointsIndicatorContainer .not-solved
{
  background-color: #FFFFFF;
}

.js-app-layer .js-app-pointsIndicatorContainer .solved
{
  background-color: #1E90FF;
}


/***** Common Classes for all ******/

.center { text-align: center;}
.left { text-align: right; }
.border-bottom { border-bottom: 5px solid #8C8C8C;}
.border { border: 5px solid #8C8C8C;}
.border-top { border-top: 5px solid #8C8C8C;}
.border-radius { border-radius: 20px;}
.filter-background-image {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}
.vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


/**** all ****/
@media all {
	.js-app-children { font-size: 14px; }
	.js-app-layer .hide { display: none; }
	.js-app-layer .featherlight-content {
		border: 5px solid #8C8C8C !important;
		border-radius: 20px !important;
		width: 80%;
		min-height: 600px;
		max-width: 1020px;

		/*padding: 25px !important;*/
	}

	.js-app-layer .container {
		position: absolute;
		height: 100%;
		width: 100%;
	}
	.js-app-layer .featherlight-content {
		overflow: visible !important;
	}
	.js-app-layer .featherlight-close-icon {
		right: -30px !important;
		top: -30px !important;
		/* border: 2px solid #EEEEEE !important; */
		width: 30px;
		height: 30px;
		background: url('images/close.png') no-repeat !important;
		width: 80px !important;
		height: 80px;
	}
	.js-app-layer .js-app-pointsIndicatorContainer .point
	{
		width: 30px;
		height: 30px;
		border-radius: 20px;
		display: inline-block;
		margin: 5px;
		border: 5px solid #8C8C8C;
	}
	.js-app-layer .js-app-pointsIndicatorContainer .not-solved
	{
		background-color: #FFFFFF;
	}
	.js-app-layer .js-app-pointsIndicatorContainer .solved
	{
		background-color: #1E90FF;
	}

	/** close icon rotate **/

	.js-app-layer .featherlight-close {
		-webkit-transition-duration: 0.8s;
		-moz-transition-duration: 0.8s;
		-o-transition-duration: 0.8s;
		-ms-transition-duration: 0.8s;
		transition-duration: 0.8s;
		-webkit-transition-property: -webkit-transform;
		-moz-transition-property: -moz-transform;
		-o-transition-property: -o-transform;
		-ms-transition-property: -ms-transform;
		transition-property: transform;
		overflow:hidden;
	}

	.js-app-layer .featherlight-close:hover
	{
		-webkit-transform:rotate(360deg);
		-moz-transform:rotate(360deg);
		-o-transform:rotate(360deg);
		-ms-transform:rotate(360deg);
	}

	/**** END ***/
}

/**** width 1024px to 751px ****/
@media screen and (max-width: 1024px) and (min-width: 751px){
	.js-app-layer .featherlight-close-icon {
		right: -29px !important;
		top: -29px !important;
		width: 62px !important;
		height: 62px;
		border-radius: 0 !important;
		background: url('images/close_small.png') no-repeat !important;
	}
	.featherlight .featherlight-content {
	  margin-left: 25px !important;
	  margin-right: 25px !important;
	}

	.js-app-layer .js-app-pointsIndicatorContainer .point
	{
		width: 20px;
		height: 20px;
		border-radius: 15px;
		display: inline-block;
		margin: 3px;
		border: 3px solid #8C8C8C;
	}
}


/**** max-width 750px ****/
@media screen and (max-width: 750px){
	.js-app-children { font-size: 12px; }
	.js-app-layer .featherlight-content {
		height: 100%;
		width: 100% !important;
		margin: 0 !important;
		max-height: 100% !important;
		border-radius: 0 !important;
		overflow: auto !important;
	}
	.js-app-layer .featherlight-content {
		overflow: visible !important;
	}
	.js-app-layer .featherlight-close-icon {
		right: 0 !important;
		top: 10px !important;
		/*border: 2px solid #EEEEEE !important;*/
		width: 50px;
		height:50px;
		border-radius: 0 !important;
		background: url('images/close_x.png') no-repeat !important;
		background: #fff;
	}
	.js-app-layer .js-app-pointsIndicatorContainer .point
	{
		width: 20px;
		height: 20px;
		border-radius: 15px;
		display: inline-block;
		border: 1px solid blue;
		margin: 2px;
		border: 3px solid #8C8C8C;
	}
	.js-app-layer .js-app-pointsIndicatorContainer .not-solved
	{
		background-color: #FFFFFF;
	}
	.js-app-layer .js-app-pointsIndicatorContainer .solved
	{
		background-color: #1E90FF;
	}
}

@media screen and (max-width: 480px){
	.js-app-children { font-size: 10px; }
	.js-app-layer .featherlight-content {
		overflow: initial !important;
	}
	.js-app-layer .small-screen { display: block;}
	.js-app-layer .container,
	.js-app-layer .leave,
	.js-app-layer .warning
	.js-app-layer .result { display: none !important;}
}