/* this style sheet is for the look of the charts module */

/* container styling */
div#chartscontainer
{                
    border: 1px solid #999999;
}
div.clear
{
    clear: both;
}

/* styling for the chart tabs */
ul#charttabs
{                   
    display: block;
    margin: 0;        
    padding: 0;        
    line-height: 30px;
    text-align: left;
    height: 30px;
    width: 100%;
    background-color: #CCCCCC;                  
}
ul#charttabs li
{
    display: block;
    float: left;   
    margin-left: 0;       
    background-color: #CCCCCC;
    border-right: 1px solid #999999;
    /*
    background: url('graphics/Breakdowngrey.png');
    background-position: bottom;
    */
}
ul#charttabs li div.icon
{
    float: left;
    height: 25px;
    width: 25px;
    background: bottom left no-repeat;
    margin-top: 2px;
    margin-right: 5px;      
}
ul#charttabs li.chosen
{
    border-bottom: none;
    font-weight: bold;
    padding: 0 5px;               
    background-color: #FFFFFF;
}
ul#charttabs li.chosen div.icon
{                                    
    height: 25px;
    width: 25px;
    background: top left no-repeat;      
}
ul#charttabs li.right
{
    float: right;
    border-left: 1px solid #999999;
    border-right: none;
}
ul#charttabs li a, ul#charttabs li a:link, ul#charttabs li a:visited
{    
    padding: 0 5px;
    display: block;
    color: #000000;
    text-decoration: none;
}
ul#charttabs li a:hover, ul#charttabs li a:active
{   
    padding: 0 5px;
    display: block;
    color: #000000;
    text-decoration: none;
    background-color: #FFFFFF;
}   
ul#charttabs li#standard a div.icon, ul#charttabs li#standard a:link div.icon, ul#charttabs li#standard a:visited div.icon
{
    background-image: url('graphics/Chart_Standard.png');
}
ul#charttabs li#standard a:hover div.icon, ul#charttabs li#standard a:active div.icon, ul#charttabs li#standard.chosen div.icon
{
    background-image: url('graphics/Chart_Standard.png');
    background-position: top;
}
ul#charttabs li#custom a div.icon, ul#charttabs li#custom a:link div.icon, ul#charttabs li#custom a:visited div.icon
{
    background-image: url('graphics/Chart_Custom.png');
}
ul#charttabs li#custom a:hover div.icon, ul#charttabs li#custom a:active div.icon, ul#charttabs li#custom.chosen div.icon
{
    background-image: url('graphics/Chart_Custom.png');
    background-position: top;
}
ul#charttabs li#download a div.icon, ul#charttabs li#download a:link div.icon, ul#charttabs li#download a:visited div.icon
{
    background-image: url('graphics/Chart_Zip.png');
}
ul#charttabs li#download a:hover div.icon, ul#charttabs li#download a:active div.icon, ul#charttabs li#download.chosen div.icon 
{
    background-image: url('graphics/Chart_Zip.png');
    background-position: top;
}
ul#charttabs li#wizard a div.icon, ul#charttabs li#wizard a:link div.icon, ul#charttabs li#wizard a:visited div.icon
{
    background-image: url('graphics/Chart_Wizard.png');
}
ul#charttabs li#wizard a:hover div.icon, ul#charttabs li#wizard a:active div.icon, ul#charttabs li#wizard.chosen div.icon 
{
    background-image: url('graphics/Chart_Wizard.png');
    background-position: top;
}

