@charset "utf-8";

/* CSS Document */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Start Media Queries ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


@media only screen and (max-width : 1868px) {
	.navbar-default {
		text-align: justify;
		font-size: 10px;
		display: flex;
	}

}

@media only screen and (max-width : 1770px) {
.navbar-default {
	text-align: justify;
	font-size: 10px;
	display: flex;
}
.navbar-default li {
	padding-right: 1px;
	padding-left: 1px;
}
.navbar-default li.first {
	margin-left: 20px;
}
#seal { /*These properties apply to the ALDOT Seal*/
	width: 8%;
	left: 12%;
	margin-top: 5px;
}
#logo { /*These properties apply to the ALDOT Rectangular Logo*/
	width: 45%;
	left: 18%;
	margin-top: 2px;
}
#ColWithNav {
	margin-top: 80px; /*This determines the space above the navbar*/
}
	
}

@media only screen and (max-width : 1665px) {
.navbar-default {
	text-align: justify;
	font-size: 9px;
	display: flex;
	margin: 0px;
}
.navbar-default li {
	padding-right: 1px;
	padding-left: 1px;
}
.navbar-default li.first {
	margin-left: 1px;
}
#seal { /*These properties apply to the ALDOT Seal*/
	width: 8%;
	left: 12%;
	margin-top: 5px;
}
#logo { /*These properties apply to the ALDOT Rectangular Logo*/
	width: 45%;
	left: 18%;
	margin-top: 2px;
}
#ColWithNav {
	margin-top: 80px; /*This determines the space above the navbar*/
}
#ManagementTitleSection img {
	width: 70%;
}
	
	/*	#rpRight, #dbRight {
		float: left;
	}	
	
	#doingBusiness {
		padding-top: 1em;
	}
	#homediv2 {
		float: right;
		position: relative;
		right: 7em;
	}

	
	#featuredInfo, #aldotOffices {
		margin: 0 2em;
	} */
	
}

@media only screen and (max-width : 1542px) {
header { /*These properties apply to the entire header area*/
	background: url("../templateImages/header1150.png") center top no-repeat; /*The top Background image*/
	position: relative;
}
.navbar-default {
	text-align: justify;
	font-size: 9px;
	display: flex;
	margin: 0px;
}
.navbar-default li {
	padding-right: 0px;
	padding-left: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
.navbar-default li.first {
	margin-left: 0px;
}
#search-query-fieldLg {  /*These properties apply to the Search text box only*/
	width: 145px;
	height: 28px;
}
#searchButtonLg {
	width: 70px;
	height: 28px;
}
#seal {  /*These properties apply to the ALDOT Seal*/
	width: 7%;
	left: 12%;
	margin-top: 5px;
}
#logo {  /*These properties apply to the ALDOT Rectangular Logo*/
	width: 45%;
	left: 17%;
	margin-top: 2px;
}
#Aldotsearch { /*These properties apply to the Search Textbox and Button Combined*/
	padding-top: 23px;
	position: absolute;
	right: 16.25%;
}
#ColWithNav {
	margin-top: 64px;  /*This determines the space above the navbar*/
}
#dropdownMenuLg {
	width: 100%;
}
#ManagementTitleSection img {
	display: none;
}
#BureauBoxLgLongerName h2 {
	font: 22px Myriad Pro, Arial, Helvetica, sans-serif;
	color: #143956;
	font-weight: 15px;
	margin-top: 60px;
	margin-bottom: 20px;
}

	
}

