/*
Theme Name: County Automotive
Description: Recreation of the original countyautomotive.co.uk design (Scion Solutions Ltd) as a WordPress theme.
Author: Scion Solutions Ltd
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: county-automotive
*/

/* ---- Original site stylesheet (css/styles.css) ---- */

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  background-color: #000;
  color: #000;
  margin: 0px;
  padding: 0px
}

img {
  border: 0px
}

#mainBody {
  position:relative;
  width:970px;
  margin:auto;
  background-color: #000
}

#header{
  height: 100px
}

#headerLogo {
  float: left;
  margin-left: 20px;
  margin-top: 10px
}

#topMenu {
  float: right;
  width: 230px;
  height: 90px;
  margin-top: 10px;
  background: #2A2C2F
}

div#topMenu ul {
  margin-top: 3px;
  line-height: 1.55em;
  list-style-type: none;
  padding: 0px;
}

div#topMenu li {
  font-weight: normal;
  font-size: 1.1em;
  text-indent: .4em;
  border-bottom: 1px solid #5C6168;
  padding-bottom: 1px;
  margin-left: 10px;
  margin-right: 10px
}

div#topMenu ul li a:link,
div#topMenu ul li a:visited,
div#topMenu ul li a:active {
  text-decoration: none;
  color: #FFF
}
div#topMenu ul li a:hover {
  color: #828B94;
}
div#topMenu ul li:hover {
  border-bottom: 1px solid #828B94;
}

#strapline {
  overflow: hidden;
  height: 50px
}

#enjoyTheDrive {
  float: left;
  margin-left: 10px;
  margin-top: 10px
}

#dateStrapline {
  float: right;
  margin-top: 13px;
  margin-right: 20px;
  color: #FFF;
  font-size: 1.2em
}

#content {
  overflow: hidden;
  background-color: #2A2C2F;
}

#contentInner {
  overflow: hidden;
  padding: 5px;
  background-color: #FFF;
  color: #000;
  border-left: solid #828B94 1px;
  border-right: solid #EFF1F3 1px
}

#contentInner h1, h2, h3, h4 {
  color: #707880
}

#leftContent {
  float: left;
  width: 608px;
  margin-top: 1px;
  background-color: #000
}

#leftContentText {
  background-color: #FFF;
  height: 118px;
  padding: 5px
}

#leftContentText p {
  margin-top: 5px
}

#middleContentText {
  background: #FFF;
  float: right;
  width: 367px;
  height: 118px;
  margin-top: 1px;
  padding: 5px
}

#middleContentText p {
  margin-top: 5px
}

#leftContentMenu {
  background-color: #2A2C2F;
  height: 128px;
  width: 230px;
  float:left
}

#servicesMenu {
  float: left;
  width: 230px;
  height: 100%;
  background: #2A2C2F
}

div#servicesMenu ul {
  margin-top: 5px;
  line-height: 1.27em;
  list-style-type: none;
  padding: 0px;
}

div#servicesMenu li {
  font-weight: normal;
  font-size: 1.0em;
  text-indent: .4em;
  border-bottom: 1px solid #5C6168;
  padding-bottom: 1px;
  margin-left: 10px;
  margin-right: 10px
}

div#servicesMenu ul li a:link,
div#servicesMenu ul li a:visited,
div#servicesMenu ul li a:active {
  text-decoration: none;
  color: #FFF
}
div#servicesMenu ul li a:hover {
  color: #828B94;
}
div#servicesMenu ul li:hover {
  border-bottom: 1px solid #828B94;
}

#rightContent {
  float: right;
  width: 362px;
  height: 259px;
  padding-top: 1px;
  background-color: #000
}

.galleryMan {
  padding: 5px;
  border-top: 1px solid #5C6168;
  overflow: hidden
}

.galleryManLeft {
  float:left;
  width: 130px
}

.galleryManRight {
  float:left;
  padding-right: 10px
}
.galleryImages {
  float:right;
  width: 650px;
}

.galleryImage {
  border: 1px solid #5C6168;
}

.fpImage {
  margin-left: 1px;
  margin-bottom: 1px
}

#footer{
  text-align:center;
  padding: 5px;
  font-weight: bold;
  color: #FFF
}

div#footer a:link,
div#footer a:visited,
div#footer a:active {
  color: #FFF;
}
div#footer a:hover {
  color: #828B94;
}

.divider{
  height:10px;
  background: url(images/fade.png);
  background-repeat: repeat-y
}

/* ---- WordPress additions ---- */

