Test post four

Upload it to your site by 'remote server' option from
http://xtblogcss.xtgem.com/blog_classes_demo.css
and add this to the page header

/*Blog css classes demonstration

This is NOT a template 
it is a demonstration stylesheet for the blog classes

To use this stylesheet upload it (by remote server option)from http://xtblogcss.xtgem.com/blog_classes_demo.css create a blank page containing just a blog function
disable the _header , _footer , xtgem_template , global_stylesheet from the page options
and add a link to this stylesheet 
<link rel="stylesheet" type="text/css" href="/blog_classes_demo.css"/>
The number in brackets indicates which section contains the classes for that portion of the blog function 
*/
.xt_container:after
{content: "[0]";}
.xt_blog_parent:before
{content: "[1]";}
.xt_list:before
{content: "[2]";}
.xt_pagination:before
{content: "[3]";}
.xt_blog_search:before
{content: "[4]";}
.xt_blog:before
{content: "[5]";}
.xt_blog_comments:before
{content: "[6]";}
.xt_blog_write_a_comment:before
{content: "[7]";}
/*
CONTAINER CLASS [0]
This class is used in multiple areas of the blog and is also the standard container class
*/
.xt_container
{
  background:silver;
  margin:3px auto;
  padding:3px;
  border:1px dotted red;
  max-width:900px;
}
.xt_container .xt_blog_back_to_posts 
{
  border:2px dashed black
}
.xt_container .xt_button 
{
  background:white;
}
.xt_container .xt_link 
{
  margin:3px;
  text-decoration:none;
}
/*
OUTER HOLDER CLASS [1]
xt_blog_parent 
*/
.xt_blog_parent
{
  border:1px dotted black;
  background:#e0f4ff;
  max-width:800px;
  margin:1em auto
}
/*
POST LIST CLASSES [2]
xt_list 
xt_blog_post_list
xt_item
xt_blog_title_link
xt_heading
xt_blog_entry_time
xt_blog_comments_number
arrow
xt_description
*/
.xt_list 
{
  margin:3px;
  border:1px solid aqua;
}
.xt_blog_post_list
{
  margin:3px;
  border:1px solid black;
}
.xt_item 
{
  margin:3px;
  padding:4px;
  border:1px solid fuchsia;
}
.xt_blog_title_link 
{
  margin:3px;
  padding:3px;
  border:1px solid gray;
  text-decoration:none;
  display:inline-block;
}
.xt_heading
{
  border:1px solid green;
  padding:1px;
  display:inline-block;
}
.xt_blog_entry_time
{
  font-size:.75em;
  border:1px solid indigo;
  color:black;
  display:inline-block;
}
.xt_blog_comments_number
{
  border:1px solid lime;
}
.arrow
{
  content:url("/bullet_blue.png");
  display:inline-block;
}
.xt_list .xt_description 
{
  margin:3px;
  border:1px solid maroon;
  display:block;
}
.xt_list .xt_description img
{
  margin:3px;
  padding:3px;
  border:1px solid navy;
  max-width:32px ; /*Makes the image into a thumbnail*/
  vertical-align:bottom;
  display:inline-block;
}
/*
PAGINATION CLASSES [3]
xt_pagination
selected
*/
.xt_pagination
{
  margin:3px;
  padding:3px;
  border:1px solid maroon;
}
.xt_pagination .selected span
{
  margin:3px;
  border:1px solid black;
}
.xt_pagination span a
{
  text-decoration:none;
}
.xt_pagination span a span
{
  margin:3px;
  border:1px solid fuchsia;
}

/*
SEARCH FORM CLASSES [4]
xt_container xt_blog_search
xt_blog_search_form
xt_input
xt_submit
xt_button
*/
.xt_blog_search
{
  margin:3px;
  padding:3px;
  border:1px solid red;
}
.xt_blog_search_form
{
  margin:3px;
  padding:3px;
  border:1px solid black;
}
.xt_blog_search_form .xt_input
{
  margin:3px;
  padding:3px;
  border:1px solid fuchsia;
}
.xt_blog_search_form .xt_input input[type="text"]
{
  border:2px dashed green;
}
.xt_blog_search_form .xt_submit
{
  margin:3px;
  padding:3px;
  border:1px solid lime;
}
.xt_blog_search_form .xt_submit .xt_button
{
  border:2px dashed maroon;
}

