/*************** MCGRATH FAMILY OF DEALERSHIPS ***************/
/********************* STYLE GUIDE STYLES ********************/
/******************* DESIGNER: BRAD MACKEY *******************/

body {
	background-color: #e8e8e8;
	padding-bottom: 0 !important;
	background-image: url('../img/pattern.jpg') !important;
	background-repeat: repeat;
	background-position: left top;
}
.mainContainer:before,
footer .container:before {
  content: " ";
  display: table;
}
.mainContainer:after,
footer .container:after {
	content: "";
	display: table;
	clear: both;
}

a { text-decoration: none; }

div.mainContainer {
	width: 980px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #e8e8e8;
	border-left: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.4);
	background-color: #ffffff;
}

/** TEMPLATE CONTAINERS BY DEALER SITE **/

#mfdContainer { 
	display: block;
	width: 100%;
	max-width: 980px;
	padding: 20px 20px 120px;
	margin: 0 auto;
}
#kiaContainer   { 
	display: block;
	width: 100%;
	max-width: 940px;
	margin: 0 auto 20px;
	background-color: #e8e8e8;
}
#ucsContainer   {
	display: block;
	width: 100%;
	max-width: 940px;
	margin: 0 auto 20px;
	background-color: #e8e8e8;
}
#cjdrContainer {
	display: block;
	width: 100%;
	max-width: 960px;
	margin: 0 auto 20px;
	background-color: #e8e8e8;
}
#vwContainer {
	display: block;
	width: 100%;
	max-width: 914px;
	margin: 0 auto 20px;
	background-color: #f1f5f6;
}
#cdkContainer   {
	display: block;
	width: 100%;
	max-width: 960px;
	margin: 0 auto 20px;
	background-color: #ffffff;
}

#mfdSidebar   { width: 100%; max-width: 299px; float: right; margin: 0 1px 20px 20px; }
#kiaSidebar   { width: 100%; max-width: 299px; float: right; margin: 0 1px 20px 20px; }
#ucsSidebar   { width: 100%; max-width: 299px; float: right; margin: 0 1px 20px 20px; }
#cjdrSidebar { width: 100%; max-width: 306px; float: right; margin: 0 1px 20px 20px; }
#vwSidebar     { width: 100%; max-width: 297px; float: right; margin: 0 2px 20px 9px; }
#cdkSidebar   { width: 100%; max-width: 300px; float: right; margin: 0 0 20px 20px; }

/* VW STYLES */

div.mainContainer.vw { 
	background-color: #f1f5f6; 
	border-left: 2px solid #f1f5f6;
	border-right: 2px solid #f1f5f6;
}
div.mainContainer.vw p { font-family: "VW Textweb Regular", Helvetica, Arial; }

div.mainContainer.vw h1,
div.mainContainer.vw h2,
div.mainContainer.vw h3,
div.mainContainer.vw h4,
div.mainContainer.vw h5,
div.mainContainer.vw a { font-family: "VW Headweb Bold", Helvetica,Arial, sans-serif; }


/* CODE BOXES */

