body {position:relative;z-index:0;margin: 0;padding:0;}

*, a, p, body {
	font-family: Arial, Helvetica, sans-serif;
	font-weight:100;
	line-height: 135%;
}


/* heading and titles */
/*
@font-face {
    font-family: 'crimson_textroman';
    src: url('https://db98f2.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/site/wp-content/themes/columbine/fonts/crimson/crimsontext-roman-webfont.eot');
    src: url('https://181e5d.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/site/wp-content/themes/columbine/fonts/crimson/crimsontext-roman-webfont.eot#iefix') format('embedded-opentype'),
url('https://20a6e8.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/site/wp-content/themes/columbine/fonts/crimson/crimsontext-roman-webfont.woff') format('woff'),
url('https://36200e.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/site/wp-content/themes/columbine/fonts/crimson/crimsontext-roman-webfont.ttf') format('truetype'),
url('https://bb766a.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/site/wp-content/themes/columbine/fonts/crimson/crimsontext-roman-webfont.svg#crimson_textroman') format('svg');
    font-weight: normal;
    font-style: normal;

}
*/
@font-face {
    font-family: "voluta_script";
    src: url('https://d34443.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/html/voluta_script/voluta_script-webfont.woff2') format('woff2'),
         url('https://78eb23.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/html/voluta_script/voluta_script-webfont.woff') format('woff'),
         url('https://b0f53b.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/html/voluta_script/voluta_script/-webfont.svg#voluta_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1, h2, h3, h4, h5, h6, 
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, 
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *
{ 
	font-family: "Bembo SC", Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	line-height: 110%;
}


h1 {
	font-size: 28px;
	margin: 0px 0px 6px;
	color: #FAF485;
	font-variant: small-caps;
}
h2 {
	margin: 0px 0px 8px;
	color: #99AE00;
	font: small-caps normal 20px;
}
h3 {
	margin: 0px 0px 6px;
	color: #C0B705;
	font: small-caps normal 20px;
}
h3 a {
	margin: 0px 0px 6px;
	color: #C0B705;
	font: small-caps normal 17px;
	
}
ul li{
    list-style-image: url(https://427b08.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/html/images/parts1/bullet.gif);
    list-style-type: square;
    line-height: 130%;
}

.fancy-font {
    font-family: "voluta_script", "Bembo SC", Georgia, "Times New Roman", Times, serif;
    color: #294407;
	display:block;
	
}


/* //////////// STRUCTURE */
body {
	margin: 0px;
	padding: 0px;
	background: #000000; position: relative;
}

#wrapper {
    position: relative;
    z-index: 1;
    max-width: 800px;
    background: rgba(201, 220, 205, 0.77);
    margin: 0 auto;
}
#header {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    clear: both;
    position: relative;
	background: #b3ba9d;   
}
#header .inner {
    border: 1px solid #6c7c09;
    border-top: none;
    box-shadow: inset 0px 0px 3px 3px red;
}


#header .border-decoration {
    background: #f6f9f2;
    width: 100%;
    box-shadow: inset 0px 0px 0px 1px white, inset 0px 0px 0px 2px #b3ba9d;
}
#header .pad {
    width: 100%;
    padding: 4px 1px 0px 6px;
}

img#logo {
    height: auto;
    width: 47%;
    vertical-align: top;
    float: left;
}
img#rocks {
    float: right;
    width: 23%;
}
img#rocks::after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}


#main-menu {
    position: relative;
    clear: both;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    z-index: 1000;
    background: rgba(70, 78, 45, 0.32);
	text-align: center;
    box-shadow: inset 0px 4px 30px rgba(120, 134, 73, 0.4);
}
#content-wrap {
	position: relative;
    margin:0;
	padding:0;
	width: 100%;
    vertical-align: top;
    background-color: #000000;
    color: #FFFFFF;
	height: auto;
	background-position: center top;
    background-repeat: no-repeat;
	clear:both;
	
}
#content-wrap.long {height:auto;}

#gallerytext {color: #999966;padding: 10px 0px;font: 12px Arial, Helvetica, sans-serif;}

