/* header (logo and nav) */
body                                    { background: url(../images/header.png) repeat-x; margin: 0; }
h1                                      { float: left; height: 40px; margin: 0; overflow: hidden; }
h1 a                                    { background: url(../images/logo.png) no-repeat 4px 5px; display: block; height: 100%; overflow: hidden; text-indent: -10000px; width: 100%; }
h1 a:hover                              { background-position: 4px -45px; }
#header                                 { height: 144px; }
#header ul                              { list-style-type: none; margin: 0; padding: 0; }
#header li                              { background: url(../images/nav_sprites.png) no-repeat; float: left; height: 66px; margin: 0; overflow: hidden; padding: 0; text-indent: -10000px; width: 67px; }
#header li.home                         { background-position: 0 0; }
#header li.about                        { background-position: -80px 0; }
#header li.work                         { background-position: -160px 0; }
#header li.contact                      { background-position: -240px 0; }
#header li.home:hover                   { background-position: 0 -70px; }
#header li.about:hover                  { background-position: -80px -70px; }
#header li.work:hover                   { background-position: -160px -70px; }
#header li.contact:hover                { background-position: -240px -70px; }
#home #header li.home                   { background-position: 0 -140px; }
#about #header li.about,
#version2-2011.about #header li.about   { background-position: -80px -140px; }
#writing #header li.work,
#version2-2011.work #header li.work     { background-position: -160px -140px; }
#contact #header li.contact             { background-position: -240px -140px; }
#home #header li.home a,
#about #header li.about a,
#about-v2 #header li.about a,
#writing #header li.work a,
#contact #header li.contact a           { cursor: default; }
#header li a                            { display: block; height: 100%; overflow: hidden; width: 100%; }

/* content (global) */
#content                                { font-size: 15px; line-height: 140%; }
#content h2                             { font-family: Helvetica, Arial, sans-serif; font-size: 54px; font-weight: bold; letter-spacing: -2.5px; line-height: 100%; margin: 0; padding: 0; }
#content h2 a                           { border: none; color: #000; }
#content a,
#footer a                               { border-bottom: 1px dotted #8B8BFF; text-decoration: none; }
#content a:hover,
#footer a:hover                         { color: #B4271C; border-bottom: 1px dotted #B4271C; text-decoration: none; }

/* home */
#home #content h2                       { margin: 0 0 0 -5px; padding: 0 0 20px 0; }
#home #content h3                       { background: #FDFDFD; border: 1px solid #e6e6e6; color: #6A6A5F; font-size: 11px; margin: 0 0 14px 0; padding: 5px 0 7px 5px; }
#home #content h4.comments              { background: #F7F7E0; border: 1px solid #C9C6C6; color: #6A6A5F; font-size: 11px; padding: 4px 0 5px 5px; }
#home #content p                        { margin: 0 0 21px 0; padding-left: 5px; }
#home #content .blogpost                { background: url(../images/postdivider.gif) no-repeat 50% 100% ; margin: 0 0 55px 0; padding: 0 0 35px 0; }
#home #content .figure a                { display: block; height: 100%; width: 100%; }
#home #content .figure a:hover          { border: none; }
#home #content .figure-a                { background: #FDFDFD; border: 1px solid #e6e6e6; padding: 15px; text-align: center; }
#home #content .figure-a:hover          { background: #F7F7E0; border: 1px solid #C9C6C6; }
#home #content .banner a,
#home #content .banner a:hover,
#home #content .figure a,
#home #content .figure a:hover          { border: none; }
#home #content .figure-a img            { background: #fff; display: block; float: none; margin: 0 auto; padding: 15px; }
#home .blogComments                     { background: #FDFDFD; border:1px solid #e6e6e6; color:#333333; font-size:12px; padding:18px; }
#home .blogComment                      { border-bottom: 1px solid #e6e6e6; margin: 0 0 18px 0; padding: 0 0 18px 0; }
#home .blogComment .byline              { font-size: 12px; color: #6A6A5F; padding: 5px 0 0 0; }
#home .blogComment .byline img          { display: none; margin: 0; }

