* { margin:0; padding:0;}
canvas:focus {
	outline: none;
}

#loadscreen {
	background:rgba(0, 0, 0, 0.98);
	width:100%;
	height:100%;
	position:absolute;
	top:0; left:0;
	z-index:2000;
}
#loadmessage {
	position:absolute;
	top:0; bottom:0; left:0; right:0;
	color:#fff;
	text-align:center;
	width:42px;
	height:42px;
	margin:auto;
}
body {
	margin:0; padding:0;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	overflow:hidden;
}
h1 {
	font-size:16px;
	color:#fff;
	margin:0; padding:0;
	padding-left:30px;
	background:url(images/cloud-icon.png) bottom left no-repeat;
}
h3 {
	font-size:14px;
	color:#5b6f82;
	margin:0 0 10px 0;
	padding:0;
}
#navigation {
	height:50px;
	background:url(images/toolbar-bg.png) bottom left repeat-x #ccc;
	 -webkit-user-select: none;
}
#goodbar {

	background:url(images/goodbar-bg.png) top left repeat-x blue;
	padding:5px 10px;
	height:20px;
	 -webkit-user-select: none;
	
}
#goodbar h1 {
	float:left;
}
#goodbar h5.sourcelink {
	padding-top:4px;
	color:#d4dde6;
	font-size:12px;
	float:right;
}
#goodbar h5.sourcelink a {
	color:#fff;
}

#goodbar h5.versionstring {
	padding-top:4px;
	margin-left:10px;
	color:#d4dde6;
	font-size:12px;
	float:left;
}
#add-button {
	float:left;
	height:16px;
	width:35px;
	padding:4px 5px;
	border:2px solid #A1A1A1;
	-webkit-border-radius:4px;
	margin-right:6px;
	background:url(images/add-icon.png) center center no-repeat #eee;
	cursor:pointer;
}
#add-button:hover {
	background:url(images/add-icon.png) center center no-repeat #fcfcfc;			
}
#download-button {
	display:none;
	
	float:left;
	height:16px;
	width:20px;
	padding:4px 5px;
	border:2px solid #A1A1A1;
	-webkit-border-radius:4px;
	margin-right:6px;
	background:url(images/download-icon.png) center center no-repeat #eee;		
	cursor:pointer;	
}
#download-button:hover {
	background:url(images/download-icon.png) center center no-repeat #fcfcfc;			
}
#save-button {
	float:left;
	height:16px;
	width:20px;
	padding:4px 5px;
	border:2px solid #A1A1A1;
	-webkit-border-radius:4px;
	margin-right:6px;
	background:url(images/save-icon.png) center center no-repeat #eee;		
	cursor:pointer;	
}
#save-button:hover {
	background:url(images/save-icon.png) center center no-repeat #fcfcfc;			
}
#terminal-button {
	float:right;
	height:16px;
	width:20px;
	padding:4px 5px;
	border:2px solid #A1A1A1;
	-webkit-border-radius:4px;
	margin-right:6px;
	background:url(images/terminal-icon.png) center center no-repeat #eee;		
	cursor:pointer;	
}
#terminal-button:hover {
	background:url(images/terminal-icon.png) center center no-repeat #fcfcfc;			
}
#tools-button {
	float:right;
	height:16px;
	width:20px;
	padding:4px 5px;
	border:2px solid #A1A1A1;
	-webkit-border-radius:4px;
	margin-right:6px;
	background:url(images/tools-icon.png) center center no-repeat #eee;		
	cursor:pointer;	
}
#tools-button:hover {
	background:url(images/tools-icon.png) center center no-repeat #fcfcfc;			
}
#settings-button {	
	float:right;
	height:16px;
	width:20px;
	padding:4px 5px;
	border:2px solid #A1A1A1;
	-webkit-border-radius:4px;
	background:url(images/settings-icon.png) center center no-repeat #eee;		
	cursor:pointer;	
}
#settings-button:hover {
	background:url(images/settings-icon.png) center center no-repeat #fcfcfc;			
}
#share-button:hover {
	background:url(images/share-icon.png) center center no-repeat #fcfcfc;			
}
#share-button {
	float:left;
	height:16px;
	width:20px;
	padding:4px 5px;
	margin-right:6px;
	border:2px solid #A1A1A1;
	-webkit-border-radius:4px;
	background:url(images/share-icon.png) center center no-repeat #eee;		
	cursor:pointer;	
}

