div.mmf {
	margin: 0;
	padding: 0;
}

div.mmf-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
}

div.mmf-mail-sent-ok {
	border: 1px dashed #AFAFA4;
}

div.mmf-mail-sent-ng {
	border: 1px dashed #FF7800;
}

div.mmf-spam-blocked {
	border: 1px dashed #FF7800;
}

div.mmf-validation-errors {
	border: 1px dashed #FF7800;
}

span.mmf-form-control-wrap {
	position: relative;
}

span.mmf-not-valid-tip {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
	background: #fff;
	border: 1px solid #FF7800;
	font-size: 10pt;
	width: 280px;
	padding: 2px;
}

span.mmf-not-valid-tip-no-ajax {
	color: #f00;
	font-size: 10pt;
	display: block;
}

span.mmf-list-item {
	margin-left: 0.5em;
}


/* Create a fancy web form with field hints using only CSS3 */

/* ARCHITECTURE */


/* Hover instructions */

fieldset {
  width: 650px;
  margin: 0;
  padding: 30px;
  background: #f0f0f0;
  border: 2px solid #d0d0d0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 6px 6px 6px #ddd;
  -webkit-box-shadow: 6px 6px 6px #ddd;
  box-shadow: 6px 6px 6px #ddd;
}

label {
  display: block;
  font-family: arial,verdana,tahoma,sans-serif;
  font-size: 10pt;
  color: #000;
  clear: left;
}

#lbl {
	font-size: 10pt;
	width: 150px;
	float: left;
	background: #f0f0f0;
	padding-top: 10px;
}


/* APPLIES THE STYLE TO EACH FORM ELEMENT */
.textfield, .dropdown, .textarea {
  padding: 2px 4px;
  background: #fff;
  border: 1px solid #d0d0d0;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -moz-box-shadow: 4px 4px 4px #ddd;
  -webkit-box-shadow: 4px 4px 4px #ddd;
  box-shadow: 4px 4px 4px #ddd;
}

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

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

/* CHANGE THE STYLE WHEN THE FORM ELEMENT IS CLICKED */
input:focus, select:focus, .textarea:focus {
  background: #fff;
  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.basic 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.basic:hover > p.hint, div.MailAddr:hover > p.hint, div.myEmail:hover > p.hint, div.myComments:hover > p.hint, div.sendTip:hover > p.hint  {
  position: absolute;
  display: block;
  font: 0.8em arial,verdana,tahoma,sans-serif;
  color: #000;
  margin: -20px 0 0 300px;
  padding: 5px 10px;
  background: #ffff80;
  border: 2px solid #f7de35;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -moz-box-shadow: 4px 4px 4px #ddd;
  -webkit-box-shadow: 4px 4px 4px #ddd;
  box-shadow: 4px 4px 4px #ddd;
}

/* 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;
  margin-left: 550px;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  color: #000;
  text-decoration: none;
  padding: 5px;
  background: #537799;
  color: #ffffff;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -moz-box-shadow: 4px 4px 4px #ddd;
  -webkit-box-shadow: 4px 4px 4px #ddd;
  box-shadow: 4px 4px 4px #ddd;
}

.btn:hover, .btn:focus {
  color: #fff;
  background: #a70303;
  border: 2px solid #888;
  -moz-box-shadow: 2px 2px 2px #ddd;
  -webkit-box-shadow: 2px 2px 2px #ddd;
  box-shadow: 2px 2px 2px #ddd;
/}