/* common elemens */
@import url("reset.css");

#pattern, #pattern-events, #pattern-strokes {
    position:absolute;    
    top:0px;
    left:0px;
    height:100%;
    width:100%;
}

#pattern {
    z-index:1;
    position:absolute;
}

#pattern-strokes {
    z-index:5;
    position:absolute;
}
#pattern-events {
    z-index:20;
    position:absolute;
}
#pattern-highlight {
    z-index:10;
    position:absolute;
}

#pattern ul li, #pattern-highlight ul li {
    float:left;
    width:101px;
    height:101px;
    
    position:relative;
}

#pattern-events ul li {
    -moz-user-select: none;
    -webkit-user-select: none;
    
    float:left;
    margin:30px;
    width:41px;
    height:41px;
    
    position:relative;
}

#pattern ul li {
    background:transparent url('./AndroidLogin_Round Background.png') no-repeat top left;
}

#pattern-highlight ul li div.selected {
    height:100%;
    width:100%;
    color:blue;
    background:transparent url('./AndroidLogin_RoundHighlighted.png') no-repeat top left;
}

#pattern-strokes div {
    display:none;
    position:absolute;
    height:202px;
    width:202px;
}

#D1-2, #D2-1, #D2-3, #D3-2, #D4-5, #D5-4, #D5-6, #D6-5, #D7-8, #D8-7, #D8-9, #D9-8 {
    background:transparent url('./AndroidLogin_Horizontal.png') no-repeat top left;
}
#D1-4, #D4-1, #D2-5, #D5-2, #D3-6, #D6-3, #D4-7, #D7-4, #D5-8, #D8-5, #D6-9, #D9-6 {
    background:transparent url('./AndroidLogin_Vertical.png') no-repeat top left;    
}
#D1-5, #D5-1, #D2-6, #D6-2, #D4-8, #D8-4, #D5-9, #D9-5 {
    background:transparent url('./AndroidLogin_TopBottom.png') no-repeat top left;
}
#D4-2, #D2-4, #D3-5, #D5-3, #D7-5, #D5-7, #D6-8, #D8-6 {
    background:transparent url('./AndroidLogin_BottomTop.png') no-repeat top left;
}

#D1-2, #D1-5, #D1-4, #D2-1, #D5-1, #D4-1, #D2-4, #D4-2 {
    top:0px; left:0px;
}
#D2-3, #D3-2, #D2-5, #D5-2, #D2-6, #D6-2, #D3-5, #D5-3 {
    top:0px; left:101px;
}
#D4-7, #D7-4, #D4-5, #D5-4, #D4-8, #D8-4, #D5-7, #D7-5 {
    top:101px; left:0px;
}
#D5-6, #D6-5, #D5-8, #D8-5, #D5-9, #D9-5, #D6-8, #D8-6 {
    top:101px; left:101px;
}
#D3-6, #D6-3 {
    top:0px; left:202px;
}
#D9-6, #D6-9 {
    top:101px; left:202px;
}
#D7-8, #D8-7 {
    top:202px; left:0px;
}
#D9-8, #D8-9 {
    top:202px; left:101px;
}

