/* ======= DEMO LAYOUT ======= */

body {
    /*background-image: url(../assets/background-image.jpg);*/
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #eeefef;
    font-size: 62.5%;
    font-family: "Linux Libertine", Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, "TW-Kai", serif;
    margin: 0;
    padding: 0;
}

.container {
    width: 860px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    padding: 10px;
    *zoom: 1;
}

h1, h2 {
}

h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 400;
    margin: 0;
	text-align:right;
}

h2 {
    color: #c0392b;
    font-size: 22px;
    font-weight: 400;
    margin: 5px 0;
    letter-spacing: .1em;
}

h3 {
    font-size: 1.6em;
    margin: 10px 0 10px 10px;
}

a:link, a:visited {
    color: #c0392b;
    text-decoration: none;
}

a:hover {
    color: #7DBADF;
}

a img {
    border: none;
}

p {
    margin: 0 0 10px 8px;
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.6em;
}

.clear {
    clear: both;
    line-height: 0;
    font-size: 0;
}

/* ============ TIMELINE ============= */

div#timelineContainer {
    border-left: 2px solid #ccc;
    margin: 20px auto;
    width: 860px;
}

div.timelineToggle {
    float: right;
    margin-right: 0;
    white-space: nowrap;
}

a.expandAll {
    color: #ccc;
    cursor: pointer;
    background: #000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 12px;
    padding: 3px 5px;
}

a.expandAll:hover {
    color: #7DBADF;
    cursor: pointer;
}

div.timelineMajor {
    clear: left;
    float: left;
    margin: 0 0 12px;
    width: 860px;
}

.timelineMajor h2 {
    background: url(../images/timeline_century_tick.gif) left center no-repeat;
    font-family: "Galdeano","Hiragino Sans GB","Microsoft YaHei",Trebuchet,"Trebuchet MS",Tahoma,"Lucida Grande","Lucida Sans Unicode",Verdana,sans-seri;
    cursor: pointer;
    /**font-size: 3em;**/
    font-weight: 400;
    margin: 0 0 10px;
    padding: 4px 4px 4px 20px;
}

.timelineMajor h2 span {
    background: #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #131313;
    letter-spacing: .1em;
    line-height: 1.7em;
    padding: 3px 5px 1px;
}

dl.timelineMinor {
    clear: left;
    float: left;
    margin: 0 12px 0 0;
    padding: 4px 4px 4px 0;
    position: relative;
    width: 860px;
}

.timelineMinor dt {
    background: url(../images/timeline_decade_tick.gif) left center no-repeat;
    clear: left;
    font-size: 1.6em;
    list-style-type: none;
    line-height: 1.2em;
    margin: 0 0 12px;
    padding: 0 0 0 24px;
    white-space: nowrap;
}

.timelineMinor dt a {
    color: #fff;
    cursor: pointer;
}

.timelineMinor dt a.closed {
    color: #fff;
    font-size: 1em;
    margin-left: 0;
}

.timelineMinor dt a.open {
    color: #fff;
}

.timelineMinor dt a:hover {
    color: #34495e;
}
}

.timelineMinor dd {
    padding-left: 24px;
    width: 100%;
}

.timelineMinor dd h3 {
    color: #c0392b;
    clear: both;
    float: left;
    font-size: 1.5em;
    margin: 0;
    white-space: nowrap;
}

.timelineEvent p {
    clear: left;
    float: left;
    line-height: 1.5em;
    margin: 6px 0 10px;
    width: 500px;
    color: #2C3E50;
}

.timelineEvent h4 {
    clear: left;
    float: left;
    font-size: 1.4em;
    font-weight: 400;
    margin: 10px 0 0;
    padding: 0 0 0 20px;
}

.timelineEvent blockquote {
    border-left: 2px solid #ccc;
    clear: left;
    float: left;
    font-size: 1.8em;
    margin-left: 0;
    padding: 0 30px;
    width: 400px;
}

.timelineEvent blockquote .attribution {
    font-size: 0.7em;
    text-align: right;
}

.timelineEvent div.media {
    float: right;
    padding: 0 0 12px;
    width: 240px;
}

.timelineEvent .media img {
    border: 0px;
    margin: 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.timelineEvent .media p {
    font-size: 1.2em;
    margin: 0;
    padding: 0;
}

.timelineEvent .media a:link, .timelineEvent .media a:visited {
    color: #ab221b;
}

.timelineEvent .media a:hover {
    color: #7DBADF;
}