@charset "UTF-8";
html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}


/* Generic */
body {
   font-family: verdana, arial, serif;
   font-size: 100%;
   background-color: white;
   margin: auto;
   max-width: 60em;
   background: lightgrey;
   --berkeley_blue: #003262;
   --founders_rock: #3b7ea1;
   --california_gold: #fdb515;
   --medalist: #c4820e;
   --labelgradient: 90deg,black,black 2rem,transparent 10rem;
}
body > div {
   margin: 1.5rem 0;
   padding: 0;
   background: white;
   border-left: var(--berkeley_blue) solid 1.5rem;
}
@media (max-width: 500px) {
   body > div {
      border-left: black solid 0;
   }
}
a {
   text-decoration: none;
   color: var(--berkeley_blue);
}
a:visited {
   color: var(--berkeley_blue);
}
a:hover {
   color: var(--california_gold);
}
p {
   margin: 1rem;
   padding-top: 0;
}
h2 a {
   color: black;
}


/* Header */
.header {
   color: white;
}
   .header .banner {
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: space-evenly;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url(/images/whiteboard_berkeleyblue_small.jpg);
      text-align: left;
      min-height: 200px;
      max-height: 200px;
      min-width: 100px;
      padding: 0 3rem;
      margin: 1.5rem 0 0;
      border: solid green 0px;
   }
      .header .banner h1 {
         color: white;
         font-size: 4rem;
         margin: 0 1rem;
      }
      .header .banner h2 {
         color: var(--california_gold);
         letter-spacing: 0.142rem;
         margin: 0 1rem;
      }
      @media (max-width: 850px) {
         .header .banner h1 {
            font-size: 3rem;
         }
         .header .banner h2 {
            font-size: 1.2rem;
         }
         .header .menu li {
            font-size: 1.1rem;
         }
      }
      @media (max-width: 640px) {
         .header .banner h1 {
            font-size: 2.5rem;
         }
         .header {
            margin-top: 0;
         }
         .header .banner {
            margin-top: 0;
         }
      }
      @media (max-width: 470px) {
         .header {
            border-left: solid black 0;
         }
         .header .banner {
            min-height: 200px;
            max-height: 200px;
            min-width: 100px;
            padding: 0 1rem;
         }
         .header .banner h1 {
            font-size: 2.0rem;
         }
      }
      @media (max-width: 270px) {
         .header .banner h1 {
            font-size: 1.5rem;
         }
         .header .banner h2 {
            font-size: 1.0rem;
         }
      }

   .header .bannerimage {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: left;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      min-height: 100px;
      max-height: 100px;
      min-width: 100px;
      padding: 0 0rem;
      margin: 0;
      color: white;
      background-image: linear-gradient(90deg,var(--california_gold),
         var(--california_gold) 250px,transparent 600px), var(--imageurl);
      background-position: center 50%;
   }
      .header .bannerimage .bannertitle {
         display: flex;
         flex-direction: column;
         align-items: left;
         justify-content: space-evenly;
         background-size: 200%;
         background-repeat: no-repeat;
         background-position: 0% 100%;
         color: var(--berkeley_blue);
         text-align: left;
         min-width: 200px;
         padding: 0 3rem;
         border: solid green 0px;
      }
   .header .menu {
      list-style-type: none;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin: 0;
      padding: 0;
      background: var(--berkeley_blue);
      font-weight: bold;
      font-size: 1.3rem;
      line-height: 2.0rem;
      flex-wrap: wrap;
   }
      .header ul.menu {
         padding: 0.3rem 0;
      }
      .header .menu li a {
         color: white;
         margin: 0 0.5rem;
      }
      .header .menu li a:hover {
         color: var(--california_gold);
      }
      .header .menu li a:active {
         color: var(--california_gold);
      }


