/********************************************************************
*	Start: CSS Browser Reset
****************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,table,thead,th,tr,td,tbody{margin:0;padding:0;}
body{font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial, sans-serif;}
a{text-decoration:none;color:black;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul,li,dl,dd,dt{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal;padding:0;margin:0;}
q:before,q:after{content:'';}
abbr,acronym,.help{cursor:help;text-decoration:none;border:0;border-bottom:1px #666 dotted;}
/*****************************
*	End: CSS Browser Reset  
*****************************/

/********************************************************************
*	Start: Site-Specific Base Styles
************************************/
body {font-family:Arial,sans-serif;font-size:12px;line-height:20px;}
a {color:#000;}
h1 {font-size:25px;line-height:30px;}
h2 {font-size:20px;line-height:25px;}
h3 {font-size:18px;line-height:23px;}
h4,h5,h6 {font-size:16px;line-height:20px;}
h1,h2,h3,h4,h5,h6 {font-family:'Yanone Kaffeesatz',"Adobe Caslon Pro","Adobe Garamond Pro",Georgia,serif;font-weight:bold;margin-bottom:5px;}
h1,h2,h3,h4,h5,h6,
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {vertical-align:top;display:block;color:#07497F;color:#FF6600;text-decoration:none;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {color:#f06000;text-decoration:none;}
h1 small,h2 small,h3 small,
h4 small,h5 small,h6 small {font-size:.65em;font-weight:normal;font-style:normal;}
small {font-size:.8em;}
a {color:#07497f;text-decoration:none;}
a:hover {text-decoration:underline;color:#063e6a;}
p,blockquote,ul,ol,dl,table {margin-bottom:10px;}
th,td {vertical-align:top;padding:0 5px 3px 0;}
th {font-weight:bold;}
ul, ol {margin-left:20px;}
ul li {list-style:disc;}
ol li {list-style:decimal;}
dd {border-left:1px solid #BCD6EC;margin-left:0;padding-left:15px;}
input[type=submit],
input[type=button],
button {cursor:pointer;}
pre {background:#fff;}
pre, code {
	font-family:'BitstreamVera',Courier;
	display:block;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-khtml-border-radius:4px;
	border-radius:4px;
	white-space: pre-wrap;
}
code {
	padding:7px 10px !important;
	border:1px solid rgb(200,230,250);
}
pre a, code a {
	padding:0 !important;
	background:none !important;
}
img.alignleft, img.left	{float:left;margin:0 10px 10px 0;}
img.alignright, img.right	{float:right;margin:0 0 10px 10px;}
img.aligncenter, img.center	{margin:10px auto;}
:focus {outline:0;}
button::-moz-focus-inner {border:0;outline:0;padding:0;}
input[type=text], textarea {font-family:Lucida Sans Unicode, Lucida Grande, Verdana, Arial, sans-serif;font-size:14px;}
/*****************************
*	End: Site-Specific Base Styles
*****************************/

/********************************************************************
*	Start: Grids
********************************************************************/
/* Make sure to clear your floats, this does not use the .clearFix method */
.grid {float:left;margin-left:0; !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;border-left:0 !important;border-right:0 !important;}
.grid, .grid-content {_zoom:1;_height:1%;} /* IE */
.grid-1of1{float:none;clear:both;}
.grid-1of2,.grid2of4{width:49.999999%;}
.grid-1of3{width:33.333333%;_width:33.31999999%;}
.grid-2of3{width:66.666666%;}
.grid-1of4{width:24.999999%;}
.grid-3of4{width:74.999999%;}
.grid-1of5{width:19.999999%;}
.grid-2of5{width:39.999999%;}
.grid-3of5{width:59.999999%;}
.grid-4of5{width:79.999999%;}
.grid-content {padding:10px 15px;}
.grid-content > :last-child {margin-bottom:0;}
.grid-first {clear:both;}
.grid-first > .grid-content {padding-left:0;}
* html .grid-first .grid-content {padding-left:0;} /*IE6*/
.grid-last > .grid-content {padding-right:0;}
* html .grid-last .grid-content {padding-right:0;} /*IE6*/
/*****************************
*	End: Grids
*****************************/

/********************************************************************
*	Start: Utils
********************************************************************/
.float-left {float:left;}
.float-right {float:right;}
img.float-left {margin:0 5px 5px 0;}
img.float-right {margin:0 0 5px 5px;}
.clear {clear:both}
span.clear {float:none !important;clear:both !important;margin:0 !important;line-height:0 !important;height:0 !important;font-size:0 !important;display:block;visibility:hidden;overflow:hidden;}
.align-left {text-align:left;}
.align-right {text-align:right;}
.align-center {text-align:center;}
.align-justify {text-align:justify;}
/*****************************
*	End: Utils
*****************************/

/********************************************************************
*	Start: Buttons
********************************************************************/
/* -------------------------------------------------------------- 
  
   buttons.css
   * Gives you some great CSS-only buttons.
   
   Created by Kevin Hale [particletree.com]
   * particletree.com/features/rediscovering-the-button-element

   See Readme.txt in this folder for instructions.

-------------------------------------------------------------- */

a.button, button {
  display:block;
  float:left;
  margin: 0.7em 0.5em 0.7em 0;
  padding:5px 10px 5px 7px;   /* Links */
  
  border:1px solid #13749F;
  border-top:1px solid #67ADCF;
  border-left:1px solid #67ADCF;
  
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  text-shadow:rgba(0,0,0,.33) 1px 1px 3px;

  background-color:#67ADCF;
  font-size:100%;
  line-height:130%;
  text-decoration:none;
  font-weight:bold;
  color:#fff;
  cursor:pointer;
}
button {
  width:auto;
  overflow:visible;
  padding:4px 10px 3px 7px;   /* IE6 */
}
button[type] {
  padding:4px 10px 4px 7px;   /* Firefox */
  line-height:17px;           /* Safari */
}
*+html button[type] {
  padding:4px 10px 3px 7px;   /* IE7 */
}
button img, a.button img{
  margin:0 3px -3px 0 !important;
  padding:0;
  border:none;
  width:16px;
  height:16px;
  float:none;
}


/* Button colors
-------------------------------------------------------------- */

/* Standard */
button:hover, a.button:hover{
  background-color:#5399BF;
  border:1px solid #418BAF;
  border-top:1px solid #3687AF;
  border-left:1px solid #3687AF;
  color:#fff;
}

/* Positive */
body .positive {
  color:#529214;
}
a.positive:hover, button.positive:hover {
  background-color:#E6EFC2;
  border:1px solid #C6D880;
  color:#529214;
}

/* Negative */
body .negative {
  color:#d12f19;
}
a.negative:hover, button.negative:hover {
  background:#fbe3e4;
  border:1px solid #fbc2c4;
  color:#d12f19;
}

/*****************************
*	End: Buttons
*****************************/


/********************************************************************
*	Start: 
********************************************************************/
/* -------------------------------------------------------------- 
   link-icons.css
   * Icons for links based on protocol or file type.
-------------------------------------------------------------- */

/* Make sure the icons are not cut */
a[rel~="external"], a[href^="mailto:"], a[href^="http://"], a[href^="https://"], a[href*="/feed"],
a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"], a[href$=".phps"], a[href$=".rss"], 
a[href$=".rdf"], a[href$=".mp3"], a[href$=".wav"], a[href^="aim:"] {
  padding:2px 18px 2px 0;
  margin:-2px 0;
  background-repeat: no-repeat;
  background-position: right center;
}

/* External links */ 
a[href^="http://"],
a[rel~="external"]	{ background-image: url(../images/link-icons/external.png); padding-right:7px;} 
a[href^="http://local.andyblackwell.com"], 
a[href^="http://dev.andyblackwell.com"],
a[href^="http://www.andyblackwell.com"], 
a[href^="http://andyblackwell.com"]	{ background-image: none; padding:inherit; margin:inherit;}
a[href^="mailto:"]	{ background-image: url(../images/link-icons/email.png); }

/* Files */
a[href$=".pdf"]   { background-image: url(../images/link-icons/pdf.png); padding:2px 18px 2px 0;}  
a[href$=".doc"]   { background-image: url(../images/link-icons/doc.png); padding:2px 18px 2px 0;}  
a[href$=".xls"]   { background-image: url(../images/link-icons/xls.png); padding:2px 18px 2px 0;}
a[href$=".mp3"],  
a[href$=".wav"]   { background-image: url(../images/link-icons/audio.png); padding:2px 19px 2px 0; }  
a[href$=".phps"]  { background-image: url(../images/link-icons/php.png); padding:2px 19px 2px 0;  }  
 
/* Misc */
a[href*="/feed"],
a[href$=".rss"],
a[href$=".rdf"]   { background-image: url(../images/link-icons/feed.png); padding:2px 18px 2px 0;}
a[href^="aim:"]   { background-image: url(../images/link-icons/im.png); padding:2px 18px 2px 0;}


/* Use this class if a link gets an icon when it shouldn't. */
body a.noicon {
	background:transparent;
	padding:0;
	margin:0;
}
/*****************************
*	End: 
*****************************/

/********************************************************************
*	Start: 
********************************************************************/
/*****************************
*	End: 
*****************************/


html, body {height:100%;min-height:100%;}
body {margin:0;height:100%;text-align:center;background:url(../images/body_bg.jpg) center top repeat-x #E7F3FB;
		font-family:Lucida Sans Unicode,Lucida Grande,Verdana,Arial,sans-serif;font-size:13px;line-height:18px;color:#222;}

#TopWrapper {
       width: 100%;
       min-height: 100%;
       height: auto !important;
       height: 100%;
       margin: 0px 0px -200px 0px;
}

#HeaderWrapper,
#MainContentWrapper,
#FooterWrapper {
	text-align:left;
	position:relative;
	clear:both;
	min-width:970px;
}
#Header,
#MainContent,
#ContentBottom,
#Footer {width:950px;margin:0 auto;padding:0 10px;clear:both;}
#Header {
	background: url(../images/splatter.jpg) top right no-repeat;
	height:150px;
	position:relative;
	color:#fff;
}
#Header a {color:#fff;padding-right:0;background:transparent;}
#HeaderLogo {display:block;width:187px;height:123px;}
#Nav {
	position:absolute;
	top:0;
	right:0;
	width:210px;
}
	#Nav a {
		display:block;
		width:55px;
		height:150px;
		float:left;
		padding:0;
		margin:0;
		margin-right:2px;
		background: url(../images/nav.jpg) 0 0 no-repeat;
		color:#fff;
	}
	#Nav a span {
		position:absolute;
		top:-300px;
	}
	#Nav a#NavMusic {
		background-position: 0px 0px;
	}
	#Nav a#NavWebDesign {
		background-position: -110px 0px;
	}
		body.category-music #Nav a#NavMusic,
		#Nav a#NavMusic.current,
		#Nav a#NavMusic:hover {
			background-position: -55px 0px !important;
		}
		body.category-web #Nav a#NavWebDesign,
		#Nav a#NavWebDesign.current,
		#Nav a#NavWebDesign:hover {
			background-position: -165px 0px !important;
		}
