/* How to use this file

Any values in application.css will override those from the default.css file. This file allows you to customize the look of your Splunk App. It does not let you change the overall layout. For the most part, use this to change background colors, buttons, navigation, menus, etc. You can change the color of the histogram bars, but the palette for other chart colors is not exposed to CSS yet.

A note on images:
Alpha channel PNG files are used for a variety of transparency effects (gradient, glass, shadows, etc.) These images will not work on IE6, so you should either provide an alternate image or override the image by using the "underscore" hack, i.e. _background-image:none. To ensure that IE6 does not render alpha channel PNG files, make sure that the override comes after the declaration that contains your PNG. Any image that starts with "overlay" is an alpha channel graphic. As well, the logo images that are PNG format are also alpha channel so you can use on whatever background you like. GIF formats are available and are set as transparent against black and white only.

A note on background positioning:
We use and image sprite (splIcons.gif) for most of the icons and arrows that appear in the UI. Background-position is used to set different colors. By default, this sprite has black, white, grey, green, and blue versions of arrows. If you want to change these colors, edit the local version of this file (inside this directory). Otherwise, you can choose a different color by adjusting the background position on the selected element.

*/


/* Basic Typography
---------------------------------*/
body, td {
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    color: #111;
}

input, textarea, select {
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    color: #333;
}

/* monospaced font */
.splFont-mono {
    font-family: Consolas,Monaco,Courier New,monospace;
}


/* App header elements
---------------------------------*/

/* Application logo

height and width should be the same as your image. make sure to include some top and buttom margin in the padding.

Black logo, green >
    background-image: url(appLogo_black.png);
Black logo, black >
    background-image: url(appLogo_allblack.png);
White logo, green >
    background-image: url(appLogo_white.png);
White logo, white >
    background-image: url(appLogo_allwhite.png);
    
For IE6, use the following images. Note that if you make a background color other than black or white (or close to it) you will need to redo the transparent GIF matte.
White logo, green > for IE6, transparent against black
    background-image: url(appLogo_white.gif);
Black logo, green > for IE6, transparent against white
    background-image: url(appLogo_black.gif);
*/

.appLogo {
    height: 43px; 
    width: 81px;
    background-image: url(appLogo_white.png);
    _background-image: url(appLogo_white.gif); /* for IE6 */
    background-repeat: no-repeat;
}

/* the name of your app. line height can be adjusted to fix alignment issues w/ the logo. color is the color of the text. if your logo has the name in it, then you can set this to "display:none;  */

.appHeaderWrapper h1 {
    color:;
    line-height: 43px;
}


/* background-color and/or image of your app */
.appHeaderWrapper {
    background-color: #000;
    background-image: url(overlay_togradient_large.png);
    background-repeat: repeat-x;
    background-position: top;
    border-bottom-style: ;
    border-bottom-width: ;
    border-bottom-color: ;
}

/* color of top-right text */
.appHeaderWrapper {
    color: ;
}
/* color of top-right links */
.appHeaderWrapper a {
    color:;
}

/* app menu arrows */
.appHeaderWrapper .splIcon-triangle-3-s {
background-position: ;
}


/* loader background */
#loading {
    background-color: ;
}


/* link colors 
---------------------------------*/
a {
    color: ;
}
a.disabled {
    color: ;
}


/* nav bar and aux links
---------------------------------*/

/*
set an overlay effect for your navbar or leave blank for default
background-image: url(overlay_glass_28.png);
background-image: url(overlay_gloss_28.png);
background-image: url(overlay_gradient_28.png);
background-image: url(overlay_reversegradient_28.png);
background-image: url(overlay_reversegradient_light_28.png);
background-image: url(overlay_reversegradientridge_28.png);
background-image: url(overlay_softgradient_28.png);
background-image: url(overlay_white_28.png);
background-image: url(overlay_whiteridge_28.png);
*/

.splHeader-navigation {
    background-image: ;
    background-repeat: repeat-x;
    _background-image: none;
}

