/*!
 * 
 */

html, body
{
	font-size:			1em;
	color:				#202020;	/* Dark Gray */
	background-color:	#F0F0F0;	/* Light Gray */
	overflow:			hidden;
	margin:				0;

	font-family:		Trebuchet MS;
}

#Header
{
	display:			block;
	font-size:			0.5em;
	height:				20px;
	padding-bottom:		4px;
	border-bottom:		2px;
	border-color:		#000;
	border-bottom-style:solid;
}
#Header h1
{
	position:			fixed;
	margin-left:		10px;
	left:				0px;
	top:				-10px;
	display:			inline-block;
}
#GlobalInfo
{
	display:			inline-block;
	position:			fixed;
	right:				0px;
	font-size:			1.5em;
}

#ContainerGlobal
{
	display:			block;
}

/* Contains the search & results */
#PanelLeft
{
	min-width:			550px;
	position:			fixed;
	width:				30%;
	height:				100%;
	left:				0;
	right:				auto;

	text-align:			center;
	background-color:	#C0C0C0;	/* Light Gray */
}

/* Contains the visualisations */
#PanelRight
{
	overflow:			auto;

	position:			fixed;
	width:				70%;
	height:				100%;
	right:				0%;

	padding-top:		8px;
	text-align:			left;
	border-left:		2px;
	border-left-style:	solid;
	border-color:		#000000;
	text-align:			center;
	background-color:	#C0C0C0;	/* Light Gray */
}

/* Top-Left Contains Search Box */
#PanelSearch
{
	background-color:	#C0C0C0;	/* Light Gray */
	text-align:			left;
	height:				auto;
}

/* Search box + button */
#SearchText
{
	width:				100%;
	display:			block;
	margin:				4px;
}
#SearchText div
{
	display:			inline-block;
	padding-left:		10px;
}
#ClearTags
{
	width:				100%;
	font-size:			0.75em;
	height:				24px;
}

/* List of tags */
#TagsBox
{
	display:			block;
	font-size:			0.75em;
}
.tags-list
{
	display:			inline-block;
	width:				22%;
}