/* about */
#about #content .container h2.column    { float: left; }
#about #content #facts                  { float: left; margin: 0 0 36px 0; }
#about #content #facts h3               { border-bottom: 1px solid #e6e6e6; font-size: 18px; font-weight: bold; margin: 13px 0 0 0; padding: 5px; }
#about #content #facts h4               { font-size: 15px; font-weight: bold; margin: 4px 0 0 0; padding: 5px 5px 0 5px; }
#about #content #resume-teaser          { background: #ffc; border: 1px solid #fc9; color: #6A6A5F; height: 36px; margin-left: -378px; margin-top: -74px; }
#about #content #resume-teaser p        { color: #333; display: block; float: left; font-size: 12px; line-height: 28px; margin: 0; padding: 5px 5px 5px 10px; }
#about #content #resume-teaser strong   { color: #000; }
#about #content #opinions               { float: right; margin: 0 0 36px 0; }
#about #content #opinions h3            { border-bottom: 1px solid #e6e6e6; font-size: 18px; font-weight: bold; margin: 13px 0 0 0; padding: 5px; }
#about #content #opinions h4            { font-size: 15px; font-weight: bold; margin: 4px 0 0 0; padding: 5px 5px 0 5px; }
#about #content #opinions blockquote    { background-color: #FDFDFD; border: 1px solid #e6e6e6; margin: 0; }
#about #content #opinions blockquote p  { color: #333; font-size: 20px; line-height: 120%; margin: 0; padding: 15px; }
.quotemark                              { font-family: Georgia; padding-right: 5px; }
#about #content #opinions cite          { display: block; margin-top: -20px; text-align: right; }
#about #content p                       { margin: 5px 0 0 0; padding-left: 5px; }
#about #content ul                      { padding-top: 5px; }
#about #content p, ul, li               { font-size: 15px; }

/* resume */
#resume #intro                          { background: #FDFDFD; border: 1px solid #e6e6e6; color: #6A6A5F; margin: 0 0 14px 0; padding: 5px; }
#resume #intro *                        { font-size: 12px; margin: 0; padding: 0; }
#resume #intro h3                       { font-weight: bold; margin: 0 0 3px 0; }
#resume #maininfo h3,
#resume #maininfo h4,
#resume #maininfo h5,
#resume #maininfo h6,
#resume #maininfo p                     { font-weight: normal; margin: 0; padding: 0 5px; }
#resume #maininfo h3,
#resume #maininfo h4                    { margin: 18px 0 0 0; }
#resume #maininfo h6                    { font-size: 12px; margin: 0; }
#resume #maininfo h3                    { border-bottom: 1px solid #e6e6e6; margin: 36px 0 0 0; padding: 5px; }
#resume #maininfo ul                    { margin-bottom: 0; }

/* contact */
#contact address                        { display: inline; margin: 0; }
#contact h3                             { border-bottom: 1px solid #e6e6e6; margin: 18px 0 5px; padding-bottom: 5px; padding-left: 5px; }

/* footer */
#footer                                 { border-bottom: 1px dotted #999; color: #6A6A5F; }
#footer 				{ display: none; } /* REDO THIS WIDGET */
#footer .widget                         { float: left; font-size: 12px; margin: 0 10px 0 0; width: 238px; }
#footer h5                              { border-bottom:1px dotted #999; border-top:3px solid #ccc; margin: 0 0 5px 0; padding: 2px 5px 3px; }
#footer h6,
#footer p                               { padding-left: 5px; }
#footer ul                              { margin: 8px 0 10px; }
#footer li                              { font-size: 12px; margin: 3px 5px 0 18px }
#footer .last                           { margin: 0; }
#footer #archivemenu                    { margin-bottom:5px; margin-top:5px; width:100%; }
#footer #emailupdateform                { background: #f5f5f5; border: 1px solid #ccc; margin: 10px 0 0 0; padding: 5px; }
#footer #emailupdateform p              { margin: 0 0 5px; }
#footer #emailupdateform #emailinput    { width: 140px; }
#copyright                              { background: url(../images/postdivider.gif) no-repeat 50% 55px; float: left; font-size: 11px; padding: 110px 0 0 0; text-align: center; width: 100%; }
#copyright				{ background: none; padding: 0; } /* ADD BG BACK IN AFTER REDOING THE FOOTER */






