.grayGrad{

background-color: #898584;
background-image: -moz-linear-gradient(top, #898584, #454342);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#898584), to(#454342));
background-image: -webkit-linear-gradient(top, #898584, #454342);
background-image: -o-linear-gradient(top, #898584, #454342);
background-image: linear-gradient(to bottom, #898584, #454342);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#898584', endColorstr='#40454342');
}


.blackGrad {
    width: 100%;
    height: 60px;
    margin-top: 0;
    background-color: #565251;/* 898584;232120 #454342*/
    background-image: -moz-linear-gradient(top, #565251, #232120);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#565251), to(#232120));
    background-image: -webkit-linear-gradient(top, #565251, #232120);
    background-image: -o-linear-gradient(top, #565251, #232120);
    background-image: linear-gradient(to bottom, #565251, #232120);
    background-repeat: repeat-x;
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);*/
}

.blackGrad .hidden-desktop {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 40px;
  width: 200px;
  text-align: right;
}

#MAINLOGOMob {
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: auto;
}



.SMbox1 h3{margin-top: 0px;}

.SMbox1 .btn-primary {
  margin-top: 10px;
}


.SMlink1{

  color:#ffffff;
  text-decoration: none;
}

.SMlink1:hover{

  color:#000000;
  text-decoration: none;
}


h3.SMh3{font-size:11pt;color:#111111;background-image:url(/resources/img/smh3bg.png);background-repeat: no-repeat; }

h3.SMh3mob{padding-bottom:0px;font-size:11pt;color:#111111;background-image:url(/resources/img/SMplus.png);background-repeat: no-repeat;background-position: right; }


.SMtable{
  width:100%;
  table-layout: fixed; /* Prevent cells from growing to fit content */
}
.SMtable td{width:50%;vertical-align: top;padding-right: 15px;}


.SMlink2{
  display: block;
  font-size: 10pt;
  color: #777777;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.SMlink2:hover{color:#000000;text-decoration: none;}

.SMlink2Mob{font-size: 10pt;color:#777777;text-decoration: none;background-image:url(/resources/img/SMplus.png);background-repeat: no-repeat;background-position: right;}
.SMlink2Mob:hover{color:#000000;text-decoration: none;background-image:url(/resources/img/SMplus.png);background-repeat: no-repeat;background-position: right;}




.SMlinkSep{margin-top:4px;margin-bottom:10px;width:100%;height:1px;background-color: #dddddd;}

.SMsubmenu{position:absolute;width:170px;height:100%;top:0px;left:-0.5px}

.SMnavBut{ display:block;
color:#ffffff;
text-decoration: none;
  font-size:10pt;
  font-weight: 600;
  padding:0px;
}
.SMnavBut:hover {
  font-size: 10pt;
  font-weight: 600;
  text-decoration: none;
  padding: 0;
  background: #f2f2f2;
  color: #333;
  transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
}

.SMnavButSel{display:block;
color:#df1f1f;
text-decoration: none;
  font-size:10pt;
  font-weight: 600;
padding:0px;
}
.SMnavButSel:hover{
color:#777777;
text-decoration: none;
  font-size:10pt;
  font-weight: 600;
padding:0px;
}

#MenuSM {
  position: relative;
  width: 960px;
  padding: 0!important;
  color: #666;
  margin-left: auto;
  margin-right: auto;
}

.lt-ie8 #MenuSM {
  position: relative;
  z-index: 1; /* Otherwise coloured boxes overlay dropdown menu */
}

.dropdown-menu > li > a {
  padding: 20px;
}

.SMsection {
  height:665px;
}

/* These SMNewsLink styles are hack to get mobile nav news links styled right. Menu JS needs fixing. */
#MainMenuMob a.SMNewsLink {
  padding: 20px 15px 20px 30px;
  border-bottom: 1px solid #dedede;
  background-color: #fff;
}
#MainMenuMob a.SMNewsLink:last-child {
  border-bottom: 0;
}

#MenuSM .SMsectionLi ul{margin-top:10px;}

#MenuSM .SMsectionLi {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  box-sizing: border-box;
}

#MainMenuMob  .SMsectionLi a{
  color:#555555;
  text-decoration: none;
}

#MenuSM .SMsectionLi a{
   background:none;
   text-decoration: none;
   color:#ffffff;
}

#MenuSM .SMsectionLi > a {
  display: inline-block;
  padding: 10px 20px;
}

#MenuSM .SMsectionLi + .SMsectionLi + .SMsectionLi > a {
  padding-right: 0;
}

#MenuSM .SMsectionLi ul{
  left: -608px; /* When changing this, also change #MenuSM .SMsectionLi.dropdown */
  margin-top: 0;
  text-decoration: none;
  color: #555;
}

#MenuSM .SMsectionLi.dropdown:first-child {
  margin-left: 608px; /* When changing this, also change #MenuSM .SMsectionLi ul */
  padding-left: 0!important; /* Safari needs "important". */
}

#MainMenuMob #MenuSM .SMsectionLi ul {
  background: none;
  text-decoration: none;
  color: #555;
}

