body { margin: 0;	padding: 0;	font-family: 'Open Sans', "Lucida Grande", arial, helvetica, verdana, sans-serif; color: #000000; background-color: #FFFFFF; }
html {height: 100%; }
#top, #info, #links, #extra, #bottom_panel, .azizi_docs{ width: 97%; margin: 20px 1.5% 2px 1.5%; }
#info p{padding: 5px;}
#top{ margin-bottom: 0px; height: 160px; padding-top: 20px;}
#title, #search, #ngombe_image { float: left; width: 33.3%; }
#title{ font-size: 3.3em; }
#search{width:31%; margin-left: 2%; padding-top: 20px;}
.center { text-align: center; }
.float_left{ float: left; }
.hidden{ display: none; }
.bold{ font-weight: bold; }
.text_right{ text-align: right; }
#ngombe_image{text-align: right; width: 23%; margin-right: 10%;}
#links{margin-bottom: 20px;}
#links span{padding: 2px 10px;}
.ln2_fridges, .ancilliary, .fridge_freezers, .equipments_rooms, #organism_chart_container, .general{ margin-left: 20px; margin-right: 20px;}
#organism_chart_container {display: none;width: 550px; height: 350px; margin-left: 200px; cursor: pointer;}
.general{ width: 100%; text-align: center; }
.ancilliary{ min-height: 270px;}
.ln2_fridges{ margin-left: 110px; }
#equipment_status{ width: 1050px; margin: 5px auto; }
#outline { position: relative; height: 800px; width: 800px; margin: 18px auto 0; border: solid 1px #999; }
#caption { width: 260px; left: 48px; top: 318px; position: absolute; visibility: visible; }
#text { left: 336px; top: 318px; position: absolute; width: 400px; visibility: visible; margin-top: 10px; }
p, #results, #bottom_panel, #results_count .iis { color: #666; font-size: 16px; font-family: 'Open Sans', "Lucida Grande", Arial, sans-serif; font-weight: normal; margin-top: 0; }
h1 { color: #666; font-size: 20px; font-family: 'Open Sans', "Lucida Grande", Arial, sans-serif; font-weight: 500; line-height: 32px; margin-top: 4px; }
h2 { color: #666; font-size: 18px; font-family: 'Open Sans', "Lucida Grande", Arial, sans-serif; font-weight: normal; margin: 0px; }
h3 { color: #666; font-size: 60px; font-family: 'Open Sans', "Lucida Grande", Arial, sans-serif; font-weight: bold; text-align: center; letter-spacing: -1px; width: auto; }
h4 { font-weight: bold; text-align: center; margin: 1.33em 0; }
a { color: #666; text-decoration: underline; }
a.frzr { color: #778fbd; text-decoration: none; }
/*Show the value of the title attribute when hovered*/
abbr[title]:hover:after{ content: attr(title); }
#bottom_panel, #up_arrow{font-size: 12px; width: 97%; position: fixed; bottom: 0; padding: 5px; margin:0px; border-top: 1px #666 dotted; height: 25px; text-overflow: ellipsis; float: left;}
#up_arrow{width: 3%; position: fixed; bottom: 0; left: 97%; padding-left: 15px; cursor: pointer;}
.up_arrow{display:inline-block; width:10px; height:10px; line-height:7px; border-top:3px solid #aaa; border-right:3px solid #aaa; -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.up_arrow{-ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.up_arrow:hover{border-color:#444; margin-right: 10px;}
.narrow_top{margin: 0px 1.5%; padding: 5px 0px; min-height: 65px;}
.narrow_top #title{font-size: 2.5em; padding-top: 10px;}
.narrow_top #ngombe_image img{width: 65px; height: 50px;}
.transform_slow, #top{-webkit-transition: top, height 2s ease; -moz-transition: top, height 2s ease; -o-transition: top, height 2s ease; transition: top, height 2s ease;}
#results{font-size: 12px; margin: 15px; padding-top: 10px;}
#results .result_set{margin: 3px; width: 95%; margin: 3px 5px 10px 2px;}
.result_set .first_line{margin-bottom: 3px;}
#results .left, #results .right{width: 40%; margin: 3px; float: left;}
#results .right{width: 43%;}
#results .extreme_right{ float: left;}
#results .right div:nth-child(1){float: left; width: 50%;}
#results .right div:nth-child(2){float: right;}
#results .access{width: 26px; height: 47px; float: left; margin-right: 5px;}
#results .selected{}
table.search_details {border-collapse: separate; border-spacing: 15px 2px;max-width: 500px;}
span.result_lables {color: #7896B1;}
td.search_columns {min-width: 200px;}
#results_count{font-size: 3.1em; width: 100%; float: left; padding-left: 300px; letter-spacing: 2px;}
#results_count .iis{font-size: 0.8em; color: #428BCA;}
.iis a{font-size: 0.7em;}
#results_count .iis_selected{font-size: 1em; color: #666;}
#documentation{height: 100px; width: 500px; min-width: 100px; text-align: center; margin: 2px auto 25px;}
#documentation .desc{width: 115px; margin: 5px 0px; float: left;}
#documentation img{width: 72px; height: 72px;}
.tab-content{ margin-left: 200px; }

.tabs-left > .nav-tabs { border-bottom: 0; }
.tab-content > .tab-pane, .pill-content > .pill-pane { display: none; }
.tab-content > .active, .pill-content > .active { display: block; }
.tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li { float: none; }
.tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; }
.tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd; }
.tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; }
.tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus { border-color: #eeeeee #dddddd #eeeeee #eeeeee; }
.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus { border-color: #ddd transparent #ddd #ddd; *border-right-color: #ffffff; }

/*Repository 3d specific styles*/
#repo_container {position: absolute; left:0px; top:0px; width: 100%; height: 100%; font-family: 'Roboto', sans-serif;}
#reset_button {cursor: pointer; position: absolute; left:0px; top:10px; width: 100px; height: 35px; background-color: #333333; display: table-cell; text-align: center; vertical-align: middle; padding-top: 10px; color: #ffffff; border: 1px solid; border-radius: 25px;font-family: 'Roboto', sans-serif;}
.zoom_button {cursor: pointer; position: absolute; background-color: #333333; display: table-cell; text-align: center; vertical-align: middle; width: 35px; height: 35px; line-height: 35px; color: #ffffff; border: 1px solid;
               border-radius: 50%; font-size: 25px; font-weight: bolder;  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#loading_box {
   cursor: pointer;
   position: absolute;
   background-color: #ffffff;
   opacity: 70%;
   border-radius: 1px;
   z-index: 2;
   width: 10rem;
   height: 3rem;
   border-radius:5px;
   line-height: 3rem;
   text-align: center;
   font-weight: bolder;
}

.loading_box {
   cursor: pointer;
   position: absolute;
   background-color: #ffffff;
   opacity: 70%;
   border-radius: 1px;
   z-index: 2;
   width: 10rem;
   height: 3rem;
   border-radius:5px;
   line-height: 3rem;
   text-align: center;
   font-weight: bolder;
}


#sample_ttip {
   background: #ffffff;
   position:absolute;
   left:50%;
   top: 1%;
   z-index: 1;
   width: auto;
   height: auto;
   outline: 0;
   border:0;
   font-size:0.6rem;
   border-radius:5px;
   box-shadow:0 1px 2px #aaa;
   padding-left: 0.5rem;
   padding-right: 1.5rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
}

#virt_box {
   cursor: pointer;
   background: #ffffff;
   position:absolute;
   z-index:1;
   width:15rem;
   height:15rem;
   outline: 0;
   border:0;
   font-size:0.8rem;
   border-radius:1px;
   box-shadow:0 1px 2px #aaa;
}

#stats_box {
   background: #ffffff;
   position:absolute;
   z-index:1;
   width:15rem;
   outline: 0;
   border:0;
   font-size:1.2rem;
   padding:.75rem 1rem;
   border-radius:1px;
   box-shadow:0 1px 2px #aaa;
}

#search_canvas {
   position: absolute;
   left:20px;
   top:60px;
   font-family: 'Roboto', safontns-serif;
   width: 400px;
   height: auto;
   z-index:1;
   padding-top: 1.5rem;
   padding-left: .5rem;
   padding-right: .5rem;
   padding-bottom: 1.5rem;
   margin:0 1rem 1rem;
}

#search_box_3d {
  position:absolute;
  left: 20px;
  top: 20px;
  z-index:2;
  width:26rem;
  margin: 0 1rem 1rem;
  outline: 0;
  border:0;
  font-size:1.2rem;
  padding:.75rem 1rem;
  border-radius:3px;
  box-shadow:0 1px 2px #aaa;
  opacity: 0.3;
  transition: .5s;
}

#clear_search {
   cursor: pointer;
   position: absolute;
   margin-top: 13px;
   margin-left: 30px;
   top: 20px;
   background: transparent;
   width: 20px;
   height: 20px;
   line-height: 20px;
   text-align: center;
   z-index: 3;
   font-weight: bolder;
   color: d3d3d3;
}

#search_box_3d:focus {
  opacity: 1;
}
#search_box_3d:hover {
   opacity: 1;
}

