/* --------------------------------------------   
      Common styles                               
----------------------------------------------- */

/* @GLOBAL */
div.clear {
    clear: both; 
    font-size: 0; 
    line-height: 0; 
    height: 0;
}

.box {overflow: hidden;}

.l {float: left;}
.r {float: right;}

.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}


/* TEXT */
span.minor {color: #787878;}
a.watcher {/*color: #26D06F;*/ color: #12BD4A !important;}
a.resident {color: #2081c5 !important;}

    .monospace,
    .data_table th,
    .post .post_top,
    .post_comments a.comments_link span {
        text-transform: uppercase;
        letter-spacing: 1px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
    }
    
    .monospace_header {
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 18px;
    }
     
 
    /* favourite */

    /* coloring */
    .positive {}
    .negative {}
    .normal {}


/* @TABS */
ul.tabs               {overflow: hidden; text-transform: uppercase;}
ul.tabs li            {float: left; margin-right: 10px;}
ul.tabs li a          {display: block; color: #2081c5; text-decoration: none; outline: 0; font-size: 12px;}
ul.tabs li a span     {display: block; height: 18px; cursor: pointer;}
ul.tabs li a span dfn {line-height: 13px; display: block; border-bottom: 1px dashed #2081c5;}

ul.tabs li a:hover span dfn {border-bottom-width: 0;}

    /* active */
    ul.tabs li.active {padding-top: 0;}
    ul.tabs li.active a {
        padding-right: 2px;
        color: white;
        background: transparent url('../images/bg/tabs_point.png') no-repeat right top;
        padding-right: 3px;
        cursor: pointer;
    }

    ul.tabs li.active a span {
        padding-left: 5px;
        padding-right: 3px;
        border-bottom-width: 0;
        background: transparent url('../images/bg/tabs_point.png') no-repeat left top;
    }
    
    ul.tabs li.active a span dfn {border-bottom-width: 0;}
    
        ul.tabs li,
        ul.tabs li.active a span {padding-top: 4px;}
        


/* @BLOCKS */
div.notice {}

    /* block */
    .leftcol div.block {margin-right: 20px;}
    .rightcol div.block {margin-left: 20px; min-width: 240px;}
    
    .leftcol div.block, 
    .rightcol div.block {margin-top: 30px; margin-bottom: 30px;}
    
        /* link */
        div.block a.important      {color: #2d2d2d;}
        div.block a.important span {}


/* @VOTING */
.vote {}
.vote_wrap {margin-right: 10px;}

    /* @INDICATOR */
    .vote .indicator {
        outline: 0;
        width: 23px; 
        height: 17px;
        display: inline-block; 
        background-position: 0 0;
        background-repeat: no-repeat;
        background-image: url('../images/bg/rating/indicators.png');
    }
    .big .vote .indicator {width: 27px; height: 21px; background-position: 0 -60px;}
    .voted .indicator {cursor: default;}
    
    .vote .indicator.plus  {margin-right: 1px;}
    .vote .indicator.minus {}
    .big .vote .indicator.plus  {margin-right: 3px;}
    .big .vote .indicator.minus {margin-left: 3px;}
    
        /* normal */
        .vote .indicator.plus {background-position: 0 0;}
        .vote .indicator.minus {background-position: 0 -30px;}
        .big .vote .indicator.plus {background-position: 0 -60px;}
        .big .vote .indicator.minus {background-position: 0 -90px;}
        
            /* hover */
            .unvote .indicator.plus:hover {background-position: -30px 0;}
            .unvote .indicator.minus:hover {background-position: -30px -30px;}
            .big .unvote .indicator.plus:hover {background-position: -30px -60px;}
            .big .unvote .indicator.minus:hover {background-position: -30px -90px;}
        
        /* ok */
        .vote.ok .indicator.plus {background-position: -90px 0;}
        .vote.ok .indicator.minus {background-position: -60px -30px;}
        .big .vote.ok .indicator.plus {background-position: -90px -60px;}
        .big .vote.ok .indicator.minus {background-position: -60px -90px;}
        
        /* neok */
        .vote.neok .indicator.plus {background-position: -60px 0;}
        .vote.neok .indicator.minus {background-position: -90px -30px;}
        .big .vote.neok .indicator.plus {background-position: -60px -60px;}
        .big .vote.neok .indicator.minus {background-position: -90px -90px;}
        

    
    /* @RATING */
    span.rating {
        color: white; 
        font-size: 13px;
        cursor: default;
        font-weight: bold;
        padding-right: 3px;
        font-family: Arial, Helvetica, sans-serif;
        margin-left: 3px;
    }
    
    span.rating span {padding-left: 3px; margin-left: -3px;}
    span.rating span span {padding: 0 3px; margin-left: 0; line-height: normal;}
    
    .big span.rating           {font-size: 18px;}
    .big span.rating span      {}
    .big span.rating span span {line-height: 20px; padding: 0 4px;}

        /* bg */
        span.rating,
        span.rating span,
        span.rating span span {
            height: 17px;
            float: left;
            background-repeat: none;
            background-position: 0 0;
            background-image: url('../images/bg/rating/rating.png');
        }

        .big span.rating,
        .big span.rating span,
        .big span.rating span span {
            height: 21px; 
            background-position: 0 -80px;
        }

        /* simple */
        span.rating {background-position: right 0;}
        span.rating span {background-position: left 0;}
        span.rating span span {background-position: -3px 0;}
        .big span.rating {background-position: right -80px;}
        .big span.rating span {background-position: left -80px;}
        .big span.rating span span {background-position: -3px -80px;}
        
            /* simple hover */
            .post .unvote span.rating:hover {background-position: right -20px;}
            .post .unvote span.rating:hover span {background-position: left -20px;}
            .post .unvote span.rating:hover span span {background-position: -3px -20px;}
            .post .big .unvote span.rating:hover {background-position: right -110px;}
            .post .big .unvote span.rating:hover span {background-position: left -110px;}
            .post .big .unvote span.rating:hover span span {background-position: -3px -110px;}

        /* positive */
        span.rating.positive {background-position: right -40px;}
        span.rating.positive span {background-position: left -40px;}
        span.rating.positive span span {background-position: -3px -40px;}
        .big span.rating.positive {background-position: right -140px;}
        .big span.rating.positive span {background-position: left -140px;}
        .big span.rating.positive span span {background-position: -3px -140px;}

        /* negative */
        span.rating.negative {background-position: right -60px;}
        span.rating.negative span {background-position: left -60px;}
        span.rating.negative span span {background-position: -3px -60px;}
        .big span.rating.negative {background-position: right -170px;}
        .big span.rating.negative span {background-position: left -170px;}
        .big span.rating.negative span span {background-position: -3px -170px;}

    /* cursor */
    .post .unvote span.rating {cursor: pointer;}
    .vote.voted span.rating {cursor: default;}
    
        /* userpanel */
        /*
        .user_panel span.rating {background-position: right -200px;}
        .user_panel span.rating span {background-position: left -200px;}
        .user_panel span.rating span span {background-position: -3px -200px;}
        
            .user_panel span.rating.positive {background-position: right -220px;}
            .user_panel span.rating.positive span {background-position: left -220px;}
            .user_panel span.rating.positive span span {background-position: -3px -220px;}

            .user_panel span.rating.negative {background-position: right -240px;}
            .user_panel span.rating.negative span {background-position: left -240px;}
            .user_panel span.rating.negative span span {background-position: -3px -240px;}
        */
    



    .vote .rating,
    .vote .indicator {float: left; }

    .vote .rating {}


/* BUTTON */
.button {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left top;
    
}
a.button {display: inline-block;}

    /* BUTTON PICS */
    .button.write {width: 104px; height: 24px; background-image: url('../images/buttons/write.png');}
    .button.send_invite {width: 169px; height: 24px; background-image: url('../images/buttons/send_invite.png');}


/* @ICONS */
.icon {background-repeat: no-repeat;}

.iconed {
    text-indent: -9000px;
    overflow: hidden;
}

input.iconed {border: 0; padding: 0;}

    /* anchor */
    a.icon            {text-decoration: none; padding-left: 22px;}
    a.icon span       {text-decoration: underline;}
    a.icon:hover span {text-decoration: none;}
    
        /* important */
        div.block a.icon.important {padding-left: 15px; font-size: 14px;}

    /* ICON PICS */
    .icon.pic {background-image: url('../images/icons/pic.png'); background-position: 0 3px;}
    .icon.vid {background-image: url('../images/icons/vid.png'); background-position: 0 2px;}
    .icon.profile {background-image: url('../images/icons/profile.png'); background-position: 0 1px;}
    .icon.all_pics {background-image: url('../images/icons/all_pics.png'); background-position: 0 4px;}
    .icon.all_tags {background-image: url('../images/icons/all_tags.png'); background-position: 0 4px;}
    .icon.all_records {background-image: url('../images/icons/all_records.png'); background-position: 0 4px;}
    .icon.voting_results {background-image: url('../images/icons/voting_results.png'); background-position: 0 3px;}
    .icon.settings {background-image: url('../images/icons/settings.png'); background-position: 0 2px;}
    .icon.favourite {background-image: url('../images/icons/favourite.png'); background-position: 0 2px;}
    .icon.subscribed {background-image: url('../images/icons/subscribed.png'); background-position: 0 0;}
    .icon.unsubscribed {background-image: url('../images/icons/subscribed.png'); background-position: 0 -70px;}
    .icon.rss {background-image: url('../images/icons/rss.png'); background-position: 0 0;}
        a.icon.rss {padding-left: 17px;}
        #foot .icon.rss {background-position: 0 6px;}
        
    .icon.warning {background-image: url('../images/icons/warning.png'); background-position: 0 0; width: 27px; height: 29px; }
        
    .livejournal a {background-image: url('../images/icons/livejournal.png'); background-position: 0 2px; padding-left: 19px;}
    .twitter a {background-image: url('../images/icons/twitter.png'); background-position: 2px 2px; padding-left: 17px;}
    .facebook a {background-image: url('../images/icons/facebook.png'); background-position: 1px 3px; padding-left: 19px;}


    
/* LIST */
ul {}

    /* striped */
    ul.striped li {border-bottom: 1px solid #e9edef; padding: 8px 0 6px; line-height: 15px;}
    
        div.block ul.striped {margin-bottom: 10px;}
        
    /* @CLOUD */
    ul.cloud {margin-bottom: 10px;}
    ul.cloud li {
        display: inline;
        line-height: 28px;
        margin-right: 5px;
    }
    ul.cloud li a {text-decoration: none;}
    ul.cloud li a:hover {text-decoration: underline;}
    
    ul.cloud li a.w1  {font-size: 11px;}
    ul.cloud li a.w2  {font-size: 12px;}
    ul.cloud li a.w3  {font-size: 14px;}
    ul.cloud li a.w4  {font-size: 16px;}
    ul.cloud li a.w5  {font-size: 18px;}
    ul.cloud li a.w6  {font-size: 20px;}
    ul.cloud li a.w7  {font-size: 22px;}
    ul.cloud li a.w8  {font-size: 24px;}
    ul.cloud li a.w9  {font-size: 26px;}
    ul.cloud li a.w10 {font-size: 28px;}
    
    /* @TAGS */
    ul.tags {}



/* @TABLE */
/* data table */
.data_table {width: 100%; margin-bottom: 10px;}
.data_table th {padding: 7px 10px;  color: #787878; font-family: "Trebuchet MS"; border-bottom: 1px solid #E9EDEF;}
.data_table td {padding: 13px 10px; font-size: 14px; border-bottom: 1px solid #E9EDEF;}
.data_table h4 {margin-top: 0; line-height: 18px; padding-bottom: 0; margin-bottom: 0;}
.data_table .digit {font: normal 18px Arial, Helvetica, sans-serif; color: #3c3c3c;}
.data_table .rating {float: right }
.data_table .icon_box {width: 26px; margin: 0 auto;}


    /* first */
    .data_table th.first h4.l {margin-right: 26px;}
    .data_table th.first .plate {width: 26px; float: right;}
    
    /* plate */
    .data_table .plate {width: 26px; float: right; margin-top: -2px; margin-left: 5px;}

    /* icons */
    .data_table .icon.subscribed,
    .data_table .icon.unsubscribed {padding: 0; width: 26px; height: 19px;}
    .data_table .icon.rss {background-position: 5px 5px; padding: 0; width: 26px; height: 24px; margin-top: -2px;}
    .data_table .rsspic {background: transparent url('../images/icons/rss.png') no-repeat left 2px; padding-left: 23px;}
    
        .data_table th.first,
        .data_table td.first {padding-left: 0;}
        
        .data_table th.last,
        .data_table td.last {padding-right: 0;}
    

/* @COLS */
.leftcol h3, 
.rightcol h3 {
    padding: 0;
    margin-top: 0;
    font-size: 24px; 
    line-height: 24px; 
    margin-bottom: 10px; 
    font-weight: normal; 
}




/* @BUBBLE */
div.bubble {
    top: 0;
    left: 0;
    z-index: 9000;
    font-size: 16px;
    text-align: left;
    position: absolute;
    background: #e7f1f5 url('../images/bg/bubble/bg.png') repeat-x left top; 
}

div.bubble .in {padding: 27px 60px 25px 30px;}

    /* close button */
    div.bubble .close_button {
        top: 22px; 
        right: 21px;
        width: 25px;
        height: 25px;
        cursor: pointer;
        position: absolute;
        background: url('../images/icons/close.png') no-repeat left top; 
    }
    
    div.bubble .warning {position: absolute; left: -14px; top: 20px;}

div.overlay {
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 8000;
    position: absolute; 
    background-color: black;

    opacity:0.40;
    -moz-opacity:0.40;
}


    /* leftcol */
    .leftcol {}
    
    /* rightcol */
    .rightcol {}

.w10 {width: 10%;}
.w15 {width: 15%;}
.w20 {width: 20%;}
.w30 {width: 30%;}
.w25 {width: 25%;}
.w50 {width: 50%;}
.w60 {width: 60%;}
.w70 {width: 70%;}
.w75 {width: 75%;}
.w100 {width: 100%;}
   
 .incol {padding-right: 25px;}
 .incol2 {padding-right: 30px;}

/* clearing fix */
#root, #foot {overflow: hidden;}

a.switch {text-decoration: none;}
a.switch span {border-bottom: 1px dashed #2081C5;}
a.switch:hover span {border-bottom: none;}