/* Meyer Resets v1.0 | 20080212
---------------------------------------------------------------------------- */	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
	


/* Structure
---------------------------------------------------------------------------- */
#wrap {
	width: 1115px;
}
#content {
	margin-top: 72px;
}
.twocol #content {
	float: left;
	background: url(../images/bg-content-twocol.gif) top left repeat-y;
}
#main {
	float: left;
	width: 730px;
	text-align: left;
	margin: 22px 0 40px 222px;
}
#client-subnav {
	float: left;
	width: 199px;
	margin-left: -952px;
}
#footer {
	clear: both;
}



/* Header
---------------------------------------------------------------------------- */
#header-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 72px;
	width: 1065px;
	background: #000 url(../images/bg-header.jpg) top left repeat-x;
	opacity: .8;
	filter:alpha(opacity=80); /* for IE */
}
#header-barcap {
	position: absolute;
	top: 0;
	left: 0;
	height: 72px;
	width: 1115px;
	background: url(../images/bg-header-cap.jpg) top right no-repeat;
	opacity: .8;
	filter:alpha(opacity=80); /* for IE */
}
#header-rule {
	position: absolute;
	top: 72px;
	left: 0;
	height: 1px;
	width: 1115px;
	background: #ccc url(../images/bg-header-rule.jpg) top right no-repeat;
}
p#agency {
	position: absolute;
	top: 12px;
	left: 25px;
	width: 570px;
	height: 36px;
	background: url(../images/img-logo.png) 0 5px no-repeat;
	margin:0;
	padding:0;
}
p#agency a#agency-link {
	display: block;
	width: 570px;
	height: 36px;
}
p#agency span {
	position: absolute;
	display: block;
	top: -10000px;
	left: -10000px;
	font-size: 1px;
}



/* Nav
---------------------------------------------------------------------------- */
#nav {
	position: absolute;
	top: 29px;
	left: 630px;
	width: 465px;
}
#nav ul {
	list-style:none;
}
#nav li { 
	float: left;
}
#nav li a { 
	height: 44px;
	display: block;
	background-image: url(../images/bg-nav.png);
	background-repeat: no-repeat;
}
#nav li a span {
	position: absolute;
	display: block;
	top: -10000px;
	left: -10000px;
	font-size: 1px;
}	
#nav li#navhome a:link, #nav li#navhome a:visited { width: 62px; background-position: 0 0; }
#nav li#navhome a:hover {  width: 62px; background-position: 0 -44px; }
#pghome #nav li#navhome a {  width: 62px; background-position: 0 -88px; }

#nav li#navwork a:link, #nav li#navwork a:visited { width: 59px; background-position: -62px 0; }
#nav li#navwork a:hover {  width: 59px; background-position: -62px -44px; }
#pgwork #nav li#navwork a {  width: 59px; background-position: -62px -88px; }

#nav li#navmethod a:link, #nav li#navmethod a:visited { width: 73px; background-position: -121px 0; }
#nav li#navmethod a:hover {  width: 73px; background-position: -121px -44px; }
#pgmethod #nav li#navmethod a {  width: 73px; background-position: -121px -88px; }

#nav li#navteam a:link, #nav li#navteam a:visited { width: 59px; background-position: -194px 0; }
#nav li#navteam a:hover {  width: 59px; background-position: -194px -44px; }
#pgteam #nav li#navteam a {  width: 59px; background-position: -194px -88px; }

#nav li#navblog a:link, #nav li#navblog a:visited { width: 54px; background-position: -253px 0; }
#nav li#navblog a:hover {  width: 54px; background-position: -253px -44px; }
#pgblog #nav li#navblog a {  width: 54px; background-position: -253px -88px; }

#nav li#navcontact a:link, #nav li#navcontact a:visited { width: 72px; background-position: -307px 0; }
#nav li#navcontact a:hover {  width: 72px; background-position: -307px -44px; }
#pgcontact #nav li#navcontact a {  width: 72px; background-position: -307px -88px; }

#nav li#navsubscribe a:link, #nav li#navsubscribe a:visited { width: 84px; background-position: -379px 0; }
#nav li#navsubscribe a:hover {  width: 84px; background-position: -379px -44px; }
#pgsubscribe #nav li#navsubscribe a {  width: 84px; background-position: -379px -88px; }



