/**  UTILITY CLASSES
 **  These classes are for useful things, like centering,
 **  that might get used multiple times.
 **/
.centering {
  margin-right: auto;
  margin-left: auto; 
}
.clearing {
  height: 0;
  clear: both;
}

/** The header div covers the top (header) section of the page **/
/** Be careful with the 'relative' and 'absolute' positioning  **/
/** in the overall header section: don't change it lightly! **/
#header {
  position: relative;
  height: 42px;
  width:    750px;
  margin: 0 auto;
  padding: 5px 0;
  text-align: right;
}

/**  The header-logo div contains our logo and has the sizes to match **/
#header-logo   {
  position: absolute;
  left:     0;
  bottom:   -1px;
  height: 42px;
  width: 240px;
  margin-top: 4px;
/*  background: #FFF  url(/images/LogoTab.png) no-repeat top left; */
/*  border: 1px solid #8888AA; */
  border-bottom: 0;
}

#header #header-logo   {
  background: #FFF  url(/images/LogoTab.png) no-repeat top left;
}

/** The popup-header div covers the top (header) section of a popup page **/
#popup-header {
  position: relative;
  height:   42px;
  width:    100%;
  margin:   0;

  /**  White background with the blue bar along the bottom **/
  background:          #fff;
  background-image:    url(/images/blue_bar.gif);
  background-repeat:   repeat-x;
  background-position: bottom;
}
#popup-header #header-logo {
  background: #FFF  url(/images/top_admail_logo.gif) no-repeat 10px 5px;
  border-bottom: 3px solid #000022;
  height: 35px;
  bottom: 0;
}
/** The top-nav div contains our navigation tabs and our quick links at the top **/
#top-nav {
  position:   absolute;
  right:      0;
  left:       245px;
  bottom:     -1px;
}

/** The popup-nav div contains our navigation tabs and our quick links at the top of a popup window**/
#popup-nav {
  position:   absolute;
  right:      0;
  bottom:     3px;
  text-align: right;
}

#popup-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#popup-nav li {
  text-align: center;
  float: right;
  width: 75px;
  padding: 0 0 0 1px;
}
#popup-nav ul li a {
  display: block;
  font-size: 85%;
  text-decoration: none;
  color: #000;
  background: #EDB89F url(/images/popup_tab_corners.gif) no-repeat top left;
  padding: 3px 10px 1px;
  margin: 2px 0px 0px;
  border: 0;
}
#popup-nav ul li a:hover {
  background: #FF911F url(/images/popup_tab_corners.gif) no-repeat top left;
}

/** The top_nav mini contains only the quick links at the top.  The following three **
 ** selectors define the behavior of the links in that section                      **/
#top-nav-mini a {
  font-size: 80%;
}
/**  The navigation tabs are actually an Unordered List, with no list-style and each  **
 **  'li' element floated to the right.  The 'a' tags (defined below) are given a     **
 **  background color and borders, giving a tab-like appearance.  The 'pre-selected'  **
 **  tab uses a bit of CSS magic. Each 'li' tag in the tab list is given an id of     **
 **  'nav-*'.  In conjunction with a uniqe body tag and a creative use of CSS         **
 **  selectors we alter what tab is selected when viewing the page. This trick is     **
 **  also used when decided which different menus to display.  **/
ul#tabNav {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul#tabNav li {
  text-align: center;
  float: right;
  width: 125px;
  padding: 0 0 0 1px;
}
ul#tabNav li a {
  display: block;
  font-size: 13px;
  text-decoration: none;
  color: #000;
  background: #EDB89F url(/images/tab_corners.gif) no-repeat top left;
  padding: 3px 10px 1px;
  margin: 2px 0px 0px;
  border-bottom: 1px solid #8888AA;
}
ul#tabNav li a:hover , ul#tabNav li a:active {
  background-color: #FF911F;
}

/* These are the creative selectors which set the background
 * color of a specific tag based on the body ID  */
