@charset "UTF-8";
/* CSS Document */

* {
margin: 0px;
padding: 0px;
}

body {
font-size: 100%;
font-family: Arial, Verdana, sans-serif;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}

img {
border: 0px;
margin-right: 2px;
}

/***********************************************************************/

/***** Clearfix code needed to make site work on Firefox to fix the nested float problem later on *****/

/* see http://positioniseverything.net/easyclearing.html for details of how it works */

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

/* (display: inline-block is valid CSS 2.1, but not CSS 2, which is why it might fail on the W3C validation page) */

.clearfix {
display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/************************************************************************/

h1 {
/*color: #6c9ac3;*/
color: #49a3ca;
font-size: 20px;
line-height: 18px;
padding-bottom: 15px;
}

h2 {
color: #49a3ca;
font-size: 15px;
line-height: 18px;
padding-bottom: 10px;
}

h3 {
color: #49a3ca;
font-size: 13px;
line-height: 18px;
padding-bottom: 10px;
}

h4 {
color: #49a3ca;
font-size: 13px;
line-height: 18px;
padding-bottom: 10px;
}

p {
color: #666666;
font-size: 13px;
line-height: 18px;
padding-bottom: 10px;
text-align: left;
}

a {
color: #49a3ca;
font-size: 12px;
}

a:hover {
color: #CCCCCC;
text-decoration: underline;
}

ul {
list-style-type: none;
margin-bottom: 10px;
}

li {
list-style-type: none;
color: #666666;
font-size: 13px;
line-height: 18px;
}

fieldset {
border: 1px solid #cccccc;
padding: 10px;
margin: 0px;
margin-bottom: 20px;
}

legend {
color: #cccccc;
font-size: 16px;
}

label {
color: #666666;
font-size: 12px;
width: 180px;
float: left;
margin-top: 7px;
margin-right: 5px;
}

/* this is used by the jQuery form validation to show the error message for each field */
label.error {
float: none;
color: #FF0000;
padding-left: 10px;
vertical-align: middle;
}

/* some labels need to be much wider or narrower than the standard width */
label.wide {
width: 500px;
}

label.narrow {
margin-top: 4px;
padding-top: auto;
width: auto;
}

label.block{
margin-top: 4px;
padding-top: auto;
width: 100px;
}

label.homepage{
margin-top: 4px;
padding-top: auto;
width: 280px;
}

label.checkboxlabel {
margin-top: 0px;
padding-top: auto;
width: auto;
}

label.labelwithtooltip {
margin-bottom: 2px;
}

textarea {
font-family: Arial, Helvetica, sans-serif;
}

input.narrow {
width: 180px;
margin-bottom: 5px;
padding: 5px;
}

input.wide {
width: 300px;
padding: 5px;
}

input.homepagesignupinput {
width: 290px;
padding: 5px;
}

input.standardsubmitbutton {
padding: 5px;
}

input.standardcheckbox {
margin-top: 3px;
}

textarea.standardtextarea {
font-size: 12px;
padding: 5px;
width: 100%;
font-family: Helvetica, Arial, sans-serif;
}

em {
color: #FF0000;
margin-right: 8px;
}

select.narrow {
width: 4em;
font-size: 12px;
margin-bottom: 2px;
}

select.wide {
width: 640px;
font-size: 12px;
margin-bottom: 2px;
}

select.fullwidth {
width: 95%;
font-size: 12px;
margin-bottom: 2px;
}

hr {
color: #CCCCCC;
background-color: #CCCCCC;
height: 1px;
}

div.foruminputline {
margin-bottom: 10px;
}

/******************************************************/

.inline {
display: inline;
}

.block {
display: block;
}

/*******************************************************/

.width_full {
width: 100%;
}

.width_wide {
width: 500px;
}

.width_medium {
width: 300px;
}

.width_narrow {
width: 100px;
}

/*******************************************************/

.successtext {
color: #006600;
}

.errortext {
color: #FF0000;
}

.smalltext {
font-size: 9px;
font-weight: bold;
}

.tinytext {
font-size: 8px;
}

.greytext {
color: #999999;
}

.orangetext {
color: #FF9900;
}

.purpletext {
color: #000099;
}

.greentext {
color: #006600;
}

.greytext {
color: #999999;
}

.redtext {
color: #CC0000;
}

.boldtext {
font-weight: bold;
}

.italictext {
font-style: italic;
}

/********************************************************/

.floatleft {
float: left;
}

.floatright {
float: right;
}

/******************************************************/

.supermassivebuttoncontainer {
width: 244px;
}


/******************************************************/

/* holds the logo */
#headercontainer {
width: 100%;
text-align: center;
height: 83px;
/*background: url(../images/banner_wide_top.jpg) no-repeat top center;*/
background-color: #486eff;
}

#header {
margin: 0px auto;
width: 900px;
text-align: left;
padding-top: 20px;
}

/* holds the tab navigation bar */
#navigationbarcontainer {
width: 100%;
text-align: center;
height: 35px;
/*background: #292aed url(../images/banner_wide_bottom.jpg) no-repeat top center;*/
background-color: #486eff;
}

#navigationbar {
margin: 0px auto;
width: 900px;
text-align: left;
font-size: 12px;
text-align: left;
}

/* holds everything below the tab navigation bar */
#pagecontentscontainer {
text-align: center;
}

#pagecontents {
margin: 0px auto;
width: 900px;
text-align: left;
}

/****************************************************/

#navigationbar ul {
padding: 0px;
margin: 0px;
height: 35px;
}

#navigationbar ul li {
float: right;
padding: 0px;
margin: 0px;
height: 35px;
}

/*******************************************************************/

#leftcolumn {
float: left;
width: 655px;
padding: 10px;
min-height: 300px;
margin-bottom: 10px;
}

#rightcolumn {
float: left;
width: 200px;
margin-bottom: 10px;
}

#fullwidthcolumn {
float: left;
width: 100%;
padding: 10px;
min-height: 300px;
margin-bottom: 10px;
}

/*****************************************************************/

/* used for the right column sections, like the testimonials panel */
.rightcolumndiv {
float: left;
width: 200px;
padding: 10px;
margin-bottom: 20px;
background-color: #dfeaf1;
border: 1px solid #293340;
}

