/********** GLOBAL MEDIA QUERIES  **************/
@media screen and (max-width : 700px) {
	/* triggers in MOBILE less than 700px */
	.dp {
		display:none !important;
	}
	.tb {
		display:none !important;
	}
	.tbdp{
		display:none !important;
	}
	.mbWidth {
		width:320px;
	}
	#mainWrapper{
		top:-35px;
		position:absolute;
	}
	#mainContentWrapper{
		position:static;
	}
	#slideContent{
		left:-210px;
		top:140px;
	}
	#mainContent{
		margin-left:auto;
		margin-right:auto;
	}
	.sisterSites li {
		padding: 0 5px;
	}
	.logoSize {	}
	#siteName{
		padding: 0px 0px 8px 0px;
	}
	#content{
		font-size: 16px;
		/*line-height:120%;*/
	}
	.addDiv img{/* for top banner to stretch with screen size */
		width:100%;
	}
	#mbTopNav{
		margin-left:auto;
		font-weight:normal;
	}
	#mbTopNav2{
		width:auto;
	}
}

@media screen and (min-width: 701px) and (max-width:1247px) {
	/* triggers in TABLET */
	.dp {
		display:none !important;
	}
	.mb {
		display:none !important;
	}
	.logoSize {
		width:197px;
	}
	#mainContent{
		margin-left:170px;
		max-width:700px;
	}
	.sisterSites li {
		padding: 0 1em;
	}
	#siteName{
		padding: 6px 0px 8px 0px;
	}
	#mainContentWrapper{
		position:relative;
	}
	#slideContent{
		left:0px;
		top:0;
	}
	#mbTopNav{
		margin-left:auto;
		font-weight:bold;
	}
	#mbTopNav2{
		width:auto;
	}
	.widePage {
		min-width:804px;
	}
}
@media screen and (min-width:1248px), print { /* IE 6,7,9,10 hack to use desktop */
	/* triggers in DESKTOP */
	.mb {
		display:none !important;
	}
	.tb {
		display:none !important;
	}
	.mbtb {
		display:none !important;
	}
	body {
		font-size:14px;
	}
	.logoSize {
		width:225px;
	}
	#mainWrapper{
		max-width:1230px;
	}
	#mainContentWrapper{
		position:relative;
	}
	#slideContent{
		left:0;
		top:0;
	}
	#mainContent{
		display:inline-block;
		border:1px solid #ddd;
		width:100%;
		margin-left:170px;
		max-width:700px;
	}
	#mbTopNav{
		margin-left:68px;
		font-weight:bold;
	}
	#mbTopNav2{
		width:80%;
	}
	.widePage {
		min-width:804px;
	}
}
@media print {
	body {background-attachment: scroll !important;}
	#mainWrapper{
		width:1300px;
	}
}
@media \0screen { /* IE8 way of reading styles from desktop media query */

}

#mainWrapper{
	min-width:350px;
	box-sizing: border-box;
	margin-left:auto;
	margin-right:auto;
}
#mainContentWrapper{
	background-color:white;
	min-height:1640px;
}
#mainContent{
	padding:20px;
}
#content{
	margin: 0;
	padding:0;
	vertical-align: top;
	font-size:16px;
	line-height:18px;
}