#footer {
	height:0;
	display:none;
}
#browser {
	position:relative;
	float:left;
	background:#d4dde6;
	height:100%;
	width:15%;
	 -webkit-user-select: none;
	
}
#browser .internals {
	margin-right:4px;
}
#browser-tools {
	position:absolute;
	bottom:0;
	padding:6px 10px 2px 10px;
	height:16px;
	width:100%;
	background:#f5f5f5;
	border-top:1px solid #ccc;
	color:#666;
	font-size:14px;	
	 -webkit-user-select: none;
						
}
.tool-delete {
	height:12px;
	width:12px;
	background:url(images/medium-close-icon.png) center center no-repeat transparent;			
	float:left;
	margin-right:6px;
	cursor:pointer;
}
.tool-permissions {
	height:12px;
	width:12px;
	background:url(images/permissions-icon.png) center center no-repeat transparent;			
	float:left;
	margin-right:6px;
	cursor:pointer;
}
#browser-list {
	color:#394c60;
	list-style:none;
}
#browser-list li {
	font-size:14px;
	padding-top:1px;
	padding-bottom:1px;
}
#browser-list li:hover {
	color:#000;
}
#browser-list ul {
	padding-left:0.8em;
	list-style:none;
}
li.folder {
	background:url(images/folder-icon-medium.png) 2px 2px no-repeat transparent;
	padding-left:20px;
	cursor:pointer;
}
li.folder + ul{
	display:none;
}
li.file {
	background:url(images/file-icon-medium.png) 2px 2px no-repeat transparent;
	padding-left:14px;
	cursor:pointer;
}
#browser-list li.selected {
	background-color: #22A;
	color:#fff;
}
#editor {
	position:relative;
	background:#000;
	float:left;
	height:100%;
	background:#333333;
}
#editor-area {
	width:100%;
	height:100%;
	background:#000;
	display:none;
}

#preview-area {
	width:100%;
	height:100%;
	display:none;
}
#preview-field {
	background:#eee;
	width:100%;
	padding:5px;
}
#preview-field input {
	-webkit-border-radius:8px;
	left:0; right:0;
	border:1px solid #ccc;
	padding:5px;
	width:95%;
	display:block;
}

#preview-area iframe {
	margin:0;padding:0; border:0;
	height:100%;
	width:100%;
}
#splash-area {
	width:100%;
	height:100%;
	background:url(images/clouds.jpg) center center #eee;
	color:#eee;
}

#splash-area h1 {
	font-size:32px;
	color:#fff;
	margin-bottom:10px;
	background:url(images/cloud-icon.png) left center no-repeat;
	position:relative;
}
#splash-area .header {
	padding:10px;
	margin:-10px -10px 20px -10px;
	background:rgba(0, 0, 0, 0.7);
}

#splash-area .versionstring {
	color:#fff;
	font-size:16px;
}
#splash-area .aboutnote {
	color:#eee;
	font-size:14px;
}
#splash-area .video {
	margin:10px 0 0 0;
	float:right;
	border:2px solid #000;
}
#splash-area .updates {
	margin:10px 10px 0 0;
	/*width:530px;*/
	float:left;
	
}
#splash-area .updates ul {
	list-style:disc;
	margin:15px 0;
	padding-left:20px;
}
#splash-area .updates h4 {
	font-size:22px;	
}