#HeaderSubNav {text-align:right;position:relative;line-height:25px;}
#HeaderSubNav ul,
#HeaderSubNav li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
	color:#07497F;
	font-size:14px;
}
	#HeaderSubNav ul {
		position:absolute;
		top:-300px;
        margin-bottom:0 !important;
	}
		#HeaderSubNav ul.current {
			position:relative;
			top:0;
		}
	#HeaderSubNav li a {
		padding:0 0 6px 5px;
		margin-left:5px;
		color:#07497F;
        text-decoration:none;
	}
		#HeaderSubNav li a.alt {
			color:#23a20d;
		}
		#HeaderSubNav li a:hover,
		#HeaderSubNav li a.current {
			background:url(../images/subnav-current.gif) 50% bottom no-repeat;
            text-decoration:none;
		}
		#HeaderSubNav li a.current {
			color:#FF6600;
		}
#MainContentWrapper {
	background:url(../images/body_bg.jpg) center -150px repeat-x #e7f3fb;
	padding:0 0 200px 0;
	min-height:200px;
}
#MainContent {
	clear:both;
	position:relative;
	background: url(../images/content-faux-columns.gif) center top repeat-y;
}
#MainContent h1,
#MainContent h2,
#MainContent h3,
#MainContent h4,
#MainContent h5,
#MainContent h6 {
	text-shadow:rgba(255, 102, 0, .4) .05em .05em .1em;
}
#Primary {width:650px;}
#Sidebar {width:300px;}
	#Sidebar ul {margin:0;}
	#Sidebar li {
		list-style:none;
		margin:0;
		padding:0;
		height:1%;
	}
