/*
Welcome to the Vanilla CSS File! Some things you should know:

1. There is a style.css file that is also included on every page of Vanilla. It
   defines the common classes on all user-facing pages, including the user
   profile page, activity page, and search results page.
   
2. This css file will be included on all Vanilla pages. Those pages are:
   + Discussions (All Discussions, Bookmarks, Your Discussions, etc)
   + Drafts
   + Categories
   + Comments
   + Start a New Discussion Form
   + Add a Comment Form

*/



/* ======================================================== Panels / Sidebars */
#Panel ul.Discussions {
   border: 0;
}
ul.PanelDiscussions li {
   text-align: left;
}
ul.PanelDiscussions li a {
   float: none;
}
ul.PanelDiscussions li strong {
   display: block;
   line-height: 1.5;
}

/* ============================================================== Discussions */

body.Discussions h1 {
   margin: 0;
}
/* Note: The Vanilla Discussion List has the following classes applied to
  individual list elements and can be styled:
  + Bookmarked: the user has bookmarked that topic
  + Announcement: the discussion has been announced
  + Mine: the user created the discussion
  + New: there are new comments since the last viewed the discussion
*/
.Mine { background: #e3f4ff; }
li.New { background: #fffec1; }
ul.DataList div.Meta a.Category {
   background: #fafafa;
   padding: 2px 4px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
}
ul.DataList li.Mine div.Meta a.Category {
   background: #eff7ff;
}
ul.DataList li.New div.Meta a.Category {
   background: #fffed7;
}
ul.DataList div.Meta span.Announcement {
   color: #e00;
   font-weight: bold;
}

/* =============================================================== Categories */
.Categories {
   list-style: none;
   margin: 0;
   padding: 0;
}
body.Categories h1,
body.Categories #Content h2 {
   margin: 0;
}
h1 span {
   color: #555;
   padding: 0 4px;
   font-size: 70%;
}
body.Categories h1 a {
   color: #000;
}


/* ================================================================= Comments */
body.Discussion #Content {
   margin-bottom: 20px;
}
ul.Discussion {
   margin-bottom: 1px;
}
div.Popup li.Comment {
	border-bottom: 0;
}
div.Popup .Preview {
   margin: 4px 10px;
}
div.Popup .Preview h2 {
   background: none;
   border-bottom: 1px solid #bbb;
   color: #000;
   margin: 0 0 8px;
}
div.Popup ul.Preview li.Comment {
   padding: 0;
}
div.Popup ul.Preview li.Comment div.Body {
   min-height: 53px;
}
/*
  Note: Discussion & Comment Option (dropdown) Menu customizations. The layout
  css for these is in /applications/garden/design/menu.css. Override them here.
*/
a.Bookmark,
a.Bookmarking {
	float: right;
   display: block;
   background: url('images/star_sprite2.png') top center no-repeat;
   height: 22px;
   width: 22px;
   margin: 2px 4px 0 4px;
}
a.Bookmark span,
a.Bookmarking span {
   display: none;
}
a.Bookmarked {
   background: url('images/star_sprite2.png') center center no-repeat;
}
a.Bookmarking {
   background: url('images/star_sprite2.png') bottom center no-repeat;
}
body.Discussion a.Bookmark {
	margin: 13px 8px;
}

/* =================================================================== Drafts */
body.Drafts h1 {
   margin: 0;
}
ul.Discussions div.ItemContent,
ul.Drafts div.ItemContent {
   margin: 0 0 0 5px;
}
ul.Drafts div.ItemContent a.Title,
ul.Discussions div.ItemContent a.Title {
	max-width: 580px;
}

/* =============================================== Discussion & Comment Forms */
body.Discussion #CommentForm {
   background: #cfecff;
   padding: 8px;
	border-bottom: 1px solid #caf0fe;
}
div.Popup #CommentForm {
   background: none;
   border: 0;
   padding: 0;
}
#CommentForm h3 {
   font-size: 115%;
   color: #2786C2;
   font-weight: bold;
}
div.Popup #CommentForm h3 {
   color: #000;
}
#CommentForm textarea {
   width: 650px;
   height: 100px;
   min-height: 100px;
   margin: 0 0 6px;
}
div.Popup #CommentForm textarea {
   width: 470px;
   max-height: 500px;
}
#CommentForm input.Button,
#DiscussionForm input.Button {
   margin-right: 6px;
}
#DiscussionForm label {
   font-size: 14px;
   font-weight: bold;
   color: #666;
}
body.Post #Panel {
   display: none;
}
body.Post #Content {
   width: auto;
}
body.Post #CommentForm h2,
#DiscussionForm h2 {
   border: none;
   color: #02475A;
   font-size: 140%;
   font-weight: bold;
   margin: 0;
   padding: 6px;
}
body.Post #CommentForm form,
#DiscussionForm form {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   background: #c4e1ff none repeat scroll 0 0;
   border: 1px solid #7caccb;
   margin: 0;
   padding: 20px;
}
body.Discussion #Content #CommentForm h2 {
   font-size: 120%;
   color: #1E79A7;
   border-bottom: 0;
   line-height: 1;
   padding: 0;
   margin: 0 0 4px;
}
body.Discussion div.Popup #CommentForm textarea {
   margin-top: 10px;
}
body.Post #CommentForm textarea,
#DiscussionForm textarea {
   width: 910px;
   height: 100px;
   min-height: 100px;
   max-height: 400px;
   margin: 0 0 6px;
}
#DiscussionForm input.InputBox {
   width: 910px;
   margin-bottom: 10px;
}
#DiscussionForm div.Category {
   padding: 0 0 10px;   
}
#DiscussionForm div.Category label {
   padding: 0 8px 0 0;
}
a.Cancel {
   margin-left: 20px;
}
#DiscussionForm ul {
   margin: 0 0 20px;
}
#DiscussionForm ul.PostOptions li {
   display: inline;
   padding: 0 8px 0 0;
}
#DiscussionForm ul.PostOptions label {
   display: inline;
   font-weight: normal;
   font-size: 95%;
   color: #555;
}
input.DiscussionButton,
input.CommentButton {
	float: right;
}