/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
    overflow:hidden;
/* 
    background:#fff;
    height: 622px;
    width: 680px;
 */
    display: block;
    position: relative;
}

/* Preloader */
/*@font-face {
    font-family: "Shark Random Funnyness 2";
    src: url('../fonts/106414795-SRF2.eot');
    src: url('../fonts/106414795-SRF2.eot?#iefix') format('embedded-opentype'),
        url('../fonts/106414795-SRF2.svg#Shark Random Funnyness 2') format('svg'),
        url('../fonts/106414795-SRF2.woff') format('woff'),
        url('../fonts/106414795-SRF2.ttf') format('truetype');
    font-weight: normal;
}*/
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
/* 
    background-color:#fff; /* change if the mask should have another color then white */
 */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:680px;
    height:622px;
    background-image:url(../img/loader.png); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:auto; /* is width and height divided by two */
}
.wrapper{
    width:680px;
    height:622px;
    background:url("../img/main.png") no-repeat;
    margin:auto;
    position:relative;
    /*border: 1px solid #f00;*/
    font-family: arial;
}
#instruct_0 {
    bottom: 35px;
    cursor: pointer;
    height: 40px;
    left: 80px;
    position: absolute;
    width: 342px;
}
.play_0 {
    bottom: 24px;
    cursor: pointer;
    height: 60px;
    right: 68px;
    position: absolute;
    width: 165px;
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
}
.insts,.play_1{
    bottom: 24px;
    cursor: pointer;
    height: 60px;
    right: 68px;
    position: absolute;
    width: 165px;
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
}

.inst_scr{display:none;}

.page2,.page3,.page4,.page5, .page6, .page7, .page8, .page9, .page10, .preTest,.postTest{ display:none;  }
.page4{overflow:hidden;}
.preTest .table,.postTest .table{ margin-top: 110px; height: 200px; background: none; position: absolute;}
.preTest .table .cell, .postTest .table .cell{ width: 160px !important; padding-left: 7px; }
.prjs,.pojs{
    cursor: pointer;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    /* width: 25%; */
    font-size: 60px;
    font-weight: bold;
    border: 2px solid #5DA63D;
    border-radius: 10px;
    background: #ecf5e0;
    height: 140px;
    width: 140px;
    color: #5DA63D;
    box-shadow: 0px 0px 18px #1C5006;
}
.prjs:hover,.prjs.clicked,.pojs:hover,.pojs.clicked{ background: #5DA63D; border: 2px solid #ecf5e0; color: #ecf5e0; }
.preTestCon,.postTestCon{
    font-size: 27px;
    width: 365px;
    position: absolute;
    bottom: 33px;
    left: 54px;
    letter-spacing: 1px;
}

.pre_submit,.posubmit{
    position:absolute;
    bottom:72px;
    right:75px;	
    width:106px;
    height:38px;
    cursor:pointer;
}

.jobs {
    bottom: 0;
    height: 67%;
    margin: 10px;
    position: absolute;
    width: 97%;
}
.job{
    position: absolute;
    cursor:pointer;
    width:140px;
    height:142px;
    border-radius:10px;
    border:1px solid;
}
#job_0 {
    left: 32px;
    top: 19px;
}

#job_1 {
    left: 181px;
    top: 19px;
}

#job_2 {
    left: 330px;
    top: 19px;
}

#job_3 {
    right: 37px;
    top: 19px;
}
#job_4 {
    left: 32px;
    top: 170px;
}
#job_5 {
    left: 181px;
    top: 170px;
}
#job_6 {
    left: 330px;
    top: 170px;
}
#job_7 {
    right: 37px;
    top: 170px;
}
.submit {
    border: 1px solid;
    bottom: 15px;
    height: 36px;
    position: absolute;
    right: 31px;
    width: 143px;
    cursor:pointer;
}

.avatars {
    bottom: 12px;
    height: 77%;
    left: 0;
    position: absolute;
    width: 100%;
}
.avatar {
    height: 414px;
    position: absolute;
    top: 0px;
    width: 167px;
    cursor:pointer;
}
.sprite { background: url('../img/choose_avatar.png') no-repeat top left; width: 167px; height: 414px;  } 
#avatar_0{
    left:11px;
    background-position: 0 0;	
}
#avatar_1{
    left:175px;
    background-position: -354px 0;	
}
#avatar_2{
    right:171px;
    background-position: -708px 0;	
}
#avatar_3{
    right:0px;
    background-position: -1062px 0;	
}
#avatar_0:hover{
    background-position: -177px 0;
}
#avatar_1:hover{
    background-position: -531px 0;	
}
#avatar_2:hover{
    background-position: -885px 0;	
}
#avatar_3:hover{
    background-position: -1239px 0;	
}


.dragDrop {
    bottom: 92px;
    height: 81%;
    left: 0;
    position: absolute;
    width: 100%;
}

.drop {
    bottom: 115px;
    height: 244px;
    left: 30px;
    position: absolute;
    width: 110px;
}
.drag {
    height: 244px;
    position: absolute;
    width: 110px;
    cursor:pointer;
}
.drags {
    height: 244px;
    position: absolute;
    width: 110px;
}
.drag, .drop, .drags { background: url('../img/avatar_careers.png') no-repeat top left; width: 110px; height: 244px;  } 
#drag_0 { left: 180px; }
#drag_1 { left: 270px; }
#drag_2 { left: 373px; }
#drag_3 { left: 462px; }
#drag_4 { left: 560px; }
#drag_5 { left: 177px; top:260px; }
#drag_6 { left: 275px; top:260px; }
#drag_7 { left: 370px; top:260px; }
#drag_8 { left: 465px; top:260px; }
#drag_9 { left: 560px; top:258px; }

.drop.avatar_d_0 { background-position: 0 0; } 
.drop.avatar_d_1 { background-position: -120px 0; } 
.drop.avatar_d_2 { background-position: -240px 0; } 
.drop.avatar_d_3 { background-position: -360px 0; } 

