/*********************************************************************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 {overflow: auto;}

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

body {background: #000000; position: relative; text-align: center; font: normal 62.5%/1.6em Verdana, Arial, Helvetica, sans-serif; color: #dddddd;}

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

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

#container {background: url(../images/bg1.jpg) no-repeat center center; position: relative; float: left; width: 100%; height: 100%; min-height: 575px; max-height: 800px;}

#about_container {background: url(../images/about_bg.jpg) no-repeat center center; position: relative; float: left; width: 100%; height: 100%; min-height: 575px; max-height: 800px;}

#container2 {position: relative; margin: 0 auto; height: 100%; width: 980px;}

/*****************************************************************HEADER styles*****************************************************************************/
#header {position: relative; width: 100%; height: 11%; min-height: 65px; z-index: 100;}

#header h1 {position: relative; float: left; top: 14px; left: 1px; width: 272px; height: 70px;}

#main_nav {position: relative; float: right; top: 41px; right: -6px; text-align: right; z-index: 50;}

#main_nav li {position: relative; float: left; padding: 2px 0 2px 0; border-left: 1px solid #ffffff;}

#main_nav li:first-child {border: none;}

#main_nav li a {font-family: Garamond, "Adobe Garamond Pro", "Times New Roman", Times, serif; font-size: 1.8em; line-height: 1em; font-weight: bold; text-decoration: none; color: #ffffff; padding: 0 6px 5px 8px;}

#main_nav li a:hover {color: #a8a8a8; text-decoration: underline;}

#main_nav li ul {background: #0e0e0e; width: 150px; display: none; position: absolute; left: -1px; top: 22px; padding: 4px 8px 4px 8px; border-left: 1px solid #ffffff; border-right: 1px solid #232323;}

#main_nav li:hover > ul {display: block;}

#main_nav li ul li {display: block; float: left; clear: both; width: 100%; text-align: left; border: none; padding: 2px 0 2px 0;}

#main_nav li ul li a {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.1em; padding: 8px 0 8px 0;}

#main_nav li ul li ul {background: #0e0e0e; width: 150px; display: none; position: absolute; left: 148px; top: -4px; padding: 4px 8px 4px 8px; border-left: 1px solid #232323; border-right: 1px solid #232323;}

#main_nav li ul li:hover > ul {display: block;}

#main_nav li ul li ul li {display: block; float: none; text-align: left; border: none; padding: 2px 0 2px 0;}

/***************************************************************CONTENT styles******************************************************************************/
#content {position: relative; clear: both; width: 100%; height: 82%; min-height: 465px; max-height: 600px; text-align: left; z-index: 1;}

#content p {margin: 0 0 10px 0; font-size: 1.1em; line-height: 1.4em; color: #e2e2e2;}

#content a {font-family: Garamond, "Adobe Garamond Pro", "Times New Roman", Times, serif; font-size: 1.4em; font-weight: bold; color: #ffffff;}

#content a:hover {text-decoration: none; color: #a8a8a8;}

#content h2 {position: relative; padding: 0 0 6px 0; margin: 0 0 5px 0; border-bottom: 1px solid #1c1c1c; text-indent: -9999px;}

#content h3 {font-weight: bold; font-size: 1.4em; margin: 0 0 2px 0; color: #ffffff; text-decoration: underline;}

#home_content_box {width: 440px; height: 458px; position: absolute; top: 50%; right: 0; margin: -235px 0 0 0;}

#content_box {background: url(../images/transparent_repeat.png); width: 420px; height: 438px; position: absolute; top: 50%; right: 0; margin: -235px 0 0 0; border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; padding: 10px;}

.scroll_content {position: relative; height: 100%; padding: 0 4px 0 0; overflow: auto;}

#blog_feed {background: url(../images/transparent_repeat.png); position: relative; height: 180px; padding: 10px; border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e;}

#blog_feed h2 {background: url(../images/latest_news_title.png) no-repeat top left; height: 19px;}

#blog_feed ul li {margin: 0 0 5px 0;}

#blog_feed ul li a {font-weight: bold;}

.read_more {position: absolute; right: 10px; bottom: 10px;}

#content .read_more a {font-size: 1.4em;}

#photography_button {position: absolute; bottom: 0; left: 12px; width: 199px; height: 241px;}

#photography_button a {width: 100%; height: 100%; display: block; border: 1px solid #a0a0a0; overflow: hidden;}

#painting_button {position: absolute; bottom: 0; right: 12px; width: 198px; height: 241px;}

#painting_button a {width: 100%; height: 100%; display: block; border: 1px solid #a0a0a0; overflow: hidden;}

#photography_button a:hover, #painting_button a:hover {border: 1px solid #ffffff;}

#about_title {background: url(../images/about_title.png) no-repeat top left; height: 22px;}

#accomplishments_title {background: url(../images/accomplishments_title.png) no-repeat top left; height: 22px;}

#contact_title {background: url(../images/contact_title.png) no-repeat top left; height: 19px;}

#contact_form input, #contact_form textarea {background: #000000; display: block; width: 412px; padding: 3px; margin: 0 0 5px 0; color: #e2e2e2; font-size: 1.2em;  font-family: Verdana, Arial, Helvetica, sans-serif; border: 1px solid #1e1e1e;}

#contact_form textarea {height: 150px; max-height: 150px; overflow: auto;}

#contact_form input:focus, #contact_form textarea:focus {border: 1px solid #2e2e2e;}

#contact_form #send {width: 75px; padding: 5px; font-family: Garamond, "Adobe Garamond Pro", "Times New Roman", Times, serif; color: #ffffff; font-size: 1.6em; font-weight: bold; text-decoration: underline;}

#contact_form #send:hover {cursor: pointer; border: 1px solid #2e2e2e; text-decoration: none; color: #a8a8a8;}

#contact_form .info {display: none;}

/***************************************************************FOOTER styles*******************************************************************************/
#footer {position: relative; clear: both; width: 100%; height: 6%;}

#social_icons {position: relative; float: left; clear: left; margin: -2px 0 0 0;}

#social_icons li {display: inline; margin: 0 7px 0 0;}

#social_icons li img {vertical-align: middle;}

#copyright {position: relative; float: right; clear: right; font-family: Garamond, "Adobe Garamond Pro", "Times New Roman", Times, serif; font-size: 1.4em; font-weight: bold; color: #ffffff; margin: 1px 0 0 0;}

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

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #1e1e1e;
	margin: 0 0 0 5px;
}
.jScrollPaneDrag {
	position: absolute;
	background: #e2e2e2;
	cursor: pointer;
	overflow: hidden;
	border-top: 8px solid #a8a8a8;
	border-bottom: 8px solid #a8a8a8;
}
.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;*/
}