/* ######################
    Zoom target boxes
    (320 to 360px)
###################### */

.zoomTarget.title {
    top: 0;
    width: 98%;
    height: 4.5%;
    left: 1%;
}

.zoomTarget.level1 {
    top: 9.5%;
    width: 27%;
    height: 8.7%;
}

.zoomTarget.section1 {
    top: 22%;
    width: 93%;
    height: 3.8%;
    left: 3.5%;
}

.zoomTarget.level2 {
    top: 32%;
    height: 6.9%; 
}

.zoomTarget.section2 {
    top: 43.5%;
    width: 93%;
    height: 3.8%;
    left: 3.5%;
}

.zoomTarget.level3 {
    top: 53.7%;
    height: 6%; 
    width: 23.7%;
}

.zoomTarget.level4 {
    top: 66%;
    height: 7%; 
}

.zoomTarget.section3 {
    top: 80%;
    width: 93%;
    height: 3.8%;
    left: 3.8%;
}

.zoomTarget.level5 {
    top: 90%;
    height: 7.2%; 
}

/* Here we define parameters that apply to
    specific boxes, identified numerically
    in order from left to right (within each level)
*/

#zl1-box1 {
    left: 13%;
}

#zl1-box2 {
    left: 62.7%;
}

#zl2-box1 {
    left: 3%;
    width: 11.1%;
}

#zl2-box2 {
    left: 15%;
    width: 11.1%;
}

#zl2-box3 {
    left: 27.1%;
    width: 11.1%;
}

#zl2-box4 {
    left: 39.4%;
    width: 11.2%;
}

#zl2-box5 {
    left: 54.9%;
    width: 14.2%;
}

#zl2-box6 {
    left: 70.5%;
    width: 12.7%;
}

#zl2-box7 {
    left: 84.4%;
    width: 12.7%;
}

#zl3-box1 {
    left: 19%;
}

#zl3-box2 {
    left: 57.3%;
}

#zl4-box1 {
    left: 3%;
    width: 11.1%;
}

#zl4-box2 {
    left: 16.1%;
    width: 10.9%;
}

#zl4-box3 {
    left: 29.2%;
    width: 11.1%;
}

#zl4-box4 {
    left: 42.3%;
    width: 11.2%;
}

#zl4-box5 {
    left: 55.2%;
    width: 11.1%;
}

#zl4-box6 {
    left: 68.6%;
    width: 15.5%;
}

#zl4-box7 {
    left: 86%;
    width: 11.1%;
}

#zl5-box1 {
    left: 12.6%;
    width: 12.7%;
}

#zl5-box2 {
    left: 27.1%;
    width: 14.4%;
}

#zl5-box3 {
    left: 43.9%;
    width: 12.5%;
}

#zl5-box4 {
    left: 58.7%;
    width: 12.5%;
}

#zl5-box5 {
    left: 73.7%;
    width: 12.5%;
}