#splash-area .bugreport {
	display:none;
	padding:10px;
	-webkit-border-radius:4px;
	border:1px solid #ccc;
	background:#eee;
	color:#333;
	font-size:16px;
	text-align:center;
}
#splash-area .bugreport input {
	border:1px solid #ccc;
	padding:4px; font-size:14px;
	-webkit-border-radius:4px;

}
#splash-area .bugreport input.bugtext {
	width:60%;
}
#splash-area .referencebar {
	font-size:12px;
	position:absolute; bottom:0; left:0; width:100%; padding:5px 5px 5px 5px;
	background:rgba(0, 0, 0, 0.7);
	
}
#rich-area {
	width:100%;
	height:100%;
	background:#fff;
	display:none;
}

ul#tab-bar {
	padding:0; margin:0;
	list-style:none;
	height:22px;
	padding:5px 5px 0 5px;
	background:#444444;
	overflow:hidden;
	 -webkit-user-select: none;
	
}
ul#tab-bar li.tab {
	border:1px solid #555;
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;			
	border-bottom:none;
	float:left;			
	padding:4px 8px 2px 8px;
	font-size:12px;
	margin-right:4px;
	color:#777;
	background:#333;
}
ul#tab-bar li.tab:hover {
	cursor:pointer;
	border:1px solid #888;
	background:#555;
	color:#aaa;
	border-bottom:none;
}

.tab-close {
	width:8px;
	height:8px;
	margin:3px 4px 2px 0;
	float:left;	
	background:url(images/close-tab-icon.png);
}
li.tab .tab-close:hover,  li.tab .tab-close.edited:hover { 
	background-position:0 -16px;				
}
li.tab .tab-close.edited { 
	background-position:0 -24px;				
}
li.tab .tab-close {
	background-position:0 -8px;				
}
li.selected .tab-close {
	background-position:0 0;				
	
}
ul#tab-bar li.selected {
	border:1px solid #333;
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;			
	border-bottom:none;
	padding:4px 8px 3px 8px;
	color:#666;
	background:#111111;
}
ul#tab-bar li.splash {
	float:right;
	border:1px solid #333;
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;			
	border-bottom:none;
	padding:4px 8px 3px 8px;
	color:#fff;
	background:#170a40;
}
ul#tab-bar li.preview {
	float:right;
	border:1px solid #333;
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;			
	border-bottom:none;
	padding:4px 8px 3px 8px;
	color:#666;
	background:#eee;
}
#toolbox {
	position:relative;
	min-height:100px;
	float:left;
	background:#f5f5f5;
	height:100%;		
	 -webkit-user-select: none;
	
}

.toolbox-section {
	margin-bottom:10px;
	padding:5px;
	border:1px solid #fff;
	-webkit-border-radius:4px;
	background:#d4dde6;
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
#toolbox h3 {
	cursor:pointer;
	font-size:14px;
}
#toolbox .internals {
	display:none;
}
#stretchywrapper {
	overflow:hidden;
}
.internals {
	overflow:auto;	
	padding:10px;
}
.collapser {
	position:absolute;
	top:0;
	width:4px;	
	height:100%;
	background:#ccc;
}
#browsercollapser {
	cursor: w-resize;					
	right:0;
}
#toolboxcollapser {
	cursor: w-resize;					
	left:0;
}
#keyboard-display {
	position:absolute;
	top:2px; right:170px;
	font-size:20px;
	overflow:hidden;
	height:24px;
	color:rgba(255, 255, 255, 0.5);
}
#terminal {
	border-top:2px solid #000;
	color:#fff;
	height:30px; width:100%;
	background:rgba(10, 10, 10, 0.9);
	position:absolute;
	bottom:0; left:0;
	font-size:14px;
	display:none;
}
#terminal #prompt {
	text-decoration: blink;
	position:absolute;
	bottom:5px;
	left:5px;
	font-weight:bold;
	background:orange;
	padding:2px 4px;
	-webkit-border-radius:8px;
	color:#000;
}
#terminal #commandline {
	font-size:14px;
	
	height:30px;
	padding:5px;
	padding-left:25px;
	width:100%;
	background:none;
	border:none;
	color:#fff;
}

