/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 7, 2013, 5:44:54 PM
    Author     : Aryuth.Ekkul
*/


#timeline-content-cargo{
width: 906px;
margin: 15px auto;
padding:0 28px;
background:url(http://www.bu.ac.th/images/about/timeline/timeline-container-bg.png) no-repeat top left;
text-align:left;
}
.timeline-header{
padding: 28px 0 14px 0;
border-bottom: 1px solid #7e7e7e;
margin-bottom: 15px;
}
.timeline-color{
font-family:"DbAdmanXBd";
font-size: 30px;
font-size:80px9;
color: #499aba;
color: red9;
}
#timeline-big-container{
position:relative;
width:865px;
margin:0 auto;
padding-left:5px;
}
#timeline-container{
                position:relative;
                width:870px;
                overflow-x:hidden;
                height:387px;
            }
            #timeline-content-container{
                width:8000px;
                position:relative;
                height:325px;
            }
            .timeline-content{
                position:relative;
                float:left;
                margin:0;
                margin-right:10px;
                border:5px solid #303030;
                width:270px;
                height:315px;
            }
            .timeline-content.current-timeline{
                border-color:#6aa7c0;
            }
            .timeline-detail-container{
                position:absolute;
                height:115px;
                width:250px;
                bottom:0px;
                background:url(http://www.bu.ac.th/images/about/timeline/timeline-content-bg.png);
                padding:0 10px;
            }
            .current-timeline .timeline-detail-container{
                background:url(http://www.bu.ac.th/images/about/timeline/timeline-content-active-bg.png);
            }
            .timeline-date{
                font-size:36px;
                color:#4296b6;
                font-family: 'TradeGothicBold';
                line-height:30.25px;
                font-weight: bold;
                margin:10px 0;
            }
            .current-timeline .timeline-date{
                color:#e2e2e2;
            }
            .timeline-detail{
                border-bottom:1px solid #ceced1;
                border-top:1px solid #ceced1;
                line-height:1.2;
                padding-top:5px;
                overflow:hidden;
                color:#ceced1;
                font-size:15px;
                margin-bottom:6px;
                height:39px;
            }
            .current-timeline .timeline-detail{
                border-color:#525252;
                color:#3c3c3c;
            }
            .timeline-detail p{
                margin:0;
                font-size:15px;
                line-height:17px;
            }
            .timeline-link a.open-modal{
                float:right;
                color: #4296b6;
                text-decoration:none;
                font-size:12px;
                background:url(http://www.bu.ac.th/images/timeline-link.png) no-repeat center right;
                padding-right:17px;
            }
            .current-timeline .timeline-link a{
                color:#fff;
background:url(http://www.bu.ac.th/images/timeline-active-link.png) no-repeat center right;
            }
            #timeline-date-container{
                width: 860px;
                position:relative;
                margin-top:12px;
                border-top:5px solid #747474;
            }
            #timeline-date-line{
                width: 894px;
                height: 10px;
                position: relative;
                margin:12px 8px 0px 8px;
                opacity: 0.9;
                background-color:#747474;
                border-top:2px solid black;
                z-index: 0;
                display:none;
            }
            #timeline-date-label{
                position:relative;
                display:inline;
                top:11px;
                color:#0c93cf;
                font-weight:bold;
                font-size:15px;
                /*color: #0c93cf;*/
                text-shadow: rgba(255,255,255,0.5) 1px 1px 0px;
                font-family: 'TradeGothicBold';
            }
            ul#timeline-dates{
                display:inline;
                position:absolute;
                list-style: none;
                margin-left:3px;
                top: 5px;
            }
            ul#timeline-dates li{
                display:inline-block;
                margin:0 5px;
                width:26px;
                cursor:pointer;
                padding:7px 9px;
                z-index:1;
                font-family: 'TradeGothicBold';
                font-size:12px;
                font-weight:bold;
                line-height:13.06px;
                color:#6e6e6e;
                /*text-shadow: rgba(255,255,255,1) 1px 1px 0px;*/
            }
            ul#timeline-dates li.date-focus{
                background:#737373;
                border-top:15px solid #3db4e5;
                color:#fff;
                /*text-shadow: rgba(0,0,0,1) 1px 1px 0px;*/
            }
            ul#timeline-dates li:hover{
                background:#737373;
                border-top:15px solid #3db4e5;
                color:#fff;
               /* text-shadow: black 1px 1px 0px;*/
            }
            #backward{
               width: 50px;
height: 50px;
position: absolute;
top: 138px;
left: -45px;
background: url(http://www.bu.ac.th/images/timeline-prev.png) no-repeat center center;
cursor: pointer;
            }
            #forward{
                width: 50px;
height: 50px;
position: absolute;
top: 138px;
right: -45px;
background: url(http://www.bu.ac.th/images/timeline-next.png) no-repeat center center;
cursor: pointer;
            }
#dotdot{
position: absolute;
display: inline-block;
height: 31px;
width: 45px;
text-align: right;
right: -5px;
bottom: 14px;
letter-spacing: 2px;
font-size: 18px;
color:#6e6e6e;
line-height: 37px;
}
              #timeline-date-bind {
position: absolute;
display: block;
margin-top: -31px;
left: 85px;
height: 46px;
width: 756px;
overflow: hidden;
}
ul.timeline-menu li,ul.timeline-menu li a{
border:none;
}
.modal-container{
                position: fixed;
                z-index:100;
                top: 0px;
                left: 0px;
                width:753px;
                height:405px;
                display:none;
               background:url(http://www.bu.ac.th/images/about/timeline/modal-bg.png) no-repeat center center;
            }
            .modal-header{
                height:44px;
                margin-bottom:8.5px;
            }
            .modal-header h1{
                font-family:"TradeGothicBold";
                font-size:22px;
                line-height:47px;
                color: #514d4e;
                margin:0 15px;
                display:inline;
                text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
            }
            .modal-header a{
                float:right;
                line-height:44px;
                margin-right:18px;
            }
            .modal-img{
                width:380px;
                height:335px;
                float:left;
                margin:0 4px 18.5px 8.5px;
            }
            .modal-content-container{
                float:right;
                /*width:331px;*/
                /*height:auto;*/
                margin-right:18px;
            }
            .nano{
                width:331px;
                height:335px;
            }
            .modal-content h2{
                font-size:18px;
                font-weight:bold;
width:320px;
                color:#499aba;
                border-bottom:1px solid #499aba;
            }
            .modal-content ul{
                margin-left: 18px;
                margin-top: 6px;
                font-size: 15px;
                color: #ceced1;
                line-height: 18px;
width:303px;
            }
            .modal-content ul li{
                list-style: url(../images/about/arrow.png);
            }
            .modal-content{
                margin-bottom:8px;
            }
            #lean_overlay {
                position: fixed;
                z-index:100;
                top: 0px;
                left: 0px;
                height:100%;
                width:100%;
                background: #000;
                display: none;
            }
#modal-prev{
                position:absolute;
                width:30px;
                height:30px;
                background: url(http://www.bu.ac.th/images/timeline-prev.png) no-repeat center center;
                top:195px;
                left:-45px;
                cursor:pointer;
            }
            #modal-next{
                position:absolute;
                width:30px;
                height:30px;
                background: url(http://www.bu.ac.th/images/timeline-next.png) no-repeat center center;
                top:195px;
                right:-45px;
                cursor:pointer;
            }
a.modal-close{
display:inline-block;
width:20px;
height:20px;
margin:12px;
 background:url(http://www.bu.ac.th/images/timeline-close.png) no-repeat center center;
}