multipractice.css

/* latin-ext */
@font-face {
  font-family: 'Imprima';
  font-style: normal;
  font-weight: 400;
  src: local('Imprima'), local('Imprima-Regular'), url(fonts/VEMxRoN7sY3yuy-7yoyNyQzk.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Imprima';
  font-style: normal;
  font-weight: 400;
  src: local('Imprima'), local('Imprima-Regular'), url(fonts/VEMxRoN7sY3yuy-7yoKNyQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	background-color: rgb(0, 31, 45);
	color:white;
	text-shadow: 1px 1px 2px black;
	font-family: 'Imprima', sans-serif;
	font-size:12pt;
	text-align: justify;
	unicode-bidi: plaintext;
	}

p, td, th, div, span {
	unicode-bidi: plaintext;
	}

td {
	vertical-align:top;
	}

h1, h2, h3, h4, h5, h6 {
	background-color: rgb(20, 82, 111);
	text-shadow: 2px 2px 10px black;
	box-shadow: 6px 6px 10px silver;
	padding-left:1em;
	padding-right:1em;
	text-align:center;
	border-radius:1ex;
	font-weight: bold;
	}
		
h6 {
	font-size:100%;
	font-weight: bolder;
	font-style: italic;
	}
		
h5 {
	font-size:115%;
	}
		
h4 {
	font-size:132%;
	font-style: italic;
	}
		
h3 {
	font-size:151%;
	}
		
h2 {
	font-size:173%;
	font-style: italic;
	}
		
h1 {
	font-size:198%;
	}

a {
	text-decoration: none;
	color:#1B6FDE;
	text-shadow: 0px 1px 1px black;
	}
	
a:hover {
	text-decoration: overline underline;
	}
	
table {
	width:100%;
	border-collapse: separate;
	border-spacing: 0;
	}
	
td {
	border-style: solid;
	border-width: 1px;
	border-color: silver;
	}

th {
	text-align:center;
	border-style: solid;
	border-width: 1px;
	border-color: gray;
	}

table tr:first-child td,
table tr:first-child th {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	}

table tr:last-child td,
table tr:last-child th {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	}
		
tr {
	}
	
#mainlogo{
	position:absolute;
	top:25px;
	left:25px;
	cursor: pointer;
	}
	
#logoimage{
	width:100px;
	box-shadow: 6px 6px 10px black;
	border-radius: 5px;
	}
	
#main{
	position:absolute;
	top:25px;
	left:12%;
	width:84%;
	background-color: rgb(0, 62, 91);
	box-shadow: 2px 2px 10px black;
	padding:1em;
	border-radius:1ex;
	unicode-bidi: plaintext;
	}
	
.error{
	margin:1cm;
	padding:1cm;
	background-color:red;
	color:yellow;
	border-radius: 1em;
	font-size:125%;
	
	}
	
.info, .message {
	margin:1cm;
	padding:1cm;
	background-color:silver;
	color:green;
	border-radius: 1em;
	font-size:125%;
	text-shadow: 0px 1px 1px black;
	}

a, a:hover {
	color:white;
	}

	
#mainmenu {
	position:absolute;
	left:1%;
	width:10%;
	top:150px;
	background-color: rgb(0, 15, 22);
	color:white;
	border-radius: 5px;
	box-shadow: 5px 5px 10px black;
	}
	
#mainmenu ul{
	list-style-type: none;
	padding-left:1em;
	line-height: 250%;
	}	

	
#mainmenu form{
	font-size:90%;
	
	}

#footer {
   float:left;
   width:100%;
   border-top:4px solid #000;
   overflow:hidden;
   position:relative;
	}

#footer ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
	}

#footer ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
	}

#footer ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
	}

#footer ul li a:hover {
   background:#369;
   color:#fff;
	}

#footer ul li a.active,
#footer ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
	}

#footer hr {
	display:none;
	}
	
.buttonlink{
	background-color:white;
	color:rgb(0, 31, 45);
	padding:.5ex;
	padding-left:1ex;
	padding-right:1ex;
	border-radius:5px;
	box-shadow: 6px 6px 10px black;
	}

.report_correct{
	color:green;
	}
	
.report_incorrect{
	color:red;
	}

	
#levels_container{
	line-height: 75px;
	text-align: center;
	}

.course_level{
	line-height: normal;
	height:150px;
	width:200px;
	border-width: 1px;
	border-style: groove;
	border-color:silver;
	display:table-cell;
	margin:1em;
	padding:.5ex;
	padding-bottom:.5ex;
	cursor:pointer;
	text-align: center;
	margin-top:auto;
	min-height: 300px;
	margin-right: 15px;
	margin-bottom:1em;
	border-radius:1ex;
	color:black;
	background-color:rgb(225,225,225);
	}
	
.course_level a{
	color:black;
	background-color:rgb(225,225,225);
	}
	
