body {
    margin: 0;
    padding: 0;
    background: #aec5db url(../images/bg-body2.gif) repeat-x;
    font: 16px/1.5 "Lucida Grande", Arial, sans-serif;
	color: #3d3d3d;
}

/* Idea from Richard Rutter / clagnut.com
    Set majority of font-sizes */
p, ul, ol, dl, table, address, blockquote, fieldset, pre, form form div /* Double form, as .Net always contained by a form */
{
    font-size: .8125em;
    margin: 0 0 20px 0;
}

/* ??? en cancel out most nesting */
ul p, ol p, table p, dl p, ul ul, ol ol, ul ol, ol ul, table ul, table ol, address p, li blockquote, blockquote p, form form div div, form form div p, fieldset div, table form div
{
    font-size: 1em;
}
ul, ol, dl, li, dt
{
    margin: 0;
    padding: 0;
}

.small { font-size: .75em; }

a, a:visited {
    color: #007fc5;
    text-decoration: underline;
}
a:hover 
{
    color: #00448a;
}

#header img {
	border: none;
}

div.primary-content ol, div.primary-content ul {
    margin-left: 3em;
}

div.primary-content table 
{
	border:  solid 1px;
}

div.primary-content td
{
	padding: 6px;
	border:  solid 1px;
}

div.primary-content li {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}
	
div.primary-content img
{
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    max-width: 600px;
}
div.primary-content img.block { display: block; }

div.primary-content img.inlineimg
{
    margin: 0 .4em 0 0;
    vertical-align: text-top;
}

div#header, 
div#page-content,
div#download-invite
 {
    width: 900px;
    margin-left: auto;
    margin-right: auto;    
    padding: 0 30px;
    /*background: white;*/
    overflow: hidden; /* HACK: Used to prevent horizontal scrollbar appearing at 1024*768, no content should be hidden as the content is less than, but if anything starts disappearing, check here */
}

div#header {
    margin-top: 0;
    margin-bottom: 0px;
    height: 123px;
    background: url(../images/bg-header.gif) no-repeat bottom left;    
    padding-bottom: 30px; /* So the header's image is always visible, regardless of height */
    position: relative;
    /*z-index: 3;
    overflow: visible;*/
}

div#logo {
    position: absolute;
    top: 30px;
    left: 7px;
}

div#tagline {
    position: absolute;
    top: 44px;
    left: 418px;
    text-align: right;
    width: 300px;
    border-left:1px solid #007FC5;
    padding-top:6px;
}

div#social {
	position: absolute;
    top: 50px;
    right: 0px;
    width: 140px;
}

.headerFacebook {
	background: url(../images/facebook-header.png) no-repeat center 0px;
	padding-top:36px;
	color:#0E60BA;
	font-family: Rockwell, Arial;
	font-size:14px;
	display:block;
	float:left;
	text-decoration:none;
}
.headerFacebook:hover { text-decoration:underline }

.headerTwitter {
	background: url(../images/twitter-header.png) no-repeat center 0px;
	padding-top:36px;
	color:#0E60BA;
	font-family: Rockwell, Arial;
	font-size:14px;
	display:block;
	float:left;
	text-decoration:none;
	margin-left:24px;
}
.headerTwitter:hover { text-decoration:underline; }

.languageDropdownOuter 
{
	position: absolute;
	left: 345px;
	top: 1px;
	z-index: 100;
	/*top: 0px;
	width: 400px;
	height: 150px;*/
}

.languageDropdownInner
{
	vertical-align: top;
	margin-top: 2px;
	margin-bottom: 0px;
	font-size: 12px;
}


ul#main-navigation {
    list-style: none;
    float: right;
    margin: 0 -20px 0 0; 
    /*position: absolute;
    top: 0;
    right: 30px;    
    padding: 0;*/
}

ul#main-navigation li {
    float: left;
}

