﻿/*
*
******************************
1. SMART FORM
******************************

******************************
2. BOXES
******************************

******************************
3. WELCOME PAGE
******************************

******************************
4. BUTTONS
******************************

******************************
5. COOL FORM
******************************
*
*/



/******************************
1. SMART FORM
******************************/
.smart-form footer > span
{
    position:relative;
    top:15px;
}
body.welcome-master .smart-form footer
{
    background: none;
    background-color: transparent;
    border-top: 0px solid #FFFFFF;
}
body.welcome-master .smart-form footer > span
{
    position: relative;
    top: 15px;
}
body.welcome-master .smart-form .state-success input[type=text], body.welcome-master .smart-form .state-success input[type=password], body.welcome-master .smart-form .state-success select{
    border-color: #FFFFFF;
    background: #FFFFFF none repeat scroll 0% 0%;
}
body.welcome-master .smart-form select
{
    padding-left:0px;
    text-indent:-2px;
}
body.welcome-master .smart-form input[type=text], body.welcome-master .smart-form input[type=password], body.welcome-master .smart-form select
{
    height:46px;
    background:rgba(255, 255, 255, 0.5);
    padding-left:10px;
    line-height:46px;
}
body.welcome-master .smart-form .input input[type=text], body.welcome-master .smart-form .input input[type=password], body.welcome-master .smart-form .select select
{
    border: 0px solid #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
}
body.welcome-master .smart-form .label
{
    color: #999999;
}

body.welcome-master .smart-form fieldset {
    background: transparent;
}

body.welcome-master .smart-form .icon-append, body.welcome-master .smart-form .icon-prepend
{
    top:10px;
}

/******************************
2. BOXES
******************************/
.box-color-1
{
    background-color:#FF3399;
    color:#FFF;
}

.box-color-1.cta
{
    background-color:rgba(255, 51, 153, 0.7);
    transition:all 1s ease;
    cursor:pointer;
    overflow:hidden;
}

.box-color-1.cta .back
{
    position:absolute;
    top:0px;
    left:20px;
    color:#FFFFFF;
    font-size:2em;
    display:none;
}

.box-color-1.cta .section
{
    height:100%;
    position:relative;
    top:0px;
    transition:top 1s ease;
}

.box-color-1.cta .section .indent
{
    padding:10px;
}

.box-color-1.cta:hover, .box-color-1.cta.section-2
{
    background-color:rgba(255, 51, 153, 1);
}

.box-color-1.cta.section-2 .section
{
    top:-100%;
}

.box-color-1 h2
{
    font-size:1.5em;
}

.box-color-1 h2 i
{
    font-size:2em;
    margin-bottom:20px;
}

.box-color-1.cta + .action
{
    display:none;
}

.box-color-1.cta.section-2 + .action
{
    display:block;
}

/******************************
3. WELCOME PAGE
******************************/
#page-welcome .box-color-1.cta
{
    height:146px;
    margin-bottom:20px;
}

#page-welcome .box-color-1.cta .section-2 input
{
    border:0px solid #000000;
    border-bottom:1px solid #FFFFFF;
    margin-top:60px;
    height:40px;
    line-height:40px;
    font-size:35px;
    width:80%;
    background-color:transparent;
}

#page-welcome .box-color-1.cta .section-2 .desc
{
    margin-top:20px;
    color:#DDDDDD;
    text-align:left;
    font-size:1em;
    line-height:1.1em;
}

#page-welcome .box-color-1.cta .section-2 .desc a
{
    color:#000000;
}

/******************************
4. BUTTONS
******************************/
.btn-hx
{
    background-color: #FF3399;
    color: #FFF;
    border: 1px solid #FF3399 !important;
}
.btn-hx:hover,.btn-hx:focus
{
    background-color: #FF2492;
    color: #FFF !important;
}
.btn-ow {
    background-color: #FFFFFF;
    color: #FF3399;
    margin: 5% auto;
}

/******************************
5. COOL FORM
******************************/
.cool-form input + label.placeholder, .cool-form select + label.placeholder
{
	position: absolute;
	font-size: 13px;
	font-family: "Open Sans";
	font-weight: normal;
	top: 7px;
	left: 10px;
	color: #AAAAAA;
	opacity:0.5;
	padding:2px;
	padding-right:4px;
	padding-left:0px;
    -ms-transform-origin: 0% 0%; /* IE 9 */
    -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
    transform-origin: 0% 0%;
}
.cool-form.smart-form .select select.empty
{
	color:#AAAAAA;
}
.smart-form.cool-form section
{
    margin-bottom:25px;
}


/******************************
6. INTRO BOX
******************************/
.intro-box ul.titles
{
    padding:0px;
    margin:0px;
    width:100%;
    float:left;
    margin-bottom:10px;
}
.intro-box ul.titles li
{
    padding:0px;
    margin:0px;
    float:left;
    width:33%;
    text-align:center;
    color:#444444;
    cursor:pointer;
}
.intro-box ul.titles li.current
{
    color:#00cc00;
}
.intro-box ul.contents
{
    background-color:rgba(255, 255, 255, 0.2);
    padding:20px;
}

.intro-box ul.contents li
{
    list-style:none;
    text-align:justify;
    line-height:2em;
}



/******************************
7. T&C BOX
******************************/
#tncBox 
{
    background-color:rgba(255, 255, 255, 0.7);
    border:1px solid #FFFFFF;
}

#tncBox header
{
    background-color:#FFFFFF;
    padding:5px;
    text-indent:15px;
}
#tncBox .content
{
    padding:20px;
    max-height:350px;
    overflow-y:scroll;
}
#tncBox footer
{
    background-color:#FFFFFF;
    padding:5px;
    text-indent:15px;
}

.separator {
    padding-right: 20px;
}