ul#informationbar
{         
    display: block;
    margin: 0;   
    margin-bottom: 10px;     
    padding: 0;        
    line-height: 30px;
    text-align: left;
    height: 30px;
    width: 100%;
    background-color: #FFFFFF;
    border-top: 1px dashed #CCCCCC; 
    border-bottom: 1px dashed #CCCCCC;
}
ul#informationbar li
{
    display: block;
    float: left;   
    margin-left: 0;       
    background-color: #FFFFFF;    
}
ul#informationbar li div.icon
{
    float: left;
    height: 25px;
    width: 25px;
    background-image: top left no-repeat;
    margin-top: 2px;
    margin-right: 5px;    
}
ul#informationbar li#filter
{
    float: left;
    
}
il#informationbar li#regenerate
{
    float: left;
}
ul#informationbar li#regenerate a
{
    display: block;
    color: #000000;
    text-decoration: none;
    border-left: 1px dashed #CCCCCC;
    border-right: 1px dashed #CCCCCC;
    padding: 0px 5px;
}
ul#informationbar li#regenerate a:hover, ul#informationbar li#regenerate a:active
{
    display: block;
    color: #000000;
    text-decoration: underline;
    border-left: 1px dashed #CCCCCC;
    border-right: 1px dashed #CCCCCC;
    padding: 0px 5px;
}
ul#informationbar li#regenerate a div.icon, ul#informationbar li#regenerate a:link div.icon, ul#informationbar li#regenerate a:visited div.icon
{
    background-image: url('graphics/Chart_Refresh.png');
    background-position: bottom;  
}
ul#informationbar li#regenerate a:hover div.icon, ul#informationbar li#regenerate a:active div.icon
{
    background-image: url('graphics/Chart_Refresh.png');
    background-position: top;  
}
ul#informationbar li#help
{
    float: right;
}
ul#informationbar li#help a
{
    display: block;
    color: #000000;
    text-decoration: none;
    border-left: 1px dashed #CCCCCC;
    border-right: 1px dashed #CCCCCC;
    padding: 0px 5px;
}
ul#informationbar li#help a div.icon, ul#informationbar li#help a:link div.icon, ul#informationbar li#help a:visited div.icon
{
    background-image: url('graphics/Chart_Information.png');
}
ul#informationbar li#help a:hover div.icon, ul#informationbar li#help a:active div.icon
{
    background-image: url('graphics/Chart_Information.png');
    background-position: bottom;  
}

/* */
div#chartwindow
{
    padding: 10px;
}

/* chart display section styling */
div#chartdisplay
{
    width: 70%; 
    float: left;
}

/* all fieldsets styling */
div#chartdisplay fieldset.heading, div#chartoptions fieldset.heading
{               
    border: none;  
    color: #000000;    
}
/* all fieldset legends styling */
div#chartdisplay fieldset.heading legend, div#chartoptions fieldset.heading legend
{
    font-weight: bold;
    color: #000000;    
}

/* chart options section styling */
div#chartoptions
{
    width: 29%;
    float: right;
    border: 1px dashed #007EC2;
    padding-top: 5px;       
}
div#chartoptions label
{
    color: #000000;
}

/* div placeholder for the chart (injected by JavaScript) */
div#chart_div
{                
    overflow: auto; 
    margin: 0px auto;       
    text-align: center;
}

/* chart options inner fieldsets styling */
div#chartoptions fieldset.inner
{                      
    margin-bottom: 5px;
    margin-top: 5px; 
    border: 1px solid #007EC3;
    padding-left: 5px;
    font-size: 10px;
}
div#chartoptions fieldset.inner legend
{
    font-weight: bold;
    padding: 0px 5px;
    /*font-style: italic;*/
    line-height: 26px;        
    border: 1px solid #007EC3; 
    color: #007EC3;
    cursor: pointer;
    font-size: 12px;
}
div#chartoptions fieldset.inner legend img
{
    vertical-align: middle;
    padding-bottom: 2px;
}
div#chartoptions select, div#chartoptions input, div#chartoptions button 
{
    font-size: 10px;         
    margin-top: 5px;
}

/* used to hide an option when it should not be available */
div#chartoptions .hidden
{
    display: none;
}
.selectelement
{
    height: 25px;
    line-height: 25px;
}