@media only screen and (max-width : 1440px) {/* Medium Devices, Desktops */
header { /*These properties apply to the entire header area*/
	background: url("../templateImages/header1100px.png") center top no-repeat; /*The top Background image*/
	position: relative;
}

#dropdownMenuLg {
	width: 100%;
}
.navbar-default {
	text-align: justify;
	font-size: 10.5px;
	background-image: linear-gradient(-90deg, #F3F4F8, #e8ebf2);
	border-top: 2px outset #fff;
	margin: 0px;
	min-height: 28px !important;
	display: block;
	overflow: hidden;
}
.navbar-default ul {
	margin: 0px;
	display: block;
}
.navbar-nav > li a {
	display: block;
	padding: 4px;
	text-decoration: none;
}
.navbar-default li {
	display: block;
	border-right: .25px inset #B2B2B2;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: 0px;
	margin-left: 0px;
	color: #143956 !important;
	text-align: right;
	line-height: 28px !important;
}
.navbar-nav > li > a {
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}
.navbar-default li.first {
	border-left: .25px outset #B2B2B2;
	margin-left: 0px;
}
.navbar-default li.last {
	border-right: .25px inset #B2B2B2;
}
.navbar-default li.first {
	margin-left: 20px;
}
.navbar-nav > li a {
	display: block;
	padding: 5px 5px;
	text-decoration: none;
}
#Aldotsearch { /*These properties apply to the Search Textbox and Button Combined*/
	padding-top: 23px;
	position: absolute;
	right: 16.25%;
}	
#search-query-fieldLg { /*These properties apply to the Search text box only*/
	width: 153px;
	height: 28px;
}
#searchButtonLg {
	width: 70px;
	height: 28px;
}
#seal { /*These properties apply to the ALDOT Seal*/
	width: 7%;
	left: 15%;
	margin-top: 5px;
}
#logo { /*These properties apply to the ALDOT Rectangular Logo*/
	width: 45%;
	left: 20%;
	margin-top: 2px;
}

#ColWithNav {
	margin-top: 64px; /*This determines the space above the navbar*/
}
	
}

@media only screen and (max-width : 1350px) {/* Medium Devices, Desktops */
.navbar-default {
	text-align: justify;
	font-size: 9px;
	padding: 0px;
	margin: 0px;
}
.navbar-default li {
	padding-right: 0px;
	padding-left: 0px;
}
.navbar-default li.first {
	margin-left: 20px;
}
.navbar-nav > li a {
	display: block;
	padding: 5px 5px;
	text-decoration: none;
}

.navbar-nav > ul {
	list-style-type: none;
}
#search-query-fieldLg { /*These properties apply to the Search text box only*/
	width: 135px;
	height: 28px;
}
#searchButtonLg {
	width: 70px;
	height: 28px;
}
#seal { /*These properties apply to the ALDOT Seal*/
	width: 7%;
	left: 15%;
	margin-top: 5px;
}
#logo { /*These properties apply to the ALDOT Rectangular Logo*/
	width: 45%;
	left: 20%;
	margin-top: 2px;
}
#Aldotsearch { /*These properties apply to the Search Textbox and Button Combined*/
	padding-top: 23px;
	position: absolute;
	right: 16.25%;
}
#ColWithNav {
	margin-top: 64px; /*This determines the space above the navbar*/
}

/* These are the tables on the Explore ALDOT page	
	
	#tblExploreRt #rwSTIP{
		font-size: .875em; 	
	}	
	#tblExploreRt #rwPermits td{
		font-size: .9em;
		padding-bottom: 16px;
	}
	#tblExploreRt td.hideMobile {
		display: table-cell;
	}
	#tblExploreRt td.showMobile {
		display: none;
	}
	#tblExploreRt #rwSTIP td{
		/*font-size: .975em;
		padding-bottom: 9px; 
	}*/
	
}

