@charset "utf-8";

body.classroom {
   color: #000 !important;
   background-color: #DDD !important;
   overflow-y: scroll;
   font-family: "Open Sans", Arial, sans-serif;
}

.modal {
   color: #666;
}

.modal a, .modal a:visited {
   color: #666;
}

.modal a:hover, .modal a:active {
   color: #666;
   text-decoration: underline;
}

.page_heading a {
   text-decoration: underline;
}

body.classroom a  { color: #8288FF !important; }
body.classroom a:visited { color: #8288FF; }
body.classroom a:hover { color: #8288FF !important; text-decoration: underline !important; }
body.classroom a:active { color: #8288FF !important; }

#dashboard_header {
   margin-top: 20px;
   height: 100px;
   line-height: 100px;
   vertical-align: middle;
}

#dashboard_header .fa-home {
   position: relative;
   top: 10px;
   font-size: 50px; 
   color: #3399FF; 
   text-decoration: none;
}

#tabs {
   width: 980px;
   height: 40px;
   margin: 0 auto;
}

#tabs a {
   color: #FFF !important;
   text-decoration: none !important;
}

#tabs a:hover {
   color: #000 !important;
   text-decoration: none !important;
}

#tabs-dashboard_header {
   width: 980px;
   margin: 0 auto;
}

#tabs-content {
   width: 980px;
   margin: 0 auto;
}

#tabs-footer h4 {
   color: #3399FF;
}

.video {
   border: 5px solid #FFF;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -khtml-border-radius: 10px;
   -webkit-border-radius: 10px;
   -webkit-box-shadow: 0px 0px 4px #000;
   -moz-box-shadow: 0px 0px 4px #000;
   box-shadow: 0px 0px 4px #000;
}

.audio_player {
   display: none;
}

.classroom .page_heading {
   font-size: 20px;
   color: #000;
   font-weight: 300;
}

#tabs .highlight {
   color: #002060 !important;
   text-shadow: none !important;
}

.custom-select {
   position: relative;
   top: -5px;
}

/* FLASHCARDS */

#flashcards_container {
   width: 980px;
   overflow: hidden;
}
	
#flashcards_div {
   padding-top: 20px;
   width: 930px;
   overflow: hidden;
}

#flashcards	{
   width: 980px;
   margin: 0 auto 20px auto;
   position: relative;
}

#flashcards * {
   box-sizing: content-box !important;
}

#flashcards ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

#flashcards li {
   padding: 0;
   float: left;
   border: 4px solid #FFF;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   -webkit-border-radius: 5px;
   box-shadow: 0 0 4px #000;
   -moz-box-shadow: 0 0 4px #000;
   -webkit-box-shadow: 0 0 4px #000;
   behavior: url(js/PIE.htc);
}

#flashcards li.x3 {
   width: 214px;
   height: 194px;
   overflow: hidden;
}

#flashcards li.x2 {
   width: 320px;
   height: 275px;
   overflow: hidden;
}

#flashcards li.x1 {
   width: 600px;
   height: 516px;
   overflow: hidden;
}

#flashcards li:hover {
   border: 4px solid #fff;
}


#flashcards li .flashcard {
   overflow: hidden;
   position: relative;
   z-index: 20;
   background-color: #7BB8FD;
}

#flashcards li .flashcard .cover {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
   background-color: #6E82BE;
   color: #FFF;
   vertical-align: middle;
}

#flashcards li .flashcard .item {
   color: #000;
}

#flashcards li .flashcard .trans {
   color: #FFF;
}

#flashcards li .flashcard .summary {
   color: #000;
}
   
#flashcards li .flashcard .example {
   color: #000;
}

#flashcards li.x1 .flashcard {
   width: 580px;
   height: 516px;
   padding: 15px;
}

#flashcards li.x1 .flashcard .cover {
   width: 600px; 
   height: 516px;
   font-size: 65px;
   line-height: 75px;
   text-align: center;
}

#flashcards li.x1 .flashcard .item, #flashcards li.x1 .flashcard .trans {
   font-size: 60px;
   line-height: 60px;
   margin-bottom: 30px;
}

#flashcards li.x1 .flashcard .summary {
   font-size: 40px;
   line-height: 50px;
   margin-bottom: 30px;
}

#flashcards li.x1 .flashcard .example {
   font-size: 40px;
   line-height: 50px;
}

#flashcards li.x2 .flashcard {
   width: 300px;
   height: 275px;
   padding: 15px;
}

#flashcards li.x2 .flashcard .cover {
   width: 320px; 
   height: 275px;
   line-height: 45px;
   font-size: 35px;
   text-align: center;
}

#flashcards li.x2 .flashcard .item, #flashcards li.x2 .flashcard .trans {
   font-size: 20px;
   line-height: 25px;
   margin-bottom: 20px;
}

#flashcards li.x2 .flashcard .summary {
   font-size: 20px;
   line-height: 25px;
   margin-bottom: 20px;
}

#flashcards li.x2 .flashcard .example {
   font-size: 20px;
   line-height: 25px;
}

#flashcards li.x3 .flashcard	{
   width: 184px;
   height: 164px;
   padding: 15px;
}

#flashcards li.x3 .flashcard .cover {
   width: 214px; 
   height: 194px;
   line-height: 35px;
   font-size: 25px;
   text-align: center;
}

#flashcards li.x3 .flashcard .item, #flashcards li.x3 .flashcard .trans {
   font-size: 15px;
   line-height: 17px;
   margin-bottom: 10px;
}

#flashcards li.x3 .flashcard .summary {
   font-size: 15px;
   line-height: 19px;
   margin-bottom: 10px;
}

#flashcards li.x3 .flashcard .example {
   font-size: 15px;
   line-height: 17px;
}

#flashcards_container td.hidden {
   display: none;
}

#flashcards_container td.visible {
   display: table-cell;
}

#flashcards_container .buttons {
   width: 25px;
   height: 35px;
   display: block;
}

#flashcards_container .prev	{ left: 0px; }
#flashcards_container .next	{ right: 0px; }

#flashcards_container a.prev { background:url(../../images/flashcards/carousel_left_btn_dark.png) 0 0 no-repeat; }
#flashcards_container a.next { background:url(../../images/flashcards/carousel_right_btn_dark.png) 0 0 no-repeat; }

#flashcards_container a:hover.prev { background-position: 0 -35px; }
#flashcards_container a:hover.next { background-position: 0 -35px; }

#flashcards_container a.disable.prev, #flashcards_container a:hover.disable.prev { 
   background-position: 0 -70px; 
   cursor: default;
}

#flashcards_container a.disable.next { 
   background-position: 0 -70px; 
   cursor: default;
}