body { background-image: url("/images/bgBlue.jpg"); background-color: #05010f; margin: 0px; font-family:tahoma; font-size: 14px; color:#FFFFFF;}
img{ border: none; }

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #339966;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

#pageWhole {
        width: 1919px;
}
#foot_Sect {
        width: 1920px;
}
#pageTop {
	background:url(headerSliver2.png) repeat-x;
	height: 90px;
}
#pageTop > #pageTopWrap {
	width: 1500px;
	margin: 0px auto;
	height: 80px;
}
#pageTop > #pageTopWrap > #pageTopLogo {
	float: left;
	height: 90px;
	width: 108px;
}
#pageTop > #pageTopWrap > #pageTopRest {
	float: left;
	height: 90px;
	width: 1392px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 {
	height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div {
	margin-top: 8px;
	padding: 4px;
	text-align:right;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a {
       font-family:Arial, Helvetica, sans-serif;
       font-size:15px;
       background:transparent;
       padding: 4px 4px;
       color:#FFFFFF;
       margin-right: 10px;
       text-decoration:none;
       border-radius: 25px;
       -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
       -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
       -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
       -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
       transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a:hover {
	background: #80FFFF;
        color:#0000FF;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 { padding:0px; border:#999; }
	height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div {
	margin-top: 1px;
	padding: 4px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a {
       font-family:Arial, Helvetica, sans-serif;
       font-size:15px;
       background:transparent;
       padding: 4px 12px;
       color:#FFFFFF;
       margin-right: 10px;
       text-decoration:none;
       border-radius: 25px;
       -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
       -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
       -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
       -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
       transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a:hover {
	background: #80FFFF;
        color:#0000FF;
}
////////////////////////////////////////////////////////////////////////
/*PAGE MIDDLE */
#pageMiddle{
	width: auto;
	height: 90px;
	postion: absolute;
}
#pageMiddle > #pageMain {
        padding-left: 110px;
        margin-left: auto;
        margin-right: 0px;
        
	height: 300px;
	
}



/* PAGE BOTTOM*/
#pageBottom {
    margin-top: 3747px;
    background: #3366FF;
    padding: 10px;
    font-size: 12px;
    color: #ffffff;
    text-align:center;
}
#pageBottomVisitor {
    margin-top: 3945px;
    background: #3366FF;
    padding: 10px;
    font-size: 12px;
    color: #ffffff;
    text-align:center;
}
#pageBottomOwner {
    margin-top: 3713px;
    background: #3366FF;
    padding: 10px;
    font-size: 12px;
    color: #ffffff;
    text-align:center;
}


/* Member Search */
#memSearch{
	float: right;
	width: 250px;
	
}
input#searchUsername{
        float: right;
	width: 250px;
	margin-top:10px;
        cursor:pointer;
        height:5px; padding:8px; 
        border:#999 1px solid; 
        border-radius: 25px; 
        font-size:16px;
        background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, white 0%, blue 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, white, blue);
	background-image: radial-gradient(45px 45px 45deg, circle cover, white 0%, blue 100%, red 95%);
}
#memSearchResults{
	display: none;
	width: 140px;
	z-index: 5000;
	background-color: #eee;
	text-align: left;
	position:fixed;
	top:83px;
	overflow-y:auto;
	padding-bottom: 2px;
	padding-left: 10px;
	max-height:100px;
}

/Group/
#groupWrapper {
    clear: left;
    width: 90%;
    margin: 0px 10px;
}

#groupList {
    float: left;
    width: 50%;
    margin: 0px 20px;
}

#groupForm {
    float: right;
    width: 30%;
}

.clear{
    clear: both;
}

#groupPosts {
    float: left;
    width:760px;
    margin: 0px 10px;
    margin-bottom: 50px;
}

#groupmembers {
    float: right;
    width: 240px;
}

div#profile_pic_box{
    float: right;
    border:#999 2px solid;
    width: 200px;
    height: 200px;
    margin: 20px 30px 0px 0px;
    overflow-y: hiden;
}

div#profile_pic_box > img{
    z-index: 2000;
    width: 200px;
}

div#profile_pic_box > a{
    display:none;
    position:absolute;
    margin: 140px 0px 0px 120px;
    z-index:4000;
    background:#00CCCC;
    padding: 5px;
    font-size: 14px;
    text-decoration:none;
    color:#60750B;
}


div#profile_pic_box > form{
    display:none;
    position:absolute;
    z-index:3000;
    padding:10px;
    opacity:0.8;
    background:#F0FEC2;
    width:180px;
    height:180px;
}

div#profile_pic_box:hover a{
    display: block;
}

textarea.newpost{
    width:75%;
    height: 40px;
    padding: 1%;
    border: #999 1px solid;
}

textarea.repost{
    width:75%;
    height: 40px;
    padding: 1%;
    border: #999 1px solid;
}

/Group Posts/
.postsWrapper {
    width: 70%;
    border: 1px solid #333333;
    margin-top: 10px;
}
.postsHead {
    width: 50%;
    background-color: #454545;
    color: #FFF;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
}
.postsBody{
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
}
.postsPic{
    float: left;
    width: 65px;
}
.postsWords {
    float: left;
    width: 590px;
}

