/*
Nikolai Scheel
2018-05-13
CSE 154 AP
TA: Puja Ramanathan
Creative Project 07
SpiderChat CSS Page

SpiderChat is a forum for spiders. Sections include header, navigation, ads, recent threads, apis,
   forum submission/viewing, links around the web, and frinds of the site.
These are the css styles that SpiderChat uses.
*/

body {
   color: #660066;
   background-color: Plum;
   font-family: Times New Roman;
}

#floatyHolder {
   height: 64px;
   width: 64px;
   position: absolute;
}

.hidden {
   display:none;
}

header img {
   height: 100px;
   margin-right: 10px;
}

main {
   display: flex;
   margin-top: 10px;
}

h1, h2, h3 {
   font-family: Pristina;
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 5px;
}

h3 {
   font-family: Calibri;
   text-decoration: underline;
}

#navMenu {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
   height: auto;
}

.navButton {
   border-style: solid;
   width: 15.9%;
   text-align: center;
   height: 30px;
   background-color: #e2d0e2;
   display: flex;
   align-items: center;
   justify-content: center;
}

.navButton:hover {
   border-color: white;
}

#navMenu a {
   text-decoration: none;
}

#ads {
   float: left;
   flex-basis: 20%;
}

#ads img {
   width: 18vw;
   max-height: 50vw;
   border-style: solid;
   margin-left: auto;
   margin-right: auto;
}

#apiMenu > section {
   padding: 2%;
}

#submitMenu, #viewMenu {
   margin-left: 1%;
   margin-top: 1%;
   width: 75%;
}

.wikiImage {
   float:right;
   margin: 1%;
}

ol {
   list-style-type: disc;
}

hr {
   border-style: inset;
   border-width: 2px;
   border-color: #c969c9;
}

.fakeLink {
   text-decoration: underline;
}

.fakeLink:hover, label, .navButton:hover {
   cursor: pointer;
}

#outBox {
   width: 75%;
   text-align: center;
}

#outWarning {
   font-family: Calibri;
}

#outBox p {
   font-size: 1.5em;
   margin-top: 0;
   margin-bottom: 0.2em;
   text-shadow: -1px 1px gray;
}

#threadDisplay {
   background-color: #EDEDED;
   border-style: solid;
   margin-top: 1%;
   padding: 1%;
}

#threadDisplay * {
   margin-left: 0;
   border-color: gray;
   border-width: 1px;
}

footer {
   clear: left;
}

#validators {
   text-align: right;
}

a:not(.validator) {
   color: #660066;
}

.validator {
   text-decoration: none;
}

#aroundTheWeb {
   float:left;
   width: 45%
}

#friendsOfOurs {
   margin-left: 50%;
}