/*

FORMS.CSS

Purpose:
	CSS that pertains only to form display
	
*/


/* FORMS */

/* boxes, structure */
div.formContainer
{
    position: relative;
}
/* so fade-in works in IE */
/*div.step
{
    margin-bottom: 2em;
}*/
div.row
{
    padding: 0 0 0.5em 0;
}

form > div.layoutContent > div.row
{
	padding: 0 1em 0.5em 1em;
}
form > div.layoutContent > div.row:first-child
{
	padding: 0.5em 1em 0.5em 1em;
}

.formHeader
{
    font-weight: bold;
    font-size: large;
    margin-bottom: .5em;
}

/* structure: 'columns' */
.formLeft
{
    float: left;
    text-align: right;
}
.formLeft input
{
	margin-right: 4px;
}
.formLeft label
{
	display: block;
}
.formRight
{
    float: left;
    text-align: left;
    padding: 0px;
    position: relative;
    left: 0px;
    top: 0px;
    
}
.formError
{
    display: block;
    font-weight: bold;
    /*float: left;*/
    color: #c00;
    /*margin-left: 1em;*/
    font-size: 80%;
    text-align: left;
}

.errorDisplay
{
    clear:both;
    padding-left: 3px;
}

ul.errorDisplay li
{
    list-style-position: outside;
    list-style-type: disc;
    margin-left: 1em;
}

.leftAlign .formLeft
{
    width: auto;
    text-align: left;
}

.leftAlign br + div.list.radio
{
    margin-left: 2em;
}

.leftAlign br + textarea
{
    margin-left: 2em;
}
/*
label[for]
{
	font-weight:bold;
}
*/
/* structure: list grid, field grid */

table.listGrid td.label, table.listGrid th, table.fieldGrid td.label, table.fieldGrid th 
{
	text-align: left;
}
table.listGrid td, table.listGrid th, table.fieldGrid td, table.fieldGrid th 
{
    padding: 0 0.5em;
}
table.listGrid th, table.fieldGrid th 
{
	vertical-align: bottom;
	background: #ddd;
}
table.listGrid th.emptyCorner, table.fieldGrid th.emptyCorner { background: transparent; }
table.listGrid td
{
    background-color: #eee;
    vertical-align: middle;
    text-align: center;
}
table.fieldGrid td
{
    background-color: #eee;
    vertical-align: top;
    text-align: left;
}

table.listGrid td.label, table.fieldGrid td.label
{
	background: #ddd;
}


/* black border text table */
table.blackBorder td, table.blackBorder th 
{
    padding: 0.2em 0.5em;
    border: 0.02em solid #000;
}
table.blackBorder th 
{
	text-align: center;
}
table.blackBorder
{
	border: 0.02em solid #000;
	border-spacing: 1;
}

/* lists */
ol.numberList
{
	list-style-type: decimal;
}
ul.bulletList
{
	list-style-type: disc;
}
ul.squareList
{
	list-style-type: square;
}
ul.circleList
{
	list-style-type: circle;
}

/* lists in pharmacy questionnaires */
ol.pharmList
{
	list-style-type: decimal;
}
ul.pharmList
{
	list-style-type: square;
}
ul.pharmList ul.pharmList
{
	list-style-type: circle;
}
.list/*, .EQ-writestuff-MY .field1, .EQ-writestuff-MY .field0 */
{
	margin-bottom: 1em;
}
.list.radio .listItem, .list.checkbox .listItem
{
	display: block;
}
div.field .value.forcedNewLine
{
	margin-bottom: 1em;
}
input.radio.otherText, input.checkbox.otherText
{
	visibility: hidden;
}
div.list ul li.unselected
{
	opacity: 0.6;
}
div.list ul li.selected, div.list ul span.selected
{
	font-weight: bold;
}


/* groupings */
div.cluster
{
    position: relative;
    zoom: 1; /* trigger hasLayout in IE7 */
    border: 1px solid #999;
    padding: 1.5em;
    margin: 2.5em 0;
}
div.non_boxed_cluster.cluster
{
    position: relative;
    zoom: 1; /* trigger hasLayout in IE7 */
    border: 0px solid #999;
    padding: .5em 1.5em;
    margin: 0;
}

.cluster:last-child { margin-bottom: 0; }

.layoutContent > .cluster
{
	margin: 1.5em 1.5em;
}
.cluster > .labelPositioner
{
	position: relative;
	display: block;
	margin-bottom: 1em;
	margin-top: -2.4em;
	margin: -2.4em 0 1em -0.3em;
	/*overflow: hidden; /* clear float */
	zoom: 1; /* trigger hasLayout in IE6 */
}
div.cluster > .labelPositioner > .label
{
    font-weight: bold;
    background: white;
	padding: 0 0.3em;
	display: inline;
	/*display: block;
	float: left; /* so the box width is only as wide as it needs to be */
}
.stepbuttons
{
    text-align: right;
}

div.cluster > .heading
{
    font-weight: bold;
}


/* elements, validation */
input.line, textarea
{
    width: 99%;
    border: 1px solid #999;
    background-color: #ffffff;
}

/* but if you want to set the size of your own input, put this style on the row */
.setSize span input 
{
	width: auto;
}

