@charset "utf-8";
/* CSS Document */
*, html { outline: 0; }

body {
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	margin:0; padding:0;
	background:url(images/bg.jpg) center repeat-y;
	outline:none;
}

h1 { text-indent:-9999px; line-height:32px; }
p { 
	font-size:12px;
	line-height:21px;
	color:#002c6a;
	padding:23px 125px 0 40px;
}

a { color:#002c6a; }

p.hPara2 {
	font-size:12px;
	line-height:21px;
	color:#002c6a;
	padding:8px 125px 0 150px;
}

p.cpPara2 {
	font-size:12px;
	line-height:21px;
	color:#002c6a;
	padding:9px 125px 0 40px;
}

#container {
	width:840px;
	height:749px;
	margin:auto;
	background:url(images/flowerBackdrop.png) top left no-repeat;
	text-align:left;
	position:relative;
}

#containerPF {
	width:840px;
	height:749px;
	margin:auto;
	background:url(images/portfolioBack.jpg) top left no-repeat;
	text-align:left;
	position:relative;
}

#nav {
	position:relative;
	width:314px;
	height:140px;
	float:left;
}
#nav ul {
	margin:13px 0 0 92px; padding:0;
	float:left;
	display:inline;
}

#nav ul li {
	margin:0; padding:0;
	list-style:none;
	display:block;
	width:175px;
	height:40px;
}

#nav ul li a {
	margin:0; padding:0;
	display:block;
	width:175px;
	height:40px;
	text-indent:-9999px;
}
#nav ul li.about a { background:url(images/aboutBut.jpg) no-repeat; }
#nav ul li.portfolio a { background:url(images/portfolioBut.jpg) no-repeat; }
#nav ul li.contact a { background:url(images/contactBut.jpg) no-repeat; }

#nav ul li a:hover { background-position: 0 -40px;}

#testimonial {
	width:297px;
	position:absolute;
	left: 409px;
	top: 508px;
	z-index:200;
}

.aboutTest { height:232px; background:url(images/aboutTestimonial.png) no-repeat; }
.portTest { height:194px; background:url(images/portLinks.jpg) no-repeat; }
.contactTest { height:232px; background:url(images/contactTestimonial.png) no-repeat; }

#portfolioLinks {
	width:297px;
	height:194px;
	float:left;
	margin:0 0 0 394px;
	background:url(images/portLinks.jpg) no-repeat;
	display:inline;
}

#portMenu {
	width:532px;
	height:135px;
	position:absolute;
	left: 267px;
	top: 614px;
	z-index:200;
}

.portLinks { background:url(images/portlinks2.jpg) no-repeat; }


#mainPanel {
	position:relative;
	width:485px;
	height:537px;
	float:left;
}

.aboutBg { background:url(images/aboutBG.jpg) left no-repeat; }
.contactBg { background:url(images/contactBG.jpg) left no-repeat; }
.portfolioBg { background:url(images/portfolioBG.jpg) left no-repeat; }

#mainPanelPF {
	position:relative;
	width:485px;
	height:240px;
	float:left;
}

.web { background:url(images/webBG.jpg) left no-repeat; }
.print { background:url(images/printBG.jpg) left no-repeat; }
.illustration { background:url(images/illustrationBG.jpg) left no-repeat; }

/* Portfolio Display Panel */

#dispPanel {
	position:relative;
	width:400px;
	height:342px;
	float:left;
	margin:30px 0 0 296px;
	display:inline;
	border-top:2px solid #f1f2f2;
	border-left:2px solid #f1f2f2;
	border-right:2px solid #f1f2f2;
	background:url(images/dispPanelBG.gif) no-repeat;
}

/* Portfolio Menu */

#portfolioLinks ul, #portMenu ul {
	width:142px;
	height:83px;
	display:inline-block;
	margin:88px 0 0 44px;
	padding:0;
	float:left;
	z-index:50;
}

#portMenu ul { margin:27px 0 0 134px; }



#portfolioLinks ul li, #portMenu ul li {
	width:142px;
	list-style:none;
}

#portfolioLinks ul li a, #portMenu ul li a {
	width:142px;
	display:block;
	text-indent:-9999px;
}

#portfolioLinks ul li.illustration a, #portMenu ul li.illustration a { height:29px; background:url(images/illustrationBut.gif) no-repeat; }
#portfolioLinks ul li.print a { height:28px; background:url(images/printBut.gif) no-repeat; }
#portMenu ul li.print a { height:28px; background:url(images/printBut2.gif) no-repeat; }
#portfolioLinks ul li.web a, #portMenu ul li.web a { height:26px; background:url(images/webBut.gif) no-repeat; }

#portfolioLinks ul li.illustration a:hover, #portMenu ul li.illustration a:hover { background-position:0 -29px; }
#portfolioLinks ul li.print a:hover, #portMenu ul li.print a:hover { background-position:0 -28px; }
#portfolioLinks ul li.web a:hover, #portMenu ul li.web a:hover { background-position:0 -26px; }

/* == GLIDER == */

div.scroller { 
	/* modify width and height of scrolling section if necessary	*/		
	width: 400px; 
	height: 340px;
	overflow: hidden;
	}
div.scroller div.section {
	/* modify width and height of each section as needed (should match the size of the scroller window)	*/		
	width:400px;
	height:340px;
	overflow:hidden;
	float:left;
	
	}

div.scroller div.section p {
padding:0; margin:3px 10px;
}
div.scroller div.content {
	width: 10000px;
	}

#fade {
	width:140px;
	height:28px;
	background:url(images/fade.png) no-repeat;
	position:absolute;
	left:260px;
	top:314px;
	z-index:150;
}
	
.prevBut, .nextBut {
	position:absolute;
	width:20px;
	height:20px;
	z-index:200;
}

.prevBut {
	left:344px;
	top:315px;
}
.nextBut {
	left:373px;
	top:315px;
}

.prevBut a, .nextBut a {
	display:block;
	width:20px;
	height:20px;
	text-decoration:none;
}

div.scroller div.section h2 { font-size:16px; color:#101360; margin:3px 10px; text-decoration:none; }
div.scroller div.section h2 a { margin:0; padding:0;  color:#101360; text-decoration:none; }
div.scroller div.section h3 { font-size:14px; font-weight:bold; color:#949698; margin:3px 10px;}

div.scroller div.section .imgBox { width:400px; height:300px; background:#fff; margin:0; padding:10px 0 0 0; text-align:center; }
div.scroller div.section .textBox { width:400px; height:30px; text-align:left; padding:2px 0 0 0; }