Private
Public Access
1
0
Files
rowsandall/static/css/rowsandall.css
Sander Roosendaal 357193c9c8 next steps in training plan/target
- delete cycles
- change user
2018-09-10 15:10:43 +02:00

910 lines
15 KiB
CSS

#main {
background-color: transparent;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 759px;
min-width: 1024px;
width: 100%;
height: auto;
}
.one {
background-image: url("/static/img/landing1.jpg");
}
.two {
background-image: url("/static/img/landing1.jpg");
}
.three {
background-image: url("/static/img/landing2.jpg");
}
.four {
background-image: url("/static/img/landing8b.jpg");
}
.watermark {
position: absolute;
float: center;
opacity: 0.25;
font-size: 3em;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-25%) translateY(-50%);
text-align: center;
vertical-align: middle;
z-index: 1000;
}
.invisible {
display: none
}
html {
font-size: 62.5%;
}
body {
/* background: #edc; */
color: #333;
font-size: 1.2em;
height: auto;
padding-bottom: 20px;
}
.notyellow {
font-size: 1.2em;
height: auto;
padding: 0px;
}
.yellow {
color: #cccc00;
font-size: 1.2em;
height: auto;
padding: 0px;
}
a {
/* color: #fff; */
text-decoration: none;
}
a:visited { color:#000; }
a:link { color: #000; }
a:hover {
text-decoration: underline;
}
@media print {
h1 {
page-break-before: always;
page-break-after: avoid;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote, table {
page-break-inside: avoid;
}
}
h1 {
/* font-family: Georgia, serif; */
font-weight: normal;
/* padding-top: 20px; */
text-align: left;
font-size: 2em;
}
h2 {
/* padding-top: 20px; */
font-weight: normal;
text-align: left;
font-size: 1.5em;
}
h3 {
/* padding-top: 20px; */
font-weight: normal;
text-align: left;
font-size: 1em;
}
h3 {
/* padding-top: 20px; */
font-weight: normal;
text-align: left;
font-size: 1em;
}
p {
/* border: 1px solid #666; */
overflow: hidden;
/* padding: 10px 0; */
text-align: left;
}
th {
font-weight: bold;
}
cox {
/* font-family: Georgia, serif; */
font-weight: normal;
/* padding-top: 20px; */
text-align: center;
font-size: 2em;
}
.listtable tbody tr:nth-of-type(even) { background-color: #DDD; }
.listtable thead th {
font-weight: bold;
}
.shortpadded td { padding: 3px 3px }
.paddedtable td { padding: 1px 20px }
.cortable {
border-collapse: collapse;
}
.cortable td {
border: 1px solid #999;
text-align: center;
}
th.rotate {
/* Something you can count on */
height: 78px;
white-space: nowrap;
}
th.rotate > div {
transform:
/* Magic Numbers */
translate(18px, 51px)
/* 45 is really 360 - 45 */
rotate(315deg);
width: 30px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 5px;
}
.fixtable table {
table-layout: fixed;
width: 60%;
}
.message {
border: 1px solid #000;
background-color: #f88;
font-weight: bold;
color: #000;
text-align: center;
}
.midden { text-align: center }
.poscor {
background-color: #8f8;
}
.weakposcor {
background-color: #efe;
}
.negcor {
background-color:#f88;
}
.weaknegcor {
background-color: #fee;
}
.successmessage {
border: 1px solid #000;
background-color: #8f8;
color: #000;
text-align: center;
font-weight: bold;
}
.deletelink {
border: 1px solid #000;
background-color: #f88;
color: #000;
text-align: center;
font-weight: bold;
}
.navbar {
border: 1px solid #666;
color: #000;
overflow: hidden;
background-color: #ddd;
/* padding: 10px 0; */
text-align: center;
}
.navbutton {
background-color: #ddd;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 2px solid #666;
padding: 5px;
text-align: center;
}
.transparentbutton {
padding: 1px;
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #ffff66;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
/* Position the tooltip */
position: absolute;
z-index: 999;
}
.tooltip:hover .tooltiptext {
visibility: visible;
transition-delay:1s;
}
.caption {
text-align: center;
}
.site-announcement-box {
padding: .2em .5em .2em 0em;
}
.site-announcement {
font: 1.1em/1.5em sans-serif;
text-decoration: none;
display: block;
padding: .2em .5em .2em .5em;
zoom: 1;
/* border-radius: .5em; */
/* -moz-border-radius: .5em; */
/* -webkit-border-radius: .5em; */
text-align: left;
border: solid 1px #333;
}
.dot {
border-radius: 50%;
display: block;
text-align: center;
width: 25px;
height: 25px;
border: solid 1px #333;
}
.dot:hover {
text-decoration: none;
}
.button {
font: 1.1em/1.5em sans-serif;
text-decoration: none;
display: block;
/* width: 100%; */
color: white;
padding: 0.2em 0.0em 0.2em 0.0em;
zoom: 1;
/* border-radius: .5em; */
/* -moz-border-radius: .5em; */
/* -webkit-border-radius: .5em; */
/* -box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
/* -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
/* -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); /*
/* text-shadow: 0 -1px 1px rgba(0,0,0,0.25); */
text-align: center;
}
.input {
font: 1.1em/1.5em sans-serif;
text-decoration: none;
display: block;
/* width: 100%; */
color: white;
padding: 0.2em 0.0em 0.2em 0.0em;
zoom: 1;
border-radius: .5em;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
/* -box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
/* -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
/* -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
/* text-shadow: 0 -1px 1px rgba(0,0,0,0.25); */
text-align: center;
}
a.button {
color: white;
}
.button:hover {
background: #d8e6ff; /* old browsers */
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.bigrounded {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.medium {
font-size: 1.2em;
}
.small {
font-size: 1.0em;
}
/* black */
.black {
color: #d7d7d7;
border: solid 1px #333;
background: #333;
}
.black:hover {
background: #000;
}
.black:active {
color: #666;
}
/* gray */
.blue {
color: #e9e9e9;
border: solid 1px #555;
background: #6e6e6e;
}
.blue:hover {
background: #616161;
}
.blue:active {
color: #afafaf;
}
/* white */
.white {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
}
.white:hover {
background: #ededed;
}
.white:active {
color: #999;
}
/* orange */
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
}
.orange:hover {
background: #f47c20;
}
.orange:active {
color: #fcd3a5;
}
/* red */
.red {
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
}
.red:hover {
background: #b61318;
}
.red:active {
color: #de898c;
}
/* blue */
.graytext {
color: #27aae2;
}
.gray {
color: #fae7e9;
border: solid 1px #27aae2;
background: #27aae2;
}
.gray:hover {
background: #1c74bb;
border: solid 1px #27aae2;
}
.gray:active {
color: #ffffff;
}
/* rosy */
.rosy {
color: #fae7e9;
border: solid 1px #b73948;
background: #da5867;
}
.rosy:hover {
background: #ba4b58;
}
.rosy:active {
color: #dca4ab;
}
/* green */
.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
}
.green:hover {
background: #538018;
}
.green:active {
color: #a9c08c;
}
/* palegreen */
.palegreen {
background: palegreen;
box-shadow:inset 0px 0px 0px 6px #fff;
-moz-box-shadow:inset 0px 0px 0px 6px #fff;
box-shadow:inset 0px 0px 0px 6px #fff;
}
/* paleblue */
.paleblue {
# padding: 8px;
background: aliceblue;
box-shadow:inset 0px 0px 0px 6px #fff;
-moz-box-shadow:inset 0px 0px 0px 6px #fff;
box-shadow:inset 0px 0px 0px 6px #fff;
}
/* lightsalmon */
.lightsalmon {
# padding: 4px;
background: lightsalmon;
box-shadow:inset 0px 0px 0px 6px #fff;
-moz-box-shadow:inset 0px 0px 0px 6px #fff;
box-shadow:inset 0px 0px 0px 6px #fff;
}
/* filler */
.filler {
background: darkgray;
box-shadow:inset 0px 0px 0px 6px #fff;
-moz-box-shadow:inset 0px 0px 0px 6px #fff;
box-shadow:inset 0px 0px 0px 6px #fff;
}
.padded {
padding: 10px;
}
/* pink */
.pink {
color: #feeef5;
border: solid 1px #d2729e;
background: #f895c2;
}
.pink:hover {
background: #d57ea5;
}
.pink:active {
color: #f3c3d9;
}
.greenbar {
border: 1px solid #666;
color: #000;
overflow: hidden;
background-color: #8f8;
/* padding: 10px 0; */
text-align: center;
}
#footer {
text-align:center;
}
.container_12,
.container_16,
.container_24 {
background-color: #fff;
background-repeat: repeat-y;
/* margin-bottom: 20px; */
}
.container_12 {
/* background-image: url(../img/12_col.gif); */
}
/* Style The Dropdown Button */
.dropbtn {
color: white;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
z-index: 999;
}
/* Links inside the dropdown */
.dropdown-content a {
text-decoration: none;
display: block;
z-index: 999;
}
/* Change color of dropdown links on hover */
/* .dropdown-content a:hover {background-color: #f1f1f1} */
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.flexplot {
position: relative;
z-index: 10;
}
a.wh:link {
color: #e9e9e9;
}
a.wh:visited {
color: #e9e9e9;
}
a.wh:hover {
color: #e9e9e9;
}
.bk-canvas-map {
overflow: hidden;
}
/* container */
.container {
padding: 5% 5%;
}
/* CSS talk bubble */
.talk-bubble {
margin: 40px;
display: inline-block;
position: relative;
width: 200px;
height: auto;
background-color: lightyellow;
}
.border{
border: 8px solid #666;
}
.round{
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -40px;
right: auto;
top: -8px;
bottom: auto;
border: 32px solid;
border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -20px;
right: auto;
top: 0px;
bottom: auto;
border: 22px solid;
border-color: lightyellow transparent transparent transparent;
}
/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -40px;
right: auto;
top: 30px;
bottom: auto;
border: 20px solid;
border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -20px;
right: auto;
top: 38px;
bottom: auto;
border: 12px solid;
border-color: lightyellow lightyellow transparent transparent;
}
/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -8px;
right: auto;
top: auto;
bottom: -40px;
border: 32px solid;
border-color: transparent transparent transparent #666;
}
.tri-right.btm-left:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
right: auto;
top: auto;
bottom: -20px;
border: 22px solid;
border-color: transparent transparent transparent lightyellow;
}
/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
right: auto;
top: auto;
bottom: -40px;
border: 20px solid;
border-color: #666 transparent transparent #666;
}
.tri-right.btm-left-in:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 38px;
right: auto;
top: auto;
bottom: -20px;
border: 12px solid;
border-color: lightyellow transparent transparent lightyellow;
}
/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: 30px;
bottom: -40px;
border: 20px solid;
border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right-in:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: 38px;
bottom: -20px;
border: 12px solid;
border-color: lightyellow lightyellow transparent transparent;
}
/*
left: -8px;
right: auto;
top: auto;
bottom: -40px;
border: 32px solid;
border-color: transparent transparent transparent #666;
left: 0px;
right: auto;
top: auto;
bottom: -20px;
border: 22px solid;
border-color: transparent transparent transparent lightyellow;
/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -8px;
bottom: -40px;
border: 20px solid;
border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: 0px;
bottom: -20px;
border: 12px solid;
border-color: lightyellow lightyellow transparent transparent;
}
/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -40px;
top: 30px;
bottom: auto;
border: 20px solid;
border-color: #666 transparent transparent #666;
}
.tri-right.right-in:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -20px;
top: 38px;
bottom: auto;
border: 12px solid;
border-color: lightyellow transparent transparent lightyellow;
}
/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -40px;
top: -8px;
bottom: auto;
border: 32px solid;
border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -20px;
top: 0px;
bottom: auto;
border: 20px solid;
border-color: lightyellow transparent transparent transparent;
}
/* talk bubble contents */
.talktext{
padding: 1em;
text-align: left;
line-height: 1.5em;
word-wrap: break-word;
}
.talktext p{
/* remove webkit p margins */
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
.drop-files {
border: 1px solid #000;
color: #000;
}
.wrapwords{
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}