.drag.uniform_f_0, .drags.uniform_f_0 { background-position: -480px 0; } 
.drag.uniform_f_1, .drags.uniform_f_1 { background-position: -600px 0; } 
.drag.uniform_f_2, .drags.uniform_f_2 { background-position: -720px 0; } 
.drag.uniform_f_3, .drags.uniform_f_3 { background-position: -840px 0; } 
.drag.uniform_f_4, .drags.uniform_f_4 { background-position: -960px 0; } 
.drag.uniform_f_5, .drags.uniform_f_5 { background-position: -1080px 0; } 
.drag.uniform_f_6, .drags.uniform_f_6 { background-position: -1200px 0; } 
.drag.uniform_f_7, .drags.uniform_f_7 { background-position: -1320px 0; } 
.drag.uniform_f_8, .drags.uniform_f_8 { background-position: -1440px 0; } 
.drag.uniform_f_9, .drags.uniform_f_9 { background-position: -1560px 0; } 

.drag.uniform_m_0, .drags.uniform_m_0 { background-position: -1680px 0; } 
.drag.uniform_m_1, .drags.uniform_m_1 { background-position: -1800px 0; } 
.drag.uniform_m_2, .drags.uniform_m_2 { background-position: -1920px 0; } 
.drag.uniform_m_3, .drags.uniform_m_3 { background-position: -2040px 0; } 
.drag.uniform_m_4, .drags.uniform_m_4 { background-position: -2160px 0; } 
.drag.uniform_m_5, .drags.uniform_m_5 { background-position: -2280px 0; } 
.drag.uniform_m_6, .drags.uniform_m_6 { background-position: -2400px 0; } 
.drag.uniform_m_7, .drags.uniform_m_7 { background-position: -2520px 0; } 
.drag.uniform_m_8, .drags.uniform_m_8 { background-position: -2640px 0; } 
.drag.uniform_m_9, .drags.uniform_m_9 { background-position: -2760px 0; } 
.footer{
    width:100%;
    height:37px;
    position:absolute;
    bottom:0px;	
    overflow:hidden;
    z-index: 999;
    background: #82be3f;
}

.score {
    /*background: url("../img/score.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: #5DA63D;*/
    bottom: 0;
    height: 37px;
    left: 0px;
    position: absolute;
    width:280px;
}
.helps {
    /*background: url("../img/help.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: #1C5006;*/
    bottom: 0;
    height: 37px;
    position: absolute;
    right: 0;
    width: 400px;
}
.help_div {
    float: right;
    height: 19px;
    padding: 7px;
    text-align: right;
    font-weight:bold;
    width: 150px;
    color:#fff;
    margin-right:10px;
}
.mute,.help{
    margin-right:10px;	
    cursor:pointer;
    z-index:9;	
    position:relative;
}
.mute_img{
    position:absolute;
    z-index:99;	
    margin-left:-38px;
    margin-top:0px;
    display:none;
}
.times,.scores{
    width:280px;
    padding:7px;
    height:19px;
    margin-left:10px;	
    color:#fff;
    font-weight: bold;
}
#score_val{margin-left:10px;}
.imgs{
    height: 441px;
    left: 25px;
    position: absolute;
    top: 87px;
    width: 174px;	
    z-index: 999;
    background: url('../img/jobs.png') no-repeat top left;
}
.imgs.job_0_0 { background-position: 0 0; } 
.imgs.job_0_1 { background-position: -184px 0; } 
.imgs.job_0_2 { background-position: -368px 0; } 
.imgs.job_0_3 { background-position: -552px 0; } 
.imgs.job_0_4 { background-position: -736px 0; } 
.imgs.job_0_5 { background-position: -920px 0; } 
.imgs.job_0_6 { background-position: -1104px 0; } 
.imgs.job_0_7 { background-position: -1288px 0; } 
.imgs.job_0_8 { background-position: -1472px 0; } 
.imgs.job_0_9 { background-position: -1656px 0; } 
.imgs.job_1_0 { background-position: -1840px 0; } 
.imgs.job_1_1 { background-position: -2024px 0; } 
.imgs.job_1_2 { background-position: -2208px 0; } 
.imgs.job_1_3 { background-position: -2392px 0; } 
.imgs.job_1_4 { background-position: -2576px 0; } 
.imgs.job_1_5 { background-position: -2760px 0; } 
.imgs.job_1_6 { background-position: -2944px 0; } 
.imgs.job_1_7 { background-position: -3128px 0; } 
.imgs.job_1_8 { background-position: -3312px 0; } 
.imgs.job_1_9 { background-position: -3496px 0; } 
.imgs.job_2_0 { background-position: -3680px 0; } 
.imgs.job_2_1 { background-position: -3864px 0; } 
.imgs.job_2_2 { background-position: -4048px 0; } 
.imgs.job_2_3 { background-position: -4232px 0; } 
.imgs.job_2_4 { background-position: -4416px 0; } 
.imgs.job_2_5 { background-position: -4600px 0; } 
.imgs.job_2_6 { background-position: -4784px 0; } 
.imgs.job_2_7 { background-position: -4968px 0; } 
.imgs.job_2_8 { background-position: -5152px 0; } 
.imgs.job_2_9 { background-position: -5336px 0; } 
.imgs.job_3_0 { background-position: -5520px 0; } 
.imgs.job_3_1 { background-position: -5704px 0; } 
.imgs.job_3_2 { background-position: -5888px 0; } 
.imgs.job_3_3 { background-position: -6072px 0; } 
.imgs.job_3_4 { background-position: -6256px 0; } 
.imgs.job_3_5 { background-position: -6440px 0; } 
.imgs.job_3_6 { background-position: -6624px 0; } 
.imgs.job_3_7 { background-position: -6808px 0; } 
.imgs.job_3_8 { background-position: -6992px 0; } 
.imgs.job_3_9 { background-position: -7176px 0; } 

.ans_img, .right_imgs { background: url('../img/ans_img.png') no-repeat top left; width: 122px; height: 82px; } 
.ans_img{ border: 1px solid transparent; }

