/descry/Obesity/Obesity.Web/css/main.css

/* ****************************************************************************

 *

 * Copyright (c) Microsoft Corporation. 

 *

 * This source code is subject to terms and conditions of the Microsoft Public License. A

 * copy of the license can be found at http://go.microsoft.com/fwlink/?LinkID=131993. If

 * you cannot locate the Microsoft Public License, please send an email to

 * mixon@microsoft.com. By using this source code in any fashion, you are agreeing to

 * be bound by the terms of the Microsoft Public License.

 *

 * You must not remove this notice, or any other, from this software.

 *

 *

 * ***************************************************************************/

 

/*************************************

 MIX ONLINE - PROJECT DESCRY

 http://www.visitmix.com/lab/descry

 

 This file contains all styles for the

 corresponding infographic. Feel free 

 to employ the techniques used in this

 CSS file. A link back to us is always 

 appreciated but not required. 

 

 *************************************/



/********** GENERAL STYLES ***********/

body {

	text-align: center; /*IE5*/

	font-family: Arial, Helvetica, sans-serif;

	color: #D92F26;

	background: url(../img/title_bg.gif) repeat-x;

}

h1 {

	font-size: 2.5em;

	margin: 0 0 .2em 0;

	font-weight: lighter;

}

h2 {

	font-size: 1.4em;

	margin: 0 0 .2em 0;

	font-weight: normal;

}

p {

	line-height: 1.6em;

	font-size: 1.0em;

}

p.intro {

	color: #333;

	font-size: 1.2em;

	line-height: 1.4em;

}

a {

	text-decoration: none;

	color: #D92F26;

}

ul {

	margin: 0;

	padding: 0;

	list-style: none;

}

li {

	display: block;

	width: 100%;

	margin: 0px;

	padding: 0px;

	height: 31px;

}

a:link, a:visited {

	background-color: #EC9793;

	padding: .1em .3em .1em .3em;

}

a:hover, a:active {

	background-color: #D92F26;

	color: #EC9793;

	padding: .1em .3em .1em .3em;

}

table, tr, td {

	border: none;

	background: #CCCCCC;

}



/********** PAGE STRUCTURE ***********/

#container {

	width: 960px;

	margin: 0 auto; 

	text-align: left;

}

#visualization {

	width: 945px;

	height: 600px;

}

#bar-chart {

	width: 945px;

}



/********** PAGE ELEMENTS ***********/

/* Upsell bar at top of page */

#upsell {

	color: #fff;

	font-family: Arial, "Lucida Sans", Helvetica, Verdana, sans-serif;

	font-size: .9em;

	height: 2em;

}

#upsell a {

	background-color: #ff0000;

	display: block;

	text-decoration: none;

	color: #fff;

	font-weight: bold;

}

#upsell a:link, #upsell a:visited {

	background-color: #EC9793;

	color: #D92F26;

}

#upsell a:hover, #upsell a:active {

	background-color: #D92F26;

	color: #EC9793;

}

#upsell a span {

	display: block;

	width: 960px;

	text-align: right;

	margin: 0 auto;

	padding: .5em 0 .5em 0;

}



/* Title "The Obesity Epidemic" */

#title {

	margin: 2em 0 0 0;

	height: 320px;

}

#title h1 {

	float: left;

	width: 500px;

	text-align: right;

	font-weight: bold;

	line-height: 1em;

}

#title span {

	display: block;

}

#title .the {

	font-size: .9em;

	color: #E6756F;

}

#title .obesity {

	font-size: 1.8em;

	line-height: .7em;

	color: #DF524A;

}

#title .epidemic {

	font-size: 2.6em;

	line-height: .9em;

	color: #B52720;

}

#title p {

	float: right;

	width: 420px;

	font-size: .869em;

	font-weight: bold;

}

#title a {

	font-weight: normal;

}



/* Year & Legend */

#year {

	font-weight: bold;

	color: #333;

	font-size: 1.4em;

	margin-bottom: 10px;

	float: left;

	display: block;

}

#legend {

    float: right;

    color: #ccc;

    font-weight: bold;

    margin-right: 17px;

    margin-top: 3px;

}

#legend li.legend, #legend li.obese, #legend li.normal, #legend li.overweight {

    float: left;

	padding: 1px 3px 1px 3px;

	margin-right: 1px;

	font-size: .69em;

	height: auto;

	width: auto;

}



/* Bar Chart styles */

#bar-chart {

	color: #ccc;

	margin: 0px;

	padding: 0px;

	clear: both;

}

.state, .obese, .normal, .overweight, .nodata {

	display: block;

	float: left;

	padding: 5px;

	font-size: .8em;

}

.bar {

	display: block;

}

.state {

	width: 20%;

	text-align: right;

	background: #999;

	margin-right: 5px;

	font-weight: bold;

	margin-bottom: 5px

}

.state-abbr {

	color: #fff;

}

.selected {

	background-color: #333;

}

.obese {

	background-color: #F2BAB7;

	color: #DF544D;

	font-weight: bold;

}

.overweight {

	background-color: #F0E69B;

	color: #AC9B26;

	font-weight: bold;

}

.normal {

	background-color: #D1EE7B;

	color: #82A615;

	font-weight: bold;

}

.nodata {

	background-color: #ddd;

	color: #666;

	font-weight: bold;

}



/* Tooltip */

a.tt {

	position: relative;

	z-index: 24;

}

a.tt:link, a.tt:visited, a.tt:hover, a.tt:active {

	background-color: #fff;

	padding: 0;

}

a.tt span {

	display: none;

}

a.tt:hover {

	z-index: 25;

}

a.tt:hover span.tooltip {

	display: block;

	top: 0;

	padding: 0px 20px 20px 10px;

	font-size: .6em;

	line-height: 1em;

	position: absolute;

	text-align: left;

	left: 0;

	width: 245px;

}

a.tt:hover span.content {

	background-color: #333;

	color: #fff;

	display: block;

	padding: 5px;

}



/* No Silverlight */

#getsilverlight {

	font-family: "Lucida Sans", Arial, Helvetica, Verdana, sans-serif;

	text-align: center;

	padding: 20px;

	line-height: 1.4em;

	background-color: #eeb7b7;

	margin-bottom: 20px;

	color: #ee2f2f;

}





/* Footer */

#footer {

    color: #aaa;

    font-size: .7em;

    margin: 40px 0 30px 0;

    float: left;

    text-align: left;

    line-height: 1.5em;

}