/************ HTML tag styles ****************/
html {padding: 0; margin: 0;}
body{
	font-family: 'Roboto',Arial,Helvetica,sans-serif;
	color: #262626;
	margin: 0;
	background-color: #6f8bc9;
	background-image: url('/images/wrap1/bg_grad_PC.png');
	background-position: left top;
	background-repeat: repeat-x;
	background-attachment: fixed;
}
body table td,
body table th {color: #000000;}

label {padding-left: 3px;}

textarea {border:1px solid #aaa;}

input {border:1px solid #d3d3d3;color:#262626;padding: 3px;}

select {line-height:normal;border:1px solid #d3d3d3;color:#262626}

ul {list-style-type: square;}
ul ul {list-style-type: disc;}
ul ul ul {list-style-type: none;}

form {margin: 0; padding: 0;}

figcaption {color:#888; font-style:italic; font-size:90%; padding-top:5px;}

hr{border:none;background-color:#dadada;height:1px;}

p {line-height:22px;}

/******* hyperlink and anchor tag styles *******/
a img {border: none;}
a:link, a:visited {color: #3396D2; text-decoration: none;} /* was 022ACD */
a:hover {text-decoration: underline;}
a.imgLink {text-decoration: none;}
a.imgLink:hover {text-decoration: none;}

/************** global header tag styles **************/
h1{font-weight:bold; font-size:150%; margin:0px; padding:0px; line-height:24px;}
h2{font-weight:bold; font-size:125%; margin:0px; padding:0px; line-height:22px;}
h3{margin: 0px; padding: 0px; font-size: 100%; font-weight: bold;}
h4{font-size: 90%; margin: 0px; padding: 0px;}
h5{color: #666; margin: 0px; padding: 0px; text-align: center; font-size: 100%; font-weight: bold;}


/******* WRAPPER ********/
#navOffLayer{
	position:absolute; top:0; bottom:0; right:0; left:0; z-index:1; background-color:#00000050; animation: fade 1s; display:none;
}
@keyframes fade {
	from {background-color:#00000000;} to {background-color:#00000050;}
}
#topLinks{
	position:absolute; font-size:110%; font-weight:bold; top:50px; right:10px; min-width:250px; text-align:right; vertical-align:top;
}
#topLinks a{
	margin-right:15px; color:white;
}
#topLinksTBDP {
	margin-top:10px; text-align:right; white-space:nowrap; margin-right:10px;
}
#topLinksTBDP a{
	margin-left:15px; color:white;
}

#topRowTBDP {
	position:relative; display:flex; justify-content:space-between;
}

.hamburger{
	position:absolute; top:15px; left:15px;
}
.searchMag{
	position:absolute; top:15px; right:15px;
}
#searchBar{
	margin-left:10px; margin-right:10px; height:35px;
}
#slideContent {
	z-index:200; position:absolute;
}

#mbLogo{
	text-align:center; flex-basis:85%; flex-grow:1;
}

#mbTopRow{
	position:relative; display:flex; justify-content:flex-end; margin-top:-15px;
}

#mbTopNav{
	padding-left: 10px; margin-right:auto; display:flex; justify-content:space-between; font-size:110%; margin-bottom:10px; white-space:nowrap;
}
#mbTopNav a{
	color:white; padding-right:13px; line-height:27px;
}
#mbTopNav .active{
	color:yellow;
}

.activeSection {
	color: yellow !important;
}

#compareTopRow{
	padding: 5px 5px 10px 10px; color:black; font-size:90%; line-height:20px; background-color:#aee1f9;
}
#compareTopRow a{
	display:inline-block; text-decoration:underline;
}
#compareTopRow div{
	display:inline-block; padding-right:10px;
}
#compBoxBtn {
	border:1px solid black; padding:2px; font-size:120%; text-align:center; font-weight:bold; border-radius:5px; background-color:#acd0e0; text-decoration:none !important; color:black;
}

#topContent{
	display:flex; width:100%; flex-wrap:wrap; justify-content:space-between;
}

#pageRNav {
	float:right; width:318px; box-sizing:border-box; margin-top:10px; text-align:center;
}

#leftNav{
	float:left; background:#373737; width:170px; overflow-x:hidden; overflow-y:hidden; user-select:none;
}
.leftNavMenuHeader{
	font-style:italic; color:white; text-align:center; font-weight:bold; margin-bottom:5px;
}

.leftNavMenuItems{
	position: relative; padding-left:10px;
}
.leftNavMenuItems li{
	display:block;
}
.leftNavMenuItems a{
	display: block; position: relative; height: 35px; padding-left: 10px; border-bottom: 1px solid #575757; background: #4c4c4c; font-size: 13px;
	line-height: 34px; color: #eaeaea;
}
#flagLNav {
	width:35px; height:18px; margin-left:5px; margin-bottom:-3px;
}

#mfgMsgTop {
	font-size:80%; color:red; margin-left:10px;
}

/******* other global styles *********/
.logoSize{
	vertical-align:middle;
}

optgroup.discontinued {
	color: #900;
}
optgroup.discontinued option {
	color: #800;
}

