/*
松鼠框架內容

1.取消a標籤所有狀態的文字顏色與底線

2.寬度共有20欄
	(1)class命名規則 : w0(width:0%)、m1(width:5%)、m2......m20(width:100%)
	(2)除了用來直接設定寬度外，亦可針對不同螢幕尺寸設定不同寬度
			例 : w1、xs1、md1、lg1

3.RWD共分四個尺寸，尺寸界線如同bootstrap
	(1)xs:   0 ~ 767.999   px
	(2)sm: 768 ~ 991.999   px
	(3)md: 992 ~ 1199.9999 px
	(4)lg:            1200 px以上

5.RWD功能除了寬度設定外，還有show/hide(例:xs-show)、push/pull(例:xs-hide)
	(1)show = display:inline-block   /   hide = display:none;
	(2)show/hide除了直接使用外，亦可針對各尺寸設定
		例如: xs-show 、 sm-hide......
	(3)push/pull無法直接使用，需在前方加上螢幕尺寸(xs、lg等)，並在後方加上移動欄位數 :
		例如: xs-push6(在手機螢幕時，向右方移動6欄)
			  md-pull2(在md尺寸時，向左移動2欄)
		注意: 此功能用來讓物件在不同尺寸時左右交換位置用，
			  所以移動時需A向左移動X欄位，B相對的就要向右移動X欄位

6.container在各尺寸的寬度如同bootstrap，主要用來放置網頁主要文章
	(1)xs:   100%
	(2)sm:  750px
	(3)md:  970px
	(4)lg: 1170px



*/

html body .show{display: inline-block;}
html body .hide{display: none;}

.w0,.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12,.w13,.w14,.w15,.w16,.w17,.w18,.w19,.w20,
.xs0,.xs1,.xs2,.xs3,.xs4,.xs5,.xs6,.xs7,.xs8,.xs9,.xs10,.xs11,.xs12,.xs13,.xs14,.xs15,.xs16,.xs17,.xs18,.xs19,.xs20,
.sm0,.sm1,.sm2,.sm3,.sm4,.sm5,.sm6,.sm7,.sm8,.sm9,.sm10,.sm11,.sm12,.sm13,.sm14,.sm15,.sm16,.sm17,.sm18,.sm19,.sm20,
.md0,.md1,.md2,.md3,.md4,.md5,.md6,.md7,.md8,.md9,.md10,.md11,.md12,.md13,.md14,.md15,.md16,.md17,.md18,.md19,.md20,
.lg0,.lg1,.lg2,.lg3,.lg4,.lg5,.lg6,.lg7,.lg8,.lg9,.lg10,.lg11,.lg12,.lg13,.lg14,.lg15,.lg16,.lg17,.lg18,.lg19,.lg20,
.xs-push0,.xs-push1,.xs-push2,.xs-push3,.xs-push4,.xs-push5,.xs-push6,.xs-push7,.xs-push8,.xs-push9,.xs-push10,.xs-push11,.xs-push12,.xs-push13,.xs-push14,.xs-push15,.xs-push16,.xs-push17,.xs-push18,.xs-push19,.xs-push20,
.sm-push0,.sm-push1,.sm-push2,.sm-push3,.sm-push4,.sm-push5,.sm-push6,.sm-push7,.sm-push8,.sm-push9,.sm-push10,.sm-push11,.sm-push12,.sm-push13,.sm-push14,.sm-push15,.sm-push16,.sm-push17,.sm-push18,.sm-push19,.sm-push20,
.md-push0,.md-push1,.md-push2,.md-push3,.md-push4,.md-push5,.md-push6,.md-push7,.md-push8,.md-push9,.md-push10,.md-push11,.md-push12,.md-push13,.md-push14,.md-push15,.md-push16,.md-push17,.md-push18,.md-push19,.md-push20,
.lg-push0,.lg-push1,.lg-push2,.lg-push3,.lg-push4,.lg-push5,.lg-push6,.lg-push7,.lg-push8,.lg-push9,.lg-push10,.lg-push11,.lg-push12,.lg-push13,.lg-push14,.lg-push15,.lg-push16,.lg-push17,.lg-push18,.lg-push19,.lg-push20,
.xs-pull0,.xs-pull1,.xs-pull2,.xs-pull3,.xs-pull4,.xs-pull5,.xs-pull6,.xs-pull7,.xs-pull8,.xs-pull9,.xs-pull10,.xs-pull11,.xs-pull12,.xs-pull13,.xs-pull14,.xs-pull15,.xs-pull16,.xs-pull17,.xs-pull18,.xs-pull19,.xs-pull20,
.sm-pull0,.sm-pull1,.sm-pull2,.sm-pull3,.sm-pull4,.sm-pull5,.sm-pull6,.sm-pull7,.sm-pull8,.sm-pull9,.sm-pull10,.sm-pull11,.sm-pull12,.sm-pull13,.sm-pull14,.sm-pull15,.sm-pull16,.sm-pull17,.sm-pull18,.sm-pull19,.sm-pull20,
.md-pull0,.md-pull1,.md-pull2,.md-pull3,.md-pull4,.md-pull5,.md-pull6,.md-pull7,.md-pull8,.md-pull9,.md-pull10,.md-pull11,.md-pull12,.md-pull13,.md-pull14,.md-pull15,.md-pull16,.md-pull17,.md-pull18,.md-pull19,.md-pull20,
.lg-pull0,.lg-pull1,.lg-pull2,.lg-pull3,.lg-pull4,.lg-pull5,.lg-pull6,.lg-pull7,.lg-pull8,.lg-pull9,.lg-pull10,.lg-pull11,.lg-pull12,.lg-pull13,.lg-pull14,.lg-pull15,.lg-pull16,.lg-pull17,.lg-pull18,.lg-pull19,.lg-pull20
{float: left;}

