/* main page elements for the baltimoresun.com baltimore homicide map
**************************************************************************************************/

body
{
	color: white;
	background-color: #212221;
	font-family: "Montserrat", Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
}

#header
{
	margin: 20px auto 0 auto;
	padding: 0 5px 0 0;
	text-align: left;
	width: 980px;
	min-height:70px;
}

.wrapper
{
	border: 1px #003366 solid;
	margin: 0 auto 20px auto;
	padding: 9px;
	text-align: left;
	width: 964px;
}

#error-message
{
	background: #f0f5b8;
	border: 1px #ccc solid;
	clear: both;
	margin-bottom: 10px;
	padding: 10px;
}

/* headings, paragraphs, legend/key, lists, and links
**************************************************************************************************/

dd, dl, dt, h1, h2, li, ol, p, ul { margin-top: 0; }

em, i { font-style: italic; }


h1 img
{
	float: left;
	padding-left: 0px;
}



h2
{
	font-size: 17px;
	font-weight: normal;
}

h3
{
	font-size: 17px;
	font-weight: normal;
	margin-bottom: 9px;
	padding-top: 30px;
}

p
{
	font-size: 9pt;
	line-height: 150%;
	margin-bottom: 15px;
}


#error-message p
{
	font-weight: bold;
	margin: 0;
}

p#modified-on
{
	clear: both;
	font-size: 8pt;
	margin-bottom: 0;
	padding: 20px 0 5px 0;
	text-align: center;
}

p#made-by
{
	clear: both;
	text-align: center;
}

dl#key
{
	background: #444;
	font-size: 8pt;
	padding: 10px;
	text-align: center;
}

dl#key dt { font-size: 9pt; font-weight: bold; }
dl#key dd, dl#key dt { display: inline; margin-right: 15px; text-align: left; }


a
{
	color: #cf403d; /* #003366 */
	text-decoration: none;
	font-weight:bold;
}

a:hover
{
	color: #990906;
	font-weight: bold;
	text-decoration: underline;
}

h1 a { text-decoration: none; }

strong { font-weight: bold; }

#header .share {
    float: right;
    margin: -60px 22px 0 0;
}

#help .results {
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    padding: 6px
}



/* gmap and popup bubbles
**************************************************************************************************/

#map
{
	/*border: 1px #ccc solid;*/
	clear: both;
	height: 450px;
	width: 100%;
	position: relative;
}

#map-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	cursor: pointer;
}

#map .MicrosoftMap {
	width: 100% !important;
	height: 100% !important;
}

/* This hides the credentials error from Bing. */
.MicrosoftMap div:nth-child(3) {
	display: none;
} 

div#popup {
	background: #fff;
	width: 270px;
}

div#popup dl
{
	font-size: 9pt;
}

div#popup dl dt
{
	font-weight: bold;
	font-size: 10pt;
	margin-bottom: 5px;
}

div#popup dl dd
{
	line-height: 150%;
}

div#popup dl dd.popup-note {
	padding-top: 15px;
}





/* bar graph
**************************************************************************************************/

div.bar-graph {
	background: #fff url(../img/homicide-bar-graph.gif) no-repeat;
	border: 1px #1b2f4a solid;
	clear: both;
	height: 160px;
	margin-bottom: 10px;
	padding-bottom: 20px;
}

.bar-graph ul {
	color: #fff;
	font-size: 10px;
	padding: 0 0 0 20px;
	vertical-align: text-bottom;
}

.bar-graph ul li {
	background: #fff url(../img/tick.gif) bottom repeat;
	cursor: help;
	float: left;
	margin: 0 3px;
	text-align: center;
	vertical-align: text-bottom;
	width: 16px;
}

.bar-graph ul li:hover {
	background: #fff url(../img/tick-on.gif) bottom repeat;
}

.bar-graph ul li span.month { 
	display: none;
}

.bar-graph ul li div.number {
	display: auto; 
	background: #fff; 
	color: #1e566e; 
	margin: 0; 
	padding: 2px 0 3px 0; 
	line-height: 100%; 
	height: 10px;
}












