/*................................................................................

Project: CAA-5381 | Top Navigation & Footer Redesign
Date: 10/2/2015
CAA SCO - E-biz

................................................................................*/

/*..............................................................................*/
/*  Basic Reset  */
/*..............................................................................*/
* { padding: 0; margin: 0; border: 0; }

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.6em;
    font-size: 60%;
}

header input{
	color: #333;
	border-radius: 3px;
	font-size: 16px !important;
	background: url('/~/media/js/nav/img/search-icon-input.png') 10px center no-repeat #fff;
	background-size: auto 18px;
}

#top { 
  height: 102px;
}

/*..............................................................................*/
/*  Header - Desktop Version  */
/*..............................................................................*/

#desktop-header {
	width: 100%;
	height: 152px;
	background: url('/~/media/js/nav/img/top-nav-desktop-bg.gif') bottom left no-repeat #fff;
	background-size: 100% 50px;
}

#desktop-header .wrapper {
	height: 152px;
}

#desktop-header .atom-logo {
	padding-bottom: 18px;
}

#desktop-header ul{ list-style: none; }
#desktop-header ul li{ display: table-cell; }
#desktop-header ul li a{ text-decoration: none; }



/*..............................................................................*/
/*  Top Items  */
#desktop-header .top-items{
	float: right;
	color: #ccc;
	font-size: 14px;
	font-weight: 400;
	vertical-align: middle;
	margin-top: 16px;
}

#desktop-header .top-items ul{ float: none; }

#desktop-header .top-items .break {
	border-left: 1px solid #ccc;
	height: 24px;
	text-indent: 20px;
}

#desktop-header .top-items .line-left {
  border-left: 1px solid #ccc;
  height: 24px;
  padding-right: 20px;
}

#desktop-header #first-section a {
  color: #666666;
	margin-right: 20px;
	line-height: 24px;
}

#desktop-header #first-section li:last-child a {
  margin-right: 0;
}

/*..............................................................................*/
/*  Top Items  */
#desktop-header .top-items #second-section {
    float: right !important; /* may not need */
    position: relative;
    top: 13px;
}

/* Safari 7.1+ (9.0 is the latest version of Safari at this time) */
/*_::-webkit-full-page-media, _:future, :root #desktop-header .top-items #second-section {

  margin-top: 0;

}

_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root #desktop-header .top-items #second-section { margin-top: 0; }*/



/*..............................................................................*/
/*  Top Items - Second Section  */
#desktop-header .top-items #second-section .break{ border: 0 !important; } /* may not need */

/*#desktop-header.top-items #first-section li:last-child a,
#desktop-header .top-items #second-section li:last-child a{ margin-right: 5px !important; }*/  /* may not need */

#desktop-header #first-section a:hover{ 
	text-decoration: underline; 
	color: #2962C6; 
}


/*buttons*/

#desktop-header .atom-btn-tiny { padding: 7px 10px; }

#desktop-header #btn-join {
  position: inherit; 
  margin-right:12px;
  text-align:center;
  height: 34px;
}

#desktop-header #btn-join:before { position: inherit; }

#desktop-header #btn-get-roadside { 
  width: 193px;
  height: 34px;
} /*fix responsive word-wrap issue*/


/*..............................................................................*/
/*  Main Nav  */
#desktop-header .main-nav{
	height: 50px;
	width: 100%;
	max-width: 960px;
	display: inline-table;
	border-left: 1px solid #2962c6;
	border-right: 1px solid #2962c6;
}

#desktop-header .main-nav li{
	vertical-align: middle; 
	height: 50px;
	border-left: 1px solid #2962c6;
	min-width: 45px;
    max-width: 130px;
}

#desktop-header .main-nav li:first-child{ border-left: 0; }
#desktop-header .main-nav li:hover{ 
  background-color: #2962c6; 
  color:#fff !important; 
}
#desktop-header .main-nav li.actual{ background-color: #2962c6 !important; }
#desktop-header .main-nav li.targeted{ background-color: #2962c6 !important; }
#desktop-header .main-nav li.actual i{ background-color: #2962c6 !important; color:#fff !important; }
#desktop-header .main-nav li.targeted i{ background-color: #2962c6 !important; color:#fff !important; }


