/* valable pour tous les devices */
#selectionPane, #social, #apps, #disqus { margin-left: 0; }
#selection {
	display: inline-block;
	vertical-align: middle;
	margin-right: 1em;
}
#social { text-align: center; }
#iconDone {
	position: absolute;	/* ne prend pas de hauteur dans la mère */
}

/* fallback en png pour les navigateurs non-svg (IE 8, android 2.3) */
.ui-icon-random { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4jaWTsRHAIAhFHcPSkbJXigyRATKCQ1lavDSY80j0IP7K4+TxUQhABDJQmasAJ5BCL0n26NKAVnkLf9Swcra2U+Ve1ABvO1kDWuVd3BwqQcerBjTFriVm8RHA6mAImCb1sgBG7TyAsurg/AC43iAh42mw/f6FwVjb52BxsbIGuHfhBluQKt7DZwprAAAAAElFTkSuQmCC) no-repeat 50% 50%; }
/* hover : #026890 */
html.inlinesvg .ui-button:hover .ui-icon-random, html.inlinesvg .ui-button.zeroclipboard-is-hover .ui-icon-random { background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDI2ODkwIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHBhdGggZD0iTSAxMy41LDNMIDUuNSwzIGMtMS4zNzUsMC0yLjUsMS4xMjUtMi41LDIuNWwwLDggYzAsMS4zNzUsIDEuMTI1LDIuNSwgMi41LDIuNWwgOCwwIGMgMS4zNzUsMCwgMi41LTEuMTI1LCAyLjUtMi41TCAxNiw1LjUgQyAxNiw0LjEyNSwgMTQuODc1LDMsIDEzLjUsM3ogTSA2LjUsMTQgYy0wLjgyOCwwLTEuNS0wLjY3Mi0xLjUtMS41cyAwLjY3Mi0xLjUsIDEuNS0xLjVzIDEuNSwwLjY3MiwgMS41LDEuNVMgNy4zMjgsMTQsIDYuNSwxNHogTSA2LjUsOGMtMC44MjgsMC0xLjUtMC42NzItMS41LTEuNXMgMC42NzItMS41LCAxLjUtMS41IHMgMS41LDAuNjcyLCAxLjUsMS41UyA3LjMyOCw4LCA2LjUsOHogTSA5LjUsMTFjLTAuODI4LDAtMS41LTAuNjcyLTEuNS0xLjVzIDAuNjcyLTEuNSwgMS41LTEuNXMgMS41LDAuNjcyLCAxLjUsMS41UyAxMC4zMjgsMTEsIDkuNSwxMXogTSAxMi41LDE0IGMtMC44MjgsMC0xLjUtMC42NzItMS41LTEuNXMgMC42NzItMS41LCAxLjUtMS41cyAxLjUsMC42NzIsIDEuNSwxLjVTIDEzLjMyOCwxNCwgMTIuNSwxNHogTSAxMi41LDhjLTAuODI4LDAtMS41LTAuNjcyLTEuNS0xLjVzIDAuNjcyLTEuNSwgMS41LTEuNSBzIDEuNSwwLjY3MiwgMS41LDEuNVMgMTMuMzI4LDgsIDEyLjUsOHogTSAxMi45NDksMkMgMTIuNzE2LDAuODYyLCAxMS43MDQsMCwgMTAuNSwwTCAyLjUsMCBDIDEuMTI1LDAsMCwxLjEyNSwwLDIuNWwwLDggYzAsMS4yMDQsIDAuODYyLDIuMjE2LCAyLDIuNDQ5TCAyLDMgYzAtMC41NSwgMC40NS0xLCAxLTFMIDEyLjk0OSwyIHoiPjwvcGF0aD48L2c+PC9zdmc+) no-repeat 50% 50%; }
/* default, active : #EAF5F7 */
html.inlinesvg .ui-icon-random, html.inlinesvg .ui-button:active .ui-icon-random, html.inlinesvg .ui-button.zeroclipboard-is-active .ui-icon-random { background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRUFGNUY3IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHBhdGggZD0iTSAxMy41LDNMIDUuNSwzIGMtMS4zNzUsMC0yLjUsMS4xMjUtMi41LDIuNWwwLDggYzAsMS4zNzUsIDEuMTI1LDIuNSwgMi41LDIuNWwgOCwwIGMgMS4zNzUsMCwgMi41LTEuMTI1LCAyLjUtMi41TCAxNiw1LjUgQyAxNiw0LjEyNSwgMTQuODc1LDMsIDEzLjUsM3ogTSA2LjUsMTQgYy0wLjgyOCwwLTEuNS0wLjY3Mi0xLjUtMS41cyAwLjY3Mi0xLjUsIDEuNS0xLjVzIDEuNSwwLjY3MiwgMS41LDEuNVMgNy4zMjgsMTQsIDYuNSwxNHogTSA2LjUsOGMtMC44MjgsMC0xLjUtMC42NzItMS41LTEuNXMgMC42NzItMS41LCAxLjUtMS41IHMgMS41LDAuNjcyLCAxLjUsMS41UyA3LjMyOCw4LCA2LjUsOHogTSA5LjUsMTFjLTAuODI4LDAtMS41LTAuNjcyLTEuNS0xLjVzIDAuNjcyLTEuNSwgMS41LTEuNXMgMS41LDAuNjcyLCAxLjUsMS41UyAxMC4zMjgsMTEsIDkuNSwxMXogTSAxMi41LDE0IGMtMC44MjgsMC0xLjUtMC42NzItMS41LTEuNXMgMC42NzItMS41LCAxLjUtMS41cyAxLjUsMC42NzIsIDEuNSwxLjVTIDEzLjMyOCwxNCwgMTIuNSwxNHogTSAxMi41LDhjLTAuODI4LDAtMS41LTAuNjcyLTEuNS0xLjVzIDAuNjcyLTEuNSwgMS41LTEuNSBzIDEuNSwwLjY3MiwgMS41LDEuNVMgMTMuMzI4LDgsIDEyLjUsOHogTSAxMi45NDksMkMgMTIuNzE2LDAuODYyLCAxMS43MDQsMCwgMTAuNSwwTCAyLjUsMCBDIDEuMTI1LDAsMCwxLjEyNSwwLDIuNWwwLDggYzAsMS4yMDQsIDAuODYyLDIuMjE2LCAyLDIuNDQ5TCAyLDMgYzAtMC41NSwgMC40NS0xLCAxLTFMIDEyLjk0OSwyIHoiPjwvcGF0aD48L2c+PC9zdmc+) no-repeat 50% 50%; }

