world-flags 0.1.2 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
data/Gemfile CHANGED
@@ -1,5 +1,7 @@
1
1
  source :rubygems
2
2
 
3
+ gem 'httparty'
4
+
3
5
  # Add dependencies to develop your gem here.
4
6
  # Include everything needed to run rake, tests, features, etc.
5
7
  group :development do
data/Gemfile.lock CHANGED
@@ -3,6 +3,9 @@ GEM
3
3
  specs:
4
4
  diff-lcs (1.1.3)
5
5
  git (1.2.5)
6
+ httparty (0.8.1)
7
+ multi_json
8
+ multi_xml
6
9
  jeweler (1.8.3)
7
10
  bundler (~> 1.0)
8
11
  git (>= 1.2.5)
@@ -10,6 +13,7 @@ GEM
10
13
  rdoc
11
14
  json (1.6.5)
12
15
  multi_json (1.1.0)
16
+ multi_xml (0.4.2)
13
17
  rake (0.9.2.2)
14
18
  rdoc (3.12)
15
19
  json (~> 1.4)
@@ -31,6 +35,7 @@ PLATFORMS
31
35
 
32
36
  DEPENDENCIES
33
37
  bundler (>= 1.0.0)
38
+ httparty
34
39
  jeweler (>= 1.8.3)
35
40
  rdoc (>= 3.12)
36
41
  rspec (>= 2.8.0)
data/README.textile CHANGED
@@ -10,8 +10,25 @@ In you asset application.css manifest file:
10
10
  *= require_self
11
11
  *= require_tree .
12
12
  *= require flags/flags32
13
+ *= require flags/flags32_semi
13
14
  */
14
15
 
