/* [05/17/12]  [boB]  [ Initial Setup ]
[05/29/12]  [boB]  [ CSS Cleanup and Adjustment ]
[06/25/12]  [boB]  [Added styles for the footer]
[07/09/12]  [boB]  [Fixes to bottom navigation]
[07/13/12]  [boB]  [Moved link styles and adjusted color for hover]
[12/24/12]  [boB]  [Moved the styles for picture boxes to the global file]
[01/17/13]  [boB]  [ Changed page-width style to add upper navigation on all pages  Added styles for upper navigation]
[01/30/13]  [boB]  [ Added styles for the PayPal button for all pages ]
[04/18/13]  [boB]  [ Added style for story illustrations pic-box-offset ]
[11/22/13]  [boB]  [ Added styles for transparent illustrations ]
[05/23/18]  [boB]  [ Added styles that removes the dotted lines from the tooltips ]
[02/19/22]  [boB]  [ Added block of @media rules for controlling mobile styles...Most mobile styles are at the bottom of the page...Pic boxes are separate...Other mobile rules are spread out on the pages that they control ]
[02/21/22]  [boB]  [ Added style to make pictures, captions and titles center on page without using pic-box-center, which fails in mobile ]
[03/16/22]  [boB]  [ Changed the styles for Top Navigation to accomadate mobile ]
[04/22/22]  [boB]  [Added styles for pic-boxes...mobile compatible]
 */
/*
Controls the common page elements
main title heading
drop cap for main title
old paper background
the footer
PayPal button
page layout size
Return link
The impressive type face
Removal of dotted lines from Tooltips
Picture Boxes with captions
Other handy styles
Mobile styles
*/

/* Common elements all pages */
body {
	background-image: url("common-pgart/site-background.jpg");
	background-size:cover;
	background-position:center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin:0;
	padding:0;
	background-color:#ffffff;
	color:#000000;
	}

#background {
	position:fixed;
	_position:absolute; /*target IE6 only */
	top:0;
	left:0;
	width:100%;
	height:200%;
	z-index: -2;
}

@font-face {
    font-family: 'impress';
	src:	url('../fonts/impressive/impress-webfont.eot');
	src:	url('../fonts/impressive/impress-webfont.eot?#iefix')  format('embedded-opentype'),
			url('../fonts/impressive/impress-webfont.woff') format('woff'),
			url('../fonts/impressive/impress-webfont.ttf') format('truetype'),
			url('../impress-webfont.svg#impress') format('svg');
    font-weight: normal;
    font-style: normal;

}
.impressive {font-family: "impress";line-height:1.2em;}
.main-heading-title {
	position:fixed;
	top:0;
	left:0;
	right:0;
	display:block;
	margin: 50px auto 50px auto;
	text-align:center;
	font-size:300%;
	z-index:-1;
	line-height: 2em;} /* Line-height addition keeps title on the page */

.drop-cap-main-title {
	margin-right: -5px;
	vertical-align:-5%;
	font-size:175%;
	font-weight:bold;
	}
#page-width {
	display:block;
	margin: 180px auto 50px auto;
	width:91%;
	padding:1%;
	z-index:1;
	}
