* { margin: 0; padding: 0; }
body { color: #333; font: normal 14px/22px Verdana, Helvetica, Arial, sans-serif; background: url(../i/bg.jpg) repeat 0 0; width: 100%;}
body.plain { color: #333; font: normal 14px/22px Verdana, Helvetica, Arial, sans-serif; background: #fff;}
a { color: #2c5fab; text-decoration: none; }
a:hover { color: #b76215 ;}
p { margin-bottom: 15px; }
li { list-style: none; }
h6 { color:#525252; font-size: 15px; font-weight: normal;}


h1 a, a.gallery, a.see-more-work, h2.simple-and-sane, p.refreshing-web, a.linkedin, a.rss, a.twitter, .work .spotlight h3,
.thumbtack, .work-detail-content .stage .image-wrapper a.next, .work-detail-content .stage .image-wrapper a.previous, .about 
.spotlight h3, .services .spotlight h3, a.sign-on, .contact .spotlight h3, input.submit-btn  
{ display: block; text-indent: -9999px; background-color: transparent; background-position: 0 0; background-repeat: no-repeat; overflow: hidden; }

.footer ul:after, .global-nav-wrap:after, .global-nav:after, .main-nav:after, .main-nav li:after, 
.callouts:after, .clearfix:after, .spotlight:after, div.social:after, .with-image:after, 
.sub:after, .gallery:after, .gallery li:after, .callout:after, .work-detail-content:after, .borders:after,
.gallery-content:after, .image-gallery:after 
{ content: ".";	display: block;	clear: both; visibility: hidden; line-height: 0;	height: 0;}


.global-nav-wrap { background: #2c2c2c url(../i/gray-border.jpg) repeat-x 0 bottom; padding-bottom: 7px; width: 100%;}
a.gallery { width: 55px; height: 20px; background-image: url(../i/gallery.gif);  margin-left:18px; margin-right:9px;}
.jump .global-nav p.right { margin-top: 5px; margin-right: 0;}
.global-nav p.right { margin: 5px 0 0;}
.global-nav a { color: #fff; font-size: 14px; font-weight: normal;}
.global-nav .right a {float: left;}
.global-nav p.refreshing-web { background-image: url(../i/refreshing-web-experiences.gif); width: 187px; height:17px; float: left; margin-bottom:1px; margin-top:9px;}


.wrapper { width: 917px; background: #fff; border-left: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; margin: 0 auto; position: relative; padding: 0 22px 10px; }
h1 { margin-bottom: 10px;}
h1 a { background-image: url(../i/yuzulife-logo.jpg); height: 140px; width: 195px;}
.main-nav { float : right; width: 638px; margin-top:-36px;}
.main-nav li { float: right; margin-left: 5px;}
.main-nav li a { background: url(../i/nav-bg.gif) no-repeat 0 0; width: 101px; display: block; height: 28px; color: #000; text-align: center; padding-top: 8px;}
.main-nav li a:hover { background-position: 0 -72px; text-decoration: none; color: #000;}
.main-nav li.selected a { background-position: 0 -36px; color: #fff;}
.thumbtack { position: absolute; right: -86px; top: 33px;z-index: 5; background-image: url(../i/clients-and-casestudies.png); height: 402px; width: 124px;}
.thumbtack a { display: block; position: absolute; height: 125px;left:5px; top:250px; width:80px; /*background: red;*/}
.utility-nav { float: right; margin-top: 10px;}
.utility-nav li { float: left; margin-left: 37px;}

.spotlight { background: url(../i/spotlight-bg.gif) repeat-y 0 0; position: relative; margin-bottom: 15px; padding: 22px;}
.work .spotlight, .sublevel .spotlight { background: url(../i/spotlight-bg-sublevel.gif) repeat-y 0 0; position: relative; margin-bottom: 15px; padding: 12px;}
.spotlight p { color: #fff; width: 357px; margin-left:65px;}
h2.simple-and-sane { background-image: url(../i/simple-and-sane.gif); width: 376px; height: 81px; margin-bottom:3px;}
.see-more-work-wrapper {background-image: url(../i/see-more-work-alt.jpg); width: 66px; height: 140px; position: absolute;	left: 450px; top: 96px;}

.slideshow { margin:9px 59px 0 0; float: right; width: 260px; height: 207px; border: 1px solid #373e49;}x

.callouts { margin-bottom: 22px;}
.callouts li, div.callout { float: left; width: 245px; padding: 19px 25px 25px; background: #fff url(../i/callouts-bg.jpg)repeat-x 0 bottom; border: 1px solid #e0e0e0; margin-left: 13px; height:255px;}
div.callout { background-image: url(../i/callouts-bg-alt.jpg);}
.callouts li.first { margin-left: 0px; }
.callouts li.second { padding-left: 45px ; width: 225px;}
.callouts h3 { color: #2f4566; font-size: 20px; font-weight: normal; margin-bottom:7px; }
.callouts li img { border: #e8e8e8 1px solid;}
.callouts p { margin-bottom: 8px;}
.callouts p.right { margin-bottom: 0px; font-size: 13px;}
.quote-wrapper { background: url(../i/quote-top.gif) no-repeat 0 0; padding-top: 25px; margin-top:12px; padding-left:10px;}
p.quote { background: url(../i/quote-bottom.gif) no-repeat right bottom; padding-bottom: 25px;}
p.cite { color: #d6a65f; font-size:13px; margin-top:-24px; margin-left: 10px;}
h3.get-started { background: url(../i/get-started.jpg) no-repeat 0 0;  padding-left: 80px; margin-bottom: 15px; min-height: 71px;}
p.half { width: 435px; padding: 10px; float: left;}
.sub { padding-bottom: 15px}


.work .spotlight { height: 22px; margin-bottom: 27px;}
.sublevel .spotlight { height: 22px; margin-bottom: 50px;}
.work .spotlight h3 { background-image: url(../i/work.gif); width: 84px; height: 28px; position: absolute; bottom: -11px; left: 305px;}
.about .spotlight h3 { background-image: url(../i/about.gif); width: 97px; height: 28px; position: absolute; bottom: -11px; left: 293px;}
.services .spotlight h3 { background-image: url(../i/services.gif); width: 139px; height: 28px; position: absolute; bottom: -11px; left: 250px;}
.contact .spotlight h3 { background-image: url(../i/contact.gif); width: 129px; height: 28px; position: absolute; bottom: -11px; left: 263px;}

a.site-eval { position: absolute; right: 10px; top: 11px; color: #fff; no-repeat 0 50%; padding-left: 10px;}
a.site-eval:hover { text-decoration:underline;}
ul.gallery { margin-bottom: 20px;}
ul.gallery li { float: left; margin-bottom: 20px; width: 232px;}
ul.gallery li.first { width: 219px;}
ul.gallery div.first { margin-left: 0;}
ul.gallery h4 { color: #666; font-weight: normal; text-align: center; font-size: 17px; width: 219px; float: left; }
div.callout { width: 215px; height: 120px; padding:26px 1px 16px; margin-bottom:3px;}
div.callout a { text-align: center; width: 177px; float: left; margin: 0 19px;}
div.callout a img { border: none;}
.work h3, .sublevel h3 { color: #466799; font-size: 21px; font-weight: normal; margin-bottom: 11px;}
.work h3.alt { margin-bottom: 25px;}
.work p.intro { margin-bottom: 38px;}

.work-detail-info { width: 265px; margin-right: 10px; float: left; margin-top:18px;}
.work-detail-info h3 { margin-bottom: 13px;}
.work-detail-info h4 { font-weight: normal; color: #666; font-size: 19px; margin-bottom: 10px;}
.work-detail-content .stage { float: right; width: 636px;}
.work-detail-content .stage .image-wrapper { position: relative;}
.work-detail-content .stage .image-wrapper a.next { height: 27px; width: 32px; background-image:  url(../i/stage-arrows.jpg); position: absolute; right: 0; top: 50%;}
.work-detail-content .stage .image-wrapper a.previous { height: 27px; width: 32px; background-image:  url(../i/stage-arrows.jpg); background-position: 0 -29px; position: absolute; left: 0; top: 50%;}
.work-detail-content { padding-bottom: 29px;}
.work-detail-content .stage .image-wrapper a.next:hover { background-position: 0 -56px;}
.work-detail-content .stage .image-wrapper a.previous:hover {  background-position: 0 -85px;}

p.stage-meta { margin-top: 5px; text-align: center; margin-bottom: 0;}
p.stage-meta a.right { margin-right: 33px;  }
p.stage-meta a.center { font-size: 17px; }
.stage p.right { margin-bottom:0px; margin-right: 25px; position:relative; z-index:5;}
.work-detail .work-detail-info  p { margin-bottom: 15px; color:#525252;}
.work-detail .callout { height:inherit; margin-left:0; margin-top:5px; padding:0 24px; width:auto; margin-bottom:5px;}
.work-detail p.cite { padding-bottom: 8px; margin-top: -11px; margin-left: 0;}
.work-detail .quote-wrapper { padding-top: 18px; padding-left:0;}
.work-detail p.quote { padding-bottom: 22px;}


p.jump-meta { text-align: center; margin-bottom: 0 !important;}

.work-landing .spotlight { margin-bottom: 45px;}
.stage a.right { margin-top: -22px;}
.stage a.left { margin-top: -22px;}
.stage a.no-stage-meta { margin-top: 0;  float: right; }
.stage a.no-stage-meta-left { margin-top: 0;  float: left; }

.footer { background: #2c2c2c url(../i/gray-border.jpg) repeat-x 0 0; padding-top: 25px; width: 100%; font-size:11px;}
.footer ul.wrap, .global-nav { width: 960px; margin: 0 auto;}
.footer ul li { float: left; width: 31%;}
.footer ul li ul li { float: none; padding: 10px 10px 7px 10px;}
.footer a, .footer p { color: #fff;}
.footer p.right { margin-right: 0 !important;}
.footer li.first p { width: 150px; line-height: 140%}
.footer li a:hover { text-decoration: underline;}
.footer li.first { margin-right:55px; width:206px;}
.footer li.first img { margin: 0;} 
.footer li.second { width: 245px; margin-top:6px;} 
.footer li.second ul {margin-left: 75px;}
.footer li.last { width: 453px;}
.footer li.last div.with-image  { width: 400px; float: right; margin-l:1px;} 
.footer li.last div.first  { width: 400px; float: right; margin-bottom:15px;}
.footer li.last div.with-image img { float: right; border: none; } 
.footer li.last div.with-image a { border: none; color: transparent; margin-left: 6px; float: right; margin-top: 5px; width: 75px;} 
.footer li p.copyright { text-align: right; float: right; margin-top: 40px;}
.footer .social { margin-bottom:2px;}
.footer a.selected { color: #FFFF99}
.footer ul li.divider { width: 3px; background: url(../i/divider.gif) no-repeat 0 0; height: 250px; padding: 0 10px;}
	.footer p.right {width: 100%; text-align:right; margin-top: 10px !important; margin-bottom:12px;}
	.footer p.right a { margin-left: 10px;}
a.rss { background-image: url(../i/icon-rss.gif); height: 27px; width: 27px;}
a.twitter { background-image: url(../i/icon-twitter.gif); height: 27px; width: 27px;}
a.linkedin { background-image: url(../i/icon-linkedin.gif); height: 27px; width: 27px;}
.with-image p{ float: right; margin-right:5px; width:275px;}
div.social a { float: right; margin-left: 7px;}

.left { float: left;}
.right {float: right;}

.center { text-align: center;}

.sublevel h4 { color: #333; font-size: 18px; font-weight: normal;}
.sublevel .work-detail-info a, .sublevel .stage a { text-decoration: underline;}
div.borders { border-top: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8; padding: 12px 0; margin-bottom: 12px;}
div.img-wrap { background: (../i/case-studies-small-gradient.png) repeat-x 0 0; border: 1px solid #c8c8c8;}
div.border-bottom {border-bottom: 1px solid #c8c8c8; padding-bottom: 26px; margin-bottom: 19px; }


.sublevel .stage h4 { margin-bottom: 20px;}
.sublevel .stage h5 { color: #3C3C3C; font-size: 18px; font-weight: normal; margin-bottom: 10px;}
.sublevel .stage { background: #f1f1f1 url(../i/sublevel-grandient-bg.png) repeat-x 0 0;  padding: 25px 40px; width: 556px; border-top: none;}
.sublevel .work-detail-info { margin-top: 0;}


.contact .stage { padding-top: 31px; padding-bottom: 18px;}


.casestudies-callout img { float: left; margin-right: 15px;}
div.casestudies-callout { padding-left: 85px; padding: 21px 0;}
div.casestudies-callout h6 { margin-top: 15px;}

.contact-callout img { float: left; margin-right: 10px;}
div.contact-callout { padding: 21px 0 8px;}
div.contact-callout h6 { margin-top: 3px;}
div.contact-callout p { font-size: 95%;}

a.sign-on { background-image: url(../i/btn_signon.jpg); width: 100px; height: 31px; margin: 0 auto;}

p.subhead { font-size: 15px; margin-bottom:8px;}
.services .work-detail-info h4 { margin-bottom: 4px;}
.services .work-detail-info p.center { margin-bottom: 5px;}
.services-list { margin-bottom: 14px;}
.services-list li { margin-bottom: 7px;}
.process-list li { margin-bottom: 19px; margin-left: 20px;}
.process-list li span { margin-left: -20px;}

.plain img { margin: 0 auto;}
.plain .plain-wrap { margin: 0 auto 0; position: relative;}
.plain p.right {  margin-top: 20px; margin-right: 10px;}

.swadvice { width: 1159px; }
.vendrx { width: 1348px; }

form label { display: block; font-size: 16px; margin-bottom: 2px;}
form input, form textarea { background-color: #e9ebed; border: 1px solid #dde0e3; padding: 6px 5px; margin-bottom: 6px; width:535px;}
form textarea { margin-bottom: 0; min-height: 200px;}
form label span, p.required span { color:#FF3300;}
p.required { margin-bottom: 0; margin-left:-10px;}
form label span { margin-left: -11px;}
input.submit-btn { background-image:url(../i/btn_submit.jpg); width: 100px; height: 34px; margin:10px auto 0; font-size: 0;}

.gallery-content { background: #1f2b3c; padding: 42px 42px 5px;}
.gallery .spotlight { margin-bottom: 0;}
.gallery h2, .gallery p { color: #fff;}
.gallery h2 { font-size: 21px; font-weight: normal; margin-bottom: 15px;}
.gallery .wrapper { padding-bottom: 0;}
.gallery .copyright { text-align: center; }
.image-gallery { width: 362px; margin: 149px auto 32px;}
.image-gallery li { float: left; margin-right: 99px; margin-bottom: 50px;}
.image-gallery li.last { margin-right: 0;}
a img  { border: none;}


body.san-jose {background: none;}
.san-jose p.right { margin-top: -35px;}

.plain p.copyright { text-align: center;}

.jump img { display: block; margin: 0 auto 21px ;}
.jump p.right {margin-right:28px; margin-top: -21px;}
.jump .spotlight { margin-bottom: 48px;}
.jump .work-detail-content h3 { margin-bottom: 6px;}
.jump .work-detail-content h3.no-text{ margin-bottom: 80px;}
.jump p { margin-bottom: 25px;}

button { width: 31px; height: 29px;  display: block; text-indent: -99999px; border: none; position: absolute;top: 250px; cursor: pointer;}
button.right-active { background: url(../i/arrow-right-active.gif) no-repeat 0 0;  right: 0; }
button.right-active:hover { background: url(../i/arrow-right-inactive.gif) no-repeat 0 0;  right: 0; }
button.left-active { background: url(../i/arrow-left-active.gif) no-repeat 0 0;  left: 0; }
button.left-active:hover { background: url(../i/arrow-left-inactive.gif) no-repeat 0 0;  left: 0; }
.jump-image-wrap { position: relative; width: 700px; margin: 0 auto; }


/* IE Specific Hacks */

* + html .work-detail .callout { min-height: 240px;}
p.stage-meta .right { *position: relative; *top: -22px;}
* html ul.gallery { margin-bottom: 30px;}
* html .work-landing .gallery li { width: 200px; }
* html .work-landing div.callout { width: 200px; margin-left: 4px; padding-bottom: 2px;}
* html .slideshow { margin:5px 15px 0 0 !important; }
* html .thumbtack { background:  url(../i/clients-and-casestudies.gif); }
* html .work .thumbtack, * html .sublevel .thumbtack { background:  url(../i/clients-and-casestudies-sublevel.gif); }
* html .footer li.last { width: 430px; }
* html .footer li.first { width: 216px; }
* html .callouts .right { margin-bottom: 0;}
* html h3.get-started { height: 71px;}
* html .callouts li { height:265px;}
* html .see-more-work-wrapper { z-index: 1000; right: 299px;}
* html a.see-more-work { right: -1px; }
* html .stage a.right { margin-top: -20px;}
* html p.read-more { clear: left;}
* html form textarea { height: 200px;}


.footer ul, .global-nav-wrap, .global-nav, .main-nav, .main-nav li, .callouts, .clearfix, .spotlight, div.social, .with-image, .sub,
.gallery, .gallery li, .callout, .work-detail-content, .image-wrapper, .borders, .gallery-content, .image-gallery { zoom: 1; }