/*
 * Web Programming
 * CSC 4370
 * Summer 2017
 *
 * Project Name
 * Super Mario Fan Page
 *
 * Project By:
 * Dino Cajic and Derek Malikian
 */

/* The Super Mario font */
@font-face {
    font-family: marioFont;
    src: url(emulogic.ttf);
}

/*
 * Set the background color to match Super Mario background color
 * Set the font of the page to match Super Mario font
 * Set the margin of the page to zero
 */
body {
    background: cornflowerblue;
    font-family: "marioFont", sans-serif;
    margin: 0;
}

/**********************************************************************************************************************/
/* Large Box                                                                                                          */
/**********************************************************************************************************************/

/*
 * The container is set to hold a 400px by 400px box. It helps center the box on the screen.
 * When drawing the floating box on a two-dimensional surface we used the perspective property to give the right
 * impression of its height, width, depth, and position in relation to each other.
 */
#main {
    width: 400px;
    height: 400px;
    margin: 10% auto;
    /* The child element gets the perspective. #box gets the perspective */
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    /* Need to have the box appear above the clouds */
    z-index: 100;
}

/*
 * Created a container for the floating box
 */
#box {
    /* transform-style was added to create the 3D objects instead of a flat 2D object */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* Animates the box rotation */
    -webkit-animation: rotate 20s linear infinite;
    animation: rotate 20s linear infinite;
    -o-animation: rotate 20s linear infinite;
}

/* Styling for div containers within box */
#box div {
    position: absolute;
    width: 300px;
    height: 300px;
    opacity: 0.7;
}

/* Front portion of the box containing the Super Mario Logo and project membeers */
#front {
    -webkit-transform: translateZ(200px);
    -moz-transform: translateZ(200px);
    -ms-transform: translateZ(200px);
    -o-transform: translateZ(200px);
    transform: translateZ(200px);
    background: gray;

    color: white;
    font-size: 40px;
    text-align: center;
}

/* Image styling on the front div container */
#frontImage {
    background: url(../img/super-mario-bros.jpg) no-repeat;
    background-size: 250px;
    width: 250px;
    margin: 10% 10%;
}


/* Image styling on the front div container when user wins game */
#bossImage {
    background: url(../img/like-a-boss.gif) no-repeat;
    background-size: 250px;
    width: 250px;
    margin: 10% 10%;
}

/* The back div. Had to push it to the back and add image of Mario. */
#back {
    -webkit-transform: rotateY(180deg) translateZ(100px);
    -moz-transform: rotateY(180deg) translateZ(100px);
    -ms-transform: rotateY(180deg) translateZ(100px);
    -o-transform: rotateY(180deg) translateZ(100px);
    transform: rotateY(180deg) translateZ(100px);
    background: url(../img/background-mario.jpg);
    background-size: 100% 100%;
}

/* The left div styling to connect the front and back. Added a background GIF of Super Mario walking. */
#left {
    -webkit-transform: rotateY(-90deg) translateX(-100px);
    -moz-transform: rotateY(-90deg) translateX(-100px);
    -ms-transform: rotateY(-90deg) translateX(-100px);
    -o-transform: rotateY(-90deg) translateX(-100px);
    transform: rotateY(-90deg) translateX(-100px);

    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    -o-transform-origin: left;

    background: url(../img/super-mario-walking.gif);
    background-size: 100% 100%;
}

/* The right div styling: The one that contains the login form. */
#right {
    -webkit-transform: rotateY(90deg) translateX(100px);
    -moz-transform: rotateY(90deg) translateX(100px);
    -ms-transform: rotateY(90deg) translateX(100px);
    -o-transform: rotateY(90deg) translateX(100px);
    transform: rotateY(90deg) translateX(100px);

    -webkit-transform-origin: right;
    -moz-transform-origin: right;
    -ms-transform-origin: right;
    -o-transform-origin: right;
    transform-origin: right;

    background: #CCCCCC;
}

/* The top div styling. Contains a gif of clouds moving. */
#top {
    -webkit-transform: rotateX(-90deg) translateY(-200px);
    -moz-transform: rotateX(-90deg) translateY(-200px);
    -ms-transform: rotateX(-90deg) translateY(-200px);
    -o-transform: rotateX(-90deg) translateY(-200px);
    transform: rotateX(-90deg) translateY(-200px);

    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;

    background: url(../img/clouds-in-box.gif);
    background-size: 100% 100%;
}

