@font-face {
    font-family: averia;
    src: url(../data/averia.ttf);
}

* {
  padding: 0px;
  margin: 0px;
  border: 0;
}

p 
{
  margin-top: 0px;
  margin-bottom: 0px;
}

.active
{
}

.inactive,
.tutorial .default,
.tutorial .challenge,
.tutorial .no_tutorial,
.default .tutorial,
.default .challenge,
.challenge .tutorial,
.challenge .default
{
    display:none;
}

/**/

#mastermind_screen
{
  width:840px;
  height:526px;
  position:relative;
  background-color:#F0F0F0;
  background-image:url(../img/background.png);
}

/**/


#mastermind_main,
#mastermind_start,
#mastermind_game,
#mastermind_menu_info,
#mastermind_won,
#mastermind_won_inner
{
  position:absolute;
  left:0;
  right:0;
  font-family:averia;
  letter-spacing:-7px;
}

#mastermind_main,
#mastermind_start,
#mastermind_game,
#mastermind_won
{
  position:absolute;
  top:0;
  bottom:0;
}

#mastermind_won
{
  background-color:rgba(0,0,0,0.54);
}

/**/

#mastermind_menu_main
{
  position: absolute;
  top:250px;
}

#mastermind_menu_info_back
{
  position: absolute;
  top:410px;
}

#mastermind_menu_info_bg
{
  color:#000;
  position: absolute;
  top:-112px;
  left:0px;
  right:0px;
  height:515px;
  background-image: url(../img/background_01.png);
}

#mastermind_menu_start
{
  position:absolute;
  top:86px;
  right:0px;
}

#mastermind_game
{
  padding:16px 18px;
}

/**/

#mastermind_title,
#mastermind_title_info
{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
}

/**/

#mastermind_menu_main .mastermind_button,
#mastermind_menu_info .mastermind_button
{
  float:left;
}

#mastermind_menu_start .mastermind_button
{
  float:right;
}

#mastermind_menu_main .focus>.mastermind_button:before,
#mastermind_menu_info .focus>.mastermind_button:before {
   content: "> ";
}

#mastermind_menu_start .focus>.mastermind_button:after {
   content: " <";
}

.mastermind_button
{
  color:#fac998;
  font-size:72px;
  margin:8px 0px;
  padding:0px 32px;
  background-color:rgba(255,255,255,0.90);
  clear:both;
}

.focus>.mastermind_button
{
  color:#bc586e;
  font-size:76px;
}

/**/

.mastermind_lane
{
  /*width:455px;*/
  width: 100%;
  height:124px;
  position:relative;
}

/**/

#mastermind_info
{
  position:absolute;
  top:15px;
  right:15px;
  width:227px;
  height:269px;
  background-image:url(../img/information.png);
}

#mastermind_game_info
{
  position:absolute;
  top:0;
  left:0;
  width:310px;
  height:148px;
  padding-right:190px;
  background-image:url(../img/background_03.png);
}

#mastermind_game_info .mastermind_infotext
{
  position:relative;
  top:-6px;
  left:-3px;
}

.mastermind_infotext,
#mastermind_help
{
  font-family:Georgia, serif;
  font-size:22px;
  color:#1c6071;
  letter-spacing:0px;
  text-align:center;
}

.mastermind_infotext
{
  padding:20px 20px 15px 20px;
}

#mastermind_button_one
{
  width: 72px;
  height: 72px;
  background-image: url(../img/button_tv_one.png);
  margin:auto;
}

#mastermind_info>.mastermind_infotext p
{
  padding:10px 0px;
}

#mastermind_game_info>.mastermind_infotext p
{
  padding:3px 0px;
}

#mastermind_help
{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  background-image:url(../img/background_01.png);
  height:515px;
}

.mastermind_number
{
  color:#6ac5da;
  float:left;
  width:66px;
  height:66px;
  line-height:66px;
  font-size:48px;
  text-align:center;
  text-indent:-8px;
  margin:29px 17px;
  background-image:url(../img/lane_number.png);
}

