/* fix for scroll bars on webkit & >=Mac OS X Lion */
::-webkit-scrollbar {
background-color: rgba(0,0,0,0.5);
width: 0.75em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.5);
}
#masterPanoContainer
{
font-family:utopia-std-display,serif;
}
#tourTitle
{
margin:auto;
text-align:center;
font-family:utopia-std-display,serif;
font-size:32px;
padding-bottom:20px;
padding-top:20px;
}
#panoContainer
{
width:1200px;
height:675px;
position: relative;
overflow:hidden;
margin:auto;
}
#tileContainer{
width:100%;
height:100%;
pointer-events: none;
}
#panoThumbs{
display:block;
position:absolute;
top:5px;
left:0;
}
.panoThumb
{
width:100px;
height:100px;
background-color:#B67C7D;
margin:10px;
float:left;
}
#instructionContainer
{
height:100%;
width:100%;
background-color:#000000;
position:absolute;
top:0;
left:0;
pointer-events: none;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#instructional
{
margin: 25% auto auto;
color: #FFF;
text-align: center;
font-size: 32px;
}
#tourMapContainer{
position:absolute;
top: 0px;
left: 0px;
width:100%;
}
#lawMapContainer{
float:left;
}
#lawMap
{
position:relative;
background-image:url(/content/dam/bc1/special-projects/panos/woods/1200-woods.jpg);
width:1200px;
height:674px;
float:right;
}
.mapDot
{
position:absolute;
display:block;
}
.mapDotThumb{
width:50px;
height:50px;
background-color:#A0B0CF;
display:none;
}
#dot_1{
top:317px;
left:981px;
}
#dot_2{
top:310px;
left:1021px;
}
#dot_3{
top:49px;
left:980px;
}
#dot_4{
top:190px;
left:626px;
}
#dot_5{
top:132px;
left:573px;
}#dot_6{
top:337px;
left:733px;
}
#dot_7{
top:215px;
left:390px;
}
#dot_8{
top:99px;
left:293px;
}
#dot_9{
top:45px;
left:105px;
}
#dot_10{
top:174px;
left:77px;
}
#dot_11{
top:545px;
left:420px;
}
#dot_12{
top:515px;
left:175px;
}
.circle
{
float:left;
width:24px;
height:24px;
border-radius:50%;
font-size:18px;
font-family:utopia-std-display,serif;
color:#fff;
line-height:25px;
text-align:center;
background:#e74c3c;
margin-top: 2px;
cursor:pointer;
}
.map-circle
{
margin-top:0;
position:absolute;
-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
}
#mapMenu
{
width:1200px;
margin:auto;
padding-left:10px;
padding-right:10px;
}
#legendTitle
{
margin:auto;
text-align:center;
font-family:utopia-std-display,serif;
font-size:32px;
padding-top:25px;
padding-bottom:30px;
}
.legend-mobile-block
{
float:none;
width:100%;
}
.legend-block
{
float:left;
width:24%;
}
.legend-item
{
line-height:30px;
font-family:utopia-std-display,serif;
width:100%;
margin-bottom:10px;
cursor:pointer;
}
.legend-name
{
font-family:utopia-std-display,serif;
font-size:25px;
line-height:30px;
padding-left:35px;
}
#panoMenu
{
clear:both;
width:1200px;
height:50px;
margin:auto;
background-color: #999;
position:absolute;
left:-10000px;
}
#panoMenu div
{
font-family:utopia-std-display,serif;
font-size:24px;
line-height:50px;
color:#FFF;
}
#panoPreviousButton{
cursor:pointer;
float:left;
padding-left:20px;
padding-right:20px;
}
#panoPreviousButton:hover{
background-color:#CCC
}
#panoNextButton{
cursor:pointer;
float:left;
padding-left:20px;
padding-right:20px;
margin-right:254px;
}
#panoNextButton:hover{
background-color:#CCC
}
#panoSelect
{
display:block;
height: 50px;
overflow: hidden;
background: url(/content/dam/bc1/special-projects/panos/woods/new_arrow.png) no-repeat right #999;
border:none;
font-family:utopia-std-display,serif;
font-size:24px;
line-height:50px;
color:#FFF;
cursor:pointer;
float:left;
padding-left:10px;
border-radius: 0 !important;
}
#panoSelect:hover
{
background: url(/content/dam/bc1/special-projects/panos/woods/new_arrow.png) no-repeat right #CCC;
}
#panoShowMap
{
cursor:pointer;
float:right;
padding-right:30px;
padding-left:30px;
}
#panoShowMap:hover{
background-color:#CCC
}
#lawPanoDetails
{
width:1200px;
margin:auto;
height:auto;
position:relative;
padding-left:25px;
padding-right:25px;
margin-top:15px;
}
#lawPanoDetails ul
{
display:block;
list-style: outside none none;
margin:0;
padding:0;
margin-bottom:20px;
}
#lawPanoDetails li
{
list-style: outside none none;
margin:0;
padding:0;
display:block;
position:absolute;
left: -10000px;
}
#lawPanoDetails h3
{
text-align:center;
width:inherit;
padding-top:10px;
padding-bottom:10px;
font-family:"Open Sans",Helvetica,Arial,sans-serif;
}
#lawPanoDetails p
{
font-family:"Open Sans",Helvetica,Arial,sans-serif;
}
@media only screen and (min-width : 320px) and (max-width : 480px){
/*body{
background-color:#4E5D4D
}*/
#tourTitle {
font-size: 20px;
padding-bottom: 10px;
padding-top: 10px;
}
#panoContainer
{
width:320px;
height:200px;
}
#lawMap
{
background-image:url(/content/dam/bc1/special-projects/panos/woods/320-woods.jpg);
height: 200px;
width: 320px;
background-color: #eee;
background-repeat: no-repeat;
background-position: 0 10px;
}
.map-circle {
font-size: 10px;
height: 14px;
line-height: 16px;
margin-top: -1px;
width: 14px;
}
.circle
{
margin-top:-1px;
}
#instructional
{
margin: 17% auto auto;
font-size: 28px;
}
#mapMenu
{
width:320px;
}
#panoMenu
{
width:320px;
height:30px;
}
#lawPanoDetails
{
padding-left:10px;
padding-right:10px;
width:320px;
}
#legendTitle
{
font-size:20px;
font-weight: bold;
}
.legend-mobile-block
{
float:left;
width:100%
}
.legend-block{
float:none;
width:100%
}
#panoMenu div
{
height:30px;
font-size: 18px;
line-height:30px;
}
#panoPreviousButton{
display:none;
}
#panoNextButton{
display:none;
}
#panoSelectDiv{
width:60%;
float:left;
}
#panoSelect
{
padding-left:10px;
width:100%;
font-size: 18px;
line-height:30px;
height:30px;
}
#panoShowMap
{
width:39%;
float:right;
padding-right:0px;
text-align:center;
font-size: 18px;
line-height:30px;
}
.legend-name{
font-size:17px;
line-height:23px;
}
#dot_1{
top:85px;
left:255px;
}
#dot_2{
top:84px;
left:285px;
}
#dot_3{
top:20px;
left:265px;
}
#dot_4{
top:51px;
left:169px;
}
#dot_5{
top:36px;
left:155px;
}#dot_6{
top:90px;
left:198px;
}
#dot_7{
top:58px;
left:108px;
}
#dot_8{
top:27px;
left:79px;
}
#dot_9{
top:20px;
left:28px;
}
#dot_10{
top:47px;
left:21px;
}
#dot_11{
top:147px;
left:110px;
}
#dot_12{
top:142px;
left:48px;
}
}
@media only screen and (min-width : 481px) and (max-width : 990px){
/*body{
background-color:#696262;
}*/
#panoContainer
{
width:480px;
height:240px;
}
#lawMap
{
width:480px;
height:240px;
background-image:url(/content/dam/bc1/special-projects/panos/woods/480-woods.jpg);
}
#instructional
{
font-size: 24px;
}
#mapMenu
{
width:480px;
}
#panoMenuContainers
{
position:relative;
}
#panoMenu
{
width:480px;
}
#lawPanoDetails
{
width:480px;
padding-left:10px;
padding-right:10px;
}
.legend-mobile-block
{
float:left;
width:50%;
}
.legend-block{
float:none;
width:100%;
}
.legend-name{
font-size:20px;
line-height:23px;
}
.circle{
margin-top:-1px;
}
#panoPreviousButton{
display:none;
}
#panoNextButton{
display:none;
}
#panoSelect
{
padding-left:20px;
width:50%
}
#panoShowMap
{
width:50%;
float:right;
padding-right:0px;
text-align:center
}
#dot_1{
top:127px;
left:380px;
}
#dot_2{
top:124px;
left:420px;
}
#dot_3{
top:20px;
left:392px;
}
#dot_4{
top:76px;
left:250px;
}
#dot_5{
top:53px;
left:229px;
}#dot_6{
top:135px;
left:293px;
}
#dot_7{
top:86px;
left:156px;
}
#dot_8{
top:40px;
left:117px;
}
#dot_9{
top:18px;
left:42px;
}
#dot_10{
top:70px;
left:31px;
}
#dot_11{
top:210px;
left:164px;
}
#dot_12{
top:192px;
left:60px;
}
}
@media only screen and (min-width : 991px) and (max-width : 1200px){
/*body{
background-color:#43586E !important;
}*/
#panoContainer
{
width:992px;
height:496px;
}
#lawMap
{
width:992px;
height:496px;
background-image:url(/content/dam/bc1/special-projects/panos/woods/990-woods.jpg);
}
#mapMenu
{
width:992px;
}#panoMenu
{
width:992px;
}
#lawPanoDetails
{
width:992px;
}
#panoNextButton{
padding-right:20px;
margin-right:164px;
}
.legend-name{
font-size:20px;
line-height:27px;
}
#dot_1{
top:260px;
left:804px;
}
#dot_2{
top:254px;
left:837px;
}
#dot_3{
top:41px;
left:804px;
}
#dot_4{
top:156px;
left:513px;
}
#dot_5{
top:108px;
left:470px;
}
#dot_6{
top:276px;
left:601px;
}
#dot_7{
top:178px;
left:320px;
}
#dot_8{
top:81px;
left:240px;
}
#dot_9{
top:37px;
left:86px;
}
#dot_10{
top:143px;
left:63px;
}
#dot_11{
top:447px;
left:344px;
}
#dot_12{
top:421px;
left:141px;
}
}