.lt-ie8 #MainMenuMob {
    width: 100%
}

#MenuSM .SMsectionLi a:hover {
  color: #cdcdcd;
}

ul#MenuSM {margin:0px;
  position: relative;
   list-style-type: none;   text-align: left;
}

.SMMobBut {
  width: auto;
  color: #222222;
  border-bottom: 1px #ffffff solid;
  background-color: #ccc; /* Level 1 background colour */
}





.arrow{
background-image:url('/resources/img/SMarrow.png');
background-position:right;
background-repeat:no-repeat;
cursor:pointer;
}


#MenuSM .SMsectionLi {
  float: left;
  margin: 0;
  list-style-type: none;
  text-align: left;
  display: inline-block;
  font-size: 15px;
}

#MainMenu {

  left:0px;
  width:auto;
  margin-top:0px;
padding-left: 0px;
  height:40px;
}


.SMsubboto {
  width: auto;
  background-color: #ddd; /* Level 2 background colour */
}

.SMsubboto a:not([href='#']) {
  background: #DDD url(/resources/img/SMarrow.png) no-repeat right center;
}
.SMsubboto2,
.SMsubboto3 {
  width:auto;
  color:#555555;
  border-bottom: 1px #dedede solid;
  background-color:#ffffff;
  background-image: url(/resources/img/SMarrow.png);
  background-repeat: no-repeat;
  background-position: right;
}
#MainMenuMob > div > .SMMobBut.minus + .SMsubboto.plus[data-id="2"] { /* Don't show dropdown arrow for first element (we redirect elsewhere, no mega menu), show arrow instead */
  width:auto;
  color:#555555;
  background: #DDDDDD url(/resources/img/SMarrow.png) no-repeat right center;
}

.SMsubboto2{   background-image: url(/resources/img/SMplus.png);

}
.SMsubboto3{
  color:#555555;
}

.SMsubboto2 h3 {
  background: none;
  margin: 0;
  padding: 20px;
  color: #111111;
}


.SMsubboto a,
.SMsubboto2 a {
  text-decoration: none;
  color: #555555;
  display: block;
}

.SMsubboto2 a:hover, .SMsubboto a:hover{text-decoration: none;
color:#333333;
}

.menu-level-3 {
  background-color: #eee; /* Level 3 background colour */
}

.SMsubboto3 a {
  text-decoration: none;
  color: #666666;
  display: block;
  padding: 20px 20px 20px 40px;
}

.SMsubboto2 a{
padding-left: 15px

}

.SMsubboto3 a:hover{text-decoration: none;
color:#333333;
}

#MainMenuMob {
    position: relative;
    z-index: 11;
}

#MainMenuMob .SMsectionLi a {
  display: block;
  padding: 20px;
}

#SolutionsList {
left: -150px;
position: absolute;
}

ul#SolutionsList li a{font-size: 10pt;}
ul#SolutionsList li:hover {
  background-color: #f2f2f2;
  color: #555555;
  background-image: url(/resources/img/SMarrowDown.png);
  background-repeat: no-repeat;
  background-position: right;
}
ul#SolutionsList li:first-child:hover { /* Don't show dropdown arrow for first element (we redirect elsewhere, no mega menu) */
  background-image: none;
}

ul#SolutionsList li:hover a:hover{
  color:#555555;

}



.innerNavButs {
  margin-top:1px;
  width:960px;
  text-align: center;
  height:48px;
  overflow:hidden;
  background-image: url(../img/butBarBgOff.jpg);
}
.innerNavButs ul {
  margin: 0;
}
.innerNavButs li {
  float: left;
  width: 20%;
  line-height: normal;
  list-style-type: none;
}
.innerNavButs a {
  display:inline-block;
  width: 100%;
  padding: 10px 0 20px;
  font-weight:600;
  font-size: 10pt;
  color:#666666;
  background: url(../img/butBarBgOff.jpg) repeat-x top top;
  border-right: 1px #fff solid;
  text-decoration: none;
}
.innerNavButs li:last-child a {
  border-right: 0;
}
.innerNavButs a:hover,
.innerNavButs a.active {
  font-weight:600;
  color:333333;
  text-decoration: none;
  background: url(../img/butBarBgon.jpg) no-repeat top center;
}

/* Tabs */
.tab-content {
  padding: 20px;
  border: 1px solid #dedede;
  border-top-width: 0;
}
.nav-tabs-rismark /* extends Bootstrap tabs */ {
  margin-bottom: 0;
}
.nav-tabs-rismark > li > a {
  font-size: 13px;
  font-weight: 600;
  color: #666;
}
.nav-tabs-rismark > .active > a,
.nav-tabs-rismark > .active > a:hover,
.nav-tabs-rismark > .active > a:focus {
  color: #DF1F1F;
  outline: none;
}


