/* @override http://creative.local:9503/jpc2/css/structure.css */

body {
	margin: 0;
	padding: 0;
}

#cornerLink {
	right: 0;
	top: 0;
	display: block;
	position: absolute;
	width: 400px;
	height: 400px;
}

#wrapper {
	margin: 0 auto;
	padding: 0 20px 20px;
	width: 940px;
	position: relative;
	text-align: left;
	height: 5000px;
}

.header {
	width: 940px;
	height: 53px;
	margin: 0;
	padding: 10px 0 0;
}

/* @group Navigation */

div#masthead {
	width: 100%;
	height: 40px;
	position: fixed;
	display: block;
	padding: 0;
	margin: 0;
	z-index: 1;
}

div#mastheadWrap {
	width: 940px;
	padding: 0;
	text-align: right;
	float: none;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

div#naviWrap {
	width: 300px;
	padding: 10px 0 0;
	z-index: 9999;
	height: 40px;
	margin: 0 0 0 auto;
}

ul#navigation {
	display: block;
	clear: none;
	margin-right: 60px;
	opacity: 0.7;
	background-image: url(../images/navi-bg.png);
	padding-top: 5px;
	padding-right: 22px;
	padding-bottom: 5px;
	float: right;
}

li.primaryNav {
	padding: 0;
	display: inline;
	float: left;
	width: 42px;
	height: 23px;
	margin: 0;
}

/* li selector added anchor tags below as Opera fix */

li.primaryNav a.nav-top {
	display: block;
	background: url(../images/navi-top.png) no-repeat center top;
	width: 31px;
	height: 23px;
	margin: 0 0 0 20px;
	padding: 0;
	float: right;
}

li.primaryNav a.nav-top:hover {
	display: block;
	background: url(../images/navi-top.png) no-repeat center bottom;
	width: 31px;
	height: 23px;
	margin: 0 0 0 20px;
	padding: 0;
	float: right;
}

li.primaryNav a.nav-port {
	display: block;
	width: 31px;
	height: 25px;
	background: url(../images/navi-port.png) no-repeat center top;
	margin: 0 0 0 20px;
	padding: 0;
	float: right;
}

li.primaryNav a.nav-port:hover {
	display: block;
	width: 31px;
	height: 25px;
	background: url(../images/navi-port.png) no-repeat center bottom;
	margin: 0 0 0 20px;
	padding: 0;
	float: right;
}

li.primaryNav a.nav-cont {
	display: block;
	background: url(../images/navi-contact.png) no-repeat center top;
	width: 31px;
	height: 23px;
	padding: 0;
	margin: 0 0 0 20px;
	float: right;
}

li.primaryNav a.nav-cont:hover {
	display: block;
	background: url(../images/navi-contact.png) no-repeat center bottom;
	width: 31px;
	height: 23px;
	padding: 0;
	margin: 0 0 0 20px;
	float: right;
}

/*a.selected {
	margin: 0;
	padding: 5px;
	color: #4b5457;
	text-decoration: underline;
}*/

/* @end */

/* @group inPage Navi */

.pageNavi {
	display: block;
	float: left;
}

.pageNavi ul {
	list-style-type: none;
	padding-left: 5px;
	display: inline;
	margin: 0;
	padding: 0;
	background-color: transparent;
}

.pageNavi li {
	list-style-type: none;
	padding-left: 10px;
	display: inline;
	margin: 0;
}

.pageNavi li a {
	list-style-type: none;
	display: inline;
	margin: 0;
}

.pageNavi.navetteAbout1 {
	margin: 0 0 5px;
	padding: 0;
	clear: left;
	position: relative;
	right: 10px;
	top: -160px;
}

.pageNavi.navettePortfolio6 {
	margin: 0;
	padding: 0;
	z-index: 2;
	position: relative;
	width: 70px;
	height: 40px;
	top: -2296px;
	float: left;
	clear: left;
	left: -34px;
}

.pageNavi.navettePortfolio5 {
	margin: 0;
	padding: 0;
	z-index: 2;
	position: relative;
	width: 50px;
	height: 40px;
	top: -1921px;
	float: left;
	clear: left;
	left: -14px;
}

.pageNavi.navettePortfolio4 {
	margin: 0;
	padding: 0;
	z-index: 2;
	position: relative;
	width: 50px;
	height: 40px;
	top: -1546px;
	float: left;
	clear: left;
	left: -14px;
}

.pageNavi.navettePortfolio3 {
	margin: 0;
	padding: 0;
	z-index: 2;
	position: relative;
	width: 50px;
	height: 40px;
	top: -1171px;
	float: left;
	clear: left;
	left: -14px;
}

.pageNavi.navettePortfolio2 {
	margin: 0;
	padding: 0;
	z-index: 2;
	position: relative;
	width: 50px;
	height: 40px;
	top: -796px;
	float: left;
	clear: left;
	left: -14px;
}