/*.ans_img.agj_q1_1 { background-position: -5px -0px; }
.ans_img.agj_q1_2 { background-position: -132px -0px; }
.ans_img.agj_q1_3 { background-position: -259px -0px; }
.ans_img.agj_q2_1 { background-position: -386px -0px; }
.ans_img.agj_q2_2 { background-position: -513px -0px; }
.ans_img.agj_q2_3 { background-position: -640px -0px; }
.ans_img.agj_q3_1 { background-position: -767px -0px; }
.ans_img.agj_q3_2 { background-position: -894px -0px; }
.ans_img.agj_q3_3 { background-position: -1021px -0px; }
.ans_img.agj_q4_1 { background-position: -1148px -0px; }
.ans_img.agj_q4_2 { background-position: -5px -87px; }
.ans_img.agj_q4_3 { background-position: -132px -87px; }
.ans_img.ags_q1_1 { background-position: -259px -87px; }
.ans_img.ags_q1_2 { background-position: -386px -87px; }
.ans_img.ags_q1_3 { background-position: -513px -87px; }
.ans_img.ags_q2_1 { background-position: -640px -87px; }
.ans_img.ags_q2_2 { background-position: -767px -87px; }
.ans_img.ags_q2_3 { background-position: -894px -87px; }
.ans_img.ags_q3_1 { background-position: -1021px -87px; }
.ans_img.ags_q3_2 { background-position: -1148px -87px; }
.ans_img.ags_q3_3 { background-position: -5px -174px; }
.ans_img.ags_q4_1 { background-position: -132px -174px; }
.ans_img.ags_q4_2 { background-position: -259px -174px; }
.ans_img.ags_q4_3 { background-position: -386px -174px; }
.ans_img.dm_q1_1 { background-position: -513px -174px; }
.ans_img.dm_q1_2 { background-position: -640px -174px; }
.ans_img.dm_q1_3 { background-position: -767px -174px; }
.ans_img.dm_q2_1 { background-position: -894px -174px; }
.ans_img.dm_q2_2 { background-position: -1021px -174px; }
.ans_img.dm_q2_3 { background-position: -1148px -174px; }
.ans_img.dm_q3_1 { background-position: -5px -261px; }
.ans_img.dm_q3_2 { background-position: -132px -261px; }
.ans_img.dm_q3_3 { background-position: -259px -261px; }
.ans_img.dm_q4_1 { background-position: -386px -261px; }
.ans_img.dm_q4_2 { background-position: -513px -261px; }
.ans_img.dm_q4_3 { background-position: -640px -261px; }
.ans_img.fb_q1_1 { background-position: -767px -261px; }
.ans_img.fb_q1_2 { background-position: -894px -261px; }
.ans_img.fb_q1_3 { background-position: -1021px -261px; }
.ans_img.fb_q2_1 { background-position: -1148px -261px; }
.ans_img.fb_q2_2 { background-position: -5px -348px; }
.ans_img.fb_q2_3 { background-position: -132px -348px; }
.ans_img.fb_q3_1 { background-position: -259px -348px; }
.ans_img.fb_q3_2 { background-position: -386px -348px; }
.ans_img.fb_q3_3 { background-position: -513px -348px; }
.ans_img.fb_q4_1 { background-position: -640px -348px; }
.ans_img.fb_q4_2 { background-position: -767px -348px; }
.ans_img.fb_q4_3 { background-position: -894px -348px; }
.ans_img.fl_q1_1 { background-position: -1021px -348px; }
.ans_img.fl_q1_2 { background-position: -1148px -348px; }
.ans_img.fl_q1_3 { background-position: -5px -435px; }
.ans_img.fl_q2_1 { background-position: -132px -435px; }
.ans_img.fl_q2_2 { background-position: -259px -435px; }
.ans_img.fl_q2_3 { background-position: -386px -435px; }
.ans_img.fl_q3_1 { background-position: -513px -435px; }
.ans_img.fl_q3_2 { background-position: -640px -435px; }
.ans_img.fl_q3_3 { background-position: -767px -435px; }
.ans_img.fl_q4_1 { background-position: -894px -435px; }
.ans_img.fl_q4_2 { background-position: -1021px -435px; }
.ans_img.fl_q4_3 { background-position: -1148px -435px; }
.ans_img.fr_q1_1 { background-position: -5px -522px; height: 83px; }
.ans_img.fr_q1_2 { background-position: -132px -522px; height: 83px; }
.ans_img.fr_q1_3 { background-position: -259px -522px; height: 83px; }
.ans_img.fr_q2_1 { background-position: -386px -522px; height: 83px; }
.ans_img.fr_q2_2 { background-position: -513px -522px; height: 83px; }
.ans_img.fr_q2_3 { background-position: -640px -522px; height: 83px; }
.ans_img.fr_q3_1 { background-position: -767px -522px; height: 83px; }
.ans_img.fr_q3_2 { background-position: -894px -522px; height: 83px; }
.ans_img.fr_q3_3 { background-position: -1021px -522px; height: 83px; }
.ans_img.fr_q4_1 { background-position: -1148px -522px; height: 83px; }
.ans_img.fr_q4_2 { background-position: -5px -610px; height: 83px; }
.ans_img.fr_q4_3 { background-position: -132px -610px; height: 83px; }
.ans_img.is_q1_1 { background-position: -259px -610px; }
.ans_img.is_q1_2 { background-position: -386px -610px; }
.ans_img.is_q1_3 { background-position: -513px -610px; }
.ans_img.is_q2_1 { background-position: -640px -610px; }
.ans_img.is_q2_2 { background-position: -767px -610px; }
.ans_img.is_q2_3 { background-position: -894px -610px; }
.ans_img.is_q3_1 { background-position: -1021px -610px; }
.ans_img.is_q3_2 { background-position: -1148px -610px; }
.ans_img.is_q3_3 { background-position: -259px -697px; }
.ans_img.is_q4_1 { background-position: -386px -697px; }
.ans_img.is_q4_2 { background-position: -513px -697px; }
.ans_img.is_q4_3 { background-position: -640px -697px; }
.ans_img.lav_q1_1 { background-position: -767px -697px; }
.ans_img.lav_q1_2 { background-position: -894px -697px; }
.ans_img.lav_q1_3 { background-position: -1021px -697px; }
.ans_img.lav_q2_1 { background-position: -1148px -697px; }
.ans_img.lav_q2_2 { background-position: -5px -698px; }
.ans_img.lav_q2_3 { background-position: -132px -698px; }
.ans_img.lav_q3_1 { background-position: -259px -784px; }
.ans_img.lav_q3_2 { background-position: -386px -784px; }
.ans_img.lav_q3_3 { background-position: -513px -784px; }
.ans_img.lav_q4_1 { background-position: -640px -784px; }
.ans_img.lav_q4_2 { background-position: -767px -784px; }
.ans_img.lav_q4_3 { background-position: -894px -784px; }
.ans_img.pb_q1_1 { background-position: -1021px -784px; }
.ans_img.pb_q1_2 { background-position: -1148px -784px; }
.ans_img.pb_q1_3 { background-position: -5px -785px; }
.ans_img.pb_q2_1 { background-position: -132px -785px; }
.ans_img.pb_q2_2 { background-position: -259px -871px; }
.ans_img.pb_q2_3 { background-position: -386px -871px; }
.ans_img.pb_q3_1 { background-position: -513px -871px; }
.ans_img.pb_q3_2 { background-position: -640px -871px; }
.ans_img.pb_q3_3 { background-position: -767px -871px; }
.ans_img.pb_q4_1 { background-position: -894px -871px; }
.ans_img.pb_q4_2 { background-position: -1021px -871px; }
.ans_img.pb_q4_3 { background-position: -1148px -871px; }
.ans_img.ps_q1_1 { background-position: -5px -872px; }
.ans_img.ps_q1_2 { background-position: -132px -872px; }
.ans_img.ps_q1_3 { background-position: -259px -958px; }
.ans_img.ps_q2_1 { background-position: -386px -958px; }
.ans_img.ps_q2_2 { background-position: -513px -958px; }
.ans_img.ps_q2_3 { background-position: -640px -958px; }
.ans_img.ps_q3_1 { background-position: -767px -958px; }
.ans_img.ps_q3_2 { background-position: -894px -958px; }
.ans_img.ps_q3_3 { background-position: -1021px -958px; }
.ans_img.ps_q4_1 { background-position: -1148px -958px; }
.ans_img.ps_q4_2 { background-position: -5px -959px; }
.ans_img.ps_q4_3 { background-position: -132px -959px; }*/
.ans_img.agj_q1_1 { background-position: -5px -0px; }
.ans_img.agj_q1_2 { background-position: -132px -0px; }
.ans_img.agj_q1_3 { background-position: -259px -0px; }
.ans_img.agj_q2_1 { background-position: -386px -0px; }
.ans_img.agj_q2_2 { background-position: -513px -0px; }
.ans_img.agj_q2_3 { background-position: -640px -0px; }
.ans_img.agj_q3_1 { background-position: -767px -0px; }
.ans_img.agj_q3_2 { background-position: -894px -0px; }
.ans_img.agj_q3_3 { background-position: -1021px -0px; }
.ans_img.agj_q4_1 { background-position: -1148px -0px; }
.ans_img.agj_q4_2 { background-position: -5px -87px; }
.ans_img.agj_q4_3 { background-position: -132px -87px; }
.ans_img.ags_q1_1 { background-position: -259px -87px; }
.ans_img.ags_q1_2 { background-position: -386px -87px; }
.ans_img.ags_q1_3 { background-position: -513px -87px; }
.ans_img.ags_q2_1 { background-position: -640px -87px; }
.ans_img.ags_q2_2 { background-position: -767px -87px; }
.ans_img.ags_q2_3 { background-position: -894px -87px; }
.ans_img.ags_q3_1 { background-position: -1021px -87px; }
.ans_img.ags_q3_2 { background-position: -1148px -87px; }
.ans_img.ags_q3_3 { background-position: -5px -174px; }
.ans_img.ags_q4_1 { background-position: -132px -174px; }
.ans_img.ags_q4_2 { background-position: -259px -174px; }
.ans_img.ags_q4_3 { background-position: -386px -174px; }
.ans_img.dm_q1_1 { background-position: -513px -174px; }
.ans_img.dm_q1_2 { background-position: -640px -174px; }
.ans_img.dm_q1_3 { background-position: -767px -174px; }
.ans_img.dm_q2_1 { background-position: -894px -174px; }
.ans_img.dm_q2_2 { background-position: -1021px -174px; }
.ans_img.dm_q2_3 { background-position: -1148px -174px; }
.ans_img.dm_q3_1 { background-position: -5px -261px; }
.ans_img.dm_q3_2 { background-position: -132px -261px; }
.ans_img.dm_q3_3 { background-position: -259px -261px; }
.ans_img.dm_q4_1 { background-position: -386px -261px; }
.ans_img.dm_q4_2 { background-position: -513px -261px; }
.ans_img.dm_q4_3 { background-position: -640px -261px; }
.ans_img.fb_q1_1 { background-position: -767px -261px; }
.ans_img.fb_q1_2 { background-position: -894px -261px; }
.ans_img.fb_q1_3 { background-position: -1021px -261px; }
.ans_img.fb_q2_1 { background-position: -1148px -261px; }
.ans_img.fb_q2_2 { background-position: -5px -348px; }
.ans_img.fb_q2_3 { background-position: -132px -348px; }
.ans_img.fb_q3_1 { background-position: -259px -348px; }
.ans_img.fb_q3_2 { background-position: -386px -348px; }
.ans_img.fb_q3_3 { background-position: -513px -348px; }
.ans_img.fb_q4_1 { background-position: -640px -348px; }
.ans_img.fb_q4_2 { background-position: -767px -348px; }
.ans_img.fb_q4_3 { background-position: -894px -348px; }
.ans_img.fl_q1_1 { background-position: -1021px -348px; }
.ans_img.fl_q1_2 { background-position: -1148px -348px; }
.ans_img.fl_q1_3 { background-position: -5px -435px; }
.ans_img.fl_q2_1 { background-position: -132px -435px; }
.ans_img.fl_q2_2 { background-position: -259px -435px; }
.ans_img.fl_q2_3 { background-position: -386px -435px; }
.ans_img.fl_q3_1 { background-position: -513px -435px; }
.ans_img.fl_q3_2 { background-position: -640px -435px; }
.ans_img.fl_q3_3 { background-position: -767px -435px; }
.ans_img.fl_q4_1 { background-position: -894px -435px; }
.ans_img.fl_q4_2 { background-position: -1021px -435px; }
.ans_img.fl_q4_3 { background-position: -1148px -435px; }
.ans_img.fr_q1_1 { background-position: -5px -522px; width: 122px; height: 83px; }
.ans_img.fr_q1_2 { background-position: -132px -522px; width: 122px; height: 83px; }
.ans_img.fr_q1_3 { background-position: -259px -522px; width: 122px; height: 83px; }
.ans_img.fr_q2_1 { background-position: -386px -522px; }
.ans_img.fr_q2_2 { background-position: -513px -522px; width: 122px; height: 83px; }
.ans_img.fr_q2_3 { background-position: -640px -522px; width: 122px; height: 83px; }
.ans_img.fr_q3_1 { background-position: -767px -522px; width: 122px; height: 83px; }
.ans_img.fr_q3_2 { background-position: -894px -522px; width: 122px; height: 83px; }
.ans_img.fr_q3_3 { background-position: -1021px -522px; width: 122px; height: 83px; }
.ans_img.fr_q4_1 { background-position: -1148px -522px; width: 122px; height: 83px; }
.ans_img.fr_q4_2 { background-position: -386px -609px; width: 122px; height: 83px; }
.ans_img.fr_q4_3 { background-position: -5px -610px; width: 122px; height: 83px; }
.ans_img.is_q1_1 { background-position: -513px -610px; }
.ans_img.is_q1_2 { background-position: -132px -610px; }
.ans_img.is_q1_3 { background-position: -640px -610px; }
.ans_img.is_q2_1 { background-position: -259px -610px; }
.ans_img.is_q2_2 { background-position: -767px -610px; }
.ans_img.is_q2_3 { background-position: -894px -610px; }
.ans_img.is_q3_1 { background-position: -1021px -610px; }
.ans_img.is_q3_2 { background-position: -1148px -610px; }
.ans_img.is_q3_3 { background-position: -132px -697px; }
.ans_img.is_q4_1 { background-position: -259px -697px; }
.ans_img.is_q4_2 { background-position: -386px -697px; }
.ans_img.is_q4_3 { background-position: -513px -697px; }
.ans_img.lav_q1_1 { background-position: -640px -697px; }
.ans_img.lav_q1_2 { background-position: -767px -697px; }
.ans_img.lav_q1_3 { background-position: -894px -697px; }
.ans_img.lav_q2_1 { background-position: -1021px -697px; }
.ans_img.lav_q2_2 { background-position: -1148px -697px; }
.ans_img.lav_q2_3 { background-position: -5px -698px; }
.ans_img.lav_q3_1 { background-position: -132px -784px; }
.ans_img.lav_q3_2 { background-position: -259px -784px; }
.ans_img.lav_q3_3 { background-position: -386px -784px; }
.ans_img.lav_q4_1 { background-position: -513px -784px; }
.ans_img.lav_q4_2 { background-position: -640px -784px; }
.ans_img.lav_q4_3 { background-position: -767px -784px; }
.ans_img.pb_q1_1 { background-position: -894px -784px; }
.ans_img.pb_q1_2 { background-position: -1021px -784px; }
.ans_img.pb_q1_3 { background-position: -1148px -784px; }
.ans_img.pb_q2_1 { background-position: -5px -785px; }
.ans_img.pb_q2_2 { background-position: -132px -871px; }
.ans_img.pb_q2_3 { background-position: -259px -871px; }
.ans_img.pb_q3_1 { background-position: -386px -871px; }
.ans_img.pb_q3_2 { background-position: -513px -871px; }
.ans_img.pb_q3_3 { background-position: -640px -871px; }
.ans_img.pb_q4_1 { background-position: -767px -871px; }
.ans_img.pb_q4_2 { background-position: -894px -871px; }
.ans_img.pb_q4_3 { background-position: -1021px -871px; }
.ans_img.ps_q1_1 { background-position: -1148px -871px; }
.ans_img.ps_q1_2 { background-position: -5px -872px; }
.ans_img.ps_q1_3 { background-position: -132px -958px; }
.ans_img.ps_q2_1 { background-position: -259px -958px; }
.ans_img.ps_q2_2 { background-position: -386px -958px; }
.ans_img.ps_q2_3 { background-position: -513px -958px; }
.ans_img.ps_q3_1 { background-position: -640px -958px; }
.ans_img.ps_q3_2 { background-position: -767px -958px; }
.ans_img.ps_q3_3 { background-position: -894px -958px; }
.ans_img.ps_q4_1 { background-position: -1021px -958px; }
.ans_img.ps_q4_2 { background-position: -1148px -958px; }
.ans_img.ps_q4_3 { background-position: -5px -959px; }

