/*
Theme Name: HatFace Default
Theme URI: http://hatface.com/
Description: The default hatface.com based Blueprints css
Version: 1.0
Author: Tite T. NGOY-THA
Author URI: http://ngoytha.com
Tags: blue, custom header, fixed width, two columns, widgets
Text Domain: hatface

*/


/*
 -------------------------------------------------------------------------------
 TYPOS
 -------------------------------------------------------------------------------
*/

#north #searchform #searchsubmit {
    font-size: 1px;
    text-indent: -1000px;
}

body {
    font-family:"Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
    text-align: left;
    font-size: 11px;
}

#north #navigation a {
    font-weight: bold;
    font-size: 11px;
    text-transform: capitalize;
}

.search .page h2.title,
.post h2.title,
.post .hd h2 {
    font-size: 14px;
    font-weight: bold;
    text-transform:none !important;

    border-bottom: 1px solid #eee;
}


.search .page .hd .meta,
.post .hd .meta {
    font-size: 10px;
    font-family: verdana;
    text-transform: capitalize;
}

.search .page .entry,
.search .page .entry *,
.post .entry,
.post .entry * {
    text-align: justify;
}


.search .page .hd .meta a,
.post .hd .meta a {
    font-weight: bold;
}

.search .page .meta,
.inner .post .meta {
    padding-top: 5px;
}

/*
 -------------------------------------------------------------------------------
 GRAPHICS
 -------------------------------------------------------------------------------
*/

body {
    background-image: url('img/bg_body.jpg');
    background-repeat: repeat;
    background-color: #fff;
    color: #777;

}

#north #logo {
    background-image: url('img/logo-trans.png');
    background-repeat: no-repeat;
}

#north .logo-summer-2K9 {
    background-image: url('img/logo-trans-summer2K9.png') !important;
}

#north #searchform  {
    background-image: url('img/search_box.png');
    background-repeat: no-repeat;
    background-position: 0 3px;
}

#north #searchform  {
    padding: 0 0 0 5px;
    height: 30px;
}


#north #searchform *  {
    border: none;
    background: none;
}

#north #searchform #s  {
    width: 175px;
    color: #aaa;
}

#north #searchform #searchsubmit {
    background: none;
    color: #fff;
    font-size: 1px;
    text-indent: -1000px;
    cursor: pointer;
    *cursor: hand;
}

#north-center-north #sign span {
    background: url('img/sign-trans.png');
    background-repeat: no-repeat;
}

#north #navigation .hd {
    background: url('img/bg_dashed_x.png') repeat-x;
}


#north #navigation .ft {
    background: url('img/bg_dashed_x-2.png') repeat-x;
}

#north #navigation .bd {
    background: url('img/bg_nav.png') repeat-x;
}

#north #navigation a {
    color: #aaa;
    display: block;
    padding: 3px 7px 3px 7px;
}


#north #navigation a:hover {
    color: #555;
}

#north #navigation a .blue {
    color: #6493db;
}

#north #navigation li a {
    background: url('img/small_v_separator.png') 0 50% no-repeat;
}

#primary-links #labs {
    background-image: url('img/icon-imac.png');
}

#primary-links #play {
    background-image: url('img/icon-play.png');
}

#primary-links #writer {
    background-image: url('img/icon-writer.png');
}
#primary-links #guice {
    background-image: url('img/icon-hat.png');
    background-position: 0px 53%;
}
#primary-links #labs {
    background-image: url('img/icon-imac.png');
}


#secondary-links #touch {
    background-image: url('img/icon-contact.png');
}
#secondary-links #connect {
    background-image: url('img/icon-login.png');
}

.search .page img.style,
.post img.style {
    border: 1px solid #ddd;
    padding: 2px;
    background-color: #fff;
}

#sidebar .wrapper,
#content .wrapper {
    background-color: #fff;
    border: 1px solid #D3D7D8;
}

.search .page .hd h2,
.post .hd h2 {
    color: #f27cb5;
}

.search .page .hd,
.post .hd {
    background: url('img/bg_dashed_x-2.png') 0 80% repeat-x;
}

#submit, input.submit {
    background: #fff url('img/bg_gradient_x.png') repeat-x;
    color: #fff;
}

.search .page .hd .meta a,
.search .page .hd .meta strong,
.post .hd .meta a,
.post .hd .meta strong {
    color: #6493DE;
}


a {
    color: #6493DE;
}

a:hover {
    color: #f27cb5 !important;
}

 #content .post-end {
    background: url('img/paper_hr.png') 100% 50% no-repeat;
    padding: 10px 0 10px 0;
    height: 30px;
}

