/* ---------------------------------------------------------------------------

	Spot-A-Pup Screen Styles
	http://spotapup.com

--------------------------------------------------------------------------- */

/* RESET! */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, 
fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
fieldset, img, abbr, acronym { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }

/*  ---------------------------------------------------------------------------

	layout

--------------------------------------------------------------------------- */

body {
	font: small/1.75em Helvetica, Arial, Verdana, sans-serif;
	color: #333;
	background: #ebebeb url(../images/bg.gif) repeat-y top center;
	text-align: center;
}
	
#container {
	margin: 0 auto;
	width: 959px;
	text-align: left;
	background-color: #4fb66c;
}
	
#header {
	position: relative;
	padding: 0 30px;
	background-color: #5dd37d;
	border-bottom: 10px solid #519969;
}
	
#content {
	background: #fff url(../images/swirls_top.gif) no-repeat 0 0;
}

#content_inside {
	padding: 30px;
	background: url(../images/swirls_bottom.gif) no-repeat bottom left;
}
	
#content_main {
	float: left;
	width: 609px;
}

#steps {
	float: right;
	margin-bottom: 30px;
	width: 407px;
}

#testimonials {
	float: left;
	margin-bottom: 30px;
	width: 171px;
}

#content_secondary {
	float: right;
	margin-bottom: 30px;
	padding-top: 45px;
	width: 249px;
}
	

/* ---------------------------------------------------------------------------
	
	=links

--------------------------------------------------------------------------- */

a { outline:none; }

a:link { color: #e97f7e; }
	
a:visited { color: #666; }
	
a:hover { color: #d7be00; }

a:active { outline:none; }

a:focus { outline:none; }

/* ---------------------------------------------------------------------------
	
	=typography

--------------------------------------------------------------------------- */

h1 {
	margin-bottom: 15px;
	height: 28px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: 0 0;
}

body.home h1 { background-image: url(../images/title_home.gif); }
body.find h1 { background-image: url(../images/title_find.gif); }
body.breeds h1 { background-image: url(../images/title_breeds.gif); }
body.info h1 { background-image: url(../images/title_info.gif); }
body.help h1 { background-image: url(../images/title_help.gif); }
body.about h1 { background-image: url(../images/title_about.gif); }
body.support h1 { background-image: url(../images/title_support.gif); }
body.contact h1 { background-image: url(../images/title_contact.gif); }

h2 {
	margin-bottom: 5px;
	font-size: 180%;
	font-weight: bold;
	color: #5cabe8;
}

h3 {
	margin-bottom: 10px;
	font-size: 150%;
	font-weight: bold;
	color: #fa8822;
}

h4 {
	margin-bottom: 5px;
	font-size: 130%;
	font-weight: bold;
	color: #ef7b85;
}

p { margin-bottom: 25px; }

#content_main p { line-height: 1.5em; }

blockquote {
	margin-bottom: 12px;
	padding-bottom: 14px;
	background: url(../images/dash.gif) repeat-x bottom left;
}

cite {
	display: block;
	margin-bottom: 12px;
	padding-bottom: 4px;
	border-bottom: 5px solid #c7c7c7;
	color: #222;
	font-weight: bold;
	font-style: normal;
}

cite span.loc {
	position: relative;
	top: -5px;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight: normal;
	color: #b0a588;
}

/* ---------------------------------------------------------------------------
	
	=lists

--------------------------------------------------------------------------- */

ul {
	margin: 0 0 30px 30px;
}

li {
	margin-bottom: 5px;
}

/* ---------------------------------------------------------------------------
	
	=images

--------------------------------------------------------------------------- */	
/* ---------------------------------------------------------------------------
	
	=logo

--------------------------------------------------------------------------- */

#logo {
	float: left;
	width: 406px;
	height: 97px;
	background: url(../images/logo_screen.gif) no-repeat 0 0;
}

#logo img {
	position: absolute;
	top: 0;
	left: -9999px;
}

#logo a {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------------------
	
	=utility navigation

--------------------------------------------------------------------------- */

#nav_util {
	position: absolute;
	top: 15px;
	right: 42px;
	margin: 0;
}

