/* JP74.com */

/* "do you play hockey?" */

/*colours
orange: #f86637;
grey: #868686;
dark grey: #151515;
lines: #2a2a2a;
*/

a:focus {
	color: #f86637;
	border-bottom: 1px solid #f86637 !important;
}

input[type="submit"]:focus, blockquote a:focus {
	background-color: #f86637 !important;
	color: #000 !important;
	text-shadow: #f86637 0 0 1px !important;
}

body {
	color: #868686;
	font: 62.5%/1.6em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	padding-bottom: 30px;
	background-color: #000;
}

p {
	margin-bottom: 1.4em;
}

p.smaller {
	font-size: 0.9em;
	margin-bottom: 1.7em;
}

strong {
	font-weight: bold;
}

cite {
	font-weight: normal;
	font-style: normal;
}

div.clearing {
	clear: both;
}

#wrapper {
	width: 928px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
}

a {
	text-decoration: none;
	color: #868686;
}

a:hover {
	color: #fff;
}

a:active {
	color: #f86637;
}

a span {
	display: none;
}

a img {
	border-bottom-style: none !important;
}

a.skip {
	display: none;
}

/* @group header and nav */

#header {
	margin-top: 48px;
	position: relative;
	height: 80px;
	border-bottom: 1px solid #2a2a2a;
	font-size: 1.2em;
}

#header #jp74, #header #digital {
	text-indent: -5000px;
}

#header #jp74 {
	background: url(../images/jp74.gif) no-repeat;
	width: 43px;
	height: 39px;
	position: absolute;
	right: -7px;
	top: 0;
}

#header #digital {
	background: url(../images/digital_that_delivers.gif) no-repeat;
	width: 112px;
	height: 38px;
	position: absolute;
	top: 0;
	left: 0;
}

#header ul {
	margin-left: 238px;
	width: 345px;
}

#header li {
	float: left;
	width: 115px;
	height: 26px;
	/*text-shadow: #000 0 0 1px;*/
}

#header li a {
	color: #868686;
}

#header li a:hover {
	color: #fff;
}

#header li a:visited {

}

body#pHome li#m1 a, body#pServices li#m2 a, body#pClients li#m3 a, body#pProfile li#m4 a, body#pProjects li#m5 a, body#pContact li#m6 a {
	color: #f86637;
}

#jp74 a {
	width: 43px;
	height: 39px;
	display: block;
}

#digital a {
	display: block;
	width: 112px;
	height: 38px;
}

/* @end */

#attract-mode {
	font-size: 1.2em;
	height: 360px;
	position: relative;
	background: url(../images/attract_mode_bg_full.jpg) no-repeat -320px -138px;
	margin-top: -20px;
}

#attract-mode.closed {
	height: 30px;
	border-bottom: 1px solid #373737;
	margin-bottom: 30px;
	display: block;
	overflow: hidden;
}

body#pHome #attract-mode {
	height: 415px;
}

#attract-mode blockquote, #attract-mode div.attract-text {
	line-height: 1.15em;
	width: 390px;
	font-size: 1.7em;
	position: absolute;
	top: 85px;
	left: 25px;
}

#attract-mode div.attract-text h1 {
	color: #fff;
	text-shadow: #000 0 0 2px;
	line-height: 1.6em;
}

#attract-mode blockquote.hide-at-start, #attract-mode div.hide-at-start {
	display: none;
}

#attract-mode blockquote p, #attract-mode div.attract-text p {
	text-shadow: #000 0 0 2px;
	line-height: 1.1em;
}

#attract-mode blockquote p strong, #attract-mode div.attract-text strong {
	font-weight: normal;
	font-style: normal;
	color: #fff;
	line-height: 1.6em;
}

#attract-mode blockquote p cite {
	font-size: 0.7em;
	line-height: 1.1em;
}

#attract-mode blockquote p cite .name {
	color: #fff;
}

#attract-mode h3 a {
	color: #fff;
	font-size: 0.6em;
	text-shadow: #000000 0px 0px 0;
	background: url(../images/arrow_left_orange.gif) no-repeat 0 center;
	padding-left: 10px;
	text-shadow: #000 0 0 2px;
}

#attract-mode h3 a:hover {
	color: #f86637;
}

#attract-mode blockquote p a {
	font-size: 0.57em;
	background-color: #868686;
	color: #000;
	text-shadow: #868686 0 0 1px;
	font-weight: normal;
	font-style: normal;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-opera-border-radius: 5px;
	border-radius: 5px;
	line-height: 2em;
	padding: 3px 5px;
}

