/******************************************************************
Site Name: The Anatomy of Love
Author: j-bro

Stylesheet: IE Stylesheet

So instead of using the respond.js file to add media query support
to IE, we're going to use SASS to create an easily readable css file.
Here, we import all the styles the standard stylesheet gets, only
without the media queries. No need to worry about editing anything!

******************************************************************/
/******************************************************************
IMPORTS & DEPENDENCIES
******************************************************************/
/******************************************************************
Site Name: The Anatomy of Love
Author: j-bro

Stylesheet: Variables
******************************************************************/
/*********************
COLORS
*********************/
/******************************************************************
Site Name: The Anatomy of Love
Author: j-bro

Stylesheet: Typography
******************************************************************/
/*********************
FONT FACE (IN YOUR FACE)
*********************/
/*  To embed your own fonts, use this syntax
  and place your fonts inside the
  library/fonts folder. For more information
  on embedding fonts, go to:
  http://www.fontsquirrel.com/
  Be sure to remove the comment brackets.
*/
/*  @font-face {
      font-family: 'Font Name';
      src: url('library/fonts/font-name.eot');
      src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
             url('library/fonts/font-name.woff') format('woff'),
             url('library/fonts/font-name.ttf') format('truetype'),
             url('library/fonts/font-name.svg#font-name') format('svg');
      font-weight: normal;
      font-style: normal;
  }
*/
/*
The following is based of Typebase:
https://github.com/devinhunt/typebase.css
I've edited it a bit, but it's a nice starting point.
*/
/*
 i imported this one in the functions file so bones would look sweet.
 don't forget to remove it for your site.
*/
/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
  -ms-word-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig"; }

/******************************************************************
Site Name: The Anatomy of Love
Author: j-bro

Stylesheet: Mixins Stylesheet
******************************************************************/
/*********************
TRANSITION
*********************/
/*********************
CSS3 GRADIENTS
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/******************************************************************
Site Name: The Anatomy of Love
Author: j-bro

Stylesheet: IE Grid Styles
******************************************************************/
/******************************************************************
Site Name: The Anatomy of Love
Author: j-bro

Stylesheet: 481px and Up Stylesheet
******************************************************************/
/*********************
NAVIGATION STYLES
*********************/
.menu {
  /* end .menu ul */ }
  .menu ul {
    /* end .menu ul li */
    /* highlight current page */
    /* end current highlighters */ }
    .menu ul li a:hover, .menu ul li a:focus {
      text-decoration: none;
      color: #3498db; }

/* end .menu */
/*******
HOME 
*******/
#intro-control #hero-text {
  top: 82px; }

#intro-control .videocontainer video {
  width: 100%;
  display: block; }

.homepage-feature h4.welcome {
  font-size: 1.1em; }

.book h3 {
  padding: 32px 0 0; }

#book-promo h3 {
  font-size: 1.5em; }

/******************
pages, quizzes
******************/
/********
LOVE TEST
********/
/***  PLS  ***/
#passionate-love-scale form .question-area .answers {
  max-width: 547px; }
  #passionate-love-scale form .question-area .answers .quiz-hint {
    letter-spacing: 0; }
  #passionate-love-scale form .question-area .answers input[type="radio"] {
    margin-right: 4px; }
  #passionate-love-scale form .question-area .answers label {
    margin-right: 1px; }

/*********************
POSTS & CONTENT STYLES
*********************/
/* entry content */
.entry-content {
  /* at this larger size, we can start to align images */ }
  .entry-content .alignleft, .entry-content img.alignleft {
    margin-right: 1.5em;
    display: inline;
    float: left; }
  .entry-content .alignright, .entry-content img.alignright {
    margin-left: 1.5em;
    display: inline;
    float: right; }
  .entry-content .aligncenter, .entry-content img.aligncenter {
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both; }

/* end .entry-content */
/*********************
FOOTER STYLES
*********************/
/******************************************************************
Site Name: The Anatomy of Love
Author: j-bro

Stylesheet: Tablet & Small Desktop Stylesheet
******************************************************************/
/*********************
GENERAL STYLES
*********************/
/*********************
LAYOUT & GRID STYLES
*********************/
.wrap {
  width: 760px; }

/*********************
HEADER STYLES
*********************/
.header-ad {
  display: block;
  margin: 6px auto 0;
  width: 728px; }

/* AMAZON BANNER */
.header-ad {
  display: block !important; }

.header #inner-header {
  position: relative; }

#logo {
  margin: 0.25em 0 0;
  color: #3498db;
  text-decoration: none;
  display: block;
  float: left; }
  #logo img {
    max-width: 100%;
    margin: 0;
    display: block; }

#header-buttons {
  right: 0; }

a.header-ad-link {
  width: 728px;
  border: 1px solid #ccc; }
  a.header-ad-link .ad-text {
    float: left;
    width: 68%;
    padding-top: 1.5em; }
  a.header-ad-link .ad-col {
    width: 16%; }
  a.header-ad-link .ad-col-2 {
    padding-top: 24px; }
  a.header-ad-link p {
    font-size: 1em; }
  a.header-ad-link img {
    max-width: 120px; }

.responsive-ad {
  width: 728px;
  height: 90px;
  margin: 10px auto; }

/*********************
NAVIGATION STYLES
*********************/
.top-nav-bar {
  display: block; }

#menu-main-nav-menu {
  /*width:778px;*/
  float: right;
  font-size: 15.5px; }

.navbar-ad {
  display: none; }

