body,
html {
	margin:0;
	padding:0;
	color:#000;
	background: white;
}
hr {
    height: 3px;
    color: black;
    background: black;
    font-size: 0;
    border: 0;
}

#wrap {
	width:790px;
	margin:0 auto;
	background:#white;
}
#header {
background:white;
height: 130px;
text-align: center;
}

#headerbox{
margin-top:15px; 
width:800px;
height: 57px;
background:white;
margin-left: auto;
margin-right: auto;
}

#header a:link {
text-decoration:none;
color: white;
font-size:14px;
font-weight:bold;
font-family: futura, arial, sans serif;
}
#header a:visited {
text-decoration:none;
color: white;
font-size:14px;
font-weight:bold;
font-family: futura, arial, sans serif;
}
#header a:hover {
text-decoration:none;
color: lightgreen;
font-size:14px;
font-weight:bold;
font-family: futura, arial, sans serif;
}
#header a:active {
text-decoration:none;
color: lightgreen;
font-size:14px;
font-weight:bold;
font-family: futura, arial, sans serif;
}

#menubox{
float:left;
background:white;
width: 300px;
}

#tablebox{
float:right;
background:white;
padding:12px 20px 5px 20px;
width: 440px;

}

#tablemenu
{
	background: #003300;
	border-collapse: collapse;
	text-align: left;
	color:white;
}
#tablemenu td
{
	border-width:3px;
	padding: 2px 4px 2px 4px;
	border-style:solid;
	border-color:white;
}
.drawformtd {
	background:#2E8A2E;
}

#bottombox {
float:bottom;
width:800px;
margin-left: auto;
margin-right: auto;
}

#infobox {
margin-top:10px;
padding:10px 10px 5px 10px;
width:700px;
height: 30px;
background:#f0f0f0;
margin-left: auto ;
margin-right: auto ;
font-size:12px;
color: #003300;

border-style: solid;
border-color: #003300;
border-width: 1px;
font-family: futura, arial, sans serif;
}
#formationspread {
text-align: center;
background:lightblue;

}
#main {
float:right;
width:500px;
height:780px;
background:white;
padding: 20px 10px 4px 10px;  
font-size:14px;
font-family: verdana, arial, sans serif;
}
#sidebar {
float:left;
width:250px;

font-size:10px;
font-family: verdana, arial, sans serif;
background:#white;  /*should be the same as wrap*/
}

#footer {
clear:both;
font-size:10px;
font-family: verdana, arial, sans serif;
background:#ffffff;
}
.readonly {
border-style: none;
color:darkgrey; 
width: 40px;
height: 34px;
font-size:14px;
background:white;  /*should be the same as wrap*/
padding-left: 1px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
font-family: verdana, arial, sans serif;
text-align: center;
}
/*
canvas { 
background:url(field.jpg)
}*/
#shirtCanvas {
	margin-left: 20px;

}
.styled-button {
	background:#f0f0f0;
	background:-moz-linear-gradient(top,#f0f0f0 0%,#ffffff 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f0f0f0),color-stop(100%,#ffffff));
	background:-webkit-linear-gradient(top,#f0f0f0 0%,#ffffff 100%);
	background:-o-linear-gradient(top,#f0f0f0 0%,#ffffff 100%);
	background:-ms-linear-gradient(top,#f0f0f0 0%,#ffffff 100%);
	background:linear-gradient(top,#f0f0f0 0%,#ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0',endColorstr='#ffffff',GradientType=0);
	padding:8px 13px;
	color:#000000;
	font-family: verdana, arial, sans serif;
	font-size:14px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #505050
}
.styled-button:hover {
color: darkgrey; 
}

.styled-button:active {
    color: lightgrey; 
    background:#ffffff;
    border:1px solid #ffffff
}

.styled {
font-size:14px;
padding-left: 1px;
height: 25px;
border-style: solid;
border-color: lightgrey;
border-width: 1px;
font-family: verdana, arial, sans serif;
padding-left: 1px;
}

.description {
width:250px;
font-size:14px;
padding-left: 1px;
height: 25px;
border-style: solid;
border-color: lightgrey;
border-width: 1px;
font-family: verdana, arial, sans serif;
padding-left: 1px;
}



.formationDisplay {
border-style: none;
color: #4F4F4F; 
width: 80px;
height: 20px;
margin-left: 15px;
font-size:16px;
background:white;  /*should be the same as wrap*/
padding-left: 1px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
font-family: verdana, arial, sans serif;
text-align: center;
}
#menu li:hover a ~ .formationDisplay {  
    color: lightblue;  
 
}  
.formationPick:active ~ .formationDisplay {  
    color: lightblue;  
 
}  

.formationPick {
border-style: none;
color: black; 
width: 100px;
height: 30px;
margin-left: 15px;
font-size:16px;
background:white;  /*should be the same as wrap*/
padding-left: 1px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
font-family: verdana, arial, sans serif;
text-align: center;
}


.textcolor {
	margin-left:50px;
	font-size:14px;
	padding-left: 1px;
	height: 25px;
	font-family: verdana, arial, sans serif;
	padding-left: 1px;  
}
.textdisplay {
border-style: none;
color: black; 
width: 100px;
height: 30px;
font-size:14px;
background:white;  /*should be the same as wrap*/
padding-left: 1px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
font-family: verdana, arial, sans serif;
text-align: center;
}
.textdisplay:hover {
color: darkgrey; 
}

.textdisplay:active {
    color: lightblue; 
}


.formationPick:hover {
color: lightblue; 
}

.formationPick:active {
    color: red; 
}



#menu {
	float:top;  
	list-style: none;
	width: 220px;
	margin: 10px auto 5px auto;
	height: 70px;
	padding 5px 5px 0px 5px;
	background:white;  /*should be the same as wrap*/
	
  
}
#menu li {  
    float:left;  
    display:block;  
    text-align:left;  
    position:relative;  
    padding: 4px 10px 4px 10px;  
    margin-right:30px;  
	margin-top:15px;  
    border:none;  
}  

#menu li:hover {  
    /*border: 1px solid #777777;  
    padding: 4px 9px 4px 9px;  
      
    /* Background color and gradients */  
      
    background: white; 
    
}  

#menu li a {  
    font-size:14px;
	padding-left: 1px;
	height: 25px;
	font-family: verdana, arial, sans serif;
	padding-left: 1px;  

}
#menu li:hover a {  
    color: lightblue;  
    text-shadow: 1px 1px 1px #FFFFFF;  
}  