ul#main-navigation li a,
ul#main-navigation li a:visited 
{
    display: block;
    background: transparent url(../images/tabs.gif) no-repeat 0 -30px;
    width: 77px;
    height: 28px;
    margin-left: 7px;
    padding-top: 3px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px #000000;
}

/* Current section shows selected tab */
ul#main-navigation li a.current,
/* and on hover */
ul#main-navigation li a:hover
{
    background-position: right -30px;
}

div#page-content {
    background: url(../images/bg-page-content.gif) no-repeat;
    position: relative;
    padding-top: 10px;
    /*overflow: visible;*/
}

#breadcrumbs {
    font-size: 0.7em;
    position: absolute;
    bottom: -22px; /*top: -26px;*/ /*Any lower, and it will be hidden by the page-content section  - overflow:hidden to prevent unwanted horizontal scrollbar at 1024*768 - we could combine the top ribbon and header image into one, then avoid a lot of these display and position snags */
    left: 30px;
}
#breadcrumbs a { text-decoration: none; }
#breadcrumbs a:hover { text-decoration: underline; }
#breadcrumbs img 
{
    margin: 0 5px;
}

a.greylinks
{
	font-size: 0.8em;
	color: #818181;
}
p a.greylinks
{
    font-size: 0.985em; /* If a greylink is shrunk by the parent paragraph, then shrunk again by the hyperlink's greylink class,it will be too small - so element / parent  = .8em / .8125em ~ .985em */
}

/* Icons */
.pdf { background: url(../images/icon-pdf-small.gif) left center no-repeat; padding: 1px 0 1px 20px; }
a.pdf-large, .pdf-large a { background: url(../images/icon-pdf-large.gif) left center no-repeat; padding: 20px 0 15px 55px; } 
/* Ensure the parent element is can display the entire icon */
p.pdf-large { margin: 20px 0; }

div#download-invite {
    background: transparent url(../images/ribbon.gif) no-repeat ;
    height: 95px;
    width: 960px;
    margin-left: -30px;
    /*position: relative;*/
}
/*div#download-invite h1 {
    position: absolute;
    top: 0;
    left: 34px;
}*/
div#download-invite a.downloadlink 
{
	/* button-download.png is the alternative: uses transparency, but doesn't work on IE6.*/
    background: transparent url(../images/button-download2.png) no-repeat center;
    position: absolute;
    top: -1px;
    right: 30px;
    width: 325px;
    height: 92px;
}

/*
div#download-invite div.metadata {
    position: absolute;
    top: 56px;
    left: 766px;
    color: white;
    font-size: 0.7em;
    text-shadow: 0 1px 1px #000000;
}
*/

ul#reasons-to-download {
    list-style: none;    
    margin: 10px 0 0 0; 
    padding: 0;
    padding-left: 10px;
    margin-left: 0px;
}

ul#reasons-to-download li {
    float: left;
    margin-right: 5px;
    padding-left: 20px;
    color: #3d3d3d;
    background: transparent url(../images/border-vertical.gif) no-repeat left center;
    width: 200px;
    min-height: 132px;
}
ul#reasons-to-download li.first 
{ 
    background: none; 
    padding-left: 0;
}

ul#reasons-to-download li h2 {
    padding-left: 35px;
    min-height: 27px;
    font-size: 24px;  /* Don't forget to change in sifr.css too! */
    background: transparent url(../images/icon-free.png) no-repeat left top;
}
ul#reasons-to-download li h2 span {
    padding-top: 1px;
}

ul#reasons-to-download li h2.free {
    background-image: url(../images/icon-thumbsup-s.gif);
}
ul#reasons-to-download li h2.safe {
    background-image: url(../images/icon-lock-s.gif);
    padding-left: 28px;
}
ul#reasons-to-download li h2.continuous {
    background-image: url(../images/icon-arrows-s.gif);
}
ul#reasons-to-download li h2.online {
    background-image: url(../images/icon-globe-s.gif);
    padding-left: 28px;
}

