/**
 * ###############################################################################
 *  Initialize the css
 * ############################################################################### 
 */
html{background:none repeat scroll 0 0#FFFFFF;color:#000000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;line-height:1.5em;color: rgb(48, 48, 48);-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
table{border-collapse:collapse;border-spacing:0; width:100%;}
fieldset,img{border:0 none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:"";}
abbr,acronym{border:0 none;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{}
legend{color:#000000;}
body{font:12px/1.231 arial,helvetica,clean,sans-serif;}
select,input,button,textarea{font:99%arial,helvetica,clean,sans-serif;}
table{font-size:inherit;}
pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
a{text-decoration:none;cursor:pointer;}
a:hover,a:focus{text-decoration:none;}
strong{font-weight:bold;}
input[type="submit"]{cursor:pointer;}
button{cursor:pointer;} 
body { overflow-y:scroll; color:#303030; }
th {font-weight: bold;}
.SimpleBody p { margin-bottom:10px; display:block; }
.pointer-cursor{ cursor:pointer }
/**
 * ###############################################################################
 *  General classes
 * ############################################################################### 
 */
.center             {   margin: 0 auto;                 }
.fullWidth          {   max-width:1200px;width:100%;    }
.zero-margin        {   margin:0;                       }
.margin-top-10      {   margin-top:10px;                }
.margin-top-50      {   margin-top:50px;                }
.margin-bottom-5    {   margin-bottom:5px;              }
.margin-bottom-10   {   margin-bottom:10px;             }
.margin-bottom-20   {   margin-bottom:20px;             }
.button-width-160   {   min-width:160px;                }
#MainBody .zero-padding        {   padding:0px;         }
.padding-bottom-10  {   padding-bottom:5px;             }
.padding-top-10     {   padding-top:10px;               }
.padding-bottom-20  {   padding-bottom:20px;            }
.padding-20         {   padding:20px;                   }
.boldText           {   font-weight: 700; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; }
.gray-border-bottom {   border-bottom:solid 1px #D6D6D6;}
.gray-border-top    {   border-top:solid 1px #D6D6D6;   }
.padder             {   padding:2%;  padding-top:0;     }
.padder table       {   width:100%;                     }
#MainBody .large-text       {   font-size: 2.454em;     }
#MainBody .big-text         {   font-size: 1.454em;     }
#MainBody .normal-text      {   font-size: 1em;         }
#MainBody .small-text       {   font-size: 0.95em;      }
#MainBody .extra-small-text {   font-size: 0.85em;      }
#MainBody .tiny-text        {   font-size: 0.75em;      }
.shadow                     { box-shadow: 3px 3px 8px #2E2E2E; }
/**
 * ###############################################################################
 *  Site colors
 * ############################################################################### 
 */
#MainBody h1,
p.headline, 
.Footer h1, 
#MainBody h2,
.headline2, 
.Footer h2,
#MainBody a,
.blue-color,
#SiteMainNavigation a:hover p,
#SiteMainNavigation a.main-menu-active-link p,
#sideMenu  a.active-sidemenu-link,
#sideMenu a:hover,
.TabElementSelected {
    color: rgb(24, 116, 205); 
}
#MainBody a:hover{  
    color: rgb(16, 78, 139);   
}
.TabElementSelected{
    border-bottom:solid 4px #E5E5E5;
}
p.textbig {
    font-size: 140%;
    margin-top: 2px;
    margin-bottom: 8px;
}
div.helpboxTop,
button,
a.button,
input[type="submit"],
input[type="button"],
.upload-form-header,
#Navigation {
    background-color: rgb(24, 116, 205);
}
button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: rgb(16, 78, 139);
}
input.passive-button {
    background-color: rgb(255, 255, 255) !important;
}
body input.passive-button:hover, 
body .passive-button:hover {
    background-color: rgb(225, 225, 225) !important;
}
.TabElement, 
.TabElementSelected{
    border-bottom:solid 4px #E5E5E5;
}
.TabElementSelected {
    border-color: #3366cc;
}
/**
 * ###############################################################################
 *  Default styles
 * ############################################################################### 
 */
#MainBody h1, .Footer h1, #MainBody h2, .Footer h2, p.headline, .headline2 { 
    font-size:1.4em; font-weight: 700;
}  
#MainBody h4 {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px dotted rgb(174, 164, 156);
    color: rgb(78, 68, 60);
    font-size: 100%;
    font-style: italic;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom:10px;
}
#MainBody h2,.Footer h2 { font-size: 1.1em; }
#MainBody h3,.Footer h3, #MainBody h4,.Footer h2  { font-size: 1.0em; font-weight:700; }
#MainBody h4,.Footer h2 { font-weight:500; }
#MainBody h1,
.Footer h1, 
#MainBody h2, 
.headline2,
.Footer h2,
#MainBody h3, 
.Footer h3,
#MainBody h4 
.Footer h4,
p.headline { 
    padding:7px 0;
}
#MainBody strong,
#MainBody b { font-weight: 700;}
#MainBody ul{ margin-left: 1em;}
#MainBody ul li{ padding-top:1px;padding-bottom:1px;}
ul.colored {
    list-style: none;
    margin:0px !important;
}
ul.colored li { 
    background:url(./IMAGES/bulletpoint.png) 0 center no-repeat;
    padding-left:10px;
}
.weakPass { 
    color: rgb(255, 0, 0);
    display: none;
    font-weight: 700;
}
/**
 * ###############################################################################
 *  Layout
 * ############################################################################### 
 */
.MainBody{
    min-height:400px;
    margin-top:30px;
}
#messagesContainer {
    margin-top:20px;
}
#SessionTimeout{
    text-align:center;
    color:#7D7D7D;
    font-weight: 700;
    font-size: 0.85em;
    text-indent: 2em;
}
/*
#########################################################################
    Desktop and Tablets
#########################################################################
*/
@media 
screen and (min-width: 1025px),
screen and (min-width: 768px) and (max-width: 1024px) {
    #SiteMainNavigation div {
        height:60px; 
    }
    .nav-logo {
        /**/
    }
    #logoWrapper {
        position:relative;
    }
    #logoWrapper #logo {
        position:absolute;
        top:12px;
        left:15px; 
        background-image: url("./IMAGES/regify_logo_default.png"); 
        width:130px;
        height:47px;
    }
    #Navigation div,
    #SiteMainNavigation div {
        overflow:visible;
    }
    #SiteMainNavigation #logoBackground {
        text-align:left;
    }
    #SiteMainNavigation a div.textContainer {
        display: table;
        width:100%;
    }
    #SiteMainNavigation a div.textContainer div {
        display: table-cell; 
        vertical-align: middle;
    }
    #SiteMainNavigation a div.textContainer div span{
        border-right:solid 1px rgb(255, 255, 255);
    }
    #SiteMainNavigation a div.textContainer div span {
        border-right:solid 0px rgba(255, 255, 255, .4);
        display:inline-block;
        width:100%;
        padding-top:30px;
    }
    .nav-send-message span{
        background-image: url("./IMAGES/main_menu_messages.png");    
    }
    .nav-communication span{
        background-image: url("./IMAGES/main_menu_communicate.png");
    }
    .nav-invite span{
        background-image: url("./IMAGES/main_menu_invite.png");
    }
    .nav-logout span{
        background-image: url("./IMAGES/main_menu_logout.png");
    }
    .nav-account span{
        background-image: url("./IMAGES/main_menu_account.png");
    } 
    a.main-menu-active-link .nav-send-message span, 
    a:hover .nav-send-message span{
        background-image: url("./IMAGES/main_menu_messages_over.png");    
    }
    a.main-menu-active-link .nav-communication span,
    a:hover .nav-communication span{
        background-image: url("./IMAGES/main_menu_communicate_over.png");
    }
    a.main-menu-active-link .nav-invite span, 
    a:hover .nav-invite span{
        background-image: url("./IMAGES/main_menu_invite_over.png");
    }
    a.main-menu-active-link .nav-logout span,
    a:hover .nav-logout span{
        background-image: url("./IMAGES/main_menu_logout_over.png");
    }
    a.main-menu-active-link .nav-account span,
    a:hover .nav-account span{
        background-image: url("./IMAGES/main_menu_account_over.png");
    } 
    /* Side menu */
    #sideMenu {
        border-right:solid 1px #D6D6D6;
    }
    #sideMenu {
    min-height:200px;
    padding-bottom:20px;
    }
    #sideMenu div {
        margin-top:15px;
    }
    #sideMenu ul{
        margin-left: 22px;
        margin-top: 4px;
    }
    #sideMenu ul li {
        font-size:0.9em;
    }
    #sideMenu .collapsed {
        display:none;
    }
    #sideMenu a.submenu-icon {
        background-image: url("./IMAGES/toggle_small_expand.png");
        background-repeat: no-repeat;
        padding-left:20px !important;
        background-position:0 center;
        border-left: 0px !important;
    }
    #sideMenu a.collapse-icon {
        background-image: url("./IMAGES/toggle_small.png");
    }
    #sideMenu ul li {
        padding:5px 0;
    }
}
/*
#########################################################################
    Mobile phone section
#########################################################################
*/
/* Landscape */
.show-on-portrait{
    display:none;   /* Only work on mobile phones*/
}
@media 
screen and (max-width: 767px) and (orientation:landscape) {
    .upload-form-container {
        margin-top:15% !important;
    }
    .hide-on-landscape {
        display:none;
    }
    .show-on-landscape {
        display:initial;
        background-color:red;
    }
}
@media 
screen and (max-width: 767px) and (orientation:portrait) {
    .hide-on-portrait {
        display:none;
    }
    .show-on-portrait {
        display:initial;
        background-color:black;
    }
}
@media 
screen and (max-width: 767px) {
    div#MainBody #sideMenu div.display-menu-on-mobile {
        display:block;
    }
    .nav-logo {
        /* background-image: url("./IMAGES/menu_icon_logo_small.png"); */
        height:30px;
    }
    .nav-send-message span{
        background-image: url("./IMAGES/main_menu_messages.png");    
    }
    .nav-communication span{
        background-image: url("./IMAGES/main_menu_communicate.png");
    }
    .nav-invite span{
        background-image: url("./IMAGES/main_menu_invite.png");
    }
    .nav-logout span{
        background-image: url("./IMAGES/main_menu_logout.png");
    }
    .nav-account span{
        background-image: url("./IMAGES/main_menu_account.png");
    } 
    a.main-menu-active-link .nav-send-message span, 
    a:hover .nav-send-message span{
        background-image: url("./IMAGES/main_menu_messages_over.png");    
    }
    a.main-menu-active-link .nav-communication span,
    a:hover .nav-communication span{
        background-image: url("./IMAGES/main_menu_communicate_over.png");
    }
    a.main-menu-active-link .nav-invite span, 
    a:hover .nav-invite span{
        background-image: url("./IMAGES/main_menu_invite_over.png");
    }
    a.main-menu-active-link .nav-logout span,
    a:hover .nav-logout span{
        background-image: url("./IMAGES/main_menu_logout_over.png");
    }
    a.main-menu-active-link .nav-account span,
    a:hover .nav-account span{
        background-image: url("./IMAGES/main_menu_account_over.png");
    } 
    #SiteMainNavigation a div.textContainer div span {
        overflow:hidden;
        display:inline-block;
        height:30px;
        min-width:35px;
        background-position:center 3px;
    }
    .MainBody{
        margin-top:0;
    }
    .phpLogin .MainBody{
        margin-top:50px;
    }
    /* Footer */    
    .Footer .grid-25 div,
    .Footer .grid-15 div {
        margin-top:0;
        margin-bottom:10px;
    }
    /* Side menu*/
    #sideMenu {
        background-color:black;
    }
    #sideMenu #menuElements {
        display:none;
    }
    #sideMenu #menuElements div{
        /*display:none;*/
        padding:8px 0px;
        border-bottom: solid 1px gray;      
        background-color:#212121;  
    }
    body #sideMenu a {
        color:#EBEBEB;
        padding-left:5px;
    }
    body #sideMenu a.active-sidemenu-link {
        font-weight:700;
        color:white;
    }
    body #sideMenu a:hover {
        color:silver;
    }   
    
    #SessionTimeout{
        text-indent: 1em !important;
    }
}
/*
#########################################################################
    Main menu
#########################################################################
*/
#logoBackground img{
    position:relative;
    left:0;
    top:-5px;
}
#sideMenu ul{
    list-style: none;
}
#SiteMainNavigation div a {
    display:block; 
    width:100%;
    transition: background-color 0.5s ease;
}
#SiteMainNavigation div a p {
    color:white;
}
#SiteMainNavigation div a {
    font-weight:700;
}
#navigation-wrapper{
    background-image:url("./IMAGES/menu_background.png");
    background-position: center;
    background-repeat: repeat-y;
}
#SiteMainNavigation {
    overflow:hidden;
}
#SiteMainNavigation div {
    text-align: center;   
}
.nav-entry {
    background-repeat: no-repeat;  
    background-position:0 center;  
}
.nav-entry span {
    background-repeat: no-repeat;  
    background-position:center 4px;  
}
#SiteMainNavigation a:hover {
    color:black;
    background-color:white;
    transition: background-color 0.5s ease;
}
.TopNavigation {
    display:none;
}
.mobile-control {
    position:relative;
    height:100%;
    overflow:auto;
    height:25px;
}
body #SiteMainNavigation .mobile-control a{
    display:inline-block;
    width:22px;
    height:19px;
    float:left;
    margin-left:5px;
    margin-top:5px;
}
body #SiteMainNavigation .mobile-control a:hover{
    background-color: transparent;
}
#SiteMainNavigation a.main-menu-active-link{
    background-color:white;
}
/*
#########################################################################
    Footer
#########################################################################
*/
.Footer{
    margin-top:50px;
    background: rgb(240, 240, 240);
    padding:15px;
}
.Footer .non-images a,
.Footer span { 
    clear:both;
    display:block;
    font-size: 0.904em;
    line-height: 1em;
    color:#2E2E2E;
}
.Footer span:first-child{
    padding-top:0;
}
.Footer span{
    padding:3px 0px;
}
.Footer .non-images a:hover {
    color:#000080;
}
.Footer .non-images a + a{
    margin-top:5px;
}
.Footer h3{
    color:#666666;
}
.Footer .grid-parent .grid-parent div {
    margin-top:2px;
}
/*
#########################################################################
    Tabs
#########################################################################
*/
.TabElement {
    font-size: 0.9em;
    color:#545454;
}
.TabElement, 
.TabElementSelected{
    padding:5px 15px;
    display: inline-block;
    margin-right:20px;
    cursor:pointer;
}
.TabElementSelected {
    font-weight: 700;
}
.TabContent {
    margin-top:5px;
    padding: 8px;
}
.TabContent table{
    width:100%;
}
.TabHeader {
    margin-bottom: 10px;
}
.ScrollList {
    overflow-y:scroll;
    max-height:320px;
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
}
.ScrollList table {
    width:100%;
}
.TabContentPaneSelected,
.TabContentPane {
    width:100%;
}
.TabContentPaneSelected {
    display:inline-block;
}
.TabContentPane {
    display:none;    
}
/*
#########################################################################
    Forms
#########################################################################
*/
form table {
    width:100%;
    border:0;
}
form label {
    margin-top:10px;
    margin-bottom:5px;
    display:inline-block;
}
input[type="text"],
input[type="password"],
textarea,
select {
    width:100%;
    display:inline-block;
    border:solid 1px #ABABAB;
    margin: 5px 5px 5px 0px;
    padding: 5px 1%;
    background-color: white;
}
.TabContent input[type="text"],
.TabContent input[type="password"],
.TabContent select {
    /* border:0; */
}
button,
a.button,
input[type="submit"],
input[type="button"] {
    font-weight:700;
    padding: 5px 30px;
    text-decoration: none;
    border:0;
    border-radius: 2px;
    color: rgb(255, 255, 255) !important;
    cursor: pointer;
    display: inline-block;
    outline: 0 none;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);        
}
button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    color: rgb(255, 255, 255) !important;
}
input.passive-button {
    border: 2px solid rgb(24, 116, 205) !important;
    color: rgb(24, 116, 205) !important;
}
input.passive-button:hover, 
.passive-button:hover {
    color: rgb(24, 116, 205) !important;
}
div.Mandatory {
    color: rgb(0, 75, 192);
    display: inline-block;
    font-size: 120%;
    height: 10px;
    vertical-align: top;
    width: 8px;
    margin-left: 4px;
}
div.BubbleHelp {
    background-image: url("IMAGES/ico_Help_small.png");
    border: 0 none;
    display: inline-block;
    height: 16px;
    text-rendering: optimizelegibility;
    text-shadow: 1px 1px 1px rgb(255, 255, 255);
    vertical-align: middle;
    width: 16px;
}

