body, html{ margin: 0; padding: 0; } body{ font-size:20px; text-shadow: 1px 1px #ddd; font-family: times, 'times new roman', helvetica,serif; line-height:1.5em; color:#444; background:#fff; padding:20px; } /* resize images on mobile */ @media all and (max-width: 768px) { .photo-message{ /* rounded corner imgs...*/ width:100%; height:100%; overflow:hidden; line-height: 0; -webkit-border-top-left-radius:123px; -webkit-border-top-right-radius:123px; -webkit-border-bottom-right-radius:123px; -webkit-border-bottom-left-radius:123px; -moz-border-radius-bottomright:123px; -moz-border-radius-bottomleft:123px; -moz-border-top-left-radius:123px; -moz-border-top-right-radius:123px; border-top-left-radius:123px; border-top-right-radius:123px; border-bottom-right-radius:123px; border-bottom-left-radius:123px; } img.photo-message{ width:100%; line-height: 0; vertical-align:middle; /* otherwise produces bottom border the size of the body 'line-height' */ /* disable anti aliasing */ image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } } /* resize images on desktop */ @media all and (min-width: 768px) { img.photo-message{ width:50%; display: block; margin-left: auto; margin-right: auto; /* disable anti aliasing */ image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } } img.photo-message{ /* disable anti aliasing */ image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } .photo-message{ /* rounded corner imgs on desktop...*/ width:100%; height:100%; overflow:hidden; -webkit-border-top-left-radius:123px; -webkit-border-top-right-radius:123px; -webkit-border-bottom-right-radius:123px; -webkit-border-bottom-left-radius:123px; -moz-border-radius-bottomright:123px; -moz-border-radius-bottomleft:123px; -moz-border-top-left-radius:123px; -moz-border-top-right-radius:123px; border-top-left-radius:123px; border-top-right-radius:123px; border-bottom-right-radius:123px; border-bottom-left-radius:123px; } img.emo { width: 22px; height: 22px; } #input-footer{ position: fixed; top:0px; width:100%; margin:10px; } #new-photo{ display:inline; float:left; width:30%; -webkit-appearance: none; -moz-appearance: none; outline: none; border:0; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; height:40px; display: block; font-family: inherit; font-size: 20px; font-weight:bold; text-shadow: 0 0 23px #888; background-color:#fff; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; } #new-message{ margin-right: 60px; display:inline; width:30%; float:right; -webkit-appearance: none; -moz-appearance: none; outline: none; border:0; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; height:40px; display: block; font-family: inherit; font-size: 20px; font-weight:bold; text-shadow: 0 0 23px #888; background-color:#fff; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; } .back-button{ display:inline; float:left; width:100%; -webkit-appearance: none; -moz-appearance: none; outline: none; border:0; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; height:40px; display: block; font-family: inherit; font-size: 20px; font-weight:bold; text-shadow: 0 0 23px #888; background-color:#fff; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; } .rot-left{ display:inline; float:left; width:50%; -webkit-appearance: none; -moz-appearance: none; outline: none; border:0; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; height:40px; display: block; font-family: inherit; font-size: 20px; font-weight:bold; text-shadow: 0 0 23px #888; background-color:#fff; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; } .rot-right{ display:inline; width:50%; float:right; -webkit-appearance: none; -moz-appearance: none; outline: none; border:0; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; height:40px; display: block; font-family: inherit; font-size: 20px; font-weight:bold; text-shadow: 0 0 23px #888; background-color:#fff; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; } .photo-buttons { -webkit-appearance: none; -moz-appearance: none; outline: none; border:0; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; height:40px; width:100%; display: block; font-family: inherit; font-size: 20px; font-weight:bold; text-shadow: 0 0 23px #888; background-color:#fff; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; } /* hide calculation canvases */ #sourceImage{ display: none; } #canvas1{ display: none; } #canvas2{ display: none; } #progress{ display: none; } #total{ display: none; } #message-form textarea{ -webkit-appearance: none; -moz-appearance: none; display: block; outline:none; width: 98%; margin: 0 auto; line-height: 40px; border:none; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; font-family: inherit; font-size: 20px; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; } #photo-name{ /* text field */ -webkit-appearance: none; -moz-appearance: none; display: block; outline:none; width: 98%; margin: 0 auto; line-height: 40px; border:none; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; font-family: inherit; font-size: 20px; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; } #message-form .send-button { -webkit-appearance: none; -moz-appearance: none; outline: none; border:0; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; height:40px; width:100%; display: block; font-family: inherit; font-size: 20px; font-weight:bold; text-shadow: 0 0 23px #888; background-color:#fff; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; } select{ width:100%; display: block; margin-left: auto; margin-right: auto; margin: 1.5em 0; font-family: inherit; font-size: inherit; font-size: 20px; } h2{ margin: 0 0 20px; font-size: 40px; text-shadow: 0px 0px 23px #bbb; } hr{ height:10px; border: 10; width:87%; background-image: url(css/bg1.gif); } .messages ul{ padding:0px; margin: 0; } .messages li{ list-style: none; margin: 0; } .messages .message-block { margin:30px; word-wrap:break-word; overflow: visible; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; -webkit-border-top-left-radius:123px; -webkit-border-top-right-radius:123px; -webkit-border-bottom-right-radius:123px; -webkit-border-bottom-left-radius:123px; -moz-border-radius-bottomright:123px; -moz-border-radius-bottomleft:123px; -moz-border-top-left-radius:123px; -moz-border-top-right-radius:123px; border-top-left-radius:123px; border-top-right-radius:123px; border-bottom-right-radius:123px; border-bottom-left-radius:123px; background:#fff; } .photoBox { width: 100%; margin: 0 auto; line-height: 40px; display: none; position: absolute; background-color:#fff; z-index:1002; overflow: visible; background:#fff; } .node { font-size:10px; margin-top:-30px; display: none; position: absolute; word-wrap:break-word; overflow: visible; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; -webkit-border-top-left-radius:123px; -webkit-border-top-right-radius:123px; -webkit-border-bottom-right-radius:123px; -webkit-border-bottom-left-radius:123px; -moz-border-radius-bottomright:123px; -moz-border-radius-bottomleft:123px; -moz-border-top-left-radius:123px; -moz-border-top-right-radius:123px; border-top-left-radius:123px; border-top-right-radius:123px; border-bottom-right-radius:123px; border-bottom-left-radius:123px; background:#fff; } .hops { display: none; font-size:10px; //padding: 10px; margin-top:-30px; position: absolute; word-wrap:break-word; overflow: visible; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; -webkit-border-top-left-radius:123px; -webkit-border-top-right-radius:123px; -webkit-border-bottom-right-radius:123px; -webkit-border-bottom-left-radius:123px; -moz-border-radius-bottomright:123px; -moz-border-radius-bottomleft:123px; -moz-border-top-left-radius:123px; -moz-border-top-right-radius:123px; border-top-left-radius:123px; border-top-right-radius:123px; border-bottom-right-radius:123px; border-bottom-left-radius:123px; background:#fff; } .message-text { font-size: 25px; } .date-sender { position: absolute; font-size: 15px; word-wrap:break-word; overflow: visible; -moz-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb; -webkit-border-top-left-radius:123px; -webkit-border-top-right-radius:123px; -webkit-border-bottom-right-radius:123px; -webkit-border-bottom-left-radius:123px; -moz-border-radius-bottomright:123px; -moz-border-radius-bottomleft:123px; -moz-border-top-left-radius:123px; -moz-border-top-right-radius:123px; border-top-left-radius:123px; border-top-right-radius:123px; border-bottom-right-radius:123px; border-bottom-left-radius:123px; background:#fff; } #outbox{ display:none; } #header{ width:100%; text-align: center; }