/*------------------------------------------------------------------
[CSS3 Stylesheet]

Project: A Pure CSS3 animated 3D Super Mario Retro Icon without images
Last change: 09.07.2010
Designed by: Andreas Jacob, http://cordobo.com/
Works in browsers: Safari 5+, limited support  Google Chrome 6+
-------------------------------------------------------------------*/

/*

  A Pure CSS3 animated 3D Super Mario Retro Icon without images
  Built on top of the "CSS 4d Framework" by Andreas Jacob

  This is an ALPHA
  Be aware of the inline-styles from hell and keep in mind this code is not in compliance with my CSS styleguide
  
  The only supported Browser is Apple Safari 5 (and Chrome 6 if their Webkit engine will be updated)

*/



body {
  background-color: #8b8078;
	color: #000;
	font: 100.1%/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

h1 {
	color: #1f1f1f;
	font: 4em/1.1 Georgia, serif;
	font-style: italic;
	margin: 60px 0 0;
	text-shadow: 1px 1px 0 #999;
}

h2 {
	font: 1.5em/1.5 Constantia, Cambria, Georgia, serif;
	font-style: italic;
	text-shadow: 1px 1px 0 #9f9f9f;
}

span.amp {
  color: #333;
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.1em;
  font-style: italic;
}

sup,
small { font-size: 0.7em; }

a { text-decoration: none; }

a:link,
a:visited { color: #eee; text-shadow: 1px 1px 0 #333; }

a:focus,
a:hover,
a:active { color: #fff; text-shadow: 1px 1px 0 #333; }

h2 a:link,
h2 a:visited { color: #fe3000; text-shadow: 1px 1px 0 #6e1c16; }

h2 a:focus,
h2 a:hover,
h2 a:active { color: #eee; text-shadow: 1px 1px 0 #333; }


#bottom,
#note p,
#top,
.wrapper { margin: 0 auto; }

#bottom,
#note p,
#top { width: 700px; }

#note {
  background-color: #aaa;
  background-color: #000;
  border-bottom: 1px solid #777;
  border-bottom: 1px solid #aaa;
  color: #fff;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#note p {
  padding: 5px 10px;
}

#note p strong {
  color: #feb644;
}

.wrapper {
  border: 1px solid #ccc;
  height: 224px;
  padding: 20px;
  position: relative;
  width: 224px;
  -webkit-box-shadow: -1px -1px 0 #666;
}

.wrapper:hover {
  background-color: #fff;
  opacity: 0.6;
  -webkit-perspective: 200;
  -webkit-transition: all 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
}

.wrapper:hover div { border: 1px solid #ddd; }

.wrapper p { margin: auto 0; }


#parent {
  height: 224px;
  margin: 0;
  width: 224px;
}

#subtext {
  height: 50px;
  margin: 10px auto;
  width: 264px;
}

#social-icons {
  clear: both;
  height: 50px;
  margin: 10px auto 40px;
  width: 264px;
}

#social-icons .left,
#social-icons .right { width: 200px; height: 50px; }

#social-icons .left { float: left; }
#social-icons .right { float: right; width: 54px; }

#mario-retro-icon,
#mario-retro-icon div { position: absolute; }


#mario-retro-icon {
  height: 224px;
  width: 224px;
  -webkit-animation: spin 6s infinite linear;
  -webkit-transform-origin: (50% 50% 0);
  -webkit-backface-visibility: visible;
  -webkit-transform-style: preserve-3d;
}


