/* 
    Document   : DREAMUPTIME
    Created on : August 25, 2024, 1:48:21 PM
    Author     : Astrid
    Description:
        Purpose of the stylesheet follows.
*/

#maincontent {
	background-color: #cdcdcd;
	background-image: none;
}

#contentdesigncenter {	
	background-color: #cdcdcd;
	margin: 15px auto; 
}

#contentdesigncenter body {
    color: #000;
    margin: 0;
    padding: 0;
	text-align:center;
}

canvas { 
    background-color: #fff;
    border: 1px solid black;	
}


#designpage {
	margin: 0px 370px 0px auto; 
	padding: 0px;
	display: inline-block; 
}


#canvas_container {
/*	float: left;  */
	padding: 0px;
	display: inline-block; 
}


 /* Palettes Font  */
.palette h1, .palette h2, .palette h3, .palette h4, .palette h5, .palette p, .palette a, .cp-color-picker {    
	font-family: Arial, Helvetica, sans-serif;
	color: #777777;
}
 
 .inputtypetext, .inputtypetextarea {
	font-family:  Arial, Helvetica, sans-serif, Verdana, Tahoma, Geneva, sans-serif;
	font-weight: normal;
	line-height: 1.3em;
	color: #000000;
	padding: 4px 5px 0px 5px;
}



button {
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand; /* for IE 5.x */
}

a, * { outline: none; } /* removes blue line over links, and all elements */


/*------------ ROLL-OVER: eye, elements buttons, image buttons, color pickers -----------*/
#elements ul li .visible:hover, .icon:hover, .toggleOFF:hover, .toggleON:hover, .listbutton:hover, #settingsright:hover, #elementstabs button:hover {
	background-color: #FFF;
}


#elements ul li .visible:active, .icon:active, .toggleOFF:active, .toggleON:active, .listbutton:active, #settingsright:active, .palette ul li.layer:active {
	border-color: #999 #FFF #FFF #999;
}





/* ---- CONTROLS ---- */

#controls {
	position: absolute;
	width: 350px;
/*	float: left;	*/
	margin: 0px 0px 0px 20px;
	padding: 0px;
	display: inline-block; 
	border-radius: 15px;
}

.palette {
	position: relative;
	font-size: 10px;
	padding-bottom: 9px; /* allows column central line to touch base */
	margin-bottom: 8px;
}

.palette, .cp-color-picker {
	background-color: #e6e6e6;
	border-radius: 10px;
	border: 1px solid #999;

}

.palette h1 {
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #b4b4b4;
    margin: 0px;
    padding: 9px 0 5px 0;
}

.palette h2 {
	font-size: 12px;
	text-transform: uppercase;
	margin: 1px 0;
}

.palette h3, .cp-panel {
	font-size: 10px;
	font-weight: normal;
	line-height: 10px;
	margin-top: 0px;
	padding-bottom: 5px;
}

#options {
    position:relative;
}


.palette ul {
    list-style-type: none;
	margin: -2px 10px 2px 10px;
	padding: 0;
}


/*------------ PALETTE Layers LIST items ----------*/

.palette ul li {
	cursor: pointer;
	text-align: left;
	height: 24px;
}

.palette ul li.title {
	text-align:left;
	height: 12px;
	margin: 7px 0 3px 0;
}
 
.palette ul li.layer {
	background-color: #cdcdcd;
	padding: 1px 0;
/*	padding: 1px 0;
	margin-top: 1px; */ 
} 

.palette ul li.layer:hover, .palette ul li.layer:active {
	background-color: #f0ede3; /* light golf when rollover */
}

.palette ul li.selected, .palette ul li.selected:hover {
	background-color: #92cff8;  /* light blue when selected */
}

.palette ul li.layer, .cp-xy-slider, .cp-z-slider {
	border: 1px solid #b4b4b4;
	border-radius: 4px;
	margin: 2px;
}

.layer {
}
	
.layer h3 {
	display: inline;
	float: left;
	padding-left: 4px;
	padding-bottom: 0px;
}


/*------------ ELEMENTS input box width ----------*/

/* ELEMENT Tabs */
#elementstabs {
	margin-top: 2px;
	height: 16px;
}

#elementstabs button {
	border: 1px solid #b4b4b4;
	border-radius: 5px 5px 0 0;
	padding-bottom: 0;
	border-bottom-width: 0;
	background-color: #e6e6e6;
}

