﻿body {
}
/*
	GLOBAL
*/



/* 
	MULTILINES 
*/

.multilines .controls {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

    .multilines .controls a {
        margin-left: 8px;
        text-transform: uppercase;
    }

.multilines .container {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    position: relative;
    margin: 80px auto 40px auto;
    width: 700px;
}

    .multilines .container:before, .multilines .container:after {
        border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
        bottom: 0;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
        content: "";
        left: 10px;
        position: absolute;
        right: 10px;
        top: 50%;
        z-index: -1;
    }

.multilines ul.newsticker {
    display: block;
    margin: 0;
    padding: 0;
}

    .multilines ul.newsticker > li {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: #fff;
        height: 46px;
        padding: 16px 12px;
        border-bottom: 1px dotted #888;
        -o-transition: background-color .2s;
        -moz-transition: background-color .2s;
        -webkit-transition: background-color .2s;
        -ms-transition: background-color .2s;
        transition: background-color .2s;
    }

        .multilines ul.newsticker > li:hover {
            background-color: #e0f0ff;
        }


/*
	ONELINER
*/

.oneliner {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    position: relative;
    width: 100%;
    /*height: 44px;*/
    background-color: #fff;
    border-radius: 2px;
}

    .oneliner:before, .oneliner:after {
        border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
        bottom: 0;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        content: "";
        left: 10px;
        position: absolute;
        right: 10px;
        top: 50%;
        z-index: -1;
    }

    .oneliner .header {
        background-color: #ff2e2e;
        display: inline-block;
        width: 180px;
        height: 44px;
        text-transform: uppercase;
        font-weight: 500;
        line-height: 44px;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-align: center;
        border-radius: 2px 0 0 2px;
        cursor: pointer;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        -webkit-animation: redPulse 4s infinite;
        -moz-animation: redPulse 4s infinite;
        animation: redPulse 4s infinite;
    }

    .oneliner:hover .header {
        -webkit-animation: redPulse 1s infinite;
        -moz-animation: redPulse 1s infinite;
        animation: redPulse 1s infinite;
    }

    .oneliner .header:active {
        background-color: #000;
        margin-left: -12px;
        color: #aaa;
    }

    .oneliner ul.newsticker {
        display: inline-block;
        height: 44px;
        max-width: 100%;
        overflow: hidden;
        margin: 0 0 0 -3px;
        padding: 0 0 0 6px;
        line-height: 44px;
        font-weight: 500;
        background-color: #fafafa;
    }

        .oneliner ul.newsticker > li {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            border-bottom: 1px dotted #888;
        }




@-webkit-keyframes redPulse {
    from {
        background-color: #ff2e2e;
        -webkit-box-shadow: 0 0 9px #555;
    }

    50% {
        background-color: #bd0000;
        -webkit-box-shadow: 0 0 14px #ff2e2e;
    }

    to {
        background-color: #ff2e2e;
        -webkit-box-shadow: 0 0 9px #555;
    }
}

@-moz-keyframes redPulse {
    from {
        background-color: #ff2e2e;
        -moz-box-shadow: 0 0 9px #555;
    }

    50% {
        background-color: #bd0000;
        -moz-box-shadow: 0 0 14px #ff2e2e;
    }

    to {
        background-color: #ff2e2e;
        -moz-box-shadow: 0 0 9px #555;
    }
}

@keyframes redPulse {
    from {
        background-color: #ff2e2e;
        box-shadow: 0 0 9px #555;
    }

    50% {
        background-color: #bd0000;
        box-shadow: 0 0 14px #ff2e2e;
    }

    to {
        background-color: #ff2e2e;
        box-shadow: 0 0 9px #555;
    }
}