/* Default styles for yovo_form components used by yovo_form_helper methods */

/* 
    All things messaging/feedback related

*/

.notice_message, .confirm_message, .alert_message, .error_message {
    font: 12px Arial, Helvetica, sans-serif;
    padding: 7px 7px 7px 35px;
    margin: 5px 0;
}

.notice_message {
    border-top: 1px solid #b5d4fe;
    border-bottom: 1px solid #b5d4fe;
    background: #d2f0f7 url(/images/information.png) no-repeat 10px 5px;
}

.confirm_message {
    border-top: 1px solid #adc748;
    border-bottom: 1px solid #adc748;
    background: #e5f1b4 url(/images/tick_circle_frame.png) no-repeat 10px 5px;
}

.alert_message {
    border-top: 1px solid #FFD814;
    border-bottom: 1px solid #FFD814;
    background:#fcfdd0 url(/images/exclamation_frame.png) no-repeat 10px 5px;
}

.error_message {
    border-top: 1px solid #DBAF00;
    border-bottom: 1px solid #DBAF00;
    background: #FFE88A url(/images/exclamation_frame.png) no-repeat 10px 5px;
}

.notice_message em, .confirm_message em, .alert_message em, .error_message em {
  color: #222; font-weight: bold;
}

.notice_message h2, .confirm_message h2, .alert_message h2, .error_message h2 {
  background-color: inherit;
  text-align: left;
  vertical-align: middle;
  font: 11px Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 0;
  margin: 0;
  color: #333;
  line-height: 18px;
  border:0;
}

.notice_message img, .confirm_message img, .alert_message img, .error_message img {
    vertical-align: middle;    
}

.error_message li, .alert_message li { 
  color: #333;
  font-size: 11px;

}
.error_message ul, .alert_message ul { 
  margin: 3px 5px 5px 0;
}

.notice_message { margin-bottom: 15px;}
.notice_message h3 { margin: -3px 0 0 0; padding: 0;}

.notice_message p { font: 12px Verdana; margin: 0 0 7px 0; padding: 0; }

.notice_message li {
  color: #666;
  font: 11px Verdana;
  padding: 1px 0;

}
.notice_message ul {
  margin: 0px 5px 5px 0;
}

/*
    All things input/from related

*/

input.text, input.password, textarea.textarea, select.select, input.ajax_button {
    background-color: #eee;
    border: 1px solid;
    border-color: #aaa;
    font: 1.2em Verdana; 
    line-height: 1.5em; 
    padding: 2px 4px;
  }

* html input {line-height: 1em;}

