/* patternLock.js v 0.5.2 Author: Sudhanshu Yadav Copyright (c) 2013 Sudhanshu Yadav - ignitersworld.com , released under the MIT license. Demo and documentaion on: ignitersworld.com/lab/patternLock.html */ .patt-holder{background:#3382c0; -ms-touch-action: none;} .patt-wrap{position:relative; cursor:pointer;} .patt-wrap ul, .patt-wrap li{ list-style: none; margin:0; padding: 0; } .patt-circ{ position:relative; float: left; box-sizing: border-box; -moz-box-sizing: border-box; } .patt-circ.hovered{ border:3px solid #009900; } .patt-error .patt-circ.hovered{ border:3px solid #BA1B26; } .patt-hidden .patt-circ.hovered{border:0;} .patt-dots{ background: #FFF; width: 10px;height: 10px; border-radius:5px; position:absolute; top:50%; left:50%; margin-top:-5px; margin-left:-5px; } .patt-lines{ border-radius:5px; height:10px; background:rgba(255,255,255,.7); position:absolute; transform-origin:5px 5px; -ms-transform-origin:5px 5px; /* IE 9 */ -webkit-transform-origin:5px 5px; } .patt-hidden .patt-lines{ display:none; }