.online-materials{
	border:1px solid #CCC;
	color:#900;
	text-align:left;
	font-family: "alternate_gothic_fsno_3";
	font-size:1.6rem;
	text-transform:uppercase;
    line-height:0.8em;
	padding:10px 30px 10px 50px;
	background: -webkit-linear-gradient( #EEE, #FFF); 
	background: -o-linear-gradient( #EEE, #FFF); 
	background: -moz-linear-gradient( #EEE, #FFF); 
	background:  linear-gradient( #EEE, #FFF); 
	box-shadow: 2px 2px 5px #DDD;
  
}

.online-materials span{
	display:block;
	width:100%;
	white-space:nowrap;
	font-size:75%;
	text-decoration:none;
}

.online-materials:hover, .online-materials:focus{
	background: -webkit-linear-gradient( #900, #600); 
	background: -o-linear-gradient( #900, #600); 
	background: -moz-linear-gradient( #900, #600); 
	background:  linear-gradient( #900, #600); 
	text-decoration:none!important;
}

.online-materials:active{
	-webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95);
}


.online-materials #page-icon{
	position:absolute;
	left:10px;
	bottom:11px;
	opacity:0.5;
	width:30px;
	fill:#777;
}

.online-materials:hover #page-icon , .online-materials:focus #page-icon{
	fill:#FFF;
	opacity:0.9;
}