@import url(http://fonts.googleapis.com/css?family=Enriqueta);

img {
	border: none;
}

body {
	color: #333;
	background-color: #f5fcfc;
	background-color: #fff;
	/*background-image: linear-gradient(#f5fcfc, #fff);
	background-repeat: no-repeat;*/
	
	font-family: Verdana, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, ul, ol, dl, #theSlogan, #theTestimonials {
	font-family: 'Enriqueta', Verdana, sans-serif;
	font-weight: normal;
} 

ul, dd {
	list-style-type: none;
	list-style-position: outside;
	padding: 0;
	margin: 0;
}

.aBannerWrapper {
	background-position: right top;
	background-repeat: no-repeat;
}

#theBigWrapper {
	top: 0;
	position:relative;
	margin: 0 auto 20px auto;
	padding: 0;
	width: 990px;
}

#theMediumWrapper {
	position:relative;
	margin: 0;
	padding: 22px 26px 12px 20px;
	background-color: #fff;
	
	border: 0px solid #dee;
	border-bottom-width: 0px;
	border-top-width: 0px;
}

#theMainArea {
	border: 1px solid #dee;
	border-top-width: 0px;
	border-right-width: 0px;
}

#theFinePrint {
	text-align: center;
	font-size: 60%;
	color: #003aac;
	margin-bottom: 80px;
}

h1, h2 { 
	margin: 4px 0;
}

h3 {
	background-color: #05f;
	color: white;
	padding: 4px 10px;
	margin: 10px 0;
}

h4 {
	color: #003aac;
	font-size: 1.4em;
	margin: 10px 0;
}

.kicker, h5, .aSecondLevelNav dt, .aSecondLevelNav li.multiLevel>a {
	font-size: 0.8em;
	color: #f20; 
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: Verdana, sans-serif;
	font-weight: bold;
}

h5, .aSecondLevelNav dt, .aSecondLevelNav li.multiLevel>a {
	display: block;
	margin: 10px 0;
	border-bottom: 3px solid #aee;
	padding: 0 0 4px;
	text-align: left;
	
}

li.multiLevel>a, .aSecondLevelNav dl dt {
	margin-right: 22px !important;
}

.aSecondLevelNav dl.someMapAreas dt {
	margin-right: 0 !important;
}

.aSecondLevelNav dt {
	margin-bottom: 4px;
}

h6 {
	color: #003aac;
	font-size: 1em;
	margin: 10px 0;
}

hr {
	border: 3px solid #05f;
	margin: 14px 0 10px;
}

#theLogo {
	margin: 0px;
	/*float: left;
	width: 450px;*/
	text-align: center;
}

#theSlogan {
	/*float: right;
	width: 400px;
	text-align: right;
	margin-top: 80px;*/
	font-size: 100%;
	text-align: center;
	border: 0px solid #dee;
	border-bottom-width: 0;
	padding: 3px 26px 26px; 
}

#theSlogan .sloganPart1 {
	color: #f20;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 80%;
}

#theSlogan .sloganPart2 {
	color: #003aac;
	font-size: 110%;
}

a:link, button, dl.somePopOuts>dt, .backToMenu {
	text-decoration: none;
	color: #003aac;
}

a:visited {
	color: #66487a;
}

a:hover, button:hover, dl.somePopOuts>dt:hover, .backToMenu:hover {
	color: #27207a;
}
dl.somePopOuts>dt:hover { background-color: #e3efef; }
.backToMenu:hover { background-color: #fff; }

dl.somePopOuts>dt:hover:after { 
	content: "\003e";
	float: right;
	color: #abb;
	font-weight: bold;
}
a:hover { text-decoration: underline; }

a:active, button:active, dl.somePopOuts>dt:active {	
	color: red;
}

dl.somePopOuts>dd {
	display: none;
} 

#theTopLevelNav dl, nav ul {
	margin-top: 0px;
} 

nav dt, nav li {
	margin-top: 0px;
} 

nav#theNavBar #theTopLevelNav {
	width: 300px;
	background-color: #fff;
	background-image: linear-gradient(#fff, #faffff);
	padding: 0 0 60px;
	border: 1px solid #dee; 
	border-right-width: 0;
}

#theTopLevelNav dt, #theTopLevelNav li, #theTopLevelNav h5 {
	padding: 2px 26px 4px;
}

