/**
 * UltraWave base styles for iMIS
 *
 * This document contains the base styles required to properly render iMIS.
 * DO NOT EDIT THIS DOCUMENT DIRECTLY. Your changes WILL be lost when you upgrade.
 * Instead, create a new style sheet to override the styles that you want to change.
 *
 * TABLE OF CONTENTS:
 * 1. Base
 *   1.1 Tables
 *   1.2 Headings
 * 2. Standard Panel
 * 3. Headings
 * 5. TitleBars
 * 3. Forms
 *   3.1 PanelField
 *   3.2 Basic form elements
 *   3.3 Form guides
 *   3.4 Form style modifiers
 *   3.5 Form field groupings
 *   3.6 Questions
 *   3.7 Buttons
 * 4. Master Page controls
 *   4.1 Loading Panels
 *   4.2 Page Tasks
 *   4.3 On Behalf Of control
 *   4.4 Sub (Left) Navigation
 * 5. Utility Classes
 * 6. Thumbnails
 * 7. Telerik Controls
 *   7.1 RadTreeView
 *   7.2 RadToolTip
 *   7.3 RadUpload
 *   7.4 RadGrid
 *   7.5 RadEditor
 *   7.6 RadScheduler
 *   7.7 RadMenu
 *   7.8 RadWindow
 *   7.9 RadSplitter
 * 8. RiSE
 *   8.1 Easy Edit
 *     8.1.1 Easy Edit icon buttons
 *     8.1.2 Easy Edit hover outlines
 *   8.2 Content Designer
 *   8.3 Tagged List Editor
 * 9. Pages an iParts
 * 10. Specific iPart styles
 *   10.1 Cart Charges
 *   10.2 Common Search
 *   10.3 Events and Products
 *      10.3.1 Event and product display
 *      10.3.2 Event summary
 *      10.3.3 Program item summary
 *      10.3.4 Event details
 *      10.3.5 Registrant info center
 *      10.3.6 Currently registering area
 *    10.4 Progress Tracker
 *      10.4.1 Default progress tracker
 *      10.4.2 Progress tracker 2
 *    10.5 Group List Editor
 *    10.6 SSRS Report
 *    10.7 Big Button Panel
 *    10.8 Social Share
 *    10.9 Query Menu
 *    10.10 Related Items
 *       10.10.1 Horizontal display
 *       10.10.1 Vertical display
 * 11. Alerts
 *   11.1 Inline alerts
 *   11.2 Page errors
 * 12. Legacy
 *   12.1 TitleBar
 *   12.2 Headings
 *   12.3 Process Manager/Marketing Suite
 *   12.4 Grids
 *   12.5 Form
 *   12.6 Navigation
 * 13. Unorganized styles
 */

/* #region
   ==========================================================================
   1. Base styles: defaults for base elements
   ========================================================================== */

/* 1.1 Tables
   ========================================================================== */
table
{
    border-width: 0;
}
/* hides borders around all nested web part zones - is overridden by later selectors where needed */
th, td
{
    border: 0 none;
    padding: 0;
}

/* 1.2 Headings: h1-h5 and alternative classes
   ========================================================================== */
/**
 * This is the styling of html headers. Using the heading tags is helpful for accessibility, 
 * but if they are not available the alternative classes may be used on divs for styling. 
 * 
 * Headings and alternative classes:
 * h1 = .PageTitle
 * h2 = .PanelTitle (used on titles for PanelTemplateControls - See section 3: StandardPanel)
 * h3 = .SectionTitle
 * h4 = .SectionLabel
 * h5 = .SectionLabelSmaller
 */
h1, .PageTitle
{
    font-weight:bold;
    font-size:250%;
    line-height:normal;
    margin:.3em 0;
}

/* .PanelTitle <span> Title of a StandardPanel - Used inside .PanelHead */
/* h2s are styled in the same way */
h2, .PanelTitle
{
    font-weight:bold;
    font-size:190%;
    line-height:normal;
}

h2, div.PanelTitle
{
    border-bottom: 1px solid #90979E;
    margin:.2em 0 .2em;
}

h2.PanelTitle 
{ 
    border-bottom: none;
    margin: 0;
    display: inline;
}

h3, .SectionTitle
{
    font-weight:bold;
    font-size:150%;
    line-height:normal;
    margin: .1em 0;
}

h4, .SectionLabel
{
    font-weight:bold;
    font-size:120%;
    line-height:normal;
}

h5, .SectionLabelSmaller
{
    display: block;
    margin: .2em 0 .2em 0;
    font-weight: bold;
    padding-left: 0;
}

/* #endregion base styles */

/* #region 
   ==========================================================================
   2. Standard Panel: Used by PanelTemplateControl
   ========================================================================== */
/**
  * Example HTML (automatically generated by the PanelTemplateControl):
  * <div class="StandardPanel">
  *
  *     <div class="PanelHead">
  *         <h2 class="PanelTitle">Title of the panel</h2>
  *         <div class="PanelHeadOptions">
  *             <a href="IconSprite EditIcon">Edit Panel</a>
  *             <input type="image" class="PanelHeadCollapseImage" />
  *         </div>
  *     </div>
  *
  *     <div class="PanelBody">
  *         ...
  *     </div>
  *
  * </div>
  */
/* .StandardPanel <div> Entire panel - Used by skin PanelTemplateControl */
.StandardPanel
{
    margin: 0 0 0.125em 0;
    padding: 0;
    border: solid 1px #90979E;
    clear: both;
}
.StandardPanel fieldset
{
    border: none;
    padding: 0.02em;
    margin: 0;
}
/* Hide the legend because we use our own custom header */
.StandardPanel fieldset legend
{
    display: none;
}

/* This puts a border around content below a set of tabs (e.g. Contact Address Editor iPart)*/
.ContentTabbedDisplay
{
    border: 1px solid #BBB;
    border-top: none;
    padding: 5px;
}
.StandardPanel.ContentTabbedDisplay
{
    border-top: none!important;
    padding: 0;
}

.StandardPanel.ContentTabbedDisplay>.PanelBody
{
    padding: 5px;
}

/* Puts a border on the bottom of PanelHeads that incldue a title */
.PanelHead.Distinguish, .TitleBarCaption
{
    border-bottom: 1px solid #90979E;
    min-height: 2em;
    padding:.3em;
}
/* Controls the behavior of a StandardPanel and the appearance of the expand/collapse element within the PanelHead */
/* Currently not used for any specific styling */
/*.Collapsible{}*/

/* PanelHeadOptions wraps any options for the panel (edit, add, collapse, etc.) added to the PanelHead
   via the PanelTemplateControl base class */
.PanelHeadOptions
{
    float: right;
    display: inline;
}
/* The image or text used to hide a panel. Which displays is determined by the skin file. 
   (see <asiweb:PanelTemplateControl /> in the skin file.) */
.PanelHeadCollapseImage, .PanelHeadCollapseText, .PanelHeadOptionsBox
{
    margin-right: 0.313em;
    display: inline;
}
.PanelHeadOptionsBox
{
    float: left;
}
.PanelHeadCollapseText
{
    text-decoration: underline;
    font-weight: normal;
}
/* Unstyled RadButtons in the PanelHead */
.PanelHeadOptions .rbSkinnedButton
{
    vertical-align: top;
    margin-right: 0.313em;
}

/* .PanelBody <div> Wrapper for the Body of a StandardPanel */
.PanelBody
{
    padding:5px;
    height: auto;
}
/* To prevent double padding in nested PanelBodies */
.PanelBody .PanelBody
{
    padding:0;
}
/* .PanelColumn <div> Wrapper for a Column of a StandardPanel */
.PanelColumn
{
    display:table-cell;
    float: none;
    margin-left: 0.125em;
    vertical-align: top;
}
/* #endregion standard panel */

/* #region
   ==========================================================================
   3. Forms
   ========================================================================== */

/* 3.1 PanelField: Wrapper classes for forms
   ========================================================================== */
/**
  * PanelField should be used to wrap all form fields in iMIS.
  * The correct syntax is automatically generated by asiweb controls when the property RenderPanelField is set to true.
  * Classes Top, Bottom, Left or Right are generated when the property CaptionPosition is defined, 
  * and describe where the label renders relative to the associated input.
  * If no caption position is set, the label will automatically render to the left.
  *
  * Example HTML:
  * <div class="PanelField Left">
  *     <label for="MyInput">This is a label</label>
  *     <div class="PanelFieldValue">
  *         <input type="text" ID="MyInput" />
  *     </div>
  * </div>
  *
  * Note: It is very important to assoicate a label with every form field.
  * This is automatically handled by asiweb controls when using the built-in caption rendering,
  * but will have to be set by hand when you opt not to use it.
  * In ASP.NET, setting the property AssociatedControlID on a Label control (or asiweb:StyledLabel)
  * will render the control as a label associated with the provided control ID.
  */

/* .PanelField <div> Wrapper for the label and value of a field in a form */
.StandardPanel .PanelField
{
    float: left;
    clear: left;
    width:95%;
    padding: 0.4em 0.125em;
    border: none;
}

.PanelFieldLabel, .PanelFieldValue, .PanelField.Left .PanelFieldLabel, .PanelField.Right .PanelFieldLabel, 
.PanelField.Left .PanelFieldValue, .PanelField.Right .PanelFieldValue
{
    display:inline-block;
    float:left;
}
.PanelField.Top .PanelFieldLabel, .PanelField.Bottom .PanelFieldLabel, 
.PanelField.Top .PanelFieldValue, .PanelField.Bottom .PanelFieldValue
{
    display:block;
    clear:left;
}

.Top label, .Bottom label
{
    width:auto!important;
}

/* Wrapper class "PanelBlock" may be used to make PanelFields display like tables. */
/* Use once around all the PanelFields that you wish to display in table format. */
.PanelBlock
{
    display:table;
}

.PanelBlock .PanelField
{
    display:table-row;
    float:none;
    width:100%;
}