@media only screen and (max-width : 1199px) {/* Extra Large */
	#dropdownMenuLg {
		width: 100%;
		font: 11px Myriad Pro, Arial, Helvetica, sans-serif;
	}
	.navbar-default {
		text-align: justify;
		font-size: 9.5px;

	}
	.navbar-default li.first {
		margin-left: 20px;
	}
	.navbar-nav > li a {
		display: block;
		padding: 7px 7px;
		text-decoration: none;
	}
	.navbar-nav > ul {
		list-style-type: none;
	}
	#BureauBoxLg h2 {
		font: 18px Myriad Pro, Arial, Helvetica, sans-serif;
		margin-top: 60px;
		margin-bottom: 30px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 1px;
		text-align: center;
	}
	#BureauBoxLgLongerName h2 {
		font: 18px Myriad Pro, Arial, Helvetica, sans-serif;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 1px;
		text-align: center;
	}	
	#Aldotsearch { /*These properties apply to the Search Textbox and Button Combined*/
		padding-top: 21px;
		position: absolute;
		right: 9%;
	}
	#search-query-fieldLg { /*These properties apply to the Search text box only*/
		width: 150px;
		height: 28px;
	}
	#searchButtonLg {
		width: 70px;
		height: 28px;
	}
	#seal { /*These properties apply to the ALDOT Seal*/
		width: 8%;
		left: 9%;
		margin-top: 7px;
	}
	#logo { /*These properties apply to the ALDOT Rectangular Logo*/
		width: 45%;
		left: 16%;
		margin-top: 2px;
	}
	#ColWithNav {
		margin-top: 64px; /*This determines the space above the navbar*/
	}
	.breadcrumb {
		margin-bottom: 30px;
	}	
	
}

@media only screen and (max-width : 1121px) {
	.navbar-default {
		text-align: justify;
		font-size: 9px;
		padding: 0px;
		margin: 0px;
	}
	.navbar-nav > li a {
		display: block;
		padding: 5px 10px;
		text-decoration: none;
	}
	.navbar-default li.first {
		margin-left: 65px;
	}
	#dropdownMenuLg {
		width: 100%;
		font: 11px Myriad Pro, Arial, Helvetica, sans-serif;
	}	
	#Aldotsearch {  /*These properties apply to the Search Textbox and Button Combined*/
		padding-top: 20px;
		position: absolute;
		right: 9%;
	}
	#search-query-fieldLg {  /*These properties apply to the Search text box only*/
		width: 145px;
		height: 28px;
	}
	#searchButtonLg {
		width: 70px;
		height: 28px;
	}
	#seal { /*These properties apply to the ALDOT Seal*/
		width: 9%;
		left: 9%;
		margin-top: 5px;
	}
	#logo { /*These properties apply to the ALDOT Rectangular Logo*/
		width: 50%;
		left: 16%;
		margin-top: 2px;
	}	
	#ColWithNav {
		margin-top: 60px; /*This determines the space above the navbar*/
	}
	.breadcrumb {
		margin-bottom: 20px;
	}

}

@media (max-width: 1021px) {
	#logo { /*These properties apply to the ALDOT Rectangular Logo*/
		width: 95%;
		left: 5%;
	}
	.navbar-default {
		text-align: justify;
		font-size: 10px;
		padding: 0px;
		margin: 0px;
	}
	.navbar-nav > li a {
		display: block;
		padding: 2px 3px;
		text-decoration: none;
	}
	.navbar-default li.first {
		margin-left: 60px;
	}
	#dropdownMenuLg {
		width: 100%;
		font: 10px Myriad Pro, Arial, Helvetica, sans-serif;/*additional properties above*/
	}	
	#Aldotsearch {  /*These properties apply to the Search Textbox and Button Combined*/
		padding-top: 23px;
		position: absolute;
		right: 9%;
	}	
	#search-query-fieldLg {  /*These properties apply to the Search text box only*/
		width: 135px;
		height: 28px;
	}
	#searchButtonLg {
		width: 70px;
		height: 28px;
	}
	#seal { /*These properties apply to the ALDOT Seal*/
		width: 9%;
		left: 10%;
		margin-top: 2px;
	}
	#logo { /*These properties apply to the ALDOT Rectangular Logo*/
		width: 50%;
		left: 18%;
		margin-top: 0px;
	}
	
	#ColWithNav {
		margin-top: 64px; /*This determines the space above the navbar*/
	}
	.breadcrumb {
		margin-bottom: 20px;
	}
	
	#homediv2 {
		float: right;
		margin: 0px;
	}
	
}