ul#reasons-to-download a 
{
    background: url(../images/bullet-blue.gif) no-repeat center left;
    padding-left: 10px;
}

/*div#main-frontpage-content,
div#footer,
div#page-body-content {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}*/

/*div#main-frontpage-content {
    margin-top: 20px;
    padding:  0 0 0 26px;
    background: #C3E4FF;
    border: 3px solid #A9D9FF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}


div#main-frontpage-content*/ div.primary-content {
    float: left;
    width: 565px;
    padding-left: 10px;
}

#home div.primary-content {
    /*background: white url(../images/bg-content.gif) no-repeat top left;*/ /* shaded background */
    min-height: 400px;
    width: 575px;
    padding-left: 0;
}

div.full
{
    width: 100%;
}

div.primary-content p 
{
    margin-bottom: 13px;
}

div.primary-content #screenshot
{
    float: left;
    width: 303px;
    margin-right: 15px;
}

div.primary-content ul.usp 
{
    margin: 5em 0 2em 315px;
    padding: 0;
    color: #007fc5;
    font-weight: bold;
}
div.primary-content ul.usp li 
{
    list-style: none;
    background: url(../images/bullet-tick.gif) left center no-repeat;
    padding-left: 30px;
    margin-bottom: 15px
    /*list-style-image: url(../images/bullet-tick.png);*/
}

/* sidebar */
div.supporting-media 
{
    float: right;
    width: 308px;
    padding: 1em 0;
}

.secondary-navigation li
{
	/* See also sifr.css .sIFR-active .secondary-navigation li */
    list-style: none;
    padding-left: 20px;
    margin-bottom: 10px;
    padding-top: 0px;
}

.secondary-navigation li a, .secondary-navigation li a:visited
{
	text-decoration: none;
	font-size: 18px;  /* Don't forget to change in sifr.css too! */
    font-family: Rockwell, Arial;
}

/* Selector did include the link element - but in IE7 sIFR links weren't clickable */
.secondary-navigation li.current,
.secondary-navigation li:hover
{
    background: url(../images/bullet-green-big.gif) left 8px no-repeat;
}

/* HACK: If the background images don't load, the white text will not be visible as they will be on a white background. How can we avoid this, whilst using transparent images? As it is, setting a background colour will bleed through any transparent areas runing the display */
div.supporting-media blockquote
{
    background: url(../images/blockquote-top.gif) left top no-repeat;
    width: 257px;
    margin: 1em auto;
    padding-top: 45px; /* To ensure the top image shows */
    line-height: 1.25;
    margin-top: 1em;
}
div.supporting-media blockquote p
{
    background: url(../images/blockquote-bottom.gif) left bottom no-repeat;
    color: White;
    padding: 0 1em 85px; /* To ensure the bottom of the image shows */
    font-weight: bold;
    text-align: center;
}

/* Compatible section */
p.compatible 
{
    font-size: 0.7em; 
    color: #818181;
}
p.compatible img
{
    display: block;
    margin-top: 1em;
}
div.supporting-media p.compatible 
{
    margin: 1em 4em 3em;
}

/* Highlight content area */
div.highlight
{
    background: #C3E4FF;
    border: 3px solid #A9D9FF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-bottom: 1em;
    padding: 10px 5% 10px;
    overflow: hidden;
}

div.highlight h3
{
    margin: 0;
    padding: 0;
    font-size: 18px;
}

div.highlight ul
{
    margin: 0;
}    
div.highlight li
{
    float: left;
    width: 50%;
    list-style: none;    
    margin: 0 0 .25em 0;
}
div.highlight li a
{
    background: url(../images/bullet-blue.gif) left center no-repeat;
    padding-left: 10px;
}