/* Browse by Client subnav
---------------------------------------------------------------------------- */
h3#browseclient {
	width: 199px;
	height: 44px;
	margin:0;
	padding:0;
	background: url(../images/bg-h3-browseclient.gif) top right no-repeat;
}
.client-group h3 {
	width: 179px;
	background-color: #024;
	color: #479;
	padding: 8px 0 8px 20px;
	border-top: 1px solid #058;
	font-size: 13px;
}
.client-group ul {
	margin: 20px 0 20px 25px;
}
.client-group li {
	margin-bottom: 12px;
	line-height: 1.2;
}
.client-group li a {
	padding-left: 10px; 
}
.client-group li span.spacer {
   padding:0 5px;
}

#client-subnav a:link, #client-subnav a:visited { color: #888; text-decoration: none; background: url(../images/bg-clientsubnav-bullet.gif) 0 4px no-repeat; }
#client-subnav a:hover { color: #bbb; text-decoration: none; background: url(../images/bg-clientsubnav-bullet-hvr.gif) 0 4px no-repeat; }

.toklat #client-subnav li#client-toklat a,
.kcw #client-subnav li#client-kcw a,
.stackhouse #client-subnav li#client-stackhouse a,
.moonfire #client-subnav li#client-moonfire a,
.sti #client-subnav li#client-sti a,
.kcc #client-subnav li#client-kcc a,
.izzys #client-subnav li#client-izzys a,
.applebees #client-subnav li#client-applebees a,
.ofp #client-subnav li#client-ofp a,
.coyoteridge #client-subnav li#client-coyoteridge a,
.lonestar #client-subnav li#client-lonestar a,
.oregontrail #client-subnav li#client-oregontrail a,
.yourtownpress #client-subnav li#client-yourtownpress a
{ color: #bbb; text-decoration: none; background: url(../images/bg-clientsubnav-bullet-hvr.gif) 0 4px no-repeat; }




/* Homepage
---------------------------------------------------------------------------- */
#pghome #anim {
	position: absolute;
	left: 0;
	top: 0;
}
#pghome #content {
	padding: 120px 0 0 0;
	margin: 0 0 0 460px;
}



/* Intro section on Homepage */

#pghome #content #intro {
	float: left;
	width: 355px;
	position: relative;
	top: 40px;
	border-right: 1px solid #666;
}
#pghome #content #intro-spacing {
	height: 550px;
	padding-top: 10px;
	padding-right: 25px;
}
#pghome #content #intro h2 {
	line-height: 2;
	font-size: 11px;
	color: #78a;
	margin: 0 0 20px 0;
}
h1#virtag {
	width: 355px;
	height: 29px;
	margin:0;
	padding:0;
	background: url(../images/bg-h1-virtag.gif) top right no-repeat;
}

/* Blog section on Homepage */

#pghome #content #blog {
	float: left;
	width: 233px;
	position: relative;
	left: -1px;
	padding-bottom: 40px;
	border-left: 1px solid #666;
}
#pghome #content #blog-spacing {
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 30px;
}
#pghome #content #blog h3,
#pghome #content #blog h4, 
#pghome #content #blog h5 {
	margin: 0 0 10px 0;
	line-height: 1.3;
	font-size: 10px;
	color: #bcd;
}
#pghome #content #blog h2 {
	line-height: 2;
	font-size: 10px;
	color: #bcd;
}
#pghome #content #blog p {
	font-size: 10px;
	margin: 0 0 5px 0;
}
#pghome #content #blog .item-meta {
	text-align: right;
	line-height: 1.5;
	color: #157;
	margin: 0 0 40px 0;
}
h2#vobl {
	width: 232px;
	height: 20px;
	margin:0;
	padding:0;
	background: url(../images/bg-h2-vobl.gif) top right no-repeat;
	position: relative;
	left: -1px;
}
#pghome #content #blog .more-link {
	margin: 0 0 10px 0;
}
#pghome #content #blog ul {
	margin: 0 0 0 12px;
	list-style: disc;
	line-height: 1.8;
	font-size: 10px;
}
#pghome #content #blog li {
	margin-bottom: 5px;
}


/* Footer on Homepage */

#pghome #footer {
	width: 580px;
	margin-left: 460px;
	clear: both;
	position: relative;
	}
