html {
	overflow-y: scroll; 
}


body {
	background-color: #f2f2f2;
	color: #777;
	font: 10pt/13pt Arial, Helvetica, Sans-Serif;
}

#container {
	width: 596px;
	margin: auto;
	padding-bottom: 30px;
}

#container.home { 
	width: 596px;
	margin: auto;
	padding-top: 0px;
	padding-bottom: 30px;

}

#main {
width: 596px;
height: 772px;
background-image: url(../images/homepageart2.jpg);
}
	
#nametitle {
	display: block;
	width: 233px;
	height: 54px;
}	

a {
	text-decoration: none;
	color: #63AAD0;
	font-weight: bold;
}

a:hover {
	text-decoration: none;
	color: #666666;
}

.clearer {
	clear:both;
}
	
.gbriankaras {
	display: block;
	width: 233px;
	height: 54px;
	text-indent: -9999px;
}

	.gbriankaras.blue { background-image: url('../images/gbriankaras_blue.gif'); }
	.gbriankaras.green { background-image: url('../images/gbriankaras_green.gif'); }
	.gbriankaras.grey { background-image: url('../images/gbriankaras_grey.gif'); }
	.gbriankaras.lightblue { background-image: url('../images/gbriankaras_lightblue.gif'); }
	.gbriankaras.orange { background-image: url('../images/gbriankaras_orange.gif'); }
	.gbriankaras.pink { background-image: url('../images/gbriankaras_pink.gif'); }
	.gbriankaras.yellow { background-image: url('../images/gbriankaras_yellow.gif'); }
	
#frontgrid {
	width: 596px;
	height: 596px;
	background-color: #fff;
}

#grid {
	width: 596px;
	height: 596px;
	background-color: #fff;
}

		.box.yellow { background-color: #ffffd1; }
		.box.pink { background-color: #fcc3b8; }
		.box.deeppink { background-color: #f37670; }
		.box.paleteal { background-color: #e4f4f1; }

		.box.white { background-color: #fff; }
		.box.black { background-color: #000; }
		.box.lime { background-color: #e0f3cd; }
		.box.slate { background-color: #c9d0d1; }


		.box.orange { background-color: #fed699; }

		.box.bubblegum { background-color: #fcc3b8; }
		.box.peach { background-color: #ffffd1; }

		.box.grey { background-color: #c9d0d1; }
		.box.green { background-color: #73aa8d; }

		.box.blue { background-color: #519ac5; }



	.box {
		display: block;
		float: left;
		width: 116px;
		height: 116px;
		margin-right: 4px;
		margin-bottom: 4px;
	}
	
		.box2 {
		display: block;
		float: left;
		width: 116px;
		height: 116px;
		margin-right: 4px;
		margin-bottom: 0px;
	}
	
		.box3 {
		display: block;
		float: left;
		width: 116px;
		height: 116px;
		margin-right: 0px;
		margin-bottom: 0px;
	}
	
		.box4 {
		display: block;
		float: left;
		width: 116px;
		height: 116px;
		margin-right: 0px;
		margin-bottom: 4px;
	}
	
		.box.last { margin-right: 0; }
		
		.box.bottom { margin-bottom: 0; }
	

		
#returnhome {
	display: block;
	float: right;
	width: 97px;
	height: 18px;
	background: url('../images/returnhome.gif') top left no-repeat;
	text-indent: -9999px;
	margin-top: 26px;
}


	#returnhome:hover { background-position: 0 -18px; }


#wrapper {
	background-color: #fff;
	clear: both;
	padding: 0 37px;
	padding-bottom: 10px;
}
#wrapper.welcome {
	padding: 0;
	padding-top: 0;
	background-image: url(images/homepageart2.jpg);
}
#welcometop {
	width: 434px;
	margin: auto;
}
	#header_welcome {
		width: 81px;
		height: 17px;
		background-image: url('../images/header_welcome.gif');
		margin-bottom: 30px;
		text-indent: -9999px;
	}
	
	#welcomecopy {
		width: 434px;
		height: 37px;
		text-indent: -9999px;
		background-image: url('../images/welcomecopy2.gif');
	}
	
	#welcomenav {
	margin-top: 50px;
	margin-bottom: 20px;
	height: 120px;
	float: right;
	}
	
	#welcomenav2 {
	margin-top: 0;
	margin-bottom: 0;
	height: 120px;
	float: right;
	}	

	.welcome img { margin-bottom: -5px; }
	

	.minibox {
		display: block;
		float: right;
		width: 70px;
		height: 70px;
		margin-right: 4px;
		margin-bottom: 0px;
	}


	#mininav {
	width: 250px;
	height: 70px;
	margin-bottom: 20px;
	float: right;
	}
	


#thumbs {
	background-color: #c3d2d9;
	text-align: left;
	width: 500px;
	min-height: 100%;
	padding: 12px 0 12px 12px;
	overflow: auto;
}	

#thumbs2 {
	background-color: #dddddd;
	text-align: left;
	width: 500px;
	min-height: 100%;
	padding: 12px 0 12px 12px;
	overflow: auto;
}	


#subpagetop {
	clear: both;
}
	#header_about {
		width: 87px;
		height: 24px;
		background-image: url('../images/header_aboutme.gif');
		margin-bottom: 20px;
		text-indent: -9999px;
	}
	
	#aboutme_copy {
		width: 289px;
		height: 261px;
		background-image: url('../images/aboutme_copy.gif');
		text-indent: -9999px;
	}
	
		#aboutme_copy2 {
		width: 289px;
		height: 225px;
		font: 11pt Arial, Helvetica, Sans-Serif;
		font-weight: bold;
		line-height: 20px;
    	padding-top: 42px;
	}
	
	
		#aboutme_copy3 {
		width: 289px;
		font: 11pt Arial, Helvetica, Sans-Serif;
		font-weight: bold;
		line-height: 20px;
    	padding-top: 0;
	}	

		#whatsnew {
		width: 500px;
		font: 10pt Arial, Helvetica, Sans-Serif;
		font-weight: bold;
		line-height: 20px;
    	padding-top: 200px;
		background-image: url(../images/whatsnew.jpg);
		background-position: top left;
		background-repeat: no-repeat;
		padding-left: 20px;
		margin-top: 50px;
		clear: both;
	}	
	
	
		#whatsnew2 {
		width: 500px;
		font: 10pt Arial, Helvetica, Sans-Serif;
		font-weight: bold;
		line-height: 20px;
    	padding-top: 0;
		background-image: url(../images/whatsnew.jpg);
		background-position: top left;
		background-repeat: no-repeat;
		padding-left: 20px;
		padding-top: 75px;
		margin-top: 50px;
		clear: both;
	}		
		#knowmore {
		width: 520px;
    	padding-top: 2;
		margin-top: 50px;
		clear: both;
	}	
	
	#justthefacts {
		width: 300px;
		padding: 4px 4px 4px 14px;
		margin-top: 25px;
		margin-left: 45px;
		background-color: #FCF0D6;
			}
	
	#subpagetop img { float: right; }
	
	