/* most recent homicides for bottom of initial page
 *  *  *  * **************************************************************************************************/

.recentvictims{margin:20px auto; font-size:11px; max-width: 900px;}
.recentvictims .odd {}
.recentvictims .even {background:#282928;}
.recentvictims .odd, .recentvictims .even {min-height:32px; padding-top:10px;}
.lfrow {clear:both;}
.lfrow * {float:left; margin-right:20px; min-height:18px; padding-left:5px;}
.lfrow div{width:102px;}
.lfrow div:first-child{width:202px;}














/*
div.bar-graph {
	background: #fff url(../img/homicide-bar-graph.gif) no-repeat;
	border: 1px #ccc solid;
	clear: both;
	height: 160px;
	margin-bottom: 10px;
	padding-bottom: 20px;
}

.bar-graph ul {
	color: #fff;
	font-size: 10px;
	padding: 0 0 0 20px;
	vertical-align: text-bottom;
}

.bar-graph ul li {
	background: #fff url(../img/tick.gif) bottom repeat;
	cursor: help;
	float: left;
	margin: 0 3px;
	text-align: center;
	vertical-align: text-bottom;
	width: 17px;
}

.bar-graph ul li:hover {
	background: #fff url(../img/tick-on.gif) bottom repeat;
}

.bar-graph ul li span.month { 
	display: none;
}

.bar-graph ul li div.number {
	display: auto; 
	background: #fff; 
	color: #1e566e; 
	margin: 0; 
	padding: 2px 0 3px 0; 
	line-height: 100%; 
	height: 10px;
}
*/




/* bar graph/pie chart section
**************************************************************************************************/
	
	#yearly-data { padding-top: 10px; }
	
	/* root element for the scrollable. when scrolling occurs this element stays still. */
	div.scrollable {
		/* required settings */
		position:relative;
		overflow:hidden;
		width: 770px;
		height:350px;
	} 
	
	/* root element for scrollable items. Must be absolutely positioned and it should have a 
	extremely large width to accomodate scrollable items. it's enough that you set width and 
	height for the root element and not for this element. */
	div.scrollable div.items { 
		/* this cannot be too large */
		width:20000em;
		position:absolute; 
	} 

	/* a single item. must be floated in horizontal scrolling. typically, this element is the 
	one that *you* will style the most. */ 
	div.scrollable div.items div { 
		float:left; 
	} 

	/* you may want to setup some decorations to active the item */ 
	div.items div.active { 
		border: 1px inset #ccc; 
		background-color:#fff; 
	}
	
	/* this makes it possible to add next button beside scrollable */
	.scrollable { float:left; }

	/* prev, next, prevPage and nextPage buttons */
	a.browse {
		background: url(../img/hori_large.png) no-repeat;
		display: block;
		width: 30px;
		height: 30px;
		float: left;
		margin: 160px 10px 0 10px;
		cursor: pointer;
		font-size: 1px;
	}

	/* right */
	a.right			{ background-position: 0 -30px; clear: right; margin-right: 0px; }
	a.right:hover	{ background-position: -30px -30px; }
	a.right:active	{ background-position: -60px -30px; } 
	
	/* left */
	a.left			{ margin-left: 0px; } 
	a.left:hover	{ background-position: -30px 0; }
	a.left:active	{ background-position: -60px 0; }

	/* disabled navigational button */
	a.disabled { visibility:hidden !important; }





/* victim permalink page
**************************************************************************************************/

#victim {
	text-align: center;
	margin-top: 40px;
}

@media (max-width: 700px){
	#victim {
		margin-top: 20px;
	}
}

#victim-map, #victim-data
{
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 30px;
	
}

#victim-data
{
	margin: 20px 40px;
	width: 300px;
	text-align: left;
}

@media (max-width: 700px){
	#victim-data {
		margin: 20px 0;
	}
}

#victim-map-container
{
	height: 300px;
	width: 300px;
}


#victim-data h2
{
	font-size: 27px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #555;
}