@media (max-width: 991px) {
	#logo { /*These properties apply to the ALDOT Rectangular Logo*/
		width: 95%;
		left: 5%;
	}
	#BureauBoxLg h2, #BureauBoxLgLongerName h2 {
		font: 16px Myriad Pro, Arial, Helvetica, sans-serif;
		color: #143956;
		font-weight: 15px;
		border-top: 1.5px #ffffff outset;
		border-bottom: 1.5px #ffffff inset;
		padding-left: 0px;
		padding-right: 0px;
		text-align: center;
	}
	.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;
	}
	.navbar-nav .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin-top: 0;
		background-color: transparent;
		border: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	#dropdownMenuLg {
		width: 100%;
		font: 9px Myriad Pro, Arial, Helvetica, sans-serif;
	}
	.breadcrumb {
		margin-bottom: 20px;
	}
	#smallSearch { /*These properties apply to the Search Textbox and Button Combined*/
		padding: 5px;
	}	
	#search-query-fieldSm { /*These properties apply to the Search text box only*/
		width: 35%;
		height: 28px;
	}
	#searchButtonSm {		
		width: 30%;
		height: 28px;
	}
	#ColWithNav {
		margin-top: 80px; /*This determines the space above the navbar*/
	}
}

@media only screen and  (min-width:869px) and (max-width: 1024px) {	
	#restArea img {
		width: 85%;
		height:  85%;
		margin:  auto 4em 1em;
	}
	#restArea h2 {
		margin: 1em 3.25;
		font-size: medium;
		text-align: center;
	}
	#restArea button {
		margin: -1.25em 12em auto;
	}
	
}


@media only screen and (min-width: 768px) and (max-width: 868px) {
	#restArea img {
		width: 75%;
		height:  75%;
		margin:  auto 4em 1em;
	}
	#restArea h2 {
		margin: 1em 3.25;
		font-size: medium;
		text-align: center;
	}
		#restArea button {
		margin: -1.25em 8em auto;
	}
	
}

@media only screen and (max-width : 767px) { /*small devices */
	#logo { /*These properties apply to the ALDOT Rectangular Logo*/
		width: 95%;
		left: 2%;
	}
	#bannerSm {
		text-align: center;
	}	
	#bannerSm img{
		height: 145px;
		width: 100%;
		border-radius: 5px;
		padding: 0px;		
	}
	#BureauBoxSm, #BureauBoxSmLongerName {
		background-color: #669933;
		border-right: 3px #4d8226 solid;
		border-left: 3px #4d8226 solid;
		border-top: 4px #4d8226 solid;
		height: 155px;
		width: 80%;
		border-radius: 5px;
		margin: 6px auto 5px auto;
	}
	#BureauBoxSm h2, #BureauBoxSmLongerName h2 {
		font: 18px Myriad Pro, Arial, Helvetica, sans-serif;
		color: #143956;
		font-weight: 15px;
		border-top: 1.5px #ffffff outset;
		border-bottom: 1.5px #ffffff inset;
		padding-left: 0px;
		padding-right: 0px;
		text-align: center;
		margin-top: 50px;
		margin-bottom: 10px;
	}
	#BureauBoxSmLongerName h2.travel {
		margin-top: 30px;
	}	
	#dropdownMenuSm {
		width: 90%;
		font: 14px Arial, Helvetica, sans-serif !important;
	}
	.breadcrumb {
		margin-bottom: 20px;
	}
	#smallSearch { /*These properties apply to the Search Textbox and Button Combined*/
		padding: 5px;
	}	
	#search-query-fieldSm { /*These properties apply to the Search text box only*/
		width: 55%;
		height: 28px;
	}
	#searchButtonSm {
		width: 20%;
		height: 28px;
	}
	#ColWithNav {
		margin-top: 75px; /*This determines the space above the navbar*/
	}
	/*	
	#hmSidebar.well {
		width: 60%;
		margin-left: 2em;
	}*/
	
}