/**********************************************************************
    version 2 - June 2011
**********************************************************************/




/* remove 1140.css's liquid layout for now, too complicated */

#version2-2011 .row {
  width: 1140px;
}



/* global styles */

.clear {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}

#version2-2011 {
  font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
}

#version2-2011 h1 {
  width: 120px;
}

#version2-2011 #header {
  height: 100px;
}

#version2-2011 #copyright {
  background-position: 50% 35px;
  font-family: "Lucida Grande", Verdana, sans-serif;
  padding-top: 80px;
  text-shadow: #fff 0px 1px 0px;
}



/* about page */

#version2-2011.about {
  background: url(../images/header.png) repeat-x, url(../images/2011/about_body_bg.png);
}



/* work folio - main gallery page */

#version2-2011.work #gallery-bg {
  background: url(../images/2011/about_body_bg.png);
  border-bottom: 1px solid #fff;
  box-shadow: #DFDCDC 0 1px 0;
  -moz-box-shadow: #DFDCDC 0 1px 0;
  -webkit-box-shadow: #DFDCDC 0 1px 0;
}
                                          
#version2-2011.work #gallery {
  margin-top: -63px;
  padding-top: 63px;
}

#version2-2011.work #featured-content {
  position: relative;
}

#version2-2011.work .twelvecol .gallery-inner {
  background: #fff;
  height: 155px;
  margin: 3px 0 0 3px;
  padding: 20px 20px 0;
}

  .rgba #version2-2011.work .twelvecol .gallery-inner {
    background:
      -moz-linear-gradient(
        center top,
        #fff,
        #fff 50%,
        #E4E4E4 95%,
        rgba(255, 255, 255, 0)
      );
  }
  
  .cssgradients #version2-2011.work .twelvecol .gallery-inner {
    background:
      -webkit-gradient(
        linear, left top, left bottom,
        from(#fff),
        to(rgba(255, 255, 255, 0)),
        color-stop(0.5, #fff ),
        color-stop(0.95, #E4E4E4 )
      );
  }

#version2-2011.work .twelvecol .overlay {
  background: url("../images/2011/work_frame_big.png") no-repeat;
  height: 177px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1140px;
}

#version2-2011.work #gallery .row {
  margin-bottom: 40px;
}

#version2-2011.work #featured-content .thumbnail,
#version2-2011.work #featured-content .slug {
  float: left;
  width: 330px;
}

#version2-2011.work #featured-content .thumbnail {
  text-align: right;
}

#version2-2011.work #featured-content .slug {
  background: url("../images/2011/work_cake_mini_screenshots.png") no-repeat 100% 0;
  height: 145px;
  padding-left: 40px;
  width: 725px;
}

#version2-2011.work #featured-content .slug h2,
#version2-2011.work .call-to-action h3 {
  font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
}

#version2-2011.work #featured-content .slug h2 {
  color: #222;
  font-size: 37px;
}

#version2-2011.work .call-to-action {
  left: 395px;
  position: absolute;
  top: 45px;
}

#version2-2011.work .call-to-action h3 {
  color: #000;
  font-size: 23px;
  font-weight: lighter;
  letter-spacing: -0.5px;
  margin-top: 22px;
}

  .rgba #version2-2011.work .call-to-action h3 {
    color: rgba(0, 0, 0, 0.5);
  }

