/* Style Sheet for Toolbar Plugin for use in Assetize.com */

/******************************************************************************
 * Yahoo! Reset CSS
 *****************************************************************************/
 /*
 Copyright (c) 2007, Yahoo! Inc. All rights reserved.
 Code licensed under the BSD License:
 http://developer.yahoo.net/yui/license.txt
 version: 2.3.0
 */
 
/*body{color:#000;background:#fff;}*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,
blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,
dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}
sup,sub{/*line-height:-1px;*/vertical-align:text-top;}sub{vertical-align:text-bottom;}input, button, textarea, select
{font-family:inherit;font-size:inherit;font-weight:inherit;}


/******************************************************************************
 * Toolbar
 *****************************************************************************/

iframe { width: 100%; height: 100%; border: none; margin: 0; padding: 0; }

/* All Toolbars */
.tbToolbar { font-family: "Verdana", "sans-serif"; font-size: 10pt; overflow: hidden; background-color: #ffffff; color: #000000; }
.tbToolbar div.widget { overflow: hidden; position: relative; margin-left: 2px; margin-right: 2px; }
.tbToolbar div.toolbar-close { float: right; overflow: hidden; z-index: 500; cursor: pointer; width: 18px; height: 18px; margin: 9px 6px; background-image: url('/tb/widgets/close/close.png'); background-position: top left; background-repeat: no-repeat; }
.tbToolbar div.toolbar-close:hover { background-position: bottom left; }

/* Live Toolbar View */
.tbToolbar-view { width: 100%; z-index: 1200; }
.tbToolbar-view div.dropdown { position: fixed !important; z-index: 1100; }

/* Mobile Toolbar View */
.tbToolbar-mobile-view { width: 100%; z-index: 1200; }

/* Static Toolbar Preview */
.tbToolbar-preview { width: 940px; border: 1px solid black; }
.tbToolbar-preview div.toolbar-close { cursor: auto; }
.tbToolbar-preview div.toolbar-close:hover { background-position: top left; }

/* Toolbar Editor Preview */
.tbToolbar-editor div.toolbar-close { cursor: auto; }
.tbToolbar-editor div.toolbar-close:hover { background-position: top left; }

/* Toolbar Theme Reset/Defaults */
.tbToolbar a:link { text-decoration: underline; font-weight: normal; font-style: normal; }
.tbToolbar a:visited { text-decoration: underline; font-weight: normal; font-style: normal; }
.tbToolbar a:hover { text-decoration: underline; font-weight: normal; font-style: normal; }
.tbToolbar a:active { text-decoration: underline; font-weight: normal; font-style: normal; }


/******************************************************************************
 * Mobile Top View
 *****************************************************************************/

#mobile-body { margin: 0px; border: none; padding: 0px; }

/******************************************************************************
 * Template Globals
 *****************************************************************************/

#tb-template {background-color: #f8f8f8; border: 1px solid #9e9e9e; color: #000000; font-family: "Verdana", "sans serif"; font-size: 10pt; margin: 1em auto; width: 1000px; }
#tb-content { padding: 10px 10px; text-align: left; }

#tb-content h1 { font-weight: bold; font-size: 1.3em; color: #333333; line-height: 1.3em; top: 0px; right: 0px; width: auto; height: auto; font-family: 'Verdana'; color: #000; }
#tb-content h2 { font-weight: bold; font-size: 1.1em; color: #000000; }
#tb-content h3, #tb-content h4, #tb-content h5, #tb-content h6 { font-weight: bold; font-size: 1em; color: #000000; }

#tb-content h1, #tb-content h2, #tb-content h3, #tb-content h4, #tb-content h5, #tb-content h6 { margin-bottom: 0.8em; }
#tb-content p { margin: 0.8em 0 0.8em 0; line-height: 1.3em; }

#tb-content .left { float: left; }
#tb-content .right { float: right; }
#tb-content div.hr { height: 1px; width: 100%; margin: 3px 0; background-color: #aaa; }


/******************************************************************************
 * Toolbar Editor
 *****************************************************************************/

#incompatible {	width: 100%; height: 100%; line-height: 20px; }
#incompatible div { overflow: auto; }
#incompatible div.browsers { margin: 10px 0px 20px 0px; }
#incompatible div.browsers div.browser { width: 180px; float: left; margin: 10px; text-align: center; }
#incompatible div.browsers div.browser img { width: 128px; margin: 0 26px; }

#editor { overflow: auto; }

#toolbar-preview { width: 940px; height: 36px;
					border-width: 1px; border-style: solid; border-color: #000000;
					margin: 0px auto; padding: 0px; position: relative; }
					
#toolbar-container { width: 980px; height: 90px; margin-bottom: 5px; background-color: transparent; position: relative; }

