/* http://meyerweb.com/eric/tools/css/reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

:focus {
  outline: 0; }

ins {
  text-decoration: none; }
del {
  text-decoration: line-through; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a img {border:0;}

.clear {
	clear: both;
	position: relative;
	height: 0;
	width: 0;
	line-height: 0;
	font-size: 0;
}

.left {
  float: left;
  position: relative;
}

input[type="submit"]::-moz-focus-inner {
    border: 1px dotted transparent;
}



body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  background: #2f1543;
}

a,
.pink {
  color: #d17eff;
}

#wrapper {
  width: 660px;
  margin: 0 auto;
	overflow:hidden;
}

#header {
  float: left;
  width: 660px;
  margin: 15px 0;
}

h1#logo-link a {
  float: left;
  display: block;
  overflow: hidden;
  width: 260px;
  height: 100px;
  line-height: 300px;
  background: url(/images/pockets-logo.png) 0px 0px no-repeat;
}

#sign-in {
  float: right;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-bottom: 1px solid #333;
  background: #e6e6e6 url(/images/whitepx.png) 0px 0px repeat-x;
  padding: 3px;
  padding-bottom: 2px;
  margin-top: 26px;
}

#sign-in a {
  width: 92px;
  height: 41px;
  overflow: hidden;
  line-height: 200px;
  float: left;
  background: url(/images/sign-in-btn.png) 0px 0px no-repeat;
}

#sign-in a:hover {
  background: url(/images/sign-in-btn.png) 0px -41px no-repeat;
}

#sign-in a:active {
  background: url(/images/sign-in-btn.png) 0px -82px no-repeat;
}

#sign-in a:active {
  background: url(../images/sign-in-btn.png) 0px -82px no-repeat;
}

#sub-header,
#content,
#footer {
  width: 660px;
  float: left;
}

#footer {
  padding-bottom: 100px;
}

/* Homepage Styles */

h2#blurb {
  text-indent: -9999px;
  width: 660px;
  height: 100px;
  float: left;
  background: url(/images/blurb.png) 0px 0px no-repeat;
}

.gray-full-container {
  width: 640px;
  float: left;
  border-bottom: 1px solid #333;
  background: #e6e6e6 url(/images/whitepx.png) 0px 0px repeat-x;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}

#send-voicemail input#text,
#send-voicemail input#login,
#update-phone-number input#text {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border: 0;
  height: 35px;
  width: 380px;
  background: #fff url(/images/text-field.png) 0px 0px repeat-x;
  font-size: 22px;
  color:#363636;
  font-weight: 900;
  padding: 10px 10px 0 10px;
  float: left;
}

#update-phone-number input#text {
  width: 313px;
  color: #363636;
}

#send-voicemail input:focus,
#update-phone-number input:focus {
  color: #363636;
}

#send-voicemail input#voicemail-button {
  border: 0;
  line-height: 9999px;
  text-indent: -9999px;
  height: 49px;
  float: right;
  cursor: pointer;
  width: 233px;
  margin-top: -2px;
  margin-right: -2px;
  background: url(/images/send-voicemail-btn.png) 0px 0px no-repeat;
}

#send-voicemail #voicemail-button:hover {
  background: url(/images/send-voicemail-btn.png) 0px -49px no-repeat;
}

#send-voicemail #voicemail-button:active {
  background: url(/images/send-voicemail-btn.png) 0px -98px no-repeat;
}

#update-phone-number #phone-button {
  border: 0;
  line-height: 9999px;
  text-indent: -9999px;
  height: 49px;
  float: right;
  cursor: pointer;
  width: 300px;
  margin-top: -2px;
  margin-right: -2px;
  background: url(/images/update-phone-number-btn.png) 0px 0px no-repeat;
}

#update-phone-number #phone-button:hover {
  background: url(/images/update-phone-number-btn.png) 0px -49px no-repeat;
}

