An example of how to use ai2html to take SVG graphics at different sizes and export to PNG and HTML files. This is an optional step that follows my previous block about how to make this map using command line tools and D3.
Both of the blocks are modeled after this map by the New York Times.
Note that in order for bl.ocks.org to display the correct file, I’ve renamed index.html as snippet.html and index.preview.html as index.html.
Depending on what device you’re using, you might need to click the “Open” link to see this without the iframe cutting off the bottom.
Visit this block’s Gist page to download the associated Adobe Illustrator file. See the ai2html page for installation instructions and how to get Illustrator set up.
(function() {
// only want one resizer on the page
if (document.documentElement.className.indexOf("g-resizer-v3-init") > -1) return;
document.documentElement.className += " g-resizer-v3-init";
// require IE9+
if (!("querySelector" in document)) return;
function resizer() {
var elements = Array.prototype.slice.call(document.querySelectorAll(".g-artboard[data-min-width]")),
widthById = {};
elements.forEach(function(el) {
var parent = el.parentNode,
width = widthById[parent.id] || parent.getBoundingClientRect().width,
minwidth = el.getAttribute("data-min-width"),
maxwidth = el.getAttribute("data-max-width");
widthById[parent.id] = width;
if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
el.style.display = "block";
} else {
el.style.display = "none";
}
});
try {
if (window.parent && window.parent.$) {
window.parent.$("body").trigger("resizedcontent", [window]);
}
} catch(e) { console.log(e); }
}
document.addEventListener('DOMContentLoaded', resizer);
// feel free to replace throttle with _.throttle, if available
window.addEventListener('resize', throttle(resizer, 200));
function throttle(func, wait) {
// from underscore.js
var _now = Date.now || function() { return new Date().getTime(); },
context, args, result, timeout = null, previous = 0;
var later = function() {
previous = _now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = _now(), remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
}
})();<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14 Years After U.S. Invasion, the Taliban Are Back in Control of Large Parts of Afghanistan</title>
</head>
<body>
<h1>14 Years After U.S. Invasion, the Taliban Are Back in Control of Large Parts of Afghanistan</h1>
<div>
<p>
The Taliban have a significant footprint in Afghanistan, according to Bill Roggio, the editor of The Long War Journal, an online publication that is tracking Taliban control. Mr. Roggio has confirmed that about one-fifth of the country is controlled or contested by the Taliban, but based on his understanding of how the Taliban operate, he said, “they probably either control or heavily influence about a half of the country.”
</p>
<div>
<div id='g-index-box' class='ai2html'>
<!-- Generated by ai2html v0.59 - 2016-02-25 - 12:58 -->
<!-- ai file: index -->
<style type='text/css' media='screen,print'>
.g-artboard {
margin:0 auto;
}
</style>
<script type='text/javascript' src='resizer-script.js'></script>
<!-- Artboard: wide -->
<div id='g-index-wide' class='g-artboard g-show-medium g-show-large g-show-xlarge g-show-xxlarge' data-min-width='720'>
<style type='text/css' media='screen,print'>
#g-index-wide{
position:relative;
overflow:hidden;
width:720px;
}
.g-aiAbs{
position:absolute;
}
.g-aiImg{
display:block;
width:100% !important;
}
#g-index-wide p{
font-family:news-gothic-std,helvetica,arial,sans-serif;
font-size:13px;
line-height:18px;
margin:0;
}
#g-index-wide .g-aiPstyle0 {
font-family:arial,helvetica,sans-serif;
line-height:16px;
color:#000000;
}
#g-index-wide .g-aiPstyle1 {
font-family:arial,helvetica,sans-serif;
line-height:16px;
filter: alpha(opacity=60);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
opacity:0.6;
color:#000000;
}
#g-index-wide .g-aiPstyle2 {
font-family:arial,helvetica,sans-serif;
font-size:21px;
line-height:25px;
letter-spacing:0.25em;
filter: alpha(opacity=40);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
opacity:0.4;
color:#000000;
}
#g-index-wide .g-aiPstyle3 {
font-family:arial,helvetica,sans-serif;
font-size:10px;
line-height:12px;
color:#000000;
}
.g-aiPtransformed p { white-space: nowrap; }
</style>
<div id='g-index-wide-graphic'>
<img id='g-ai0-0'
class='g-aiImg'
src='./index-wide.png'
/>
<div id='g-ai0-1' class='g-map g-aiAbs' style='top:4.4841%;left:9.7535%;'>
<p class='g-aiPstyle0'>Taliban fighters took control of Kondoz, a provincial</p>
<p class='g-aiPstyle0'>capital, in September and held it for over two weeks.</p>
</div>
<div id='g-ai0-2' class='g-map g-aiAbs' style='top:17.4191%;left:40.7834%;'>
<p class='g-aiPstyle1'>Kholm</p>
</div>
<div id='g-ai0-3' class='g-map g-aiAbs' style='top:17.5916%;left:51.5262%;'>
<p class='g-aiPstyle1'>Kondoz</p>
</div>
<div id='g-ai0-4' class='g-map g-aiAbs' style='top:26.9048%;left:57.686%;'>
<p class='g-aiPstyle1'>Baghlan</p>
</div>
<div id='g-ai0-5' class='g-map g-aiAbs' style='top:31.7338%;left:80.4667%;'>
<p class='g-aiPstyle0'>The Taliban overran</p>
<p class='g-aiPstyle0'>Wardoj and Baharak</p>
<p class='g-aiPstyle0'>districts in early</p>
<p class='g-aiPstyle0'>October. </p>
</div>
<div id='g-ai0-6' class='g-map g-aiAbs' style='top:40.8746%;left:55.6742%;'>
<p class='g-aiPstyle1'>Kabul</p>
</div>
<div id='g-ai0-7' class='g-map g-aiAbs' style='top:46.221%;left:65.9158%;'>
<p class='g-aiPstyle1'>Jalalabad</p>
</div>
<div id='g-ai0-8' class='g-map g-aiAbs' style='top:47.0834%;left:7.3209%;'>
<p class='g-aiPstyle1'>Herat</p>
</div>
<div id='g-ai0-9' class='g-map g-aiAbs' style='top:48.1182%;left:25.6525%;'>
<p class='g-aiPstyle2'>AFGHANISTAN</p>
</div>
<div id='g-ai0-10' class='g-map g-aiAbs' style='top:52.4298%;left:78.0963%;'>
<p class='g-aiPstyle0'>The Taliban took</p>
<p class='g-aiPstyle0'>control of Waygal</p>
<p class='g-aiPstyle0'>district in June. </p>
</div>
<div id='g-ai0-11' class='g-map g-aiAbs' style='top:53.4646%;left:61.4336%;'>
<p class='g-aiPstyle1'>Gardiz</p>
</div>
<div id='g-ai0-12' class='g-map g-aiAbs' style='top:72.6084%;left:37.5398%;'>
<p class='g-aiPstyle1'>Kandahar</p>
</div>
<div id='g-ai0-13' class='g-map g-aiAbs' style='top:86.4057%;left:69.5317%;'>
<p class='g-aiPstyle0'>Taliban-controlled districts</p>
</div>
<div id='g-ai0-14' class='g-map g-aiAbs' style='top:89.5101%;left:69.5317%;'>
<p class='g-aiPstyle0'>Contested districts</p>
</div>
<div id='g-ai0-15' class='g-map g-aiAbs' style='top:95.8914%;left:64.907%;'>
<p class='g-aiPstyle3'>100 miles</p>
</div>
</div>
</div>
<!-- Artboard: medium -->
<div id='g-index-medium' class='g-artboard g-show-submedium' data-min-width='480' data-max-width='719'>
<style type='text/css' media='screen,print'>
#g-index-medium{
position:relative;
overflow:hidden;
width:480px;
}
.g-aiAbs{
position:absolute;
}
.g-aiImg{
display:block;
width:100% !important;
}
#g-index-medium p{
font-family:news-gothic-std,helvetica,arial,sans-serif;
font-size:13px;
line-height:18px;
margin:0;
}
#g-index-medium .g-aiPstyle0 {
font-family:arial,helvetica,sans-serif;
font-size:11px;
line-height:13px;
filter: alpha(opacity=60);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
opacity:0.6;
color:#000000;
}
#g-index-medium .g-aiPstyle1 {
font-family:arial,helvetica,sans-serif;
font-size:14px;
line-height:17px;
letter-spacing:0.25em;
filter: alpha(opacity=40);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
opacity:0.4;
color:#000000;
}
#g-index-medium .g-aiPstyle2 {
font-family:arial,helvetica,sans-serif;
font-size:11px;
line-height:13px;
color:#000000;
}
#g-index-medium .g-aiPstyle3 {
font-family:arial,helvetica,sans-serif;
font-size:10px;
line-height:11px;
color:#000000;
}
.g-aiPtransformed p { white-space: nowrap; }
</style>
<div id='g-index-medium-graphic'>
<img id='g-ai1-0'
class='g-aiImg'
src='./index-medium.png'
/>
<div id='g-ai1-1' class='g-map g-aiAbs' style='top:17.969%;left:38.4862%;'>
<p class='g-aiPstyle0'>Kholm</p>
</div>
<div id='g-ai1-2' class='g-map g-aiAbs' style='top:18.5135%;left:48.9214%;'>
<p class='g-aiPstyle0'>Kondoz</p>
</div>
<div id='g-ai1-3' class='g-map g-aiAbs' style='top:28.3148%;left:57.5257%;'>
<p class='g-aiPstyle0'>Baghlan</p>
</div>
<div id='g-ai1-4' class='g-map g-aiAbs' style='top:41.3831%;left:53.3979%;'>
<p class='g-aiPstyle0'>Kabul</p>
</div>
<div id='g-ai1-5' class='g-map g-aiAbs' style='top:46.8283%;left:63.8766%;'>
<p class='g-aiPstyle0'>Jalalabad</p>
</div>
<div id='g-ai1-6' class='g-map g-aiAbs' style='top:47.645%;left:5.8186%;'>
<p class='g-aiPstyle0'>Herat</p>
</div>
<div id='g-ai1-7' class='g-map g-aiAbs' style='top:48.7341%;left:25.6365%;'>
<p class='g-aiPstyle1'>AFGHANISTAN</p>
</div>
<div id='g-ai1-8' class='g-map g-aiAbs' style='top:56.085%;left:59.7757%;'>
<p class='g-aiPstyle0'>Gardiz</p>
</div>
<div id='g-ai1-9' class='g-map g-aiAbs' style='top:72.4204%;left:37.2399%;'>
<p class='g-aiPstyle0'>Kandahar</p>
</div>
<div id='g-ai1-10' class='g-map g-aiAbs' style='top:80.5882%;left:59.1568%;'>
<p class='g-aiPstyle2'>Taliban-controlled districts</p>
</div>
<div id='g-ai1-11' class='g-map g-aiAbs' style='top:84.1275%;left:59.1568%;'>
<p class='g-aiPstyle2'>Contested districts</p>
</div>
<div id='g-ai1-12' class='g-map g-aiAbs' style='top:89.8449%;left:54.5743%;'>
<p class='g-aiPstyle3'>100 miles</p>
</div>
</div>
</div>
<!-- Artboard: small -->
<div id='g-index-small' class='g-artboard g-show-small g-show-smallplus' data-min-width='300' data-max-width='479'>
<style type='text/css' media='screen,print'>
#g-index-small{
position:relative;
overflow:hidden;
width:300px;
}
.g-aiAbs{
position:absolute;
}
.g-aiImg{
display:block;
width:100% !important;
}
#g-index-small p{
font-family:news-gothic-std,helvetica,arial,sans-serif;
font-size:13px;
line-height:18px;
margin:0;
}
#g-index-small .g-aiPstyle0 {
font-family:arial,helvetica,sans-serif;
font-size:8px;
line-height:9px;
filter: alpha(opacity=60);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
opacity:0.6;
color:#000000;
}
#g-index-small .g-aiPstyle1 {
font-family:arial,helvetica,sans-serif;
font-size:9px;
line-height:11px;
letter-spacing:0.25em;
filter: alpha(opacity=40);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
opacity:0.4;
color:#000000;
}
#g-index-small .g-aiPstyle2 {
font-family:arial,helvetica,sans-serif;
font-size:8px;
line-height:9px;
color:#000000;
}
#g-index-small .g-aiPstyle3 {
font-family:arial,helvetica,sans-serif;
font-size:7px;
line-height:8px;
color:#000000;
}
.g-aiPtransformed p { white-space: nowrap; }
</style>
<div id='g-index-small-graphic'>
<img id='g-ai2-0'
class='g-aiImg'
src='./index-small.png'
/>
<div id='g-ai2-1' class='g-map g-aiAbs' style='top:17.7615%;left:48.0557%;'>
<p class='g-aiPstyle0'>Kondoz</p>
</div>
<div id='g-ai2-2' class='g-map g-aiAbs' style='top:41.1547%;left:52.2133%;'>
<p class='g-aiPstyle0'>Kabul</p>
</div>
<div id='g-ai2-3' class='g-map g-aiAbs' style='top:47.2196%;left:4.876%;'>
<p class='g-aiPstyle0'>Herat</p>
</div>
<div id='g-ai2-4' class='g-map g-aiAbs' style='top:48.9524%;left:24.8604%;'>
<p class='g-aiPstyle1'>AFGHANISTAN</p>
</div>
<div id='g-ai2-5' class='g-map g-aiAbs' style='top:72.3456%;left:37.0264%;'>
<p class='g-aiPstyle0'>Kandahar</p>
</div>
<div id='g-ai2-6' class='g-map g-aiAbs' style='top:82.7426%;left:53.2113%;'>
<p class='g-aiPstyle2'>Taliban-controlled districts</p>
</div>
<div id='g-ai2-7' class='g-map g-aiAbs' style='top:86.6415%;left:53.2113%;'>
<p class='g-aiPstyle2'>Contested districts</p>
</div>
<div id='g-ai2-8' class='g-map g-aiAbs' style='top:92.2732%;left:48.559%;'>
<p class='g-aiPstyle3'>100 miles</p>
</div>
</div>
</div>
<!-- End ai2html - 2016-02-25 - 12:58 -->
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{headline}}</title>
</head>
<body>
<h1>{{headline}}</h1>
<div>
<p>
{{leadin}}
</p>
<div>
{{ai2htmlPartial}}
</div>
</div>
</body>
</html><div id='g-index-box' class='ai2html'>
<!-- Generated by ai2html v0.59 - 2016-02-25 - 12:58 -->
<!-- ai file: index -->
<style type='text/css' media='screen,print'>
.g-artboard {
margin:0 auto;
}
</style>
<script type='text/javascript' src='resizer-script.js'></script>
<!-- Artboard: wide -->
<div id='g-index-wide' class='g-artboard g-show-medium g-show-large g-show-xlarge g-show-xxlarge' data-min-width='720'>
<style type='text/css' media='screen,print'>
#g-index-wide{
position:relative;
overflow:hidden;
width:720px;
}
.g-aiAbs{
position:absolute;
}
.g-aiImg{
display:block;
width:100% !important;
}
#g-index-wide p{
font-family:news-gothic-std,helvetica,arial,sans-serif;
font-size:13px;
line-height:18px;
margin:0;
}
#g-index-wide .g-aiPstyle0 {
font-family:arial,helvetica,sans-serif;
line-height:16px;
color:#000000;
}
#g-index-wide .g-aiPstyle1 {
font-family:arial,helvetica,sans-serif;
line-height:16px;
filter: alpha(opacity=60);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
opacity:0.6;
color:#000000;
}
#g-index-wide .g-aiPstyle2 {
font-family:arial,helvetica,sans-serif;
font-size:21px;
line-height:25px;
letter-spacing:0.25em;
filter: alpha(opacity=40);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
opacity:0.4;
color:#000000;
}
#g-index-wide .g-aiPstyle3 {
font-family:arial,helvetica,sans-serif;
font-size:10px;
line-height:12px;
color:#000000;
}
.g-aiPtransformed p { white-space: nowrap; }
</style>
<div id='g-index-wide-graphic'>
<img id='g-ai0-0'
class='g-aiImg'
src='./index-wide.png'
/>
<div id='g-ai0-1' class='g-map g-aiAbs' style='top:4.4841%;left:9.7535%;'>
<p class='g-aiPstyle0'>Taliban fighters took control of Kondoz, a provincial</p>
<p class='g-aiPstyle0'>capital, in September and held it for over two weeks.</p>
</div>
<div id='g-ai0-2' class='g-map g-aiAbs' style='top:17.4191%;left:40.7834%;'>
<p class='g-aiPstyle1'>Kholm</p>
</div>
<div id='g-ai0-3' class='g-map g-aiAbs' style='top:17.5916%;left:51.5262%;'>
<p class='g-aiPstyle1'>Kondoz</p>
</div>
<div id='g-ai0-4' class='g-map g-aiAbs' style='top:26.9048%;left:57.686%;'>
<p class='g-aiPstyle1'>Baghlan</p>
</div>
<div id='g-ai0-5' class='g-map g-aiAbs' style='top:31.7338%;left:80.4667%;'>
<p class='g-aiPstyle0'>The Taliban overran</p>
<p class='g-aiPstyle0'>Wardoj and Baharak</p>
<p class='g-aiPstyle0'>districts in early</p>
<p class='g-aiPstyle0'>October. </p>
</div>
<div id='g-ai0-6' class='g-map g-aiAbs' style='top:40.8746%;left:55.6742%;'>
<p class='g-aiPstyle1'>Kabul</p>
</div>
<div id='g-ai0-7' class='g-map g-aiAbs' style='top:46.221%;left:65.9158%;'>
<p class='g-aiPstyle1'>Jalalabad</p>
</div>
<div id='g-ai0-8' class='g-map g-aiAbs' style='top:47.0834%;left:7.3209%;'>
<p class='g-aiPstyle1'>Herat</p>
</div>
<div id='g-ai0-9' class='g-map g-aiAbs' style='top:48.1182%;left:25.6525%;'>
<p class='g-aiPstyle2'>AFGHANISTAN</p>
</div>
<div id='g-ai0-10' class='g-map g-aiAbs' style='top:52.4298%;left:78.0963%;'>
<p class='g-aiPstyle0'>The Taliban took</p>
<p class='g-aiPstyle0'>control of Waygal</p>
<p class='g-aiPstyle0'>district in June. </p>
</div>
<div id='g-ai0-11' class='g-map g-aiAbs' style='top:53.4646%;left:61.4336%;'>
<p class='g-aiPstyle1'>Gardiz</p>
</div>
<div id='g-ai0-12' class='g-map g-aiAbs' style='top:72.6084%;left:37.5398%;'>
<p class='g-aiPstyle1'>Kandahar</p>
</div>
<div id='g-ai0-13' class='g-map g-aiAbs' style='top:86.4057%;left:69.5317%;'>
<p class='g-aiPstyle0'>Taliban-controlled districts</p>
</div>
<div id='g-ai0-14' class='g-map g-aiAbs' style='top:89.5101%;left:69.5317%;'>
<p class='g-aiPstyle0'>Contested districts</p>
</div>
<div id='g-ai0-15' class='g-map g-aiAbs' style='top:95.8914%;left:64.907%;'>
<p class='g-aiPstyle3'>100 miles</p>
</div>
</div>
</div>
<!-- Artboard: medium -->
<div id='g-index-medium' class='g-artboard g-show-submedium' data-min-width='480' data-max-width='719'>
<style type='text/css' media='screen,print'>
#g-index-medium{
position:relative;
overflow:hidden;
width:480px;
}
.g-aiAbs{
position:absolute;
}
.g-aiImg{
display:block;
width:100% !important;
}
#g-index-medium p{
font-family:news-gothic-std,helvetica,arial,sans-serif;
font-size:13px;
line-height:18px;
margin:0;
}
#g-index-medium .g-aiPstyle0 {
font-family:arial,helvetica,sans-serif;
font-size:11px;
line-height:13px;
filter: alpha(opacity=60);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
opacity:0.6;
color:#000000;
}
#g-index-medium .g-aiPstyle1 {
font-family:arial,helvetica,sans-serif;
font-size:14px;
line-height:17px;
letter-spacing:0.25em;
filter: alpha(opacity=40);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
opacity:0.4;
color:#000000;
}
#g-index-medium .g-aiPstyle2 {
font-family:arial,helvetica,sans-serif;
font-size:11px;
line-height:13px;
color:#000000;
}
#g-index-medium .g-aiPstyle3 {
font-family:arial,helvetica,sans-serif;
font-size:10px;
line-height:11px;
color:#000000;
}
.g-aiPtransformed p { white-space: nowrap; }
</style>
<div id='g-index-medium-graphic'>
<img id='g-ai1-0'
class='g-aiImg'
src='./index-medium.png'
/>
<div id='g-ai1-1' class='g-map g-aiAbs' style='top:17.969%;left:38.4862%;'>
<p class='g-aiPstyle0'>Kholm</p>
</div>
<div id='g-ai1-2' class='g-map g-aiAbs' style='top:18.5135%;left:48.9214%;'>
<p class='g-aiPstyle0'>Kondoz</p>
</div>
<div id='g-ai1-3' class='g-map g-aiAbs' style='top:28.3148%;left:57.5257%;'>
<p class='g-aiPstyle0'>Baghlan</p>
</div>
<div id='g-ai1-4' class='g-map g-aiAbs' style='top:41.3831%;left:53.3979%;'>
<p class='g-aiPstyle0'>Kabul</p>
</div>
<div id='g-ai1-5' class='g-map g-aiAbs' style='top:46.8283%;left:63.8766%;'>
<p class='g-aiPstyle0'>Jalalabad</p>
</div>
<div id='g-ai1-6' class='g-map g-aiAbs' style='top:47.645%;left:5.8186%;'>
<p class='g-aiPstyle0'>Herat</p>
</div>
<div id='g-ai1-7' class='g-map g-aiAbs' style='top:48.7341%;left:25.6365%;'>
<p class='g-aiPstyle1'>AFGHANISTAN</p>
</div>
<div id='g-ai1-8' class='g-map g-aiAbs' style='top:56.085%;left:59.7757%;'>
<p class='g-aiPstyle0'>Gardiz</p>
</div>
<div id='g-ai1-9' class='g-map g-aiAbs' style='top:72.4204%;left:37.2399%;'>
<p class='g-aiPstyle0'>Kandahar</p>
</div>
<div id='g-ai1-10' class='g-map g-aiAbs' style='top:80.5882%;left:59.1568%;'>
<p class='g-aiPstyle2'>Taliban-controlled districts</p>
</div>
<div id='g-ai1-11' class='g-map g-aiAbs' style='top:84.1275%;left:59.1568%;'>
<p class='g-aiPstyle2'>Contested districts</p>
</div>
<div id='g-ai1-12' class='g-map g-aiAbs' style='top:89.8449%;left:54.5743%;'>
<p class='g-aiPstyle3'>100 miles</p>
</div>
</div>
</div>
<!-- Artboard: small -->
<div id='g-index-small' class='g-artboard g-show-small g-show-smallplus' data-min-width='300' data-max-width='479'>
<style type='text/css' media='screen,print'>
#g-index-small{
position:relative;
overflow:hidden;
width:300px;
}
.g-aiAbs{
position:absolute;
}
.g-aiImg{
display:block;
width:100% !important;
}
#g-index-small p{
font-family:news-gothic-std,helvetica,arial,sans-serif;
font-size:13px;
line-height:18px;
margin:0;
}
#g-index-small .g-aiPstyle0 {
font-family:arial,helvetica,sans-serif;
font-size:8px;
line-height:9px;
filter: alpha(opacity=60);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
opacity:0.6;
color:#000000;
}
#g-index-small .g-aiPstyle1 {
font-family:arial,helvetica,sans-serif;
font-size:9px;
line-height:11px;
letter-spacing:0.25em;
filter: alpha(opacity=40);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
opacity:0.4;
color:#000000;
}
#g-index-small .g-aiPstyle2 {
font-family:arial,helvetica,sans-serif;
font-size:8px;
line-height:9px;
color:#000000;
}
#g-index-small .g-aiPstyle3 {
font-family:arial,helvetica,sans-serif;
font-size:7px;
line-height:8px;
color:#000000;
}
.g-aiPtransformed p { white-space: nowrap; }
</style>
<div id='g-index-small-graphic'>
<img id='g-ai2-0'
class='g-aiImg'
src='./index-small.png'
/>
<div id='g-ai2-1' class='g-map g-aiAbs' style='top:17.7615%;left:48.0557%;'>
<p class='g-aiPstyle0'>Kondoz</p>
</div>
<div id='g-ai2-2' class='g-map g-aiAbs' style='top:41.1547%;left:52.2133%;'>
<p class='g-aiPstyle0'>Kabul</p>
</div>
<div id='g-ai2-3' class='g-map g-aiAbs' style='top:47.2196%;left:4.876%;'>
<p class='g-aiPstyle0'>Herat</p>
</div>
<div id='g-ai2-4' class='g-map g-aiAbs' style='top:48.9524%;left:24.8604%;'>
<p class='g-aiPstyle1'>AFGHANISTAN</p>
</div>
<div id='g-ai2-5' class='g-map g-aiAbs' style='top:72.3456%;left:37.0264%;'>
<p class='g-aiPstyle0'>Kandahar</p>
</div>
<div id='g-ai2-6' class='g-map g-aiAbs' style='top:82.7426%;left:53.2113%;'>
<p class='g-aiPstyle2'>Taliban-controlled districts</p>
</div>
<div id='g-ai2-7' class='g-map g-aiAbs' style='top:86.6415%;left:53.2113%;'>
<p class='g-aiPstyle2'>Contested districts</p>
</div>
<div id='g-ai2-8' class='g-map g-aiAbs' style='top:92.2732%;left:48.559%;'>
<p class='g-aiPstyle3'>100 miles</p>
</div>
</div>
</div>
<!-- End ai2html - 2016-02-25 - 12:58 -->
</div>