.card-3d {
   cursor: pointer;
   display: block;
   background: #ffffff;
   position:relative;
   font-size:.9rem;
   z-index:10;
   color:gray;
   width:400px;
   line-height:1rem;
   text-align:left;
   border-radius:.3rem;
   box-shadow:0 1px 2px #aaa;
   margin-bottom: 1rem;
   padding-top: 0.8rem;
   padding-bottom: 0.8rem;
   opacity: 0.3;
   transition: .5s;
}

.card-3d:hover {
   opacity: 1;
}

#search_canvas h1, #stats_box h1, #sample_ttip h1 {
   font-size:1.2rem;
   font-weight:200;
   margin-left: 20px;
   line-height: 1rem;
}
#search_canvas strong, #stats_box strong, #sample_ttip strong {
   font-weight:300;
   color:#539D00;
}

#search_canvas h2, #stats_box h2, #sample_ttip h2 {
   font-size:.9rem;
   line-height:2.5;
   color:gray;
   font-weight:400;
   margin-left: 25px;
   line-height: 1.2rem;
}

/* Samples visualization */
#map {
   height: 100%;
   width: 100%;
   position: relative;
   left: 0%;
   top: 0%;
   z-index: 1;
}

#samples_heads_up {
   cursor: pointer;
   display: none;
   width: auto;
   height: 2.5rem;
   z-index: 2;
   padding-left: 1rem;
   padding-right: 1rem;
   position: absolute;
   top: 5%;
   background: #ffffff;
   font-family: 'Roboto', sans-serif;
   border-radius: 10px;
   box-shadow: 0 1px 2px #aaa;
}