.backToMenu {
	padding: 2px 20px 4px 14px;
}

.aSecondLevelNav li {
	padding: 3px 0 5px;
}

dl.somePopOuts>dt.anActiveMenu {
	background-color: #e3f3f3;
}
.aSecondLevelNav {
	background-color: #e3f3f3;
	padding: 6px 6px 26px 26px;	
	display: none;
	opacity: 0.9;
	width: 300px;
}
.aSecondLevelNav>ul {
	width: 300px;
	height: auto;
	margin-top: 10px;
}

.aSecondLevelNav .anAreaMap {
	width: 657px;
	height: auto;
}

nav#theNavBar td {
	height: 100%;
	vertical-align: top;
}
table#theContent {
	width: 100%;
}

table#theContent td {
	padding: 26px;
}

#theMainArea {
	background-color: #fff;
	vertical-align: top;
}

#theTestimonials {
	width: 30%;
	background-color: #f5fcfc;
	background-image: linear-gradient(#fff, #faffff);
	border: 1px solid #dee; 
	border-top-width: 0;
	vertical-align: top;
}

table.aMapBox {
	width: 100%;
}

nav#theNavBar td.anActualMap {
	vertical-align: middle;
	text-align: center;
}

td.anActualMap {
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url('/assets/images/cnglocal-map-layers-thecity.png');
	background-size: 377px 480px;
}

td.anActualMap img.aMapPic {
	border: 2px solid transparent;
}

.aSecondLevelNav dl.someMapAreas {
	margin: 0;
	width: 230px;
}
.aSecondLevelNav dl dd ul li, .aSecondLevelNav li.multiLevel li {
	font-size: 90%;
	line-height: 110%;
	margin: 0px 0 3px;
	padding: 0;
}

.aSecondLevelNav dl dd.majorCategory ul li {
	font-size: 100%;
	line-height: 110%;
	margin: 2px 0 4px;
	padding: 0;
}

.aNeighborhoodsLayer {
	background-position: top left;
	background-repeat: no-repeat;
	background-image: url('/assets/images/cnglocal-map-layers-neighborhoods-sprites-small.png');
	background-size: auto 480px;
	
	position: absolute;
	width: 377px;
	height: 480px;
	
	margin: 2px 16px;
	
	opacity: 1.0;
}
.aNeighborhoodsLayer.hoodify {
	background-position: top right;
}

.aNewspapersLayer {

	background-position: right bottom;
	background-repeat: no-repeat;
	background-image: url('/assets/images/cnglocal-map-layers-newspapers-sprites-small.png');
	background-size: auto 2400px;
	
	position: absolute;
	width: 377px;
	height: 480px;
	
	margin: 2px 16px;
	
	opacity: 1.0;
}

.aSecondLevelNav.mapNav {
	width: 657px;
}

#theResponsiveNavWrapper {
	display: none;
}
.aSecondLevelNav.mapNav .backToMenu {
	display: none;
}
#theMobilePhoto {
	display: none;
}
.blurbIllustration {
	margin: 1em 20px 20px 0;
	float: left;
}
.blurbIllustration.right {
	margin: 1em 0 20px 20px;
	float: right;
}
#theTestimonials .blurbIllustration {
	width: 35%;
	height: auto;
	margin: 1em 16px 12px 0;
}

#theTestimonials {
	color: #003aac;
}

#theTestimonials .tagline {
	clear: left;
	color: #002a8c;
	font-size: 90%
}

#theTestimonials .tagline strong {
	font-size: 120%;
}
.wideImage {
	width: 100%;
	height: auto;
}

.miniLandscape {
	width: 60%;
	height: auto;
}

#theMainArea h5 {
	clear: both;
}

#theContactBar {
	background-color: #f20;
	color: white;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	top: auto;
	text-align: center;
	padding: 3px 0 6px;
	 
}

