Team:Aachen/Template:Team:Aachen/CSS/InteractiveTour
/* TOUR MENU */
.tourBoundingBox { text-align:center; width: 100vw; height: 73px; z-index: 9999; margin-left:-15px; }
@media only screen and (max-width: 980px){
.tourBoundingBox{
display:none;
}
}
/*Left and right end of the tour + color control*/
.tourBorderLeft, .tourBorderRight {
float:left; width: calc((100vw - 960px)/2); height: 100%;
background-repeat: repeat-x;
background-position: center -14px;
background-size: auto 80px;
background-image: url(
);
}
.tourBorderLeft.itemselected1 {
background-image: url(
);
}
.tourBorderLeft.itemselected2 {
background-image: url(
);
}
.tourBorderLeft.itemselected3 {
background-image: url(
);
}
.tourBorderLeft.itemselected4 {
background-image: url(
);
}
.tourBorderLeft.itemselected5 {
background-image: url(
);
}
.tourBorderLeft.itemselected6, .tourBorderRight.itemselected6 {
background-image: url(
);
}
/*control of expanded submenus*/
.tourItemLabel.tourItemLabelExpanded3{
background-color: #05FF69;
}
.childTourItem.expanded3{
background-image: url(
);
}
.childTourItem.expanded3:first-child{
background-image: url(
);
}
.childTourItem.expanded3:nth-last-child(2){
background-image: url(
);
}
.tourItemLabel.tourItemLabelExpanded4{
background-color: #7595df;
}
.childTourItem.expanded4{
background-image: url(
);
}
.childTourItem.expanded4:first-child{
background-image: url(
);
}
.childTourItem.expanded4:nth-last-child(2){
background-image: url(
);
margin-left: -60px;
}
.tourItemLabel.tourItemLabelExpanded5{
background-color: #DA7AD2;
}
.childTourItem.expanded5{
background-image: url(
);
}
.childTourItem.expanded5:first-child{
background-image: url(
);
}
.childTourItem.expanded5:nth-last-child(2){
background-image: url(
);
}
.tourBoundingBoxInner {
height:66px; width:960px; float:left; padding-top: 7px; }
.parentTourItem {
position: relative;
float:left;
width:160px;
height:100%;
background-image:url(
); /*default nonselected = line with hexagon, all grey*/
background-repeat:no-repeat;
background-position:center bottom;
background-size: auto 80px;
text-align:center;
padding-top:22px;
padding-left:2px;
padding-right:2px;
z-index: 10;
}
.parentTourItem.itemLastSelected1{
background-image: url(
);
}
.parentTourItem.itemLastSelected2{
background-image: url(
);
}
.parentTourItem.itemLastSelected3{
background-image: url(
);
}
.parentTourItem.itemLastSelected4{
background-image: url(
);
}
.parentTourItem.itemLastSelected5{
background-image: url(
);
}
.parentTourItem.itemLastSelected6{
background-image: url(
);
}
.parentTourItem.itemSelected2{
background-image: url(
);
}
.parentTourItem.itemSelected3{
background-image: url(
);
}
.parentTourItem.itemSelected4{
background-image: url(
);
}
.parentTourItem.itemSelected5{
background-image: url(
);
}
.parentTourItem.itemSelected6{
background-image: url(
);
}
.parentTourItem.itemParentSelected3{
background-image: url();
} .parentTourItem.itemParentSelected4{
background-image: url();
} .parentTourItem.itemParentSelected5{
background-image: url();
}
.childTourItem.itemLastSelected3:first-child{
background-image: url();
} .childTourItem.itemLastSelected4:first-child{
background-image: url();
} .childTourItem.itemLastSelected5:first-child{
background-image: url();
}
.childTourItem.itemLastSelected3:nth-last-child(2){
background-image: url();
} .childTourItem.itemLastSelected4:nth-last-child(2){
background-image: url(); margin-left: -60px;
} .childTourItem.itemLastSelected5:nth-last-child(2){
background-image: url();
}
.childTourItem.itemLastSelected4 {
background-image: url(); z-index: 10;
}
.childTourItem.itemSelected3:first-child {
background-image: url();
} .childTourItem.itemSelected4:first-child {
background-image: url();
} .childTourItem.itemSelected5:first-child {
background-image: url();
}
.childTourItem.itemSelected4 {
background-image: url();
}
.expandedTour {
height:100%;
float:left;
}
.expandedTourInner {
position: absolute;
padding-top:70px;
float:left;
width:auto;
background-repeat:repeat-x;
background-image:url();
}
.childTourItem {
position: relative;
float:left;
width:160px;
height:100px;
background-repeat:no-repeat;
background-position:center bottom;
background-size: auto 80px;
text-align:center;
padding-top:61px;
padding-left:2px;
padding-right:2px;
margin-top: -46px !important;
margin-left:-35px;
z-index: 5;
}
.childTourItem:nth-last-child(2){
padding-left: 69px;
margin-left:-80px;
}
.childTourItem:first-child{
margin-left: -101px;
padding-top: 61px;
padding-left: 0px; }
.tourItemLabel {
position:relative;
top: 24px;
left: -64px;
width: 110px;
margin-left:auto;
margin-right:auto;
background-color:#AAAAAA;
text-align:center;
font-size:10px;
line-height: 1.5em;
padding: 0px 4px;
display:inline-block;
color:black;
}
.tourItemLabel:visited {
color: black;
}
.tourItemLabel:hover {
color:white;
text-decoration:none;
}
.childTourItem:first-child > .tourItemLabel{ left: -86px;
}
.tourItemLabelSelected1 {
background-color:#2850ad;
color: black;
}
.tourItemLabelSelected2 {
background-color:#aaaaaa; color: black; }
.tourItemLabelSelected3 {
background-color:#aaaaaa; color: black; }
.tourItemLabelSelected4 {
background-color:#aaaaaa; color: black; }
.tourItemLabelSelected5 {
background-color:#aaaaaa; color: black; }
.tourItemLabel.tourItemLabelParentSelected1 {
color: white;
background-color: #bf1521;
}
.tourItemLabel.tourItemLabelParentSelected2 {
color: white;
background-color: #FF6313;
}
.tourItemLabel.tourItemLabelParentSelected3 {
color: white;
background-color: #00993d;
}
.tourItemLabel.tourItemLabelParentSelected4 {
color: white;
background-color: #2850ad;
}
.tourItemLabel.tourItemLabelParentSelected5 {
color: white;
background-color: #b933ad;
}
.tourItemLabel.tourItemLabelParentSelected6 {
color: #333333;
background-color: #FCCC0A;
}
.tourItemLabel.tourItemLabelLastSelected1 { color: white; background-color: #bf1521;
top: 26px;
} .tourItemLabel.tourItemLabelLastSelected2 { color: white; background-color: #FF6313;
top: 26px;
} .tourItemLabel.tourItemLabelLastSelected3 { color: white; background-color: #00993d;
top: 29px;
} .tourItemLabel.tourItemLabelLastSelected4 { color: white; background-color: #2850ad;
top: 28px;
} .tourItemLabel.tourItemLabelLastSelected5 { color: white; background-color: #b933ad;
top: 28px;
} .tourItemLabel.tourItemLabelLastSelected6 { color: #333333; background-color: #FCCC0A;
top: 26px;
} .tourItemLabel.tourItemLabelLastSelected6:hover { color: #333333; }
.tourItemLabelIndicator {
background-color:#fb9d23;
color:white !important;
}