#elementstabs button h2 {
	line-height: 1em;
}

button#texttab {
	position:relative;
	z-index: 10;

}
button#imagetab, button#logotab {
	position:relative;
	z-index: 0;	
}

.palettescroll  {
	position:relative;
	border-top: 1px solid #b4b4b4;
/*	background-color: #e6e6e6; */
	z-index: 9;
}
	
#textscroll.palettescroll, #imagescroll.palettescroll, #logoscroll.palettescroll  {
	height: 328px;
	padding: 5px 0;
	overflow-y: scroll;
	position: relative;
}

#imagescroll.palettescroll, #logoscroll.palettescroll  {
	display: none;
}

/*	Scrool for iPad */

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
	background-color: #FFF;
}
::-webkit-scrollbar-track { 
	background-color: #FFF;
	-webkit-box-shadow: 0px 0px 1px #cdcdcd; 
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
	border: 3px solid #FFF; 
	background-color: #cdcdcd;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #999;
}



#elements.palette { /* makes right-bottom Palette square */
	position: relative;
	border-radius: 10px 10px 0 10px;
	padding-bottom: 0px;
}

#elements ul li input {
    width: 228px;
    position: absolute;
    left: 50px;
  /*  margin-top: 1px; */
    display: inline;
/*    height: 18px; */
	text-align: left;
}

#elements ul li .inputtypetext, #elements ul li .inputtypetextarea {
	border-width: 1px;
	border-style: solid;
	border-top-color: #b4b4b4;
	border-right-color: #fff;
	border-bottom-color: #fff;
	border-left-color: #b4b4b4;
}

#elements .title {
	margin-bottom: 0;
}


#imagetip.tip {
	margin: -10px 40px;
}

.tip {
	padding: 15px 10px;
	background-color: #f0ede3;
		/*	background GRADIENT */	
	background-image: -webkit-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Safari */
	background-image: -o-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Opera 11.6 to 12.0 */
	background-image: -moz-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Firefox 3.6 to 15 */
	background-image: radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Standard syntax, must come last */	

    position:absolute;
    text-align:center;
	border-radius: 20px;
	border: 10px solid #FFF; 

    z-index: 11;
	
	box-shadow:0px 15px 60px -10px #000;

}



.tip h3 {
	font-family:  'Amaranth',Verdana, Tahoma, Geneva, sans-serif;
	font-size: 17px;
	font-weight: bold;
	padding-bottom: 0;
	color: #459bd2;
}

.tip h4 {
	font-family: 'Amaranth',Verdana, Tahoma, Geneva, sans-serif;
	font-weight: normal;
	font-size: 13px;
}

/*------------ CREDIT BLOCK ----------*/

.palette ul li.highblock {
	height: 87px;
}

#elements ul li .inputtypetextarea {
	height: 81px;
	vertical-align: top;
	width: 228px;
    position: absolute;
    left: 50px;
	overflow-y: scroll;	
	resize: none;
}
	
#elements ul li .imageLoader {
	padding-top: 2px;		
}	


/*------------ eye ----------*/

#elements ul li .visible {
	float: right; 
	margin: 1px 4px 0px 0px;
	width: 21px;
	height: 21px;
	background-image: url(icons/eye.png);
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 3px;
	border: 1px solid;
	border-color: #FFF #999 #999 #FFF;
}

/*------------ icons ----------*/

.icon, .toggleON, .toggleOFF {
	width: 19px;
	height: 19px; 
	display:inline-block;
	position: absolute;
	top: 4px;
	left: 0px;
	margin:0px;
	padding: 2px;
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand; /* for IE 5.x */
	border-radius: 5px;
	border: 1px solid;
	border-color: #FFF #999 #999 #FFF;
}

.toggleON {
	background-color: #FC0;
}


/* position left of elements' icons in px: 10 - 40 - 70 -ELEMENTS- 255 - 285 - 315 */

#addtext {
/*	background-image: url(icons/addtext.png); */
	float: left;
	left: 10px;
	}
	
#addimage {
/*	background-image: url(icons/addimage.png); */
	float: left;
/*	left: 40px;  */
	left: 10px;
	display:none;
	}
	
#addlogo {
/*	background-image: url(icons/addimage.png); */
	float: left;
/*	left: 70px;  */
	left: 10px;
	display:none;
	}

#elementup {
/*	background-image: url(icons/elementup.png); */
	float: left;
	left: 255px;
	display:none;
}

