/**
 * Theme Name : Know More
 * Theme URI  : http://www.washingtonpost.com/knowmore
 * Author     : Yuri Victor
 * Version    : 0.1
 * License    : MIT
**/
 
/******************************************
 * TABLE OF CONTENTS 
 ******************************************
 *
 * MAIN
 * STRUCTURE
 * LINKS
 * TYPE
 *
 * Backgrounds
 * Borders
 * Buttons
 * Colors
 * Dimensions
 * Floats and clears
 * Forms
 * Images
 * Margins and padding
 * Positioning and alignment
 * Transistions
 * 
 * Misc
 * Overrides
 *
 ******************************************/
 
/******************************************
 * MAIN 
 ******************************************/
 
/******************************************
 * STRUCTURE 
 ******************************************/
.row { max-width: 1280px; }
.inline-post .row,
.post-full .row { max-width: 1024px; }

/******************************************
 * LINKS 
 ******************************************/
a { color: #2c2c2c; text-decoration: none; }
a:focus,
a:hover { color: #cc3333; text-decoration: none; }
p a,
.inline-content a, 
.the-content a { color: #cc3333; }
p a:hover,
.inline-content a:hover,
.the-content a:hover { color: #6a6a69; }
.grey a { color: #6a6a69; }
header li a:hover { background: #cc3333; color: #fff; }

/******************************************
 * TYPE 
 ******************************************/
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }

h1 { font-size: 36px; line-height: 1.2; margin-bottom: 10px; }
h3 { font-size: 24px; }
h5 { font-size: 16px; font-weight: 400; }
h6 { font-size: 13px; }

.fs12 { font-size: 12px; }
.fs13 { font-size: 13px; }
.fs18 { font-size: 18px; line-height: 21px; }

.uppercase { text-transform: uppercase; }

h1, h5, .franklin { font-family: 'Helvetica', 'Arial', sans-serif; font-weight: 700; }
blockquote { font-family: Georgia; font-style: italic; border: 0; margin: 0; }
.inline-content { font-size: 1em; line-height: 1.6; margin-bottom: 1.25em; }

/******************************************/
 
/******************************************
 * BACKGROUNDS 
 ******************************************
 * 
 * Black : #111
 * White : #fff
 * Red   : #cc3333
 * Green : #83b656 // Blockquote
 * Grey  : #eaeef4 // Body
 *
 ******************************************/
.bg-black { background-color: #111;    }
.bg-white { background-color: #fff;    }
.bg-green { background-color: #83b656 !important; }
.bg-red   { background-color: #cc3333; }
.bg-grey,
body      { background-color: #F8F8F9; }

/******************************************
 * BORDERS
 ******************************************/
.borB1S { border-bottom: 1px solid #E1E1E1; }
.borL1S { border-left: 1px solid #E1E1E1;   }
.borR1S { border-right: 1px solid #E1E1E1;  }
.borT1S { border-top: 1px solid #E1E1E1;    }

.borL1SW { border-left: 1px solid #fff; }
.borR1SW { border-right: 1px solid #fff; }

 /******************************************
 * Buttons
 ******************************************/
.button { border: 1px solid #fff; color: #fff; padding: 15px 0; width: 100%; }

/******************************************
 * COLORS  
 ******************************************
 * Black : #2c2c2c
 * White : #fff
 * Grey  : #6a6a69
 * Red   : #cc3333
 * 
 ******************************************/
.black { color: #2c2c2c; }
.white { color: #fff;    }
.grey  { color: #6a6a69; }
.red   { color: #cc3333; }

/******************************************
 * DIMENSIONS
 ******************************************/
.h30  { height: 30px; }
.h50  { height: 50px; }
.h292 { height: 342px; }
.lh50 { line-height: 50px; }
.w40  { width: 40px; }
.w135 { width: 135px; }

/******************************************
 * FLOATS AND CLEARS
 ******************************************/
.left     { float: left; }
.right    { float: right; }
.clear    { clear: both; }
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf       { *zoom: 1; }
 
/******************************************
 * FORMS
 ******************************************/
 
/******************************************
 * IMAGES AND EMBEDS
 ******************************************/
iframe,
.row img { width: 100%; }
.post:hover img { opacity: .6; }
.post img { min-height: 227px; }

/******************************************
 * MARGINS AND PADDING
 ******************************************/
.mar10   { margin: 10px;         }
.marB5   { margin-bottom: 5px;   }
.marB10  { margin-bottom: 10px;  }
.marB15  { margin-bottom: 15px;  }
.marB30  { margin-bottom: 30px;  }
.marL5   { margin-left: 5px;     }
.marL10  { margin-left: 10px;    }
.marLR5  { margin: 0 5px;        }
.marR5   { margin-right: 5px;    }
.marR10  { margin-right: 10px;   }
.marR20  { margin-right: 20px;   }
.marR30  { margin-right: 30px;   }
.marT3   { margin-top: 3px;      }
.marT10  { margin-top: 10px; }
.marT20  { margin-top: 20px;     }

.pad10   { padding: 10px;        }
.pad20   { padding: 20px;        }
.padB10  { padding-bottom: 10px; }
.padB15  { padding-bottom: 15px; }
.padB50  { padding-bottom: 50px; }
.padBT5  { padding: 5px 0;       }
.padBT10 { padding-top: 10px; padding-bottom: 10px; }
.padBT15 { padding-top: 15px; padding-bottom: 15px; }
.padBT20 { padding-top: 20px; padding-bottom: 20px; }
.padBT30 { padding-top: 30px; padding-bottom: 30px; }
.padL5   { padding-left: 5px;    }
.padL10  { padding-left: 10px; }
.padLR5  { padding: 0 5px;       }
.padLR10 { padding-left: 10px; padding-right:10px; }
.padLR20 { padding-left: 20px; padding-right: 20px; }
.padR5   { padding-right: 5px;   }
.padR10  { padding-right: 10px; }
.padR15  { padding-right: 15px;  }
.padR20  { padding-right: 20px;  }
.padT2   { padding-top: 2px; }
.padT20  { padding-top: 20px;    }
.padT30  { padding-top: 30px;    }
.padT50  { padding-top: 50px;    }
 
.padBT1LR5 { padding: 1px 5px; }

/******************************************
 * POSITIONING AND ALIGNMENT
 ******************************************/
.align-center { text-align: center; }
.align-left   { text-align: left;   }
.align-right  { text-align: right;  }
 

/******************************************
 * Transistions
 ******************************************/
a { 
    -moz-transition: all .2s ease-out;  
    -o-transition: all .2s ease-out; 
    -webkit-transition: all .2s ease-out; 
    -ms-transition: all .2s ease-out; 
    transition: all .2s ease-out; 
}

img { 
    -moz-transition: all .4s ease-in;  
    -o-transition: all .4s ease-in; 
    -webkit-transition: all .4s ease-in; 
    -ms-transition: all .4s ease-in; 
    transition: all .4s ease-in;  
}

/******************************************
 * OVERRIDES
 ******************************************/
.block { display: block; }
.none,
.hide  { display: none; }
.pointer { cursor: pointer; }


/******************************************
 * MISC
 ******************************************/

/** NEED TO CLEAN UP */
.post-full,
.inline-post { background: #fff; border-bottom: 1px solid #d4d4d4; margin-bottom: 5px; padding: 30px 0; width: 100%; }

.columns { margin-top: 10px; }
#nomore,
#nomore-inline,
#knowmore,
.post { cursor: pointer; }

#knowmore { bottom: 0; left: 0; padding: 30px 15px; position: fixed; text-align: center; width: 100%; z-index: 2; }

#knowmore-facebook { background: #F8F8F9; display: block; font-weight: 700; margin: -45px auto 20px auto; padding: 15px; }

.button:hover, 
#knowmore:hover,
#knowmore-facebook:hover { background: #8f2424; color: #fff; }

header { overflow: hidden; }
.entry-content,
.entry-meta,
.entry-tools,
.entry-knowmore { background: #fff; }

.single-format-ad .post-full { background: #eeeeee; padding-top: 0; }
.post-format-ad { background: #eeeeee; text-align: center; padding: 0 40px 0 40px; }
.post-format-ad .entry-content { background: #eeeeee; text-align: center; padding: 0 40px 0 40px; height: 302px; }
.post-format-ad-video .entry-content { background: #eeeeee; text-align: center; padding: 0; height: 252px; }
.post-format-ad-video .entry-meta { height: auto; background: #eeeeee; }
.post-format-ad h6 { text-transform: uppercase; margin: 15px 0 15px 0; line-height: 1; }
.post-format-ad span.ad-info-popup { background-color: #eeeeee; display: none; width: 200px; z-index: 10; position: absolute; top: -25px; right: 30px; margin-top: 15px; margin-right: 15px; font-size: 10px; padding: 10px; z-index: 10; text-align: left; color: #000; }
.post-format-ad i.info-icon { background-image: url("../img/glyphicons_195_circle_info_grey.png"); height: 15px; width: 15px; background-size: 15px 15px; display: block; position: absolute; top: 10px; right: 25px; cursor: pointer; }

.entry-knowmore { border-bottom: 1px solid #e1e1e1; padding-bottom: 15px; padding-top: 15px; z-index: 999; }
.entry-knowmore h6 { font-size: 18px; }
.inline-post p,
.post-full p { font-family: Helvetica, sans-serif; font-size: 16px; line-height: 26px; margin-bottom: 0; padding-bottom: 24px; }
.entry-content { height: 227px; overflow: hidden; }

.entry-tools { border-bottom: 1px solid #e1e1e1; }
.entry-tools a:hover { color: #cc3333; }
.entry-meta { font-size: 18px; height: 75px; overflow: hidden; padding: 10px 10px; }

#logo:hover { background: #cc3333; color: #fff; }
.twitter-tweet-rendered { border: none !important; box-shadow: none !important; margin: 0 !important; }

.small-block-grid-2>li { padding-bottom: 0px;width:33%; }

::selection { background: #cc3333; color: #fff; text-shadow: none; }

.inline-block { display: inline; }

.inline-ad object,
.inline-ad embed { height: 250px !important; }

.home .post img { float: none; margin: 0; width: 100%; }
.home .post { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }



/******************************************
 * RESPONSIVE
 ******************************************/
@media only screen and ( min-width: 480px ) and ( max-width: 1024px ) {
  .show-for-small { display: block !important; }
  .byline-info,
  .entry-knowmore,
  .entry-tools,
  .entry-content,
  .entry-meta,
  h1,
  .small-block-grid-2,
  .post-full h6,
  .post-full h5,
  .the-content { padding-left: 10% !important; padding-right: 10% !important; }
  .entry-knowmore .padL10,
  .entry-knowmore .padR10,
  .entry-tools .padL10,
  .entry-tools .padR10 { padding: 0; }
  .entry-content img { width: 100%; }
  blockquote { font-size: 24px; padding-bottom: 30px !important; padding-top: 30px  !important; }
  .facebook-banner { display: none !important; }
  h1 { font-size: 36px !important; margin-top: 0; }
  h2 { font-size: 36px !important; }
  .post-format-ad .entry-content { height: auto; }  
}

@media only screen and ( max-width: 1024px ) {
  .entry-knowmore h6 { font-size: 13px; }
  .large-4 { width: 100%; }
  h1 { font-size: 24px; }
  .post-full h6,
  .post-full .the-content,
  .post-full .small-block-grid-2,
  h1 { padding-left: 15px; padding-right: 15px; }
   .entry-content,
   .entry-meta { height: auto; }
   .columns { padding-left: 0; padding-right: 0; }
   .entry-meta,
   .entry-tools { padding-right: 10px; }
   .h292 { height: auto; }
  .post:hover img { opacity: 1; }
  .padT20 { padding-top: 0; }
  .columns { margin-top: 0; }
  .post-full { padding: 15px 0; }
}

@media only screen and ( min-width: 1024px ) {
  .show-for-large { display: block !important; }
}