html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{/* remember to define focus styles! */ outline:0;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,
q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a img{border:0;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block;}



body{
	margin:0;
	font:18px/22px 'Archivo Narrow',Helvetica,Arial,sans-serif;
	color:#444;
}

h1,h2,h3 {
	font-family: 'Amatic SC',sans-serif;
	color: #dd1e1e;
	text-align: center;
	line-height:1;
}
h1{ font-size:4em; margin:0 0 28px;}
h2{ font-size:4em; margin:0 0 28px;}
h3{ font-size:2em; }
		
p{ margin:0 0 1em; }
		
.smallTxt{ font-size:12px; }
		
a{ color:#dd1e1e; }
		
img{ max-width:100%; border:none; }
		
section,footer{ padding:30px 0; }
		
#container{
	position:relative;
	margin:0 auto;
}

.wrap{ width:600px; margin:0 auto; }

hr.stitches{
	position:absolute;
	left:0;
	border-style:none; border-width:0;
	margin:-7px 0 0;
	background:transparent url('../images/stitches.png') repeat-x top center;
	width:100%; height:14px;
	z-index:99;
}

hr.stitches.white{ background-image:url('../images/stitches_white.png') }
hr.stitches.red{ background-image:url('../images/stitches_red.png') }

.ie7 hr.stitches{ display: none; }

h2:before,h2:after{
	content: '';
	display: inline-block;
	width: 42px;
	height: 46px;
	background: 
	transparent url('../images/stitches.png') repeat-x left center;
	margin: 0 12px;
}

.readmore{
	font-family: 'Amatic SC',sans-serif;
	font-size:24px;
	text-align:center;
	text-transform:uppercase;
}
.readmore a{ border-style:none; }


#topnav{
	background-color:#52d4ed;
	background-image:-webkit-linear-gradient(bottom, #3dc7e9 0%, #64e1f1 100%);
}

#topnav ul{ text-align:center; margin:0 auto; }
#topnav li{ display:inline-block; }

.ie7 #topnav li{ display:inline; }

#topnav a {
	color: #fff;
	font-family: 'Amatic SC',sans-serif;
	font-size: 28px;
	display: block;
	padding: 14px 20px 22px;
	text-shadow:1px 1px 2px rgba(0,0,0,0.4);
	border-style:none;
	text-decoration: none;
}
#topnav a:hover, #topnav a.on{ background-color:#4eb3c4; }

#topnav.stick{
	position:fixed;
	z-index:9999;
	width:100%;
	box-shadow:0 0 8px #333;
	-webkit-text-stroke:1px;
}

#topnav.stick ul{
	width:100%;
	background:transparent url('../images/stitches.png') center 50px repeat-x;
	-webkit-font-smoothing:antialiased;
}


#logo{ text-align:center; position:relative }
#title{
	position:absolute;
	top:-12px; left:0;
	width:600px; height:165px;
	background:transparent url('../images/title.png') no-repeat top center;
	text-indent:-9999px;
	z-index:999;
}
.ie7 #title{ top:0; }
#bot{ position:absolute; top:30px; left:70px; }

#subtitle{
	position:absolute;
	top:400px; left:0;
	width:600px; height:119px;
	background:transparent url('../images/sub-title.png') no-repeat top center;
	text-indent:-9999px;
}

