body {
    margin: 0;
    padding: 0;
    font-size: 0;
    overflow: hidden;
}

.wrapper {
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.content {
    margin: 15px 0;
    position: absolute;
    display: inline-block;
    font-size: 0;
    width: 100%;
}

/* Writing Styles */

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: blue;
}

hr {
    display: block;
    margin: 15px 15 15 0px;
    border: solid 1px black;
    border-bottom: none;
}

h1 {
    margin: 0;
    margin-bottom: 15px;
    padding: 0;
    font-size: 47px;
    font-family: 'Oswald', sans-serif;
}

h6 {
    margin: 15px 15 15 0px;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Halant', serif;
}

.subheading {
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1;
}

.alphabetGuide {
    margin-top: 15px;
    text-decoration: underline;
}

.imageCaption {
    font-size: 11px;
    letter-spacing: 1;
    font-weight: 600;
}

p {
    font-size: 14px;
}

.essay {
    margin: 15 15 15 0px;
    padding: 0;
    font-weight: 300;
    display: inline-block;
    font-family: 'Halant', serif;
    transition: 0.25s ease;
}

.quote {
    font-style: italic;
}

.bibliography {
    margin: 15 0 15 0px;
    padding: 0;
}

.resource {
    margin: 0 15 15px 0px;
    padding: 0;
    font-size: 10px;
}

mark {
    background-color: #FFFDD6;
}

.target {
    background-color: transparent;
}

scpan {
    text-decoration: underline;
}

.orchardStreetName {
    position: fixed;
    transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    top: 325px;
    left: 31.5%;
    z-index: 1;
}

.hesterStreetName {
    position: absolute;
    top: 1620px;
    left: 45%;
}

.grandStreetName {
    position: absolute;
    left: 45%;
    top: 3950px;
}

/* SITE COMPOSITION */

.site {
    margin: 0;
    padding: 0 15 15 15px;
    position: absolute;
    overflow: scroll;
    height: 580px;
}

.lefthand {
    overflow-x: hidden;
    width: 65%;
    left: 2%;
    background-color: #E8E8E8;
}

.righthand {
    width: 25%;
    left: 70%;
    border-left: solid 1px black;
}

.article {
    height: 354px;
    border-bottom: solid 1px black;
}

.guide {
    width: 25%;
    top: 385px;
    height: 193px;
    border: solid 1px black;
}

.streetName {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    font-family: 'Halant', serif;
    z-index: 1;
}

/* STREET STYLES */

.street {
    position: absolute;
}

.streetB {
    left: 130px;
}

.streetC {
    left: 245px;
}

.streetD {
    right: 30px;
}

.streetE {
    right: 145px;
}

.streetF {
    right: 260px;
}

.street2 .street {
    top: 1640px;
}

.street3 .street {
    top: 3970px;
}

.emptyBuild {
    z-index: -1;
}

.target {
    background-color: none;
}

/* ALPHABET STYLES */

.solidBlack {
    border: 3px solid black;
}

.dashedBlack {
    border: 3px dashed black;
}

.build {
    margin: 15 0px;
    padding: 0;
    position: relative;
    width: 94px;
    height: 94px;
    background-color: white;
}

.forward {
    z-index: 2;
    border-left: none;
    border-right: none;
    left: 3px;
}

.inner {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 64px;
    height: 64px;
    
}

.expandOnce {
    width: 209px;
    z-index: 1;
}

.expandTwice {
    width: 324px;
}

.shift {
    left: 230px;
}

.highlight {
    background-color: yellow;
}

.horizontalLine {
    border-top: 3px solid black;
    width: 100%;
    position: absolute;
}

.centerLine {
    top: 47px;
}

.topLine {
    top: 22px;
}

.bottomLine {
    top: 72px;
}

.roof {
    border-right: none;
    border-bottom: none;
    width: 40px;
    height: 40px;
    transform: rotate(45deg);
    left: 25px;
    top: 22px;
}

.base {
    height: 25px;
    top: 51px;
}

.leftbuilding {
    width: 30px;
    height: 64px;
}

.rightbuilding {
    border-left: none;
    width: 32px;
    height: 34px;
    top: 42px;
    left: 47px;
}

.leftComboHeight {
    height: 38px;
    top: 38px;
}

.rightComboHeight {
    height: 14px;
    top: 62px;
}

.leftComboRoof {
    width: 22px;
    height: 22px;
    left: 17px;
    top: 17px;
}

.rightComboRoof {
    width: 18px;
    height: 18px;
    left: 54px;
    top: 42px;
}

.circle {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    left: 29px;
    top: 13px;
}

.chimney {
    width: 16px;
    height: 66px;
    left: 63px;
    border-left: none;
    border-bottom: none;
}

