/**
 * Lite3 styles
 * 
 * z-index:
 *  - 0: default
 *  - 1: drag elements in mixer, any item selected
 *  - 2: progressbar
 *  - 3: track menu, part menu
 *  - 5: .tooltip, .activity
 *  - 10: focused window; .focused
 *  - 11: .mask
 *  - 12: .sticky, #alert, #alert2, #error
 *  - 200: #login
 *  - 300: #cmenu, #imgedit
 */
@font-face {
    font-family: "digital";
    src: url(/create/font/digital-7-mono.eot?#iefix),
		url(/create/font/digital-7-mono.woff);
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font: 12px/1em arial,helvetica,sans-serif;
    color: #222;
    width: 100%;
    height: 100%;
	min-width: 700px;
	min-height: 700px;
    background-color: #000;
	position: relative;
	overflow: auto;
}

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,textarea,p,th,td,label {
    margin: 0;
	padding: 0;
	line-height: 1em;
}

a { text-decoration: none; cursor: pointer; color: #222; }
a:hover { color: #ff8a00; }

a img { vertical-align: middle; }

img { border: 0; }

p { word-wrap: break-word; line-height: 1.4em; }

p a { text-decoration: underline; }

ul { }
li { list-style-type: none; margin: 0; padding: 0; }

iframe { border:none; overflow:hidden; }

/* input - text, password */
input[type="text"], input[type="password"] {
	border: none;
    color: #444;
    padding: 5px;
    width: 270px;
	font-weight: bold;
	-moz-box-shadow: 0 0 1px 1px #888 inset;
	-webkit-box-shadow: 0 0 1px 1px #888 inset;
	box-shadow: 0 0 1px 1px #888 inset;
}

input[type="text"][readonly], input[type="text"][disabled], input[type="password"][readonly], input[type="password"][disabled] {
	color: #888;
}


input[type="submit"], button {
	padding: 5px;
	border: none;
	color: #292929; /*#292929;*/
	font-size: 1em;
	font-weight: bold;
	background-color: #FF8A00;
	-moz-border-radius: 2px;
	border-radius: 2px;
	cursor: pointer;
}

input[type="submit"]:hover, button:hover {
	
}

input[type="submit"]:active, button:active {
	background-color: #888;
}

input[type="submit"][disabled], button[disabled] {
	color: #aaa;
	background-color: #ccc;
}

label {
	padding: 0;
	margin: 0;
}

label input[type="checkbox"] {
	margin: 0 3px 0 0;
	vertical-align: bottom;
}

/* remove dotted line from link and buttons */
:focus { outline:none; }
::-moz-focus-inner { border:0; }

p, span, td, div {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-o-user-select: none;
	user-select: none;
}

select {
	border: none;
    color: #444;
    padding: 5px;
	font-weight: bold;
	-moz-box-shadow: 0 0 1px 1px #888 inset;
	-webkit-box-shadow: 0 0 1px 1px #888 inset;
	box-shadow: 0 0 1px 1px #888 inset;
}

textarea {
	width: 100%;
	height: 100px;
	border: none;
	-moz-box-shadow: 0 0 1px 1px #888 inset;
	-webkit-box-shadow: 0 0 1px 1px #888 inset;
	box-shadow: 0 0 1px 1px #888 inset;
}



/**
 * Skinnable default dialog
 */
.dialog {
	width: auto;
	height: auto;
	border: none;
	margin: 0;
	padding: 0;
	position: absolute;
	color: #eee;
	border-radius: 3px;
}

.dialog .bg {
	background-color: #111;
	color: #A5A5A5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 3px;
}

.dialog .top {
	position: relative;
	padding: 5px 30px 5px 10px;
	font-size: 1.5em;
	font-weight: bold;
	color: #959595;
	border-radius: 3px 3px 0 0;
	cursor: default;
	white-space: nowrap;
}

.dialog .top .close {
	position: absolute;
	top: 5px;
	right: 5px;
}

.dialog .content {
	position: relative;
}

.dialog .emphasized {
	background-color: #1B1B1B;
	color: #818181;
	font-weight: bold;
	padding: 10px;
}

/* form in dialog */
.dialog .form  { }

.dialog .form div {
	margin-bottom: 5px;
}

.dialog .form .bottom {
	padding-top: 10px;
}

/* error message in dialog */
.dialog .error {
	color: #eee;
}

/* loading block */
.dialog .loading {
	height: 40px;
	background: url("/create/img/loading-m.gif") no-repeat 5px 5px transparent;
}

.dialog .loading.center {
	width: 40px;
	height: 40px;
	background: url("/create/img/loading-m.gif") no-repeat 5px 5px #151515;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -20px;
}


/* sticky dialog style */
.dialog.sticky {
	background-color: transparent;
	color: #fff;
	position: fixed;
	width: 300px;
	border-radius: 3px;
	z-index: 13;
}

.dialog.sticky .bg {
	-moz-box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	box-shadow: 1px 1px 2px #000;
	background-color: #000;
	opacity: 0.8; filter: alpha(opacity = 80);
}

.dialog.sticky .top {
	background-color: transparent;
}

.dialog a {
	color: #eee;
}

.dialog a:hover {
	color: #FF8A00; 
}


/* bottom panel; usually for buttons */
.bottom {
	text-align: right;
	position: relative;
}

.bottom button {
	margin-left: 5px;
}

/* padding to any element */
.pad {
	padding: 10px;
}

.pad-b {
	padding: 0 0 10px 0;
}


/**
 * label
 */
.label {
	color: #FF8A00 !important;
}

.label.b {
	font-size: 1.7em;
	font-weight: bold;
}

.label.m {
	font-size: 1.2em;
	font-weight: bold;
}

.label.s {
	font-size: 1em;
	font-weight: normal;
}


/* tooltip */
.tooltip {
	font-size: 1em;
	white-space: nowrap;
	background-color: #1F1F1F;
	color: #eee;
	text-shadow: 0 0 2px #eee;
	padding: 2px;
	z-index: 5;
}

/* activity alert */
.activity {
	background-color: #EAD417;
	color: #5B4B42;
	padding: 10px;
	border: solid 1px #5B4B42;
	position: absolute;
	z-index: 5;
	font-size: 12px;
	font-weight: bold;
}



/**
 * alist
 */
.alist {
	padding: 10px 0;
}

.alist a {
	display: block;
	line-height: 20px;
	font-size: 1.1em;
	font-weight: bold;
	padding: 0 10px;
}

.alist a:hover {
	color: #FF8A00;
}

.alist a.selected {
	color: #FF8A00;
}

.alist button {
	font-weight: bold;
}



/**
 * itemlist
 */
.itemlist {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.itemlist .preview {
	position: absolute;
	top: 0;
	left: 0;
}

.itemlist .item {
	height: 30px;
	line-height: 30px;
	position: relative;
}

.itemlist .play {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 5px;
	left: 0;
	background: transparent url(/create/img/sprite-buttons.png) -11px -356px no-repeat;
	cursor: pointer;
}

.itemlist .play.pause {
	background-position: -42px -356px;
}

.itemlist .play.wait {
	/*background: transparent url(/create/img/loading-s.gif) 5px 3px no-repeat;*/
}

.itemlist .name {
	color: #959595;
	line-height: 30px;
	position: absolute;
	top: 0;
	left: 10px;
	white-space: nowrap;
	cursor: pointer;
}

.itemlist .item.playable .name {
	left: 30px;
}

.itemlist .item.selected .name {
	color: #FF8A00;
}

.itemlist .name:hover {
	color: #eee;
	text-shadow: 0 0 5px #eee;
}

.itemlist .name:active {
	color: #FF8A00;
}

.itemlist .progress {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #0E0E0E;
	height: 30px;
	width: 100%;
}

.itemlist .progressbar {
	background-color: #0C4B77;
	height: 30px;
	position: absolute;
	top: 0;
	left: 0;
}


/**
 * itemlist hoder
 */
.itemlist_holder {
	background-color: #161616;
	color: #7C7C7C;
}

.itemlist_holder .title {
	font-weight: bold;
	font-size: 1.2em;
	background-color: #1F1F1F;
	color: #727272;
	height: 30px;
	line-height: 30px;
	padding-left: 10px;
}




/**
 * sortable
 */
.sortable {
	position: relative;
}



/**
 * scrollable, scrollbar, scrollthumb
 */
.scrollable {
	position: relative;
}

.scrollbar {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 100%;
	border: none;
}

.scrollthumb {
	width: 7px;
	position: absolute;
	background-color: #959595;
	border-radius: 5px;
	opacity: 0.5; filter: alpha(opacity = 50);
}


/* clickable element */
.clickable {
	cursor: pointer;
}


/**
 * focused window 
 */
.focused {
	z-index: 10;
}


/**
 * shadow for floating element
 */
.shadow {
	-moz-box-shadow: 2px 2px 10px #000;
	-webkit-box-shadow: 2px 2px 10px #000;
	box-shadow: 2px 2px 10px #000;
}


/**
 * highlight element
 */
.highlight {
	box-shadow: 0 0 -2px 1px #FF8A00 inset;
}


/**
 * selectlist
 */
.selectlist {
	border: solid 2px #464646;
	background-color: #0A0A0A;
	color: #7C7C7C;
	font-size: 1.1em;
	font-weight: bold;
	position: relative;
	height: 22px;
	width: 196px;
	line-height: 25px;
	text-align: left;
	cursor: pointer;
}

.selectlist .selected {
	line-height: 22px;
	padding-left: 5px;
}

.selectlist .expand {
	height: 20px;
	width: 20px;
	position: absolute;
	top: 1px;
	right: 1px;
	background: transparent url(/create/img/sprite-buttons.png) -16px -484px no-repeat;
}

.selectlist .option {
	display: none;
	position: relative;
	bottom: -3px;
	left: -2px;
	border: solid 2px #464646;
	background-color: #0A0A0A;
	width: auto;
	height: auto;
	z-index: 1;
	width: 100%;
}

.selectlist .item {
	padding: 2px 10px;
}

.selectlist .item:hover {
	color: #FF8A00;
}



/* button elements */
.close {
	width: 20px;
	height: 20px;
	background: transparent url(/create/img/sprite-buttons.png) no-repeat -16px -416px;
	cursor: pointer;
}

.close:hover {
	background-position: -46px -416px;
}



/* jquery-ui styles */

/* resizable */
.ui-resizable-handle {
	position: absolute;
}

.ui-resizable-n {
	top: 0;
	left: 0;
	height: 5px;
	width: 100%;
	cursor: n-resize;
}

.ui-resizable-s {
	bottom: 0;
	left: 0;
	height: 5px;
	width: 100%;
	cursor: s-resize;
}

.ui-resizable-w {
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	cursor: w-resize;
}

.ui-resizable-e {
	top: 0;
	right: 0;
	width: 5px;
	height: 100%;
	cursor: e-resize;
}

.ui-resizable-se {
	bottom: 0;
	right: 0;
	width: 5px;
	height: 5px;
	cursor: se-resize;
}

.ui-resizable-helper {
	border: dashed 5px #ff0000;
}



/* instruemnt images */
.inst {
	width: 50px;
	height: 50px;
	background: transparent url(/create/img/sprite-instruments.png) no-repeat 0 -50px;
}

.inst._1 {
	background-position: 0 -100px;
}

.inst._2 {
	background-position: 0 -150px;
}

.inst._3 {
	background-position: 0 -200px;
}

.inst._4 {
	background-position: 0 -250px;
}

.inst._5 {
	background-position: 0 -300px;
}

.inst._6 {
	background-position: 0 -350px;
}

.inst._7 {
	background-position: 0 -400px;
}

.inst._8 {
	background-position: 0 -450px;
}

.inst._9 {
	background-position: 0 -500px;
}

.inst._10 {
	background-position: 0 -800px;
}

.inst._11 {
	background-position: 0 -550px;
}

.inst._13 {
	background-position: 0 -600px;
}

.inst._16 {
	background-position: 0 -650px;
}

.inst._17 {
	background-position: 0 -700px;
}

.inst._18 {
	background-position: 0 -750px;
}



/* Layout - footer */
#footer {
	width: 100%;
	height: 100px;
	background-color: #333333;
    border-top: 1px solid #666;
    position: fixed;
	bottom: 0;
	left: 0;
}

#footer iframe {
	position: absolute;
	top: 5px;
	left: 5px;
}


/* pin button */
#pin-button {
	border: none;
	position: absolute;
	top: 50%;
	margin-top: -14px;
	width: 28px;
    height: 28px;
	opacity: 0.6;  filter: alpha(opacity = 60);
	cursor: pointer;
	
	/* Firefox */
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.3s;
	-moz-transition-delay: 0.2s;
	/* WebKit */
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.3s;
	-webkit-transition-delay: 0.2s;
	/* Opera */
	-o-transition-property: opacity;
	-o-transition-duration: 0.3s;
	-o-transition-delay: 0.2s;
	/* Standard */
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-delay: 0.2s;
}

#pin-button:hover {
	opacity: 1;
}

