/* GENERAL */
.app_width { width: 800px; }
.app_width_wide { width: 1200px; }
.extra-bold {
  font-family: 'extrabold', Geneva, Arial, sans-serif;
}

/* ---------------------------------------------------------------------- *\
 * Backgrounds
/* ---------------------------------------------------------------------- */
#content.bg-agents-1 {
    background-image: url('../media/app/img/agents_kitchen.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 190px;
}

#content.bg-agents-2 {
    background-image: url('../media/app/img/agents_reception.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 300px;
}

/******************************************\
 *
 * Spacers
 * So images cannot be right clicked and saved as
 *
/******************************************/
.spacer {
  position:absolute;
  left:0;
  height:100%;
  width:100%;
  z-index:100000;
}
.spacer_lemma {
  top:0;
}
.spacer_agent {
  width:800px;
  z-index: 6;
}


div.shade {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  background-color:#fff;
  opacity:0.7;
  filter: alpha(opacity = 70);
  z-index:-1;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
}
.exc_view { height: 435px; z-index: 6;}
.subtitle { position:absolute; top:0; left:0; padding:3px; display:none; background-color:#000; color:#FFF; z-index:100 !important; }

/* SUCCESS */
#success_msg { position:absolute; bottom:8px; width:100%; text-align:center; }
#success_msg span { padding:3px; background-color:#bf5660; color:#FFF; }


/******************************************\
 *
 * Help phrases
 *
/******************************************/
.help-phrase-container {
  top: 50px;
  text-align:center;
  position:absolute;
  width:100%;
  z-index:1000;
}
.help-phrase-container .help-phrase {
  color:#FFF;
  font-size:11px;
  padding:5px;
}


/**********************************\
 *
 * AGENTS
 *
/**********************************/
#app_view .agent {
  position: absolute;
  z-index: 5;

}

#app_view .asst_manager {
  width: 150px;
}

#app_view .manager {
 max-width: 275px;
}

#app_view .asst_chef {
  width: 150px;
}

/* Make agents bigger */
#app_view .agent-big {
    max-width: 400px;
}


/* ------------------------------------------------- *\
 *
 * Certificate summary overlay
 *
/* ------------------------------------------------- */
#certificate {
  float: left;
  width: 755px;
  height: 350px;
  margin: 0;
  padding: 5px 15px;
  position: absolute;
  top: 50px;
  left: 20px;
  display: none;
  background-color: #FFF;
  box-sizing: border-box;
  z-index: 1000;
  font-family: 'Times new roman';
  font-size: 16px;
  box-shadow: 0 0 5px 1px #B9B9B9;
  -moz-box-shadow: 0 0 5px 1px #B9B9B9;
  -webkit-box-shadow: 0 0 5px 1px #B9B9B9;
  background: url('../media/app/img/certificate-paper-bg.png') top left;
}
#certificate #print {
  position: absolute;
  top: 50px;
  right: 20px;
  font-size: 20px;
}
#certificate #character {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}
#certificate #icon {

  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
}
#certificate .tab {
  margin-left: 175px;
}
#certificate .top {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
#certificate .top h1 {
  color: #272727;
}
#certificate .top .date {
  float: right;
  font-size: 12px;
  font-weight: normal;
  color: #656565;
}
#certificate ul {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}
#certificate ul li {
  float: left;
  width: 100%;
  padding: 0 0 20px 0;
}
#certificate ul li span {
  float: left;
  width: 250px;
}
#certificate .footer {
  position: absolute;
  bottom: 10px;
  font-size: 13px;
  clear: both;
}