.pageNavi.navettePortfolioX {
	float: left;
	margin: 0;
	padding: 0;
	clear: left;
	position: relative;
	height: 40px;
	top: -10px;
	left: -10px;
}

.pageNavi.navetteContact {
	margin: 0 0 5px;
	padding: 0;
	position: relative;
	left: -10px;
	display: block;
	clear: left;
	top: 60px;
}

#navMarker-port6 {
	margin: 0 0 5px;
	padding: 0;
	position: relative;
	width: 20px;
	height: 20px;
	z-index: -1;
	float: left;
	clear: left;
	top: -2346px;
}

#navMarker-port5 {
	margin: 0 0 5px;
	padding: 0;
	position: relative;
	width: 20px;
	height: 20px;
	z-index: -1;
	float: left;
	clear: left;
	top: -1971px;
}

#navMarker-port4 {
	margin: 0 0 5px;
	padding: 0;
	position: relative;
	width: 20px;
	height: 20px;
	z-index: -1;
	float: left;
	clear: left;
	top: -1595px;
}

#navMarker-port3 {
	margin: 0 0 5px;
	padding: 0;
	position: relative;
	width: 20px;
	height: 20px;
	z-index: -1;
	float: left;
	clear: left;
	top: -1221px;
}

#navMarker-port2 {
	margin: 0 0 5px;
	padding: 0;
	position: relative;
	width: 20px;
	height: 20px;
	z-index: -1;
	float: left;
	clear: left;
	top: -846px;
}

a.inPageDown {
	background: transparent url(../images/navi-inPage-down.png) no-repeat center top;
	display: block;
	height: 25px;
	width: 31px;
	float: left;
	margin-right: 8px;
	position: relative;
	right: 6px;
}

a.inPageDown:hover {
	background: transparent url(../images/navi-inPage-down.png) no-repeat center -29px;
	display: block;
	height: 25px;
	width: 31px;
	float: left;
	margin-right: 8px;
	position: relative;
	right: 6px;
}

a.inPageDownPortArrow {
	background: transparent url(../images/navi-inPage-portArrow.png) no-repeat center top;
	display: none;
	height: 40px;
	width: 70px;
	float: left;
}

a.inPageDownPortArrow:hover {
	background: transparent url(../images/navi-inPage-portArrow.png) no-repeat center -49px;
	display: none;
	height: 40px;
	width: 70px;
	float: left;
}

a.inPageDownPort {
	background: transparent url(../images/navi-inPage-port.png) no-repeat center top;
	display: block;
	height: 40px;
	width: 50px;
	float: left;
}

a.inPageDownPort:hover {
	background: transparent url(../images/navi-inPage-port.png) no-repeat center -49px;
	display: block;
	height: 40px;
	width: 50px;
	float: left;
}

a.inPageUp {
	background: url(../images/navi-inPage-up.png) no-repeat center top;
	display: block;
	height: 25px;
	width: 31px;
	float: left;
	margin-right: 8px;
	position: relative;
	right: 6px;
}

a.inPageUp:hover {
	background: url(../images/navi-inPage-up.png) no-repeat center -29px;
	display: block;
	height: 25px;
	width: 31px;
	float: left;
	margin-right: 8px;
	position: relative;
	right: 6px;
}

a.inPageTop {
	background: url(../images/navi-inPage-top.png) no-repeat center top;
	display: block;
	height: 25px;
	width: 31px;
	float: left;
	margin-right: 8px;
	position: relative;
	right: 6px;
}

a.inPageTop:hover {
	background: url(../images/navi-inPage-top.png) no-repeat center -29px;
	display: block;
	height: 25px;
	width: 31px;
	float: left;
	margin-right: 8px;
	position: relative;
	right: 6px;
}

a.inPageBottom {
	background: url(../images/navi-inPage-bottom.png) no-repeat center top;
	display: block;
	height: 28px;
	width: 31px;
	float: left;
	margin-right: 8px;
	position: relative;
	right: 6px;
}

a.inPageBottom:hover {
	background: url(../images/navi-inPage-bottom.png) no-repeat center -29px;
	display: block;
	height: 28px;
	width: 31px;
	float: left;
	margin-right: 8px;
	position: relative;
	right: 6px;
}

/* @end */

.pageContent {
	padding: 0;
	margin: 0;
	float: left;
}

.spaceCell {
	width: 940px;
	height: 600px;
	float: left;
	margin-bottom: 40px;
}

.spaceCellLast {
	width: 940px;
	height: 660px;
	float: left;
	clear: both;
	padding-top: 340px;
}

div.section {
	width: 940px;
	position: relative;
	clear: both;
}

/* @group Home */

