$base-color: #d40e3f;
$list-header-color: #666;
$list-header-bg-color: #ccc;

$index-bar-bg-color: #ccc;
$index-bar-color: #666;

@import 'sencha-touch/base';
@import 'sencha-touch/base/all';

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

@include icon('team');
@include icon('info');
@include icon('time');
@include icon('locate');
@include icon('chat');
@include icon('action');

@include sencha-tabbar-ui('gray', #111, 'matte', lighten($base-color, 10%));
@include sencha-toolbar-ui('dark', darken($base-color, 10%), $base-gradient);
@include sencha-toolbar-ui('gray', #ccc);

a, .link {
  color: $base-color !important;
}
a:visited {
  color: lighten($base-color, 15%) !important;
}

h3 {
    margin-top: 0.3em;
    font-size: 1.2em;
}
h4 {
    color: #999;
    margin-bottom: 0.3em;
}


.x-list-item-label > .session {

    @include st-box;
    @include st-box-orient(horizontal);
    @include st-box-align(center);

    .title {
        @include st-box-flex(1);
        font-weight: bold;
        font-size: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .room {
        font-size: 10px !important;
        color: $base-color;
        margin-left: .5em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}

.sessionInfo {

    padding: 0.9em;
    background: #fff;

    h3 {
        font-size: 1.2em;
        margin-bottom: .1em;
        small {
          color: $base-color;
        }
    }
    h4 {
        font-size: 0.9em;
        color: #999;
        margin-bottom: .5em;
    }
    p {
        font-size: 0.8em;
        line-height: 1.5em;
    }
}

.x-list-header.dark {
    color: #000;
    font-size: 0.7em;
    padding: 0.4em 1.3em;
}

.tweets {
  h2 {
    padding-bottom: 3px;
  }
  img {
    float: left;
  }
  .tweet {
    font-size: 70%;
    margin-left: 60px;
    min-height: 50px;
  }
  .x-list-item {
    border-top: 1px solid white;
  }
  .posted {
    float: right;
  }
}

.tweets {
    h2 {
        font-weight: bold;
    }
    img {
        border-radius: 5px;
				max-width: 50px;
				max-height: 50px;
    }
    .tweet {
        color: #333;
    }
}

.x-list-item.speaker {

    font-size: 0.9em;
    line-height: 1.4em;

    .avatar {
        background-position: center center;
        -webkit-border-radius: 0.5em;
        float: left;
        border: 0;
        border-radius: 0.5em;
        width: 45px;
        height: 45px;
        background-size: 47px auto;
    }
    h3 {
        font-weight: bold;
        margin-left: 60px;
    }
    h4 {
        color: #999;
        margin-left: 60px;
    }
}

.speakerInfo {

    background: #fff;

    .header {
        @include background-gradient(#eee);
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ddd;
        padding: 1em 0.8em;
    }

    .avatar {
        background-position: center center;
        -webkit-border-radius: 0.5em;
        float: left;
        border: 0;
        border-radius: 0.5em;
        margin-right: 10px;
        width: 60px;
        height: 60px;
        background-size: 62px auto;
    }

    p {
        color: #333;
        line-height: 1.5em;
        padding: 0.4em 1.2em;
        font-size: 0.8em;
    }
}

.video {
    line-height: 1.5em;
    .thumb {
        margin: -0.6em;
        width: 2.6em;
        height: 2.6em;
        background-color: #eee;
        background-size: 2.6em auto;
        background-position: center center;
        float: left;
        margin-right: 0.6em;
    }
    .name {
        font-weight: bold;
        font-size: 0.85em;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.htmlPage {

    background: #fff;
    color: #333;
    line-height: 1.5em;
    font-size: 0.8em;
    padding: 0.4em 1.2em;

    p {
        padding: 0.4em 0;
    }

    .sponsor_list_heading {
        font-weight: bold;
    }
    .sponsorList {
        margin: 10px 0 25px 0;
        padding-left: 0;
        list-style-type: none;
        overflow: hidden;

        li {
            display: block;
            float: left;
            margin-right: 20px;
            height: 50px;
            img {
                max-height: 50px;
            }
        }
    }
}