/********************************************************************/

#breadcrumbdiv {
color: #666666;
font-size: 12px;
margin-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
height: 20px;
}

a:link.breadcrumblink{
color: #000000;
text-decoration: underline;
}

a:visited.breadcrumblink{
color: #000000;
text-decoration: underline;
}

a:hover.breadcrumblink {
color: #ACACAC;
text-decoration: underline;
}

a:active.breadcrumblink{
color: #000000;
text-decoration: underline;
}

/************************************************************************************/

#accountinfodiv {
border-top: 1px solid #BBBBBB;
font-size: 12px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 10px;
}

#accountinfodiv a {
font-size: 12px;
}

/*************************************************************************************/

#rightcolumnbox1 {
clear: left;
}

#rightcolumnbox2 {
clear: left;
}

/*************************************************************************************/

#footer {
color: #dedede;
font-size: 11px;
padding-top: 10px;
width: 100%;
clear: both;
border-top: 1px solid #BBBBBB;
margin-top: 10px;
}

#footer a {
font-size: 11px;
color: #666666;
text-decoration: none;
}

#footer p {
font-size: 10px;
text-align: left;
}

#footerlinks {
}

#footerlinks li {
float: left;
font-size: 11px;
padding-right: 5px;
padding-left: 8px;
background: url(../images/list_separator.gif) center left no-repeat;
}

#footerlinks li.first {
padding-left: 0px;
background: none; /* no line separator on the first one */
}

#footerlinks li a {
font-size: 11px;
text-decoration: none;
}

#footerlinks li a:hover {
text-decoration: underline;
}

/**************************************************************************************/

.rowofroundeddivs {
clear: left;
margin-bottom: 10px;
}

.roundedcornerdivcontainer {
float: left;
width: 245px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
background-color: #cae1f1;
}

.roundedcornerdivcontents {
background-color: #cae1f1;
}

.roundedcornerdivcontents h2 {
font-size: 14px;
color: #FFFFFF;
}

.roundedcornerdivcontents p {
padding-top: 5px;
font-size: 13px;
color: #FFFFFF;
}

/******************************************************************/

.homepagerowofdivs {
clear: left;
margin-bottom: 10px;
}

.homepagedivcontainer {
float: left;
width: 250px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
background-color: #dfeaf1;
}

.homepagedivcontainer img, .homepagedivcontainer p, .homepagedivcontainer h2 {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}

/*******************************************************************/

#successerrormessagediv, #loggedoutdiv {
width: 100%;
}

#successerrormessagediv p, #loggedoutdiv p {
margin-top: 10px;
margin-bottom: 10px;
}

/*********************************************************************/

.picturelefttextright {
width: 100%;
float: left;
margin-bottom: 20px;
}

.picturelefttextright img {
margin-right: 15px;
}

/***********************************************************************/

.standardtable {
width: 100%;
font-size: 12px;
}

.standardtable tr {
margin-bottom: 10px;
}

.standardtable th {
background: url(../images/greygradientbackground.jpg) top left repeat-x;
padding: 5px;
color: #333333;
font-weight: bold;
line-height: 15px;
}

.standardtable td {
padding: 5px;
color: #333333;
line-height: 15px;
vertical-align: top;
}

.standardtable td.firstcolumn {
font-weight: bold;
width: 200px;
}

/***********************************************************************/

#htmleditorbuttons {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}

#htmleditorbuttons h4 {
color: #666666;
}

/****************************************************************************/

#createnewemailmessagehtml {
width: 100%;
}

#createnewemailmessageplaintext {
width: 100%;
}

/*****************************************************************************/

/* divs to hold the various JavaScript output when user switches with radio buttons */
#createnewemailsubjectlinesdiv, #createnewemailmessagediv, #createnewmailinglistdiv, #createnewemailpreviewdiv {
}

/******************************************************************************/

#generatedemailpreview {
padding-bottom: 20px;
}

/*********************************************************************************/

#emailpreviewpagediv {
margin: 0px auto;
width: 700px;
margin: 20px;
}

#emailpreviewpagediv p {
text-align: center;
color: #ACACAC;
}

/*********************************************************************************/

/* these divs are normally invisible (display: none) - they hold the output of the AJAX if there
is an error, so the text is coloured red */

#nameerrordiv {
display: none;
color: #FF0000;
padding-top: 5px;
}

#nameerrordiv p {
padding-bottom: 0px;
}

#sendmyselfacopyerrordiv {
padding-top: 5px;
margin-bottom: 10px;
}

#sendmyselfacopyerrordiv p {
padding-bottom: 0px;
}

#confirmationpagetermsandconditionsdiv {
border: 1px solid #999999;
background-color: #F5F5F5;
display: none;
padding: 10px;
}

#confirmationpagetermsandconditionsdiv p {
padding-bottom: 0px;
}

#insertimagefromlibrarydiv {
display: none;
/* not shown to begin with */
padding-top: 10px;
padding-bottom: 20px;
height: 120px;
overflow: auto;
}

#insertimagefromlibrarydiv table {
width: 95%;
/* without this the div gets a horizontal scroll bar added, which looks odd */
}

/*********************************************************************************/

.spanlooklikelink {
color: #ACACAC;
font-size: 12px;
text-decoration: underline;
}

/***********************************************************************************/

/* set width to auto since these are to select the date in confirmation.php and so should not be 100% wide */
#campaignstarttimeday {
width: 50px;
}

#campaignstarttimemonth {
width: 110px;
}

#campaignstarttimeyear {
width: 80px;
}

#campaignstarttimehour {
width: 50px;
}

#campaignstarttimeminute {
width: 50px;
}

#emailbatchsize {
width: 100px;
}

/************************************************************************************/

/* used for e.g. the statistics div in the view statistics page. A "full width" div with a light border and background */
.lightgreybackgrounddiv {
width: 880px;
padding: 10px;
background: #F5F5F5;
border: 1px solid #999999;
margin-bottom: 10px;
position: relative;
}

.lightgreybackgrounddiv td {
padding: 2px;
font-size: 12px;
}

.lightgreybackgrounddiv td.titles {
color: #000000;
}

