/* Css reset *//* Css reset */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}

/* Font support */
@font-face{
    font-family:"HelveticaNeue BoldCond";
    src:url('../webfonts/ttf/HelveticaNeue-BoldCond.ttf') format('truetype');
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:"HelveticaNeue Condensed";
    src: url('../webfonts/ttf/HelveticaNeue-Condensed.ttf') format('truetype');
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:"HelveticaNeue MediumCond";
    src:url('../webfonts/ttf/HelveticaNeue-MediumCond.ttf') format('truetype');
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:"HelveticaNeue Roman";
    src:url('../webfonts/ttf/HelveticaNeue-Roman.ttf') format('truetype');
    font-weight:400;
    font-style:normal
}


/*main style*/
html,body{background:#f0f0f0}
body{width:100%;height:100%}

/*footer copy*/
footer{
    z-index:3;
    width:96%;
    height:3%;
    margin:0 3%;
    padding:1.2% 0 1.2% 0.2%;
    background:transparent
    }
    footer p{
        color:#666;
        font:14px/16px Arial,Helvetica,sans-serif
        }
        footer p span{
            margin-left:40px
            }

/*begin of welcome page*/
.main{
    width:84%;
    height:64%;
    min-width:945px;
    min-height:735px;
    margin:50px 3% 0;
    padding:6% 3% 6% 8%;
    border:2px solid #fff;
    -webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 1, 0.5);
    box-shadow: 0 0 25px 0 rgba(0, 0, 1, 0.5);
    background: url("../img/bg_main.png") no-repeat scroll -65px 580px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(10%,rgba(255,255,255,1)), color-stop(20%,rgba(255,255,255,1)), color-stop(30%,rgba(255,255,255,1)), color-stop(40%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(60%,rgba(249,250,251,1)), color-stop(70%,rgba(225,232,238,1)), color-stop(80%,rgba(183,202,214,1)), color-stop(90%,rgba(164,187,203,1)), color-stop(100%,rgba(138,168,188,1)));
    background: url("../img/bg_main.png") no-repeat scroll -65px 580px, linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 50%,rgba(249,250,251,1) 60%,rgba(225,232,238,1) 70%,rgba(183,202,214,1) 80%,rgba(164,187,203,1) 90%,rgba(138,168,188,1) 100%);
    }
    .main h1{
        margin:0 0 23px 42px;
        color:#79c143;
        font:140px/136px "HelveticaNeue BoldCond",Helvetica,Arial,sans-serif;
        letter-spacing:.014em;
        }
    .main ul{
        margin:15px 0 0 40px
        }
        .main li{
            padding:0 0 0 45px;
            color:#0081c6;
            background:url("../img/list-bullet.png") no-repeat scroll 5px 45px transparent;
            font:70px/96px "HelveticaNeue Condensed",Helvetica,Arial,sans-serif;
            list-style:none;
            letter-spacing:.015em
            }
    .main a{
        margin:0 0 0 40px;
        color:#79c143;
        font:75px/140px "HelveticaNeue BoldCond",Helvetica,Arial,sans-serif;
        letter-spacing:-.005em;
        text-decoration:none
        }
        .main a:hover{text-decoration:underline}
.round-icons{
    display:inline-block;
    width:100px;
    height:100px;
    margin:-5px 0 0 35px;
    background:url("../img/icons.png") no-repeat scroll transparent;
    vertical-align:top
    }
    .ringtone{background-position:0 0}
    .poster{background-position:-100px 0}

.three-dot-arrow{
    display:inline-block;
    width:30px;
    height:44px;
    margin-left:20px;
    background:url("../img/three-dots-arrow.png") no-repeat scroll 0 0 transparent
}
/*end of welcome page*/

/*begin of registration page*/
header{
    z-index:2;
    position: relative;
    margin:50px 3% 0;
    padding:1.5% 3% 1.5% 6.25%;
    border:2px solid #fff;
    width:86%;
    height:18%;
    min-width:945px;
    min-height:90px;
    -webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 1, 0.5);

    box-shadow: 0 0 25px 0 rgba(0, 0, 1, 0.5);
    background:#0081c6;
}
header + .main{
    z-index:1;
    width:86%;
    height:64%;
    min-width:945px;
    margin-top:0;
    padding:0 3% 2% 6.25%;
    border-top:none;
    background: url("../img/bg_common.png") no-repeat scroll -65px 390px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,214,224,1)), color-stop(10%,rgba(240,244,246,1)), color-stop(20%,rgba(255,255,255,1)), color-stop(30%,rgba(255,255,255,1)), color-stop(40%,rgba(235,240,243,1)), color-stop(50%,rgba(223,231,237,1)), color-stop(60%,rgba(210,222,229,1)), color-stop(70%,rgba(178,197,211,1)), color-stop(75%,rgba(175,196,209,1)), color-stop(80%,rgba(171,193,207,1)), color-stop(95%,rgba(152,179,196,1)), color-stop(100%,rgba(139,169,189,1)));
    background: url("../img/bg_common.png") no-repeat scroll -65px 390px, linear-gradient(top, rgba(201,214,224,1) 0%,rgba(240,244,246,1) 10%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 30%,rgba(235,240,243,1) 40%,rgba(223,231,237,1) 50%,rgba(210,222,229,1) 60%,rgba(178,197,211,1) 70%,rgba(175,196,209,1) 75%,rgba(171,193,207,1) 80%,rgba(152,179,196,1) 95%,rgba(139,169,189,1) 100%);
}

