/** * 21px Stylesheet * Sets up 21px line heights and margins * * @since 0.3 * @package Hybrid * @subpackage CSS */ /* Reset values */ html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; vertical-align: baseline; outline: none; font-size: 100%; background: transparent; border: none; text-decoration: none; } /* * Get rid of deprecated and non-semantic elements * These elements should not be used and replaced with proper alternatives */ b, i, hr, u, center, menu, layer, s, strike, font, xmp { margin: 0; padding: 0; vertical-align: baseline; outline: none; font-size: 100%; font-weight: normal; font-style: normal; background: transparent; border: none; text-decoration: none; } font {color: #333;} center {text-align: left;} /* End deprecated elements */ /* Object */ object {margin-bottom: 5px;} /* Forms */ input, textarea {padding: 3px;} :focus {outline: none;} form label {cursor: pointer;} option {padding: 1px 3px;} /* Tables */ table {border-collapse: collapse;border-spacing: 0;margin-bottom: 15px;} th, td {text-align: left;} /* Horizontal rule */ hr {margin-bottom: 15px;} /** * Body ************************************************/ body{background-color:#e6e6e6;font-family:Georgia, Helvetica;color:#333;line-height: 24px;} /* Body container */ #body-container{overflow:hidden;width:100%;} /* Headers */ h1, h2, h3, h4, h5, h6 {font-family:Helvetica,Arial,sans-serif;font-style: normal;font-weight: normal;margin: 0 0 15px 0;;color:#222;} /* Headers */ h1{font-size:25px;font-weight: bold;letter-spacing:-1px;border-bottom: 1px solid #ccc;padding-bottom:5px;} h2{font-size:22px;border-bottom: 1px solid #ccc;padding-bottom:5px;} h3{font-size:20px;border-bottom: 1px solid #ccc;padding-bottom:5px;} h4{font-size:18px;} h5{font-size:16px;} h6{font-size:14px;} .no-border{border-bottom: none;} /* Paragraphs */ p {margin: 0 0 15px 0;} /* Lists */ ol, ul {list-style: none;} ul {list-style: disc;margin: 0 0 15px 0;} /* Links */ a {cursor: pointer;} a img {border: none;} /** * Header ************************************************/ #header-container{width:100%;background:#fff;height:70px;} #header{display:block;margin:0px auto 0px auto;width:980px;} #extra-navigation{float:right;margin-top:15px;margin-bottom:5px;font:normal 13px Helvetica;} #search-f{float:right;clear:right;} #search-f input{width: 140px; font-size:11px;} img.logo{margin-top:10px;} #site-title{font-size:2.3em !important;margin-bottom:0px;line-height:27px;padding-top:25px;} #site-title a{color:#09475e;} #site-description{display:none;font-size:1em;font-style:italic;color:#999;margin-bottom:0px;} #site-title,#site-description{font-family:Georgia,Times,"Times New Roman",serif;} /** * Navigation ************************************************/ .menu-center{width:980px;margin:auto;text-align:left;font-size:1em;text-transform: uppercase;height:25px;overflow:hidden;} #topmenu{background:#fff url("images/interface/menu/border-bg.gif") bottom left repeat-x;float:left;width:100%;padding:0px 0px 4px 0px;font-family:Arial,Helvetica,sans-serif;line-height:1;} #topmenu ul{list-style:none;} #topmenu li.current_page_item{background-color:#09475e;margin:0 0 0 -1px;} #topmenu ul li{float:left;background:url("images/interface/menu/tabsbg.gif") top right;position:relative;} #topmenu li.current_page_item.first{margin:0;} #topmenu ul li img.menuleft{position:absolute;top:0;left:-1px;width:1px;height:1px;} #topmenu ul li.hover{background-image:url("images/interface/menu/tabsbg-hover.gif");background-position:top right;} #topmenu ul li.page-item-1331 a{border-left:1px solid #ccc;} #topmenu ul li.current_page_item a{border-left:none;} #topmenu ul li.first-hover{border-left:1px solid #ccc;} #topmenu ul li a{color:#222;font-size:12px;font-weight:bold;padding:7px 10px 5px 10px;margin:1px 0 0 0;display:block;text-decoration:none;} #topmenu ul li.hover a{border-bottom:solid 1px #fff;border-left:solid 1px #fff;padding:6px 9px 4px 9px;margin-top:2px;margin-right:1px;text-decoration:none;} #topmenu ul li.current_page_item a{color:#fff;} #topmenu ul li.current_page_item a:hover{background:none;} #topmenu ul li.current_page_item{background-image:none;} #topmenu ul li.hover-element-active{background-image:url("images/interface/menu/tabsbg-hover-active.gif")!important;} /** * Container (content/primary/secondary) ************************************************/ #container{margin:5px auto 5px auto;width:990px;padding-top:18px;padding-bottom:21px;clear:both;} #container.world{margin:5px auto 5px auto;width:100%;padding-top:21px;padding-bottom:21px;} /* Elements ************************************************/ /* Links */ a{color:#3C738C;text-decoration:none;} a:visited{color:#841d82;text-decoration:none;} a:hover,a:active{text-decoration:underline;} .visited{color:#841d82;padding-right: 12px; background: url("http://www.gapminder.org/GapminderMedia/wp-uploads/gapminder_world/visitedLink.gif") no-repeat 100% 50%;} .note{padding:6px 9px;background:#eee;border:1px solid #ccc;} /* Warnings/Alerts */ .warning,.alert{padding:6px 9px;margin:2px 0 7px 0; background:#fffbbc;border:1px solid #E6DB55;} /* Errors */ .error{padding:6px 9px;background:#ffebe8;border:1px solid #C00;} /* Downloads */ .download{padding:6px 9px;background:#e7f7d3;border:1px solid #6c3;} ul{margin:0 0 0 18px;} /* Gapminder-World*/ #gapminder-world-container {margin:15px auto 0 auto;width:980px;} #gapminder-world-right{position:relative;float:left;margin-left:5px;width:716px;height:540px;border:2px solid #ccc;margin-top:4px;overflow:hidden;} #gapminder-world-bubblePanel{width:100%;height:100%;background-color:#d0dbe2;} /* Extra-buttons*/ #buttonContainer{background-color:#cddce3;height:5%;width:47.2%;top:0.6%;right:20.8%;display:none;position: absolute; font-size: 12px; font-weight:bold; font-family: Arial; color: rgb(86, 107, 127);} #buttonContainer img{cursor:pointer;float:right;height:85%;display:block;margin:1px 0 0 8px;} .full-screen{} .how-to{} .share-graph{} #documentationContainer{background-color:#cddce3;height:2.5%;width:5%;bottom:1.55%;left:10%;display:none;position: absolute;} #documentationContainer img{cursor:pointer;height:100%;display:block;} /* icons */ #example-panel #content img.action-icon{display: inline;margin-right:4px;border:none;} /* text */ .read-more {font-size:11px;} #example-panel a {font-size:12px;} #example-panel a:hover {text-decoration:underline;} a:focus{outline:none;} #gapminder-world-primary{width:255px;position:relative;} #gapminder-world-primary .top {overflow:hidden;background:#FFFFFF url("images/interface/background/255_top.jpg") no-repeat;height:10px} #gapminder-world-primary .bottom {overflow:hidden;background:#FFFFFF url("images/interface/background/255_bottom.jpg") no-repeat;height:10px} /* sidebar */ #gapminder-world-sidebar {float:left;width:255px;overflow: hidden;font-family:Helvetica;} #gapminder-world-sidebar h3{border:none;font-size:16px;margin:10px 0 2px 0;} #gapminder-world-sidebar h4{font-size:10px;text-transform:uppercase;margin:8px 0 -3px 0px;color:#808080;} /* left panel */ #open-library{margin:0;padding:0;background-image:url("http://www.gapminder.org/GapminderMedia/wp-uploads/gapminder_world/bg_header.jpg");height:64px;} #reset-button{margin-left:13px;float:left;width:74px;margin-top:15px;cursor:pointer;background-image:url("http://www.gapminder.org/GapminderMedia/wp-uploads/gapminder_world/reset_open_graph_sprite.png");height:31px;} #open-graph-menu-button{margin-left:5px;background-position: -82px 0px;float:left;width:149px;margin-top:15px;cursor:pointer;background-image:url("http://www.gapminder.org/GapminderMedia/wp-uploads/gapminder_world/reset_open_graph_sprite.png");height:31px;} #loading-bar{display:none;padding:15px 15px;} #example-panel{height:400px;font: normal 13px Helvetica;background: #fff url('images/interface/background/255.jpg') repeat-y} #example-panel #main-tag{font: normal 10px Helvetica, sans-serif;text-transform:uppercase;margin:8px 0 -3px 0px;color:#808080;} #example-panel #heading{font: bold 19px Georgia, serif; margin-bottom:4px;padding:5px 15px 0px 15px;line-height:25px;} #example-panel #content{line-height:18px; overflow:auto;margin:0px 5px;padding:15px 10px 10px 10px;border-top:1px solid #ccc;} #example-panel #content p{margin:0 0 10px 0;} #example-panel #content img{display: block;margin-left:0px;border:1px solid #aaa;} #example-panel #related{padding:3px 10px;display:none;border-top:1px solid #ccc;margin:0 5px;} #related ul li{margin-bottom:4px;} #extra-top{padding:0px 15px; display:none;} #extra-top a{font: normal 9px Arial, sans-serif;} #extra-top a:hover{text-decoration:none;} #example-panel #extra-bottom{position: absolute;bottom:6px;padding:10px 15px;text-align:center;} #extra-bottom img{cursor:pointer;} /* overlay message */ #overlay-message {font: normal 18px Helvetica, Arial; line-height:30px;color:#1b465e;text-shadow:0 1px 0 #FFFFFF} #overlay-message .big{font: bold 28px Helvetica;} #overlay-message .medium{font: normal 22px Helvetica;} #overlay-message .small{font: italic 14px Helvetica; line-height:28px;} /* colorbox */ #cboxContent {font:13px normal Helvetica, Arial;line-height:15px;} #cboxContent h1{padding-bottom:10px;} #cboxContent h2{border:none;font-size:18px;margin:10px 0 8px 0;color:#484848;} #cboxContent h3{font-size:16px;margin:25px 0 8px 0;border-bottom:1px solid #ccc;} #cboxContent h4{font-size:10px;text-transform:uppercase;margin:8px 0 -3px 0px;color:#808080;} /* graph-library */ #graph-library h4{font-size:12px;margin-bottom: 3px;} #graph-library ul li{font-size:12px;margin-bottom:3px;} #graph-library-topics{height:320px; overflow: auto;} #graph-library-topics div{float:left;width:300px; margin-right:25px;} #graph-library-right{float:left;margin-left:15px;width:220px;overflow:hidden;} #graph-library-right img{display: block;border:1px solid #aaa;}