#victim-data dl
{
	clear: left;
	font-size: 9pt;
	line-height: 150%;
	margin-bottom: 5px;
	/*color: goldenrod;*/
}

#victim-data dl dt
{
	float: left;
	font-weight: bold;
	color: rgba(255,255,255,0.6);
}

#victim-data dl dd
{
	margin-left: 80px;
}

.victim-data-date {
	font-style: italic;
}

p.article-link
{
	padding-top: 20px;
}

#vnotes {
	font-size: 9pt;
	line-height: 150%;
}

#vnotes p, #vnotes ol, #vnotes ul {
	margin-bottom: 6px;
}

#vnotes ul li {
	list-style: square;
	margin-left: 20px;
}

#vnotes ol li {
	list-style: decimal;
	margin-left: 25px;
}


/* Tophat */

#tophat {
  height: 40px;
  border-bottom: 1px solid #282928;
  overflow: hidden; }

#logo {
  width: 250px;
  height: 100%;
  float: left;
  line-height: 43px;
  vertical-align: middle; }
  #logo img {
    margin: 0 10px;
    width: 90%; }
  @media (max-width: 400px) {
    #logo {
      width: 200px; } }

.tophat-share-tools {
  float: right;
  height: 100%;
  line-height: 35px;
  font-size: 24px;
  vertical-align: middle;
  color: #A9A9A9;
  margin: 0 10px;
  text-align: center; }
  .tophat-share-tools span {
    cursor: pointer;
    vertical-align: middle;
    margin-right: 8px; }
    .tophat-share-tools span:hover {
      color: #ca4a4b; }
  @media (max-width: 760px) {
    .tophat-share-tools {
      font-size: 18px; } }



/* Adding responsiveness... */

#mobile-charts, #mobile-charts img {
	display: none;
}

.wrapper { border: 0px;}

.lede { width: 75%;}



@media (max-width: 960px){
	.lfgender { display: none;}
	.lfrow div, .lfrow div:first-child { margin: 0; box-sizing: border-box; padding: 0 10px; width: 20%;}
}

@media (max-width: 800px){
	.lfage { display: none;}
	.lfrow div, .lfrow div:first-child {width: 25%;}
}

@media (max-width: 650px){
	.lfaddress { display: none;}
	.lfrow div, .lfrow div:first-child {width: 33%;}	
}

@media (max-width: 400px){
	.lfrace, .lrace { display: none;}
	.lfrow div, .lfrow div:first-child {width: 50%;}	
}




@media (max-width: 960px){
    
	/* Eliminated */
	.scrollable, .browse, .share, #ck_sharethis, { display: none !important; }

	/* Make exception for dedicated table page... */
	/*.wrapper.table-page .recentvictims { display: block !important; }*/

	/* Fixed-width elements */
	#header { width: auto; border-bottom: 1px solid #E0E0E0; margin: 0;}
	.wrapper, .lede { width: auto;}
	#map { width: auto !important; height: 350px !important;}
	.MicrosoftMap { width: auto !important; height: 100% !important; }

	/* Header */
	#header { padding: 10px 0; min-height: 0;}
	#header h1 { height: auto; }
	#header h1 a img { float: none; }

	/* Top section */
	#help { padding: 0 !important;}
	#controller { padding: 0 !important; }

	/* Chart */
	#mobile-charts { display: block; text-align: center;}
	/*#mobile-charts img:nth-child(1), #mobile-charts img:nth-child(2) { display: inline-block; vertical-align: top;}*/
	#mobile-charts img { display: inline-block; vertical-align: top;}
	#mobile-charts img { width: 45%; margin: 10px;}

	/* Footer */
	#made-by { padding: 0 10px; }

	/* Map key */
	#key { -webkit-columns: 3; -moz-columns: 3; columns: 3; }
	#key dt { display: none !important; }
	#key dd { display: block !important; margin: 0; padding: 3px 10px;}

}

@media (max-width: 700px){
	#mobile-charts img { width: 100%; margin: 20px 0;}
}

@media (max-width: 450px) {
	#key { -webkit-columns: 2; -moz-columns: 2; columns: 2; }
}