.mastermind_number.current
{
  color:#ff9326;
  width:92px;
  height:92px;
  font-size:64px;
  line-height:92px;
  margin:16px 4px;
  background-image: url(../img/lane_number_current.gif);
}

#mastermind_game .mastermind_slots,
#mastermind_won .mastermind_slots
{
  background-repeat:no-repeat;
  width:320px;
  height:80px;
}

#mastermind_game .mastermind_slots
{
  background-image:url(../img/lane.png);
  padding:22px;
  float:left;
}

#mastermind_won .mastermind_slots
{
  position:absolute;
  left:230px;
  top:245px;
  padding:30px;
}

#mastermind_won.won #won_slots
{
  background-image:url(../img/lane_end_won.png);
}

#mastermind_won.won #lost_slots
{
  background-image:none;
}

#mastermind_won.lost #won_slots
{
  background-image:none;
}

#mastermind_won.lost #lost_slots
{
  background-image:url(../img/lane_end_lost.png);
}

#lost_slots>div
{
  left:-6px;
  opacity:0.68;
}

.mastermind_slot
{
  float:left;
  position:relative;
  background-size:100%;
  top:-5px;
}

.mastermind_slots>.focus
{
  float:left;
  background-image:url(../img/selection.png);
  background-repeat:no-repeat;
  width:96px;
  height:96px;
  margin:-8px;
}

.mastermind_slots>.focus>.mastermind_slot
{
  float:left;
  width:100%;
  height:100%;
  top:-8px;
}


.mastermind_slots>.mastermind_slot
{
  float:left;
  width:80px;
  height:80px;
}

#mastermind_game .mastermind_slot.blue,
#mastermind_won.won .mastermind_slot.blue {
  background-image: url(../img/mm_blue_small.png);    
}
#mastermind_game .mastermind_slot.red,
#mastermind_won.won .mastermind_slot.red {
  background-image: url(../img/mm_red_small.png);     
}
#mastermind_game .mastermind_slot.green,
#mastermind_won.won .mastermind_slot.green {
  background-image: url(../img/mm_green_small.png);
}
#mastermind_game .mastermind_slot.yellow,
#mastermind_won.won .mastermind_slot.yellow {
  background-image: url(../img/mm_orange_small.png);
}
#mastermind_game .mastermind_slot.magenta,
#mastermind_won.won .mastermind_slot.magenta {
  background-image: url(../img/mm_magenta_small.png);
}
#mastermind_game .mastermind_slot.cyan,
#mastermind_won.won .mastermind_slot.cyan {
  background-image: url(../img/mm_cyan_small.png);
}

#mastermind_game .focus>.mastermind_slot.blue {
  background-image: url(../img/mm_blue.png);    
}
#mastermind_game .focus>.mastermind_slot.red {
  background-image: url(../img/mm_red.png);     
}
#mastermind_game .focus>.mastermind_slot.green {
  background-image: url(../img/mm_green.png);
}
#mastermind_game .focus>.mastermind_slot.yellow {
  background-image: url(../img/mm_orange.png);
}
#mastermind_game .focus>.mastermind_slot.magenta {
  background-image: url(../img/mm_magenta.png);
}
#mastermind_game .focus>.mastermind_slot.cyan {
  background-image: url(../img/mm_cyan.png);
}

#mastermind_won.lost .mastermind_slot.blue {
  background-image: url(../img/mm_blue_lost.png); 
}
#mastermind_won.lost .mastermind_slot.red {
  background-image: url(../img/mm_red_lost.png);
}
#mastermind_won.lost .mastermind_slot.green {
  background-image: url(../img/mm_green_lost.png);
}
#mastermind_won.lost .mastermind_slot.yellow {
  background-image: url(../img/mm_orange_lost.png);
}
#mastermind_won.lost .mastermind_slot.magenta {
  background-image: url(../img/mm_magenta_lost.png);
}
#mastermind_won.lost .mastermind_slot.cyan {
  background-image: url(../img/mm_cyan_lost.png);
}