/* Second set of selectors necessary to override original PanelField styling */
.PanelBlock .PanelField .PanelFieldLabel, .PanelBlock .PanelField .PanelFieldValue,
.StandardPanel .PanelBlock .PanelField .PanelFieldLabel, .StandardPanel .PanelBlock .PanelField .PanelFieldValue
{
    display:table-cell;
    float:none;
    padding-right:3px;
    vertical-align:top;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

.PanelBlock .PanelField label, .PanelBlock .PanelField .Label, 
.PanelBlock .StandardPanel div.PanelField label
{
    width:auto;
}

.PanelBlock .PanelField.Top .PanelFieldLabel, .PanelBlock .PanelField.Top .PanelFieldValue, 
.PanelBlock .PanelField.Bottom .PanelFieldLabel, .PanelBlock .PanelField.Bottom .PanelFieldValue
{
    display: block;
}

.PanelBlock.MiddleAlign .PanelFieldLabel, .PanelBlock.MiddleAlign .PanelFieldValue,
.StandardPanel .PanelBlock.MiddleAlign .PanelFieldLabel, .StandardPanel .PanelBlock.MiddleAlign .PanelFieldValue
{
    vertical-align: middle;
}

/* Used to make bottom borders line up in tables */
.StandardPanel td
{
    vertical-align: top;
}
.StandardPanel td .PanelField
{
    border-bottom: 0;
}

.StandardPanel .AutoScroll div
{
    overflow:auto;
}

.StandardPanel .PanelField .PanelFieldValue, .PanelFieldValue
{
    padding-left: 3px;
    padding-right: 3px;
    display: inline;
    float: left;
    width: auto;
}

/* Sizes of the HTML Editors and Textareas */
.PanelField div + .HtmlEditor
{
    width: 100%!Important;
}

textarea
{
    width: 22em;
}

/* special PanelFieldValue case for when the label is positioned on the top or bottom of a value control */
.StandardPanel div.Top .PanelFieldValue, .StandardPanel div.Bottom .PanelFieldValue
{
    clear: left;
}
/* special Label case for when the label is positioned on the top or bottom of a value control */
.StandardPanel div.Top label, .StandardPanel div.Top .Label, .StandardPanel div.Bottom label, .StandardPanel div.Bottom .Label
{
    width: 99%;
}
/* Label within a Panel Field */
.PanelField label, .PanelField .Label
{
    float: left;
    text-align: left;
    width: 11em;
    word-wrap: break-word;
    font-size:inherit;
    white-space: pre-line;
}

/* "Label" class can be used to style items like labels without needing to use the <label> tag.
   Be aware that you always need one <label> tag associated with all <input> controls. */
/* "PanelFieldLabelFont" does the same as "Label", but "Label" is preferred */
label, .Label, .PanelFieldLabelFont
{
    font-weight: bold;
    color: #444;
    padding-left:3px;
}

/* Class LabelSpacer can be used as a wrapper to create a label-sized indention 
to appropriately align fields in a form */
.LabelSpacer
{
    padding-left:11em;
}

/* ensure a minimum width for empty input controls within PanelTemplateControls */
.StandardPanel .PanelFieldValue input[type=text], .StandardPanel .PanelFieldValue input[type=password]
{
    min-width: 10em;
}

/* allow radio buttons to display to the left of their labels */
.PanelFieldValue input[type="radio"]
{
    float:left;
}

/* Problem Displaying Multiple SmartControls or ASI... Controls on the SAME line. */
.PanelColumn .PanelField /*, .PanelColumn .PanelField .PanelFieldValue - no longer necessary??*/
{
    width:100%;
}

/* Override styling for PanelFields within grid headers */
.rgHeader .PanelField 
{
    float: none;
    clear: none;
    width: auto;
    padding: 0;
    display: inline;
}

/* 3.2 Basic form elements
   ========================================================================== */
input
{
    font-family: inherit !important; /** added !important to override Telerik default **/
    font-size: 0.98em !important; /** added !important to override Telerik default **/
    font-weight: 100 !important; /** added !important to override Telerik default **/
    padding-left: 0.25em !important; /** added !important to override Telerik default **/
    padding-right: 0.25em !important; /** added !important to override Telerik default **/
}

textarea 
{
    padding: 0.25em; /* Added to give textarea same padding as other input fields */
}

/* put a gray background on disabled inputs */
input[disabled], select[disabled], textarea[disabled], 
input[readonly], select[readonly], textarea[readonly] 
{
    cursor: default;
    background-color: #eeeeee; 
}

/* override the gray background on particular types of inputs */
input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly],
input[type="checkbox"][readonly], input[type="image"][disabled] 
{
    background-color: transparent; 
}

/* "gray out" image buttons when they are disabled */
input[type="image"][disabled] 
{
    filter: alpha(opacity=50);
    opacity: 0.5; 
}

/* disabled span and labels */
span[disabled], label[disabled], [disabled] label, .Disabled
{
    color: #999 !Important;
}

/* For the labels associated with a radio button, put a tiny bit of distance from the radio button
 * to the label, and slightly more space from the label to the next element. This avoids the 
 * appearance of too closely spaced radio buttons when the controls are presented horizontally.
 */
div.PanelField input[type="radio"] + label
{
    padding-left: 4px;
    padding-right: 1em;
}

select[multiple="multiple"]
{
    min-width: 11em;
}

/* 3.3 Form guides
   ========================================================================== */
/* Indicators and helpers to guide a user through a form */
/* The required class should be applied to the label of a required field.
 * It displays the red asterisk next to the label */
.Required
{
    background-position: left .45em !important;
    padding-left: 9px !important;
    margin-left: -6px !important;
    background-image: url(images/required.png) !important;
    background-repeat: no-repeat;
    display: inline;
}
/* special case where a required label is displayed to the right of a field */
.Right .Required
{
    padding-left: 9px !important;
    margin-left: 0 !important;
}
/* The important class should be applied to validation messages (eg. Required)
 * that appear next to fields that fail validation on submit */
.Important
{
    /*font-family: small-caption;*/
    font-weight: normal;
    color: #FF0000;
    padding-left: 3px !important;
    vertical-align:middle;
}
/* Helper text to describe the purpose of a field */
.Info
{
    font-style: italic;
    font-weight: normal;
    color: #444;
}
/* .moreInfo <div> used by the info control to display a help pop-up */
.moreInfo
{
    display:inline;
    vertical-align:middle;
}
.moreInfoPanel
{
    display: block;
    max-width: 25em;
}

.unitText
{
    margin-left: 2px;
    white-space: nowrap;
}

/* 3.4 Form style modifiers
   ========================================================================== */
/* Apply the WideTextBox class on inputs that should be wider than normal (eg. inputs for URLs) */
.WideTextBox
{
    min-width:25em;
}
/* Apply the NarrowTextBox class on inputs that should be narrower than normal (eg. inputs for quantity) */
.NarrowTextBox
{
    max-width:3em;
    min-width:2em!important;
}
/* Apply the AutoWidth class to allow form fields to take up on the necessary amount of space */
.AutoWidth label, .AutoWidth .Label, .AutoWidth .PanelFieldValue, .AutoWidth
{
    width: auto !important;
    min-width: 1em !important;
}

/* For AutoWidth labels, this adds padding to the right so there is more space between the label and value */
label.AutoWidth, .Label.AutoWidth
{
    padding-right: .6em;
}

/* Apply the FloatNone class to allow form fields to render without floats
 * It is particulary useful for checkbox and radio button controls */
.FloatNone label, .FloatNone input
{
    float: none !important;
}
/* Highlight input fields when they have focus */
/* AR note 6/17/13 - I'm not sure if this is being used anywhere - may be able to remove it */
.StandardPanel fieldset div.focus, .focus, 
.StandardPanel fieldset div.focus:hover, .focus:hover
{
    border-color: #BCBCBC;
    background-color: #CDCDCD;
}

/* CheckBoxList: Wrapper class for a list of related checkboxes */
.CheckBoxList label
{            
    float: none !important;
    font-weight: normal !important;
    color: Black !important;
}
.CheckBoxList input
{
    float: none !important;
}

/* 3.5 Form field groupings
   ========================================================================== */
/* These classes can be used to visually associate sections of a form */
/* Used as a wrapper for items that are a subset of another item
 * eg. options that are only enabled if the checkbox above them is checked */
.SubItems
{
    padding-left:2.2em;
	padding-top: .5em;
}

/* Used for configuration group titles */
.ConfigurationGroup
{
    text-decoration:underline;
}

/* Fieldsets are hidden by default, but if you use the class ShowFieldset 
 * either on the fieldset or as a wrapper it will display. */
div.ShowFieldset fieldset legend, fieldset.ShowFieldset legend
{
    display: block;
    color: #222;
    font-weight:bold;
    padding:5px;
}
div.ShowFieldset fieldset, fieldset.ShowFieldset
{
    border: 1px solid gray;
    padding: 1em;
    margin: .05em;	
}

/* 3.6 Questions
   ========================================================================== */
/* These selectors affect form questions and responses displayed for events and program items   */
.FormFieldResponse .PanelFieldValue
{
    padding-top: .5em;
    padding-bottom: .5em;
}

.FormFieldResponse .PanelFieldLabel
{
    display: block;
    float: none;
}

.PanelField.FormFieldResponse label
{
    float: none;
}

.FormFieldResponse input
{
    text-align: left !important;
}

/* 3.7 Buttons
   ========================================================================== */
/* IE7 and 8 - position text on the Upload button*/	
.TextButton
{
    vertical-align: middle;
}

/* Buttons that display at the bottom of the page (eg. Save & Close, Save, Cancel buttons) */
.CommandBar
{
    padding-top: 5px;
    z-index: 2;
    text-align: right;   
}
.CommandBar input, .CommandBar button
{
    margin-right: 5px;
    padding-left: 2px;
    padding-right: 2px;  
}
.ButtonPanel
{
    width: 100%;
}

/* Dashboard button box */
div.ButtonBox
{
    width: 100%;
    text-align: center;   
}

ul.ButtonBoxList
{   
    padding: 10px;
    list-style: none;
    overflow: hidden;
    margin: 0px 0px -30px 0px;
}

ul.ButtonBoxList li
{
    display: inline-block;
    margin-right: 15px;
    overflow: hidden;
    padding: 0 0 15px 0;
    position: relative;
}

ul.ButtonBoxList li a
{
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    display: block;
    height: 125px;
    overflow: hidden;
    padding: 10px 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
}

ul.ButtonBoxList li a:hover 
{
	border:1px solid #c8c8c8;
}

ul.ButtonBoxList li a p
{
    line-height: 20px;
    padding-bottom: 20px;
}

.Span1 
{
	width: 40px;
}
.Span2 
{
	width: 80px;
}
.Span3 
{
	width: 160px;
}
.Span4 
{
	width: 200px;
}

/* #endregion forms */


/* #region
   ==========================================================================
   4. Master Page controls
   ========================================================================== */
/* A few controls that are defined in the master page*/

