/* Main CSS styles for earth-info server */
/* NGA blue "Globe" branding: #32a6ad */
/* Menu hover #d6f5f5; */
.container{font-family: calibri, arial; padding-left: 10px; padding-right: 10px; font-size: 16px;}
.tab-container{margin-left:16px;}
h3, h4, h5, h6{font-family:calibri, arial; font-weight:bold;letter-spacing:1.5px;}
h1{letter-spacing:1.5px;}
h3{text-transform:uppercase; margin-top:0;}
h4{text-decoration: underline; }
h5{font-size:20px; margin-top:18px; margin-bottom:8px;}
h6{font-size:14px; margin-bottom:6px;}
a{color: #777777;}
a:hover{color: #32a6ad; text-decoration: underline;}

.title-spacing{letter-spacing:1.3px; font-weight:bold;}
.poc-info{float:right;text-align:right;margin-right:30px; margin-top:20px; line-height:18px; font-family: calibri, arial;}
.highlight{font-family:calibri, arial; font-size:16px; color: white; background-color: #db3232; padding: 5px 10px; font-weight: bold; letter-spacing:1px;}	
#availability-banner{
	font-family:calibri, arial; 
	font-size:16px; 
	color: #666666; 
	background-color: yellow; 
	padding: 5px 10px; 
	font-weight: bold; 
	letter-spacing:1.2px; 
	border:solid 1px #cccccc;
	min-width:100%;
	margin-top:-30px;
	margin-bottom:30px;
	text-align:center;
}	

.secret{color:red;}

#cipe-banner{
	font-family:calibri, arial; 
	font-size:16px; 
	color: #fff; 
	background-color: #cc0000; 
	padding: 5px 10px; 
	font-weight: bold; 
	letter-spacing:1.2px; 
	border:solid 1px #cccccc;
	min-width:100%;
	margin-top:-30px;
	margin-bottom:30px;
	text-align:center;
}

.emphasize{font-family: arial, calibri; font-size:14px; font-weight:bold;}
.note{
	font-family: calibri, arial; 
	line-height:16px; 
	font-size:13px; 
	letter-spacing:1.2px; 
	font-style: italic; 
	background-color: #d6f5f5; 
	padding: 5px 10px 5px 10px; 
	border: 1px solid #cecece;
}

.select-option{padding:6px 14px;} /* format the option drop-down on form select */

/* Set default button style to match the Globe style */
.btn-default{background:#32a6ad;color:#ffffff; border:1px solid #cccccc; letter-spacing:1.2px;}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:active,  .btn-default:active:focus, .open>.dropdown-toggle.btn-default  {background:#32a6ad;color:#ffffff;}

#tag-line{   
	position:relative;
	/* NOTE:  Floated elements don’t take up any vertical space in their containing element (ie #quote & #quote-2).
	   "overflow:hidden;" allows the parent div to expand to size of children but could also cause clipping */ 
	padding-left:26px;
	padding-right:20px;
	padding-top:10px;
	padding-bottom:36px;
	background-color: #000;
	background: rgba(0,0,0,.5);
	letter-spacing:1.5px;
	font-family: arial, calibri;
}

/* Quote from home page */
/* "clear:both;" clears the floating affect and allows outer div to expand with size of inner div contents 
   "clear:both;" is preferrable to "overflow:hidden;" (see above) 
   "clear:both;" should be used after the last floated tag (in this case, #quote-2) */
#quote{float:right;font-style:italic;color:#fff;padding-right:12px;font-weight:bold;}
#quote-2{float:right;padding-right:12px;clear:both;} 
#quote-3{float:right;padding-right:12px;clear:both;font-style:italic;}
   
.brand-color{color:#32a6ad;}
.brand{color:#32a6ad; font-weight:bold;}

/* Set styles for About page */
.bullet20{margin-left:-20px;}
.bullet45{margin-left:-45px;}
/* .col-md-4 li{margin-left:20px;margin-bottom:4px;} */
.about-margins li{margin-left:20px; margin-right:20px; margin-bottom:4px;}
#about-col-2{padding-right:20px;}

/* Set various padding values for miscellaneous formatting */
.pad-rt-50{padding-right:50px;}
.pad-lt-50{padding-left:50px;}

/* Scoot the modal dialog box down below the ecobar for all pages.  Ecobar covers modal dialog header */
.modal{margin-top:56px;}

/* Format the modal dialog box */
.modal-header, .modal-body, .modal-footer {padding-left:32px;padding-right:32px;} 
.modal-header{background-color:#32a6ad;color:#ffffff;text-align:center;}
#what-is-geomatics{padding-top:40px; min-height:350px; }  /* ID for modal-body */
#what-is-geomatics-wgs{font-weight:bold; font-size:14px;}  /* ID for center col of table with image */
#what-is-geomatics .panel-heading{font-weight:bold; color:#000;}
.modal-body li{margin-left:14px;}

/* =================== BEGIN TABLE FORMATS =================== */	

.tbl-style{font-family: calibri, arial; font-size:14px; line-height: 18px;}
.table tbody tr td{vertical-align: middle; padding: 5px 10px 5px 10px;}
.tbl-header{background-color: #32a6ad; font-size: 14px; color: #fff; letter-spacing: 1.5px;}

.tbl-td-align-rt{text-align: right;}
.tbl-td-width-100{width: 100px;}
.tbl-td-width-150{width: 150px;}
.tbl-td-width-200{width: 200px;}
.tbl-td-width-300{width: 300px;}
.tbl-td-width-400{width: 400px;}
.tbl-td-width-500{width: 500px;}
.tbl-td-width-600{width: 600px;}
.tbl-td-width-700{width: 700px;}
.tbl-td-width-800{width: 800px;}
.tbl-td-width-900{width: 900px;}
.tbl-td-width-1000{width: 1000px;}

/* Using rowspan on SBU does not work (works on JWICS). The row borders run through the spanned section.
	 Solution is to remove the row border lines so they don't show and manualy stripe the table using the same 
	 color as the row borders.  Also, remove the table-hover class.
*/
.no-border > tbody >tr > td{ border: none;}
.row-color{background-color: #f2f2f2;}  /* Match bootstrap table-hover color for striped rows */ 

/* =================== END TABLE FORMATS =================== */		

/* =================== FORM STYLING =================== */		
.geoid-calc-latlon input[type="text"] {box-sizing: border-box;max-width:80%;height:26px;}
input[type="radio"] {margin-left: 15px;}
.geoid-calc-latlon{margin-top:47px;	line-height:29px;}  /*format lat/lon headings to line up with DMS cells */
.geoid-calc{line-height:32px; padding:0px;}
.geod-calc-input-sizing{box-sizing:border-box; width:30%}
#geoid-height{
	font-weight:bold;
	font-size:24px;
	margin-top:50px;
	letter-spacing:1.5px;
}
.geoid-calc-err-msg{
	font-size: 18px;
	color:red;
}

/* =================== NAVBAR MODS =================== */

/* Set navbar styles */
#myNavbar a:hover{background-color:#87d8dc;}
.active #home-nav-a{background-color:#32a6ad;}
.active #wgs84-nav-a{background-color:#32a6ad;}
.active #pi-nav-a{background-color:#32a6ad;}
.active #coordsys-nav-a{background-color:#32a6ad;}
.active #elev-nav-a{background-color:#32a6ad;}
.active #surveys-nav-a{background-color:#32a6ad;}
.active #geosciences-nav-a{background-color:#32a6ad;}
.active #gnss-nav-a{background-color:#32a6ad;}
.active #geomatics-nav-a{background-color:#32a6ad;}

/* Fixes whitespace below navbar and removes rounded corners */
.navbar{
	margin-bottom:0;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}

#myNavbar{
	font-weight:bold;
	letter-spacing:1.5px;
	font-family:calibri, arial;
}

.navbar-header .navbar-brand{
	font-size:14px;
	letter-spacing:1.5px;
	background-color:#555555;
	color:#cecece;
	font-weight:bold;
}

.nav-tabs{margin:0; padding:0;}
.nav-tabs .dropdown-menu{position:aboslute; top:40px; left:0;}
.dropdown-menu{background-color: #000;}
.dropdown-menu .menu-item{
	position: relative;
	height: 32px;
	width: 100%;
	float: left;
	margin: 0;
	background-color: #000;
	letter-spacing: 1.5px;
	font-family: calibri, arial;
}

.dropdown-menu .menu-item a, .dropdown-menu .menu-item a:hover{width: 100%;}
.menu-item .submenu-style {color: #fff; !important;}  /* set submenu font to white on navbar and tabs */

/* Open menu items on hover (not click) but only on screens greater than 768px */
@media(min-width: 768px){
	ul.nav li.dropdown:hover > ul.dropdown-menu{display: block;}
}

/* =================== NAVBAR MODS =================== */

/* ==================== TAB MODS ===================== */

.nav-tabs{font-weight:bold; letter-spacing:1.2px;font-family: arial, calibri; font-size: 14px;}
.nav-tabs > li > a,
.nav-tabs > li > a:hover{color:#32a6ad;}

/* Use ".open" to change the style on the open tab so user doesn't need to click elsewhere on screen. 
   The last entry (.nav-tabs > li.active > a:hover) ensures the same style is applied to tab heading
   at the time the tab is clicked and mouse is still hovering over tab. 
   
   Add ".nav-tabs > li.active > a" to use blue square instead of gray outline for tab definition. 
 */
.nav-tabs > .open > a,
.nav-tabs > .open > a:focus, 
.nav-tabs > .open > a:active, 
.nav-tabs > .open > a:hover, 
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:active,
.nav-tabs > li.active > a{	/* This last line makes sure the tab stays blue after a submenu item is selected */
	background-color: #32a6ad !important;
	color:#fff;
	border: none;
	border-radius: 0;
}

.nav-tabs.open > li.active > a{color:#fff;}

/* Set the default tabs styles */
.nav-tabs > li > a:hover,
.nav-tabs > li > a:active, 
.dropdown-menu > li.active > a,
.dropdown-menu > li > a:hover{
  	background-color: #32a6ad !important;
    border: none;
    border-radius: 0;
    color:#fff;
}  

.dropdown-menu > li > a:hover{
  	background-color: #87d8dc !important;
    font-weight:normal;
    border-top:solid 1px #cccccc;
    border-bottom: solid 1px #cccccc;
    margin: 0;
}  

/* ==================== END TAB MODS ==================== */

.intro{line-height:26px;letter-spacing:0.3px;font-family: calibri, arial; font-size: 16px;}

/* These are for the Read More JS function */
a.morelink {text-decoration:none;outline: none;}
.morecontent span {display: none;}

.warning{
	text-align:center;
	width:100%;
	border:1px solid #cecece;
	font-size:22px;
	font-weight:bold;
	font-family: calibri, arial;
	background-color:yellow;
	letter-spacing:1.5px;
	line-height:40px;
}

.panel .panel-heading{
	background-color:#d6f5f5;
	color:#444444;
	letter-spacing:1.3px;
	font-weight:bold;
}

/* Style images consistently */
.image-style{
	border:1px solid #cecece;
	padding:10px;
	border-radius: 8px;
	max-width: 100%;, height: auto; display: block;
}


/* ==================================== TOOL TIP ============================================ */

.tooltip-inner{
	color:#fff;
	background-color:#000;
	font-weight:bold;
	letter-spacing:1.2px;
	font-family: calibri, arial,verdana;
	font-size:12px;
	opacity:1;
	border: solid 2px #000;
	max-width:300px;
	padding:4px;
}

#do-not-target{
	position:relative;
	background:yellow;
	color:#000;
	margin-top:6px;
	opacity:1;
	padding-left:4px;
	padding-right:4px;
}

.datepicker{} 
.selectwidthauto{width:auto !important;}

/* ==================================== TOOL TIP ============================================ */

/* This changes the width of the mobile menu so it shows before the menu wraps due to screen size decreasing 
   https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint 
*/

@media (max-width: 1350px) {
    .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 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
}