div#chartloading
{
    height: 32px;
    line-height: 32px;
    padding: 5px;     
    font-size: 14px;
    color: #007EC3;         
    border-top: 2px solid #007EC3;
    border-bottom: 2px solid #007EC3;
    margin-bottom: 10px;
    display: block;
}      
div#chartloading.loaded
{
    color: #0cb000;
    border-top: 2px solid #0cb000;
    border-bottom: 2px solid #0cb000;
    display: block;
    height: 32px;
    line-height: 32px;
}
div#loadingmessage
{
    display: inline;
}     
div#chartloading img
{
    vertical-align: bottom;
    margin-right: 5px;
}
div.overlay
{                      
    position: absolute;
    top: 250px;
    margin: 0px auto;
    z-index: 100;
    border: 2px solid #007EC3;
    padding: 10px;
    background-color: #FFFFFF;
    text-align: right;
    display: none;
    width: 300px;
}
div.overlay fieldset
{
    border: none;
    padding: 5px;
    margin: 0;
}
div.overlay p
{                           
    font-size: 9px;
}
div.overlay fieldset legend
{
    font-weight: bold; 
    padding: 2px 5px;        
    border: 1px solid #007EC3; 
    color: #007EC3;         
    font-size: 12px;
}
html, body { height: 100%; width: 100%; }
#overlay
{
    position: fixed;
    left:0px;
    top:0px;
    background: #333;         
    width: 100%;
    height: 100%;
    display: none; 
}
#savingoverlay
{
    text-align: center;
    margin: 0px auto;
}
#generateoverlay
{
    position: absolute;
    top: 250px;
    margin: 0px auto;
    z-index: 100;
    border: 2px solid #007EC3;
    padding: 10px;
    background-color: #FFFFFF;   
    display: none;
    width: 300px;
    
    text-align: center;    
}
#generateoverlay div#progressbar
{
    border: 1px solid #666666;
    width: 200px;
    height: 20px;
    margin: 0px auto;
    margin-top: 10px;
    padding: 0;
    text-align: center;                                 
    z-index: 99998;
    
}
div#progressinner
{
    position: relative;
    width: 0px;
    height: 20px;              
    background: url('graphics/progressbg.gif') repeat-x;
    margin: 0;
    padding: 0;                                        
    z-index: 99999;
}


#custom_charts_container
{
    border: 1px dashed #CCCCCC;
    padding: 10px;
    height: 100%;
}
#custom_charts_container div.thumb
{
    float: left;
    margin: 5px;
    width: 172px;
    height: 182px;
}
#custom_charts_container div.thumb_buttons
{
    margin: 0px;
    padding: 2px;
    border: 1px solid #CCCCCC;
    border-top: none;
    height: 26px;
    font-size: 10px;
}
#custom_charts_container div.thumb_buttons div.button
{                 
    width: 81px;
    padding: 0px;
    margin: 1px;
    height: 12px;
    border: none;
    float: left;
    text-align: center;
}
#custom_charts_container div.thumb_buttons div.button a, #custom_charts_container div.thumb_buttons div.button a:link, #custom_charts_container div.thumb_buttons div.button a:visited
{
    display: block;
    text-decoration: none;
    color: #000000;
    border: 1px solid #CCCCCC;
    height: 12px;
    padding: 5px;
    width: 69px;
}
#custom_charts_container div.thumb_buttons div.button a:hover, #custom_charts_container div.thumb_buttons div.button a:active
{
    display: block;
    color: #000000;           
    border: 1px solid #007EC3;
    height: 12px;
    padding: 5px;
    width: 69px;
    font-weight: bold;
}
#custom_charts_container div.thumb img
{                
    padding: 10px;
    border: 1px solid #CCCCCC;
}
#custom_charts_container div.thumb a:hover img 
{
    border: 1px solid #007EC3;
}