#accutrak #nav-accutrak a , #emailbuilder #nav-emailbuilder a ,
#listbuilder #nav-listbuilder a , #home #nav-home a, 
#accounts #nav-accounts a , #more #nav-more a {
  background-color: #D55E24;
  color: #fff;
  border-bottom: 1px solid #D55E24;
}

/* These are the drop down menus.  By default they are not displayed.
 * Notice the direct child selector underneath (li > ul)- That sets
 * the elements so good web browsers work correctly.  IE is
 * adjusted further during an onload function. */

ul#tabNav li ul {
  display: none;
  position: absolute;
  top: auto;
  left: 0;
  background-color: #EDB89F;
  border: 1px solid #000022;
  border-top: 0;
  padding: 7px 0;
  z-index: 50000
}
ul#tabNav li > ul {
  top: auto;
  left: auto;
}
/* The .over class is set via a mouseover function */
#tabNav li.over ul{
  display: block;
}
#tabNav li li {
  display: block;
  float: none;
  width: 123px;
  margin: 0 0 0 -1px;
  text-decoration: none;
  z-index: 50000;
}
/* Here we have to go out of our way to directly declare
 * things the way we want them to, so we don't inherit from
 * above. */
#accutrak #nav-accutrak li a , #emailbuilder #nav-emailbuilder li a ,
#listbuilder #nav-listbuilder li a , #home #nav-home li a, 
#accounts #nav-accounts li a , #more #nav-more li a,
#tabNav li li a {
  background-image: none;
  background-color: #EDB89F;
  color: #000;
  padding: 3px 1px;
  border: 0;
  font-size: 11px;
}
#accutrak #nav-accutrak li a:hover , #emailbuilder #nav-emailbuilder li a:hover ,
#listbuilder #nav-listbuilder li a:hover , #home #nav-home li a:hover, 
#accounts #nav-accounts li a:hover , #more #nav-more li a:hover,
#tabNav li li a:hover {
  background-image: none;
  background-color: #FF911F;
  border-left: 1px solid #000022;
  border-right: 1px solid #000022;
  padding: 3px 0px;
}

ul.support li {
  margin: 5px 0 5px 5px;
  padding: 5px 0;
  list-style: none;
}


/** CONTENT CONTAINERS:
 **/
#popup {
   background: #FFFFFF;
   font-size: 80%;
   margin: 0 ;
   padding: 5px 10px 15px 10px;
}
/* 'middle' is the primary main container,
   'open' is used on the home page,
   'wide-screen' is for pages that need extra space */
#middle {
   float: none;
   clear: both;
   background: #FFFFFF;
   border: 1px solid #8888AA;
   margin: 0 auto;
   min-height: 370px;
   _height: 370px;
}
div.middle { 
  padding: 5px 25px 15px 25px;
  width: 698px;
  line-height: 1.2;
}
div.open {
  padding: 0;
  font-size: 85%;
  width: 748px;
}
div.wide-screen { 
  padding: 5px 25px 15px 25px;
  min-width: 748px;
  margin: 0;
  line-height: 1.2;
}
#footer {
  padding: 0;
  width: 750px;
  margin: 0 auto;
}

#copyright {
  font-size: 72%;
  padding-top: 10px;
  text-align: center;
}


