/*
	Hotwave Όφ®φΊτ (http://hotwave.cc)
	Author: underfire
	=========================================================
	Copyright (c) underfire (http://i-design.tw).
	=========================================================
*/

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #333;
}

a:link {
    color: #1b9ef1;
    text-decoration: none;
}

a:visited {
    color: #438cba;
    text-decoration: none;
}

a:hover, a:active {
    color: #de263e;
    text-decoration: none;
}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

#wrapper {
    margin: 0 auto;
    width: 960px;
}

input, select, textarea {
    color: #555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* Menu
-----------------------------------------------------------------------------*/

.menu, .menu li,
#sidebar .social, 
#sidebar .social li,
ul.faq, ul.faq li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menu li {
    float: left;
}

/* Header
-----------------------------------------------------------------------------*/

#header h1 {
    margin: 10px 0 5px;
}

#header h1 a {
    display: block;
    background: url(../images/h1.png) left top no-repeat;
    width: 241px;
    height: 98px;
    text-indent: -9999em;
}

/* Header >> Tabnav
-----------------------------------------------------------------------------*/

#tabnav {
    background: url(../images/tabnav.png) left top no-repeat;
    margin-bottom: 40px;
    padding: 0 10px 0 0;
    height: 51px
}

#tabnav .menu {
    float: left;
}

#tabnav li {
    background: url(../images/tabnav-partition.png) right top no-repeat;
}

#tabnav li a {
    display: block;
    float: left;
    padding: 0 20px;
    height: 51px;
    font-size: 15px;
    font-weight: bold;
    line-height: 51px;
    color: #aaa;
    text-shadow: 0 1px 1px #fff;
}

#tabnav li a:hover {
    color: #cb213f;
}

#tabnav .current a,
#tabnav .current a:hover {
    background: url(../images/tabnav-current.png) center top no-repeat;
    color: #fff;
    cursor: default;
    text-shadow: 0 -1px 1px #333;
}

#tabnav .frist.current a,
#tabnav .frist.current a:hover {
    background: url(../images/tabnav-frist-current.png) left top no-repeat;
    position: relative;
}

#tabnav .frist.current a span {
    background: url(../images/icon-selected.png) left top no-repeat;
    margin-left: -5px;
    width: 9px;
    height: 5px;
    position: absolute;
    left: 50%;
    bottom: 0px;
}

.search {
    float: right;
    background: url(../images/search.png) left top no-repeat;
    margin-top: 10px;
    width: 290px;
    height: 30px;
    position: relative;
}

.search .text {
    background: transparent;
    border: 0;
    padding: 6px 0 0 10px;
    width: 240px;
    font-size: 15px;
}

.search .submit {
    display: block;
    background: url(../images/icon-magnifier.png) left top no-repeat;
    border: 0;
    width: 24px;
    height: 24px;
    text-indent: -9999em;
    position: absolute;
    right: 10px;
    top: 3px;
    cursor: pointer;
}

.search .submit:hover {
    background: url(../images/icon-magnifier.png) left bottom no-repeat;
}

/* Header >> Subnav
-----------------------------------------------------------------------------*/

.subnav {
    margin-bottom: 36px;
}

.subnav li {
    margin-right: 8px;
    padding-right: 8px;
    border-right: 1px #ddd dotted;
}

.subnav li.last {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
}

.subnav li a {
    display: block;
    float: left;
    padding-left: 26px;
    color: #aaa;
    line-height: 23px;
}

.subnav li a:hover {
    color: #000;
}

.subnav .current a {
    color: #000;
}

.subnav .all {
    background: url(../images/icon-category.png) left 2px no-repeat;
}

.subnav .video {
    background: url(../images/icon-category.png) left -27px no-repeat;
}

.subnav .photo {
    background: url(../images/icon-category.png) left -57px no-repeat;
}

.subnav .news {
    background: url(../images/icon-category.png) left -87px no-repeat;
}

/* Container
-----------------------------------------------------------------------------*/

#container {
    margin-bottom: 40px;
}

#main {
    float: left;
    width: 620px;
}

#sidebar {
    float: right;
    width: 300px;
}

/* Listing
-----------------------------------------------------------------------------*/

.listing {
    border-bottom: 1px #ddd dotted;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.story .listing {
    border-bottom: 0;
    margin-bottom: 30px;
    padding-bottom: 0;
}

.listing .spray {
    float: left;
    display: block;
    background: url(../images/spray.png) left top no-repeat;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 0 15px 0 0;
    padding: 8px 2px 0 0;
    width: 66px;
    height: 60px;
    font-size: 16px;
    line-height: 1.2;
    color: #de263e;
    text-align: center;
}

.listing .spray span {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: #aaa;
}

.listing .spray:hover {
    color: #000;
}

.listing .intro {
    float: left;
    width: 410px;
    line-height: 1.2;
}

.listing h2 {
    margin: 2px 0 10px;
    font-size: 16px;
    font-weight: 400;
}

.listing .info {
    margin-bottom: 4px;
    font-size: 12px;
    color: #aaa;
}

.listing .info span {
    display: block;
    float: left;
    margin-right: 10px;
    padding-left: 18px;
}

.listing .comment {
    background: url(../images/icon-info.gif) left 1px no-repeat;
}

.listing .comment a {
    font-weight: bold;
    text-decoration: underline;
}

.listing .time {
    background: url(../images/icon-info.gif) left -19px no-repeat;
}

.listing .info .site {
    padding-left: 0;
}

.listing .site a {
    color: #000;
}

