/*

 * Default Layout Theme

 *

 * Created for jquery.layout 

 *

 * Copyright (c) 2010 

 *   Fabrizio Balliano (http://www.fabrizioballiano.net)

 *   Kevin Dalman (http://allpro.net)

 *

 * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)

 * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.

 *

 * Last Updated: 2010-02-10

 * NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars

 */



/*

 *	DEFAULT FONT

 *	Just to make demo-pages look better - not actually relevant to Layout!

 */
 html, body {
	margin: 0;
	padding: 0;
	background: url(../img/woodbg.jpg);
	color: #DDCC97;
	font-family: arial;
}
#copyright {
	position: fixed;
	font-size: 12px;
	bottom: 2px;
	right: 5px;
	text-shadow: 2px 2px #000;
}

#copyright, #copyright a {
	color: #FFF;
}

#deckStrength {
	width:160px;
	margin: auto;
}

/*:not(#codeInput) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}*/

table {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}
td {
	text-align: center;
	vertical-align: top;
	padding: 0;
}

@media (max-width:1200px) {
	#menu		{ width: 0px; }
	#menu div	{ display: none; }
}

@media (min-width:1200px) {
	#menu		{ width: 200px; }
	#menu div	{ display: inline-block; }
}

#menu div {
	/*background: url(../img/wood2.jpg);*/
	width: 200px;
}

#menu img {
	margin-bottom: 5px;
}

#menu a {
	display: block;
	width:182px;
	height:90px;
	background:url('../img/button.jpg');
	color: #a3d65c;
	font-weight: bold;
	text-decoration: none;
	font-size: 20px;
	margin: auto;
	text-align: center;
	vertical-align: middle;
}
#menu a span {
	line-height:20px;
	max-width:100px;
	position: relative;
	top: 1.25em;
	display: inline-block;
}

#left {
	width: 180px;
	height: 100%;
}

#right {
	width: 310px;
	height: 100%;
}

.oneLine {
	top: 1.75em !important;
}

.left {
	text-align: left !important;
	display: inline-block;
	margin: auto;
}
.left td:first-child {
	text-align: left !important;
	padding-right: 10px;
}
.wood {
	background: url(../img/wood.jpg);
}
#heroAndLandscapes, #deck, #sideDeck, #library {
	text-align: left;
	height: 100%;
	padding: 5px 0 0 5px;
	overflow: scroll;
	overflow-x: hidden;
}
#heroAndLandscapesTD {
	height: 100px;
}
#deckTD {
	height: 40vh;
}
#sideDeckTD {
	height: 100px;
}
#libraryTD {
	height: auto;
}
h2 {
	margin: 0px;
	color: #7E5038;
	background: url(../img/personalmenu.jpg);
	background-position: center;
	border-top: 1px solid #300;
	border-bottom: 1px solid #300;
	display: block;
}
.header {
	height: 30px;
}
h3 {
	text-decoration: underline;
	margin: 3px;
}

/* RATIO is 1.39459459459 */
.card, .hero, .landscape {
	border-radius: 5px;
	display: inline-block;
	width: 80px;
	height: 112px;
	background: url(../img/Blue_Plains1.jpg);
	background-size: 80px 112px;
    box-shadow: 2px 2px 2px #000;
    margin: 2px;
}
.hero {
	/*width: 61px;
	background: url(../img/Finn.jpg);
	background-size: 63px 84px;*/
}

#preview {
	border-radius: 12px;
	width: 296px;
	height: 417px;
	/*background: url(../img/The_Pig.jpg);*/
	background-size: 300px 421px;
}
#hero, #preview {
    background-repeat: no-repeat;
    background-position: center;
	margin: auto;
}
#error {
	display: block;
	margin: auto;
	width: 160px;
	height: 36px;
}
label {
	display: inline-block;
	width: 100px;
}
input, select {
	width: 100px;
	margin-bottom: 4px;
}
#sorting {
	width: 150px;
}
input[type="checkbox"] {
	width: 10px;
}
input[type="number"] {
	width: 43px;
}
textarea {
	width: 200px;
	height: 100px;
	resize: none;
}
button {
	text-align: center;
	margin-bottom: 5px;
	padding: 5px;
	display: inline-block;
	min-width: 150px;
	border: 2px solid #5E3019;
	background: url(../img/wood.jpg);
	color: #a3d65c;
	cursor: pointer;
	outline: 0;
	font-weight: bold;
}
button:hover {
	background: url(../img/wood2.jpg);
}

input:disabled, select:disabled  {
    background: #ccc;
    border-color: #ccc;
}

body {

	font-family: Geneva, Arial, Helvetica, sans-serif;

	font-size:   100%;

	*font-size:  80%;

}



/*

 *	PANES & CONTENT-DIVs

 */

.ui-layout-pane { /* all 'panes' */

	background:	#FFF; 

	border:		1px solid #BBB;

	padding:	10px; 

	overflow:	auto;

	/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,

	   otherwise you may get double-scrollbars - on the pane AND on the content-div

	   - use ui-layout-wrapper class if pane has a content-div

	   - use ui-layout-container if pane has an inner-layout

	*/

	}

	/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */

	.ui-layout-content {

		padding:	10px;

		position:	relative; /* contain floated or positioned elements */

		overflow:	auto; /* add scrolling to content-div */

	}



/*

 *	UTILITY CLASSES

 *	Must come AFTER pane-class above so will override

 *	These classes are NOT auto-generated and are NOT used by Layout

 */

.layout-child-container,

