/***** 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;}
}
js Exercise apps
ajax-loader-small.gif
html5shiv-printshiv.js
jsApp.children.common.css
Privacy policy