/* [09/05/12]  [boB]  [Initial Setup]
[09/19/12]  [boB]  [ Added font rules for comic book font face  ]
[09/21/12]  [boB]  [ Added styles for articles ]
[11/29/12]  [boB]  [ Now imports the global.css file for faster loads ]
[01/30/13]  [boB]  [ Added additional styles ]
[05/13/19]  [boB]  [ Added styles to center thumbnails ]
*/

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

/* Sets up the comic book font face */
@font-face {
    font-family: 'Komic-text';
    src: url('../fonts/comic-lettering/KOMTXT__-webfont.eot');
    src: url('../fonts/comic-lettering/KOMTXT__-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comic-lettering/KOMTXT__-webfont.woff') format('woff'),
         url('../fonts/comic-lettering/KOMTXT__-webfont.ttf') format('truetype'),
         url('../fonts/comic-lettering/KOMTXT__-webfont.svg#KomikaTextRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.comic-lettering {font-family:"Komic-text";}
/* Set up the background for all the pages in the comics section */
.comics-page-width-background {
	position:relative;
	background-image: url("comics-pgart/comics-background.jpg");
	background-repeat:repeat;
	border-radius: .1px;
	behavior: url(../js/pie/PIE.htc);
	}
/*
The above rule contains a hack to make the footer display on top of the page background, by using the border-radius and behavior.  Not sure why it works, but it does.
*/

.comics-background-border-round {
	border-radius: 12px 20px 8px 5px;
	behavior: url(../js/pie/PIE.htc);
	}
.comics-drop-cap-offset {letter-spacing:.16em;}

/* This rule sets up the stapled edge in conjunction with the position:relative in the background tag */
.spine-on-left {
background-image:url("comics-pgart/comic-spine.jpg");
background-repeat:repeat-y;
width:12px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-radius: 20px 0px 0px 30px;
behavior: url(../js/pie/PIE.htc);
}
/* Next rule offsets the page content from the stapled edge */
.comic-content {margin-left:1%;}

/* Sets up the page elements for comics-index page */

/* Controls the logos at the top and bottom of the index page */
.logos {
display:block;
text-align:center;
margin:auto;
}
.logos img{
display:inline;
margin: 1%;
width:auto;
height:10%;
}


/* Controls the navigation pictures on the index page */
.comic-index-box-1 {
float:left;
width:250px;
border: solid 2px black;
margin-left:20px;
margin-right:10px;
margin-top:10px;

}
.comic-index-box-1 img{display:block;margin:auto;border:none;}
.comic-index-box-title {
font-family: "Komic-text";
font-weight:bold;
font-size:84%;
width:98%;
background-color:#ffff00;
color:#000000;
padding:.5% 0% .5% 2%;
border-bottom:solid 2px black;
}


/* Controls top credits in the article pages in the comics section */
.comic-article-title-box {
	font-family:"Komic-text";
    width: 40%;
	display:block;
	margin:0px auto 10px auto;
	padding:3px;
	background-color: #ffff00; 
    line-height:1.5em;
	text-align:center;
	}
.comic-article-title {
	font-size: 175%;
	font-weight: bold;
	display:inline;
	}
.comic-article-author {
	text-align:right;
	font-size: 130%;
	font-weight: bold;
	margin-top:0px;
	margin-bottom:0px;
	margin-right:4%;
	}
.comic-title-border {
    border-width:2px 6px 6px 1px;
    border-style:solid;
    border-color: #daaa66;
    border-radius:12px;
    }
/* Sets styles for comic stories that are offered complete */
.comic-story-title-credits {
	font-family:"Komic-text";
    margin:15px;
	text-align:center; 
	font-weight:bold;
	}
.comic-thumbnails-layout {
	display:block;
	margin:15px auto;
	width:80%;
    text-align:center;	
}
.comic-thumbnails-layout img{display:inline-block;border:none;margin-left:.5%;}

p {text-indent:1.2em; margin:0px;text-align:justify;}
.copyright {
	display: block;
	margin:auto;
	text-align: center;
	margin-top:30px;
	width:60%;
	}
/* Sets styles for comic stories that are offered as both text and selected images */
.comic-story-caption {
font-family: "komic-text";
font-weight:bold;
font-size:84%;
width:98%;
padding:.5% 0% .5% 2%;
background-color:#ffff00;
color:#000000;
border-bottom:solid 2px black;
}
.comic-story-box-1 {
float:left;
width:auto;
border: solid 2px black;
margin:2% 0% auto 3%;
font-family: "komic-text";
border-radius: 3px 4px 2px 5px;
behavior: url(../js/pie/PIE.htc);
}
.comic-story-box-1 img{display:block;margin:auto;border:none;}
.comic-story-box-1 p{margin:0px 4px;}

.comic-story-box-2 {
float:left;
width:auto;
border: solid 2px black;
margin:2% 0% auto 3%;
height: auto;
font-family: "komic-text";
background-color:#fbedd3;
color:#000000;
border-radius: 3px 4px 2px 5px;
behavior: url(../js/pie/PIE.htc);
}
.comic-story-box-2 p{margin:0px 4px;}


/* Controls the columns for the articles Does not work in IE */
#columns {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

/* For use on pages where the columns need to be used more than once on a page */
#columns-2 {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}