/*
Theme Name: TFAL Theme 2009
Theme URI: http://thinkingfoaliving.org/
Description: The kickass TFAL Wordpress Theme
Version: 1.0
Author: Ian Coyle
Author URI: http://iancoyle.com/
Tags: Roads? Where we're going, we don't need roads.


    This theme was designed and programmed by the TFAL Network.



*/


/* ---------------------------------- * /

/*
 *  TABLE OF CONTENTS
 *
 *  @RESET
 *  @COLORS
 *    @COLORS:GLOBAL
 *    @COLORS:DYNAMIC
 *  @LAYOUT
 *    @LAYOUT:GRID
 *    @LAYOUT:GLOBALS
 *    @LAYOUT:COVER
 *    @LAYOUT:MASTHEAD
 *    @LAYOUT:CONTENT
 *    @LAYOUT:ENTRIES
 *    @LAYOUT:FILTERS
 *    @LAYOUT:SHELF
 *    @LAYOUT:FOOTER
 *  @PLUGINS
 *    @PLUGIN:PHOTOGALLERY
 *  @SECTIONS
 *    @SECTION:DIGEST
 *  @UI
 *    @UI:ICONS
 *    @UI:FADES
 *  @FORM
 *  @CLEAR-SELF
 *
 *
 *
 */

/* ---------------------------------- * /

/* @RESET */

html
{
  margin:         0;
  padding:        0;
  height:         100%;
  overflow-x:     hidden;
}

body
{
  margin:         0;
  padding:        0;
  min-height:     101%;
  overflow-x:     hidden;

}


*
{
  margin:         0;
  padding:        0;
  outline:        none;
}

/*body,
div,
dl,dt,dd,
ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,
form,fieldset,
input,textarea,
a,
p,blockquote,
th,td
{
  margin:         0;
  padding:        0;
  vertical-align: baseline;
}*/