/**************************************************************************************/

.lightgreybackgrounddiv_buttoncontainer {
width: 190px;
float: left;
}

.lightgreybackgrounddiv_textcontainer {
width: 600px;
float: left
}

/**************************************************************************************/

#signupform td {
padding: 5px;
}

/****************************************************************************************/

.aligntop {
vertical-align: top;
background: #009966;
}

/****************************************************************************************/

.tabletdcontainer {
height: 120px;
vertical-align: top;
}

.tabletdcontainer img {
top: 0px;
}

/****************************************************************************************/

/* the view campaign statistics styles */
#viewstatisticsloadingdiv {
width: 100%;
text-align: center;
padding-top: 50px;
}

#viewstatisticscontentsdiv {
}

/**************************************************************************************/

/* special styles only used on the home page */
#homepageleftandrightcolumncontainer {
width: 100%;
clear: both;
}

/* the left column contains the video and the most recent blog entries */
#homepageleftcolumn {
float: left;
width: 500px;
margin-top: 20px;
}

#flash_player_container {
}

#homepageleftbanner {
padding-top: 10px;
padding-bottom: 10px;
}

#homepagebulletpoints {
}

#homepagebulletpoints li {
margin-bottom: 10px;
background-image: url(../images/homepage_large_bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
font-size: 17px;
line-height: 20px;
}

/* the right column holds the sign-up and login forms */
#homepagerightcolumn {
float: right;
margin-top: 20px;
}

#homepageblogposts {
margin-top: 20px;
width: 345px;
}

#homepageblogposts h1 {
}

#homepageblogposts h1 a {
font-size: 22px;
line-height: 24px;
padding-bottom: 15px;
}

.homepageblogpost {
margin-bottom: 10px;
}

.homepageblogpost h2 {
margin: 0px;
padding: 0px
}

.homepageblogpost .homepageblogpostdate {
font-size:9px;
margin: 0px;
padding: 0px;
}

.homepageblogpost .homepageblogpostcontent {
font-size: 12px;
margin-bottom: 0px;
padding-bottom: 0px;
}

.homepagetitle {
font-size: 28px;
}

#homepageleftcolumn h1 {
margin-bottom: 10px;
}

#homepagerightcolumn .caption {
text-align: center;
margin-top: 5px;
}

.homepagetable {
width: 100%;
font-size: 12px;
margin-bottom: 10px;
}

.homepagetable tr {
margin-bottom: 10px;
}

.homepagedtable th {
background: url(../images/greygradientbackground.jpg) top left repeat-x;
padding: 8px;
color: #333333;
font-weight: bold;
line-height: 15px;
}

.homepagetable td {
padding: 8px;
vertical-align: top;
font-size: 15px;
color: #666666;
}

.homepagetable td.firstcolumn {
font-weight: bold;
width: 200px;
}

.homepagerightcolumndiv {
float: left;
width: 400px;
padding: 10px;
margin-bottom: 20px;
background-color: #dfeaf1;
border: 1px solid #293340;
}


/***********************************************************************/

/* the textarea/tinyMCE HTML box. Made bigger so it is easier to use */
.messagehtml, .simplemode, .advancedmode {
width: 750px;
height: 350px;
}

/**************************************************************************/

/* the "my image library" iframe */
#imagemanagerFrame {
margin-top: 10px;
}

/***************************************************************************/

/* the drop down for how many rows to show in a table at a time e.g. 50,100 etc */
#numberofrowstoshowintable {
width: 100%;
margin-bottom: 10px;
}

#numberofrowstoshowintableinnerdiv {
float: right;
}

/****************************************************************************/

.borderedbox {
padding: 10px;
padding-bottom: 8px;
border: 1px solid #CCCCCC;
background-color: #F9F9F9;
margin-bottom: 10px;
}

/*****************************************************************************/

/* the TinyMCE editor is contained within a div, since there needs to be an explanation as to how to include
images in it - since can't do this in Javascript, need to add some HTML code to overlay the editor with the
explanation text next to the image button */
#tinymcehtmleditor, #standardoptions_messagehtml, #advancedoptions_messagehtml {
position: relative;
}

#tinymcehtmleditorimageexplanation_addtemplate, #tinymcehtmleditorimageexplanation_modifytemplate, #tinymcehtmleditorimageexplanation_standard, #tinymcehtmleditorimageexplanation_advanced {
font-size: 10px;
position: absolute;
left: 32px;
}

/* for the add template page ... */
#tinymcehtmleditorimageexplanation_addtemplate {
top: 113px;
}

/* for the modify template page */
#tinymcehtmleditorimageexplanation_modifytemplate {
top: 113px;
}

/* for the wizard (stage 6) ... */
#tinymcehtmleditorimageexplanation_standard {
top: 113px;
}

#tinymcehtmleditorimageexplanation_advanced {
top: 113px;
}

/******************************************************************************/

/* there are two divs - one for warning and one for success. Each has an icon as its background image, with
padding to force the content to the side to leave room for the icon */
.warningdiv, .successdiv {
padding-left: 50px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #edebec;
margin-bottom: 20px;
width: 90%;
text-align: center;
}

.warningdiv {
background: #f9f9f9 url(../images/icon_warning.gif) 10px 10px no-repeat;
}

.successdiv {
background: #f9f9f9 url(../images/icon_ticksmall.gif) 10px 10px no-repeat;
}

/**************************************************************************/

/* similarly there is another div for tool tips */

.slidedowntooltipcontainer {
min-height: 12px;
margin-top: 2px;
margin-bottom: 2px;
}

.slidedowntooltip {
padding: 5px;
border: 1px solid #CCCCCC;
background-color: #C4EEED;
width: 630px;
display: none;
margin: 0 auto;
}

.slidedowntooltip p {
font-size: 11px;
}

/* the image that appears to the left of the form input label */
.tooltipicon {
padding-top: 7px;
padding-right: 7px;
float: left;
padding-bottom: 2px;
}

/******************************************************************************/

/* this div holds the number of the stage you are on when creating a campaign */
.wizardstagenumberscontainer {
clear: left;
width: 818px;
margin-bottom: 20px;
text-align: center;
}

/********************************************************************************/

