/* ================================
UM COLORS:
Maroon: 70002e
Dark gray: 8c8e90
Light gray: d5cdc5
Copper: d5802c
==================================*/


/* ================================
== Body and navigation
==================================*/

a { color: #ff2d21; }

body, p, table { font-family: 'Alegreya', serif; font-size: 1.2em}



body, nav, ul, li { font-family: 'Alegreya', serif; font-size: 1em; }
body, nav { font-family: 'Alegreya', serif; font-size: 1em; }

h1 { font-family: 'Playfair Display', serif; color: #70002e;}
h2 { font-family: 'Playfair Display', serif; color: #70002e;}
h3 { font-family: 'Playfair Display', serif; color: #d5802c; padding-top: 60px;}
h4 { font-family: 'Playfair Display', serif; }
h5 { font-family: 'Playfair Display', serif; text-align: center}
h6 { font-family: 'Playfair Display', serif; }

.book-summary{
  font-family: 'Alegreya', serif; font-size: 1.4em;
}

.author,.title{
    display: none;
}

.center {
  text-align: center;
}

ul, li, p {
  margin: 0px;
  padding: 0px;
}

.caption { font-size:.9em; }


/* ================================
== OVAL THOUGHT BUBBLE (more CSS3)
==================================*/

.image {
   position: relative;
   width: 80%; /* for IE 6 */
   margin: auto;
}

.oval-thought {
   position: absolute;
   top: 0;
   margin-top: 10px;
   margin-bottom:10px;
   width: 100%;
   padding: 10px;
}


/* ================================
== Callouts
==================================*/

.minor_callout{
  font-size: 1em;
  width: 80%;
  padding: 10px;
  margin: 50px auto;
  background: white;
  color: black;
  border: 1px solid #d5802c;
  border-radius: 10px;
}

.minor_callout p {
  font-size: 1.05em;
  margin-bottom: -10px;
}

.major_callout{
  width: 70%;
  padding: 5px;
  margin: 25px auto;
  margin-bottom: 0;
  background: #d5cdc5;
  color: black;
  border: 2px solid #70002e;
  border-radius: 10px;
}

.callout_image {
  background-size: 50px;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 75px;
}

.random {
  background-image: url("img/coin_flip.png");
}

.activity {
  background-image: url("img/hammer.png");
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: 0px 10px;
  padding-left: 65px;
  margin-left: 30px;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-top: 0;
}

.resource {
  background-image: url("img/resource.png");
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: 0px 10px;
  padding-left: 65px;
  margin-left: 30px;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-top: 0;
}

.resource p { margin-top: 0px; margin-bottom: 0px; }


/* ================================
== Study excerpts
==================================*/

.excerpt{
  font-family: 'News Cycle', sans-serif;
  border: 1px;
  border-style: solid;
  width: 70%;
  padding: 5px;
  margin: 25px auto;
}


/* ================================
== Show/hide button
==================================*/

.msg_list {
  margin: 0;
  padding: 0;
}

.msg_head {
  padding: 5px 10px;
  cursor: pointer;
  position: relative;
  background-color:#FFCCCC;
  margin-top: 10px;
  margin-bottom: 10px;
}

.msg_body {
  padding: 5px 10px 15px;
  background-color: #F4F4F8;
}


/* ============================================================================================================================
== OVAL THOUGHT BUBBLE (more CSS3)
** ============================================================================================================================ */

.oval-thought {
  position: relative;
  margin: auto;
  width: 80%;
  padding: 20px 40px;
/*  margin: 1em; */
  margin-bottom: 110px;
  margin-top: 40px;
  text-align: center;
  color: #000;
  background: #fff;
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#dedede), to(#fff));
  background:-moz-linear-gradient(#dedede, #fff);
  background:-o-linear-gradient(#dedede, #fff);
  background:linear-gradient(#dedede, #fff);
  /*
  NOTES:
  -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
  -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
  */
  -webkit-border-top-left-radius: 220px 120px;
  -webkit-border-top-right-radius: 220px 120px;
  -webkit-border-bottom-right-radius: 220px 120px;
  -webkit-border-bottom-left-radius: 220px 120px;
  -moz-border-radius: 220px / 120px;
  border-radius:220px / 120px;
}

.oval-thought p {font-size:1em;}

/* creates the larger circle */
.oval-thought:before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50px;
  width: 30px;
  height: 30px;
  background: #dedede;
  /* css3 */
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius: 30px;
}

/* creates the smaller circle */
.oval-thought:after {
  content:"";
  position:absolute;
  bottom:-30px;
  left:30px;
  width:15px;
  height:15px;
  background:#dedede;
  /* css3 */
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
}