#gallerytext h1 {margin: 0px;color: #EBEDE4;font: bold normal 16px Arial, Helvetica, sans-serif;padding-left: 7px;border-top: 1px none #657E0C;border-right: 1px none #657E0C;border-bottom: 1px solid #657E0C;border-left: 1px none #657E0C;}
#gallerytext h2, #gallerytext h3 {margin: 0px;color: #C0B705;border-bottom: 0px none #657E0C;padding: 0px;font: bold normal 12px Arial, Helvetica, sans-serif;}

#gallerymininav {color: #657E0C;font: 10px Geneva, Arial, Helvetica, sans-serif;float: right;padding: 1px 0px;}
#gallerymininav a {color: #C4C58D;padding: 0px 3px;font: 11px Arial, Helvetica, sans-serif;}
#gallerymininav a:hover {color: #FFFFFF;padding-right: 3px;padding-left: 3px;font: 11px Arial, Helvetica, sans-serif;}
#gallerymininav em {color: #C1BE39;font-style: normal;font-size: 10px;}
#gallerymininav strong {font-size: 11px;color: #E0E353;font-style: normal;}
#submenublank {font-size: 11px;text-align: left;font-family: Arial, Helvetica, sans-serif;color: #6D7D00;line-height: 160%;width: 140px;margin: 20px 20px 0px 0px;float: left;}
#galleryright {padding: 0px;float: none;width: 80%;border: 1px none #657E0C;margin: 0 12px 24px 12px;}
#galleryright h4 {margin: 0px;color: #FAF485;border-bottom: 0px none #657E0C;font: bold normal 16px Arial, Helvetica, sans-serif;}
#galleryleft {padding: 0px;float: none;width: 80%;margin: 0 12px;}
#galleryleft h4 {margin: 12px 0 3 px 0;border-bottom: 0px none #657E0C;font: bold normal 13px Arial, Helvetica, sans-serif;}
#galleryleft h1, #galleryleft h2, #galleryleft h3, #galleryright h1, #galleryright h2, #galleryright h3 {font-size: 12px;font-style: normal;font-weight: bold;font-variant: normal;color: #999966;}
#galleryleft a, #galleryright a {color: #B4B955;}
#galleryleft a:hover, #galleryright a:hover {color: #C6C6AA;}
#hometext {visibility: hidden;display: none;color: #333333;}
#homefeatureboxes {
    color: #000;
    border-top: 2px solid #000;
}

#homefeatureboxes .leftcolumn, #homefeatureboxes .rightcolumn, #homefeatureboxes .middlecolumn {
    padding: 0;
    display: block;
    float: left;
    margin: 0 auto;
}
#homefeatureboxes .middlecolumn {
    width: 50%;
    background: #B4BB9C url(https://156ea3.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/html/images/home/swash-corner.png) no-repeat right top;
}
#homefeatureboxes .leftcolumn {
    width: 25%;
    background: #b7bba7;
}
#homefeatureboxes .rightcolumn {
    width: 25%;
    background: #b7bba7;
}

#homefeatureboxes .padding{margin:0;padding: 12px;}
#homefeatureboxes p {font-size: 13px;margin: 0 0 12px 0;}
#homefeatureboxes h1, #homefeatureboxes h2, #homefeatureboxes h3,
#homefeatureboxes h1 a, #homefeatureboxes h2 a, #homefeatureboxes h3 a
{
    font-family: "voluta_script", "Bembo SC", Georgia, "Times New Roman", Times, serif;
    color: #294407;
}
#homefeatureboxes span {display:none;}
#homefeatureboxes h1 {
    margin: 0 03px 0;
    color: #294407;
    font-variant: normal;
    font-size: 68px;
}
#homefeatureboxes h2 {color: #3F6518;margin: 0px 0 12px 40px;}
#homefeatureboxes h3 {
    font-size: 43px;
    line-height: 77%;
    margin-bottom: 15px;
    display: inline-block;
}
#homefeatureboxes h3 a{
        line-height: 77%;

	color: #2C5F16;
    text-decoration: none;
}
#homefeatureboxes h3 a:hover {color: #204510;text-decoration: none;border-bottom: 0px solid #3F6518;}
#homefeatureboxes li {font-size: 13px;list-style: square;}
#homefeatureboxes a {color: #3F6518;}
#homefeatureboxes a:hover {color: #20311A;}
#homefeatureboxes h3.lawn-alternatives {background: url(https://a349c6.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/html/images/page_titles/home-lawn-alternatives.png) no-repeat left top;height: 32px;width: 100%;}
#homefeatureboxes h3 img {margin: 0px;border-style: none;}
#homefeatureboxes h2 {
    font-family: "Bembo SC", Georgia, "Times New Roman", Times, serif;
    font-variant: small-caps;
    float: none;
    font-size: 22px;
    margin-top: 5px;
    margin: 0;
}


