/* ---------------------------------------------------
CVS: $ $
Title: global.css
Copyright: (c) 2010
Author: Phil Renaud - phil@riotindustries.com
Description: Global styles for Park&Co
--------------------------------------------------- */

/* ---------------------------------------------------
=Reset
Takes browser-specific styling and resets it to a
common behavioural standard. Based heavily upon the
Yahoo! User Interface Library Reset:
http://developer.yahoo.com/yui/reset/
--------------------------------------------------- */

/* ---------------------------------------------------
 Goodwill Halloween CSS ONLY
--------------------------------------------------- */


h4.radio {color: #D71D13;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
clear: both;}




body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

fieldset, img { 
	border:0;
}

address,caption,cite,code,dfn,th,var,strong,em {
	font-style:normal;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
	margin: 0px;
	padding: 0px;
}

q:before,q:after {
	content:'"';
}

abbr,acronym {
   border:0;
}

html {
   font-size: 100.01%; /* Corrects default font sizing in IE/WIN, and font resizing in Opera. */
}

/* ---------------------------------------------------
=Universal
Styles applied to basic xhtml elements, classes and
IDs notwithstanding.
--------------------------------------------------- */

body {
   background: #fff url(/_images/30gradient.png) top left repeat-x;
   font-family: "Gill Sans", "Myriad Pro", Myriad, Helvetica, Arial, sans-serif;
   font-size: 100%;
   color: #000;
   overflow-x: hidden;
   position: relative;
}

/* body.services {background: #fff url(/_images/60gradient.png) top left repeat-x;} */

body#landing {
	overflow: hidden;
	background: #e4e4e4 url(/_images/landingbg.png) 50% 50% repeat-y;
	position: static;
}

   
strong { font-weight: bold; }
   
em { font-style: italic; }
   
p {
	color: #888888;
	font-size: 14px;
	line-height: 26px;
	margin-bottom: 15px;
}

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

a:focus {
   outline: none;
}

.content a:hover {
	color: #a70d03;
}

h1 {
	height: 49px;
	width: 100%;
	float: right;
	background: transparent url(/_images/logo.jpg) top right no-repeat;
	text-indent: -9999px;
	border-bottom: 1px solid #ccc;
	position: absolute;
	right: 0px;
	margin-left: 270px;
}

h1 a {
	height: 49px;
	display: block;
	width: 210px;
	float: right;
}

#landing h1 {
	position: absolute;
	right: 0px;
	bottom: -1px;
	height: 65px;
	width: 277px;
	background: transparent url(/_images/storylogo.png) top left no-repeat;
	text-indent: -9999px;
}

h2 {
   color: #d71d13;
   font-size: 45px;
   position: relative;
   top: 15px;
   background-color: #fff;
   display: inline-block;
   margin-bottom: 10px;
}

#landing h2 {
   color: #d71d13;
   font-size: 56px;
   display: block;
   background-color: transparent;
   position: static;
   margin-bottom: 0px;
}

h2.mystory {
	position: absolute !important;
	width: 800px;
	text-align: center;
	left: 50%;
	margin-left: -400px;
	top: -500px;
	margin-bottom: 0px;
	display: block;
}

h3 {
	color:#d71d13;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	clear: both;
}

h4 {
   color: #d71d13;
   font-size: 16px;
   font-weight: bold;
   margin-top: 30px;
   clear: both;
}
   
/* ---------------------------------------------------
=Clearfix
Clears floats within a container.
--------------------------------------------------- */
/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after,
ul.thegrid:after,
.split:after,
ul.persons li:after,
#navigation:after,
.subnavigation:after,
ul.persons li:after,
.showcase:after, .slider:after {
   content: ".";
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;
   font-size: 0;
}


/* ---------------------------------------------------
=Containers
Basic container and structural layout styling.
--------------------------------------------------- */

#worldcontainer {
   width: 1030px;
   margin: auto;
   /* font-size: 75%; */
   position: relative;
   color: #888888;
}


#storycontainer {
   width: 520px;
   margin: auto;
   font-size: 75%;
   padding-top: 150px;
   position: relative;
}

div.extender {
	position: absolute;
	border-bottom: 1px solid #ccc;
	width: 50%;
	left: 50%;
	top: 94px;
}

/* body.services div.extender {top: 124px;} */

div.extender2 {
	position: absolute;
	border-bottom: 1px solid #e1e1e1;
	width: 50%;
	left: 50%;
	bottom: 100px;
}

/* ---------------------------------------------------
=What's Your Story?
--------------------------------------------------- */

ul.whatsyourstory {
	border-top: 1px solid #ccc;
	margin: auto;
	width: 520px;
}