#pghome #footer {
	background: url(../images/bg-footer-home.jpg) top right no-repeat;
	color: #666;
	text-align: center;
}



/* Video landing page
---------------------------------------------------------------------------- */
#pgvideo #anim {
	position: absolute;
	left: 0;
	top: 0;
}
#pgvideo #content {
	padding: 120px 0 0 0;
	margin: 0 0 0 470px;
}



/* Intro section on Video landing page */

#pgvideo #content #first-column {
	float: left;
	width: 331px;
}
#pgvideo #content #first-column-spacing {
	padding: 0 35px 20px 0;
}
#pgvideo #content #first-column h1 {
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	border-bottom: 2px solid #999;
	line-height: 1.5;
	font-size: 17px;
	color: #bcd;
}
#pgvideo #content #first-column p {
	color: #bcd;
}
#pgvideo #content #first-column p.intro {
	font-weight: bold;
}
#pgvideo #content #first-column .toggle h2 {
	margin: 0 0 10px 0;
	padding: 15px 30px 15px 40px;
	border: 1px solid #bcd;
	line-height: 1.5;
	font-size: 11px;
	font-weight: bold;
	background: url(../images/bg-toggle-on.gif) left center no-repeat;
}
#pgvideo #content #first-column .toggle h2.hover-state {
	background-color: #012;
	cursor: pointer;
}
#pgvideo #content #first-column .toggle h2.off {
	background-image: url(../images/bg-toggle-off.gif);
}
#pgvideo #content #first-column .callout {
	margin: 20px 0 30px 0;
	padding: 15px;
	background-color: #a30;
}
#pgvideo #content #first-column .callout h2 {
	margin: 0 0 5px 0;
	line-height: 1;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
}
#pgvideo #content #first-column .callout p {
	margin: 0;
	line-height: 1.5;
	color: #fff;
}
#pgvideo #content #first-column .callout  a:link { color: #fff; text-decoration: underline; }
#pgvideo #content #first-column .callout  a:visited { color: #fff; text-decoration: underline; }
#pgvideo #content #first-column .callout  a:hover { color: #ccc; text-decoration: underline; }



/* Second column on Video landing page */

#pgvideo #content #second-column {
	float: left;
	width: 263px;
	padding-bottom: 40px;
}
#pgvideo #content #second-column h3,
#pgvideo #content #second-column h4, 
#pgvideo #content #second-column h5 {
	margin: 0 0 10px 0;
	line-height: 1.3;
	font-size: 10px;
	color: #bcd;
}
#pgvideo #content #second-column h2 {
	margin: 0 0 10px 0;
	line-height: 1.5;
	font-size: 13px;
	color: #bcd;
}
#pgvideo #content #second-column p {
	font-size: 10px;
	margin: 0 0 5px 0;
}
#pgvideo #content #second-column ul {
	margin: 0 0 0 12px;
	list-style: disc;
	line-height: 1.8;
	font-size: 10px;
	color: #bcd;
}
#pgvideo #content #second-column li {
	margin-bottom: 3px;
}
#pgvideo #content #second-column h3.hdr-samples {
	margin: 10px 0 15px 0;
	padding: 15px 0 0 0;
	border-top: 1px solid #999;
	line-height: 1.5;
	font-size: 13px;
}
#pgvideo #content #second-column .sample {
	margin: 0 0 15px 0;
}
#pgvideo #content #second-column .sample.hover-state {
	cursor: pointer;
}
#pgvideo #content #second-column .sample img {
	opacity: .85;
	filter:alpha(opacity=85); /* for IE */
}	
#pgvideo #content #second-column .sample.hover-state img {
	opacity: 1;
	filter:alpha(opacity=100); /* for IE */
}	
#pgvideo #content #second-column .sample.hover-state a {
	color: #8ae; text-decoration: none;
}
#pgvideo #content #second-column .sample-meta {
	color: #09c;
}
#pgvideo #content #second-column p.more-link {
	margin: 25px 0 15px 0;
	padding: 5px 0 0 0;
	border-top: 1px solid #999;
}


/* Footer on Video landing page */

#pgvideo #footer {
	width: 580px;
	margin-left: 460px;
	clear: both;
	position: relative;
	}
#pgvideo #footer {
	background: url(../images/bg-footer-home.jpg) top right no-repeat;
	color: #666;
	text-align: center;
}




