/*  Tiny crash course in sass

    Install compass with a package manager like home-brew or go to
    http://compass-style.org/ for complete directions

    cd to css folder of datahub
    type in compass watch and run from terminal
    it will compile the scss into css automatically for you and write it into css folder. The html pages are linking to the compiled css
    - Two things are notably different than css
      - the nested selectors of type li { a {  } } which I use a lot to organize the code
      - variables (define them with $varname)
      - &:hover means apply hover to parent selector
         - an example of this is li { &:hover {} } which will apply a hover state to the li element
         - only works in nested selectors

    :)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/*----------  Variables  ----------*/
/*-----------------------------*/
html,
body {
  height: 100%;
  min-width: 260px;
  background-color: #F1F0F0;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
}

/*----------  Header  ----------*/
header {
  width: 100%;
  min-width: 260px;
  margin: 0px 0 0 0;
  float: left;
  min-width: 260px;
  background-color: #fff;
}

header a img {
  padding: 20px 30px 0 30px;
}

header a:nth-child(2) {
  margin: 25px 0 0 0;
  float: right;
}

.teaser_image {
  width: 100%;
  margin: 20px 0 -2px 0;
}

/*----------  Footer  -----------------------*/
footer {
  min-width: 260px;
  height: 100%;
  background: url("../../assets/footer_grid.png") no-repeat center bottom #333333;
  color: #f2f2f2;
  font-size: 0.7em;
  padding: 30px;
  margin: 0px 0 0 0;
}

footer img {
  margin: 0 20px 20px 0;
}

footer p {
  font-weight: 300;
  line-height: 1.8em;
  max-width: 200px;
  color: #cccccc;
  margin: 0 0 20px 0;
}

footer h6 {
  font-weight: 600;
  margin: 10px 0 33px 0;
}

footer span {
  clear: both;
  display: block;
  margin: 150px 0 33px 16px;
  color: #999;
}

footer a {
  cursor: pointer;
  color: #fff;
  font-weight: 300;
  font-size: 0.8em;
  text-decoration: none;
}

footer a:hover {
  cursor: pointer;
  color: #999;
  transition: 0.5s;
}

footer a:visited {
  color: #fff;
  transition: 0.5s;
}

footer a:link {
  color: #fff;
  transition: 0.5s;
}

/*----------  Pages -----------------------*/
/*---------------------------------------*/
#wrapper {
  /* Wrapper for page content to
    push down footer */
  float: left;
  width: 100%;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  min-width: 260px;
  margin: 0 auto-100%;
  /* Negative indent footer by its height */
  padding: 0 20px 60px 30px;
  background-color: #fff;
}

section {
  margin: 30px 0 0px 0;
  /* offset of page content from header */
  clear: both;
}

strong {
  font-weight: 700;
}

a, a:focus {
  outline: 0;
}

a {
  color: #222;
  text-decoration: none;
}
a:hover {
  transition: 0.75s;
  opacity: 0.9;
  text-decoration: none;
}
a:active {
  color: #222;
  text-decoration: none;
}
a:visited {
  color: #222;
  text-decoration: none;
}
a:link {
  color: #222;
  text-decoration: none;
}

.green {
  background-color: #129F49;
}

.yellow {
  background-color: #FFC758;
}

.red {
  background-color: #EF4623;
}

.section_break {
  background-color: #7BC35B;
  width: 35px;
  height: 16px;
  float: left;
  margin: 5px 7px 0 -45px;
  display: block;
}

.section_line_break {
  border-bottom: 1px solid #7BC35B;
  width: 235px;
  height: 16px;
  float: left;
  margin: -8px 7px 10px -45px;
  display: block;
}
.section_line_break:after {
  clear: both;
}

.quick_link {
  cursor: pointer;
  line-height: 1.4em;
  padding: 3px 6px 3px 6px;
  border: 1px solid #666;
  border-left: 2px solid #666;
  white-space: nowrap;
  font-size: 0.65em;
  color: #222;
}
.quick_link:hover {
  transition: 0.65s;
  background-color: #222;
  color: #7BC35B;
  border: 1px solid #222;
  border-left: 2px solid #222;
}

