/* generic rules */
* { -moz-user-select:none; -webkit-user-select:none; }
html,body { width:100%; }
body{ margin:10px 0 0; background:#ccc; }
#container { position:relative; margin:0 auto; width:960px; height:600px; background:#f3f3f3; padding:0; }
div,input,button { font-family:"Open Sans", Arial; font-style:normal; font-size:14px; color:#000; }
button { cursor:pointer; display:inline-block; white-space:no-wrap; font-size:12px; font-weight:bold; padding:8px 20px; color:#505050; border:1px solid #c0c0c0; background:-moz-linear-gradient(top, #e5e5e5 0%, #f0f0f0); background:-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0)); -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.5); -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.5); }
button:hover { background:#eee; border:solid 1px #909090; }
button:active { background:#e0e0e0; color:#303030; border:solid 1px #e0e0e0; -moz-box-shadow:inset 1px 1px 0px #999; -webkit-box-shadow:inset 1px 1px 0px #999; box-shadow:inset 1px 1px 0px #999; }
a:link, a:visited { background:#fff; padding:5px; color:#069; text-decoration:none; box-shadow:0px 1px 1px 0px #bbb; }
a:hover { background:#069; color:#fff; text-decoration:none; }
h1 { color:#f30; font-size:22px; } h3 { color:#f30; margin:0; }
.blue { color:#069; }

/* deucalion gui */
#logoAndInfo { position:absolute; top:0px; left:0px; z-index:10; }
#logo { position:relative; top:0px; left:0px; }
.tooltip { display:none; background:#f00; height:44px; padding:10px 15px 0; font-size:20px; color:#fff; font-weight:bold; }
#instructions_button { cursor:pointer; position:absolute; top:0; left:108px; background:url("guiElements/instructions.png") 0 0; width:54px; height:54px; overflow:hidden; }
#instructions_button:hover { background:url("guiElements/instructions.png") 108px 0; }
#instructions_button:active { background:url("guiElements/instructions.png") 54px 0; }
#instructions_tooltip { position:absolute; top:0; left:162px; }
#metadata_button { cursor:pointer; position:absolute; top:54px; left:108px; background:url("guiElements/metadata.png") 0 0; width:54px; height:54px; overflow:hidden; }
#metadata_button:hover { background:url("guiElements/metadata.png") 108px 0; }
#metadata_button:active { background:url("guiElements/metadata.png") 54px 0; }
#metadata_tooltip { position:absolute; top:54px; left:162px; }
#instructions, #metadata { width:900px; height:542px!important; background:#fff; padding:30px; position:absolute; top:0px; z-index:10; }
.content { width:100%; position:relative; left:0px; top:0px; z-index:0; }
.content img { width:100%; }
.close_button { cursor:pointer; position:absolute; top:0; right:0; z-index:1000; background:url("guiElements/close.png") 0 0; width:54px; height:54px; overflow:hidden; }
.close_button:hover { background:url("guiElements/close.png") 108px 0; }
.close_button:active { background:url("guiElements/close.png") 54px 0; }
#qrcode { position:absolute; bottom:30px; }
#qrcode a { font-size:11px; padding:3px 6px; background:#eee; position:relative; top:-10px; }
#qrcode a:hover { background:#333; }
#espa { position:absolute; bottom:30px; left:178px; }
#metadata_text { position:absolute; top:120px; left:170px; width:75%; font-size:14px; }
#cc { font-size:14px; } #cc a { box-shadow:0px 0px 0px 0px #fff; padding:0 5px; }
#cc_img { margin:0 10px 0 0; }
#dialog-confirm { display:none; }

/* puzzle specific rules */
#c2canvas { background:#ddd; -ms-touch-action:none; padding:0; width:960px!important; height:600px!important; position:relative; z-index:0; top:0px!important; border:0px!important; font-family:"Open Sans", Arial; cursor:pointer; }
#c2canvas:active { cursor:pointer; }