/*

stylesheet organized in the following order:
-RESET
-MAIN ELEMENTS
------------------
-LISTS
-TABLES
-FORMS
-NAVIGATION
-LINKS
-IMAGES
-HEADER
-FOOTER
-BANNERS
-GROUPOF CLASSES
-BUTTONS
-COMPONENTS
-BREADCRUMBS
--------------------
-MEASUREMENTS
-BROWSER SPECIFIC
-MISC
-PAGE SPECIFIC


/*
--- RESET ---
 */

/* http://meyerweb.com/eric/tools/css/reset/ | v2.0b1 | 201101 | modified by cloudmark */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, cite, code, em, img, strong, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
}


/*
--- MAIN ELEMENTS ---
 */
html { font: 75%/160% helvetica, arial, sans-serif;}

body {
    color: #036;
    text-align: left;
    background: #FFF url(/images/bg/site_bg.gif) repeat-x;
    direction: ltr;
}


body:before, body:after { 
    content: "";
    position: fixed;
    left: -10px;
    width: 110%;
    height: 10px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,10,.8);
    -moz-box-shadow: 0 0 10px rgba(0,0,10,.8);
    -ms-box-shadow: 0 0 10px rgba(0,0,10,.8);
    -o-box-shadow: 0 0 10px rgba(0,0,10,.8);
    box-shadow: 0 0 10px rgba(0,0,10,.8);
    z-index: 100;
}

body:before {
    top: -10px;
}

body:after {
    bottom: -15px;
}

h1 {
    font-size: 180%;
    border-bottom: 1px solid #EEF4FF;
    margin: 0 0 1em 0;
    text-transform: uppercase;
    color: #39C;
    line-height: 1.5em;
    font-weight: normal;
}

h2 { font-size: 160%; }
h3 { font-size: 140%; }
h4 { font-size: 130%; }
h5 { font-size: 120%; }
h2, h3, h4 {
    color: #39C;
    line-height: 1.5em;
}
a {
    color: #39C;
    outline: none;
}
a:hover {
    text-decoration: underline;
    color: #036;
}

a img {
    border: 0;
}

p, dl, ul, ol {
    margin-bottom: 1.2em;
}

p, dl,  ul,  ol, table,  input,  label { font-size: 115%; }

li li, li label, li p,  p .btn { font-size: 100%; }

.wrapper {
    width: 77em;
    margin: 0 auto;
}
#header .wrapper, #banner .wrapper, #split_banner .wrapper { width: 79em; }

#header, #banner, #split_banner, #body, #footer {
    width: 79em;
    clear: both;
    margin: 0 auto;
}

#body {
    padding: 1em 0;
    background: #FFF url(/images/bg/000_75percent.png) -1000em -1000em no-repeat;
}

.pageWrapper {
    width: 79em;
    background: #FFF;
    margin: 0 auto;
    border: 1px solid #CCC;
    border-top: 0;
    -moz-box-shadow: 1px 1px 21px #CCC;
    -webkit-box-shadow: 1px 1px 21px #CCC;
    box-shadow: 1px 1px 21px #CCC;
}

/* --- END MAIN ELEMENTS --- */



/**
--- LISTS ---
 **/

ul, dl, .pg_help .two-three-four .search_results li { list-style: none }

ul li{ list-style-type: none; }

ol ol,  dl dl, ol ul{
    margin: 1em 0 0 0;
    font-size: 95%;
    padding: 0;
}

ol {
    list-style-position: inside;
}
ol ol li {
    margin-left: 1em;
    list-style-type: upper-roman;
}

ol p { margin: 1em 0 1em 0; }
li { padding-bottom: 0.5em; }
dl { line-height: 1.75em; }

dt {
    font-weight: bold;
    margin-top: 1em;
}
dd { padding-left: 0.25em; }

ul.checkbox_list, ul.radio_list {
    clear: both;
    margin: 0;

}

.box ul.checkbox_list, .box ul.radio_list, .box .threeSections { margin-left: 0; }

.vertical .radio_list li { display: block; }
.checkbox_list li, .radio_list li {
    display: inline-block;
    min-width: 8em;
    line-height: 2em;
}
.checkbox_list label, .radio_list label {
    float: none;
    display: inline;
    cursor: pointer;
    margin-left: 0.25em;
}

.checkbox_list { margin: 0 0 0 1em; }
.checkbox_list label { float: none; }
li.heading {
    padding:1em 0 0.25em 0;
    border-bottom: 1px solid #EEF4FF;
    margin-bottom: 0.5em;
    width: 80%;
}


.box .downloadList { margin: 0 1em 4em 1.2em; }

.downloadList li {
    margin-bottom: 5em;
}

.downloadList.oneItem, .downloadList.oneItem li {
    margin-bottom: 0;
}


/* BOX */
.box.sub h1 {
    background: #f0f0f0;
    color: #666;
}

.box.sub p, .box.sub h3, .sub {
    color: #666;
}

.box.sub {
    border-color: #f0f0f0;
}
.box.sub dl {
    margin: 0 0 1em 1em;
}
.box h1, .box.bg {
    background: #EEF4FF;
}

.box .downloadList p.subtext {
    margin: 5em 0 1em 0;
    font-size: 0.9em;
    color: #036;
}
.box .downloadList h3 {
    margin-left: 0;
    clear: both;
}

.box .downloadList#cdoDownloadList ul li{
    margin: 0;
}

.box .downloadList#cdoDownloadList ul {
    margin: 0.5em 0 1em 0;
    clear: both;
    float: none;
}

.box .downloadList#cdoDownloadList p.subtext {
    margin: 0;
    color: #999;
    width: 100%;
}

.box .toggle dl { margin: 0; }

.downloadList h3 a {
    float: right;
    font-size: 0.75em;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
}

.downloadList h3 a:hover {
    text-decoration: underline;
    color: #036;
}


.downloadList a.btn {
    float: left;
    margin: 0.25em 0 0.5em 0;
    padding-bottom: 0;
}

.box .downloadList ul {
    padding: 0;
    margin: 0;
    float: left;
}

.downloadList ul li {
    font-size: 0.8em;
    padding: 0;
    margin: 0 0 0 1em;
    line-height: 1.5em;
    border: 0;
    float: none;
}

.downloadList ul li span {
    font-weight: bold;
}

.box ul.horizontalGroup {
    margin: 0 0 1.5em 1.2em;
    height: 3em;
    padding-bottom: 0.25em;
    width: 30.5em;
}

ul.horizontalGroup li{
    float: left;
}

ul.horizontalGroup li+li {
    padding: 0 0 0 2em;
    margin: 0 0 0 2em;
}

/*wHgroup used to align elements that are next to horizontalGroups. */

.wHgroup .box p {
    padding-bottom: 0.5em;
    margin-bottom: 1.5em;
}

fieldset ul {
    margin: 1em 1em 1em 2em;
}

ul.icons li {
    float: left;
    list-style: none;
    background-image: url(/images/graphics/global_assets.png);
    background-repeat: no-repeat;
    text-indent: -666em;
    height: 27px;
    margin: 0 26px 28px 0 ;
    width:122px;
}

ul.icons {
    margin:0;
}

/* --- END LISTS --- */


/**
--- TABLES ---
 **/
table {
    width: 100%;
    line-height: 2em;
    border-collapse: collapse;
    border-spacing: 0;
}

tbody td.heading { padding-left: 1.25em; }

th {font-size: 110%;}

.borders tr {
    border-bottom: 1px solid #EEF4FF;
}

th { text-align: left; }

tbody td, tbody th, thead th { padding: 0.25em 0 0.25em 1em; }

td a { text-align:center; }

th {
    font-size: 1.1em;
}

tr.clear td, #body tr.clear th { border-bottom: none; }
td .btn {
    display: block;
    margin: auto;
}

td input[type='checkbox']{
    margin-left: 2em;
}
/* we have indent, and we have first- lets condense to one*/
.indent { padding-left: .85em; }
table h2, table h4 {
    line-height: 1em;
    font-weight: normal;
}
tr.total {
    border-top: 1px solid #EEF4FF;
    margin-top: 1em;
}
tr.total td { border: none; }
table.allDownloads .image {
    margin-left: 3em;
}
table.allDownloads .image.windowsOS, table.allDownloads .image.macOS {
    width: 59px;
    height: 55px;
}
table.allDownloads thead th { text-align: center; }
table.allDownloads .first { padding: 0 0 0 2em; }
table.allDownloads .btn.primary { margin: auto 0.5em; }
table.allDownloads .btn.primary.w9 { margin: auto; }
table input { font-size: 1em; }

