/* THE DESIGN PATTERNS  aka  THE INSIDES

	// NOTE
	
	Please don't edit this!  This has far-reaching consequences.   Let Josh (works@ksu.edu) know if these styles aren't accommodating something you need.
	
	// end NOTE
*/


/* BYTES are floated divs boxes, 150px square, that simulate buttons.  i envision them used 
	on the "choose question type" and "choose assignment type"
*/
	div.byte,
	div.byte * { cursor: pointer; cursor: hand; }
	div.byte { margin: 0 7px 12px 5px; width: 150px; height: 150px; float: left; padding: 5px 10px; border: 7px solid #31363E; background-color: #E5E5E5; overflow: hidden; }
	div.byte h2,
	div.byte h2 label.choice { font-size: 16px; color: #0060AE; text-transform: uppercase; line-height: 1.7em; border-bottom: 1px dotted #BBB; margin-bottom: 5px; }
		div.byte h2 label.choice { border: 0; margin: -24px 0 0 22px; }
	div.byte p { font-size: 11px; color: #777; margin-bottom: 8px; padding-bottom: 3px; line-height: 14px; }
	div.byte label { display: block; margin-left: 7px; font-size: 10px; color: #666; line-height: 16px; }
	div.byte input,
	div.byte select,
	div.byte textarea { color: #888; padding: 2px; font-size: 11px; border: 1px solid #BBB; width: 140px; }
	div.byte input.checkbox { width: 13px !important; height: 13px  !important; padding:0; }
	div.byte label img { margin-right: 5px; }
	div.byte li label { margin-left: 0; }
	div.byte label.choice { display: block; line-height: 1.4em; margin: -19px 0 0 22px; padding: 4px 0 5px 0; width: 90%; font-weight: normal; }
	div.byte li .helptext { display: none; }
	div.byte .submit { font-weight: bold; margin: 5px 0; color: #047; }

	div.byte.not_installed { border: 7px solid #CCC; background-color: #F6F6F6; }
	div.byte.not_installed h2,
	div.byte.not_installed h2 label.choice { color: #999; }
	
	/* some bytes can span x2 or x3 wide by including that as a class in the byte div */
	div.byte.x2 { width: 350px; }
	div.byte.x3 { width: 550px; }




/* Tooltips! Styling the YUI tooltips:
*/
.tt { visibility: hidden; position: absolute; color: #222; background-color: #E4E4E4; padding: 4px 7px; border: 2px solid #333; width: auto; max-width: 380px; font-size: 11px; text-align: left; }


/* some elements in table_headers don't play nice when they're inside a data_form
	so we need to reset a few styles */
.data_form .table_header * { padding: 0; width: auto; }

/* many tables will need a header,
	which can contain: filters, action links, table tabs, "check boxes to:... links" etc.
*/
.table_header { font-size: 11px; border-bottom: 1px solid #777; width: 100%; }

	/* and, like i said,
		table tabs
	*/
	.table_header ul.table_tabs { background-color: #FFF; font-weight: bold; padding-bottom: 24px; border-bottom: 1px solid #777; position: relative; top: 1px; }
	.table_header ul.table_tabs li { float: left; height: 21px; background-color: #FFF; margin: 2px 2px 0 2px; border: 1px solid #777; }
	.table_header ul.table_tabs li.active { border-bottom: 1px solid #BBB8B2; background-color: #BBB8B2;}
	.table_header ul.table_tabs li.active a { color: #000; }
	.table_header ul.table_tabs li a { display: block; color: #125 !important; text-decoration: none !important; padding: 2px 8px; }
	.table_header ul.table_tabs li a:hover { background: #BBB8B2; }
	.table_header ul.table_tabs li a:active { position: static; top: 0; }
	

	/* table related actions
		tangential actions that don't necessarily affect the entire list,
			but are still related
	*/
	.table_header p.table_related_actions { float: right; margin-top: -1.8em; margin-right: 4px; position: relative; z-index: 99999; }
	.table_header p.table_related_actions a { text-decoration: underline !important; padding-left: 15px; }
	.table_header p.table_related_actions a:hover { text-decoration: none !important; }

	/* table-wide actions
		filters and things like print, organize, import/export
		filters get treated a little different:  they must be first in the source order, wrapped in a <p class="table_filters">
	*/
	.table_header div.table_wide_actions { text-align: right; color: #333; border-bottom: 3px double #AAA; overflow: auto; width: 100%; border-top: 1px solid #AAA; background-color: #BBB8B2; padding: 2px 0; }
	.table_header div.table_wide_actions a { color: #333; padding-left: 15px; line-height: 22px; }
	.table_header div.table_wide_actions p { margin-right: 8px; }
	.table_header div.table_wide_actions p.table_filters { float: left; line-height: 26px; margin: 0 0 0 8px; }
	.table_header div.table_wide_actions a { padding-left: 0; padding-right: 15px; margin-right: 2px; }
	.table_header div.table_wide_actions input,
	.table_header div.table_wide_actions select { font-size: 10px; border: 1px solid #999; margin: 0 10px 0 2px; }
			
	/* 	"check boxes to:" lists
	*/
	.table_header p.table_checkbox_actions { background-color: #F7F4EB; font-weight: bold; padding: 6px 10px 8px; }
	.table_header p.table_checkbox_actions a { font-weight: normal; color: #047; margin: 0 5px; }




/* DATA TABLES are used for most lists of objects and their metadata
*/
.data_table { margin: 0 0 10px 0; width: 100%; border: 1px solid #FFF; border-width: 1px 0; }
	.data_table th,
	.data_table td { font-size: 11px; padding: .2em 5px .2em 10px; border-bottom: 1px solid #BFBCB6; border-right: 1px solid #E2E0D7; text-align: left; vertical-align: top; line-height: 1.8em; }
	
	/* headers should be highlighted and bold
	*/
	.data_table th { background-color: #E3EEEE; color: #181E24; font-weight: bold; font-size: 13px; vertical-align: bottom; }
	.data_table th span.units { display: block; font-weight: normal; font-size: 9px; line-height: 1em; } 
	
	/* some special styles for special header cells */
	.data_table th.item_header { background-color: #369; color: #FFF; }
	.data_table th.group_header { background-color: #036; color: #FFF; }
	#body_content .data_table th.item_header a,
	#body_content .data_table th.group_header a { color: #FFF; }

	/* zebra tables!
	*/
	.data_table tr,
	.data_table tr.even { background-color: #FFF; }
	.data_table tr.odd { background-color: #F7F4EB; }
	.data_table tr:hover { background-image: url(../images/transparents/10percent_black.png); }
	
	/* some special styles for special rows 
	*/
	.data_table tr.footer_row td,
	.data_table tr.subfooter_row td,
	.data_table tr.search_result td,
	.data_table tr.separator_row td,
	.data_table tr.highlight_row td { background-color: #E6F2E6; color: #333; font-weight: bold; padding: 6px 0 3px 8px; font-size: 12px; }
	
	.data_table tr.new_content td,
	.data_table tr.search_result td,
	.data_table tr td.highlight_cell { background-color: #FF9; }
	.data_table tr td.error_cell { background-color: #F99; }
	.data_table tr.footer_row td { background-color: #DDDBD3; border-bottom: 2px solid #666; }
	.data_table tr.subfooter_row td { background-color: #F3F1E8; padding: 3px 0 2px 8px; font-size: 11px; }
	
	.data_table tr.new_content td.item_name { background-image: url(../images/silk_icons/new.png) !important; }
	
	/* don't let inputs and dropdowns get too big inside our tables
	*/
	.data_table input,
	.data_table select { font-size: 11px; }



/* PROPERTY-VALUE LISTs
	Using standard definition list markup, we can easily style lists of properties and values.
*/
dl.property_value_list { overflow: hidden; }
	dl.property_value_list dt,
	dl.property_value_list dd { border-bottom: 1px solid #CCC; line-height: 20px; font-size: 11px; }
	dl.property_value_list dt.odd,
	dl.property_value_list dd.odd { background-color: #F7F4EB; }
	dl.property_value_list dt { width: 200px; float: left; clear: left; text-align: right; font-weight: bold; }
	dl.property_value_list dd { margin-left: 200px; padding-left: 20px; }



/* FORMSY FORMSY!  finally, it's time to implement some forms.  forms are incredibly difficult to get just right, since they come in all sorts of flavors and combinations,
	and because almost all of the form widgets are <input> elements, so this may get a teensy bit complicated.  I'll keep it as simple as possible, scout's honor.
	
	Data forms get a class:  "data_form". The actual form should be created within a <ul> and a series of <li>.
*/

	/* form info */
	.data_form { overflow: visible; }
	
	#toggle_form_button { overflow: hidden; background: url(../images/transparents/20percent_black.png) left center repeat-x; text-align: center; max-width: 770px; }
		#toggle_form_button p { margin: 0 auto; width: 180px; line-height: 22px; background: url(../images/toggle_background.png) center center no-repeat; overflow: hidden; }
			#toggle_form_button span { display: block; width: 90px; float: left; color: #FFF; font-weight: normal; cursor: pointer; text-align: center; }
			#toggle_form_button span.selected { cursor: default; background: url(../images/toggle_selected.png) center center no-repeat; }
		
		
	.data_form > ul li.advanced { display: none; }
		.data_form > ul li.advanced.advanced_view_on { display: block; }
	
	/* form layout */
	.data_form > ul { overflow: hidden; width: 770px; }
	.data_form > ul > li { padding: 2px 0 6px 0; overflow: hidden; }

	.data_form > ul > li > div,
	.data_form > ul > li > span { float: left; margin-right: 5px; padding-right: 5px; }
	.data_form > ul li label { display: block; line-height: 1.5em; padding: 0 4px 1px 0; font-weight: bold; font-size: 12px; color: #181E24; cursor: pointer; margin-top: 6px; }
		.helptext { font-size: 9px; line-height: 9px; padding: 1px 2px; margin: 0; font-weight: normal; }
		.data_form ul li label span.required { float: none; margin: 0; padding: 0 0 0 3px; }

	/* form widgets */
	/* yui editor */
	.data_form ul li.yui-skin-sam > div { padding: 0; margin: 0; float: none; }
	#body_content .data_form ul li.yui-skin-sam h2 { margin: 0; }
	#body_content .data_form ul li.yui-skin-sam h2 a { font-size: 12px; color: #222; text-decoration: none; }
	
		
	.data_form ul li input.text,
	.data_form ul li textarea,
	.data_form ul li select { font-size: 12px; border: 1px solid #808080; color: #666; width: 200px; padding: 3px; margin: 1px 0; font-family: Verdana, Helvetica, Arial, sans-serif; }
	.data_form ul li select { padding: 2px; }
	
	.data_form ul li input.text:focus,
	.data_form ul li textarea:focus,
	.data_form ul li select:focus { border-color: #69C; color: #181E24; }

	.data_form ul li input.checkbox,
	.data_form ul li input.radio { display: block; line-height: 1.4em; margin: 8px 0 0 3px; width: 13px !important; height: 13px !important; }
	.data_form ul li label.choice { display: block; line-height: 1.4em; margin: -19px 0 0 22px; padding: 4px 0 5px 0; font-weight: normal; }


	/* form widget sizes */
	.data_form ul li input.super_tiny,
	.data_form ul li select.super_tiny { width: 16px; }
	.data_form ul li input.tiny,
	.data_form ul li select.tiny { width: 38px; }
	.data_form ul li input.small,
	.data_form ul li select.small { width: 100px; }
	.data_form ul li input.medium,
	.data_form ul li select.medium { width: 200px; }
	.data_form ul li input.notquitelarge,
	.data_form ul li select.notquitelarge { width: 330px; }
	.data_form ul li input.large,
	.data_form ul li select.large,
	.data_form ul li textarea { width: 594px; }

	.data_form ul li textarea.tiny { height: 3.3em; }
	.data_form ul li textarea.small { height: 5.5em; }
	.data_form ul li textarea.medium { height: 10em; }
	.data_form ul li textarea.large { height: 20em; }

	.data_form .required { color: #F92; }


/* COMPACT FORM variation
	not all forms are created equal.  oftentimes, we don't want a data entry form, so much as a few options for filtering a report or something like that (e.g. message board stats).
	
	to create a compact form, use the same html as a normal form, but give it an extra class of "compact"
*/
.data_form.compact { padding: 5px 5px 1px; background-color: #E3EEEE; }
.data_form.compact li label,
.data_form.compact input.text,
.data_form.compact textarea,
.data_form.compact select { font-size: 10px; }




/* BOOKMARKS
	for linking to major sections on the same page 
	use format:  dl > dt > Sections on this page: > ul > li > bookmark_link
*/
	
dl.bookmarks { overflow: hidden; margin: 10px 0; }
	dl.bookmarks dt { font-weight: bold; float: left; padding-right: 10px; }
	dl.bookmarks ul li { float: left; padding: 0 10px; border-right: 1px dotted #DDD; }
	dl.bookmarks ul li:last-child { border: 0; }
	dl.bookmarks ul li a:hover { color: #000; }











/* BUTTONS (aka Navigation Buttons)
	if you want to use these buttons outside the "buttons" div, you need to add an additional class of "button" to it.
*/
.buttons { margin: 10px 0; overflow: hidden; position: relative; }

.buttons input,
input.button,
a.button { display: block; float: left; padding: 3px 6px; margin: 0 7px 0 0; background-color: #F0F0F0; border: 2px solid #999; border-top: 2px solid #FAFAFA; border-left: 2px solid #FAFAFA; font-size: 100%; line-height: 130%; font-weight: bold; color: #555; cursor: pointer; background-position: 5px 50%; background-repeat: no-repeat; }
	input.button { display: inline; padding: 2px 4px; }
	
.buttons input:hover,
a.button:hover { background-color: #E0E0E0; color: #444; border: 2px solid #848484; border-top: 2px solid #E8E8E8; border-left: 2px solid #E8E8E8; }


	/* Some specific classes for buttons.  These styles add a relevant icon to the button and text color on hover */
		/* positive */
		.buttons input.submit, input.submit.button, a.submit.button { padding-left: 24px; background-image: url(../images/silk_icons/tick.png); }
		.buttons input.continue, input.continue.button, a.continue.button { padding-right: 24px; background-image: url(../images/silk_icons/resultset_next.png); background-position: 95% 50%; }
		.buttons input.send, input.send.button, a.send.button { padding-left: 24px; background-image: url(../images/silk_icons/email_go.png); }
		.buttons input.convert, input.convert.button, a.convert.button { padding-left: 24px; background-image: url(../images/silk_icons/film_go.png); }
			.buttons input.submit:hover, input.submit.button:hover, a.submit.button:hover,
			.buttons input.continue:hover, input.continue.button:hover, a.continue.button:hover,
			.buttons input.convert:hover, input.convert.button:hover, a.convert.button:hover,
			.buttons input.send:hover, input.send.button:hover, a.send.button:hover { color: #529214; }
		
		/* neutral */
		.buttons input.spellcheck, input.spellcheck.button, a.spellcheck.button { padding-left: 24px; background-image: url(../images/silk_icons/spellcheck.png); }
		.buttons input.sound, input.sound.button, a.sound.button { padding-left: 24px; background-image: url(../images/silk_icons/email_go.png); }
		
		.buttons input.spellcheck:hover, input.spellcheck.button:hover, a.spellcheck.button:hover,
		.buttons input.sound:hover, input.sound.button:hover, a.sound.button:hover { color: #0060AE; }
		
		/* negative */
		.buttons input.cancel, input.cancel.button, a.cancel.button { padding-left: 24px; background-image: url(../images/silk_icons/cross.png); }
		.buttons input.delete, input.delete.button, a.delete.button { padding-left: 24px; background-image: url(../images/silk_icons/delete.png); }
		.buttons input.back, input.back.button, a.back.button { padding-left: 24px; background-image: url(../images/silk_icons/resultset_previous.png); }
			.buttons input.cancel:hover, input.cancel.button:hover, a.cancel.button:hover,
			.buttons input.delete:hover, input.delete.button:hover, a.delete.button:hover,
			.buttons input.back:hover, input.back.button:hover, a.back.button:hover { color: #D12F19; }

/* BREADCRUMB TRAILs 
	Simply use an unordered list inside of a div with class "breadcrumbs".
	Use class "current" for selected item. Optionally use <span class="arrow">
*/
.breadcrumbs { overflow: hidden; line-height: 30px; }
	.breadcrumbs li { float: left; font-size: 12px; }
	.breadcrumbs li span.current { font-weight: bold; }
	.breadcrumbs li span.arrow { padding: 0 5px; color: #999; font-size: 9px; text-align: center; }


/* RELATED ACTIONS div is used to float along the right side of a page as
		a list of additional actions (buttons, links, etc) that correspond to the main stuff.
		it's got a width of 24% so it can slip alongside a 75%-wide content block
*/
.related_actions { float: right; width: 24%; }
.related_actions p { margin-bottom: 1em; }
.related_actions input { display: block; margin-bottom: 5px; }

.related_actions ul li a { text-decoration: none !important; font-weight: bold; line-height: 18px; }



/* VCARD Microformat styling
	- use this wherever possible
*/
div.vcard { margin-bottom: 15px; width: 100%; overflow: auto; }
div.vcard div.photoBox { float: left; padding: 3px; border: 1px solid #CCC; }
div.vcard div.photoBox img { height: 120px; }

div.vcard div.detailsBox { float: left; margin-left: 10px; }
div.vcard div.detailsBox .fn { font-size: 20px; padding: 4px 0; }
div.vcard div.detailsBox .email,
div.vcard div.detailsBox .tel { font-weight: bold; padding: 1px 0; }
div.vcard div.detailsBox .email a { text-decoration: none; }



/* SUCCESS, ERROR, NOTICE, & WARNING messages
	used for exactly what they say
*/
ul.successBox,
div.successBox,
div.errorBox,
div.noticeBox,
div.warningBox,
div.loadingBox { padding: 10px; margin: 0 0 1em 0; border-style: solid; border-width: 3px 0 2px 0; font-weight: bold; overflow: hidden; }

div.successBox, ul.successBox { border-top-color: #2A6; border-bottom-color: #8EB; background-color: #DFD; }
div.errorBox { border-top-color: #C00; border-bottom-color: #FBB; background-color: #FDD; }
div.noticeBox { border-top-color: #369; border-bottom-color: #8AC; background-color: #E3EEEE; }
div.warningBox { border-top-color: #EA3; border-bottom-color: #EED04E; background-color: #FFC; }
div.loadingBox { border-top-color: #26A; border-bottom-color: #8BE; background: #EEF url(../images/loading.gif) no-repeat 10px center; padding: 10px 10px 10px 50px; }

ul.successBox a,
div.successBox a,
div.errorBox a,
div.noticeBox a,
div.warningBox a,
div.loadingBox a { color: #00C !important; }



/* TIP & Info
	used for tips, duh. and for normal text on a page (use <div class="info"> <h2></h2> <p></p> </div>)
*/
.tip { font-size: 11px; padding-left: 22px; margin: 1em 0; line-height: 1.5em; background-image: url(../images/silk_icons/lightbulb.png); background-repeat: no-repeat; background-position: 0 1px; }
.tip p { margin: 1em 0; }

.info { margin: 10px 0 0; background: #676259 url(../images/rounded_top_right.png) top right no-repeat; }
	.info.first_on_page { margin-top: 3px; }
.info h2 { font-weight: normal; font-size: 16px !important; background: url(../images/rounded_top_left.png) top left no-repeat; color: #FFF; padding: 0 10px; margin: 0 !important; line-height: 30px; border-bottom: 1px solid #FFF; }
.info p { padding: 5px 10px; font-size: 11px; line-height: 1.2em; background-color: #E5E5E5; color: #27343C; border-bottom: 1px solid #676259; }



/* Icon legend
 	Use to list icons and their meanings.  You'll have to include the "background-image" as part of the <li>'s inline style.
*/
ul.legend { overflow: hidden; padding: 10px 0; }
ul.legend li { float: left; margin: 0 20px 10px 0; padding-left: 22px; font-size: 11px; background-repeat: no-repeat; background-position: left center; }



/* Chart styles
*/
.charts_container { position: relative; height: 360px; margin-bottom: 20px; }
.yui_chart { height: 350px; width: 98%; padding: 1%; background: #DDD; position: absolute; }

/* Questions - Render Questions for Question List (instructor-side) and student assignments.
*/
.answer_portion ol li { clear: both; }
.answer_portion ol li img { display: block; }
.answer_portion ol li p { display: block; margin: -1.4em 0 1em 20px; }
.answer_portion ol li label { display: inline-block; }
.answer_portion ol.mcq_options { margin: 5px 15px; line-height: 1.4em; }

/* Open content in a new window, when iFrame can't detect file type */
#explode_iframe p { padding-left: 24px; background: url(../images/silk_icons/exclamation.png) left center no-repeat; }
#explode_iframe span { color: #047; text-decoration: underline; cursor: pointer; }