/**
 * jQuery MotionCAPTCHA Plugin CSS
 * josscrowcroft.com/projects/motioncaptcha-jquery-plugin/
 * 
 * Only these rules are absolutely necessary for the plugin.
 * NB. The width & height of the canvas can be flexible to fit your layout but there's a recommended min/max
 * - if you need it much bigger/smaller, you could tweak the background-positions of the shape classes.
 */

/* The container: */
.motion-captcha {
    text-align: center;
    margin: 5px auto;
}
.motion-captcha p {
    font-size: 14px;
    font-family: sans-serif;
    margin-bottom: 10px;
}
.motion-captcha p > span{
    color: red;
}

/* The canvas: */
.motion-captcha-canvas {
	width:220px !important;  /* For best results, set width to between 210px and 240px */
	height:154px !important; /* For best results, set height to between 140px and 170px */
	background:#fff -9999px -9999px no-repeat;
	background-image: url('motionCaptcha-shapes.jpg') !important;
}

/* The shapes: */
.motion-captcha-canvas.triangle     { background-position:  10px   10px; }
.motion-captcha-canvas.x            { background-position:-200px   10px; }
.motion-captcha-canvas.rectangle    { background-position:-400px   10px; }
.motion-captcha-canvas.circle       { background-position:-600px   10px; }
.motion-captcha-canvas.check        { background-position:  10px -150px; }
.motion-captcha-canvas.caret        { background-position:-200px -150px; }
.motion-captcha-canvas.zigzag       { background-position:-400px -150px; }
.motion-captcha-canvas.arrow        { background-position:-600px -150px; }
.motion-captcha-canvas.leftbracket  { background-position:  10px -300px; }
.motion-captcha-canvas.rightbracket { background-position:-200px -300px; }
.motion-captcha-canvas.v            { background-position:-400px -300px; }
.motion-captcha-canvas.delete       { background-position:-600px -300px; }
.motion-captcha-canvas.leftbrace    { background-position:  10px -450px; }
.motion-captcha-canvas.rightbrace   { background-position:-200px -450px; }
.motion-captcha-canvas.star         { background-position:-400px -450px; }
.motion-captcha-canvas.pigtail      { background-position:-600px -450px; }

/* Disable mouse-selection on the page (only while user is actively drawing on the canvas): */
.mc-noselect {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

/* MotionCAPTCHA canvas */
.motion-captcha-canvas {
    margin: 0 auto 20px !important;
    padding: 1px !important;
    display: block !important;
    border: 4px solid #433e45;
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
     border-radius: 4px !important;
}
/* Red border when invalid */
.motion-captcha-canvas.mc-invalid {
    border: 4px solid #aa4444;
}
/* Green border when valid */
.motion-captcha-canvas.mc-valid {
    border: 4px solid #44aa44;
}