#toolbar-preview-container { width: 980px; float: left; margin-top: 15px; }
#toolbar-tools-container { width: 980px; height: 36px; float: left; }

#toolbar-editor-button { width: 140px; height: 20px; margin: 8px; line-height: 20px; text-align: center; background-color: #ddd;
						 border: 1px solid #888; cursor: pointer; font-weight: bold; float: right; }
#toolbar-editor-button:hover { background-color: #f3f3f3; }

#toolbar-editor { display: none; position: absolute; z-index: 300; background-color: #aaa; width: 600px; float: left; margin: 5px; padding: 10px;
				  overflow: hidden; line-height: 32px; background-color: #f3f3f3; border: 2px solid #aaa; }


#toolbar-preview div.widget { margin-top: 0px; margin-bottom: 0px; z-index: 500; }
#widget-overlay { border: 6px solid #555; position: absolute; z-index: 490; opacity: 0.7; filter:alpha(opacity=70);
				  -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
}

#toolbar-preview div.ui-resizable {  }
div.widget-resizable-helper { border: 2px dotted #666; opacity: 0.8; filter:alpha(opacity=80); }
#toolbar-preview div.widget-placeholder { width: 1px; height: 28px; border: 1px solid #ddd; background-color: #000000; margin: 3px 5px; opacity: 0.5; filter:alpha(opacity=50); }
#toolbar-preview div.widget-placeholder2 { background-color: #000000; opacity: 0.5; filter:alpha(opacity=50); }

#toolbar-inner-left { height: 100%; min-width: 15px; float: left; }
#toolbar-inner-right { height: 100%; min-width: 15px; float: right; }

/*
#toolbar-inner-left { height: 100%; min-width: 15px; float: left; background-color: #ccc; }
#toolbar-inner-right { height: 100%; min-width: 15px; float: right; background-color: #ddd; }
*/

#toolbar-inner-left div.widget-placeholder { float: left; }
#toolbar-inner-right div.widget-placeholder { float: right; }




#editor-middle { background-color: #fdfdfd; overflow: auto; border: 1px solid #888; padding: 5px; }

#sidebar { max-height: 536px; width: 218px; float: left; clear: left;
			  margin: 5px; padding: 5px; overflow: hidden; }

#sidebar h2 { font-size: 1.3em; margin: 5px 0px; font-family: "Georgia", "san-serif" }
			  
#sidebar div.tab { padding: 0px 12px; margin: 1px 0px; overflow: visible; cursor: pointer; }
#sidebar div.tab span { line-height: 32px; font-size: 1.1em; font-weight: bold; color: #323a40; }
#sidebar div.tab div.description { display: none; line-height: 20px; background-color: #ccd5dc; padding: 5px; font-size: 1em; color: #000000; height: 40px; }

#sidebar div.selected { background-color: #d2d2d2; }
#sidebar div.selected span { color: #333; }

#sidebar div.toolbar-settings { margin-bottom: 1em; }
#categories { margin-top: 1em; }

#view { background-color: #f3f3f3; height: 526px; width: 698px; float: left;
		   margin: 5px; padding: 10px; overflow: hidden; position: relative; border: 1px solid #ccc; }

#view div.page { }

#toolbar-settings { padding: 10px; }
#toolbar-settings table.table { width: 100%; }
#toolbar-settings table.table tr { vertical-align: top; height: 36px; line-height: 36px; }
#toolbar-settings span.field-name { font-weight: bold; }

#toolbar-themes { padding: 10px; }

#widget-view {  }

#widget-view div.view-container { width: 688px; height: 516px; margin: 5px; overflow: hidden; }

#widget-view div.widget-container { float: left; width: 150px; height: 150px; margin: 10px; border: 1px solid #aaa; background-color: #fdfdfd; cursor: pointer; }
#widget-view div.widget-container:hover { margin: 9px; border: 2px solid #aaa; box-shadow: 0px 0px 8px #444; -moz-box-shadow: 0px 0px 8px #444; -webkit-box-shadow: 0px 0px 8px #444; background-color: #fff; }

#widget-view div.widget-container div.widget-box { height: 100%; position: relative; }
#widget-view div.widget-container div.widget-box div.avatar { /* cursor: move; */ height: 64px; padding: 3px 0; text-align: center; line-height: 64px; }

#widget-view div.widget-container div.widget-box div.info { height: 80px; font-size: 8pt; text-align: center;  }
#widget-view div.widget-container div.widget-box div.info div.name { height: 20px; line-height: 20px; font-weight: bold; overflow: hidden;  }
#widget-view div.widget-container div.widget-box div.info div.desc {padding: 2px 5px; height: 56px; overflow: hidden; }
#widget-view div.widget-container div.widget-box div.sub { 
		display: none; height: 24px; line-height: 24px; width: 100%; position: absolute; bottom: 0px; overflow: hidden; 
		font-size: 8pt; text-align: center; background-color: #111; color: #fff; opacity: 0.8; filter:alpha(opacity=80);
}

