/* Source: http://isithackday.com/html5-rimshot/ */

#rim {
	width: 60%;

}

#rim:after {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 60%;
	border-radius: 50%;
    background:#c00;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f00), to(#600));
    background:-moz-linear-gradient(left top, #f00, #600 100%);
}

#rim span {
	float: left;
	width: 90%;
	padding-top: 50%;
	line-height: 1em;
	margin-top: -0.5em;
	text-align: center;
	color: white;
    text-indent:-100000px;
    overflow:hidden;
    background:#900;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#600), to(#f00));
    background:-moz-linear-gradient(left top, #600, #f00 100%);
    border-radius:90%;
    -moz-border-radius:90%;
    -webkit-border-radius:90%;
	padding-bottom: 40%;
	margin-top: 4.0%;
	margin-left: 5%;
}

#rim:active{
   background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#600), to(#f00));
   background:-moz-linear-gradient(left top, #600, #f00 100%);
}
#rim:active span{
   background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f00), to(#600));
   background:-moz-linear-gradient(left top, #f00, #600 70%);
}

/*
#rim{
    width:200px;
    height:200px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
    background:#c00;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f00), to(#600));
    background:-moz-linear-gradient(left top, #f00, #600 100%);
    position:relative;
    border:none;
    white-space:normal;
    margin:1em auto;
    display:block;
    padding:0;
    }
    #rim:active{
      background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#600), to(#f00));
      background:-moz-linear-gradient(left top, #600, #f00 100%);
    }
    #rim:active span{
      background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f00), to(#600));
      background:-moz-linear-gradient(left top, #f00, #600 70%);
    }
    #rim span{
      display:block;
      border:none;
      position:absolute;
      margin-left:10px;
      margin-top:10px;
      width:180px;
      height:180px;
      text-indent:-300px;
      overflow:hidden;
      border-radius:90px;
      -moz-border-radius:90px;
      -webkit-border-radius:90px;
      background:#900;
      background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#600), to(#f00));
      background:-moz-linear-gradient(left top, #600, #f00 100%);
    }
*/