.dialog {
  padding: 15px 10px;
  line-height: 1.4em;
  border: 1px solid #222;
  margin: 0 20px 40px 0;
  display: none;
  min-width: 215px;
}
.dialog img {
  float: right;
}
.dialog img:hover {
  transition: 0.75s;
  opacity: 0.8;
  cursor: pointer;
}
.dialog .quick_link {
  display: block;
  margin: 10px 0 10px 0;
  font-size: 0.8em;
  border-left: 1px solid #222;
  background-color: #f2f2f2;
  -webkit-box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.28);
  -moz-box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.28);
  box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.28);
}

.error_message {
  background-color: #f2f2f2;
  color: red;
  margin: 10px 0 0 0;
  padding: 10px 5px 10px 5px;
  line-height: 1.4em;
  border: 2px solid #666;
  font-size: 0.8em;
}
.error_message img {
  float: right;
  margin: -3px 0 0 10px;
}
.error_message img:hover {
  opacity: 0.7;
  transition: 0.5s;
  cursor: pointer;
}

.session_expired {
  width: 400px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  line-height: 1.4em;
  margin-top: 20%;
}
.session_expired a {
  color: #7BC35B;
}
.session_expired a:hover {
  text-decoration: underline;
}

#standalone_login {
  background-color: #fff;
}

/*-----------------------------------------------*/
/*----------------------------------------------*/
.square-small-nav {
  display: block;
  float: left;
  width: 9px;
  height: 9px;
  margin: 2px 5px 0 0px;
  background-color: #7BC35B;
}

.square-nested-nav {
  display: block;
  float: left;
  width: 8px;
  height: 8px;
  margin: 1px -5px 0 -12px;
  background-color: #7BC35B;
}

.square-side-nav {
  display: block;
  float: left;
  width: 6px;
  height: 6px;
  margin: 4px -5px 0 -13px;
  background-color: #7BC35B;
}

.small_nav {
  font-size: 0.8em;
  margin: 20px 0 0 0;
  font-weight: 700;
  float: left;
}
.small_nav li {
  float: left;
  margin: 0 40px 20px 0;
}
.small_nav li:hover {
  cursor: pointer;
  transition: 0.75s;
  color: #7BC35B;
}
.small_nav li a:hover {
  color: #7BC35B;
}
.small_nav li > ul li {
  clear: both;
  font-weight: 500;
  font-size: 0.8em;
  margin: 10px 0 0 12px;
  cursor: pointer;
}
.small_nav .disabled {
  font-weight: 300;
  color: #999;
  cursor: disabled;
}

.side_nav {
  float: left;
  margin: 20px 30px 0 0px;
  max-width: 150px;
}
.side_nav .section_line_break {
  width: 210px;
  margin-bottom: 20px;
  clear: both;
}
.side_nav ul {
  clear: both;
}
.side_nav li {
  font-size: 0.65em;
  line-height: 1.4em;
  margin: 0 0 10px 0px;
}
.side_nav li:hover {
  cursor: pointer;
  transition: 0.75s;
  color: #7BC35B;
}
.side_nav li a:hover {
  color: #7BC35B;
}
.side_nav .disabled {
  font-weight: 300;
  color: #999;
  cursor: disabled;
}

.left {
  margin: 0 0 0 0;
  float: left;
  max-width: 1280px;
}
.left .section_line_break {
  width: 100%;
}
.left ul {
  float: left;
}
.left li {
  font-weight: 700;
  margin: 0 40px 10px 0;
  float: left;
}

/*----------------------------------------------------*/
/*----------------------------------------------------*/
#page_left_panel h2 {
  font-size: 1.2em;
  line-height: 1.4em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0px 0 10px 0;
}
#page_left_panel h4 {
  font-weight: 600;
  line-height: 1.3em;
}
#page_left_panel p {
  max-width: 600px;
  font-size: 0.8em;
  line-height: 1.6em;
  font-weight: 400;
  margin: 0 0 20px 0;
}
#page_left_panel a.highlighted_link {
  color: #107FB1;
  cursor: pointer;
}

#page_right_panel {
  margin: 0 0 -50px 0;
}

