@import url("reset.css");

body{
  background-color:       #fff;
  font-family:            "Trebuchet MS", "arial";
  min-width:              25em;
  position:               relative;
  padding-bottom:         3em;
}

a{ 
  color:                  #ff6600;
}

nav{ 
  display:                none;
}


body > section > section{
  height:                 10em;
  color:                  #fff;
  background-image:       url("../img/gradient.jpg");
  background-color:       #444444;
}

h1 > time,
small > a,
section header,
details{
  width:                  86%;
}

h1 > time{
  position:               absolute;
  top:                    1.5em;
  left:                   0;
  right:                  0;
  bottom:                 0;
  
  display:                block;

  padding:                0 0 .65em 0;
  font-size:              1.15em;
  margin:                 0 7% 0 7%;

  text-align:             left;
  color:                  white;
  height:                 .95em;
  border-bottom:          0.05em dotted #888888;
}

small > a{ 
  position:               absolute;
  top:                    4em;
  padding-right:          1.75em;
  color:                  #fff;
  font-size:              .55em;
  width:                  150px;
  background-image:       url('../img/download.gif');
  background-position:    right;
  background-repeat:      no-repeat;
  right:                  7%;
  text-align:             right;
  opacity:                .5;
}

small > a:hover{
  opacity: 1;
  -webkit-transition-duration: .1s;
}

section header{
  position:               relative;
  left:                   7%;
  margin-top:             4.5em;
  height:                 3.5em;
  float:                  left;
}


ul#player_controls{
  position:               absolute;
  top:                    0;
  left:                   0;
  cursor:                 pointer;
  
  width:                  3.25em;
  height:                 3.25em;
  background-color:       #ff6600;
  
  -moz-border-radius:     .35em;
  -webkit-border-radius:  .35em;
  
  text-shadow:            #000               -2px -3px 0px;
  text-shadow:            rgba( 200,50,0,.5) -2px -3px 0px;
  
  
  box-shadow:             #ffcc99 -.05em -.05em 0px;
  -moz-box-shadow:        #ffcc99 -.05em -.05em 0px;
  -webkit-box-shadow:     #ffcc99 -.05em -.05em 0px;
  
  background-image:       url("../img/btn_grad.jpg");
  background-repeat:      repeat-x;
  z-index:                30;
}

ul#player_controls:hover{
  color:                  #ffffff;
  opacity:                .75;
  -webkit-transition-duration: .2s;
}

li#player_play{
  font-size:              2em;
  line-height:            1.65em;
  margin-left:            .18em;
}

li#player_pause{
  font-size:              1.2em;
  line-height:            2.7em;
  margin-left:            .45em;
}

section header p{

  position:               absolute;
  left:                   0;
  right:                  0;
  bottom:                 2em;
  
  margin:                 0 3em 0 4.5em;
  text-align:             left;
  font-weight:            bold;
}


section header p span{
  display:                block;
  font-size:              .65em;
  line-height:            1em;
}



details{
  position:               absolute;
  top:                    5.35em; /* Adjusts vertical placement */
  left:                   7%;
  height:                 2.35em;
  display:                block;
  text-align:             left;
}

details dt{
  float:                  right;
}

details dt time{
  font-size:              .65em;
  vertical-align:         top;
}

details dd{
  position:               relative;
  margin-left:            4.5em;
  display:                block;
  margin-top:             1.3em;
  background-color:       #666;
  border-bottom:          2px solid #999;
  border-left:            1px solid #333;
  border-top:             1px solid #333;
  border-right:           1px solid #888;
  overflow:               hidden;
}
details dd div{
  overflow:               hidden;
  text-indent:            .5em;
  font-size:              .5em;
  padding:                .5em 0 .5em 0;
  color:                  #fff;  
  background-color:       #666;
}

details dd div.loading{
  width:                  100%;
  color:                  #fff;
}

details dd div.active{
  background-color:       #ff6600;
  color:                  transparent;
}
details dd #player_progress_not_loaded{
  position:               absolute;
  display:                block;
  background-color:       #666;
  width:                  0%;
  top:                    0;
  bottom:                 0;
  left:                   0;
  opacity:                .80;
}


aside{
  position:               absolute;
  top:                    10em;
  left:                   0;
  width:                  86%;
  margin-left:            7%;
  margin-right:           7%;
}

aside h1{
  display:                none;
}

dl{
  padding-bottom:         2em;
}

dl dt{
  height:                 4em;
  font-size:              .65em;
  color:                  #555;
  text-transform:         uppercase;
  letter-spacing:         1px;
  line-height:            4em;
}

dl dd{
  text-align:             left;
  display:                block;
  
  border-top:             .05em solid #cccccc;
  background-color:       #fff;
}

dl dd:hover a,
dl dd.current a{
  background-color:       #fff1de;
}

dl dd a{
  position:               relative;
  display:                block;
}

dl dd a p{
  font-size:              .75em;
  padding:                .5em .5em .5em 5.75em;
}

dl dd a p time{
  position:               absolute;
  top:                    .8em;
  left:                    2em;
  
  font-size:              .75em;
  color:                  #666666;
}

dl dd a p cite{
  font-size:              .75em;
  color:                  #999999;
  font-style:             italic;
}

dl dd a p span{ 
  display:                none;
}

dl dd.segment a b:after{
  content: ":";
}
dl dd.segment a b.nodescription:after{
  content: "";
}


nav{
  position:               fixed;
  left:                   0;
  right:                  0;
  bottom:                 0;
  
  display:                block;
  z-index:                10;
  padding:                0;
  margin:                 0;
  width:                  100%;
  min-width:              25em;
}

nav ul{
  margin-left:            7%;
  margin-right:           7%;
  z-index:                1;
}

nav ul li:first-child{
  margin-left:            -.05em;
  border-left:            .05em solid #dddddd;
}

nav ul li{
  float:                  left;
  width:                  33.1%;
  border-top:            .05em solid #dddddd;
  border-right:          .05em solid #dddddd;
  background-color:       #f9f9f9;
  top:                    0;
  left:                   0;
  position:               relative;
}

nav ul li a{
  font-size:              .55em;
  text-transform:         uppercase;
  color:                  #ff6600;
  letter-spacing:         1px;
  display:                block;
  line-height:            1em;
  padding-top:            1em;
  height:                 2em;
}

nav ul li a:hover{ 
  background-color:       #fff1de;
}