/* 
  Make Safe For Work CSS by DrummerHead
  http://mcdlr.com
*/

/* Reset from 960.gs (minified) */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%;} html,body{height:100%;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} b,strong{font-weight:bold;} img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic;} li{display:list-item;} table{border-collapse:collapse;border-spacing:0;} th,td,caption{font-weight:normal;vertical-align:top;text-align:left;} svg{overflow:hidden;}

html {
  overflow-y: scroll;
  min-width: 780px;
}

body {
  background-color: #888080;
  background-image: url('bg.png');
  background-position:  50% 50%;
  font-family: "Lucida Bright", Georgia, serif;
  line-height: 1.4;
  text-shadow: -1px -1px 0 #555;
  color: #eee;
}
#vessel {
  margin: 0 auto;
  padding: 2em 2% 1em;
}

/* Form to add the image URL*/
#imagePutForm {
}
.inputText {
  height: 20px;
  padding: 10px 10px 5px 10px;
  border: 3px solid #665c5c;
  background-color: #c1b6b6;
  color: #444;
  font-size: 16px;
  line-height: 18px;
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  border-radius: 5px; 
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#imagePutForm #imageUrl {
  width: 85%;
  position: relative;
  z-index: 9999;
}
#submit {
  /*width: 100px;
  height: 100px;*/
  padding: 7px 10px;
  margin: 0 0 0 10px;
  font-family: "Lucida Bright", Georgia, serif;
  border: none;
  background-color: #909090;
  cursor: pointer;
  font-size: 18px;
  text-align: center;
  color: #ddd;
  text-decoration: none;
  font-weight: normal;
  font-style: italic;
  opacity: 0.8;
  text-shadow: 1px 1px 0 #666;
  position: relative;
  top: 4px;
  left: 0;

  -moz-border-radius: 18px; 
  -webkit-border-radius: 18px; 
  border-radius: 18px; 
  -moz-box-shadow: -3px -3px 0px rgba(0,0,0,0.3); 
  -webkit-box-shadow: -3px -3px 0px rgba(0,0,0,0.3); 
  box-shadow: -3px -3px 0px rgba(0,0,0,0.3); 
}

#submit {
}
#submit {
}

/* share area */
#share {
  padding: 15px 0 0 0;
  display: none;
}
label {
}
#shareUrl {
  width: 97%;
}

/* section where the image will show */
#imageArea {
  position: relative;
  padding: 20px 0 0 0;
  overflow: hidden;
}
#imageDump {
  width: 77%;
  margin: 0 2em 0 0;
  float: left;
  position: relative;
  min-height: 420px;
  background-color: rgba(120,120,120,.5);
  text-align: center;
}
#imageDump span {
  font-size: 17em;
  font-weight: bold;
  display: block;
  line-height: 410px;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  opacity: 0.1;
}
#imageDump span.msg {
  font-size: 5em;
}
#imageDump img {
  max-width: 100%;
  display: none;
  background-image: url('loading.png');
}
.hide {
  display: none;
}
#interactArea {
  width: 277px;
  float: right;
  padding: 50px 0 0 0;
  display: none;
  position: relative;
}
#msfwDo {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 0 0 25%;
  position: relative;
  cursor: pointer;
  background-color: #909090;
  font-size: 24px;
  line-height: 98px;
  text-align: center;
  color: #ddd;
  text-decoration: none;
  font-weight: normal;
  font-style: italic;
  opacity: 0.8;
  text-shadow: 1px 1px 0 #666;

  -moz-border-radius: 50px; 
  -webkit-border-radius: 50px; 
  border-radius: 50px; 
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 

  -moz-box-shadow: -5px -5px 0px rgba(0,0,0,0.3); 
  -webkit-box-shadow: -5px -5px 0px rgba(0,0,0,0.3); 
  box-shadow: -5px -5px 0px rgba(0,0,0,0.3); 
}
#msfwDo:hover,
#submit:hover {
  opacity: 1;
}
#msfwDo:active,
#submit:active, 
#msfwDo.active {
  -moz-box-shadow: none;
  -webkit-box-shadow: none; 
  box-shadow: 0 0 20px rgba(120,0,0,0.2); 
  top: -5px;
  left: -5px;
}
#submit:active {
  top: 1px;
  left: -3px;
}
#lockHouse {
  position: absolute;
  top: 91px;
  font-size: 12px;
  right: 0;
}
#lock {
}
#lockHouse label {
}
#interactArea p {
  margin: 1.4em 1em;
}
#hideTest {
  display: none;
}


@media screen and (max-width: 1440px) {
  #imagePutForm #imageUrl {
    width: 83%;
  }
  #imageDump {
    width: 74%;
  }
}
@media screen and (max-width: 1280px) {
  #imagePutForm #imageUrl {
    width: 80%;
  }
  #imageDump {
    width: 68%;
  }
}
@media screen and (max-width: 1024px) {
  body {
    font-size: 77%;
  }
  #imagePutForm #imageUrl {
    width: 77%;
  }
  #imageDump {
    width: 61%;
    margin-right: 1em;
  }
  #imageDump span.msg {
    font-size: 4em;
  }
  #flap {
    right: 10px !important;
  }
}
@media screen and (max-width: 800px) {
  #imagePutForm #imageUrl {
    width: 70%;
  }
  #imageDump {
    width: 60%;
  }
}