/* Work/Portfolio pages - Page Titles Image Swap
---------------------------------------------------------------------------- */
#page-title {
	height: 26px;
	margin-bottom: 15px;
}	
#pgwork #main #page-title h1,
#pgwork #main #page-title h2,
#pgwork #main #page-title h3,
#pgmethod #page-title h1,
#pgmethod #page-title h2 {
	float:left;
	margin:0;
	padding:0;
	height: 28px;
	background-position: top right;
	background-repeat: no-repeat;
}


.work #page-title h1 {
	width: 106px;
	background-image: url(../images/bg-h1-pgwork.gif);
}
.work #page-title h2 {
	width: 185px;
	background-image: url(../images/bg-h2-pgwork.gif);
}
.toklat #page-title h2 {
	width: 179px;
	background-image: url(../images/bg-h2-pgwork-toklat.gif);
}
.toklat #page-title h3 {
	width: 319px;
	background-image: url(../images/bg-h3-pgwork-toklat.gif);
}
.kcw #page-title h2 {
	width: 205px;
	background-image: url(../images/bg-h2-pgwork-kcw.gif);
}
.kcw #page-title h3 {
	width: 391px;
	background-image: url(../images/bg-h3-pgwork-kcw.gif);
}
.stackhouse #page-title h2 {
	width: 346px;
	background-image: url(../images/bg-h2-pgwork-stackhouse.gif);
}
.stackhouse #page-title h3 {
	width: 250px;
	background-image: url(../images/bg-h3-pgwork-stackhouse.gif);
}
.moonfire #page-title h2 {
	width: 361px;
	background-image: url(../images/bg-h2-pgwork-moonfire.gif);
}
.moonfire #page-title h3 {
	width: 295px;
	background-image: url(../images/bg-h3-pgwork-moonfire.gif);
}
.kcc #page-title h2 {
	width: 176px;
	background-image: url(../images/bg-h2-pgwork-kcc.gif);
}
.kcc #page-title h3 {
	width: 154px;
	background-image: url(../images/bg-h3-pgwork-kcc.gif);
}
.sti #page-title h2 {
	width: 101px;
	background-image: url(../images/bg-h2-pgwork-sti.gif);
}
.sti #page-title h3 {
	width: 322px;
	background-image: url(../images/bg-h3-pgwork-sti.gif);
}
.izzys #page-title h2 {
	width: 275px;
	background-image: url(../images/bg-h2-pgwork-izzys.gif);
}
.izzys #page-title h3 {
	width: 264px;
	background-image: url(../images/bg-h3-pgwork-izzys.gif);
}
.applebees #page-title h2 {
	width: 125px;
	background-image: url(../images/bg-h2-pgwork-applebees.gif);
}
.applebees #page-title h3 {
	width: 361px;
	background-image: url(../images/bg-h3-pgwork-applebees.gif);
}
.ofp #page-title h2 {
	width: 243px;
	background-image: url(../images/bg-h2-pgwork-ofp.gif);
}
.ofp #page-title h3 {
	width: 248px;
	background-image: url(../images/bg-h3-pgwork-ofp.gif);
}
.coyoteridge #page-title h2 {
	width: 268px;
	background-image: url(../images/bg-h2-pgwork-coyoteridge.gif);
}
.coyoteridge #page-title h3 {
	width: 307px;
	background-image: url(../images/bg-h3-pgwork-coyoteridge.gif);
}
.lonestar #page-title h2 {
	width: 244px;
	background-image: url(../images/bg-h2-pgwork-lonestar.gif);
}
.lonestar #page-title h3 {
	width: 358px;
	background-image: url(../images/bg-h3-pgwork-lonestar.gif);
}
.oregontrail #page-title h2 {
	width: 455px;
	background-image: url(../images/bg-h2-pgwork-oregontrail.gif);
}
.oregontrail #page-title h3 {
	width: 275px;
	background-image: url(../images/bg-h3-pgwork-oregontrail.gif);
}
.yourtownpress #page-title h2 {
	width: 182px;
	background-image: url(../images/bg-h2-pgwork-yourtownpress.gif);
}
.yourtownpress #page-title h3 {
	width: 227px;
	background-image: url(../images/bg-h3-pgwork-yourtownpress.gif);
}

