/*-----------------------------------------------------------------------------------



FILE INFORMATION



Description: CoLabs shortcode generator CSS.

Date Created: 2011-10-13.




TABLE OF CONTENTS



1. Layout

2. Attributes Table

3. Validation

4. Column Control

5. Form Elements

-5.1 Colour Picker



-----------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------

  1. Layout

-----------------------------------------------------------------------------------*/



#colabs-options-buttons { margin: -3px -15px 0; background: #EDEDED; padding: 12px 20px 8px; border-bottom: 1px solid #ddd; } 

#colabs-options {float: left; width: 379px; margin-right: 20px; position: relative; z-index: 2; }

#colabs-options.shortcode-related, #colabs-options.shortcode-column, #colabs-options.shortcode-tab  { width: 100%; }

#colabs-options h3, #colabs-preview h3, #colabs-options-error h3 { border-bottom: 1px solid #E7E7E7; font-size: 13px; margin: 10px 0; padding: 7px 0; }

#colabs-preview { width: 225px; position: relative; z-index: 2; }

#colabs-preloader { position: absolute; }

.colabs-loading { background: url( "../images/loading-bottom.gif") no-repeat scroll right center transparent; padding-right: 15px; }

#colabs-options.shortcode-contactform { width: 100%; display: block;  }

#colabs-preview.shortcode-contactform { width: 100%; margin-top: -20px; display: block; }

#colabs-preview.shortcode-contactform iframe { height: 530px!important; }



/*-----------------------------------------------------------------------------------

  2. Attributes Table

-----------------------------------------------------------------------------------*/



#colabs-options-table { border: 0px solid #DFDFDF; width: 100%; margin-bottom: 8px; }

#colabs-options-table th { padding-top: 0.2em; }

#colabs-options.shortcode-column th, #colabs-options.shortcode-tab th  { width: 20px; vertical-align: top; }

#colabs-options-table td { vertical-align: middle; padding: 0 5px 10px 0; }

.colabs-input-help { font-size: 11px; color: #999; font-style: italic; font-family: sans-serif; display: block; clear: both; }

.colabs-input-help p   { margin: 0; color: #888; font-size: 11px; }

abbr.colabs-required { color: #FF0000; }



/*-----------------------------------------------------------------------------------

  3. Validation

-----------------------------------------------------------------------------------*/



#colabs-options-error p { margin: 0; }

#colabs-options-error h4 { margin: 1.33em 0 0.8em 0; }

input.colabs-required {}

.colabs-validating { background: url( "../images/loading-bottom.gif") no-repeat scroll right center transparent; padding-right: 18px; }

.colabs-validated { background: url( "../images/happy.png") no-repeat scroll right center transparent; padding-right: 15px; }

.colabs-validation-error { background: url( "../images/ico-alert.png") no-repeat scroll right center transparent; padding-right: 15px; }



/*-----------------------------------------------------------------------------------

  4. Column Control

-----------------------------------------------------------------------------------*/



div.column-button { border: 1px solid #333333; width: 100px; margin:  4px 0; text-align: center; }

input.column-button[disabled], input.column-button[disabled]:hover { background-color: #fff !important; color: #aaa; border: 1px solid #eee; }

input.column-button { float: left; clear: left; margin-top: 2px; border: 1px solid #777777; background-color: #EEEEEE !important; }

.rounded5p { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

#colabs-column-text { border: 1px solid #AAAAAA; font-size: 22px; font-family: Sans-serif; padding: 5px 40px 5px 5px; }



/*-----------------------------------------------------------------------------------

  5. Form Elements

-----------------------------------------------------------------------------------*/



#colabs-options input[type=text], #colabs-options select  { margin-bottom: 4px; border-color: #CCCCCC #EEEEEE #EEEEEE #CCCCCC; border-style: solid; border-width: 1px; background-color: #FAFAFA; font-family: "Lucida Grande",Verdana,sans-serif;height: 28px;  width: 280px; color: #555555; font-size: 12px; }

#colabs-options.shortcode-related input[type=text]  { width: 560px; }

#colabs-options.shortcode-contactform label  {  width: 130px; }

#colabs-options.shortcode-column label  {}

#colabs-options.shortcode-contactform input[type=text]  { width: 483px; }

#colabs-options input[type=text]  {  padding: 5px; -moz-border-radius: 4px 4px 4px 4px; }

#colabs-options select  { cursor: pointer; opacity: 0; padding: 0; position: relative; z-index: 4; padding: 5px; }

#colabs-options-table label { width: 89px; text-align: right; padding: 6px 6px 0 0; font-weight: bold; font-size: 11px; line-height: 12px; color: #333333; display: block; }

label.colabs-required span.required {padding: 0 0 0 2px; margin-top: -4px; font-size: smaller; color: #FF0000; }

#colabs-options .select_wrapper  { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-size: 12px; background: #fafafa url(../images/select.png) no-repeat right center; border-color: #ccc #eee #eee #ccc; border-style: solid; border-width: 1px; float: left; height: 26px; width: 280px; margin: 0 0 4px; display: block; }

#colabs-options .select_wrapper span { height: 26px; line-height: 26px; padding-left: 6px; position: absolute; z-index: 2; }



/*-----------------------------------------------------------------------------------

  -5.1 Colour Picker

-----------------------------------------------------------------------------------*/



#colabs-options .colabs-marker-colourpicker-control .colorSelector { margin-top: 1px; }

#colabs-options .colabs-marker-colourpicker-control input.input-colourpicker { float: right; width: 248px; }

#colabs-options .colabs-marker-colourpicker-control br { clear: both; }