body {
  width: 850px;
  font-size: 9pt;  
  font-family: arial, tahoma;
}

img {
  border: 0px;
  text-decoration: none;
}

a {
  color: #0069aa;
  cursor: pointer;
}

a:hover {
  color: #0099cc;
}

a img {
  text-decoration: none;
}

hr {
  height: 1px;
  color: #999999;
  padding: 0px;
  margin: 0px 0px 7px 0px;
}

.pageContainer {
  text-align: left;
}

.liLogo {
  float: left;
}

.navBar {
  float: right;
}

.navBar a {
  font-size: 8pt;
  text-decoration: none;
}

.topNav {
  color: #666666;
  font-size: 8pt;  
  text-align: right;
  margin-bottom: 15px;
}

.topNav a {  
  color: #999999;
  text-decoration: none;  
}

.topNav a:hover {
  color: #666666;
}

.topNav a#supportLink {
  cursor: default;
}

.topNav a.selected, .topNav a.selected:hover {
  color: #333333;
}

.mainNav {
  float: right;
}

.subMenu, .subMenuShown, .subMenuHidden {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #FFFFFF;
  border: 1px solid #999999;
  padding: 4px;
  z-index: 2;
  display: none;
}

.subMenuShown {
  display: block;
}

.mainNav a, .subMenu a, .subMenuShown a, .subMenuHidden  a {
  display: block;
  float: left;
  text-align: right;
  font-size: 8pt;
  text-decoration: none;  
  color: #666666;
  border-bottom: 1px solid #999999;
  background-image: url('images/mainNavVerticalGray.gif');
  background-repeat: no-repeat;
  background-position: 100% 100%;
  padding: 3px 5px;
  margin-left: 10px;
}

.mainNav a:hover, .subMenu a:hover, .subMenuShown a:hover, .subMenuHidden  a:hover {
  color: #666666;
  border-bottom: 1px solid #FF9900;
  background-image: url('images/mainNavVerticalOrange.gif');  
}

.subMenu a, .subMenuShown a, .subMenuHidden  a, .subMenu a:hover, .subMenuShown a:hover, .subMenuHidden  a:hover {
  background-image: none;
}

.mainNav a.selected, .mainNav a.selected:hover, .subMenuShown a.selected, .subMenuHidden  a.selected,
.subMenu a.selected {
  color: #333333;
  border-bottom: 1px solid #FF9900;  
  background-image: url('images/mainNavVerticalOrangeSelected.gif');
  background-position: 100% 100% ; 
  background-repeat: no-repeat;
}

.subMenu a.selected, .subMenuShown a.selected, .subMenuHidden  a.selected, .subMenuShown a.selected:hover, .subMenuHidden  a.selected:hover, .subMenu a.selected:hover{
  color: #000000;
  background-image: none;
}

.subMenu#subCustomerSupport a {
  display: block;
  float: none;
  text-align: left;
  margin-left: 5px;  
}

.pageContent {
  clear: both;
  float: left;
  width: 100%;
}

.leftColumn {
  float: left;
  width: 250px;
}

.leftColumn ul {
  font-size: 10pt;
  list-style-type: none;
  list-style-position: outside;
  padding: 0px;
  margin: 117px 50px 0px 38px;
}

.leftColumn ul li {
  display: block;
  height: 100%;
}

.leftColumn ul li a {
  display: block;
  height: 100%;
  color: #007ab8;
  text-decoration: none;  
  background-image: url("images/orangeArrow.gif");
  background-repeat: no-repeat;
  background-position: 0px 9px;
  border-bottom: 1px solid #CCCCCC;
  padding: 6px 0px 5px 12px;
  margin: 0px;
}

.leftColumn ul a:hover {
  color: #0099cc;;
}

.leftColumn ul a.selected, .leftColumn ul a.selected:hover {
  color: #000000;
  border-bottom: 1px solid #FF9900;
  margin: 0px;
}

