/****************************************************************************
 * Body and Sliding Doors
 ****************************************************************************/

html, body { 
	height: 100%; margin: 0px; padding: 0px; /* Set height on html and body so that the child divs can stretch 100% */
	background-color: #000;
	color: #ccc;
	background: #000 url(../image/door.jpg) top left repeat;
} 

#tbodywrapper { 
	margin: 0 auto;
	width: 984px; /* same width as the header background image */
}

#tbody {
	position: relative;
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	background: #000 url(../image/doors.jpg) top left repeat-y;
}
#tmain {
	margin: 0 7px;
}

/****************************************************************************
 * Main 3 Columns
 * Inspired by http://www.ground.cz/luci/css/lite/test/lite.html
 ****************************************************************************/

#tbody {
	/* MJ - not sure display table here is good if the child elements dont get table-cell ?	
	display: table; table-layout: fixed; /* keep "display: table" here to push the right column to the right when some unwrappable stuff appears in the center col */
	width: 100%;/* this is needed to keep the width to the maximum available */
}

/* *** THE MAIN LAYOUT *** */
#theader {
	height: auto;
	width: 100%;
}
#tc1c2 {
	display: block;/* keep "display: block" here to prevent layout breakage (mostly in Firefox) */
	float: left;/* from IE 5.5 to IE 7 it works only when it is floated this way */
	width: 100%;
}
/* here we redefine the float for standards compliant browsers */
#tc1c2[id] {
	float: right;
	width: 100%; /* CSS validation suggests floats require width */
}
/* and this is a special workaround for IE 7 */
*:first-child+html
#tc1c2 {
	float: left;/* for IE 7 it must be redefined back to left */
	margin-left: -180px;
	padding-left: 180px;
	width: auto;
}
#tc1c2
    #tcol1wrapper {
		float: right;
		width: 100%;
		min-width: 100%;/* this is especially needed for MSIE 7 */
	}
#tc1c2
	#tcol1wrapper
		#tcol1.tmarginleft {
			margin-left: 180px;/* change this in your stylesheet too when you change the width of #col2 */
		}
#tc1c2
	#tcol1wrapper
		#tcol1.tmarginright {
			margin-right: 180px;/* change this in your stylesheet too when you change the width of #col3 */
		}
#tc1c2
	#tcol1wrapper
		#tcol1
			.tcontent {
				width: auto !important;
				width /**/:100%;/* workaround for IE 5.x:
				tables set to 100% width need parent element width of 100% as well*/
	    	}
#tc1c2
	#tcol2 {
		float: right;/* from IE 5.5 to IE 6 it works only when it is floated this way */
		margin-right: -100%;/* this way we set the position of the second column (appears visually as first column) in all browsers */
		overflow: hidden;/* prevent overflowing of the content out of the column */
		width: 180px;
	}
/* here we redefine the float for standards compliant browsers and IE 7 */
#tc1c2[id]
	#tcol2 {
		float: left;/* this time IE 7 differs from its predecessors */
	}
/* this is a special workaround for IE 7 */
*:first-child+html
#tc1c2[id]
	#tcol2 {
		margin-left: 0;
	}

#tcol3 {
	float: left;/* for all versions of IE from 5.5 to 7 it works only when it is floated this way again */
	margin-left: -180px;/* once more a speciality for IE to display the 3rd column; change this if you change the width too */
	overflow: hidden;/* prevent overflowing of the content out of the column */
	width: 180px;
}

/* ... and this way we display the third column in all other good browsers than MSIE */
html>/*leave this comment here - it acts as an universal anti-IE hack !*/body
#tcol3[id] {
	float: right;
	margin-right: -100%;
}
#tfooter {background-color: inherit; color: inherit; clear: both; width: 100%;}
/*.footerbgtrap {background-color: inherit; color: inherit;}/* apply the same bg as #footer - this little workaround for MSIE that tends to display the footer partly without the background specified */
.tcontent {padding: 5px;}/* this takes care of all the content default appearance */

/****************************************************************************
 * Main 3 Columns Extra Styling
 ****************************************************************************/