/* The bottom div container styling. Contains an image of bricks to represent the ground.*/
#bottom {
    -webkit-transform: rotateX(90deg) translateY(200px);
    -moz-transform: rotateX(90deg) translateY(200px);
    -ms-transform: rotateX(90deg) translateY(200px);
    -o-transform: rotateX(90deg) translateY(200px);
    transform: rotateX(90deg) translateY(200px);

    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;

    /* Image repeats x and y to fill in the div */
    background: url(../img/ground-brick.jpg);
}

/* The bottom div container styling. Contains an image of bricks to represent the ground.*/
#bottom-sudoku {
    -webkit-transform: rotateX(90deg) translateY(200px);
    -moz-transform: rotateX(90deg) translateY(200px);
    -ms-transform: rotateX(90deg) translateY(200px);
    -o-transform: rotateX(90deg) translateY(200px);
    transform: rotateX(90deg) translateY(200px);

    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
}

#bottom-sudoku img {
    width: 80%;
    display: block;
    margin: 10% auto;
}

/* The login form styling */
#login {
    padding: 10px 0 0 10px;
    font-size: 10px;
}

/* Styling for the Login Form header */
#login > form > p:first-child {
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
    width: 250px;
}

/* Styling for all of the input tags */
input {
    font-family: inherit;
    font-size: 7px;
    padding: 10px;
}

/* Added a margin so that the input fields will go on the next line without a <br /> tag */
label {
    margin-right:100px;
}

/* Styling for text on front div */
#front > div:nth-child(2) {
    font-size: 12px;
    margin-top: 60%;
}

/* Remove some of the bottom margin from p tag displaying the first project member's name */
#front > div > p:nth-child(2) {
    margin-bottom: -10px;
}

/* Rotates the box along the x, y and z axis */
@keyframes rotate {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        -ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        -o-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

/**********************************************************************************************************************/
/* Small Box: Inside Large Box                                                                                        */
/**********************************************************************************************************************/

/* All divs within the internal box will have a pulsating question mark as the background and be 50px x 50px in size */
.internalBox {
    background: url(../img/question-mark-block.gif);
    background-size: 100% 100%;

    height: 50px !important;
    width: 50px !important;
}

/* Styling for the internal box > front div */
#internalFront {
    -webkit-transform: translateX(120px) translateY(120px) translateZ(60px);
    -moz-transform: translateX(120px) translateY(120px) translateZ(60px);
    -ms-transform: translateX(120px) translateY(120px) translateZ(60px);
    -o-transform: translateX(120px) translateY(120px) translateZ(60px);
    transform: translateX(120px) translateY(120px) translateZ(60px);
}

/* Styling for the internal box > back div */
#internalBack {
    -webkit-transform: translateX(120px) translateY(120px) translateZ(10px);
    -moz-transform: translateX(120px) translateY(120px) translateZ(10px);
    -ms-transform: translateX(120px) translateY(120px) translateZ(10px);
    -o-transform: translateX(120px) translateY(120px) translateZ(10px);
    transform: translateX(120px) translateY(120px) translateZ(10px);
}

/* Styling for the internal box > left div */
#internalLeft {
    -webkit-transform: rotateX(-90deg) translateX(120px) translateY(-35px) translateZ(95px);
    -moz-transform: rotateX(-90deg) translateX(120px) translateY(-35px) translateZ(95px);
    -ms-transform: rotateX(-90deg) translateX(120px) translateY(-35px) translateZ(95px);
    -o-transform: rotateX(-90deg) translateX(120px) translateY(-35px) translateZ(95px);
    transform: rotateX(-90deg) translateX(120px) translateY(-35px) translateZ(95px);

    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    -o-transform-origin: left;
    transform-origin: left;
}

/* Styling for the internal box > right div */
#internalRight {
    -webkit-transform: rotateX(-90deg) translateX(120px) translateY(-35px) translateZ(145px);
    -moz-transform: rotateX(-90deg) translateX(120px) translateY(-35px) translateZ(145px);
    -ms-transform: rotateX(-90deg) translateX(120px) translateY(-35px) translateZ(145px);
    -o-transform: rotateX(-90deg) translateX(120px) translateY(-35px) translateZ(145px);
    transform: rotateX(-90deg) translateX(120px) translateY(-35px) translateZ(145px);

    -webkit-transform-origin: right;
    -moz-transform-origin: right;
    -ms-transform-origin: right;
    -o-transform-origin: right;
    transform-origin: right;
}