.homepageimage {
display: none;
}

	
.dottedline {
	display: block;
	clear: both;
	width: 522px;
	height: 2px;
	background-image: url('../images/dottedline.gif');
	background-repeat: repeat-x;
}

.noline {
	display: block;
	clear: both;
	width: 522px;
	height: 2px;
}

.backtotop {
	clear: both;
	display: block;
	width: 93px;
	height: 17px;
	background-image: url('../images/backtotop.gif');
	text-indent: -9999px;
}
	.backtotop:hover { background-position: 0 -17px !important; }

#header_booktitles {
	width: 97px;
	height: 24px;
	background-image: url('../images/header_booktitles.gif');
	margin-bottom: 20px;
	text-indent: -9999px;
}

.noshow { display: none; }

#booktitles_copy {
	width: 480px;
	height: 59px;
	background-image: url('../images/booktitles_copy.gif');
	text-indent: -9999px;
}

#booktitles_seetitles {
	display: block;
	width: 104px;
	height: 18px;
	background-image: url('../images/booktitles_seetitles.gif');
	text-indent: -9999px;
	float: left;
}
	
#booktitles_seeawards {
	margin-top: 0px;
	display: block;
	width: 81px;
	height: 18px;
	background-image: url('../images/booktitles_seeawards.gif');
	text-indent: -9999px;
	float: right;
}