.course_level li a{
	
	}

.course_level h4{
	font-size:150%;
	margin:0;
	padding:0;
	margin-bottom:1em;
	color:black;
	background-color:white;
	}

#courses_toolbar{
	float:right;
	margin-bottom:1em;
	}

#tbl_content{
	width:100%;
	}

#tbl_content td{
	vertical-align: top;
	}

#tbl_content tr td:nth-child(2){
	border-width: 1px;
	border-style: groove;
	border-color:silver;
	padding:1ex;
	border-radius: 1ex;
	width:70%;
	text-align:center;
	}

#tbl_content tr td:nth-child(1),
#tbl_content tr td:nth-child(3){
	width:15%;
	}

td {
	text-align:left;
	}

#buttons_right{
	text-align:right;
	}

#item_content {
	min-height: 300px;
	min-width: 300px;
	}


#home_courses {
	width:100%;
	}

#home_courses td{
	vertical-align: top;
	}
	
#courses table {
	border-style: solid;
	border-width: 1px;
	border-color:gray;
	border-radius:5px;
	margin-bottom: 3ex;
	cursor: pointer;
	}
	
#courses table td, 
#courses table th {
	border:none;
	}
	
#courses table tr td:first-child {
	width:200px;
	max-width: 200px;
	text-align: center;
	overflow: hidden;
	}
	
#courses table tr td:last-child {
	width:150px;
	max-width: 150px;
	text-align: center;
	overflow: hidden;
	font-size:60%;
	}

#courses table.level_meter {
	border-width:0;
	width:90%;
	margin:0;
	padding:0;
	}

#courses table.level_meter tr,
#courses table.level_meter tr td,
#courses table.level_meter tr th{
	border-width:0;
	}
	
#courses table.level_meter tr td:first-child, 
#courses table.level_meter tr td:last-child {
	width:auto;
	font-size:inherit;
	}

.levelcompleted {
	background-color: blue;
	}

.currentlevel{
	background-color: orange;
	}

#courses table.level_meter tr td div.levelnotdone {
	background-color: rgb(25,25,25)
	}

#courses a {
	text-decoration: none;
	}

#loginpassword,
#loginusername {
	width:15ex;
	}

#lessonitemheader td {
	text-align: center;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	}


#lesson_main tr td:first-child {
	width:20%;
	font-size:90%;
	vertical-align: top;
	}

#lesson_main tr td:nth-child(2) {
	text-align:center;
	font-size:200%;
	vertical-align: top;
	}

#lesson_main tr td:nth-child(3) {
	text-align:center;
	vertical-align: top;
	width:10%;
	}

#lesson_main td {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	}

#categories {
	font-size:85%;
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   margin-bottom:1em;
	}

#categories li {
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
	}

#categories li a {
   margin:0 0 0 1px;
   padding:3px;
   text-decoration:none;
	}

#correctanswer {
	display: none;
	}
	
#showcorrectanswer{
	font-size:50%;
	}
	
#lessonitemmain {
	border-width: 1px;
	border-style: outset;
	border-color: silver;
	box-shadow: 6px 6px 10px gray;
	padding:1cm;
	margin:1em;
	margin-top:0;
	border-radius:5px;
	unicode-bidi: plaintext;
	}
	
#lessonitemmain ul li {
	text-align: left;
	}
	
#msg_correctanswer {
	background-color:green;
	color:blue;
	text-shadow: 5px 5px 5px orange;
	padding:1cm;
	border-radius:7px;
	margin:1ex;
	}
	
#msg_wronganswer {
	background-color:red;
	color:yellow;
	text-shadow: 5px 5px 5px black;
	padding:1cm;
	border-radius:7px;
	margin:1ex;
	}

#usersuggestion, #usercomment {
	width: 90%;
	}

#usertranslation {
	width:90%;
	}

#btn_previousitem,
#btn_nextitem,
#btn_continue {
	display:block;
	border-radius:5px;
	border-color: white;
	border-style: outset;
	padding:.5ex;
	padding-left:1em;
	padding-right:1em;
	color:navy;
	text-shadow: 3px 3px 5px black;
	}
 
#btn_continue, 
#btn_nextitem{
	background-color:rgb(0, 204, 102);
	color:navy;
	}

#btn_continue {
	width:10ex;
	float:right;
	}

#btn_previousitem {
	background-color:rgb(102, 153, 255);
	}


#timer {
	position:fixed;
	left:1px;
	bottom:0;
	}

#timer button {
	font-size:8pt;
	padding:1px;
	margin:1px;
	}

#btnStop, #btnReset {
	display:none;
	}

#selectedcourses div {
	white-space: nowrap;
	display: inline;
	}

#selectedcourses input[type='checkbox'] {
	display: table-cell;
	}
	
#selectedcourses label{
	margin-right:1cm;
	}
	
