/*---------- this style is for the homepage ----------*/

body { color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 100%; }
h2, h3, h4, h5, h6, p { margin: 0 10px; }
h3, h4 { color: #999; }
li, p { font-size: 12px; line-height: 18px; }
#backToTop { position: relative; top: -70px; }
.container { margin: 0 auto; padding: 0 0 20px; position: relative; width: 960px; }

#header { background: url(../graphics/headerBG.png) left top repeat-x; height: 32px; margin: 0 10px; padding: 20px 0; position: fixed; top: 0; width: 940px; z-index: 10; }
	#header h1 {
		background: transparent url(../graphics/logo.png) 0 1px no-repeat;
		float: left; font-size: 40px; height: auto; width: auto;
		line-height: 32px; letter-spacing: -4px;
		padding: 0 0 0 112px; text-transform: uppercase; }

	#header ul { float: right; }
	#header li { float: left; margin-left: 10px; }
	#header li a { display: block; padding: 34px 0 0 0; overflow: hidden; height: 0px !important; height: /**/34px; width: 34px; }
	#header .blog { background: url(../graphics/iconTumblr.png) 0 2px no-repeat; }
	#header .link { background: url(../graphics/iconLinkedin.png) 0 2px no-repeat; }
	#header .twitter { background: url(../graphics/iconTwitter.png) 0 2px no-repeat; }
	#header .facebook { background: url(../graphics/iconFacebook.png) 0 2px no-repeat; }
	#header .email { background: url(../graphics/iconEmail.png) 0 2px no-repeat; }

	#header .blog:hover { background-position: 0 0; }
	#header .link:hover { background-position: 0 0; }
	#header .twitter:hover { background-position: 0 0; }
	#header .facebook:hover { background-position: 0 0; }
	#header .email:hover { background-position: 0 0; }	

#content { margin-top: 70px; }
	#content h2 {
		border-top: 1px dotted #333;
		font-size: 65px; height: auto; width: auto;
		letter-spacing: -6px; line-height:55px;
		padding: 20px 0 10px;
		text-indent: 0; text-transform: uppercase; }
	#content h3 { font-size: 26px; font-weight: normal; letter-spacing: -1px; line-height: 32px; padding: 10px 0 20px; }
	#content h3 span { color: #666; }
	#content h4 { font-size: 20px; font-weight: normal; line-height: 26px; padding: 0 0 20px; }
	#content h3 a, #content h4 a { color: #666; font-weight: bold; text-decoration: none; }
	#content h3 a:hover, #content h4 a:hover  { color: #999; }
	#content li { float: left; display: inline; }
	#content img { position: absolute; left: 0; top: 0; }
	#content .wrap { background-color: #333; border: 5px solid #efefef; cursor: pointer; float: left; height: 180px; width: 280px; margin: 10px; padding: 5px; position: relative; overflow: hidden; }
	#content h5 { border-top: 1px dotted #333; color: #999; font-size: 16px; margin-top: 10px; padding: 10px 0 0; text-transform: uppercase; }
	#content h6 { border-bottom: 1px dotted #999; color: #FFF; font-size: 14px; margin-bottom: 5px; padding: 5px 0; }
	#content p { color: #999; padding: 8px 0; }
	#content p a { background: #C00; color: #FFF; font-weight: bold; padding: 5px 10px; text-decoration: none; }
	#content p a:hover { background: #CCC; color: #333; }
	#content .link { margin-top: 55px; }

#footer { margin: 0 10px; border-top: 1px dotted #333; }
	#footer ul { padding: 10px 0; float: left; }
	#footer li { float: left; display: inline; margin-right: 20px; }
	#footer li a { color: #333; text-decoration: none; }
	#footer li a:hover { color: #999; text-decoration: none; }
	#footer p { float: right; padding: 10px 0; text-align: right; }

/* ------------------------ clear ------------------------ */

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }