.map_wrapper{
	position:relative;
	width:auto;
}

.form_continent #continent{
	border:1px solid #cfcfcf;
	background:#dfdcdf;
	color: #333;
	padding:5px;
	width:200px;
	text-shadow:1px 1px 1px #FFF;
	border-radius:3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.form_continent .select_continent{
	font-weight: bold;
	padding-right:20px;
	float:left;
}

.form_continent input[type="radio"]:checked + label{ 
    color: #0099FF;
}

.show_detail{
	position:absolute;
	top:200px;
	left:0px;
	z-index:100;
}

/*  City Info   */
.detail_container { display: none; }
.city_detail_container { display: none; }
.city_detail_container .city_detail { 
	width: 200px; border: 1px solid #ccc; 
	font-size:12px;
}

.city_detail .bic_desc{
	/*font-size:12px;*/
	padding:7px 0;
	min-height:50px;
}

.city_detail .bic_more{text-align:right;}


/*  Interactive Map Container */
.map_contianer {
	background-image: url(/images/bic-map.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 500px;
	width: 970px;
	position: relative;
	color: #fff;
	font-family: Arial;
	font-size: 12px;
	margin: 0px;
	text-align: left;
}

.map_contianer .clear_both { clear: both; line-height: 1px; }

.map_contianer a, a:visited { color: #AA0000; margin: -10px 0px 0px -10px; }
.map_contianer a.dot {
	background-image: url(images/dots.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 20px;
	width: 20px;
	display: block;
	position: absolute;
	cursor: pointer;
}
.map_contianer a.dot.selected {
	background-position: 0px -40px;
}
.map_contianer a.dot:hover {
	background-position: 0px -20px;
}
.map_contianer .form_continent {
	position: absolute;
	/*top: 265px;
	left: 30px;*/
}

.show_detail .detail_container {
	margin-left:300px;
}
.show_detail .city_detail {
	background:url(images/trans.png);
	position: absolute;
	top: 0px;
	width: 400px;
	height:auto;
	padding: 10px;
	border: 1px solid #000;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.show_detail .city_detail h2{
	margin:0;
	color:#3fc8f4;
	font-size:18px;
	clear:both;
}
.show_detail .city_detail p{
	font-size:12px;
	color:#b9b8b8;
}
.show_detail .city_detail .city_photo {
	float: left;
	margin: 0px 15px 10px 0px;
	width:75px;
}
.show_detail .city_detail .city_info {
	width: 300px;
	float: left;
	color:#FFFFFF;
}

.show_detail .city_detail .city_info ul{
	padding:0 0 0 15px;
	margin:0;
	/*list-style:none;*/
}

.show_detail .city_detail .city_info a:link,
.show_detail .city_detail .city_info a:active,
.show_detail .city_detail .city_info a:visited
{
	color:#FFFFFF;
}

.show_detail .popclose{
	position:absolute;
	top:2px;
	right:2px;
	display:block;
	width:13px;
	height:13px;
	background:url(/images/icons/close_icon.gif) no-repeat;
	cursor:pointer;
}

/* Show All Section */
#container-section{
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
	width:960px;
	margin:0 auto;
	padding-bottom:10px;
	
}
#container-section .grid{
	width:227px;
	/*width:305px;*/
	/*min-height:100px;*/
	padding: 0;
	background:#fff;
	margin:10px 5px;
	font-size:12px;
	float:left;
	
	/*border:1px solid #CCC;*/
	/*
	box-shadow: 0 1px 3px rgba(34,25,25,0.4);
	-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
	-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
	*/
	-webkit-transition: top 1s ease, left 1s ease;
	-moz-transition: top 1s ease, left 1s ease;
	-o-transition: top 1s ease, left 1s ease;
	-ms-transition: top 1s ease, left 1s ease;
	
}

.continent_item{
	background:#efefef; 
	padding:7px; 
	/*font-size:14px;*/
	font-weight:bold;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

#container-section .grid ul.country_list{
	margin:0;
	padding:0 5px;
	list-style:none;
}

#container-section .grid ul.country_list li a.country_link:link,
#container-section .grid ul.country_list li a.country_link:visited
{
	display:block;
	line-height:27px;
	margin:15px 0;
	color:#333333;
}

/*#container-section .grid ul.country_list li:last-child a.country_link{margin-bottom:0;}*/

#container-section .grid ul.country_list p.flag{
	padding:0; margin:0;	width:42px; height:27px; overflow:hidden; float: left; margin-right: 10px;}

#container-section .grid ul.country_list p.flag img{
	width:40px;
	height:25px;
	border:1px solid #efefef;
}

#container-section .grid ul.country_list p.flag .icon-flag{
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display:block;
    width:38px;
	height:25px;
	border:1px solid #efefef;
}



#container-section .grid ul.bic_list{
	margin:0;
	padding:0 0 5px 20px;
	list-style-type:square;
}


/*********************/

/*	Tablet Layout: 768px. set=740px*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.map_wrapper{width:720px; overflow: scroll; overflow-y:hidden}
.show_detail .detail_container {margin-left:170px;}
.show_detail .city_detail {width: 400px;}

#container-section{width: 720px;}
#container-section .grid{	width:229px;}
.form_continent .select_continent{padding-right:20px;}
}

/*Mobile Layout: 320px. set=300px*/
@media only screen and (max-width: 767px) {
.map_wrapper{width:280px; overflow: scroll; overflow-y:hidden}
.show_detail .detail_container {margin-left:20px;}
.show_detail .city_detail {width: 240px;}
.show_detail .city_detail .city_info {width: 240px;}

#container-section{width: 240px;}
#container-section .grid{width:228px;}

.form_continent .select_continent{float:none; padding:0;}
}

/*		Wide Mobile Layout: 480px. set=460px*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.map_wrapper{width:440px; overflow: scroll; overflow-y:hidden}
.show_detail .detail_container {margin-left:20px;}
.show_detail .city_detail {width: 400px;}
.show_detail .city_detail .city_info {width: 300px;}

#container-section{width: 430px;}
#container-section .grid{width:204px;}

.form_continent .select_continent{float:left; padding-right:20px;}
}