/*------------------- INDEX PAGE ---------------------*/
/*----------------------------------------------------*/
#page_left_panel p.head {
  max-width: 675px;
  font-size: 1.15em;
  line-height: 1.6em;
  font-weight: 300;
}
#page_left_panel .services {
  clear: left;
}
#page_left_panel .services li:first-child {
  float: left;
  margin: 0 0 -10px 0;
}
#page_left_panel .services li:nth-child(2) {
  float: left;
  margin: 25px 0 0px 0;
  font-size: 1.5em;
  font-weight: 300;
}
#page_left_panel .services li:last-child {
  clear: left;
  max-width: 600px;
  font-size: 0.8em;
  line-height: 1.6em;
  font-weight: 400;
  margin: -10px 0 20px 67px;
}
#page_left_panel .quick_link {
  border-left: 1px solid #666;
  font-size: 0.7em;
}
#page_left_panel .get_account {
  clear: left;
  margin: 0 0 80px 0;
}
#page_left_panel .get_account ul {
  width: 50%;
  min-width: 155px;
  float: left;
}
#page_left_panel .get_account ul:last-child {
  margin-bottom: 50px;
}
#page_left_panel .get_account li:first-child {
  float: left;
  margin: 0 0 0 -5px;
}
#page_left_panel .get_account li:nth-child(2) {
  font-size: 0.8em;
  line-height: 1.6em;
  font-weight: 400;
  margin: 2px 0 0 25px;
}
#page_left_panel .get_account li:last-child {
  margin: 5px 0 0 25px;
}
#page_left_panel .five_pillars {
  width: 100%;
  margin: 0 0 10px 0;
}

#page_right_panel #login {
  background-color: #f2f2f2;
  padding: 5px 20px 20px 20px;
  margin: 0 20px 10px 0px;
  min-width: 215px;
  border-left: 4px solid #F47D20;
  font-weight: 300;
}
#page_right_panel #login h4 {
  margin: 10px 0 10px 0;
  text-transform: uppercase;
  line-height: 1.3em;
  font-size: 0.9em;
}
#page_right_panel #login input {
  padding: 6px 10px 6px 10px;
  margin: 10px 0 0 0;
  font-size: 0.8em;
  line-height: 1.4em;
  background-color: #666;
  color: #fff;
  width: 90%;
  border: 1px solid #444;
  -webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.58);
  -moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.58);
  box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.58);
}
#page_right_panel #login input:hover {
  opacity: 0.8;
  transition: 0.75s;
  cursor: pointer;
}
#page_right_panel #login .submit {
  display: block;
  padding: 6px 5px 5px 5px;
  border: 1px solid #222;
  width: 60px;
  margin: 12px 0px 0 0;
  font-size: 0.9em;
  text-align: center;
  cursor: pointer;
}
#page_right_panel #login .submit:hover {
  transition: 0.75s;
  background-color: #fff;
}
#page_right_panel #login .forgot_password {
  font-size: 0.6em;
  color: #777;
  font-weight: 400;
  margin: 20px 30px -10px 0;
  display: block;
  cursor: pointer;
}
#page_right_panel #login .forgot_password:hover {
  transition: 0.5s;
  opacity: 0.8;
}
#page_right_panel #quick_access_request {
  min-width: 215px;
  border: 1px solid #222;
  padding: 10px 0px 10px 10px;
  margin: 0 20px 40px 0px;
  cursor: pointer;
  font-weight: 300;
  clear: left;
}
#page_right_panel #quick_access_request:hover {
  opacity: 0.6;
  transition: 0.75s;
}
#page_right_panel #quick_access_request a {
  color: #222;
  text-decoration: none;
}
#page_right_panel #quick_access_request .icon {
  width: 40px;
  margin: -3px 0 0 0;
  float: right;
}
#page_right_panel .access {
  margin-top: -35px;
}

#hello_user {
  float: left;
  width: 100%;
  display: none;
  margin: 0 0 40px 0;
}
#hello_user h4 {
  float: left;
  width: 90%;
  margin: 0px 5px 10px 0;
  padding: 15px 10px 5px 10px;
  border-left: 4px solid #F47D20;
  background-color: #f2f2f2;
  line-height: 1.3em;
  font-size: 0.8em;
  font-weight: 400;
  -webkit-box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.28);
  -moz-box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.28);
  box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.28);
}
#hello_user .name {
  display: block;
  float: left;
  font-size: 1em;
  font-style: italic;
  margin: 0px 5px 10px 0;
}
#hello_user .icons {
  float: left;
}
#hello_user .icon {
  float: right;
  margin: -4px 5px 5px 0;
}
#hello_user .icon:hover {
  transition: 0.75s;
  cursor: pointer;
}
#hello_user .icon a {
  float: left;
}
#hello_user .back_to_hub_image {
  margin: 2px 0 0 3px;
  width: 19px;
}
#hello_user .logout_image {
  margin: 2px 0 0 3px;
  width: 19px;
}
#hello_user .enter_hub {
  width: 90%;
  font-size: 0.9em;
  clear: both;
  display: block;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ddd;
  border-left: 4px solid #7BC35B;
  -webkit-box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.28);
  -moz-box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.28);
  box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.28);
}
#hello_user .enter_hub a {
  display: block;
  padding: 15px 0px 15px 10px;
}

