/* UCLA SCHOOL OF THEATER, FILM & TELEVISION
   Design CSS
   - Tested for Firefox Win/Mac, Explorer 6, Explorer 7, Safari Win/Mac
   ------------------------- */

/* Layout */

html, body { background:#111; font-size:12px; text-align:left; margin:0 auto; text-align:center; border:0; }
#doc { background:#111; width:960px; margin:10px auto; text-align:left; }
#hd { background:#111; display:block; color:#ffb300; margin:0; }
#bd { background:#fff; color:#222; line-height:1.5; z-index: 1; }
#ft, #footer { color:#ccc; background:#111; width:960px; margin:10px 0; border-bottom:2px solid #111; }

.gutter { padding:10px; }
img { border:0; }
	img.left { float:left; margin:0 1em 1em 0; }
	img.right { float:right; border:1px solid #eee; margin:0 0 1em 1em; }
strong { font-weight:bold; }
em { font-style:italic; }
strong em { font-weight:bold; font-style:italic; }

object { position:relative; }

/* 16:9 Frame */

#frame { width:960px; height:540px; background:#222; color:#ccc; }
#frame h3, #frame h4 { color:#fff; margin:0; padding:0; }
#frame .meta { color:#ccc; }

/* Links */

/* ucla blue: #536895 norm, #009DE8 hot */
/* ucla green: #793 on white, #ac6 on black */

a { text-decoration: none; }
a img { border: none; }
a:link, a:visited { color: #793; }
a:hover { color:#222; text-decoration:underline; }

#bd a { text-decoration:underline; }
#bd a:hover { color:#000; }
	#bd #body a { font-weight:bold; }

h1 a { color:#000; text-decoration:none; border-bottom:2px solid #000; }
h1 a:hover { color:#999; border-bottom-color:#999; }

a.external {
	padding-right:12px;
	background:url(/img/icon_external.gif) no-repeat 100% 50%;
	}

#frame a, a.frame { color:#ac6; }
#frame a:hover, a.frame:hover { color:#fff; }

/* Typography */

p {
	font-size:12px;
	line-height:1.5em; /* 18px */
	margin:0 0 1.5em;
	}

#checklist ul li ul { margin-top:8px; }
#checklist ol li ol { margin-top:8px; margin-bottom:8px;}
#checklist li { font-size:12px; margin-bottom:8px; }

table { margin:0 0 1.5em; }

blockquote {
	color:#444;
	font-size:100%;
	margin:0 1em 1em 0;
	padding-left: 40px;
	background-color: #ffffff;
	background-image: url('/img/blockquote.gif');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: left top;
	}

embed { margin-bottom:2em; }

#bd li { font-size:100%; }
	#bd li li { font-size:100%; }

form { margin-bottom:1em; }

h1,h2,h3,h4,h5,h6,p,li { font-family:Helvetica, Arial; }

h1 { font-size:250%; font-family:Georgia; padding:10px 0; display:block; }
h2 { font-size:200%; color:#000; line-height:1.2; font-weight:bold; padding:10px 0; width:480px; display:block; }
h3 { font-size:150%; color:#536895; font-family:Georgia; padding:10px 0; }
h4 { font-size:125%; color:#000; font-weight:bold; padding:10px 0; }
	#bd h4 a { font-size: 100%; }

#hd h1 { width:560px; float:left; line-height:40px; color:#94CF4C; background:#222; padding-left:40px; padding-right:40px; /* 640 - 40 - 40 */ }
#hd h1 a { color:#94CF4C; text-decoration:none; border:0; }
#hd h1 a:hover { color:#fff; border-bottom:2px solid #000; }

#hd #announcement { width:320px; float:left; font-family:Georgia; display:block; font-size:150%; line-height:20px; }
#hd #announcement .gutter { padding-left:20px; padding-right:20px; line-height:20px; }

#bd h3 { padding:5px 0 2px; margin-bottom:8px; }

.h2 { color:#536895; font-weight:bold; }
.h3 { color:#ffb300; font-weight:bold; }
.h4 { color:#000; font-weight:bold; }

#bd h1.first, #bd h2.first, #bd h3.first, #bd h4.first, #bd h5.first { padding-top:0; }

#bd .pullquote {
	clear:left;
	color:#444;
	display:block;
	float:right;
	font-size:180%;
	font-family:Georgia;
	overflow:hidden;
	width:280px;
	margin:0 0 20px 20px;
	}

#bd .relatedLinks { 
	background:#eee;
	clear:left;
	display:block;
	width:300px;
	}

#bd #relatedPrograms, #bd #relatedSidebar {
	float:right;
	padding:0 0 10px 10px;
	width:300px;
	}
	
	#relatedSidebar p { font-size:95%; color:#666; }

/* Covers */

h2.cover { font-family:Helvetica, Arial; padding-bottom:0; margin-bottom:0; }
h3.cover { font-family:Helvetica, Arial; padding-bottom:0; margin-bottom:0; }

	#info {
		width: 960px;
		overflow:auto;
		}

	#flashcontent {
		width: 960px;
		height: 360px;
		float:left;
		}

h3 img { padding:0; margin:0; }

/* Lists */

#bd ul, #bd ol { margin:0 0 1em; padding:0; }
	#bd #frame ul { margin:0; }
#bd ul li { margin-left:30px; padding:0; list-style:square; list-style-type:square; }
	#bd ul li.firstInline { width:120px; font-weight:bold; }

ul { list-style-type:square; }
#hd ul { list-style-type:none; }

ol, ol li { list-style-type:decimal; }
	ol ol { list-style-type:decimal; }
	ol ol ol { list-style-type:decimal; }
	ol ol ol ol { list-style-type:decimal; }
	ol ol ol ol ol { list-style-type:decimal; }
ol li { margin-left:30px; padding:0; } */

table ol, table p { color:#000; font-size:120%; }

	// AVATARS
	.avatar li { list-style-type:none; display:list-item; padding:0 0 0 58px; margin:0 0 10px; background-position:0; height:48px; }

	// FAVICONS
	#bd ul.favicons, #bd .sidebar ul.favicons {
		margin: 0;
		padding: 0;
		list-style: none;
		list-style-type: none;
		text-align:left;
		}
	#bd ul.favicons li, #bd .sidebar ul.favicons li {
		background-repeat: no-repeat;
		background-position: 0 0;
		padding-left: 20px;
		margin:0;
		list-style: none;
		list-style-type: none;
		}
	#bd ul.favicons form, #bd .sidebar ul.favicons form {
		margin-bottom:10px;
		}
	#bd ul.favicons input, #bd .sidebar ul.favicons input {
		margin-right:10px;
		}

	// BADGES
	ul li.badge { list-style-type:none; display:list-item; padding:0 0 0 120px; margin:0 0 10px; }

	// TEASERS
	ul.teaser li { padding-top:1em; padding-bottom:1em; list-style-type:none; }
	ul#directoryFeatured li { margin:0; clear:both; display:block; list-style-type:none; }
	ul#directory li { margin:0 0 1em; clear:both; display:block; list-style-type:none; }

	// THUMBS
	div#thumbs {  }
	div#thumbs ul li {
		padding-left:70px;
		margin:10px 20px 10px 10px;
		background-repeat:no-repeat;
		list-style-type:none;
		min-height:60px;
		}

	// PROGRAMS
	#bd div.program { display:block; background:#ccc; background-repeat:no-repeat; background-position:0; }
		#bd div.program h3 { float:left; display:block; width:300px; height:169px; padding:0; text-decoration:none; margin:0 10px 10px 0; }
		#bd div.program h3 a { width:220px; padding:5px 10px; margin:69px 0 0 0; position:absolute; color:#fff; background:#000; word-wrap: break-word; clear:left; }
		#bd div.program h3 a:hover { color:#fff; background:#536895; }
		// #bd div.program h4 { margin:20px 0; }
		// #bd div.program h4 a, #bd div.program div.gutter a { padding:1px 10px; color:#fff; background:#000; }
	
	// SCHOOL RESOURCES
	#bd div.item { width:320px; background-repeat:no-repeat; background-position:0; overflow:hidden; float:left; display:block; height:169px; text-decoration:none; margin:0 10px 20px 0; }
		
		/* Calendar */
		div.item .eventDates { float:left; background:#222; color:#fff; text-align:center; margin-bottom:10px; display:inline; }
		div.item .eventDates a { color:#793; }
		div.item .eventDates div { padding:2px 5px; font-weight:bold; }
		div.item .eventDates small { color:#ccc; }
		div.item .eventDates small a { color:#fff; font-weight:bold; }

	// SHARE
	ul#share { width:auto; display:block; padding:0; }
	ul#share li { float:left; display:block; text-align:left; margin:0 10px 10px 0; background-repeat: no-repeat; list-style-type: none; }
	ul#share li span.text { padding: 5px 5px 0 5px; }
	ul#share li a { padding: 5px 10px 0 20px; color:#222; text-decoration:none; }
	ul#share li a:hover { color:#000; }
	ul#share li:hover a { color:#000; text-decoration:underline; }

	// CREATIVE DIRECTORY
	#bd ul.directoryNav { padding:0; margin:0; display:block; }
	#bd ul.directoryNav li { float:left; display:block; text-align:left; padding:0; margin:0 10px 10px 0; list-style-type: none; }
	#bd ul.directoryNav li a { font-size:125%; margin:0; text-decoration:none; }
	#bd ul.directoryNav li a:hover { color:#000; }
	#bd ul.directoryNav li:hover a { color:#000; text-decoration:underline; }
	
	a.sort, span.sort a, small.sort a { background:#222; color:#fff; padding:2px 5px; margin-right:5px; text-decoration:underline; }
	a.sort:hover, span.sort a:hover, small.sort a:hover { background:#eee; color:#000; }
		small.sort a { background:#fff; color:#222; }

/* Acronym, Abbreviation elements */

acronym, abbr { border-bottom: 1px dotted; }
acronym { speak:normal; cursor:help; }
abbr.initialism { speak:spell-out; }
abbr.truncation { speak:normal; }

/* Definition Lists */

dl { margin:0 0 1em; padding:0; }
  
dt {
	float:left;
	clear:left;
	width:120px;
	margin:0 5px 0 0; 
	padding:5px;
	text-align:right; 
	font-size: 0.9em; 
	background: #eee;
	font-family: georgia, times, serif;
	font-weight:normal;
	}
	
	#bd dt a { font-weight:normal; text-decoration:none; }

dd {
	display:block;
	margin:0 0 0 130px; 
	padding:5px 5px 10px; 
	text-align:left; 
	}
	
	dd a { font-weight:bold; }




/* Images */

#bd img.picture { float:left; padding:0 10px 10px 0; }
#bd img.thumb { float:left; clear:left; margin:0; }
#bd img.extra { float:right; margin:10px; padding:0 0 1em 1em; }

/* Media Container */

#container { width:640px; height:480px; background:#eee; }

/* Metadata */

span.meta { color:#777; }
div.meta { background:#eee; color:#333; }

.unavailable { color:#555; }

div#metadata { display:block; border-top:2px solid #222; padding-top:1em; margin-top:2em; }

/* Special Typography */

small { color: #666; font-size:95%; }
.message { background:#ffffcc; color:#000; font-weight:bold; font-family:Helvetica, Arial; padding:10px; }
	.message span { padding-right:20px; }
.important { background:#000; color:#fff; font-weight:bold; font-family:Helvetica, Arial; padding:10px; }
	.important strong { color:#ffffcc; }
span.amp, small.amp { font-family: Georgia, "Goudy Old Style", Palatino, "Book Antiqua", Garamond, serif; font-weight:normal; }

div#steps { width:100%; display:block; clear:left; border-bottom:2px solid #eee; background:#ccc; }
div#steps .step { width:180px; float:left; display:inline; padding:0 1em; }
div#steps .stepCurrent { background:#222; width:180px; float:left; display:inline; padding:0 1em; }
div#steps .step h4 { color:#555; }
div#steps .step a h4 { text-decoration:underline; }
div#steps .stepCurrent h4 { color:#fff; font-weight:normal; }

/* Auto-Suggest */

.asholder { position: relative; }

/* Left Highlight */

.highlight { background:#29344a; color:#ccc; font-weight:bold; }
li.highlight a.highlight { color:#ffb300; }

/* Right Sidebar */

div.sidebarTopRight {
	width:320px;
	float:right;
	padding:0 0 20px;
	overflow:hidden;
	}

// #bd .sidebar { background:transparent; }
// #bd #frame .sidebar { background:transparent; }

#bd .sidebar h3 { font-weight:normal; }
#bd .sidebar ul, #bd .sidebar ul li { list-style:square; }

a.black { color:#fff; background:#222; padding:5px 10px; }
a.black:hover, #bd a.black:hover { color:#ac6; }

a.greenLight, #bd a.greenLight { color:#000; background:#aacc66; padding:5px 5px 2px; }
a.greenLight:hover, #bd a.greenLight:hover { color:#000; background:#eee; }

a.clear { color:inherit; background:inherit; padding:5px 10px; }
a.clear:hover, #bd a.clear:hover { color:#ac6; background:#222;  }

div.black, span.black { color:#fff; background:#222; padding:5px 10px; display:inline; font-weight:normal; }
div.black a.black, span.black a.black { padding:0; }

/* Related Navigation */

#bd #navBox { color:#fff; background:#111; }
#bd #navBox div.column { float:left; width:50%; background:#111; clear:right; } // border-left:2px solid #ccc;
#bd #navBox strong { color:#fff; margin:0 10px; }
#bd #navBox a:hover { color:#fff; }
#bd #navBox ul { margin-top:13px; }
#bd #navBox ul li { margin-left:0; list-style:none; font-size:125%; font-weight:bold; padding:0 0 10px; }
#bd #navBox ul li a { color:#ac6; padding:5px 10px; background:#111; }
#bd #navBox ul li a:hover { color:#fff; background:#222; }
#bd #navBox h3 { color:#ccc; }

/* Feeds */

.feed {
  margin-left: 3px;
  padding: 0 0 0 19px;
  background: url("/img/icons/feed-14x14.png") no-repeat 0 50%;
}

li.youtube { background-image:url('/img/favicons/youtube.gif'); }
li.linkedin { background-image:url('/img/favicons/linkedin.gif'); }
li.facebook { background-image:url('/img/favicons/facebook.gif'); }
li.uclalumni { background-image:url('/img/favicons/uclalumni.gif'); }

li.office { background-image:url('/img/icons/door.gif'); }
li.email { background-image:url('/img/icons/email.gif'); }
li.phone { background-image:url('/img/icons/phone.gif'); }
li.vcard { background-image:url('/img/icons/vcard.gif'); }
li.biography { background-image:url('/img/icons/page_white_text.gif'); }

/* Hint Box */

#hintbox{
position:absolute;
top: 0;
background-color: lightyellow;
width: 150px; /* default width of hint */ 
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden;
}

.hintanchor{ /* hint onmouseover */
font-weight: bold;
color: navy;
margin: 3px 8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.hintanchor2{ /* hint onmouseover */
color: navy;
margin: 3px 8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

/* Table */

.table a { font-weight:bold; }

/* Tabs */
#bd #tabsContainer { width:960px; overflow:hidden; }
#bd ul.idTabs { width:960px; display:block; padding:0; margin:0; }
#bd ul.idTabs li { width:240px; list-style:none; float:left; padding: 0; margin: 0; }
#bd ul.idTabs li a { width:220px; padding:0 10px; height:30px; line-height:30px; display:block; margin:0; background:#29344a; text-decoration: none; color:#fff; font-weight:bold; }
#bd ul.idTabs li a:hover { color:#fff; }
#bd ul.idTabs li.about a { border-color: #eee; }
#bd ul.idTabs li.admissions a { border-color: #eee; }
#bd ul.idTabs li.students a { border-color: #eee; }
#bd ul.idTabs li.faculty a { border-color: #eee; }
#bd ul.idTabs li.contact a { border-color: #eee; }
#bd ul.idTabs li a.selected { color:#ffb300; background:#111; }
#bd ul.idTabs li a.selected:hover { color:#fff; }

#bd #aboutTab { background:#793; color:#000; }
#bd #admissionsTab { background:#fff; }
#bd #marketingTab { background:#fff; }
#bd #contactTab { background:#fff; }

/* YUI - override percentages with fixed width */

.yui-g .yui-gb .yui-u, .yui-gb .yui-g, .yui-gb .yui-gb, .yui-gb .yui-gc, .yui-gb .yui-gd, .yui-gb .yui-ge, .yui-gb .yui-gf, .yui-gb .yui-u, .yui-gc .yui-u, .yui-gc .yui-g, .yui-gd .yui-u {
	float: left;
	margin-left: 0;
	width: 320px;
	}

.yui-gd div.first, .yui-gb .yui-gd div.first {
	width: 320px;
	padding:0;
	margin:0;
	border:0;
	}

.yui-g .yui-gc div.first, .yui-gc div.first, .yui-gd .yui-g, .yui-gd .yui-u {
	width: 640px;
	overflow:hidden;
	padding:0;
	margin:0;
	border:0;
	}

// ie6 needs float, width and overflow
.yui-gd,
.yui-g { width:960px; }
.yui-gd div.first { float:left; width:320px; overflow:hidden; background:transparent; }
	#frame .yui-gd div.first { background:#000; }
.yui-g .yui-u { float:left; width:480px; overflow:hidden; }

/* More */

.more { display:block; }
.more a { font-size:150%; font-weight:bold; padding:0.25em; float:right; }
.more a:hover { background:#eee; color:#000; }

/* Toggle */

.tipbox { display:none; }

/* Date Picker */

/* the div that holds the date picker calendar */
.dpDiv {
	background-color: #222;
	}

/* the table (within the div) that holds the date picker calendar */
.dpTable {
	text-align: center;
	color: #fff;
	border: 1px solid #222;
	}

/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
	}

/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
	}

/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	}

/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	}

/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	background:#fff;
	color:#222;
	border: 1px solid #eee;
	}

/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #222;
	border: 1px solid #eee;
	}

/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #222;
	color:#fff;
	border: 1px solid #eee;
	font-weight:bold;
	}

/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	background:#222;
	color:#fff;
	}

/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	background:#222;
	}

/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	background:#222;
	}

/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #222;
	border: 1px solid #AAAAAA;
	color: #fff;
	}

/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 120%;
	color:#fff;
	}

/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color:#fff;
	font-weight: bold;
	}

/* the forward/backward buttons at the top */
.dpButton {
	font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
	font-size: 120%;
	color: #ffb300;
	background: #222;
	font-weight: bold;
	padding: 0px;
	border:0;
	}

/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffb300;
	background: #222;
	font-weight: bold;
	border:0;
	}