﻿/* HIG PAGE LAYOUT CONTROLS */


/* [PL2.1] FULL PAGE FORM ELEMENTS */

/* also putting general form and form item styles here */

fieldset {
	margin: 24px 0;
	padding-top: 6px;
}

fieldset + fieldset {
	margin-top: 60px;
}

legend {
	border-bottom: 1px solid #EAECEE;
	display: block;
	font-size: 16px;
	text-transform: uppercase;
	padding-bottom: 8px;
	width: 100%;
}







/* form lines */
.line-item {
	display: block;
	margin-top: 3px;
}





/* form line blocks */
.line-item > * {
	display: inline-block;
	margin-top: 4px;
}




/* line item groups & their left column name */
.line-item-group {
	position: relative;
}

.line-item-group > .line-item-group-name {
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.line-item-group > .line-item-group-name ~ .line-item {
	margin-left: 276px;
}






/* 1st column */
label > .field-name,
.line-item > .line-item-name,
.line-item > .line-item-meta,
.line-item-group > .line-item-group-name {
	color: #666;
	display: inline-block;
	font-size: 14px;
	text-align: right;
	margin-right: 5px; /* 3px more provided by whitespace */
	margin-top: 6px;
	vertical-align: top;
	width: 260px;
}


/* 2nd column */
/* field names in 2nd column */
label.hcollapse > .field-name,
.line-item > .line-item-name ~ label .field-name,
.line-item > .line-item-meta ~ label .field-name,
.line-item-group > .line-item-group-name ~ .line-item label .field-name
{
	color: #666;
	display: inline-block;
	font-size: 12px;
	margin-bottom: 0;
	margin-right: 0;
	margin-top: 3px;
	text-align: left;
	width: auto;
}

/* 2nd column fields */
.line-item > label {
	vertical-align: top;
}

/* 2nd column fields when they follow a field name */
label.hcollapse .field-name + .field,
label.hcollapse .field-name + input,
label.hcollapse .field-name + select,
.line-item > .line-item-name ~ label .field-name ~ .field,
.line-item > .line-item-name ~ label .field-name ~ input,
.line-item > .line-item-name ~ label .field-name ~ select,
.line-item > .line-item-meta ~ label .field-name ~ .field,
.line-item > .line-item-meta ~ label .field-name ~ input,
.line-item > .line-item-meta ~ label .field-name ~ select,
.line-item-group > .line-item-group-name ~ .line-item label .field-name ~ .field,
.line-item-group > .line-item-group-name ~ .line-item label .field-name ~ input,
.line-item-group > .line-item-group-name ~ .line-item label .field-name ~ select
{
	display: block;
}

/* 2nd column field name components when following inputs (such as checkboxes or radio buttons) */
label.hcollapse > .field ~ .field-name,
label.hcollapse > input ~ .field-name,
.line-item > .line-item-name ~ label .field ~ .field-name,
.line-item > .line-item-name ~ label input ~ .field-name,
.line-item > .line-item-meta ~ label .field ~ .field-name,
.line-item > .line-item-meta ~ label input ~ .field-name,
.line-item-group > .line-item-group-name ~ .line-item label .field ~ .field-name,
.line-item-group > .line-item-group-name ~ .line-item label input ~ .field-name
{
	margin-top: 3px;
	margin-bottom: 0;
}


/* 3rd column */
/* help button form line block */
.line-item-help-button {
	background-image: url("images/icon_sprite.png");
	background-position: 0 -146px;
	font-size: 0;
	height: 12px;
	padding: 0;
	width: 12px;
}

.line-item > .line-item-hint,
.line-item > .line-item-help-button {
	margin-top: 10px
}









/* full page form */
form.full-page {
	margin: 24px 0;
	min-width: 824px;
}

form.full-page select {
	width: 320px;
}
form.full-page .one-quarter-width select {
	width: 75.5px;
}
form.full-page .one-third-width select {
	width: 102.6666px;
}
form.full-page .half-width select {
	width: 157px;
}
form.full-page .two-thirds-width select {
	width: 211.3333px;
}
form.full-page .three-quarters-width select {
	width: 237.5px;
}



/* full page form 1st column */
form.full-page label > .field-name,
form.full-page .line-item > .line-item-name,
form.full-page .line-item > .line-item-meta,
form.full-page .line-item-group > .line-item-group-name {
	margin-right: 17px; /* 3px more provided by whitespace */
}


article.on form.full-page label > .field-name,
article.on form.full-page .line-item > .line-item-name,
article.on form.full-page .line-item > .line-item-meta,
article.on form.full-page .line-item-group > .line-item-group-name {
	margin-right: 13px; /* when the left nav is not collapsed */  /* 3px more provided by whitespace */
}

/* full page form 2nd column */
form.full-page .line-item-group > .line-item-group-name ~ .line-item {
	margin-left: 279px;
}

article.on form.full-page .line-item-group > .line-item-group-name ~ .line-item {
	margin-left: 276px;
}






/* [PL2.2] GRID + SEARCH ELEMENTS */



/* [PL2.3] GRID + GRAPH ELEMENTS */



/* [PL2.4] MULTI-COMPONENT ELEMENTS */



/* [PL2.5] SIGN UP / SIGN IN ELEMENTS */



/* [PL2.6] WIZARD ELEMENTS */



/* [PL2.7] CATEGORY LANDING PAGE ELEMENTS */



/* [PL2.8] REPORTS ELEMENTS */



/* [PL2.9] CAMPAIGN EDITORIAL APPEAL ELEMENTS */



/* [PL2.10] CAMPAIGN BUDGET SUGGESTION ELEMENTS */