@-webkit-keyframes spin {
  from { -webkit-transform: rotateY(0); }
  to   { -webkit-transform: rotateY(360deg); }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*

CSS 4D Framework by Andreas Jacob
Author URL: http://cordobo.com/

V 0.1 (Alpha)


A small CSS framework to create 3D animations with CSS
Early Alpha

*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.h1 { height: 14px; }
.h2 { height: 28px; }
.h3 { height: 42px; }
.h4 { height: 56px; }
.h5 { height: 70px; }
.h6 { height: 84px; }
.h7 { height: 98px; }
.h8 { height: 112px; }
.h9 { height: 126px; }
.h10 { height: 140px; }
.h11 { height: 154px; }
.h16 { height: 224px; }

.w1 { width: 14px; }
.w2 { width: 28px; }
.w3 { width: 42px; }
.w4 { width: 56px; }
.w5 { width: 70px; }
.w6 { width: 84px; }
.w7 { width: 98px; }
.w8 { width: 112px; }
.w9 { width: 126px; }
.w10 { width: 140px; }
.w11 { width: 154px; }

.l-16 { left: -224px; }
.l-9 { left: -126px; }
.l-6 { left: -84px; }
.l-5 { left: -70px; }
.l-4 { left: -56px; }
.l-3 { left: -42px; }
.l-2 { left: -28px; }
.l-1 { left: -14px; }
.l0 { left: 0; }
.l1 { left: 14px; }
.l2 { left: 28px; }
.l3 { left: 42px; }
.l4 { left: 56px; }
.l5 { left: 70px; }
.l6 { left: 84px; }
.l7 { left: 98px; }
.l8 { left: 112px; }
.l9 { left: 126px; }
.l10 { left: 140px; }
.l11 { left: 154px; }
.l12 { left: 168px; }
.l13 { left: 182px; }
.l14 { left: 196px; }
.l15 { left: 210px; }
.l16 { left: 224px; }
.l17 { left: 238px; }

.t0 { top: 0; }
.t1 { top: 14px; }
.t2 { top: 28px; }
.t3 { top: 42px; }
.t4 { top: 56px; }
.t5 { top: 70px; }
.t6 { top: 84px; }
.t7 { top: 98px; }
.t8 { top: 112px; }
.t9 { top: 126px; }
.t10 { top: 140px; }
.t11 { top: 154px; }
.t12 { top: 168px; }
.t13 { top: 182px; }
.t14 { top: 196px; }
.t15 { top: 210px; }

.tz-5 { -webkit-transform: translateZ(-70px); }
.tz-4 { -webkit-transform: translateZ(-56px); }
.tz-3 { -webkit-transform: translateZ(-42px); }
.tz-2 { -webkit-transform: translateZ(-28px); }
.tz-1 { -webkit-transform: translateZ(-14px); }
.tz1 { -webkit-transform: translateZ(14px); }
.tz2 { -webkit-transform: translateZ(28px); }
.tz3 { -webkit-transform: translateZ(42px); }
.tz4 { -webkit-transform: translateZ(56px); }
.tz5 { -webkit-transform: translateZ(70px); }
.tz6 { -webkit-transform: translateZ(84px); }
.tz7 { -webkit-transform: translateZ(98px); }
.tz8 { -webkit-transform: translateZ(112px); }
.tz9 { -webkit-transform: translateZ(126px); }
.tz10 { -webkit-transform: translateZ(140px); }
.tz11 { -webkit-transform: translateZ(154px); }
.tz12 { -webkit-transform: translateZ(168px); }
.tz13 { -webkit-transform: translateZ(182px); }


.tx-5 { -webkit-transform: translateX(-70px); }
.tx-4 { -webkit-transform: translateX(-56px); }
.tx-3 { -webkit-transform: translateX(-42px); }
.tx-2 { -webkit-transform: translateX(-28px); }
.tx-1 { -webkit-transform: translateX(-14px); }
.tx1 { -webkit-transform: translateX(14px); }
.tx2 { -webkit-transform: translateX(28px); }
.tx3 { -webkit-transform: translateX(42px); }
.tx4 { -webkit-transform: translateX(56px); }
.tx5 { -webkit-transform: translateX(70px); }
.tx6 { -webkit-transform: translateX(84px); }
.tx7 { -webkit-transform: translateX(98px); }
.tx8 { -webkit-transform: translateX(112px); }
.tx9 { -webkit-transform: translateX(126px); }
.tx10 { -webkit-transform: translateX(140px); }
.tx11 { -webkit-transform: translateX(154px); }
.tx12 { -webkit-transform: translateX(168px); }
.tx13 { -webkit-transform: translateX(182px); }


.rot0 { -webkit-transform: rotateY(0deg); }
.rot90 { -webkit-transform: rotateY(90deg); }
.rot-90 { -webkit-transform: rotateY(-90deg); }
.rot180 { -webkit-transform: rotateY(180deg); }


/* Orange, Skin color, Green, DEBUG */
.o { background-color: #fe3000; }
.s { background-color: #feb644; }
.g  { background-color: #a48b00; }
.y { background-color: yellow; } /*  DEBUG */
.pink { background-color: pink; } /*  DEBUG */