/* Styling for generic skinned components - inputs, jsf components etc */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{font-family:'Open Sans',Arial,sans-serif;font-size:1em;}

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

h1, h2, h3, h4, p  { line-height: normal }

div.spacer {  height: 5px; width: 100%;}
div.spacer2 {  height: 10px; width: 100%;}

table td {  white-space: normal !important }

.error textarea { border: 1px solid red; padding: 0.1em 0em 0.2em 0.1em}
.error input { border: 1px solid red; padding: 0.1em 0em 0.2em 0.1em; margin-right: 2px;}
.error, .required { color: red }
.warn { color: #f47a20; }
.error { padding: 3px 5px 0px 0px; font-size: 0.8em }
.errors { color: red; vertical-align: middle;  }
.breakontonewline { clear: both; }
input.inputErrors, select.inputErrors, .inputErrors input { border: 1px solid red !important; }
.required { padding-left: 2px; }
.clear { clear:both; }

a:hover { cursor: pointer; }

.input, .output { float: left; padding: 5px; }
.output { padding-top: 8px; }
input:disabled { background: #dddddd !important}

.timeoutactionbutton { margin: 0px 5px; }

textarea, input[type="text"], input[type="password"], select { border-width: 1px;  border-style: solid; border-color: #C4C0B9; background-repeat: no-repeat; background-position: 1px 1px; background-color: #ffffff; background-image: url('/images/inputBackgroundImage.png'); }
textarea, input[type="text"], input[type="password"] { padding: 1px 1px 1px 2px;  }
textarea[disabled], input[type="text"][disabled], input[type="password"][disabled], select[disabled] { color: #C4C0B9; cursor: default; }
textarea[readonly], input[type="text"][readonly], input[type="password"][readonly], select[readonly] { color: #666; cursor: default; }
textarea { font: -moz-field; }

/* CK Editor */
.main .cke_skin_kama .cke_toolgroup{ background-image: none; }
.main .cke_skin_kama .cke_rcombo a,.cke_skin_kama .cke_rcombo a:active,.cke_skin_kama .cke_rcombo a:hover {  border: none; padding: 0px !important; margin-top: 2px;  }
.main .cke_skin_kama .cke_rcombo a:hover {  border: none; box-shadow: 1px 1px 1px #bbbbbb  }
.main .cke_skin_kama .cke_rcombo .cke_off a:hover .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_off a:focus .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_off a:active .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_on .cke_openbutton{border-color: inherit ;background-color: inherit; }
.cke_editor td { border: none !important; }

/* Colour picker composite component */
.colourpicker .currentcolour { width: 20px; height: 20px; margin: 8px 5px 0px 5px; float: left; z-index: 1000; border: 1px solid #cccccc}
.colourpicker .prompt {font-size: 9pt; margin: 8px 5px 0px 0px; float: left; }

/*
To display colour picker button with current colour. Also, set background: #{cc.attrs.value}; on p:colorPicker
.ui-colorpicker { height: 27px; width: 48px; display: block; position: relative; border-radius: 4px}
.ui-colorpicker button { background :none !important; margin: 0px; position: absolute; left: 0px; top: 0px; box-shadow: none; }
*/

/* PrimeFaces skinning */
.ui-colorpicker_field input[type="text"], .ui-colorpicker_hex input[type="text"] { background: none; border: none; color: white; width: 27px; margin-top: 1px;  font-size: 8pt !important; min-width: 15px !important; }

.hasDatepicker { box-shadow: none !important; background: none !important; float: left !important;
  border: 1px solid #C4C0B9 !important; border-radius: 0px !important; text-shadow: none !important; color: black !important; 
  margin: 0px !important; padding: 1px 2px 1px 2px !important; font-size: 9pt !important;
  background-color: white !important; background-image: url('/images/inputBackgroundImage.png') !important; background-repeat: no-repeat !important; }
.ui-datepicker-header .ui-datepicker-month { float:left; !important; margin-right: 1px !important; min-width: auto }
.ui-datepicker-header .ui-datepicker-year { float:left; !important; margin-left: 1px !important; min-width: auto }
.ui-datepicker-trigger { width: 21px !important; height: 21px !important; margin-left: 1px}

.calendarInput .ui-state-disabled { box-shadow: none; }

.ui-picklist td { vertical-align:middle; padding: 0px 10px 0px 0px; font-size: 9pt } 
.ui-picklist-list, .ui-picklist-list-source { height: 160px !important; width: 250px !important; font-size: 8pt }
.ui-picklist-filter-container { margin-bottom: 2px !important; height: 20px; margin-top: 8px !important}
.ui-picklist-filter-container .ui-icon-search { padding: 0px !important; margin: -3px 0px 0px 0px !important; }

.ui-password { padding-left: 2px !important; padding-right: 1px !important }
.ui-inputfield  .ui-widget .ui-state-default .ui-corner-all .ui-state-focus .ui-state-hover { }

.ui-picklist-target .ui-picklist-item { font-weight: bold !important; }

.ui-dialog { z-index: 10000 !important; } /* position: absolute !important; top: 40% !important; left: 50% !important } */

.ui-tooltip { z-index: 20000 !important; } /* Otherwise this doesn't show above the dialog box! */

.ui-fileupload-buttonbar { font-size: 0.8em}

.ui-fileupload-content table { width: 100%; }
.ui-fileupload-content td { vertical-align: middle; padding: 10px !important;  max-width: 155px; overflow:hidden;  }
.ui-fileupload-progress .ui-progressbar { width: 50px; border-radius: 5px }

.ui-datatable { width: 100%}
.ui-datatable table { table-layout: auto; }
.ui-datatable td, .ui-datatable th { font-size: 11px; padding: 4px 10px ; }
.ui-datatable a { color: #0078D0 }
.ui-datatable-even:hover, .ui-datatable-odd:hover  { background: #fbf8cd !important }
.ui-menu a { color: inherit; }


/* Tabbed items on template 2 */
  	.ui-tabs  { margin: 20px 0px; padding: 0px; border: none !important; }
	.ui-tabs .ui-tabs-nav.ui-widget-header { border-bottom: 0px !important; margin: 0px; padding: 0px; }
	.ui-tabs .ui-tabs-nav.ui-widget-header li { background: #121328; border: none; border-radius: 0px !important; width: 100% }
	.ui-tabs .ui-tabs-nav.ui-widget-header li a {  color: white; text-shadow: none }
	.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-tabs-selected { background: #DDEEF5; border: none;  }
	.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-tabs-selected a {  color: #333; }
	.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-state-hover { background: #399ED4; border: none;  }
	.ui-tabs .ui-tabs-nav.ui-widget-header li:after { content: ""; width: 10px; height: 10px; position: absolute; right: 15px; top: 10px; border-right: 1px solid white; border-top: 1px solid white; transform:rotate(135deg) }
	.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-tabs-selected:after { content: ""; width: 10px; height: 10px; position: absolute; right: 15px; top: 14px; border-right: 1px solid #121328; border-top: 1px solid #121328; transform:rotate(-45deg) }
	.ui-tabs-panels .ui-tabs-panel { background: #DDEEF5; border-radius: 0px }
	.ui-tabs-panels .ui-tabs-panel a { color: #4444F3 !important; }


.redbutton { display: inline-block; margin: 5px 0px; background: #ce1126; color: white; font-size: 0.9em; text-decoration: none; padding: 5px; }
.redbutton a { color: inherit; text-decoration: none; }
.redbutton a:after { content: ">"; padding: 0px 5px; color: #ffffff !important; }
.redbutton:hover { background: #a00b1b }

/* Ability to put red solid arrow before a text or link */
.redarrow a:before { content: url(/images/redarrow.png); padding: 0px 10px 0px 5px; color: #ce1126; }
.redarrow a { color: inherit; text-decoration: none; }
/* 
#growl_container .ui-growl-image-error { background:url('/images/icons/growl-error-large.png') no-repeat !important}
.ui-growl-icon-close { background: white; background-image:url('/images/icons/cross.png') no-repeat !important; padding: 3px } 
#growl_container .ui-icon-closethick { background-image:url('/images/icons/cross.png') !important; background-position: -2px -2px;  }
*/

.cke_dialog input { width: auto !important; background: none !important;}

.versiontable { margin: 5px auto 0px auto}
.versiontable tr { font-size: 1.0em }
.versiontable tr:first-child { font-weight: bold; font-size: 1.0em }
.versiontable tr td { padding: 3px }