@charset "utf-8";
@media all {

/* BODY AND FONTS: =body
----------------------------------------------- */
    body { color: #666; margin:0; padding: 0; background: #fff url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/bg-body.jpg") 50% 0 no-repeat; text-align: center;  }
    body.iframe { text-align: left; background: transparent; }
    body, input, textarea, select { font: 14px/21px "Helvetica Neue", Arial, Helvetica, sans-serif; }

/* LINKS AND IMAGES: =links
----------------------------------------------- */
    a img { border: none; }
    a:link, a:visited {color:#6a3c6b;}
    a:hover, a.wideframe:hover span.title { background-color: #dbf4ff; text-decoration: none; }
    a.handwriting:hover, #logo:hover { background-color: transparent; }

    a.wideframe, p.wideframe { display: block; position: relative; width: 267px; }
    a.wideframe:hover { background-color: transparent; cursor: pointer; }
    span.frame { display: block; width: 267px; height: 98px; background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/wideframe.png"); background-position: top left; background-repeat: no-repeat; position: absolute; z-index: 50; top: 0; left: 0; }
    a.wideframe span.title { font-weight: bold; display: block; margin: 5px 0; float: left; font-size: 18px; letter-spacing: -1px; }
    a.handwriting { display: block; text-indent: -999em; overflow: hidden; background-position: top left; background-repeat: no-repeat; }
    a.morelink { text-decoration: none; font-size: 12px; }
    a.morelink span { text-decoration: underline; }
    a.morelink:hover span { text-decoration: none; }

    a.viewsite { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/link-viewsite.gif"); width: 105px; height: 30px; }
    a.viewsite:hover { background-position: 0 -30px; }

    a.lightbox img { border: 3px solid #ffffff; }
    a.lightbox:hover img { border: 3px solid #e2e2e2; }

    img.border { border: 3px solid #e2e2e2; }

    .triangle { border: 3px solid #e2e2e2; margin: 0 0 15px 0; }
    .triangleheader:hover { cursor: pointer; }
    .triangleheader h2 { font-size: 18px; color:#6a3c6b; background: #fafafa url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/triangle-right.gif") 15px 15px no-repeat; outline: hidden; display: block; margin: 0; padding: 15px 15px 15px 35px; text-decoration: none; }
    .triangleheader.open h2 { background: #fafafa url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/triangle-down.gif") 10px 20px no-repeat; }
    .trianglebody .pad { background: #fff; padding: 15px; }

    .slideshow { list-style: none; margin: 0; position: relative; width: 249px; padding: 0; }
    .slideshow li { float: left; margin: 0 6px 12px 0; padding: 0; }
    .slideshow li img { float: left; }
    .slideshow li a img { border: 2px solid #e2e2e2; }

/* TYPOGRAPHY: =typography
----------------------------------------------- */
    h1, h2, h3, h4, h5, h6 { margin: 0 0 8px 0; padding: 0;  }
    h1 { margin: 0 0 12px 0; }
    body.sample h1 { margin: 0; }
    h2 { font-size: 24px; letter-spacing: -1px; }
    h2.section { border-bottom: 4px solid #e2e2e2; color: #6b6866; text-transform: lowercase; letter-spacing: 2px; height: 20px; margin: 0 0 15px 0; padding: 0 0 6px 0; }
    h3 { font-size: 18px; letter-spacing: -1px; margin: 0 0 10px 0; }
    p, blockquote, table { margin: 0 0 20px 0; }
    p.caption { color: #5c5c5c; font: 100% Georgia, "Times New Roman", Times, serif; font-style: italic; }
    p.introimg { margin: 0 0 8px 0; }
    #breadcrumb { font-size: 11px; text-transform: uppercase; color: #ababab; font-weight: bold; }
    blockquote { color: #7a457b; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 15px; line-height: 24px; margin: 0 0 18px 0; padding: 0; }
    p.source { text-align: right; font-size: 11px; position: relative; top: -5px; }

/* LAYOUT: =layout
----------------------------------------------- */
    .container { width: 940px; text-align: left; margin: 0 auto; }
    #content { padding: 30px; width: 880px; min-height: 634px; }
    .left { float: left; }
    .right { float: right; }
    .twocol { width: 152px; }
    .threecol { width: 243px; }
    .fourcol { width: 334px; }
    .fivecol { width: 425px; }
    .sixcol { width: 516px; }
    .sevencol { width: 607px; }

/* HEADER: =header
----------------------------------------------- */
    #header { height: 132px; position: relative; }
    #header #logo { float: left; margin-top: 32px; }

/* NAVIGATION: =nav
----------------------------------------------- */
    #header ul { list-style: none; position: absolute; top: 39px; left: 514px; height: 28px; width: 396px; margin: 0; padding: 0; }
    #header ul li { float: left; text-indent: -999em; margin: 0; padding: 0; }
    #header ul li a { outline: none; background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/globalnav.png") top left no-repeat; text-decoration: none; border: none; display: block; height: 28px; text-decoration: none; overflow: hidden; }
    #header ul li a.selected:hover { cursor: default; }

    #header ul li.home a { background-position: 0px 0px; width: 61px; }
    #header ul li.home a:hover,
    #header ul li.home a.selected { background-position: 0px -28px; }

    #header ul li.services a { background-position: -61px 0px; width: 82px; }
    #header ul li.services a:hover,
    #header ul li.services a.selected { background-position: -61px -28px; }

    #header ul li.work a { background-position: -143px 0px; width: 58px; }
    #header ul li.work a:hover,
    #header ul li.work a.selected { background-position: -143px -28px; }

    #header ul li.about a { background-position: -201px 0px; width: 65px; }
    #header ul li.about a:hover,
    #header ul li.about a.selected { background-position: -201px -28px; }

    #header ul li.blog a { background-position: -266px 0px; width: 55px; }
    #header ul li.blog a:hover,
    #header ul li.blog a.selected { background-position: -266px -28px; }

    #header ul li.contact a { background-position: -321px 0px; width: 75px; }
    #header ul li.contact a:hover,
    #header ul li.contact a.selected { background-position: -321px -28px; }

    #localnav { font-size: 11px; margin: 0 0 18px 0; }
    #localnav h2 { font-size: 11px; letter-spacing: 0; line-height: 13px; margin: 0; padding: 0; }
    #localnav ul { float: left; list-style: none; margin: 0; padding: 0; width: 100%; }
    #localnav li { white-space: nowrap; float: left; margin: 0 6px 0 0; }

/* LISTS: =lists
----------------------------------------------- */
    ul { margin: 0 0 18px 0; padding: 0 0 0 18px; }
    ul.bullet { color: #7a457b; }
    ol { margin: 0 0 18px 25px; padding: 0; }
    li { margin: 0 0 3px 0; padding: 0; }

    dl { margin: 0 0 18px 0; padding: 0; }
    dt { margin: 0 0 3px 0; padding: 0; }
    dd { margin-left: 0; }

    .galleryrow { float: left; width: 100%; clear: both; margin: 0 0 40px 0; }
    .galleryrow div { width: 267px; }
    .galleryrow .wideframe { margin: 0 0 10px 0; }
    .galleryrow .left { margin-right: 39px; }
    .galleryrow div p { clear: both; float: left; margin: 0; }

/* FORMS: =forms
----------------------------------------------- */
    form { margin: 0 0 18px 0; padding: 0 0 0 2px; }
    form label { display: block; height: 20px; }
    form p { margin: 0 0 1em 0; }
    form div.field { margin: 0 0 15px 0; }

    form div.text input,
    form div.textarea textarea { background-color: #fbf5d7; background-position: top left; background-repeat: no-repeat; color: #666; font-size: 12px; border: none; padding: 5px; }
    form div.error input,
    form div.error textarea { background-color: #fbd7d7; }

    form div.blogsearch input { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/text-threecol.gif"); width: 233px; height: 19px; float: left; }
    form div.threecol input { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/text-threecol.gif"); width: 233px; height: 19px; }
    form div.threecol textarea { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/textarea-threecol.gif"); width: 233px; height: 110px; }
    form div.fourcol textarea { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/textarea-fourcol.gif"); width: 324px; height: 86px; }
    form div.fivecol textarea { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/textarea-fivecol.gif"); width: 415px; height: 174px; }
    form div.sixcol textarea { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/textarea-sixcol.gif"); width: 506px; height: 174px; }

    form span.orcall { font-weight: bold; font-size: 14px; padding-left: 10px; line-height: 28px; }

    form div.blogsearch input.submit { float: right; background: none; padding: 0; width: auto; height: auto; }
    form input.submit { float: right; }

    ul.errors { min-height: 40px; list-style: none; background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/error.gif") 10px 10px no-repeat; margin: 0 0 18px 0; padding: 0 15px 0 50px; }
    ul.errors li { list-style: none; background: #fff; font-size: 12px; font-weight: bold; color: #d42424; margin: 0; padding: 0; }


/* TABLES: =tables
----------------------------------------------- */
    table { margin: 0 0 18px 0; }

/* HOMEPAGE: =home
----------------------------------------------- */
    body.home #content { padding-top: 0; }
    body.home object, body.home embed, #footer object, #footer embed { float: left; }

    #scribble, #scribble iframe { width: 940px; height: 179px; }
    #scribble iframe { outline: none; overflow: hidden; position: relative; left: -30px; z-index: 100; }
    #branding { float: left; width: 100%; clear: both; height: 380px; }
    #recentwork { float: left; width: 267px; position: relative; padding-left: 10px; }
    #recentwork h2 { margin: 0; padding: 0; width: 117px; height: 61px; position: absolute; top: -20px; left: -18px; z-index: 100; }
    #recentwork h2 a { overflow: hidden; text-indent: -999em; width: 117px; height: 61px; display: block; background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/title-recentwork.png") top left no-repeat;   }
    #recentwork ul { list-style: none; margin: 0; padding: 0; }
    #recentwork li { margin: 0 0 4px 0; padding: 0; }
    #recentwork li.last { margin-bottom: 2px; }
    #recentwork p { margin: 0; padding: 0; }
    #recentwork p a { float: right; }

    #video, #video iframe { width: 555px; height: 312px;}
    /*#video iframe { outline: none; overflow: hidden; position: relative; z-index: 0; background: url("/assets/images/vid-loading.jpg"); }*/
    #vidcontainer { position: relative; float: right; width: 555px; margin-right: 14px;}
    #vidlearnmore { background: url("/assets/images/title-learnmore.png") top left no-repeat; position: absolute; right: -18px; bottom: -34px; margin: 0; padding: 0; width: 121px; height: 64px; z-index: 100; }
    /*#flashbackgroundimage{ background: url("/assets/images/vid-loading.jpg");}*/
    #approach { clear: both; margin: 0 0 20px 0; }
    #approachsteps { position: relative; }
    #approach div.left { margin-right: 30px; }
    #approach div h2 { text-indent: -999em; background-position: top left; background-repeat: no-repeat; width: 152px; height: 83px; margin: 0; padding: 0; }
    #approach div h2.know { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/approach-know.gif"); }
    #approach div h2.prototype { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/approach-prototype.gif"); }
    #approach div h2.vd { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/approach-vd.gif"); }
    #approach div h2.collaboration { background-image: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/approach-collaboration.gif"); }
    #approach div.more { position: absolute; top: 0px; right: 0px; width: 101px; height: 68px; padding: 91px 15px 0 40px; background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/bg-more.gif") top left no-repeat; }
    #approach div.more ul { list-style: none; margin: 0; padding: 0; }
    #approach div.more ul li { margin: 0 0 9px 0; line-height: 1em; }

#fromtheblog { margin: 0 0 25px 0; }
    #fromtheblog p { margin-bottom: 15px; }
    #fromtheblog p, #twitter p { margin-bottom: 10px; }
    #twitter span.date { display: block; color: #ABABAB; font-size: 11px; text-transform: uppercase; font-weight: bold; }

    #contactform { padding-top: 50px; }
    #contactus form { margin: 0; padding: 0; }
    #contactinfo { list-style: none; margin: 0; padding: 0; }
    #contactinfo li { margin: 0; padding: 0; }
    #contactinfo li.tel { font-size: 18px; letter-spacing: -1px; font-weight: bold; margin: 0 0 8px 0; }

/* INTERIOR PAGES: =interior
----------------------------------------------- */
    /* services */
    .casestudies { background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/paper.gif") top left no-repeat; padding: 0 0 0 60px; }
    .casestudies a { font-weight: bold; font-size: 14px; }

    /* work */
    body.work .sixcol a:hover { background: none; }
    #prevnext { text-transform: uppercase; font-weight: bold; float: right; width: 150px; height: 1em; text-align: right; }
    #prevnext .morelink { font-size: 11px; }
    #prevnext .previous { margin-right: 15px; }
    .testimonial  { padding: 10px 0 0 0; }
    .testimonial blockquote { margin-bottom: 0; }
    .testimonial h2 { text-indent: -999em; background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/title-testimonial.png") top left no-repeat; width: 119px; height: 63px; float: right; margin: 0; position: relative; right: -15px; }

    /* about */
    .people { position: relative; }
    .people .frame { background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/peopleframe.png") top left no-repeat; position: absolute; top: 0px; left: 0px; z-index: 50; width: 152px; height: 137px; }
    .teamrow { float: left; width: 100%; margin: 0 0 18px 0; }
    .bio { font-size: 12px; line-height: 18px; padding-right: 10px; }

    /* blog */
    .post { margin: 0 0 40px 0; }
    .post-title { margin: 0 0 12px 0; }
    .post-title img { float: left; margin-top: 6px; }
    .post-title h2 { font-size: 24px; letter-spacing: -1px; line-height: 30px; margin: 0 0 3px 0; }
    .post-title p { font-size: 12px; font-weight: bold; margin: 0; }
    .post-title h2, .post-title p { float: right; width: 468px; }
    .post-body blockquote { background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/quote.gif") top left no-repeat; margin: 0; padding: 0 0 20px 60px; }
    ul.categories, ul.recentposts, ul.archives { font-size: 12px; line-height: 18px; list-style: none; padding-left: 0; }
    ul.categories a { text-decoration: none; }
    ul.categories li span.cat { text-decoration: underline; }
    ul.categories li span.count { color: #959595; }
    ul.recentposts li { background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/page-icon.png") top left no-repeat; padding: 0 0 0 20px; }
    a.rss { font-size: 12px; font-weight: bold; background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/rss.gif") top left no-repeat; padding: 2px 0px 2px 22px;  }
    #commentslist { list-style: none; margin: 0 0 18px 0; padding: 0; }
    #commentslist li { border-top: 2px solid #e2e2e2; float: left; width: 100%; clear: both; margin: 0 0 2px 0; padding: 20px 0 0 0; }
    #commentslist li.first { border: none; padding-top: 0; }
    #commentslist .commentid { float: left; width: 112px; }
    #commentslist li .commentno { display: block; float: left; font-size: 24px; font-weight: bold; width: 48px; margin-right: 4px; }
    #commentslist li .commentno a { color: #bdbdbd; text-decoration: none; }
    #commentslist li .commentno a:hover { color: #6a3c6b; }
    #commentslist li .avatar { float: left; }
    #commentslist .body { float: right; width: 380px; font-size: 12px; line-height: 18px; }
    #commentslist .commentmeta { font-weight: bold; margin-bottom: 4px; }
    #commentslist .commentmeta cite { font-style: normal; }
    #commentslist .commentmeta .time { color: #a7a7a7; }
    #quoteimg { background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/brackets-bg.gif") no-repeat; height: 150px; width: 200px; font-family:Georgia,"Times New Roman",Times,serif; font-size:17px; font-style:italic; line-height:1.5em; text-align: center; padding: 10px 40px; color: #343434; }
    div.recentpost { background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/post-it.gif") no-repeat; margin: 60px 0; text-align:left; }
    ul#bloglist { color:#5B375C; font-size:13px; font-weight:bold; list-style-image: url(http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/raquo.gif); padding: 70px 0 0 40px; }

    /* contact */
    .bigcontact { font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 30px; }
    .bigcontact .email { background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/email.gif") 0 4px no-repeat; padding-left: 28px; }
    .bigcontact .tel { background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/tel.gif") 3px 4px no-repeat; padding: 4px 0 4px 28px; }
    #map { width: 425px; height: 340px; margin: 0 0 18px 0; font-size: 12px; line-height: 16px; }
    #map p { margin: 0; padding: 0; }
    #map h3 { font-size: 14px; margin: 0; padding: 0; }

    /* contact */
    .download { position: relative; top: -13px; }
    .download:hover { background: none; }
    .phase { border-top: 4px solid #e2e2e2; padding: 25px 0 0 0; }
    .phase h2 { font-size: 18px; }
    .phase h4 { margin: 0 0 13px 0; text-indent: -999em; background: url("/assets/clientguide/images/deliverables.gif") top left no-repeat; height: 12px; }
    .phase ul { list-style: none; padding-left: 0; }
    .phase ul a { font-weight: bold; }
    .phase ul li { margin: 0 0 12px 0; }
    .boldtext { font-weight: bold; }

    /* landing page */
    body.landingpage { background-image: url('http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/bg-body-nohead.jpg'); }


/* FOOTER: =footer
----------------------------------------------- */
    #footer { color: #c8a4c9; font-size: 12px; line-height: 16px; background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/bg-footer.jpg") 50% 0 no-repeat; height: 333px; clear: both; }
    #footer .container { padding: 20px 30px 0px 30px; width: 880px; }
    #footer .left { margin-right: 30px; }
    #footer p.copyright { text-indent: -999em; background: url("http://c0001042.cdn1.cloudfiles.rackspacecloud.com/images/copyright.gif") top left no-repeat; width: 173px; height: 28px; }
    #footer a { color: #fff; }
    #footer a:hover { background: none; color: #fff; }

/* SIFR: =sifr
----------------------------------------------- */
    .sIFR-flash { visibility: visible !important; margin: 0; padding: 0; }
    .sIFR-replaced { visibility: visible !important; }
    .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; }
    .sIFR-active #content h1 { visibility: hidden; line-height: 1em; font-size: 24px; }
    .sIFR-active #content h2.section, h2.replace { visibility: hidden; line-height: 1em; font-size: 14px; }
    .sIFR-active .field label { visibility: hidden; line-height: 1em; font-size: 13px; }
    .sIFR-active #footer h2 { visibility: hidden; line-height: 1em; font-size: 14px; }

    /*
      Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it.
      Conveniently, the object tab is always in a div, so we hide all divs directly inside the replaced element.
    */

    .sIFR-replaced > div { display: none !important; }

/* MISC: =misc
----------------------------------------------- */
    .clearboth { clear: both; }
    .nowrap { white-space: nowrap; }
    .skip { margin-bottom: 0; position: absolute; left: -999em; width: 999em; }
    .nowrap { white-space: nowrap; }
    .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
    .clearfix { display: inline-block; }
    iframe { margin: 0; padding: 0; border: none; background: transparent; overflow: hidden; }
    html[xmlns] .clearfix { display: block; }
    * html .clearfix { height: 1%; }
}