#booktitles_grid {
	margin: 0 -37px;
	width: 596px;
	height: 596px;
		text-indent: -9999px;
}
	#booktitles_grid a.box.booktitle.b1 { background-image: url('../images/booktitles1.gif'); }
	#booktitles_grid a.box.booktitle.b2 { background-image: url('../images/booktitles2.gif'); }
	#booktitles_grid a.box.booktitle.b3 { background-image: url('../images/booktitles3.gif'); }
	#booktitles_grid a.box.booktitle.b4 { background-image: url('../images/booktitles4.gif'); }
	#booktitles_grid a.box.booktitle.b5 { background-image: url('../images/booktitles5.gif'); }
	#booktitles_grid a.box.booktitle.b6 { background-image: url('../images/booktitles6.gif'); }
	#booktitles_grid a.box.booktitle.b7 { background-image: url('../images/booktitles7.gif'); }
	#booktitles_grid a.box.booktitle.b8 { background-image: url('../images/booktitles8.gif'); }
	#booktitles_grid a.box.booktitle.b9 { background-image: url('../images/booktitles9.gif'); }
	#booktitles_grid a.box.booktitle.b10 { background-image: url('../images/booktitles10.gif'); }
		#booktitles_grid a:hover { background-position: 0 -116px !important; }


#booktitles_grid2 {
	margin: 0 -37px;
	width: 596px;
	height: 596px;
		text-indent: -9999px;
}
	#booktitles_grid2 a.box.booktitle.b1 { background-image: url('../images/booktitles1.gif'); }
	#booktitles_grid2 a.box.booktitle.b2 { background-image: url('../images/booktitles2.gif'); }
	#booktitles_grid2 a.box.booktitle.b3 { background-image: url('../images/booktitles3.gif'); }
	#booktitles_grid2 a.box.booktitle.b4 { background-image: url('../images/booktitles4.gif'); }
	#booktitles_grid2 a.box.booktitle.b5 { background-image: url('../images/booktitles5.gif'); }
	#booktitles_grid2 a.box.booktitle.b6 { background-image: url('../images/booktitles6.gif'); }
	#booktitles_grid2 a.box.booktitle.b7 { background-image: url('../images/booktitles7.gif'); }
	#booktitles_grid2 a.box.booktitle.b8 { background-image: url('../images/booktitles8.gif'); }
	#booktitles_grid2 a.box.booktitle.b9 { background-image: url('../images/booktitles9.gif'); }
	#booktitles_grid2 a.box.booktitle.b10 { background-image: url('../images/booktitles10.gif'); }
	#booktitles_grid2 a.box.booktitle.b11 { background-image: url('../images/booktitles11.gif'); }
	#booktitles_grid2 a.box.booktitle.b12 { background-image: url('../images/booktitles12.gif'); }
	#booktitles_grid2 a.box.booktitle.b13 { background-image: url('../images/booktitles13.gif'); }
	#booktitles_grid2 a.box.booktitle.b14 { background-image: url('../images/booktitles14.gif'); }
	#booktitles_grid2 a.box.booktitle.b15 { background-image: url('../images/booktitles15.gif'); }
	#booktitles_grid2 a.box.booktitle.b16 { background-image: url('../images/booktitles16.gif'); }
		#booktitles_grid2 a:hover { background-position: 0 -116px !important; }


#booktitles_booktitles {
	float:left;
	display: block;
	width: 97px;
	height: 24px;
	background-image: url('../images/header_booktitles.gif');
	margin-bottom: 20px;
	margin-top: 75px;
	text-indent: -9999px;
}
.year {
	width: 522px;
	height: 13px;
	margin: 10px 0;
	margin-top: 30px;
	text-align:center;
	background-image: url('../images/year_dotted_line.gif');
	font-weight:bold;
	font-size:12px;
}

.year.wide {
	background-image: url('../images/year_wide_dotted_line.gif');
}
	
#booktitles_awards {
	clear: both;
	display: block;
	width: 66px;
	height: 24px;
	background-image: url('../images/booktitles_awards.gif');
	margin-bottom: 20px;
	margin-top: 35px;
	text-indent: -9999px;
}

#header_schoolvisits {
	width: 240px;
	height: 24px;
	background-image: url('../images/header_schoolvisits.gif');
	background-repeat: no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
}


#header_whatnots {
	width: 240px;
	height: 24px;
	background-image: url('../images/header_whatnots.gif');
	background-repeat: no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
}

#header_wallpaper {
	width: 240px;
	height: 24px;
	background-image: url('../images/header_wallpaper.gif');
	background-repeat: no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
}

#header_sketches {
	width: 240px;
	height: 24px;
	background-image: url('../images/header_sketches.gif');
	background-repeat: no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
}	