/* 4.1 Loading Panels: displays a loading indicator when the page is loading 
   ========================================================================== */
.ProgressDiv
{
    height: 30px !important;
    width: 200px;
    position: fixed;
    z-index: 10000;
    text-align: center;
    vertical-align: middle;
    margin-top: 0.1em;
    padding-top: 0.625em;
    background-color: #efefef;
    border: 1px solid transparent;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}
/* Page loading styles - not sure if these loading panel styles are still used - may be deprecated */
body.loadingBody
{
    background-color: #ffffff;
}
#loadingHeader
{
    width: 100%;
    background-color: #7c7c7c;
    color: #FFFFFF;
    padding: 3px;
    margin: 0;
    text-align: center;
}
#loadingHeader:before 
{ 
  content: "Loading...";
  display: inline;
}
#loadingSpinner 
{
    position: absolute; 
    height: 50px;
    width: 50px;
    top: 50%; 
    left: 50%; 
    margin-top: -25px; 
    margin-left: -25px;
    background-image:url('../../AsiCommon/Images/spinner.gif');	
}

/* 4.2 Page Tasks: print, email and text-only buttons
   ========================================================================== */
#masterPageTasks .PrintButton, #masterPageTasks .TextOnlyButton, #masterPageTasks .ExitTextOnlyButton, #masterPageTasks .EmailButton
{
    width: 16px;
    height: 16px;
    display: block;
    background-repeat: no-repeat;
    float: left;
    margin-right: 3px;
    margin-left: 3px;
}
.PrintButton
{
    background-image: url('images/icon_printthispage.gif');
}
.TextOnlyButton
{
    background-image: url('images/icon_textonly.gif');
}
.ExitTextOnlyButton
{
    background-image: url('images/icon_exittextonly.gif');
}
.EmailButton
{
    background-image: url('images/icon_email.gif');
}
/* 4.3 On Behalf Of control
   ========================================================================== */
.ProxyTitleBar .InLineOption_Controls, .ProxyTitleBar .InLineOption_Controls_Always_Display
{
    float: none;
}


/* 4.4 Sub (Left) Navigation
   ========================================================================== */

#pagesubnav
{
    width:10em;
    min-width:10em;
}

#pagesubnav .RadTabStripVertical .rtsLink
{
    text-align:left;
}

.SubNavPanelHead
{
    font-size:1.8em;
    font-weight:bold;
    padding:10px;
}

/* #endregion master page controls */

/* #region
   ==========================================================================
   5. Utility Classes
   ========================================================================== */

/* Styling of the iMIS logo (Not currently in use)
.iMIS {}*/

/* ClearFix - place on the container of floating elements to fix alignment issues usually solved with a <div style="clear:both"></div> */
/* For more information on this fix visit http://csscreator.com/attributes/containedfloat.php */
.ClearFix:after, .PanelHead:after, .StandardPanel:after, .PanelBody:after, 
.CommandBar:after, .GridTitlePanel:after, .ContentTabbedDisplay:after, .BigButtonWrapper:after
{
    content: "."; 
    display: block; 
    height: 0; 
    line-height:0;
    font-size:0;	
    clear: both; 
    visibility:hidden;
}

/* Hide a section from both sighted and screen reader users.
 * DisplayNone is the preferred class out of these two. */
.DisplayNone, .hidden
{
    display: none;
}

/* Hide text visually but allow it to be used by screen reader and tab-only users*/
.screen-reader-text, .CaptionTextInvisible .rgCaption 
{
    position:absolute;
    left:-10000px;
    top:auto;
    z-index: 2000;
    font-size: .7em;
}
/* Display the text when focused so tab-only users can use it */
.screen-reader-text.show-on-focus:focus
{
    left: 3px;
    top: 1px;
    background-color: white;
}

/* Float a section to the right*/
.FloatRight, .PanelField.FloatRight
{
    float:right;
    width:auto;
    clear:right;
}
.FloatLeft
{
    float:left;
}
/* Center-align the text of a section */
.Center, .CenterText /*Note: CenterText is obsolete. Use Center instead. */
{
    text-align: center;
}
/* Place an element in the top right hand corner of the screen (e.g. the iPart help icon) */
.PositionTopRight
{
    position:absolute;
    right:0;
    margin-right:2em; /* needed to give room for the scroll bar */
    margin-top: .5em;
}
.FullSize
{
    width:100%;
    height:100%;
}

/* Turns off borders at the level at which it is placed */
.NoBorder
{
    border:none;
}

/* To break words that are too long (eg. email addresses) */
.BreakWord
{      
    word-wrap:break-word;
    word-break: break-all;
    white-space: normal;    
}

.Scroll
{
    overflow:auto;
}

/* Used by legacy iParts to display a border. Can also be used anywhere else to add a border to an object. */
.ContentBorder
{
    border: 1px solid #D8D8D8;
    padding: 0.313em;
}

/* Used for styling of currency values */
.DisplayCurrency
{
    text-align: right;
    text-decoration: none;
    font-family: inherit;
    width: 7em;
    display: block;
}

/* Used for styling in table cells */
.AlignRight 
{
    text-align: right;
}

.AlignCenter
{
    text-align: center;
}

.AlignLeft
{
    text-align: left;
}

/* Used for styling of currency values in a price override control */
.PriceOverride
{
    width: 4em !important;
    max-width: 4em!important;
    min-width: 4em!important;
}

/*generic width specifiers*/
.FullWidth
{
    width: 100%;
}

.TwoColumns
{
    width: 50%;
}

.ThreeColumns
{
    width: 33%;
}

/* Used to bold text (Note: not sure if this is a necessary class - you should be able to use <strong> or <b> if it is non-symantic) */
.Significant
{
    font-weight:bold;
}

/* Use TotalBox as a wrapper for a PanelField to give it a visual distinction.
 * It is intended to be used to call out the total combined price. */
.TotalBox .PanelField, .PanelField.TotalBox
{
    width:auto;
    border:1px solid #90979E;
}
.StandardPanel .TotalBox .PanelField .PanelFieldValue, .StandardPanel .PanelField.TotalBox .PanelFieldValue
{
    font-size:1.2em;
    font-weight:bold;
    padding:.4em;
    float:right;
}

/* Apply padding to the Document specific icon */
.icon
{
    /* since you can't set width on an inline element, just set enough padding so our background image (the icon) will show */
    padding: 3px 7px 3px 7px;
    background-position:center; 
    background-repeat:no-repeat; 
}

/* #endregion utility classes */

/* #region
   ==========================================================================
   6. Thumbnails
   ========================================================================== */
/* The thumbnail class is currently being used by the GroupListEditor control 
 * to render the group member thumbnails */
/* Makes tree thumbnail images a fixed size */
.MediumThumbnail img.rtImg
{
    width: 32px;
    height: 32px;
}

/* Makes thumbnail images medium size */
.MediumThumbnail img.Thumbnail
{
    width: 32px;
    height: 32px;
    padding-right: 3px;
}

/* #endregion thumbnails */

/* #region
   ==========================================================================
   7. Telerik Controls
   ========================================================================== */

/* For IE the Rad date and time input field height behave different that Chrome & FF */
html body .PanelFieldValue .riSingle [type='text'].riTextBox
{
    height: 1.75em !important;
}

/* Reset fonts on various Telerik Controls */
.RadUpload_Default, .RadUpload_Default a, .RadUpload_Default input, 
.RadUploadProgressArea_Default, .RadUploadProgressArea_Default input, .RadUploadSubmit, 
.RadGrid, .RadGrid .rgMasterTable, .RadGrid .rgDetailTable, .RadGrid .rgGroupPanel table, .RadGrid .rgCommandRow table, 
.RadGrid .rgEditForm table, .RadGrid .rgPager table, .GridToolTip, .RadTreeView, .RadTreeView a.rtIn, .RadTreeView .rtEdit .rtIn input,
.RadSplitter
{
    font: inherit!Important;
    font-family:inherit!Important;
}

/* 7.1 RadTreeView
   ========================================================================== */
/* Gives tree nodes a clickable look */
.RadTreeView [onclick]:hover
{
    cursor:pointer;
}
/* 7.2 RadTooTip
   ========================================================================== */
/* Links in the RadToolTip control were not obvious enough. Needed a little bit of tweeking.
 * Example usage: the QueryMenu control's "Select a query" drop-down
 */
/* This is needed so that any StyledHyperlinks within a RadToolTip will show the 'hand' cursor on hover. */
.RadToolTip_Telerik a
{
    cursor: pointer !important;
    color: Black;
}

.RadToolTip_Telerik a:hover
{
    background-color:#DDD;
}

.RadToolTip_Telerik a.fb_button:hover
{
    background-color:#29447e;
}

/* Style of the QueryMenu popup column headers. */
.ColumnHeader
{
    font-weight: bold !important;
}
/* Style of the QueryMenu result grid headers. */
.ResultsHeader
{
    font-weight: bold !important;
}

/* The RadToolTip used by the GroupListEditor for the hover pop-up */
.AdvancedToolTip
{
    background: #ffffff;
    padding: 5px;
    font-size: 0.9em;
}

/* 7.3 RadUpload
   ========================================================================== */
/* Fixes an alignment issue for the rad uploader */
.RadUpload .ruFileInput, .RadUpload .ruFakeInput, 
.RadUpload .ruButton, .RadUploadProgressArea .ruButton, 
.RadUpload .ruFileWrap
{
    vertical-align:middle!important;
}

/* Upload Image displayed as a list and Upload buton is off */
.RadUpload .ruInputs li 
{
    list-style-type:none;
}
/* Sets Button position next to the radUpload element */
.RadUpload + .TextButton
{
    float: left;
    margin-top: .1em!Important;
    margin-left: 0!Important; /* Very Odd but IE8 needs it otherwise it is going wild*/
}

/* Special Style Override styles for Telerik RadUpload control */
.RadUploadProgressArea ul li
{
    list-style-type:none!Important;
    display: block;
}

.RadUpload .RadUpload_Default, .RadUpload .ruFileWrap
{
    padding-right: 2px!Important;
    width:auto!Important;
}

/* Sets left Padding for elements inside PanelTableValue */
.PanelTableValue img, .PanelTableValue .RadUpload
{
    padding-left: 0.250em;
}

/* 7.4 RadGrid
   ========================================================================== */
/* Resolve missing left border in the header and footer paging sections when rendered in Firefox */
.RadGrid_Default .rgPager .rgPagerCell
{
    border-width: 1px 0 1px 0 !important;   
}