/*--------------  Do specific  ----------------------------*/
/*----------------------------------------------------------*/
/*-----------------------------------  Nav  ----------*/
.navbar {
  min-width: 260px;
  clear: both;
  white-space: nowrap;
  font-size: 0.76em;
  font-weight: 200;
  background-color: #353535;
  color: #fff;
  border: none;
  border-radius: 0;
  margin: 0 0 0 0;
}

/** navigation height and nav items position **/
.navbar-nav > li > a {
  padding-top: 11px !important;
  padding-bottom: 5px !important;
  padding-left: 10px;
  padding-right: 30px;
}

.navbar {
  min-height: 42px !important;
}

/** style toggle navigation **/
.navbar-default .navbar-toggle, .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
  background-color: #7BC35B;
  border-radius: 0 !important;
  border: 2px solid #222;
  padding: 5px 10px 5px 10px;
}

.icon-bar {
  width: 10px !important;
  border: 1px solid #222;
}

/** style links navigation **/
.navbar-default .navbar-nav .open .dropdown-menu > li > a,
ul.navbar-nav li a {
  cursor: pointer;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:link,
ul.navbar-nav li a:link {
  color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:visited,
ul.navbar-nav li a:visited {
  color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
ul.navbar-nav li a:hover {
  opacity: 0.9;
  text-decoration: none;
  color: #7BC35B !important;
  transition: 0.5s;
  -webkit-backface-visibility: hidden;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:active,
ul.navbar-nav li a:active {
  color: #7BC35B !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a .square-main-nav,
ul.navbar-nav li a .square-main-nav {
  display: block;
  float: left;
  width: 11px;
  height: 11px;
  margin: 4px 5px 0 0px;
  background-color: #7BC35B;
}

.navbar-nav > li > .dropdown-menu > li > a:hover {
  color: #7BC35B !important;
  transition: 0.5s;
  -webkit-backface-visibility: hidden;
}

.quick_icon {
  float: right !important;
}
.quick_icon li {
  float: left;
  margin: 0 10px 0 0;
}
.quick_icon a {
  display: block;
  padding-top: 8px !important;
  padding-bottom: 5px !important;
}
.quick_icon img {
  width: 25px;
}
.quick_icon img:hover {
  cursor: pointer;
  transition: 0.75s;
  opacity: 0.7;
}

.code_text {
  font-family: "Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter", monospace;
}

.blue_text {
  color: #0082C6;
}

.env_light {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: inline-block;
}
.env_light .green {
  background-color: #129F49;
}
.env_light .yellow {
  background-color: #FFC758;
}
.env_light .red {
  background-color: #EF4623;
}

/*----------  Right Panel Login and Quick Reference  ----------*/
#loggedIn {
  float: left;
  width: 100%;
}
#loggedIn h4 {
  float: left;
  width: 90%;
  margin: 0px 5px 0px 0;
  padding: 10px 10px 0px 10px;
  border-left: 4px solid #F47D20;
  background-color: #f2f2f2;
  line-height: 1.3em;
  font-size: 0.8em;
  font-weight: 400;
  -webkit-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.28);
  -moz-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.28);
  box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.28);
}
#loggedIn .name {
  display: block;
  float: left;
  font-size: 1em;
  font-style: italic;
  margin: 0px 5px 10px 0;
}
#loggedIn .icon {
  float: right;
  margin: -4px 5px 5px 0;
}
#loggedIn .icon:hover {
  transition: 0.75s;
  cursor: pointer;
}
#loggedIn .back_home_image {
  margin: 2px 0 0 0;
  width: 21px;
}
#loggedIn .logout_image {
  margin: 2px 0 0 3px;
  width: 19px;
}
#loggedIn a {
  float: left;
}

