/* 
 *
 * CSS for rewrite of The Other End, by Kevin Hamilton
 * http://complexfields.org/past-projects/telepresence/the-other-end
 * code by grosser (w/ some help from stackoverflow)
 * nov 2013
 * 
 */

body { background:#999; }

h3 { 
    text-align:center; 
    font-family:"Merriweather Sans","HelveticaNeue-Light","Helvetica",sans-serif; 
    color:#626262; 
    padding-top:40px;
    font-size:24px;
    letter-spacing:-2px;
}

#you  { float:left; }
#them { float:right; }


#container{
   position: absolute;
   top: 50%;
   margin-top: -200px;
   left: 0;
   width: 100%;
}

#content {
   width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.bevelbutton{
    position:relative;
    width:130px;
    height:130px;
    background:#222;
    border-radius:50%;
    margin:80px;
}

/* outside bevel */
.bevelbutton:before{
    position:absolute;
    content:'';
    /* left:-44px;top:-44px;bottom:-44px;right:-44px; */
    left:-34%;top:-34%;bottom:-34%;right:-34%;
    background:linear-gradient(90deg, #222, #ccc);
    background:-webkit-linear-gradient(left, #222, #ccc);
    border-radius:50%;
    z-index:-2;
    box-shadow:-30px 0  4px -2px #555;
}

/* inside bevel */
.bevelbutton:after{
    position:absolute;
    /* left:-18px; top:-18px; bottom:-18px; right:-18px; */
    left:-13.8%; top:-13.8%; bottom:-13.8%; right:-13.8%;
    background:linear-gradient(270deg, #222, #bbb);
    background:-webkit-linear-gradient(right, #222, #bbb);
    content:'';
    border-radius:50%;
    z-index:-1;
}


 /* gradient backgrounds created with http://www.colorzilla.com/gradient-editor/ */

.dark {
background: #430100; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #430100 0%, #16040a 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#430100), color-stop(100%,#16040a)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #430100 0%,#16040a 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #430100 0%,#16040a 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #430100 0%,#16040a 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #430100 0%,#16040a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#430100', endColorstr='#16040a',GradientType=1 ); /* IE6-9 fallback */
}        

.light {
background: #ff0000; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #ff0000 0%, #ff0000 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ff0000), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #ff0000 0%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #ff0000 0%,#ff0000 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #ff0000 0%,#ff0000 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #ff0000 0%,#ff0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 fallback */
}