/*license info table in my cloudmark>license*/
table.licenses {
    border-collapse: separate;
    border: 0;
    padding: 0;
    margin: .5em 0;
}
.licenses thead th { 
   font-size: 1em;
   font-weight: normal;
   padding: 0; 
}
table.licenses input[type='checkbox'] {
    margin: .5em 0;
}
table.licenses input[type='submit'] {
    color: #C00;
    display: block;
    height: 23px;
    margin: -1em 0 0 1em;
    padding: 0;
    position: absolute;
    background: #fff;
    border-color: #fff;
}
table.licenses input[type='submit']:hover{
    border-color: #C00;
}
table.licenses tbody td {
    border: none;
    padding: 0;
    border-bottom: 1px dotted #CCC;
    padding: .4em .2em;
}

/**---END TABLES---**/


/**
---FORMS---
 **/
fieldset {
    padding: 0.25em;
    margin: 0 1em 1em 1em;
    border: 1px solid #E6E6E6;
}

fieldset fieldset {
    margin-right: 0;
}

#createTicket fieldset {
    width: 80%;
    margin-bottom: 2em;
}

fieldset h4 {
    margin: 1em 1em 0 1em;
    font-size: 120%;
}

fieldset h4 ~ ul {
    margin-top: 0.25em;
}

fieldset .defaultMargin {
    margin: 1.5em;
}

fieldset .defaultMargin p {
    font-size: 1em;
}

fieldset .defaultMargin ul {
    margin: 0 0 1.5em 0;
}

fieldset .defaultMargin ul.error_list {
    display: block;
    margin-bottom: 3em;
}

fieldset .defaultMargin li {
    list-style: none;
    float: left;
    margin-right: 1em;
}

fieldset .defaultMargin .horizontalGroup li {
    margin: 0;
}

legend {
    font-weight: bold;
    font-size: 130%;
    padding: 0.2em 0.25em 0 .25em;
    margin-left: 1.25em;
    color: #036;
}

input, textarea {
    background: #FCFCFC;
    border: 1px solid #DADADA;
    color: #5487A5;
    padding: 0.25em;
    font-size: 1.1em;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

input:hover, textarea:hover {
    border: 1px solid #AED1E3;
}

input:focus, textarea:focus {
    background: #E8F7FF;
    border: 1px solid #AED1E3;
}
textarea {
    /*webkit fix*/
    resize: none;
    overflow: auto;
    height: 5em;
    width: 60%;
    font: 115%/140% arial,helvetica,sans-serif;

}

.withTextArea input {
    width: 60%;
}

label {
    display: block;
    margin: 1em 0 0.25em 0;
    color: #036;
}

select {
    color: #036;
}

option {
    color: #5487A5;
    font-size: 1.1em;
}

input[type="radio"], input[type="checkbox"], input[type="radio"]:hover, input[type="checkbox"]:hover, input[type="radio"]:focus, input[type="checkbox"]:focus  {
    border: 0;
    background: transparent;
    outline: none;
}

span.required {
    color: #39C;
    font-size: 160%;
    font-weight: bold;
    margin-left: 0.1em;
    position: absolute;
}

.checkbox_list li:hover, .radio_list li:hover {
    background: #EFF6FC;
}


table input[type="text"] {
    display: inline;
}

.inline input, .inline select {
    float: left;
    margin-left:0.5em;
}

.largeForm { margin: 1em 2em 3em 1em; }
.largeForm input[type="text"], .largeForm p {
    float: right;
    margin-top:-1.5em;
    font-size: 120%;
}

.largeForm h3 {
    font-weight: normal;
}
.largeForm input.secondaryBtn { margin: 1em 0 0.5em 0; }
.tabular .subtext { margin: 0 0 0 24em; }
.tabular .error_list li { padding: 0; }

label.group {
    float: left;
    margin-left: 0.5em;
}

.mockInput {
    color: #999;
    border: 1px solid #f0f0f0;
    padding: 0.25em;
    float: right;
    margin-top:-1.5em;
    font-size: 120%;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.box fieldset { border: 0; }

fieldset label, .defaultMargin label {
    display: inline;
}

fieldset .box label {
    display: block;
    float: none;
}

#cc2, #cc {
    clear: none;
}

#extend_form .one .box {
    min-height: 31.6em;
}
.actions {
    text-indent: 1.5em;
    margin: 0 0 1.5em 0;
    padding-top: 1em;
    border-top: 1px dotted #CCC;
}


/* apply a class of checkbox to a tabular div with a label and single checkbox*/
.tabular.checkbox label {
    text-align: left;
    margin: 0 0 0 0.75em;
    cursor: pointer;
}

.tabular.checkbox input {
    float: left;
}

.tabular.checkbox {
    margin-bottom: 4em;
}
.tabular.first, fieldset.largeContent .tabular.first { margin-top: 1em; }
/* large content is for forms where we're not floating all the labels to the right and showing things horizontally*/
fieldset.largeContent .tabular label {
    text-align: left;
    width: 100%;
    margin: 0.75em 0 0 1em;
}
.largeContent .tabular { padding-bottom: 1em; }
.largeContent .tabular select {
    margin: 0.5em 0 0 1.2em;
}

.tabular { margin-bottom: 1.5em;}
.tabular input, .tabular select {
    display: block;
    margin-left: 10em;
}
.tabular textarea {
    display: block;
    margin-left: 9.5em;
}
.tabular label {
    margin: .5em .5em 0 0;
    float: left;
    width: 9em;
    text-align: right;
    line-height: 1em;
}
fieldset.solo {
    width: 36em;
    margin: 1em auto;
    padding: 1em 1em 0 1em;
}
#loginForm .error_list {
    display: block;
}
#loginForm input { width: 13em; }

#login input.primary {
    margin-left: 9.25em;
    width: 6em;
}

#loginForm .error_list {
    margin: 0 0 0 10em;
}
#login .box p.moreOptions { margin-top: 1.35em; }

#login #recaptcha_widget_div {
    margin: 0 0 1em 5em;
}

.groupOf3 .one-two .defaultMargin .strengthMeter {
    margin: 23px 0 0 10.5em;
}
.strengthMeter {
    display: none;
    position: absolute;
    font-size: 1.6em;
}

.strengthMeter p {
    font-weight: bold;
    text-transform: capitalize;

}

.strengthMeter .weak {
    color: #CC0000;
}

.strengthMeter .fair {
    color: #c62;
}

.strengthMeter .good {
    color: #39c;
}

.strengthMeter .strong {
    color: #249d14;
}


/* .standard used for:
homepage login box testing: was never enabled due to MVE madness. keep this until decision on homepage MVE login done
.standard#loginForm input.primary{
margin-left: 0;
width: 6em;
}

    .standard .tabular input {
    margin-left: 0;
}

    .standard .tabular label {
    text-align: left;
    margin: 0.5em 0 0.25em 0;
}

    .standard legend {
    margin: 0 0 0.5em 0.5em;
}
    .standard fieldset {
    margin-left: 0;
}
    .standard .tabular {
    margin-left: 1.25em;
}

    .standard .tabular span.error {
    margin-left: 0;
}
 */


a.primary, a.secondaryBtn {
    text-indent: 0;
    padding: 0 1em 0.2em 1em;
    outline: none;
}
.secondaryBtn, .box .btn.secondaryBtn { margin-left: 0.5em; }
/*adding padding to options kills the border in ff2- add this to outer div if absolutely necessary (only used right now for exp. dates, etc)*/
.extraPadding option { padding: 0 0.5em 0 0.5em; }
/* apply div wrapper of condensed to a search button and input field
to hide text, shrink, and align*/
.condensed input {
    -moz-border-radius: 0;
    border-radius: 0;
}

.en #pg_support .groupOf3 .one, .en #pg_support .groupOf3 .two, .en #pg_support .groupOf3 .three {
    margin-top: 2em;
}

.box.wFormHeading form {
    margin: -51px 0 0 713px;
}

.box.wFormHeading h4 {
    margin-left: 1.2em;
}

.groupOf2 .box.wFormHeading .one, .groupOf2 .box.wFormHeading .two {
    margin: 1em 0;
}

.pg_help form.inHeading {
    margin: -40px 0 0 722px;
}

