/*
 * 필기도구 메뉴 
 * - 카메라
 */
#popupToolBoxWindow{
  display: none;
  pointer-events: none;
  position: absolute;
  top:0px; left:0px;
  top:50%; left: 50%;
  transform: translate(-50%, -50%);
  width:1920px; height:1080px;
  background-color: rgba(0,255,0,0); 
  /*z-index: 0;*/
  pointer-events: none;
} 
#toolBox{ 
  position: absolute;
  top:984px; left: 194.5px; 
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width:1600px; height: 100px;
  background-color: rgba(0,0,0,0);
  /*z-index: 999;*/
}

#toolBox{z-index: 1;}
/*
#popupToolBoxWindow{
  bottom:0; left:0;
  height: 100px;
  border:10px solid red;}
#toolBox{top:0;}
*/
#toolBox>div,#toolBox>button,#toolBox>input,
#popup_stamp_panel, #stamp_status{pointer-events: auto;}

.colorPicker{/*top:1007px*/
  border:0px solid red;
  margin:0 -2px;
  width: 62px; height: 68px;
  background-image: url('../img/07_tool/color_black_on.png');
  background-size: 54.5px 54.5px;
  background-repeat: no-repeat;
  background-position: center center;
}
.curColor{background-size: 68px 68px;}

.red{background-image: url('../img/07_tool/color_red_off.png');}
.orange{background-image: url('../img/07_tool/color_orange_off.png');}
.yellow{background-image: url('../img/07_tool/color_yellow_off.png');}
.lightGreen{background-image: url('../img/07_tool/color_LightGreen_off.png');}
.green{background-image: url('../img/07_tool/color_green_off.png');}
.mint{background-image: url('../img/07_tool/color_mint_off.png');}
.skyblue{background-image: url('../img/07_tool/color_skyblue_off.png');}
.blue{background-image: url('../img/07_tool/color_blue_off.png');}
.violet{background-image: url('../img/07_tool/color_violet_off.png');}
.pink{background-image: url('../img/07_tool/color_pink_off.png');}
.peach{background-image: url('../img/07_tool/color_peach_off.png');}
.brown{background-image: url('../img/07_tool/color_brown_off.png');}
.white{background-image: url('../img/07_tool/color_white_off.png');}
.gray{background-image: url('../img/07_tool/color_gray_off.png');}
.black{background-image: url('../img/07_tool/color_black_off.png');}

.red.curColor{background-image: url('../img/07_tool/color_red_on.png');}
.orange.curColor{background-image: url('../img/07_tool/color_orange_on.png');}
.yellow.curColor{background-image: url('../img/07_tool/color_yellow_on.png');}
.lightGreen.curColor{background-image: url('../img/07_tool/color_LightGreen_on.png');}
.green.curColor{background-image: url('../img/07_tool/color_green_on.png');}
.mint.curColor{background-image: url('../img/07_tool/color_mint_on.png');}
.skyblue.curColor{background-image: url('../img/07_tool/color_skyblue_on.png');}
.blue.curColor{background-image: url('../img/07_tool/color_blue_on.png');}
.violet.curColor{background-image: url('../img/07_tool/color_violet_on.png');}
.pink.curColor{background-image: url('../img/07_tool/color_pink_on.png');}
.peach.curColor{background-image: url('../img/07_tool/color_peach_on.png');}
.brown.curColor{background-image: url('../img/07_tool/color_brown_on.png');}
.white.curColor{background-image: url('../img/07_tool/color_white_on.png');}
.gray.curColor{background-image: url('../img/07_tool/color_gray_on.png');}
.black.curColor{background-image: url('../img/07_tool/color_black_on.png');}

.toolClearAll{
  border:0px solid red;
  margin:0 7px 10px 7px;
  width: 103px; height: 60px;
  background-image: url('../img/07_tool/icon_AllClear.png');
  background-size: 103px 47.5px;
  background-repeat: no-repeat;
  background-position: top center;
}
#toolClearAll.disabled{opacity: 0.3;}
.penSelector{
  border:0px solid red;
  margin:0 2.5px;
  width: 37px; height: 96px;
  background-image: url('../img/07_tool/tool_crayon.png');
  background-size: 37px 96px;
  background-repeat: no-repeat;
  background-position: center 55px;
}
.curTool{background-position: center 10px;}
#PenEraser{background-image: url('../img/07_tool/tool_eraser.png');}
#PenSpray{background-image: url('../img/07_tool/tool_spray.png');}
#PenCrayon{background-image: url('../img/07_tool/tool_crayon.png');}
#PenPencil{background-image: url('../img/07_tool/tool_pencil.png');}
#PenMaka{background-image: url('../img/07_tool/tool_maka.png');}
#PenStamp{background-image: url('../img/07_tool/tool_stamp.png');}

