/* GENERAL STYLES */
#container
{
    width:850px;    
    margin:0 auto;
}

    h1.logo
    {
        display:block;
        width:365px;
        height:65px;
        background-image:url(../images/logo.png);
        background-repeat:no-repeat;
        
        margin:24px 0 0 0;
        
        text-indent:-10000px;
        
    }
    
        h1.logo a
        {
            display:block;
            height:100%;
        }
        
#mainContent
{
    width:544px;
}

#extraInfo
{
    width:259px; /*296 -37 = 259 */
    font-size:11px;
    
    padding:0 0 0 37px;
}


/*
=====================
Welcome header
=====================
*/  

h3.sexySites
{
    display:block;
    height:119px;
    width:554px;
    
    margin-left:-19px;
        
    text-indent:-100000px;
    
    background-image:url(../images/create_sexy_header.png);
    background-repeat:no-repeat;      
}

h3.sexySites + div
{
    min-height:155px;
    width:283px; /*554 - 21 -250 = 283*/
    background-image:url(../images/create_sexy_header_bottom.png);
    background-repeat:no-repeat;
    
    margin-left:-19px;
    
    font-size:11px;
    
    padding:15px 250px 0 21px;
}

h3.sexySites + div > p
{
    margin-bottom:10px;
}

/*
=====================
Latest posts
=====================
*/  

h3.latestPosts
{
    display:block;
    height:150px;
    width:350px;
    
    margin-left:-19px;
    
    text-indent:-100000px;
    
    background-image:url(../images/latest_posts_header.png);
    background-repeat:no-repeat;        
}


h3.latestPosts + .hfeed
{
    /* used so we can overlap the splat from the My Links header */
    margin:-27px 0 0 0;
}



/*
=======================
CATEGORIES
=======================
*/
.categories > h3
{
    display:block;
    height:125px;
    width:230px;
    
    margin-top:30px;
    margin-left:-19px;
    
    text-indent:-100000px;
    
    background-image:url(../images/categories_header.png);
    background-repeat:no-repeat;
}


.categories > div > div
{
    width:170px;
    /*background-color:Red;*/
    margin-right:15px;
}

.categories > div > div + div + div
{
    margin-right:0px;
}

.categories h4
{
    font-size:17px;
    font-weight:bold;
    color:#FFFFFF;
}

.categories ul
{
    margin-top:4px;
}

.categories li
{
    font-size:11px;
    font-weight:bold;
    color:#646464;
    margin-bottom:15px;
}

.categories li a
{
    color:#FFFFFF;
    text-decoration:none;
}

.categories li a:hover
{
    color:#89dc08;
}



/*
=======================
MY SKILLS
=======================
*/
.mySkills > h3
{
    display:block;
    height:135px;
    width:250px;
    
    margin-left:-37px;
    
    text-indent:-100000px;
    
    background-image:url(../images/my_skills_header.png);
    background-repeat:no-repeat;
}

.mySkills > h3 + p
{
    /* used so we can overlap the splat from the My Links header */
    margin:-18px 0 0 0;
}

.mySkills > ul
{
    margin:0 0 25px 0;
}


/*
=======================
MY LINKS
=======================
*/
.myLinks > h3
{
    display:block;
    height:130px;
    width:277px;
    
    margin-left:-37px;
    
    text-indent:-100000px;
    
    background-image:url(../images/my_links_header.png);
    background-repeat:no-repeat;
}

.myLinks > h3 + h5
{
    /* used so we can overlap the splat from the My Links header */
    margin:-50px 0 0 0;
}

.myLinks ul > li
{
    margin:0 0 3px 0;
}

    .myLinks ul > li > a
    {
        color:#FFFFFF;
        text-decoration:none;
    }
    
    .myLinks ul > li > a:hover
    {
        color:#ff8f00;
        text-decoration:none;
    }
    
    