div.helpbox {
    background-color: rgba(0, 0, 0, 0);
    border: 0 none;
    display: inline;
    height: auto;
    position: absolute;
    max-width: 330px;
    visibility: visible;
}

div.helpboxTop {
    border: 0px solid white;
    border-radius: 2px;
    box-shadow: 0px 0px 14px rgb(51, 51, 51);
    color: rgb(255, 255, 255);
    font-size: 0.9em;
    padding: 8px;
    text-align: left;
}
/*
#########################################################################
    Messages
#########################################################################
*/
div.ErrorBox {
    background-color: rgb(205, 0, 0);
    color: white;
    font-size: 1.0em;
    font-weight:500;
    margin-bottom: 10px;
    margin-top: 5px;
    padding: 20px 10px 20px 50px;
    background-image: url("IMAGES/warning.png");
    background-repeat: no-repeat;
    background-position: 10px 15px;
}
div.ErrorBox a{
    color:#FFF68F;   
}
div.ErrorBox a:hover{
    color:#FFD700;
}
.InfoBox, .InfoBoxSmall, .WarningBox, .GreenBox, .ImportantBox {
    padding: 10px 10px 10px 50px;
    background-color:rgb(214, 232, 255);
    font-size: 1.0em;
    font-weight:500;
    background-image: url("IMAGES/help.png");
    background-repeat: no-repeat;
    background-position: 10px 12px;
    min-height: 50px;
}
.WarningBox {
    background-color:rgb(255, 215, 100);
    background-image: url("IMAGES/warning.png");
}
.GreenBox {
    background-color:rgb(170, 245, 170);
    background-image: url("IMAGES/warning.png");
}
.ImportantBox {
    background-color: white;
    background-image: url("IMAGES/note_password.png");
    background-position: right 190px center;
    border: 6px solid #cd2626;
    font-size: 160%;
    padding-left: 20px;
}
.InfoBoxSmall {
    background-image: url("IMAGES/information_small.png");
    background-position: 6px 6px;
    padding: 4px 4px 4px 24px;
    min-height: 20px;
    display: inline-block;
}
.dialogbox, 
.InfoBox, .InfoBoxSmall, .WarningBox, .GreenBox, .ImportantBox {
    box-shadow: 0 6px 4px -5px rgb(85, 85, 85);
}
.dialogbox{
    border:solid 3px rgb(45, 114, 200);
}
/*
#########################################################################
   Side menu
#########################################################################
*/
#sideMenu a {
    color:#303030;
}
#sideMenu  a.active-sidemenu-link {
    font-weight:700;
    border-left: 8px solid rgb(24, 116, 205);
    padding-left: 5px;
}
.underline-links,
.underline-links a{
    text-decoration: underline;
    font-size: 11px;
}
#MainBody a.secondary-links,
#MainBody .secondary-links a{
    color:#707070;
}
#MainBody a.main-links,
#MainBody .main-links a{
    font-weight:700;
}
#MainBody div.main-links{
    margin-top:5px;
}
#MainBody .secondary-links a:hover,
#MainBody a.secondary-links:hover{
    color:#242424;
}
/*
#########################################################################
   Login page
#########################################################################
*/
#loginSoftwareDownloadContainer,
#loginRegisterationContainer,
#loginAddEmailContainer {
    padding-left:50px;
    background-repeat: no-repeat;
    padding-bottom:16px;
    background-position:0 12px;
}
#loginSoftwareDownloadContainer {
    background-image: url("./IMAGES/software_download.png");
}
#loginRegisterationContainer {
    background-image: url("./IMAGES/account_create.png");
}
#loginAddEmailContainer {
    background-image: url("./IMAGES/email_add.png");
}
body.phpLogin #MainBody {
    min-height:440px;
} 
#regibill-html5-on,
#upload-html5-on {
    width:100%;
}