#update-phone-number #phone-button:active {
  background: url(/images/update-phone-number-btn.png) 0px -98px no-repeat;
}

#hr {
  line-height: 0;
  font-size: 0;
  background: #150b1f;
  border-bottom: 1px solid #3d214f;
  width: 660px;
  height: 1px;
  margin: 25px 0;
  float: left;
}

#content h3 {
  color: #fff;
  font-size: 24px;
  width: 490px;
  float: left;
  padding-bottom: 3px;
}

#home-col-left {
  float: left;
  width: 490px;
  padding-bottom: 100px;
}

#home-col-right {
  float: right;
  width: 160px;
  margin-left: 10px;
  padding-top: 27px;
}

#screencast {
  padding: 10px;
  width: 470px;
  float: left;
  border-bottom: 1px solid #333;
  background: #e6e6e6 url(/images/whitepx.png) 0px 0px repeat-x;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  clear: both;
}

#twitter-feed {
  position: relative;
  background: #4c266b;
  padding: 10px;
  width: 140px;
  float: left;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

#twitter-bird {
  width: 42px;
  height: 48px;
  float: left;
  background: url(/images/twitter-bird.png) 0px 0px no-repeat;
}

#twitter-name a {
  float: left;
  color: #d17eff;
  font-size: 14px;
  padding: 20px 0;
  text-decoration: none;
}

#twitter-name a:hover {
  text-decoration: underline;
}

#twitter_update_list li a { /*this is the twitter timestamp */
  position: absolute;
  top: 45px;
  left: 54px;
  width: 115px;
  font-style: italic;
  color: #bbb;
  font-weight: normal;
  text-decoration: none;
}

#twitter_update_list li span {
  float: left;
  width: 140px;
  font-size: 11px;
  line-height: 14px;
  margin-top: -5px;
  color: #fff;
  font-weight: normal;
  overflow: hidden;
}

#twitter_update_list li span a {
  color: #d17eff;
  text-decoration: underline;
  position: relative;
  top: 0;
  left: 0;
  width: auto;
}

#twitter_update_list li.blank {
  width: 140px;
  height: 28px;
  float: left;
  background: url(/images/twitter-blank.png) 0px 0px no-repeat;
}

#copy {
  padding: 10px;
  clear: both;
  float: left;
  color: #fff;
  font-size: 11px;
  width: 80px;
  font-weight: normal;
}

#copy span {
  float: left;
}

#copy a {
  float: left;
}

#about-link {
  float: right;
  padding: 10px;
  font-size: 11px;
  font-weight: normal;
}

/*END Homepage Styles */
/* Inbox Styles */
  
#user-info {
  float: right;
  margin-top: 34px;
}

#user-avatar {
  width: 32px;
  height: 32px;
  float: left;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: url(/images/user-avatar.png) 0px 0px no-repeat;
}

#user-details {
  float: left;
  margin-left: 5px;
}

#user-name {
  font-size: 16px;
  color: #cd7bff;
  float: left;
  clear: both;
}

a#user-number {
  padding-top: 3px;
  font-weight: normal;
  float: left;
  clear: both;
  color: #fff;
  text-decoration: underline;
  text-indent: 24px;
  height: 16px;
  background: url(/images/user-edit-number.png) 0px 1px no-repeat;
}

a#user-number:hover {
  background: url(/images/user-edit-number.png) 0px -18px no-repeat;
}

/* Inbox List */

#calling {
	display:none;
  width: 660px;
  height: 70px;
  float: left;
  background: url(/images/calling.png) 0px 0px no-repeat;
  margin-top: 10px;
}

img#my-voicemails,
img#about-title {
  padding: 10px 0;
}

ul#inbox-list {
  width: 100%;
  float: left;
}

ul#inbox-list li {
	margin-bottom: 5px;
	overflow:auto;
	position:relative;
}