#elementdown {
/*	background-image: url(icons/elementdown.png); */
	float: left;
	left: 285px;
	display:none;
}

#trash {
/*	background-image: url(icons/trash.png); */
	float: left;
	left: 315px;
}


/* icons in palette options */

#imagesize {
	padding-top: 5px; 
	height: 14px;
/*	background-color: #FC6; */
}


.listbutton {
	width: 19px;
	height: 19px; 
	padding: 2px;
	display:inline-block;
	position: absolute;
	margin: 7px 0 -5px 0;
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand; /* for IE 5.x */
	border-radius: 5px;
	border: 1px solid;
	border-color: #FFF #999 #999 #FFF;
}

#grid {
	float: left;
	left: 10px;
}

#magnifyingglass {
	float: left;
	left: 40px;
}

#enlargeimage  {
	float: left;
	left: 100px;
}

#reduceimage {
	float: left;
	left: 70px;
}


/*------------ OPTIONS palette ----------*/

.paletteitem h3 {
	display: inline;
}


    /* vertical space between items*/
#text4 { 
	margin: 5px 0 0 0;
}
#image_fill, #image_filter_color { 
	margin: 3px 0 0 0;
}

/*
#backColor {
	margin-top: -3px;
}
*/

#options1 {
	height:20px;
	padding: 6px 0 2px;
	border-bottom: 1px solid #b4b4b4;
}

#optionsleft,#optionsright {
	height: 139px;
}

.dim_on	{
	opacity: 0.25;
}

.dim_off	{
	opacity: 1;
}

#optionsleft {
	float: left;
	width: 182px;
}

#optionsright {
	float: right;
	width: 165px;
	/* background-color: #9C0; */
	border-left: 1px solid #b4b4b4;
}


#palettefooter {
	clear:both;
	height: 1px;
	padding: 0px;
	margin: -15px 0 -10px 0;
	visibility:hidden;
}

#optionimagesize, #optionelements {
	border-bottom: 1px solid #b4b4b4;
	padding-bottom: 0px;
}

#optionshadow {
	border-bottom: none;
	padding-bottom: 0px;
}

#optiontext {
/*	padding-bottom: 13px; */
}

#optionimage {
	padding-bottom: 2px;
	display: none;
}

#image_filter {
	margin-bottom: -5px;
}

#shadow1 {
/*	padding-bottom: 8px;	*/
}

#shadow2 {
		
}

#shadow3 {
/*	padding-top: 45px; */
}


#zoomcontrol h2, #zoomcontrol h3, #backColor h2, #backColor h3 {
	display: inline;
}


/* --------------- POSTER SETTINGS palette ----------- */

#settingsleft {
	float: left;
	width: 180px; 
	height: 40px;
	margin: 0;
	padding-top: 10px;
	border-right: 1px solid #b4b4b4;
}

#psize, #pres {
	display:inline-block;
	position: absolute;
	left: 70px;
	margin: -3px 0 0 0;

}

#settingsright {
	float: right;
 	width: 167px;
	height: 50px;
	padding: 0 auto;
	margin: 0;

}

#settingsright h2 {
	font-size: 16px;
	text-align:center;
	padding: 1px 0 0 0;
	margin: 4px 0 -5px 0;
}

#settingsright ul li {
	height: 15px;
}


#settingsfullwidth {
	border-top: 1px solid #b4b4b4;
	padding: 3px 0 3px 0;
	width: 100%;
	float: left;
	text-align: center;
}

#pprice {
	margin: 5px 0 0;	
}

#orderyourpdf input[type="submit" i] {
	background-color: #3ea8e5;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#44b1e8),to(#3098de));
    background-image: -webkit-linear-gradient(top,#44b1e8,#3098de);
    background-image: linear-gradient(-180deg,#44b1e8,#3098de);
    box-shadow: 0 1px 0 0 rgba(46,86,153,.15),inset 0 1px 0 0 rgba(46,86,153,.1),inset 0 -1px 0 0 rgba(46,86,153,.4);
    border-radius: 4px;
	
	border:0 none;
    cursor:pointer;
	width: 100%;
	
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
    text-transform: none;    
	padding: 3px 0 2px;
	margin: 5px 0 0;
}

/* --------------- "input field" and "select" sizes ----------- */
/*
input[type="color"] {
    width: 48px; 
	height: 17px;		
	margin: 2px 0 0 0;
	border-radius: 5px;
	background-color: transparent;
	border: 1px solid;
	border-color: #FFF #999 #999 #FFF;
}
*/

/* New color picker */
.color {
    width: 51px; 
	height: 17px;		
	margin: 0;
	border-radius: 5px;
/*	background-color: transparent; */
	border: 1px solid;
	border-color: #FFF #999 #999 #FFF;
	font-size: 0px;
	line-height: 26px;
}

#bColor {
    margin-top: -1px;
    width: 176px;
    line-height: 30px;
}


