body{
width:100%;
max-width:1600px;
margin:0 auto;
}
/* Layout */
#HeaderContainer{
margin:0 auto 0 auto;
padding:0px;
position:relative;
overflow:hidden;
width:100%;
z-index:0;
}
#HeaderTitle{
position:absolute;
left:0;right:0;top:0;bottom:0;
overflow:hidden;
margin-top:auto;
margin-bottom:auto;
padding:0 5px;
border:0px solid orange;/* #DEBUG */
}
.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:94%;
width:100%;
}
.HeaderTT .ttr{
display:table-row;
}
.HeaderTT .ttc{
display:table-cell;
vertical-align:middle;
}
div#HeaderLeft{
float:left;
overflow:hidden;
height:120px;
}
@media all and (min-width:640px){div#HeaderLeft{height:130px;}}
@media all and (min-width:820px){div#HeaderLeft{height:140px;}}
@media all and (min-width:1000px){div#HeaderLeft{height:150px;}}
@media all and (min-width:1180px){div#HeaderLeft{height:160px;}}
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;
border:0px solid #0FF;/* #DEBUG */
}
.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%; /* This is 100% of the left part of the header only. */
}
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% each of the left header (8% in total), which is 30% of the total header. The image is 92% of the left header. The left header is set to 70%, so 30/70 = 42.8571%. 4% of 42.8571% is 1.7143%.) */
border-radius:5px;
}
@media all and (min-width:640px){div#HeaderLeft.HeadImgType8 .HeadImgLeftHolder1{height:110px;}}
@media all and (min-width:820px){div#HeaderLeft.HeadImgType8 .HeadImgLeftHolder1{height:120px;}}
@media all and (min-width:1000px){div#HeaderLeft.HeadImgType8 .HeadImgLeftHolder1{height:130px;}}
@media all and (min-width:1180px){div#HeaderLeft.HeadImgType8 .HeadImgLeftHolder1{height:140px;}}
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;
}
.HeadImgType9 .HeadImgHolder2{
overflow:hidden;
}
.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;
}

div#HeaderRight{
float:right;
overflow:hidden;
height:120px;
text-align:right;
}
@media all and (min-width:640px){div#HeaderRight{height:130px;}}
@media all and (min-width:820px){div#HeaderRight{height:140px;}}
@media all and (min-width:1000px){div#HeaderRight{height:150px;}}
@media all and (min-width:1180px){div#HeaderRight{height:160px;}}
.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;
}
@media all and (min-width:640px){div#HeaderRight.HeadImgType8 .HeadImgRightHolder1{height:110px;}}
@media all and (min-width:820px){div#HeaderRight.HeadImgType8 .HeadImgRightHolder1{height:120px;}}
@media all and (min-width:1000px){div#HeaderRight.HeadImgType8 .HeadImgRightHolder1{height:130px;}}
@media all and (min-width:1180px){div#HeaderRight.HeadImgType8 .HeadImgRightHolder1{height:140px;}}
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;
}
h5#tagline{
padding:0;
color:#FFF;
}

@media all and (max-width:640px){
.HeaderMarginsPortPort{
margin-left:28.5714%;
margin-right:0;
}
.HeaderMarginsPortLand{
margin-left:28.5714%;
margin-right:0;
}
.HeaderMarginsLandPort{
/* margin-left:42.8571%; This value keeps consistency (30% of the left and middle columns is 42.86% of the width when you remove the right column) but is too wide for mobile. */
margin-left:35%;
margin-right:0;
}
.HeaderMarginsLandLand{
/* margin-left:42.8571%; This value keeps consistency (30% of the left and middle columns is 42.86% of the width when you remove the right column) but is too wide for mobile. */
margin-left:35%;
margin-right:0;
}
.HeaderTT .ttc{
padding-right:5px;
padding-top:5px;
}
div#HeaderLeft{
/*height:80px; #SMALLHEADER */
}
div#HeaderLeft.HeadImgType1,div#HeaderLeft.HeadImgType2,div#HeaderLeft.HeadImgType3,div#HeaderLeft.HeadImgType5,div#HeaderLeft.HeadImgType6,div#HeaderLeft.HeadImgType8,div#HeaderLeft.HeadImgType9{
width:100%;
}
div#HeaderLeft.HeadImgType4,div#HeaderLeft.HeadImgType7{
/* width:42.8571%; This value keeps consistency (30% of the left and middle columns is 42.86% of the width when you remove the right column) but is too wide for mobile. */
width:35%;
}
div#HeaderRight.HeadImgType1,div#HeaderRight.HeadImgType2,div#HeaderRight.HeadImgType3{
width:0;
}
div#HeaderRight.HeadImgType4,div#HeaderRight.HeadImgType5,div#HeaderRight.HeadImgType6,div#HeaderRight.HeadImgType7,div#HeaderRight.HeadImgType8,div#HeaderRight.HeadImgType9{
width:0;
}
div#HeaderRight{
display:none;
}

.HeadImgType2 .HeadImgLeftHolder1,
.HeadImgType3 .HeadImgLeftHolder1{
width:28.5714%; /* The image holder is 100% of the left header at this small size. 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%. */
}
.HeadImgType5 .HeadImgLeftHolder1,
.HeadImgType6 .HeadImgLeftHolder1{
width:35%; /* 35% of the total width of the header. */
}
.HeadImgType8 .HeadImgLeftHolder1{
width:32.2%; /* 32.2% of the total width of the header. The leftover 2.8% is used for margins on the image. */
}
.HeadImgType9 .HeadImgLeftHolder1{
width:35%; /* The image holder is 100% of the left header. The left header is 35% of the total header width. However, the left header is set to 100% of the width to allow for the background gradient to go right across underneath the header title (which is absolutely positioned on top).
Therefore, 35% of the total width is 35% (35/100=35) of the 100%. */
}
div#HeaderLeft.HeadImgType8 .HeadImgLeftHolder1{
margin-left:1.4%;
margin-right:1.4%; /* Make the right and left margin 1.4%. This is 4% each of the left header (8% in total), which is 35% of the total header. The left header is set to 100%, so 35/100 = 35%. 4% of 35% is 1.4%. */
}
}

