body {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	background-color: #e4e9ec;
}

img { 
	border:0px; 
}

a:link {
	color:#73BE1E;
}

a:hover,
a:visited {
 color:#00AFB9;
}

#shell {
	margin-top: 50px;
	width:840px;
}

#wrapper {
	width: 827px;
	height: 600px;
	float: left;
}

.bar {
	height: 600px;
}

.color-bar {
	height: 600px;
	float: left;
    width: 20px;
	background-color: #91A7BC;
    background-repeat: no-repeat;
	background-attachment: scroll;
    margin: 0px 1px 0px 1px;
	cursor: pointer;
	z-index: 100;
}

#left-bar {
	width: 33px;
	background-position: left top;
	background-image: url(images/left-bar.png);
	background-repeat: repeat-y;
	float: left;
}

#center-area {
	width: 761px;
	height: 600px;
	float: left;
	overflow: hidden;
}

#center-area .color-bar, 
#center-area .section-content{
   float: left;
} 

#center-area .section-content{
   display: none;
   width: 0px;
   overflow: auto;
	 background-color: #FFF;
	 height: 600px;
}

/* Content sections */
  
#portfolio {
	margin-left:3px;
	background-image: url(images/tabs.png);
	background-position: 2px 7px;
}

#portfolio:hover,
#portfolio.open {
	background-color: #FFCC00;
	background-image: url(images/tabs.png);
}

#services {
	background-image:url(images/tabs.png);
	background-position:-37px 7px;
}

#services:hover,
#services.open {
	background-color: #E8153E;
}

#resume {
	background-image:url(images/tabs.png);
	background-position:-77px 7px;
}

#resume:hover,
#resume.open {
	background-color: #1F58B8;
}

#contact {
	background-image:url(images/tabs.png);
	background-position:-116px 7px;
}

#contact:hover,
#contact.open {
	background-color: #00AFB9;
}

#about {
	background-image:url(images/tabs.png);
	background-position:-156px 7px;
}

#about:hover,
#about.open {
	background-color: #73BE1E;
}

/*#center-area #resume-content {
width:648px;
display:block;
}
*/
/* Inside content sections */

.frame {
	padding:15px;
	text-align: left;
	/* background-image: url(images/frame-bg.png); */
	background-repeat: repeat;
	height: 570px;
	overflow:hidden;
	width:618px;
}

#portfolio-content .frame {
	padding:0px 15px 15px;
}

.heading {
	font-size:22px;
	font-family: Helvetica, Arial, sans-serif;
	color: #333;	
}

.thumbnails {
	width:598px;
	height:440px;
	overflow:hidden;
	padding:90px 10px;
}

.thumbnails .thumb,
.thumbnails .thumb:hover {
	cursor:pointer;
	float:left;
	height:170px;
	margin:2px 8px;
	width:183px;
}

.thumbnails #packaging {
	background-image: url(images/portfolio-thumbs.jpg);
	background-position: 0px 0px;
}

.thumbnails #packaging:hover {
	background-image: url(images/portfolio-thumbs-over.jpg);
	background-position: 0px 0px;
}

.thumbnails #print {
	background-image: url(images/portfolio-thumbs.jpg);
	background-position: 382px 0px;
}

.thumbnails #print:hover {
	background-image: url(images/portfolio-thumbs-over.jpg);
	background-position: 382px 0px;
}

.thumbnails #photography {
	background-image: url(images/portfolio-thumbs.jpg);
	background-position: 183px 0px;
}

.thumbnails #photography:hover {
	background-image: url(images/portfolio-thumbs-over.jpg);
	background-position: 183px 0px;
}

.thumbnails #illustration {
	background-image: url(images/portfolio-thumbs.jpg);
	background-position: 0px 170px;
}

.thumbnails #illustration:hover {
	background-image: url(images/portfolio-thumbs-over.jpg);
	background-position: 0px 170px;
}

.thumbnails #identity {
	background-image: url(images/portfolio-thumbs.jpg);
	background-position: -199px 170px;
}

.thumbnails #identity:hover {
	background-image: url(images/portfolio-thumbs-over.jpg);
	background-position: -199px 170px;
}


#barcode {
	width: 648px;
	background-position: left top;
	background-image: url(images/center-bar.png);
	background-repeat: repeat-y;
	float: left;
	z-index: 100;
}

#right-bar {
	width: 33px;
	background: url(images/right-bar.png) scroll repeat-y left top;
	float: right;
}

#footer {
	background: url(images/footer.png) scroll no-repeat left top;
	width:900px;
	height:50px;
	padding-left:20px;
	clear:left;
}





/* Vertical scroll pane styles */

.navigation {
	display: inline;
	/* position:absolute; */
	width:608px;
	height:20px;
	display:block;
	/*top:620px; */
	/*top:15px; */
	/* z-index:100;*/
	/* position: relative;*/
}

.nav-button {
	border:none;	
	cursor: pointer;
	background:transparent;
	padding:0px;
	margin-top:10px;
}

.navigation .buttons {
width:65px;
float:right;
}

.navigation #down {
	background-image: url(images/navigation.png);
	width: 26px;
	height: 20px;
	background-position: -6px -2px;
	float:left;
	/* position: relative; */
	z-index:1000;
	margin-right:10px;
}

.navigation #down:hover {
	background-position: -6px 25px;
}

.navigation #up {
	background-image: url(images/navigation.png);
	width: 26px;
	height: 20px;
	background-position: -45px -2px;
	float:right;
	/* position: relative; */
}

