/* Common Shortcodes style */

/* Table of Content
==================================================
	GENERAL SETTING
	0-#Button
	1-#Line
	2-#Columns
	3-#Dropcap
    4-#Toggle
    5-#Tabs
    6-#Lists
    7-#Skills
    8-#Tweets
    9-#Post list
	*/

/*-----------------------------------------------------------------------------------*/
/*	GENERAL SETTING
/*-----------------------------------------------------------------------------------*/
.van_widget{
    margin-bottom:50px;
}
.van_widget ul{
    margin:0;
	padding:0;
}
.van_widget ul li{
    margin-bottom:10px;
	padding-bottom:10px;
	list-style:none;
	height:auto;
	overflow:hidden;
	border-bottom:1px dotted #c5c5c5;
}
.van_widget .tagclouds-item{
   margin-right:10px;
}

/*-----------------------------------------------------------------------------------*/
/*	0.	Button
/*-----------------------------------------------------------------------------------*/
.van_small_btn{
    min-width:50px;
	padding:5px 8px;
	font-size:12px;
}
.van_large_btn{
    min-width:100px;
	padding:10px;
	font-size:18px;
}
.van_largex_btn{
    min-width:150px;
	padding:20px;
	font-size:28px;
}
.van_small_btn,
.van_large_btn,
.van_largex_btn{
	font-weight:bold;
	text-align:center;
	margin:0 5px 5px 0;
	width:auto;
	display:inline-block;
}
.large_btn{
    width:120px;
	height:39px;
	border:none;
	font-size:14px;
	cursor:pointer;
	text-transform:uppercase;
}
.built-in-btn{
   display:block;
   padding:15px 0;
   width:165px;
   text-align:center;
   line-height:50px;
   overflow:hidden;
   color:#000;
   cursor:pointer;
   font:bold 18px Arial, Helvetica, sans-serif;
   border:1px solid #eee;
   border-right:2px solid #ddd;
   border-bottom:2px solid #ccc;
   background:#eee;
   background-image: -moz-linear-gradient(top, #eee, #ddd); /* Firefox */
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(1, #ddd)); /* Saf4+, Chrome */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType='0'); /* IE*/
}
.built-in-btn:hover{
   background:#d8d8d8;
   background-image: -moz-linear-gradient(top, #ddd, #eee); /* Firefox */
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(1, #eee)); /* Saf4+, Chrome */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#eeeeee', GradientType='0'); /* IE*/
}

.appstore,.andriod{
   width:215px;
   height:70px;
   display:inline-block;
}
.appstore{
   background:#171717 url(../images/appstore.png) no-repeat center;
}
.andriod{
   background:#83b350 url(../images/android.png) no-repeat center;
}
@media only screen and (max-width: 640px) {
  .appstore,.andriod{width:150px;height:50px;background-size:150px auto;}
  .van_large_btn{min-width:60px;font-size:18px}
  .van_largex_btn{min-width:90px;font-size:22px}
}
@media only screen and (max-width: 480px) {
  .appstore,.andriod{width:120px;height:50px;background-size:120px auto;}
  .van_large_btn{min-width:40px;font-size:16px}
  .van_largex_btn{min-width:60px;font-size:18px}
}

/*-----------------------------------------------------------------------------------*/
/*	1.	Line
/*-----------------------------------------------------------------------------------*/
.line{
   height:1px;
   clear:both;
   margin:20px 0;
   border-top:1px solid #000;
}

/*-----------------------------------------------------------------------------------*/
/*	2.	Columns
/*-----------------------------------------------------------------------------------*/
.column{
  float:left;
  margin-right:4%;
  margin-bottom:4%;
  position:relative;
  overflow:hidden;
  padding-bottom:10px;
}
.one_half{width:48%;}
.one_third{width:30.66%;}
.two_third{width:65.33%;}
.one_fourth{width:22%;}
.two_fourth{width:48%;}
.three_fourth{width:74%;}
/*.one_fifth{width:16.8%;}
.two_fifth{width:37.6%;}
.three_fifth{width:58.4%;}
.four_fifth{width:67.2%;}
.one_sixth{width:13.33%;}
.two_sixth{width:30.66%;}
.three_sixth{width:47.99%;}
.four_sixth{width:65.33%;}
.five_sixth{width:82.67%;}*/
.last{margin-right:0;}
@media only screen and (max-width: 480px) {
 .column{width:100%;}
}
.column img{
     max-width: 100%;
	 width: auto;
	 height: auto;
	 zoom:expression( function(elm) {
	 if (elm.width>100%) {
	 var oldVW = elm.width;
	 elm.width=100%;
	 elm.height = elm.height*(100% /oldVW);
	}
	 elm.style.zoom = '1';
	}
	 (this));
}

/*-----------------------------------------------------------------------------------*/
/*	3.	Dropcap
/*-----------------------------------------------------------------------------------*/
.dropcap{
   float:left;
   margin:-5px 10px 0 0;
   font:bold 36px Georgia, "Times New Roman", Times, serif;
}

/*-----------------------------------------------------------------------------------*/
/*	4.	Toggle
/*-----------------------------------------------------------------------------------*/
.toggle{
   margin-bottom:10px;
   height:auto;
   overflow:hidden;
   clear:both;
}
.toggle .toggle_title{
   line-height:22px;
   padding:10px 10px 10px 10px;
   background:#eee;
   color:#000;
   font-weight:bold;
   cursor:pointer;
   border:1px solid #ddd;
}
.toggle .toggle_title span{
   width:15px;
   height:15px;
   float:left;
   margin:3px 5px 0 0;
   display:inline-block;
   background:url(../images/toggle.png) no-repeat;
}
.toggle .toggle_title span.off{
   background-position:0 0;
}
.toggle .toggle_title span.on{
   background-position:0 -15px;
}
.toggle .toggle_content{
   padding:10px;
   border:1px solid #ddd;
   border-top:0;
}
.toggle .toggle_content.off{
   display:none;
}

/*-----------------------------------------------------------------------------------*/
/*	5.	Tabs
/*-----------------------------------------------------------------------------------*/
.tab_box{
   margin-bottom:10px;
}
.tab_box .tab_items ul{
   margin:0;
   padding:0;
}
.tab_box .tab_items li{
   list-style:none;
   position:relative;
}
.tab_box .tab_items li a{
   display:block;
   padding:0 10px;
   text-align:center;
   margin:0 -1px -1px 0;
   color:#000;
   border:1px solid #ddd;
   background:#eee;
}
.tab_box .tab_items li,
.tab_box .tab_items li a{
   height:40px;
   line-height:40px;
   float:left;
}
.tab_box .tab_items li.cur a{
   background:#fff;
   font-weight:bold;
   margin-bottom:-1px;
   z-index:2;
   height:41px;
   line-height:41px;
   border-bottom:0;
}
.tab_box .tab_content{
   clear:both;
   border:1px solid #ddd;
   padding:5px 10px;
   height:auto;
   overflow:hidden;
}

/*-----------------------------------------------------------------------------------*/
/*	6.	Lists
/*-----------------------------------------------------------------------------------*/
.correct ul li{ background:url(../images/check.png) no-repeat 0 4px;}
.error ul li{ background:url(../images/error.png) no-repeat 0 4px;}
.download ul li{ background:url(../images/download.png) no-repeat 0 4px;}
.star ul li{ background:url(../images/star.png) no-repeat 0 2px;}
.correct ul li,
.error ul li,
.download ul li,
.star ul li{
  padding-left:26px;
}

/*-----------------------------------------------------------------------------------*/
/*	7.	Skills
/*-----------------------------------------------------------------------------------*/
.skills{
   margin-bottom:20px;
   width:100%;
   text-transform:uppercase;
   font:bold 16px "Arial Black", Gadget, sans-serif;
}
.skills ul{
   margin:0;
   padding:0;
}
.skills li{
   color:#000;
   margin-bottom:10px;
   background:#ddd;
   text-align:right;
   padding:20px;
   position:relative;
}
.skills li,.entry .skills li{
   list-style:none;
}
.skills li span{
   color:#fff;
   float:left;
   text-align:left;
   display:block;
   padding:9px 20px 8px;
   position:absolute;
   top:0;
   left:0;
   z-index:1;
}
@-moz-document url-prefix() {
  .skills li span{padding:10px 20px;}
}

.skills li em{
   z-index:2;
   position:absolute;
   right:10px;
   top:10px;
}

/*-----------------------------------------------------------------------------------*/
/*	8.	Tweets
/*-----------------------------------------------------------------------------------*/
.tweets{
    margin-bottom:40px;
}
.tweets ul li{
	padding-left:40px;
	background:url(../images/twitter_bird.png) no-repeat 0 0;
}
.tweets ul li:hover{
	color:#000;
    background-position:0 -118px;
}
/*-----------------------------------------------------------------------------------*/
/*	9. Post list
/*-----------------------------------------------------------------------------------*/
.post_list{
    margin-bottom:40px;
}
.post_list ul li{
    background:none;
	padding-left:0;
}
.post_list ul li a.thumbnail{
    float:left;
	display:block;
	width:80px;
	height:80px;
	overflow:hidden;
	margin:2px 10px 0 0;
}
.post_list ul li a.thumbnail img{
    width:80px;
	height:auto;
}
.post_list ul li p{
    font-size:12px;
	color:#666;
	margin-top:2px;
}