/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-family: 'DearJoe5';
    src: url('/content/css/themes/base/fonts/dj5ctrial/dj5ctrial-webfont.eot');
    src: url('/content/css/themes/base/fonts/dj5ctrial/dj5ctrial-webfont.eot?#iefix') format('embedded-opentype'),
         url('/content/css/themes/base/fonts/dj5ctrial/dj5ctrial-webfont.woff') format('woff'),
         url('/content/css/themes/base/fonts/dj5ctrial/dj5ctrial-webfont.ttf') format('truetype'),
         url('/content/css/themes/base/fonts/dj5ctrial/dj5ctrial-webfont.svg#DearJoe5') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MyriadPro';
    src: url('/content/css/themes/base/fonts/myriadpro/myriadpro-regular.eot');
    src: url('/content/css/themes/base/fonts/myriadpro/myriadpro-regular.eot?#iefix') format('embedded-opentype'),
         url('/content/css/themes/base/fonts/myriadpro/myriadpro-regular.woff') format('woff'),
         url('/content/css/themes/base/fonts/myriadpro/myriadpro-regular.ttf') format('truetype'),
         url('/content/css/themes/base/fonts/myriadpro/myriadpro-regular.svg#MyriadPro') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('/content/css/themes/base/fonts/helveticaneue/helveticaneue.eot');
    src: url('/content/css/themes/base/fonts/helveticaneue/helveticaneue.eot?#iefix') format('embedded-opentype'),
         url('/content/css/themes/base/fonts/helveticaneue/helveticaneue.woff') format('woff'),
         url('/content/css/themes/base/fonts/helveticaneue/helveticaneue.ttf') format('truetype'),
         url('/content/css/themes/base/fonts/helveticaneue/helveticaneue.svg#HelveticaNeue') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'HelveticaNeueBold';
    src: url('/content/css/themes/base/fonts/helveticaneuebold/helveticaneuebold.eot');
    src: url('/content/css/themes/base/fonts/helveticaneuebold/helveticaneuebold.eot?#iefix') format('embedded-opentype'),
         url('/content/css/themes/base/fonts/helveticaneuebold/helveticaneuebold.woff') format('woff'),
         url('/content/css/themes/base/fonts/helveticaneuebold/helveticaneuebold.ttf') format('truetype'),
         url('/content/css/themes/base/fonts/helveticaneuebold/helveticaneuebold.svg#HelveticaNeueBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ==========================================================================
   Layout
   ========================================================================== */
   
#portal { position: relative; width: 873px; height: auto; padding: 0; margin: 0 auto; background-color: #ffffff; }
#portal header { width: 873px; text-align: left; padding: 0 0 20px 0; margin: 0; background: #ffffff none; }
#portal footer { overflow: hidden; width: 873px; height: 18px; background: #ffffff url('layout/rule.png') no-repeat 4px 0; }
#portal .content { position: relative; width: 873px; height: auto; min-height: 200px; padding: 0; margin: 0 auto; clear: both; }

/* ==========================================================================
   Global
   ========================================================================== */
html, body { font-family: "HelveticaNeue", Helvetica, Verdana, Arial; font-size: 12px; font-weight: normal; color: #999999; }

a:link, a:visited { font-family: "HelveticaNeue", Helvetica, Verdana, Arial; font-size: 12px; font-weight: bold; color: #333333; text-decoration: none; }
a:hover { color: #999999;  }

.small, .small > * { font-size: 11px !important; }

h1 { font-family: "DearJoe5", "HelveticaNeue", Helvetica, Verdana, Arial; font-size: 42px; font-weight: lighter; padding: 0; margin: 0; }
h1.overflow { display: block; height: 50px; }

h4 { font-family: "HelveticaNeue", Helvetica, Verdana, Arial; font-size: 18px; font-weight: bold; padding: 0; margin: 0 0 20px 0; color: #333; }
   
/* Blue to white gradient */
.grad-blue {
  /* fallback */
  background: #ffffff url('layout/gradient-blue.png') repeat-x 0 0 !important;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#c0e7fa)) !important;
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #ffffff, #c0e7fa) !important;
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #ffffff, #c0e7fa) !important;
  /* IE 10 */
  background: -ms-linear-gradient(top, #ffffff, #c0e7fa) !important;
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #ffffff, #c0e7fa) !important;
}

/* Grey to white gradient */
.grad-grey {
  background: #ffffff url('layout/gradient-grey.png') repeat-x 0 0;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#eaeaea));
  background: -webkit-linear-gradient(top, #ffffff, #eaeaea);
  background: -moz-linear-gradient(top, #ffffff, #eaeaea);
  background: -ms-linear-gradient(top, #ffffff, #eaeaea);
  background: -o-linear-gradient(top, #ffffff, #eaeaea);
}

.disabledClass{
   color:#CCC !important;  
   border-color: #EAEAEA !important;  
}

/* Border radius 6 pixels */
.rad6 { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }

/* Form field set (defines field element spacing and labels) */
.fieldset { float: left; list-style-type: none; margin: 0; padding: 0; width: 100%; }
.fieldset li { margin: 0px;  position: relative; padding:0px; }

.fieldset li label { display: inline-block; width: 150px; margin: 0; padding: 0; text-align: left; font-family: "HelveticaNeue", Helvetica, Verdana, Arial; font-size: 14px; font-weight: lighter; color: #333333; }
.fieldset li label.status { width: 100%; }
.fieldset li label.status p { float: left; padding: 0; margin: 7px 0 0 0; }
.fieldset li.right { text-align: right; }
.pb { position: absolute; bottom: 5px; right: 30px; }
.fieldset li label.value { position: absolute; top: 8px; left: 14px; width: auto; font-size: 16px; z-index: 10001; color: #42484b }


/* Default text field */
.fieldset li input { width: 285px; padding: 8px; font-family: "HelveticaNeue", Helvetica, Verdana, Arial; font-size: 12px; font-weight: lighter; color: #42484b; border: 2px solid #e1e1e1; outline: none; }

.fieldset li input.lighter { padding: 4px 8px; font-weight: lighter; }
.fieldset li .txtinput { width: 285px; font-size: 16px; }
.fieldset li .focus { border-color: #c0e7fa !important; }
.fieldset li select { border-color: #c0e7fa !important; width:300px;  font-family: "HelveticaNeue", Helvetica, Verdana, Arial; display: inline-block ;}
.fieldset li p { display: inline-block ; font-family: "HelveticaNeue", Helvetica, Verdana, Arial;}


/* Form button/submit button */
.fieldset li .button { width: auto; text-align: center; padding: 7px 15px; font-size: 14px; }
.fieldset li .btn-login { font-size: 16px; padding: 7px 55px 7px 15px; }

/* Small form button/submit button */
.fieldset li .btn-small { font-size: 12px; padding: 5px 20px !important; min-width: 60px; }

/* Dark blue solid button */
.btn-darkblue { display: inline-block; padding: 10px 15px 10px 15px; background-color: #2c3178; color: #ffffff !important; text-align: center; }

.btn-small 
{
    padding: 5px 10px;
}

/* ==========================================================================
   Login and Home Pages
   ========================================================================== */

/* Header for the login page */   
#portal #hd-login { overflow: hidden; width: 873px; height: 178px; background: #ffffff url('layout/spr-logo.gif') no-repeat 146px 92px; margin: 0 0 20px 0; padding: 0; }

/* Content for the login and home pages */   
#portal .cn-split { min-height: 445px; height: 445px; background: #ffffff url('layout/robot2.png') no-repeat 82px bottom; }
#portal .cn-split .box-60 { position: relative; width: 460px; height: auto; padding: 0; margin: 0; float: right; }
#portal .cn-split #login { margin: 80px 15px 0 0; }
#portal .cn-split #home { margin: 170px 35px 0 0; }
#portal .cn-split #home h1 { text-align: right; margin-bottom: 30px; }
#portal .cn-split #home p { position: relative; overflow: hidden; margin: 0; padding: 0; text-align: right; font-size: 16px; }

/* ==========================================================================
   Main Header Definition
   ========================================================================== */

#portal header #hdcontainer { position: relative; width: 100%; overflow: hidden; background: #ffffff none; padding: 50px 0 30px 0; margin: 0; z-index: 100000; }
#portal header #hdcontainer .logo { float: left; position: relative; left: 0; display: block; overflow: hidden; width: 248px; height: 40px; background: transparent url('layout/spr-logo.gif') no-repeat 0 -86px; }
#portal header #hdcontainer p { float: right; position: relative; right: 0; margin: 0;padding: 0; font-size: 16px; text-align: right; }
#portal header #hdcontainer p > * { font-size: 16px; }
#portal header #hdcontainer p a { text-decoration: underline; }
#portal header #hdcontainer p a:hover { text-decoration: none; }
#portal header #hdcontainer a:link, #portal header #hdcontainer a:visited { color: #999999 }

/* Navigation */
#portal header .dropmenu { display: table; table-layout: fixed; clear: both; width: 100%; list-style-type: none; margin: 0; padding: 0; }
#portal header .dropmenu li { display: inline-block; *display: inline; *zoom: 1; width: auto; }
#portal header .dropmenu li { display: table-cell; float: none; padding: 0 5px 0 0; }
#portal header .dropmenu li .mask { position: relative; overflow: hidden; z-index: 100001; float: none; padding: 0; margin: 0; background: #ffffff none; }
#portal header .dropmenu li a { background: #ffffff none; position: relative; z-index: 1000; display: block; padding: 5px 10px; margin: 0; font-size: 14px; font-weight: normal; color: #999999; border: 2px solid #e1e1e1; text-align: center; }
#portal header .dropmenu li.last { margin: 0 0 0 0; padding: 0 !important }
#portal header .dropmenu li a.current {  }

#portal header .dropmenu li ul { display: none; position: absolute; z-index: 99999; height: auto; background: #ffffff none; list-style-type: none; margin: 0; padding: 0px 5px 5px 5px; border: 2px solid #e1e1e1; }
#portal header .dropmenu li ul li { display: block; border-bottom: 1px solid #999999; text-align: center; padding: 5px 0 5px 0; }
#portal header .dropmenu li ul li a { color: #999999; text-decoration: none; font-size: 14px; font-weight: normal; border: none; padding: 0; margin: 0; }
#portal header .dropmenu li ul li a:hover { background: none; font-weight: normal; color: #000000; }
#portal header .dropmenu li ul li.last { padding-top: 5px !important; padding-bottom: 0px; border-bottom: 0px solid !important; }

/* ==========================================================================
   Admin Content Definition
   ========================================================================== */
 
/* Opacity hidden */
opac { opacity: 0.0; filter: alpha(opacity=0); zoom: 1; }
  
/* Overlay */
#portal .overlay { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; min-width: 100%; height: 100%; min-height: 100%; background: transparent none no-repeat 0 0; text-align: center; z-index: 1000000; }
#portal .overlay .background { position: relative; overflow: hidden; width: 100%; min-width: 100%; height: 100%; min-height: 100%; background: #ffffff none no-repeat 0 0; z-index: 1000001; opacity: 0.5; filter: alpha(opacity=50); zoom: 1; }
#portal .overlay .loading { position: absolute; overflow: hidden; top: 50%; left: 50%; width: 113px; height: 113px; padding: 0; margin: -56px 0 0 -56px; background: transparent url('layout/loading.gif') no-repeat 0 0; z-index: 1000002; color: #333333; font-size: 18px; }

/* Custom inline select menu */
.select { 
    float: none; display: block; overflow: hidden; text-align: left; color: #999; font-size: 11px; font-weight: normal; font-family: "HelveticaNeue", Helvetica, Verdana, Arial;
    margin: 0; padding: 2px 0; border: 1px solid #e1e1e1; cursor: pointer;
}
.select .selected { color: #333 !important; }

div.options { float: none; position: absolute; z-index: 100000; overflow: hidden; background: #ffffff none; list-style-type: none; margin: 0 0 0 0; padding: 0px 5px 5px 5px; border: 1px solid #e1e1e1; }
div.options a { 
    font-weight: normal; font-family: "HelveticaNeue", Helvetica, Verdana, Arial;
    color: #999999; text-decoration: none; font-size: 11px; padding: 0; margin: 0;
    display: block; width: 100%; overflow: hidden; border-bottom: 1px solid #ddd; text-align: center; padding: 5px 0;
}
div.options a:hover { font-weight: normal; color: #000000; }
div.options a.last { padding-bottom: 0px; border-bottom: 0px solid !important; }
div.options a.empty { color: #333; }
.clear5 { margin-top: 5px !important; }

/* Icon sprite definition */
#portal .content .icon { float: none; display: inline-block; overflow: hidden; padding: 0; margin: 0; background-color: transparent; background-image: url('layout/spr-main.png'); background-repeat: no-repeat; }

#portal .content .isage { background-position: 0 -240px; width: 43px; height: 30px; margin-top: 5px; }
#portal .content .ixero { background-position: 0 -271px; width: 33px; height: 32px; margin-top: 4px; }
#portal .content .iinfo { background-position: 0 -88px; width: 31px; height: 23px; margin-top: 7px; }
#portal .content .iinfo:hover { background-position: -43px -88px; }
#portal .content .icustomer { background-position: 0 -111px; width: 40px; height: 26px; margin-top: 5px; }
#portal .content .icustomer:hover { background-position: -43px -111px; }
#portal .content .isuppliers { background-position: 0 -138px; width: 41px; height: 27px; margin-top: 6px; }
#portal .content .isuppliers:hover { background-position: -43px -138px; }
#portal .content .idelete { background-position: 0 -165px; width: 24px; height: 27px; margin-top: 6px; }
#portal .content .idelete:hover { background-position: -26px -165px; }
#portal .content .iunlocked { background-position: 0 -192px; width: 21px; height: 27px; margin: 0 0 0 20px; border: 0px none !important; }
#portal .content .ilocked { background-position: 0 -363px; width: 21px; height: 25px; margin: 0 0 0 20px; border: 0px none !important; }
#portal .content .iprev { background-position: 0 0; width: 22px; height: 22px; }
#portal .content .iprev:hover { background-position: -23px 0; }
#portal .content .inext { background-position: 0 -22px; width: 22px; height: 22px; }
#portal .content .inext:hover { background-position: -23px -22px; }

#portal .content .isagefifty { background-image: url('layout/sage50logo_icon.png'); background-repeat: no-repeat;   width: 60px; height: 30px; margin-top: 10px; }
#portal .content .isageone { background-image: url('layout/sageOnelogo_icon.png'); background-repeat: no-repeat;  width: 60px; height: 30px; margin-top: 14px;}
#portal .content .iexchequer { background-image: url('layout/exchequerlogo_icon.png'); background-repeat: no-repeat;  width: 60px; height: 24px; margin-top: 10px;}


/* Tabel Sorter */
.pager { overflow: hidden; padding: 0; margin: 30px 0; }
.pager ul { list-style-type: none; width: 100%; overflow: hidden; height: 36px; }
.pager ul li { float: left !important; display: inline; width: 50%; }
.pager ul li.libtn { text-align: right; }
.pager ul li ul { list-style-type: none; width: auto; margin: 5px 0 0 0; padding: 0; overflow: hidden; height: auto; }
.pager ul li ul li { float: left !important; display: inline; width: auto; margin: 0; padding: 0; }
.pager ul li ul li .pagedisplay { padding: 0 5px; margin: 3px 0 0 0; font-family: Helvetica, Verdana, Arial; font-size: 12px; text-align: center; }
.pager ul li ul li .pagedisplay span { font-weight: bold; color: #333 }
.pager ul li ul li .pages { margin: 3px 0 0 20px; padding: 0; }
.pager ul li ul li .pages a.pagesizelink { font-family: Helvetica, Verdana, Arial; color: #333; text-decoration: none; }
.pager ul li ul li .pages a.pagesizelink:hover { color: #999 }
.pager.disabled { display: none; }
.pager img.disabled { opacity: 0.5; filter: alpha(opacity=50); }

#tablesorterPagerLoading { background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat; position: absolute; z-index: 1000; }

td.pager { background-color: #e6eeee; }

/* ==========================================================================
   User Admin Content Definition
   ========================================================================== */

#user-admin h1 { margin-bottom: 10px !important; }
#user-admin .block { float: left; border: 1px solid #cccccc; overflow: hidden; background: #ffffff none no-repeat 0 0; }
#user-admin #tree { width: 222px; height: 590px !important; margin: 0 5px 10px 0; padding: 15px 10px; }
#user-admin #canvas { width: 602px; height: 390px !important; margin: 0 0 120px 0; padding: 15px 10px; }
#user-admin #canvas #jstree { position: relative; overflow: auto; padding: 0; margin: 0; width: 222px; height: 300px; background: aqua }
#user-admin #tabs { width: 616px; margin: 0 0 10px 0; border: 0px; }
#user-admin #tabs h4 { margin-top: 10px; }

#user-admin #tree .fieldset { width: 100%; }
#user-admin #tree .fieldset li { float: left; width: 50%; text-align: center; }