ul#inbox-list li.blank {
  height: 64px;
  float: left;
  font-size: 24px;
  line-height: 64px;
  width: 556px;
  color: #555;
  padding-right: 10px;
	padding-left: 74px;
	background: url(/images/li-blank.png) 0px 0px no-repeat;
}

ul#inbox-list li .meta {
  background: #555;
  -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  height: 64px;
  float: left;
  width: 580px;
  padding-right: 10px;
	padding-left:50px;
}

ul#inbox-list li.new .meta {
  background: #653190;
}

ul#inbox-list li.new {
  background: transparent;
}

.new .new-alert {
  height: 21px;
  width: 21px;
  background: url(/images/new-alert.png);
  position: absolute;
  bottom: -7px;
  right: -7px;
}

.list-right {
  float: right;
}

a.action {
  margin-top: 15px;
  margin-left: 10px;
}

a.actions-play {
  width: 29px;
  height: 34px;
	margin:0px;
  background: url(../images/inbox-actions.png) 0px 0px no-repeat;
	position:absolute; 
	top:15px; 
	left:15px;
	z-index:10;
	text-indent:-9999px;
}

a.actions-play:hover {
  background: url(/images/inbox-actions.png) 0px -34px no-repeat;
}

a.actions-reply {
  width: 36px;
  height: 34px;
  float: left;
  background: url(/images/inbox-actions.png) -29px 0px no-repeat;
}

a.actions-reply:hover {
  background: url(/images/inbox-actions.png) -29px -34px no-repeat;
}

a.actions-delete {
  width: 34px;
  height: 34px;
  float: left;
  background: url(/images/inbox-actions.png) -65px 0px no-repeat;
}

a.actions-delete:hover {
  background: url(/images/inbox-actions.png) -65px -34px no-repeat;
}

.sender-avatar {
  width: 48px;
  position: relative;
  height: 48px;
  float: left;
  margin-left: 10px;
  margin-top: 8px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 3px;
  background: url(/images/sender-avatar.png) 0px 0px no-repeat;
}

.sender-name {
  font-size: 24px;
  height: 64px;
  float: left;
  margin-left: 10px;
  line-height: 64px;
  color: #fff;
  font-weight: normal;
}

.calendar {
  width: 42px;
  float: left;
  height: 48px;
  text-align: center;
  margin-left: 10px;
  margin-top: 8px;
}

.calendar_day {
  width: 42px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  background: #fff;
  color: #555;
  font-size: 24px;
  height: 32px;
  line-height: 32px;
}

.new .calendar_day {
  color: #653190;
}

.calendar_month {
  width: 42px;
  -moz-border-radius-bottomleft: 3px;
  -moz-border-radius-bottomright: 3px;
  background: #999;
  color: #fff;
  font-size: 24px;
  height: 16px;
  line-height: 16px;
  text-transform: uppercase;
  font-size: 12px;
}

.new .calendar_month {
  background: #c395eb;
}

.time {
  color: #fff;
  line-height: 64px;
  float: left;
  margin-left: 10px;
  height: 64px;
}

/* END Inbox List */

/* END Inbox Styles */

/* START SoundManager Styles */

.spectrum-container {
 display:none !important;
}

ul.use-spectrum li.sm2_playing .spectrum-container {
/*
 position:absolute;
 left:0px;
 top:0px;
 margin-left:-266px;
 margin-top:-1px;
*/
 display:block;
 background-color:#5588bb;
 border:1px solid #99ccff;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
}

ul.use-spectrum .spectrum-box {
 position:relative;
 width:255px;
 font-size:1em;
 padding:2px 0px;
 height:1.2em;
 overflow:hidden;
}

ul.use-spectrum .spectrum-box .spectrum {
 position:absolute;
 left:0px;
 top:-2px;
 margin-top:20px;
 display:block;
 font-size:1px;
 width:1px;
 height:1px; /* set to 50px for a thick line, 1px for a thin line, etc. */
 overflow:hidden;
 background-color:#fff;
}