.highlightedgreystripediv {
background-color: #eeeeee;
border: 1px solid #CCCCCC;
color: #666666;
font-size: 18px;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}

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

.highlightedgreystripediv img {
margin-right: 10px;
}

/*********************************************************************************/

.highlightedyellowdiv {
width: 100%;
background-color: #ffffd4;
border: 1px solid #eaeac3;
color: #666666;
font-size: 12px;
padding: 10px;
margin-bottom: 10px;
text-align: center;
clear: left;
}

.highlightedyellowdiv h3 {
color: #666666;
font-size: 14px;
}

/*******************************************************************************/

.videotutorialstable {
width: 100%;
height: 120px;
}

/******************************************************************/

/* tabs styles ... */

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Skin */
.tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 10px; /* the 10px pushes the tab over a bit to give some space to the left of the first one */
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.tabs-nav li {
float: left;
margin: 0 0 0 1px;
min-width: 84px; /* be nice to Opera */
}
.tabs-nav a, .tabs-nav a span {
display: block;
padding: 0 10px;
background: url(../images/tab.png) no-repeat;
}
.tabs-nav a {
position: relative;
top: 1px;
z-index: 2;
padding-left: 0;
color: #27537a;
font-size: 12px;
font-weight: bold;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap; /* required in IE 6 */    
}
.tabs-nav .tabs-selected a {
color: #000;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
background-position: 100% -150px;
outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
background-position: 100% -100px;
}
.tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.tabs-nav .tabs-selected a span {
padding-top: 7px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.tabs-nav .tabs-disabled {
opacity: .4;
}
.tabs-container {
border-top: 1px solid #97a5b0;
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
padding-left: 10px;
padding-right: 10px;
}
.tabs-loading em {
padding: 0 0 0 20px;
background: url(../images/loading.gif) no-repeat 0 50%;
}

/***********************************************************/

.createcampaignwizardcontainer {
background-color: #eeeeee;
padding: 20px;
height: 450px;
width: 818px;
}

#standardandadvancedtabcontainer {
margin-bottom: 10px;
width: 795px;
}

#standardandadvancedtabcontainer ul {
clear: left;
}

.tabcontents {
clear: left;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
background-color: #FFFFFF;
padding-top: 0px;
width: 795px;
}

/*****************************************************************/

/* the div that holds the response of the validation check for each form input field */
.validationresponse {
margin-top: 10px;
margin-bottom: 10px;
font-weight: normal;
font-size: 13px;
}

.validationresponse img {
padding-top: 3px;
margin-right: 5px;
}

/****************************************************************/

/* classes to style the create campaign form input fields so they are all consistent */
.createcampaignwizard_textinput_narrow {
width: 200px;
padding: 5px;
}

.createcampaignwizard_textinput_wide {
width: 400px;
padding: 5px;
}

.createcampaignwizard_textarea_narrow {
width: 400px;
height: 65px;
padding: 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}

.createmailinglist_textarea_wide {
width: 880px;
height: 100px;
padding: 5px;
}

#standardoptions_campaignstarttimeday, #advancedoptions_campaignstarttimeday {
margin-top: 2px;
width: 50px;
}

#standardoptions_campaignstarttimemonth, #advancedoptions_campaignstarttimemonth {
margin-top: 2px;
width: 100px;
}

#standardoptions_campaignstarttimeyear, #advancedoptions_campaignstarttimeyear {
margin-top: 2px;
width: 70px;
margin-right: 30px;
}

#standardoptions_campaignstarttimehour, #advancedoptions_campaignstarttimehour {
margin-top: 2px;
width: 50px;
}

#standardoptions_campaignstarttimeminute, #advancedoptions_campaignstarttimeminute {
margin-top: 2px;
width: 50px;
}

#advancedoptions_emailbatchsize {
margin-top: 2px;
width: 120px;
}

#advancedoptions_randomwordlist {
margin-top: 2px;
width: 400px;
}

#advancedoptions_addemailopenedtracking, #advancedoptions_addlinktracking {
margin-top: 2px;
}

/************************************************************************/

/* class added to "example" text in text input fields, that gets replaced when the user enters their own */
.example {
color: #CCCCCC;
}

/*************************************************************************/

/* the right column on the home page is divided in to two forms. The top one is a login form and the bottom one is a sing-up form */

/* the login form */

#homepagelogindiv {
background: url(../images/homepage_login_background.gif) no-repeat;
width: 353px;
height: 242px;
margin-bottom: 10px;
}

#homepagelogindivform {
padding-top: 60px;
margin-left: 15px;
position: relative;
}

#homepagelogindivform p {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
}

#homepagelogindivform p.tinytext {
color: #FFFFFF;
font-size: 11px;
}

#homepagelogindivform #loginform label {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
}

/* now need to position the form inputs individually to line up with the image text on the background */
#homepagelogin_email {
position: absolute;
top: 115px;
left: 8px;
width: 290px;
}

#homepagelogin_password {
position: absolute;
top: 180px;
left: 8px;
width: 150px;
}

#homepagelogin_gosubmitbutton {
position: absolute;
top: 180px;
left: 250px;
}

/* the signup form ... */

#homepagesignupdiv {
background: url(../images/homepage_signup_background.gif) no-repeat;
width: 353px;
height: 225px;
}

#homepagesignupdivform {
padding-top: 60px;
margin-left: 15px;
position: relative;
}

#homepagesignupdivform p {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
}

#homepagesignupdivform p.tinytext {
color: #FFFFFF;
font-size: 11px;
}

#homepagesignupdivform #signupform label {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
}

/* now need to position the form inputs individually to line up with the image text on the background */
#homepagesignup_email {
position: absolute;
top: 88px;
left: 8px;
width: 290px;
}

#homepagesignup_captchacodeimage {
position: absolute;
top: 136px;
left: 220px;
width: 62px;
}

#homepagesignup_captchacode {
position: absolute;
top: 160px;
left: 8px;
width: 150px;
}

#homepagesignup_gosubmitbutton {
position: absolute;
top: 160px;
left: 250px;
}

/**************************************************************/

.wizardtooltip {
padding: 10px;
display: none;
}

/**************************************************************/

