@CHARSET "ISO-8859-1";

.app {
	font-family: Myriad, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	}

#Container {
	}
	
#Header {
	height: 60px;
	margin-bottom: 10px;
	}
	
#CanvasContainer {
	width: 550px;
	height: 460px;
	float: left; 
	border: 1px solid #bbb;
	}

#Canvas {
	width: 550px;
	height: 460px;
	overflow: hidden;
	position: relative;
	}
	
#Controls {
	width: 195px;
	height: 460px;
	margin-left: 10px;
	padding-top: 0px;
	float: left;
	}
	
#Loader {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 999;
}

#Oversampled {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 999;
	padding: 10px;
	border: 1px dashed red;
	color: red;
	font-weight: bold;
	background-color: #00FFFF;
}
	
/* BUTTONS & DIALOGS */
	
button.full {
	width: 186px;
	}

button.full div.dijitInline {
	width: 173px;
	}

button.half {
	width: 91px;
	}

button.half div.dijitInline {
	width: 84px;
	}
/*
div.dijitDropDownButton button {
	width: 90px;
	radius: 4pt;
	-moz-border-radius: 4pt;
	text-align: left;
	padding-top: 0px;
	font-size: 8pt;
	}
*/
button.third div.dijitInline {
	width: 65px;
	}

button.small {
	width: 30px;
	}

button.small div.dijitInline {
	width: 25px;
	}
	
div.dijitButton button div.dijitInline center {
	text-align: left;
	}

div.dijitButton button div div.icon,
div.dijitButton button div img.icon {
	float: left;
	margin-right: 3px;
	}

div.dijitButton button div div.right,
div.dijitButton button div img.right {
	float: right;
	}

div.dijitButton button div div.label {
	height: 12px;
	}

div.dijitButton button div div.color {
	width: 10px;
	height: 10px;
	border: 1px solid black;
	background-color: #ffffff;
	}
	
div.dijitButton button {
	radius: 4pt;
	-moz-border-radius: 4pt;
	text-align: left;
	padding-top: 0px;
	font-size: 8pt;
	}

div.spacer {
	height: 5px;
}

div.dijitDialog {
	font-size: 8pt;
	}
	
/* LAYER LIST & CONTROLS */

#LayerListContainer {
	border: 1px solid #ddd;
	-moz-border-radius: 6pt;
	radius: 6pt;
	padding: 3px;
	margin: 4px;
	width: 177px;
	height: 120px;
	font-size: 10px;
	}
	
#LayerList {}

#LayerList .dojoDndContainerOver {}

#LayerList .dojoDndItem { 
	padding: 1px 3px 1px 3px;
	-moz-border-radius: 5pt 5pt;
	radius: 5pt; 
	border-top: 2px solid white;
	border-bottom: 2px solid white;
}

#LayerList .dojoDndItem .image {
	background-image: url('images/imagelayer.png');
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding-left: 18px;
}

#LayerList .dojoDndItem .text {
	background-image: url('images/textlayer.png');
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding-left: 18px;
}

#LayerList .dojoDndItemOver { 
	background-color: #ededed;
	cursor: pointer;
	border-top: 2px solid #ededed;
	border-bottom: 2px solid #ededed;
}

#LayerList .dojoDndItemSelected, 
#LayerList .dojoDndItemAnchor {
	background-color: #63b6ff;
	border-top: 2px solid #63b6ff;
	border-bottom: 2px solid #63b6ff;
	color: white;
}

#LayerList .dojoDndItemBefore {
	border-top: 2px solid #369;
}

#LayerList .dojoDndItemAfter {
	border-bottom: 2px solid #369;
}

.dojoDndAvatar, 
.dojoDndAvatarHeader, 
.dojoDndAvatarItem {
	display: none;
}

/* LAYER CONTROLS */

#LayerControls {
	border: 1px solid #ddd;
	-moz-border-radius: 4pt;
	radius: 4pt;
	padding: 5px;
	margin: 4px;
	width: 174px;
	height: 144px;
}

#LayerControls .summary {
	width: 174px;
	height: 12px;
	padding: 4px;
	border-bottom: 1px solid #ddd;
	font-size: 9px;
}

#LayerControls .summary img {
	vertical-align: middle;
	margin-right: 2px;
	float: left;
}

#LayerControls .summary span {
	float: left;
}

#LayerControls .summary .change {
	float: right;
	cursor: pointer;
	text-decoration: underline;
	padding-right: 2px;
/*	margin-right: 1px solid black;
*/	margin-right: 2px;
}

#LayerControls .summary .copy {
	float: right;
	cursor: pointer;
	text-decoration: underline;
	padding-right: 2px;
/*	margin-right: 1px solid black;
*/	margin-right: 2px;
}

#LayerControls .summary .delete {
	float: right;
	cursor: pointer;
	text-decoration: underline;
}

