#main
{
position: absolute;
top: 0;
left: 10%;
margin-right: 5%;
}


#main ul
{
list-style-type: nmain;
margin: 30px 0;
padding:0;
width: 100%;
}

#main li
{
display: block;
width: 27.5%;
float: left;
padding: 10px;
margin-bottom: 3%;
margin-right: 3%;
border: 1px solid #aaa;
background: #6495ED;
-moz-transition: all 1s;
transition: all 1s;
}

#main li:hover
{
background: #DA70D6; 
border: 1px solid transparent;
}

#main li:hover span
{
font-family: calibri;
color: #fff;
-moz-transition: all 1s;
transition: all 1s;
}

#main li span
{
font:16px calibri;
line-height:150%;
color: white;
}

#main li span em
{
display: block;
margin-top:10px;
color: #fff;
font: normal 24px arial;
}

.gal
{
display:block;
width: 100%;
padding-top: 220px;
-moz-transition: all 1s;
transition: all 1s;
}

a#gal1 {background: url('img/autobio.jpg') -50px -50px; opacity: 1;}
a#gal2 {background: url('img/definition.jpg') -50px -75px; opacity: 1;}
a#gal3 {background: url('img/format.jpg') -50px -50px; opacity: 1;}
a#gal4 {background: url('img/outline.jpg') -150px -150px; opacity: 1;}
a#gal5 {background: url('img/index.jpg') -25px -25px; opacity: 1;}
a#gal6 {background: url('img/imagemap.jpg') -125px -100px; opacity: 1;}
a#gal7 {background: url('img/vertical.jpg') -150px -150px; opacity: 1;}
a#gal8 {background: url('img/splash.jpg') -150px -100px; opacity: 1;}
a#gal9 {background: url('img/periodic.jpg') -150px -100px; opacity: 1;}
a#gal10 {background: url('img/website.jpg') -150px -100px; opacity: 1;}
a#gal11 {background: url('img/field.jpg') -150px -100px; opacity: 1;}
a#gal12 {background: url('img/contact.jpg') -150px -100px; opacity: 1;}
a#gal13 {background: url('img/biodata.jpg') -150px -100px; opacity: 1;}
a#gal14 {background: url('img/signup.jpg') -150px -100px; opacity: 1;}
a#gal15 {background: url('img/store.jpg') -150px -100px; opacity: 1;}

a#gal1:hover
{background-position: -50px 0 ; opacity: .65; }
a#gal2:hover
{background-position: -50px -125px ; opacity: .65; }
a#gal3:hover
{background-position: -50px -100px ; opacity: .65; }
a#gal4:hover
{background-position: -150px -200px ; opacity: .65; }
a#gal5:hover
{background-position: -25px -100px ; opacity: .65; }
a#gal6:hover
{background-position: -125px -150px ; opacity: .65; }
a#gal7:hover
{background-position: -150px -200px ; opacity: .65; }
a#gal8:hover
{background-position: -150px -200px ; opacity: .65; }
a#gal9:hover
{background-position: -150px -200px ; opacity: .65; }
a#gal10:hover
{background-position: -150px -200px ; opacity: .65; }
a#gal11:hover
{background-position: -150px -200px ; opacity: .65; }
a#gal12:hover
{background-position: -150px -200px ; opacity: .65; }
a#gal13:hover
{background-position: -150px -200px ; opacity: .65; }
a#gal14:hover
{background-position: -150px -200px ; opacity: .65; }
a#gal15:hover
{background-position: -150px -200px ; opacity: .65; }

h1 
{font-family: calibri;
color: black;
}

h3
{
font-family: calibri;
color: black;
text-align: center;
}

span
{font-family: calibri;
color: white;
}

ul {list-style-type:nmain; }
li {padding-top:10px; padding-bottom:10px;}
a {text-decoration:nmain;}