/* CHRISTOPHERBOLLEN.COM STYLE SHEET  */




/* GLOBAL TYPOGRAPHY  */
/* ---------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Questrial&display=swap');


a:hover 	{color:#033; text-decoration:underline; }

a 			{color: #757240; text-decoration:none;outline: 0;}

body, p, td		{background:#fff url(../images/background8-page2.gif) repeat-x; margin: 0; background-attachment: fixed; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#333; margin: 5px 0 10px;}

/*"Trebuchet MS","Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;   Lucida Grande,Arial,Verdana,sans-serif;699 */



/* GLOBAL STRUCTURE & POSITIONING */
/* ---------------------------------------------------------- */



#SECONDARY_WELL		{ position: fixed; float: left;  width: 100%; clear: none; display: inline; margin-left:4%; min-width:164px; z-index:40; top: 0;}
#PRIMARY_WELL			{ position: relative; float: right; width: 70%; clear: none; display: inline; min-width:400px; overflow: hidden;}
#PRIMARY_WELL_HP		{ position: relative; float: right; width: 76%; clear: none; display: inline; min-width:400px;}


#NAV_ROW			{ position: fixed; z-index: 4; width: 100%; height: 70px; text-align: left; vertical-align: middle;}

#LOGO_CORNER		{ position: absolute; z-index: 6; width: 174px; height: 70px; text-align: center; vertical-align: middle; background-color: #fff; float: left; display: inline}

#SUBNAV_COL			{
	position: absolute;
	z-index: 5;
	width: 174px;
	text-align:left;
	background-color: #000;
	display:inline;
}



/* NAVIGATION */
/* ---------------------------------------------------------- */

.logo				{margin: 15px auto 0 auto }



#nav_bar 			{
						position:absolute; margin: 0 auto; 
						padding: 25px 0 24px 200px; width: 100%; 
						background-image:url(../images/background8-page2.gif); 
						display: inline;
						text-shadow: 			-5px -5px 5px 5px #fff, 0 0 30px #fff;
						-moz-text-shadow: 		-5px -5px 5px 5px #fff, 0 0 30px #fff;
						-webkit-text-shadow: 	-5px -5px 5px 5px #fff, 0 0 30px #fff;

					}
 
#nav_bar ul			{margin: 0 auto;}

#nav_bar li			{display: inline-block; clear: none; padding: 0; display: inline; list-style: none;}

.nav_header, #nav_bar a			{color:#FDFDFD;
					text-transform: uppercase; 
font-family: 'Questrial', 'Century Gothic', arial, sans-serif; 
					font-size:16px;
					font-family: 'Questrial', 'Century Gothic', arial, sans-serif; 
					padding: 25px 25px;
					outline: 0;
					
					}
					
.nav_header a:hover, #nav_bar a:hover	{text-decoration: none; outline: 0; color:#fff;
		text-shadow: 			-5px -5px 5px 5px #fff, 0 0 30px #fff;
		-moz-text-shadow: 		-5px -5px 5px 5px #fff, 0 0 30px #fff;
		-webkit-text-shadow: 	-5px -5px 5px 5px #fff, 0 0 30px #fff;

}	

#nav_bar img		{}

 

/* SUB NAVIGATION */
/* ---------------------------------------------------------- */
#SUBNAV_COL	{background-image: url(../images/background8_tile.gif);}
#SUBNAV_COL	.sub_nav_bar	{
						width: 174px; 
						margin: 70px 0 0 0; 
						padding-top: 40px;
						-moz-box-shadow: 		-5px 5px 5px 5px #CCCCCC;
						-webkit-box-shadow: 	-5px 5px 5px 4px #CCCCCC;
						box-shadow: 			-5px 5px 5px 4px #CCCCCC;
						z-index: 20;
						background-image:url(../images/background8_tile.gif);
}

#SUBNAV_COL	.sub_nav_bar a.nav_header { padding: 0;}

#SUBNAV_COL	.sub_nav_bar .title		{margin: 0 0 10px 20px;;}