.openIDLink {
    display: inline-block;
    background-image: url("./IMAGES/openid.png");   
    background-repeat: no-repeat;
    background-position: 2px center;
    background-size: auto 16px;
    padding: 2px 4px 2px 22px;
    background-color: white;
    height: 18px;
    border-radius: 4px;
}

.openIDLogo {
    background-image: url("./IMAGES/openid.png");
    background-position: center center;
    background-repeat: no-repeat;
    display: inline-block;
    min-height: 180px;
    width: 100px;
    margin-left: 10px;
}

/*
#########################################################################
   Table
#########################################################################
*/
.styledTable {
    border: 1px solid rgb(208, 208, 208);
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 90%;
    font-weight: normal;
    width:100%;
    background-color: #F7F7F7;
}
.styledTable thead tr {
    /* standard table class with border and header */
    background-color: rgb(255, 255, 255);
    background-image: url("IMAGES/Background_TableHeader.gif");
    background-repeat: repeat-x;
    color: rgb(68, 68, 68);
    font-size: 100%;
    font-style: normal;
    font-weight: 700;
    height: 22px;
    text-rendering: optimizelegibility;
    text-shadow: 1px 1px 1px rgb(255, 255, 255);
    white-space: nowrap;   
}
.styledTable tbody tr {
    border-bottom: 1px solid rgb(208, 208, 208);
}
.styledTable td {
    padding: 2px;   
}
.styledTable td,
.styledTable th {
    padding-left:4px;
}
.tableUserChoice {
    background-color: rgb(244, 244, 244);
    border: 1px solid rgb(153, 153, 153);
    box-shadow: 3px 3px 3px rgb(170, 170, 170);
    padding: 5px;
    vertical-align: top;
}
.listfirst {
    background-color: rgb(244, 244, 244);
}
.listsecond {
    background-color: rgb(255, 255, 255);
}
.listregichat {
    background-image: url("IMAGES/ico_regichat.png");
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 18px;
}
.listinvalid {
    background-color: rgb(255, 238, 238);
    color: rgb(153, 51, 51);
    text-decoration: line-through;
}
.listfirst:hover, .listsecond:hover, .listinvalid:hover {
    background-color: rgb(245, 243, 177);
}
.arrow_open, .arrow_close {
    background-image: url("IMAGES/toggle_small.png");
    background-position: 3px 3px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.arrow_open td, .arrow_close td {
    font-weight: 700;
    padding-bottom: 3px;
    padding-left: 18px;
}
.arrow_close {
    background-image: url("IMAGES/toggle_small_expand.png");
}
div.chatSessionCode {
    background: none repeat scroll 0 0 rgb(255, 255, 255);
    border: 2px solid rgb(128, 128, 128);
    box-shadow: 3px 3px 3px rgb(170, 170, 170);
    display: inline-block;
    font-size: 150%;
    margin: 10px 0px;
    overflow: hidden;
    padding: 3px;
    text-align: center;
    vertical-align: middle;
    width: 200px;
}
/*
#########################################################################
   Group container
#########################################################################
*/
.groupContainer {
    padding:10px;
    box-sizing:border-box;
}
.groupContainer img {
  -webkit-filter: drop-shadow(2px 2px 1px rgba(255, 255, 255, 1));
  filter: drop-shadow(2px 2px 1px rgba(255, 255, 255, 1));
}
#MainBody .groupContainer .BoxHeader h2{
    color:rgb(255, 255, 255);
    text-align: center;
}
/*
#########################################################################
   Page navigation
#########################################################################
*/
div.PageNavigation, 
div.PageNavigationSelected {
    border-left: 0px solid black;
    border-right: 0px solid black;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    padding: 0px 2px 0px 2px;
    margin: 0px 2px 0px 2px;
    text-align: center;
    background-color: #F0F0F0;
    width: auto;
    position: relative;
    display: inline;
}
div.PageNavigationSelected {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 0px solid black;
    border-right: 0px solid black;
}
div.PageNavigationSurround {
    text-align: center;
    width: 100%;
    border: 0px solid red;
    padding: 0px;
    margin: 0px;
    clear: both;
}
/*
#########################################################################
   Fixes for the transaction page
#########################################################################
*/
body.phpTransactions #contentArea table {
    width:100%;
}
body.phpTransactions #contentArea table td {
    vertical-align: middle;
}
/*
#########################################################################
   Simple header css
#########################################################################
*/
html {
    margin: 0;
    height: 100%;
}
div.SimpleBody {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(112, 112, 144);
    height: auto;
    margin-bottom: 0;
    margin-top: 10px;
    padding: 10px;
    width: auto;  
}
/**
 * Information box used to display data in the account summary page
 */