.listing .site a:hover {
    color: #de263e;
}

.listing .site img {
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
}

.listing .share {
    margin-bottom: 0;
    font-size: 12px;
    color: #aaa;
}

.listing .share a {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-indent: -9999em;
}

.listing .share .facebook {
    background: url(../images/icon-social.png) left top no-repeat;
    margin-left: 6px;
}

.listing .share .plurk {
    background: url(../images/icon-social.png) left -20px no-repeat;
}

.listing .share .twitter {
    background: url(../images/icon-social.png) left -40px no-repeat;
}

.listing .photo {
    float: right;
    margin-bottom: 0px;
}

.listing .photo a {
    display: block;
    float: right;
    padding: 1px;
    position: relative;
}

.listing .photo img {
    display: block;
    border: 1px #ddd solid;
    padding: 1px;
    width: 120px;
    height: 90px;
}

.listing .photo span {
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 5px;
    bottom: 5px;
}

.listing .picture span {
    background: url(../images/icon-picture.gif) left top no-repeat;
}

.listing .picture:hover span {
    background: url(../images/icon-picture-hover.gif) left top no-repeat;
}

.listing .video span {
    background: url(../images/icon-video.gif) left top no-repeat;
}

.listing .video:hover span {
    background: url(../images/icon-video-hover.gif) left top no-repeat;
}

/* Pagination
-----------------------------------------------------------------------------*/

.pagination {
    padding-top: 15px;
}

.pagination a, 
.pagination span {
    display: block;
    float: left;
    margin-right: 3px;
    padding: 0 7px;
    line-height: 20px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.pagination a {
    border: 1px #ddd solid;
}

.pagination a:hover {
    background: #1b9ef1;
    border: 1px #1b9ef1 solid;
    color: #fff;
}

.pagination span {
    font-weight: bold;
}

/* Sidebar
-----------------------------------------------------------------------------*/

#sidebar .intro {
   font-size: 15px;
   line-height: 1.2;
}

#sidebar .ad {
    margin-bottom: 20px;
}

#sidebar .social li {
    margin-bottom: 8px;
}

#sidebar .social a {
    display: block;
    padding-left: 70px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    color: #000;
}

#sidebar .social .facebook a {
    background: url(../images/social-button.png) left top no-repeat;
}

#sidebar .social .facebook a:hover {
    background: url(../images/social-button.png) left -50px no-repeat;
}

#sidebar .social .plurk a {
    background: url(../images/social-button.png) left -100px no-repeat;
}

#sidebar .social .plurk a:hover {
    background: url(../images/social-button.png) left -150px no-repeat;
}

#sidebar .social .twitter a {
    background: url(../images/social-button.png) left -200px no-repeat;
}

#sidebar .social .twitter a:hover {
    background: url(../images/social-button.png) left -250px no-repeat;
}

/* Story
-----------------------------------------------------------------------------*/

.section .tabs {
    border-bottom: 3px #aa213a solid;
    margin-bottom: 30px;
}

.section .tabs li {
    margin-right: 3px;
}

.section .tabs a {
    display: block;
    float: left;
    background: url(../images/section-tabs.png) left bottom no-repeat;
    width: 160px;
    height: 30px;
    font-size: 15px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    color: #333;
}

.section .tabs a:hover {
    color: #c7203c;
}

.section .tabs .current a {
    background: url(../images/section-tabs.png) left top no-repeat;
    color: #fff;
}

.section .post {
    margin-bottom: 10px;
}

.section .avatar {
    display: block;
    float: left;
    padding: 3px;
    border-left: 1px #f2f2f2 solid;
    border-right: 1px #f2f2f2 solid;
    border-bottom: 1px #d7d7d7 solid;
}

.section .avatar img {
    display: block;
    width: 38px;
    height: 38px;
}

.section .content {
    float: right;
    background: url(../images/post.png) left bottom no-repeat;
    padding-bottom: 10px;
    width: 566px;
    line-height: 1.4;
}

.section .content-inner {
    background: url(../images/post.png) left top no-repeat;
    padding: 10px 12px 0 22px;
    height: 1%;
}

.section .content .nickname {
    color: #000;
}

.section .content .nickname:hover {
    text-decoration: underline;
}

.section .content .r_qualifier {
    display: inline-block;
    margin: 0 3px;
    padding:0 2px 1px 3px;
    font-size: 12px;
    color:#fff;
}

.section .content .q_shares {
    background-color: #A74949;
    border-bottom: 1px solid #454545;
    border-right: 1px solid #454545;
}

.section .content .q_says {
    background-color: #E2560B;
    border-bottom: 1px solid #994215;
    border-right: 1px solid #994215;
}

.section .content .ft {
    margin-bottom: 0;
    font-size: 12px;
    color: #aaa;
}

.section .content .time {
    display: block;
    float: left;
    background: url(../images/icon-info.gif) left -18px no-repeat;
    margin-right: 10px;
    padding-left: 18px;
}

/* Other
-----------------------------------------------------------------------------*/

.description {
    line-height: 1.6;
}

/* Footer
-----------------------------------------------------------------------------*/

#footer {
    background: url(../images/footer.png) left top repeat-x;
    padding: 40px 0 60px;
    line-height: 1.2;
}

#footer address {
    float: left;
    font-style: normal;
    color: #aaa;
}

#footer .menu {
    float: right;
}

#footer li {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px #ddd dotted;
}

#footer .frist {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

#footer li a {
    color: #000;
}

#footer li a:hover {
    color: #888;
}