/* NorCal Style San Mateo County 062117 from TEMPLATE NWW-1 060617 Nick Sharpe nickswebworks.com */

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:70px;margin:0 auto;padding:0;background-color:transparent;/*border: 1px solid red;*/}
h1#logo{float: left;top: 0px;left: 0px;width: 60%;height: 100%;margin: 0;text-indent: -9999px;background: url('images/CashForCarsInSMC.png') no-repeat 0 0; -webkit-background-size: contain; background-size: contain;}
#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 2em/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:#00b52a;}

/* 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 */
/* HERO */
/* Get Started */
p.getstarted{text-decoration: none;color:#fff;width:auto;height:auto;margin:0;padding:.5%;font:700 1.3em/1em 'Open Sans', arial, helvetica sans-serif;border:1px solid #999;
border-radius:7px;
-webkit-box-shadow: 3px 3px 5px #333; /* Safari and Chrome */
box-shadow: 3px 3px 5px #333;
background: rgb(64,196,39); /* Old browsers */
background: -moz-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(126,215,109,1) 17%, rgba(88,203,67,1) 33%, rgba(70,198,46,1) 67%, rgba(64,196,39,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(126,215,109,1)), color-stop(33%,rgba(70,198,46,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(126,215,109,1) 17%,rgba(70,198,46,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(126,215,109,1) 17%,rgba(70,198,46,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(126,215,109,1) 17%,rgba(70,198,46,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(126,215,109,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */
}
p.getstarted a{color: #fff;text-decoration: none;}
p.getstarted a:hover{display:block;color:orange;}

.vplearn{float: left;}
.vpstarted{float: right;}

/* MAIN */ 
 section{width: 100%;height:auto;/*border: 2px solid purple;*/overflow: hidden;}
 section h2{margin-left:10%;}
 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;*/}

/***************************** 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:100%;height:auto;padding:0;text-align: center;border: 2px dashed green;}
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: 800px) {
div.shell{width: 95vw;height: auto;/*border: 2px solid green;*/}
header{position:relative;top:0;left: 0;width:90%;height:20vh;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:30px;/*border: 1px solid purple;*/}
#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: #00b52a;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;}

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

#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;border: 2px dashed green;}


}