body{
margin:0 auto;
width:98%;
max-width:1500px;
}
/* Layout */
#HeaderContainer{
margin:10px auto 0 auto;
padding:0px;
position:relative;
overflow:hidden;
width:100%;
border-radius:25px 25px 0px 0px;
z-index:0;  This is needed to make sure the top right image is displayed */
}
#HeaderTitle{
position:absolute;
left:0;right:0;top:5px;bottom:4px;
overflow:hidden;
margin-top:auto;
margin-bottom:auto;
padding:0 5px;
}
.HeaderMarginsPortPort{
margin-left:20%;
margin-right:20%;
}
.HeaderMarginsPortLand{
margin-left:20%;
margin-right:30%;
}
.HeaderMarginsLandPort{
margin-left:30%;
margin-right:20%;
}
.HeaderMarginsLandLand{
margin-left:30%;
margin-right:30%;
}
.HeaderTT{
display:table;
height:90%;
width:100%;
}
.HeaderTT .ttr{
display:table-row;
}
.HeaderTT .ttc{
display:table-cell;
vertical-align:middle;
}
div#HeaderLeft{
float:left;
overflow:hidden;
height:120px;
border-radius:15px 0px 0px 0px;
border-top-width:0;
border-bottom-width:0;
border-left-width:0;
}
.ie9to11 div#HeaderLeft{
border-radius:0;
}
div#HeaderLeft.HeadImgType1,div#HeaderLeft.HeadImgType2,div#HeaderLeft.HeadImgType3,div#HeaderLeft.HeadImgType5,div#HeaderLeft.HeadImgType6,div#HeaderLeft.HeadImgType8,div#HeaderLeft.HeadImgType9{
width:70%;
}
div#HeaderLeft.HeadImgType4,div#HeaderLeft.HeadImgType7{
width:30%;
}
div#HeaderRight.HeadImgType1,div#HeaderRight.HeadImgType2,div#HeaderRight.HeadImgType3{
width:20%;
}
div#HeaderRight.HeadImgType4,div#HeaderRight.HeadImgType5,div#HeaderRight.HeadImgType6,div#HeaderRight.HeadImgType7,div#HeaderRight.HeadImgType8,div#HeaderRight.HeadImgType9{
width:30%;
}

div#HeaderLeft .HeadImgLeftHolder1{
height:100%;
position:relative;
}