.RadGrid .rgHeader a
{
    text-decoration:underline!important;
}

/* add a wide border to sub-grids to create visual separation */
.RadGrid .rgMasterTable .rgDetailTable, .ChildGridWrapper .rgMasterTable
{
    border: 10px solid #ddd;
}

/* Use to style the lister grid when use in a compact view */
.SimpleGrid TR TD
{
    padding-bottom: 0.188em;
    padding-top: 0.188em;
}

/* 7.5 RadEditor
   ========================================================================== */
/* Used in configuration for the HTML iPart */
.RadEditor.reWrapper.HtmlEditor
{
    height: auto !important;
}

/* 7.6 RadScheduler
   ========================================================================== */
/* Used by the Event Calendar iPart */
/*IE8 browser hack so that the RadScheduler displays correctly */
.rsHorizontalHeaderTable, .rsContentTable 
{
    width/*\**/: 100%\9;    
}

/* 7.7 RadMenu
   ========================================================================== */
/* Used by the primary navigation bar (PageNavR) and ObjectBrowser */
/* Apply z-Index to RadMenu generally */
.RadMenu 
{
    z-Index: 100 !Important;	
}
/* Make the navigation menu items overlay other RadMenu instances */
.rmSized 
{
    z-Index: 1000 !Important;
}	
/* Applies to links in navigation menu */
.RadMenu .rmItem a.rmLink
{
    min-width: 10px !important;
    cursor: pointer;
}
.RadMenu .rmItem a.rmLink.rmDisabled
{
    cursor: default;
}
/* Handle the case where the menu bar does not expand horizontally to the size of the parent container */
.RadMenu ul.rmHorizontal
{
    float: none !important;
}

/* The RadContextMenu is used by the options drop-down control on TitleBar */
.RadMenu.RadMenu_Context 
{
    /* This is required to display the On Behalf Of control's action dropdown 
       on top of the primary nav menu in the Staff Site  */
    z-Index: 7000 !Important;
}  

/* 7.8 RadWindow
   ========================================================================== */
/* Remove the space in the RadWindow title bar where the window icon would display */
.RadWindow .rwIcon
{
    width: 0 !important;
    height: 0 !important;
}

/* Styles for the Title in the Lister2 control */
.GridTitlePanel .Title
{
    font-weight:bold;
    font-size:120%;
}

/* 7.9 RadSplitter
   ========================================================================== */
/* Lighten up the RadSplitter border color to better match the rest of Object Browser */
.RadSplitter_Default, .RadSplitter_Default .rspPaneTabContainer, .RadSplitter_Default .rspPane, 
.RadSplitter_Default .rspResizeBar, .RadSplitter_Default .rspSlideContainerResize, 
.RadSplitter_Default .rspPaneHorizontal, .RadSplitter_Default .rspResizeBarHorizontal, 
.RadSplitter_Default .rspSlideContainerResizeHorizontal
{
    border-color: #ccc !important;
}

/* #endregion telerik controls */

/* #region
   ==========================================================================
   8. RiSE
   ========================================================================== */

/* Used in ObjectBrowser2 and PanelEditor when dragging/dropping */
.dragContainer
{ 
    position: absolute;
    z-index: 999;
    cursor: move; 
    background-repeat:no-repeat;
    cursor: move; 
    background-color: White;
	border: solid 1px black;
    padding:2px;
}
.dragItem
{
    cursor: default;
    padding-left:18px; 
    background-repeat:no-repeat;
    min-height:20px;
    font-weight:bold;
}

/* 8.1 Easy Edit
   ========================================================================== */
/* The border that surrounds 'hidden' iParts when in Easy Edit mode */
.NoContentSTEContainer
{	
    border: 1px dashed #D8D8D8;
    padding: 0.313em;
}

/**
 * 8.1.1 Easy Edit icon buttons
 */
/* Easy Edit toggle */
.SurfEditOn
{
    vertical-align: middle !important; 
}
.SurfEdit img, .SurfEditOn img
{
    margin: 0 auto;
    padding: 2px;
}
.SurfEdit, /* Easy Edit toggle */ 
.ContentRecordPageButtonPanel, .ContentItemButtonPanel, /* iPart/Page edit icons */
.EditModeIndicator, .EditModeIndicatorEnabled /* Edit mode toggle on GLE */
{
    cursor: pointer;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease; 
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; 
}

.SurfEdit, .EditModeIndicator, .EditModeIndicatorEnabled
{      
    border: 1px solid transparent;
    padding-left: 0 !important;
    padding-right: 0 !important;   
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;  
}
.SurfEdit
{
    background-image: url('images/enablesurftoedit.png');  
}
.SurfEdit:hover, .DisableSurfToEditButton, /* Easy Edit toggle */
.EditModeIndicator:hover, .EditModeIndicatorEnabled /* Edit mode toggle on GLE */
{       
    border: 1px solid #c28a30 !important; /* important needed to override inline stying on input type="image" */
    background-color: #ffd96c;                    
}

/* iPart and page edit icons */
.ContentRecordPageAnchor
{
    display: block;  
}

/* Content configuration */
.ContentRecordPageButtonPanel
{ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5; 
}
.ContentRecordPageButtonPanel:hover
{
    background-color: #316ac5;     
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1;                
}

/* iPart configuration */
.ContentItemButtonPanel
{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;     
}
.ContentItemButtonPanel:hover
{
    background-color: #c5e2f9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: .9;   
}
.ContentItemButtonPanel img
{
    padding: 2px 2px 1px 0;  
    display: block;   
}

.ContentRecordPageAnchor img
{
    padding: 4px 2px 2px 2px;
    display: block;
}

/**
 * 8.1.2 Easy Edit hover outlines
 */
/* Hover outlines when in EasyEdit (Surf to Edit) */
/* Only display if the screen is wider than 700px (ie. don't display on a mobile phone) */
@media all and (min-width: 700px)
{
    .EasyEditOn .ContentPanel, .EasyEditOn .EmptyMasterContentPanel,
    .EasyEditOn .iMIS-WebPart, .EasyEditOn .EasyEditContent .WebPartZone > div,
    .EasyEditOn #masterLogoArea, .EasyEditOn #masterSocialNetworking, .EasyEditOn #masterFooterCommunications,
    .EasyEditOn #masterFooterContent.ContentFooter, .EasyEditOn #ste_container_FooterArea, .EasyEditOn #ste_container_FooterCopyright
    {
        padding: 0.1em;
        border: 2px solid transparent;
    }

    /* iPart areas */
    .EasyEditOn .iMIS-WebPart:hover, .EasyEditOn .EasyEditContent .WebPartZone > div:hover, .EasyEditOn #masterLogoArea:hover,
    .EasyEditOn #masterSocialNetworking:hover, .EasyEditOn #masterFooterCommunications:hover,
    .EasyEditOn #masterFooterContent.ContentFooter:hover, .EasyEditOn #ste_container_FooterArea:hover, .EasyEditOn #ste_container_FooterCopyright:hover
    {
        padding: 0.1em;
        border: 2px dashed #c5e2f9;
        background-color: #fff;
    }

    .EasyEditOn .EasyEditContent:hover .ContentItemButtonPanel, .EasyEditOn #masterLogoArea:hover .ContentItemButtonPanel,
    .EasyEditOn #masterSocialNetworking:hover .ContentItemButtonPanel, .EasyEditOn #masterFooterCommunications:hover .ContentItemButtonPanel,
    .EasyEditOn #masterFooterContent.ContentFooter:hover .ContentItemButtonPanel, .EasyEditOn #ste_container_FooterArea:hover .ContentItemButtonPanel, .EasyEditOn #ste_container_FooterCopyright:hover .ContentItemButtonPanel
    {
        background-color: #c5e2f9;
    }

    /* Content item area */
    .EasyEditOn .ContentPanel:hover, .EasyEditOn .EmptyMasterContentPanel:hover
    {
        padding: 0.1em;
        border: 2px dashed #316ac5;
        background-color: #eff3fb;
    }

    .EasyEditOn .ContentPanel:hover .ContentRecordPageButtonPanel, .EasyEditOn .EmptyMasterContentPanel:hover .ContentRecordPageButtonPanel
    {
        background-color: #316ac5;
    }

    /* Master page template areas with no iPart or Content Item */
    .TemplateAreaEasyEditOn .ContentPanel:hover, .TemplateAreaEasyEditOn .EmptyMasterContentPanel:hover
    {
        padding: 0.1em;
        border: 2px solid transparent;
        background-color: transparent;
    }
}

/* 8.2 Content Designer
   ========================================================================== */
.WebPartsPanel
{
    background-color: #fff;
    clear: both;
    width: 100%;
}

.WebPartZoneDesignTime
{
    border: 2px solid transparent;
    padding: 0.385em;   
    width:100%;
}

.WebPartZoneDesignTime:hover
{
    border: 2px dashed #c5e2f9;           
    border-radius: 2px;            
}

.WebPartZoneDesignTimeAction, .WebPartZoneDesignTimeEmptyZoneText 
{
    text-align: center;
}

.WebPartZoneDesignTimeEmptyZoneText
{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 0;
}

.WebPartsTitleBar, .ConnectionTitleBar
{
    font-weight: bold;   
    color: #fff;
    background-color: #293c7c;
    line-height: 24px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: .8em;
    font-family: Verdana, Helvetica, Arial, Sans-Serif; 
}

.WebPartsTitleBar a, .WebPartsTitleBar a:hover
{
    font-weight: normal;
    color: #fff;
    font-size: .8em;
    text-decoration: none;
    padding-left: 2px;
}
.WebPartsTitleBar a:hover
{
    color: #dedede;
}

.WebPartDesignMenu
{
    border:1px solid #293c7c;
    width:10px;
    font-family:Verdana;
}

/* iParts Connection Panel */
.ConnectionWebPartsPanel
{
    clear: both;
    margin-left:auto; 
    margin-right:auto;
}
.ConnectionTitleBar
{
    font-size:.8em;
}
.ConnectionWebPartLabel
{
    text-align: left;
    min-width: 15em;
    padding: 3px;
    white-space: nowrap;	
}
.ConnectionWebPartsPanel TD TABLE TD
{
    padding: 3px;
}

/* Define overflow so Content Edit page will properly display oversized iParts. */
.LayoutBorder
{
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-y:hidden;
    -ms-overflow-x:auto;
}

/* Content editor drag-and-drop (used by jQueryUI)
 * Adds our indicators when we drag iParts around to show where they can be dropped*/