.w0{width:0%}
.w1{width:5%}
.w2{width:10%}
.w3{width:15%}
.w4{width:20%}
.w5{width:25%}
.w6{width:30%}
.w7{width:35%}
.w8{width:40%}
.w9{width:45%}
.w10{width:50%}
.w11{width:55%}
.w12{width:60%}
.w13{width:65%}
.w14{width:70%}
.w15{width:75%}
.w16{width:80%}
.w17{width:85%}
.w18{width:90%}
.w19{width:95%}
.w20{width:100%}



@media (max-width: 767.9999999999999px){
html body .xs-show{display: inline-block!important;}
html body .xs-hide{display: none!important;}
.xs-push0{left:0%}
.xs-push1{left:5%}
.xs-push2{left:10%}
.xs-push3{left:15%}
.xs-push4{left:20%}
.xs-push5{left:25%}
.xs-push6{left:30%}
.xs-push7{left:35%}
.xs-push8{left:40%}
.xs-push9{left:45%}
.xs-push10{left:50%}
.xs-push11{left:55%}
.xs-push12{left:60%}
.xs-push13{left:65%}
.xs-push14{left:70%}
.xs-push15{left:75%}
.xs-push16{left:80%}
.xs-push17{left:85%}
.xs-push18{left:90%}
.xs-push19{left:95%}
.xs-push20{left:100%}


.xs-pull0{right:0%}
.xs-pull1{right:5%}
.xs-pull2{right:10%}
.xs-pull3{right:15%}
.xs-pull4{right:20%}
.xs-pull5{right:25%}
.xs-pull6{right:30%}
.xs-pull7{right:35%}
.xs-pull8{right:40%}
.xs-pull9{right:45%}
.xs-pull10{right:50%}
.xs-pull11{right:55%}
.xs-pull12{right:60%}
.xs-pull13{right:65%}
.xs-pull14{right:70%}
.xs-pull15{right:75%}
.xs-pull16{right:80%}
.xs-pull17{right:85%}
.xs-pull18{right:90%}
.xs-pull19{right:95%}
.xs-pull20{right:100%}

.xs0{width:0%}
.xs1{width:5%}
.xs2{width:10%}
.xs3{width:15%}
.xs4{width:20%}
.xs5{width:25%}
.xs6{width:30%}
.xs7{width:35%}
.xs8{width:40%}
.xs9{width:45%}
.xs10{width:50%}
.xs11{width:55%}
.xs12{width:60%}
.xs13{width:65%}
.xs14{width:70%}
.xs15{width:75%}
.xs16{width:80%}
.xs17{width:85%}
.xs18{width:90%}
.xs19{width:95%}
.xs20{width:100%}
}

@media (min-width:768px) and (max-width:991.999999px){
html body .sm-show{display: inline-block!important;}
html body .sm-hide{display: none!important;}
.container{width: 750px;}
.sm0{width:0%}
.sm1{width:5%}
.sm2{width:10%}
.sm3{width:15%}
.sm4{width:20%}
.sm5{width:25%}
.sm6{width:30%}
.sm7{width:35%}
.sm8{width:40%}
.sm9{width:45%}
.sm10{width:50%}
.sm11{width:55%}
.sm12{width:60%}
.sm13{width:65%}
.sm14{width:70%}
.sm15{width:75%}
.sm16{width:80%}
.sm17{width:85%}
.sm18{width:90%}
.sm19{width:95%}
.sm20{width:100%}

.sm-push0{left:0%}
.sm-push1{left:5%}
.sm-push2{left:10%}
.sm-push3{left:15%}
.sm-push4{left:20%}
.sm-push5{left:25%}
.sm-push6{left:30%}
.sm-push7{left:35%}
.sm-push8{left:40%}
.sm-push9{left:45%}
.sm-push10{left:50%}
.sm-push11{left:55%}
.sm-push12{left:60%}
.sm-push13{left:65%}
.sm-push14{left:70%}
.sm-push15{left:75%}
.sm-push16{left:80%}
.sm-push17{left:85%}
.sm-push18{left:90%}
.sm-push19{left:95%}
.sm-push20{left:100%}


.sm-pull0{right:0%}
.sm-pull1{right:5%}
.sm-pull2{right:10%}
.sm-pull3{right:15%}
.sm-pull4{right:20%}
.sm-pull5{right:25%}
.sm-pull6{right:30%}
.sm-pull7{right:35%}
.sm-pull8{right:40%}
.sm-pull9{right:45%}
.sm-pull10{right:50%}
.sm-pull11{right:55%}
.sm-pull12{right:60%}
.sm-pull13{right:65%}
.sm-pull14{right:70%}
.sm-pull15{right:75%}
.sm-pull16{right:80%}
.sm-pull17{right:85%}
.sm-pull18{right:90%}
.sm-pull19{right:95%}
.sm-pull20{right:100%}

}

