@import "reset.css";

/*

  TYPOGRAPHY styles written by Elliot Jay Stocks and last edited on 27.02.1012
  
  1  Essentials
  2  Specifics
  3  Adaptive sizes

*/

/* ---------------------------------------------------------------------- 
  x  Essentials
---------------------------------------------------------------------- */

/*

  body    16px = 1em
  h2      40px / 16px = 2.5em
  h3      24px / 16px = 1.5em
  p       14px / 16px = 0.875em
  

*/

body, input, textarea { color:#333; font:100%/1.5em ff-unit-web-1, ff-unit-web-2, sans-serif; }
a { color:#ff5d51; text-decoration:none; }
a:hover { color:#444; }
h2 { font-size:2.5em; line-height:1em; }
h3, blockquote { font-size:1.5em; line-height:1.25em; }
h4, p.submit input, p.photo_credit { text-transform:uppercase; }
h4, p, li { font-size:0.875em; line-height:1.45em; padding:0.5em 0 0.95em 0; }
blockquote p { margin-left:-160px; text-indent:-0.5em; }
cite p { font-style:normal; padding-bottom:2em; }
footer { color:rgba(0,0,0,0.3); }

/* ---------------------------------------------------------------------- 
  2  Specifics
---------------------------------------------------------------------- */

nav ul li a span { display:block; } /* Only works when letter.js kicks in */
nav ul li#nav-product-design-marketing a span { display:inline; } /* Removes lettering.js's line breaks on this nav item only */
nav ul li.current a { color:#333; }
section[role="main"] header div a { font-size:0.875em; line-height:1.4em; }
div.fellows-images h4, 
section[role="main"] header div h4 { color:#ccc; }
div.profile ul li.role { text-transform:uppercase; }
div.profile p { color:rgba(0, 0, 0, 0.3); padding-top:2em; }
div.profile p.investment { background:rgba(0, 0, 0, 0.05); margin-top:-0.5em; padding:0.5em; }
div.profile p.investment span { color:#333; text-transform:uppercase; }

div.splash-hero h2 { color:rgba(0,0,0,0.4); padding:60px 0 0 240px; }
div.splash-hero h2 span { background:rgba(255,255,255,0.65); display:inline-block; padding:0.125em 10px 0.125em 90px; }
div.splash-hero h2 span:first-child { background:rgba(255,255,255,0.85); color:#333; }
div.splash-hero h2 span:first-child + span { background:rgba(255,255,255,0.85); color:#ff5d51; }
body.splash aside a,
span.nominate { font-size:2.5em; line-height:1em; padding-left:320px; }
span.nominate { background:#ff5d51; -moz-border-radius-topleft:20px; -moz-border-radius-topright:20px; -moz-border-radius-bottomright:0; -moz-border-radius-bottomleft:0; -webkit-border-radius:20px 20px 0 0; border-radius:20px 20px 0 0; color:#fff; display:block; padding-top:1.5em; padding-bottom:1.5em; }
span.nominate:hover { background:#ea3b2e; }
span.nominate:hover,
span.close:hover { cursor:pointer; }

p.photo_credit { display:none; }
body.splash p.photo_credit { color:#fff; display:block; padding:0 10px 2em 0; text-align:right; }
p.photo_credit a { color:#fff; }

/* ---------------------------------------------------------------------- 
  3  Adaptive sizes
---------------------------------------------------------------------- */

/* 8b Below 790px */
@media screen and (max-width:790px) { 
  blockquote p { margin-left:0; }
  div.splash-hero h2 { background:rgba(255,255,255,0.8); padding:0.5em 0 0.5em 240px; }
  div.splash-hero h2 span,
  div.splash-hero h2 span:first-child,
  div.splash-hero h2 span:first-child + span { background:none; font-size:0.5em; line-height:0.125em; }
  div.splash-hero h2 span:first-child { padding-top:0; }
}

/* Below 550px */
@media screen and (max-width:550px) { 
  header nav ul li { font-size:1.25em; line-height:1.3em; }
}


/* ---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------- */

/*

  LAYOUT styles written by Elliot Jay Stocks and last edited on 07.12.2011
  
  1  Grid overlays
  2  Essentials
  3  Header
  4  Main
  5  Aside
  6  Footer
  7  Animation
  8  Adaptive Layouts
     8a Below 960px
     8b Below 790px
     8c Below 550px
     8d Below 400px
     8e Retina display

*/

/* ---------------------------------------------------------------------- 
  1  Grid overlays
---------------------------------------------------------------------- */

div.grid-container { position:absolute; width:100%; z-index:99; display:none; }
div.grid { background:rgba(0,144,255,0.1); height:2000px; margin:0 auto; width:960px; }
div.grid-column { background:rgba(0,144,255,0.1); float:left; height:2000px; margin:0 10px; width:140px; }
div.baseline-grid-container { position:absolute; width:100%; z-index:100; display:none; }
div.grid-row { border-bottom:1px solid rgba(204,0,0,0.2); height:1.25em; margin:0 0 -1px 0; }

/* ---------------------------------------------------------------------- 
  2  Essentials
---------------------------------------------------------------------- */

div, dl, header, nav, aside, footer, section, article, figure { position:relative; }
.clear, section[role="main"], h3.info, ul.fellows-listing, aside { clear:both; }
html { background:#e4e1d8 url(/theme/4dc1a371dabe9d7a3b0002d4/stylesheets/images/html.jpg) top center fixed; }
body { background:url(/theme/4dc1a371dabe9d7a3b0002d4/stylesheets/images/body.jpg) top center repeat fixed; }
div.container { margin:0 auto; width:960px; }

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

header h1 { left:0; position:absolute; top:5em; z-index:2; /* z-index needed for the link to be clickable, due to the floats ont the nav */ }
header nav ul { padding:0 0 0 310px; }
header nav ul li { background:url(/theme/4dc1a371dabe9d7a3b0002d4/stylesheets/images/border_white.gif) repeat-y; /* Simulates a 1px border */ display:block; float:left; list-style:none; padding:4.75em 0 0 20px; width:140px; } 

/* ---------------------------------------------------------------------- 
  4  Main
---------------------------------------------------------------------- */

section[role="main"] { background:#fff; margin:3.45em auto 4em auto; width:940px; }
section[role="main"] header h2 { border-left:20px solid #ff5d51; border-right:1px solid #ccc; margin:0 0 0 120px; padding:1.6em 0 0 20px; width:460px; }
section[role="main"] header div { padding:0 20px 0 0; position:absolute; bottom:-0.1em; left:640px; }
section[role="main"] header div h4 { display:none; }
section[role="main"] header div a img { display:block; margin-bottom:1.5em; }
section[role="main"] header div a + a + a img { margin-bottom:1px; }
section[role="main"] header div a img { opacity:0.3; }
section[role="main"] header div a:hover img { opacity:1; }
section[role="main"] header div ul { bottom:-0.75em; left:-10px; position:relative; z-index:1; }
section[role="main"] header div ul li { float:left; list-style:none; }
section[role="main"] header div ul li a { display:inline-block; padding:0.5em 10px; }
header nav ul li a span { display:block; } /* Only works when letter.js kicks in */
header nav ul li#nav-product-design-marketing a span { display:inline; } /* Removes lettering.js's line breaks on this nav item only */
section[role="main"] header div ul li.current a { background:#444; color:#fff; }
section[role="main"] header + p,
section[role="main"] header + div#expand-collapse p:first-child { padding:4.3em 160px 0 320px; } /* 1st line: splash page only; 2nd line: splash page only */
div.generic { padding:4.3em 160px 4em 320px; } /* Generic pages only */

div.fellows-images-js { height: 170px; }
body.home div.fellows-images { display: none!important; }
div.fellows-images,
div.fellows-images-js{ padding:3em 0 0 0; }
div.fellows-images h4,
div.fellows-images-js h4 { border-left:1px solid #ccc; left:160px; padding:0 0 4em 20px; position:absolute; top:-2.8em; width:100px; z-index:1; }
div.fellows-images ul li,
div.fellows-images-js ul li { float:left; list-style:none; margin:0 20px 0 0; width:140px; }
div.fellows-images.count-5 ul li:first-child,
div.fellows-images-js.count-5 ul li:first-child { padding-left:160px; } /* This adds additional left padding when there are only 5 fellows */
div.fellows-images ul li:last-child,
div.fellows-images-js ul li:last-child { margin-right:0; }
div.fellows-images ul li img,
div.fellows-images-js ul li img { width:140px; position:relative; z-index:2; /* Moves them above the h4's border */ }

body.home ul.fellows-images li + li + li + li + li + li,
img.profile-pic { margin:60px 0 0 0; }
h3.info { float:left; margin:0 20px 0 0; padding:1.5em 0 0 160px; width:300px; } /* splash page only */
ul.fellows-listing { float:left; margin:0 20px 0 0; padding:3em 160px 0 160px; text-align:right; width:140px; } /* Award Category page only */
ul.fellows-listing li { list-style:none; padding:0 0 0.75em 0; }

div.info { float:left; padding:2.3em 160px 2.6em 0; width:300px; }
div.info h4 { padding-bottom:1em; }

/* Fellow profile page */
body.fellow div.info { float:left; padding:3.4em 0 2.6em 0; width:300px; } /* Fellow Profile page only */
div.profile { float:left; padding:3.5em 20px 4em 0; text-align:right; width:300px; } /* Fellow Profile page only */
div.profile img { width:140px; }
div.profile ul { padding:1.2em 0 0 0; }
div.profile ul li { background:url(/theme/4dc1a371dabe9d7a3b0002d4/stylesheets/images/icon_role.gif) right 2px no-repeat; list-style:none; padding:0 30px 1em 0; }
div.profile ul li.site { background-image:url(/theme/4dc1a371dabe9d7a3b0002d4/stylesheets/images/icon_website.gif); }
div.profile ul li.twitter { background-image:url(/theme/4dc1a371dabe9d7a3b0002d4/stylesheets/images/icon_twitter.gif); }
body.fellow section[role="main"] { background:#fff url(/theme/4dc1a371dabe9d7a3b0002d4/stylesheets/images/border_other_fellows.gif) 0 0 repeat-y; }
body.fellow section[role="main"] header { background:#fff; margin-bottom:-3.5em; padding-bottom:3.5em; }
body.fellow section[role="main"] header div { bottom:3.4em; }
ul.other-fellows { margin:3.5em 0 0 800px; }
ul.other-fellows li { display:block; float:none; list-style:none; margin:0 0 20px 0; padding:0; }
ul.other-fellows li a { display:block; height:50px; position:relative; }
ul.other-fellows li a span { background:#ff5d51; color:#fff; display:inline-block; padding:0.5em 10px; position:absolute; opacity:0; right:140px; text-align:right; top:0; width:140px; }
ul.other-fellows li:hover a span { opacity:1; }

/* Splash page */
body.splash { background:url(/theme/4dc1a371dabe9d7a3b0002d4/stylesheets/images/empty.gif); /* Needed some sort of bg image here for backstretch to work */ }
body.splash h1, 
body.splash header nav ul { display:none; }
body.splash section[role="main"] { background:rgba(255, 255, 255, 0.85); -webkit-border-radius:21px; -moz-border-radius:21px; border-radius:21px; margin-top:0; }
body.splash section[role="main"] header div { bottom:-0.75em; }
body.splash section[role="main"] header div h4 { color:#333; display:block; }
div.splash-hero { margin:0 0 3em 0; }
div.splash-hero > img { left:-20px; position:absolute; top:0; }
div.splash-logos { padding:3em 0 0 330px; }
div.splash-logos a { margin-right:20px; }
/*
div.splash-hero div { padding-left:330px; }
div.splash-hero div a img { margin-right:20px; opacity:0.3; }
div.splash-hero div a:hover img { opacity:1; }
div.splash-hero div:last-child { background:#333; margin:2em 10px 0 10px; padding:2em 0 1.9em 62px; }
*/
body.splash form { margin:0 0 2em 320px; }
form p { padding:0.5em 0; position:relative; }
form p label { left:-160px; padding:0.75em 0 0 0; position:absolute; -webkit-appearance:none; }
form p input { border:1px solid #ccc; padding:0.5em 10px; width:438px; }
form p input:focus { border-color:#000; outline:none; }
form p.submit input { background:#ff5d51; border-color:rgba(0,0,0,0.3); color:#fff; width:460px; }
body.splash aside { background:rgba(0,0,0,0.8); -moz-border-radius-topleft:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:20px; -moz-border-radius-bottomleft:20px; -webkit-border-radius:0 0 20px 20px;
border-radius: 0 0 20px 20px;padding-bottom:3.5em; }
span.close { background:rgba(0,0,0,0.1); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; color:#ff5d51; display:block; padding:0; position:absolute; right:20px; text-align:center; top:4.75em; width:20px; }
span.close:hover { color:#fff; } 

body.splash footer { display:none; }

/* ---------------------------------------------------------------------- 
  5  Aside
---------------------------------------------------------------------- */

aside { background:#333; color:#fff; padding:3.5em 0 2.9em 0; }

aside.companies h4 { float:left; padding:0.3em 0 0 70px; text-align:right; width:230px; }
aside.companies ul { float:left; margin:-0.2em 0 0.2em 20px; }
aside.companies ul li { float:left; list-style:none; margin:0 20px 0 0; padding:0.5em 0; }
aside.companies ul li img { width:60px; }

aside.past-winners { padding-left:160px; }
aside.past-winners h3 { padding:0 0 0.4em 0; }
aside.past-winners dl { padding:0.5em 0; }
aside.past-winners dl dt { position:absolute; top:0.5em; left:-160px; padding:0 20px 0 0; text-align:right; width:140px; }
aside.past-winners dl dd ul li { border-left:1px solid #666; color:#666; display:inline; padding:0 0.5em 0 0.75em; }
aside.past-winners dl dd ul li:first-child { border:none; padding-left:0; }
aside.past-winners dl dd ul li a:hover { color:#fff; }

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

footer { margin:0 auto; width:940px; }
footer a img { margin:0 20px 0 0; opacity:0.3; }
footer a:hover img { opacity:1; }
footer p { border-left:1px solid #fff; margin:-1.5em 0 0 460px; padding:0 0 5em 20px; }
footer p span { border-left: 1px solid rgba(0, 0, 0, 0.3); margin-left:0.5em; padding-left:0.5em; }
footer p span a { position:static; }

/* ---------------------------------------------------------------------- 
  7  Animation
---------------------------------------------------------------------- */

a {
  transition: color 0.5s;
  -moz-transition: color 0.5s; /* Firefox */
  -ms-transition: color 0.5s; /* IE, when it eventually supports it */
  -o-transition: color 0.5s; /* Opera */
  -webkit-transition: color 0.5s; /* Safari & Chrome */
}

img,
ul.other-fellows li:hover a span {
  transition: opacity 0.5s;
  -moz-transition: opacity 0.5s; /* Firefox */
  -ms-transition: opacity 0.5s; /* IE, when it eventually supports it */
  -o-transition: opacity 0.5s; /* Opera */
  -webkit-transition: opacity 0.5s; /* Safari & Chrome */
}

span.nominate {
  transition: background-color 0.5s;
  -moz-transition: background-color 0.5s; /* Firefox */
  -ms-transition: background-color 0.5s; /* IE, when it eventually supports it */
  -o-transition: background-color 0.5s; /* Opera */
  -webkit-transition: background-color 0.5s; /* Safari & Chrome */
}

/* ---------------------------------------------------------------------- 
  8  Adaptive Layouts
---------------------------------------------------------------------- */

/* 8a Below 960px */
@media screen and (max-width:960px) { 
  div.grid { margin:0; }
  div.container { width:790px; margin:0; }
  header h1 { left:160px; top:5.75em; }
  header nav ul { border-left:1px solid #fff; margin:0 0 0 470px; padding:2.4em 0 0 20px; }
  header nav ul li { background:none; float:none; padding:0.5em 0; width:auto; }
  header nav ul li a span { display:inline; }
  body.fellow section[role="main"] { background-image:none; }
  section[role="main"] { margin:0.2em 0 4em 0; width:790px; }
  section[role="main"] header h2 { margin:0 0 0 130px; }
  section[role="main"] header div { left:650px; }
  section[role="main"] header div a img { width:60px; }
  section[role="main"] header div a + a img,
  section[role="main"] header div a + a + a img { width:95%; }
  section[role="main"] header div ul li { float:none; padding:0; }
  section[role="main"] header + p { padding:4.3em 160px 0 330px; } /* splash page only */ 
  div.generic { padding:4.3em 160px 4em 330px; } /* Generic pages only */ 
  div.fellows-images-js h4, 
  div.fellows-images h4 { left:150px; }
  div.fellows-images ul li, 
  div.fellows-images-js ul li,
  div.fellows-images ul li img,
  div.fellows-images-js ul li img { width:115px; }
  div.fellows-images.count-5 ul li, 
  div.fellows-images.count-5 ul li img { width:140px; }
  div.fellows-images.count-5 ul li:first-child { padding-left:10px; } /* This resets the additional left padding when there are only 5 fellows */
  ul.fellows-listing { margin:0 20px 0 0; padding:3em 0 0 0; text-align:right; width:310px; }
  h3.info { float:none; margin:0; padding:0.55em 0 0.5em 170px; width:460px; }
  
  div.info { padding:0 160px 2.6em 330px; }
  body.general-management div.info,
  body.disruptive-innovation div.info,
  body.product-design-marketing div.info,
  body.engineering-leadership div.info { float:left; padding:2.6em 0 2.6em 0; }
  body.fellow div.info { padding:3.4em 0 2.6em 0; }
  
  div.profile p.investment { margin-left:-10px; }

  ul.other-fellows { margin-left:740px; }
  ul.other-fellows li a span { right:0; width:auto; }

  div.profile { margin:0 0 0 10px; }
  aside.companies { padding:2.5em 0 3.1em 0; }
  aside.companies h4 { float:none; padding:0 0 0 170px; text-align:left; width:600px; }
  aside.companies ul { float:none; margin:0.75em 0 0 170px; }
  aside.past-winners { padding-left:80px; }
  aside.past-winners dl { padding:0.5em 0; }
  aside.past-winners dl dt { position:static; padding:0; text-align:left; width:90%; }
  aside.past-winners dl dd { padding:0 0 1em 0; }
  footer { margin:0; width:790px; }
  footer a { left:-10px; }
  footer a + a { left:160px; }
  footer a img { margin:0 0 0 20px; }
  footer p { border:none; margin:0; padding:1em 0 5em 20px; }

  div.splash-hero > img { left:10px; top:60px; width:140px; }
  div.splash-hero h2 { padding-left:0; }
  div.splash-hero h2 span { padding-left:170px; }
  div.splash-logos { padding-left:170px; }
  body.splash form { margin-left:0; }
  form p input { width:278px; }
  form p.submit input { width:300px; }
  body.splash aside a { padding-left:330px; }

}

/* 8b Below 790px */
@media screen and (max-width:790px) { 
  header h1 { left:10px; }
  header nav ul { margin:0 0 0 310px; }
  div.container { width:90%; }
  section[role="main"] { margin:0.2em 0 3em 0; width:100%; }
  section[role="main"] header h2 { border-left:20px solid #ff5d51; border-right:none; margin:0; padding:1.6em 0 0 20px; width:90%; }
  section[role="main"] header div { border-left:20px solid rgba(0,0,0,0.05); position:static; padding:2em 0 0 20px; }  
  section[role="main"] header div h4 { display:block; }
  section[role="main"] header div a img,
  section[role="main"] header div a + a img,
  section[role="main"] header div a + a + a img { width:auto; }
  section[role="main"] header div ul { position:static; }
  section[role="main"] header div ul li { display:inline; padding:0.5em 0; }
  section[role="main"] header + p { padding:2em 20px 0 20px; width:90%; }
  div.generic { padding:2em 20px 2em 20px; width:90%; }
  div.fellows-images,
  div.fellows-images-js { padding:1.5em 0 0 20px; }
  div.fellows-images h4,
  div.fellows-images-js h4 { border-left:none; padding:0 0 1em 0; position:static; width:90%; }
  div.fellows-images ul li,
  div.fellows-images-js ul li,
  div.fellows-images ul li img, 
  div.fellows-images-js ul li img, 
  div.fellows-images.count-5 ul li, 
  div.fellows-images-js.count-5 ul li, 
  div.fellows-images.count-5 ul li img,
  div.fellows-images-js.count-5 ul li img { width:75px; }
  div.fellows-images.count-5 ul li:first-child,
  div.fellows-images-js.count-5 ul li:first-child { margin-left:-10px; } /* This resets the additional left padding when there are only 5 fellows */
  ul.fellows-listing,
  ul.fellows-listing-js { margin:0; padding:0.9em 20px 1em 20px; text-align:left; width:90%; }
  ul.fellows-listing li,
  ul.fellows-listing-js li { border-left:1px solid #666; display:inline; padding:0 0.5em 0 0.75em; }
  ul.fellows-listing li:first-child,
  ul.fellows-listing-js li:first-child { border:none; padding-left:0; }
  h3.info,
  div.info, 
  body.fellow div.info,
  body.general-management div.info,
  body.disruptive-innovation div.info,
  body.product-design-marketing div.info,
  body.engineering-leadership div.info { padding:1em 20px 1em 20px; width:90%; }
  body.fellow div.info { padding-top:1.325em; }

  div.profile { padding:1em 0; text-align:left; width:90%; }
  div.profile img { float:left; margin:0 20px 0 10px; }
  div.profile ul { position:absolute; top:0; left:0; }
  div.profile ul li { background-position:170px 2px; padding-left:200px; }
  div.profile p.investment { margin-top:140px; margin-left:10px; /*width:80%;*/ }
  
  ul.other-fellows { clear:both; margin:0 0 0 20px; position:static; /*top:21.25em; right:0;*/ }
  ul.other-fellows li { float:left; margin:0 20px 40px 0; }
  ul.other-fellows li a { display:inline; }
  ul.other-fellows li a span { left:0; text-align:left; width:100%; }
  
  aside.companies h4 { padding:0 20px; width:90%; }
  aside.companies ul { margin:0.75em 20px 0 20px; }
  aside.past-winners { padding-left:20px; }
  aside.past-winners dl { padding-right:20px; }
  footer { margin:0; width:90%; }
  footer a img { display:block; margin:0 0 1em 20px; }
  
  div.splash-hero { margin:0 0 2em 0; }
  div.splash-hero > img { top:2.5em; }
  div.splash-logos { padding:2em 0 0 20px; }

  form p label { display:block; padding:0.5em 0; position:static; }
  form p input { width:75%; }
  form p.submit input { width:50%; }
  body.splash aside a,
  span.nominate { padding-left:20px; }

}

/* 8c Below 550px */
@media screen and (max-width:550px) { 
  header h1 { position:static; margin:2.5em 0 1em 20px; }
  header nav ul { border-left:none; margin:0; padding:0 0 0 20px; }
  section[role="main"] { margin:0.1em 0 3em 0; width:100%; }
  section[role="main"] header h2 br { display:none; }
  div.fellows-images.count-5 ul li:first-child,
  div.fellows-images-js.count-5 ul li:first-child { margin-left:-10px; } /* This resets the additional left padding when there are only 5 fellows */
  body.splash h1 { display:block; }
  div.splash-hero h2 { padding-top:0; }
  div.splash-hero > img { display:none; }
  div.splash-hero h2 span { padding-left:20px; }
  div.splash-logos a { display:block; margin:0 0 1em 0; }
  
}

/* 8d Below 400px */
@media screen and (max-width:400px) { 
  section[role="main"] header h2,
  section[role="main"] header + p,
  div.fellows-images h4,
  div.fellows-images-js h4,
  h3.info,
  aside.companies h4,
  footer { width:80%; }
}

/* 8e Retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
  body { background-image:none; }
}