div.inst {
position:fixed;
	background-color:#5E5E5E; 
	color:#B2E0F0; 
font-family:arial; 
	font-size:4vmin;

font-weight:bold; 
	padding:15px;
 text-shadow:black 1px 1px;
	width:60%; 
height:330px; 
overflow:scroll;
	
	}

div.namelist {
position:fixed;
	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:330px; overflow:scroll;
	
	}
	
	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 {
    position:static;
    width: 80%;
    height: auto;
    margin: 20px;
     border: solid black 2px;
     border-radius:10px;
    font-family:Arial;
    font-size:3.5vmin;
    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; 
left:84%; 
width:10%; 
background-color:black; 
 
padding:6px; 
font-family:Arial; 
font-weight:bold; 
font-size:4.5vmin;
line-height:6.2vmin; 
text-align:center; 
z-index:500;
color:white;
overflow:scroll;
}


div.button {

width:90%;
 
text-align:center; 
padding:10px; 

border:solid black 2px; 
border-radius:20px; 
box-shadow: Gainsboro 3px 3px 8px;
margin:2%;
font-size: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) */

}



	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%; 
 
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;
	}