/* this style keeps the two absolute elements in the same region... this region*/
#slidercontent {width:100%;position:relative;margin: 0px;padding: 0px;height: 410px;overflow: hidden;}
#homeslidertext {position: absolute;top: 0px;right: 0px;width: 240px;float:right;overflow:hidden;z-index: 100;height: 410px;margin: 0 0 0 0;background: url(https://d10ae6.claudeassets.com/20230401182953im_/https://www.stjohnlandscapes.com/html/images/home/home-transparent-slider-cover-bg.png);}
#homeslidertext p {font: 17px/140% "Times New Roman", Times, serif;margin: 0 0 3px 0;}
#homeslidertext .padding{padding:18px;}
#homeslidertext h3 {font: small-caps normal 23px "Bembo SC", Georgia, "Times New Roman", Times, serif;color: #C0B705;margin: 0 0 9px 0;}
#homeslidertext h4 {font: small-caps normal 16px "Bembo SC", Georgia, "Times New Roman", Times, serif;color: #6F8F30;margin: 0 0 9px 0;}
#homeslidertext .links {font: 14px/130% Tahoma, Geneva, sans-serif;color: #548828;}
#homeslidertext .links a{background: #403C2D;margin-right: 3px;text-decoration: none;border-bottom: 1px solid #C0B705;color: #C0B705;padding: 1px;}
#homeslidertext .links a:hover{color: #FFF;text-decoration: none;background: #54881F;}


#submenu {
    background-color: #a4af8f;
    border: 1px solid #a4af8f;
    margin: 32px 9px 0px 0px;
}
#submenu .pad {
	border: 1px solid #6d7d00;
	padding: 3px 3px 10px 3px;
}
#content {
    position: relative;
    height: inherit;
    margin: 0;
    padding: 0;
}
#content .pad {
    padding: 28px 0px 0px 0px;
    font-size: 14px;
}


#footer {
    position: relative;
    margin-top: 23px;
    clear: both;
    border: 1px solid #afb792;
	
	background: #afb792;
	background: -moz-linear-gradient(top,  #b4bb9c 50%, #afb792 50%);
	background: -webkit-linear-gradient(top,  #b4bb9c 50%,#afb792 50%);
	background: linear-gradient(to bottom,  #b4bb9c 50%,#afb792 50%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4bb9c', endColorstr='#afb792',GradientType=0 );
	
}
#footer .pad {
	border: 1px solid #747297;
	margin: 0;
    padding: 20px 22px;
}
#footer * {
    font-size: 13px;
    color: #536306;
}
#footer a {
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
    margin: 0px 3px;
}



/* two columns for pages div shortcode */

.two-columns {
display: inline-block;
vertical-align:top;
min-height: 300px;
width: auto;
padding: 0 0 0 .5%;
margin:0
}
.two-columns.one { padding: 0 .5% 0 0;width: 20%;}
.two-columns.two {width: 75%;}
.two-columns p:first-child { padding-top: 0;margin-top: 0;}
.two-columns.two p:first-child { display: none;}

.two-columns.long-short:first-child {width: 66%;}
.two-columns.long-short:last-child {width: 30%;}
.two-columns.short-long:first-child {width: 30%;}
.two-columns.short-long:last-child {width: 66%;}

.two-columns img.size-full {
  width: 100%;
  height: auto;
  margin: 12px 0;
}

