/* Import Browser Reset Doc */
@import url( BrowserReset.php );

body 
{
	background: #FFF url(http://christopherhein.com/_assets/images/_master/topbar.jpg) repeat-x center top;
	font-family: Myriad Pro, Lucida Grande, Lucida Sans Unicode, Tahoma, sans-serif;
	color: #333;
	height: 100%;
}

#ContentContainer
{
	position: absolute;
	background: #FFF;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	z-index: 900;
}

#loaderGraphic
{
	position: relative;
	width: 200px;
	height: 100px;
	margin: 25% auto;
	text-align: center;
}

#AjaxLoad
{
	position: absolute;
	background: url(http://christopherhein.com/_assets/images/_master/loader.gif) no-repeat;
	width: 55px;
	height: 55px;
	margin: 200px 480px;
	text-align: center;
	z-index: 30;
}

#loaderGraphic p
{
	font-family: Myriad Pro, Lucida Grande, Lucida Sans Unicode, Tahoma, sans-serif;
	color: #CCC;
	margin: 30px 0px 0px 0px;
}

.container
{
	position: relative;
	height: 100%;
	width: 960px;
	margin: 0px auto;
	text-align: center;
	
}

#header
{
	position: relative;
	height: 109px;
	width: 100%;
	display: block;
	margin: 0px 0px 15px 0px;
}

#header .christopherhein a
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/_master/navigation.png) no-repeat;
	height: 109px;
	width: 250px;
	display: block;
	float: left;
}

#header .prettythings a
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/_master/navigation.png) no-repeat;
	background-position: -250px 0px;
	height: 109px;
	width: 157px;
	display: block;
	float: left;
}

#header .mytalks a
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/_master/navigation.png) no-repeat;
	background-position: -407px 0px;
	height: 109px;
	width: 130px;
	display: block;
	float: left;
}

#header .space a
{
	position: relative;
	/*background: url(http://christopherhein.com/_assets/images/_master/navigation.png) no-repeat;
	background-position: -407px 0px;*/
	height: 109px;
	width: 130px;
	display: block;
	float: left;
}

#header .whatido a
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/_master/navigation.png) no-repeat;
	background-position: -537px 0px;
	height: 109px;
	width: 120px;
	display: block;
	float: left;
}

#header .meetme a
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/_master/navigation.png) no-repeat;
	background-position: -657px 0px;
	height: 109px;
	width: 143px;
	display: block;
	float: left;
}

/* Navigation Hover */
#header .christopherhein a:hover, #header .christopherhein a.hover
{
	background-position: 0px -110px;
}

#header .prettythings a:hover, #header .prettythings a.hover
{
	background-position: -250px -110px;
}

#header .mytalks a:hover, #header .mytalks a.hover
{
	background-position: -407px -110px;
}

#header .whatido a:hover, #header .whatido a.hover
{
	background-position: -537px -110px;
}

#header .meetme a:hover, #header .meetme a.hover
{
	background-position: -657px -110px;
}

/* Navigation Active */
#header .prettythings a:active
{
	background-position: -250px -220px;
}

#header .mytalks a:active
{
	background-position: -407px -220px;
}

#header .whatido a:active
{
	background-position: -537px -220px;
}

#header .meetme a:active
{
	background-position: -657px -220px;
}



/* Utilities Settings */

#header .utilities
{
	position: relative;
	top: 15px;
	left: 120px;
	margin: 0px 120px 0px 0px;
}

#header .utilities .factory a
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/_master/utilities.png) no-repeat;
	background-position: 0px 0px;
	height: 17px;
	width: 56px;
	display: block;
	float: left;
}

#header .utilities .subscribe a
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/_master/utilities.png) no-repeat;
	background-position: -56px 0px;
	height: 17px;
	width: 77px;
	display: block;
	float: left;
}

#header .utilities .factory a:hover, #header .utilities .factory a.hover
{
	background-position: 0px -18px;	
}

#header .utilities .subscribe a:hover, #header .utilities .subscribe a.hover
{
	background-position: -56px -18px;	
}