#lights_reference {
  margin: 0 0 0px 0;
}

#quick_reference {
  margin: 0 0 50px 0;
}

#lights_reference, #quick_reference {
  float: left;
  width: 100%;
  max-width: 90%;
}
#lights_reference .header, #quick_reference .header {
  margin-top: 10px;
  padding: 10px 0px 10px 5px;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.8em;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-bottom: 2px solid #ddd;
}
#lights_reference .header:hover, #quick_reference .header:hover {
  transition: 0.75s;
  background-color: #E5E6E6;
  border: 1px solid #ddd;
  border-bottom: 2px solid #ddd;
}
#lights_reference .header a, #quick_reference .header a {
  color: #222;
  text-decoration: none;
}
#lights_reference .header .icon, #quick_reference .header .icon {
  width: 12px;
  opacity: 0.9;
  margin: 5px 5px 0 5px;
  float: left;
}
#lights_reference .panel, #quick_reference .panel {
  padding: 10px 10px 10px 25px;
  margin: 0 0 0px 0;
  border: 1px dotted #f2f2f2;
  border-bottom: 2px solid #ddd;
  border-radius: 0;
}
#lights_reference .panel h3:first-child, #quick_reference .panel h3:first-child {
  margin: 0px 0 10px 0;
}
#lights_reference .panel h3, #quick_reference .panel h3 {
  font-weight: 700;
  font-size: 0.7em;
  margin: 20px 0 15px 0;
}
#lights_reference .panel .light, #quick_reference .panel .light {
  float: left;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: block;
}
#lights_reference .panel li, #quick_reference .panel li {
  margin: 0 0 10px 0;
}
#lights_reference .panel li p, #quick_reference .panel li p {
  max-width: 220px;
  font-size: 0.65em;
  line-height: 1.5em;
  margin: 0 0 0 25px;
}
#lights_reference .panel .separate_group, #quick_reference .panel .separate_group {
  margin-top: 20px;
}
#lights_reference .panel .cusp_tool, #quick_reference .panel .cusp_tool {
  width: 25px;
  margin: -7px 7px 0 0;
  float: left;
}
#lights_reference .panel .quick_link_with_icon, #quick_reference .panel .quick_link_with_icon {
  font-size: 0.7em;
  display: block;
  margin: 0 20px 10px 0;
  padding: 10px;
}
#lights_reference .panel .quick_link_with_icon:hover, #quick_reference .panel .quick_link_with_icon:hover {
  transition: 1s;
  background-color: #222;
  color: #7BC35B;
}

#internal .panel {
  display: none;
}

/*---------- Services Left Panel ----------*/
/*----------------------------------------*/
#services .section_line_break {
  width: 315px;
  margin: -8px 7px 15px -45px;
}
#services .services {
  clear: left;
}
#services .services li:first-child {
  clear: left;
  margin: 20px 0 -20px 0;
}
#services .services li:nth-child(2) {
  float: left;
  margin: 37px 0 -20px 0;
  font-size: 1.5em;
  font-weight: 300;
}
#services .services li:nth-child(3) {
  clear: left;
  font-weight: 300;
  margin: 0 0 0 68px;
}
#services .services li.description {
  clear: both;
  max-width: 600px;
  font-size: 0.8em;
  line-height: 1.6em;
  font-weight: 400;
  margin: -10px 0 20px 67px;
}
#services .services li.description .arrow {
  width: 20px;
  float: left;
  margin: 5px 10px 0 -10px;
}
#services .services li:last-child {
  margin-bottom: 30px;
}
#services .services .light {
  float: left;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin: 4px 5px 0px -25px;
  display: block;
}
#services .services .light.offset {
  margin-left: -45px;
}
#services .services a {
  display: block;
  margin: 10px 0px 3px 0px;
  font-size: 1.2em;
}
#services .services .quick_link {
  border-left: 1px solid #666;
  font-size: 0.7em;
  display: block;
  margin: 0 20px 30px 0;
  float: left;
}
#services .services .quick_link span {
  display: inline-block;
  margin-top: 3px;
}
#services .services .quick_link img {
  width: 20px;
  float: left;
  margin: 0px 5px 0 0;
}
#services p.small {
  clear: left;
  max-width: 400px;
  font-size: 0.7em;
  margin: 30px 0 20px 67px;
}
#services p.small a {
  font-size: 0.9em;
  line-height: 0.5em;
  display: inline-block;
  text-decoration: underline;
}