.plus{
background-image:url('/resources/img/SMplus.png');
background-position:right;
background-repeat:no-repeat;
cursor:pointer;
}
.minus{
background-image:url('/resources/img/SMminus.png');
background-position:right;
background-repeat:no-repeat;
cursor:pointer;
color:#DD1D1F;
}





/*color boxes mobile*/
a.CSMa{
display:block;
padding: 15px;
padding-left:20px;
color:#555555;
font-size:14px;
text-decoration: none;
background-color: #ffffff;
border-bottom:1px #dddddd solid;
}

a.CSMa:hover{
color:#111111;
text-decoration: none;
background-color: #efefef;
}


/*login*/


 #LGloginHolder{
position:absolute;
background-color:#dedede;
width:246px;
height:auto;
z-index:3010;
top:40px;
}

#LGloginHit{
position:absolute;
width:100%;
height:600px;
z-index:3009;
top:40px;
}


#LGfakebut{
position:absolute;
width:110px;
height:40px;
top:-40px;
background-color:#dedede;

}



#LGloginHolder a{display:block;
font-size: 9pt;
margin-right: 38px;
margin-left: 38px;

padding-top:10px;
padding-bottom:10px;

color:#555555;
text-decoration: none;
border-bottom: 1px #bbbbbb solid;
}

#LGfakebut a{
color: #DD1D1F;
border-bottom:none;
margin-left: 37px;
font-size: 14px;
}


#LGloginHolder a:hover{
text-decoration: none;
color: #DD1D1F;

}

#LGloginHolder p{
font-size: 9pt;
margin-right: 38px;
margin-left: 38px;
text-align:right;
padding-top:18px;
padding-bottom:0px;

color: #DD1D1F;
text-decoration: none;
}




#BSIbutton{
width:210px;
position:absolute;
top:50px;
left:0px;
}



#BSIbutton a{padding:0px;
font-size: 10pt;
color:#ffffff;
text-decoration: none; display: inline-block;
}

#BSIbutton a i{padding-top:4px;
}


#BSIholder{
width:960px;
position:absolute;
z-index:2002;

}

#BSIholder a{
display:block;
font-size: 10pt;
padding-right: 20px;
padding-left: 20px;

padding-top:18px;
padding-bottom:18px;

color:#ffffff;
text-decoration: none;
border-bottom: 1px #bbbbbb solid;
background:none;

}

#BSIholder a:hover{
  background-color: #f2f2f2;
  color:#666666;
}

.height100 {
  height: 100px
}


.stage2 {
  display:None
}

.largeMenu {
  background-color: rgb(242, 242, 242);
  position: absolute;
  top: 81px;
  z-index: 2000;
  padding: 20px 20px 20px 188px;
  width: 979px;
  left: 179px;
  height: 433px;
}
/* Workaround LHS dark area flashing in IE7 due to HTML rewrite in SM1.js */
.lt-ie8 .largeMenu {
  padding-left: 20px;
  border-left: 168px solid #7a7676;
}
.lt-ie8 .SMsubmenu {
  left: -168px;
}

.subMenuBox {
  background-color: rgb(255, 255, 255);
  padding: 30px;
  height: auto;
  width: 260px;
  position: absolute;
  top: 30px;
  right: 30px;
}
.lt-ie8 .subMenuBox {
  width: 200px;
}

.subMenuButton {
  padding: 10px;
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-size: 16px;
}

.subMenuTagSelected {
  margin:0px;
  background-color:#f2f2f2;
  width:auto;
  border-bottom:1px #aaaaaa solid;
}

.subMenuTag {
  width:100%;
  margin:0px;
  border-bottom:1px #aaaaaa solid;
}

.showSubMenu,
.showSubMenu:hover,
.showSubMenu:active {
  padding: 20px;
}

#SUPERSUB {
  display: none;
}

.lt-ie8 .dropdown-menu .divider {
  display: none!important; /* This solves the problems of excessive space, and all links after the first not being clickable outside the text */
}
.lt-ie8 #MenuSM .SMsectionLi a {
  border-bottom: 1px solid #ccc; /* Replaces divider divs */
}


/* Options to show many Product entries in mega menu */
/* Option 1: make area y-scrollable */
.mega-menu-option-1 .largeMenuWrap .SMsubSection {
  height: 100%;
  overflow-y: scroll;
}
/* Option 2: 3 columns */
.mega-menu-option-2 {

}
/* Option 3: No promo box */
.mega-menu-option-3 .largeMenuWrap .SMsubSection {
  width: 776px!important;
}
.mega-menu-option-3 .largeMenuWrap .subMenuBox {
  display: none;
}
.mega-menu-option-3 .subMenuButton {
  bottom: auto;
}
/* Option 4: make area x-scrollable */
.mega-menu-option-4 .largeMenu {
  height: auto;
  min-height: 410px;

}