/********** BASE BOX STYLES **********/
.event-box {
    border: solid 1px #000;
    color: #0B333C;
    display: block;
    font-size: 10px;
    height: 230px;
    overflow: hidden;
    position: relative;
    margin: 0 5px 5px 0;
    width: 165px;
}
    /********** THUMBNAIL **********/
    .event-box .event-thumb {        
        display: block;
        height: 230px;
        overflow: hidden;
        position: relative;
        text-align: center;
        width: 165px;
        z-index: 5;
    }
    .event-box .event-date {
        background: url(../images/nav_bg.png);
        color: #FFF;
        height: 25px;
        margin-top: -230px; 
        padding: 4px 5px 5px;
        position: absolute;
        text-align: center;
        width: 155px;
        z-index: 6;        
    }
        .event-date .day { font-size: 12px; font-weight: bold; }
        .event-date .month { font-size: 12px; }
        .event-date .time { font-size: 14px; font-weight: bold; margin: 3px 0 0 10px; }
        
    .event-box .event-title {
        background: url(../images/nav_bg.png);
        bottom: 0;
        color: #FFF;
        display: block;
        font-size: 12px;
        font-weight: bold;
        padding: 10px 7px;
        position: absolute;
        text-align: center;
        width: 151px;
        z-index: 7;
    }
    
    .event-box img { cursor: pointer; }
    .event-box:hover .event-date,
    .event-box:hover .event-title { background: #000; }


/********** BOXES SIZES AND BACKGOUNDS **********/
.event-box.big { height: 250px; margin: 0 7px 5px 0; width: 180px; }
.event-box.big .event-thumb { height: 250px; width: 180px; }
.event-box.big .event-date { margin-top: -250px; padding: 4px 5px 10px; width: 170px; }
        .event-box.big .event-date .day { font-size: 14px; font-weight: bold; }
        .event-box.big .event-date .day-name { font-size: 11px; }
        .event-box.big .event-date .month { font-size: 14px; }
        .event-box.big .event-date .time { font-size: 16px; font-weight: bold; margin: 6px 0 0 10px; }
.event-box.big .event-title {
    padding: 10px 7px;
    width: 166px;
}

.event-box.bigest { height: 320px; margin: 0 7px 5px 0; width: 230px; }
.event-box.bigest .event-thumb { height: 320px; width: 230px; }
.event-box.bigest .event-date { margin-top: -320px; padding: 4px 5px 10px; width: 220px; }
        .event-box.big .event-date .day { font-size: 14px; font-weight: bold; }
        .event-box.big .event-date .day-name { font-size: 11px; }
        .event-box.big .event-date .month { font-size: 14px; }
        .event-box.big .event-date .time { font-size: 16px; font-weight: bold; margin: 6px 0 0 10px; }
.event-box.bigest .event-title {
    padding: 15px 10px;
    width: 212px;
}



.event-box.small { height: 210px; margin: 0 7px 5px 0; width: 150px; }
.event-box.small .event-thumb { height: 210px; width: 150px; }
.event-box.small .event-date { margin-top: -210px; width: 140px; }
.event-box.small .event-title {
    font-size: 12px;
    padding: 5px 6px;
    width: 142px;
}

.event-box.smaller { height: 175px; margin: 0 7px 5px 0; width: 125px; }
.event-box.smaller .event-thumb { height: 175px; width: 125px; }
.event-box.smaller .event-date { margin-top: -175px; width: 115px; }
.event-box.smaller .event-title {
    font-size: 11px;
    font-weight: normal;
    padding: 4px 5px;
    width: 117px;
}

.event-box.smallest { height: 125px; margin: 0 7px 5px 0; width: 90px; }
.event-box.smallest .event-thumb { height: 125px; width: 90px; }
.event-box.smallest .event-date { margin-top: -125px; width: 80px; }
.event-box.smallest .event-title {
    font-size: 10px;
    font-weight: normal;
    padding: 3px 4px;
    width: 82px;
}

/************** EVENTS LISTING ****************/
.eventsList { font-size: 14px; margin-bottom: 5px; }
.eventsList .event-row { display: block; padding: 0 0 0 4px; }
.eventsList .event-row .ui-icon { position: absolute; margin-top: 4px; }

.eventsList .event-row a { color: #000; display: block; padding-right: 4px; width: 931px; }
.eventsList .event-row a div { cursor: pointer; }
.eventsList .event-row a .row-bg { display: block; padding: 4px 0 4px 22px; }

.eventsList .event-title { float: left; }
.eventsList .event-date { float: right; padding-right: 4px; }

.eventsList .event-row:hover { background: url(../images/corners.png) no-repeat left bottom; }
.eventsList .event-row:hover a { color: #000; background: url(../images/corners.png) no-repeat right bottom; }
.eventsList .event-row:hover .row-bg { background: #b2e1ff; }

/************** EVENT PAGE ****************/
.event-details .box-content { padding-top: 10px; }
.event-details table th {  width: 160px }
.event-details .post-others .eventsList .event-row a { width: 630px; }