﻿/* Trait Online */

body {}
img {border:0px;}
table, tr, td, th {border-spacing:0px; vertical-align:top;} 
body {font-size:62.5%; color:#000000; font-family:'Roboto', Arial, Helvetica, Verdana; padding:0px; margin:0px;}

/* Commonly Used */
h1 {font-family:Arial, Helvetica, Verdana; font-size:50px; line-height:50px; font-weight:bold; color:#cacaca; margin:0px 0px 20px 0px; text-transform:uppercase; padding:0px 0px 0px 20px; border-left:5px solid #ED9A1A;}
h2 {font-family:Arial, Helvetica, Verdana; font-size:50px; line-height:50px; font-weight:bold; color:#cacaca; margin:0px 0px 20px 0px; text-transform:uppercase; padding:0px 0px 0px 20px; border-left:5px solid #ED9A1A;}
h3 {font-family:Arial, Helvetica, Verdana; font-size:30px; line-height:30px; font-weight:bold; color:#e7601f; margin:0px 0px 20px 0px;}

a         {color:#222; text-decoration:none;}
a:hover   {text-decoration:underline;}
p a       {text-decoration:underline;}

p       {margin:0px 0px 12px 0px; font-size:20px; line-height:23px;}
ul      {margin:0px 0px 12px 16px; padding:0px;}
ol      {margin:0px 0px 12px 16px; padding:0px;}
ul li   {margin:0px 0px 6px 16px; font-size:20px; line-height:23px;}
ol li   {margin:0px 0px 6px 16px; font-size:20px; line-height:23px;}

.DebugBox       {position:fixed; top:0px; left:0px; border:solid 1px #ddd; background-color:#fff; font-size:11px; color:#000; padding:5px; z-index:1000; max-width:150px; opacity:0.9;}
.ui-datepicker  {z-index:100 !important;}
.BottomFix      {clear:both; height:0px; font-size:0px; line-height:0px;}

.LineSpacer1    {height:2px;  font-size:1px; clear:both;}
.LineSpacer2    {height:5px;  font-size:1px; clear:both;}
.LineSpacer3    {height:10px; font-size:1px; clear:both;}
.LineSpacer4    {height:15px; font-size:1px; clear:both;}
.LineSpacer5    {height:25px; font-size:1px; clear:both;}
.LineSpacer6    {height:40px; font-size:1px; clear:both;}
.LineSpacer7    {height:80px; font-size:1px; clear:both;}
.LineSpacer8    {height:200px; font-size:1px; clear:both;}

.LineSpacerR4   {margin-bottom:1.5%; height:0px; font-size:1px; clear:both; background-color:#afa;}

.ClassicWidthContent    {position:relative; max-width:1200px; margin:0px auto; padding:30px; min-width:280px; min-height:400px;}

/* Buttons */
.BtnStd                     {display:inline-block;}
.BtnStd a                   {background-image:url(/Content/Images/Icon_Btn.png); display:block; padding-left:68px; background-repeat:no-repeat; background-position:left; color:#b4b4b4; font-family:Arial, Helvetica, Verdana; font-size:20px; font-weight:bold; line-height:53px; background-color:inherit; border:none; cursor:pointer; text-transform:uppercase; text-decoration:none; -webkit-appearance:none;}
.BtnStd a:hover             {background-image:url(/Content/Images/Icon_Btn_Hover.png); color:#7e7e7e;}
.BtnStd input               {background-image:url(/Content/Images/Icon_Btn.png); display:block; padding-left:68px; background-repeat:no-repeat; background-position:left; color:#b4b4b4; font-family:Arial, Helvetica, Verdana; font-size:20px; font-weight:bold; line-height:53px; background-color:inherit; border:none; cursor:pointer; text-transform:uppercase; text-decoration:none; -webkit-appearance:none;}
.BtnStd input:hover         {background-image:url(/Content/Images/Icon_Btn_Hover.png); color:#7e7e7e;}
.BtnStd button              {background-image:url(/Content/Images/Icon_Btn.png); display:block; padding-left:68px; background-repeat:no-repeat; background-position:left; color:#b4b4b4; font-family:Arial, Helvetica, Verdana; font-size:20px; font-weight:bold; line-height:53px; background-color:inherit; border:none; cursor:pointer; text-transform:uppercase; text-decoration:none; -webkit-appearance:none;}
.BtnStd button:hover        {background-image:url(/Content/Images/Icon_Btn_Hover.png); color:#7e7e7e;}

/* Main structure */
.MainHeader                           {background-color:#ffffff;}
.MainHeader .WidthContent             {position:relative; max-width:1200px; margin:0px auto; padding:2px 20px; min-width:280px;}
.MainHeader .Logo                     {width:324px;}
.MainHeader .Logo img                 {display:block; width:100%;}

.MainContent                          {} 
.MainContent .WidthContent            {position:relative; max-width:1200px; margin:0px auto; padding:20px; min-width:280px; min-height:350px;}

.MainFooter                           {background-color:#323232;}
.MainFooter .WidthContent             {position:relative; max-width:1200px; margin:0px auto; padding:20px 20px; min-width:280px;}
.MainFooter .Links                    {float:left; padding:10px 0px;}
.MainFooter .Links ul                 {margin:0px;}
.MainFooter .Links .Item              {display:inline-block; padding-right:20px; margin-right:0px; border-right:1px solid #8a8a8a;}
.MainFooter .Links .Item:last-child   {padding-right:0px; margin-right:0px; border-right:none;}
.MainFooter .Links .Item a            {font-size:14px; line-height:17px; color:#ffffff; font-family:Arial, Helvetica, Verdana; text-decoration:none;}
.MainFooter .Developer                {font-size:14px; line-height:17px; color:#898989; font-family:Arial, Helvetica, Verdana; float:right;  padding:10px 0px;}
.MainFooter .Developer a              {font-size:14px; line-height:17px; color:#898989; font-family:Arial, Helvetica, Verdana;}

/* Form */
.GeneralInfoForm .Dropdown                      {display:inline-block; width:30%; vertical-align:top;}
.GeneralInfoForm .Dropdown .FormBox             {display:block; width:70%; margin-bottom:40px;}
.GeneralInfoForm .Questions                     {display:inline-block; width:69.7%; vertical-align:top;}

@media screen and (max-width:885px){

.GeneralInfoForm .Dropdown                      {display:block; width:100%;}
.GeneralInfoForm .Dropdown .FormBox             {display:block; width:100%; margin-bottom:40px;}
.GeneralInfoForm .Questions                     {display:block; width:100%;}

}

.FormBox                        {margin-bottom:20px;}
.FormBox .FormLabel             {font-size:14px; line-height:17px; font-weight:bold; color:#e7601f; font-family:Arial, Helvetica, Verdana; text-transform:uppercase; margin-bottom:10px;}
.FormBox .FormField             {}
.FormBox .LengthInfo            {font-size:14px; line-height:17px; color:#969696; margin-top:5px;}

.FormField .EditBox01           {width:100%; font-size:20px; line-height:25px; font-family:'Roboto', Arial, Helvetica, Verdana; font-weight:normal; color:#000000; padding:5px 5px 5px 5px; margin:0px; background-color:#f4f3f4; border:none; box-sizing:border-box; border-bottom:1px solid #d6d6d6;}
.FormField .DropDown01          {width:100%; font-size:20px; line-height:25px; font-family:'Roboto', Arial, Helvetica, Verdana; font-weight:normal; color:#000000; padding:5px 5px 5px 5px; margin:0px; background-color:#f4f3f4; border:none; box-sizing:border-box; border-bottom:1px solid #d6d6d6;}
.FormField .TextArea01          {width:100%; font-size:20px; line-height:25px; font-family:'Roboto', Arial, Helvetica, Verdana; font-weight:normal; color:#000000; padding:0px 0px 0px 0px;  margin:0px; background-color:#f4f3f4; border:none; box-sizing:border-box; border-bottom:1px solid #d6d6d6;}

.FormField .EditBox02           {width:100%; font-size:20px; line-height:25px; font-family:'Roboto', Arial, Helvetica, Verdana; font-weight:normal; color:#000000; padding:5px 5px 5px 5px; margin:0px; background-color:#F4F3F4; border:none; box-sizing:border-box; border-bottom:1px solid #d6d6d6;}
.FormField .DropDown02          {width:100%; font-size:20px; line-height:25px; font-family:'Roboto', Arial, Helvetica, Verdana; font-weight:normal; color:#000000; padding:5px 5px 5px 5px; margin:0px; background-color:#F4F3F4; border:none; box-sizing:border-box; border-bottom:1px solid #d6d6d6;}
.FormField .TextArea02          {width:100%; font-size:20px; line-height:25px; font-family:'Roboto', Arial, Helvetica, Verdana; font-weight:normal; color:#000000; padding:0px 0px 0px 0px;  margin:0px; background-color:#F4F3F4; border:none; box-sizing:border-box; border-bottom:1px solid #d6d6d6;}

.ValidationInfo                 {display:block; font-size:14px; line-height:17px; color:#e64343; padding:5px 0px  0px 0px; margin:0px;}
.ValidationMessage              {display:block; font-size:14px; line-height:17px; color:#e64343; padding:0px 0px 15px 0px; margin:0px; font-family:Arial,Helvetica,Verdana; text-transform:uppercase; font-weight:bold;}
.Asterisk                       {font-size:14px; line-height:17px; color:#e64343; padding-left:5px;}
.Denotes                        {font-size:14px; line-height:17px; color:#969696;}
  
.ForgottenPassword              {font-size:14px; line-height:17px; color:#969696;}

.ButtonBottom                     {margin-top:20px;}
.ButtonBottom .Denotes            {float:left; padding:20px 10px 0px 0px;}
.ButtonBottom .Denotes .Asterisk  {padding:0px 5px 0px 0px;} 
.ButtonBottom .BtnBottom          {float:right;}

.FormBoxColumn3                   {float:left; width:32%;}
.FormBoxColumn3Spacer             {float:left; width:2%; height:1px;}

.FormBoxColumn4                   {float:left; width:23%;}
.FormBoxColumn4Spacer             {float:left; width:2%; height:1px;}
.FormBoxColumn4SpacerBis          {float:left; width:2%; height:1px;}

/* iCheck Plugin Square skin, grey */
.CbxAndLabel            {position:relative; min-width:90px;}
.CbxAndLabel a          {color:#000; font-size:16px; line-height:19px;}
.CbxAndLabel input      {position:relative;}
.CbxAndLabel label      {color:#000; font-size:16px; line-height:19px; float:left; margin-left:10px;}
.RadioAndLabel          {position:relative;}
.RadioAndLabel input    {position:relative;}
.RadioAndLabel label    {color:#000; font-size:16px; line-height:19px; float:left; margin-left:10px;}

.icheckbox_square-grey, .iradio_square-grey {display:inline-block; margin:0; padding: 0; width:24px; height:24px; background: url(/Content/Images/grey.png) no-repeat; border: none; cursor: pointer;}

.icheckbox_square-grey                      {background-position: 0 0;}
.icheckbox_square-grey.hover                {background-position: -24px 0;}
.icheckbox_square-grey.checked              {background-position: -48px 0;}
.icheckbox_square-grey.disabled             {background-position: -72px 0; cursor: default;}
.icheckbox_square-grey.checked.disabled     {background-position: -96px 0;}

.iradio_square-grey                         {background-position: -120px 0;}
.iradio_square-grey.hover                   {background-position: -144px 0;}
.iradio_square-grey.checked                 {background-position: -168px 0;}
.iradio_square-grey.disabled                {background-position: -192px 0; cursor: default;}
.iradio_square-grey.checked.disabled        {background-position: -216px 0;}

.CBAndLabelTable                            {display:table; margin-bottom:15px;}
.CBAndLabelTable .CBCell                    {display:table-cell; vertical-align:middle; width:35px;}
.CBAndLabelTable .LabelCell                 {display:table-cell; vertical-align:middle;}
.CBAndLabelTable .LabelCell label           {font-size:16px;}
.CBAndLabelTable .LabelCell label:hover     {cursor:pointer;}

/* Error Page */
.ErrorPage                            {background-color:#ffffff;}
.ErrorPage .WidthContent              {position:relative; max-width:1200px; margin:0px auto; padding:60px 20px; min-width:280px; text-align:center;}
.ErrorPage .ImgError                  {display:inline-block; width:180px;}
.ErrorPage .ImgError img              {width:100%; display:block;}
.ErrorPage .TitleError                {font-size:30px; font-weight:bold; color:#dcdcdc; margin:0px 0px 10px 0px; padding-top:25px; text-transform:uppercase; padding:0px; border-left:none;}
.ErrorPage a                          {text-decoration:none;}

/* Home */
.TopHome                                        {background-color:#323232;}
.TopHome .WidthContent                          {position:relative; max-width:1200px; margin:0px auto; padding:0px 30px; min-width:280px;}
.TopHome .TableTopHome                          {display:table; width:100%;}
.TopHome .TableTopHome .CellTopHome             {display:table-cell; vertical-align:top;}
.TopHome .TableTopHome .CellTopHome01           {width:70%;}
.TopHome .TableTopHome .CellTopHome02           {width:30%;}
.TopHome .Logo                                  {width:324px; padding:2px 0px 0px 0px;}
.TopHome .Logo img                              {display:block; width:100%;}
.TopHome .TopBlock                              {border-left:5px solid #ed9a1a; margin:50px 40px 70px 0px; padding:0px 0px 0px 20px;}
.TopHome .TopBlock .BigTitle                    {font-size:70px; line-height:70px; color:#fff; text-transform:uppercase; margin-bottom:0px; padding:0px; border-left:none; padding:0px;}
.TopHome .TopBlock .BigTitle span               {font-size:40px;}
.TopHome .TopBlock .BigTxt                      {font-size:20px; line-height:23px; color:#fff;}
.TopHome .ImgABA                                {margin:30px 0px 0px 0px;}
.TopHome .ImgABA img                            {width:100%; display:block;}
.HomeContent                                    {background-image:url(/Content/Images/BG_HomeForm.gif); background-repeat:repeat-y; background-size:contain;}
.HomeContent .WidthContent                      {position:relative; max-width:1240px; margin:0px auto; padding:0px; min-width:320px;}
.HomeContent .TableHome                         {display:table; width:100%;}
.HomeContent .TableHome .CellHome               {display:table-cell;}
.HomeContent .TableHome .CellHome01             {width:70%;}
.HomeContent .TableHome .CellHome02             {width:30%; background-color:#f4f3f4;}
.HomeContent .ColumnRegister                    {padding:30px;}
.HomeContent .ColumnLogin                       {padding:30px;}
.HomeContent .SubTitle                          {margin-bottom:20px; color:#ed9a1a; padding:0px; border-left:none;}
.HomeContent .RememberMe                        {margin-bottom:20px;}
.HomeContent .RememberMe label                  {font-size:20px; line-height:23px; color:#7e7e7e; margin-left:10px; top:-5px; position:relative;}
.HomeContent .ForgottenPassword                 {margin-bottom:40px;}
.HomeContent .ForgottenPassword a               {font-size:20px; line-height:23px; color:#eb741f; text-decoration:none; -webkit-appearance:none;}
.HomeContent .ForgottenPassword a:hover         {color:#c0470c;}
.HomeContent .FormBoxHomeSpacer01               {float:left; width:2%;  height:10px}
.HomeContent .FormBoxHomeTitle                  {float:left; width:20%;}
.HomeContent .FormBoxHomeFirstName              {float:left; width:38%;}
.HomeContent .FormBoxHomeSurname                {float:left; width:38%;}
.HomeContent .FormBoxHomeTelephoneNumber        {float:left; width:26%;}
.HomeContent .FormBoxHomeEmailAddress           {float:left; width:35%;}
.HomeContent .FormBoxHomeConfirmEmailAddress    {float:left; width:35%;}
.HomeContent .FormBoxHomeCampaignCode           {float:left; width:65%;}

/* Contact Us */
.Contact                                        {}
.Contact .FormBoxContactSpacer01                {float:left; width:2%;  height:10px}
.Contact .FormBoxContactTitle                   {float:left; width:20%;}
.Contact .FormBoxContactFirstName               {float:left; width:38%;}
.Contact .FormBoxContactLastName                {float:left; width:38%;}
.Contact .FormBoxContactEmailAddress            {float:left; width:49%;}
.Contact .FormBoxContactPhoneNumber             {float:left; width:49%;}

/* PQTable */
.PQTable                                {display:table; width:100%;}

.PQTable .PQTopRow                      {display:table-row; font-family:Arial,Helvetica,Verdana; height:50px;}
.PQTable .PQTopRow .ColQuestion         {display:table-cell; width:50%; font-size:20px; line-height:23px; font-weight:bold; color:#323232; text-align:left;   text-transform:uppercase; vertical-align:middle; padding-right:2%;}
.PQTable .PQTopRow .Col1                {display:table-cell; width:8%;  font-size:14px; line-height:17px; font-weight:bold; color:#323232; text-align:center; text-transform:uppercase; vertical-align:middle;}
.PQTable .PQTopRow .Col2                {display:table-cell; width:8%;  font-size:14px; line-height:17px; font-weight:bold; color:#323232; text-align:center; text-transform:uppercase; vertical-align:middle;}
.PQTable .PQTopRow .Col3                {display:table-cell; width:8%;  font-size:14px; line-height:17px; font-weight:bold; color:#323232; text-align:center; text-transform:uppercase; vertical-align:middle;}
.PQTable .PQTopRow .Col4                {display:table-cell; width:8%;  font-size:14px; line-height:17px; font-weight:bold; color:#323232; text-align:center; text-transform:uppercase; vertical-align:middle;}
.PQTable .PQTopRow .Col5                {display:table-cell; width:8%;  font-size:14px; line-height:17px; font-weight:bold; color:#323232; text-align:center; text-transform:uppercase; vertical-align:middle;}
.PQTable .PQTopRow .ColSpacer           {display:table-cell; width:2%;}

.PQTable .PQRow                         {display:table-row; height:50px;}
.PQTable .PQRow .ColQuestion            {display:table-cell; width:50%; font-size:20px; line-height:25px; font-family:"Roboto",Arial,Helvetica,Verdana; font-weight:normal; color:#000; vertical-align:middle; padding:5px 2% 5px 0px;}
.PQTable .PQRow .Col1                   {display:table-cell; width:8%; text-align:center; vertical-align:middle; background-color:#f4f3f4;}
.PQTable .PQRow .Col2                   {display:table-cell; width:8%; text-align:center; vertical-align:middle; background-color:#f4f3f4;}
.PQTable .PQRow .Col3                   {display:table-cell; width:8%; text-align:center; vertical-align:middle; background-color:#f4f3f4;}
.PQTable .PQRow .Col4                   {display:table-cell; width:8%; text-align:center; vertical-align:middle; background-color:#f4f3f4;}
.PQTable .PQRow .Col5                   {display:table-cell; width:8%; text-align:center; vertical-align:middle; background-color:#f4f3f4;}
.PQTable .PQRow .ColSpacer              {display:table-cell; width:2%; background-color:#f4f3f4;}
.PQTable span.TitleTable                {display:none; font-size:12px; line-height:15px; font-weight:bold; color:#323232; text-align:center; text-transform:uppercase; font-family:Arial,Helvetica,Verdana; padding:5px 5px 0px 5px;}
.PQTable .Hr                            {display:block; height:1px; width:100%; background-color:#fff;}

.PQTable .PQRow:nth-child(4n+0) .Col1            {background-color:#ffffff;}
.PQTable .PQRow:nth-child(4n+0) .Col2            {background-color:#ffffff;}
.PQTable .PQRow:nth-child(4n+0) .Col3            {background-color:#ffffff;}
.PQTable .PQRow:nth-child(4n+0) .Col4            {background-color:#ffffff;}
.PQTable .PQRow:nth-child(4n+0) .Col5            {background-color:#ffffff;}
.PQTable .PQRow:nth-child(4n+0) .ColSpacer       {background-color:#ffffff;}

.PQTable .PQValidationHighlighted .ColQuestion      {background-color:#ffcaca !important; padding:5px 2% 5px 2%;  width:48%;}
.PQTable .PQValidationHighlighted .Col1             {background-color:#ff9f9f !important;}
.PQTable .PQValidationHighlighted .Col2             {background-color:#ff9f9f !important;}
.PQTable .PQValidationHighlighted .Col3             {background-color:#ff9f9f !important;}
.PQTable .PQValidationHighlighted .Col4             {background-color:#ff9f9f !important;}
.PQTable .PQValidationHighlighted .Col5             {background-color:#ff9f9f !important;}
.PQTable .PQValidationHighlighted .ColSpacer        {background-color:#ff9f9f !important;}


/* Progress Bar */
.ProgressBar                              {float:right; margin:15px 0px 0px 20px;}
.ProgressBar .ProgressBlock               {display:inline-block; margin-left:2px; width:20px; height:20px;}
.ProgressBar .ProgressEmpty               {background-color:#F4F3F4;}
.ProgressBar .ProgressFull:nth-child(1)   {background:#ed7f20;}
.ProgressBar .ProgressFull:nth-child(2)   {background:#e7601f;}
.ProgressBar .ProgressFull:nth-child(3)   {background:#ed7f20;}
.ProgressBar .ProgressFull:nth-child(4)   {background:#ed9a1a;}
.ProgressBar .ProgressFull:nth-child(5)   {background:#e7601f;}
.ProgressBar .ProgressFull:nth-child(6)   {background:#ed9a1a;}
.ProgressBar .ProgressFull:nth-child(7)   {background:#e7601f;}
.ProgressBar .ProgressFull:nth-child(8)   {background:#ed7f20;}
.ProgressBar .ProgressFull:nth-child(9)   {background:#ed9a1a;}
.ProgressBar .ProgressFull:nth-child(10)  {background:#e7601f;}

/* Table Origin */
.TableOrigin                                                  {display:table; width:100%; font-size:20px; line-height:23px;}
.TableOrigin .RowOrigin                                       {display:table-row;}
.TableOrigin .RowOrigin .CellOrigin                           {display:table-cell; vertical-align:top;}
.TableOrigin .RowOrigin .CellOrigin01                         {width:280px;}
.TableOrigin .RowOrigin .CellOrigin02                         {padding-bottom:20px;}
.TableOrigin .RowOrigin .CellOrigin .AnswerOrigin             {display:inline-block; margin-right:20px; margin-bottom:20px;}
.TableOrigin .RowOrigin .CellOrigin .AnswerOrigin label       {top:-4px; position:relative; margin-left:10px;}
.TableOrigin .RowOrigin .CellOrigin .AnswerOriginSpecial      {display:block; margin-bottom:0px;}
.TableOrigin .RowOrigin .CellOrigin .FormFieldOrigin          {width:200px;}

