/* HTML5 & Javascript Game Programming. */
/* CSS for the web pages created for Assignment 1. */

html, body {

    margin: 0;
    padding: 0;
    text-indent: 0;
}

p {

    color: grey;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 14px;
    font-family: sans-serif;
}

h2 {

    color: lightgrey;
    text-align: center;
}

canvas {

    background-color: yellow;
    width: 800px;
    height: 600px;
    position: fixed;
    z-index: 0;
}

#textZone{

    position: fixed;
    width: 100px;
    height: 100px;
    margin-top: 300px;
    margin-left: 280px;
    z-index: -1;
}

#textBox {

    background-color: #444455;
    color: deepskyblue;
    font-size: 25px;
    border-radius: 8px;
    border: 0;
    width: 200px;
    height: 30px;
    outline: none;
    resize: none;
    z-index: -1;
}

#wrapper {

    background-color: #07070e;
    width: 100%;
    height: 100%;
    position: fixed;
}

#header {

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    background: url("Graphics/banner.png") no-repeat center;
    border-left: 5px #101010 solid;
    border-right: 5px #101010 solid;
    width: 864px;
    height: 64px;
}

#pageContainer {

    background-color: #0d0d1b;
    border-left: 5px #101010 solid;
    border-right: 5px #101010 solid;
    margin-left: auto;
    margin-right: auto;
    width: 864px;
    height: 600px;
}
#buttonContainer {

    float: left;
    margin-top: 0;
    background: url("Graphics/buttonContainerBG.png") no-repeat center;
    width: 64px;
    height: 600px;
}

#container {

    float: right;
    margin-top: 0;
    /*background: url("Graphics/contentBG.png") no-repeat;*/
    width: 800px;
    height: 600px;
    cursor: default;
}

#footer {

    margin-left: auto;
    margin-right: auto;
    background: url("Graphics/footer.png") no-repeat center;
    width: 864px;
    height: 64px;
    border-radius: 0 0 15px 15px;
    border-left: 5px #101010 solid;
    border-right: 5px #101010 solid;
    border-bottom: 5px #101010 solid;
}

.homeBTN {

    background: url("Graphics/homeBTN.png") no-repeat center;
    float: left;
    width: 64px;
    height: 75px;
}

.homeBTNHover {

    background: url("Graphics/homeBTNHover.png") no-repeat center;
    float: left;
    width: 64px;
    height: 75px;
}

.playBTN {

    background: url("Graphics/playBTN.png") no-repeat center;
    float: left;
    width: 64px;
    height: 75px;
}

.playBTNHover {

    background: url("Graphics/playBTNHover.png") no-repeat center;
    float: left;
    width: 64px;
    height: 75px;
}

.notesBTN {

    background: url("Graphics/notesBTN.png") no-repeat center;
    float: left;
    width: 64px;
    height: 75px;
}

.notesBTNHover {

    background: url("Graphics/notesBTNHover.png") no-repeat center;
    float: left;
    width: 64px;
    height: 75px;
}

.devBTN {

    background: url("Graphics/devBTN.png") no-repeat center;
    float: left;
    width: 64px;
    height: 75px;
}

.devBTNHover {

    background: url("Graphics/devBTNHover.png") no-repeat center;
    float: left;
    width: 64px;
    height: 75px;
}

#graphicsBox {

    background-image: url("Graphics/graphicsBox1.png");
     position: fixed;
     margin-top: 15px;
     margin-left: 15px;
     width: 200px;
     height: 200px;
     border-radius: 5px;

 }

#graphicsBox2 {

    background-image: url("Graphics/graphicsBox2.png");
    position: fixed;
    margin-top: 225px;
    margin-left: 530px;
    width: 200px;
    height: 200px;
    border-radius: 5px;

}

#graphicsBox3 {

    background-image: url("Graphics/graphicsBox3.png");
    position: fixed;
    margin-top: 355px;
    margin-left: 15px;
    width: 200px;
    height: 200px;
    border-radius: 5px;

}

#introBox {

     background-color: rgb(8, 8, 17);

     position: fixed;
     margin-top: 15px;
     margin-left: 225px;
     width: 550px;
     height: 125px;
     border-radius: 5px 5px 0 0;
 }

#introBox2 {

    background-color: rgb(8, 8, 17);
    position: fixed;
    margin-top: 225px;
    margin-left: 15px;
    width: 500px;
    height: 125px;
    border-radius: 5px 0 5px 5px;
}

#introBox3 {

    background-color: rgb(8, 8, 17);

    position: fixed;
    margin-top: 435px;
    margin-left: 225px;
    width: 550px;
    height: 125px;
    border-radius: 5px 5px 0 0;
}

#infoBox {

    background-color: darkslategrey;
    position: fixed;
    margin-top: 60px;
    margin-left: 15px;
    width: 385px;
    height: 175px;
    border-radius: 10px 10px 0 0;
}