.right_img{
    height: 340px;
    right: 15px;
    position: absolute;
    top: 0px;
    width: 500px;	
}
.right_img > div{
    display: inline-block;
    /*height: 115px;width: 75px;*/
    position: absolute;
    opacity: 0;
}
#right_img_0 {
    left: 50px;
    top: 77px;
}
#right_img_1 {
    left: 200px;
    top: 77px;
}
#right_img_2 {
    left: 352px;
    top: 77px;
}
#right_img_3 {
    left: 50px;
    top: 165px;
}
#right_img_4 {
    left: 200px;
    top: 165px;
}
#right_img_5 {
    left: 352px;
    top: 165px;
}
#right_img_6 {
    left: 50px;
    top: 253px;
}
#right_img_7 {
    left: 200px;
    top: 253px;
}
.anim{
    background: #FFFFFF;
    width: 100%;
    height: 280px;
    position:absolute;
    bottom: 0;	
    z-index: 9;
    color:#000;
    display: none;
}
.animMask{
    height:312px;
    width:100%;
    bottom: -310px;
    position:absolute;		
    z-index: 99;
    background-color:#fff;
    display:none;
}
#qsnScreen{ width: 100%; display: table; }
#qsnScreen .t-cell{ display: table-cell; vertical-align: top; }
#qsnScreen .t-cell:first-child{ width: 200px; }
#qsnScreen .t-cell:last-child{ width: 480px; }
.prof{
    width: 110px;
    padding: 10px;
    margin: 110px auto 0;
    display: block;
    line-height: 18px;
    text-align: center;
    background: #0f0;
    text-shadow: 0px 1px 2px #000;
    font-weight: bold;
    visibility: hidden;
    opacity: 0;
}
.question{
    display: block;
    font-size:20px;
    line-height:24px;
    padding: 15px 15px 10px;
}
.answers_box{
    /*margin: 20px 10px 0 75px;*/
    display: table;
    padding: 0 15px;
    max-width: 450px;
    width: 100%;
}