/* RSS Feed Icon */
#header .utilities #subscribecover
{
	position: absolute;
	background:  url(http://christopherhein.com/_assets/images/_master/topbar.jpg) repeat-x center top;
	width: 77px;
	height: 30px;
	right: 33px;
	top: -10px;
	z-index: -1;
}

#header .utilities #subscribeshadow
{
	position: absolute;
	background: url(http://christopherhein.com/_assets/images/_master/subscribeshadow.png) no-repeat;
	width: 77px;
	height: 109px;
	right: 33px;
	z-index: -2;
}

#header .utilities #subscribeicon
{
	position: absolute;
	background: url(http://christopherhein.com/_assets/images/_master/subscribeicon.png) no-repeat;
	width: 77px;
	height: 109px;
	right: 33px;
	z-index: -2;
}

/* Homepage Styles */
#content .slider
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/homepage/slider.jpg) no-repeat;
	background-position: 0px -750px;
	width: 960px;
	height: 450px;
	display: block;
	margin: -15px 0px 0px 0px;
}

#content .sliderafter
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/homepage/italltext.jpg) no-repeat;
	background-position: 0px -475px;
	width: 960px;
	height: 0px;
	display: block;
	margin: -15px 0px 0px 0px;
}

#content #idotext
{
	position: absolute;
	background: url(http://christopherhein.com/_assets/images/_master/blank.gif) no-repeat;
	background-position: 0px -450px;
	top: 123px;
	width: 960px;
	height: 450px;
	display: block;
	margin: -15px 0px 0px 0px;
}

#content #idowords
{
	position: absolute;
	background: url(http://christopherhein.com/_assets/images/_master/blank.gif) no-repeat;
	background-position: 0px -450px;
	top: 123px;
	width: 960px;
	height: 450px;
	display: block;
	margin: -15px 0px 0px 0px;
}

#content #objects
{
	position: relative;
	width: 940px;
	height: 150px;
	margin: -75px auto;
}

.homepageboxes
{
	position: relative;
	width: 280px;
	height: 200px;
	margin: 10px;
}

.homepageboxes h4
{
	/*text-shadow: 1px 1px 0px #FFF;*/
	font-weight: bolder;
	color: #888;
	font-variant: normal;
}

#projects
{
	position: relative;
	background: #f4f4f4;
	width: 296.66666666667px;
	height: 200px;
	float: left;
	margin: 0px 0px 0px 10px;
}

#twitter
{
	position: relative;
	background: #f4f4f4;
	width: 296.66666666667px;
	height: 200px;
	float: left;
	margin: 0px 20px 0px 20px;
}

#augmented
{
	position: relative;
	background: #f4f4f4;
	width: 296.66666666667px;
	height: 200px;
	float: left;
	margin: 0px 10px 0px 0px;
}

#projects .homepageboxes ul li, #augmented .homepageboxes ul li
{
	border: #DDD thin solid;
	width: 280px;
	height: 175px;
	display: block;
}

#projects .homepageboxes ul li.resume
{
	background: url(http://christopherhein.com/_assets/images/latestproject/resume.jpg) no-repeat;
}

#augmented .homepageboxes ul li.augment a
{
	background: url(http://christopherhein.com/_assets/images/homepage/augmented.png) no-repeat;
	width: 296.66666666667px;
	height: 225px;
	display: block;
}

h4
{
	text-align: left;
}

.tweet
{
	font-size: 100%;
	color: #aaaaaa;
	text-align: left;
}

.tweet .tweet_list
{
	-webkit-border-radius: .5em;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.tweet .tweet_list li
{
	overflow: auto;
	padding: .35em;
	/*border-bottom: #DDD thin solid;*/
}

.tweet .tweet_list li a
{
	color: #7eb8f8;
}

.tweet .tweet_list .tweet_avatar img 
{
	vertical-align: middle;
}

#footer
{
	position: relative;
	width: 960px;
	height: 50px;
	float: left;
	margin: 20px 0px 0px 0px;
	font-size: 9.5px;
	color: #999;
}

#copyright
{
	position: relative;
	font-family: Myriad Pro, Lucida Grande, Lucida Sans Unicode, Tahoma, sans-serif;
	width: 300px;
	height: 20px;
	float: left;
}

#social
{
	position: relative;
	width: 331px;
	height: 20px;
	float: right;
	margin: 0px 30px 0px 0px;
}

#social #linkedinicon a
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/_master/social_icons.png) no-repeat;
	width: 90px;
	height: 20px;
	display:  block;
	float: left;
}

#social #facebookicon a
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/_master/social_icons.png) no-repeat;
	background-position: -90px 0px;
	width: 120px;
	height: 20px;
	display:  block;
	float: left;
}

#social #twittericon a
{
	position: relative;
	background: url(http://christopherhein.com/_assets/images/_master/social_icons.png) no-repeat;
	background-position: -210px 0px;
	width: 121px;
	height: 20px;
	display:  block;
	float: left;
}

#social #linkedinicon a:hover, #social #linkedinicon a.hover
{
	background-position: 0px -21px;
}

#social #facebookicon a:hover, #social #facebookicon a.hover
{
	background-position: -90px -21px;
}

#social #twittericon a:hover, #social #twittericon a.hover
{
	background-position: -210px -21px;
}

#projectList
{
	position: relative;
	width: 920px;
	height: 100%;
	overflow: auto;
	margin: 10px auto 30px auto;
}

.projectwrap
{
	background: #eeeeee;
	border: thin #c4c4c4 solid;
	width: 296.66666666667px;
	height: 240px;
	float: left;
	margin: 0px 0px 20px 8px;
	display: none}

.projects
{
	position: relative;
	background: #f4f4f4;
	border-bottom: thin #FFF solid;
	width: 296.66666666667px;
	height: 185px;
	float: left;
	margin: 0px 0px 15px 0px;
	padding: 10px 0px 0px 0px;
}

.projects img
{
	border: thin #FFF solid;
}

.projecttext
{
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

#LoginForm
{
	position: relative;
	background: #EEE;
	border: thin #F6F6F6 solid;
	min-height: 100px;
	width: 400px;
	margin: 30px auto;
	text-align: left;
	padding: 17px;
	overflow: auto;
}

#LoginForm form label
{
	font-size: 16px;
	font-weight: 800;
	color: #ccc;
	margin: 0px 10px 0px 0px;
}

#LoginForm form input
{
	position: relative;
	border: thin #999 solid;
	width: 250px;
	height: 30px;
	font-size: 16px;
	font-weight: 800;
	color: #666;
	padding: 5px;
	margin: 0px 0px 20px 0px;
}

#LoginForm form #loginsubmit
{
	position: relative;
	width: 150px;
	height: 30px;
	margin: 0px 52px;
	float: right;
}

.projectnav
{
	position: relative;
	height: 30px;
	width: 885px;
	text-align: center;
	margin: 0px 0px 0px 75px;
}

.projectnav div
{
	position: relative;
	height: 30px;
	width: 100px;
	float: left;
}

.imgoverlay
{
	position: absolute;
	background: url(http://christopherhein.com/_assets/images/projects/ProjectOverlay.png);
	top: 11px;
	right: 8px;
	width: 280px;
	height: 175px;
	display: block;
	z-index: 30px;
}

#sidebar
{
	position: relative;
	width: 220px;
	min-height: 100px;
	height: 100%;
	margin: 0px 15px;
	float: left;
	text-align: left;
	padding: 15px;
}

#maincontent
{
	position: relative;
	width: 615px;
	min-height: 100px;
	height: 100%;
	margin: 0px 15px;
	float: left;
	text-align: left;
	padding: 15px;
}

#maincontent p
{
	color: #7a7a7a;
	font-size: 12px;
	line-height: 19.2px;
}

#meetcontainer
{
	width: 340px;
	float: left;
}

#maincontent img
{
	position: relative;
	float: left;
}

.skills
{
	position: relative;
	height: 175px;
	width: 100%;
	padding: 10px;
	background: #f4f4f4;
	border: thin #c4c4c4 solid;
	margin: 15px;
}

.skills a
{
	width: 280px;
	margin: 0px 15px 0px 0px;
	border: thin #FFF solid;
	float: left;
}

#content h3
{
	text-align: left;
}

p
{
	font-size: 14px;
	text-align: left;
	color: #7a7a7a;
}

.skills h4.serifed
{
	margin: 25px 0px 15px 0px;
}

.skills h2.serifed
{
	margin: 15px 0px 15px 0px;
	font-size: 22px;
}
/* ------------------- Classes -------------------------*/

.serifed
{
	font-family: Georgia, serif;
	font-weight: 900;
	color: #2671ee;
	font-size: 18px;
	line-height: 16px;
	margin: 0px 0px 15px 0px;
}

.quickLinks
{
	position: relative;
	width: 150px;
	padding: 7px;
	margin: 10px 0px 10px 0px;
	line-height: 20px;
}

.quickLinks:hover
{
	background: #5a5a5a;
	color: #FFF;
	margin: 10px 0px 10px 0px;
}

.none
{
	display: none;
}