@CHARSET "UTF-8";

/*** 
 * General styles
 */
html,body{
  height: 100%;
  max-height: 100%;
} 

body {
  background: #fff url('../img/bg.gif') no-repeat top right;
  font-family: Palatino;
  font-size: 13px;
  overflow-x: hidden;
}

  /* clearfix */
  hr.clear {
    border: 0px;
    clear: both;
    display: block;
    height: 0px;
    visibility: hidden;
  }
  em { font-style: italic;}
  .left { float: left; }
  .right { float: right; }
/**
 * wrappers
 */
#main-wrapper {
  height: 100%;
  max-height: 100%;
  min-width: 1000px;
}
#inner-wrapper {
  height: 100%;
  max-height: 100%;  
}

/**
 * Main content
 */

#main-content {
  float: left;
  margin: 270px -1250px 0px 30%; /*margin: 240px -1250px 0px 290px;*/
  padding-bottom: 50px;
  /*width: 960px;*/
  width: 612px; /*580px;*/
}

  .main-content h1, span.h1 {
    font-size: 34px;
    margin: 0px 0px 16px 0px;
    text-transform: uppercase;
  }
    span.h1 {
      display: block;
      float: left;
      padding-right: 13px;
      padding-top: 5px;
    }

  .main-content h2 {
    font-size: 18px;
    margin: 0px 0px 16px 0px;
    text-transform: uppercase;
  }
  
  .main-content h2 a {
    color:#bf5023;
    text-decoration: none;
  }
  
  .main-content h2 a:hover {
    text-decoration: none;
    border-bottom: 1px dotted #bf5023;
  }
  
  .main-content p {
    line-height: 20px;
    margin: 0px 0px 15px 0px;
  }

    .main-content .text-inline {
      float: left;      
    }
    .main-content h1.text-inline {
      margin: 0px;
      padding-right: 10px;      
    }
    .main-content p.text-inline {
      margin: 0px;
      padding: 0px;
    }
  
  /**  
   * body content
   */
  /*
  #body-content {
    border: 1px solid #00ffcc;
    margin: auto;
    width: 580px;
  }
  */
 
 /* form errors */
 #body-content p.errors {
   color: #990000;
 }
 
 #body-content .img_left {
   padding:0 30px 30px 0;
 }
 
 #body-content a {
   color:#bf5023;
   text-decoration: none;
 }
      
 #body-content a:hover {
   text-decoration: none;
   border-bottom: 1px dotted #bf5023;
 } 

  /** sitemap **/
  ul.sitemap, ul.sitemap ul { margin-left: 20px; list-style-type: disc; }
  ul.sitemap li { list-style: disc; }

/** 
 * Header and header navigation
 */
 #main-navigation {
   float: right;
   margin-top: 70px;
   width: 655px;
 }
 
 #main-navigation #header {
   height: 78px;  
 }
  #main-navigation #header div.header-book {
    /*display: inline;*/
    float: left;
    margin-right: 10px;
    /*width: 50px;*/
  }
  #main-navigation #header div.header-book a { 
    display: block; 
    /*width: 50px;*/ 
    text-decoration: none; 
  }
  #main-navigation #header div.header-johnshors {
    float: left;
    margin: 27px 0px 0px 15px;
    width: 320px;
  }
 
 #main-navigation ul {
   background: #000;
   display: block;
   height: 52px;
   margin: 1px 0px 0px 0px;
   padding: 0px;
   overflow: hidden;
 }
 #main-navigation ul li {
   display: block;
   float: left;
   height: 52px;
   line-height: 52px;
 }
 #main-navigation ul li a {
   background: transparent url('../img/sprites.jpg') no-repeat;
   display: block;
   height: 52px;
   line-height: 52px;
 }
 
 #main-navigation a#nav-about-john { width: 165px; background-position: 0px 0px; }
 #main-navigation a#nav-works { width: 100px;  background-position: -165px 0px; }
 #main-navigation a#nav-charities { width: 121px;  background-position: -265px 0px; }
 #main-navigation a#nav-newsroom { width: 140px;  background-position: -386px 0px; }
 #main-navigation a#nav-contact { width: 128px;  background-position: -526px 0px; }
 
 #main-navigation a#nav-about-john:hover, #main-navigation a#nav-about-john.active { width: 165px; background-position: 0px -52px; }
 #main-navigation a#nav-works:hover, #main-navigation a#nav-works.active { width: 100px;  background-position: -165px -52px; }
 #main-navigation a#nav-charities:hover, #main-navigation a#nav-charities.active { width: 121px;  background-position: -265px -52px; }
 #main-navigation a#nav-newsroom:hover, #main-navigation a#nav-newsroom.active { width: 140px;  background-position: -386px -52px; }
 #main-navigation a#nav-contact:hover, #main-navigation a#nav-contact.active { width: 128px;  background-position: -526px -52px; }