.leftColumn ul li ul {
  font-size: 10pt;
  list-style-type: none;
  list-style-position: outside;
  padding: 0px;
  margin: 0px 0px 0px 10px;
}

.middleColumn {
  float: left;
  width: 200px;
  text-align: center;
}

.pageLogo {
  width: 170px;
  height: 170px;
  border: 1px solid #DDDDDD;
  margin: 0px 14px;
}

.pageLogo img {
  padding-top: 30px;  
}

.middleImages {
  margin-top: -50px;
}

.middleImages img {
  margin-bottom: 20px;
}

.middleImages img.wCaption {
  margin-bottom: 15px;  
}

.middleImages .caption {
  color: #666666;
  font-size: 11px;
  text-align: left;
  margin: 0px 35px;
}

.rightColumn {
  float: left;
  width: 400px;
}

.pageHeader {
  height: 172px;
  color: #007ab8;
  background-image: url("/images/pageHeaderBg.gif");
  background-repeat: repeat-x;
  background-position: bottom; 
  background-color: #EEEEEE;
}

.headerImages, .pageHeader h1, .pageHeader h2, .pageHeader h3 {
  padding: 0px 0px 0px 15px;
  margin: 0px;
}

.pageHeader table {
  padding: 0px 0px 0px 2px;
}

.pageHeader tr.secondListing td {
  padding-top: 5px;
}

.headerImages {
  display: block;
  background-color: #FFFFFF;
}

.headerImages img {
  display: block;
  float: left;
  padding: 15px 9px 15px 0px;
}

.pageHeader h1 {
  clear: both;
  font-family: arial, sans-serif; 
  font-size: 11pt;
  font-weight: bold; 
  line-height: 12pt;
  padding-top: 30px;
}

.pageHeader h1.events {
  padding-top: 22px;
}

.pageHeader h2 {
  font-size: 10pt;  
  font-weight: normal; 
  font-style: italic;
}

.pageHeader h3 {
  font-weight: normal; 
  font-size: 10pt; 
  margin-top: 10px;
}

.pageHeader td {
  font-size: 10pt;  
  font-weight: normal;
  vertical-align: top;
}

.pageText {  
  font-size: 9pt;
  padding: 20px 5px 0px 15px;
  margin: 0px;
}

.pageText p {
  padding-bottom: 20px;
  margin: 0px;
}

.pageText p.challengeAlly {
  font-size: 10pt;
}

.pageText h1 {
  font-size: 9pt;
  font-weight: normal;
}

.pageText .pSmall {
  font-size: 8pt;
}

.pageText .quote {
  font-size: 8pt;
  padding: 0px 10px;
  margin-bottom: 20px;
}

.pageText .quoteAuthor {
  text-align: right;
}

.pageText ul {
  font-size: 9pt;
  list-style-type: none;
  padding: 0px 0px 20px 0px;
  margin: 0px;
}

.pageText li {
  line-height: 12pt;
  background: url("images/orangeListBox.gif") 0% 5pt no-repeat;  
  padding: 0px 0px 3px 12px;
  margin: 2px 0px;
}

.pageText ul ul {
  font-size: 9pt;
  list-style-type: none;
}

.pageText li li {
  background: url("images/grayListBox.gif") 0% 5pt no-repeat;
}

.footer {
  clear: both;
  color: #999999;
  font-size: 10pt;
  text-align: right;
  padding-top: 50px;
}

/*learnDerm*/
.lesson {
  float: left;
  display: block;   
  width: 100%;   
  border-bottom: 1px solid #DDDDDD; 
  padding-bottom: 5px; 
  margin-bottom: 20px;  
}
.lessonTitle {
  float: left;
  display: block;   
  width: 100%; 
  clear: both; 
}

.lessonTitle a {
  float: left; 
  display: block; 
  width: 100%; 
  text-decoration: none; 
}

.lessonTitle a:hover {
  background-image: url("/images/orangeArrowDown.gif");
  background-position: 99% bottom;
  background-repeat: no-repeat;
}

.lessonNum {
  float: left; 
  width: 53px; 
  height: 53px; 
  color: #FF9900;
  cursor: pointer;   
  text-align: center;
}

.lessonNum .les {
  font-family: arial, verdana, tahoma; 
  font-size: 14px; 
  text-decoration: none;
}

.lessonNum .num {
 font-size: 34px; 
 line-height: 30px;
}

.lessonTitle .title {
  float: left; 
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
  padding: 28px 0px 0px 10px;
}

.lessonInfo {
  float: left;
}

#lesson1, #lesson2, #lesson3, #lesson4, #lesson5, #conclusion {
  padding: 10px;
}

.lessonStart {
  width: 100%;
  display: block;
  text-align: right;
  padding-top: 10px;
  padding-bottom: 5px;
}

.lessonStart a, .lessonStart a:hover {
  float: right;
  display: block;
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  background-image: url('images/lessonButtonBg.gif');
  background-repeat: repeat-x;
  background-position: 50% 60%;
  border: 1px solid #DDDDDD;
  padding: 10px 15px;
  margin-bottom: 5px;
}

.lessonStart .pSmall {
  display: block;
  clear: both;
  float: right;
  color: #666666;
}

/*public health*/
.orangeBoxPH {
  background-color: #FFFFFF;
  margin-top: 50px;
}

.vdxLogoPH {
  background-color: #FFFFFF;  
  padding-top: 30px;
}

.pageHeaderPH {
  background-image: none;  
  background-color: #FFFFFF;
}

.pageHeaderPH  #largeImage {
  display: block;
  margin-left: 15px;
}

.pageHeaderPH img.largeImage {
  display: block;  
  width: 400px;
  height: 215px;
  margin-left: 0px;  
}

.pageHeaderPH .imageContainer {
  position: absolute;
  z-index: 0;
  border: 1px solid #DDDDDD;  
}

.pageHeaderPH .showing {
  z-index: 1;
}

.pageHeaderPH .description {
  width: 390px;
  color: #666666;
  background-color: #EEEEEE;
  padding: 5px;
}

.middleColumnPH {
  float: left;
  width: 200px;
  height: 215px;
  display: block;  
  text-align: center;
}

.middleColumnPH table {
  height: 160px;
}

.middleColumnPH td {
  height: 42px;
}

.middleColumnPH .thumbnailContainer {
  height: 160px;
  margin-left: 14px;
}

.middleColumnPH img.thumbnail {
  display: block;
  float: left;
  width: 78px;
  height: 42px;
  border: 1px solid #CCCCCC;
  cursor: pointer;
  padding: 2px;
  margin: 0px 4px 4px 0px;
}

.middleColumnPH img.selected {
  border: 1px solid #FF9900;  
}

.rightColumn .publicHealth {
  margin-top: 240px;
}

/*4 min demo*/
.videoContainer {
  float: right; 
  padding: 4px;  
}

.videoContent {
  float: right; 
  margin-top: 20px;  
}

.videoContent .pageHeader {
  background-image: none;
  background-color: #FFFFFF;
}

.videoContent .pageText {
  margin-top: -140px;
}


/* expert editors */
.pageText .editorInfo {
  width: 45%;
  float: left;
  padding: 10px 0px 10px 0px;
  margin-bottom: 10px;
  margin-right: 20px;
  border-bottom: 1px solid #eeeeee;
}

/*homepage*/
.homeElement {
  height: 278px;
  background-color: none;
}
.homeBanner {
  display: block;
  height: 172px;
  color: #666666;
  background-image: url('images/homeBannerBg.gif');
  background-position: bottom right;
  background-repeat: repeat-y;
  margin-left: 7px;
}

.homeBanner img {
  float: left;
  padding-top: 56px;
  padding-left: 6px;
}

.homeBanner img.orangeBox {
  padding-top: 28px;
}

.homeBannerText {
  float: right; 
  width: 400px;
  padding-right: 7px;
}

.homeBanner h1, .homeBanner h2, .homeBanner h3 {
  display: block;
  padding: 0px;
  margin: 0px;
}

.homeBanner h1 {
  color: #007AB8;
  font-family: arial, sans-serif; 
  font-size: 13pt;
  font-weight: bold; 
  line-height: 11pt;
}

.homeBanner h2 {
  color: #007AB8;
  font-size: 11pt;  
  font-weight: normal; 
  font-style: italic;
}

.homeBanner h3 {
  font-weight: normal; 
  font-size: 10pt; 
  margin-top: 10px;
}

.homeColumns {
  float: right;
  clear: both;
  width: 755px;  
  margin-top: 25px;
}

.homeColumn {
  float: left;
  width: 216px;
  height: 100%;
  border-right: 1px solid #EEEEEE;
  padding: 0px 15px;
}

.homeColumn#rightColumn {
  width: 244px;
  border-right: 0px;
  padding: 0px 0px 0px 15px;
}

.homeColumn img.logo {
  margin-left: 5px;
}

.homeColumn a.bigLink {
  display: block;
  font-size: 11pt;
  background-image: url("images/orangeArrow.gif");
  background-repeat: no-repeat;
  background-position: 0px 9px;
  padding: 5px 0px 5px 14px;  
}

.columnTitle {
  color: #666666;
  font-size: 8pt;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #DDDDDD;
  padding: 5px 0px;
  margin-bottom: 20px;  
}

.callOut {
  width: 100%;
  padding: 0px;
  margin-bottom: 20px;
}

.callOut .title {
  color: #007ab8;  
  font-size: 13pt;
  font-weight: bold;
  padding: 0px 5px;  
}

.title a {
  color: #007ab8;  
  text-decoration: none; 
}

.callOut .subTitle {
  color: #666666;
  font-size: 9pt;
  font-weight: normal;
  padding: 0px 5px;  
}

.callOut p {
  font-size: 10pt;
  padding: 5px 5px 0px 5px;
  margin: 0px;
}

.newsAndEvents {
  width: 100%;
  border: 1px solid #DDDDDD;
  padding: 0px 0px 10px 0px;
}

.newsAndEvents .title {
  color: #007ab8;  
  font-size: 13pt;
  font-weight: bold;
  background-color: #EEEEEE;
  border-bottom: 1px solid #DDDDDD;
  padding: 5px;
}

.newsAndEvents .subTitle {
  font-size: .8em;
  text-align: right;
  padding: 4px 4px 5px 10px;  
}

.newsItem {
  padding: 0px 4px 0px 2px;
}

.newsItem a {
  display: block;  
  font-size: 8pt;
  background-image: url("images/orangeArrow.gif");
  background-repeat: no-repeat;
  background-position: 4px 7px;
  padding: 5px 0px 5px 14px;    
}

/*contact form*/
.required {
  color: #FF0000;
}

.baseForm .label {
  clear: both;
  float: left;
  width: 200px;
  margin-bottom: 10px;
}

.baseForm input, .baseForm select, .baseForm textarea {
  display: block;
  float: left;
  color: #666666;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  margin-bottom: 10px;
}

#contactForm #Message {
  width: 294px;
  height: 250px;
}

*html #contactForm #Message {
  width: 290px;
}

.formButton, #learDermForm .formButton {
  clear: both;
}

.formButton input,  input#submitButton {
  float: right;
  color: #FFFFFF;
  border: 1px solid #CCCCCC;
  background-image: url('images/formButtonBg.gif');
  background-repeat: repeat-x;
  background-position: 50% 57%;
  cursor: pointer;
  padding: 2px 10px;
  margin: 0px;
}