#attract-mode blockquote p a:hover {
	background-color: #fff;
	color: #000;
	text-shadow: #fff 0 0 1px;
}

#attract-mode blockquote p a:active {
	background-color: #f86637;
	color: #000;
	text-shadow: #f86637 0 0 1px;
}

#showcase {
	position: absolute;
	background: url(../images/macbook.png) no-repeat;
	width: 461px;
	height: 269px;
	right: 0;
	top: 68px;
}

#showcase #showcase-cases, #showcase #showcase-link {
	position: absolute;
	display: block;
	top: 13px;
	left: 65px;
	width: 332px;
	height: 208px;
	overflow: hidden;
}

#showcase #showcase-cases {
	background: #141414 url(../images/jp_screen_logo.gif) no-repeat center center;
}

#showcase #showcase-link {
	text-indent: -5000px;
	background: url(../images/screen.png) no-repeat;
	z-index: 100;
}

#showcase #showcase-cases li {
	position: absolute;
	top: 0;
	left: 0;
}

p.toggle a {
	display: block;
	height: 16px;
	background: url(../images/arrow_up.gif) no-repeat 0 3px;
	text-decoration: none;
	padding-left: 14px;
	font-size: 1.11em;
	padding-bottom: 5px;
	border-bottom: none !important;
}

p.toggle a:hover, p.toggle a:focus {
	color: #f86637;
	background: url(../images/arrow_up.gif) no-repeat 0 -17px;
}

div#accordion.closed p.toggle a {
	background: url(../images/arrow_down.gif) no-repeat 0 3px;
}

div#accordion.closed p.toggle a:hover, div#accordion.closed p.toggle a:focus {
	background: url(../images/arrow_down.gif) no-repeat 0 -17px;
}

#content {
	font-size: 1.2em;
	position: relative;
	width: 100%;
}

#content a {
	text-decoration: none;
	border-bottom: 1px solid #3b3b3b;
}

#content a:hover {
	border-bottom: 1px solid #f86637;
}

#content .client-list a {
	color: #868686;
	border: none;
}

#content a:active {
	border-bottom: 1px solid #f86637;
	color: #f86637;
}

div#content {
	background: url(../images/lines_1_1_2.gif) no-repeat 0 0;
	/*background: url(../images/baseline_16.gif) no-repeat 0 35px;*/
}

#pProfile #content {
	background: url(../images/lines_1_1_1_1.gif) no-repeat 0 50px;
}

#pProjects .projects {
	background: url(../images/lines_4.gif) no-repeat 0 50px;
}

#pSitemap .projects {
	background: url(../images/lines_4.gif) no-repeat 0 50px;
}

#pProjects .project, #pServices #content, #pClients #content, #pContact #content {
	background: url(../images/lines_1_1_2.gif) no-repeat 0 50px;
}

body#pProjects #footer {
	background: url(../images/lines_4.gif) no-repeat 0 top;
}

body#pProfile #footer {
	background: url(../images/lines_1_1_1_1.gif) no-repeat 0 top;
}

#footer, body#pProjects.details #footer {
	background: url(../images/lines_1_1_2.gif) no-repeat 0 top;
}

/*div#content.contact {
	margin-top: 34px;
}*/

#content h3 {
	font-size: 1.75em;
	text-shadow: #000 0 0 2px;
	margin-top: 4px;
	height: 51px;
	line-height: 1em;
	font-weight: normal;
	font-style: normal;
}

#content h4 {
	color: #f86637;
	font-size: 1.1em;
	margin-bottom: 1.3em;
	line-height: 1.2em;
}

#content.project h4 {
	padding-top: 20px;
}

#content.project h4 span {
	color: #868686;
	margin-left: 5px;
}

#content.project h4 a {
	border-bottom-style: none !important;
}

#content.project h4 a:hover {
	border-bottom: 1px solid #f86637 !important;
}

#content h5 {
	color: #fff;
	font-size: 1.1em;
	line-height: 1.2em;
	margin-bottom: 1.25em;
}

#content p.sub-header {
	color: #fff;
	margin-top: -1.4em;
}

#accordion {
	padding-top: 10px;
}


.data {
	overflow: hidden;
	position: relative;
}

#footer {
	height: 200px;
}