.ui-state-hover
{
    background-color: #aaaaaa;
    border: solid 2px #aaaaaa;
}
.ui-state-active
{
    border: dashed 2px #aaaaaa;
}

/* 8.3 Tagged List Editor
   ========================================================================== */
/* Icons used in tagged lists */
.ImportantContent, .MembersOnlyContent
{
    padding: 0 10px;
}
/* The "new" icon in tagged lists */
.reToolbar .reTool .iMISNewContentTool, .ImportantContent
{
    background: url(../../AsiCommon/Images/AtomPainter/iMISNewContentTool.gif) no-repeat center center;
}

/* The key icon to indicate member-only content in tagged lists */
.reToolbar .reTool .iMISMembersOnlyTool, .MembersOnlyContent
{
    background: url(../../AsiCommon/Images/AtomPainter/iMISMembersOnlyTool.gif) no-repeat center center;
}

/* The "{...}" icon used for conditional display in the HTML editor */
.reToolbar .reTool .iMISConditionalDisplayTool 
{
    background: url(../../AsiCommon/Images/AtomPainter/iMISConditionalDisplayTool.gif) no-repeat center center;
}

/* The iMIS link icon used in the HTML editor */
.reToolbar .reTool .iMISLinkTool 
{
    background: url(../../AsiCommon/Images/AtomPainter/iMISLinkTool.gif) no-repeat center center;
}

/* The iMIS label icon used in the HTMl editor */
.reToolbar .reTool .iMISLabelTool 
{   
    background: url(../../AsiCommon/Images/AtomPainter/iMISLabelTool.gif) no-repeat center center;
}
/* #endregion rise */

/* #region
   ==========================================================================
   9. Pages and iParts
   ========================================================================== */
/* A zone that can contain iParts*/
.WebPartZone
{
    width: 100%;
}
/* Put a little padding around iParts */
.iMIS-WebPart > .ContentItemContainer
{
    padding:0.385em;
    display:block;
}
/* #endregion pages and iParts */

/* #region
   ==========================================================================
   10. Specific iPart styles
   ========================================================================== */

/* 10.1 Cart Charges
   ========================================================================== */
.CartCharges 
{
	max-width: 30em;
    padding: 3px;
}
.CartCharges label, .CartCharges .Label 
{
	width: auto!important;
    padding-right: 10px;
}
.CartCharges .PanelFieldValue 
{
	float: right!important;
	text-align: right;
}
.CartCharges .PanelField
{
	border-bottom: 1px solid #ddd;
    width: 99%;
}
.CartCharges .GrandTotal
{
	font-weight: bold;
}

/* 10.2 Common Search
   ========================================================================== */
.SearchField *
{
    vertical-align: middle;
}

.SearchField
{
    padding: 8px 12px;
}

.SearchResult
{
    margin: .5em 0;
}

.SearchResultSummary .ImageSection
{
    float: left;
    width: 8em;
    text-align: center;
}

.SearchResultSummary .ImageSection img
{
    max-width: 7.5em;
}

.SearchResultSummary .ListItemTitle a
{
    font-size: 140%;
    font-weight: bold;
}

.SearchResultSummary .ListItemTitle img
{
    vertical-align: middle;
    padding-left: 8px;
}

.SearchResultSummary .Description
{
    float: none;
    text-align: left;
    margin-left: 8.5em; /* Don't wrap under the generic result image */
}

.SearchResultSummary .PublishDate
{
    color: #666;
}

/* 10.3 Events and Products
   ========================================================================== */
/**
 * 10.3.1 Event and product display - the overall layout of the event, program item or product display
 * Includes the image, description, price, etc.
 * 
 * Example HTML:
 * <div class="EventDisplay">
 *   <div class="EventSummary">...</div>
 *   <div class="EventDetails">...</div>
 * </div>
 */
.EventSummary, .EventSummary .DetailsBlock, 
.ProductSummary, .ProductSummary .DetailsBlock
{
    display: table;
    width: 100%;
}

/**
 * 10.3.2 Event summary */
/* Contains the event or product image and description
 *
 * Example event HTML:
 * <div class="EventSummary">
 *   <div class="PhotoArea">
 *     <img src="path/to/image.jpg" alt="Cairns at night" />
 *   </div>
 *   <div class="Description">Come to our super-cool event!</div>
 */
.EventSummary .PhotoArea 
{
    float: left;    
}

.EventSummary .DesignTimePhotoArea, .EventSummary .Description, 
.EventSummary .Details, .EventSummary .RegistrationArea
{ 
    vertical-align: top;
}

.EventDisplay .PricingData
{
    padding-top: 1em;
}

/**
 * 10.3.3 Program item summary
 * Contains all details of the program item and 
 * the itenerary information and displays them a grid-like format in the program item list iPart
 * 
 * Example program item HTML:
 * <div class="ProgramItemSummary">
 *
 *   <div class="DescriptionColumn">
 *     <div class="ListItemTitle">The title of the program item <span class="InItinerary">In Itenerary</span></div>
 *     <div class="Description">Some info about the program item.</div>
 *     <div class="PanelBlock Details">
 *       <div class="PanelField">
 *         <span class="Label">Track:</span>
 *         <div class="PanelFieldValue">Technical</div>
 *       </div>
 *     </div>
 *   </div>
 *
 *   <div class="WhenColumn">9:00 AM</div>
 *
 *   <div class="ItineraryColumn">
 *     <input type="button" class="TextButton" value="Add" />
 *   </div>
 * </div>
 * 
 */

.ProgramItemSummary
{
    padding: .75em;
}

.ProgramItemSummary .WhenColumn, .ProgramItemSummary .DescriptionColumn
{
    padding-right: .5em;
}

.ProgramItemSummary .WhenColumn, .ProgramItemSummary .IteneraryColumn
{
    width: 11em;
    float: left;
    clear: left;
}

.ProgramItemSummary .DeleteColumn
{
    width: 7em;
    float: right;
    clear: right;
}

.ProgramItemSummary .DescriptionColumn
{
    width: 72%;
    float: right;
    clear: right;
}
.ProgramItemSummary .WhenData
{
    display: block;
}
.ProgramItemSummary .ListItemTitle, .ProgramItemSummary .WhenData
{
    font-weight: bold;
    padding-bottom: .25em;
    line-height: 1.7em; /* to ensure none of the title is covered when the InItinerary indicator wraps */
}

/* Program item itenerary indicators */
.ProgramItemSummary .InItinerary, .ProgramItemSummary .HasConflict
{
    padding: .15em .25em .2em;
    border: 1px solid #CCC;
    white-space: nowrap;
}
/* Indicator when the program item is in your itenarary - Note the spelling mistake... */
.ProgramItemSummary .InItinerary
{
    background-color: yellow;
}
/* Indicator when the program item is in your itenarary 
 * but confilcts with another program item in your itenaray */
.ProgramItemSummary .HasConflict
{
    background-color: #D8000C;
    color: #FFFFFF;  
}

/**
 * 10.3.4 Event details
 * Contains event details such as date/time, price, and location.
 * Also includes the registration buttons and badge edit button.
 * 
 * Example program item HTML:
 * <div class="EventDetails">
 *
 *   <div class="ContactLocationArea">
 *       <div class="PanelField Left">
 *         <span class="Label">Price:</span>
 *         <div class="PanelFieldValue">450.00</div>
 *       </div>
 *       <div class="PanelField Left">
 *         <span class="Label">When:</span>
 *         <div class="PanelFieldValue">5/15/13 1:00 PM - 5/16/13 5:00 PM</div>
 *       </div>
 *     </div>
 *   </div>
 *
 *   <div class="RegistrationArea">
 *     <input type="button" class="TextButton PrimaryButton" value="Register Myself" />
 *     <input type="button" class="TextButton" value="Register Someone Else" />
 *     <div class="PanelField Left">
 *       <span class="Label">My Registration Status:</span>
 *       <div class="PanelFieldValue">Not Registered</div>
 *     </div>
 *   </div>
 *
 * </div>
 * 
 */
.EventDetails
{
    display: block; 
    padding-bottom: 1em;
    padding-top: 1em;
}

.ContactLocationArea
{
    width: 50%;
    float: left;
}

.RegistrationArea
{
    width: 50%;
    float: left;
}

.ContactLocationArea .PanelField label, .ContactLocationArea .PanelField .Label
{
    width: 5em;  
}

.ContactLocationArea .PanelField 
{  
    padding-bottom: .5em;
}

.RegistrationArea .TextButton
{
    margin-bottom: 0.5em;
    width: 80%;
}

.PricingData .rgMasterTable label
{
    font-weight: normal;
}

/** 
 * 10.3.5 Registrant info center - contains badge information for a registrant in an editable format
 *
 * Example HTML:
 * <div class="ReginstrantInfoContainer">
 *   <a href="javascript(...)">Add a new address</a>
 *   <div class="RegistrantInfoAddressList">
 *     <div class="RegistrantInfoAddressListItem">
 *        <a href="javascript(...)">Use this address</a>
 *        <!-- One available address -->
 *     </div>
 *     ...
 *   </div>
 *
 *   <div class="RegistrantInfoEntry">
 *     <div class="RegistrantInfoBadgeBackground">
 *       <div class="RegistrantInfoBadge">
 *         <img src="path/to/event/image.jpg" alt="Cairns at night" />
 *         <fieldset>
 *           ... <!-- Name (read only), informal name, title and organization -->
 *         </fildset>
 *       </div>
 *     </div>
 *
 *     <div class="RegistrantInfoAddressEntry">
 *       <h3>Home Address</h3>
 *       <table>
 *         <!-- address entry -->
 *       </table>
 *     </div>
 *   </div>
 * </div>
 */

.RegistrantInfoContainer
{
    padding: 1em;
    position: relative;
}

.RegistrantInfoEntry
{
    position: absolute;
    top: .375em;
    left: 1em;
    width: 69%;
    border-right: 1px dotted darkgray;
    padding-right: 1.5em;
}

.RegistrantInfoAddressList
{
    margin-left: 77%;
}

.RegistrantInfoAddressListItem
{
    border-bottom: 1px dotted darkgray;
    padding-top: .5em;
}

.RegistrantInfoBadgeBackground
{
    background-color: #ECECEB;
    padding: 1em;
    margin-bottom: .375em;
}

.RegistrantInfoBadge
{
    background-color: white;
    border: 1px solid #ADADAD;
    padding: 1em;
    margin: .625em;
}

.RegistrantInfoBadge img
{
    float: left;
    width: 130px;
    height: auto;
    padding-right: 10px;
}

