/* app css stylesheet */

html, body, .main {
    color: #754D25; /* General text color which is a brownish color. */
    font: "PT Sans";

    width: 100%;
    height: 100%;
    background-color: #EAE5C5;
    
    overflow: hidden;
}

:focus {
    outline: 0;
}

.img { width: 100%; height: 100%; }

.reportText {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
}

.awsLogo           { position: absolute; bottom: 8.4%;   left:  0.5%;  z-index: 10; width: 0%;      height:  5%;       opacity: 0;
                     background-image: url(../img/aws_logo.png);
                     background-size: contain;
                     background-repeat: no-repeat;
                     background-position: center;
					 cursor: pointer; 
                   }
.gcuLogo           { position: absolute; bottom: 8.4%;   right: 2.5%;  z-index: 10; width: 0%;      height:  14%;      opacity: 0;
                     background-image: url(../img/gcu_logo.png);
                     background-size: contain;
                     background-repeat: no-repeat;
                     background-position: center;
					 cursor: pointer; 
                   }

/*********************/
/* Animated bird CSS */
/*********************/
.bird              { position: absolute; top: 20%;       left:  0%;    z-index: 10; width: 4%;      height: 8%;        opacity: 0;
                     background-image: url(../img/flight-sheet.png);
                     background-size: 100% 500%;
                     background-position: 0% 0%;
                   }

/*********************************************/
/* Main tree and leaf placement and grouping */
/*********************************************/
.treeDisplay       { position: absolute; top: 0%;        left:  50%;   z-index: 4;  width: 0%;      height: 100%;      opacity: 0; }

.treeRoot          { position: absolute; top: 74.2%;     left:  25%;   z-index: 3;  width: 100%;    height: 20%;       opacity: 1;
                     background-image: url(../img/root-sheet.png);
                     background-size: 100% 3000%;
                     background-position: 0% -2900%;
                   }
.treeBranch        { position: absolute; top: 35%;       left:  15%;   z-index: 2;  width: 27%;     height: 20%;       opacity: 1;
                     background-image: url(../img/branch-sheet.png);
                     background-size: 100% 3000%;
                     background-position: 0% -2900%;
                   }

.tree              { position: absolute; top: 19%;       left:  2%;    z-index: 3;  width: 26.411%; height: 59.375%;   }
.bloomTax          { position: absolute; top: 76.3%;     left:  6%;    z-index: 2;  width: 22%;     height: 15%;       }

.evaluatingLeaf    { position: absolute; top: 18%;       left:  1.4%;  z-index: 4;  width: 14.858%; height: 11.968%;   opacity: 0.5; cursor: pointer; }
.applyingLeaf      { position: absolute; top: 33%;       left:  1.5%;  z-index: 4;  width: 14.881%; height: 13.406%;   opacity: 0.5; cursor: pointer; }
.rememberingLeaf   { position: absolute; top: 49%;       left:  0%;    z-index: 4;  width: 15.748%; height: 10.812%;   opacity: 0.5; cursor: pointer; }

.creatingLeaf      { position: absolute; top: 6%;        left:  18%;   z-index: 4;  width: 11.999%; height: 15.812%;   opacity: 0.5; cursor: pointer; }
.analyzingLeaf     { position: absolute; top: 24.5%;     left:  18%;   z-index: 4;  width: 15.561%; height: 12%;       opacity: 0.5; cursor: pointer; }
.understandingLeaf { position: absolute; top: 39.8%;     left:  20.5%; z-index: 4;  width: 17.811%; height: 12.968%;   opacity: 0.5; cursor: pointer; }

/************************************/
/* Info Text area for selected leaf */
/************************************/
.bigInfo           { position: absolute; top: 0%;        left:  100%;  z-index: 3;  width: 0%;      height: 72%;       opacity: 0; }

.bigInfoText       { position: absolute; top: 0%;        left:  12%;   z-index: 3;  width: 77%;     height: 100%;      opacity: 1;   font-size: 1.1rem; }
.bigInfoFore       { position: absolute; top: 0%;        left:  0%;    z-index: 2;  width: 100%;    height: 100%;      }
.bigInfoBack       { position: absolute; top: 0%;        left:  0%;    z-index: 2;  width: 100%;    height: 100%;      }
.bckgrndBigLeaf    { position: absolute; top: 0%;        left:  2%;    z-index: 1;  width: 96.1%;   height: 100%;      }

