/*------------------------------------------------
   MachForm Core styles
  -----------------------------------------------*/

#main_body {font-family:"Lucida Grande",Tahoma,Arial,Verdana,sans-serif; font-size:small; margin:8px 0 16px; text-align:center}
body#main_body {background: #eee}
body#main_body.embed {background: transparent;}
#form_container {background:#fff; border:1px solid #ccc; margin:0 auto; text-align:left; max-width:640px; min-width: 300px}
body#main_body #form_container{-webkit-box-shadow: 0 0 10px #ccc; -moz-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc}
body#main_body.embed #form_container {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.appnitro {font-family:"Lucida Grande",Tahoma,Arial,Verdana,sans-serif; font-size:small}
form.appnitro {margin: 4% 4% 0; padding:0 0 20px}
#main_body img {behavior:url(css/iepngfix.htc); border:0}
#main_body #top {display:block; height:10px; margin:5px auto 0; max-width:640px; min-width: 300px; width: 100%;}
#main_body #bottom {display:block; height:10px; margin:0 auto; max-width:640px; min-width: 300px; width: 100%}
#machform-footer {width:100%; clear:both; color:#999; text-align:center; padding-bottom:15px; font-size:85%}
#machform-footer a {color:#999; text-decoration:none; border-bottom:1px dotted #999}
#main_body form {font-size:100%}
#main_body form div.field {padding:4px 5px 4px 9px; position:relative;-webkit-transition: background-color 0.3s;-moz-transition: background-color 0.3s;-ms-transition: background-color 0.3s;-o-transition: background-color 0.3s;transition: background-color 0.3s;}
#main_body form div.field:after,#main_body .buttons:after {clear:both; content:"."; display:block; height:0; visibility:hidden}
#main_body .buttons {clear:both; margin-top:10px; padding: 4px 5px 4px 9px}
#main_body html form div.field div {display:inline-block}
#main_body form div.field div {color:#444; margin:0 4px 0 0; padding:0 0 8px}
#main_body form div.field span {color:#444; float:left; margin:0 4px 0 0; padding:0 0 8px}
#main_body div.field.mf_radio > div > span, #main_body div.field.mf_checkbox > div > span {width: 100%}
#main_body form div.field div.left {float:left; width:48%}
#main_body form div.field div.right {float:right; width:48%}
#main_body form div.field div.left .medium {width:100%}
#main_body form div.field div.right .medium {width:98%}
#main_body .clear {clear:both}
#main_body form div.field div label {clear:both; color:#333; display:block; font-size:10px; line-height:10px; margin:0; padding-top:3px}
#main_body form div.field span label {clear:both; color:#444; display:block; font-size:10px; line-height:10px; margin:0; padding-top:3px}
#main_body img.datepicker {cursor:pointer!important; float:left; height:16px; margin:.1em 5px 0 0; padding:0; width:16px}
.touch-device #main_body img.datepicker {padding: 3px; margin: 0; background-color: #eee}
#main_body .form_description {border-bottom:1px dotted #ccc; clear:both; display:inline-block; margin:0 0 1em}
#main_body .form_description[class] {display:block}
#main_body .form_description h3 {clear:left; font-size:160%; font-weight:400; margin:0 0 3px}
#main_body .form_description p {font-size:95%; line-height:130%; margin:0 0 12px}
#main_body form div.section_break {margin-top:20px; padding-bottom:0; padding-left:9px; padding-top:13px; width:97%!important}
#main_body form div.first {border-top:none!important; margin-top:0!important; padding-top:0!important}
#main_body form .section_break h4 {font-size:140%; font-weight:400; line-height:130%; margin:0 0 2px; color:#148}
#main_body form .section_break p {font-size:85%; margin:0 0 10px}
#main_body input.button_text {overflow:visible; padding:0 7px; width:auto}
#main_body .buttons input {font-size:120%; margin-right:15px}
#main_body label.description {border:0; color:#222; display:block; font-size:95%; font-weight:700; line-height:150%; padding:0 0 1px}
#main_body span.symbol {font-size:115%; line-height:130%}
#main_body input.text {background:#fff url(../../../images/shadow.gif) repeat-x top; border-bottom:1px solid #ddd; border-left:1px solid #c3c3c3; border-right:1px solid #c3c3c3; border-top:1px solid #7c7c7c; color:#333; font-size:100%; margin:0; padding:2px 0}
#main_body input.file {color:#333; font-size:100%; margin:0; padding:2px 0}
#main_body textarea.textarea {background:#fff url(../../../images/shadow.gif) repeat-x top; border-bottom:1px solid #ddd; border-left:1px solid #c3c3c3; border-right:1px solid #c3c3c3; border-top:1px solid #7c7c7c; color:#333; font-family:"Lucida Grande",Tahoma,Arial,Verdana,sans-serif; font-size:100%; margin:0; width:99%}
#main_body select.select {color:#333; font-size:100%; margin:1px 0; padding:1px 0 0}
.no-touch #main_body select.select {background:#fff url(../../../images/shadow.gif) repeat-x top; border-bottom:1px solid #ddd; border-left:1px solid #c3c3c3; border-right:1px solid #c3c3c3; border-top:1px solid #7c7c7c}
#main_body input.currency {text-align:right; padding-right:3px}
#main_body input.checkbox {display:block; height:13px; line-height:1.4em; margin:6px 0 0 3px; width:13px}
#main_body input.radio {display:block; height:13px; line-height:1.4em; margin:6px 0 0 3px; width:13px}
#main_body form div.field label.choice {color:#444; display:block; font-size:100%; line-height:1.4em; margin:-1.55em 0 0 25px; padding:4px 0 5px; width:90%}
.ie #main_body form div.field label.choice {margin-top:-1.7em}
#main_body select.select[class] {margin:0; padding:1px 0}
*:first-child+html select.select[class] {margin:1px 0}
#main_body .safari select.select {font-size:120%!important; margin-bottom:1px}
#main_body input.small {width:25%}
#main_body select.small {width:25%}
#main_body input.medium {width:50%}
#main_body select.medium {width:50%}
#main_body input.large {width:99%}
#main_body select.large {width:100%}
#main_body textarea.small {height:5.5em}
#main_body textarea.medium {height:10em}
#main_body textarea.large {height:20em}
.touch-device #main_body select.select {background: #fff}
#main_body input#username, #main_body input#password {width: 150px; margin-left: 9px;}
#error_message {background:#fff; border:1px dotted red; margin-bottom:1em; padding-left:0; padding-right:0; padding-top:4px; text-align:center; width:97%}
#error_message_title {color:#df0000; font-size:125%; margin:7px 0 5px!important; padding:0!important}
#error_message_desc {color:#000; font-size:100%; margin:0 0 .8em!important}
#error_message_desc strong {background-color:#ffdfdf; color:red; padding:2px 3px}
#main_body form div.error {background-color:#ffdfdf!important; border-bottom:1px solid #eacbcc; border-right:1px solid #eacbcc; margin:3px 0}
#main_body form div.error label {color:#df0000!important}
#main_body form p.error {clear:both; color:red; font-size:10px; font-weight:700; margin:0 0 5px!important}
#main_body form .required {color:red!important; float:none!important; font-weight:700}
#main_body form div.highlighted {background-color:#fff7c0}
#main_body form .guidelines {background-color: #E4F0FF; border:1px solid #B4C0CC; color:#444; font-size:90%; line-height:150%; margin:0 0 0 8px!important; padding:8px 10px 9px; position:absolute; visibility:hidden; box-shadow: 1px 2px 3px #777; left:97%; top: 10px; width:35%; z-index:1000}
#main_body form .guidelines small {font-size:115%}
#main_body form div.highlighted .guidelines, #main_body form div.field:hover .guidelines {visibility:visible}
.form_success {clear:both; margin:0; padding:90px 0 100px; text-align:center}
.form_success h3 {clear:left; font-size:160%; font-weight:normal; margin:0 0 3px}
#main_body div.password {margin-top:60px; margin-bottom:60px; text-align:center}
.password h3 {color:#df0000; font-weight:bold; margin:0 auto 10px}
.password input.text {font-size:170%!important; width:380px; text-align:center}
.password label {display:block; font-size:120%!important; padding-top:10px; font-weight:bold}
#li_captcha {padding-left:5px}
#li_captcha span {float:none; padding:0!important}
#li_captcha div {padding:0!important}
#captcha_image {padding-top:5px; padding-bottom:10px}
#captcha_response_field {margin-bottom:10px}
#dummy_captcha_internal {height:8px}
#main_body.embed #top,#main_body.embed #bottom,#main_body.embed h1 {display:none}
.embed #form_container {border:0; width:100%; background:0}
.embed #machform-footer {text-align:left; padding-left:10px; width:99%}
.embed #machform-footer.success {text-align:center}
.embed form.appnitro {margin:0}
.integrated * {font-family:"Lucida Grande",Tahoma,Arial,Verdana,sans-serif; color:#000}
.integrated #top,.integrated #bottom,.integrated h1 {display:none}
.integrated #form_container {border:0; width:99%; background:0}
.integrated #machform-footer {text-align:left; padding-left:10px; width:99%}
.integrated #machform-footer.success {text-align:center}
.integrated form.appnitro {margin:0}
.integrated form .section_break h4 {border:none!important}
.integrated #error_message h3 {border:none!important}
#mf-view-top p a:hover {text-decoration: underline !important; color: #777 !important}

/** Calendar **/
.mf-calendar {position:relative}
.mf-calendar table {cursor:pointer; border:1px solid #ccc; font-size:11px; color:#000; background:#fff; font-family:"Lucida Grande",Tahoma,Arial,Verdana,sans-serif}
.mf-calendar table .title,.calendar table .button {font-size:14px}
.mf-calendar * {font-size:14px; font-family:"Lucida Grande",Tahoma,Arial,Verdana,sans-serif}
.mf-calendar td {padding: 4px;}
.mf-calendar .button {text-align:center;}
.mf-calendar .nav {background:#f5f5f5}
.mf-calendar thead .title {font-weight:bold; text-align:center; background:#dedede; color:#000;}
.mf-calendar thead .headrow {background:#f5f5f5; color:#444; font-weight:bold}
.mf-calendar thead .daynames {background:#fff; color:#333; font-weight:bold}
.mf-calendar thead .name {border-bottom:1px dotted #ccc; text-align:center; color:#000}
.mf-calendar thead .weekend {color:#666}
.mf-calendar thead .hilite {background-color:#444; color:#fff;}
.mf-calendar thead .active {background-color:#d12f19; color:#fff;}
.mf-calendar tbody .day {width:1.8em; color:#222; text-align:right;}
.mf-calendar tbody .day.othermonth {font-size:80%; color:#bbb}
.mf-calendar tbody .day.othermonth.oweekend {color:#fbb}
.mf-calendar table .wn {border-right:1px solid #000; background:#666}
.mf-calendar tbody .rowhilite td {background:#fff1af}
.mf-calendar tbody .rowhilite td.wn {background:#fff1af}
.mf-calendar tbody td.hilite {background:#444!important; color:#fff!important}
.mf-calendar tbody td.active {color:#fff; background:#529214!important; }
.mf-calendar tbody td.selected {font-weight:bold; border:1px solid #888; background:#f5f5f5!important; color:#222!important}
.mf-calendar tbody td.weekend {color:#666}
.mf-calendar tbody td.today {font-weight:bold; color:#529214; background:#d9efc2}
.mf-calendar tbody .disabled {color:#999}
.mf-calendar tbody .emptycell {visibility:hidden}
.mf-calendar tbody .emptyrow {display:none}
.mf-calendar tfoot .footrow {text-align:center; background:#556; color:#fff}
.mf-calendar tfoot .ttip {background:#222; color:#fff; font-size:10px; border-top:1px solid #dedede; }
.mf-calendar tfoot .hilite {background:#aaf; border:1px solid #04f; color:#000;}
.mf-calendar tfoot .active {background:#77c;}
.mf-calendar .combo {position:absolute; display:none; top:0; left:0; width:4em; border:1px solid #ccc; background:#f5f5f5; color:#222; font-size:90%; z-index:100}
.mf-calendar .combo .label,.mf-calendar .combo .label-IEfix {text-align:center; padding:1px}
.mf-calendar .combo .label-IEfix {width:4em}
.mf-calendar .combo .hilite {background:#444; color:#fff}
.mf-calendar .combo .active {border-top:1px solid #999; border-bottom:1px solid #999; background:#dedede; font-weight:bold}
.touch-device .mf-calendar td {padding: 5px 8px}

/** Review table **/
#machform_review_table tbody tr:hover {background-color:#fff7c0}
#main_body tr.alt {background:#efefef}
#machform_review_table td, #machform_review_table th {text-align:left; border-bottom:1px solid #dedede; padding:5px 10px}

/** Buttons **/
#main_body input#review_back {padding:3px 8px; font-size:13px; color:#444; line-height:20px; cursor:pointer; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); background-color:#eee; background-image:-moz-linear-gradient(top,#f6f6f6,#ccc); background-image:-webkit-gradient(linear,0 0,0 100%,from(#f6f6f6),to(#ccc)); background-image:-webkit-linear-gradient(top,#f6f6f6,#ccc); background-image:-o-linear-gradient(top,#f6f6f6,#ccc); background-image:-ms-linear-gradient(top,#f6f6f6 0,#ccc 100%); background-image:linear-gradient(to bottom,#f6f6f6,#ccc); background-repeat:repeat-x; border:1px solid #ccc; border-color:#ccc #ccc #aaa; border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6',endColorstr='#cccccc',GradientType=0)}
#main_body input#saveForm, #main_body input#review_submit {padding:4px 12px; font-size:16px; line-height:24px; cursor:pointer; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,0.25); background-color:#3a638f; background-image:-moz-linear-gradient(top,#5686ba,#3a638f); background-image:-webkit-gradient(linear,0 0,0 100%,from(#5686ba),to(#3a638f)); background-image:-webkit-linear-gradient(top,#5686ba,#3a638f); background-image:-o-linear-gradient(top,#5686ba,#3a638f); background-image:-ms-linear-gradient(top,#5686ba 0,#3a638f 100%); background-image:linear-gradient(to bottom,#5686ba,#3a638f); background-repeat:repeat-x; border:1px solid #3a638f; border-color:#3a638f #3a638f #294767; border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.2) rgba(0,0,0,0.3); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5686BA',endColorstr='#3A638F',GradientType=0)}
.ie9 #main_body input#saveForm, .ie9 #main_body input#review_submit, .ie9 #main_body input#review_back {border-radius:0}
#main_body input#saveForm:hover, #main_body input#review_submit:hover, #main_body input#saveForm:focus, #main_body input#review_submit:focus {background-position:0 -15px; -webkit-transition:background-position .1s linear; -moz-transition:background-position .1s linear; -o-transition:background-position .1s linear; transition:background-position .1s linear}
#main_body input#saveForm:active, #main_body input#review_submit:active, #main_body input#review_back:active {background-image:none; outline:0; -webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}

/** Field Types **/
#main_body div.field.mf_simple_address div.city {float:left; width:49%; margin-right:3%}
#main_body div.field.mf_simple_address div.state {float:left; width:22%; margin-right:3%}
#main_body div.field.mf_simple_address div.zip {float:left; width:22%; margin-right:0}
#main_body div.field.mf_time input {width: 35px}
#main_body div.field.mf_money input[id$="_1"]  {width: 83px}
#main_body div.field.mf_money input[id$="_2"]  {width: 37px}
#main_body div.field.mf_date input[id$="_1"]  {width: 35px}
#main_body div.field.mf_date input[id$="_2"]  {width: 35px}
#main_body div.field.mf_date input[id$="_3"]  {width: 47px}
#main_body div.field.mf_phone input[id$="_1"]  {width: 41px}
#main_body div.field.mf_phone input[id$="_2"]  {width: 41px}
#main_body div.field.mf_phone input[id$="_3"]  {width: 47px}

@media screen and (max-width: 360px) {
    #mf-view-top a.utalogo, #mf-view-top a.utalogo img {width: 200px !important}
}

@media screen and (max-width: 640px) {
    /* setting font-size to 16px will prevent the annoying autozoom on iOS */
    #main_body div.field input, #main_body div.field select, #main_body div.field textarea {font-size: 16px}
    #main_body label.description, #main_body label.choice {font-size: 14px !important}
    #main_body form div.field label.choice {padding-bottom: 12px}
    body#main_body {margin: 0; background: #fff}
    #main_body #top, #main_body #bottom {display: none}
    body#main_body #form_container{border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none}
    #mf-view-top {background-color: #eee; border-bottom: 1px solid #ddd; padding: 10px 5px 15px}
}

@media screen and (max-width: 1100px) {
    #main_body form .guidelines {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; clear: both; float: left; position: static; visibility: visible; width: 85%; margin-left: 0 !important; border-color: transparent}
    #main_body form .guidelines small {color: #567}
}