/* Default Styles */

* { margin: 0; border: 0; }
a { outline: none; text-decoration: none; color: #565656; }
ul,li { margin:0; padding:0 }
body { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3em; color:#000  }
.clear { clear: both; }
.hrline { float: left; width: 100%;margin:20px 0;background-color:#dfe2e3; height:1px;*width:663px }
.hrline2 { float: left; width: 100%;margin:0 0 10px 0;background-color:#dfe2e3; height:1px;*width:663px }
.blue { color: #0f8fc8; }
.errors { color: red; font-size:14px }

.errorbox { color: red; font-size:12px; padding:10px; width:100%; background-color:#fadddd; float:left; margin:0 0 20px 0 }

.bluetextp { float: left; width: 100%; margin-top: -27px; margin-bottom: 40px; }
.bluetextp2 { float: left; width: 100%; margin-top: 10px; margin-bottom: 10px; font-size:18px }
.fade { opacity: 0.5; }
.bottomhight { height: 55px; }
.light { font-weight: 300; }
.light b{ font-weight: 500; width:130px; float:left }
.questionbutton { vertical-align: middle; cursor: pointer; }

.extrapadding { margin-top: 5px; margin-bottom:10px }
.loginerror { color: red; }
.fullblack { background: black; opacity:0.8; filter: alpha(opacity:80); }

.menutext {color: darkblue; font-size:11px; align-content:center}


/*Speech*/

p.speech
{
	position: relative;
	width:  auto;
	height:  auto;
	text-align: center;
	background-color: green;
	border: 8px solid #fff;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}


/* Buttons */

/*Button align*/
.btnFloat, div.btnFloat table {
    float: left;margin-right:30px;
}


.button1 { background-image: url(../images/button1.gif); width:118px; padding: 10px 0 0 42px; height: 28px; float:left; color:#ffffff; vertical-align:middle }
.button2 { background-image: url(../images/button2.gif); width: 49px; height: 24px; float:left; color:#ffffff; padding:4px 0 0 35px;vertical-align:middle; font-size:12px }
.button3 { background-image: url(../images/button3.gif); width: 310px; height: 32px; float:left; text-align:center; color:#ffffff; padding:12px 0 0 0px;vertical-align:middle; font-size:21px; *height:27px;*padding:9px 0 9px 0px }
.button4 { background-image: url(../images/button4.gif); width: 310px; height: 32px; float:left; text-align:center; color:#000000; padding:12px 0 0 0px;vertical-align:middle; font-size:21px; margin-right:20px; *height:27px;*padding:9px 0 9px 0px }
.button5 { background-image: url(../images/button2.png); width: 190px; height: 27px; color:#ffffff; padding:7px 0 0 7px;vertical-align:middle; font-family: 'Roboto', sans-serif;font-size:18px; display:block; }
.button6 { background-image: url(../images/button3.png);width: 87px;height: 23px;color: #ffffff;padding: 3px 0 0 7px;vertical-align: middle;font-family: 'Roboto', sans-serif;font-size: 14px;display: block; float: left;margin-right: 10px;}
.button7 { background-image: url(../images/button4.png);width: 192px;height: 23px;color: #ffffff;padding: 4px 0 0 7px;vertical-align: middle;font-family: 'Roboto', sans-serif;font-size: 14px;display: block; float: left;margin-right: 10px;cursor:pointer}
.button8 { background-image: url(../images/button5.png);width: 248px;height: 40px;color: #ffffff;padding: 21px 0 0 43px;vertical-align: middle;font-family: 'Roboto', sans-serif;font-size: 28px;display: block; float: left;margin-right: 10px;cursor:pointer; font-weight:700; text-align:left}
.button4x { background-image: url(../images/button4.gif); width: 310px; height: 44px; float:left; text-align:center; color:#000000; padding:12px 0 0 0px;vertical-align:middle; font-size:21px; margin-right:20px; *height:27px;*padding:9px 0 9px 0px }


.numbutton { background-color: white; text-align: center; padding: 2px 4px 2px 4px; color: #0f8fc8;border: 1px solid white; border-radius: 7px; }
.numtext { background-color: white; text-align: center; padding: 4px; color: #0f8fc8;border: 1px solid white; border-radius: 7px; }
.genbtn { background-image: url(../images/genbtn.gif); background-color:#12678c; background-repeat:repeat-x;border: 1px solid #1985b6; border-radius: 7px;text-align: center; padding: 2px 10px 2px 10px; color: #ffffff; font-size:12px }
.genbtn2 { background-color:#cb1111; background-repeat:repeat-x;border: 1px solid red; border-radius: 7px;text-align: center; padding: 2px 10px 2px 10px; color: #ffffff; font-size:12px }


.numbutton2 { background-color: #0f8fc8; text-align: center; padding: 2px 4px 2px 4px; color: white;border: 1px solid #0f8fc8; border-radius: 7px; }
.numtext2 { background-color: #0f8fc8; text-align: center; padding: 4px; color:white;border: 1px solid #0f8fc8; border-radius: 7px; }


a:hover {opacity: 0.7; filter: alpha(opacity=70);transition: opacity .20s ease-in-out; -moz-transition: opacity .20s ease-in-out; -webkit-transition: opacity .20s ease-in-out; }

/*       */

.personheader { float: left; width: 100%; margin: 0 auto;text-align:center; background-color:white }
.personheader .headercontainer { width: 980px; margin: 15px auto }

/* Header */

.header { float: left; width: 100%; margin: 0 auto;text-align:center; background-color:white }
.header .headercontainer { width: 980px; margin: 15px auto }
.header .headercontainer .itconsilum1 { text-align: center;}

.footer { float: left; width: 100%; margin: 0 auto;text-align:center; background-color:white }
.footer .footercontent { width: 980px; margin: 30px auto; font-size:11px; color:#2e2624 }

/* Login */

.login { width: 100%; margin: 0 auto; float: left; background-image:url(../images/loginbg.png); background-position:center; background-repeat:no-repeat;}
.login .logincontent { width: 980px; margin: 0 auto; }
    .login .logincontent h1 {font-size:32px; line-height:38px; color:white; border-bottom:1px solid white; text-align:center; padding-bottom:7px}
    .login .logincontent h2 {font-size:28px; line-height:26px; color:white; padding:5px 0 25px 0; font-weight:300;text-align:center}
    .login .logincontent p {color:white; padding:10px 0}
.loginleft { width: 502px; margin:0px auto 0 auto; text-align:center }
.loginblock { background-color: rgba(49, 161, 219, 0.4); width:502px;  padding:20px; background-repeat:no-repeat; background-position: right center;}
.loginblock .textbox {padding:9px; border:1px solid #acacac; background-image:url(../images/select_bg.gif); background-repeat:repeat-x; margin-bottom:5px; vertical-align:middle;font-family: 'Roboto', sans-serif; font-size: 14px; font-weight:300}
.loginblock .loginbutton { background-image: url(../images/button1.png); width: 301px; height: 32px; background-repeat:no-repeat; border:none; text-align:center; background-color:transparent; color:white; padding:7px 0 0 0px;vertical-align:middle; font-family: 'Roboto', sans-serif;font-size:21px; display:block; margin-left:95px }
.loginblock .loginprev { background-image: url(../images/button1prv.png); width: 301px; height: 32px; text-align:center; color:#ffffff; padding:7px 0 0 0px;vertical-align:middle; font-family: 'Roboto', sans-serif;font-size:21px; display:block; margin-left:95px }
.loginblock .submw { background-image: url(../images/usersubworks.jpg); background-repeat:no-repeat }   
.loginblock .water { background-image: url(../images/password.jpg); background-repeat:no-repeat }   
.loginblock .usrwater { background-image: url(../images/useremail.jpg); background-repeat:no-repeat } 
.loginblock .induct { background-image: url(../images/userinductref.jpg); background-repeat:no-repeat }  
.loginblock .emailwater { background-image: url(../images/youremail.jpg); background-repeat:no-repeat } 
.loginblock .psn1water { background-image: url(../images/firstnamefield.jpg); background-repeat:no-repeat } 
.loginblock .psn2water { background-image: url(../images/surnamefield.jpg); background-repeat:no-repeat } 
.loginblock .psn3water { background-image: url(../images/companyfield.jpg); background-repeat:no-repeat } 
.loginblock .psn4water { background-image: url(../images/emailfield.jpg); background-repeat:no-repeat } 
.loginblock .psn5water { background-image: url(../images/contactnofield.jpg); background-repeat:no-repeat } 
.loginblock .rcptcentr {  align-items:center }


.loginblock .forgotbutton { background-color:#3eb3e2 ;background-image: url(../images/button1.png); width: 301px; height: 39px; text-align:center; color:#ffffff; padding:0px 0 0 0px;vertical-align:middle; font-family: 'Roboto', sans-serif;font-size:21px; display:block; margin-left:95px }
.rememberme { width: 100%; margin:0 0 10px 0;color: white;  }
.rememberme a{ color: white; margin-left:31px}

/* Register */

.regleft { width: 502px; margin:0px auto; text-align:center }
.regblock { background-color: #1f8eb8; width:502px;  padding:20px;}
.regblock h2 {font-size:28px; line-height:26px; color:white; padding:5px 0 25px 0; font-weight:300;text-align:center}
.regblock .textbox {padding:9px; border:1px solid #acacac; background-image:url(../images/select_bg.gif); background-repeat:repeat-x; margin-bottom:5px; vertical-align:middle;font-family: 'Roboto', sans-serif; font-size: 14px; font-weight:300}
.regblock .loginbutton { background-image: url(../images/button1.png); width: 301px; height: 32px; text-align:center; color:#ffffff; padding:7px 0 0 0px;vertical-align:middle; font-family: 'Roboto', sans-serif;font-size:21px; display:block; margin-left:95px }
.regblock .water { background-image: url(../images/password.jpg); background-repeat:no-repeat }   
.regblock .water2 { background-image: url(../images/password2.jpg); background-repeat:no-repeat }   
.regblock .forgotbutton { background-color:#3eb3e2 ;background-image: url(../images/button1.png); width: 301px; height: 39px; text-align:center; color:#ffffff; padding:0px 0 0 0px;vertical-align:middle; font-family: 'Roboto', sans-serif;font-size:21px; display:block; margin-left:95px }



/* User Header */    
     
.userheader { float: left; width: 100%; margin: 0 auto;text-align:left; background-color:#4e4e4e }
.userheader .userheader_content { width: 980px; margin: 0px auto; height:48px }

.usermain { width: 100%; margin: 0 auto; float: left; background:#dfdcdc; }
.usermain .usercontent { width: 980px; margin: 40px auto 0 auto;height:402px }


/* Navigation */
.homelink { margin-top: 6px; float:left; margin-right:13px }
.rightlinks { float: right;  margin-top: 13px; font-size:12px;color: white; font-weight:300; width:380px }
    .rightlinks .percenttext {float:left}
    .rightlinks #progressbar{float:left;width: 200px;height: 15px;margin-right: 10px;margin-left: 10px;}
.rightlinks a { color: white; font-weight:700; text-decoration:none; margin-right:5px; float:left }
    .rightlinks b { font-weight:700;}

    .ui-widget-header {background: url(../images/pro.png) repeat-x 50% 50%;}
.ui-corner-all { -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px; border:2px solid #454545 }
.ui-progressbar { position: relative; }
.progress-label {position: absolute;left: 37%;top: -1px;font-size:11px; color:white }
.ui-widget-content { background: #6b6b6b; }

/* Company area */

.sub { float: left; width: 100%; margin: 20px auto; }
.subarea { margin: 0px auto; width: 980px; }
    .subarea .cidlogo { float: left; margin-right: 20px; width: 123px; }
        .subarea .cidlogo img {width: 123px; }
            .subarea .startinfo { float: left; width: 680px; }
        .subarea .startinfo h2 { color:#4e4e4e; font-size:18px; font-weight:700; margin-bottom:10px }
        .subarea .startinfo h3 { color:#0f8fc8; font-size:28px; font-weight:700; line-height:30px }
            .subarea .menuinfo { float: left; width: 700px; }
                .subarea .todo { float: left; width: 780px; }
        .subarea .todo h2 { color:#4e4e4e; font-size:18px; font-weight:700; margin-bottom:10px  }
        .subarea .todo h3 { color:#0f8fc8; font-size:28px; font-weight:700; line-height:30px }
        .subarea .todo h4 { color:#0f8fc8; font-size:24px; font-weight:700; line-height:30px }
    .subarea .info { float: left; width: 480px; }
        .subarea .info h2 { color:#4e4e4e; font-size:18px; font-weight:700; margin-bottom:10px  }
        .subarea .info h3 { color:#0f8fc8; font-size:28px; font-weight:700; line-height:30px }
        .subarea .info h4 { color:#0f8fc8; font-size:24px; font-weight:700; line-height:30px }

.dashpanel a { float: left; width: 310px; height: 225px; margin-right: 10px; margin-bottom:10px; }
.dashpanel a:hover {opacity: 0.8; filter: alpha(opacity=80); }

/* new sub area*/

 .subnew { float: left; width: 100%; margin: 20px auto; }
     .subnewarea .cidlogo { float: left; margin-right: 20px; width: 123px; }
.subnew .myblock {display: block; width: 100%;}
 .subnew .subnewarea { margin: 0px auto; width: 980px; }
 .subnew  .subnewarea .jnfo { float: left; width: 480px; }
 .subnew  .subnewarea .jnfo .myblock  {display: block; width: 95%;}
 .subnew  .subnewarea .jnfo .myblock h3 { color:#0f8fc8; font-size:18px; font-weight:700; line-height:30px }
 .subnew  .subnewarea .jnfo h3 { color:#0f8fc8; font-size:18px; font-weight:700; line-height:30px }



/* Intro area */

.usermain .intructionscontent { width: 900px; margin: 0px auto 0 auto;height:531px; padding:20px 40px; background-image:url(../images/mainbluebg.gif); background-repeat:repeat-x; background-position:top; text-align:center }
    .usermain .intructionscontent h2 { font-size:62px; color:white; font-weight:700; margin:50px 0 0 0; border-bottom:1px solid #ffffff; line-height:62px; float:left; width:100%; padding-bottom:15px  }
    .usermain .intructionscontent p { font-size:28px; color:white; font-weight:300; margin:20px 0 20px 0; float:left; width:100%; line-height:30px }
        .usermain .intructionscontent h3 { font-size:28px; color:white; font-weight:300; margin:20px 0 20px 0; float:left; width:100%; line-height:30px; border-bottom:1px solid #ffffff }

/* video main*/
.uservideomain .intructionscontent { width: 900px; margin: 0px auto 0 auto;height:531px; padding:20px 40px; background-image:url(../images/mainwhite.gif); background-repeat:repeat-x; background-position:top; text-align:center }
    .uservideomain .intructionscontent h2 { font-size:62px; color:white; font-weight:700; margin:50px 0 0 0; border-bottom:1px solid #ffffff; line-height:62px; float:left; width:100%; padding-bottom:15px  }
    .uservideomain .intructionscontent p { font-size:28px; color:white; font-weight:300; margin:20px 0 20px 0; float:left; width:100%; line-height:30px }
        .uservideomain .intructionscontent h3 { font-size:28px; color:white; font-weight:300; margin:20px 0 20px 0; float:left; width:100%; line-height:30px; border-bottom:1px solid #ffffff }

.mytreefnt { font-size:14px; color:#000099;}



.bigBtn { margin: 38px 0 0 305px; float:left }
.arrowleft { position: absolute; margin: -124px 1px 2px -169px; }
.arrowright { position: absolute; margin: -124px 1px 2px 953px; }
.bigoveride { padding: 21px 0 0 68px; }
.bigoveride2 { padding: 21px 0 0 14px; width: 350px;  height: 350px; font-size:14px }
.bigoveride3 { padding: 21px 0 0 68px; width: 250px; }

/* Popups */

.popup { display: block; padding: 20px; float:left; text-align:center }
    .popup h2 { margin-bottom: 16px; color: #ffffff; font-size: 23px; line-height: 23px; border-bottom:1px solid #ffffff; padding-bottom:10px }
    
    .popup .loginform {  }
    .popup .closebtn { float: right; margin-top:-46px }
    .popup .prezleft { float: left; width: 150px; margin-right:15px; margin-bottom:15px }
        .popup .prezleft a:hover { opacity: 0.8; filter: alpha(opacity=80);}
    .popup .prezleft p {color:white; font-size:14px }
    .popup .blockimg { background-color: white; display:block; height:85px }

/* Presentation page*/

.usermain .prezcontent {width: 980px; margin: 20px auto 20px auto;}
.prezcontent .arrowleft { position: absolute; margin: 264px 1px 2px -130px; }
.prezcontent .arrowright { position: absolute; margin: 264px 1px 2px 993px; }
.numpages { float: right; width: 208px; }
#progressbar2{float:left;width: 208px;height: 15px;}

/* Certificates */

.usermain .certcontent { width: 900px; margin: 0px auto 0 auto; padding:20px 40px; background-image:url(../images/mainbluebg.gif); background-repeat:repeat-x; background-position:top; text-align:center; background-color:#41b8e4 }
    .usermain .certcontent h2 { font-size:62px; color:white; font-weight:700; margin:50px 0 0 0; border-bottom:1px solid #ffffff; line-height:62px; float:left; width:100%; padding-bottom:15px  }
    .usermain .certcontent p { font-size:28px; color:white; font-weight:300; margin:20px 0 30px 0; float:left; width:100%; line-height:30px }
.usermain .certcontent .CertTitle { color:#ffffff; font-size:18px; float:left; width:200px}
    .usermain .certcontent .inputholder { float: right; width: 650px; padding-bottom:10px;border-bottom: 1px solid white; margin-bottom:23px; text-align:left }
.usermain .certcontent .CertField { float: left; color: black; font-size: 14px; font-weight: bold; margin-right:20px; width:100% }
.usermain .certcontent h3 { float: left; width: 200px; font-size: 14px; font-weight:400}
    .usermain .certcontent .textbox {padding:5px; float:left; border:1px solid #acacac; background-image:url(../images/select_bg.gif); background-repeat:repeat-x; margin-bottom:5px; vertical-align:middle;font-family: 'Roboto', sans-serif; font-size: 14px; font-weight:300}
    .usermain .certcontent .loginbutton { background-image: url(../images/button1.png); width: 301px; height: 32px; text-align:center; color:#ffffff; padding:7px 0 0 0px;vertical-align:middle; font-family: 'Roboto', sans-serif;font-size:21px; display:block; margin-left:249px }

/*   video itc*/

.uservideo  { width: 940px; margin-left: auto; margin-right: auto;  }


    /* Questions */

    .usermain .questioncontent { width: 900px; margin: 0px auto 0 auto;height:531px; padding:20px 40px; background-image:url(../images/mainbluebg.gif); background-repeat:repeat-x; background-position:top; text-align:center }
    .usermain .questioncontent h2 { font-size:62px; color:white; font-weight:700; margin:50px 0 0 0; border-bottom:1px solid #ffffff; line-height:62px; float:left; width:100%; padding-bottom:15px  }
    .usermain .questioncontent p { font-size:28px; color:white; font-weight:300; margin:20px 0 30px 0; float:left; width:100%; line-height:30px }
.question {font-size:28px; color:white; font-weight:700;margin:10px 0; float:left; width:100%; line-height:30px }
    .questioncontent .arrowleft { position: absolute; margin: 264px 1px 2px -163px; }
.questioncontent .arrowright { position: absolute; margin: 264px 1px 2px 945px; }
  .questioncontent .loginbutton { background-image: url(../images/button1.png); width: 301px; height: 30px; text-align:center; color:#ffffff; padding:9px 0 0 0px;vertical-align:middle; font-family: 'Roboto', sans-serif;font-size:21px; margin-left:305px; float:left; margin-top:20px }


/*  Declaration Document*/

.userdocmain { width: 100%; margin: 0 auto; float: left; background:#ffffff; background-image:url(../images/blankdocument.png); background-repeat:no-repeat; background-position: center top; }
.userdocmain .usercontent { width: 980px; margin: 40px auto 0 auto;height:802px }
.userdocmain .summarycontent { width: 900px; margin: 0px auto 0 auto;height:802px; text-align:center; }
    .userdocmain .summarycontent h2 { font-size:30px; color:black; font-weight:700; padding-top:100px;  line-height:62px;  width:100%; padding-bottom:15px; text-align:center; }
    .userdocmain .summarycontent p { font-size:16px; color:black; font-weight:300;   width:40%; line-height:30px;text-align:left; }
    .userdocmain .summarycontent p.padding {padding-right: 210px; padding-left: 280px;  padding-bottom:150px;}        
    .userdocmain .summarycontent h3 { font-size:28px; color:black; font-weight:300; margin:20px 0 20px 0; float:left; width:100%; line-height:30px; border-bottom:1px solid #ffffff }
    
    .userdocmain .summarycontent h4 { font-size:14px; color:black; font-weight:300;   width:40%; line-height:30px;text-align:left; }
    .userdocmain .summarycontent h4.padding {padding-right: 210px; padding-left: 280px; }        

    .userdocmain .summarycontent h5 { font-size:11px; color:black; font-weight:300; width:40%; line-height:30px;text-align:left; }
    .userdocmain .summarycontent h5.padding {padding-right: 210px; padding-left: 280px; padding-bottom:50px;}   
    .userdocmain .summarycontent h6 {padding-right: 210px; padding-left: 280px; border-color:black; border:dotted; }


  /* Summary area */

.usermain .summarycontent { width: 900px; margin: 0px auto 0 auto;height:531px; padding:20px 40px; text-align:center }
    .usermain .summarycontent h2 { font-size:62px; color:white; font-weight:700; margin:50px 0 0 0; border-bottom:1px solid #ffffff; line-height:62px; float:left; width:100%; padding-bottom:15px  }
    .usermain .summarycontent p { font-size:28px; color:white; font-weight:300; margin:20px 0 20px 0; float:left; width:100%; line-height:30px; }
 
/* Results page */
  /* Summary area */

.usermain .resultcontent { width: 900px; margin: 0px auto 0 auto; padding:20px 40px; background-image:url(../images/mainbluebg.gif); background-repeat:repeat-x; background-position:top; text-align:center; background-color:#41b8e4}
    .usermain .resultcontent h2 { font-size:62px; color:white; font-weight:700; margin:50px 0 0 0; border-bottom:1px solid #ffffff; line-height:62px; float:left; width:100%; padding-bottom:15px  }
    .usermain .resultcontent p { font-size:20px; color:white; font-weight:300; margin:20px 0 20px 0; float:left; width:100%; line-height:30px; text-align:left }

/* Video Area*/
.videoholder { float: left; width: 980px; height: 570px; padding-top:30px; background-color: white; text-align: center; }



/*  capture photo*/

.userphoto { width: 100%; margin: 0 auto; float: left; background:#ffffff; background-image:url(../images/menuimage/certificatesvideo.png); background-repeat:no-repeat; background-position: center top; }
.userphoto .usercontent { width: 980px; margin: 40px auto 0 auto;height:802px }
.userphoto .summarycontent { width: 900px; margin: 0px auto 0 auto;height:802px; text-align:center; }
    .userphoto .summarycontent h2 { font-size:30px; color:black; font-weight:700; padding-top:100px;  line-height:62px;  width:100%; padding-bottom:15px; text-align:center; }
    .userphoto .summarycontent p { font-size:16px; color:black; font-weight:300;   width:40%; line-height:30px;text-align:left; }
    .userphoto .summarycontent p.padding {padding-right: 210px; padding-left: 280px;  padding-bottom:150px;}        
    .userphoto .summarycontent h3 { font-size:28px; color:black; font-weight:300; margin:20px 0 20px 0; float:left; width:100%; line-height:30px; border-bottom:1px solid #ffffff }
    
    .userphoto .summarycontent h4 { font-size:14px; color:black; font-weight:300;   width:40%; line-height:30px;text-align:left; }
    .userphoto .summarycontent h4.padding {padding-right: 210px; padding-left: 280px; }        

    .userphoto .summarycontent h5 { font-size:11px; color:black; font-weight:300; width:40%; line-height:30px;text-align:left; }
    .userphoto .summarycontent h5.padding {padding-right: 210px; padding-left: 280px; padding-bottom:50px;}   
    .userphoto .summarycontent h6 {padding-right: 210px; padding-left: 280px; border-color:black; border:dotted; }


    /* Chrome issue*/

.nodragmenow
{
    -moz-user-select: none;
    -webkit-user-select: none; /* this will work for QtWebKit in future */
    -webkit-user-drag: none;
}