#respond #co {
    font-size: 11px;
    background: url('img/bg_nav.png') repeat-x;
    padding: 8px 0 8px 5px;
    color: #8F7474;
    font-weight: bold;
}

textarea {
    font-size: 11px;
    line-height: 18px;
    color: #888;
    border: 1px solid #eee;
}

#footer {
    background: url('img/bg_dashed_x-4.png') 50% 1px no-repeat;
    padding-bottom: 20px;
    display: block;
}

#footer .wrapper {
    padding-top: 10px;
    height: 20px;
}

/*
 -------------------------------------------------------------------------------
 LAYOUT
 -------------------------------------------------------------------------------
*/



#north-center {
    height: 124px;
}

#north-south {
    height: 29px;
}

#north #logo {
    display: block;
    height: 124px;
}

#north-center-north {
    height: 83px;
}


#searchform label {
    display: none;
}

#north #searchform  {
    width: 208px;
    margin: auto;
}

#north #searchform #s {
    padding-top: 3px;
}

#north #searchform #searchsubmit {
    width: 20px;
    height: 17px;
}

#north-center-north #sign {
    padding-top: 27px;
}

#north-center-north #sign span {
    width: 210px;
    height: 30px;
    display: block;
    margin: auto;
}

#north #navigation .hd,
#north #navigation .ft {
    height: 1px;
}

#north #navigation .bd {
    padding-top: 3px;
    height: 24px;
}

#north #navigation a {
    display: block;
    padding: 2px 7px 2px 7px;

}

#content .wrapper {
    padding: 10px 20px;
}

.search .page .hd h2,
.post .hd h2 {
    padding-bottom: 5px;
    margin: 0;
}

.search .page .hd,
.post .hd {
    padding-bottom: 40px;
}

#submit, input.submit {
    border: none;
    padding: 3px;
}

#commentform textarea {
    width: 80%;
    height: 100px;
}

.wpcf7-form-control-wrap textarea {
    height: 100px;
}

p {
    display: block;
    /* clear: both; */
    padding: 0 0 10px 0;

}

.search .page .onair_img,
.post .onair_img {
    width: 190px;
    height: 126px;
    border: 1px solid  #6493DE;
    background-position: 50% 0;
    background-repeat: no-repeat;
    display: block;
}

.panel .wrapper {
    padding: 0 10px ;
    display: block;
    background-color: #fff;
    border: 1px solid #CFE3FF;
    height: 260px;
    overflow: hidden;
}

.panel .hd {
    background: url('img/bg_dashed_x-3.png') 0 80% repeat-x;
    height: 25px;
}

#sidebar .widget h2 {
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    font-size: 9px;
    color: #F27CB5;
    display: block;
    padding: 4px 0 0 12px;
    height: 16px;
    font-weight: bold;
    font-family: verdana;
    background: url('img/bg_nav.png') repeat-x;
}


#sidebar .widget ul li,
#sidebar .widget ul ul li {
    display: block !important;
    background: url('img/bg_dashed_x-3.png') 0 0 repeat-x !important;
    padding-top: 4px;
}


#sidebar .widget {
        display: block;
    padding-bottom: 20px !important;
}

.panel .title {
    text-transform: uppercase;
    font-size: 8px;
    font-weight: bold;
    color: #86C0EF;
    display: block;
    padding-top: 4px;
    height: 8px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-image: none !important;
}

.panel h2 {
    margin: 0;
    padding: 10px 0 0 0;
    font-size: 10px;
    font-weight: bold;
}

.panel .entry {
    padding: 8px 5px 0 0;
}

.panel p {
    margin: 0;
    padding: 0;
    text-align: left !important;
    line-height: 14px;

}

.panel h2,
.panel small,
.panel .entry {
    padding-left: 2px;
}



#focus .entry {
    width: 200px;
}


#focus .title {
    background-image: url('img/title-panel-focus.png');
}

#vids .wrapper {
    background: #fff url('img/bg_dashed_x-3.png') 0 153px repeat-x ;
}

#vids .post .bloc {
    display: block;
    float: left;
    width: 160px;
    height: 220px;
    padding: 0 5px 10px 5px;
}


#vids .post .onair_img {
    background-position: 50% 50%;
    width: 160px;
    height: 115px;
    background-color: #222;
    border: none;
}

.panel .hscroller {
    width: 1000em;
}


#vids .title {
    background-image: url('img/title-panel-vids.png');
}

#vids h2 {
    padding-top: 12px;
}


#writer .title {
    background-image: url('img/title-panel-publication.png');
}

#writer .entry {
    width: 200px;
}