/* SimpleModal Basic Modal Dialog styles */

/* Overlay */
#modalOverlay {background-color:#000; cursor:wait;}

/* Container */
#modalContainer {width:500px; left:50%; top:35%; margin-left:-250px; background-color:#fff; border:3px solid #ccc;}
#modalContainer a.modalCloseImg {background:url(../images/xtoclosedialogbox.gif) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-18px; cursor:pointer;}

#modalContainer #basicModalContent {padding:8px;}

/* IE 6 hacks*/
/*
#modalContainer {top:expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(15 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');}
#modalContainer a.modalCloseImg {background:none; right:-14px; width:22px; height:26px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/xtoclosedialogbox.gif',sizingMethod='scale');}
*/

/*************************************************************/

#recipientlocationmap {
width: 870px;
height: 350px;
}

/*************************************************************/

/* iframe and object email previews */
.wizardstage9emailpreview, #viewtemplateinwizardiframe {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}

/**************************************************************/

/* the 'my account' (dashboard) panels ... */
.myaccounttopsectionleft {
float: left;
margin-right: 10px;
width: 264px;
height: 200px;
}

.myaccounttopsectionright {
float: left;
width: 580px;
height: 200px;
}

/**************************************************************/

/* jQuery Flexigrid styles */

.flexigrid
{
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
position: relative;
border: 0px solid #eee;
overflow: hidden;
color: #000;
}

.flexigrid.hideBody
{
height: 26px !important;
border-bottom: 1px solid #ccc;
}

.ie6fullwidthbug
{
border-right: 0px solid #ccc;
padding-right: 2px;	
}

.flexigrid div.nDiv
{
background: #eee url(../images/flexigrid_line.gif) repeat-y -1px top;
border: 1px solid #ccc;
border-top: 0px;
overflow: auto;
left: 0px;
position: absolute;
z-index: 999;
float: left;
}

.flexigrid div.nDiv table
{
margin: 2px;
}

.flexigrid div.hDivBox
{
float: left; 
padding-right: 40px;
}

.flexigrid div.bDiv table
{
margin-bottom: 10px;
}

.flexigrid div.bDiv table.autoht
{
border-bottom: 0px;
margin-bottom: 0px;
}

.flexigrid div.nDiv td
{
padding: 2px 3px;
border: 1px solid #eee;
cursor: default;
}

.flexigrid div.nDiv tr:hover td, .flexigrid div.nDiv tr.ndcolover td
{
background: #d5effc url(../images/flexigrid_hl.png) repeat-x top;
border: 1px solid #a8d8eb;
}

.flexigrid div.nDiv td.ndcol1
{
border-right: 1px solid #ccc;
}

.flexigrid div.nDiv td.ndcol2
{
border-left: 1px solid #fff;
padding-right: 10px;
}

.flexigrid div.nDiv tr:hover td.ndcol1, .flexigrid div.nDiv tr.ndcolover td.ndcol1
{
border-right: 1px solid #d2e3ec;
}

.flexigrid div.nDiv tr:hover td.ndcol2, .flexigrid div.nDiv tr.ndcolover td.ndcol2
{
border-left: 1px solid #eef8ff;
}

.flexigrid div.nBtn
{
position: absolute;
height: 24px;
width: 14px;
z-index: 900;
background: #fafafa url(../images/flexigrid_fhbg.gif) repeat-x bottom;
border: 0px solid #ccc;
border-left: 1px solid #ccc;
top: 0px;
left: 0px;
margin-top: 1px;
cursor: pointer;
display: none;
}

.flexigrid div.nBtn div
{
height: 24px;
width: 12px;
border-left: 1px solid #fff;
float: left;
background: url(../images/flexigrid_ddn.png) no-repeat center;
}		

.flexigrid div.nBtn.srtd
{
background: url(../images/flexigrid_wbg.gif) repeat-x 0px -1px;
}


.flexigrid div.mDiv
{
background: url(../images/flexigrid_wbg.gif) repeat-x top;
border: 1px solid #ccc;
border-bottom: 0px;
border-top: 0px;
font-weight: bold;
display: block;
overflow: hidden;
white-space: nowrap;
position: relative;
}

.flexigrid div.mDiv div
{
padding: 6px;
white-space: nowrap;
}

.flexigrid div.mDiv div.ptogtitle
{
position: absolute;
top: 4px;
right: 3px;
padding: 0px;
height: 16px;
width: 16px;
overflow: hidden;
border: 1px solid #ccc;
cursor: pointer;
}

.flexigrid div.mDiv div.ptogtitle:hover
{
background-position: left -2px;
border-color: #bbb;
}

.flexigrid div.mDiv div.ptogtitle span
{
display: block;
border-left: 1px solid #eee;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
width: 14px;
height: 14px;
background: url(../images/flexigrid_uup.png) no-repeat center;
}

.flexigrid div.mDiv div.ptogtitle.vsble span
{
background: url(../images/flexigrid_ddn.png) no-repeat center;			
}			

.flexigrid div.tDiv /*toolbar*/
{
background: #fafafa url(../images/flexigrid_bg.gif) repeat-x top;
position: relative;			
border: 1px solid #ccc;
border-bottom: 0px;
overflow: hidden;
}

.flexigrid div.tDiv2
{
float: left;
clear: both;
padding: 1px;
}

.flexigrid div.sDiv /*toolbar*/
{
background: #fafafa url(../images/flexigrid_bg.gif) repeat-x top;
position: relative;
border: 1px solid #ccc;
border-top: 0px;
overflow: hidden;
display: none;
}

.flexigrid div.sDiv2
{
float: left;
clear: both;
padding: 5px;
padding-left: 5px;
width: 1024px;
}

.flexigrid div.sDiv2 input, .flexigrid div.sDiv2 select
{
vertical-align: middle;
}

.flexigrid div.btnseparator
{
float: left;
height: 22px;
border-left: 1px solid #ccc;
border-right: 1px solid #fff;
margin: 1px;
}

.flexigrid div.fbutton
{
float: left;
display: block;
cursor: pointer;
padding: 1px;
}

.flexigrid div.fbutton div
{
float: left;
padding: 1px 3px;
}		