/*
POSTS CLASSES [5]
xt_blog
xt_tags
xt_blog_title
xt_blog_subtitle
xt_blog_content
xt_blog_entry_date xt_text small
xt_blog_back_to_posts xt_link xt_button
*/
.xt_blog
{
  margin:3px;
  border:1px solid black
}
.xt_tags
{
  margin:3px;
  padding:3px;
  border:1px solid blue
}
.xt_tags a
{
  border:1px solid fuchsia;
  text-decoration:none
}
.xt_blog_title
{
  margin:3px;
  border:1px solid gray
}
.xt_blog_subtitle
{
  margin:3px;
  border:1px solid lime;
}
.xt_blog_content
{
  margin:3px;
  padding:3px;
  border:1px solid maroon;
}
.xt_blog_content p
{
  display:inline-block;
  margin:0;
  padding:0;
}
.xt_blog_entry_date 
{
  margin:3px;
  border:1px solid navy;
}
.xt_blog .xt_button
{
  margin:3px;
  border:2px dashed black
}
.xt_blog .xt_blog_back_to_posts 
{
  background:gray;
}
/*
COMMENTS CLASSES [6]
xt_blog_comments
xt_blog_comments_title
xt_blog_comment
xt_reply
xt_blog_comment_date
xt_blog_comment_author
xt_blog_comment_author_admin
xt_blog_comment_content
xt_blog_comment_actions
xt_blog_comment_action_reply
xt_blog_comment_action_report_spam
xt_button xt_link
*/
.xt_blog_comments
{
  margin:3px;
  padding:3px;
  border:1px solid olive;
}
.xt_blog_comments_title
{
  margin:3px;
  border:1px solid orange;
  display:block;
}
.xt_blog_comment
{
  
  margin:3px;
  padding:3px;
  border:1px solid purple;
}
.xt_reply
{
  margin:5px 6px;
}
.xt_blog_comment_date
{
  border:1px solid red;
  margin:3px;
  display:inline-block;
}
.xt_blog_comment_author
{
  border:1px solid silver;
  margin:3px;
  display:inline-block;
}

.xt_blog_comment_author_admin /*ADMIN REPLY CLASS*/
{
  border:3px double red;
  color:maroon;
}
.xt_blog_comment_content
{
  border:1px solid teal;
  margin:3px;
  padding:3px;    
}
.xt_blog_comment_content p
{
  border:1px solid orange;
  margin:0;
}
.xt_blog_comment_actions
{
  margin:3px;
  padding:3px;
  border:1px solid black;
}
.xt_blog_comment_action_reply
{
  border:1px solid blue;
  text-decoration:none;
  display:inline-block;
}
.xt_blog_comment_action_report_spam
{
  border:1px solid fuchsia;
  text-decoration:none;
  display:inline-block;
}
.xt_blog_comments .xt_button 
{
  margin:3px;
  border:1px solid black
}

/*
COMMENT FORM CLASSES [7]
xt_blog_write_a_comment
xt_blog_write_a_comment_title
xt_label
xt_input
xt_textarea
xt_submit
xt_button
*/
.xt_blog_write_a_comment
{
  margin:3px;
  padding:3px;
  border:1px solid gray;
}
.xt_blog_write_a_comment_title
{
  border:1px solid lime;
  display:block;
}
.xt_blog_write_a_comment .xt_label
{
  margin:3px;
  padding:3px;
  border:1px solid maroon;
}
.xt_blog_write_a_comment .xt_input
{
  margin:3px;
  padding:3px;
  border:1px solid olive;
}
.xt_blog_write_a_comment .xt_input input[type="text"]
{
  border:2px dashed green;
}
.xt_blog_write_a_comment .xt_textarea
{
  margin:3px;
  padding:3px;
  border:1px solid olive;
}
.xt_blog_write_a_comment .xt_textarea textarea
{
  border:2px dashed green;
}
.xt_blog_write_a_comment .xt_submit
{
  margin:3px;
  padding:3px;
  border:1px solid orange;
  
}
.xt_blog_write_a_comment .xt_submit .xt_button
{
  border:2px dashed orange;
  background:purple;
  color:white
}

Xt blog css classes demonstration