/******************************************\
 *
 * Toolbar - Cloche
 *
/******************************************/
#toolbar {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  margin:0px 0px 0px 0px;
  padding: 5px;
  height: 40px;
  background-color:#808080;
  opacity:0.7;
  z-index: 10000;
}
#toolbar img { max-height:28px; margin:0px 10px 0px 0px; }
#toolbar #back_btn { float:left; margin:2px 0px 0px 2px; }
#toolbar #dict { float:left; padding: 3px 10px 0px 0px; position: relative;}
#toolbar #dict .icon { position: absolute; left: 0; top:0; }
#toolbar #dict select { margin-left: 35px; }
#toolbar #lang_select { float:right; padding:3px 10px 0px 0px; color:#FFF; }
.ui-autocomplete { max-height: 350px; z-index:1000 !important; overflow-y: auto; overflow-x: hidden; /* prevent horizontal scrollbar */ padding-right: 20px; /* add padding to account for vertical scrollbar */ }
#toolbar #certificate-btn {
  float: right;
}
/* Dictionary - Box where term goes in after search */
#dict_translate_field { position:absolute; padding:0px 10px 5px 10px; top:0px; left:0px; width:430px; min-height:100px; z-index:1001; background-color:#000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px; display:none; opacity:0.8; color:#FFF; }
#dict_translate_field #img_cntr { position:absolute; top:10px; right:10px; width:100px; height:100px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px; opacity:0.7; background-color:#FFF; display:none; text-align:center; }
#dict_translate_field #img_cntr .v-align { display:table-cell; vertical-align:middle; }
#dict_translate_field #img_cntr #img { max-width:100px; max-height:100px; opacity:1; }
#dict_translate_field #phrases { padding:20px 0px 0px 0px; }
#dict_translate_field #phrases ul li { padding:0px 0px 5px 0px; }
#dict_translate_field #phrases ul li .target_phrase { margin:0; padding:0px 0px 5px 0px; }
#dict_translate_field #phrases ul li .phrase_snd_btn { position:relative; top:3px; left:5px; width:16px; }

/* BG IMAGE */
#exc_bg_image { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; z-index:0; }
/* Shade over bg image */
#shade { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; z-index: 0; background-color:#000; opacity:0.5; filter: alpha(opacity = 50); }

/* EXC LIST */
#exc_list_cntr { position: relative; width:100%; margin:0px 0px 0px 0px; padding:75px 0px 10px 0px; overflow:hidden; z-index: 1; }
#exc_list_cntr #outer { float:left; position:relative; left:50%; }
#exc_list_cntr #inner { float:left; position:relative; left:-50%; }
#exc_list_cntr #exc_list { float:left; padding:5px; margin:0; border:1px solid #FFF; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; }
#exc_list_cntr #exc_list li { float:left; margin:0; padding:0px 3px 0px 0px; list-style:none; }
#exc_list_cntr #exc_list li:hover { background:url('../media/app/img/glow.png') no-repeat; }
#exc_list_cntr #exc_list li.selected { background:url('../media/app/img/glow.png') no-repeat; border-bottom:1px solid #F00; }
#exc_list_cntr .bg { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; background-color:#FFF; opacity:0.5; z-index:-1; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px;}

/* END OF GENERAL */



/* APP VIEW */

#app_view {
  position: relative;
  min-height: 598px;
  overflow: hidden;
}
#app_view #white_shade {
  width: 750px;
  height: 75%;
  position: absolute;
  left: 25px;
  margin: 0 0 0 0;
  top: 125px;
  background-color: white;
  opacity: 0.5;
  filter: alpha(opacity = 50);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#app_view #exc_cntr {
  position: relative;
  margin: 0px 0px 0px 25px;
  z-index: 6;
}

#app_view #exc_cntr #close-cntr {
  position: absolute;
  right: 15px;
  top: -15px;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
  -ms-border-radius: 50px;
  -webkit-border-radius: 50px;
  font-size: 30px;
  overflow: hidden;
  padding: 0 5px;
}

#app_view #exc_cntr #close-cntr .bg {
  position: absolute;
background-color: white;
opacity: 0.5;
width: 100%;
height: 100%;
z-index: 0;
left: 0;
top: 0;
}

#app_view #exc_cntr #close-cntr .icon {
  position: relative;
  z-index: 10;
}

/* ---------------------------------------------------------------------- *\
 * Section overview
/* ---------------------------------------------------------------------- */
#section-overview h1 {
  color: #FFF;
  padding: 0 10px;
}

/* ---------------------------------------------------------------------- *\
 * Scene overview
/* ---------------------------------------------------------------------- */
#scene_overview {
  margin: 0;
  padding: 0;
  width: inherit;
  height: inherit;
}

#scene_overview .image-cntr {
  position: absolute;
  padding: 0 10px 0 0;
}

#scene_overview .icon-cntr {
  position: absolute;
  bottom: 3px;
  right: 0;
  font-size: 20px;
  border-radius: 50px;
  -webkit-border-radius:50px;
  -ms-border-radius:50px;
  -moz-border-radius: 50px;
  padding: 1px;
  overflow: hidden;
}

#scene_overview .icon-cntr .icon-bg {
  position: absolute;
  background-color: #FFF;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: 0;
}

#scene_overview .icon-cntr .icon {
  position: relative;
  z-index: 1;
  color: #5ECF05;
}