#sColor {
	width: 68px;
}

#ifilterColor {
	width:	98px;
}

input[type="number"] {
	margin-right: 5px;
	padding-bottom: 2px;
}

#shadow2 input[type="number"] {
    width: 31px;
}

#sOffsetY {
	margin-right: 0px;
}

#text3 input[type="number"] {
    width: 35px;
}



select {
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand; /* for IE 5.x */
}

#elements1 select {
	width: 100px;
}

#shadow1 select {
	width: 97px;
}

#postersettings select {
	width: 98px;
}

#text1 select {
	width: 132px;
}

#text2 select {
	width: 108px;
}

#text4 select {
	width: 107px;
}

#image_fill select {
	width:	113px;
}

#image_filter select {
	width:	129px;
}

/* Dialog box over page */

#warningbox, #thankyoubox {
	display: none;
	top: 300px;
}

#floatingbox {
	top: 180px;
}

#floatingbox, #warningbox, #thankyoubox {
	
	background-color: #f0ede3;
		/*	background GRADIENT */	
	background-image: -webkit-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Safari */
	background-image: -o-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Opera 11.6 to 12.0 */
	background-image: -moz-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Firefox 3.6 to 15 */
	background-image: radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Standard syntax, must come last */	

	width: 400px;
	margin-left: -212px; /* compensates for padding and border */

    position:absolute;
	left: 50%;	

	padding: 0 2px;
    text-align:center;
	border-radius: 20px;
	border: 10px solid #FFF; 

    z-index: 1000;
	
	box-shadow:0px 15px 60px -10px #000;
}

#warningbox h1 {
	color: #cd1c00;
}


#floatingbox h3 {
	margin-bottom: 0;
	font-weight: bold;	
}

#floatingbox h4 {
	margin: 1px 0 5px 0;
}
	
.smaller {
	font-size: 14px;
	margin:0;
}
	
#floatingbox button {
	margin: 0 0 15px 0;
}	

#fontloader {
	color: #000;
	margin: 15px 0;
}

.placeholder {
	margin: 0;
	font-size: 12px;
}

.categorie {
	background-color: #FFF;
	font-size: 12px;
	text-transform: uppercase;
	margin: 5px 15% 0px 15%;
	border-radius: 10px;
}

/* Color Picker */
.cp-color-picker {box-sizing:border-box; width:273px; z-index: 1000; box-shadow:0px 15px 60px -10px #000; position:absolute; padding:10px 10px 8px 10px; cursor:default;}
.cp-color-picker .cp-panel {line-height: 21px; float:right; padding:0 1px 0 8px; margin-top:-1px}
.cp-xy-slider:active {cursor:none;}
.cp-panel input {color:#000; font-size:12px; width:32px; height:12px; padding:2px 3px 1px; float: right; text-align:right; line-height:12px; background:#fff}
.cp-panel hr {margin:0 0 2px; border:0}
.cp-panel input.cp-HEX {width:48px;}

.cp-color-picker>div {position:relative; overflow:hidden}
.cp-xy-slider {float:left; height:148px; width:148px; background:linear-gradient(to right,#FFF,rgba(255,255,255,0));}
.cp-white {height:100%; width:100%; background:linear-gradient(rgba(0,0,0,0),#000)}
.cp-xy-cursor {position:absolute; top:0; width:10px; height:10px; margin:-5px; border:1px solid #fff; border-radius:100%}
.cp-z-slider {float:right; margin-left:6px; height:148px; width:20px; background:linear-gradient(red 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}
.cp-z-cursor {position:absolute; margin-top:-4px; width:12px; border:4px solid #fff; border-color:transparent #fff}

.cp-alpha {clear:both; width:100%; height:16px; margin:6px 0; background:linear-gradient(to right,#444,rgba(0,0,0,0))}
.cp-alpha-cursor {position:absolute; margin-left:-4px; height:100%; border:4px solid #fff; border-color:#fff transparent}