#mastermind_won_inner>.mastermind_slots
{
  float:none;
  margin:auto;
}

/**/

.mastermind_check,
.mastermind_results
{
  float:left;
  width:72px;
  height:72px;
  margin:20px 10px;
  padding:6px;
}

.mastermind_results
{
  background-image:url(../img/indicator.png);
}

.mastermind_result
{
  float:left;
  margin:6px;
  width:24px;
}

.mastermind_result,
#help_default_dot_red,
#help_default_dot_yellow,
#help_default_dot_green
{
  height:24px;
  background-image:url(../img/result_none.png);
}

.mastermind_result.color,
#help_default_dot_yellow
{
    background-image:url(../img/result_color.png);
}

.mastermind_result.place,
#help_default_dot_green
{
  background-image:url(../img/result_place.png);
}

#bg_cloud_purple_static
{
  position: absolute;
  bottom:0px;
  right:0px;
}

#bg_cloud_green_static
{
  position: absolute;
  bottom:0px;
  left:0px;
}

#bg_cloud_yellow_static,
#bg_cloud_yellow_static_won
{
  position:absolute;
  bottom:0px;
  left:0px;
  width:840px;
  height:233px;
  background-image:url(../img/background_02.png);
}

#bg_cloud_yellow_static_eye,
#bg_cloud_yellow_static_won_eye
{
  position:relative;
  width:33px;
  height:33px;
  background-image:url(../img/background_02_eye.png);
}

#mastermind_won_text
{
  background-repeat:no-repeat;
}

.won #mastermind_won_text
{
  position:absolute;
  width:502px;
  height:112px;
  left:169px;
  top:126px;
  background-image:url(../img/text_won.png);
}

.lost #mastermind_won_text
{
  position:absolute;
  width:357px;
  height:113px;
  left:242px;
  top:122px;
  background-image:url(../img/text_lost.png);
}


#bg_cloud_yellow_static_won_eye
{
  left:698px;
  top:124px;
}

.button_tv_ok,
.button_tv_ud,
.button_tv_lr
{
  width:116px;
  height:116px;
  background-repeat:no-repeat;
}

.button_tv_ok
{
  background-image:url(../img/button_tv_ok.png);
}

.button_tv_ud
{
  background-image:url(../img/button_tv_ud.png);
}

.button_tv_lr
{
  background-image:url(../img/button_tv_lr.png);
}

.tutorial_next
{
  position:absolute;
  right:15px;
  bottom:65px;
}

.arrow_l
{
  width:59px;
  height:54px;
  background-repeat:no-repeat;
  background-image:url(../img/arrow_l.png);
}

.arrow_u
{
  width:54px;
  height:59px;
  background-repeat:no-repeat;
  background-image:url(../img/arrow_u.png);
}

#hiddenbutton
{
  nav-index:1;
  nav-right:#hiddenbutton;
  nav-left:#hiddenbutton;
  nav-down:#hiddenbutton;
  nav-up:#hiddenbutton;
  height:1px;
  width:1px;
  border-style:none;
  position: absolute;
  right:0px;
  bottom:0px;
}

#help_default_example_text
{
  position:absolute;
  width:364px;
  height:30px;
  left:71px;
  top:12px;
  text-align:center;
}

#help_default_example
{
  position:absolute;
  width:466px;
  height:240px;
  left:71px;
  top:26px;
  background-repeat:no-repeat;
  background-image:url(../img/help_default.png);
}

#help_default_dot_green,
#help_default_dot_yellow,
#help_default_dot_red
{
  position:absolute;
  background-repeat:no-repeat;
  padding-left:48px;
}

#help_default_dot_green
{
  left:46px;
  top:287px;
}

#help_default_dot_yellow
{
  left:46px;
  top:337px;
}

#help_default_dot_red
{
  left:46px;
  top:387px;
}

#mastermind_help>.tutorial>div
{
  display:none;
}

#mastermind_help>.tutorial>div.active
{
  display:block;
}