/* Romps */
.romps {
   display: flex;
   flex-direction: row;
   align-content: stretch;
   padding-right: 0;
   padding-left: 0;
   border-left: var(--berkeley_blue) solid 1.5rem;
   border-bottom: green solid 0px;
   margin: 0 0 1.5rem;
   background: white;
}
@media (max-width: 500px) {
   .romps {
      border-left: black solid 0;
   }
}
   .romps .column {
      display: flex;
      flex-direction: column;
      border: purple 0px solid;
      min-width: 354px;
      max-width: 354px;
   }
      .romps .column .headshot {
         min-height: 400px;
         min-width: 354px;
         background-image: url(/images/david_romps_2015_small.jpg);
         background-size: cover;
         background-repeat: no-repeat;
      }
      .romps .column .info {
         padding: 0 1rem 1rem;
      }
         .romps .column .info p {
            margin: 1rem 0;
            padding: 0;
         }
   .romps .eyecandy {
      width: 100%;
      background-image: url(/images/ucberkeleycampus_small.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
   }
   @media (max-width: 500px) {
      .romps .eyecandy {
         background-image: none;
         background-color: var(--berkeley_blue);
      }
   }


/* Topic */
.topic {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: space-between;
}
   .topic .topicimage {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      background-image: linear-gradient(90deg,black,black 2rem,transparent 10rem),
         var(--imageurl);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      min-height: 200px;
      max-height: 200px;
      min-width: 100px;
      padding: 0 0rem;
      margin: 0;
      color: white;
   }
   .topic .topicimage:hover {
      background-image: linear-gradient(90deg,var(--california_gold),var(--california_gold) 2rem,transparent 10rem),
         var(--imageurl);
      cursor: pointer;
   }
   .topic .topicimage.contact:hover {
      background-image: linear-gradient(90deg,black,black 2rem,transparent 10rem),
         var(--imageurl);
      cursor: auto;
   }
      .topic .topicimage:hover h1 {
         color: var(--berkeley_blue);
      }
      .topic .topicimage.contact:hover h1 {
         color: white;
      }
      .topic .topicimage h1 {
         padding: auto;
         transform: translateX(-50%) rotate(270deg) translateY(70%);
      }
   .topic .item {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      align-content: stretch;
   }
/*
   .topic:hover .item {
      cursor: pointer;
      background-color: var(--california_gold);
   }
   .topic:hover .item.contact {
      cursor: auto;
      background-color: white;
   }
*/
   .topic .item.contact {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: white;
   }
      .topic .item h2 {
         margin: 0;
         font-size: 1rem;
         margin: 1rem;
      }
         .topic .item h2 a {
            color: var(--berkeley_blue);
         }
         .topic .item h2 a:hover {
            color: var(--california_gold);
         }
      .topic .item h2 + h2 {
         margin-top: 0;
      }
      .topic .item h2 + p {
         margin-top: 0;
      }
      .topic .item p + p {
         margin-top: 0;
      }
      .topic .item p + h2 {
         margin-top: 0;
      }


/* Research */
.research {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   justify-content: flex-start;
}
   .research .researchimage {
      background-image: var(--imageurl);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      min-height: 100%;
      min-width: 200px;
      padding: 0 0rem;
      margin: 0;
      color: white;
   }
@media (max-width: 510px) {
   .research {
      flex-direction: column;
   }
   .research .researchimage {
      min-height: 200px;
   }
}
   .research .item {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      align-content: stretch;
   }
      .research .item h2 {
         margin: 0;
         font-size: 1rem;
         margin: 1rem 1.5rem;
      }
      .research .item h2 + h2 {
         margin-top: 0;
      }
      .research .item h2 + p {
         margin-top: 0;
      }
      .research .item p + p {
         margin-top: 0;
      }
      .research .item p + h2 {
         margin-top: 0;
      }

.unadorned {
   margin: 0 0 1.5rem;
   padding: 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   font-size: 1.1rem;
   border-width: 0;
}
   .unadorned h1 {
      margin: 0;
      padding: 1rem 1.5rem;
      border-left: var(--california_gold) solid 1.5rem;
      color: var(--california_gold);
      background: var(--berkeley_blue);
      align-text: center;
   }
   .unadorned h1 {
      font-size: inherit;
      font-weight: bold;
      text-align: left;
   }
   .unadorned h2 {
      font-size: inherit;
      font-weight: bold;
      text-align: left;
   }

.randt {
   margin: 0 0 1.5rem;
   padding: 1rem 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   font-size: 1.1rem;
}
   .randt h1, h2, ol, ul, p, dl {
      margin: 1rem 1.5rem;
   }
   .randt h1 {
      font-size: inherit;
      font-weight: bold;
      text-align: left;
   }
   .randt h2 {
      font-size: inherit;
      font-weight: bold;
      text-align: left;
   }
   .randt ul {
      list-style-type: none;
      padding: 0;
   }
   .randt ul li {
      margin: 0.5rem 0;
   }
   .randt dl dd, dl dt {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
   }
   .randt .box1 {
      width: 100%;
      max-width: auto;
      padding: 1rem 1.5rem;
   }
   .randt .box2 {
      width: 100%;
      border: solid black 1px;
      padding: 1rem 0;
      margin: 0;
   }
   .randt .box3 {
      width: 100%;
      max-width: auto;
      padding: 1rem;
   }
   .randt div {
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: flex-start;
      max-width: 600px;
      padding: 1rem 2rem;
   }
      .randt div img, video {
         margin: 0;
         max-width: 100%;
         height: auto;
      }

div.warning {
   color: var(--california_gold);
   background: var(--berkeley_blue);
   font-size: larger;
   justify-content: center;
   align-items: center;
}

.warning:hover {
   color: var(--berkeley_blue);
   background: var(--california_gold);
}

/* Group */
.people {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: space-between;
   background: lightgrey;
}
   .people div.person div h2 {
      font-size: 1.1rem;
      margin-top: 0;
      margin-left: 0;
    }
   .people #groupphoto {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      background-image: url(/images/group.jpg);
      background-repeat: no-repeat;
      background-position: center center;
      background-position: center 0% !important;
      background-size: cover;
      min-height: 400px;
      max-height: 400px;
      min-width: 100px;
      padding: 0 0rem;
      margin: 0;
      color: white;
   }
   .people .person {
      display: flex;
      flex-direction: row;
      align-items: start;
      align-content: flex-start;
      margin-top: 1.5rem;
      background: white;
   }
      .people .person div, h2 {
         margin: 1.5rem;
      }
      .people .person img {
         height: auto;
         width: auto;
         max-height: 300px;
      }
   @media (max-width: 510px) {
      .people .person {
         flex-direction: column;
      }
      .people .person img {
         margin: 1.5rem;
         margin-bottom: 0;
      }
   }