/*유아패드 스탬프 메뉴 버튼 상태 조정(활동지 배포시-비활성화,자동초기화 -> 유아들 복습활동시에는??? --> 선생님이 변경한 상태로 유지?!)*/
#childStamp{
  position: absolute;
  border:0px solid red;
  width: 50px;
  height: 50px;
  right: 30px;-10px;
  bottom: 10px;
  background-image: url(../img/child/screen2/icon_select_stamp2_on.png);
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat; 
  filter: grayscale(100%);
}
/**/
#childStamp.on{
  filter: grayscale(0);
  sbackground-image: url(../img/child/screen2/icon_select_stamp2_off.png);
}

/*유아패드카메라*/
#childCamera{
  position: absolute;
  border:0px solid red;
  width: 50px;
  height: 50px;
  right: -26px;-70px;
  bottom: 10px;
  background-image: url(../img/child/screen2/icon_select_camera3_on.png);
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat; 
  filter: grayscale(100%);
}
#childCamera.on{filter: grayscale(0);}

/*
 * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
 */
#brush-size-slider{
  position: absolute;
  sleft:1330px;
  right: 100px;60px;top:50px;
}

/*
 * https://www.w3schools.com/howto/howto_js_rangeslider.asp
 */
input[type=range] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
  width: 160px; 
  height: 37.5px;
  margin: 0;
  border: none;
  background-color: transparent;
  background-image: url('../img/07_tool/tool_bar.png');
  background-size: 160px 37.5px;
  background-position: 5px center;
  background-repeat: no-repeat;
  outline: none;
  float:left;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 56px;
  height: 56px;
  background: url('../img/07_tool/tool_brush_max.png') center center no-repeat;
  background-size: 44px 44px;
}

/*stamp pen*/
#panel_stamp{
  display: none;
  position: absolute;
  bottom: 100px; left: 400px;
  background-color: rgba(0,0,0,0.1);
  padding-bottom: 36px;
}
#panel_stamp{ z-index: 5; }
.stamp{
  width: 72px; height: 72px;
  margin: 2px 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../img/stamp/category/animal_off.png);
 }
.stampPicker{
  display: none;
  width: 72px; height: 72px;
  margin: 2px 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../img/stamp/category/animal_off.png);
  sbackground-size: 72px 72px;
  background-size: 70%;
  filter: grayscale(100%);
}
.stampPicker:first-child,
#statmp_01 { margin-left:250px;}

#statmp_01,#statmp_01.off{background-image: url(../img/stamp/category/weather_off.png);}
#statmp_02,#statmp_02.off{background-image: url(../img/stamp/category/plant_off.png);}
#statmp_03,#statmp_03.off{background-image: url(../img/stamp/category/animal_off.png);}
#statmp_04,#statmp_04.off{background-image: url(../img/stamp/category/sky_off.png);}
#statmp_05,#statmp_05.off{background-image: url(../img/stamp/category/shape_off.png);}
#statmp_06,#statmp_06.off{background-image: url(../img/stamp/category/pattern_off.png);}
#statmp_07,#statmp_07.off{background-image: url(../img/stamp/category/emotion_off.png);}
#statmp_08,#statmp_08.off{background-image: url(../img/stamp/category/craft_off.png);} 
#statmp_09,#statmp_09.off{background-image: url(../img/stamp/category/character_off.png);} 
#statmp_01.on{background-image: url(../img/stamp/category/weather_on.png);}
#statmp_02.on{background-image: url(../img/stamp/category/plant_on.png);}
#statmp_03.on{background-image: url(../img/stamp/category/animal_on.png);}
#statmp_04.on{background-image: url(../img/stamp/category/sky_on.png);}
#statmp_05.on{background-image: url(../img/stamp/category/shape_on.png);}
#statmp_06.on{background-image: url(../img/stamp/category/pattern_on.png);}
#statmp_07.on{background-image: url(../img/stamp/category/emotion_on.png);}
#statmp_08.on{background-image: url(../img/stamp/category/craft_on.png);} 
#statmp_09.on{background-image: url(../img/stamp/category/character_on.png);} 

