body
{
	font-family: "Comic Sans MS", "Comic Sans", "Comic";
	font-size: 9pt;
}


H1
{
	margin-top:0.33em;
	font-size: 175%;
	letter-spacing: 0.05em;
	text-align: center;
}

.ClearFloat
{
	clear: both;
}


#TheCartoon
{
	/* display : table-cell; */
	width: 600px;	/* Width of two cells */
}



/**********
 * Images *
 **********/

IMG.LeftFloat
{
	float: left;
	vertical-align: bottom; /* ARGH! Does not work if float: left; */
	/* margin: 0px 0px 0px 0px; */
}

IMG.RightFloat
{
	float: right;
	vertical-align: bottom; /* ARGH! Does not work if float: left; */
	/* margin: 0px 0px 0px 0px; */
}



/**********
 * Header *
 **********/

.CartoonHeader
{
	font-size: 10pt;
	margin-bottom: 0.25em;
}

.CartoonHeader .CartoonHeaderText
{
	padding-top: 2.4em;
}

.CartoonHeader #ruperta
{
}

.CartoonHeader #rupertb
{
	margin: 25px 0px 25px 0px;	/* a 50 pixel height difference between the 2 images */
}


/*****************
 * Picture cells *
 *****************/

.PictureRow
{
	margin-bottom: 0.5em;
}

.PictureRow .PictureCellLeft
{
	/* border:dashed; */
	float:left;
}

.PictureRow .PictureCellRight
{
	/* border:dashed; */
	/* width: 300px; */	/* Width of a cell */
	float:right;
}

.CartoonFrame
{
}

.ImageCaption
{
	text-align: left;
	font-weight: bold;
	font-size: 10pt;
}


/***********************
 * Story at the bottom *
 ***********************/


/* I think that CSS3 might have a better way of doing columns */

.StoryAtBottom
{
	border-top-style: solid;
	padding-top: 0.5em;

	padding-bottom: 2.5em;
}

.StoryAtBottom .ColumnLeft
{
	text-align : left;
	/*
	margin : 0;
	padding-left : 1%;
	padding-right : 1%;
	*/

	width : 48%;
	/* margin-left: 1%; */

	float : left;
}

.StoryAtBottom .ColumnRight
{
	text-align : left;
	/*
	margin : 0;
	padding-left : 1%;
	padding-right : 1%;
	*/

	width : 48%;
	/* margin-right: 1%; */

	float : right;
}