/*--------------------------------+
 | Site: California Incarceration |
 | Part: Master styles                        |
 +--------------------------------*/

/* Imports
=====================================================================*/
@import url(http://fonts.googleapis.com/css?family=Merriweather:300,900|Open+Sans:400,400italic,700,700italic);
@import "/styles/reset.css";
@import "/styles/forms.css";


/* Fonts
======================================================================*/
body, input, select, textarea { font-family: "Open Sans", Arial, sans-serif; }
h1 { font-family: Merriweather, Georgia, "Times New Roman", Times, serif; }


/* Basics
======================================================================*/
a { color: #267acc; text-decoration: none; }
a:hover { text-decoration: underline; }
address { font-style: normal; }
blockquote, dl, ol, p, table, ul { margin-bottom: 1em; }
body { background: #ebf6ff; height: 100%; font-size: 15px; line-height: 1.5; padding-bottom: 30px; }
cite, em { font-style: italic; }
dt { margin-top: 1.35em; }
dt:first-child { margin: 0; }
fieldset { border: 1px solid #ddd; margin-bottom: 2em; padding: 1em 1.5em; }
h1 { font-size: 29px; font-weight: 300; line-height: 1.27; margin-bottom: 0.6em; }
h1 span, h2 span, h3 span, h4 span { font-size: 15px; font-weight: normal; margin-left: 0.5em; }
h2 { font-size: 21px; line-height: 1.23; margin-bottom: 0.71em; }
h2, h3, h4, h5, h6, strong { font-weight: bold; }
h3 { font-size: 17px; line-height: 1.35; }
h4 { text-transform: uppercase; }
hr { background: #ddd; border: 0; clear: both; color: #ddd; height: 1px; margin: 1em 0; }
html { height: 100%; }
ol { list-style: decimal; margin-left: 1.5em; }
ol ol { list-style: lower-alpha; }
select { padding: 0.1em 0.2em; }
sub { font-size: 10px; vertical-align: sub; }
sup { font-size: 10px; vertical-align: super; }
table { border-collapse: collapse; width: 100%; }
table p { margin: 0; }
td, tbody th, tfoot th { border: 1px solid #ddd; border-width: 1px 0; padding: 0.3em 0.5em 0.3em 0; vertical-align: top; }
tfoot td, tfoot th { border-top: 3px double #555; font-weight: bold; }
thead th { border-bottom: 3px double #555; font-size: 1em; font-weight: bold; padding: 0 0.4em 0.25em; vertical-align: bottom; }
ul { list-style: disc; margin-left: 1.5em; }
ul ol li { background: none; padding: 0; }

/* Stock classes */
.flat { list-style: none; margin-left: 0; }
.l { float: left; }
.r { float: right; }


/* Core layout
======================================================================*/
.clear { clear: both; }
#content { background: #fff; margin: 0 auto; padding: 30px; width: 920px; }
#content-primary { float: left; margin-bottom: 20px; width: 60.3%; }
#content-secondary { float: right; margin-bottom: 20px; width: 36.63%; }
#header-content { margin: 0 auto; width: 980px; }
#frame { width: 100%; height: 100%; }

/* Columns */
.c2l, .c2r { width: 48%; }
.c2l, .c3l, .c3m { float: left; }
.c2r, .c3r { float: right; }
.c3l { margin-right: 3%; }
.c3l, .c3m, .c3r { width: 31%; }
ul.c2l, ul.c2r { list-style: none; margin-left: 0; }
.col4 .col { float: left; margin-right: 1%; width: 24%; }

/* County */
.county #content-primary { width: 60.3%; }
.county #content-secondary { width: 36.63%; }

/* Full */
.full #content-primary { width: 100%; }
.full #content-secondary { display: none; }

/* Home */
.home #content-primary { float: left; width: 36.63%; }
.home #content-secondary { float: right; width: 60.3%; }


/* Content
======================================================================*/
/* Actions */
.action {
    background: #174a7c;
    border: 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 0.25em 1em;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}

.action:hover { box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); text-decoration: none; }

/* Ages */
#ages { border-bottom: 1px solid #999; font-size: 16px; margin-bottom: 10px; }

#ages a {
    background: #f5f5f5;
    border-radius: 7px 7px 0 0;
    border: 1px solid #ccc;
    border-bottom-color: #999;
    display: block;
    margin-bottom: -1px;
    padding: 0.3em 1em;
    position: relative;
}

#ages a:hover { background: #fff; }
#ages li.current a { background: #fff; border-color: #999; border-bottom-color: #fff; color: #000; }
#ages li.current a:hover { cursor: default; text-decoration: none; }
#ages li { float: left; margin-right: 2px; }
#ages ul { list-style: none; margin: 0; }

/* Alert */
#alert { position: relative; }

#alert-content {
    background: #ffc;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    left: 25%;
    padding: 0.5em 0;
    position: absolute;
    text-align: center;
    top: -67px;
    width: 50%;
}

/* Callouts */
div.call-l, img.call-l { clear: left; }
div.call-r, img.call-r { clear: right; }
dt img.call-l { margin-top: 0; }
.call-l { float: left; margin: 3px 1em 0.5em 0; }
.call-r { float: right; margin: 3px 0 0.5em 1em; }
.call, div.call-l, div.call-r { font-size: 0.75em; }
.call img, .call-l img, .call-r img { display: block; }
.call img.icon, .call-l img.icon, .call-r img.icon { display: inline; }
.call, .call-l p, .call-r p { margin-bottom: 0.5em; }
.credit { color: #7f8183; font-size: 0.75em; letter-spacing: 0.01em; margin-bottom: 0.5em; text-align: right; }

/* Capacity tables */
#capacity-data td { text-align: center; }
#capacity-data td:first-child { text-align: left; white-space: nowrap; }
#capacity-data tfoot td { font-weight: bold; }
#capacity-data thead th { color: #267acc; cursor: pointer; padding-left: 0; padding-right: 0; white-space: nowrap; }
#capacity-data .ui-tabs-selected a { color: #000; font-weight: bold; }

/* Charts */
.bar-chart { font-size: 11px; line-height: 1; list-style: none; margin-left: 0; white-space: nowrap; }
.bar-chart .idx { background: #5f738c; border: 1px solid #ccc; border-radius: 3px; display: block; height: 100%; }
.bar-chart .label { float: left; font-weight: normal; padding-top: 3px; text-align: right; width: 30%; }
.bar-chart li { clear: both; overflow: hidden; padding: 2px; }
.bar-chart li:hover, .bar-chart li.current { background: #d9e5f4; }
.bar-chart li:hover .idx { border-color: #000; }
.bar-chart li.over .idx { background-image: url(/images/fade.png); background-repeat: repeat-y; background-position: 100% 0; }
.bar-chart .point { float: right; height: 15px; width: 67%; }
.bar-chart .state { background: #f0f0f0; }
.bar-chart .state .label { color: #000; font-weight: bold; }

    /* Chart list */
    #chartlist { list-style: none; margin-left: 0; }
    #chartlist .chart { float: right; height: 150px; margin: -5px 0 20px 0; width: 48%; }
    #chartlist .desc { float: left; font-size: 13px; margin-bottom: 20px; width: 48%; }
    #chartlist h2 { margin-bottom: 0.2em; }
    #chartlist li { border-top: 1px solid #ddd; clear: both; padding-top: 0.5em; }
    
    /* Demographics */
    #genders, #races { height: 150px; margin-bottom: 20px; }
    
    /* Static charts */
    #felony-chart, #population-chart { height: 300px; }

/* Color scale */
#scale ol { list-style: none; margin: 0; }

    /* Axis */
    #scale #axis { font-size: 13px; margin-bottom: 15px; text-align: center; }
    #scale #axis #min { float: left; }
    #scale #axis #max { float: right; }
    .disabled #scale #axis { color: #fff; }
    
    /* Colors */
    #colors li { float: left; height: 100%; width: 10%; }
    #colors li:first-child { border-radius: 3px 0 0 3px; }
    #colors li:last-child { border-radius: 0 3px 3px 0; }
    #colors ol { float: left; height: 20px; margin-left: 0; width: 100%; }
    
        /* Disabled */
        .disabled #scale #colors #c1,
        .disabled #scale #colors #c2,
        .disabled #scale #colors #c3,
        .disabled #scale #colors #c4,
        .disabled #scale #colors #c5,
        .disabled #scale #colors #c6,
        .disabled #scale #colors #c7,
        .disabled #scale #colors #c8,
        .disabled #scale #colors #c9,
        .disabled #scale #colors #c10 {
            background: #f0f0f0;
        }
        
        /* Dual color */
        .dual #colors #c1 { background: #0c271a; }
        .dual #colors #c2 { background: #1c6837; }
        .dual #colors #c3 { background: #41ab5c; }
        .dual #colors #c4 { background: #addd8d; }
        .dual #colors #c5 { background: #f8fdba; }
        .dual #colors #c6 { background: #fcf7bc; }
        .dual #colors #c7 { background: #f7c54f; }
        .dual #colors #c8 { background: #ec7026; }
        .dual #colors #c9 { background: #993314; }
        .dual #colors #c10 { background: #2a1002; }
        
        /* Single color */
        .single #colors #c1 { background: #feffe5; }
        .single #colors #c2 { background: #fcf7bc; }
        .single #colors #c3 { background: #f9e391; }
        .single #colors #c4 { background: #f7c54f; }
        .single #colors #c5 { background: #f49a2b; }
        .single #colors #c6 { background: #ec7026; }
        .single #colors #c7 { background: #cc4b1e; }
        .single #colors #c8 { background: #993314; }
        .single #colors #c9 { background: #66250a; }
        .single #colors #c10 { background: #2a1002; }

/* Datapoints */
.data ul li:hover, .current { font-weight: bold; }
#datapoints { border: 1px solid #999; border-bottom: 0; }
#datapoints .data-desc { margin-bottom: 0.7em; }
#datapoints .data { border-bottom: 1px solid #ddd; height: 400px; overflow-x: hidden !important; overflow-y: scroll; padding: 10px 15px 15px; }
#datapoints .filterable { position: absolute; right: 15px; top: 4px; }
#datapoints .filter-icon { cursor: help; margin-left: 3px; }

#datapoints h3 {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
    border-bottom: 1px solid #ddd;
    color: #013578;
    cursor: pointer;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.3;
    padding: 0.3em 15px 0.4em;
    position: relative;
}

#datapoints h3:hover {
    background: #f2f2f2;
    background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #f2f2f2 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #f2f2f2 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #f2f2f2 0%,#ffffff 100%);
    background: linear-gradient(top, #f2f2f2 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffffff',GradientType=0 );
    color: #000;
}

#datapoints h3 .arrow { margin: 0; }
#datapoints h3.ui-state-active { background: #174a7c; filter: none; color: #fff; position: relative; }

#datapoints h3.ui-state-active .arrow {
    background: #fff url(/images/arrow.png) no-repeat 100% 50%;
    height: 30px;
    position: absolute;
    right: -15px;
    top: 0;
    width: 15px;
}

#datapoints .ui-accordion-content { font-size: 12px; line-height: 1.4; }

    /* Smaller datasets for Juvenile data */
    #juveniles #datapoints .data { height: 370px; }

/* Download */
#download { background: #f0f0f0; border-radius: 15px; padding: 30px; }

/* Filters */
.filterset { float: left; font-size: 13px; margin: 0 12px 30px 0; }

.filterset a {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd));
    background: -webkit-linear-gradient(top, #ffffff 0%,#dddddd 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#dddddd 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#dddddd 100%);
    background: linear-gradient(top, #ffffff 0%,#dddddd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
    border: 1px solid #999;
    display: block;
    padding: 0.3em 0.55em 0.35em;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.5);
}

.filterset a:hover {
    background: #dddddd;
    background: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #dddddd 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #dddddd 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #dddddd 0%,#ffffff 100%);
    background: linear-gradient(top, #dddddd 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff',GradientType=0 );
    color: #000;
    text-decoration: none;
}

.filterset .filter-icon { margin: 0 0.2em 0.3em 0; }
.filterset li { float: left; margin-left: -1px; }
.filterset li.current a { background: #174a7c; filter: none; border-color: #5f738c; color: #fff; text-shadow: none; }
.filterset li.disabled a { background: #fff; filter: none; border-color: #ccc; color: #bfbfbf; }
.filterset li:first-child a { border-radius: 4px 0 0 4px; }
.filterset li:last-child a { border-radius: 0 4px 4px 0; }
.filterset p { margin: 0; }
.filterset ul { list-style: none; margin-left: 0; }

    /* Indicators */
    .filter-icon {
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 3px;
        color: #666;
        display: inline-block;
        font-size: 10px;
        text-align: center;
        text-transform: uppercase;
        vertical-align: middle;
        width: 14px;
    }

/* Footer */
#credit { float: right; }
#footer { border-top: 1px solid #ddd; clear: both; font-size: 12px; padding: 0.75em 0 30px; }

    /* Subfooter */
    #subfooter { border-top: 1px solid #ddd; clear: both; display: none; padding-top: 20px; }
    #subfooter-primary { float: left; margin-bottom: 20px; width: 48%; }
    #subfooter-secondary { float: right; margin-bottom: 20px; width: 48%; }
    .county #subfooter, .home #subfooter { display: block; }

/* Footnotes */
#footnotes { clear: both; color: #777; font-size: 12px; list-style: none; margin-left: 0; padding-top: 15px; }
#footnotes li { margin-bottom: 0.7em; }

/* Legend */
#legend { list-style: none; margin: 0; }
#legend img { margin-right: 3px; vertical-align: middle; }
#legend li { display: inline; margin-right: 1em; }

/* Header */
#header { background: #fff; border-bottom: 10px solid #dcedff; margin-bottom: 30px; line-height: 1.3; padding: 35px 0 20px; }
#header a { text-decoration: underline; }
#header a:hover { text-decoration: none; }
#header-primary { float: left; padding-top: 21px; width: 48.46%; }
#header-secondary { float: right; width: 48.46%; }

/* Icons */
a[class*="icon"] { background-repeat: no-repeat; background-position: 0 0.2em; padding: 3px 0 3px 22px; }
.icon-facebook { background-image: url(/images/facebook.png); }
.icon-twitter { background-image: url(/images/twitter.png); }
.icon-xls { background-image: url(/images/xls.png); }

/* Hidden */
.hidden { display: none; }

/* Map */
    /* Counties */
    #county-map { background: #f0f0f0; border: 1px solid #ddd; height: 360px; margin-bottom: 20px; }
    
    /* State */
    #state-map { border: 1px solid #999; margin-bottom: 20px; height: 775px; }
    #state-map img { float: right; padding-bottom: 8px; }
    #state-map h5 { clear: both; }

/* Muted text */
.mute { color: #777; font-size: 12px; }

/* Page tools */
#page-tools { float: right; white-space: nowrap; width: 33%; }

/* References */
.ref { font-size: 11px; list-style: none; margin-left: 0; }
.ref li { margin-bottom: 0.25em; padding-left: 2em; text-indent: -2em; }

/* Tabs */
.ui-tabs-hide { display: none; }

/* Tooltips */
#tooltip {
	background-color: #fff;
	border: 2px solid #777;
	border-radius: 3px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
	position: absolute;
	padding: 5px;
	z-index: 3000;
}

#tooltip h3, #tooltip div { margin: 0; }

/* Years */
#years { font-size: 23px; list-style: none; margin: 0 0 15px 0; }
#years li { display: inline; margin-right: 0.75em; }