/* Portfolio - work samples landing page
---------------------------------------------------------------------------- */
#pgwork #main h3 {
	font-size: 14px;
	margin: 25px 0 5px 0;
}
#pgwork #main td { 
	padding: 0 32px 15px 0; 
}
#pgwork #main td.last { 
	padding: 0 0 15px 0; 
}
#thumbnail-table {
	border-top: 1px solid #058;
	padding-top: 15px;
}


#pgwork #main td a {
	display: block;
	width: 120px;
	height: 62px;
	background-repeat: no-repeat;
}
#pgwork #main td a:link, 
#pgwork #main td a:visited { background-position: 0 0; }
#pgwork #main td a:hover { background-position: 0 -62px; }

#toklat-btn a {	background-image: url(../images/work/img-toklat-thumb.jpg); }
#applebees-btn a { background-image: url(../images/work/img-applebees-thumb.jpg); }
#moonfire-btn a { background-image: url(../images/work/img-moonfire-thumb.jpg); }
#kcw-btn a { background-image: url(../images/work/img-kcw-thumb.jpg); }
#kcc-btn a { background-image: url(../images/work/img-kcc-thumb.jpg); }
#izzys-btn a { background-image: url(../images/work/img-izzys-thumb.jpg); }
#ofp-btn a { background-image: url(../images/work/img-ofp-thumb.jpg); }
#coyoteridge-btn a { background-image: url(../images/work/img-coyoteridge-thumb.jpg); }
#sti-btn a { background-image: url(../images/work/img-sti-thumb.jpg); }
#stackhouse-btn a {	background-image: url(../images/work/img-stackhouse-thumb.jpg); }





/* Portfolio - work samples detail page
---------------------------------------------------------------------------- */
h4#browsework {
	width: 152px;
	height: 23px;
	margin:0;
	padding:0;
	background: url(../images/bg-h4-browsework.gif) top right no-repeat;
}

/* style for jquery-cc.js */
.worksamplesbox {
	position: absolute;
	top: 135px;
}
.samplebox {
	position: absolute;
	width: 475px;
	height: 475px;
	background-color: #000;
}
/* end style for jquery-cc.js */

#worksamples .sample-meta p {
	line-height: 1.5;
	font-size: 11px;
	margin: 0 0 10px 0;
}
#worksamples .sample-meta {
	margin-top: 10px;
}

#worksamples .blank {
	background: url(../images/work/bg-sample.gif) top right no-repeat; 
}

#worksamples .radio p {
	 margin: 0 0 5px 0;
}
#worksamples .radio p.player {
	 margin: 0 0 20px 0;
}
.radio {
	width: 240px;
	height: 375px;
	margin: 0 auto 0 auto;
}
.radio-vertcenter {
	display: table-cell;
	vertical-align: middle;
	position: absolute; top: 10%;
}

#sample-menu {
	position: absolute;
	top: 135px;
	left: 710px;
	width: 243px;
	height: 150px;
}
#sampleselect li {
	margin-bottom: 2px;
}
#sampleselect li a { 
	width: 223px;
	display: block;
	background-color: #033;
	padding: 10px;
}
	
#sampleselect li a:link, #sampleselect li a:visited { color: #999; }
#sampleselect li a:hover { color: #fff; }
#sampleselect li a.active {  color: #033; background: url(../images/bg-sampleselect.jpg) 0 0 no-repeat; }


#client-meta {
	margin-top: 510px;
	padding-top: 20px;
	border-top: 1px solid #058;
}
#main #client-meta h3,
#main #client-meta h4 {
	line-height: 1;
	font-size: 11px;
	margin: 0 0 5px 0;
	color: #bcc;
}




/* Method 
---------------------------------------------------------------------------- */

#pgmethod #content {
	margin: 73px 0 0 20px;
	float: left;
	background: url(../images/bg-content-method.jpg) 0 0 no-repeat;
}


#pgmethod #content #intro {
	float: left;
	width: 355px;
	padding-top: 40px;
	border-right: 1px solid #666;
}
#pgmethod #content #intro-spacing {
	padding-top: 10px;
	padding-right: 25px;
}
#pgmethod #content #intro h2 {
	line-height: 2;
	font-size: 11px;
	color: #78a;
	margin: 0 0 20px 0;
}