#SUBNAV_COL	.sub_nav_bar div.snl	{margin: 0 0 10px 25px; padding: 0;}

#SUBNAV_COL	.sub_nav_bar div.snl p	{margin: 0 0 2px 0;  padding: 0; height: 14px; border: 0; line-spacing:14px}

#SUBNAV_COL	.sub_nav_bar .snl span { font-style: italic; font-size: 12px; line-height: 15px; font-family: 'Times New Roman', Times, serif; margin: 9px 0 9px -20px; }

#SUBNAV_COL	.sub_nav_bar a		{color:#FDFDFD;
					text-transform: uppercase; 
					font-family: 'Questrial', 'Century Gothic', arial, sans-serif; 
					font-size: 13px;
					line-height: 20px;
					font-family: 'Questrial', 'Century Gothic', arial, sans-serif; 
					padding: 1px 0 1px 0;
					width: 100%;
					}
					
.sub_nav_bar a:hover	{color:#FFF; text-decoration: none;
		text-shadow: 			-5px -5px 5px 5px #fff, 0 0 30px #fff;
		-moz-text-shadow: 		-5px -5px 5px 5px #fff, 0 0 30px #fff;
		-webkit-text-shadow: 	-5px -5px 5px 5px #fff, 0 0 30px #fff;

}

.sub_nav_bar img		{}