#footer ul {
	float: left;
	padding-top: 14px;
}

#footer li {
	float: left;
	margin-right: 10px;
}

/* @group home items */

div.subscribe-link, div.news, div.featured-projects {
	float: left;
	padding-top: 20px;
}

div.subscribe-link, div.news {
	width: 220px;
	margin-right: 16px;
}


div.featured-projects {
	width: 456px;
}


form#subscribe {
	padding: 0;
	margin: 0;
}

form#subscribe label, form#enquiry label {
	display: none;
}

form#subscribe p, form#enquiry p {
	background-color: #151515;
	margin-bottom: 1em;
	padding-top: 3px;
	padding-bottom: 3px;
}

form#enquiry p.enquiryPara {
	height: auto;
}


form#subscribe p.submit, form#enquiry p.submit {
	background-color: transparent !important;
}

form#subscribe input.txtFld, form#enquiry input.txtFld {
	background-color: transparent;
	border-style: none;
	color: #868686;
	font: 1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	width: 210px;
	padding-left: 5px;
	padding-right: 5px;
	height: 18px;
}

form#enquiry input.txtFld {
	width: 446px;
}

form#enquiry textarea {
	color: #868686;
	background-color: transparent;
	border-style: none;
	font: 1em/1.6em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	width: 450px;
	padding-top: 3px;
	padding-left: 3px;
	height: 100px;
}

form#subscribe input.txtFld:focus, form#enquiry input.txtFld:focus, form#enquiry textarea:focus {
	color: #fff;
}

div.news-item, div.projects-item, div.subs-link-item {
	margin-bottom: 2.8em;
}

div.subs-link-item {
	margin-bottom: 3.3em;
}

input#btnSubmit, .submit input {
	font: 1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	background-color: #868686;
	color: #000;
	border-style: none;
	padding: 3px 5px;
	font-weight: normal;
	font-style: normal;
	text-shadow: #868686 0 0 1px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-opera-border-radius: 5px;
	border-radius: 5px;
}

input#btnSubmit:hover, .submit input:hover {
	background-color: #fff;
	color: #000;
	text-shadow: #fff 0 0 1px;
}

input#btnSubmit:active, , .submit input:active {
	background-color: #f86637;
	color: #000;
	text-shadow: #f86637 0 0 1px;
}

#content div.news-item h4, #content div.featured-projects h4 {
	color: #868686;
}

p.submit a {
	background-color: #151515;
	padding: 3px 5px;
	border-style: none !important;
}

/* @end */

div.service-list,
div.examples,
div.service-description,
div.client-list,
div.client-quote,
div.project-info,
div.project-pics,
div.contact-details,
div.follow-us,
div.profile-details,
div.profile-intro,
div.profile-points {
	float: left;
	padding-top: 14px;
	margin-bottom: 14px;
	padding-bottom: 1.4em;
}

div.service-list,
div.examples,
div.client-list,
div.project-info,
div.contact-details,
div.follow-us,
div.profile-details,
div.profile-intro,
div.profile-points {
	width: 220px;
	margin-right: 16px;
}

div.profile-intro {
	margin-right: 0;
}

div.profile-points {
	margin-left: 16px;
	margin-right: 0;
}

div.service-description,
div.client-quote,
div.project-pics,
div.profile-details {
	width: 456px;
}

.service-details {
	overflow: hidden;
}

div.service-list ul,
div.examples ul {
	padding-left: 1.4em;
}

div.examples h4 span {
	display: none;
}

div#content.profile div.examples {
	margin-right: 0;
}

div.service-list li, div.examples li {
	line-height: 1.4em;
	list-style-type: disc;
}

div.service-list li a, div.examples li a {
}

#content div.service-list a, #content div.examples a {
	text-decoration: none;
}

div.service-list li a.on {
	color: #fff !important;
}

div.client-quote blockquote p {
	font-size: 1.7em;
	line-height: 1em;
	text-shadow: #000 0 0 2px;
	margin-bottom: 0.95em;
}

div.client-quote blockquote cite {
	font-size: 0.6em;
	text-shadow: none;
	color: #fff;
	line-height: 1.35em;
}
div.client-quote blockquote span.job-title {
	color: #868686;
}

div.client-quote blockquote span.company {
	color: #f86637;
}

div.client-list li.on {
	color: #fff;
}

div.client-list li {
	line-height: 1.4em;
}