.pg_help form.inHeading.wNotice {
    margin: -97px 0 0 722px;
}

.pg_help .two-three-four .box ul, .pg_help .two-three-four .box ol, .pg_help .two-three-four .box dl {
    margin-left: 2em;
}

.pg_help .two-three-four .box .aside ul {
    margin-left: 0;
}
.pg_help .two-three-four li, #kbGroup li {
    list-style: disc inside;
}
#kbGroup ol li {
    list-style: decimal-leading-zero;
}

#kbGroup h2 {
    font-weight: normal;
    margin-bottom: 1.2em;
}

#kbGroup .heading {
     font-weight: normal;
    color: #c62;
}
.pg_help .two-three-four .aside li {
    list-style-type: none;
}

h1 form.inHeading {
    float: right;
    font-size: 0.6em;
}
#body input.btn.searchBtn {
    text-align: left;
    width: 34px;
    height: 27px;
    float: left;
    border-radius: 0;
    -moz-border-radius: 0;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    margin: 0;
    padding: 0;
    border: 0;
}

form.inHeading input {
    width: 12em;
    text-indent: 0.25em;
    height: 18px;
    float: left;
    margin: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

/* webkit line height needs work*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    body .actions .btnLoader {
        margin-left: 1.7em;
    }
    form.inHeading input{ height: 20px;}
    #body input.btn.searchBtn { height: 28px;}
    .pg_help form.inHeading { margin-top: -39px;}
    .pg_help form.inHeading.wNotice { margin-top: -95px; }
    .pg_help form.inHeading input{ height: 18px;}
    #body .pg_help form.inHeading input.btn.searchBtn { height: 26px; }
    #nav ul.secondary a { line-height: 23px; }
}


body.ie8 .actions .btnLoader {
    margin-left: 1.8em;
}

.checkbox_list input {
    float: left;
    margin-top: 0.35em;
}


/*--- END FORMS --- */


/**
--- NAVIGATION ---
 **/

#nav ul.primary, #nav a, #nav .primary li.active a, #nav .primary li.active:hover a, #nav li.menu:hover a {
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#breadcrumb li.first  {
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

#nav li.menu:hover ul a, #nav li.menu ul li.first, #nav li.menu:hover li.first a, #nav li:hover a, #nav ul li ul li a {
    -moz-border-radius: 0;
    border-radius: 0;
}

#nav ul.primary {
    position: absolute;
    margin: 42px 0 0 201px;
    background: #3b679e; 
    background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* W3C */
    border: 1px solid #1A65B4;
    border-bottom: 0;
}

#nav li {
    line-height: 35px;
    height: 35px;
    float: left;
    padding: 0;
}

#nav a {
    display: block;
    text-decoration: none;
    color: #FFF;
    text-shadow: 1px 1px 1px #0B2952;
    font-weight: bold;
    padding: 0 22px;
    font-size: 115%;
}

#nav .primary li.active a, #nav .primary li.active:hover a {
    background: #FFF; 
    background: -moz-linear-gradient(top, #FFFFFF 0%, #f3f3f3 50%, #ededed 51%, #FFFFFF 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#FFFFFF)); 
    background: -webkit-linear-gradient(top, #FFFFFF 0%,#f3f3f3 50%,#ededed 51%,#FFFFFF 100%); 
    background: -o-linear-gradient(top, #FFFFFF 0%,#f3f3f3 50%,#ededed 51%,#FFFFFF 100%); 
    background: -ms-linear-gradient(top, #FFFFFF 0%,#f3f3f3 50%,#ededed 51%,#FFFFFF 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 );
    background: linear-gradient(top, #FFFFFF 0%,#f3f3f3 50%,#ededed 51%,#FFFFFF 100%);
    margin-top: -4px;
    height: 37px;
    color: #39C;
    text-shadow: 1px 1px 1px #D5E1F8;
    border: 1px solid #FFF;
    -moz-box-shadow: -1px -9px 7px #213360;
    -webkit-box-shadow: -1px -9px 7px #213360;
    box-shadow: -1px -9px 7px #213360;
}

#nav li:hover a {
    background: #759ccb; 
    background: -moz-linear-gradient(top, #759ccb 0%, #76b2e6 50%, #64a9e6 51%, #acd3f0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#759ccb), color-stop(50%,#76b2e6), color-stop(51%,#64a9e6), color-stop(100%,#acd3f0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #759ccb 0%,#76b2e6 50%,#64a9e6 51%,#acd3f0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #759ccb 0%,#76b2e6 50%,#64a9e6 51%,#acd3f0 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #759ccb 0%,#76b2e6 50%,#64a9e6 51%,#acd3f0 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#759ccb', endColorstr='#acd3f0',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #759ccb 0%,#76b2e6 50%,#64a9e6 51%,#acd3f0 100%); /* W3C */
}

#nav li:hover ul a,  #nav .primary li.menu ul a, #nav .secondary li:hover a, #nav .primary li.active:hover ul li a, #nav .primary li.active ul li a {
    filter: none;
    background: transparent;
    -moz-box-shadow: 0 0 0 transparent;
    -webkit-box-shadow: 0 0 0 transparent;
    box-shadow: 0 0 0 transparent;
    border-radius: 0;
    -moz-border-radius: 0;
}

#nav li.first {
    margin-left: -1px;
}

#nav ul ul li.first {
    margin-left: 0;
}

#nav li ul a {
    text-shadow: 0 0 0 transparent;
}

#nav li.first:hover a, #nav ul ul li.first  {
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}

#nav ul li a {
    outline: none;
    text-align: center;
    display: block;
    float: left;
}

/* for drop down menus within primary nav */
#nav ul ul {
    background: #a1c7f4; 
    background: -moz-linear-gradient(top, #a1c7f4 0%, #e3e9ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1c7f4), color-stop(100%,#e3e9ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a1c7f4 0%,#e3e9ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a1c7f4 0%,#e3e9ed 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #a1c7f4 0%,#e3e9ed 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A1C7F4', endColorstr='#E3E9ED',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #a1c7f4 0%,#e3e9ed 100%); /* W3C */
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    margin: 31px 0 0 0;
    position:absolute;
    width: 13em;
    display: none;
    z-index: 10001;
    border-bottom: 1px solid #BBCBE0;
    border-right: 1px solid #BBCBE0;
    -mox-box-shadow: 1px 2px 2px #C9D5EE;
    -webkit-box-shadow: 1px 2px 2px #C9D5EE;
    box-shadow: 1px 2px 2px #C9D5EE;
}

#nav ul li.menu.active ul {
    margin-left: 0;
}

#nav ul ul li.first {
    margin-top: 4px;
}

#nav ul li.active ul {
    filter: none;
    background: #FFF;
}

#nav ul li:hover ul {
    display: block;
}

#nav ul li:hover ul li a {
    color: #003367;
}

#nav ul li ul li a {
    border-left: 1px solid #BBCBE0;
    font-weight: normal;
}

#nav ul li ul li.last a, #nav ul li.menu:hover ul li.last a, #nav ul li.menu ul li.last a{
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
    padding-bottom: 8px;
}

#nav ul.primary li.menu ul li a:hover {
    color: #346599;
    text-decoration: underline;
}

#nav ul.primary li.menu ul li a {
    display: block;
}

#nav ul ul li {
    float: none;
    font-size: 0.75em;
    height: 30px;
    line-height: 30px;
}

#nav ul.primary li.active ul li a, #nav ul.primary li.active:hover ul li a {
    border: 1px solid #FFF;
    border-left: 1px solid #BBCBE0;
    border-top: 0;
}


li.menu span {
    background: url(/images/graphics/global_assets.png) -317px -639px no-repeat;
    height: 20px;
    width: 20px;
    display: block;
    float: right;
    margin: 8px 0 0 8px;
}

li.menu.active span {
    background-position: -317px -670px;
}


/* secondary nav */
#nav ul.secondary {
    float: right;
    margin: 0 7px 0 0;
    background: #21356c;
    border: 1px solid #051632;
    border-top: 0;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#nav ul.secondary li {
    color: #EEF4FF;
    line-height: 25px;
    height: 25px;
}

#nav ul.secondary li.first {
    margin-left: 1em;
    font-size: 0.9em;
}

#nav ul.secondary a {
    color: #EEF4FF;
    font-size: 95%;
    padding: 0 8px;
}

#nav ul.secondary li.active a {
    color: #FFF;
    font-weight: bold;
}

#nav ul.secondary a:hover {
    text-decoration: underline;
}