a.moreLink {
	display: block;
	text-align: right;
	font-size: 125%;
	/*clear: both;*/
	margin: 0 0 10px auto;
	background-image: url('/images/redarrow.gif');
	background-position: left center;
	background-repeat: no-repeat;
	padding: 0px;
	padding-left: 10px;
	padding-right:50px;
	height: 11px;
	line-height:11px;
	width: 50px;
}

/* compare checks */
a.addToComp {
	display:block;
	width: 13px;
	height: 13px;
	background-image: url('/images/CheckboxSprite.png');
}
a.addToComp {
	background-position:0px 0px;
}
a.addToComp:hover {
	background-position:0px -13px;
	text-decoration:none;
}
a.addToComp.checked {
	background-position:0px -13px;
}
a.addToComp.checked:hover {
	background-position:0px 0px;
	text-decoration:none;
}

/*  Page navigation on top of manufacuter pages */
table.mfgTabs {
	width: 100%;
	font-weight: bold;
	font-size: 10pt;
	margin: 4px 0 -4px 0;
	border: 1px solid #ccc;
	border-width: 1px 1px 0 1px;
	height:40px;
}
table.mfgTabs td {
	text-align: center;
	background-color: #eee;
}



/********* GLOSSARY ********/
.gloss {
	/*background: yellow;*/
	color: #000;
	text-decoration: none;
	cursor: help;
	border-bottom: 1px dotted #000;

}

#glossTip {
	background: #3496D1;
	color:white;
	box-shadow: 0 2px 14px 0 rgba(0,0,0,0.1);
	padding: 15px 20px;
	font-size: 11px;
	position: absolute;
	top:-20px;
	width: 300px;
	z-index: 250;
	font-size:90%;
}
#glossTip a {color:yellow;}
/*#glossTip * {font-size: 90%;}*/
/*#glossTip p {margin: 10px 0 0 0;}*/
/*#glossTip p:first-child {margin: 0;}*/


/******** FOOTER *********/
.footerIcon {
	display: block;
	overflow:hidden;
	font-weight:bold;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	padding-left: 20px;
	height: 16px;
	line-height: 16px;
}
#footerLinks{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	text-align:left;
}
#footerLinks div{
	font-size:125%;
	margin:0 10px 10px 0;
}
#footerLinks ul{
	margin:0;
	padding:5px 0 0 0;
	list-style-type:none;
	font-size:80%;
}
#footerLinks li{
	display:block;
	list-style-type:none;
	line-height:15px;
}

#footPageLinks {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-around;
	margin-bottom:20px;
}
#sharePage {
	background-image:url('/images/wrap1/share_page_icon.gif');
}
#bigSendPage {
	background-image:url('/images/wrap1/send_page_icon.png');
}
#printPage {
	background-image:url('/images/wrap1/print_page_icon.png');
}
#reportError {
	background-image:url('/images/wrap1/report_error_icon.png');
}


/***********  Add styles  **************/
.addDiv{
	text-align:center;
	margin-bottom:15px;
	font-weight:bold;
	font-size:12px;
	display:inline-block;
}
.bStyle {width:300px;margin-left:auto;margin-right:auto;text-indent:0;}


/************** pageName styles ****************/
#pageName{
	padding: 0px 10px 4px 0px;
	margin: 0 0 15px 0;
	border-bottom:1px solid #dadada;
}
#pageName h1{
	color: #262626;
	margin:0px;
	font-size: 170%;
	font-weight: bold;
	padding: 10px 0 12px 0;
	line-height:30px;
}
#pageName h2{
	color: #666;
	margin:0px;
	font-size: 125%;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#pageName p {
	color: #000;
	margin:0px;
	padding: 0px;
	font-size: small;
	line-height: normal;
}
#pageName img{
	position: absolute;
	top: 50px;
	right: 30px;
	padding: 2px;
	margin: 0px;
}
#pageName .pg_feedback {
	font-size:11px;
	float:right;
	margin: 3px 0  0 10px;
}


/************* breadCrumb styles ***************/
#breadCrumb {
	padding-bottom: 5px;
	font-size: 75%;
	color: #999;
	text-align: right;
}
#breadCrumb a{
	color: #999;
}
#breadCrumb a:hover{
	color: #3396D2; /* 022ACD */
	text-decoration: underline;
}

