/*

Style Sheet for Merkle ICM landing page
--------------------------------------------*/

/*
YUI Reset

Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
html { color: #000; background: #faf9f1 url(../images/backgrounds/bkg-pagebody.jpg) repeat-x 0 0; height: 100%; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, 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; }
li { list-style: none; }
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; font-variant: normal; }
/* to preserve line-height and selector appearance */
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }
/*to enable resizing for IE*/
*:first-child+html input, *:first-child+html textarea, *:first-child+html select { font-size: 100%; }
/*because legend doesn't inherit in IE */
legend { color: #000; }

/* --- Clearfix Hack --- */

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	line-height: 0;
	content: " ";
	clear: both;
	height: 1px;
	width: 1px; 
	margin: 0 -1px -1px 0;
	overflow: hidden;	
	}
.clearfix { display: inline-block; }


/* --- Block Elements --- */
br {}
hr {}
img {}
a img { border: 0 none; }

/* --- Header Text --- */
h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } 
h1 { font-size: 32px; color: #000000; margin-bottom: 15px; }
h2 { font-size: 16px; color: #000000; margin-bottom: 2px; }
h3 { font-size: 13px; color: #000000; margin-bottom: 2px; }
h4 { font-size: 12px; color: #000000; margin-bottom: 2px; }
h5 { font-size: 11px; color: #000000; margin-bottom: 2px; }
h6 { font-size: 10px; color: #000000; margin-bottom: 2px; }

/* --- Block Text --- */
p, blockquote, caption, div { margin-bottom: 10px; } 
p { }
blockquote {}
caption {}
div {}

/* --- Text Elements --- */
a { color: #0461a6; text-decoration: underline; }
a:hover { color: #cc0000; }
pre {}
span {}
sup { font-size: 9px; }
small { font-size: 10px; }
address {}
strong { font-weight: bold; }
em { font-style: italic; }

/* --- List Items --- */
ul, ol {}
ul {}
ul li {}
ol {}


/* --- Definition Elements --- */
dl, dt, dd {}
dl {}
dt {}
dd {}

/* --- Table  Elements --- */
table {}
th {}
thead {}
tbody {}
tr {}
td {}
tfoot {}
legend {}

/* --- Inputs --- */
input, select, button, textarea { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
fieldset { font-size: 11px; border: 0; }
legend { }
form { }
input { margin-bottom: 0; }
select { margin-bottom: 0; }
button {}
textarea { margin-bottom: 0; }


/* 
     Utility ID's
     ---------------------------------------------------------- */      
.clear { display: block; clear: both; overflow: hidden; width: 1px; height: 1px; margin: 0 -1px -1px 0; border: 0; font-size: 0; line-height: 0; }
.hide { position: absolute; left: -9999px; }
.show { position: static !important; }
.header { margin-bottom: 10px; }


/* 
	Body
-----------------------------*/
body { background: transparent none; color: #444850; font: 15px/21px Arial, Helvetica, sans-serif; margin: 0; padding: 0; width: 100%; } 


/* 
	Header
-----------------------------*/
#header { width: 792px; height: 260px; margin: 0 auto; padding: 0; background: transparent url(../images/backgrounds/bkg-header.jpg) no-repeat 0 64px; overflow: visible; }

#logo { background: transparent url(../images/backgrounds/bkg-logo.jpg) no-repeat 0 0; width: 279px; height: 42px; display: block; margin: 0 0 0 -39px; padding: 22px 0 0 45px; font-size: 0; line-height: 0; position: relative; } /* Changed 3/27/09 */

#header h1, #header h2 { position: absolute; left: -9999px; }


#utilitynav { width: 374px; height: 51px; background: transparent url(../images/backgrounds/bkg-utilitynav.jpg) no-repeat 0 0; padding: 0; margin: 0; float: right; position: relative; top: -42px; left: 16px; z-index: 1; } /* Changed 3/27/09 */
#utilitynav a { display: block; float: right; width: 102px; height: 28px; margin: 18px 33px 0 0; }
#utilitynav a span { position: absolute; left: -9999px; }



/* 
	Content
-----------------------------*/
#content { width: 792px; margin: 0 auto; padding: 0 0 20px; background: transparent url(../images/backgrounds/bkg-content.gif) repeat-y 0 0; }
#contentheader { display: block; width: 792px; height: 240px; font-size: 0; line-height: 0; margin: 0 0 -209px; padding: 0; background: transparent url(../images/backgrounds/bkg-contentheader.jpg) no-repeat 0 0; } 


/* 
	Article
-----------------------------*/
#article { width: 410px; padding: 0 45px 0 32px; margin: 0; float: left; }

#article h3 { font-size: 26px; line-height: 28px; color: #444850; margin: 0 0 10px; padding: 0; }
#article h3.secondary { font-size: 16px; line-height: 20px; font-weight: bold; margin-top: 20px; margin-bottom: 7px; padding-right: 145px; }
#article h3.tertiary { font-size: 18px; line-height: 20px; margin-top: 25px; }
#article h4 { font-size: 15px; line-height: 19px; color: #0461a6; font-weight: bold; margin: 0 0 5px; padding: 0; }

span.footnotes { color: #0461a6; cursor: pointer; border-bottom: 3px double #0461a6; }
span.notes { position: absolute; left: -9999px; display: block; width: 190px; border: 5px solid #e5e1be; background: #f1f1d1; font-size: 13px; line-height: 17px; padding: 5px; color: #3e424a; }
.shownotes { left: auto !important; }

span.portfolio { margin: 0 0 0 282px; top: 518px; }
span.interaction { margin: 0 0 0 235px; top: 351px; }
span.behavior { margin: 0 0 0 30px; top: 354px; }

.process { float: left; border: 7px solid #e9e9d5; margin: 0 15px 3px 0; padding: 0; background: #e9e9d5 none; width: 154px; font-size: 11px; line-height: 16px; color: #444850; }
.process img { vertical-align: top; padding-bottom: 5px; }
.process p { margin: 0; background: transparent url(../images/backgrounds/bkg-process.gif) no-repeat 0 0; padding: 0 0 0 20px; }

a#enlarged { position: absolute; z-index: 1; display: block; margin: -152px 0 0 -10px; left: -9999px; }

#article ul { margin: 0 0 5px; padding: 0; } 
#article ul li { padding: 0 0 7px 10px; background: transparent url(../images/lists/list-standard.gif) no-repeat 0 7px; }

#article ul ul { margin: 0; background-position: 0 100%; padding: 0 0 4px; }
#article ul ul li { background: transparent url(../images/lists/list-standard.gif) no-repeat 0 7px; padding-bottom: 5px; padding-left: 12px; font-size: 13px; color: #3e424a; }

#article .webinar { width: 430px; background: transparent url(../images/backgrounds/bkg-webinar_body.gif) repeat-y 0 0; margin: 30px 0; padding: 0; font-size: 15px; line-height: 21px; }
#webinartop { display: block; margin: 0; padding: 0; width: 430px; height: 9px; font-size: 0; line-height: 0; background: transparent url(../images/backgrounds/bkg-webinar_top.gif) no-repeat 0 0; }
#webinarbottom { display: block; margin: 0; padding: 0; width: 430px; height: 9px; font-size: 0; line-height: 0; background: transparent url(../images/backgrounds/bkg-webinar_bottom.gif) no-repeat 0 0; }

#article .webinar h3 { font-size: 19px; padding: 0 22px; margin: 10px 0 0; }
.webinar p { padding: 0 22px; margin-bottom: 15px; }

.lister { background: transparent url(../images/backgrounds/bkg-lister_body.jpg) repeat-y 0 0; width: 434px; padding: 0; }

#article .lister ul { background: transparent url(../images/backgrounds/bkg-lister_top.jpg) no-repeat 0 0; margin: 0; padding: 18px 0 0; }
#article .lister ul li { padding: 0 10px 7px 20px; background: transparent url(../images/backgrounds/bkg-lister_bottom.jpg) no-repeat 0 100%; min-height: 87px; }

#article .lister ul ul { margin-bottom: 22px; background: transparent none; padding: 0; }
#article .lister ul ul li { padding-left: 12px; padding-bottom: 5px; background: transparent url(../images/lists/list-lister.gif) no-repeat 0 8px; min-height: 0; } /* Changed 3/17/09 */

#article .lister ul li.last { background: transparent url(../images/backgrounds/bkg-lister_footer.jpg) no-repeat 0 100%; min-height: 76px; }
#article .lister ul li.last ul { margin-bottom: 5px; }



/* 
	Sidebar
-----------------------------*/
#sidebar { width: 305px; padding: 0; margin: 0; float: left; }

.sideitem { width: 246px; margin: 0 0 15px; padding: 20px 14px 10px; background: #f3f3d9 url(../images/backgrounds/bkg-sideitem.gif) repeat-x 0 0; font-size: 12px; line-height: 16px; color: #3e424a; overflow: hidden; } 
.sideitem h3 { background: transparent url(../images/headers/header-company.gif) no-repeat 0 0; border-bottom: 1px solid #c4c19f; padding-bottom: 8px; margin-bottom: 7px; height: 17px; }
.sideitem h3 span { position: absolute; left: -9999px; }

/* Added 3/17/09 */
.sideitem ul li { background: transparent url(../images/lists/list-standard.gif) no-repeat 0 5px; padding-left: 10px; padding-bottom: 5px; }


.quote { width: 249px; padding-right: 10px; background-color: #f4f4dd; background-image: url(../images/backgrounds/bkg-sideitem_quote.jpg); overflow: visible; }
.quote .referrer { font-size: 11px; line-height: 15px; width: 94px; padding: 0 0 0 7px; margin: 0; float: left; } 
.quote .referrer strong { display: block; font-style: italic; padding-bottom: 5px; } 
.quote .referrer img { border: 4px solid #d0cdaa; }

.quote .pullquote { float: left; width: 145px; font-size: 12px; line-height: 19px; margin: 0; color: #514f3f; padding: 0 3px 0 0; } 
.quotemarkleft { display: inline-block; background: transparent url(../images/backgrounds/bkg-leftquote.gif) no-repeat 0 0; width: 13px; height: 13px; font-size: 0; line-height: 0; }
.quotemarkright { display: inline-block; background: transparent url(../images/backgrounds/bkg-rightquote.gif) no-repeat 0 0; width: 13px; height: 14px; font-size: 0; line-height: 0; }

.quotemarkleft span, .quotemarkright span { position: absolute; left: -9999px; }
.quotetext { padding: 0 3px; }

/* Added 3/17/09 */
.events h3 { background: transparent url(../images/headers/header-events.gif) no-repeat 0 0; }
/*added 4/22/09 jn*/
.forrester h3  { background: transparent url(../images/headers/vireforrester.gif) no-repeat 0 0; height:37px; }

ul.companies { overflow: visible; width: 264px; margin-bottom: 7px; } 
ul.companies li { float: left; padding-right: 12px; padding-left: 0; background: transparent none; padding-bottom: 0; } /* Changed 3/17/09 */
ul.companies li img { border: 2px solid #d0cdaa; }

.insight { width: 242px; padding: 12px 10px; background: #f1f1d1 none; border-top: 4px solid #e5e1be; border-left: 6px solid #e5e1be; border-right: 6px solid #e5e1be; border-bottom: 11px solid #e5e1be; }
.insight h3 { background: transparent url(../images/headers/header-insight.gif) no-repeat 0 0; height: 37px; }
.insight form { margin: 0; padding: 0;  }
.insight label { position: absolute; left: -9999px; }
.insight input { font-size: 12px; color: #726d57; padding: 3px; width: 230px; border: 1px solid #cac4ae; }
.insight form .buttonwell { margin: 0; }
.insight form .buttonwell input { padding: 0; width: auto; border: none; vertical-align: middle; }
.insight .buttonwell a.target img, .insight .buttonwell a.download img { padding: 0px; width: auto; border: none; vertical-align: middle; margin-top: 10px;} /*add jn 4-10-09*/

/* Added 6/19/09 */
h3.whitepaper  { background: transparent url(../images/headers/download_whitepaper.gif) no-repeat 0 0; height:37px; }

/* Changed 3/17/09 */
#thankyou { display: none; width: 241px; padding: 32px 10px 10px; background: #f1f1d1 url(../images/backgrounds/bkg-insight.gif) repeat-x 0 0; border: 4px solid #e1ddb5; margin: -243px 0 0 15px; position: absolute; }
#thankyou h4 { background: transparent url(../images/headers/header-emaillist.gif) no-repeat 0 0; height: 37px; margin-bottom: 10px; }
#thankyou h4 span { position: absolute; left: -9999px; }
#thankyou p { margin-bottom: 0; }
a#closeinsight { cursor: pointer; display: block; float: right; position: relative; top: -76px; }
/* Changed 3/17/09 */


/* 
	Footer
-----------------------------*/
#footer { width: 772px; margin: 0 auto; padding: 27px 10px; background: transparent url(../images/backgrounds/bkg-footer.jpg) no-repeat 0 0; font-size: 11px; color: #3d5723; }

#footer p { float: left; }
#footer p span { padding: 0 0 0 7px; }
p#cdglink { float: right; }


/* 
	Contact Form
-----------------------------*/
span.overlay { display: block; width: 100%; height: 100%; font-size: 0; line-height: 0; margin: 0; padding: 0; position: absolute; top: 0; z-index: 2; background: transparent url(../images/backgrounds/bkg-contact_screen.png) repeat 0 0; }

#contact { position: absolute; z-index: 3; margin: 0 auto; padding: 0; width: 436px; height: auto; top: 0; left: -9999px; position: fixed; } 
.showcontact  { width: 100% !important; height: 100% !important; left: auto !important; }

#contact form { margin: 100px auto 0; padding: 0; width: 436px; }

#contact form .header { width: 396px; height: 42px; margin: 0; padding: 41px 0 0 40px; background: transparent url(../images/backgrounds/bkg-contact_header.png) no-repeat 0 0; }
#contact form .header h2 { color: #0461a6; font-size: 21px; font-weight: bold; margin: 0; text-transform: uppercase; }
#contact form .header h2 span { position: absolute; left: -9999px; }
#contact #closewindow { float: right; display: block; margin: -27px 20px 0 0; padding: 0; color: #514f3f; font-size: 12px; line-height: 19px; }
#contact a#closewindow:hover { color: #cc0000; }

#contact form .text { width: 397px; margin: 0; padding: 15px 0 5px 39px; background: transparent url(../images/backgrounds/bkg-contact_body.png) repeat-y 0 0; }
#contact form .text div { width: 352px; padding: 0; }
#contact form .text div label { display: block; color: #636466; font-size: 12px; font-weight: bold; margin-bottom: 3px; }
#contact form .text div label span { position: absolute; left: -9999px; }
#contact form .text fieldset { margin: 0; padding: 0; }
#contact form .text fieldset div { width: 174px; float: left; }
#contact form .text fieldset div.right { padding-left: 10px; width: 164px; }
#contact form .text fieldset div input { width: 160px; }
#contact form .text p { font-size: 11px; color: #636466; }

#contact form input { border: 1px solid #cac4ae; padding: 3px; width: 344px; font-size: 12px; color: #726d57; }
#contact form textarea { border: 1px solid #cac4ae; padding: 3px; width: 344px; }

#contact form div.buttonwell { width: 397px; margin: 0; padding: 0 0 0 39px; height: 72px; background: transparent url(../images/backgrounds/bkg-contact_buttonwell.png) no-repeat 0 0; }
#contact form div.buttonwell input { width: auto; height: auto; border: none; }


/* 
	Display Window
-----------------------------*/

body.display { text-align: center; background: #f6f4eb none; height: 100%; padding-top: 20px; overflow: hidden; }


/*Validation CSS
------------------------
 Error added by jn 2/26/09 */
label.error { display: block; width: 100%; background: url(/frame-images/merkle_com/backgrounds/error_triangle_small.gif) no-repeat;  padding-left: 40px; padding-bottom: 5px; width: 100%; color: red !important;  font-weight: bold; }
.insight label.error { position: static !important; padding-bottom: 10px; }
div.error { display: block; width: 100%; background: url(/frame-images/merkle_com/backgrounds/error_triangle_small.gif) no-repeat;  padding-left: 40px; padding-bottom: 5px; width: 100%; color: red !important;  font-weight: bold; }