/*subnav */

.subnav {
    margin: 0;
    padding: 0 1em 1em 0;
    background-color: #eee;
}

.subnav li { 
    padding: 1em 0 0 0.5em; 
    font-size: 0.9em;
}

.subnav li li { 
    font-size: 0.9em;
    padding: 0;
    margin-bottom: 0.5em;
}

.subnav li li li {
    font-size: 0.8em;
    margin-bottom: 0.25em;
    list-style: upper-roman;
    color: #c62;
    padding: 0;
    line-height: 1.4em;
}

.subnav ul {
    font-weight: normal;
    margin: 0 0 0.25em 1em;
}
.subnav ul ul {
    margin: 0.5em 0 2em 1.25em;
}
.subnav h5 {
    padding: 0.25em 0;
    margin-left: -12px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 100%;
}
.subnav h5.active, .subnav h5:hover {
    color: #39C;
}


.subnav h5 .icon {
    font-size: 120%;
    display: block;
    width: 18px;
    height: 20px;
    text-align: center;
    float: left;
    background: #eee;
    margin: -2px 0.25em 1em 0;
    -moz-border-radius: 10px;
    border-radius: 10px;
}


.subnav a, .subnav .activeLink ul a { 
    text-decoration: none;
    color: #036;
}

.subnav .activeLink a, .subnav .activeLink a:hover { color: #39c;}

.subnav a:hover { color: #036; text-decoration: underline;}

#breadcrumb {
    background-color: #eee;
    height: 2em;
    padding: 0;
    margin: 0 0 1em 0;
}
#breadcrumb li {
    float: left;
    margin: 0;
    line-height: 2em;
    padding: 0 2em 0 1em;
}
#breadcrumb li.current {
    background: #39C url(/images/bg/upgrade_current.png) right center no-repeat;
    color: #FFF;
}
#breadcrumb li.done {
    background: #39C url(/images/bg/upgrade_done.png) right center no-repeat;
    color: #036;
}

#breadcrumb a:link, #breadcrumb a:active, #breadcrumb a:visited {
    color: #036;
    text-decoration: none;
}
#breadcrumb li.current a:hover {
    text-decoration: none;
}
#breadcrumb li.done a:hover {
    text-decoration: underline;
}
#breadcrumb li a:hover {
    color: #036;
}

/* --- END NAVIGATION --- */


/**
--- LINKS ---
 **/
a.arrowLink:after { content: url(/images/icons/arrow_r.gif); }
a.btn.arrowLink:hover:after { content: url(/images/icons/arrow000_r.gif); }
a.arrowLink:hover:after, a.arrowLink.lBlue:hover:after { content: url(/images/icons/arrow1281ff_r.gif); }
a.arrowLink.grey:after { content: url(/images/icons/arrow666_r.gif); }
a.arrowLink.grey:hover:after { content: url(/images/icons/arrow000_r.gif); }
a.arrowLink.lBlue:after { content: url(/images/icons/arrow1281ff_r.gif); }
#footer a.arrowLink:after { content: url(/images/icons/arrowbbddff_r.gif); }
/*use this for an anchor tag with an image that's approx 20x20 px*/
a.image {
    text-indent: -666em;
    display: inline-block;
    height: 30px;
    line-height: 3em;
    width: 23px;
}

a.external {
    padding-right: 1em;
    background: url(/images/icons/external.png) no-repeat right top;
}

#fbLink { background-position: -379px -511px; }
/* --- END LINKS --- */


/**
--- IMAGES ---
 **/
 /*
h1 span.image {
    display: block;
    float: left;
    height: 28px;
    width: 36px;
    margin: 2px 5px 0 -7px;
}

h1 span.image.cdoIcon {
    background-position: -373px -117px;
}
*/
td.free .image {
    background-position: -224px -1100px;
    display: block;
    height: 30px;
    text-indent: -666em;
    width: 66px;

}

td.free.auth .image {
    text-indent: 0.75em;
    background: transparent;
}


tr.cta a.btn.primary {
    margin: 0.5em 0.5em 0.5em -2em;
}
tr.cta a.btn {
    display: inline-block;
    margin: 1.5em 0 0 -1.25em;
}

.checkmark, .checkmarks dd{ background: url(/images/icons/check.png) 21px 7px no-repeat transparent; }

 .checkmarkDT dt {
     background: url(/images/icons/check.png) 0 -2px no-repeat transparent;
     text-indent: 30px;
 }
 

.checkmarkDT dd{
    background: transparent;
    margin-bottom: 2em;
}
.checkmarks dt {
    text-indent: 17px;
}
.checkmarks dd {
    font-size: 0.9em;
    height: 33px;
    line-height: 39px;
    text-indent: 49px;
}

#login .box.sub .primary {
    margin-left: 2.5em;
}


.image.boxshot  {
    background-position: 1px -459px;
    display: block;
    height: 158px;
    margin: 57px 0 0 32px;
    position: absolute;
    width: 147px;
    z-index: 100;
}

.image.bubbleBase {
    background-position: -204px -260px;
    height: 32px;
    margin: -1px 0 0 44px;
    position: absolute;
    width: 40px;
    z-index: 0;
}
.image.lock { 
    background-position: -204px -194px;
    display: block;
    float: left;
    height: 27px;
    width: 20px;
    margin-right: 0.5em;
}
.image.arrowsIcon { background-position: -2px -844px; }
.image.updateIcon { background-position: -281px -884px; }
.image.moreInfoIcon { background-position: -353px -993px; }
.image.controlPanIcon { background-position:  -55px -841px;}
.image.toolbarIcon { background-position: -113px -842px;}
.image.multiCompIcon { background-position: -335px -889px; }
.image.alertIcon { background-position: -351px -937px;}
.image.dOneBtn, .helpImage.blockBtn, .helpImage.unblockBtn {
    height: 28px;
    width: 28px;
}
.image.dOneBtn {
    background-position: -370px -474px;
    margin: -0.5em 0.25em 0 0;
}
.helpImage.blockBtn {
    background-position: -170px -304px;
    margin: -0.25em 0.25em 0 0;
}
.helpImage.unblockBtn {
    background-position: -202px -304px;
    margin: -0.25em 0.25em 0 0;
}
.image {
    background: url(/images/graphics/global_assets.png) -18px -164px no-repeat;
    overflow: hidden;
    width: 5em;
    height: 5.25em;
    text-indent: -30000px;
}

a.image {
    display: block;
}


/*separate sprite from main website sprite because it's big and we don't want to load if possible, so only using when needed*/
.helpImage {
    background: url(/images/graphics/help_assets.png) 0 0 no-repeat;
    overflow: hidden;
    width: 290px;
    height: 153px;
    /*this is to space the image closer to it's description and further from the next sibling if any*/
    margin-bottom: 0.5em;
}
.helpImage.controlPan { background-position: 0 -156px; }
.helpImage.toolbar { background-position: 0 0; }
.helpImage.out2010 { background-position: 0 -1016px; width: 22em; }
.helpImage.oeToolbar { background-position: 0 -853px; height: 165px; }
.helpImage.wmToolbar { background-position: 0 -722px; height: 131px; }
.helpImage.thToolbar { background-position: 0 -610px; height: 113px; }
.helpImage.sysTray {
    background-position: 0 -305px;
    height: 42px;
    width: 170px;
}
.helpImage.sysTrayAccounts {
    background-position: 0 -346px;
    height: 107px;
    width: 219px;
}
.helpImage.accountsPanel {
    background-position: 0 -451px;
    height: 160px;
    width: 220px;
}
.image.phoneImage {
    background-position: -276px -881px;
    height: 55px;
    width: 59px;
}
.image.immunetLogo {
    width: 139px;
    height: 33px;
    background-position: -219px -605px;
}

.textWIcon p {
    float: left;
    margin-top: 0.75em;
}
.textWIcon .image { float: left;}
.image.outlookLogo { background-position: -4px -111px; }
.image.windowsOS { background-position: -122px -57px; }
.image.macOS { background-position: -63px -57px; }
.image.xpLogo { background-position: -122px -111px; }
.image.vistaLogo { background-position: -182px -58px; }
.image.sevenLogo { background-position: -64px -111px; }
.image.thundLogo { background-position: -4px -57px; }
.image.winMailLogo { background-position: -186px -111px; }
.image.outlookExpLogo { background-position: -4px -166px; }
.image.tucows { background-position: -187px -166px; }
.image.scmag { background-position: -337px -879px; }
.image.usatoday { background-position: -125px -166px; }
.image.soft82 { background-position: -64px -166px; }
.allDownloads .image.immunetLogo {
    margin: 1em 0 0 0;
    background-position: -207px -605px;
}

