クリッカブルな日本地図を描きたい。とき、日本地図の画像を用意して、都道府県の座標を落としていく、イメージマップを使われてきたのが一般的かと思いますが、イマドキ「Japan Map プラグイン」という jQuery プラグインが用意されていたりします。

Japan Map プラグイン を使って色分けリアルな日本地図

こんなクリッカブルマップが簡単に描けます。

このソースは、コチラ　https://takemaru-hirai.github.io/japan-map/

スターフィールド株式会社さんや、ゆうそうとITブログ.さんが詳しく解説されています。ありがとうございます。

また、

エリアをクリックして、詳細の都道府県を表示する二段階方式

での表示の仕方は、Webシステム開発のメモなどさんが、丁寧に解説されていて、非常に参考になります。

 

しかし、私が今回やりたいのは、もっと

簡素化、デフォルメされた日本地図で、色やエリア分けも簡単にできる方法で、なおかつレスポンシブ

なのです。

日本地図は、いろいろと簡素化されたデザインが出ていて、ほぼ四角だけで書くことも可能です。

であれば、画像を使わなくても、テーブルだったり、レイアウト系のスタイルを駆使することでできるんじゃないかと…

そして、画像じゃなければレスポンシブ化もしやすいはず

そんな安易に考えたのですが、エグい。かなり難しい。途中挫折して数日放り投げた後、ようやくなんとか完成しました（と思います）
※どなたか、デキる方、改良版があったら教えてください。

 