img
{
 border:          0
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var
{
  font-style:     normal;
  font-weight:    normal;
}

ol,ul
{
  list-style:     none;
}

h1,h2,h3,h4,h5,h6
{
  font-size:      100%;
  font-weight:    normal;
}



/* ---------------------------------- * /

/* @COLORS */

/* @COLORS:GLOBAL */

.tfal,     .site-tfal      .dynamic-color { color:#333333}
.features, .site-features  .dynamic-color { color:#393939}
.curated,  .site-curated   .dynamic-color { color:#393939 }
.digest,   .site-digest    .dynamic-color { color:#393939 }
.shelf,    .site-shelf     .dynamic-color { color:#393939 }
.network,  .site-network   .dynamic-color { color:#393939 }


.site-tfal      .dynamic-bg    { background:#620460 }
.site-features  .dynamic-bg    { background:#620460 }
.site-curated   .dynamic-bg    { background:#333333 }
.site-digest    .dynamic-bg    { background:#ed008c }
.site-shelf     .dynamic-bg    { background:#dd3a01 }
.site-network   .dynamic-bg    { background:#fc5a02 }




/* ---------------------------------- * /

/* @LAYOUT */

body
{
  background:      #ffffff;
}

div#wrapper
{
  height:          100%;
  padding:         20px 0 0 100px;
  overflow:        hidden
}

/* @LAYOUT:GRID */

.grid1              { width: 130px; }
.grid2              { width: 300px; }
.grid3              { width: 620px; }
.grid4              { width: 940px; }

.column             { float: left; margin: 0 20px 0 0; }
.column:last-child  { margin: 0; }


/* ---------------------------------- * /

/* @LAYOUT:GLOBALS */

*
{
  line-height:    19px;
  font-family:    arial;
  font-weight:    normal;
  font-size:      14px;
  color:          #333333;
}

p
{
  margin:          0 0 21px 0;
  font-size:       14px;
  color:           #333333;
}

a
{
  text-decoration: none;
  font-style:      italic;

}

div#content .post-content a
{
  border-bottom:   1px solid #333333;
}

div#content .post-content a:hover
{
  border-bottom:   0px solid #333333;
}

h2
{
  font-size:       21px;
  line-height:     42px;
}

.headline
{
  margin:          0 0 10px 0;
  line-height:     21px;
}
.subhead
{
  margin:          0 0 21px 0;
}


.divide-self
{
  border-top:      1px solid #c8bab4;
  padding:         21px 0 0 0;
  margin:          21px 0 0 0;

}



/* ---------------------------------- * /

/* @LAYOUT:COVER */

div#covers {

}


div.cover
{
  margin:          0 0 42px 0;
  position:        relative;
  background:      #ffffff;
}



  div.cover-index
  {
    opacity:         0;
    filter:          alpha(opacity=0)
  }

  div.cover-index:first-child
  {
    opacity:         1;
    filter:          alpha(opacity=100);
  }

  div.cover h2
  {
      position:        relative;
  }

  div.cover h2,
  div.cover h2 *
  {
    font-size:     48px;
    color:         #333333;
    line-height:  48px;

  }

  span.q1
  {
    display:       block;
    position:      absolute;
    top:           0;
    left:          -30px;
  }


  div.cover h3
  {
    color:         #333333;
    margin:        21px 0 42px 0;
  }

  div.cover h4
  {
    margin:        0 0 21px 0;
    font-size:     14px;

  }

div.cover-items {
  position:         relative;
  width:            100%;
  left:             -100px;
  padding:          21px 0 0 100px;
}

  div.cover-items span
  {
    opacity:        .75;
    filter:         alpha(opacity=75);
  }

  div.cover-article
  {
    margin:          0 0 21px 0;
  }

  div.cover-article
  {
    width:            260px;
    padding:          0 40px 0 0;
  }

  div.cover-row
  {
    padding:          0 0 21px 0;
  }


/* ---------------------------------- * /

/* @LAYOUT:MASTHEAD */

div#masthead
{
  height:          100%;
}

  div#masthead h1
  {
    margin:        0 0 21px 0;
    font-size:     53px;
    line-height:   42px;
  }

  div#masthead h2
  {
    margin:        0 0 21px 0;
    font-size:     16px;
  }

  div.stubs
  {
    margin:        100px 0 0 0;
  }

  div.stub
  {
    width:         200px;
    float:         left;
    margin:        0 20px 0 0;
  }

  div.stub p
  {
    font-size:     16px;
  }



div#content
{
  background:        #ffffff;
  margin:            20px 0 0 0;
  padding:           20px 0 0 0;
  min-height:        101%;
  position:          relative;

}

div#content *
{
  xbackground:        #ffffff;
}

/* ---------------------------------- * /

/* @LAYOUT:ENTRIES */

.post
{
  min-height:        101%;
  min-width:         940px;
  overflow:          hidden;
  margin:            0 0 21px -100px;
  padding:           0 0 21px 100px;
}

  .post-image-wrapper
  {
    margin:          0 0 21px 0;
  }

  .post h2
  {
    line-height:     24px;
    margin:          0 0 6px 0;
  }

  .post-content
  {

    width:           90000px;
    min-height:      100%;
    min-height:      300px;
  }



  div#content div#post-content-preloader
  {
      background:      url(../images/loader.gif) 0 0 no-repeat;
      height:          50px;
      width:           50px;
      float:           left;
  }

  /* POST INTRO */

  .post-headings,
  .post-intro
  {
    margin:          21px 0 84px 0
  }

  .post-headings em,
  .post-intro em
  {
    display:         block;
    margin:          0 0 21px 0;
    font-size:       14px;

  }

  .post-intro h3
  {
    font-style:      italic;
    font-size:       16px;
  }


  .post-footer p a,
  .post-footer p
  {
    font-size:       12px;
  }

  * a.permalink
  {
    font-size:       12px;
    opacity:         .7;
  }

  * a.permalink:hover
  {
    opacity:          1;
  }

/* ---------------------------------- * /

/* @LAYOUT:FILTERS */

div#filters
{

  height:         0;
  width:          100%;
  overflow:       hidden;
  margin:         -1px 0 0 -100px;
  padding:        0 0 0 100px;
  z-index:        99999;
  opacity:        .9
}

  div#filters-content
  {
    margin:       21px 0 0 0;
  }

  div#filters h3,
  div#filters ul {
    margin:       0 0 21px 0;
  }

  div#filters *
  {
    color:        #ffffff;
  }



  div#filters ul.filterset li a,
  div#filters ul.filterset li span
  {
    opacity:      .5;
    filter:       alpha(opacity=50);
    background:   inherit;
  }

  div#filters ul.filterset li a:hover
  {
    opacity:      1;
    filter:       alpha(opacity=100);
  }

  div#filters ul.issuelist li
  {
    margin:       0 0 21px 0;
  }

  div#filters ul.issuelist li a.author
  {
    font-style:   normal;
  }

  .filter-title
  {
    font-style:   italic;
    xfont-size:    14px;
  }


  div#filters ul.filterset li
  {

    position:     relative;

  }

  div#filters ul.filterset li em
  {

    display:      none;
    position:     absolute;
    left:         0;
    top:          0;
    width:        7px;
    height:       7px;
    margin:       7px 0 0 -15px;
    overflow:     hidden;
    background:   url(../images/btnClose.png) 50% 50% no-repeat;
    text-indent:  -900px;
    cursor:       pointer;
  }

  div#filters ul.filterset li.active em
  {
    display:      block;
  }

  div#filters ul.filterset li.active a
  {
    opacity:      1;
    filter:       alpha(opacity:100);
  }

#nav-filter
{
  display:        none;
}

#nav-filter.active
{
  display:        block;
}

/* ---------------------------------- * /

/* @LAYOUT:PAGE */

div.page {

}

  * div.page ul,
  * div.page ol
  {
    margin:          0 0 21px 0;
  }

  div.page ol li,
  div.page ul li
  {
    margin:          0 0 0 25px;
    padding:         0 0 0 0;
    list-style:      disc;

  }

  div.page blockquote
  {
    margin:          21px 0 0 0;
    padding:         19px 0 19px 0;
    border-top:      1px solid #333333;
    font-style:      italic;
  }

.lead-column-1
{
  width:          640px;
  margin-right:   0;
}

/* ---------------------------------- * /

/* @LAYOUT:SHELF */

/* OVERRIDE */


.site-shelf .post,
.site-shelf .post-content
{
    width:           100%;
}

.site-shelf .post-mask { width: 95%}

div#shelf
{
  padding-bottom:  21px;
  margin-bottom:   21px;
  min-width: 100%;
}

  div.shelf-item
  {
    width:          160px;
    height:         210px;
    float:          left;
    text-align:     center;
    margin:         10px 0 0 0;
  }


  div.shelf-item div.shelf-post
  {
     border-bottom: 10px solid #fff;
     height:        115px;
     margin:        0 0 0 0;
     position:      relative;
     width:         100%;
  }

  div.shelf-item div.shelf-post div.shelf-post-content
  {
    position:      absolute;
    bottom:        0;
    margin:        0;
    padding:       0;
    text-align:    center;
    width:         100%;
    line-height:   0;
    font-size:     0;
  }

  div.shelf-item div.shelf-link {
    margin:        11px 0 0 0;
    text-align:    center;
  }

/* ---------------------------------- * /

/* @LAYOUT:FOOTER */

div#footer
{
  border-top:      1px solid #333333;
  background:      #ffffff;
  margin:          0 0 21px -100px;
  padding:         20px 0 20px 30px;
  min-width:       960px;
}

  div#footer *,
  .footer *
  {
    font-size:        12px;
  }

/* ---------------------------------- * /

/* @PLUGINS */

/* @PLUGINS:PHOTOGALLERY */


div.photogallery
{
  position:        relative;
  width:           300px;
  overflow:        hidden;
  cursor:          pointer;
  padding:         0 0 36px 0;
  margin:          0 0 21px 0;
}


div.photogallery-items
{
  display:         block;
  width:           1200px;
  position:        absolute;
  top:             0;
}

div.photogallery-nav
{
  position:        absolute;
  width:           100%;
  bottom:          0;
  height:          32px;
  background:      url(../images/slideshow.gif) 0 100% no-repeat;
}

  div.photogallery-nav span
  {
    display:       block;
    margin:        3px 0 0 40px;
  }

div.photogallery img
{
  display:         block;
  width:           300px;
  position:        absolute;
  top:             0;
  left:            0;
  opacity:         0;
  filter:          alpha(opacity=0);
  cursor:          pointer;
}

div.photogallery img:first-child
{

  opacity:         1;
  filter:          alpha(opacit=100);

}


/* ---------------------------------- * /

/* @SECTIONS */

/* @SECTION:DIGEST */

.site-digest h3
{
  font-style:      italic;
}

.site-digest div#digest-delicious
{
  xbackground:      transparent url(../images/preloader.gif) 0 0 no-repeat;
  min-height:      50px;
}

  div#digest-delicious div.delicious-link
  {
    margin:        0 0 40px 0;
  }

  a[rev=DeliciousLink]
  {
    text-transform: capitalize;
  }

/* ---------------------------------- * /

/* @UI */

/* @UI:ICONS */

.tfal-icon
{
  padding:          0 0 0 70px;
  width:            550px;
  background:       url(../images/tfal_footer.gif) 0 0 no-repeat;

}



div#keyboard-icon
{
  position:         absolute;
  right:            13px;
  top:              49px;
  width:            60px;
  height:           50px;
  background:       url(../images/keyboard.gif) 50% 50% no-repeat;
    cursor:           pointer;
  z-index:          8000;
}


div#content .post-content p a.tfal-video
{
  background:       url(../images/video.gif) 0 100% no-repeat;
  display:          block;
  width:            300px;
  min-height:       32px;
  border:           0;
  padding:          0 0 32px 0;
}

  div#content .post-content p a.tfal-video em
  {
    display:        block;

  }

/* @UI:FADES */

div#overlay-left
{
  width:            100px;
  height:           100%;
  position:         absolute;
  left:             -120px;
  top:              0;
  cursor:           pointer;
  z-index:          9900;
  display:          none;
}

div#overlay-right
{
  width:            100px;
  height:           100%;
  position:         absolute;
  right:            0;
  top:              0;
  cursor:           pointer;
  z-index:          9900;
  display:          none;
}

div#overlay-left a,
div#overlay-right a
{
  opacity:          .25;
  filter:           alpha(opacity=25);
  position:         absolute;
  top:              200px;
  width:            60px;
  height:           60px;
  display:          block;
  text-decoration:  none;
  margin:           -30px 0 0 -30px ;
}

div#overlay-right a
{
  right:            10px;
  background:       url(../images/arrow_right.png) 100% 50% no-repeat;
}



div#overlay-left a
{
  right:             10px;
  background:       url(../images/arrow_left.png) 50% 50% no-repeat;
}

div#overlay-left:hover a,
div#overlay-right:hover a,
div#overlay-left a.key-active,
div#overlay-right a.key-active
{
  opacity:          1;
  filter:           alpha(opacity=100);
}


* .ajax-loading
{
  min-height:      50px;
  background:      url(../images/loader.gif) 0 0 no-repeat;
}


/* ---------------------------------- * /

/* @FORM */

label
{
  display:         block;
  width:           100%;
}

fieldset
{
  border:          0
}

/*input,
textarea
{
  display:         block;
  width:           270px;
  padding:         7px 15px;
  border:          0;
  margin:          0 0 8px 0;
  font-style:      italic;
  background:      #fefaf9;
}


input:focus,
textarea:focus
{
  font-style:      normal
}*/

/* ---------------------------------- * /

/* @CLEAR-SELF */

.clear-self:after
{
  content:         " ";
  display:         block;
  clear:           both;
  visibility:      hidden;
  line-height:     0;
  height:          0;
  margin-bottom:   0;
}

.clear-self
{
  display:         inline-block;
}

html[xmlns] .clear-self
{
  display:         block;
}

* html .clear-self
{
  height:          1%;
}