@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Muli);

/* =============================================================== */
/* Do not edit the CSS files directly. Changed will be overridden! */
/* =============================================================== */
#container-contest { width: 800px; }

body { background-color: #fff; color: #000; }

input.smalltext, textarea.largetext, select { border: 1px solid #999; }

input.smalltext, textarea.largetext, select, input[type=file] { border: none; padding: .4em; font-size: 1.2em; }

/* Properties for form elements */
input.smalltext, textarea.largetext, select, input[type=file] { background-color: #ccc; color: #fff; }

/* Form field background and font colors */
input.smalltext:focus, textarea.largetext:focus, select:focus, input[type=file]:focus { background-color: #666; }

/* Clicked-on form field focus colors */
input::-webkit-input-placeholder { color: #fff; }

input:-moz-placeholder { color: #fff; }

input.smalltext, textarea.largetext, select, input[type=file] { border: none; padding: .4em; font-size: 1.2em; }

/* Properties for form elements */
.inputcontainer { width: 95%; }

input.smalltext, textarea.largetext, select, input[type=file] { background-color: #ccc; color: #fff; }

/* Form field background and font colors */
input.smalltext:focus, textarea.largetext:focus, select:focus, input[type=file]:focus { background-color: #666; }

/* Clicked-on form field focus colors */
input::-webkit-input-placeholder { color: #fff; }

input:-moz-placeholder { color: #fff; }

a, a:link, a:active, a:visited { color: #4184cd; }

a:hover { color: #069; }

table.dates tr th, table.dates tr td { border: 3px #ebebeb solid; }

table.dates tr th.first { background: transparent; border: none; }

table.dates tr th { background-color: #525252; color: #fff; }

table.dates tr td.first { background-color: #818181; color: #fff; }

table.dates tr td { background-color: #d4d4d4; color: #333; }

table.dates tr th, table.dates tr td { text-align: center; }

.table__data { border: 0px solid #333; }

.table { border: 0px solid #333; }

.table__header { background-color: #ccc; color: #000; }

.table__body .table__row { background-color: #eee; color: #000; }
.table--leaderboard .table__body .table__row:hover { background: #d4d4d4; cursor: pointer; }
.table__body .table__row.is-active { background: #ffa500; color: #fff; }
.table__body .table__row.is-active:hover { background: #cc8400; }

.table__data:first-child { border-left: 0; }
@media only screen and (max-width: 480px) { .table__data { border: 0px solid #333; } }

/* Button Styles */
.di-uix-button { display: inline-block; cursor: pointer; padding: 0.5em 1.5em; border-radius: 3px; font-size: 1em; border: 0; background-color: #eee; margin: 0; }
.di-uix-button:hover { text-decoration: none; }
.di-uix-button:hover { background-color: #e1e1e1; }
.di-uix-button.disabled, .di-uix-button[disabled] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; box-shadow: none; cursor: not-allowed; }
.di-uix-button::-moz-focus-inner { padding: 0 !important; margin: -1px !important; }

.button-toggle__btn { display: inline-block; cursor: pointer; padding: 0.5em 1.5em; border-radius: 3px; font-size: 1em; border: 0; background-color: #eee; padding: 0.4em 1.2em; }
.button-toggle__btn:hover { text-decoration: none; }
.button-toggle__btn:hover { background-color: #e1e1e1; }
.button-toggle__btn.disabled, .button-toggle__btn[disabled] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; box-shadow: none; cursor: not-allowed; }
.button-toggle__btn::-moz-focus-inner { padding: 0 !important; margin: -1px !important; }
.button-toggle__radio:checked + .button-toggle__btn { border: 0; background-color: #ccc; color: #000; text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; cursor: default; }

#detailView .container-vote a.vote, a.di-uix-button, .di-uix-button { color: #fff; text-transform: uppercase; font-size: 16px; font-weight: bold; text-decoration: none; }

/*Normal State*/
#detailView .container-vote a.vote, .di-uix-button, #container-content input.ui-button { background: #5f5f5f; border-radius: 4px; }

/*Border-Radius*/
/*Hover State*/
#detailView .container-vote a.vote:hover, .di-uix-button:hover, #container-content input.ui-button:hover { background: #333; }

/*Disabled State*/
.di-uix-button.disabled, .di-uix-button:hover.disabled { background: #d9dada; border: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

#container-content input.ui-button { color: #fff; border: none; }

#container-content input.ui-button.secondary { background: #ccc; border: 1px solid #ccc; color: #333; }

#container-content input.ui-button.secondary:hover { background: #b5b5b5; }

#container-contest { width: 800px; }
#container-contentbg, #container-footer { background-color: #FFF; color: #000; background-color: #fff; }
#container-contentbg { width: 800px; }
#container-content { padding: 20px 10px 40px; margin: 0 auto; width: 650px; border-bottom: 0; }
@media only screen and (min-width: 680px) { .contest-bracket #container-content { padding-left: 0; padding-right: 0; } }
#container-footer { width: 800px; height: 101px; margin: 0 auto; padding: 16px 0 0 0; font-size: 12px; }
@media only screen and (min-width: 680px) { #container-footer { width: auto; } }

#header { overflow: hidden; background-color: transparent; }
#header img { width: 100%; }
#header h1 { margin: 0; position: relative; }
#header h1 a { color: #000; }

#navigation { background: transparent; height: auto; }
#navigation ul li a { color: inherit; text-decoration: none; display: block; padding: 0.65em 10px; -webkit-transition: background 200ms; transition: background 200ms; }
#navigation ul li a:hover { opacity: 0.7; background: transparent; }
#navigation ul li { font-size: 1.3em; height: 50px; }
#navigation ul li.nav-username a { color: #000; }

.pagetitle { color: #000; font-size: 2rem; }

h1.pagetitle, #gallery-header h1 { font-size: 2.0em; font-weight: normal; }

#container-signin .inputcontainer.twocol .coltwo { min-height: auto; width: 47%; padding: 0 0 0 1.5em; }

/* Set layout properties for signin structure */
#gallery-header { line-height: 25px; }

/* Clearing container for header elements */
#gallery-header a { vertical-align: photoline; line-height: 3em; display: block; padding: 0px 10px; text-decoration: none; }

/* View Submissions/Search link */
.gallery { background: #d7d7d7; padding: 17px 0 0; }

/* Main unordered list for gallery */
.gallery li.galleryrow { margin: 0 auto; width: 93%; }

/* Individual rows for gallery */
.gallery li.galleryrow ul { margin: 0 auto; }

/* Child lists for gallery rows */
.gallery li.galleryrow ul li { padding: 5px 5px; text-align: center; }

/* Individual submission items */
.gallery li.galleryrow ul li h1 { line-height: 1.1em; margin: 0; color: #222; }

/* Submission Name */
.gallery li.galleryrow ul li h2 { line-height: 1.2 vem; margin: 0; color: #666; }

/* Submitter's Name */
/* Gallery nav */
.gallery-nav { width: 100%; }

/* Gallery nav width */
.gallery-nav-back, .gallery-nav-more { margin: 0 5px; float: left; }

/* Gallery nav properties */
.gallery-nav-back { min-width: 127px; line-height: 31px; float: left; }

/* Gallery back button */
.gallery-nav-more { min-width: 127px; line-height: 31px; float: right; }

/* Gallery more button */
.gallery-nav-back.disabled, .gallery-nav-back:hover.disabled { width: 127px; }

/* Gallery back disabled button */
.gallery-nav-more.disabled, .gallery-nav-more:hover.disabled { width: 127px; }

/* Gallery more disabled button */
.gallery-nav span { display: none; }

/* Gallery nav seperator */
/* Submission item actions */
/* Submission branding */
/**********************************
Gallery Detail Modules
**********************************/
h2.submission-owner { font-weight: normal; font-size: 1.6em; }

/* Submission uploader name */
p.submission-description { margin: 0 0 1em; }

/* Submission description */
#detailView .container-vote a.vote { min-width: 127px; height: 31px; line-height: 31px; text-align: center; overflow: visible; border: 0; display: block; }

/* Control to cast vote */
#detailView .container-vote p { font-size: 1.4em; line-height: 2em; }

/* Display of current votes */
#detailView .container-vote p span { font-size: 1.8em; color: #f60; font-weight: bold; display: inline !important; }

/* Display of current votes */
/*MultiFile*/
.multiple-submissions { background: #e0e0e0; border: 1px solid #ccc; padding: 10px 0; width: 100%; }

/* Background for Full Submission */
.multiple-submissions .submission-thumbs ul li { border: 3px solid #999; }

/* Border Color for Thumbnails */
.multiple-submissions .submission-thumbs ul li div.multifile-viewing { background: #000; background: rgba(0, 0, 0, 0.8); color: #fff; }

/* Background-Color for Viewing Preview */
.multiple-submissions .submission-thumbs ul li p { text-transform: capitalize; }

/* Background Color for Text Link Button - Mobile */
.multiple-submissions .imgwrapper { background: #bbb; }

/* Background Color for Image Wrapper */
.multiple-submissions .imgwrapper .text-wrapper { background: #fff; }

/* Background for Text Submission */
.multiple-submissions .text-wrapper p, .multiple-submissions .text-wrapper h3 { color: #000; }

/* Font for Text Submission */
#gallery-header a { background: #fff; color: inherit; }

/* View Submissions/Search link */
#gallery-header a:hover { background: #afafaf; }

/* View Submissions/Search link hover */
.gallery { background: #fff; }

/* Gallery background color/image */
#detailView .container-vote p span { color: #f60; }

/* Color for number of votes */
.contest-list li a { background: rgba(0, 0, 0, 0.05); }

/* --Sweeps Additional Info-- */
.club-title { background: #333; border: 1px solid #222; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.19); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.19); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.19); }

.sweeps-throttle { border-top: none; background: #fff; }

.throttle-message span { border-right: 1px solid #ccc; }

.throttle-message.two-column span { border-right: 1px solid #ccc; }

.throttle-message span:last-child { border-right: none; }

.multiplier { background: #eee; border-color: #ccc; border-top-color: #fff; }

.multiplier ul li:first-child { border-right: 1px solid #ccc; }

.balance-message { background-color: #e4e4e4; border: 1px solid #ccc; border-top-color: #fff; }

.helper-text { color: #ccc; }

.success-text { color: #060; }

.info-text { color: #039; }

.error-text { color: #cc0202; }

.warning-text { color: #965400; }

.bracket__cell-item:before, .bracket-container .bracket--two-column .right .bracket__cell-item:before, .bracket--two-column .bracket__col4 .top:before, .bracket--two-column .bracket__col4 .top:after, .bracket--two-column .bracket__col4 .bottom:before, .bracket--two-column .bracket__col4 .bottom:after, .bracket--two-column .bracket__col2 .bracket__cell-item:after, .bracket--two-column .bracket__col3 .bracket__cell-item:after { border-color: #ccc !important; }

.bracket__cell-item { border: 1px solid; background: #eee; color: #666; border-color: #a2a2a2; }

@media only screen and (min-width: 680px) { .bracket--one-column:not([readonly="readonly"]) .bracket__cell-item:hover { background: #bbbbbb; } }


/* --------------------
DC Overrides
---------------------*/

body {
    background: #fff;
    color: black;
}

#container-contest, #container-contentbg, #container-content {
    width: 100%;

    background: none;
}

#header {
    width: 100%;

    background: url('//tdascreative.com/resources/files/mega-contest/dc/header-bg_trans.png') no-repeat;
    background-position: center bottom;

    overflow: visible !important;

}

#header a {
    position: relative;
    top: 30px;

    margin: 0 auto;
    max-width: 380px;
    width: 100%;

}

#container-header {
    border-bottom: 1px solid #B379A9;
    padding-top: 100px;

    margin-bottom: 30px;
}

#container-bg {
    padding: 0 !important;
}

#container-content {
    padding: 0;
    border: none;
}

#navigation {
    display: none;
}

.pagetitle-container, .dc-intro, .dc-pics-wrapper, .contest-ends-block, form#authForm {
    margin: 0 auto !important;
    max-width: 600px;
    width: 100%;
}

.pagetitle-container {
    margin-top: 20px;
}

.pagetitle-container a {
    border-radius: 5px;
    overflow: hidden;
}

.dc-intro {
    padding: 20px 0 50px 0;

    font-family: Muli;
}

.dc-intro h2 {
    display: block;
    margin-bottom: 20px;
    padding: 30px;

    box-sizing: border-box;

    font-family: Pacifico;
    font-weight: normal;

    background: url('//tdascreative.com/resources/files/mega-contest/dc/flower.png') no-repeat;
}

.dc-intro strong {
    color: #e85876;
}

.dc-pics {
    height: 560px;

    background: url('//tdascreative.com/resources/files/mega-contest/dc/photoSection-BG_trans.png') no-repeat;
    background-position: center;

    background-color: #feebef;

    border-top: 1px solid #e85876;
    border-bottom: 1px solid #e85876;
}

.dc-pics-wrapper {
    padding: 20px 0;
}

.dc-pics-wrapper h3 {

    border-radius: 10px;
    margin: -40px auto 30px auto;
    padding: 15px;
    max-width: 550px;
    width: 100%;

    background: #e85876;
    box-sizing: border-box;
    color: white;
    font-family: Pacifico;
    font-weight: normal;
    font-size: 1.6em;
    text-align: center;
}

.dc-pics-wrapper img{
    float: left;

    margin-bottom: 20px;
    width: calc(50% - 10px);
}

.dc-pics-wrapper img:nth-child(even) {
    margin-right: 10px;
}

.dc-pics-wrapper img:nth-child(odd) {
    margin-left: 10px;
}

.dc-value-callout {
    clear: both;
    margin: 0 auto;
    padding: 15px;
    max-width: 520px;
    width: 100%;

    border: 3px solid #e85876;
    border-radius: 10px;

    background: white;
    box-sizing: border-box;
    font-family: Muli;
}

.contest-ends-block {
    margin-top: 60px !important;
    font-family: Muli;
}

.contest-ends-block::before {
    display: block;

    content: 'Enter to Win!';
    font-family: Pacifico;
    font-size: 2em;
}

input.smalltext {
    border: 2px solid #ccc;

    background: none !important;
    color: black !important;
}

input#submitEmail {
    height: auto !important;
    padding: 10px 20px 8px 20px;
    background: #3294BE !important;

    text-shadow: none;
}

#container-footer {
    background: none;
    width: 100%;
}

.ad-468-60 {
    padding: 20px 0;
    width: 100%;
}

.ad-468-60 div {
    margin: 0 auto;
}

.ad-468-60:first-of-type {
    position: absolute;

    z-index: 1000;
}


@media screen and (max-width: 640px) {
    .dc-pics-wrapper {
        padding: 20px !important;
        box-sizing: border-box;
    }
    .dc-intro {
        padding-right: 20px;
        padding-left: 20px;

        box-sizing: border-box;
    }

    .contest-ends-block, form {
        padding-right: 20px;
        padding-left: 20px;

        box-sizing: border-box;

    }
}

@media screen and (max-width: 440px) {
    .dc-intro h2 {
        padding: 0;
        background: none;
    }

    .dc-pics {
        height: auto;
    }

    .dc-pics-wrapper img {
        width: 100%;
    }

    #header {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;

        background-position: 15.5% 24%;
        background-size: 500%;
    }

    #header a {
        opacity: 0.8;
    }

}

@media screen and (max-width: 320px) {
   #container-header {
       height: 300px;
   }
}

@media screen and (min-width: 440px) {

    #container-header {
        background: url('http://tdascreative.com/resources/files/mega-contest/dc/sunrise_bg.jpg') repeat-x;
        background-position: 50% 0%;

        animation: sunrise 8s forwards alternate-reverse infinite;
        -webkit-animation: sunrise 8s forwards alternate-reverse infinite;
    }

    #header {
        animation: lightup 8s forwards alternate-reverse infinite;
        -webkit-animation: lightup 8s forwards alternate-reverse infinite;
    }

    #container-header::before {
        right: calc(50% - 197px);
        position: absolute;
        top: 93px;

        border-radius: 50%;
        height: 8px;
        width: 8px;

        background: red;
        content: '';

        animation: blink 1s alternate-reverse infinite, lightdown 8s forwards alternate-reverse infinite;
        -webkit-animation: blink 1s alternate-reverse infinite, lightdown 8s forwards alternate-reverse infinite;
    }
}

@keyframes sunrise {
    0%  { background-position: 50% 0%;}
    25% { background-position: 50% 0%;}
    100%  { background-position: 50% 110%;}
}

@-webkit-keyframes sunrise {
    0%  { background-position: 50% 0%;}
    25% { background-position: 50% 0%;}
    100%  { background-position: 50% 110%;}
}

@keyframes lightup {
    0%  { filter: brightness(30%); }
    25%  { filter: brightness(30%); }
    100%  { filter: brightness(100%); }
}

@-webkit-keyframes lightup {
    0%  { -webkit-filter: brightness(30%); }
    25%  { -webkit-filter: brightness(30%); }
    100%  { -webkit-filter: brightness(100%); }
}

@keyframes lightdown {
    0%  { opacity: 1; }
    25%  { opacity: 1; }
    100%  { opacity: 0; }
}

@-webkit-keyframes lightdown {
    0%  { opacity: 1; }
    25%  { opacity: 1; }
    100%  { opacity: 0; }
}

@keyframes blink {
    0%   { background: red; }
    100% { background: transparent;}
}

@-webkit-keyframes blink {
    0%   { background: red; }
    100% { background: transparent;}
}