ul.whatsyourstory li {
	border-bottom: 1px solid #ccc;
}

ul.whatsyourstory li a {
	display: block;
	padding: 10px 0px;
	font-size: 20px;
	color: #777;
}


ul.whatsyourstory li span {
	display: none;
}

div.white-bg {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: #fff;
}

body#landing .intro {
	color: #777;
	font-size: 15px;
	line-height: 20px;
	margin-bottom: 20px;
}

body#landing #footer {
	display: none;
}

/* ---------------------------------------------------
=Header
--------------------------------------------------- */

#header {
	height: 30px;
	margin-bottom: 15px;
}

/* body.services #header {height: 60px;} */

#header a {
	color: #fff;
}

body.stories #navigation li.stories a,
body.work #navigation li.work a,
body.services #navigation li.services a,
body.aboutus #navigation li.aboutus a,
body.connect #navigation li.connect a,
body.clients #navigation li.clients a {
	color: #64000a;
}

ul#navigation li {
	float: left;
}

ul.subnavigation {
	clear: both;
	display: none;
}

ul#navigation li.services:hover ul.subnavigation,
ul#navigation li.aboutus:hover ul.subnavigation {
	display: block;
	position: absolute;
	/* background-color: #bc241c; */
	z-index: 15;
}

ul#navigation li.services:hover ul.subnavigation li a,
ul#navigation li.aboutus:hover ul.subnavigation li a {
	background-image: none;
}

body.services ul#navigation li.services:hover ul.subnavigation {
	position: absolute;
	background-color: transparent;
}

body.services ul#navigation li.services ul.subnavigation li a {
	color: #fff;
}

body ul#navigation li.services ul.subnavigation li.advertising a {
	padding-left: 4px;
}

body.services ul#navigation li.services:hover ul.subnavigation li a {
	background: transparent url(/_images/navborder.png) 0% 55% no-repeat;
}

body.services ul#navigation li.services:hover ul.subnavigation li {
	float: left;
	clear: none;
}


/*
ul#navigation li.services:hover ul.subnavigation li {
	float: none;
	clear: both;
}
*/

body.services li.services ul.subnavigation, ul#navigation li.services:hover ul.subnavigation {
	display: block;
	position: absolute;
	top: 30px;
	left: 0px;
}

ul.subnavigation li {
	float: left;
}

ul.subnavigation li a {
	display: block;
	line-height: 28px;
	padding: 0px 10px;
	background: transparent url(/_images/navborder.png) 0% 55% no-repeat;
}

ul.subnavigation li.advertising a,
ul.subnavigation li.people a {
	background-image: none !important;
}

ul.subnavigation li a:hover {
	color: #64000a !important;
}

body.advertising ul.subnavigation li.advertising a,
body.branding ul.subnavigation li.branding a,
body.filmandvideo ul.subnavigation li.filmandvideo a,
body.mediaplanning ul.subnavigation li.mediaplanning a,
body.publicrelations ul.subnavigation li.publicrelations a,
body.web ul.subnavigation li.web a,
body.people ul.subnavigation li.people a,
body.wordofmouth ul.subnavigation li.wordofmouth a {
	color: #64000a !important;
}

a.plus {
	padding: 0px 5px;
	float: left;
	line-height: 30px;
}

ul#navigation li a {
	display: block;
	padding: 0px 10px;
	line-height: 30px;
	background: transparent url(/_images/navborder.png) 0% 55% no-repeat;
	font-size: 11px;
}

/*
ul#navigation li.changeyourstory a {padding-left: 0;}
ul#navigation li.changeyourstory a {background: transparent url(/_images/navborder.png) 100% 55% no-repeat;}
*/

ul#navigation li.home {padding: 0 5px;}

ul#navigation li a:hover {color: #64000a;}


ul#navigation li.home a {
	width: 20px;
	height: 20px;
	background: transparent url(/_images/home.png) top left no-repeat;
	text-indent: -9999px;
	margin-top: 6px;
	padding: 0px;
}

ul#navigation li.home a:hover,
body.stories ul#navigation li.home a {
	background-position: 0px -20px;
}



/* ---------------------------------------------------
=Content
--------------------------------------------------- */

p.intro {
	font-size: 18px;
	color: #888888;
}




div.split .major, div.split .minor {
	float: left;
	width: 500px;
}

div.split .major {
	margin-right: 15px;
}
div.split .minor {
	margin-left: 15px;
}

div.split.personsplit .major {
	width: 280px;
}

div.split.personsplit .major * {
	margin-bottom: 15px;
}