.information-box tr td:first-child {
    width:30%;
}
.information-box tr td:nth-child(2) {
    width:25%;
}
.information-box tr td:nth-child(3) {
    width:45%;
}
.information-box h2,
.underlineheaders2 h2 {
    color:#636363;
    border-bottom:solid 2px #D6D6D6;
    width:100%;
}
.information-box table + h2 {
    margin-top:10px;
}
.information-box table td {
    padding:3px 0;
}
.information-box table td:first-child {
    padding-right:10px;
    font-weight: 700;
    color:#404040;
    width:auto;
}
.align-right{
    text-align:right;
}
.information-box table.no-margin + h2{
    margin:0;
}
#MainBody span.heighlight-red,
#MainBody span.heighlight-green {
    background-color:#998888;
    color:white;
    font-weight:700;
    padding:2px 5px;
    text-align:center;
    border-radius:3px;
}
#MainBody span.heighlight-green {
    background-color:#458B00;
}
.information-box .controls {
    text-align: right;
}
/**
 * registeration page
 */
.phpSignUpMember table td:first-child {
    width:49%;
}
.phpSignUpMember table td:first-child + td { 
    width:2%; 
}
.phpSignUpMember h2{
    margin-top:5px;
}
/*
#########################################################################
    Shopping page classes and styles
#########################################################################
*/
#MainBody .shop-form h1 {
    /* shop header */
    border-bottom: 1px solid #c0c0c0;
    font-size: 1.2em;
    padding: 6px 0px 4px 0px;
    margin-bottom: 4px;
}
.shop-warning {
    display: none;
    background-color: #FF8080;
    border-radius: 5px;
    padding: 5px;
}
/*
#########################################################################
    Symbolic classes and styles
#########################################################################
*/
.icoDelete {
    background-color: red;
    background-image: url("IMAGES/ico_small_delete.png");
    background-repeat: no-repeat;
    border: 0 none;
    border-radius: 3px;
    display: inline-block;
    height: 16px;
    vertical-align: middle;
    width: 16px;
}
/**
 * Gray container 
 */