#Sidebar ul ul, #sidebar ul  ol {margin: 0 0 5px 10px;}
#Sidebar li li li {list-style: inside circle;}
#Sidebar li li li:hover {list-style: inside disc;}
#ContentBottom {background: url(../images/content-faux-columns-bottom.gif) center top no-repeat;height:30px;clear:both;}
#FooterWrapper {
	background:#00284C;
	border-top:1px solid #00192F;
	/*background:url(../images/footer_bg.jpg) top center repeat-x;*/
	padding:15px 0 10px 0;
	margin-top:-200px;
	height:174px;
	width:100%;
}
#Footer {
	text-align:left;
	color:white;
}
#Footer p {color:#599dcb;}
#Footer h1,#Footer h2,#Footer h3,#Footer h4,#Footer h5,#Footer h6 {color:#599dcb;}
#Footer h5 {
	margin-bottom:3px;
}
#Footer,
#Footer a {
	color:#4b88b2;
}
#Footer .copyright {
	padding:10px 0;
	border-top: 1px solid #002143;
	text-align:center;
	opacity:.4;
	-moz-opacity:.4;
	-webkit-opacity:.4;
	filter:alpha(opacity=40);
}
#Footer .copyright:hover {
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	filter:alpha(opacity=100);
}
#Footer .copyright p {
	color:#599dcb;
	margin:0;
	padding:0;
	background:transparent;
}
#Footer ul {
	margin:0 0 1.5em 0;
}
	#Footer li {
		margin:0;
		list-style:none;
	}
	#Footer ul.xoxo li,
	#Footer ul.blogroll li {
		display:block;
        float:left;
        width:49.99999%;
	}
