/* WIDGET: GRID GENERATOR */
.example-grid {margin:0 auto; padding:0 0 20px 0; position:relative;}
.example-grid .highlight {background:#eee;}
.example-grid .content {display:inline-block;}
.example-grid .content .row {margin: -1px -6px -1px -26px;}
.example-grid .content p {margin:0.5em 0; clear:both; position:relative;}
.example-grid .content {display:block; border:1px solid #FFD0A0; background:#FFFFE8; padding:0 5px; position:relative; overflow:visible;}
.example-grid .content .content {background:#FFF8E0;}
.example-grid .content .content .content {background:#FFF0D8;}
.example-grid .content .content .content .content {background: #FFE8D0;}
.example-grid .content .content .content .content .content {background: #FFE0C8;}
.example-grid .content .content .content .content .content .content {background: #FFD8C0;}
.example-grid .gu0_75 .content p {font-size:0.9em;}
.example-grid .gu0_5 .content p {font-size:0.9em;}
.example-grid .gu0_25 .content {padding:0;}
.example-grid .gu0_25 .content p {font-size:0.8em;}
.example-grid p.title {font-size: 1.2em; font-weight:bold; color:#000;padding-bottom:0;}

.example-grid .canvas {padding:0 20px; background:#FFF8E0;}
.example-grid .grid .content p span {position:absolute; left:0;top:0;white-space:nowrap;}
.example-grid .gu0 {width:0px;}
.example-grid .gu0 .visual {width:0px;}
.example-grid .overlay {border-right:1px solid #f00;position:absolute;bottom:0;left:20px;}
.example-grid .overlay .visual {background:#f66;}
.example-grid .overlay .label {position:absolute;top:40px;}
.example-grid .overlay .label .content {float:right;}
.example-grid .overlay .label .content p {font-size:3.6em; white-space:nowrap; text-align:right; color:#666;}

/* FORM ELEMENTS: foundation */
fieldset {display:block;position:relative;padding:0 0 0 160px;}
	/* FIELD: foundation */
div.field:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
div.field {display:inline-block;}
div.field {display:block;position:relative; float:none; clear:both; overflow:visible;margin-bottom:1.8em;}
div.field p {margin-bottom:0;}
div.field p.value {font-size:1.6em; line-height:1.375em;}
div.field label {display:block; position:relative; float:left; width:140px; padding-right:5px; text-align:right; line-height:1.5em; font-size:1.2em; font-weight:bold; margin:0 6px 0 -160px; color:#000;}
div.field input {display:block; float:left;position:relative;padding:1px; font-size:1.2em; line-height:1.167em; width:6em; height:1.167em; color:#000; background:#fff; border:1px solid #A8ABAD; margin-right:5px;font-family:Arial, Helvetica, sans-serif;}
div.field select {display:block; float:left;position:relative;border-color:#A8ABAD; color:#000; margin:0 5px 2px 0;padding:0; width:225px;}

/* SECTION: foundation */
div.section {background:#f0f0ff; width:100%;margin:2.7em 0 0.9em;}
div.section h3 {background:#fff;border-bottom:1px solid #ccc;margin-top:0; color:#999;}
div.section .content {padding:0 10px; background:none;}
div.section .content p {line-height:1.833em; margin-bottom:1.833em;}


/* FIELDSET: grid params */
fieldset.grid-params div.field input {width:3em;}

/* SECTION: current */
div.section.current {background:#FFF8E0;}
div.section.current h2 {border-color:#F0E0C8;}