#overlayContainer,
.overlayContainer {
    width:100%;
    height:100%;
    background:url("IMAGES/dimm.png");
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
}
/**
 * Upload dialog
 */
.upload-form-container {
    background-color: rgb(255, 255, 255);
    margin:0 auto;
    margin-top:25%;
    padding: 0;
    position: relative;
    vertical-align: text-top;
    z-index: 99999;
}

body.phpSignUpOptions .upload-form-container {
    min-height: 140px;    
}


.upload-form-header {
    padding: 0 10px;
}
.upload-form-header span,
.upload-form-header div {
    display: inline-block; 
    color:white;
}
.upload-form-header span {
    font: bold 12px arial;
    width:70%;
    padding:7px 0px;
    display:inline-block;
}
.upload-form-header div {
    width:30%;
    text-align:right;
}
#upload-form-close-icon {
    display: inline-block;
    position: relative;
    top: 1px;
}
.upload-information {
    padding: 0 3%;
}
.form-content #submit-button {
    margin-top:10px;
}   
.percentage,
#progressouter {
    margin-top:10px;
}
/*
#########################################################################
   Upload zone
#########################################################################
*/
.document-uploader {
    padding-top:10px;
    margin-top:10px;
    font-size:0.9em;
}
.document-uploader #regibill-html5-on div,
.document-uploader #upload-html5-on div,
#upload-no-html5 div,
#upload-drop-zone{
    background-color: rgb(240, 240, 240);
    margin-top:10px;
    height:80px;
    background-image: url("./IMAGES/cloud.png");
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    border:solid 1px rgb(45, 114, 200);
}
#upload-drop-zone {
    background-color:rgb(240, 240, 240);
    background-position: center 10px; 
}
.document-loader, .multiupload-regibill-loader, #progress-bar div {
    background-image: url("IMAGES/progress_greencolorbar.png");
    background-position: 0 -10px;
    height: 4px;
    width: 0;
}
#progress-bar div {
    height: 5px;
}
#mix-mode-upload-zone .document-loader, .multiupload-regibill-loader {
    height: 4px;
}
.document-uploader span {
    color: rgb(128, 128, 128);
    font-weight: 700;
}
#upload-drop-zone {
    position:relative;
}
#upload-drop-zone span {
    position:absolute;
    padding:0;
    bottom: 2px;
    left:0;
    display:block;
    text-align: center;
    width:100%;
}
.field_error{
    font-weight:700;
    color:#CD3333;
    display:block;
}
span#upload-login-in{
    color:#008B45;
    font-size:1.1em;
    padding-top:5px;
}
/*
#########################################################################
    Upload
#########################################################################
*/
.upload-button:hover {
    color: rgb(0, 0, 0);
}
#progressouter {
    background-color: menu;
    height: 4px;
    max-height: 4px;
    overflow: hidden;
    padding: 0;
}
#progressinner {
    background-image: url("IMAGES/progress_greencolorbar.png");
    background-position: 0 -10px;
    height: 4px;
    margin: 0;
    max-height: 4px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 0;
}
.percentage {
    color: rgb(128, 128, 128);
    font: bold 1.2em arial;
    padding-bottom: 5px;
    width: 20px;
}
.form-content {
    background-image: url("IMAGES/icoUpload.png");
    background-position: 10px 10px;
    background-repeat: no-repeat;
    height: 65px;
    padding: 10px 10px 10px 64px;
}
.form-content table {
    width: 100%;
}
.form-content td input[type="file"] {
    border: 1px solid rgb(128, 128, 128);
    width: 100%;
}
iframe {
    border: medium none;
    height: 100px;
    width: 100%;
}
#file-loaded {
    background-image: url("IMAGES/progress_upload_success.gif");
    background-position: 0 3px;
    background-repeat: no-repeat;
    color: rgb(92, 92, 92);
    display: none;
    font: bold 12px arial;
    padding-left: 23px;
}
#upload-status {
    color: rgb(82, 82, 82);
    font: bold 12px arial;
    height: 70px;
    padding: 10px 5%;
    width: 90%;
}
#open {
    margin-right: 5px;
}
/*
#########################################################################
    style for EN phpSignUpOptions
#########################################################################
*/
#client-progress-bar,
#send-email .send-loader {
    height: 4px;
    background:#BDBDBD;
}
#client-progress-bar div,
#send-email .send-loader div{
    height:100%;
    width:0%;
    background-image: url("IMAGES/progress_greencolorbar.png");
    background-position: 0 -10px;
} 
#send-email .download{
    margin-top:10px;
}
#send-email{
    background-image: url("./IMAGES/regichat_logo.png");
    background-repeat:no-repeat;
    background-position:10px 10px;
}
#send-slide-2,
#send-slide-3{
    background-image: url("./IMAGES/Finished_150.png");
    background-repeat:no-repeat; 
    background-position: 97% center; 
    min-height: 150px;
    padding-top:10px;
}
/**
 * Registeration  
 */
