@charset "UTF-8";

/* You're in my styles. */
/* Nothing special here - any online designer should be able to write good, clean HTML/CSS */

body { background: #f7f7f7 url(../images/content-bg.gif) top left repeat-y;; }

h1, h2, h3, h4 { font-weight: normal; }
h1 span, h2 span, h3 span, h4 span, a span { display: none; }
a { color: #222222; text-decoration: none; }
a:hover { text-decoration: underline !important; color: #222222 !important; }
div, p, span, li {
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	font-size: 12px;
	line-height: 20px;
	color: #959595;
}

#info {
	position: fixed;
	left: 20px;
	top: 0px;
	z-index: 10;
	background: none;
	width: 180px;
	overflow: hidden;
}
#info .content { padding: 20px 0px 0px 0px; }
#info h1 { background: url(../images/jasonsack.png) no-repeat; width: 180px; height: 138px; cursor: pointer; }

#info div.hr { margin: 20px 0px; height: 1px; background: url(../images/hr.gif) repeat-x; }

#info ul#contact li { font-size: 12px; list-style: 16px; }
#info ul#contact li span { font-size: inherit; }
#info ul#contact li a { color: #222222; text-decoration: none; }
#info ul#contact li a:hover { color: #c1272c; text-decoration: underline; }

#info h4 {
	font-size: 14px;
	color: #222222;
	margin-top: 20px;
	margin-bottom: 5px;
	padding: 0px 0px 0px 8px;
	background: url(../images/arrow-down.gif) no-repeat left 10px;
}

#info ol, #info ol li, #info ol li a { list-style-type:decimal; font-family: Georgia, "Times New Roman", Times, Serif; }
#info ol { padding-left: 22px; }
#info ol li a { color: #959595; text-decoration: none; }
#info ol li a:hover { color: #c1272c; }

#info #twitter { width: 172px; padding-left: 8px; overflow: hidden; }
#info #twitter span { font-family: Georgia, "Times New Roman", Times, Serif; font-size: 12px; }

#info ul.connect-links { padding-left: 8px; }
#info ul.connect-links a { color: #959595; text-decoration: none; font-family: Georgia, "Times New Roman", Times, Serif; }
#info ul.connect-links a:hover { color: #c1272c; }

#info #connection h2 { background: url(../images/connection.png) no-repeat; width: 180px; height: 114px; }

#info #go-home { margin-top: 30px; }
#info #go-home a { font-size: 11px; color: #222222; margin-top: 20px; }



#page { margin: 0px 0px 0px 230px; width: 770px; background: url(../images/mywork-bg.gif) no-repeat; min-height: 500px; padding-top: 140px; }
#page #work { padding: 0px 10px; }

#page h1, #page h3 { font-family: Georgia, "Times New Roman", Times, Serif; }

#work .item { margin-bottom: 80px; padding-top: 20px; } 

#work h3 { font-size: 28px; color: #363636; margin-bottom: 15px; float: left; }
#work .item p { clear: both; margin-bottom: 20px; }
#work .item span.details { display: block; float: left; margin-top: 2px; margin-left: 10px; font-size: 11px; }
#work p { width: 730px; font-size: 11px; }
#work p span { color: #222222; font-size: inherit; }
#work p a { color: #222222; background: none; }
#work p a:hover { color: #222222; text-decoration: none; }

#work .video { width: 750px; text-align: center; background: #363636; margin-bottom: 10px; }
#work .video .inner { width: 620px; margin: 0 auto; padding: 20px 0px; background: url(../images/video-bg.jpg) repeat-x; }
#work .item h4 { font-size: 18px; color: #363636; margin-bottom: 10px; }

#footer { width: 770px; height: 162px; background: url(../images/footer-bg.gif) no-repeat; text-align: right; padding-top: 80px; }
#footer p { font-size: 11px; }



.light { color: #959595 !important; }
.dark { color: #363636 !important; }

.hspace { line-height: 0px; height: 10px; overflow: hidden; margin: 0px; padding: 0px; }
.clear { clear: both; }