#branding{
	position:relative;
	height:530px;
	background-color:#d3eb37;
	background-image: -o-linear-gradient(-90deg, #F0FF4B 0%, #99C700 100%);
	background-image: -moz-linear-gradient(-90deg, #F0FF4B 0%, #99C700 100%);
	background-image: -webkit-linear-gradient(-90deg, #F0FF4B 0%, #99C700 100%);
	background-image: -ms-linear-gradient(-90deg, #F0FF4B 0%, #99C700 100%);
	background-image: linear-gradient(-180deg, #F0FF4B 0%, #99C700 100%);
	background-position:top left;
	background-repeat:repeat;	
}

#about,#policies,#fullBot{ background:#fff url('../images/white_texture.png') top center; }
#about h2:before, #about h2:after,
#policies h2:before, #policies h2:after,
#fullBot h2:before, #fullBot h2:after{ background-image:url('../images/stitches_red.png'); }

#gallery{ background:#3fc9ec url('../images/blue_crosshatch.png') top center; }
#gallery h2{ color:#ffffff; }
#gallery .readmore a{ color:#003547; }
#gallery h2:before, #gallery h2:after{ background-image:url('../images/stitches_white.png'); }

.galleryEntry{
	color:#003547;
	margin-top:50px; min-height: 300px;
	background:#fff url('../images/white_texture.png') top center;
	border-radius: 4px;
	box-shadow: 0 0 4px #333;
	padding: 20px 40px 20px 20px;
}
.galleryEntry h3{ text-align:left; font-size:42px;}

.galleryEntry img{
		width: 260px;
		border-radius: 4px;
		float: left;
		-webkit-transform: rotate(-12deg) translateY(-20px) translateX(-30px);
		-moz-transform: rotate(-12deg) translateY(-20px) translateX(-30px);
		transform: rotate(-12deg) translateY(-20px) translateX(-30px);
		box-shadow:0 0 6px #333;
	}


#ordering{ background:#004d67 url('../images/blue_circles.png') center top; color:#fff; text-align:center; }
#ordering .wrap{ position: relative; }
#ordering h2{ color:#fff; }
#ordering h2:before, #ordering h2:after{ background-image:url('../images/stitches_white.png'); }
#ordering a{ color:#fff; }

#ordering h3{ color:#fff; font-size:36px; }

#priceBadge{
	position:absolute;
	top:-40px;right:-40px;
	width:149px; height:149px;
	background:transparent url('../images/price_badge.png') no-repeat;
	text-indent: -9999px;
	z-index: 999;
}

#adoptGallery{ margin-bottom:10px; margin-top: 20px; text-align: center; }

.photogrid li{
	display:inline-block;
	background-color:#fff;
	color:#dd1e1e;
	margin:5px;
	padding:10px;
	width:165px;
	border-radius:2px;
	box-shadow:0 0 4px #333;
}

.ie7 .photogrid li{ display: inline; }

.photogridli:hover{
	-webkit-transform:rotate(0deg) !important;
	-moz-transform:rotate(0deg) !important;
	transform:rotate(0deg) !important;
}
.photogrid a{ color:#de1f1f; }

#botView #fullBot{ border-radius: 8px; box-shadow: 0 0 8px #333; }

#fullBot .wrap{ width:760px;}

#fullBot .botThumb {
  float: right;
  margin-left: 20px;
  width: 340px;
  background-color: #fff;
  padding:10px;
  box-shadow: 0 0 8px #333;
}

#fullBot #priceBadge{
	top:auto;
	right:auto;
	margin:-80px 0 0 680px;
}


.adoptLink {
	display: inline-block;
	background:#dd1e1e url("../images/glyphicons_075_stroller_white.png") no-repeat 8px center;
	background-image:url("../images/glyphicons_075_stroller_white.png"),-webkit-linear-gradient(#f70b0b 0%, #cb1111 100%);
	background-image:url("../images/glyphicons_075_stroller_white.png"),-moz-linear-gradient(#f70b0b 0%, #cb1111 100%);
	background-image:url("../images/glyphicons_075_stroller_white.png"),linear-gradient(#f70b0b 0%, #cb1111 100%);
	background-repeat: no-repeat, repeat-x; 
	background-position: 8px center,top left;
	border-radius: 8px 8px 8px 8px;
	color: #FFFFFF;
	font-family: 'Amatic SC';
	font-size: 36px;
	line-height: 1;
	margin-bottom: 16px;
	padding: 8px 16px 8px 42px;
	text-decoration: none;
	border:1px solid #800317;
	box-shadow: 0 0 6px #333;
}

.adoptLink:hover{ box-shadow: inset 0 0 6px #333; }
.adoptLink:active{ -webkit-transform: translate(1px,2px); -moz-transform: translate(1px,2px); transform: translate(1px,2px); }

.dialogClose{
	background:transparent url("../images/close_button.png") no-repeat;
	border-style:none;
	height: 64px; width: 64px;
	left: -26px; top: -26px;
	position: absolute;
	text-align: left;
	text-indent: -9999px;
	cursor:pointer;
}

#contact{ background:#f34a0f url('../images/orange_lines.png'); color:#fff; text-align:center; }
#contact h2, #contact a{ color:#fff; }
#contact h2:before, #contact h2:after{ background-image:url('../images/stitches_white.png'); }

#lightbox{ margin-top:-50px; }


#gears{ position:absolute; width:800px; height:530px; left:50%; margin-left:-400px; overflow:hidden; }
.gear{
	width:500px; height:500px;
	position:absolute;
	-webkit-animation: spin 12s infinite;
	-moz-animation: spin 12s infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	transform-origin: center;
}

.gear img{ width:100%; }

#gear1{top:-110px; left:1px;}
#gear2{ top:-15px; left:480px; width:250px; height:250px; opacity: 0.3; -moz-opacity: 0.3; filter:alpha(opacity=30); }
#gear3{ top:190px; left:40px; width:340px; height:340px; opacity: 0.3; -moz-opacity: 0.3; filter:alpha(opacity=30); }
#gear4{ top:190px; left:370px; width:400px; height:400px; }

.ie7 .gear{ margin-left:-200px; }

.gear.back{
	-webkit-animation: spinback 12s infinite;
	-moz-animation: spinback 12s infinite;	
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
}
		
	@-webkit-keyframes spin{
		0% { -webkit-transform:rotate(0deg); }
		100%{ -webkit-transform:rotate(360deg); }
	}

	@-moz-keyframes spin{
		0% { -moz-transform:rotate(0deg); }
		100%{ -moz-transform:rotate(360deg); }
	}

	@-webkit-keyframes spinback{
		0% { -webkit-transform:rotate(360deg); }
		100%{ -webkit-transform:rotate(0deg); }
	}

	@-moz-keyframes spinback{
		0% { -moz-transform:rotate(360deg); }
		100%{ -moz-transform:rotate(0deg); }
	}



/* media queries */

@media only screen and (max-width: 600px) {
 
 	h2:before, h2:after { display:none; }
 
	.wrap,#fullBot .wrap{ width:90%; padding:0 5%; }
	#branding,#gears{ height:430px; }
	#title,#subtitle{ width:320px; left:50%; margin-left: -160px; background-size:100%; }
	#subtitle{ top:300px; }
	#bot{ position:relative; left:auto; width:320px; }

	#gallery .galleryEntry img{ float:none;
		-webkit-transform: translate(10px, -20px) rotate(-12deg);
		-moz-transform: translate(10px, -20px) rotate(-12deg);
		transform: translate(10px, -20px) rotate(-12deg);
	}
	.galleryEntry h3, .galleryDesc{ margin-left:0; }
	
	#priceBadge{ position: relative; top:auto; right: auto; float: right;}
	
	#adoptGallery li{ width:90%; }

}

@media only screen and (max-width: 320px) {
	#topnav ul{ padding-bottom: 15px; }
	#topnav a{ padding:10px 20px 15px; }
	#gears{ width:320px; margin-left:-160px; }
	#gear1{ left:-150px; top:-30px; }
	#gear2{ left:150px; }
	#gear3{ left:60px; top:0; }
}

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

