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

FILE INFORMATION

Description: Shortcode generator CSS.
Date Created: 2011-01-21.
Author: Based on the work of the Shortcode Ninja plugin by VisualShortcodes.com.
Integration and Addons: Matty.
Since: 3.5.0
Copyright 2010 (c) VisualShortcodes.com


TABLE OF CONTENTS

1. Layout
2. Attributes Table
3. Validation
4. Column Control
5. Form Elements
-5.1 Colour Picker

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

/*-----------------------------------------------------------------------------------
  1. Layout
-----------------------------------------------------------------------------------*/

#tmnf-options-buttons { margin: -3px -15px 0; background: #EDEDED; padding: 12px 20px 8px; border-bottom: 1px solid #ddd; } 
#tmnf-options {float: left; width: 380px; margin-right: 20px; position: relative; z-index: 2; }
#tmnf-options.shortcode-related, #tmnf-options.shortcode-column, #tmnf-options.shortcode-tab  { width: 100%; }
#tmnf-options h3, #tmnf-preview h3, #tmnf-options-error h3 { border-bottom: 1px solid #E7E7E7; font-size: 13px; margin: 10px 0; padding: 7px 0; }
#tmnf-preview { width: 225px; position: relative; z-index: 2; }
#tmnf-preloader { position: absolute; }
.tmnf-loading { background: url( "../images/loading-bottom.gif") no-repeat scroll right center transparent; padding-right: 15px; }
#tmnf-options.shortcode-contactform { width: 100%; display: block;  }
#tmnf-preview.shortcode-contactform { width: 100%; margin-top: -20px; display: block; }
#tmnf-preview.shortcode-contactform iframe { height: 530px!important; }

/*-----------------------------------------------------------------------------------
  2. Attributes Table
-----------------------------------------------------------------------------------*/

#tmnf-options-table { border: 0px solid #DFDFDF; width: 100%; margin-bottom: 8px; }
#tmnf-options-table th { padding-top: 0.2em; }
#tmnf-options.shortcode-column th, #tmnf-options.shortcode-tab th  { width: 20px; vertical-align: top; }
#tmnf-options-table td { vertical-align: middle; padding: 0 5px 10px 0; }
.tmnf-input-help { font-size: 11px; color: #999; font-style: italic; font-family: sans-serif; display: block; clear: both; }
.tmnf-input-help p   { margin: 0; color: #888; font-size: 11px; }
abbr.tmnf-required { color: #FF0000; }

/*-----------------------------------------------------------------------------------
  3. Validation
-----------------------------------------------------------------------------------*/

#tmnf-options-error p { margin: 0; }
#tmnf-options-error h4 { margin: 1.33em 0 0.8em 0; }
input.tmnf-required {}
.tmnf-validating { background: url( "../images/loading-bottom.gif") no-repeat scroll right center transparent; padding-right: 18px; }
.tmnf-validated { background: url( "../images/happy.png") no-repeat scroll right center transparent; padding-right: 15px; }
.tmnf-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; }
#tmnf-column-text { border: 1px solid #AAAAAA; font-size: 22px; font-family: Sans-serif; padding: 5px 40px 5px 5px; }

/*-----------------------------------------------------------------------------------
  5. Form Elements
-----------------------------------------------------------------------------------*/

#tmnf-options input[type=text], #tmnf-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; }
#tmnf-options.shortcode-related input[type=text]  { width: 560px; }
#tmnf-options.shortcode-contactform label  {  width: 130px; }
#tmnf-options.shortcode-column label  {}
#tmnf-options.shortcode-contactform input[type=text]  { width: 483px; }
#tmnf-options input[type=text]  {  padding: 5px; -moz-border-radius: 4px 4px 4px 4px; }
#tmnf-options select  { cursor: pointer; opacity: 0; padding: 0; position: relative; z-index: 4; padding: 5px; }
#tmnf-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.tmnf-required span.required {padding: 0 0 0 2px; margin-top: -4px; font-size: smaller; color: #FF0000; }
#tmnf-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; }
#tmnf-options .select_wrapper span { height: 26px; line-height: 26px; padding-left: 6px; position: absolute; z-index: 2; }

/*-----------------------------------------------------------------------------------
  -5.1 Colour Picker
-----------------------------------------------------------------------------------*/

#tmnf-options .tmnf-marker-colourpicker-control .colorSelector { margin-top: 1px; }
#tmnf-options .tmnf-marker-colourpicker-control input.input-colourpicker { float: right; width: 248px; }
#tmnf-options .tmnf-marker-colourpicker-control br { clear: both; }