/******************************************************************************

  Script    :   style_coconut_countdown.css
  Notes     :   CSS Stylesheet for the Pitapss V3 website - Coconut
                Countdown Timer

                All material contained within is the intellectual property of
                SysExcel Atius and as such may not be reproduced in any way
                shape or form without the prior consent of SysExcel Ltd/Atius.

*******************************************************************************/

.coconut
{
                            cursor: default;
}

.coconut-fix
{
                            position: relative;
                            margin-bottom: 20px;
}

.coconut-separator
{
                            height: 62px;
                            border-bottom: 5px solid #C4BEB1;
                            position: absolute;
                            top: 0px;
                            left :0px;
                            width: 100%;
}

.coconut-separator-between
{
                            height: 62px;
                            border-bottom: 5px solid #C4BEB1;
                            float: left;
                            width: 10px;
                            margin: 0px 2px;
}


.coconut.small .coconut-name,
.coconut.big .coconut-name
{
                            position: absolute;
                            top: 76px;
                            text-align: center;
                            width: 100%;
}

.coconut.big .coconut-name
{
                            top: 132px;
}


.coconut.big
{
                            float: left;
                            position: relative;
                            width: 128px;
                            height: 128px;
}

.coconut.small
{
                            float: left;
                            position: relative;
                            width: 72px;
                            height: 72px;
                            margin-top: 28px;
                            margin-right: 0px;
}

.coconut.big .count
{
                            background: url(/site_graphics/coconut_countdown_big.png);
}

.coconut.big .center
{
                            background: url(/site_graphics/coconut_countdown_big_center.png);
}


.coconut.small .count
{
                            background: url(/site_graphics/coconut_countdown_small.png);
}

.coconut.small .center
{
                            background: url(/site_graphics/coconut_countdown_small_center.png);
}

.coconut .count,
.coconut .canvas,
.coconut .center
{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0px;
                            left: 0px;
}

.coconut.big .center
{
                            font-size: 58px;
                            line-height: 128px;
                            text-align: center;
                            color: #DA6C00;
                            /*text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);*/
                            opacity: 0.99;
}

.coconut.big .color
{
                            height: 10px;
                            width: 10px;
                            position: absolute;
                            border-radius: 200px;
}


.coconut.small .center
{
                            font-size: 28px;
                            line-height: 72px;
                            text-align: center;
                            color: #DA9857;
}

.coconut.small .color
{
                            height: 10px;
                            width: 10px;
                            position:absolute;
                            border-radius: 100px;
}



.coconut.minutes.big,
.coconut.hours.big,
.coconut.days.big
{
                            margin-right: 0px;
}


.percent-container
{
                            width: 100%;
                            height: 5px;
                            padding: 1px 0px;
                            margin-bottom: 20px;
}

.progress-bar
{
                            width: 0%;
                            background: #F2F0F0;
                            height: 100%;
                            position: relative;
                            float: left;
}

.percent-text
{
                            position: absolute;
                            top: -16px;
                            border-top: 0px solid #999183;
                            right: 0px;
                            font-size: 12px;
                            padding-top: 2px;
                            color: #999183;
                            line-height: 1em;
}

/* Color */
.coconut.big .color,
.coconut.small .color
{
                            font-size: 28px;
                            border-color: #900;
                            background-color: #F5F5F5;
}

/* Text info style */
.coconut.small .coconut-name,
.coconut.big .coconut-name
{
                            font-size: 14px;
                            font-family: Tahoma, Helvetica, sans-serif;
                            line-height: 14px;
                            color: #3A3A3A;
}