#LayerControls .bg {
	width: 174px;
	height: 105px;
	margin: 4px;
	background-image: url('images/layercontrols_bg.png');
	background-repeat: no-repeat;
	position: relative;
}

#LayerControls .control {
	background-repeat: no-repeat;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}

/* CANVAS */

#Canvas .bg {
	width: 550px;
	height: 440px;
	z-index: 1;
/*	background-image: url('images/TheGrid.jpg');
*/	background-color: #FFFFFF; 
	position: absolute;
	background-color: white;
}

#Canvas .template {
	width: 550px;
	height: 460px;
	z-index: 900;
	position: absolute;
}

#Canvas .layer {
	position: absolute;
}

#Canvas .selector {
	position: absolute;
	border: 1px dashed #333;
	z-index: 950;
}

#Canvas .selectorOversampled {
	border: 1px dashed #f30;
}

.CanvasActiveResize {
	position:absolute;
	top:0;
	left:0; 
	border: 1px dashed #abd;
	z-index: 950;
}

.dojoxResizeHandle {
	bottom: 1px;
	right: 1px;
}

#dLoader {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 999;
}

#dOversampled {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 999;
	padding: 10px;
	border: 2px dashed red;
	color: red;
	font-weight: bold;
	background-color: #fda;
}

/* PRODUCT SELECTOR */

#dProductSelector {
	margin: 0px;
	padding: 1px;
	max-width: 350px;
	overflow: auto;
}

#dProductSelector img {
	border: 2px solid white;
	cursor: pointer;
}

#dProductSelector img.selected {
	border: 2px solid #ccf;
}

#dProductSelector div {
	float: left;
	width: 92px;
	text-align: center;
	font-size: 10px;
}

#dProductSelector div div {
	float: none;
}

/* TEMPLATE SELECTOR */

#dTemplateSelector {
	max-width: 558px;
	width: 558px;
	overflow: auto;
	text-align: center;
}

#dTemplateSelector img {
	border: 2px solid white;
	cursor: pointer;
}

#templateSelectorList {
	width: 550px;
	height: 210px;
	border: 2px solid #ddd;
	overflow: auto;
/*	margin-right: 2px;
	padding: 5px;
	float: none;
	text-align: center;
	font-size: 10px;*/
}

#templateSelectorList div {
	margin: 3px;
	padding: 1px;
	float: left;
/*	cursor: pointer;*/
}

#templateSelectorList div img {
	float: none;
	border: 2px solid white;
	cursor: pointer;
}

#templateSelectorList div img.selected {
	border: 2px solid #ccf;
}

/* IMAGE SELECTOR */

#dImageLayerDialog {
	width: 493px;
	height: 185px;
	font-size: 11px;
}

#dImageLayerDialog .dijitFileInput{
	width: 100px;
	float: left;
}

#dImageLayerDialog .dijitFakeInput {
	width: 100px;
	float: left;
}

#dImageLayerDialog div.dijitFileInput {
	width: 150px;
}

#dImageLayerDialog div.dijitFileInputVisible {
	width: 120px;
}

/*#dImageLayerDialog .dijitInline .dijitFileInputText {
	width: 120px;
}


#dImageLayerDialog dijitButtonText {
	text-align: center;
}
*/
#dImageLayerDialog .bOpenRemoteSelector{
	float: right;
}

#dRemoteImageSelector {
	width: 700px;
	height: 405px;
	margin: 2px;
	text-align: center;
}

#imagePreviewContainer {
	width: 690px;
	height: 375px;
	padding: 2px;
	text-align: left;
	overflow: auto;
	border: 1px solid #ddd;
}

#imagePreviewContainer div {
	margin: 3px;
	padding: 1px;
	float: left;
}

#imagePreviewContainer div img{
	float: none;
	border: 2px solid white;
	cursor: pointer;
}

#imagePreviewContainer div img.selected {
	border: 2px solid #CC33FF;
}

/* ADD/EDIT TEXT DIALOG */

#dAddEditText {
	width: 294px;
	max-height: 250px;
}

#dAddEditText .row {
	width: 292px;
	max-height: 90px;
}

#dAddEditText .cell {
	width: 96px;
	height: 50px;
	float: left;
}

/* FONT SELECTOR */

#dFontSelector {
	width: 300px;
	height: 200px;
	overflow: auto; 
}

#dFontSelector div img {
	display: block;
	cursor: pointer;
}

#dFontSelector div {
	min-height: 30px;
	padding-bottom: 5px;
}

/* COLOR SELECTOR */

#dColorSelector {
	max-width: 300px;
	text-align: center;
}

/* FILE OPEN */
#dOpenFileDialog {
	width: 500px;
}

/** IMAGE UPLOADER **/

.dijitFileInput .dijitFakeInput .dijitFileInputText {
	cursor: pointer;
}

.dijitFileInput .dijitFakeInput .dijitFileInputButton {
	/* Cancel Button */
	display: none;
}