/* Link Colors */
a:link {color:#3e6198;text-decoration:none;background-color:inherit;}     
a:visited {color:#a24468;text-decoration:none;background-color:inherit;}
a:hover {color:#da70d6;text-decoration:none;background-color:inherit;}
a:active {color:#45a350;text-decoration:none;background-color:inherit;}


/* Sets the Return text for pages that aren't index pages */
.return {margin: 20px auto 20px auto;text-align:center;}
.return ul li{margin-left:-25px;line-height:1.8em;}


/* Sets the position for the included Top Navigation for all Pages except the main index */
#return-nav-top-b {position:fixed;display:block;width:100%;text-align:center;font-size:140%;margin-top:-33px;margin-left:-3%;z-index:-1;}
#return-nav-top-b ul {margin:0;padding:0;}
#return-nav-top-b li{display:inline-block;vertical-align:top;width:20%;height:25px;}
#return-nav-top-b li{*display:inline} /* display:inline fixes bug in IE7 Used only for the Index pages */

/* Sets the position for the included Bottom Navigation for all Index Pages except the main index */
#return-nav {display:block;text-align:center;margin: 20px 55px 5px auto;}
#return-nav li{display:inline-block;width:24%;font-size:140%;height:25px;}
#return-nav li{*display:inline} /* display:inline fixes bug in IE7 Used only for the Index pages */

/* Sets up the PayPal button on all pages */
.pay-pal-include {
float:right;
width:40%;
margin-right:3%;
padding:4px;
font-size:80%;
background-image: url("../common-pgart/pay-pal-background.jpg");
border: 1px solid black;
border-radius: 4px;
behavior: url(../js/pie/PIE.htc);
}

footer {
clear:both;
width:40%;
font-size:80%;
line-height:normal;
margin-top:20px;
padding:1%;
background-image: url("../common-pgart/footer-background-water-stained-paper-redux.jpg");
background-color:#f5f5dc;
border: solid 1px black;
border-radius: 20px;
-moz-box-shadow: 5px 5px 5px #888888 ;
-webkit-box-shadow: 5px 5px 5px #888888;
box-shadow:  5px 5px 5px #888888;
behavior: url(../js/pie/PIE.htc);
}
/* Used only as a style for the index page due to problems with CSS PIE */
.footer {
clear:both;
width:40%;
font-size:80%;
padding:1%;
background-image: url("../common-pgart/footer-background-water-stained-paper-redux.jpg");
background-color:#f5f5dc;
border: solid 1px black;
border-radius: 20px;
-moz-box-shadow: 5px 5px 5px #888888 ;
-webkit-box-shadow: 5px 5px 5px #888888;
box-shadow:  5px 5px 5px #888888;
behavior: url(js/pie/PIE.htc);
}
/* End common elements for all pages */


/* Picture Boxes */
/* Sets pictures, captions and titles without using the pic-box-center...pic-box-center doesn't work in mobile. */
.center-pct {display:block;margin:auto;}
/* Inserted into image tag to make a space between the picture and the border */
.pic {
	margin:5px 5px 2px 5px;
	}

/* New Picture Box Styles that work in mobile...includes @media rules for mobile */
/* Combines the picture and caption into one style...caption portion starts with font-size */
.pic-box-right-alt-2 {
    border:none;
    background-color:transparent;
    color:inherit;
    float:right;
    margin-top:5px;
    margin-left:2%;
    font-size:90%;
    font-weight:bold;
    text-align:center;
    line-height:1.1em;
    padding-bottom:2px;
}
.pic-box-left-alt-2 {
    border:none;
    background-color:transparent;
    color:inherit;
    float:left;
    margin-right:2%;
    margin-top:5px;
    font-size:90%;
    font-weight:bold;
    text-align:center;
    line-height:1.1em;
    padding-bottom:2px;
}
.center-pct-alt-2 {
    display:block;
    margin:auto;
    border:none;
    background-color:transparent;
    color:inherit;
    padding:5px 8px;
    font-size:90%;
    font-weight:bold;
    text-align:center;
    line-height:1.1em;
    padding-bottom:2px;
}

/* Styles to remove the space around images when reduced for mobile...adjustments have to be made on images under 200px */


@media only screen and (min-width:400px) and (max-width:599px){
.pic-box-right-alt-2 {
    border:none;
    background-color:transparent;
    color:inherit;
    float:right;
    margin-right:-15%;
    margin-left:-15%;
    margin-top:5px;
    font-size:90%;
    font-weight:bold;
    text-align:center;
    line-height:1.1em;
    padding-bottom:2px;
}
.pic-box-left-alt-2 {
    border:none;
    background-color:transparent;
    color:inherit;
    float:left;
    margin-right:-15%;
    margin-left:-15%;
    margin-top:5px;
    font-size:90%;
    font-weight:bold;
    text-align:center;
    line-height:1.1em;
    padding-bottom:2px;
}
.center-pct-alt-2 {
    display:block;
    margin:auto;
    border:none;
    background-color:transparent;
    color:inherit;
    padding:5px 8px;
    font-size:90%;
    font-weight:bold;
    text-align:center;
    line-height:1.1em;
    padding-bottom:2px;
}
}

@media only screen and (max-width: 399px){
.pic-box-right-alt-2 {
    border:none;
    background-color:transparent;
    color:inherit;
    float:right;
    margin-right:-22%;
    margin-left:-20%;
    margin-top:5px;
    font-size:90%;
    font-weight:bold;
    text-align:center;
    line-height:1.1em;
    padding-bottom:2px;
}
.pic-box-left-alt-2 {
    border:none;
    background-color:transparent;
    color:inherit;
    float:left;
    margin-right:-20%;
    margin-left:-22%;
    margin-top:5px;
    font-size:90%;
    font-weight:bold;
    text-align:center;
    line-height:1.1em;
    padding-bottom:2px;
}
.center-pct-alt-2 {
    display:block;
    margin:auto;
    border:none;
    background-color:transparent;
    color:inherit;
    padding:5px 8px;
    font-size:90%;
    font-weight:bold;
    text-align:center;
    line-height:1.1em;
    padding-bottom:2px;
}
}

/* Style only sets up the caption box...the rest is in the pic-box style above */
.pic-caption-alt-2 {display:block;margin:auto;padding:1% 3%;}


/* Styles to make the pic-caption display correctly across multiple devices */
@media only screen and (min-width: 499px) and (max-width: 899px){
.pic-caption-alt-2 {display:block;margin:auto;width:80%;padding:1% 3%;}
}

@media only screen and (max-width: 498px){
.pic-caption-alt-2 {display:block;margin:auto;width:50%;padding:1% 3%;}
}
/* End New Picture Box styles */

/* Old Picture Box styles...should be replaced as time allows...not optimized for mobile */
/* Set up Picture box with caption */
.pic-box-right {
	border: 2px ridge #fdf5e6;
	background-color:#fbedd3;
	color:inherit;
	float:right;
	margin-left:8px;
	margin-top:5px;
	}
.pic-box-left {
	border: 2px ridge #fdf5e6;
	background-color:#fbedd3;
	color:inherit;
	float:left;
	margin-right:8px;
	margin-top:5px;
	}
/* Must declare width in the containing div for pic-box-center - Deprecated...doesn't work in mobile */
.pic-box-center {
	border: 2px ridge #fdf5e6;
	background-color:#fbedd3;
	color:inherit;
	display:block;
	margin:auto;
	}

/* Sets the font size for the standard picture caption */	
.pic-caption {
	font-size:90%;
	text-align:center;
	margin:0px;
	line-height:1.1em;
	padding-bottom:2px;
	}

/* If using single illustrations with captions, this removes a space below the picture */
.pic-box-offset {margin-bottom:-5px;}

/* The following are used with illustrations that have partial transparency or where a border is not desired-sort of mobile compatible */
.pic-box-right-alt {
	border:none;
	background-color:transparent;
	color:inherit;
	float:right;
	margin-left:8px;
	margin-top:5px;
	}
.pic-box-left-alt {
	border:none;
	background-color:transparent;
	color:inherit;
	float:left;
	margin-right:8px;
	margin-top:5px;
	}

.pic-box-center-alt {
	border: none;
	color:inherit;
	display:block;
	margin:5px auto;
	}
/* This sets up a caption that appears to float underneath an illustration with partial tranparency */
.pic-caption-alt {
	font-size:90%;
	font-weight:bold;
	text-align:center;
	margin:0px;
	line-height:1.1em;
	padding-bottom:2px;
	}

/* Used when a picture is inserted in the middle of a paragraph-keeps the image centered-Deprecated */
.nested-pic {
	margin:5px 5px 2px -10px;
	}

/* Next used if a picture caption appears as part of an article to reduce the font size-Replaced */
.pic-caption2 {
	font-size:76.5%;
	text-align:center;
	margin:0px;
	line-height:1.1em;
	padding-bottom:2px;
	}
/* End Pictures Styles */


/* Used for the articles in the comic section */
.comic-pic-caption {
	font-size:76.5%;
	text-align:center;
	margin:0px;
	line-height:1.1em;}




/* Removes the Dotted Lines from the Tooltips */
abbr {text-decoration:none;border-bottom:0px;}
#tooltip {text-align:left;text-decoration-style:none;border-bottom:0px;}

/* Handy styles */
 .center {text-align:center;}
.bold {font-weight:bold;}
.italic {font-style:italic;}
.font-normal {font-style:normal;}
.no-top {margin-top:0px;}
.no-bottom {margin-bottom:0px;}
.small-caps {font-variant:small-caps}

/* Mobile Styles */
/* Mobile styles dealing with individual page styles are on their respective pages or in separate style sheets relevant to the pages */

/* Min Width 900 */
@media only screen and (min-width: 900px){
body {
font-size: 1.188em;}
img {width:auto;height:auto;}
/* Controls the top navigation */
#return-nav-top-a {display:none;}
/* Used in Dawson, but can be used elsewhere */
.pull-quote-right {
	margin: 1%;
	padding: 1%;
	width: 10%;
	border: none;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
	text-indent:0em;
	float: right;
	display:block;
	border-left: 3px solid #cd853f;margin:5px;}
.pull-quote-left {
	margin: 1%;
	padding: 1%;
	width: 10%;
	border: none;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
	text-indent:0em;
	float: left;
	display:block;
	border-right: 3px solid #cd853f;margin:5px;}
.arnold-title-text {display:block;width:70%;font-weight:bold;text-align:center;font-size:110%;margin:10px auto;line-height:1.0em;}
.mulford-title-text {padding:10px;text-align:center;font-size:120%;font-weight:bold;font-style:italic;}
.bullet-divider {font-size:175%;margin:10px auto;display:block;letter-spacing:5em;text-align:center; }
/* Used only in Kipling Into the Rukh */
.rukh-caption-icons {margin-bottom:-8px;max-width:10%;}
/* All only used on the Jones Collection page */
#quote-01 {margin-left:135px;width:80%;}
#quote-02 {width:80%;margin-left:260px;}
#quote-03 {width:auto;margin-left:260px;}
#quote-04 {width:auto;margin-left:260px;}
#quote-05 {margin-left:260px;width:auto;}
#quote-06 {margin-left:260px;width:auto;}
#quote-07 {margin-left:260px;width:80%;}
}

/* Max Width 960 */
@media only screen and (min-width:600px) and (max-width: 960px){
.collections-nav-offset {display:block;margin-left:3%;text-align:center;width:90%;}
#novel-chapters ul li{font-size:95%;width:85%;margin-left:-5%;margin-bottom:5%;line-height:100%;}
}

/* Max Width 899 */
@media only screen and (min-width: 600px) and (max-width: 899px){
.intro img{width:80%;height:auto;display:block;margin:auto;}
img {width:80%;
    height:auto;
    display:block;
    margin:auto;}

/* Controls the top navigation */
#return-nav-top-a {display:none;}
#return-nav-top-b {position:fixed;display:block;width:100%;text-align:center;font-size:120%;margin-top:-25px;margin-left:-3%;z-index:-1;}

.pic {width:80%;height:auto;display:block;margin:auto;}
.pic-caption-alt {
    font-size:85%;
	font-weight:bold;
	text-align:center;
	margin:4px;
	line-height:1.1em;
	padding-bottom:2px;
	}
#title {width:70%;height:auto;}
.styled-drop-cap {width:10%;height:auto;}
/* Used only in Kipling In the Rukh */
.rukh-caption-icons {display:none;}
.collections-nav-offset {display:block;margin-left:3%;text-align:center;width:90%;}
}


/* Max Width 599 */
@media only screen and (max-width: 599px){
body {font-size: 1em;}
img {width:50%;
    height:auto;
    display:block;
    margin:auto;}
.main-heading-title {font-size:200%;margin: 50px auto 15px auto;}

/* Navigation layout for the index page */
#index-nav {list-style-type:none;display:block;margin:auto auto auto -40px;}
#index-nav li{display:inline-block;font-size:75%;text-align:center;vertical-align:top;width:48%;height:175px;margin-bottom:20px;}
#index-nav li img{border:none;width:50%;height:auto;}
.index-nav-caption {display:block;margin-top:1%;width:auto;}

/* Controls the top navigation */
#return-nav-top-b {display:none;}
#return-nav-top-a {position:fixed;display:block;width:100%;text-align:center;font-size:100%;margin-top:-45px;margin-left:-3%;z-index:-1;}
#return-nav-top-a ul {margin:0;padding:0;}
#return-nav-top-a li{display:inline-block;vertical-align:top;width:30%;height:25px;}

.pic-box-right {width:30%;margin-left:8px;margin-top:5px;}
.pic-box-right img{width:80%;display:block;margin:auto;padding-top:2%;}
.pic-box-left {width:30%;margin-left:8px;margin-top:5px;}
.pic-box-left img{width:80%;display:block;margin:auto;padding-top:2%;}
.pic-box-left-alt {width:40%;margin:0px;}
.pic-box-left-alt img{width:80%;display:block;margin:auto;}
.pic-box-right-alt {width:40%;margin:0px;}
.pic-box-right-alt img{width:80%;display:block;margin:auto;}
.pic-caption-alt {
    font-size:70%;
	font-weight:bold;
	text-align:center;
    margin:4px;
	line-height:1.1em;
	padding-bottom:2px;
	}
.pic-caption2 {font-weight:bold;margin:2%;}
#title {width:90%;height:auto;}
.styled-drop-cap {width:20%;height:auto;}
.dawson-divider {width:10%;height:auto;}
/* Used in Dawson, but can be used elsewhere */
.pull-quote-right {
	margin: 1%;
	padding: 1%;
	width: auto;
	max-width: 40%;
	border: none;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
	text-indent:0em;
	float: right;
	display:block;
	border-left: 3px solid #cd853f;margin:5px;}
.pull-quote-left {
	margin: 1%;
	padding: 1%;
	width: auto;
	max-width: 40%;
	border: none;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
	text-indent:0em;
	float: left;
	display:block;
	border-right: 3px solid #cd853f;margin:5px;}
.arnold-title-text {display:block;width:90%;font-weight:bold;text-align:center;font-size:110%;margin:10px auto;line-height:1.0em;}
.mulford-title-text {padding:10px;text-align:center;font-size:100%;font-weight:bold;font-style:italic;}
.bullet-divider {font-size:175%;margin:10px auto;display:block;letter-spacing:1em;text-align:center; }
#clear {clear:both;}
.collections-nav-offset {display:block;margin-left:3%;text-align:center;width:90%;}

/* Used only in Kipling In the Rukh */
.rukh-caption-icons {display:none;width:0px;height:0px;}

/* Used only for the Comics index page */
.logos img{width:10%;height:auto;}

/* Only pertains to comic pages */
.comic-thumbnails-layout img{width:auto;height:auto;}

/* Only pertains to the pictures section */
.pictures-grid-box {height:auto;}

/* Only pertains to writings entry pages with chapter listings...keeps the two chapter sections from offsetting at reduced size. */
#novel-chapters {width:100%;margin:auto;}
#novel-chapters ul{width:30%;list-style-type:none;margin-left:-10%;}
#novel-chapters ul li{font-size:90%;width:95%;margin-left:-2%;margin-bottom:5%;line-height:100%;}

/* All only used on the Jones Collection page */
#quote-01 {clear:left;float:right;width:59%;}
#quote-02 {clear:left;width:80%;}
#quote-03 {width:80%;}
#quote-04 {clear:left;float:right;width:59%;margin-top:-50%;}
#quote-05 {clear:left;width:80%;}
#quote-06 {clear:left;width:80%;}
#quote-07 {clear:left;width:80%;}
}



