/* UCLA SCHOOL OF THEATER, FILM & TELEVISION
   Form CSS
   Based on: http://www.themaninblue.com/experiment/InForm/
   ------------------------- */

/* All Forms */

form { position:static; margin:0; padding:0; }

legend { margin:0; padding:0; }
fieldset input, fieldset textarea { padding:5px; }
select, select.error { padding:5px 0 5px 5px; }
label { font-size:110%; }
label small { font-size:85%; }
input.submit { 
	border:2px solid #000;
	background:#ffb300;
	color:#000;
	font-weight:bold;
	padding:2px 5px;
	font-size:115%;
	}
	#columnarForm input.submit {
		top:10px;
		left:10px;
		margin:10px;
		padding:10px;
		}
	
/* Vertical Form */

#verticalForm fieldset {
	display: block;
	width: 220px;
	margin: 0 0 3em 0;
	padding: 0 10px 10px 10px;
	border: 1px solid #000;
	}

#verticalForm fieldset.radio {
	width: 15em;
	margin: 1em 0 2em 0;
	}

#verticalForm fieldset.radio input {
	clear: both;
	float: left;
	width: auto;
	}

#verticalForm fieldset.radio label {
	font-weight: normal;
	}

#verticalForm fieldset input, #verticalForm span {
	display: block;
	width: 15em;
	}

#verticalForm fieldset input.submit { width:240px; height:35px; }

#verticalForm label {
	display: block;
	margin-bottom: 1em;
	font-weight: bold;
	}

#verticalForm label.first {
	padding-top: 1em;
	}

#verticalForm select {
	display: block;
	}

/* Margin Form */

#marginForm fieldset {
	display: block;
	margin: 0 0 1em 0;
	border:0;
	border-top:1px solid #536895;
	padding: 0 1em 1em 1em;
	}

#marginForm fieldset.wide { 
	/* fit in a 640px column w/ gutter */ 
	width:620px;
	}
	
#marginForm select,
#marginForm fieldset input.submit,
#marginForm fieldset input, 
#marginForm textarea, 
#marginForm table, 
#marginForm .defaultSkin .mcePlaceHolder {
	left:240px;
	}
	
#marginForm fieldset.narrow select,
#marginForm fieldset.narrow input.submit,
#marginForm fieldset.narrow input, 
#marginForm fieldset.narrow textarea, 
#marginForm fieldset.narrow table, 
#marginForm fieldset.narrow .defaultSkin .mcePlaceHolder {
	left:120px;
	}

#marginForm fieldset.radio {
	// margin: 0 0 0 -1em;
	margin:0 0 0 240px;
	border: 0 solid #FFFFFF;
	left:0;
	}

#marginForm fieldset.radio input {
	position: static;
	clear: both;
	float: left;
	width:15px;
	height:15px;
	margin:0 1em 1em;
	padding:0;
	}

#marginForm fieldset.radio label {
	position: relative;
	top: -1.25em;
	display: inline;
	width: auto;
	margin: 0 0 0 -2em;
	z-index:1;
	font-weight:normal;
	font-size:90%;
	}

#marginForm fieldset.radio legend {
	float: left;
	font-weight:normal;
	}

#marginForm fieldset input, 
#marginForm span, 
#marginForm textarea,
#marginForm table {
	position: relative;
	top: -1.4em;
	display: block;
	font-weight:normal;
	z-index:1;
	}

	#marginForm table { left:0; margin-top:1em; }

#marginForm table table, #marginForm table table span {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	font-weight:normal;
	z-index:1;
	}

#marginForm label span {
	position: relative;
	font-size:1.25em;
	left:240px;
	width:300px;
	margin:0;
}

	#marginForm label span {
		float:left;
		color: #666;
		font-size: 90%;
		}
	#marginForm label span.error { color:#fff; padding:5px; }

	#marginForm fieldset.narrow label span { left:120px; }