#pin-button.left {
	background: url(/create/img/pin.png) no-repeat 0 0;
	left: 10px;
}

#pin-button.right {
	background: url(/create/img/pin.png) no-repeat -28px 0;
	right: 10px;
}

/* sitelinks */
#sitelinks {
	position: fixed;
	bottom : 105px;
	right: 10px;
	color: #ccc;
	text-align: right;
	width: 700px;
	color: #eee;
	text-shadow: 1px 1px 2px #000;
}

#sitelinks a {
	color: #eee;
}

#sitelinks a:hover {
	text-decoration: underline;
}


/* mask */
#mask {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 11;
	background-color: #fff;
	opacity: 0.3; filter: alpha(opacity = 30);
	cursor: not-allowed; 
}


/* Alert */
#alert {
	position: fixed;
	top: 40%;
	left: 50%;
	z-index: 12;
	background-color: #EFF6FF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow: 0 2px 2px #000;
	font-size: 1.3em;
	font-weight: bold;
	padding: 10px 20px;
	line-height: 2em;
}

#alert2 {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 12;
	background-color: #EFF6FF;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	padding: 10px;
	box-shadow: 0 2px 2px #000;
	font-size: 1.1em;
	font-weight: bold;
}

#undo {
	position: absolute;
	top: 3px;
	left: 50%;
	z-index: 12;
	background-color: #EFF6FF;
	padding: 4px 0;
	box-shadow: 0 2px 2px #000;
	font-size: 12px;
	font-weight: bold;
	width: 80px;
	text-align:center;
	margin-left: -40px;
	cursor: pointer;
	color: #ccc;
	
	background-color: #242424;
	
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#242424), to(#444));
	
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #242424, #444);
	
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #242424, #444);
	
	/* IE 10 */
	background: -ms-linear-gradient(top, #242424, #444);
	
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #242424, #444);
}

