h1 { color: #900; font-size: 16pt;/* trivial */  }
a.trivial {color: #C55;/* trivial */}
#fpc_effect-back {
background-color: #eeeef4; /* some background color to match corner inside's */
width: 100%;/* trivial */
font: 12pt arial,sans-serif,helvetica,verdana;/* trivial */ 
color: #666;//trivial
}
#fpc_effect-back * {
	box-sizing: border-box;
}
#fpc_box {
	position: static;
	background-color: #FFF;
}
#fpc_page-tip:before, #fpc_page-tip:after {
	background-color: #FFF;
	position: absolute;
	display: block;
	z-index: 2;
	border-top-right-radius: 60%;
	width: 50%;
	height: 50%;
	content: "";
}
#fpc_page-tip:before {
	right: 100%;
	top: 0%;
	background: -webkit-radial-gradient(-180% 200%, circle, rgba(255,255,255,0) 85%, rgba(0,0,0,.1) 93%);
}
#fpc_box:hover #fpc_page-tip:before {
	border-center: solid 1px #fff;
}
#fpc_box div#fpc_corner-box:hover #fpc_page-tip:before {
	border-center: solid 2px #fff;
}
#fpc_page-tip:after {
	top: 100%;
	right: 0%;
	background: -webkit-radial-gradient(-250% 320%, circle, rgba(255,255,255,0) 85%, rgba(0,0,0,.10) 93%);
}
#fpc_box:hover #fpc_page-tip:after {
	border-top: solid 1px #fff;
}
#fpc_box div#fpc_corner-box:hover #fpc_page-tip:after {
	border-top: solid 2px #fff;
}
#fpc_corner-box {  /* edit these sizes for the default revealing corner size */
	height: 50px;
	width: 50px;
	right: 0;
	top: 0;
	position: absolute;
	overflow: visible;
}
#fpc_box:hover #fpc_corner-box { /* edit corner size (First animation, when the whole page is rollovered) */
	height: 100px;
	width: 100px;
}
#fpc_box div#fpc_corner-box:hover { /* edit corner size (Second animation, when the corner itself is rollovered) */
	height: 250px;
	width: 250px;
}
#fpc_corner-box:before {
	position: absolute;
	top: 0;
	right: 0;
	content: "";
	display: block;
	width: 133%;
	height: 133%;
}
#fpc_corner-contents:after {
	position: absolute;
	top: 0;
	right: 0;
	content: "";
	background:  -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 37%, #DDD 62%, rgba(230, 230, 230, 0.1) 64%, rgba(255, 255, 255, 0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0, 0, 0, 0.2) 74%, transparent 81%);
	display: block;
	width: 133%;
	height: 133%;
}
#fpc_page-tip {
	position: absolute;
	top: 0;
	right: 0;
	content: "";
	background: -webkit-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
	display: block;
	width: 100%;
	height: 100%;
}
#fpc_corner-button {
	position: absolute;
	width: 15em;
	height: 15em;
	right: 0;
	background-color: #900;
	color: #fff;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
	padding: 40px 15px;
	border-radius: 4px;
	display: inline-block;
	font-size: 12px;
}
#fpc_corner-contents {
	width: 125%;
	position: absolute;
	display: block;
	overflow: hidden;
	-webkit-mask: -webkit-linear-gradient(45deg, transparent 49%, #000 53%);
	top: 0;
	right: 0;
	height: 125%;
}
#fpc_corner-contents:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #eeeef4; /* Match this background color to #fpc_effect-back */
}
#fpc_corner-box, #fpc_corner-contents, #fpc_page-tip {
	-webkit-transition-property: all;
	-webkit-transition-duration: .3s;
	-webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
}
#fpc_corner-button strong {
	font-size: 15px;
	font-weight: bold;
	display: block;
}