<div id="clickaresjmap">
  <ul class="clickaresjmap dropdown">
    <li class="area hokkaido-area"><a class="dropdown-toggle" href="#hokkaido-area" data-toggle="dropdown">北海道</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken hokkaido"><a href="#hokkaido"><span class="todofukenname">北海道</span></a></li>
      </ul>
    </li>
    <li class="area touhoku-area"><a class="dropdown-toggle" href="#touhoku-area" data-toggle="dropdown">東北</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken aomori"><a href="#aomori"><span class="todofukenname">青森</span></a></li>
        <li class="todofuken iwate"><a href="#iwate"><span class="todofukenname">岩手</span></a></li>
        <li class="todofuken akita"><a href="#akita"><span class="todofukenname">秋田</span></a></li>
        <li class="todofuken miyagi"><a href="#miyagi"><span class="todofukenname">宮城</span></a></li>
        <li class="todofuken yamagata"><a href="#yamagata"><span class="todofukenname">山形</span></a></li>
        <li class="todofuken fukushima"><a href="#fukushima"><span class="todofukenname">福島</span></a></li>
      </ul>
    </li>
    <li class="area kanto-area"><a class="dropdown-toggle" href="#kanto-area" data-toggle="dropdown">関東</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken ibaraki"><a href="#ibaraki"><span class="todofukenname">茨城</span></a></li>
        <li class="todofuken tochigi"><a href="#tochigi"><span class="todofukenname">栃木</span></a></li>
        <li class="todofuken gunma"><a href="#gunma"><span class="todofukenname">群馬</span></a></li>
        <li class="todofuken chiba"><a href="#chiba"><span class="todofukenname">千葉</span></a></li>
        <li class="todofuken saitama"><a href="#saitama"><span class="todofukenname">埼玉</span></a></li>
        <li class="todofuken tokyo"><a href="#tokyo"><span class="todofukenname">東京</span></a></li>
        <li class="todofuken kanagawa"><a href="#kanagawa"><span class="todofukenname">神奈川</span></a></li>
      </ul>
    </li>
    <li class="area koshin-etsu-area"><a class="dropdown-toggle" href="#koshin-etsu-area" data-toggle="dropdown">甲信越</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken nigata"><a href="#nigata"><span class="todofukenname">新潟</span></a></li>
        <li class="todofuken nagano"><a href="#nagano"><span class="todofukenname">長野</span></a></li>
        <li class="todofuken yamanashi"><a href="#yamanashi"><span class="todofukenname">山梨</span></a></li>
      </ul>
    </li>
    <li class="area hokuriku-area"><a class="dropdown-toggle" href="#hokuriku-area" data-toggle="dropdown">北陸</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken toyama"><a href="#toyama"><span class="todofukenname">富山</span></a></li>
        <li class="todofuken ishikawa"><a href="#ishikawa"><span class="todofukenname">石川</span></a></li>
        <li class="todofuken fukui"><a href="#fukui"><span class="todofukenname">福井</span></a></li>
      </ul>
    </li>
    <li class="area toukai-area"><a class="dropdown-toggle" href="#toukai-area" data-toggle="dropdown">東海</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken shizuoka"><a href="#sizuoka"><span class="todofukenname">静岡</span></a></li>
        <li class="todofuken aichi"><a href="#aichi"><span class="todofukenname">愛知</span></a></li>
        <li class="todofuken gifu"><a href="#gifu"><span class="todofukenname">岐阜</span></a></li>
        <li class="todofuken mie"><a href="#mie"><span class="todofukenname">三重</span></a></li>
      </ul>
    </li>
    <li class="area kansai-area"><a class="dropdown-toggle" href="#kansai-area" data-toggle="dropdown">関西</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken shiga"><a href="#shiga"><span class="todofukenname">滋賀</span></a></li>
        <li class="todofuken kyoto"><a href="#kyoto"><span class="todofukenname">京都</span></a></li>
        <li class="todofuken nara"><a href="#nara"><span class="todofukenname">奈良</span></a></li>
        <li class="todofuken oosaka"><a href="#oosaka"><span class="todofukenname">大阪</span></a></li>
        <li class="todofuken wakayama"><a href="#wakayama"><span class="todofukenname">和歌山</span></a></li>
        <li class="todofuken hyogo"><a href="#hyogo"><span class="todofukenname">兵庫</span></a></li>
      </ul>
    </li>
    <li class="area chugoku-area"><a class="dropdown-toggle" href="#chugoku-area" data-toggle="dropdown">中国</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken tottori"><a href="#tottori"><span class="todofukenname">鳥取</span></a></li>
        <li class="todofuken shimane"><a href="#shimane"><span class="todofukenname">島根</span></a></li>
        <li class="todofuken okayama"><a href="#okayama"><span class="todofukenname">岡山</span></a></li>
        <li class="todofuken hiroshima"><a href="#hiroshima"><span class="todofukenname">広島</span></a></li>
        <li class="todofuken yamaguchi"><a href="#yamaguchi"><span class="todofukenname">山口</span></a></li>
      </ul>
    </li>
    <li class="area shikoku-area"><a class="dropdown-toggle" href="#shikoku-area" data-toggle="dropdown">四国</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken kagawa"><a href="#kagawa"><span class="todofukenname">香川</span></a></li>
        <li class="todofuken tokushima"><a href="#tokushima"><span class="todofukenname">徳島</span></a></li>
        <li class="todofuken kouchi"><a href="#kouchi"><span class="todofukenname">高知</span></a></li>
        <li class="todofuken ehime"><a href="#ehime"><span class="todofukenname">愛媛</span></a></li>
      </ul>
    </li>
    <li class="area kyu-syu-area"><a class="dropdown-toggle" href="#kyu-syu-area" data-toggle="dropdown">九州</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken fukuoka"><a href="#fukuoka"><span class="todofukenname">福岡</span></a></li>
        <li class="todofuken ooita"><a href="#ooita"><span class="todofukenname">大分</span></a></li>
        <li class="todofuken miyazaki"><a href="#miyazaki"><span class="todofukenname">宮崎</span></a></li>
        <li class="todofuken kumamoto"><a href="#kumamoto"><span class="todofukenname">熊本</span></a></li>
        <li class="todofuken saga"><a href="#saga"><span class="todofukenname">佐賀</span></a></li>
        <li class="todofuken nagasaki"><a href="#nagasaki"><span class="todofukenname">長崎</span></a></li>
        <li class="todofuken kagoshima"><a href="#kagoshima"><span class="todofukenname">鹿児島</span></a></li>
      </ul>
    </li>
    <li class="area okinawa-area"><a class="dropdown-toggle" href="#okinawa-area" data-toggle="dropdown">沖縄</a><br />
      <ul class="dropdown-menu">
        <li class="todofuken okinawa"><a href="#okinawa"><span class="todofukenname">沖縄</span></a></li>
      </ul>
    </li>
  </ul>
</div>

<script src="js/bsDropdown.js"></script>

CSS

/* クリッカブル＆レスポンシブ日本地図
-------------------------------------------------------------- */
.clickaresjmap .dropdown-menu {
	top: initial;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none;
}
.clickaresjmap .dropdown-menu > li > a {
	padding: initial;
	line-height: inherit;
}