#pgmethod #content #second {
	float: left;
	width: 565px;
	position: relative;
	left: -1px;
	padding: 5px 0;
	border-left: 1px solid #666;
}
#pgmethod #content #second-spacing {
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 30px;
}


#methodmadness {
	width: 355px;
	height: 34px;
	margin:0;
	padding:0;
	background: url(../images/bg-h-methodmadness.jpg) top right no-repeat;
}
#pgmethod #content #intro .callout {
	width: 80%;
	margin-top: 100px;
	padding: 8px 14px 10px 14px;
	border-top: 1px dashed #777;
	background-color: #222;
	color: #ddd;	
	opacity: .7;
	filter:alpha(opacity=70); /* for IE */
}



#pgmethod #content ol {
	margin-left: 20px;
	list-style-position: outside;
	list-style-type: decimal;
	color: #bcd;
	font-size: 13px;
}
#pgmethod #content ol h3 {
	margin-bottom: 5px;
	color: #bcd;
	font-size: 13px;
}
#pgmethod #content ol p {
	margin-left: -20px;
	color: #78a;
	font-size: 11px;
}





/* The Team
---------------------------------------------------------------------------- */
#pgteam #content {
	margin: 125px auto 400px auto;
}

ul#teamselect {
	display: table;
	margin: 0 auto 18px auto;
	padding: 0 10px 10px 10px;
	border-bottom: 1px solid #666;
	text-align: center;
}
#teamselect li {
	display: table-cell;
	float: left;
	margin-right: 20px;
	padding-bottom:3px;
}	
#teamselect li.last-team {
	margin-right: 0;
}	

#teamselect li a:link, #teamselect li a:visited { color: #666; }
#teamselect li a:hover { color: #fff; }
#teamselect li a.active {  color: #fff; }

#teamselect li a span {
	position: absolute;
	display: block;
	top: -10000px;
	left: -10000px;
	font-size: 1px;
}



.staff {
	width: 530px; /* old size 430 */
	margin: 0 auto 40px auto;
	background: url(../images/bg-staff-top.gif) top left no-repeat;
}
.staff-content {
	width: 430px;  /* old size 340 */
	margin: 0 auto;
	padding-top: 50px;
}
.staff-content img {
	float: left;
	margin: 0 10px 0 0;
}
.staff-content h2 {
	margin: 0 0 0 82px;
	padding: 0 0 5px 0;
	border-bottom: 1px solid #999;
	font-size: 19px;
	color: #999;
	line-height: 1;
}
.staff-content p {
	margin:0;
	margin-left: 82px;
	color: #666;
}
.staff-btm {
	width: 530px;
	height: 15px;
	margin-top: 35px;
	background: url(../images/bg-staff-btm.gif) top left no-repeat;
}



/* style for jquery-cc.js */
.teambox {
	width: 530px;
	height: 350px;
	position: absolute;
	top: 200px;
	left: 260px;
}
.staffbox {
	width: 530px;
	height: 350px;
	position: absolute;
}
/* end style for jquery-cc.js */




/* Contact 
---------------------------------------------------------------------------- */
#pgcontact #content {
	margin: 73px 0 0 0;
	padding: 55px 0 0 0;
	float: left;
	background: url(../images/bg-content-contact.jpg) 0 0 no-repeat;
}

#pgcontact #content #intro {
	float: left;
	width: 194px;
}
#pgcontact #content #intro-spacing {
	padding: 10px 15px 10px 10px;
	text-align: right;
	color: #999;
}
#pgcontact #content #intro-spacing p {
	line-height: 1.5;
	margin-bottom: 15px;
}


#pgcontact #content #second {
	float: left;
	width: 600px;
	margin: 26px 0 0 0;
	padding: 50px 0 0 0;
	border-left: 1px solid #666;
}
#pgcontact #content #second-spacing {
	padding: 25px 30px 10px 30px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	background-color: #000;
}

#contactus {
	width: 194px;
	height: 27px;
	margin:0;
	padding:0;
	background: url(../images/bg-h1-contactus.jpg) top right no-repeat;
}


/* Subscribe
---------------------------------------------------------------------------- */
#pgsubscribe #content {
	margin: 73px 0 0 50px;
	padding: 50px 0 0 0;
	float: left;
	background: url(../images/bg-content-contact.jpg) -22px 78px no-repeat;
}

