.windy-demo ul.wi-container:before,

.windy-demo ul.wi-container:after {

    content: '';

    position: absolute;

    z-index: -2;

    bottom: 15px;

    left: 10px;

    width: 50%;

    height: 20%;

    box-shadow: 0 15px 10px rgba(0, 0, 0, 0);

    -webkit-transform: rotate(-3deg);

    -moz-transform: rotate(-3deg);

    -ms-transform: rotate(-3deg);

    -o-transform: rotate(-3deg);

    transform: rotate(-3deg);

}



.windy-demo ul.wi-container:after {

    right: 10px;

    left: auto;

    -webkit-transform: rotate(3deg);

    -moz-transform: rotate(3deg);

    -ms-transform: rotate(3deg);

    -o-transform: rotate(3deg);

    transform: rotate(3deg);

}



.windy-demo ul.wi-container li {

    padding: 0;

    border: 10px solid #f8f8f8;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}





.windy-demo nav {

    position: relative;

    width: 100px;

    margin: 20px  0 0 520px;

}



.windy-demo nav span {

    width: 42px;

    height: 42px;

    margin: 0 4px;

    float: left;

    background: url(../images/nav.png) no-repeat 100% 0;

    text-indent: -9000px;

    cursor: pointer;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}



.windy-demo nav span:first-child {

    background-position: 0 0;

}



.windy-demo nav span:active {

    background-position: 100% 2px;

}



.windy-demo nav span:first-child:active {

    background-position: 0 2px;

}













.codrops-top {

    line-height: 24px;

    font-size: 11px;

    background: #fff;

    background: rgba(255, 255, 255, 0.5);

    text-transform: uppercase;

    z-index: 9999;

    position: relative;

    font-family: Cambria, Georgia, serif;

    box-shadow: 1px 0px 2px rgba(0,0,0,0.2);

}



/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */



.codrops-top:before,

.codrops-top:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}



.codrops-top:after {

    clear: both

}



/**

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */



.codrops-top {

    *zoom: 1

}



.codrops-top a {

    padding: 0px 10px;

    letter-spacing: 1px;

    color: #333;

    display: inline-block;

}



.codrops-top a:hover {

    background: rgba(255,255,255,0.6)

}



.codrops-top span.right {

    float: right

}



.codrops-top span.right a {

    float: left;

    display: block;

}



/* Demo Buttons Style */



.codrops-demos {

    text-align: center;

    display: block;

    line-height: 30px;

    padding: 5px 0px;

}



.codrops-demos a {

    display: inline-block;

    margin: 0px 4px;

    padding: 0px 6px;

    color: #aaa;

    line-height: 20px;

    font-size: 13px;

    text-shadow: 1px 1px 1px #fff;

    border: 1px solid #fff;

    background: #ffffff; /* Old browsers */

    background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);

    background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);

    background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);

    background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

}



.codrops-demos a:hover {

    color: #333;

    background: #fff;

}



.codrops-demos a:active {

    background: #fff

}



.codrops-demos a.current-demo,

.codrops-demos a.current-demo:hover {

    background: #f0f0f0;

    border-color: #d9d9d9;

    color: #aaa;

    box-shadow: 0 1px 1px rgba(255,255,255,0.7);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */

}



p.info {

    font-family: Cambria, Georgia, serif;

    font-style: italic;

    color: #666;

    text-shadow: 0 1px 0 rgba(255,255,255,0.9);

    padding: 20px;

    display: block;

    clear: both;

    text-align: center;

    width: 240px;

    margin: 0 auto;

}



ul.wi-container {

	width: 190px;

	height: 300px;

	margin: 0 auto 30px;

	position: relative;

	padding: 0;

	list-style-type: none; 

	-webkit-perspective: 1400px;

	-moz-perspective: 1400px;

	-ms-perspective: 1400px;

	-o-perspective: 1400px;

	perspective: 1400px;

}



ul.wi-container li {

	width: 100%;

	height: 100%;

	display: none;

	margin: 0;

	position: absolute;

	top: 0;

	left: 0;

	background: #f8f8f8;

	padding: 20px;

	pointer-events: auto;

}



ul.wi-container li.wi-move {

	pointer-events: none;

	-webkit-transition: -webkit-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;

	-moz-transition: -moz-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;

	-o-transition: -o-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;

	-ms-transition: -ms-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;

	transition: transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;

}