.factory {
    height: 15px;
    left: 14px;
    top: 63px;
    border-top: none;
    border-right: none;
}

.factoryRoof {
    height: 36px;
    width: 32px;
    left: 29px;
    border-left: none;
    border-top: none;
}

.shingle {
   height: 35px;
   left: -33px;
   top: 15px;
   border-top: none;
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);
}

.centered {
    left: 29px;
    top: 29px;
}

.pedestal {
    border-bottom: none;
    width: 30px;
    height: 10px;
    left: 29px;
    top: 39px;
}

.pole {
    height: 28px;
    left: 45px;
}

.flag {
    width: 20px;
    height: 10px;
    left: 45px;
}

.communitycircleone {
    top: 20px;
    left: 20px;
}

.communitycircletwo {
    top: 38px;
    left: 38px;
}


.verticalLine {
    border-top: none;
    border-right: none;
    border-bottom: none; 
}

.cross {
    height: 94px;
    left: 36px;
}

.rightToLeft {
    top: 22px;
    transform: rotate(45deg);
}

.leftToRight {
    top: -23px;
    transform: rotate(-45deg);
}

.halfcircle {
    position: absolute;
    height: 27px;
    top: 50px;
    border-radius: 35px 35px 0 0;
}

.bag {
    height: 45px;
    top: 31px;
    position: absolute;
}

.leftSideBag {
    width: 45px;
    border-right: none;
}

.rightSideBag {
    width: 17px;
    left: 59px;
}

.handle {
    height: 17px;
    width: 26px;
    top: 12px;
    left: 30px;
    border-bottom: none;
}

.tube {
    width: 15px;
    height: 15px;  
    top: 12px;
}

.tubeRight {
    left: 62px;
}

.tubeLeft {
    left: 12px;
   border-radius: 15px 0 0 0;
   border-right: none;
   border-bottom: none;
}

.strip {
    border-top: none;
    border-left: none;
}

.leftSideStrip {
    width: 0px;
    top: 25px;
    height: 52px;
}

.rightSideStrip {
    width: 50px;
    top: 22px;
    height: 56px;
}

.topSideStrip {
    border-left: none;
    border-right: none;
    border-bottom: none;
    width: 45px;
    left: 25px;
}

.medicalCross {
    width: 20px;
    height: 20px;
    left: 34px;
    position: absolute;
    border-bottom: none;
}

.crossBottom {
    transform: rotate(180deg);
    top: 59px;
}

.crossRight {
    transform: rotate(90deg);
    width: 21px;
    height: 22px;
    top: 35px;
    left: 56px;
}

.crossLeft {
    transform: rotate(-90deg);
    left: 11px;
}

.railTop {
    left: 12px;
    width: 23px;
    height: 67px;
}

.step {
    width: 27px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    top: 35px;
}

.stepBottom {
   top: 60px;
}

.slide {
    border-bottom: none;
    border-right: none;
    width: 39px;
    height: 39px;
    border-radius: 50px 0 0 0;
    transform: rotate(-90deg);
    left: 38px;
    top: 39px;
}

.page {
    height: 52px;
    width: 32px;
    top: 18px;
}

.leftPage {
    border-right: none;
    transform: skewY(20deg);
}

.rightPage {
    border-left: none;
    transform: skewY(-20deg);
    left: 47px;
}

.dividePage {
    height: 55px;
    top: 25px;
    left: 45px;
}

.wave {
    border-bottom: none;
    border-radius: 20px 20px 0 0;
}

.firstWave {
    height: 35px;
    border-radius: 50px 50px 0 0;
}

.secondWave {
    width: 30px;
    top: 30px;
    left: 29px;
    height: 15px;
}

.thirdWave {
    width: 12px;
    top: 50px;
    left: 38px;
    height: 7px;
}

.voice {
    width: 10px;
    height: 10px;
    left: 39px;
    top: 66px;
}

.utensil {
    height: 29px;
    transform: rotate(180deg);
}

.utensilHandle {
    top: 12px;
    left: 25px;
    height: 70px;
}

.spoon {
    border-radius: 50px 50px 50px;
    border: solid 3px black;
    top: 10px;
    left: 53px;
    height: 27px;
}

.spoonHandle {
    top: 40px;
    left: 66px;
    height: 42px;
}

.cup {
    width: 46px;
    height: 46px;
    top: -10px;
    left: 23px;
    transform: rotate(-135deg);
}

.cupTop {
    border-left: none;
    border-right: none;
    left: 13px;
    width: 69px;
}

.glassstem {
    left: 46px;
    height: 33px;
    top: 47px;
}

