railsfrance/railsfrance.org

/* =============================================================================
   IMPORT GLOBAL VAR
   ========================================================================== */
@import "variables";

/* =============================================================================
   THE CONTENT: QUESTIONS LISTING
   ========================================================================== */
.questionList{
  aside{
    vertical-align:top;
    display:inline-block;
    height: 67px;
    margin: 0;
    position: relative;
    width: 180px;
    background: -webkit-radial-gradient(right center, ellipse farthest-side, rgba(73, 2, 8, 0.1) 20%, rgba(73, 2, 8, 0) 100%);
    background: -moz-radial-gradient(right center, ellipse farthest-side, rgba(73, 2, 8, 0.1) 20%, rgba(73, 2, 8, 0) 100%);
    background: -o-radial-gradient(right center, ellipse farthest-side, rgba(73, 2, 8, 0.1) 20%, rgba(73, 2, 8, 0) 100%);
    background: -ms-radial-gradient(right center, ellipse farthest-side, rgba(73, 2, 8, 0.1) 20%, rgba(73, 2, 8, 0) 100%);
    background: radial-gradient(right center, ellipse farthest-side, rgba(73, 2, 8, 0.1) 20%, rgba(73, 2, 8, 0) 100%);
  }
  article{
    display:inline-block;
    overflow:hidden;
    width:760px;
    padding-left:10px;
    text-align:justify;
  }
  .questionsListTitle{
    margin-top:0;
    color:#400404;
    -webkit-transition: color 0.8s ease 0;
    -moz-transition: color 0.8s ease 0;
    -o-transition: color 0.8s ease 0;
    -ms-transition: color 0.8s ease 0;
    transition: color 0.8s ease 0;
    &:hover{
      color:#a51515;
    }
  }
  .votes{
    display:inline-block;
    vertical-align:top;
    text-align:center;
    font-family:$font-oswald;
    font-size:1.5em;
    color:$white;
    background:image-url('panels-sprite.png') top left no-repeat;
    padding-top:10px;
    width:50px;
    height:57px;
    span{
      font-size:0.6em;
    }
  }
  .views{
    @extend .votes;
    background-position:-50px top;
  }
  .answers{
    @extend .votes;
    background-position:-100px top;
  }
}

.questionDescription{
  font-family:$font-verdana;
}

.postHourUser{
  font-family:$font-oswald;
  text-align:right;
  color: $red;
  &:before{
    content:image-url('hourglass.png');
    vertical-align: middle;
  }
  span{
    color: #66B5BE;
  }
  a{
    color:$red;
    &:hover{
      color:$red;
    }
  }
  img{
    border: 2px solid #8B0B0B;
    vertical-align: middle;
  }
}

/* =============================================================================
   THE CONTENT: QUESTIONS TAGS
   ========================================================================== */
.questionTag{
  display:inline-block;
  background: image-url('questions/background-tag.png') center right no-repeat;
  font-family:$font-oswald;
  height:20px;
  line-height:20px;
  color:$white !important;
  padding: 0 18px 0 8px;
  margin-right:5px;
  font-size:0.8em;
  &:hover{
    color:$white !important;
    text-decoration:underline;
  }
}

/* =============================================================================
   THE CONTENT: QUESTIONS SHOW
   ========================================================================== */
.votesContainer{
  vertical-align:top;
  display: inline-block;
  width:60px;
}

.voteUp{
  display:block;
  width:50px;
  height:34px;
  background:image-url('panels-sprite.png') 0 -67px no-repeat;
  text-indent:-9999px;
  outline:none;
  &:hover{
    background-position: 0 -101px;
  }
  &.disabled{
    outline:none;
    background-position: 0 -101px;
  }
}

.voteDown{
  @extend .voteUp;
  background-position:-50px -67px;
  &:hover{
    background-position:-50px -101px;
  }
  &.disabled{
    background-position:-50px -101px;
  }
}