#desktop-header .main-nav li a{
	color: #fff;
	display: block;
	text-align: center;
	width: auto;
	height: 50px;
	font-size: 16px;
	line-height: 48px;
}

#desktop-header i {
  color:#2962c6;
  font-size: 12px;
  margin-left:7px;
}

#desktop-header .subnav-col i { font-size: 10px; }

#desktop-header .icon-search-left {
  color:#fff;
  font-size: 16px;
  margin-left:0;
}

/*..............................................................................*/
/*  Search  */
#desktop-header #dsktp-main-lnk-search{ width: 45px !important; } /* may not need*/

#desktop-header #dsktp-main-cnt-search{ 
	display: none;
	text-align: center; 
}

#desktop-header #dsktp-main-cnt-search input{
	padding: 11px 15px 11px 38px !important;
	margin: 30px auto;
	width: 450px;
}

/*..............................................................................*/
/*  Sub Nav  */
#desktop-header .subnav{
	display: none;
	width: 100%;
	background: url('/~/media/js/nav/img/top-nav-subnav-desktop-bg.gif') top left no-repeat #2962c6;
	background-color: #2962c6;
	background-size: 100% 50px;
	position: relative;
	z-index: 10;
}

#desktop-header .subnav .wrapper{
	height: auto !important;
	color: #fff;
	overflow: hidden;
}

#desktop-header .no-subnav-title{ background-image: none !important; } /* for transition for white title */

#desktop-header .subnav-wrap{
	width: 200%;
	display: inline-block;
	overflow: hidden;
	display: none;
}

#desktop-header .subnav-wrap .icon-arrow-right{ color: #ffffff; }

#desktop-header .subs{ 
	float: left; 
	width: 50%;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#desktop-header .thirdlevel{ display: none; }

#desktop-header .dsktp-main-cnt-1-sub-1,
#desktop-header .dsktp-main-cnt-1-sub-2{ display: none; }

#desktop-header .hide{
	margin-left: -50%;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;

}

#desktop-header .subnav-title, .back-title{
	display: inline-block;
	width: 100%;
	height: 50px;
	margin-bottom: 30px;
	margin-left: 1px;
}

#desktop-header .subnav .wrapper .subnav-title h2{ 
	float: left;
	margin-top: 10px;
	padding-right: 20px;
	color: #00338d;
	font-weight: 300;
	font-size: 24px;
	height: 31px;
	border-right: 1px solid #ccc;
}

#desktop-header .subnav .wrapper .back-title span{
	float: left;
	cursor: pointer;
	width: 18px;
	height: 18px;
	margin-top: 17px;
	background: url('/~/media/js/nav/img/top-nav-desktop-back-arrow.png') top left no-repeat transparent;
	background-size: 100%;
	text-indent: -2000px;
	overflow: hidden;
	margin-right: 20px;
}

#desktop-header .subnav .wrapper .back-title h2{ 
	float: left;
	margin-top: 10px;
	padding-left: 20px;
	color: #00338d;
	font-weight: 300;
	font-size: 24px;
	height: 31px;
	border-left: 1px solid #ccc;
}

#desktop-header .subnav .wrapper .subnav-title h2 a,
#desktop-header .subnav .wrapper .back-title h2 a{ 
	color: #00338d; 
	text-decoration: underline;
}

#desktop-header .subnav .wrapper .subnav-title h2 a:hover,
#desktop-header .subnav .wrapper .back-title h2 a:hover{ text-decoration: none; }

#desktop-header .subnav .wrapper .subnav-title p,
#desktop-header .subnav .wrapper .back-title p{ 
	display: inline-block;
	color: #666;
	padding-top: 14px;
	padding-left: 20px;
}

#desktop-header .subnav .subnav-col{
	display: inline-block;
	width: 32.7%;
	vertical-align: top;
	margin-bottom: 20px;
	margin-left: 1px;
	line-height: 20px;
}

#desktop-header .subnav .subnav-col:first-child{ margin-left: 1px; }

#desktop-header .subnav .subnav-col .subnav-col-title{ 
	font-size: 16px; 
	font-weight: 700; 
    color:#8cb0f0;
}

#desktop-header .subnav .subnav-col ul{
	width: 100%;
	display: block;
	color: #fff;
}

