@charset "UTF-8";
/* CSS Document */

/*  ---  YUI reset pasted here  ---  */

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, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
}
ol, ul {
	list-style: disc;
	list-style-position: outside;
	padding: 0 0 10px 16px;
}
li {
	line-height: 1.42em;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
}
/*  ---  YUI reset ends  ---  */


body {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	background: #73abd6;
	margin: 10;
	padding: 0;
}
body {
	font-size: 75%;
}
html>body {
	font-size: 12px;
}
p {
	line-height: 1.42em;
	padding: 0 0 10px 0;
}
strong {
	font-weight: bold;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.17em;
	line-height: 2.17em;
	padding: 0;
	color: #cc0033;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.83em;
	padding: 10px 0 6px 0;
	color: #cc0033;
}
h3 {
	color: #cc0033;
	padding: 12px 0 6px 0;
	font-size: 1.5em;
}
h4 {
	line-height: 1.5em;
	padding: 6px 0 8px 0;
	color: #000;
	font-size: 1.25em;
	
}
.intro {
	font-size: 1.83em;
	line-height: 120%;
	padding: 16px 0 20px 0;
	margin-top: 0;
	color: #666;
}
.pullQuote {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.5em;
	font-style:italic;
	line-height: 120%;
	padding: 8px 0 6px 0;
	margin-top: 0;
	color: #999
}
.toDo { color: #0C0 !important; }
.sliderClient {
	font-family: Arial, Helvetica, sans-serif;
	color: #cc0033;
	font-size: 91.66%;
	font-weight: normal;
	text-transform: uppercase;
	padding: 0 0 10px 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
}
a img {
	border: none;
}
a:link {
	text-decoration: underline;
	color: #00468c;
}
a:visited {
	text-decoration: underline;
	color: #537ca6;

}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}
.container {
	width: 960px;
	margin: 0 auto;
	position:relative;
}
.header {
	height: 44px;
	width: 960px;
	position: relative;
	clear: both;

	background-image: url(../images/panelShad-top.png);
	background-position: bottom center;
	background-repeat: no-repeat;

}
#panelTop {
	width: 960px;
	height: 15px;
	background-image: url(../sliced-psd/images/bgMiddle-content960.png);
	background-position: top center;
	background-repeat: no-repeat;
}
/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/

.content {
	width: 960px;
	background-color: #fff;
	background-position: top center;
	background-repeat: repeat-y;
	padding-bottom: 20px;
	position:relative;
}
/* ~~ The footer ~~ */
.footer {
	width:960px;
	height:60px;
	background-color: #fff;
	background-position: top center;
	background-repeat: no-repeat;
	border-top: solid 2px #cc0033;
}
#footerShadow {
	width:960px;
	height:50px;
	background-image: url(../images/panelShad-bottom.png);
	background-position: top center;
	background-repeat: no-repeat;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: -7px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}


/*  ---  MP sliced psd styles begin here  --- */

#logoDiv {
	display:inline;
	float: left;
	width: 612px;
	position: relative;
	margin-left: 15px;
	margin-right: 10px;
}
#logo {
	width: 240px;
	padding: 10px 0 0 0;
	display: inline;
	float: left;
	clear: none;
}
#strapline { display: inline; float: left; clear: none; }
#strapline h3 {
	color: #022456;
	margin: 63px 0 0 5px;
	font-size: 1.25em;
}
#contactDiv {
	display:inline;
	float: right;
	position: relative;
	margin-left: 5px;
	margin-right: 46px;
}
#contactDiv h3 {
	color: #022456;
	margin: 32px 0 0 0;
	text-align: right;
	font-size: 1.25em;
	line-height: 1.8em;
}

.flyout-leftTop, .flyout-rightTop {
	width:31px;
	height:15px;
	background-position: top left;
	background-repeat: no-repeat;
}
.flyout-leftTop {
	background-image: url(../sliced-psd/images/flyout_leftTop.png);
}
.flyout-rightTop {
	background-image: url(../sliced-psd/images/flyout_rightTop.png);
}
.flyout-leftMiddle, .flyout-rightMiddle {
	width:31px;
	height:145px;
	background-position: top left;
	background-repeat: repeat-y;
}
.flyout-leftMiddle {
	background-image: url(../sliced-psd/images/flyout_leftMiddle.png);
}
.flyout-rightMiddle {
	background-image: url(../sliced-psd/images/flyout_rightMiddle.png);
}
.flyout-leftBottom, .flyout-rightBottom {
	width:31px;
	height:22px;
	background-position: top left;
	background-repeat: no-repeat;
}
.flyout-leftBottom {
	background-image: url(../sliced-psd/images/flyout_leftBottom.png);
}
.flyout-rightBottom {
	background-image: url(../sliced-psd/images/flyout_rightBottom.png);
}


