/* CSS file generated by Responsify */
/* Columns: 12, Gutter Width: 3.5, Breakpoints: 800 */ 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
} 

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}

nav ul, nav li { margin: 0; } 
nav ul, ul { list-style:none; }


/* Typography */

body{ 
  font-size:1em;
  color: #252e35; 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  line-height: 1.5em;
  background: #F6F3D4;  
}

h1, h2, h3, h4, h5, h6{
	font-weight:normal;
	font-family:'Droid Serif', Arial, Helvetica, sans-serif; 
	line-height:1.5em;
	margin:.45em 0;
	padding:0 0 .4em 0;
} 

h1{
    font-size: 1.714285714em; /* 24 / 14 */
    line-height: 1.5em; /* 21 / 14 */
  
}

h2{
  font-size: 1.43em; /* 20 / 14 */
  line-height: 1.2em; /* 21 / 14 */
}

h3{
  font-size: 1.3em; /* 18 / 14 */
  line-height: 1.1em; /* 21 / 14 */
  color: #328226; 
  margin-top: 1.2em;
}

p{
    font-size: 1em; /* 14 / 14 */
    line-height: 1.5em; /* 21 / 14 */
    margin-bottom: 1.5em; /* 21 / 14 */
}

ul{list-style: square; margin: 0 0 1.5em 1.8em;}

ol{margin: 0 0 1.5em 1.8em;}

h2.hdgbox{color: green; font-size:1.3em}
h2.hdgbox:first-letter {font-family: 'Edwardian Script ITC';
font-size: 40px;
font-weight: bold; letter-spacing:.07em}

/* links */
a,
a:visited,
a:active,
a:hover{color:#328226; text-decoration:none;}
a:hover{ color: #333}

hr{clear: both; background:green;  height: 2px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);}

.span1, .span2, .span3, .span4, .span5, .span6,
.span7, .span8, .span9, .span10, .span11, span12{
	margin-bottom:40px;
}

#container{clear:both;  background: #fff;}

#container, .inner{
    width: 88%;
    margin: 0 auto;
    padding:1.2% 4%;
  
  }
  
.wide-content{
    width: 92%;
    margin: 0 auto;
    padding:1.2% 2%;
    background:#EAE6B9;
}  
  
header h1{
  margin: 7px 0 0 0;
}

header .span8, header .span12{margin-bottom:0 }

header .span8 .para1{
    margin: 5px 0 15px 0;
    font-size: 29px;
    padding: 0;
    text-shadow: 1px 1px 0 #555;
    font-weight: bold;
    color: green;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

header .span8 .para2{
	margin:10px 0 25px 0;
	line-height: 140%;
	font-size: 14px;
	color: #333; font-family:Georgia;
	text-align:center
}

#banner{ 
	text-align:center;
}

#banner{ 
	float:left; 
	text-align:left;
	margin-bottom:20px;
	/*display:none;	*/
	background: transparent;
}


.alt{
  font-size: 29px; font-style:italic;color: #3D3701;
}

.phone{color: #333;font-size:20px;text-align:center;padding-top:8px;}

header .span4, header .span9, header .span8{margin-bottom:0;}

.bordbot{border-bottom: 2px solid green}

.tag2{font-size: 20px; font-family: Georgia, serif; font-style:italic;color: #3D3801; text-align:center;line-height: 110%}


/* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;}


/*MAIN MENU*/
.menu-toggle{
	display:block;
	padding:10px;
	margin:20px 0 0;
	background:#666;
	color:#fff;
	cursor:pointer;
	text-transform:uppercase;
	font-size:20px;
}
.menu-toggle.toggled-on{
	background:#979368;
}
.srt-menu{
	display:none;
}	
.srt-menu.toggled-on{
	display:block;
	position:relative;
	z-index:10;
}

.srt-menu{
	clear:both;
	margin-bottom:60px;
	
}
.srt-menu li a {
	background:#3D3701;
	display:block;
	margin:1px 0; 
	padding:10px;
	text-decoration:none;
	color: #fff
}
.srt-menu li a:hover{
	background:#979368;
	color:#111;
}
.srt-menu li li a {
	background:#e8e8e8;
	padding-left:40px;
}
.srt-menu li li li a {
	background:#efefef;
	padding-left:80px;
}

/*SECONDARY MENU*/
#secondary-navigation{
	margin-bottom:60px;
}
#secondary-navigation ul{
	margin:0;
	padding:0;
}
#secondary-navigation ul li a{ 
	background:#E6E6E6;
	display:block;
	margin:5px 0; 
	padding:10px;
	text-decoration:none;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{
	background:#0099ff;
	color:#fff;
}

  .span8, article{
    width: 100%;
  }

  .span4, aside{
    width: 100%;
    margin-left: 0;
  }
  
