/* Eric Meyer reset http://meyerweb.com/eric/tools/css/reset/ */
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, 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, article, aside, canvas, details, embed, figure, figcaption, 
footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

body { font-family: Arial, Verdana, Sans-serif; font-size: 13px; line-height: 1.625em; color: #8c8c8c; background-color:#c3c3c3; }
p { margin-bottom: 1.375em; }
a { color: #878787; text-decoration: underline; }
a:hover { color: #4b4b4b; }
strong { font-weight: bold; }
em { font-style: italic; }


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

#wrapper { position: relative; width: 100%; height: 100%; }

#header { position: relative; width:945px; margin:0 auto; z-index: 0; background-color:#fff; padding:0 5px; }

#header h1 { width: 190px; height: 64px; position: absolute; bottom: -1px; left: 0; }
#header h1.interactive { background: url(images/logo_lorel_interactive.png) 0 0 no-repeat; }
#header h1.commerce { background: url(images/logo_lorel_commerce.png) 0 0 no-repeat; }
#header h1.wellbeing { background: url(images/logo_lorel_wellbeing.png) 0 0 no-repeat; }

#header h1 a { display: block; text-indent: -999em; overflow: hidden; width: 188px; height: 63px; }
#header_inner { width: 944px; height: 79px; margin: 0 auto; position: relative; z-index: 910; }
#navbar { background: #f29813; height: 34px; width: 945px; clear:both; bottom: 0; z-index: 900; margin:0 auto; }
#navbar_inner { width: 944px; margin: 0 auto; }


.bgcolor_interactive, #navbar.interactive { background: #7f54a6; }
.bgcolor_commerce, #navbar.commerce { background: #4baad4; }
.bgcolor_wellbeing, #navbar.wellbeing { background: #98c239; }

.color_interactive, .color_interactive a { color: #7f54a6; }
.color_commerce, .color_commerce a { color: #4baad4; }
.color_wellbeing, .color_wellbeing a { color: #98c239; }

#utility_nav { position: absolute; right: 0; top: 5px; }
#utility_nav ul#contact { font-size: 10px;  }
/*#utility_nav ul#contact { position: absolute; width: 500px; top: 25px; right: 0; z-index: 998; }*/
#utility_nav ul#contact ul { list-style: none; float:right; position: relative; z-index: 998; }
#utility_nav ul#contact li { list-style: none; float: left; margin-left: 1em; font-size: 14px; }
#utility_nav ul#contact li ul li { float: none; padding: 0; margin: 0; }
#utility_nav ul#contact li#emailsignup {  }
#utility_nav ul#contact li#phone_number { border-right: 1px solid #8c8c8c; padding-right: 12px; }
#utility_nav ul#contact li#connect {  font-size: 12px; width: 110px; background: #404040 url(images/down_arrow.png) 100px 5px no-repeat; padding-left: 1em; border: 1px solid #aaa9a9; cursor: pointer; position: relative; z-index: 999; }
#utility_nav ul#contact li#connect h4 { color: #4baad4; text-transform: uppercase; }
#utility_nav ul#contact li#connect ul { display: none; float: none; position: relative; z-index: 1000; }
#utility_nav ul#contact li#connect ul li a { font-size: 12px; text-transform: uppercase; color: #ccc; text-decoration: none; }
#utility_nav ul#contact li#connect ul li a:hover { color: #fff; text-decoration: none; }
#utility_nav ul#contact li#email_address a { text-decoration: none; }
#utility_nav ul#contact li#email_address a:hover { text-decoration: underline; color: #ffffff; }

.interactive #newsletter a { color: #7f54a6; }
.commerce #newsletter a { color: #4baad4; }
.wellbeing #newsletter a { color: #98c239; }

#newsletter a { text-decoration:none; }
#utility_nav ul#contact li#header_social ul li { float:left; display:block; width:20px; }
#header_social ul { width:140px; }


/* Navigation
----------------------------------------------------------------------------------------------------------*/

ul#nav { float: right; width: 600px; }
ul#nav li { display: inline; list-style: none; padding-left: 24px; font-weight: bold; }
ul#nav li a { font: 13px/34px Arial, Verdana, Sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; text-transform: uppercase; }

body ul#nav li a:hover { color: #ffffff; }

ul.connect_with_us img { vertical-align: middle; margin-right: .625em; }



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

#content_wrapper { width: 945px; min-height: 600px; margin: 0 auto; position: relative; z-index: 20; clear:both; background-color:#fff; padding:0 5px; }

/* Two Column Content Base Template
----------------------------------------------------------------------------------------------------------*/

#left_column, #right_column { margin-top: 56px; }
#left_column { width: 190px; float: left; margin-left:15px; }
#left_column h3 { font-size: 16px; color: #4baad4; text-transform: uppercase; font-weight: bold; line-height: 1.625em; padding-bottom: .5em; }
#left_column ul.navlist { list-style: none; margin-bottom: 1.625em; }
#left_column ul.navlist li.level-2 { font-size: 16px; color: #4baad4; text-transform: uppercase; font-weight: bold; line-height: 1.625em; }
#left_column ul.navlist li.level-2 a:hover { color: #4baad4; }
#left_column ul.navlist li.level-2 { line-height: 16px; }
#left_column ul.navlist li.level-2 li { margin: 10px 0; }
#left_column ul.navlist li.level-2 a { color: #4b4b4b; text-decoration: none; }
#left_column ul.navlist li.level-2 ul { list-style: none; margin-left: 10px; }
#left_column ul.navlist li.level-3 ul { margin-left: 20px; }
#left_column ul.navlist li.level-2 li a { text-decoration: none; font-size: 13px; font-weight: normal; text-transform: none; color: #878787; }

#right_column { width: 700px; float: right; margin-right:15px; }
#right_column h2 { text-transform: uppercase; font-size: 26px; font-weight: bold; padding-bottom: 1em; color: #4baad4; }
#right_column h3 { font-size: 22px; color: #4b4b4b; font-weight: normal; padding-bottom: 1em; }
#right_column ul, #right_column ol { margin-left: 1.625em; }
#right_column ul li, #right_column ol li { padding-left: 1em; padding-bottom: 1em; }

img.alignleft { float: left; margin-right: 1em; margin-bottom: 1em; }
img.alignright { float: right; margin-left: 1em; margin-bottom: 1em; }

#resources { margin-top: 1.625em; }
#resources h3 {  font-size: 26px; padding-bottom: 1.375em; }
#resources ul { margin-left: 0; margin-bottom: 2em; }
#resources ul li { list-style: none; padding-left: 60px; background: url(/site/static/images/icon_pdf.gif) 0 0 no-repeat; border-bottom: 1px solid #878787; margin-bottom: 1.625em; }
#resources ul li h3 { font-size: 18px; text-transform: uppercase; font-weight: normal; padding-bottom: .75em; }

/* News List 
----------------------------------------------------------------------------------------------------------*/

#news { margin-top: 1.625em; }
#news h3 {  font-size: 26px; padding-bottom: 1.375em; }
#news ul { margin-left: 0; margin-bottom: 2em; }
#news ul li { list-style: none; padding-left: 60px; background: url(/site/static/images/icon_pdf.gif) 0 0 no-repeat; border-bottom: 1px solid #878787; margin-bottom: 1.625em; }
#news ul li h3 { font-size: 18px; text-transform: uppercase; font-weight: normal; padding-bottom: .75em; }


/* Call-to-actions and Promos
----------------------------------------------------------------------------------------------------------*/

.promo { padding-bottom: 1.625em; }
.promo ul { list-style: none; }

#left_column .promotion ul { list-style: none; }
#left_column .promotion h3 { font-size: 14px; color: #4b4b4b; text-transform: uppercase; font-weight: bold; line-height: 1.625em; padding: 0.6em 0; }

.latest_news_date { font-weight: bold; }

.promo_cta { margin-top: 7px; font: 14px/26px Arial, Verdana, Sans-serif; font-weight: bold; letter-spacing: 1px; background-color: #4baad4; padding: 7px; color: #fff; text-decoration: none; }
.promo_cta:hover { color: #fff; background: #878787; }

/* Featured Hero Banner Slider
----------------------------------------------------------------------------------------------------------*/

#featured { width: 945px; height: 428px; background: #e0e0e0; border-bottom: 6px solid #4baad4; }

/* Container the Lorel Slider is attached to must have these rules defined */
.hsContainer { width: 945px; height: 428px;	margin: 0 auto; overflow: hidden; position: relative; }

.lorelSlidePreloader { background: url(images/preloader.gif) center center no-repeat; }

#lorelSlideContainer { position: relative; }

#lorelSlideContainer .slide { margin: 0; padding: 0; position: relative; z-index: 9; width: 945px; height: 340px; float: left; background: #ccc; }

#lorelSlideContainer .slide img { border: 0; }

#lorelSlideContainer .slide a.slideLink { display: block; width: 945px; height: 340px; }

#lorelSlideNavContainer { height: 88px; width: 925px; position: absolute; bottom: 0; left: 15px; z-index: 11; }

#lorelSlideNavContainer ul#lorelSlideNav { height: 80px; width: 945px; position: absolute; bottom: 0; left: 0; }

#lorelSlideNavContainer ul#lorelSlideNav li { float: left; list-style: none; padding-right: 10px; }

#lorelSlideNavContainer ul#lorelSlideNav li a { display: block; height:80px; width: 144px; outline: 0; text-align: center;  }

#lorelSlideNavContainer ul#lorelSlideNav li a.currSlide {  }

#lorelSlideNavContainer #lorelSlideIndicator { position: absolute; top: 0; left: 0; z-index: 12; width: 144px; height: 7px; background-color: #4baad4 }

#lorelSlideContainer .slide .subimage0 { float: left; height: 210px; width: 246px; background: #666; position: relative; }
#lorelSlideContainer .slide .subimage1 { float: left; height: 250px; width: 246px; background: #999; position: relative; }

#lorelSlideContainer .slide .subcontainer { width: 246px; height: 460px; position: absolute; right:0; top: 0; z-index: 10; }

#lorelSlideContainer .slide .subcontainer .subinfo { font-style: italic; font-family: Georgia, "Times New Roman", Serif; margin: 0; display: block; background: url(bg_subinfo.png) 0 0 repeat; padding: 10px; width: 246px; height: 20px; position: absolute; bottom: 0; left: 0; z-index: 10; }
#lorelSlideContainer .slide .subcontainer .subinfo a { color: #311c1c; text-decoration: none; }
#lorelSlideContainer .slide .subcontainer .subinfo a:hover { color: #000; }

/* Landing Page Call to Action Buckets
----------------------------------------------------------------------------------------------------------*/

#buckets { margin-top: 1.625em; clear: both; padding:0 15px; }
#buckets .bucket { float: left; width: 295px; min-height: 200px; margin-right: 15px; }

#buckets .bucket.last { margin-right: 0; }

#buckets .bucket h3 { color: #4baad4; font-weight: bold; font-size: 16px; padding-bottom: 1em; }

/* Work Interface
----------------------------------------------------------------------------------------------------------*/

#work { padding-top: 30px; width: 945px; }
#client_picker { position: relative; z-index: 20; height: 82px;  }
#client_picker h2 { float: left; font-size: 20px; text-transform: uppercase; color: #4baad4; }
#client_picker h4 { font-weight: bold; padding-right: 20px; }
#picker { border: 1px solid #000; display: block; cursor: pointer; position: absolute; z-index: 20; right: 10px; top: 0; padding-left: 10px; padding-right: 24px; background: #fff url(images/work_clientpicker_arrows.gif) right top no-repeat; }
#picker ul.master { width: 650px; height: 340px; list-style: none; display: none; }
#picker ul li { display: block; width: auto; width: 200px; float: left;  margin-right: 10px; }
#picker ul li ul li { border-bottom: 1px solid #ccc; margin:0; }
#picker ul li ul { float: none; width: auto; display: block; }
#picker ul li a { display: block; text-decoration: none; padding: 5px; }

#project_details { height: 400px; border-bottom: 6px solid #4baad4; margin: 20px 0; position: relative; padding-left:15px; }

#nav_nextprev { position: absolute; right: 0; top: 0; height: 380px; width: 38px; }
#nav_nextprev span { display: block; }
#nav_nextprev span a { outline: 0; height: 38px; height: 189px; display: block; text-indent: -999em; overflow: hidden; }
#nav_nextprev span#nav_next { padding-bottom: 2px; }
#nav_nextprev span#nav_next a { background: #b2b2b2 url(images/portfolio_right_arrow.png) center center no-repeat; }
#nav_nextprev span#nav_prev a { background: #b2b2b2 url(images/portfolio_left_arrow.png) center center no-repeat; }
#nav_nextprev span#nav_next a:hover { background-color: #878787; }
#nav_nextprev span#nav_prev a:hover { background-color: #878787; }

#details_images { float: right; margin-right: 44px; overflow:hidden; width: 540px; height: 380px; position: relative; }
#vessel { position: absolute; top: 0; left: 0; }
.details_image { float: left; width: 540px; height: 380px; }
.details_copy { position: relative; float: left; height: 380px; width: 330px; padding-right: 10px; }

#project_thumbs { height: auto; min-height: 55px; padding: 10px 15px; margin-top: 20px; border-top: 1px solid #878787; border-bottom: 4px solid #4baad4; }
#project_thumbs ul { list-style: none;  }
#project_thumbs ul li { list-style: none; float: left; margin-right: 10px; border: 1px solid #ccc; margin-bottom: 10px; }
#project_thumbs ul li a { display: block; height: auto; width: auto; height: 46px; width: 65px; }
#project_thumbs ul li a img { height: 46px; width: 65px; }

#project_thumbs ul li a { border: 3px solid #fff; outline: 0; }
#project_thumbs ul li.currThumb a { border: 3px solid #4b4b4b; }

/* Work
----------------------------------------------------------------------------------------------------------*/
ul#work_client_list { margin: 0; }
ul#work_client_list li { list-style: none; float: left; width: 120px; height: 120px; padding: 10px; text-align: center; margin-right: 15px; margin-bottom: 15px; }
ul#work_client_list li a { border: 1px solid #878787; display: block; width: 120px; height 120px; padding: 10px; }
ul#work_client_list li a:hover { border: 1px solid #4b4b4b; }
ul#work_client_list li img { vertic-align: middle; text-align: center; }

/* Contact Form
----------------------------------------------------------------------------------------------------------*/
#contact-form { /*border: 1px solid #878787;*/ padding-bottom: 20px; }
#contact-form .fields { width: 350px; /*margin: 0 auto; padding-top: 20px;*/ }
#contact-form form .label { font-size: 14px; }
#contact-form form .field .input input { width: 350px; padding: 3px; font-size: 14px; }
#contact-form form .field { margin-bottom: 20px; }
#contact-form form textarea { width: 350px; height: 200px; padding: 4px; font-size: 14px; font-family: Arial, Verdana, Sans-serif; }
#contact-form form .field .choice input { width: auto; padding: 0; }
#contact-form form .field .option input { width: auto; padding: 0; }
#contact-form form button { margin: 0 auto; width: auto; padding: 7px 15px; height: auto; text-align: center; display: block; font-size: 18px; color: #fff; background-color: #4baad4; border: 0; cursor: pointer; text-transform: uppercase;}
#contact-form form button button:hover { background-color: #4b4b4b; }

/* White Papers
----------------------------------------------------------------------------------------------------------*/
/*Download Form */
form#whitepaper-download { float: left; padding-bottom: 20px; }
form#whitepaper-download .fields { width: 350px; margin: 0 auto; padding-bottom: 20px; }
form#whitepaper-download .label { font-size: 14px; }
form#whitepaper-download .field .input input { width: 350px; padding: 3px; font-size: 14px; }
form#whitepaper-download .field { margin-bottom: 20px; }
form#whitepaper-download textarea { width: 350px; height: 200px; padding: 4px; font-size: 14px; font-family: Arial, Verdana, Sans-serif; }
form#whitepaper-download .field .choice input { width: auto; padding: 0; }
form#whitepaper-download .field .option input { width: auto; padding: 0; }
form#whitepaper-download button { margin: 0 auto; width: auto; padding: 7px 15px; height: auto; text-align: center; display: block; font-size: 18px; color: #fff; background-color: #4baad4; border: 0; cursor: pointer; text-transform: uppercase;}
form#whitepaper-download button:hover { background-color: #4b4b4b; }
/*Key Points*/
.whitepaper_keypoints { float: right; width: 200px; background: #4b4b4b; color: #fff; padding: 20px; }
.whitepaper_keypoints h4 { text-transform: uppercase; letter-spacing: 3px; font-weight: bold; font-size: 18px; margin-bottom: 12px; color: #fff; text-align: center; }
#right_column .whitepaper_keypoints ul { margin: 0; padding: 0; text-indent: 0;  }
#right_column .whitepaper_keypoints ul li { font-size: 14px; margin: 0; padding: 0; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #e0e0e0; list-style: none; }

a.view_cta, .view_cta a { clear:both; text-decoration: none; font-size: 15px; font-weight: bold; color: #4baad4; }
a.view_cta:hover, .view_cta a:hover { color: #4b4b4b; text-decoration: underline; }

/* Footer
----------------------------------------------------------------------------------------------------------*/

#footer { clear: both; width: 955px; background: #eee; border-top: 1px solid #4baad4; padding-bottom: 1.625em; margin:0 auto; }
#footer_inner { width: 945px; margin: 0 auto; padding-bottom: 1.625em; padding-top: 1.625em; }

ul#footer_nav { padding-left: 4em; }
ul#footer_nav li { float: left; list-style: none; width: 160px; margin-right: 4em; }
ul#footer_nav li.last { margin: 0; }
ul#footer_nav li ul li { float: none; text-indent: 1em; margin: 0; width: auto; border: none; }
ul#footer_nav li ul li a { color: #868787; text-decoration: none; text-transform: uppercase; font-family: Arial, Verdana, Sans-serif; font-size: 13px; }
ul#footer_nav li ul li a:hover { color: #333; }
ul#footer_nav li ul { }
ul#footer_nav li h4 { text-transform: uppercase; padding-bottom: .625em; font-weight: bold; font-size: 14px; }
ul#footer_nav li h4 a { text-transform: uppercase; padding-bottom: .625em; font-weight: bold; font-size: 14px; text-decoration: none; }
ul#footer_nav li h4 a:hover { color: #333; }
ul#footer_nav li.last h4 { color: #737477; }

#footer_tagline { height: 32px; width: 100%; background: #3c3c3c; margin-bottom: 1.625em; color:#cccccc; }
#footer_tagline #tagline { width: 925px; margin: 0 auto; padding-top: 4px; }
#footer_tagline #tagline a { color:#cccccc; font-size:1.1em; text-decoration:none; font-weight:bold; };

#footer_info { width: 945px; margin: 0 auto; }
#footer_info #info { float: left; margin-left:15px; }
#footer_info #info p { margin-bottom: 0; }

#footer_utility_nav { float: right; list-style: none; margin-right:15px; }
#footer_utility_nav li { float: left; padding-left: 1em; }
#footer_utility_nav li a { color: #8c8c8c; }
#footer_utility_nav li a:hover { color: #333; }

/* Vertical Switcher
----------------------------------------------------------------------------------------------------------*/

ul#switcher { z-index: 1000; width:945px; margin:0 auto; }
ul#switcher li { float:right; list-style:none; margin-left:2px; }
ul#switcher li a { outline: 0; display: block; padding: 2px 8px; width:130px; color:#ffffff; text-decoration:none; text-align:center; margin-top:4px; margin-bottom:2px;}

ul#switcher li#switcher_commerce a { background: #4baad4 center center no-repeat; }
ul#switcher li#switcher_wellbeing a { background: #98c239 center center no-repeat; }
ul#switcher li#switcher_interactive a { background: #7f54a6 center center no-repeat; }
ul#switcher li a.active { padding: 5px 8px; margin-top:0px; margin-bottom:0px; }


/* Browser Fixes
----------------------------------------------------------------------------------------------------------*/

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix { zoom: 1; }

#left_column .promotion img { max-width: 100%; }
label.error { color: #8E6AAF; }

#project_details .details_image h3 { text-transform: uppercase; font-size: 16px; color: #4baad4; margin-bottom: 0.75em; }

#sitemap li { padding: 0 ! important; }
#sitemap { margin-bottom: 1.5em; }
#sitemap #news { margin: 0; }

.twtr-hd, .twtr-ft { display: none; }

form.email_signup_form { width: 310px; position: absolute; right: 0; top: 50px; height: 40px; z-index: 998; }
form.email_signup_form label { display: inline; margin-right: 10px; font-size: 15px; font-weight: bold; color: #bdbdbd; }
form.email_signup_form input.email_signup_form_text { display: inline; margin-right: 10px; background: #ddd; width: 120px; padding: 3px; font-size: 12px; color: #222; border: 1px solid #333; }
form.email_signup_form input.email_signup_form_btn { display: inline; cursor: pointer; height: 24px; background: #333; border: none; color: #fff; }
form.email_signup_form input.email_signup_form_btn:hover { background: #8c8c8c; }
form.email_signup_form h5 { margin: 0; padding: 0; font-weight: bold; }
form.email_signup_form input.grayed { color: #222; background: #bdbdbd; }


#utility_nav { *width: 420px; }