/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* base */
html { background: url(../images/html.png) repeat-x 0 0; }
body { font: 15px/1.4em arial, sans-serif; color: #333; background: url(../images/header.png) no-repeat 50% 0; }
h2 { position: relative; height: 66px; line-height: 45px; text-align: center; }
a { font-weight: bold; text-decoration: none; color: #c00; }
a:hover { text-decoration: underline; }
b { position: absolute; left: 0; width: 100%; top: 0; height: 100%; }
input,
select,
textarea { margin: 0; border: 0; padding: 0; font: 15px arial, sans-serif; color: #333; background: transparent; }

/* header */
#header { width: 940px; height: 180px; margin: 0 auto; }
/* header - logo */
#logo { float: left; width: 187px; margin: 33px 0 0 90px; }
#logo a { position: relative; display: block; height: 79px; line-height: 79px; text-align: center; }
#logo b { background: url(../images/header.png) -260px -33px; }
/* header - search form */
#header>form { float: right; margin-top: 59px; }
#header>form label { display: none; }
#header>form input.input { float: left; width: 190px; height: 30px; margin-right: 20px; padding: 0 7px; background: transparent; }
#header>form input.submit { float: left; width: 76px; height: 30px; }
/* header - menu */
#header>ul { clear: right; float: right; margin-top: 24px; }
#header>ul>li { float: left; margin-left: 5px; }
#header>ul>li.main { width: 82px; }
#header>ul>li.blog { width: 83px; }
#header>ul>li.faq { width: 95px; }
#header>ul>li.categories { width: 128px; }
#header>ul>li.categories:hover { position: relative; z-index: 1001; }
#header>ul>li>a,
#header>ul>li>span { position: relative; display: block; height: 47px; line-height: 47px; text-align: center; }
#header>ul b { background: url(../images/menu.png); }
#header>ul li.main b { background-position: 0 0; }
#header>ul li.main.active b { background-position: 0 -47px; }
#header>ul li.blog b { background-position: -82px 0; }
#header>ul li.blog.active b { background-position: -82px -47px; }
#header>ul li.faq b { background-position: -165px 0; }
#header>ul li.faq.active b { background-position: -165px -47px; }
#header>ul li.categories b { background-position: -260px 0; }
#header>ul li.categories:hover b { width: 143px; height: 41px; background-position: -260px -47px; }
#header>ul li.categories ul { display: none; position: absolute; left: 2px; width: 140px; top: 41px; border: solid rgba(153, 153, 153, 0.3); border-width: 0 1px 1px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; padding-bottom: 5px; font-size: 13px; background: #f93; -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; }
#header>ul li.categories li { margin: 0 10px; border-top: 1px solid #fff; padding: 0.3em 0; }
#header>ul li.categories li:first-child { border-top: 0; }
#header>ul li.categories li a { display: block; line-height: 1.2em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 0.1em 10px; font-weight: normal; color: #fff; }
#header>ul li.categories li a:hover { text-decoration: none; color: #000; background: #fff; }
                                                                                                                                                                                                                                                                                                                           
#header>ul li.categories:hover ul { display: block; }

/* wrapper */
#wrapper { width: 940px; margin: 0 auto; }

/* common */
/* common - whisper */
div.whisper,
ul.whisper-list>li { padding: 8px 19px 16px; }
div.whisper p,
ul.whisper-list>li p { margin-top: 0.35em; }
div.whisper p.report,
ul.whisper-list>li p.report { float: right; line-height: 1.6em; margin: 0 0 0 15px; font-size: 12px; }
div.whisper p.category,
ul.whisper-list>li p.category { float: right; line-height: 1.6em; margin: 0 0 0 15px; font-size: 12px; }
ul.whisper-list>li p.fb-like-button { float: left; margin-top: 0;  }
div#whisper-of-the-day div.whisper p.fb-like-button { float: right; margin-top: 0;  }
div.whisper p.date,
ul.whisper-list>li p.date { float: right; line-height: 1.6em; margin-top: 0; font-size: 12px; color: #999; }
div.whisper p.date+br,
ul.whisper-list>li p.date+br { clear: both; }
div.whisper>ul,
ul.whisper-list>li>ul { height: 65px; margin-top: 15px; }
div.whisper>ul li,
ul.whisper-list>li>ul li { float: left; }
div.whisper>ul li.like,
ul.whisper-list>li>ul li.like { width: 132px; }
div.whisper>ul li.dislike,
ul.whisper-list>li>ul li.dislike { width: 135px; margin-left: 10px; }
div.whisper>ul li.comment,
ul.whisper-list>li>ul li.comment { width: 145px; margin-left: 10px; }
div.whisper>ul li.share,
ul.whisper-list>li>ul li.share { width: 141px; margin-left: 9px; }
div.whisper>ul a,
ul.whisper-list>li>ul a { display: block; height: 46px; line-height: 1.4em; padding: 19px 10px 0 48px; font-size: 11px; font-weight: normal; background: url(../images/action.png); }
div.whisper>ul a:hover,
ul.whisper-list>li>ul a:hover { text-decoration: none; }
div.whisper>ul a:focus,
ul.whisper-list>li>ul a:focus { outline: 0; }
div.whisper>ul li.like a,
ul.whisper-list>li>ul li.like a { background-position: 0 0; }
div.whisper>ul li.like.disabled a,
ul.whisper-list>li>ul li.like.disabled a { background-position: 0 -65px; }
div.whisper>ul li.dislike a,
ul.whisper-list>li>ul li.dislike a { background-position: -132px 0; }
div.whisper>ul li.dislike.disabled a,
ul.whisper-list>li>ul li.dislike.disabled a { background-position: -132px -65px; }
div.whisper>ul li.comment a,
ul.whisper-list>li>ul li.comment a { padding-left: 52px; background-position: -267px 0; }
div.whisper>ul li.share a,
ul.whisper-list>li>ul li.share a { background-position: -412px 0; }
div.whisper>ul strong,
ul.whisper-list>li>ul strong { position: relative; display: block; text-align: center; }
div.whisper>ul b,
ul.whisper-list>li>ul b { background: url(../images/action.png); }
div.whisper>ul li.like b,
ul.whisper-list>li>ul li.like b { background-position: -48px -19px; }
div.whisper>ul li.like.disabled b,
ul.whisper-list>li>ul li.like.disabled b { background-position: -48px -84px; }
div.whisper>ul li.dislike b,
ul.whisper-list>li>ul li.dislike b { background-position: -180px -19px; }
div.whisper>ul li.dislike.disabled b,
ul.whisper-list>li>ul li.dislike.disabled b { background-position: -180px -84px; }
div.whisper>ul li.comment b,
ul.whisper-list>li>ul li.comment b { background-position: -319px -19px; }
div.whisper>ul li.share b,
ul.whisper-list>li>ul li.share b { background-position: -460px -19px; }
div.whisper>ul span,
ul.whisper-list>li>ul span { color: #fff; }
p.whisper-body { overflow-x: hidden; }
p.whisper-body a { display: block; font-weight: normal; color: #333333; }
/* common - create whisper */
#create-whisper { padding: 5px 15px; }
#create-whisper label { display: block; line-height: 3em; }
#create-whisper textarea { width: 245px; height: 142px; border: 1px solid #666; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px; }
#create-whisper div.select { float: left; height: 29px; border: 1px solid #666; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#create-whisper div.select select { margin: 5px 5px 0; }
#create-whisper div.select+br { clear: both;  }
#create-whisper img { margin-bottom: 10px; border: 1px solid #666; vertical-align: middle; }
#create-whisper input { width: 110px; height: 29px; border: 1px solid #666; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 0 5px; }
#create-whisper input.submit { float: right; width: auto; height: auto; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 0; }
#create-whisper .errorMessage { line-height: 2em; color: #900; }
/* common - repost whisper */
form.report-whisper { padding: 5px 15px; }
form.report-whisper label { display: block; line-height: 3em; }
form.report-whisper p { line-height: 1.4em; padding: 0.3em 0; font-size: 13px; }
form.report-whisper textarea { width: 245px; height: 142px; border: 1px solid #666; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px; }
form.report-whisper input.submit { float: right; width: auto; height: auto; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 0; }
form.report-whisper .errorMessage { line-height: 2em; color: #900; }

/* content */
/* content - info */
div.info { margin-bottom: 15px; font-weight: bold; color: #8da9a9; }
#content { float: left; width: 620px; margin-bottom: 50px; }
/* content - filter */
#filter { height: 46px; margin: 16px 0 6px; }
#content>#filter:first-child { margin-top: 0; }
#filter li { float: left; margin-right: 6px; }
#filter li.all { width: 87px; }
#filter li.best { width: 96px; }
#filter li.worst { width: 129px; }
#filter li.random { width: 138px; }
#filter a { position: relative; display: block; height: 46px; line-height: 46px; text-align: center; }
#filter b { background: url(../images/filter.png); }
#filter li.all b { background-position: 0 0; }
#filter li.all.active b { background-position: 0 -46px; }
#filter li.best b { background-position: -87px 0; }
#filter li.best.active b { background-position: -87px -46px; }
#filter li.worst b { background-position: -183px 0; }
#filter li.worst.active b { background-position: -183px -46px; }
#filter li.random b { background-position: -312px 0; }
#filter li.random.active b { background-position: -312px -46px; }
#filter+h2 { display: none; }
/* content - whisper */
#content>div.whisper { margin-bottom: 20px; border: 1px solid #99b3b3; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding-left: 18px; padding-right: 18px; }
/* content - whisper list */
#content ul.whisper-list { border-top: 9px solid #ffe9d2; }
#content ul.whisper-list>li { border-bottom: 9px solid #ffe9d2; }
/* content - whisper of the day */
#whisper-of-the-day { border: 1px solid #99b3b3; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#whisper-of-the-day h2 { float: left; width: 186px; height: 61px; margin: -27px 0 0 14px; }
#whisper-of-the-day h2 b { height: 66px; background: url(../images/title-whisper-of-the-day.png); }
#whisper-of-the-day div.whisper { padding-left: 18px; padding-right: 18px; }
/* content - back to main page */
p.back-to-mainpage { float: right; }
p.back-to-mainpage a { position: relative; display: block; width: 220px; height: 49px; line-height: 45px; margin-right: 246px; text-align: center; }
p.back-to-mainpage b { background: url(../images/title-latest-whispers.png); }
/* content - comment list */
#comment-list .comment-list { line-height: 1.4em; margin-bottom: 20px; border-top: 9px solid #ffe9d2; font-size: 13px; }
#comment-list h2 { width: 151px; margin-bottom: 16px; }
#comment-list h2 b { background: url(../images/title-comments.png); }
#comment-list .comment-list>li { border-bottom: 9px solid #ffe9d2; padding: 7px 0; overflow: hidden; }
#comment-list .comment-list p.id { float: left; height: 1.3em; line-height: 1.4em; margin-right: 1ex; }
#comment-list .comment-list p.date { color: #999; }
#comment-list ul+p { margin-top: 20px; }
/* content - create comment */
form#create-comment { line-height: 1.4em; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 20px 10px; font-size: 13px; background: #ffe9d2; }
form#create-comment fieldset { float: left; width: 280px; padding: 0 10px; }
form#create-comment label { display: block; width: 270px; padding: 0.5em 0; }
form#create-comment input { width: 268px; height: 28px; border: 1px solid #ffd3a7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 0 5px; background: #fff; }
form#create-comment input.submit { float: right; width: 86px; height: 43px; margin: 10px -4px 0 0; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 0; background: transparent; }
form#create-comment textarea { width: 268px; height: 203px; border: 1px solid #ffd3a7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px; background: #fff; }
form#create-comment div.captcha { width: 120px; margin-bottom: 0.5em; border: 1px solid #ffd3a7; }
form#create-comment div.captcha img { vertical-align: middle; }
form#create-comment .errorMessage { padding: 0.5em 0; color: #900; }
form#create-comment>br { clear: both; }
/* content - pager */
#content #pager { line-height: 30px; margin: 20px 0; text-align: center; }
#content #pager li { display: inline; line-height: 30px; margin-left: 10px; }
#content #pager li:first-child { margin-left: 0; }
#content #pager li.first,
#content #pager li.last { display: none; }
#content #pager a { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 6px 10px; font-weight: normal; color: #000; background: #ffe9d2; }
#content #pager a:hover { text-decoration: none; }
#content #pager li.selected a { background: #f93; }

/* static content */
.static-content h2, .static-content p { margin-bottom: 20px; }
.static-content h2 { margin-bottom: 20px; height: auto; line-height: 20px; font-size: 16px; font-weight: bold; text-align: left; }
.static-content p.indent > span { display: block; padding-left: 21px; }
.static-content strong { font-weight: bold; }

/* after 18 */
#after-18 h2 { margin-bottom: 10px; height: auto; line-height: normal; color: #c00; font-size: 18px; text-align: left; }
#after-18 form { margin-top: 15px; }
#after-18 button { margin-right: 5px; padding: 8px; cursor: pointer; background: #c00; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.45); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.45); box-shadow: 0 0 3px rgba(0, 0, 0, 0.45); color: #fff; }

/* sidebar */
#sidebar { float: right; width: 300px; margin-bottom: 50px; }
/* sidebar - init create whisper */
#sidebar #init-create-whisper { height: 294px; margin-bottom: 20px; background: url(../images/create-whisper.png); }
#sidebar #init-create-whisper h2 { height: 57px; line-height: 57px; }
#sidebar #init-create-whisper h2 b { background: url(../images/create-whisper.png); }
#sidebar #init-create-whisper label { display: none; }
#sidebar #init-create-whisper textarea { width: 245px; height: 142px; margin: 0 17px; padding: 5px 5px 15px 10px; }
#sidebar #init-create-whisper input { margin: 16px 0 0 198px; }
/* sidebar - latest comments */
#latest-comment-list { margin-bottom: 20px; }
#latest-comment-list h2 { width: 250px; margin-bottom: 16px; }
#latest-comment-list h2 b { background: url(../images/title-latest-comments.png); }
#latest-comment-list .comment-list { line-height: 1.4em;  border-top: 9px solid #ffe9d2; font-size: 13px; }
#latest-comment-list .comment-list>li { border-bottom: 9px solid #ffe9d2; overflow: hidden; }
#latest-comment-list .comment-list a { display: block; padding: 7px 0; font-weight: normal; text-decoration: none; color: #333; }
#latest-comment-list .comment-list strong { float: left; height: 1.3em; line-height: 1.4em; margin-right: 1ex; font-weight: bold; color: #c00; }
#latest-comment-list .comment-list a:hover strong { text-decoration: underline; }
#latest-comment-list .comment-list span.date { color: #999; }
/* sidebar - nlc news */
#nlc-news { margin-bottom: 17px; }
#nlc-news h2 { width: 163px; margin-bottom: 8px; }
#nlc-news h2 b { background: url(../images/title-nlc-news.png); }
#nlc-news li,
#nlc-news li>h3,
#nlc-news li>h3>a { background: url(../images/gradient-border-box.png) no-repeat; }
#nlc-news li { margin-bottom: 2px; background-position: -310px 0; background-repeat: repeat; }
#nlc-news li>h3 { background-position: top left; }
#nlc-news li>h3>a { display: block; padding: 13px 24px; background-position: bottom right; line-height: 18px; }
/* sidebar - ad */
#sidebar .ad { margin-bottom: 20px; }
#sidebar .ad h2 { height: auto; line-height: normal; color: #999; font-size: 9px; font-weight: normal; text-align: left; }

/* footer */
#footer { clear: both; background: #c00; }
#footer ul { width: 940px; line-height: 55px; margin: 0 auto; font-size: 13px; text-align: center; }
#footer ul li { display: inline; }
#footer ul a { border-left: 1px solid #f0b3b3; padding: 0 1ex 0 2ex; font-weight: normal; color: #f0b3b3; }
#footer ul li:first-child a { border-left: 0; }
#footer p { width: 940px; line-height: 2em; margin: 0 auto; padding-bottom: 3em; font-size: 11px; text-align: center; color: #e68080; }

/* jquery ui */
.ui-widget-overlay { position: absolute; left: 0; width: 100%; top: 0; height: 100%; background: #000; opacity: 0.5; }
.ui-dialog { position: absolute; width: 300px; border: 1px solid #333; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.45); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.45); box-shadow: 0 0 20px rgba(0, 0, 0, 0.45); background: #fff; }
.ui-dialog-titlebar .ui-dialog-title { display: none; }
.ui-dialog-titlebar .ui-dialog-titlebar-close { float: right; z-index: 100; margin: 16px 16px 0 0; width: 12px; height: 12px; background: url(../images/close.png) no-repeat; }
.ui-dialog-titlebar .ui-dialog-titlebar-close span { display: none; }
/* jquery ui - create whisper */
.ui-dialog #create-whisper { padding-bottom: 15px; }

.fullwidth {
    width: 100%;
}

.block {
    display: block;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

div.whisper-header {
    float: right;
    margin-left: 10px;
}