*:focus {
outline: 3px dashed #0180FF;
}
article.js-app
{
font-family: arial, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 10px;
color: #000;
line-height: normal;
text-align: left;
display: block;
padding: 10px;
margin: 0px 5px 0px 0px;
min-width: 380px;
max-width: 800px;
overflow: hidden;
white-space: nowrap;
border: solid 1px #ddd;
background-color: #dce8f2;
background: -moz-linear-gradient(270deg, #dce8f2, #F2F9FF);
background: -webkit-linear-gradient(270deg, #dce8f2, #F2F9FF);
background: -o-linear-gradient(270deg, #dce8f2, #F2F9FF);
background: -ms-linear-gradient(270deg, #dce8f2, #F2F9FF);
background: linear-gradient(270deg, #dce8f2, #F2F9FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCE8F2', endColorstr='#F2F9FF');
zoom: 1;
-webkit-box-shadow: 0.3em 0.3em 1em #888;
-moz-box-shadow: 0.3em 0.3em 1em #888;
box-shadow: 0.3em 0.3em 1em #888;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
}
article.js-app.js-app-XL
{
font-size: 10px;
}
article.js-app.js-app-L
{
font-size: 9px;
}
article.js-app.js-app-M
{
font-size: 8px;
}
article.js-app.js-app-S
{
font-size: 7px;
}
article.js-app.js-app-XS
{
font-size: 6px;
}
article.js-app h2
{
display: block;
overflow: hidden;
margin: 0.3em;
padding-bottom: 0.1em;
font-size: 1.8em;
font-weight: normal;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #ccc;
}
article.js-app .js-app-contentBox,
article.js-app footer
{
margin: 0.5em;
overflow:auto;
padding: 1em;
white-space: normal;
background-color: #fbfbfb;
border: solid 1px #ccc;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
-webkit-box-shadow: 1px 1px 3px #888;
-moz-box-shadow: 1px 1px 3px #888;
box-shadow: 1px 1px 3px #888;
}
article.js-app footer
{
position: relative;
display: block;
padding: 0.8em 0.8em 0px 0.8em;
min-height: 5.4em;
clear: both;
}
article.js-app img.js-app-errorImage
{
cursor: pointer;
height: 32px;
}
article.js-app img.js-app-loadImage
{
height: 32px;
}
article.js-app p.js-app-errorDetails
{
display:none;
}
article.js-app input[type="checkbox"] {
margin: 0px;
}
/* added the same settings for drag and drop warning as for Reset dailog */
.js-app-confirmResetDialog,
.js-app-dragAndDropWarning
{
font-size: 12px;
}
article.js-app div.js-app-loadScreen,
article.js-app div.js-app-errorScreen
{
font-family: arial;
font-size: 1.2em;
color: #666;
text-align: center;
padding-top: 5em;
min-height: 10em;
white-space: normal;
}
/* added the same settings for drag and drop warning as for Reset dailog */
article.js-app div.js-app-confirmResetDialog,
article.js-app div.js-app-dragAndDropWarning
{
display: none;
}
article.js-app footer button
{
float: left;
font: 1.4em/100% Arial, Helvetica, sans-serif;
display: inline-block;
margin: 0em 0.3em 0.4em 0.2em;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
height: 1.65em;
line-height: 1.65em;
padding: 0em 0.357em 0em 0.357em;
text-shadow: 0px 0.1em 0.1em rgba(0,0,0,.3);
overflow: visible;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;
-webkit-box-shadow: 0.1em 0.1em 0.1em #ccc;
-moz-box-shadow: 0.1em 0.1em 0.1em #ccc;
box-shadow: 0.1em 0.1em 0.1em #ccc;
color: #fef4e9;
border: solid 1px #da7c0c;
background-color: #f78d1d;
background: -moz-linear-gradient(270deg, #faa51a, #f47a20);
background: -webkit-linear-gradient(270deg, #faa51a, #f47a20);
background: -o-linear-gradient(270deg, #faa51a, #f47a20);
background: -ms-linear-gradient(270deg, #faa51a, #f47a20);
background: linear-gradient(270deg, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
article.js-app footer button:hover
{
text-decoration: none;
background-color: #f47c20;
background: -moz-linear-gradient(270deg, #f88e11, #f06015);
background: -webkit-linear-gradient(270deg, #f88e11, #f06015);
background: -o-linear-gradient(270deg, #f88e11, #f06015);
background: -ms-linear-gradient(270deg, #f88e11, #f06015);
background: linear-gradient(270deg, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
article.js-app footer button:active
{
color: #fcd3a5;
background-color: #f78d1d;
background: -moz-linear-gradient(270deg, #f47a20, #faa51a);
background: -webkit-linear-gradient(270deg, #f47a20, #faa51a);
background: -o-linear-gradient(270deg, #f47a20, #faa51a);
background: -ms-linear-gradient(270deg, #f47a20, #faa51a);
background: linear-gradient(270deg, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
article.js-app footer button[disabled]
{
cursor: default;
color: #ccc;
background: #eee;
border: solid 1px #ccc;
text-shadow: 0em 0em 0em #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee');
}
/*Remove button padding in FF*/
article.js-app button::-moz-focus-inner
{
border: 0;
padding: 0;
}
article.js-app div.js-app-progressBarContainer
{
display: inline-block;
float: right;
width: 25em;
margin-bottom: 0.8em;
}
article.js-app div.js-app-progressBarBackground
{
position: relative;
height: 1.8em;
padding-right: 0.2em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
background-color: #abb2bc;
background: -moz-linear-gradient(270deg, #949daa, #abb2bc);
background: -webkit-linear-gradient(270deg, #949daa, #abb2bc);
background: -o-linear-gradient(270deg, #949daa, #abb2bc);
background: -ms-linear-gradient(270deg, #949daa, #abb2bc);
background: linear-gradient(270deg, #949daa, #abb2bc);
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
}
article.js-app div.js-app-progressBar
{
position: relative;
display: block;
overflow: hidden;
height: 1.6em;
border: 1px solid #777;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
background-color: #74d04c;
background: -moz-repeating-linear-gradient(-30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 1.5em, rgba(255, 255, 255, 0) 1.5em, rgba(255, 255, 255, 0) 3em), -moz-linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #74d04c;
background: -webkit-repeating-linear-gradient(-30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 1.5em, rgba(255, 255, 255, 0) 1.5em, rgba(255, 255, 255, 0) 3em), -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #74d04c;
background: -o-repeating-linear-gradient(-30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 1.5em, rgba(255, 255, 255, 0) 1.5em, rgba(255, 255, 255, 0) 3em), -o-linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #74d04c;
background: -ms-repeating-linear-gradient(-30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 1.5em, rgba(255, 255, 255, 0) 1.5em, rgba(255, 255, 255, 0) 3em), -ms-linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #74d04c;
background: repeating-linear-gradient(-30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 1.5em, rgba(255, 255, 255, 0) 1.5em, rgba(255, 255, 255, 0) 3em), linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #74d04c;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
-moz-transition: background-color 1s ease-in, border-color 1s ease-out, box-shadow 1s ease-out;
-webkit-transition: background-color 1s ease-in, border-color 1s ease-out, box-shadow 1s ease-out;
-o-transition: background-color 1s ease-in, border-color 1s ease-out, box-shadow 1s ease-out;
transition: background-color 1s ease-in, border-color 1s ease-out, box-shadow 1s ease-out;
}
article.js-app div.js-app-progressBar.js-app-progress_blue
{
background-color: #339BB9;
border: 1px solid #287a91;
}
article.js-app div.js-app-progressBar.js-app-progress_red
{
background-color: #C43C35;
border: 1px solid #9c302a;
}
article.js-app div.js-app-progressBar.js-app-progress_yellow
{
background-color: #D9B31A;
border: 1px solid #ab8d15;
}
article.js-app div.js-app-progressBar.js-app-progress_green
{
background-color: #74d04c;
border: 1px solid #458845;
}
article.js-app div.js-app-progressBar.js-app-progress_empty
{
border-width: 0px;
}
article.js-app div.js-app-resultsDescription,
article.js-app div.js-app-recordsDescription
{
display: inline-block;
float: right;
font-size: 1.2em;
height: 1.5em;
line-height: 1.5em;
padding-right: 0.66em;
}
article.js-app div.js-app-progressBarText,
article.js-app div.js-app-correctBarText
{
display: inline-block;
float: right;
font-size: 1.2em;
min-width: 4.1em;
padding-left: 0.4em;
height: 1.5em;
line-height: 1.5em;
}
article.js-app div.js-app-records
{
display: none;
}
article.js-app div.js-app-recordsText
{
display: inline-block;
float: right;
font-size: 1.2em;
margin-bottom: 0.5em;
width: 25.2em;
height: 1.5em;
line-height: 1.5em;
}
article.js-app div.js-app-recordsText.js-app-newRecord
{
font-weight: bold;
}
article.js-app div.js-app-recordsText.js-app-highlightRecord
{
font-size: 1.1em;
font-weight: bold;
}
article.js-app div.js-app-recordsText img
{
margin-top: 0.25em;
margin-left: 0.16em;
}
article.js-app input[type="checkbox"]
{
position: relative;
top: 2px;
}
/* For modern browsers */
article.js-app .js-app-cf:before,
article.js-app .js-app-cf:after
{
content: "";
display: table;
}
article.js-app .js-app-cf:after
{
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
article.js-app .js-app-cf
{
*zoom: 1;
}
button:focus {
outline: 3px solid #ff5100 !important;
}