div.split.personsplit .minor {
	width: 580px;
}

div.split.personsplit .major ul {
	margin: 0;
}

div.split.personsplit .major ul li {
	list-style-type: none;
	border-bottom: 1px solid #ccc;
	margin: 0;
	padding: 5px 0;
}
div.split.personsplit .major img {
margin: 34px 0 20px 0;}

div.split.personsplit .minor h4 {
margin: 30px 0 10px 0;
} 

body.stories .major {
	position: relative;
}

body.stories a.stronglink {
	clear: left;
}

.content ul {
	margin: 0 0 15px 15px;
}

.content ul li {
	list-style-type: disc;
	margin-left: 15px;
	margin-bottom: 5px;
	font-size: 14px;
	/* color: #9e9e9e; */
}

#content ol {
	margin-bottom: 15px;
}

#content ol li {
	list-style-type: decimal;
	margin-left: 15px;
	margin-bottom: 5px;
	font-size: 14px;
	/* color: #9e9e9e; */
}

a.stronglink {
	color: #fff;
	font-size: 12px;
	display: block;
	background: #e42c23 url(/_images/stronglink.png) 0px -1px no-repeat !important;
	float: left;
	clear: both;
	padding: 5px 10px 5px 23px !important;
	margin: 0px 0px 45px;
}

a.stronglink:hover {
	background-color: #c40c03;
	color: #fff;
}

.emphasis {
	color: #d71d13;
	font-size: 26px;
	line-height: 30px;
	padding: 25px 0px;
	border-top: 4px double #ccc;
	border-bottom: 4px double #ccc;
}

.major #flashcontainer1,
.major #flashcontainer2,
.major #flashcontianer3,
.major #flashcontainer4 {
	padding: 15px 0px;
	margin: 15px 0px;
	border-top: 4px double #ccc;
	border-bottom: 4px double #ccc;
}


/* ---------------------------------------------------
=The Grid
--------------------------------------------------- */

div.gridcontainer {
	margin-top: 35px;
	clear: both;
}

ul.gridsort {
	float: right;
	font-size: 18px;
	margin-bottom: 15px;
}

ul.gridsort li {
	float: left;
	margin-left: 0px;
	list-style-type: none;
	line-height: 100%;
}

ul.gridsort li span {
	display: block;
	padding: 0px 5px;
}

ul.gridsort li span span,
ul.gridsort li a span {
	padding: 0px;
}

ul.gridsort select {
	margin: 0px 5px;
	padding: 2px;
	border: 1px inset #d71d13;
	cursor: pointer;
}

ul.gridsort select:focus {
	border: 1px outset #d71d13;
}

ul.gridsort a {
	color: #d71d13;
	padding: 0px 8px;
	display: block;
}

ul.gridsort a:hover {
	color: #ae0e04;
}


ul.gridsort li.fin a {
	border-right: none;
}

ul.gridsort li.inactive a {
	color: #999;
}

ul.thegrid {
	clear: both;
	position: relative;
	overflow: hidden;
}

/* Gotta love IE6! */
* html body.stories ul.thegrid {
	height: 700px;
}


ul.thegrid li {
	width: 255px;
	height: 130px;
	float: left;
	overflow: hidden;
	margin: 0px 2px 2px 0px !important;
	position: relative;
	background-position: -1px -1px;
	border: 1px solid #b2b2b2;
	width: 253px;
	height: 128px;
}

ul.thegrid li a {
	display: block;
	width: 514px;
	height: 130px;
	line-height: 130px;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	position: relative;
	text-indent: -9999px;
}

ul.thegrid li.empty {
	border: none;
}

.dimlights .thegrid li {
	opacity: .5;
}


.dimlights .thegrid li:hover {
	opacity: 1;
}

ul.thegrid li a span {
	width: 257px;
	position: absolute;
	right: 0px;
	background: transparent url(/_images/redfade.png) top left repeat-x;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	text-align: center;
	text-indent: 0px;
}

ul.thegrid li a span.client {
	background: transparent url(/_images/redfade3.png) top left repeat-x;
	padding-left: 271px;
}


ul.thegrid li a span span {
	background-image: none !important;
	padding-left: 0px !important;
}

body.work ul.thegrid li a span {
	background: transparent url(/_images/redfade2.png) top left no-repeat;
	padding-left: 271px;
}

/* This is a hack for story thumbnails without a white fade */
ul.thegrid li a span.fade2 {
	background: transparent url(/_images/redfade2.png) top left no-repeat;
}

body.work ul.thegrid li a span span {
	background-image: none !important;
	padding-left: 0px !important;
}


