@charset "UTF-8";
/* CSS Document */

/* Default style, feel free to remove if not needed. */
body, body * {
	/*vertical-align: baseline;*/
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

/* Div layer for the entire banner. */
#container_dc {
	position: absolute;
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	margin: auto;
}

#content_dc {
	position: absolute;
	width: 298px;
	height: 248px;
	border:1px solid #dddddd;
	top: 0px;
	left: 0px;
	background-color: #FFF;
	z-index: 100;
	/*background-image: url('DCRM_HTML5_Expanding_Down_Auto_onRollOver_728x90_728x180_Collapse.jpg');*/
}

#expand_content_dc{
	position: absolute;
	width: 598px;
	height: 248px;
	border:1px solid #dddddd;
	top: 0px;
	left:0px;
	background-color: #FFF;
	z-index: 200;
	/*background-image:url('DCRM_HTML5_Expanding_Down_Auto_onRollOver_728x90_728x180_Expand.jpg');*/
	display:none;
}

/* Invisible button for background clickthrough. */
#background_exit_dc {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	cursor: pointer;
	opacity: 0;
	z-index: 400;
}

#expand_btn_dc {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 400;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

#close_btn_dc{
	position:absolute;
	width:13px;
	height:12px;
	top:5px;
	right:5px;
	cursor: pointer;
	background-image:url('icon-close.png');
	background-repeat:no-repeat;
	background-color:transparent;
	z-index:600;
}

#close_btn_dc:hover{
	opacity:0.8;
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}

/* custom */
body {
	font: 400 12px/16px Verdana, sans-serif;
}

a {
	color: #00aeef;
}

ul {
	padding-left: 1.3em;
}

.color-pri {
	color: #880038;
}

.valign-mid > * {
	vertical-align: middle;
}

.valign-top > * {
	display: inline-block;
	vertical-align: top;
}

.header,
.ddt-logo,
.dw-collapsed,
.bball-spin,
.text-collapsed,
.button-collapsed,
.prize,
.dw-expanded,
.vic-details,
.vic-details-left,
.vic-details-right,
.button-expanded,
.legal,
.legal-2,
.vic-logo,
.isi-wrapper {
	position: absolute;
}

/* collapsed */

.header {
	top: 6px;
	left: 6px;
	font-size: 14px;
	font-weight: bold;
	color: #880038;
}

.ddt-logo {
	top: 25px;
	left: 6px;
}

.dw-collapsed {
	bottom: 0;
	right: 4px;
}

.bball-spin {
	top: 28px;
	right: 108px;
}

.text-collapsed {
	/*width: 180px;*/
	opacity: 0;
	top: 106px;
	left: 9px;
}

.button-collapsed {
	display: inline-block;
	opacity: 0;
	bottom: 34px;
	left: 4px;
}

.text-collapsed,
.button-collapsed {
	animation: fadeIn 1s linear 1s normal 1 both;
}

/* expanded */
.content-wrapper {
	height: 159px;
	position: relative;
}

.prize {
	font-size: 10px;
	line-height: 12px;
	opacity: 0;
	color: #880038;
	width: 205px;
	top: 69px;
	left: 6px;
}

.prize ul {
	margin: 0;
}

.prize li {
	/*margin: 4px 0;*/
}

.dw-expanded {
	bottom: 25px;
	left: 145px;
}

.vic-details {
	font-size: 10px;
	line-height: 12px;
	opacity: 0;
	width: 266px;
	top: 4px;
	left: 310px;
}

.v-bullet {
	position: relative;
	margin-bottom: 4px;
}

.v-bullet > img {
	position: absolute;
	top: -1px;
	left: -15px;
}

.vic-details-left {
	top: 28px;
	left: 14px;
}

.vic-details-right {
	top: 28px;
	left: 157px;
}

.button-expanded {
	opacity: 1;
	bottom: -4px;
	left: 200px;
}

.legal,
.legal-2 {
	font-size: 7px;
	line-height: 9px;
}

.legal {
	opacity: 0;
	bottom: 16px;
	left: 322px;
}

.legal p {
	margin-top: 4px;
}

.legal-2 {
	opacity: 0;
	bottom: 0px;
	left: 322px;
}

.vic-logo {
	width: 70px;
	bottom: 2px;
	right: 10px;
}

.isi-wrapper {
	font-size: 10px;
	line-height: 12px;
	background-color: #f7f7f7;
	border-top: solid 1px #dddddd;
	height: 88px;
	bottom: 0;
	left: 0;
	right: 0;
}

.isi {
	overflow-y: scroll;
	height: 68px;
	padding: 0 8px;
}

.isi p,
.isi ul {
	margin: 2px 0;
}

.isi .isi-header {
	margin-top: 4px;
}

.footer {
	border-top: solid 1px #dddddd;
	padding: 3px 8px 0 8px;
}

/* shine */
.shine a {
  position: relative;
  display:block;
}

.button-collapsed.shine a {
	width:180px;
	height: 35px;
}

.button-expanded.shine a {
	width:118px;
	height: 35px;
}

.shine a {
	animation: animatedBackground 5s linear -2s infinite;
	-moz-animation: animatedBackground 5s linear -2s infinite;
	-webkit-animation: animatedBackground 5s linear -2s infinite;
	-ms-animation: animatedBackground 5s linear -2s infinite;
	-o-animation: animatedBackground 5s linear -2s infinite;
}

.shine a::after {
	content:'';
	position: absolute;
	pointer-events: none;
	top:0; left:0; right:0; bottom: 0;
	background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
	background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
	background-position: inherit;
	-webkit-mask: url('http://demo.gcgconnect.com/temp/button-collapsed-rollover.png') center;
	mask: url('http://demo.gcgconnect.com/temp/button-collapsed-rollover.png');
}

@keyframes animatedBackground {
	0% { background-position: -180px 0; }
	100% { background-position: 2000px 0; }
}
@-moz-keyframes animatedBackground {
	0% { background-position: -180px 0; }
	100% { background-position: 2000px 0; }
}
@-webkit-keyframes animatedBackground {
	0% { background-position: -180px 0; }
	100% { background-position: 2000px 0; }
}
@-ms-keyframes animatedBackground {
	0% { background-position: -180px 0; }
	100% { background-position: 2000px 0; }
}
@-o-keyframes animatedBackground {
	0% { background-position: -180px 0; }
	100% { background-position: 2000px 0; }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* sup/sub fix */
sup, sub {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}

sub { top: 0.4em; }