/*
    tablet writer
*/

.writer                             { margin:20px 0;padding:4px;height: 420px;border-radius:10px;position:relative;-box-shadow: 0px 0px 2px 1px rgba(100,100,100,1);background: linear-gradient(135deg, #999 0%,#777 100%);}
.writer > .inner                    { position:absolute; left:0; top:0; bottom:0; right:0;  }
.writer > .inner > .menu            { position:absolute; left:20px; top:20px; bottom:0px; width:60px; }
.writer > .inner > .menu > div      { border:2px solid transparent; width:60px; height:60px; margin-bottom:20px; border-radius:6px; background-color:#888;cursor:pointer; transition: all 0.3s; box-shadow: 5px 5px 20px 0px rgba(100,100,100,0.3);}
.writer > .inner > .menu > div.on   { border:2px solid #eee; background-color:#555; }
.writer > .inner > .menu > div > b  { background:url(images/sprite.png) no-repeat; height:60px; width:60px;display:inline-block;}
.writer > .inner > .menu > div.pen > b { background-position: 0 -100px;}
.writer > .inner > .menu > div.brush > b{ background-position: -60px -100px;}
.writer > .inner > .menu > div.eraser > b { background-position: -120px -100px;}
.writer > .inner > .menu > div.text > b { background-position: -180px -100px;}
.writer > .inner > .menu > div.save  { position:absolute; bottom:0; opacity:0.5; background:none !important;}
.writer > .inner > .menu > div.save > b { background-position: -0px -160px;}
.writer > .inner > .menu > div:hover{ background-color:#696969; }
.writer > .inner > .menu > div.save:hover { opacity:1;}
.writer > .inner > .colors            { position:absolute; right:20px; top:20px; bottom:20px; width:60px; }
.writer > .inner > .colors > div      { border:2px solid transparent; width:60px; height:60px; margin-bottom:20px; border-radius:6px; cursor:pointer; transition: all 0.3s; opacity:0.5;}
.writer > .inner > .colors > div.on   { opacity:1; border:2px solid #eee;}
.writer > .inner > .colors > div:hover{ opacity:1; }
.writer > .inner > .space           { position:absolute; left:100px; top:20px; bottom:20px; right:100px; border-radius:6px; padding:5px; background-color:#efefef;  box-shadow: inset 0px 0px 10px 0px rgba(100,100,100,0.3);}
.writer > .inner > .space > .place  { touch-action: none;}
.writer > .inner > .space > .ti     { border:2px dashed #666; position:absolute; border-radius:5px;  background-color:rgba(250,250,250,0.5); overflow:hidden; width:100%; height:100%;border:0; resize:none; left:0; top:0; font-size:25px; }
.writer[tool=pen] > .inner > .space > .place  { cursor:crosshair;}
.writer[tool=brush] > .inner > .space > .place  { cursor:crosshair;}
.writer[tool=eraser] > .inner > .space > .place  { cursor:url(/Content/cursor/eraser.png), url(/Content/cursor/eraser.cur), crosshair;}
.writer[tool=text] > .inner > .space > .place  {  cursor:url(/Content/cursor/text.png), text;}

.chatter                { background-color:#f6f6f9; margin:10px 0;  }
.chatter > .input           { padding:20px 90px 20px 20px; position:relative; }
.chatter > .input > input   { padding:10px; font-size:16px; border:0; width:100%;}
.chatter > .input > .send   {position:absolute;top:20px;right:20px;cursor:  pointer;height:40px;width:46px;background:url(images/sprite.png) -290px 0;}
.chatter > .messages            {padding:20px;min-height:50px;max-height:300px;overflow-y:  auto;}
.chatter > .messages > .none    { padding:10px; color:#999; background-color:#fff; border-radius:20px; display:inline-block;}
.chatter > .messages .mes       { margin:10px 0; }
.chatter > .messages .mes > .m  { background-color:#fff; border-radius:10px; display:inline-block; padding:10px;position:relative;}
.chatter > .messages .mes > .m > .t { font-size:10px; color:#999; }
.chatter > .messages .mes > .m > .b { text-align:left;}
.chatter > .messages .mes > .m > .s { }
.chatter > .messages .mes.sending > .m > .s {display:inline-block; position:absolute; left:5px; top:5px; width:13px; height:13px; background:url(images/sprite.png) -360px 0;}
.chatter > .messages .mes.me    { text-align:right; margin-left:100px;}
.chatter > .messages .mes.alien { text-align:left; margin-right:100px;}