.RegistrantInfoBadge label, .RegistrantInfoBadge .Label
{
    width: 8em;
}

.RegistrantInfoAddressEntry
{
    background-color: #F8F7F6;
    padding: 1em;
}

.RegistrantInfoAddressEntry .SectionTitle
{
    padding-bottom: 8px;
    padding-left: 8px;
}

/** 
 * 10.3.6 Currently registering area (aka PeoplePanel)
 * Displays a list of people the current user is regitering (using "Register someone else")
 * as selectable toggles to choose the active record.
 *
 * Example HTML:
 * <div class="PeoplePanel">
 *   <div class="PersonDisplay SelectedItem">
 *     <img src="path/to/profile/picture1.jpg" alt="[Selected Registrant's Name]" />
 *     <span>[Selected Registrant's Name]</span>
 *   </div>
 *   <div class="PersonDisplay">
 *     <a href="javascript(...)">
 *       <img src="path/to/profile/picture2.jpg" alt="[Unselected Registrant's Name]" />
 *       <span>Unselected Registrant's Name</span>
 *     </a>
 *   </div>
 * </div>
 */
.PeoplePanel
{
    display:block;
}

.PersonDisplay
{
    margin:.25em;
    padding:1em;
    display:inline-block;
    vertical-align:top;
    text-align:center;
    opacity:0.7;
    filter:Alpha(opacity=70); /* Sets the opacity for IE8 */
    width: 7.00em;
    word-wrap: break-word;
}

.PersonDisplay:hover
{
    opacity:1;
    filter:Alpha(opacity=100); /* Sets the opacity for IE8 */
}

.PersonDisplay span
{
    display:block;
    padding-top:.25em;
}

/* Remove underline from selectable items in person list */
.PersonDisplay a:link
{
    text-decoration:none;
}

/* Used in the PeoplePanel and elsewhere to denote a selected item within a group. */
.SelectedItem
{
    background-color:lightblue;
    opacity:1;
    filter:Alpha(opacity=100); /* Sets the opacity for IE8 */
}

/* 10.4 Progress Tracker
   ========================================================================== */
/* The progress tracker is a visual display of progress toward a goal */
/**
 * Example HTML:
 * <div class="ProgressTracker"> <!-- this is the class defined in iPart configuration -->
 *   <div class="ProgressTrackerPanel">
 *     <ul>
 *       <li>
 *         <span class="inset">
 *           <!-- the percentage of the goal reached -->
 *           <span class="count">80%</span>
 *           <span class="label">achieved</span>
 *         </span>
 *       </li>
 *       <li>
 *         <span class="inset">
 *           <!-- the amount acheived -->
 *           <span class="count">30,548</span>
 *           <span class="label">given this year</span>
 *         </span>
 *       </li>
 *       <li>
 *         <span class="inset">
 *           <!-- days left before the end date -->
 *           <span class="count">7</span>
 *           <span class="label">days remaining</span>
 *         </span>
 *       </li>
 *     </ul>
 *     <div class="ProgessBar">
 *       <span style="width:80%"></span><!-- the width is equal to the percentage achieved -->
 *     </div>
 *   </div>
 * </div>
 */
/**
 * 10.4.1 Default progress tracker
 * This class is configured by default on the progress tracker, but the content editor may assign
 * a different class, or remove it all together (which would make it display with default list item styles).
 * The default class will display small, with the three numbers displaying in a row above or below the progress bar.
 */
.ProgressTracker ul
{
    list-style-type: none;
    margin: 0;
}

.ProgressTracker li
{
    list-style-type: none;
    display: inline;  
}

.ProgressTracker .inset
{
    width: 32%;
    display: inline-block;
}

.ProgressTracker .label
{
    display: block;  
}

.ProgressTracker p
{
    color: #999;
}

.ProgressTracker .SuccessfulMessage 
{
    background: #316AC5;
    color: white;
    padding: 5px;
    margin: 3px 0;
    display: block;
    width: 100%;	
}
.ProgressTracker .ProgressBar, .ProgressTracker .ProgressBar > span
{
    position: relative;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
}

.ProgressTracker .ProgressBar 
{
    height: 10px;
    margin-top: 3px;
    margin-bottom: 3px;
    background: #DDD;
    width:100%;
}

.ProgressTracker .ProgressBar > span 
{
    display: block;
    height: 100%;
    background-color: #316AC5;
}

/**
 * 10.4.2 Progress tracker 2
 * The alternative view for the progress tracker.
 * Displays in a large block format with each number on its own row.
 */
.ProgressTracker2 ul
{
    list-style-type: none;
    margin: 0;
}

.ProgressTracker2 li
{
    list-style-type: none;
    display: inline;
}

.ProgressTracker2 .ProgressTrackerPanel
{
    margin: 0;
}

.ProgressTracker2 .ProgressTrackerPanel .inset
{
    text-align:center;
    line-height: 0.8;
    padding: 15px;
    display: block; 
}

.ProgressTracker2 .ProgressTrackerPanel .count
{
    margin-bottom: 5px;
    font-size: 3.5em;
    line-height: 1em;
    display:block;
}

.ProgressTracker2 .ProgressTrackerPanel .label
{
    color: #333;
    font-size: 1.3em;
    display:block;	
}

.ProgressTracker2 div p
{
    color: #333;
}
/* The progress bar */
.ProgressTracker2 .ProgressBar, .ProgressTracker2 .ProgressBar > span
{
    position: relative;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    border-radius:25px;
}
.ProgressTracker2 .ProgressBar {
    height: 20px;  /* Can be anything */
    margin-top: 3px;
    margin-bottom: 3px;
    background: #555;
    padding: 10px;
}
.ProgressTracker2 .ProgressBar > span {
    display: block;
    height: 100%;
    background-color: #73a5f3;
}

/* The message that displays when the goal is reached.
 * When it displays the progress bar is hidden. */
.ProgressTracker2 .SuccessfulMessage 
{
    background: #316AC5;
    color: white;
    padding: 5px;
    margin: 3px 0;
    display: block;
}

/* 10.5 Group List Editor
   ========================================================================== */
.RadTreeView.GLE
{
	white-space: normal;
}

/* Style GLE nodes differntly since they include 2 links */
.RadTreeView.GLE .rtHover .rtIn, .RadTreeView.GLE .rtSelected .rtIn
{
    border-color: transparent;
    background: none;
}
.RadTreeView.GLE a
{
    padding: 1px 6px 3px 6px;
}
.RadTreeView.GLE a:hover, .RadTreeView.GLE a:focus,
.RadTreeView.GLE span[onclick]:hover, .RadTreeView.GLE span[onclick]:active
{
    background-color: #C7EDF9;
}

/* 10.6 SSRS Report
   ========================================================================== */
/* Remove the blank.gif icon due to a missing parm that results in a broken image 
 * icon in non-IE browsers... https://connect.microsoft.com/VisualStudio/feedback/details/556989/#tabs */
img[src*="OpType=ReportImage&ResourceStreamID=Blank.gif"]
{
    display: none;
}

/* 10.7 Big Button Panel
   ========================================================================== */
.HorizontalButtons .BigButtonWrapper
{
    text-align: center;
    padding: 0;
}
.HorizontalButtons .BigButtonWrapper br 
{
	display: none;
}
.HorizontalButtons a.btn
{
    white-space: nowrap;
    margin-bottom: .3em;
}

.BigButtonWrapper.HasImage img
{
    max-width: 100px;
    margin-right: 5px;
    float: left;
}

.BigButtonWrapper.HasImage .BigButtonLinkList
{
    display: table-cell;
}

/* 10.8 Social Share
   ========================================================================== */
.RadSocialShare.LargeButtons .sshCustomIcon
{
    background-image: url(images/social-large.png);
    width: 32px;
    height: 32px;
}

.RadSocialShare.MediumButtons .sshCustomIcon
{
    background-image: url(images/social-medium.png);
    width: 24px;
    height: 24px;
}

.RadSocialShare.SmallButtons .sshCustomIcon
{
   background-image: url(images/social-small.png);
   width: 16px;
   height: 16px;
}

.sshLinkItem:hover .sshCustomIcon
{
    opacity: .7;
    filter: Alpha(opacity=70);
}

.sshCustomShareOnFacebook
{
    background-position: 0 0!important;
}

.sshCustomShareOnTwitter
{
    background-position: -40px 0!important;
}

.sshCustomMailTo
{
    background-position: -240px 0!important;
}

.sshCustomCompactButton
{   
    background-position: -280px 0!important;
}

/* 10.9 Query Menu
   ========================================================================== */
/* The map canvas when the Query Menu is configured to show a map of the results */
.MapCanvas 
{
    width: 100%; 
    height: 728px; 
    margin-bottom: 2px;  
}

/* 10.10 Related Items
   ========================================================================== */
/**
 * 10.10.1 Horizontal display
 */
.RelatedItemsHorizontal div.rrRelativeWrapper 
{
    padding-top: 10px;
}

.RelatedItemsHorizontalBlock 
{       
    text-align: center;
    width: 100%;
}

.RelatedItemsHorizontalCentered 
{
    display: inline-block;
}

ul.RelatedItemsHorizontal li,
.RelatedItemsHorizontal ul.rrItemsList li
{        
    list-style: none;
    float: left;
    padding: 10px;
    text-align: center;    
    width: 120px;
    height: 130px; 
} 

ul.RelatedItemsHorizontal li a[disabled=disabled], 
ul.RelatedItemsHorizontal li a.LabelLinkDisabled,
.HorizontalScrollItem a[disabled=disabled],
.HorizontalScrollItem a.LabelLinkDisabled
{
    font-weight: normal;
    text-decoration: none;
    color: inherit;
    display: block;   
}

ul.RelatedItemsHorizontal li a.LabelLink,
.HorizontalScrollItem a.LabelLink
{
    display: block;
}

.RelatedItemsHorizontalLessSpace li 
{
    padding: 3px!important;
    width: 75px!important;
    height: 75px!important;    
}

/* Horizontal with hover transition */ 
.RelatedItemsHorizontalEffect li a.ImageLink 
{
    margin-bottom: -5px;
    display: block;
}

.RelatedItemsHorizontalEffect li {
     -webkit-transition: all .2s ease-in-out;
}

.RelatedItemsHorizontalEffect li:hover 
{
    background-color: #EEE;
    -webkit-transform: scale(1.5);       
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;       
}

/**
 * 10.10.2 Vertical display
 */ 
