507 lines
8.8 KiB
CSS
507 lines
8.8 KiB
CSS
|
/* CSS Document */
|
||
|
|
|
||
|
|
.clearfix:before,
|
||
|
|
.clearfix:after {
|
||
|
|
content: " ";
|
||
|
|
display: table;
|
||
|
|
}
|
||
|
|
.clearfix:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
.clearfix {
|
||
|
|
*zoom: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font: normal normal 400 14px/145% "Roboto", Tahoma, Geneva, "Trebuchet MS", Helvetica, sans-serif;
|
||
|
|
padding: 0 0 5em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font: normal normal 300 3em/140% "Roboto", Tahoma, Geneva, "Trebuchet MS", Helvetica, sans-serif;
|
||
|
|
margin: 1em 0 .5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #6bc32d;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: #3f7c14;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.container {
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 1170px;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.container section {
|
||
|
|
margin-top: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
background-color: #333333;
|
||
|
|
background: linear-gradient(to bottom, #d0d0d0 0%,#f0f0f0 100%);
|
||
|
|
border-bottom: 1px solid #ccc;
|
||
|
|
color: #333;
|
||
|
|
height: 80px;
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
header.fixed {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > nav {
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > nav a {
|
||
|
|
background-color: transparent;
|
||
|
|
color: #666;
|
||
|
|
display: block;
|
||
|
|
height: 80px;
|
||
|
|
line-height: 100px;
|
||
|
|
padding: 0 1em;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: 250ms background-color linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > nav > ul > li:hover > a,
|
||
|
|
header > nav a:hover {
|
||
|
|
background-color: #ccc;
|
||
|
|
color: #1a1a1a;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > nav > ul > li.active > a,
|
||
|
|
header > nav > ul > li.active:hover > a,
|
||
|
|
header > nav .active a:hover {
|
||
|
|
background-color: #666;
|
||
|
|
color: #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > nav a > i {
|
||
|
|
font-size: 1.5em;
|
||
|
|
margin-right: .25em;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > nav > .logo {
|
||
|
|
background: transparent url("../img/world_data_logo.png") no-repeat 0 0%;
|
||
|
|
float: left;
|
||
|
|
font-size: 2em;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 1000px;
|
||
|
|
margin-right: 2em;
|
||
|
|
overflow: hidden;
|
||
|
|
width: 150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > nav > .logo:hover {
|
||
|
|
background-color: transparent;
|
||
|
|
background-position: 0 -80px;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > nav > ul {
|
||
|
|
float: left;
|
||
|
|
list-style: none none inside;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > nav > ul > li {
|
||
|
|
border-right: 1px solid #ccc;
|
||
|
|
display: inline-block;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > nav > ul > li:first-child {
|
||
|
|
border-left: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a#pull {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rest-api-block {
|
||
|
|
background-color: #fcfcfc;
|
||
|
|
border-bottom-left-radius: 5px;
|
||
|
|
border-bottom-right-radius: 5px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-top-color: #6bc32d;
|
||
|
|
box-shadow: 0px 2px 6px #ddd;
|
||
|
|
padding: 1em;
|
||
|
|
width: 25%;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rest-api-block h2 {
|
||
|
|
font-size: 1.4em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rest-api-block p {
|
||
|
|
margin: 0.5em 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rest-api-block p.sep {
|
||
|
|
border-top: 1px dashed #ccc;
|
||
|
|
margin-top: 2em;
|
||
|
|
padding-top: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rest-api-block p > label {
|
||
|
|
color: #a1a1a1;
|
||
|
|
display: block;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rest-api-block p > input {
|
||
|
|
background-color: #fafafa;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 3px;
|
||
|
|
display: block;
|
||
|
|
font-size: 1.2em;
|
||
|
|
padding: .1em;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.submit {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.submit > input {
|
||
|
|
background-color: #333333;
|
||
|
|
background: linear-gradient(to bottom, #66cc33 0%,#339900 100%);
|
||
|
|
border: 1px solid #339900;
|
||
|
|
border-radius: 2px;
|
||
|
|
color: #fff;
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 1em;
|
||
|
|
line-height: 1.4em;
|
||
|
|
padding: .4em .9em;
|
||
|
|
text-align: center;
|
||
|
|
white-space: nowrap;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
.green_btn {
|
||
|
|
width: 45%;
|
||
|
|
background-color: #333333;
|
||
|
|
background: linear-gradient(to bottom, #66cc33 0%,#339900 100%);
|
||
|
|
color: #fff;
|
||
|
|
cursor: pointer;
|
||
|
|
font: 99% sans-serif;
|
||
|
|
line-height: 1.4em;
|
||
|
|
text-align: center;
|
||
|
|
white-space: nowrap;
|
||
|
|
vertical-align: middle;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 3px;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 1.2em;
|
||
|
|
padding: .1em;
|
||
|
|
margin: 0.5em 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info_box {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 6px 12px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 1.42857143;
|
||
|
|
text-align: center;
|
||
|
|
white-space: nowrap;
|
||
|
|
vertical-align: middle;
|
||
|
|
-ms-touch-action: manipulation;
|
||
|
|
touch-action: manipulation;
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-ms-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
background-image: none;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius: 4px;
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.failure {
|
||
|
|
color: #fff;
|
||
|
|
background-color: #d9534f;
|
||
|
|
border-color: #d43f3a;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
color: #fff;
|
||
|
|
background-color: #5cb85c;
|
||
|
|
border-color: #4cae4c;
|
||
|
|
}
|
||
|
|
.warning {
|
||
|
|
color: #fff;
|
||
|
|
background-color: #f0ad4e;
|
||
|
|
border-color: #eea236;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-ctrl {
|
||
|
|
color: #999;
|
||
|
|
margin: 1.5em 0 .5em;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-ctrl > div {
|
||
|
|
float: left;
|
||
|
|
margin-right: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-ctrl > div.right {
|
||
|
|
float: right;
|
||
|
|
margin-left: 2em;
|
||
|
|
margin-right: 0;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-ctrl > div > p {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-ctrl > div > ul {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-ctrl > div > ul > li {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-ctrl > div > ul > li:before {
|
||
|
|
content: " | ";
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-ctrl > div > ul > li:first-child:before {
|
||
|
|
content: "";
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-ctrl > div > ul > li > a.active {
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
table {
|
||
|
|
border-collapse: collapse;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
table > thead > tr > th,
|
||
|
|
table > tbody > tr > td {
|
||
|
|
padding: .75em .4em .75em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
table > thead > tr > th {
|
||
|
|
border-bottom: 3px solid #ccc;
|
||
|
|
font-size: 1.2em;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
table > thead > tr > th.actions {
|
||
|
|
width: 11em;
|
||
|
|
}
|
||
|
|
|
||
|
|
table > tbody > tr > td {
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
table > tbody > tr > td.actions {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
table > tbody > tr > td > img {
|
||
|
|
float: left;
|
||
|
|
margin-right: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
table > tbody > tr > td.actions > a {
|
||
|
|
font-size: 1.5em;
|
||
|
|
margin-left: .3em;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer > .container {
|
||
|
|
border-top: 1px solid #6bc32d;
|
||
|
|
color: #666;
|
||
|
|
font-size: .9em;
|
||
|
|
margin-top: 5em;
|
||
|
|
padding: 1em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer > .container > div {
|
||
|
|
float: left;
|
||
|
|
width: 48%;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer > .container > div.right {
|
||
|
|
float: right;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Media Queries */
|
||
|
|
|
||
|
|
/********************************************************
|
||
|
|
**************** menu *********************************
|
||
|
|
*********************************************************/
|
||
|
|
|
||
|
|
/* only if you like to broke up the menu in two lines:
|
||
|
|
|
||
|
|
@media screen and (max-width: 815px) {
|
||
|
|
nav {
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
nav ul {
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
nav li {
|
||
|
|
width: 50%;
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
nav li a {
|
||
|
|
border-bottom: 1px solid #576979;
|
||
|
|
border-right: 1px solid #576979;
|
||
|
|
}
|
||
|
|
nav a {
|
||
|
|
text-align: left;
|
||
|
|
width: 100%;
|
||
|
|
text-indent: 25px;
|
||
|
|
}
|
||
|
|
}*/
|
||
|
|
@media only screen and (max-width : 815px) {
|
||
|
|
div.container section {
|
||
|
|
margin-top: 0px;
|
||
|
|
}
|
||
|
|
nav {
|
||
|
|
height: auto;
|
||
|
|
border-bottom: 0;
|
||
|
|
}
|
||
|
|
header {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
header > nav > ul {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
nav ul {
|
||
|
|
width: 100%;
|
||
|
|
display: none;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
nav a#pull {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
nav ul li {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
header > nav a {
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
}
|
||
|
|
nav a {
|
||
|
|
text-align: left;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
nav > a.logo {
|
||
|
|
height: 80px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media only screen and (min-width : 816px) {
|
||
|
|
nav ul {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media only screen and (max-width : 320px) {
|
||
|
|
nav li {
|
||
|
|
display: block;
|
||
|
|
float: none;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
nav li a {
|
||
|
|
border-bottom: 1px solid #576979;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/********************************************************
|
||
|
|
**************** large devices ************************
|
||
|
|
*********************************************************/
|
||
|
|
@media (max-width:1280px) {
|
||
|
|
|
||
|
|
/* hi-res laptops and desktops */
|
||
|
|
|
||
|
|
}
|
||
|
|
@media (max-width:1024px) {
|
||
|
|
|
||
|
|
/* big landscape tablets, laptops, and desktops */
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 1024px;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/********************************************************
|
||
|
|
**************** medium devices *********************
|
||
|
|
*********************************************************/
|
||
|
|
@media (max-width:960px) {
|
||
|
|
|
||
|
|
/* tablet, landscape iPad, lo-res laptops ands desktops */
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 960px;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width:640px) {
|
||
|
|
|
||
|
|
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 640px;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/********************************************************
|
||
|
|
**************** small devices ************************
|
||
|
|
*********************************************************/
|
||
|
|
@media (max-width:480px) {
|
||
|
|
|
||
|
|
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 480px;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width:319px) {
|
||
|
|
|
||
|
|
/* smartphones, iPhone, portrait 480x320 phones */
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 319px;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
}
|