/* these are not necessary */

html {
    background-color:#eee;
}

#prev, #next {
    position:absolute;
    width:50px;
    height:50px;
    border:1px solid #aaa;
    background-color:#dca;
    color:white;
    z-index:10;
    font-size:40px;
    line-height:45px;
    text-align:center;
    font-family:Helvetica, sans-serif;
    cursor:pointer;
    cursor:hand;
}

#prev:hover,#next:hover {
	background-color:#ba9;
	border: 1px solid #999;
}

#navigation {
	width:800px;
	position:relative;
	margin-top:2em;
	margin-left:auto;
	margin-right:auto;
	height:70px;
}

#prev {
    left:0px;
}

#next {
	right:0px;
}

.zoomContainer {
	margin:0;
    padding:0;
    width:800px;
    height:600px;
    position:relative;
}

.zoomViewport {
	margin:0;
    padding:0;
    width:800px;
	height:600px;
	border:1px solid #ccc;
	background-color: white;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
	margin-top:1em;
}

h3 {
	font-family: Helvetica Neue, Helvetica, sans-serif;
	display:block;
	width:800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:5%;
	color:#444;
}

div {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#item1 {
	background-color:#fcc;
	position:absolute;
	left:50px;
	top:50px;
	width:300px;
	height:200px;
	border:1px solid red;
}

#item2 {
	background-color:#ccf;
	position:absolute;
	bottom:40px;
	right:40px;
	width:300px;
	height:200px;
	border:1px solid blue;
}

#item3 {
	background-color:#cfc;
	position:absolute;
	top:0px;
	right:100px;
	width:300px;
	height:200px;
	border:1px solid green;
	-webkit-transform: rotate(10deg) translate(0px,0px);
	-moz-transform: rotate(10deg) translate(0px,0px);
	-o-transform: rotate(10deg) translate(0px,0px);
}

#item3b {
	background-color:#cff;
	position:absolute;
	top:0px;
	left:0px;
	width:200px;
	height:100px;
	border:1px solid cyan;
	-webkit-transform: rotate(10deg) translate(200px,200px);
	-moz-transform: rotate(10deg) translate(200px,200px);
	-o-transform: rotate(10deg) translate(200px,200px);
}

#item2b {
	background-color:#99f;
	position:absolute;
	bottom:80px;
	right:80px;
	width:100px;
	height:100px;
	border:1px solid blue;
}

#item4 {
	background-color:#ffc;
	position:absolute;
	bottom:200px;
	left:200px;
	width:200px;
	height:200px;
	border:1px solid yellow;
	-webkit-transform: rotate(30deg) skew(20deg);
	-moz-transform: rotate(30deg) skew(20deg);
	-o-transform: rotate(30deg) skew(20deg);
}