/* BOOTSTRAP 3.x GLOBAL STYLES
 * Color Palette based on original site:
 * #5A6B72  steel blue
 * #C3A995  yellow/tan
 * #445358  blue
 * #4DAA57  green
 * #B25F00  Orange/brown
-------------------------------------------------- */
body {
  padding-bottom: 40px;
  color: #5A5A5A;
  /*background-color: #E1DFC4; */
  font-family: "arial",sans-serif;
  line-height:22px;
  font-size:16px; 
}

body > .container { height:100%; background-color:white; }

header { 
    background-color:#5A6B72; font-family:'Droid Sans',sans-serif; 
}
h1,h2,h3,h4,h5,h6 { font-family:'Raleway', sans-serif; color:#445358; }
h1 { font-size: 36px;  }
h2 { font-size: 30px; font-weight:bold; color:#C3A995; }
h3 { font-size: 24px; }
label, strong { color:#606060; }
hr { border-width:4px; }

a:visited { color:#A18773; } /*minus 2 to the beige to get a more readable link*/
a:hover { color:#B25F00; }

footer { font-family:'Droid Sans', sans-serif; }
footer a {  padding:10px; }
footer a:first-child { padding-left:0; }

#bttop{
    background-image:url('icon/backtotop.png'); background-position:0 0;
    background-repeat:no-repeat; height:49px; width:49px; padding:5px; position:fixed;
    bottom:35px;right:10px; cursor:pointer; display:none; text-indent:-9999px;
}
#bttop:hover{background-image:url('icon/backtotophv.png');}

/* CUSTOM COLORS and fonts
 * -------------------------------------------------- */
.color1 { background-color: #5A6B72; color:white; }
.color2 { background-color: #C3A995; color:white; }
.color3 { background-color: #445358; color:white; }
.color4 { background-color: #4DAA57; color:white; }
.color5 { background-color: #B25F00; color:white; }
.color6 { background-color: #E1DFC4; color:white; }

.raleway { font-family:'Raleway', sans-serif; }
.droid-sans { font-family:'Droid Sans', sans-serif; }
.arial { font-family: 'arial', sans-serif; }
.icon { width:25px; height:25px; }

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar { 
    margin-bottom:0px; 
    padding-top:0px;
}
.navbar-header img { max-height:150px; max-width:325px; padding:15px; }
.navbar-nav > li > a { padding:0 25px; padding-top:30px; padding-bottom:5px; color:white; }
.navbar-nav > li > a:hover { background-color:#133; }
.navbar-nav > li.facebook-icon a { padding-top:20px; padding-right:0; }
.navbar-nav > li.facebook-icon > a:hover { background:none; }
.navbar-nav > li.facebook-icon  img { width:35px; height: 35px; }
.navbar-nav .form-control { padding-top:0; padding-bottom:0; }
.navbar-nav .input-group { padding-top:5px; width:275px; }
.navbar-nav .input-group-addon { padding-top:0; padding-bottom:0; background-color:white; }
.navbar-nav .input-group-addon button { border:none; padding:0; width:100%; background:none; }
.navbar-nav .input-group-addon button img { max-width:25px; }
.navbar-brand { height:auto; padding:0; }
.icon-bar { background-color:white; }
.nav-search { float:none; text-align:right; padding-top:0px; }
#carousel-bar {
    height:85px; background-image: url('../images/topbar.jpg'); background-repeat: no-repeat;
    border-bottom:4px solid #5D6A72; 
}

/* CUSTOM Object: xs-search for showing the search box at the xs resolution*/
#xs-search { padding:20px; }
#xs-search .input-group-addon { padding-top:0; padding-bottom:0; }
#xs-search .input-group-addon button { border:none; padding:0; width:100%; }

/* SEARCH RESULTS
-------------------------------------------------- */
.search-result { padding:10px 0px; border-top:1px solid #D4DDDF; }
.search-result a:hover { text-decoration:none; }
.search-result .icon { width:15px; height:15px; }
.search-result .col-md-10, .search-result .col-xs-1 { padding:0; }

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 1;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 400px;
  background-color:#555;
}
.carousel .img-responsive {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 400px;
  width:100%;
}

.jumbotron { background-color: rgba(90, 107, 114, 0.65); text-align:left; padding:30px 20px; }
.jumbotron h1 { font-size: 36px; }
.jumbotron p { padding-left: 25px; color:white; font-size:12px; }
.jumbotron p img { height:200px; }
.jumbotron strong { color:#C3A995; } 
.jumbotron button { width:100px; font-weight:bold; }

.jumboimage { margin:0 auto; width:100%; }
.jumboimage img { width:100%; max-width:650px; border-radius:1em; margin-bottom:20px;  }

/* HOMEPAGE CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.homepage {
  padding-left: 15px;
  padding-right: 15px;
}
.homepage .row { margin-bottom:10px; }
/* Center align the text within the three columns below the carousel */
.homepage .col-sm-4 {
  text-align: center;
  margin-bottom: 20px;
}
.homepage h2 {
  font-weight: normal; font-family:'Droid Sans',sans-serif; 
  width:200px; height:200px; font-weight:bold; margin:0 auto;
  padding:70px 10px; background-color: #5A6B72; color:white;  border-radius:50%; 
}
.homepage a:hover { text-decoration:none; }
.homepage a:hover h2 { background-color:#B25F00; }

/* RECORD CONTENT
-------------------------------------------------- */
#record-header ul { list-style:none; }
#record-header .icon { width:50px; height:50px; margin:5px 10px; }

#image img { max-width:400px; max-height:400px; width:100%; }

/* CUSTOM ALERTS
-------------------------------------------------- */
.alert { margin-top:10px; margin-bottom:10px; }
.alert ul { list-style:none; padding-left:5px; }

/* AG SAFETY CENTER PAGE
-------------------------------------------------- */
#ag-center-map { position:relative; width:650px; margin:0 auto }
#ag-center-map img { width:100%; } 
#ag-center-map div { background:none; border:2px solid black; width:100px; height:35px; text-align:center; }
#ag-center-map a:hover { text-decoration:none; }
#ag-center-map a:hover div { background-color:#DEDEDE; } 
    
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Remve the edge padding needed for mobile */
  .homepage {
    padding-left: 0;
    padding-right: 0;
  }

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
    margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
  }
  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

}

@media (max-width:767px) {

    .navbar-collapse { width:100%; }
    .navbar-brand img { margin: 0 auto; }
    .navbar-nav > li > a {
        padding:10px; 
    }
    .navbar-header img { padding:0; margin-top:5px; margin-bottom:5px; max-width:200px; }
    .homepage .row {margin-bottom:0; }
    .homepage .col-sm-4 { margin-bottom:0; }
    .homepage h2 {
        border:none; background-color:white; color: #445358; width:100%; padding:0; margin:15px auto;
        height:auto; border-radius:0;
    }
    .homepage a:hover h2 { background:none; text-decoration:underline; }
    .homepage br { display:inline; }

    h1,h2,h3,h4,h5,h6 { font-family:'Raleway', sans-serif; color:#445358; }
    h1 { font-size: 32px;  }
    h2 { font-size: 28px; font-weight:bold; color:#C3A995; }
    h3 { font-size: 24px; }

    .search-result { padding:10px; }
}