.layout-content-container {

	padding:	0;

	overflow:	hidden;

}

.layout-child-container {

	border:		0; /* remove border because inner-layout-panes probably have borders */

}

.layout-scroll {

	overflow:	auto;

}

.layout-hide {

	display:	none;

}



/*

 *	RESIZER-BARS

 */

.ui-layout-resizer	{ /* all 'resizer-bars' */

	background:		#DDD;

	border:			1px solid #BBB;

	border-width:	0;

	}

	.ui-layout-resizer-drag {		/* REAL resizer while resize in progress */

	}

	.ui-layout-resizer-hover	{	/* affects both open and closed states */

	}

	/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,

		otherwise color shifts while dragging when bar can't keep up with mouse */

	.ui-layout-resizer-open-hover ,	/* hover-color to 'resize' */

	.ui-layout-resizer-dragging {	/* resizer beging 'dragging' */

		background: #C4E1A4;

	}

	.ui-layout-resizer-dragging {	/* CLONED resizer being dragged */

		border: 	 1px solid #BBB;

	}

	.ui-layout-resizer-north-dragging,

	.ui-layout-resizer-south-dragging {

		border-width:	1px 0;

	}

	.ui-layout-resizer-west-dragging,

	.ui-layout-resizer-east-dragging {

		border-width:	0 1px;

	}

	/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */

	.ui-layout-resizer-dragging-limit {	/* CLONED resizer at min or max size-limit */

		background: #E1A4A4; /* red */

	}



	.ui-layout-resizer-closed-hover	{ /* hover-color to 'slide open' */

		background: #EBD5AA;

	}

	.ui-layout-resizer-sliding {	/* resizer when pane is 'slid open' */

		opacity: .10; /* show only a slight shadow */

		filter:  alpha(opacity=10);

		}

		.ui-layout-resizer-sliding-hover {	/* sliding resizer - hover */

			opacity: 1.00; /* on-hover, show the resizer-bar normally */

			filter:  alpha(opacity=100);

		}

		/* sliding resizer - add 'outside-border' to resizer on-hover 

		 * this sample illustrates how to target specific panes and states */

		.ui-layout-resizer-north-sliding-hover	{ border-bottom-width:	1px; }

		.ui-layout-resizer-south-sliding-hover	{ border-top-width:		1px; }

		.ui-layout-resizer-west-sliding-hover	{ border-right-width:	1px; }

		.ui-layout-resizer-east-sliding-hover	{ border-left-width:	1px; }



/*

 *	TOGGLER-BUTTONS

 */

.ui-layout-toggler {

	border: 1px solid #BBB; /* match pane-border */

	background-color: #BBB;

	}

	.ui-layout-resizer-hover .ui-layout-toggler {

		opacity: .60;

		filter:  alpha(opacity=60);

	}

	.ui-layout-toggler-hover , /* need when NOT resizable */

	.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */

		background-color: #FC6;

		opacity: 1.00;

		filter:  alpha(opacity=100);

	}

	.ui-layout-toggler-north ,

	.ui-layout-toggler-south {

		border-width: 0 1px; /* left/right borders */

	}

	.ui-layout-toggler-west ,

	.ui-layout-toggler-east {

		border-width: 1px 0; /* top/bottom borders */

	}

	/* hide the toggler-button when the pane is 'slid open' */

	.ui-layout-resizer-sliding  .ui-layout-toggler {

		display: none;

	}

	/*

	 *	style the text we put INSIDE the togglers

	 */

	.ui-layout-toggler .content {

		color:			#666;

		font-size:		12px;

		font-weight:	bold;

		width:			100%;

		padding-bottom:	0.35ex; /* to 'vertically center' text inside text-span */

	}



/*

 *	PANE-MASKS

 *	these styles are hard-coded on mask elems, but are also 

 *	included here as !important to ensure will overrides any generic styles

 */

.ui-layout-mask {

	border:		none !important;

	padding:	0 !important;

	margin:		0 !important;

	overflow:	hidden !important;

	position:	absolute !important;

	opacity:	0 !important;

	filter:		Alpha(Opacity="0") !important;

}

.ui-layout-mask-inside-pane { /* masks always inside pane EXCEPT when pane is an iframe */

	top:		0 !important;

	left:		0 !important;

	width:		100% !important;

	height:		100% !important;

}

div.ui-layout-mask {}		/* standard mask for iframes */

iframe.ui-layout-mask {}	/* extra mask for objects/applets */



/*

 *	Default printing styles

 */

@media print {

	/*

	 *	Unless you want to print the layout as it appears onscreen,

	 *	these html/body styles are needed to allow the content to 'flow'

	 */

	html {

		height:		auto !important;

		overflow:	visible !important;

	}

	body.ui-layout-container {

		position:	static !important;

		top:		auto !important;

		bottom:		auto !important;

		left:		auto !important;

		right:		auto !important;

		/* only IE6 has container width & height set by Layout */

		_width:		auto !important;

		_height:	auto !important;

	}

	.ui-layout-resizer, .ui-layout-toggler {

		display:	none !important;

	}

	/*

	 *	Default pane print styles disables positioning, borders and backgrounds.

	 *	You can modify these styles however it suit your needs.

	 */

	.ui-layout-pane {

		border:		none !important;

		background:	 transparent !important;

		position:	relative !important;

		top:		auto !important;

		bottom:		auto !important;

		left:		auto !important;

		right:		auto !important;

		width:		auto !important;

		height:		auto !important;

		overflow:	visible !important;

	}

}