@font-face {
	font-family: openSans;
	src: url("fonts/OpenSans-Light.ttf");
}

body {
  font-family: openSans;
	background-color: #F2F2F2;
	padding: 0;
	color: #000;
	alignment-adjust: middle;
	line-height: 5px;
}

#banner {
	margin: 35px auto 0;
	text-align: center;
}

#banner img {
	width: 200px;
	text-align: center;
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

.imageClass {
	transition-delay: 1s;
}

a {
	transition: all .3s ease-out;
	font-family: openSans;
	font-size: 11pt;
	outline: 0;
	display: block;
}

a:link {
	color: #333;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	text-decoration: none;
}

a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #000;
}

#picWrap {
	margin: auto auto;
	text-align: center;
}

#linksDiv {
	margin: 0 auto;
	width: 500px;
	height: 100%;
}

#picDiv {
	margin-top: 10%;
	float: right;
	width: 50%;
	height: 100%;
	display: none;
}

#textDiv {
	text-align: center;
	padding-top: 20px;
}

.linkBox {
	background-color: #FBFBFB;
	margin: 9px 0 9px 0;
	padding: 22px 0 22px 0;
	box-shadow: 0px 1px 3px #999999;
	transition: all .1s;
}

.linkBox:hover {
	margin: 9px -5px 9px -5px;
	box-shadow: 0px 1px 5px #999999;
	background-color: #FFF;
}

.linkBox:active { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	transition: all .08s ease-in-out;
	background-color: #F7F7F7;
	box-shadow: inset 0px 0px 7px #EAEAEA, 0px 1px 5px #999999;
}