#writer .post .bloc {
    display: block;
    float: left;
}

.panel .carousel a {
    font-size: 16px;
    position: relative;
    top: -3px;
}

.panel .carousel a.disabled:hover,
.panel .carousel a.disabled {
    color: #eee !important;
}

.panel .carousel a:hover {
    color: #f00 !important;
}


.search .page .even,
.post .even {
    background-color: #f9f9f9;
}

.search .page .bloc,
.post .bloc {
    padding-top: 5px !important;
}

#recent-posts-title {
    background: url('img/bg_dashed_x-4.png') 0 18px repeat-x;
    height: 40px;
    display: block;
}

.archive-posts-title {
    background: url('img/bg_dashed_x-4.png') 0 0 repeat-x;
    height: 30px;
    padding-top: 5px;
    display: block;

}

.archive-posts-title .breadcrumb,
.archive-posts-title h2.pagetitle{
    font-size: 11px;
    font-weight: bold;
    color: #9F8181;
}


#recent-posts-title span {
    padding: 5px 0 5px 0;
    background: url('img/title-panel-posts.png')  0 22px no-repeat;
    height: 20px;
    display: block;
}

#content {
    overflow: hidden;
}

.search .page,
#content .post {
    padding: 0px;
    display: block;
    clear: both;
    background-color: #fff;
}

.posts-padding .post,
.search .page,
.frontpage .post {
    border-bottom: 2px solid #ccc;
    margin-bottom: 10px;
    padding: 10px !important;
}

.search .page .timestamp,
.post .timestamp {
    background: url('img/archive_off.png') 100% 50% no-repeat;
    padding-right: 20px;
}

.search .page .timestamp .date,
.post .timestamp .date {
    font-size: 10px;
    font-weight: bold;
}

.search .page .teaser_img,
.post .teaser_img  {
    border: 1px solid #eee;
}

.search .page .teaser_img a,
.post .teaser_img a {
    display: block;
}

.search .page .teaser_img a img,
.post .teaser_img a img {
    width: 89px;
    height: 80px;
    border: 1px solid #ccc;
    border: 5px solid #fff;
    display: block;
}

.frontpage .post small {
    font-size: 11px;
}

.frontpage .post h2.title {
    font-size: 12px;
    text-transform: none;
    margin: 0;
}

.search .page .entry,
.post .entry {
    padding-top: 10px;
}

.search .page .vvqbox,
.lightposts .post .vvqbox,
.search .page .vvqflv,
.lightposts .post .vvqflv,
.lightposts .video,
.search .page object,
.lightposts .post object,
.search .page img,
.lightposts .post img,
.search .page .wp-caption,
.lightposts .post .wp-caption {
    display: none;
}

.search .page .vvqbox,
.post .vvqbox {
    padding: 10px;
    border: 1px solid #000;
    display: block;
    background-color: #444;
}

.frontpage .postmetadata {
    padding: 5px 0 0 0;
    background: url('img/bg_dashed_x-3.png') 0 0 repeat-x;
    margin: 0;
}

.frontpage .post {
    padding: 20px;
}


#sidebar {
    padding-top: 17px;
}

.inner #sidebar {
    padding-top: 0px;
}

#sidebar .wrapper {
    padding: 5px;
    background-color: #fff;
}

#social  {
    border: none;
    height: 60px;
 }

#social #twitter a {
    background: url('img/followme.jpg') 0 0 no-repeat;
    width: 60px;
    height: 38px;
    display: block;
}

#social #facebook {
    padding-top: 5px;
}

#social #facebook a {
    background: url('img/facebook.jpg') 0 0 no-repeat;
    width: 80px;
    height: 24px;
    display: block;
}

#social #viadeo a {
    background: url('img/logoviaducblanc.gif') 0 0 no-repeat;
    width: 91px;
    height: 30px;
    display: block;
}


#wp-cumulus h2 {
    color: #fff;
    font-size: 1px;
    background: url('img/title-panel-tags.png') 0 0 no-repeat;
    height: 22px;
}

.copyright {
    color: #8B898A;
    text-align: center;
    font-size: 9px;
    font-family: verdana;
}

.shadow .white,
.copyright .white {
    color: #fff;
}

.shadow .color,
.copyright .color {
    position: relative;
    top: -14px;
    left: -1px;
}


.post * {
    text-indent: 0;
}


.post strong {
}


.tags {
    background: url('img/tags_off.png') 0 0 no-repeat;
}

.comments {
    background: url('img/comment_off.png') 0 0 no-repeat;
}

.filedin {
    background: url('img/filedin_off.png') 0 0 no-repeat;
}