#pgsubscribe #content #intro {
	float: left;
	width: 500px;
}
#pgsubscribe #content #intro-spacing {
	padding: 15px 15px 25px 0;		
	/* border-right: 1px solid #666; */
}

#pgsubscribe #content #second {
	float: left;
	width: 455px;
	margin: 26px 0 0 0;
	padding: 50px 0 0 0;
	border-left: 1px solid #666; 
}
#pgsubscribe #content #second-spacing {
	padding: 25px 0px 15px 30px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	background-color: #000;
}

#subscribe-btn {
	margin-top: 10px;
}

#subscribe {
	width: 500px;
	height: 27px;
	margin:0;
	padding:0;
	background: url(../images/bg-h1-subscribe.jpg) top left no-repeat;
}
	

/* Contact & Subscribe - form elements
---------------------------------------------------------------------------- */
#pgcontact label,
#pgsubscribe label {
	display: block;
}	
#pgcontact input,
#pgsubscribe input,
#pgcontact textarea,
#pgsubscribe textarea {
	padding: 3px;
	border-style: none;
	border-top: 1px solid #999;
	border-left: 1px solid #444;
	border-right: 1px solid #444;
	background-color: #333 !important;
	color: #ddd;
}
#pgcontact input#submit-btn,
#pgsubscribe input#subscribe-btn { 
	padding:0; 
	border-style: none;
}
#pgcontact form p,
#pgsubscribe form p {
	margin-bottom: 15px;
}
.form-twocol {
	float: left;
	width: 210px;
}
.form-intro {
	margin-bottom: 0;
}
.required {
	color: #457;
}

#pgcontact label.checkbox { display: inline;}
#pgcontact input.checkbox { margin: 0 5px 0 0 ; padding: 0;}
#pgcontact label.checkbox,
#pgcontact input.checkbox { vertical-align: middle; }




/* Contact - Error and Success page  
   Subscribe - Confirm and Success page 
---------------------------------------------------------------------------- */
#pgcontact-sub #content #intro,
#pgsubscribe-sub #content #intro {
	width: 500px;
	margin: 110px auto 0 auto;
	padding-bottom: 50px;
}
#pgcontact-sub #content #intro h1,
#pgsubscribe-sub #content #intro h1 {
	margin-bottom: 10px;
	padding-bottom: 1px;
	border-bottom: 1px solid #666;
	font-size: 18px;
	color: #bbb;
}






/* What is Cardwell Creative 
---------------------------------------------------------------------------- */
#pgabout #content {
	margin: 73px 0 0 20px;
	float: left;
	background: url(../images/bg-content-pgabout.jpg) 0 0 no-repeat;
}


#pgabout #content #intro {
	float: left;
	width: 355px;
	padding-top: 40px;
	border-right: 1px solid #666;
}
#pgabout #content #intro-spacing {
	padding-top: 10px;
	padding-right: 25px;
}
#pgabout #content #intro h2 {
	line-height: 2;
	font-size: 11px;
	color: #78a;
	margin: 0 0 20px 0;
}


#pgabout #content #second {
	float: left;
	width: 565px;
	position: relative;
	left: -1px;
	padding: 5px 0;
	border-left: 1px solid #666;
}
#pgabout #content #second-spacing {
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 30px;
}


#whatiscardwell {
	width: 356px;
	height: 27px;
	margin:0;
	padding:0;
	background: url(../images/bg-h1-whatiscardwell.jpg) top right no-repeat;
}
#pgabout #content #second ul {
	margin-left: 15px;
	margin-bottom: 20px;
	margin-top: -10px;
	list-style-position: outside;
	list-style-type: disc;
}
#pgabout #content #second ul li {
	line-height: 1.5;
	padding-bottom: 6px;
}
#pgabout #content h2 {
	margin-bottom: 5px;
	color: #bcd;
	font-size: 13px;
}


/* Privacy
---------------------------------------------------------------------------- */

#pgprivacy #content {
	margin: 73px 0 0 60px;
	padding: 55px 0 0 0;
	float: left;
}
#pgprivacy #content #intro {
	float: left;
	width: 600px;
}
#pgprivacy #content #intro-spacing {
	padding: 15px 15px 10px 0;		
	border-right: 1px solid #666;
}



