@import url(dropdown.ui.css);
@import url(search.ui.css);
@import url(dialog.ui.css);
@import url(list.ui.css);
@import url(rte.ui.css);
@import url(widgets.ui.css);

/* ======================================================================

   This awesomeness was originally done by dryan.

   z-index map of elements:
   =========================
   | div#lightbox  | 1001  |
   | div#overlay   | 1000  |
   | div#hd        | 10    |
   | div#ft        | 10    |
   | div#sb        | 2     |
   =========================

   Additionally, the tables inside .dropdown elements have a z-index
   of 2, which is relative to whatever container they are in.

====================================================================== */


/*- Some general stuff */

html { height: 100%; background: #fff url('i/html-bg.png') repeat-y 0 0; }

html.collapsed { background-position: -220px 0; } /* Slides the blue background over to hide it */

html.login { background: #000; }

	body { min-height: 100%; height: 100%; overflow: hidden; } /* Overflow is hidden to hide the scrollbar until the js can sort out the size of the main div. There is css in a noscript tag in the header to override this for non-js viewers. */

	html.login body { color: #c8c8c8; overflow: auto; }

		a { text-decoration: none; outline: none; color: #333; }

		button { outline: none; }

		table {}

		table.results { width: 100%; }

			table th, table td { border: none; vertical-align: top; }

			table.results tbody td { padding: 0.5em 1em; }

			table.results th.filler, table.results td.filler { width: auto; }

			table[vertical-align=middle] th, table[vertical-align=middle] td { vertical-align: middle; }

			table[vertical-align=bottom] th, table[vertical-align=bottom] td { vertical-align: middle; }

			table tr.odd, ul li.odd, ol li.odd { background: #f2f6fb; } /* Sets up all of the zebra striping; could probably be even more genericized to just .odd */

			table thead {}

				table thead th { text-align: left; padding: 0.5em 1em; background: #ccc url('i/th-gradient-bg.png') repeat-x 0 50%; border-left: 1px solid #bbb; border-right: 1px solid #bbb; border-top: 1px solid #ccc; border-bottom: 1px solid #bababa; white-space: nowrap; }

				table thead th.selected { background-color: #aaa; }

			table tfoot {  }

				table tfoot td { padding: 2em 0 0; }


/*- Forms, inputs, buttons and psuedo buttons */

		input[type=text], input[type=password], textarea, .ui-input { border-top: 1px solid #dcdcdc; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #efefef; border-left: 1px solid #d9d9d9; -webkit-box-shadow: rgba(255,255,255,0.5) 0px 1px 1px; box-shadow: rgba(255,255,255,0.5) 0px 1px 1px; width: 100%; max-width: 100%; padding: 4px 2px; background: #fff url('i/input-bg.png') repeat-x 0 0; font-size: 108%; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; text-align: left; }

		input[type=text]:focus, input[type=password]:focus, textarea:focus, .ui-input.focus, .ui-input.ui-state-focus { border-color: #a6c8ef; outline: none; }

		input[type=checkbox], input[type=radio] { vertical-align: top; }

		textarea { height: 5em; }

		button, a.button { outline: none !important; padding: 0 8px; background: #eee url('i/button-bg.png') repeat-x 0 0; border: 1px solid #bdbcbd; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-size: 93%; color: #666; line-height:26px; }

		a.button { display: inline-block; }

		button:hover, button:focus, a.button:hover, a.button:focus { background: #4096ee; border-color: #1c6cbe; color: #fff; cursor: pointer; }

			button span, a.button span { display: inline-block; height: 22px; line-height: 24px; outline: none !important; white-space: nowrap; }

			button:hover span, button:focus span, a.button:hover span, a.hover:focus span { color: #fff; }

		button[default], a[default].button { font-weight: bold; }

		button.red, a.button.red { background: #a92b1a url('i/button-red-bg.png') repeat-x 0 0; border-color: #a92b1a; color: #fff; }

		    	button.red:hover, a.button.red:hover, a.button.red:focus, button.red:focus { background: red; color: #fff; cursor: pointer; }

			button.red span, a.button.red span, button.red:hover span, a.button.red:hover span { color: #fff; }

		div.date-input { position: relative; }

			div.date-input a.date-input-cal { display: inline-block; width: 22px; height: 24px; position: absolute; right: 1px; top: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fff url('i/input-date-bg.png') no-repeat 5px 6px; }

			div.date-input input[disabled] ~ a.date-input-cal { background-position: 5px -194px; }

		form {  }

			form ul.fields { margin: 0 0 1.5em; }

				form ul.fields li.field { margin: 0 0 1.5em; list-style: none; clear: left; position: relative; }

					form ul.fields label { display: block; margin: 0 0 0.25em; font-weight: bold; }

					form span.help, form span.errors { display: block; line-height: 1.5; font-size: 85%; margin-top: 0.3em; }

					form span.errors { color: #b31f01; }

		div.buttons { text-align: right; line-height: 25px; clear: both; }

			div.buttons button, div.buttons a.button { margin-left: 1em; }

			div.buttons a, div.buttons button.cancel { float: left; margin-left: 0; }

			div.buttons a.button { float: none; }

		p.meta { font-size: 93%; opacity: 0.8; filter: alpha(opacity=80); }


/*- Generic utitlity classes */

		.clear { clear: both; }

		.left { text-align: left; }

		.center { text-align: center; }

		.right { text-align: right; }

		.large { font-size: 1.5em; }

		span.separator { width: 21px; display: inline-block; height: 5px; background: transparent url('i/bar-separator-bg.png') no-repeat 50% 50%; }


/*- Column layouts, intended for use in forms. Available layouts are 75/25, 25/75, 50/50 and 33/33/33 */

		.col-75 { width: 72.99%; float: left; margin-right: 1.9%; }

		.col-25 { width: 25%; float: left; margin-right: 1.9%; }

			.col-75 + .col-25, .col-25 + .col-75 { clear: none; float: right; margin-right: 0; }

		.col-50 { width: 49%; float: left; }

			.col-50 + .col-50 { float: right; clear: none; }

		.col-33 { width: 32%; float: left; margin-right: 1.9%; }

			.col-33 ~ .col-33 { clear: none; }

				.col-33 + .col-33 + .col-33 { float: right; margin-right: 0; }


/*- Specific cases that are context insensitive; that is, they should always appear like this wherever they occur */

		#quicklook.about-message { width: 600px; }

		.about-message h1 { height: 29px; line-height: 29px; margin: 0 0 0.5em; font-size: 24px; font-weight: normal; }

		span.message-logo { display: inline-block; width: 122px; height: 31px; overflow: hidden; text-indent: -1000px; background: transparent url('i/logo.png'); vertical-align: middle; }

		span.message-logo.dark { width: 109px; height: 29px; background: transparent url('i/logo-black.png'); }

		span.message-version { color: #999; }


/*- Icons. General icons (.icon) are 16x16 graphics.  Node icons (.icon.node) are sprites with 16x16, 48x48, 89x89 and 128x128 versions centered in a 128px wide graphic with each version starting 256px lower than the previous one.  To get the x-position for any size, subtract the width of the icon from 128 and divide the difference by 2 and make that amount negative.  0 - ((128 - 16) / 2) */

		.icon { background-position: 0 50%; background-repeat: no-repeat; background-color: transparent; display: inline-block; padding-left: 20px; min-height: 16px; }

		address.icon, blockquote.icon, div.icon, dl.icon, fieldset.icon, form.icon, h1.icon, h2.icon, h3.icon, h4.icon, h5.icon, h6.icon, li.icon, ol.icon, p.icon, ul.icon { display: block; }

		a.icon, span.icon, button.icon, dt.icon, dd.icon { line-height: 16px; }

		.icon.quick-link { background-image: url('i/icons/quick-link.png'); }

		.icon.quick-link.on { background-image: url('i/icons/quick-link-on.png'); }

		.icon.remove { background-image: url('i/icons/remove.png'); height: 16px; background-position: 0 0; }

		.icon.remove:hover { background-position: 0 -16px; }

		.icon.root { background-image: url('i/icons/root.png'); }

		.icon.search { background-image: url('i/icons/search.png'); }

		.icon.node { background-position: -56px 0; }

		.icon.node.cd { background-image: url('i/icons/cd.png'); }

		.icon.node.file, .icon.node.item { background-image: url('i/icons/file.png'); }

		.icon.node.file.audio { background-image: url('i/icons/file-audio.png'); }

		.icon.node.file.photo { background-image: url('i/icons/file-photo.png'); }

		.icon.node.file.video { background-image: url('i/icons/file-video.png'); }

		.icon.node.finder { background-image: url('i/icons/finder.png'); }

		.icon.node.folder { background-image: url('i/icons/folder.png'); }

		.icon.node.folder.music { background-image: url('i/icons/folder-music.png'); }

		.icon.node.folder.photos { background-image: url('i/icons/folder-photos.png'); }

		.icon.node.folder.videos { background-image: url('i/icons/folder-videos.png'); }

		.icon.node.form { background-image: url('i/icons/form.png'); }

		.icon.node.harddrive { background-image: url('i/icons/harddrive.png'); }

		.icon.node.home, .icon.node.site, .icon.node.subdomain { background-image: url('i/icons/home.png'); }

		.icon.node.link { background-image: url('i/icons/link.png'); }

		.icon.node.trash { background-image: url('i/icons/trash.png'); }

		.icon.node.trash.full { background-image: url('i/icons/trash-full.png'); }

/*- Arrows for expand/collapse use */

		.arrow { padding-right: 12px; background-position: 100% 50%; background-repeat: no-repeat; background-color: transparent; }

		.arrow.up { background-image: url('i/arrow-up.png'); }

		.arrow.down { background-image: url('i/arrow-down.png'); }


/*- Media controls */

		.slider { width: 100%; background: transparent url('i/slider-bg.png') repeat-x 50% 50%; height: 8px; line-height: 8px; margin: 1em auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

			.slider .progress { position: relative; width: 50%; height: 8px; background: transparent url('i/slider-progress-bg.png') repeat-x 0 50%; line-height: 8px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

				.slider .progress .handle { display: block; width: 15px; height: 14px; background: transparent url('i/slider-handle-bg.png') no-repeat 50% 50%; position: absolute; right: -8px; top: -3px; }

		.play { display: inline-block; width: 22px; height: 22px; overflow: hidden; text-indent: -1000px; background: transparent url('i/play.png'); }


/*- Boxes. The catch all container for content. */

		.box { margin: 1em; }

			.box > *:first-child { margin-top: 0; }

			.box > *:last-child { margin-bottom: 0; }

			.box ul { margin: 0 -1em; }

				.box ul li { list-style: none; }

			.box table { width: 100%; margin: 0; }

/*- User Feedback Notices */

		ul.messages, ul.errorlist { margin: 0 0 1em; color: #333; }

			ul.messages li, ul.errorlist li { list-style: none; padding: 18px 18px 18px 64px; border: 1px solid #000; margin: 0 0 1em; background-color: #ddd; background-position: 18px 50%; background-repeat: no-repeat; }

			ul.messages li.alert { background-image: url('i/icons/alert.png'); border-color: #e1de71; background-color: #fffed6; }

			ul.messages li.success { background-image: url('i/icons/success.png'); border-color: #b8dda3; background-color: #ecfde2; }

			ul.messages li.error, ul.errorlist li { background-image: url('i/icons/error.png'); border-color: #e17181; background-color: #ffd6d6; }


/*- The All-in-one Wonder Bar. This markup will work anywhere.  There are some specific rules for when it appears in #main further down. */

		.bar.action-bar { background: #cdcdcd url('i/bar-bg.png') repeat-x 0 0; border-bottom: 1px solid #a2a2a2; color: #090909; }

			.bar > table { width: 100%; margin: 0; }

				.bar table td.tool { padding: 5px 0 0; vertical-align: top; height: 21px; }

					.bar table td.collapse-expand { width: 24px; padding: 0 5px 0 0; }

						.bar table td.collapse-expand a { width: 24px; height: 31px; overflow: hidden; text-indent: -1000px; background-position: 0 50%; background-color: transparent; background-repeat: no-repeat; }

						.bar table td.collapse-expand a.expand { background-image: url('i/button-expand-bg.png'); display: none; }

						.bar table td.collapse-expand a.collapse { background-image: url('i/button-collapse-bg.png'); display: block; }

						html.collapsed .bar table td.collapse-expand a.collapse { display: none; }

						html.collapsed .bar table td.collapse-expand a.expand { display: block; }

					.bar .ui-input { height: 19px; padding: 0; }

					.bar table td.separator { width: 21px; background-image: url('i/bar-separator-bg.png'); background-repeat: no-repeat; background-position: 50% 50%; }

					.bar table td.actions { width: 1px; }

						.bar.action-bar table td.actions button { border: 1px solid #838383; -webkit-border-radius: 4px; -moz-border-radius: 4px; background: #cfcfcf url('i/bar-button-action-bg.png') repeat-x 0 0; -webkit-box-shadow: rgba(255,255,255,0.5) 0px 1px 1px; box-shadow: rgba(255,255,255,0.5) 0px 1px 1px; height: 22px; padding: 0 4px; line-height: 22px; }

						.bar.action-bar table td.actions button:hover { background-color: #fdfdfd; background-image: url('i/bar-button-action-hover-bg.png'); }

							.bar.action-bar table td.actions button span { height: 20px; line-height: 20px; }

					.bar table td.views { padding-left: 8px; padding-right: 8px; width: 1px; white-space: nowrap; }

						.bar table td.views a { width: 24px; height: 9px; padding: 3px 0 8px; display: inline-block; border: 1px solid #777; margin-left: -1px; background: #d4d4d4 url('i/bar-views-a-bg.png') repeat-x 0 0; -webkit-box-shadow: rgba(255,255,255,0.5) 0px 1px 1px; box-shadow: rgba(255,255,255,0.5) 0px 1px 1px; cursor: pointer; }

						.bar table td.views a:hover { background-color: #f9f9f9; background-image: url('i/bar-views-a-hover-bg.png'); }

						.bar table td.views a.selected { background-color: #636363; background-image: url('i/bar-views-a-selected-bg.png'); }

						.bar table td.views a:first-child { -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; }

						.bar table td.views a:last-child { -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; }

							.bar table td.views a span { display: inline-block; width: 25px; overflow: hidden; text-indent: -1000px; background-position: 50% 0; background-repeat: no-repeat; background-color: transparent; }

							.bar table td.views a.selected span { background-position: 50% -15px; }

							.bar table td.views a.grid span { background-image: url('i/bar-views-grid-bg.png'); }

							.bar table td.views a.list span { background-image: url('i/bar-views-list-bg.png'); }


/*- Search Bar */

		.search-bar > table { width: 100%; margin: 0 0 1em; }

			.search-bar > table th, .search-bar > table td { padding: 0; }

			.search-bar > table th { text-align: left; }

				.search-bar > table th h1 { margin: 0; }

			.search-bar > table td.actions { width: 1px; }

			.search-bar > table td.form { width: 200px; }

				.search-bar table td.form form.search-inline { background: transparent url('i/icons/search.png') no-repeat 3px 50%; }

					.search-bar table td.form form.search-inline input#term { background-color: transparent; padding-left: 20px; width: 176px; }


/*- Lists: Node List.  Appears on the dashboard. */

		table.node-list { width: 100%; }

			table.node-list td { vertical-align: top; text-align: left; }

			table.node-list td.quick-link, table.node-list td.date-user { width: 1px; }

			table.node-list td.quick-link { vertical-align: middle; padding: 0.5em 0.5em 0.5em 1em; }

				table.node-list td.quick-link .icon.quick-link { padding: 0 !important; width: 16px; }

			table.node-list td.title-description {}

				table.node-list td.title-description h3 { color: #333 !important; margin: 0; font-size: 100%; }

					table.node-list td.title-description h3 a { color: #333 !important; }

				table.node-list td.title-description p { margin: 0; width: 100%; height: 1.231em; overflow: hidden; }

			table.node-list td.date-user { text-align: right; white-space: nowrap; }

				table.node-list td.date-user span { display: block; color: #999; }


/*- Lists: Drag and Drop Sortable */

		#quicklook ul.drag-and-drop { border-bottom: 1px solid #f8f8f8; border-top: 1px solid #ccc; }

			ul.drag-and-drop li { cursor: move; -moz-user-select: none; -webkit-user-select: none; user-select: none; }

			#quicklook ul.drag-and-drop li { padding: 0.5em 0; border-top: 1px solid #f8f8f8; border-bottom: 1px solid #ccc; margin: 0; height: 26px; line-height: 26px; }

					ul.drag-and-drop li .icon.remove { height: 16px; margin-right: 10px; float: left; }

					#quicklook ul.drag-and-drop li .icon.remove { float: none; }

					ul.drag-and-drop li button { float: right; }

					ul.drag-and-drop li .thumb { margin-right: 10px; }

				ul.drag-and-drop li > *:first-child { margin-top: 0; }

				ul.drag-and-drop li > *:last-child { margin-bottom: 0; }


/*- Lists: File Lists.  Both grid and list views are defined here. */

		ul.file-list { width: 100%; }		    	

			ul.file-list li { list-style: none; }
			
			    ul.file-list li.hidden { opacity: 0.5; }

			    ul.file-list li.disabled label { text-decoration: line-through; }

			    ul.file-list li.default label { font-weight: bold; }

			.grid ul.file-list li.odd { background: transparent; }

			.grid ul.file-list li { display: inline-block; text-align: center; width: 129px; margin: 1em; }

			.list ul.file-list li { height: 16px; line-height: 16px; }
	
			body .list #main ul.file-list li.selected { background-color: #3d95ee; color: #fff !important; }

				.list ul.file-list li a { display: block; height: 16px; line-height: 16px; }

				.list ul.file-list li.selected a { color: #fff !important; }

					.grid ul.file-list li a .node.icon { display: block; margin: 0 auto 0.5em; padding: 10px !important; width: 89px !important; background-position: -9px -502px !important; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }

					.grid ul.file-list li.selected a .node.icon { background-color: #ccc; }

					.list ul.file-list li a .node.icon { min-width: 16px !important; height: 16px !important; padding: 0 !important; min-height: 16px !important; background-position: -56px 0 !important; display: block; float: left; }

					.list ul.file-list li a label { margin-left: 0.5em; }

					.grid ul.file-list li a label { display: inline-block; margin: 0 auto; padding:  0.25em 0.5em; }

					.grid ul.file-list li.selected a label { background: #3d95ee; color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }

			.grid ul.file-list li.ui-saving a .node.icon { background-color: #ffff99; }

			body .list #main ul.file-list li.ui-saving { background-color: #ffff99; }


/* Lists: List with Thumbnails */

		ul.thumb-list { margin: 0; }

			ul.thumb-list li { min-height: 100px; padding: 5px; }

				ul.thumb-list li h3, ul.thumb-list li p { margin-left: 110px; }

				ul.thumb-list li span.thumb { display: block; float: left; width: 100px; height: 100px; overflow: hidden; text-align: center; line-height: 100px; }

					ul.thumb-list li span.thumb img { max-width: 100px; max-height: 100px; width: auto; height: auto; }

/*- Lists: Pagination */

		ul.pagination { margin: 1em 0; }

			ul.pagination li { list-style: none; display: inline; color: #999; border-left: 1px solid #999; }

			ul.pagination li:first-child { border: none; }

			ul.pagination li.ellipsis { padding: 0 0.5em; }

				ul.pagination li a { color: #999 !important; padding: 0 0.5em; }

				ul.pagination li.prev a { padding-left: 0; }

				ul.pagination li.next a { padding-right: 0; }

				ul.pagination li a:hover, ul.pagination li.current a { color: #2b80de !important; }

				ul.pagination li.current a { font-weight: bold; }


/*- Context Aware Markup. IE, the layout driven stuff. */

		#doc3 { margin: 0; }


/*- Header & Nav */

			#hd { height: 75px; line-height: 75px; min-width: 785px; background: #000 url('i/hd-bg.png') repeat-x 0 0; color: #c6c6c5; position: fixed; top: 0; left: 0; width: 100%; z-index: 10; border-bottom: 1px solid #565656; }

				#hd a { color: #c6c6c5; }

				#hd h1 { margin: 0 16px; float: left; }

					#hd h1 a { width: 122px; height: 75px; display: block; overflow: hidden; text-indent: -1000px; background: transparent url('i/logo.png') no-repeat 0 50%; }

				#hd ul.nav { margin: 0; }

					#hd ul.nav li.nav { float: left; list-style: none; background: transparent; }

					#hd ul.nav > li.nav:hover, #hd ul > li.selected { background: transparent url('i/hd-li-a-selected-bg.png') repeat-x 0 0; }

						#hd ul.nav a.nav { display: block; height: 74px; line-height: 74px; padding: 0 16px; font-weight: bold; }

						#hd ul.nav a.hover, #hd ul.nav li.selected a { color: #fff; }

						#hd ul.nav li.quick-links a.nav { padding-left: 40px; background: transparent url('i/hd-li-a-quick-links-bg.png') no-repeat 16px 50%; }

					#hd .ui-combo-section a { color: #fff; font-weight: bold; }

					    #hd .ui-combo-section a.icon.quick-link.on { background: transparent url('i/icons/hd-quick-link-on.png') no-repeat 0 50%; padding-left: 20px; }

					    #hd .ui-combo-section a.edit { font-weight: normal; font-style: italic; }

				#hd div.sync { position: absolute; top: 0; right: 16px; }

					#hd a#sync { display: block; height: 38px; line-height: 38px; padding: 0 18px 0 10px; margin: 18px 0 0; text-align: center; color: #fff; text-transform: uppercase; background: transparent url('i/button-sync-bg.png') no-repeat 100% 0; border: none; -webkit-border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-topleft: 6px; border-bottom-left-radius: 6px; border-top-left-radius: 6px; text-shadow: #000 0 -1px 1px; font-weight: bold; }

					#hd a#sync.unpublished { background-position: 100% -50px; }

					#hd a#sync.conflicts { background-position: 100% -100px; }

					#hd div.sync table { margin: 0; }


/*- Body Section */

			#bd { padding: 107px 0 34px; position: relative; } /* The padding compensates for the position: fixed header, action bar and footer */


/*- Main Section */

				#main { position: relative; min-width: 560px; overflow: auto; color: #333; margin: 0 0 0 220px; padding: 1em; background: transparent url('i/main-bg.png') repeat-y 0 0; } /* The margin makes up for the nav list on the left. The min-width + the width of the nav list should equal 785px. */

				    #main #content { min-height: 99.99%; height: 99.99%; }

				.list #main, .grid #main, .edit #main, .visitors #main { padding: 0; } /* Killing the padding so the striping or the sidebar bg can go to the edges */

				    .list #global-messages, .grid #global-messages, .edit #global-messages, .visitors #global-messages { margin: 1em; }

				    .grid ul.file-list .node.icon {
					min-height: 89px;
					padding-left: 94px;
				    }

				html.collapsed #main { margin-left: 0; }

					#main .bar.action-bar { margin: 0; position: fixed; top: 75px; right: 0; left: 0; min-width: 785px; }

						#main .bar.action-bar table { }

							#main .bar.action-bar table td.spacer { width: 220px; min-width: 220px; } /* This makes up for the width of nav list */

							html.collapsed #main .bar.action-bar table td.spacer { width: 0; min-width: 0; display: none; } /* And then hide this when the nav list is hidden */

					#main a { color: #333; }

					#main h1, #main h2, #main h3, #main h4, #main h5, #main h6, #main h1 a, #main h2 a, #main h3 a, #main h4 a, #main h5 a, #main h6 a { color: #2b80de; } /* there should be a shorter way to do this */

					#main h1 { font-size: 161.6%; }

					.ui-browse .node.icon { padding-left: 94px; min-height: 89px; background-position: -19px -512px; } /* This sets the typical instance of .icon.node to use the 89x89 version */

					#main .box { margin: 1em 0 2em; }

						#main .box h2 { margin: 0 0 0.25em; font-size: 161.6%; }

					#main #dashboard-main {}

							#main #dashboard-main .overview p { font-size: 138.5%; margin: 0; }

							#main .overview p a { font-weight: bold; }

					#main #dashboard-sb {}

						#main #dashboard-sb .box { margin: 0 0 1em; background: #f5f5f5; padding: 1em; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; color: #666; }

							#main #dashboard-sb .box h2 { font-size: 138.5%; color: #666; margin: 0 0 0.8333em; }

							#main #dashboard-sb .box a { color: #666; }

							#main #dashboard-sb .box ul { margin: 0 0 1em; border-bottom: 1px solid #d7d7d7; }

								#main #dashboard-sb .box ul li { border-top: 1px solid #d7d7d7; padding: 10px; }

									#main #dashboard-sb .box ul li * { margin: 0; }

									#main #dashboard-sb .box ul li a { padding: 0; }

							#main #dashboard-sb .box p.view-all { text-align: right; font-weight: bold; }

								#main #dashboard-sb ul.thumb-list li { min-height: 50px; background: transparent; }

									#main #dashboard-sb ul.thumb-list li h3, #main #dashboard-sb ul.thumb-list li p { margin-left: 60px; }

									#main #dashboard-sb ul.thumb-list li span.thumb { width: 50px; height: 50px; line-height: 50px; }

										#main #dashboard-sb ul.thumb-list li span.thumb img { max-width: 50px; max-height: 50px; }

						#main .editor, #main .stats { width: 74%; float: left; padding: 1em 0 1em 1em; }

							#main .editor h1, #main .stats h1 { margin-top: 0; }

						#main .node-meta { background: #f5f5f5; margin-left: 76%; padding-top: 1px; line-height: 1.41; min-width: 220px; min-height: 99.99%; }

							#main .node-meta h2 { margin: 0.72em 0.722em 0; padding: 0 0 0.722em; border-bottom: 1px solid #ccc; font-size: 138.5%; color: #666; }

							#main .node-meta .box { margin: 0 1em; padding: 1em 0; border-bottom: 1px solid #ccc; color: #666; font-size: 85%; }

								#main .node-meta .box * { margin: 0; }

								#main .node-meta .box .icon.node { padding-left: 54px; min-height: 48px; background-position: -40px -256px; }

								#main .node-meta .box h3 { color: #666; text-transform: uppercase; margin-bottom: 0.5em; }

								#main .node-meta .box h3.arrow { cursor: pointer; background-position: 0 50%; padding-right: 0; padding-left: 12px; }

								#main .node-meta .box p.meta { opacity: 1; filter: none; font-style: italic; margin: -0.5em 0 0.5em; }

								#main .node-meta .box table { width: auto; }

									#main .node-meta .box table th, #main .node-meta .box table td { padding: 0 1em 0.5em 0; }

								#main .node-meta .box ul {}

									#main .node-meta .box ul li { margin-bottom: 0.5em; }

					#main div.buttons { padding-top: 3em; }

					#main .box div.buttons { padding: 0; float: right; }

					#main ul.file-list { margin: 0; }

						.list #main ul.file-list li { background-image: url('i/file-list-shadow.png'); background-position: 0 0; background-repeat: repeat-y; /* This makes it look like the shadow graphic on <html> is visible on the blue stripes */ vertical-align: middle; padding: 0.5em 0.5em 0.5em 1.5em; }

						.list #main ul.file-list li.even { background-color: #fff; }

					#main hr { clear: both; width: 100%; height: 0px; overflow: hidden; border: none; border-bottom: 1px dotted #333; outline: none; color: transparent; background: transparent; }
                                        
						#main .dropdown .odd:hover, #main .dropdown .even:hover, #main .dropdown .odd:hover a, #main .dropdown .even:hover a { color: #fff; }

/*- Developer Section */
                                                
                                                #main .assets { padding: 0 0 1em 1em; }
                                                
/*- Sidebar or Nav List */

				#sb { background: #dae4f0; overflow: auto; color: #000; width: 220px; position: fixed; top: 75px; bottom: 34px; left: 0; right: auto; z-index: 2; }

				html.collapsed #sb { display: none; }

					#sb a { color: #000; }

					#sb a:hover { color: #1C6CBE; }

					#sb .box { margin-top: 0; }

						#sb .box h3 { margin: 0.75em 0 0.5em; color: #515a64; text-transform: uppercase; text-shadow: #fff 0 -1px 1px; font-size: 100%; }

							#sb .block { margin-bottom: 2em; }

								#sb .box ul li a { padding: 0.25em 1em; display: block; }

								#sb .box ul li.selected > a { font-weight: bold; background: #515a64; color: #fff !important; }

								#sb .box ul li.hidden > a { opacity: 0.5; filter: alpha(opacity=50); }

							#sb .box ul { margin: 0 0 0 -1em }

							#sb .box ul ul { margin: 0 0 0 1em; }

								#sb .box ul ul li { margin-left: 0; }

									#sb .box ul ul li a { padding-left: 1em; }


/*- Footer */

			#ft { height: 34px; line-height: 34px; width: 100%; min-width: 785px; position: fixed; bottom: 0; left: 0; background: #000 url('i/ft-bg.png') repeat-x 0 0; z-index: 10; color: #fff; }

				#ft a { color: #fff; }

				#ft .nav { margin: 0 0 0 1em; }

				    #ft .nav-item { float: left; list-style: none; margin-right: 2em; }

				    	#ft .nav-item > a { display: block; }

				 #ft .medium {}

				     #ft .medium .ui-combo-target { display: block; width: 85px; overflow: hidden; text-indent: -1000px; background: transparent url('i/medium-logo.png') no-repeat 50% 50%; }

				     	 #ft .medium .ui-combo-dialog { margin: 0 0 -1px -6px; }

				     	 #ft .medium .ui-combo-content { white-space: normal; padding: 0.5em 1em 1em 0.5em; font-weight: bold; font-size: 93%; white-space: nowrap; }

					     #ft .medium .ui-combo-content dl { margin: 0; }

					     #ft .medium .ui-combo-content dt { clear: left; float: left; width: 1.5em; }

/*- Login Page */

			html.login table { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; }

				html.login table td { border: none; text-align: center; vertical-align: middle; }

			#login { text-align: left; width: 296px; margin: 0 auto; }

				#login h1 { margin: 0 0 0.5em; float: none; width: 100%; height: 31px; display: block; overflow: hidden; text-indent: -1000px; background: transparent url('i/logo.png') no-repeat 0 50%; }

				#login a { color: #c8c8c8; }

				#login button { background: #262626 url('i/button-dark-bg.png') repeat-x 0 0; border: none; padding-top: 1px; padding-bottom: 1px; color: #c8c8c8; }

				#login button:hover, #login button:focus { color: #fff; }

				#login div.buttons { margin-bottom: 4em; }


/*- Quicklook / Lightbox */

			#overlay { position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.7; filter: alpha(opacity=70); }

			#quicklook { position: fixed; top: 150px; left: 50%; width: auto; text-align: left; z-index: 1001; -webkit-box-shadow: rgba(0,0,0,0.7) 0px 5px 10px; box-shadow: rgba(0,0,0,0.7) 0px 5px 10px; }

			    #quicklook div.quick-image img { max-height: 350px; max-width: 800px; }

			#quicklook.photo { width: auto; }

				#quicklook .header { height: 27px; line-height: 27px; color: #666; text-shadow: #fff 0px 1px 1px; background: #cdcdcd url('i/quicklook-gradient.png') repeat-x 50% 50%; padding: 0 38px; text-align: center; border-bottom: 1px solid #b1b1b1; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; position: relative; }

					#quicklook .header a.close { position: absolute; top: 6px; left: 9px; width: 15px; height: 15px; overflow: hidden; text-indent: -1000px; background: transparent url('i/quicklook-close.png') no-repeat 50% 0; }

					#quicklook .header a.close:hover { background-position: 50% -15px; }

				#quicklook div.content { padding: 1em; color: #333; background: #eee; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #b1b1b1; }

				#quicklook.header-only .content { border-bottom: none; }

				#quicklook .content.loading { background: #eee url('i/quicklook-loading.gif') no-repeat 50% 50%; min-height: 32px; }

				#quicklook.photo .content { padding: 0; }

					/* FIXME: this interferes with the PathReference widget #quicklook .content .icon.node { width: 128px; height: 128px; background-position: 50% -768px; padding: 0; } */

				#quicklook .footer { padding: 0 9px; height: 38px; line-height: 38px; background: #cdcdcd url('i/quicklook-gradient.png') repeat-x 50% 50%; text-align: center; border-top: 1px solid #fff; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }

				#quicklook.header-only .footer { height: 9px; background: #eee; border-top: none; }

					#quicklook .footer div.buttons { margin: 6px 0; }

					#quicklook .footer button, #quicklook .footer a.button { background: #cdcdcd url('i/quicklook-button-bg.png') repeat-x 0 0 !important; }

					#quicklook .footer button:hover, #quicklook .footer a.button:hover, #quicklook .footer button:focus, #quicklook .footer a.button:focus { border-color: #999; color: #333; }

						#quicklook .footer button:hover span, #quicklook .footer a.button:hover span, #quicklook .footer button:focus span, #quicklook .footer a.button:focus span { color: #333; }

					#quicklook .footer .play { margin: 8px 0; }

/*- Wizard */

div.wizard { min-width: 500px; }

    div.wizard form ul.fields li.field { margin-bottom: 1em; }

    div.wizard form label { font-size: 0.9em; }

div.new-item form ul.fields li.field {  }

    div.new-item form ul.fields li.checkbox-input { display: inline-block; margin-right: 5%; }

div.wizard div.details{color:#666;}

div.wizard div.details div.icon p span{float:right;}

div.wizard form.info-form {}

    div.wizard form.info-form h2 { display: none; }

    div.wizard form.info-form div.section { clear: both; }

    div.wizard form.info-form ul.nav-property {}

    	div.wizard form.info-form ul.nav-property li.checkbox-input { clear: none; float: left; width: 15%; margin-right: 2.99%; }

	div.wizard form.info-form ul.nav-property li.title { float: left; width: 48.5%; }

	div.wizard form.info-form ul.nav-property li.slug { clear: none; float: left; width: 48.5%; margin-left: 2.99%; }

    div.wizard form.info-form div.buttons { padding-top: 1em; }

#media-browser { display: none; }

/*- Errors */

.error-dialog { background-color: white; width: 60%; }

/*- Gritter */

#gritter-notice-wrapper { top: 115px; /* Fix the wrapper below the action bar (i.e. in #content) */ }

/*- TODO */

#hd li.visitors { display: none; }

#hd ul.edit { display: none !important; }

#hd ul.permanent li.preferences { display: none !important; }

/*- Tabs */

.ui-tabs { }

    ul.ui-tabs-nav { margin: 0; display: block; }

    	ul.ui-tabs-nav li { margin: 0 0 0 0.6em;  display: block; float: left; list-style-type: none; }

	    .ui-tabs-nav li a { display: inline-block; outline: none !important; padding: 0 0.7em; background: #eee url('i/button-bg.png') repeat-x 0 0; border: 1px solid #bdbcbd; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border-bottom: none; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; font-size: 93%; color: #666; line-height:26px; }

	    .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs-nav li a:hover { background: #4096ee; border-color: #1c6cbe; color: #fff; cursor: pointer; }

    .ui-tabs-panel { clear: both; padding: 1.2em; background-color: #fcfcfc; border: 1px solid #bdbcbd; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

    	.ui-tabs-hide { display: none; }