Use grid based css design (made css resets local)

Introduced foundation based grid css
Related changes in example, template html

Change-Id: I8b1c1bae1c733ea0ed997d8317b9954592cf6eca

examples/index.html

@@ -24,6 +24,7 @@
 		<script src="../resources/ext.uls.core.js"></script>
 		<script src="../resources/ext.uls.init.js"></script>
 		<link href="../resources/css/ext.uls.css" rel="stylesheet"/>
+		<link href="../resources/css/ext.uls.grid.css" rel="stylesheet"/>
 		<link href="../resources/css/ext.uls.lcd.css" rel="stylesheet"/>
 		<!-- demo -->
 		<link href="resources/demo.css" rel="stylesheet"/>
@@ -38,45 +39,63 @@
 			</p>
 		</div>
 		<div class="container">
-			<div data-languages="{&quot;aa&quot;:&quot;Afar&quot;,&quot;ab&quot;:&quot;Abkhazian&quot;,&quot;ace&quot;:&quot;Achinese&quot;,&quot;af&quot;:&quot;Afrikaans&quot;,&quot;ak&quot;:&quot;Akan&quot;,&quot;aln&quot;:&quot;Gheg Albanian&quot;,&quot;als&quot;:&quot;Alemannisch&quot;,&quot;am&quot;:&quot;Amharic&quot;,&quot;an&quot;:&quot;Aragonese&quot;,&quot;ang&quot;:&quot;Old English&quot;,&quot;anp&quot;:&quot;Angika&quot;,&quot;ar&quot;:&quot;Arabic&quot;,&quot;arc&quot;:&quot;Aramaic&quot;,&quot;arn&quot;:&quot;Araucanian&quot;,&quot;ary&quot;:&quot;Moroccan Spoken Arabic&quot;,&quot;arz&quot;:&quot;Egyptian Spoken Arabic&quot;,&quot;as&quot;:&quot;Assamese&quot;,&quot;ast&quot;:&quot;Asturian&quot;,&quot;av&quot;:&quot;Avaric&quot;,&quot;avk&quot;:&quot;Kotava&quot;,&quot;ay&quot;:&quot;Aymara&quot;,&quot;az&quot;:&quot;Azerbaijani&quot;,&quot;ba&quot;:&quot;Bashkir&quot;,&quot;bar&quot;:&quot;Bavarian&quot;,&quot;bat-smg&quot;:&quot;\u017demait\u0117\u0161ka&quot;,&quot;bcc&quot;:&quot;Southern Balochi&quot;,&quot;bcl&quot;:&quot;Bikol Central&quot;,&quot;be&quot;:&quot;Belarusian&quot;,&quot;be-tarask&quot;:&quot;Belarusian (Tara\u0161kievica orthography)&quot;,&quot;be-x-old&quot;:&quot;\u202a\u0431\u0435\u043b\u0430\u0440\u0443\u0441\u043a\u0430\u044f (\u0442\u0430\u0440\u0430\u0448\u043a\u0435\u0432\u0456\u0446\u0430)\u202c&quot;,&quot;bg&quot;:&quot;Bulgarian&quot;,&quot;bh&quot;:&quot;Bihari&quot;,&quot;bho&quot;:&quot;Bhojpuri&quot;,&quot;bi&quot;:&quot;Bislama&quot;,&quot;bjn&quot;:&quot;Banjar&quot;,&quot;bm&quot;:&quot;Bambara&quot;,&quot;bn&quot;:&quot;Bengali&quot;,&quot;bo&quot;:&quot;Tibetan&quot;,&quot;bpy&quot;:&quot;Bishnupria Manipuri&quot;,&quot;bqi&quot;:&quot;Bakhtiari&quot;,&quot;br&quot;:&quot;Breton&quot;,&quot;brh&quot;:&quot;Brahui&quot;,&quot;bs&quot;:&quot;Bosnian&quot;,&quot;bug&quot;:&quot;Buginese&quot;,&quot;bxr&quot;:&quot;\u0411\u0443\u0440\u044f\u0430\u0434&quot;,&quot;ca&quot;:&quot;Catalan&quot;,&quot;cbk-zam&quot;:&quot;Chavacano de Zamboanga&quot;,&quot;cdo&quot;:&quot;Min Dong Chinese&quot;,&quot;ce&quot;:&quot;Chechen&quot;,&quot;ceb&quot;:&quot;Cebuano&quot;,&quot;ch&quot;:&quot;Chamorro&quot;,&quot;cho&quot;:&quot;Choctaw&quot;,&quot;chr&quot;:&quot;Cherokee&quot;,&quot;chy&quot;:&quot;Cheyenne&quot;,&quot;ckb&quot;:&quot;Sorani Kurdish&quot;,&quot;co&quot;:&quot;Corsican&quot;,&quot;cps&quot;:&quot;Capiznon&quot;,&quot;cr&quot;:&quot;Cree&quot;,&quot;crh&quot;:&quot;Crimean Turkish&quot;,&quot;crh-latn&quot;:&quot;Crimean Turkish (Latin script)&quot;,&quot;crh-cyrl&quot;:&quot;Crimean Turkish (Cyrillic script)&quot;,&quot;cs&quot;:&quot;Czech&quot;,&quot;csb&quot;:&quot;Kashubian&quot;,&quot;cu&quot;:&quot;Church Slavic&quot;,&quot;cv&quot;:&quot;Chuvash&quot;,&quot;cy&quot;:&quot;Welsh&quot;,&quot;da&quot;:&quot;Danish&quot;,&quot;de&quot;:&quot;German&quot;,&quot;de-at&quot;:&quot;Austrian German&quot;,&quot;de-ch&quot;:&quot;Swiss High German&quot;,&quot;de-formal&quot;:&quot;German (formal address)&quot;,&quot;diq&quot;:&quot;Zazaki&quot;,&quot;dsb&quot;:&quot;Lower Sorbian&quot;,&quot;dtp&quot;:&quot;Central Dusun&quot;,&quot;dv&quot;:&quot;Divehi&quot;,&quot;dz&quot;:&quot;Dzongkha&quot;,&quot;ee&quot;:&quot;Ewe&quot;,&quot;el&quot;:&quot;Greek&quot;,&quot;eml&quot;:&quot;Emiliano-Romagnolo&quot;,&quot;en&quot;:&quot;English&quot;,&quot;en-ca&quot;:&quot;Canadian English&quot;,&quot;en-gb&quot;:&quot;British English&quot;,&quot;eo&quot;:&quot;Esperanto&quot;,&quot;es&quot;:&quot;Spanish&quot;,&quot;et&quot;:&quot;Estonian&quot;,&quot;eu&quot;:&quot;Basque&quot;,&quot;ext&quot;:&quot;Extremaduran&quot;,&quot;fa&quot;:&quot;Persian&quot;,&quot;ff&quot;:&quot;Fulah&quot;,&quot;fi&quot;:&quot;Finnish&quot;,&quot;fit&quot;:&quot;me\u00e4nkieli&quot;,&quot;fiu-vro&quot;:&quot;V\u00f5ro&quot;,&quot;fj&quot;:&quot;Fijian&quot;,&quot;fo&quot;:&quot;Faroese&quot;,&quot;fr&quot;:&quot;French&quot;,&quot;frc&quot;:&quot;Cajun French&quot;,&quot;frp&quot;:&quot;Franco-Proven\u00e7al&quot;,&quot;frr&quot;:&quot;Northern Frisian&quot;,&quot;fur&quot;:&quot;Friulian&quot;,&quot;fy&quot;:&quot;Western Frisian&quot;,&quot;ga&quot;:&quot;Irish&quot;,&quot;gag&quot;:&quot;Gagauz&quot;,&quot;gan&quot;:&quot;Gan&quot;,&quot;gan-hans&quot;:&quot;Simplified Gan script&quot;,&quot;gan-hant&quot;:&quot;Traditional Gan script&quot;,&quot;gd&quot;:&quot;Scottish Gaelic&quot;,&quot;gl&quot;:&quot;Galician&quot;,&quot;glk&quot;:&quot;Gilaki&quot;,&quot;gn&quot;:&quot;Guarani&quot;,&quot;got&quot;:&quot;Gothic&quot;,&quot;grc&quot;:&quot;Ancient Greek&quot;,&quot;gsw&quot;:&quot;Swiss German&quot;,&quot;gu&quot;:&quot;Gujarati&quot;,&quot;gv&quot;:&quot;Manx&quot;,&quot;ha&quot;:&quot;Hausa&quot;,&quot;hak&quot;:&quot;Hakka&quot;,&quot;haw&quot;:&quot;Hawaiian&quot;,&quot;he&quot;:&quot;Hebrew&quot;,&quot;hi&quot;:&quot;Hindi&quot;,&quot;hif&quot;:&quot;Fiji Hindi&quot;,&quot;hif-latn&quot;:&quot;Fiji Hindi (Latin script)&quot;,&quot;hil&quot;:&quot;Hiligaynon&quot;,&quot;ho&quot;:Line truncated
-				<span class="icon-close"></span>
-				<div class="uls-menu-header">
-					<div class="uls-menu-header-left">
-						<h1>Select language</h1>
+			<div data-languages="{&quot;aa&quot;:&quot;Afar&quot;,&quot;ab&quot;:&quot;Abkhazian&quot;,&quot;ace&quot;:&quot;Achinese&quot;,&quot;af&quot;:&quot;Afrikaans&quot;,&quot;ak&quot;:&quot;Akan&quot;,&quot;aln&quot;:&quot;Gheg Albanian&quot;,&quot;als&quot;:&quot;Alemannisch&quot;,&quot;am&quot;:&quot;Amharic&quot;,&quot;an&quot;:&quot;Aragonese&quot;,&quot;ang&quot;:&quot;Old English&quot;,&quot;anp&quot;:&quot;Angika&quot;,&quot;ar&quot;:&quot;Arabic&quot;,&quot;arc&quot;:&quot;Aramaic&quot;,&quot;arn&quot;:&quot;Araucanian&quot;,&quot;ary&quot;:&quot;Moroccan Spoken Arabic&quot;,&quot;arz&quot;:&quot;Egyptian Spoken Arabic&quot;,&quot;as&quot;:&quot;Assamese&quot;,&quot;ast&quot;:&quot;Asturian&quot;,&quot;av&quot;:&quot;Avaric&quot;,&quot;avk&quot;:&quot;Kotava&quot;,&quot;ay&quot;:&quot;Aymara&quot;,&quot;az&quot;:&quot;Azerbaijani&quot;,&quot;ba&quot;:&quot;Bashkir&quot;,&quot;bar&quot;:&quot;Bavarian&quot;,&quot;bat-smg&quot;:&quot;\u017eemait\u0117\u0161ka&quot;,&quot;bcc&quot;:&quot;Southern Balochi&quot;,&quot;bcl&quot;:&quot;Bikol Central&quot;,&quot;be&quot;:&quot;Belarusian&quot;,&quot;be-tarask&quot;:&quot;Belarusian (Tara\u0161kievica orthography)&quot;,&quot;be-x-old&quot;:&quot;\u202a\u0431\u0435\u043b\u0430\u0440\u0443\u0441\u043a\u0430\u044f (\u0442\u0430\u0440\u0430\u0448\u043a\u0435\u0432\u0456\u0446\u0430)\u202c&quot;,&quot;bg&quot;:&quot;Bulgarian&quot;,&quot;bh&quot;:&quot;Bihari&quot;,&quot;bho&quot;:&quot;Bhojpuri&quot;,&quot;bi&quot;:&quot;Bislama&quot;,&quot;bjn&quot;:&quot;Banjar&quot;,&quot;bm&quot;:&quot;Bambara&quot;,&quot;bn&quot;:&quot;Bengali&quot;,&quot;bo&quot;:&quot;Tibetan&quot;,&quot;bpy&quot;:&quot;Bishnupria Manipuri&quot;,&quot;bqi&quot;:&quot;Bakhtiari&quot;,&quot;br&quot;:&quot;Breton&quot;,&quot;brh&quot;:&quot;Brahui&quot;,&quot;bs&quot;:&quot;Bosnian&quot;,&quot;bug&quot;:&quot;Buginese&quot;,&quot;bxr&quot;:&quot;\u0431\u0443\u0440\u044f\u0430\u0434&quot;,&quot;ca&quot;:&quot;Catalan&quot;,&quot;cbk-zam&quot;:&quot;Chavacano de Zamboanga&quot;,&quot;cdo&quot;:&quot;Min Dong Chinese&quot;,&quot;ce&quot;:&quot;Chechen&quot;,&quot;ceb&quot;:&quot;Cebuano&quot;,&quot;ch&quot;:&quot;Chamorro&quot;,&quot;cho&quot;:&quot;Choctaw&quot;,&quot;chr&quot;:&quot;Cherokee&quot;,&quot;chy&quot;:&quot;Cheyenne&quot;,&quot;ckb&quot;:&quot;Sorani Kurdish&quot;,&quot;co&quot;:&quot;Corsican&quot;,&quot;cps&quot;:&quot;Capiznon&quot;,&quot;cr&quot;:&quot;Cree&quot;,&quot;crh&quot;:&quot;Crimean Turkish&quot;,&quot;crh-latn&quot;:&quot;Crimean Turkish (Latin script)&quot;,&quot;crh-cyrl&quot;:&quot;Crimean Turkish (Cyrillic script)&quot;,&quot;cs&quot;:&quot;Czech&quot;,&quot;csb&quot;:&quot;Kashubian&quot;,&quot;cu&quot;:&quot;Church Slavic&quot;,&quot;cv&quot;:&quot;Chuvash&quot;,&quot;cy&quot;:&quot;Welsh&quot;,&quot;da&quot;:&quot;Danish&quot;,&quot;de&quot;:&quot;German&quot;,&quot;de-at&quot;:&quot;Austrian German&quot;,&quot;de-ch&quot;:&quot;Swiss High German&quot;,&quot;de-formal&quot;:&quot;German (formal address)&quot;,&quot;diq&quot;:&quot;Zazaki&quot;,&quot;dsb&quot;:&quot;Lower Sorbian&quot;,&quot;dtp&quot;:&quot;Central Dusun&quot;,&quot;dv&quot;:&quot;Divehi&quot;,&quot;dz&quot;:&quot;Dzongkha&quot;,&quot;ee&quot;:&quot;Ewe&quot;,&quot;egl&quot;:&quot;Emili\u00e0n&quot;,&quot;el&quot;:&quot;Greek&quot;,&quot;eml&quot;:&quot;Emiliano-Romagnolo&quot;,&quot;en&quot;:&quot;English&quot;,&quot;en-ca&quot;:&quot;Canadian English&quot;,&quot;en-gb&quot;:&quot;British English&quot;,&quot;eo&quot;:&quot;Esperanto&quot;,&quot;es&quot;:&quot;Spanish&quot;,&quot;et&quot;:&quot;Estonian&quot;,&quot;eu&quot;:&quot;Basque&quot;,&quot;ext&quot;:&quot;Extremaduran&quot;,&quot;fa&quot;:&quot;Persian&quot;,&quot;ff&quot;:&quot;Fulah&quot;,&quot;fi&quot;:&quot;Finnish&quot;,&quot;fit&quot;:&quot;me\u00e4nkieli&quot;,&quot;fiu-vro&quot;:&quot;V\u00f5ro&quot;,&quot;fj&quot;:&quot;Fijian&quot;,&quot;fo&quot;:&quot;Faroese&quot;,&quot;fr&quot;:&quot;French&quot;,&quot;frc&quot;:&quot;Cajun French&quot;,&quot;frp&quot;:&quot;Franco-Proven\u00e7al&quot;,&quot;frr&quot;:&quot;Northern Frisian&quot;,&quot;fur&quot;:&quot;Friulian&quot;,&quot;fy&quot;:&quot;Western Frisian&quot;,&quot;ga&quot;:&quot;Irish&quot;,&quot;gag&quot;:&quot;Gagauz&quot;,&quot;gan&quot;:&quot;Gan&quot;,&quot;gan-hans&quot;:&quot;Simplified Gan script&quot;,&quot;gan-hant&quot;:&quot;Traditional Gan script&quot;,&quot;gd&quot;:&quot;Scottish Gaelic&quot;,&quot;gl&quot;:&quot;Galician&quot;,&quot;glk&quot;:&quot;Gilaki&quot;,&quot;gn&quot;:&quot;Guarani&quot;,&quot;got&quot;:&quot;Gothic&quot;,&quot;grc&quot;:&quot;Ancient Greek&quot;,&quot;gsw&quot;:&quot;Swiss German&quot;,&quot;gu&quot;:&quot;Gujarati&quot;,&quot;gv&quot;:&quot;Manx&quot;,&quot;ha&quot;:&quot;Hausa&quot;,&quot;hak&quot;:&quot;Hakka&quot;,&quot;haw&quot;:&quot;Hawaiian&quot;,&quot;he&quot;:&quot;Hebrew&quot;,&quot;hi&quot;:&quot;Hindi&quot;,&quot;hif&quot;:&quot;Fiji Hindi&quot;,&quot;hif-latn&quot;:&quot;Fiji Hindi (Latin script)&quot;,&quot;hil&quoLine truncated
+				<div class="row">
+					<span class="icon-close"></span>
+				</div>
+				<div class="row">
+					<div class="four columns">
+						<h1> Select language </h1>
 					</div>