a.buttonlink{ 
	background:transparent; 
	color:green;
	display:block;
	float:left; 
	margin:10px 15px 10px 0; 
	padding:0px;
	text-decoration:none;
	border-bottom:1px dotted green;
	font-size: .8em;
}
a.buttonlink:hover{
	background:#8dbc01;
}


footer{
  background: #333; color: #DAD5A7; font-size: .9em; text-align: center;
}

footer a, footer a:visited,
footer a:active{color:#F4EEB0}

footer a:hover{color: #fff}

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.rightfloat{
	float:right;
}
.leftfloat{
	float:left;
}

.alignleft{float:left; margin: 0 12px 12px 0;}

.alignright{float:right; margin: 0 0px 12px 12px;}

.pull-left{margin-left: 74px;}

.nobottom{margin-bottom:20px}


.shadow{box-shadow:1px 1px 12px #666}

.right{text-align: right;}

.center{text-align: center;}


/* MEDIA QUERIES */

@media only screen and (min-width: 481px) {
	.menu-toggle{/*make menu float right, instead of sitting under the logo*/
		margin-top:0px; /*this depends on the height of the logo*/
		float:left;
	}
	
	.phone{float:right;color: #333;font-size:20px;text-align:right;padding-top:8px;}
	
		
} 

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

body{ 
  font-size:1em;
  color: #252e35; 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  line-height: 1.5em;
  background: #F6F3D4 url(http://santaferecycles.com/images/main_bg.gif) repeat-x;  
}

#banner{ 
		float:left; 
		text-align:left;
		background: url(images/logoR.jpg) no-repeat left;
		width: 311px;
		height: 274px;
	}
	header{
		padding:0;
	}


/**/header .span8 .para1{
    margin-top: 5px;
    font-size: 31px;
    padding: 0;
    text-shadow: 1px 1px 0 #555;
    font-weight: bold;
    color: green;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

header .span8 .para2{margin:15px 0 15px 0; line-height: 140%;font-size: 18px; color: #333; font-family:Georgia;}

.phone{float:right;color: #fff;font-size:20px; text-align:right;padding:8px 12px 0 0;}


header .span12{clear:both; background: #3D3701}

.menu-toggle{/*make menu float right, instead of sitting under the logo*/
		margin-top:0px; /*this depends on the height of the logo*/
		float:left;
	}

}

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

#banner{ 
		float:left; 
		text-align:left;
		margin-bottom:0px;
		background: url(images/logoR.jpg) no-repeat left;
		width: 311px;
		height: 274px;
	}

	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12{
	    float:left;
	    -webkit-box-sizing:border-box;
	    -moz-box-sizing:border-box;
	    box-sizing:border-box;
	}

	.col{
	  margin-left: 3.5%;
	}

	.col:first-child {
	  margin-left:0;
	}

	.span1{
	  width: 5.125%;

	}
	.span2{
	  width: 13.75%;

	}
	.span3{
	  width: 22.375%;

	}
	.span4{
	  width: 31%;

	}
	.span5{
	  width: 39.625%;

	}
	.span6{
	  width: 48.25%;

	}
	.span7{
	  width: 56.875%;

	}
	.span8{
	  width: 65.5%;

	}
	.span9{
	  width: 74.125%;

	}
	.span10{
	  width: 82.75%;

	}
	.span11{
	  width: 91.375%;

	}
	.span12{
	  width: 100%;
	  margin-left: 0;
	  margin-bottom:0;
	}
	
	header .span8{background: float:none; width:58%;}
	
	header .span8.col{ margin:0}
	
	footer .span7{text-align:left;}
	
	footer .span5{text-align:right;}
	.tag2{font-size: 24px; font-family: Georgia, serif; font-style:italic;color: #3D3801; text-align:center;line-height: 110%}


}

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

	
.wide-content{
	float:none;
	margin: 0 auto;
	max-width: 1020px;
	padding: 0 20px;
	background:url(images/headerbg.jpg) repeat-x
	}
	
#banner{ 
		float:left; 
		text-align:left;
		margin-bottom:0px;
		background: url(images/logo.jpg) no-repeat left;
		width: 311px;
		height: 274px;
		margin-bottom: 2px;
	}	
header .span8 .para1{margin-top:35px; font-size: 29px; text-shadow: 1px 1px 0 #555;font-weight:bold;color: green; text-align: right; text-transform: uppercase; letter-spacing:0.1em; }

header .span8 .para2{margin-top:55px; text-align: right; line-height: 160%;font-size: 17px; color: #fff; font-family:Georgia;}	

.alt{
  font-size: 32px; font-style:italic; color: #E1DB9D;
}

header .span12{background: transparent}

	#container{
	  clear: both;
	  padding: 20px;

	}

	#container, .inner{
	  margin: 0 auto;
	  max-width:1020px;
	}
	
	.wide-content{
	float:none;
	margin: 0 auto;
	max-width: 1020px;
	padding: 0 20px;
	background:url(images/headerbg.jpg) repeat-x
	}

	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12{
	    float:left;
	    -webkit-box-sizing:border-box;
	    -moz-box-sizing:border-box;
	    box-sizing:border-box;
	}

	.col{
	  margin-left: 3.5%;
	}

	.col:first-child {
	  margin-left:0;
	}

	.span1{
	  width: 5.125%;

	}
	.span2{
	  width: 13.75%;

	}
	.span3{
	  width: 22.375%;

	}
	.span4{
	  width: 31%;

	}
	.span5{
	  width: 39.625%;

	}
	.span6{
	  width: 48.25%;

	}
	.span7{
	  width: 56.875%;

	}
	.span8, header .span8{
	  width: 65.5%;

	}
	.span9{
	  width: 74.125%;

	}
	.span10{
	  width: 82.75%;

	}
	.span11{
	  width: 91.375%;

	}
	.span12{
	  width: 100%;
	  margin-left: 0;
	  margin-bottom:0;
	}
	
	header .span8.col{ margin-left:3.5%}
	

/*** MAIN MENU - ESSENTIAL STYLES ***/
.menu-toggle{display:none;}

#menu-main-navigation{display:block;}

.srt-menu, .srt-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.srt-menu ul {
	position:		absolute;
	display:none;
	width:			12em; /* left offset of submenus need to match (see below) */
}
.srt-menu ul li {
	width:			100%;
}
.srt-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.srt-menu li {
	float:			left;
	position:		relative;
	margin-left:1px;
}
.srt-menu li li {
	margin-left:0px;
}
.srt-menu a {
	display:		block;
	position:		relative;
}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
	display:block;
	left:			0;
	top:			45px; /* match top ul list item height */
	z-index:		99;
	-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
}
ul.srt-menu li:hover li ul,
ul.srt-menu li.sfHover li ul {
	top:			-999em;
}
ul.srt-menu li li:hover ul,
ul.srt-menu li li.sfHover ul {
	left:			12em; /* match ul width */
	top:			0;
}
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
	top:			-999em;
}
ul.srt-menu li li li:hover ul,
ul.srt-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO1 SKIN ***/
#topnav, .srt-menu {
clear:both;
	float:none;
	margin: /*.35em*/.2em 0 0 0;
}
.srt-menu a {
	text-decoration:none;
}
.srt-menu li a {
	background:#777133;
	margin:0; 
	padding:9px 18px;
	height:auto;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	font-weight: bold;
	font-size:13px;
	
}
.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;	
}
.srt-menu li li a {
		border-top:		1px solid rgba(255,255,255,.2);
		background:		#333; /*fallback for old IE*/
		background:rgba(0,0,0,.6);
		color:	#fff;
		padding-left:20px;
		height:auto;
}
.srt-menu li li a:visited{color:#fff;}
.srt-menu li li li a,
.srt-menu li.current * li a{
	padding-left:20px;
	background:rgba(0,0,0,.6);
}

.srt-menu li:hover > a,
.srt-menu li.current a{ 
	color:#222;
	background:#d5cf95;
}
.srt-menu li li:hover > a{
	color:#fff;
	background:#0099ff;
}

}


// Micro Clearfix 

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

.clear{clear:both; display:block; margin:0; padding: 0}