.myLinks ul + h5
{
    margin:15px 0 0 0;
}
    
    /*
    =====================
    TWITTER
    =====================
    */
    
    .twitter
    {
        margin-left:-37px;
    }
    
    .twitter h3
    {
        width:295px;
        height:78px;
        text-indent:-10000000px;
        
        background-image:url(../images/twitter_top.png);
        background-repeat:no-repeat;
    }
    
    .twitter .tweet
    {
        background-image:url(../images/twitter_mid.png);
        background-repeat:repeat-x;
        
        font-size:15px;
        
        padding:15px 20px 0 37px;          
    }
    
        .twitter .tweet strong
        {
            font-weight:bold;
        }
        
        .twitter .tweet em
        {
            color:#ff8f00;
            font-weight:bold;
            display:block;
            
            font-style:normal;
        }
        
        .twitter .tweet a
        {
            color:#ff8f00;
        }
        
        .twitter .tweet a:hover
        {
            color:#ffffff;
        }
        
    .twitter .tweet-bottom
    {
        display:block;
        
        width:295px;
        height:64px;
        
        background-image:url(../images/twitter_bottom.png);
        background-repeat:no-repeat;
        
        padding:30px 0 0 0;
    }
    
        .twitter .tweet-bottom a
        {
            float:right;
            margin:0 20px 0 0;
            
            color:#00b2d9;
            text-decoration:none;
        }
     
/*
=====================
del.icio.us
=====================
*/  
.delicious h3
{
    display:block;
    height:160px;
    width:287px;
    
    margin-left:-37px;
    
    text-indent:-100000px;
    
    background-image:url(../images/my_delicious_header.png);
    background-repeat:no-repeat;
}
    
    
.delicious > h3 + ul
{
    /* used so we can overlap the splat from the My Links header */
    margin:-28px 0 0 0;
}

.delicious li
{
    margin-bottom:15px;
}

.delicious li > p > a
{
    font-size:13px;
    font-weight:bold;
    color:#FFFFFF;
    text-decoration:none;
    display:block;
}

.delicious li > p > a:hover
{
    color:#ff8f00;
    text-decoration:none;
}

.delicious li > p > em
{
    font-size:13px;
    font-weight:bold;
    color:#717070;
    display:block;
    
    font-style:normal;
}

.delicious li > p > br
{
    display:none;
}

.delicious li > span
{
    margin-top:20px;

    display:block;
    height:32px;
    line-height:32px;
    background-image:url(../images/dotted_border.png);
    background-repeat:repeat-x;
}

.delicious li > span > a
{
    color:#0284a0;
    font-weight:bold;
    text-decoration:none;
    
    padding-left:28px;
    
    background-image:url(../images/mag_glass.png);
    background-repeat:no-repeat;
}

.delicious > div
{
    margin-top:20px;

    display:block;
    height:27px;
    line-height:27px;
    background-image:url(../images/dotted_border_orange.gif);
    background-repeat:repeat-x; 
}

.delicious > div > a
{
    color:#0284a0;
    font-weight:bold;
    text-decoration:none;
    
    padding-left:14px;
    
    background-image:url(../images/left_arrow.png);
    background-position:0 3px;
    background-repeat:no-repeat;  
}




/*
=====================
Last.FM
=====================
*/  

.lastFM > h3
{
    display:block;
    height:135px;
    width:230px;
    
    margin-left:-37px;
    margin-top:30px;
    
    text-indent:-100000px;
    
    background-image:url(../images/lastfm_header.png);
    background-repeat:no-repeat;
}


.lastFM > h3 + p
{
    /* used so we can overlap the splat from the My Links header */
    margin:-40px 0 0 0;
}

.lastFM ul
{
    margin:17px 0 0 0;
}

.lastFM li
{
    margin:0 0 35px 0;
}

.lastFM img
{
    display:block;
}

.lastFM em
{
    display:block;
    
    font-style:normal;
}

.lastFM .AlbumName
{
    display:none;
}

/*
=====================
Flickr
=====================
*/

.flickr > h3
{
    display:block;
    height:135px;
    width:205px;
    
    margin-left:-37px;
    margin-top:45px;
    
    text-indent:-100000px;
    
    background-image:url(../images/my_flickr_header.png);
    background-repeat:no-repeat;
}


.flickr > h3 + ul
{
    /* used so we can overlap the splat from the My Links header */
    margin:-40px 0 0 0;
}


.flickr li
{
    float:left;
    margin-right:6px;
    margin-bottom:6px;
}