#lblPre {
    /*Hack to make the dialoging code aligned next to the phone number input*/
    text-align: right;
}
.software-entry {
    border-bottom: 1px solid rgb(208, 208, 208);
    padding-bottom:10px;
    margin-bottom:10px;
}
/**
 * phpModifyMobile.php  
 */
 body.SimpleBody .phone-verification .controls {
    text-align:center;
    padding:10px 0;
 }
/**
 * Advertising
 */
#advertisingContainer {
    background-color:#F0F0F0;
    border:solid 1px #ABABAB;
    padding-top:15px;
    padding-bottom:30px;
}
#advertisingContainer h1 {
    font-weight:500;
    font-size:2.2em;
}
#advertisingContainer .right-col a {
    margin-top:8px;
}
#advertisingContainer .left-col {
    height:212px;
    background-position: center;
    background-repeat:no-repeat; 
}
.ad-regimail #advertisingContainer .left-col{
    background-image: url("./IMAGES/ad_regimail.png");
} 
.ad-regichat #advertisingContainer .left-col{
    background-image: url("./IMAGES/ad_regichat.png");
} 
.ad-regipay #advertisingContainer .left-col{
    background-image: url("./IMAGES/ad_regipay.png");
} 
.ad-regibill #advertisingContainer .left-col{
    background-image: url("./IMAGES/ad_regibill.png");
} 
#advertisingContainer ul li{
    font-weight:700;
    color:#424242;
}
/**
 * Connector styling 
 */
