/*
     FILE ARCHIVED ON 15:22:54 May 13, 2013 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 18:45:06 Jun 17, 2015.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/

/* Very messy in here */
#container {min-width:63em;max-width:82em;margin:0 auto;position: relative;background-color: white;
box-shadow: 0 0 1em 1em gray;
-webkit-box-shadow: 0 0 1em 1em gray;


}
#outer {opacity:1}

#footer {background:#ddd;padding:2em;margin:0;text-align:center;}

body {background-color: white;
background: -ms-linear-gradient(-90deg, white 10em, #abf) center bottom fixed;
background: -moz-linear-gradient(-90deg, white 10em, #abf) center bottom fixed;
background: -webkit-gradient(linear, center top, center bottom, from(white), to(#abf)) center bottom fixed;
margin: 0;}

#header {
	position: absolute;
	height: 20em;width:100%;
	background: url(images/swirl-blue-dark4.png) no-repeat;
	background-size:100% 100%;/**/
	-webkit-perspective: 1800;/**/
}

#wrap {padding-top: 20em;margin-left:auto;margin-right:auto;width:62em;}



ul li, ul img {float:left;width:15.625em;height:12.5em}

ul li {width:25em;list-style:none;border: 0.5em solid silver; border-radius:2em;padding:0.5em;margin:1em;margin-bottom:2em;}
ul img {margin-right: 1em;border-radius:1em;border:none;}
ul a {float:left;}
h1, h2 {text-align: center;}
p, h2 {clear:left;margin-left: 2em;margin-right: 2em;}

.home {position:absolute;top:0; height: 20em;width: 20em;z-index:1;}


/* header */

#frame {
margin-top: 5em;margin-left:5em;
background:/*white*/;
	width: 10em;
	height: 10em;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: brand1 10s infinite linear;
	-moz-transform-style: preserve-3d;
	-moz-animation: brand1 10s infinite linear;
	-ms-transform-style: preserve-3d;
	-ms-animation: brand1 10s infinite linear;
	-o-transform-style: preserve-3d;
	-o-animation: brand1 10s infinite linear;
	transform-style: preserve-3d;
	animation: brand1 10s infinite linear;

}
@-webkit-keyframes brand1 {
	from { -webkit-transform: rotateY(0deg); }
	to   { -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes brand1 {
	from { -moz-transform: rotateY(0deg); }
	to   { -moz-transform: rotateY(360deg); }
}
@-ms-keyframes brand1 {
	from { -ms-transform: rotateY(0deg); }
	to   { -ms-transform: rotateY(360deg); }
}
@-o-keyframes brand1 {
	from { -o-transform: rotateY(0deg); }
	to   { -o-transform: rotateY(360deg); }
}
@keyframes brand1 {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(360deg); }
}
.parent {
	width: 10em;
	height: 10em;
 	background: /*#666*/;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.parent2 {
 	background: /*#bbb*/;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.parent {-webkit-transform: rotateX(55deg);}
.parent2 {-webkit-transform: rotateY(45deg);}
.parent {-moz-transform: rotateX(55deg);}
.parent2 {-moz-transform: rotateY(45deg);}
.parent {-ms-transform: rotateX(55deg);}
.parent2 {-ms-transform: rotateY(45deg);}
.parent {-o-transform: rotateX(55deg);}
.parent2 {-o-transform: rotateY(45deg);}
.parent {transform: rotateX(55deg);}
.parent2 {transform: rotateY(45deg);}

#inner div {
	position: absolute;
	height:10em;
	width:10em;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}


.cube-1 {
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	-o-transform: rotateY(90deg);
	transform: rotateY(90deg);
	right:-5em;background:navy;/*red*/
background: rgba(127,127,255,0.3);
}
.cube-2 {
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	-o-transform: rotateY(90deg);
	transform: rotateY(90deg);
	left:-5em;background:aqua;/**/
background: rgba(127,255,127,0.3);

}



.cube-3 {
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	-ms-transform: rotateX(90deg);
	-o-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform: translateZ(5em);
	-moz-transform: translateZ(5em);
	-ms-transform: translateZ(5em);
	-o-transform: translateZ(5em);
	transform: translateZ(5em);
background:purple;/*yellow*/
background: rgba(127,255,255,0.3);
}


.cube-4 {
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	-ms-transform: rotateX(90deg);
	-o-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform: translateZ(-5em);
	-moz-transform: translateZ(-5em);
	-ms-transform: translateZ(-5em);
	-o-transform: translateZ(-5em);
	transform: translateZ(-5em);
background:blue;/**/
background: rgba(0,255,255,0.3);
}
.cube-5 {
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	-ms-transform: rotateX(-90deg);
	-o-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	background:violet;/*lime*/
	bottom:-15em;
background: rgba(0,255,127,0.3);
}
.cube-6 {
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	-ms-transform: rotateX(-90deg);
	-o-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
background:silver;/*fuchsia*/
	top:-5em;
background: rgba(127,127,127,0.3);
}

#header img {	
position: absolute;top:50%;margin-top:-1em;color:white;text-align:center;
/*-webkit-transform: rotateX(-55deg);*/
	-webkit-animation: brand2 10s infinite linear;
	-moz-animation: brand2 10s infinite linear;
	-ms-animation: brand2 10s infinite linear;
	-o-animation: brand2 10s infinite linear;
	animation: brand2 10s infinite linear;
}
#header span {	
/*-webkit-transform: rotateY(-45deg);*/
}
@-webkit-keyframes brand2 {
	from { -webkit-transform: rotateY(0deg); }
	50% { -webkit-transform: rotateY(-180deg); }
	to   { -webkit-transform: rotateY(-360deg); }
}
@-moz-keyframes brand2 {
	from { -moz-transform: rotateY(0deg); }
	50% { -moz-transform: rotateY(-180deg); }
	to   { -moz-transform: rotateY(-360deg); }
}
@-ms-keyframes brand2 {
	from { -ms-transform: rotateY(0deg); }
	50% { -ms-transform: rotateY(-180deg); }
	to   { -ms-transform: rotateY(-360deg); }
}
@-o-keyframes brand2 {
	from { -o-transform: rotateY(0deg); }
	50% { -o-transform: rotateY(-180deg); }
	to   { -o-transform: rotateY(-360deg); }
}
@keyframes brand2 {
	from { transform: rotateY(0deg); }
	50% { transform: rotateY(-180deg); }
	to   { transform: rotateY(-360deg); }
}