div.project-pics-gallery {
	margin-left: 60px;
	position: relative;
	background: url(../images/xx.gif) repeat-y;
	min-height: 417px;
	height: auto !important;
	height: 417px;
}

div.project-pics li {
	margin-right: 35px;
	margin-bottom: 25px;
	width: 148px;
	height: 115px;
	position: relative;
	display: inline;
	float: left;
}

div.project-pics li img {
	position: absolute;
	top: 0;
	left: 0;
}

div.project-pics li a {
	text-indent: -5000px;
	width: 148px;
	height: 115px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 50;
	border-style: none !important;
	display: block;
	background: url(../images/blank.gif);
}

div.project-pics li a:hover, div.project-pics li a:focus {
	background: url(../images/project_highlight_border.gif) no-repeat;
}

div#project-boxes {
	margin: 20px 0px;
	position: relative;
	width: 100%;
}

div#project-boxes .thumbnails li {
	float: left;
	position: relative;
	width: 220px;
	margin-right: 16px;
	background-color: #151515;
	height: 194px;
	list-style-type: none;
}

div#project-boxes .thumbnails li.no-margin {
	margin-right: 0;
}

div#project-boxes .thumbnails li strong {
	color: #fff;
	font-weight: normal;
	font-style: normal;
}

div#project-boxes .thumbnails li p {
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 10px;
}

div#project-boxes .thumbnails li a {
	width: 220px;
	position: absolute;
	top: 0;
	left: 0;
	height: 190px;
	text-indent: -5000px;
	border-bottom: 4px solid #151515;
	opacity: 0.5;
	background-color: #000;
}

div#project-boxes .thumbnails li a:hover, div#project-boxes .thumbnails li a:focus {
	border-bottom: 4px solid #f86637 !important;
	opacity: 1;
	background-color: transparent;
}

div#content.contact h4 {
}

div.follow-us li {
	margin-bottom: 8px;
}

div.follow-us a {
	height: 16px;
	display: block;
	line-height: 16px;
	padding-left: 20px;
	border-bottom-style: none !important;
}

a.icon-twitter {
	background: url(../images/icon-twitter.gif) no-repeat;

}

a.icon-linkedin {
	background: url(../images/icon-linkedin.gif) no-repeat;
}

a.icon-lastfm {
	background: url(../images/icon-lastfm.gif) no-repeat;
}

a.icon-vimeo {
	background: url(../images/icon-vimeo.gif) no-repeat;
}

a.icon-wp {
	background: url(../images/icon-wordpress.gif) no-repeat;
}

a.icon-flickr {
	background: url(../images/icon-flickr.gif) no-repeat;
}

a.icon-twitter:hover,
a.icon-linkedin:hover,
a.icon-lastfm:hover,
a.icon-vimeo:hover,
a.icon-flickr:hover,
a.icon-wp:hover {
	background-position: 0 -50px;
}

.hidden {
	display: none;
}

div.project-pagination {
	margin-top: 16px;
	text-align: center;
	line-height: 1em;
}

div.project-pagination ul {
	display: inline;
}

div.project-pagination li {
	display: inline;
	margin: 0px 3px;
}

div.project-pagination li a {
	border: 1px solid #868686 !important;
	text-indent: -5000px;
	width: 6px;
	height: 6px;
	display: inline-block;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-opera-border-radius: 3px;
	border-radius: 3px;
}

div.project-pagination li a.on:hover,
div.project-pagination li a:active,
div.project-pagination li a:hover {
	border-color: #fff !important;
	background-color: #fff !important;
}

div.project-pagination li a.on {
	background-color: #f86637 !important;
	border-color: #f86637 !important;
}

div.project-pagination li.disabled {
	visibility: hidden;
}

/* do not merge with :hover even though it's the same style, as it needs to overwrite .on */
div.project-pagination li a:focus {
	border-color: #fff !important;
	background-color: #fff;
}

a#jp-slideshow-previous, a#jp-slideshow-next {
	position: absolute;
	top: 0px;
	width: 17px;
	height: 194px;
	text-indent: -5000px;
	border-style: none !important;
	background-color: transparent !important;
}

a#jp-slideshow-previous {
	left: -20px;
	background: url(../images/arrow_left_portfolio.gif) no-repeat 4px center;
}

a#jp-slideshow-next {
	right: -20px;
	background: url(../images/arrow_right_portfolio.gif) no-repeat 4px center;
}