#widgetbox-up   { cursor: pointer; width: 64px; height: 16px; border: 1px solid black; background-color: #ccc; position: absolute; top: 0px;    left: 50%; margin-left: -32px; }
#widgetbox-down { cursor: pointer; width: 64px; height: 16px; border: 1px solid black; background-color: #ccc; position: absolute; bottom: 0px; left: 50%; margin-left: -32px; }

div.button { overflow: auto; height: 36px; line-height: 36px; cursor: pointer; font-weight: bold; font-size: 1.1em; margin: 4px; }
div.button div.button_l { width: 8px; height: 36px; float: left; background: url('/tb/img/editor/button_left.png') no-repeat; }
div.button div.button_m { padding: 0px 20px; float: left; background: url('/tb/img/editor/button.png') repeat-x; }
div.button div.button_r { width: 8px; height: 36px; float: left; background: url('/tb/img/editor/button_right.png') no-repeat; }

#widget-hover { position: absolute; z-index: 400; overflow: visible; padding: 10px 10px; margin: -10px -10px; height: 36px; }
#widget-hover ul.container { z-index: 600; width: 120px; margin-top: 36px; padding: 2px; background-color: #ddd; overflow: auto; border: 2px solid #aaa; }
#widget-hover ul.container li.element { height: 24px; line-height: 24px; margin: 1px; text-align: center; color: #222; }
#widget-hover ul.container li.element:hover { background-color: #aaa; color: #111; }
#widget-hover ul.container li.element img.icon { float: left; height: 20px; width: 20px; margin: 2px; }
#widget-hover ul.container li.element div.text { float: left; margin-left: 6px; }
#widget-hover ul.container li.element div.button { display: none; float: right; width: 64px; height: 18px; margin: 2px; border: 1px solid black; background-color: #ccc; }

/******************************************************************************
 * Widget Editor
 *****************************************************************************/

#weLB 		 { z-index: 2000; width: 650px; padding: 6px; display: none; position: absolute; overflow: hidden; margin-left: 50%; left: -325px; background-color: #555; }
#weLB-top    { width: 650px; overflow: visible; background-color: #ddd; border-bottom: 1px solid #555; }
#weLB-middle { z-index: 2100; width: 650px; overflow: hidden; background-color: #fff; border-bottom: 1px solid #555; }
#weLB-bottom { width: 640px; padding: 5px; line-height: 26px; height: 26px; overflow: hidden; background-color: #ddd; }
#weLB-back 	 { z-index: 1990; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000; opacity: 0.3; filter:alpha(opacity=30); }

#weLB-top div.header { height: 80px; padding: 4px; }
#weLB-top div.header div.avatar-container { float: left; text-align: center; height: 64px; min-width: 64px; padding: 8px;}
#weLB-top div.header div.content { float: left; height: 40px; margin: 4px; line-height: 40px; }
#weLB-top div.header div.content h1 { color: black; text-align: left; font-size: 1.5em; height: 1.5em; font-weight: bold; font-family: Georgia; }
#weLB-top div.header div.content span { color: #777; font-style: italic; text-align: left; font-size: 1em; font-family: Georgia; }

#weLB-top div.tabs { margin-top: 4px; padding: 0 1em; height: 36px; text-align: center; font-weight: bold; }
#weLB-top div.tabs div.we-tab { position: relative; top: 1px; width: 160px; height: 34px; margin: 0px 16px; line-height: 36px; float: left; background-color: #ccc; cursor: pointer; border: 1px solid #555;}
#weLB-top div.tabs div.selected { background-color: #fff; height: 35px; cursor: auto !important; z-index: 2101; border-bottom-style: none; }

#weLB-middle div.we-tab { display: none; width: 650px; min-height: 100px; max-height: 300px; overflow: auto; margin: 0px; padding: 0px 5px; }
#weLB-middle div.selected { display: block !important; }
#weLB-middle div.we-tab div.widget-editor { overflow: auto; position: relative; width: 600px; padding: 10px; margin: 0 auto; }

#weLB span.h1 { font-weight: bold; font-size: 1.2em; color: #333333; }
#weLB span.h2 { font-weight: bold; font-size: 1.1em; color: #000000; }
#weLB span.h3 { font-weight: bold; font-size: 1em; color: #000000; }