/*--- the default state ---*/
ul.appBarNav li a, ul.appBarNav li a:active, ul.appBarNav li a:visited  {
    color: ;
}

/*--- the hover state ---*/
ul.appBarNav li.hasMenu a:hover, ul.appBarNav li a:hover {
    color: ;
    background-color: ;
    background-image: url(overlay_white_28.png);
    background-repeat: repeat-x;
    _background-image: none;   /* for IE6 */
}

/*--- the open state ---*/
ul.appBarNav li a.menuOpen {
    color: ;
    background-color: ;
    background-image: url(overlay_white_28.png);
    background-repeat: repeat-x;
    _background-image: none;   /* for IE6 */
}

/*--- link color ---*/
ul.appBarNav li.hasMenu a:hover, ul.appBarNav li a.menuOpen {
    color: ;
}

/* to change arrows, see Menu section, below */


/* auxiliary text and links */
.AppBar .auxLinks a {
    color: ;
}
.AppBar .auxLinks span {
    color: ;
}

/* Menus
---------------------------------*/

/* primary menu */
.splMenu-primary ul {
    background-color: ;
}
.splMenu-primary, .splMenu-primary a, .splMenu-primary a:visited, .splMenu-primary a:hover {
    color: ;
}
.splMenu-primary .actionsMenuDivider {
}
.splMenu-primary li:hover {
    background-color: ;
}

/* secondary menu, used for apps pulldown */
.splMenu-secondary ul {
    background-color: ;
}
.splMenu-secondary, .splMenu-secondary a {
    color: ;
}
.splMenu-secondary li.disabled a {
    color: ;
}   
.splMenu-secondary li:hover {
    background-color: ;
}
.splMenu-secondary a:hover {
    color: ;   
}

/* actions menu open state */
.TitleBar div.menuOpen {
    background-color: ;
    color: ;
}


/* 
Arrow color is changed by adjusting background position. use the following values for these colors:
    grey: background-position: -7px -367px;
    white: background-position: -27px -367px;
    green: background-position: -47px -367px;
    black: background-position: -67px -367px;
*/

/* nav arrow, default state */
ul.appBarNav li.hasMenu a span.splIcon-triangle-2-s {
}

/* hover state */
ul.appBarNav li.hasMenu a:hover span.splIcon-triangle-2-s {
}

/* open state */
ul.appBarNav li.hasMenu a.menuOpen span.splIcon-triangle-2-s {
}

/* actions menu open state */
.TitleBar div.menuOpen .splIcon-triangle-4-s {
}


/* background colors
---------------------------------*/

/* default page color */
body, .splBackground-default, 
.graphArea, .resultsArea,  
.reportSecondPanel, .reportThirdPanel, 
.sidebarCollapsed,
.SearchBar .saTypeaheadWrapper,
.ui-datepicker-links,
.popupContent {
    background-color: ;
}

/* primary background - applies to search controls and primary action panels */
.viewHeader, .mainSearchControls, .splSearchControls-inline,
.SearchBar .saHelpWrapper,
.popupContent  {
    background-color: ;
}

/* secondary background - sidebar, other panels */
.splBackground-secondary, .sidebarExpanded,
.fieldValuePopup p.reportLinks {
    background-color: ;
}

/* Specific overrides */
.layoutCellInner .ResultsHeader .splHeader, .layoutCellInner .ResultsHeader .splHeader-secondary {
    background: transparent none;
}

/* Specific overrides */
.popupFooter {
    background-color: ;
}

/* dashboard background color */
body.splTemplate-dashboard {
    background-color:;
}

/* dashboard containers */
.dashboardCell {
    background-color: ; 
    background-image:url(overlay_topgradient.png);
    background-repeat:repeat-x;
    _background-image: none;   /* for IE6 */
}

/* headers 
---------------------------------*/

/* default header font color */
.splHeader-dashboard h2, .dashboardContent .ServerSideInclude h2, .dashboardContent .GenericHeader h3, .SearchBar .saRow h4  {
    color: ;
}