ul.thegrid span.date {
	display: none !important;
}

ul.thegrid span.formatteddate {
	color: #fff;
	text-transform: uppercase;
	display: none;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 5;
	padding: 5px;
	height: auto;
	width: auto;
	color: #fff;
	text-transform: none;
	font-size: 14px;
	text-align: left;
	background-image: none;
	line-height: 100%;
	z-index: 6;
}

ul.thegrid span.client {
	color: #fff;
	text-transform: uppercase;
	position: absolute;
	top: 0;
	line-height: 100%;
	right: 0;
	z-index: 5;
	padding: 75px 10px 5px 10px;
	color: #fff;
	text-transform: none;
	font-size: 14px;
	text-align: left;
	width: 237px;
	height: 110px;
}



/* ---------------------------------------------------
=Showcase/Slider
--------------------------------------------------- */

.slideshow {
	width: 400px;
/* 	height: 600px; */
	overflow: hidden;
	position: relative;
	margin-right: 72px;
}

.slideshow ul {
/* 	height: 600px;
	position: absolute;
	left: 0px; */
	width: 10000px;
}

.slideshow ul li {
	position: relative;
/* 	height: 600px; */
	width: 400px;
	overflow: hidden;
	float: left;
	list-style-type: none;
	margin-left: 0px;
	margin-bottom: 0px;
}

.wide .slideshow {
	width: 758px;
	margin-right: 42px;
}

.wide .slideshow ul li {
	width: 758px;
}

.slidernav {
	float: right;
	clear: none;
	width: 558px;
}

.wide .slidernav {
	width: 230px;
}

.slidernav img {
	width: 100px;
}

.slidernav li {
	float: left;
	position: relative;
	margin-right: 5px;
	cursor: pointer;
	opacity: 0.5;
}

.slidernav li.active {
	opacity: 1;
}

.showcase {
	margin-bottom: 50px;
}

.showcase li {
	margin-left: 0px !important;
	list-style-type: none !important;
}

div.slideshow {
	float: left;
}

div.showcasemeta {
	float: left;
	width: 538px;
}

.wide div.showcasemeta {
	width: 230px;
}

.showcasemetameta {
	clear: both;
	margin-bottom: 30px;
	margin-top: 15px;
	min-height: 20px;
	font-size: 12px;
}

.showcasemetameta li {
	float: left;
}

.showcasemetameta a, a.stronglink {
	color: #fff;
	display: block;
	padding: 6px;
	margin-right: 2px;
	background: transparent url(/_images/backlink.png) top left no-repeat;
	padding-left: 23px;
	padding-right: 10px;
}

.showcasemetameta .readfull a {
	background: transparent url(/_images/stronglink.png) top left no-repeat;
}

ul.stronglinks li {
	float: left;
	margin-right: 10px;
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
	font-size: 12px;
	line-height: 14px;
}


/* ---------------------------------------------------
=Footer
--------------------------------------------------- */
#footer {
	clear: both;
	color: #888888;
	margin-top: 40px;
	border-top: 1px solid #e1e1e1;
	padding-bottom: 100px;
}


#footer span {
	display: block;
	float: left;
	padding: 5px 8px 5px 8px;
	font-size: 14px;
	background: transparent url(/_images/footerhash.png) 100% 50% no-repeat;
}

#footer span:last-child {background: none;}

#footer a {
	font-size: 14px;
	color: #888888;
}


/* ---------------------------------------------------
=People
--------------------------------------------------- */

ul.persons li {
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
	float: none;
	clear: both;
	margin-bottom: 25px;
}

ul.persons li img {
	float: left;
	width: 100px;
	height: 100px;
	margin: 32px 20px 0 0;
}

ul.persons li div.info {
	width: 610px;
	float: left;
}

ul.persons li h4 {
	margin-bottom: 5px;
}

/* ---------------------------------------------------
=Connect
--------------------------------------------------- */

.connect .content div {width: 400px; margin: 0 40px 40px; float: left;}
.connect ul {margin-bottom: 40px;}