#nav_util li {
	display: inline;
	margin-left: 6px;
	padding-left: 13px;
	background: url(../images/nav_util_bullet.gif) no-repeat 0 50%;
}

#nav_util #util_help {
	margin-left: 0;
	padding-left: 0;
	background-image: none;
}

#nav_util li a:link, #nav_util a:visited {
	color: #444b32;
	text-decoration: none;
}

#nav_util li a:hover {
	color: #fff;
	text-decoration: underline;
}

#nav_util li.here a:link, 
#nav_util li.here a:visited, 
#nav_util li.here a:hover {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
	
	=navigation

--------------------------------------------------------------------------- */

#nav {
	float: right;
	margin-bottom: 0;
	padding-top: 47px;
	width: 454px;
	list-style: none;
}

#nav li {
	float: left;
	height: 30px;
	text-indent: -9999px;
}

#nav li a {
	display: block;
	width: 100%;
	height: 100%;
}

#nav #nav_home, #nav #nav_home a {
	width: 71px;
	background: url(../images/nav_home.gif) no-repeat 0 0;
}

#nav #nav_find, #nav #nav_find a {
	width: 118px;
	background: url(../images/nav_find.gif) no-repeat 0 0;
}

#nav #nav_breeds, #nav #nav_breeds a {
	width: 89px;
	background: url(../images/nav_breeds.gif) no-repeat 0 0;
}

#nav #nav_info, #nav #nav_info a {
	width: 175px;
	background: url(../images/nav_info.gif) no-repeat 0 0;
}

/* hover states */

#nav #nav_home a:hover, 
#nav #nav_find a:hover, 
#nav #nav_breeds a:hover, 
#nav #nav_info a:hover {
	background-position: 0 -60px;
}

#nav #nav_home.here a,
#nav #nav_home.here a:link, 
#nav #nav_home.here a:visited, 
#nav #nav_home.here a:hover,
#nav #nav_find.here a,
#nav #nav_find.here a:link, 
#nav #nav_find.here a:visited, 
#nav #nav_find.here a:hover,
#nav #nav_breeds.here a,
#nav #nav_breeds.here a:link, 
#nav #nav_breeds.here a:visited, 
#nav #nav_breeds.here a:hover,
#nav #nav_info.here a,
#nav #nav_info.here a:link, 
#nav #nav_info.here a:visited, 
#nav #nav_info.here a:hover {
	background-position: 0 -30px;
}

/* ---------------------------------------------------------------------------
	
	=content main

--------------------------------------------------------------------------- */

#intro p {
	margin-bottom: 50px;
	font-size: 120%;
}

#intro strong { color: #000; }

.column {
	float: left;
	margin-right: 2%;
	width: 31%;
}

#column_left {
	float: left;
	width: 45%;
}

#column_right {
	float: right;
	width: 45%;
}

/* ---------------------------------------------------------------------------
	
	=content secondary

--------------------------------------------------------------------------- */

.callout { margin-bottom: 30px; }

.callout, .callout h4 {
	width: 249px;
	height: 154px;
	text-indent: -9999px;
}

.callout a {
	display: block;
	width: 100%;
	height: 100%;
}

#callout_breeds, #callout_breeds a { background: url(../images/callout_breeds.jpg) no-repeat 0 0; }

#callout_shelter, #callout_shelter a { background: url(../images/callout_shelter.jpg) no-repeat 0 0; }

#callout_support, #callout_support h4, #callout_support a {	height: 61px; }

#callout_support, #callout_support a { background: url(../images/callout_support.gif) no-repeat 0 0; }

#callout_breeds a:hover, #callout_shelter a:hover { background-position: 0 -154px; }

#callout_support a:hover { background-position: 0 -61px; }

#callout_facebook, #callout_facebook a  { background: url(../images/facebookbadge.gif) no-repeat 50% 0; height:50px;}

/* sponsor ads */

