/* CSS Reset
 * --------- */

* {
    list-style: none;
    margin: 0;
    padding: 0;
}
* :focus {
    outline: 0px solid #fff;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}
/*
 * Basic and global styles for typography, layout of pages, main navigation
 * ---------------------------------------------------------- */
html {
    background: transparent;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
}
body {
    font-size: 22px;
    font-family: 'Lato', sans-serif;
    color: #3a3d44;
    height: 100%;
    width: 100%;
}
#rss_reader_view {
    background: url('../img/main_bg.png') center center no-repeat;
    position: absolute;
    height: 720px;
    margin-left: -640px;
    margin-top: -360px;
    overflow: hidden;
    top: 50%;
    left: 50%;
    width: 1280px;
}

#rss_reader_view.fullscreen {
    background: url('../img/overlay.png') center center no-repeat;
}

a, .alink {
    color: #3e3f43;
    text-decoration: underline;
    font-weight: bold;
}
a:hover, .alink.active, .alink.marked, .alink.marked * {
    color: #e84a1a !important;
}
.alink img {
    border: 1px solid #cdcdc8;
    border-width: 1px !important;
}
.alink.marked img {
    border-color: #e84a1a !important;
}
button,input,select,textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
}
button, input {
    line-height: normal;
    *overflow: visible;
}

#main_container {

    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
#feed_items {
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 380px;
}

#item_list {
    height: auto;
    min-height: 720px;
    overflow: hidden;
    padding-bottom: 60px;
    padding-top: 30px;
    position: absolute;
    top: 0;
    width: 380px;
}

#item_list_cnt {
    position: relative;
    z-index: 2;
}

#item_list_indicator {
    background: url('../img/news_focus_box.png') 100% 100%  no-repeat;
    content: ' ';
    display: block;
    height: 90px;
    margin-top: 97px;
    position: absolute;
    top: 0;
    left: 345px;
    width: 24px;
}

#item_list_indicator.disabled {
    display: none;
}

#header {
    background: url('../img/mobilegeeks.png') 430px 13px no-repeat;
    height: 120px;
    line-height: 120px;
    margin-top: 0px;
    position: relative;
    width: 100%;
}
#header nav {
    position: absolute;
    right: 20px;
    top: -10px;
    height: 140px;
    width: 340px;
    overflow: hidden;
}
#menu {
    float: right;
    height: 100%;

}
#menu li {
    float: left;
    display: block;
    height: 100%;
    margin: 0 15px;
    position: relative;
    font-size: 0;
}
#menu li.active {
    margin-left: 0;
}
#menu #updateBtn.active {
    margin-left:5px;
}
#menu #exitBtn.active {
    margin-right:20px;
}

#menu .icon {
    background:  url('../img/menu_icons.png') center center no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    display: block;
}
#slideshowBtn {
    width: 46px;
}
#slideshowBtn.active{
    width: 144px;
}
#slideshowBtn  .icon {
    background-position: 0 0;
    height: 36px;
    margin-left: -23px;
    margin-top: -18px;
    width: 46px;
}
#slideshowBtn.active .icon {
    background-position: 0 -45px;
    height: 140px;
    margin-top: -70px;
    width: 144px;
    margin-left: -72px;
}
#updateBtn {
    width: 34px;
}
#updateBtn.active {
    width: 120px;
}
#updateBtn .icon {
    background-position: -75px 0;
    height: 36px;
    margin-left: -17px;
    margin-top: -18px;
    width: 34px;
}
#updateBtn.active .icon {
    background-position: -168px -45px;
    height: 140px;
    margin-top: -70px;
    width: 120px;
    margin-left: -60px;
}
#aboutBtn {
    width: 20px;
}
#aboutBtn.active {
    width: 110px;
}
#aboutBtn .icon {
    background-position: -200px 0;
    height: 36px;
    margin-left: -10px;
    margin-top: -18px;
    width: 20px;
}
#aboutBtn.active .icon {
    background-position: -425px -45px;
    height: 140px;
    margin-top: -70px;
    width: 110px;
    margin-left: -55px;
}

#exitBtn {
    width: 34px;
}
#exitBtn.active {
    width: 90px;
}
#exitBtn .icon {
    background-position: -135px 0;
    height: 36px;
    margin-left: -17px;
    margin-top: -18px;
    width: 34px;

}
#exitBtn.active .icon {
    background-position: -313px -45px;
    height: 140px;
    margin-top: -70px;
    width: 90px;
    margin-left: -45px;
}
#footer {
    bottom: 0;
    position: absolute;
    width: 100%;
}
#title {
    color: #ffffff;
    height: 100%;
    padding-left: 495px;
    padding-right: 360px;
    text-transform: uppercase;
    width: auto;
    display: none
}
#titleTxt {
    /*	font-family: 'Lato Light';*/
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -1px;
    o-text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
