@font-face {
  font-family: "Adventure";
  src: url("http://bryan-graphics.com/scripts/Adventure.ttf");
}

.centered {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1024px;
  margin-left: -512px;
  left: 50%;
}

.centerArt {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
}

.title {
    background-image: url("http://bryan-graphics.com/images/page_top/page_title.png");
    position: relative;
    height: 160px;
    width: 1024px;
}


.comicDots {
  background-image: url("http://bryan-graphics.com/images/page_top/background_center.png");
  position: fixed;
  height: 100%;
  width: 1024px;
  border: 0px;
  top: 86px;
  user-select: none;
}

.updatesTitle{
  font-family: Adventure;
  font-size: 29px;
  top: 38px;
  left: 25px;
  position: absolute;
}

.overviewTitle{
  font-family: Adventure;
  font-size: 29px;
  top: 38px;
  left: 281px;
  position: absolute;
}

.overviewDescription {
  font-size: 16px;
  top: 84px;
  left: 286px;
  position: absolute;
  width: 423px;
}

.projectBody{
  background-image: url("http://bryan-graphics.com/images/page_home/project_back.png");
  position: relative;
  height: 279px;
  width: 1024px;
}

.projectTop{
  position: relative;
  height: 56px;
  width: 1024px;
}

.projectTitle{
  top: 11px;
  left: 17px;
  position: relative;
}

.projectBottom{
  position: relative;
  height: 223px;
  width: 1024px;
  display: flex;
}

.projectLeft{
  position: relative;
  height: 223px;
  width: 450px;
}

.projectThumb {
  user-select: none;
  top: 2px;
  left: 24px;
  height: 203px;
  width: 404px;
  position: relative;
}

.projectRight{
  position: relative;
  height: 223px;
  width: 552px;
}

.projectDescription {
  font-size: 16px;
  top: 6px;
  left: -2px;
  position: absolute;
  width: 544px;
}

.projectInfo1 {
  font-size: 16px;
  top: 113px;
  left: -2px;
  position: absolute;
}

.projectInfo2 {
  font-size: 16px;
  top: 163px;
  left: -2px;
  position: absolute;
}

.projectInfo3 {
  font-size: 16px;
  top: 113px;
  left: 208px;
  position: absolute;
}

.projectInfo4 {
  font-size: 16px;
  top: 163px;
  left: 208px;
  position: absolute;
}

.mainSection {
  position: relative;
    height: 512px;
    width: 1024px;
}

.bodyImage {
  position: absolute;
  left:0;
}

iframe {
    height: 160px;
    width: 1024px;
    display: block;
}

.projectButton {
  position: absolute;
  font-size: 0;
  bottom: 17px;
  right: 3px;
}

/* Lists */

.listMenu {
    position: relative;
    font-size: 0;
    left: 14px;
    top: 70px;
}

.listMenuEgg {
    position: relative;
    font-size: 0;
    left: 14px;
    top: -54px;
}

.listPro {
    position: relative;
    left: 37px;
    top: 209px;
}

.listGal {
    position: relative;
    font-size: 0;
    left: 11px;
    top: 28px;
}

/* Updates */

.listUpdate {
    float:left;
    position: relative;
    width: 234px;
    left: 16px;
    top: 71px;
}

.listLatest {
    float:left;
    position: relative;
    width: 461px;
    left: 34px;
    top: 160px;
}

.listUnderway {
    float:left;
    position: relative;
    width: 268px;
    left: 49px;
    top: 13px;
}

.fontBold {
    font-weight: bold;
    font-family: Bookman;
    font-size:16px;
    color: black;
    margin-left: 8px;
    margin-top: 6px;
  }

.fontSimple {
    font-weight: normal;
    font-family: Bookman;
    font-size:16px;
    color: black;
    margin-left: 8px;
    margin-top: -18px;
  }

.fontSimpleNote {
    font-weight: normal;
    font-family: Bookman;
    font-size:16px;
    color: black;
    margin-left: 8px;
    margin-top: 15px;
}

.bttn_Update {
    height: 52px;
    width: 234px;
    float:left;
    outline:none;
    transition:.5s;
    background-color: white;
}

.bttn_Update:hover {
  cursor: pointer;
  background-color: #fcba1e;
}

/* Rollovers Basic */

.rollover {
    float:left;
    outline:none;
    transition:.5s;
}

/* Rollovers Menu */

#bttn_email {
    position: relative;
    left: 639px;
    top: 49px;
    outline:none;
    height: 25px;
    width: 183px;
    background-image: url(http://bryan-graphics.com/images/page_top/bttn_email1.png);
    transition:.5s;
}
#bttn_email:hover {
  cursor: pointer;
  background-image: url(http://bryan-graphics.com/images/page_top/bttn_email2.png);
}

#bttn_gal {
  height: 49px;
  width: 310px;
  left: 27px;
  position: relative;
  background-image: url(http://bryan-graphics.com/images/page_top/bttn_gal1.png);
}
#bttn_gal:hover {
  cursor: pointer;
  background-image: url(http://bryan-graphics.com/images/page_top/bttn_gal2.png);
}

#bttn_download {
  height: 33px;
  width: 126px;
  background-image: url(http://bryan-graphics.com/images/page_home/bttn_download_1.png);
}
#bttn_download:hover {
  cursor: pointer;
  background-image: url(http://bryan-graphics.com/images/page_home/bttn_download_2.png);
}

#bttn_visit {
  height: 33px;
  width: 126px;
  background-image: url(http://bryan-graphics.com/images/page_home/bttn_visit_1.png);
}
#bttn_visit:hover {
  cursor: pointer;
  background-image: url(http://bryan-graphics.com/images/page_home/bttn_visit_2.png);
}

/* Frame & logo*/

.frame {
    border: 65px solid black;
    border-image: url(http://bryan-graphics.com/images/page_art/frame.png) 25.5%;
}

.logo {
    position: relative;
    top: 50px;
    right: -93px;
    float: left;
}

/* Rollovers Back Arrow */

.bttn_back {
    outline:none;
    height: 74px;
    width: 122px;
    position: relative;
    top: 60px;
    right: 84px;
    float: right;
    background-image: url(http://bryan-graphics.com/images/page_art/bttn_back1.png);
    transition:.5s;
}
.bttn_back:hover {
  cursor: pointer;
  background-image: url(http://bryan-graphics.com/images/page_art/bttn_back2.png);
}


.bttn_prev {
    outline:none;
    height: 90px;
    width: 52px;
    position: relative;
    float: left;
    background-image: url(http://bryan-graphics.com/images/page_art/bttn_prev1.png);
    transition:.5s;
}
.bttn_prev:hover {
  cursor: pointer;
  background-image: url(http://bryan-graphics.com/images/page_art/bttn_prev2.png);
}

.bttn_next {
    outline:none;
    height: 90px;
    width: 52px;
    position: relative;
    float: right;
    background-image: url(http://bryan-graphics.com/images/page_art/bttn_next1.png);
    transition:.5s;
}
.bttn_next:hover {
  cursor: pointer;
  background-image: url(http://bryan-graphics.com/images/page_art/bttn_next2.png);
}

.bottom-gap {
  height: 50px;
}