@charset "utf-8";





/* reset  */

html, body, div, p, ul, li, a, img, h1, h2, h3, h4, h5, h6, small, a img, span, input, form, cite, textarea {
     margin:0;
	 border:0;
	 padding:0;
	 text-decoration:none;
	 }
body {
    background:url(images/pixel_bg.jpg) fixed;   /* bg tile sourced here http://www.backgroundlabs.com/detail/link-163.html   thank-you  */
	font-family:Courier New, Courier New, Courier, monospace;
	color:#000;
	}
p.ie {
    display:none;
	margin:200px;
	font-size:3em;
	}
p.ie a {
    color:#009900;
	}
div.wrapper {
    width:1000px;
	height:1000px;
	margin:50px auto 0 auto;
	position:relative;
	}
div.wrapper_2{
    width:1000px;
	height:400px;
	margin:120px auto 0 auto;
	position:relative;
	}
div.wrapper_2 h2:nth-of-type(1) {
    color:#000;
	opacity:0.8;
	font-size:6em;
	text-align:center;
	}
div.wrapper_2 h2:nth-of-type(2) {
    color:#000;
	font-size:5px;
	text-align:center;
	clear:both;
	margin-top:40px;
	}

div.square { 
     width:400px;
	 height:400px;
	 position:absolute;
	 }
	 

div.square:nth-of-type(1) {
     left:300px;
	 top:0px;
	 z-index:12;
     }  
div.square:nth-of-type(2) {
     left:400px;
	 top:100px;
	 z-index:11;
     }  
div.square:nth-of-type(3) {
     left:500px;
	 top:200px;
	 z-index:10;
     }  
div.square:nth-of-type(4) {
     left:600px;
	 top:300px;
	 z-index:9;
     }
div.square:nth-of-type(5) {
     left:500px;
	 top:400px;
	 z-index:8;
     }  
div.square:nth-of-type(6) {
     left:400px;
	 top:500px;
	 z-index:7;
     }  
div.square:nth-of-type(7) {
     left:300px;
	 top:600px;
	 background:#0000ff;
	 z-index:6;
     }  
div.square:nth-of-type(8) {
     left:200px;
	 top:500px;
	 z-index:5;
     }
div.square:nth-of-type(9) {
     left:100px;
	 top:400px;
	 z-index:4;
     }  
div.square:nth-of-type(10) {
     left:0px;
	 top:300px;
	 z-index:3;
     }  
div.square:nth-of-type(11) {
     left:100px;
	 top:200px;
	 z-index:2;
     }  
div.square:nth-of-type(12) {
      left:200px;
	 top:100px;
	 z-index:1;
     }	 
	 
	 
	 
div.square:nth-of-type(odd) {
    background:#000;
	opacity:0.7;
	}
div.square:nth-of-type(even) {
    background:#fff4de;
	opacity:0.8;
	}	
	
	
div.square:nth-of-type(odd) h1 {
    font-size:12em;
	 margin:110px auto 0 auto;
	 color:#fff;
	 display:none;
	 text-align:center;
	 }
div.square:nth-of-type(even) h1 {
    font-size:12em;
	 margin:110px auto 0 auto;
	 color:#000;
	 display:none;
	 text-align:center;
	 }
div.square:nth-of-type(odd):hover h1 {
    font-size:12em;
	 margin:110px auto 0 auto;
	 color:#fff;
	 display:block;
	 text-align:center;
	 }
div.square:nth-of-type(even):hover h1 {
    font-size:12em;
	 margin:110px auto 0 auto;
	 color:#000;
	 display:block;
	 text-align:center;
	 }
    
div.square:nth-of-type(odd):hover {
    background:#000;
	opacity:1;
	-webkit-animation-name: Rotate;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 30s;
	}
@-webkit-keyframes Rotate {
from {
	-webkit-transform: rotate(0deg);
	}

to {
	-webkit-transform: rotate(-360deg);

	}
}

div.square:nth-of-type(even):hover {
    background:#fff4de;
	opacity:1;
	-webkit-animation-name: Rotate2;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 30s;
	}
@-webkit-keyframes Rotate2 {
from {
	-webkit-transform: rotate(0deg);
	}

to {
	-webkit-transform: rotate(360deg);

	}