#version2-2011.work .call-to-action a {
  background: #2B7DBE;
  color: #fff;
  display: block;
  margin-top: 5px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  width: 130px;
}

  .borderradius #version2-2011.work .call-to-action a {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }

  .boxshadow #version2-2011.work .call-to-action a {
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 -1px 0 rgba(255, 255, 255, 0.4) inset;
     -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 -1px 0 rgba(255, 255, 255, 0.4) inset;
     -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 -1px 0 rgba(255, 255, 255, 0.4) inset;
  }

  .rgba #version2-2011.work .call-to-action a {
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.3), rgba(0,0,0, 0.1)) #2B7DBE;
    border: 1px solid rgba(0, 0, 0, 0.5);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  }

  .cssgradients #version2-2011.work .call-to-action a {
    background:
      -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(255, 255, 255, 0.3)),
        to(rgba(0,0,0, 0.1))
      ) #2B7DBE;
  }

  .rgba #version2-2011.work .call-to-action a:hover {
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.3), rgba(0,0,0, 0.5)) #2B7DBE;
  }

  .cssgradients #version2-2011.work .call-to-action a:hover {
    background:
      -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(255, 255, 255, 0.3)),
        to(rgba(0,0,0, 0.5))
      ) #2B7DBE;
  }

#version2-2011.work #gallery .thumbnails .twocol {
  height: 162px;

}

#version2-2011.work #gallery .thumbnails .twocol .overlay {
  background: url("../images/2011/work_frame_thumbnail.png") no-repeat;
  height: 162px;
  left: 0;
  position: absolute;
  top: 0;
  width: 156px;
}

#version2-2011.work #gallery .thumbnails .twocol a {
  display: block;
  height: 100%;
  outline: none;
  position: relative;
  width: 100%;
}

#version2-2011.work #gallery .thumbnails .twocol img {
  left: 3px;
  height: 150px;
  position: absolute;
  top: 3px;
  width: 150px;
}

#version2-2011.work #process {
  margin-top: 40px;
}



/* work folio - detail page for Cake's case study */

#version2-2011.work-cake #wsj-quote {
  margin-bottom: 30px;
  text-align: center;
}

#version2-2011.work-cake #topcap,
#version2-2011.work-cake #thumbnails {
  padding-top: 20px;
  padding-bottom: 20px;
}

#version2-2011.work-cake #topcap {
  background: #3B75B1;
/*  border-bottom: 1px solid #254A70;*/
  color: #fff;
}

  .borderradius #version2-2011.work-cake #topcap {
    border-radius: 4px 4px 0 0;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
  }

  .rgba #version2-2011.work-cake #topcap {
    background:
      -moz-linear-gradient(
        center top,
        #3B75B1,
        #316194) #3B75B1;
  }

  .cssgradients #version2-2011.work-cake #topcap {
    background:
      -webkit-gradient(
        linear, E6E6E6 top, left bottom,
        from(#3B75B1),
        to(#316194)
      );
  }

#version2-2011.work-cake #cake-logo img {
  margin-left: 20px;
}

#version2-2011.work-cake #intro p {
  font-size: 14px;
  line-height: 140%;
  margin-bottom: 10px;
}

#version2-2011.work-cake #thumbnails {
  background: #F7F7F7;
}

  .rgba #version2-2011.work-cake #thumbnails {
    background: 
      -moz-linear-gradient(
        center top,
        rgba(0,0,0,0.2),
        rgba(255,255,255,0.2) 30px,
        rgba(255,255,255,0)),
      url(../images/2011/work_white_carbon.png);
      -moz-box-shadow:0 2px 1px rgba(0, 0, 0, 0.7) inset;
  }

  .cssgradients #version2-2011.work-cake #thumbnails {
    background: url(../images/2011/work_white_carbon.png);
  }

#version2-2011.work-cake .thumbnail {
  margin-left: 1.754%;
  margin-right: 0;
  width: 22.807017543859649%;
}

#version2-2011.work-cake #thumbnails a {
  border: 5px solid #F8F8F8;
  box-shadow: #666 0 2px 6px;
  -moz-box-shadow: #666 0 2px 6px;
  -webkit-box-shadow: #666 0 2px 6px;
  -moz-border-radius: 4px;
  display: block;
  height: 328px;
  outline: none;
  position: relative;
}

