/* ---- STRUCTURE ---- */
/* height system to have scrolly panels */

html,
body,
.container-fluid{
    height: 100%;
}

.main-content{
    height: 85%;
}


#filters,
#projects,
#project_panel,
#map-container,
#map{
    height: 100%;
}

#input-map {
  height: 500px;
}

#filters,
#projects,
#project_panel{
    overflow-y: scroll;
}

/* sections micro-space */

nav{
    padding: 2em 0 2em 0;
}


#hero-intro h2{
    margin: 0;
    padding: 0.8em 0 0.8em 0;
}

#filters{
    padding-top: 1em;
}

#filters a{
    margin-left: 3px;
}

.input-group {
    margin-bottom: 2em;
}

#projects h2{
    margin: 0;
    padding-bottom: .5em;
}

#submit-form {
    padding: 0 3em 0 0;
}

#submit-form-div{
    padding: 2em 4em 2em 4em;
}

#about,
#data-policy{
    padding: 1em 3em 3em 3em;
}

.footer-nav{
    padding-top: 1em;
    padding-bottom: 1em;
}

.footer-nav li{
    margin: .5em 0 .5em 0;
}

.copyright{
    padding-top: 1em;
}

.initiative-by{
    margin-top: .5em;
    margin-bottom: 1em;
}

.initiative-by img{
    margin-top: .5em;
    margin-bottom: .5em;
}

div.cartodb-popup.v2 {
  width:417px
}

/* ----- MODULES ----- */

/* buttons style for links */
nav a {
    padding: .3em .9em .3em .9em;
    border-radius: 0px;
    margin: 0% .7% 0% .7%;
    float: right;
}

.footer-nav a{
    padding: .3em .9em .3em .9em;
    border-radius: 0px;
}

/* project and agency summaries */
#projects > div{
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 1em;
}

#projects-summary{
    border-right: 1px solid #f3f3f3;
}

/* each project stands for itself */
#projects li {
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 0.5em;
    /* padding-bottom: 0.1em; */
}

/* explanations in form */
.well {
    padding: 1.5em;
    background-color: white;
    border: 1px solid #E2E3E4;
    border-radius: 4px;
}

.well2 {
    padding: 1.5em;
    background-color: #f1f1f1;
    border: 1px solid #E2E3E4;
    border-radius: 4px;
}

/* Form */

.form-control {
    display: block;
    width: 100%;
    height:48px;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 2px solid #edf0f4;
    border-radius: 4px;
    box-shadow: none!important;
    margin-bottom:16px;
}

.form-horizontal .control-label {
    text-align: right;
    font-weight: 400;
}

/* Buttons */

.btn-default {
    display: block;
    width: 100%;
    min-width: 50px;
    height:48px;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 2px solid #edf0f4;
    border-radius: 4px;
    box-shadow: none!important;
    margin-bottom:16px;
}

.btn-primary {
    color: #fff;
    background-color: #F45851; /*orange */
    border-color:#F45851;
    padding:10px 24px;
    border-radius: 24px;
    margin-top: 20px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: black;
    border-color: black;
    border-style: dashed;
}

/* project panel */
#project_data {
  padding-bottom: 4em;
}

#project_data .glyphicon {
  margin-right: 8px;
}

/* #project_data h3 a { */
/*    padding-right: 18px; */
/*    background: transparent url(../img/Icon_External_Link.png) no-repeat center right; */
/* } */

/* more space within form components: fieldset block and header (legend) */


/* search button discard contents */

#searchclear {
    position:absolute;
    right: 60px;
    top:0;
    bottom:0;
    height:14px;
    margin:auto;
    font-size:20px;
    cursor:pointer;
    color:#a6a6a6;
    z-index:3;
    margin-top: 15px;
}

/* ----- TYPOGRAPHY ----- */

body{
	font-family: 'Roboto Bold', sans-serif;
	font-size:16px;
	line-height:1.6em;
	color:#555;
	font-weight:400;    
}

.well{
    font-weight:300;
}

.well2{
    font-weight:300;
}

#hero-intro{
    text-align: left;
}


/* #projects, */
#projects h2{
    text-align: center;
}


#project_panel h3{
    text-transform: uppercase;
    color: #ccc;
    margin-bottom: 0;
}

a:hover{
    text-decoration: none;
}

/* ----- COLOR SCHEME -----

As the map is the bigger component within the page, it sets the ambient.
Based on the sea color (blue http://www.colorhexa.com/d8e1ee) we work a palette
from there: nav and hero sections are a shade variation of the blue sea.

*/

/* nav, footer-nav is the background color for the top and bottom of the screen.
 * Chanegd for consistency the toolkit. */

nav,
.footer-nav{
    background-color: #3b9bbf;
}

/* hero-intro is the background color for the gray behind the logo and title of each page.
 Chanegd for consistency with the toolkit. */

#hero-intro{
    background-color: #f2f2f3;
}

main,
#submit-form{
    background-color: #f3f3f3;
}


#about,
#data-policy,
#filters,
#projects,
#project_panel,
#submit-form-div{
    background-color: white;
}

.copyright{
    background-color: #1D3464;
}

#map-container{
    background-color: #d8e1ee;
}

nav a{
    background-color: #192639;
}

nav a:hover,
.footer-nav a:hover{
    background-color: #000000;
}

.current{
    background-color: #3b9bbf;
}

.lead-btn{
    background-color: #3b9bbf;
}

.lead-btn:hover{
    background-color: #f45851;
}

header {
    color: black;
}
footer {
    color: white;
}

.copyright {
    color: #5A87AA;
}

a {
    color: #00a2da;
}

.copyright a:hover,
a:hover {
    color: #f45851;
}

nav a,
.footer-nav a,
nav a:hover,
.footer-nav a:hover,
.copyright a{
    color: white;
}

#projects h5,
#filters p{
    color: #7d7d7d;
}

#project_data p strong{
    color: #FE8433;
}

#project_data #contact_info h4{
    color: #0067AB;
}

.orange{
    color: #F15A53;
}

.light-blue{
    color: #3A7498;
}

.blue{
    color: #0067AB;
}

.light-grey{
    color: #e2e3e4;
}

.feature{
    height:300px;
    background-color: #00a2da;
    padding:24px;
}

/* STYLEs FOR MULTILEVEL CHECKBOXES */

/* hide real checkboxes */
.multiLevelCheckbox input {
  display: none;
}

/* add new checkboxes */
.multiLevelCheckbox span {
  width: 15px;
  height: 15px;
  float: left;
  background: url("images/lite-green-check.png");
  background-repeat: no-repeat;
}

.multiLevelCheckbox input:checked + span {
  background-position:0px -15px;
}

/* add margin for child cat */
.multiLevelCheckbox.child-location span {
  margin-left: 50px;
}

/* add margin for label */
ul {
  list-style-type:none;
}

ul#checkboxLists label {
  padding-left: 10px;
}

ul#checkboxLists li {
  min-height: 15px;
}

#childCheckboxes {
  display:none;
}
/* END OF STYLEs FOR MULTILEVEL CHECKBOXES */