#sample_count {
   text-align: center;
   line-height: 2.5rem;
}

#samples_download_btn, #sample_count {
   display: inline-block;
}

#samples_download_btn {
   cursor: pointer;
   height: 70%;
   width: 2.1rem;
   float: right;
   background-size: cover;
   background-repeat: no-repeat;
   margin-top: 0.2rem;
   margin-left: 0.3rem;
}

#samples_timeline {
   height: 0px;
   width: 100%;
   position: absolute;
   left: 0%;
   top : 100%;
   display: none;
   background: #e0f7fa;
   z-index: 2;
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

#play_button {
   display: none;
   cursor: pointer;
   position: absolute;
   width: 2.5rem;
   height: 2.5rem;
   left: 1%;
   top : 100%;
   border-radius: 50%;
   z-index: 2;
   box-shadow: 0 2px 4px #aaa;
   background: #dd2c00;
   background-image: url(../images/ic_action_play.png);
   background-size: cover;
   background-repeat: no-repeat;
   background-position-x: 3px;
}

#stop_button {
   display: none;
   cursor: pointer;
   position: absolute;
   width: 1.5rem;
   height: 1.5rem;
   left: 2%;
   top : 100%;
   border-radius: 50%;
   z-index: 2;
   box-shadow: 0 2px 4px #aaa;
   background: #dd2c00;
   background-image: url(../images/ic_action_stop.png);
   background-size: cover;
   background-repeat: no-repeat;
}

