/* Copyright 2009 Stories of Health <http://storiesofhealth.org/>
 * Licensed under a Creative Commons Attribution-Noncommercial 3.0 United States License
 * <http://creativecommons.org/licenses/by-nc/3.0/us/>
 */
 
/*
red #AF243F
blue #338CC1
brown #51392E
*/

body {
  margin: 1em auto;
  font-family: georgia;
}

h1,h2,h3,h4 {
  margin: 0;
  color: #338CC1;
}

h1+p, h2+p, h3+p, h4+p,
h1+ul, h2+ul, h3+ul, h4+ul {
  margin-top: 0;
}

div.clear {
  clear: both;
}

div.static ul {
  padding-left: 1.4em;
}

div.static ul,
div.static p {
  font-size: 1em;
  line-height: 1.5em;
}

div.description p,
div.share p,
div#about p {
  font-size: 0.9em;
  line-height: 1.4em;
}

p {
  font-size: 1.2em;
  line-height: 2em;
  color: #51392E;
}

p.intro {
  width: 600px;
  margin-top: 0;
  line-height: 1.5em;
}

div#about p.action {
  font-size: 1.2em;
  background: #338CC1;
  color: white;
  text-align: center;

  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  
  width: 200px;
  margin-top: 0;
  padding: 0.2em 0;
}

div#about p.action-line {
    margin-bottom: 0.2em;
    margin-top: 2em;
}

img {
  border: 0;
}

li a, p a {
  color: #338CC1;
  text-decoration: none;
  border-bottom: 1px dotted;
}

a:hover {
  color: #AF243F;
}

a:visited {
  color: #51392E;
}

a.permalink {
  font-size: 0.7em;
  color: #777;
  text-transform: uppercase;
}

div a.button {
  font-size: 1em;
  padding: 0.3em 0.9em;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
}

a.button,
input.button {
  width: 200px;
  font-size: 1.5em;
  color: white;
  background: #AF243F;
  margin-top: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border: none;
  padding: 0.2em;
  cursor: pointer;
}

input.button:hover {
  background: #338CC1;
}

/* ------ action page ------------------------------- */
div.action div a {
  border: none;
}

div.action div {
  width: 33%;
  float: left;
  height: 61px;
}

div.action div p {
  font-size: 0.9em;
  margin: 0;
}

/* ------ videos ------------------------------- */
div.selected-container {
  margin-bottom: 5em;
  height: 300px;
  clear: both;
}

div.scrollable {
  height: 170px;
  width: 600px;
  position: relative; 
  overflow: hidden;
}

div.browser {
  margin: 2em auto auto;
  border-bottom: 1px solid #999;
  height: 170px;
  width: 680px;
}

div.video {
  width: 680px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
}

div.navi a, a.prevPage, a.nextPage {
  text-decoration: none;
  border: none;
}

a.prevPage,
a.nextPage {
  margin-top: 80px;
}

div.scrollable div.items { 
  width: 20000em; 
  position: absolute; 
} 

/* Firefox Flashblock plugin */
div.video[role='button'] {
  height: 344px ! important;
  width: 425px ! important;
}

div.description,
div.share,
object.video {
  margin: auto;
  width: 425px;
}

object.video {
  display: block;
  height: 344px;
}

div.selected-container div[role='button'], /* Firefox Flashblock plugin */
object#yt-player,
div.video-story-medium,
div.video-story { 
  cursor: pointer;
  float: left; 
  -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(white));
} 

div.video-story-medium,
object#yt-player {
  margin-top: 15px;
}

div.video-story {
  width: 200px;
  height: 150px;
}

div.trailer {
  width: 425px;
  height: 344px;
  margin: 1em auto;
}

/* front page, allow for reflection */
div.selected-stories div.video-story {
  margin-bottom: 15px;
}

div.video-story-medium {
  width: 400px;
  height: 300px;
}

div.video-story-medium div.play {
  width: 100px;
  height: 71px;
  background: url('/images/play-medium.png') no-repeat;
  margin-top: 170px;
  margin-left: 150px;
}

div.video-story div.play {
  width: 50px;
  height: 35px;
  background: url('/images/play-small.png') no-repeat;
  margin-top: 88px;
  margin-left: 75px;
}

a.addthis_button_compact {
  border-bottom: none;
}

ul.all-stories {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 720px;
}

ul.all-stories li {
  width: 350px;
  height: 160px;

  float: left;
  margin: 0;
  padding: 0;
  padding-left: 10px;
  margin-bottom: 1.5em;
}

ul.all-stories div.description {
  height: 160px;
  width: 150px;
  float: left;
  padding-top: 2em;
  
}

ul.all-stories li p {
  font-size: 0.9em;
  line-height: 1.4em;
  vertical-align: bottom;
}

/* ------ layout ------------------------------- */
div#about {
  padding-left: 1.3em;
  padding-right: 1em;
}

div.container {
  clear: both;
  width: 68em;
  margin: 0 auto;
}

div.wide, div.narrow {
  float: left;
}

div.wide {
  width: 680px;
  padding-top: 20px;
}

div.narrow {
  padding-right: 5em;
  width: 320px;
}

div#footer {
  width: 68em;
  height: 2em;
  padding-top: 1em;

  text-align: center;
  clear: both;
}

div#footer ul.site {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  border-top: 1px dotted #51392E;
  padding: 0;
  padding-left: 1.5em;
  padding-top: 0.5em;
}

div#footer ul.links {
  font-size: 0.8em;
  margin-top: 0;
}

div#footer li {
  list-style: none;
  display: inline;
}

div#footer li + li:before {
  content: " | ";
}