/* ---------------------------------- */ /* ==visual helpers */ /* .. use them with parcimony ! */ /* ---------------------------------- */ /* blocks widths (percentage and pixels) */ .w10 { width: 10%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w33 { width: 33.3333%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w66 { width: 66.6666%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w90 { width: 90%; } .w100 { width: 100%; } .w50p { width: 50px; } .w100p { width: 100px; } .w150p { width: 150px; } .w200p { width: 200px; } .w300p { width: 300px; } .w400p { width: 400px; } .w500p { width: 500px; } .w600p { width: 600px; } .w700p { width: 700px; } .w800p { width: 800px; } .w960p { width: 960px; } .mw960p { max-width: 960px; } .w1140p { width: 1140px; } .mw1140p { max-width: 1140px; } .wauto { width: auto; } /* spacing helpers p,m = padding,margin a,t,r,b,l = all,top,right,bottom,left s,m,l,n = small, medium, large, none */ .man, .ma0 { margin: 0; } .pan, .pa0 { padding: 0; } .mas { margin: @small-value; } .mam { margin: @medium-value; } .mal { margin: @large-value; } .pas { padding: @small-value; } .pam { padding: @medium-value; } .pal { padding: @large-value; } .mtn, .mt0 { margin-top: 0; } .mts { margin-top: @small-value; } .mtm { margin-top: @medium-value; } .mtl { margin-top: @large-value; } .mrn, .mr0 { margin-right: 0; } .mrs { margin-right: @small-value; } .mrm { margin-right: @medium-value; } .mrl { margin-right: @large-value; } .mbn, .mb0 { margin-bottom: 0; } .mbs { margin-bottom: @small-value; } .mbm { margin-bottom: @medium-value; } .mbl { margin-bottom: @large-value; } .mln, .ml0 { margin-left: 0; } .mls { margin-left: @small-value; } .mlm { margin-left: @medium-value; } .mll { margin-left: @large-value; } .ptn, .pt0 { padding-top: 0; } .pts { padding-top: @small-value; } .ptm { padding-top: @medium-value; } .ptl { padding-top: @large-value; } .prn, .pr0 { padding-right: 0; } .prs { padding-right: @small-value; } .prm { padding-right: @medium-value; } .prl { padding-right: @large-value; } .pbn, .pb0 { padding-bottom: 0; } .pbs { padding-bottom: @small-value; } .pbm { padding-bottom: @medium-value; } .pbl { padding-bottom: @large-value; } .pln, .pl0 { padding-left: 0; } .pls { padding-left: @small-value; } .plm { padding-left: @medium-value; } .pll { padding-left: @large-value; }