#container{width:100%; margin: 0 auto; height:100%; padding: 0;color:#000;}
.comicBook{
	width: 90%;
	padding:0;
	text-align: center;
	margin:0 auto 50px auto;
	font-family: arial,sans-serif;
}


.hideMobile{
	display: none;
}
.showMobile{
	display: inline-block;
}


/*-----------------Panels*/

div.panel{
	width:100%;
	height: auto;
	vertical-align: top;
	background-color: #FFF;
	margin: 10px 0;
	padding:0;
	position: relative;
}

div.panel img{
	display: block;
	width: 100%;
	height: auto;
	padding:0;
	margin: 0;
}

div.panel.col0{
	width:0; 
	margin:0;
	padding:0;
}
div.panel.col1{
	width:50%; 
	margin-left: auto; 
	margin-right: auto;
}




div.clearMe{
	clear:both;
}
div.clearMobile{
	clear: both;
	display: block;
}

.panel .subpanel{
	//display: inline-block;
	float:left;
	margin: 0px 2.2% 0px auto;
}

.panel .subpanel:first-of-type{
	margin-left:0;
}
.panel .subpanel:last-of-type{
	margin-right:0;
	/*float:right;*/
}

.panel .subpanel.quarter{
	width: 23%;
}

.panel .subpanel.third{
	width: 31%;
}

.panel .subpanel.half{
	width: 48%;
}

.panel .subpanel.twothirds{
	width: 65%;
}

.panel .subpanel h3{
	margin: 5px 0 0 0;
	text-align: center;
	font-weight: bold;
}
.panel .subpanel p.textPad{
	padding: 0 5px 0 5px;
}
.horizontalBar {
	border-bottom: 0px solid #000;
	width: 97%;
	margin: auto 1.5% 20px 1.5%;
}


/*----------------- RTL language support*/
/*flip the panel artwork for RTL languages*/
/*.comicBook.rtl .panel img{
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}
.comicBook.rtl .panel img.noFlip{
	-moz-transform: scaleX(1);
	-o-transform: scaleX(1);
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	filter: ;
	-ms-filter: ;
}*/

.comicBook.rtl{
	direction: rtl;
	text-align: right;
}

.comicBook.rtl .panel p{
	text-align: right;
}

.comicBook.rtl .panel .subpanel{
	float:right;
}
.comicBook.rtl .panel .subpanel:first-of-type{
	margin-right:0;
}
.comicBook.rtl .panel .subpanel:last-of-type{
	margin-right:1.5%;
}
.comicBook.rtl .panel.comicIntro {float: left;}
.comicBook.rtl .panel.comicIntro .subpanel {margin-right: 0;}

/*-----------------Typography*/

div.panel p{
	font-family: Arial,sans-serif;
	font-weight: bold;
	font-size: 1em;
	padding:0;
	margin:0;
	text-align: left;
}

/* Adds comic sans to ALL <p/> */
.comicBook.silly .panel p{
	font-family: Comic Sans MS, arial,sans-serif;
	text-transform: uppercase;
}

/* Adds comic sans to <p/> with a class of .dialogue */
div.panel p.dialogue{
	font-family: Comic Sans MS, sans-serif;
	font-weight: bold;
	line-height: 1.5em;
	text-transform: uppercase;
	text-align: center;
	padding: 15px;
}

/* Adds monospace font to <p/> with a class of .computer */
div.panel p.computer{
	font-family: Courier, monospace;
	font-weight: bold;
	padding: 15px;
}

