<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>XtGem.com</title>
</head>
<body> /* CONTAINERS */
.xt_blog_parent
{
background: #000;
padding: 2px;
margin: 2px;
}
.xt_blog
{
background: #ff0;
padding: 2px;
margin: 2px;
}
.xt_blog_parent .xt_container
{
background: #abc !important;
padding: 2px !important;
margin: 2px  !important;
}
/* POSTS LIST*/
.xt_list
{
background: #fff;
padding: 2px;
margin: 2px;
}
.xt_blog_post_list
{
background: #555;
padding: 2px;
margin: 2px;
}
.xt_item
{
background: #eee;
padding:2px ;
margin: 2px;
}
/* POST LINK */
.xt_blog_title_link
{
background: #aaa;
text-decoration: none;
display:block;
text-align:left;
padding: 2px 0;
margin: 1px;
}
.xt_blog_title_link:visited
{
background:#caa;
}
.xt_blog_title_link:hover
{
background:#aca;
}
.xt_blog_title_link:active
{
background:#aac;
}
/* POST LINK TITLE*/
.xt_blog_title_link .xt_heading
{
background: url("http://tutorial.graham.yn.lt/ff16x16/2/blogs.png") no-repeat left #bbb;
padding-left: 1em;
}
/* POST COMMENT COUNT*/
.xt_blog_comments_number
{
background:  url("http://tutorial.graham.yn.lt/ff16x16/5/comments.png") no-repeat left #ccc;
color:#777;
padding-left: 1em;
}
/* POST MARKER*/
.xt_blog_title_link .arrow
{
display:inline-block;
background: url("http://tutorial.graham.yn.lt/ff16x16/3/bullet_blue.png") no-repeat;
width:1em;
height: 1em;
}
/* VISITED MARKER IMAGE ONLY WORKS ON OPERA BROWSERS */
.xt_blog_title_link:visited .arrow
{
background: url("http://tutorial.graham.yn.lt/ff16x16/3/bullet_orange.png") no-repeat;
}