#moreInfoBox {

    background-color: darkslategrey;
    position: fixed;
    margin-top: 235px;
    margin-left: 15px;
    width: 685px;
    height: 240px;
    border-radius: 0 0 10px 10px;
}

#notesBox {

    background-color: rgb(8, 8, 17);

    position: fixed;
    margin-top: 15px;
    margin-left: 15px;
    width: 770px;
    height: 125px;
    border-radius: 5px 5px 0 0;
}

#devBox {

    background-color: rgb(8, 8, 17);

    position: fixed;
    margin-top: 15px;
    margin-left: 15px;
    width: 770px;
    height: 175px;
    border-radius: 15px 5px 0 0;
}

#week1 {

    background-image: url("Graphics/week1IMG.png");
    position: fixed;
    margin-top: 150px;
    margin-left: 110px;
    width: 250px;
    height: 60px;
}

#week1Hover {

    background-image: url("Graphics/week1IMGHover.png");
    position: fixed;
    margin-top: 150px;
    margin-left: 110px;
    width: 250px;
    height: 60px;
}

#week2 {

     background-image: url("Graphics/week2IMG.png");
     position: fixed;
     margin-top: 215px;
     margin-left: 110px;
     width: 250px;
     height: 60px;
 }

#week2Hover {

    background-image: url("Graphics/week2IMGHover.png");
    position: fixed;
    margin-top: 215px;
    margin-left: 110px;
    width: 250px;
    height: 60px;
}

#week3 {

     background-image: url("Graphics/week3IMG.png");
     position: fixed;
     margin-top: 280px;
     margin-left: 110px;
     width: 250px;
     height: 60px;
 }


#week3Hover {

    background-image: url("Graphics/week3IMGHover.png");
    position: fixed;
    margin-top: 280px;
    margin-left: 110px;
    width: 250px;
    height: 60px;
}

#week4 {

    background-image: url("Graphics/week4IMG.png");
    position: fixed;
    margin-top: 345px;
    margin-left: 110px;
    width: 250px;
    height: 60px;
}

#week4Hover {

    background-image: url("Graphics/week4IMGHover.png");
    position: fixed;
    margin-top: 345px;
    margin-left: 110px;
    width: 250px;
    height: 60px;
}

#week5 {

    background-image: url("Graphics/week5IMG.png");
    position: fixed;
    margin-top: 410px;
    margin-left: 110px;
    width: 250px;
    height: 60px;
}

#week5Hover {

    background-image: url("Graphics/week5IMGHover.png");
    position: fixed;
    margin-top: 410px;
    margin-left: 110px;
    width: 250px;
    height: 60px;
}

#week6 {

    background-image: url("Graphics/week6IMG.png");
    position: fixed;
    margin-top: 475px;
    margin-left: 110px;
    width: 250px;
    height: 60px;
}

#week6Hover {

    background-image: url("Graphics/week6IMGHover.png");
    position: fixed;
    margin-top: 475px;
    margin-left: 110px;
    width: 250px;
    height: 60px;
}

#week7 {

    background-image: url("Graphics/week7IMG.png");
    position: fixed;
    margin-top: 150px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week7Hover {

    background-image: url("Graphics/week7IMGHover.png");
    position: fixed;
    margin-top: 150px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week8 {

    background-image: url("Graphics/week8IMG.png");
    position: fixed;
    margin-top: 215px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week8Hover {

    background-image: url("Graphics/week8IMGHover.png");
    position: fixed;
    margin-top: 215px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week9 {

    background-image: url("Graphics/week9IMG.png");
    position: fixed;
    margin-top: 280px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week9Hover {

    background-image: url("Graphics/week9IMGHover.png");
    position: fixed;
    margin-top: 280px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week10 {

    background-image: url("Graphics/week10IMG.png");
    position: fixed;
    margin-top: 345px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week10Hover {

    background-image: url("Graphics/week10IMGHover.png");
    position: fixed;
    margin-top: 345px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week11 {

    background-image: url("Graphics/week11IMG.png");
    position: fixed;
    margin-top: 410px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week11Hover {

    background-image: url("Graphics/week11IMGHover.png");
    position: fixed;
    margin-top: 410px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week12 {

    background-image: url("Graphics/week12IMG.png");
    position: fixed;
    margin-top: 475px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#week12Hover {

    background-image: url("Graphics/week12IMGHover.png");
    position: fixed;
    margin-top: 475px;
    margin-left: 375px;
    width: 250px;
    height: 60px;
}

#docBox1 {

    background: url("Graphics/researchBTN.png") no-repeat center;
    position: fixed;
    margin-top: 200px;
    margin-left: 50px;
    width: 310px;
    height: 110px;
}

#docBox1Hover {

    background: url("Graphics/researchBTNHover.png") no-repeat center;
    position: fixed;
    margin-top: 200px;
    margin-left: 50px;
    width: 310px;
    height: 110px;
}

#docBox2 {

    background: url("Graphics/storylineBTN.png") no-repeat center;
    position: fixed;
    margin-top: 200px;
    margin-left: 375px;
    width: 310px;
    height: 110px;
}

#docBox2Hover {

    background: url("Graphics/storylineBTNHover.png") no-repeat center;
    position: fixed;
    margin-top: 200px;
    margin-left: 375px;
    width: 310px;
    height: 110px;
}

#docBox3 {

    background: url("Graphics/goalsBTN.png") no-repeat center;
    position: fixed;
    margin-top: 325px;
    margin-left: 50px;
    width: 310px;
    height: 110px;
}

#docBox3Hover {

    background: url("Graphics/goalsBTNHover.png") no-repeat center;
    position: fixed;
    margin-top: 325px;
    margin-left: 50px;
    width: 310px;
    height: 110px;
}

#docBox4 {

    background: url("Graphics/expBTN.png") no-repeat center;
    position: fixed;
    margin-top: 325px;
    margin-left: 375px;
    width: 310px;
    height: 110px;
}

#docBox4Hover {

    background: url("Graphics/expBTNHover.png") no-repeat center;
    position: fixed;
    margin-top: 325px;
    margin-left: 375px;
    width: 310px;
    height: 110px;
}

#docBox5 {

    background: url("Graphics/artBTN.png") no-repeat center;
    position: fixed;
    margin-top: 450px;
    margin-left: 375px;
    width: 310px;
    height: 110px;
}

