/* [05/21/12]  [boB]  [ Set up 5/21/12 ]
[05/29/12]  [boB]  [ Changed styles for page-width re-ordered page layout CSS Cleanup and adjustment ] 
[06/05/12]  [boB]  [ Changes to background and rules for the backgrounds ]
[06/21/12]  [boB]  [More changes for background images Changed skip-links to transparent to fix Chrome bug]
[09/26/12]  [boB]  [ Changes to the names of some of the basic styles ]
[09/27/12]  [boB]  [ Added line-height adjustments to both the story and intro styles ]
[11/29/12]  [boB]  [ Now imports the global.css file for faster loads ]
[03/13/13]  [boB]  [ Added styles for pages that feature novels rather than short stories ]
[08/23/13]  [boB]  [Added style for story-title2 used for multiple short works on the same page ]
[01/23/15]  [boB]  [Added miscellaneous styles and corrections]
[04/30/15]  [boB]  [Change to left margin of novel-chapters]
[01/25/16]  [boB]  [ Changed Story Title from 180% to 250%]*/

/* Loads the global.css file */
@import url("../common-css/global.css");

/* Rules for all pages not author collections */

/* Sets up the page elements for writings-index page */
.writings-index-border-round {
	border-radius: 20px 7px 15px 35px;
	behavior: url(../js/pie/PIE.htc);
	}
.writings-sections {display:block;float:left;width:50%;}
.toc-section-title-h2 {
	font-size:200%;
	text-decoration:underline;
	font-family:impress;
	margin-bottom:5px;
	}
.toc-title-h3 {
	margin-top:0px;
	margin-bottom:0px;
	margin-left:2%;
	margin-right:4%;
	font-size:95%;
	}
.toc-author {float:right;}
.toc-description {clear:right;font-style:italic;margin-left:5%;margin-right:2%;margin-bottom:2%;font-size:90%;}

/* Controls the round edges on all pages except the index page */
.writings-border-round {border-radius: 50px;behavior: url(../js/pie/PIE.htc);}

/* Set up the background for all the pages in the writings section */
.writings-page-width-background {
	background-image: url("writings-pgart/writings-background-2.jpg");
	background-repeat:repeat;
}

/* Story Pages */
/* Skip links for accessibility on story pages  */
.skip {
	margin-bottom:2px;
	padding:0px;
	height:1px;
	}
.skip a:link {
	color:transparent;
	background-color:inherit;
	text-decoration:none;
	font-size:.001em;
	}
.skip a:visited {
	color:transparent;
	background-color:inherit;
	text-decoration:none;
	font-size:.001em;}
.skip a:hover {
	color:transparent;
	background-color:inherit;
	text-decoration:none;
	font-size:.001em;
	}
	/* Introductions and story layout */
.title-box {
	width:90%;
	margin:0px auto 8px auto;
    padding:1%;
    line-height:1.5em;
	}
.story-title {
 	font-size: 250%;
 	font-weight: bold;
	margin:0px;
    line-height:1em;
	}
.story-title2 {
 	font-size:175%;
	font-weight:bold;
	margin: 15px 0px 25px 10px;
    line-height:1em;
	}
.author {
 	font-style: italic;
 	font-size: 140%;
	margin:0% 0% 0% 5%;
    line-height:1em;
	}
.illustrator {
	margin-left:5%;
    line-height:1em;
	}

.intro {
 	font-size: 85%;
	line-height:125%;
 	width:90%;
	text-align: justify;
	margin:auto;
	}
.intro-h4 {
	margin:0px;
	font-size:140%;
	}
.quoted-section-inset {
	display:block;
	margin:10px auto;
	width:92%;
	}
.line2 {
	width:40%;
	margin: 15px auto 15px auto;
	clear:both;
	}
.story {
	line-height:125%;
	width:97%;
	margin:auto;
	}
p {
  text-indent: 1.2em;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: justify;
  }
 .copyright-search {
	text-align:center;
	margin: 15px auto 15px auto;
	}  

/* Novel pages - sets up the area where the individual chapters are displayed - also check the author-collections.css for additional styles */
.novel-chapter-content {
 	line-height:125%;
 	width:97%;
	text-align: justify;
	margin:auto;
	}
/* Used for inidvidual chapter pages from either a long short story or novel when the pages are displayed in the novel-chapter-content section */
/* The class chapter is used in an h4 tag */
.chapter {
 	font-size:175%;
	font-weight:normal;
	margin: 0px 0px 5px 10px;
	}
.chapter-centered {
 	font-size:175%;
	font-weight:normal;
    text-align:center;
	margin: 0px auto 5px auto;
	}
.chapter-title {
	font-size:150%;
	font-style:italic;
	margin-left:2.5%;
	margin-bottom:10px;
	}	
	
