/* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/cssplay-stacking-slideshow.html Copyright (c) Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .container {border:none green; width:750px; height:600px; overflow:hidden; margin:0 auto; position:relative; z-index:10;} .stacking {width:700px; height:600px; margin:50px auto; position:relative; z-index:10; border:none red; -webkit-perspective: 2400px; -moz-perspective: 2400px; -ms-perspective: 2400px; -o-perspective: 2400px; perspective: 2400px; } .container input {position:absolute; left:-9999px;} .container .stacking div {position:absolute; left:0; top:0; z-index:10; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -o-transform-style : preserve-3d; -ms-transform-style : preserve-3d; transform-style : preserve-3d; } .container .stacking div .banner {position:absolute; left:0; top:400px; width:700px; text-align:center; opacity:0; font:normal 20px/25px 'Archivo Narrow', sans-serif; background-color:lightblue; color:black; -webkit-transition:0s; -moz-transition:0s; -ms-transition:0s; -o-transition:0s; transition:0s; } .nummer {position:absolute; left:5px; top:433px; width:700px; opacity:0; font:normal 20px/25px 'Archivo Narrow', sans-serif; background-color:transparent; color:white; border:none green; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; transition:0.5s; } .container .stacking div .prev, .container .stacking div .next {display:block; position:absolute; left:-9999px; top:480px; width:40px; height:40px; -webkit-transition: left 0s 0s; -moz-transition: left 0 0s; -ms-transition: left 0s 0s; -o-transition: left 0s 0s; transition: left 0s 0s; } .container .stacking div .prev {background:url(../image/2011/prev.png) no-repeat center center;} .container .stacking div .next {background:url(../image/2011/next.png) no-repeat center center;} .container .stack {width:700px; position:absolute; top:680px; left:0;} .container .stack ul {padding:0; margin:0; list-style:none; position:absolute; top:0;} .container .stack ul.leftPile {left:5px;} .container .stack ul.rightPile {right:5px;} .container .stack ul li {height:3px; width:340px; background:#ccc; margin:5px 0; -webkit-transition:0s 0.4s; -moz-transition:0s 0.4s; -ms-transition:0s 0.4s; -o-transition:0s 0.4s; transition:0s 0.4s; } .container .stack ul.rightPile li {background:transparent; -webkit-transition:0s 0.4s; -moz-transition:0s 0.4s; -ms-transition:0s 0.4s; -o-transition:0s 0.4s; transition:0s 0.4; } .container .stacking div > img { padding:10px; background:#fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.6); -moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px; position: absolute; left: -10px; top: -10px; display: block; opacity:0; -webkit-transition: -webkit-transform 0.8s 0s, opacity 0.8s 0s; -moz-transition: -moz-transform 0.8s 0s, opacity 0.8s 0s; -ms-transition: -ms-transform 0.8s 0s, opacity 0.8s 0s; -o-transition: -o-transform 0.8s 0s, opacity 0.8s 0s; transition: transform 0.8s 0s, opacity 0.8s 0s; -webkit-transform-origin: 50% 475px 0px; -moz-transform-origin: 50% 475px 0px; -ms-transform-origin: 50% 475px 0px; -o-transform-origin: 50% 475px 0px; transform-origin: 50% 475px 0px; -webkit-transform: rotateZ(-91deg) rotateY(91deg); -moz-transform: rotateZ(-91deg) rotateY(91deg); -ms-transform: rotateZ(-91deg) rotateY(91deg); -o-transform: rotateZ(-91deg) rotateY(91deg); transform: rotateZ(-91deg) rotateY(91deg); -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -o-transform-style : preserve-3d; -ms-transform-style : preserve-3d; transform-style : preserve-3d; } /* pic checked action */ #p1:checked ~ .stacking div:nth-of-type(1), #p2:checked ~ .stacking div:nth-of-type(2), #p3:checked ~ .stacking div:nth-of-type(3), #p4:checked ~ .stacking div:nth-of-type(4), #p5:checked ~ .stacking div:nth-of-type(5), #p6:checked ~ .stacking div:nth-of-type(6), #p7:checked ~ .stacking div:nth-of-type(7), #p8:checked ~ .stacking div:nth-of-type(8), #p9:checked ~ .stacking div:nth-of-type(9), #p10:checked ~ .stacking div:nth-of-type(10), #p11:checked ~ .stacking div:nth-of-type(11), #p12:checked ~ .stacking div:nth-of-type(12), #p13:checked ~ .stacking div:nth-of-type(13), #p14:checked ~ .stacking div:nth-of-type(14), #p15:checked ~ .stacking div:nth-of-type(15), #p16:checked ~ .stacking div:nth-of-type(16), #p17:checked ~ .stacking div:nth-of-type(17), #p18:checked ~ .stacking div:nth-of-type(18), #p19:checked ~ .stacking div:nth-of-type(19), #p20:checked ~ .stacking div:nth-of-type(20) {z-index:100;} #p2:checked ~ .stacking div:nth-child(1) > img, #p3:checked ~ .stacking div:nth-child(2) > img, #p4:checked ~ .stacking div:nth-child(3) > img, #p5:checked ~ .stacking div:nth-child(4) > img, #p6:checked ~ .stacking div:nth-child(5) > img, #p7:checked ~ .stacking div:nth-child(6) > img, #p8:checked ~ .stacking div:nth-child(7) > img, #p9:checked ~ .stacking div:nth-child(8) > img, #p10:checked ~ .stacking div:nth-child(9) > img, #p11:checked ~ .stacking div:nth-child(10) > img, #p12:checked ~ .stacking div:nth-child(11) > img, #p13:checked ~ .stacking div:nth-child(12) > img, #p14:checked ~ .stacking div:nth-child(13) > img, #p15:checked ~ .stacking div:nth-child(14) > img, #p16:checked ~ .stacking div:nth-child(15) > img, #p17:checked ~ .stacking div:nth-child(16) > img, #p18:checked ~ .stacking div:nth-child(17) > img, #p19:checked ~ .stacking div:nth-child(18) > img, #p20:checked ~ .stacking div:nth-child(19) > img, #p21:checked ~ .stacking div:nth-child(20) > img, #p22:checked ~ .stacking div:nth-child(21) > img, #p23:checked ~ .stacking div:nth-child(22) > img, #p24:checked ~ .stacking div:nth-child(23) > img, #p25:checked ~ .stacking div:nth-child(24) > img, #p26:checked ~ .stacking div:nth-child(25) > img, #p27:checked ~ .stacking div:nth-child(26) > img, #p28:checked ~ .stacking div:nth-child(27) > img, #p29:checked ~ .stacking div:nth-child(28) > img, #p30:checked ~ .stacking div:nth-child(29) > img, #p31:checked ~ .stacking div:nth-child(30) > img, #p32:checked ~ .stacking div:nth-child(31) > img, #p33:checked ~ .stacking div:nth-child(32) > img, #p34:checked ~ .stacking div:nth-child(33) > img, #p35:checked ~ .stacking div:nth-child(34) > img, #p36:checked ~ .stacking div:nth-child(35) > img, #p37:checked ~ .stacking div:nth-child(36) > img, #p38:checked ~ .stacking div:nth-child(37) > img, #p39:checked ~ .stacking div:nth-child(38) > img, #p40:checked ~ .stacking div:nth-child(39) > img, #p41:checked ~ .stacking div:nth-child(40) > img, #p42:checked ~ .stacking div:nth-child(41) > img {opacity: 0; -webkit-transition: -webkit-transform 0.8s 0s, opacity 0.4s 0.4s; -moz-transition: -moz-transform 0.8s 0s, opacity 0.4s 0.4s; -ms-transition: -ms-transform 0.8s 0s, opacity 0.4s 0.4s; -o-transition: -o-transform 0.8s 0s, opacity 0.4s 0.4s; transition: transform 0.8s 0s, opacity 0.4s 0.4s; -webkit-transform: rotateZ(91deg) rotateY(-91deg); -moz-transform: rotateZ(91deg) rotateY(-91deg); -ms-transform: rotateZ(91deg) rotateY(-91deg); -o-transform: rotateZ(91deg) rotateY(-91deg); transform: rotateZ(91deg) rotateY(-91deg); } #p1:checked ~ .stacking div:nth-child(1) > img, #p2:checked ~ .stacking div:nth-child(2) > img, #p3:checked ~ .stacking div:nth-child(3) > img, #p4:checked ~ .stacking div:nth-child(4) > img, #p5:checked ~ .stacking div:nth-child(5) > img, #p6:checked ~ .stacking div:nth-child(6) > img, #p7:checked ~ .stacking div:nth-child(7) > img, #p8:checked ~ .stacking div:nth-child(8) > img, #p9:checked ~ .stacking div:nth-child(9) > img, #p10:checked ~ .stacking div:nth-child(10) > img, #p11:checked ~ .stacking div:nth-child(11) > img, #p12:checked ~ .stacking div:nth-child(12) > img, #p13:checked ~ .stacking div:nth-child(13) > img, #p14:checked ~ .stacking div:nth-child(14) > img, #p15:checked ~ .stacking div:nth-child(15) > img, #p16:checked ~ .stacking div:nth-child(16) > img, #p17:checked ~ .stacking div:nth-child(17) > img, #p18:checked ~ .stacking div:nth-child(18) > img, #p19:checked ~ .stacking div:nth-child(19) > img, #p20:checked ~ .stacking div:nth-child(20) > img, #p21:checked ~ .stacking div:nth-child(21) > img, #p22:checked ~ .stacking div:nth-child(22) > img, #p23:checked ~ .stacking div:nth-child(23) > img, #p24:checked ~ .stacking div:nth-child(24) > img, #p25:checked ~ .stacking div:nth-child(25) > img, #p26:checked ~ .stacking div:nth-child(26) > img, #p27:checked ~ .stacking div:nth-child(27) > img, #p28:checked ~ .stacking div:nth-child(28) > img, #p29:checked ~ .stacking div:nth-child(29) > img, #p30:checked ~ .stacking div:nth-child(30) > img, #p31:checked ~ .stacking div:nth-child(31) > img, #p32:checked ~ .stacking div:nth-child(32) > img, #p33:checked ~ .stacking div:nth-child(33) > img, #p34:checked ~ .stacking div:nth-child(34) > img, #p35:checked ~ .stacking div:nth-child(35) > img, #p36:checked ~ .stacking div:nth-child(36) > img, #p37:checked ~ .stacking div:nth-child(37) > img, #p38:checked ~ .stacking div:nth-child(38) > img, #p39:checked ~ .stacking div:nth-child(39) > img, #p40:checked ~ .stacking div:nth-child(40) > img, #p41:checked ~ .stacking div:nth-child(41) > img, #p42:checked ~ .stacking div:nth-child(42) > img { opacity: 1; -webkit-transition: -webkit-transform 0.8s 0s, opacity 0.4s 0s; -moz-transition: -moz-transform 0.8s 0s, opacity 0.4s 0s; -ms-transition: -ms-transform 0.8s 0s, opacity 0.4s 0s; -o-transition: -o-transform 0.8s 0s, opacity 0.4s 0s; transition: transform 0.8s 0s, opacity 0.4s 0s; -webkit-transform: rotateY(0deg) rotateZ(0deg); -moz-transform: rotateY(0deg) rotateZ(0deg); -ms-transform: rotateY(0deg) rotateZ(0deg); -o-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } #p2:checked ~ .stacking div:nth-child(2) .prev, #p3:checked ~ .stacking div:nth-child(3) .prev, #p4:checked ~ .stacking div:nth-child(4) .prev, #p5:checked ~ .stacking div:nth-child(5) .prev, #p6:checked ~ .stacking div:nth-child(6) .prev, #p7:checked ~ .stacking div:nth-child(7) .prev, #p8:checked ~ .stacking div:nth-child(8) .prev, #p9:checked ~ .stacking div:nth-child(9) .prev, #p10:checked ~ .stacking div:nth-child(10) .prev, #p11:checked ~ .stacking div:nth-child(11) .prev, #p12:checked ~ .stacking div:nth-child(12) .prev, #p13:checked ~ .stacking div:nth-child(13) .prev, #p14:checked ~ .stacking div:nth-child(14) .prev, #p15:checked ~ .stacking div:nth-child(15) .prev, #p16:checked ~ .stacking div:nth-child(16) .prev, #p17:checked ~ .stacking div:nth-child(17) .prev, #p18:checked ~ .stacking div:nth-child(18) .prev, #p19:checked ~ .stacking div:nth-child(19) .prev, #p20:checked ~ .stacking div:nth-child(20) .prev, #p21:checked ~ .stacking div:nth-child(21) .prev, #p22:checked ~ .stacking div:nth-child(22) .prev, #p23:checked ~ .stacking div:nth-child(23) .prev, #p24:checked ~ .stacking div:nth-child(24) .prev, #p25:checked ~ .stacking div:nth-child(25) .prev, #p26:checked ~ .stacking div:nth-child(26) .prev, #p27:checked ~ .stacking div:nth-child(27) .prev, #p28:checked ~ .stacking div:nth-child(28) .prev, #p29:checked ~ .stacking div:nth-child(29) .prev, #p30:checked ~ .stacking div:nth-child(30) .prev, #p31:checked ~ .stacking div:nth-child(31) .prev, #p32:checked ~ .stacking div:nth-child(32) .prev, #p33:checked ~ .stacking div:nth-child(33) .prev, #p34:checked ~ .stacking div:nth-child(34) .prev, #p35:checked ~ .stacking div:nth-child(35) .prev, #p36:checked ~ .stacking div:nth-child(36) .prev, #p37:checked ~ .stacking div:nth-child(37) .prev, #p38:checked ~ .stacking div:nth-child(38) .prev, #p39:checked ~ .stacking div:nth-child(39) .prev, #p40:checked ~ .stacking div:nth-child(40) .prev, #p41:checked ~ .stacking div:nth-child(41) .prev, #p42:checked ~ .stacking div:nth-child(42) .prev {left:300px;} #p1:checked ~ .stacking div:nth-child(1) .next, #p2:checked ~ .stacking div:nth-child(2) .next, #p3:checked ~ .stacking div:nth-child(3) .next, #p4:checked ~ .stacking div:nth-child(4) .next, #p5:checked ~ .stacking div:nth-child(5) .next, #p6:checked ~ .stacking div:nth-child(6) .next, #p7:checked ~ .stacking div:nth-child(7) .next, #p8:checked ~ .stacking div:nth-child(8) .next, #p9:checked ~ .stacking div:nth-child(9) .next, #p10:checked ~ .stacking div:nth-child(10) .next, #p11:checked ~ .stacking div:nth-child(11) .next, #p12:checked ~ .stacking div:nth-child(12) .next, #p13:checked ~ .stacking div:nth-child(13) .next, #p14:checked ~ .stacking div:nth-child(14) .next, #p15:checked ~ .stacking div:nth-child(15) .next, #p16:checked ~ .stacking div:nth-child(16) .next, #p17:checked ~ .stacking div:nth-child(17) .next, #p18:checked ~ .stacking div:nth-child(18) .next, #p19:checked ~ .stacking div:nth-child(19) .next, #p20:checked ~ .stacking div:nth-child(20) .next, #p21:checked ~ .stacking div:nth-child(21) .next, #p22:checked ~ .stacking div:nth-child(22) .next, #p23:checked ~ .stacking div:nth-child(23) .next, #p24:checked ~ .stacking div:nth-child(24) .next, #p25:checked ~ .stacking div:nth-child(25) .next, #p26:checked ~ .stacking div:nth-child(26) .next, #p27:checked ~ .stacking div:nth-child(27) .next, #p28:checked ~ .stacking div:nth-child(28) .next, #p29:checked ~ .stacking div:nth-child(29) .next, #p30:checked ~ .stacking div:nth-child(30) .next, #p31:checked ~ .stacking div:nth-child(31) .next, #p32:checked ~ .stacking div:nth-child(32) .next, #p33:checked ~ .stacking div:nth-child(33) .next, #p34:checked ~ .stacking div:nth-child(34) .next, #p35:checked ~ .stacking div:nth-child(35) .next, #p36:checked ~ .stacking div:nth-child(36) .next, #p37:checked ~ .stacking div:nth-child(37) .next, #p38:checked ~ .stacking div:nth-child(38) .next, #p39:checked ~ .stacking div:nth-child(39) .next, #p40:checked ~ .stacking div:nth-child(40) .next, #p41:checked ~ .stacking div:nth-child(41) .next, #p42:checked ~ .stacking div:nth-child(42) .next {left:350px;} #p1:checked ~ .stacking div:nth-child(1) .banner, #p2:checked ~ .stacking div:nth-child(2) .banner, #p3:checked ~ .stacking div:nth-child(3) .banner, #p4:checked ~ .stacking div:nth-child(4) .banner, #p5:checked ~ .stacking div:nth-child(5) .banner, #p6:checked ~ .stacking div:nth-child(6) .banner, #p7:checked ~ .stacking div:nth-child(7) .banner, #p8:checked ~ .stacking div:nth-child(8) .banner, #p9:checked ~ .stacking div:nth-child(9) .banner, #p10:checked ~ .stacking div:nth-child(10) .banner, #p11:checked ~ .stacking div:nth-child(11) .banner, #p12:checked ~ .stacking div:nth-child(12) .banner, #p13:checked ~ .stacking div:nth-child(13) .banner, #p14:checked ~ .stacking div:nth-child(14) .banner, #p15:checked ~ .stacking div:nth-child(15) .banner, #p16:checked ~ .stacking div:nth-child(16) .banner, #p17:checked ~ .stacking div:nth-child(17) .banner, #p18:checked ~ .stacking div:nth-child(18) .banner, #p19:checked ~ .stacking div:nth-child(19) .banner, #p20:checked ~ .stacking div:nth-child(20) .banner, #p21:checked ~ .stacking div:nth-child(21) .banner, #p22:checked ~ .stacking div:nth-child(22) .banner, #p23:checked ~ .stacking div:nth-child(23) .banner, #p24:checked ~ .stacking div:nth-child(24) .banner, #p25:checked ~ .stacking div:nth-child(25) .banner, #p26:checked ~ .stacking div:nth-child(26) .banner, #p27:checked ~ .stacking div:nth-child(27) .banner, #p28:checked ~ .stacking div:nth-child(28) .banner, #p29:checked ~ .stacking div:nth-child(29) .banner, #p30:checked ~ .stacking div:nth-child(30) .banner, #p31:checked ~ .stacking div:nth-child(31) .banner, #p32:checked ~ .stacking div:nth-child(32) .banner, #p33:checked ~ .stacking div:nth-child(33) .banner, #p34:checked ~ .stacking div:nth-child(34) .banner, #p35:checked ~ .stacking div:nth-child(35) .banner, #p36:checked ~ .stacking div:nth-child(36) .banner, #p37:checked ~ .stacking div:nth-child(37) .banner, #p38:checked ~ .stacking div:nth-child(38) .banner, #p39:checked ~ .stacking div:nth-child(39) .banner, #p40:checked ~ .stacking div:nth-child(40) .banner, #p41:checked ~ .stacking div:nth-child(41) .banner, #p42:checked ~ .stacking div:nth-child(42) .banner {opacity:1; -webkit-transition:0.5s 0.8s; -moz-transition:0.5s 0.8s; -ms-transition:0.5s 0.8s; -o-transition:0.5s 0.8s; transition:0.5s 0.8s; } #p1:checked ~ .stacking div:nth-child(1) .nummer, #p2:checked ~ .stacking div:nth-child(2) .nummer, #p3:checked ~ .stacking div:nth-child(3) .nummer, #p4:checked ~ .stacking div:nth-child(4) .nummer, #p5:checked ~ .stacking div:nth-child(5) .nummer, #p6:checked ~ .stacking div:nth-child(6) .nummer, #p7:checked ~ .stacking div:nth-child(7) .nummer, #p8:checked ~ .stacking div:nth-child(8) .nummer, #p9:checked ~ .stacking div:nth-child(9) .nummer, #p10:checked ~ .stacking div:nth-child(10) .nummer, #p11:checked ~ .stacking div:nth-child(11) .nummer, #p12:checked ~ .stacking div:nth-child(12) .nummer, #p13:checked ~ .stacking div:nth-child(13) .nummer, #p14:checked ~ .stacking div:nth-child(14) .nummer, #p15:checked ~ .stacking div:nth-child(15) .nummer, #p16:checked ~ .stacking div:nth-child(16) .nummer, #p17:checked ~ .stacking div:nth-child(17) .nummer, #p18:checked ~ .stacking div:nth-child(18) .nummer, #p19:checked ~ .stacking div:nth-child(19) .nummer, #p20:checked ~ .stacking div:nth-child(20) .nummer, #p21:checked ~ .stacking div:nth-child(21) .nummer, #p22:checked ~ .stacking div:nth-child(22) .nummer, #p23:checked ~ .stacking div:nth-child(23) .nummer, #p24:checked ~ .stacking div:nth-child(24) .nummer, #p25:checked ~ .stacking div:nth-child(25) .nummer, #p26:checked ~ .stacking div:nth-child(26) .nummer, #p27:checked ~ .stacking div:nth-child(27) .nummer, #p28:checked ~ .stacking div:nth-child(28) .nummer, #p29:checked ~ .stacking div:nth-child(29) .nummer, #p30:checked ~ .stacking div:nth-child(30) .nummer, #p31:checked ~ .stacking div:nth-child(31) .nummer, #p32:checked ~ .stacking div:nth-child(32) .nummer, #p33:checked ~ .stacking div:nth-child(33) .nummer, #p34:checked ~ .stacking div:nth-child(34) .nummer, #p35:checked ~ .stacking div:nth-child(35) .nummer, #p36:checked ~ .stacking div:nth-child(36) .nummer, #p37:checked ~ .stacking div:nth-child(37) .nummer, #p38:checked ~ .stacking div:nth-child(38) .nummer, #p39:checked ~ .stacking div:nth-child(39) .nummer, #p40:checked ~ .stacking div:nth-child(40) .nummer, #p41:checked ~ .stacking div:nth-child(41) .nummer, #p42:checked ~ .stacking div:nth-child(42) .nummer {opacity:1; -webkit-transition:0.5s 0.8s; -moz-transition:0.5s 0.8s; -ms-transition:0.5s 0.8s; -o-transition:0.5s 0.8s; transition:0.5s 0.8s; } #p1:checked ~ .stacking div .p1 img, #p2:checked ~ .stacking div .p2 img, #p3:checked ~ .stacking div .p3 img, #p4:checked ~ .stacking div .p4 img, #p5:checked ~ .stacking div .p5 img, #p6:checked ~ .stacking div .p6 img, #p7:checked ~ .stacking div .p7 img, #p8:checked ~ .stacking div .p8 img, #p9:checked ~ .stacking div .p9 img, #p10:checked ~ .stacking div .p10 img, #p11:checked ~ .stacking div .p11 img, #p12:checked ~ .stacking div .p12 img, #p13:checked ~ .stacking div .p13 img, #p14:checked ~ .stacking div .p14 img, #p15:checked ~ .stacking div .p15 img, #p16:checked ~ .stacking div .p16 img, #p17:checked ~ .stacking div .p17 img, #p18:checked ~ .stacking div .p18 img, #p19:checked ~ .stacking div .p19 img, #p20:checked ~ .stacking div .p20 img, #p21:checked ~ .stacking div .p21 img {display:none;} #p2:checked ~ .stack .leftPile li:nth-child(-n+1), #p3:checked ~ .stack .leftPile li:nth-child(-n+2), #p4:checked ~ .stack .leftPile li:nth-child(-n+3), #p5:checked ~ .stack .leftPile li:nth-child(-n+4), #p6:checked ~ .stack .leftPile li:nth-child(-n+5), #p7:checked ~ .stack .leftPile li:nth-child(-n+6), #p8:checked ~ .stack .leftPile li:nth-child(-n+7), #p9:checked ~ .stack .leftPile li:nth-child(-n+8), #p10:checked ~ .stack .leftPile li:nth-child(-n+9), #p11:checked ~ .stack .leftPile li:nth-child(-n+10), #p12:checked ~ .stack .leftPile li:nth-child(-n+11), #p13:checked ~ .stack .leftPile li:nth-child(-n+12), #p14:checked ~ .stack .leftPile li:nth-child(-n+13), #p15:checked ~ .stack .leftPile li:nth-child(-n+14), #p16:checked ~ .stack .leftPile li:nth-child(-n+15), #p17:checked ~ .stack .leftPile li:nth-child(-n+16), #p18:checked ~ .stack .leftPile li:nth-child(-n+17), #p19:checked ~ .stack .leftPile li:nth-child(-n+18), #p20:checked ~ .stack .leftPile li:nth-child(-n+19) {background:transparent;} #p2:checked ~ .stack .rightPile li:nth-last-child(-n+1), #p3:checked ~ .stack .rightPile li:nth-last-child(-n+2), #p4:checked ~ .stack .rightPile li:nth-last-child(-n+3), #p5:checked ~ .stack .rightPile li:nth-last-child(-n+4), #p6:checked ~ .stack .rightPile li:nth-last-child(-n+5), #p7:checked ~ .stack .rightPile li:nth-last-child(-n+6), #p8:checked ~ .stack .rightPile li:nth-last-child(-n+7), #p9:checked ~ .stack .rightPile li:nth-last-child(-n+8), #p10:checked ~ .stack .rightPile li:nth-last-child(-n+9), #p11:checked ~ .stack .rightPile li:nth-last-child(-n+10), #p12:checked ~ .stack .rightPile li:nth-last-child(-n+11), #p13:checked ~ .stack .rightPile li:nth-last-child(-n+12), #p14:checked ~ .stack .rightPile li:nth-last-child(-n+13), #p15:checked ~ .stack .rightPile li:nth-last-child(-n+14), #p16:checked ~ .stack .rightPile li:nth-last-child(-n+15), #p17:checked ~ .stack .rightPile li:nth-last-child(-n+16), #p18:checked ~ .stack .rightPile li:nth-last-child(-n+17), #p19:checked ~ .stack .rightPile li:nth-last-child(-n+18), #p20:checked ~ .stack .rightPile li:nth-last-child(-n+19) {background:#ccc;}