.learnDermForm .label {
  clear: left;
  float: left;
  width: 100px;
  padding-top: 2px;
  margin-right: 5px;
  margin-bottom: 0px;
  text-align: right;
}

.learnDermForm input {
  float: left;
  display: block;
  color: #666666;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  margin-bottom: 5px;
}

.companyInfo {
  float: left; 
  width: 220px;
  padding-top: 30px;
  padding-left: 30px;
}

.companyInfo .label {
  float: left;
  width: 75px;
}

/* purchase process */
.whtTable {
	background-color: #EEEEEE;
}

.whtTable td {
	vertical-align: bottom;
	background-color: #FFFFFF;
	padding: 8px 5px;
}

.payCell td {
	padding: 0px 0px 0px 0px;
	border: 1px solid #ff9900;
}

.payCell a {
  display: block;
	background-color: #FFFFFF;
	border: 1px solid #cccccc;
	padding: 4px;
	margin: 0px;
}

.payCell a:hover {
	border: 1px solid #0099cc;
}

.tooltip {
  z-index: 2; 
  visibility: hidden; 
  width:350px; 
  display:none; 
  background-color: #ffffe0; 
  border: solid 1px #cccccc; 
  padding: 3px;
  margin-top: 60px;  
}

#errorMessage p {
  display: block;
  width: 450px;
  color: #FF0000;
  font-size: 14px;
  line-height: 18px;
  border: 1px solid #FF0000;
  background-color: #FFEEEE;
  padding: 10px;
  margin-bottom: 20px;
}

#exisitingAccount {
  float: right;
  width: 250px;
  border: 1px solid #DDDDDD;
}

#exisitingAccount .title {
  color: #007ab8;
  font-weight: bold;  
  background-color: #EEEEEE;
  border-bottom: 1px solid #DDDDDD;
  padding: 5px 10px;
}

#exisitingAccount .content {
  padding: 10px;
}

#exisitingAccount form {
  margin: 0px;
}

.createAccount {
  width: 530px;  
}

.createAccount .title, .contentIndent .title {
  color: #007ab8;
  font-weight: bold;  
  background-color: #FFFFFF;
  border-bottom: 1px solid #DDDDDD;
  padding: 5px 10px;  
}

.createAccount .content {
  padding: 10px;
}

#clientDataForm, #clientDataForm table {
  width: 100%;
  margin: 0px;
}

.contentIndent {
  width: 700px;
  margin-left: 150px;
}

.purchaseFooter {
  clear: both;
  color: #999999;
  text-align: right;
  border-top: 1px solid #DDDDDD;
  padding-top: 5px;
  margin-top: 20px;
}

/* site map */
.siteMapColumn {
  width: 33%; 
  float: left;  
}

.siteMapColumn ul {
  width: 90%;
  font-size: 9pt;
  list-style-type: none;
  list-style-position: outside;
  padding: 0px;  
  margin: 0px;  
}

.siteMapColumn ul a {
  display: block;
  height: 100%;
  color: #007ab8;
  text-decoration: none;  
  border-bottom: 1px solid #CCCCCC;
  padding: 6px 0px 5px 0px;  
}

.siteMapColumn ul li {
  display: block;
  height: 100%;
  padding: 6px 0px 5px 12px;
}

.siteMapColumn ul li a {
  display: block;
  height: 100%;
  color: #007ab8;
  text-decoration: none;  
  border-bottom: 1px solid #CCCCCC;
  padding: 0px;
  margin: 0px;
}

#freeTrialButton {
  cursor: pointer;
  padding: 0px 33px;
}

#freeTrialButton img {
  float: left;
  width: 134px;
  height: 39px;
}

.vdxScreenShotSm, .middleColImg {
  float: left;
  position: relative; 
  margin-left: -179px;  
}

.vdxScreenShotLg {
  display: none; 
  position: absolute; 
  width: 380px; 
  height: 325px; 
  margin-top: -98px; 
  margin-left: -30px;
}