16
+ There is also support for semi-transparent flags. This can be used to fade certain flags while having the selected flag (or hovered over flag) in full brightness.
17
+
18
+ Simply add or remove the "semi" class for the flag to adjust the brightness level (fx for selection/mouse over).
19
+
20
+ $("li.flag['data-cc'=dk).addClass('semi');
21
+
22
+ $("li.flag['data-cc'=dk).removeClass('semi');
23
+
24
+ */
25
+ *= require_self
26
+ *= require_tree .
27
+ *= require flags/flags32
28
+ *= require flags/flags32
29
+ */
30
+
31
+
15
32
  h2. Alternative config
16
33
 
17
34
  Note that the ruby examples uses HAML syntax
@@ -34,9 +51,8 @@ Flags will be rendered in HTML as:
34
51
 
35
52
  <pre>
36
53
  <ul class="f32">
37
- <li class="flag ar">Argentina</li>
38
- <li class="flag au">Australia</li>
39
- <li class="flag at">Austria</li>
54
+ <li class="flag ar" data-cc="ar" data-country="Argentina">Argentina</li>
55
+ <li class="flag gb" data-cc="gb" data-country="England">England</li>
40
56
  ...
41
57
  </ul>
42
58
  </pre>
@@ -45,27 +61,58 @@ The countries corresponding to the codes can be found at "http://en.wikipedia.or
45
61
 
46
62
  h2. Use
47
63
 
64
+ WorldFlags supports flag sizes in 16, 32 and 64 pixels (size).
65
+
48
66
  You can also use built in helper methods:
49
67
 
50
68
  = flag_list 16 do
51
- = flags :ar => 'Argentina', :en => 'England'
69
+ = flags :ar => 'Argentina', :gb => 'England'
52
70
 
53
71
  Alternatively
54
72
 
55
73
  = flags_list 32 do
56
- = flag(:ar, 'Argentina') + flag(:en, 'England')
74
+ = flag(:ar, 'Argentina') + flag(:gb, 'England')
57
75
 
58
76
  For use with tooltips (see example below):
59
77
 
60
78
  = flags_list 32 do
61
- = flags_title(:ar => 'Argentina', :br => 'Brazil') + flag_title(:en, 'England')
79
+ = flags_title(:ar => 'Argentina', :br => 'Brazil') + flag_title(:gb, 'England')
62
80
 
63
81
  The flag_title will render the following list item:
64
82
 
65
- <li class="flag ar" title="Argentina">&nbsp;</li>
83
+ <li class="flag ar" lang="ar" title="Argentina">&nbsp;</li>
66
84
 
67
85
  The &nbsp; is needed in order for the background (flag icon) to have something to be displayed against.
68
86
 
87
+ h2. Get client country code (browser and geo)
88
+
89
+ A small helper module is provided that can be inserted into a Controller or wherever you see fit
90
+
91
+ * ip_country_code
92
+ * browser_locale
93
+
94
+ class MainController < ApplicationController
95
+ def home
96
+ @json = Property.all.to_gmaps4rails
97
+ @country_code = WorldFlags::Geo.ip_country_code
98
+ end
99
+ end
100
+
101
+ Alternatively you can include the modules directly into the controller:
102
+
103
+ class MainController < ApplicationController
104
+ include WorldFlags::Geo
105
+ include WorldFlags::Browser
106
+
107
+ def home
108
+ @json = Property.all.to_gmaps4rails
109
+ @country_code = ip_country_code
110
+ @locale = browser_locale
111
+ end
112
+ end
113
+
114
+ For convenience you can also include WorldFlags::All to include all these modules
115
+
69
116
  h2. Nice effects
70
117
 
71
118
  CSS config:
@@ -77,9 +124,10 @@ ul.f32 {
77
124
 
78
125
  li.flag {
79
126
  float:left;
80
- padding-bottom: 10px;
81
- padding-right: 32px;
82
- cursor: pointer;
127
+ padding-bottom: 6px;
128
+ padding-right: 26px;
129
+ margin-right: 8px;
130
+ background-position: center;
83
131
  }
84
132
  }
85
133
 
@@ -114,15 +162,12 @@ Layout file:
114
162
 
115
163
  %body
116
164
  .main
117
- = link_to "Sign un", new_user_session_path
165
+ = link_to "Sign in", new_user_session_path
118
166
  = link_to "Sign up", new_user_registration_path
119
167
 
120
168
  #languages
121
- %ul.f32
122
- %li.flag.ar{:title => 'Argentina'}
123
- &nbsp;
124
- %li.flag.en{:title => 'England'}
125
- &nbsp;
169
+ = flags_list 64 do
170
+ = flags_title :ar => 'Argentina', :gb => 'England'
126
171
  %p.clear
127
172
  = yield
128
173
 
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.1.2
1
+ 0.1.3
data/lib/world-flags.rb CHANGED
@@ -1,4 +1,5 @@
1
1
  require "world_flags/world_flags_helper"
2
+ require "world_flags/locale_helper"
2
3
  require "rails"
3
4
  require 'world_flags/rails_plugin/engine'
4
5
 
@@ -0,0 +1,43 @@
1
+ require "httparty"
2
+
3
+ module WorldFlags
4
+ module Geo
5
+ def self.ip_json
6
+ HTTParty.get('http://freegeoip.net/json/')
7
+ end
8
+
9
+ def self.ip_country_code
10
+ @ip_country_code ||= ip_json.parsed_response['country_code']
11
+ end
12
+
13
+ def ip_country_code
14
+ WorldFlags::Geo.ip_country_code
15
+ end
16
+ end
17
+
18
+ module Browser
19
+ def self.browser_locale
20
+ return @browser_locale if @browser_locale
21
+ if lang = request.env["HTTP_ACCEPT_LANGUAGE"]
22
+ lang = lang.split(",").map { |l|
23
+ l += ';q=1.0' unless l =~ /;q=\d+\.\d+$/
24
+ l.split(';q=')
25
+ }.first
26
+ @browser_locale = lang.first.split("-").first
27
+ else
28
+ @browser_locale = I18n.default_locale
29
+ end
30
+ end
31
+
32
+ def browser_locale
33
+ WorldFlags::Browser.browser_locale
34
+ end
35
+ end
36
+
37
+ module All
38
+ def self.included(base)
39
+ base.send :include, Geo
40
+ base.send :include, Browser
41
+ end
42
+ end
43
+ end
@@ -1,6 +1,6 @@
1
1
  module WorldFlagsHelper
2
2
  def self.flag_sizes
3
- [16, 32]
3
+ [16, 32, 64]
4
4
  end
5
5
 
6
6
  def flags_list size = 16, &block
@@ -11,9 +11,9 @@ module WorldFlagsHelper
11
11
  end
12
12
  alias_method :flag_list, :flags_list
13
13
 
14
- def flags flags_hash
14
+ def flags flags_hash, display = false
15
15
  flags_hash.inject("") do |res, element|
16
- res << flag(element.first, element.last)
16
+ res << flag(element.first, element.last, display)
17
17
  end.html_safe
18
18
  end
19
19
 
@@ -23,12 +23,14 @@ module WorldFlagsHelper
23
23
  end.html_safe
24
24
  end
25
25
 
26
- def flag code, name
27
- content_tag :li, name.html_safe, :class => "flag #{code}"
26
+ def flag code, name, display = false
27
+ label = display ? name : '&nbsp;'
28
+ content_tag :li, label.html_safe, :class => "flag #{code}", :'data-country' => name, :'data-cc' => code
28
29
  end
29
30
 
30
- def flag_title code, name
31
- content_tag :li, '&nbsp;'.html_safe, :class => "flag #{code}", :title => name
31
+ def flag_title code, name, display = false
32
+ label = display ? name : '&nbsp;'
33
+ content_tag :li, label.html_safe, :class => "flag #{code}", :title => name, :'data-cc' => code
32
34
  end
33
35
 
34
36
  def use_flags size = 16
@@ -29,28 +29,28 @@ describe WorldFlagsHelper do
29
29
 
30
30
  it "should list flags" do
31
31
  output = flags_list 32 do
32
- flags :ar => 'Argentina', :en => 'England'
32
+ flags :ar => 'Argentina', :gb => 'England'
33
33
  end
34
- output.should == "<ul class=\"f32\"><li class=\"flag ar\">Argentina</li><li class=\"flag en\">England</li></ul>"
34
+ output.should == "<ul class=\"f32\"><li class=\"flag ar\" data-cc=\"ar\" data-country=\"Argentina\">Argentina</li><li class=\"flag gb\" data-cc=\"gb\" data-country=\"England\">England</li></ul>"
35
35
  end
36
36
 
37
37
  it "should list flags" do
38
38
  output = flag_title :ar, 'Argentina'
39
- output.should == "<li class=\"flag ar\" title=\"Argentina\">&nbsp;</li>"
39
+ output.should == "<li class=\"flag ar\" data-cc=\"ar\" title=\"Argentina\">&nbsp;</li>"
40
40
  end
41
41
 
42
42
  it "should list flags" do
43
43
  output = flags_list 32 do
44
44
  flags_title :ar => 'Argentina'
45
45
  end
46
- output.should == "<ul class=\"f32\"><li class=\"flag ar\" title=\"Argentina\">&nbsp;</li></ul>"
46
+ output.should == "<ul class=\"f32\"><li class=\"flag ar\" data-cc=\"ar\" title=\"Argentina\">&nbsp;</li></ul>"
47
47
  end
48
48
 
49
49
  it "should list flags combined" do
50
50
  output = flags_list 32 do
51
- [flags(:ar => 'Argentina', :en => 'England'), flag(:br, 'Brazil')].join.html_safe
51
+ [flags(:ar => 'Argentina', :gb => 'England'), flag(:br, 'Brazil')].join.html_safe
52
52
  end
53
- output.should == "<ul class=\"f32\"><li class=\"flag ar\">Argentina</li><li class=\"flag en\">England</li><li class=\"flag br\">Brazil</li></ul>"
53
+ output.should == "<ul class=\"f32\"><li class=\"flag ar\" data-cc=\"ar\" data-country=\"Argentina\">Argentina</li><li class=\"flag gb\" data-cc=\"gb\" data-country=\"England\">England</li><li class=\"flag br\" data-cc=\"br\" data-country=\"Brazil\">Brazil</li></ul>"
54
54
  end
55
55
  end
56
56
 
@@ -0,0 +1,247 @@
1
+ .f16 .flag.semi {
2
+ background:url(<%= asset_path 'flags/flags16_semi.png' %>) no-repeat;
3
+ }
4
+ .f16 ._African_Union{background-position:0 -0px;}
5
+ .f16 ._Arab_League{background-position:0 -16px;}
6
+ .f16 ._ASEAN{background-position:0 -32px;}
7
+ .f16 ._CARICOM{background-position:0 -48px;}
8
+ .f16 ._CIS{background-position:0 -64px;}
9
+ .f16 ._Commonwealth{background-position:0 -80px;}
10
+ .f16 ._England{background-position:0 -96px;}
11
+ .f16 ._European_Union{background-position:0 -112px;}
12
+ .f16 ._Islamic_Conference{background-position:0 -128px;}
13
+ .f16 ._Kosovo{background-position:0 -144px;}
14
+ .f16 ._NATO{background-position:0 -160px;}
15
+ .f16 ._Northern_Cyprus{background-position:0 -176px;}
16
+ .f16 ._Northern_Ireland{background-position:0 -192px;}
17
+ .f16 ._Olympic_Movement{background-position:0 -208px;}
18
+ .f16 ._OPEC{background-position:0 -224px;}
19
+ .f16 ._Red_Cross{background-position:0 -240px;}
20
+ .f16 ._Scotland{background-position:0 -256px;}
21
+ .f16 ._Somaliland{background-position:0 -272px;}
22
+ .f16 ._Tibet{background-position:0 -288px;}
23
+ .f16 ._United_Nations{background-position:0 -304px;}
24
+ .f16 ._Wales{background-position:0 -320px;}
25
+ .f16 .ad{background-position:0 -336px;}
26
+ .f16 .ae{background-position:0 -352px;}
27
+ .f16 .af{background-position:0 -368px;}
28
+ .f16 .ag{background-position:0 -384px;}
29
+ .f16 .ai{background-position:0 -400px;}
30
+ .f16 .al{background-position:0 -416px;}
31
+ .f16 .am{background-position:0 -432px;}
32
+ .f16 .an{background-position:0 -448px;}
33
+ .f16 .ao{background-position:0 -464px;}
34
+ .f16 .aq{background-position:0 -480px;}
35
+ .f16 .ar{background-position:0 -496px;}
36
+ .f16 .as{background-position:0 -512px;}
37
+ .f16 .at{background-position:0 -528px;}
38
+ .f16 .au{background-position:0 -544px;}
39
+ .f16 .aw{background-position:0 -560px;}
40
+ .f16 .az{background-position:0 -576px;}
41
+ .f16 .ba{background-position:0 -592px;}
42
+ .f16 .bb{background-position:0 -608px;}
43
+ .f16 .bd{background-position:0 -624px;}
44
+ .f16 .be{background-position:0 -640px;}
45
+ .f16 .bf{background-position:0 -656px;}
46
+ .f16 .bg{background-position:0 -672px;}
47
+ .f16 .bh{background-position:0 -688px;}
48
+ .f16 .bi{background-position:0 -704px;}
49
+ .f16 .bj{background-position:0 -720px;}
50
+ .f16 .bm{background-position:0 -736px;}
51
+ .f16 .bn{background-position:0 -752px;}
52
+ .f16 .bo{background-position:0 -768px;}
53
+ .f16 .br{background-position:0 -784px;}
54
+ .f16 .bs{background-position:0 -800px;}
55
+ .f16 .bt{background-position:0 -816px;}
56
+ .f16 .bw{background-position:0 -832px;}
57
+ .f16 .by{background-position:0 -848px;}
58
+ .f16 .bz{background-position:0 -864px;}
59
+ .f16 .ca{background-position:0 -880px;}
60
+ .f16 .cg{background-position:0 -896px;}
61
+ .f16 .cf{background-position:0 -912px;}
62
+ .f16 .cd{background-position:0 -928px;}
63
+ .f16 .ch{background-position:0 -944px;}
64
+ .f16 .ci{background-position:0 -960px;}
65
+ .f16 .ck{background-position:0 -976px;}
66
+ .f16 .cl{background-position:0 -992px;}
67
+ .f16 .cm{background-position:0 -1008px;}
68
+ .f16 .cn{background-position:0 -1024px;}
69
+ .f16 .co{background-position:0 -1040px;}
70
+ .f16 .cr{background-position:0 -1056px;}
71
+ .f16 .cu{background-position:0 -1072px;}
72
+ .f16 .cv{background-position:0 -1088px;}
73
+ .f16 .cy{background-position:0 -1104px;}
74
+ .f16 .cz{background-position:0 -1120px;}
75
+ .f16 .de{background-position:0 -1136px;}
76
+ .f16 .dj{background-position:0 -1152px;}
77
+ .f16 .dk{background-position:0 -1168px;}
78
+ .f16 .dm{background-position:0 -1184px;}
79
+ .f16 .do{background-position:0 -1200px;}
80
+ .f16 .dz{background-position:0 -1216px;}
81
+ .f16 .ec{background-position:0 -1232px;}
82
+ .f16 .ee{background-position:0 -1248px;}
83
+ .f16 .eg{background-position:0 -1264px;}
84
+ .f16 .eh{background-position:0 -1280px;}
85
+ .f16 .er{background-position:0 -1296px;}
86
+ .f16 .es{background-position:0 -1312px;}
87
+ .f16 .et{background-position:0 -1328px;}
88
+ .f16 .fi{background-position:0 -1344px;}
89
+ .f16 .fj{background-position:0 -1360px;}
90
+ .f16 .fm{background-position:0 -1376px;}
91
+ .f16 .fo{background-position:0 -1392px;}
92
+ .f16 .fr{background-position:0 -1408px;}
93
+ .f16 .ga{background-position:0 -1424px;}
94
+ .f16 .gb{background-position:0 -1440px;}
95
+ .f16 .gd{background-position:0 -1456px;}
96
+ .f16 .ge{background-position:0 -1472px;}
97
+ .f16 .gg{background-position:0 -1488px;}
98
+ .f16 .gh{background-position:0 -1504px;}
99
+ .f16 .gi{background-position:0 -1520px;}
100
+ .f16 .gl{background-position:0 -1536px;}
101
+ .f16 .gm{background-position:0 -1552px;}
102
+ .f16 .gn{background-position:0 -1568px;}
103
+ .f16 .gp{background-position:0 -1584px;}
104
+ .f16 .gq{background-position:0 -1600px;}
105
+ .f16 .gr{background-position:0 -1616px;}
106
+ .f16 .gt{background-position:0 -1632px;}
107
+ .f16 .gu{background-position:0 -1648px;}
108
+ .f16 .gw{background-position:0 -1664px;}
109
+ .f16 .gy{background-position:0 -1680px;}
110
+ .f16 .hk{background-position:0 -1696px;}
111
+ .f16 .hn{background-position:0 -1712px;}
112
+ .f16 .hr{background-position:0 -1728px;}
113
+ .f16 .ht{background-position:0 -1744px;}
114
+ .f16 .hu{background-position:0 -1760px;}
115
+ .f16 .id{background-position:0 -1776px;}
116
+ .f16 .mc{background-position:0 -1776px;}
117
+ .f16 .ie{background-position:0 -1792px;}
118
+ .f16 .il{background-position:0 -1808px;}
119
+ .f16 .im{background-position:0 -1824px;}
120
+ .f16 .in{background-position:0 -1840px;}
121
+ .f16 .iq{background-position:0 -1856px;}
122
+ .f16 .ir{background-position:0 -1872px;}
123
+ .f16 .is{background-position:0 -1888px;}
124
+ .f16 .it{background-position:0 -1904px;}
125
+ .f16 .je{background-position:0 -1920px;}
126
+ .f16 .jm{background-position:0 -1936px;}
127
+ .f16 .jo{background-position:0 -1952px;}
128
+ .f16 .jp{background-position:0 -1968px;}
129
+ .f16 .ke{background-position:0 -1984px;}
130
+ .f16 .kg{background-position:0 -2000px;}
131
+ .f16 .kh{background-position:0 -2016px;}
132
+ .f16 .ki{background-position:0 -2032px;}
133
+ .f16 .km{background-position:0 -2048px;}
134
+ .f16 .kn{background-position:0 -2064px;}
135
+ .f16 .kp{background-position:0 -2080px;}
136
+ .f16 .kr{background-position:0 -2096px;}
137
+ .f16 .kw{background-position:0 -2112px;}
138
+ .f16 .ky{background-position:0 -2128px;}
139
+ .f16 .kz{background-position:0 -2144px;}
140
+ .f16 .la{background-position:0 -2160px;}
141
+ .f16 .lb{background-position:0 -2176px;}
142
+ .f16 .lc{background-position:0 -2192px;}
143
+ .f16 .li{background-position:0 -2208px;}
144
+ .f16 .lk{background-position:0 -2224px;}
145
+ .f16 .lr{background-position:0 -2240px;}
146
+ .f16 .ls{background-position:0 -2256px;}
147
+ .f16 .lt{background-position:0 -2272px;}
148
+ .f16 .lu{background-position:0 -2288px;}
149
+ .f16 .lv{background-position:0 -2304px;}
150
+ .f16 .ly{background-position:0 -2320px;}
151
+ .f16 .ma{background-position:0 -2336px;}
152
+ .f16 .md{background-position:0 -2352px;}
153
+ .f16 .me{background-position:0 -2368px;}
154
+ .f16 .mg{background-position:0 -2384px;}
155
+ .f16 .mh{background-position:0 -2400px;}
156
+ .f16 .mk{background-position:0 -2416px;}
157
+ .f16 .ml{background-position:0 -2432px;}
158
+ .f16 .mm{background-position:0 -2448px;}
159
+ .f16 .mn{background-position:0 -2464px;}
160
+ .f16 .mo{background-position:0 -2480px;}
161
+ .f16 .mq{background-position:0 -2496px;}
162
+ .f16 .mr{background-position:0 -2512px;}
163
+ .f16 .ms{background-position:0 -2528px;}
164
+ .f16 .mt{background-position:0 -2544px;}
165
+ .f16 .mu{background-position:0 -2560px;}
166
+ .f16 .mv{background-position:0 -2576px;}
167
+ .f16 .mw{background-position:0 -2592px;}
168
+ .f16 .mx{background-position:0 -2608px;}
169
+ .f16 .my{background-position:0 -2624px;}
170
+ .f16 .mz{background-position:0 -2640px;}
171
+ .f16 .na{background-position:0 -2656px;}
172
+ .f16 .nc{background-position:0 -2672px;}
173
+ .f16 .ne{background-position:0 -2688px;}
174
+ .f16 .ng{background-position:0 -2704px;}
175
+ .f16 .ni{background-position:0 -2720px;}
176
+ .f16 .nl{background-position:0 -2736px;}
177
+ .f16 .no{background-position:0 -2752px;}
178
+ .f16 .np{background-position:0 -2768px;}
179
+ .f16 .nr{background-position:0 -2784px;}
180
+ .f16 .nz{background-position:0 -2800px;}
181
+ .f16 .om{background-position:0 -2816px;}
182
+ .f16 .pa{background-position:0 -2832px;}
183
+ .f16 .pe{background-position:0 -2848px;}
184
+ .f16 .pf{background-position:0 -2864px;}
185
+ .f16 .pg{background-position:0 -2880px;}
186
+ .f16 .ph{background-position:0 -2896px;}
187
+ .f16 .pk{background-position:0 -2912px;}
188
+ .f16 .pl{background-position:0 -2928px;}
189
+ .f16 .pr{background-position:0 -2944px;}
190
+ .f16 .ps{background-position:0 -2960px;}
191
+ .f16 .pt{background-position:0 -2976px;}
192
+ .f16 .pw{background-position:0 -2992px;}
193
+ .f16 .py{background-position:0 -3008px;}
194
+ .f16 .qa{background-position:0 -3024px;}
195
+ .f16 .re{background-position:0 -3040px;}
196
+ .f16 .ro{background-position:0 -3056px;}
197
+ .f16 .rs{background-position:0 -3072px;}
198
+ .f16 .ru{background-position:0 -3088px;}
199
+ .f16 .rw{background-position:0 -3104px;}
200
+ .f16 .sa{background-position:0 -3120px;}
201
+ .f16 .sb{background-position:0 -3136px;}
202
+ .f16 .sc{background-position:0 -3152px;}
203
+ .f16 .sd{background-position:0 -3168px;}
204
+ .f16 .se{background-position:0 -3184px;}
205
+ .f16 .sg{background-position:0 -3200px;}
206
+ .f16 .si{background-position:0 -3216px;}
207
+ .f16 .sk{background-position:0 -3232px;}
208
+ .f16 .sl{background-position:0 -3248px;}
209
+ .f16 .sm{background-position:0 -3264px;}
210
+ .f16 .sn{background-position:0 -3280px;}
211
+ .f16 .so{background-position:0 -3296px;}
212
+ .f16 .sr{background-position:0 -3312px;}
213
+ .f16 .st{background-position:0 -3328px;}
214
+ .f16 .sv{background-position:0 -3344px;}
215
+ .f16 .sy{background-position:0 -3360px;}
216
+ .f16 .sz{background-position:0 -3376px;}
217
+ .f16 .tc{background-position:0 -3392px;}
218
+ .f16 .td{background-position:0 -3408px;}
219
+ .f16 .tg{background-position:0 -3424px;}
220
+ .f16 .th{background-position:0 -3440px;}
221
+ .f16 .tj{background-position:0 -3456px;}
222
+ .f16 .tl{background-position:0 -3472px;}
223
+ .f16 .tm{background-position:0 -3488px;}
224
+ .f16 .tn{background-position:0 -3504px;}
225
+ .f16 .to{background-position:0 -3520px;}
226
+ .f16 .tr{background-position:0 -3536px;}
227
+ .f16 .tt{background-position:0 -3552px;}
228
+ .f16 .tv{background-position:0 -3568px;}
229
+ .f16 .tw{background-position:0 -3584px;}
230
+ .f16 .tz{background-position:0 -3600px;}
231
+ .f16 .ua{background-position:0 -3616px;}
232
+ .f16 .ug{background-position:0 -3632px;}
233
+ .f16 .us{background-position:0 -3648px;}
234
+ .f16 .uy{background-position:0 -3664px;}
235
+ .f16 .uz{background-position:0 -3680px;}
236
+ .f16 .va{background-position:0 -3696px;}
237
+ .f16 .vc{background-position:0 -3712px;}
238
+ .f16 .ve{background-position:0 -3728px;}
239
+ .f16 .vg{background-position:0 -3744px;}
240
+ .f16 .vi{background-position:0 -3760px;}
241
+ .f16 .vn{background-position:0 -3776px;}
242
+ .f16 .vu{background-position:0 -3792px;}
243
+ .f16 .ws{background-position:0 -3808px;}
244
+ .f16 .ye{background-position:0 -3824px;}
245
+ .f16 .za{background-position:0 -3840px;}
246
+ .f16 .zm{background-position:0 -3856px;}
247
+ .f16 .zw{background-position:0 -3872px;}