/* CSS level 3 liquid style for Panoramas using XML menu */
/* created by: Hans Loepfe (www.HALO-Photographs.com) */
/* last update: 2011/09/05 */

/* minimal CSS reset */
* {
margin : 0;
padding : 0;
border: 0;
}

html, body {
height : 100%;
}

body {
background-color : #bbbbbb;
font-family : Verdana, Arial, Sans-Serif;
font-size : 100%;
width: 100%;
}

noscript {
font-size:1.3em;
color:#ff9900; 
background:#646464;
}

#wrapper {
height:100%;
margin: 0 1.2em 0 1em;
min-width:45%;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

a:link, a:visited, a:active {
color : #000;
text-decoration : none;
}

a:hover, #license span:hover {
color : #000;
text-decoration : underline;
}

#license span {
/*cursor:pointer;*/
}

/*#top {
height:3%;}
*/

#wrap2{
height: 92%;
}

div#middle {
height: 85%;
}

div#middle>div#panoviewer {
height: 99%;
-webkit-box-shadow: 5px 5px 14px #000;
-moz-box-shadow:5px 5px 14px #000;
box-shadow : 5px 5px 14px #000;
}

/*
div#bottom {
height:10%;}
*/

#top {
width : 100%;
padding:0.6em 0 0.6em 0;
}


#top > ul > li > a, #top h1, #centerButton, #rightButton {
white-space: nowrap;
}

/*#top ul {
list-style : none;
}*/

#top>ul>li {
display:inline;}

.left {
float:left;
text-align : left;
margin-right:1em;
}

.centerL {
width:39%;
text-align: right;
float:left;
}

.centerR {
width:10%;
text-align: left;
float:left;
}

.right {
width: 28%;
float:right;
text-align: right;
}

#top > ul > li > h1 {
font-size:1.3em;
color:#333;
text-shadow: 2px 2px 4px #777;
margin-right:1em;
}

#top > ul > li > a, #centerButton, #rightButton {
font-size:1em;
border : 1px solid #555;
padding : 0 0.4em 0px 0.4em;
background-color : #aaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 7px #000;
-moz-box-shadow: 3px 3px 7px #000;
box-shadow : 3px 3px 7px #000;
}

/* the new setting*/
#panodetails {
display:none;}

/* the new setting*/
#panodetails {
float:right;
width:24%;
font-size:0.8em;
background : #ccc;
border : 1px solid #777;
padding : 0.5em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 9px 9px 14px #222;
-moz-box-shadow: 9px 9px 14px #222;
box-shadow : 9px 9px 14px #222;
}

#panodetails ul {
list-style : none;
}

#panodetails > ul > li > h2 {
font-size:1.1em;
}

#panodetails img {
border:none;
}

.icons {
float:left;
margin-top:0.10em;
padding-right:0.5em;
}

.list .icons {
float:right;
}

.menuButton {
border : 1px solid #555;
padding : 2px 4px 2px 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background:#bbb;
float:right;
}

#centerButton, #rightButton {
font-size:1.1em;
}

#bottom {
margin: 0px;
padding: 0px;
}

.caption {
font-size:1em;}

#license {
border-top : 1px dotted #000;
}

p.licenseLeft {
width:47%;
float: left;
font-size : 0.7em;
padding-top:0.4em;
}

#license p img {
float: left; 
margin-right:0.8em;
}

.licenseRight {
width:47%;
float:right;
font-size : 0.7em;
text-align: left;
padding-top:0.3em;
}


#top .left a:hover, #centerButton:hover, #rightButton:hover, .menuButton:hover {
background : #999;
}

#panoMenu {
display:none;}

#panoMenu {
margin-top:0.65em;
right:1.2em;
float:right;
width:24%;
background : #ccc;
border : 1px solid #777;
padding : 0.5em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 7px 7px 9px #222;
-moz-box-shadow: 7px 7px 9px #222;
box-shadow : 7px 7px 9px #222;
overflow:hidden;
}

#panoMenu>ul>li.title, #panoMenu>ul>li.listbutton {
list-style-type:none;
}

#navigation2>li.menu2 {
list-style : disc;
/*list-style-position:inside;*/
}

.li_stripe {background-color:#bbb;}	/*xml-panolist only*/

li.title {
background : #999;
border : 1px solid #444;
}

#navigation2 h1{
font-size:0.8em;
font-weight : 700;
}


#navigation2 li.menu2 {
font-size : 0.8em;
list-style-type:none;
}

#navigation2 li.menu2:nth-child(2n) {
background-color:#bbb;
}

#navigation2 .menu2 a {
border : none;
}

#navigation2 .menu2:hover, #navigation2 .menu2 a:hover, .list a:hover, a.list:hover, #license a:hover {
background : #999;
}