.box {
	position: relative;
	height: 300px;
	width: 100%;
	font-size: 27px;
	
}

.box div {
	position: absolute;
	z-index: 3;
}

.box .clipParent {
	top: 0;
	left: 0;
	position: relative;
	z-index: 1;
}

#explanation1 {
	top: 30px;
	left: 140px;
	-moz-transform: perspective(1px) rotate(-12deg);
	-webkit-transform: perspective(1px) rotate(-12deg);
	-o-transform:  rotate(-12deg);
	-ms-transform:  rotate(-12deg);
	transform: perspective(1px) rotate(-12deg);
}

body.ie6 #explanation1,
body.ie7 #explanation1,
body.ie8 #explanation1 {
	background: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(
   				Color="#ffffff"),
			progid:DXImageTransform.Microsoft.Matrix(
	            M11=0.9781476007338058,
	            M12=0.2079116908177585,
	            M21=-0.2079116908177585,
	            M22=0.9781476007338058,
	            SizingMethod='auto expand');


   /*
    * To make the transform-origin be the middle of
    * the object.    Note: These numbers
    * are approximations.  For more accurate results,
    * use Internet Explorer with this tool.
    */
   margin-left: -8px; 
   margin-top: -65px;
   padding-top: 3px;
   padding-bottom: 10px;
}

#explanation2 {
	top: 140px;
	left: 180px;
	
	-moz-transform: perspective(1px) rotate(-9deg);
	-webkit-transform: perspective(1px) rotate(-9deg);
	-o-transform: rotate(-9deg);
	-ms-transform: rotate(-9deg);
	transform: perspective(1px) rotate(-9deg);
}

body.ie6 #explanation2,
body.ie7 #explanation2,
body.ie8 #explanation2 {
   background: white;

   filter: progid:DXImageTransform.Microsoft.Chroma(
   				Color="#ffffff"),
   		   progid:DXImageTransform.Microsoft.Matrix(
	            M11=0.9876883405951378,
	            M12=0.15643446504023062,
	            M21=-0.15643446504023062,
	            M22=0.9876883405951378,
	            SizingMethod='auto expand');


   /*
    * To make the transform-origin be the middle of
    * the object.    Note: These numbers
    * are approximations.  For more accurate results,
    * use Internet Explorer with this tool.
    */
   margin-left: -7px; 
   margin-top: -54px;
    padding-top: 3px;
	padding-bottom: 10px;
	
}

#explanation3 {
	top: 200px;
	left: 380px;
	width: 400px;
	height: 68px;
	border: solid 1px #666666;
	padding: 10px;
	background: white;
	box-shadow: 5px 5px 0px #cccccc;
	-moz-box-shadow: 5px 5px 0px #cccccc;
	-webkit-box-shadow: 5px 5px 0px #cccccc;
}

body.ie6 #explanation3,
body.ie7 #explanation3,
body.ie8 #explanation3 {
	zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#cccccc);
}

.entry img {
	border: none;
}

#pngBox {
	overflow: hidden;
}

table.dataTable tbody td {
	padding: 0;
	
}
table.dataTable tbody td img,
table.dataTable tbody td canvas
 {
	margin: 0;
	position: relative;
	left: -80px;
}

table.dataTable tbody td div {
	position: relative;
	width: 416px;
	overflow: hidden;
}

.centered {
	width: 500px;
	margin: 0 auto;
	position: relative;
}

.ghost {
    background: url("/tests/cssSandpaper/images/background.gif") repeat scroll 0 0 transparent;
    height: 333px;
    position: relative;
}

.ghost img {
	position: absolute;
	margin: 0 auto;
	opacity: 0.5;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
	
}

.inFront {
	margin-top: -333px;
}

.point {
    background: url("/blog/wp-content/uploads/2011/10/crosshairs.png") repeat scroll 0 0 transparent;
    border: 0 solid blue;
    font-size: 20px;
    height: 35px;
    margin-left: -19px;
    margin-top: -18px;
    padding: 0;
    position: absolute;
    width: 35px;
	z-index: 10;
}

.point span {
	color: white;
	display: block;
	width: 100px;
	
	text-shadow: 2px 2px 1px black;
}

body.ie6 .point span,
body.ie7 .point span,
body.ie8 .point span,
body.ie9 .point span {
	background-color: #333333;
	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#333333)
		    progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=black);
}

body.ie6 #pt1.point span,
body.ie7 #pt1.point span,
body.ie8 #pt1.point span,
body.ie9 #pt1.point span {
	background-color: #808080;
	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#808080)
		    progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=black);
}

#pt1 span {
	margin-top: 40px;
	margin-left: -50px;
}

#pt2 span {
	margin-left: -80px;
	margin-top: -10px;
}

#pt3 span {
	margin-left: 40px;
	margin-top: -5px;
}

#pt4 span {
	margin-left: 40px;
	margin-top: 5px;	
}


table.dataTable td {
	background: url("/tests/cssSandpaper/images/background.gif") repeat scroll 0 0 transparent;
	
	width: 50%;
}