.snl { color:#fff; margin-top: 2px; list-style: none; margin-left: 8px; }

.nav_header, .sub_nav_bar div {font-size:18px !important; /*margin-left:10px; */ padding-bottom: 10px;}

.sub_nav_bar li {margin: 2px 0 1px -11px; line-height:16px;}
#SUBNAV_COL .snb_books li { margin: 7px 0 6px -20px}


/* CONTENT WELL */

/* ----------------------------------------------------------height:100%;height: 400px;height:600px;height: 500px;overflow-x: hidden; overflow-y: auto;*/

#PAGE_HEAD			{position: relative; text-align:left; padding-top:130px;}

#PAGE_BODY			{width: 600px; position: relative; padding: 20px 0 20px 0;  margin-top:50px;}
#PAGE_BODY_HP  		{width: 865px; position: relative; padding: 20px 0 20px 0; text-align:center; margin-top:50px;}
#PAGE_BODY_PO	 	{min-width: 800px; position: relative; padding: 20px 0 20px 0; text-align:center; margin-top:10px; text-align: center;}

div#darticle_wrapper	{max-width: 760px; margin: 0 auto;}

.article_list_A 		{float: left; margin: 0 60px 60px 0; width: 360px; display: inline-block; padding: 0; spacing: 0; text-align: left;}

.article_list_B 		{float: left;  width: 360px; display: inline-block; padding: 0; spacing: 0; text-align: left;}

.article_feature_A 		{float: left; margin: 10px 60px  0 0; width: 445px; display: inline-block; padding: 0; spacing: 0; text-align: left; }


.page_rule {width: 66%; background-color:#FFFFFF;  background-image:url(../images/noise-bg2.gif); /*width: 66%; height: 2px; margin: 0 0 0 20px; background-image: url(../images/backgroundfull.gif)*/height: 2px;}

#PAGE_HEAD .page_rule {width:75%; }


.page_title {margin: 40px 0 10px 0; color:#000; font-style: italic; font-size:18px; text-transform: uppercase; font-family: 'Questrial', 'Century Gothic', arial, sans-serif; }





/* ARTICLE ABSTRACT STYLE */

/* ---------------------------------------------------------- */

.fiction_col{
	/*border-bottom: thin solid #999;
	clear: both; */
	display: inline-block;
	margin: 10px 50px 0 0;
	padding: 0;
	position: relative;
	width: 370px;
	float: left;
	text-align: left;
}

.absrct	{
	border-bottom: thin solid #E0E0E0;
	/*clear: both; */
	display: inline-block;
	height: 100px;
	margin: 15px 50px 10px 0;
	padding: 0;
	position: relative;

	width: 370px;
	float: left;

}



.thmb	{

	display: inline;
	border: 0;
	padding: 1px;
	max-height: 82px;
	max-width: 82px;
	/* background-color: #666;	*/
	background-image:url(../images/noise-bg2.gif);
	border-image: url(../images/noise-bg2.gif);

}





.thmb:hover	{

-moz-box-shadow: 		-2px 2px 2px 2px #CCCCCC;
-webkit-box-shadow: 	-2px 2px 2px 2px #CCCCCC;
box-shadow: 			-2px 2px 2px 2px #CCCCCC;

}



.thumb_box	{
	float: left;
	width:  82px;
    height: 82px;
    margin-right: 15px;
}



.praise		{padding: 15px 0 0 0;}

.praiser	{color: #000; text-transform: uppercase; 
font-family: arial, sans-serif; }



.description{
	float: left;
	overflow: hidden;
	display: inline;
	width:263px;
	text-align:left;
	font-family:  'Questrial', 'Century Gothic', arial, sans-serif; font-size: 12px; 
	color: #666; 
	text-decoration: none;
	margin: 0; padding: 0; spacing: 0;

}








a, a:link, a:visited, a:active, a:hover {

	font-family:  'Questrial', 'Century Gothic', arial, sans-serif; color: #455d6e;



}

a:hover { color:#454b6a; text-decoration:none; 
-moz-text-shadow: -5px -5px 5px 5px #fff;
-webkit-text-shadow: -5px -5px 5px 5px#fff;
text-shadow: 0 0 10px #CCC, 0 0 20px #CCC, 0 0 30px #bfbfbf, 0 0 40px #CCC;

outline: 0;

}
a.article_title {

 	font-size: 16px; 
	font-family:  'Questrial', 'Century Gothic', arial, sans-serif;  
	color: #000000 !important;
	text-transform: uppercase;
	margin: 0; padding: 0; spacing: 0;
	line-height: 22px;
	height: 22px;
	display: block;
	font-weight: normal;
	border-bottom:1px;
	overflow:hidden;
}



.deck	{

    color: #333;
    display: block;
    font-family: "Century Gothic",Verdana,arial,sans-serif;
	font-size: 12px;
    width: 248px;
    height: 45px;
    text-transform: lowercase;
	position: relative;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;  
  }


.pubID	{
    bottom: 10px;
    color: #000;
    display: block;
    font-family: "Century Gothic",Verdana,arial,sans-serif;
    font-size: 10px;
    margin: 0;
    position: absolute;
	

}

.pubDATE	{

	font-family:  'Questrial', 'Century Gothic', arial, sans-serif; font-size: 10px; 
	color: #6e6045; 

}

.pubNAME {

	font-family:  'Questrial', 'Century Gothic', arial, sans-serif; font-size: 10px; 
	text-transform: uppercase;
	color: #455d6e; 

}

.pubISSUE	{

	font-family:  'Questrial', 'Century Gothic', arial, sans-serif; font-size: 10px; 

	color: #6e4545; 

}





p.breaker {margin: 0; display: inline; clear: none; width: 360px}









/* JUNK



background-position: -50px 0; 
	top left http://christopherbollen.com/ChrisBollen/material/noise-bg2.gif
				background-position: 0 0; 

	#GUTTER_L			{position: absolute; float: left; width: 1%; height: 100%; clear: none; background-color: grey}

	#GUTTER_R			{float: right; width: 1%; height: 100%; clear: none; background-color: grey}

	#page_wrapper		{position: absolute; width: 100%; height:auto;}

*/






/* CONTACT PAGE STYLE */

/* ---------------------------------------------------------- */





.SideBar {
	float: right;
	margin-left:40px;
	border-left-width: thin;
	border-left-style: dotted;
	border-left-color: #171C4A;
	padding-left: 20px;
	display: block; 
}

.req {

	color: #699;	

}

.fieldtext{
	font-size: 12px;
	text-align: right;
	color:#5B546D;
}

.subscript{
	font-size: 10px;
	font-weight: bold;
	color:#b9c8c8;
	display: inline;
	position: abosolute;
}

.subscript p {
	margin 0;
	padding: 0; 

}

.submitemail{

	width:390px;

}

#inquiry input, textarea{
	/*background-color: #ebf3f2;
	border-image: url(../images/noise-bg2.gif) 27 27 27 27 round round; */
	border:1px solid #fafafa;
	/* background-image: url("../images/noise-bg2-light.gif") ; */
	background-position: 700px 250px;
	font-family: 'Questrial', 'Century Gothic', arial, sans-serif; 
    font-size: 12px;
    padding: 8px;
    width: 500px;
	background-color: whitesmoke;
	border: dotted 1px grey;
	
	}

#inquiry input.access {
	width:150px;
}



#inquiry input.styledbutton {
	color:#fff;
	text-transform: uppercase; 
	font-family: 'Questrial', 'Century Gothic', arial, sans-serif; 
	font-size:18px;
	width:90px;
	background-image:url(../images/background8-page2.gif);
	padding: 9px 11px 8px 12px;
	}