/* Bottom-Left Contains Results */
#PanelResult
{
	margin-top:			10px;
	background-color:	#C0C0C0;	/* Light Gray */
	border-top:			2px;
	border-top-style:	solid;
	border-top-color:	#000;
	background-color:	#AAA;

	height:				60%;
	background-image: linear-gradient(#AAA, #BBB, #CCC);
	background-image:-webkit-linear-gradient(#AAA, #BBB, #CCC);	/* chrome 10+, safari 5.1+ */
	overflow:			auto;	/* Shows the scrollbar if too many results vertically... */
}

.list-element
{
	display:			block;
	height:				80px;
	margin-top:			4px;
	margin-left:		3%;
	margin-right:		3%;
	background-color:	#888;
	padding:			8px;

	/* Text alignment */
	vertical-align:		middle;
	text-align:			left;
	font-size:			1.25em;	/* Larger */
	overflow:			hidden;
}
.list-element span
{
	display:			inline-block;
	position:			relative;
	bottom:				40%;
	width:				70%;
}

.list-element-selected
{
	background-image: linear-gradient( #DA9, #EBA, #EBA, #DA9 );
	background-image:-webkit-linear-gradient( #DA9, #EBA, #EBA, #DA9 );
	border:			1px;
	border-color:	#000;
	border-style:	solid;
}

.list-element-thumbnail
{
	display:		inline-block;
	position:		relative;
	border:			1px;
	border-color:	#000;
	border-style:	solid;
	height:			98%;
/* Wide images don't fit with this!
	width:			auto;
*/
	width:			25%;
}

/* Top-Right Contains 3D visualization */
#PanelVisuTop
{
	background-color:	#C0C0C0;	/* Light Gray */

	height:				0px;
}

/* Bottom-Left Contains Results */
#PanelVisuBottom
{
	background-color:	#C0C0C0;	/* Light Gray */
/*
	height:				auto;
*/
}

#TextureAndSwatches
{
	left:auto;
	vertical-align:	top;
}

#TextureContainer
{
	display:		block;
	padding-left:	10px;
	padding-top:	10px;
}

#TextureInfos
{
	position:		absolute;
	display:		inline-block;
	top:			20px;
	right:			20px;
	width:			auto;
	height:			auto;
	padding:		8px;
	border:			1px solid black;
	vertical-align:	top;
	background-color: rgba( 255, 255, 255, 0.4 );
}

.overview-thumbnail
{
	border:			2px solid #E08020;
	margin:			4px;
	max-width:		400px;
}

#SwatchesAndInfos
{
	position:		absolute;
	left:			0px;
	display:		block;
	padding-top:	10px;
}
#AllSwatches
{
	display:		inline-block;
	width:			250px;
	vertical-align:	top;
}
#SwatchInfos
{
	display:		inline-block;
	width:			auto;
	vertical-align:	top;
}
#ForCoders
{
	padding:		4px;
	background-color:#CCC;
	border:			1px;
	border-color:	#654;
	border-style:	dotted;
}
#ForArtists
{
	padding:		4px;
	background-color:#CCC;
	border:			1px;
	border-color:	#456;
	border-style:	dotted;
}
#PreferedColorSpace
{
	color:			Green;
}

.texture
{
	display:		block;
	height:			512px;
	width:			auto;
	left:			12px;
	top:			12px;
	
	border:			1px;
	border-color:	#000;
	border-style:	solid;
	background-color:#222;
}

.swatches-line
{
	display:		block;
}

.swatch
{
	display:		inline-block;
	width:			40px;
	height:			30px;
	border:			1px;
	border-color:	#000;
	border-style:	solid;
	margin-left:	auto;
	box-shadow:		2px 3px 4px 1px rgba(0,0,0,0.1)
}
.swatch-inset
{
	position:		relative;
	width:			14px;
	height:			10px;
	left:			26px;
	top:			20px;
	border:			1px;
	border-color:	#000;
	border-style:	outset;
}

.swatch-location
{
	display:		none;
	position:		absolute;
	width:			40px;
	height:			40px;
	border:			1px solid red;
	color:			red;
}

.image-infos {
	display: none;
	border: 1px solid black;
	width: 250px;
	height: auto;
	position: absolute;
	background-color: #FFDD88;
	text-align: left;
	padding: 2px;
	z-index: 100;
}

/* ===================================================
		Properties & Widgets
   =================================================== */

.ui-widget
{
	font-size: 1em;
}


/* This is the class of a div containing text (as a child div) + another child div that is the actual widget */
.UI-widget-label
{
	display:	block;

	padding-left:10px;
	padding-top: 2px;

	height:		16px;

}
.UI-widget-label .t0
{
	display:	inline-block;
	text-align: left;
	width:		80%;
}
.UI-widget-label .t1
{
	display:	inline-block;
	width:		18px;
}
.ui-checkbox
{
	display:block;
	background-image: none;
	width: 12px;
	height: 12px;
}
.checkbox-checked
{
	background-color: #000;
}
.checkbox-unchecked
{
}



/* ===================================================
		Lists
   =================================================== */
.list
{
	width:		98%;
	height:		92%;
	margin:		1%;
	padding:	0%;
	overflow:	auto;	/* Shows the scrollbar if too many BRDFs vertically... */
	
	background-image: linear-gradient(#DDD, #CCC, #BBB);
	background-image:-webkit-linear-gradient(#DDD, #CCC, #BBB);	/* chrome 10+, safari 5.1+ */
}

.list-element-BRDF
{
	width:		94%;
	height:		20px;
	margin:		1%;
	background-color: #888;
	padding:	8px;

	/* Text alignment */
	vertical-align: middle;
	text-align:	left;
	font-size:	1.5em;	/* Larger */
	overflow:	hidden;
}

.list-element-BRDF-button
{
	background-color:transparent;
	position:	relative;
	float:		right;
	right:		0px;
	top:		2px;
	cursor:		pointer; 
}

.list-element-BRDF-button:hover
{
	right:-1px;
	top:3px;
}

.list-element-BRDF-selected
{
	background-image: linear-gradient(#FDC, #DA9, #DA9, #C98);
	background-image:-webkit-linear-gradient(#FDC, #DA9, #DA9, #C98);
}