/*h1 {
  font-family: Helvetica;
  font-weight: 100;
}
body {
  color:#333;
  text-align:center;
  font-family: arial;
}
.mainNavigation { margin:0; z-index:9999; position:relative; background:#28367D; clear:both}
.toggleMenu {display:none;padding:15px;text-decoration:none}
.toggleMenu .mobileMenu { font-size:1.250em; color:#fff;}
.toggleMenu .iconBar {background:#FFFFFF;display: block;height:3px;margin:2px auto; float:right; width:25px; clear:both}
#nav, #nav ul { list-style:none; margin:1px 0 0; padding:0;z-index:122}
#nav li { float:left; margin:0px 7px; padding:0; position:relative; z-index:122; display:inline }
#nav li:first-child{margin-left:0;}
#nav li:last-child{margin-right:0;}
#nav li a{ }
#nav ul {z-index:124; width:200px;top:100%; padding:0; left:0; position:absolute; z-index:9999;}
#nav ul li { float:left; height:auto; width:100%;z-index:123;margin:0; padding:0;}
#nav ul li a {background: none repeat scroll 0 0 #28367d;
    color: #b98b01;
    display: block;
    font-family: RockwellRegular,Tahoma,Geneva,sans-serif;
    font-size: 13.3px;
    height: 33px;
    line-height: 33px;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
    width: 230px;}
#nav ul ul { z-index:110; top:0; left:200px }
#nav a:hover, .noJS #nav a:focus, #nav ul .hover > a, #nav ul .focus > a { color:#fff }
#nav ul a:hover, .noJS #nav ul a:focus, #nav ul a.selected { color:#000 }
#nav ul, #nav :hover ul ul, #nav .hover ul ul, #nav .focus ul ul { margin-left:-9999px }
#nav li:hover > ul, #nav li.hover > ul, #nav li.focus > ul, #nav a:focus + ul, #nav ul ul, .noJS #nav .hover a:focus, .noJS #nav .focus a:focus { margin-left:0 }
#nav > li > a:hover, #nav > li.hover > a, #nav > li.focus > a { color:#fff}
#nav li ul li a:hover, #nav li ul li > a.selected, #nav ul a:hover, .noJS #nav ul a:focus, #nav ul a.selected { color:#fff}
#nav ul li.focus > a{ color:#fff; display:block;}
#nav .menuIcon {display:block; position:absolute; right:5px; top:20px; width:9px; height:9px; z-index:1}
#nav li .menuIcon { background:url(../images/down-arrow.gif) no-repeat right center;}
#nav li li .menuIcon { background:url(../images/right-arrow.gif) no-repeat right center; top:13px; right:5px;}
#nav > li.sprite-btn-event-quote > a {
	background: url(../images/navigation.png) no-repeat 0 -189px;
	width: 228px;
	height: 33px;
	display: block;
}
#nav li.sprite-btn-event-quote a:hover
{
	background-position: 0 -126px;
}
#nav li.sprite-btn-get-a-quote a
{
	background: url(../images/navigation.png) no-repeat 0 -315px;
	width: 145px;
	height: 33px;
	display: block;
}
#nav li.sprite-btn-get-a-quote a:hover
{
	background-position: 0 -252px;
}

#nav li.sprite-btn-submit-claim a
{
	background: url(../images/navigation.png) no-repeat 0 -567px;
	width: 164px;
	height: 33px;
	display: block;
}
#nav li.sprite-btn-submit-claim a:hover
{
	background-position: 0 -504px;
}
#nav li.sprite-btn-information-center a
{
	background: url(../images/navigation.png) no-repeat 0 -441px;
	width: 217px;
	height: 33px;
	display: block;
}
#nav li.sprite-btn-information-center a:hover
{
	background-position: 0 -378px;
	width: 217px;
	height: 33px;
}
#nav li.sprite-about-clarion a
{
	background: url(../images/navigation.png) no-repeat 0 -63px;
	width: 165px;
	height: 33px;
	display: block;
}

.noJS #nav ul a:focus { width:200px;}
.noJS #nav ul a:focus, .noJS #nav ul a:focus + ul { margin-left:9999px }
.noJS #nav ul a:active { margin-left:0}
*/
/* ******** Navigation ******** */
.mainNavigation { margin:0; z-index:99999; position:relative; background:none; clear:both} /*background:#162566 change HM to center 13 may 2015*/
.toggleMenu {display:none;padding:15px;text-decoration:none}
.toggleMenu .mobileMenu { font-size:1.250em; color:#fff;font-family: RockwellRegular,Tahoma,Geneva,sans-serif;}
.toggleMenu .iconBar {background:#FFFFFF;display: block;height:3px;margin:2px auto; float:right; width:25px; clear:both}
#nav, #nav ul { list-style:none; margin:0; padding:0;z-index:122}
 /* #nav li { float:left; margin:0 48px; padding:0; position:relative; z-index:122; display:inline } margin:0 7px; change as per HM need to center on 13 may 2015 */
#nav li {
    display: inline-block;
    float: none;
    margin: 0 15px;
    padding: 0;
    position: relative;
    z-index: 122;}


#nav li:first-child{margin-left:0px;}
#nav li:last-child{margin-right:0px;}
#nav li a{ padding:0; line-height:34px; color:#fff; font-size:1.167em;display:block; text-decoration:none; text-align:left;}
#nav > li > a{overflow:hidden; text-indent:-500px;}
#nav ul {z-index:124; width:228px;top:100%; padding:0; left:0; position:absolute; z-index:9999;}
#nav ul li { float:left; height:auto; width:100%;z-index:123;margin:0; padding:0;}
#nav ul li a {background: none repeat scroll 0 0 #28367d;
    color: #b98b01;
    display: block;
    font-family: RockwellRegular,Tahoma,Geneva,sans-serif;
    font-size: 13.3px;
    height: 33px;
    line-height: 33px;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
	text-align:center;
   }