/* Styling for the internal box > top div */
#internalTop {
    -webkit-transform: rotateY(-90deg) translateX(35px) translateY(120px) translateZ(-145px);
    -moz-transform: rotateY(-90deg) translateX(35px) translateY(120px) translateZ(-145px);
    -ms-transform: rotateY(-90deg) translateX(35px) translateY(120px) translateZ(-145px);
    -o-transform: rotateY(-90deg) translateX(35px) translateY(120px) translateZ(-145px);
    transform: rotateY(-90deg) translateX(35px) translateY(120px) translateZ(-145px);

    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
}

/* Styling for the internal box > bottom div */
#internalBottom {
    -webkit-transform: rotateY(-90deg) translateX(35px) translateY(120px) translateZ(-95px);
    -moz-transform: rotateY(-90deg) translateX(35px) translateY(120px) translateZ(-95px);
    -ms-transform: rotateY(-90deg) translateX(35px) translateY(120px) translateZ(-95px);
    -o-transform: rotateY(-90deg) translateX(35px) translateY(120px) translateZ(-95px);
    transform: rotateY(-90deg) translateX(35px) translateY(120px) translateZ(-95px);

    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
}

/**********************************************************************************************************************/
/* Super Mario Background                                                                                             */
/**********************************************************************************************************************/

/* Each block is 100px x 100px in size and has a brick background */
.block {
    width: 100px;
    height: 100px;
    background: url(../img/regular-brick-block.png) 100%;
    position: absolute;
    bottom: 350px;
}

/* Moving the first block in to correct position */
#blockOne {
    left: 250px;
}

/** Submit button within question mark block */
#blockOne a {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* Moving the seconds block in to correct position */
#blockTwo {
    left: 350px;
}

/* Moving the third block in to correct position */
#blockThree {
    left: 550px;
}

/* Styling the pulsating question mark block that's located between brick block 2 and 3 */
#questionMarkBlock {
    width: 100px;
    height: 100px;
    background: url(../img/question-mark-block.gif);
    background-size: 100px 100px;
    position: absolute;
    bottom: 350px;
    left: 450px;
}

/** Submit button within question mark block */
#questionMarkBlock input {
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* Styling the small bushes */
.bushes {
    width: 508px;
    height:79px;
    background: url(../img/bushes.png) 100%;
    position: absolute;
    bottom: 120px;
    z-index: 0;
}

/* Position of second bushes added to screen */
#bushesTwo {
    left: 300px;
}

/* Styling for the hills on the screen */
.hill {
    width: 400px;
    height: 400px;
    background: url(../img/hill.png) no-repeat;
    background-size: 400px;
    position: fixed;
    bottom: -120px;
    left: 800px;
    z-index: 0;
}

/* Styling of the second hill on the screen */
#hillTwo {
    left: 1075px !important;
    background-size: 300px !important;
    bottom: -180px !important;
}

/*
 * Styling the ground. The ground consists of one brick that's repeated along the x and y axis.
 * The ground is always pinned to the bottom of the screen.
 */
#ground {
    position: absolute;
    bottom: 0;
    background: url(../img/ground-brick.jpg);
    width: 100%;
    height:120px;
}

/**********************************************************************************************************************/
/* Clouds                                                                                                             */
/**********************************************************************************************************************/

/*
 * Styling the large cloud going across the screen in the background
 * The large cloud is the one furthest in the back
 */
#cloudLarge {
    width: 400px;
    height:400px;
    background: url(../img/cloud-large.png) no-repeat;
    background-size: 400px;
    position: fixed;
    bottom: 420px;
    left: 100px;
    z-index: -1000;
    -webkit-animation: move-large-cloud 25s linear infinite;
    animation: move-large-cloud 25s linear infinite;
    -o-animation: move-large-cloud 25s linear infinite;
}

/*
 * Styling the small cloud going across the screen in the background
 * The small cloud is the second furthest object in the background: in front of large cloud but behind rotating cube
 */