ul#inbox-list li.sm2_playing,
ul#inbox-list li.sm2_paused,
ul#inbox-list li.sm2_playing a {
 color:#fff;
 border-radius:3px;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
}


ul#inbox-list li.sm2_playing,
ul#inbox-list li.sm2_playing:hover {

}

ul#inbox-list li.sm2_paused {

}

ul#inbox-list li.sm2_paused:hover a,
ul#inbox-list li.sm2_paused a {

}

ul#inbox-list li .playing {
	background:#8fe746;
	border:1px solid #8fe746;
	-moz-border-radius-bottomleft:8px;
	-moz-border-radius-bottomright:8px;
	-webkit-border-bottom-left-radius:8px;
	-webkit-border-bottom-right-radius:8px;
	height:40px;
	width:608px;
	margin:64px 0 0 15px;
	position:relative;
  display:none;
}
ul#inbox-list li .playing[style] {
  display:none !important;
}

ul#inbox-list li.sm2_playing .playing,
ul#inbox-list li.sm2_paused .playing  { 
	display:block !important;
	}

ul#inbox-list li .controls {
 display:none;
}

ul#inbox-list li.sm2_playing .controls,
ul#inbox-list li.sm2_paused .controls {
 position:relative;
 display:block;
}

ul#inbox-list.use-peak li.sm2_playing .peak,
ul#inbox-list.use-peak li.sm2_paused .peak {
 display:inline;
 display:inline-block;
}

ul#inbox-list.use-peak li .peak {
 display:none; /* IE 7 */
}

ul#inbox-list li.sm2_paused .controls {
 background-color:#666;
}

ul#inbox-list li:hover .controls .statusbar {
 position:relative;
 cursor:ew-resize;
 cursor:-moz-grab;
 cursor:grab;
}

ul#inbox-list li.sm2_paused .controls .statusbar {
 background-color:#ccc;
}

ul#inbox-list li .controls {
	background-color:#99CCFF;
	margin-bottom:0;
	margin-left:15px;
	margin-top:5px;
	position:relative;
	width:545px;
}

ul#inbox-list li .controls .statusbar {
 position:relative;
 height:14px;
 background-color:#fff;
 border-radius:2px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 cursor:-moz-grab;
 cursor:grab;
}

ul#inbox-list li .controls.dragging .statusbar {
 cursor:-moz-grabbing;
 cursor:grabbing;
}

ul#inbox-list li .controls .statusbar .position,
ul#inbox-list li .controls .statusbar .loading,
ul#inbox-list li .controls .statusbar .annotation {
 position:absolute;
 left:0px;
 top:0px;
 height:14px;
}

ul#inbox-list li .controls .statusbar .position {
  background: url(/images/statusbar-playing.png) 0px 0px repeat-x;
}

ul#inbox-list li.sm2_paused .controls .statusbar .position {
  background: url(/images/statusbar-paused.png) 0px 0px repeat-x;
}

ul#inbox-list li .controls .statusbar .loading {
 background-color:#eee;
}

ul#inbox-list li .controls .statusbar .position,
ul#inbox-list li .controls .statusbar .loading {
 width:0px;
}

ul#inbox-list li.sm2_playing a.sm2_link,
ul#inbox-list li.sm2_paused a.sm2_link {
 margin-right:4.5em; /* room for timing stuff */
}

ul#inbox-list li .timing {
 color:#318606;
 display:none;
 height:18px;
 letter-spacing:0px;
 font:.8em Helvetica;
 font-weight:bold;
 line-height:18px;
 text-align:center;
 overflow:hidden;
/*
background-color:#5588bb;
border:1px solid #99ccff;
-moz-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;

 padding:3px 5px;
 position:absolute;
 right:1em;
 top:1em;
 vertical-align:middle;
 width:auto;
*/

}