/************** Top Page Social Icons *******************/
#headerIcons {
	font-size: 80%;
	color:red;
	font-weight:bold;
	margin-bottom:5px;
}

/************** Part Compare Box *******************/
.compareList {
	margin-bottom: 7px;
}
.compareList th {
	margin:0;
	padding:0;
	background: #fff;
	font-weight: bold;
	text-align: center;
	color: #666666;
	height: 18px;
	font-size: 11px;
	border-bottom: 1px solid #CCC;
	white-space:nowrap;
}
.compareList td {
	margin:0;
	padding:0;
	font-size: 10px;
	white-space:nowrap;
	padding-left: 2px;
	background: #ffffcb;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
}
.compareList table td {
	border: none;
	text-align: left;
}
option.disabledOpt {
	color: #808080;
}

/************** siteInfo styles ****************/
#siteInfo{
	border-top: 1px solid #BCC5C7;
	/*border-bottom: 1px solid #BCC5C7;*/
	font-size: small;
	color: #555;
	font-size: 11px;
	background: #fff;
	padding: 10px 10px 10px 10px;
	margin-top: 20px;
	text-align: center;
	clear: both;
}
#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}


/************ Other common layout styles **************/
.fail {
	color:red;
	font-weight:bold;
}


/* yellow gradient table */
table.styled {
	border-collapse: collapse;
}
table.styled td, table.styled th {
	border: 1px solid #bbb;
}
table.styled th {
	background-image: url('/images/cell_grad_1x40.gif');
	background-repeat: repeat-x;
}

div.coloredBox {
	border: 1px solid #bbb;
	background-color: #ffd;
	padding: 5px;
}

/* styled variant A: header is boxed, and table only has row borders */
table.styled.plain td {
	border-width: 0 0 1px 0;
}
table.styled.plain th {
	border-width: 1px 0 1px 0;
}
table.styled.plain th.first {
	border-width: 1px 0 1px 1px;
}
table.styled.plain th.last {
	border-width: 1px 1px 1px 0;
}


/************* Articles ************/
#article_text {
	padding: 0px;
}
#article_text h2 {
	margin:0 0 -10px 0;
	padding:20px 0 0 0;
	text-align:center;
	color:#333;
}
#article_text p {
	line-height:22px;
	font-size:16px;
}
#article_text img {
	max-width:500px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
#article_body a {
	font-weight:bold;
}
#article_body li {
	line-height:22px;
	font-size:16px;
	padding-right:30px;
	text-align:justify;
}

.center_cells_bold td {
	text-align:center;
	font-weight:bold;
}
.center_cells td {
	text-align:center;
}

.art_head_comm {text-align: center;margin:20px 0 10px 0;}
.art_head_comm h1 {
	margin: 0;
	padding: 0;
	font-size: 135%;
	font-weight: bold;
	margin-bottom:10px;
}
.art_head_comm .site_link{font-weight:bold;}
.art_head_comm .translator{font-size:80%;margin:5px 0;}

#art_CPTagLine {
	text-align:center;
	font-size:120%;
	font-weight:bold;
	font-style:italic;
}
.art_country_disp {color:#888;font-size:8pt;width:120px;text-align:center;}

#articleTOC{
	margin:5px;
	padding:5px;
	border:1px solid #ccc;
	background-color:#eee;
	font-size:85%;
	text-align:center;
	line-height:15px;
}
#articleTOC li{
	display:block;
	font-size:90%;
	margin-bottom:5px;
}
#articleTOC ul{
	padding:0;
	margin:0;
	padding-top:3px;
}

/************ ROAD TEST ****************/
ul.checkmark li {
    background:url("/images/checkmark.gif") no-repeat 0 0;
    padding-left: 20px;
}

ul.checkmark {
    list-style-type: none;
}

/*********** TOP 10 Reports ******************/
.top10RptHeader{
	width:100%;
	font-size:8pt;
	padding:2px;
	color:black;
	background-image:url(/images/cell_grad_1x40.gif);
	font-weight:bold;
	border-width:1px 1px 0px 1px;
	border-color:#bbb;
	border-style:solid;
	min-height:20px;
	clear:both;
}
.top10CmpArrow{
	margin: 0 5px -4px 8px;
}

