﻿body {
	padding: 0;
	margin: 0;
	font-size: 75%;
	font-family: Helvetica, Arial, sans-serif;
	color: #000;
	background-color: #fefad4;
}
/*********************************************************
    Sites wise basic styls
*********************************************************/
a{text-decoration: none;}
a:visited{text-decoration: none;color: Blue;}
span.links{color: Blue; text-decoration:underline;}
html[lang="en"] h1{text-transform: uppercase;}
textarea{font-size: 100%; font-family: Helvetica, Arial, sans-serif;}

.CenterAligned { text-align: center; }
.RightAligned { text-align: right; }
.ButtonHolder { height: 40px; }

input.LeftAligned{}
input.RightAligned{float: right;}

/*********************************************************
    Wrapper is the container of the whole content 
    area. The main purpose is set fixed with to the
    content and align everything in the centre.
*********************************************************/
div.Wrapper{margin: 0 auto; width: 975px;}

/*********************************************************
    TopNav is the navigation links sits on top of the
    page, but outside the main content block.
*********************************************************/
div.TopNav{ text-align: right; height: 60px; }
div.TopNav a, div.TopNav a:hover, div.TopNav a:visited{color: blue;}

/*********************************************************
    The holder of the content area. Top, bottom and 
    inner creates additional borders lines.
*********************************************************/
div.ContentTop{height: 2px; background: url(../images/content-top.png); overflow: hidden;}
div.ContentBottom{ height: 34px; background: url(../images/content-bottom.png); overflow: hidden;}
div.ContentHolder{ border-width: 1px 3px; border-style: solid; border-color: #023880;}
div.ContentHolderInner{border: 1px solid #fff; background-color: #fff; padding: 0;}

/*********************************************************
    Header, main navigation and footer.
*********************************************************/
div.Header{ position: relative; z-index:1; height: 36px; padding-top: 67px;}
html[lang="en"] div.Header{background: #023880 url(../images/header-brg-en.jpg) top right no-repeat;}
html[lang="fr"] div.Header{background: #023880 url(../images/header-brg-fr.jpg) top right no-repeat;}
.Logo{ display:block; position:absolute; top: -55px; left: 30px; width: 290px; height: 142px; background: url(../images/logo.png)}
div.Menu{ position: absolute; top: 57px; right: 0px; z-index: 10; height:76px; background-color: #fbe93f; font-weight: bold; font-size: 12px; color: navy;}
html[lang="en"] div.Menu{width: 555px; background: url(../images/nav-en.png) right top no-repeat;}
html[lang="fr"] div.Menu{width: 551px; background: url(../images/nav-fr.png) right top no-repeat;}

html[lang="en"] div.M1{ background-position: right -101px;}
html[lang="en"] div.M2{ background-position: right -200px;}
html[lang="en"] div.M3{ background-position: right -300px;}
html[lang="en"] div.M4{ background-position: right -400px;}
html[lang="en"] div.M5{ background-position: right -500px;}

html[lang="fr"] div.M1{ background-position: right -101px;}
html[lang="fr"] div.M2{ background-position: right -200px;}
html[lang="fr"] div.M3{ background-position: right -300px;}
html[lang="fr"] div.M4{ background-position: right -400px;}
html[lang="fr"] div.M5{ background-position: right -500px;}

div.Header>div.Menu{ overflow: visible;} /*** Special rule for non-IE6 ***/

div.Menu ul{margin: 15px 0 0 19px; padding: 0;}
div.Menu li{list-style-type: none; display: block; float: left;}
div.Menu a{display: block; height: 32px; opacity: 0.3;}
div.Menu a span{visibility: hidden;}
html[lang="en"] a.M1{ width: 208px; /*background-color: Aqua;/**/}
html[lang="en"] a.M2{ width: 121px; /*background-color: Fuchsia;/**/}
html[lang="en"] a.M3{ width: 138px; /*background-color: Aqua;/**/}
html[lang="en"] a.M4{ width: 131px; /*background-color: Fuchsia;/**/}
html[lang="en"] a.M5{ width: 76px; /*background-color: Aqua;/**/}

html[lang="fr"] a.M1{ width: 201px; /*background-color: Aqua;/**/}
html[lang="fr"] a.M2{ width: 121px; /*background-color: Fuchsia;/**/}
html[lang="fr"] a.M3{ width: 152px; /*background-color: Aqua;/**/}
html[lang="fr"] a.M4{ width: 129px; /*background-color: Fuchsia;/**/}
html[lang="fr"] a.M5{ width: 71px; /*background-color: Aqua;/**/}

div.Copyright{color: navy; margin: 0px 0 25px 0; font-size: 0.9em;}
div.Copyright a:link, 
div.Copyright a:visited{color: navy;}
div.Copyright a:hover{color: #afecfe;}

div.Disclaimer{color: #000; margin: 0px 0 25px 0; font-size: 0.9em;}
/*********************************************************
    Content body holder.
*********************************************************/
#ContentBody { position: relative; z-index:0; margin: 0 auto; height: 557px; }

#ContentBody div#block1, 
#ContentBody div#block2, 
#ContentBody div#block3{ position: absolute; overflow: auto; }

#ContentBody h1,
#ContentBody h2,
#ContentBody h3{ color: #174076;}

#ContentBody h1{ font-size: 2em; font-style: italic; font-family: Impact; font-weight: normal; border-bottom: 1px solid #174076; padding-bottom: 4px;}
#ContentBody h2{ font-size: 1.833em; font-style:normal; font-weight:bold; }
#ContentBody h3{  margin-bottom: 0;}
#ContentBody p{}
#ContentBody h3+p{margin-top: 0;}

/*********************************************************
    Article layout
*********************************************************/
html[lang="en"] #ContentBody.ArticleLayout {background: url(../images/brg/summer/page-brg-en-summer.jpg)}
html[lang="fr"] #ContentBody.ArticleLayout {background: url(../images/brg/summer/page-brg-fr-summer.jpg)}

#ContentBody.ArticleLayout h1{margin: 0; overflow: hidden;}
#ContentBody.ArticleLayout p{overflow: hidden;}
#ContentBody.ArticleLayout #block1{ top: 51px; left: 72px; width: 752px; height: 273px; padding: 19px 33px; overflow: auto; }


#ContentBody.ArticleLayout #block2,
#ContentBody.ArticleLayout #block3{ overflow: visible; width: 391px; height: 98px; padding: 7px 13px; border: 1px solid #033780; /*background-color: pink; opacity: 0.3; */}
#ContentBody.ArticleLayout #block2{ top: 406px; left: 57px; }
#ContentBody.ArticleLayout #block3{ top: 406px; left: 494px; }

#ContentBody.ArticleLayout #block2 h1,
#ContentBody.ArticleLayout #block3 h1{ overflow: hidden; font-size: 1.333em; height: 17px; font-family:Impact; }

#ContentBody.ArticleLayout #block2 p,
#ContentBody.ArticleLayout #block3 p{margin: 6px 0 5px; width: 280px; height: 60px; color: #174076;}

/*********************************************************
    Homepage styles
*********************************************************/
#ContentBody.Homepage{height: 556px; }
html[lang="en"] #ContentBody.Homepage {background: url(../images/brg/summer/homepage-brg-en-summer.jpg);}
html[lang="fr"] #ContentBody.Homepage {background: url(../images/brg/summer/homepage-brg-fr-summer.jpg);}
#ContentBody.Homepage p{margin: 0; color: #174076;}
#ContentBody.Homepage #block1 p{font-size: 14px;}
html[lang="en"] #ContentBody.Homepage #block2 p,
html[lang="en"] #ContentBody.Homepage #block3 p{height: 75px; color: Black;overflow: hidden;}
html[lang="fr"] #ContentBody.Homepage #block2 p,
html[lang="fr"] #ContentBody.Homepage #block3 p{height: 90px; color: Black;overflow: hidden;}
html[lang="en"] #ContentBody.Homepage #block1{ overflow: hidden; top: 118px; left: 283px; width: 235px; height: 125px; padding: 15px 18px 24px 18px;}
html[lang="en"] #ContentBody.Homepage #block2{ overflow: hidden; top: 324px; left: 14px; width: 228px; height: 89px; padding: 51px 20px 24px 20px;}
html[lang="en"] #ContentBody.Homepage #block3{ overflow: hidden; top: 324px; left: 296px; width: 226px; height: 89px; padding: 51px 20px 24px 22px;}
html[lang="fr"] #ContentBody.Homepage #block1{ overflow: hidden; top: 118px; left: 283px; width: 235px; height: 125px; padding: 7px 18px 24px 18px;}
html[lang="fr"] #ContentBody.Homepage #block2{ overflow: hidden; top: 324px; left: 14px; width: 228px; height: 99px; padding: 51px 20px 24px 20px;}
html[lang="fr"] #ContentBody.Homepage #block3{ overflow: hidden; top: 324px; left: 296px; width: 226px; height: 99px; padding: 51px 20px 24px 22px;}

/*********************************************************
    Special offer page
*********************************************************/
html[lang="en"] #ContentBody.SpecialOffer {background: url(../images/brg/summer/special-offer-brg-en-summer.jpg)}
html[lang="fr"] #ContentBody.SpecialOffer {background: url(../images/brg/summer/special-offer-brg-fr-summer.jpg)}
#ContentBody.SpecialOffer #block1{width: 450px;}
#ContentBody.SpecialOffer p{margin-right: 150px;border: 1}
/*********************************************************
    2nd page styles
*********************************************************/
#ContentBody.SinusCongestions #block1{ width: 470px; }
#SinusIllustration {position: absolute; top: 100px; left: 620px; width: 236px; height: 257;}

#CheckList{ border-collapse: collapse; border: 1px solid silver; margin-left: 1px; }
#CheckList td{ width: 80px; padding: 4px 3px;  border: 1px solid silver; text-align: center; }
#CheckList th{ padding: 4px 3px;  border: 1px solid silver; text-align: left; }
#CheckList thead th{ text-align: center;}
#CheckList + p{width: 530px;}

/*********************************************************
    eCard page styles
*********************************************************/
#ContentBody.eCard {height: 750px;}
#ContentBody.eCard #block1{ top: 48px; left: 72px; width: 820px; height: 120px;}
#ContentBody.eCard #block2{ top: 148px; left: 72px; width: 820px; height: 100px;}
#ContentBody.eCard #block3{ top: 248px; left: 72px; width: 820px; height: 500px;}

/* Dev */
/*#ContentBody{background-color:aqua;}*/

/*******************************************************
Fixes for superscript positioning
********************************************************/
h2 sup {position: relative; top: 6px;}
p sup {position:relative; top: 4px; line-height:1px;}
.Copyright sup {position:relative; top:4px;}
h1 sup {position: relative; top: 3px;}
h3 sup {position: relative; top: 5px;}