/* -----------------------------------------
   Shared Styles
----------------------------------------- */
body { font-size: 14px; line-height: 16px; color: #555; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; background: #eee; }
h1,
h2,
h3,
h4 { margin: 0; color:#222; }
h2 { font-size:16px; }
#indicators h2.selected {
    width: 170px;
    background-color: #EDF4E4;
    padding: 5px 5px 7px 5px;
    text-align:center;
    border-top: none;
}
h3 { font-size:30px; }
h4 { font-size:18px; }
p { margin: 0 0 15px; }
ul { padding: 0; margin: 0; }
a:link,
a:visited,
a:active { text-decoration:underline; color:#3180ba; }
a:hover { text-decoration:none; /*color:#6aadd3;*/ }
a.disabled { color:#ccc !important; cursor:default; }
.border { border: 1px solid #eee; }
.border-bottom { border-bottom: 1px solid #eee; }
.border-top { border-top: 1px solid #eee; }
.margin-none { margin:0; }
.margin-top-30 { margin-top: 30px; }
.left { float: left; }
.right { float: right; }
.pointer { cursor: pointer; }
.uppercase { text-transform:uppercase; font-weight:bold; }
.hidden { display:none; }

/* -----------------------------------------
   Wrapper
----------------------------------------- */
#databook-content {
  position: relative;
  width: 940px;
  height: 100%;
  background-color: white;
  margin: 0px auto;
  padding: 0 0 125px;
  overflow: hidden;
  font-family: 'Source Sans Pro', "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

#databook-content h1#title {
  font-family: 'Source Sans Pro', "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 2.5em;
  line-height: 1em;
  margin-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 5px;
}
.width { width: 920px; padding: 0 10px; }
/* -----------------------------------------
   Banner
----------------------------------------- */
#banner,
.crosstab-nav-wrapper {
  z-index: 9999;
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}
#banner img {
  display: block;
  top: 3px;
  position: relative;
}
#chatter {
    width:900px;
    margin: 5px 0 0 0px;

}
#chatter > p {
    margin-bottom:10px;
    line-height: 16px;
}

.crosstab-nav-wrapper {
  position:relative;
}
.crosstab-nav-wrapper ul.crosstab-nav {
    list-style-type:none;
    padding-right: 10px;
}
#databook-content .crosstab-nav-wrapper li {
    display:inline;
}
#databook-content .crosstab-nav-wrapper li a {
    text-decoration:none;
    color:#555;
    padding-left: 40px;
    margin-left: 20px;
    border-left: 1px solid #DDD;
}

#databook-content .crosstab-nav-wrapper li a:hover {
    color:#3180ba;
}
#databook-content .crosstab-nav-wrapper li a.selected {
    color:#3180ba;
    cursor:default;
}
.crosstab-nav-wrapper li a.crosstab-btn { padding-left: 40px; background: url('http://sisiwei.github.com/DC-Count-for-Kids/databook/images/crosstabs-mini.png') no-repeat; }
.crosstab-nav-wrapper li a.crosstab-btn#distressed-nbhds-btn { background-position: 14px 1px; }
.crosstab-nav-wrapper li a.crosstab-btn#child-success-btn { background-position: 14px -16px; }
.crosstab-nav-wrapper li a.crosstab-btn#assets-btn { background-position: 14px -33px; }
.crosstab-nav-wrapper li a.selected#distressed-nbhds-btn, 
.crosstab-nav-wrapper li a.crosstab-btn#distressed-nbhds-btn:hover { background-position: 14px -50px; }
.crosstab-nav-wrapper li a.selected#child-success-btn, 
.crosstab-nav-wrapper li a.crosstab-btn#child-success-btn:hover { background-position: 14px -67px; }
.crosstab-nav-wrapper li a.selected#assets-btn, 
.crosstab-nav-wrapper li a.crosstab-btn#assets-btn:hover { background-position: 14px -84px; }

.crosstab-nav-wrapper .arrow-wrapper {
    position: absolute;
    bottom: 0px;
    display:none;
}
.crosstab-nav-wrapper .arrow-down-border {
    width: 0; 
    height: 0; 
    border-left: 11px solid transparent;
    border-right: 11px solid transparent; 
    border-top: 11px solid #ddd;
    position:absolute;
    z-index:15;
}
.crosstab-nav-wrapper .arrow-down {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; 
    border-top: 10px solid #fff;
    position:absolute;
    left:1px;
    z-index:17;
}
/* -----------------------------------------
   Primary interactive map
----------------------------------------- */
#container { height: 100%; }
#primary {
  position: relative;
  width: 100%;
  height: 750px;
}
/* -----------------------------------------
   Sidebar of information
----------------------------------------- */
.info {
  background: white;
  padding: 0 20px 15px 0;
  float: left;
  width: 220px;
  overflow: hidden;
}

#definition { margin: 0 0px 20px; }

.indicator-floats tbody {
  border-top: none;
}

/* -----------------------------------------
   Option dropdown
----------------------------------------- */
#indicators {
  position: relative;
  margin-top: 10px;
}
#indicators .selected {
  margin: 0px 20px;
  cursor: pointer;
  line-height: 20px;
}
#indicators .arrow {
  position: absolute;
  top: 5px;
}
#indicators .arrow.fade {
  opacity:0.2;
  filter:alpha(opacity:0.2);
  cursor:default;
}
#indicators .arrow-right {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #ccc;
    right: 0;
}
#indicators .arrow-right.hover:hover {
    border-left: 10px solid #6a6a6a;
}
#indicators .arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #ccc;
    left: 0;
}
#indicators .arrow-left.hover:hover {
    border-right: 10px solid #6a6a6a;
}
ul#indicator-list {
    position:absolute;
    z-index:100;
    margin: 17px;
    width: 179px;
    list-style-type: none;
    display: none;
    left: 3px;
    border: 1px solid #EEE;
    top: 25px;
}
ul#indicator-list > li {
  cursor: pointer;
  text-align: center;
  background-color: white;
  border-top: 1px solid #EEE;
  padding: 8px 15px;
}
ul#indicator-list li:hover {
    color: #3180ba;
}