#theContactBar li {
	display: inline;
	font-family: Verdana;
	font-size: 80%;
	font-weight: bold;
}
#theContactBar li+li {
	margin-left: 30px;
}

#theContactBar a {
	color: white;
}
/* =============================================================================
================================================================================
=========================== MOBILE/RESPONSIVE CODE =============================
================================================================================
============================================================================= */

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

	#theBigWrapper {
	width: 100%;
	}
	
	.aSecondLevelNav dl.someMapAreas, .aSecondLevelNav .anAreaMap {
	width: auto;
	}
	
	.aSecondLevelNav.mapNav {
	width: 70%
	}
	
	.theresAnOpenMap #theTopLevelNav {
	width: 30%
	}
	
	td.anActualMap {
	background-position: center center;
	position: relative;
	width: 59%;
	background-size: 100% auto;	
	}
	
	.aNeighborhoodsLayer {
	width: auto; height: auto; margin: 0;
	left: 0; right: 0;
	background-size: 200% auto;
	}

	.aNewspapersLayer {
	width: auto; height: auto; margin: 0;
	left: 0; right: 0;
	background-size: 300% auto;
	}
	
	.aNeighborhoodsLayer img, .aNewspapersLayer img {
	height: auto; width: 100%;
	}
	
	td.anActualMap img.aMapPic {
	width: 100%;
	height: auto;
	border-width: 0px;
	}
	
	
	
	td.aMapAreasCell {
	width: 41%;
	min-width: 180px;
	}
	
	div#theNavWrapper {
	overflow: auto;
	}
	
	/*
	#theResponsiveNavWrapper {
	display: block;
	}
	
	#theSecondLevelNav {
	width: 0px !important;
	}
	
	#theSecondLevelNav * {
	display: none;
	}
	
	#theResponsiveNav {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
	}
	
	#theResponsiveNav .anAreaMap {
	width: 100%;
	}
	#theResponsiveNav dl.someMapAreas {
	width: auto;
	}
	#theResponsiveNav td.aMapAreasCell {
	min-width: 200px;
	}
	*/
}
 
@media only screen and (max-width: 720px) {

	.theresAnOpenMap #theTopLevelNav {
	display: none;
	}
	
	.aSecondLevelNav.mapNav {
	width: 100%;
	}
	
	.aSecondLevelNav.mapNav .backToMenu {
	display: block;
	}
	
	#theSlogan span {
	display: block;
	}
	
	.backToMenu {
	display: block;
	cursor: pointer;
	background-color: #bee;
	font-size: 90%;
	}
	
	.backToMenu:before {
	content: "\003c";
	color: #8bb;
	font-weight: bold;
	margin-right: 20px;
	}
	.blurbIllustration {
	width: 30%;
	height: auto;
	}
}

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

	.theresAnOpenMap #theTopLevelNav, #theTestimonials {
	display: none;
	}
	
	.aSecondLevelNav.mapNav {
	width: 100%;
	}

	#theSlogan .sloganPart1 {
	font-size: 70%;
	}
	
	.aSecondLevelNav {
	width: auto;
	}
	
	#theMobilePhoto {
	display: block;
	height: 200px;
	background-size: 100% auto;
	}
	#theBigPhoto {
	background-image: none;
	}
	
	
	.aNeighborhoodsLayer {
		display: none;
	}
	
	nav#theNavBar #theTopLevelNav {
	width: 100%;
	}
	
	
}

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

	#theLogo img {
		width: 40%;
		height: auto;
	}
	
	#theSlogan .sloganPart1 {
	font-size: 60%;
	}
	#theSlogan .sloganPart2 {
	font-size: 90%;
	}

}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {
		
	.aNeighborhoodsLayer { background-image: url('/assets/images/cnglocal-map-layers-neighborhoods-sprites.png'); }
	.aNewspapersLayer { background-image: url('/assets/images/cnglocal-map-layers-newspapers-sprites.png'); }
}


/* =============================================================================
================================================================================
====================== /END MOBILE/RESPONSIVE CODE =============================
================================================================================
============================================================================= */