@import url('https://fonts.googleapis.com/css?family=Bebas+Neue');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

/** ==========================================================================
    General styles
    ======================================================================= **/
		html,
		body {
		    height: 100%;
            background: #eee;
            width: 100%;
            overflow-x: hidden;
		}

        h1, h2, h3, h4, h5, .nav li a, .about_box .about_nav a {
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1px;
            font-weight: normal;
            color: #fff;
            text-transform: uppercase;
            margin-top: 0;
            padding-top: 0;
        }

        p, .list-group-item, label, .form-control, .tt-menu, body {
            font-family: 'Lato', sans-serif;
        }

        .hide-on-load { display: none; }

        a { color: #ccc; text-decoration: none; }
        a:hover { color: #fff; text-decoration: none; }

        .btn { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; font-weight: normal; font-size: 18px; padding: 4px 25px; margin-right: 10px; border-radius: 0 !important; }
        
        .btn-primary, .btn-primary:active, .btn-primary:focus { color: #333; background-color: #efefef; border-color: #333; outline-offset: 0; outline-style: auto; outline-width: 0px; }
        .btn-primary:hover { color: #efefef; background-color: #333; border-color: #fff; }
        
        .btn-default, .btn-default:active, .btn-default:focus { color: #777; background-color: #333; border-color: #333; outline-offset: 0; outline-style: auto; outline-width: 0px; }
        .btn-default:hover { color: #777; background-color: #444; border-color: #444; }
        
        .btn-danger, .btn-danger:active, .btn-default:focus { color: #fff; background-color: #bfbfbf; border-color: #bfbfbf; outline-offset: 0; outline-style: auto; outline-width: 0px; }
        .btn-danger:hover { color: #fff; background-color: #cac9c9; border-color: #cac9c9; }

        .navbar-toggle {
            display: block !important;
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1002;
            cursor: pointer;
        }

        .navbar-toggle .icon-bar {
            width: 30px;
        }

        .nav-pills a, a.side-nav {
            text-decoration: none !important;
        }

        div.side-nav {
            background: #333;
            width: 200px;
            height: 100%;
            padding: 0 20px 0;
            box-sizing: border-box;
            position: fixed;
            top: 0;
            right: 0;
            margin-right: -200px;
            z-index:1001;
            -o-transition:.25s; -ms-transition:.25s; -moz-transition:.25s; -webkit-transition:.25s; transition:.25s;
        }

        div.side-nav.slide-it {
            margin-right: 0;
        }

        .side-nav .list-group {
            margin-top: 75px; 
            background: none !important;
        }

        .side-nav .list-group .list-group-item {
            text-align: right;
            background: none; 
            border: 0; 
            color: #ccc;
            padding: 7px 16px;
        }

        .side-nav hr {
            margin: 5px 0;
            border-color: #555;
        }

        .navbar-toggle .icon-bar {
            background: #e61e25;
            height: 4px;
            margin-bottom: 5px;
            border-radius: 5px;
        }

        #home { 
            background: url('../images/Marimba2Darker.jpg') center center no-repeat; 
            background-size: cover;
            height: 100%;
            position: relative;
        }

        #home .logo {
            position: absolute;
            background: url('../images/scpa_redline8.png') no-repeat top right;
            background-size: 1358px 112px;
            width: 55%;
            left: 0;
            margin-left: 0;
            margin-top: -70px;
            top: 52%;
            height: 165px;
        }
        
        #home .nav_logo {
            font-family: Arial Black;
            color: #fff !important;
            text-transform: uppercase;
            position: absolute;
            top: 52%;
            height: 165px;
            left: 55%;
            width: 40%;
            max-width: 475px;
            margin-top: -70px;
            padding: 97px 25px 0;
            box-sizing: border-box;
            text-align: justify;
        }

        #home .nav_logo:after {
            content: "";
            display: inline-block;
            width: 100%;	
        }
        
        #home .nav_logo a {
            color: #fff;
            display: inline-block;
        }

        /* #home.stick-it {
            height: 165px;
        } */

		.logo_area {
			width: 600px;
			text-align: center;
			position: fixed;
			top: 50%;
			left: 50%;
			margin: -100px 0 0 -300px;
            /* font-family: 'oswaldextralight', sans-serif; */
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1px;
			font-weight: normal;
			z-index: 3000;
			font-size: 28px;
			-o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;
		}

		.logo_area p {
			text-align: center;
			margin-top: 25px;
		}

		.logo_area p a, .logo_area p a:focus, .logo_area p a:active {
			display: inline-block;
			padding: 5px 15px;
			text-transform: uppercase;
			color: #fff;
			text-decoration: none;
		}

		.logo_area p a:hover {
			color: #ccc;
			text-decoration: none;
		}

        .modal { z-index: 10000; }
        .modal-content {
            position: relative;
            z-index: 10000;
            background: #000 url( '../images/modal_bg.png' );
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 0;
            border: 0;
            border-radius: 0;
            outline: 0;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            color: #ccc;
            
        }
        .model-content h1 { color: #fff !important; }
        .modal-content .modal-header { border-bottom: 1px solid #444 !important; }
        .modal-content .modal-header h1 { color: #fff !important; }
        .modal-content .modal-body {
            padding: 50px;
        }
        .modal-content .modal-body a {
            color: #fff;
            text-decoration: underline;
        }
        .modal-content .modal-body a:hover {
            color: #e61e25;
            text-decoration: underline;
        }
        .modal-content .modal-body a.btn {
            color: #333;
            text-decoration: none;
        }
        .modal-content .modal-body a:hover {
            color: #fff;
            text-decoration: none;
        }
        .modal-content .modal-body a.btn-default {
            color: #fff;
        }
        .modal-content .modal-body a.btn-default:hover {
            color: #333;
            background: #777;
        }
        .form-control { 
            background: #fff !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            border: 0 !important;
            border: 1px solid #ccc !important;
            border-bottom: 2px solid #bbb !important;
            /** -webkit-appearance: none !important; **/
        }
        select, select.form-control { border-radius: 0 !important; border-bottom-left-radius: 0 !important; }
        .modal-content .form-control { 
            color: #ccc !important;
            border-color: #333 !important; 
        }
        a.close, .close_this_modal { 
            opacity: .7 !important; 
            background: url( '../images/close.png?v=1' ) 0 0 no-repeat; 
            display: block; 
            width: 40px; 
            height: 40px; 
            float: right; 
            border: 0; 
            z-index: 2;
        }
        a.close:hover, .close_this_modal:hover { 
            opacity: 1 !important; 
        }

        a.down_arrow { 
            position: fixed;
            z-index: 5000; 
            opacity: .5 !important; 
            background: url( '../images/down.png?v=1' ) 50% 100% no-repeat; 
            display: block; 
            width: 65px;
            text-align: center; 
            height: 75px; 
            bottom: 150px; 
            left: 50%; 
            margin: 0 0 0 -37px; 
            border: 0; 
            /* font-family: 'oswaldextralight', sans-serif;  */
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1px;
            font-weight: normal; 
            text-transform: uppercase;
            font-size: 24px;
        }

        a.down_arrow:hover { 
            opacity: 1 !important; 
        }
        /*
        -webkit-transition: background 0.3s; -moz-transition: background 0.3s; -o-transition: background 0.3s; -ms-transition: background 0.3s; transition: background 0.3s;
        */

        #icon_nav {
            position: fixed; 
            top: 25px;
            right: 25px;
            z-index: 1;
            text-align: right;
            width: 125px;
            height: 50px;
        }

        #icon_nav img {
            width: 25px;
            height: 25px;
            opacity: .5;
        }

        #icon_nav a:hover img {
            opacity: 1;
        }

        .tabbox { display: none; }
        .tabbox.open { display: block; }
        .close_box { display: block; width: 40px; height: 40px; position: absolute; top: 25px; right: 25px;     z-index: 2;}

        .sub .nav.nav-pills li a {
            font-size: 18px;
            padding-top: 10px;
            color: #333;
        }
        .sub .nav.nav-pills li.active a {
            color: #fff;
            background-color: #555;
            border-color: #555;
        }

        .tt-menu.tt-open { max-height: 250px; overflow: auto; }





        .top_fixed_header { 
            display: none; 
            width: 100%; 
            height: 75px; 
            background: #fff; 
            position: fixed; 
            top: 0; 
            left: 0; 
            padding: 25px; 
            z-index: 4;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .action-items {
            position: relative;
            z-index: 5;
        }





/** ==========================================================================
    Fade Carousel
    ======================================================================= **/
    	header#myCarousel {
    		margin: 0;
            background: #000;
    		-o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;
    	}

		.carousel,
		.item,
		.active {
		    height: 100%;
		}

		.carousel-inner {
		    height: 100%;
		}

		.fill {
		    width: 100%;
		    height: 100%;
		    background-position: center;
		    -webkit-background-size: cover;
		    -moz-background-size: cover;
		    background-size: cover;
		    -o-background-size: cover;
		}		

	/** inspired from http://codepen.io/Rowno/pen/Afykb  **/
		.carousel-fade .carousel-inner .item {
			opacity: 0;
			transition-property: opacity;
		}

		.carousel-fade .carousel-inner .active {
		  	opacity: 1;
		}

		.carousel-fade .carousel-inner .active.left,
		.carousel-fade .carousel-inner .active.right {
		  	left: 0;
		  	opacity: 0;
		  	z-index: 1;
		}

		.carousel-fade .carousel-inner .next.left,
		.carousel-fade .carousel-inner .prev.right {
		  	opacity: 1;
		}

		.carousel-fade .carousel-control {
		  	z-index: 2;
		}

	/**
	 * WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
	 * now override the 3.3 new styles for modern browsers & apply opacity
	 */
		@media all and (transform-3d), (-webkit-transform-3d) {
		    .carousel-fade .carousel-inner > .item.next,
		    .carousel-fade .carousel-inner > .item.active.right {
		      	opacity: 0;
		      	-webkit-transform: translate3d(0, 0, 0);
		              	transform: translate3d(0, 0, 0);
		    }
		    .carousel-fade .carousel-inner > .item.prev,
		    .carousel-fade .carousel-inner > .item.active.left {
		      	opacity: 0;
		      	-webkit-transform: translate3d(0, 0, 0);
		              	transform: translate3d(0, 0, 0);
		    }
		    .carousel-fade .carousel-inner > .item.next.left,
		    .carousel-fade .carousel-inner > .item.prev.right,
		    .carousel-fade .carousel-inner > .item.active {
		      	opacity: 1;
		      	-webkit-transform: translate3d(0, 0, 0);
		              	transform: translate3d(0, 0, 0);
		    }
		}






/** ==========================================================================
    About
    ======================================================================= **/
        .about_box { 
            padding: 25px 0 0 0;
            z-index: 5000; 
            background: #eee; 
            position: fixed; 
            top: -440px; 
            left: 0; 
            width: 100%; 
            height: 440px; 
            -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; 
            color: #333;
            overflow-x: auto;
        }

        .the_about_header { 
            z-index: 5001;
            width: 50px;
            height: 50px;
            right: 0;
            left: auto;
            top: -100px;
            position: fixed; 
            padding: 0;
            margin: 0;
            -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; 
        }
        .the_about_header.active {
            top: 0px !important;
        }
        .the_about_header a { top: 10px !important; right: 10px !important;}

        .about_box h1, .about_box h2, .about_box h3, .about_box h4, .about_box h5 {
            color: #333;
        }

        hr { border-top: 1px solid #ccc; }

        .about_box .tabbox a { color: #000; text-decoration: underline; }
        .about_box .tabbox a:hover { color: #e61e25; }
        .about_box .form-control { background: #ccc !important; }

        .about_box .form-control.big-input { color: #333; font-size: 24px; border-color: #ccc; display: block; height: auto; padding: 10px !important; letter-spacing: 1px; font-family: 'Bebas Neue', sans-serif; font-weight: normal; text-transform: uppercase; }

        .about_box .about_nav a { border-radius: 0; color: #999; font-size: 18px; padding: 5px 10px; display: block; margin: 0; }
        .about_box .about_nav a:hover { background: #eee; }
        .about_box .about_nav a.active { color: #333; }

        /** Animgate **/
        .about .logo_area {
            margin-top: 150px;
        }

        .about header#myCarousel {
            margin-top: 200px;
        }

        .about .about_box { 
            top: 0;
        }

        .about .down_arrow { 
            display: none;
        }






/** ==========================================================================
    News
    ======================================================================= **/
        .news_box { 
            padding: 25px 0 0 0;
            background: #eee; 
            position: relative; 
            width: 100%; 
            color: #333;
        }

        .news_box h1, .news_box h2, .news_box h3, .news_box h4, .news_box h5 {
            color: #333;
        }

        .news_box a { color: #000; text-decoration: underline; }
        .news_box a:hover { color: #e61e25; text-decoration: underline; }

        .the_news_header { 
            z-index: 5001;
            width: 50px;
            height: 50px;
            right: 0;
            left: auto;
            top: 100%;
            background: #fff;
            position: fixed; 
            padding: 0;
            margin: 0;
            -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; 
        }
        .the_news_header.active {
            margin-top: -500px;
        }
        .the_news_header a { top: 10px !important; right: 10px !important;}

        /** Animgate **/
        .news .logo_area {
			margin-top: -300px;
		}

		.news header#myCarousel {
			margin-top: -200px;
		}

        .news .news_box { 
            margin-top: -500px;
        }



        .child_div, .ens_div { 
            position: fixed;
            background: #fff;
            top: 0px;
            right: 0;
            width: 45%;
            overflow-y: scroll;
            padding: 100px 25px 25px 25px;
            height: 100%;
            z-index: 7000;
            display: none;
            box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        .ens_div { z-index: 7001; }


/** ==========================================================================
    Schedule
    ======================================================================= **/
        .schedule_box { 
            position: relative;
            padding: 100px 25px 25px 25px;
            z-index: 5000; 
            background: #eee; 
            position: fixed; 
            top: 0; 
            right: -45%; 
            width: 45%; 
            height: 100%; 
            -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; 
            color: #333;
            overflow-x: auto;
        }
        .schedule_box .container-fluid { padding-left: 0; padding-right: 0; }
        .schedule_box.the_header { z-index: 5001; padding: 25px; height: 100px; width: 44%; margin-right: 1%; overflow: hidden; }
        .schedule_box.the_header .comp_title h2 { margin: 0; font-size: 16px; }
        .schedule_box.the_header .comp_title h2 small { font-size: 14px; padding: 5px 0; display: block; }

        .schedule_box h1, .schedule_box h2, .schedule_box h3, .schedule_box h4, .schedule_box h5 {
            color: #333;
        }

        .schedule_box a { color: #000; text-decoration: underline; }
        .schedule_box a:hover { color: #e61e25; text-decoration: underline; }

        /** Animgate **/
        .schedule .schedule_box {
            right: 0;
        }

        .schedule .logo_area {
            margin-left: 0;
            left: 10%;
        }

        .schedule header#myCarousel {
            margin-left: -250px;
        }

        .schedule .down_arrow { 
            display: none;
        }

        #schedule { list-style: none; margin: 0; padding: 0; }
        #schedule li { width: 100%; margin: 0; padding: 0; border-bottom: 1px solid #ccc; }
        #schedule li div.one { color: #333; padding: 1%; margin: 0; width: 18%; float: left; }
        #schedule li div.two { color: #333; padding: 1%; margin: 0; width: 43%; float: left; }
        #schedule li div.three { color: #333; padding: 1%; margin: 0; width: 11%; float: left; }
        #schedule li div.four { color: #333; padding: 1%; margin: 0; width: 8%; float: left; }
        #schedule li div.five { color: #333; padding: 1%; margin: 0; width: 9%; float: left; }
        #schedule li div.six { color: #333; padding: 1%; margin: 0; width: 9%; float: left;  }
        #schedule li:hover { background: #eee; }
        #schedule li.heading { background: #333 !important; }
        #schedule li.heading div { color: #fff !important; font-weight: bold !important; }

        div.panelstyle { width: 330px; height: auto; padding: 15px 0px 0px 15px; position: absolute; margin-top: -100px; margin-left: 40px; display: none; }
        div.close { background: url('images/icons/close.png') center center no-repeat; width: 35px; height: 35px; position: absolute; top: 0px; left: 0px; cursor: pointer; }
        div.panel { width: 285px; height: auto; padding: 15px; background: #000; border: 1px solid #555; -moz-box-shadow: 0px 0px 8px #333; -webkit-box-shadow: 0px 0px 8px #333; }
        div.panel p { color: #ccc; }
        div.panel a { color: #b1c5e9; }
        div.displaypanel a { cursor: pointer; }









/** ==========================================================================
    Schedule
    ======================================================================= **/
        .scores_box { 
            position: relative;
            padding: 100px 25px 25px 25px;
            z-index: 5000; 
            background: #eee; 
            position: fixed; 
            top: 0; 
            left: -45%; 
            width: 45%; 
            height: 100%; 
            -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; 
            color: #333;
            overflow-x: auto;
        }

        .scores_box.the_header { z-index: 5001; padding: 25px; max-width: 44%; height: 100px;}

        .scores_box h1, .scores_box h2, .scores_box h3, .scores_box h4, .scores_box h5 {
            color: #333;
        }

        .scores_box a { color: #000; text-decoration: underline; }
        .scores_box a:hover { color: #e61e25; text-decoration: underline; }

        /** Animgate **/
        .scores .scores_box {
            left: 0;
        }

        .scores .logo_area {
            margin-left: 0;
            left: 55%;
        }

        .scores header#myCarousel {
            margin-right: -250px;
        }

        .scores .down_arrow { 
            display: none;
        }



.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    z-index: 2;
    color: #fff;
    background-color: #555;
    border-color: #555;
}



.padding-sm { padding-top: 5px; }

/** ==========================================================================
    Mobile 
    ======================================================================= **/
        @media ( max-width: 991px ) { /* 991px */
            .padding-sm { padding: 25px 10px; }
            .nav_logo { display: none; }
            #home .logo {
                background-size: 900px 74px;
                /* margin-top: 45px; */
                width: 65%;
            }
            .scores_box.the_header {
                max-width: 100%;
            }
        }

        @media ( max-width: 600px ) {
            a.down_arrow {
                bottom: 75px;
            }
            
            .logo_area p a { 
                padding: 5px 7px;
                font-size: 18px; 
            }

            /** About **/
            .about .about_box {  margin-top: 0; top: 0; height: 100%; }
            .about .about_box .container { max-width: 80%; padding: 25px 0 0 0; }

            /** News **/
            .news .news_box {  margin-top: 0; top: 0; }
            .news .news_box .container { max-width: 80%; padding: 25px 0 0 0; }
            .news .the_news_header.active { margin-top: 0; top: 0; background: none; }

            /** Scores **/
            .scores .scores_box { left: 0; width: 100%; }
            .scores .scores_box .container { max-width: 80%; padding: 25px 0 0 0; }

            /** Schedule **/
            .schedule .schedule_box { right: 0; width: 100%; }
            .schedule .schedule_box .container { max-width: 80%; padding: 25px 0 0 0; }
        }

        .action_links a { color: #333; }



/****************************************************************
 * Loader Styles
*****************************************************************/
            .cssload-container *, .cssload-container *:before, .cssload-container *:after{
                box-sizing: border-box;
                -o-box-sizing: border-box;
                -ms-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
            }
            
            .cssload-container {
                margin: 15px auto;
                width: 210px;
                height: 25px;
            }
            .cssload-container > div {
                float: left;
                background: rgb(204,0,0);
                height: 100%;
                width: 18px;
                margin-right: 4px;
                display: inline-block;
            }
            
            .cssload-container .cssload-shaft1 {
                animation-delay: 0.06s;
                    -o-animation-delay: 0.06s;
                    -ms-animation-delay: 0.06s;
                    -webkit-animation-delay: 0.06s;
                    -moz-animation-delay: 0.06s;
            }
            .cssload-container .cssload-shaft2 {
                animation-delay: 0.12s;
                    -o-animation-delay: 0.12s;
                    -ms-animation-delay: 0.12s;
                    -webkit-animation-delay: 0.12s;
                    -moz-animation-delay: 0.12s;
            }
            .cssload-container .cssload-shaft3 {
                animation-delay: 0.17s;
                    -o-animation-delay: 0.17s;
                    -ms-animation-delay: 0.17s;
                    -webkit-animation-delay: 0.17s;
                    -moz-animation-delay: 0.17s;
            }
            .cssload-container .cssload-shaft4 {
                animation-delay: 0.23s;
                    -o-animation-delay: 0.23s;
                    -ms-animation-delay: 0.23s;
                    -webkit-animation-delay: 0.23s;
                    -moz-animation-delay: 0.23s;
            }
            .cssload-container .cssload-shaft5 {
                animation-delay: 0.29s;
                    -o-animation-delay: 0.29s;
                    -ms-animation-delay: 0.29s;
                    -webkit-animation-delay: 0.29s;
                    -moz-animation-delay: 0.29s;
            }
            .cssload-container .cssload-shaft6 {
                animation-delay: 0.35s;
                    -o-animation-delay: 0.35s;
                    -ms-animation-delay: 0.35s;
                    -webkit-animation-delay: 0.35s;
                    -moz-animation-delay: 0.35s;
            }
            .cssload-container .cssload-shaft7 {
                animation-delay: 0.4s;
                    -o-animation-delay: 0.4s;
                    -ms-animation-delay: 0.4s;
                    -webkit-animation-delay: 0.4s;
                    -moz-animation-delay: 0.4s;
            }
            .cssload-container .cssload-shaft8 {
                animation-delay: 0.46s;
                    -o-animation-delay: 0.46s;
                    -ms-animation-delay: 0.46s;
                    -webkit-animation-delay: 0.46s;
                    -moz-animation-delay: 0.46s;
            }
            .cssload-container .cssload-shaft9 {
                animation-delay: 0.52s;
                    -o-animation-delay: 0.52s;
                    -ms-animation-delay: 0.52s;
                    -webkit-animation-delay: 0.52s;
                    -moz-animation-delay: 0.52s;
            }
            .cssload-container .cssload-shaft10 {
                animation-delay: 0.58s;
                    -o-animation-delay: 0.58s;
                    -ms-animation-delay: 0.58s;
                    -webkit-animation-delay: 0.58s;
                    -moz-animation-delay: 0.58s;
            }
            
            .cssload-container > div {
                height: 7px;
                animation: cssload-wave 1.15s infinite ease-in-out;
                    -o-animation: cssload-wave 1.15s infinite ease-in-out;
                    -ms-animation: cssload-wave 1.15s infinite ease-in-out;
                    -webkit-animation: cssload-wave 1.15s infinite ease-in-out;
                    -moz-animation: cssload-wave 1.15s infinite ease-in-out;
                transform: translateY"("-35px")";
                    -o-transform: translateY"("-35px")";
                    -ms-transform: translateY"("-35px")";
                    -webkit-transform: translateY"("-35px")";
                    -moz-transform: translateY"("-35px")";
            }
            
            
            
            @keyframes cssload-wave {
                50% {
                    background: rgb(255,194,194);
                    transform: translateY"("35px")";
                }
            }
            
            @-o-keyframes cssload-wave {
                50% {
                    background: rgb(255,194,194);
                    -o-transform: translateY"("35px")";
                }
            }
            
            @-ms-keyframes cssload-wave {
                50% {
                    background: rgb(255,194,194);
                    -ms-transform: translateY"("35px")";
                }
            }
            
            @-webkit-keyframes cssload-wave {
                50% {
                    background: rgb(255,194,194);
                    -webkit-transform: translateY"("35px")";
                }
            }
            
            @-moz-keyframes cssload-wave {
                50% {
                    background: rgb(255,194,194);
                    -moz-transform: translateY"("35px")";
                }
            }



/****************************************************************
 * Typeahead
*****************************************************************/
            .twitter-typeahead { width: 100%; }
            .tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
            #view-site input.typeahead { font-size: 18px; height: 30px; }
            .tt-hint { color: #999; }           
            .tt-menu.tt-open { z-index: 3000 !important; width: 100%; margin: 0px 0 0 0; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); }
            .tt-suggestion { padding: 3px 20px; font-size: 12px; line-height: 18px; }
            .tt-suggestion:hover { cursor: pointer; background-color: #eee; }
            .tt-suggestion.tt-cursor { background-color: #eee; }
            .tt-suggestion p { margin: 0; }
            .gist { font-size: 14px; }