#scene_overview .parent-scene {
    padding: 5px;
    background-color: #DDD;
    color: #333;
}

/* SCENE DETAIL VIEW */
#scene_detail_view { float:left; width:752px; height:435px; margin:0; padding:0; }

#scene_detail_view .interaction {color:#FFF; padding-left:30px; }
#scene_detail_view .interaction img { width: 22px; padding-right:5px; }
#scene_detail_view .interaction p { margin:0; }
#scene_detail_view .change { padding-left:350px; }
#scene_detail_view h3 { margin:5px 0px 5px 0px; }



/* ---------------------------------------------------------------------- *\
 *
 * Exercises type views
 *
/* ---------------------------------------------------------------------- */

/**********************************\
 * INTERACTION NOT COMPLETED VIEW
/**********************************/
#interaction_nc_view {
  float: left;
  position: relative;
  height: 503px;
  width: 100%;
}

#interaction_nc_view #play_btn {
  position: absolute;
  top: 40%;
  left: 47%;
  z-index: 3;
}

/**********************************\
 * INTERACTION VIEW
/**********************************/
#interaction_view #item_cntr {
  position: absolute;
  bottom: 0;
  z-index: 200;
}

#interaction_view .stimulus {
  position: absolute;
  left: 90px;
  bottom: 0px;
  z-index: 200;
}

#interaction_view ul {
  position: absolute;
  left: 175px;
  bottom: -20px;
  margin: 0;
  padding: 0;
  z-index: 10;
}
#interaction_view ul li {
  position: relative;
  width: 420px;
  min-height: 28px;
  padding: 6px 5px 5px 10px;
  margin: 0px 0px 5px 0px;
  list-style-type: none;
  color: #000;
  background-color: #FFF;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  border: 1px solid #999;
}

#interaction_view ul li .result-cntr {
  position: absolute;
  top: 0;
  right: 0;
}
#interaction_view ul li .result-cntr img {
  width:26px;
  margin-left:5px;
}

#interaction_view ul li.select_react_response .play_btn {
  position:absolute;
  left:0;
  top:0px;
  z-index:200;
}
#interaction_view ul li.select_react_response .text {
  display: inline-block;
  zoom: 1;
  width: 100%;
  height: 100%;
  padding-left: 20px;
}


/* ---------------------------------------------------------------------- *\
 * Override interaction for reception
/* ---------------------------------------------------------------------- */
.interaction-reception .interpret {
    background: #BBB;
    left: 260px !important;
    padding: 15px !important;
    width: 270px;
}

.interaction-reception .interpret li {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  float: left;
}

.interaction-reception .interpret img {
    width: 100px;
}

/* ---------------------------------------------------------------------- *\
 * Matching exercises (Match lemmas | Match Phrases)
/* ---------------------------------------------------------------------- */
.match-exc {
  position: relative;
  width: 720px;
  margin: 0 0 0 15px;
}

.match-exc #main_shade {
  opacity: .5;
}

.match-exc .item-cntr {
    display: inline-block;
    float: left; /* IE 8 */
    zoom: 1;
    height: 140px;
    width: 120px;
}

.match-exc #items {
  float: left;
  width: 100%;
  padding: 20px 0 0 10px;
  margin: 0;
  background: none;
}

.match-exc #items .item {
  display: table;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 0 5px 0
}

.match-exc #items .item .valign { display:table-cell; vertical-align:middle; padding:0; margin:0; text-align:center; }
.match-exc #items .item img { max-height:90px; max-width:90px; }
.match-exc #items .item img.selectable:hover { cursor:pointer; }
.match-exc #items .source_lemma_text { position:absolute; bottom:7px; left:0; width:100%; text-align:center; }
.match-exc #items .source_lemma_text span { padding:2px; background-color:#FFF; }
.match-exc #items .target_lemma_text { position:absolute; top:5px; right:0; padding:2px; background-color:#000; color:#FFF; z-index:1; }
.match-exc #items .img_status { position:absolute; bottom:5px; right:5px; display:none; }

.match-exc .zoom-in-image {
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  background: #9B3838;
  padding: 3px;
  border-radius: 26px;
}

.match-exc #items .debug-btn {
  height: 20px;
}
.match-exc #bottom_cntr { float:left; position:absolute; bottom:0; width:100%; padding:0px 0px 10px 0px; text-align:center; }
.match-exc #bottom_cntr .lemma { position:absolute; bottom:20px; left:385px; background-color:#000; color:#FFF; z-index:1; }