#titleTxt:after {
    background:  url('../img/title_bar_hr.png') left center repeat-x;
    height: 1px;
    content: ' ';
    position: absolute;
    margin-left: 20px;
    top: 60px;
    width: 100%;
}
#slideshowBtn {
    position: relative;
    color: black
}

#slideshowBtn.active:before {
    width: 115px;
}

/* Active Item
 * Basic, detailed styles for single news currently selected by user
 * ----------------------------------------------------------------- */

#active_item {
    top: 146px;
    left: 382px;
    right: 0;
    bottom: 0;
    overflow: hidden;
    position: absolute;
}

.fullscreen #active_item {
    left: 75px;
    right: 0px;
    top: 0;
    z-index: 100;
}

.fullscreen #header {
    top: -200px;
}
.fullscreen #feed_items {
    background-image: none;
    left: -400px;
}
#active_item.active {

}
#active_content {
    height: 552px;
    overflow: hidden;
    margin: 22px 75px 0 22px;
}
.fullscreen #active_content  {
    height: 700px;
    background: url('../img/fullscreen_ind.png') top right no-repeat;
    padding-right: 195px;
    padding-top: 20px;
    margin-right: 0;
    margin-top: 0;
}

#scrollbar_indicator {
    display: none;
    height: 540px;
    margin-top: -270px;
    position: absolute;
    top: 50%;
    right: 20px;
    width: 5px;
    background: #3c3f44;
    border: solid 1px #3c3f44;
}
.active #scrollbar_indicator.enabled{
    display: block;
}

#scrollbar_indicator.enabled .cursor{
    background: white;
    display: block;
    content: ' ';
    position: absolute;
    left: 0;
    margin-bottom: 4px;
    width: 5px;
    z-index: 1;
}
.fullscreen #scrollbar_indicator {
    display: none;
}
#active_item h2 {
    color: #3c3f44;
    font-weight: 400;
    font-size: 38px;
    line-height: 44px;
    letter-spacing: -1px;
    margin-top: 30px;
    margin-bottom: 4px;
}
#active_item h6 {
    color: #989891;
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 1em;
}
#active_item .description {
    color: #3c3f44;
    font-size: 21px;
    font-weight: 400;
    line-height: 30px;
    padding-bottom: 35px;
}
#active_item .picture {
    border: 1px solid #ccccca;
    display: block;
    float: left;
    margin: .1em;
    max-width: 720px;
    padding: .3em;
}
#active_item img {
    border: 1px solid #cdcdc8;
    display: block;
    height: auto;
    margin: 20px 0;
    max-height: 450px;
    max-width: 720px;
    padding: 8px;
    width: auto;
    background: white;
}
#active_item img.horizontal {
    max-height: 420px;
    max-width: none;
}
#active_item img.vertical {
    max-width: 700px;
    max-height: none;
}

#active_item article .alink img {
    display: inline-block;
    margin: 5px;
}

.fullscreen #active_item h2 {
    -o-text-overflow: ellipsis;
    overflow: hidden;
    padding-top: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fullscreen #active_item img{
    max-height: 350px;
    width: auto;
}

.fullscreen #active_item .description p {
    text-overflow: -o-ellipsis-lastline;
}
#active_item .pictures:after {
    content: ' ';
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    margin-bottom: 1em;
}
.nav-arrow{
    position: absolute;
    color: #000000;
    text-align: center;
    width: 0;
    height: 0;
    z-index: 2;
}
.nav-arrow.down {
    border-left: .5em solid transparent;
    border-right: .5em solid transparent;
    border-top: .5em solid #3a3a3a;
    bottom: 0;
}
.nav-arrow.up {
    border-left: .5em solid transparent;
    border-right: .5em solid transparent;
    border-bottom: .5em solid #3a3a3a;
    top: 0;
}
#arrow_down{
    border: 0;
    background: transparent;
    font-size: .5em;
    bottom: .75em;
    color: #000000;
    height: 1.1em;
    position: absolute;
    right: .5em;
    width: 1em;
    z-index: 2;
    nav-up: #openItem;
    nav-right: #arrow_down;
    nav-down: #arrow_down;
    nav-left: #openItem;
}
.nav-arrow.down.disabled, .nav-arrow.up.disabled {
    border-bottom-color: #b6b6b6;
    border-top-color: #b6b6b6;
}
.nav-arrow.down.clicked, .nav-arrow.up.clicked {
    border-bottom-color: #ea5f10;
    border-top-color: #ea5f10;
}

