/****** general ******/

@import url('https://fonts.googleapis.com/css?family=Montserrat|Roboto+Condensed');
html, body { margin: 0; padding: 0; font-family: verdana,arial,tahoma; text-align: center; height: 100%; }

.content-wrapper { max-width:1366px; text-align: left; position: relative; margin: 0 auto; }

.msg-error { color: red; font-size: 11px; }
.msg-ok { color: green; font-size: 11px; }
.button { font-family: verdana; font-size: 18px; text-align: center;  padding: 7px 16px 7px 16px; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #fff; color: #006666; border: 2px solid #006666; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; text-transform: lowercase; margin: 0 5px 0 5px; }
.button:hover {  -webkit-box-shadow: 0px 0px 8px 0px rgba(0,102,102,1); -moz-box-shadow: 0px 0px 8px 0px rgba(0,102,102,1); box-shadow: 0px 0px 8px 0px rgba(0,102,102,1); }

#ad-block-300x600 { max-width: 300px; max-height: 600px; margin: 0px 5px 5px 5px; vertical-align: top; position: absolute; z-index: 31; }
.content-body { margin: 10px 0 0 315px; }

/****** work zone ******/

.content-body .ads { width: 96%; margin: 15px auto 10px auto; position: relative; z-index: 30; background-color: #ffffff; }
.content-body .ads .ads-1 { width: 100%; height: auto; margin: 0px 0px 10px 0px; text-align: center; display: none; min-height: 90px; }
.content-body .ads .ads-2 { width: 100%; height: auto; text-align: center; }

#content-preloader { background: url('/img/design/preloader.gif') center no-repeat; width: 32px; height: 32px; margin: 50px auto; }
.content-body .template-wrapper { width: 100%; text-align: left; padding: 25px 0 0 20px; min-height: 500px; box-sizing: border-box; position: relative; visibility: hidden; }

	/* for devices under 800px, when used detach()  */
.template-wrapper  h1 { color: #006666; font-size: 22px; font-family: verdana; font-weight: normal; padding:0; margin:0; }
.template-wrapper .breadcrumbs { color: #006666; font-size: 14px; font-family: verdana; text-align: center; width: 100%; display: inline-block; margin-bottom: 8px; }
.template-wrapper .breadcrumbs a { color: #006666; }
	/* --- */

.template-wrapper .template-image { display: inline-block; vertical-align: top; text-align: left; width: 100%; overflow: hidden; position: relative; background: url(/img/design/work-sheet_bg.jpg); }
.template-wrapper .template-image #trim-image { left:0px; top:0px; position:absolute; z-index:28; cursor: move; }
.template-wrapper .template-image #user-image { position:relative; z-index:27; }
.template-wrapper .template-image .template-editor-buttons { position: absolute; z-index: 29; left:0px; top:0px; height: 48px; text-align: center; width: 100%; background-color: rgba( 0, 0, 0, 0.45 ); padding: 7px 0 7px 0; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; display: none; }
.template-wrapper .template-image .template-editor-buttons .template-editor-button { margin: 0 7px 0 7px; cursor: pointer; height: 34px; }
.template-wrapper .template-image .template-editor-buttons .template-editor-button:hover { }

.template-wrapper .template-info { display: inline-block; vertical-align: top; margin: 5px 0px 0px 30px; text-align: left; width: 468px; }
.template-wrapper .template-info h1 { color: #006666; font-size: 22px; font-family: verdana; font-weight: normal; padding:0; margin:0; }
.template-wrapper .template-info .breadcrumbs { color: #006666; font-size: 14px; font-family: verdana; text-align: left; }
.template-wrapper .template-info .breadcrumbs a { color: #006666; }
.template-wrapper .template-info p { margin-top: 15px; font-size: 13px; color: #5c5c5c; font-family: verdana; line-height: 18px; width: 90%; }
.template-wrapper .template-info .ads-3 { max-width: 468px; margin: 15px 0 15px 0; overflow: hidden; }
.template-wrapper .template-info #choose-photo-button { margin-top: 7px; }

.addthis_inline_share_toolbox_470a { height: 42px; margin: 7px 0 7px 0; }

#create-image-warning { display: none; background: url('/img/design/icon-error.png') no-repeat left center; font-size: 14px; margin: 15px 0 0 0; }

/****** upload dialog  ******/

#upload-body-wrapper { position: fixed; z-index: 5000; top: 0; left: 0; background-color: rgba( 95, 95, 95, 0.5 ); width: 100%; height: 100%; display: none; box-sizing: border-box; }
#upload-body-wrapper #upload-wrapper { width: 600px; min-height: 240px; display: block; text-align: left; margin: 150px auto; background-color: #fff; padding: 5px 0px 10px 0px; -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.75); overflow: hidden; text-align: right; }

#upload-wrapper #upload-wrapper-close-button { margin: -20px 8px 0 0; font-size: 14px; color: #006666; cursor: pointer; font-weight: bold; display: inline-block; }
#upload-wrapper #upload-wrapper-close-button:hover { text-shadow: 1px 0px 10px rgba(0, 102, 102, 1); }
#upload-wrapper #delete-all-photos { margin: 0px 10px 0px; font-size: 12px; color: #006666; display: inline-block; cursor: pointer; line-height: 16px; background: url('/img/design/upload-tabs-icons/icon-delete-photos.png') left center no-repeat; padding-left: 20px; display: none; }

#upload-wrapper .upload-tab { font-size: 10pt; float: left;  height: 60px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-position: 50% 15px; background-repeat: no-repeat; width: 33.3%; padding-top: 35px; box-sizing: border-box; }
#upload-wrapper .tab-active { color: #006666; background-color: #ffffff; border-top: 1px solid #669999; }
#upload-wrapper .tab-inactive { color: #fff; background-color: #669999; cursor: pointer; border-right: 1px solid #e7e7e7; }
#upload-wrapper #tab-photos { background-image: url('/img/design/upload-tabs-icons/icon-tab-photos-active.png'); }
#upload-wrapper #tab-file { background-image: url('/img/design/upload-tabs-icons/icon-tab-file-inactive.png'); }
#upload-wrapper #tab-url { background-image: url('/img/design/upload-tabs-icons/icon-tab-url-inactive.png'); }

#upload-wrapper #upload-body { width: 100%; padding: 0px; margin: 0px auto; height: 100%; background-color: #ffffff; text-align: center; }

.photo-upload label#upload-button-label input[type="file"] { position: fixed; top: -1000px; }
.photo-upload #upload-button-label { display: inline-block; color: #fff; font-family: verdana; font-size: 20px; text-align: center; cursor: pointer; background-color: #006666; -webkit-border-radius: 4px;  -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #006666; font-size: 14pt; height: 45px; line-height:45px; width:200px;  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.photo-upload #upload-button-label:hover { background-color:#669999; }

#upload-wrapper #upload-note { color: #666; font-size: 8pt; margin-top: 15px; }
#upload-wrapper #upload-note img { width: 340px; height: 42px; }

#upload-body .photos-zone { margin-top: 0px; text-align: center; }
#upload-body .photos-zone #uploaded-photos-msg { height: 16px; text-align: center; display: none; margin: 40px auto; background: url('/img/design/icon-ok.png') no-repeat left 50%; padding-left: 25px; }
#upload-body .photos-zone #upload-photos-loader { width: 100%; background: url('/img/design/preloader.gif') no-repeat center; display: none; padding-top: 80px; background-color: #ffffff; height: 32px; }

#upload-body .photos-zone #uploaded-photos { margin: 15px 0px 10px 15px; }
#upload-body .photos-zone #uploaded-photos div { margin: 0; color: #006666; }
#upload-body .photos-zone #uploaded-photos #uploaded { display: inline; }
#upload-body .photos-zone #uploaded-photos #img-preview-list { width: 100%; text-align: left; margin: 0px 0 10px 0; }
#upload-body .photos-zone #uploaded-photos #img-preview-list .img-preview-list-item { margin-right: 6px; border: 1px solid #669999; padding: 1px; width: 120px; height: 120px; float: left; }
#upload-body .photos-zone #uploaded-photos #img-preview-list .img-preview-list-item { margin: 3px; border: 1px solid #669999; padding: 1px; width: 120px; height: 120px; float: left; }
#upload-body .photos-zone #uploaded-photos #img-preview-list .img-preview-list-item div { width: 120px; height: 120px; cursor:pointer; }

#upload-body form { padding: 0; margin: 0; }
#upload-body .file-zone { padding: 0px; display: inline-block; margin-top: 50px; }
#upload-body .file-zone-with-photos { margin-top: 10px; padding: 15px 0px 0px 0px; }
#upload-body .url-zone { padding: 20px 0 0 50px; }
#upload-body .url-zone #upload_url { border: 1px solid #006666; width: 60%; height: 20px; padding-left: 3px; padding-top: 3px; padding-right: 6px; vertical-align: top; }
#upload-body .url-zone #do_upload_url { background: #006666; height: 25px; width: 106px; text-align: center; color: #fff; font-size: 10pt; padding-top: -20px; cursor: pointer; border: none; }

/******** progress bar *********/

#progress-wrapper { height: 15px; display: none; padding: 30px 0px; font-size: 12px; text-align: center; width: 98%; margin: 0 auto;}
#progress-wrapper #progressbar { width: 100%; display: inline-block; margin-top: 5px; height: 10px; }
#progress-wrapper #progress { margin-left: 10px; display: inline; }

@media screen and (max-width: 1280px){

}
@media screen and (max-width: 1024px){
	#ad-block-300x600 { display: none; }
	.content-body { margin: 10px 0px 0px 10px; }
	.content-body .template-wrapper { min-height: 450px; padding: 15px 0 0 10px; }
	.template-wrapper .template-info { max-width: 350px; }
	.template-wrapper .template-info .ads-3 { width: auto; margin: 15px 0 15px 0; }
}

@media screen and (max-width: 768px){
	#upload-body-wrapper #upload-wrapper { width: 480px; min-height: 360px; margin: 80px auto; }
	.content-body { margin: 10px 0 0 0; width: 100%; }
	.content-body .template-wrapper { padding: 5px 0 0 0; text-align: center; width: 100%; }
	.template-wrapper .template-image { margin-bottom: 10px; }
	.template-wrapper .template-info { display: block; margin: 0 auto; text-align: center; }
	.addthis_inline_share_toolbox_470a { margin: 0; }
	#create-image-warning { margin: 15px auto; }
}

@media screen and (max-width: 480px){
	.content-body .ads .ads-1 { display: block; max-height: 60px; width: 90%; }
	.content-body .ads .ads-2 { display: none; }
	.template-wrapper .template-info .ads-3 { display: none; }
	.header-wrapper .top-menu-wrapper .top-menu-bg-img { height: 100px; width: 720px !important;}
	.content-body { text-align: center;  margin: 0 auto 30px auto; width: 96%; }
	.content-body .ads { height: auto; }
	.content-body .template-wrapper { width: 100%; height: auto; text-align: center; padding: 0; margin-top: 50px; }
	.template-wrapper .template-info { width: 100%; display: block; margin: 0 auto; text-align: center; }
	.template-wrapper .template-info .breadcrumbs { text-align: center; }
	.template-wrapper .template-info p { text-align: left; margin: 15px auto 15px auto; width: 80%; }
	.template-wrapper .template-image { display: block; margin: 15px auto; }
	
	.button { box-sizing: border-box; width: 96%; border: 0px; background: #006666; color: #fff; border-radius: 2px; padding: 15px 0 15px 0px; margin: 2px auto; }

	#upload-body-wrapper #upload-wrapper { width: 360px; margin: 50px auto; }
	#upload-body .file-zone { padding: 0; width: 99%; }
	.photo-upload #upload-button-label { width: 100%; border-radius: 2px; border: 0px; }

	#upload-body .url-zone { padding: 20px 0 0 20px; }
	#progress-wrapper { text-align: center; width: 80%; margin: 0 auto; padding: 40px 0; }
	#progress-wrapper #progressbar { width: 100%; }
}

@media screen and (max-width: 414px){
}

@media screen and (max-width: 375px){
	#upload-body .photos-zone #uploaded-photos-msg { padding-left: 15px; width: 60%; }
}

@media screen and (max-width: 360px){
	.template-wrapper  h1 { font-size: 16px; }
	.template-wrapper .breadcrumbs { font-size: 13px; }
	#upload-body-wrapper #upload-wrapper { width: 340px; min-height: 360px; }
	#upload-wrapper #upload-note img { width: 300px; height: 37px; }
}
@media screen and (max-width: 320px){
	.button { display: block; margin: 10px auto; width: 70%; }
	#upload-body-wrapper #upload-wrapper { width: 300px; min-height: 380px; }
	#upload-body .url-zone #do_upload_url { width: 76px; }
}
@media screen and (max-width: 240px){
	.header-wrapper .fb-like-button { top: 50px; left: 5px; z-index: 100; }
	.template-wrapper .template-info h1 { margin: 0 auto 5px auto; }
	#upload-body-wrapper #upload-wrapper { width: 240px; height: 240px; margin: 0px auto; }
	#upload-body .file-zone { padding: 20px 0 0 5px; }
	#upload-wrapper #upload-note img { width: 240px; height: 30px; }
	#upload-body .url-zone { padding: 20px 0 0 5px; }
	.template-wrapper .template-image .template-editor-buttons { height: 34px; }
	.template-wrapper .template-image .template-editor-buttons .template-editor-button { height: 20px; }
	#upload-wrapper .upload-tab { font-size: 8pt; }
	#upload-body .photos-zone #uploaded-photos #img-preview-list .img-preview-list-item { width: 60px; height: 60px; }
	#upload-body .photos-zone #uploaded-photos #img-preview-list .img-preview-list-item div { width: 60px; height: 60px; }
	.msg-ok { font-size: 10px; }
	.msg-error { font-size: 10px; }
	.template-wrapper .template-info p { width: 90%; }
}