#cloudSmall {
    width: 300px;
    height:300px;
    background: url(../img/cloud-small.png) no-repeat;
    background-size: 300px;
    position: fixed;
    bottom: 420px;
    left: 1300px;
    z-index: -900;

    -webkit-animation: move-small-cloud 45s linear infinite;
    animation: move-small-cloud 45s linear infinite;
    -o-animation: move-small-cloud 45s linear infinite;
}

/* Moves the large cloud from right to left */
@-moz-keyframes move-large-cloud {
    0%   { -moz-transform: translateX(500%); }
    100% { -moz-transform: translateX(-175); }
}
@-webkit-keyframes move-large-cloud {
    0%   { -webkit-transform: translateX(500%); }
    100% { -webkit-transform: translateX(-175%); }
}

/* Moves the small cloud from left to right */
@-moz-keyframes move-small-cloud {
    0%   { -moz-transform: translateX(200%); }
    100% { -moz-transform: translateX(-500); }
}
@-webkit-keyframes move-small-cloud {
    0%   { -webkit-transform: translateX(200%); }
    100% { -webkit-transform: translateX(-500%); }
}

/**********************************************************************************************************************/
/* Super Mario Tube                                                                                                   */
/**********************************************************************************************************************/

/* The top container of the green tube */
#topTube {
    position: fixed;
    height: 100px;
    width: 200px;
    bottom: 300px;
    background: #00ab13;
    left: 1500px;
    border: 7px solid #005e04;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    border-radius: 5%;
}

/* What all of the internal divs of the top tube have in common */
.topTubeDivs {
    height: 100px;
    float: left;
}

/* Styling the first internal top tube div */
#topTube > #topOne {
    width: 30px;
    background: #00820e;
}

/* Styling the second internal top tube div */
#topTube > #topTwo {
    width: 10px;
    background: #00a112;
}

/* Styling the third internal top tube div */
#topTube > #topThree {
    width: 5px;
    background: #00820e;
}

/* Styling the fourth internal top tube div */
#topTube > #topFour {
    width: 70px;
    background: #00b114;
}

/* Styling the fifth internal top tube div */
#topTube > #topFive {
    width: 35px;
    background: #00d818;
}

/* Styling the sixth internal top tube div */
#topTube > #topSix {
    width: 10px;
    background: #00b114;
}

/* Styling the seventh internal top tube div */
#topTube > #topSeven {
    width: 20px;
    background: #00d818;
}

/* Styling the eight internal top tube div */
#topTube > #topEight {
    width: 20px;
    background: #00c616;
}

/* The bottom container of the green tube */
#bottomTube {
    position: fixed;
    height: 173px;
    width: 143px;
    bottom: 120px;
    background: #00ab13;
    left: 1525px;
    border: 7px solid #005e04;
    border-left: 14px solid #005e04;
}

/* What all of the internal divs of the top tube have in common */
.bottomTubeDivs {
    height: 173px;
    float: left;
}

/* Styling the first internal bottom tube div */
#bottomTube > #bottomOne {
    width: 30px;
    background: #00820e;
}

/* Styling the second internal bottom tube div */
#bottomTube > #bottomTwo {
    width: 10px;
    background: #00a112;
}

/* Styling the third internal bottom tube div */
#bottomTube > #bottomThree {
    width: 5px;
    background: #00820e;
}

/* Styling the fourth internal bottom tube div */
#bottomTube > #bottomFour {
    width: 35px;
    background: #00b114;
}

/* Styling the fifth internal bottom tube div */
#bottomTube > #bottomFive {
    width: 25px;
    background: #00d818;
}

/* Styling the sixth internal bottom tube div */
#bottomTube > #bottomSix {
    width: 10px;
    background: #00b114;
}

/* Styling the seventh internal bottom tube div */
#bottomTube > #bottomSeven {
    width: 20px;
    background: #00d818;
}

/**********************************************************************************************************************/
/* Coin and Block Movement                                                                                            */
/**********************************************************************************************************************/

/* The coin above the question mark block is initially hidden */
#questionMarkCoin {
    display: none;
}