#undo:active {
	box-shadow: 0 0 2px #000;
}

#error {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 12;
	background-color: #FFF6EF;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	padding: 10px;
	box-shadow: 0 2px 2px #000;
	font-size: 1.1em;
}

#alert a, #alert2 a, #error a {
	color: #3399FF;
	text-decoration: underline;
}

#alert .close {
	position: absolute;
	top: 5px;
	right: 5px;
}


/* problem; usually flash player error */
#problem {
    color: #FFFFFF;
    font-size: 2.4em;
    font-weight: bold;
    padding: 50px;
    text-shadow: 2px 2px 4px #000000;
}

#problem .message {
	position: absolute;
	bottom: 5px;
}


/* Sidebar */
#sidebar {
	position: fixed;
	top: 50px;
	right: 10px;
}

#sidebar .dialog {
	position: absolute;
	top: 0;
	right: 0;
}


/* feedback dialog */
#feedback {
	width: 400px;
}


/* share buttons */
#share {
	position: fixed;
	left: 10px;
	bottom: 110px;
	height: 60px;
}

#share .share_button {
	float: left;
	margin-right: 10px;
}


/* swf holders; mixer, encoder, bootstrap */
#lite3-swf-bootstrap {
	height: 300px;
	width: 300px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -150px;
}

#quicktour {
	width: 640px;
	height: 390px;
	position: absolute;
	top: 100px;
	left: 50%;
	margin-left: -320px;
	border: solid 20px #000;
	z-index: 12;
	border-radius: 5px;
}

#quicktour .closebtn {
	position: absolute;
	top: -17px;
	right: 0px;
	cursor: pointer;
	color: #fff;
}

#quicktour .closebtn:hover {
	text-decoration: underline;
}

#quicktour-banner {
	text-align: right;
	padding: 10px;
	font-size: 13px;
	width: 130px !important;
}

#quicktour-banner a {
	color: #fff;
	font-weight: bold;
	font-size: 13px;
}

#quicktour-banner a:hover {
	color: #FF8A00 !important;
}

#autosave {
	width: 140px;
}

#autosave.on span {
	color: #00ff00;
}

/*
#lite3-swf-encoder {
	z-index: 1000000;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
}
*/