.navigation #up:hover {
	background-position: -45px 25px;
}

.navigation .nav-icon {
float:left;
height:30px;
margin:0px 15px 0px 5px;
width:40px;
cursor: pointer;
}

.navigation .nav-icon-selected {
float:left;
height:30px;
margin:0px 15px 0px 5px;
width:40px;
}

.navigation #portfolio {
	background-image: url(images/navigation-icons.jpg);
	background-position: -13px -3px;
}

.navigation #portfolio:hover {
	background-position: -13px -44px;
}

.navigation #packaging {
	background-image: url(images/navigation-icons.jpg);
	background-position: -65px -3px;
}

.navigation #packaging:hover,
.navigation .nav-icon-selected#packaging {
	background-position: -65px -44px;
}

.navigation #print {
	background-image: url(images/navigation-icons.jpg);
	background-position: -112px -3px;
}

.navigation #print:hover,
.navigation .nav-icon-selected#print {
	background-position: -112px -44px;
}

.navigation #photography {
	background-image: url(images/navigation-icons.jpg);
	background-position: -168px -3px;
}

.navigation #photography:hover,
.navigation .nav-icon-selected#photography {
	background-position: -168px -44px;
}

.navigation #illustration {
	background-image: url(images/navigation-icons.jpg);
	background-position: 85px -3px;
}

.navigation #illustration:hover,
.navigation .nav-icon-selected#illustration {
	background-position: 85px -44px;
}

.navigation #identity {
	background-image: url(images/navigation-icons.jpg);
	background-position: 34px -3px;
}

.navigation #identity:hover,
.navigation .nav-icon-selected#identity {
	background-position: 34px -44px;
}


ul, li, h4, h3, h2, h1, p {
	padding:0;
	margin:0;
	list-style:none;
}

.next, .prev{
	cursor:pointer;
}

#screen{
	/* position:relative; */
	height:540px;
	width:618px;
}
	#screen .next, #screen .prev{
		position:absolute;
		top:200px;
	}
	#screen .prev{
		left:10px;
	}
	#screen .next{
		right:85px;
	}

/*	#navigation{
		width:600px;
		text-align:center;
		margin-left:62px;
	}
		#navigation ul{
			margin-left:55px !important;
			margin-left:35px;
		}
			#navigation li{
				float:left;
				margin:0 20px;
				padding:10px 20px;
				background-color:#EEE;
			}
				#navigation a{
					color:#933;
					font-weight:bolder;
					text-decoration:none;
				}
	*/
#sections {
	overflow:hidden;
	width:618px;
	height:555px;
	/*clear:left;*/
}
	
	#sections ul{
		height:3660px;
	}
	
		#sections li {
			float:left;
			width:618px;
			height:545px;
			text-align: center;
		}
			
			#sections p {
			color:#777777;
			font-family:Helvetica, Arial, sans-serif;
			font-size:11px;
			line-height:120%;
			margin:4px 0pt;
			width:617px;
			}
			
			#sections h2{
				color:#993333;
				margin:20px 0pt;
			}
			#sections a{
				color:#777;
				font-weight:bolder;
				text-decoration:none;
			}


h1 {
	margin:20px 0;
	color:#5B739C;
}
	h1 strong{
		font-size:13px;
		color:#777;
	}
	
.description {
	border-top: 1px dotted #a5a5a5;
	text-align: left;
	padding: 5px 2px;
	/* margin-top:-3px;*/
	z-index: 100;
}

span.title {
	font-family:Arial, sans-serif;
	color:#333333;
	font-size:13px;
}

span.gray-text {
	font-family:Arial, sans-serif;
	color:#777777;
	font-size:14px;
}


.holder {
 float: left;
 margin: 10px;
}

.scroll-pane {
 width: 618px;
 overflow: auto;
 float: left;
}

#resume-pane {
 height: 463px;
}

#resume-pane, 
#resume-pane p {
 font-size:12px;
 color: #5C697B;
}

#resume-pane p {
 margin-top:7px;
}

#resume-pane td {
 width:265px;
}

#resume-pane td.one {
 width:240px;
}

.res-section {
 margin:5px 0px 20px;
}

.res-heading {
color:#103466;
font-size:16px;
 text-transform: uppercase;
 margin-bottom: 8px;
}

.res-subhead {
color:#091629;
}

.jScrollPaneDrag,
.jScrollPaneTrack {
width:13px;
}

.jScrollPaneDrag {
background:#8fa5ba none repeat scroll 0%;
}

.jScrollPaneTrack {
background:#e9edf1 none repeat scroll 0%;
}
			
a.jScrollArrowUp {
	background: url(basic_arrow_up.gif) no-repeat 0 0;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	background: url(basic_arrow_down.gif) no-repeat 0 0;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}

#service-pane {
margin:70px 0px 70px 25px;
}

.service {
	width:280px;
	height:165px;
	float:left;
	font-size:11px;
	color:#5C697B;
}

.service-img {
width:125px;
height:125px;
background-image: url(images/services.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
float:left;
}

.desc {
float:left
width:160px;
}

#services-content #packaging {
background-position: 0px 0px;
}

#services-content #print {
background-position: -147px 0px;
}

#services-content #illustration {
background-position: -294px 0px;
}

#services-content #photography {
background-position: -441px 0px;
}

#services-content #identity {
background-position: -588px 0px;
}

.serv-head {
font-size:15px;
color:#103466;
}

#about-content p {
 font-size:12px;
 color: #5C697B;
 margin-bottom:20px;
}