/*  ---  Area-specific style rules  ---  */

.footer {
	padding: 13px 0 6px 0;
}
#copyright p, #footer-right p {
	font-size: 90%;
	color: #022456;
	text-align: right;
	margin-top: 5px;
	line-height: 150%;
}
#copyright a, #contactDiv a, #footer-right a, #footer-right a:visited, #footer-right a:hover {
	color: #022456;
}
#contactDiv a {
	text-decoration: none;
}
#contactDiv a:hover {
	text-decoration: underline;
}

.header p {
	color: #022456;
}
.header a, .header a:visited, .header a:hover {
	color: #022456;
}

.sidebarContainer h2 {
	padding-top: 0;
	line-height: 1.2em;
}

/*  ---  Typography specifics  --- */

em {
	font-style: italic;
}

#bubblecontent h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 145%;
	padding: 0;
	margin: 0;
	color: #cc0033;
	font-weight: normal;
}
#bubblecontent h3 a {
	color: #cc0033;
	text-decoration: underline;
}
#bubblecontent h3 a:hover {
	color: #cc0033;
	text-decoration: none;
}



/*  ---  Typography specifics  --- */

.inlineTitle {
	color: #cc0033;
}

.droptabbottom a, .button a, .cardbutton a, .socmedia a {  position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; }



.socmedia { height: 35px; width: 30px; float: left;	clear: none; margin: 0 5px 0 0; padding: 0; position: relative; }
.stumbleUpon { background-image:url(../images/socMedia/socialMedia-buttons.png); background-position: 0 0; background-repeat: no-repeat; }
.stumbleUpon:hover { background-position: 0 -35px; }
.twitter { background-image:url(../images/socMedia/socialMedia-buttons.png); background-position: -30px 0; background-repeat: no-repeat; }
.twitter:hover { background-position: -30px -35px; }
.facebook { background-image:url(../images/socMedia/socialMedia-buttons.png); background-position: -60px 0; background-repeat: no-repeat; }
.facebook:hover { background-position: -60px -35px; }
.digg { background-image:url(../images/socMedia/socialMedia-buttons.png); background-position: -90px 0; background-repeat: no-repeat; }
.digg:hover { background-position: -90px -35px; }


/*  ---  TEMPORARY/PAGE-SPECIFIC style overrides begin here  --- */

.titleShift {
	position: absolute;
	left: -9999px;
}
.titleback_home {
	min-height: 325px;
	background-image:url(../images/pageTitle_homeAlpha.png);
	background-position: 5px 0;
	background-repeat: no-repeat;
	margin-bottom: 10px;
}
.titleback-work-main {
	min-height: 75px;
	background-image:url(../images/sectionTitle-4colRight-ourWork.png);
	background-position: top right;
	background-repeat: no-repeat;
}
.titleback-work-print {
	min-height: 75px;
	background-image:url(../images/sectionTitle-4colRight-print.png);
	background-position: top right;
	background-repeat: no-repeat;
}
.titleback-work-online {
	min-height: 75px;
	background-image:url(../images/sectionTitle-4colRight-online.png);
	background-position: top right;
	background-repeat: no-repeat;
}
.titleback-work-branding {
	min-height: 75px;
	background-image:url(../images/sectionTitle-5colRight-branding.png);
	background-position: top right;
	background-repeat: no-repeat;
}
.titleback-work-events {
	min-height: 75px;
	background-image:url(../images/sectionTitle-4colRight-events.png);
	background-position: top right;
	background-repeat: no-repeat;
}
.titleback-work-aboutUs {
	min-height: 75px;
	background-image:url(../images/sectionTitle-5colRight-meetTheTeam.png);
	background-position: top right;
	background-repeat: no-repeat;
}
.titleback-contact {
	min-height: 75px;
	background-image:url(../images/sectionTitle-4colRight-dontBeShy.png);
	background-position: top right;
	background-repeat: no-repeat;
}