.flexigrid div.fbutton span
{
float: left;
display: block;
padding: 3px;
}

.flexigrid div.fbutton:hover, .flexigrid div.fbutton.fbOver
{
padding: 0px;
border: 1px solid #ccc;
}

.flexigrid div.fbutton:hover div, .flexigrid div.fbutton.fbOver div
{
padding: 0px 2px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}		


/* end toolbar*/

.flexigrid div.hDiv
{
background: #fafafa url(../images/flexigrid_fhbg.gif) repeat-x bottom;
position: relative;
border: 1px solid #ccc;
border-bottom: 0px;
overflow: hidden;
}	

.flexigrid div.hDiv table
{
border-right: 1px solid #fff;
}

.flexigrid div.cDrag
{
float: left;
position: absolute;
z-index: 2;
overflow: visible;
}

.flexigrid div.cDrag div
{
float: left;
background: none;
display: block;
position: absolute;
height: 24px;
width: 5px;
cursor: col-resize;
}

.flexigrid div.cDrag div:hover, .flexigrid div.cDrag div.dragging
{
background: url(../images/flexigrid_line.gif) repeat-y 2px center;
}

.flexigrid div.iDiv
{
border: 1px solid #316ac5;
position: absolute;
overflow: visible;
background: none;
}

.flexigrid div.iDiv input, .flexigrid div.iDiv select, .flexigrid div.iDiv textarea
{
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
}

.flexigrid div.iDiv input.tb
{
border: 0px;
padding: 0px;
width: 100%;
height: 100%;
padding: 0px;
background: none;
}			

.flexigrid div.bDiv
{
border: 1px solid #ccc;
border-top: 0px;
background: #fff;
overflow: auto;
position: relative;
}

.flexigrid div.bDiv table
{
border-bottom: 1px solid #ccc;
}

.flexigrid div.hGrip
{
position: absolute;
top: 0px;
right: 0px;
height: 5px;
width: 5px;
background: url(../images/flexigrid_line.gif) repeat-x center;
margin-right: 1px;
cursor: col-resize;
}

.flexigrid div.hGrip:hover, .flexigrid div.hGrip.hgOver
{
border-right: 1px solid #999;				
margin-right: 0px;
}

.flexigrid div.vGrip
{
height: 5px;
overflow: hidden;
position: relative;
background: #fafafa url(../images/flexigrid_wbg.gif) repeat-x 0px -1px;
border: 1px solid #ccc;
border-top: 0px;
text-align: center;
cursor: row-resize;
}

.flexigrid div.vGrip span
{
display: block;
margin: 1px auto;
width: 20px;
height: 1px;
overflow: hidden;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;	
background: none;
}

.flexigrid div.hDiv th, .flexigrid  div.bDiv td  /* common cell properties*/
{
text-align: left;
border-right: 1px solid #ddd;
border-left: 1px solid #fff;
overflow: hidden;
vertical-align: top !important;
}

.flexigrid div.hDiv th div, .flexigrid  div.bDiv td  div, div.colCopy div/* common inner cell properties*/
{
padding: 5px;
border-left: 0px solid #fff;
}

.flexigrid div.hDiv th, div.colCopy
{
font-weight: normal;
height: 24px;
cursor: default;
white-space: nowrap;
overflow: hidden;
}	

div.colCopy {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
background: #fafafa url(../images/flexigrid_fhbg.gif) repeat-x bottom;
border: 1px solid #ccc;
border-bottom: 0px;
overflow: hidden;
}

.flexigrid div.hDiv th.sorted
{
background: url(../images/flexigrid_wbg.gif) repeat-x 0px -1px;
border-bottom: 0px solid #ccc;
}

.flexigrid div.hDiv th.thOver
{
}

.flexigrid div.hDiv th.thOver div, .flexigrid div.hDiv th.sorted.thOver div
{
border-bottom: 1px solid orange;
padding-bottom: 4px;
}

.flexigrid div.hDiv th.sorted div
{
border-bottom: 0px solid #ccc;
padding-bottom: 5px;
}

.flexigrid div.hDiv th.thMove
{
background: #fff;
color: #fff;
}

.flexigrid div.hDiv th.sorted.thMove div
{
border-bottom: 1px solid #fff;
padding-bottom: 4px
}

.flexigrid div.hDiv th.thMove div
{
background: #fff !important;
}	

.flexigrid div.hDiv th div.sdesc
{
background: url(../images/flexigrid_dn.png) no-repeat center top;
}	

.flexigrid div.hDiv th div.sasc
{
background: url(../images/flexigrid_up.png) no-repeat center top;
}	

.flexigrid div.bDiv td
{
border-bottom: 1px solid #fff;
vertical-align: top;
white-space: nowrap;
}

.flexigrid div.hDiv th div
{
}

.flexigrid span.cdropleft
{
display: block;
background: url(../images/flexigrid_prev.gif) no-repeat -4px center;
width: 24px;
height: 24px;
position: relative;
top: -24px;
margin-bottom: -24px;
z-index: 3;
}

.flexigrid div.hDiv span.cdropright
{
display: block;
background: url(../images/flexigrid_next.gif) no-repeat 12px center;
width: 24px;
height: 24px;
float: right;
position: relative;
top: -24px;
margin-bottom: -24px;
}


.flexigrid div.bDiv td div
{
border-top: 0px solid #fff;
padding-bottom: 4px;
}


.flexigrid tr td.sorted
{
background: #f3f3f3;
border-right: 1px solid #ddd;
border-bottom: 1px solid #f3f3f3;
}		

.flexigrid tr td.sorted div
{
}


.flexigrid tr.erow td
{
background: #f7f7f7;
border-bottom: 1px solid #f7f7f7;
}

.flexigrid tr.erow td.sorted
{
background: #e3e3e3;
border-bottom: 1px solid #e3e3e3;
}						

.flexigrid tr.erow td.sorted div
{
}

.flexigrid div.bDiv tr:hover td, 
.flexigrid div.bDiv tr:hover td.sorted,
.flexigrid div.bDiv tr.trOver td.sorted, 
.flexigrid div.bDiv tr.trOver td
{
background: #d9ebf5;
border-left: 1px solid #eef8ff;
border-bottom: 1px dotted #a8d8eb;
}