div.panel.title {background-color: #000; padding:10px; width:auto;}
div.panel.title h1{margin:0; padding:0; font-size: 2em; color:#FFF;}
div.panel.title h2{font-family: 'Amatic SC', Arial, sans-serif; font-weight:normal; font-size: 2em; text-align: center; /*text-transform: uppercase*/; color:#999;padding:2px 10px; margin-top: 10px;}
div.panel.comicIntro {float: right;}

.panel.col1.fillColumn{width:70%;padding:10px;}
.panel.col1.fillColumn p{width:40%;display: inline-block;margin:0;padding:0;vertical-align: top;}
.panel.col1.fillColumn img{width:55%;display: inline-block;margin:0;padding:0;}

.comicBook .all{
	border: 6px solid black;
}

p.balloon{
	-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px; /* future proofing */
-khtml-border-radius: 20px; 
}

.comicBook .top{
	border: 6px solid black;
	border-bottom: none;
}

.comicBook .bottom{
	border: 6px solid black;
	border-top: none;
}


div.panel p.uppercase{
	text-transform: uppercase;
}

div.panel p.textPad{
	padding: 15px;
}

p.textPad.blackBox{
	background-color: #000;
	color:#FFF;
}

p.textPad.description{
	font-weight: normal;
	display: none;
}

div.insetBox{
	text-align: center;
	position: absolute;
	background-color: #000;
	color:#FFF;
	border:solid 3px #FFF;
	padding:10px;
}



/*-----------------Styling the panels*/

div.panel.removeBorder{
	border:none;
}

div.panel.addBorder{
	border:6px solid black;
}

div.panel.exposition{
	width:80%; 
	background-color:#000; 
	color:#FFF;
	border:none;
}

.tiltRight{
	transform:rotate(2deg);
	-ms-transform:rotate(2deg); /* IE 9 */
	-webkit-transform:rotate(2deg); /* Opera, Chrome, and Safari */
}
.tiltLeft{
	transform:rotate(-2deg);
	-ms-transform:rotate(-2deg); /* IE 9 */
	-webkit-transform:rotate(-2deg); /* Opera, Chrome, and Safari */
}
/* flip the tilt for RTL languages */
.comicBook.rtl .panel.tiltRight{
	transform:rotate(-2deg);
	-ms-transform:rotate(-2deg); /* IE 9 */
	-webkit-transform:rotate(-2deg); /* Opera, Chrome, and Safari */
}
.comicBook.rtl .panel.tiltLeft{
	transform:rotate(2deg);
	-ms-transform:rotate(2deg); /* IE 9 */
	-webkit-transform:rotate(2deg); /* Opera, Chrome, and Safari */
}


.addShadow{
	box-shadow: 5px 5px 5px #888888;
}



/*-----------------Media queries----------------------------------*/

@media (min-width:402px) {
	div.panel{
		width:45%;
		margin:10px 5px;
		display: inline-block;
	}

	div.panel.col1{width:23%;}
	div.panel.col2, div.panel.third{width:45%;}
	div.panel.col3, div.panel.half{width:70%;}
	div.panel.col4, div.panel.twothirds{width:96%;}
	div.panel.col5{width:96%;}
	div.panel.col6{width:96%;}

	div.panel.block.col3, div.panel.block.half{width:96%;}

	div.panel.col1.fillColumn{width:16%;padding:0;}
	div.panel.col1.fillColumn p{width:auto; padding:15px; display: block;}
	div.panel.col1.fillColumn img{width:100%; display: block;}

	div.panel.exposition{
		width:20%;
		min-width: 150px
	}

	.hideMobile{
		display: none !important;
	}
	div.clearMobile{
		clear: both;
		display: block;
	}
	p.textPad.description{
		display: inline-block;
	}

	.horizontalBar {
		border-bottom: 3px dotted #CCC;
	}

}
@media (min-width:750px) {
	.fullWidth{
		max-width: 960px;/* 1024px */
		margin: 0 auto;
	}

	.hideMobile{
		display: inline-block !important;
	}
	.showMobile{
		display: none !important;
	}	
	div.clearMobile{
		clear:none;
		display: none;
	}

	div.panel.col1{width:16%;}
	div.panel.col2, div.panel.third{width:31%;}
	div.panel.col3, div.panel.half{width:47%;}
	div.panel.col4, div.panel.twothirds{width:63%;}
	div.panel.col5{width:79%;}
	div.panel.col6{width:97%;}

	div.panel.block.col3, div.panel.block.half{width:46.5%;}	

	div.panel.col1.fillColumn{width:16%;padding:0;}
	div.panel.col1.fillColumn p{width:auto; padding:15px; display: block;}
	div.panel.col1.fillColumn img{width:100%; display: block;}

	div.panel.title h1{font-size: 2.5em;}
}

@media print {
    #menu {display: none;}
	//.comicBook{width: 82%;page-break-before: always;}


	/*Trying to fix printing of first row of comic book so it'll fit on one page*/
	.fullWidth h2.kicker{display: none !important;}
	.panel.col3.title {width: 100% !important;background-color: #FFF !important; }
	.panel.col3.title h1{color:#000; font-size: 1.2em; text-align: left;}
	.panel.col3.title h2{display: none;}
	.comicIntro .subpanel img{display: none;}
	.panel.col3.block.comicIntro{width: 100% !important;}
	.panel.col3.block.comicIntro.subpanel.twothirds{width: 100%;}
	.panel.col3.block.comicIntro.subpanel.twothirds p{width: 100% !important; text-align:left !important;}
	.comicBook .all {border: none; width: 100% !important;}
	/*--------*/

	div.panel.col1{width:16%;}
	div.panel.col2, div.panel.third{width:31%;}
	div.panel.col3, div.panel.half{width:47%;}
	div.panel.col4, div.panel.twothirds{width:63%;}
	div.panel.col5{width:79%;}
	div.panel.col6{width:100%;}

	div.panel.block.col3, div.panel.block.half{width:47%;}	

	div.panel.col1.fillColumn{width:16%;padding:0;}
	div.panel.col1.fillColumn p{width:auto; padding:15px; display: block;}
	div.panel.col1.fillColumn img{width:100%; display: block;}

	.comicBook .panel p{font-size: .8em;}
	p.textPad.description{font-size: .6em;}

	.doNotPrint{display: none;}
}