/* Pubs and Courses */
.pubs {
   width: 100%;
   height: auto;
   float: left;
   padding: 17px 30px;
   margin: 0 0 1.5rem;
   background: white;
}
   .pubs h2 {
      font-size: 1.2rem;
      text-align: left;
      margin: 1rem 0;
   }
   .pubs li.courseyear {
      font-weight: bold;
   }
   div.pubsheader {
      width: 100%;
      height: auto;
      float: left;
      padding: 17px 30px;
      margin: 0 0 1.5rem;
      background: white;
   }
   div.pubschapter {
      width: 100%;
      height: auto;
      float: left;
      padding: 0; /*17px 30px; */
      margin: 0 0 1.5rem;
      background: white;
      color: black;
   }
   ol.courseyear {
      text-align: left;
      background: white;
      list-style-type: none;
      list-style-position: inside; 
      margin: 0; 
      padding: 0;
   }
   li.courseyear {
      display: block;
      background: white;
      white-space: normal;
      list-style-position: inside;
      list-style-color: black;
      margin: 0;
      padding: 10px 0;
   }
   ol.courselist {
      text-align: left;
      background: white;
      list-style-type: none;
      list-style-position: inside;
      margin: 0;
      padding: 0 0 30px 0;
   }
   li.courselist {
      display: block;
      background: white;
      white-space: normal;
      list-style-position: inside;
      list-style-color: black;
      margin: 0;
      padding: 10px 0;
   }
   .title {
      height: auto;
      width: 100%;
      margin: 1rem;
      text-align: center;
      font-weight: 100;
      font-size: 1rem;
   }
   li.courses {
      display: block;
      background: white;
      white-space: normal;
      list-style-type: circle;
      list-style-position: inside;
      list-style-color: black;
      margin: 0 0 10px 0;
   }

/* Advice */
ul.advice {
   list-style-type: square;
   border: solid black 0px;
   padding: 1rem;
   padding-top: 0;
   padding-bottom: 0;
}
ul.advice li {
   border: solid orange 0px;
   padding-bottom: 1rem;
}
ul.advice li:last-of-type {
   padding-bottom: 0;
}

/*@media (max-width: 700px) {
   #groupname .break {
      display: inline;
   }
}*/