.votesNumber{
  width:50px;
  height:20px;
  line-height:20px;
  background:$white;
  font-family:$font-oswald;
  text-align:center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 1px 1px 2px 0 $black inset;
  -moz-box-shadow: 1px 1px 2px 0 $black inset;
  box-shadow: 1px 1px 2px 0 $black inset;
  border-radius: 4px;
  margin:5px 0;
}

#theQuestion{
  display:inline-block;
  width:870px;
  padding-left:20px;
  border-left: 2px solid #A07E70;
  overflow:hidden;
  min-height:100px;
  font-family:$font-verdana;
  hgroup h1{
    font-family: $font-steel;
    color:$darkRed;
    text-transform:uppercase;
    font-size:2em;
    margin-top:0;
  }
}
/* =============================================================================
   THE CONTENT: QUESTIONS ANSWERS
   ========================================================================== */
#questionAnswer{
  background:image-url('questions/anwser-separation.png')top center no-repeat;
  margin-top:20px;
  padding-top:30px;
}

.answersList{
  article{
    font-family:$font-verdana;
    display:inline-block;
    width:870px;
    padding-left:20px;
    border-left: 2px solid #A07E70;
    min-height:126px;
    overflow:hidden;
  }
  .validated{
    background: #dceddc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
}

.answerForm{
  margin-top:20px;
}

.questionForm{
  background:image-url('here.png') right 88px no-repeat;
}

.answerAccept{
  width:50px;
  height:16px;
  display:block;
  margin-top:10px;
  text-indent:-9999px;
  background:image-url('panels-sprite.png') -100px -67px no-repeat;
  &:hover{
    background-position:-100px -83px;
  }
}
/* =============================================================================
   THE CONTENT: ISOTOPES TAGS
   ========================================================================== */
.isotope {
  text-align:center;
  color:#ddc8a2;
  -o-transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -o-transition-property: height, width;
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width;
  .isotope-item {
    font-family:$font-oswald;
    display:inline-block;
    width:200px;
    height:60px;
    margin:10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    -o-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -o-transition-property: -webkit-transform, opacity;
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
  }
  a{
    color:#ddc8a2;
    display:block;
    font-size:1.2em;
    border-bottom: 1px dashed #060202;
    text-transform: capitalize;
    padding:3px 0 5px 0;
    &:hover{
      text-decoration:underline;
    }
  }
  p{
    text-align:center;
    margin-top:5px;
    padding:0 10px;
  }
  .red {
  background: #8d1515;
  background: -moz-linear-gradient(top, #8d1515 0%, #450707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8d1515), color-stop(100%,#450707));
  background: -webkit-linear-gradient(top, #8d1515 0%,#450707 100%);
  background: -o-linear-gradient(top, #8d1515 0%,#450707 100%);
  background: -ms-linear-gradient(top, #8d1515 0%,#450707 100%);
  background: linear-gradient(top, #8d1515 0%,#450707 100%);
  }
  
  .blue {
    background: #65b2bb;
    background: -moz-linear-gradient(top, #65b2bb 0%, #0d555e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#65b2bb), color-stop(100%,#0d555e));
    background: -webkit-linear-gradient(top, #65b2bb 0%,#0d555e 100%);
    background: -o-linear-gradient(top, #65b2bb 0%,#0d555e 100%);
    background: -ms-linear-gradient(top, #65b2bb 0%,#0d555e 100%);
    background: linear-gradient(top, #65b2bb 0%,#0d555e 100%);
  }
  
  .brown{
    background: #755e4e;
    background: -moz-linear-gradient(top, #755e4e 0%, #3a3027 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#755e4e), color-stop(100%,#3a3027));
    background: -webkit-linear-gradient(top, #755e4e 0%,#3a3027 100%);
    background: -o-linear-gradient(top, #755e4e 0%,#3a3027 100%);
    background: -ms-linear-gradient(top, #755e4e 0%,#3a3027 100%);
    background: linear-gradient(top, #755e4e 0%,#3a3027 100%);
  }
}