/*********** DEALER LOGOS ******************/
.noDealerLogo{
	border:1px solid black;
	width:122px;
	height:32px;
	line-height:32px;
	background-color:#eee;
	font-size:11px;
	font-weight:bold;
}

/*********** STARS ******************/
.starRatings{
	white-space:nowrap;
}
.starRatings img{
	margin-right:3px;
	margin-bottom:-1px;
}

/*********** MOBILE MENU ******************/
.hamburger {
	display:inline-block;
	vertical-align:middle;
	transition-duration: 0.3s;
	transition-property: transform;
}

.opened{
	transform: rotate(90deg);
}

/*********** DYN BAN *************/
.dynBNContainer {
	display:block; font-size:14px; width:300px; height:250px; border:1px solid #bbb; padding:3px; text-indent:0;
	position:relative; box-sizing:border-box; align-items:center; display:flex; line-height:normal;
}
.dynBNContainer h2 {
	margin:0 !important; padding:0 !important; color:black !important; font-size:150% !important; font-weight:bold !important; text-align:center !important; width:100% !important; position:absolute !important; top:10px !important;
}
.dynBNSubTitle {
	font-size:80%; font-weight:normal;
}
.dynBNMid {
	display:flex; align-items:center; justify-content:space-evenly; width:100%;
}
.dynBNlogo {
 	width:100px;
}
.dynBNpj {
	width:180px;
}
.dynBNBot {
	clear:both; position:absolute; bottom:10px; left:10px; width:93%; color:black;
}
.dynBNPrice {
	font-size:120%; font-weight:bold; float:left; margin-top:6px;
}
.dynBNBtn {
	border:1px solid black; background-color:#4070e0; padding:5px; text-align:center; color:white;
	font-weight:bold; box-shadow:2px 2px 2px black; float:right;
}


#topBanFrame {width: 1px; min-width: 100%; *width: 100%; border:none; overflow:hidden;}
#embedBanFrame {width: 1px; min-width: 100%; *width: 100%; border:none; overflow:hidden;}
.embedBanCont468 {position: relative; padding-bottom: 12.82%; height: 0; overflow: hidden; max-width: 100%;}
.embedBanCont468 iframe, .embedBanCont object, .embedBanCont embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#calcFrame {width: 1px; min-width: 100%; *width: 100%; height:850px; border:none; overflow:hidden;}


#tagLine{
	font-size:94%;
	color:white;
	display:inline-block;
	font-weight:bold;
	vertical-align:middle;
	white-space:nowrap;
	line-height:18px;
}
#celebrateTag{
	font-weight:normal;
	font-style:italic;
	background-color:#3496D1;
	padding:2px;
	line-height:18px;
	height:18px;
	width:129px;
	font-size:90%;
	position:relative;
	margin-left:5px;
	margin-top:3px;
}
#celebrateTag:before{
	content:'';
	border-radius: 50%;
	position: absolute;
	left: -8px;
	top: 0px;
	background-color: #3496d1;
	width: 20px;
	height: 22px;
	z-index:-1;
}
#celebrateTag:after{
	content:'';
	position:absolute;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	background-color:#001850;
	height:16px;
	width:16px;
	right:-8px;
	top:3px;
}

/*********** INLINE SURVEY *************/
#survForm {
	text-align:center; margin-bottom:25px; border:1px solid #bbb; padding:8px; position:relative; border-radius: 6px; box-shadow: 2px 2px 2px;
}
#survForm ul {
	padding:0 0 0 5px; list-style-type:none; font-size:90%; margin:0 0 10px 0;
}
#survForm li {
	display:block; list-style-type:none; text-align:left; padding-left:25px; padding-bottom:10px;
}
#survForm a {
	font-weight:bold; position:absolute; right:5px; bottom:5px;
}
#survForm input[type="submit"]{
	margin-bottom:10px; font-size:120%; font-weight:bold;
}
#survForm input[type="radio"]{
	position:absolute; left:15px; margin:0;
}
#survHeading {
	text-align:center; border-bottom:1px solid #bbb; font-weight:bold; margin-bottom:10px;padding-bottom:5px;
}


/********************* end **********************/