.flexigrid div.bDiv tr.trSelected:hover td, 
.flexigrid div.bDiv tr.trSelected:hover td.sorted,
.flexigrid div.bDiv tr.trOver.trSelected td.sorted, 
.flexigrid div.bDiv tr.trOver.trSelected td,
.flexigrid tr.trSelected td.sorted, 
.flexigrid tr.trSelected td
{
background: #d5effc url(../images/flexigrid_hl.png) repeat-x top;
border-right: 1px solid #d2e3ec;
border-left: 1px solid #eef8ff;
border-bottom: 1px solid #a8d8eb;
}

/* novstripe adjustments */

.flexigrid.novstripe .bDiv table
{
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}

.flexigrid.novstripe  div.bDiv td  
{
border-right-color: #fff;
}

.flexigrid.novstripe div.bDiv tr.erow td.sorted
{
border-right-color: #e3e3e3;
}

.flexigrid.novstripe div.bDiv tr td.sorted
{
border-right-color: #f3f3f3;
}

.flexigrid.novstripe  div.bDiv tr.erow td  
{
border-right-color: #f7f7f7;
border-left-color: #f7f7f7;
}

.flexigrid.novstripe div.bDiv tr.trSelected:hover td, 
.flexigrid.novstripe div.bDiv tr.trSelected:hover td.sorted,
.flexigrid.novstripe div.bDiv tr.trOver.trSelected td.sorted, 
.flexigrid.novstripe div.bDiv tr.trOver.trSelected td,
.flexigrid.novstripe tr.trSelected td.sorted, 
.flexigrid.novstripe tr.trSelected td
{
border-right: 1px solid #0066FF;
border-left: 1px solid #0066FF;
}		

.flexigrid.novstripe div.bDiv tr.trOver td, .flexigrid.novstripe div.bDiv tr:hover td
{
border-left-color: #d9ebf5;
border-right-color: #d9ebf5;
}

/* end novstripe */

.flexigrid div.pDiv
{
background: url(../images/flexigrid_wbg.gif) repeat-x 0 -1px;
border: 1px solid #ccc;
border-top: 0px;
overflow: hidden;
white-space: nowrap;
position: relative;
}

.flexigrid div.pDiv div.pDiv2
{
margin: 3px;
margin-left: -2px;
float: left;
width: 1024px;
}	

div.pGroup
{
float: left;
background: none;
height: 24px;
margin: 0px 5px;
}

.flexigrid div.pDiv .pPageStat, .flexigrid div.pDiv .pcontrol
{
position: relative;

top: 5px;
overflow: visible;
}

.flexigrid div.pDiv input
{
vertical-align: text-top;
position: relative;
top: -5px;
}

.flexigrid div.pDiv  div.pButton
{
float: left;
width: 22px;
height: 22px;
border: 0px;
cursor: pointer;
overflow: hidden;
}

.flexigrid div.pDiv  div.pButton:hover, .flexigrid div.pDiv  div.pButton.pBtnOver
{
width: 20px;
height: 20px;
border: 1px solid #ccc;
cursor: pointer;
}

.flexigrid div.pDiv  div.pButton span
{
width: 20px;
height: 20px;
display: block;
float: left;
}		

.flexigrid div.pDiv  div.pButton:hover span, .flexigrid div.pDiv  div.pButton.pBtnOver span
{
width: 19px;
height: 19px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}		


.flexigrid .pSearch
{
background: url(../images/flexigrid_magnifier.png) no-repeat center;
}

.flexigrid .pFirst
{
background: url(../images/flexigrid_first.gif) no-repeat center;
}

.flexigrid .pPrev
{
background: url(../images/flexigrid_prev.gif) no-repeat center;
}

.flexigrid .pNext
{
background: url(../images/flexigrid_next.gif) no-repeat center;
}

.flexigrid .pLast
{
background: url(../images/flexigrid_last.gif) no-repeat center;
}

.flexigrid .pReload
{
background: url(../images/flexigrid_load.png) no-repeat center;
}

.flexigrid .pReload.loading
{
background: url(../images/flexigrid_load.gif) no-repeat center;
}															

/* ie adjustments */

.flexigrid.ie div.hDiv th div, .flexigrid.ie  div.bDiv td  div, div.colCopy.ie div/* common inner cell properties*/
{
overflow: hidden;
}			

.flexigrid div.fbutton .add
{
background: url(../images/flexigrid_add.png) no-repeat center left;
}	

.flexigrid div.fbutton .delete
{
background: url(../images/flexigrid_close.png) no-repeat center left;
}

/*******************************************************************************/

/* styles used by Thickbox (used to hold the pop-up wizard) */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

#TB_secondLine {
	font: 10px Arial, Helvetica, sans-serif;
	color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
}

.TB_overlayMacFFBGHack {background: url(../images/thickbox_macFFBgHack.png) repeat;}

.TB_overlayBG {
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
	position: fixed;
	background: #eee; /* shows through as the border */
	z-index: 102;
	color:#000000;
	display:none;
	border: 4px solid #525252;
	text-align:left;
	top:50%;
	left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
	display:block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_caption{
	height:25px;
	padding:7px 30px 10px 25px;
	float:left;
	color: #fff;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	float:right;
	color: #fff;
}

#TB_closeAjaxWindow{
	padding:7px 10px 5px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
	font-weight:bold;
}

#TB_title{
	background-color:#ccc; /* the title bar of the wizard */
	height:27px;
	display: block;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
	padding:15px;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: fixed;
	display:none;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
	z-index:99;
	position:fixed;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	height:100%;
	width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}

/***********************************************************************/

/* the links to the video tutorials are in a separate box on the right of the page */

div.template_video_tutorial_links_container {
width: 320px;
float: right;
padding: 10px;
background-color: #eee;
border: 1px solid #ccc;
margin-right: 10px; /* push it away from the edge */
}

div.template_video_tutorial_links_container h2 {
font-size: 14px;
margin-bottom: 10px;
padding-bottom: 0px;
font-weight: bold;
}

div.template_video_tutorial_links_container li {
background-image: url(../images/icon_video_tutorial_play.gif);
background-repeat: no-repeat;
padding-left: 40px;
line-height: 20px; /* the height of the icon */
}