#tutorial_0>.mastermind_slots,
#tutorial_0_tt,
#tutorial_0_t0,
#tutorial_0_t1,
#tutorial_1_t0,
#tutorial_2_t0,
#tutorial_3_t0,
#tutorial_3_t1,
#tutorial_4_t0,
#tutorial_5_t0,
#tutorial_5_t1,
#tutorial_5_t2,
#tutorial_6_t0,
#tutorial_6_t1,
#tutorial_7_t0,
#tutorial_7_t1,
#tutorial_8_t0,
#tutorial_9_t0,
#tutorial_9_t1,
#tutorial_10_t0
{
  position:absolute;
}

#tutorial_0>.mastermind_slots
{
  left:239px;
  top:186px;
}

#tutorial_0_tt,
#tutorial_0_t0,
#tutorial_0_t1,
#tutorial_3_t0,
#tutorial_3_t1,
#tutorial_5_t0,
#tutorial_5_t1,
#tutorial_5_t2,
#tutorial_6_t0,
#tutorial_6_t1,
#tutorial_7_t0,
#tutorial_7_t1,
#tutorial_9_t0,
#tutorial_9_t1,
#tutorial_10_t0
{
  left:0px;
  right:0px;
}

#tutorial_0_tt
{
  position:absolute;
  left:0px;
  right:0px;
  font-size:90px;
  font-family:averia;
  letter-spacing:-7px;
  font-weight:bold;
  color:#FF9226;
  top:10px;
}

#tutorial_0_t0
{
  top:115px;
}

#tutorial_0_t1
{
  top:334px;
}

#tutorial_1_t0,
#tutorial_2_t0,
#tutorial_4_t0,
#tutorial_8_t0
{
  left:162px;
  top:220px;
  width:350px;
  height:86px;
}

#tutorial_4_t0
{
  top:229px;
}

#tutorial_8_t0,
#tutorial_10_t0
{
  top:279px;
}

#tutorial_1_b,
#tutorial_2_b,
#tutorial_4_b,
#tutorial_8_b
{
  position:absolute;
  left:513px;
  top:199px;
}

#tutorial_8_b
{
  top:249px;
}

#tutorial_3_t0
{
  top:225px;
}

#tutorial_3_t1
{
  top:265px;
}

#tutorial_5_t0
{
  top:185px;
}

#tutorial_5_t1
{
  top:225px;
}

#tutorial_5_t2
{
  top:292px;
}

#tutorial_1_a,
#tutorial_2_a
{
  position:absolute;
  top:150px;
}

#tutorial_1_a
{
  left:153px;
}

#tutorial_2_a
{
  left:233px;
}

#tutorial_5_a,
#tutorial_6_a,
#tutorial_9_a
{
  position:absolute;
  left:595px;
}

#tutorial_5_a
{
  top:33px;
}

#tutorial_6_a
{
  top:69px;
}

#tutorial_9_a
{
  top:161px;
}

#tutorial_6_t0
{
  top:190px;
}

#tutorial_6_t1
{
  top:256px;
}

#tutorial_7_t0
{
  top:268px;
}

#tutorial_7_t1
{
  top:334px;
}


#tutorial_9_t0
{
  top:268px;
}

#tutorial_9_t1
{
  top:334px;
  color:#d33737;
}

#credits_member
{
  color:#ff9226;
  position:absolute;
  top:112px;
  left:35px;
}

.credits_subject,
#credits_thanks_title
{
  letter-spacing:-2px;
  font-size:16px;
}

.credits_subject
{
  margin-top:25px;
  margin-left:4px;
}

.credits_name
{
  letter-spacing:-4px;
  font-size:42px;
  line-height:42px;
}

#credits_thanks
{
  color:#185F70;
  position:absolute;
  top:180px;
  left:492px;
  text-align:center;
}

#credits_thanks_title
{
  margin-bottom:5px;
}

.credits_thanks_list
{
  font-size:28px;
  letter-spacing:-2px;
  line-height:42px;
}