@media screen and (min-width: 576px) {
.clickaresjmap {
	border: #6CC 1px solid;
	display: block;
	margin: 10px;
	padding: 0;
	position: relative;
	font-size: 14px;
	min-width: 630px;
}
.clickaresjmap *:after {
	display: block;
	content: " ";
	line-height: 0;
}
.clickaresjmap:after {
	display: block;
	content: " ";
	line-height: 0;
	padding-top: 70%;
}
/*  共通  */
.clickaresjmap ul {
	padding: 0;
}
.clickaresjmap li, .clickaresjmap li ul {
	display: block;
	min-width: 3em;
	list-style: none;
	margin: 0;
	position: absolute;
	border-radius: 5px;
	box-sizing: border-box;
}
.clickaresjmap li ul {
	width: 100%;
	height: 100%;
	background-color: #FFF;
}
.clickaresjmap li.area li.todofuken a:hover {
	color: #ffffff;
	background-color: inherit;
}
.clickaresjmap li.area li.todofuken {
	border: 1px solid #FFFFFF;
}
.clickaresjmap li.area li.todofuken:hover {
	opacity:0.5;
}
.clickaresjmap a {
	display: block;
	width: 100%;
	height: 100%;
}
.todofukenname {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 100%;
	text-align: center;
	color: #ffffff;
}
.dropdown-toggle {
	position: absolute;
}
/*    北海道エリア    */
.hokkaido-area {
	display: block;
	width: 20%;
	top: 0;
	left: 80%;
}
.hokkaido-area:after {
	padding-top: 65%;
}
.hokkaido {
	width: 100%;
	text-align: center;
	line-height: 0;
	background-color: #008dc3;
}
.hokkaido a:after {
	padding-top: 65%;
}
/*   東北エリア     */
.touhoku-area {
	display: block;
	width: 20%;
	top: 20%;
	left: 80%;
	z-index: 1;
}
.touhoku-area:after {
	padding-top: 100%;
}
.aomori {
	width: 100%;
	text-align: center;
	line-height: 0;
	background-color: #00a364;
}
.aomori a:after {
	padding-top: 25%;
}
.iwate {
	width: 50%;
	top: 25%;
	left: 50%;
	line-height: 0;
	background-color: #00a364;
}
.iwate a:after {
	padding-top: 50%;
}
.akita {
	width: 50%;
	top: 25%;
	left: 0%;
	line-height: 0;
	background-color: #00a364;
}
.akita a:after {
	padding-top: 50%;
}
.miyagi {
	width: 50%;
	top: 50%;
	left: 50%;
	line-height: 0;
	background-color: #00a364;
}
.miyagi a:after {
	padding-top: 50%;
}
.yamagata {
	width: 50%;
	top: 50%;
	left: 0%;
	line-height: 0;
	background-color: #00a364;
}
.yamagata a:after {
	padding-top: 50%;
}
.fukushima {
	width: 100%;
	top: 75%;
	left: 0;
	line-height: 0;
	background-color: #00a364;
}
.fukushima a:after {
	padding-top: 24%;
}
/*  　   関東エリア   */
.kanto-area {
	display: block;
	width: 20%;
	top: 48%;
	left: 80%;
}
.kanto-area:after {
	padding-top: 100%;
}
.ibaraki {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	left: 66.67%;
	background-color: #90ba1e;
}
.ibaraki a:after {
	padding-top: 150%;
}
.tochigi {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	left: 33.33%;
	background-color: #90ba1e;
}
.tochigi a:after {
	padding-top: 100%;
}
.gunma {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	left: 0;
	background-color: #90ba1e;
}
.gunma a:after {
	padding-top: 100%;
}
.chiba {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 49%;
	left: 66.67%;
	background-color: #90ba1e;
}
.chiba a:after {
	padding-top: 150%;
}
.saitama {
	width: 66.67%;
	text-align: center;
	line-height: 0;
	top: 33.33%;
	left: 0;
	background-color: #90ba1e;
}
.saitama a:after {
	padding-top: 33.33%;
}
.tokyo {
	width: 66.67%;
	text-align: center;
	line-height: 0;
	top: 55.33%;
	left: 0;
	background-color: #90ba1e;
}
.tokyo a:after {
	padding-top: 33.33%;
}
.kanagawa {
	width: 66.67%;
	text-align: center;
	line-height: 0;
	top: 78.3%;
	left: 0;
	background-color: #90ba1e;
}
.kanagawa a:after {
	padding-top: 33.33%;
}
/*   甲信越エリア    */
.koshin-etsu-area {
	display: block;
	width: 13%;
	top: 41%;
	left: 67%;
	z-index: 3;
}
.koshin-etsu-area:after {
	padding-top: 140%;
}
.nigata {
	width: 100%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 0;
	background-color: #e9ca0b;
}
.nigata a:after {
	padding-top: 45%;
}
.nagano {
	width: 100%;
	text-align: center;
	line-height: 0;
	top: 33.33%;
	left: 0;
	background-color: #e9ca0b;
}
.nagano a:after {
	padding-top: 45%;
}
.yamanashi {
	width: 100%;
	text-align: center;
	line-height: 0;
	top: 66.67%;
	left: 0;
	background-color: #e9ca0b;
}
.yamanashi a:after {
	padding-top: 45%;
}
/*  北陸エリア  */
.hokuriku-area {
	display: block;
	width: 21%;
	top: 48%;
	left: 46%;
	z-index: 2;
	background-color: #e9ca0b;
}
.hokuriku-area:after {
	padding-top: 40%;
}
.toyama {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 66.67%;
	background-color: #e9ca0b;
}
.toyama a:after {
	padding-top: 121%;
}
.ishikawa {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 33.33%;
	background-color: #e9ca0b;
}
.ishikawa a:after {
	padding-top: 121%;
}
.fukui {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 0;
	background-color: #e9ca0b;
}
.fukui a:after {
	padding-top: 121%;
}
/*   東海エリア    */
.toukai-area {
	display: block;
	width: 22%;
	top: 60%;
	left: 58%;
	z-index: 2;
}
.toukai-area:after {
	padding-top: 55%;
}
.shizuoka {
	width: 40%;
	text-align: center;
	line-height: 0;
	top: 38%;
	left: 60%;
	background-color: #e9ca0b;
}
.shizuoka a:after {
	padding-top: 86%;
}
.aichi {
	width: 30%;
	text-align: center;
	line-height: 0;
	top: 46%;
	left: 30%;
	background-color: #e9ca0b;
}
.aichi a:after {
	padding-top: 100%;
}
.gifu {
	width: 45%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 0;
	background-color: #e9ca0b;
}
.gifu a:after {
	padding-top: 55%;
}
.mie {
	width: 30%;
	text-align: center;
	line-height: 0;
	top: 46%;
	left: 0;
	background-color: #e9ca0b;
}
.mie a:after {
	padding-top: 100%;
}
/* 関西エリア */
.kansai-area {
	display: block;
	width: 21%;
	top: 55%;
	left: 37%;
	z-index: 1;
}
.kansai-area:after {
	padding-top: 100%;
}
.shiga {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 17%;
	left: 66.67%;
	background-color: #e69600;
}
.shiga a:after {
	padding-top: 100%;
}
.kyoto {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 33.33%;
	background-color: #e69600;
}
.kyoto a:after {
	padding-top: 152%;
}
.nara {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 50%;
	left: 50%;
	background-color: #e69600;
}
.nara a:after {
	padding-top: 50%;
}
.oosaka {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 50%;
	left: 0;
	background-color: #e69600;
}
.oosaka a:after {
	padding-top: 50%;
}
.wakayama {
	width: 100%;
	text-align: center;
	line-height: 0;
	top: 75%;
	left: 0;
	background-color: #e69600;
}
.wakayama a:after {
	padding-top: 25%;
}
.hyogo {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 0;
	background-color: #e69600;
}
.hyogo a:after {
	padding-top: 152%;
}
/*   中国エリア    */
.chugoku-area {
	display: block;
	width: 20%;
	top: 55%;
	left: 17%;
	z-index: 1;
}
.chugoku-area:after {
	padding-top: 55%;
}
.tottori {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 66.67%;
	background-color: #ec6109;
}
.tottori a:after {
	padding-top: 82%;
}
.shimane {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 33.33%;
	background-color: #ec6109;
}
.shimane a:after {
	padding-top: 82%;
}
.okayama {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 50%;
	left: 66.67%;
	background-color: #ec6109;
}
.okayama a:after {
	padding-top: 82%;
}
.hiroshima {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 50%;
	left: 33.33%;
	background-color: #ec6109;
}
.hiroshima a:after {
	padding-top: 82%;
}
.yamaguchi {
	width: 33.33%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 0;
	background-color: #ec6109;
}
.yamaguchi a:after {
	padding-top: 167%;
}
/*   四国エリア   */
.shikoku-area {
	display: block;
	width: 18%;
	top: 72.5%;
	left: 18%;
	z-index: 1;
}
.shikoku-area:after {
	padding-top: 50%;
}
.kagawa {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 50%;
	background-color: #e96f84;
}
.kagawa a:after {
	padding-top: 50%;
}
.tokushima {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 50%;
	left: 50%;
	background-color: #e96f84;
}
.tokushima a:after {
	padding-top: 50%;
}
.kouchi {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 50%;
	left: 0;
	background-color: #e96f84;
}
.kouchi a:after {
	padding-top: 50%;
}
.ehime {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 0;
	background-color: #e96f84;
}
.ehime a:after {
	padding-top: 50%;
}
/*     九州エリア     */
.kyu-syu-area {
	display: block;
	width: 16.5%;
	top: 56%;
	left: 0;
	z-index: 1;
}
.kyu-syu-area:after {
	padding-top: 150%;
}
.fukuoka {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 50%;
	background-color: #624b94;
}
.fukuoka a:after {
	padding-top: 75%;
}
.ooita {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 25%;
	left: 50%;
	background-color: #624b94;
}
.ooita a:after {
	padding-top: 75%;
}
.miyazaki {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 50%;
	left: 50%;
	background-color: #624b94;
}
.miyazaki a:after {
	padding-top: 75%;
}
.kumamoto {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 50%;
	left: 0;
	background-color: #624b94;
}
.kumamoto a:after {
	padding-top: 75%;
}
.saga {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 0;
	background-color: #624b94;
}
.saga a:after {
	padding-top: 75%;
}
.nagasaki {
	width: 50%;
	text-align: center;
	line-height: 0;
	top: 25%;
	left: 0;
	background-color: #624b94;
}
.nagasaki a:after {
	padding-top: 75%;
}
.kagoshima {
	width: 100%;
	text-align: center;
	line-height: 0;
	top: 75%;
	left: 0;
	background-color: #624b94;
}
.kagoshima a:after {
	padding-top: 37%;
}
/*      沖縄エリア      */
.okinawa-area {
	display: block;
	width: 10%;
	top: 92.5%;
	left: 0;
	z-index: 1;
}
.okinawa-area:after {
	padding-top: 50%;
}
.okinawa {
	width: 100%;
	text-align: center;
	line-height: 0;
	top: 0;
	left: 0;
	background-color: #624b94;
}
.okinawa a:after {
	padding-top: 50%;
}
}