ul.page-buttons {
  margin: 5px 0 10px 60px;
  padding: 15px 0;
  list-style: none;
}
ul.page-buttons li {
  float: left;
  margin-right: 15px;
}
ul.page-buttons li input {
  background-color: #FAEBE4;
}
ul.image-cat {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.image-cat li {
  border: solid #555555 1px;
  background-color: #EEEEEE;
  margin: 2px;
  padding: 0 0 5px;
  float: left;
  width: 110px;
  text-align: center;
}
ul.image-cat li div {
  margin: 0;
  border: 0;
  padding: 5px 0;
  width: 100%;
  height: 100px;
  text-align: center;
}
ul.image-cat li div img {
  border: solid #777777 1px;
}
ul.image-cat li div img:hover {
  border: solid #000000 1px;                          
}
ul.template-cat {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.template-cat li {
  border: solid #555555 1px;
  background-color: #EEEEEE;
  margin: 10px 15px;
  padding: 5px 0px;
  float: left;
  width: 155px;
  height: 165px;
  text-align: center;
  overflow: hidden;
}
/* eshop/index, eshop/subject */
ul.multiple-selects {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.multiple-selects li {
  margin: 20px 0;
}
ul.multiple-selects li input {
  float: left;
}

/* eshop/preview */
ul.interest-logic {
  margin: 0;
  margin-top: -6px;
  padding: 0;
  float: right;
  list-style: none;
  width: 250px;
}
ul.interest-logic li {
  margin: 3px 0 4px;
}
ul.interest-logic li input {
  float: left;
}
ul.interest-logic li.list-title {
  margin: 0 0 3px;
  text-align: center;
  color: #D65D24;
  font-weight: 700;
  font-size: 100%;
}
ul.links {
  margin: 10px;
  padding: 0;
  list-style: none;
  display: none;
}
ul.links li {
  margin: 0;
  padding: 0;
}
ul.shopping-alacarte {
  list-style: none;
  margin: 0;
  padding: 5px 5px 5px 15px;
}
ul.shopping-alacarte li{
  padding: 5px;
}
ul.sign-up-form {
  margin: -5px 0 0 0;
  padding: 0 0 0 20px;
  list-style: none;
}
ul.sign-up-form li {
  margin: 10px 0;
  width: 80%;
}
ul.sign-up-form li a {
  margin-left: 5px;
  color: #D65D24;
  font-weight: 700;
  text-decoration: underline;
}
ul.sign-up-form li a:hover,
ul.sign-up-form li a:active {
  color: #000364;
  padding-left: 2px;
}
ul.upload-list {
  padding: 0;
  margin-left: 0;
  list-style: none;
}
ul.upload-list li {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid black;
  line-height: 1.1;
  position: relative;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
ul.upload-list li.quarantine {
  border: 1px solid red;
  background-color: #FC002A;
}
ul.upload-list li.quarantine a:hover {
 color: black;
 text-decoration: underline;
}
ul.upload-list li.remove {
  background-color: #FEFEF0;
}

ul.upload-list li img.deleter {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  cursor: hand;
  border: 0;
}
ul.upload-list li div.label {
  width: 20%;
  float: left;
  font-weight: 700;
  text-align: right;
  padding-right: 1em;
}
ul.custom-answer {
  padding: 0;
  margin: 0;
  list-style: none;
}
ul.custom-answer li {
  padding: 0 0 .75em 0;
}
ul.custom-answer li div.toolbar {
  padding: 0 1em 0 0;
  margin: 0;
  margin-top: -.15em;
  margin-left: 1.5em;
  float: left;
  min-width: 50px;
}
ul.custom-answer li div.toolbar img {
  padding: 0 3px;
}
ul.signup-buttons {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.signup-buttons li {
  width: 30%;
  height: 50px;
  float: left;
}
div.interest-list {
  float: left;
}
div.interest-list p {
  margin: 5px 0 0 0;
  padding-left: 5px;
  font-size: 80%;
}
p.shopping-alacarte {
  margin: 0;
  padding: 5px 5px 5px 20px;
}
form.signup {
  width: 100%;
  margin: 0;
  padding: 0;
}
form.signup h2 {
  margin-left: 190px;
}
form.signup div.form-row {
  margin: 0;
  padding: 0;
  clear: both;
  padding-top: 4px;
  margin-bottom: 4px;
}
form.signup div.form-row label {
  font-weight: 700;
  font-size: 1.1em;
  margin: 0;
  width: 180px;
  float: left;
  text-align: right;
  margin-right: 8px;
  padding: 5px 2px 0 0;
}
form.signup div.form-row input,
form.signup div.form-row select {
  font-size: 1.1em;
}
form.signup div.form-row .medtext {
  width: 50%;
}

div.generic-form {
  width: 100%;
  margin: 0;
  padding: 0;
}
div.generic-form div.label{
  width: 20%;
  float: left;
  text-align: right;
  margin-bottom: 5px;
  padding: 5px 1em 2px 0;
}
div.generic-form div.form-row {
  margin: 0;
  padding: 0;
  clear: both;
  padding-top: 4px;
  min-height: 1.5em;
  margin-bottom: 4px;
}
div.generic-form div.form-row div.row-label {
  font-weight: 700;
  margin: 0;
  padding: 0;
  width: 180px;
  float: left;
  text-align: right;
  margin-right: 8px;
  padding-right: 2px;
  padding-top: 5px;
}
div.generic-form div.required {
  background-color:    #EEEEEE;
  background-image:    url(/images/required.gif);
  background-repeat:   no-repeat;
  background-position: left;
}
div.row-label img {
  float: left;
  margin-top: -5px;
}

div.generic-form div.form-row div.row-content {
  float: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
  width: 410px;
}
div.generic-form div.form-row div.row-content div.dyn-error {
  display: none;
  color: red;
  font-weight: 700;
  border: 1px solid red;
  padding: .5em 0;
  background: #FFEEEE;
  margin-top: 3px;
  text-align: center;
}
div.generic-form div.form-row div.row-content .std {
  width: 100%;
}
div.generic-form div.form-row div.row-content .textbox {
  width: 100%;
}
div.generic-form div.form-row div.row-content .smalltext {
  width: 25%;
}
div.generic-form div.form-row div.row-content .medtext {
  width: 50%;
}
div.generic-form div.form-row div.row-content-under {
  clear: both;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1em;
}
div.generic-form div.form-row div.row-content-under textarea.std {
  width: 100%;
  height: 2em;
}
div.generic-form div.form-row div.row-content-under ul.small-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
div.generic-form div.form-row div.row-content-under ul.small-list li {
  float: left;
  width: 33%;
}


div.generic-form div.form-row div.popup-row-label {
  font-weight: 700;
  margin: 0;
  padding: 0;
  width: 120px;
  float: left;
  text-align: right;
  padding-right: 10px;
  padding-top: 5px;
}

div.generic-form div.form-row div.popup-row-content {
  float: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
  width: 120px;
}

div.row-content input,
div.row-content textarea,
div.row-content select {
  margin-top: -5px; 
}

div.generic-form div.form-row div.row-note {
  font-size: 80%;
  text-align: center;
  margin-left:  35px;
  margin-bottom: 10px;
  padding-top: 2px;
  width: 290px;
  clear: both;
}

div.generic-form div.wide-label{
  width: 35%;
  float: left;
  text-align: right;
  margin-bottom: 5px;
  padding: 5px 1em 2px 0;
}

div.generic-form div.pricing{
  width: 3%;
  float: left;
  text-align: right;
  margin-bottom: 10px;
  padding: 1px 1em 1px 0;
}
div.generic-form div.wide-label img {
  float: left;  
}

div.info-box {
  width: 48%;
  float: left;
  padding: 0 2% 0 0;
}
div.info-box h2.standard {
  margin-top: 0;
  margin-bottom: 5px;
}
div.info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
div.info-box ul li {
  margin-bottom: 4px;
  clear: both;
}
div.info-box ul li.warning {
  background-color: #FC002A;
  text-align: center;
}
div.info-box ul li div.label {
  width: 50%;
  float: left;
  text-align: right;
  margin-bottom: 4px;
}
div.info-box ul li div.number {
  padding-left: 1em;
  float: right;
  text-align: left;
  width: 45%;
}

div.image-key {
  margin: 0 0 3px 40px;
  width: 200px;
  font-size: 80%;
  text-align: left;
}

div#notifier-block {
  position: fixed;
  top: 10%;
  left: 10%;
  z-index: 100;
}
div#notifier-block div.notification {
  background-color: #DDD;
  color: #000;
  padding: 3px 8px;
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  filter: alpha (opacity=80);
  opacity: .80;
  border: 1px solid #BBB;
  font-size: 13pt;
  font-weight: 700;
  margin-bottom: 3px;
}
div#notifier-block div.notification span {
  padding: 0 20px;
  margin: 0;
}

#pers-engine {
  text-align: center;
  background-color: #F5DFBC;
  border: 1px solid #D55E24;
  display: none;
  margin: 4px auto;
  width: 500px;
  padding-bottom: 5px;
}


#pers-engine #pers-list {
  margin-top: 10px;
}
  