.flickr a > img
{
    border:2px solid #FFFFFF;
    height:75px;
    width:75px;
}

.flickr a:hover > img
{
    border:2px solid #ff0084;
}

.flickr p
{
    color:#005e73;
}

.flickr p > span
{
    line-height:20px;
}

.flickr p > a
{
    text-indent:-100000px;
    
    width:50px;
    height:15px;
    float:left;
    margin-left:5px;
    
    background-image:url(../images/flickr_icon.png);
    background-repeat:no-repeat;
}


/*
=====================
awards
=====================
*/
.awards
{
    width:250px;
    margin-top:20px;
    margin-bottom:30px;
}


/*
======================
BLOG POST
======================
*/

.hentry
{
    margin-bottom:20px;
    padding-bottom:14px;
    
    background-image:url(../images/dotted_border_white.gif);
    background-repeat:repeat-x;
    background-position:bottom left;    
}

.title-info div + div
{
    width:450px;
}

/* Blog post title */
.hentry h3
{
    margin-top:5px;
    
    font-size:21px;
    font-weight:bold;
    line-height:18px;
    color:#FFFFFF;
}


.hentry h3 a
{
    color:#FFFFFF;    
    text-decoration:none;
}

.hentry h3 a:hover
{
    color:#ff8f00;
}


/* Orange date */
.hentry .published
{
    color:#FFFFFF;
    font-size:11px;
    font-weight:bold;
    text-transform:uppercase;    
    text-align:center;
    
    height:45px;
    width: 45px;
    padding-right: 15px;
    padding-top:8px;
    
    background-image:url(../images/date_bg.png);
    background-repeat:no-repeat;
}

    .hentry .published span
    {
        color:#000000;
        display:block;
    }


.hentry .meta-info
{
    font-size:11px;
    font-weight:bold;
    color:#ffbf00;
    margin-bottom:20px;
}

    .hentry .meta-info a
    {
        color:#ffbf00;
        text-decoration:none;
    }

    .hentry .meta-info h5
    {
        display:none;
    }
    
    .hentry .meta-info > div.left
    {
        padding-left:20px;
        padding-right:10px;
        background-image:url(../images/user_icon.png);
        background-repeat:no-repeat;        
        background-position:0 3px;
        
        line-height:16px;
    }
    
    .hentry .meta-info > div.left + div.left
    {
        background-image:url(../images/tag_icon.png);
        background-position:0 3px;
        line-height:16px;
    }
    
    .hentry .meta-info li
    {
        float:left;
        margin-right:3px;
    }
    

/* Summary & body copy */
.hentry .summary, .hentry .content
{
    font-size:11px;
    color:#FFFFFF;
    margin-bottom:30px;
}

.hentry .summary p, .hentry .content p
{
    margin-bottom:15px;
}

/*Read full article & comment count */
.hentry .summary-links
{
    font-size:11px;
}
    /* Read full article*/
    .hentry .summary-links > a
    {
        font-weight:bold;
        color:#00b2d9;
        text-decoration:none;
        
        background-image:url(../images/read_article_icon.png);
        background-repeat:no-repeat;
                
        padding-left:30px;
        margin-right:10px;
        
        height:23px;
        line-height:23px;
        
        float:left;
    }
    
    /* Comment speech bubble */
    .hentry .summary-links span
    {
        float:left;
        line-height:23px;
        height:23px;
    }
    
    
    .hentry .summary-links span > span
    {
        color:#00b2d9;
        text-align:center;
        
        float:left;
        width:33px;
        height:23px;
        
        margin-right:5px;
        
        background-image:url(../images/comment_bubble.png);
        background-repeat:no-repeat;
    }
    
    .hentry .summary-links span a
    {
        font-weight:bold;
        color:#00b2d9;
        text-decoration:none;
        
        float:left;
    }


/*
=======================
BLOG CONTENT
=======================
*/

.content h4, .summary h4, .content h6, .summary h6
{
    font-size:14px;
    font-weight:bold;
}

.content blockquote, .summary blockquote
{
    background-color:#FFBF00;
    color:#000000;
    font-size:12px;
    font-weight:bold;
    
    padding:15px;
    margin:0 0 15px 0;
}