a#jp-slideshow-previous:hover, a#jp-slideshow-next:hover,
a#jp-slideshow-previous:focus, a#jp-slideshow-next:focus {
	background-position: -37px center;
}

div.service-description {
	min-height: 360px;
	height:auto !important;
	height: 360px;
}

div.service-description ul {

}

div.client-quote {
	min-height: 250px;
	height:auto !important;
	height: 250px;
}

p.return {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 4px;
	line-height: 1.4em;
}

div.project-info ul, div.service-description ul {
	padding-left: 1.5em;
	margin-bottom: 1.4em;
}

div.project-info li, div.service-description li {
	list-style-type: disc;
}

div.service-description li {
	margin-bottom: 1.4em;
}

div#content ul ul {
	padding-left: 1em;
}

div.profile-points ul ul {
	padding-left: 1em;
	margin-bottom: 1em;
}

div#web-design li#s01 a,
div#ecommerce li#s02 a,
div#cms li#s03 a,
div#email-marketing li#s04 a,
div#webapps li#s05 a,
div#online-marketing li#s06 a,
div#offline li#s07 a,
div#file-depot li#s08 a,
div#consultancy li#s09 a {
	color: #fff;
}

div#online-marketing li#om1 a,
div#search-engine-marketing li#om2 a,
div#search-engine-optimisation li#om3 a,
div#pay-per-click li#om4 a,
div#social-media-marketing li#om5 a,
div#web-analytics li#om6 a,
div#email-marketing li#om7 a,
div#banner-advertising li#om8 a {
	color: #fff;
}

/* @group forms */

div#jpFrmMessage, .jpFrmError,
form#subscribe input.jpFrmError, form#subscribe textarea.jpFrmError,
form#enquiry input.jpFrmError, form#enquiry textarea.jpFrmError {
	color: #fff;
	background-color: #4f0000;
}

div#jpFrmMessage {
	padding: 2px 7px;
	margin-bottom: 1em;
	background-color: #000;
}

form.loading *, form.sent *, form #jpFrmSendingMessage {
	display: none;
}

form.loading #jpFrmSendingMessage, form.sent #jpFrmSendingMessage {
	display: block;
}

form.loading #jpFrmSendingMessage {
	text-indent: 20px;
	background: url(../images/ajax-loader.gif) 0 0 no-repeat;
}

/* @end */

/* @group random */

.random {
	display: none;
}
.random.default {
	display: block;
}

/* @end */

/* @group form labels */

form p,
form#enquiry p, form#subscribe p {
	position: relative;
}

label,
form#enquiry label, form#subscribe label {
	position: absolute;
	display: none;
	top: 1px;
	right: 1px;
	background-color: #000;
	color: #fff;
	font-weight: normal;
	font-style: normal;
	text-shadow: #000 0 0 1px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-opera-border-radius: 5px;
	border-radius: 5px;
	font-size: 1em;
	padding: 4px 5px;
}

label.jpFrmActive,
form#enquiry label.jpFrmActive, form#subscribe label.jpFrmActive {
	display: block;
}

label.jpFrmError,
form#enquiry label.jpFrmError, form#subscribe label.jpFrmError {
	color: #4F0000;
}

/* @end */

/* @group slimbox */

.lbLoading {
	background: #fff url(../images/ajax-loader.gif) no-repeat center;
}

#lbCenter {
	overflow: visible;
}

#lbCenter, #lbBottomContainer {
	background-color: #000;
}

#lbImage {
	border: none;
}

#lbBottom * {
	display: none;
}

#lbCloseLink {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

#lbPrevLink, #lbNextLink {
	width: 300px;
}

#lbPrevLink:focus, #lbNextLink:focus {
	border: none !important;
}

#lbPrevLink {
	background: url(../images/arrow_left_portfolio.gif) no-repeat scroll 0% 50%;
	left: -30px;
}
#lbPrevLink:hover {
	background: url(../images/arrow_left_portfolio.gif) no-repeat scroll 0% 50%;
}

#lbNextLink {
	background: url(../images/arrow_right_portfolio.gif) no-repeat scroll 100% 50%;
	right: -30px;
}
#lbNextLink:hover {
	background: url(../images/arrow_right_portfolio.gif) no-repeat scroll 100% 50%;
}

/* custom top bar */
#lbJpNavigation {
	height: 55px;
	background: url(../images/browser_bar.gif) no-repeat;
}

/* @end */