body {background: #D5D5D5; font-family: Arial;}
#Wrapper {background: #F5F5EF; min-height: 700px;}

#Container {margin: 0 auto; padding: 40px 0 20px 0; width: 920px;}
#FooterContainer {background: #D5D5D5; height: 200px;}
footer#PrimaryFooter {margin: 0 auto; height: 150px; padding: 30px 0 20px 0; position: relative; width: 920px;}

header {float: none; display: block; width: auto;}
header h1 a {background: url(../images/wren-logo.gif) left top no-repeat; display: block; height: 122px; margin: 0 auto 40px; text-indent: -9999px; width: 89px;}

nav {border-bottom: 2px solid #000; border-top: 2px solid #000; height: 33px; margin-bottom: 40px; width: 920px;}
nav ul {margin: 10px auto 5px; width: 500px;}
nav ul li {height: 20px; margin: 0 40px 0 0; width: auto;}
nav ul li.contact {margin: 0;}
nav ul li a {color: #010000; font-size: 1.1em; line-height: 140%; height: 13px; font-weight: bold; text-decoration: none; text-transform: uppercase; display: inline;}
nav ul li a.active {border-bottom: 2px solid #010000; text-decoration: none;}

section#PrimaryContent {overflow: hidden; padding: 0 0 40px 0; width: 920px;}
section#PrimaryContent .scrollable {height: 450px; overflow: hidden; position: relative; width: 920px;}
section#PrimaryContent .scrollable .items {position: absolute; width: 20000em;}
section#PrimaryContent .scrollable li {display: inline; float: left;}
section#PrimaryContent header {margin: 0 0 40px 0;}
section#PrimaryContent, aside {font-family: Georgia;}
section#PrimaryContent p, aside p {font-size: 1.2em; letter-spacing: 1px; line-height: 180%; margin: 0 0 20px 0;}
section#PrimaryContent p a {color: #010000;}
section#PrimaryContent h1 {text-transform: uppercase; font-size: 2em; margin: 0 0 30px 0;}
section#PrimaryContent dl {font-size: 1.1em; letter-spacing: 1px; line-height: 180%; margin: 30px 0 20px 0; width: 385px;}
section#PrimaryContent dl dt {color: #919090; font-family: Arial; font-weight: bold; text-transform: uppercase; margin: 0 0 5px 0; width: 105px;}
section#PrimaryContent dl dd {margin: 0 0 5px 0; width: 280px;}

section#PrimaryContent.contact, aside.contact {display: inline; float: left; width: 624px;}
section#PrimaryContent.contact p {width: 468px;}
aside.contact {width: 296px;}
aside.contact a {border-bottom: 1px solid #666; color: #666; text-decoration: none;}
aside.contact a:hover {border-bottom: none;}

section#PrimaryContent.blog article {border-bottom: 1px solid #010000; padding: 20px 0;}
section#PrimaryContent.blog article.end {border: none;}
section#PrimaryContent.blog .content {}
section#PrimaryContent.blog .content .copy {width: 300px;}
section#PrimaryContent.blog .content .copy header {margin: 0 0 5px 0;}
section#PrimaryContent.blog .content .copy header h2 {font-size: 2em; line-height: 120%; margin: 0 0 5px 0; text-transform: uppercase;}
section#PrimaryContent.blog .content .copy header time {font-size: 1.2em;}
section#PrimaryContent.blog .content .copy header h2 a {color: #010000; text-decoration: none;}
section#PrimaryContent.blog .content .copy header h2 a:hover {}
section#PrimaryContent.blog .content .image {float: right; margin: 0; width: 430px;}
section#PrimaryContent.blog .content footer {font-size: 1.2em; letter-spacing: 1px; line-height: 180%;}
section#PrimaryContent.blog .content footer a {border-bottom: 1px solid #010000; color: #010000; text-decoration: none;}
section#PrimaryContent.blog .content footer a:hover {border: none;}
section#PrimaryContent.blog .content footer .social {}
section#PrimaryContent.blog .content footer .social li {height: 13px; margin: 0 5px 0 0;}
section#PrimaryContent.blog .content footer .social li a {background: url(../images/background-social-share.gif) left top no-repeat; border: none; display: block; text-indent: -9999px;}
section#PrimaryContent.blog .content footer .social li.email a {background-position: 0 0; width: 19px;}
section#PrimaryContent.blog .content footer .social li.facebook a {background-position: -33px 0; width: 12px;}
section#PrimaryContent.blog .content footer .social li.twitter a {background-position: -58px 0; width: 18px;}	

section#PrimaryContent.bicycles .lead {height: 440px; overflow: hidden;}
section#PrimaryContent.bicycles .lead a {background: url(../images/ajax-loader.gif) center center no-repeat #FFF; display: block; height: 440px; text-align: center;}
section#PrimaryContent.bicycles .secondary {margin: 40px 0 0 0;}
section#PrimaryContent.bicycles .secondary .copy {width: 385px;}	
section#PrimaryContent.bicycles .secondary .copy header {margin: 0 0 30px 10px;}
section#PrimaryContent.bicycles .secondary .copy header h2 {font-size: 2em; line-height: 120%; margin: 0 0 5px 0; text-transform: uppercase;}
section#PrimaryContent.bicycles .secondary .images {width: 530px;}
section#PrimaryContent.bicycles .secondary .images li {display: inline; margin: 0 0 10px 10px; overflow: hidden; width: 255px;}
section#PrimaryContent.bicycles .secondary .images li a {display: block; height: 212px;}

footer#PrimaryFooter section {font-size: 1.1em; margin: 0 12px 0 0; width: 144px;}
footer#PrimaryFooter section.forms {display: block; width: 190px;}
footer#PrimaryFooter section header {color: #010000; font-weight: bold; margin: 0 0 5px 0;}
footer#PrimaryFooter section div {color: #666; line-height: 140%;}
footer#PrimaryFooter section div span {color: #B1B0B0;}
footer#PrimaryFooter section ul {}
footer#PrimaryFooter section ul li {line-height: 140%;}
footer#PrimaryFooter section ul li a {color: #666; text-decoration: none;}
footer#PrimaryFooter section ul li a:hover {border-bottom: 1px solid #666;}
footer#PrimaryFooter section .search-form {margin: 0 0 20px 0;}
footer#PrimaryFooter section .search-form input#s {height: 13px; margin: 0 2px 0 1px; width: 125px;}
footer#PrimaryFooter section .search-form #searchsubmit {display: block; margin: 4px 0 0 0;}
footer#PrimaryFooter section.copyright {color: #B1B0B0; position: absolute; bottom: 20px; left: 0px; width: 600px;}


@media only screen and (min-width: 290px) {
	#Container {margin: 0 auto; padding: 10px 0 20px 0; position: relative; width: 100%;}
	header {display: inline; float: left; width: 140px;}
	header h1 a {background: url(../images/wren-logo.gif) left top no-repeat; display: block; height: 122px; margin: 0 10px 40px; text-indent: -9999px; width: 89px;}
	nav {border: none; display: inline; float: left; margin: 0 0 40px 0; width: 230px;}
	nav ul {margin: 10px auto 5px; width: 500px;}
	nav ul li {height: 25px; margin: 0 40px 0 0; width: 65px;}
	nav ul li.contact {margin: 0;}
	nav ul li a {color: #010000; font-size: 1.1em; line-height: 140%; height: 13px; font-weight: bold; padding: 3px 1px; text-decoration: none; text-transform: uppercase; display: block;}
	nav ul li a.active {text-decoration: underline; border: none;}
	nav ul li a:hover {text-decoration: underline; border: none;}

	section#PrimaryContent {overflow: hidden; padding: 0 0 40px 0; width: 100%; clear: both;}
	section#PrimaryContent h1 {margin-left: 10px;}
	section#PrimaryContent .scrollable {height: 450px; overflow: hidden; position: relative; width: 100%;}
	section#PrimaryContent .scrollable .items {position: absolute; width: 20000em;}
	section#PrimaryContent .scrollable li {display: inline; float: left; position: relative;}
	section#PrimaryContent header {width: 100%;}
	section#PrimaryContent p, aside p {margin: 0 0 20px 10px; width: 95%;}
	section#PrimaryContent p a {color: #010000;}
	section#PrimaryContent h1 {text-transform: uppercase; font-size: 2em; margin: 0 0 30px 0;}
	section#PrimaryContent dl {font-size: 1.1em; letter-spacing: 1px; line-height: 180%; margin: 30px 0 20px 10px; width: 385px;color: #919090; }
	section#PrimaryContent dl dt {font-family: Arial; font-weight: bold; text-transform: uppercase; margin: 0 0 5px 0; width: 105px;}
	section#PrimaryContent dl dd {margin: 0 0 5px 0; width: 280px;}

	section#PrimaryContent.bicycles .secondary .copy header {margin: 0 0 30px 10px;}

	section#PrimaryContent.shop header, section#PrimaryContent.shop .content {margin-left: 10px;}

	section#PrimaryContent.contact, aside.contact {width: 100%;}
	section#PrimaryContent.contact p {max-width: 468px; width: 95%;}

	section#PrimaryContent.blog .content .copy {width: 100%;}
	section#PrimaryContent.blog .content .copy header {margin: 0 0 5px 10px;}
	section#PrimaryContent.blog .content footer {margin: 0 0 20px 10px;}

	section#PrimaryContent.bicycles .secondary .copy {width: 100%;}	
	section#PrimaryContent.bicycles .secondary .images {width: 100%;}

	#FooterContainer {width: 100%; overflow: hidden;}
	footer#PrimaryFooter {padding: 30px 0 20px 10px; width: 370px; overflow: hidden;}			
	footer#PrimaryFooter section {margin: 0px; width: 92px;}
	footer#PrimaryFooter section.forms {display: none;}
	footer#PrimaryFooter section.copyright {color: #B1B0B0; position: relative; width: 360px; clear: both; padding: 30px 0 0 0; display: block;}
}

@media only screen and (min-width: 401px) {
	#Container {margin: 0 auto; padding: 40px 0 20px 0; width: 100%;}
	#FooterContainer {background: #D5D5D5; height: 200px; width: 100%;}
	footer#PrimaryFooter {margin: 0 auto; height: 150px; padding: 30px 0 20px 10px; position: relative; width: auto;}

	header {float: none; display: block; width: auto;}
	header h1 a {background: url(../images/wren-logo.gif) left top no-repeat; display: block; height: 122px; margin: 0 auto 40px; text-indent: -9999px; width: 89px;}

	nav {border-bottom: 2px solid #000; border-top:  2px solid #000; height: 33px; margin-bottom: 40px; width: 100%;}
	nav ul {margin: 10px auto 5px; width: 500px;}
	nav ul li {height: 20px; margin: 0 40px 0 0; width: auto;}
	nav ul li a {color: #010000; font-size: 1.1em; line-height: 140%; height: 13px; font-weight: bold; text-decoration: none; text-transform: uppercase; display: inline;}

	section#PrimaryContent.shop header, section#PrimaryContent.shop .content {margin-left: 10px;}
	section#PrimaryContent h1 {margin-left: 10px;}

	section#PrimaryContent.blog .content .copy {width: 100%;}
	section#PrimaryContent.blog .content .copy header {margin: 0 0 5px 10px;}
	section#PrimaryContent.blog .content .image {width: 430px; float: none; margin-left: 10px;}
	section#PrimaryContent.blog .content footer {margin: 0 0 20px 10px;}

	section#PrimaryContent.bicycles .secondary .copy {width: 100%;}	
	section#PrimaryContent.bicycles .secondary .copy header {margin: 0 0 30px 10px;}

	footer#PrimaryFooter section {font-size: 1.1em; margin: 0 0 0 0; width: 25%;}
	footer#PrimaryFooter section.forms {display: none; width: 190px;}
	footer#PrimaryFooter section.copyright {color: #B1B0B0; position: absolute; bottom: 20px; left: 10px; width: 90%;}
}

@media only screen and (min-width: 930px) {
	#Container {margin: 0 auto; padding: 40px 0 20px 0; width: 920px;}
	#FooterContainer {background: #D5D5D5; height: 200px;}
	footer#PrimaryFooter {margin: 0 auto; height: 150px; padding: 30px 0 20px 0; position: relative; width: 920px;}

	header {float: none; display: block; width: auto;}
	header h1 a {background: url(../images/wren-logo.gif) left top no-repeat; display: block; height: 122px; margin: 0 auto 40px; text-indent: -9999px; width: 89px;}

	nav {border-bottom: 2px solid #000; border-top:  2px solid #000; height: 33px; margin-bottom: 40px; width: 920px;}
	nav ul {margin: 10px auto 5px; width: 500px; display: inline; }
	nav ul li {height: 20px; margin: 0 40px 0 0; width: auto;}
	nav ul li.contact {margin: 0;}
	nav ul li a {color: #010000; font-size: 1.1em; line-height: 140%; height: 13px; font-weight: bold; text-decoration: none; text-transform: uppercase; display: inline;}
	nav ul li a:hover {border-bottom: 2px solid #010000; text-decoration: none;}
	nav ul li a.active, nav ul li a.active:hover {border-bottom: 2px solid #010000; text-decoration: none;}

	section#PrimaryContent {overflow: hidden; padding: 0 0 40px 0; width: 920px;}
	section#PrimaryContent .scrollable {height: 450px; overflow: hidden; position: relative; width: 920px;}
	section#PrimaryContent .scrollable .items {position: absolute; width: 20000em;}
	section#PrimaryContent .scrollable li {display: inline; float: left;}
	section#PrimaryContent h1 {margin-left: 0px;}			
	section#PrimaryContent p, aside p {margin-left: 0px;}

	section#PrimaryContent.contact, aside.contact {display: inline; float: left; width: 624px;}
	section#PrimaryContent.contact p {width: 468px;}
	aside.contact {width: 296px;}

	section#PrimaryContent.about {width: 498px;}

	section#PrimaryContent.blog .content .copy {width: 300px;}
	section#PrimaryContent.blog .content .copy header {margin: 0 0 5px 0;}
	section#PrimaryContent.blog .content .image {float: right; margin: 0; width: 430px;}
	section#PrimaryContent.blog .content footer {margin-left: 0px;}

	section#PrimaryContent dl {margin-left: 0px;}

	section#PrimaryContent.bicycles .lead {height: 440px; overflow: hidden;}
	section#PrimaryContent.bicycles .secondary {margin: 40px 0 0 0;}
	section#PrimaryContent.bicycles .secondary .copy {width: 385px;}	
	section#PrimaryContent.bicycles .secondary .copy header {margin: 0 0 20px 0;}
	section#PrimaryContent.bicycles .secondary .copy header h2 {font-size: 1.9em; line-height: 120%; margin: 0 0 5px 0; text-transform: uppercase;font-family: Stymie-Med;letter-spacing:0px;}
	section#PrimaryContent.bicycles .secondary .images {width: 530px;}
	section#PrimaryContent.bicycles .secondary .images li {display: inline; margin: 0 0 10px 10px; overflow: hidden; width: 255px;}
	section#PrimaryContent.bicycles .secondary .images li a {display: block; height: 212px;}
	
	section#PrimaryContent.bicycles .secondary .copy p a{background:#000;color:#D5D5D5;text-decoration:none;padding:6px 12px;}	

	footer#PrimaryFooter section {font-size: 1.1em; margin: 0 12px 0 0; width: 144px;}
	footer#PrimaryFooter section.forms {display: block; width: 190px;}
	footer#PrimaryFooter section header {color: #010000; font-weight: bold; margin: 0 0 5px 0;}
	footer#PrimaryFooter section div {color: #666; line-height: 140%;}
	footer#PrimaryFooter section div span {color: #B1B0B0;}
	footer#PrimaryFooter section ul {}
	footer#PrimaryFooter section ul li {line-height: 140%;}
	footer#PrimaryFooter section ul li a {color: #666; text-decoration: none;}
	footer#PrimaryFooter section ul li a:hover {border-bottom: 1px solid #666;}
	footer#PrimaryFooter section .search-form {margin: 0 0 20px 0;}
	footer#PrimaryFooter section .search-form input#s {height: 13px; margin: 0 2px 0 1px; width: 125px;}
	footer#PrimaryFooter section .search-form #searchsubmit {display: block; margin: 4px 0 0 0;}
	footer#PrimaryFooter section.copyright {color: #B1B0B0; position: absolute; bottom: 20px; left: 0px; width: 920px;}
}

/* WordPress Required Styles */
.aligncenter {display: block; margin-left: auto; margin-right: auto;}
.alignleft {float: left;}
.alignright {float: right;}
.wp-caption {border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
.wp-caption img {margin: 0; padding: 0; border: 0 none;}
.wp-caption-dd {font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0;}
.sticky {background: #f7f7f7; padding: 0 10px 10px;}
.sticky h2 {padding-top: 10px;}

/* Zoom Styles */
.zoomy{position: absolute; display: none; background-repeat: no-repeat; -webkit-box-shadow: 0px 3px 10px #000; -moz-box-shadow: 0px 3px 10px #000; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color='#3333333', Positive='true'); border: 1px solid #999; text-align: center; background-color: #FFF; z-index: 1000; overflow: hidden; cursor: move;}
.zoomBar{display: block; position: absolute;top: 10px; right: 10px; text-indent: -9999px; background: url(../images/zoom-in.gif) left top no-repeat; height: 18px; width: 18px;}
.zoomBar span{font-weight: bolder; color: #CCC;}
.zoomy img{margin-top: -10000px; margin-right: -10000px; opacity: 0; filter:alpha(opacity=0);}
.zoomy a{color: #333; text-decoration: none;}
.cursorHide{cursor: url(blank.gif), move;}

/* MailChimp */
#mc_signup_form .mc_input {height: 13px; margin: 0px 2px 2px; width: 125px!important;}
#mc_signup_form .mc_var_label {display: none;}
.mc_merge_var {display: inline; float: left; height: 25px; width: 130px;}
.mc_signup_submit {margin: 0px!important; padding: 0; text-align: left!important; width: 75px;}
.mc_signup_submit input {margin: 0 0 0 3px!important; padding: 0!important;}
.mc_error_msg {color: red!important;}
#mc_message span {display: block; width: 250px;}

.Stymie-Med { 
	font-family: Stymie-Med;
	font-weight: normal;
	font-style: normal;
}