style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, center, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

body{
	background-image:url(images/background.png);
	font-family: 'Roboto', sans-serif;
	color: #DBDBDB;
}

/*links*/
a,
a:visited,
a:before{
	color:#1793b8;
	text-decoration: none;
} /*link*/
a:hover,
a:visited:hover{
	color:#81c341;
	text-decoration: none;
} /*mouse over link*/
a:link:active,
a:visited:active{
	color:#DBDBDB;
	text-decoration: none;
} /*selected link*/

.menuBar{
	width: auto;
	background-color: #101010;
}



/*top menu bar*/
#topMenuBarBackground{
	height: 75px;
	border-bottom-color: #434343;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
#topBar{
	height: 75px;
	margin: 0 auto;
	display: table;
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	padding-left: 30px;
	padding-right: 30px;
}
#navigationContainer{
	display: table-cell;
	vertical-align: middle;
}
#navigationContainer ul{
	text-align: center;
	display: block;
}
#navigationContainer li{
	height: 75px;
	list-style: none;
	display: inline;
}
#navigationContainer a{
	margin: 0;
	padding-top: 21px;
	padding-right:20px;
	padding-bottom: 22px;
	padding-left:20px;
	font-size: 1.5em;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #DBDBDB;
}
#navigationContainer a:hover, a:active{
	background-color: #434343;
}

/*site container*/
#siteContainer{
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	padding: 50px;
	overflow: hidden;
}

/*name tag*/
#nameTag{
	float: left;
}
#nameTag li{
	list-style: none;
}
#nameTag li h1{
	font-family: 'Roboto', sans-serif;
	font-size: 3.5em;
}
#nameTag li h1 span.firstName{
	color: #1793b8;
}
#nameTag li h1 span.lastName{
	color: #81c341;
}
#nameTag li h2{
	font-family: 'Roboto', sans-serif;
	font-size: 2em;
	line-height: 50%
}

/*avatar and social connector*/
#avatarSocialContainer{
	float: right;
}
#avatar{
	width: 420px;
	float: left;
	z-index: 1;
}

/*social container*/
#socialContainer{
	float: right;
	position: relative;
	right: 77px;
	top: -3px;
	z-index: 2;
}
#socialContainer li{
	list-style: none;
}

/*social buttons*/
.socialButton,
.socialButton:visited,
.socialButton:before{
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-top: 5px;
	margin-bottom: 5px;
	border: solid 1px #434343;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #DBDBDB;
	box-shadow:1px 1px 2px #000000;
	opacity:0.95;
}
.socialButton:link:hover,
.socialButton:visited:hover{
	box-shadow:0 0 2px #222 inset;
	background-color: #DBDBDB;
	opacity:1;
}
.socialButton:link:active,
.socialButton:visited:active{
	box-shadow:0 0 2px #222 inset;
	background-color: #3B5998;
	opacity:1;
}

/*github button*/
#gitHubButton{
	background-image: url(images/gitHubDark.png);
}
#gitHubButton:link:hover,
#gitHubButton:visited:hover{
	background-image: url(images/gitHubLight.png);
	box-shadow:0 0 2px #222 inset;
	background-color: #4183c4;
	opacity:1;
}
#gitHubButton:link:active,
#gitHubButton:visited:active{
	box-shadow:0 0 2px #222 inset;
	background-color: #101010;
	opacity:1;
}

/*twitter button*/
#twitterButton{
	background-image: url(images/twitterDark.png);
}
#twitterButton:link:hover,
#twitterButton:visited:hover{
	background-image: url(images/twitterLight.png);
	box-shadow:0 0 2px #222 inset;
	background-color: #1AB2E8;
	opacity:1;
}
#twitterButton:link:active,
#twitterButton:visited:active{
	box-shadow:0 0 2px #222 inset;
	background-color: #101010;
	opacity:1;
}

/*google+ button*/
#googlePlusButton{
	background-image: url(images/googlePlusDark.png);
}
#googlePlusButton:link:hover,
#googlePlusButton:visited:hover{
	background-image: url(images/googlePlusLight.png);
	box-shadow:0 0 2px #222 inset;
	background-color: #DB4A39;
	opacity:1;
}
#googlePlusButton:link:active,
#googlePlusButton:visited:active{
	box-shadow:0 0 2px #222 inset;
	background-color: #101010;
	opacity:1;
}

/*facebook button*/
#facebookButton{
	background-image: url(images/facebookDark.png);
}
#facebookButton:link:hover,
#facebookButton:visited:hover{
	background-image: url(images/facebookLight.png);
	box-shadow:0 0 2px #222 inset;
	background-color: #3B5998;
	opacity:1;
}
#facebookButton:link:active,
#facebookButton:visited:active{
	box-shadow:0 0 2px #222 inset;
	background-color: #101010;
	opacity:1;
}

/*linkedin button*/
#linkedInButton{
	background-image: url(images/linkedInDark.png);
}
#linkedInButton:link:hover,
#linkedInButton:visited:hover{
	background-image: url(images/linkedInLight.png);
	box-shadow:0 0 2px #222 inset;
	background-color: #0E76A8;
	opacity:1;
}
#linkedInButton:link:active,
#linkedInButton:visited:active{
	box-shadow:0 0 2px #222 inset;
	background-color: #101010;
	opacity:1;
}

/*content container*/
#contentContainer{
	padding-top: 30px;
	width: 530px;
	overflow: hidden;
	text-align: justify;
}

/*bottom menu bar*/
#bottomMenuBarBackground{
	height: 62px;
	clear: both;
	border-top-color: #434343;
	border-top-width: 1px;
	border-top-style: solid;
	width: 100%;
	position: fixed;
    bottom: 0;
    z-index: 3;
}
#bottomBar{
	height: 62px;
	font-family: 'Roboto', sans-serif;
	display: table;
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	padding-left: 30px;
	padding-right: 30px;
	overflow: hidden;
}
#copyrightInfo{
	display: table-cell;
	vertical-align: middle;
	font-size: .75em;
	float: left;
	margin-top: 2px;
}
#hostingInfo{
	display: table-cell;
	vertical-align: middle;
	font-size: .75em;
	float: right;
	margin-top: 2px;
}
#hostingInfo a{
	background-image: url(images/webHostLogo.png);
	text-decoration: none;
	display: inline-block;
	width: 55px;
	height: 40px;
}