/*
By VU - 2017
A CSS file for the AgBioData site.
All the modification: bootstrap_subtheme/page.tpl.php
*/
/* Global font for  h1, h2, h3, h4, and the body */
h1, h2, h3, h4 { /*font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif;*/
    font-family: Verdana, Geneva, 'DejaVu Sans', Arial, Helvetica, sans-serif; }
/* change the color and the page-header */
.h1 .page-header {  color: #6C8268; }
/* Login: font-size on top  */
/*.page-header, 
.region-sidebar-first .block:first-child h2.block-title, 
.region-sidebar-second .block:first-child h2.block-title { margin-top: 0; font-size: 19px; }*/
/* heading text */
.page-header, 
.region-sidebar-first .block:first-child h2.block-title, 
.region-sidebar-second .block:first-child h2.block-title { margin-top: 0; font-size: 15px; }

/* Login, nice circle */
ul {  list-style-type: circle; color: #000; }
/* Login, create a new account links and password, padding from the left */
ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 15px; padding-bottom: 8px; }
/* Adding the Log-in and out to the left */
ul.secondary { float: left; }


/* tag h2 looking to margin the top of the text, as well the bottom */
h2 {  margin-top: 12px; margin-bottom: 10px;}
h2, .h2 { font-size: 23px; }
/* tag h4 margin top and bottom  */
.h4 { margin-top: 0px; margin-bottom: 1px; }

/* the whole site font-size is 14px, but not tag h2 */
body { font-size: 14px; }
body, .ui-widget {  font-family: Verdana, Geneva, 'DejaVu Sans', Arial, Helvetica, sans-serif; }
/* A line, color 1px */
hr.style1{ border-top: 1px solid #8c8b8b; }

/* Center top-image - logo AgBioData */
.carousel-inner>.item>a>img, 
.carousel-inner>.item>img, 
.img-responsive, 
.thumbnail a>img, .thumbnail>img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Any image in the site will have max width */
.img    { max-width: 100%;  max-width: 50vh;}

/* Navigation */ /* Menu bar color and height */
/* menu bar width */
.navbar { position: relative;*z-index: 2;  min-height: 57px;margin-bottom: 20px; /* 3*/  border: 1px solid transparent;margin-top: 0px; }
/* Nav bar botton background color */
.navbar-default { background-color: #6C8268; }
.navbar-inverse { background-color: #6C8268; }
/*  Menu form small phone and tablets */
.navbar-inverse .navbar-nav>li>a {  color: #FFFFFF; }
/* Navbar color and tags */
.navbar-inverse .navbar-nav>.active>a, 
.navbar-inverse .navbar-nav>.active>a:focus, 
.navbar-inverse .navbar-nav>.active>a:hover {  background-color: #6C8268; }
/* This is the navbar nav from the block Navigation: color + background */
.navbar-inverse .navbar-nav>.open>a, 
.navbar-inverse .navbar-nav>.open>a:focus, 
.navbar-inverse .navbar-nav>.open>a:hover { color: #ffffff; background-color: #404040; }
/* Small nav-bar color */
.navbar-inverse .navbar-toggle { border-color: #fff; }
/* menu labels home, about us and ...*/
.navbar-nav { background-color: #6C8268; font-size: 16px; font-weight: 100; }
/* A navigation bar can extend or collapse, depending on the screen size. */
.navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px;  margin-right: 0px; margin-bottom: 8px; background-color: transparent;  background-image: none; border: 1px solid transparent; border-radius: 4px; }

/* Getting the nav-bar menu early, Bootstrap nav-bar breakpoint */
@media (max-width: 867px /*1306px*/ ) {
    .navbar-header                  { float: none; }
    .navbar-left,.navbar-right { float: none !important; }
    .navbar-toggle                  { display: block; }
    .navbar-collapse               { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
    .navbar-fixed-top             { top: 0; border-width: 0 0 0px; }
    .navbar-collapse.collapse { display: none!important; }
    .navbar-nav                       { float: none!important; margin-top: 0px; }
    .navbar-nav>li                  { float: none; }
    .navbar-nav>li>a              { padding-top: 10px; padding-bottom: 10px; }
    .collapse.in                        { display:block !important; }
}
/* this is the mobile size */
@media (max-width: 867px) { .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #cfb825; }}

/* Scrollable menu. */
.dropdown-menu {  height: auto;  max-height: 300px; overflow-x: hidden; }
/* Large menu */
.dropdown-menu > .active > a, 
.dropdown-menu > .active > a:hover, 
.dropdown-menu > .active > a:focus { color: #fff; text-decoration: none; background-color: #6C8268; outline: 0;}

/* Search box width percentage. Only for Google Chrome */
.input-group { margin-top: 3px; position: relative; display: table; border-collapse: separate; width: 100%; }
.input-group-btn { display: none; }

/* Search box width */
.container-fluid>.navbar-collapse, 
.container-fluid>.navbar-header, 
.container>.navbar-collapse, 
.container>.navbar-header { margin-right: 0px; margin-left: 0px; margin-top: 7px; }
/* The container-fluid color */
.container-fluid  { background-color: #6C8268; padding-right: 0; padding-left: 0;  margin-right: auto; margin-left: auto; bottom: 0px; }

/* Adding color to the panel top-panel-one  */
.panel-default {  /* background-color: #6C8268; */ background-color: #fff; border-color: #6C8268;  border-radius: 0 !important; }
/* right panels inside padding margin */
.panel-body    {  padding: 2px; }

/*  Forum changing the background color to white.*/
.media { background-color: white; border: 0px; }
/* This is the media first child from the forums topics. Color change before bootstrap css */
.media:first-child {  margin: 0px 0px 0px 0px; }

/* This is part of the image and field */
.field-name-field-foto img { display: block; margin-left: auto; margin-right: auto; }
/* This is the sizes of the box from the footer */
.margin-o { margin-top: 30px; margin-bottom: 0; }
/* this is the margin-top of the container box. Color: green */
.margin-one { margin-top: 0px; height: 50px; background-color: #6C8268;}


/* This is the image size from the top */
.img-fluid { max-width: 100%; height: auto;}

/*Jumbotron*/
/* This is a container and jumbotron-fluid, changing the color, border... */
.container .jumbotron-fluid { background-color: white; border: 1px solid #DCDCDC; padding: 6px 15px; border-radius: 30px; }
.jumbotron p                        { margin-bottom: 9px; font-size: 16px; !important; font-weight: 100; }
/* Main site, content text*/
.jumbotron                           { background-color: #f0f2ef*; padding: 3px 3px 0px 3px; }

/********************* jumbotron only *****************/
/* a represents the top left text, b is the slideshow below */
/* d is the right twitter and news column which should match a+b + 5 padding */

@media (min-width: 750px) {
    .col-sm-9 #jumbotrom-id-a { height: 525px; font-size: 13px; text-align: left; }
    #jumbotrom-id-b { height: 600px; font-size: 13px; text-align: left; }
    #jumbotrom-id-d { height: 1130px; font-size: 13px; text-align: left; }
}
@media (min-width: 1150px) {
    .col-sm-9 #jumbotrom-id-a { height: 525px;  }   #jumbotrom-id-b { height: 650px; }   #jumbotrom-id-d { height: 1180px;  }
}
@media (min-width: 1350px) {
    .col-sm-9 #jumbotrom-id-a { height: 485px;  }   #jumbotrom-id-b { height: 700px; }   #jumbotrom-id-d { height: 1190px;  }
}
@media (min-width: 1550px) {
    .col-sm-9 #jumbotrom-id-a { height: 485px;  }   #jumbotrom-id-b { height: 750px; }   #jumbotrom-id-d { height: 1240px;  }
}
@media (min-width: 1700px) {
    .col-sm-9 #jumbotrom-id-a { height: 485px;  }   #jumbotrom-id-b { height: 850px; }   #jumbotrom-id-d { height: 1340px;  }
}
@media (min-width: 1950px) {
    .col-sm-9 #jumbotrom-id-a { height: 485px;  }   #jumbotrom-id-b { height: 950px; }   #jumbotrom-id-d { height: 1440px;  }
}
@media (min-width: 2200px) {
    .col-sm-9 #jumbotrom-id-a { height: 485px;  }   #jumbotrom-id-b { height: 1050px; }   #jumbotrom-id-d { height: 1540px;  }
}
@media (min-width: 2500px) {
    .col-sm-9 #jumbotrom-id-a { height: 465px;  }   #jumbotrom-id-b { height: 1300px; }   #jumbotrom-id-d { height: 1770px;  }
}
@media (min-width: 3000px) {
    .col-sm-9 #jumbotrom-id-a { height: 465px;  }  #jumbotrom-id-b { height: 1450px; }   #jumbotrom-id-d { height: 1920px;  }
}
@media (min-width: 3500px) {
    .col-sm-9 #jumbotrom-id-a { height: 425px;  }   #jumbotrom-id-b { height: 1600px; }   #jumbotrom-id-d { height: 2030px;  }
}
@media (min-width: 4000px) {
    .col-sm-9 #jumbotrom-id-a { height: 425px;  }   #jumbotrom-id-b { height: 1800px; }   #jumbotrom-id-d { height: 2230px;  }
}
@media (min-width: 4500px) {
    .col-sm-9 #jumbotrom-id-a { height: 425px;  }   #jumbotrom-id-b { height: 2100px; }   #jumbotrom-id-d { height: 2530px;  }
}
@media (min-width: 4900px) {
    .col-sm-9 #jumbotrom-id-a { height: 425px;  }  #jumbotrom-id-b { height: 2500px; }   #jumbotrom-id-d { height: 2930px;  }
}

/* screen size of a container, continer-fluid and jumbotron */
@media screen and (min-width: 768px) {  
    .container .jumbotron, 
    .container-fluid .jumbotron { padding: 10px 20px 25px 25px; }
}

/* Search-box colors, background and border */
.btn-primary { color: #fff; background-color: #84AF96; border-color: #6C8268; }
/* Color change, btn green for all the site */
.btn-info       { color: white; background-color: #6C8268; border-color: #6C8268; }
.btn-hover     { color: white; background-color: #6C8268; border-color: #6C8268; }
.btn-success { color: #fff; background-color: #6C8268; border-color: #6C8268; }
.btn-default   { color: #fff; background-color: #6C8268; border-color: #6C8268; }
/* Button for the whole sites color green and hover lighter color */
.btn-warning {  background-color: #6C8268; border-color: #6C8268; }
.btn {  border: 0px solid transparent; }
.btn-warning[href]:hover,
.btn-warning[href]:focus {  background-color: #84AF96; }

/* Pagination */
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus { z-index: 3; color: #fff; cursor: default; background-color: #6C8268; border-color: #6C8268; }

/* Main site, content text*/
/* right box padding and colors */
.alert-success  { color: #6c8268; background-color: #f0f2ef; border-color: #f0f2ef; padding: 7px; }
.block-title     { color: #0c0d0a; }
.control-label { color: #0c0d0a; }

/* website width. */
@media (min-width: 1200px) { .container { width: 92%; }}
/* colall container width, page page.tpl.php, This will affect the browser sizes */
.colall { width: 100%; height: auto; }
@media (min-width: 768px) { .colall { width: 100%; } }
@media (min-width: 992px) { .colall { width: 100%; } }
@media (min-width: 1200px) { .colall { width: 100%; }}

/* Tables, Databases, All Working Groups, any database table, font and sizes */
.table {/*width: 100%;*/ /*max-width: 100%;*/ margin-bottom: 18px; font-size: 12px; font-weight: 300; }
/* bootstrap table, fixing the bottom, border and color */
.table>thead>tr>th { vertical-align: bottom; border-bottom: 2px solid #ffffff; color: rgb(51, 122, 183); }
/*** Resize a table. Mobile ***/
@media screen and (max-width: 401px) {
    .table > thead > tr > th, 
    .table > tbody > tr > th, 
    .table > tfoot > tr > th, 
    .table > thead > tr > td, 
    .table > tbody > tr > td, 
    .table > tfoot > tr > td {  padding: 1px; !important; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd;  }
}


/* Inside the field-content container, font-weight */
.field-content { font-weight: 300; }
.field-content { color: #0c0d0a; }
/* Formatting the text from the bottom slideshow */
.field-content   {  color: black; padding-left: 1px; padding-bottom: -5px; padding-top: 1px; padding-right: 5px; margin-bottom: 12px /*27px*/; }
/* User interface: font-size  */
.field .field-label { font-weight: bold; font-size: 19px; }
/* News and Event, single display container */
.field-items               { font-size: 15px; }

/* slide image, more responsive */
.img-responsive      { margin-left: 0; /* AND the logo on top of the site */}
.imageblock-image  { margin: 0 auto; /* AND the logo on top of the site */ }
/* side module for boxing content from the slideshow */
.sidebar-module      { /*padding: 1rem; #f0f2ef; */ /*margin: 0 -1rem 1rem;*/ padding-top: /*6px;*/ 5px; background-color: #f0f2ef; }
.sidebar-module-inset { padding: 1rem; background-color: #f0f2ef; border-radius: .25rem; height: 100%; }
/* box-content - css, force to change the js file, a trick slideshow */
.slides li[style]   {  width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2; background: #fbfbfb; }
/* flex control-nav */
.flex-control-nav {  width: 100%; position: absolute; /* bottom: 0; */ text-align: center; bottom: -50px; }
/* slide show bullets */
.flex-control-paging li a { /*width: 9px;*/ height: 10px; display: block; background: #6c8268; background: rgba(127, 27, 27, 0.5); cursor: pointer; text-indent: -9999px;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
    -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
/* slide show bullets color after click or move */
.flex-control-paging li a.flex-active  { background: #3c763d; cursor: default; }
/* Flex-slider background, border, margin, and more... */
.flexslider { margin: 0 0 30px; background: #fff; border: 4px solid #fff; position: relative; zoom: 1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* the color of the container box-bvu */
.box-bvu { background: rgba(139, 158, 136, 0.28); margin: 0px -9px -20px -5px;}
/* the margin bottom and height from the box-bvu plus a tag <p> last child */
.box-bvu p:last-child { margin-bottom: -21px; height: 70px; }
.box-bvu p:last-child { margin: 0px 5px 12px 5px; padding-top: 5px; }

/* adjust twitter iframe */
iframe[id^='twitter-widget-0'] { position: static !important; visibility: visible !important; display: inline-block !important; padding: 0px !important; border: none !important; height: 473px !important; width:100% !important; max-width: 100% !important; min-width: 100% !important;  margin-top: 0px !important; margin-bottom: 0px !important; min-height: 200px !important; overflow: auto; }
/* twitter-box, inside color */
.timeline-Widget { max-width: 100% !important;  background-color: #fef3e6;  border-radius: 4px; overflow: auto; }

/* Distance between the top and welcome-box and the participant and Resources box and New & Events box the col-lg-12 colunm margin-bottom.*/
@media (min-width: 1200px) {  .col-lg-12 {  width: 100%; margin-bottom: -10px; } }
/* This media query will apply because the screen is less than 1824px */
@media (min-width: 1000px) { .col-sm-3 { width: 25%;} }

.form-group:last-child, 
.panel:last-child { margin-bottom: 0; padding-bottom: 21px; }

/* Regions for the sidebar content */
.region .region-sidebar-content2 { height: 250px; }

.more-link { margin-top: -2vh; }
.more-link { text-align: right; }
#forum-13 { width: 100%; /* Forum mobile box / */ }
/* Display-3 is the color */
.display-3  { color: #6C8268;}
/* news and events */
.date-display-single { font-size: 13px; }

/* Top-News-citation background & font*/
.AgBioData-Class {  background-color: #ecffeb;  padding: 10px; margin-right: 0px; margin-left: 0px; margin-bottom: 18px; border-style: solid; border-radius: 5px;  border-color: #98bd60;  border-width: 0px; font-size: 15px; }

/*slideshow expand to full width of the col-sm-8*/
.col-md-8 { width: 100%; } 
/* main page welcome text assign font size override */
div.welcomelist { font-size: 14px; }
div.welcomelist p { font-size: 14px;!important }

.close {  float: right; font-size: 23px; font-weight: bold; line-height: 0px; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: 0.8;!important; }

/* Sticky footer styles -------------------------------------------------- */
.footer { bottom: 0px; width: 100%;  background: #6C8268;  font-size: 13px;  font-weight: 300; color: #3b3b3b; }