#pers-engine #pers-default {
  width: 60%;
  margin-top: 0;
}

#pers-code {
  text-align: center;
  font-size: 110%;
  font-weight: 700;
  margin: 5px;
  padding: 3px 0;
  background-color: #FEF9EE;
}

#attach-engine {
  text-align: center;
  background-color: #F5DFBC;
  border: 1px solid #D55E24;
  display: none;
  margin: 4px auto;
  width: 500px;
  padding: 10px 5px;
}


div#homepage-right {
  float: right;
  padding: 5px 0 0;
  margin: 0;
  margin-top: 5px;
  background-color: #FFF;
  width: 150px;
  text-align: center;
}
div#homepage-right img {
  margin: 0 auto 10px;
}
div#homepage-right div { 
  background-color: #0A6CCF;
  font-size: 1.1em;
  line-height:  1.2;
  margin: .75em .5em;
  padding: .5em .25em;
  color: white;
}
div#homepage-right div a { 
  color: white;
  text-decoration: none;
}
div#homepage-content {
  margin: 5px 150px 0 20px;
  padding: 5px 10px 10px 0;
  border-right: 1px solid #8888AA;
}
div#homepage-content h2 {
  color: #000364;
  font-size: 160%;
  margin: 0;
  padding: 0;
  text-align: center;
}
div#homepage-content h3 {
  float: left;
  width: 130px;
  margin: 7px 0 0;
  padding: 0 10px 0 0;
  text-align: right;
}
div#homepage-content h3 img {
  border: 0;
}
div#homepage-content div.main-copy,
div#homepage-content div.announce {
  padding: 3px 6px 15px;
  text-align: justify;
  line-height: 1.2;
}
div#homepage-content div.announce {
   font-style: italic;
   font-size: 1.1em;
}
div#homepage-content div.main-copy a,
div#homepage-content div.announce a {
  font-weight: 700;
  text-decoration: none;
  color: #000364;
}
div#homepage-content div.announce a:hover,
div#homepage-content div.announce a:active,
div#homepage-content div.main-copy a:hover,
div#homepage-content div.main-copy a:active {
  text-decoration: underline;
  color: #D65D24;
}
div#homepage-content .product {
  margin:  0 0 20px 140px;
  padding: 6px 12px;
  background-color: #E5E5E5;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
}
div#homepage-content .product:hover {
  background-color: #F5F5F5;
}
div#homepage-content div.product em {
  color: red;
  font-style: normal;
  font-weight: 700;
}
div#top-client-login {
  padding: 0;
  margin: 0;
  margin-left: 246px;
/*  border: 1px solid #8888AA; */
  text-align: center;
}
div#top-client-login label,
a.client-login-link {
  padding: 0 2px 0 0;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  color: #1963C5;
}
a.client-login-link {
  font-size: 17px;
  text-decoration: none;
}
div#top-client-login input.login {
  border: 1px solid #8888AA;
  background-color: #F0F6FE;
  width: 115px;
  text-align: center;
  font-size: 13px;
  font-family: 'Times New Roman', times, serif;
  margin: 0 2px 1px 0;
}
div#top-client-login input.focused {
  border: 1px solid #444477;
  background-color: #FFFFFF;
}
div#top-client-login input.login:hover {
  border: 1px solid #444477;
}
div#top-client-login input.submit-button {
  padding: 0 1px;
  margin: 0;
  font-size: 12px;
  background-color: #FAEBE4;
}