div.director {
	clear: both;
}

div.director img {
    height: 105px;
	width:  70px;
	float: left;
}

div.director p {
	margin: 0;
	padding: 0;
	white-space: nowrap;
}


div.director_container {
	display: inline-block;
}

div.logos { 
	height: 80px;
	float: left;
}

div.logos img { 
	height: 80px;
	margin-left: auto;
	margin-right: auto;
}


div.refinfo { 
	float: right;
}

div.refinfo p { 
	margin-top: 0;
}

div.header  {
    margin: 0px auto 0px auto;
	padding: 0px;
	clear: both;
}
div.header  p {
    margin: 0px auto 0px auto;
	padding: 0px;
}

div.footer p { 
	margin: 0;
	font-size: 12px;
}

div.teamname { 
	clear: both;
}


div.headshot { 
	display: table-cell;
	width: 72px;
	height: 108px;
	vertical-align: top;
	position: relative;
}

div.headshot img { 
	width:72px;
	height:108px;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}

div.headshot img.redx {
	width:72px;
	height:108px;
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
}

td.mgrlabel {
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	padding: 0px;
}


td.rosterblock  { 
	width: 72px;
	vertical-align: top;
	padding: 0;
	margin: 0;
}


td.shirtnum { 
	padding: 0px;
}

div.shirtnum { 
	height: 22px;
	font-size: 16px;
	padding: 0;
}
div.stats { 
	height: 10px;
	font-size: 8px;
}
td.checkoff {
	width: 22px;
	border: 1px;
	border-color: black;
	border-style: solid;
	padding: 0px;
}

td.rostername { 
	font-size: 10px;
	padding: 0;
}

td.rostername ul {
	padding-left: 10px;
	padding-top: 0;
	margin: 0;

}
td.rostername ul li {
	list-style: circle;
	font-size: 8px;
}


td.rosterID { 
	font-size: 10px;
	padding: 0;
}

h1 {
	margin: 0;
}

p.error { 
	color: red;
	font-size: 14px;
	font-weight: bold;
}

.content form.adminform  {
	margin: 10px;
	background-color: gray;
	border: 2px;
    display: block;
}


form.adminform li {
	padding: 0;
}

form.adminform p a {
	background-color: white;
}
li.suspended { 
	color: red;
}

tr.suspended td{ 
	color: red;
}

tr.inactive td{
	background-color: darkgrey;
}


p.rosterFooter {
	font-weight: bold;
	font-size: 14px;
}

p.footnote { 
	font-size: 10px;
	margin: 0px 10px 0px 10px;
	padding: 0;
}

div.adminform form table tbody tr th {
    text-align: right;
}

div.managers ul li {
    padding: 0px;
    margin: 0px;
    display: inline;
}

div.managers ul  {
    padding: 0px;
    margin: 0px;
    display: inline;
}

div.managers h3  {
    padding: 0px;
    margin: 0px;
    display: inline;
}

div.content h2.heading {
	padding-bottom: 0;
}

h3.heading {
	padding-top: 20px;
	margin-bottom: 0;
}



div.pagenav {
     width: 900px;
	 height: 40px;
	 padding: 5px 0 0;
	 background-color: blue;
	 font-size: 14px;
}


div.pagenav a.tabavail {
    float: left;
	padding: 10px 5px 10px 5px;
 	color: white;
	font-weight: bold;
	display: inline;
	border: 1px;
	border-color: white;
	margin-left: 3px;

}

div.pagenav p.tabselected, a.tabselected {
    float: left;
	padding: 10px 5px 10px 5px;
	margin-left: 3px;
	margin-right: 3px;
 	color: blue;
	font-weight: bold;
	display: inline;
	border: 1px;
	border-color: white;
	background-color: white;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}


@media (max-width:768px) {
	div.pagenav {
		width: 100%;
		max-width: 100%;
		display: flex;
		flex-wrap: wrap;
		height: auto;
		padding: .5em;
		box-sizing: border-box;
	}

	.div.pagenav a.tabavail {
		float: none;
	}

	.div.pagenav p.tabselected,
	a.tabselected {
		float: none;
		border-radius: 8px;
		padding: 8px 5px;
	}
}

#id_subject {
	width: 400px;
}

p.tight { 
	margin: 0;
	padding: 0;
}

