* {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
}
menu,a,a:link,ul,li,ol {
	display:block;
	text-decoration:none;
	list-style:none;
	padding:0;
	margin:0;

}

body {
	background:#2248B5;
	font-family:'GillSansMTProBook';
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	min-width:100%;
	min-height:100%;
	overflow: hidden;
}



/* the canvases container */
.canvas-bag {
	position: relative;
	float: none;
	z-index: 9998;
	left: 15%;
	margin-top: 100px;
	width: 422.4px;
	height: 633.6px;
}


/* wrapper of canvases element (for the zoom subcontainer) */
.section {
	background:#E3E2E0;
	position:relative;
	width:100%;
	min-width:1000px;
	min-height:900px;
	height:100%;
	float:none;
	overflow: visible;
}

/***************** each of the canvas ***************/
.canvases {
	position:absolute;
	top:0;
	left:0;
	width:422.4px;
	height:633.6px;
	width:844.8px;
	height: 1267.2px;

	/*for display*/
	width: 422.4px;
  height: 633.6px;
}

/***************** the user input section ***************/
#input,#input-sp,#input-postcard {
	position:	absolute;
	padding:		15px 30px 0px 15px;
	right:	100px;
	top:		100px;
	background:	#E3E2E0;
	width:		330px;
	height:	auto;
	max-height:650px;
	z-index:		9998;
	border:		1px solid rgba(0,149,58,.2);
	transition:	background .5s ease;
}

#select-entry {
	margin-top: 30px;
}

/***************** the handle elements in the input section ***************/
.handler {
	text-align: center;
	font-size: 22px;
	width: 35px;
	height: 35px;
	z-index: 9999;
	color: #00953A;
	position: absolute;
	top: -15px;
	left: -15px;
	padding-top: 0px;
	cursor: pointer;
	position: relative;
	float: left;
	margin-right: 20px;
	line-height: 40px;
}
}

.handler:active,.handler:hover {
	background:#00953A;
	color:white;
}

#topbar {
	height:20px;
}

#topbar li:last-child {
	margin-right: 0px;
}

/***************** the input labels ***************/
label {
	font:13px 'GillSansDisplayMTPro-Bold';
	color:#00953A;
	float:left;
	position:relative;
	left:0;
	text-align:left;
	width:100%;
	height:20px;
	margin-top: 30px;
}

/***************** the input area ***************/
input,textarea {
	font:15px 'GillSansMTPro-Medium';
	width:100%;
	border:none;
	border-bottom:1px solid #00953A;
	background:none;
	color:#00953A;
	display:block;
	float:left;
	position:relative;
	width:100%;
	padding-bottom:5px;
	margin-top:5px;
	resize: none;
}

/***************** the active input elements ***************/
input:focus,textarea:focus,input:active,textarea:active {
	background:white;
	border:none;
	outline:none;
	padding-bottom:5px;
	margin-top: 5px;
}

/***************** the enter image button style ******************/
#enter-image {
	font:14px 'GillSansMTPro-Medium';
	background:none;
	border-bottom: none;
}

/***************** the raster,saves as buttons ******************/
.bottom-button {
	font:14px 'GillSansMTPro-Medium';
	border:none;
	width:100px;
	height:30px;
	color:white;
	background:#00953A;
	border-radius:4px;
}

.bottom-button:hover {
	color:#00953A;
	background:white;
}

.bottom-button:active {
	outline: #00953A;
}

/***************** the SIMPLE POSTER input elements ***************/
#select-entry {
	height:30px;
	margin-top:15px;
}

#button-wrapper-sp {
	height:auto;
	margin:40px 0 50px 0;
}

#textarea {
	height:auto;
	resize: none;
}

/***************** the reset view button (for the canvas) ******************/
#reset button,#reset-sp button {
	font:14px 'GillSansMTPro-Medium';
	position:relative;
	top:-12px;
	right:10px;
	width:100px;
	height:30px;
	z-index:9998;
	background:white;
	color:#00953A;
	border:none;
	border-radius:4px;
	outline:none;
	padding:0;
	margin:0;
	position:relative;
	float:left;
	clear:none;
	margin-right:30px;
}

#reset button:hover,#reset-sp button:hover {
	background:#00953A;
	color: white;
}

/***************** the TEXTAREA wrapper element ******************/
#bodytext {
	height: 250px;
}

/***************** the TEXTAREA itself ******************/
textarea {
	border:1px solid #00953A;
	height:150px;
	display: block;
}

/*****************canvases wrapper***************/
#top-wrapper {
	float:none;
	z-index:100;
	width:900px;
	height:900px;
	position:absolute;
	left:0;
	top:0;
	overflow:visible;
	/*		margin-left:200px;			/* 1/5 of render size 				*/
}

#canvases-wrapper {
	position:relative;
	float:none;
	z-index:9998;
	left:30%;
	margin-top:100px;
	width:422.4px;
	height: 633.6px;
	/*1/5 of render size*/
}

/***************** wrapping the entire page ***************/
.wrapper {
	background:#E3E2E0;
	font-family:'GillSansMTPro-Book';
	position:absolute;
	width:100%;
	height: 100%;
}

/***************** WRAPPER AROUND ELEMENTS ******************/
.entry {
	position:relative;
	float:left;
	clear:both;
	width:100%;
	height:100px;
	text-align:left;
}

/************* placeholder text *******************/

