Browse files

style changes, code cleanup

  • Loading branch information...
1 parent 027d2c8 commit d506e4f80d1d036ed2baa93d0ad37571d885a271 mattg committed Aug 14, 2012
Showing with 360 additions and 1,230 deletions.
  1. +0 −1 _config.yml
  2. +1 −32 _includes/routers/App.js
  3. +0 −5 _includes/views/App.js
  4. +1 −1 _includes/views/Filter.js
  5. +0 −8 _includes/views/Sites.js
  6. +1 −1 index.html
  7. +357 −0 site.css
  8. +0 −1,182 site2.css
View
1 _config.yml
@@ -1,6 +1,5 @@
auto: true
server: true
baseurl: /bb-site
-exclude: [bin, tilemill, data/original-data]
prose:
rooturl: "_posts"
View
33 _includes/routers/App.js
@@ -5,50 +5,19 @@ routers.App = Backbone.Router.extend({
this.app = new views.App({el: '#app'});
},
routes: {
- '': 'home',
'filter': 'filter'
},
- home: function() {
- },
filter: function() {
var sites = new models.Sites();
sites.fetch({
success: function() {
- //console.log(filter.models);
var view = new views.Filter({
collection: sites
});
- console.log(view.el);
- //$('#main').append(view.el);
- }
- });
- }/*,
- project: function(id, country) {
- var project = new models.Project({id: id});
- project.fetch({
- success: function() {
- country && project.set({country: country});
- var view = new views.Project({model: project});
- $('#app').append(view.el);
}
});
- },
- country: function(id, projectId) {
- var router = this;
- var country = new models.Country({id: id});
- country.fetch({
- success: function() {
- if (projectId) {
- return router.project(projectId, country);
- }
- var view = new views.Country({
- model: country
- });
- $('#app').append(view.el);
- }
- });
- }*/
+ }
});
}).apply(this, window.args);
View
5 _includes/views/App.js
@@ -1,11 +1,6 @@
(function(models, views, routers, templates) {
views.App = Backbone.View.extend({
- defaults: {
- map: null,
- interaction: null,
- legend: null
- },
initialize: function(options) {
this.render();
},
View
2 _includes/views/Filter.js
@@ -5,7 +5,7 @@
this.render();
},
render: function() {
- $('#main').append(templates.filter());
+ $('#main').empty().append(templates.filter());
$('#main').append((new views.Sites({
collection: this.collection
View
8 _includes/views/Sites.js
@@ -41,14 +41,6 @@
$('#projects-list', view.el).append(
templates.siteitem(site)
);
- /*
- $('#projects-list li:last .project-details', view.el)
- .append(view.model ?
- templates.projectstats(project.stats(view.model.get('name'))) :
- "<div class='country-count'>" + project.totalCountries()+ "</div>"
- );
- */
-
});
},
View
2 index.html
@@ -8,7 +8,7 @@
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<meta name='apple-mobile-web-app-capable' content='yes' />
- <link rel='stylesheet' href='site2.css' type='text/css' />
+ <link rel='stylesheet' href='site.css' type='text/css' />
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.2/mapbox.css' rel='stylesheet' type='text/css' />
</head>
<body>
View
357 site.css
@@ -0,0 +1,357 @@
+/* ------------------------------------------
+ Reset ♥
+ http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+---------------------------------------------*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+body { line-height: 1; }
+ol, ul { list-style: none; }
+blockquote, q { quotes: none; }
+blockquote:before, blockquote:after,
+q:before, q:after { content: ''; content: none; }
+/* tables still need 'cellspacing='0'' in the markup 3 */
+table { border-collapse: collapse; border-spacing: 0; }
+:focus { outline: 0; }
+
+/* ------------------------------------------
+ Typography ♥
+---------------------------------------------*/
+body {
+ background: #000;
+ font: 13px/20px 'Helvetica Neue',Helvetica,Arial,sans-serif;
+ color: #333;
+ -webkit-font-smoothing: antialiased;
+ /*text-rendering: optimizeLegibility;*/
+ }
+textarea,
+input {
+ background: #fff;
+ font: 13px/20px Arial,Helvetica,freesans,clean,sans-serif;
+ }
+pre,
+code { font:normal 12px/20px monospace; }
+
+h1,h2,h3 {
+ font-weight: bold;
+ margin: 10px 0;
+ }
+h4,h5,h6 {
+ font-weight: bold;
+ margin: 0 0 5px;
+ }
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+ color: #404040;
+ }
+h1 {
+ font-size: 28px;
+ line-height: 30px;
+ margin: 0;
+ }
+a {
+ color: #587088;
+ text-decoration:none;
+ }
+p {
+ margin: 0 0 10px;
+ }
+label {
+ font-weight:bold;
+ }
+strong {
+ font-weight:bold;
+ }
+sup {
+ font-size: 11px;
+ vertical-align: top;
+ position: relative;
+ top: -3px;
+ }
+em {
+ font-style: normal;
+ }
+
+/* ------------------------------------------
+ Layout ♥
+---------------------------------------------*/
+#header {
+ position: absolute;
+ width: 100%;
+ height: 60px;
+ top: 0;
+ left: 0;
+ z-index: 1500;
+ }
+#main {
+ position: relative;
+ top: 60px;
+ width: 600px;
+ margin: 0 auto;
+ }
+#main a.filter {
+ position: absolute;
+ display: block;
+ background: #282828;
+ width: 75px;
+ text-align: center;
+ font-size: 16px;
+ font-weight: bold;
+ border-radius: 3px;
+ padding: 8px 10px;
+ border: 1px solid #333;
+ right: 48%;
+}
+#main a.filter:hover {
+ background: #484848;
+}
+
+/* -------------------------------------------------------
+ * General Styling ♥
+ * ------------------------------------------------------- */
+.dark-gradient {
+ background-color: #202020;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#303030), to(#202020));
+ background-image: -webkit-linear-gradient(top, #303030, #202020);
+ background-image: -moz-linear-gradient(top, #303030, #202020);
+ background-image: -o-linear-gradient(top, #303030, #202020);
+ background-image: linear-gradient(to bottom, #303030, #202020);
+ }
+#header {
+ text-shadow: 0 -1px 0 rgb(0,0,0);
+ -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+ line-height: 60px;
+ }
+ #header a {
+ color: #fff;
+ }
+ #header a em {
+ color: #808080;
+ }
+ #header h1 {
+ float: left;
+ }
+ #header ul {
+ position: absolute;
+ top: 0px;
+ right: 15px;
+ }
+ #header ul li {
+ float: left;
+ margin-left: 10px;
+ }
+ #header ul li a {
+ color: #BBB;
+ font-weight: bold;
+ }
+
+/* -------------------------------------------------------
+ * All Projects ♥
+ * ------------------------------------------------------- */
+.breadcrumb a {
+ font-weight: bold;
+ }
+#by {
+ background: #fff;
+ display: block;
+ font-size: 18px;
+ color: #999;
+ line-height: 22px;
+ padding: 0 15px 15px;
+ }
+.content-heading {
+ background: #fff;
+ padding: 40px 15px 5px;
+ border-radius: 4px 4px 0 0;
+ }
+ .filters {
+ background: #fff;
+ padding: 15px;
+ }
+ .filters #by {
+ float: left;
+ }
+
+.summary,
+.listing li {
+ display: block;
+ }
+ .listing li a {
+ display: block;
+ padding: 0 15px;
+ border-bottom: 1px solid #999;
+ border-left: 1px solid #999;
+ }
+ .listing li a:hover {
+ background-color: #282828;
+ text-decoration: none;
+ }
+ .topic {
+ display: block;
+ padding: 8px 10px;
+ margin: 0;
+ color: #7a99b7;
+ }
+
+.project-intro {
+ width: 583px;
+ border-right: 1px solid #999;
+ float: left;
+ }
+
+/* -------------------------------------------------------
+ * Dropdown ♥
+ * ------------------------------------------------------- */
+.dropdown {
+ float: left;
+ margin-right: 5px;
+ }
+ ul.dropdown,
+ ul.dropdown li {
+ float: left;
+ }
+ ul.dropdown li a.dropdown-toggle {
+ padding: 0 15px 0 30px;
+ display: block;
+ font-weight: bold;
+ text-shadow: 0 1px 0 #fff;
+ background: #f5f5f5 url(images/sprite.png) no-repeat -35px 3px;
+ border: 1px solid #ccc;
+ height: 23px; line-height: 23px;
+ -moz-box-shadow:
+ white 0 1px 0 0,
+ inset rgba(255, 255, 255, 0.90) 0 1px 0 0,
+ inset rgba(255, 255, 255, 0.65) 0 15px 15px 0;
+ box-shadow:
+ white 0 1px 0 0,
+ inset rgba(255, 255, 255, 0.90) 0 1px 0 0,
+ inset rgba(255, 255, 255, 0.65) 0 15px 15px 0;
+ z-index: 10000;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ color: #333;
+ }
+ .dropdown-menu a {
+ display: block;
+ padding: 5px 15px;
+ }
+ .dropdown-menu li a .count {
+ float: right;
+ font-weight: bold;
+ font-size: 11px;
+ color: #666;
+ }
+ ul.dropdown li a.dropdown-toggle:active {
+ -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+ }
+
+ .dropdown-menu {
+ background-color: #fff;
+ visibility: hidden;
+ position: absolute;
+ top: 152px;
+ left: 15px;
+ padding: 5px 0;
+ min-width: 240px;
+ max-width: 280px;
+ _width: 240px;
+ max-height: 240px;
+ overflow: hidden;
+ overflow-y: auto;
+ zoom: 1;
+ z-index: 1000;
+ border: 1px solid #f0f0f0;
+ -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
+ }
+ #country-items {
+ left: 15px;
+ }
+ .dropdown-menu::-webkit-scrollbar {
+ background: transparent;
+ width: 15px;
+ }
+ .dropdown-menu::-webkit-scrollbar-thumb {
+ background: #bbb;
+ border-radius: 15px;
+ border: 5px #fff solid;
+ }
+ ul ul.dropdown-menu li {
+ display: block;
+ float: none;
+ }
+ ul ul.dropdown-menu li a {
+ line-height: 18px;
+ display: block;
+ }
+ .dropdown-menu li a:hover .count {
+ color: #587088;
+ }
+ ul.dropdown-menu li a:hover {
+ background-color: #587088;
+ color: #fff;
+ }
+ ul.dropdown-menu li a:hover .count {
+ color: #fff;
+ }
+
+ .open .dropdown-menu {
+ visibility: inherit;
+ }
+
+/* -------------------------------------------------------
+ * Little Helpers ♥
+ * ------------------------------------------------------- */
+.icon {
+ background-image: url(images/sprite.png);
+ background-repeat: no-repeat;
+ background-position: 0 0;
+ display: block;
+ text-indent: -999em;
+ width: 20px; height: 20px;
+ }
+.clearfix:after {
+ content: '.';
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+ }
+.centered {
+ display: block;
+ text-align: center;
+ }
+* html .clearfix { height: 1%; } /* IE6 */
+*:first-child + html .clearfix { min-height: 1%; } /* IE7 */
View
1,182 site2.css
@@ -1,1182 +0,0 @@
-/* ------------------------------------------
- Reset ♥
- http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
----------------------------------------------*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
- }
-body { line-height: 1; }
-ol, ul { list-style: none; }
-blockquote, q { quotes: none; }
-blockquote:before, blockquote:after,
-q:before, q:after { content: ''; content: none; }
-/* tables still need 'cellspacing='0'' in the markup 3 */
-table { border-collapse: collapse; border-spacing: 0; }
-:focus { outline: 0; }
-
-/* ------------------------------------------
- Typography ♥
----------------------------------------------*/
-body {
- background: #000;
- font: 13px/20px 'Helvetica Neue',Helvetica,Arial,sans-serif;
- color: #333;
- -webkit-font-smoothing: antialiased;
- /*text-rendering: optimizeLegibility;*/
- }
-textarea,
-input {
- background: #fff;
- font: 13px/20px Arial,Helvetica,freesans,clean,sans-serif;
- }
-pre,
-code { font:normal 12px/20px monospace; }
-
-h1,h2,h3 {
- font-weight: bold;
- margin: 10px 0;
- }
-h4,h5,h6 {
- font-weight: bold;
- margin: 0 0 5px;
- }
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
- color: #404040;
- }
-h1 {
- font-size: 28px;
- line-height: 30px;
- margin: 0;
- }
- #header .heading {
- background: transparent url(images/sprite.png) no-repeat 0 -415px;
- font-size: 15px;
- font-weight: bold;
- float: left;
- height: 60px;
- padding-left: 45px;
- }
- #header .heading small {
- margin-left: 15px;
- color: #666;
- }
-
-h2 {
- font-size: 20px;
- line-height: 26px;
- }
- .modal .heading h2 {
- font-size: 16px;
- }
- h1.title,
- h2.title {
- width: 570px;
- float: left;
- padding: 0 15px 0 0;
- margin: 0;
- }
-h3 {
- margin: 0 0 10px;
- font-size: 14px;
- line-height: 20px;
- }
-h4 {
- margin: 10px 0 5px;
- font-size: 14px;
- line-height: 20px;
- }
-small {
- font-size: 11px;
- color: #999;
- }
-a {
- color: #587088;
- text-decoration:none;
- }
- .prose .dropdown a:hover {
- text-decoration: none;
- }
- .prose a:hover {
- color: #333;
- text-decoration: underline;
- }
-.button {
- background-color: #9D0808;
- color: white;
- display: inline-block;
- padding: 0 35px 0 15px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- width: 60px;
- width: auto!important;
- min-width: 60px;
- text-align: center;
- margin: 0 0 10px;
- font-weight: bold;
- line-height: 35px;
- height: 35px;
- position: relative;
- }
- .button:hover {
- color: #fff!important;
- }
-.button span {
- background: transparent url(images/sprite.png) no-repeat 0 -719px;
- display: block;
- width: 10px;
- height: 11px;
- position: absolute;
- top: 10px;
- right: 15px;
- text-indent: -999em;
- }
-p {
- margin: 0 0 10px;
- }
-label {
- font-weight:bold;
- }
-strong {
- font-weight:bold;
- }
-sup {
- font-size: 11px;
- vertical-align: top;
- position: relative;
- top: -3px;
- }
-em {
- font-style: normal;
- }
-
-/* -------------------------------------------------------
- * Post styling
- * ------------------------------------------------------- */
-.jekyll h2 {
- color: #666;
- font-weight: bold;
- font-size: 20px;
- width: 360px;
- line-height: 28px;
- margin: 15px 0;
- }
-.jekyll ul,
-.jekyll ol {
- padding: 0;
- margin: 0 0 9px 25px;
- }
- .jekyll ul {
- list-style-type: disc;
- }
- .jekyll ol {
- list-style-type: decimal;
- }
-.jekyll em {
- font-style: italic;
- }
-
-
-
-/* ------------------------------------------
- Layout ♥
----------------------------------------------*/
-#header {
- position: absolute;
- width: 100%;
- height: 60px;
- top: 0;
- left: 0;
- z-index: 1500;
- }
-#main {
- position: relative;
- top: 60px;
- width: 600px;
- margin: 0 auto;
- }
-.sector-navigation {
- position: absolute;
- z-index: 1000;
- top: 60px;
- }
-#map,
-#overlay {
- position: absolute;
- top: 0; right: 0; bottom: 0; left: 0;
- z-index: 0;
- width: 100%;
- height: 100%;
- }
-.inner {
- padding: 0 15px;
- }
- #overlay {
- z-index: 1001;
- background-color: rgba(0, 0, 0, 0.5);
- }
-
-#header,
-.sector-navigation,
-.all-projects,
-.zoomer,
-.wax-legend {
- -webkit-user-select: none;
- user-select: none;
- }
-
-/* -------------------------------------------------------
- * General Styling ♥
- * ------------------------------------------------------- */
-.rouge-gradient {
- background-color: #9d0808;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#660000));
- background-image: -webkit-linear-gradient(top, #990000, #660000);
- background-image: -moz-linear-gradient(top, #990000, #660000);
- background-image: -o-linear-gradient(top, #990000, #660000);
- background-image: linear-gradient(to bottom, #990000, #660000);
- }
-.grey-gradient {
- background-color: #d3d3d3;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#e0e0e0));
- background-image: -webkit-linear-gradient(top, #e5e5e5, #e0e0e0);
- background-image: -moz-linear-gradient(top, #e5e5e5, #e0e0e0);
- background-image: -o-linear-gradient(top, #e5e5e5, #e0e0e0);
- background-image: linear-gradient(to bottom, #e5e5e5, #e0e0e0);
- }
-.dark-gradient {
- background-color: #202020;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#303030), to(#202020));
- background-image: -webkit-linear-gradient(top, #303030, #202020);
- background-image: -moz-linear-gradient(top, #303030, #202020);
- background-image: -o-linear-gradient(top, #303030, #202020);
- background-image: linear-gradient(to bottom, #303030, #202020);
- }
-#header {
- text-shadow: 0 -1px 0 rgb(0,0,0);
- -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
- line-height: 60px;
- }
- #header a {
- color: #fff;
- }
- #header a em {
- color: #808080;
- }
- #header h1 {
- float: left;
- }
- #header ul {
- position: absolute;
- top: 0px;
- right: 15px;
- }
- #header ul li {
- float: left;
- margin-left: 10px;
- }
- #header ul li a {
- color: #BBB;
- font-weight: bold;
- }
-
-.sector-navigation ul li {
- float: left;
- }
- .sector-navigation a {
- background-color: #555;
- background-color: rgba(85,85,85,0.90);
- background-color: #555!ie;
- margin: 0 1px 1px 0;
- color: #bbb;
- }
- #app .all-projects {
- background-color: #555;
- background-color: rgba(85,85,85,0.90);
- background-color: #555!ie;
- color: #fff;
- -moz-border-radius: 2px 2px 0 0;
- border-radius: 2px 2px 0 0;
- padding: 0 35px 0 15px;
- }
- a.all-projects span {
- background: transparent url(images/sprite.png) no-repeat 0 -377px;
- display: inline-block;
- width: 20px;
- height: 30px;
- position: absolute;
- right: 10px;
- top: 0;
- }
- .sector-navigation a.all {
- -moz-border-radius: 0 0 0 2px;
- border-radius: 0 0 0 2px;
- }
- .sector-navigation a.transport,
- .sector-navigation a.transportation {
- -moz-border-radius: 0 0 2px 0;
- border-radius: 0 0 2px 0;
- }
- a.all-projects,
- .sector-navigation a {
- font-weight: bold;
- display: block;
- padding: 0 15px;
- height: 35px;
- line-height: 35px;
- }
- .sector-navigation a.menu-icon {
- padding-right: 35px;
- }
- .sector-navigation a.active {
- background-color: #fff;
- color: #404040;
- }
- .menu-icon { background-image: url(images/sprite.png); background-repeat: no-repeat; }
- #information-communication { background-position: 210px 7px; }
- #energy-mining { background-position: 125px -27px; }
- #urban-development { background-position: 145px -62px; }
- #water { background-position: 55px -98px; }
- #transportation { background-position: 112px -133px; }
- #transport { background-position: 82px -133px; }
-
- .active#information-communication { background-position: 210px -167px; }
- .active#energy-mining { background-position: 125px -201px; }
- .active#urban-development { background-position: 145px -236px; }
- .active#water { background-position: 55px -272px; }
- .active#transportation { background-position: 112px -306px; }
- .active#transport { background-position: 82px -306px; }
-
-.download {
- position: absolute;
- bottom: 15px;
- right: 15px;
- z-index: 1000;
- }
-.all-projects {
- position: absolute;
- bottom: 0;
- left: 15px;
- z-index: 1000;
- }
-
-/* -------------------------------------------------------
- * All Projects ♥
- * ------------------------------------------------------- */
-.breadcrumb a {
- font-weight: bold;
- }
-#by {
- background: #fff;
- display: block;
- font-size: 18px;
- color: #999;
- line-height: 22px;
- padding: 0 15px 15px;
- }
-.content-heading {
- background: #fff;
- padding: 40px 15px 5px;
- }
- #project .content-heading {
- padding: 40px 15px;
- }
- #project .content-heading {
- padding-top: 15px;
- }
- .filters {
- background: #fff;
- padding: 15px;
- }
- .filters aside {
- position: absolute;
- left: 642px;
- }
- .filters #by {
- float: left;
- }
- aside.country {
- background: #fff;
- float: right;
- width: 300px;
- margin: -50px 45px 0 0;
- }
- .content-heading aside .country-overview > div {
- float: left;
- }
- .label {
- display: block;
- font-size: 11px;
- color: #666;
- font-weight: bold;
- }
- .project-details .label {
- padding: 5px 15px;
- }
-
-.summary,
-.listing li {
- display: block;
- }
- .listing li a {
- display: block;
- padding: 0 15px;
- border-bottom: 1px solid #ccc;
- }
- .listing li a h4 {
- font-weight: bold;
- }
- .listing li a:hover {
- background-color: #efefef;
- text-decoration: none;
- }
- .topic {
- background-image: url(images/sprite.png);
- background-repeat: no-repeat;
- background-position: 0 -161px;
- color: 999;
- display: block;
- padding: 15px 0 0 22px;
- margin: 0;
- }
- .topic.energy-mining { background-position: 0 -195px; }
- .topic.water,
- .topic.water-sanitation-and-flood-protection { background-position: 0 -265px; }
- .topic.urban-development { background-position: 0 -230px; }
- .topic.transport { background-position: 0 -300px; }
- .topic.information-communication { background-position: 0 -160px; }
-
- span.topic,
- span.subtopics {
- background: transparent;
- font: 13px/18px 'Helvetica Neue',Helvetica,Arial,sans-serif;
- color: #999;
- display: block;
- margin: 3px 0 0;
- padding: 0;
- }
- span.subtopics {
- display: inline;
- float: left;
- }
- .listing h4 {
- margin: 0;
- padding: 0;
- }
- .listing a:hover h4 {
- color: #587088;
- }
- .listing .subtopic {
- color: #999;
- margin-bottom: 15px;
- }
-
-.listing .exchanges,
-.listing .connections-total,
-.listing .connection-label {
- display: none;
- }
-.listing .connections {
- margin: 0;
- }
-.listing .connections li {
- background: transparent;
- color: #ccc;
- border: none;
- display: block;
- float: left;
- width: 50px;
- padding: 5px 15px;
- height: auto;
- }
-.listing .connections li .value {
- font-size: 36px;
- line-height: 34px;
- font-weight: bold;
- text-shadow: none;
- display: inline;
- color: #ccc;
- }
-.country-count,
-.listing .connections li {
- font-size: 42px;
- line-height: 80px;
- font-weight: bold;
- color: #ccc;
- text-shadow: none;
- }
-.country-count {
- margin-left: 15px;
- line-height: 80px;
- }
-
-/* -------------------------------------------------------
- * A Project ♥
- * ------------------------------------------------------- */
-span.id {
- font-weight: normal;
- color: #999;
- font-size: 12px;
- opacity: 0;
- transition: opacity .4s;
- -moz-transition: opacity .4s;
- -webkit-transition: opacity .4s;
- -o-transition: opacity .4s;
- }
-:hover > span.id {
- opacity: 1;
- }
-area .exchanges,
-area .connections-total {
- padding: 5px 15px 0px;
- margin-bottom: -5px;
- -moz-border-radius: 2px 0 0 2px;
- border-radius: 2px 0 0 2px;
- background-color: #f7f7f7;
- }
-area .connections-total {
- border-top: none;
- padding: 5px 15px 10px;
- }
-.connections {
- margin-top: 5px;
- }
-.connections li,
-.connections div.value {
- display: block;
- float: left;
- width: 70px;
- padding: 10px 15px 15px;
- height: 55px;
- }
- .seeking { background-color: #deebf7; }
- .providing { background-color: #9ecae1; }
- .both { background-color: #4292c6; }
-
- .seeking {
- -moz-border-radius: 0 0 0 2px;
- border-radius: 0 0 0 2px;
- }
- aside .seeking {
- -moz-border-radius: 2px 0 0 2px;
- border-radius: 2px 0 0 2px;
- }
- .both {
- -moz-border-radius: 0 0 2px 0;
- border-radius: 0 0 2px 0;
- }
- aside .both {
- -moz-border-radius: 0 2px 2px 0;
- border-radius: 0 2px 2px 0;
- }
-.connections .value {
- font-size: 36px;
- line-height: 34px;
- font-weight: bold;
- display: block;
- color: #000;
- color: rgba(255,255,255,1.0);
- text-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
- }
-
-.project-exchanges h3 {
- border-bottom: 1px solid #ccc;
- padding: 15px 15px 10px;
- margin: 0;
- }
-.project-exchanges ul {
- float: left;
- width: 50%;
- }
- .project-exchanges ul li {
- border-top: 1px solid #ccc;
- padding: 5px 15px;
- }
- .project-exchanges ul li:first-child {
- border: none;
- }
-
-/* Single exchange entries */
-.project-exchanges .exchange {
- border-bottom: 1px solid #ddd;
- padding: 15px 0;
- }
- .project-exchanges .exchange .inner {
- padding: 0 360px 0 15px;
- }
- .project-exchanges .exchange .instrument {
- font-weight: bold;
- }
- .project-exchanges .exchange .summary {
- float: right;
- margin-right: -330px;
- width: 330px;
- margin-bottom: 10px;
- margin-left: 15px;
- color: #666;
- }
- .project-exchanges .exchange-one .connection {
- border-bottom: 1px solid #e5e5e5;
- padding: 5px 0;
- }
- .project-exchanges .exchange-one .connection.last {
- border: none;
- }
- .project-exchanges .exchange-one .partner {
- width: 50%;
- float: left;
- }
- .project-exchanges .exchange-one .partner.provider {
- clear: left;
- }
-
-.project-details li {
- float: left;
- border-right: 1px solid #BBB;
- padding: 5px 15px;
- width: 50px;
- }
-
-/* Project Columns */
-.project-heading {
- font-weight: bold;
- }
- .project-heading div {
- color: #666;
- font-size: 11px;
- }
- .project-heading .project-intro {
- border-color: #333;
- padding: 5px 0 5px 15px;
- }
-.project-intro {
- width: 584px;
- border-right: 1px solid #CCC;
- }
-.project-exchanges .connections,
-.project-exchanges .connections a {
- color: #999;
- }
-.project-exchanges a.highlight {
- font-weight: bold;
- color: #587088;
- }
-.project-intro,
-.project-details {
- float: left;
- }
-
-.instrument h6 {
- margin: 0;
- float: left;
- }
-.instrument a.instrument-description {
- background: transparent url(images/sprite.png) no-repeat 0 -485px;
- display: block;
- width: 18px;
- height: 18px;
- border: 1px solid #f7f7f7;
- text-indent: -999em;
- float: left;
- -moz-border-radius: 2px;
- border-radius: 2px;
- margin-right: 5px;
- }
- .instrument a.instrument-description.active {
- background-position: 0 -505px;
- }
-
-.popup {
- font-size: 13px;
- clear: both;
- display: none;
- }
- .popup.active {
- display: block;
- }
-
-.project-exchanges .exchange .popup .inner {
- padding: 8px 15px;
- }
-.popup a.close-popup {
- position: absolute;
- top: 0;
- right: 0;
- }
-
-/* -------------------------------------------------------
- * Map Elements ♥
- * ------------------------------------------------------- */
-.wax-tooltip {
- background: #fff;
- position: absolute;
- z-index: 2000;
- width: 300px;
- left: -300px;
- padding: 15px 0 0;
- margin-left: -150px;
- -webkit-user-select:auto;
- -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- -moz-background-clip: padding-box;
- background-clip: padding-box;
- opacity:1;
- -webkit-transition:opacity 150ms;
- -moz-transition:opacity 150ms;
- -moz-border-radius: 2px;
- border-radius: 2px;
- }
- .wax-fade { opacity:0; }
- .wax-tooltip:after {
- content: '';
- width: 0;
- height: 0;
- position: absolute;
- left: 50%;
- margin-left: -10px;
- bottom: -10px;
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-top: 10px solid #9ecae1;
- }
- .wax-tooltip.flip:after {
- display: none;
- }
- .wax-tooltip.flip:before {
- content: '';
- width: 0;
- height: 0;
- position: absolute;
- left: 50%;
- margin-left: -10px;
- top: -10px;
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-bottom: 10px solid #fff;
- }
-
-/*resetting*/
-.wax-tooltip h2,
-.wax-tooltip h4,
-.wax-tooltip .section,
-.wax-tooltip .exchanges {
- margin: 0;
- padding: 0;
- font-weight: normal;
- }
- .exchanges,
- .connections-total,
- .modal h4,
- .wax-tooltip .total,
- .wax-tooltip h4 {
- font-size: 14px;
- line-height: 18px;
- display: block;
- text-transform: capitalize;
- font-weight: normal;
- }
- .modal h4,
- .wax-tooltip h4 {
- display: inline-block;
- }
- .wax-tooltip h4 {
- color: #333;
- }
- .wax-tooltip h2 {
- font-weight: bold;
- line-height: 22px;
- margin-bottom: 5px;
- }
- .wax-tooltip .section.total,
- .wax-tooltip .section.heading {
- padding: 0 10px;
- }
- .wax-tooltip .section.connections {
- margin-top: 15px;
- }
-
-.wax-legends {
- background-color: #303030;
- background-color: rgba(40,40,40,0.80);
- background-image: url(images/legend.png);
- background-repeat: no-repeat;
- background-position: 15px 15px;
- position: absolute;
- z-index: 1000;
- right: 15px;
- bottom: 15px;
- color: #bbb;
- padding: 15px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- }
-
-.wb-legend-connections {
- padding-left: 75px;
- }
- .wb-legend-connections li {
- color: #fff;
- }
-
-.zoomer {
- display: block;
- position: absolute;
- top: 75px; right: 15px;
- z-index: 5000;
- width: 30px; height: 30px;
- line-height: 30px;
- font-weight: bold;
- color: #bbb;
- background-color: #555;
- background-color: rgba(85, 85, 85, 0.90);
- background-color: #555!ie;
- text-align: center;
- -moz-border-radius: 2px 2px 0 0;
- border-radius: 2px 2px 0 0;
- }
- .zoomer:hover { color: #fff; }
- .zoomout {
- top: 104px;
- border-top: 1px solid #202020;
- -moz-border-radius: 0 0 2px 2px;
- border-radius: 0 0 2px 2px;
- }
- .zoomer:active {
- background-color: #333;
- box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
- -moz-box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
- -webkit-box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
- }
-
-.map-tile-loaded {
- -webkit-animation-name: fade-in;
- -moz-animation-name: fade-in;
- -ms-animation-name: fade-in;
- -o-animation-name: fade-in;
- -webkit-animation-timing-function: linear;
- -moz-animation-timing-function: linear;
- -ms-animation-timing-function: linear;
- -o-animation-timing-function: linear;
- -webkit-animation-duration: .25s;
- -moz-animation-duration: .25s;
- -ms-animation-duration: .25s;
- -o-animation-duration: .25s;
- }
-@-webkit-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
-@-moz-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
-@-ms-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
-@-o-keyframes fade-in { from { opacity:0; } to { opacity:1; } }
-
-/* -------------------------------------------------------
- * My little modal ♥
- * ------------------------------------------------------- */
-.modal {
- background: #fff;
- position: fixed;
- left: 50%;
- top: 50%;
- width: 800px;
- height: 440px;
- margin: -220px 0 0 -400px;
- -moz-box-shadow: 0 0 40px rgba(0,0,0,1);
- box-shadow: 0 0 40px rgba(0,0,0,1);
- z-index: 5000;
- overflow: hidden;
- overflow-y: auto;
- -webkit-transform: translate3d(0, 0, 0);
- -moz-border-radius: 2px;
- border-radius: 2px;
- *zoom: 1;
- -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
- -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
- -ms-transition: opacity 0.3s linear, top 0.3s ease-out;
- -o-transition: opacity 0.3s linear, top 0.3s ease-out;
- transition: opacity 0.3s linear, top 0.3s ease-out;
- }
- .big-modal .modal {
- background-color: #f7f7f7;
- width: 960px;
- height: 480px;
- margin: -240px 0 0 -480px;
- z-index: 3000;
- }
- /*Displaced Models*/
- #project.modal {
- margin-top: -207px;
- margin-left: -465px;
- -moz-box-shadow: 0 0 6px rgba(0,0,0,0.3);
- box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
- border: 1px solid #ccc;
- z-index: 4000;
- }
- .modal.bye {
- /* Just display none for IE6-8 */
- display: none\9;
- top: 45%;
- opacity: 0;
- }
- .modal .heading {
- background: #fff;
- border-bottom: 1px solid #ccc;
- -moz-border-radius: 2px 2px 0 0;
- border-radius: 2px 2px 0 0;
- height: 40px;
- line-height: 40px;
- }
- .modal .heading .title {
- padding: 0;
- margin: 0;
- line-height: 39px;
- font-weight: bold;
- }
-
- .modal > .close {
- font: 13px/20px Arial,sans-serif;
- background: #202020;
- display: block;
- color: #fff;
- font-weight: normal;
- position: absolute;
- z-index: 1000;
- top: 5px; right: 5px;
- width: 30px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- font-size: 20px;
- text-shadow: 0 -1px 0 #000;
- -moz-border-radius: 2px;
- border-radius: 2px;
- }
- .modal > .close:active {
- background: #000;
- }
- .modal .content {
- height: 399px;
- overflow: hidden;
- overflow-y: auto;
- }
- .jekyll #modal-content {
- padding: 15px;
- }
- .big-modal .modal .content {
- height: 438px;
- margin: 0;
- padding: 0;
- }
-
-/* -------------------------------------------------------
- * Home modal ♥
- * ------------------------------------------------------- */
-#home .content {
- padding-right: 80px;
- }
-#home.modal {
- background: #fff url(images/beta-ribbon.png) no-repeat 700px 40px;
- }
-
-/* -------------------------------------------------------
- * Download data modal ♥
- * ------------------------------------------------------- */
-#getdata .download-csv,
-#getdata .tos {
- float: left;
- }
-#getdata .tos {
- margin: 8px 0 0 5px;
- }
-.button.download-csv span {
- width: 15px;
- height: 15px;
- background-position: 0 -350px;
- }
-
-/* -------------------------------------------------------
- * Dropdown ♥
- * ------------------------------------------------------- */
-.dropdown {
- float: left;
- margin-right: 5px;
- }
- ul.dropdown,
- ul.dropdown li {
- float: left;
- }
- ul.dropdown li a.dropdown-toggle {
- padding: 0 15px 0 30px;
- display: block;
- font-weight: bold;
- text-shadow: 0 1px 0 #fff;
- background: #f5f5f5 url(images/sprite.png) no-repeat -35px 3px;
- border: 1px solid #ccc;
- height: 23px; line-height: 23px;
- -moz-box-shadow:
- white 0 1px 0 0,
- inset rgba(255, 255, 255, 0.90) 0 1px 0 0,
- inset rgba(255, 255, 255, 0.65) 0 15px 15px 0;
- box-shadow:
- white 0 1px 0 0,
- inset rgba(255, 255, 255, 0.90) 0 1px 0 0,
- inset rgba(255, 255, 255, 0.65) 0 15px 15px 0;
- z-index: 10000;
- -moz-border-radius: 4px;
- border-radius: 4px;
- color: #333;
- }
- .dropdown-menu a {
- display: block;
- padding: 5px 15px;
- }
- .dropdown-menu li a .count {
- float: right;
- font-weight: bold;
- font-size: 11px;
- color: #666;
- }
- ul.dropdown li a.dropdown-toggle:active {
- -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
- }
-
- .dropdown-menu {
- background-color: #fff;
- visibility: hidden;
- position: absolute;
- top: 200px;
- left: 15px;
- padding: 5px 0;
- min-width: 240px;
- max-width: 280px;
- _width: 240px;
- max-height: 240px;
- overflow: hidden;
- overflow-y: auto;
- zoom: 1;
- z-index: 1000;
- border: 1px solid #f0f0f0;
- -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- -moz-background-clip: padding-box;
- background-clip: padding-box;
- }
- #subtopic-items {
- left: 100px;
- }
- #country-items {
- left: 18px;
- }
- .dropdown-menu::-webkit-scrollbar {
- background: transparent;
- width: 15px;
- }
- .dropdown-menu::-webkit-scrollbar-thumb {
- background: #bbb;
- border-radius: 15px;
- border: 5px #fff solid;
- }
- ul ul.dropdown-menu li {
- display: block;
- float: none;
- }
- ul ul.dropdown-menu li a {
- line-height: 18px;
- display: block;
- }
- .dropdown-menu li a:hover .count {
- color: #587088;
- }
- ul.dropdown-menu li a:hover {
- background-color: #587088;
- color: #fff;
- }
- ul.dropdown-menu li a:hover .count {
- color: #fff;
- }
-
- .open .dropdown-menu {
- visibility: inherit;
- }
-
-/* ------------------------------------------
- Pages: 404 Error Page
----------------------------------------------*/
-.error-page {
- position: absolute;
- height: 240px;
- width: 240px;
- left: 50%; top: 50%;
- margin: -120px 0 0 -120px;
- }
-.error-page h2 {
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
- color: #404040;
- text-align: center;
- font-size: 135px;
- line-height: 135px;
- display: block;
- margin: 0;
- }
-.error-page .message {
- font-size: 35px;
- line-height: 44px;
- color: #666;
- text-align: center;
- }
-.error-page .button {
- padding: 0 15px;
- margin: 10px 0 0 40px;
- }
-
-/* -------------------------------------------------------
- * Little Helpers ♥
- * ------------------------------------------------------- */
-.icon {
- background-image: url(images/sprite.png);
- background-repeat: no-repeat;
- background-position: 0 0;
- display: block;
- text-indent: -999em;
- width: 20px; height: 20px;
- }
-.clearfix:after {
- content: '.';
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
- }
-.centered {
- display: block;
- text-align: center;
- }
-* html .clearfix { height: 1%; } /* IE6 */
-*:first-child + html .clearfix { min-height: 1%; } /* IE7 */

0 comments on commit d506e4f

Please sign in to comment.