#tbl_practice {
	width:100%;
	}

#tbl_practice tr td:first-child {
	width:10px;
	text-align:center;
	vertical-align: top;
	}

#tbl_practice tr td:nth-child(2) {
	text-align:center;
	vertical-align: top;
	}

#tbl_practice tr td:first-child img {
	margin:5px;
	}

#itemcontent {
	font-size: 200%;
	unicode-bidi: plaintext;
	}

#practiceanswer {
	width:90%;
	}

#yesno {
	width:100%;
	border:none;
	margin-bottom:1cm;
	}

#yesno tr td:first-child, 
#yesno tr td:last-child {
	width:50%;
	text-align: center;
	border:none;
	}

#yesno a {
	display:block;
	border-radius:5px;
	border-color: white;
	border-style: outset;
	padding:.5ex;
	padding-left:1em;
	padding-right:1em;
	color:navy;
	text-shadow: 3px 3px 5px black;
	background-color:silver;	
	margin-left:1em;
	margin-right:1em;
	}

#newuser {
	margin-bottom: 1cm;
	width:75%;
	}

#newuser table tr td:first-child{
	width:25%;
	}

#newuser input[type='text'],
#newuser input[type='password'] {
	width:90%;
	}

#userinfo  tr td:first-child {
	text-align: right;
	padding-right:5ex;
	font-style: italic;
	}

#userinfo  tr td:nth-child(2) {
	font-weight: bold;
	}

#btn_downloadexported, 
#btn_addlevel ,
#btn_createcourse,
#btn_importcourse,
#btn_exportcourse,
#btn_createcategory,
#btn_edituser,
#btn_addlessonitem,
#btn_addlessonitem2 {
	display:block;
	border-radius:5px;
	border-color: white;
	border-style: outset;
	padding:.5ex;
	padding-left:1em;
	padding-right:1em;
	color:navy;
	text-shadow: 3px 3px 5px black;
	background-color:silver;	
	margin-left:1em;
	margin-right:1em;
	float:right;
	}

#tbl_courseedittoolbar,
#tbl_courseedittoolbar td {
	border:none;
	text-align: center;
	}

#practicearea {
	unicode-bidi: plaintext;
	}

#btn_edititemcancel,
#btn_edititemcancel2 {
	display:block;
	border-radius:5px;
	border-color: white;
	border-style: outset;
	padding:.5ex;
	padding-left:1em;
	padding-right:1em;
	color:navy;
	text-shadow: 3px 3px 5px black;
	background-color:silver;	
	margin-left:1em;
	margin-right:1em;
	width:auto;
	text-align: center;
	float:right;
	}

#tbl_courseedittoolbar a {
	display:block;
	border-radius:5px;
	border-color: white;
	border-style: outset;
	padding:.5ex;
	padding-left:1em;
	padding-right:1em;
	color:navy;
	text-shadow: 3px 3px 5px black;
	background-color:silver;	
	margin-left:1em;
	margin-right:1em;
	}

#editcoursename,
#editcourseinfo,
#newcourseinfo,
#newcoursename {
	width:90%;
	}

#tbl_courseinfo td, #tbl_courseinfo th {
	text-align:center;
	border:none;
	}

#tbl_edititem tr td:first-child {
	width:10%;
	text-align: right;
	font-style: italic;
	vertical-align: top;
	padding:1ex;
	}

#tbl_edititem tr td:nth-child(2) {
	width:65%;
	}

#tbl_edititem tr td:nth-child(3) {
	width:25%;
	text-align: center;
	vertical-align: top;
	padding:.5ex;
	font-size:85%;
	}

#tbl_edititem #edititem_name,
#tbl_edititem #edititem_content,
#tbl_edititem #edititem_info,
#tbl_edititem #edititem_extra1,
#tbl_edititem #edititem_extra2 {
	width:95%;
	margin: 0;
    padding: 2px; /* it's best to have a little padding */
    border: 1px solid #ccc; /* gets around varying border styles */
	}

#tbl_edititem #edititem_content,
#tbl_edititem #edititem_info,
#tbl_edititem #edititem_extra1,
#tbl_edititem #edititem_extra2 {
	min-height: 100px;
	}

#lesson_main h6 {
	background-color: transparent;
	text-shadow: 2px 2px 10px black;
	box-shadow: none;
	padding:0;
	text-align:center;
	margin:0;
	border-radius:0;
	font-size:100%;
	font-weight: bolder;
	font-style: italic;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color:silver;
	}

#backtolevel{
	display:block;
	border-radius:5px;
	border-color: white;
	border-style: outset;
	padding:.5ex;
	padding-left:1em;
	padding-right:1em;
	margin:1ex;
	margin-top:1.5cm;
	color:navy;
	text-shadow: 3px 3px 5px black;
	background-color:#FFFFCC;
	color:navy;
	}

#test {
	font-size:100;
	}