/* CSS Document */
/* Mission Creative */

html {height:100%;}

body {
    text-align:center; /*Added to the body element to force IE to centre all content*/
    min-height:101%;/*Sets the minimum page height to greater than the window height to force Firefox to display vertical scrollbars, thereby preventing content jumping.*/
    /*font:62.5%/130% Verdana, Helvetica, sans-serif;*/
	/*This takes the default 16px down to 10px
	Verdana is the most readable, and readily available screen font in Windows.
    Helvetica most readable, and readily available screen font on Macintosh computers.*/
    color:#b0b0b0; 
	background:#333;
    width:100%; 
	margin:0 auto;
	font:12px/18px Arial, Helvetica, sans-serif;
	/*background: url(../images/bg_pattern.jpg) repeat 0px 0px;*/
}
body * {text-align:left}

.mcnote {color: #ff0099;}




/* GLOBAL DEFAULTS & CSS Reset
========================================================================*/

ul, ol /*default styling*/
{
	margin: 5px 0 15px 5px;
	padding: 0px 0 0 10px;
	list-style-type: none;
	display: block;
}

ol
{
	display: block;
	list-style-position: inside; 
}

h3 {font-size:11px; color:#f7861e; text-transform:uppercase;}

h4/*small titles w/ gray bar behind*/ {font-size:11px; color:#cccccc;background:#525252; margin:2px 0px 7px 0px;padding:4px 0px 4px 45px;text-transform:uppercase;}

h5/*small titles*/ {font-size:11px; color:#cccccc; margin:2px 0px 5px 0px;}
h6 /*small titles*/ {font-size:11px; color:#888; margin:2px 0px 5px 0px;text-transform:uppercase;font-weight:bold;}

a, a:link, a:active, a:visited  {color: #b0b0b0; text-decoration:underline;font-weight:normal;}
a:hover {color: #ffffff; text-decoration:underline;}

a.contentlink, a.contentlink:link, a.contentlink:active, a.contentlink:visited  {color: #8cced1; text-decoration:none;background:#464e4d;font-weight:normal; padding:0px 4px;}
a.contentlink:hover {color: #ffffff; text-decoration:underline;}

a:focus { outline: none;}


.featured  {position:relative; z-index:50;float:left; width: 614px;}
.featured img {float:left; width:192px; margin:2px 7px 0px 0px;}

.featurednew  {position:relative; z-index:50;float:left; width: 621px;}
.featurednew img {float:left; width:200px; margin:2px 7px 0px 0px;}






b {color:#b4b4b4}

img, img a:link, img a:visited, img a:hover, img a:visited:hover {border:0px;}

img.right {
	float:right;
	margin:2px;
	border:0px;
}

img.left {
	float:left;
	margin:2px;
	border:0px;
}

p, td, div
{	
	font-size: 13px;
	line-height: 19px;
	font-family: Arial, Helvetica, sans-serif;
	color: #b0b0b0;
}

p {margin:0px 0px 15px 0px;}

.small {font-size:10px; line-height:12px; color:#888;}



	  
/* STRUCTURAL MARKUP
========================================================================*/

#container
{
	margin: 0 auto;
	width: 1030px;
	background:none;
	
	
	
}

#header
{
	width: 990px;
	height: 140px;
	margin: 0px 0px 0px 0px;
	position:relative;
	float:left;
}


/* MISC. HEADER OBJECT STYLES*/

.logo { margin: 20px 0 0 100px;  position:absolute; z-index:200;}



#contentcontainer /*this is holding everything below the header div */
{
	width: 1030px;
	margin: 0; 
	padding: 0;
	position: relative;
	border:0;
	float:left;
	z-index:400;
	
	
}


#leftcol /*holds the side navigation */
{
	float: left;
	width: 155px;
	margin: 40px 35px 0px 0px;
	
}


#maincol /*main content area */
{
	float: left;
	position:relative;
	width: 835px;
	margin: 0px 0px 0px 0px;
	padding:0px;
}


#homecol /*main content area */
{
	float: left;
	position:relative;
	width: 825px;
	margin: -7px 0px 0px 0px;
	padding:0px;
}

.homeimage {width:800px; height:260px; float:left;}


/* UNORDERED LISTS
========================================*/

#maincol ul
{
	margin: 5px 0px 10px 10px;
	padding: 0px 0 0 0px;
	list-style-type: none;
	display: block;
}


#maincol ul li  /* basic lists in content area */
{ 
	background: url(../images/bullet.gif) no-repeat 0px 7px;
	padding: 1px 0px 4px 13px;
	position:relative;
	line-height:15px;
}

#maincol ul.listtwo  /* basic lists in content area */
{ 
	margin:0px 40px 0px 25px;
	position:relative;
}

#maincol ul.listtwo li  /* basic lists in content area */
{ 
	background: url(../images/bullet.gif) no-repeat 0px 7px;
	padding: 0px 0px 10px 11px;
	position:relative;
}

#maincol ul.smlist li  /* basic lists in content area */
{ 
	font-size:11px;
}

#maincol ul li.links,
#mainnav ul li.links /* adds a special bullet for link lists */
{ 
	background: url(../images/bullet_link.gif) no-repeat 0 4px;
	padding: 1px 0px 5px 13px;
	position:relative;
	color:#ffffff;
}

#maincol ul li.links a, #maincol ul li.links a:link, #maincol ul li.links a:active, #maincol ul li.links a:visited  {color: #cccccc; text-decoration:underline;font-weight:normal;}
#maincol ul li.links a:hover {color: #ffffff; text-decoration:underline;}



#maincol ul.double
{
	width:513px; float:left; margin: 5px 0 10px 5px; padding: 0px 0 0 0px; list-style-type: none;display: block;
}


#maincol ul.double li  /* basic lists in content area */
{ 
	width:243px; float:left; background: url(../images/bullet.gif) no-repeat 0 4px;padding-left: 10px;padding-bottom: 3px;position:relative;
}

#maincol ul.double li.links  /* basic lists in content area */
{ 
	width:243px; float:left; background: url(../images/bullet_link.gif) no-repeat 0 4px;padding-left: 10px;padding-bottom: 3px;position:relative;
}

#maincol ul.blogsnips
{
	margin: 5px 0px 10px 5px;
	padding: 0px 0 0 0px;
	list-style-type: none;
	display: block;
}


#maincol ul.blogsnips li
{ 
	background: url(../images/bullet.gif) no-repeat 0 7px;
	padding: 0px 0px 5px 11px;
	position:relative;
}


/* MISC. CONTENT OBJECT STYLES
========================================*/



/* COLUMNS IN CONTENT
========================================*/

.contentleft /*main content area */
{
	float: left;
	width: 614px;
	margin: 10px 0px 0px 0px;
	padding-right:20px;
	position:relative;
	z-index:25;
	
}


.contentright /*main content area */
{
	float: left;
	width: 200px;
	margin: 20px 0px 0px 0px;
	/*border-left:1px solid #525252;*/
}


.contentfull /*main content area */
{
	position:relative;
	width: 824px;
	margin: 0px 0px 0px 0px;
	clear:both;
	
}
/* Out of the ordinary columns. These can be any width neccessary */

/*.wide { width: 500px;}
.narrow { width: 175px;}*/

.leftint {width: 340px;float:left;margin:0px 17px 0px 0px; padding:0px;}
.rightint {width: 160px;float:left; margin-top:0px;}



.borderleft {border-left:1px solid #525252;}
.borderright {border-right:1px solid #525252;}


.contentright .blocks

{
	width: 170px;
	border-bottom:1px solid #525252;
	padding: 20px 0px 12px 20px;
	margin: 0px 0px 0px 0px;
	font-size:11px;
	line-height:15px;
}

.contentright .blocks ul li

{
	
	font-size:11px;
	line-height:15px;
}

.contentright .firstblock

{
	padding: 0px 20px 12px 20px;
	margin: 10px 0px 0px 0px;
}

.orangeblocks { color:#ff8b20; line-height:20px;font-size:12px;}
.lighter { color:#dddddd;}
.orange { color:#ff8b20;}

.indent {margin:15px 50px 15px 45px;}
.indenthm {margin:15px 60px 15px 45px;}

.projectdesc {margin:10px 50px;width:740px;clear:both;border:0px solid #000;float:left;}
.maindesc {width:470px;float:left;margin:10px;}
.supportdesc {width:160px;float:left;margin-left:20px;border-left:1px solid #525252;padding:0px 0px 0px 15px;font-size:11px;}
.supportdesc .supportblocks

{
	width: 120px;
	border-bottom:1px solid #525252;
	padding: 20px 0px 12px 20px;
	margin: 0px 0px 0px 0px;
	font-size:11px;
}

.rule {border-bottom:1px solid #666;}


/* FOOTER STYLES
========================================*/

#footer
{
	width: 900px;
	height: 40px;
	float:left;
	text-align: right;
	margin:20px 0px 0 0px;
	font-size: 10px;
	color:#ff8b20;
}


.copyright
{
	font-size: 10px;
	line-height: 12px;
	color: #808080;
	display: block;
	text-align: left;
	width:660px;
	margin-top:28px;
	float:left;
}



/* NAVIGATION
========================================================================*/   

#mainnav 
{
        width: 750px;
		height:35px;
        margin: 55px 0px 0px 187px;
        padding: 0px;
        position:relative; background:#464646;
		
  
}


#mainnav ul
{
       
        margin: 0px 0px 0px 25px;
        padding: 0px;
        list-style-type: none;
}

#mainnav li
{
        display: inline;
		float:left;
        margin: 0px 0px 0px 0px;
        padding: 0px;
        background:none;
}

#mainnav img
{
       
		height:30px;
        
		
  
}




/* MAIN NAVIGATION HIGHLIGHTS 
========================================*/


body#projects ul li.projectsbtn a,
body#home ul li.homebtn a,
body#contact ul li.contactbtn a,
body#blog ul li.blogbtn a,
body#agency ul li.agencybtn a,
body#services ul li.servicesbtn a

{ border-bottom:2px solid #f7861e; }



/* SIDE NAVIGATION
========================================*/

/* SIDE NAVIGATION
======================================== */

#secnavcontainer { width: 155px; margin-top: 20px;}

#secnavcontainer ul { margin: 0; padding: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; }

#secnavcontainer ul li ul { border-bottom: 2px solid #525252; }

#secnavcontainer a { display: block; padding: 10px 3px 10px 0px; width: 155px; border-bottom: 2px solid #525252;text-align:right; line-height:12px; font-size:11px;}
#secnavcontainer a:link, #secnavcontainer a:visited { color: #b0b0b0; text-decoration: none;}
#secnavcontainer a:hover, #secnavcontainer a:visited:hover { color: #fff; }

#secnavcontainer ul li ul li {background: url(../images/bullet.gif) no-repeat 150px 7px;}

#secnavcontainer ul li ul li a:link,
#secnavcontainer ul li ul li a:visited

{width: 145px; text-align:right; padding:1px 12px 0px 0px; margin:5px 0px 5px 0px; border-bottom: none; color:#888888;}

#secnavcontainer ul li ul li a:hover {color:#ccc; }

#secnavcontainer ul li ul li a.selected
{
text-align:right;
padding:1px 2px;
border-bottom: none;
color:#ff9933;
background:#252525;
}



/*breadcrumbs*/
#breadcrumbs  { line-height:12px; font-size:11px; text-align:left; margin: 10px 0px 0px -5px;  color:#ff8b20;}
#breadcrumbs a { display: inline; padding: 10px 10px 10px 8px; text-align:right; line-height:12px; font-size:11px;text-decoration:none;color:#888888; }
#breadcrumbs span { display: inline; padding: 10px 10px 10px 10px; text-align:right; line-height:12px; font-size:11px; }
#breadcrumbs a:link, #secnavcontainer a:visited { color: #b0b0b0; text-decoration: none; }
#breadcrumbs a:hover { color: #fff; }


/* SIDE NAVIGATION HIGHLIGHTS 
========================================*/

body.pgaboutmain #secnavcontainer a.secabout,
body.pgcontact #secnavcontainer a.seccontact,
body#services.pgmarket #secnavcontainer a.secmarketing,
body#services.pgmedia #secnavcontainer a.secmedia,
body#services.pgcreative #secnavcontainer a.seccreative,
body#services.pgtech #secnavcontainer a.sectech,
body#projects #secnavcontainer a.secactive

/*{ color:#fff; background: #525252 url('../images/highlight_arrow.gif') no-repeat 165px 10px; }*/
{ color:#fff; border-bottom:2px solid #f7861e; }




body.subpr #secnavcontainer ul li ul li.pgmarkpr,
body.subresearch #secnavcontainer ul li ul li.pgmarkresearch,
body.substrategy #secnavcontainer ul li ul li.pgmarkplan,
body.submediaplan #secnavcontainer ul li ul li.pgmarkmediaplan,
body.subauditing #secnavcontainer ul li ul li.pgmarkauditing,
body.subbuying #secnavcontainer ul li ul li.pgmarkbuying,
body.subprog #secnavcontainer ul li ul li.pgmarkprog,
body.subseo #secnavcontainer ul li ul li.pgmarkseo,
body.subsocial #secnavcontainer ul li ul li.pgmarksocial,
body.subbranding #secnavcontainer ul li ul li.pgmarkbranding,
body.subcopywriting #secnavcontainer ul li ul li.pgmarkcopywriting,
body.subsignage #secnavcontainer ul li ul li.pgmarksignage,
body.subvideo #secnavcontainer ul li ul li.pgmarktvvideo,


{background: url(../images/bullet_orange.gif) no-repeat 150px 7px;}

	
	
/*submenu is set to display:none on all pages in stylesheet. Each page has a body class 
which is connected to the submenu classes below. For example, if I am on a "Business" page, 
the submenu class .subbusiness is set to display:block*/

.submenu { display: none;}

body#home .submenu.subhome,
body#agency .submenu.subhome,
body#services .submenu.subhome,
body#blog .submenu.subhome,
body#contact .submenu.subhome,
body#careers .submenu.subhome
{ display: block;}

body#projects .submenu.subprojects  { display: block;}


.supersubmenu { display: none;}


body#services.pgmedia .submediasub { display: block;}
body#services.pgcreative .subcreativesub { display: block;}
body#services.pgmarket .submarketsub { display: block;}
body#services.pgtech .subtechsub { display: block;}



/* FORMS
========================================================================*/   



/* Galleria
========================================*/
/* BEGIN DEMO STYLE */


.caption {background:#464646;width:700px;display:block;padding:5px 0px 5px 0px;font-weight:normal;}
.caption span{color:#ff8b20;margin-left:20px;}
.demo {position:relative;margin-top:0px;margin-bottom:5px;}
.thumbs {width:720px;margin-left:10px;border:1px solid #ff0000;float:left;position:relative; }
#maincol ul.gallery_demo {width:710px;float:left;position:relative;;margin-left:15px;}
#maincol ul.gallery_demo li {width:73px;height:44px; margin: 0px 0px 0px 5px;float:left;display:inline;position:relative;padding:0px 0px 0px 0px;background:none;border:0px solid #000;}
	
#main_image /*wraps photo and caption*/{margin:0 0 5px 20px;width:700px; height:460px; background:#333;border:0px solid #ff0000;}
#main_image img /*just the image*/{margin-bottom:10px;border:0px solid #ffff00; width:700px; height:420px;}


#spanOtherLink {border:0px solid #000; width:260px; height:24px; position:absolute; top:435px; left:450px;text-align:right; z-index:500;}
#spanOtherLinkb {border:0px solid #ff0000; width:60px; height:24px; position:absolute; top:435px; left:370px; font-size:11px;z-index:500;}
#spanOtherLink p {font-size:11px; color:#f7861e;}
	
	

/* ----------- My Form ----------- */
.myform{
	margin:0 auto;
	width:270px;
	padding:14px;
}
	

	/* ----------- stylized ----------- */
	#stylized{
		border-left:1px solid #525252;
		
	}

	
	#stylized label{
		font-size: 11px;
	}
	
	/*#stylized input{
		float:left;
		font-size:12px;
		padding:4px 2px;
		border:0;
		width:180px;
		margin:2px 0 20px 10px;
	}*/
	#stylized input{	background:#3d3d3d;
	border: 1px solid #666;
	color:#ffffff;
	padding: 3px;
	margin-top: 3px;}
	
	
	#stylized button{ 
		background: url(../images/button_long.jpg) no-repeat;
	font: bold 10px Arial, Helvetica, sans-serif;
	color: #ccc;
	border: none;
	float:left;
	width: 120px;
	height: 20px;
	cursor: pointer;
	}
	
	#stylized textarea{
	width: 200px;
	height: 60px;
	color:#ffffff;
	background:#3d3d3d;
	border: 1px solid #666;
	padding: 2px;
	font: 12px Arial, Helvetica, sans-serif;
	margin-top: 3px;
}
#stylized textarea:focus, #stylized input[type="text"]:focus {
	background: #666666;
}