.xt_blog_title_link:hover .arrow
{
background: url("http://tutorial.graham.yn.lt/ff16x16/3/bullet_red.png") no-repeat;
}
.xt_blog_title_link:active .arrow
{
background: url("http://tutorial.graham.yn.lt/ff16x16/3/bullet_yellow.png") no-repeat;
}
/* POST DESCRIPTION */
.xt_description
{
background: #ddd;
display:block;
padding: 2px;
margin: 1px;
}
/* SEARCH FORM CONTAINER (xt_container + xt_blog +xt_blog_search)*/
.xt_blog_search
{
background: #999 !important;
padding: 2px !important;
margin: 1px !important;
}
/* SEARCH FORM */
.xt_blog_search_form
{
background: #aaa;
padding: 2px;
margin: 1px;
}
/* SEARCH INPUT SPAN */
.xt_blog_search_form .xt_input
{
background:url("http://tutorial.graham.yn.lt/ff16x16/15/magnifier.png") no-repeat left #bbb;
padding: 1px 3px 1px 1em;
margin: 1px;
}
/* SEARCH INPUT */
.xt_blog_search_form .xt_input input[type="text"]
{
background: #ccc;
width: 10em;
padding: 0;
border:none
}
/* SEARCH SUBMIT SPAN */
.xt_blog_search_form .xt_submit
{
background: #ddd;
padding: 1px 3px;
margin: 1px;
}
/* SEARCH SUBMIT BUTTON */
.xt_blog_search_form .xt_submit .xt_button
{
background: #eee;
padding: 0;
border:none
}
/* BLOG POST TAGS */
.xt_tags
{
background: #bbb;
padding: 2px;
margin: 1px;
}
.xt_tags:before
{
content: url("http://tutorial.graham.yn.lt/ff16x16/23/three_tags.png");
}
.xt_tags a
{
background: #eee;
padding: 0 2px;
}
/* BLOG POST */
.xt_blog_title
{
background: #ccc;
padding: 2px;
margin: 1px;
}
.xt_blog_subtitle
{
background: #ddd;
padding: 2px;
margin: 1px;
}
.xt_blog_content
{
background: #eee;
padding: 2px;
margin: 1px;
}
/* POST TIME STAMP */
.xt_blog_entry_date
{ 
text-align:center;
font-size:.75em;
font-weight:900;
}
/* BACK TO POSTS */
.xt_blog_back_to_posts
{
background:#bbb;
text-decoration: none;
margin: 1px 0 3px 2px;
padding:0 1px;
}
.xt_blog_back_to_posts:before
{
content: url("http://tutorial.graham.yn.lt/ff16x16/2/blogs.png");
padding:0 1px 0 0;
}
/* COMMENTS */
.xt_blog_comments
{
text-align:center;
background: #aaa;
padding: 2px;
margin:  1px;
}
.xt_blog_comments_title
{
background: #bbb;
}
.xt_blog_comments_title:before
{
content:url("http://tutorial.graham.yn.lt/ff16x16/5/comments.png") 
}
.xt_blog_comment
{
text-align:left;
background: #ccc;
padding: 2px;
margin: 1px;
}
.xt_blog_comment_date
{
background: #ddd;
}
.xt_blog_comment_date:before
{
content: url("http://tutorial.graham.yn.lt/ff16x16/3/calendar.png");
padding:0 2px;
}
.xt_blog_comment_author
{
background: #eee;
}
.xt_blog_comment_author:before
{
content: url("http://tutorial.graham.yn.lt/ff16x16/23/user.png");
padding:0 2px;
}
.xt_blog_comment_content
{
display:block;
background: #fff;
padding:1px ;
margin: 2px 0;
}
.xt_blog_comment_content:before
{
content: url("http://tutorial.graham.yn.lt/ff16x16/5/comment.png");
padding:0 2px;
}
/* COMMENT FORM */
.xt_blog_write_a_comment
{
background: #777;
padding: 2px;
margin: 2px ;
}
.xt_blog_write_a_comment_title
{
display: block;
text-align:center;
background: #fff;
padding: 1px;
margin: 1px;
}

.xt_blog_write_a_comment .xt_label
{
background: #eee;
padding: 2px;
margin: 1px;
}
.xt_blog_write_a_comment .xt_label label
{
background: #888;
}
.xt_blog_write_a_comment .xt_input
{
background: #ddd;
padding: 2px;
margin: 1px;
}
.xt_blog_write_a_comment .xt_input input[type="text"]
{
background: #999;
color:#fff;
border: none;
width: 80%;
max-width:15em;
padding: 1px;
}
.xt_blog_write_a_comment .xt_textarea
{
text-align:center;
background: #ccc;
padding: 2px;
margin: 1px;
}
.xt_blog_write_a_comment .xt_textarea textarea
{
background: #aaa;
border: none;
width: 99%;
min-height: 5em;
padding: 0;
}
.xt_blog_write_a_comment .xt_submit
{
background: #bbb;
padding: 2px;
margin: 1px;
}
.xt_blog_write_a_comment .xt_submit .xt_button
{
background: #fff;
border: none;
padding: 1px;
}
/* PAGINATION */
.xt_pagination 
{
background: #aaa;
padding: 2px;
margin:2px;
text-align:center
}
.xt_pagination:before 
{
content: url("http://tutorial.graham.yn.lt/ff16x16/17/page_white_stack.png");
padding:0 2px;
}
.xt_pagination a 
{
background: #bbb;
text-decoration: none;
margin:1px;
}
.xt_pagination a span 
{
color: #040;
}
.xt_pagination .selected 
{
background: #ddd;
margin:1px;
}
.xt_pagination .selected span 
{
color: #400;
} 
    <div data-xtcontainer="container" class="xt_container">
    </div>
</body>
</html>


