/*

Theme Name: joanneliyeng
Theme URI: http://www.joanneliyeng.com
Author: Joanne Liyeng
Tags: Left Sidebar, 2 Column, Minimal

*/

* {
    margin:0;
    padding:0;
}
body {
    font-size:12px;
    font-family: "Lucida Grande", "Lucida Sans", "Arial", "Helvetica", sans-serif;
    background:url("images/bgbig.png") repeat;
    font-weight:normal;
}
h1, h2, h3, h4, h5, h6 {
    font-weight:normal;
    margin:0;
    padding:0;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
acronym, fieldset, img {
    border:none;
    padding:0;
    margin:0;
}
.clear {
    clear:both;
}
a, a:hover, a:link, a:active {
    text-decoration:none;
    color:#000;
    outline:none;
}
blockquote {
	margin :0 0 10px 20px;
	padding: 25px 0 0 10px;
	}
code {
	background : #cccccc;
	padding-left:3px;
	padding-right:3px;
	text-align:left;
	}
#wrapper {
    background:url("images/bg-header.png") repeat-x;
}

/* Header */

#header {
    
    height:70px;
    margin:0 auto;
    width:960px;
    padding:56px 0 0;
}
    #header h1 a {
        background:url("images/title.png") no-repeat;
        width:216px;
        height:43px;
        text-indent:-9999px;
        float:left;
        margin:0 0 0 60px;
    }
    
/* Navigation */

#navigation {
    float:left;
    display:block;
    margin:0 0 0 100px;
    width:580px;
}
    #navigation li {
        float:left;
        display:block;
        padding:25px 20px 20px;
    }   
        #navigation li a:hover {
            background:url("images/menu-blog.png") no-repeat top center;
            padding:25px 0 0;
        }
            #navigation li.current a {
            background:url("images/menu-blog.png") no-repeat top center;
            padding:25px 0 0;
            }
        #navigation li.about a:hover {
            background:url("images/menu-about.png") no-repeat top center;
            padding:25px 0 0;
        }
            #navigation li a.current-about {
            background:url("images/menu-about.png") no-repeat top center;
            padding:25px 0 0;
            }
        #navigation li.facebook a:hover {
            background:url("images/menu-facebook.png") no-repeat top center;
            padding:25px 0 0;
        }
        #navigation li.twitter a:hover {
            background:url("images/menu-twitter.png") no-repeat top center;
            padding:25px 0 0;
        }
        #navigation li.contact a:hover {
            background:url("images/menu-contact.png") no-repeat top center;
            padding:25px 0 0;
        }
            #navigation li a.current-contact {
            background:url("images/menu-contact.png") no-repeat top center;
            padding:25px 0 0;
            }
        #navigation li a{
        text-transform:uppercase;
        font-size:14px;
        font-weight:bold;
        }
        #navigation li a:hover {
        border-bottom:2px #000 solid;
        }

/* Content */

#content {
    width:960px;
    margin:50px auto 0 auto;
}

/* Sidebar */

#leftside {
    float:left;
    width:290px;
}
#twitter {
    background:#e9e9f1;
    width:250px;
    padding:10px;
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
    #twitter ul li{
        color:#666;
        font-weight:normal;
        text-align:right;
    }
    #twitter ul span{
        background:url("images/quote.png") no-repeat top left;
        color:#666;
        display:block;
        padding:2px 22px;
        text-align:left;
    }
    #twitter_div {
        padding:5px;
        border:1px solid #ccc;
        position:relative;
    }
        #twitter_div h1 {
            background:url("images/twitter.png") no-repeat;
            height:66px;
            width:59px;
            position:absolute;
            left:-25px;
            top:-35px;
            text-indent:-9999px;
        }
        #twitter_div h2 {
            color:#333;
            margin:0 0 5px 30px;
        }
        #twitter_div a {
            text-align:right;
            display:block;
            color:#6699cc;
            font-size:11px;
            padding:0 10px 0 0;
        }
    #twitter_update_list {
        list-style-type:none;
        padding:10px 0 3px 0;
    }
    #twitter_update_list span a {
        background:url();
        padding:0;
        display:inline;
        font-style:normal;
        font-size:12px;
        color:#666;
    }
    #twitter_update_list a {
        background:url("images/quote2.jpg") no-repeat top right;
        padding:5px 25px 0 0;
        font-style:italic;
        font-size:12px;
        color:#000;
    }
    #widgetbar {
        background:#fff9e5;
        width:210px;
        padding:35px 30px 30px;
        margin:40px 0;
        position:relative;
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    }
        #widgetbar img.tape {
            position:absolute;
            top:-20px;
            left:-20px;
        }
        #widgetbar h2 {
            margin:15px 0;
            font-size:23px;
        }
        #widgetbar li {
            padding:1px 0;
        }
        #widgetbar li a {
            color:#5aacd4;
        }
#widgetbar li a:hover {
            color:#11bb98;
text-decoration: underline;
        }
        #widgetbar ul li.widget {
            margin:0 0 10px 0;
        }

/* Blogpost */

