/*
  Important, please read.
  
  This css file is a cross-brand file that is intended to provide the initial css for GWT UI components.
  In general, once a component has been designed and tested, its css here should not change unless thoroughly 
  tested, understanding that it would affect multiple instances in multiple brands.
  
  This file should generally not contain styling kinds of rules like colors and fonts. Allow the site's defaults
  to affect these elements.
  
  Any customization of an instance of a component should occur in the brand's css files.
*/



/* MultiSelect Component */
.gwt-comboBoxItemPicker {width:18px; height:20px;background-image: url("http://www.garnethill.com/wcsstore/CornerStoneBrands/images/content/buttons/multi_select_picker_arrow.png");background-position: -1px 4px;float:left; cursor: pointer; border: 1px solid #ababab; position: relative; left: -1px;}
.gwt-selectPanel {width:122px; height:12px; background: white; border: 1px solid #ababab; padding: 4px 2px 4px 2px;    float: left; cursor: pointer;}
.gwt-select-List-grid-panel .popupContent {border: 1px solid #ababab;width: 144px; height: 96px; visibility: inherit; overflow-y: scroll;cursor: default;position: relative;background-color:white;}
.gwt-selectItemText {width: 122px; height: 12px; overflow: hidden; font-size: 13px; padding-bottom: 8px;}
.gwt-select-List-grid-panel .gwt-CheckBox input{float:left;margin:3px;}
.gwt-select-List-grid-panel .gwt-CheckBox label{word-break:break-all; width:90px; float:left;}
.gwt-multiselectBox {height:20px;}
.gwt-select-List-grid-panel{z-index:300;}

/*Callout Component */
/*Callout Component */
.gwt-csb-callout.gwt-PopupPanel{ border:2px solid #666;border-radius:5px;z-index:9999;min-width:180px;}
.gwt-csb-callout.arrow-down:before, .gwt-csb-callout.arrow-down:after{content: ' ';position: absolute;width: 0;	height: 0;}
.gwt-csb-callout.arrow-up:before, .gwt-csb-callout.arrow-up:after{content: ' ';position: absolute;width: 0;	height: 0;}
.gwt-csb-callout.arrow-left:before, .gwt-csb-callout.arrow-left:after{content: ' ';position: absolute;width: 0;	height: 0;}
.gwt-csb-callout.arrow-right:before, .gwt-csb-callout.arrow-right:after{content: ' ';position: absolute;width: 0;	height: 0;}


.gwt-csb-callout.arrow-down:before{bottom: -32px;border: 16px solid;border-color: #666 transparent transparent transparent;}
.gwt-csb-callout.arrow-down:after{bottom: -29px;border: 16px solid;border-color: #fff transparent transparent transparent;}

.gwt-csb-callout.arrow-up:before{bottom: -32px;border: 16px solid;border-color: #666 transparent transparent transparent;}
.gwt-csb-callout.arrow-up:after{bottom: -29px;border: 16px solid;border-color: #fff transparent transparent transparent;}

.gwt-csb-callout.arrow-left:before{left: -14px;border: 6px solid;border-color: transparent #666666 transparent transparent;}
.gwt-csb-callout.arrow-left:after{left: -10px;border: 5px solid;border-color: transparent #ffffff transparent transparent;}

.gwt-csb-callout.arrow-right:before{bottom: -32px;border: 16px solid;border-color: #666 transparent transparent transparent;}
.gwt-csb-callout.arrow-right:after{bottom: -29px;border: 16px solid;border-color: #fff transparent transparent transparent;}

/*Accordion Component */
.gwt-accordion-tab .gwt-accordion-tab-content.tabopen{display:block;}
.gwt-accordion-tab .gwt-accordion-tab-header.tabopen {background: #ddd;}
.gwt-accordion-tab-content{display:none;}
.gwt-accordion-tab-header {background: #bbb; border-top: solid thin; }
.gwt-accordion-tab-content{border-top: solid thin;}
.gwt-accordion {border-style: solid; border-width: 0 thin thin thin;}
.gwt-accordion-tab-content div {min-height: 50px;}


/*Stacked Tab Panel*/
.stacked-tabs-panel .tab-header-container {width: 100%; float: left; border-bottom: 1px solid lightgray; border-left: 1px solid lightgray; border-right: 1px solid lightgray;}
.stacked-tabs-panel .tab-content-container {display: none; float: left; border:1px solid black;}
.stacked-tabs-panel.tabopen .tab-header-container {border-right: none;}
.stacked-tabs-panel.tabopen .tab-content-container {display: block; }
.stacked-tabs-panel .tabheader {cursor:pointer; border-top:1px solid lightgray;}
.stacked-tabs-panel .tabheader.tabopen {border: 1px solid black; border-right: none; position: relative;}
.stacked-tabs-panel .tabheader.tabopen:after {content: ' ';position: absolute;right: -1px; top: 0; width: 1px; background-color: white; }
.stacked-tabs-panel .tabcontent {display: none;}
.stacked-tabs-panel .tabcontent.tabopen {display: block; }

/*Widths, heights and colors for test/reference. These are what you'll typically override in brand css.*/
.stacked-tabs-panel {width: 472px;}
.stacked-tabs-panel .tab-content-container {width: 278px; }
.stacked-tabs-panel .tabheader {background-color:#ECE9DA;}
.stacked-tabs-panel .tabheader.tabopen {background-color: white;}
.stacked-tabs-panel.tabopen .tab-header-container {width: 191px;}
.stacked-tabs-panel .tabheader, .stacked-tabs-panel .tabheader.tabopen:after {height:47px;}

/* MoreContentExpander */
/* default height set to auto to disable. Enable by setting an explicit pixel height as desired by use case. */
.moreContentExpander .mce-inner {height: auto;}
.moreContentExpander .mce-inner {transition: height .3s ease-out;}
.moreContentExpander .mce-fade {height: 50px;}
.moreContentExpander .mce-fade.faded {background: linear-gradient(rgba(255, 255, 255, 0), white);}
.moreContentExpander .mce-fade .mce-btn {left: 25px; bottom: 0px;}