html {
height: 100%;
overflow-y:scroll;
}

body {margin: 0 auto;
background-image: url(../art/pinstripe.jpg);
background-position: 50%;
background-repeat: repeat;
height: 100%;
width: 100%;
font-size: 16px;
}

.wrapper {
width: 60%;
margin: 0 auto;
background-color: rgb(180,0,0);
border-left: 1px solid black;
border-right: 1px solid black;
-moz-box-shadow: 0px -2px 15px #000;
-webkit-box-shadow: 0px -2px 15px #000;
box-shadow: 0px -2px 15px #000;
min-height: 100%
}

.logo{
margin: 0 auto;
display: block;
padding-top: 14px;
}

.redField {
margin: 0 auto;
text-align: center;
}

form {
margin: 0 auto;
}

form p {
text-align: center;
padding: 6px 0;
}

.theList {
display: block;
width: 320px;
margin: 0 auto 20px;
}

hr {
margin: 20px auto;
border: 0; 
border-bottom: 1px solid white;

}

.nickname {
color: #C0C0C0;
display: inline;
}

.submit {
background: none;
border: none;
outline:none;
background-image: url(../art/submitButton.png);
width: 120px;
height: 50px;
cursor: pointer;
}

.submit:hover {
background-position: 0 -50px;
}

h1{	
margin: 0;
padding: 0;
font-size: 3em;
color: black;
text-align: center;
font-family: 'Playball', verdana, arial, sans serif;
font-style: cursive;
font-weight: normal;
}

h2{	margin: 10px auto;
padding: 0;
color: black;
font-size: 2em;
text-align: center;
font-family: 'Federo', sans-serif;
font-weight: normal;
}

p{	
margin: 0;
padding: 0;
color: white;
font-size: .9em;
line-height: 1.3em;
text-transform: capitalize;
font-family: 'Questrial', verdana, arial, sans serif;
}


input {
text-align: center;
}

a {
display: block;
outline: 0;
margin: 10px auto;
padding: 0;
font-size: 2em;
text-align: center;
font-family: 'Gruppo', verdana, arial, sans serif;
}

a:link { 
text-decoration: none;
border: none;
color: white;
text-align: center;
margin: 10px auto;
}

a:visited { 
text-decoration: none;
border: none;
color: white;
text-align: center;
}

a:hover { 
text-decoration: none;
border: none;
color: black;
}

a:active { 
text-decoration: none;
border: none;
color: white;
text-align: center;
}

a:active, a:selected, a:visited { 
border: none;
outline: none;
}

/* ------------------------ Rules Sensitive to Screen Size -----------------------------*/


/*----------------------------- Phone Screen Rules -----------------------------*/
/* ---- 0px -  500px ---- */
@media screen and (min-width: 0em) and (max-width: 31.25em) {

.wrapper {
width: 100%;
}

.theList {
}

}

/*----------------------------- Small Screen Rules -----------------------------*/
/* ---- 501px -  600px ---- */
@media screen and (min-width: 31.3125em) and (max-width: 37.5em) {

.wrapper {
width: 80%;
}

.theList {
}

}

/*----------------------------- Medium Screen Rules -----------------------------*/
/* ---- 601px -  800px ---- */
@media screen and (min-width: 37.5625em) and (max-width: 50em) {

.wrapper {
width: 74%;
}

.theList {
}

}

/*----------------------------- Full Screen Rules -----------------------------*/
/* ---- 801px - 1100px ---- */
@media screen and (min-width: 50.0625em) and (max-width: 68.75em) {

.wrapper {
width: 70%;
}

.theList {
}

}