﻿



.menu
{
    position:absolute;
    display:none;
    width:150px;
    background: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
    background: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
    background: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
    background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
    background: linear-gradient(top, #f5f5f5, #f1f1f1);
    border: 1px solid #dcdcdc;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    z-index:2;
}

.menu>div
{
    
    padding:10px;   
    cursor:pointer;
    font-size:13px;
}

.menu > div.selected
{
    background-color: #FFCCCC;
}


.menu>div:hover
{
    background-color:#ccc;   
   
}









.tooth
{
 position: relative; 
 width:400px;
 height:670px;
 user-select:none;
}

.tooth>.selectable ,.tooth>.selectable_before
{
    cursor:pointer;
    text-align:center;
    vertical-align:middle;
}

.tooth>.selectable.selected , .tooth>.selectable_before.selected
{
    background-color:#ff0000;
    color:#ffffff;
   /* text-shadow:1px 1px 1px rgba(0,0,0,1);*/
   text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
    
}


.tooth > .selectable:hover ,.tooth > .selectable.hover , .tooth > .selectable_before:hover ,.tooth > .selectable_before.hover
{
    background-color: #FFFF00;
     color:#000;
     text-shadow:none;
}

.tooth>div
{
 position: absolute;   
 display:block;
 background-repeat:no-repeat;
 user-select:none;
}


.tooth>.t5A
{
    top:0px;
    left:200px;
    background-image:url("/Content/tooth/5A.png");
    width:50px;
    height:51px;
    line-height:51px;
    z-index:1;
}

.tooth>.t5B
{
    top:20px;
    left:250px;
    background-image:url("/Content/tooth/5B.png");
    width:45px;
    height:48px;
    line-height:48px;
}

.tooth>.t5C
{
    top:60px;
    left:280px;
    background-image:url("/Content/tooth/5C.png");
    width:45px;
    height:46px;
    line-height:46px;
}

.tooth>.t5D
{
    top:105px;
    left:295px;
    background-image:url("/Content/tooth/5D.png");
    width:60px;
    height:57px;
    line-height:57px;
}


.tooth>.t5E
{
    top:160px;
    left:305px;
    background-image:url("/Content/tooth/5E.png");
    width:62px;
    height:59px;
    line-height:59px;
}

.tooth>.t56
{
    top:220px;
    left:305px;
    background-image:url("/Content/tooth/56.png");
    width:90px;
    height:86px;
    line-height:86px;
    background-color:#ccc;
}


    .tooth > .t66 {
        top: 235px;
        left: 15px;
        background-image: url("/Content/tooth/66.png");
        width: 80px;
        height: 75px;
        line-height: 75px;
        background-color: #ccc;
    }



.tooth>.t6E
{
    top:170px;
    left:25px;
    background-image:url("/Content/tooth/6E.png");
    width:71px;
    height:63px;
    line-height:63px;
}



.tooth>.t6D
{
    top:115px;
    left:40px;
    background-image:url("/Content/tooth/6D.png");
    width:64px;
    height:61px;
    line-height:61px;
}

.tooth>.t6C
{
    top:67px;
    left:68px;
    background-image:url("/Content/tooth/6C.png");
    width:54px;
    height:50px;
    line-height:50px;
}



.tooth>.t6B
{
    top:28px;
    left:108px;
    background-image:url("/Content/tooth/6B.png");
    width:41px;
    height:45px;
    line-height:45px;
}

.tooth>.t6A
{
    top:5px;
    left:150px;
    background-image:url("/Content/tooth/6A.png");
    width:48px;
    height:41px;
    line-height:41px;
}



    .tooth > .t76 {
        top: 325px;
        left: 15px;
        background-image: url("/Content/tooth/76.png");
        width: 83px;
        height: 92px;
        line-height: 92px;
        background-color: #ccc;
    }

.tooth>.t7E
{
    top:420px;
    left:35px;
    background-image:url("/Content/tooth/7E.png");
    width:65px;
    height:69px;
    line-height:69px;
}

.tooth>.t7D
{
    top:490px;
    left:65px;
    background-image:url("/Content/tooth/7D.png");
    width:55px;
    height:63px;
    line-height:63px;
}


.tooth>.t7D
{
    top:490px;
    left:63px;
    background-image:url("/Content/tooth/7D.png");
    width:55px;
    height:63px;
    line-height:63px;
}


.tooth>.t7C
{
    top:550px;
    left:90px;
    background-image:url("/Content/tooth/7C.png");
    width:40px;
    height:41px;
    line-height:41px;
}


.tooth>.vertical
{
    width:1px;
    height:100%;
    top:0px;
    left:198px;
    background-color:#DDD;   
    
}

.tooth>.horizontal
{
     height:1px;
    width:100%;
    top:315px;
    left:0px;
    background-color:#DDD;   
}

.tooth>.p5
{
     top:265px;
    left:210px;
    color:#DDD;
    font-size:60px;
}
.tooth>.p6
{
     top:265px;
    left:150px;
    color:#DDD;
    font-size:60px;
}

.tooth>.p7
{
     top:335px;
    left:150px;
    color:#DDD;
    font-size:60px;
}
.tooth>.p8
{
     top:335px;
    left:210px;
    color:#DDD;
    font-size:60px;
}


.tooth>.t7B
{
    top:590px;
    left:120px;
    background-image:url("/Content/tooth/7B.png");
    width:37px;
    height:38px;
    line-height:38px;
}

.tooth>.t7A
{
    top:610px;
    left:165px;
    background-image:url("/Content/tooth/7A.png");
    width:31px;
    height:34px;
    line-height:34px;
    z-index:1;
}


.tooth>.t8A
{
    top:608px;
    left:200px;
    background-image:url("/Content/tooth/8A.png");
    width:33px;
    height:36px;
    line-height:36px;
}

.tooth>.t8B
{
    top:592px;
    left:240px;
    background-image:url("/Content/tooth/8B.png");
    width:34px;
    height:35px;
    line-height:35px;
}

.tooth>.t8C
{
    top:550px;
    left:260px;
    background-image:url("/Content/tooth/8C.png");
    width:45px;
    height:45px;
    line-height:45px;
}

.tooth>.t8D
{
    top:486px;
    left:280px;
    background-image:url("/Content/tooth/8D.png");
    width:54px;
    height:64px;
    line-height:64px;
}

.tooth>.t8E
{
    top:408px;
    left:300px;
    background-image:url("/Content/tooth/8E.png");
    width:65px;
    height:77px;
    line-height:77px;
}

    .tooth > .t86 {
        top: 325px;
        left: 318px;
        background-image: url("/Content/tooth/86.png");
        width: 73px;
        height: 82px;
        line-height: 82px;
        background-color: #ccc;
    }