#exploded {
    display: inline-block;
    vertical-align: middle;
	border: 1px solid #808080;
    font-size: 1.5em;
    line-height: 2em;
    text-align: center;
	box-shadow: 2px 2px 4px #808080;
}

#exploded table {
	width: 100%;
	border-collapse: collapse;
}

#exploded td {
	border: solid 1px #808080;
	width: 1.5em;
}

/* bleu clair http://code.jquery.com/ui/1.8.18/themes/start/images/ui-bg_glass_75_79c9ec_1x400.png */
#exploded td:not(.ui-state-active):hover, .element_list span:hover {
	background:#79c9ec url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGQCAYAAABvWArbAAAAS0lEQVQ4je3PsQ2AMBQD0fMlYf8V2CprpKaABjoGQOg3Tzp3Zp/rFKAoit8y14EGbAm2gENwGNzMnVsTu+DIs3WDPWAzXzhTFMUbF/PpCaiIMGtJAAAAAElFTkSuQmCC) 50% 50% repeat-x;
}

/* Repris en gros de layout-desktop.css, sauf que là c'est valable pour tous les écrans. */
#selectedEmoticon {
	display: block;
/*	width: 400px;*/
	border: solid 2px #808080;
	text-align: center;
	line-height: 2em;
	font-size: 1.2em;
	white-space: nowrap;
}
#iconDone {
	display: block;
	text-align: center;
	font-weight: bold;
	color: #707070;
	opacity: 0;
}

#partSelector {
	max-width: 800px;
	border: 2px solid #A6C9E2;
	box-shadow: 4px 4px 4px #808080;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.1);
	margin: auto;
	overflow-y: auto;
}

.element_list { display: none; padding: 2px; }
.element_list span {
	width: 2em;
	height: 1.2em;
	text-align: center;
	overflow: visible;
	font-size:1.2em;
	white-space: nowrap;
	text-wrap: none;
	display:inline-block;
	border-radius:2px;
	padding:1% 0;
	margin-left: 1px;
	margin-top: 1px;
	background-color: rgba(0, 0, 0, 0.05);
}
.element_list span.special { color: red; }
.element_list span.ui-state-active { border: none; overflow: visible; }

#junction {
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 10px;
	background-color: #A6C9E2;
	box-shadow: 3px 3px 4px #808080;
}