/*

DART 450, Winter 2018
BrutalBook
Sévan Belleau

The css styling shown here is what keeps all the illustrated elements in their positions and allows the new posts to flow within them.

*/

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
/* This is a method to use fonts that are not only made for web. It allows for OTF and TTF files to be used but seeing not all browsers accept all types of fonts, I used a free webfont from fontsquirrel.com */
@font-face {
    font-family: 'webFont';
    src: url('../fonts/webFont/SF_Cartoonist_Hand-webfont.eot');
    src: url('../fonts/webFont/SF_Cartoonist_Hand-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/webFont/SF_Cartoonist_Hand-webfont.woff') format('woff'),
         url('../fonts/webFont/SF_Cartoonist_Hand-webfont.ttf') format('truetype'),
         url('../fonts/webFont/SF_Cartoonist_Hand-webfont.svg#sf_cartoonist_handregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1 {
  position: relative;
  /* The padding here is to make the entire blank post visible, otherwise it would be cut off in some areas. */
  padding-top:70px;
  padding-bottom: 100px;
  padding-right: 20px;
  padding-left: 20px;
  margin-bottom: 10px;
  margin-left: 300px;
  margin-top: -2px;
  z-index: 0;
  /* color: red; */
  font-size: 18px;
  width: 474;
  height: auto;
  max-width: 500px;
  background: url("../pics/frame.png");
  background-size: 500px 188px;
  background-repeat: no-repeat;
  /* display: inline-block; */
  font-family: "webFont", Helvetica;


}

                                                /* TOP */
/* TOP SECTION */

.facebookBackground {
  position: fixed;
  background-color: #e9ebee;
  height: 100vh;
  width: 100vw;
}
.blueBar {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #4468b0;
  height: 43px;
  width: 100vw;
  z-index: 1;
}
.searchBar {
  position: fixed;
  height: auto;
  width: 500px;
  top: 0px;
  left:100px;
  z-index: 2;
}
.home {
  position: fixed;
  height: auto;
  width: 350px;
  top: 6px;
  left:795px;
  z-index: 2;
}



                                                /* LEFT */
/* LEFT SIDE  */
.sideBar {
  position: fixed;
  height: auto;
  width: 200px;
  top: 60px;
  left: 95px;
}



                                                /* MIDDLE */
/* MIDDLE SECTION */
#allMiddleThings {
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 3;
  margin-left: 0px;
  margin-top: 0px;
}

.make {
    display: flex;
    flex-direction: column;
    display: flex;
    flex-direction: column-reverse;
}

.makePost {
  position: relative;
  height: auto;
  width: 500px;
  margin-top: 55px;
  margin-left: 300px;
  margin-bottom: 10px;
  /* top: 50px;
  left:250px; */
}

.onYourMind {
  border: none;
  outline: none;
  font-size: 20px;
  width: 420px;
  margin-left: 35px;
  margin-top: -4px;
  /* The second font, Helvetica is being used as a back up font is all fonts given in my webFont don't work. */
  font-family: "webFont", Helvetica;

}

.firstInput {
  position: absolute;
  z-index: 0;
  top:115px;
  left: 325px;
}

#submitButton {
  display: none;
}

.goodMorning {
  position: relative;
  height: auto;
  width: 500px;
  margin-top: 0px;
  margin-left: 300px;
  margin-bottom:10px
  /* top: 230px;
  left:250px; */
}

.drawnPosts {
  position: relative;
  height: auto;
  width: 500px;
  margin-left: 300px;
  margin-bottom: 10px;
}

                                                /* RIGHT */
/* RIGHT SIDE */
.stories {
  position: fixed;
  height: auto;
  width: 310px;
  top: 55px;
  left: 810px;
}

.invites {
  position: fixed;
  height: auto;
  width: 310px;
  top: 320px;
  left: 810px;
}


                                                /* TESTS */

.robotA {
  position: relative;
  height: auto;
  width: 500px;
  margin-left: 300px;
  margin-bottom: 10px;
  background-repeat: no-repeat;
}
.robotB {
  position: relative;
  height: auto;
  width: 500px;
  margin-left: 300px;
  margin-bottom: 10px;
  background-repeat: no-repeat;
}
.robotC {
  position: relative;
  height: auto;
  width: 500px;
  margin-left: 300px;
  margin-bottom: 10px;
  background-repeat: no-repeat;
}
.robotD {
  position: relative;
  height: auto;
  width: 500px;
  margin-left: 300px;
  margin-bottom: 10px;
  background-repeat: no-repeat;
}