/* Items List
 * Basic, detailed styles for single news on the list
 *
 * ** default html template generated in js **
        <a class="item" href="#" id="item_[i]">
            <span class="icon" style="background-color: #333333">
                <em>[feed_title]</em>
            </span>
            <div>
                <h6 class="pubDate">[time ago]</h6>
                <h5>[item title]</h5>
            </div>
        </a>
 * -------------------------------------------------- */
.item {
    margin: 0 auto 0 10px;
    overflow: hidden;
    height: 220px;
    width: 335px;
    padding: 0;
}
#item_list {
    z-index: 1;
}

.item.active {
    background: url('../img/news_focus_box.png') 0 0  repeat-y;
}
.item.opened{

}

.item figure {
    display: none;
}

.item.loading figure img {
    display: none;
}

.item.loading figure {
    display: block;
    top: 0;
    height: 130px;
}

.item.loading figure:after {
    display: block;
    background: url('../img/foto_loading.png') top left no-repeat;
    content: ' ';
    display: block;
    font-size: 12px;
    left: 0;
    position: absolute;
    top: 0;
    height: 130px;
    text-align: center;
    right: 0;
    z-index: 5;
}

.item.active.loading figure:after {
    background-position: bottom left;
}
.item.hasPicture figure {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.item.hasPicture figure img {
    /*position: absolute;
    top: 50%;
    left: 50%;
    max-width: 270px;
    height: atuto;
    */
}
.item.hasPicture figure img.vertical {
    height: auto;
}
.item.hasPicture figure img.horizontal {
    width: auto;
}

.item section {
    background: #fff url('../img/news_title_bg.png') left -50px repeat-x;
    height: 175px;
    position: relative;
    width: 300px;
    margin: 16px auto;
    border: solid 6px white;

    -moz-box-shadow: 6px 6px 0 0 #AAAAAA,
        12px 12px 0 0 #747474;

    -webkit-box-shadow: 6px 6px 0 0 #AAAAAA,
        12px 12px 0 0 #747474;

    box-shadow: 6px 6px 0 0 #AAAAAA,
        12px 12px 0 0 #747474;
}

.active.item section {
    background: transparent none;
    background-position: left bottom;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-color: transparent;
}

.item.hasPicture section, .item.loading section {
    background-image: none;
}
.opened.item section {
    background-position: left bottom;
}

.item section h5 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 300;
    line-height: 35px;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    padding: 0 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}
.item.hasPicture h5, .item.loading section h5 {
    background: url('../img/news_title_bg.png') 0 0 repeat-x;
    font-size: 22px;
    top: auto;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item.opened section h5 {
    /*background: transparent none;*/
}
.item.hasPicture.opened section h5 {
    background-position: left -230px;
}

.item.hasPicture.opened.active section h5 {
    background-position: 0 0;
}

/* List Items Navigation
 * navigation inside the list of news and feeds
 * -------------------------------------------- */
.fake {
    background: url('../img/main_bg.png') -10px 0 no-repeat;
    height: 30px;
    position: absolute;
    left: 10px;
    width: 336px;
    z-index: 2;
}

.fake:after {
    background: url('../img/arrows.png') no-repeat;
    content: '';
    font-size: 0;
    left: 50%;
    margin-left: -23px;
    height: 23px;
    position: absolute;
    width: 46px;
    display: block;
    text-align: center;
    padding: 0;
    z-index: 3;
}
.fake.up:after {
    background-position: 100% 0;
    top: 4px;
}
.fake.down {
    background: url('../img/main_bg.png') -42px 100% no-repeat;
}
.fake.down:after{
    background-position: 100% 100%;
    bottom: 4px;
}
.fake.up.disabled:after {
    background-position: 0 0;
}

.fake.down.disabled:after {
    background-position: 0 100%;
}
/* Form and Overlays
 * Base styles for input types, form layouts and overlay boxes with info, dialogs and errors
 * ----------------------------------------------------------------------------------------- */
#overlay {
    background: url('../img/overlay.png') 0 0 no-repeat;;
    color: #414244;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 101;
}
#overlay h3 {
    color: #414244;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -1px;
    margin-bottom: 20px;
    text-align: center;
}
#overlay .box {
    left: 50%;
    margin-left: -330px;
    position: relative;
    top: 50%;
    width: 660px;
}

