body
{
    font-family: Tahoma;
    font-size: 11px;
    color: #333333;
    line-height: 1.8em;
}
/* Body Color Scheme */
body.gray
{
    background: #d4d4d4 url(../img/background_gray.jpg) no-repeat fixed left top;
}
body.blue
{
    background: #d4d4d4 url(../img/background_blue.jpg) no-repeat fixed left top;
}
body.green
{
    background: #d4d4d4 url(../img/background_green.jpg) no-repeat fixed left top;
}
/* Frame */
ul.frame
{
}
ul.frame li
{
    position: fixed;
    z-index: 99;
    background: url(../img/pattern_1.png) repeat fixed left top;
}
ul.frame li#top
{
    left: 0;
    top: 0;
    right: 0;
    height: 9px;
}
ul.frame li#right
{
    right: 0;
    top: 9px;
    bottom: 60px;
    width: 9px;
}
ul.frame li#bottom
{
    left: 0;
    bottom: 0;
    right: 0;
    height: 42px;
    padding: 9px;
}
ul.frame li#left
{
    left: 0;
    top: 9px;
    bottom: 60px;
    width: 9px;
}
/* --------------------- Header ---------------------- */
#header
{
    position: relative;
    height: 178px;
}
#header h1
{
    position: absolute;
    left: 40px;
    top: 35px;
}
#header h1 a
{
    display: block;
    width: 409px;
    height: 83px;
    color: #000;
    background: url(../img/logo_artofcss.png) no-repeat;
}
ul#navigation
{
    position: absolute;
    right: 9px;
    bottom: 0;
    height: 41px;
    font-family: Trebuchet MS;
    font-size: 16px;
    color: #494a4b;
    background: url(../img/pattern_1.png) repeat fixed left top;
}
ul#navigation li#nav_blank
{
    width: 200px;
}
ul#navigation li
{
    float: left;
    height: 41px;
}
ul#navigation li a
{
    display: block;
    height: 41px;
    color: #fff;
    background: url(../img/navigation_bg.png) no-repeat;
}
ul#navigation li#nav_home a
{
    width: 96px;
    background-position: 0 top;
}
ul#navigation li#nav_home a:hover
{
    background-position: 0 bottom;
}
ul#navigation li#nav_about a
{
    width: 132px;
    background-position: -96px top;
}
ul#navigation li#nav_about a:hover
{
    background-position: -96px bottom;
}
ul#navigation li#nav_portfolio a
{
    width: 138px;
    background-position: -228px top;
}
ul#navigation li#nav_portfolio a:hover
{
    background-position: -228px bottom;
}
ul#navigation li#nav_gears a
{
    width: 129px;
    background-position: -366px top;
}
ul#navigation li#nav_gears a:hover
{
    background-position: -366px bottom;
}
ul#navigation li#nav_contact a
{
    width: 124px;
    background-position: right top;
}
ul#navigation li#nav_contact a:hover
{
    background-position: right bottom;
}
/* --------------------- Body ------------------------ */
#body_wrapper
{
    width: 920px;
    margin: 30px auto 0;
    padding-bottom: 70px;
    color: #fafafa;
    font-family: Sans-Serif, Trebuchet MS, Tahoma;
    font-size: 1.08em;
}
/* Content */
#content
{
    float: left;
    width: 620px;
}
#content .post_box
{
	overflow: hidden;
}
#content .post_box .post_info
{
    float: left;
    width: 40px;
    margin-top: 20px;
    font-family: Trebuchet MS;
}
#content .post_box .post_info .date
{
    width: 40px;
    height: 57px;
    padding-top: 3px;
    text-align: center;
    background: url(../img/post_info_date_bg.png) no-repeat left top;
}
#content .post_box .post_info .date label
{
    color: #F8991D;
    font-size: 14px;
}
#content .post_box .post_info .date span
{
    display: block;
    color: #fafafa;
    line-height: 15px;
}
#content .post_box .post_info .date span.day
{
    font-size: 16px;
}
#content .post_box .post_info .date span.year
{
    font-size: 13px;
}
#content .post_box .post_info .com_count
{
    width: 40px;
    height: 29px;
    margin-top: 10px;
    text-align: center;    
    font-size: 18px;
}
#content .post_box .post_info .com_count a
{
    display: block;
    height: 24px;
    padding-top: 5px;
    color: #fafafa;
    background: url(../img/post_info_com_count_bg.png) no-repeat;
    background-position: left top;    
}
#content .post_box .post_info .com_count a:hover
{
    color: #F8991D;
    background-position: left bottom; 
}
#content .post_box .post_story
{
    float: right;
    width: 580px;
}
#content .post_box .post_story .top
{
    height: 12px;
    background: url(../img/post_story_top.png) no-repeat left top;
}
#content .post_box .post_story .middle
{
    position: relative;
    padding: 11px 25px 13px;
    text-align: justify;
    font-size: 1.1em;
    background: url(../img/post_story_middle.png) repeat-y left top;
}
#content .post_box .post_story .bottom
{
    height: 12px;
    background: url(../img/post_story_bottom.png) no-repeat left top;
}
#content .post_box .post_story .shadow
{
    height: 49px;
    padding-bottom: 20px;
    background: url(../img/post_story_shadow.png) no-repeat left top;
}
#content .post_box .post_story .middle p
{
    margin-bottom: 10px;    
}
#content .post_box .post_story .middle h2 a
{
	height: 21px;
    padding: 6px 0 0px;	
	color: #f8991d;
}
#content .post_box .post_story .middle h2 a:hover
{
	color: #f8991d;
	background: url(../img/pattern_1.png) repeat fixed left top;
}
#content .post_box .post_story .middle h3
{
    padding: 7px 10px 10px;
    margin-bottom: 10px;
    background: url(../img/pattern_1.png) repeat fixed left top;
}
#content .post_box .post_story .middle img
{
    padding: 3px;    
    background: url(../img/transparent_bg_2.png) repeat;    
}
#content .post_box .post_story .middle h2 img
{
    padding: 0;
    background: none;   
}
#content .post_box .post_story .middle ul.point_list
{
    font-family: Trebuchet MS;
    font-size: 13px;
}
#content .post_box .post_story .middle ul.point_list li
{
    padding: 0 0 9px 26px;
    background: url(../img/bullet_2.png) no-repeat left 5px;
}
#content .post_box .post_story .middle ul.point_list li a
{
    padding: 0 3px 1px;
    color: #fafafa;
}
#content .post_box .post_story .middle ul.point_list li a:hover
{
    background-color: #f8991d;
}
/* Meta */
#content .post_box .meta
{
    margin-top: 15px;
    padding-top: 5px;
    font-size: 11px;
    color: #d7d7d7;
    letter-spacing: .1px;
    background: url(../img/horizontal_line_bg_1.png) repeat-x left top;
}
#content .post_box .meta a
{
    color: #d7d7d7;
}
#content .post_box .meta a:hover
{
    color: #F8991D;
}
/* Comments */
#content .post_box ul.comment_list
{
    margin-top: 22px;
}
#content .post_box ul.comment_list li
{
    padding-bottom: 15px;
}
#content .post_box ul.comment_list li.first
{
    padding-bottom: 5px;
}
#content .post_box ul.comment_list li a
{
    float: left;
    color: #F8991D;
    padding: 1px 10px;
    font-size: 14px;
    font-family: Trebuchet MS;
    background: url(../img/pattern_1.png) repeat fixed left top;
}
#content .post_box ul.comment_list li a:hover
{
    background: #F8991D;
    color: #fff;    
}
#content .post_box ul.comment_list li span
{
    float: right;
    color: #F8991D;
    font-size: 14px;
    font-family: Trebuchet MS;    
}
#content .post_box ul.comment_list li p
{
    clear: both;
    padding-top: 6px;
    background: url(../img/horizontal_line_bg_1.png) repeat-x left top;
}
/* SideBar */
#sidebar
{
    float: left;
    width: 280px;
    margin-left: 20px;
}
#sidebar .side_box
{
    padding-top: 20px;
}
#sidebar .side_box .top
{
    height: 12px;
    background: url(../img/side_box_top.png) no-repeat left top;
}
#sidebar .side_box .middle
{
    position: relative;
    padding: 11px 25px 13px;
    background: url(../img/side_box_middle.png) repeat-y left top;
}
#sidebar .side_box .bottom
{
    height: 12px;
    background: url(../img/side_box_bottom.png) no-repeat left top;
}