ul.RelatedItemsVertical li {
    display: block;   
    padding: .5em;
    white-space: normal;
    overflow: hidden; 
} 

ul.RelatedItemsVertical li img {           
    padding-right: 5px;
    float: left;     
}

ul.RelatedItemsVertical li a {           
    vertical-align: middle    
}

ul.RelatedItemsVertical li a[disabled=disabled]
{
    font-weight: normal;
    text-decoration: none;
    color: inherit; 
}

ul.RelatedItemsVertical li label
{
    font-weight: normal;
    vertical-align: middle;
    display: block; 
}

/* #endregion specific iParts */

/* #region
   ==========================================================================
   11. Alerts (aka User Messages)
   ========================================================================== */
/**
 * These display at the top of the page to alert users of errors, warnings, successful completion, etc.
 * They are generated by the UserMessage control.
 * The iMISUserMessage classes are obsolete - use AsiMessage and Asi[MessageType] instead
 *
 * Example HTML:
 * <div class="AsiMessage">
 *   <ul>
 *     <li class="AsiError">
 *       <img class="iMISUserMessageIcon" src="images/AsiError.png" alt="Error icon" />
 *       <span>Oops! There's an error on this page!</span>
 *     </li>
 *  </ul>
 * </div>
 */

.AsiMessage ol, .AsiMessage ul
{
    margin: 0.3em;
}

.AsiMessage li
{
    list-style-type: none;
}

.AsiValidation, .AsiValidationSummary
{
    margin-left: 0.3em;
    margin-right: 0.3em;
    padding-top: 0;
    padding-bottom: 0;
}

.AsiInformation, .AsiSuccess, .AsiWarning, .AsiError, .AsiValidation, .AsiValidationSummary
{
    border: 1px solid;
    margin: 0.3em 0;
    padding: 10px 10px 16px 10px;
    color: #000000;
}

.AsiMessage span
{
    padding-top: 7px;
    display: block;	
}

.iMISUserMessageIcon 
{
    float: left;
    width: 32px;
    padding-right: 5px;  
}

.AsiInformation 
{
    border-color: #00529B;
    background-color: #BDE5F8;
}
.AsiSuccess 
{
    border-color: #4F8A10;
    background-color: #DFF2BF;
}
.AsiWarning 
{
    border-color: #9F6000;
    background-color: #FEEFB3;
}
.AsiError 
{
    border-color: #D8000C;
    background-color: #FFBABA;
}
.AsiValidation
{
    border-color: #D63301;
    background-color: #FFCCBA;
}
.AsiValidationSummary
{
    border-color: #D63301;
    background-color: #FFCCBA;
     background-repeat: no-repeat;
    background-position: 10px center;   
    background-image: url('images/AsiValidation.png');
    padding-left: 40px;   
}
.AsiErrorInline
{
    border-color: #D8000C!important;
    background-color: #FFBABA;    
    border: 1px solid;   
    font-weight: normal;
    padding: .5em;
    margin: 10px 0 5px 5px;
}

/* The iMISUserMessage classes are obsolete */
.iMISUserMessage li { list-style-type: none; }
.iMISUserMessage img { vertical-align: middle; margin-right: 5px; }
.iMISUserMessageError { color: red; font-weight:bold; }
.iMISUserMessageWarning, .iMISUserMessageInformation { color: blue; font-weight:bold; }
.iMISUserMessageLabel { display: none; /* hide the error/warning prefix */ }

/* Message Notification - I'm not sure if these are used anywhere - they may be able to be removed */
.info, .success, .warning, .validation
{
    margin: 5px 0;
    padding: 5px 5px 5px 5px;
    text-align: center;
    width: 100%;
    display: block;  
}
.info { color: #00529B; }
.success { color: #4F8A10; }
.warning { color: #9F6000; } 

/* 11.1 Inline alerts
   ========================================================================== */
.Error
{
    display:block;
    padding-right: 0.188em;
    padding-left: 0.188em;
    margin-bottom: 0.25em;
    width: auto;
    color: red;
    font-weight:bold;
}

/* Used for guiding the user to the next step, such as in the Event Display */
.HelperText
{
    color: #00529B;
    font-weight: bold;
}

/* If there's an error rendering an iPart a message will display with this class */
.iPartRenderError 
{
    color: red;
    overflow-x: auto;
    -ms-overflow-x: auto;
}


/* 11.2 Page errors
   ========================================================================== */
/* These styles are for error pages (page not found, access denied, etc.) */
.ErrorNormal
{
    padding: 10px;          
    display: block;
    margin: auto; 
    width: 400px;
    margin-left: auto;
    margin-right: auto;    
      
}
.ErrorNormal .ErrorType
{
    font-weight: bold;
    padding-top: 15px;
    display: block;
    font-size: 1.9em;
    color: #cc0f16;
}
.ErrorNormal .ErrorTypeMessage
{
    display: block;
    padding-top: 15px;
    font-size: 1.1em;
    color: #444;
}
.ErrorNormal img
{
    float: left;
}

/* #endregion alerts */


/* #region
   ==========================================================================
   12. Legacy (formerly Compatibility)
   ========================================================================== */
/* These styles support old functionality such as Marketing suite.
 * They should not be used for any new functionality. */

/* 12.1 TitleBar: Header controls used by legacy iParts
   ========================================================================== */

/* This makes the bottom border on TitleBarCaptions extend all the way to the border of its container */
.ContentBorder .TitleBarCaption
{
    margin-top: -0.313em;
    margin-left: -0.313em;
    margin-right: -0.313em;
    padding-left: 0.313em;
    padding-right: 0.313em;
}

/* The title in the TitleBarCaption */
.TitleBarTitle
{
    float: left;
}

.TitleBarActionBox
{
    width: 22px;
    height: 22px;
    display: inline-block;
    background-image: url('images/titlebaractionbox.gif');
    background-repeat: no-repeat;
    margin-left: 3px;
    vertical-align: middle;
}

/* The option controls on title bar captions */
.InLineOption_Controls, .InLineOption_Controls_Always_Display
{
    float: right;
}

/* The drop-down button on title bar captions */
.InLineOption_Controls input, .InLineOption_Controls_Always_Display input
{
    vertical-align: middle;
}

/* .InLineOption <div> used in the top title area of iParts */
.InLineOption .InLineOption_Controls
{
    display: none;
    cursor: pointer;
    background-color: #F4F4F4;
}

/* Can be used to enable a hover effect for the .InLineOption <div> used in the top title area of iParts */
.InLineOption:hover .InLineOption_Controls, .InLineOption .InLineOption_Controls_Always_Display
{
    display: block;
    cursor: pointer;
}

/* 12.2 Headings
   ========================================================================== */
.mdTitle, #mainTitle
{
    padding-top:.3em;
    font-weight: bold;
}

.mdTitle
{
    font-size:130%;
}

#mainTitle
{
    font-size: 150%;
    line-height: 2em;
    white-space: nowrap;
}

/* 12.3 Process Manager/Marketing Suite
   ========================================================================== */
.StageHeader 
{
    background-color: lightblue;
    font-weight: bold;
}

.StageHeader.StageSetup 
{
	cursor:pointer;
	border-top:1px solid darkgrey;
}

.StageBlock {
    border: 1px solid darkgray; 
    margin: .5em;
    clear: both;
}

.TaskHeading, .TaskBar, .WorkSpace {
	padding: 3px;
}

/* 12.4 Grids
   ========================================================================== */
/* These styles are used to style Grids like the default Telerik RadGrid */
.GridTitlePanel
{
	background: #ffffff;
	margin-top: 3px;
	margin-bottom: 3px;
}

table.Grid
{
	margin: 5px;
	border: #768ca5 1px solid !important;
}

table.Grid, table.Grid td, Table.Grid th
{
	border-collapse: collapse;
	padding-left: 7px;
	padding-right: 7px;
	vertical-align: middle;
}
table.Grid input
{
	vertical-align: middle;
}

Table.Grid td
{
    padding: 4px 7px;
    border: 1px solid #999;
    border-top: none;
}

Table.Grid .ajax__calendar_container td
{
    padding:0;
    margin:0;
    border:none;
}

Table.Grid th, table.Grid tr.GridHeader td
{
	background: #DDD url(images/panel/sliver_grey.gif) repeat-x;
	height: 28px !important;
	text-align: left;
	padding-left: 7px;
	padding-right: 7px;	
}

tr.GridHeader a
{
	text-decoration: none;	
}

table.Grid th a
{
	text-decoration: none;
	white-space: nowrap;
}

tr.GridHeader th.NumberStyle, tr.GridHeader th.PriceStyles
{
	text-align: center !important;
	white-space: nowrap;
}

table.Grid td, table.Grid tr.GridAlternateRow td, table.Grid tr.tableRowAlt td,
table.Grid tr.GridRowHover:hover td, table.Grid tr.GridAlternateRowHover:hover td
{
	background-color: #ffffff;
}

table.Grid .GridRowSelected, table.Grid .eventSelectedRegistrant
{
    background-color: #e0e3e6;
}

table.Grid .eventSelectedRegistrant
{
	font-weight: bold;
}

.DeleteImage, .EditImage
{
	margin: 1px;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center 50%;
	border: 0;
	background-color: transparent;
	display: block;
	cursor: pointer;
}

table.Grid .DisplayCurrency
{
    width: auto;
    padding-left: 5px !important;
    padding-right: 5px !important;
    text-align: right !important;
}

/* = Campaign Management using the expandable grid = */
table.ExpGrid, table.ExpGrid td, table.ExpGrid th
{
	border-collapse: collapse;
}
table.ExpGrid
{
	margin: 3px;
	border: #898d8f 1px solid !important;
}
table.Grid th, table.Grid tr.GridHeader td, tr.ExpGridHeader th, tr.ExpGridHeader td, tr.ExpGridRow2 td, table.ExpGrid td
{
	border-top: solid 1px #777;
	border-bottom: solid 1px #777;
	height: 28px !important;
}

table.Grid th, table.Grid tr.GridHeader td, tr.ExpGridHeader th, tr.ExpGridHeader td, tr.ExpGridRow2 td
{
	text-align: left;
	padding-left: 7px;
	padding-right: 7px;
}

/* Row with Solicitations */
tr.ExpGridRow2 td
{
	background-color: #DDD;
}

table.Grid tr.ExpGridAlternateRow td
{
	background-color: #ffffff;
}

/* Header row with Code, Segments, 1st Resp, Last Drop, Type, Member Type, Status */
table.ExpGrid tr.ExpGridHeaderSourceCode td, table.ExpGrid tr.ExpTableRowAlt td
{
	background-color: #CCC;
	height: 28px !important;
}

table.ExpGrid .DisplayCurrency
{
    width: auto;
    padding-left: 10px;
    padding-right: 5px;
}

/* Cart check out process tables */
.CartGridTable
{
	width: 375px;
}

span.CartGridTable table.Grid
{
	width: 375px;
}

.GridPrice
{
	width: 40px;
}

.GridSelect
{
	width: 40px;
}

.GridTableTitle
{
	width: 60%;
}

.rgWrap 
{
	white-space:normal !important;
}

/* Nested table IQA query filter popup calendar */
table.GridFilterCalendar, table.GridFilterCalendar td, table.GridFilterCalendar th
{
	border-collapse: collapse !important;
	background-color: #ffffff !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}
table.Grid tr.GridAlternatRow table.GridFilterCalendar td td, table.GridFilterCalendar
{
	background-color: #fff!important;
}

/* 12.5 Form - legacy table-based forms
   ========================================================================== */
/* .Form <table> A form, for display or input of values */
.Form
{
    padding: 0.313em;
    margin-top: 0.625em;
}
.Form th
{
    padding: 0.188em;
    font-weight: normal;
    text-align: left;
}
.Form td
{
    padding: 0.188em;
    margin: 0.188em;
}
/* The label of a required field in a form */
.Form th .Required
{
    background-position: left .45em !important;
    padding-left: 0.688em !important;
    margin-left: -0.462em !important;
    background-image: url(images/required.png) !important;
    background-repeat: no-repeat;
}

/* 12.6 Navigation
   ========================================================================== */
.NavBullet li
{
	color: #fe7921;
	list-style-type: square;
}

.NavSpan li span
{
	color: #000;
}

/* #endregion legacy */

/* #region
   ==========================================================================
   13. Unorganized styles
   ========================================================================== */
/* If you're not sure where to put some new styles you can add them here and a CSS admin will clean them up later.
 * Please don't use this section unless you really don't know where to put your new styles. */

.CenterChart .RadChart
{
    display: block; 
    margin-left: auto; 
    margin-right: auto;
    padding: 1em;
}

.Chart .RadChart
{
    display: block; 
    padding: 1em;
}

/* Chosen multi-select listbox styles */
/* @group Base */
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-family: Segoe UI,Helvetica,Arial,sans-serif;
  font-size: 14px;
  zoom: 1;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
  left: 0;
  position: inherit;
}
.chosen-container a {
  cursor: pointer;
}

/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 0 8px;
  height: 23px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background-color: #fff;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
  background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background-clip: padding-box;
  box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #444;
  text-decoration: none;
  white-space: nowrap;
  line-height: 24px;
}
.chosen-container-single .chosen-default {
  color: #999;
}
.chosen-container-single .chosen-single span {
  display: block;
  overflow: hidden;
  margin-right: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chosen-container-single .chosen-single-with-deselect span {
  margin-right: 38px;
}
.chosen-container-single .chosen-single abbr {
  position: absolute;
  top: 6px;
  right: 26px;
  display: block;
  width: 12px;
  height: 12px;
  background: url('images/chosen-sprite.png') -42px 1px no-repeat;
  font-size: 1px;
}
.chosen-container-single .chosen-single abbr:hover {
  background-position: -42px -10px;
}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
  background-position: -42px -10px;
}
.chosen-container-single .chosen-single div {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 18px;
  height: 100%;
}
.chosen-container-single .chosen-single div b {
  display: block;
  width: 100%;
  height: 100%;
  background: url('images/chosen-sprite.png') no-repeat 0px 2px;
}
.chosen-container-single .chosen-search {
  position: relative;
  z-index: 1010;
  margin: 0;
  padding: 3px 4px;
  white-space: nowrap;
}
.chosen-container-single .chosen-search input[type="text"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1px 0;
  padding: 4px 20px 4px 5px;
  width: 100%;
  height: auto;
  outline: 0;
  border: 1px solid #aaa;
  background: white url('images/chosen-sprite.png') no-repeat 100% -20px;
  background: url('images/chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
  background: url('images/chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background: url('images/chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background: url('images/chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background: url('images/chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eeeeee 1%, #ffffff 15%);
  font-size: 1em;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}
.chosen-container-single .chosen-drop {
  margin-top: -1px;
  border-radius: 0 0 4px 4px;
  background-clip: padding-box;
}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
  position: absolute;
  left: -9999px;
}

/* @end */
/* @group Results */
.chosen-container .chosen-results {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 4px 4px 0;
  padding: 0 0 0 4px;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
  display: none;
  margin: 0;
  padding: 5px 6px;
  list-style: none;
  line-height: 15px;
}
.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  color: #ccc;
  cursor: default;
}
.chosen-container .chosen-results li.highlighted {
  background-color: #3875d7;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
  background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
  background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
  background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
  background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
  color: #fff;
}
.chosen-container .chosen-results li.no-results {
  display: list-item;
  background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
  display: list-item;
  font-weight: bold;
  cursor: default;
}
.chosen-container .chosen-results li.group-option {
  padding-left: 15px;
}
.chosen-container .chosen-results li em {
  font-style: normal;
  text-decoration: underline;
}

/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto !important;
  height: 1%;
  border: 1px solid #CCCCCC;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
  background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
  cursor: text;
  border-radius: 3px;
}
.chosen-container-multi .chosen-choices li {
  float: left;
  list-style: none;
}
.chosen-container-multi .chosen-choices li.search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  margin: 1px 0;
  padding: 5px;
  height: 15px;
  outline: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  color: #666;
  font-size: 100%;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}
.chosen-container-multi .chosen-choices li.search-field .default {
  color: #999;
}
.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 3px 0 3px 5px;
  padding: 3px 20px 3px 5px;
  border: 1px solid #aaa;
  border-radius: 3px 3px 3px 3px;
  background-color: #e4e4e4;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-clip: padding-box;
  box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  color: #333;
  line-height: 13px;
  cursor: default;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 4px;
  right: 3px;
  display: block;
  width: 12px;
  height: 12px;
  background: url('images/chosen-sprite.png') -42px 1px no-repeat;
  font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
  background-position: -42px -10px;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
  padding-right: 5px;
  border: 1px solid #ccc;
  background-color: #e4e4e4;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  color: #666;
}
.chosen-container-multi .chosen-choices li.search-choice-focus {
  background: #d4d4d4;
}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
  background-position: -42px -10px;
}
.chosen-container-multi .chosen-results {
  margin: 0;
  padding: 0;
}
.chosen-container-multi .chosen-drop .result-selected {
  display: list-item;
  color: #ccc;
  cursor: default;
}