#loader.box {
    background: url('../img/loading.gif') center 55px no-repeat;
    height: 100px;
    margin-top: -75px;
}
#error.box {
    height: 100px;
    margin-top: -75px;
}
#info.box {
    height: auto;
    margin-top: -120px;
}
#info.box div {
    margin-bottom: 25px;
}
.box p {
    display: none;
}
.infoBox p {
    display: block;
    line-height: 29px;
    font-size: 25px;
    text-align: center;

}
.box h3 span{
    color: #989891;
    display: block;
    font-weight: 400;
    font-size: 28px;
}

.box .button, .fullitem .button {
    background: url('../img/news_title_bg.png') left -180px repeat-x;
    color: #ffffff;
    font-size: 22px;
    height: 50px;
    display: block;
    line-height: 50px;
    margin: 0 auto;
    text-align: center;
    width: 256px;
}
.fullitem .button {
    margin: 20px 0 10px;
    width: 120px;
}
.fullitem .button.marked, .button.active {
    color: #ffffff !important;
    background-position: left -230px;
}
.errorBox h3 {
    color: #ff0000;
}
/* Classes
 * Repeatable styles common for different elements
 * ----------------------------------------------- */
.hidden {
    display: none;
}

/** ANIMATIONs
*/
/*
#item_list {
    -o-transition: top 0.3s ease-out 0s;
    -webkit-transition: top 0.3s ease-out 0s;
    -moz-transition: top 0.3s ease-out 0s;
    transition: top 0.3s ease-out 0s;
}
.fullscreen #item_list {
    -o-transition: top 0s ease-out 0s;
    -webkit-transition: top 0s ease-out 0s;
    -moz-transition: top 0s ease-out 0s;
    transition: top 0s ease-out 0s;
}
.fake {display: none;}
.fake.show{display: block;}

.moving #active_content {
    display: none;
}
*/
.fullscreen_content  {
    display: none;
}
.fullscreen .description {
    display: none;

}
.fullscreen .fullscreen_content {
    display: block;
    height: 500px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
}

.fullscreen #active_content {
    left: 0px;
    position: relative;

    -o-transition: left .4s ease-in 0s;
    -webkit-transition: left .4s ease-in 0s;
    -moz-transition: left .4s ease-in 0s;
    transition: left .4s ease-in 0s;
}

.fullscreen .fadeOutLeft #active_content{
    left: -2000px;

    -o-transition: left 0s ease-in 0s;
    -webkit-transition: left 0s ease-in 0s;
    -moz-transition: left 0s ease-in 0s;
    transition: left 0s ease-in 0s;
}

.fullscreen .fadeOutRight #active_content{
    left: 2000px;

    -o-transition: left 0s ease-in 0s;
    -webkit-transition: left 0s ease-in 0s;
    -moz-transition: left 0s ease-in 0s;
    transition: left 0s ease-in 0s;
}
.fullscreen .moving #active_content{

    -o-transition: left .5s ease-out 0s;
    -webkit-transition: left .5s ease-out 0s;
    -moz-transition: left .5s ease-out 0s;
    transition: left .5s ease-out 0s;
}
/*
.fullscreen #main_container:after {

    -o-transition: all 0 ease-in 2s;
    -webkit-transition: right .1s ease-in 1s;
    -moz-transition: right .1s ease-in 1s;
    transition: right .1s ease-in 1s;
}
.fullscreen #main_container.fadeOut:after {
    right: -2000px;

    opacity: 0.1;

    -o-transition: right 0s ease-in 0s;
    -webkit-transition: right 0s ease-in 0s;
    -moz-transition: right 0s ease-in 0s;
    transition: right 0s ease-in 0s;
}
.fullscreen #main_container.moving:after {
    right: 1200px;

    -o-transition: right 0.3s ease-out 0.1s;
    -webkit-transition: right 0.3s ease-out 0.1s;
    -moz-transition: right 0.3s ease-out 0.1s;
    transition: right 0.3s ease-out 0.1s;
}
*/

/*
.fake{
    opacity: 0;
    -o-transition: opacity 0s ease-out 0s;
    -moz-transition: opacity 0s ease-out 0s;
    -webkit-transition: opacity 0s ease-out 0s;
    transition: opacity 0s ease-out 0s;
}

.fake.show {
    opacity: 1;
    -o-transition: opacity 0.1s ease-out 0.3s;
    -moz-transition: opacity 0.1s ease-out 0.3s;
    -webkit-transition: opacity 0.1s ease-out 0.3s;
    transition: display 0.1s ease-out 0.3s;
}*/