@media (max-width: 575px) {
.container {
	width: 100%;
	min-width: 100%;
	border: none;
	margin: 0;
}
.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}
.dropdown {
	position: relative;
	list-style: none;
	padding: 0;
}
.dropdown>li {
	padding: 0;
	width: 6em;
	height: 44px;
	border: #CCC 1px solid;
	border-radius: 5px;
}
.dropdown-toggle {
	widows: 100%;
	height: 100%;
	display: block;
	line-height: 44px;
	text-align: center;
}
.dropdown-toggle:focus {
	outline: 0;
}
.dropdown-menu {
	position: absolute;
	left: 5em;
	top: auto;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	font-size: 14px;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu.pull-right {
	right: 0;
	left: auto;
}
.dropdown-menu .divider {
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
	background-color: #e5e5e5;
}
.dropdown-menu > li > a {
	display: block;
	padding: 6px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
	border-bottom: #CCC 1px solid;
}
.dropdown-menu > li > a:last-child {
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
	color: #262626;
	text-decoration: none;
	background-color: #f5f5f5;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
	color: #fff;
	text-decoration: none;
	background-color: #428bca;
	outline: 0;
}
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
	color: #999;
}
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
	text-decoration: none;
	cursor: not-allowed;
	background-color: transparent;
	background-image: none;
 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.open > .dropdown-menu {
	display: block;
}
.open > a {
	outline: 0;
}
.dropdown-menu-right {
	right: 0;
	left: auto;
}
.dropdown-menu-left {
	right: auto;
	left: 0;
}
.dropdown-header {
	display: block;
	padding: 3px 20px;
	font-size: 12px;
	line-height: 1.42857143;
	color: #999;
}
.dropdown-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 990;
}
.pull-right > .dropdown-menu {
	right: 0;
	left: auto;
}
.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
	content: "";
	border-top: 0;
	border-bottom: 4px solid;
}
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
	top: auto;
	bottom: 100%;
	margin-bottom: 1px;
}
.navbar-right .dropdown-menu {
	right: 0;
	left: auto;
}
.navbar-right .dropdown-menu-left {
	right: auto;
	left: 0;
}
}