styleSheet.css

/***** BODY ******/
body {
    width: 85%;
    margin: auto;
    
}
/***** END OF BODY******/

/***** APP NAME ******/
.appName {
    font-family: 'Black Ops One', cursive;
    text-align: center;
    padding: 0.001em;
}
/***** APP NAME END ******/


/***** NAVAGATION BAR ******/
.navBar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

.navBar li {
  float: left;
}

.navBar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navBar li a:hover {
  background-color: lightyellow;
  color: black;
  font-weight: bold;
}

.navBar .active {
    background-color: yellow;
    color: black;
    font-weight: 900;
}

/***** END OF NAVAGATION BAR ******/

/***** SEARCH BAR ******/
* {
  box-sizing: border-box;
}


.searchBar {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    
}

form.searchBar input[type=text] {
  //padding: 0.5em;
  font-size: 0.9em;
  padding: none;
  border: none;
  float: left;
  width: 90%;
  background: #f1f1f1;
  height: 2.5em;
}

form.searchBar button {
  background-color: lightgrey;
  //border: solid; 
  border-color: grey;
  border-style: none;
  cursor: pointer;
  //padding: 0.27em;
  width: 10%;
  padding: none;
  height: 2.75em;
  border: none;
} 

form.searchBar img {
    float: left;
    width; 10%;
    height: 1.9em;
    background-color: lightgray;
    align-content: center;
    
}

form.searchBar button:hover {
  border-color: yellow;
  
}

form.searchBar::after {
  content: "";
  clear: both;
  display: table;
}
/***** END OF SEARCH BAR ******/

/***** START OF POST CONTAINER ******/
/*.row:after {
    content: "";
    float: left;
    clear: both;
}*/
/***** END OF POST CONTAINER ******/
/***** POST ******/
.feedContainer {
    background-color: floralwhite;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3em;
    padding-bottom: 3em;
}

div {
    display: block;
}
.post {
    /*orginal 3 column stuff
    /*float: left;
    width: 33.3%;
    height: 20e*
    background-color: #2F314C; /
    background-color: black;
    border-style: solid;
    border-color: white;
    border-width: 0.5em;*/
    display: block;
    background-color: #2F314C; 
    background-color: black;
   // border-style: solid;
   // border-color: none;
    border-width: 0.5em;
    width: 30em;
    margin-left: auto;
    margin-right: auto;

}

.post div {
    width: 100%;
    margin-left: 0.5em;
}

.post img {
    vertical-align: middle;
    width: 5em;
    height: auto;
    max-height: 50%;
    float: left;
    padding: 0.5em;
    
    
}
/*.post {
    display: -webkit-flex; /* Safari 
  -webkit-align-items: center; /* Safari 7.0+ 
    align-items:flex-start;
}*/
.post {
    color: white;
}

img {
    vertical-align: baseline;
}

.name {
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    font-weight: bold;
}

.postInfo {
    
    float: right;
    color: white;
    margin-right: 5%;
    
}

.description p {
    margin-right: 5%;
    padding-bottom: 1.5em;
    
}

.post table {
    width: 100%;
    align-content: center;
}

.post td {
    text-align: center;
    
}



/***** END OF POST ******/

div .posting  {
    display: block;
}




/****** START OF postingFomr *****/ 
.postingForm {
    display: block;
    background-color: black;
    color: white;
    padding: 1em;
    border-radius: 0.175em;
    
}

.postingForm label {
    font-family: 'times new roman';
    font-weight: 800;
    //margin-left: 3%;
    padding-top: 4em;
    font-size: 1.125em;
    //margin-left: 3%;
    margin-right: auto;
    width: 95%;
    
}

.postingForm table {
    //margin-left: 3%;
    //width: 94%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.postingForm th {
    font-family: 'times new roman';
    font-size: 1.125em;
}



.postingForm input.tirpDescription {
    width: 100%;
    height: 5em;
    padding: 0;
    text-align: left;
    
}

.postingForm label.tirpDescription  {
 text-align: left;
    
    
}


.postingForm input {
    
    margin-top: 0.2em;
    margin-bottom: 0.5em;
    font-size: 1em;
    border-radius: 0.124em;
    text-align: center;
    box-shadow: none;
    text-shadow: none;
    border-style: solid;
    border-color: white;
    font-family: 'times new roman';
    
}

.postingForm td input {
    width: 100%;
    border-color: white;
    box-shadow: none;
    border-style: solid;
}

.button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15%;
    font-family: 'impact';
    padding: 0.5em 0.125em;
    color: black;
    background-color: yellow;
    font-family: sans-serif; 
    border-style: solid;
    border-color: black;
    
    
}




/****** END OF postingFomr *****/ 


@media only screen and (min-width: 48em) {

    /*postinForm START*/
    .postingForm {
    display: block;
    background-color: black;
    color: white;
    padding: 1em;
    border-radius: 0.175em;
    width: 50%;
        
    margin-left: auto;
    margin-right: auto;
    
}
  
}//end of @media at 38em