td.phones { 
	width: 200px;
}

div.tight ul {
	margin-bottom: 0;
	padding-bottom: 0;
}

table.rosterlist tr td,th { 
	padding: 3px 3px 3px 3px;
}


div.NoWrap span {
    white-space: nowrap;
}

table.Suspensions tbody tr.odd {
    background-color: #DDD;
}
table.Suspensions tbody tr td {
    font-size: 16px;
	border-bottom: 2px solid black;
}

table.Suspensions tbody tr th {
	border-top: 2px solid black;
}

table.Suspensions tbody tr.Suspended td.susp2 p.status {
    background-color: red;
}

table.Suspensions tbody tr td.susp2 {
	width: 150px;
}
table.Suspensions tbody tr.Probation td.susp2 p.probationend { background-color: yellow }
table.Suspensions tbody tr.Suspended td.susp2 p.suspensionend { background-color: yellow }

table.Suspensions tbody tr {
	height: 100px;
}
td.susppic {
	padding: 0;
	height: 100px;
	vertical-align: bottom;
}
img.susppic {
	max-height: 100%;
	width: auto;
}

table.StateSuspensions tbody tr td.Suspended { color: red }
table.StateSuspensions tbody tr td.Probation { color: orange }

div.formcontainer {
    background-color: #EEEEEE;
    border-width: 2px;
    border-style: solid;
    border-color: black;
}


form.BetterForm fieldset legend {
	font-size: 20px;
}

table#bracketlist tbody tr td {
	border: none;
	font-size: 12px;
}

table#bracketlist tbody tr td.col3 {
	width: 150px;
}


table.teamstojoin tbody tr td {
	font-weight: normal;
}

table.teamstojoin tbody tr.odd td {
	background-color: lightgray;
}

table.teamstojoin tbody tr th  {
	border: 2px solid black;
}

table.teamstojoin {
	margin-top: 20px;
}

form.teampageform {
	display: flex;
}

form.teampageform input {
	display: inline-block;
	width: 180px;
	overflow: visible;
	white-space: normal;
	height: auto;
	margin: auto 10px auto 0;

}

div.buttonhelp {
	width: 600px;
	margin-left: 10px;
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
}

p.InviteWarning {
	color: red;
	font-weight: bold;
}

span.buttonhelp {
	width: 600px;
	margin-left: 10px;
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
}

table.contactlist tbody tr th {
	border-bottom: 1px solid black;
}

div.tabbedform {
	background-color: lightblue;
}

div#ZipcodeButton, div#TeamnameButton {
	display: inline-block;
	width: 200px;
	height: 40px;
}

div.tabs {
	height: 40px;
	background-color: white;
}
div#ZipcodeButton button {
	margin-left: 25px;
	margin-top: 10px;
}
div#TeamnameButton button {
	margin-left: 15px;
	margin-top: 10px;
}

/* was a fixed height:350px, left over from a since-removed tabbed UI (no template/JS
   references #TeamnameSearch/#TeamnameButton/#ZipcodeButton/.tabs any more). The zipcode
   search form (rosters/join.html) has 8 fields with wrapping help text and easily runs past
   350px, which pushed its "Search for Teams" button below the box's visible bottom -- let the
   box size to its content instead. */
div#ZipcodeSearch, div#TeamnameSearch { height: auto; }


p.structureleague {
	font-size: 20px;
	font-weight: bold;
}

li.structurebracket {
	font-size: 18px;
}

li.structurenew {
	font-size: 12px;
	font-weight: lighter;
}



ul.tree, ul.tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.tree ul {
	margin-left: 10px;
}

ul.tree li {
	margin-left: 10px;
	padding: 0 7px;
	line-height: 20px;
	color: #369;
	font-weight: bold;
	border-left:1px solid rgb(100,100,100);

}
ul.tree li:last-child {
	border-left:none;
}

ul.tree li:before {
	position:relative;
	top:-0.3em;
	height:1em;
	width:12px;
	color:white;
	border-bottom:1px solid rgb(100,100,100);
	content:"";
	display:inline-block;
	left:-7px;
}
ul.tree li:last-child:before {
	border-left:1px solid rgb(100,100,100);
}

ul.tree ul li:last-child {
	padding-bottom: 10px;
}