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

body
{
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	text-align: center;
}

#header
{
	margin: 20px auto 0 auto;
	padding: 0 5px 0 0;
	text-align: left;
	width: 878px;
}

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

#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
{
	background: #fff;
	border: 0px #ccc solid;
	color: #003D58;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: bold;
	height: 30px;
	margin-bottom: 0px;
	margin: 0;
}

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

h1 #page-title
{
	float: right;
	padding: 6px 0px 6px 0;
}

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;
}

#help
{
	padding: 0 65px;
}

#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: #f8f8f8;
	font-size: 8pt;
	border: 1px #ccc solid;
	margin-bottom: 10px;
	padding: 10px;
}

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


a
{
	color: #d3602e; /* #003366 */
	text-decoration: underline;
}

a:hover
{
	color: #003344; /* #660000 */
	text-decoration: underline;
}

h1 a { text-decoration: none; }

strong { font-weight: bold; }




/* dropdown text labels and form elements
**************************************************************************************************/

form#controller
{
	xheight: 50px;
	margin-bottom: 10px;
}

form#controller fieldset div.dropdown
{
	float: left;
	margin-right: 5px;
	xheight: 50px;
}


form#controller fieldset div.dropdown label, form#controller fieldset div#go label
{
	color: #666;
	font-size: 8pt;
	line-height: 200%;
}

form#controller fieldset div#go label { font-weight: bold; }


form#controller fieldset div.dropdown select { display: block; font-size: 9pt; text-transform: capitalize; }

form#controller fieldset div.dropdown select#range { text-transform: none; }

form#controller fieldset div#go { float: left; }

form#controller fieldset div#go input { display: block; }






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

#map
{
	border: 1px #ccc solid;
	clear: both;
	height: 500px;
	margin-bottom: 10px;
	width: 850px;
}

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 five homicides for bottom of initial page
 *  *  * **************************************************************************************************/

div.littlefive{float:left; margin:50px 0px 0px 40px; font-size:14px; }
div.littlefive div.odd {background:#dedede; min-height:18px;}
div.lfrow {width:800px; clear:both;}
div.lfrow * {float:left; margin-right:20px; min-width:170px; min-height:12px;}
div.lfrow div:first-child{width:200px;}











/*
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
**************************************************************************************************/
	
	#chart-section { 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 #victim-map
{
	float: right;
}

#victim #victim-map #map
{
	width: 425px;
}

#victim #victim-data
{
	width: 400px;
}

#victim-data h2
{
	font-size: 27px;
}

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

#victim-data dl dt
{
	float: left;
	font-weight: bold;
}

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

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;
}