Utente:Shrikarsan/common.css

/* Potd */
#mainpage-potd a img {
 width: 100%!important;
 -ms-interpolation-mode: bicubic;
 height: auto!important;
 max-width: 700px!important;
}
 
/* Transition */
#timings_demo {
	width:500px;
	height:340px;
	margin:0 auto;
	border:1px #aaa solid;
	padding:10px;		
}
 
.test_box {
	width:50px;
	height:50px;
	margin-bottom:10px;
	background-color:#ccc;
	padding:1px;
}
 
#ease.test_box {
	-webkit-transition: all 4s ease;
	-moz-transition: all 4s ease;
	-o-transition: all 4s ease;
	-webkit-transition: all 4s ease; 
	transition: all 4s ease;
	background-color:#f00;
}
 
#ease-in.test_box {
	-webkit-transition: all 4s ease-in;
	-moz-transition: all 4s ease-in;
	-o-transition: all 4s ease-in;
	-webkit-transition: all 4s ease-in;
	transition: all 4s ease-in;
	background-color:#0f0;
}
 
#ease-out.test_box {
	-webkit-transition: all 4s ease-out; 
	-moz-transition: all 4s ease-out;
	-o-transition: all 4s ease-out;
	-webkit-transition: all 4s ease-out;
	transition: all 4s ease-out;
	background-color:#00f;
}
 
#ease-in-out.test_box {
	-webkit-transition: all 4s ease-in-out;
	-moz-transition: all 4s ease-in-out;
	-o-transition: all 4s ease-in-out;
	-webkit-transition: all 4s ease-in-out;
	transition: all 4s ease-in-out;
	background-color:#ff0;
}
 
#linear.test_box {
	-webkit-transition: all 4s linear;
	-moz-transition: all 4s linear;
	-o-transition: all 4s linear;
	-webkit-transition: all 4s linear;
	transition: all 4s linear;
	background-color:#f0f;
}
 
#timings_demo:hover .test_box, #timings_demo.hover_effect .test_box {
	margin-left:440px;	
}
 
/* Transform */
#transDemo2 div {
	height:100px;
	width:100px;
	border:1px red solid;
	margin:10px auto;
	text-align:center;
	-webkit-transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
	transition: all 2s ease-in-out;
	font-size:30px;
}
 
#transDemo2 div:hover, #transDemo2 div.hover_effect {
	-webkit-transform:rotate(720deg) scale(2,2);
	-moz-transform:rotate(720deg) scale(2,2);
	-o-transform:rotate(720deg) scale(2,2);	
}
 
/* Animation */
@-webkit-keyframes glow {
	0% {
		-webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
		border-color: rgba(0,0,255,0.5); 		
	}
	100% {
		-webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
		border-color: rgba(0,0,255,1.0); 
	}
}
 
#animationDemo2 {
	width:255px;
	margin:10px auto;
}
#animationDemo2 button {
	width: 255px;
	height: 35px;
	background: #cde; 
	border: 2px solid #ccc; 
	border-color: rgba(0,0,255,0.5); 
	font-size:18px;
	color: #000; 
	text-shadow: rgba(20, 20, 20, 0.5) 1px 1px 5px;
	text-align: center; 
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;				
	border-radius: 16px;
	-webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
	}
 
#animationDemo2 button:hover, #animationDemo2 button.hover_effect  {
	background-color:#cce;
	-webkit-animation-name: glow;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;	
}	
 
 
@-webkit-keyframes resize {
	0% {
		padding: 0;
	}
	50% {
		padding: 0 20px;
		background-color:rgba(255,0,0,0.2);		
	}
	100% {
		padding: 0 100px;
		background-color:rgba(255,0,0,0.9);
	}
}
 
#animationDemo {
	height:100px;
	width:500px;
	margin:0 auto;
}
 
#animationDemo #box {
	height:50px;
	width:50px;
	margin:0 auto;
	border:1px red solid;
	background-color:rgba(255,0,0,0.7);
}
 
#animationDemo:hover #box, #animationDemo.hover_effect #box {
	-webkit-animation-name: resize;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 4;
	-webkit-animation-direction: alternate;	
}
 
/* Numeri */
    #container {
      width: 100%;
      height: 700px;
      -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
      -webkit-perspective-origin: 50% 225px;
    }
    #stage {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 2s;
      -webkit-transform-style: preserve-3d;
    }
 
    #shape {
      position: relative;
      top: 160px;
      margin: 0 auto;
      height: 200px;
      width: 200px;
      -webkit-transform-style: preserve-3d;
    }
 
    .plane {
      position: absolute;
      height: 200px;
      width: 200px;
      border: 1px solid white;
      -webkit-border-radius: 12px;
      -webkit-box-sizing: border-box;
      text-align: center;
      font-family: Times, serif;
      font-size: 124pt;
      color: black;
      background-color: rgba(255, 255, 255, 0.6);
      -webkit-transition: -webkit-transform 2s, opacity 2s;
      -webkit-backface-visibility: hidden;
    }
 
    #shape.backfaces .plane {
      -webkit-backface-visibility: visible;
    }
 
    #shape {
      -webkit-animation: spin 8s infinite linear;
    }
 
    @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(-360deg); }
    }
 
    /* ---------- cube styles ------------- */
    .cube > .one {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
    }
 
    .cube > .two {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
    }
 
    .cube > .three {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
    }
 
    .cube > .four {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
    }
 
    .cube > .five {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
    }
 
    .cube > .six {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
    }
 
 
    .cube > .seven {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
    }
 
    .cube > .eight {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
    }
 
    .cube > .nine {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
    }
 
    .cube > .ten {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
    }
 
    .cube > .eleven {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
    }
 
    .cube > .twelve {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
    }
 
    /* ---------- ring styles ------------- */
    .ring > .one {
      -webkit-transform: translateZ(380px);
    }
 
    .ring > .two {
      -webkit-transform: rotateY(30deg) translateZ(380px);
    }
 
    .ring > .three {
      -webkit-transform: rotateY(60deg) translateZ(380px);
    }
 
    .ring > .four {
      -webkit-transform: rotateY(90deg) translateZ(380px);
    }
 
    .ring > .five {
      -webkit-transform: rotateY(120deg) translateZ(380px);
    }
 
    .ring > .six {
      -webkit-transform: rotateY(150deg) translateZ(380px);
    }
 
    .ring > .seven {
      -webkit-transform: rotateY(180deg) translateZ(380px);
    }
 
    .ring > .eight {
      -webkit-transform: rotateY(210deg) translateZ(380px);
    }
 
    .ring > .nine {
      -webkit-transform: rotateY(-120deg) translateZ(380px);
    }
 
    .ring > .ten {
      -webkit-transform: rotateY(-90deg) translateZ(380px);
    }
 
    .ring > .eleven {
      -webkit-transform: rotateY(300deg) translateZ(380px);
    }
 
    .ring > .twelve {
      -webkit-transform: rotateY(330deg) translateZ(380px);
    }
 
    .controls {
      width: 80%;
      margin: 0 auto;
      padding: 5px 20px;
      -webkit-border-radius: 12px;
      background-color: rgba(255, 255, 255, 0.5);
    }
    .controls > div {
      margin: 10px;
    }