/* this is not for IE6 */
HTML > BODY input.line, HTML > BODY textarea
{
    background-image: url(../images/fieldShadow.png);
    background-position: top left;
}
label
{
    padding-right: 4px;
}
.instruction
{
	display: block;
	font-size: 87%;
	opacity: 0.6;
	margin: 0.5em 0;
}
.field.LinkBuilder .instruction
{
	float: left;
	clear: left;
	width: 35%;
}
.field.LinkBuilder.InlineDetail .instruction
{
	float: none;
	width: auto;
	margin-bottom: 1em;
}

/*
.fullWidth
{
    width: 100%;
}
*/
.required
{
    font-weight: bold;
}
#formErrors
{
    color: red;
}
input.aSubmit
{
    font-weight: bold;
}
.fileBrowser
{
    background-color: #f2f2f2;
    padding: 1em;
    margin: 0.5em 0 0.5em 0;
}

/* seething hatred */
.IESpacer
{
    display: none;
    display: inline !ie;
    font-size: 1px;
    margin-right: -1px;
}

/* back off nubsauce, IE rulez!!!! */
/*
select
{
    width: 99%;
}
*/

table.mceLayout
{
    width: 99%;
}
textarea.magicBox
{
    width: 99%;
}

/* calendar */
.calendarButton
{
    vertical-align: middle;
    padding-left: 2px;
    cursor: pointer;
    float: left;
    background-image: url(../images/calendar.gif);
    width: 16px;
    height: 16px;
    margin-left: 2px;
    background-repeat: no-repeat;
    
}

input.vDate
{
    width: 10em;
    float: left;
}
input.vDate.shortDate
{
	width: 6em;
}

/* content browser */



/*.contentBrowserSearch
{
	border: solid 1px #000000;	
}
.contentBrowserRefineSearch
{
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}*/
.contentBrowserResults
{
	border: solid 1px #000000;
	overflow: auto;
}

/* useful panel styles */
.leftGroup
{
    width:49%;
}

.rightGroup
{
    width:49%;
}

/* generic styles */
.rightAlign
{
    text-align:right;
}

/* this hides the TinyMCE buttons by default  */
tr.mceFirst
{
	display: none;
}

/* other */
.otherField
{
	clear: both;
	padding-top: .5em;
}

.modalDialog
{
	margin: 100px auto;
	border: 1px solid white;
	width: 501px;
	top: 20%;
	left: 50%;
	margin-left: -250px;
	padding: 1em;
	background-color: #222;
	overflow: auto;
	z-index: 80000;
	position: absolute;
	
}

/* horizontal radio buttons */
span.horizontalRadioItem
{
	padding-left: 3px;
	padding-right: 3px;
}

span.horizontalRadioItem input
{
	margin-left: 1px;
	margin-right: 6px;
	vertical-align: middle;
}

span.horizontalRadioItem label
{
	vertical-align: middle;
}

.scrollingPopupGroup
{
	margin-right:-20px;
	margin-left: -20px;
	margin-top:-10px;
	max-height:250px;
	overflow:auto;
	padding:10px 20px;
	position: relative;
	top: 5px !ie;
	margin-bottom: -7px !ie;
}

.popupSelfContainedButtonBar
{
	margin-bottom: -10px;
	margin-right: -20px;
	margin-left: -20px;
	margin-top: 0px;
	position: relative !ie;
	top: 7px !ie;
	clear: both;
	background: #E6DB5C;
}

.popupSelfContainedButtonBar .row
{
	padding: 0;
}


/* quirks */

#Contact_country
{
	width: 99%;
}

ol.ordered-list
{
	padding-left: 2em;
}

ol.ordered-list li
{
	list-style-position: outside;
	list-style-type: decimal;
}

form ol li
{
    list-style-position: outside;
   
}

form ul li
{
    list-style: outside;
   
}

/* questionnaire classes for Lynne */
.q-heading 
{
    font-weight: bold;
    font-size: 110%;
}

.q-instruction
{
    display: block;
    font-size: 87%;
    margin: 0.5em 0;
    opacity: 0.6;
}

.q-instruction-normal
{
    display: block;
    font-size: 87%;
    margin: 0.5em 0;
}

.q-instruction-bold
{
    display: block;
    font-size: 87%;
    margin: 0.5em 0;
    font-weight: bold;
}


.q-cluster:last-child {
    margin-bottom: 0;
}

div.q-cluster {
    border: 1px solid #999;
    margin: 0; /*2.5em 0;*/
    padding: 1.5em 1.5em 0;
    position: relative;
    
}


.q-cluster > .q-labelPositioner {
    display: block;
    margin: -2.4em 0 1em -0.3em;
    position: relative;
}


div.q-cluster > .q-labelPositioner > .q-label {
    background: none repeat scroll 0 0 white;
    display: inline;
    font-weight: bold;
    padding: 0 0.3em;
}

.q-smallContainer 
{
    width: 90%;
    text-align: left;
    display: inline-block;
}
.q-block
{
    width: 100%; /*can be in percentage also.*/
    height: auto;
    margin: 0 auto;
    position: relative;
    text-align:center;
}

.q-ul
{
    padding: .25em;
}