﻿/**************************************************************/
/*************************** STYLING **************************/
/**************************************************************/

/*******************************************************************************
* JQuery UI Tabs
*******************************************************************************/

/*   Header bar */
.ui-widget-header {
    background-color: rgb(0,175,213);
    border: 0px;
}

/* Set color of non-active tabs */
div.div-tabs > .ui-tabs-nav > li {
    background: rgb(36,105,135);    /* DARK BLUE */
}

/* Set text color of non-active tabs */
div.div-tabs > .ui-tabs-nav > li.ui-state-default a, 
div.div-tabs > .ui-tabs-nav > li.ui-state-default a:link
{
    color: rgb(255,255,255);
}

/* Set layout of the active tab */
div.div-tabs > .ui-tabs-nav > li.ui-state-active {
    background: rgb(0,175,213);       /* active tab background color */
    font-weight: bold;                /* active tab font weight */
}

/* Set text color of active tab */
div.div-tabs > .ui-tabs-nav > li .ui-tabs-anchor  {
    color: rgb(255,255,255);    /* Color of text in active tab */
}

/* Set the style of the area containing the box that contains the tabs */
div.div-tabs {
    padding: 0px; 
    background: rgb(255,255,255); 
    border-width: 0px; 
}

/* Background color of tab when hovered over */
div.div-tabs > .ui-tabs-nav > li:hover {
    background: rgb(0,175,213);
}

/* Set the style of the box containing the tabs */
div.div-tabs > .ui-tabs-nav {
    background: rgb(255,255,255); 
}

/* Set the style of the content of the tab */
div.div-tabs .ui-tabs-panel{ 
    background: rgb(255,255,255);
    border-width: 0px 1px 1px 1px; 
    border-color: rgb(0,175,213);
    padding: 0px;
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
}

/* Set the padding of the text in the tab */
div.div-tabs > .ui-tabs-nav > .ui-state-default > .ui-tabs-anchor,
div.div-tabs > .ui-tabs-nav > .ui-state-active > .ui-tabs-anchor {
    padding: 4px 0px 4px 6px;
}

/*******************************************************************************
* Tooltips
*******************************************************************************/
body .ui-tooltip {
    background: rgb(204,255,255);
    border-color: rgb(133,194,255);
    color: rgb(0,0,0);
}

/**************************************************************/
/*************************** LAYOUT ***************************/
/**************************************************************/

/*******************************************************************************
* JQuery UI Tabs
*******************************************************************************/
div.div-tabs {
    font-size: 13px;
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
}

/*  Set the width of the tabs */
div.div-tabs > .ui-tabs-nav > li.ui-state-default > a
{
    width: 210px;
    border-left: 1px solid White;
}

div.div-tabs > .ui-tabs-nav > li.ui-state-default:first-child > a
{
    border-left: 1px solid transparent;
}

/* Remove space and border between tabs */
div.div-tabs > .ui-tabs-nav li {
    margin: 0px;
    border: 0px;
}

/* Remove margin and padding from the box containing the tabs */
div.div-tabs > .ui-tabs-nav{
    margin: 0px;
    padding: 0px;
}

/*******************************************************************************
* Tooltips
*******************************************************************************/
body .ui-tooltip {    
    border-style: solid;
    border-width: 2px;
    font-family: Arial;
    max-width: 600px;   
    padding: 3px 10px;    
}
.ui-tooltip-content {
    word-wrap: break-word;    
}

/*******************************************************************************
* Autocomplete
*******************************************************************************/
/* For when the autocomplete is in a bootstrap modal. */
.ui-autocomplete.ui-front {
    z-index: 1100;
}
/* Make this match the style of the select2. */
.ui-autocomplete {
    background: #ffffff;
}
.ui-autocomplete li .ui-menu-item-wrapper {
    padding: 6px;
}
.ui-autocomplete li .ui-state-active {
    border: 0;
    background: #5897fb;
    color: #ffffff;
}
