/* CSS Document */ /** { padding:0; margin:0; }*/ table, p, ul, ol, li h1, h2, h3, h4, hr blockquote{ margin: 0px; padding: 0px; } /********************************************** HTML & BODY ***************************************** */ html{ font-size:16px; /*scroll-behavior: smooth; */ } body { font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; padding: 0; margin: 0; } /**********************************************************************************************************************/ /************************************* HEADINGS 1 2 3 and 4 *********************************************************/ /**********************************************************************************************************************/ /******************************** HEADING ONE ********************************************/ h1, h2, h3, h4, h5, h6 {/* Example: function test() { if (document.layers) getMouseLoc; //NS else if (document.all) getMouseLoc(); //IE alert(mouseLocation.x+","+mouseLocation.y); } in the BODY: test */ function Point(x,y) { this.x = x; this.y = y; } mouseLocation = new Point(-500,-500); function getMouseLoc(e) { if(!document.all) //NS { mouseLocation.x = e.pageX; mouseLocation.y = e.pageY; } else //IE { mouseLocation.x = event.x + document.body.scrollLeft; mouseLocation.y = event.y + document.body.scrollTop; } return true; } //NS init: if(document.layers){ document.captureEvents(Event.MOUSEMOVE); document.onMouseMove = getMouseLoc; } . /*font-family: 'Libre Caslon Display', serif;*/ color: #333333; font-weight:normal } #header-top { /*this cancels margin top and bottom from H1 headings inhereted from .main-content */ margin-bottom: 0px; margin-top:0px; } /**************** HEADER ONE *************/ h1 { font-size: 1.90rem; margin-top: 1rem; margin-bottom: 1.2rem; line-height: 1.9rem; letter-spacing: 0.025rem; } @media (min-width: 576px) { h1 { margin-top: 2rem; letter-spacing: 0rem; } } @media (min-width: 768px) { h1 { letter-spacing: .1rem; margin-bottom: 2.2rem; line-height: 2.1rem; } } @media (min-width: 992px) { h1 { font-size: 2.1rem; } } /****** SMALLER text underneath HEADER ONE ***************/ #header-top .text-medium { padding-top: .25rem; padding-bottom: 0px; font-size: 1.3rem; color:#666666; font-style:italic; } @media (min-width: 576px) { #header-top .text-medium { padding-top: .45rem; } } /***************** HEADER TWO *******************/ h2 { font-size: 1.5rem; letter-spacing: 0.025rem; line-height: 1.7rem; margin-top: .5rem; margin-bottom: .7rem; font-weight: normal; color: #333333; } @media (min-width: 576px) { h2 { padding-bottom: 0px; } } @media (min-width: 992px) { h2 { letter-spacing: .05rem; margin-top: 0rem; } } @media (min-width: 1200px) { h2 { margin-bottom: .8rem; } } /************************* SPECIFIC HEADERS 2 & HEADINK LINK RULES **************************************/ h2.no-margin-top, h2.bookshop { margin: .6rem 0rem .6rem 0rem; font-weight:normal; } h2.no-margin-top { margin-top: 0rem; font-weight:normal; } .events-left h2.bookshop{ margin-top: 0rem; padding-top: 0rem; padding-bottom:.3rem; margin-bottom:0px; font-size: 1.1rem; line-height: 1.2rem; font-weight:normal; font-style:italic; } h2.no-margin-top a:link, h2.bookshop a:link{ color: #333333; text-decoration: none; border-bottom: none; font-weight:normal; } h2.no-margin-top a:visited, h2.bookshop a:visited{ color: #333333; font-weight:normal; } h2.no-margin-top a:hover, h2.bookshop a:hover{ color: #cccccc; font-weight:normal; } /**************************** HEADING 3 ****************************************/ h3 { color: #333333; font-size: 1.5rem; margin: 0rem 0rem .5rem 0rem; line-height: 1.2em; letter-spacing: 0.025rem; clear: both; text-align: left; font-weight: normal; } /*************************** HEADING 4 *****************************************/ h4 { margin-bottom:1rem; font-size: 1em; letter-spacing: 0.025rem; margin: 0rem 0rem 0rem 0rem; padding: .3rem 0rem .5rem 0rem; line-height: 1.2rem; letter-spacing: 0.025rem; text-transform:uppercase; } h4.dutch-timeline-painters { margin-bottom:1rem; color: black; font-size: 1rem; margin: 0rem 0rem 1rem 1.1rem; font-weight:100; line-height: 1.2rem; letter-spacing: 0.025rem; clear: both; } .main-content .smallish-text { font-size:95%; line-height:1rem; display:inline-block; padding: 0rem .5rem .3rem .6rem; border-left: 1px solid #cccccc; margin-bottom: 1rem; text-decoration:none; word-wrap: break-word; } .main-content a.smallish-text { word-wrap: break-word; } .small { font-size: .90rem; line-height: 6rem; } /*********************************************************************************************************/ /********************************************** TOP ******************************************************/ /*********************************************************************************************************/ /******************** ANNOUNCEMENT or ADVERTISEMENT at TOP OF PAGE **********************************/ .ad { display:none; } /******************************* JUMBOTRON *************************************************/ @media (min-width: 0px) { .jumbotron { background-image: url(background-images/jumbotron-study.jpg); background-repeat:no-repeat; background-size: cover; background-position: center center; margin-bottom: 0; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; height:250px; } } @media (min-width: 576px) { .jumbotron { background-image: url(background-images/jumbotron-writing.jpg); background-repeat:no-repeat; background-size: cover; background-position: center center; margin-bottom: 0; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; height:250px; } } @media (min-width: 768px) { .jumbotron { background-image: url(background-images/big-amsterdam.jpg); background-repeat:no-repeat; /*background-size: cover;*/ display: flex; justify-content: center; /* Center horizontally */ align-items:200px; /* Make the jumbotron fill the entire viewport height */ background-color: #f0f0f0; /* Replace with your desired background color */ } } @media (min-width: 992px) { .jumbotron { background-image: url(background-images/big-amsterdam.jpg); background-repeat:no-repeat; /*background-size: cover;*/ display: flex; justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ height: 200px; /* Make the jumbotron fill the entire viewport height */ background-color: #f0f0f0; /* Replace with your desired background color */ } } @media (min-width: 1200px) { .jumbotron { background-image: url(background-images/big-amsterdam.jpg); background-repeat:no-repeat; /*background-size: cover;*/ display: flex; justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ height: 200px; /* Make the jumbotron fill the entire viewport height */ background-color: #f0f0f0; /* Replace with your desired background color */ } } /*************************** MISC ELEMENTS AT TOP OF PAGE **********************************/ /************* anchor at top of page for eventual scroll up and scroll down offset *******/ #top-offset { position:absolute; top:410px; } @media (max-width: 768px) { #top-offset { position:absolute; top:250px; } } /********* removes "3.0" from ESSENTIAL VERMEER 3.0 in small device navbars ******************/ .ev-three-dot-o { font-family: 'Lato', sans-serif; display:block; position: relative; font-size: 3.5rem; color: white; opacity: .3; text-align: center; top:58%; } @media (min-width: 1200px) { .ev-three-dot-o { display:block; position: relative; font-size: 3.5rem; color: white; opacity: .3; text-align: center; top:40%; } } @media (max-width: 350px) { .three-point-o { display: none; } } /******************************************************************************/ /*************************** NAVIGATION BAR **********************************/ /******************************************************************************/ nav { font-family: 'Lato', sans-serif; margin-bottom: 0rem; padding-bottom: -1rem; } .navbar { backgound-image: none; background-color: white; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; z-index: 1020; position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; padding-left: 2rem; /* Space for the icon */ } .navbar::before { content: ""; position: absolute; left: 10px; top: 5px; width: 4rem; height: 3rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -2100px; opacity: .7; } .navbar .navbar-nav .my-link { color: #666666; font-size: .75rem; margin: 0rem .5rem 0rem .5rem; border-bottom: 1px solid transparent; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } .navbar .navbar-nav .my-link:hover { font-size: .75rem; margin:0rem .5rem 0rem .5rem; border-bottom: 1px solid #aaaaaa; color: #999999; text-decoration: none; } .navbar-brand { line-height:1rem; width:28px; height: 20px; } .navbar-text { font-size: 1.1rem; line-height: 1rem; letter-spacing: 0rem; font-weight: normal; display: inline-block; padding-top: 1px; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } .navbar-toggler-icon { display: inline-block; width: 1rem; height: 1rem; vertical-align: middle; content: ""; background: no-repeat center center; background-size: 100% 100%; } .navbar-light .navbar-toggler-icon { border: 0px; } .navbar-light .navbar-toggler { border: 0px; } .nav-search { font-size: .65em; width: 4.7rem; text-transform:uppercase; color: #6666666; border: 1px solid #999999; padding: .1rem 1.8rem 0.09rem 1rem; margin-right: 2rem; margin-top: 2px; line-height: 1; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } .nav-search:hover { color:#999999; border: 1px solid #bbbbbb; cursor:pointer; } .navbar-nav > li { font-size: 20px; } .dropdown-menu { z-index:1210; } .navbar-nav .dropdown-menu { /*dropdown box*/ position: static; float: none; border-radius: 0rem; padding:.5rem 0 .5rem 0rem;; border: 1px solid #cccccc; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); /* Lighter shadow with no top shadow */ } /* Styling the text color of dropdown menu items */ .navbar .dropdown-menu .dropdown-item { color: #999999; /* Replace with your desired color */ font-family: 'YourFontFamily', sans-serif; /* Replace with your desired font-family */ font-size: .85rem; } /* Styling the text color on hover of dropdown menu items */ .navbar .dropdown-menu .dropdown-item:hover { border-bottom: 0 color: #999999; text-decoration: none; background-color: transparent; } .navbar .dropdown-menu .my-dopdown-navbar-link { font-size: .78rem; line-height:1.3rem; padding-top:1rem; transition: border-bottom 0.3s ease; /* Add a smooth transition effect */ } /* Additional styling for your custom class within dropdown items */ .navbar .dropdown-menu .my-dopdown-navbar-link:hover { /* Add specific styles for this class if needed */ border-bottom: 1px solid #aaaaaa; } #hide-most-popular { display:block; } @media (max-width: 900px) { #hide-most-popular { display:none; } } #hide-events { display:block; } @media (max-width: 950px) { #hide-events { display:none; } } /******************************** MINOR ELEMENTS ******************************* */ bold, strong { font-weight:bold; opacity: .8; } blockquote { margin-left: 10%; margin-right: 10%; } blockquote p{ font-style: normal; } /*************************************** LINE ************************************** */ hr { border-top: 1px solid #aaaaaa; border-bottom: 0px solid white; clear: both; margin: 0 0 1.5rem 0; } hr.double { border-top: 4px double #dddddd; } /************ LINE WITH EXTRA MARGIN USED ONLY IN CATALOGUE SECTION ************** */ hr.menu { border-top: 1px solid #dddddd; border-bottom: 0px solid white; clear: both; margin: .3rem 0rem .5rem 0rem; } /************ LINE WITH EXTRA MARGIN USED ONLY IN CATALOGUE SECTION ************** */ hr.catalogue-line { border-top: 1px solid #dddddd; border-bottom: 0px solid white; clear: both; margin: 0 0 .8rem 0; } /************ LINE INSIDE EXTRA CONTENET MENUS ************** */ .menu-line { border-top: 1px solid #dddddd; border-bottom: 0px solid white; clear: both; margin-top: 1rem; margin-bottom: 1rem; } div.scroll-div { overflow-x: auto; overflow-y: hidden; white-space: nowrap; } /**************************************************************************************/ /************************* MAIN CONTENT and MAIN OBJECTS IN IT ************************/ /***************************************************************************************/ @media (min-width: 0px) { .main-content { margin-bottom: 3rem; } } @media (min-width: 576px) { .main-content { font-size: 1.1rem; padding: 0rem 1rem 0rem 1rem; margin-bottom: 3rem; } } @media (min-width: 768px) { .main-content { padding: 0rem 1rem 0rem 1rem; margin-bottom: 3rem; } } @media (min-width: 992px) { .main-content { margin-bottom: 1rem; padding: 0rem 3rem 0rem 0rem; } } @media (min-width: 1200px) { .main-content { margin-bottom: 1rem; } } @media (min-width: 0px) { .main-content p { font-size: 1.15rem; line-height:1.6rem; letter-spacing: 0.025rem; color: #333333; margin-top: 0rem; padding-bottom: 1.5rem; } } @media (min-width: 576px) { .main-content p { font-size: 1.15rem; line-height:1.6rem; letter-spacing: 0.025rem; color: #333333; margin-top: 0rem; padding-bottom: 1.5rem; } } @media (min-width: 768px) { .main-content p { font-size: 1.15rem; line-height:1.6rem; letter-spacing: 0.025rem; color: #333333; margin-top: 0rem; padding-bottom: 1.5rem; } } @media (min-width: 992px) { .main-content p { font-size: 1.15rem; line-height:1.6rem; letter-spacing: 0.025rem; color: #333333; margin-top: 0rem; padding-bottom: 1.5rem; } } @media (min-width: 1200px) { .main-content p { font-size: 1.15rem; line-height:1.6rem; letter-spacing: 0.025rem; color: #333333; margin-top: 0rem; padding-bottom: 1.5rem; } } /***************** MAIN-CONTENT LINKS *******************************/ .main-content a:link, .btn-link:link { color:#333333; text-decoration: none; border-bottom: 1px solid #d0d0d0; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .main-content a:visited, .btn-link:visited { color:#333333; text-decoration: none; border-bottom: 1px solid #d0d0d0; } .main-content a:hover, .btn-link:hover { color: #d0d0d0; text-decoration:none; border-bottom: 1px solid #f4f4f4; } /********************************************************************************************/ /********************************** IMAGE HOLDERS for MAIN TEXT *****************************/ /********************************************************************************************/ .imagehold-center-align, .imagehold-center-align250, .imagehold-center-align300, .imagehold-center-align350, .imagehold-center-align400, .imagehold-center-align450, .imagehold-center-align500, .imagehold-center-align600, .imagehold-center-align700, .imagehold-center-align800 { margin: 0 1rem 0 1rem; color: #666666; font-family: 'Lato', sans-serif; font-size: .85rem; line-height: 1.2rem; text-align: left; } .imagehold-center-align250 { width: 250px; } .imagehold-center-align300 { width: 300px; } .imagehold-center-align350 { width: 350px; } .imagehold-center-align400 { width: 400px; } .imagehold-center-align450 { width: 450px; } .imagehold-center-align500 { width: 500px; } .imagehold-center-align600 { width: 600px; } .imagehold-center-align700 { width: 700px; } .imagehold-center-align800 { width: 800px; } .imagehold-center-align a:link, .imagehold-center-align250 a:link, .imagehold-center-align300 a:link, .imagehold-center-align350 a:link, .imagehold-center-align400 a:link, .imagehold-center-align450 a:link, .imagehold-center-align500 a:link, .imagehold-center-align600 a:link, .imagehold-center-align700 a:link, .imagehold-center-align800 a:link { color: #666666; text-decoration:none; border-bottom: 1px solid #e1dede; -webkit-transition: color 500ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .imagehold-center-align a:visited, .imagehold-center-align250 a:visited, .imagehold-center-align300 a:visited, .imagehold-center-align350 a:visited, .imagehold-center-align400 a:visited, .imagehold-center-align450 a:visited, .imagehold-center-align500 a:visited, .imagehold-center-align600 a:visited, .imagehold-center-align700 a:visited, .imagehold-center-align800 a:visited { color: #666666; text-decoration:none; border-bottom: 1px solid #edebeb; } .imagehold-center-align a:hover, .imagehold-center-align250 a:hover, .imagehold-center-align300 a:hover, .imagehold-center-align350 a:hover, .imagehold-center-align400 a:hover, .imagehold-center-align450 a:hover, .imagehold-center-align500 a:hover, .imagehold-center-align600 a:hover, .imagehold-center-align700 a:hover, .imagehold-center-align800 a:hover { color: #e1dede; border-bottom: 1px solid #edebeb; } .imagehold-center-align img, .imagehold-center-align250 img,.imagehold-center-align300 img, .imagehold-center-align350 img, .imagehold-center-align400 img, .imagehold-center-align450 img, .imagehold-center-align500 img, .imagehold-center-align600 img, .imagehold-center-align700 img, .imagehold-center-align800 img{ margin-bottom: 1em; } .imagehold-center-align { min-width: 100%} /*****************************************************************************************************/ /************************** BASIC IMAGE HOLDERS for MAIN TEXT (FLOAT LEFT)****************************/ /*****************************************************************************************************/ .image-row { padding: .5em 0rem 1.5rem 0rem; } @media (max-width: 768px) { .image-row { } } .image-row-multiple { margin: 0rem 0rem 0rem 0rem; } @media (max-width: 768px) { .image-row-multiple { margin: 0rem 0rem 0rem 0rem; } } .imagehold120, .imagehold150, .imagehold200, .imagehold210, .imagehold220, .imagehold250, .imagehold300, .imagehold350, .imagehold400, .imagehold450, .imagehold500{ margin: .7rem 2.83rem 1.5rem 0rem; padding: 0rem 0em 0em 0rem; color: #666666; font-family: 'Lato', sans-serif; font-size: .85rem; line-height: 1.2rem; float:left; text-align: left; } .imagehold120 { width: 120px; } .imagehold150 { width: 150px; } .imagehold200 { width: 200px; } .imagehold210 { width: 210px; } .imagehold220 { width: 220px; } .imagehold250 { width: 250px; } .imagehold300 { width: 300px; } .imagehold350 { width: 350px; } .imagehold400 { width: 400px; } .imagehold450 { width: 450px; } .imagehold500 { width: 500px; } .imagehold120 img, .imagehold150 img, .imagehold200 img, .imagehold210 img, .imagehold220 img, .imagehold250 img, .imagehold300 img, .imagehold350 img, .imagehold400 img, .imagehold450 img, .imagehold500 img { margin-bottom: 1rem; } .imagehold120 p, .imagehold150 p, .imagehold200 p, .imagehold220 p, .imagehold250 p, .imagehold300 p, .imagehold350 p, .imagehold450 p, .imagehold500 p { } .imagehold120 a:link, .imagehold150 a:link, .imagehold200 a:link, .imagehold210 a:link, .imagehold220 a:link, .imagehold250 a:link, .imagehold300 a:link, .imagehold350 a:link, .imagehold400 a:link, .imagehold450 a:link, .imagehold500 a:link { color: #666666; text-decoration:none; border-bottom: 1px solid #e1dede; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .imagehold120 a:visited, .imagehold150 a:visited, .imagehold200 a:visited, .imagehold210 a:visited, .imagehold220 a:visited, .imagehold250 a:visited, .imagehold300 a:visited, .imagehold350 a:visited, .imagehold400 a:visited, .imagehold450 a:visited, .imagehold500 a:visited{ color: #666666; text-decoration:none; border-bottom: 1px solid #edebeb; } .imagehold120 a:hover, .imagehold150 a:hover, .imagehold200 a:hover, .imagehold210 a:hover, .imagehold220 a:hover, .imagehold250 a:hover, .imagehold300 a:hover, .imagehold350 a:hover, .imagehold400 a:hover, .imagehold450 a:hover, .imagehold500 a:hover{ color: #e1dede; border-bottom: 1px solid #edebeb; } /*************************** removes margins from sides of IMAGHEOLD divs that are INSIDE IMAGE-ROW-MULTIPLE divs **************************/ @media (max-width: 768px) { div.image-row-multiple div.imagehold120, div.image-row-multiple div.imagehold150, div.image-row-multiple div.imagehold200, div.image-row-multiple div.imagehold220, div.image-row-multiple div.imagehold250, div.image-row-multiple div.imagehold300, div.image-row-multiple div.imagehold350, div.image-row-multiple div.imagehold400, div.image-row-multiple div.imagehold450, div.image-row-multiple div.imagehold500, div.image-row-multiple div.imagehold550 { margin-bottom: 1.5rem; margin-top: 0; } } /***************** this casues the larger image in IMAGEHOLDXXX divs to center align, resize to 300px an at tablet breakpoint ****************/ @media (max-width: 768px) { .imagehold250, .imagehold300, .imagehold350, .imagehold400, .imagehold450, .imagehold500{ margin: 0rem auto 1.5rem auto; float:none; width:300px; padding-left: 0px; padding-right: 0px; } } @media (max-width: 768px) { .imagehold220 img, .imagehold250 img { width:300px; } } @media (max-width: 768px) { .imagehold120, .imagehold150, .imagehold200, .imagehold210, .imagehold220 { margin: 0em auto 1.5rem auto; float:none; padding-left: 0px; padding-right: 0px; } } /***********************************************************************************************/ /******************************* NORMAL PRE-SIZED LIGHT BOXES **********************************/ /*************************************************************************************v*********/ .imagehold-lightbox, .imagehold-lightbox-120, .imagehold-lightbox-150, .imagehold-lightbox-200, .imagehold-lightbox-220, .imagehold-lightbox-250, .imagehold-lightbox-300, .imagehold-lightbox-350, .imagehold-lightbox-400, .imagehold-lightbox-450, .imagehold-lightbox-500, .imagehold-lightbox-650, .imagehold-lightbox-800{ margin: .7rem 2.83rem 1.5rem 0rem; padding: 0rem 0em 0em 0rem; color: #666666; font-family: 'Lato', sans-serif; font-size: .85rem; line-height: 1.2rem; float:left; text-align: left; } .imagehold-lightbox { float: left; } .imagehold-lightbox-150 { width: 150px; } .imagehold-lightbox-200 { width: 200px; } .imagehold-lightbox-220 { width: 220px; } .imagehold-lightbox-250 { width: 250px; } .imagehold-lightbox-300 { width: 300px; } .imagehold-lightbox-350 { width: 350px; } .imagehold-lightbox-400 { width: 400px; } .imagehold-lightbox-450 { width: 450px; } .imagehold-lightbox-500 { width: 500px; } .imagehold-lightbox-650 { width: 650px; } .imagehold-lightbox-800 { width: 800px; } @media (max-width: 768px) { .imagehold-lightbox-250, .imagehold-lightbox-300, .imagehold-lightbox-350 { margin: 1rem auto 1rem auto; float:none; padding-left: 0px; width:250px; } } /****************************************redoes margins of LIGHTBOX divs inside multiple row******************************************/ div.image-row-multiple div.imagehold-lightbox, div.image-row-multiple div.imagehold-lightbox-120, div.image-row-multiple div.imagehold-lightbox-150, div.image-row-multiple div.imagehold-lightbox-200, div.image-row-multiple div.imagehold-lightbox-220, div.image-row-multiple div.imagehold-lightbox-250, div.image-row-multiple div.imagehold-lightbox-300, div.image-row-multiple div.imagehold-lightbox-350, div.image-row-multiple div.imagehold-lightbox-400, div.image-row-multiple div.imagehold-lightbox-450, div.image-row-multiple div.imagehold-lightbox-500 { margin: 0rem 0rem 1.5rem 0rem; } /****************************************redoes margins of LIGHTBOX divs inside single row******************************************/ div.image-row div.imagehold-lightbox, div.image-row div.imagehold-lightbox-120, div.image-row div.imagehold-lightbox-150, div.image-row div.imagehold-lightbox-200, div.image-row div.imagehold-lightbox-220, div.image-row div.imagehold-lightbox-250, div.image-row div.imagehold-lightbox-300, div.image-row div.imagehold-lightbox-350, div.image-row div.imagehold-lightbox-400, div.image-row div.imagehold-lightbox-450, div.image-row div.imagehold-lightbox-500 { margin: 0rem 0rem .3rem 0rem; } @media (max-width: 768px) { .imagehold-lightbox img, .imagehold-lightbox-200 img, .imagehold-lightbox-220 img { float:none; width:250px; padding-left: 0px; } } @media (max-width: 768px) { .imagehold-lightbox-250 img, .imagehold-lightbox-300 img { float:none; width:300px; padding-left: 0px; } } /****************************************************LIGHTBOX LINKS**************************************************/ .imagehold-lightbox a:link, .imagehold-lightbox-120 a:link, .imagehold-lightbox-150 a:link, .imagehold-lightbox-200 a:link, .imagehold-lightbox-220 a:link, .imagehold-lightbox-250 a:link, .imagehold-lightbox-300 a:link, .imagehold-lightbox-350 a:link, .imagehold-lightbox-400 a:link, .imagehold-lightbox-450 a:link, .imagehold-lightbox-500 a:link, .imagehold-lightbox-650 a:link, .imagehold-lightbox-800 a:link { outline-style: none ; } .imagehold-lightbox a:visited, .imagehold-lightbox-120 a:visited, .imagehold-lightbox-150 a:visited, .imagehold-lightbox-200 a:visited, .imagehold-lightbox-220 a:visited, .imagehold-lightbox-250 a:visited, .imagehold-lightbox-300 a:visited, .imagehold-lightbox-350 a:visited, .imagehold-lightbox-400 a:visited, .imagehold-lightbox-450 a:visited, .imagehold-lightbox-500 a:visited, .imagehold-lightbox-650 a:link,.imagehold-lightbox-800 a:visited { outline-style: none ; } .imagehold-lightbox a:hover, .imagehold-lightbox-120 a:hover, .imagehold-lightbox-150 a:hover, .imagehold-lightbox-200 a:hover, .imagehold-lightbox-220 a:hover, .imagehold-lightbox-250 a:hover, .imagehold-lightbox-300 a:hover, .imagehold-lightbox-350 a:hover, .imagehold-lightbox-400 a:hover, .imagehold-lightbox-450 a:hover, .imagehold-lightbox-500 a:hover, .imagehold-lightbox-650 a:link,.imagehold-lightbox-800 a:hover { outline-style: none ; } /***************************************************** LIGHTBOX IMAGE ***********************************************************/ .imagehold-lightbox img, .imagehold-lightbox-120 img, .imagehold-lightbox-150 img, .imagehold-lightbox-200 img, .imagehold-lightbox-220 img, .imagehold-lightbox-250 img, .imagehold-lightbox-300 img, .imagehold-lightbox-350 img, .imagehold-lightbox-400 img, .imagehold-lightbox-450 img, .imagehold-lightbox-500 img, .imagehold-lightbox-800 img { background-image: url(svg-images/enlarge-01.svg); background-size: 14px 12px; background-repeat: no-repeat; background-position: right 0rem bottom .2rem; padding-bottom: 1.2rem; border: none; text-decoration: none; } /***************************************************** LIGHTBOX SMALL THIUMBNAIL IMAGE HODLER ***********************************************************/ .imagehold-lightbox-thumbnail { float: none; margin-left:0rem; margin-right:0rem; margin-bottom:3rem; text-align:left; font-size: .85rem; line-height: 1.2rem; } .imagehold-lightbox-thumbnail img{ background-image: url(svg-images/enlarge-01.svg); background-size: 14px 12px; background-repeat: no-repeat; background-position: right 0rem bottom .1rem; padding-bottom: 1rem; border: none; text-decoration: none; } .lightbox-text:after { content: url("../css/svg-images/enlarge-01.svg"); } /************************************************* IMAGE CAPTION NUMBER **************************************************************/ .figure-number-text { } /************************************* TEXT CAPTION NUMBER inside IMAGEHOLDS with image**********************************************/ .fig-num { } /************************************* IMAGE HOLDERS FOR LIGHTBOXES IN VERMEER STAMP SECTION *****************************************/ .imagehold-lightbox-stamps{ line-height: 1.2em; margin: 3rem auto 1rem auto; display:block; float:none; width:200px; background-image: none } @media (min-width: 400px) { .imagehold-lightbox-stamps{ line-height: 1.2em; float:left; margin: 0rem .5rem 2rem .5rem; width:200px; background-image: none } } a.image_nobrd { border: none !important; text-decoration: none !important; } .imagehold-add-bottom { margin-bottom: 2rem } /********************** DIV PRONUNCIATION AUDIO FILES ********************************/ .pronunciation { font-size: .9rem; color:#666666; font-family: 'Lato', sans-serif; background-position: 0px 0px; background-color: #f4f4f4; background-image: url(background-images/pronounced-background.jpg); background-repeat: no-repeat; background-position: 0px 0px; width: 170px; float: left; margin: .5rem 2.83rem 1.5rem 0rem; padding: 7.8rem .5rem .5rem .6rem; letter-spacing: .01em; } @media (max-width: 500px) { .pronunciation { float: none; margin: 1rem auto 1.5rem auto; } } .pronunciation ul{ padding-bottom: 0rem; } .pronunciation li { position: relative; padding-left: 1.5rem; /* Space for the bullet, adjust as needed */ list-style: none; line-height: 1.1rem; padding-top: .1rem; padding-bottom: .23rem; letter-spacing: .01rem; } .pronunciation li::before { content: ""; position: absolute; left: 0; /* Adjust if needed */ top: 0; /* Align to the top */ width: 1rem; height: 1rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -10px -1450px; } .pronunciation a:link { color:#666666; text-decoration:none; border-bottom: none; text-decoration:none; border-bottom: none; transition: background-color 0.3s ease; } .pronunciation a:visited{ color:#666666; text-decoration:none; border-bottom: none; } .pronunciation a:hover { color: #cccccc; text-decoration:none; border-bottom: none; } .courtesy-marco { font-size: .75em; clear:both; padding: .5em 0rem 0em 0em; margin-top: .6em; line-height: 1.4em; letter-spacing: .01em; border-top: 1px solid #cccccc; text-align:center; } /********************************************** AFTERLIFE SECTION TABLE **************************************/ h2.afterlife { padding-top: 0rem; margin-top: -.5rem; margin-bottom: 0rem; padding-bottom: .9rem; font-size: 1.2rem; text-transform: uppercase; line-height: 1.5rem; text-align: center; font-weight:normal; } .afterlife-table { float: left; margin-top: .5rem; line-height: 1.3rem; font-size: .90rem; } table.afterlife-table { border-collapse: collapse; border: 1px solid #cccccc; clear: both; float: left; padding-bottom: .5em; margin-bottom: 1.3em; font-size: .85rem; line-height: 1.3em; } table tbody .afterlife-table { border-collapse: collapse; border: 1px solid #cccccc; clear: both; float: left; padding-bottom: .5rem; margin-bottom: 1.3rem; } table.afterlife-table td { border:1px solid #cccccc; margin:0; padding: 6px; } table.afterlife-table tr { border:1px solid #cccccc; margin:0; padding: 6px; } table.afterlife-table p { font-size: .98rem; line-height: 1.2rem; padding-bottom: 1rem; } table.afterlife-table p:last-child { padding-bottom:0rem; } table.afterlife-table li:last-child { padding-bottom:0rem; } .afterlife-timelineimages { font-size: 95%; color: #999999; line-heigth: 1em; line-height: 1em; text-align: center; vertical-align: top; float: left; width: 100px; margin-right: 1em; padding: 3px 3px 0px 3px; border-right: 1px solid #cccccc; } .afterlife-timelineimages img{ margin-bottom:1rem; } table.afterlife-table a:link { text-decoration:none; border-bottom: none; -webkit-transition: color 500ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } table.afterlife-table a:visited { text-decoration:none; border-bottom: none; } table.afterlife-table a:hover{ text-decoration: none; border-bottom: none; color: #e1dede; } .table table .text-small a:link{ border: none; } table .text-small a:visited{ border: none; } /******************************************************************************************/ /************************************** LISTS *********************************************/ /*****************************************************************************************/ /********************************* ORDERED LIST ********************************************/ /*****************************************************************************************/ ol { list-style-position: inside; padding-left:.3rem; } ol li { font-size: 1.1rem; line-height:1.7rem; padding-left: .8rem; list-style-position: inside; margin-left: 0rem; padding-bottom: .6rem; text-indent:-1em; } @media (min-width: 576px) { ol li { padding-bottom: 1rem; font-size: 1.15rem; padding-bottom: .6rem; line-height: 1.7rem; } } ol li:last-child { padding-bottom:1.5rem; } #small-ol li { /* Your styles here */ font-size: 0.95rem; line-height:1.3rem; /* Other styles */ } ul > li { margin-left: 0px; } .list-indent li{ padding-left: 3rem; margin-bottom: 2rem; } /************************ LIST LIST with SVG DISK BULLET **************************/ .list-bullet ul{ } .list-bullet li { position: relative; padding-left: 1.5rem; /* Space for the bullet, adjust as needed */ list-style: none; line-height: 1rem; padding-bottom: 1rem; letter-spacing: .01rem; font-size: 1.05rem; } .list-bullet li::before { content: ""; position: absolute; left: 0; /* Adjust if needed */ top: 3px; /* Align to the top */ width: 1rem; height: 1rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -10px -1451px; } @media (min-width: 576px) { .list-bullet li { line-height: 1.5rem; font-size: 1.05rem; } } .list-bullet li:last-child { padding-bottom: 1.5rem; } /************************ LIST LIST with SVG DISK BULLET and SMALL TEXT **************************/ .list-bullet-small ul{ margin-top: 0; padding-top: 0; } .list-bullet-small li { position: relative; padding-left: 1.5rem; /* Space for the bullet, adjust as needed */ list-style: none; line-height: 1.5em; letter-spacingr: .01rem; font-size: .98rem; } .list-bullet-small li::before { content: ""; position: absolute; left: 0; /* Adjust if needed */ top: 3; /* Align to the top */ width: 1rem; height: 1rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -10px -1450px; } @media (min-width: 576px) { .list-bullet-small li { line-height: 1.2rem; margin-bottom: .5rem; font-size: .98rem; } } .list-bullet-small li:last-child { padding-bottom: 1rem; } /************************ LIST with no BULLETS **************************/ .list-no-bullet ul { } .list-no-bullet li { padding-left: 1.5rem; /* Space for the bullet, adjust as needed */ list-style: none; line-height: 1.5rem; padding-bottom: .23rem; letter-spacing: .01rem; font-size: 1.05rem; } @media (min-width: 1200px) { .list-no-bullet li { font-size: 1.05rem; list-style-type: none; text-indent: 0rem; margin-left: 0rem; padding-bottom: .7rem; line-height: 1.3rem; } } .list-no-bullet-small ul { } .list-no-bullet-small li { list-style-type: none; text-indent: 0rem; margin-left: 0rem; padding-bottom: .5rem; font-size: .9rem; line-height: 1.3rem; } .list-no-bullet-small li:last-child { padding-bottom:1.5rem; } /******************** LIST ITEM for Delft Timeline MODAL ************************/ #two-bar-extra-content-menu ul li.timelineDelft { cursor:pointer; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } #two-bar-extra-content-menu ul li.timelineDelft:hover { color: #d0d0d0; text-decoration:none; border-bottom: 1px solid #f4f4f4; } #two-bar-extra-content-menu ul li a:visited { color: #a9a6a6; } #two-bar-extra-content-menu li:not(:has(a)) { /*text-decoration: line-through; /* This adds a cross through */ /* Add any other styles you want for your unlinked item here */ color: #666666; font-weight: bold; } /**********************************************************************************/ /*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> HORIZONTAL LIST >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/ /**********************************************************************************/ .horizontal-list { } .glossary-list { margin: 0rem auto 0rem auto; } .horizontal-list:after { } .horizontal-list li { display: inline-block; list-style-type: none; padding: 1px 8px 1px 8px; margin: 0rem .4rem 0rem .4rem; font-size: .95rem; font-weight:normal; margin-bottom:.5rem; color: #cccccc; border: 1px solid #666666; text-decoration:none; letter-spacing: -1px; } .horizontal-list li:first-child { margin-left: 0rem; text-decoration:none; } .horizontal-list li:last-child { margin-right:0rem; text-decoration:none; } .horizontal-list a:link { color:#666666; text-decoration:none; border-bottom: none; -webkit-transition: color 500ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .horizontal-list a:visited { color:#666666; text-decoration:none; border-bottom: none; } .horizontal-list a:hover { color: #cccccc; text-decoration:none; border-bottom: none; } /**************************** DIRECTIONS **********************************/ #directions, #directions-previous, #directions-next { clear: both; font-size:.85rem; margin: .8rem auto 1em auto; word-spacing: 50px; width:180px; padding-bottom: 0px; background-image:url(background-images/previous-next-arrows.jpg); background-repeat: no-repeat; background-position: 0px 3px; font-family: 'Lato', sans-serif; text-transform: uppercase; text-align: center; } #directions-previous { background-position: 3px 2px; height: 24px; width: 90px; padding-left: 14px; } #directions-next{ background-position: -115px 3px; height: 24px; width: 70px; padding-left: 0px; padding-bottom: .3em; } #directions a:link, #directions-previous a:link, #directions-next a:link { text-decoration: none; border-bottom: none; white-space: nowrap; } .directions-left { float: none; } @media (min-width: 576px) { .directions-left { float: left; justify-content: center; } } #survey-sml { background-image: url(svg-images/survey-sml.svg); background-repeat: no-repeat; background-position: 0px 3px; height: 22px; width: 20px; } /***************** 50% LEFT & RIGHT CONTAINERS *************************/ .fifty-percent-left { width: 50%; float:left; } .fifty-percent-right { width: 50%; float:left; margin-left:35px; } /***************** 25% LEFT & RIGHT CONTAINERS (used only in GLOSSARY SSECTION *******************************/ .box25percent { width: 25%; float:left; } /****************************CENTER ALIGN *************************************/ .center-align { margin-bottom: 2rem; text-align:center; } .center-align img{ margin-left:auto; margin-right:auto; padding-bottom: .3rem; } .center-align p{ padding-top: .1rem; padding-bottom: 1.5rem; } /*********************************** SPAN for "from:" ******************************/ p.from, p.from-two { text-transform: uppercase; border-left: 1px solid #666666; padding: 0rem 0rem 0rem .5rem; font-size: .95rem; margin-top: 1.5rem; margin-bottom: .9rem; line-height: .8em; color:#666666; /*font-style:italic;*/ } p.from-two { text-transform: none; border-left: 1px solid #666666; padding: 0rem 0rem 0rem .5rem; font-size: .95rem; margin-top: 1.5rem; margin-bottom: .9rem; line-height: 1.4em; color:#333333; /*font-style:italic;*/ } .small p{ font-size: .98rem; padding-bottom:1rem; line-height: 1.2em; color:#333333; } .light-gray-background { background-color: #daecfb; opacity: .7; border: 1px solid #666666; border-radius:1px; transition: all 0.23s ease-in-out 0s; padding: 0px 4px 0px 4px; color: #333333; font-weight:bold; margin-right: .1rem; text-transform: none; letter-spacing:.08rem; } /*************************************************************************************/ /************************ TWO TEXT BOXES with LIGHT GRAY BACKGROUND **********************/ /**********************************************************************************/ .text-box-blue { clear: both; padding: 1.5rem .5rem 0rem .5rem; margin: 0em 0rem 1.5em 0em; letter-spacing:.02em; background-color: #f4f4f4; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } @media (min-width: 576px) { .text-box-blue { clear: both; padding: 1.5rem .5rem 0rem 1.5rem; margin: 0em 0rem 1.5em 0em; letter-spacing:.02em; background-color: #f4f4f4; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } } .text-box-blue h3{ margin-bottomn: 1.5rem; margin-bottom: .7rem; text-align: left; margin-top: 0rem; text-transform: uppercase; font-size: 1.1rem; } @media (max-width: 768px) { .text-box-blue h3{ margin-bottom: .7rem; margin-top: 0rem; text-align: center; } } @media (min-width: 768px) { .text-box-blue { padding-top: 1.1em; line-height: 1.5rem; font-size: 1.1rem; } } /******************************* RELATED TOPICS MENU on top, right-hand side of 2-BAR PAGES **********************************/ #two-bar-extra-content-menu { /* background-color: #F6F6F6;*/ width: 100%; font-size: 1.02rem; padding:.3em .3em .3em .7em; margin: .5em auto 1.5em auto; float:none; border: 1px solid #cccccc; line-height: 1.3rem; } @media (min-width: 576px) { #two-bar-extra-content-menu { /* background-color: #F6F6F6;*/ width: 250px; font-size: .9rem; padding: .7em .5em .3em .7em; margin: .5em .5rem 1.5rem 2rem; float: right; border: 1px solid #cccccc; line-height: 1.3em; } } .two-bar-menu-title-extra-content{ font-family: 'Lato', sans-serif; color: black; margin-bottom: 0rem; text-transform: uppercase; display:block; font-size: .95em; margin: 0em 0em 0em -.1em; padding-bottom:0em; padding-top:.4em; letter-spacing: .1em; line-height: 1rem; padding-left: 1em; } #two-bar-extra-content-menu ul { padding-top:.6em; padding-bottom:.3em; } #two-bar-extra-content-menu li, #painting-info li { position: relative; padding-left: 1.5rem; /* Space for the bullet, adjust as needed */ list-style: none; line-height: 1.1rem; padding-top: .1rem; padding-bottom: .23rem; letter-spacing: .01rem; } #two-bar-extra-content-menu li::before, #painting-info li::before { content: ""; position: absolute; left: 0; /* Adjust if needed */ top: 0; /* Align to the top */ width: 1rem; height: 1rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -10px -1450px; } /* Specific style for the list item with ID 'next-painting' */ #two-bar-extra-content-menu #next-painting::before, #painting-info #next-painting::before { background-position: -10px -1500px; /* Adjust the Y-coordinate for the new icon */ } /* Specific style for the list item with ID 'next-painting' */ #two-bar-extra-content-menu #previous-painting::before, #painting-info #previous-painting::before { background-position: -10px -1550px; /* Adjust the Y-coordinate for the new icon */ } #two-bar-extra-content-menu a:link { color: #333333; text-decoration:none; border-bottom: none; -webkit-transition: color 500ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } #two-bar-extra-content-menu a:visited { color: #333333; text-decoration:none; } #two-bar-extra-content-menu a:hover { color: #e1dede; border-bottom: none; } /*******************************************************************************/ /*******************************************************************************/ /******************************* LEFT *****************************************/ /*******************************************************************************/ /*******************************************************************************/ .left { font-family: 'Lato', sans-serif; color: #666666; font-size: .80rem; line-height:1rem; position: -webkit-sticky; position: sticky; top: 120px; height:630px; } .left a:link{ color: #666666; text-decoration: none; border-bottom: 1px solid transparent; -webkit-transition: border 600ms ease; -moz-transition: border 600ms ease; -ms-transition: border 600ms ease; -o-transition: border 600ms ease; transition: border 600ms ease; } .left a:visited { color: #666666; } .left a:hover { border-bottom: 1px solid color: #cccccc;; } .left ul { padding-left: 3em; } .left li { list-style-type: none; margin-bottom:1em; text-indent: 0rem; margin-left: 0rem; padding-top: .5rem; float:left; } /*********************** LEFT LIST ICONS ********************************/ #newsletter-icon, #newsletter, #news, #lightbulb, #email, #facebook, #twitter, #earring, #share-icon, #slideshow, #faq, #info, #share-icon, #instagram, #patreon, #youtube{ display: block; background-image: url(svg-images/svg-sheet.svg); background-repeat: no-repeat; clear: both; padding-left:3em; height:30px; padding-top: 4px; width:100%; background-position: 0px 0px; margin-bottom: .5rem; } #newsletter-icon { background-position: 0px -50px; background-repeat: no-repeat; background-position: -20px -50px; } #news { background-position: -20px -50px; } #lightbulb { background-position: -20px -100px; } #email { background-position: -20px -150px; } #slideshow { background-position: -20px -200px; } #facebook { background-position: -20px -250px; } #twitter { background-position: -20px -300px; } #youtube{ background-position: -20px -1800px; } #patreon { background-position: -20px -1750px; } @media (min-width: 992px) { #youtube { background-position: -20px -1800px; } #twitter { background-position: -20pxx -300px; } } #instagram { background-position: -20px -350px; } #earring { background-position: -20px -400px; } #share-icon { background-position: -20px -450px; } #info { background-position: -20px -500px; } #faq { } #youtube{ background-position: -12px -1800px; } #patreon { background-position: -7px -1850px; } .instagram-lovs { width:300px; height:23px; padding: 0 0 10px 2rem; background: url(svg-images/instagram-color-handle-PLAIN.svg); background-size: 270px; background-repeat:no-repeat; background-position: 0px -24px; margin: 1rem 0 2rem 0; } .instagram-lovs:hover { background-position: 0px 0px; } /********************* LOVS Advertisement ***********************************/ #panel-box-LOVS { background-image:url(background-images/panel-box-milkmiad-detail.jpg); background-size: 100%; color:white; } .LOVS-title { text-align:center; padding-left: 1rem; padding-right: 1rem; padding-bottom: 110px; margin-bottom: 0px; color:white; font-size: 1.8rem } p.LOVS-text { text-align:center; background-color: rgba(0, 0, 0, 0.2); padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; color:white; font-size: 1.1rem } p.LOVS-info { padding-bottom:.1rem; font-weight: bold; margin-left:1rem; text-align:center; color:white; font-size: .9rem; } #look-inside-LOVS { background-image: url(svg-images/svg-sheet-02.svg); background-repeat:no-repeat; background-position: -16px -300px; width:140px; height: 50px; /*border: lime dotted 2px;*/ margin: 8px 0px 0px 1rem; clear:both; } .main-content p.LOVS-format-type { padding-bottom:20px; margin-bottom::30px; font-size:.85rem; font-family:"Times New Roman", Times, serif; color:green; } .main-content ol.LOVS-list{ list-style-position: inside; padding-left:.3rem; padding-bottom:0rem; } .main-content ol li.LOVS-list{ font-size:.94rem; padding-left: .8rem; list-style-position: inside; margin-left: 0rem; padding-bottom:0rem; text-indent:-1em; color:#666666; } /*********************** RATING STARS ********************************/ .new-stars-00, .new-stars-01, .new-stars-02, .new-stars-03, .new-stars-04, .new-stars-05 { background-image: url(svg-images/new-stars-00.svg); background-repeat: no-repeat; background-position: 0px 0px; width:155px; height:25px; padding-left: 3rem; } .new-stars-01 { background-image: url(svg-images/new-stars-01.svg); } .new-stars-02 { background-image: url(svg-images/new-stars-02.svg); } .new-stars-03 { background-image: url(svg-images/new-stars-03.svg); } .new-stars-04 { background-image: url(svg-images/new-stars-04.svg); } .new-stars-05 { background-image: url(svg-images/new-stars-05.svg);; } /***************** TOP MENU FADE-IN "UP" LINK ***************** */ .scroll_To_Top{ padding: .2rem .4rem .3rem .5rem; background: white; position: absolute; cursor: pointer; border-radius: 50%; border: 1px solid #cccccc; z-index: 11; display: block; color: #cccccc; font-size: 1rem; text-decoration: none; letter-spacing: .1rem; top: 1rem; right: 4rem; text-align: center; } .scroll_To_Top:link{ text-decoration:none; border-bottom: none; color: white; text-decoration:none; color: white; -webkit-transition: 700ms ease; -moz-transition: 700ms ease; -ms-transition: 700ms ease; -o-transition: 700ms ease; transition: 700ms ease; } .scroll_To_Top:hover{ text-decoration:none; border-bottom: none; background: #aaaaaa; color: white; } /********************** SCROLL UP BUTTON and SCROLL OFFSET ****************************/ .fixed-scroll-up { background-color:white; color: #999999; width: 30px; height:30px; border-radius: 50%; border: #cccccc 1px solid; position:fixed; z-index:1200; right: 1rem; bottom: .6rem; padding: .4rem .3rem .4rem .35rem; line-height:1rem; font-size: .85rem; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.19); opacity: 0; -webkit-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; -ms-transition: opacity .3s ease-in; transition: opacity .3s ease-in; } @media (min-width: 992px) { .fixed-scroll-up { background-color:white; color: #999999; width:40px; height:40px; border-radius: 50%; border: #cccccc 1px solid; position:fixed; z-index:1200; right: 2rem; bottom: 10rem; padding: .7rem 1rem 1rem .63rem; line-height:1rem; font-size: .85rem; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.19); opacity: 0; -webkit-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; -ms-transition: opacity .3s ease-in; transition: opacity .3s ease-in; } } .scroll-up-visible { opacity: 1; } .fixed-scroll-up a:link { text-decoration:none; border: 0; color:#999999; } .fixed-scroll-up a:visited { text-decoration:none; border: 0; color:#999999; } /********************** SCROLL SOCIAL BUTTON ****************************/ .fixed-scroll-social { position:fixed; z-index:1200; right: 1em; bottom: 3rem; padding: 1rem 1rem 2rem 1rem; line-height:1rem; font-size: .85rem; opacity: 1; -webkit-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; -ms-transition: opacity .3s ease-in; transition: opacity .3s ease-in; } @media (min-width: 992px) { .fixed-scroll-social { position:fixed; z-index:1200; right: 1rem; bottom: 3rem; padding: 1rem 1rem 2rem 1rem; line-height:1rem; font-size: .85rem; opacity: 1; -webkit-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; -ms-transition: opacity .3s ease-in; transition: opacity .3s ease-in; } } .scroll-up-visible { opacity: 1; } .fixed-scroll-up a:link { text-decoration:none; border: 0; color:#999999; } .fixed-scroll-up a:visited { text-decoration:none; border: 0; color:#999999; } a.anchor-offset { padding-top: 60px; margin-top: -60px; border:none; text-decoration:none; } /****************************** FOOTER that turns off on smaller devices ***********************************************/ .footer { color:#333333; background-color: white; border-top: 1px solid #cccccc; margin-top: 0em; text-align: center; font-size: .9rem; padding: 1.2rem 0rem 1.2em 0rem; } .footer a:link{ color:#333333; text-decoration: none; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .footer a:visited { color:#333333; text-decoration: none; border-bottom: 1px solid #d0d0d0; } .footer a:hover { color: #d0d0d0; text-decoration:none; border-bottom: 1px solid #f4f4f4; } /*************** LEFT that goes to bottom of page for smaller devices *********************/ .left-two { font-size: .85em; color: #999999; background-color: white; border-top:1px solid #cccccc; padding-top:.5em; padding-bottom:.5em; } /*********************** LEFT LIST ICONS ********************************/ .footer-icon-newsletter, .footer-icon-news, .footer-icon-lightbulb, .footer-icon-email, .icon-email, .footer-icon-facebook, .footer-icon-earring, .footer-icon-instagram, .footer-icon-twitter, .footer-icon-info, .footer-icon-patreon { background-image: url(svg-images/svg-sheet.svg); background-repeat: no-repeat; background-position: 0px 0px; margin: 0rem .3rem; height: 30px; width: 2rem; display:block; } .footer-icon-newsletter { background-position: -20px -50px; } .footer-icon-lightbulb { background-position: -20px -100px; } .footer-icon-email { background-position: -20px -100px } .icon-email { background-position: -20px -100px } .footer-icon-facebook { background-position: -20px -250px; } .footer-icon-twitter { background-position: -20px -298px; } .footer-icon-instagram { background-position: -20px -348px; } .footer-icon-earring { background-position: -20px -400px; } .footer-icon-info { background-position: -20px -498px; } .footer-icon-patreon { background-position: -10px -1900px; } /*******************************************************************************************/ /*******************************************************************************************/ /****************************** OBJECTS IN 2-BAR FORMAT ********************************** */ /*******************************************************************************************/ /*******************************************************************************************/ /******************************************************************************************/ /******************** EVENTS DOUBLE BOXES WITH NORMAL & SMALL TEXT ************************/ /******************************************************************************************/ .events { border-top: 4px double #cccccc; margin-bottom: 0rem; padding-top: 1.5rem; clear: both; } .events-small { clear: both; border-top: 4px double #cccccc; margin-bottom: 0rem; margin-top: .5rem; padding-top: 1em; font-size: 1rem; line-height: 1.3rem; padding-top: 1.5rem; } .events-small p{ padding-bottom: 1.1rem; } .events-left { line-height: 1.3rem; /*padding: 0rem 0rem 1.5rem 0rem;*/ /*border: 1px solid #eeeeee;*/ } .events-left h2 { line-height: 1rem; padding-bottom: .5rem; text-align:left; font-size: 1.2rem; letter-spacing: 0px; } .events-left img{ padding: .8rem 0rem 1rem 0rem; clear: both; max-width: 100%; } .events-right { /*padding: 0rem 0rem 0rem 0rem;*/ } /************************************** GLOSSARY *****************************************/ .glossaryalphabet { background-color: #F8F8F8; padding: 1rem 1rem 1rem 1rem; margin: 0rem .5rem 1rem .5rem; font-size: .95rem; } .glossaryalphabet ul li{ padding-bottom: 0rem; line-height: 1.4rem; list-style: none; list-style-position: inside; padding-left: 0rem; } .glossaryalphabet a:link { color: #666666; text-decoration: none; border: none; -webkit-transition: color 500ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .glossaryalphabet a:visited { color: #666666; text-decoration: none; border: none; } .glossaryalphabet a:hover { color: #dddddd; text-decoration: none; } .glossarysignature { background-image: url(svg-images/signature-vermeer.svg); background-repeat: no-repeat; background-position: 0px 4px; background size: 3rem; float: left; height: 44px; width: 72px; margin-right: 1rem; } /************************************* VERMEER'S SIGNATURE IMAGES ****************************************/ .signature-box-right { float: none; margin: 1rem auto 1rem auto; clear: both; border: none; padding:1rem } @media (min-width: 576px) { .signature-box-right { float: left; width:250px; margin-left:15px; border: 1px #cccccc solid; } } .signature-box-right img{ display: block; margin: 5px auto 5px auto; } /*************************************************************************************************/ /*************************************************************************************************/ /********** CATALOGUE ELEMENTS used in INDEX for INDIVIDUAL CATALOGUE ENTRIES *******************/ /*************************************************************************************************/ /*************************************************************************************************/ .cat-line { clear: both; border-top: solid 1px #cccccc; margin-top: 1.5rem; padding-top: 1.5rem; } @media (min-width: 576px) { .cat-line { clear: both; border-top: solid 1px #cccccc; margin-top: 1.5rem; padding-top: 2rem; } } .cat-line h2 { line-height: 1rem; font-weight:normal; } /*********************************************** CATALOGUE NUMBER *********************************/ .cat-number { font-size: 2rem; line-height: 2rem; margin: 0rem 0rem 0rem 0rem;; color: #cccccc; float: left; width:50px; /*border: 1px red solid;*/ } @media (min-width: 576px) { .cat-number { font-size: 2rem; line-height: 2rem; margin: 0rem 0rem 0rem 0rem;; color: #cccccc; float: left; width:50px; /*border: 1px red solid;*/ } } /********************************* CATALOGUE THUMBNAIL IMAGE HOLDER *********************************/ .cat-image { margin: 0rem auto 1.5rem auto; width:240px; border: none; /*border: 1px orange solid;*/ } @media (min-width: 576px) { .cat-image { float: left; margin: 0rem 1.3rem 0rem 1.5rem; margin-bottom: 1rem; border: none; width:150px; /*border: 1px orange solid;*/ } } .cat-image img{ margin-bottom: 1rem; border: 0rem; opacity: 1; transition: all .2s ease-in-out; } .cat-image img:hover { opacity: 1; transform: scale(1.05); } /****************************** VERMEER CATALOGUE ENTRY INFORMATION ******************************************/ .cat-info, .cat-info-index{ width: 250px; margin: -.4rem 0rem 0rem 0rem; font-size: 1rem; padding: .1rem .5rem .5rem .5rem; font-weight: normal; line-height: 1.2rem; } @media (min-width: 576px) { .cat-info, .cat-info-index{ float: left; width: 250px; margin: -.4rem 0rem 0rem 0rem; font-size: .9rem; padding: .1rem .5rem .5rem .5rem; font-weight: normal; line-height: 1.1rem; } } .cat-info-index{ float: left; width: 250px; border: 1px solid #cccccc; margin: 0rem auto 0rem auto; display: block; clear: both; float: none; } @media (min-width: 576px) { .cat-info-index{ float: left; width: 250px; border: 1px solid #cccccc; clear: none; margin-bottom: 1.5rem; } } .cat-info-index a:link{ color:#666666; text-decoration:none; -webkit-transition: color 500ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .cat-info-index a:visited { color:#666666; } .cat-info-index a:hover{ color: #e1dede; border-bottom: 1px solid #edebeb; } /*********************************** various HEADINGS ***********************************************/ .cat-info h2, .cat-info-index h2 { margin-bottom: .2rem; padding-bottom: .2rem; margin-top: .5rem; font-size: 1.2rem; font-weight: normal; font-style:italic; text-align: left; line-height:1.3rem; } .cat-line a:link, .cat-info a:link { border: none; text-decoration:none; color:#333333; text-decoration:none; -webkit-transition: color 500ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .cat-line a:visited, .cat-info-index a:visited { color:#333333; } .cat-line a:hover, .cat-info a:hover, .cat-info-index a:hover { color: #e1dede; } /***************************** TEMPORARY LOCATION of CATALOGUE ENTRY **************************************/ .temporarylocationcentry { float: none; width: 250px; color: #999999; background-color: #f9f9f8; margin: 1.5rem auto 0rem auto; dispaly: block; padding: 0.6rem 0.6rem 0.3rem 0.7rem; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } .temporarylocationcentry .cat-line a:link { color: #999999; text-decoration: none; border: none; -webkit-transition: color 500ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .temporarylocationcentry .cat-line a:visited { color: #999999; text-decoration: none; } .temporarylocationcentry .cat-line a:hover { color: #e1dede; } @media (min-width: 576px) { .temporarylocationcentry { float: left; clear:both; width: 420px; color: #999999; background-color: #f9f9f8; margin: 0rem 0rem 0rem 75px; padding: 0.6rem 0.6rem 0.3rem 0.7rem; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } } .temporarylocationcentry p { padding-bottom: .4rem; font-size: .8rem; line-height: 1rem; } .temporarylocationcentry .cat-line a:link { color: #999999; text-decoration: none; border: none; -webkit-transition: color 500ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .temporarylocationcentry .cat-line a:visited { color: #999999; text-decoration: none; } .temporarylocationcentry .cat-line a:hover { color: #e1dede; } /**************************** CONTAINERS for DUTCH PAINTINGS & VERMEER in FRAMES SECTIONS ****************************/ .dutch-master-thumbnail { height: 100px; margin-left: .5rem; float: left; } .frames-dutch-picture-container { clear: both; margin-left: 1rem; padding-left: 1rem; border-left: solid 1px #cccccc; float: left; } .picture-container-frames { float: left; margin-top: .6rem; } .picture-container-frames img{ } .picture-container { clear: both; margin-top: 1.5rem; } #dutch-painters-container { clear: both; } /***********************************************************************************************************************************************/ /***** PAINTING inside RELATED ARTWORKS - CATALOGUE - XXL IMAGES - DUTCH PAINTINGS - ABOUT - FRAMED PAINTINGS **********************/ /***********************************************************************************************************************************************/ #painting-info { line-height: 1.3em; font-size: 1.05rem; padding: .8rem .5rem .8rem 1rem; width: 100%; border: solid 1px #cccccc; margin: .6em auto 1.5em auto; } @media (min-width: 576px) { #painting-info { line-height: 1.3em; font-size: .85rem; padding: .8rem .5rem .8rem 1rem; float: left; clear: both; width: 250px; border: solid 1px #cccccc; margin: .6em 2rem 1em 0rem; } } #painting-info h2 { margin: 0; padding: 0.1rem 0 0.4rem; border: none; text-decoration: none; font-weight: normal; font-size: 1.2rem; font-style: italic; text-align: left; line-height: 1.2rem; letter-spacing: 0.05rem; } @media (min-width: 576px) { #painting-info h2 { font-size: 1.2rem; /* Only change what is different at this breakpoint */ } } #painting-info ul { margin-top:1rem; border-top: 1px solid #cccccc; padding-top: 1rem; } #painting-info a:link { color: #333333; border:none; text-decoration: none; -webkit-transition: color 500ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } #painting-info a:visited { color: #333333; border:none; text-decoration: none; } #painting-info a:hover { color: #e1dede; } /*************************************************************************************/ /****************************** RELATED IMAGES SECTION ********************************/ /*************************************************************************************/ .related-images-box { margin-top:1rem; padding-top: 1.5rem; line-height: 1.3rem; border-top: 1px solid #cccccc; padding-top: 1.5em; clear: both; } .related-images-lightbox { padding: 0rem 0rem 1em 0rem; margin: 0rem auto 0rem auto; display: block; width:200px; } @media (min-width: 678px) { .related-images-lightbox { padding: 0rem 0rem 0rem 0rem; margin: 0rem 1rem 1.5rem 0rem; float:left; } } .related-images-lightbox img{ background-image: url(svg-images/enlarge-01.svg); background-size: 14px 12px; background-repeat: no-repeat;; background-position: right 0rem bottom .2rem; padding-bottom: 1.4rem; border: none; text-decoration: none; opacity: 1; -webkit-transition: 400ms ease; -moz-transition: 400ms ease; -ms-transition: 400ms ease; -o-transition: 400ms ease; transition: 400ms ease; } .related-images-lightbox img:hover { opacity: .8; } .related-images-caption, .related-images-caption-vermeer { width: 250px; padding: .6rem .5rem .5rem .7rem; border: solid 1px #cccccc; line-height: 1.2rem; font-size: 1rem; display: block; margin: 0rem auto 1.5rem auto; } @media (min-width: 678px) { .related-images-caption, .related-images-caption-vermeer { width: 250px; padding: .6rem .5rem .5rem .7rem; border: solid 1px #cccccc; line-height: 1.2rem; font-size: .9rem; display: block; margin: 0rem auto 1.5rem auto; margin-left: 1rem; float: right; } } .related-double-box { clear:none; } @media (min-width: 678px) { .related-double-box { } } .related-images-caption-vermeer { border:solid 1px #9e444c; } .related-images-textbox { width: 250px; padding: .5rem .5rem .5rem .5rem; margin: 0rem auto 0rem auto; border: solid 1px #cccccc; line-height: 1.2rem; font-size:1rem; } @media (min-width: 678px) { .related-images-textbox { float: right;; margin-bottom: 1.5rem; font-size:.9rem; } } .related-images-textbox p { } /*******************************************/ /*******************************************/ /*******************************************/ /****** MISC & BULLETS for TEXTS ********* */ /*******************************************/ /*******************************************/ /*******************************************/ sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5rem; } /************************************ BULLET for CHECKMARK ***************************************** */ .checkmark { position: relative; padding-left: 2rem; /* Space for the icon */ } .checkmark::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -800px; } /********************************* BULLET for "CLICK HERE" ************************************ */ .svg-click-here { position: relative; padding-left: 1.5rem; /* Space for the icon */ } .svg-click-here::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -600px; } /************************************ LINK ***************************************** */ .svg-link{ position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-link::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -550px; } /************************************ MAGNIFYING GLASS ***************************************** */ .svg-glass { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-glass::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -750px; } /***************** BULLET for MOUSE ***************** */ .svg-mouse { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-mouse::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -650px; } /***************** BULLET for PENCIL NOTE ***************** */ .svg-pencil { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-pencil::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -700px; } /***************** BULLET for PUSH PIN ***************** */ .svg-museum { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-museum::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -1050px; } /************************************ DOWNLOAD PDF ***************************************** */ .svg-download-pdf { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-download-pdf::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -1150px; } /***************** BULLET for TWO MUSICAL NOTES ***************** */ .svg-musical-notes { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-musical-notes::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -1100px; } /************************************ MAP ***************************************** */ .svg-map{ position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-map::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -1200px; } /***************** BULLET for MUSIC CLASSIFICATION ***************** */ .svg-music { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-music::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -1250px; } /***************** BULLET for PUSH PIN ***************** */ .svg-pushpin { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-pushpin::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -1000px; } /***************** BULLET for LISTEN to MUSIC***************** */ .svg-listen-to-music { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-listen-to-music::before { content: ""; position: absolute; left: -3px; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -850px; } /***************** TUBE OF PAINT for PALETTE SECTION ***************** */ .svg-tube-paint { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-tube-paint::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -1300px; } /***************** BULLET for SPEAKER ***************** */ .svg-speaker { position: relative; padding-left: 1.5rem; /* Space for the icon */ } .svg-speaker::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -850px; } /***************** BULLET for DOWNLOAD ***************** */ .svg-download { position: relative; padding-left: 2rem; /* Space for the icon */ } .svg-download::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -1350px; } /***************** BULLET for UNDER CNSTRUCTION ***************** */ .construction { position: relative; padding-left: 2rem; /* Space for the icon */ } .construction::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -1400px; } /****************************** OPENBOOK for EXHIBITION PAGE ****************************/ .pdf-exhibits { position: relative; padding-left: 1.5rem; /* Space for the icon */ } .pdf-exhibits::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -10px -1600px; } /***************** WORLD CATALOGUE ICON FOR VERMEER EXHIBITION PAGE ***************** */ .worldcat-exhibits { position: relative; padding-left: 1.5rem; /* Space for the icon */ } .worldcat-exhibits::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -14px -1700px; } /***************** AMAZON ICON FOR VERMEER EXHIBITION PAGE ***************** */ .amazon-exhibits { position: relative; padding-left: 1.5rem; /* Space for the icon */ } .amazon-exhibits::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -14px -1650px; } /***************** ICON for AMAZON BRAND NAME for BOOKSHOPS ***************** */ .svg-amazon { position: relative; padding-left: 1.5rem; /* Space for the icon */ } .svg-amazon::before { content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -14px -1650px; } /************* SMALL BLCK BALLONS WITH "NEW" "UPDATED "OUTGOING" and "REVISED" *******/ .after-NEW-svg { position: relative; padding-right: 2.5rem; /* Space for the icon, adjusted to the right */ } .after-NEW-svg::after { content: ""; position: absolute; width: 40px; height: 16px; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -10px -2450px; } /************* SMALL BLCK BALLONS WITH "ONGOING" *******/ .after-ONGOING-svg { position: relative; padding-right: 2.5rem; /* Space for the icon, adjusted to the right */ } .after-ONGOING-svg::after { content: ""; position: absolute; width: 65px; height: 16px; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -10px -2250px; } /************* SMALL BLCK BALLONS WITH "REVISED" *******/ .after-REVISED-svg { position: relative; padding-right: 2.5rem; /* Space for the icon, adjusted to the right */ } .after-REVISED-svg::after { content: ""; position: absolute; width: 65px; height: 16px; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -10px -2350px; } /************* SMALL BLCK BALLONS WITH "UPDATED" *******/ .after-UPDATED-svg { position: relative; padding-right: 2.5rem; /* Space for the icon, adjusted to the right */ } .after-UPDATED-svg::after { content: ""; position: absolute; width: 65px; height: 16px; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -10px -2400px; } /***************** BULLET for LISTEN to MUSIC***************** */ .youtube { position: relative; padding-left: 3rem; /* Space for the icon, adjusted to the right */ } .youtube::before { content: ""; position: absolute; left: 0px; top: 2px; width: 2.8rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -20px -1750px; } /***************************************** CLEAR DIVS *********************************/ .clearboth { clear: both; } .clearboth-and-space { clear: both; margin-bottom: 2rem; } .clearboth-and-space-sml { clear: both; margin-bottom: 1rem; } /************************************** DIV FLOAT LEFT *********************************/ .float-left { float: left; margin-right: 1rem; margin-top: .1rem; } .float-left img{ margin-bottom: 1.3rem; } /*************************** AMAZON LINKS on BOOKSHOP PAGES *******************************/ .amazonlinks { background-image: url(svg-images/amazon.svg); background-repeat: no-repeat; background-position: 0px 0px; padding-left: 2rem; padding-bottom:1rem } .events-right .amazonlinks a:link { border-bottom: none; text-decoration: none; } .events-right .amazonlinks a:visited { border-bottom: none; text-decoration: none; } .events-right .amazonlinks a:hover { } .amazonlinksbrit { background-image: url(svg-images/british-flag.svg); background-repeat: no-repeat; background-position: 4px 3px; background-size: 1.1rem; padding-left: 2.1rem; margin-bottom: 1rem; margin-top: 0px; } .events-right .amazonlinksbrit a:link { border-bottom: none; text-decoration: none; } .events-right .amazonlinksbrit a:visited { border-bottom: none; text-decoration: none; } .events-right .amazonlinksbrit a:hover { } /******* USED ONLY in FOLK MUSICICAL INSTRUMENT SECTION ***********/ .musiclangfolk { font-size: .9rem; float: right; margin: 0rem .5rem 1rem .6rem; border: 1px dotted #cccccc; padding: .9rem; background-color: #FDFDFD; font-size: .9rem; } .musiclangfolk p{ padding-bottom: .4rem; line-height: 1.2rem; font-size: 1.05rem; } /************* IMAGE HOLDERS FOR VERMEER'S WOMEN ************/ .woman { float: left; margin-right: 1rem; margin-bottom: 1rem; } .womanlarge { width: 120px; height: 200px; float: left; margin-left: 35px; margin-bottom: 15px; font-size: .75em; line-height: 1.3em; font-style:italic; text-align: left--; margin-bottom: 2em; } .womanlarge img{ margin-bottom: .8rem; } /************************************* TIMELINE RULES ******************************* */ .all-painters-dutch, .all-painters-dutch-01, .all-painters-dutch-02, .all-painters-dutch-03, .all-painters-dutch-04, .all-painters-dutch-05 { background-image: url(../timelines/timeline-svgs/background-centuries-of-vermeers-time.svg); background-repeat: repeat-y; padding-top:2rem; } @media (max-width: 992px) { .all-painters-dutch { margin-left:40px; padding-top:2rem; } } @media (max-width: 615px) { .all-painters-dutch-01 { padding-top:2rem; } } @media (max-width: 576px) { .all-painters-dutch-02 { padding-top:2rem; } } @media (max-width: 640) { .all-painters-dutch-03 { padding-top:2rem; } } @media (max-width: 730px) { .all-painters-dutch-04 { padding-top:2rem; } } @media (max-width: 820px) { .all-painters-dutch-05 {; padding-top:2rem; } } .all-painters { background-image:url(../timelines/timeline-svgs/background-centuries-1200-1800.svg); background-repeat: repeat-y; width:2100px; /*border-top: 1px solid #cccccc;*/ } .self-portraits { background-image: url(../timelines/timeline-svgs/background-self-portraits.svg); background-repeat: repeat-y; width:2100px; /*border-top: 1px solid #cccccc;*/ } /*.all-painters-vermeers-time { background-image: url(../timelines/timeline-svgs/background-centuries-of-vermeers-time.svg); background-repeat: repeat-y; padding-top:2rem;} */ .timelinepainter { color: #666666; border: 1px solid #999999; padding: 0px 0px; margin-bottom: .8rem; font-size: .85rem; text-align: center; background-color:white; line-height:1.1rem; } .timelinepainter:hover { background-color: #FCFCFC; border: 1px solid #999999; cursor:pointer; line-height:1.1rem; margin-bottom: .8rem; font-size: .85rem; padding: 0px 0px; box-shadow: 0 0 5px 2px rgba(0,0,0,.06); } .timelinepainter li{ font-size: .95rem; line-height:1.1rem; } .timelinepainter a:link { text-decoration: none; border:none; line-height:1.1rem; } .timelinepainter a:visited { text-decoration: none; border:none; line-height:1.1rem; } .list-timeline li a:hover { text-decoration: none; border:none; line-height:1.1rem; } /************************************* 5-PART VERMEER TIMELINE IMAGE CONTAINERS ******************************* */ .timelineimages { font-size: 75%; line-height: 1.2rem; color: #999999; text-align: left; vertical-align: top; text-align: left; float: left; width: 150px; margin: .5rem 1.5rem 1rem 0rem; padding: 0rem 1rem 0rem .5rem; border-right: 1px solid #cccccc; } .timelineimages img{ padding-bottom: .5rem; clear: both; } .timeline-caption{ clear: both; } /************** MUSEUM PICTURES *****************/ .imagehold-thumbnail { margin-bottom:1.5em; } /************** DUTCH MUSEUMS *****************/ .vermeerpicsandsigs { background-image: url(background-images/depricated/signature_vermeer.jpg); background-repeat: no-repeat; background-position: left top; height: 90px; width: 650px; padding-left: 60px; margin-bottom: 1.5em; } .vermeerpicsandsigs img{ float:left; padding-left: 2em; } /************************************* FORMATS SERIES OF IMAGES on DELFT IMPRESSIONS PAGE ******************************* */ .thumbsdelft { float: left; height: 100px; width: 100px; margin-top: 10px; margin-right: 28px; margin-bottom: 28px; margin-left: 10px; border: 2px solid #FFFFFF; } /***************** MUSIC BOX FFOR ALL MUSIC SECTIONS ***************** */ .music-box { margin: .3em 2em .5em 0em; width:250px; border: 1px solid #cccccc; padding: .7em .5em 0em 1em; float: left; } .music-box p { font-size: .85em; padding-bottom: .8rem; line-height: 1.3em;} /***************** FIGURE-CAPTION SPAN ***************** */ /*#brandname { height: 25px; width: 20px; background-image: url(background-images/brandname-sml.png); background-repeat: no-repeat; background-position: 0px 0px; margin-top: 0em; margin-right: auto; margin-bottom: 6em; margin-left: auto; clear: both; }*/ /***************** VERMEER TRAVEL PAGES *****************/ #amsterdam_travel { background-image: url(../vermeer_trips/trips-images/amsterdam.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 12px; margin-bottom: 1.3em; } #berlin_travel { background-image: url(../vermeer_trips/trips-images/berlin2.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 12px; margin-bottom: 1.3em; } #braunschweig_travel { background-image: url(../vermeer_trips/trips-images/braunschweig.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 12px; margin-bottom: 1.3em; } #dresden_travel { background-image: url(../vermeer_trips/trips-images/dresden.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 8px; margin-bottom: 1em; } #dublin_travel { background-image: url(../vermeer_trips/trips-images/dublin.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 8px; margin-bottom: 1.3em; } #edinburgh_travel { background-image: url(../vermeer_trips/trips-images/edinburgh.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 16px; margin-bottom: 1.3em; } #frankfurt_travel { background-image: url(../vermeer_trips/trips-images/frankfurt.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 16px; margin-bottom: 1em; } #europe-travel { background-image: url(svg-images/map-of-europe-with-travel-routes.svg); background-repeat: no-repeat; background-size: 700px 467px; background-position: 0px 0px; height: 467px; width: 700px; margin-bottom: 1.3em; border: 1px solid #cccccc; } #hague_travel { background-image: url(../vermeer_trips/trips-images/hague.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 8px; margin-bottom: 1.3em; } #london_travel { background-image: url(../vermeer_trips/trips-images/london.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 8px; margin-bottom: 1.3em; } #paris_travel { background-image: url(../vermeer_trips/trips-images/paris.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 8px; margin-bottom: 1em; } #vienna_travel { background-image: url(../vermeer_trips/trips-images/vienna.jpg); background-repeat: no-repeat; height: 300px; width: 500px; padding-left: 12px; margin-bottom: 1.3em; } /***************** TIMELINE OF EUROPEAN PAINTERS *****************/ .timelineimages { font-size: 95%; line-heigth: 1em; line-height: 1em; text-align: center; vertical-align: top; float: left; width: 100px; margin-right: 1em; padding: 3px 3px 3px 3px; } .timelineimages img{ padding-bottom: 1em; } .dates { float: left; width: 187px; padding-left: 8px; margin-top: 16px; margin-bottom: 16px; } .timelinepainterfl { font-size: 80%; line-height: 1em; background-color: #F7E8EA; padding: 2px; clear: both; float: left; border: 1px solid #cccccc; margin-bottom: 10px; text-align: center; } .timelinepainterfr { font-size: 80%; line-height: 1em; background-color: #F7E8EA; padding: 2px; clear: both; float: left; border: 1px solid #cccccc; margin-bottom: 10px; text-align: center; } .timelinepainterfr { background-color: #E8ECF7; } .timelinepainterit { font-size: 80%; line-height: 1em; background-color: #F7E8EA; padding: 2px; clear: both; float: left; border: 1px solid #cccccc; margin-bottom: 10px; text-align: center; } .timelinepainterit { background-color: #E8F7EE; } .timelinepaintern { font-size: 80%; line-height: 1em; background-color: #F7E8EA; padding: 2px; clear: both; float: left; border: 1px solid #cccccc; margin-bottom: 10px; text-align: center; } .timelinepaintern { background-color: #EFEFEF; } .timelinepainterssp { font-size: 80%; line-height: 1em; background-color: #F7E8EA; padding: 2px; clear: both; float: left; border: 1px solid #cccccc; margin-bottom: 10px; text-align: center; } .timelinepainterssp { background-color: #F7F5D5; } /***********************+** ABOUT SECTION ****************************/ .about-book { width: 320px; font-size: .95em; border: 1px solid #cccccc; padding: .7rem .5rem .7rem .7rem; line-height: 1.4em; margin-bottom: 1.5em; } .about-book img { float:left; margin: 0em 1.5em .3rem 0em; clear: none; display: block; } .about-book h2{ margin-top: 0rem; margin-bottom: .25rem; padding-bottom: .0em; font-size: 1.2rem; line-height: 1.2rem; text-align:left; font-style: normal; } /************************** BOOTSTRAP ELEMENTS **************************************/ /************************** BOOTSTRAP ELEMENTS **************************************/ /************************** BOOTSTRAP ELEMENTS **************************************/ .panel-box { border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding: .3em 0em .3em 0em; margin-bottom:1.5em; background-color: #f4f4f4; } /************************************ MAGNIFYING GLASS ***************************************** */ .collapse-panel { position: relative; padding-left: 2rem; /* Space for the icon */ } .collapse-panel::before { content: ""; position: absolute; left: 0; top: 2px; width: 2.5rem; height: 2rem; background-image: url('svg-images/svg-sheet.svg'); background-repeat: no-repeat; background-position: -10px -2200px; } .collapse-panel, .collapse-panel-maps { cursor:pointer; margin-bottom:0em; letter-spacing:.05em; font-size: .95rem; display: inline-block; padding-left: 3rem; padding:bottom: 0; margin-bottom: 0; /* remove default margin */ padding-bottom: 0; /* ensure no padding below */ opacity: 1; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .collapse-panel-maps { font-size: .95rem; } @media (min-width: 576px) { .collapse-panel { font-size: 1.1rem; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } } .collapse-panel:hover { color:#cccccc; } .collapse-panel-content { margin-top:0rem; margin-bottom:1rem; line-height: 1.5em; padding: 1rem .5rem 0rem .5rem; background-color: #f4f4f4; /*border-left: 1px solid #cccccc;*/ } @media (min-width: 576px) { .collapse-panel-content { margin-top:0rem; margin-bottom:1rem; line-height: 1.5em; padding: 1rem 1rem 0rem 1.5rem; background-color: #f4f4f4; /*border-left: 1px solid #cccccc;*/ } } .collapse-panel-content p { font-size: .98rem; padding-bottom: 1.1em; font-size: 1.075rem; line-height: 1.6rem; } .collapse-panel-content ul li { line-height: 1.5em; font-size: .95rem; margin-bottom: .5rem; } /*********************************************** BOOTSTRAP MODAL for SHARE BUTTONS ******************************************************/ /*this makes AddtoAny icons smaller */ .a2a_svg, .a2a_count { /*this makes AddtoAny icons smaller */ width: 3rem!important; height: 3rem!important; margin: 0rem .3rem; border-radius: .5rem!important; } /*this makes AddtoAny icons larger */ @media (min-width: 992px) { .a2a_svg, .a2a_count { width: 5rem!important; height: 5rem!important; margin: 0rem 1rem; border-radius: .5rem!important; } } /****************** this removes background color and border from close button in SHARE MODAL ****************************/ .share-close { background-color: transparent!important; border: 0px} .share-close:hover { background-color: transparent!important; border: 0px; color: #cccccc; } #my_centered_buttons { display: flex; justify-content: center; } .modal-text:after { content: url("../css/svg-images/enlarge-01.svg"); } /********************************** BASIC MODAL LAYOUT *************************************** */ h6.modal-title { font-size:1.2rem; text-align:left; } @media (max-width: 450px) { h6.modal-title { font-size:1rem; text-align:left; } } @media (max-width: 320px) { h6.modal-title { font-size:.8rem; text-align:left; padding-left:3px; } } .modal-header { background-image: url(svg-images/ev-brands.svg); background-repeat:no-repeat; background-position: -12px 10px; height:60px; border-bottom: none; padding-left: 60px; } @media (max-width: 400px) { .modal-header { background-image: none; height:50px; border-bottom: none; padding-left: 15px; } } .modal-body { list-style-position:inside; padding:2rem; } .modal-footer { display:none; } .btn-modal { color: #666666; border: 1px solid #666666; padding:0rem 2rem 0rem 2rem; background-color: #F7F7F7; text-transform:uppercase; font-size: 1rem; letter-spacing:.05rem; border-radius: 0; } input { width:100%; padding: .25rem } textarea { width:100%; padding: .25rem } /*************************** MODAL AND BUTTON COMPLETE PAINTING MODAL ******************************/ .oeuver-button{ background-color: #FAFAFA; line-height:1rem; font-size:.95rem; padding:.3rem; border: 1px solid #cccccc; cursor:pointer; } .oeuver-button:hover{ background-color: #F3F3F3; line-height:1rem; font-size:.95rem; padding:.3rem; border: 1px solid #cccccc; cursor:pointer; } /******************** MODAL COMPLETE PAINTING QUICK SEARCH ******************************/ #quick-search-container { border: 1px solid #cccccc; position: fixed; top: 25px; right: 25px; background: white; padding:0px 8px 0px 8px; font-size:.87rem; color:#666666; border-radius: 10px; /* Adjust the value as needed */ } } #quick-search-container:hover { background: #ffffff; } @media (max-width: 760px) { #quick-search-container { color:#666666; background-color: white; border: none; font-size: 1rem; letter-spacing: 0rem; line-height: 1.2rem; position: absolute; margin-top:190px; padding:12px 8px 12px 8px; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; border-radius:0px; width:100%; height:40px; bottom: 0px; right: 0px; text-align:center; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } } #quick-search-container a:link{ color:#666666; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } #quick-search-container a:visited{ color:#666666; } #quick-search-container a:hover{ color:#aaaaaa; border:0; text-decoration:underline; } @media (max-width: 768px) { #quick-search-container a:link{ color:#999999; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } } @media (max-width: 768px) { #quick-search-container a:visited{ color:#999999; } } @media (max-width: 768px) { #quick-search-container a:hover{ color:#666666; border:0; text-decoration:underline; } } .find-it { display: inline; } @media (max-width: 576px) { .find-it { display: none; } } #all-paintings { padding-top: 0px; padding-bottom: 0px; } #all-paintings .tool { border: 0; text-decoration:none; } #all-paintings img{ opacity: 1; transition: all .2s ease-in-out; } #all-paintings img:hover { opacity:1; transform: scale(1.08); } /* makes thumbmnaild get smaller on small devices */ .quicksearch-image { width:50px; } @media (min-width: 563px) { .quicksearch-image { width:70px; } } /*************************** QUICK SEARCH DIVS ******************************/ .quick-find-diana, .quick-find-christ, .quick-find-procuress, .quick-find-asleep, .quick-find-open, .quick-find-milk, .quick-find-officer, .quick-find-interrupted,.quick-find-berlin, .quick-find-street, .quick-find-glass, .quick-find-view, .quick-find-music, .quick-find-pitcher, .quick-find-lute, .quick-find-picher, .quick-find-blue, .quick-find-necklace,.quick-find-balance, .quick-find-concert, .quick-find-writing, .quick-find-art, .quick-find-earring, .quick-find-hat, .quick-find-mistress, .quick-find-flute, .quick-find-study, .quick-find-astronomer, .quick-find-geographer, .quick-find-love, .quick-find-lace, .quick-find-guitar, .quick-find-beit, .quick-find-standing, .quick-find-seated, .quick-find-faith,.quick-find-praxedis, .quick-find-rolin { width:70px; height: 66px; background-image: url(background-images/quick-search-catalog-sheet.jpg); background-repeat:no-repeat; background-position: 0px 0px; float: left; transition: all .2s ease-in-out; } .quick-find-diana:hover, .quick-find-christ:hover, .quick-find-procuress:hover, .quick-find-asleep:hover, .quick-find-open:hover, .quick-find-milk:hover, .quick-find-officer:hover, .quick-find-interrupted:hover,.quick-find-berlin:hover, .quick-find-street:hover, .quick-find-glass:hover, .quick-find-view:hover, .quick-find-music:hover, .quick-find-pitcher:hover, .quick-find-lute:hover, .quick-find-picher:hover, .quick-find-blue:hover, .quick-find-necklace:hover,.quick-find-balance:hover, .quick-find-concert:hover, .quick-find-writing:hover, .quick-find-art:hover, .quick-find-earring:hover, .quick-find-hat:hover, .quick-find-mistress:hover, .quick-find-flute:hover, .quick-find-study:hover, .quick-find-astronomer:hover, .quick-find-geographer:hover, .quick-find-love:hover, .quick-find-lace:hover, .quick-find-guitar:hover, .quick-find-beit:hover, .quick-find-standing:hover, .quick-find-seated:hover, .quick-find-faith:hover,.quick-find-praxedis:hover, .quick-find-rolin:hover { transform: scale(1.12); } .quick-find-christ { height: 78px; background-position: -70px 0px; } .quick-find-procuress { height: 78px; background-position: -140px 0px; } .quick-find-asleep { height: 81px; background-position: -210px 0px; } .quick-find-open { height: 95px; background-position: 0px -100px; } .quick-find-officer { height: 76px; background-position: -70px -100px; } .quick-find-milk { height: 79px; background-position: -140px -100px; } .quick-find-interrupted { height: 61px; background-position: -210px -100px; float: left; } .quick-find-berlin { height: 62px; background-position: 0px -200px; } .quick-find-street { height: 86px; background-position: -70px -200px; } .quick-find-glass { height: 82px; background-position: -140px -200px; } .quick-find-view { height: 64px; background-position: -210px -200px; } .quick-find-music { height: 80px; background-position: 0px -300px; } .quick-find-pitcher { height: 80px; background-position: -70px -300px; } .quick-find-lute { height: 80px; background-position: -140px -300px; } .quick-find-blue { height: 84px; background-position: -210px -300px; } .quick-find-necklace { height: 81px; background-position: 0px -400px; float: left; } .quick-find-balance { height: 78px; background-position: -70px -400px; float: left; } .quick-find-concert { height: 79px; background-position: -140px -400px; float: left; } .quick-find-writing { height: 79px; background-position: -210px -400px; float: left; } .quick-find-art { height: 83px; background-position: 0px -500px; float: left; } .quick-find-earring { height: 82px; background-position: -70px -500px; float: left; } .quick-find-hat { height: 89px; background-position: -140px -500px; float: left; } .quick-find-mistress { height: 81px; background-position: -210px -500px; float: left; } .quick-find-flute { height: 79px; background-position: 0px -600px; float: left; } .quick-find-study { height: 78px; background-position: -70px -600px; float: left; } .quick-find-astronomer { height: 80px; background-position: -140px -600px; float: left; } .quick-find-geographer { height: 79px; background-position: -210px -600px; float: left; } .quick-find-love { height: 81px; background-position: 0px -700px; float: left; } .quick-find-lace { height: 82px; background-position: -70px -700px; float: left; } .quick-find-guitar { height: 80px; background-position: -140px -700px; float: left; } .quick-find-beit { height: 85px; background-position: -210px -700px; float: left; } .quick-find-standing { height: 81px; background-position: 0px -800px; float: left; } .quick-find-seated { height: 77px; background-position: -70px -800px; float: left; } .quick-find-faith { height: 91px; background-position: -140px -800px; float: left; } .quick-find-praxedis { height: 86px; background-position: -210px -800px; float: left; } .quick-find-rolin { height: 88px; background-position: 0px -900px; float: left; } /*************************** BECOME A PATRON in jumbotron ******************************/ #become-a-patron { background-image: url(svg-images/svg-sheet-02.svg); background-repeat: no-repeat; clear: both; height:30px; padding-top: 4px; /*background-position: -16px -61px;*/ background-position: -16px -241px; margin-bottom: .5rem; width: 150px; height:22px; position: fixed; top: 21px; left: 25px; } #become-a-patron:hover { background-image: url(svg-images/svg-sheet-02.svg); background-repeat: no-repeat; /*background-position: -16px -31px;*/ background-position: -16px -272px; background-repeat:no-repeat; width: 150px; height:22px; position: fixed; top: 21px; left: 25px; } /*******************************************************************************/ /*************************** BOOTSTRAP ELEMENTS ******************************/ /*******************************************************************************/ /*************************** BOOTSTRAP POPOVER with images AND text ******************************/ /* popover frame*/ .popover { font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; border-radius: 0; -moz-box-shadow: 0 0 10px #cccccc; -webkit-box-shadow: 0 0 10px #cccccc; box-shadow: 0 0 10px #cccccc; border: none; max-width: 300px; } h3.popover { font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; } /*lower part which holds text*/ .popover-header { font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; color: gray; background-color: white; line-height: 1.1rem; font-size: .9rem; background-color: white; color:#666666; font-style: normal; font-weight:normal; } /*upper part wich holds image*/ .popover-body { font-size: .9rem; padding: .5rem .75rem; background-color: white; color:#666666; display: block;/*this removes popover body where image goes, in use for now ONLY in FAMILY TREE article*/ } .popover img{ max-width:100%; } .popover-header p { margin-bottom: .5rem; font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; } /*body color of popover arrow*/ .bs-popover-auto[x-placement^="bottom"] > .arrow::after, .bs-popover-bottom > .arrow::after { top: 1px; border-width: 0 .5rem .5rem .5rem; } /*************************** BOOTSTRAP TOOLTIP box and text ******************************/ .tooltip >.tooltip-inner { background-color: white; opacity: 1 !important; border: 1px solid #cccccc; max-width: 250px; padding: .5rem .5rem; color: #333333; text-align: left; font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; font-size: .85rem; letter-spacing: 0rem; line-height: 1rem; font-weight: normal; -webkit-font-smoothing: antialiased; -webkit-filter: blur(0.000001px); font-smoothing: antialiased; filter: blur(0.000001px); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .tooltip.in { opacity: 1 !important; filter:alpha(opacity=100) !important; } .tool { border-bottom: 1px solid #cccccc; background-color: white} .tool:hover { cursor:pointer; } .tooltip-inner { background-color: white; max-width: 200px; color: #fff; text-align: center; background-color: #000; border-radius: 0rem; box-shadow: 0 8px 6px -6px #dddddd;/*puts slight shadow on bottom of tooltip inner*/ } .tooltip.bs-tooltip-right .arrow:before {/*removes arrow from tooltip*/ border-right-color: #ffffff !important; } .tooltip.bs-tooltip-left .arrow:before { border-left-color: #ffffff !important; } .tooltip.bs-tooltip-bottom .arrow:before { border-bottom-color: #ffffff !important; } .tooltip.bs-tooltip-top .arrow:before { border-top-color: #ffffff !important; } .tooltip.show {/*makes tooltip completely opaque*/ opacity: 1!important; } /******************************* BOOTSTRAP GENERAL TABLE ********************************/ table { font-size: .8em; background-color: white; } /************************** COLOR HOVER IN TABLE ROWS ************************************/ .table-hover tbody tr:hover td { background: #F6F6F6; } /*************************** various BUTTONS and ACCORDIANS *******************************/ btn .btn-link.focus, btn .btn-link:focus, .btn-link-drop:focus { text-decoration: none!important; box-shadow: none!important; } .page-link:focus { z-index: 2; outline: 0; text-decoration: none; box-shadow: none; } .btn-link.focus,.btn-link:focus { text-decoration: none; box-shadow: none; } .btn-link { color:#666666; font-size: .85em; } .btn-link-drop { color:#666666; font-size: .85em; border:1px solid #cccccc; border-radius: 0; } .btn-link-drop:hover { color: #666666; background-color: #F6F6F6; border:1px solid #cccccc; border-radius: 0; } #accordion-perspective { margin-bottom: 1.5em; } #accordion-perspective .card-body { font-size: .9em; line-height: 1.5em; } #accordion-glossary { margin-bottom: 1.5em; } #accordion-glossary li { color: #aaaaaa; text-indent: -1.3em; padding-left:1em; } #accordion-glossary .card-body { font-size: .9em; line-height: 1.5em; } #basic-accordian { margin-bottom: 1.5em; } .card-body { font-size: .95rem; line-height: 1.5em; padding: 1rem 1rem 1rem 2rem; } /******************************* BOOTSTRAP CAROUSEL ********************************/ .carousel { border-radius: 100%; } .carousel-caption { line-height: 1.1rem; color: #666666; text-align: left; position: absolute; bottom: -28px; } @media (min-width: 576px) { .carousel-caption { line-height: 1.1rem; color: #666666; text-align: left; position: absolute; bottom: -28px; } } .carousel-caption h6{ font-size: .7rem; } @media (min-width: 576px) { .carousel-caption h6{ font-size: .8rem; } } .carousel-caption a:link{ font-size: .7rem; line-height: 1.1rem; color: #666666; font-style:italic; font-weight: bold; } .carousel-caption a:visited{ font-size: .7rem; line-height: 1.1rem; color: #666666; font-weight:bold; } .carousel-caption a:hover { font-size: .7rem; line-height: 1.1rem; color: #9E9E9E; text-underline: none; font-weight:bold; } .carousel-control-next-icon, .carousel-control-prev-icon { display: inline-block; background: no-repeat 50%/100% 100%; background-repeat: no-repeat; background-image: none; margin-top: -100px; /*regulate horizontal positon of icons*/ } .carousel-control-prev-icon { background-image: url(../css/svg-images/carousel-backwards.svg); background-repeat:no-repeat; margin-left: -60px; height:30px; width:20px; } .carousel-control-next-icon { background-image: url(../css/svg-images/carousel-forwards.svg); background-repeat:no-repeat; margin-right: -60px; height:30px; width:20px; } .carousel-inner { display: block; clear: both; content: ""; padding-bottom:95px; border-bottom:1px #cccccc solid; } a.carousel-control-next, a.carousel-control-prev { text-decoration: none; border-bottom: 0!important; } a:hover.carousel-control-next, a.carousel-control-prev { text-decoration: none; border-bottom: 0!important; } .carousel-caption { bottom:-95px; } /************************** BOOTSTRAP DROPDOWN MENU BASICS ***********************************/ .dropdown-item { display: block; width: 100%; padding: 0em 1.5em; font-size: .8em; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; border-bottom-color: currentcolor; border-bottom-style: none; border-bottom-width: 0px; } /****************** BOOTSTRAP DROPDOWN MENU FOR DUTCH PAINTING BUTTON ************************/ .btn-dutch-painting { float: none; clear:both; font-family: 'Lato', sans-serif; } .btn-dutch-painting:focus { outline: 0; text-decoration: none; box-shadow: none; } @media (max-width: 576px) { .btn-dutch-painting { display: flex; justify-content: center; } } /*********************** BOOTSTRAP DROPDOWN MENU FOR DELFT TODAY BUTTON ***********************/ .btn-delft { float:right; clear:both; margin: .4rem .5rem .5rem 1.5rem; background-color: #f4f4f4; border: 1px solid #666666; transition: background-color 0.3s ease, color 0.3s ease; } .btn-delft:focus { outline: 0; text-decoration: none; box-shadow: none; } @media (max-width: 576px) { .btn-delft { float:none; margin-bottom: 1rem; margin-left:none; display: flex; justify-content: center; } } .dropdown-menu { border: 1px solid #666666; padding: 0; } /********************* BOOTSTRAP DROPDOWN MENU FOR PALETTE BUTTON *****************************/ .btn-palette, .btn-delft, .btn-dutch-painting { float:left; clear:none; background-color: #eeeeee; margin: .4rem 1.5rem .5rem 0; width:250px; } .btn-palette:focus,.btn-delft:focus, .btn-dutch-painting:focus { outline: 0; text-decoration: none; box-shadow: none; } @media (max-width: 576px) { .btn-palette, .btn-delft, .btn-dutch-painting { float:none; width:100%; margin-bottom: 1.5rem; font-size: 1rem; border: 1px solid #666666; } } .btn-palette .btn-link-drop, .btn-delft .btn-link-drop { width:100%; white-space:normal; border: 1px solid #666666; text-align: center; font-size: .90rem; font-style:bold; color: #333333; } @media (max-width: 576px) { .btn-palette .btn-link-drop, .btn-delft .btn-link-drop { width:100%; margin-bottom: 1rem; font-size: 1rem; border: 1px solid #666666; } } .dropdown-menu { border: #666666 1px solid; padding: 0; } /************************** BOOTSTRAP DROPDOWN MENU FOR PALETTE BUTTON***********************************/ /*.btn-travels { float:right; margin-left:2rem; } .btn-travels:focus { outline: 0; text-decoration: none; box-shadow: none; } @media (max-width: 576px) { .btn-travels { float:none; margin-bottom: 1rem; margin-left:none; display: flex; justify-content: center; } }*/ /************************** BOOTSTRAP DROPDOWN MENU FOR PALETTE BUTTON***********************************/ /*.btn-interviews { float:right; margin-left:2rem; } .btn-interviews:focus { outline: 0; text-decoration: none; box-shadow: none; } @media (max-width: 576px) { .btn-interviews { float:none; margin-bottom: 1rem; margin-left:none; display: flex; justify-content: center; } }*/ /************************** BOOTSTRAP DROPDOWN MENU FOR MASTERS BUTTON ***********************************/ .btn-masters { display: block; border-radius: 0; float:left; margin: 0rem .5rem 1.5rem 0rem; } .btn-masters:focus { outline: 0; text-decoration: none; box-shadow: none; } @media (max-width: 576px) { .btn-masters { float:none; margin-bottom: 1rem; margin-left:none; display: flex; justify-content: center } } /************************** BOOTSTRAP DROPDOWN MENU FOR CLIENTS BUTTON ***********************************/ /*.btn-clients { display: block; border-radius: 0; float:right; clear:both; margin: .2rem .5rem .5rem 1.5rem; } .btn-clients:focus { outline: 0; text-decoration: none; box-shadow: none; } @media (max-width: 576px) { .btn-clients { float:none; margin-bottom: 1rem; margin-left:none; display: flex; justify-content: center } }*/ /************************** BOOTSTRAPDROPDOWN BUTON FOR DISSIUS PAINTINGS ***********************************/ /*.btn-dissius-piantings { display: block; border-radius: 0; float:right; clear:both; margin: 0rem .5rem .5rem 1.5rem; } .btn-dissius-piantings:focus { outline: 0; text-decoration: none; box-shadow: none; } @media (max-width: 576px) { .btn-dissius-piantings { float:none; margin-bottom: 1rem; margin-left:none; display: flex; justify-content: center } }*/ /******************************* BOOTSTRAP DROPDOWN FONT SIZE AND PADDING ******************************************************/ #my-dropdowns .dropdown-item { font-size: 1rem; padding-top:.15rem; padding-bottom: .15rem; } /************************ NEW BRAND NAME WITH BOX AND OUTLINE ***********************************/ /*#brand-2019-navbar { background-image:url(svg-images/brand-name-with-box.svg); background-repeat:no-repeat; background-position: 0px 0px; }*/ #brand-2019 { } #brand-square { fill:#777777; } #brand-box { fill:#777777; } #brand-outline { stroke:#777777; fill:none; } #brand-e { stroke:white; fill:white; } #brand-m { stroke:white; fill:white; } /**************** TIMELINE RULES *******************/ .list-timeline li a:hover { text-decoration: none; border:none; } .tool-right { float:right; padding-right: 5px; font-style:italic; } /******************************************************************************/ /******************************************************************************/ /**************** BOX for EXTRA CONTENT with IMAGE *******************/ /**************** and smaller margins for BOOKS *******************/ /******************************************************************************/ .extra-content-book { background-image: none; } .main-content .extra-content-book-2 { float:left; color:#999999; font-size: .85rem; line-height: 1rem; max-width: 150px; } .extra-content-book-2 a:link { color:#777777; text-decoration: none; border-bottom: 1px solid #E0E0E0; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .extra-content-book-2 a:visited { color:#777777; text-decoration: none; border-bottom: 1px solid #d0d0d0; } .extra-content-book-2 a:hover { color: #d0d0d0; text-decoration:none; border-bottom: 1px solid #f4f4f4; } .extra-content-book-2 img{ margin-bottom: .5rem; min-width:100px; } /************************temporary place holder for (see figure xxx) insertations ***************************************/ .see-somehwere { display:none; color:red; font-weight:bold; } /************************ containers that hold list of Dutch painters at bootom of each DUTCH PAINTING entry ***************************************/ .twentey-five-percent { width:50%; float:left; padding-right:1rem; } @media (min-width: 576px) { .twentey-five-percent { width:25%; float:left; padding-right:1rem; } } /***************************************************************************************/ /************************ MAILCHIMP SIGNUP FORM ***************************************/ /****************************************************************************************/ #mc_embed_signup form { display:block; position:relative; text-align:left; clear:none; padding: 0px 0px 0px 10px; background-color: white; margin: 0; width:100%; margin-bottom: 20px; border-left: 1px solid #cccccc; } #mc_embed_signup h2 { font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; font-weight:normal; font-style:italic; padding:0; line-height:1rem; margin:0px 0px 10px 0px; font-size: .85rem; width:100%; text-transform:uppercase; word-spacing: 6px; color: #666666; } .newsletter-things { font-style:normal; padding-left:3px; margin-bottom:12px; line-height: 1.2rem; } /* labels for email and name */ #mc_embed_signup .mc-field-group label { display:block; margin-bottom:0px; background-color: transparent; width:100%; clear:both; font-size: .85rem; line-height: .85rem; display:none; } /* INPUT boxes */ #mc_embed_signup .mc-field-group input { display:block; width:100%; padding:8px 5px; text-indent:2%; font-size: .85rem; } ::-webkit-input-placeholder { /* Edge */ color: #aaaaaa; } :-ms-input-placeholder { /* Internet Explorer */ color:#aaaaaa; } ::placeholder { color: #aaaaaa; } /* input FOCUS */ #mc_embed_signup input:focus { outline: 1px solid #cccccc; background-color: #f8f8f8f8; } #mc_embed_signup input:focus::-webkit-input-placeholder { opacity: .3; } /* box that holds EMAIL label and input field */ .email { float:left; clear: both; width:180px; background-color: transparent; margin-right: 5px; } /* box that holds NAME label and input field */ .name { float:left; clear: both; width:100%; background-color: transparent; margin-right: 10px; } /* removes NAME field in small devices */ @media (max-width: 520px) { .name { display:none; } } /* border around INPUT BOXES */ #mc_embed_signup input { border: 1px solid #dddddd; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; color: #999999; } /*#mce-EMAIL.required.email { border: 1px solid #dddddd; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; color: #999999; }*/ /* group that holds two filed groups???*/ #mc_embed_signup .mc-field-group { float:left; position:relative; width:100%; padding-bottom:0; min-height:44px; } /* BUTTON */ #mc_embed_signup .button { clear: both; background-color: #eeeeee; opacity: .7; border: 1px solid #cccccc; border-radius:1px; transition: all 0.24s ease-in-out 0s; color: #333333; cursor: pointer; display: inline-block; font-size:13px; font-weight: italic; line-height: 1rem; margin: 0px 0px 0px 0px; padding: 4px 4px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: 110px; text-transform:uppercase; letter-spacing: .01rem; } #mc_embed_signup .button:hover { background-color: #666666; color: white; } /* ????????? */ #mc_embed_signup .nowrap { white-space:nowrap; } /* ????????? */ #mc_embed_signup .size1of2 { clear:none; float:left; display:inline-block; width:46%; margin-right:4%; } /* ????????? */ * html #mc_embed_signup .size1of2 { margin-right:2%; /* Fix for IE6 double margins. */ } /* ????????? */ #mc_embed_signup .mc-field-group select { display:inline-block; width:99%; padding:5px 0; margin-bottom:2px; background-color: white; } /**************************** Previous and Next painting arrows ************************************/ /*#two-bar-extra-content-menu #next-painting::before, #painting-info #next-painting { background-image:url(svg-images/next-02.svg); background-repeat:no-repeat; background-size:.45rem; background-position: 2px 6px; background-repeat: none; padding-left: 1.3rem; } /*
  • /* #two-bar-extra-content-menu #previous-painting, #painting-info #previous-painting { background-image: url(svg-images/previous-02.svg); background-repeat:no-repeat; background-position: 2px 6px; background-size:.45rem; background-repeat: none; padding-left: 1.3rem; } */ #cooldaddy { background-color:red; } a { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } /* adds some space above first nav item and mnakes font larger when toggled*/ @media (max-width: 576px) { li.nav-item:first-child { margin-top:1.5rem; } } @media (max-width: 576px) { .navbar .navbar-nav .my-link { font-size: 1rem; } } @media (max-width: 576px) { .navbar .navbar-nav .my-link:hover { font-size: 1rem; } } /* removes lines around toggle hamburger*/ .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus { outline: none; box-shadow: none; } /*************************** DELFT SVG GROWTH styles *****************************************/ #expansion-of-delft { background-image: url(../delft/view-of-delft-archive/maps/marian-growth.jpg); background-repeat: no-repeat; background-size: contain; } text#delft-years { font-size:40px; line-height:1.25; font-family: 'Times New Roman'; writing-mode:lr-tb;text-anchor:start; fill:#000000; fill-opacity:1; stroke:none; } /*** * answers for PRAXEDIS POLL ****/ label#l_0_5f1ecc3ce4b072b12a12acf9.OPP-poll-choice.OPP-poll-choice-text, label#l_1_5f1ecc3ce4b072b12a12acf9.OPP-poll-choice.OPP-poll-choice-text, label#l_2_5f1ecc3ce4b072b12a12acf9.OPP-poll-choice.OPP-poll-choice-text { color:#666666!important font-size:1.05rem!important; padding: 8px 0px 0px 0px!important; line-height:1rem!important; } @media (min-width: 520px) { label#l_0_5f1ecc3ce4b072b12a12acf9.OPP-poll-choice.OPP-poll-choice-text, label#l_1_5f1ecc3ce4b072b12a12acf9.OPP-poll-choice.OPP-poll-choice-text, label#l_2_5f1ecc3ce4b072b12a12acf9.OPP-poll-choice.OPP-poll-choice-text { color:#666666!important font-size:1rem!important; padding: 8px 0px 0px 0px!important; line-height:1rem!important; } } /*** * answers for BARON ROLIN ****/ label#l_0_5f1eaad7e4b072b12a12ac8f.OPP-poll-choice.OPP-poll-choice-text, label#l_1_5f1eaad7e4b072b12a12ac8f.OPP-poll-choice.OPP-poll-choice-text, label#l_2_5f1eaad7e4b072b12a12ac8f.OPP-poll-choice.OPP-poll-choice-text { color:#666666!important font-size:1.05rem!important; padding: 8px 0px 0px 0px!important; line-height:1rem!important; } @media (min-width: 520px) { label#l_0_5f1eaad7e4b072b12a12ac8f.OPP-poll-choice.OPP-poll-choice-text, label#l_1_5f1eaad7e4b072b12a12ac8f.OPP-poll-choice.OPP-poll-choice-text, label#l_2_5f1eaad7e4b072b12a12ac8f.OPP-poll-choice.OPP-poll-choice-text { color:#666666!important font-size:1rem!important; padding: 8px 0px 0px 0px!important; line-height:1rem!important; } } /*** * answers for DRESDEN POLL ****/ label#l_0_61470282e4b04db784bde6ba.OPP-poll-choice.OPP-poll-choice-text, label#l_1_61470282e4b04db784bde6ba.OPP-poll-choice.OPP-poll-choice-text, label#l_2_61470282e4b04db784bde6ba.OPP-poll-choice.OPP-poll-choice-text, label#l_3_61470282e4b04db784bde6ba.OPP-poll-choice.OPP-poll-choice-text, label#l_4_61470282e4b04db784bde6ba.OPP-poll-choice.OPP-poll-choice-text { color:#666666!important font-size:1.05rem!important; padding: 8px 0px 0px 0px!important; line-height:1rem!important; } @media (min-width: 520px) { label#l_0_61470282e4b04db784bde6ba.OPP-poll-choice.OPP-poll-choice-text, label#l_1_61470282e4b04db784bde6ba.OPP-poll-choice.OPP-poll-choice-text, label#l_2_61470282e4b04db784bde6ba.OPP-poll-choice.OPP-poll-choice-text, label#l_3_61470282e4b04db784bde6ba.OPP-poll-choice.OPP-poll-choice-text, label#l_4_61470282e4b04db784bde6ba.OPP-poll-choice.OPP-poll-choice-text { color:#666666!important font-size:1rem!important; padding: 8px 0px 0px 0px!important; line-height:1rem!important; } } /*** * answers for RUBBER DUCK ****/ label#l_0_5f47516be4b048bb3274734d.OPP-poll-choice.OPP-poll-choice-text, label#l_1_5f47516be4b048bb3274734d.OPP-poll-choice.OPP-poll-choice-text, label#l_2_5f47516be4b048bb3274734d.OPP-poll-choice.OPP-poll-choice-text { color:#666666!important font-size:1.05rem!important; padding: 8px 0px 0px 0px!important; line-height:1rem!important; } @media (min-width: 520px) { label#l_0_5f47516be4b048bb3274734d.OPP-poll-choice.OPP-poll-choice-text, label#l_1_5f47516be4b048bb3274734d.OPP-poll-choice.OPP-poll-choice-text, label#l_2_5f47516be4b048bb3274734d.OPP-poll-choice.OPP-poll-choice-text { color:#666666!important font-size:1rem!important; padding: 8px 0px 0px 0px!important; line-height:1rem!important; } } /**** answers for CAMERA OBSCURA ****/ label#l_0_5f477ac9e4b048bb3274741c.OPP-poll-choice.OPP-poll-choice-text, label#l_1_5f477ac9e4b048bb3274741c.OPP-poll-choice.OPP-poll-choice-text, label#l_2_5f477ac9e4b048bb3274741c.OPP-poll-choice.OPP-poll-choice-text { color:#666666!important font-size:1.05rem!important; padding: 8px 0px 0px 0px!important; line-height:1rem!important; } @media (min-width: 520px) { label#l_0_5f47516be4b048bb3274734d.OPP-poll-choice.OPP-poll-choice-text, label#l_1_5f47516be4b048bb3274734d.OPP-poll-choice.OPP-poll-choice-text, label#l_2_5f47516be4b048bb3274734d.OPP-poll-choice.OPP-poll-choice-text { color:#666666!important; font-size:1rem!important; padding: 8px 0px 0px 0px!important; line-height:1rem!important; } } /*** DRESDEN BOX wider ****/ #OPP-poll-id-61470282e4b04db784bde6ba { width: 100%!important;!important; margin: .7rem auto .5rem auto!important; } @media (min-width: 520px) { #OPP-poll-id-61470282e4b04db784bde6ba { width: 100%!important; margin: .7rem auto .5rem auto!important; } } /*overall box*/ #OPP-div-around-poll { border: 1px solid #cccccc!important; } /***question text on SMALL viewport***/ #OPP-poll-question-text { color:#666666!important; line-height: 1.1rem!important; font-size: 1.2rem!important; margin-bottom: 1rem!important; } @media (min-width: 520px) { #OPP-poll-question-text {color:666666!important; line-height:1.3rem!important; font-size:1.2rem!important; margin-bottom: 1rem!important; } } tr.OPP-poll-choice-div.OPP-poll-choice-td-content { padding: 20px 20px 20px 20px!important; background-color:white!important; vertical-align: bottom!important; } td.OPP-poll-choice-div.OPP-poll-choice-td-buttone { padding: 20px 20px 20px 20px!important; color:pink!important; } /** RESULT text ****/ #OPP-result-link-text { font-size:1rem!important; padding-left:2rem!important; color:#666666!important; font-style:italic!important; font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif!important; } /************************* VOTE button *************************/ #OPP-poll-vote-button { font-size:.85rem!important; padding:.2rem .6rem. .2rem .6rem!important; color:#666666!important; background-color:white!important; border:1px solid #666666!important; text-transform:uppercase!important; } #OPP-poll-vote-button:hover { font-size:.85rem!important; padding:.2rem .6rem. .2rem .6rem!important; color: white!important; background-color:#666666!important; border:1px solid #666666!important; } .OPP-choiceBarFilled { height:14px!important; padding-top:2px!important; background-color: #bee0f9!important; } .OPP-choiceBar{ margin-top:2px!important; } td.OPP-poll-choice-div.OPP-poll-choice-td-content { padding: 0px 0px 0px 10px!important; color: #666666!important; font-size:4rem!important; } /*height of resutls bar*/ .OPP-choiceBar { height:9px!important; margin-bottom: 3px!important; margin-top:1px!important; display: inline-block; float: left; width:100%; } .OPP-result-summary { margin-top:3rem!important; font-size: 1rem!important; font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif!important; } /* text of see results */ .OPP-poll-choice-text { font-size: .95rem!important; line-height:1rem!important; } /*************************** 25 Things Youd didn't know *********************************************/ .twentyfive { display: none; background-color: #f8f8f8; width: 100%; font-size: 1.1rem; text-align:center; padding:1rem .5rem .8rem .5rem; border: 1px solid #cccccc; font-family: 'Lato', sans-serif; } .twentyfive a:link { text-align:center; padding: .3rem; margin: .2rem; background-color: #f8f8f8; color: #333333; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .twentyfive a:visited{ text-align:center; padding: .3rem; margin: .2rem; background-color: #f8f8f8; color: #6a7a89; } .twentyfive a:hover{ text-align:center; padding: .3rem; margin: .2rem; background-color: #F9F9F9; color: #d95a4b; text-decoration:none } .twentyfiv-text a:link { color: #d95a4b; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .twentyfive-text a:visited{ color: #d95a4b; } .twentyfive-text a:hover{ color: #cccccc; text-decoration:none } #collapssecondbook { background-color: #f8f8f8; padding-top: 1rem; } .twentyfive-image { background-color: #f8f8f8; } .twentyfive-text { background-color: #f8f8f8; } .twentyfive-text p { text-align: left; font-size: 1.07rem; line-height:1.4rem; padding-bottom: .6rem; background-color: #f8f8f8; } .twentyfive-paypal { font-family: 'Lato', sans-serif; background-color: white; font-size: .95rem; padding-top: 1rem; padding-bottom: 1rem; border-radius: 8px; border:1px solid #d95a4b; color: black } .pp-button { background-color: white; } .lato-text { } .small-book-cover { width: 150px; margin-top: .5rem } #img-link-no-underline, #img-link-no-underline img{ text-decoration: none; border-width: 0px; } /**********************************************************/ /****************** FOOTNOTES ****************************/ /**********************************************************/ #footnotes { clear: both; border-top: 1px solid #cccccc; padding: 1rem 1.5rem 0rem 0rem; } /*************** FOOTNOTE POPOVERS **********************/ body .popover.footnote-popover .arrow { display: none; } body .popover.footnote-popover { box-shadow: none; } body .popover.footnote-popover .popover-body { background-color: white; color: #666666; padding: 10px 8px 8px 14px; border: 1px solid #aaaaaa; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2); } /* Style the links inside the popover body */ body .popover.footnote-popover .popover-header { color: white; /* Replace with your desired link color */ /* Example: underline the links */ /* Add any other styles you want for the links */ } body .popover.footnote-popover .popover-body a { /* Replace with your desired link color */ text-decoration: underline; /* Example: underline the links */ /* Add any other styles you want for the links */ color:#666666; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } /* Optionally, if you want to style the hover state of the links */ body .popover.footnote-popover .popover-body a:hover { color: #cccccc; text-decoration: underline;/* Replace with your desired hover color */ /* Add any other hover styles you want */ } body .popover.footnote-popover .custom-message { font-style: italic; color: white; text-align: center; color: white; margin-top: .3rem; border-top: 1px solid #cccccc; } .copy-btn { background-color: #aaaaaa; color: white; padding: 1px 4px; font-size: 12px; cursor: pointer; border-radius: 3px; margin-left: 10px; opacity: 1; radius: 4px; border: none; position: absolute; bottom: -12px; right: -20px; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .copy-btn:hover { background-color: #cccccc; } /*************** FOOTNOTE SUP STYLES **********************/ .editor-sup { color : red !important; font : normal; font-size : extra-large; font-style : normal; font-variant : normal; font-weight : normal; height : auto; line-height : normal; position : static; } /*************** FOOTNOTE SUP BACKLINK STYLE **********************/ .back-link { color:#666666 !important; font-style:normal !important; text-decoration: none !important border: none !important; font-size:1.2rem !important; } /*************** FOOTNOTE SUP BACKLINK STYLE **********************/ /* Style the superscript tags (footnote numbers) */ sup a { font-size:1rem !important; font-weight: normal !important; /* Sets the font weight to bold */ color:normal !important; /* Sets the color to blue */ text-decoration:none !important; border: none !important; } .editor-sup a { color:blue !important; /* Sets the color to blue */ text-decoration:none !important; } .editor-sup { color:red !important; text-decoration:none !important; border: none !important; } /*************************************************************/ /*********************** TOAST ELEMENT ***********************/ /*************************************************************/ .typo:after { background-image: url('../css/background-images/typo.png'); display: inline-flex; content: ''; /* Using the background-image and its related properties to add the SVG content */ background-size: 50.35566px 14px; height: 17px; width: 58px; background-position: 5px 4px; background-repeat:no-repeat; } .typo-01 { height: 17px; width: 58px; vertical-align: middle; /* align it to the middle of the line */ transform: translateY(0%); /* adjust its position upward by 10% of its height */ } #toast { visibility: hidden; min-width: 250px; margin-left: -125px; margin-right: 90px; background-color: #f0f3f9; /*background-image:url(background-images/typo.jpg); background-repeat:no-repeat; background-size: 40px;*/ color: black; border: 1px solid #666666; text-align: left; border-radius: 2px; padding: .8rem; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-size: 1rem; opacity: 0; z-index: 1500; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); transition: opacity 0.5s, bottom 0.5s, visibility 0.5s; } #toast.show { visibility: visible; opacity: 1; bottom: 50px; } #toast a { color: #666666; } .toast-img-jpg { display:visible } .toast-img-png { display:visible } #closeButton { display: flex; justify-content: center; align-items: center; position: absolute; top: -7px; right: -7px; width: 25px; height: 25px; text-align: center; border-radius: 50%; border: blue 1px solid; font-size: 1rem; font-family: Arial, Helvetica, sans-serif; } .museum-pics { margin-bottom: 1.5rem; } .main-content h1 a:link, .main-content h2 a:link, .main-content h3 a:link, .main-content h4 a:link, .main-content h5 a:link { text-decoration: none; border:none; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .main-content h1 a:visited, .main-content h2 a:visited, .main-content h3 a:visited, .main-content h4 a:visited, .main-content h5 a:visited { text-decoration: none; border-bottom: none; } .main-content h1 a:hover, .main-content h2 a:hover, .main-content h3 a:hover, .main-content h4 a:hover, .main-content h5 a:hover { color: #d0d0d0; text-decoration: none; border-bottom: 1px solid #dddddd; } /* .btn-main { background-color: #eeeeee; margin: .4rem 1.5rem 0rem 0; width:100%; white-space:normal; border: 1px solid black; text-align: center; font-size: 1rem; font-style:bold; color: #333333; border-radius: 0; transition: background-color 0.3s ease, color 0.3s ease; } .btn-main:hover { outline: 0; text-decoration: none; box-shadow: none; background-color: #fcfcfc; border: 1px solid black; color: #aaaaaa; } .btn-main.active, .btn-main.active, .btn-main:focus, .btn-main.focus { background-color: #eeeeee !important; border: 1px solid black !important; outline: none !important; box-shadow: none !important; color: #333333 !important; } .dropdown-menu { border: #666666 1px solid; padding: 0; } .dropdown-item { display: block; width: 100%; padding: 0em 1.5em; font-size: .8em; clear: both; font-weight: 400; color: #333333; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; border-bottom-color: currentcolor; border-bottom-style: none; border-bottom-width: 0px; } .dropdown-item { color: #333; background-color: white; padding: 2px 8px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } .dropdown-item:hover { color: #333 !important; background-color: #eeeeee; border-top-color: #cccccc; border-bottom-color: #cccccc; } .dropdown-item:active { color: #333; background-color: #eeeeee; } .dropdown-item.disabled { color: #333; background-color: transparent; } .dropdown-divider { border-color: #cccccc; margin: 0; } .btn-group { float:left; } */