.tab-content,
.contentBox {
	background:rgb(240,245,250);
}
.post .post-title {border-bottom:1px solid #FFCDAB;margin-bottom:8px;}
.post .post-title a {display:block;margin:0;}
.post .post-content, .contentBox {
	margin:10px 0;
}
.post .post-content > :last-child, .contentBox > :last-child {
	margin-bottom:0;
}
.post .post-edit,
.post .post-date-and-author {
	display:block;
	margin-top:-8px;
	color:#5399BF;
}
.post {margin-bottom:25px;} 
.postmetadata {color:#5399BF;}
.post-thumbnail,
.post-thumbnail-teaser {display:block;height:150px;margin:0 0 5px 0 !important;
						border-radius:5px;-moz-border-radius:5px;-webkitborder-radius:5px;
						box-shadow:0 0 5px rgba(0,0,0,.33);-moz-box-shadow:0 0 5px rgba(0,0,0,.33);-webkit-box-shadow:0 0 5px rgba(0,0,0,.33);}
.post-thumbnail-teaser {height:75px;}
a.post-thumbnail:hover,
a.post-thumbnail-teaser:hover {box-shadow:0 0 5px rgba(0,0,0,.33),inset 0 0 10px rgba(0,0,0,.45);
							-moz-box-shadow:0 0 5px rgba(0,0,0,.33),inset 0 0 10px rgba(0,0,0,.45);
							-webkit-box-shadow:0 0 5px rgba(0,0,0,.33),inset 0 0 10px rgba(0,0,0,.45);}
.category-description {margin-bottom:20px;padding-left:20px;color:#5399BF;border-left:1px solid  rgb(200,230,250);}
.heading,
.contentBox .header {
	letter-spacing:.06em;
	color:#07497f;
}
.tab-content > div :first-child,
.contentBox :first-child {
	padding-top:0;
	margin-top:0;
}
.tab-content > div :last-child,
.contentBox :last-child {
	margin-bottom:0;
}
.aLeft {text-align:left;}
.aCenter {text-align:center;}
.aRight {text-align:right;}
.clear {clear:both;}
.hidden {display:none;}
#wp-calendar {margin:0;}
input#searchsubmit,
input#s {
	font-size:13px;
	padding:5px;
	padding-left:16px;
	border:1px solid rgb(200,230,250);
	color:#07497f;
	background: url(../images/search.jpg) #fff no-repeat 4px center;
}
	input#s:focus {outline:0;}
	input#s {
		-moz-border-radius:7px 0 0 7px;
		-webkit-border-top-left-radius:7px;
		-webkit-border-bottom-left-radius:7px;
		border-radius:7px 0 0 7px;
		width:185px;
	}
	input#searchsubmit {
		-moz-border-radius:0 7px 7px 0;
		-webkit-border-top-right-radius:7px;
		-webkit-border-bottom-right-radius:7px;
		border-radius:0 7px 7px 0;
		margin-left:-5px;
		padding:4px;
		background:#F0F0F0;
	}
	* html input#searchsubmit {width:49px;}
	*+html input#searchsubmit {width:49px;} 
	input#searchsubmit:hover {
		background:#07497F;
		border:1px solid #07497F !important;
		color:#fff;
	}
