@charset "utf-8";
/* CSS Document */

/* ################# IMAGE STYLES  ##################### */

/*  Style for The WCCM Link */
.topleftpic {
	float:left;
	position:relative;
	border:#666666 solid 1px;
	border-top:0px;
	background-color:#CCCCFF;
	padding:1em;
	margin-top:0;	
	margin-right:2em;
	margin-bottom:1em;
	width:100px;
	height:100px;
}
/*  Style for John Main photo */
.toprightpic{
 	float:right;
  	position:relative;
	border:#666666 solid 1px;
	border-top:0px;
	background-color:#CCCCFF;
	padding:1em;
	margin-top:0;
	margin-left:2em;
	height:100px;
	width:auto;
	margin-bottom:1em;
}

img.bluefine {	
	border:0.1em #00F solid;
	margin:1em 0 1em 0;
	width:100%;	/* Scale to fit available width within div container */
	height:auto;
}

img.redfine {
	border:0.1em #F00 solid;
	margin:1em 0 1em 0;
	width:100%;	/* Scale to fit available width within div container */
	height:auto;
}

img.whitefine {		
	margin:1em 0 1em 0;
	height:auto;	
}

img.spacer {width:100%; height:auto; margin:1em 0 1em 0;}

.borderless  {border:0px solid}	/* to prevent enclosing blue border with hyperlinks */
.piclink {border:1px solid}			/* allow 1px blue border with hyperlinks and rollover red border */

a img {border:0px} 	/* to prevent enclosing blue border with hyperlinks */

p.piccenter{
	text-align:center;
	margin:1em;
	border-collapse:collapse;
}

.fillwidth { width:100%; height:auto; margin:0}	/* Forces image to expand or contract to the width of its container */

.fillheight	{height:100%; width:auto}	/* Forces image to expand or contract to the height of its container */
	
.picleft	{	
	float:left;
	margin:0.2em  1em 0.2em 0px;
}

.picleft50	{	
	width:50%;
	height:auto;
	float:left;
	margin:0.2em  1em 0.2em 0px;
}

.picleft p	{
	margin:0.2em 0;
}




/* ################# END OF IMAGE STYLES ################### */