Team:Aachen/Template:Team:Aachen/CSS/InteractiveTour

/* TOUR MENU */

.tourBoundingBox {

text-align:center; width: 100vw; height: 73px; z-index: 9999; margin-left:-15px;

}

/*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(http://igem.rwth-aachen.de/2015/images/2/26/Background.png); }

.tourBorderLeft.itemselected1 { background-image: url(http://igem.rwth-aachen.de/2015/images/c/cd/Background_selected_blue_v3.png); } .tourBorderLeft.itemselected2 { background-image: url(http://igem.rwth-aachen.de/2015/images/9/94/Background_selected_green_v3.png); } .tourBorderLeft.itemselected3 { background-image: url(http://igem.rwth-aachen.de/2015/images/7/71/Background_selected_red_v3.png); } .tourBorderLeft.itemselected4 { background-image: url(http://igem.rwth-aachen.de/2015/images/9/9a/Background_selected_purple_v3.png); } .tourBorderLeft.itemselected5 { background-image: url(http://igem.rwth-aachen.de/2015/images/5/58/Background_selected_orange_v3.png); } .tourBorderLeft.itemselected6, .tourBorderRight.itemselected6 { background-image: url(http://igem.rwth-aachen.de/2015/images/e/ef/Background_selected_yellow_v3.png); }

/*control of expanded submenus*/

