.deckComponent .hidden {
	display: none;
}

.deckComponent .x-panel-header,
.deckComponent .x-panel-body,
.deckComponent .x-panel {
	border-style: none;
}

.deckComponent {
	height: 100%;
}

.deckComponent .x-cardpanel {
	overflow: auto;
}

.deckComponent .settingsPanel {
}

.deckComponent .deckHeaderCog {
	background-image: url("images/cog.png");
	background-position: right;
	cursor : pointer;
    background-repeat: no-repeat;
    float : right;
    width : 21px !important;
}

.deckComponent .deckHeaderCog.disabled {
	background-image: none;
}

.deckComponent .deckHeaderAddButton {
	background-image: url("images/deck/add.png");
	background-position: right;
	cursor : pointer;
    background-repeat: no-repeat;
    float : right;
    width : 21px !important;
}

.deckComponent .deckHeaderRemoveButton {
	background-image: url("images/deck/remove.png");
	background-position: right;
	cursor : pointer;
    background-repeat: no-repeat;
    float : right;
    width : 21px !important;
}

.deckComponent .deckHeaderCardReorderButton {
	background-image: url("images/deck/reorder.png");
	background-position: right;
	cursor : pointer;
    background-repeat: no-repeat;
    float : right;
    width : 21px !important;
}

.deckComponent .deckHeaderCardTitleChangeButton {
	background-image: url("images/deck/title.png");
	background-position: right;
	cursor : pointer;
    background-repeat: no-repeat;
    float : right;
    width : 21px !important;
}

.deckComponent #logOutput {
	width: 90%;
	margin: 2em 0 0 1em;
	height: 400px;
}

.deckComponent #title {
	font-family:verdana;
	font-size:25px;
	text-align:left
}

.deckComponent #workbenchInputs {
	width: 255px;
	float: center;
	margin-left: 15%;
}

.deckComponent .deckTitle{
	width:90%;
	float: left;
	clear: none;
	margin:auto;
	text-align : center;
}

.deckComponent .demoDeckTitle{
	width:50%;
	float: left;
	clear: none;
	margin:auto;
	text-align : center;
}

.deckComponent .cardHeader {
	padding: 5px;
}

.deckTitle{
	width:90%;
	float: left;
	clear: none;
	margin:auto;
	text-align : center;
}

.deckComponent .x-panel-body {
	background-color: #2A2A2A;
}

.deckComponent .x-panel-header {
	//border-color: #5A5A5A;
}

.deckComponent .x-panel-header-text,
.deckComponent .x-form-cb-label,
.deckComponent .SimpleFormHolder label {
	color: white;
}

.x-tool {
	background-image: url(images/tool-sprites.gif);
}

.backFace {
	background-color: #2A2A2A;
	height: 100%;
}

/*
	How to use the flippable class to make a panel rotate:
	Ingredients: 1 parent container with class name 'flippable'
	That parent must contain two child nodes - the back first and then the front.
	Each face must have the classes "face" and then "frontFace" and "backFace" on each. Like so:

	<div id="container" class="flippable" style="height: 50px; width: 100px">
		<div class="face backFace" style="background-color: #eaa">Back</div>
		<div class="face frontFace" style="background-color: #aea">Front</div>
	</div>
	<button onclick="javascript:document.getElementById('container').className = 'flippable flipped'">Flip To Back</button>
	<button onclick="javascript:document.getElementById('container').className = 'flippable'">Flip To Front</button>

	As shown in this example, just use js to add and remove the flipped class to make the rotation transition happen.
	Some height, width and background color element styles have been added here. You will need to set background colors on your
	front and back faces too to prevent seeing through to the back face of the flipped element.
*/

.flippable, .flippable * {
	/* disabling flip for the time being */
	/*transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;

	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;

	perspective:1500;
	-webkit-perspective:1500;
	-moz-perspective:1500;
	-ms-perspective:1500;
	-o-perspective:1500;*/
}

.flippable.flipped {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
}

.flippable .face {
	width: 100%;
}

.flippable .frontFace {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.flippable .backFace {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.flipped .backFace {
	z-index: 4;
}

