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

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

/* CODE BOXES */

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

}
pre span { color: #959595; }

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

h2.levelTwo,
h3.levelThree {
	font-family: 'DDC Heading Font Face', sans-serif;
	font-style: italic;
	font-weight: bold;
}
h2.levelTwo {
	font-size: 24px;
	text-decoration: underline;
	margin-bottom: 20px;
}
h3.levelThree {
	font-size: 21px;
	color: #000000;
}

hr { margin-top: 30px; margin-bottom: 20px; }

/* 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 .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; }

/* CONTAINER WIDTH DETAILS BOX */

div.containerDefinition {
	padding: 0 12px 8px;
	margin-bottom: 10px;
}
div.containerDefinition h1 {
	font-size: 18px;
	color: #707070;
	margin: 0 0 5px;
	text-align: center;
}
div.containerDefinition p {
	margin: 0;
	font-size: 14px;
	color: #707070;
	line-height: 1.3;
}

/* TIP BOX */

div.content-default div.tip {
	color: #555555;
	width: 100%;
	padding: 90px 16px 12px;
	background: #fff799 url('https://mcgrathauto.org/guide/img/hot-tip.png') no-repeat center 10px;
	border-radius: 8px;
	margin: 0 0 30px;
	box-shadow: 0 2px 6px #959595;
	min-height: 90px;
}
div.content-default div.tip p {
	margin-top: 0px;
	margin-bottom: 4px;
	font-size: 14px;
}
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 div.tip p span {
	color: #cc3333;
	font-weight: bold;
}
div.content-default p.tip {
	box-sizing: border-box;
	color: #555555;
	width: 100%;
	padding: 8px 20px 12px 10px;
	background-color: #fff799;
	border-radius: 8px;
	margin: 0 0 20px;
	font-size: 14px;
	box-shadow: 0 2px 4px #959595;
}

div.content-default p.tip span {
	font-size: 21px;
	color: #cc3333;
	font-weight: bold;
	margin-right: 10px;
}


/* ICON TABLES */

div.content-default table.iconTable {
	background-color: #555555;
	width: 100%;
	border-spacing: 0;
	margin: 0 0 20px;
	border-collapse: collapse;
	display: block;
}
div.content-default table.iconTable tbody { width: 100%; display: block; }
div.content-default table.iconTable tr { box-sizing: border-box; display: inline-block; width: 100%; }
div.content-default table.iconTable tr td { box-sizing: border-box; display: inline-block; padding: 5px 1.333333333333333%; width: 33.33333333333333%; float: left; }
div.content-default table.iconTable tr td img { width: 100%; }
div.content-default table.iconTable tr td pre { width: 100%; }


div.iconTable {
	display: block;
	background-color: #707070;
	margin: 0 0 20px;
	padding: 10px 3.333333333333333%;
	border-collapse: collapse;
	border: 0;
}
div.iconTable div {
	display: inline-block;
	float: left;
	padding: 0;
	margin-right: 3.571428571428571%;
	border: 0;
	width: 47.85714285714286%;
}
div.iconTable div:nth-child(2n) {
	margin-right: 0;
}
div.iconTable div h2 {
	color: #ffffff;
	text-align:center;
	text-shadow: 0px 1px 2px #000000;
}

/* 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 #333333;

	-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.colorGuide {
	width: 100%;
	padding: 10px;
	margin: 0 0 30px;
	background-color: #f0f0f0;
	border: 1px solid #ffffff;
	box-shadow: 0 2px 6px #959595;
}
div.colorGuide h2 {
	font-size: 24px;
	margin-top: 0;
	margin-bottom: 10px;
	text-align: center;
    text-transform: uppercase;
	font-family: 'DDC Heading Font Face', sans-serif;
	font-style: italic;
	font-weight: bold;
	color: #cc3333;
	letter-spacing: -.5px;
	text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, 2px 4px 0 #cccccc;
}
div.colorGuide > div {
	width: 90%;
	margin: 0 auto 10px;
}
div.colorGuide div div {
	width: 100%;
	height: 80px;
	margin: 0 0 10px 0;
	padding: 10px 0 0;
	border: 2px solid #ffffff;
	font-family: 'DDC Heading Font Face', sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 38px;
	letter-spacing: .5px;
	text-shadow: 0 1px 2px #000000;
}
div.colorGuide div div:hover {
	border: 2px 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.colorGuide div div span {
	color: #ffffff;
	opacity: 0.6;
}
div.colorGuide div p.title {
	font-weight: bold;
	font-size: 24px;
}
div.colorGuide div.greenSwatch p.title {
	color: #64a70b;
}
div.colorGuide div.blueSwatch p.title {
	color: #004b87;
}
div.colorGuide div.graySwatch p.title {
	color: #888b8d;
}
div.colorGuide div p {
	font-size: 14px;
	margin: 0 0 4px;
	padding: 0;
}



/* DOWNLOAD BOX */

div.download {
	background-color: #fff799;
	padding: 10px;
	display: block;
	width: 100%;
	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 {
	padding:;
	font-size: 16px;
	margin: 0;
}
	

/* VIEWPORT SELECTOR */

#mfdContainer.normal {
max-width: 300px; }

#mfdContainer.large {
max-width: 355px; }