#statmp_01,#statmp_01.off{background-image: url(../img/stamp/brush_point/brush2_big_01.png);}
#statmp_02,#statmp_02.off{background-image: url(../img/stamp/brush_point/brush2_big_11.png);}
#statmp_03,#statmp_03.off{background-image: url(../img/stamp/brush_point/brush2_big_21.png);}
#statmp_04,#statmp_04.off{background-image: url(../img/stamp/brush_point/brush2_big_31.png);}
#statmp_05,#statmp_05.off{background-image: url(../img/stamp/brush_point/brush2_big_41.png);}
#statmp_06,#statmp_06.off{background-image: url(../img/stamp/brush_point/brush2_big_51.png);}
#statmp_07,#statmp_07.off{background-image: url(../img/stamp/brush_point/brush2_big_61.png);}
#statmp_08,#statmp_08.off{background-image: url(../img/stamp/brush_point/brush2_big_71.png);} 
#statmp_09,#statmp_09.off{background-image: url(../img/stamp/brush_point/brush2_big_81.png);} 
#statmp_01.on{background-image: url(../img/stamp/brush_point/brush2_big_01.png);}
#statmp_02.on{background-image: url(../img/stamp/brush_point/brush2_big_11.png)}
#statmp_03.on{background-image: url(../img/stamp/brush_point/brush2_big_21.png)}
#statmp_04.on{background-image: url(../img/stamp/brush_point/brush2_big_31.png)}
#statmp_05.on{background-image: url(../img/stamp/brush_point/brush2_big_41.png)}
#statmp_06.on{background-image: url(../img/stamp/brush_point/brush2_big_51.png)}
#statmp_07.on{background-image: url(../img/stamp/brush_point/brush2_big_61.png)}
#statmp_08.on{background-image: url(../img/stamp/brush_point/brush2_big_71.png)} 
#statmp_09.on{background-image: url(../img/stamp/brush_point/brush2_big_81.png)} 

.stampPicker.off{filter: grayscale(100%) !important;}
.stampPicker.on{filter: grayscale(0%) !important;}
#popup_stamp_panel{
  display: none;
  position: absolute;
  top: 500px; left: 1500px;
  width: 250px; height: 443px;
  background-image: url(../img/stamp/box2.png);
  background-repeat: no-repeat;
  background-position: top center;
  z-index:1;
  top: 360px;
  width: 670px; height: 270px;
}
.stamp_size_selector{
  border: 0px solid #dedede;
  width: 74px; height: 74px;
  position: absolute;
  background-image: url(../img/stamp/box_s.png);
  background-repeat: no-repeat;
  background-position: center center;
}

#stamp_size_large{
  top:63px; left: 35px;
  top:65px; left: 40px;
  width: 70px; height: 70px;
  background-image: url(../img/stamp/stamp_size_b_off.png);
}
#stamp_size_medium{
  top:69px; left: 111px;
  top:140px; left: 45px;
  width: 58px; height:58px;
  background-image: url(../img/stamp/stamp_size_n_off.png);
}
#stamp_size_small{
  top:78px; left: 175px;
  top:208px; left: 55px;
  width: 40px; height:40px;
  background-image: url(../img/stamp/stamp_size_s_off.png);
}

#stamp_size_small.selected{
  background-image: url(../img/stamp/stamp_size_s_on.png);
}
#stamp_size_medium.selected{
  background-image: url(../img/stamp/stamp_size_n_on.png);
}
#stamp_size_large.selected{
  background-image: url(../img/stamp/stamp_size_b_on.png);
}

#stamp_btn_panel_close{
  position: absolute;
  top: 18px; left: 210px;
  top: 20px; left: 627px;
  width: 21px; height: 21px;
  background-image: url(../img/stamp/quit.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}
#stamp_btn_panel{
  position: absolute;
  top: 130px;
  top: 70px; left:110px;
  background-color: rgba(0,0,0,0);
  padding-left: 10px;
}
.stamp_btn{
  width: 82px; height: 70px;
  margin: 10px;
  background-image: url(../img/stamp/brush_small.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70px 70px;
}
.stamp_btn.stampSize_s{background-image: url(../img/stamp/brush_small.png);}
.stamp_btn.stampSize_n{background-image: url(../img/stamp/brush_normal.png);}
.stamp_btn.stampSize_b{background-image: url(../img/stamp/brush_big.png);}
#stamp_status{
  display: none;
  position: absolute;
  top: 986px; left: 1702px;
  pointer-events: none;
  width: 82px; height: 82px;
  background-image: url(../img/stamp/brush_small.png);
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: cover;
  z-index: 5;     
}
#stamp_status.small{ background-size:82px; }
#stamp_status.normal{ background-size:110px; }
#stamp_status.big{ background-size:145px; }