#connectorSearchForm #control-0,
#connectorSearchForm #control-1,
#connectorSearchForm #control-2{
    display:inline-block;    
}
#connectorSearchForm #control-0{
    width:75%;
    margin-right:3%;
}
#connectorSearchForm #control-1,
#connectorSearchForm #control-2 {
    width:10%;
}
#connectorSearchForm #control-1 {
    margin-right:2%;
}
/**
 * JS regify client
 */
#JSClientLoader{
    border:solid 1px rgb(48, 48, 48);
    box-sizing: border-box;
    color: rgb(48, 48, 48); 
    background: none repeat scroll 0 0 rgb(229, 229, 229);
    padding-top:20px;
    padding-bottom:20px;
}
#JSClientLoader #client-message {
    padding-top:10px;
    padding-bottom:15px;
    font-size:0.95em;
    text-align:center;
}
#JSClientLoader img{
    display: block;
    margin-left: auto;
    margin-right: auto
}
.TabContent,
form,
.groupContainer,
.grayBackground,
.groupContainer .grayBackground{
    background:#E5E5E5;
}
.no-background,
.groupContainer .no-background{
    background:#FFFFFF;
}
.form-content form{
    background:#FFFFFF;
}
/**
 * regibill style
 */
.RegibillValidationBox {
    background-color: rgb(240, 240, 240);
    border: 1px solid rgb(45, 114, 200);
    padding: 10px;
    position: relative;
    width: 100%;
}
.RegibillValidationBox td {
    vertical-align: top;
}
.ValidateGood {
    background-image: url("IMAGES/shield_good.png");
    height: 128px;
    position: absolute;
    right: -60px;
    top: 0;
    width: 128px;
    z-index: 2;
}
.ValidateBad {
    background-image: url("IMAGES/shield_bad.png");
    height: 128px;
    position: absolute;
    right: -60px;
    top: 0;
    width: 128px;
    z-index: 2;
}
.RegibillValidationBox td{
    padding-right:5px;
    padding-bottom:2px;
}
div.PoweredBy {
    
    height: auto;
    margin: 4px auto 0px auto;
    text-align: right;
    background-color: transparent;
    background-image: url('IMAGES/regify_tiny.png');
    background-repeat: no-repeat;
    background-position: right center;
    padding-left: 55px;
    padding-right: 55px;
    border: 0px;
    padding-top: 4px;
    font-size: 7pt;
    min-height: 20px;
    cursor: pointer;
    color: rgb(34, 34, 34);
    margin-bottom:20px;
    margin-top:5px;
}
/**
* Fix for the conditions pages created before provider 4.0
* Added p.headline .headline2 
*/
.phpConditions ol{
    margin-left:15px;
}
#reading-section #message-body {
    
    background-color: rgb(255, 255, 255);
    max-height: 350px;
    min-height: 100px;
    overflow: auto;
    padding: 5px;
}
#upload-section .grayBackground {
    padding-bottom: 15px;
}
#reading-section #contentiframe { /* classical reading - non JS message opening*/
    background: none repeat scroll 0 0 rgb(255, 255, 255);
    box-sizing: border-box;
    padding: 5px;
}
/**
* Style for the error report displayed in the online JS opening and writing
*/
.report-container{
    margin-top:10px;
    padding:10px;
    background-color:#E5E5E5;
    border:solid 1px #787878;
}
/**
* Add space between dialog buttons
*/
.BoxFooter a {
    display:inline-block;
    margin-right:5px;
}

.EndToEndInfo {
    background-image: url('IMAGES/endToEnd.png');
    background-position: right 8px;
    background-repeat: no-repeat;
    background-size: 12%;
    padding-right: 11%;
}