@media only screen and (max-width : 667px) {
		
}

@media only screen and (min-width: 641px) and (max-width: 767px) {
	#restArea img {
		width: 45%;
		height:  45%;
	}
	#restArea h2 {
		font-size: medium;
	}

}

@media only screen and (max-width: 640px) {	
	#alphaSort {
		margin: 0px 10px 0px -30px;
	}
	#div1 {
		margin: 0 10px;
		width: 45%
	}
	#div2 {
		margin-right: -2%;
	}
	
	#tblExploreLft, #tblExploreRt {
		font-size: small;
	}
	#tblExploreRt td.showMobile {					
		display: table-cell;
	}	
	#tblExploreRt td.hideMobile {					
		visibility: hidden;
	}
	#restArea img {
		width: 40%;
		height:  40%;
	}
	#restArea h2 {
		font-size: small;
	}
	
}

@media only screen and (max-width : 480px)  {
	#alphaSort { 
		margin: 0 10px 0 -30px;
	}
	#div1 { 
		margin-left: auto;
		width: 100%;
	}
	#div2 {
		width: 91%;
		margin-right: auto;
	}
	
	#tblExploreLft, #tblExploreRt  {
		font-size: smaller;
	}		
	#tblExploreLft {
		margin-bottom: auto;
	}
	#tblExploreRt {			
		width: 100%;	
		margin-left: -6%;
	}	
	#tblExploreRt td.hideMobile {					
		/*display: none;*/
		visibility: hidden;
	}
	#tblExploreRt td.showMobile {					
		/*display: table-cell;*/
		visibility: visible;
	}	

	#siteMapIcon {
		display: none;
	}	

	#restArea img {
		display: none;
	}	
	#restArea h2 {
		font-size: medium;
	}
	#restArea button {
		margin: auto 2.5em;
	}
	
	#hmBureau, #hmBureau1 {
		display: none;
	}

}

@media only screen and (max-width : 420px) {/* Extra Small Devices, Phones */
	body {
		text-align: justify;
	}
	#BureauBoxSm, #BureauBoxSmLongerName {
		height: 155px;
		width: 100%;
		border-radius: 5px;
		margin: 5px 0 5%;	
	}
	#BureauBoxSm h2, #BureauBoxSmLongerName h2 {
		font: 18px Myriad Pro, Arial, Helvetica, sans-serif;
		color: #143956;
		font-weight: 15px;
		border-top: 1.5px #ffffff outset;
		border-bottom: 1.5px #ffffff inset;
		padding-left: 0px;
		padding-right: 0px;
		text-align: center;
		margin-top: 60px;
		margin-bottom: 10px;
	}
	#BureauBoxSmLongerName h2.travel {
		margin-top: 40px;
	}
	#dropdownMenuSm {
		width: 99%;
		font: 14px Arial, Helvetica, sans-serif !important;
	}
	.dropdown-menu {
		font: 14px Arial, Helvetica, sans-serif;
		color: #565656;
	}
	#search-query-fieldSm { /*These properties apply to the Search text box only*/
		width: 60%;
	}
	#searchButtonSm {
		width: 30%;
	}
	.breadcrumb {
		margin-bottom: 15px;
	}
	#logo {
		width: 95%;
		left: 3px;
	}
	#ColWithNav {
		margin-top: 45px; /*This determines the space above the navbar*/
	}
	.submit {
		background-color: green;
		color: white;
		height: 40px;
		width: 40%;
		margin-left: 8%;
		margin-right: 0%;
	}
	.reset {
		background-color: green;
		color: white;
		height: 40px;
		width: 40%;
		margin-left: 2%;
		margin-right: 7%;
	}