.dropdown {  
    margin:0px auto;  
    float:left;  
    position:absolute;  
    left:-999em; /* Hides the drop down */  
    text-align:left;  
    padding:0px 5px 0px 5px;  
	/*border:1px solid #777777;  */
      
    background:white;  
    
  
    /* Rounded Corners */  
    -moz-border-radius: 0px 5px 5px 5px;  
    -webkit-border-radius: 0px 5px 5px 5px;  
    border-radius: 0px 5px 5px 5px;  
}  
  
.dropdown {width: 150px;}  

.col2 {  
    display:inline;  
    float: left;  
    padding:0px 5px 0px 5px;  
    position: relative;  
    line-height: 140%;
    margin-left: 5px;  
    margin-right: 5px; 
    font-size:12px;
	background:white;  /*should be the same as wrap*/
	padding-left: 1px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
	font-family: verdana, arial, sans serif;
	text-align: center; 
}  
.col2 {width:260px;}  

#shirtmenu {
	float:top;  
	list-style: none;
	font-size:14px;
	width: 220px;
	margin: 10px auto 5px auto;
	height: 80px;
	padding 5px 5px 0px 5px;
	background:white;  /*should be the same as wrap*/
	
  
}
#shirtmenu li {  
    float:left;  
    display:block;  
    text-align:left;  
    position:relative;
    font-size:14px;  
    padding: 4px 10px 4px 10px;  
    margin-right:30px;  
	margin-top:15px;  
    border:none;  
}  

#shirtmenu li:hover {  
    /*border: 1px solid #777777;  
    padding: 4px 9px 4px 9px;  
      
    /* Background color and gradients */  
      
    background: white; 
    
}  

#shirtmenu li a { 
	float:top; 
    font-size:14px;
	padding-left: 1px;
	height: 25px;
	font-family: verdana, arial, sans serif;
	padding-left: 1px;  

}
#shirtmenu li:hover a {  
    color: lightblue;  
    text-shadow: 1px 1px 1px #FFFFFF;  
}  


.dropdownSC {  
    margin:0px auto;  
    float:left;  
    position:absolute;  
    left:-999em; /* Hides the drop down */  
    text-align:left;  
    padding:0px 5px 0px 5px;  
	/*border:1px solid #777777;  
      */
    background:white;  
    
  
    /* Rounded Corners */  
    -moz-border-radius: 0px 5px 5px 5px;  
    -webkit-border-radius: 0px 5px 5px 5px;  
    border-radius: 0px 5px 5px 5px;  
}  
  
.dropdownSC {width: 400px;  height: 170px;}  

.col3 {  
    display:inline;  
    float: left;  
    padding:0px 5px 0px 5px;  
    position: relative;  
    line-height: 140%;
    margin-left: 5px;  
    margin-right: 5px; 
    font-size:14px;
	background:white;  /*should be the same as wrap*/
	padding-left: 1px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
	font-family: verdana, arial, sans serif;
	text-align: center; 
}  
.col3 {width:460px;}  


.brighten img {
	float:left;
  /*-webkit-filter: brightness(0.2);*/
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;
}
 
.brighten img:hover {
  -webkit-filter: grayscale(20%);
}



.col2 {  
    display:inline;  
    float: left;  
    padding:0px 5px 0px 5px;  
    position: relative;  
    line-height: 140%;
    margin-left: 5px;  
    margin-right: 5px; 
    font-size:12px;
	background:white;  /*should be the same as wrap*/
	padding-left: 1px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
	font-family: verdana, arial, sans serif;
	text-align: center; 
}  
.col2 {width:260px;}