.answers {
    margin-bottom: 15px;
    display: table-cell;
    width: 136.5px;
}
#answer2{ padding: 0 4px; }
.optionDis{
    /* height: 110px;
     width: 73px;
         display:inline-block;	
         margin-right:10px;*/
    cursor:pointer;
}
.answers .optionDis > div{ border: 1px solid transparent; }
.answers .optionDis > div:hover,.answers.clicked .optionDis > div {
    box-shadow: 0px 0px 15px #5ca63d;/*#5da63d#00fc06;*/
    border: 1px solid #5ca63d;
}
.ans_con{
    cursor: pointer;    
    font-size: 15px;
    line-height: 16px;
    margin-top: 2px;    
    text-align: center;
    display: block;
    width: 122px;
    /* 
    display: inline-block;
    position: absolute;
     width: 130px;*/
}

/*popup code*/
#overlay {
    width: 100%;
    height: 100%;
    background-color: #fff;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    -khtml-opacity: 0.1;
    opacity: 0.1;
    z-index: 99;
    position:absolute;
    top:0px;
}
/*popup help*/
#popupCongr, #popup,#pop_oop,#pop_almost,#popupHelp,#popup-career,#popupNext, #popup-code,#popup-career-complete{
    /*background: url("../img/congra.png") repeat scroll 0 0 rgba(0, 0, 0, 0);*/
    background: #5DA63D;
    display: none;
    font-size: 25px;
    font-weight: bold;
    /*height: 198px;*/
    height: auto !important;
    right: 64px;
    position: absolute;
    text-align: center;
    top: 125px;
    width: 400px;
    z-index: 999;
    box-shadow: 2px 5px 10px #666;
    color: #fff;
}
#pop_oop, #pop_almost{ right: 140px; top: 145px; }
#popupHelp{ top: 80px; width: 540px; }
#popup-career,#popup-career-complete{ top: 170px;  right: 140px; }
#popup-code{ top: 180px;  right: 125px; }
#popup-career em{ color: #ffcd31; font-size: 22px; }
#popupNext{ top: 180px; }
.pop_con {
    font-size: 20px;
    font-weight: normal;
}
/*#popup{ height: 295px; }*/
#popupCongr > div,#popup > div,#pop_oop > div, #pop_almost > div,#popupHelp > div,#popup-career > div, #popupNext > div, #popup-code > div,#popup-career-complete > div{ padding: 20px; }
#popupCongr > div:first-child,#popup > div:first-child,#pop_oop > div:first-child, #pop_almost > div:first-child,#popupHelp > div:first-child,#popup-career > div:first-child,#popup-career-complete > div:first-child,#popupNext  > div:first-child{ background: #5DA63D; }
#popupCongr h3,#popup h3,#popupHelp h3,#popup-career > h3, #popupNext h3,#popup-career-complete > h3{
    font-size: 25px;
    margin: 10px 0;
    color: #fff;
}
.pop_video {
    background: none repeat scroll 0 0 #000000;
    visibility:hidden;
    left: -60px;
    position: absolute;
    top: -30px;
    opacity: 0;
}
#play_audio{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: none;
    height: 43px;
    position: absolute !important;
    right: 50px;
    top: 94px;
    width: 55px;
}
#play_video{
    background: url("../img/videoPlay.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    height: 34px;
    width: 60px;
    z-index:999;
    margin-left: 10px;
    border: 1px solid #fff;
    border-radius: 3px;
}