/* primary header background color + overlay */
.splHeader-primary,
.TitleBar .splHeader, 
.FieldPickerPopup .splHeader-primary {
    background-color: ;
background-image:url(overlay_topgradient.png);
background-repeat:repeat-x;
_background-image: none;
}

/* secondary (i.e. sidebar) header background color + overlay */
.splHeader-secondary {
background-color:;
background-image:url(overlay_topgradient.png);
background-repeat:repeat-x;
_background-image: none;
}

/* headers w/o any overlay */
.FlashTimeline .splHeader-primary {
    background-color:;
    background-image: none;
}

/* borders 
---------------------------------*/

/* ALL elements with a generic border attribute */
* { 
border-color: #ccc;
}

/* refactor to remove these in default.css since they have specific color declarations; should be same value as * elements, above */ 
.splMenu-primary ul, 
.splMenu-secondary ul,
.Paginator a:hover { 
border-color: ;
}

/* specific overrides */ 

.fieldValuePopup table tr.fieldNameHeaderRow th {
border-bottom:1px solid #ccc;
}

/* horixontal rules in the sidebar */ 
.splDivider, .SuggestedFieldViewer .splBorder-n {
border-color: #ccc;
}




/* search controls 
---------------------------------*/

/* search button color; background-position of 0 0 is black, -40px 0 is white */
input.searchButton {
    background-color: ;
    background-position:-40px 0;   
}

.SearchBar .assistantActivator {
background-color: ;
}



/* Flash timeline and charts 
---------------------------------*/

/* All flash charts */
/*
  background-color -> controls bgcolor
  border-left-color -> controls foregroundColor
  color -> controls fontColor
  controls and and font color get screened via an alpha layer, so should probably be set to all black or white, depending on main background
*/
div.FlashChart {
    background-color: ;
    color: ;
    border-left-color: ;
}

/* flash timeline specific */
/*
  background-color -> controls bgcolor
  border-left-color -> controls foregroundColor
  color -> controls fontColor
  border-right-color -> controls seriesColor
controls and and font color get screened via an alpha layer, so should probably be set to all black or white, depending on main background
*/
div.FlashTimeline {
    background-color: ;
    border-left-color: ;
    color: ;
    /* the color of the histogram bar. border-right-color = fill */
    border-right-color: ; 
}

/* popup bar chart; should be same color as flash timeline */
.splBarGraphBar {
background-color:;
}




/* buttons 
---------------------------------*/

.splButton-primary {
    background-color: ;   
    color: ;
}
.splButton-primary:hover {
    background-color: ;   
}
.splButton-secondary {
    background-color:;
    color: ;   
}
.splButton-secondary:hover {
    background-color: ;   
}

/* form elements
_________________________________*/

fieldset legend {
    color: ;
}
fieldset legend span {
    color: ;
}
p.exampleText {
    color: ;
}
p.fieldsetHelpText {
    color: ;
}

/*-- disabled and read-only form elements --*/

label.disabledLabel {
    color: ;
}
select option[disabled] {
    color: ;
}
input.readonly {
    background-color: ;
}


input[disabled]{
background-color: transparent;
border-color: transparent;
color: ;
}

/* Icons 
---------------------------------*/
.splIcon-events-list, .splIcon-events-table, .splIcon-results-table {
/*-- 
master icon file. edit the local file and include this stanza if you want to override the defaults
background-image: url(splIcons.gif);

 --*/
}

/*-- background color for icons --*/
.splIcon {
    background-color: #999;
}

/*-- switchers that use icons  --*/

.ButtonSwitcher ul li.selected, .ButtonSwitcher ul li.selected:hover,
.EventsViewer .default .actions,
div.FlashTimeline a.logScaleSelected span, div.FlashTimeline a.linScaleSelected span  {
    border: 1px solid #999;
    background-color: #999;
}

/*-- paginator uses similar styles --*/

.Paginator .active a, .Paginator .active a:hover {
    background-color: #999;
    border-color: #999;
    color: #fff;
}

