body {

  font-family: 'Open Sans', sans-serif;
  font-size: 3em;
  color: white;
  padding: 1%;
  background-color: DarkOrange;

}

h1 {

    font-family: 'Anton', sans-serif;
    font-size: 2.5em;
}

th {
         text.algin=left;
         }

.table {
         font-size: 0.55em;
         padding: 0;
         border-width: 0;

         }

#header {
                font-family: 'Anton', sans-serif;


                padding:10px;
                font-size: 1.5em;
                line-height: 1;
                text-align: center;

        }
#content {
                margin:10px;
                padding-bottom:10px;
                border-color: green;
                border-width: 1px;
                border-style: hidden;
        }
#content div {

                float:left;
                border-color: green;
                border-width: 1px;
                border-style: hidden;
        }
#players {
                width:25%;

        }


#main {
                text-align: center;
                width:50%;
                height:50%
        }

.clearfix {
                    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
          }



#playerAdd {

                padding-top: 19;
                margin-top:none
                float: none;
                width:100%;
                font-family: 'Anton', sans-serif;
                font-size: 0.8em;
                line-height: 0.8;
           }

#game {
                text-align: center;
                float: none;
                width:100%
                ;

           }
#spacer {       width:15%;
                height:100%

        }

#turn {

                padding-top: 3;
                margin: 0;
                font-family: 'Anton', sans-serif;
                font-size: 0.8em;
                float: none;
                width:70%;
           }
#picto {
                text-align: center;
                font-size: 0.55em;
                float: none;
                width:70%;
                height:35%;
       }

#bonus {
                text-align: center;
                font-size: 0.55em;
                width: 70%;
       }

#taskWindow {
                text-align: center;
                font-size: 0.55em;
                float: none;
                width:70%;
                height:35%;
           }

#task {
                text-align: center;
                float: none;
                width:100%;
           }

#value {
                font-style: italic;
                text-align: center;
                float: none;
                width:100%;
           }


#newTask {
                text-align: center;
                float: none;
                width:70%;
           }

#yeeha {
                text-align: center;
                float: none;
                width:70%;
           }



#done {
                text-align: center;
                float: none;
                width:70%;

           }


#footer {
                position:absolute; position:fixed; bottom:0;
                clear:both;
                margin: 0 auto
                padding:10px;
                background-color: DarkOrange;
                width:100%;
                text-align: center

        }

#playersButton {

                display: inline-block; vertical-align: top;


                width:7%;
        }

#optionsButton {

                display: inline-block; vertical-align: top;


                width:7%;
        }



#options {

                clear:both;
                margin: 0 auto
                padding:10px;
                font-size: 0.666em;
                width:100%;
                height:
                text-align: center

        }

#musicButton {

                display: inline-block; vertical-align: top;
                padding:10px;

                width:7%;
        }

.headline{
                font-family: 'Anton', sans-serif;
                font-size: 1.5em;
    }
.subhead{
                font-family: 'Pacifico', cursive;
                font-size: 1em;
    }

input[type=text] {
    width: 60%;
    padding:1em 23px;
    margin: 8px 0;
    border: none;
    font-size: 0.5em;
}

.addButton {
        background-color:#ff2200;
        width: 20%;
        border:none;
        cursor:pointer;
        color:#ffffff;
        font-family: 'Open Sans', sans-serif;
        font-weight:bold;
        padding:1em 0;
        text-decoration:none;
        font-size: 0.5em;
}
.addButton:hover {
        background-color:#b34332;
}
.addButton:active {
        position:relative;
        top:1px;
}

#readyButton {
        background-color:#00dd00;
        width: 82%;
        border:none;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family: 'Open Sans', sans-serif;
        font-weight:bold;
        padding:1em 0;
        text-decoration:none;
        font-size: 0.5em;
}
#readyButton:hover {
        background-color:#00bb00;
}
#readyButton:active {
        position:relative;
        top:1px;
     }
#taskButton {
        background-color:#00dd00;
        width: 100%;
        border:none;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family: 'Open Sans', sans-serif;
        font-weight:bold;
        padding:1em 0;
        text-decoration:none;
        font-size: 0.4em;
}
#taskButton:hover {
        background-color:#00bb00;
}
#taskButton:active {
        position:relative;
        top:1px;

          }

#yeehaButton {
        background-color:#00dd00;
        width: 100%;
        border:none;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family: 'Open Sans', sans-serif;
        font-weight:bold;
        padding:1em 0;
        text-decoration:none;
        font-size: 0.4em;
}
#yeehaButton:hover {
        background-color:#00bb00;
}
#yeehaButton:active {
        position:relative;
        top:1px;

          }


#doneButton {
        background-color:#00dd00;
        width: 50%;
        border:none;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family: 'Open Sans', sans-serif;
        font-weight:bold;
        padding:1.0em 0;
        text-decoration:none;
        font-size: 0.4em;
}
#doneButton:hover {
        background-color:#00bb00;
}
#doneButton:active {
        position:relative;
        top:1px;

          }

#nowayButton {
        background-color:#ff2200;
        width: 50%;
        border:none;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family: 'Open Sans', sans-serif;
        font-weight:bold;
        padding:1em 0;
        text-decoration:none;
        font-size: 0.4em;
}
#nowayButton:hover {
        background-color:#b34332;
}
#nowayButton:active {
        position:relative;
        top:1px;

          }

@media screen and (max-width: 800px)   {
    .main, #content div{
        width:100%;
        float:none;
    }  #spacer{
        height:0;
        float:none;
    }  #footer {
                position:static;  bottom:0;
                clear:both;
                margin: 0 auto
                width:100%;
                text-align: center
    }  #taskWindow {
                     height:auto;
                 }