#tc1c2 {
	position: relative;
	margin-top: -65px;
	min-height: 550px; /* sum height of background image + margin-top to prevent the footer going overlapping the image */
	background: transparent url(../image/background-25.jpg) no-repeat 0 65px; /* offset top the same as margin-top */
	z-index: 1;
}

#tcol2, #tcol3 {
	margin-top: 65px; /* same margin-top as #tc1c2 */
}

/* make main content flow around header background */
#tcol1 > .tcontent > .floatleft, #tcol1 > .tcontent > .floatright {
	width: 40px; /* was 50 but .tcontent adds padding */
	height: 30px;
	margin-top: 25px; /* same as height below */
}
#tcol1 > .tcontent > .floatleft + .floatleft, #tcol1 > .tcontent > .floatright + .floatright {
	width: 100px; 
	height: 25px; /* was 30 but .tcontent adds padding */
	margin-top: 0;
}

/****************************************************************************
 * Headers 
 ****************************************************************************/
#theader {	
	/* this parent div needs position: relative; so that child divs can position: absolutely; 
	 * within this parent div and so that z-index takes effect */
	position: relative;
	width: 100%;
	min-height: 228px; /* height of background image */
	background: url(../image/header.jpg) top left no-repeat;
}
#theadertop, #theaderbar, #theader1, #theader2, #theader3, #theader4, #theader5, #theader6 {
	position: absolute;
	text-align: center;
	overflow: hidden;
	z-index: 1;
}
#theadertop {
	top: 0;
	left: 325px;
	width: 316px;
	height: 110px;
	display: table;
	table-layout: fixed;
}
#theadertop img {
	padding: 0;
}
#theaderbar {
	top: 114px; 
	left: 268px;
	width: 432px;
	height: 38px;
}
#theader1, #theader2 {
	height: 48px;
	width: 230px;
	top: 16px;
	margin: 0 7px;
}
#theader1, #theader3, #theader5 {
	left: 0;
}
#theader2, #theader4, #theader6 {
	right: 0;
}
#theader3, #theader4 {
	height: 57px;
	width: 86px;
	top: 65px;
	margin: 0 65px;
}
#theader5, #theader6 {
	height: 25px;
	width: 90px;
	top: 138px;
	margin: 0 60px;
}

/****************************************************************************
 * Footers 
 ****************************************************************************/

#tfooter {
	/*
	 * this parent div needs position: relative; so that child divs can position: absolutely; 
	 * within this parent div and so that z-index takes effect 
	 */
	position: relative;
	text-align:center;
	clear: both; /* clear any floats from the main content */
	height: 100%;
	background: #000 url(../image/doors.jpg) top left repeat-y;
}
#tfooter > div {
	font-size: smaller;
}
#tfootertop {
	min-height: 50px; /* height of background image */
	background: url(../image/footer-top.jpg) left bottom no-repeat;  /* get footertop image to sit at bottom */
	padding: 0 7px 11px 7px;
}
#tfootertop div.table:last-child { 
	/* you cannot float divs to bottom of container to make the content flow around
	 * like the #footerbottom. You can use sandbag technique if footer top is a fixed height.
	 * Since we have dynamic height we make the last child have extra margin instead - see next line 
	 * NOTE last-child selector is CSS3 and not CSS2.1 so this is unsupported by CSS2.1 browsers */
	height: 50px; /* set 'min' height of table to min-height of the container */
}
#tfootertop div.table:last-child div.table-cell {
	padding: 0 260px;
	vertical-align:middle;
}
#tfooterbar{
	height: 25px;
	overflow: hidden;
	padding: 11px 192px 0 197px;
	background: url(../image/footer-bottom.jpg) 0 0 no-repeat;
}
#tfooterbar div.table {
	height: 25px; /* set 'min' height of table to min-height of the container */
}
#tfooterbottom {
	/*
	 * this parent div needs position: relative; so that child divs 
	 * can position: absolutely; within this parent div
	 * and so that z-index takes effect 
	 */
	position: relative;
	min-height: 50px; /* ******************************** <-- may no longer need this cos floats have height below */
	text-align: center;
	background: url(../image/footer-bottom.jpg) 0 -36px no-repeat;
	padding: 0 7px 11px 7px;
}
#tfooterbottom div.floatleft, #tfooterbottom div.floatright { /* should be first-child on these */
	width: 120px;
	height: 40px;
}
#tfooterpanel1, #tfooterpanel2 {
	position: absolute;
	top: -75px;
	width: 100px;
	max-height: 110px;
	overflow: hidden;
}
#tfooterpanel1 {
	left: 0;
}
#tfooterpanel2 {
	right: 0;
}