.groceryCartBody {
    border-left: none;
    top: 23px;
    left: 30px;
    width: 42px;
    height: 32px;
    transform: skewX(-20deg);
}

.groceryCartHandle {
    border-left: none;
    border-bottom: none;
    height: 46px;
    width: 10px;
}

.brush {
    border-right: none;
    border-radius: 20px 0  0 20px;
    width: 38px;
    left: 25px;
}

.bristle {
    border-left: none;
    border-right: none;
    border-bottom: none;
    width: 22px;
    left: 44px;
}

.bristleTop {
    top: 45px;
}

.bristleCenter {
    top: 28px;
}

.bristleBottom {
    top: 62px;
}

.brushpole {
    left: 45px;
    height: 30px;
}

.brushbase {
    border-radius: 10px 10px 0 0;
    top: 40px;
    height: 20px;
}

.sweeperBristle {
    top: 63px;
    height: 20px;
}

.brushtwo {
    left: 79px;
}

.brushthree {
    left: 45px;
}

.brushfour {
    left: 28px;
}

.brushfive {
    left: 62px;
}

.ticket {
    border-bottom: none;
    width: 65px;
    height: 68px;
}

.tear {
   top: 68px; 
   width: 23px;
   height: 23px;
   border-bottom: none;
   border-right: none;
   transform: rotate(45deg);
}

.tearone {
    left: 18px;
}

.teartwo {
    left: 51px;
}

.constructionBuilding {
    border-bottom: none;
}

.doorway {
    border-bottom: none;
    top: 59px;
    left: 38px;
    width: 10px;
    height: 20px;
}

.doorwayLeft {
    top: 79px;
    width: 28px;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.doorwayRight {
    left: 54px;
}

.screwTop {
    left: 28px;
    width: 30px;
    height: 5px;
}

.screwStem {
    border-top: none;
    border-bottom: none;
    left: 38px;
    top: 21px;
    width: 10px;
    height: 53px;
}

.screwPoint {
    border-top: none;
    border-left: none;
    top: 68px;
    left: 40px;
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
}

.brick {
    width: 12px;
    height: 12px;
    top: 12px;
    left: 64px;
}

.ribbon {
    left: 12px;
    top: 18px;
}

.ribbonright {
    left: 46px;
}

.endribbon {
    width: 30px;
    height: 40px;
    top: 33px;
    border-top: none;
}

.endribbonleft {
    left: 46px;
    border-radius: 0 0 0 30px;
    border-right: none;
}

.endribbonright {
    left: 15px;
    border-left: none;
    border-radius: 0 0 30px 0;
}

.shirtBottom {
    border-top: none;
    top: 49px;
    left: 26px;
    height: 30px;
    width: 35px;
}

.shirtLeft {
    border-right: none;
    border-radius: 50px 0 0;
    height: 34px;
    width: 13px;
}

.shirtRight {
    border-left: none;
    border-radius: 0 50px 0 0;
    height: 34px;
    width: 13px;
    left: 65px;
}

.shirtTopLeft {
    border-left: none;
    border-right: none;
    border-bottom: none;
    left: 25px;
    width: 10px;
}

.shirtTopRight {
    left: 58px;
}

.frame {
    width: 30px;
    height: 30px;
    top: 29px;
    left: 29px;
}

.head {
    top: 28px;
    left: 38px;
    width: 13px;
    height: 13px;
}

.shoulder {
    top: 48px;
    height: 13px;
    border-radius: 20px 20px 0 0;
}

.personOneHead {
    top: 11px;
    left: 21px;
}

.personOneShoulder {
    top: 31px;
    left: 12px;
}

.personTwoHead {
    top: 42px;
    left: 54px;
}

.personTwoShoulder {
    top: 62px;
    left: 46px;
}

.cord {
    border-radius: 0 0 50px 50px;
    top: 36px;
    left: 20px;
    width: 49px;
    height: 40px;
}

.socketone {
    height: 25px;
    left: 30px;
}

.sockettwo {
    height: 25px;
    left: 62px;
}

.transporting {
    position: relative;
    border: solid 3px black;
}

.carone {
    height: 45px;
    width: 48px;
    border-right: none;
}

.cartwo {
    height: 25px;
    width: 16px;
    top: 32px;
    left: 63px;
    border-left: none;
}

.carthree {
    height: 23px;
    width: 26px;
    left: 60px;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

.wheel {
    top: 66px;
    height: 10px;
    width: 10px;
}

.leftwheel {
    left: 12px;
}

.rightwheel {
    left: 66px;
}

.groceryLeft {
    left: 15px;
}

.groceryRight {
    left: 55px;
}

.shirtTop {
    border-bottom: none;
    top: 12px;
    left: 34px;
    width: 18px;
    transform: rotate(180deg);
}