/* @end */
/* @group Active  */
.chosen-container-active .chosen-single {
  border: 1px solid #5897fb;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active.chosen-with-drop .chosen-single {
  border: 1px solid #aaa;
  -moz-border-radius-bottomright: 0;
  border-bottom-right-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-left-radius: 0;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
  background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
  box-shadow: 0 1px 0 #fff inset;
}
.chosen-container-active.chosen-with-drop .chosen-single div {
  border-left: none;
  background: transparent;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position: -18px 2px;
}
.chosen-container-active .chosen-choices {
  border: 1px solid #5897fb;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active .chosen-choices li.search-field input[type="text"] {
  color: #111 !important;
}

/* @end */
/* @group Disabled Support */
.chosen-disabled {
  opacity: 0.5 !important;
  cursor: default;
}
.chosen-disabled .chosen-single {
  cursor: default;
}
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
  cursor: default;
}

/* @end */
/* @group Right to Left */
.chosen-rtl {
  text-align: right;
}
.chosen-rtl .chosen-single {
  overflow: visible;
  padding: 0 8px 0 0;
}
.chosen-rtl .chosen-single span {
  margin-right: 0;
  margin-left: 26px;
  direction: rtl;
}
.chosen-rtl .chosen-single-with-deselect span {
  margin-left: 38px;
}
.chosen-rtl .chosen-single div {
  right: auto;
  left: 3px;
}
.chosen-rtl .chosen-single abbr {
  right: auto;
  left: 26px;
}
.chosen-rtl .chosen-choices li {
  float: right;
}
.chosen-rtl .chosen-choices li.search-field input[type="text"] {
  direction: rtl;
}
.chosen-rtl .chosen-choices li.search-choice {
  margin: 3px 5px 3px 0;
  padding: 3px 5px 3px 19px;
}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
  right: auto;
  left: 4px;
}
.chosen-rtl.chosen-container-single-nosearch .chosen-search,
.chosen-rtl .chosen-drop {
  left: 9999px;
}
.chosen-rtl.chosen-container-single .chosen-results {
  margin: 0 0 4px 4px;
  padding: 0 4px 0 0;
}
.chosen-rtl .chosen-results li.group-option {
  padding-right: 15px;
  padding-left: 0;
}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
  border-right: none;
}
.chosen-rtl .chosen-search input[type="text"] {
  padding: 4px 5px 4px 20px;
  background: white url('images/chosen-sprite.png') no-repeat -30px -20px;
  background: url('images/chosen-sprite.png') no-repeat -30px -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
  background: url('images/chosen-sprite.png') no-repeat -30px -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background: url('images/chosen-sprite.png') no-repeat -30px -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background: url('images/chosen-sprite.png') no-repeat -30px -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background: url('images/chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%);
  direction: rtl;
}
.chosen-rtl.chosen-container-single .chosen-single div b {
  background-position: 6px 2px;
}
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
  background-position: -12px 2px;
}

/* @end */
/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
  .chosen-rtl .chosen-search input[type="text"],
  .chosen-container-single .chosen-single abbr,
  .chosen-container-single .chosen-single div b,
  .chosen-container-single .chosen-search input[type="text"],
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  .chosen-container .chosen-results-scroll-down span,
  .chosen-container .chosen-results-scroll-up span {
    background-image: url('images/chosen-sprite@2x.png') !important;
    background-size: 52px 37px !important;
    background-repeat: no-repeat !important;
  }
}
/* @end */

/* We can't display RadGrids in design mode, so display a simple grid with limited styling instead */
.DesignModeGrid
{
    border: 1px solid #999;
    width: 100%;
}
.DesignModeGrid th
{
    background-color: #ddd;
    border-bottom: 1px solid #999;
    text-align: left;
}
.DesignModeGrid td, .DesignModeGrid th
{
    padding: 3px;
}

/* #endregion unorganized styles */