/****************************************************************************
 * Common 
 ****************************************************************************/

* {
	font-family: arial, helvetica, sans-serif;
}

h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }

p, h1, h2, h3 { margin: 0.5em 0; }
p:first-child, h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

.clear { clear: both; }
.clearafter:after { 
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.floatleft { float: left; padding: 0 1em 0 0; }
.floatright { float: right; padding: 0 0 0 1em; }
img.floatleft { }
img.floatright { }

.table {
	width: 100%;
	height: 100%; /* override this to the 'min' height you need */
	display: table;
	table-layout: fixed;
}
.table-cell { /* used in conjunction with vmiddle or vbottom */
	display: table-cell;
}
.vmiddle {
	vertical-align: middle;
}
.vbottom {
	vertical-align: bottom;
}

img {
	border: 0; padding: 1em;
}
img.reflected {
	border: 0; padding: 0;
}

/* #357 menu active blue */
a:link { color: #357; } 
a:visited { color: #345; } /* dimmer */
a:hover, a:active { color: #369; } 

/* maroon for wolfenstein colors */
a:link { color: #a00; } 
a:visited { color: #711; } /* dimmer */
a:hover, a:active { color: #d00; } 

/****************************************************************************
 * Box with grey border
 ****************************************************************************/

.box {
	/*margin: auto auto;*/
	width: 100%; /* override this as needed */
}
.boxtop, .boxbottom {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.boxtl {
	width: auto;
	height: 7px; /* image height - border height */
	border-left: 4px solid #6B6766;
	border-top: 4px solid #6B6766;
	background: #24201E;
}
.boxtr {
	width: 83px;
	height: 11px;
	background-image: url('../image/box-tr.png');
	display: table-cell;
}
.boxbl {
	width: 57px;
	height: 11px; 
	background-image: url('../image/box-bl.png');
	display: table-cell;
}
.boxbr {
	width: auto;
	height: 7px; /* image height - border height */
	border-right: 4px solid #6B6766;
	border-bottom: 4px solid #6B6766;
	background: #24201E;
}
.boxmid {
	background: #24201E;
	border: 4px solid #6B6766;
	border-width: 0 4px;
	padding: 5px;	
}

/****************************************************************************
 * Menu Styles inc here because we need the joomla style menu list in the smf template
 ****************************************************************************/

ul.menu, ul.menu-horiz, ul.menu ul {
	list-style: none;
	margin: 0; padding: 0;
}
ul.menu-horiz {
	display: table;
	table-layout: fixed;
	width: 100%; 
	height: 100%;
}
ul.menu li {
	font-family: Arial Narrow Bold, Arial Narrow, sans-serif;
/*	display: table;
	table-layout: fixed;
 	width: 140px;
	height: 23px; */
	font-size: 11px;
}
ul.menu-horiz li {
	display: table-cell;
	vertical-align: middle;
}
ul.menu li a {
/*	display: table-cell; */
	display: block;
	background: url(../image/nav_icon.png) 5px 50% no-repeat;
	padding: 2px 0 2px 23px;
	vertical-align: middle;
	color: white;
	margin-bottom: 2px;
}
ul.menu-horiz li a {
	color: #fff;
	font-weight: bold; 
}
ul.menu li a, ul.menu-horiz li a {
	text-decoration: none;
	text-transform: uppercase;
}
ul.menu ul {
	/*padding-left: 1em;*/
	margin: 0 0 0 10px;
}


/* colors */
ul.menu li a {
	background-color: #500;
}
ul.menu li ul a {
	background-color: #000;
}
ul.menu li a:hover, ul.menu li#current > a {
	background-color: #a00;
}