/**********************/
/* Topic bar in roots */
/**********************/
.topicBar          { position: absolute; top: 87%;       left:  48.4%; z-index: 4;  width: 42%;     height: 3%;        opacity: 1;
                     font-size: 1.1rem; font-weight: bold;
                   }

.topicVerbs        { position: absolute; top: 0%;        left:  0%;    z-index: 4;  width: 20%;     height: 100%;      opacity: 1; color: rgb(122,156,73); cursor: pointer; }
.topicObjectives   { position: absolute; top: 0%;        left:  32.5%; z-index: 4;  width: 20%;     height: 100%;      opacity: 1; color: rgb(122,156,73); cursor: pointer; }
.topicSamples      { position: absolute; top: 0%;        right: 0%;    z-index: 4;  width: 20%;     height: 100%;      opacity: 1; color: rgb(122,156,73); cursor: pointer; }

/*********************/
/* Navigation arrows */
/*********************/
.navArrows         { position: absolute; top: 38%;       left:  34.5%; z-index: 4;  width: 60%;     height: 4%;        opacity: 0; }
.naviArrowLeft     { position: absolute; top: 0%;        left:  0%;    z-index: 3;  width: 4%;      height: 100%;      cursor: pointer; }
.naviArrowRight    { position: absolute; top: 0%;        right: 0%;    z-index: 3;  width: 4%;      height: 100%;      cursor: pointer; }

/**************/
/* Menu icons */
/**************/
.menuIcons         { position: absolute; top: 3%;        right: 2%;    z-index: 9;  width: 0px;     height: 45px;      opacity: 0;      }
.iconHome          { position: absolute; top: 0%;        right: 100%;               width: 33%;     height: 40px;      cursor: pointer; }
.iconHelp          { position: absolute; top: 0%;        right: 50%;                width: 33%;     height: 40px;      cursor: pointer; }
.iconPrint         { position: absolute; top: 0%;        right:  1%;                width: 33%;     height: 40px;      cursor: pointer; }

/***************/
/* Help screen */
/***************/
.helpScreen        { position: absolute; top: 0%;        left:  0%;    z-index: 11; width:  100%;   height: 100%;      color: white; }
.gray              { position: absolute; top: 0%;        left:  0%;    z-index: 12; width:  100%;   height: 100%;      opacity: 1;   }
.helpLeafText      { position: absolute; top: 28%;       left:  47%;   z-index: 13; width:  32%;    font-size: 1.3rem; }

.helpArrow01       { position: absolute; top: 10%;       left:  24%;   z-index: 13; width:  7%;     height: 7%         }
.helpArrow01Text   { position: absolute; top: 17%;       left:  26%;   z-index: 13; width:  19%;    font-size: 1.2rem; }

.helpArrow02       { position: absolute; top: 37.5%;     left:  37%;   z-index: 13; width:  10%;    height: 9%;        }
.helpArrow03       { position: absolute; top: 37.5%;     right: 8%;    z-index: 13; width:  10%;    height: 9%;        }
.helpArrow02Text   { position: absolute; top: 47%;       left:  38%;   z-index: 13; width:  52.5%;  font-size: 1.4rem; }

.helpArrow04       { position: absolute; top: 10%;       right: 3%;    z-index: 13; width:  4%;     height: 9%;        }
.helpArrow04Text   { position: absolute; top: 17%;       right: 5.5%;  z-index: 13; width:  36%;    font-size: 1.3rem; }

.helpArrow05       { position: absolute; top: 67%;       left:  39.5%; z-index: 13; width:  3%;     height: 20%;       }
.helpArrow06       { position: absolute; top: 67%;       left:  51.5%; z-index: 13; width:  3%;     height: 20%;       }
.helpArrow07       { position: absolute; top: 67%;       left:  65.5%; z-index: 13; width:  3%;     height: 20%;       }
.helpArrow05Text   { position: absolute; bottom: 33%;    left:  28.8%; z-index: 13; width:  50%;    font-size: 1.5rem; }