#mfdContainer.xlarge {
max-width: 394px; }

.viewportSelector { 
	background-color: #ffffff;
	position: fixed;
	top: 20px;
	right: 20px;
	width: 180px;
	padding: 10px;
	-webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.25);
} 

.viewportSelector button { width: 100%; margin-bottom: 10px; }
.viewportSelector button:last-child { margin-bottom: 0; }


.viewportSelector button {
	transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	color: #ffffff;
	font-weight: bold;
	font-size: 24px;
	line-height: 100%;
	font-family: 'DDC Heading Font Face', Univers, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	padding: 10px;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	max-width: 280px;
	height: auto;
	display: inline-block;
	text-decoration: none;
	margin-bottom: 10px;
    letter-spacing: .05rem;
    text-shadow: 0px 1px 1px rgba(39,109,0,1);
    background-color: #64a70b;
    border-bottom: 4px solid #a5e012;
	border-top: 0 none;
	border-right: 0 none;
	border-left: 0 none;
}
.viewportSelector button:hover {
	background-color: #276d00;
	cursor: pointer;
	color: #ffffff;
}



/** TEMPLATE CONTAINERS BY DEALER SITE **/

div.mainContainer {
	width: 980px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #e8e8e8;
	border-left: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	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);
}

#mfdContainer,
#kiaContainer,
#ucsContainer,
#cjdrContainer,
#vwContainer,
#pmcContainer,
#cdkContainer { width: 100%;
	max-width: 300px;
	margin: 16px auto 40px;
	background-color: #ffffff;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	padding: 10px;
	-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);
}
#vwContainer { background-color: #f1f5f6; }

#mfdSidebar   { width: 100%; float: none; margin: 0 auto 20px; }








/* MOBILE WORKBOX QUERIES */

h1.one, h1.two, h1.three, h1.four, h1.five, h1.six { display: none; }

/* smartphones, iPhone, portrait 480x320 phones */
@media only screen
and (min-width: 320px)
and (max-width: 480px) {
	h1.one { display: block; }
}

/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
@media only screen
and (min-width: 481px)
and (max-width: 640px) {
	h1.two { display: block; }
}

/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
@media only screen
and (min-width: 641px)
and (max-width: 960px) {
	h1.three { display: block; }
}

/* tablet, landscape iPad, lo-res laptops ands desktops */
@media only screen
and (min-width: 961px)
and (max-width: 1024px) {
	h1.four { display: block; }
}

/* big landscape tablets, laptops, and desktops */
@media only screen
and (min-width: 1025px)
and (max-width: 1280px) {
	h1.five { display: block; }
}

/* hi-res laptops and desktops */
@media only screen
and (min-width:1281px) {
	h1.six { display: block; }
}












/* NEW CAREERS PAGE STYLES */

ul.customNav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.customNav2 li {
    float: left;
}

ul.customNav li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.customNav li a:hover, ul.customNav .dropdown:hover .dropbtn {
    background-color: red;
}

ul.customNav li.dropdown {
    display: inline-block;
}

ul.customNav .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

ul.customNav .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

ul.customNav .dropdown-content a:hover {background-color: #f1f1f1}

ul.customNav .dropdown:hover .dropdown-content {
    display: block;
}

.emphasisBox:before,	
div.download:before {
  content: " ";
  display: table;
}
.emphasisBox:after,
div.download:after {
	content: "";
	display: table;
	clear: both;
}

.customDropdown .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.customDropdown .dropbtn:hover, .customDropdown .dropbtn:focus {
    background-color: #3e8e41;
}

.customDropdown {
    position: relative;
    display: inline-block;
}

.customDropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.customDropdown .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.customDropdown .dropdown a:hover {background-color: #f1f1f1}
.customDropdown .show { display:block; }