input {font-weight: bold; color: #222;}

input.warning, select.warning, textarea.warning {background: #ffc;}
input.error, select.error, textarea.error {background: #FFE88A !important;}
input.submit, input.button {display:block; margin: 10px 0; font-size: 11px;}
input.check { border: none; vertical-align: middle; margin: 0;}
input.radio { border: none; margin: 0;}
select.select {padding: 1px 0px; color: #222;}

img.spinner {}
input.ajax_button {background: #e4e4e4; border-color: #ccc #777 #777 #ccc; font-weight: bold;}
*:first-child+html .ajax_button {padding: 0; line-height: 1em;}

div.inline .ajax_button { margin-top: 10px; font-size: 11px;}

.required {font: 11px Verdana; color: #999; padding-bottom: 5px;}
.asterisk {color: darkred;}
.focused { background: #F0F8FF !important;}
input.focused, select.focused, textarea.focused { background: #F0F8FF !important;}
.hovered { background: #DEF0FF;}

.textarea { width: 300px; height: 100px; padding: 1px 4px; line-height: 1.2em;}
* html textarea {line-height: 1em;}
textarea.small {width: 300px; height: 50px;line-height: 14px; }
textarea.meduim {width: 300px; height: 100px;line-height: 14px;}
textarea.large {width: 350px; height: 300px; line-height: 14px;}
textarea.larger {width: 450px; height: 250px;line-height: 14px;}
textarea.big { width: 500px; height: 300px;line-height: 14px;}
textarea.massive { width: 650px; height: 300px;line-height: 14px;}
  
.text, .password  { width: 300px;}
.tiny   { width: 50px !important;}
.small  { width: 100px !important;}
.medium { width: 200px !important;}
.large  { width: 300px !important;}
.larger { width: 400px !important;}

div.form { margin:0; padding: 5px 0px; background: #fff; position: relative;}
div.form label  { font: 1.1em Verdana; color: #222; padding: 0;}
div.form td.lab { width: 130px; padding: 0 12px 0 0; text-align: right; vertical-align: middle;}
div.form td.inp { height: 29px;}
div.form td.per { height: 29px;}
div.form td.txa { padding-top: 3px;}
div.form td.sys { border-top: 1px dotted #999;}
div.form td.inf { height: 29px; font: bold 12px Verdana; vertical-align: middle;}
div.form td.inf em { font-weight: normal; }
div.form td.but { padding-top: 7px; vertical-align: bottom;}
* html div.form td.but { padding: 0;}
div.form td.but a { color: red; font-size: 13px;}
div.form div.note {color: #666; font-size:10px; }
div.form td.rx2 {padding-left: 48px;}

div.popup h1 {
  padding: 0px;
  margin-top: -5px;
  width: 100%;
  text-align: center;
  border-left: 0;
  border-right: 0;
  color: #222;
}

div.popup h1.new { background: #fff; }

#facebox table.msx-table {margin-bottom: 10px;}
.msx-table th {
  padding-top: 4px; 
  font: normal 10px Verdana;
  color: #222;
}
ul.msx  {
  position: relative;
  height: 60px;
  overflow-x: hidden;
  overflow-y: auto;
  list-style-type:none;
  padding: 0.5em;
  margin: 0px 7px 5px 0;
  border: 1px solid; 
  border-color: #777 #ccc #ccc #777;

}
* html ul.msx {overflow: auto;}
ul.msx input { border: none; vertical-align: middle; margin: 0; padding:0;}
ul.msx li { padding: 0; margin: 0; font: 11px Verdana; color: #222}
*html ul.msx li { margin-bottom: -0.5em; }

input.snip {font:11px Arial; padding:0; margin: 0; margin-bottom: 2px; background: #eee;}
input.inline {display:inline !important; margin-bottom:0 !important}

td.instructions { padding-top: 15px; font: 12px Verdana; color: #444; padding-bottom: 10px;}
table.pref-pool {font-family: Arial, Tahoma, Verdana; margin-left:10px;}
table.pref-pool td {padding: 0px 1px 1px 2px; }
span.pp-title {
    font: bold 12px  Verdana, Arial, Tahoma, Helvetica, sans-serif;
    color: #000;
}
span.pp-title a {text-decoration:none; color: black;}
span.pp-title a:hover {color: darkred;}
table.pref-pool td.title { padding: 8px 0 5px 0;}
div.form span.hint {color:#777777;font-size:13px;}
.ac_results {
	padding: 0px;
	border: 1px solid WindowFrame;
	background-color: Window;
	overflow: hidden;
	z-index: 999;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	width: 100%;
	font: menu;
	font-size: 12px;
	overflow: hidden;
}
label.inside-ac,
div.form label.inside-ac {
    position:absolute;
    visibility:hidden;
    font-family:Arial;
    font-size:13px;
    color:#777777 !important;
    margin-left:3px;
    padding:5px 0 0 2px;
}
.ac_loading { background: Window url('/images/fast-loader.gif') no-repeat center right !important;}
.ac_over { background-color: Highlight; color: HighlightText; }
.ac { border:1px solid blue;}
div.form-lookup-box { background:#FFFFFF;border:none;padding:0;margin:0;}
div.form-lookup-box input{width:250px;border:1px solid blue}
.lookup {  padding: 0; border:0; background-color:transparent;}
span.radio {padding-right:8px;}

td.instructions { font: normal 14px Verdana; padding: 6px 10px 6px; margin-top: 5px; background: #fff; border-top: 1px dotted #999; border-bottom: 0px dotted #999; color: #222;}
table.generic td.inset {padding-left: 50px;}
table.generic td.inset-top {padding-left: 50px; padding-top: 10px;}
table.generic td.inset-bottom {padding-left: 50px; padding-bottom: 15px;}
table.generic td.inset-both {padding-left: 50px; padding-bottom: 15px; padding-top:10px;}

div.preview-head {background: #ddd; text-align: center; font: bold 11px Verdana; color: #444; padding: 2px 15px 3px 15px; border:1px solid #ccc; margin-bottom: 15px; border-left: 0; border-right: 0;}
table.visibility th {background: #ddd; font-weight: bold;border: 1px solid #ccc; border-right: 0; border-left: 0; padding: 3px; border-collapse: collapse;}
table.visibility td {padding: 1px 0;}
.c {text-align: center;}
input.visi {font: normal 10px Verdana; padding:1px; margin:0; border:1px solid #ddd; width: 125px;}
.tab-content p.visibility-link { font-size: 14px; padding-top:5px;}

.form-text { padding: 10px 20px 5px; }
.form-text  img {display: inline; vertical-align: middle;}
.form-text h4 {font-weight: bold; color: steelblue;}
.form-text span {margin: 0; margin-left: 20px; padding: 0; font-size: 13px; color: #666;}
.form-text input.button { margin-left: 30px; }
.form-text a {color: #444;}
td.rcbx {padding-left:50px; vertical-align: middle;}

img.head-shot {float:left; margin: 5px 7px 5px 0; border: 1px solid #aaa;}

.y-divider { border-top: 1px dotted #aaa;}