#pgprivacy #content #second {
	float: left;
	width: 280px;
	margin: 26px 0 0 0;
	padding: 50px 0 0 0;
}
#pgprivacy #content #second-spacing {
	padding: 25px 30px 10px 30px;
	border-top: 1px solid #666;
}


#privacystmnt {
	width: 600px;
	height: 27px;
	margin:0;
	padding:0;
	position:relative;
	top:2px;
	left:-1px;
	background: url(../images/bg-h1-privacystmnt.jpg) top right no-repeat;
}
#pgprivacy #content h2 {
	margin-bottom: 5px;
	color: #bcd;
	font-size: 13px;
}
#pgprivacy #content #intro ul {
	margin-left: 15px;
	margin-bottom: 20px;
	margin-top: -10px;
	list-style-position: outside;
	list-style-type: disc;
}
#pgprivacy #content #intro ul li {
	line-height: 1.5;
	padding-bottom: 6px;
}


/* Site Map 
---------------------------------------------------------------------------- */
#pgsitemap #content {
	margin: 73px 0 0 0;
	padding: 55px 0 0 0;
	float: left;
}

#pgsitemap #content #intro {
	float: left;
	width: 240px;
}
#pgsitemap #content #intro-spacing {
	padding: 10px 15px 10px 10px;
	text-align: right;
	color: #999;
}
#pgsitemap #content #intro-spacing p {
	line-height: 1.5;
	margin-bottom: 15px;
}


#pgsitemap #content #second {
	float: left;
	width: 550px;
	margin: 26px 0 0 0;
	padding: 50px 0 0 0;
	border-left: 1px solid #666;
}
#pgsitemap #content #second-spacing {
	padding: 25px 30px 10px 30px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	background-color: #000;
	background: url(../images/bg-content-contact.jpg) 0 0 no-repeat;

}
#pgsitemap #content #second ul {
	margin-left: 15px;
	margin-bottom: 20px;
	margin-top: -10px;
	list-style-position: outside;
	list-style-type: disc;
}
#pgsitemap #content #second ul li {
	line-height: 1.5;
	padding-bottom: 6px;
}
#pgsitemap #content h2 {
	margin-bottom: 20px;
	color: #78a;
	font-size: 13px;
}

#sitemap {
	width: 240px;
	height: 27px;
	margin:0;
	padding:0;
	background: url(../images/bg-h1-sitemap.jpg) top right no-repeat;
}


/* Footer
---------------------------------------------------------------------------- */
#footer {
	background: url(../images/bg-footer.jpg) top left no-repeat;
	color: #666;
	text-align: center;
}
#footer p {
	margin: 0;
	padding: 5px 0 5px 0;
	line-height: 1.5;
}
#pghome #footer p,
#pgvideo #footer p {
	padding: 10px 0 5px 0;
}
#pghome #footer p.site-descrp,
#pgvideo #footer p.site-descrp {
	padding: 0 0 5px 0;
}

#footer a:link { color: #666; text-decoration: underline; }
#footer a:visited { color: #666; text-decoration: underline; }
#footer a:hover { color: #999; text-decoration: underline; }



/* Type
---------------------------------------------------------------------------- */
body {
	background-color: #000;
	font-size: 11px;
	font-family: Verdana, Helvetica, Arial, Geneva, sans-serif;
	color: #78a;
	}
	
a:link { color: #bcd; text-decoration: none; }
a:visited { color: #bcd; text-decoration: none; }
a:hover { color: #8ae; text-decoration: none; }


h1, h2, h3, h4, h5 { color: #09c; font-weight: normal; }


p {
	line-height: 2;
	font-size: 11px;
	margin: 0 0 20px 0;
}
#worksamples .sample-meta p.credits {
	color: #788;
	font-size: 9px;
}

em { font-style: italic; }
b, strong { font-weight: bold; }
.superscript { font-size: 60%; line-height:1; vertical-align:top;}
.note { 
	line-height: 1.5;
	font-size: 10px; 
	color: #555;
}



/* General
---------------------------------------------------------------------------- */
.hide {
	position: absolute;
	display: block;
	top: -10000px;
	left: -10000px;
	font-size: 1px;
}

.clear { clear: both; }

.fl {float: left;}
.fr {float: right;}
img.fl {
	margin: 0 5px 5px 0;
}
img.fr {
	margin: 0 0 5px 5px;
}