/* eversblue by alison.  */

/* ---------------------------------- */
/* default set up */

/* ------------ font module and basic settings --------- */
/* ------ 76% and 12px or 62.5% and 10px ------ */
* html body, body { font-family: "Trebuchet MS", "Tahoma", Arial, sans-serif; }


body { font-size: 12px; } /* for all browsers (the good ones, that is) */
* html body, *body { font-size: 76%; } /* for the IE's */

#wrapper { font-size: 1em; }

/* em is a relational size, so all these sizes are relative 
to the starter size  (which is currently 12px) */
h1 { font-size: 1.4em; font-weight: normal; }
h2 { font-size: 1.3em; font-weight: normal; }
h3 { font-size: 1.2em; font-family: "arial", sans-serif; font-weight: normal;}
h4 { font-size: 1.2em;  font-weight: normal;}
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
p { font-size: 1em; }

p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0}
p { margin-bottom: 8px; }

table { empty-cells: show; }
 .bread-crumbs li { white-space: nowrap; }
/* ----------------- forms ------------------- */

form { margin: 0; padding: 0;}

input { 
border: 1px solid #000; 
background: #C0C8E9; 
color: #000; 
font-size: .9em;
}

.admin-control input,
.kudos input { 
border: none; 
background: none; 
}


label { margin-right: 10px; }

