@media (max-width: 699px) and (min-width: 520px) {
  @viewport {
    width: 640px;
  }
}



div.namelist {

	background-color:#5E5E5E; 
	color:#B2E0F0; font-family:arial; 
	font-size:5.8vmin; font-weight:bold; 
	padding:15px; text-shadow:black 1px 1px;
	width:60%; height:auto; 
	
	}


	
	A.classpb{color:darkblue;}
A.classpb:link  {text-decoration: none; color: darkblue;}
A.classpb:visited {text-decoration: none; color: darkblue;}
A.classpb:hover {text-decoration: underline; color: darkblue;}
A.classpb:active {text-decoration: none; color: darkblue;}
}

	A.classnames{color:white;}
A.classnames:link  {text-decoration: none; color: white;}
A.classnames:visited {text-decoration: none; color: white;}
A.classnames:hover {text-decoration: underline; color: white;}
A.classnames:active {text-decoration: none; color: white;}
}

/* visited link */
a:visited {
    color: #ffffff;
    text-decoration:none;
}

/* mouse over link */
a:hover {
    color: #ffffff;
    text-decoration:none;
}

/* selected link */
a:active {
     color: #ffffff;
    text-decoration:none;
}


div.picbox {
display: inline-block;
vertical-align:top;
   
    width: 230px;
    height:550px;
    margin: 10px;
     border: solid black 2px;
     border-radius:10px;
    font-family:Arial;
    font-size:16px;
    text-align:left;
    padding:15px;
    background-color:white;

}

div.directory{
position:relative; top:500px;
width:80%; 
text-align:left; 
background-color:black; 
letter-spacing: .1px;}


div.alph {
 position:fixed;
right:10px; 
width:30px; 
background-color:black; 
 
padding:2px; 
font-family:Arial; 
font-weight:bold; 
font-size:16px;
line-height:21px; 
text-align:center; 
z-index:500;
color:white;


}


div.button {


width:400px; 
height:auto; 
text-align:center; 
padding:10px; 

border:solid black 2px; 
border-radius:20px; 
box-shadow: Gainsboro 3px 3px 8px;
margin:20px;
font-size:20px;
font-family:arial; 
 
color:DarkRed; 
font-weight:bold;

background: -webkit-linear-gradient(white, Gainsboro ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, Gainsboro); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, Gainsboro); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, Gainsboro); /* Standard syntax (must be last) */

}



	A.classbttn{color:darkred;}
A.classbttn:link  {text-decoration: none; color: darkred;}
A.classbttn:visited {text-decoration: none; color: darkred;}
A.classbttn:hover {text-decoration: underline; color: darkred;}
A.classbttn:active {text-decoration: none; color: darkred;}
}


div.button-next {
position:relative;

width:88%; 
height:100px; 
text-align:center; 
padding:10px; 

border:solid black 2px; 
border-radius:20px; 
box-shadow: Gainsboro 3px 3px 8px;
margin:40px;
font-size:6.5vmin;
font-family:arial; 
 
color:DarkRed; 
font-weight:bold;

background: -webkit-linear-gradient(white, Gainsboro ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, Gainsboro); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, Gainsboro); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, Gainsboro); /* Standard syntax (must be last) */

}






#page-wrap {
     width: 95%;
     margin: 0 auto;
     
}

img {
	max-width:570px;
	margin:5px 0;
}                                             

@media screen and (min-width:1200px){
	img {
		max-width:500px;
	}
	
	#container{
		width:1100px;
	}  
                         
	
}

@media screen and (max-width:360px){  
	img {
    	max-width:305px;
	}