html {
    padding: 0;
    margin: 0;
}

body {
padding: 0;
margin: 0;
background-image: url('img/nov4thdesignbg.jpg');
background-size: 100%;
background-repeat: no-repeat;
}

/*logo*/

#headerlogo {
width: 162px;
height: 82px;
margin-top: 20px;
margin-left: 50px;
float: left;
}


/*nav*/

#nav {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
background-color: #151515;
font-family: 'Varela', sans-serif;
font-size: 10pt;
font-weight: bold;
height: 140px;
opacity: .9;
position: fixed;
z-index: 1;
}


/*Top Bar Menu*/

#menu {
width: 30%;
padding: 0;
margin-top: 42px;
margin-left: 250px;
list-style: none;
font-family: 'Varela', sans-serif;
font-size: 10pt;
font-weight: bold;
background-color: blue;
}

#menu li {
float: left;
}

#menu li a {
display: block;
padding: 20px 23px;
text-decoration: none;
color: white;
border-right: 1px white; 
}

#menu li a:hover {
color: #D6B430;
 }

#menu2 {
width: 30%;
padding: 0;
margin-top: 0px;
margin-right: 20px;
list-style: none;
font-family: 'Varela', sans-serif;
font-size: 10pt;
font-weight: bold;
float: right;
}

#menu2 li {
float: right;
}

#menu2 li a {
display: block;
padding: 20px 23px;
text-decoration: none;
color: #F0C75E;
border-right: 1px #F0C75E; 
}

#menu2 li a:hover {
color: white;
}

/*maintable*/

#maintable {
background-color: white;
width: 835px;
height: 55em;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 169px;

}

/*portfolio*/

#aca1 {
height: 242px;
width: 242px;
background-image: url('img/sitecues.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;
}

#aca1:hover {
height: 242px;
width: 242px;
background-image: url('img/sitecues_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
}


#aca2 {
height: 242px;
width: 242px;
background-image: url('img/yale.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;

}

#aca2:hover {
height: 242px;
width: 242px;
background-image: url('img/yale_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
}

#aca3 {
height: 242px;
width: 242px;
background-image: url('img/yale2.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;

}

#aca3:hover {
height: 242px;
width: 242px;
background-image: url('img/yale2_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
}

#aca4 {
height: 242px;
width: 242px;
background-image: url('img/lost.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;
margin-top: 24px;

}

#aca4:hover {
height: 242px;
width: 242px;
background-image: url('img/lost_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
margin-top: 24px;
}

#aca5 {
height: 242px;
width: 242px;
background-image: url('img/halloween.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;
margin-top: 24px;

}

#aca5:hover {
height: 242px;
width: 242px;
background-image: url('img/halloween_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
margin-top: 24px;
}

#aca6 {
height: 242px;
width: 242px;
background-image: url('img/24hours.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;
}

#aca6:hover {
height: 242px;
width: 242px;
background-image: url('img/24hours_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
}


#aca7 {
height: 242px;
width: 242px;
background-image: url('img/openaccess.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;
margin-top: 24px;
}

#aca7:hover {
height: 242px;
width: 242px;
background-image: url('img/openaccess_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
margin-top: 24px;
}

#aca8 {
height: 242px;
width: 242px;
background-image: url('img/music.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;
margin-top: 24px;
}

#aca8:hover {
height: 242px;
width: 242px;
background-image: url('img/music_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
margin-top: 24px;
}

#aca9 {
height: 242px;
width: 242px;
background-image: url('img/commonwealth_square.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;
margin-top: 24px;
}

#aca9:hover {
height: 242px;
width: 242px;
background-image: url('img/commonwealth_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
margin-top: 24px;
}

#aca10 {
height: 242px;
width: 242px;
background-image: url('img/tech.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;
margin-top: 24px;
}

#aca10:hover {
height: 242px;
width: 242px;
background-image: url('img/tech_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
margin-top: 24px;
}


#aca11 {
height: 242px;
width: 242px;
background-image: url('img/amp.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;
margin-top: 24px;
}

#aca11:hover {
height: 242px;
width: 242px;
background-image: url('img/amp_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
margin-top: 24px;
}

#aca12 {
height: 242px;
width: 242px;
background-image: url('img/onion.jpg');
background-repeat: no-repeat;
margin-left: 25px;
display: inline-block;
margin-top: 24px;
}

#aca12:hover {
height: 242px;
width: 242px;
background-image: url('img/onion_hover.jpg');
background-repeat: no-repeat;
display: inline-block;
margin-top: 24px;
}