/* CSS Document */
#pageWrapper { overflow:hidden; }

/*======================================================================
Structure - GAME
======================================================================*/
body.game { }
body.game #contentWrapper { padding:0; margin:0; }
body.game #contentInner { position:relative; width:auto; padding:0; margin:0; }
body.game #footer { display:none; }

/*======================================================================
Hexcell Header - GAME
======================================================================*/
body.game #hexcellHeader {  margin-bottom:0; }
body.game .hexcellHeaderInner { width: auto; padding-right:8px; }

/*======================================================================
Game Divisions
======================================================================*/
#BMBoard { position: relative; height:100%; }
#BMBoard .bmSidePanel { position:absolute; top:0; right:0; width:500px; background:#EEE; }
#BMBoard .bmFootPanel { position:absolute; bottom:0; left:0; width:100%; height: 90px; background:#EEE; }

/*======================================================================
	Board
======================================================================*/
.bmFrame { position:absolute; top:0; left:0; margin:0; width:50%; height:50%; overflow:hidden; }
.bmPane { position: absolute; }
.bmBackground { position: absolute; z-index: 5; background: #B7BE9D url('../images/fields.gif') top left repeat; }
.bmHexgrid { position: absolute; z-index: 10; background: url('../images/hex.gif') top left repeat; }
.bmPlane, .bmGhost { position: absolute; height: 92px; width: 86px; background: url('../images/planes/anonymous.png') 0 0 no-repeat; z-index: 30; }
.bmGhost { z-index: 28; }
.bmPlaneMini { position: absolute; width: 43px; height: 46px; background: url('../images/planes/anonymous.png') 0 -92px no-repeat; }

/*======================================================================
	Board - Start
======================================================================*/
#bmStartGridAllies, #bmStartGridGerman { position: absolute; z-index: 25; }
.bmStartCell { position: absolute; text-align: center; cursor: pointer; }
#bmStartGridAllies .bmStartCell { background: url('../images/faction_allied.gif') center center no-repeat; }
#bmStartGridGerman .bmStartCell { background: url('../images/faction_german.gif') center center no-repeat; }

/*======================================================================
	Side Panel
======================================================================*/
.bmSidePanel .bmSidePanelContent { position:absolute; top:64px; width:500px; overflow:hidden; }
.bmSidePanel .bmSidePanelContent #summaryContainer {  }
.bmSidePanel .bmSidePanelContent #planeDetailContainer {  }

/*======================================================================
	Side Panel - Controls
======================================================================*/
.bmSidePanel #bmControls { height:60px; margin:0; text-align:center; }
.bmSidePanel #bmControlCenter { width:auto; height:58px; text-align:center; padding:0 4px; margin:4px 314px 0 68px; background:#FFF; border:1px solid #DDDDDD; }
.bmSidePanel #bmControlRight { float:right; width:300px; height:16px; padding: 42px 3px 0 3px; margin:0 4px 0 0; background:#FFF url('../images/game_title.jpg') center center no-repeat; border:1px solid #DDDDDD; text-align:left; }
.bmSidePanel #bmControlRight .titlebutton { display:inline-block; padding:0 4px 2px 4px; margin:0 2px 0 0; background:#000; color:#FFF; text-decoration:none; }
.bmSidePanel #bmControlRight .titlebutton:hover { background:#333; }

.bmSidePanel #controlsTurnNumber { margin:3px 0; width:auto; font-size: 120%; padding: 3px 0; text-align:center; background:#EEE; border:1px solid #DDDDDD; }
.bmSidePanel .bmControls img.control { vertical-align: middle; cursor: pointer; border: 0; padding-top: 2px; }
.bmSidePanel #bmControls .miniMap { position:relative; float:left; width:58px; height:58px; margin-left:4px; background: #B7BE9D url('../images/fields_mini.gif') top left repeat; border:1px solid #999999; }
.bmSidePanel #bmControls .miniMap .hilite { position:absolute; width:28px; height:28px; border:1px solid #66F; background:#858DD7; cursor:move; }

#pollIndicator { padding: 0; border: 0; width: 16px; height: 16px; }


/*======================================================================
	Side Panel - Modules
======================================================================*/
.sideModule { width: 490px; padding: 4px 4px 0 4px; }
.smTitle { position: relative; padding: 4px 8px 0 8px; height: 20px; font-weight: bold; color: #FFF; background: #858DD7; cursor:pointer; }

.smContainer { background:#FFF; border:1px solid #CCC; border-top:none; overflow-y:scroll; height:190px; 
	border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; -khtml-border-radius: 0 0 0 6px; }
.smContainerScroll { padding:4px; }

.rolloverUserControl { margin-top:4px; padding:4px; border:1px solid #CCC; }

/*======================================================================
	Side Panel - Tailing
======================================================================*/
.rolloverTailing { margin-top:4px; padding:4px; border:1px solid #CCC; }
.tailBlock { position:relative; float:left; width:63px; height:40px; margin-right:4px; padding:1px; border:1px solid #CCC; }
.tailBlock.selected { padding:0; border:2px solid #858DD7; }
.tailBlock .bmPlaneMini{ height:40px; background-position:-258px -92px; }
.tailBlock .tailDirection { width:20px; font-size:18px; padding-top:10px; text-align:center; float:right; }

/*======================================================================
	Action bar
======================================================================*/
#bmActionBar { position: fixed !important; position: absolute; left:0; bottom: 0; width: 100%; height: 90px; z-index: 100; }
#bmActionBar .background { position: absolute; width: 100%; height: 99px; overflow: hidden; border-top: 1px solid #000000; background-color:#333333; z-index: 101; }
#bmActionBar .content { position: absolute; width: 100%; top: 4px; height: 95px; overflow: hidden; z-index: 102; }
#bmActionBar .content .tabHolder { width: auto; height: 80px; margin: 0; padding: 0 4px; }

/*======================================================================
	Floating Modules
======================================================================*/
.floatNotice { position: absolute; top: 80px; width: 490px; z-index: 3000; background: #EEE; border: 1px solid #000; padding: 4px; }
.floatNotice.fnWide { width: 900px; }

.floatNotice .fnTitle { position: relative; padding: 4px 8px 0 8px; height: 20px; font-weight: bold; color: #FFF; background: #858DD7; cursor: move; }
.fnControl { width:12px; height:12px; border:2px solid #FFF; float:right; margin-left:4px; background-color: #858DD7; cursor:pointer; }
.fnControl.hover { background-color: #C8CCEE; }
.fnMinimise { background-image:url('../images/summary_minimise.gif'); }
.fnClose { background-image:url('../images/summary_close.gif'); }
.fnMinimise.max { background: url('../images/summary_maximise.gif'); }
.fnRefresh { background: url('../images/refresh_.gif'); }
.fnRefresh.refreshing { background: url('../images/refresh.gif'); }

.floatNotice .fnContainer { background: #FFF; border: 1px solid #CCC; border-top:none; padding: 4px; }

.floatNotice.fnWide .fnContainer { overflow-y:scroll; height:500px; padding: 0;
	border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; -khtml-border-radius: 0 0 0 6px; }
.floatNotice.fnWide .fnContainer .fnContainerScroll { padding:4px; }

/*======================================================================
	Summary Messages
======================================================================*/
#turnMessages .message { padding:5px 0; }
#turnMessages .message .meta { width:194px; float:left; }
#turnMessages .message .meta.plane { position:relative; width:50px; height:46px; }
#turnMessages .message .meta.plane .miniplane {
	position:absolute;
	top:0;
	right:5px;
	width:43px;
	height:46px;
	background:url('../images/planes/anonymous.png') -258px -92px no-repeat;
}
#turnMessages .message .meta.attack {
	position:relative;
	width:194px;
	height:92px;
	background:url('../images/message_attack_bg.gif') left top no-repeat;
}
#turnMessages .message .chit {
	position:absolute;
	left:89px;
	width:16px;
	height:16px;
	background-position:top left;
	background-repeat:no-repeat;
	margin:0 0 4px 0;
	text-align:center;
	color:#FFF;
	font-weight:bold;
	font-size:13px;
}
#turnMessages .message .chitCV 		{ background-image:none; color:#666; top:4px; }
#turnMessages .message .chitDie 	{ background-image:url('../images/tab_icon_die.gif'); color:#666; top:19px; }
#turnMessages .message .chitBlue 	{ background-image:url('../images/tab_icon_blue.gif'); top:58px; }
#turnMessages .message .chitRed 	{ background-image:url('../images/tab_icon_red.gif'); top:76px; }
#turnMessages .message .text 			{ padding:2px 4px; font-size:80%; } 
#turnMessages .message .text.attacktext { margin-left:207px; padding:2px 4px; } 
#turnMessages .message .text.planetext 	{ margin-left:50px; padding:2px 4px; } 
#turnMessages .message .text p { margin: 0; padding: 0; }
#turnMessages .message .text .title { color:#FFF; background:#858DD7; padding:2px 4px; }
#turnMessages .message .text .secret { color:#900; }

/*================================================
	Action bar tabs
================================================*/
.actionbarTab { position:static; float:left; margin:0 2px 0 0; padding:0; width:160px; height:73px; cursor:pointer; }
.actionbarTab .abtTitle { position:relative; padding:0 16px 0 8px; height:18px; color:#FFF; background:#858DD7; }
.actionbarTab .abtBody { position:relative; height:60px; padding:0 8px 0 50px; background:#FFF; border:1px solid #DDD; border-top:none; }

.actionbarTab.open .abtTitle { background: #3D4C6B; }
.actionbarTab.open .abtBody { border-color:#BBB; }

.actionbarTab .abtTitle .lock { position:absolute; top:4px; right:4px; border:1px solid #FFF; width:6px; height:6px; background:url('../images/tab_lock_off.gif') 0 0 no-repeat; z-index:2; }
.actionbarTab .abtTitle .lockOn { background-image: url('../images/tab_lock_on.gif'); }
.actionbarTab .abtTitle .lockDead { background-image: url('../images/tab_lock_red.gif'); }

.actionbarTab .abtBody .planeName { display: block; font-size: 80%; }
.actionbarTab .abtBody .plane { position:absolute; top:1px; left:1px; width:43px; height:43px; background:url('../images/planes/anonymous.png') -258px -92px no-repeat; z-index:1; }
.actionbarTab .abtBody .scoreChanged { font-size: 80%; }
.actionbarTab .abtBody .scoreTotal { font-size: 18px; }

#pickupTab { width:150px; height:18px; }
#pickupTab .abtTitle { padding:2px 0 0 0; height:16px; text-align:center; font-size:11px; font-weight:bold; }

/*======================================================================
	Icons
======================================================================*/
.icons .icon 		{ width:16px; height:16px; background-position:top left; background-repeat:no-repeat; }
.icons .iconFire 	{ background-image:url('../images/tab_icon_fire.gif'); }
.icons .iconSmoke 	{ background-image:url('../images/tab_icon_smoke.gif'); }
.icons .iconDead 	{ background-image:url('../images/tab_icon_dead.gif'); }
.icons .iconRetired { background-image:url('../images/tab_icon_retire.gif'); }

.actionbarTab .icons { position:absolute; top:41px; left:4px; width:140px; height:16px; }
.actionbarTab .icons .icon { float: left; margin:0 4px 0 0; }

.smDetailTable .icons { }
.smDetailTable .icons .icon { margin:0 0 4px 0; }

/*======================================================================
	Detail tables
======================================================================*/
.detailTable { border:1px solid #CCC; border-width:1px 0 0 1px; }
.detailTable td { padding:2px 0 2px 2px; border:1px solid #CCC; border-width:0 1px 1px 0; vertical-align:top; font-size:80%; }
.detailTable .bmPlane { position:relative; background-position: -430px 0; }
.detailTable .value { display:block; float:right; padding-right:2px; }
.detailTable .check { float:left; width:4px; height:4px; border:1px solid #060; background-color:#FFF; margin:0 1px 1px 0; }
.detailTable .checked { background-color:#600; width:6px; height:6px; border:none; }
.detailTable .checkednow { background-color:#F00; width:4px; height:4px; border:1px solid #600; }

.sideModule .detailTable { width:463px; }
.floatNotice .detailTable { width:480px; }
.flyingBG { background: #B7BE9D url('../images/fields_mini.gif') top left repeat; }

/*======================================================================
	Maneuver Schedules
======================================================================*/
.maneuver { display:inline-block; text-align:center; margin:2px; padding:2px; font-size:10px; } 
.active .maneuver { cursor:pointer; }
.maneuver.notAllowed { opacity:0.33; filter:alpha(opacity=33); }
.maneuver.hover { padding:1px; border:1px solid #C8CCEE; }
.maneuver.selected { padding:1px; border:1px solid #858DD7; }

.maneuverTable { padding: 0; width: 100%; border: 1px solid #CCC; border-width: 1px 0 0 1px; }
.maneuverTable td { padding: 0; border: 1px solid #CCC; border-width: 0 1px 1px 0; }
.maneuverTable .subtitle td { background: #CCC; color: #FFF; padding: 0 4px; }
.mLeft { text-align: right; vertical-align: top; }
.mStraight { text-align: center; vertical-align: top; }
.mRight { text-align: left; vertical-align: top; }

.sideModule .maneuverTable { margin-top:4px; }

/*======================================================================
	Combat table
======================================================================*/
.combatTable { border: 1px solid #CCC; border-width: 1px 0 0 1px; }
.combatTable td { text-align: right; padding: 3px 8px; border: 1px solid #CCC; border-width: 0 1px 1px 0; }
.combatTable td.label { text-align: left; }

/*======================================================================
	Setup
======================================================================*/
.planeSelector_columnLeft { float: left; clear:left; width: 300px; }
.planeSelector_columnRight { margin-left: 310px; }

#planeSelector_controls { height: 45px; padding: 2px 4px; border: 1px solid #CCC; margin-bottom: 5px; }

#planeSelector_list table { border: 1px solid #CCC; border-width: 1px 0 0 1px; }
#planeSelector_list table td { padding: 2px; border: 1px solid #CCC; border-width: 0 1px 1px 0; vertical-align: top; }
#planeSelector_list table td.subhead { padding: 2px 4px; background-color: #CCC; border: 1px solid #CCC; border-width: 0 1px 1px 0; vertical-align: top; }
#planeSelector_list .plane { position: relative; height: 36px; padding: 10px 0 0 46px; border: 1px solid #FFF; font-size: 0.8em; }
#planeSelector_list .plane.hover { background-color: #C8CCEE; }
#planeSelector_list .plane.selected { background-color: #858DD7; }
#planeSelector_list .planeMini { position: absolute; top: 0; left: 2px; width: 43px; height: 46px; background: url('../images/planes/anonymous.png') 0 -92px no-repeat; }

#planeSelector_colours { height: 96px; padding:2px; margin-bottom:4px; }	
#planeSelector_colours .plane { position: relative; float: left; height: 92px; width: 86px; background: url('../images/planes/anonymous.png') -430px 0 no-repeat; margin: 2px; }
#planeSelector_colours .plane.hover { border: 2px solid #C8CCEE; margin:0; }
#planeSelector_colours .plane.selected { border: 2px solid #858DD7; margin:0; }
.selectorDetailTable { width: 400px; border: 1px solid #CCC; border-width: 1px 0 0 1px; }
.selectorDetailTable td { padding: 2px 0 2px 4px; border: 1px solid #CCC; border-width: 0 1px 1px 0; vertical-align: top; }
.check { float: left; width: 8px; height: 8px; background-color: #060; margin: 0 2px 2px 0; }