#version2-2011.work-cake #thumbnails .overlay {
  background: url(../images/2011/work_thumbnail_overlay.png) no-repeat;
  height: 328px;
  position: absolute;
  width: 250px;
}

  .boxshadow #version2-2011.work-cake #thumbnails .overlay {
    background: none;
    box-shadow: #000 0 2px 6px inset;
    -moz-box-shadow: #000 0 2px 6px inset;
    -webkit-box-shadow: #000 0 2px 6px inset;
  }

  .rgba #version2-2011.work-cake #thumbnails .overlay:hover {
    background:
      -moz-linear-gradient(
        center top ,
        rgba(82, 165, 255, 0.3),
        rgba(82, 165, 255, 1) );
  }

  .cssgradients #version2-2011.work-cake #thumbnails .overlay:hover {
    background:
      -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(82, 165, 255, 0.3)),
        to(rgba(82, 165, 255, 1))
      );
  }



/* work folio - modal popup boxes */


#version2-2011 .reveal-modal .close-reveal-modal {
  right: -14px;
  top: -12px;
}

#version2-2011 .reveal-modal {
  margin-left: -520px;
  margin-top: 20px;
  padding: 20px;
  width: 1000px;
}

#version2-2011 .reveal-modal.socialmedia .modal-screenshot {
  margin: 0 0 20px 130px;
  box-shadow: 0 2px 2px #333;
  -moz-box-shadow: 0 2px 2px #333;
  -webkit-box-shadow: 0 2px 2px #333;
}

#version2-2011.work-cake .reveal-modal {
  background: #52A5FF;
  border-top: 1px solid #52A5FF;
  color: #fff;
}

  .rgba #version2-2011.work-cake .reveal-modal {
    background:
      -moz-linear-gradient(
        center top ,
        #3268A2,
        #52A5FF 200px,
        #52A5FF);
  }

  .cssgradients #version2-2011.work-cake .reveal-modal {
    background:
      -webkit-gradient(
        linear, left top, left bottom,
        from(#3268A2),
        to(#52A5FF),
        color-stop(0.2, #52A5FF )
      );
  }

#version2-2011.work-cake .reveal-modal h2 {
  letter-spacing: -1px;
  margin-bottom: 5px;
}

#version2-2011.work-cake .reveal-modal h2 strong {
  color: #ccc;
  font-weight: normal;
}

  .rgba #version2-2011.work-cake .reveal-modal h2 strong {
    color: rgba(0, 0, 0, 0.6);
    font-weight: normal;
  }

#version2-2011.work-cake .reveal-modal p {
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

  .rgba #version2-2011.work-cake .reveal-modal p {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
  }

#version2-2011.work-cake .reveal-modal .modal-screenshot {
  box-shadow: 0 2px 2px #333;
  -moz-box-shadow: 0 2px 2px #333;
  -webkit-box-shadow: 0 2px 2px #333;
}

#version2-2011.work-cake .thumbnail .zoom-button {
  position: absolute;
  right: -20px;
  top: -20px;
}


/**********************************************************************/






/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

/*@media handheld, only screen and (max-width: 767px) {

  #version2-2011.work #featured-content .thumbnail {
    text-align: left;
  }

  #version2-2011.work #featured-content .slug {
    padding-left: 20px;
  }

}*/






/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */
		
.reveal-modal-bg { 
	position: fixed; 
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.8);
	z-index: 100;
	display: none;
	top: 0;
	left: 0; 
}

.reveal-modal {
  display: none;
	visibility: hidden;
	top: 100px; 
	left: 50%;
	margin-left: -300px;
	width: 520px;
	background: #eee url(../images/2011/modal-gloss.png) no-repeat -200px -80px;
	position: absolute;
	z-index: 101;
	padding: 30px 40px 34px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
	
.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}

.reveal-modal .close-reveal-modal {
	font-size: 22px;
	line-height: .5;
	position: absolute;
	top: 8px;
	right: 11px;
	color: #aaa;
	text-shadow: 0 -1px 1px rbga(0,0,0,.6);
	font-weight: bold;
	cursor: pointer;
}