/* CSS Document */
html {
overflow-y: scroll;  /*keeps a vertical scroll bar to avoid page shifting on longer pages*/
}


	body
{
  border: solid purple 0px;
font-family: "Times New Roman", Times, serif;
	text-align: center;
  list-style-type:none;
  margin-left: auto;
	margin-right: auto;
  margin-bottom:5em;
  width:100%;
}

:focus {outline:none;}
::-moz-focus-inner {border:0;} /*Removes Firefox dotted lines on focus*/

/* unvisited link */
a:link {
text-decoration: none;
color: #000;
}
/* visited link */
a:visited {
text-decoration: none;
color: #000;
}
/* mouse over link */
a:hover {
text-decoration: none;
color: #000;
}
/* selected link */
a:active {
text-decoration: none;
color: #000;
}

#header{
  border: solid purple 0px;  
	margin-left: auto;
	margin-right: auto;
	margin-bottom:5em;
	max-width: 75em;
  min-width:100px;
}

#header H1{
font-size: 1.1em;
font-style: normal;
color: black;
}

#header a{
text-decoration: none;
}

#nav {

	margin-left: auto;
	margin-right: auto;
  padding: 2% 0 0 0;
  height:25px;
border: 0px solid black;
}

#nav img{  
border: 0px solid green;
}
.sub1 ul
{
list-style-type:none;
border: 0px solid green;
padding:0;
	margin-left: auto;
	margin-right: auto;
}
.sub1 li{
padding:0 0px 0 0px;     /* top right bottom left */
border: 0px solid pink;
}
.sub1 a
{
display: block;
width: 100%;
padding:3px 0px 3px 0px;     /*  top right bottom left */
border: 0px solid red;
}
.sub1 a:link
{
color: #000;
text-decoration: none;
}
.sub1 a:visited   {
color: #000;
text-decoration: none;
}
.sub1 a:hover
{
background-color: transparent;
color: #000;
}
.sub1 a:active   {
color: #000;
}

.content
{
  border: solid yellow 0px;
  margin-left: auto;
  margin-right: auto;
   min-width:100px;
   padding:0;
   font-size: 0.9em;
}

.panels{
  margin-left: auto;
  margin-right: auto;
	width:100%;
}

.tile { 

position: relative; 
width:96%;
padding:0 0px 0 0px;
margin: 0px 0% 40px 2%;
opacity:1;
}

@media only screen and (orientation: landscape) {
   .tile{    
              position: relative; 
              width:50%;
              padding:0 0px 0 0px;
              margin: 0px 0% 40px 25%;           
              opacity:1;}
}  

@media only screen and (min-width: 340px) {
   .tile{    border: solid green 0px;
              position: relative; 
              display:inline;
              float:left;
              width:47%;
              padding:0;
              margin: 0px 0px 40px 2%; }
}  
@media only screen and (min-width: 768px) {
   .tile{    border: solid green 0px;
              position: relative; 
              display:inline;
              float:left;
              width:30%;
              padding:0;
              margin: 0px 0px 40px 2.5%; }
} 
@media only screen and (min-width: 1280px) {
   .tile{    
              position: relative; 
              display:inline;
              float:left;
              width:22%;
              padding:0;
              margin: 0px 0px 20px 2.5%; }
}


 .tile p{
 border: solid green 0px;
  margin:5px 0 0 0;
  padding:0 0 0 0:

 }
 
 /* unvisited link */
p a:link {
text-decoration: none;
}
/* visited link */
p a:visited {
text-decoration: none;
}
/* mouse over link */
p a:hover {
text-decoration: none;
}
/* selected link */
p a:active {
text-decoration: none;
}
 
 .box a{
 text-decoration: none;
 } 
  
.box { 
  position: relative; 
  display:inline;
  margin-bottom:0px;
  padding-bottom:0px;
  opacity:1;
 
  }
.box:hover img{
  opacity:0.5;
  }   
  
.squareThumbs{
  position: relative;
    width:100%;
    height:auto; 
}

img.squareThumbs{ 
	z-index: 0;
  	-webkit-filter: grayscale(1);
	-webkit-filter: grayscale(100%);
	filter: gray;
	filter: grayscale(100%);
	filter: url(desaturate.svg#greyscale); 
	opacity:0.75;
	 margin-bottom:-5px;
	}
	
.filter {
     z-index: -1;
    background-color: rgba(0,255,255, 0.8);
    
}
   
.filter:hover {
  background-color: rgba(0, 0, 37, 0.5);
  }
  
  .work {
  margin-left: auto;
  margin-right: auto;
  width:98%; 
  max-width:780px;
  }
  
  .work img{
  width:100%;
  }
  
  .workPortrait {
  margin-left: auto;
  margin-right: auto;
  width:98%; 
  max-width:780px;
  }
  
  .workPortrait img{
  width:100%;
  }
  
@media only screen and (orientation: landscape) {
   .work{width:50%;}
   .workPortrait{width:30%;}
   .panels{width:100%;}
}  

@media only screen and (min-width: 580px) and (orientation: portrait){
   .work{width:80%;}
   .workPortrait{width:90%;}  
      .panels{width:100%;}    
}   
@media only screen and (min-width: 580px) and (orientation: landscape)  {
   .work{width:50%;}
   .workPortrait{width:80%;} 
      .panels{width:100%;}     
}   
 
@media only screen and (min-width: 768px) {
   .work{width:50%;}
   .workPortrait{width:30%;} 
      .panels{width:80%;}
} 
@media only screen and (min-width: 1280px) {
   .work{width:50%;}
   .workPortrait{width:30%;}
      .panels{width:80%;}
}  
  
    .players {
  margin-left: auto;
  margin-right: auto;
  width:100%; 
    max-width:780px;
  }
  
  .players img{
  width:98%;
  }

table{
 text-align: left;
}
.textBlock{
 text-align: left;
}