body
{
	background-color: #292929;
	font-family: 'Asap', sans-serif;
	color: #E3E3E3;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

h1
{
	margin-top: 3px;
	margin-bottom: 17px;
	text-shadow: 0px 0px 9px #2D2D2D;
	-moz-text-shadow: 0px 0px 9px #2D2D2D;
	-o-text-shadow: 0px 0px 9px #2D2D2D;
	-ms-text-shadow: 0px 0px 9px #2D2D2D;
	-webkit-text-shadow: 0px 0px 9px #2D2D2D;
}

fieldset
{
	margin-bottom: 12px;
	padding: 12px;
	padding-top: 9px;
	border: 2px solid #656565;
	box-shadow: 0px 0px 17px #1A1A1A;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	-webkit-border-radius: 8px;
}

legend
{
	padding: 4px 6px;
	font-size: 13px;
	font-weight: bold;
	color: #8C8C8C;
	background-color: black;
	box-shadow: 0px 0px 4px black;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
}

label
{
	font-size: 15px;
}

legend, .button
{
	font-family: 'Armata', sans-serif;
}

.clear
{
	clear: both;
}

.strong
{
	font-weight: bold;
}

/* Page layout */

div.wrapper
{
	width: 900px;
	margin: 0px auto;
}

div.main
{
	background-color: black;
	border: 2px solid #0E0E0E;
	margin-top: 36px;
	padding: 18px;
	box-shadow: 0px 0px 10px #080808;
	-moz-box-shadow: 0px 0px 10px #080808;
	-o-box-shadow: 0px 0px 10px #080808;
	-ms-box-shadow: 0px 0px 10px #080808;
	-webkit-box-shadow: 0px 0px 10px #080808;
}

div.left-pane
{
	float: left;
	width: 510px;
}

div.right-pane
{
	float: right;
	width: 342px;
}

div.inner-pane
{
	padding: 5px 6px;
}

div.form-field
{
	margin-bottom: 3px;
}

fieldset label
{
	float: left;
}

fieldset input, fieldset .colorfield
{
	float: right;
}

fieldset .colorfield input
{
	display: none;
}

/* Preview area */

textarea#preview
{
	display: block;
	width: 100%;
	/* width: 40px; */
	height: 100px;
	padding: 8px;
	font-family: 'Asap', sans-serif;
	font-size: 26px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background-color: #4E4E4E;
	color: white;
	border: 0px;
	border-collapse: separate;
}

fieldset#fieldset_preview
{
	padding: 18px;
}

/* Listbox element */
.listbox
{
	background-color: #121212;
	border: 1px solid #212121;
	height: 250px;
	overflow: auto;
}

.listbox-item
{
	color: #CACACA;
	padding: 6px 8px 6px 5px;
	font-size: 15px;
	height: 17px;
	background: #0B0B0C;
	background: -moz-linear-gradient(top, #0B0B0C 0%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0B0B0C), color-stop(100%,#000000));
	background: -webkit-linear-gradient(top, #0B0B0C 0%,#000000 100%);
	background: -o-linear-gradient(top, #0B0B0C 0%,#000000 100%);
	background: -ms-linear-gradient(top, #0B0B0C 0%,#000000 100%);
	background: linear-gradient(top, #0B0B0C 0%,#000000 100%);
}

.listbox-item:hover
{
	color: white;
	background: #19191c;
	background: -moz-linear-gradient(top, #19191c 0%, #0F0F0F 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19191c), color-stop(100%,#0F0F0F));
	background: -webkit-linear-gradient(top, #19191c 0%,#0F0F0F 100%);
	background: -o-linear-gradient(top, #19191c 0%,#0F0F0F 100%);
	background: -ms-linear-gradient(top, #19191c 0%,#0F0F0F 100%);
	background: linear-gradient(top, #19191c 0%,#0F0F0F 100%);
}

.listbox-item.selected
{
	color: white;
	background: #303038;
	background: -moz-linear-gradient(top, #303038 0%, #212121 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303038), color-stop(100%,#212121));
	background: -webkit-linear-gradient(top, #303038 0%,#212121 100%);
	background: -o-linear-gradient(top, #303038 0%,#212121 100%);
	background: -ms-linear-gradient(top, #303038 0%,#212121 100%);
	background: linear-gradient(top, #303038 0%,#212121 100%);
}

.listbox-item-placeholder
{
	color: #CACACA;
	padding: 6px 8px;
	font-size: 15px;
	height: 17px;
	background: #0A0A0A;
}

.listbox-header
{
	margin-top: 10px;
	margin-left: 5px;
	margin-bottom: 2px;
	font-weight: bold;
	font-size: 14px;
}

a.listbox-button
{
	display: block;
	float: left;
	padding: 7px 0px;
	width: 50%;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #CACACA;
	text-decoration: none;
	background: #101011;
	background: -moz-linear-gradient(top, #101011 0%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#101011), color-stop(100%,#000000));
	background: -webkit-linear-gradient(top, #101011 0%,#000000 100%);
	background: -o-linear-gradient(top, #101011 0%,#000000 100%);
	background: -ms-linear-gradient(top, #101011 0%,#000000 100%);
	background: linear-gradient(top, #101011 0%,#000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#101011', endColorstr='#000000',GradientType=0 );
}

a.listbox-button:hover, a.listbox-button:active
{
	color: white;
}

a.listbox-button:hover
{
	background: #181819;
	background: -moz-linear-gradient(top, #181819 0%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#181819), color-stop(100%,#000000));
	background: -webkit-linear-gradient(top, #181819 0%,#000000 100%);
	background: -o-linear-gradient(top, #181819 0%,#000000 100%);
	background: -ms-linear-gradient(top, #181819 0%,#000000 100%);
	background: linear-gradient(top, #181819 0%,#000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181819', endColorstr='#000000',GradientType=0 );
}

a.listbox-button:active
{
	background: #2e2e30;
	background: -moz-linear-gradient(top, #2e2e30 0%, #0f0f0f 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e2e30), color-stop(100%,#0f0f0f));
	background: -webkit-linear-gradient(top, #2e2e30 0%,#0f0f0f 100%);
	background: -o-linear-gradient(top, #2e2e30 0%,#0f0f0f 100%);
	background: -ms-linear-gradient(top, #2e2e30 0%,#0f0f0f 100%);
	background: linear-gradient(top, #2e2e30 0%,#0f0f0f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2e30', endColorstr='#0f0f0f',GradientType=0 );
}

/* Color picker button */

.colorbutton
{
	background-image: url(../images/select5.png);
	background-position: -1px -2px;
	border: 1px solid #DEDEDE;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-webkit-border-radius: 5px;
	width: 21px;
	height: 21px;
}

/* Form layout */

.form-element
{
	margin-bottom: 7px;
}

.form-field
{
	float: right;
}

/* Top menu */ 

.header h1
{
	float: left;
}

.header-buttons
{
	float: right;
	margin-top: 4px;
}

.header-buttons a
{
	display: block;
	float: left;
	border: 1px solid gray;
	border-left: 0px;
	padding: 10px 13px;
	text-decoration: none;
	color: #E3E3E3;
	font-size: 15px;
	transition-property:color, background-color;  
	transition-duration: .15s, .15s;  
	transition-timing-function: ease-in-out, ease-in-out;  
	-moz-transition-property:color, background-color;  
	-moz-transition-duration: .15s, .15s;  
	-moz-transition-timing-function: ease-in-out, ease-in-out;  
	-webkit-transition-property:color, background-color;  
	-webkit-transition-duration: .15s, .15s;  
	-webkit-transition-timing-function: ease-in-out, ease-in-out;  
}

.header-buttons a:hover
{
	color: white;
	background-color: #171717;
	transition-property:color, background-color;  
	transition-duration: .15s, .15s;  
	transition-timing-function: ease-in-outl, ease-in-out;  
	-moz-transition-property:color, background-color;  
	-moz-transition-duration: .15s, .15s;  
	-moz-transition-timing-function: ease-in-out, ease-in-out;  
	-webkit-transition-property:color, background-color;  
	-webkit-transition-duration: .15s, .15s;  
	-webkit-transition-timing-function: ease-in-out, ease-in-out; 
}

.header-buttons a:first-child
{
	border-left: 1px solid gray;
	border-radius: 20px 0px 0px 20px;
	-moz-border-radius: 20px 0px 0px 20px;
	-o-border-radius: 20px 0px 0px 20px;
	-ms-border-radius: 20px 0px 0px 20px;
	-webkit-border-radius: 20px 0px 0px 20px;
}

.header-buttons a:nth-last-child(2)
{
	border-radius: 0px 20px 20px 0px;
	-moz-border-radius: 0px 20px 20px 0px;
	-o-border-radius: 0px 20px 20px 0px;
	-ms-border-radius: 0px 20px 20px 0px;
	-webkit-border-radius: 0px 20px 20px 0px;
}

/* Special */

.layer-id
{
	display: none;
}

.tools
{
	margin: 1px;
	float: right;
}

.tools img
{
	margin-left: 4px;
}

#settings label
{
	margin-top: 4px;
}

#settings label.buttonset
{
	margin-top: 6px;
}

.slider, .slider-negative
{
	width: 180px;
	margin-top: 6px;
	float: right;
}

.slider-field input
{
	width: 30px;
	margin-left: 12px;
	float: right;
	background-color: black;
	border: 1px solid #212121;
	color: white;
	font-size: 12px;
	padding: 2px;
}

/* Dialogs */

#dialog_confirm_deletion, #dialog_code, #dialog_save, #dialog_load, #dialog_rename, #dialog_confirm_clear, #dialog_presets
{
	display: none;
}

#dialog_code, #dialog_save, #dialog_load, #dialog_rename
{
	text-align: center;
}

#dialog_code textarea, #dialog_save textarea, #dialog_load textarea
{
	height: 180px;
}

#dialog_code textarea, #dialog_save textarea, #dialog_load textarea, #dialog_rename input
{
	width: 450px;
	background-color: black;
	border: 1px solid #212121;
	color: white;
	padding: 6px;
}

#dialog_presets ul
{
	list-style-type: none; 
	margin: 0px; 
	padding: 0px;
}

#dialog_presets li
{
	width: 100px;
	height: 100px;
	padding: 14px;
	margin: 7px;
	overflow: hidden;
	float: left;
	background-color: #232323;
	border: 1px solid transparent;
	font-size: 42px;
}

#dialog_presets li:hover
{
	border: 1px solid silver;
}

#dialog_presets li .preset-test
{
	width: 80px;
	height: 80px;
	margin: 5px;
	background-color: black;
	overflow: hidden;
	font-size: 36px;
	padding: 5px;
}

/* Sortables */

.sortable 
{ 
list-style-type: none; 
margin: 0px; 
padding: 0px; 
}

.sortable li 
{ 
margin: 0px; 
}

#fieldset_settings
{
	position: relative;
}

#start_arrow
{
	position: absolute;
	left: 235px;
	top: 135px;
}

/* Hacks */

.colorpicker_submit
{
	display: none;
}

.handle
{
	float: left;
	margin-right: 3px;
	margin-top: 1px;
}