#weLB span.title { font-weight: bold; font-size: 1.2em; color: #000000; }
#weLB span.field { font-weight: bold; font-size: 1em; color: #000000; white-space: nowrap; padding: 2px 0px; }
#weLB span.required:after { content: "*"; border-style: none; padding-left: 3px; font-weight: bold; color: #ff0000; }
#weLB span.tooltip { cursor: help; border-bottom: 1px dotted #323b44; }

div.tooltip { display: none; font-family: 'Verdana'; font-size: 10pt; background-color: #000; color: #eee; min-height: 24px; line-height: 24px;
			  max-width: 450px; text-align: center; padding: 2px 10px; z-index: 2200;
			  border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; opacity: 0.8; filter:alpha(opacity=80); }

#weLB-middle div.widget-editor div.error-tag { 
	display: none; position: absolute; background-color: #000; overflow: hidden; font-size: 7pt; color: #eee;
	border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
	line-height: 16px; max-width: 300px; padding: 4px 8px; text-align: left; }

#weLB-middle div.widget-editor img.tooltip { cursor: pointer; width: 18px; height: 18px; }

#widgetform-close { float: right; overflow: hidden; cursor: pointer; width: 18px; height: 18px; margin: 9px 6px; background-image: url('/tb/widgets/close/close.png'); background-position: left top; background-repeat: no-repeat; }
#widgetform-close:hover { background-position: bottom left; }

#widgetform-errors { font-size: 8pt; font-weight: bold; float: right; width: 518px; padding: 0px 5px; text-align: right; height: 26px; line-height: 26px; }

#widgetform-submit { float: right; font-weight: bold; height: 24px; line-height: 24px; width: 100px; padding: 0px 5px; text-align: center; border: 1px solid #444; background-color: #ccc; }
#widgetform-submit:hover { background-color: #ddd; }
#widgetform-submit:active { background-color: #bbb; }

div.we-table-container { margin: 0 auto; }
div.we-table-container table.table { width: 600px; }
div.we-table-container table.inner-table { width: 100%; margin: 0 auto; }
div.we-table-container tr { height: 36px; line-height: 36px; vertical-align: top; }
div.we-table-container tr td { padding: 0 5px; vertical-align: top; }

/* Widget Editor input elements */
/*#we-table-container table.table input { height: 22px; line-height: 22px; }*/
div.we-table-container table.table input.input-text { width: 160px; height: 22px; line-height: 22px; }
div.we-table-container table.table input.input-url  { width: 160px; height: 22px; line-height: 22px; }
div.we-table-container table.table input.input-upload { height: 22px; line-height: 22px; }

div.we-table-container table.table input.input-color { width: 50px; height: 22px; line-height: 22px; }
div.we-table-container table.table button { height: 22px; line-height: 22px; padding: 5px; }

div.we-table-container table.table div.input-color { width: 24px; height: 24px; margin: 5px; background-color: #fff; border: 2px solid black; float: right; }

div.we-table-container table.table div.wf-list-container { width: 100%; height: 125px; overflow: hidden; background-color: #bbb; }
div.we-table-container table.table div.wf-list-container div.wf-list-title { font-weight: bold; width: 100%; overflow: hidden; text-align: center; float: left; height: 24px; line-height: 24px; width: 100%; background-color: #aaa; border-bottom: 1px solid #888; }
div.we-table-container table.table div.wf-list-container div.wf-list-entries { font-size: 10px; width: 100%; height: 100px; text-align: center; overflow: auto; margin: 0 auto; }
div.we-table-container table.table div.wf-list-container div.wf-list-entries div.wf-list-entry { width: 100%; overflow: hidden; float: left; height: 24px; line-height: 24px; width: 100%; background-color: #ccc; border-bottom: 1px solid #888;  }
div.we-table-container table.table div.wf-list-container div.wf-list-entries div.wf-list-entry-placeholder { overflow: hidden; float: left; height: 5px; width: 90%; margin: 10px 5%; background-color: #888; }
div.we-table-container table.table div.wf-list-container div.wf-list-c1 { overflow: hidden; float: left; height: 24px; line-height: 24px; width: 45%; }
div.we-table-container table.table div.wf-list-container div.wf-list-c2 { overflow: hidden; float: left; height: 24px; line-height: 24px; width: 45%; }
div.we-table-container table.table div.wf-list-container div.wf-list-c3 { overflow: hidden; float: left; height: 24px; line-height: 24px; width: 10%; }

/* OAuth */

#oauth-profile { height: 40px; padding: 2px; line-height: 36px; margin: 10px 0px; }
#oauth-profile div.as { float: left; height: 36px; margin-right: 6px; font-weight: bold; }
#oauth-profile div.image { float: left; height: 36px; width: 36px; margin: 0px 2px; }
#oauth-profile div.image img { height: 36px; width: 36px; }
#oauth-profile div.name { float: left; height: 36px; margin: 0px 4px; }