body { margin: 0; padding: 20px 20px 30px; min-width: 800px; box-sizing: border-box; font: 16px Arial; color: #6D6E71; }
h2 { font: italic 35px Georgia; margin: 0 0 16px; }
h3 { font: italic 28px Georgia; }
h4 { font: italic 24px Georgia; margin: 0; }
h5 { font: italic 20px Georgia; }
h6 { font: italic 18px Georgia; margin: 0; }
a { color: #DC6900; text-decoration: underline; }
a:hover { color: #E0301E; }
button { height: 40px; min-width: 100px; border: none; background: #E0301E; color: #FFF; font: 16px Georgia; padding: 0; cursor: pointer; transition: background .2s; vertical-align: middle; }
button:hover { background: #BF291A; }
button.small { height: 30px; font-size: 14px; min-width: 80px; }
input[type=text] { height: 30px; box-sizing: border-box; border-radius: 5px; border: 1px solid #DC6900; padding: 5px; font: 14px monospace; }
div.clear { clear: both; }

div#toolbarContainer { width: 100%; max-width: 1140px; height: 0; position: relative; margin: 0 auto; z-index: 1; }
div#customOptions { display: none; position: absolute; right: 340px; }
body.s0x0 div#customOptions { display: block; }
div#customOptions div { text-align: center; font-size: 12px; }
div#customOptions img#keepAspectRatio { vertical-align: middle; cursor: pointer; }
div#customOptions input[type="text"] { width: 50px; height: 25px; }
div#breadcrumbs { position: absolute; right: 0; }
div#breadcrumbs div.button { display: inline-block; background: #C0BAA7; color: #FFF; font: italic 23px/35px Georgia; width: 40px; height: 40px; text-align: center; border-radius: 20px; margin-left: 10px; position: relative; z-index: 1; cursor: default; }
div#breadcrumbs div.bar { width: 20px; height: 5px; background: #C0BAA7; top: 18px; left: 47px; z-index: 0; position: absolute; }
div#breadcrumbs div.bar.two { left: 100px; }
div#breadcrumbs div.bar.three { left: 155px; }

div#toolbarContainer > img { position: absolute; cursor: pointer; display: none; opacity: .4; }
div#toolbarContainer > img:hover { opacity: .7; }
div#toolbarContainer img#hero1360 { right: 500px; }
div#toolbarContainer img#hero1920 { right: 450px; }
body.heroPreview div#toolbarContainer img.heroOption { display: block; }
body.heroPreview.s1600x900 div#toolbarContainer img#heroLevel2 {  opacity: 1; }
body.heroPreview.s1600x500 div#toolbarContainer img#heroLevel3 {  opacity: 1; }
body.heroPreview.hero1360 div#toolbarContainer img#hero1360 {  opacity: 1; }
body.heroPreview.hero1920 div#toolbarContainer img#hero1920 {  opacity: 1; }
div#toolbarContainer img#heroLevel2, div#toolbarContainer img#heroLevel3 { right: 390px; }
body.heroPreview div#toolbarContainer img#heroLevel2, body.heroPreview div#toolbarContainer img#heroLevel3 { opacity: 1; }
div#toolbarContainer img#preview { right: 340px; }
body.s0x0 div#toolbarContainer img#preview { right: 490px; }
body.cropPreview div#toolbarContainer img#preview { opacity: 1; }
div#toolbarContainer button#done, div#toolbarContainer a { position: absolute; right: 220px; display: none; }
div#toolbarContainer button#viewJPG, div#toolbarContainer button#viewPNG { position: absolute; right: 330px; display: none; }
body.png div#toolbarContainer button#viewJPG { display: block; }
body.jpg div#toolbarContainer button#viewPNG { display: block; }

body > section#uploadImage { display: none; }
body.uploadSection > section#uploadImage { display: block; }
body.uploadSection div#breadcrumbs div.button#breadcrumb1 { background: #DC6900; }
body.uploadSection.uploading > section#uploadImage > form, body.uploadSection.uploading > section#uploadImage > div { display: none; }
body.uploadSection.uploading > section#uploadImage #uploadProgressBar { display: block; }
body.uploadSection > section#uploadImage #uploadProgressBar { display: none; }
section#uploadImage { max-width: 1140px; margin: 0 auto; }
section#uploadImage #imageUploaderForm { position: relative; margin-top: 40px; }
section#uploadImage #imageUploaderForm #draggableBackground { background: rgba(220, 105, 0, .2); border: 2px dashed #DC6900; color: #404041; border-radius: 10px; width: 50%; height: 200px; margin: 0 25%; padding-top: 85px; position: absolute; top: 0; text-align: center; box-sizing: border-box; }
section#uploadImage #imageUploaderForm #imageUploader { display: block; background: #F00; width: 50%; height: 200px; opacity: 0; margin: 0 auto; cursor: pointer; }
section#uploadImage #uploadProgressBar { width: 50%; margin: 70px auto 0; }
section#uploadImage #uploadProgressBar div.progressBarContainer { width: 100%; height: 24px; border: 2px solid #DC6900; border-radius: 12px; overflow: hidden; }
section#uploadImage #uploadProgressBar div.progressBarContainer div.progressBar { width: 0; height: 100%; background: #DC6900; text-align: center; color: #FFF; font-size: 11px; line-height: 20px; }
section#uploadImage #youtube, section#uploadImage #externalURL { margin-top: 40px; }
section#uploadImage #youtube div, section#uploadImage #externalURL div { margin-top: 20px; }
section#uploadImage #youtube button, section#uploadImage #externalURL button { margin-left: 5px; }
section#uploadImage #externalURL input[type="text"] { width: 550px; }

body > section#selectUse { display: none; }
body.selectSection > section#selectUse { display: block; }
body.selectSection div#breadcrumbs div.button#breadcrumb1 { background: #EB8C00; cursor: pointer; }
body.selectSection div#breadcrumbs div.button#breadcrumb2 { background: #DC6900; }
body.selectSection div#breadcrumbs div.bar.one { background: #EB8C00; }
section#selectUse { max-width: 1140px; margin: 0 auto; }
section#selectUse #availableSizes .group { border-bottom: 1px solid #e7e7e8; padding-bottom: 30px; }
section#selectUse #availableSizes .group:last-child { border-bottom: none; padding-bottom: 0; }
section#selectUse #availableSizes .group h3 { margin-top: 20px; }
section#selectUse #availableSizes .group .groupSizes { display: flex; flex-wrap: wrap; }
section#selectUse #availableSizes .group .groupSizes > div { cursor: pointer; border: 1px solid #DC6900; border-radius: 10px; margin-top: 10px; display: flex; width: 24%; margin-right: 1%; box-sizing: border-box; flex-direction: column; transition: background .2s; }
section#selectUse #availableSizes .group .groupSizes > div:hover { background: rgba(163, 32, 32, .2); }
section#selectUse #availableSizes .group .groupSizes > div.disabled { cursor: default; opacity: .5; }
section#selectUse #availableSizes .group .groupSizes > div.disabled:hover { background: none; }
section#selectUse #availableSizes .group .groupSizes div h4 { margin: 10px 20px; }
section#selectUse #availableSizes .group .groupSizes div h4 span { display: block; font: 14px Arial; margin-top: 5px; }
section#selectUse #availableSizes .group .groupSizes div#custom h4 span { visibility: hidden; }
section#selectUse #availableSizes .group .groupSizes div div.uses { flex: 1; padding: 10px; border-top: 1px solid #DC6900; }
section#selectUse #availableSizes .group .groupSizes div div.uses h6 { margin-bottom: 5px; }
section#selectUse #availableSizes .group .groupSizes div div.uses ul { padding: 0; margin: 0; font-size: 14px; }
section#selectUse #availableSizes .group .groupSizes div div.uses ul li { padding: 0; margin-left: 20px; list-style-type: square; }
section#selectUse #availableSizes .group .groupSizes div div.uses ul li:hover { color: #000; }

body > section#editImage { display: none; }
body.editSection > section#editImage { display: block; }
body.editSection div#breadcrumbs div.button#breadcrumb1, body.editSection div#breadcrumbs div.button#breadcrumb2 { background: #EB8C00; cursor: pointer; }
body.editSection div#breadcrumbs div.button#breadcrumb3 { background: #DC6900; }
body.editSection div#breadcrumbs div.bar.one, body.editSection div#breadcrumbs div.bar.two { background: #EB8C00; }
body.editSection div#toolbarContainer button#done, body.editSection div#toolbarContainer img#preview { display: block; }
body.editSection.s1600x900 div#toolbarContainer img#heroLevel2 { display: block; }
body.editSection.s1600x500 div#toolbarContainer img#heroLevel3 { display: block; }
section#editImage header { max-width: 1140px; margin: 0 auto; position: relative; }
section#editImage div#imageContainer { position: absolute; left: 20px; top: 70px; }
section#editImage div#imageContainer * { user-select: none; }
section#editImage div#imageContainer #originalImage { position: absolute; }
section#editImage div#imageContainer svg#cropper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
section#editImage div#imageContainer svg#cropper > rect { fill: rgba(0, 0, 0, .8); }
section#editImage div#imageContainer svg#cropper > rect.hole { fill: rgba(0, 0, 0, 0); }
section#editImage div#imageContainer svg#cropper > rect.heroCurtain { fill: rgba(255, 255, 255, .8); display: none; }
body.heroPreview.s1600x900.hero1360 section#editImage div#imageContainer svg#cropper > rect#heroCurtain1360Level2 { display: block; }
body.heroPreview.s1600x900.hero1920 section#editImage div#imageContainer svg#cropper > rect#heroCurtain1920Level2 { display: block; }
body.heroPreview.s1600x500.hero1360 section#editImage div#imageContainer svg#cropper > rect#heroCurtain1360Level3 { display: block; }
body.heroPreview.s1600x500.hero1920 section#editImage div#imageContainer svg#cropper > rect#heroCurtain1920Level3 { display: block; }
body.cropPreview section#editImage div#imageContainer svg#cropper > rect.fullCropper, body.cropPreview section#editImage div#imageContainer svg#cropper > rect.heroCurtain { fill: rgb(255, 255, 255); }
section#editImage div#imageContainer svg#cropper #mask rect#hole { fill: rgb(0, 0, 0); }
section#editImage div#imageContainer svg#cropper #mask rect.fullCropper { fill: rgb(255, 255, 255); }
section#editImage div#imageContainer div#cropperBorderBack { border: 1px solid rgba(0, 0, 0, .3); position: absolute; box-sizing: border-box; }
body.cropPreview section#editImage div#imageContainer div#cropperBorderBack { border: 1px solid #FFF; }
section#editImage div#imageContainer div#cropperBorder { border: 1px dashed rgba(255, 255, 255, .3); position: absolute; box-sizing: border-box; cursor: move; }
body.cropPreview section#editImage div#imageContainer div#cropperBorder { border: none; }
section#editImage div#imageContainer .cropperCorner { position: absolute; }
body.cropPreview section#editImage div#imageContainer .cropperCorner { display: none; }
section#editImage div#imageContainer .cropperCorner.topLeft, section#editImage div#imageContainer .cropperCorner.bottomRight { cursor: nwse-resize; }
section#editImage div#imageContainer .cropperCorner.topRight, section#editImage div#imageContainer .cropperCorner.bottomLeft { cursor: nesw-resize; }
section#editImage div#imageContainer .hero { display: none; position: absolute; }
body.heroPreview.s1600x900.hero1360 section#editImage div#imageContainer #heroTitle1360 { display: block; }
body.heroPreview.s1600x900.hero1920 section#editImage div#imageContainer #heroTitle1920 { display: block; }
body.heroPreview.s1600x500.hero1360 section#editImage div#imageContainer #heroSlim1360 { display: block; }
body.heroPreview.s1600x500.hero1920 section#editImage div#imageContainer #heroSlim1920 { display: block; }

body > section#result { display: none; }
body.resultSection > section#result { display: block; }
body.resultSection div#breadcrumbs div.button#breadcrumb1, body.resultSection div#breadcrumbs div.button#breadcrumb2, body.resultSection div#breadcrumbs div.button#breadcrumb3 { background: #EB8C00; cursor: pointer; }
body.resultSection div#breadcrumbs div.button#breadcrumb4 { background: #DC6900; }
body.resultSection div#breadcrumbs div.bar.one, body.resultSection div#breadcrumbs div.bar.two, body.resultSection div#breadcrumbs div.bar.three { background: #EB8C00; }
body.resultSection a#download { display: block; }
section#result { display: none; max-width: 1140px; margin: 0 auto; position: relative; }
section#result > a { display: inline-block; margin-top: 20px; }
section#result img { max-width: 100%; }
section#result div#fileFormat { display: none; margin-top: 5px; }
section#result div#fileSize { font-size: 14px; margin-top: 5px; }

footer { background: #FFF; height: 20px; position: fixed; left: 0; bottom: 0; width: 100%; }
footer span.left { position: fixed; left: 5px; bottom: 5px; font-size: .8em; }
footer span.right { position: fixed; right: 5px; bottom: 5px; font-size: .8em; }
footer a { color: #EB8C00; }
footer a:hover { color: #DC6900; }

img#leprechaun { position: fixed; left: 0; bottom: 17px; z-index: -1; }