wahyd4/ocelots

body {
  background:url('/assets/paper.jpg');
  padding-top: 60px;
  padding-bottom: 40px;

  text-shadow: white 0 1px 0;
  font-weight: 100;
}

.correct {
  background: #090 !important;
}

.incorrect {
  background: #900 !important;
}

.avatar {
  border: 1px #ccc solid;
  width: 200px;
  height: 300px;
  float: left;
  text-align: center;
}

.avatar img {
  margin-top: 5%;
  margin-bottom: 5%;
  width: 180px;
}

.social_media img {
  margin: 5px;
}
.team-action-form{
  float:left;
  margin-left: 20px;
  margin-top:16px;
}
.clear-left{
  clear:left;
}
.clear-right{
  clear:right;
}
.clear{
  clear: both;
}
.viewable-team{
  background-color:#eee;
  border-color:#2D6987;
  border-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7AB5D3;
  -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7AB5D3;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7AB5D3;
  transition:all 1s;
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
}
.viewable-team:hover{
  background-color:#e3e3e3;
  border-shadow:inset 0 2px 2px rgba(0, 0, 0, 0.095), 0 0 10px #7AB5D3;
  -webkit-box-shadow:inset 0 2px 2px rgba(0, 0, 0,0.095), 0 0 10px #7AB5D3;
  -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.095), 0 0 10px #7AB5D3;
}
.url-font{
  color:#777;
  font-weight: bold;
}

.avatar-image{
  border-radius: 150px;
  box-shadow: 0 0 15px #333;
  transition:transform 2s;
  -moz-transition:-moz-transform 2s;
  -webkit-transition:-webkit-transform 2s;
  -o-transition:-o-transform 2s;
}
.avatar-image:hover{
  transform:rotate(36deg);
  -moz-transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  -o-transform:rotate(360deg);
}


.join-status-button{
  float: left;
  margin-left: 36px;
  margin-top: 17px;
}

.team-fliter{
  margin-left: -29px;
}
.full-name{

}

.sexy-bg{
  background: rgba(255,255,255,0.13);
  -webkit-box-shadow: 0 0 15px rgba(8, 8, 8, 0.7);
}
.image-gray{
    filter: url(filters.svg#grayscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}

.avatar-img{
  margin-right:8px;
}

.panel{
  background: #f2f2f2;
  border: solid 1px #e6e6e6;
  margin: 0 0 22px 0;
  padding: 20px;
}


.avatar-hover{
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  border-radius: 150px;
  text-align: center;
  background: rgba(14, 238, 112, 0.61);
  width: 300px;
  height: 300px;

}
.avatar-info:hover + .avatar-hover{
  display: block;
}

.con4avatar{
  width: 330px;
  position: relative;
  float: left;
  margin-left: 2em;
  margin-bottom: 2em;
}