/* it's a skin. Oh yes it is. */
/* by alison */
/* called metro */
/* use it, change it, make it yours. */


body, html { color: #222; background: #000; }

#outer {
width: 750px;
padding: 10px;
margin: auto;
}

.box {background: url(http://static.yuku.com/userskins/bypass/img/metro/bg.gif) repeat top left; }
.onionskin1 {background: url(http://static.yuku.com/userskins/bypass/img/metro/header-tile.gif) repeat-x top left; }
.onionskin2 {background: url(http://static.yuku.com/userskins/bypass/img/metro/header-left.gif) no-repeat top left; }
.onionskin3 {background: url(http://static.yuku.com/userskins/bypass/img/metro/header-right.gif) no-repeat top right; }
.boxbody { background: url(http://static.yuku.com/userskins/bypass/img/metro/footer.gif) repeat-x bottom right;}

/* navigation bar */

.mgr-navigation-sliver { color: #ccc; }

.mgr-navigation-sliver a:link { color: #ccc; }

div.mgr-navigation-sliver a:visited { color: #ccc; }

div.mgr-navigation-sliver a:hover { color: #fff; }


/* --------- 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, .pager-button {
padding: 2px; 
border: 1px solid #111; 
border-color: #222 #444 #444 #222; 
background: #d1d1d1; 
}
 
/* gallery button */
#wrapper .gallerylink { margin: 8px 0px; padding: 3px; }

/* edit buttons */
.button.edit { padding: 0; border: 0; background: none; font-size: .8em; }
.button.edit span { font-size: .9em; }

.button:hover, a.button:hover { background: #777777; color: #000; }

/* content footer buttons */
.contentfooter .button { background: transparent; }


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

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



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

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

.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;
	}

a { text-decoration: none; }

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


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


/* box elements */

.contentfooter {
text-align: right;
font-size: 90%;
color: #fff;
font-family: verdana, "Trebuchet MS", verdana, san-serif;
letter-spacing: 2px;
font-weight: normal;
padding: 4px 5px;
}


/* main content within box */
.boxbody { padding: 0 0 10px 0; }
.recentposts-block .boxbody, .html-block .boxbody {padding: 5px 5px 10px 5px;}
.miniprofile-block .boxbody { padding: 0px 0px 10px 5px; }

#wrapper .links-block ol li { padding: 4px 6px;}
.friends-block h3, .friends-block ul { margin: 5px; }

.boxheading  {
padding: 30px 0px 20px 80px;
color: #fff;
font-family: verdana, "Trebuchet MS", verdana, san-serif;
letter-spacing: 2px;
font-weight: normal;
}


.boxheading h1 a,
.boxheading h2 a {
	right: 2em;
	top: -2.5em;
color: #000;
}

p.user-avatar  { height: 80px; }

/* links */
a { color: #333; }

.boxheading a { color: #fff; text-decoration: none; }


/* lists */
#wrapper li, #wrapper p { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

#wrapper li, .recentposts-block td, .recentposts-block tr {
padding: 2px;
color: #fff;
border-top: 1px solid #777777;
border-bottom: 1px solid #000;
}

#wrapper li:hover, .recentposts-block tr:hover { background: #888888; }

#wrapper #userinteract li, #gallery_navbutton li { 
border: 0 0 0 0; 
background-color: transparent; 
background-image: none; 
padding: 0 0 0 0;
margin: 0 0 0 0;
}

.recentposts-block table { padding: 0; border-collapse: collapse}

#gallery_navbutton { height: 40px; list-style: none; width: 100%;}
#gallery_navbutton li { float: left; width: 25%; border: 0px solid #fff; }


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

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

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

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

ol.comments-container .date {	
	opacity: 0.5;
}

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

a.button.blog-post{ background: transparent; border: 0px; font-size: .8em; right: 20px; }

#blog_post .control-box .boxbody, #blog_post .control-box .onionskin1, #blog_post .control-box .onionskin2, #blog_post .control-box .onionskin3, 
#blog_post .control-box { background: transparent; }

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


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

/* this is to ensure that large images don't stretch the column b blocks */
#outer .column_b .html-block .boxbody { width: 425px; 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; }


/* copyleft 2006 to moi. Feel free to totally massacre this profile if that's what takes your fancy. After all, it's your profile that's gonna look like something the cat dragged in! But seriously now folks, if you should require help, or want to change the colour, just let us know at skins.yuku.com */

/* edited - 2/5/09 - Ari */