#ads {
	font-weight: bold;
	font-size: 90%;
}

#ads img {
	border: 1px solid #999;
}

#ads a:link, #ads a:visited {
	color: #d7be00;
	text-decoration: none;
}
	
#ads a:hover {
	color: #e97f7e;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
	
	=foot

--------------------------------------------------------------------------- */

#foot {
	clear: both;
	padding: 20px 30px;
	background-color: #5dd37d;
	border-top: 10px solid #4fb66c;
	font-size: 90%;
	color: #fff;
}

/* foot info */

#foot p {
	float: right;
	width: 35%;
	text-align: right;
}

#foot p a:link, #foot p a:visited {
	color: #fff;
	text-decoration: underline;
}

#foot p a:hover {
	color: #444b32;
	text-decoration: underline;
}

/* foot nav */

#foot ul {
	float: left;
	margin: 0;
	width: 65%;
	list-style: none;
}

#foot ul li {
	display: inline;
	margin-left: 6px;
	padding-left: 13px;
	background: url(../images/nav_util_bullet.gif) no-repeat 0 50%;
}

#foot ul li.first {
	margin-left: 0;
	padding-left: 0;
	background-image: none;
}

#foot ul #util_help {
	margin-left: 0;
	padding-left: 0;
	background-image: none;
}

#foot ul li a:link, #foot ul a:visited {
	color: #444b32;
	text-decoration: none;
}

#foot ul li a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
	
	=home

--------------------------------------------------------------------------- */

/* how it works feature */

#steps h2 {
	margin-left: 38px;
	width: 200px;
	height: 28px;
	text-indent: -9999px;
	background: url(../images/title_steps.gif) no-repeat 0 0;
}

#steps ol {
	width: 407px;
	height: 460px;
	list-style: none;
	background: url(../images/steps.gif) no-repeat 0 0;
}

#steps ol li {
	position: absolute;
	top: 0;
	left: -9999px;
}

#btn_started { float: right; }

#btn_started, #btn_started a {
	width: 226px;
	height: 27px;
	text-indent: -9999px;
	background: url(../images/btn_started.gif) no-repeat 0 0;
}

#btn_started a { display: block; }

#btn_started a:hover {
	background-position: 0 -27px;
}

/* success stories */

#testimonials {
	padding-top: 28px;
	color: #696969;
	text-align: center;
}

#testimonials h3 {
	margin-bottom: 15px;
	width: 171px;
	height: 28px;
	text-indent: -9999px;
	background: url(../images/title_sub_testimonials.gif) no-repeat 0 0;
}

#testimonials p { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
	
	=find a dog

--------------------------------------------------------------------------- */

body.checklist #content_main {
	float: none;
	width: auto;
}

body.checklist #column_left h2, body.checklist #column_right h2, body.checklist div.column h2 {
	margin-bottom: 10px;
}

body.checklist #column_left ul, body.checklist #column_right ul, body.checklist div.column ul {
	margin-left: 2px;
	list-style: none;
}

body.checklist #column_left label, body.checklist #column_right label, body.checklist div.column label {
	padding: 6px 10px;
	background-color: transparent;
}

#state_select { margin-bottom: 20px; }

#form_end {
	clear: both;
}

/* ---------------------------------------------------------------------------
	
	=find » results

--------------------------------------------------------------------------- */

body.results #content_main {
	float: none;
	width: auto;
}

body.results h1 { background-image: url(../images/title_results.gif); }

body.results h2 { margin-bottom: 20px; }

#found_dogs {
	float: left;
	width: 625px;
}

#found_breeds {
	float: right;
	width: 625px;
}

div.dog {
	margin-bottom: 30px;
	padding-bottom: 30px;
	background: url(../images/dash.gif) repeat-x bottom left;
}

div.dog_info {
	margin-bottom: 10px;
	padding-bottom: 5px;
	background: url(../images/dash.gif) repeat-x bottom left;
}

.dog_info a, .dog_info a:link, .dog_info a:visited,
td.preview a, td.preview a:link, td.preview a:visited {
		color:#e97f7e;
}