#nav ul ul { z-index:110; top:0; left:200px }
#nav a:hover, .noJS #nav a:focus, #nav ul .hover > a, #nav ul .focus > a { color:#fff }
#nav ul a:hover, .noJS #nav ul a:focus, #nav ul a.selected { color:#000 }
#nav ul, #nav :hover ul ul, #nav .hover ul ul, #nav .focus ul ul { margin-left:-9999px }
#nav li:hover > ul, #nav li.hover > ul, #nav li.focus > ul, #nav a:focus + ul, #nav ul ul, .noJS #nav .hover a:focus, .noJS #nav .focus a:focus { margin-left:0 }
/*#nav > li > a:hover, #nav > li.hover > a, #nav > li.focus > a {background-color:#B8E8FF; color:#072a4b}*/
#nav li ul li a:hover, #nav li ul li > a.selected, #nav ul a:hover, .noJS #nav ul a:focus, #nav ul a.selected {  color:#fff}
#nav ul li.focus > a{color:#fff; display:block;}
#nav .menuIcon {display:block; position:absolute; right:5px; top:20px; width:9px; height:9px; z-index:1}
#nav li .menuIcon { background:url(../images/down-arrow.gif) no-repeat right center;}
#nav li li .menuIcon { background:url(../images/right-arrow.gif) no-repeat right center; top:13px; right:5px;}
.noJS #nav ul a:focus { width:200px;}
.noJS #nav ul a:focus, .noJS #nav ul a:focus + ul { margin-left:9999px }
.noJS #nav ul a:active { margin-left:0}



#nav li.sprite-btn-event-quote{background: url(../images/navigation.png) no-repeat 0 -189px;width: 228px;}
#nav li.sprite-btn-get-a-quote{background: url(../images/navigation.png) no-repeat 0 -315px;width: 145px;}
#nav li.sprite-btn-submit-claim{background: url(../images/navigation.png) no-repeat 0 -566px;width: 164px;}
#nav li.sprite-btn-information-center{background: url(../images/navigation.png) no-repeat 0 -441px;	width: 217px;}
#nav li.sprite-about-clarion{background: url(../images/navigation.png) no-repeat 0 -63px;width: 165px;}
#nav li.sprite-login{background: url(../images/navigation.png) no-repeat 0 -1230px;width: 147px;}
#nav li.sprite-my-account{background: url(../images/navigation.png) no-repeat 0 -1328px;width: 147px;}
#nav li.sprite-make-payment{background: url(../images/navigation.png) no-repeat 0 -1432px;width: 182px;}
#nav li.sprite-customer-feedback{background: url(../images/navigation.png) no-repeat 0 -1544px;width: 226px;}