.see {
    color: #fff;
    font-size: 18px;
    line-height:50px;
}
#vclose {
    height: 24px;
    position: absolute !important;
    top: 75px;
    right: 25px;
    width: 24px;    
    background:url("../img/x.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    padding:0px !important;
    cursor: pointer;
    display:none;
    z-index:9999999;
}
#popupCongr .Cclose, #popup-career a{
    font-size: 16px;
    padding: 10px 15px;
    margin: 0 10px;
    text-decoration: none;
    width: 213px;
    color: #5DA63D;   
    background: #fff;
}
#popup .close,#pop_oop .pclose,#pop_almost .ptclose, #popupHelp a , #popupNext a, #popup-code a,#popup-career-complete a {
    border: 2px solid;
    text-decoration: none;
    color: #fff;
    border: 2px solid #fff;
    padding: 5px 10px;
    border-radius: 5px;
}
.pop_hcon ol li{
    margin-bottom:10px;	
}
.pop_hcon ol{
    padding: 0 0 0 20px;
    text-align: left;
    font-size: 18px;
}
#popup-career .popContent,#popup-career-complete .popContent{ padding: 20px 15px; }
.pop-career{ padding: 5px 0 20px;  background: #1C5006;}
#popup-code .popContent{ font-size: 20px; }
.left{ text-align: left; }
.left:nth-child(2){padding: 10px 0 10px 20px;}
.getcode-input-error{ color: #c9302c; font-size: 16px; }
.popScore,.popup-close,.pop-code-close,.pop-career-complete-close { font-size: 16px; color: #5DA63D; background: #1C5006; padding: 20px; }
#popContent {
    font-size: 16px;
    font-weight: normal;
    color: #fff;
}
.pop_avatar {
    left: 8px;
    position: absolute;
    top: 85px;
}
.disable{ opacity: 0.5; }
.pop_inst {
    left: 148px;
    position: absolute;
    top: 148px;
}
.xmask{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#FFF;
    z-index:9999;
    display:none;
}
.pop_con > a{
    color:#fff;
}

/*popup help*/
#popCongr{
    background: url("../img/congra1.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display:none;
    position:absolute ;
    left:95px ;
    top:75px;
    width:505px;
    height:405px;
    font-size:25px;
    font-weight:bold ;
    z-index:999;
    text-align:center;
}
#certificate{
    color: #FFFFFF;
    font-size: 16px;
    height: 131px;
    padding: 0 5px;
    position: absolute !important;
    right: 11%;
    text-decoration: none;
    top: 40%;
    width: 130px;
}
#passport{
    color: #FFFFFF;
    font-size: 16px;
    height: 24px;
    padding: 0 5px;
    position: absolute !important;
    right: 24%;
    text-decoration: none;
    top: 81.5%;
    width: 130px;
}
#popCongr .Cclose {
    background: none repeat scroll 0 0 #1474E2;
    border: 1px solid #FFC4AF;
    bottom: 5%;
    color: #FFFFFF;
    font-size: 16px;
    left: 47px;
    padding: 0 5px;
    position: absolute !important;
    text-decoration: none;
}
/*page5*/
.table { 
    display: table;
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 160px;
    height: 425px;
    position: absolute;
    padding: 20px 20px;
}
.row{ display: table-row; width: 100%; }
.cell{ display: table-cell; width: 33.33%; text-align: center; vertical-align: middle; }
.f_career,.f_career_choose{ background: url('../img/focus_careers.png') no-repeat top left; width: 125px; height: 134px; }
.f_career.clicked{ opacity: 0.5; }
.page5 .table .row .cell .f_career,.page10 .table .row .cell .f_career_choose{ 
    width: 150px;
    height: 136px;
    margin: 0 auto; 
    cursor: pointer;
}