.two-columns.one.wide {width: 24%;}
.two-columns.two.wide {width: 71%;}


a:hover {
    color: #99AE00;
}
a {
    color: #D5D9BD;
}

#submenu a {
	font-size: 13px;
    color: white;
    text-decoration: none;
    display: block;
    clear: both;
    margin: -1px 0px 0px 0px;
    padding: 0px;
}
#submenu a strong {
	color: #faf476;
}
#submenu a:hover {
	color: #faf476;text-decoration: underline;
}



#main-menu a {
    text-decoration: none;
    font-size: 17px;
    display: inline-block;
    padding: 3px 11px 2px;
    color: #4f5d00;
}
#main-menu a:hover {
color:#465001;
}



iframe#form-wrap {
    width: 100% !important;
    overflow-y: auto;
    height: 900px;
    border: none;
    text-align: left;
}








.hide {display:none;}
.send-to-friend.hide {display:inline;}




/*  ---------------------------------- Responsive Structure ------------- */
/*  ---------------------------------- Responsive Structure ------------- */
/*  ---------------------------------- Responsive Structure ------------- */

/*  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> */
@media only screen and (max-width : 768px ) {

}
@media only screen and (max-width : 600px) { 
img#logo {width:60%;}
img#rocks {width:31%;}

#wrapper {padding: 0 3px;}
.two-columns {width: 100%;padding: 0 0 0 0%;min-height: 0px;}
.two-columns.one, .two-columns.two {width: 100% !important;}
#homefeatureboxes .leftcolumn, #homefeatureboxes .rightcolumn, #homefeatureboxes .middlecolumn {
    padding: 0;
    display: block;
    float: left;
    margin: 0 auto;
    width: 100% !important;
    clear: both;
}
#slidercontent {
    height: auto;
}
#homeslidertext {	
	position: relative;
    top: initial;
    right: initial;
    width: 100%;
    float: none;
    height: auto;
    background: #18230b;
}
#submenu {
    background-color: #767d68;
    margin: 3px 0px 0px 0px;
}
#submenu .pad {border:none; padding: 10px;}
#submenu .bump  {
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
	    -webkit-column-gap: 6px; 
		-moz-column-gap: 6px;
		column-gap: 6px;
			-webkit-column-rule: 0px solid black; 
			-moz-column-rule: 0px solid black;
			column-rule: 0px solid black;

}
#submenu .bump.force {
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
#submenu a {
    display: inline-block;
    width: 135px;
    vertical-align: top;
}
#submenu a.title {
    display: block;
    margin: 2px 0px 4px 0px;
}
#submenu .bumpKILL  a {
    display: block;
    width: auto;
}

/*#submenu a:nth-child(even) {background: #6a7358;}*/
.coda-slider-wrapper {
    position: relative !important;
    float: none;
    top: initial;
    left: initial;
}
#content .pad img {float: none !important;}
#footer {
	/*display:none !important;*/    
	clear: both;    
	display: block;
}
#footer .pad {
    margin: 0;
    text-align: center;
    padding: 28px 6px;
}


}
@media only screen and (max-width : 479px) { 
#submenu .bump  {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}


}
@media only screen and (max-width : 400px) { 


}

/* ********************* base zero *********************** */
@media only screen and (min-width: 400px){	

}
@media only screen and (min-width : 480px ) {

}
@media only screen and (min-width:600px) {	

}
@media only screen and (min-width:768px) {	

}
@media only screen and (min-width : 850px ) {

}
@media only screen and (min-width:890px) {	

}
@media only screen and (max-width : 1025px) {
	
}
@media only screen and (min-width : 1224px) {

}

/*
     FILE ARCHIVED ON 03:23:33 Apr 02, 2023 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 14:13:01 Aug 26, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.336
  exclusion.robots: 0.035
  exclusion.robots.policy: 0.028
  esindex: 0.005
  cdx.remote: 53.957
  LoadShardBlock: 60.415 (3)
  PetaboxLoader3.datanode: 81.647 (5)
  PetaboxLoader3.resolve: 329.589 (2)
  load_resource: 364.508
  loaddict: 26.663
*/