/* css Gezellen stijlblad versie 0.5 26 september 2016 */
/* This file was based on 'Tranquille' by Dave Shea and w3c examples */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */
/*
* CSS * 1 2 3
*** http://www.w3schools.com/css/css_syntax.asp
A CSS rule-set consists of a selector and a declaration block:
selector declaration { property:value; }
h1 h2 h3 { color:black; font-size:12px }
The selector points a HTML element you want to style.
Or an element with an id -> #para1 { text-align:center; }
*** http://www.w3schools.com/css/css_howto.asp
Cascading Order .. of style into a new "virtual" style sheet
all the styles will "cascade" by the following rules,
where number one has the highest priority:
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
An inline style (inside a specific HTML element)
has the highest priority, which means that it will override
a style defined inside the tag,
or in an external style sheet, or a browser default value.
* box *
div {
width: 320px; 320px (width)
padding: 10px; + 20px (left + right padding)
border: 5px solid gray; + 10px (left + right border)
margin: 0; + 0px (left + right margin)
} = 350 px
***
* sizing *
[ css3 ]> box-sizing: content-box|border-box|initial|inherit;
content box padding and border outside the 'box'
border box padding and border inside the 'box'
niet - meer - nodig ? misschien voor oudere brouwsers
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
[ DOM ]> document.getElementById("myDIV").style.boxSizing = "border-box";
***
http://www.w3schools.com/css/css_border.asp
http://www.w3schools.com/css/css_outline.asp
The outline is not a part of an element's dimensions;
the element's total width and height
is not affected by the width of the outline.
The border _is_ part of an elements dimensions.
* border *
* outline *
width:
style: dotted dashed solid double groove ridge inset outset none hidden
color:
*/
/*{ box-sizing: content-box; }*/
/* margin: default 0 length (px,pt,cm ..) auto initial inherit */
/*
padding: default 0 length|%|initial|inherit;
[ top right bottom left ]
[ DOM ]> document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
*/
/*
@font-face {
font-family: 'Mirza', cursive; scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
src: url('/data/opmaak/font/Mirza/Fonts') format('truetype'),
url('/data/opmaak/font/Mirza/Fonts') format('woff2');
}
@font-face {
font-family: 'Tangerine', cursive;
src: url('/font/Tangerine/Tangerine_Regular.ttf') format('truetype'),
url('/font/Tangerine/Tangerine_Regular.woff') format('woff');
}
@page {
margin: 2cm;
}
*/
/*
@font-face {
font-family: 'tangerineregular';
src: url('/bibliotheek/font/Tangerine/fontsqirrel/tangerine_regular-webfont.woff2') format('woff2'),
url('/bibliotheek/font/Tangerine/fontsqirrel/tangerine_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'tangerinebold';
src: url('/bibliotheek/font/Tangerine/fontsqirrel/tangerine_bold-webfont.woff2') format('woff2'),
url('/bibliotheek/font/Tangerine/fontsqirrel/tangerine_bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-kerning:auto;
}
@font-face {
font-family: 'Mirza';
src: url('/bibliotheek/font/Mirza/Fonts/Mirza-Regular.ttf') format('truetype'),
url('/bibliotheek//font/Mirza/Fonts/Mirza-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-kernel:auto;
}
/* font-kerning [MDN] https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning
*
* The font-kerning CSS property controls the usage of the kerning information;
* that is, it controls how letters are spaced.
* The kerning information is stored in the font,
* and if the font is well-kerned,
* this feature allows spacing between characters to be very similar,
* whatever the characters are.
* auto | normal | none
*/
/* font weight: lighter normal bold (er) 100 900 initial inherit
DOM document.getElementById("myP").style.fontWeight = "900";
*/
/*
html {
margin: 0;
padding: 2px;
font-family: 'tangerineregular', cursive;
font-size: 20px;
}
/*
* background *
color image repeat attachment position
background used in this 'body'
background:transparent url(http://sali.home.xs4all.nl/data/opmaak/beeld/old_paper_by_d_o_m_i_n_i_c.jpg);
elsewhere
background: transparent url(http://sali.home.xs4all.nl/data/opmaak/beeld/texture_36__old_paper_by_sanami276.png);
***
* font *
style variant weight size line-height
family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
fonts used in this 'body'
font-family: 'Tangerine', cursive;
font-family: 'Mirza', cursive;
*** http://www.w3schools.com/css/css_text.asp
* text *
color direction letter-spacing line-height
text-[ align decoration indent shadow transform ]
unicode-bidi vertical-align white-space word-spacing
line height: space between lines
normal number length (px) % initial inherit
http://www.w3schools.com/cssref/pr_dim_line-height.asp
*/
/*
body {
margin: 0;
padding: 2px;
text-align: center;
line-height: normal;
1.88889;
background:transparent url(http://sali.home.xs4all.nl/bibliotheek/opmaak/beeld/old_paper_by_d_o_m_i_n_i_c.jpg);
background: url(/bibliotheek/beeldend/papier/simple-old-paper-1-transparent.jpg);
background:url('/bibliotheek/beeldend/papier/rossig_carton_als_textuur.webp'), url('/bibliotheek/beeldend/papier/blauw:1280*800.webp');
background-blend-mode:darken;
font-family: 'tangerineregular', cursive;
font-size: 36px;
*text-shadow: 4px 4px 4px #001a00;*
text-shadow: 4px 4px 6px #608000;
overflow:auto;
* #808000; *
* ie
scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
*/
}
/* order [MDN]
*
The following CSS code should create a classic two-sidebar layout
surrounding a content block.
The Flexible Box Layout Module automatically creates blocks
of equal vertical size and uses as much horizontal space as available.
#main { display: flex; text-align:center; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }
*
*/
/* div {*/
/* [MDN] Applies to block container elements */
/* widows: 2; */
/* defines the minimum number of lines that must be left at the top of the second page.
*
* In typography, a widow is the last line of a paragraph
* appearing alone at the top of a new page.
* Setting the widows property allows the prevention of single-line widows.
*
*/
/* orphans:2;
/*
*
* The orphans CSS property refers to the minimum number of lines
* in a block container that must be left at the bottom of the page.
* This property is normally used to control how page breaks occur.
*
*/
/* } */
/* fullscreen [MDN]
* api https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
* pseudoclass https://developer.mozilla.org/nl/docs/Web/CSS/:fullscreen
*/
/*
:fullscreen {
width: 100vw;
height: 100vh;
}
#fullscreen:fullscreen {
padding: 42px;
border:2px solid #f00;
}
#fullscreen:fullscreen > h1 {
color: none;
}
#fullscreen:fullscreen > p {
color: none
;
}
/*
#fullscreen:fullscreen > button {
display: none;
}
*/
/* javascript */
var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
var p = 0, m, t;
while (p < pfx.length && !obj[m]) {
m = method;
if (pfx[p] == "") {
m = m.substr(0,1).toLowerCase() + m.substr(1);
}
m = pfx[p] + m;
t = typeof obj[m];
if (t != "undefined") {
pfx = [pfx[p]];
return (t == "function" ? obj[m]() : obj[m]);
}
p++;
}
}
/*
* We can then make any element viewable full screen
* by attaching a handler function which determines
* whether it’s in full-screen mode already and acts accordingly:
*/
var e = document.getElementById("fullscreen");
e.onclick = function() {
if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
RunPrefixMethod(document, "CancelFullScreen");
}
else {
RunPrefixMethod(e, "RequestFullScreen");
}
}
/* javascript */
h* {
font-weight:normal;
}
/* default values most browsers
divisions, length, breaks in lines are ignored
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
margin-top: 5px;
text-align:center;
}
pre {
preserve width spaces and line breaks
http://www.w3schools.com/tags/tag_pre.asp
text-align: center;
font-family: 'tangerineregular', cursive;
font-size: 26px;
text-shadow: 4px 4px 4px #808000;
border: 0.5px solid darkgoldenrod;
border-radius:7px;
}
*/
li {
list-style-type: none;
}
/* [MDN] https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/additive-symbols
CSS Content
@counter-style additive-symbols-example {
system: additive;
additive-symbols: I 1;
}
.list {
list-style: additive-symbols-example;
}
*/
a {
/* color: #900; */
text-decoration: none;
}
a:link {
/* font-weight: bold; */
text-decoration: none;
color: #001a00; /* greenish dark */
}
a:visited {
/* font-weight: bold; */
text-decoration: none;
color: #003300; /* greenish */
}
a:hover, a:focus, a:active {
text-decoration: none;
}
a[title]:hover:after{
content: attr(title);
padding: 0px;
color: darkgoldenrod;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index:1;
/*
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
*/
border-radius: 12px;
/*
-moz-box-shadow: 0px 0px 2px #c0c1c2;
-webkit-box-shadow: 0px 0px 2px #c0c1c2;
*/
box-shadow: 0px 0px 2px #c0c1c2;
}
/*
* http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag
*/
a.tip {
/* border-bottom: 1px ; */
text-decoration: none
/* border-radius: 12px; */
}
a.tip:hover {
cursor: help;
position: relative;
border-radius: 12px;
}
a.tip span {
display: none;
/* border-radius: 12px; */
}
a.tip:hover span {
padding: 0px;
display: inherit;
/*
z-index: 20;
background: transparent url(http://sali.home.xs4all.nl/bibliotheek/opmaak/beeld/texture_36__old_paper_by_sanami276.png);
*/
background: transparent url(/bibliotheek/archief/beeldend/papier/old_paper_by_d_o_m_i_n_i_c.jpg);
left: 0px;
margin: 0px;
width: 250px;
position: relative;
/* top: 10px; */
text-decoration: none;
/* moz-border-radius: 12px; */
border-radius: 12px;
}
/*
* http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag
*/
/*
* http://www.kryogenix.org/code/browser/nicetitle/
*/
div.anothertitle {
position: absolute;
/*margin: 5px;
padding-top: 5px; */
top: 0px;
left: 0px;
color: darkslategray;
font-size: 16px;
/*width: 20em;*/
font-weight: normal;
z-index:1;
/*
* background: transparent url(http://sali.home.xs4all.nl/bibliotheek/opmaak/beeld/texture_36__old_paper_by_sanami276.png);
*/
background: transparent url(/bibliotheek/archief/beeldend/papier/old_paper_by_d_o_m_i_n_i_c.jpg);
border-radius: 5px;
border: 0.5px solid darkgoldenrod;
}
div.anothertitle p {
margin: 5px; padding: 0 3px;
}
div.anothertitle p.destination {
font-size: 10px;
text-align: center;
padding-top: 3px;
}
/*
* Kiril
*
js
var elements=document.getElementsByTagName("*");
for(x in elements){
if(elements[x].tagName&&elements[x].title.length>0)
// do stuff
// var subtitle=document.createElement("span");
}
}
css
[title]{
position:relative;
}
[title]:hover:after {
background:rgba(0,0,0,0.3);
background: transparent url(http://sali.home.xs4all.nl/bibliotheek/opmaak/beeld/old_paper_by_d_o_m_i_n_i_c.jpg);
color:#FFF!important;
content:attr(title);
position:absolute;
left:50px;
top:50px;
border-radius: 4px;
}
*
* Kiril
*/
/*
* http://www.kryogenix.org/code/browser/nicetitle/
*/
/*
* begin https://paulund.co.uk/css3-only-tooltips
*
[title] {
position:relative;
}
[title]:after {
content:attr(title);
color:#fff;
background:rgba (128,128,0,0.9); (51,51,51,0.75);
padding:5px;
position:absolute;
left:-9999px;
opacity:0;
bottom:100%;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
white-space:nowrap;
-webkit-transition:0.25s linear opacity;
}
[title]:hover:after {
left:5px;
opacity:1;
}
a span {
display:none;
color:#000;
background:transparent url(http://sali.home.xs4all.nl/bibliotheek/opmaak/beeld/texture_36__old_paper_by_sanami276.png);
padding:20px;
border: 1px gold;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
width:200px;
text-align:center;
position: absolute;
z-index:10;
}
a { display: inline-block;}
a:hover span { display:block; }
/*
* https://paulund.co.uk/css3-only-tooltips
*/
/*
footer {
text-align: center;
padding: 5px;
}
footer a:link, footer a:visited {
margin-right: 20px;
}
/* specific divs */
.page-wrapper {
margin: 0;
position:relative;
}
.container{
display:grid;
}
.gridwrapper {
overflow:auto;
position:relative;
height:auto;
}
.gridcontent {
width:8.33%;
margin:0px;
border-right:1px solid lightgrey;
height:100%;
float:left;
}
.vertical {
/* identical to rotateZ(90deg); */
/* clockwise right */
/* clockwise left (-90deg) */
transform: rotate(90deg);
transform-origin: left top 0;
/* float: none|left|right|initial|inherit; */
/*
* deg which represents an angle in degrees.
* One full circle is 360deg. E.g. 0deg, 90deg, 360deg.
* grad which represents an angle in gradians.
* One full circle is 400grad. E.g. 0grad, 100grad, 400grad.
* rad which represents an angle in radians.
* One full circle is 2π radians which approximates to 6.2832rad.
* 1rad is 180/π degrees. E.g. 0rad, 1.0708rad, 6.2832rad.
* turn which represents the number of turns the angle is.
* One full circle is 1turn. E.g. 0turn, 0.25turn, 1turn.
*/
}
/* writing-mode
* horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
*/
/** https://gist.githubusercontent.com/aiboy/7406727/raw/4ba8905bb580b54ecc271617fa8ef774f00e58f8/vertical-text.css
* Works everywere ( IE7+, FF, Chrome, Safari, Opera )
* Example: http://jsbin.com/afAQAWA/2/
*/
.rotated-text {
display: inline-block;
overflow: hidden;
width: 1.5em;
}
.rotated-text__inner {
display: inline-block;
white-space: nowrap;
/* this is for shity "non IE" browsers
that dosn't support writing-mode */
-webkit-transform: translate(1.1em,0) rotate(90deg);
-moz-transform: translate(1.1em,0) rotate(90deg);
-o-transform: translate(1.1em,0) rotate(90deg);
transform: translate(1.1em,0) rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
/* IE9+ */
-ms-transform: none;
-ms-transform-origin: none;
/* IE8+ */
-ms-writing-mode: tb-rl;
/* IE7 and below */
*writing-mode: tb-rl;
}
.rotated-text__inner:before {
content: "";
float: left;
margin-top: 100%;
}
/* mininless css that used just for this demo
.container {
float: left;
}
html
JS Bin
*/
/* https://gist.githubusercontent.com/aiboy/7406727/raw/4ba8905bb580b54ecc271617fa8ef774f00e58f8/vertical-text.css */
.left {
border: 1.5em;
width: 25.77%;
float: left;
left: 0;
padding: 0;
border-radius: 1.5em;
background:
url(/bibliotheek/archief/beeldend/papier/texture_36__old_paper_by_sanami276.png),
rgba(245,245,245,0.6);
background-blend-mode:overlay;
background-clip: inherit;
font-size: 16px;
}
/*
.middle {
width: 46%;
float: left;
padding: 0;
border: 1px solid darkgoldenrod;
border-radius:7px;
background:
url('/bibliotheek/archief/beeldend/papier/simple-old-paper-1-transparent.jpg'),
rgba(245,245,245,0);
background-blend-mode:darken;
background-position: center;
background-repeat: repeat-y ;
background-clip: inherit;
font-size: 16px;
color: midnightblue;
text-shadow: 4px 4px 4px black;
text-align: justify;
text-indent: 50px;
}
*/
.right {
border: 1.5em;
width: 25.77%;
float: right;
right: 0;
padding: 0;
/*
border: 0.5px solid palegoldenrod;
*/
border-radius:1em;
background:
url('/bibliotheek/archief/beeldend/papier/texture_36__old_paper_by_sanami276.png'),
rgba(245,245,245,0.6);
background-blend-mode:overlay;
background-clip: inherit;
font-size: 16px;
}
middle.footer {
text-align: center;
padding: 10px;
}
middle.footer a:link, middle.footer a:visited {
margin-right: 20px;
}
/*
header {
padding:15px;
inherited from body: text-align: center;
border: 1px solid gold;
border-style: groove;
border-radius:4px;
background: transparent url(http://sali.home.xs4all.nl/bibliotheek/opmaak/beeld/texture_36__old_paper_by_sanami276.png);
font-weight:normal;
background-repeat:no-repeat;
}
header h1,h2,h3,h4,h5,h6 {
text-align: center;
margin-bottom:25px;
font-weight:normal;
/* background: transparent url(/bibliotheek/archief/beeldend/papier/texture_36__old_paper_by_sanami276.png);
background-position: center;
background-clip: inherit;
border: 0.5px solid darkgoldenrod;
border-radius: 7px;
padding:7px;
background-repeat:no-repeat;
*/
}
/*
header h2 {
background: transparent url(/bibliotheek/opmaak/beeld/texture_36__old_paper_by_sanami276.png);
background-position: center;
background-clip: inherit;
background-repeat:no-repeat;
border: 0.5px solid darkgoldenrod;
border-radius: 7px;
padding:7px;
text-align:center;
bottom-margin:25px;
font-weight: normal;
}
header h3 {
background: transparent url(/bibliotheek/opmaak/beeld/texture_36__old_paper_by_sanami276.png);
background-position: center;
background-clip: inherit;
background-repeat:no-repeat;
border: 0.5px solid darkgoldenrod;
border-radius: 7px;
padding:7px;
margin-bottom: 25px;
font-weight: normal;
}
*/
.expose {
clear: both;
margin: 20px 20px 20px 10px;
}
.expose.p {
font-size:10px;
text-align:center;
}
/*
* http://stackoverflow.com/questions/3794682/custom-css-for-audio-tag
*/
audio:hover, audio:focus, audio:active {
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
transform: scale(1.05);
}
audio {
transition:all 0.5s linear;
box-shadow: 2px 2px 4px 0px #006773;
border-radius:7px 7px 7px 7px ;
}
/*
* http://stackoverflow.com/questions/3794682/custom-css-for-audio-tag
*/
/*
.button {
width: 150px;
padding: 10px;
background-color: #FF8C00;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight:bold; text-decoration:none;
}
*/
#cover {
position:absolute;
top:0; left:0;
background:rgba(0,0,0,0.6);
z-index: 99999; width:100%;
height:100%; display:none;
}
item {
position:absolute;
margin: auto;
overflow: hidden;
width: 30%;
max-width: 100%;
}
img {
display:inline-flex;
margin: 5px;
border: 0.5px solid darkgoldenrod;
border-radius: 6px;
width: 30%;
max-width: auto;
height: auto;
image-orientation:from-image;
/* margin: 10px; */
padding: 5px;
opacity: 0.7;
}
.item img {
cursor:hand;
/*max-width: 100%;*/
transition: width 2s, height 2s, transform 2s;
}
.item:active img {
cursor:zoom-in;
transform: scale(3,3);
}
img:target, img:target + #cover {
display:block;
opacity:1;
}
/*
.item pre {
transition: width 2s, height 2s, transform 2s;
}
.item:active pre {
transform: scale(3,3);
}
pre:target, pre:target + #cover {
display:block;
opacity:1;
}
*/
.cancel {
display:block;
position:absolute;
top:3px; right:2px;
background:rgb(245,245,245);
color:black; height:30px;
width:35px; font-size:10px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
/* filter [MDN] https://developer.mozilla.org/en-US/docs/Web/CSS/filter#opacity()
*
filter: url("filters.svg#filter-id");
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
//Apply multiple filters
filter: contrast(175%) brightness(3%);
//Global values
filter: inherit;
filter: initial;
filter: unset
none |
where
= [ | ]+
where
= | | | | | | | | |
where
= blur( )
= brightness( )
= contrast( [ ] )
= drop-shadow( {2,3} ? )
= grayscale( )
= hue-rotate( )
= invert( )
= opacity( [ ] )
= sepia( )
= saturate( )
where
= |
= | | | | | | currentcolor |
where
= rgb( #{3} )
= rgba( #{3} , )
= hsl( , , )
= hsla( , , , )
=
= ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where
= |
=
=
*
*/
/* object-fit [MDN]
*
* fill | contain | cover | none | scale-down
*
*/
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
/* background: url('/bibliotheek/opmaak/beeld/simple-old-paper-2.jpg'); */
background-image: linear-gradient(to right, darkgoldenrod 0%,darkslategray 100%), url('/bibliotheek/beeldend/papier/simple-old-paper-2.jpg');
background-position:center;
background-repeat:no-repeat;
background-blend-mode:overlay;
opacity:0.95;
overflow: auto;
transition: 2s;
}
.overlay-content {
position: relative;
top: 50px;
width: 100%;
/* text-align: center; */
}
.overlay a {
padding: 25px;
text-decoration: none;
font-size: 10px;
color: #f1f1f1;
display: block;
transition: 2s;
}
.overlay a:hover, .overlay a:focus {
color: #262626;
}
/*
.closebtn {
padding: 50px;
top: 45px;
right: 45px;
font-size: 20px !important;
z-index:1;
}
*/
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.closebtn {
font-size: 10px !important;
top: 45px;
right: 45px;
}
}
/* http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ begins */
/* http://www.w3schools.com/howto/howto_css_modals.asp */
/* Trying to make usable for text and images */
#modalImage {
border-radius: 7px;
cursor: pointer;
transition: 1.2s;
}
#myImg:hover {opacity: 0.7;}
.modalContext {
/* display: none; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgb (0,0,0); /* fallback to rgb */
background: rgba(0,0,0,0.7);
z-index: 1;
opacity:0;
transition: opacity 1.2s ease-in;
pointer-events: none;
}
.modalContext:target {
opacity:1;
pointer-events: auto;
}
.modalContext:image {
margin: auto;
display: inline-flex;
width: 75%;
}
/* Caption of Modal Image */
#caption {
/* top:25%; */
margin: auto;
display: inline-flex;
width: 75%;
text-align: center;
color: #ccc;
padding: 10px 0;
}
/* Add Animation */
/*
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 2.6s;
animation-name: zoom;
animation-duration: 2.6s;
}
*/
/*
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
*/
.modalContext > div {
width: 50%;
position: relative;
margin: auto;
padding: 0;
border: 1px solid darkgoldenrod;
border-radius: 12px;
background: transparent url(/bibliotheek/beeldend/papier/texture_36__old_paper_by_sanami276.png);
background-position: center;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 1.2s ,
#caption {
animation-name: zoom;
animation-duration: 1.6s;
}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
/* background: darkgoldenrod; */
color: #f1f1f1;
padding: 50px;
line-height: 25px;
position: absolute;
right: 12px;
text-align: center;
top: 12px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
box-shadow: 1px 1px 3px #000;
}
.close:hover, .close:focus {
background: transparent url(/bibliotheek/beeldend/papier/texture_36__old_paper_by_sanami276.png);
}
/* http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ ends */
/* http://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box */
#modalContainer {
background-color:rgba(0, 0, 0, 0.3);
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}
#alertBox {
position:relative;
width:300px;
min-height:100px;
margin-top:50px;
border:1px solid #666;
background-color:#fff;
background-repeat:no-repeat;
background-position:20px 30px;
}
#modalContainer > #alertBox {
position:fixed;
}
#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:#3073BB;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
}
/*
#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:7px;
border:0 none;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#357EBD;
border-radius: 3px;
text-decoration:none;
}
/* unrelated styles */
#mContainer {
position:relative;
width:600px;
margin:auto;
padding:5px;
border-top:2px solid #000;
border-bottom:2px solid #000;
font:0.7em verdana,arial;
}
/*
h1,h2 {
margin:0;
padding:4px;
font:bold 1.5em verdana;
border-bottom:1px solid #000;
}
*/
code {
/*font-size:1.2em;*/
color:#069;
}
#credits {
position:relative;
margin:25px auto 0px auto;
width:350px;
font:0.7em verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
padding-top:4px;
}
#credits img {
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
}
/*
.important {
background-color:#F5FCC8;
padding:2px;
}
*/
code span {
color:green;
}
/* http://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box */
iframe {
margin-top: 20px;
margin-bottom: 30px;
border: 0.5px solid darkgoldenrod;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000;
/* -moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
-ms-transform:rotate(20deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);
*/
}
/*
image-orientation: from-image;
*/
.alert {
padding:5%;
border: 0.5px solid golderenrod;
border-radius:7px;
font-family: 'tangerineregular';
font-size:10px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
#mymenu {
padding:5%;
border: 0.5px solid golderenrod;
border-radius:7px;
font-family: 'tangerineregular';
font-size:10px;
}