#inquiry input.styledbutton:hover {
	
		text-shadow: 			-5px -5px 5px 5px #fff, 0 0 30px #fff;
		-moz-text-shadow: 		-5px -5px 5px 5px #fff, 0 0 30px #fff;
		-webkit-text-shadow: 	-5px -5px 5px 5px #fff, 0 0 30px #fff;
	
	
	
	}


.story	{

	width:350px; 
	text-align:left;
	font-family:'Questrial', 'Century Gothic', arial, sans-serif; 
	font-size: 11px; 
	color: #666; 

}



h2	{

	font-family:'Questrial', 'Century Gothic', arial, sans-serif; 
	font-size: 16px; 
	color: #666;
	font-weight: bold;
	border-bottom: thick none transparent url('../images/noise-bg2.gif');
}



.col_head	{
	border-bottom: thick none transparent url('../images/noise-bg2.gif');
}



h3	{
	font-family:'Questrial', 'Century Gothic', arial, sans-serif; 
	font-size: 14px; 
	color: #003333;
	font-weight: normal;
	border-bottom: thick none transparent url('../images/noise-bg2.gif');
	margin: 20px 0;
}




/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	
/* Styles */
body {/* background-image:none; background-color: red; */}
}


/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

body {/* background-image:none; background-color: orange;*/ }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
body { /*background-image:none; background-color: yellow;*/ }
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
body {/* background-image:none; background-color: green;*/ }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
body { /*background-image:none; background-color: blue; */}
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
body { /*background-image:none; background-color: purple; */}
}








/* Smartphones (landscape) ------------------ 1 COLUMNS----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */

#PRIMARY_WELL { width:60% !important;}
.nav_header, #nav_bar a {	/*font-size: 12px !important;*/ padding: 15px !important; }
#nav_bar {	/*padding: 25px 0 24px 160px !important;*/}
.sub_nav_bar a { /*font-size: 12px !important; */ }
.thumb_box { float: right; margin: 0 0 0 15px;}


/* Desktops and laptops ------------------ 2 COLUMNS----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
#PRIMARY_WELL { width:70% !important;}
.nav_header, #nav_bar a { font-size: 18px !important; padding: 25px !important; 	 }
#nav_bar {	/*padding: 25px 0 24px 200px !important;*/}
.sub_nav_bar a { }
.thumb_box { float: left; margin: 0 15px 0 0;}
}


/* Large screens ------------------ 3 COLUMNS----------- */
@media only screen 
and (min-width : 1724px) {
/* Styles */
#PRIMARY_WELL { width:80% !important;}
.nav_header, #nav_bar a {	font-size: 18px !important; padding: 25px !important;  }
#nav_bar { /*padding: 25px 0 24px 200px !important;*/	}
.sub_nav_bar a {  }
.thumb_box { float: left; margin: 0 15px 0 0;}
}