/* COLORS 
medium blue: 	#367EA8
dark grey:   	#262626
orange:      	#E66C0E
light blue:  	#B5D5E6
light green: 	#C3D49F
brown:			#4C453E
tan:			#D3C49B  */

/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

/* LAYOUT */
body {background-image: url(../assets/bg.jpg); background-color: #FFFFFF; background-repeat: repeat-x;}
#container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* TYPE */
p {padding-bottom:15px}

a { color: #E66C0E; }
a:link, a:visited, a:active { text-decoration: none; }
a:visited {color: #E66C0E;}
a:hover {color:#B5D5E6; text-decoration: none; }

strong, b { font-weight:bold; }
em, i { font-style:italic; }

.pdflink { font-weight:bold; display:inline-block; background: url(../assets/pdficon.gif) no-repeat; padding-left: 24px; height:17px}

/* CONTAINER */
#container { width:1024px; height:561px; margin: 0 auto; position: relative; background-color:#fff; padding-bottom:32px; background-image:url(../assets/mojobg.jpg); background-repeat:repeat-x}

/* NAVIGATION */
#navigation {width:612px; height:21px; margin: 0 auto; position: relative; top:20px; left:93px; background-image:url(../assets/nav.gif); background-repeat:no-repeat; z-index: 9998;}
#navigation #nav {margin: 0; padding: 0; }
#navigation #nav li {display: inline; }
#navigation #nav li a {float: left; height: 0; padding-top: 21px; overflow: hidden; background-image: url(../assets/nav.gif); _background-image: url(../assets/nav.gif); background-repeat: no-repeat; }

/* NAV DEFAULT STATES */
#navigation #nav li#portfolio a {width:127px; background-position: 0 0; }
#navigation #nav li#philosophy a {width:124px; background-position: -127px 0; }
#navigation #nav li#resume a {width:94px; background-position: -251px 0; }
#navigation #nav li#contact a {width:99px; background-position: -345px 0; }
#navigation #nav li#about a {width:91px; background-position: -444px 0; }
#navigation #nav li#blog a {width:77px; background-position: -535px 0; }

/* NAV OVER STATES */
#navigation #nav li#portfolio a:hover { background-position: 0 -20px; }
#navigation #nav li#philosophy a:hover { background-position: -127px -20px; }
#navigation #nav li#resume a:hover { background-position: -251px -20px; }
#navigation #nav li#contact a:hover { background-position: -345px -20px; }
#navigation #nav li#about a:hover { background-position: -444px -20px; }
#navigation #nav li#blog a:hover { background-position: -535px -20px; }

/* NAV ON STATES */
#navigation.portfolio #nav li#portfolio a { background-position: 0 -40px !important; cursor: default; }
#navigation.philosophy #nav li#philosophy a { background-position: -127px -40px !important; cursor: default;}
#navigation.resume #nav li#resume a { background-position: -251px -40px !important; cursor: default;}
#navigation.contact #nav li#contact a { background-position: -345px -40px !important; cursor: default;}
#navigation.about #nav li#about a { background-position: -444px -40px !important; cursor: default;}
#navigation.blog #nav li#blog a { background-position: -535px -40px !important; cursor: default;}

/* SUBNAVIGATION */
#subnavigation {width:612px; height:20px; margin: 0 auto; position: relative; top:24px; left:93px; background-image:url(../assets/subnav.gif); background-repeat:no-repeat; z-index: 9997;}
#subnavigation #subnav {margin: 0; padding: 0; }
#subnavigation #subnav li {display: inline; }
#subnavigation #subnav li a {float: left; height: 0; padding-top: 20px; overflow: hidden; background-image: url(../assets/subnav.gif); _background-image: url(../assets/subnav.gif); background-repeat: no-repeat; }

/* SUBNAV DEFAULT STATES */
#subnavigation #subnav li#print a {width:72px; background-position: 0 0; }
#subnavigation #subnav li#web a {width:56px; background-position: -72px 0; }
#subnavigation #subnav li#illustration a {width:90px; background-position: -128px 0; }
#subnavigation #subnav li#logos a {width:64px; background-position: -218px 0; }
#subnavigation #subnav li#kids a {width:119px; background-position: -282px 0; }

/* SUBNAV OVER STATES */
#subnavigation #subnav li#print a:hover { background-position: 0 -20px; }
#subnavigation #subnav li#web a:hover { background-position: -72px -20px; }
#subnavigation #subnav li#illustration a:hover { background-position: -128px -20px; }
#subnavigation #subnav li#logos a:hover { background-position: -218px -20px; }
#subnavigation #subnav li#kids a:hover { background-position: -282px -20px; }

/* SUBNAV ON STATES */
#subnavigation.print #subnav li#print a { background-position: 0 -40px !important; cursor: default; }
#subnavigation.web #subnav li#web a { background-position: -72px -40px !important; cursor: default;}
#subnavigation.illustration #subnav li#illustration a { background-position: -128px -40px !important; cursor: default;}
#subnavigation.logos #subnav li#logos a { background-position: -218px -40px !important; cursor: default;}
#subnavigation.kids #subnav li#kids a { background-position: -282px -40px !important; cursor: default;}

/* CONTENT BOXES */
#homelink { height: 60px; width: 180px; position: absolute; top:41px; left:32px; }
#homelink a {display:block; height: 60px; width: 180px;}
#textbox {width:240px; position: relative; top:84px; left:39px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#262626; line-height:14px}
#textboxsolo {width:240px; position: relative; top:104px; left:39px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#262626; line-height:14px}
#artbox {width:707px; height:428px; position: absolute; top:100px; left:299px;}
#noscript {text-align:center; font-style:italic; color:#4C453E; margin-top:160px}
#words {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#262626; line-height:14px; margin-left:57px; margin-right:50px}

/* FILMSTRIP */
#filmstrip {width:1024px; margin: 0 auto; position: relative;}
#filmstrip .thumbs li {display:inline; float:left; margin-top:7px; margin-left:9px; cursor:pointer}
#filmstrip .thumbs li img {margin-top:0px!important;}
.caption{display:none;}
#arrows {margin: 0 auto; position: absolute; top:404px; text-align:center; width:100%; z-index:999}

/* SCROLLER */
.jScrollPaneContainer {position: relative; overflow: hidden; z-index: 1;}
.jScrollPaneTrack {position: absolute; cursor: default; right: 0; top: 0; height: 100%; background: url(../assets/scroller_track.gif) repeat-y;}
.jScrollPaneDrag {position: absolute; background: url(../assets/scroller_drag_middle.gif) repeat-y 0 50%; cursor: default; overflow: hidden;}
.jScrollPaneDragTop {position: absolute; top: 0; left: 0; overflow: hidden; background: url(../assets/scroller_drag_top.gif) no-repeat; height: 10px;}
.jScrollPaneDragBottom {position: absolute; bottom: 0; left: 0; overflow: hidden; background: url(../assets/scroller_drag_bottom.gif) no-repeat; cursor: default; height: 10px;}
.scroll-pane {width: 707px; overflow: auto; float: left; height: 428px; margin: 0px;}