@charset "utf-8";
/* CSS Document */

#myForm h2{
		font-size:2.0em;
		margin:20px 100px;
	}

fieldset {
  width: 450px;
  margin: 20px auto;
  padding: 30px;
  background: #42132a;
  border: 2px solid #d0d0d0;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
  -moz-box-shadow: 2px 2px 2px #2c0b1c;
  -webkit-box-shadow: 2px 2px 2px #2c0b1c;
  box-shadow: 2px 2px 2px #2c0b1c;
  font-size:80%;
}

label {
  display: block;
  font: bold 1.2em arial,verdana,tahoma,sans-serif;
  text-shadow: 2px 2px 2px #333;
  color: #ddd;
  margin: 0 20px 5px 0;
  padding: 0;
  clear: left;
}

/* APPLIES THE STYLE TO EACH FORM ELEMENT */
.textfield, .dropdown, .textarea {
  width: 220px;
  font: normal 1.1em arial,verdana,tahoma,sans-serif;
  color: #000;
  margin: 0 0 10px 0;
  padding: 9px 14px;
  background: #ddd;
  border: 2px solid #d0d0d0;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;  
  -moz-box-shadow: 4px 4px 4px #2c0b1c;
  -webkit-box-shadow: 4px 4px 4px #2c0b1c;
  box-shadow: 4px 4px 4px #2c0b1c;
}

/* OPTIONAL SET WIDTH FOR THE SELECT LIST */
.dropdown {
  width: 250px;
}

/* OPTIONAL SET WIDTH FOR THE TEXTAREA */
.textarea {
  width: 410px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; 
}

/* CHANGE THE STYLE WHEN THE FORM ELEMENT IS CLICKED */
input:focus, select:focus, .textarea:focus {
  background: #4a0025;
  color:#eee;
  border: 2px solid #ddd;
  -moz-box-shadow: 2px 1px 1px #ddd;
  -webkit-box-shadow: 2px 1px 1px #ddd;
  box-shadow: 2px 1px 1px #ddd;
  outline: none;
}

/* THE NAMES FOR EACH OF THE FORM ELEMENT DIVS WHICH AUTOMATICALLY HIDES THE TIPS BY DEFAULT */
div.myName p.hint, div.myEmail p.hint, div.myComments p.hint, div.sendTip p.hint {
  display: none;
}  

/* WHEN EACH DIV IS HOVERED, THE TIP IS DISPLAYED */
div.myName:hover > p.hint, div.myEmail:hover > p.hint, div.myComments:hover > p.hint, div.sendTip:hover > p.hint  {
  position: absolute;
  display: block;
  font: bold 0.8em arial,verdana,tahoma,sans-serif;
  text-shadow: none;
  color: #000;
  margin: 0 0 0 265px;
  padding: 10px 15px;
  background: #f8dc9f;
  border: 2px solid #3f0a2f;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;   
  -moz-box-shadow: 2px 2px 2px #433c2c;
  -webkit-box-shadow: 2px 2px 2px #433c2c;
  box-shadow: 2px 2px 2px #433c2c;  
}

/* CHANGES THE LEFT MARGIN ON THE TEXTAREA TIP, FOR BALANCE */
div.myComments:hover > p.hint {
  margin: 2px 0 0 350px;
}

/* CHANGES THE LEFT MARGIN ON THE SUBMIT BUTTON TIP, FOR BALANCE */
div.sendTip:hover > p.hint {
  margin: 2px 0 0 150px;
}

.btn {
  display: block;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  color: #000;
  text-decoration: none;
  margin: 0;
  padding: 9px 11px 8px 11px;
  background: #f2f2f2 url(../img/submit-backgr.png) repeat-x;
  border: 2px solid #d0d0d0;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;  
  -moz-box-shadow: 4px 4px 4px #2c0b1c;
  -webkit-box-shadow: 4px 4px 4px #2c0b1c;
  box-shadow: 4px 4px 4px #2c0b1c;  
}

.btn:hover, .btn:focus {
  color: #fff;
  background: #4a0025; 
  border: 2px solid #888;
  -moz-box-shadow: 2px 2px 2px #2c0b1c;
  -webkit-box-shadow: 2px 2px 2px #2c0b1c;
  box-shadow: 2px 2px 2px #2c0b1c;  
}

.btn:active {
  color: #fff;
  background: #000; 
  border: 2px solid #888;
  -moz-box-shadow: 2px 2px 2px #2c0b1c;
  -webkit-box-shadow: 2px 2px 2px #2c0b1c;
  box-shadow: 2px 2px 2px #2c0b1c;  
}