#searchform:hover input#s,#searchform:focus input#s,
#searchform:hover input#searchsubmit,#searchform:focus input#searchsubmit {
	border:1px solid #A4D1EF;
}
.widget_archive li ul,
.widget_categories li ul {margin-left:7px;}
.widget-title {line-height:1.3em;margin:0;}
.tddrecentposts .sidebardate {display:none;}
.tddrecentposts dl {margin:0;}
.tddrecentposts dt {font-weight:normal;}
.tddrecentposts dd {margin:0;padding-left:10px;font-size:10px;color:#4F7F9F;border:0;}
.widget_ilike a {background:transparent;padding:0;margin:0;}
.widget ul {margin-left:0 !important;}
.widget_tag_cloud a {margin:0 5px 2px 0;padding:0;}
#Sidebar .widget {margin:0;}
#Sidebar .widget_search {padding:0;border:0;background:transparent;}
#Sidebar hr {border:0;border-bottom:1px solid #D9EEFC;border-top:1px solid #fff;margin:10px -14px;background:none;color:#F7FCFF;font-size:0;height:0;}
.amzn_wdgt a {
	background:transparent;
	padding:0;
	margin:0;
}
.amzn_wdgt .niftycorners , .amzn_wdgt .hd_input, .amzn_wdgt .wdgt_ft {display:none;}
.amzn_wdgt .wdgt_pgn {padding:3px 0;}
.amzn_wdgt {
	background:#EFF9FF;
	border:1px solid #bcd6ec;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-khtml-border-radius:4px;
	padding-bottom:3px;
}
.widget_pages .page_item {float:left;padding-right:5px !important;font-size:15px;}
.widget_pages .current_page_item {font-weight:bold;}
.widget_pages .widget-title {display:none;}
.widget_recent_entries li {clear:both;}
.widget_recent_entries li a {display:block;}
.widget_recent_entries li a img {float:right;margin:-2px -2px 3px 5px;border:1px solid #fff;padding:1px;}
.widget_recent_entries li a:hover img {border:1px solid #8EB6CF;}
.screen-reader-text {position:absolute;left:-10000px;}
.comments,
ol.trackbacks {margin-left:0;}
.comments li,
ol.trackbacks li {list-style:none;}
.comment,
.trackback {clear:both;padding:10px;margin:0;border-bottom:1px solid #eee;}
.comment p.avatar {padding-right:10px;margin-bottom:0;float:left;width:40px;}
.comment p.author {padding-right:10px 0;margin-bottom:0;float:left;width:130px;}
.comment .date {line-height:1.5em;}
.comment .quote {float:left;width:440px;}
.comment .quote > :last-child {margin-bottom:0;}
.comment {position:relative;background:no-repeat 25px 0;}
.comment .comment-reply-link {font-size:10px;position:absolute;bottom:-1px;right:0;padding:2px 5px;background:#fafafa;border:1px solid #eee;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;}
.comments {margin:10px -14px;border-top:1px solid #eee;}
.comments .comment {padding-left:14px;padding-right:14px;}
.comments .thread-odd {background-color:#fafafa;}
.comments .children {margin:0;}
.comments .children .comment {padding-left:40px;}
.comments .children .comment .quote {width:400px;}
.comments .children .comment {}
.comments .post-author-comment {background-color:#EFF9FF;}
.comments .post-author-comment p.author {font-weight:bold;}
.comments .post-author-comment p.author small {font-weight:normal;}
#comments .pagination {line-height: 25px;vertical-align:top;text-align:center;position:relative;top:-5px;margin:5px 0;}
#comments .pagination .page-numbers {padding:3px 4px;border:1px solid #eee;background:#fafafa;}
#comments .pagination .page-numbers:hover {border:1px solid #e3e3e3;background:#f1f1f1;text-decoration:none;}
#comments .pagination .current {border:1px solid #e3e3e3;background:#f1f1f1;text-decoration:none;font-weight:bold;}
#respond {margin-top:5px;}
.comment-header {font-size:20px;}
.comment-meta {float:right;line-height:25px;font-size:11px;}
.comment-meta a {font-weight:bold;}
.comment-meta, .comment-meta a, .comment-meta a:hover {color:#5399BF;}
#commentform {padding:10px;background:#EFF9FF;color:#5399BF;border:1px solid #C8E6FA;position:relative;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
#commentform p {margin-bottom:0;}
#commentform p.comment-instructions {position:absolute;top:10px;right:10px;line-height:25px;}
#commentform p.comment-instructions abbr {color:#5399BF;border-color:#5399BF;}
#commentform table {margin-bottom:0;width:100%;}
#commentform th {font-weight:normal;}
#commentform th small {font-size:10px;font-style:italic;}
#commentform table th,
#commentform table td {width:33%;}
#commentform table td input {width:93%;}
#commentform input#author,
#commentform input#email,
#commentform input#url {border:1px solid #C8E6FA;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:5px;}
#commentform h3 {text-shadow:none;-moz-text-shadow:none;-webkit-text-shadow:none;}
#commentform label {color:#5399BF;}
#commentform textarea {width:589px;height:50px;border:1px solid #C8E6FA;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:5px 4px;}
/*#commentform textarea:focus {height:200px;}*/
#commentform .comment-submit span {float:left;margin:10px 0;line-height:20px;}
#Sidebar .amazon_widget {margin-left:-9px;margin-right:-14px;width:292px;height:230px;overflow:hidden;}

#MainContent .syntaxhighlighter, 
#MainContent .syntaxhighlighter div, 
#MainContent .syntaxhighlighter code, 
#MainContent .syntaxhighlighter table, 
#MainContent .syntaxhighlighter table td, 
#MainContent .syntaxhighlighter table tr, 
#MainContent .syntaxhighlighter table tbody {line-height:18px !important;}
.syntaxhighlighter:focus,
.syntaxhighlighter:hover {width:932px !important;}







/*

 SoundManager 2: "page as playlist" example
 ------------------------------------------
 http://schillmania.com/projects/soundmanager2/

*/

.spectrum-container {
 display:none;
}

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.playlist {
 list-style-type:none;
 margin:0px;
 padding:0px;
 margin-bottom:10px;
 border-radius:5px;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 background-color:#F7FCFF;
 border:1px solid #D9EEFC;
}

ul.playlist li {
 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 position:relative;
 display:block;
 width:auto;
 font-size:15px;
 color:#666;
 padding:0.25em 0.5em 0.25em 0.5em;
 border:none;
 letter-spacing:-1px; /* ZOMG WEB X.0. ;) */
 background-color:#F7FCFF;
 border-top:1px solid #fff;
 border-bottom:1px solid #D9EEFC;
 -webkit-transition-property: hover;
 -webkit-transition: background-color 0.15s ease-in-out;
}
ul.playlist li:first-child {
	border-top:0;
	border-radius-topLeft:5px;
	border-radius-topRight:5px;
	-moz-border-radius-topLeft:5px;
	-moz-border-radius-topRight:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
}
ul.playlist li:last-child {
	border-bottom:0;
	border-radius-bottomLeft:5px;
	border-radius-bottomRight:5px;
	-moz-border-radius-bottomLeft:5px;
	-moz-border-radius-bottomRight:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
}

ul.playlist li a {
 display:block;
 text-decoration:none;
 font-weight:normal;
 font-size:15px;
 outline:none;
 position:relative;
 z-index:2;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused,
ul.playlist li.sm2_playing a,
ul.playlist li.sm2_paused a {
 color:#fff;
 border:0;
 background-image:none;
}

ul.playlist li:hover {
 background-color:#EFF9FF;
}


ul.playlist li.sm2_playing,
ul.playlist li.sm2_playing:hover {
 background-color:#5399BF;
}

ul.playlist li.sm2_paused {
 background-color:#8EB9CF;
}
ul.playlist li.sm2_paused:hover {
 background-color:#81B5CF;
}

ul.playlist li.sm2_playing:hover a,
ul.playlist li.sm2_paused a {
 color:#fff;
}

ul.playlist li .controls {
 display:none;
}

ul.playlist li .peak,
ul.playlist.use-peak li .peak {
 display:none;
 position:absolute;
 top:0.55em;
 right:0.5em;
}

ul.playlist li.sm2_playing .controls,
ul.playlist li.sm2_paused .controls {
 position:relative;
 display:block;
}

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

*+html ul.playlist.use-peak li .peak {
 display:none; /* IE 7 */
}

ul.playlist li.sm2_paused .controls {
 background-color:#fff;
}

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

ul.playlist li.sm2_paused .controls .statusbar {
 background-color:#ccddff;
}

ul.playlist li .controls {
 position:relative;
 margin-top:0.25em;
 margin-bottom:0.25em;
 background-color:#99ccff;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

ul.playlist li .controls .statusbar {
 position:relative;
 height:0.5em;
 background-color:#ccddff;
 border:2px solid #fff;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 overflow:hidden;
 cursor:-moz-grab;
 cursor:grab;
}

ul.playlist li .controls.dragging .statusbar {
 cursor:-moz-grabbing;
 cursor:grabbing;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading,
ul.playlist li .controls .statusbar .annotation {
 position:absolute;
 left:0px;
 top:0px;
 height:0.5em;
}

ul.playlist li .controls .statusbar .position {
 background-color:#317B9F;
 border-right:3px solid #317B9F;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

ul.playlist li.sm2_paused .controls .statusbar .position {
 background-color:#81B5CF;
 border-color:#81B5CF;
}

ul.playlist li .controls .statusbar .loading {
 background-color:#EFF9FF;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading {
 width:0px;
}

ul.playlist li.sm2_playing a.sm2_link,
ul.playlist li.sm2_paused a.sm2_link {
 margin-right:4.55em; /* room for timing stuff */
}

ul.playlist li .timing {
 position:absolute;
 display:none;
 text-align:right;
 right:1em;
 top:.75em;
 width:auto;
 height:1em;
 padding:3px 5px;
 border:1px solid #67ADCF;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 letter-spacing:0px;
 font:9px "lucida console",courier,system;
 line-height:1em;
 vertical-align:middle;
}
ul.playlist li.sm2_paused .timing {border-color:#B3DBEF;}

ul.playlist.use-peak li .timing {
 right:4.25em;
}

ul.playlist li:hover .timing {
 z-index:2;
}

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

ul.playlist li.sm2_playing .timing,
ul.playlist li.sm2_paused .timing {
 display:block;
}

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


/* peak data */

/* ul.playlist ... */

ul.playlist.use-peak li .peak {
 display:none;
 zoom:1;
 border:1px solid #99ccff;
 padding:2px;
 height:0.55em;
 -moz-border-radius:4px;
 -khtml-border-radius:4px;
 border-radius:4px;
 background-color:#5588bb;
 width:0.8em;
 height:0.55em;
 margin-top:-3px;
}

ul.playlist.use-peak li .peak-box {
 position:relative;
 width:100%;
 height:0.55em;
 overflow:hidden;
}

ul.playlist li .peak .l,
ul.playlist 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.playlist li .peak .l {
 margin-right:1px;
}

ul.playlist li .peak .r {
 left:10px;
}

#control-template {
 display:none;
}