#terminal #commandline:focus {
	outline: none;
}
.popup {
	width:300px;
	height:140px;
	padding:10px;
	position:absolute;
	top:0; bottom:0; left:0; right:0;
	background:rgba(255, 255, 255, 1);
	margin:auto;
	font-size:14px;
	-webkit-border-radius:4px;
	-webkit-box-shadow: 2px 2px 5px rgba(120, 120, 120, 0.5);
	
}
.popup h3 {
	margin-top:10px;
}
.popup .header {
	margin:-10px -10px 0 -10px;
	background:url(images/goodbar-bg.png) top left repeat-x blue;
	padding:6px 10px 6px 10px;
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	
	font-size:12px; color:#fff;overflow:hidden;
	
}
.popup .close {
	float:right;
	width:12px;
	height:12px;
	background:url(images/close-icon-white.png) top left no-repeat;		
}
.popup .close:hover {
	cursor:pointer;
	background:url(images/close-icon-white.png) 0 -12px no-repeat;		
}
ul#person-list {
	margin:0; padding:0;
	color:#394c60;
	font-size:14px;
}
.person {
	list-style:none;
	margin:0; 
	background:url(images/person-icon-large.png) 0 5px no-repeat;		
	padding:5px 0 0 30px;
	min-height:40px;
}
.person:nth-child(2n) {
	padding:5px 0 0 35px;
	margin:0 -5px;
	background:url(images/person-icon-large.png) 5px 5px no-repeat #fff;		
	
}
.button {
	-webkit-border-radius:8px;
	cursor:pointer;
	border:1px solid #ccc;
	background:#fff;
	padding:6px;
	margin:10px 10px 10px 0;
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
	
}

.buttonset {
	margin:15px 0 0 0;
	text-align:left;
}

.expand-triangle {
	width:14px; height:9px; float:left;
	margin-top:4px;
	background:url(images/expand-triangle.png) no-repeat;
	background-position:0 0;		
	cursor:pointer;
}
.expand-triangle.open {
	background-position:0 -9px;					
}
#bubble-shelf {
	position:absolute;
	bottom:0; right:10px;
}
.bubble {
	background:url(images/bubble-tail.png) bottom 50% no-repeat;
	padding-bottom:5px;
	float:right;
	cursor:pointer;
}
.bubble.Error {
	background:url(images/bubble-tail-error.png) bottom 50% no-repeat;		
}
.bubble .internals {
	font-size:12px;
	color:#fff;
	padding:5px 10px;
	-webkit-border-radius:4px;
	background:#7700FD;
}
.bubble.Error .internals {
	font-size:12px;
	color:#fff;
	padding:5px 10px;
	-webkit-border-radius:4px;
	background:red;
}
.left {float:left;}
.right { float:right;}
.clear { clear:both;}
.note {font-size:12px;}

#error-message, #config-message {
	position:absolute;
	top:30%; left:0; right:0;
	margin:auto;
	width:600px;
	text-align:center;
	font-size:28px;
	color:#fff;
}

#config-message h4 {
	margin-bottom:20px;
}
#config-message .fieldset {
	margin:10px 0;
	font-size:16px;
}
#config-message .fieldset input {
	display:block;
	float:left;
	width:300px;
	border:1px solid #ccc;
	color:#000;
	background:#fff;
	font-weight:bold;
	font-size:16px;
	padding:4px;
	
}

#config-message .fieldset label {
	margin-right:10px;
	text-align:right;
	display:block;
	float:left;
	width:200px;
	padding:4px;	
	color:#eee;
}
#config-message #updateconfig {
	text-decoration:underline;
	cursor:pointer;
	display:block;
	color:orange;
	margin:10px 0;
	font-size:20px;
}
#config-message .note {
	margin:20px 0;
	font-size:14px;
	color:#ccc;
}
#config-message .note code {
	color:#00ff00;
}