/*blinking span*/
#span {
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
 
 
/*Index.php Button Styling*/
button.fancyButt
{
    display: block;
    font-size: 1.1em;
    padding: 2px 7px;
    margin: 0px 800px;
    color: #FF0000;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 25px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}
    
button.fancyButt:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
 
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
         
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button.fancyButt:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}

/*User.php Comments Button Styling*/
button.userButt
{
    display: block;
    font-size: 1.1em;
    padding: 2px 7px;
    margin: 0px auto 0px 330px;
    color: #FF0000;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 25px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}
    
button.userButt:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
 
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
         
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button.userButt:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}

/*User.php Friend&Block Button Styling*/
button.FrockButt
{
    display: block;
    font-size: 1.1em;
    padding: 2px 7px;
    margin: 0px 0px;
    color: #FF0000;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 25px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}
    
button.FrockButt:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
 
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
         
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button.FrockButt:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}   
    
/*editprofile.php Button Styling*/
button.editButt
{
    display: block;
    font-size: 1.1em;
    padding: 2px 7px;
    margin: 0px auto 0px 830px;
    color: #FF0000;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 25px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}
    
button.editButt:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
 
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
         
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button.editButt:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}
/*Notification.php Styling*/
button.noteButt
{
    display: block;
    font-size: 1.1em;
    padding: 2px 7px;
    margin: 0px 350px;
    color: #FF0000;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 25px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}
    
button.noteButt:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
 
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
         
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button.noteButt:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}

/*Notification.php Accept Styling*/
button.accButt
{
    display: block;
    font-size: 1.1em;
    padding: 2px 7px;
    margin: 0px 350px;
    color: #FF0000;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 25px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}
    
button.accButt:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
 
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
         
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button.accButt:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}

/*Notification.php Reject Styling*/
button.rejButt
{
    display: block;
    font-size: 1.1em;
    padding: 2px 7px;
    margin: -22px 420px;
    color: #FF0000;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 25px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}
    
button.rejButt:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
 
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
         
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button.rejButt:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}

/*sql.php Online Styling*/
button.onlineButt
{
    display: block;
    font-size: 1.1em;
    padding: 2px 7px;
    margin: -22px 420px;
    color: #FF0000;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 25px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}
    
button.onlineButt:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
 
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
         
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button.onlineButt:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}

button.pmButt
{
    display: block;
    font-size: 1.1em;
    padding: 2px 7px;
    margin: 0px 1200px;
    color: #FF0000;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 25px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}
    
button.pmButt:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
 
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
         
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button.pmButt:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}


/* Basic styles for emoticons */
span.css-emoticon {
  font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
  font-size: 0.65em;
  font-weight: bold;
  color: #000000;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
  height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
  text-align: center;
  padding: 0;
  line-height: 1.34em;
  -moz-border-radius: 1.54em;
  -webkit-border-radius: 1.54em;
  border-radius: 1.54em;
  -moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.25);
  background-color: #ffcc00;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
  -webkit-transition-property:color, background, transform;  
  -webkit-transition-duration: 1s, 1s;  
  -webkit-transition-timing-function: linear, ease-in;
}

/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
  padding-left: 0.2em;
  width: 1.34em;
  letter-spacing: 0.2em;
}

/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
   I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  span.css-emoticon.spaced-emoticon {
    width: 1.4em;
  }
}

/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
  font-size: 0.55em;
  width: 1.82em;
  height: 1.82em;
  line-height: 1.72em;
  -moz-border-radius: 1.82em;
  -webkit-border-radius: 1.82em;
  border-radius: 1.82em;
}

span.css-emoticon.small-emoticon.spaced-emoticon {
  padding-left: 0;
  width: 1.82em;
  letter-spacing: 0.1em;
}

/* Styles for additional colors */
span.css-emoticon.red-emoticon {
  background-color: #eb0542;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}

span.css-emoticon.pink-emoticon {
  background-color: #ff8fd4;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center right,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}

/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate { 
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  font-size: 0.45em;
  width: 2.2em;
  height: 2.2em;
  line-height: 1.9em;
  -moz-border-radius: 2.2em;
  -webkit-border-radius: 2.2em;
  border-radius: 2.2em;
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
}

span.css-emoticon.no-rotate.red-emoticon {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}

span.css-emoticon.no-rotate.pink-emoticon {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}

/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated { 
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
  );
}

span.css-emoticon.counter-rotated.red-emoticon {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
  );
}

span.css-emoticon.counter-rotated.pink-emoticon {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
  );
  background-image: -moz-linear-gradient(
    center left,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
  );
}

/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
    /* font-size: inherit;
    font-weight: inherit;
    vertical-align: inherit;
    line-height: inherit;
    font-family: inherit; */
    letter-spacing: inherit;
    color: inherit;
    overflow: visible;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    background: none;
    background-image: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-color: transparent;
}

span.css-emoticon.nintendo-controller {
  font-size: .8em;
  height: 1.2em;
  line-height: 1em;
  width: 2.7em;
  vertical-align: bottom;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.09, rgb(116,121,140)),
      color-stop(0.55, rgb(165,170,189))
  );
  background: -moz-linear-gradient(
      center bottom,
      rgb(116,121,140) 9%,
      rgb(165,170,189) 55%
  );
}