#desktop-header .subnav .subnav-col ul li{
	display: inherit !important; /* for the slide transition */
	clear: both;
    height: auto;
    padding-bottom: 15px;
}

#desktop-header .subnav .subnav-col ul li a{ color: #fff; }
#desktop-header .subnav .subnav-col ul li a:hover{ text-decoration: underline !important; } /*may not need */



 
/*..............................................................................*/
/*  Mobile Header  */
/*..............................................................................*/
/*..............................................................................
THIS CODE APPEARED IN UAT BUT WAS NOT PRESENT IN PROD.
REMOVING TO FIX ISSUE BROUGHT UP IN WCAG-418
#mobile-header{ 
	display: none; 
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
*/
#mobile-header .wrapper {
  background-color: #00338d;
	/*height: 56px;*/
  padding: 15px;
	/*width: 100%;*/
}

#mobile-header .wrapper a {
  text-decoration: none;
}

#mobile-header .closed{
	left: -80% !important;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

/*..............................................................................*/
/*  Mobile Header - Search  */
#mobile-header #mobile-search{
	display: none;
	width: 100%;
	height: 80px;
	background-color: #2962c6;
	text-align: center; 
}

#mobile-header #mobile-search input{
	padding: 10px 10px 10px 38px !important;
	width: 90%;
	margin: 20px auto;
}

/*  Show Mobile Search Transition  */
.show-mobile-search{ display: block !important; }

/*..............................................................................*/
/*  Mobile Menu  */
/*..............................................................................*/
#mobile-menu {
	display: none;
    width: 293px;
    max-width: 380px;
    float: left;
    background-color: #fff;
    position: fixed;
    z-index: 200;
	top: 55px;
    left: -294px;
    overflow-x: hidden; 
    z-index: 10;
    transition: all 0.2s ease-in-out;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

#mobile-menu ul {
    width: 100%;
    height: 100%;
    list-style: none;
}

#mobile-menu ul li {
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    color: #4d4d4d;
}

#mobile-menu li a {
  text-decoration: none;
  padding: 14px 15px;
  display: block;
  color: #00338d;
}

#mobile-menu #mobile-menu-wrap{
	width: 882px;
	margin-left: 0;
	transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
	overflow-x: hidden !important;
}

#mobile-menu #mobile-menu-wrap div{ 
	float: left; 
	width: 294px;
	overflow-x: hidden !important;
}


/*  Open Mobile Menu Transition */
.moveMobileNav {
    left: 0 !important;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
	overflow-x: hidden !important;
}


/*  Mobile Menu Level Transitions */
#mobile-menu .mobile-menu-go-level-2{ 
	margin-left: -294px !important;
	transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

#mobile-menu .mobile-menu-go-level-3{ 
	margin-left: -588px !important;
	transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

/*  Mobile Menu First Level */
#mobileFirstLevel li.atom-bg-red {
  border:0;
  background-color: #ee2e24;
}

#mobileFirstLevel li.atom-bg-red a {
  color:#fff;
  line-height: 30px;
}

#mobileFirstLevel li.atom-bg-blue-light-2 {
  border-color:#fff;
}

#mobileFirstLevel li.atom-bg-blue-light-2 i {
    font-size: 25px;
    vertical-align: middle;
    margin-right: 3%;
}
#mobile-menu .icon-arrow-right {
  float:right;
  font-size:13px !important;
  line-height: 150%;
  margin-right: 0 !important;
}

#mobileFirstLevel .icon-roadside {
  font-size: 32px;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -3px;
  display: inline-block;
}

/*  Mobile Menu Title */

#mobile-menu #mobile-menu-wrap .title {
  padding: 8px 4%;
  display: table;
  width: auto;
  min-height: 34px;
  color: #00338d;
  float: none;
  overflow-y: hidden;
  position: relative;
  /* line-height: 150%; */
  border-bottom: 1px solid #ccc;
}

#mobile-menu #mobile-menu-wrap .title span {
  font-size: 1.45rem;
  font-weight: 100;
  width: 210px;
  display: table;
  word-break: break-word;
  margin: 3px 0 3px 15px;
}


#mobile-menu #mobile-menu-wrap .title a {
  font-size: 1.45rem;
  font-weight: 100;
  width: 210px;
  display: table-cell;
  word-break: break-word;
  margin: 8px 0 5px 15px;
  text-decoration: none;
  color: #00338d;
  vertical-align: middle;
  border-right: 1px solid #ccc;
}