#docBox5Hover {

    background: url("Graphics/artBTNHover.png") no-repeat center;
    position: fixed;
    margin-top: 450px;
    margin-left: 375px;
    width: 310px;
    height: 110px;
}

#docBox6 {

    background: url("Graphics/gameplayBTN.png") no-repeat center;
    position: fixed;
    margin-top: 450px;
    margin-left: 50px;
    width: 310px;
    height: 110px;
}

#docBox6Hover {

    background: url("Graphics/gameplayBTNHover.png") no-repeat center;
    position: fixed;
    margin-top: 450px;
    margin-left: 50px;
    width: 310px;
    height: 110px;
}

#popUpPanel {

    background-color: rgba(23, 23, 33, 0.95);
    position: fixed;
    margin-top: 15px;
    margin-left: 15px;
    width: 775px;
    height: 550px;
    border-radius: 15px 0 15px 15px;
}

#closePopUp{

    background: url("Graphics/closeBTN.png") no-repeat center;
    position: fixed;
    margin-top: 20px;
    margin-left: 760px;
    width: 25px;
    height: 25px;
}

#closePopUpHover{

    background: url("Graphics/closeBTNHover.png") no-repeat center;
    position: fixed;
    margin-top: 20px;
    margin-left: 760px;
    width: 25px;
    height: 25px;
}

#concept1{

    background-color: white;
    position: fixed;
    margin-left: 25px;
    margin-top: 25px;
    width: 150px;
    height: 150px;
}

#concept2{

    background-color: white;
    position: fixed;
    margin-left: 210px;
    margin-top: 25px;
    width: 150px;
    height: 150px;
}

#concept3{

    background-color: white;
    position: fixed;
    margin-left: 410px;
    margin-top: 25px;
    width: 150px;
    height: 150px;
}

#concept4{

    background-color: white;
    position: fixed;
    margin-left: 600px;
    margin-top: 25px;
    width: 150px;
    height: 150px;
}

#concept5{

    background-color: white;
    position: fixed;
    margin-left: 25px;
    margin-top: 200px;
    width: 150px;
    height: 150px;
}

#concept6{

    background-color: white;
    position: fixed;
    margin-left: 210px;
    margin-top: 200px;
    width: 150px;
    height: 150px;
}

#concept7{

    background-color: white;
    position: fixed;
    margin-left: 410px;
    margin-top: 200px;
    width: 150px;
    height: 150px;
}

#concept8{

    background-color: white;
    position: fixed;
    margin-left: 600px;
    margin-top: 200px;
    width: 150px;
    height: 150px;
}

#showImage{

    background-color: red;
    position: fixed;
    margin: 0;
    width: 800px;
    height: 600px;
}

#closeImage{

    background-color: white;
    position: fixed;
    margin-top: 20px;
    margin-left: 760px;
    width: 25px;
    height: 25px;
    border-radius: 15px;
}

#leftArrow{

    background: url("Graphics/leftArrow.png") no-repeat center;
    position: fixed;
    margin-top: 175px;
    margin-left: 10px;
    width: 70px;
    height: 80px;
}

#rightArrow{

    background: url("Graphics/rightArrow.png") no-repeat center;
    position: fixed;
    margin-top: 175px;
    margin-left: 695px;
    width: 70px;
    height: 80px;
}

#imageBox{

    background-color: grey;
    position: fixed;
    margin-top: 0;
    margin-left: 85px;
    width: 605px;
    height: 425px;
}