#header_blog {
	width: 240px;
	height: 24px;
	background-image: url('../images/header_blog.gif');
	background-repeat: no-repeat;
	margin-bottom: 20px;
	text-indent: -9999px;
}
	
.fullwidth { margin: 0 -37px; }

#header_blog {
	width: 97px;
	height: 24px;
	background-image: url('../images/header_blog.gif');
	margin-bottom: 20px;
	text-indent: -9999px;
}

#blog_copy {
	width: 303px;
	height: 79px;
	background-image: url('../images/blog_copy.gif');
	text-indent: -9999px;
}

#blog_newbooks {
	width: 100px;
	height: 24px;
	background-image: url('../images/blog_newbooks.gif');
	text-indent: -9999px;
}

#blog_happenings {
	width: 106px;
	height: 24px;
	background-image: url('../images/blog_happenings.gif');
	text-indent: -9999px;
}

.floatleft { float: left; }
.floatright { float: right; }
.center { clear: both; display: block; margin: auto; }

#pumpkin_copy {
	margin-left: 110px;
}

#tippy_copy { margin-left: 300px; }
.dottedline.tippy { margin-top: 330px; }

#today_copy {
	margin-left: 135px;
}

.today_dog { margin-right: 100px; }

#header_contactme {
	width: 105px;
	height: 24px;
	background-image: url('../images/header_contactme.gif');
	margin-bottom: 20px;
	text-indent: -9999px;
}

#contactme_copy {
	width: 288px;
	height: 18px;
	background-image: url('../images/contactme_copy.gif');
	text-indent: -9999px;
	float: left;
}

		#contactme_copy2 {
		width: 510px;
		font: 11pt Arial, Helvetica, Sans-Serif;
		font-weight: bold;
		line-height: 20px;
	}

	#contactme_email {
		display: block;
		width: 157px;
		height: 18px;
		background-image: url('../images/contactme_email.gif');
		text-indent: -9999px;
		float: left;
	}
		#contactme_email:hover { background-position: 0 -18px; }

.thumbnailer {
	float: left;
	margin: 6px 6px 6px 6px;
	border: 0;
}

.text {
	padding-bottom: 10px;
}

.clear {
clear: both;
}

.brianphoto {
	valign: bottom;
}

.thumbright {
	float: right;
	margin-right: 10px;
	margin-left: 10px;
}

.thumbleft {
	float: left;
	margin-right: 10px;
	margin-left: 10px;
}

.right200 {
	margin-left: 200px;
}

.topspace {
margin-top: 0px;
}

.bookdesc {
	width: 85%;
	padding: 5px;
	margin-left: 45px;
	font: 11pt Arial, Helvetica, Sans-Serif;
	font-weight: bold;
	line-height: 20px;
}

.bookicon {
float: left;
padding-right: 12px;
padding-bottom: 55px;
overflow: auto;
}

@media screen and (max-width: 600px) {


#container {
	width: 100%;
	margin: auto;
	padding: 0;
}

#wrapper {
padding: 5px;
}


#nametitle {
display: inline;
width: 100%;
height: auto;
clear: both;
padding-left: 15px;
}

#returnhome {
margin-top: 5px;
margin-right: 10px;
}

#mininav {
width: 100%;
height: auto;
float: right;
margin-left: 20px;
}

.topspace {
margin-top: 0px;
}

#main {
max-width: 100%;
height: auto;
background-image: none;
}

img {
max-width: 100%;
height: auto;
}

#background-image {
max-width: 100%;
height: auto;
}


#container.home {
max-width: 100%;
height: auto;
padding: 0px;
}

#subpagetop img {
float: left;
}

#contactme_copy2 {
width: 100%;
}

.homepageimage {
display: block;
max-width: 100%;
height: auto;
}

.brianphoto {
width: 100%;
height: auto;
padding-right: 20px;
clear: right;
overflow: hidden;
}

#whatsnew {
max-width: 100%;
background-image: none;
padding: 0px;
margin: 0px;
}

#aboutme_copy3 {
width: 100%;
}

.bookdesc {
max-width: 98%;
margin: 0px;
}

.bookicon {
padding-top: 0px;
padding-left: 2px;
padding-right: 10px;
padding-bottom: 0px;
overflow: auto;
}

.clear {
clear: none;
max-width: 90%;
}

		#knowmore {
		max-width: 100%;
    	padding-top: 2;
		margin-top: 50px;
		clear: both;

}

}