-					<div class="uls-menu-header-right">
-						<div class="uls-worldmap">
-							<div data-regiongroup="1" id="uls-region-1" class="uls-region regionselector">
-								<a>America</a>
+					<div class="three columns" id="settings-block">
+					</div>
+					<div class="five columns" id="map-block">
+						<div class="row">
+							<div data-regiongroup="4" id="uls-region-4" class="three columns uls-region">
+								<a>Worldwide</a>
 							</div>
-							<div data-regiongroup="2" id="uls-region-2" class="uls-region regionselector">
-								<a>Europe
-								<br>
-								Middle East
-								<br>
-								Africa</a>
-							</div>
-							<div data-regiongroup="3" id="uls-region-3" class="uls-region regionselector">
-								<a>Asia
-								<br>
-								Australia
-								<br>
-								Pacific</a>
+							<div class="nine columns">
+								<div class="row uls-worldmap">
+									<div data-regiongroup="1" id="uls-region-1" class="four columns uls-region">
+										<a>America</a>
+									</div>
+									<div data-regiongroup="2" id="uls-region-2" class="four columns uls-region">
+										<a>Europe
+										<br>
+										Middle east
+										<br>
+										Africa</a>
+									</div>
+									<div data-regiongroup="3" id="uls-region-3" class="four columns uls-region">
+										<a>Asia
+										<br>
+										Australia
+										<br>
+										Pacific</a>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div style="clear: both"></div>
-				<div class="uls-lang-selector">
-					<form class="filterform" action="#">
-						<input type="text" class="filterinput ui-autocomplete-input" id="languagefilter" placeholder="Language search" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" style="" bound="true">
-						<span class="search-button"></span>
-					</form>
-					<div class="uls-language-list">
-						<ul class="uls-language-filter-result"></ul>
+
+				<div id="search">
+					<div  class="row">
+						<div class="one column">
+							<span class="search-label"></span>
+						</div>
+						<div class="ten columns">
+							<input type="text" class="filterinput" id="languagefilter" placeholder="Language search" autocomplete="off" role="textbox" style="" bound="true"/>
+						</div>
+						<div class="one column">
+							<span class="clear-button"></span>
+						</div>
 					</div>
 				</div>
+				<div class="row uls-language-list">
+				</div>
 			</div>
 		</div>
+		</div>
 	</body>
 </html>