.HeadImgType1 .HeadImgLeftHolder1{
width:20.5714%; /* The image holder is 72% of the left header. The left header is 20% of the total header width. However, the left header is set to 70% of the width to allow for the background gradient to go right across underneath the header title (which is absolutely positioned on top). 
Therefore, 20% of the total width is 28.5714% (20/70=28.5714%) of the 70%. 72% of this is 20.5714%. */
}
.HeadImgType2 .HeadImgLeftHolder1,
.HeadImgType3 .HeadImgLeftHolder1{
width:26.2857%; /* The image holder is 92% of the left header. The left header is 20% of the total header width. However, the left header is set to 70% of the width to allow for the background gradient to go right across underneath the header title (which is absolutely positioned on top). 
Therefore, 20% of the total width is 28.5714% (20/70=28.5714%) of the 70%. 92% of this is 26.2857%. */
}
.HeadImgType4 .HeadImgLeftHolder1{
width:80%; /* The image holder is 80% of the left header. */
}
.HeadImgType5 .HeadImgLeftHolder1,
.HeadImgType6 .HeadImgLeftHolder1,
.HeadImgType8 .HeadImgLeftHolder1{
width:39.4286%; /* The image holder is 92% of the left header. The left header is 30% of the total header width. However, the left header is set to 70% of the width to allow for the background gradient to go right across underneath the header title (which is absolutely positioned on top). 
Therefore, 30% of the total width is 42.8571% (30/70=42.8571) of the 70%. 92% of this is 39.4286%. */
}
.HeadImgType9 .HeadImgLeftHolder1{
width:42.8571%; /* The image holder is 100% of the left header. The left header is 30% of the total header width. However, the left header is set to 70% of the width to allow for the background gradient to go right across underneath the header title (which is absolutely positioned on top). 
Therefore, 30% of the total width is 42.8571% (30/70=42.8571) of the 70%. */
}
div#HeaderLeft.HeadImgType7 .HeadImgLeftHolder1{
width:100%;
}
div#HeaderLeft.HeadImgType8 .HeadImgLeftHolder1{
height:100px;
overflow:hidden;
border:2px solid #FFF;
margin:11px 1.7143% 9px 1.7143%;  /* Make the top margin 11px since there is a 2px border at the bottom of the header right. Make the right and left margin 1.7143%. (This is 4% of the left header, which is 30% of the total header. The left header is set to 70%, so 30/70 = 42.8571%. 4% of 42.8571% is 1.7143%.) */
border-radius:5px;
}
div#HeaderLeft.HeadImgType9 .HeadImgLeftHolder1{
/* These settings place the image slice within the header, instead of filling the space. */
/*height:100px;
border-radius:4px;
width:92%;
margin:11px 4% 9px 4%; /* Make the top margin slightly bigger than bottom margin since there is a 2px border at the bottom of the header right. */
/* These settings make the image fill the available space. */
/*height:100%;
margin:0;
border-radius:0;
overflow:hidden;
width:100%;*/
}
.HeadImgType1 .HeadImgHolder2,
.HeadImgType2 .HeadImgHolder2,
.HeadImgType3 .HeadImgHolder2,
.HeadImgType4 .HeadImgHolder2,
.HeadImgType5 .HeadImgHolder2,
.HeadImgType6 .HeadImgHolder2{
position:absolute;
margin:auto;
top:0;bottom:0;left:0;right:0px;
height:83%;
width:85%;
overflow:hidden;
text-align:center;
}
.HeadImgType1 img,.HeadImgType2 img,.HeadImgType3 img{
position:absolute;
margin:auto;
top:0;bottom:0;left:0;right:0px;
max-height:100%;
max-width:100%;
border-radius:7px;
}
.HeadImgType1 img{
padding:0px;
}
.HeadImgType2 img{
padding:2px;
background:#fff;
}
.HeadImgType3 img{
padding:2px;
}
.HeadImgType4 img,.HeadImgType5 img,.HeadImgType6 img{
position:absolute;
margin:auto;
top:0;bottom:0;left:0;right:0px;
max-height:100%;
max-width:100%;
border-radius:7px;
}
.HeadImgType4 img{
padding:0px;
}
.HeadImgType5 img{
padding:2px;
background:#FFF;
}
.HeadImgType6 img{
padding:2px;
}
.HeadImgType7 img{
position:relative;
z-index:-1;
opacity:1;
max-width:none;
}
.HeadImgType8 img,.HeadImgType9 img{
position:relative;
opacity:1;
max-width:none;
}
@media all and (max-width: 768px){
}
@media all and (max-width: 480px){
}
div#HeaderRight{
float:right;
overflow:hidden;
height:120px;
text-align:right;
border-radius:0px 15px 0px 0px;
border-top-width:0;
border-bottom-width:0;
border-right-width:0;
}
.ie9to11 div#HeaderRight{
border-radius:0; /* Needed to stop line appearing in header due to IE bug */
}
.HeadImgType1 .HeadImgRightHolder1{
width:72%; /* This is 72% of the right header, and positions it a bit closer to the right edge. This allows for the background gradient to the left. */
}
.HeadImgType2 .HeadImgRightHolder1,
.HeadImgType3 .HeadImgRightHolder1{
width:92%;
}
div#HeaderRight .HeadImgRightHolder1{
height:100%;
position:relative;
display:inline-block;
}
.HeadImgType4 .HeadImgRightHolder1{
width:80%;
}
.HeadImgType5 .HeadImgRightHolder1,.HeadImgType6 .HeadImgRightHolder1{
width:92%;
margin:0 4%;
}
div#HeaderRight.HeadImgType7 .HeadImgRightHolder1{
width:100%;
}
div#HeaderRight.HeadImgType8 .HeadImgRightHolder1{
height:100px;
width:92%;
overflow:hidden;
border:2px solid #FFF;
margin:11px 4% 9px 4%; /* Make the top margin 11px since there is a 2px border at the bottom of the header right. */
border-radius:5px;
}
div#HeaderRight.HeadImgType9 .HeadImgRightHolder1{
/* These settings place the image slice within the header, instead of filling the space. */
/*height:100px;
border-radius:4px;
width:92%;
margin:11px 4% 9px 4%; /* Make the top margin slightly bigger than bottom margin since there is a 2px border at the bottom of the header right. */
/* These settings make the image fill the available space. */
/*height:100%;
margin:0;
border-radius:0;
overflow:hidden;*/
width:100%;
}
/* Headers */
h1#titlesite{
padding:0;
color:#FFF;
text-shadow:2px 2px 2px #000;
}
h5#tagline{
padding:0;
color:#FFF;
text-shadow:2px 2px 2px #000;
}
/* Navigation */
#navlinkscontainer{
display:block;
margin:0;
padding:0;
width:188px;
}
#navlinkscontainer img{
display:block;
}
#navlinkscontainer img.darrow{
display:inline;
margin-left:2px;
}
#navigationmenuhead{
cursor:pointer;
}
#navlinkscontainer #navbackground{
padding:0;
margin:0;
}
#navlinkscontainer #navlinks{
padding:1px 15px 0 15px;
border:0px solid red;
text-align:left;
color:#FFF;
font-weight:normal; 
text-decoration:none;
}
#navlinkscontainer a.LinkHeading{
font-family:Arial, Helvetica, sans-serif;
font-size:95%;
font-weight:bold;
cursor:pointer;
text-decoration:none;
text-transform:capitalize;
color:#FFF;
display:block;
margin-top:12px;
}
#navlinkscontainer a.LinkHeading:hover{
color:#FF0;
}
#navlinkscontainer ul.LinkItems{
font-family:Verdana, Arial;
font-size:75%;
font-weight:normal;
color:#FFF;
display:block;
padding:0;
margin:0 0 0 15px;
list-style-image:url(../images/bullet1.gif);
}
#navlinkscontainer ul.LinkItems li{
}
#navlinkscontainer ul.LinkItems li a:link, #navlinkscontainer ul.LinkItems li a:visited {
color:#FFF;
text-decoration:none;
}
#navlinkscontainer ul.LinkItems li a.privatelink:link, #navlinkscontainer ul.LinkItems li a.privatelink:visited {
color:#FF9;
}
#navlinkscontainer ul.LinkItems li a:hover, #navlinkscontainer ul.LinkItems li a:active,
#navlinkscontainer ul.LinkItems li a.privatelink:hover, #navlinkscontainer ul.LinkItems li a.privatelink:active {
color:#000;
background:#FF6;
text-decoration:none;
}
#navlinkscontainer a.privatelink{
color:#FF9;
}
/* Mobile navigation menu styles. */
#navlinksmobile{
display:none;
margin:0 0 3px 0;
padding:0;
width:100%;
}
#menuicon{
float:left;
margin-top:2px;
}
#menutext{
margin-left:40px;
}
#navlinksmobile{
font-family:Arial,Helvetica,sans-serif;
font-size:1em;
font-weight:bold;
color:#000;
}
#mobilemenuhead{
margin:2px 0 0 0;
padding:4px 3px 2px 3px;
border:1px solid #999;
background-color:#FFF;
text-align:left;
cursor:pointer;
}
#mobilelinks{
display:none;
}
#navlinksmobile img.darrow{
display:inline;
margin-left:2px;
}
#navlinksmobile #mobilelinks{
}
#navlinksmobile a.LinkHeading{
margin:0;
padding:4px 3px 2px 5px;
border-left:1px solid #999;
border-right:1px solid #999;
border-top:0px solid #999;
border-bottom:1px solid #999;
background-color:#FFF;
text-align:left;
text-decoration:none;
text-transform:capitalize;
color:#000;
display:block;
}
#navlinksmobile .mobilesubmenu{
border-left:1px solid #999;
border-right:1px solid #999;
border-top:0px solid #999;
border-bottom:1px solid #999;
padding-left:7px;
background-color:#FFF;
}
#navlinksmobile ul.LinkItems{
font-size:90%;
font-weight:normal;
color:#000;
display:block;
padding:0;
margin:0 0 0 15px;
list-style-image:url(../images/bullet4.gif);
}
#navlinksmobile ul.LinkItems li{
}
#navlinksmobile ul.LinkItems li a:link, #navlinksmobile ul.LinkItems li a:visited {
color:#000;
text-decoration:none;
}
#navlinksmobile ul.LinkItems li a.privatelink:link, #navlinksmobile ul.LinkItems li a.privatelink:visited {
color:#000;
}
#navlinksmobile ul.LinkItems li a:hover, #navlinksmobile ul.LinkItems li a:active,
#navlinksmobile ul.LinkItems li a.privatelink:hover, #navlinksmobile ul.LinkItems li a.privatelink:active {
color:#000;
background:#FF6;
text-decoration:none;
}
#navlinksmobile a.privatelink{
color:#300;
}
#belownavigation{
padding:0 16px 0 16px;
}
.AddedSideContent{
margin:10px 0 0 0;
}
#AddedFooterContent{
margin:2px 203px 5px 203px;
}
#TranslateBox{
float:right;
clear:right;
margin-top:0px;
padding:0 16px 0 16px;
width:188px;
border:0px solid red;
text-align:right;
}
#MiddleBottomContainer{
background:#FFF;
padding:10px;
overflow:auto;
}
#FootContainer{
display:table;
table-layout:fixed;
clear:both;
padding:0;
margin:0;
min-height:56px; /* This should be 58px but needs to be 56px to stop an additional gap sometimes appearing in IE8. */
height:58px;
width:100%;
min-width:400px;
}
#FootRow1{
display:table-row;
height:44px;
}
#FootRow1Left{
display:table-cell;
width:343px;
min-width:343px;
border-top:2px solid #FF9;
vertical-align:bottom;
text-align:left;
}
#FootRow1Left a{
display:block;
width:200px;
height:20px;
}
#FootRow1Right{
display:table-cell;
word-wrap:break-word;
text-align:center;
vertical-align:middle;
border-top:2px solid #FF9;
padding:3px 10px 3px 0;
}
#FootRow2{
display:table-row;
height:12px;
}
#FootRow2Left{
display:table-cell;
width:343px;
vertical-align:top;
text-align:left;
}
#FootRow2Left a{
display:block;
width:200px;
height:10px;
}
#FootRow2Right{
display:table-cell;
}
#MobileAboveFooter{
display:none;
}
#ExtraFooter{
display:none;
}
@media all and (max-width: 480px){
#navlinkscontainer{
display:none;
}
#navlinksmobile{
display:block;
}
#belownavigation{
display:none;
}
#AddedFooterContent{
margin:0 0 5px 0;
}
#TranslateBox{
width:100%;
text-align:center;
float:none;
margin-bottom:10px;
}
#MobileAboveFooter{
display:block;
text-align:center;
}
#mobilefooterloginform{
width:220px;
margin:2px auto 0 auto;
}
#MobileAboveFooter form.LoginForm label{
display:inline-block;
width:70px;
}
#MobileAboveFooter form.LoginForm .inputtext{
display:inline-block;
width:130px;
}
.GoogleSearch{
width:154px; /* Add up width of search field, image button, borders, margins, padding to get this value. By setting the container to the total width needed for its contents, the margin: 0 auto; method can be used below to center the GoogleSearch div. */
margin:13px auto;
}
.GoogleSearch .mobsfcont1{
float:left;
position:relative;
z-index:1;
}
.GoogleSearch .mobsfcont2{
float:left;
padding:1px 5px;
background-color:#FFF;
border:1px solid #999;
}
#sociallinks1{
text-align:center;
}
.teamexpertbox{
width:95%;
margin:0 auto 10px auto;
}
/* End #MobileAboveFooter styles */
#FootContainer{
display:block;
min-height:0;
height:auto;
width:100%;
min-width:0;
background:none !important;
}
#FootRow1{
display:block;
height:auto;
}
#FootRow1Left{
display:none;
}
#FootRow1Right{
display:block;
width:100%;
padding:3px 10px;
}
#FootRow2{
display:none;
}
#ExtraFooter{
display:block;
font-weight:bold;
}
}