div.tlForm{box-shadow:0.2em 0.2em 1em #808080;margin:0.5em 0.4em 0.8em 0.4em;padding:0.4em;background-color:#F6F6F6;}
div.tlFormTitle{font-weight:bold;padding:0.2em;background-color:#E0E0FF;margin:0 0 0.2em 0}

div.tlWindowFrame
{
	box-shadow:0.2em 0.2em 1em #808080;
	margin:0.5em 0.4em 0.8em 0.4em;
	padding:0.4em;
	background-color:#F6F6F6;
}
div.tlWindow
{
}
div.tlWindowTitle
{
	font-weight:bold;padding:0.2em;background-color:#E0E0FF;margin:0 0 0.2em 0;
}

div.tlToolbar
{
}

div.tlMain
{
	border:1px dotted grey;
	min-height:400px;/*?50%;*/
	border-radius:0.2em;
	box-shadow:1px 1px 3px #909090;
}

div.tlHeader
{
	background-color:#E3E3E3;
	box-shadow:1px 1px 3px rgba(128,128,128,0.8);
	font-weight:bold;
	padding:0.2em;
	margin:0.2em;
}

div.tlSoftTable{display:table;}
div.tlSoftTableRow{display:table-row;}
div.tlSoftTableCell{display:table-cell;}

/* MOBILE */
@media only screen and (max-device-width: 480px){
	div.tlSoftTable{display:block;}
	div.tlSoftTableRow{display:block;}
	div.tlSoftTableCell{display:block;}
}


span.tlControl
{
	cursor:pointer;
	color:navy;
	display:inline-block;
	padding:0.2em 0.6em 0.2em 0.6em;
	margin:0.1em;

	background-color: #F2F2F2;
	background-image: linear-gradient(to bottom, #F2F2F2, #D3D3D3);
	box-shadow:1px 1px 3px #909090;
}
span.tlControl:hover
{
	background-color: #E9E9E9;
	background-image: linear-gradient(to bottom, #E9E9E9, #D0D0D0)
}
span.tlControl:active/*show slight visual indication that you've clicked*/
{
	background-color: #D2D2D2;
	background-image: linear-gradient(to bottom, #D2D2D2, #B3B3B3);
}
span.tlSeparator
{
	display:inline-block;
	margin:0 0.2em 0 0.2em;
	padding:0;
	width:1px;
	color:#A0A0A0;
}

span.tlButton{border-radius:0.2em;margin:0.2em;font-size:1em;padding:0.8em;font-weight:bold;box-shadow:3px 3px 8px #808080;display:inline-block;cursor:pointer;background-color:#F0F0F0;}
span.tlButton:hover{background-color:#E0E0E0;}

/* generic stuff above */
/* less generic below - should be different .css? */

span.tlEntryListCol
{
	display:inline-block;width:140px;max-width:140px;min-width:140px;border-right:1px solid #C0C0C0;
	/*try make sure all "columns" are same width and height so list looks regular (this might need expanding on in future .. if only have 2 columns can't be hardcoded to 140px, use more space or whatever .. also it's debatable how it should work if say 11 languages in list then it doesn't all fit and these overflow to next line within the same "row", i think that's fine perosnally but some might dislike it as it is not quite the way we're used to UIs working of grid data e.g. users expect horizontal scrollbars or wahtever) */
	white-space:nowrap;overflow:hidden !important;text-overflow:ellipsis;
	margin:0;padding:0;
}
/*span.tlEntryListCol:hover{background-color:#F0F0F0;}*/
#tlEntryListItem
{
	cursor:pointer;border-top:1px solid #C0C0C0;
	/*color:navy;*/
	margin:0;padding:0;
}
#tlEntryListItem:hover
{
	background-color:#E0E0E0;
}
#tlEntryListItem:active/* some visual feedback you've clicked on a list item */
{
	background-color:#D0D0D0;
}
#tlSelectedEntry
{
	min-height:150px;
	border:1px dotted grey;
}

/*--------------------*/
div.tlSearchResult
{
	cursor:pointer;
	margin:0.8em;
	padding:0.6em;
	border:1px dotted rgb(0, 137, 208);
	box-shadow:1px 1px 0.3em #808080;
	border-radius:0.3em;
}
div.tlSearchResult:hover
{
	background-color:#F0F0F0;
	box-shadow:1px 1px 0.4em #606060;
	border:1px solid rgb(0, 137, 208);
}
div.tlSearchResult:active
{
	background-color:#E0E0E0;
}
/*--------------------*/