@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-sans font-light;
  }
}

@layer components {
  /* Post Top Margin */
  .post-top td {
    @apply mt-10;
  }
  tr.post-top td, footer {
    @apply pt-10;
  }

  /* Rating System */
  .rating_wrapper {
    @apply flex items-center space-x-1 h-4 overflow-hidden;
  }
  .sp_rating {
    @apply text-[11px] leading-[1.7em] text-gray-600 block;
  }
  .rating {
    @apply flex items-center pr-1;
  }
  .base {
    @apply w-[85px] h-4 bg-no-repeat bg-left bg-cover pr-1 overflow-hidden;
    background-image: url('/ratings.gif');
  }
  .average {
    @apply w-[85px] h-4 bg-no-repeat bg-left text-[0px];
    background-image: url('/ratings.gif');
    background-position: 0 -16px;
  }
  .votes {
    @apply pr-1;
  }
  .score {
    @apply relative w-[85px] h-4 bg-no-repeat bg-left;
    background-image: url('/ratings.gif');
  }
  .score a {
    @apply absolute top-0 left-0 w-full h-full text-[0px];
  }
  .score1 {
    @apply w-[20%] z-[55];
  }
  .score2 {
    @apply w-[40%] z-[54];
  }
  .score3 {
    @apply w-[60%] z-[53];
  }
  .score4 {
    @apply w-[80%] z-[52];
  }
  .score5 {
    @apply w-[100%] z-[51];
  }
  .score a:hover {
    background-image: url('/ratings.gif');
    background-position: bottom right;
  }
  .status {
    @apply h-4 w-[150px] overflow-hidden relative;
  }
  .score_this {
    @apply h-full overflow-hidden;
  }
  .score_this a {
    @apply text-orange-500;
  }
  .drp {
    @apply w-[85px] h-[15px] bg-white bg-no-repeat bg-left;
    background-image: url('/ratings.gif');
  }

  /* Rating Title */
  .rating h6 {
    @apply text-gray-600 text-[11px] ml-[100px];
  }
}