/* SideBox Unordered list */
#sidebar .side_box .middle ul
{
    
    font-family: Trebuchet MS;
    font-size: 13px;
}
#sidebar .side_box .middle ul li
{
    padding-left: 17px;
    background: url(../img/bullet_1.png) no-repeat left 6px;
}
#sidebar .side_box .middle ul li a
{
    padding: 0 3px 1px;
    color: #fafafa;
}
#sidebar .side_box .middle ul li a:hover
{
    background-color: #f8991d;
}
#sidebar .side_box .middle ul li.categories
{
	padding-left: 0;
	background: none;
}
#sidebar .side_box .middle ul li.linkcat
{
	padding-left: 0;
	background: none;
}
/* SideBox About Me */
#sidebar #about_me .middle
{
    height: 165px;
}
#sidebar #about_me .middle p
{
    width: 148px;
    line-height: 1.1em;
}
#sidebar #about_me .middle p a
{
	color: #FAFAFA;
	font-weight: bold;
}
#sidebar #about_me .middle p a:hover
{
	background-color: #F8991D;
}
#sidebar #about_me .middle img.hasan_mahmud
{
    position: absolute;
    bottom: -6px;
    right: 6px;
}
/* --------------------- Contact Us ------------------ */
#contact_form .left
{
	float: left;
	width: 255px;
	padding-right: 20px;
}
#contact_form .right
{
	float: right;
	width: 255px;
}