li.oexp {
    background-position: -155px -1334px;
}

li.outlook {
    background-position: -152px -1276px;
}

li.fastmail {
    background-position: -141px -1225px;
}

li.hotmail {
    background-position: -3px -1225px;
}

li.lycos {
    background-position: -283px -1224px;
}

li.thunderbird {
    background-position: -4px -1336px;
}

ul.icons li.yahoo {
    background-position: -118px -1176px;
    width: 166px;
}

li.aol {
    background-position: -281px -1175px;
}

li.winmail {
    background-position: -4px -1273px;
}


li.gmail {
    background-position: -1px -1184px;
}

li.hotmail {
    background-position: 0 -1227px;
}
/**----END IMAGES---**/

/**
--- HEADER ---
 **/
#header {
    background-color: #094185;
    background-image: -moz-linear-gradient(top, #094185, #163152);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #094185),color-stop(1, #163152));
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#094185', EndColorStr='#163152');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#094185', EndColorStr='#163152');
    height: 6.5em;
    border-bottom: 2px solid #FFF;
}
#header h1 {
    margin: 0;
    font-size: 100%;
    float: left;
    height: 6em;
    border: 0;
}
#header h1 a {
    width: 186px;
    height: 57px;
    background: url(/images/graphics/global_assets.png) -3px -233px no-repeat;
    text-indent: -666em;
    margin: 9px 0 0 5px;
    display: block;
}
#header h1 a:hover { background-position: -3px -290px; }

/*--- END HEADER --- */

/**
--- FOOTER ---
 **/
#footer {
    background-color: #163152;
    background-image: -moz-linear-gradient(top, #163152, #094185);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #163152),color-stop(1, #094185));
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#163152', EndColorStr='#094185');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#163152', EndColorStr='#094185');
    height: 13em;
    color: #FFF;
    border-top: 2px solid #01050A;
}
#footer .wrapper {
    margin: 1em;
}

#footer a {
    color: #003367;
    text-decoration: none;
}

#footer a:hover {
    color: #346599;
}

#footer ul {
    margin: -1px 1em 0 1em;
    background: #A4B9D1;
    height: 3em;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#footer li {
    margin-top: 0.75em;
    display: inline-block;
    padding: 0 0.5em;
}

#footer li.floatRight {
    margin-top: 1px;
    padding-left: 0;
}

#footer li.floatRight.langs {
    padding-top: 10px;
}

#footer li.floatRight.langs a {
    font-size: 90%;
    text-transform: uppercase;
    padding: 0 5px;
    font-weight: bold;
}

#footer li.first {
    margin-left: 1em;
    padding-left: 0;
}

#footer p {
    float: right;
    margin: 6.5em 0.75em 0 0;
}

#footer p a {
    color: #6098D3;
}

#footer p a:hover {
    color: #FFF;
}
/*--- END FOOTER --- */

/**
--- BANNERS ---
 **/

.bannerBg {
    background: url(/images/bg/banner.png) 0 0 no-repeat;
    height: 60px;
    width: 950px;
    margin: 13.45em 0 0 -0.05em;
    z-index: 1;
}
#banner, #split_banner {
    background-color: #f0f0f0;
    background-image: -moz-linear-gradient(top, #FFFFFF, #CCCCCC);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #CCCCCC));
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#CCCCCC');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#CCCCCC');
    height: 18em;
}
#banner .one-two {
    width: 53em;
    height: 16.5em;
    overflow: hidden;
    float: left;
}

#banner .three {
    width: 21em;
    float: left;
    margin: 2.5em 0 0 0;
}

#banner .one-two-three {
    height: 18em;
    float: left;
    width: 59.5em;
}

#banner .four {
    background: url("/images/bg/27508f.png") repeat scroll 0 0 transparent;
    float: left;
    margin-top: 5em;
    width: 16.5em;
    z-index: 10;
}

#banner ul {
    font-size: 1em;
}

.bannerBase {
    width: 948px;
    height: 56px;
    margin: 161px 0 0 0;
    position: absolute;
    z-index: 0;
    background: url(/images/bg/bannerBase.png) no-repeat 0 0;
}

#banner .four p { 
    color: #FFF;
    margin: 1em; 
}

#banner h1 {
    font-size: 1.6em;
    text-transform: none;
    border: 0;
    margin: 18px 0 0 16px;
    color: #036;
}

#banner .one-two-three div, #banner .one-two div {
    margin: 22px 0 0 231px;
    width: 36em;
    position: absolute;
}

#banner span.image.downloadIcon {
    background-position: -105px -2px;
    height: 50px;
    width: 50px;
    display: block;
    margin: 8px 0 0 16px;
}

#banner a.btn.primary {
    margin-bottom: 7px;
    text-align: left;
    height: 2em;
    line-height: 2em;
    font-size: 2.8em;
    border-radius: 8px;
    -moz-border-radius: 8px;
}

#banner a.btn.primary span {
    float: left;
}

#banner span.second {
    font-size: 0.5em;
    display: block;
    margin-top: -1.85em;
}

#banner h3 {
    color: #036;
}
/* --- END BANNERS --- */




/**
--- GROUPOF CLASSES ---
 **/
/*
 * Group classes: .groupOf2, .groupOf3, .groupOf4
 *
 * Assumptions:
 * ------------
 * + we want a vertical margin between grouped items
 * + we want a horizontal margin on between groups
 * + default margin will be 1em
 * + we will never mix group types
 * + we will only use within a 77em width container, e.g. #body .wrapper
 *
 */
.groupOf2, .groupOf3, .groupOf4 { clear: both; }
.groupOf2 .one, .groupOf4 .two-three, .groupOf4 .one-two {
    width: 38em;
    float: left;
    margin-right: 1em;
}
.groupOf2 .two, .groupOf4 .three-four { margin-left: 39em; }
.groupOf3 .one, .groupOf3 .two {
    margin-right: 1em;
    width: 25em;
    float: left;
}
.groupOf3 .three { margin-left: 52em; }
.groupOf3 .one-two {
    width: 51em;
    float: left;
}
.groupOf3 .two-three { margin-left: 26em; }
.groupOf4  .one, .groupOf4 .two, .groupOf4 .three {
    width: 18.5em;
    float: left;
    margin-right: 1em;
}
.groupOf4 .four { margin-left: 58.5em; }
.groupOf4 .one-two-three {
    width: 57.5em;
    float: left;
}
.groupOf4 .two-three-four { margin-left: 19.5em; }
/*
 * The padding of panel means reducing the with of elements by 2em (1em left + 1em right)
 */
.groupOf2 .one.panel, .groupOf4 .one-two.panel, .groupOf4 .two-three.panel { width: 36em; }
.groupOf3 .one.panel, .groupOf3 .two.panel { width: 23em; }
.groupOf3 .one-two.panel { width: 49em; }
.groupOf4 .one.panel, .groupOf4 .two.panel, .groupOf4 .three.panel { width: 16.5em; }
.groupOf4 .one-two-three.panel { width: 55.5em; }
/*
 * The padding and border of decor means reducing the with of elements by 2.5em (1.25em left + 1.25em right)
 */
.groupOf2 .one.decor, .groupOf4 .one-two.decor, .groupOf4 .two-three.decor { width: 35.5em; }
.groupOf3 .one.decor, .groupOf3 .two.decor { width: 22.5em; }
.groupOf3 .one-two.decor { width: 48.5em; }
.groupOf4 .one.decor, .groupOf4 .two.decor, .groupOf4 .three.decor { width: 16em; }
.groupOf4 .one-two-three.decor { width: 55em; }


.groupOf4 .groupOf3 .one { width: 18em; }
.groupOf4 .groupOf3 .two-three { width: 36em; margin-left: 20em; }


.groupOf4 .groupOf3.stretch .one {
    width: 20.5em;
}

.groupOf4 .groupOf3.stretch .two-three {
    width: 34.5em;
    margin-left: auto;
}

/*nested groups*/

#cc .groupOf2 .one, #cc2 .groupOf2 .one {
    width: 34em;
    height: auto;
    min-height: auto;
}

#cc .groupOf2 .two, #cc2 .groupOf2 .two {
    width: 34em;
    float: left;
    margin-left: 0;

}