ul.highlight li
{
    float: left;
    background: #C3E4FF url(../images/bg-highlight.png) left top no-repeat;
    width: 440px;
    height: 96px;
    margin-bottom: 16px;
    list-style: none;
    overflow: hidden;
}
/*ul.highlight li.how-buddybackup-works,
ul.highlight li.why-choose-buddybackup*/
ul.highlight li.even
{
    margin-left: 16px;
}
ul.highlight li:hover
{
    /*border-color: #0080c8;*/
    /*background-image: url(../images/bg-highlight-hover.png)*/
}

ul.highlight li a 
{ 
    text-decoration: none;
}

ul.highlight li div
{
    background: url(../images/icon-network.gif) 10px center no-repeat;
    padding: 10px 8px 10px 86px;
}

/* About / Help icons */
/*ul.highlight li.how-buddybackup-works div,
ul.highlight li.getting-started div
{
    background-image: url(../images/icon-network.gif);
}*/
ul.highlight li.system-requirements div
{
    background-image: url(../images/icon-laptop.gif);
}
ul.highlight li.why-choose-buddybackup div
{
    background-image: url(../images/icon-question.gif);
}
ul.highlight li.contact-us div
{
    background-image: url(../images/icon-letter.gif);
}

ul.highlight li.online-manual div
{
    background-image: url(../images/icon-q.gif);
}
ul.highlight li.download-manual div
{
    background-image: url(../images/icon-pdf.gif);
}
ul.highlight li.restoring-lost-files div
{
    background-image: url(../images/icon-restoring.gif);
}
ul.highlight li.faq div
{
    background-image: url(../images/icon-faq.gif);
}
ul.highlight li.forum div
{
    background-image: url(../images/icon-bulb.gif);
}

ul.highlight li h2 { margin: 10px 0 -8px 0; }
ul.highlight li p { margin-top: .4em; color: #3d3d3d; }

/*
 * Power footer
 */

div#power-footer 
{
    width: 960px;
    height: 204px;
    margin-left: -30px;
    padding-top: 20px;
    font-size: 0.9em;
    background: transparent url(../images/bg-power-footer.gif) left top no-repeat;
    position: relative;
    color: white;
}

div#power-footer ul 
{
    padding: 0;
}
div#power-footer li {
    list-style: none;
    background: url(../images/bullet-white.gif) left center no-repeat;
    padding-left: 8px;
    margin-bottom: .4em;
}

div#power-footer a, div#power-footer .small a:hover {
    color: white;
}

div#power-footer .small, div#power-footer .small a,
div#power-footer a:hover
{ color: #71a0c9; }

/*div#power-footer .top {
    height: 19px;
    background: #1F3F8C url(../images/powerfooter_top.png) top left repeat-x;
    margin: 0;
}

div#power-footer .gradient-bg {
    background: transparent url(../images/powerfooter_gradient.png) top left no-repeat;
}

div#power-footer .bottom {
    background: transparent url(../images/powerfooter_base.png) bottom left repeat-x;
    height: 3px;
}*/

div#about-bb, div#support-bb, div#update-email-bb {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 50px;
    position: relative;
}

div#about-bb {
    width: 225px;
    padding-left: 35px;
}

div#support-bb {
    width: 225px;
}


div#update-email-bb {
    width: 325px;
}
div#update-email-bb p { margin-top: 0; }
div#update-email-bb p.small { margin-top: 10px; }


/*div#about-bb {
    padding-left: 110px;
}*/

div#footer {
    clear: both;
    color: #818181;
}

div#footer p 
{
    margin: 1em 0;
	font-size: 12px;
}
div#footer p.left {
    width: 50%;
    float: left;
}

div#footer div.right {
    width: auto;
    float: right;
    text-align: right;
    font-size:1em;
    margin-top:11px;
}

/* Generic pages * /

div.primary-content {
    width: 55%;
    float: left;
}

div.supporting-media {
    float: right;
    width: 40%;
    text-align: right;
    text-transform: uppercase;
    color: #ccc;
    padding-top: 2em;
}*/

/* Team page */

div.team-member {
    float: left;
    width: 280px;
    padding: 0 50px 30px 120px;
}