#play_slider {
   height: 0px;
   width: 2rem;
   position: absolute;
   left: 0%;
   top : 100%;
   display: none;
   background: #e51c23;
   z-index: 3;
   opacity: 0.4;
}

.filter_container {
   position: absolute;
   z-index: 2;
   width: 20rem;
   border-radius: 2px;
   box-shadow: 0 1px 2px #aaa;
   background: #ffffff;
   padding: 10px;
   color: #3d3d3d;
   font-family: 'Roboto', sans-serif;
}

.filter_list {
   z-index: 3;
   width:100%;
   height: auto;
   max-height: 200px;
   overflow-y: scroll;
   font-size: 12px;
}

.filter_label {
   cursor: pointer;
   float: left;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.filter_toggle {
   cursor: pointer;
   height: 100%;
   float: right;
   background-size: cover;
   background-repeat: no-repeat;
}

#set_select_container{
   z-index: 2;
   position: absolute;
   border-radius: 2px;
   box-shadow: 0 1px 2px #aaa;
   background: #ffffff;
   padding: 1rem;
   width: 30rem;
   height: auto;
   font-family: 'Roboto', sans-serif;
}

#set_select_inst {
   margin-bottom: 1rem;
}

#set_select_list {
   width:100%;
   height: auto;
   max-height: 200px;
   overflow-y: scroll;
   font-size: 12px;
}

#set_select_btn {
   float: right;
}

#set_mod_container {
   display: none;
   z-index: 2;
   position: absolute;
   border-radius: 2px;
   box-shadow: 0 1px 2px #aaa;
   background: #ffffff;
   padding: 1rem;
   width: 30rem;
   height: auto;
   font-family: 'Roboto', sans-serif;
}

#set_mod_name {
   font-size: 18px;
}

#set_mod_ids, #set_mod_loc, #set_mod_time, #set_mod_locality {
   padding-left: 1rem;
   font-size: 15px;
}

#set_mod_id_list, #set_mod_loc_lat, #set_mod_loc_lon, #set_mod_time_value, #set_mod_locality_value {
   padding-left: 1rem;
}

#set_mod_btn, #set_mod_id_btn {
   float: right;
}

#id_mod_container, #gen_mod_container {
   display: none;
   z-index: 2;
   position: absolute;
   border-radius: 2px;
   box-shadow: 0 1px 2px #aaa;
   background: #ffffff;
   padding: 1rem;
   width: auto;
   height: auto;
   font-family: 'Roboto', sans-serif;
}

#id_mod_name {
   width: 20rem;
   margin-bottom: 1.5rem;
}

#gen_mod_name {
   font-size: 25px;
   margin-bottom: 1.5rem;
}

#id_mod_selections, #gen_mod_selections {
   height: auto;
   width: auto;
   max-width: 50rem;
   overflow-x: scroll;
   white-space: nowrap;
}

.id_mod_selection, .gen_mod_selection {
   display: inline-block;
   width: 20rem;
   max-height: 22rem;
   overflow-y: scroll;
   font-size: 12px;
}

#id_mod_add_btn, #id_mod_cancel_btn, #gen_mod_add_btn, #gen_mod_cancel_btn {
   float: right;
   margin-left: 1rem;
   margin-top: 1rem;
}

#show_data_points{
   position: absolute;
   z-index: 3;
   height: 30px;
   left: 90%;
   top: 0px;
}
#show_village_heatmap{
   position: absolute;
   z-index: 3;
   height: 30px;
   left: 90%;
   top: 0px;
}

#show_abnormal_res{
   position: absolute;
   z-index: 3;
   height: 30px;
   left: 90%;
   top: 0px;
}

#mvmt_timeline {
   height: 300%;
   width: 100%;
}

#mvmt_window {
   height: 100%;
   width: 100%;
   display: none;
}

.mvmt_point {
   display: inline-block;
   position: absolute;
   top: 50%;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background-color: red;
   margin-top: 5px;
   margin-bottom: 5px;
}