#rightside {
    float:left;
    width:670px;
    background:url("images/bg-content-top.png") no-repeat;
}
#blogpost {
    background:url("images/bg-content.jpg") repeat-y;
    margin:40px 0 0;
    padding:0 10px 20px;
    overflow:hidden;
}
    .entry {
        padding:0 20px 10px;
        overflow:hidden;
    }
        .header-post h1.title {
            font-size:20px;
            font-weight:bold;
            border-bottom:1px solid #999;
            color:#333;
            padding:0 0 5px;
        }
            .header-post h1.title a:hover {
                color:#5aacd4;
            }
        .header-post p {
            font-size:10px;
            color:#999;
            margin:5px 0 10px;
        }
        .entry-post a {
            text-decoration:underline;
            color:#5aacd4;
        }
        .entry-post h1{
			font-size: 19px;
			margin:  30px 0 5px;
		}
		.entry-post h2{
			font-size:17px;
			margin:20px 0 5px;
		}
		.entry-post h3{
			font-size:15px;
			margin:20px 0 5px;
		}
		.entry-post p{
			margin:10px 0;
			font-size:12px;
			line-height: 17px;
			color:#666
		}
	    .entry-post blockquote {
			background: url("images/quote.png") no-repeat scroll 10px 0px;
		}
		.entry-post ul {
			list-style:disc;
			list-style-position:outside;
			margin:0 0 10px 25px;
			font-size:12px;
color:#666;
		}
	    .entry-post ol {
		    margin:0 0 10px 30px;
color:#666;
		}
		.entry-post li {
		    padding:1px;
color:#666;
		}
        .bottom-post {
            margin:0 0 20px;
            overflow:hidden;
        }
        .bottom-post a {
            text-decoration:none;
            color:#5aacd4;
        }
        .bottom-post a:hover {
            text-decoration:underline;
            color:#11bb98;
        }
        .bottom-post p.category {
            float:left;
            background:url("images/category.jpg") no-repeat;
            height:23px;
            padding:3px 0 0 27px;
        }
        .bottom-post p.comment {
            float:right;
            background:url("images/comment.jpg") no-repeat;
            height:24px;
            padding:5px 0 0 27px;
        }
    h2.pagetitle {
        border-bottom:1px dashed;
        font-size:16px;
        font-weight:900;
        margin:0 350px 20px 20px;
        padding:10px 10px;
    }
    
/* Pagination */

#blogpost .navigation {
    padding:15px 0 0;
    margin:15px 20px;
    overflow:hidden;
}
    .alignleft {
        float:left;
        font-style:italic;
    }
    .alignright {
        float:right;
        font-style:italic;
    }

/* Comment */

#comments{
	padding:10px 0px 0;
	margin:0 30px;
	color:#4d79a5;
	font:900 italic 16px/24px inherit;
	text-align:center;
	border-top:1px #ccc dashed;
	}
ol.commentlist{
	list-style: none;
	}
	ol.commentlist li{
		padding: 25px 25px 15px;
		margin: 0 40px 1px 20px;
		line-height: 17px;
		border-bottom: 1px solid #BEDCD1;
		}
		img.avatar{
			margin: 0 10px 0 0;
			border: 1px solid #333;
			padding: 1px;
		}
		.comment-author {
		    margin:0 0 5px;
		    overflow:hidden;
		}
        .avatar {
            float:left;
        }
        .author-meta {
            float:left;
            display:block;
        }
		ol.commentlist li li{
			background: #BEDCD1;
		 	border: 1px solid #D5E8DE;
			margin: 15px 0px 0 0px;
			padding: 15px;
			}
		ol.commentlist li.pings{
			padding: 6px 0px;
			background: none;
			}
		ol.commentlist li blockquote{
			background: url(images/bqc.gif) no-repeat scroll 10px 0px;
			}
	 
	.reply a,
	.cancel-comment-reply a{
		text-transform: uppercase;
		color: #666;
		font-size: 10px;
		}	 
	 .cancel-comment-reply{
	 	margin: 0 0 5px;
	 	}
	 .navigation{
		 padding: 6px 0;
		 }
	 .navigation a{
		 color: #000;
		 }
#respond{
	margin: 20px 0;
	padding: 0 30px;
	}
	#respond label{
		margin: 0 0 5px 5px;
		}
	#respond h3{
		font-size: 15px;
		margin: 5px 0 20px;
		}
	#respond p{
		margin: 0 0 10px 0;
		}
	#author,
	#email,
	#url{
	    font-size:11px;
		width: 45%;
		height: 14px;
		padding: 2px 2px;	
		border:1px solid #ccc;
		}
	textarea#comment{
	    font-size:11px;
		width: 95%;
		padding: 2px;
		border:1px solid #ccc;
	}
	input#submit {
	    border:1px solid #ccc;
	    background:#dbe9ff;
	    font-size:12px;
	    text-transform:uppercase;
	    padding:5px 12px;
	}

/* Footer */
 
#footer {
    width:934px;
    margin:20px auto;
    background:#e9e9f1;
    padding:10px;
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
    #ffooter {
        border:1px #ccc solid;
        height:42px;
    }
        #ffooter h2 {
            float:left;
            font-size:13px;
            margin:12px;
        }
        #ffooter h1 {
            float:right;
            font-size:17px;
            margin:10px 10px 0;
        }
        #ffooter img.rssfeed {
            float:right;
            margin:5px 10px 0 0;
        }