div.team-member img {
    float: left;
    margin-top: 20px;
    margin-left: -120px;
    width: 93px;
    height: 123px;
    border: 3px solid #c3c3c3;
    background: #d3d3d3;
}

/* About page */

ul#section-headings-left, ul#section-headings-right {
    float: left;
    width: 440px;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 2em;
}

ul#section-headings-right {
    float: right;
}

ul#section-headings-left li, 
ul#section-headings-right li {
    margin-top: 25px;
    display: block;
    background: #C3E4FF;
    border: 3px solid #A9D9FF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 20px 10px;
}


ul#section-headings-left p, 
ul#section-headings-right p,
ul#section-headings-left h2, 
ul#section-headings-right h2 {
    margin: 0;
    margin-left: 60px;
}

ul#section-headings-left li a, 
ul#section-headings-right li a {
    text-decoration: none;
    color: #0D5FB9;
}

ul#section-headings-left li img, 
ul#section-headings-left li span, 
ul#section-headings-right li img,
ul#section-headings-right li span {
    border: none;
    float: left;
    display: block;
}


ul#section-headings-left li a:hover, 
ul#section-headings-right li a:hover {
    text-decoration: underline;
}

/* non-sifr styling */
h1, h2, /* Removed h3, */ #download-invite h1,
#power-footer h3,
#main-page-content h2,
#main-page-content h3,
div#tagline { 
    font-family: Rockwell, Tahoma;
}

h2 {
    font-size: 22px;
    color: #0D5FB9;
    margin: 0;
    padding-bottom: .2em;
}
ul.highlight h2
{
    font-size: 20px;
    color: #0D5FB9;
}

ul.highlight h2 a
{
    text-decoration: none;
    color: #0D5FB9;
}

ul.highlight h2 a:hover
{
    text-decoration: underline;
    color: #0D5FB9;
}

h3 {
    font-size: 14px;
    font-weight: bold;
    color: #0D5FB9;
    margin-bottom: .4em;
}

#download-invite h1 {
    color: white;
    text-shadow: 0 1px 1px #000000;
    font-size: 28px;
    margin-top: 13px;
    font-weight: normal;
    width: 550px;
}

#power-footer h3 {
    line-height: 1em;
    font-size: 16px;
    margin-bottom: 0.8em;
    color: white;
}

/*#main-frontpage-content h2,
#main-frontpage-content h3 {
    width: 530px;
    color: #0D5FB9;
}*/

div#tagline 
{
	line-height: 1em;
    color: #63b900;
    font-size: 29px;
}

/* Form styles */

input.text {
    background: url(../images/input_text_bg.png);
    border: 1px solid #015da8;
    width: 225px;
    height: 19px;
    padding: 3px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

input.button {
    background: url(../images/input_button_bg.gif);
    color: white;
    border: none;
    width: 79px;
    height: 25px;
    text-transform:uppercase;
}

.textboxWatermark {
    color: #555;
    font-style: italic;
}

/* Utility Classes */

.visualClear {
    clear: both;
}


/* Download Page */
#downloadButton {
	position: absolute;
	margin: 50px 0 0 550px;
}

#downloadButton p.compatible {
	margin-left: 60px;
}

.buddyBackupEmailError { color:#ff5a00; font-size:80%; }

.award { clear:both; background: url(../images/award.png) no-repeat 40px 0px; width:100%; margin:15px 0px 30px 0px; }
.award  .awardContent { margin-left:136px; margin-right:40px; border-top:2px solid #F04A51; border-bottom:2px solid #F04A51; }
.award  .awardContent p { line-height:1.3em; background: url(../images/red-quote.png) no-repeat 0px 4px; margin:15px 0px 25px 0px; color:#EC1D25; font-style:italic; padding-left:46px; }
.award  .awardContent .stars { margin:-22px 0px 0px 0px; float:right; padding-left:74px; background: url(../images/stars.png) no-repeat 0px 3px; color:#EC1D25; font-style:italic; }