/descry/Obesity/Obesity.Web/css/main.css
CSS | 297 lines | 251 code | 11 blank | 35 comment | 0 complexity | 5c8af16fc9be743dd1e1f6019abd178f MD5 | raw file
- /* ****************************************************************************
- *
- * 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;
- }