@charset "UTF-8";

/**** ANIMATIONS ****/
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes pageHinge {
    0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
	20% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
	40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
    60% { -webkit-transform: rotate(75deg); transform: rotate(75deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
	80% { -webkit-transform: rotate(65deg) translateY(0); transform: rotate(65deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
	100% { -webkit-transform: rotate(35deg) translateY(100px) translateX(50px); transform: rotate(35deg) translateY(100px) translateX(50px); opacity: 0; -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}

@keyframes pageHinge {
    0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
	20% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
	40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
    60% { -webkit-transform: rotate(75deg); transform: rotate(75deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
	80% { -webkit-transform: rotate(65deg) translateY(0); transform: rotate(65deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
	100% { -webkit-transform: rotate(35deg) translateY(100px) translateX(50px); transform: rotate(35deg) translateY(100px) translateX(50px); opacity: 0; -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}

/**** MAIN CONTAINERS ****/
#container {
    width: 728px;
    height: 90px;
    border: 1px solid black;
}

#main {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 453px;
    float: left;
}

#isi {
    width: 273px;
    float: right;
}

#header {
    background-color: #880038;
    color: white;
    height: 20px;
    font-size: 10px;
    padding: 4px 4px 4px 105px;
}

#body {
    height: 68px;
    padding: 3px 10px 4px 105px;
}

#isi-body {
    height: 70px;
}

#isi-footer {
    height: 18px;
}

/**** CALENDAR ****/
#cal {
    position: absolute;
    top: 0;
    left: 12px;
    width: 82px;
    height: 85px;
}

#cal * {
    position: absolute;
    bottom: 0;
    right: 0;
}

#page {
    -webkit-animation: pageHinge 2.5s ease-in 6.5s normal 1 both;
            animation: pageHinge 2.5s ease-in 6.5s normal 1 both;
}

/**** OTHER ****/

#logo {
    position: absolute;
    bottom: 2px;
    right: 4px;
}

#body .title,
#body .footnote {
    margin: 6px 0;
}

#body .footnote {
    -webkit-animation: fadeIn .5s linear 2s normal 1 both;
            animation: fadeIn .5s linear 2s normal 1 both;
}

.title {
    font-size: 13px;
    font-weight: bold;
}

.footnote {
    font-size: 8px;
    line-height: 1.1;
}

a {
    color: #00aeef;
    cursor: pointer;
    text-decoration: underline;
}

ul {
    padding-left: 1.4em;
}

/*
.lead {
    font-size: 12px;
    line-height: 1.4;
}

.small {
    font-size: 8px;
    line-height: 1.2;
}
*/
/**** ISI ****/
#isi {
    background-color: #f7f7f7;
}

#isi-body,
#isi-footer {
    padding: 4px;
    border: 1px solid #ddd;
}

#isi-body {
    line-height: 11px;
    overflow-y: scroll;
}

#isi-body *,
#isi-body .section {
    margin: 4px 0;
}

#isi-body .section * {
    margin-top: 0;
    margin-bottom: 0;
}

#isi-body .scroll-message {
    margin-top: 0;
}

#isi-body h2 {
    font-size: 11px;
    color: #880038;
}

#isi-footer {
    overflow: hidden;
    border-top: 0;
}

/**** FIXES / HACKS ****/

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -.8em;
    font-size: 0.6em;
}

sub { top: .8em; }