/* Forms */
form.WebForm .formparent{
box-shadow:0 0 0;
background-color:transparent;
border-radius:0;
}
/* Navigation */
#navlinkscontainer{
display:block;
margin:0 0 10px 0;
padding:0;
width:188px;
}
#navlinkscontainer img{
display:block;
}
#navlinkscontainer img.darrow{
display:inline;
margin:0 0 0 2px;
}
#navigationmenuhead{
width:188px;
margin:2px 0 0 0;
padding:7px 3px 7px 3px;
color:#FFF;
text-align:left;
cursor:pointer;
border-radius:8px 8px 0 0;
}
#navlinkscontainer #navbackground{
padding:0 0 15px 0;
margin:0;
border-radius:0 0 8px 8px;
}
#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-weight:bold;
cursor:pointer;
text-decoration:none;
/*text-transform:capitalize;*/
color:#FFF;
display:block;
margin-top:12px;
}
#navlinkscontainer a.LinkHeading::first-letter{
text-transform:uppercase;
}
#navlinkscontainer a.LinkHeading:hover{
color:#FF0;
}
#navlinkscontainer ul.LinkItems{
font-size:0.8125em;
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:2px 0 0 12px;
}
#menutext{
margin:0 0 0 53px;
}
#navlinksmobile{
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 a.LinkHeading::first-letter{
text-transform:uppercase;
}
#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:0.9em;
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{
padding:10px;
overflow:auto;
}
#FootContainer{
margin:0;
padding:4px 25px 15px;
width:100%;
word-wrap:break-word;
text-align:center;
}
#MobileAboveFooter{
display:none;
}
#ExtraFooter{
display:none;
}
@media all and (max-width:640px){
#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:4px auto 3px 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 */
#ExtraFooter{
display:block;
font-weight:bold;
border-top:1px solid #666;
padding-top:8px;
}
}