/* Newsletter Signup */
#mc_embed_signup legend {padding-bottom: 10px;}
.mc-field-group {
	font-size: 14px;
	padding-bottom: 10px;
	clear: both;
}
.mc-field-group label {width: 120px; float: left;}
.mc-field-group input {width: 200px; float: left; padding: 3px;}
.mc-field-group span.required {float: left; color: #d71d13; padding-left: 5px;}

/* ---------------------------------------------------
=Services
--------------------------------------------------- */

.services p.intro {width: 750px;}
.services ul.stronglinks {margin-left: 50px;}
.services ul.stronglinks li {float: none;}
.services h4 {width: 460px; float: none; padding: 0; margin: 0; border-bottom: 1px solid #ccc;}
.services h4 a {display: block; padding: 6px 0 7px;}
.service-content {width: 460px; padding: 0 10px; display: none;}
.service-content p {margin-bottom: 0; padding-bottom: 10px;}
.services .stronglink {float: left;}


/* ---------------------------------------------------
=About Us
--------------------------------------------------- */


body.aboutus #menu {width: 180px; height: 360px; padding: 40px; padding-top: 0; margin-left: 100px; position: relative;}
body.aboutus #menu p {width: 240px; position: relative; right: 60px; text-align: right;}
body.aboutus .video {width: 180px; height: 100px; margin-bottom: 20px; position: relative; overflow: hidden; border: 1px solid #999;}
body.aboutus .video img {position: absolute; top: 0; left: 0; z-index: 1;}
body.aboutus .video .overlay {position: absolute; top: 0; left: 0; z-index: 2; width: 360px; height: 100px; background: transparent url(/_images/red-chair-interviews-overlay.png) no-repeat;}
body.aboutus .video .overlay h3 {position: absolute; bottom: 13px; left: 190px; margin: 0; color: #fff; font-size: 14px;}
body.aboutus .video .play {width: 180px; height: 100px; position: absolute; top: 0; left: 0; z-index: 3; background: transparent url(/_images/red-chair-interviews-play.png) no-repeat scroll 50% 50%;}


/* ---------------------------------------------------
=Interviews
--------------------------------------------------- */

body.interviews #worldcontainer {
	background: transparent url(/_images/red-chair-interviews-bg.jpg) no-repeat scroll 50% 200px;
}

body.interviews h2 {
	width: 280px;
	height: 80px;
	margin-bottom: 10px;
	background: transparent url(/_images/red-chair-interviews-h2.gif) no-repeat;
	text-indent: -9999px;
}
body.interviews .content {min-height: 580px; position: relative;}
body.interviews #menu {width: 180px; height: 360px; padding: 40px; background: transparent url(/_images/red-chair-interviews-menu-bg.png) no-repeat;}
body.interviews .video {width: 180px; height: 100px; margin-bottom: 20px; position: relative; overflow: hidden; border: 1px solid #999;}
body.interviews .video img {position: absolute; top: 0; left: 0; z-index: 1;}
body.interviews .video .overlay {position: absolute; top: 0; left: 0; z-index: 2; width: 360px; height: 100px; background: transparent url(/_images/red-chair-interviews-overlay.png) no-repeat;}
body.interviews .video .overlay h3 {position: absolute; bottom: 10px; left: 190px; margin: 0; color: #fff;}
body.interviews .video .play {width: 180px; height: 100px; position: absolute; top: 0; left: 0; z-index: 3; background: transparent url(/_images/red-chair-interviews-play.png) no-repeat scroll 50% 50%;}
body.interviews #chair {width: 470px; height: 320px; position: absolute; top: 80px; left: 350px; cursor: pointer;}
body.interviews #chair h3 {width: 240px; height: 50px; position: absolute; top: 70px; left: 70px; text-indent: -9999px; background: transparent url(/_images/red-chair-interviews-watch-now.png) no-repeat;}
body.interviews #chair h3 img {position: absolute; top: 7px; right: 0; opacity: 0;}
body.interviews #screen {
	width: 950px;
	height: 553px;
	display: none;
	position: absolute;
	top: 20px;
	left: 40px;
	/* border: 1px solid red; */
	z-index: 4;
	background: #fff url(/_images/ajax-loader.gif) no-repeat scroll 50% 50%;
	box-shadow: 0 0 40px #999;
	-moz-box-shadow: 0 0 40px #999;
	-webkit-box-shadow: 0 0 40px #999;
}
body.interviews #close {position: absolute; top: -14px; right: -14px; cursor: pointer;}

/* ---------------------------------------------------
=Landing Pages
--------------------------------------------------- */

body.landing .content {width: 790px; margin: 0 auto; padding-bottom: 40px;}
body.landing .content hr {margin: 10px 0; border-top: 1px solid #ccc;}
body.landing h3 {color: #D71D13;}
body.landing h4 {color: #D71D13;}
body.landing .radio-spot {
	height: 30px;
	padding: 10px 0 20px 50px;
	background: url(/_images/radio.gif) no-repeat;
}
body.landing .radio-spot h4 {
	width: 150px;
	display: inline;
	float: left;padding: 0 0 0 4px;;
}
body.landing .radio-spot .flashcontainer {
	width: 310px;
	display: inline;
}