/* Font */
.txtInfo { color:#707070; }
.txtWarn { color:#f76560; }
.txtEm { color:#008bcc; }
.txtDel, .strike, .discount { text-decoration:line-through; font-weight:normal; }
.strike strong, .discount strong { font-weight:normal; }
.txtNormal { font-weight:normal; font-style:normal; }
.txtNum { display:inline-block; font-size:11px; color:#939393; word-break:normal; }
.txt11 { font-size:11px; }
.txt12 { font-size:12px; }
.txt14 { font-size:14px; }
.txt16 { font-size:16px; }
.txt18 { font-size:18px; letter-spacing:-1px; }
.txtIcon { font-size:12px; font-style:normal; }
.txtBreak { word-break:break-all; word-wrap:break-word; }
  /* JP, TW, CN */
  html:lang(ja) .txt11,
  html:lang(zh) .txt11,
  html:lang(zh-tw) .txt11 { font-size:12px; }

/* grid */
.gBlank5 { display:block; margin-top:5px; }
.gBlank10 { display:block; margin-top:10px; }
.gBlank20 { display:block; margin-top:20px; }
.gBlank30 { display:block; margin-top:30px; }
.gIndent10 { margin-left:10px; }
.gIndent20 { margin-left:20px; }
.gSpace10 { margin-right:10px; }
.gSpace20 { margin-right:20px; }
.gMerge { position:relative; z-index:1; margin-top:-1px; }

/* ec-base-qty */
.ec-base-qty { position:relative; display:inline-block; width:50px; margin:0 1px 0 0; text-align:left; }
.ec-base-qty input[type="text"] { width:22px; height:23px; padding:0 0 0 5px; line-height:25px; border:1px solid #d4d8d9; border-radius:3px 0 0 3px; }
.ec-base-qty .up { position:absolute; left:27px; top:0; }
.ec-base-qty .down { position:absolute; left:27px; bottom:0; }

/* ec-base-chk */
.ec-base-chk { display:inline-block; position:relative; margin:0 8px 0 0; width:22px; height:22px; vertical-align:top; cursor:pointer; }
.ec-base-chk input { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.ec-base-chk .checkbox { position:absolute; top:0; left:0; width:100%; height:100%; background:url("//img.echosting.cafe24.com/skin/base/common/bg_join_check.png") no-repeat 0 0; }
.ec-base-chk input:checked + .checkbox { background-position:-34px 0; }

/* Form */
input,select,textarea { font-size:100%; font-family:"Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; color:#353535; vertical-align:middle; }
input[type=radio],
input[type=checkbox] { width:13px; height:13px; border:0; }
input[type=text],
input[type=password] { height:18px; line-height:20px; padding:2px 4px; border:1px solid #d5d5d5; color:#353535; font-size:12px; }
input[type=radio] + label, input[type=checkbox] + label { margin:0 4px 0 2px; }
select { height:24px; border:1px solid #d5d5d5; }
textarea { padding:5px 6px; border:1px solid #d5d5d5; line-height:1.5; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#c1c1c1; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#c1c1c1; }
input::-moz-placeholder, textarea::-moz-placeholder { color:#c1c1c1; opacity:1; }
legend { visibility:hidden; position:absolute; left:-9999px; top:-9999px; width:0; height:0; line-height:0; }

table tr.radioType input,
span.noBorder input { border:none !important; width:auto !important; height:auto !important; margin:0 3px 0 0 !important; vertical-align:middle !important; background:none !important; }

.gLabel { display:inline-block; }
.gLabel label { margin-right:20px; line-height:22px; }
.fWidthFull input[type=text] { width:100%; height:24px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.fWidthFull textarea { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.fWidthFull select { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.fList.typeHor .gLabel { margin-right:20px; }
.fList.typeVer .gLabel { display:block; }

xxxxxxxxxx

<!--Top margin-->    

<p class="gBlank5">Top margin has been declared as 5px.</p>

<p class="gBlank10">Top margin has been declared as 10px.</p>

<p class="gBlank20">Top margin has been declared as 20px.</p>

<p class="gBlank30">Top margin has been declared as 30px.</p>

<!--Left margin-->

<p class="gIndent10">Left margin has been declared as 10px.</p>

<p class="gIndent20">Left margin has been declared as 20px.</p>

<!--Right margin-->

<p class="gSpace10">Right margin has been declared as 10px.</p>

<p class="gSpace20">Right margin has been declared as 20px.</p>

<!--Component margins-->

<div class="ec-base-box typeThin gBlank20">

    <p>Content to be entered into this field.</p>

</div>

<div class="ec-base-box typeThin gIndent10">

    <p>Content to be entered into this field.</p>

</div>

<div class="ec-base-box typeThin gSpace20">

    <p>Content to be entered into this field.</p>

</div>

<!--Stacked on top-->

<div class="ec-base-box typeThin">

    <p>Content to be entered into this field.</p>

</div>

<div class="ec-base-box typeThinBg gMerge">

    <p>Content to be entered into this field.</p>

</div>

xxxxxxxxxx

<span class="fWidthFull"><input type="text"/></span>

<span class="fWidthFull"><textarea>

xxxxxxxxxx

<!--Explicit constructor: label>input-->

<label><input type="radio" title="Radio button title"/>Radio</label>

<label><input type="checkbox" title="Checkbox title" />Checkbox </label>

<!-- Implicit constructor: label + input -->

<input type="radio" title="Radio button title" />

 <label>Radio</label>

<input type="checkbox" title="Checkbox title" />

 <label>Checkbox</label>

<!-- .gLabel + .gLabel constructor : span.gLabel > input + label -->

<span class="gLabel">

    <input type="radio" id="radio" />

     <label for="radio">Content</label>

</span>

<span class="gLabel">

    <input type="checkbox" id="checkbox" />

     <label for="checkbox">Content</label>

</span>