@media (min-width:992px) and (max-width:1199.999999px){
html body .md-show{display: inline-block!important;}
html body .md-hide{display: none!important;}
.md-push0{left:0%}
.md-push1{left:5%}
.md-push2{left:10%}
.md-push3{left:15%}
.md-push4{left:20%}
.md-push5{left:25%}
.md-push6{left:30%}
.md-push7{left:35%}
.md-push8{left:40%}
.md-push9{left:45%}
.md-push10{left:50%}
.md-push11{left:55%}
.md-push12{left:60%}
.md-push13{left:65%}
.md-push14{left:70%}
.md-push15{left:75%}
.md-push16{left:80%}
.md-push17{left:85%}
.md-push18{left:90%}
.md-push19{left:95%}
.md-push20{left:100%}


.md-pull0{right:0%}
.md-pull1{right:5%}
.md-pull2{right:10%}
.md-pull3{right:15%}
.md-pull4{right:20%}
.md-pull5{right:25%}
.md-pull6{right:30%}
.md-pull7{right:35%}
.md-pull8{right:40%}
.md-pull9{right:45%}
.md-pull10{right:50%}
.md-pull11{right:55%}
.md-pull12{right:60%}
.md-pull13{right:65%}
.md-pull14{right:70%}
.md-pull15{right:75%}
.md-pull16{right:80%}
.md-pull17{right:85%}
.md-pull18{right:90%}
.md-pull19{right:95%}
.md-pull20{right:100%}
.container{width: 970px;}
.md0{width:0%}
.md1{width:5%}
.md2{width:10%}
.md3{width:15%}
.md4{width:20%}
.md5{width:25%}
.md6{width:30%}
.md7{width:35%}
.md8{width:40%}
.md9{width:45%}
.md10{width:50%}
.md11{width:55%}
.md12{width:60%}
.md13{width:65%}
.md14{width:70%}
.md15{width:75%}
.md16{width:80%}
.md17{width:85%}
.md18{width:90%}
.md19{width:95%}
.md20{width:100%}
}

@media (min-width:1200px){
html body .lg-show{display: inline-block!important;}
html body .lg-hide{display: none!important;}

.lg-push0{left:0%}
.lg-push1{left:5%}
.lg-push2{left:10%}
.lg-push3{left:15%}
.lg-push4{left:20%}
.lg-push5{left:25%}
.lg-push6{left:30%}
.lg-push7{left:35%}
.lg-push8{left:40%}
.lg-push9{left:45%}
.lg-push10{left:50%}
.lg-push11{left:55%}
.lg-push12{left:60%}
.lg-push13{left:65%}
.lg-push14{left:70%}
.lg-push15{left:75%}
.lg-push16{left:80%}
.lg-push17{left:85%}
.lg-push18{left:90%}
.lg-push19{left:95%}
.lg-push20{left:100%}


.lg-pull0{right:0%}
.lg-pull1{right:5%}
.lg-pull2{right:10%}
.lg-pull3{right:15%}
.lg-pull4{right:20%}
.lg-pull5{right:25%}
.lg-pull6{right:30%}
.lg-pull7{right:35%}
.lg-pull8{right:40%}
.lg-pull9{right:45%}
.lg-pull10{right:50%}
.lg-pull11{right:55%}
.lg-pull12{right:60%}
.lg-pull13{right:65%}
.lg-pull14{right:70%}
.lg-pull15{right:75%}
.lg-pull16{right:80%}
.lg-pull17{right:85%}
.lg-pull18{right:90%}
.lg-pull19{right:95%}
.lg-pull20{right:100%}

.container{width: 1170px;}
.lg0{width:0%}
.lg1{width:5%}
.lg2{width:10%}
.lg3{width:15%}
.lg4{width:20%}
.lg5{width:25%}
.lg6{width:30%}
.lg7{width:35%}
.lg8{width:40%}
.lg9{width:45%}
.lg10{width:50%}
.lg11{width:55%}
.lg12{width:60%}
.lg13{width:65%}
.lg14{width:70%}
.lg15{width:75%}
.lg16{width:80%}
.lg17{width:85%}
.lg18{width:90%}
.lg19{width:95%}
.lg20{width:100%}
}