/* --------- general set up ----------- */

body { background: #771865 url(http://static.yuku.com/userskins/bypass/img/music/splatbass/main-bg.gif) no-repeat bottom right fixed; color: #fff; }
a { color: #fff;  text-decoration: none; }

/* --------- common elements ----------- */
	
/* pager area */
.pager { height: 8px; }
.pager-list { float: left; margin-right: 5px;}
.pager-total { float: left; }
.pager-jump { float: right; }
form { margin: 0 0 0 0; }


/* --------- layout ----------- */

.box { 
border: 1px solid #000;
opacity: .9;
background: #5E1350 url(http://static.yuku.com/userskins/bypass/img/music/splatbass/bg1.gif) no-repeat bottom right; border-bottom: 12px solid #000; }

.onionskin1 { 
background: url(http://static.yuku.com/userskins/bypass/img/music/splatbass/bg2.gif) no-repeat 0px 20px; 
}

.boxbody { 
padding:  0 8px 10px 10px; 
margin-top: -10px; 
} 

.boxheading { background: url(http://static.yuku.com/userskins/bypass/img/music/splatbass/header-tile.gif) repeat-x bottom right;}
.boxheading h1, .boxheading h2, .boxheading h3 { 
padding: 15px 0px 17px 10px; 
color: #fff;
background: url(http://static.yuku.com/userskins/bypass/img/music/splatbass/header-right.gif) no-repeat bottom right
}

.column_b { width: 450px; }

#outer {
	width: 760px;
	padding-top: 10px;
	position: relative;
	margin: auto;
	}

* html #outer { width: 780px; }

/* --------- end layout ----------- */


/* --------- font module ----------- */

/* set font family and starter font size */
body { font-size: 62.5%; font-family:  verdana, san-serif; }
html>body { font-size:10px }

/* set overall forum width, and BASE font size - change THIS value to change all fonts larger/smaller (1.0em = 10px, 1.2em = 12px, etc) */
.wrapper { margin: auto; font-size: 1em; }

/* set heading font sizes ( em is a proportional size, like percentage, so to change all sizes, change the BASE font size) */
h1, h2, h3 {
	font-size: 1.2em;
	}

/* --------- end font module ----------- */

/* --------- button module ----------- */

/* all buttons */
a.button, .button { padding: 2px; border: 1px solid #111; 
border-color: #222 #444 #444 #222; 
background: #BD68AC; 
color: #000; 
}

.button.edit span, .button.edit a, .button.edit, a.button.edit { background: #000; color: #BD68AC; font-size: 9px; border: 0px solid #000;}

.button:hover, a.button:hover { background: #333; color: #fff; }

/* voting buttons */
.voting .button { display: block; }

/* user interact buttons in userprofile */
.button.interact { display: block; margin-right: 4px;}
.button.interact span { color: #000; }

.button.interact:hover span { color: #333; }

/* popup buttons */
.interact-display li { margin-top: 2px; }

#userinteract-popup { font-size: 1px;  }
#userinteract-popup span { font-size: 10px; }

/* --------- end button module ----------- */

/* common stuff */
p.user-avatar { height: 80px;}

/* ----- individual blocks and elements ----- */
/* --------- user profile ----------- */

.userstats, #userinteract { margin-top: 10px;}
 
/* this is making the userstats neat and compact */
.userstats th { 
	white-space: nowrap;  
	font-size: .9em; 
	text-transform: lowercase;;
	}

.userstats td { 
	vertical-align: middle; 
	text-align: center;
	background: #BD68AC;
opacity: .8;  
	}

/* --------- end userprofile area ----------- */


/* ------ comments ------- */
.comments-block h2 .leave-a-comment { display: none;}



ol.comments-container .post { border-top: 1px solid #000; padding-top: 10px}

ol.comments-container .avatar-block {
	margin-top: 1.8em; 
}

p.comment-control { 
position: relative; 
text-align: left;
}

ol.comments-container .edit {
	position: relative;
	top: 0px;
float: right;
}

ol.comments-container .date {
	position: relative;
	top: 10px;
	left: 0px;
	opacity: 0.5;
}

ol.comments-container .date:before {
content: "posted on: ";
font-size: .9em;
}



/* ------ my recent posts ------- */
td.type, td.date, th.type, th.date { width: 10%; text-align: center;}
td.title, th.title { width: 70%;}

/* --------- general 'hacks' for IE ----------- */


/* this is to ensure that large images don't stretch column a blocks */
* html .column_a .html-block .boxbody, * html .column_a .miniprofile-block .boxbody { width: 270px; overflow-x: auto }

/* this is to ensure that large images don't stretch the column b blocks */
* html #outer .column_b .html-block .boxbody { width: 420px; overflow-x: auto; }

/* this is to ensure that any user added divs don't trigger the peekaboo or creeping text bug in IE */
div { height: 0;}
html>body div { height: auto; }