/************************************************************************/

/* divs to hold the data on the statistics page ... */

div#statistics_left_column {
width: 420px;
float: left;
margin-right: 20px;
}

div#statistics_right_column {
width: 420px;
float: left;
}

/* the summary of the statistics is shown in a table ... */

table.statistics_campaign_summary {
width: 420px;
}

table.statistics_campaign_summary td.item {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
}

table.statistics_campaign_summary td.value {
padding: 10px;
color: #fff;
background-color: #3571E7;
font-weight: bold;
}

/************************************************************************/

/* jPicker styles - NOT USED */

.jPicker_Picker {
  display: inline-block;
  height: 24px; /* change this value if using a different sized color picker icon */
  position: relative; /* make this element an absolute positioning container */
  text-align: left; /* make the zero width children position to the left of container */
  width: 25px; /* change this value if using a different sized color picker icon */
}
.jPicker_Color {
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
.jPicker_Icon {
  background-repeat: no-repeat;
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
.jPicker_Container {
  display: none;
  z-index: 10; /* make sure container draws above color picker icon in Firefox/Safari/Chrome/Opera/etc. - IE calculates z-index so this won't work - we will hide all color picker icons placed after the selected one in code when shown in IE */
  
}
.jPicker_Container label {
	width: auto;
}
.jPicker_table {
  background-color: #efefef;
  border: 1px outset #666;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  margin: 0px;
  padding: 5px;
  
}
.jPicker_table td {
  margin: 0px;
  padding: 0px;
  vertical-align: top;
}
.jPicker_MoveBar {
  background-color: #dddddd;
  border: 1px outset #aaa;
  cursor: move;
  height: 12px;
}
.jPicker_Title {
  font-size: 11px !important;
  font-weight: bold;
  margin: -2px 0px 0px 0px;
  padding: 0px;
  text-align: center;
  width: 100%;
}
.jPicker_ColorMap {
  border: 2px inset #eee;
  cursor: crosshair;
  height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
  margin: 0px 5px 0px 5px;
  overflow: hidden; /* hide the overdraw of the Color Map icon when at edge of viewing box */
  padding: 0px;
  position: relative; /* make this element an absolute positioning container */
  width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
}
div[class="jPicker_ColorMap"] {
  height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
  width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
}
.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorMap_l3, .jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4, .jPicker_ColorBar_l5, .jPicker_AlphaBar_l1, .jPicker_AlphaBar_l2 {
  background-repeat: no-repeat;
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
.jPicker_ColorMap_l1 {
  background-color: #000000;
  background-image: none;
}
.jPicker_ColorMap_l2 {
  background-color: transparent;
}
.jPicker_ColorMap_l3 {
  background-repeat: repeat;
}
.jPicker_ColorMap_Arrow {
  display: block;
  position: absolute;
}
.jPicker_ColorBar {
  border: 2px inset #eee;
  cursor: n-resize;
  height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
  margin: 12px 10px 0px 5px;
  padding: 0px;
  position: relative;
  width: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
}
div[class="jPicker_ColorBar"] {
  height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
  width: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
}
.jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3 {
  background-color: transparent;
  background-image: none;
  background-repeat: repeat-x;
}
.jPicker_ColorBar_l4 {
  background-color: transparent;
  background-repeat: repeat-x;
}
.jPicker_ColorBar_l5 {
  background-color: transparent;
  background-repeat: repeat;
}
.jPicker_ColorBar_Arrow {
  display: block;
  left: -10px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */
  position: absolute;
}
.jPicker_AlphaBar {
  border: 2px inset #eee;
  cursor: e-resize;
  display: none;
  height: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
  margin: 10px 5px 4px 5px;
  padding: 0px;
  position: relative;
  width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
}
div[class="jPicker_AlphaBar"] {
  height: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
  width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
}
.jPicker_AlphaBar_Arrow {
  display: block;
  top: -10px; /* (arrow height / 2) - (element height / 2) - position arrows' center in elements' center */
  position: absolute;
}
.jPicker_EnableAlpha {
  text-align: left;
}
.jPicker_Preview {
  font-size: x-small;
  text-align: center;
}
.jPicker_Preview div {
  border: 2px inset #eee;
  height: 62px;
  margin: 0px auto;
  padding: 0px;
  width: 62px;
}
.jPicker_Preview div span {
  border: 1px solid #000;
  display: block;
  height: 30px;
  margin: 0px auto;
  padding: 0px;
  width: 60px;
}
.jPicker_Preview div span.jPicker_Active {
  border-bottom-width: 0px;
}
.jPicker_Preview div span.jPicker_Current {
  border-top-width: 0px;
  cursor: pointer;
}
.jPicker_OkCancel {
  text-align: center;
  width: 120px;
}
.jPicker_OkCancel input {
  width: 100px;
}
.jPicker_OkCancel input.jPicker_Ok {
  margin: 12px 0px 5px 0px;
}
.jPicker_HueText, .jPicker_SaturationText, .jPicker_BrightnessText, .jPicker_RedText, .jPicker_GreenText, .jPicker_BlueText, .jPicker_AlphaText {
  background-color: #fff;
  border: 1px inset #aaa;
  margin: 0px 0px 0px 5px;
  width: 30px;
}
.jPicker_HexText {
  background-color: #fff;
  border: 1px inset #aaa;
  margin: 0px 0px 0px 5px;
  width: 45px;
}
td.jPicker_OpacityBar {
  height: 40px;
}
td.jPicker_OpacityCol {
  padding-top: 12px;
  text-indent: -6px;
}
td.jPicker_OpacityCol * {
  display: none;
}
td.jPicker_HexCol {
  padding-top: 12px;
  text-align: left;
}
td.jPicker_EnterHex {
  padding-top: 12px;
}
.jPicker_Grid {
  text-align: center;
}
.jPicker_QuickColor {
  border: 1px inset #aaa;
  cursor: pointer;
  display: block;
  float: left;
  height: 14px;
  line-height: 14px;
  margin: 2px 2px 1px 2px;
  padding: 0px;
  width: 14px;
}

/************************************************************************/