.page5 .table .row .cell #f_career_0,#f_career_choose_0{ background-position: -315px -282px;  }
.page5 .table .row .cell #f_career_0:hover,#f_career_choose_0:hover{ background-position: -470px -282px; }
.page5 .table .row .cell #f_career_0.clicked:hover{ background-position: -315px -282px; cursor: default; }
.page5 .table .row .cell #f_career_1,#f_career_choose_1{ background-position: -315px -0px;  }
.page5 .table .row .cell #f_career_1:hover,#f_career_choose_1:hover{ background-position: -470px -0px; }
.page5 .table .row .cell #f_career_1.clicked:hover{ background-position: -315px -0px; cursor: default; }
.page5 .table .row .cell #f_career_2,#f_career_choose_2{ background-position: -5px -564px;  }
.page5 .table .row .cell #f_career_2:hover,#f_career_choose_2:hover{ background-position: -160px -564px; }
.page5 .table .row .cell #f_career_2.clicked:hover{ background-position: -5px -564px; cursor: default; }
.page5 .table .row .cell #f_career_3,#f_career_choose_3{ background-position: -160px -0px; }
.page5 .table .row .cell #f_career_3:hover,#f_career_choose_3:hover{ background-position: -5px -0px; }
.page5 .table .row .cell #f_career_3.clicked:hover{ background-position: -160px -0px; cursor: default; }
.page5 .table .row .cell #f_career_4,#f_career_choose_4{ background-position: -315px -423px; }
.page5 .table .row .cell #f_career_4:hover,#f_career_choose_4:hover{ background-position: -470px -423px; }
.page5 .table .row .cell #f_career_4.clicked:hover{ background-position: -315px -423px; cursor: default; }
.page5 .table .row .cell #f_career_5,#f_career_choose_5{ background-position: -5px -423px;  }
.page5 .table .row .cell #f_career_5:hover,#f_career_choose_5:hover{ background-position: -160px -423px; }
.page5 .table .row .cell #f_career_5.clicked:hover{ background-position: -5px -423px; cursor: default; }
.page5 .table .row .cell #f_career_6,#f_career_choose_6{ background-position: -5px -282px;  }
.page5 .table .row .cell #f_career_6:hover,#f_career_choose_6:hover{ background-position: -160px -282px;  }
.page5 .table .row .cell #f_career_6.clicked:hover{ background-position: -5px -282px; cursor: default; }
.page5 .table .row .cell #f_career_7,#f_career_choose_7{ background-position: -315px -141px;  }
.page5 .table .row .cell #f_career_7:hover,#f_career_choose_7:hover{ background-position: -470px -141px; }
.page5 .table .row .cell #f_career_7.clicked:hover{ background-position: -315px -141px; cursor: default; }
.page5 .table .row .cell #f_career_8,#f_career_choose_8{ background-position: -5px -141px;  }
.page5 .table .row .cell #f_career_8:hover,#f_career_choose_8:hover{ background-position: -160px -141px; }
.page5 .table .row .cell #f_career_8.clicked:hover{ background-position: -5px -141px; cursor: default; }