.nav {
  border: 0;
  margin-top: 12px;
  /* end .menu ul li */
  /* highlight current page */
  /* end current highlighters */ }
  .nav ul {
    margin-top: 0; }
  .nav li.menu-item-has-children {
    border-radius: 6px 6px 0 0; }
    .nav li.menu-item-has-children a:hover, .nav li.menu-item-has-children a:focus {
      border-radius: 6px 6px 0 0; }
  .nav li {
    float: left;
    position: relative;
    border-radius: 6px;
    /* showing sub-menus */ }
    .nav li:hover a {
      background: #eaedf2;
      border-radius: 6px 6px 0 0; }
    .nav li a {
      border-bottom: 0; }
      .nav li a:hover, .nav li a:focus {
        color: white;
        background: #3498db;
        border-radius: 6px; }
    .nav li ul.sub-menu,
    .nav li ul.children {
      position: absolute;
      visibility: hidden;
      z-index: 8999;
      border-radius: 0 6px 6px 6px;
      overflow: hidden;
      /* highlight sub-menu current page */ }
      .nav li ul.sub-menu li a,
      .nav li ul.children li a {
        padding-left: 26px;
        border-right: 0;
        display: block;
        text-indent: -12px;
        min-width: 230px;
        border-radius: 0 !important; }
        .nav li ul.sub-menu li a:hover, .nav li ul.sub-menu li a:focus,
        .nav li ul.children li a:hover,
        .nav li ul.children li a:focus {
          color: white;
          background: #3498db;
          text-decoration: none; }
      .nav li ul.sub-menu li:last-child a,
      .nav li ul.children li:last-child a {
        border-bottom: 0; }
      .nav li ul.sub-menu li ul,
      .nav li ul.children li ul {
        top: 0;
        left: 100%; }
    .nav li:hover > ul {
      top: auto;
      visibility: visible; }

/* end .nav */
/*********************
HOME
*********************/
#intro-control #hero-text {
  top: 160px; }

.divider {
  min-height: 400px; }

#quizzes .quiz-promo {
  min-height: 160px; }

/**********
QUIZZES
**********/
.question-area {
  -webkit-transition: background-color 0.14s ease-in-out;
  transition: background-color 0.14s ease-in-out; }
  .question-area:hover {
    background-color: #fdfdfd; }

/* Personality Test */
#personality-test .question-area {
  border-bottom: 1px solid #f8f9fa;
  padding: 22px 0; }

/********
LOVE TEST
********/
#love-test .question-area .answers {
  width: 422px; }
  #love-test .question-area .answers .quiz-hint {
    letter-spacing: 2px; }
  #love-test .question-area .answers .quiz-hint-disagree {
    margin-right: 10px; }
  #love-test .question-area .answers input[type="radio"] {
    margin-right: 5px; }
  #love-test .question-area .answers label {
    margin-right: 9px; }

/* PLS */
#passionate-love-scale form .question-area .answers .quiz-hint {
  letter-spacing: 1px; }

#passionate-love-scale form .question-area .answers .quiz-hint-disagree {
  float: left;
  margin-right: 2px;
  display: block; }

#passionate-love-scale form .question-area .answers .quiz-hint-agree {
  float: right;
  display: block; }

#passionate-love-scale form .question-area .answers input[type="radio"] {
  margin-right: 6px; }

#passionate-love-scale form .question-area .answers label {
  margin-right: 12px; }

/* Self-Expansion Quiz */
.wpProQuiz_questionListItem label {
  margin-right: 8px !important; }

/********************
CONTENT PAGES
********************/
.category-blog .entry-title {
  text-align: left; }

.category-blog p.byline {
  text-align: left; }

/***** 3D *******/
body.page-template-page-3D .button-center {
  max-width: 568px;
  font-size: 26px;
  line-height: 30px; }

/*********************
SIDEBARS & ASIDES
*********************/
.sidebar {
  margin-top: 2.2em; }

.widgettitle {
  border-bottom: 2px solid #444;
  margin-bottom: 0.75em; }

.widget {
  padding: 0 10px;
  margin: 2.2em 0; }
  .widget ul li {
    margin-bottom: 0.75em;
    /* deep nesting */ }
    .widget ul li ul {
      margin-top: 0.75em;
      padding-left: 1em; }

/* links widget */
/* meta widget */
/* pages widget */
/* recent-posts widget */
/* archives widget */
/* tag-cloud widget */
/* calendar widget */
/* category widget */
/* recent-comments widget */
/* search widget */
/* text widget */
/*********************
FOOTER STYLES
*********************/
/******************************************************************
Site Name: The Anatomy of Love
Author: j-bro

Stylesheet: Desktop Stylsheet
******************************************************************/
.wrap {
  width: 1040px; }

#menu-main-nav-menu {
  /*width:100%;*/
  float: right;
  font-size: 16px; }

.navbar-ad {
  display: block;
  margin-right: 50px; }
  .navbar-ad a {
    color: #b91c1a !important; }
    .navbar-ad a:hover {
      background: red !important;
      color: #fff !important; }

/*
you can call the larger styles if you want, but there's really no need
*/
/******************************************************************
ADDITIONAL IE FIXES
These fixes are now ONLY seen by IE, so you don't have to worry
about using prefixes, although it's best practice. For more info
on using Modernizr classes, check out this link:
http://www.modernizr.com/docs/
******************************************************************/
/*
For example, you can use something like:

.no-textshadow .class { ... }

You can also target specific versions by using the classes applied to
the html element. These can sometimes change, so take a look inside the
header.php file to see what they are:


.lt-ie8 .class { ... }

*/