/* When the visitor clicks on the question mark block, the coin appears and moves up */
#questionMarkBlock:active > #questionMarkCoin {
    display: block;
    position: absolute;
    bottom: 50px;
    left: 25px;
    background: url(../img/coin.gif) no-repeat;
    background-size: 50px;
    width: 100%;
    height: 120px;

    -webkit-animation: coin-move 0.25s linear infinite;
    animation: coin-move 0.25s linear infinite;
    -o-animation: coin-move 0.25s linear infinite;
}

/* Causes the coin to move once the question mark is clicked */
@-moz-keyframes coin-move {
    0%   { -moz-transform: translateY(0%); }
    100% { -moz-transform: translateY(-50%); }
}
@-webkit-keyframes coin-move {
    0%   { -webkit-transform: translateY(0%); }
    100% { -webkit-transform: translateY(-50%); }
}

/* The blocks move on click */
#questionMarkBlock:active,
.block:active {
    -webkit-animation: block-move 0.1s linear infinite;
    animation: block-move 0.1s linear infinite;
    -o-animation: block-move 0.1s linear infinite;
}

/* Causes the blocks to move on click */
@-moz-keyframes block-move {
    0%   { -moz-transform: translateY(0%); }
    100% { -moz-transform: translateY(-10%); }
}
@-webkit-keyframes block-move {
    0%   { -webkit-transform: translateY(0%); }
    100% { -webkit-transform: translateY(-10%); }
}

/**********************************************************************************************************************/
/* Super Mario Running                                                                                                */
/**********************************************************************************************************************/

/* Animated GIF of Super Mario himself running across the screen */
#superMarioRunning {
    position: fixed;
    bottom: 120px;
    background: url(../img/super-mario-running.gif) no-repeat;
    background-size: 200px;
    width: 100%;
    height: 200px;

    /* Mario needs to appear in front of the bushes and hills */
    z-index: 99;

    -webkit-animation: run-mario 5s linear infinite;
    animation: run-mario 5s linear infinite;
    -o-animation: run-mario 5s linear infinite;
}

/* Mario running across the screen and jumping over the pipe */
@-moz-keyframes run-mario {
    0%   { left: -300px; bottom: 116px; }
    60%  { left: 1200px; bottom: 116px; }
    75%  { left: 1440px; bottom: 500px; }
    100% { left: 1920px; bottom: 300px; }
}
@-webkit-keyframes run-mario {
    0%   { left: -300px; bottom: 116px; }
    60%  { left: 1200px; bottom: 116px; }
    75%  { left: 1440px; bottom: 500px; }
    100% { left: 1920px; bottom: 300px; }
}

/**********************************************************************************************************************/
/* Score                                                                                                              */
/**********************************************************************************************************************/

/* The top left portion of the screen containing what looks like a score and additional details */
#superMarioScore {
    color: white;
    position: fixed;
    bottom: 93%;
    left: 20px;
}

/* The score coin that's located next to the "number of lives" */
#scoreCoin {
    background: url(../img/score-coin.png) 100% no-repeat;
    width: 40px;
    height: 15px;
    display: inline-block;
    margin-right: -10px;
    margin-left: -20px;
}

/**********************************************************************************************************************/
/* Top Right Information                                                                                              */
/**********************************************************************************************************************/

/* Some additional information about the web-page located in the top right corner */
#topRightInfo {
    color: white;
    position: fixed;
    bottom: 93%;
    right: 20px;
    text-align: right;
}

/* Styling the p tag within the top two informational containers */
#superMarioScore > p,
#topRightInfo > p {
    margin-bottom: -2px;
    margin-top: 0;
}

/**********************************************************************************************************************/
/* Navigation for Logged in Users                                                                                     */
/**********************************************************************************************************************/

/* Page font is too large for navigation */
nav {
    font-size: smaller !important;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

nav li {
    float: left;
}

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

nav li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

nav li.dropdown {
    display: inline-block;
}

nav .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    z-index: 1;
}

nav .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

nav .dropdown-content a:hover {
    background-color: #f1f1f1;
}

nav .dropdown:hover .dropdown-content {
    display: block;
}

nav ul > li.right {
    float: right;
}

/**********************************************************************************************************************/
/* Setting the layout for logged in users                                                                             */
/**********************************************************************************************************************/
#wrapper {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    width: 70%;
    padding: 20px;
    margin: 2% auto;
    background-color: white;
}