/*page6*/
.f_career_logo { width: 255px; height: 217px; background: url("../img/focus_careers_logos.png") no-repeat 0px 0px; position: absolute;  top: 23px;  left: 10px; }
.f_career_logo.f_career_logo_0 { background-position: -5px -0px; }
.f_career_logo.f_career_logo_1 { background-position: -265px -0px; }
.f_career_logo.f_career_logo_2 { background-position: -525px -0px; }
.f_career_logo.f_career_logo_3 { background-position: -5px -222px; }
.f_career_logo.f_career_logo_4 { background-position: -265px -222px; }
.f_career_logo.f_career_logo_5 { background-position: -525px -222px; }
.f_career_logo.f_career_logo_6 { background-position: -5px -444px; }
.f_career_logo.f_career_logo_7 { background-position: -265px -444px; }
.f_career_logo.f_career_logo_8 { background-position: -525px -444px; }
.f_career_options,.f_career_round_options{  margin: 0 auto; width: 100%;  display: inline-block; }
.page6 .table:first-child { margin-top: 260px;   height: auto;   padding: 0 2%; }
.page6 .table:nth-child(2) { margin-top: 300px; height: 160px; }
.page6 .table:nth-child(2) .row .cell{ vertical-align: top; }
.page6 .table:nth-child(3) { margin-top: 540px; height: auto; }
.page6 .table:first-child .row .cell, .page6 .table:last-child .row .cell{ width: 100%; }
.f_career_option { border: 1px solid transparent; height: 119px; width: 178px;  margin: 0 auto 15px; cursor: pointer; background: url("../img/focus_careers_options.png") no-repeat 0px 0px; }
.f_career_option:hover, .f_career_option.clicked{ box-shadow: 0px 0px 15px #5ca63d; border: 1px solid #5ca63d; /*#5da63d#00fc06;*/ }
.f_career_option.agricultural_bankar { background-position: -5px -0px; }
.f_career_option.agricultural_lawyer { background-position: -188px -0px; }
.f_career_option.agriculture_pilot { background-position: -371px -0px; }
.f_career_option.chief_financial_officer { background-position: -554px -0px; }
.f_career_option.climate_change_analyst { background-position: -737px -0px; }
.f_career_option.college_professor { background-position: -5px -124px; }
.f_career_option.college_recruiter { background-position: -188px -124px; }
.f_career_option.conservation_officer { background-position: -371px -124px; }
.f_career_option.dairy_farm_worker { background-position: -554px -124px; }
.f_career_option.electrical_engineer { background-position: -737px -124px; }
.f_career_option.ethanol_engineer { background-position: -5px -248px; }
.f_career_option.fisheries_technician { background-position: -188px -248px; }
.f_career_option.food_safety_specialist { background-position: -371px -248px; }
.f_career_option.forklift_operator { background-position: -554px -248px; }
.f_career_option.game_wardon { background-position: -737px -248px; }
.f_career_option.graphic_designer { background-position: -5px -372px; }
.f_career_option.greenhouse_manager { background-position: -188px -372px; }
.f_career_option.heavy_equipment_operator { background-position: -371px -372px; }
.f_career_option.horse_trainer { background-position: -554px -372px; }
.f_career_option.microbiologist { background-position: -737px -372px; }
.f_career_option.nutritionist_dietitian { background-position: -5px -496px; }
.f_career_option.plant_scientist { background-position: -188px -496px; }
.f_career_option.plant_specialist { background-position: -371px -496px; }
.f_career_option.sales_representative { background-position: -554px -496px; }
.f_career_option.veterinarian { background-position: -737px -496px; }
.f_career_option.welder { background-position: -5px -620px; }

.f_career_name{ font-size: 25px; /*font-weight: bold;*/ color: #5DA63D; }
.f_career_option_con{
    width: 140px;
    display: block;
    margin: 0 auto; 
}
.f_career_submit{ background: #5DA63D; color: #fff; text-decoration: none; padding: 5px 15px; font-size: 20px; }
.finalQuestion {
    position: absolute;
    border: 2px solid #f5faf4;
    color: #f5faf4;
    border-radius: 3px;
    padding: 3px 10px;
    color: #fff;
    right: 10px;
    bottom: 7px;
    font-weight: bold;
    cursor: pointer;
    font-size: 15px;
}
/*page7*/
.page7 .table:first-child, .page8 .table:first-child { margin-top: 250px; height: 160px; }
.page9 .table:first-child{ margin-top: 280px; height: 160px; }/*584; 47*/
.f_career_round_option { height: 211px; width: 231px; margin: 0 auto 15px; cursor: pointer;  background: url("../img/f_career_round_option.png") no-repeat 0px 0px; }
.page9 .f_career_round_option { border: none; margin-bottom: 15px; cursor: pointer; }
.f_career_round_option_con{ display: none; margin: 0 auto; }
.f_career_round_option.using_your_hands { background-position: -5px -0px; }
.f_career_round_option.using_your_hands:hover {  background-position: -241px -0px; }
.f_career_round_option.working_with_technology { background-position: -241px -648px; }
.f_career_round_option.working_with_technology:hover { background-position: -477px -648px; }
.f_career_round_option.working_alone { background-position: -477px -0px;; }
.f_career_round_option.working_alone:hover { background-position: -5px -216px; }
.f_career_round_option.working_indoors { background-position: -241px -216px; }
.f_career_round_option.working_indoors:hover { background-position: -477px -216px; }
.f_career_round_option.working_outdoor { background-position: -5px -432px; }
.f_career_round_option.working_outdoor:hover { background-position: -241px -432px; }
.f_career_round_option.working_with_people { background-position: -477px -432px }
.f_career_round_option.working_with_people:hover { background-position: -5px -648px; }

.focus_careers{ display: none; }
.page10 .table:nth-child(1){
    margin-top: 200px;
    height: 150px;
}    
.page10 .table:nth-child(2){
    height: 150px;
    max-width: 480px;
    width: 100%;
    padding: 20px 100px;
    margin: 380px auto auto;
} 
.page10 .table:nth-child(3) .row .cell{ width: 50%;}
.page10 #focus_careers_8 .table:nth-child(2) .row .cell{ width: 33.33%; }
.page10 #focus_careers_8 .table:nth-child(2){
    /*margin-top: 400px;
    height: 150px;
    width: 96%;
    padding: 20px 2%;*/
    padding: 20px 20px;
    max-width: 96%;
}
#gotoPostTest { width: 680px; height: 45px; position: absolute; bottom: 0; left: 0; }
/* tooltip css*/

#tooltip
{
    text-align: left;
    color: #fff;
    background: #5DA63D;
    position: absolute;
    z-index: 100;
    padding: 10px 15px;
    font-size: 15px;
    line-height: 15px;
    max-width: 200px !important;
    width: 100% !important;
} 
#tooltip ul{ text-align: left; padding-left: 15px; font-size: 14px; margin: 8px 0 0; }
#tooltip ul li{ margin-bottom: 5px; }
#tooltip p { text-align: left; font-size: 14px; margin: 8px 0 0; }
#tooltip:after /* triangle decoration */
{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #5DA63D;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}
#tooltip.top:after
{
    border-top-color: transparent;
    border-bottom: 10px solid #5DA63D;
    top: -20px;
    bottom: auto;
}
#tooltip.left:after
{
    left: 10px;
    margin: 0;
}
#tooltip.right:after
{
    right: 10px;
    left: auto;
    margin: 0;
}
.pincode-input-container input.first {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.pincode-input-container input.mid {
    border-radius: 0px;
    border-left-width: 0px;
}
.pincode-input-container input.last {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left-width: 0px;
}
.pincode-input-text, .form-control.pincode-input-text {
    width: 35px;
    float: left;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
        border-left-width: 1px;
    border-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}