temasek-twig.css

/*Reset Default {*/
    *{

    }
    h1,h2,h3,h4,h5,h6{
        padding: 0;
        margin: 0;
        font-weight: 500;
    }
    .h3{
        font-size: 24.5px;
    }
    ul,ol{
        list-style: none;
    }
    a{
        color: #74aac3;
    }
    a:hover{
        text-decoration: none;
    }
    body{
        background: #ecedf1;
        font-family: 'Hind Vadodara', sans-serif;
        font-weight: 400;
        font-size: 18px;
    }
/*} Reset Default*/

/*Predefiend {*/
    .red-text{
        color:#ff0000;
    }
    .green-text{
        color:#65af04;
    }
    .lead{
        font-size: 20px;
    }
    .border-text-box{
        border: 2px solid #c0b283;
        padding: 20px;
    }

    .btn-group-horizontal .btn{
        margin-left: 15px;
        margin-bottom: 15px;

    }
    .btn{
        border: 0;
        color: #fff;
        text-shadow: none;
        border-radius: 0;
        font-size: 18px;
        padding: 15px 30px;
        background: #000;
    }
    .btn.gray{
        background: #cdcbcb;
        color: #ffffff;
    }
    .btn.gray:hover{
        background: #adabab;
    }
    .btn.gold{
        background: #c0b283;
        color: #ffffff;
    }
    .btn.gold:hover{
        background: #bca864;
    }
/*} Predefiend*/


/* Stater {*/
    #guard{
        background: #eeeff3;
    }
    #header{
        background: #3B0F55;
        height: 85px;
    }
    #header .menu{
        display: inline-block;
    }
    #header .menu ul li{
        margin:0 20px;
        display: inline-block;
        line-height: 85px;
    }
    #header .menu ul{

    }
    #header .menu ul li a{
        color:#89619E;
        font-size: 22px;
    }
    #header .menu ul li a:hover{
        color:#ffffff;
    }
    #header .menu ul li.active a{
        color:#ffffff;
    }
    @media only screen and (max-width: 900px) {
        #header .menu ul li{
            display:none;
        }        
        #header .menu ul li.active{
            display:block;
        }        
    }    
    #nav .menu{

    }
    #banner{
	    background: linear-gradient( rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)), url(https://gevme.s3.amazonaws.com/assets/10154031/45619883/3d18ef077e9216df59362475437e2212.jpg);
        height: 515px;
        color:#3B0F55;
        vertical-align: text-bottom;
        position: relative;
        background-size: 100%;
        background-size: cover;
    }
    #banner .banner-text{
        font-weight: 300;
        position: absolute;
        bottom: 280px;
        left: 0;
        right: 0;
        text-align: center;
        margin:auto;
        font-size: 50px;
    }
    #main{
        margin-top: -185px;
        padding:30px;
        background: #ffffff;
        min-height: 600px;
        position: relative;
    }
    @media  only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
        body #banner{
			background: linear-gradient( rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)), url('https://gevme.s3.amazonaws.com/assets/10154031/45619883/9d18ef077e9216df59362475437eww2.png');
        }
    }
    @media only screen and (max-width: 420px) {
	    body #banner {
	        height: 160px;
	        -webkit-background-size: cover;
	        background-size: cover;
	    }
	    body #banner .banner-text {
	        font-size: 20px;
	        bottom: 60px;
	    }
		body #main{
			margin-top: 0;
		}
	}
/*} Stater*/

/*Your Invitation Page {*/
    .dynamic-section.your-invitation .event-lists{}
    .dynamic-section.your-invitation .event-lists .event{
        margin-bottom: 5px;
        background: #edecec;
    }
    .dynamic-section.your-invitation .event-lists .event .time{
        color: #ffffff;
        background: #383838;
        text-align: center;
    }
    .dynamic-section.your-invitation .event-lists .event .time div{
        width: inherit;
    }
    .dynamic-section.your-invitation .event-lists .event .time>div,
    .dynamic-section.your-invitation .event-lists .event .desc>div{
        vertical-align: middle;
        display: table-cell;
        height: 80px;
        padding:0 15px;
    }
    .dynamic-section.your-invitation .event-lists .event .desc{
        font-size: 16px;
    }
    .dynamic-section.your-invitation .btn{
        color: #ffffff;
        border-radius: 0;
        
    }
    .dynamic-section.your-invitation .btn{
        
    }
    .dynamic-section.your-invitation .no-btn{
        background: #cdcbcb;
    }
    .dynamic-section.your-invitation .yes-btn{
        background: #c0b283;
    }
    .dynamic-section.your-invitation .btn a{
        color: #ffffff;
        font-weight: 600;
        text-shadow: none;
    }
    /*Table*/
    .events-table {
        margin-bottom: 13px;
    }
    .events-table table {
        width: 100%;
    }
    .events-table table td, .events-table table th {
        vertical-align: middle;
        text-align: center;
        border: 2px solid #fff;
    }
    .events-table table thead th {
        background: #013A81;
        color: #fff;
        padding: 10px;
        font-size: 15px;
        width:23%;
    }
    .events-table table thead th:first-child{
        width:11%;
    }
    table td .faketd{
        padding:10px;
    }
    table td .faketd~.faketd{
        border-top:2px solid #fff;
    }

    .events-table table tbody tr td:first-child{
        color: #fff;
        background: #013A81;
        font-size: 20px;
        padding:10px;
    }
    .events-table table tbody tr td {
        background: #FDEAD2;
        padding: 0;
        font-size: 14px;
    }   
/*} Your Invitation Page*/



/*Your Response Page {*/
    .dynamic-section.your-response {
        
    }

/*} Your Response Page*/

/*Your Response Page {*/
    .confirmation-message.your-response {
        
    }

/*} Your Response Page*/

/*Your Programme Page {*/
    .programme-lists{
      /* background: #aaa; */
    }
    .programme-lists .programme{
        margin-bottom: 20px;
        background: #edecec;
        padding:15px;
        box-sizing: border-box;
    }
    .programme-lists .programme p {
        margin: 0 0 0 0;
        font-size: 16px;
    }
    .programme-lists .programme h4{
        margin-bottom:10px;
    }
    .programme-lists .programme table {
        width: 100%;
        margin: 10px 0;
    }
    .programme-lists .programme table th {
        text-align: left;
        background: #013A81;
        color: #fff;
        padding: 5px;
    }
    .programme-lists .programme table tbody {
        background: #F0F0F0;
        font-size: 16px;
    }      
    .programme-lists .programme table tbody td{
        padding:5px;
    } 
    .programme-lists .programme table tbody td:first-child{
        width:120px;
    }  
/*} Your Programme Page*/

temasek-twig.js

$(function(){
	showHideDynamicSection();
});

function showHideDynamicSection()
{

	var hash = $(location).attr('hash');
	hash = hash ? hash :'#your-invitation';// set default hash

	$dynamicSection = $('#main .dynamic-section');
	$dynamicSection.hide();

	$dynamicSection.filter("div[data-target-pane='"+hash+"']").addClass('active');
	$dynamicSection.filter('.active').show();

	$navMenu = $('#nav-menu li');
	$navMenu.find('a').filter("[data-target-section='"+hash+"']").parent('li').addClass('active');


	$("a[data-target-section]").click(function (e) {
		
		$('body').scrollTop(0);
				
		var $targetSection = $(this).data('targetSection');
		$(this).tab('show');
		$dynamicSection.hide();

		$dynamicSection.removeClass('active');
		$dynamicSection.filter("div[data-target-pane='"+$targetSection+"']").addClass('active');
		$dynamicSection.filter('.active').show();
	});
}