::-webkit-input-placeholder {
	font:15px 'GillSansMTPro-Medium';
	color:#00953A;
	opacity: .5;
}

/******************* DAS LOGO ***************************/
#logo {
	width:195px;
	height:28px;
	position:fixed;
	left:0;
	top:0;
	z-index: 9999;
}

/******************* FOR THE MENU ***************************/
/*the overall menu container*/

.menu-top {
	width:		150px;
	height:		28px;
	padding:		0px 10px 0px 0px;
	text-align:	right;
	color:		#00953A;
	position:	fixed;
	left:		200px;
	top:			0;
	z-index:		9999;
	font-family:'GillSansMTPro-Medium';
	background: 	white;
}
/*	the sub-open container 	*/
.menu-2 {
	width:100%;
	height:auto;
	display:block;
	cursor:pointer;
	background:white;
	position:absolute;
	right:0;
	top:10px;
}
.menu-2 p {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	padding-right:20px;
	margin-top:-7px;
}
.menu-3 {
	width:100%;
	background:white;
	color:#00953A;
	position:absolute;
	right:0;
	padding-top:15px;
}
.menu-3 div {
	width:100%;
	height:40px;
	background:white;
	color:#00953A;
}
.menu-3 div:hover {
	color:#00953A;
}
.menu-3 div a {
	display:block;
	width:100%;
	height:100%;
	padding:6px 20px 0px 0px;
	color:#00953A;
	background:white;
}
.menu-3 div a:hover {
	background:#00953A;
	color:white;
}
#menu-sp {
	border-left:1px solid #00953A;
	border-right:1px solid #00953A;
	border-bottom:1px solid #00953A;
}
#menu-sp:hover {
	border:none;
}
#example {
	position:absolute;
	left:15px;
	bottom:0px;
	background:none;
	z-index:9999;
}
#ejemplo,#borrar {
	display:block;
	clear:both;
	border:none;
	font:14px 'GillSansMTPro-Medium';
	color:#00953A;
	background:white;
	margin-top:10px;
	padding:5px 15px;
	width:100px;
	height:30px;
	position:absolute;
	left:0;
	top:0;
}
#borrar {
	color:white;
	background: #2248B5;
}
/*this are the move,minimize,transparent buttons*/
.top-hover {
	position:absolute;
	right:-31px;
	top:-50px;
	text-align:right;
	padding:7px 15px;
	background:white;
	color:#00953A;
	font-size: 16px;
}
		 /* this is the tooltip elements 	(when you focus on the input panels)*/
.tip-title,
.tip-subtitle,
.tip-body
	{
	background:white;
	color:#00953A;
	width:210px;
	height:40px;
	padding:10px 20px;
	margin:0;
	position:absolute;
	text-align:right;
	left:-260px;
	top: 50px;
}

/* the arrow element */
.tip-title:after,
.tip-title:before,
.tip-subtitle:after,
.tip-subtitle:before,
.tip-body:after,
.tip-body:before
	{
	left:100%;
	top:50%;
	border:solid transparent;
	content:" ";
	position:absolute;
	pointer-events:none;
}
.tip-title:before,
.tip-subtitle:before,
.tip-body:before
	{
	border-left-color:white;
	border-width:20px;
	margin-top:-20px;
	}

/* the info contents */
#english,
#espanol {
	position:absolute;
	top:30px;
	right:30px;
	width:100px;
	height:30px;
	text-align:center;
	cursor:pointer;
	color:#2248B5;
	font-size:20px;
	border-bottom: 1px solid #2248B5;
}
/* the overlay screen (when clicking info) */
#overlay {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#2248B5;
	z-index:9999;
	opacity: .7;
}
/* the info panel wrapper */
#info-panel {
	z-index:9999;
	width:80%;
	height:80%;
	background:white;
	color:#2248B5;
	position:absolute;
	left:10%;
	top:10%;
	padding:5% 10% 10% 5%;
	font-family:'GillSansMTPro-Book';
	overflow-y:auto;
}

#notas,#notas-engrish {
}

#notas h2,#notas-engrish h2 	 {
	font-family:'GillSansDisplayMTPro-Bold';
	font-size:18px;
	padding:0;
	margin:0;
}
	#notas h3,#notas-engrish h3 {
	margin-bottom:60px;
	line-height:30px;
	border-bottom:1px solid #2248B5;
	padding-bottom:30px;
	padding-left:30px;
}
.reminder {
	color:#00953A;
	border-bottom:none;
	font-size:18px;
}
.bold {
	font-family:'GillSansDisplayMTPro-Bold';
}
#notes {
	position:fixed;
	z-index:9999;
	width:40px;
	height:40px;
	border-radius:40px;
	padding-top:6px;
	background:white;
	left:15px;
	bottom:15px;
	text-align:center;
	font-size:20px;
	color:#2248B5;
	cursor:pointer;
}
#cerrar {
	position:absolute;
	top:20px;
	right:20px;
	width:100px;
	height:100px;
	color:white;
	z-index:9999;
	cursor:pointer;
	text-align:center;
	font-size:100px;
}

@media all and (max-width:1024px),(max-height:768px) {
	#input,#input-sp,#input-postcard {
		right:10px;
		top:50px;
	}


	#canvases-wrapper {
		left:15%;
		margin-top:50px;
	}
}
@media all and (max-width:960px),(max-height: 640px) {

}