.postmetadata .filedin,
.postmetadata .comments,
.postmetadata .tags {
    padding-left: 16px;
}


.commentlist {
    padding: 20px 0 20px 10px;
}


.commentlist .commentbody {
    padding-top: 5px;
}

.commentlist * {
    font-size: 11px !important;
    font-family: verdana;
    text-transform: none !important;
    font-style:normal !important;
}

.commentlist .commentbody * {
    color: #777;
}


.commentlist .comment-wrapper {
    padding: 5px;
    display: block !important;
    clear: both;
    background: url('img/bg_dashed_x-3.png') 0 0 repeat-x;
}

.commentlist .odd .comment-wrapper {
    background-color: #fafafa;

}

.commentlist {
    clear: both;
    display: block;
    background: url('img/bg_dashed_x-2.png') 0 100% repeat-x;
}

#respond {
    padding-top: 10px;
}

.comment-wrapper * {
    padding: 0px;
    margin: 0px;
}

#respond h3 {
    background: url('img/bg_nav.png') 0 0 repeat-x;
    color: #9F8181;
    font-size: 11px;
    padding: 6px 0 6px 5px;
    font-weight: bold;
    border: 1px solid #eee;
    position: relative;
}

#banner,
#banner .inherit {
    height: 115px !important;
    display: block !important;
}

#holidays-summer-2K9 {
    background: url('img/banners/holidays_2K9.png') 50% 100% no-repeat;
    height: 115px;
    display: block;
}

#beta {
    background-position: 40% 100%;
    background-repeat: no-repeat;
    background-image: url('img/beta.png');
    height: 80px;
}
.panel .navigation {
    display: none;
}

.panel .carousel {
    display: block;
}

.breadcrumb {
    padding-bottom: 10px;
}

.wpcf7 input {
    padding: 4px;
    color: #888;
}

.wpcf7 .submit {
    color: #fff;
}

.span-40 {
    padding-top: 5px;
}

.wp-pagenavi {
    padding-top: 8px;
    display: block;
    clear: both;
    height: 26px;
    border-bottom: 1px solid #ccc;
    background: url('img/bg_dashed_x-4.png') repeat-x;
    text-align: right;
}


.wp-pagenavi * {
    background: none !important;
    border: none !important;
    font-weight: bold;
}

.wp-pagenavi .current {
}

#wpcumuluswidgetcontent {
    margin: auto;
    width: 250px;
    height: 250px;
}

#sidebar .widget_archive {
     margin-bottom: 30px;
	 padding-bottom: 40px;
	display: block;
	clear: both;
}

.widget_archive li {
    text-transform: uppercase;
     float: left;
    display: block;
    padding: 0 5px 0 5px;
    border-right: 1px solid #eee;
    font-size: 9px;
}

#yarpp a {
    display: block
}

#yarpp small {
    font-size: 11px;
}

#yarpp abbr {
    display: none;
}

.widget_tag_cloud div {
    padding: 0 8px 0 10px;
    text-align: center;
}



#ripie6 {
    padding-top: 100px;
}

#ripie6 .wrapper {
    margin: auto;
    width: 273px;

}
#ripie6 .wrapper .image {
    width: 250px;
    text-align: center;
    background: url('http://r.hatface.com/images/labs/ripie6.jpg') 50% 50% no-repeat;
    height: 308px;
    border: 10px solid #584E07;
}

#ripie6 .wrapper .text {
    width: 260px;
    text-align: center;
    font-weight: bold;
    margin: auto;
    font-size: 12px;
    padding-bottom: 5px;
}


#ripie6 .wrapper .color {
    position: relative;
    top: -18px;
}

.greencode,
ul.greencode,
ul.green {
  margin: 0 !important;
  padding : 5px 0 5px 10px;
  border-left: 5px solid #9BBF8F;
  background-color: #f3f3f3;
}

code {
    font-family: courier, "courier new";
    padding: 10px;
    display: block;
    border: 1px dashed #ccc;
    background-color: #EFF3F4;
    text-align: left !important;
}


ul.green li {
    display: block;
}


.post p {
    padding: 3px 0 3px 0 !important;
    margin: 0 0 0 0 !important;
}

.syntaxhighlighter .show .toolbar a.about {
    display: none !important;
}


#related {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 20px;
}


#content #related h3 {
    font-size: 12px;
    background-color: #F27CB5;
    padding: 5px;
    color: #fff;
    font-weight: bold;
}

#content #related ol {
    padding-left: 5px;
    line-height: 20px;
}

#content #related abbr {
    display: none !important;
}