body { margin: 0; } .banner { display: flex; align-items: flex-end; padding: 1rem; background-color: #eeeeee; } .banner h2 { margin: 0 1rem 0 0; color: #AF5FFF; } .banner h3 { margin: 0 1rem; color: #555555; } .banner a:-webkit-any-link { color: #AF5FFF; cursor: pointer; text-decoration: none; } .nav { display: flex; align-items: center; padding: 1rem .5rem; background-color: #AF5FFF; height: .1rem; } .nav h4 { margin-left: 0; color: white; padding: .5rem .5rem; } .nav h4:hover { background-color: #8D3DDD; } .nav a:-webkit-any-link { color: white; cursor: pointer; text-decoration: none; } .content { margin-top: 0; display: flex; } .leftie { display: flex; flex-direction: column; width: 230px; border-right: 2px dotted #eeeeee; } .leftie ul { list-style-type: none; padding: 0; margin-top: 1rem; } .leftie li { margin: 0; padding-left: 1rem; padding-top: .5rem; padding-bottom: .5rem; } .leftie li:hover { background-color: #eeeeee; } .leftie a:-webkit-any-link { color: #AF5FFF; cursor: pointer; text-decoration: none; } #sub { margin: 0; padding: 0 0 0 1rem; font-size: 14px; } .rightie { display: flex; flex-direction: column; margin: 1rem 1rem; } .rightie h3 { margin-top: .5rem; margin-bottom: 0; } .rightie h4 { margin-bottom: 0; } .rightie a:-webkit-any-link { color: #AF5FFF; cursor: pointer; } #reg { display: flex; flex-direction: column; margin-top: .5rem; } #reg label { padding: .5rem 0; } #reg input { padding: .4rem 0; } #newb { display: flex; flex-direction: column; margin-top: .5rem; width: 35rem; } #newb label { padding: .5rem 0; } #newb input { padding: .4rem 0; } #newb select { padding: .4rem 0; } #bod { height: 25rem; } .formBtn { background-color: white; border: none; color: #AF5FFF; margin-top: .5rem; padding: .5rem 0; } .formBtn:hover { background-color: #eeeeee; cursor: pointer; } #bname { color:black; text-decoration: none; cursor: pointer; } #pbname { text-decoration: none; cursor: pointer; } .bpost { display: flex; flex-direction: column; border-bottom: 2px dotted #eeeeee; width: 35rem; } .bpost h4 { margin: 1rem 0; } .bpost img { width: 35rem; } #rev { display: flex; flex-direction: column-reverse; margin: 1rem 1rem; } #rev2 { display: flex; flex-direction: column-reverse; margin: 1rem 1rem; width: 50rem; justify-content: flex-end; } .showPost { display: flex; flex-direction: column; width: 50rem; } .showPost h4 { margin: 1rem 0; } .showPost img { width: 50rem; } .showPost span { display: flex; justify-content: flex-end; } .showPost span button { background-color: #eeeeee; color: #AF5FFF; border: none; margin: .5rem 0; padding: .5rem 0; width: 10rem; } #deleteForm { display: flex; width: 50rem; flex-direction: row-reverse; } .deleteBtn { background-color: white; border: none; color: #AF5FFF; margin: .5rem 0; padding: .5rem 0; width: 50rem; } .deleteBtn:hover { background-color: #eeeeee; cursor: pointer; } #edit { color: #AF5FFF; margin-top: .5rem; padding: .5rem 0; width: 50rem; text-decoration: none; text-align: center; font: 400 13.3333px Arial; } #edit:hover { background-color: #eeeeee; cursor: pointer; } .cmmntOps { display: flex; flex-direction: row-reverse; } .comment { border-left: 3px dotted white; border-right: 3px dotted white; border-bottom:2px dotted #AF5FFF; background-color: #eeeeee; padding-left: .5rem; color: #555555; } #edCmmnt { background-color: #eeeeee; border: none; color: #AF5FFF; margin-top: .5rem; padding: .5rem 0; width: 10rem; text-align: center; text-decoration: none; font: 400 13.3333px Arial; } #edCmmnt:hover { background-color: white; cursor: pointer; } .comment .deleteBtn { background-color: #eeeeee; width: 10rem; margin-bottom: 0; } .comment .deleteBtn:hover { background-color: white; } .comment p { margin-left: 1rem; } #srch { display: flex; flex-direction: column; align-items: center; margin-top: .5rem; } #srch label { padding: .5rem 0; } #srch input { padding: .4rem 0; }