body{
	background-image: url(../images/texture-damask2.jpg);
	background-position: top left;
	background-repeat: repeat-x repeat-y;
}

#contactForm {
	background-color: #f6f6f6;
	padding: 5px;
	border: solid 2px #ccc;
}
input {
	display: inline;
}
.inlineForm {
	display: inline;
	padding-right: 10px;
	
}



/*Sorting out \Ross' dropdown form...*/



/* -- *testing the form expand panel - TEMPORARY STYLES!!! -- */




/* -- NEW header-based form slideout stuff here -- */

#formTab1 {
	position: relative;
	float: right;
	margin-right: 30px;
	margin-left: 20px;
	height: 30px;
	width: 180px;
}
#formTab1 a {  position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; }

#pageTop {
	float: left;
	margin: 0px 31px;
	padding: 8px 5px 0px 5px;
	width: 898px;
	position: relative;
}
#panel {
	background: #cc0033;
	height: 620px;
	display: none;
	
	-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 1);
	-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
	
}
.noPadding {
	padding: 0 !important;
}
.slide {
	margin: 0;
	padding: 0;
	text-align: center;
	/*border-top: solid 4px #422410;
	background: url(jquery-tutorials/images/btn-slide.gif) no-repeat center top;*/
}
/*.btn-slide {
	background: url(jquery-tutorials/images/white-arrow.gif) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}*/
.btn-slide {
	color: #cc0033;
	text-decoration: none;
	background-image: url(../images/contactFormTab_4up-30pxH.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
.btn-slide:hover {
	background-position: 0px -32px;
}

.active {
	background-position: right 12px;
	background-position: 0px -64px;
}
.active:hover {
	background-position: 0px -96px;
}

#panel td {
	color: #f2eada;
	line-height: 160%;
}

.copyright {
	color: #fff;
	text-shadow: 0px 1px 2px #000;
}

hr {border: none 0;
border-top: 2px dotted  #CCC;/*the border*/
width: 100%;
margin: 14px 0 16px 0;
height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
} 
.center {
	text-align: center;
}

/* popups fiddling */

.captionDiv {
	border: 1px solid #fff;
	background-image: url(../images/75percentWhite_10px.png);
	background-position: top left;
	background-repeat: repeat-x repeat-y;
	padding: 0 10px 0 10px;
	z-index: 50;
	margin-left: 26px;
}
.captionDiv h3 { line-height: 1em; margin-bottom: 6px; }

/**/

#rolloverDiv {
	position:relative;
	padding: 10px;
}

#menu1, #menu2 {
	border-bottom:1px solid #fff;
}

#menu1 li, #menu2 li {
	display:inline;
}

#menu1 a .text {
	display:none;
} 

#menu1 a:hover .text {
	display:block;
	position:absolute;

	top:320px;
	left:10px;
	color:#000;
}

#twitterBubble {
	border: 2px solid #bfbfbf;
	padding: 10px;
	width: 222px;
	padding: 10px;
	margin-bottom: 55px;
	
}
.rounded-corners {
     -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.shadow {
-moz-box-shadow: 0px 3px 4px #bfbfbf;
-webkit-box-shadow: 0px 3px 4px #bfbfbf;
box-shadow: 0px 3px 4px #bfbfbf;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#bfbfbf')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#bfbfbf');
}

#twitterBubble:after {
	content: "";
	position: absolute;
	left: 20px;
	width: 220px;
	height: 100px;
	background-image: url(../images/tweetFeed-bottom.png);
	margin-top: -18px;
}

.linkPanel {
	border: 2px solid #bfbfbf;
	padding: 10px;
	width: 222px;
	padding: 10px;		
}

#homepageStrip {
	margin-left: -46px !important;
}
#homepageStrip ol, #homepageStrip ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
	padding-left: 0 !important;
}

#idiotButton {
	background-color: #ccc;
	border-color: #cc0033;
	padding: 12px 10px 4px 10px;
}
#idiotButton:hover {
	background-color: #fff;
	border-color: #cc0033;
}
#idiotButton p {
	font-size: 15px;
	line-height: 28px;
	margin: 0;
	padding: 0;
}
#idiotButton p a {
	text-decoration: none;
	color: #00468C;
}
#idiotButton p a .highlight {
	font-size: 33px;
	text-shadow: 0px 1px 0.5px #fff, 0px -1px .5px #666;
	text-decoration: none;
	letter-spacing: 120%;
	line-height: 90%;
}