/* Class Styles: */

/* Makes links look like buttons by giving them a background colour and borders. */
.button {
  font: bold 16px Arial;
  background-color: red;
  text-decoration-line: none;
  color: white;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
}

/* A variant of the button class that uses a different colour and font for admin related links. */
.adminButton {
  font: bold 16px Georgia;
  background-color: darkOrchid;
  text-decoration-line: none;
  color: white;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
}

/* A larger variant of the link buttons used for the front index page. */
.bigButton {
  font: bold 24px Arial;
  background-color: red;
  text-decoration-line: none;
  color: white;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
}

/* A larger variant of the recoloured link buttons used for the admin panel navigation page.*/
.bigAdminButton {
  font: bold 24px Georgia;
  background-color: darkOrchid;
  text-decoration-line: none;
  color: white;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
}

/* Places tagged objects in the center of the screen. */
.center {
    text-align: center;
}

/* Displays the coloured background for the posts on the home page. */
.post {
    background-color: darkred;
    border-radius: 15px;
    text-align: center;
    word-wrap: break-word;
    padding: 40px;
    margin-left: 200px;
    margin-right: 200px;
}

/* A recoloured version of the post class used for reports and post history within the admin panel. */
.report {
    background-color: rebeccapurple;
    border-radius: 15px;
    text-align: center;
    word-wrap: break-word;
    padding: 40px;
    margin-left: 200px;
    margin-right: 200px;
}

/* Defines the font and size for the titles of posts. (Username/Timestamp). */
.postTitle {
    font: bold 16px Arial;
    text-decoration-line: underline;
}

/* The same as the postTitle but not underlined, used for listing the names of users involved in reports. */
.reportTitle {
    font: bold 16px Arial;
}

/* A large title at the top of the page with a background and large font. */
.title {
    background-color: red;
    text-decoration-line: underline;
}

/* Same as the regular title class with a different font and background colour, used for admin pages. */
.adminTitle {
    background-color: darkOrchid;
    text-decoration-line: underline;
    font: bold 36px Georgia;
}

/* Font and size used for the text that displays the number of likes and comments on a post. */
.like {
    font: bold 14px Arial;
}

/* A smaller and darker coloured version of the post background used for comments and private messages. */
.comment {
    background-color: maroon;
    border-radius: 15px;
    text-align: left;
    word-wrap: break-word;
    padding: 20px;
    margin-left: 300px;
    margin-right: 300px;
}

/* An alternate version of the comments class that is aligned to the left, indicating messages from another user. */
.leftMessage {
    background-color: maroon;
    border-radius: 15px;
    text-align: left;
    word-wrap: break-word;
    padding: 20px;
    margin-right: 500px;
}

/* An alternate version of the comments class that is aligned to the right, indicating messages sent by you. */
.rightMessage {
    background-color: maroon;
    border-radius: 15px;
    text-align: right;
    word-wrap: break-word;
    padding: 20px;
    margin-left: 500px;
}

/* A version of the img tag CSS that limits the images to a smaller size for comments and messages. */
.commentImage {
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    max-width: 200px;
    max-height: 200px;
}

/* A smaller version of the post title used for comments and private messages. */
.commentTitle {
    font: bold 14px Arial;
    text-decoration-line: underline;
}

/* Reduced size text used for comments and private messages. */
.commentText {
    font: 12px Arial;
}

/* Text that displays inline to allow buttons to be placed inline with the paragraph, used to display blocked users. */
.blockTitle {
    font: bold 14px Arial;
    display:inline;
}

/* A class for real button widgets that recolours them for the admin panel. */
.trueAdminButton {
    background-color: darkOrchid;
    color: white;
    font: bold 14px Georgia;
}

/* Specific item styles */

/* Specifies the width and height of the mapInput element on the posts screen, as well as the offsets that aim to place it in the center of the screen. */
/* Regular "align center" tags do not appear to work for this map. */
#mapInput {
    width: 600px; 
    height: 300px;
    margin-left: 325px;
    margin-right: 325px;
}

/* Widget styles */

/* Defines the default colour and font of most text on the site. */
body {
    background-color: black;
    color: white;
    font: 14px Arial;
}

/* Title size and font. */
h1 {
    font: bold 36px Arial;
}

/* Subtitle size and font. */
h2 {
    font: bold 28px Arial;
}

/* Defines the styling for actual button widgets, using the correct background colour and font. */
button {
    background-color: red;
    color: white;
    font: bold 14px Arial;
}

/* Gives all images a thin border and defines the maximum size for each image so they don't take up too much of the site. */
img {
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    max-width: 500px;
    max-height: 500px;
}