/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.1.1
build: 47
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

html { height:100%;}
body {background:#7d7d7d url(/images/background-shadow.png) repeat-y center; color:#666; font-size:14px; font-family:Tahoma; overflow-x:hidden;}
p {font-size:12px;}
h1 {font-size:22px;}
h2 {font-size:18px;}
h3 {font-size:14px;}
/**********************
 *  header and nav bar
 *
***********************/
#container {width:1000px; margin:0 auto; background:#fff}
#header {font-size:16px; height:180px; background:#aaa; position:relative;}
#sitename {width:240px; height:90px; background:url(/images/sprite.png) no-repeat; float:left; margin:15px 0 0 0;}
#sitename a {display:block; text-indent:-2000px; width:240px; height:90px;}
#alpha {width:70px; height:70px; position:absolute; left:215px; top:5px;}
#header .ad {float:right; margin:25px 25px 0 0;}
#navigation {height:41px; list-style:none; clear:both; position:absolute; bottom:0; left:0;}
#navigation li {float:left; overflow:hidden; color:#fff; margin:0px 3px 0px 0px; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -moz-border-radius-topright:8px; -webkit-border-top-right-radius:8px; background:#7d7d7d;}
#navigation li:hover {background:#333;}
#navigation a {display:block; height:23px; text-decoration:none; color:#fff; padding:10px 25px 8px 25px;}
#navigation .first {height:50px; -moz-border-radius-topleft:0px !important; -webkit-border-top-left-radius:0px !important;}
#navigation .second {height:50px;}
#navigation .active {background:#fff; color:#666;}
#navigation .active a {color:#666;}
#navigation .active:hover {background-color:#fff;}
#search {float:right; font-size:16px; margin:30px 25px 0 0;}
#search-input {color:#666;-moz-border-radius: 5px; -webkit-border-radius: 5px; background:#fff url(/images/sprite.png) -495px 8px no-repeat; border:0; padding:5px 0 5px 25px; width:230px;}
#search-button {display:none;}



/**********************
 *  main page
 *
***********************/
#main-content {float:left; width:670px; margin:30px 15px 0px 15px;}
#main-content .horizontal-line {width:670px; height:8px; background:url(/images/sprite.png) 0px -100px repeat-x;}
#featured {position:relative; width:670px; height:353px;}
#featured-frame {position:relative; width:670px; height:353px; overflow:hidden;}
#featured-wrapper {width:2680px; height:353px;}
.featured-page {float:left; position:relative; width:670px; height:353px; }
#featured .banner-1 {position:absolute; width:258px; height:154px; overflow:hidden;}
#featured .banner-2 {position:absolute; right:0px; width:411px; height:199px; overflow:hidden;}
#featured .banner-3 {position:absolute; bottom:0px; width:258px; height:198px; margin-top:1px; overflow:hidden;}
#featured .banner-4 {position:absolute; left:258px; bottom:0px; width:201px; height:153px; margin-top:1px; margin-left:1px; overflow:hidden;}
#featured .banner-5 {position:absolute; right:0px; bottom:0px; width:209px; height:153px; margin-top:1px; overflow:hidden;}
#featured .caption { background-color:rgba(0,0,0,.75); padding:8px 8px 8px 10px; position:absolute; bottom:0; left:0; right:0; overflow:hidden; opacity:1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; /*filter:alpha(opacity=75.5);opacity:0.75;*/ }
#featured a {color:#fff; text-decoration:none;}
#featured a:hover {color:#aaa;}
#featured a:hover .caption { opacity:0;}
#arrow-left {cursor:pointer; width:40px; height:65px; background:url(/images/sprite.png) -250px 0px no-repeat; position:absolute; top:160px; left:-5px; z-index:10;}
#arrow-left:hover {position:absolute; top:160px; left:-7px;}
#arrow-right {cursor:pointer; width:40px; height:65px; background:url(/images/sprite.png) -300px 0px no-repeat; position:absolute; top:160px; left:640px; z-index:10;}
#arrow-right:hover {position:absolute; top:160px; left:642px;}
#page-dots {margin:0 auto; width:80px;}
.page-dot {float:left; margin:10px 0px 0px 10px; width:8px; height:8px; background:url(/images/sprite.png) -350px -50px no-repeat; cursor:pointer;}
.page-dot.active {background:url(/images/sprite.png) -370px -50px no-repeat !important;}
#content-left {width:670px;}
#content-left .content {margin:0 0 0 35px;}
#content-left .horizontal-line {width:630px; margin-left:40px;}
#content-left h2 {margin-left:40px;}
#hottopic-hour {margin-top:40px;}
#hottopic-hour .bullet {float:left; width:35px; height:35px; background:url(/images/sprite.png) -350px 0px no-repeat;}
#hottopic-today {margin-top:40px; clear:both;}
#hottopic-today .bullet {float:left; width:35px; height:35px; background:url(/images/sprite.png) -400px 0px no-repeat;}

.featured-item {float:left; width:280px; margin:15px 25px 15px 8px;}
.featured-item img {width:45px; height:45px; margin:0 4px 0 0;}
.featured-item .big-dots {font-size:28px; vertical-align:top;}
.featured-item a {font-size:12px; color:#3366cc; text-decoration:none;}
.featured-item a h3 {color:#666;}
.featured-item a h3:hover {color:#3366cc;}
.featured-item .quote {padding:0 0 0 25px; font-size:12px; background:url(/images/sprite.png) -822px -442px no-repeat;}
.featured-item .quote img {float:right; margin:0 0 0 25px;}
.featured-item .photos {margin:10px 0 0 25px; }
.featured-item .comments {font-size:10px; text-align:center; font-size:10px;  background:url(/images/sprite.png) -400px -50px no-repeat; display: inline-block; zoom: 1; *display: inline; margin-left: 5px; height: 20px; width:25px;}


/**********************
 *  rightside bar
 *
***********************/
#sidebar {float:right; width:271px; margin:69px 10px 15px 10px;}
#sidebar a {text-decoration:none;}
#ad-2 {margin-bottom:14px;}
#facebook-banner {float:left; background:url(/images/sprite.png) 0px -180px no-repeat; width:135px; height:80px;}
#facebook-banner:hover {background:url(/images/sprite.png) -300px -180px no-repeat; width:135px; height:80px;}
#twitter-banner {float:right; margin-left:1px; background:url(/images/sprite.png) -150px -180px no-repeat; width:135px; height:80px;}
#twitter-banner:hover {background:url(/images/sprite.png) -450px -180px no-repeat;}
#content-right {width:270px;}
#content-right .bullet {float:left; margin-top:45px; width:35px; height:35px; background:url(/images/sprite.png) -450px 0px no-repeat;}
#content-right h2 {width:200px; float:left; margin:50px 0 0 0;}
.favorite {float:left; padding:5px 0; height:50px; width:240px; font-size:12px; border-bottom:1px solid #ddd;}
.favorite-headline {float:left; height:50px; width:200px; font-size:12px;}
.favorite-headline a {display:block; height:50px; font-size:12px; color:#666; text-decoration:none;}
.favorite-headline a:hover {font-size:12px; color:#3366cc; text-decoration:none;}
.favorite .read {cursor:pointer;float:right; margin-top:10px; width:25px; height:30px; background:url(/images/sprite.png) -320px -300px no-repeat; z-index:100px; display:none;}
.favorite .read:hover {float:right; margin-top:10px; width:25px; height:30px; background:url(/images/sprite.png) -370px -300px no-repeat; z-index:100px;}

#affiliate .bullet {float:left; margin:15px 5px 5px 0; width:35px; height:35px; background:url(/images/sprite.png) -320px -340px no-repeat;}
#affiliate h2 {width:200px; float:left; margin:20px 0 0 0;}
.affiliate-banners {width:220px; margin-bottom:10px;}
.affiliate-banners img {width:220px; height:125px; margin-bottom:3px;}
#favorite-readmore {float:right; font-size:12px; margin-right:30px;}
#favorite-readmore span {font-size:6px; vertical-align:middle;}
#favorite-readmore a {color:#666; text-decoration:none;}
#favorite-readmore a:hover {color:#3366cc; text-decoration:none;}


/**********************
 *  category page
 *
***********************/
#category-content {width:670px; margin-top:40px;}
.bullet {float:left; width:35px; height:35px; background:url(/images/sprite.png) -350px 0px no-repeat;}
.topic-box {float:left; height:360px; width:270px; margin-left:40px;}
.topic-tab { width:270px; height:35px; margin-top:25px; border-bottom:1px solid #ddd;}
.topic-tab h3 {float:left; left:0; right:0; font-size:16px; text-align:center; width:20% auto; height:24px; padding:5px 15px; border:1px solid #ddd; background:#fff; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; box-shadow:inset 0 0 5px #d5d5d5; -moz-box-shadow:inset 0 0 5px #d5d5d5; -webkit-box-shadow:inset 0 0 5px #d5d5d5;}
.topic-tab a {text-decoration:none; color:#666;}
.topic-tab a:hover {text-decoration:none; color:#3366cc;}
.readmore {float:right; text-align:right; width:80px; font-size:11px; margin-top:20px;}
.readmore a {text-decoration:none; color:#666;}
.readmore a:hover {text-decoration:none; color:#3366cc;}
.readmore-arrow {font-size:5px; vertical-align:middle;}
.headline-group {height:256px;position:relative;}
/*.headline-wrapper {height:410px;}*/
.headline {position:relative; padding-top:5px; padding-bottom:5px; height:40px; width:270px; font-size:12px; border-bottom:1px solid #ddd;}
.headline:hover {padding-top:5px; height:40px; width:270px; font-size:12px; border-bottom:1px solid #ddd; background:#ddd;}
.headline a {display:block; height:40px; text-decoration:none; color:#666; margin-right:5px;}
.headline a:hover { color:#3366cc;}
.headline img {float:left; width:40px; height:40px; margin:0px 10px 0 5px;}
.pop-up {position:absolute; top:0px; left:270px; z-index:10; width:270px; height:310px; background:url(/images/sprite.png) 0px -320px no-repeat; padding-left:15px; display:none;}
.pop-up img {float:right; margin:10px 30px 5px 5px; width:45px; height:45px;}
.time {float:left; width:110px; margin:5px 0 0 5px;}
.like-retweet {float:right; width:100px; margin:5px 0;}
.pop-up-line {width:240px; height:2px; background:url(/images/sprite.png) 0px -310px no-repeat;}
.pop-up-content {width:245px; height:200px; margin:5px 5px;}
.share-story {float:left; width:160px; margin:10px 0 0 5px;}
.facebook-share-icon {float:right; width:30px; height:30px; margin:5px 25px 0 0; background:url(/images/sprite.png) -210px -120px no-repeat;}
.twitter-share-icon {float:right; width:30px; height:30px; margin:5px 5px 0 0; background:url(/images/sprite.png) -250px -120px;}

.scrolltab-up {float:left; width:133px; height:12px; padding-top:3px; border:1px solid #ddd; background:#fff; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; box-shadow:inset 0 0 5px #d5d5d5; -moz-box-shadow:inset 0 0 5px #d5d5d5; -webkit-box-shadow:inset 0 0 5px #d5d5d5;}
.scrolltab-up:hover {float:left; width:133px; height:12px; padding-top:3px; border:1px solid #ddd; background:#eee; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; box-shadow:inset 0 0 5px #d5d5d5; -moz-box-shadow:inset 0 0 5px #d5d5d5; -webkit-box-shadow:inset 0 0 5px #d5d5d5;}
.scrollarrow-up {float:left; width:15px; height:7px; background:url(/images/sprite.png) 0px -300px no-repeat; margin-left:60px;}
.scrolltab-down {float:right; width:133px; height:12px; padding-top:3px; border:1px solid #ddd; background:#fff; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; box-shadow:inset 0 0 5px #d5d5d5; -moz-box-shadow:inset 0 0 5px #d5d5d5; -webkit-box-shadow:inset 0 0 5px #d5d5d5;}
.scrolltab-down:hover {float:right; width:133px; height:12px; padding-top:3px; border:1px solid #ddd; background:#eee; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; box-shadow:inset 0 0 5px #d5d5d5; -moz-box-shadow:inset 0 0 5px #d5d5d5; -webkit-box-shadow:inset 0 0 5px #d5d5d5;}
.scrollarrow-down {float:right; width:15px; height:7px; background:url(/images/sprite.png) -20px -300px no-repeat; margin-right:60px;}


#footer {height:50px; background:#aaa;}
#republic {background:url(/images/sprite.png) 880px -265px no-repeat; height:30px;}

.clear {clear:both;}

/**********************
 *  source page
 *
***********************/
#source-content {float:left; width:670px; margin-top:35px; padding-left:15px;padding-bottom:30px; font-size:12px;}
#source-content .horizontal-line {width:670px; height:8px; background:url(/images/sprite.png) 0px -100px repeat-x;}
.bullet-blue {float:left; width:35px; height:35px; background:url(/images/sprite.png) -400px 0px no-repeat;}
#feedbox-group {float:left;font-weight:bold; width:640px; margin-left:31px; padding-bottom:15px; padding-top:10px; border-bottom:1px #ddd solid;}
.feedbox {float:left; position:relative; width:150px; height:150px; margin:5px;}
.feedbox img {width:150px; height:150px;}
.feedbox a {text-decoration:none;color:#fff;}
.feedbox a:hover {color:#bbb;}
.feedbox .caption {background-color:rgba(0,0,0,.75);height:50px; padding:5px; position:absolute; bottom:0; left:0; right:0; overflow:hidden;}
.feedbox .caption-content {padding:5px; position:absolute; bottom:0; left:0; right:0; overflow:hidden; border-top:1px #30a8f2 solid;}
.feedbox-nopic {float:left; position:relative; width:150px; height:150px; margin:5px; background:#111;}
.feedbox-nopic img {width:150px; height:150px;opacity:0.5;}
.feedbox-nopic a {text-decoration:none;color:#fff;}
.feedbox-nopic a:hover {color:#bbb;}
.feedbox-nopic .caption {width:140px; height:140px; line-height:1.2; background-color:rgba(0,0,0,.75); padding:5px; position:absolute; bottom:0; left:0; right:0; overflow:hidden; opacity:1;}
.feedbox-nopic .caption-content {width:140px; height:100px; line-height:1.2;  padding:5px 2px 5px 0px; margin-left:5px; position:absolute; top:52px; left:0; right:0; overflow:hidden; opacity:1; border-top:1px #30a8f2 solid;}
#bottom-tab {margin-right:0px;}
#bottom-tab li {float:right; margin-left:2px; text-align:center; width:20% auto; height:20px; padding:5px 0 5px 0; border:1px solid #ddd; background:#fff; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; box-shadow:inset 0 0 5px #d5d5d5; -moz-box-shadow:inset 0 0 5px #d5d5d5; -webkit-box-shadow:inset 0 0 5px #d5d5d5;}
#bottom-tab li:hover {background:#eee; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; box-shadow:inset 0 0 5px #d5d5d5; -moz-box-shadow:inset 0 0 5px #d5d5d5; -webkit-box-shadow:inset 0 0 5px #d5d5d5;}
#bottom-tab a {display:block; height:30px; width:95px; text-decoration:none; color:#666;}
#bottom-tab .bottom-tab-arrow {font-size:5px; vertical-align:middle;}



/**********************
 *  whatpop bar 
 *
***********************/
body.popbar {height:100%; background:none; background:#fff;}
body.popbar #mainframe {height:100%;}
#topbar {position:fixed; width:100%; border-bottom:1px solid #666; height:41px; background:#fff url(/images/topbar-bg.png) repeat-x; /*-moz-box-shadow: 0px 3px 20px #717171; -webkit-box-shadow: 0px 3px 20px #717171; box-shadow: 0px 3px 20px #717171; z-index:50px;*/}
#sitename-small {float:left; width:115px; height:40px; background:url(/images/sprite.png) 8px -115px;}
#favorite-tab {float:left;width:115px; height:40px;padding:12px 15px 15px 15px;}
#favorite-tab a {text-decoration:none; font-weight:bold;font-size:12px;color:#eee;}
#favorite-tab a:hover {color:#aaa;}
#close {cursor:pointer;float:right; width:18px; height:18px; background:url(/images/close.png);  margin:11px 10px 0 10px;}
#close:hover {background:url(/images/close-hover.png)}
#next-previous a {float:right;text-decoration:none; font-size:12px;color:#eee;margin-right:10px;margin-top:1px;}
#next-previous a:hover {color:#aaa;}
.next{font-weight:bold;float:right;   text-align:center; margin:10px 0 0 0; padding-top:2px; width:40px; height:21px; }
.previous{font-weight:bold;float:right;  text-align:right; margin:10px 0 0 0; padding-top:2px;width:40px; height:21px; }
#vote a {text-decoration:none; color:#000;}
#vote-facebook {float:right; color:#fff; font-size:12px; text-align:left; margin:5px 0 0 5px; padding-top:3px;  height:21px; }
#vote-twitter {float:right; color:#fff; font-size:12px; text-align:right; margin:5px 0 0 0; padding-top:3px;height:21px; }
#vote-twitter-1 {float:right; color:#fff; font-size:12px; text-align:right; margin:5px 0 0 0; padding-top:8px;padding-left:5px;width:80px; height:21px; }
#vote-twitter .tweetcount {float:left;color:#fff;font-weight:bold;text-align:center; font-size:12px;margin:5px 0 0 0; width:30px;}
#divider-small {float:right; width:2px; height:28px; background:url(/images/sprite.png) -550px -120px no-repeat; margin-top:6px;}
#socialnetwork li {float:right; width:25px; height:25px;}
#views-stat {float:right; width:90px; height:25px;text-align:center; font-size:12px;font-weight:bold;color:#eee; margin:12px 0 0 10px;padding-top:1px;}
#twitter-icon {width:24px;height:24px;float:right;background:url(/images/sprite.png) -180px -120px no-repeat; margin:0 5px 0 5px;}
#twitter-icon:hover {background:url(/images/sprite.png) -250px -120px no-repeat;}
#facebook-icon {width:24px;height:24px;float:right; background:url(/images/sprite.png) -150px -120px no-repeat; margin:0 5px 0 5px;}
#facebook-icon:hover {background:url(/images/sprite.png) -210px -120px no-repeat;}
#share {float:right; margin:12px 0 0 10px; background:url(/images/sprite.png) -500px -120px no-repeat; width:50px; height:15px;}
#mainframe iframe {width:100%; height:90%; border:0px; margin-top:41px;}
