/*
 * Plugin Name: Flowt for WordPress
 * Plugin URI: http://www.github.com/magicink/flowt
 * Author: Brandon Tom
 * Author URI: http://www.brandontom.com/
 * License: MIT
 */
 
/* Colors */
$holywater: rgb(205,218,236);
$richardo: rgb(194,212,236);
$eggplant: rgb(95,95,95);
$dryblood: rgb(48,33,30);
$lightsilver: rgb(242,242,242);
$khakis: rgb(234,234,234);

$pop-color: $holywater;
$shadow-color: $eggplant;
$average-color: $lightsilver;
$highlight-color: $richardo;
$contrast-color: $khakis;
$font-color: $dryblood;

/*
 * Handles
 */

/*
 * TODO
 * - convert globals to mixins
 */

/*
 * Globals (more or less)
 */

.ft-page,
.ft-section {
  font-family: 'Lato' !important;
  font-size: large;
  transition: all 0.5s ease;
}

.ft-page,
.ft-section {
  
  & > h1 {
    display: block;
    font-weight: 300 !important;
    margin: 1rem auto;
    padding: 1rem;
    transition: all 0.5s ease 0s;
    
    &:hover, &:focus {
      background-color: rgba($highlight-color, 0.75);
    }
  }
}

/*
 * Sections
 */

.ft-section {
  background-color: $average-color;
  border: rgba($shadow-color, 0.5) thin solid;
  margin-bottom: 1rem;
  max-width: 100%;
  padding: 1rem;
  text-align: center;
  vertical-align: top;
  
  &:hover, &:focus {
    background-color: rgba($highlight-color, 0.35);
    border: rgba($shadow-color, 0.75) thin solid;
  }
}

/*
 * Pages
 */

.ft-page{
  background-color: rgba($highlight-color, 0.75);
  border: rgba($shadow-color, 0.5) thin solid;
  border-radius: 0.25rem;
  display: inline-block;
  margin: 1rem;
  min-height: 10rem;
  padding: 0.5rem;
  transition: all 0.5s ease;
  vertical-align: top;
  width: 45%;
  
  * {
    max-width: 100%;
  }
  
  div img {
    height: auto;
    max-width: 100%;
  }
  
  ol,
  ul {
    padding: 0;
  }
  
  table {
    max-width: 100%;
    width: 100%;
  }
  
  /*
   * Fragments
   */
  .ft-fragment {
    border: thin dashed rgba($shadow-color, 0.5);
    list-style: none;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    transition: all 0.5s ease;
    &:hover {
      background-color: rgba($average-color,0.5);
    }
  }
  
  /*
   * Stacks
   */
  .stack,
  .stack-center,
  .parallax {
    background-color: rgba($average-color,0.4);
    border: thin solid rgba($shadow-color, 0.5);
    display: block;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    transition: all 0.5s ease;
    
    .stacked,
    .stacked-center {
      transition: all 0.5s ease;
      background-color: rgba($average-color,0.4);
      
      &:hover {
        background-color: rgba($average-color,1);
      }
    }
    
  }
   
  .stack {
  }
  
  .stack-center {
    text-align: center;
  }
  
  /*
   * Sub-Pages
   */
   
  .sub-page {
    background-color: rgba($shadow-color, 0.25);
    padding: 0.5rem;
    
    .sub-back {
      display: block;
      text-align:right;
    }
    
  }
}