/* --- END GROUPOF CLASSES --- */


/**
--- BUTTONS ---
 **/
.btn, input[type="submit"], input[type="button"] {
    background: #FFF; 
    background: -moz-linear-gradient(top, #FFFFFF 0%, #e6e6e6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#e6e6e6)); 
    background: -webkit-linear-gradient(top, #FFFFFF 0%, #e6e6e6 100%);
    background: -o-linear-gradient(top, #FFFFFF 0%, #e6e6e6 100%); 
    background: -ms-linear-gradient(top, #FFFFFF 0%, #e6e6e6 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 ); 
    background: linear-gradient(top, #FFFFFF 0%,#e6e6e6 100%); 
    color: #39C;
    height: 1.8em;
    line-height: 1.8em;
    font-size: 1.2em;
    text-align: center;
    cursor: pointer;
    border: 1px solid #cecece;
    text-decoration: none;
    display: inline-block;
    padding: 0 0.5em 0 0.5em;
    white-space: nowrap;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight: bold;
}

a.btn, a.btn.primary {
    padding-bottom: 0;
}

input[type="submit"].noBtnStyle {
    background-image: none;
    filter: none;
    height: auto;
    line-height: auto;
    font-size: 1em;
    text-align: left;
    cursor: pointer;
    border: none;
    text-decoration: underline;
    display: static;
    padding: 0;
    font-weight: normal;
    background: none;
}

input[type="submit"].noBtnStyle:hover {
    background: none;
    filter: none;
    text-decoration: underline;
    color: #036;
}

.btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background: #FFF; 
    background: -moz-linear-gradient(top, #e6e6e6 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#ffffff)); 
    background: -webkit-linear-gradient(top, #e6e6e6 0%, #ffffff 100%);
    background: -o-linear-gradient(top, #e6e6e6 0%, #ffffff 100%); 
    background: -ms-linear-gradient(top, #e6e6e6 0%, #ffffff 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#ffffff',GradientType=0 ); 
    background: linear-gradient(top, #e6e6e6 0%,#ffffff 100%);
    color: #036;
    text-decoration: none;
}

input[type="submit"].primary:hover, input[type="button"].primary:hover {
    color: #FFF;
}

/*removing borders from form buttons on mousedown*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner {
    border-style:none;
    outline: none;
}

.btn.primary, input.primary, input.btn.searchBtn {
    background: #0A7321; 
    background: -moz-linear-gradient(top, #0A7321 0%, #25961C 50%, #208229 51%, #53EB39 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0A7321), color-stop(50%,#25961C), color-stop(51%,#208229), color-stop(100%,#53EB39)); 
    background: -webkit-linear-gradient(top, #0A7321 0%,#25961C 50%,#208229 51%,#53EB39 100%); 
    background: -o-linear-gradient(top, #0A7321 0%,#25961C 50%,#208229 51%,#53EB39 100%);
    background: -ms-linear-gradient(top, #0A7321 0%,#25961C 50%,#208229 51%,#53EB39 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0A7321', endColorstr='#53EB39',GradientType=0 ); 
    background: linear-gradient(top, #0A7321 0%,#25961C 50%,#208229 51%,#53EB39 100%);
    color: #FFF;
    border: 1px solid #289F36;
    text-shadow:1px 2px 9px #0F621C;
    font-weight: bold;
    padding-bottom: 2px;
}

.btn.primary:hover, input.primary:hover, input.btn.searchBtn:hover {
    background: #179C35; 
    background: -moz-linear-gradient(top, #179C35 0%, #2A9A21 50%, #23892C 51%, #3EF81E 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#179C35), color-stop(50%,#2A9A21), color-stop(51%,#23892C), color-stop(100%,#50E737)); 
    background: -webkit-linear-gradient(top, #179C35 0%,#2A9A21 50%,#23892C 51%,#50E737 100%); 
    background: -o-linear-gradient(top, #179C35 0%,#2A9A21 50%,#23892C 51%,#50E737 100%);
    background: -ms-linear-gradient(top, #179C35 0%,#2A9A21 50%,#23892C 51%,#50E737 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#179C35', endColorstr='#50E737',GradientType=0 ); 
    background: linear-gradient(top, #179C35 0%,#2A9A21 50%,#23892C 51%,#50E737 100%);
    border: 1px solid #14BC28;
    text-shadow: 1px 1px 1px #0F621C;
}

.btn.delete {
    color: #c00;
    font-weight: normal;
}

#upgradeBtn {
    width: 10em;
    margin: 0.25em 0 0 0.95em;
}
#upgradeBtn:hover { background-position: 0 -200px;}
#body #upgradeBtn {
    font-size: 200%;
}
a.btn.primary.disabled {
    background-color: #999;
    cursor: default;
}
/*todo: remove hardcoded width above so the following doesn't need to be btn specific*/
.btn.primary.w9, input.primary.w9 { width: 9em; }
.btn.primary.w16, input.primary.w16 { width: 16em; }

.closeBtn {
    background: #FFF;
    border: 1px solid #CCC;
    color: #666;
    cursor: pointer;
    float: right;
    font-size: 1em;
    height: 18px;
    line-height: 20px;
    margin: -11px -10px 0 0;
    padding: 0;
    text-align: center;
    width: 20px;
    text-indent: 1px;
}


.btnLoader {
    height: 3em;
    margin-top: -35px;
    position: absolute;
}

#login .btnLoader {
    margin-left: 133.5px;
}

.btnLoader.aTag {
    margin-top: -2px;
}

.save .btnLoader.aTag {
    margin-top: -36px;
}

.actions .btnLoader {
    margin-left: 1.5em;
}

.btnLoader p {
    position: absolute;
    opacity: 0.3;
    filter: alpha(opacity = 30);
    background: #fff;
    height: 3em;
    overflow: hidden;
    margin: 0;
}

.box .btnLoader p {
    margin: 0;
}

.btnLoader span {
    display: block;
    position: absolute;
    height: 20px;
    width: 100%;
    margin-top: 12px;
    background: url('/images/graphics/loader.gif') center repeat-x transparent;
}

/* --- END BUTTONS--- */


/**
--- COMPONENTS ---
 **/

p.quote {
    font-size: 1.1em;
    line-height: 1.7em;
}

p.quote.overline {
    padding-top: 1.2em;
}
.quote .image {
    background-color: #CCC;
    background-position: -133px -1143px;
    display: block;
    float: left;
    height: 23px;
    margin: -0.5em 0 0 -0.5em;
    width: 36px;
}

.quote .image.closing {
    background-position: -166px -1143px;
    float: right;
    margin: 0;
} 


.warning, .notice, .confirm {
    -moz-box-shadow: 0 0 2px #CDCDCD;
    -webkit-box-shadow: 0 0 2px #CDCDCD;
    box-shadow: 0 0 2px #CDCDCD;
    font-weight: bold;
    font-size: 1.2em;
    color: #fff;
}

.warning a, .notice a, .confirm a {
    color: #fff;
}

.confirm {
    background: #249d14; /* Old browsers */
    background: -moz-linear-gradient(top, #30BA1F 0%, #249d14 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#30BA1F), color-stop(100%,#249d14)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #30BA1F 0%,#249d14 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #30BA1F 0%,#249d14 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #30BA1F 0%,#249d14 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30BA1F', endColorstr='#249d14',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #30BA1F 0%,#249d14 100%); /* W3C */
    border: 1px solid #249d14;
}


.warning {
    background: #CC0000; /* Old browsers */
    background: -moz-linear-gradient(top, #E37474 0%, #CC0000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E37474), color-stop(100%,#CC0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #E37474 0%,#CC0000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #E37474 0%,#CC0000 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #E37474 0%,#CC0000 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E37474', endColorstr='#CC0000',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #E37474 0%,#CC0000 100%); /* W3C */
    border: 1px solid #CC0000;
}

.aside {
    background: #EEF4FF;
}

.notice, .notice a {
    color: #C62;
}

.notice {
    background: #c62; /* Old browsers */
    background: -moz-linear-gradient(top, #F7985A 0%, #c62 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7985A), color-stop(100%,#c62)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #F7985A 0%,#c62 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #F7985A 0%,#c62 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #F7985A 0%,#c62 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7985A', endColorstr='#c62',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #F7985A 0%,#c62 100%); /* W3C */
    border: 1px solid #c62;
}

.warning, .notice, .aside, .confirm {
    padding: 1em;
    margin: 1em 0;
}

#upgrade .warning, #upgrade .notice, #upgrade .confirm {
    margin: 1em 0;
}


.confirm .btn, .notice .btn, .warning .btn {
    font-size: 1em;
}

.warning .closeBtn {
    color: #CC0000;
    border-color: #EBC0C0;
}

.warning .btn {
     color: #CC0000;
}

.warning a:hover {
     color: #F1CFCF;
}

.confirm .closeBtn {
    color: #249d14;
    border-color: #B0E8A9;
}

.confirm .btn {
    color: #249d14;
}

.notice .closeBtn {
    color: #C62;
    border-color: #FBC6A3;
}

.closeBtn:hover {
    color: #333;
}

.notice, .notice a {
    color: #fff;
}

.notice a:hover {
    color: #FFE3BA;
}

.notice a.btn {
    color: #c62;
}

/* lists to accompany diagrams */

.diagram {
    margin: 4em 0;
}
.diagram li {
   margin: 1em 1.5em;
   height: 64px;
   width: 11em;
   float: left;
   font-weight: bold;
   list-style-position: inside;
   color: #39c;
   font-size: 1.2em;
}

.diagram li.last {
    margin-right: 0;
}

.diagram p {
    color: #036;
    margin: 0.5em 0 0 0;
    font-size: 0.8em;
}
.diagram .image {
    display: block;
    width: 64px;
    height: 64px;
    margin: -4em 0.5em 0 2em;
}

.image.emailArrives { background-position: -220px -325px;}
.image.mssgFpt { background-position: -220px -402px;}
.image.fptCompare { background-position: -321px -306px;}
.image.mssgDel { background-position: -270px -18px;}


.diagram .arrow {
    background: #A4B9D1 url(/images/graphics/global_assets.png) -170px -837px no-repeat;
    height: 39px;
    width: 35px;
    position: absolute;
    margin: -98px 0 0 210px;
}


.diagram dl {
    width: 14em;
    margin: 0 auto;
    font-size: 100%;
}

.diagram #message {
    background-position: -10px -1035px;
}

.diagram #fingerprint {
    background-position: -181px -937px;
}

.diagram #delivered {
    background-position: -204px -472px;
}



/* search engine results */
#search-heading {
    padding: 0.5em 1em 0 0.5em;
    font-weight: normal;
    margin-bottom: 1.5em;
}

ul.search_results {
    margin-left: 1em;
}

.search_results li {
    margin: 0 0 1em 0;
}

.search_results li {
    padding-left: 1em;
    background: none;
}
.search_results h4 {
    font-size: 1.1em;
    margin-bottom: 0;
}
#search-summary {
    padding: .5em;
    text-align: right;
    margin-top: -3.75em;
}


/*
 * panel and decor classes, using css specificty to override group attributes, of applied directly
 *
 * A "panel" is a solid block; a "decor" is an item decorated with a border, both with content indented 1em
 */

.panel { background: #EEF4FF;}
.panel, .decor { padding: 1em; margin: 1em 0; }
.decor { border: 3px solid #EEF4FF; }
.box .panel { margin: 1em; }
.pagination a, .pagination span {
    text-decoration: none;
    font-weight: bold;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    display: block;
    float: left;
    border: 1px solid #CCC;
    margin: 1em 0 0 0.25em;
}
.box p.pagination, .pagination {
    border-top: 1px dotted #CCC;
    height: 4em;
    width: 95%;
    padding: 0;
}
.error_list {
    margin: 0;
    padding: 0;
    display: inline;
    color: #CC0000;
    font-weight: bold;
}

.error_list li { font-size: 85%; }

.error {
    color: #CC0000;
    font-weight: bold;
}

fieldset.wFlashes .error_list li, .tabular.wFlashes .error {
    margin-left: 11em;
}

input.error, textarea.error {
    background: #F7E1E1;
    border: 1px solid #CC0000;
}

input.error:focus, textarea.error:focus {
    background: #f0f0f0;
}

/* a hack should not be so specific */
.tabular span.error {
    margin: .5em .5em 0 11.25em;
    float: none;
    width: 20em;
    text-align: left;
    line-height: 1em;
}


span.error {
    font-weight: bold;
    font-size: 1em;
    margin-top: 0.25em;
    display: block;
}

.code {
    white-space: nowrap;
}
.notification {
    border: 1px dotted #CCC;
    padding: 1em 2em;
}
/* toggle block for dynamically showing/hiding content */
.toggleBlock h3 {
    font-weight: normal;
    cursor: pointer;
    font-size: 1.25em;
}
.toggleBlock {
    margin: 1em;
    padding: 0.2em 0 0 0.2em;
}
.toggleBlock div {
    padding: 0.8em;
    margin-left: 1.4em;
    border-left: 3px solid #EEF4FF;
}
.toggleBlock li a, .toggleBlock h3:hover {
    text-decoration: underline;
}
.box .toggleBlock dl{
    margin: 1em 0 0 0;
    padding: 0;
    font-size: 1em;
}
.box .toggleBlock ol {
    margin: 1em 0 0 2em;
    padding: 0;
    font-size: 1em;
}

.box.wFormHeading {
    
}
.moreOptions {
    border-top: 1px solid #EEF4FF;
    text-align: right;
    padding: 1em 1em 0 0;
}

.iconWText {
    float: left;
    margin: 1em 0 0 0;
}
.iconWText li {
    float: left;
    width: 200px;
    font-size: 0.9em;
}

.iconWText.vertical {
    float: none;
    height: 14em;
    width: 100%;
    margin: 1em 0 1em 0;
}

.iconWText .image {
    width: 59px;
    height: 55px;
    float: left;
}


.iconWText p, .box .iconWText p  {
    margin: 0.5em 4em 1em 0.5em;
    float: left;
}

.box .iconWText.vertical p {
    width: 14em;
}

.iconWText p span { color: #999; }

.iconWText p.offset4 { margin-top: 1em; }

.one-two-three .iconWText.vertical {
    border-right: 1px dotted #CCC;
    float: left;
    height: 18em;
    width: 20em;
    margin: 1em 1em 4em 1em;
}

.one-two-three .iconWText.vertical li {
    float: left;
    width: 24em;
}


p.moreInfo {
    width: 90%;
    font-size: 100%;
}

p.moreInfo.subtext {
    color: #666;
}

.box p.subtext {
    margin-left: 3em;
    width: 47em;
}

.box li p.subtext {
    margin: 1em 0 0 0;
}
.notice h2 { margin-bottom: 0.5em;}
.notice p { margin: 0; }

/*box is used when it's sole column- no group wrapper*/
.box {
    border: 3px solid #EEF4FF;
    margin-bottom: 1em;
}
/* use this when you need some padding around all of the content within box (box can't be padding because of title area)*/
.boxContent { padding: 1em; }
.box.bg .box.bg { float: left; }
.box .btn { margin: 0 0.25em 1em 1em; }

.box .btn.second { margin-left: 0; }

/*if a btn is already inside a div then we don't need the above rule */
.box div .btn { margin: 0.5em 0 0.5em 0; }


.box.padLeft div { margin-left: 1em; }

.groupOf3 .one.splitter.padLeft { padding-left: 1em;
    width: 24em;
}

.groupOf3 .two.splitter.padRight { padding-right: 1em;
    width: 24em;
}

/*
for elements inside of 'box' since the box heading styling doesn't work with padding,
so box has no padding thus needs more margins for elements within
 */
.box h1 {
    padding-left: 0.5em;
    border: 0;
    font-size: 1.5em;
    text-transform: none;
    line-height: 2em;
    text-shadow: 1px 1px 1px #E0E0E0;
}
.box ul, .box dl{ margin: 2em 1em; }
.box ol { margin: 2em 3em;}
.box h3, .box.indent_h4 h4 { margin-left: 1em; }
.box .aside h3 { margin: 0 0 0.5em 0; }
.box ul ul, .box ol ul { margin-left: 2em; }
.box .aside,  .box .notice {
    width: 94.5%;
    margin: 0 0 1em 1em;
}
.box p { margin: 0 1.2em 1.2em 1.2em; }
.box p.margin-left {margin: 0 0 0 0.5em;}

#loading {
    background-image: url(/images/graphics/loading.gif);
    display: none;
    height: 0;
    width: 0;
}

#loading.active {
    background-image: none;
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    z-index: 1000;
}

#loading.active div {
    display: block;
}

#loading div {
    display: none;
    color: #39C;
    font-size: 1.3em;
    font-weight: bold;
    height: 9em;
    width: 24em;
    line-height: 13em;
    margin: 9em auto;
    position: relative;
    text-align: center;
    z-index: 1000000;
    border: 1px solid #39C;
    background-color: #FFF;
    background-image:url(/images/graphics/loading.gif);
    background-position: center 28px;
    background-repeat: no-repeat;
}

#loading span {
    height: 100%;
    width: 100%;
    background: url(/images/bg/000_75percent.png) repeat;
    display: block;
    position: absolute;
    z-index: 1000;
    opacity: 0.7;
}
/* --- END COMPONENTS --- */


/**
--- MEASUREMENTS ---
 **/
.h101p            { height: 101px;}
.h3               { height: 3em ;}
.h4               { height: 4em; }
.h5               { height: 5em;}
.h8p75            { height: 8.75em;}
.h8               { height: 8em; }
.h10              { height: 10em; }
.h10p75           { height: 10.75em;}
.h14              { height: 14em;}
.h16              { height: 16em;}
.h18              { height: 18em;}
.h19p1           { height: 19.1em; }
.h37p55           { height: 37.55em; }
.h19              { height: 19em; }
.h29             { height: 29em; }
.h21p5           { height: 21.5em; }
.h21p75           { height: 21.75em; }
.h22              { height: 22em; }
.h22p1            { height: 22.1em;}
.h24p5            { height: 24.5em;}
.h25              { height: 25em;}
.h31p5            { height: 31.5em; }
.h34              { height: 34em; }
.h35p25           { height: 35.25em; }
.h36              { height: 36em; }
.h41              { height: 41em;}
.h44              { height: 44em;}
.h49              { height: 49em;}
/* width */
.w7p5             { width: 7.5em;}
.w12              { width: 12em;}
.w12p5            { width: 12.5em; }
.w28              { width: 28em; }
.w4p5             { width: 4.5em; }
.w10              { width: 10em; }
.w48              { width: 48em; }
.w64              { width: 64em; }


/* --- END MEASUREMENTS --- */


/**
--- MISC ---
 **/

/*if an element occurs more than a few times, add to list here. otherwise, just apply class of .corner-all*/
.corner-all, .box, fieldset, .closeBtn, .subnav, .decor, .panel, .warning, .notice, .aside, .confirm, #loading div, #breadcrumb {
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#mycloudmark .one-two li.first {
    width: 10em;
}

/* the 'save' class is used for form btns*/
.save {
    clear: both;
    border-bottom: 1px solid #EEF4FF;
    margin: 1em 0 3em 0;
    padding-bottom: 1em;
}

.save a.secondary {
    margin-left: 1.2em;
    color: #036;
    font-size: 120%;
}

.save .primary, .tabular .primary {
    text-transform: capitalize;
}
.save a.secondary:hover {
    color: #39C;
}


h1 p {
    text-transform: none;
    color: #036;
    font-size: 60%;
}

h1 p span.big {
    font-size: 150%;
}

/* useful general styles*/
.abs              { position: absolute;}
.activeLink       { cursor: default; }
.alignRight       { text-align: right;}
.big              { font-size: 2em; }
.clear            { clear: both; }
.centered         { text-align: center; width: 100%;}
.margin-top       { margin-top: 1.2em; }
.even             { background: #EEF4FF; }
.floatRight       { float: right; }
.link             { cursor: pointer; text-decoration: underline; }
.med, .btn.med    { font-size: 1.2em;}
.small            { font-size: 1em; }
.smaller          { font-size: 0.85em; }
.splitter         { border-right: 1px dotted #CCC; }
.expandable { margin-bottom: 1em; }
.noPadding, .noPadding li, .noMarginPadding  { padding: 0;}
.noMarginPadding, .no-margin, .box p.no-margin   { margin: 0; }
.noOverflow { overflow: hidden; }
.offsetSmall { margin-left: 1em; }
.offset, .box p.offset     { margin-left: 2em; }
.defaultMargin, .aside.defaultMargin, .notice.defaultMargin {
    margin: 1em;
}
.box .aside.margin-top3 { margin-top: 3em; }
.defaultMargin-noleft {
    margin: 1em 1em 1em 0;
}
.link { cursor: pointer; color: #39C; }
.link:hover { color: #036; }
.lh2              { line-height: 2em;}
.margin-left-sm  { margin-left: 0.25em;}
.margin-left    { margin-left: 1em;}
.margin-right    { margin-right: 1em; }
.margin-right7p5 { margin-right: 7.5em;}
.margin-left.more {margin-left: 1.75em;}
.margin-bottom { margin-bottom: 1.6em; }
.underline    { border-bottom: 1px dotted #CCC; }
.overline    { border-top: 1px dotted #CCC; padding-top: 0.5em; }
.ucase    { text-transform: uppercase; }
.caps         { text-transform: capitalize; }
.right       { text-align: right; }
.noInline label { display: block; }
span.right   { display: block; width: 100%;}
.box h3.noMarginLeft {margin-left: 0;}
.subtext { color: #999;}
.color3 {color: #666;}
.highlight { color: #C15C1A;}
.L10nOnly { display: none; }
h3.underline { margin-bottom: 0.5em; }
h1 span { color: #39C; }
h1 span.subtext { font-size: 0.9em; text-transform: none;}
.break-word  { word-wrap: break-word; }
p.condensed, .condensed {
    font-size: 0.9em;
    width: 22em;
    line-height: 1.5em;
    margin: 0;
}
a.no-underline {text-decoration: none;}
a.color1 {
    color: #036;
}

a.color1:hover, .color2 {
    color: #39C;
}

.lowlight, #body h1 span { color: #036; }

#body h1 a {
    float: right;
    font-size: 0.6em;
    text-align: right;
    text-transform: none;
}

.note {
    color: #39C;
    display: block;
    margin-top: 27px;
}

span.hint {
    color: #999;
    display: block;
    float: right;
    font-size: 0.9em;
}
.hidden,  #helpNav li ul {
    display: none;
}

/*--- END MISC ---*/


/**
---PAGE SPECIFIC ---(putting all here and then try to minimize use)
 **/

#helpNav li ul ul, #helpNav li ul ul ul {
    display: block;
}

#recoverPwdForm .pushRight { margin-left: 9.5em; }
.pg_help .box p.pagination {
    margin-left: 2em;
}
.pg_help .two-three-four .box h3 {
    margin-bottom: 0.5em;
}
.pg_help .box .aside {
    width: 93.25%;
}

#helpHome ul .image {
    height: 48px;
    width: 48px;
    margin: 0 1em 0 0;
    float: left;
    position: relative;
}

#helpHome .box li {
    border-top: 1px solid #f0f0f0;
    list-style: none;
    padding: 0;
}
 
#helpHome .box ul p {
    margin: 0 0 0.5em 0;
    font-weight: bold;
}

#helpHome .box ul {
    margin: 0;
}

#helpHome .box ul a {
    padding: 1em 0 1em 1em;
    text-decoration: none;
    display: block;
    background: #fff;
}

#helpHome .box ul a:hover {
    background: #EEF4FF;
}

#pg_dwn dl {
    float: left;
    margin: 1em 0 1em 2em;
}

.pg_help .groupOf4 {
    margin-top: 1.2em;
}
.pg_help .aside ul { margin: 0; }
.pg_help .aside li .highlight { font-size: 120%; }

p.small-margin {
    margin-bottom: 0.25em;
}

.four a.image {
    width: 100px;
    height: 77px;
    float: left;
    margin-right: 8px;
    display: block;
}

#scMagNom {
    background-position: -2px -652px;
    height: 194px;
    margin-bottom: 2em;
}

#pg_homepage .four .box p.overline {
    padding-top: 2em;
}
#pg_homepage .four .box p {
    margin-right: 0;
    font-size: 1em;
}

#pg_homepage .four .box p.first {
    padding-bottom: 1em;
    margin-right: 1em;
}
#pg_homepage .four .box p.second, #pg_homepage .four .box p.overline {
    margin-right: 1em;
}

iframe.twitter-follow-button {
    margin: 10px 0 0 0.5em;
}

#mycloudmark #body h1 a {
    font-weight: bold;
    color: #c62;
}

#mycloudmark #body h1 a:hover {
    text-decoration: none;
}

/*--- END PAGE SPECIFIC --- */