/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* end reset */

/* -----------------------
 *   Base
 * -----------------------
 */

/* main container element for editor app */
#pixastic-editor {
	margin : 0;
	position : absolute;
	left : 0;
	top : 0;
	padding: 0px;
	width: 100%;
	height: 100%;
	font-family : Helvetica,Arial,sans-serif;
	overflow : hidden;
	z-index : 10000000;
} 


/* -----------------------
 *   Loading screen
 * -----------------------
 */

/* container for loading screen */
#loading-screen {
	margin : 0;
	position : absolute;
	left : 0;
	top : 0;
	padding: 0px;
	width: 100%;
	height: 100%;
	font-family : Helvetica,Arial,sans-serif;
	overflow : hidden;
	z-index : 10000000;
	background-color : #111;
	opacity : 0.9;
	display : table;
	text-align : center;
} 

/* container for spinner in loading screen */
#loading-screen-cell {
	display : table-cell;
	vertical-align : middle;
	text-align : center;
}


/* -----------------------
 *   Misc
 * -----------------------
 */


// UI error dialog
.ui-dialog .error-dialog {
	background-color : #544;
}

/* loading spinner */
.spinner {
	width : 31px;
	height : 31px;
	display : inline-block;
	background: url(spinner.gif);
	overflow : hidden;
}

canvas.display-canvas,
canvas.undo-canvas {
	/*
	background : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC1JREFUeNpiPHPmDAM2YGxsjFWciYFEMKqBGMD4//9/rBJnz54dDSX6aQAIMABCtQiAsDRF+wAAAABJRU5ErkJggg==');
	*/
	background : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC5JREFUeNpiPHPmTAMDHmBsbIxPmoGJgUIwasBgMICFUDyfPXt2NBCHvwEAAQYAICIGn294LYEAAAAASUVORK5CYII=');

}

.far-far-away {
	position : absolute;
	left : -9999px;
	top : -9999px;
}

#powered-by-pixastic {
	position : absolute;
	bottom : 0px;
	margin-bottom : 23px;
	margin-left : 42px;
}
#powered-by-pixastic a {
	font-size : 12px;
	font-family : Helvetica,Arial,sans-serif;
	letter-spacing : 0.1em;
	color : rgb(100,100,100);
	color : rgba(255,255,255,0.2);
	text-decoration : none;
}

#powered-by-pixastic a:hover {
	color : rgb(200,200,200);
	color : rgba(255,255,255,0.7);
	text-decoration : underline;
}


/* -----------------------
 *   Skeleton structure
 * -----------------------
 */

/* editor background underlay */
#background {
	background-color : #111;
	opacity : 0.9;
	width : 100%;
	height : 100%;
	position : absolute;
	z-index : -1;
}

#image-area {
	position : relative;
	background-color : #222;
	border : 1px solid #444;
	width : 100%;
	height : 100%;
	-moz-box-sizing:border-box;
	overflow : auto;
	text-align : center;
}

#image-area-sub {
}

#image-container {
}

#image-overlay-container {
	-moz-box-sizing:border-box;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}

#image-overlay {
}


/* structure elements */
#edit-ctr-1 {
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
}

#edit-ctr-2 {
	-moz-box-sizing : border-box;
	box-sizing : border-box;
	padding-left:40px;
	padding-right:420px;
	padding-top:70px;
	padding-bottom : 40px;
	height : 100%;
	width : 100%;
}


/* main menu bar */
#main-bar {
	position : absolute;
	width : 100%;
	text-align : right;
	margin-top : 20px;
	margin-right : 30px;
}

/* area on the right with accordion widgets and undo bar */
#controls-bar {
	margin-right : -385px;
	width : 372px;
	float : right;
	height : 100%;
}

/* accordion area */
#action-bar {
	padding : 10px;
	width : 290px;
	background-color : #222;
	border : 1px solid #444;
	-moz-box-sizing : border-box;
	box-sizing : border-box;
	height : 100%;
	overflow-x : hidden;
	overflow-y : auto;
	float: right; 
	position : relative;
}

#action-bar-overlay {
	position : absolute;
	z-index : 1000000;
	width : 100%;
	height : 100%;
	left : 0;
	top : 0;
	background-color : #444;
	opacity : 0.2;
	display : none;
}


/* vertical bar with undo image states */
#undo-bar {
	-moz-box-sizing : border-box;
	box-sizing : border-box;
	background-color : #222;
	border : 1px solid #444;
	width: 70px; 
	height: 100%;
	overflow: hidden;
	padding-top : 3px;
}



/* -----------------------
 *   Main menu styles
 * -----------------------
 */

.main-tab {
	color : #999;
	display : inline-block;
	width : 150px;
	text-transform : lowercase;
	font-size : 22px;
	cursor : pointer;
	text-align : center;
	text-decoration : none;
	padding-top : 4px;
	padding-bottom : 5px;
	outline : 0;
}

.main-tab.hover {
	color : white !important;
}

.main-tab.active {
	color : white;
}



/* -----------------------
 *   Undo list
 * -----------------------
 */


.undo-canvas-small {
	width : 60px;
	height : 40px;
	cursor : pointer;
}

.undo-link {
	width : 60px;
	height : 40px;
	display : block;
	margin : 4px;
	cursor : pointer;
	opacity : 0.8;
}

.undo-link.hover {
	opacity : 1;
}



/* -----------------------
 *   Action UI controls
 * -----------------------
 */


.ui-slider-label, 
.ui-checkbox-label, 
.ui-textinput-label, 
.ui-select-label {
	width : 70px;
	text-align : right;
	margin-right : 5px;
	display : inline-block;
}

.ui-textinput-label-right {
	margin-left : 5px;
}

.ui-textinput {
}

.ui-numericinput {
	width : 35px;
}

.ui-slider {
	width : 125px;
	display : inline-block;
	margin-left : 3px;
	background-color : #222;
}

.ui-slider-value {
	font-size : 11px;
	width : 25px;
	display : inline-block;
	margin-left : 10px;
}

.ui-action-output {
	margin-bottom : 10px;
}

.ui-accordion .ui-accordion-content-active {
	font-size : 11px;
	overflow : hidden;
}

.ui-slider-horizontal {
}

.ui-slider-container, 
.ui-checkbox-container, 
.ui-textinput-container, 
.ui-select-container {
	margin-top : 0px;
	margin-bottom : 10px;
	white-space : nowrap;
}

.ui-preview-checkbox-container {
	display : inline-block;
}

.ui-checkbox {
	margin-bottom:3px;
	margin-left:5px;
	margin-right:5px;
	margin-top:0px;
	vertical-align:middle;
}

input::-moz-focus-inner { border: 0; }

.action-output-text {
	margin-bottom : 5px;
}

button {
	margin-right : 5px;
}