.exercise { height:auto; margin:0 0 100px; border:1px solid #ccc; background: #ffe266; }

.set-level { width:99px; height:60px; background-image:url(../images/a3/icon_uroven1_2x.png); background-repeat:no-repeat; background-position: center center; background-size:99px 60px; }
.set-level#s2 { background-image:url(../images/a3/icon_uroven2_2x.png); }
.set-level#s3 { background-image:url(../images/a3/icon_uroven3_2x.png); }
.set-level#s6 { background-image:url(../images/a3/icon_uroven4_2x.png); }
.set-level a { display:block; float:left; width:25%; height:100%; }

.modification-box a { display:block; width:48px; height:60px; float:left; margin:0 5px 5px 0; background-repeat:no-repeat; background-position:center center; background-size:48px 60px; }
.modification-box .sm1 { background-image:url('../images/a9/icon_vertikalne-pasivna_2x.png'); }
.modification-box .sm1.is-active { background-image:url('../images/a9/icon_vertikalne-aktivna_2x.png'); }
.modification-box .sm2 { background-image:url('../images/a9/icon_horizontalne-pasivna_2x.png'); }
.modification-box .sm2.is-active { background-image:url('../images/a9/icon_horizontalne-aktivna_2x.png'); }

.graphics-box a { display:block; width:48px; height:60px; float:left; margin:0 5px 5px 0; background-repeat:no-repeat; background-position:center center; background-size:48px 60px; }
.graphics-box .sm1 { background-image:url('../images/a9/predloha1-pasivna_2x.png'); }
.graphics-box .sm1.is-active { background-image:url('../images/a9/predloha1-aktivna_2x.png'); }
.graphics-box .sm2 { background-image:url('../images/a9/predloha2-pasivna_2x.png'); }
.graphics-box .sm2.is-active { background-image:url('../images/a9/predloha2-aktivna_2x.png'); }
.graphics-box .sm3 { background-image:url('../images/a9/predloha3-pasivna_2x.png'); }
.graphics-box .sm3.is-active { background-image:url('../images/a9/predloha3-aktivna_2x.png'); }
.graphics-box .sm4 { background-image:url('../images/a9/predloha4-pasivna_2x.png'); }
.graphics-box .sm4.is-active { background-image:url('../images/a9/predloha4-aktivna_2x.png'); }

.reset-box a { display:block; width:50px; height:50px; float:left; margin:0 5px 5px 0; background-repeat:no-repeat; background-position:center center; background-size:50px 50px; }
.reset-box .set-reset { background-image:url('../images/a9/Kos-prazdny_2x.png'); }
.reset-box .set-reset:hover { background-image:url('../images/a9/Kos-prazdny_2x.png'); }
.reset-box .set-reset.disabled:hover { background-image:url('../images/a9/Kos-prazdny_2x.png'); cursor:default; }

.generate-task-form .grid-2 { padding-left:0; }

.init-task { position:relative; left:-5px; margin-top:15px; }

.task-box { height:100%; padding:15px; background:#d3d2d0; }

#pattern { position:relative; width:200px; height:200px; float:left; margin-left:5px; background-repeat:no-repeat; background-position:center center; background-size:200px 200px; }
#pattern[data-orientation="vertical"] { top:10px; }
#pattern[data-level="t3"] { height:300px; background-size:200px 300px; }
#pattern[data-level="t3"][data-orientation="horizontal"] { width:300px; height:200px; background-size:300px 200px; }
#pattern[data-level="t6"] { width:400px; height:300px; background-size:400px 300px; }
#pattern[data-level="t6"][data-orientation="horizontal"] { width:300px; height:400px; background-size:300px 400px; }
[data-graphics="p1"] #pattern.a1v { background-image:url("../images/a9/p1/patterns/a1v.png"); }
[data-graphics="p1"] #pattern.a2v { background-image:url("../images/a9/p1/patterns/a2v.png"); }
[data-graphics="p1"] #pattern.a3v { background-image:url("../images/a9/p1/patterns/a3v.png"); }
[data-graphics="p1"] #pattern.a4v { background-image:url("../images/a9/p1/patterns/a4v.png"); }
[data-graphics="p1"] #pattern.a5v { background-image:url("../images/a9/p1/patterns/a5v.png"); }
[data-graphics="p1"] #pattern.a6v { background-image:url("../images/a9/p1/patterns/a6v.png"); }
[data-graphics="p1"] #pattern.a7v { background-image:url("../images/a9/p1/patterns/a7v.png"); }
[data-graphics="p1"] #pattern.a8v { background-image:url("../images/a9/p1/patterns/a8v.png"); }
[data-graphics="p1"] #pattern.a9v { background-image:url("../images/a9/p1/patterns/a9v.png"); }
[data-graphics="p1"] #pattern.a10v { background-image:url("../images/a9/p1/patterns/a10v.png"); }
                                                                                                                                 
[data-graphics="p1"] #pattern.a1h { background-image:url("../images/a9/p1/patterns/a1h.png"); }
[data-graphics="p1"] #pattern.a2h { background-image:url("../images/a9/p1/patterns/a2h.png"); }
[data-graphics="p1"] #pattern.a3h { background-image:url("../images/a9/p1/patterns/a3h.png"); }
[data-graphics="p1"] #pattern.a4h { background-image:url("../images/a9/p1/patterns/a4h.png"); }
[data-graphics="p1"] #pattern.a5h { background-image:url("../images/a9/p1/patterns/a5h.png"); }
[data-graphics="p1"] #pattern.a6h { background-image:url("../images/a9/p1/patterns/a6h.png"); }
[data-graphics="p1"] #pattern.a7h { background-image:url("../images/a9/p1/patterns/a7h.png"); }
[data-graphics="p1"] #pattern.a8h { background-image:url("../images/a9/p1/patterns/a8h.png"); }
[data-graphics="p1"] #pattern.a9h { background-image:url("../images/a9/p1/patterns/a9h.png"); }
[data-graphics="p1"] #pattern.a10h { background-image:url("../images/a9/p1/patterns/a10h.png"); }
                                                                                                                                 
[data-graphics="p1"] #pattern.b1v { background-image:url("../images/a9/p1/patterns/b1v.png"); }
[data-graphics="p1"] #pattern.b2v { background-image:url("../images/a9/p1/patterns/b2v.png"); }
[data-graphics="p1"] #pattern.b3v { background-image:url("../images/a9/p1/patterns/b3v.png"); }
[data-graphics="p1"] #pattern.b4v { background-image:url("../images/a9/p1/patterns/b4v.png"); }
[data-graphics="p1"] #pattern.b5v { background-image:url("../images/a9/p1/patterns/b5v.png"); }
[data-graphics="p1"] #pattern.b6v { background-image:url("../images/a9/p1/patterns/b6v.png"); }
[data-graphics="p1"] #pattern.b7v { background-image:url("../images/a9/p1/patterns/b7v.png"); }
[data-graphics="p1"] #pattern.b8v { background-image:url("../images/a9/p1/patterns/b8v.png"); }
[data-graphics="p1"] #pattern.b9v { background-image:url("../images/a9/p1/patterns/b9v.png"); }
[data-graphics="p1"] #pattern.b10v { background-image:url("../images/a9/p1/patterns/b10v.png"); }
                                                                                                                                 
[data-graphics="p1"] #pattern.b1h { background-image:url("../images/a9/p1/patterns/b1h.png"); }
[data-graphics="p1"] #pattern.b2h { background-image:url("../images/a9/p1/patterns/b2h.png"); }
[data-graphics="p1"] #pattern.b3h { background-image:url("../images/a9/p1/patterns/b3h.png"); }
[data-graphics="p1"] #pattern.b4h { background-image:url("../images/a9/p1/patterns/b4h.png"); }
[data-graphics="p1"] #pattern.b5h { background-image:url("../images/a9/p1/patterns/b5h.png"); }
[data-graphics="p1"] #pattern.b6h { background-image:url("../images/a9/p1/patterns/b6h.png"); }
[data-graphics="p1"] #pattern.b7h { background-image:url("../images/a9/p1/patterns/b7h.png"); }
[data-graphics="p1"] #pattern.b8h { background-image:url("../images/a9/p1/patterns/b8h.png"); }
[data-graphics="p1"] #pattern.b9h { background-image:url("../images/a9/p1/patterns/b9h.png"); }
[data-graphics="p1"] #pattern.b10h { background-image:url("../images/a9/p1/patterns/b10h.png"); }
                                                                                                                                 
[data-graphics="p1"] #pattern.c1v { background-image:url("../images/a9/p1/patterns/c1v.png"); }
[data-graphics="p1"] #pattern.c2v { background-image:url("../images/a9/p1/patterns/c2v.png"); }
[data-graphics="p1"] #pattern.c3v { background-image:url("../images/a9/p1/patterns/c3v.png"); }
[data-graphics="p1"] #pattern.c4v { background-image:url("../images/a9/p1/patterns/c4v.png"); }
[data-graphics="p1"] #pattern.c5v { background-image:url("../images/a9/p1/patterns/c5v.png"); }
[data-graphics="p1"] #pattern.c6v { background-image:url("../images/a9/p1/patterns/c6v.png"); }
[data-graphics="p1"] #pattern.c7v { background-image:url("../images/a9/p1/patterns/c7v.png"); }
[data-graphics="p1"] #pattern.c8v { background-image:url("../images/a9/p1/patterns/c8v.png"); }
[data-graphics="p1"] #pattern.c9v { background-image:url("../images/a9/p1/patterns/c9v.png"); }
[data-graphics="p1"] #pattern.c10v { background-image:url("../images/a9/p1/patterns/c10v.png"); }
                                                                                                                                 
[data-graphics="p1"] #pattern.c1h { background-image:url("../images/a9/p1/patterns/c1h.png"); }
[data-graphics="p1"] #pattern.c2h { background-image:url("../images/a9/p1/patterns/c2h.png"); }
[data-graphics="p1"] #pattern.c3h { background-image:url("../images/a9/p1/patterns/c3h.png"); }
[data-graphics="p1"] #pattern.c4h { background-image:url("../images/a9/p1/patterns/c4h.png"); }
[data-graphics="p1"] #pattern.c5h { background-image:url("../images/a9/p1/patterns/c5h.png"); }
[data-graphics="p1"] #pattern.c6h { background-image:url("../images/a9/p1/patterns/c6h.png"); }
[data-graphics="p1"] #pattern.c7h { background-image:url("../images/a9/p1/patterns/c7h.png"); }
[data-graphics="p1"] #pattern.c8h { background-image:url("../images/a9/p1/patterns/c8h.png"); }
[data-graphics="p1"] #pattern.c9h { background-image:url("../images/a9/p1/patterns/c9h.png"); }
[data-graphics="p1"] #pattern.c10h { background-image:url("../images/a9/p1/patterns/c10h.png"); }

[data-graphics="p2"] #pattern.a1v { background-image:url("../images/a9/p2/patterns/a1v.png"); }
[data-graphics="p2"] #pattern.a2v { background-image:url("../images/a9/p2/patterns/a2v.png"); }
[data-graphics="p2"] #pattern.a3v { background-image:url("../images/a9/p2/patterns/a3v.png"); }
[data-graphics="p2"] #pattern.a4v { background-image:url("../images/a9/p2/patterns/a4v.png"); }
[data-graphics="p2"] #pattern.a5v { background-image:url("../images/a9/p2/patterns/a5v.png"); }
[data-graphics="p2"] #pattern.a6v { background-image:url("../images/a9/p2/patterns/a6v.png"); }
[data-graphics="p2"] #pattern.a7v { background-image:url("../images/a9/p2/patterns/a7v.png"); }
[data-graphics="p2"] #pattern.a8v { background-image:url("../images/a9/p2/patterns/a8v.png"); }
[data-graphics="p2"] #pattern.a9v { background-image:url("../images/a9/p2/patterns/a9v.png"); }
[data-graphics="p2"] #pattern.a10v { background-image:url("../images/a9/p2/patterns/a10v.png"); }
                                                                                                                               
[data-graphics="p2"] #pattern.a1h { background-image:url("../images/a9/p2/patterns/a1h.png"); }
[data-graphics="p2"] #pattern.a2h { background-image:url("../images/a9/p2/patterns/a2h.png"); }
[data-graphics="p2"] #pattern.a3h { background-image:url("../images/a9/p2/patterns/a3h.png"); }
[data-graphics="p2"] #pattern.a4h { background-image:url("../images/a9/p2/patterns/a4h.png"); }
[data-graphics="p2"] #pattern.a5h { background-image:url("../images/a9/p2/patterns/a5h.png"); }
[data-graphics="p2"] #pattern.a6h { background-image:url("../images/a9/p2/patterns/a6h.png"); }
[data-graphics="p2"] #pattern.a7h { background-image:url("../images/a9/p2/patterns/a7h.png"); }
[data-graphics="p2"] #pattern.a8h { background-image:url("../images/a9/p2/patterns/a8h.png"); }
[data-graphics="p2"] #pattern.a9h { background-image:url("../images/a9/p2/patterns/a9h.png"); }
[data-graphics="p2"] #pattern.a10h { background-image:url("../images/a9/p2/patterns/a10h.png"); }

[data-graphics="p2"] #pattern.b1v { background-image:url("../images/a9/p2/patterns/b1v.png"); }
[data-graphics="p2"] #pattern.b2v { background-image:url("../images/a9/p2/patterns/b2v.png"); }
[data-graphics="p2"] #pattern.b3v { background-image:url("../images/a9/p2/patterns/b3v.png"); }
[data-graphics="p2"] #pattern.b4v { background-image:url("../images/a9/p2/patterns/b4v.png"); }
[data-graphics="p2"] #pattern.b5v { background-image:url("../images/a9/p2/patterns/b5v.png"); }
[data-graphics="p2"] #pattern.b6v { background-image:url("../images/a9/p2/patterns/b6v.png"); }
[data-graphics="p2"] #pattern.b7v { background-image:url("../images/a9/p2/patterns/b7v.png"); }
[data-graphics="p2"] #pattern.b8v { background-image:url("../images/a9/p2/patterns/b8v.png"); }
[data-graphics="p2"] #pattern.b9v { background-image:url("../images/a9/p2/patterns/b9v.png"); }
[data-graphics="p2"] #pattern.b10v { background-image:url("../images/a9/p2/patterns/b10v.png"); }
                                                                                                                               
[data-graphics="p2"] #pattern.b1h { background-image:url("../images/a9/p2/patterns/b1h.png"); }
[data-graphics="p2"] #pattern.b2h { background-image:url("../images/a9/p2/patterns/b2h.png"); }
[data-graphics="p2"] #pattern.b3h { background-image:url("../images/a9/p2/patterns/b3h.png"); }
[data-graphics="p2"] #pattern.b4h { background-image:url("../images/a9/p2/patterns/b4h.png"); }
[data-graphics="p2"] #pattern.b5h { background-image:url("../images/a9/p2/patterns/b5h.png"); }
[data-graphics="p2"] #pattern.b6h { background-image:url("../images/a9/p2/patterns/b6h.png"); }
[data-graphics="p2"] #pattern.b7h { background-image:url("../images/a9/p2/patterns/b7h.png"); }
[data-graphics="p2"] #pattern.b8h { background-image:url("../images/a9/p2/patterns/b8h.png"); }
[data-graphics="p2"] #pattern.b9h { background-image:url("../images/a9/p2/patterns/b9h.png"); }
[data-graphics="p2"] #pattern.b10h { background-image:url("../images/a9/p2/patterns/b10h.png"); }

[data-graphics="p2"] #pattern.c1v { background-image:url("../images/a9/p2/patterns/c1v.png"); }
[data-graphics="p2"] #pattern.c2v { background-image:url("../images/a9/p2/patterns/c2v.png"); }
[data-graphics="p2"] #pattern.c3v { background-image:url("../images/a9/p2/patterns/c3v.png"); }
[data-graphics="p2"] #pattern.c4v { background-image:url("../images/a9/p2/patterns/c4v.png"); }
[data-graphics="p2"] #pattern.c5v { background-image:url("../images/a9/p2/patterns/c5v.png"); }
[data-graphics="p2"] #pattern.c6v { background-image:url("../images/a9/p2/patterns/c6v.png"); }
[data-graphics="p2"] #pattern.c7v { background-image:url("../images/a9/p2/patterns/c7v.png"); }
[data-graphics="p2"] #pattern.c8v { background-image:url("../images/a9/p2/patterns/c8v.png"); }
                                                                                                                                 
[data-graphics="p2"] #pattern.c1h { background-image:url("../images/a9/p2/patterns/c1h.png"); }
[data-graphics="p2"] #pattern.c2h { background-image:url("../images/a9/p2/patterns/c2h.png"); }
[data-graphics="p2"] #pattern.c3h { background-image:url("../images/a9/p2/patterns/c3h.png"); }
[data-graphics="p2"] #pattern.c4h { background-image:url("../images/a9/p2/patterns/c4h.png"); }
[data-graphics="p2"] #pattern.c5h { background-image:url("../images/a9/p2/patterns/c5h.png"); }
[data-graphics="p2"] #pattern.c6h { background-image:url("../images/a9/p2/patterns/c6h.png"); }
[data-graphics="p2"] #pattern.c7h { background-image:url("../images/a9/p2/patterns/c7h.png"); }
[data-graphics="p2"] #pattern.c8h { background-image:url("../images/a9/p2/patterns/c8h.png"); }

[data-graphics="p3"] #pattern.a1v { background-image:url("../images/a9/p3/patterns/a1v.png"); }
[data-graphics="p3"] #pattern.a2v { background-image:url("../images/a9/p3/patterns/a2v.png"); }
[data-graphics="p3"] #pattern.a3v { background-image:url("../images/a9/p3/patterns/a3v.png"); }
[data-graphics="p3"] #pattern.a4v { background-image:url("../images/a9/p3/patterns/a4v.png"); }
[data-graphics="p3"] #pattern.a5v { background-image:url("../images/a9/p3/patterns/a5v.png"); }
[data-graphics="p3"] #pattern.a6v { background-image:url("../images/a9/p3/patterns/a6v.png"); }
[data-graphics="p3"] #pattern.a7v { background-image:url("../images/a9/p3/patterns/a7v.png"); }
[data-graphics="p3"] #pattern.a8v { background-image:url("../images/a9/p3/patterns/a8v.png"); }
[data-graphics="p3"] #pattern.a9v { background-image:url("../images/a9/p3/patterns/a9v.png"); }
[data-graphics="p3"] #pattern.a10v { background-image:url("../images/a9/p3/patterns/a10v.png"); }
                                                                                                                               
[data-graphics="p3"] #pattern.a1h { background-image:url("../images/a9/p3/patterns/a1h.png"); }
[data-graphics="p3"] #pattern.a2h { background-image:url("../images/a9/p3/patterns/a2h.png"); }
[data-graphics="p3"] #pattern.a3h { background-image:url("../images/a9/p3/patterns/a3h.png"); }
[data-graphics="p3"] #pattern.a4h { background-image:url("../images/a9/p3/patterns/a4h.png"); }
[data-graphics="p3"] #pattern.a5h { background-image:url("../images/a9/p3/patterns/a5h.png"); }
[data-graphics="p3"] #pattern.a6h { background-image:url("../images/a9/p3/patterns/a6h.png"); }
[data-graphics="p3"] #pattern.a7h { background-image:url("../images/a9/p3/patterns/a7h.png"); }
[data-graphics="p3"] #pattern.a8h { background-image:url("../images/a9/p3/patterns/a8h.png"); }
[data-graphics="p3"] #pattern.a9h { background-image:url("../images/a9/p3/patterns/a9h.png"); }
[data-graphics="p3"] #pattern.a10h { background-image:url("../images/a9/p3/patterns/a10h.png"); }

[data-graphics="p3"] #pattern.b1v { background-image:url("../images/a9/p3/patterns/b1v.png"); }
[data-graphics="p3"] #pattern.b2v { background-image:url("../images/a9/p3/patterns/b2v.png"); }
[data-graphics="p3"] #pattern.b3v { background-image:url("../images/a9/p3/patterns/b3v.png"); }
[data-graphics="p3"] #pattern.b4v { background-image:url("../images/a9/p3/patterns/b4v.png"); }
[data-graphics="p3"] #pattern.b5v { background-image:url("../images/a9/p3/patterns/b5v.png"); }
[data-graphics="p3"] #pattern.b6v { background-image:url("../images/a9/p3/patterns/b6v.png"); }
[data-graphics="p3"] #pattern.b7v { background-image:url("../images/a9/p3/patterns/b7v.png"); }
[data-graphics="p3"] #pattern.b8v { background-image:url("../images/a9/p3/patterns/b8v.png"); }
[data-graphics="p3"] #pattern.b9v { background-image:url("../images/a9/p3/patterns/b9v.png"); }
[data-graphics="p3"] #pattern.b10v { background-image:url("../images/a9/p3/patterns/b10v.png"); }
                                                                                                                               
[data-graphics="p3"] #pattern.b1h { background-image:url("../images/a9/p3/patterns/b1h.png"); }
[data-graphics="p3"] #pattern.b2h { background-image:url("../images/a9/p3/patterns/b2h.png"); }
[data-graphics="p3"] #pattern.b3h { background-image:url("../images/a9/p3/patterns/b3h.png"); }
[data-graphics="p3"] #pattern.b4h { background-image:url("../images/a9/p3/patterns/b4h.png"); }
[data-graphics="p3"] #pattern.b5h { background-image:url("../images/a9/p3/patterns/b5h.png"); }
[data-graphics="p3"] #pattern.b6h { background-image:url("../images/a9/p3/patterns/b6h.png"); }
[data-graphics="p3"] #pattern.b7h { background-image:url("../images/a9/p3/patterns/b7h.png"); }
[data-graphics="p3"] #pattern.b8h { background-image:url("../images/a9/p3/patterns/b8h.png"); }
[data-graphics="p3"] #pattern.b9h { background-image:url("../images/a9/p3/patterns/b9h.png"); }
[data-graphics="p3"] #pattern.b10h { background-image:url("../images/a9/p3/patterns/b10h.png"); }

[data-graphics="p3"] #pattern.c1v { background-image:url("../images/a9/p3/patterns/c1v.png"); }
[data-graphics="p3"] #pattern.c2v { background-image:url("../images/a9/p3/patterns/c2v.png"); }
[data-graphics="p3"] #pattern.c3v { background-image:url("../images/a9/p3/patterns/c3v.png"); }
[data-graphics="p3"] #pattern.c4v { background-image:url("../images/a9/p3/patterns/c4v.png"); }
[data-graphics="p3"] #pattern.c5v { background-image:url("../images/a9/p3/patterns/c5v.png"); }
[data-graphics="p3"] #pattern.c6v { background-image:url("../images/a9/p3/patterns/c6v.png"); }
[data-graphics="p3"] #pattern.c7v { background-image:url("../images/a9/p3/patterns/c7v.png"); }
[data-graphics="p3"] #pattern.c8v { background-image:url("../images/a9/p3/patterns/c8v.png"); }
[data-graphics="p3"] #pattern.c9v { background-image:url("../images/a9/p3/patterns/c9v.png"); }
[data-graphics="p3"] #pattern.c10v { background-image:url("../images/a9/p3/patterns/c10v.png"); }
                                                                                                                                 
[data-graphics="p3"] #pattern.c1h { background-image:url("../images/a9/p3/patterns/c1h.png"); }
[data-graphics="p3"] #pattern.c2h { background-image:url("../images/a9/p3/patterns/c2h.png"); }
[data-graphics="p3"] #pattern.c3h { background-image:url("../images/a9/p3/patterns/c3h.png"); }
[data-graphics="p3"] #pattern.c4h { background-image:url("../images/a9/p3/patterns/c4h.png"); }
[data-graphics="p3"] #pattern.c5h { background-image:url("../images/a9/p3/patterns/c5h.png"); }
[data-graphics="p3"] #pattern.c6h { background-image:url("../images/a9/p3/patterns/c6h.png"); }
[data-graphics="p3"] #pattern.c7h { background-image:url("../images/a9/p3/patterns/c7h.png"); }
[data-graphics="p3"] #pattern.c8h { background-image:url("../images/a9/p3/patterns/c8h.png"); }
[data-graphics="p3"] #pattern.c9h { background-image:url("../images/a9/p3/patterns/c9h.png"); }
[data-graphics="p3"] #pattern.c10h { background-image:url("../images/a9/p3/patterns/c10h.png"); }

[data-graphics="p4"] #pattern.a1v { background-image:url("../images/a9/p4/patterns/a1v.png"); }
[data-graphics="p4"] #pattern.a2v { background-image:url("../images/a9/p4/patterns/a2v.png"); }
[data-graphics="p4"] #pattern.a3v { background-image:url("../images/a9/p4/patterns/a3v.png"); }
[data-graphics="p4"] #pattern.a4v { background-image:url("../images/a9/p4/patterns/a4v.png"); }
[data-graphics="p4"] #pattern.a5v { background-image:url("../images/a9/p4/patterns/a5v.png"); }
[data-graphics="p4"] #pattern.a6v { background-image:url("../images/a9/p4/patterns/a6v.png"); }
[data-graphics="p4"] #pattern.a7v { background-image:url("../images/a9/p4/patterns/a7v.png"); }
[data-graphics="p4"] #pattern.a8v { background-image:url("../images/a9/p4/patterns/a8v.png"); }
[data-graphics="p4"] #pattern.a9v { background-image:url("../images/a9/p4/patterns/a9v.png"); }
[data-graphics="p4"] #pattern.a10v { background-image:url("../images/a9/p4/patterns/a10v.png"); }
                                                                                                                               
[data-graphics="p4"] #pattern.a1h { background-image:url("../images/a9/p4/patterns/a1h.png"); }
[data-graphics="p4"] #pattern.a2h { background-image:url("../images/a9/p4/patterns/a2h.png"); }
[data-graphics="p4"] #pattern.a3h { background-image:url("../images/a9/p4/patterns/a3h.png"); }
[data-graphics="p4"] #pattern.a4h { background-image:url("../images/a9/p4/patterns/a4h.png"); }
[data-graphics="p4"] #pattern.a5h { background-image:url("../images/a9/p4/patterns/a5h.png"); }
[data-graphics="p4"] #pattern.a6h { background-image:url("../images/a9/p4/patterns/a6h.png"); }
[data-graphics="p4"] #pattern.a7h { background-image:url("../images/a9/p4/patterns/a7h.png"); }
[data-graphics="p4"] #pattern.a8h { background-image:url("../images/a9/p4/patterns/a8h.png"); }
[data-graphics="p4"] #pattern.a9h { background-image:url("../images/a9/p4/patterns/a9h.png"); }
[data-graphics="p4"] #pattern.a10h { background-image:url("../images/a9/p4/patterns/a10h.png"); }

[data-graphics="p4"] #pattern.b1v { background-image:url("../images/a9/p4/patterns/b1v.png"); }
[data-graphics="p4"] #pattern.b2v { background-image:url("../images/a9/p4/patterns/b2v.png"); }
[data-graphics="p4"] #pattern.b3v { background-image:url("../images/a9/p4/patterns/b3v.png"); }
[data-graphics="p4"] #pattern.b4v { background-image:url("../images/a9/p4/patterns/b4v.png"); }
[data-graphics="p4"] #pattern.b5v { background-image:url("../images/a9/p4/patterns/b5v.png"); }
[data-graphics="p4"] #pattern.b6v { background-image:url("../images/a9/p4/patterns/b6v.png"); }
[data-graphics="p4"] #pattern.b7v { background-image:url("../images/a9/p4/patterns/b7v.png"); }
[data-graphics="p4"] #pattern.b8v { background-image:url("../images/a9/p4/patterns/b8v.png"); }
[data-graphics="p4"] #pattern.b9v { background-image:url("../images/a9/p4/patterns/b9v.png"); }
[data-graphics="p4"] #pattern.b10v { background-image:url("../images/a9/p4/patterns/b10v.png"); }
                                                                                                                               
[data-graphics="p4"] #pattern.b1h { background-image:url("../images/a9/p4/patterns/b1h.png"); }
[data-graphics="p4"] #pattern.b2h { background-image:url("../images/a9/p4/patterns/b2h.png"); }
[data-graphics="p4"] #pattern.b3h { background-image:url("../images/a9/p4/patterns/b3h.png"); }
[data-graphics="p4"] #pattern.b4h { background-image:url("../images/a9/p4/patterns/b4h.png"); }
[data-graphics="p4"] #pattern.b5h { background-image:url("../images/a9/p4/patterns/b5h.png"); }
[data-graphics="p4"] #pattern.b6h { background-image:url("../images/a9/p4/patterns/b6h.png"); }
[data-graphics="p4"] #pattern.b7h { background-image:url("../images/a9/p4/patterns/b7h.png"); }
[data-graphics="p4"] #pattern.b8h { background-image:url("../images/a9/p4/patterns/b8h.png"); }
[data-graphics="p4"] #pattern.b9h { background-image:url("../images/a9/p4/patterns/b9h.png"); }
[data-graphics="p4"] #pattern.b10h { background-image:url("../images/a9/p4/patterns/b10h.png"); }

[data-graphics="p4"] #pattern.c1v { background-image:url("../images/a9/p4/patterns/c1v.png"); }
[data-graphics="p4"] #pattern.c2v { background-image:url("../images/a9/p4/patterns/c2v.png"); }
[data-graphics="p4"] #pattern.c3v { background-image:url("../images/a9/p4/patterns/c3v.png"); }
[data-graphics="p4"] #pattern.c4v { background-image:url("../images/a9/p4/patterns/c4v.png"); }
[data-graphics="p4"] #pattern.c5v { background-image:url("../images/a9/p4/patterns/c5v.png"); }
[data-graphics="p4"] #pattern.c6v { background-image:url("../images/a9/p4/patterns/c6v.png"); }
[data-graphics="p4"] #pattern.c7v { background-image:url("../images/a9/p4/patterns/c7v.png"); }
[data-graphics="p4"] #pattern.c8v { background-image:url("../images/a9/p4/patterns/c8v.png"); }
[data-graphics="p4"] #pattern.c9v { background-image:url("../images/a9/p4/patterns/c9v.png"); }
[data-graphics="p4"] #pattern.c10v { background-image:url("../images/a9/p4/patterns/c10v.png"); }
                                                                                                                                 
[data-graphics="p4"] #pattern.c1h { background-image:url("../images/a9/p4/patterns/c1h.png"); }
[data-graphics="p4"] #pattern.c2h { background-image:url("../images/a9/p4/patterns/c2h.png"); }
[data-graphics="p4"] #pattern.c3h { background-image:url("../images/a9/p4/patterns/c3h.png"); }
[data-graphics="p4"] #pattern.c4h { background-image:url("../images/a9/p4/patterns/c4h.png"); }
[data-graphics="p4"] #pattern.c5h { background-image:url("../images/a9/p4/patterns/c5h.png"); }
[data-graphics="p4"] #pattern.c6h { background-image:url("../images/a9/p4/patterns/c6h.png"); }
[data-graphics="p4"] #pattern.c7h { background-image:url("../images/a9/p4/patterns/c7h.png"); }
[data-graphics="p4"] #pattern.c8h { background-image:url("../images/a9/p4/patterns/c8h.png"); }
[data-graphics="p4"] #pattern.c9h { background-image:url("../images/a9/p4/patterns/c9h.png"); }
[data-graphics="p4"] #pattern.c10h { background-image:url("../images/a9/p4/patterns/c10h.png"); }

#target-box { float:right; margin-right:5px; }

.draggable-box { position:relative; display:inline-block; width:100px; height:100px; margin:5px; /*float:left;*/ }

.stack { position:relative; z-index:2; width:100%; margin:0 0 30px; clear:both; }
.stack-item { position:absolute; left:0; top:0; display:block; width:100px; height:100px; }
.stack-item:after { content:""; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:100px 100px; }
[data-graphics="p1"] .si1:after { background-image:url('../images/a9/p1/1.png'); }
[data-graphics="p1"] .si2:after { background-image:url('../images/a9/p1/2.png'); }
[data-graphics="p1"] .si3:after { background-image:url('../images/a9/p1/3.png'); }
[data-graphics="p1"] .si4:after { background-image:url('../images/a9/p1/4.png'); }
[data-graphics="p1"] .si5:after { background-image:url('../images/a9/p1/5.png'); }
[data-graphics="p1"] .si6:after { background-image:url('../images/a9/p1/6.png'); }
[data-graphics="p1"] .si7:after { background-image:url('../images/a9/p1/7.png'); }
[data-graphics="p1"] .si8:after { background-image:url('../images/a9/p1/8.png'); }

[data-graphics="p2"] .si1:after { background-image:url('../images/a9/p2/1.png'); }
[data-graphics="p2"] .si2:after { background-image:url('../images/a9/p2/2.png'); }
[data-graphics="p2"] .si3:after { background-image:url('../images/a9/p2/3.png'); }
[data-graphics="p2"] .si4:after { background-image:url('../images/a9/p2/4.png'); }
[data-graphics="p2"] .si5:after { background-image:url('../images/a9/p2/5.png'); }
[data-graphics="p2"] .si6:after { background-image:url('../images/a9/p2/6.png'); }
[data-graphics="p2"] .si7:after { background-image:url('../images/a9/p2/7.png'); }
[data-graphics="p2"] .si8:after { background-image:url('../images/a9/p2/8.png'); }

[data-graphics="p3"] .si1:after { background-image:url('../images/a9/p3/1.png'); }
[data-graphics="p3"] .si2:after { background-image:url('../images/a9/p3/2.png'); }
[data-graphics="p3"] .si3:after { background-image:url('../images/a9/p3/3.png'); }
[data-graphics="p3"] .si4:after { background-image:url('../images/a9/p3/4.png'); }
[data-graphics="p3"] .si5:after { background-image:url('../images/a9/p3/5.png'); }
[data-graphics="p3"] .si6:after { background-image:url('../images/a9/p3/6.png'); }
[data-graphics="p3"] .si7:after { background-image:url('../images/a9/p3/7.png'); }
[data-graphics="p3"] .si8:after { background-image:url('../images/a9/p3/8.png'); }

[data-graphics="p4"] .si1:after { background-image:url('../images/a9/p4/1.png'); }
[data-graphics="p4"] .si2:after { background-image:url('../images/a9/p4/2.png'); }
[data-graphics="p4"] .si3:after { background-image:url('../images/a9/p4/3.png'); }
[data-graphics="p4"] .si4:after { background-image:url('../images/a9/p4/4.png'); }
[data-graphics="p4"] .si5:after { background-image:url('../images/a9/p4/5.png'); }
[data-graphics="p4"] .si6:after { background-image:url('../images/a9/p4/6.png'); }
[data-graphics="p4"] .si7:after { background-image:url('../images/a9/p4/7.png'); }
[data-graphics="p4"] .si8:after { background-image:url('../images/a9/p4/8.png'); }

.draggable.healing { transition: all 0.3s; -moz-transition: all 0.3s; /* Firefox 4 */ -webkit-transition: all 0.3s; /* Safari and Chrome */ -o-transition: all 0.3s; /* Opera */  width:80px; height:80px; margin:10px 0 0 10px; box-shadow:0 0 10px rgba(0,0,0,0.5); }
.ui-draggable-dragging { z-index: 99; }

#target-box.vertical .fill-box, #target-box.vertical .mirror-box { float:left;  }
#target-box.t2.vertical .fill-box, #target-box.t3.vertical .fill-box, #target-box.t2.vertical .mirror-box, #target-box.t3.vertical .mirror-box { width:101px; }
#target-box.t6.vertical .fill-box, #target-box.t6.vertical .mirror-box { width:201px; }
#target-box.vertical .fill-box { padding:10px 0; border-right:1px solid #000; }
#target-box.vertical .mirror-box { padding:10px 0; }

#target-box.t6.horizontal .fill-box, #target-box.t6.horizontal .mirror-box { width:320px; }
#target-box.horizontal .fill-box { padding:0 10px; border-bottom:1px solid #000; }
#target-box.horizontal .mirror-box { padding:0 10px; }

.fill, .mirror { width:100px; height:100px; float:left; border:1px solid #d3d2d0; background:#fff; }
.mirror { background:0; border-color:#fff; }
.mirror .stack-item { position:relative; left:-1px; top:-1px; margin:0; -ms-transform: rotateY(180deg); /* IE 9 */ -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */ transform: rotateY(180deg); }
#target-box.horizontal .mirror .stack-item { -ms-transform: rotateX(180deg); /* IE 9 */ -webkit-transform: rotateX(180deg); /* Chrome, Safari, Opera */ transform: rotateX(180deg); }

.help { display:none; margin:30px 0 15px; }
#help-link { display:inline-block; padding:11px 15px; background:rgba(0,0,0,0.3); font-family:'Bungee', Georgia, cursive; font-size:27px; color:#aaa9a5; border-radius:50%; }
#help-link:hover { color:#0049a0; }

.copy { top:-70px; }

@media all and (max-width: 900px) {
	
	#target-box.t6.vertical .fill-box, #target-box.t6.vertical .mirror-box { width:171px; }
	.t6.vertical .fill, .t6.vertical .mirror { width:85px; height:85px; }
	#pattern[data-level="t6"][data-orientation="vertical"] { width:340px; height:255px; background-size:340px 255px; }
	.task-box[data-level="t6"][data-orientation="vertical"] .draggable-box, .task-box[data-level="t6"][data-orientation="vertical"] .stack-item { width:85px; height:85px; }
	.task-box[data-level="t6"][data-orientation="vertical"] .stack-item:after { background-size:85px 85px; }
	
}