/*#homediv1 {
		margin: auto 1em;
		width: 100%;
	}
	#homediv2 {
		margin: 0 -8em 5em;
		width: 100%;	
	}
	#featuredInfo, #aldotOffices {
		margin-left: -.55em;
	}
	#aldotOffices h2 {
		font-size: 18px;
	}
	#aldotOffices button {
		font-size: 14px;
	}
	
	#hmSidebar.well {
		margin: -2em -.55em auto;
	} */
	
}

@media only screen and (max-width : 375px) {
	#div1 { 
		margin: 0 auto 0 1%;
		width: 103%;
	}
	#div2 {
		margin: 3px 7%;
	}
	
	#alphaSort {
		margin-left: -40px;
	}	
	#tblExploreRt {
		margin: auto;
	}
	#tblExploreRt td.showMobile {					
		display: table-cell;
	}	
	#tblExploreRt td.hideMobile {					
		display: none;
	}
	
	/*
	#homediv1 {
		margin: 20px;
	}	
	#homediv2 {
		width: 150px !important;
		margin-right: 2.55em; 
	}		
 	#featuredInfo {
		margin-left: 3.55em;
	} 
	#featuredInfo h2, #aldotOffices h2{
		font-size: 18px;
	}
	#placeholderdiv img {
		width: 125px;
		height: 125px;
	}
	#aldotOffices {
		margin: -2em auto 0em 2.55em; 
	}
	#aldotOffices button {
		font-size: 14px;
	}
	#hmSidebar.well {
		background-color: #ffffff;
		width: 195px;		
		margin: -3em 0 0 3.55em;
	}
	#hmSlideNext, #hmSlidePrev {
		margin-left: 15px;
	}
	#hmSlideNext {
		margin-bottom: 1.25em; 
	}
	#hmSlidePrev {
		margin-top: 1.25em; 
	}
	*/

	#siteMapIcon {
		display: none;
	}
	
} 

@media only screen and (max-width : 340px) {
	#bannerSm img {
		display: none;	
	}
	.submit {
		background-color: green;
		color: white;
		height: 40px;
		width: 80%;
		margin-left: 10%;
	}
	.reset {
		background-color: green;
		color: white;
		height: 40px;
		width: 80%;
		margin-left: 10%;
	}	
	
}

@media only screen and (max-width : 320px) {
	#div1 { 
		margin: 0 auto  0 -1%;
		width: 107%;
	}
	#div2 {
		margin: 0px 7%;
	}	
	#tblExploreRt {
		margin: auto;
	}
	#tblExploreRt td.showMobile {					
		display: table-cell;
	}	
	#tblExploreRt td.hideMobile {					
		display: none;
	}
	
	#siteMapIcon {
		display: none;
	}
	
}

/*****Makes table rows go into their own tables. Use id="RespTable" on div with table class. ******/
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width : 335px) {	
	.dataTable {
		width: auto;
		border-collapse: collapse;
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
		margin-left: 0px !important;
		margin-right: 0px !important;
		font: 10px Myriad Pro, Arial, Helvetica, sans-serif;
	}
}

@media only screen and (max-width: 768px), (min-device-width: 768px) and (max-device-width: 1024px) {
	/* Force table to not be like tables anymore */
	.dataTable table, .dataTable thead, .dataTable tbody, .dataTable th, .dataTable td, .dataTable tr {
		display: block;
	}
	.dataTable td, .dataTable th {
		padding-left: 0px !important;
		margin-left: 0px !important;
	}
	/*makes search disappear on datatables*/
		/*div.dataTables_wrapper div.dataTables_filter {
			display: none !important;
		}*/

		/* Hide table headers (but not display: none;, for accessibility) */
	.dataTable thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.dataTable tr {
		border: 1px solid #f3efef;
	}
	.dataTable td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #f3efef;
		position: relative;
		padding-left: 50%;
	}
	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
	
	/* USED on the QuickLinks Page */
	#QuickLinks.dataTable thead {
		display: table-header-group;
		vertical-align: middle;
		border-color: inherit;
	}
	
}