#mobile-menu #mobile-menu-wrap .title span a { border-right: none; text-decoration: underline; }
#mobile-menu #mobile-menu-wrap .title span a:hover { text-decoration: none; }

#mobile-menu .title i {
    margin-right: 15px;
    font-size: 16px;
}

#mobile-menu .title .line-vertical {
}

/*  Mobile Menu Second Level */
#mobileSecondLevel ul li { 
  background-color: #fff;
}
#mobileSecondLevel li a {
  color:#00338d;
  
}
/*  Mobile Menu Third Level - Accordion */
#mobile-menu .org-accordion { 
    width: 100% !important; 
    /*margin-bottom: 15px;*/ 
}
 
#mobile-menu .org-accordion div{ width: 100% !important; }
#mobile-menu .org-accordion > div { border-bottom: 1px solid #fff; }
 
#mobile-menu .org-accordion-header {
    width: 100% !important;
    background-color: #2962c6;
    color: #fff;
    margin-bottom: 1px;
}
 
#mobile-menu .org-accordion-header a{
    text-decoration: none;
    font-size: 16px;
    display: block;
    cursor: pointer;
    color: #fff !important;
    width: 80%;
    float: left;
}
 
#mobile-menu .org-accordion-header i{
    float: right;
    margin-top: 14px;
    margin-right: 14px;
}
 
#mobile-menu .org-accordion-content {
    display: none;
    color: #666;
    line-height: 20px;
}

#mobile-menu .org-accordion-content li:last-child {
  border-bottom: none;
}




/*..............................................................................*/
/*  Content  */
/*..............................................................................*/
#content{
	width: 100%;
	background-color: #fff;
	transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

/*..............................................................................*/
/*  Dark Mask (for mobile menu)  */
#content #blur-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    z-index: 3;
    display: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

/*  Dark Mask Transition  */
#content .show-mask {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}





/*..............................................................................*/
/*  Footer  */
/*..............................................................................*/
footer {
	width: 100%;
	border-top: 1px solid #ccc;
}

footer .wrapper {
	max-width: 960px;
	margin: 20px auto 30px;
    font-size: 11px;
    color: #666;
}

footer .legal-wrapper {
  margin-top:30px;
}

footer .legal-link{
	margin-bottom: 10px;
}
 
footer .wrapper h4{ 
	color: #666;
}
 
footer .wrapper a{
    color: #666;
    text-decoration: none;
}

#footer-tandc > div > div.legal-content > a { text-decoration: underline; }
 
footer .wrapper p{
    margin-bottom: 10px;
    color: #666;
}
 
footer .wrapper a:hover{ 
	text-decoration: underline; 
}
 
footer .wrapper ul{ 
	list-style: none; 
}
 
footer .wrapper nav {
    display: inline-table;
    width: 100%;
    margin-bottom: 20px;
    line-height: 20px;
	margin-top: 20px;
}
 
footer .wrapper .footer-col{
    width: 33.3%;
    display: table-cell;
    vertical-align: top;
}
 
footer .wrapper nav .social-networks{ 
    display: inline-block;
    width: 320px;
}
 
footer .wrapper nav .social-networks h4{ 
	margin-bottom: 9px; 
}
 
footer .wrapper nav .social-networks li{ 
	float: left; 
}
 
footer .wrapper nav .social-networks li a{ 
    font-size: 32px; 
    margin-left: 15px; 
    color: #ccc;
}
 
footer .wrapper nav .social-networks li:first-child a{ margin-left: 0; }
footer .wrapper nav .social-networks li a:hover{ text-decoration: none; }
 
