*
	{
		padding: 0;
		margin: 0;
		border: 0;
	}

	body, html
	{
		color: #000; 
		font-family: Georgia, Garamond, serif;
		height: 100%;
		background-color: #ff0000;
		/*** This is the left column background "faked" with an image. The 100px is added to have control of where the vertically repeating starts. The background color #fff (white) will be the background color for our content area ***/
	}

	body
	{
		font-size: 70%;
		min-width: 760px; /* Don't work in IE */
		min-height: 100%;
	}

	a
	{
		color: #ffcc00;
	}

	p
	{
		padding: 7px 0 7px 0;
	}

	h1, h2, h3
	{
		font-weight: bold;
		padding: 4px 4px 8px 4px;
	}

	h1
	{
		font-size: 1.4em;
		letter-spacing: 4px;
		border: 1px solid #900;
		border-bottom: none;
	}
	h2
	{
		font-size: 1.2em;
		border: 1px solid #900;
		border-top: none;
	}
	h3
	{
		font-size: 1.1em;
	}

	.clear { clear: both; }

	#mainContainer
	{
		min-height: 100%;
		background: url(graphics/frank_text.png) bottom right no-repeat;
		/*** This is the right column background "faked" with an image.  The 100px is added to have control of where the vertically repeating starts. ***/
	}

	* html #mainContainer
	{
		height: 100%; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
	}

	/**************************
	HEADER
	**************************/
	#header
	{
		background-color: #ff6630;
		padding: 10px 10px 10px 50px;
		height: 75px;
		border-bottom: 1px solid #900;
	}

	/**************************
	CONTENT AND COLUMNS
	**************************/
	.outer
	{
		padding-left: 215px; /*** Same width as margin-left for the float-wrap div ***/
		padding-right: 170px; /*** Our right column width ***/
	}

	.inner
	{
		width: 100%;
	}

	.float-wrap
	{
		float: left;
		width: 100%;
		margin-left: -215px; /*** Same length as .outer padding-left but with negative value ***/
	}

	#content 
	{
		float: right;
		margin-right: -215px; /*** Same length as .outer padding-left but with negative value ***/
		width: 100%;
		position: relative; /*** IE needs this  ***/
		background: url(graphics/countries.png) top center no-repeat;
	}

	.contentWrap
	{
		padding: 0px 5px;
	}

	

	/**************************
	LEFT COLUMN
	**************************/
	#left
	{
		float: left;
		width: 205px;
		padding: 5px;
		position: relative; /*** IE needs this  ***/
		background: url(graphics/colours.png) top right no-repeat;
	}
	/*************************
	RIGHT COLUMN
	**************************/
	#right
	{
		float: right; 
		width: 170px;
		padding: 5px;
		position: relative; /*** IE needs this  ***/
		margin-right: -170px; /** This negative margin-right value is the same as the right column width (width + padding). ***/
		position: relative; /*** IE needs this  ***/
		background: url(graphics/divisions.png) top center no-repeat;
	}

	#right li a.text
	{
		margin-bottom: 5px;
	}

	#games
	{
		position: absolute;
		top: 5px;
		left: 0px;
		width: 40px;
		height: 165px;
		z-index: 2;
	}

	#games a
	{
		display: block;
		margin-bottom: 5px;
		margin-left: -5px;
	}

	#games a:hover
	{
		margin-left: -2px;
	}

	#left, #right, #content
	{
		padding-top: 75px;
	}

	a.flag
	{
		display: block;
		float: left;
		width: 50px;
		height: 48px;
		margin-bottom: 10px;
		border: 1px solid transparent;
	}
	a.flag img
	{
		margin: 17px;
	}
	a.flag:hover, a.sel, a.sel:hover
	{
		background-color: #ffcc00;
		border: 1px solid #330000;
	}

	#frank_container
	{
		display: block;
		width: 100%;
		height: 320px;
		min-height: 320px;
		background: url(graphics/grd_white.png) 0% 100% repeat-x;
	}

	#frank_img
	{
		float: left;
		width: 25%;
		height: 305px;
		min-height: 305px;
		background:url(graphics/frank.png) bottom left no-repeat;
	}

	#frank
	{
		width: 70%;
		float: left;
		background-color: #ffffcc;
		border: 1px solid #330000;
		padding: 10px;
		line-height: 1.1em;
	}