a:link {color: blue;} a:visited {color: purple;} a:hover {color: red;} a:active {color: orange;} @font-face {src: http://fonts.gstatic.com/s/ptserif/v9/5hX15RUpPERmeybVlLQEWBTbgVql8nDJpwnrE27mub0.woff2;} /* LOGO */ /* entire container, keeps perspective */ #logo {-webkit-perspective: 10000px; /* Chrome, Safari, Opera */ perspective: 10000px; top: 1%; left: 1%; width: 12%; height: 15%; } /* flip the pane when hovered */ #logo:hover #flipper, #logo.hover #flipper {transform: rotateY(180deg); -webkit-transform: rotateY(180deg);} #front, #rear {width: 100%; height: 100%;} /* flip speed goes here */ #flipper {transition: 0.8s; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; position: relative;} /* hide back of pane during swap */ #front, #rear {backface-visibility: hidden; -webkit-backface-visibility: hidden; position: absolute; top: 0; left: 0;} /* front pane, placed above back */ #front {z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); -webkit-transform: rotateY(0deg); } /* back, initially hidden pane */ #rear {transform: rotateY(180deg); -webkit-transform: rotateY(180deg);} /* DIVs */ .search_eng {position:absolute; right:1.5%; top: 4%; width: 25%; height:auto; border:1px none black; background:white;} /*.search_eng {position:absolute; right:1%; top: 65%; width: 35%; height:auto; border:1px none black; background:white;}*/ #title_block {position: absolute; top:2%; left: 18%; width: 60%; height:14%; border:1px none black; background:white;} /*#title_block {position: absolute; top:2%; left: 18%; width: 80%; height:14%; border:1px none black; background:white;}*/ #menu_bar {position: absolute; top:16%; left: 1%; width: 98%; height:10%; border:1px none black; background:white;} #left_side_panel {display:block; position: absolute; top: 23%; left: 1%; width: 16%; height: auto; border:1px none black; border-radius: 20px; background: #FFF2CC; padding: 0.75%;} #left_side_panel:hover {background-color: orange; color: black;} #slider_panel {position:absolute; top: 24%; left: 19%; width: 52%; height: 35%; border:1px none black; background:white;} #text_box {position: absolute; top: 60%; left: 19%; width: 52%; height: 29%; border:1px none black; background:white;} #right_panel {position: absolute; text-align: center; top: 24%; left: 72%; width: 13%; height: 60%; border:1px none black; background:white;} #ext_right_panel {position: absolute; text-align: center; top: 28%; left: 86%; width: 13%; height:67%; border:2px none gold; border-radius: 20px; background: #FFF2CC; padding: 0.25%; z-index:1; overflow-y:auto;} #ext_right_panel:hover {background-color: orange; color: black; } #at_bottom {position:absolute; bottom:0;} #foota {position: absolute; top:96%; left:1%; width:98%; height:5%; overflow: hidden; background-color:#FFF2CC; font-family: Arial; font-size: 10pt; height: auto;} #foota:hover {background-color: orange; color: black;} #menu_mob{display:none;} #mob_right_panel{display:none;} /*#left_bottom_panel {position: absolute; top: 66%; left: 1%; width: 17%; height: 27%; border:1px none black; border-radius: 8%; background: #FFF2CC; padding: 1% 0% 1% 0.5%; } #left_bottom_panel:hover {background-color: orange; color: black;}*/ /* Start of moving 'NEWS' display */ /*#mov {Original, using Javascript replaced 9/9/2018) position: absolute; text-align: center; top: 24%; left: 86%; width: 12%; height: 8%; border:2px none gold; background:white; }*/ #mov {position: absolute; text-align: center; top: 23%; left: 86%; width: 12%; height: 5%; border:2px none gold; background:white;} .mov_text {position: relative; top: 0px; left:0px; width: 12%; height: 25%; background-color: white; -webkit-animation-name: nus; /*Safari*/ -webkit-animation-duration: 1s; animation-name: nus; animation-duration: 1s; animation-delay: 1s; animation-timing-function: linear; animation-iteration-count: 13; animation-direction: alternate-reverse; border:1px none red;} p.news_text {font-family: Arial, Verdana, sans-serif; font-size: 28pt; font-size: 2.0vmax; font-weight:bold; margin-top: 4px;} /* Safari 4.0 - 8.9 */ @-webkit-keyframes nus { 0%{color:red; left:0px; top:0px;} 50%{color: green; left: 25%; top:0px;} 100%{color:gold; left:50%; top:0px;} } @keyframes nus { 0% {color:red; left:0px; top:0px;} 50%{color: green; left: 25%; top:0px;} 100% {color:gold; left:50%; top: 0px;} } /* End of moving 'NEWS' display */ .chameleon {-webkit-animation: animate_bg 5s; animation: animate_bg 5s; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; animation-direction: alternate-reverse;} @keyframes animate_bg { 0% {background:yellow;} 50% {background:pink;} 100% {background:#F57841;} } @keyframes animate_bg { 0% {background:yellow;} 50% {background:pink;} 100% {background:#F57841;} } @-webkit-keyframes animate_bg { 0% {background:yellow;} 50% {background:pink;} 100% {background:#F57841;} } /* MAIN MENU */ .container {overflow: hidden; background-color:#666666; font-family: Arial;} .container a {float: left; font-size:16pt; font-size: 1.0vmax; border: none; font-weight:bold; color: white; text-align: center; padding: 1% 2% 1% 2%; text-decoration: none;} .container a:hover, .dropbtn:hover, .dropdown:hover {background-color: orange; color: black;} .dropbtn {float: left; font-size: 16pt; font-size:1.0vmax; border: none; font-weight:bold; color: inherit; text-align: center; padding: 1% 2% 1% 2%; text-decoration: none; background-color: inherit;} .dropdown {float: left; overflow: hidden; font-size: 12pt; font-size:0.4vmax; border: none; color: white; padding: 1% 2% 1% 2%; background-color: #666666; /* dark gray */} .dropdown-content {display: none; position: absolute; top: 45%; /* play with this to avoid losing the sub-menus when the viewport is in portrait mode OR check svail.Height/avail.Width and warn if portrait selected*/ background-color: #f9f9f9; min-width:10%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; cursor:pointer;} .dropdown-content a {float: none; color: black; font-size: 14pt; font-size:0.8vmax; font-weight:normal; padding: 3% 4%; text-decoration: none; display: block; text-align: left;} .dropdown-content a:hover {background-color: #a5a5a5;} .dropdown:hover .dropdown-content {display: block; z-index: 5;} /* #f9f9f9; is light gray, #666666; is dark gray */ /* Sub-Menus */ .dropdown_1 {font-size: 16px; font-size:0.8vmax; border: none; outline: none; color: white; padding: 1% 2%; background-color: inherit;} .dropbtn_1 {font-size: 16px; font-size:0.8vmax; width: 100%; border: none; outline: none; color: black; text-align:left; padding: 3% 0% 6% 6%; background-color: inherit;} /* website url list */ .dropdown-content_1 {display: none; position: absolute; top: 90%; right: -60%; background-color: #f9f9f9; width: auto; box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2); /* was '0px 8px 16px 0px rgba' in default_9July2018_2.13 */border:1px solid grey; z-index: 1; } /* sub-menu for websites */ .dropdown-content_1 a {float: none; color: black; padding: 2% 6%; text-decoration: none; display: block; text-align: left;} .dropdown-content_1 a:hover {background-color: #a5a5a5; color:white;} .dropdown_1:hover .dropdown-content_1 {display: block; z-index: 5; } /* newsletter list */ .dropdown_2 {font-size: 16px; font-size:0.8vmax; border: none; outline: none; color: white; padding: 1% 2%; background-color: inherit;} .dropbtn_2 {font-size: 16px; font-size:0.8vmax; width: 100%; border: none; outline: none; color: black; text-align:left; padding: 3% 0% 6% 4%; background-color: inherit;} /* sub-menu for newsletters */ .dropdown-content_2 {display: none; position: absolute; top: 5%; right: -60%; background-color: #f9f9f9; width: 110%; box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2); border:1px solid grey; z-index: 1;} .dropdown-content_2 a {float: none; color: black; padding: 2% 6%; text-decoration: none; display: block; text-align: left;} .dropdown-content_2 a:hover {background-color: #a5a5a5; color:white;} .dropdown_2:hover .dropdown-content_2 {display: block; z-index: 5;} /* Resources list */ .dropdown_3 {font-size: 16px; font-size:0.8vmax; border: none; outline: none; color: white; padding: 1% 2%; background-color: inherit;} .dropbtn_3 {font-size: 16px; font-size:0.8vmax; width: 100%; border: none; outline: none; color: black; text-align:left; padding: 3% 0% 6% 4%; background-color: inherit;} .dropdown-content_3 {display: none; position: absolute; top: 65%; right: -120%; background-color: #f9f9f9; width: auto; box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2); border:1px solid grey; z-index: 1; cursor: pointer;} /* sub-menu for Resources */ .dropdown-content_3 a {float: none; color: black; padding: 2% 6%; text-decoration: none; display: block; text-align: left;} .dropdown-content_3 a:hover {background-color: #a5a5a5; color:white;} .dropdown_3:hover .dropdown-content_3 {display: block; z-index: 5; } /* Video list */ .dropdown_4 {font-size: 16px; font-size:0.8vmax; border: none; outline: none; color: white; padding: 1% 2%; background-color: inherit;} .dropbtn_4 {font-size: 16px; font-size:0.8vmax; width: 100%; border: none; outline: none; color: black; text-align:left; padding: 3% 0% 6% 6%; background-color: inherit;} .dropdown-content_4 {display: none; position: absolute; top: 65%; right: -40%; background-color: #f9f9f9; width: auto; /* was set to 'auto' in default_9July2018_2.13 */ box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2);border:1px solid grey; z-index: 1;} /* sub-menu for Videos */ .dropdown-content_4 a {float: none; color: black; padding: 2% 6%; text-decoration: none; display: block; text-align: left;} .dropdown-content_4 a:hover {background-color: #a5a5a5; color:white; } .dropdown_4:hover .dropdown-content_4 {display: block; z-index: 5;} /* sub-menu for Darlington Review articles */ .dropdown_5 {font-size: 16px; font-size:0.8vmax; border: none; outline: none; color: white; padding: 1% 2%; background-color: inherit;} .dropbtn_5 {font-size: 16px; font-size:0.8vmax; width: 100%; border: none; outline: none; color: black; text-align:left; padding: 3% 0% 6% 4%; background-color: inherit;} .dropdown-content_5 {display: none; position: absolute; top: 65%; right: -50%; background-color: #f9f9f9; width: 150px; /* was set to 'auto' in default_9July2018_2.13 */ box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2);border:1px solid grey; z-index: 1;} .dropdown-content_5 a {float: none; color: black; padding: 2% 6%; text-decoration: none; display: block; text-align: left;} .dropdown-content_5 a:hover {background-color: #a5a5a5; color:white; } .dropdown_5:hover .dropdown-content_5 {display: block; z-index: 5;} /* sub-menu for Heritage Walks */ .dropdown_6 {font-size: 16px; font-size:0.8vmax; border: none; outline: none; color: white; padding: 1% 2%; background-color: inherit;} .dropbtn_6 {font-size: 16px; font-size:0.8vmax; width: 100%; border: none; outline: none; color: black; text-align:left; padding: 3% 0% 6% 6%; background-color: inherit;} .dropdown-content_6 {display: none; position: absolute; top: 70%; right: -65%; background-color: #f9f9f9; width: 250px; box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2);border:1px solid grey; z-index: 1;} .dropdown-content_6 a {float: none; color: black; padding: 2% 6%; text-decoration: none; display: block; text-align: left;} .dropdown-content_6 a:hover {background-color: #a5a5a5; color:white; } .dropdown_6:hover .dropdown-content_6 {display: block; z-index: 5;} /* End of MAIN MENU */ #tooltip {top: 25%; left: 78%; position: absolute; border: 1px solid black; display:block; font-family: 'Arial', 'sans-serif'; font-size:10.0pt; font-size: 0.6vmax; width: 55%; height:auto; background-color: #f90; text-align: left; padding: 2px; color:black; border-radius: 6px;} h1 {font-size:18.0pt; font-size:1.1vmax; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0; padding: 5px 0px 0px 0px;} h2 {font-size:16pt; font-size:0.98vmax; font-family:"Calibri","sans-serif"; font-weight:bold; padding:0; text-align:center;} h3 {font-size:14pt; font-size: 0.95vmax;font-family:"Calibri","sans-serif"; font-weight:bold; padding:0;} #title {text-align:center; font-family:"Calibri","sans-serif"; font-size:36.0pt; font-size:2.4vmax; font-weight:bold; line-height:20px;} .pointer {cursor: pointer;} p.normal {font-size:14pt; font-size:0.95vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:normal; padding: 0.1%;} p.news {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:0.9; padding: 0.1%;} p.sidebar {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.50;} i.fa-map-marker {color:red; font-size: 18pt;font-size:1.25vmax;} i.fa-clock-o {color:black; font-size: 18pt;font-size:1.25vmax;} i.fa-paper-plane {color:grey; font-size: 18pt;font-size:1.25vmax;} i.fa-phone{color:black; font-size: 18pt;font-size:1.25vmax;} i.fa-envelope-o{color:black; font-size: 16pt; font-size:1.1vmax;} p.misc {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;} p.spacer_foota {font-size:10pt; font-size:0.6vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:0.5;} @media only screen and (max-width: 1326px) {#fadeshow1 {display: none;}} @media only screen and (max-height: 750px) {#fadeshow2 {display: none;}} /* start of Books for sale */ .Books_sale {position:absolute; top: 24%; left: 19%; width: 55%; height:80%; overflow-y: auto; border:2px none green; background:white;} .top_banner {position: absolute; top: 0.1%; left: 0.1%; width: 96.5%; height: 6%; background: grey; color:white; text-align:center; border: 2px solid grey; margin-top: -10px;} t.books_for_sale{position: absolute; top: 10%; left: 0.1%; width: 90%; height: 6%; color:black; text-align:center; border: 2px solid grey; margin-top: -10px;} .bk_btn {position: fixed; top: 35%; left: 61%; width: 85px; height: auto; text-align:center; border: 1px none white; z-index: 100;} /* End of Books for sale */ /* start of Exec Comm */ #div2 {position: absolute; top: 59%; left: 19%; width: 52%; height: 29%; border:1px none black; background:white;} #div2_mob {display:none} #topBox {position: absolute; top: 1%; left: 15%; width: 75%; height: 41%; background:white;} #tble {position: absolute; top: 36%; left: 17%; width:70%; height: 40%; background:white;} p.eC_title {font-size:18pt; font-size:1.27vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} p.eC_normal {font-size:14pt; font-size:1.00vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} th, td {border-collapse: collapse;} p.hdrLeft {font-size:12.0pt; font-size:0.87vmax; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9; margin:0px;} p.hdrRight {font-size:12.0pt; font-size:0.87vmax; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9; margin:0px;} p.txtLeft {font-size:14.0pt; font-size:1.0vmax; font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9; } p.txtRight {font-size:14.0pt; font-size:1.0vmax; font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9;} /* end of Exec Comm */ /* Start of Membership */ #div4 {position: absolute; top: 24%; left: 22%; width: 46%; height: 29%; border:1px none black; background:white;} #ttop {position: absolute; top: 1%; left: 1%; width: 100%; height: 15%; border:1px none blue; background:white;} #members {position: absolute; top: 16%; left: 1%; width: 100%; height: 41%; border:1px none red; background:white;} p.mem_normal {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:normal; padding: 0.1%;} p.bold {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center; line-height:normal; margin: 2px;} p.txt {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal; margin: 1px;} .col_1 {width:8%; border: 2px solid #666665; background:#FFF2CC; padding:0cm 5.4pt 0cm 5.4pt; height:20.0pt;} .col_2 {width:25%; border-right:1px solid #666665;} .col_3 {width:8%; border-right:1px solid #666665; box-shadow: 0px 12px 16px 0px rgba(0,0,0,0.2);} .col_2, .col_3 {border-top:1px solid #666665; border-left:2px solid #666665; border-bottom:2px solid #666665; background:#FFF2CC; padding:0cm 5.4pt 0cm 5.4pt; height:20.0pt;} .col_1a {width:8%; border: 2px solid #666665; background:white; padding:0cm 5.4pt 0cm 5.4pt; height:20.0pt;} .col_2a {width:25%; border-right:1px solid black;} .col_3a {width:8%; border-right:1px solid black; box-shadow: 0px 12px 16px 0px rgba(0,0,0,0.2);} .col_2a, .col_3a {border-top:1px solid black; border-left:none; border-bottom:1px solid black; background:white; padding:0cm 5.4pt 0cm 5.4pt; height:20.0pt;} .mbr_btn {position: fixed; top: 85%; left: 50%; width: 85px; height: auto; text-align:center; border: 1px none white; z-index: 2000;} .btn_mbr {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mbr:hover {background-color: red; border: 5px solid red;} /* End of Membership */ /* Start of 'Reserves' div */ .res {position:absolute; top: 24%; left: 1%; width: 98vw; height: 75vh; overflow-y: auto; border:2px none green; background:white;} .rpanel {position:absolute; top: 6%; left: 6%; width: 95%;} p.legend {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:normal; margin:0 px;} p.spacer {font-size:6pt; font-size:0.4vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:0.2;} .res_btn {position: fixed; top: 23%; left: 92%; width: 84px; height: auto; text-align:center; border: 1px none white; z-index: 2000;} .btn_res {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_res:hover {background-color: red; border: 5px solid red;} /* End of 'Reserves' div */ /* Start of 'Our Museum' div */ .our_museum {position:absolute; top: 24%; left: 5%; width: 90%; height: 75vh; overflow-y: auto; border:2px none green; background:white;} .mpanel {position:relative; top: 1%; left: 5%; width: 90%; margin-bottom: 10px; z-index:1;} .muspoint_box {position: absolute; top: 25%; left: -26%; width: 80%; height: auto; margin-top: 0px; margin-left: 35%; padding:0px 0px; border: 1px none black; background:white;} .image1 {position:absolute; top: 50%; left: -50px; width: 25%; margin-bottom: 10px; z-index:-1; } .image2 {position:absolute; top: 15%; left: 83%; width: 22%; margin-bottom: 10px; z-index:-1;} .image3 {position:absolute; top: 0.5; left: -50px; width: 10%; margin-bottom: 10px; z-index:-1;} p.museum_points {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.legend {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:normal; margin:0 px;} p.underline {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:justify; text-decoration: underline; line-height:normal; padding:0% 2% 0% 2%;} /* End of 'Our Museum' div */ /* Start of Support Us */ #SupportUs {position:absolute; top: 24%; left: 19%; width: 76%; height: 70%; border:1px none green; background:white;} #vol_box {position:absolute; top: 1%; left: 6%; width: 86%; height: 28%; border:1px none red; background:white;} #edit {position:absolute; top: 97%; left: 6%; width: 80%; height: 5%; border:1px solid #ececd4; background:#ececd4; border-radius:8%; margin:5%; font-size:12pt; font-size:0.87vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0; padding: 10px 0px 0px 0px; -webkit-transition: height 2s; /* Safari */ transition: height 2s;} #edit:hover {background-color: orange; height: 50px;} #explanation5 {position:absolute; top: 68%; left: 5%; width: 90%; height: 30%; border:1px solid #ececd4; background:#ececd4; border-radius:8%;} /* End of Support Us */ /* Video iframe div */ #Video_div, #Video_div_1, #Video_div_2,#Video_div_3, #Video_div_4, #Video_div_5, #Video_div_6 {position:absolute; top: 24%; left: 19%; width: 55%; height: 67%; border:1px none red; background:white;} #Video_controls {position:absolute; top: 1%; left: 2%; width: 94%; height: 10%; /* up from 6 to support two lines*/ border:1px none black; background:white; overflow: hidden;} #Youtube, #Youtube_1, #Youtube_2,#Youtube_3, #Youtube_4, #Youtube_5 {position:absolute; top: 7%; left: 2%; width: 94%; height: 99%; border:1px none green; background:white; overflow: hidden;} #Youtube_6 {position:absolute; top: 9%; left: 2%; width: 94%; height: 90%; border:1px none green; background:white; overflow: hidden;} /* Our Office */ #Our_Office {position:absolute; top: 24%; left: 19%; width: 65%; height: 72%; border:1px none black; background:white;} #top_Box {position:absolute; top: 1%; left: 19%; width: 68%; height:auto; border:1px none black; background:white; overflow: hidden;} p.centa {font-size:14pt; font-size: 1.0vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal; margin:0.8%;} p.points {font-size:14pt; font-size: 1.0vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.2; padding: 2px 2px;} hr {display: block; height: 1px; overflow:hidden; width: 48%; border-style: inset; border:0; border-top: 1px solid black;} /* End of Our Office */ /* Mundaring_map */ .top_row {position:absolute; top: 25%; left: 18%; width: 40%; height: 4%; margin-top: 0px; margin-bottom: 0px; border: 1px none black; z-index:100;} .map_position {position:absolute; top: 5%; left: 15%; width: 821px; height: 800px; border: 1px none black;} /* originally these were: width: 821px; height: 800px; */ .directional_nav {position:absolute; top: 850px; left: 30%; width: 40%; height: auto; border: 1px none black; font-size: 20pt; font-size: 1.43vmax; font-family:"Calibri","sans-serif";} /* Mundaring Map - Start of right hand side banner */ .right_strip {position: absolute; top:0%; width: 9vw; height: 98vh; left: 90vw; padding:1px 15px; border: 2px none white; background:orange; text-align:center;} .sm_logo {position: absolute; top: 4%; margin-left:-1px; width: 80%; height: auto; border: 1px none black;} .exit_btn {position: absolute; top: 16%; left: 2%; width: 60%; height: auto; border: 1px none white; } .btn_exit {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .bck_btn {position: absolute; top: 21%; left: 2%; width:80%;height: auto;border: 1px none white;} .btn_bck {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_exit:hover, .btn_bck:hover {background-color: red; border: 5px solid red;} /* Mundaring Map - End of right hand side banner */ /* Request for Old Film Footage & Current Exhibition */ .poster {position:fixed; top: 10%; left: 33%; width: 26%; border: 1px none red; z-index: 1000;} .poster-popup {position: absolute; top:0; left:0; height: auto; width: auto; padding: 0 0 56.25%; /* last padding dimension is (100 * height / width) of item to be scaled */ margin: 0; border: 1px none blue;} .poster_btn, .curexh.btn, .oldnews_btn, .billy.btn,.map_btn {position: fixed; top: 9%; left: 28%; width: 10%; height: 10%; text-align:center; z-index: 2000;} .btn_poster, .btn_curexh, .btn_oldnews, .btn_billy {background-color: black; width:50px; border: 5px solid black; border-radius: 50px; color: white; padding: 5px 5px; font-size: 26px; cursor: pointer;} .btn_poster:hover {background-color: red; border: 5px solid red;} .btn_curexh:hover {background-color: red; border: 5px solid red;} .btn_billy:hover {background-color: red; border: 5px solid red;} #hoverShow1 {display: none; position: fixed; background-color: white; border: solid 2px black;border-radius: 20px;width: 20%; height: auto; right: 2%; top:10%; padding: 10px;z-index:100;} #hoverWrapper {position:absolute; top: 50%; right: 35%; width:auto; height:auto;} /* this is the "i" button */ /* Archived Newsletters link page */ .old_news {position: fixed; top: 10%; left: 33%; width: 26%; height: auto; z-index: 1000;} .news_popup {position: fixed; top: 10%; left: 33%; width: 26%; height: auto; text-align:center; vertical-align: top; background-color:white; border: 5px solid black; border-radius:20px; padding: 5px; z-index: 1000;} .btn_oldnews:hover {background-color: red; border: 5px solid red;} p.normal_blk {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:bold; text-decoration: underline; line-height:100%; color:black; margin-top: 0px;} p.normal_blk_nobold {font-size:14pt; font-size:1.0vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-decoration: none; text-align:center; line-height:100%; padding: 0px 20px; color:black; margin-top: 0px;} p.centa_1 {font-size:14pt; font-size: 1.0vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-decoration:underline; color:blue; text-align:center; line-height:normal; margin:0.8%; cursor: pointer;} .popup-overlay, .exhibition-overlay {position: fixed; top: 0; left:0; width: 100%; height: 100%;} /* Archived Darlington Review articles */ .old_drrev {position: fixed; top: 10%; left: 33%; width: 32%; height: auto; z-index: 1000;} /* MHHS Office & Museum map */ .map_div {position: fixed; top:10%; left:35%; width:35%; height:45%; z-index: 1000;} .map_popup {position: fixed; top:10%; left:35%; width:35%; height:45%; text-align:center; vertical-align: top; background-color:white; border: 5px solid black; border-radius:20px; padding: 5px; z-index: 1000;} .map_popup:hover {width: 50%; height: 65%;} .map_btn {position: fixed; top: 8%; left: 30%; width: 10%; height: 10%; text-align:center; z-index: 2000;} /* Current Exhibition */ p.exhib_header{margin-top: 10px; font-size: 22pt; font-size:1.6vmax; text-align:center; width: 90%;font-family:"Calibri","sans-serif"; font-weight:bold;} p.curexh_normal {font-size:12pt; font-size:0.87vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; margin-top:-10px;} .exhibition {position:fixed; top:10%; left:22%; width:56%; height:80%; z-index:1000; border: 6px solid black; border-radius: 20px; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.9); background-color:white;} .side_poster {position:relative; top: 0; left: 0; border: 1px none blue; z-index:2000;} .lower_left {position:relative; top: 0; left: 0; width: 30%; min-height: 30%; border: 1px none blue; padding: 2%; z-index:2000; overflow-y:hidden;} .exhibition-popup {position: absolute; top:0; left:30%; height: 60%; width: auto; padding: 0 0 56.25%; /* last padding dimension is (100 * height / width) of item to be scaled */ margin: 0; border: 1px none blue; z-index:2000;} .exhibition_btn {position: fixed; top: 9%; left: 17%; width: 10%; height: 10%; text-align:center; z-index: 2000;} .btn_exhibition {background-color: black; width:50px; border: 5px solid black; border-radius: 50px; color: white; padding: 5px 5px; font-size: 26px; cursor: pointer;} .btn_exhibition:hover {background-color: red; border: 5px solid red;} /* Slideshow for Museum */ /** {box-sizing:border-box}*/ /* Slideshow container */ .slideshow-container {max-width: 80%; height: auto; position: relative; margin: auto; border: 1px none blue; max-height: 100%; overflow:hidden;} /* Hide the images by default */ .mySlides {display: none;} /* Next & previous buttons */ .prev, .next {cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: black; font-weight: bold; font-size: 18px; font-size:1.3vmax; transition: 0.6s ease; background-color:white; border: 2px none black; border-radius: 5px;} /* Position the "next button" to the right */ .next {right: 0; border-radius: 5px;} /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover {background-color: rgba(0,0,0,0.8); color: white;} /* Caption text */ .text {color: white; background-color: black; font-family: Arial; font-size: 14px; font-size:1.0vmax; padding: 8px 12px; position: absolute; bottom: 1px; width: auto; text-align: center; border-radius: 20px;} /* Number text (1/3 etc) */ .numbertext {color: white; background-color: black; font-family: Arial; font-size: 12px; font-size:0.87vmax; padding: 8px 12px; position: absolute; top: 0; border-radius: 20px;} /* The dots/bullets/indicators */ .dot {cursor: pointer; height: 15px; width: 15px; margin: 20px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;} .active, .dot:hover {background-color: #717171;} /* Fading animation */ .fade {-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;} @-webkit-keyframes fade {from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* End of Museum slideshow */ /* Billy cart festival */ .billy {position:fixed; top:10%; left:22%; width:56%; height:80%; z-index:1000; border: 6px solid black; border-radius: 20px; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.9); background-color:white;} .billySlides {display: none;} .cart {cursor: pointer; height: 15px; width: 15px; margin: 20px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;} .cart:hover {background-color: #212121;} /* 100 years Remembrance */ .poppies {position: relative; top: 10px; left: 50px; -webkit-animation-name: pop; /* Safari */ -webkit-animation-duration: 1s; animation-name: pop; animation-duration: 20s; animation-delay: 2s; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; border:1px none red; z-index:9000;} @-webkit-keyframes pop { 0% {margin-left:0px; width: 100%; top:650px;} 25% {margin-left:25%; width: 85%; top:488px;} 50% {margin-left:50%; width: 70%; top:325px;} 75% {margin-left:75%; width: 55%; top:163px;} 100% {margin-left:100%; width: 40%; top:0px;} } @keyframes pop { 0% {margin-left:0px; width: 100%; top:650px;} 25% {margin-left:25%; width: 85%; top:488px;} 50% {margin-left:50%; width: 70%; top:325px;} 75% {margin-left:75%; width: 55%; top:163px;} 100% {margin-left:100%; width: 40%; top:0px;} } /* start of popup window for message of the day or week (i.e. office closures) and also used for 'Xmas Office Hours' */ .st_frame{position:fixed; top: 8%; left: 33%; width: 30%; border: 1px none red; z-index: 1000;} .l_popup {position: absolute; top:0; left:0; height: auto; width: auto; padding: 0 0 56.25%; /* last padding dimension is (100 * height / width) of item to be scaled */ margin: 0;} .pp_btn {position: fixed; top: 8%; left: 29%; width: 10%; height: 10%; text-align:center; z-index: 2000;} .btn_l {background-color: black; width: 50px; border: 5px solid black; border-radius: 50px; color: white; padding: 4px 4px; font-size: 26px; cursor: pointer;} .btn_l:hover {background-color: red; border: 5px solid red;} .opac_overlay {position: fixed; top: 0; left:0; width: 100%; height: 100%;} /* end of popup window for message of the day or week (i.e. office closures) and also used for 'Xmas Office Hours' */ .news_btn{display:none;} .btn_news{display:none;} .offde_btn {display:none;} .btn_offde{display:none;} /*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// BEGINNING OF MEDIA QUERIES FOR MOBILE-FRIENDLY RENDITIONS //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* Galaxy S4, S5 and Note3 */ @media screen and (device-width: 360px)and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)and (orientation: portrait) { #title_block {position: absolute; top:2%; left: 18%; width: 80%; height:5%; background:white; margin-top: -20px;} #slider_panel {position:absolute; top: 8%; left: 10%; width: 80%; height: 16%; background:white;} h1 {font-size:18.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h2 {font-size:16.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h3 {font-size:14.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} p.normal {font-size:11pt; font-family:"Calibri","sans-serif"; text-align:justify; line-height:1.3;} p.mob_menu {font-size: 16pt; color:white; font-family:"Calibri","sans-serif"; line-height: 0.5; padding: 0px 20px;} #menu_mob {display:block; position: absolute; top:25%; left: 5%; width: 50%; height:10%; background:white; z-index:500;} .sidepanel {height: 60%; width: 0; position: fixed; z-index: 20; top: 25%; left: 5%; background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.5s; } /* The sidepanel links */ .sidepanel a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;} /* When you mouse over the navigation links, change their color */ .sidepanel a:hover {color: #f1f1f1;} /* Position and style the close button (top right corner) */ .sidepanel .closebtn {position: absolute; top: 0; right: 25px; font-size: 28px; margin-left: 50px; z-index:10000;} /* Style the button that is used to open the sidepanel */ .openbtn {font-size: 16pt; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none;} .openbtn:hover {background-color: #444;} #main {transition: margin-left .5s; padding: 16px;} #logo {-webkit-perspective: 10000px; /* Chrome, Safari, Opera */ perspective: 10000px; top: 0%; left: 0%; width: 17%; height: 20%; } #tooltip {display:none} #menu_bar {display:none;} #text_box {position: absolute; top:34%; left:2%; width:90%; height: auto; background:white;} #right_panel {display:none} #ext_right_panel {display:none;} #at_bottom {display:none;} #foota {display:none} .search_eng {display:none} p.spacer_foota {line-height:1.4;} #mov {display:none} .mov_text {display:none} #fadeshow1 {display:none;} #mob_right_panel {position: absolute; display: inline; padding: 5px 20px; float: left; top: 94%; left: 1%; width: 90%; height:15%; background:white;} #div2_mob {position: absolute; top: 34%; left: 2%; width: 95%; height: 29%; border:1px none black; background:white;} .execut_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_execut {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_execut:hover {background-color: red; border: 5px solid red;} #topBox {position: absolute; top: 1%; left: 5%; width: 90%; height: 41%; background:white;} #tble {position: absolute; top: 56%; left: 5%; width:90%; height: 40%; background:white;} p.bold {font-size:12pt;font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center; line-height:normal;} p.hdrLeft {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9;} p.hdrRight {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9; } p.txtLeft {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.txtRight {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.eC_title {font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} p.eC_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} #div4_mob {position: absolute; top: 34%; left: 1%; width: 98%; height: 35%; border:1px none black; background:white;} #ttop {position: absolute; top: 3%; left: 1%; width: 90%; height: 15%; border:1px none blue; background:white;} #members {position: absolute; top: 22%; left: 1%; width: 98%; height: 41%; border:1px none red; background:white;} .mem_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} #Our_Office_mob {position: absolute; top: 34%; left: 2%; width: 95%; height: 29%; border:1px none black; background:white;} #top_Box {position:absolute; top: 1%; left: 1%; width: 98%; height:auto; border:1px none black; background:white; overflow: hidden;} p.centa {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal; margin:0.8%;} p.points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.2; padding: 2px 2px;} hr {display: block; height: 1px; overflow:hidden; width: 90%; border-style: inset; border:0; border-top: 1px solid black;} .offde_btn {display:block; position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_offde {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_offde:hover {background-color: red; border: 5px solid red;} .our_museum {position:absolute; top: 34%; left: 5%; width: 90%; height: 75vh; overflow-y: auto; border:2px none green; background:white; overflow-y: auto;} .mpanel {position:relative; top: 1%; left: 5%; width: 90%; margin-bottom: 10px;} .muspoint_box {position: absolute; top: 25%; left: -26%; width: 80%; height: auto; margin-top: 0px;} p.museum_points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.legend {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:normal; margin:0 px;} p.underline {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:justify; text-decoration: underline; line-height:normal; padding:0% 2% 0% 2%;} .res_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_res {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_res:hover {background-color: red; border: 5px solid red;} #SupportUs_mob {position:absolute; top: 34%; left: 5%; width: 95%; height: 70%; border:1px none green; background:white;} #vol_box {position:absolute; top: 1%; left: 6%; width: 90%; height: 28%; border:1px none red; background:white;} #edit {position:absolute; top: 97%; left: 6%; width: 80%; height: 5%; border:1px solid #ececd4; background:#ececd4; border-radius:8%; margin:5%; font-size:12pt; font-size:0.87vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0; padding: 10px 0px 0px 0px; -webkit-transition: height 2s; /* Safari */ transition: height 2s;} #edit:hover {background-color: orange; height: 50px;} #explanation5 {position:absolute; top: 68%; left: 5%; width: 90%; height: 30%; border:1px solid #ececd4; background:#ececd4; border-radius:8%;} p.txt {font-size:10pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.txt_sup {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.sidebar {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.50;} i.fa-map-marker {color:red; font-size: 18pt;} i.fa-clock-o {color:black; font-size: 18pt;} i.fa-paper-plane {color:grey; font-size: 18pt;} i.fa-phone{color:black; font-size: 18pt;} i.fa-envelope-o{color:black; font-size: 16pt;} i.fa-facebook-official {color:blue; font-size: 18pt;} #left_side_panel{display:none; position: absolute; top: 36%; left: 2%; width: 80%; height: auto; border:1px none black; background-color:#F5B041; padding: 10px; border-radius: 10px;} .map_div {position: fixed; top:36%; left:2%; width:80%; height:55%; z-index: 1000;} #ext_right_panel {position: absolute; top: 36%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:#FFF2CC; padding: 10px; border-radius: 10px; z-index:1;} p.misc {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;} .poster {position:absolute; top: 5%; left: 3%; width: 96%; height:auto; border: 1px none red; z-index: 1000;} .poster-popup {position: absolute; top:17%; left:3%; height: auto; width: 90%; padding: 0 0 56.25%; margin: 0; border: 1px none blue;} .poster_btn {position: absolute; top: -10px; left: 1%; width: 10%; height: 10%; text-align:center; z-index: 2000;} .btn_poster{background-color: black; width:50px; border: 5px solid black; border-radius: 50px; color: white; padding: 5px 5px; font-size: 26px; cursor: pointer;} /*#news_mob{position: absolute; top: 36%; left: 10%; width: 80%; height: 55%; border:1px none black; background-color:#F5B041; padding: 10px; border-radius: 10px; z-index:1;}*/ .news_btn {display:block; position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_news {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_news:hover {background-color: red; border: 5px solid red;} .map_popup {position: fixed; top:36%; left:5%; width:85%; height:40%; text-align:center; vertical-align: top; background-color:white; border: 5px solid black; border-radius:20px; padding: 5px; z-index: 1000;} .map_popup:hover {} .map_btn {position: fixed; top: 35%; left: 2%; width: 8%; height: 8%; text-align:center; z-index: 2000;} p.curexh_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; margin-top:-10px;} .exhibition {position:fixed; top:4%; left:3%; width:94%; height:auto; z-index:1000; border: 6px solid black; border-radius: 20px; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.9); background-color:white;} .exhibition_btn {position: fixed; top: 1%; left: 0.5%; width: 10%; height: 10%; text-align:center; z-index: 2000;} p.exhib_header{margin-top: 10px; font-size: 22pt; text-align:center; width: 90%; font-family:"Calibri","sans-serif"; font-weight:bold;} .Books_mob {position: absolute; top: 35%; left: 1%; width: 98%; height: 55%; border:1px none black; background:white;} .bk_btn {position: fixed; top: 25%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} } /* Galaxy S6,S7 */ @media screen and (device-width: 360px)and (device-height: 640px)and (-webkit-device-pixel-ratio: 4)and (orientation: portrait) { #title_block {position: absolute; top:2%; left: 18%; width: 80%; height:5%; background:white; margin-top: -20px;} #slider_panel {position:absolute; top: 8%; left: 10%; width: 80%; height: 16%; background:white;} h1 {font-size:18.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h2 {font-size:16.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h3 {font-size:14.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} p.normal {font-size:11pt; font-family:"Calibri","sans-serif"; text-align:justify; line-height:1.3;} p.mob_menu {font-size: 16pt; color:white; font-family:"Calibri","sans-serif"; line-height: 0.5; padding: 0px 20px;} #menu_mob {display:block; position: absolute; top:27%; left: 5%; width: 50%; height:10%; background:white; z-index:500;} .sidepanel {height: 60%; width: 0; position: fixed; z-index: 20; top: 27%; left: 5%; background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.5s; } /* The sidepanel links */ .sidepanel a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;} /* When you mouse over the navigation links, change their color */ .sidepanel a:hover {color: #f1f1f1;} /* Position and style the close button (top right corner) */ .sidepanel .closebtn {position: absolute; top: 0; right: 25px; font-size: 28px; margin-left: 50px; z-index:10000;} /* Style the button that is used to open the sidepanel */ .openbtn {font-size: 16pt; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none;} .openbtn:hover {background-color: #444;} #main {transition: margin-left .5s; padding: 16px;} #logo {-webkit-perspective: 10000px; /* Chrome, Safari, Opera */ perspective: 10000px; top: 0%; left: 0%; width: 17%; height: 20%; } #tooltip {display:none} #menu_bar {display:none;} #text_box {position: absolute; top:34%; left:2%; width:90%; height: auto; background:white;} #right_panel {display:none} #ext_right_panel {display:none;} #at_bottom {display:none;} #foota {display:none} .search_eng {display:none} p.spacer_foota {line-height:1.4;} #mov {display:none} .mov_text {display:none} #fadeshow1 {display:none;} #mob_right_panel {position: absolute; display: inline; padding: 5px 20px; float: left; top: 94%; left: 1%; width: 90%; height:15%; background:white;} #div2_mob {position: absolute; top: 34%; left: 2%; width: 95%; height: 29%; border:1px none black; background:white;} .execut_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_execut {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_execut:hover {background-color: red; border: 5px solid red;} #topBox {position: absolute; top: 1%; left: 5%; width: 90%; height: 41%; background:white;} #tble {position: absolute; top: 56%; left: 5%; width:90%; height: 40%; background:white;} p.bold {font-size:12pt;font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center; line-height:normal;} p.hdrLeft {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9;} p.hdrRight {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9; } p.txtLeft {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.txtRight {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.eC_title {font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} p.eC_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} #div4_mob {position: absolute; top: 34%; left: 1%; width: 98%; height: 35%; border:1px none black; background:white;} #ttop {position: absolute; top: 3%; left: 1%; width: 90%; height: 15%; border:1px none blue; background:white;} #members {position: absolute; top: 22%; left: 1%; width: 98%; height: 41%; border:1px none red; background:white;} .mem_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} #Our_Office_mob {position: absolute; top: 34%; left: 2%; width: 95%; height: 29%; border:1px none black; background:white;} #top_Box {position:absolute; top: 1%; left: 1%; width: 98%; height:auto; border:1px none black; background:white; overflow: hidden;} p.centa {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal; margin:0.8%;} p.points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.2; padding: 2px 2px;} hr {display: block; height: 1px; overflow:hidden; width: 90%; border-style: inset; border:0; border-top: 1px solid black;} .offde_btn {display:block; position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_offde {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_offde:hover {background-color: red; border: 5px solid red;} .our_museum {position:absolute; top: 34%; left: 5%; width: 90%; height: 75vh; overflow-y: auto; border:2px none green; background:white; overflow-y: auto;} .mpanel {position:relative; top: 1%; left: 5%; width: 90%; margin-bottom: 10px;} .muspoint_box {position: absolute; top: 25%; left: -26%; width: 80%; height: auto; margin-top: 0px;} p.museum_points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.legend {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:normal; margin:0 px;} p.underline {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:justify; text-decoration: underline; line-height:normal; padding:0% 2% 0% 2%;} .res_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_res {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_res:hover {background-color: red; border: 5px solid red;} #SupportUs_mob {position:absolute; top: 34%; left: 5%; width: 95%; height: 70%; border:1px none green; background:white;} #vol_box {position:absolute; top: 1%; left: 6%; width: 90%; height: 28%; border:1px none red; background:white;} #edit {position:absolute; top: 97%; left: 6%; width: 80%; height: 5%; border:1px solid #ececd4; background:#ececd4; border-radius:8%; margin:5%; font-size:12pt; font-size:0.87vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0; padding: 10px 0px 0px 0px; -webkit-transition: height 2s; /* Safari */ transition: height 2s;} #edit:hover {background-color: orange; height: 50px;} #explanation5 {position:absolute; top: 68%; left: 5%; width: 90%; height: 30%; border:1px solid #ececd4; background:#ececd4; border-radius:8%;} p.txt {font-size:10pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.txt_sup {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.sidebar {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.50;} i.fa-map-marker {color:red; font-size: 18pt;} i.fa-clock-o {color:black; font-size: 18pt;} i.fa-paper-plane {color:grey; font-size: 18pt;} i.fa-phone{color:black; font-size: 18pt;} i.fa-envelope-o{color:black; font-size: 16pt;} i.fa-facebook-official {color:blue; font-size: 18pt;} #left_side_panel{display:none; position: absolute; top: 42%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:#F5B041; padding: 10px; border-radius: 10px;} .map_div {position: fixed; top:36%; left:2%; width:80%; height:55%; z-index: 1000;} #ext_right_panel {position: absolute; top: 36%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:#FFF2CC; padding: 10px; border-radius: 10px; z-index:1;} p.misc {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;} .poster {position:absolute; top: 5%; left: 3%; width: 96%; height:auto; border: 1px none red; z-index: 1000;} .poster-popup {position: absolute; top:17%; left:3%; height: auto; width: 90%; padding: 0 0 56.25%; margin: 0; border: 1px none blue;} .poster_btn {position: absolute; top: -10px; left: 1%; width: 10%; height: 10%; text-align:center; z-index: 2000;} .btn_poster{background-color: black; width:50px; border: 5px solid black; border-radius: 50px; color: white; padding: 5px 5px; font-size: 26px; cursor: pointer;} /*#news_mob{position: absolute; top: 36%; left: 10%; width: 80%; height: 55%; border:1px none black; background-color:#F5B041; padding: 10px; border-radius: 10px; z-index:1;}*/ .news_btn {display:block; position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_news {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_news:hover {background-color: red; border: 5px solid red;} .map_popup {position: fixed; top:36%; left:5%; width:85%; height:40%; text-align:center; vertical-align: top; background-color:white; border: 5px solid black; border-radius:20px; padding: 5px; z-index: 1000;} .map_popup:hover {} .map_btn {position: fixed; top: 35%; left: 2%; width: 8%; height: 8%; text-align:center; z-index: 2000;} p.curexh_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; margin-top:-10px;} .exhibition {position:fixed; top:4%; left:3%; width:94%; height:auto; z-index:1000; border: 6px solid black; border-radius: 20px; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.9); background-color:white;} .exhibition_btn {position: fixed; top: 1%; left: 0.5%; width: 10%; height: 10%; text-align:center; z-index: 2000;} p.exhib_header{margin-top: 10px; font-size: 22pt; text-align:center; width: 90%; font-family:"Calibri","sans-serif"; font-weight:bold;} .Books_mob {position: absolute; top: 35%; left: 1%; width: 98%; height: 55%; border:1px none black; background:white;} .bk_btn {position: fixed; top: 25%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} } /* Galaxy S9 added 9 may 2019 */ @media only screen and (device-width: 360px)and (device-height: 740px)and (-webkit-device-pixel-ratio: 4)and (orientation : portrait) { #title_block{position: absolute; top:2%; left: 18%; width: 80%; height:5%; background:white; margin-top: -20px;} #slider_panel{position:absolute; top: 8%; left: 10%; width: 80%; height: 16%; background:white;} #menu_bar {display:none} .search_eng {display:none} h1 {font-size:18.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h2 {font-size:16.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h3 {font-size:14.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} p.normal {font-size:11pt; font-family:"Calibri","sans-serif"; text-align:justify; line-height:1.3;} p.mob_menu {font-size: 16pt; color:white; font-family:"Calibri","sans-serif"; line-height: 0.5; padding: 0px 20px;} #menu_mob {display:block; position: absolute; top:27%; left: 5%; width: 50%; height:10%; background:white; z-index:500;} .sidepanel {height: 60%; width: 0; position: fixed; z-index: 20; top: 27%; left: 5%; background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.5s; } /* The sidepanel links */ .sidepanel a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;} /* When you mouse over the navigation links, change their color */ .sidepanel a:hover {color: #f1f1f1;} /* Position and style the close button (top right corner) */ .sidepanel .closebtn {position: absolute; top: 0; right: 25px; font-size: 28px; margin-left: 50px; z-index:10000;} /* Style the button that is used to open the sidepanel */ .openbtn {font-size: 16pt; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none;} .openbtn:hover {background-color: #444;} #main {transition: margin-left .5s; padding: 16px;} #logo {-webkit-perspective: 10000px; /* Chrome, Safari, Opera */ perspective: 10000px; top: 0%; left: 0%; width: 17%; height: 20%; } #tooltip {display:none} #text_box {position: absolute; top:37%; left:2%; width:90%; height: auto; background:white;} #right_panel {display:none} #ext_right_panel {display:none;} #at_bottom {display:none;} #foota {display:none} p.spacer_foota {line-height:1.4;} #mov {display:none} .mov_text {display:none} #fadeshow1 {display:none;} #mob_right_panel {position: absolute; display: inline; padding: 5px 20px; float: left; top: 94%; left: 1%; width: 90%; height:15%; background:white;} #div2_mob {position: absolute; top: 37%; left: 2%; width: 95%; height: 29%; border:1px none black; background:white;} .execut_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_execut {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_execut:hover {background-color: red; border: 5px solid red;} #topBox {position: absolute; top: 1%; left: 5%; width: 90%; height: 41%; background:white;} #tble {position: absolute; top: 56%; left: 5%; width:90%; height: 40%; background:white;} p.bold {font-size:12pt;font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center; line-height:normal;} p.hdrLeft {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9;} p.hdrRight {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9; } p.txtLeft {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.txtRight {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.eC_title {font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} p.eC_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} #div4_mob {position: absolute; top: 37%; left: 1%; width: 98%; height: 35%; border:1px none black; background:white;} #ttop {position: absolute; top: 3%; left: 1%; width: 90%; height: 15%; border:1px none blue; background:white;} #members {position: absolute; top: 22%; left: 1%; width: 98%; height: 41%; border:1px none red; background:white;} .mem_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} #Our_Office_mob {position: absolute; top: 37%; left: 2%; width: 95%; height: 29%; border:1px none black; background:white;} #top_Box {position:absolute; top: 1%; left: 1%; width: 98%; height:auto; border:1px none black; background:white; overflow: hidden;} p.centa {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal; margin:0.8%;} p.points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.2; padding: 2px 2px;} hr {display: block; height: 1px; overflow:hidden; width: 90%; border-style: inset; border:0; border-top: 1px solid black;} .offde_btn {display:block; position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_offde {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_offde:hover {background-color: red; border: 5px solid red;} .our_museum {position:absolute; top: 37%; left: 5%; width: 90%; height: 75vh; overflow-y: auto; border:2px none green; background:white; overflow-y: auto;} .mpanel {position:relative; top: 1%; left: 5%; width: 90%; margin-bottom: 10px;} .muspoint_box {position: absolute; top: 25%; left: -26%; width: 80%; height: auto; margin-top: 0px;} p.museum_points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.legend {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:normal; margin:0 px;} p.underline {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:justify; text-decoration: underline; line-height:normal; padding:0% 2% 0% 2%;} .res_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_res {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_res:hover {background-color: red; border: 5px solid red;} #SupportUs_mob {position:absolute; top: 37%; left: 5%; width: 95%; height: 70%; border:1px none green; background:white;} #vol_box {position:absolute; top: 1%; left: 6%; width: 90%; height: 28%; border:1px none red; background:white;} #edit {position:absolute; top: 97%; left: 6%; width: 80%; height: 5%; border:1px solid #ececd4; background:#ececd4; border-radius:8%; margin:5%; font-size:12pt; font-size:0.87vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0; padding: 10px 0px 0px 0px; -webkit-transition: height 2s; /* Safari */ transition: height 2s;} #edit:hover {background-color: orange; height: 50px;} #explanation5 {position:absolute; top: 68%; left: 5%; width: 90%; height: 30%; border:1px solid #ececd4; background:#ececd4; border-radius:8%;} p.txt {font-size:10pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.txt_sup {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.sidebar {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.50;} i.fa-map-marker {color:red; font-size: 18pt;} i.fa-clock-o {color:black; font-size: 18pt;} i.fa-paper-plane {color:grey; font-size: 18pt;} i.fa-phone{color:black; font-size: 18pt;} i.fa-envelope-o{color:black; font-size: 16pt;} i.fa-facebook-official {color:blue; font-size: 18pt;} #left_side_panel{display:none; position: absolute; top: 42%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:#F5B041; padding: 10px; border-radius: 10px;} .map_div {position: fixed; top:36%; left:2%; width:80%; height:55%; z-index: 1000;} #ext_right_panel {position: absolute; top: 37%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:#FFF2CC; padding: 10px; border-radius: 10px; z-index:1;} p.misc {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;} .poster {position:absolute; top: 5%; left: 3%; width: 96%; height:auto; border: 1px none red; z-index: 1000;} .poster_btn {position: absolute; top: -10px; left: 1%; width: 10%; height: 10%; text-align:center; z-index: 2000;} .btn_poster{background-color: black; width:50px; border: 5px solid black; border-radius: 50px; color: white; padding: 5px 5px; font-size: 26px; cursor: pointer;} .news_btn {display:block; position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 150;} .btn_news {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_news:hover {background-color: red; border: 5px solid red;} .map_popup {position: fixed; top:36%; left:5%; width:85%; height:40%; text-align:center; vertical-align: top; background-color:white; border: 5px solid black; border-radius:20px; padding: 5px; z-index: 1000;} .map_btn {position: fixed; top: 35%; left: 2%; width: 8%; height: 8%; text-align:center; z-index: 2000;} p.curexh_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; margin-top:-10px;} .exhibition {position:fixed; top:4%; left:3%; width:94%; height:auto; z-index:1000; border: 6px solid black; border-radius: 20px; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.9); background-color:white;} .exhibition_btn {position: fixed; top: 1%; left: 0.5%; width: 10%; height: 10%; text-align:center; z-index: 2000;} p.exhib_header{margin-top: 10px; font-size: 22pt; text-align:center; width: 90%; font-family:"Calibri","sans-serif"; font-weight:bold;} .Books_mob {position: absolute; top: 37%; left: 1%; width: 98%; height: 55%; border:1px none black; background:white;} .bk_btn {position: fixed; top: 25%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} } /* iPhone 6, 7 & 8 */ @media only screen and (min-device-width: 375px) and (-webkit-device-pixel-ratio: 2) and (orientation : portrait) { #title_block {position: absolute; top:2%; left: 18%; width: 80%; height:5%; background:white; margin-top: -20px;} #slider_panel {position:absolute; top: 8%; left: 10%; width: 80%; height: 16%; background:white;} h1 {font-size:18.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h2 {font-size:16.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h3 {font-size:14.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} p.normal {font-size:11pt; font-family:"Calibri","sans-serif"; text-align:justify; line-height:1.3;} p.mob_menu {font-size: 16pt; color:white; font-family:"Calibri","sans-serif"; line-height: 0.5; padding: 0px 20px;} #menu_mob {display:block; position: absolute; top:27%; left: 5%; width: 50%; height:10%; background:white; z-index:500;} .sidepanel {height: 60%; width: 0; position: fixed; z-index: 20; top: 27%; left: 5%; background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.5s; } /* The sidepanel links */ .sidepanel a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;} /* When you mouse over the navigation links, change their color */ .sidepanel a:hover {color: #f1f1f1;} /* Position and style the close button (top right corner) */ .sidepanel .closebtn {position: absolute; top: 0; right: 25px; font-size: 28px; margin-left: 50px; z-index:10000;} /* Style the button that is used to open the sidepanel */ .openbtn {font-size: 16pt; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none;} .openbtn:hover {background-color: #444;} #main {transition: margin-left .5s; padding: 16px;} #logo {-webkit-perspective: 10000px; /* Chrome, Safari, Opera */ perspective: 10000px; top: 0%; left: 0%; width: 17%; height: 20%; } #tooltip {display:none} #menu_bar {display:none;} #text_box {position: absolute; top:37%; left:2%; width:90%; height: auto; background:white;} #right_panel {display:none} #ext_right_panel {display:none;} #at_bottom {display:none;} #foota {display:none} .search_eng {display:none} p.spacer_foota {line-height:1.4;} #mov {display:none} .mov_text {display:none} #fadeshow1 {display:none;} #mob_right_panel {position: absolute; display: inline; padding: 5px 20px; float: left; top: 94%; left: 1%; width: 90%; height:15%; background:white;} #div2_mob {position: absolute; top: 37%; left: 2%; width: 95%; height: 29%; border:1px none black; background:white;} .execut_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_execut {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_execut:hover {background-color: red; border: 5px solid red;} #topBox {position: absolute; top: 1%; left: 5%; width: 90%; height: 41%; background:white;} #tble {position: absolute; top: 56%; left: 5%; width:90%; height: 40%; background:white;} p.bold {font-size:12pt;font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center; line-height:normal;} p.hdrLeft {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9;} p.hdrRight {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9; } p.txtLeft {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.txtRight {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.eC_title {font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} p.eC_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} #div4_mob {position: absolute; top: 37%; left: 1%; width: 98%; height: 35%; border:1px none black; background:white;} #ttop {position: absolute; top: 3%; left: 1%; width: 90%; height: 15%; border:1px none blue; background:white;} #members {position: absolute; top: 22%; left: 1%; width: 98%; height: 41%; border:1px none red; background:white;} .mem_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} #Our_Office_mob {position: absolute; top: 37%; left: 2%; width: 95%; height: 29%; border:1px none black; background:white;} #top_Box {position:absolute; top: 1%; left: 1%; width: 98%; height:auto; border:1px none black; background:white; overflow: hidden;} p.centa {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal; margin:0.8%;} p.points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.2; padding: 2px 2px;} hr {display: block; height: 1px; overflow:hidden; width: 90%; border-style: inset; border:0; border-top: 1px solid black;} .offde_btn {display:block; position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_offde {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_offde:hover {background-color: red; border: 5px solid red;} .our_museum {position:absolute; top: 37%; left: 5%; width: 90%; height: 75vh; overflow-y: auto; border:2px none green; background:white; overflow-y: auto;} .mpanel {position:relative; top: 1%; left: 5%; width: 90%; margin-bottom: 10px;} .muspoint_box {position: absolute; top: 25%; left: -26%; width: 80%; height: auto; margin-top: 0px;} p.museum_points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.legend {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:normal; margin:0 px;} p.underline {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:justify; text-decoration: underline; line-height:normal; padding:0% 2% 0% 2%;} .res_btn {position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_res {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_res:hover {background-color: red; border: 5px solid red;} #SupportUs_mob {position:absolute; top: 37%; left: 5%; width: 95%; height: 70%; border:1px none green; background:white;} #vol_box {position:absolute; top: 1%; left: 6%; width: 90%; height: 28%; border:1px none red; background:white;} #edit {position:absolute; top: 97%; left: 6%; width: 80%; height: 5%; border:1px solid #ececd4; background:#ececd4; border-radius:8%; margin:5%; font-size:12pt; font-size:0.87vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0; padding: 10px 0px 0px 0px; -webkit-transition: height 2s; /* Safari */ transition: height 2s;} #edit:hover {background-color: orange; height: 50px;} #explanation5 {position:absolute; top: 68%; left: 5%; width: 90%; height: 30%; border:1px solid #ececd4; background:#ececd4; border-radius:8%;} p.txt {font-size:10pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.txt_sup {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.sidebar {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.50;} i.fa-map-marker {color:red; font-size: 18pt;} i.fa-clock-o {color:black; font-size: 18pt;} i.fa-paper-plane {color:grey; font-size: 18pt;} i.fa-phone{color:black; font-size: 18pt;} i.fa-envelope-o{color:black; font-size: 16pt;} i.fa-facebook-official {color:blue; font-size: 18pt;} #left_side_panel{display:none; position: absolute; top: 42%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:#F5B041; padding: 10px; border-radius: 10px;} .map_div {position: fixed; top:36%; left:2%; width:80%; height:55%; z-index: 1000;} #ext_right_panel {position: absolute; top: 37%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:#FFF2CC; padding: 10px; border-radius: 10px; z-index:1;} p.misc {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;} .poster {position:absolute; top: 5%; left: 3%; width: 96%; height:auto; border: 1px none red; z-index: 1000;} .poster_btn {position: absolute; top: -10px; left: 1%; width: 10%; height: 10%; text-align:center; z-index: 2000;} .btn_poster{background-color: black; width:50px; border: 5px solid black; border-radius: 50px; color: white; padding: 5px 5px; font-size: 26px; cursor: pointer;} .news_btn {display:block; position: fixed; top: 27%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 150;} .btn_news {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_news:hover {background-color: red; border: 5px solid red;} .map_popup {position: fixed; top:36%; left:5%; width:85%; height:40%; text-align:center; vertical-align: top; background-color:white; border: 5px solid black; border-radius:20px; padding: 5px; z-index: 1000;} .map_popup:hover {} .map_btn {position: fixed; top: 35%; left: 2%; width: 8%; height: 8%; text-align:center; z-index: 2000;} p.curexh_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; margin-top:-10px;} .exhibition {position:fixed; top:4%; left:3%; width:94%; height:auto; z-index:1000; border: 6px solid black; border-radius: 20px; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.9); background-color:white;} .exhibition_btn {position: fixed; top: 1%; left: 0.5%; width: 10%; height: 10%; text-align:center; z-index: 2000;} p.exhib_header{margin-top: 10px; font-size: 22pt; text-align:center; width: 90%; font-family:"Calibri","sans-serif"; font-weight:bold;} .Books_mob {position: absolute; top: 37%; left: 1%; width: 98%; height: 55%; border:1px none black; background:white;} .bk_btn {position: fixed; top: 25%; left: 70%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} } /* iPhone 6, 7 ,8 Plus */ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) { #title_block {position: absolute; top:2%; left: 18%; width: 80%; height:5%; background:white; margin-top: -20px;} #slider_panel {position:absolute; top: 8%; left: 10%; width: 80%; height: 16%; background:white;} h1 {font-size:18.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h2 {font-size:16.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h3 {font-size:14.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} p.normal {font-size:14pt; font-family:"Calibri","sans-serif"; text-align:justify; line-height:1.3;} p.mob_menu {font-size: 16pt; color:white; font-family:"Calibri","sans-serif"; line-height: 0.5; padding: 0px 20px;} #menu_mob {display:block; position: absolute; top:27%; left: 5%; width: 50%; height:10%; background:white; z-index:500;} .sidepanel {height: 60%; width: 0; position: fixed; z-index: 20; top: 27%; left: 5%; background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.5s; } /* The sidepanel links */ .sidepanel a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;} /* When you mouse over the navigation links, change their color */ .sidepanel a:hover {color: #f1f1f1;} /* Position and style the close button (top right corner) */ .sidepanel .closebtn {position: absolute; top: 0; right: 25px; font-size: 28px; margin-left: 50px; z-index:100;} /* Style the button that is used to open the sidepanel */ .openbtn {font-size: 16pt; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none;} .openbtn:hover {background-color: #444;} #main {transition: margin-left .5s; padding: 16px;} #logo {-webkit-perspective: 10000px; /* Chrome, Safari, Opera */ perspective: 10000px; top: 0%; left: 0%; width: 17%; height: 20%; } #tooltip {display:none} #menu_bar {display:none;} #text_box {position: absolute; top:37%; left:2%; width:90%; height: auto; background:white;} #mob_right_panel {position: absolute; display: inline; padding: 5px 20px; float: left; top: 124%; left: 1%; width: 90%; height:auto; background:white;} #right_panel {display:none} #at_bottom {display:none;} #foota {display:none} .search_eng {display:none} p.spacer_foota {line-height:1.4;} #mov {display:none} .mov_text {display:none} #fadeshow1 {display:none;} #div2_mob {position: absolute; top: 37%; left: 2%; width: 95%; height: 29%; border:1px none black; background:white;} .execut_btn {position: fixed; top: 27%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_execut {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_execut:hover {background-color: red; border: 5px solid red;} #topBox {position: absolute; top: 1%; left: 5%; width: 90%; height: 41%; background:white;} #tble {position: absolute; top: 56%; left: 5%; width:90%; height: 40%; background:white;} p.bold {font-size:12pt;font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center; line-height:normal;} p.hdrLeft {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9;} p.hdrRight {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9; } p.txtLeft {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.txtRight {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.eC_title {font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} p.eC_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} #div4_mob {position: absolute; top: 34%; left: 1%; width: 98%; height: 35%; border:1px none black; background:white;} #ttop {position: absolute; top: 3%; left: 1%; width: 90%; height: 15%; border:1px none blue; background:white;} #members {position: absolute; top: 22%; left: 1%; width: 98%; height: 41%; border:1px none red; background:white;} .mem_btn {position: fixed; top: 27%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} #Our_Office_mob {position: absolute; top: 37%; left: 2%; width: 95%; height: 29%; border:1px none black; background:white;} #top_Box {position:absolute; top: 1%; left: 1%; width: 98%; height:auto; border:1px none black; background:white; overflow: hidden;} p.centa {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal; margin:0.8%;} p.points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.2; padding: 2px 2px;} hr {display: block; height: 1px; overflow:hidden; width: 90%; border-style: inset; border:0; border-top: 1px solid black;} .offde_btn {display:block; position: fixed; top: 27%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_offde {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_offde:hover {background-color: red; border: 5px solid red;} .our_museum {position:absolute; top: 38%; left: 5%; width: 90%; height: 75vh; overflow-y: auto; border:2px none green; background:white; overflow-y: auto;} .mpanel {position:relative; top: 1%; left: 5%; width: 90%; margin-bottom: 10px;} .muspoint_box {position: absolute; top: 25%; left: -26%; width: 80%; height: auto; margin-top: 0px;} p.museum_points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.legend {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:normal; margin:0 px;} p.underline {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:justify; text-decoration: underline; line-height:normal; padding:0% 2% 0% 2%;} .res_btn {position: fixed; top: 27%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_res {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_res:hover {background-color: red; border: 5px solid red;} #SupportUs_mob {position:absolute; top: 34%; left: 5%; width: 95%; height: 70%; border:1px none green; background:white;} #vol_box {position:absolute; top: 1%; left: 6%; width: 90%; height: 28%; border:1px none red; background:white;} #edit {position:absolute; top: 97%; left: 6%; width: 80%; height: 5%; border:1px solid #ececd4; background:#ececd4; border-radius:8%; margin:5%; font-size:12pt; font-size:0.87vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0; padding: 10px 0px 0px 0px; -webkit-transition: height 2s; /* Safari */ transition: height 2s;} #edit:hover {background-color: orange; height: 50px;} #explanation5 {position:absolute; top: 68%; left: 5%; width: 90%; height: 30%; border:1px solid #ececd4; background:#ececd4; border-radius:8%;} p.txt {font-size:10pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.txt_sup {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.sidebar {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.50;} i.fa-map-marker {color:red; font-size: 18pt;} i.fa-clock-o {color:black; font-size: 18pt;} i.fa-paper-plane {color:grey; font-size: 18pt;} i.fa-phone{color:black; font-size: 18pt;} i.fa-envelope-o{color:black; font-size: 16pt;} i.fa-facebook-official {color:blue; font-size: 18pt;} #left_side_panel {position: absolute; top: 42%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:#FFF2CC; padding: 10px; border-radius: 10px;} /* wcolour was FFF2CC */ .map_div {position: fixed; top:36%; left:2%; width:80%; height:55%; z-index: 1000;} #ext_right_panel {position: absolute; display:none; top: 42%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:#FFF2CC; padding: 10px; border-radius: 10px; z-index:110;} p.misc {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;} .poster {position:absolute; top: 5%; left: 3%; width: 96%; height:auto; border: 1px none red; z-index: 1000;} .poster-popup {position: absolute; top:17%; left:3%; height: auto; width: 90%; padding: 0 0 56.25%; margin: 0; border: 1px none blue;} .poster_btn {position: absolute; top: -10px; left: 1%; width: 10%; height: 10%; text-align:center; z-index: 2000;} .btn_poster{background-color: black; width:50px; border: 5px solid black; border-radius: 50px; color: white; padding: 5px 5px; font-size: 26px; cursor: pointer;} /*#news_mob{position: absolute; top: 36%; left: 10%; width: 80%; height: 55%; border:1px none black; background-color:#F5B041; padding: 10px; border-radius: 10px; z-index:1;}*/ .news_btn {display:block; position: fixed; top: 27%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 150;} .btn_news {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_news:hover {background-color: red; border: 5px solid red;} .map_popup {position: fixed; top:36%; left:5%; width:85%; height:40%; text-align:center; vertical-align: top; background-color:white; border: 5px solid black; border-radius:20px; padding: 5px; z-index: 1000;} .map_popup:hover {} .map_btn {position: fixed; top: 35%; left: 2%; width: 8%; height: 8%; text-align:center; z-index: 2000;} p.curexh_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; margin-top:-10px;} .exhibition {position:fixed; top:22%; left:4%; width:92%; height:auto; z-index:1000; border: 6px solid black; border-radius: 20px; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.9); background-color:white;} .exhibition_btn {position: fixed; top: 21%; left: 0.5%; width: 10%; height: 10%; text-align:center; z-index: 2000;} p.exhib_header{margin-top: 10px; font-size: 22pt; text-align:center; width: 90%; font-family:"Calibri","sans-serif"; font-weight:bold;} .Books_mob {position: absolute; top: 42%; left: 1%; width: 98%; height: 55%; border:1px none black; background:white;} .bk_btn {position: fixed; top: 27%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} } /* iPads (all) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { #title_block {position: absolute; top:2%; left: 18%; width: 80%; height:5%; background:white; margin-top: -20px;} #slider_panel{position:absolute; top: 11%; left: 10%; width: 80%; height: 16%; background:white; z-index:2;} h1 {font-size:18.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h2 {font-size:16.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} h3 {font-size:14.0pt; font-family:"Calibri","sans-serif"; font-weight:bold; line-height:1.0;} p.normal{font-size:11pt; font-family:"Calibri","sans-serif"; text-align:justify; line-height:1.3;} p.news {font-size:11pt; font-family:"Calibri","sans-serif"; text-align:justify; line-height:1.3;} p.mob_menu {font-size: 16pt; color:white; font-family:"Calibri","sans-serif"; line-height: 0.5; padding: 0px 20px;} #menu_mob {display:block; position: absolute; top:33%; left: 5%; width: 10%; height:8%; background:white; z-index:500;} .sidepanel {height: 60%; width: 0; position: fixed; z-index: 20; top: 27%; left: 5%; background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.5s; } /* The sidepanel links */ .sidepanel a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;} /* When you mouse over the navigation links, change their color */ .sidepanel a:hover {color: #f1f1f1;} /* Position and style the close button (top right corner) */ .sidepanel .closebtn {position: absolute; top: 0; right: 25px; font-size: 28px; margin-left: 50px; z-index:10000;} /* Style the button that is used to open the sidepanel */ .openbtn {font-size: 20pt; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border:2px solid black; border-radius: 3px;} .openbtn:hover {background-color: #444;} #main {transition: margin-left .5s; padding: 16px;} #logo {-webkit-perspective: 10000px; /* Chrome, Safari, Opera */ perspective: 10000px; top: 0%; left: 0%; width: 17%; height: 20%; } #tooltip {display:none} #menu_bar {display:none;} #text_box {position: absolute; top:44%; left:10%; width:80%; height: auto; background:white;} #left_side_panel {position: absolute; top: 42%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:#FFF2CC; padding: 10px; border-radius: 10px;} /* wcolour was FFF2CC */ #right_panel {display:none} #ext_right_panel {display:none;} #at_bottom {display:none;} #foota {display:none} .search_eng {display:none} p.spacer_foota {line-height:1.4;} #mov {display:none} .mov_text {display:none} #fadeshow1 {display:none;} #mob_right_panel {position: absolute; display: inline; padding: 5px 20px; float: left; top: 80%; left: 10%; width: 90%; height:15%; background:white;} #div2_mob {position: absolute; top: 42%; left: 10%; width: 80%; height: 29%; border:1px none black; background:white;} .execut_btn {position: fixed; top: 34%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_execut {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_execut:hover {background-color: red; border: 5px solid red;} #topBox {position: absolute; top: 1%; left: 5%; width: 90%; height: 41%; background:white;} #tble {position: absolute; top: 56%; left: 5%; width:90%; height: 40%; background:white;} p.bold {font-size:12pt;font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center; line-height:normal;} p.hdrLeft {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9;} p.hdrRight {font-size:14.0pt; font-weight:bold; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; background-color:#fff; border-bottom:1px solid black; padding:0px 25px; line-height:0.9; } p.txtLeft {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:right; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.txtRight {font-size:11.0pt;font-weight:normal; text-decoration:none; font-family:"Calibri","sans-serif"; text-align:left; vertical-align:middle; background-color:#fff; border-bottom:1px solid black; line-height:0.9;} p.eC_title {font-size:16pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} p.eC_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0;} #div4_mob {position: absolute; top: 40%; left: 10%; width: 80%; height: 35%; border:1px none black;} #ttop {position: absolute; top: 1%; left: 10%; width: 80%; height: 5%; border:2px none blue; margin-top:0px;} #members {position: absolute; top: 14%; left: 10%; width: 80%; height: 53%; border:1px none blue; background:white;margin-top:0;} .mem_btn {position: fixed; top: 34%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} #Our_Office_mob {position: absolute; top: 42%; left: 10%; width: 80%; height: 29%; border:1px none black; background:white;} #top_Box {position:absolute; top: 1%; left: 10%; width: 80%; height:auto; border:1px none black; background:white; overflow: hidden;} p.centa {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal; margin:0.8%;} p.points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.2; padding: 2px 2px;} hr {display: block; height: 1px; overflow:hidden; width: 90%; border-style: inset; border:0; border-top: 1px solid black;} .offde_btn {display:block; position: fixed; top: 34%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_offde {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_offde:hover {background-color: red; border: 5px solid red;} .our_museum {position:absolute; top: 42%; left: 10%; width: 80%; height: 75vh; overflow-y: auto; border:2px none green; background:white; overflow-y: auto;} .mpanel {position:relative; top: 1%; left: 5%; width: 90%; margin-bottom: 10px;} .muspoint_box {position: absolute; top: 25%; left: -26%; width: 80%; height: auto; margin-top: 0px;} p.museum_points {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.legend {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:justify; line-height:normal; margin:0 px;} p.underline {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:justify; text-decoration: underline; line-height:normal; padding:0% 2% 0% 2%;} .res_btn {position: fixed; top: 34%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_res {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_res:hover {background-color: red; border: 5px solid red;} #SupportUs_mob {position:absolute; top: 42%; left: 10%; width: 80%; height: 70%; border:1px none green; background:white;} #vol_box {position:absolute; top: 1%; left: 6%; width: 90%; height: 28%; border:1px none red; background:white;} #edit {position:absolute; top: 97%; left: 6%; width: 80%; height: 5%; border:1px solid #ececd4; background:#ececd4; border-radius:8%; margin:5%; font-size:12pt; font-size:0.87vmax; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:1.0; padding: 10px 0px 0px 0px; -webkit-transition: height 2s; /* Safari */ transition: height 2s;} #edit:hover {background-color: orange; height: 50px;} #explanation5 {position:absolute; top: 68%; left: 5%; width: 90%; height: 30%; border:1px solid #ececd4; background:#ececd4; border-radius:8%;} p.txt {font-size:10pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.txt_sup {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:center; line-height:normal;} p.sidebar {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; line-height:0.50;} i.fa-map-marker {color:red; font-size: 18pt;} i.fa-clock-o {color:black; font-size: 18pt;} i.fa-paper-plane {color:grey; font-size: 18pt;} i.fa-phone{color:black; font-size: 18pt;} i.fa-envelope-o{color:black; font-size: 16pt;} i.fa-facebook-official {color:blue; font-size: 18pt;} .map_div {position: fixed; top:42%; left:2%; width:80%; height:55%; z-index: 1000;} #ext_right_panel {position: absolute; top: 42%; left: 10%; width: 80%; height: auto; border:1px none black; background-color:##FFF2CC; padding: 10px; border-radius: 10px; z-index:1;} p.misc {font-size:14pt; font-family:"Calibri","sans-serif"; font-weight:bold; text-align:center;} .poster {position:absolute; top: 5%; left: 10%; width: 80%; height:auto; border: 1px none red; z-index: 1000;} .poster_btn {position: absolute; top: -10px; left: 1%; width: 10%; height: 10%; text-align:center; z-index: 1100;} .btn_poster{background-color: black; width:50px; border: 5px solid black; border-radius: 50px; color: white; padding: 5px 5px; font-size: 26px; cursor: pointer;} .news_btn {display:block; position: fixed; top: 34%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none black; z-index: 15;} .btn_news {display:block; background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_news:hover {background-color: red; border: 5px solid red;} .map_popup {position: fixed; top:38%; left:5%; width:85%; height:40%; text-align:center; vertical-align: top; background-color:white; border: 5px solid black; border-radius:20px; padding: 5px; z-index: 1000;} .map_popup:hover {} .map_btn {position: fixed; top: 35%; left: 2%; width: 8%; height: 8%; text-align:center; z-index: 2000;} p.curexh_normal {font-size:12pt; font-family:"Calibri","sans-serif"; font-weight:normal; text-align:left; margin-top:-10px;} .exhibition {position:fixed; top:4%; left:3%; width:85%; height:auto; z-index:1000; border: 6px solid black; border-radius: 20px; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.9); background-color:white;} .exhibition_btn {position: fixed; top: 1%; left: 0.5%; width: 10%; height: 10%; text-align:center; z-index: 2000;} p.exhib_header{margin-top: 10px; font-size: 22pt; text-align:center; width: 90%; font-family:"Calibri","sans-serif"; font-weight:bold;} .Books_mob {position: absolute; top: 42%; left: 1%; width: 98%; height: 55%; border:1px none black; background:white;} .bk_btn {position: fixed; top: 34%; left: 75%; width: 110px; height: auto; text-align:center; border: 1px none white; z-index: 15;} .btn_mem {background-color: green; border: 5px solid green; border-radius: 20px; color: white; padding: 0px 9px; font-size: 18px; cursor: pointer;} .btn_mem:hover {background-color: red; border: 5px solid red;} } /* end of iPad */