/*---------- Internal Resources ----------*/
/*----------------------------------------*/
#researchers {
  float: left;
  margin: 43px 0 0 0px;
  width: 65%;
}
#researchers .person {
  min-width: 205px;
  font-size: 1em;
  line-height: 1.4em;
  padding: 20px;
  background-color: #F0EEEE;
  margin: 0 0 20px 0;
  display: none;
}
#researchers .person h5 {
  font-weight: 700;
}
#researchers .person h5 + span {
  display: block;
  font-size: 0.8em;
  max-width: 300px;
  line-height: 1.3em;
  margin: 3px 0 10px 0;
}
#researchers .person p {
  margin: 0 20px 10px 0px;
}
#researchers .person a {
  font-size: 0.7em;
}
#researchers .person a img {
  width: 8px;
  margin: 2px 0 0 0;
}
#researchers p + [data-readmore-toggle], #researchers a[data-readmore] {
  margin: 20px 0 10px 0;
  font-weight: 700;
  cursor: pointer;
}
#researchers p + [data-readmore-toggle]:hover, #researchers a[data-readmore]:hover {
  opacity: 0.7;
}

/*---------- Internal resources ----------*/
/*---------------------------------------*/
#papers {
  float: left;
  margin: 59px 0 0 0px;
  width: 65%;
}
#papers .paper {
  min-width: 205px;
  font-size: 0.75em;
  line-height: 1.4em;
  padding: 20px;
  background-color: #F0EEEE;
  margin: 0 0 20px 0;
  display: none;
}
#papers .paper a {
  color: #807F6E;
}
#papers .paper a:link {
  color: #807F6E;
}
#papers .paper a:hover {
  color: #7BC35B;
  transition: 0.75s;
}
#papers .paper a:visited {
  color: #807F6E;
}
#papers .paper img {
  margin: 10px 0 0 3px;
}

/*---------- Internal resources ----------*/
/*----------------------------------------*/
#guides {
  float: left;
  margin: 43px 0 0 0px;
  width: 65%;
}
#guides .guide h4 {
  font-size: 1em;
  margin: 0 0 10px 0;
  min-width: 220px;
}
#guides .guide div {
  min-width: 205px;
  padding: 30px;
  background-color: #F0EEEE;
  margin: 0 0 30px 0;
}
#guides .guide p {
  color: #144;
  font-size: 0.8em;
  line-height: 1.8em;
  word-wrap: break-word;
}
#guides .guide .codebox {
  font-family: "Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter", monospace;
  width: 100%;
  display: block;
  border: 1px dotted #0087CC;
  background-color: #F8FBF8;
  padding: 10px 20px;
  margin: 10px 0 20px 0;
  font-weight: 500;
  font-size: 0.75em;
  line-height: 1.8em;
  word-wrap: break-word;
}
#guides .guide li {
  font-size: 0.8em;
  list-style-type: disc;
  margin: 0 0 10px 30px;
  line-height: 1.4em;
}
#guides .guide li li {
  list-style-type: circle;
  margin: 6px 0 5px 20px;
  font-size: 0.95em;
  line-height: 1.4em;
}
#guides .guide a {
  word-wrap: break-word;
  text-decoration: underline;
}
#guides .guide .doclink {
  text-decoration: none;
}

/*---------- Internal/External resources ----------*/
/*-------------------------------------------------*/
.data_governance, .external_resources.data {
  margin: 10px 0 0 0;
  float: left;
  width: 90%;
  font-weight: 400;
}
.data_governance .section_line_break, .external_resources.data .section_line_break {
  width: 300px;
  margin-bottom: 20px;
}
.data_governance .box, .external_resources.data .box {
  clear: left;
  background-color: #E5E6E6;
  border: 1px solid #E5E6E6;
  cursor: pointer;
  margin: 0 0 2px 0;
  font-size: 0.8em;
}
.data_governance .box:hover, .external_resources.data .box:hover {
  cursor: pointer;
  transition: 0.75s;
  background-color: #f2f2f2;
  border: 1px solid #999;
}
.data_governance .box span, .external_resources.data .box span {
  display: block;
}
.data_governance a, .external_resources.data a {
  display: block;
  padding: 15px 7px 15px 15px;
}
.data_governance img, .external_resources.data img {
  margin: -5px 0 0 20px;
  width: 10px;
  float: right;
}