/*---------------
LEGEND
----------------*/
#legend {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 50;
  background-color: white;
  padding: 10px 15px;
  border-color: #ccc;
}
#legend p { margin-bottom: 1px; }
#legend .color { width: 20px; height: 20px; margin-right: 10px; display:block; }
#legend .label { max-width: 100px; line-height: 19px; font-size: 14px;}
.icon-4 .color { background-color:#a0cc80; }
.icon-3 .color { background-color:#bade96; }
.icon-2 .color { background-color:#d3f2b8; }
.icon-1 .color { background-color:#e3f7ce; }
.icon-0 .color { background-color:#ecfbd9; }

/* -----------------------------------------
   Map portions
----------------------------------------- */
#map-container-parent {
    float: left;
    width: 680px;
    height: 750px;
    position: relative;
}
#mainMap {
  position: absolute; top:0; left:0; width:100%; height: 100%;
}
.tooltip {
  min-width: 30px;
  position: absolute;
  top: 10px;
  border: 1px solid #ccc;
  z-index: 9999;
  background: white;
  padding: 7px;
  -moz-box-shadow: 2px 2px 8px #888; 
  -webkit-box-shadow: 2px 2px 8px #888; 
  box-shadow: 2px 2px 8px #888;
  display:none;
  font-family: 'Source Sans Pro', "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/* -----------------------------------------
   Infobox Elements
----------------------------------------- */
#map-info-content {
    top: 14px;
    position: relative;
}

#nbh-label,
#school-perf, #indicator-label {
    font-size: 11px;
    text-transform: uppercase;
    border-bottom: 1px solid #eaeaea;
}
#school-perf { display: none; }
#nbh-name {
    font-family: 'Helvetica Neue';
    font-size: 16px;
    padding-top: 5px;
    line-height: 19px;
    height: 92px;
    font-weight: bold;
}

#adult-race-pie-chart, #child-race-pie-chart {
    padding: 5px 0px;
    height: 140px;
}
.indicator-floats {
    font-family: Arial, sans-serif;
    font-size: 12px;
    position: relative;
    left: -3px;
    width: 212px;
    margin-bottom: 15px;
    display: none;
}
.indicators-floats tr { width:100%; }
.indicator-floats td {padding: 0px 0px 0px 3px; }
.indicator-floats .label {font-weight:bold;}
.indicator-floats .value {text-align:right;}
#school-perf-chart {
    padding: 5px 0px;
}

/* -----------------------------------------
   Cross-tabs (extension of .info)
----------------------------------------- */
.secondary {
    margin:30px 0 0;
    padding:30px 0 0;
}
.secondary h3 {
    margin: 0 0 10px 0;
    padding:10px 0 5px 48px; 
    background: url('http://sisiwei.github.com/DC-Count-for-Kids/databook/images/crosstabs.png') no-repeat;
}
#distressed-nbhds h3 { background-position: 0 0; }
#child-success h3 { background-position: 0 -32px; }
#neigh-assets h3 { background-position: 0 -66px; }
.secondary h4 { margin: 10px 0; } 

.cross-tab {
    float: left;
    width: 445px;
    margin: 0 15px;
}
.cross-tab.first { margin-left: 0; }
.cross-tab.last { margin-right: 0; }
.cross-tab img { width:100%; }

.summary ul, .cross-tab ul { padding: 10px 0px 10px 40px }

/* -----------------------------------------
 Social Share icons
----------------------------------------- */

.social-share { margin: 12px 20px 0; }
.social-icon { cursor:pointer; width:16px; height:17px; margin:0 5px; background: url('http://sisiwei.github.com/DC-Count-for-Kids/databook/images/share-btns.png') no-repeat; }
.twitter { background-position:0px 0px; }
.fb { background-position:0px -16px; }
.email { background-position:0px -33px; }
.crosstab-nav-wrapper .social-share { margin: 0 10px; }

/* DIV CLEARS */
#chatter-wrapper:after,
.crosstab-nav-wrapper:after,
.row:after {
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both;
}

/*-------------------------------
STICKY NAV
------------------------------*/
.fixed {
  position: fixed;
/*  box-shadow: 0px 0px 5px #aaa;
  -moz-box-shadow: 0px 0px 5px #aaa;
  -webkit-box-shadow: 0px 0px 5px #aaa;
  border-bottom: 2px solid #888;*/
}

#new-border {
  position: absolute;
  bottom: 0px;
  width: 110%;
  left: -10px;
}

.fixed #new-border {
  position: absolute;
  bottom: 0px;
  box-shadow: 0px 2px 4px #AAA;
  -moz-box-shadow: 0px 2px 4px #aaa;
  -webkit-box-shadow: 0px 2px 4px #AAA;
  border-bottom: 2px solid #888;
  width: 100%;
  height: 0px;
  left:0;
}

/*----------
CLEAR FLOATS
----------*/
.cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ }
.cf:after { clear: both; }
.cf { *zoom: 1; }