pre {
	box-sizing: border-box;
	color: #ffffff;
	font-size: 12px;
	padding: 10px;
	background: #555555;
	width: 100%;
	max-width: 960px;
	height: auto;
	border: 2px solid #ffffff;
	border-radius: 8px;
	overflow: auto;
	margin: 0 0 30px;

	white-space: pre-wrap;       /* Since CSS 2.1 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
pre span { color: #959595; }
code { width: 100%; }

.section {
	font-size: 42px;
    text-transform: uppercase;
	font-family: 'DDC Heading Font Face', sans-serif;
	font-style: italic;
	font-weight: bold;
	color: #004b87;
	letter-spacing: -.5px;
	text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, 2px 4px 0 #cccccc;
	margin-top: 50px;
}

h2.levelTwo,
h3.levelThree {
	font-family: 'DDC Heading Font Face', sans-serif;
	font-style: italic;
	font-weight: bold;
	text-transform: initial;
}
h2.levelTwo {
	font-size: 32px !important;
	text-decoration: underline;
	margin-bottom: 20px;
}
h3.levelThree {
	font-size: 26px !important;

}

table tr td pre { margin-bottom: 0px; }

hr { margin-top: 50px; margin-bottom: 40px; }

/* HEADER & NAVIGATION */

header.primary {
	width: 980px;
	height: 120px;
	margin: 0;
	padding: 0;
	background-size: 100%;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url('../img/header.jpg');
	background-origin: border-box;
}
nav.primary {
	position: relative;
	top: 61px;
	border-top: 1px solid #0085e8;
	border-bottom: 4px solid #bababa;
	font-family: 'Roboto', Arial, sans-serif;
	text-transform: uppercase;
	font-size: 14px;
}
ul.primaryNav {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #004b87;

	background: linear-gradient(#0069b7, #004b87);
	background: -webkit-gradient(linear, left top, left bottom, from(#0069b7), to(#004b87));
	background: -moz-linear-gradient(top, #0069b7, #004b87);
	text-shadow: 0 1px 2px #000000;
}
ul.primaryNav li {
    float: left;
	border-left: 2px solid #0069b7;
	border-right: 2px solid #002d51;
}
ul.primaryNav li:first-child {
	border-left: 0 none;
}
ul.primaryNav li:last-child {
	border-right: 0 none;
}
ul.primaryNav li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
}
ul.primaryNav li a:hover,
.dropdown:hover .dropbtn,
ul.primaryNav li.dropdown a.dropbtn.selected {
	background-color: #64a70b;
	background: linear-gradient(#004b87, #0069b7);
	background: -webkit-gradient(linear, left top, left bottom, from(#004b87), to(#0069b7));
	background: -moz-linear-gradient(top, #004b87, #0069b7);
	text-shadow: 0 1px 2px #000000;
}
ul.primaryNav li.dropdown {
	display: inline-block;
}
ul.primaryNav div.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 9999;
	text-shadow: none;
}
ul.primaryNav .dropdown-content a {
	color: black;
	padding: 8px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	text-shadow: none;
}
ul.primaryNav .dropdown-content a:hover { color: #ffffff; background-color: #ebebeb; }
ul.primaryNav .dropdown:hover .dropdown-content { display: block; }


/* TIP BOX */

div.content-default div.tip {
	color: #555555;
	width: 100%;
	padding: 18px 20px 16px 150px;
	background: #fff799 url('https://mcgrathauto.org/guide/img/hot-tip.png') no-repeat 10px 10px;
	border-radius: 8px;
	margin: 0 0 30px;
	box-shadow: 0 2px 6px #959595;
	min-height: 90px;
}
div.content-default div.tip p {
	font-family: 'Roboto';
	font-weight: 400;
	margin-top: 0px;
	margin-bottom: 10px;
}
div.content-default div.tip img {
	width: 110px;
	height: auto;
	display: block;
	float: right;
	margin: 0 0 0 20px;
	border: 3px solid #d5c94c;
}
div.content-default div.tip img:hover {
	border: 3px solid #ffffff;
}
div.content-default p.tip {
	box-sizing: border-box;
	font-family: 'Roboto';
	font-weight: 400;
	color: #555555;
	width: 100%;
	padding: 10px 20px 12px 10px;
	background-color: #fff799;
	border-radius: 8px;
	margin: 0 0 20px;
	font-size: 16px;
	box-shadow: 0 2px 4px #959595;
}
div.content-default p.tip.compress {
	box-sizing: border-box;
	color: #555555;
	width: 25%;
	padding: 15px 20px 20px;
	background-color: #fff799;
	border-radius: 8px;
	margin: 0 0 10px;
	float: right;
}
div.content-default p.tip span {
	font-size: 21px;
	color: #cc3333;
	font-weight: bold;
	margin-right: 10px;
}

div.content-default div.iconTable {
	width: 100%;
	background-color: #555555;
	margin: 0 0 20px;
	padding: 20px 2.127659574468085%;
	border-collapse: collapse;
	border: 0;
}
div.content-default div.iconTable div {
	box-sizing: border-box;
	display: inline-block;
	padding: 0;
	margin-top: 0;
	margin-right: 2.222222222222222%;
	margin-bottom: 10px;
	margin-left: 0;
	border: 0;
	width: 18.22222222222222%;
	float: left;
	min-height: 380px;
}
div.content-default div.iconTable.reviews div { min-height: 300px; }
div.content-default div.iconTable div:nth-of-type(5n) { margin-right: 0; }
div.content-default div.iconTable div h2 {
	color: #ffffff;
	text-align:center;
	text-shadow: 0px 1px 2px #000000;
}
div.content-default div.iconTable.ddc-icons div,
div.content-default div.iconTable.vehicleOptions div {
	width: 15%;
	margin-right: 2%;
	min-height: 430px;
}
div.content-default div.iconTable.ddc-icons div { min-height: 360px; }
div.content-default div.iconTable.ddc-icons div:nth-of-type(6n),
div.content-default div.iconTable.vehicleOptions div:nth-of-type(6n) { margin-right: 0; }


/* FOOTER */

footer {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	text-shadow: 0 1px 2px #000000;
	background: transparent;
}
footer div.container {
	max-width: 984px;
	height: 100%;
	margin: 0 auto;
	padding: 4px 10px 5px;
	border-top: 2px solid #008af0;

	background: linear-gradient(#0069b7, #004b87);
	background: -webkit-gradient(linear, left top, left bottom, from(#0069b7), to(#004b87));
	background: -moz-linear-gradient(top, #0069b7, #004b87);
}
footer div.container  img.logo {
	float: left;
	height: 28px;
	width: auto;
	margin: 2px 20px 0 4px;
}

a.toTop {
	display: block;
	position: fixed;
	width: 80px;
	height: 80px;
	bottom: 20px;
	right: 20px;
	margin: 0;
	padding: 0;
	border-radius: 40px;
	border: 1px solid #003158;
	z-index: 999999;
	background-color: #64a70b;
	background-image: -ms-radial-gradient(center, ellipse farthest-corner, #2193CD 0%, #1C71B9 50%, #004B87 100%);
	background-image: -moz-radial-gradient(center, ellipse farthest-corner, #2193CD 0%, #1C71B9 50%, #004B87 100%);
	background-image: -o-radial-gradient(center, ellipse farthest-corner, #2193CD 0%, #1C71B9 50%, #004B87 100%);
	background-image: -webkit-gradient(radial, center center, 0, center center, 286, color-stop(0, #2193CD), color-stop(50, #1C71B9), color-stop(100, #004B87));
	background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #2193CD 0%, #1C71B9 50%, #004B87 100%);
	background-image: radial-gradient(ellipse farthest-corner at center, #2193CD 0%, #1C71B9 50%, #004B87 100%);
	-webkit-box-shadow: inset 0px 0px 0px 2px rgba(28, 113, 185, 1), 0 1px 3px #333333;
	box-shadow: inset 0px 0px 0px 2px rgba(28, 113, 185, 1), 0 1px 3px #000000;
	-webkit-transition: background-color 500ms ease .1s;
    -moz-transition: background-color 500ms ease .1s;
    -o-transition: background-color 500ms ease .1s;
    transition: background-color 500ms ease .1s;
}
a.toTop:hover {
	border: 1px solid #336600;
	background-image: -ms-radial-gradient(center, ellipse farthest-corner, #99cc66 0%, #64A70B 50%, #417C3B 100%);
	background-image: -moz-radial-gradient(center, ellipse farthest-corner, #99cc66 0%, #64A70B 50%, #417C3B 100%);
	background-image: -o-radial-gradient(center, ellipse farthest-corner, #99cc66 0%, #64A70B 50%, #417C3B 100%);
	background-image: -webkit-gradient(radial, center center, 0, center center, 286, color-stop(0, #99cc66), color-stop(50, #64A70B), color-stop(100, #417C3B));
	background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #99cc66 0%, #64A70B 50%, #417C3B 100%);
	background-image: radial-gradient(ellipse farthest-corner at center, #99cc66 0%, #64A70B 50%, #417C3B 100%);
	cursor: pointer;
	-webkit-box-shadow: inset 0px 0px 0px 1px rgba(153, 204, 102, 1), 0 1px 3px #333333;
	box-shadow: inset 0px 0px 0px 1px rgba(153, 204, 102, 1), 0 1px 3px #333333;
}
a.toTop img { display: block; margin: 0 auto; width: 100%; height: auto; }


/* COLOR GUIDE */

div.emphasisBox {
	width: 100%;
	max-width: 940px;
	padding: 2.127659574468085%;
	margin: 0 0 30px;
	background-color: #f0f0f0;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 6px #959595;
}
div.emphasisBox h2 {
	margin-top: 0;
	margin-bottom: 20px;
}
div.emphasisBox.colorGuide > div {
	width: 32.14285714285714%;
	margin: 0 1.674107142857143% 20px 0;
	min-height: 300px;
	float: left;
}
div.emphasisBox.colorGuide > div:nth-child(3n+3) { margin-right: 0; }
div.emphasisBox.colorGuide div div {
	width: 90%;
	height: 100px;
	margin: 0 0 10px 0;
	padding: 20px;
	border: 4px solid #ffffff;
	font-family: 'DDC Heading Font Face', sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 32px;
	letter-spacing: .5px;
	text-shadow: 0 1px 2px #000000;
}
div.emphasisBox.colorGuide div div:hover {
	border: 4px solid #bababa;
}

div.emphasisBox.colorGuide div.greenSwatch div { background-color: #64a70b; }
div.emphasisBox.colorGuide div.blueSwatch div { background-color: #004b87; }
div.emphasisBox.colorGuide div.graySwatch div { background-color: #888b8d; }
div.emphasisBox.colorGuide div.ucsRedSwatch div { background-color: #e4002b; }
div.emphasisBox.colorGuide div.ucsGraySwatch div { background-color: #63666a; }
div.emphasisBox.colorGuide div.darkGreenSwatch div { background-color: #276d00; }
div.emphasisBox.colorGuide div.lightGreenSwatch div { background-color: #91ce0f; }
div.emphasisBox.colorGuide div.darkBlueSwatch div {	background-color: #003067; }
div.emphasisBox.colorGuide div.lightBlueSwatch div { background-color: #0071c3; }
div.emphasisBox.colorGuide div.redSwatch div { background-color: #ed2024; }
div.emphasisBox.colorGuide div.darkRedSwatch div { background-color: #be2026; }
div.emphasisBox.colorGuide div.lightRedSwatch div { background-color: #fa6b6f; }
div.emphasisBox.colorGuide div div span {
	color: #ffffff;
	opacity: 0.6;
}
div.emphasisBox.colorGuide div p.title {
	font-weight: bold;
	font-size: 24px;
}
div.emphasisBox.colorGuide div p {
	margin: 0;
	padding: 0;
	font-size: 16px;
}
div.emphasisBox.fonts div {
	margin: 0 0 20px;
	padding: 0;
}
div.emphasisBox.fonts div > div {
	display: inline-block;
	margin: 0;
	padding: 0;
}
div.emphasisBox.fonts div div.icon {
	box-sizing: border-box;
	width: 70px;
	height: 70px;
	background-color: #004b87;
	border: 2px solid #002d51;
}
div.emphasisBox.fonts h3.levelThree { font-size: 24px; }

/* DOWNLOAD BOX */

div.download {
	background-color: #fff799;
	padding: 10px;
	display: block;
	width: 540px;
	border: 2px solid #ffef5c;
	margin-bottom: 20px;
}
div.download a {
	display: inline-block;
	background-color: #be2026;
	width: 50px;
	height: 50px;
	padding: 4px;
	margin-right: 20px;
	float:left;
}
div.download a:hover {
	background-color: #8e0406;
}
div.content-default div.download p {
	font-size: 16px;
	margin-bottom: 0;
}
.emphasisBox:before,	
div.download:before {
  content: " ";
  display: table;
}
.emphasisBox:after,
div.download:after {
	content: "";
	display: table;
	clear: both;
}