div.dog h3 {
	padding-top: 10px;
	font-size: 140%;
}

div.dog_info h2 {
		margin-bottom:5px;
}

div.thumb {
	float: left;
	margin-bottom: 20px;
	padding: 4px 0;
	width: 108px;
	height: 150px;
}

td.thumb {
	padding: 4px 6px 4px 0;
	vertical-align:top;
}

div.dog_info td.thumb {
		padding:0;
		width:150px;
		text-align:center;
}

div.thumb img, td.thumb img {
	margin-bottom: 0;
	padding: 4px;
	border: 1px solid #c7c7c7;
}

div.thumb .imgholder, td.thumb .imgholder {
	margin-bottom: 0;
	height:100px;
	width:100px;
	padding:5px;
}

td.preview {
		height:145px;
		width:165px;
		vertical-align:top;
		text-align:center;
		background: url(../images/dash.gif) repeat-x bottom left;
}

td.preview img {
	margin-bottom: 0;
	padding: 4px;
	border: 1px solid #c7c7c7;
}

div.dog_name_details {
	float: right;
	margin-bottom: 20px;
	width: 280px;
}

td.dog_name_details {
vertical-align:top;
padding:0px 10px 0 0;
}

td.dog_name_details h3{
	font-weight: bold;
	color: #000;
	font-size: 110%;
}

td div.dog_traits {
color:#666666;
font-size:90%;
line-height:1.2em;
}

.trait {
white-space:nowrap;
}

ul.dog_info {
	margin-bottom: 0;
	font-size: 90%;
	color: #666;
	line-height: 1.2em;
}

ul.dog_info strong { color: #000; }

ul.dog_info li {
	margin-bottom: 8px;
	margin-left:-20px;
	list-style-image:none;
	list-style-type:none;
}

div.dog div.dog_catgories {
	clear: both;
	padding-left: 134px;
}

div.dog div.dog_catgories p { margin-bottom: 0; }

div.dog div.dog_catgories p strong {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight: normal;
	font-style: italic;
}

div.dog div.dog_catgories a:link, div.dog div.dog_catgories a:visited {
	color: #fa8822;
	text-decoration: none;
}

div.dog div.dog_catgories a:hover {
	color: #d7be00;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
	
	=find » more
	
	overrides general listing styles

--------------------------------------------------------------------------- */

div.dog_details h2 {
	margin-bottom: 20px;
	padding-top: 10px;
}

div.thumb a {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight: normal;
	font-style: italic;
}

div.dog_about {
	clear: both;
}

div.dog_about h3, 
div.dog_pics h3,
div.dog_shelter h3 {
	margin-bottom: 15px;
	padding: 4px 6px;
	background-color: #e8cd00;
	text-transform: uppercase;
	color: #fff;
	font-size: 110%;
}

div.dog_traits h3 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight: normal;
	font-style: italic;
	color: #000;
	font-size: 120%;
}

div.dog_pics img {
	margin-bottom: 10px;
	padding: 4px;
	border: 1px solid #c7c7c7;
}

div.dog_shelter {
	color: #000;
	background-color: #ebebeb;
}

div.dog_shelter h4 {
	padding: 0 20px;
	color: #000;
	font-size: 120%;
}

div.dog_shelter p {
	font-size: 110%;
	padding: 0 20px 20px 20px;
}

/* ---------------------------------------------------------------------------
	
	=breeds

--------------------------------------------------------------------------- */


body.breeds h2 { margin-bottom: 20px; }

div.breed {
	margin-bottom: 30px;
	padding-bottom: 30px;
	background: url(../images/dash.gif) repeat-x bottom left;
}

div#breedDropdown {
	margin-bottom: 5px;
	padding-bottom: 10px;
	background: url(../images/dash.gif) repeat-x bottom left;	
}

div.breed h2 {
	padding-top: 10px;
	font-size: 140%;
}

div.thumb {
	float: left;
	margin-bottom: 20px;
	padding: 4px 0;
	width: 108px;
}