/*---------- External & Tutorials resources ----------*/
/*----------------------------------------------------*/
.external_resources {
  margin: 10px 0 100px 0;
  float: left;
  font-weight: 400;
}

/*-----------------------------------------------------------------*/
/*------------------------------------------------------------------*/
.external_resources.tools,
.best_practices,
.useful_info,
.tutorials {
  width: 100%;
}
.external_resources.tools .section_line_break,
.best_practices .section_line_break,
.useful_info .section_line_break,
.tutorials .section_line_break {
  width: 200px;
  margin-bottom: 20px;
}
.external_resources.tools ul li a:hover,
.best_practices ul li a:hover,
.useful_info ul li a:hover,
.tutorials ul li a:hover {
  transition: 0.75s;
  background-color: #f2f2f2;
  border: 1px solid #999;
}
.external_resources.tools ul,
.best_practices ul,
.useful_info ul,
.tutorials ul {
  clear: left;
  width: 100%;
}
.external_resources.tools li,
.best_practices li,
.useful_info li,
.tutorials li {
  float: left;
  cursor: pointer;
  margin: 0px 5px 2px 0;
  font-size: 0.9em;
}
.external_resources.tools li:hover,
.best_practices li:hover,
.useful_info li:hover,
.tutorials li:hover {
  cursor: pointer;
}
.external_resources.tools a,
.best_practices a,
.useful_info a,
.tutorials a {
  display: block;
  border: 1px solid #E5E6E6;
}
.external_resources.tools li.largebox,
.best_practices li.largebox,
.useful_info li.largebox,
.tutorials li.largebox {
  width: 92%;
  background-color: #E5E6E6;
}
.external_resources.tools li.largebox span span,
.best_practices li.largebox span span,
.useful_info li.largebox span span,
.tutorials li.largebox span span {
  font-weight: 400;
}
.external_resources.tools li.smallbox,
.best_practices li.smallbox,
.useful_info li.smallbox,
.tutorials li.smallbox {
  width: 30%;
  background-color: #E5E6E6;
}
.external_resources.tools li.smallbox span span,
.best_practices li.smallbox span span,
.useful_info li.smallbox span span,
.tutorials li.smallbox span span {
  font-weight: 700;
}
.external_resources.tools .description,
.best_practices .description,
.useful_info .description,
.tutorials .description {
  display: block;
  border-top: 2px solid #fff;
  line-height: 1.4em;
  font-size: 0.9em;
  padding: 10px 10px 10px 10px;
}
.external_resources.tools img,
.best_practices img,
.useful_info img,
.tutorials img {
  width: 10px;
  margin-left: 20px;
  float: right;
}
.external_resources.tools span:first-child,
.best_practices span:first-child,
.useful_info span:first-child,
.tutorials span:first-child {
  font-weight: 700;
  line-height: 1.6em;
  font-size: 0.9em;
  display: block;
  padding: 10px;
}

.tutorials {
  width: 100%;
  float: left;
  margin: 0 0 50px 0;
}
.tutorials span span {
  height: 35px;
  display: table-cell;
  vertical-align: middle;
}
.tutorials .icon {
  display: block;
  width: 35px;
  margin: 0px 10px 0 0px;
  float: left;
}
.tutorials h4 {
  margin: 0px 0 15px 0;
}
.tutorials h6 {
  font-weight: 700;
  clear: left;
  font-size: 0.8em;
  margin: 0px 0 10px 0;
}
.tutorials .push_down {
  float: left;
  margin-top: 40px;
}
.tutorials .push_no_float {
  padding-top: 40px;
}

/*---------- Working in the facility ----------*/
/*-------------------------------------------------*/
.safe_data, .df_facility {
  margin: 10px 0 0 0;
  float: left;
}
.safe_data .section_line_break, .df_facility .section_line_break {
  width: 251px;
}
.safe_data h3, .df_facility h3 {
  margin: 0 0 10px 0;
  font-weight: 600;
}
.safe_data .content, .df_facility .content {
  clear: both;
  margin: 30px 0 0 0;
}
.safe_data p, .df_facility p {
  font-size: 0.9em !important;
  line-height: 1.8em !important;
}
.safe_data p.push_down, .df_facility p.push_down {
  margin: 0 0 40px 0 !important;
}
.safe_data a, .df_facility a {
  color: #7BC35B;
}