/*-- arrow icons --*/
.splIcon-arrow-n, .splIcon-arrow-e, .splIcon-arrow-s, .splIcon-arrow-w {
    background-color: #999;
}

/* triangles. keep this last to avoid getting background colors in the arrows! */
/* Note: to separate color from implementation, we're using a numbering system to differentiate colors.  
   1=grey,2=white,3=green,4=black,5=blue.  If the icon sprite changes, the number mapping to colors would be different */
.splIcon-triangle, 
.splIcon-triangle-1-n, .splIcon-triangle-1-s, .splIcon-triangle-1-e, .splIcon-triangle-1-w,
.splIcon-triangle-2-n, .splIcon-triangle-2-s, .splIcon-triangle-2-e, .splIcon-triangle-2-w,
.splIcon-triangle-3-n, .splIcon-triangle-3-s, .splIcon-triangle-3-e, .splIcon-triangle-3-w,
.splIcon-triangle-4-n, .splIcon-triangle-4-s, .splIcon-triangle-4-e, .splIcon-triangle-4-w,
.splIcon-triangle-5-n, .splIcon-triangle-5-s, .splIcon-triangle-5-e, .splIcon-triangle-5-w {
    background-color:transparent;   
}
.splIcon-triangle-large {
    background-color:transparent;  
}


/* tables
------------------------------*/
table.splTable {
    border-color: ;   
}
table.splTable th {
    border-color: ;
}
table.splTable th a {
    color: ;
}
table.splTable td {
    border-color: ;
}



/* highlight colors 
---------------------------------*/
/*-- event items --*/
.EventsViewer .default .a, .EventsViewer .default .h, .EventsViewer .default .fields .v:hover, .EventsViewer .default .fields .tg:hover {
	background-color: ;
}

/*-- row highlighting for tables --*/
table.splTable tr:hover td {
    background-color:;
}
.mouseoverHighlight, .mouseoverHightlight td {
    background-color:;
}

/*-- matching search terms --*/
.SimpleEventsViewer span.searchTermHighlight {
    background-color:;
}

/* MultiFieldViewer + SuggestedFieldViewer, i.e. highlight in the fields sidebar */
.MultiFieldViewer .fieldTabs .mouseoverHighlight,
.MultiFieldViewer .fieldTabs .selected,
.SuggestedFieldViewer .fieldTabs .mouseoverHighlight,
.SuggestedFieldViewer .fieldTabs .selected {
    background-color:;
}

/* field picker popup hover row */
.FieldPickerPopup .fpFieldList tbody tr:hover, .FieldPickerPopup .fpFieldList tbody tr.mouseoverHighlight {
    background-color: ;
}



/* date picker 
---------------------------------*/
.ui-datepicker-current-day {
    background-color: ;
}

.ui-datepicker-links {
    background-image: url(overlay_gradient.png) repeat-x 0 0;
    _background-image: none;
} 

/* popups 
---------------------------------*/
.splHeader-popup {
    background-color: #000;
    background-image: url(overlay_gradient.png);
    background-repeat: repeat-x;
    _background-image: none;
}

.splHeader-popup h2 {
    color:#FFF; 
}

.popupContainer {
border-color: ;
}

/* modal overlay */
.splOverlay, .splOverlay-white {
    background-color: #000;    
    opacity:0.8;
    filter:alpha(opacity=80);
}
.splOverlay-white {
    background-color:#FFF;  
}

/* Misc 
---------------------------------*/

/* resize handle */
.ui-resizable-s {
background-color:#ccc !important;
}

/* loading image for jobs */
.JobStatus .output .running h2,
.JobStatus .output .runningReport h2,
.JobStatus .output .finalizing h2 {
/* 
loader background must match the same color as the background of your output div. leave blank to use the default loader, or download a custom image from www.ajaxload.info, name it loader.gif and include this line:

background-image: url(loader.gif);
*/
}


/* remove the gradient at top of event and results area */
.EventsViewer, .SimpleResultsTableResults {
background-image: none;
}