.tourItemLabel.tourItemLabelExpanded1{ background-color: #7595df; } .childTourItem.expanded1:first-child{ background-image: url(http://igem.rwth-aachen.de/2015/images/4/41/Branch_extended_blue_v3.png); } .childTourItem.expanded1:nth-last-child(2){ background-image: url(http://igem.rwth-aachen.de/2015/images/9/9e/End_extended_blue_v3.png); }

.tourItemLabel.tourItemLabelExpanded2{ background-color: #05ff69; } .childTourItem.expanded2{ background-image: url(http://igem.rwth-aachen.de/2015/images/a/a8/Default_c_expanded_green_v3.png); } .childTourItem.expanded2:first-child{ background-image: url(http://igem.rwth-aachen.de/2015/images/9/9e/Branch_extended_green_v3.png); } .childTourItem.expanded2:nth-last-child(2){ background-image: url(http://igem.rwth-aachen.de/2015/images/0/03/End_expanded_green_v3.png); }

.tourItemLabel.tourItemLabelExpanded3{ background-color: #EC545F; } .childTourItem.expanded3{ background-image: url(http://igem.rwth-aachen.de/2015/images/e/ef/Default_c_expanded_red_v3.png); } .childTourItem.expanded3:first-child{ background-image: url(http://igem.rwth-aachen.de/2015/images/b/b8/Branch_extended_red_v3.png); } .childTourItem.expanded3:nth-last-child(2){ background-image: url(http://igem.rwth-aachen.de/2015/images/9/9e/End_expanded_red_v3.png); }

.tourItemLabel.tourItemLabelExpanded4{ background-color: #DA7AD2; } .childTourItem.expanded4{ background-image: url(http://igem.rwth-aachen.de/2015/images/1/1b/Default_c_expanded_purple_v3.png); } .childTourItem.expanded4:first-child{ background-image: url(http://igem.rwth-aachen.de/2015/images/4/4e/Branch_extended_purple_v3.png); } .childTourItem.expanded4:nth-last-child(2){ background-image: url(http://igem.rwth-aachen.de/2015/images/8/82/End_expanded_purple_v3.png); }

.tourItemLabel.tourItemLabelExpanded5{ background-color: #FFA97D; } .childTourItem.expanded5{ background-image: url(http://igem.rwth-aachen.de/2015/images/2/2d/Default_c_expanded_orange_v3.png); } .childTourItem.expanded5:first-child{ background-image: url(http://igem.rwth-aachen.de/2015/images/7/7f/Branch_extended_orange_v3.png); } .childTourItem.expanded5:nth-last-child(2){ background-image: url(http://igem.rwth-aachen.de/2015/images/0/07/End_expanded_orange_v3.png); }

.tourBoundingBoxInner {

height:66px; width:960px; float:left; padding-top: 7px; }

.parentTourItem {
position: relative;
float:left;
width:160px;
height:100%;
background-image:url(http://igem.rwth-aachen.de/2015/images/d/d4/Default_nonselected.png);   /*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(http://igem.rwth-aachen.de/2015/images/8/80/Default_p_lastselected_blue_v3.png);

 }
 .parentTourItem.itemLastSelected2{

background-image: url(http://igem.rwth-aachen.de/2015/images/9/9a/Default_p_lastselected_green_v3.png);

 }
 .parentTourItem.itemLastSelected3{

background-image: url(http://igem.rwth-aachen.de/2015/images/8/84/Default_p_lastselected_red_v3.png);

 }
 .parentTourItem.itemLastSelected4{

background-image: url(http://igem.rwth-aachen.de/2015/images/b/b8/Default_p_lastselected_purple_v3.png);

 }
 .parentTourItem.itemLastSelected5{

background-image: url(http://igem.rwth-aachen.de/2015/images/1/15/Default_p_lastselected_orange_v3.png);

 }
  .parentTourItem.itemLastSelected6{

background-image: url(http://igem.rwth-aachen.de/2015/images/4/42/Default_p_lastselected_yellow_v3.png);

 }
 
 
 .parentTourItem.itemSelected2{

background-image: url(http://igem.rwth-aachen.de/2015/images/7/74/Default_p_selected_green_v3.png);

 }
 .parentTourItem.itemSelected3{

background-image: url(http://igem.rwth-aachen.de/2015/images/9/94/Default_p_selected_red_v3.png);

 }
  .parentTourItem.itemSelected4{

background-image: url(http://igem.rwth-aachen.de/2015/images/7/77/Default_p_selected_purple_v3.png);

 }
  .parentTourItem.itemSelected5{

background-image: url(http://igem.rwth-aachen.de/2015/images/3/3f/Default_p_selected_orange_v3.png);

 }
  .parentTourItem.itemSelected6{

background-image: url(http://igem.rwth-aachen.de/2015/images/e/e0/Default_p_selected_yellow_v3.png);

 }
 

.parentTourItem.itemParentSelected3{

         background-image: url(http://igem.rwth-aachen.de/2015/images/f/fd/Aachen_parent_parentselected_red.png);

} .parentTourItem.itemParentSelected4{

} .parentTourItem.itemParentSelected5{

}

.childTourItem.itemLastSelected3:first-child{

         background-image: url(http://igem.rwth-aachen.de/2015/images/b/b2/Aachen_branch_lastselected_red.png);

} .childTourItem.itemLastSelected4:first-child{

} .childTourItem.itemLastSelected5:first-child{

}

.childTourItem.itemLastSelected3:nth-last-child(2){

} .childTourItem.itemLastSelected4:nth-last-child(2){

} .childTourItem.itemLastSelected5:nth-last-child(2){

}

 .parentTourItemHidden {

display: none;

}

.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-image:url(http://igem.rwth-aachen.de/2015/images/d/d4/Default_nonselected.png); 
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){

background-image: url(http://igem.rwth-aachen.de/2015/images/9/97/End_nonselected.png);

   padding-left: 69px;

margin-left:-80px;

}

 .childTourItem:first-child{

background-image: url(http://igem.rwth-aachen.de/2015/images/8/83/Branch_nonselected.png);

    margin-left: -101px;

padding-top: 61px;

    padding-left: 0px;
}

.tourItemLabel {
position:relative;
top: 26px;
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;
}

.tourItemLabel.tourItemLabelLastSelected1 { color: white; background-color: #2850ad; } .tourItemLabel.tourItemLabelLastSelected2 { color: white; background-color: #00993d; } .tourItemLabel.tourItemLabelLastSelected3 { color: white; background-color: #bf1521; } .tourItemLabel.tourItemLabelLastSelected4 { color: white; background-color: #b933ad; } .tourItemLabel.tourItemLabelLastSelected5 { color: white; background-color: #FF6313; } .tourItemLabel.tourItemLabelLastSelected6 { color: #333333; background-color: #FCCC0A; } .tourItemLabel.tourItemLabelLastSelected6:hover { color: #333333; }

.tourItemLabelIndicator {

background-color:#fb9d23;

color:white !important;

}