/** 
 * Left column
 */
/*
#left-column {
  display: block;
  float: left;
  left: 0px;
  position: fixed;
  top: 0px;
  width: 290px;
}
*/

#left-column {
  float: left;
  margin-left: 0px;
  margin-right: -290px;
  position: relative;
  width: 290px;
}


    /** twitter feed **/
   #left-column div.tweet { font-size: 14px; }
    #left-column div.tweet ul {
      list-style-type: none;
      margin: 10px 28px 10px 28px  ;
    }
      #left-column div.tweet ul li {
        font-size: 11px;
        line-height: 16px;
        margin-bottom: 10px;
      }

      #left-column div.tweet .twitter-date {
        color: #aaaaaa;
        font-size: 11px;
        font-style: italic;
        font-weight: normal;
      }
      
      #left-column div.tweet p.tweet_first,
      #left-column div.tweet ul li.tweet_first {
	      font-size: 14px;
	      font-weight: bold;      
      }
      
      #left-column div.tweet ul li a.twitter-link {
        color: #60c0d8;
        text-decoration: none;
      }
      
      #left-column div.tweet ul li a.twitter-link:hover {
        text-decoration: none;
        border-bottom: 1px dotted #60c0db;
      }     
        
      #left-column div.tweet ul li a {
        color: #bf5023;
        text-decoration: none;
      }
      
      #left-column div.tweet ul li a:hover {
        text-decoration: none;
        border-bottom: 1px dotted #bf5023;
      } 
      
  #left-column a#twitter-follow {
    background: transparent url('../img/twitter_sprite.png') no-repeat top left;
    color:#bf5023;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    padding: 0px 0px 0px 40px;
    text-decoration: none;
  }
  
  #left-column a#twitter-follow:hover {
    background-position: bottom left;
    text-decoration: none;
  }      
      
 /**
  * Footer
  */
  #main-footer {
	  bottom: 16px; /*35px */
	  height: 35px;
	  left: 100%; margin-left: -350px;
	  position: fixed;
	  width: 350px;
	  z-index: 9999;
  }
  
  #main-footer ul {
    background: #e5b21b;
    display: block;
    height: 35px;
    margin: 20px 0px 0px 10px;
  }
  #main-footer ul li {
    color: #fff;
    display: inline;
    float: left;
    height: 35px;    
    line-height: 35px;
    padding-left: 20px;
  }
  #main-footer ul li a {
    color: #fff;
    display: inline;
    padding: 0px 10px 0px 10px;
    text-decoration: none;
  }
 
   #main-footer li a:hover span {
    text-decoration: none;
    border-bottom: 1px dotted #ffffff;
  }
 
 /**
  * Home books
  */
 .home-books {
   position: relative;
   width: 760px; height: 558px;
 }
  
  .home-book-img {
    float: left;
    position: relative;
    width: 380px; height: 558px; /*414px*/
  }
  .home-book-txt {
    display: block;
    float: left;   
    height: 558px; 
    margin: -10em 0px 0px 0px;
    position: relative;
    top: 50%;
    width: 340px;
  }
  .home-book-txt p.book-desc {
    font-size: 15px;
    font-style: italic;
    line-height: 30px;
  }
  .home-book-hide { display: none; }
  
 /**
  * Hover bubble
  */
 #bubbleOriginalContainer { display: none; }
 .bubbleOuter {
   background: transparent url('../img/bubble.png') no-repeat;
   height: 81px;
   /*left: 0px;*/
   position: absolute;
   /*top: 0px;*/
   width: 174px;
   z-index: 20000;
 }
 .bubbleInner {
   color: #fff;
   font-size: 14px;
   padding: 15px 5px 0px 15px;
 }
 .bubbleInner em { font-style: italic; }

/**
 * Book pages
 */
 
 .book_img {
    float: left;
    margin: -30px -20px -30px -35px;
    width: 270px; height: 364px;
  }
  
   .oldbook_img {
    float: left;
    margin: -40px 0 0 -45px;
    width: 270px; height: 320px;
  }
  
 .book_txt {
    display: block;
    float: left;   
    margin: 0px;
    position: relative;
    top: 50%;
  }