/*********************************************************************CSS Reset*****************************************************************************/
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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

body {line-height: 1;}

ol, ul {list-style: none;}

em {font-style: italic;}

strong {font-weight: bold;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}

/* remember to define focus styles! */
a:hover, a:active {outline: none;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}

del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}
/*********************************************************************END Reset****************************************************************************/

html, body {height: 100%; min-width: 960px;}

body {background: url(../images/body_repeat.jpg); position: relative; text-align: center; font: normal 62.5%/1.7em Arial, Helvetica, sans-serif; color: #181616;}

#container {background: url(../images/container_bg2.jpg) repeat-x top left; position: relative; float: left; width: 100%; min-width: 960px;}

#container p {color: #0a0a0a; font-size: 1.2em; letter-spacing: 0em; text-align: justify; margin: 0 0 1.2em 0;}

#container a {font-size: 110%; text-decoration: none;}

#top_shadow {background: url(../images/top_shadow.png) repeat-x top left; width: 100%; height: 28px; position: fixed; top: 0; left: 0; z-index: 100;}

#right_shadow {background: url(../images/right_shadow.png) repeat-y top right; width: 28px; height: 100%; position: fixed; top: 0; right: 0; z-index: 100;}

#left_shadow {background: url(../images/left_shadow.png) repeat-y top left; width: 28px; height: 100%; position: fixed; top: 0; left: 0; z-index: 100;}

#bottom_shadow {background: url(../images/bottom_shadow.png) repeat-x top left; width: 100%; height: 28px; position: fixed; bottom: 0; left: 0; z-index: 100;}

#top_bar {background: #0a0a0a; position: absolute; top: 0; left: 0; width: 100%; height: 59px; border-bottom: 1px solid #fdfdfd;}

#content {position: relative; width: 940px; margin: 0 auto; padding: 61px 0 0 0; overflow: visible; text-align: left;}

/******************************************************************HEADER Styles**************************************************************************/
#header_content {position: relative; margin: 0 auto; width: 940px;} 

h1 {position: relative; float: left; width: 501px; height: 37px; top: 13px; z-index: 110;}

h1 a {background: url(../images/logo_new.png) no-repeat top left; width: 100%; height: 100%; display: block; text-indent: -9999px;}

h1 a:hover {background-position: bottom;}

#header_content h2 {background: url(../images/tagline.png) no-repeat top left; width: 352px; height: 19px; position: relative; float: right; top: 33px; text-indent: -9999px;}

/*************************************************************MAIN CONTENT Styles***************************************************************************/
#main_content {position: relative; float: left; clear: both; width: 100%;}

#intro {position: relative; float: left; clear: left; width: 100%; margin: 30px 0 0 0;}

#intro h2 {background: url(../images/intro.png) no-repeat center left; width: 940px; height: 69px; position: relative; margin: 0 0 26px 0; padding: 25px 0 25px 0; border-bottom: 1px solid #87898A; border-top: 1px solid #87898A; text-indent: -9999px;}

#intro a {color: #a40c0c; font-weight: bold; font-size: 100%; text-decoration: none;}

#intro a:hover {border-bottom: 1px dotted #a40c0c;}

#intro dl {position: relative; float: left; clear: left; margin: 1.1em 0 0 0;}

#intro dl dt {font-size: 2em; letter-spacing: -1px; color: #a40c0c;}

#intro dl dd {color: #181616; margin: 4px 0 22px 0; font-size: 1.4em;}

#featured_work {position: relative; float: right; clear: right; width: 378px; height: 200px; margin: 4px 0 0 35px; border: 15px solid #0a0a0a;}

#featured_work:hover {border: 15px solid #a40c0c;}

#featured_work h4 {background: url(../images/grey_headings.png) no-repeat bottom left; width: 129px; height: 37px; position: absolute; top: -30px; right: -25px; text-indent: -9999px; z-index: 10;}

#featured_work img {position: absolute; top: 0; right: 0;}

#intro h3 {background: url(../images/intro_heading2.png) no-repeat center left; width: 940px; height: 27px; position: relative; margin: 8px 0 0 0; padding: 22px 0 22px 0; float: left; clear: both; border-top: 1px solid #87898A; border-bottom: 1px solid #87898A; text-indent: -9999px;}

#gallery {position: relative; width: 100%; float: left; clear: both; padding: 64px 0 0 0; margin: 0 0 21px 0;}

#gallery_frame {position: relative; float: left; clear: left; width: 620px; height: 400px; border: 24px solid #0a0a0a;}

#gallery_frame h3 {background: url(../images/grey_headings.png) no-repeat top left; width: 202px; height: 48px; position: absolute; top: -5.7em; left: -3.9em; text-indent: -9999px;}

#gallery_frame img {position: absolute; top: 0; left: 0; display: none;}

#gallery_frame img.first {display: block;}

#gallery_thumbs {position: relative; float: right; clear: right; width: 260px; height: 448px; overflow: auto; text-align: left;}

#gallery_thumbs li {display: block; margin: 0 0 12px 0; width: 235px; height: 80px;}

#gallery_thumbs .last {margin: 0;}

#gallery_thumbs li a {display: block; width: 100%; height: 100%; font-size: 1.1em; line-height: 1.4em; color: #0a0a0a;}

#gallery_thumbs li a strong {font-size: 1.4em; letter-spacing: -1px; color: #a40c0c; width: 100%; clear: right;}

#gallery_thumbs li a img {float: left; margin: 0 0.6em 0 0; width: 87px; height: 60px; border: 10px solid #0a0a0a;}

#gallery_thumbs li a:hover {color: #a40c0c;}

#gallery_thumbs li a:hover img {border: 10px solid #a40c0c;}

#gallery_thumbs li a:focus {color: #a40c0c; outline: none;}

#gallery_thumbs li a:focus img {border: 10px solid #a40c0c;}

#noscript_gallery {position: relative; width: 100%; float: left; clear: both; margin: 1em 0 0 0; text-align: center;}

#noscript_gallery h4 {font-size: 1.6em; margin: 0 0 0.5em 0;}

#blog_heading {background: url(../images/blog_heading.png) no-repeat center left; width: 940px; height: 27px; position: relative; margin: 33px 0 0 0; padding: 22px 0 22px 0; float: left; clear: both; border-top: 1px solid #87898A; border-bottom: 1px solid #87898A; text-indent: -9999px;}

#blog_feed {position: relative; float: left; clear: left; width: 560px; margin: 27px 0 0 0; padding: 0 33px 0 0; border-right: 1px solid #87898A;}

#blog_feed h3 {background: url(../images/side_headings.png) no-repeat top right; width: 193px; height: 42px; position: relative; float: left; clear: both; text-indent: -9999px; text-align: left; margin: 1.8em 0 0.9em 0;}

#blog_feed a {color: #a40c0c;}

#blog_feed a:hover {border-bottom: 1px dotted #a40c0c;}

.post {position: relative; float: right; clear: both; width: 100%; margin: 0;}

#blog_feed h2 {font-size: 1.6em; margin: 0; letter-spacing: -1px;}

.entry {margin: 8px 0 0 0;}

.entry p {margin: 0 0 0.3em 0;}

.entry h3 {font-size: 1.6em;}

#content p.read_more {margin: 0.5em 0 0 0;}

p.read_more a, p.postmetadata a {font-size: 100%;}

#blog_feed h4 {font-family: Arial, Helvetica, sans-serif; font-size: 2.4em; font-weight: bold; letter-spacing: -1px; line-height: 0.9em; width: 100%; position: absolute; bottom: 1em; text-align: center;}

#blog_feed h4 a {text-decoration: none; color: #181616;}

#blog_feed h4 a:hover {border: none;}

#blog_feed h4 em {font-size: 70%; font-style: normal;}

#twitter_container {position: relative; float: right; margin: 28px 0 0 0;}

#twitter_container a:hover, #twitter_container li span a:hover {border-bottom: 1px dotted #a40c0c;}

#twitter_container h3 {text-align: right; margin: 0 0 6px 0; line-height: 1.4em;}

#twitter_container h3 a {font-size: 1.8em; font-weight: bold; letter-spacing: -1px; color: #a40c0c;}

#twitter_container h3 a strong {color: #1ec7ff;}

#twitter_container h3 a span {font-style: italic; font-size: 60%; font-weight: normal; letter-spacing: 0px;}

#twitter_container ul {position: relative; width: 315px; float: right; margin: 0.2em 0 0 0.2em;}

#twitter_container ul li {float: right; clear: both; width: 100%; text-align: right;}

#twitter_container li span {float: right; font-style: italic; font-size: 1.2em; line-height: 1.4em; width: 315px;}

#twitter_container li span a {float: none; clear: none; margin: 0; font-size: 100%; width: inherit;}

#twitter_container li a {position: relative; float: right; clear: both; margin: 4px 0 12px 0; width: 115px; color: #a40c0c;}

#twitter_container li a:hover {border: none;}

#twitter_container p {position: relative; float: right; clear: both; margin: 0.5em 0 0 0;}

/******************************************************************FOOTER Styles***************************************************************************/
#footer {background: #0a0a0a; position: relative; float: left; clear: both; width: 100%; margin: 42px 0 0 0; text-align: center; color: #f2f2f2; border-top: 1px solid #ffffff;}

#footer_content {position: relative; width: 940px; margin: 0 auto;}

#footer p {color: #ffffff; font-size: 1.1em;}

#footer a {color: #ffffff;}

#about_container {position: relative; float: left; clear: left; width: 562px; height: 358px; margin: 3em 0 0 0; padding: 0 3.1em 0 0; border-right: 1px solid #303030; text-align: left;}

a#twitter_link {color: #33ccff;}

h3#about {background: url(../images/grey_headings.png) no-repeat 0% 36%; width: 222px; height: 48px; position: relative; float: left; clear: both; margin: -6em 0 0 -1.4em; text-indent: -9999px;}

#about_content {position: relative; float: left; clear: both; width: 100%; height: 100%; margin: -0.3em 0 0 0;}

#about_content p {color: #f2f2f2;}

#about_content a {color: #a40c0c; font-weight: bold;}

#about_content a:hover {border-bottom: 1px dotted #a40c0c;}

#pic_info {position: relative; float: left; height: 361px; padding: 0 3.3em 0 0; margin: 0 3em 0 0; border-right: 1px solid #303030;}

#pic_info img {position: relative; margin: 0.4em 0 0 0;}

p#self_pic_caption {color: #6f6f6f;}

#pic_info ul {position: relative; margin: 1.4em 0 0 0;}

#pic_info ul li {display: block; margin: 0 0 0.9em 0; border-bottom: 1px dotted #f2f2f2;}

#pic_info ul li, #pic_info ul li a {color: #f2f2f2; font-size: 100%; font-weight: normal;}

#pic_info ul li a:hover {color: #a40c0c; border: none;}

#skills_container {position: relative; float: right; clear: right; margin: 0 0.2em 0 0; width: 315px;}

#skills_container h4 {position: relative; margin: 0.7em 0 0 0; padding: 0 0 2px 0; width: 100%; letter-spacing: -1px; font-size: 1.6em; border-bottom: 1px dotted #f2f2f2;}

.skills_lists {position: relative; top: -1px;}

#skills_list1 {float: left;}

#skills_list2 {float: right;}

.skills_lists li {background: url(../images/list_check.png) no-repeat top left; display: block; margin: 1.1em 0 0 0; padding: 0 0 0 20px;}

#contact_container {position: relative; float: right; clear: right; width: 311px; text-align: right; margin: 3em 0 0 0;}

#contact_container h3 {background: url(../images/grey_headings.png) no-repeat 0% 72%; width: 211px; height: 48px; position: relative; text-align: left; float: right; clear: both; text-indent: -9999px; margin: -6em -1.4em 0 0;}

#contact_container h4 {float: right; clear: both; width: 310px; text-align: right; color: #f2f2f2; letter-spacing: -1px; font-size: 1.6em; margin: 0 0.25em 0.1em 0;}

#contact_container p {float: right; clear: both; margin: 0; width: 100%; text-align: right;}

#comments {position: relative; float: right; clear: both; width: 100%; padding: 0 0 4.5em 0; margin: 0 0.2em 0 0; text-align: right;}

#comments label {font-family: Arial, Helvetica, sans-serif; color: #f2f2f2; font-size: 12px; margin: 0.8em 0 0.1em 0; display: block;}

#comments input {background: url(../images/form_bg.jpg); font-size: 11px; width: 100%; height: 16px; padding: 0.1em 0 0.1em 0.1em; border: none;}

#comments textarea {background: url(../images/form_bg.jpg); font-size: 11px; font-family: Arial, Helvetica, sans-serif; padding: 0.1em 0 0.1em 0.1em; height: 13.3em; width: 100%; max-width: 348px; max-height: 13.3em; border: none; overflow: auto;}

#comments input:focus, #comments textarea:focus {outline: 3px solid #a40c0c;}

#comments .info {display: none;}

#comments input#send {background: url(../images/send_button.png) no-repeat top left; width: 77px; height: 32px; position: absolute; bottom: 3px; right: 0; width: 75px; cursor: pointer; border: none; text-align: left; text-indent: -9999px; font-size: 0px; z-index: 100;}

#comments input#send:hover {background-position: bottom left;}

#comments input#send:focus {border: none; outline: none;}

p.error {display: block;}

#error_message {position: absolute; bottom: 1em; left: 1em; text-align: left; font-weight: bold; font-size: 1.2em; color: #a40c0c; display: none;}

#footer_info {position: relative; width: 940px; height: 47px; margin: 0 auto; padding: 15px 0 0 0; clear: both; text-align: center; border-top: 1px solid #303030; z-index: 101;}

#footer_info h4 {font-size: 10px; line-height: 15px; font-weight: normal; letter-spacing: 0px; text-decoration: none; position: relative; float: left; clear: left;}

#footer_info ul {position: absolute; right: 0; margin: 0; padding: 0;}

#footer_info ul li {display: inline; margin: 0 0 0 12px;}

/******************************************************************CLASSES**********************************************************************************/
.red {color: #a40c0c; font-size: 100%;}

/******************************************************************jScrollPane Styles************************************************************************/
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 100;
	width: 260px;
	height: 448px;
	float: right;
	clear: right;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #dadada;
}
.jScrollPaneDrag {
	position: absolute;
	background: #0a0a0a;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}