#contact_form label
{
    font-weight: bold;
	width: 253px;
}
#contact_form label span
{
    font-weight: normal;
    color: #F8991D;
}
#contact_form input
{
    display: block;
    width: 247px;
    color: #FAFAFA;
    margin: 3px 0 10px;
    padding: 3px 3px 2px;
    background: url(../img/transparent_bg_2.png) repeat left top;
}
#contact_form textarea
{
	float: right;
    display: block;
    width: 247px;
    height: 127px;
    color: #FAFAFA;
    margin-top: 3px;
    padding: 3px 3px 2px;
    background: url(../img/transparent_bg_2.png) repeat left top;    
}
#contact_form input.submit
{
	width: 65px;
    height: 24px;
    color: #fff;
    border: none;
    padding: 0px 7px 2px;
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    background: url(../img/submit_button.png) repeat-x;
    background-position: left top;
}
#contact_form input.submit:hover
{
    color: #fff;
    background-position: left bottom;
}
/* --------------------- Footer ---------------------- */
#footer
{
    position: relative;
    height: 42px;
    color: #bebebe;
    background: url(../img/transparent_bg_1.png) repeat;
}
#footer span.artofcss
{
    position: absolute;
    left: 20px;
    top: 11px;
}
#footer span.artofcss a
{
    color: #f8991d;
    font-weight: bold;
}
#footer span.artofcss a:hover
{
    color: #bebebe;
}
#footer span.standard
{
    position: absolute;
    right: 95px;
    top: 11px;
}
#footer span.standard a
{
    padding: 5px;
    color: #bebebe;
    margin-right: 3px;
    background: url(../img/pattern_2.png) repeat fixed left 2px;
}
#footer span.standard a:hover
{
    color: #f8991d;
}
#footer span.hmdesign
{
    position: absolute;
    right: 20px;
    top: 11px;
}
#footer span.hmdesign a
{
    color: #f8991d;
    font-weight: bold;
}
#footer span.hmdesign a:hover
{
    color: #bebebe;
}