/* ---------------- link colours and details ---------------- */
a { color: #666; text-decoration: none; }
.category-box td a { color: #666;}

.post-content a { font-weight: bold; color: #368F8F;}


/* ------------------ generic layout module --------------------- */
body { background: #C0C8E9; color: #000;  }

/* add a bit of layout... */
#wrapper { margin: auto;  width: 90%; }

/*
.tl { background: url(http://static.yuku.com/domainskins/bypass/img/eversblue/blue/corner-tl.gif) no-repeat left top; }
.tr { background: url(http://static.yuku.com/domainskins/bypass/img/eversblue/blue/corner-tr.gif) no-repeat right top; }
.br { background: url(http://static.yuku.com/domainskins/bypass/img/eversblue/blue/corner-br.gif) no-repeat right bottom; }
.bl { background: url(http://static.yuku.com/domainskins/bypass/img/eversblue/blue/corner-bl.gif) no-repeat left bottom; 
padding: 10px;
}
*/

#header h2 { color: #fff; font-size: 5em; }
#header img { float: left;}


#pagecontent { 
clear: both;
}

/* there are boxes, and then there are boxes. 
Some boxes are special and hold the page content. 
Those ones are .forum-box, .category-box, .discussion-box  */

.box { 
position: relative;
background: #fff url(http://static.yuku.com/domainskins/bypass/img/eversblue/blue/header-tile.gif) 0 0 repeat-x;
}

/* the borders in the onionskins are just for show, take them out - experiment.
you can use the onionskins to make triple borders with tiled images for example
don't forget to add padding too if you want to do that */

.onionskin1 { 
background: url(http://static.yuku.com/domainskins/bypass/img/eversblue/ltblue/header-left.gif) left top no-repeat;
}

.onionskin2 { 
background: url(http://static.yuku.com/domainskins/bypass/img/eversblue/ltblue/header-right.gif) right top no-repeat;
}

.onionskin3 {
border-bottom: 3px solid #000;
}

.boxbody { 
padding: 5px 10px 10px 10px;
background: #fff url(http://static.yuku.com/domainskins/bypass/img/eversblue/white/shadow-tile.gif) left top repeat-x;
border: 1px solid #000;
border-width: 0px 1px;
}


td.poster-detail, td.post-content, .discussion-box .first td.post-content, .discussion-box .first td.poster-detail {
background: #fff url(http://static.yuku.com/domainskins/bypass/img/eversblue/white/shadow-tile.gif) left top repeat-x;
}

/* for the following boxes, there are tables inside boxbody, 
so we want the padding on the table, not the boxbody */

.category-box .boxbody, 
.forum-box .boxbody { 
background: #495CA8;
padding: 0 0 0 0;
}

.jump-box .boxbody, .discussion-box .boxbody { 
background: none;
padding: 0 0 0 0px;
}

/* the topics needs something slightly different... */
.discussion-box .onionskin3 { 
padding-top: 8px; 
}


/* ----------------- end generic layout module  --------------------------- */

/* ----------------- override some stuff...  --------------------------- */

.control-box, .control-box .onionskin1, .control-box .onionskin2, .control-box .onionskin3, .control-box .boxbody { border: none; background: none;}
.control-box .boxbody { padding: 0; }

.jump-box, .jump-box .onionskin1, .jump-box .onionskin2, .jump-box .onionskin3, .jump-box .boxbody { border: none; background: none;}
.jump-box .boxbody { padding: 0; }

.control-box .boxbody {
background: transparent;
}

.announcement-box .onionskin3 { padding-top: 25px;
}

.announcement-box .boxbody {
position: relative;
border-top: 1px solid #000;
}


.announcement-box table { background: #fff; }
.announcement-box td { padding: 0 10px;}

/* ----------------- / override some stuff...  --------------------------- */


/* ----------------- heading module ---------------------- */

/* headings all over the place */
.boxheading { 

margin-bottom: 0px;
padding: 5px; 
text-align: center;
border-bottom: 1px solid #000;
}

.boxheading a { color: #fff; }

/* because this one looks bad when centered */
.tool-box .boxheading { text-align: left; }

/* there are more things you can do to headings in various places */

/* --------------------- end  heading module ------------------------- */

/* ------------------ inner layout module - this is for inside the content areas, to give the 3D look -- */ 
/* ------------------ You can omit this is you don't want it -- */

/* generic td styles */

/* central borders */
td { 
background: #fff;
}

/* this makes table headings smaller than the rest */
thead td, th { 
font-size: .9em; 
padding: 1px 4px;
color: #fff;
}

thead td a, th a {
color: #fff;
}

tbody td { 
padding: 4px;
text-size: 1em; 
}
 
/* I think it looks better this way... */
th.latest, th.forum { text-align: left;}

.discussion-box table { margin: 0 0 0 0; }

/* specific td styles */

/* special styles for the outer cells */
/* across the top */
.category-box th, .category-box th.status,
 .forum-box th, .lead th, .first th { 
border-bottom: 1px solid #000; 
}

.first td { 
background-image: url(http://static.yuku.com/domainskins/bypass/img/eversblue/white/shadow-tile.gif);
background-position: left top;
background-repeat: repeat-x;
}

.discussion-box .first td { background: #fff;}
.discussion-box .reply th { 
background: #6777B7;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}



/* down the sides 
th.firstcol { border-left: 1px solid #495CA8;}  not sure why I need this */

/* and it looks better this way */
.post-tools, .poster-interact { border-top: none; }


/* --------------------- end  inner layout module ---------------------- */



/* --------------- extra bits ------------------ */

/* --------------- common classes ----------------*/
/* in other words, classes that are used on more than one page */
p.user-name { text-align: left; white-space: nowrap; } 

.subscription-links .email { border: 0; padding: 0; }

.social-links select { 
height: 16px;
border: 1px solid #333; 
padding: 2px; 
}

.social-links option { 
border-bottom: 1px dotted #333;
background: #eee; 
}

/* --------------- directory page ------------------ */
/* this is to close up the big gaps on the main page */
.category-box p { margin-bottom: 0px; }
p.moderators { margin-top: 0;}

/* make this a bit bigger */
p.description { font-size: 1.1em; }


/* --------------- forum page ----------------*/

/* to close up gaps */
.forum-box td p { margin: 0; padding: 0;}
.topics { vertical-align: middle; }


/* -------------------- topics ------------------- */

/* the thread is made up of a ul and li tags, with a table in each li tag */
ul.thread, ul.thread table { margin: 0; padding: 0;}
ul.thread li { margin: 0px; padding: 0; background: #fff; }
ul.thread li.lead { background: none; }
ul.thread li table { margin: 0 0 0 0; }


/* ---------------- posts -------------------- */

p.user-avatar, p.user-avatar img { width: 100px; height: 100px; text-align: left;}

.poster-name { padding-top: 10px; }
.poster-name .user-name { margin: 0;}
h2.post-title { text-align: left; }

.post-number {margin-right: 10px;} 

.post-content { vertical-align: top; }

.edit-info { text-align: right; padding-bottom: 10px; font-style: italic; font-size: .9em; }

blockquote { border: 2px solid #9BC2C6; border-width: 2px 1px; background: #eee; padding: 5px; margin: 5px 0px;}


/* user section */
.avatar-block p { font-size: .9em; padding: 0; margin: 0 0 0 0 }

.date { 
opacity: .7;
filter: opacity: 70;
}




/* in-post buttons - reply, quote, edit, report, delete, etc. They can be images, or just css. */
.post-controls a.button {
padding: 1px 3px;
margin: 2px 5px;
}

.reply-tools {
padding-right: 10px;
}

.post-controls .reply, .post-controls .quote  {
float: right;
margin-top: 5px;
}

.post-controls .edit, .post-controls .delete { margin-top: 5px;}

/* reply area */
.reply-body textarea { 
color: #000; 
border: 1px solid #fff; 
background: #fff;
}

.form-buttons-holder input {
background: url(http://static.yuku.com/domainskins/bypass/img/ipop/searchbutton.gif) no-repeat;
height: 22px;
width: 90px;
padding: 0;
font-size: .95em; 
border: 0 ;
margin: 5px 0px 5px 0px;
}


/* ---------------------- pager module ---------------------- */

.pager-holder { padding: 0; }
.pager-list { margin-left: 0px;}

.pager {
font-size: .9em;
color: #fff;

}

.pager a {
text-decoration: none;
color: #fff;
background: #818EC3;
}
	
.pager a:hover, .pager a:active { color: #000; }

.pager-total {
border: 1px solid #000;
padding: 2px;

}


.pager-list div {
border: 1px solid #000;
padding: 2px 3px;
background: #818EC3;
}

.pager-list div.ellipsis { background: none;
color: #000;
}

.current {
background: #fff;
color: #000;
}

.pager input { background: #5364AD; border: 1px solid #000; }

/* --------- floating mba icon module -------- */
.status { position: relative; }


.status img.icon-mba {
position:relative;
z-index: 40;
top: 20px;
left: 4px;
}

/* --------- / floating mba icon module -------- */

.feeds img { width: 10px; height: 10px; }


/* ------------ buttons ---------- */

#search_topic a.button, .forum-box a.button, #forum_view a.button, #forum_viewtopic a.button, .dropdown {
background: url(http://static.yuku.com/domainskins/bypass/img/eversblue/ltblue/button-large.gif) no-repeat 50% 0;
width: 100px;
height: 20px;
text-align: center; 
padding-top: 2px;
padding-right: 2px;
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: .9em;
}

html > body #search_topic a.button, 
html > body .forum-box a.button, 
html > body#forum_view a.button, 
html > body#forum_viewtopic a.button, 
html > body .dropdown {
padding-top: 4px;
} /* IE7 is probably going to read this and look bad */



.dropdown {
background: url(http://static.yuku.com/domainskins/bypass/img/eversblue/ltblue/button-dropdown.gif) no-repeat 50% 0;
width: 120px;
}

#forum_viewtopic .discussion-box .post-tools a.button, .poster-interact .dropdown {
background: url(http://static.yuku.com/domainskins/bypass/img/eversblue/ltblue/button-small.gif) no-repeat 50% 0%;
width: 69px;
height: 20px;
text-align: center; 
padding-top: 1px;
text-decoration: none;
font-size: .9em;
padding-right: 5px;
display: block;
float: left;
}

html > body#forum_viewtopic .discussion-box .post-tools a.button, html > body .poster-interact .dropdown {
padding-top: 3px;}

#forum_viewtopic .discussion-box .post-tags a.button {
display: inline;
float: none;
background: none;
}

.post-number a.button { background: none; }
.reply-tools { float: right;}

.poster-interact .dropdown p { width: 61px; }


.next-topic, .previous-topic { font-size: .9em; padding-top: 10px; }

.poster-interact .dropdown li { 
width: 81px;
}


/* ------------- dropdown module ------------ */


.dropdown li { 
background: #6777B7 url(http://static.yuku.com/domainskins/bypass/img/eversblue/blue/header-tile.gif) repeat-x 0 -1px; 
border: 1px solid #000; 
margin: 1px; 
padding: 0; 
}

.dropdown li a {
display: block; 
text-align: center; 
padding: 2px;
margin: 0px 0;
color: #222;
}

.dropdown li:hover { 
background: #6777B7 url(http://static.yuku.com/domainskins/bypass/img/eversblue/blue/header-tile.gif) repeat-x 0 -30px; 
}

.dropdown input { 
border: 0px solid #000; 
background: transparent; 
margin: 0;
padding: 2px; margin: 0;}

/* ------------- / dropdown module ------------ */



.post-controls .quote,
.post-controls .reply {
	float: right;
	margin-left: 0.5em;
}


.legend-box li { 
width: 24%;
margin: 0;
padding: 0;
display: block;
float: left;
height: 30px;
margin-top: 5px;
}

.legend-box li img { vertical-align: top; }

.legend-box .boxbody:after {
content: "";
clear: both;
display: block;
}


/* custom dropdown - simple version (disabled)

.custom-dropdown-holder { height: 30px; }
.custom-dropdown-holder div { float: left;} 

.custom-dropdown-holder a, .custom-dropdown-holder ul li a { color: #fff; }
*/

/* custom dropdown - advanced */

.custom-dropdown-holder { height: 18px; background: #000; margin-bottom: 10px; padding-left: 10px; }
.custom-dropdown-holder div { float: left;} 
.custom-dropdown-holder .dropdown { background: none; width: auto; padding-left: 2px; padding-right: 20px; }
.custom-dropdown-holder a, .custom-dropdown-holder ul li a { color: #fff; }
.custom-dropdown-holder li {margin: 0 0 0 0; border: 0; border-bottom: 1px solid #000; }
.custom-dropdown-holder ul { border: 1px solid #000; border-bottom: 0; margin-top: -7px; }