ul#inbox-list.use-peak li .timing {
/* right:4.25em; */
}

ul#inbox-list li:hover .timing {
 z-index:2;
}

ul#inbox-list li .timing div.sm2_timing {
 margin:0px;
 padding:0px;
 margin-top:-1em;
}


ul#inbox-list li.sm2_playing .timing,
ul#inbox-list li.sm2_paused .timing {
 display:block;
}

ul#inbox-list li.sm2_paused .timing .sm2_position {
 text-decoration:blink; /* hee hee. first actual appropriate use? :D */
}

ul#inbox-list li.sm2_paused .timing,
ul#inbox-list.use-peak li.sm2_paused .peak {

}

/* peak data */

/* ul#inbox-list ... */

ul#inbox-list li .peak,
ul#inbox-list.use-peak li .peak {
 display:none;
 position:absolute;
 top:5px;
 right:14px;
}


ul#inbox-list.use-peak li .peak {
 display:none;
 zoom:1;
 border:1px solid #5BA138;
 padding:2px;
 -moz-border-radius:4px;
 -khtml-border-radius:4px;
 border-radius:4px;
 background-color:#44A009;
 width:17px;
 height:12px;
 margin-top:0;
}

ul#inbox-list.use-peak li .peak-box {
 position:relative;
 width:100%;
 height:13px;
 overflow:hidden;
}

ul#inbox-list li .peak .l,
ul#inbox-list li .peak .r {
 position:absolute;
 left:0px;
 top:0px;
 width:7px;
 height:50px;
 background:#fff;
 border:1px solid #fff;
 -moz-border-radius:1px;
 -khtml-border-radius:1px;
 margin-top:1em;
}

ul#inbox-list li .peak .l {
 margin-right:1px;
}

ul#inbox-list li .peak .r {
 left:10px;
}

/* SoundManager Styles */

#control-template {
 display:none;
}

#sm2-container { visibility:hidden; }

/* END SoundManager Styles */
/* About Page */
.about-col {
  margin: 5px;
  padding: 5px;
  width: 140px;
  float: left;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #8fe746;
}

.about-avatar {
  width: 32px;
  height: 32px;
  float: left;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.about-avatar.ben {
  background: url(/images/about-ben.png) 0px 0px no-repeat;
}

.about-avatar.dan {
  background: url(/images/about-dan.png) 0px 0px no-repeat;
}

.about-avatar.fred {
  background: url(/images/about-fred.png) 0px 0px no-repeat;
}

.about-avatar.joel {
  background: url(/images/about-joel.png) 0px 0px no-repeat;
}

.about-name {
  float: left;
  margin-left: 5px;
  width: 103px;
  height: 32px;
  line-height: 50px;
  font-size: 14px;
}

.about-name a {
  text-decoration: none;
  color: #318606;
}

.about-name a:hover {
  text-decoration: underline;
}

.about-col p {
  width: 140px;
  padding-top: 3px;
  line-height: 15px;
  float: left;
  color: #151515;
  font-weight: normal;
  clear: both;
}

/* END About Page */
/* Flash Messages */

#flash {
  width: 660px;
  float: left;
}

#flash_success, #flash_failure, #flash_notice {
  float: left;
  width: 630px;
  padding: 15px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

#flash_success {
  background: #8fe746;
  color: #318606;
}

#flash_failure {
  color: #bb0404;
  background: #ff6e86;
}

#flash_notice {
  background: #c395eb;
  color: #2f1543;
}

#errorExplanation {
  float: left;
  width: 620px;
  padding: 10px;
  float: left;
  font-size: 16px;
  margin-bottom: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #c395eb;
  color: #2f1543;
}

#errorExplanation h2, p, ul {
  float: left;
  width: 610px;
  margin: 5px 0;
}

#errorExplanation ul li {
  float: left;
  width: 590px;
  list-style-type: square;
  margin-left: 20px
}

/*END Flash Messages */