/* The menu <li> must not inherit WordPress's current-item styling quirks. */
#topMenu ul, #servicesMenu ul { margin-bottom: 0 }

.alignleft { float: left; margin: 0 10px 5px 0 }
.alignright { float: right; margin: 0 0 5px 10px }
.aligncenter { display: block; margin-left: auto; margin-right: auto }

/* Home page promotions: two offers side by side, as on the original. */
#middleContentText .promo {
  float: left;
  width: 50%;
  font-size: x-small;
  line-height: 1.1em
}
#middleContentText .promo p { margin: 5px 0 0 }
#middleContentText .promo p + p { margin-top: 0 }
.promo-left img { float: left; margin: 0 10px }
.promo-right img { float: right }

/* Replaces the old large_image.php popup window. */
#ca-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, .85);
  display: none;
  align-items: center;
  justify-content: center;
  font-family: "Microsoft Sans Serif", Verdana, Arial, Helvetica, sans-serif;
  color: #FFF
}
#ca-lightbox.open { display: flex }
#ca-lightbox figure { margin: 0; background: #000; padding: 0 0 5px; max-width: 95vw; text-align: center }
#ca-lightbox img { display: block; max-width: 95vw; max-height: 80vh }
#ca-lightbox figcaption { padding: 5px; font-size: 1.2em }
#ca-lightbox nav { padding: 5px 10px 10px }
#ca-lightbox nav a { color: #FFF; cursor: pointer; margin: 0 6px }
#ca-lightbox nav a:hover { color: #3399FF; text-decoration: none }

/* ---- Responsive layout ----
   Everything below only applies under the original 970px width, so the
   desktop design is unchanged. */

@media (max-width: 989px) {
  #mainBody { width: auto }

  #header { height: auto; overflow: hidden }
  #headerLogo { max-width: calc(100% - 270px); height: auto }

  #strapline { height: auto; padding-bottom: 8px }
  #enjoyTheDrive { max-width: 60%; height: auto }

  #mainImage img { display: block; width: 100%; height: auto }

  /* Home page: release the fixed-height boxes and stack the columns. */
  #leftContent, #rightContent { float: none; width: auto; height: auto }
  #leftContentText, #middleContentText { height: auto }
  #leftContentMenu { height: auto; padding-bottom: 5px }
  #leftContentMenu #servicesMenu { height: auto }
  #middleContentText { float: none; width: auto; overflow: hidden; margin-left: 230px }
  #rightContent { clear: both; overflow: hidden; padding-top: 1px }
  .fpImage { float: left; width: calc(25% - 1px); height: auto }

  /* Old editor content: fixed-size images, tables and the map. */
  #contentInner img { max-width: 100%; height: auto }
  #contentInner table { max-width: 100% }
  #contentInner iframe { max-width: 100% }

  /* Gallery: thumbnails wrap beneath the manufacturer name and logo. */
  .galleryImages { float: none; clear: both; width: auto; padding-top: 5px }
  .galleryManRight img { max-height: 90px; width: auto }
}

@media (max-width: 640px) {
  body { font-size: .9em }

  #headerLogo { float: none; display: block; max-width: calc(100% - 20px); margin: 10px }
  #topMenu { float: none; width: auto; height: auto; margin: 0 0 5px; padding-bottom: 5px }
  div#topMenu ul { display: flex; flex-wrap: wrap; margin: 0 5px }
  div#topMenu li { flex: 1 1 40%; margin: 0 5px; line-height: 2.2em }

  #enjoyTheDrive { max-width: calc(100% - 20px) }
  #dateStrapline { float: left; clear: left; margin: 5px 10px 0 }

  /* Services sidebar goes above the page content. */
  #servicesMenu { float: none; width: auto; height: auto; padding-bottom: 5px }
  div#servicesMenu li { line-height: 2em }
  #leftContentMenu { float: none; width: auto }
  #middleContentText { margin-left: 0 }
  #middleContentText .promo { font-size: small }
  .fpImage { width: calc(50% - 1px) }

  #contentInner { border-left: 0; border-right: 0 }
  /* About Us: the contact details and map were floated side by side. */
  #contentInner div[style*="float"] { float: none !important; padding: 0 !important }
  #contentInner img[style*="float"] { max-width: 45% }

  .galleryManLeft { width: auto; padding-right: 10px }
  .galleryImage { width: calc(50% - 6px); height: auto }
}

@media (max-width: 400px) {
  #middleContentText .promo { float: none; width: auto; overflow: hidden; margin-bottom: 5px }
  .promo-left img { margin-left: 0 }
}