#marginForm textarea, #marginForm .defaultSkin table { width:300px; }
	#marginForm textarea { padding:5px; }
	#marginForm textarea.wysiwyg { padding:0; }
#marginForm .defaultSkin .mceIframeContainer { border:0; padding:0; margin:0; }
#marginForm .defaultSkin .mcePlaceHolder { width:auto; top: -1.4em; position: relative; padding:0; margin:0; }
#marginForm .defaultSkin .mceStatusbar { overflow:hidden; }

#marginForm label
{
	clear: both;
	float: left;
	display: block;
	margin-top: -1em;
	font-weight: bold;
}

#marginForm label.first,
#marginForm table.first {
	margin-top: 1em;
	}

#marginForm select {
	position: relative;
	top: -1.4em;
	display: block;
	font-weight:normal;
	z-index:1;
	}
	
#marginForm fieldset.narrow label input,
#marginForm fieldset.narrow label input.submit,
#marginForm fieldset.narrow label textarea {
	width:165px;
	}
	
/* Columnar Form */

#columnarForm fieldset {
	// float: left;
	display: block;
	width: 100%; // allow for 3 columns
	margin: 0;
	padding: 0 0 1em;
	overflow:hidden;
	}

#columnarForm fieldset.radio {
	width: 15em;
	margin: 1em 0 2em 0;
	}

#columnarForm fieldset.radio input {
	clear: both;
	float: left;
	width: auto;
	}

#columnarForm fieldset.radio label {
	font-weight: normal;
	}

#columnarForm input, 
#columnarForm span,
#columnarForm textarea {
	display: block;
	width: 100%;
	font-weight:normal;
	}

#columnarForm label {
	display: block;
	margin-bottom: 1em;
	font-weight: bold;
	}

#columnarForm label.first {
	padding-top: 1em;
	}

#columnarForm select {
	display: block;
	}
	
	
#columnarForm fieldset.narrow label input,
#columnarForm fieldset.narrow label input.submit,
#columnarForm fieldset.narrow label textarea {
	width:200px; // already has 5px padding on input, textarea
	border:0;
	}

/* Shared */

#marginForm fieldset.narrow,
#columnarForm fieldset.narrow { 
	/* fit in a 320px column w/ gutter */ 
	width:300px;
	padding:0;
	margin:0;
	border-top:0;
	}
	#columnarForm fieldset.narrow { float:left; width:220px; display:block; padding:10px; margin:10px 0 0; border:0; }
	
	#marginForm fieldset.narrow table,
	#columnarForm fieldset.narrow table { width:165px; }
	#marginForm fieldset.narrow table input.radio,
	#columnarForm fieldset.narrow table input.radio { top:0; left:0; width:15px; height:15px; padding:0; margin:5px; text-align:center; }
	#marginForm fieldset.narrow table img,
	#columnarForm fieldset.narrow table img { padding:5px 0; }
	#marginForm fieldset.narrow table td,
	#columnarForm fieldset.narrow table td { text-align:center; font-size:100%; }
	#marginForm fieldset.narrow table label,
	#columnarForm fieldset.narrow table label { margin-top:0; }

#marginForm fieldset legend,
#columnarForm fieldset legend {
	float: left;
	font-weight:bold;
	padding:0.5em;
	color:#536895;
	background:#fff;
	}

/* Form errors */

.error { 
	background:#B82929; 
	color:#fff; 
	font-family:Helvetica, Arial; 
	}
#marginForm label span.error,
#marginForm fieldset.narrow label span.error {
	left:120px;
	width:170px; /* 300 = 120 + 170 + 10 (allow for padding) */
	font-size:1em;
	margin:5px 0;
	}
	
	#marginForm fieldset label span.error { left:240px; }
	
#marginForm label.error {
	left:240px;
	position: relative;
	top:0;
	display: block;
	font-weight: normal;
	z-index: 1;
	clear:both;
	margin-bottom:2em;
	padding:5px;
	}