/*common header*/
header h1,header p{
    display:table-cell;
    color:#fff;
    vertical-align:top
    }
    header h1{
        padding: 0 0 0 40px;
        font:120px/130px "HelveticaNeue BoldCond",Helvetica,Arial,sans-serif;
        letter-spacing: 0.01em;
        }
    header p{
        width:100%;
        padding:20px 0 0 3.1%;
        font:28px/32px "HelveticaNeue MediumCond",Helvetica,Arial,sans-serif
        }
        header p.registration-note{padding: 43px 0 0 3.7%}
        header p b{letter-spacing:-.025em}

/*3-th column fix*/
form{
    min-width:950px;
    padding:20px 0 0 48px
}

/*common fieldsets*/
fieldset{
    display:inline-table;
    width:30%;
    padding:0;
    border-left:1px solid #66bd29;
    vertical-align:top
}

.confirm-form fieldset,.registration-form fieldset{border:none}
.confirm-form fieldset{padding:10px 0 0 2.7%}
.confirm-form fieldset.first{width:26%;height:450px;padding:0;border-right:1px solid #66bd29}
.confirm-form fieldset.third{padding-left:0}
.survey-form fieldset{width:33%;padding-left:3.5%}
.survey-form fieldset.first{width:26%;padding:0}
fieldset.first{margin-left:0;border:none}

.registration-form label,
.confirm-form label{
    color:#0081c6;
    font:700 16px Arial,Helvetica,sans-serif;
    display: block;
}
.registration-form legend{
    margin-bottom:32px;
    width:100%;
    color:#0081c6;
    font:18px Arial,Helvetica,sans-serif;
    letter-spacing:.03em
}

.registration-form input,
.registration-form select,
.confirm-form input,
.confirm-form select{
    margin:5px 0 18px;
    width:75%;
    max-width:334px;
    height:25px;
    padding:10px 20px;
    border:2px solid #0081c6;
    font:20px/20px Arial,Helvetica,sans-serif;
    color:#000
}
.registration-form select,.confirm-form select{
    width:80%;
    max-width:380px;
    height:50px;
}
input[type="text"]:focus, select:focus{background:#ecf9e3}

button{
    display:block;
    margin:7.1% 6.9% 0 auto;
    width:379px;
    height:100px;
    padding:15px 70px 15px 100px;
    border:2px solid #fff;
    color:#fff;
    background:#66bd29 url("../img/button-normal-three-dots.png") no-repeat scroll 55px 28px;
    -webkit-box-shadow: 7px 7px 8px rgba(0, 0, 1, 0.27), -4px -6px 6px rgba(0, 0, 1, 0.1) inset;
    box-shadow: 7px 7px 8px rgba(0, 0, 1, 0.27), -4px -6px 6px rgba(0, 0, 1, 0.1) inset;
    font:50px "HelveticaNeue BoldCond",Helvetica,Arial,sans-serif;
    cursor:pointer;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
button:hover{
    background-color:#0081c6;
}
/*end of registration page*/

/*begin of survey page*/
.survey-form,.confirm-form{padding:40px 0 0 45px}
.thank-content{padding:70px 0 0 45px}
.confirm-form{padding:38px 0 0 42px}
.poster-form{padding:27px 0 0 30px}
.survey-form label,.survey-form legend,.confirm-form .first *,.thank-content h3,
.meda-copy,.poster-form h3,.poster-form p,.poster-form label,.allergens p{
    color:#666;
    font:36px/53px "HelveticaNeue MediumCond",Helvetica,Arial,sans-serif
}
.confirm-form .first h3,.poster-form h3{font-size:34px;line-height:40px}
.confirm-form .first h3{font-size:36px}
.confirm-form .first p{width:330px;font-size:30px;line-height:39px}
.poster-form p{
    margin:10px 0 0;
    font-size:26px;
    line-height:30px;
    letter-spacing:0
}
.survey-form legend{
    height:15%;
    min-height:140px;
    font-size:30px;
    line-height:37px
    }
    .survey-form legend span{
        font:28px/37px "HelveticaNeue Condensed",Helvetica,Arial,sans-serif;
        letter-spacing:.03em
    }
.survey-form button{
    margin:-2.3% 7% auto auto;
    background-position:75px 28px
}
.survey-copy{
    position:relative;
    top:25px;
    width:60%;
    margin:4% 0 0
    }
    .survey-copy p{
        color:#000;font:22px Arial,Helvetica,sans-serif
    }
/*end of survey page*/

/*begin of confirm page*/
.confirm-form button{
    width:460px;
    margin-top:8.4%;
    margin-right:7%;
    padding:15px 15px 15px 65px;
    background-position:35px 28px
}
/*end of confirm page*/

/*begin of thankyou page*/
.thank-content h3{
    font-size:30px;
    line-height:70px;
}
.reset-button{
width:310px;
margin-top:5.3%;
margin-right:7.3%;
background:#7293a7 url("../img/button-normal-three-dots.png") no-repeat scroll 55px 28px;
}
.meda-block{
    width:210px;
    height:115px;
    margin-top:225px;
    padding-top:65px;
    background:url("../img/meda-logo.png") no-repeat scroll 0 0 transparent;
    vertical-align:bottom
}
.meda-copy{
    font-size:20px;
    line-height:23px;
}
/*end of thankyou page*/

/*begin of poster page*/
.poster-form label,.allergens p{margin:0;color:#fff;font:36px/53px "HelveticaNeue MediumCond",Helvetica,Arial,sans-serif}
.poster-form fieldset{width:50%;padding:0 0 0 3%}
.poster-form fieldset.first{width:43%;padding:0 1%}
.allergens{
    padding:10px 30px
}
.poster-form button{
    margin:2% 5% 0 auto;
    padding:15px 15px 15px 45px;
    background-position:23px 28px
}
.poster-preview{
    float:left;
    width:325px;
    margin:70px 0 0 -5px;
    text-align:center
}
.poster-preview img {border: 1px solid #dadada; box-shadow: 3px 3px 5px rgba(0, 0, 0, .11)}
.poster-preview span{color:#666;font:16px/1.7em Arial,Helvetica,sans-serif;}
.allergen-selections{
    float:left;
    width:450px;
    height:305px;
    margin:115px 0 0 20px
}
.allergen-selections > div{
    float:left;
    height:38px;
    width:32%;
    max-width:122px;
    margin:0 2% 2% 0;
    padding:30px 10px;
    border:1px solid #0081c6;
    background:#fff;
    color:#666;
    font:18px/20px Arial,Helvetica,sans-serif;
    text-align:center;
    vertical-align:middle;
    word-wrap: break-word;
    }
    .allergen-selections > div.right{
        margin-right:0
    }
/*end of poster page*/

/*custom scrollbar*/
#scrollbar1{
    width:95.5%;
    height:405px;
    clear:both;
    margin:12px 0 0;
    padding:10px 0;
    border:2px solid #0081c6;
    background:#8aa6b9;
    -webkit-box-shadow: inset 10px 10px 20px 0px rgba(0, 0, 1, 0.5);
    box-shadow: inset 10px 10px 20px 0px rgba(0, 0, 1, 0.5);
}
#scrollbar1 .viewport{
    height:102.5%;
    overflow:hidden;
    position: relative
}
#scrollbar1 .overview{
    position:absolute;
    top:0;
    left:0;
    width:95.5%;
    list-style:none
}
#scrollbar1 .scrollbar{
    z-index:2;
    float:right;
    width:30px;
    margin-right:8px
}
#scrollbar1 .track{
    position:relative;
    width:30px;
    background:url("../img/scroll-track.png") no-repeat 7px 15px scroll
}
#scrollbar1 .thumb{
    position:relative;
    overflow:hidden;
    top:0;
    width:30px;
    height:105px;
    background:url("../img/scroll-thumb.png") no-repeat scroll;
    cursor:pointer
}
#scrollbar1 .thumb .end{
    overflow:hidden;
    height:5px;
    width:30px
}
#scrollbar1 .disable{
    display:none
}
/*custom checkboxes*/
fieldset input[type=checkbox] {
    -khtml-appearance: none;

    width: 40px;
    height: 40px;
    background: url(../img/checkbox-bg.png) no-repeat 0 -40px;
    -webkit-box-shadow: 6px 8px 6px rgba(0, 0, 0, .27);
    box-shadow: 6px 8px 6px rgba(0, 0, 0, .27);
}
fieldset input[type=checkbox]:checked {
    background-position:  0 0;
}
fieldset input[type=checkbox]:disabled {
    background-position:  0 -80px;
}
fieldset input[type=checkbox]:disabled + label {
    cursor:default !important
}

fieldset input[type=checkbox] + label, .allergens > input[type=checkbox] + label{
    padding-left:22px;
    cursor:pointer;
    position: relative;
    top: -6px;
}


a.simple-link{
    color:#666;
    font:70px/98px "HelveticaNeue Condensed",Helvetica,Arial,sans-serif;
    list-style:none;
    letter-spacing:.012em;
    text-decoration:none
}
a.simple-link:hover{
    color:#66bd29;
    text-decoration:underline
}

/*Custom select box*/
fieldset select {
    background-image: url("../img/drop-down-arrow.png") !important;
    background-repeat: no-repeat !important;
    background-position: 96% center !important;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}