@charset "utf-8";

/*********************************reset*************************************/
@mixin reset {
	body,h1,h3,h2,h4,p,ul,ol,dl,dt,dd{margin:0;padding:0;}
	ul,ol,li{list-style-type:none;}

	a img{border:0;}

	a{color:#333;text-decoration:none}
	a:hover{text-decoration:underline}
}


/**********************************Base Libray *****************************/
@mixin lib-base{

	.fl{float:left;}.fr{float:right;}

	
	.auto{margin-left:auto; margin-right:auto;}

	.db {display:block;} .dl {display:inline;} .dlb {display:inline-block;}

	.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}.tj{text-align:justify;}

	.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vb{vertical-align:bottom;}.vt{vertical-align:top;}

	.text_ellipsis {text-overflow:ellipsis; overflow:hidden; cursor:hand; color:olive;}

	
	.clear {clear:both}
	.clearfix{*zoom:1;}.clearfix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
}

/****************************Configuration  Of  Universal Modular *******************************/


//Be callde  i n  the  correct  Order : font-family  font-size  color  line-height 
@mixin lib-font($ff:arial helvetica clean sans-serif,$fs:13px,$color:#333,$lh:1.4) {
	body{
		font-family:$ff;
		font-size:$fs;
		color:$color;
		line-height:$lh;
	}
}

@mixin lib-title($h1:26px,$h2:16px,$h3:14px,$h4:13px,$h5:13px) {
	h1 {font-size:$h1;}
	h2 {font-size:$h2;}
	h3 {font-size:$h3;}
	h4 {font-size:$h4;}
	h5 {font-size:$h5;}
}

//Function :A  quick  way  to set  padding 
//Author : goldcome 
//Time  : 2013/4/15 23.30
//Method  Invocation : lib-mp1(mg 10 12 13 pb 10 12 pl 10 19 98)
@mixin lib-mp1($list:mg 1 2 3 4 5 6 7 8 9 10 pd 1 2 3 4 5 6 7 8 9 10 mt 1 2 3 4 5 6 7 8 9 10 ml 1 2 3 4 5 6 7 8 9 10 mr 1 2 3 4 5 6 7 8 9 10 mb 1 2 3 4 5 6 7 8 9 10 pt 1 2 3 4 5 6 7 8 9 10 pl 1 2 3 4 5 6 7 8 9 10 pr1 2 3 4 5 6 7 8 9 10 pb 1 2 3 4 5 6 7 8 9 10) {
	$index-name1:margin; $index-name2:mg;
	@each $var in $list { 
		@if $var=='mg'  { $index-name1:'margin';$index-name2:#{$var}; }
		@else if $var=='pd'  {$index-name1:'padding';$index-name2:#{$var};}
		@else if $var=='mt'  {$index-name1:'margin-top';$index-name2:#{$var};}
		@else if $var=='ml'  {$index-name1:'margin-left';$index-name2:#{$var};}
		@else if $var=='mr'  {$index-name1:'margin-right';$index-name2:#{$var};}
		@else if $var=='mb'  {$index-name1:'margin-bottom';$index-name2:#{$var};}
		@else if $var=='pt'  {$index-name1:'padding-top';$index-name2:#{$var};}
		@else if $var=='pl'  {$index-name1:'padding-left';$index-name2:#{$var};}
		@else if $var=='pr'  {$index-name1:'padding-right';$index-name2:#{$var};}
		@else if $var=='pb'  {$index-name1:'padding-bottom';$index-name2:#{$var};}
		@else	{   .#{$index-name2}#{$var}  {  #{$index-name1}:#{$var}px; }   }
	}	
}
//Method  Invocation : lib-mp2(mg pb pl.10 12 13)
@mixin lib-mp2($list1:mg pd mt ml mr mb pt pl pr pb,$list2:1 2 3 4 5 6 7 8 9 10) {
	$varName:'margin';
	@each $var1 in $list1 { 
		@if $var1=='mg'  {$varName:'margin';}
		@if $var1=='pd'  {$varName:'padding';}
		@if $var1=='mt'  {$varName:'margin-top';}
		@if $var1=='ml'  {$varName:'margin-left';}
		@if $var1=='mr'  {$varName:'margin-right';}
		@if $var1=='mb'  {$varName:'margin-bottom';}
		@if $var1=='pt'  {$varName:'padding-top';}
		@if $var1=='pl'  {$varName:'padding-left';}
		@if $var1=='pr'  {$varName:'padding-right';}
		@if $var1=='pb'  {$varName:'padding-bottom';}
		@each $var2 in $list2 { 
			.#{$var1}#{$var2}  { #{$varName}: #{$var2}px; } 
		}
	}
}




//Layout : Base on  YUI3 CSS Grids
@mixin girds-base {
	.grids {
		letter-spacing:-0.31em;
		*letter-spacing:normal;
		word-spacing:-0.43em
	}
	.units {
	display: inline-block;
	zoom: 1; 
	*display: inline;
	letter-spacing: normal;
	vertical-align: top;
	}
}

//Function : A quick way  to set  the  percentage of  the  widths  for  layout  
//Author : goldcome
//Time   2013/4/16 09.01
//Method  Invocation : @include grids-set(1-2 3-4 5-6 8-13)
@mixin grids-set($list:1-1 1-2 1-3 2-3 1-4 3-4 1-5 2-5 3-5 4-5 1-6 5-6 1-7 2-7 3-7 4-7 5-7 6-7 1-8 3-8 5-8 7-8 1-9 2-9 4-9 5-9 7-9 8-9){
	$var:0;  $index:0;  $index-var1:0;  $index-var2:0;
	@each $var in $list { 
		@if  $index==0 {
			@if type-of($var)==number {
				$index:1;
				$index-var1:abs($var);
			}
		}
		@else if $index==1{
			@if type-of($var)==number {
				$index:0;
				$index-var2:abs($var);
				.w-#{$index-var1}-#{$index-var2} {
					width:percentage($index-var1/$index-var2);
				}
			}

		}
		
	}

}