/* DIAL REORDER */
#dial_reorder_view .edit_snd_btn { position:absolute; margin:0; top:0; right:50px; }
#dial_reorder_view .edit_btn { position:absolute; margin:0; top:0; right:25px; }
#dial_reorder_view { position:relative; width:720px; margin:0px 0px 0px 15px; padding:0; z-index: 10;}
/*
#dial_reorder_view ul { margin:0px 0px 0px 0px; padding:0;  }
#dial_reorder_view ul li { height:21px; margin:0px 0px 3px 0px; padding:0; list-style:none; }
*/
#dial_reorder_view #item_cntr { position:relative; top: 20px; margin:0 auto; width: 590px;}
#dial_reorder_view #sound_clips { padding:0; margin:0; list-style:none; position:absolute; top:0px; left:0; z-index:10;}
#dial_reorder_view #sound_clips li { height:24px; position:relative; padding:2px 0px 1px 1px;  }
#dial_reorder_view #sound_clips li img { height:18px; width: 18px;  }
#dial_reorder_view #text_items { margin: 0; padding: 0; list-style: none; }
#dial_reorder_view #text_items li { position:relative; padding:0px 6px 2px 6px; margin: 0px 0px 3px 0px; width:580px; height: 21px; overflow:hidden; }
#dial_reorder_view #text_items li p {  margin:0px 20px 0px 35px; padding:0; color:#000; min-width:390px; }
#dial_reorder_view #text_items img.img_status { position:absolute; top:4px; right:4px; width:18px; height: 18px; display:none; }
#dial_reorder_view #bottom_cntr { position:absolute; bottom:0; width:100%; padding:0px 0px 10px 0px; text-align:center; }


/* ---------------------------------------------------------------------- *\
 * Certificate detail view
/* ---------------------------------------------------------------------- */
#certificate-detail-view {
    position: relative;
    background: url(../media/app/img/certificate-char-m.png) bottom right no-repeat;
}

    #certificate-detail-view .course {
        display: inline-block;
        zoom: 1;
        padding: 0 20px 0 0;
        vertical-align: top;
        width: 50%;
    }

    #certificate-detail-view #print {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        font-size: 30px;
        color: #BA424F;
    }

    #certificate-detail-view .tab {
        display: inline-block;
        zoom: 1;
        width: 200px;
    }

    #certificate-detail-view #scene-list .main-item {
        line-height: 1.7;
        margin-bottom: 10px;
    }

/* ----------------------------------------------------------- *\
 *
 * LOGO SQUARES
 *
/* ----------------------------------------------------------- */
.logo-squares {
  display: table;
}

.logo-squares .square {
  display: inline-block;
  zoom: 1;
  margin: 5px;
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  font-weight: bold;
}
.logo-squares .vertical-align {
  display: table-cell;
  vertical-align: middle
}
.logo-squares-100 .square,
.logo-squares-100 .vertical-align {
  width: 100px;
  height: 100px;
}
.logo-squares-200 .square,
.logo-squares-200 .vertical-align {
  width: 242px;
  height: 242px;
}
.logo-squares-200 .bg-kitchen {
  background: url(../media/app/img/characters-white.png) no-repeat bottom right;
}
.logo-squares-365 .square,
.logo-squares-365 .vertical-align {
  width: 365px;
  height: 365px;
}


/* ---------------------------------------------------------------------- *\
 * Speechbubbles
/* ---------------------------------------------------------------------- */
.speech-bubble {
    background-color: #fff;
    color: #333;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    max-width: 350px;
    padding: 10px;
    position: absolute;
    z-index: 10;
}

.speech-bubble.left {
    top: 200px;
    left: 200px;
}

.speech-bubble.right {
    top: 280px;
    right: 130px;
}

.speech-bubble .bubble {
    display: inline-block;
    zoom: 1;
    -ms-border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background-color: #fff;
    position: absolute;
}

.speech-bubble .bubble-m {
    height: 10px;
    width: 10px;
    bottom: -10px;
}

.speech-bubble .bubble-s {
    height: 5px;
    width: 5px;
    bottom: -20px;
}

.speech-bubble.left .bubble-m {
    left: -10px;
}

.speech-bubble.left .bubble-s {
    left: -20px;
}

.speech-bubble.right .bubble-m {
    right: -10px;
}

.speech-bubble.right .bubble-s {
    right: -20px;
}