#default_charts_container
{
    border: 1px dashed #CCCCCC;
    padding: 10px;
    height: 100%;
}
#default_charts_container div.thumb
{
    float: left;
    margin: 5px;
    width: 172px;
    height: 182px;
}
#default_charts_container div.thumb_buttons
{
    margin: 0px;
    padding: 2px;
    border: 1px solid #CCCCCC;
    border-top: none;
    height: 26px;
    font-size: 10px;
}
#default_charts_container div.thumb_buttons div.button
{                 
    width: 162px;
    padding: 0px;
    margin: 1px;
    height: 12px;
    border: none;
    float: left;
    text-align: center;
}
#default_charts_container div.thumb_buttons div.button a, #default_charts_container div.thumb_buttons div.button a:link, #default_charts_container div.thumb_buttons div.button a:visited
{
    display: block;
    text-decoration: none;
    color: #000000;
    border: 1px solid #CCCCCC;
    height: 12px;
    padding: 5px;
    width: 152px;
}
#default_charts_container div.thumb_buttons div.button a:hover, #default_charts_container div.thumb_buttons div.button a:active
{
    display: block;
    color: #000000;           
    border: 1px solid #007EC3;
    height: 12px;
    padding: 5px;
    width: 152px;
    font-weight: bold;
}
#default_charts_container img
{                
    padding: 10px;
    border: 1px solid #CCCCCC;
}
#default_charts_container a:hover img 
{
    border: 1px solid #007EC3;
}

.charttooltip-tip {
    color: #000000;
    width: 130px;
    border: 1px solid #333333;
    z-index: 13000;
}
 
.charttooltip-title {
    font-weight: bold;
    font-size: 11px;
    margin: 0;
    color: #000000;
    padding: 8px 8px 4px;
    background: #8AC0E2;
    border-bottom: 1px solid #000000;
}
 
.charttooltip-text {
    font-size: 11px;
    padding: 4px 8px 8px;
    background: #CCCCCC;
}

div#downloadcharts {
    width: 50%;
    margin: 0px auto;
    text-align: center;
}

div#downloadcharts fieldset
{
    border: 1px dashed #999999;
    padding: 10px;
    margin: 5px;
    text-align: center;
}
div#downloadcharts fieldset legend
{
    color: #000000;
    background-color: #FFFFFF;
    padding: 0px 5px;
}
div#downloadcharts input
{
    border: 1px solid #000000;
    margin-left: 5px;
    margin-top: 5px;
}

p.customheading
{
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
}

input#generate
{
    height: 20px !important;
    font-size: 14px !important;
    background-color: #007EC3 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;       
    line-height: 20px !important;
    padding: auto !important;
}

div#helpoverlay
{
    width: 400px;
    top: 50px !important;
}
div#helpoverlay h1
{
    text-align: left;
    margin-top: 0;
    font-size: 20px;
    padding: 5px 0;
    font-weight: bold;
}
div#helpoverlay h2
{
    text-align: left;
}
div#helpoverlay p
{
    text-align: left;
    font-size: 12px;
}
div#helpoverlay ul, div#helpoverlay ol
{
    text-align: left;
    font-size: 11px;
}
div#helpoverlay input
{
    height: 20px !important;
    font-size: 14px !important;
    background-color: #007EC3 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;       
    line-height: 20px !important;
    padding: auto !important;
}
div#nodataoverlay
{
    width: 400px;
    top: 50px !important;
}
div#nodataoverlay h1
{
    text-align: left;
    margin-top: 0;
    font-size: 20px;
    padding: 5px 0;
    font-weight: bold;
}
div#nodataoverlay p
{
    text-align: left;
    font-size: 12px;
}
div#nodataoverlay ul, div#nodataoverlay ol
{
    text-align: left;
    font-size: 11px;
}
div#nodataoverlay input
{
    height: 20px !important;
    font-size: 14px !important;
    background-color: #007EC3 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;       
    line-height: 20px !important;
    padding: auto !important;
}

div#save_div input
{
    height: 20px !important;
    font-size: 14px !important;
    background-color: #007EC3 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;       
    line-height: 20px !important;
    padding: auto !important;
}