.hello {
	width: 440px;
	z-index: 3;
	margin-right: auto;
	margin-left: auto;
	margin-top: 160px;
	padding: 0;
	font-family: monaco, "lucidia console", verdana, "Courier New", Courier, mono;
	position: relative;
}

.welcome {
	width: 940px;
	font-family: monaco, "lucidia console", verdana, "Courier New", Courier, mono;
	float: left;
}

/* @end */

/* @group Portfolio */

#portfolioSection1 {
	width: 940px;
	margin: 0;
	padding: 0;
	float: left;
}

#portfolioSection2 {
	width: 940px;
	margin: 0;
	padding: 0;
	float: left;
}

#portfolioSection3 {
	width: 940px;
	margin: 0;
	padding: 0;
}

#portfolioSection4 {
	width: 940px;
	margin: 0;
	padding: 0;
}

#portfolioSection5 {
	width: 940px;
	margin: 0;
	padding: 0;
}

.alignLeft {
	width: 300px;
	float: left;
	margin: 0 20px 0 0;
	padding: 0;
	background-color: transparent;
}

.alignCenter {
	width: 300px;
	float: left;
	margin: 0;
	padding: 0;
	background-color: transparent;
}

.alignRight {
	width: 300px;
	float: right;
	margin: 0;
	padding: 0;
	background-color: transparent;
}

/* @end */

/* @group Contact */

.header.contact {
	width: 940px;
	height: 70px;
	margin: 0;
	padding: 60px 0 0;
}

#content-container {
	width: 940px;
	margin: 0 0 20px;
	padding: 0;
	float: left;
}

.leftColumn {
	padding-top: 15px;
	float: left;
	padding-left: 60px;
}

.rightColumn {
	width: 480px;
	background: url(../images/icon-email.png) no-repeat left 20px;
	margin: 0;
	padding: 79px 0 0;
	float: right;
}

div#contact-wrapper {
	margin: 0 0 0 5px;
	float: right;
	width: 480px;
	padding: 0;
}

div#address {
	display: block;
	background: url(../images/icon-snail.png) no-repeat -4px 4px;
	padding-top: 45px;
	padding-bottom: 0;
	margin: 0 0 5px;
}

div#telephone {
	display: block;
	background: url(../images/icon-phone.png) no-repeat left top;
	padding-top: 30px;
	clear: left;
	margin: 0 0 15px;
}

div#vcard {
	padding-top: 35px;
	margin: 0;
}

div#vcard a.download {
	background: url(../images/icon-vcard.png) no-repeat left top;
	display: block;
	height: 28px;
	width: 180px;
	padding-left: 65px;
	padding-top: 12px;
	letter-spacing: 2px;
	font: 2em Georgia, "Times New Roman", Times, serif;
	color: #cccccc;
}

div#vcard a.download:hover {
	background: url(../images/icon-vcard.png) no-repeat left -49px;
	width: 180px;
	height: 28px;
	padding-top: 12px;
	color: #ffcc00;
}

/* @end */

/* @group jQuery Elements */

/* @group Page Peel */

#pageflip {
	position: relative;
	right: 0;
	top: 0;
	float: right;
	z-index: 9999;
	display: none;
}

#pageflip img {
	width: 60px;
	height: 60px;
	z-index: 99;
	position: absolute;
	right: 0;
	top: 0;
	display: none;
}

#pageflip .msg_block {
	width: 55px;
	height: 55px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	background: url(../images/corner_bg.png) no-repeat right top;
	display: none;
}



/* @end */

/* @group Features Panel */

#features {
	width: 440px;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
	position: relative;
	top: -98px;
}

#jCarouselLite {
	width: 440px;
}

#jCarouselLite .carousel.jpc {
	width: 440px;
}

#jCarouselLite .carousel.jpc a:hover, #jCarouselLite .carousel.jpc a:active {
	outline: none;
}

#jCarouselLite .carousel.jpc .jCarouselLite {
	/* Needed for rendering without flicker */

position: relative;
	visibility: hidden;
	left: -5000px;
	float: left;
}

#jCarouselLite .carousel.jpc ul {
	margin: 0;
	padding: 0;
}

#jCarouselLite .carousel.jpc ul li {
	padding: 0;
	margin: 0;
	width: 440px;
	height: 400px;
}

/*#jCarouselLite .carousel.jpc li img {
	margin: 0;
	padding: 0;
	display: inline;
}*/

#jCarouselLite .carousel.jpc li p {
	float: left;
}

#jCarouselLite .mid {
	margin-left: 80px;
	width: 400px;
	height: 300px;
}

#jCarouselLite .vertical {
	margin-left: 170px;
}

#jCarouselLite .vertical .jCarouselLite {
	width: 440px;
}

#jCarouselLite .imageSlider li img, 
            #jCarouselLiteDemo .imageSlider li p, 
            #jCarouselLiteDemo .imageSliderExt li img , 
            #jCarouselLiteDemo .imageSliderExt li p {
	width: 300px;
	height: 300px;
}

