/* Tablets and large screens ----------- */
@media only screen and (min-width : 768px){

    #Header {
	    overflow: hidden;
	    opacity: 0.8;
  	}

  	.mapMode #Header{
  		opacity: 1;
  	}

  	.DataCatalog #Content{
  		max-width: 100%;
  	}
  	footer .logos{
	    width: 570px;
	    margin-left: auto;
	    margin-right: auto;
  	}
  	#logo{
  		font-size: 1.4em;
  	}
  	#logo img{
  		height: 70px;
  	}
  	.header nav{
		float: right;
		width: auto;
		display: block;
	}
  	.header .nav > li{
  		width: auto;
  		border-bottom: 0px;
  	}
  	.header .nav > li > a{
  		text-align: left;
  		font-size: 1.3em;
  	}
  	.header .nav .sub-menu li a{
  		font-size: 1em;
  	}
  	.header #logo{
  		font-size: 1.1em;
  	}
  	.header .nav{
  		font-size: .9em;
  	}
  	.header .nav .dropdown-toggle.user{
  		font-size: .9em;
  		max-width: 130px;
  	}
  	#nav-trigger{
  		display: none;
  	}
  	.dropdown-menu{
  		position: absolute;
  	}
    /** Backbone override for dropdowns so they dsplay on hover rather than click **/
    .dropdown-menu .sub-menu {
	    left: 100%;
	    position: absolute;
	    top: 0;
	    visibility: hidden;
	    margin-top: -1px;
	}

	.dropdown-menu li:hover .sub-menu {
	    visibility: visible;
	}

	.dropdown:hover .dropdown-menu {
	    display: block;
	}

	.dropdown:hover .dropdown-menu.hidden,
	.dropdown-menu.hidden{
		display: none;
	}

  	/*Dropdown menus - only appear on non-mobile*/
	.nav .dropdown-toggle .caret{
		margin-top: 14px;
		border-top-color: #1F254F;
	}
  	.nav .dropdown-menu{
  	    box-shadow: none;
   		border: 0px;
    	background-color: transparent;
  	}  	
  	.nav .dropdown-menu li a:hover,
  	.nav .dropdown-menu li a:focus{
  		background-color: #19B36A;
  		background-image: none;
  		color: #FFF;
  	}
  	.nav .dropdown-menu li:first-child a{
  		border-top-left-radius: 4px;
		-moz-border-top-left-radius: 4px;
		-webkit-border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		-moz-border-top-right-radius: 4px;
		-webkit-border-top-right-radius: 4px;
  	}
  	.nav .dropdown-menu li:last-child a{
		border-bottom-left-radius: 4px;
		-moz-border-bottom-left-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		-moz-border-bottom-right-radius: 4px;
		-webkit-border-bottom-right-radius: 4px;

		border-bottom: 0px;
  	}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 480px) {
	/************** General Structure ****************/
	#Header{
		display: none;
	}
	#Navbar .navbar-inner{
		border-bottom: 2px solid #992222;
	}
	.header .dropdown-menu{
		position: relative;
		background-color: transparent;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		float: none;
	    padding: 0px;
	    margin: 0px;
	    border: 0px;
	}

	#Content{
		padding-bottom: 785px; /* Keeps footer down */
		margin-top: 0px;
	}

	/************** Footer ****************/
	#Footer{
		height: 775px; /* Keeps footer down */
	}
	footer div.help-items,
	footer .logos{
		width: 100%;
		min-width: 100%;
		margin-top: 20px;
	}
	footer .logos .logo{
		margin-bottom: 0px;
		margin-top: 0px;
	}
}

@media only screen and (min-width : 1024px){
    .nav .dropdown-toggle.user{
    	max-width: 250px;
    	font-size: 1em
    }
    .nav #logo{
    	font-size: 1.4em;
    }
    .header .nav > li > a{
    	font-size: 1.4em;
    }
}

@media only screen and (max-width : 768px){
  	footer .show-in-map-mode a {
  		margin-left: 25%;
  	}

  	 #nav-trigger{
  		display: block;
  	}

  	/* Take nav out of mobile-style */
	nav{
		float: right;
		width: auto;
		display: block;
	}
	.nav li a{
		text-align: left;
	}
}