a { color: rgb(255, 255, 255); text-decoration: none; } a:hover { text-decoration: underline; } body { margin: 0; background: rgb(64, 64, 64); font-family: Lucida Grande; font-size: 10px; text-align: center; } div, img { -webkit-user-select: none; } div.button { float: left; width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, 1); margin: 4px; background: rgba(0, 0, 0, 0.5); cursor: pointer; -moz-border-radius: 12px; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1); -webkit-border-radius: 12px; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1); } div.button:hover { background: rgba(0, 0, 0, 0.75); } div.background { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.25); opacity: 0; z-index: 1500; } div.dialog { position: fixed; left: 0; top: 0; right: 0; bottom: 135px; margin: auto; width: 405px; height: 170px; opacity: 0; -moz-border-radius: 8px; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1); -webkit-border-radius: 8px; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1); } div.dialog > .title { width: 389px; height: 14px; padding: 5px 8px 5px 8px; background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48)); background: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(48, 48, 48))); font-family: Lucida Grande, Verdana, Calibri, Arial; font-weight: bold; font-size: 10px; text-align: left; color: rgb(192, 192, 192); -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; } div.dialog > .text { width: 373px; height: 90px; padding: 16px; background: rgb(64, 64, 64); font-family: Lucida Grande, Verdana, Calibri, Arial; font-weight: bold; font-size: 10px; text-align: left; color: rgb(192, 192, 192); } div.dialog > .buttons { width: 397px; height: 24px; padding: 0 4px 0 4px; background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48)); background: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(48, 48, 48))); -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; } div.map { position: fixed; right: 8px; bottom: 32px; height: 90px; border: 2px solid rgba(255, 255, 255, 1); z-index: 500; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1); } div.map > .box { position: absolute; left: 0; top: 0; border: 2px solid rgba(255, 255, 255, 1); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1); cursor: move; } div.map > .interface { position: fixed; right: 8px; bottom: 32px; height: 90px; cursor: pointer; } div.input { font-family: Lucida Grande, Verdana, Calibri, Arial; font-weight: bold; font-size: 10px; color: rgb(192, 192, 192); text-align: center; } div.input, div.select { float: left; width: 117px; height: 12px; padding: 1px 8px 1px 8px; border: 1px solid rgb(128, 128, 128); margin: 4px; background: rgba(0, 0, 0, 0.25); cursor: pointer; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1); } div.input:hover, div.select:hover { background: rgba(0, 0, 0, 0.5); } .buttons > div.input { float: right; width: 27px; } div.select > div { width: 117px; font-family: Lucida Grande, Verdana, Calibri, Arial; font-weight: bold; font-size: 10px; text-align: left; color: rgb(192, 192, 192); } img.button { width: 12px; height: 12px; margin: 3px; } img.map { height: 90px; } select { position: relative; left: -9px; top: -17px; width: 135px; cursor: pointer; opacity: 0; } .original { position: fixed; } .photo { background: rgb(128, 128, 128); position: fixed; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1); } div.spinner { position: fixed; width: 24px; height: 24px; background: rgba(0, 0, 0, 0.25); opacity: 0; z-index: 250; -moz-border-radius: 12px; -webkit-border-radius: 12px; } img.spinner { width: 18px; height: 18px; margin: 3px; } .thumbnail { float: left; //width: 135px; height: 90px; margin: 16px; cursor: pointer; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1); } .thumbnail.loading { background: rgb(128, 128, 128); } .tooltip { position: fixed; width: 135px; bottom: 6px; font-family: Lucida Grande, Verdana, Calibri, Arial; font-weight: bold; font-size: 10px; color: rgb(192, 192, 192); text-align: center; text-shadow: rgb(0, 0, 0) 1px 1px 2px; opacity: 0; z-index: 1000; } #album { //position: absolute; //top: 0; //width: auto; //margin: 0 auto 36px auto; padding: 12px; display: table-cell; } #buttons { position: fixed; left: 0; right: 0; width: 160px; height: 32px; bottom: 24px; padding: 4px; margin: 0px auto 0px auto; opacity: 0; z-index: 1000; //background: red; } #interface { position: fixed; left: 0; top: 0; right: 0; bottom: 24px; cursor: move; display: none; opacity: 0; z-index: 500; } #layer { position: fixed; left: 0; top: 0; right: 0; bottom: 24px; background: rgb(64, 64, 64); display: none; opacity: 0; } #menu { position: fixed; left: 0; bottom: 0; right: 0; height: 24px; background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48)); background: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(48, 48, 48))); //opacity: 0.9; z-index: 500; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1); } #left { position: fixed; left: 4px; } #right { position: fixed; right: 4px; }