body {
	color: #303030;
	font-family:Monospace;
	font-size:13px;
	margin: auto;
	text-align: center;
	overflow: hidden;
	background-color:#e7e9f9;
	overflow: scroll;
}
.onTop {
	clear:both;
	margin:5px;
	padding:3px;
	float:center;
	font-size: 24px;
	font-weight:bold;
}
.container{
	margin: auto;
	text-align: center;
	min-width:512px;
	max-width:1024px;
	
}
.section{
	background-color:#62b0fe;
	background: -webkit-linear-gradient(top, #62b0fe , #99cbfe); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(bottom , #62b0fe, #99cbfe); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(bottom , #62b0fe, #99cbfe); /* For Firefox 3.6 to 15 */
	background: linear-gradient(top, #62b0fe , #99cbfe); /* Standard syntax (must be last) */
	padding:7px;
	min-width:240px;
	max-width:480px;
	border:0px solid;
	border-radius:10px;
	border-color:#0148ff;
	font-size: 14px;
	float:left;
	clear: none;
	margin:8px;
	text-align: center;
}
.section secTitle{
	font-size: 20px;
	font-weight:bold;
	float:center;
	clear:both;
	margin:5px;
	padding:2px;
}
.demo{
	background-color:#ddddff;
	margin-top:4%;
	margin-bottom:1%;
	margin-left:1%;
	margin-right:1%;
	border:0px solid;
	border-radius:4px;
	border-color:#014892;
	padding:4px;
}
.demo demoTitle{
	font-size: 130%;
	font-weight:bold;
	float:left;
}
.demo demoDate{
	clear:left;
	font-size: 80%;
	float:left;
	color: #111111;
	opacity: 0.7;
	float:left;
}
.demo img{
	max-width: 40%;
    max-height: 40%;
	border:4px solid;
	border-radius:5px;
	border-color:#014892;
	margin-top:2%;
	margin-bottom:2%;
	margin-left:30%;
	margin-right:30%;
	opacity: 0.90;
}
.demo img:hover{
	border-color:#c1c8ee;
	box-shadow: 3px 3px 2px #888888;
	opacity: 0.96;
}
p{
	text-align:left;
	margin:1%;
	font-weight:bold;
}

.roll {
	display: inline-block;
	overflow: hidden;

	vertical-align: top;

	-webkit-perspective: 400px;
	   -moz-perspective: 400px;

	-webkit-perspective-origin: 50% 50%;
	   -moz-perspective-origin: 50% 50%;
}
.roll span {
	display: block;
	position: relative;
	padding: 0 2px;

	-webkit-transition: all 400ms ease;
	   -moz-transition: all 400ms ease;
	
	-webkit-transform-origin: 50% 0%;
	   -moz-transform-origin: 50% 0%;
	
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
}
.roll:hover span {
	background: #111;

	-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
	   -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll span:after {
	content: attr(data-title);

	display: block;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 2px;

	color: #fff;
	background: hsl(206, 80%, 30%);

	-webkit-transform-origin: 50% 0%;
	   -moz-transform-origin: 50% 0%;

	-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
	   -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
a {text-decoration:none;}