#mvmt_ttip {
   display: none;
   background: #ffffff;
   position:absolute;
   left:50%;
   top: 1%;
   z-index: 3;
   width: auto;
   height: auto;
   outline: 0;
   border:0;
   font-size:0.9rem;
   border-radius:5px;
   box-shadow:0 1px 2px #aaa;
   padding-left: 0.5rem;
   padding-right: 1.5rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
}

#lits_search_res {
   z-index: 3;
   position: absolute;
   left: 40px;
   top: 80px;
   display: none;
   background: #ffffff;
   border-radius:2px;
   box-shadow:0 1px 2px #aaa;
   padding: 1rem;
   color: grey;
   font-family: 'Roboto', safontns-serif;
}

.lits_search_res {
   line-height: 1.5rem;
   cursor:  pointer;
}

#animal_details_wndw {
   display: none;
   height: auto;
   width: 100%;
}

#animal_details {
   height: 94%;
   width: auto;
}

#email_dialog {
   display: none;
   z-index: 3;
   width: 30rem;
   height: auto;
   position: absolute;
   background: white;
   padding: 1rem;
   border-radius:2px;
   box-shadow:0 1px 2px #aaa;
}

#email_dialog.a:link {
   color: #5677fc;
   text-decoration: none;
}

#email_dialog_toggle {
   cursor: pointer;
   width: 1.2rem;
   height: 1.2rem;
   float: right;
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
   top: 0%;
   background-image: url(../images/ic_action_cancel.png);
}

#user_email {
   display: inline-block;
   width: 15rem;
   height: 100%;
   line-height: 1.7rem;
   position: relative;
   font-size: 15px;
   top: 0%;
   margin-left: 1rem;
   border-radius: 5px;
   border: 0;
}

#user_email:focus {
   outline: 0;
}

#send_button {
   display: inline-block;
   float: right;
   width: 4rem;
   height: 1.8rem;
   color: white;
   background-color: #5677fc;
   position: relative;
   top: 0%;
   margin-right: 0.3rem;
   margin-left: 1rem;
   border-radius: 5px;
   border: 0;
}

#email_dialog, #mta_dialog, #instructions_dialog {
   display: none;
   z-index: 3;
   width: 60rem;
   height: auto;
   position: absolute;
   background: white;
   padding: 1rem;
   border-radius:2px;
   box-shadow:0 1px 2px #aaa;
   font-size: 15px;
   border-top: #3d3d3d;
}

#email_dialog_toggle, #mta_dialog_toggle, #instructions_dialog_toggle, #mta_box_list_toggle {
   cursor: pointer;
   width: 1.2rem;
   height: 1.2rem;
   float: right;
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
   top: 0%;
   background-image: url(../images/ic_action_cancel.png);
}

#send_result_btn, #mta_submit_btn {
   display: inline-block;
   float: right;
   width: 6rem;
   height: 2.6rem;
   line-height: 2.6rem;
   color: white;
   background-color: #5677fc;
   position: relative;
   top: 0%;
   margin-right: 0.3rem;
   margin-left: 1rem;
   border-radius: 5px;
   border: 0;
}

#loading_box {
   display: none;
   cursor: pointer;
   position: absolute;
   background-color: #ffffff;
   opacity: 70%;
   border-radius: 1px;
   z-index: 4;
   width: 10rem;
   height: 4rem;
   border-radius:5px;
   line-height: 4rem;
   text-align: center;
   font-weight: bolder;
}

#user_email{
   width: 30rem;
}

.organism_chart {
   width: 400px; height: 400px; display: inline-block;
}

.azizi_docs { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
#dmp iframe, #sampling_protocol iframe, #infrastructure iframe, #sample_storage iframe, #samples_template iframe, #odk_workflow iframe, #mta_template iframe, #about_us iframe, #odk_manual iframe, #creating_odk_forms iframe, #report_2015 iframe
{ position: absolute; top:0; left: 0; width: 100%; height: 100%; border: none; }
#smpl_diversity_title {margin-top: 20px;font-size: 20px;color: #666;}
#plant_status_text {margin-left: -50px; margin-bottom: 30px;}
#sytem_statuses {margin-bottom: 20px; margin-left: -50px;}