@charset "utf-8";
/* ~ Essential Rules ~ */

/* EDIT Slide Width */
#g1, #g1 .main li, .wrapper { width:940px; }
#g1 .contextual .right { margin-left:940px; }

/* EDIT Slide Height & Control Height */
#g1 .controls { margin-top:100px; }
#g1 { height:100px; }

/* Hides / Overflow / Slide Position / Cursor / Next Link */

#g1 { overflow:hidden; }
.wrapper li { display:block;float:left; }
.wrapper label { cursor:pointer; }
.wrapper input { display:none; }
#g1 .main { width:1500%; }

/* Setup Positions a-e (1-5) Add More At Will */

#g1 .a:checked ~ .main { margin-left:0; }
#g1 .b:checked ~ .main { margin-left:-100%; }
#g1 .c:checked ~ .main { margin-left:-200%; }
#g1 .d:checked ~ .main { margin-left:-300%; }
#g1 .e:checked ~ .main { margin-left:-400%; }


/* ~ Non-Essential Styling & Fancy Buttons */

.wrapper { background:#fff;padding:10px 10px;box-shadow: 0px 1px 5px #777;margin-bottom:10px; }

/* Fancy Controls */

#g1 .controls { position:absolute;text-align:center;width:inherit;padding-top:40px; }
#g1 .controls label { font-size:20px;height:7px;width:7px;background:#ccc;display:inline-block;opacity:0.6;border-radius:15px;border:1px solid #888;opacity:0.5; }
#g1 .controls label:hover { opacity:0.8 }
.innote { padding:30px; }

#g1 .a:checked ~ .controls .a,
#g1 .b:checked ~ .controls .b,
#g1 .c:checked ~ .controls .c,
#g1 .d:checked ~ .controls .d,
#g1 .e:checked ~ .controls .e
{ pointer-events: none; background:#444; border:1px solid #333;opacity:1; }

/* Even Fancier Next Buttons */

#g1 .a:checked ~ .contextual .a { display:block; }
#g1 .b:checked ~ .contextual .b { display:block; }
#g1 .c:checked ~ .contextual .c { display:block; }
#g1 .d:checked ~ .contextual .d { display:block; }
#g1 .e:checked ~ .contextual .e { display:block; }

#g1 .contextual { position:absolute; }
#g1 .contextual ul { width:50px; }
#g1 .contextual li { float:none; }
#g1 .contextual li label { display:none;border-radius: 25px;width:7px;background:#555;padding: 4px 14px 6px 15px;border-radius: 25px;color: white;font-size: 10px; }
#g1 .contextual li label:hover { background:#222; }
#g1 .contextual .left { margin-left:-20px; }
#g1 .contextual .right { padding-left:3px; }
#g1 .contextual .right label { margin-top:-25px; }
#g1 .contextual { margin-top:40px; }

/* Animation */

#g1 .main {
-webkit-transition: margin-left 0.8s ease-in-out;
-moz-transition: margin-left 0.8s ease-in-out;
-o-transition: margin-left 0.8s ease-in-out;
-ms-transition: margin-left 0.8s ease-in-out;
transition: margin-left 0.8s ease-in-out; 
}