/* Topic Images */
.teaching {
   --imageurl: url(/images/teaching_small.jpg);
}
.teachingbg {
   --imageurl: url(/images/teaching_small_bluegrey.jpg);
}
.group {
   --imageurl: url(/images/group.jpg);
   background-position: center 10% !important;
}
.groupbg {
   --imageurl: url(/images/group_bluegrey.jpg);
   background-position: center 10% !important;
}
.research {
   --imageurl: url("/images/25km_100m_cropped_small.jpg");
   background-position: 50% !important;
}
.researchbg {
   --imageurl: url("/images/25km_100m_cropped_small_bluegrey.jpg");
   background-position: 50% !important;
}
.papers {
   --imageurl: url("/images/14lightning_snapshot_small.jpg");
   background-position: 50% !important;
}
.papersbg {
   --imageurl: url("/images/14lightning_snapshot_small_bluegrey.jpg");
   background-position: 50% !important;
}
.joinus {
   --imageurl: url(/images/edman_exit_4822.jpg);
   background-position: center 55% !important;
}
.joinusbg {
   --imageurl: url(/images/edman_exit_4822_bluegrey.jpg);
   background-position: center 45% !important;
}
.advice {
   --imageurl: url(/images/particles-gray_bluegrey.jpg);
   background-position: center 55% !important;
}
.advicebg {
   --imageurl: url(/images/particles-gray_bluegrey.jpg);
   background-position: center 45% !important;
}
.basc {
   --imageurl: url(/images/symposium_speakers_2019_small.jpg);
   background-position: center 8% !important;
}
.contact {
   background-color: rgb(197,248,250);
   --imageurl: url(/images/twitter_transparent.png);
   background-position: center center;
   background-size: auto 150% !important;
}