/**********************************************************************************************************************/
/* Tic Tac Toe styling                                                                                                */
/**********************************************************************************************************************/
#tic-tac-toe table {
    width:100%;
    height:100%;
    border-collapse: collapse;
}
#tic-tac-toe table td {
    border: 1px solid black;
    padding: 0;
}
#tic-tac-toe table tr:first-child td {
    border-top: 0;
}
#tic-tac-toe table tr:last-child td {
    border-bottom: 0;
}
#tic-tac-toe table tr td:first-child{
    border-left: 0;
}
#tic-tac-toe table tr td:last-child {
    border-right: 0;
}

#tic-tac-toe table tr td input {
    width: 76%;
    font-size: 58px;
}

/**********************************************************************************************************************/
/* Contact Page                                                                                                       */
/**********************************************************************************************************************/
#contact li {
    padding: 10px;
}

/**********************************************************************************************************************/
/* News Page                                                                                                          */
/**********************************************************************************************************************/
.author {
    font-size: smaller;
}

.news {
    padding: 10px;
}

.alternating-color {
    background-color: #F0F0F0 !important;
    color: #000000 !important;
}

/**********************************************************************************************************************/
/* Admin News Page                                                                                                    */
/**********************************************************************************************************************/

.admin-news-form label {
    display: inline-block;
    width: 130px;
}

.admin-news-form p > input {
    width: 300px;
    font-size: medium !important;
}

#submit_button {
    margin-left: 233px;
    width: 100px !important;
    font-size: medium !important;
}

#article {
    width: 500px;
    height: 150px;
}

/**********************************************************************************************************************/
/* Admin Messages Page                                                                                                */
/**********************************************************************************************************************/
.admin-messages-form label {
    display: inline-block;
    width: 130px;
}

.admin-messages-form p > select {
    padding: 5px;
    font-size: medium !important;
}

#message {
    width: 500px;
    height: 150px;
}

/**********************************************************************************************************************/
/* Admin Users Page                                                                                                   */
/**********************************************************************************************************************/
.admin-users span {
    display: inline-block;
    width: 200px;
}

.admin-users input {
    font-size: smaller;
}

/**********************************************************************************************************************/
/* User Form                                                                                                          */
/**********************************************************************************************************************/
.user-form label {
    display: inline-block;
    width: 130px;
}

.user-form p > input {
    width: 300px;
    font-size: medium !important;
}

/**********************************************************************************************************************/
/* Register Form                                                                                                      */
/**********************************************************************************************************************/
.register-form label {
    display: inline-block;
    width: 130px;
}

.register-form p > input {
    width: 300px;
    font-size: medium !important;
}

.register-form p > select {
    padding: 10px;
    font-size: medium !important;
}

/**********************************************************************************************************************/
/* Sudoku puzzle on main page styling                                                                                 */
/**********************************************************************************************************************/
#sudoku table {
    width:100%;
    height:100%;
    border-collapse: collapse;
}
#sudoku table td {
    border: 1px solid black;
    padding: 0;
}
#sudoku table tr:first-child td {
    border-top: 0;
}
#sudoku table tr:last-child td {
    border-bottom: 0;
}
#sudoku table tr td:first-child{
    border-left: 0;
}
#sudoku table tr td:last-child {
    border-right: 0;
}

#sudoku table tr td input {
    width: 24px;
    padding: 1px !important;
    font-size: 18px;
}

/**********************************************************************************************************************/
/* Sudoku puzzle on sudoku page styling                                                                               */
/**********************************************************************************************************************/
#sudoku-page {
    width: 30%;
    margin: 0 auto;
}

#sudoku-page table {
    width:100%;
    height:100%;
    border-collapse: collapse;
}
#sudoku-page table td {
    border: 1px solid black;
    padding: 0;
}
#sudoku-page table tr:first-child td {
    border-top: 0;
}
#sudoku-page table tr:last-child td {
    border-bottom: 0;
}
#sudoku-page table tr td:first-child{
    border-left: 0;
}
#sudoku-page table tr td:last-child {
    border-right: 0;
}

#sudoku-page table tr td input {
    width: 25px;
    font-size: 25px;
}

#sudoku-button {
    width: 150px !important;
    font-size: medium !important;
}

#sudoku-page button {
    width: 150px !important;
    padding: 10px;
    font-size: medium !important;
}