.df_facility ul {
  width: 100%;
  float: left;
  margin: 0 0 30px 0;
}
.df_facility .list li {
  float: left;
  margin: 0px 5px 5px 0;
  width: 32%;
  background-color: #E5E6E6;
  position: relative;
}
.df_facility .legend li {
  line-height: 1.4em;
  font-size: 0.8em;
  margin: 0 20px 0 0;
  float: left;
}
.df_facility .circle {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  float: left;
  margin: 3px 5px 0 0;
  display: block;
}
.df_facility .discovery {
  background-color: rgba(208, 105, 17, 0.63);
}
.df_facility .analysis {
  background-color: rgba(85, 168, 208, 0.98);
}
.df_facility .access {
  background-color: rgba(153, 195, 122, 0.62);
}
.df_facility .general {
  background-color: #9DCC57;
}
.df_facility .title, .df_facility .description {
  line-height: 1.4em;
  font-size: 0.8em;
}
.df_facility .icon {
  display: block;
  padding: 15px 10px 10px 10px;
  float: left;
}
.df_facility .icon img {
  width: 30px;
}
.df_facility .title {
  font-weight: 600;
  display: block;
  padding: 15px 10px 20px 10px;
  border-bottom: 2px solid #fff;
}
.df_facility .description {
  width: 100%;
  display: block;
  padding: 10px 10px 25px 10px;
}
.df_facility .btnContainer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.df_facility .videoBtn {
  display: block;
  float: left;
  width: 49%;
  padding: 1px;
  color: #fff;
  font-size: 0.6em;
  background-color: #777;
  border: 3px solid #777;
  line-height: 1.2em;
}
.df_facility .videoBtn a {
  color: #fff;
}
.df_facility .videoBtn:hover {
  cursor: pointer;
  background-color: #999;
  transition: 0.75s;
}
.df_facility .presentationBtn {
  display: block;
  float: right;
  width: 49%;
  padding: 1px;
  color: #fff;
  font-size: 0.6em;
  background-color: #777;
  border: 3px solid #777;
  line-height: 1.2em;
}
.df_facility .presentationBtn a {
  color: #fff;
}
.df_facility .presentationBtn:hover {
  cursor: pointer;
  background-color: #999;
  transition: 0.75s;
}
.df_facility .videoContainer {
  margin-bottom: 20px;
  display: none;
}
.df_facility .videoContainer h3 {
  padding: 10px;
}

/*---------- Git Instructions in computing.html ----------*/
/*-------------------------------------------------*/
.repo_table {
  border-collapse: collapse;
  border: 1px solid #888888;
}
.repo_table th {
  border: 1px solid #888888;
  font-weight: 600;
  font-size: 0.8em;
  padding: 4px;
}
.repo_table td {
  border: 1px solid #888888;
  font-size: 0.75em;
  padding: 4px;
}

/*----------  Media queries  -----------------------*/
/*----------------------------------------*/
@media (max-width: 768px) {
  .navbar-nav li {
    width: 80%;
  }
  .navbar-nav li .tooltip {
    visibility: hidden;
  }

  .quick_icon img {
    width: 30px;
  }
}
@media (max-width: 500px) {
  header a:nth-child(2) {
    display: none;
  }

  footer .row div:first-child {
    display: none;
  }

  #services .arrow {
    display: none;
  }

  .left li {
    clear: left;
  }
}
@media (max-width: 700px) {
  .get_account ul:last-child {
    margin-bottom: 50px;
  }

  .get_account ul {
    width: 100%;
    margin: 20px 0 20px 40px;
  }

  .small_nav li {
    clear: left;
    min-width: 205px;
  }

  #services .section_line_break {
    width: 250px;
  }

  .external_resources.tools li, .best_practices li, .useful_info li, .tutorials li {
    width: 100%;
    clear: left;
  }
  .external_resources.tools li.smallbox, .best_practices li.smallbox, .useful_info li.smallbox, .tutorials li.smallbox {
    width: 100%;
    margin-bottom: 5px;
  }

  .list li {
    width: 100% !important;
  }

  #researchers, #papers, #guides {
    margin-top: 10px;
    width: 100%;
  }
}