/* @group Button Navi */

#features .carousel.jpc button.prev {
	float: left;
	position: relative;
	left: -25px;
	top: -210px;
	z-index: 2;
}

#features .carousel.jpc button.next {
	position: relative;
	float: right;
	top: -210px;
	left: 25px;
	z-index: 2;
}

#jCarouselLite .carousel.jpc button {


/*Don't remove this. we still use this for individual demos. only the front pages use images as of now*/
        float: left;
}

#jCarouselLite .carousel.jpc a.prev, #jCarouselLite .carousel.jpc a.next {
	display: block;
	float: left;
	width: 30px;
	height: 143px;
	text-decoration: none;
	background: url("/image/imageNavLeft.gif") left 60px no-repeat;
}

#jCarouselLite .carousel.jpc a.next {
	background: url("/image/imageNavRight.gif") right 60px no-repeat;
}

#jCarouselLite .carousel.jpc a.next:hover {
	background-image: url("/image/imageNavRightHover.gif");
}

#jCarouselLite .carousel.jpc a.prev:hover {
	background-image: url("/image/imageNavLeftHover.gif");
}



/* @end */

/* @end */

/* @group Sliding Boxes */

.boxgrid {
	width: 298px;
	height: 197px;
	background: #161613;
	overflow: hidden;
	position: relative;
	margin-bottom: 20px;
	padding: 0;
	margin-right: 0;
	margin-left: 0;
	display: block;
	float: left;
	border: 1px solid #666666;
	border-bottom: 2px solid #666666;
}

.boxgrid img {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}

.boxcaption {
	float: left;
	position: absolute;
	background: #000000;
	height: 132px;
	width: 100%;
	opacity: 0.8;
	padding-left: 24px;
	padding-top: 8px;
}


.captionfull .boxcaption {
	top: 200px;
	left: 0;
}

.caption .boxcaption {
	top: 50px;
	left: 0;
}

/* @end */

/* @group jkPanel */

#dropdownpanel {
	

/*Outermost Panel DIV*/  
	position: fixed;
	width: 100%;
	left: 0;
	z-index: 1100;
	visibility: hidden;
	padding: 0;
	margin: 0;
	height: 320px;
	background: #000 url(../images/slideup-bg.png) repeat-x;
	border-top: 1px solid #000;
}

#slideUpWrap {
	width: 940px;
	margin-right: auto;
	margin-left: auto;
	font-size: 1em;
}

#jkcontrol {
	color: #999999;
	text-align: center;
	background: url(../images/slideUp-tab.png) no-repeat center top;
	display: block;
	width: 280px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-transform: uppercase;
	bottom: 15px;
	padding-top: 26px;
	letter-spacing: 1px;
	font: .7em Verdana, "Lucida Grande", Lucida, sans-serif;
}

#jkcontrol:hover {
	color: #ffcc00;
	text-align: center;
	background: url(../images/slideUp-tab.png) no-repeat center top;
	display: block;
	width: 280px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-transform: uppercase;
	bottom: 15px;
	padding-top: 26px;
	font: .7em Verdana, "Lucida Grande", Lucida, sans-serif;
	letter-spacing: 1px;
}

#validation {
	width: 300px;
	display: block;
	margin: 0;
	float: right;
	text-align: center;
	text-transform: uppercase;
	padding: 10px 0 0;
	font-size: 1em;
}

#jkcontentdiv {
	color: black;
	margin: 0px auto;
	overflow: hidden;
	width: 940px;
	padding-bottom: 0;
	padding-top: 40px;
	display: block;
}

#status {
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	width: 260px;
	height: 260px;
	position: relative;
	top: -20px;
}

a#happeningNow {
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	width: 260px;
	height: 260px;
	background: url(../images/relaTemp.thumb.jpg) no-repeat -1px -2px;
	display: block;
}

.slideUp-left {
	float: left;
	width: 560px;
	margin: 0 0 25px;
	padding-top: 55px;
}

.slideUp-right {
	width: 260px;
	float: right;
	text-align: center;
	margin: 0;
	padding: 0;
}

div#left a {
	color: #999999;
	text-align: left;
	text-transform: uppercase;
	margin-left: 130px;
	padding: 0;
	margin-top: 11px;
	font: .7em Verdana, "Lucida Grande", Lucida, sans-serif;
	float: left;
}

div#left a:hover {
	float: left;
	color: #ffcc00;
	text-align: left;
	text-transform: uppercase;
	margin-left: 130px;
	margin-top: 11px;
	padding: 0;
	font: .7em Verdana, "Lucida Grande", Lucida, sans-serif;
}

div#copyright {
	width: 540px;
	float: left;
}

/* @end */

/* @end */