footer .icon-facebook-circle:hover{ color: #383e86; }
footer .icon-twitter-circle:hover{ color: #5fccff; }
footer .icon-gplus-circle:hover{ color: #dc4e41; }
footer .icon-youtube-circle:hover{ color: #ff3939; }
footer .icon-linkedin-circle:hover{ color: #2f78ef; }
footer .icon-blog-circle:hover{ color: #00338d; }
footer .icon-magazine-circle:hover{ color: #00338d; }
 
footer .wrapper nav .social-networks li a i{
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
 
footer .wrapper nav .social-networks li a i:hover{ 
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}
 
footer .wrapper nav .cert-links{ width: 320px; display: inline-block; margin-top: 15px; }
footer .wrapper nav .cert-links li{ float: left; width: 33.3%; }
 
footer .wrapper nav .cert-links li .icon-accessibility{ width: 87px; margin-top: 5px; }
footer .wrapper nav .cert-links li .icon-verisign{ width: 78px; }
footer .wrapper nav .cert-links li .icon-tico{ width: 106px; margin-top: 5px; }
 
footer #mobile-sn{ 
    display: none;
    width: 100%;
    margin-bottom: 20px;
}







/*..............................................................................*/
/*  Media Queries  */
/*..............................................................................*/
@media only screen and (max-width : 960px) {
	header .atom-logo{ margin-left: 15px; }
	header .main-nav{ border: 0; }
	.subnav .wrapper{ margin: 0 15px !important; }
	#first-section, #second-section{ margin-right: 10px !important; }
  /*#first-section .username, #first-section .line-left { display: none; }*/
  footer .wrapper{ margin-left: 15px; margin-right: 15px; }
}

@media only screen and (max-width : 895px) {
	.subnav .subnav-col{ width: 48%; }
}

@media only screen and (max-width : 850px) {
	li#header_0_tlTopLinks_liMyAcctBreak,
	li#header_0_tlTopLinks_liMyAcct { display: none !important; }
}

@media only screen and (max-width : 825px) {
	#desktop-header .main-nav li a i { display: none; }
  	#desktop-header .main-nav li a i.icon-search-left { display: inline !important; }
}

/*..............................................................................*/
/*  Media Queries - Mobile Version */
@media only screen and (max-width : 705px) {
	#desktop-header{ display: none; }
	#mobile-header{ display: block; }
	#mobile-menu { display: block; }
	#content{ padding-top: 56px !important; }
  	#content .show-mask { 
    	display: block !important; 
    	opacity: 0.7 !important;
  	}

  	#mobile-header .caa-logo {
    	/*
    	height: 40px;
    	position: absolute;
    	top: 8px;
    	left: 45.5%;
    	*/
    	height: 40px;
	    position: absolute;
	    top: 8px;
	    left: 0;
	    right: 0;
	    margin: 0 auto;
	}

  	#mobile-header .icon-search-left {
    	float: right;
    	font-size: 22px;
    	line-height: 25px;
  	}

  	#mobile-header i {
    	color: #fff;
    	font-size: 25px;
  	}

	footer .wrapper{ 
		margin-top: 30px; 
	}

	footer .wrapper h4{ 
		margin-bottom: 5px; 
	}

	footer .wrapper nav li {
    	line-height: 14px !important;
    	padding-bottom: 7px;
	}
 
	footer .wrapper .links{
  		width: 50% !important;
    	display: block;
    	float: left;
 	}
 
 
    footer .wrapper .icons{ 
        width: 100% !important;
        margin-top: 15px;
        display: block;
        float: left;
    }
 
    footer .wrapper .icons .social-networks{ display: none !important; }
 
    footer .wrapper .cert-links{ margin-top: 20px; }
    footer .wrapper #mobile-sn .social-networks, .cert-links{ width: 100% !important; display: inline-table !important; max-width: 290px !important; }
    footer .wrapper #mobile-sn .social-networks li{ float: none !important; display: table-cell; }
 
    footer .wrapper nav .cert-links img{ width: 90% !important;}
    footer .wrapper nav .cert-links li .icon-accessibility{ margin-top: 7px; }
    footer .wrapper nav .cert-links li .icon-tico{ margin-top: 10px; width: 100% !important; }
    
    footer .wrapper #mobile-sn{ display: inline-block !important; margin-bottom: 30px; }
    footer .wrapper nav .social-networks li a{ margin-left: 11px; }

}


@media only screen and (max-width : 568px) {
  #mobile-header .wrapper { min-width: 290px;  }
  #mobile-header .caa-logo { /*left: 41%;*/ }
  #mobile-menu #mobile-menu-wrap .title span a { 
    text-decoration:none; 
  }

}

@media only screen and (max-width : 320px) {
  #mobile-header .caa-logo { margin-left: 130px; }
}