.content a, .summary a
{
    color:#FFBF00;
}

    .content a:hover, .summary a:hover
    {
        text-decoration:none;
    }

.content ul, .content ol, .summary ul, .summary ol
{
    margin:0 0 15px 30px;
    padding:0;
    list-style-type:disc;
    list-style-position:outside;
}

.content ul, .summary ul
{
    list-style-type:disc;
}

.content ol, .summary ol
{
    list-style-type:decimal;
}

/*
=======================
COMMENTS
=======================
*/

.comment-error
{
	background-color:#fff6bf;
	text-align: left;
	padding: 5px 15px 5px 15px;
	margin:0 0 15px 0;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
	color:#000000;
	font-size:12px;
}

.comment-error ul
{
	margin:10px 0 5px 15px;
	padding:0;
	list-style-type:disc;
	list-style-position:outside;
}

.list-comments
{
    font-size:11px;
    color:#9a9a9a;
    
    padding-top:20px;
    background-image:url(../images/dotted_border_white.gif);
    background-position:left top;
    background-repeat:repeat-x;
}

.list-comments h6
{
    font-size:21px;
    color:#9a9a9a;
    
    margin-bottom:30px;
}

.comment, .comment-me
{
    margin-bottom:30px;
}

.list-comments a
{
    color:#9a9a9a;
}


    .list-comments a:hover
    {
        color:#ff8f00;
    }
    
.comment-date
{
    font-style:italic;
    margin-bottom:2px;
}

.comment-photo
{
    padding-left:10px;
}

/*
=======================
COMMENT FORM
=======================
*/

.comment-form
{
    padding-top:15px;
    background-image:url(../images/dotted_border_white.gif);
    background-position:left top;
    background-repeat:repeat-x;
}

.comment-form h6
{
    font-size:21px;
    color:#10abd2;
    
    margin-bottom:15px;
}

.comment-form h6 span
{
    color:#FFFFFF;
}

.comment-form label
{
    width:68px;
    float:left;
    line-height:20px;
    
    font-size:11px;
    color:#FFFFFF;
}

.comment-form input
{
    height:20px;
}

.comment-form textarea
{
    height:150px;
    font-family:Arial;
}

.comment-form input, .comment-form textarea
{
    background-image:url(../images/form_bg.gif);
    background-repeat:repeat-y;
    background-position:top right;    
    background-color:#282727;    
    
    border:1px solid #6d7071;
    color:#FFFFFF;
    
    padding:2px;    
    width:250px;
}

.comment-form div.clearfix
{
    margin-bottom:10px;
}

.comment-form .sumbitBtn
{
    background-image:url(../images/dotted_border_white.gif);
    background-position:left top;
    background-repeat:repeat-x;
    
    padding-top:14px;
}

.comment-form .sumbitBtn input
{
    background-color:#10abd2;
    background-image:none;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    text-align:right;
    
    height:25px;
    width:255px;
    padding-right:10px;
    margin-left:68px;
}

/*
=====================
PAGER
=====================
*/

.pager
{
    font-size:11px;
    font-weight:bold;
    margin:30px 0 0 0;
    
    display:block;
    height:27px;
    line-height:27px;
    background-image:url(../images/dotted_border_orange.gif);
    background-repeat:repeat-x;
}

.pager a
{
    color:#00b2d9;
    text-decoration:none;
}





    h5
    {
        font-size:14px;
        font-weight:bold;
    }
    

/*
=====================
FOOTER
=====================
*/
#Footer
{
    margin:80px 0 0 0;
    padding:15px 0 100px 0;
    
    font-size:11px;
    font-weight:bold;
    
    background-image:url(../images/dotted_border_white.gif);
    background-repeat:repeat-x;
}
    #Footer span
    {
        line-height:35px;
        padding:0 5px 0 0;
    }

    #Footer a
    {
        text-indent:-100000px;
        height:25px;
        width:53px;
        
        background-repeat:no-repeat;
        background-image:url(../images/quilo_logo.png);
    }



/*
=====================
vCard in footer
=====================
*/
#hcard-Warren-Buckley
{
    /* So we can hide the vCard in the footer */
    display:none;
}

/* EDITOR PROPERTIES */