/* NorCal Style Sacto 062117 from TEMPLATE NWW-1 060617 Nick Sharpe nickswebworks.com UPDATE LA18 020518*/
    
body{width: 100%;font: 200 1em/1.5em Arial, Helvetica, Sanserif;color: #666;}
div.shell{width: 98vw;height: auto;}
/* HEADER  */
header{position:relative;top:0;left: 0;width:80%;max-width:1366px;height:10%;margin:0 auto;padding:0;background-color:#fff;/*border:1px dashed purple;*/}
h1#logo{float: left;top: 0px;left: 0px;width: 60%;height: 100%;margin: 0;text-indent: -9999px;background: url('images/cashforcarssandiego-logo-color.png') no-repeat 0 0/cover; }
#logo{text-indent:-9999px;}
/*.tagline{position:relative;top:10px;left:10%;width:230px;height:18px;margin:0;padding:0;color:#000;font-family:trebuchet;font-weight:100;font-style:oblique;font-size:.8em;}*/
.phonebox{float: right;top:0;width:30%;}
.phonebox p.toptel{top: 0;margin: 0;padding: 0;font:normal 700 1.5em/1em Arial, Helvetica Sanserif;color: #00b52a;text-shadow: 1px 1px 1px #000;}
.phonebox p{margin: 0;}
a.tel{color: #00b52a;text-decoration: none;}

/* NAV STYLE */
nav#navigation {position: relative;top: 0;left: 0;width: 100%;max-width: 1366px;height: auto;margin: 0 auto; padding:0;font-weight: 500;background-color:transparent;box-shadow: none;}
/* RESPONSIVE NAV STYLE */
 /* Remove margins and padding from the list, and add a black background color */
ul.topnav {position: relative;left: 0;list-style-type: none;margin: 0 auto;padding: 0;width: 80%;max-width: 1366px;overflow: hidden;background-color:#666;}
 /* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {display: inline-block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;transition: 0.3s;font-size: 90%;}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

@media screen and (max-width:800px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {float: right;display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:800px) {
  ul.topnav.responsive {position: relative;left: 5%;}
  ul.topnav.responsive li.icon {position: absolute;right: 0;top: 0;}
  ul.topnav.responsive li {float: none;display: inline;}
  ul.topnav.responsive li a {display: block;text-align: left;}
}

/* END NAV */

/* MAIN */
section{width: 100%;height:auto;/*border: 2px solid purple;*/overflow: hidden;}
section h2{color: #0087be;margin-left:10%;}
section h3{color: #0087be;}
article {width:80%;max-width: 1366px;height: auto;margin: 0 auto;padding: 5%;/*border: 1px dashed green;*/overflow: hidden; }
.post-cnt{float: left;width:60%;height: auto;/*border: 1px dotted purple;*/}
.post-img{float: right;width: 35%;height: auto;/*border: 1px dotted red;*/text-align: center;}
.post-img img{width: 100%;height:auto;}
.post-img figure{width: 100%;height:auto;margin: 0 auto;/*border:1px solid green;*/}

/********************* CTAs LEARN QUOTE *******************************************************/
.learn{float:left;font-size:1.5em;margin:10px;padding:10px;width:auto;height:auto;text-align:center;background-color:#00b52a;box-shadow:2px 2px 4px #666;border:1px solid green;}
.learn a{text-decoration:none;color:#fff;}
.learn a:hover{color:orange;}
.quote{float:right;font-size:24px;margin:10px;padding:10px;width:auto;height:auto;text-align:center;background-color:#00b52a;box-shadow:2px 2px 4px #666;border:1px solid green;}
.quote a{text-decoration:none;color:#fff;}
.quote a:hover{color:orange;}

/***************************** FEATURE LINK BOX ***********************************************/

#feature{position:relative;top:0;margin:0 auto;padding:0;width:90%;height:auto;-khtml-border-radius:  12px 0 0 12px;-webkit-border-radius: 12px 0 0 12px;border-radius:  12px 0 0 12px;}
#feature ul{display:block;}
#feature ul li{margin:0;padding:10px 0 10px 10px;width:260px;height:auto;font-size:1em;font-weight:bold;text-align:left;background-color:#2bb0e7;margin-bottom: 5px;border-radius: 10px;background: #00b25a;}

/*background: url(images/navigation.png) repeat-x 0 0; box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -o-box-shadow: 0px -1px 2px rgba(0,0,0,0.1);}*/

/* *** FOOTER ** */
footer{position:relative;top:20px;left:0;width: 100%;height:auto;padding:0;background-color:#e1e1e1;}
footer p{color:#24749f;margin:0px;font-size: .75em;letter-spacing: 2px;text-align:center;padding:0;}
footer a:link{color:#24749f;}
footer a:visited{color: #0060ff;}
footer a:hover{color: #00FFFF;}
footer p img{vertical-align:sub;}

p#footnav{position:relative;top:30px;margin:0 auto;width:100%;height:auto;padding:0;font-weight: 500;text-align: center;}

/*************************************** FOOTNAV  *******************************************/

ul{list-style-type:none;}
ul#footnav{position:relative;top:30px;margin:0 auto;width:40%;height:30px;padding:0;text-align: center;}
ul#footnav li{float:left;margin:0;padding:0 0 3px 0;color:#3d73b3;font-family:Arial; text-transform:uppercase;font-size:.85em;}
ul#footnav li a{text-decoration:none;padding:0 10px 10px 15px;}
ul#footnav li a:hover{color:#ffc19f;text-shadow:1px 1px 1px #000;}
ul#footnav li.current a{color:#6699ff;font-weight:bold;}
ul#footnav li a:visited {color: #24749f;}

/* MEDIA QUERIES */
@media only screen and (max-width: 400px) {
  .phonebox{float: none;position: relative;top:0;width:80%;}
}
@media only screen and (max-width: 800px) {
  body{font: 300 1em/1.5em Arial, Helvetica, Sanserif;color: #333;}
  div.shell{width: 95vw;height: auto;}
  header{position:relative;top:0;left: 0;width:90%;height:15vh;margin:0 auto;padding:0;background-color:transparent;/*border: 1px dashed red;*/}
  h1#logo{float: none;top:5px;margin:0;padding:0;width:90%;height:auto;}
  #logo h1, .logo h2{text-indent:-9999px;}
  .phonebox{float: none;top:0;width:60%;margin: 0 auto;}
  p.toptel a{top: 0;margin: 0;padding: 0;font:normal 500 1em/1em Arial, Helvetica Sanserif;color: #fff;text-shadow: 1px 1px 1px #000;}
  .phonebox p{top: 0;margin: 0;padding: 0;}
  article{width:90%;margin: 0 auto;padding: 0;}
  .post-cnt{float: none;width:90%;height: auto;margin: 0 auto;/*border: 1px dotted purple;*/}
  .post-img{position: relative;width: 90%;height: auto;margin: 0 auto;/*border: 1px dotted red;*/text-align: center;}
  
  /**FEATURE LINK BOX **/
  
#feature{position:relative;top:0;margin:0 auto;padding:0;width:90%;height:auto;-khtml-border-radius:  12px 0 0 12px;-webkit-border-radius: 12px 0 0 12px;border-radius:  12px 0 0 12px;}
ul#feature-links{display:block;}
ul#feature-links li{margin:0;padding:10px 0 10px 10px;width:260px;height:auto;font-size:1em;font-weight:bold;text-align:left;background-color:#2bb0e7;margin-bottom: 5px;border-radius: 10px;
background: #00b25a;}

#feature ul#feature-links li a{text-decoration:none;color:#fff;padding-bottom: 10px;margin-bottom: 0px;border:none;border-radius: 10px;}
#feature ul li a:hover{display:block;text-decoration:none;color:#0000ff;background-color:#B93B8F;margin:-10px 0 0px;padding:10px 0 0 0;width:260px;height:30px;font-size:1em;font-weight:bold;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:1px solid #999;border-radius:7px;-webkit-box-shadow:4px 5px 5px #888888; /* Safari and Chrome */
box-shadow: 4px 5px 5px #888888;
background-color: #00b52a;}
/* END FEATURE LINK BOX*/

ul#footnav{position:relative;top:30px;margin:0 auto;width:90%;height:25px;padding:0;}

}