div.thumb img {
	margin-bottom: 0;
	padding: 4px;
	border: 1px solid #c7c7c7;
}

div.breed_name_details {
	float: right;
	margin-bottom: 20px;
	width: 475px;
}

ul.breed_info {
	margin-bottom: 0;
	font-size: 90%;
	color: #666;
	line-height: 1;
}

ul.breed_info strong { color: #000; }

ul.breed_info li {
	margin-bottom: 8px;
}

div.breed div.breed_catgories {
	clear: both;
	margin-bottom:20px;
	color: #666;
}

div.breed div.breed_catgories p { margin-bottom: 0; }

div.breed div.breed_catgories p strong {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight: normal;
	font-style: italic;
	color: #000;
}

div.breed div.breed_catgories a:link, div.breed div.breed_catgories a:visited {
	color: #fa8822;
	text-decoration: none;
}

div.breed div.breed_catgories a:hover {
	color: #d7be00;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
	
	=forms

--------------------------------------------------------------------------- */

label {
	font-size: 105%;
	font-weight: bold;
	color: #000;
}

label span {
	font-size: 80%;
	color: #999;
}

input, textarea {
	font-size: 110%;
	padding: 4px 6px;
}

input.full { width: 65%; }

textarea.full { width: 85%; }

form dl dd { padding-bottom: 6px; }

form dl dd hr { display: none; }

div.message {
	margin-bottom: 15px;
	padding: 15px 5px 5px 5px;
	background-color: #d7be00;
	color: #000;
}

div.message ul {
	margin-bottom: 0;
	line-height: 1;
}

div.message li {
	margin-bottom: 10px;
}

div.message li span { font-weight: bold; }

/* ---------------------------------------------------------------------------
	
	=misc

--------------------------------------------------------------------------- */

/* ads */

.ad_holder { margin-bottom: 25px; }

.ad_holder p { margin-bottom: 5px; }

textarea.ad_box { width: 457px; }

img.ad_example {
	clear: both;
}

/* clearing help */

#header:after,
#content_inside:after,
#foot:after, 
div.dog:after,
div.breed:after {
    content: "."; 
    display: block; 
    height: 0;
    clear: both; 
    visibility: hidden;
}

.clear { clear: both; }

#found_dogs .pageLinks {
border:1px solid #CCC;
}

.pageLinks {
  margin-top: 2px;
  margin-bottom: 8px;
  background-color: #FFF;
  text-align: center;
  padding: 8px 8px;
}

.pageLinks a, .pageLinks a:visited, .pageLinks a:active {
  padding:0 4px 1px;
  color: #666;
  margin: 0 4px;
}
	
.pageLinks a:hover {
  background-color: #EEE;
}

.pageLinksActive {
  font-weight: bold;
  background-color: #EEE;
  text-decoration: none;
  padding:0 4px 1px;
}

.errorContainer {
width:300px;
padding:12px;
text-align:center;
margin-left:auto;
margin-right:auto;
border:4px solid #519969;
background-color:#FFF;
}

form.inlineform input, form.inlineform textarea, form.inlineform select {
font-size:90%;
padding:2px 3px;
}

form.inlineform input.inlinesubmit {
background:#e97f7e;
border:0px solid;
color: #FFF;
cursor:pointer;
font-weight:bold;
letter-spacing:.5px;
text-transform:uppercase;
font-family: Helvetica,Arial,Verdana,sans-serif;
}

input.linkButton {
background:none;
border:0;
color:#666;
padding:0;
border-bottom:1px dashed #666;
outline:none;
cursor:pointer;
}

input.linkButton:hover {
color: #d7be00;
border-bottom:1px dashed #d7be00;
cursor:pointer;
}

input.bigButton {
background:#E2C700;
border:0px solid;
color: #FFF;
cursor:pointer;
font-weight:bold;
letter-spacing:.75px;
text-transform:uppercase;
font-family: Helvetica,Arial,Verdana,sans-serif;
font-size:1.25em;
padding:10px;
border:.5px solid #CCC;
}