/* Sets the layout for the page below the novel-chapter-content display */
.bottom-of-page {
	width:97%;
	margin:auto;
	}

/* Sets the navigation below the area where the novel chapters are displayed */
.collections-nav-offset {display:block;text-align:center;width:85%;} /* See Orczy and Pritchard for layout */
#novel-chapters {width:100%;margin:auto auto auto 6%;line-height:135%;}
#novel-chapters ul{width:40%;list-style-type:none;}	

	
/* Set width for the next item in a style tag since it will vary within each story - Faux paper background */
.paper-background {
	display:block;
	margin:10px auto;
	padding:5px;
	background-color:#fffafa;
	}

/* Caps and Drop Caps */
.cap {
  font-size: 175%;
  font-weight: bold;
  }
.drop-cap1 {
	display:block;
	font-size:250%;
	float:left;
	margin: -8px 3px -10px 0px;
	font-weight:bold;
	text-indent:.5em;
	}
.drop-cap2 {
	display:block;
	float:left;
	margin:-15px 3px -10px 0px;
	font-size:450%;
	font-weight:bold;
	}
/* drop-cap3 used with the Orczy pages and Doyle Brazilian Cat along with others */
.drop-cap3 {
	display:block;
	float:left;
	line-height:100%;
	margin:-9px 3px -15px 0px;
	font-size:450%;
	font-weight:bold;
	}
/* Above drop-cap top margin changed from 12 to 9 to accomodate the change in line-height for the Kipling stories  Check on each story */
.drop-cap3-alt {
	display:block;
	float:left;
	line-height:100%;
	margin:0px 3px -15px 0px;
	font-size:300%;
	font-weight:bold;
	}
/* drop-cap3-alt has smaller font size to accomodate smaller paragraphs  Used in Climax for a Ghost Story */


/* Pull quotes set copy text from page and displays in a larger size to the left or right */
.pulled-right{
	margin: 2%;
	padding: 1%;
	width: auto;
	max-width: 30%;
	border: none;
	font-size: 110%;
	font-weight: bold;
	text-align: left;
	text-indent:0em;
	float: right;
	display:block;
	border-left: 3px solid #cd853f;
}

.pulled-left{
	margin: 2%;
	padding: 1%;
	width: auto;
	max-width: 30%;
	border: none;
	font-size: 110%;
	font-weight: bold;
	text-align: left;
	text-indent:0em;
	float: left;
	display:block;
	border-right: 3px solid #cd853f;
}
.pulled-right:before, .pulled-right:after, .pulled-left:before, .pulled-left:after {content:'"';}

/* General styles */
.center {text-align:center;}
.bold {font-weight:bold;}
.italic {font-style:italic;}
.font-normal {font-style:normal;}


/* All Drop Caps should be used with the next declaration-it keeps the paragraph from indenting automatically, which affects the drop cap display */
.no-indent {
  text-indent:0em;
}
.chapter-number {
	text-align:center;
	font-size:150%;
	font-weight:bold;
	margin-top:20px;
	}
.chapter-number-2 {
	text-align:center;
	font-size:150%;
	margin:10px 0px;
	}
.chapter-number-left {
	text-align:left;
	margin-left:1%;
	margin-bottom:5px;
	font-size:175%;
	font-weight:bold;
	margin-top:20px;
	}
.chapter-heading {
	font-size:125%;
	margin-top:15px;
	margin-bottom:15px;
	font-weight:normal;
	}
.divider {
	width:30%;
	margin-left:0px;
	text-align:left;
	}

/* Tool tips for use with defining words in stories or articles - see Rue Morgue for examples */
/* These set up the box around the word or phrase to be defined - colors can be varied */
.tip {background-color:#fff; color:#000;padding:2px;}
.tip2 {background-color:#f9eed7; color:#000;}
/* Tooltip CSS by Osvaldas Valutis (http://osvaldas.info/) - Used in conjuction with tooltip.js */
/* Colors can be varied */
#tooltip
{
   text-align: center;
   color: #000;
   background: #dcdcdc;
   position: absolute;
   z-index: 100;
   padding: 5px;
	}
 
#tooltip:after /* triangle decoration */
{
    width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #dcdcdc;
	content: '';
	position: absolute;
	left: 50%;
	bottom: -10px;
	margin-left: -10px;
 }
 
#tooltip.top:after
{
    border-top-color: transparent;
    border-bottom: 10px solid #dcdcdc;
    top: -20px;
    bottom: auto;
	}
 
#tooltip.left:after
{
	left: 10px;
	margin: 0;
	}
 
#tooltip.right:after
{
	right: 10px;
    left: auto;
    margin: 0;
	}