* { margin: 0; padding: 0; }

body {
	text-align: center;
	font-family: helvetica, arial, sans-serif;
	background: url(images/bg.jpg);
	color: #f4f4f4;
}

input {
	margin-bottom: 10px;
}

ul li {
	margin: 40px 0;
	display: inline-block;
}

ul li a {
	color: #f4f4f4;
	padding: 5px 10px;
	margin: 20px;
	background: #222;
	text-decoration: none;
}

.magnify {
	margin: 50px;
	display: inline-block;
}

/* Necessary Styles
   Don't forget to set a background-image for .magnifying-glass
---------------------------*/

.magnify {
	position: relative;
	cursor: none;
}

.magnify .magnifying-glass {
	display: none;
	position: absolute;
	overflow: hidden;
	/* Background Image here, or for specific id */
}

.magnify .magnifying-glass .large {
	width: 100%;
	height: 100%;
	position: absolute;
}

.magnify .magnifying-glass .reflected {
	background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0.17) 41%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 45%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(41%,rgba(255,255,255,0.17)), color-stop(42%,rgba(255,255,255,0)), color-stop(45%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0.17) 41%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 45%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  rgba(255,255,255,0.17) 41%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 45%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0.17) 41%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 45%); /* IE10+ */
	background: linear-gradient(135deg,  rgba(255,255,255,0.17) 41%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 45%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2bffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* Skin 1
---------------------------*/

#magnify-1 .magnifying-glass {
	-webkit-box-shadow: 0 0 5px rgba( 0,0,0,0.5 ), 0 3px 20px rgba( 0,0,0,0.5 );
	box-shadow: 0 0 5px rgba( 0,0,0,0.5 ), 0 3px 20px rgba( 0,0,0,0.5 );
	border: 3px solid rgba( 255,255,255,0.5 );
}

#magnify-1 .magnifying-glass {
	background: #34383f url(images/large.png) top left no-repeat;
}

/* Skin 2
---------------------------*/

#magnify-2 .magnifying-glass {
	width: 500px;
	height: 250px;
	/* Set a backgroundcolor, if you are using a .png file */
	background: #34383f url(images/large.png) top left no-repeat;
	-webkit-box-shadow: 0 0 5px rgba( 0,0,0,0.5 ), 0 3px 20px rgba( 0,0,0,0.5 ) inset;
	border: 3px solid rgba( 0,0,0,0.6 );
}

#magnify-2 .magnifying-glass .overlay {
	float: right;
	width: 160px;
	height: 210px;
	padding: 20px;
	background: #f4f4f4;
	color: #333;
	text-align: left;
}

#magnify-2 .magnifying-glass .overlay h2 {
	margin-bottom: 10px 0;
}

/* Skin 3
---------------------------*/

#magnify-3 .magnifying-glass {
	width: 250px;
	height: 250px;
	background: #34383f url(images/large.png) top left no-repeat;
	-webkit-border-radius: 125px;
	-moz-border-radius: 125px;
	border-radius: 125px;
	-webkit-box-shadow: 0 0 5px rgba( 0,0,0,0.5 ), 0 3px 20px rgba( 0,0,0,0.5 );
	box-shadow: 0 0 5px rgba( 0,0,0,0.5 ), 0 3px 20px rgba( 0,0,0,0.5 );
}

#magnify-3 .magnifying-glass .large {
	background: url(images/glass.png) top left no-repeat;
}