/* Research images */
.pub24gulfstream {
   --imageurl: url(/papers/pubdata/2024/gulfstream/square.jpg);
}
.pub24euler {
   --imageurl: url(/papers/pubdata/2024/euler/square.jpg);
}
.pub23texas {
   --imageurl: url(/papers/pubdata/2023/texas/square.png);
}
.pub22sherwood {
   --imageurl: url(/papers/pubdata/2022/sherwood/square.png);
}
.pub21fan {
   --imageurl: url(/papers/pubdata/2021/fan/square.png);
}
.pub22jap {
   --imageurl: url(/papers/pubdata/2022/jap/square.jpg);
}
.pub18supersat {
   --imageurl: url(/papers/pubdata/2018/supersat/18supersat_dw.jpg);
}
.pub21blowdown {
   --imageurl: url(/papers/pubdata/2021/blowdown/square.jpg);
}
.pub22heatwave {
   --imageurl: url(/papers/pubdata/2022/heatwave/square.png);
}
.pub21water {
   --imageurl: url(/papers/pubdata/2021/water/square.png);
}
.pub20heatindex {
   --imageurl: url(/papers/pubdata/2020/heatindex/square.png);
}
.pub20logarithmic {
   --imageurl: url(/papers/pubdata/2020/logarithmic/square.png);
}
.pub20equinoctial {
   --imageurl: url(/papers/pubdata/2020/equinoctial/20equinoctial_square.png);
}
.pub20climatology {
   --imageurl: url(/papers/pubdata/2020/climatology/square.png);
}
.pub20plume {
   --imageurl: url(/papers/pubdata/2020/plume/20plume_square.jpg);
}
.pub19lifecycle {
   --imageurl: url(/papers/pubdata/2019/lifecycle/square.png);
}
.pub20cacti {
   --imageurl: url(/papers/pubdata/2020/cacti/20cacti_square.png);
}
.pub18arctic {
   --imageurl: url(/papers/pubdata/2018/arctic/lightning_change_square_small.jpg);
}
.pub19singh {
   --imageurl: url(/papers/pubdata/2019/singh/19singh_square.png);
}
.pub17leshouches {
   --imageurl: url(/papers/pubdata/2017/leshouches/17leshouches_photo.jpg);
}
.pub18equilibrate {
   --imageurl: url(/papers/pubdata/2018/equilibrate/colors.png);
}
.pub18iflux {
   --imageurl: url(/papers/pubdata/2018/iflux/ocean_square.jpg);
}
.pub18media {
   --imageurl: url(/papers/pubdata/2018/media/18media_poster.jpg);
}
.pub17fitt {
   --imageurl: url(/papers/pubdata/2017/fitt/17fitt_square.png);
}
.pub16anvils {
   --imageurl: url(/papers/pubdata/2016/anvils/16anvils_figure.png);
}
.pub16lightning {
   --imageurl: url(/papers/pubdata/2016/lightning/16lightning_figure_small.png);
}
.pub16precip {
   --imageurl: url(/papers/pubdata/2016/precip/summary.png);
}
.pub18bams {
   --imageurl: url(/papers/pubdata/2018/bams/18bams_snapshot_small.png);
}
.pub16cyclone {
   --imageurl: url(/papers/pubdata/2016/cyclone/radiative_cyclone_trimmed.jpg);
}
.pub16lcl {
   --imageurl: url(/papers/pubdata/2016/lcl/16lcl_fig_small.png);
}
.pub15leaky {
   --imageurl: url(/papers/pubdata/2015/leaky/15leaky_snapshot.png);
}
.pub17sizes {
   --imageurl: url(/papers/pubdata/2017/sizes/17sizes_cartoon_small.png);
}
.pub15cape {
   --imageurl: url(/papers/pubdata/2015/cape/cape2.png);
}
.pub15fusion {
   --imageurl: url(/papers/pubdata/2015/fusion/snowflake2.jpg);
}
.pub11stochastic {
   --imageurl: url(/papers/pubdata/2011/stochastic/figure8.jpg);
}
.pub15coldpool {
   --imageurl: url(/papers/pubdata/2015/coldpool/cropped.gif);
}
.pub15capeles {
   --imageurl: url(/papers/pubdata/2015/capeles/cape_warming.jpg);
}
.pub15effective {
   --imageurl: url(/papers/pubdata/2015/effective/15effective_movie_small.gif);
}
.pub14vaporring {
   --imageurl: url(/papers/pubdata/2014/vaporring/3D_coldpool_section_small.jpg);
}
.pub13stereo {
   --imageurl: url(/papers/pubdata/2013/stereo/thermals_small_128.gif);
}
.pub14effective {
   --imageurl: url(/papers/pubdata/2014/effective/buoyancy.jpg);
}
.pub14sticky {
   --imageurl: url(/papers/pubdata/2014/sticky/thermal.jpg);
}
.pub13severe {
   --imageurl: url(/papers/pubdata/2013/severe/stenv_current_resized.png);
}
.pub14lightning {
   --imageurl: url(/papers/pubdata/2014/lightning/science_cover.jpg);
}
.pub13transilient {
   --imageurl: url(/papers/pubdata/2013/transilient/particles.jpg);
}
.pub13lapse {
   --imageurl: url(/papers/pubdata/2013/lapse/13lapse_theory_drhdt.png);
}
.pub11velocity {
   --imageurl: url(/papers/pubdata/2011/velocity/two_cameras.jpg);
}
.pub13wpg {
   --imageurl: url(/papers/pubdata/2013/wpg/13wpg_h0_inviscid.png);
}
.pub12rayleigh {
   --imageurl: url(/papers/pubdata/2012/rayleigh/12rayleigh_hovmoller.png);
}
.pub12aggregation {
   --imageurl: url(/papers/pubdata/2012/aggregation/QV_noevap_3D.png);
}
.pub11lagrangian {
   --imageurl: url(/papers/pubdata/2011/lagrangian/ani_thumb.png);
}
.pub12equivalence {
   --imageurl: url(/papers/pubdata/2012/equivalence/12equivalence_finegrid.png);
}
.pub11wpgsim {
   --imageurl: url(/papers/pubdata/2011/wpgsim/steady_yz.png);
}
.pub11wpgtheory {
   --imageurl: url(/papers/pubdata/2011/wpgtheory/gaussian_transient.png);
}
.pub10molinari {
   --imageurl: url(/papers/pubdata/2010/molinari/10molinari_updown_cape.png);
}
.pub10transilient {
   --imageurl: url(/papers/pubdata/2010/transilient/10transilient_zoom_first.png);
}
.pub09warming {
   --imageurl: url(/papers/pubdata/2009/warming/09warming_precip_web.gif);
}
.pub09isotopes {
   --imageurl: url(/papers/pubdata/2009/isotopes/square.png);
}
.pub09entrain {
   --imageurl: url(/papers/pubdata/2009/entrain/entrainment.png);
}
.pub09overshoot {
   --imageurl: url(/papers/pubdata/2009/overshoot/data0001.png);
}