/**********************************************************************************************

	Title: CSS
	Author: Blake Hilscher of skywidedesign.ca
	Date: 2010

***********************************************************************************************
	
	1. General Elements
	
	2. Layout
		2.1 Header
		2.2 Footer
		2.3 Forms
		
	3. Buttons & Icons
		3.1 Buttons
		
***********************************************************************************************/


/* 1. General Elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
	
	html {
		background:#eeeeee;
	}
	body {
		font-family: Georgia, Arial, Helvetica, Verdana, sans-serif;
		color:#747679;
		font-size: 12px;
		line-height:16px;
	}

	hr { 
		display: none;
	}
	
	strong {
		font-weight: bold;
	}
		
	em {
		font-style: italic;
	}
	
	address {
		font-style: normal;
	}
	
	input, textarea, select {
		font: 1em Verdana, Arial, sans-serif;
	}
	
	a {
		color:#0076a3;
		text-decoration: underline;
	}
	a:hover {
		color: #f68428;
		text-decoration: underline;
	}
		a.color-orange:hover{
			color:#0076a3;
		}

	a:visited {}

	a:active {}
	
	p {
		margin:0px 0px 12px 0px;
	}
		.small{
			font-size:10px;
		}
		p.small{
			margin-bottom:10px;
		}
		p.last {
			margin-bottom:0px;
		}
	
	.float_left{
		float:left;
	}
		h2.float_left{
			margin-right:14px;
		}
	.float_right{
		float:right;
	}
	
	h1 {
		font-family:arial;
		color:#f68428;
		font-size:24px;
		font-weight:bold;
		line-height:24px;
		margin-bottom:10px;
		letter-spacing:-1px;
	}
	
	h2 {
		font-family:arial;
		color:#f68428;
		font-size:20px;
		font-weight:bold;
		line-height:20px;
		margin-bottom:10px;
		letter-spacing:-1px;
	}

	h3 {
		font-family:arial;
		color:#f68428;
		font-size:16px;
		font-weight:bold;
		line-height:20px;
		margin-bottom:10px;
		letter-spacing:-1px;
	}
	
	h4 {
		font-family:Arial, Verdana;
		color:#777471;
		font-size:12px;
		font-weight:bold;
		line-height:18px;
	}
	
	.margin_left{
		margin-left:10px;
	}
	
	.margin_right{
		margin-right:10px;
	}
	
	.margin_bottom{
		margin-bottom:6px;
	}
	
	.color-red{
		color:red;
	}
	
	.color-black{
		color:black;
	}
	
	.color-green{
		color:#a9b93c;
	}
	
	.color-orange{
		color:#f68428;
	}
	
	.color-blue{
		color:#37bcdf;
	}	
	
	.color-brown{
		color:#663700;
	}
	
	.color-gray{
		color:#e9e8e8;
	}
	
	.no_margin{
		margin: 0px;
	}
	
	.clearer{
		clear:both;
	}
	
/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

#container {
	margin: 0 auto;
	margin-top:15px;
	width:972px;
	text-align: left;
}

#store_container{
	margin: 0 auto;
	margin-top:15px;
	width:1026px;
	text-align: left;
}

#content{
	position:relative;
	overflow:hidden;
	margin-top:22px;
	margin-bottom:40px;
	z-index:0;
}
	#content hr{
		border:0px;
		display:block;
		margin:14px 0px 14px 0px;
		color: #dddddd;
		background-color: #dddddd;
		height: 1px;
	}
	
#store_content{
	width:1026px;
	padding-top:20px;
	margin-bottom:60px;
	background:url(../images/content/bg-store_top.png) top left no-repeat;
}
	#store_content #content{
		margin:0px;		
		background-color:white;
	}

.column{
	float:left;
}

.ad-box{
	text-align:center;
	margin-bottom:16px;
}

.row{
	overflow:hidden;
	margin-bottom:20px;
	width:100%;
	display:block;
	background:url(../images/content/bg-column_top_left.png) top left no-repeat;
}

	.row .header{
		display:block;
		height:15px;
		margin-left:15px;	
		background:url(../images/content/bg-column_top_right.png) top right no-repeat;	
	}
	
	.row .content {
		overflow:hidden;
		background:url(../images/content/bg-column_right.png) top right repeat-y #f5f5f5;
	}
		.row .content .border{
			overflow:hidden;
			text-align:left;
			padding:0px 10px 0px 10px;
			background:url(../images/content/bg-column_left.png) top left repeat-y;			
		}
		.row .content .padding{
			padding:8px 20px 8px 20px;	
		}
		
	.row .footer{
		clear:both;
		display:block;
		height:15px;
		background:url(../images/content/bg-column_bottom_left.png) top left no-repeat;
	}
		.row .footer .border{
			display:block;
			height:15px;
			background:url(../images/content/bg-column_bottom_right.png) top right repeat-y;
			margin-left:15px;			
		}

.gallery {
	overflow:hidden;
	margin-bottom:10px;
}
		
	.gallery img{
		float:left;
		margin-right:5px;
		margin-bottom:5px;
	}
	
	ul.gallery li,
	ul.gallery li h2,
	ul.gallery li h2 a{
		width:130px;
		height:100px;
	}
	
	ul.gallery li{
		float:left;
		border:1px solid #dddddd;
		margin-left:10px;
		margin-bottom:10px;
		background-repeat:no-repeat;
		background-position:center;
		background-color:white;
	}
		ul.gallery li h2{
			text-indent:-9999px;
		}
		ul.gallery li h2 a{
			display:block;
		}
		ul.gallery p span{
			display:none;
		}
	
	
/* 2.1 HEADER
------------------------------------------------------------------------------------------------ */
#header {
	position:relative;
	margin:0 auto;
	width:960px;	
	height:129px;
	background:url(../images/header/bg-header.png) no-repeat top left;
	z-index:1;
}
	#header h1#logo {
		position:absolute;
		left:14px;
		top:29px;
		margin:0px;
		width:201px;
		height:82px;
		text-indent:-9999em;
		background:url(../images/header/logo-petango.png) left top no-repeat;
	}
	#header h1#logo a{
		display: block;
		width:201px;
		height:82px;
	}
	
	#header .tagline{
		position:absolute;
		top:22px;
		left:80px;
		font-size:11px;
		color:white;
		font-family:arial;
		font-weight:bold;
		word-spacing:-1px;
	}
	#header .button-go{
		float:right;
		margin-top:1px;
		margin-left:5px;
	}
	
	/* 2.1.1 NAVIGATION
	-----------------------------------------*/
	
	/* menu styles */
	#main_nav{
		font-family:arial;
		position:absolute;
		left:290px;
		top:70px;
		width:730px;
		height:60px;
	}

		#main_nav li{	
			float: left;
			list-style: none;
		}

		#main_nav li a{
                       margin-right:35px;
                       padding-top:8px;
               
                       display: block;
                       text-decoration: none;
                       white-space: nowrap;
                       color:white;
                       font-weight:bold;
                       font-size:16px;
                       letter-spacing:-1px;
               }

			
			#main_nav li ul{	
				margin: 0;
				padding: 0;
				position: absolute;
				display:none;
				z-index:1100;
				padding-top:9px;
				background:url(../images/header/bg-drop_down.png) no-repeat top center;
			}
			
				#main_nav li ul li{
					float: none;
					display: inline;
				}
				
				#main_nav li ul li a{
					font-size:12px;
					width: auto;
					color: #F68428;
					background: #fdd5a5;
					padding:5px;
				}
				
				#main_nav li ul li a:hover{	
					background: #fde0b7;
				}
		

	/* 2.1.2 SEARCH
	-----------------------------------------*/
	
	#search {
		position:absolute;
		right:55px;
		top:24px;
	}
		#search h3{
			float:right;
			color:#e9e8e8;
			font-weight:bold;
			font-size:14px;
			display:inline;
		}
		#search h3 strong{
			color:#663700;
			font-size:16px;
		}
		#search a {
			color:#e9e8e8;
			text-decoration:none;
		}
		#search input.search{
			float:right;
			margin-left:20px;
		}
		input.search{
			border:0px;
			width:129px;
			height:13px;
			padding:3px 3px 3px 26px;
			background: url(../images/header/input-search.png) no-repeat top left;
			
			font-size:11px;
			color:#f68428
		}
	

	/* 2.1.3 STORE NAVIGATION
	-----------------------------------------*/
		
	#store_header{
		position:relative;
		margin:0 auto;
		width:960px;
		height:50px;
		margin-top:30px;
		background: url(../images/header/bg-store_header.png) no-repeat top left;		
	}
		#store_header ul#store_nav{
			position:absolute;
			left:190px;
			top:10px;
			width:530px;
			height:50px;
		}
			#store_nav li{	
				float: left;
				list-style: none;
			}
			#store_nav li a{
				margin-right:22px;
				padding-top:8px;		
				display: block;
				text-decoration: none;
				white-space: nowrap;
				color:white;
				font-weight:bold;
				font-size:14px;
				letter-spacing:-1px;			
			}
			#store_nav li a.selected{
				text-decoration:underline;
			}
			
		#store_header #store_basket{
			position:absolute;
			right:20px;
			overflow:hidden;
			width:220px;
			height:50px;			
		}
		
		.HeaderMiniBasket{}
		.HeaderMiniBasket .contents{margin-left:10px; width:auto; height:30px;margin-top:8px; }
		.HeaderMiniBasket .contents .left{ float:left; width:7px;height:34px; background:url(images/default/bg_cart_left.gif) no-repeat; }
		.HeaderMiniBasket .contents .center{float:left; width:auto; height:34px; background:url(images/default/bg_cart_center.gif) repeat-x; }
		.HeaderMiniBasket .contents .center p{ float:left;margin-left:10px;margin-top:8px; font-weight:bold; font-size:1em; }
		.HeaderMiniBasket .contents .right{ float:left; width:14px; height:34px; background:url(images/default/bg_cart_right.gif) no-repeat;}		
		
		ul#store_sub_nav{
			font-family:arial;
			position:absolute;
			right:0px;
			top:0px;
			height:20px;
		}
			#store_sub_nav li{	
				float: left;
				list-style: none;
			}
			#store_sub_nav li a{
				padding-right:10px;
				border-right:#777777 solid 1px;
				margin-right:10px;	
				display: block;
				text-decoration: none;
				white-space: nowrap;
				color:#777777;
				font-weight:normal;
				font-size:11px;		
			}
				#store_sub_nav li a:hover{
					text-decoration:underline;
				}
				#store_sub_nav li a.last{
					border-right:0px;
				}

/* 2.2 FOOTER
------------------------------------------------------------------------------------------------ */

#footer{
	margin:0 auto;
	width:960px;	
	clear:both;
	color:#847f7c;
	height:200px;
	font-size:10px;
	line-height:14px;
	word-spacing:-1px;
}
	#footer .column.about{
		width:100px;
	}
	#footer .column.site_map{
		margin-left:20px;
		width:320px;
	}
	#footer .column.follow{
		margin-left:20px;
		width:210px;
	}
		#footer .column.follow .button-twitter{
			display:block;
			float:left;
		}
		#footer .column.follow .button-facebook{
			display:block;
			float:left;
			margin-left:7px;
		}
		
	#footer .column.contact{
		margin-left:20px;
		width:260px;
	}
	#footer .copyright{
		clear:both;
	}
		#footer .copyright a{
			color:#0076a3;
		}
	#footer h4{
		margin-bottom:4px;
	}
	#footer a{
		color:#847f7c;
		text-decoration:none;
	}
	#footer table tr td{
		padding-right:8px;
	}

		
/* 2.3 FORMS
------------------------------------------------------------------------------------------------ */

/* standard Form classes */

.standardForm p{ margin:10px 0;}
.standardForm p.submit{ margin:20px 0  0 0; clear:left} 

.standardForm p.input{ clear:left} 

.standardForm p.input label,
.standardForm p.radio label,
.standardForm p.phoneNumber label,
.standardForm p.checkbox label,
.standardForm p.date label,
.standardForm p.slider label{ float:left; display:block; width:140px;} 

.standardForm p.input input,
.standardForm p.input select{ width:180px;}

.standardForm p.radio input{ margin:5px}


/* form classes */

.form_error{display:block; padding:8px; border: 1px solid #fed22f; background: #ffe45c; color: #363636; }
.standardForm p.input .helpText{ margin-left: 140px; display:block; font-size:70%;}

/* slider */

.slider .selector{ width:90px; display:block; float:left; margin-left:5px; margin-right:15px}
.slider input{ width:40px!important; border:0; background:#F5F5F5;}

.form_input input[type="radio"]{
	margin:0px 4px 0px 4px;
}

	
	
/* 2.4 TWITTER
------------------------------------------------------------------------------------------------ */

.twitter_query {
	clear:both;
	font-size:13px;
	margin-bottom:20px;
}

.twitter_query ul.tweet_list li{
	position:relative;
	padding:10px 0px 10px 0px;
	
}
	.twitter_query ul.tweet_list li.tweet_first{
		
	}
	.twitter_query ul.tweet_list li:hover{
		padding:9px 0px 9px 0px;
	
		border-top:1px dotted #bbbbbb;
		border-bottom:1px dotted #bbbbbb;
	}
	.twitter_query ul.tweet_list li .tweet_avatar{
		float:left;
		width:32px;
		height:32px;
		margin-right:10px;
		margin-bottom:5px;
		overflow:hidden;
		display:block;
	}
	.twitter_query ul.tweet_list li .tweet_date {
		display:block;
		margin-top:6px;
		margin-bottom:6px;
		font-size:11px;
		color:#747679;
	}
		.twitter_query ul.tweet_list li .tweet_date a{
			color:#747679;
			text-decoration:none;
		}
			.twitter_query ul.tweet_list li .tweet_date a:hover{
				color:#747679;
				text-decoration:underline;
			}
	.twitter_query ul.tweet_list li .tweet_date {
		display:block;
		margin-top:6px;
		margin-bottom:4px;
		font-size:11px;
		color:#747679;
	}
	.twitter_query ul.tweet_list li .tweet_user{
		font-family:arial;
		font-size:12px;
		font-weight:bold;
	}
		.twitter_query ul.tweet_list li .tweet_user a{
			color:#747679;
			text-decoration:none;
		}
			.twitter_query ul.tweet_list li .tweet_user a:hover{
				color:#747679;
				text-decoration:underline;
			}


	
/* 3. Buttons & Icons
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

/* 3.1 BUTTONS
------------------------------------------------------------------------------------------------ */

.button-go{
	display:block;
	border:0px;
	width:35px;
	height:17px;
	background:url(../images/header/button-go.png) no-repeat top left;
	text-indent:-9999px;
}

.button{
	border:0px;
	display:block;
	width:104px;
	height:17px;
	padding-top:1px;
	background:#f68428 url(../images/content/bg-button_104x18.png) no-repeat top left;
	
	font-family:arial;
	font-size:11px;
	text-align:center;
	text-decoration:none;
	color:white;
}
	button.button{
		padding-top:0px;
		height:18px;
	}
	a.button:hover {
		color:white;
		text-decoration: underline;
	}
	.button.green{
		background-color:#a9b93c;
	}	
	.button.orange{
		background-color:#f68428;
	}	
	.button.blue{
		background-color:#37bcdf;
	}	
	.button.brown{
		background-color:#663700;
	}

.button-cta{
	border:0px;
	display:block;
	overflow:hidden;
	width:230px;
	height:24px;
	padding-top:6px;
	background:url(../images/content/button-cta.png) no-repeat top left;
	
	font-family:arial;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	color:white;
}
	a.button-cta {
		color:white;
		text-decoration:none;
	}
	
	.button-cta.blue{
		background-position:0px -30px;
	}
	.button-cta.orange{
		background-position:0px -60px;
	}

.button-cta_short{
	border:0px;
	display:block;
	overflow:hidden;
	width:170px;
	height:24px;
	padding-top:6px;
	background:url(../images/content/button-cta_short.png) no-repeat top left;
	
	font-family:arial;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	color:white;
}
	a.button-cta_short {
		color:white;
		text-decoration:none;
	}
	
	.button-cta_short.blue{
		background-position:0px -30px;
	}
	.button-cta_short.orange{
		background-position:0px -60px;
	}

.button-connect_facebook{
	display:block;
	border:0px;
	width:169px;
	height:21px;
	background:url(../images/content/button-facebook.png) no-repeat top left;
	text-indent:-9999px;
}

.button-twitter{
	display:block;
	border:0px;
	width:32px;
	height:32px;
	background:url(../images/content/icon-twitter.png) no-repeat top left;
	text-indent:-9999px;
}

.button-facebook{
	display:block;
	border:0px;
	width:32px;
	height:32px;
	background:url(../images/content/icon-facebook.png) no-repeat top left;
	text-indent:-9999px;
}

.button-chat{
	padding-left:16px;
	background:url(../images/content/icon-chat.png) no-repeat center left;
}

.button-next{
	display:block;
	border:0px;
	width:20px;
	height:20px;
	background:url(../images/profile_shelter/button-next.png) no-repeat top left;
	text-indent:-9999px;
}

.button-prev{
	display:block;
	border:0px;
	width:20px;
	height:20px;
	background:url(../images/profile_shelter/button-prev.png) no-repeat top left;
	text-indent:-9999px;
}

/* 3.2 ICONS
------------------------------------------------------------------------------------------------ */

.icon-arrow{
	display:block;
	border:0px;
	width:16px;
	height:14px;
	background:url(../images/search/icon-arrow.png) no-repeat top left;
	text-indent:-9999px;
}
.icon-heart{
	display:block;
	border:0px;
	width:18px;
	height:14px;
	background:url(../images/search/icon-heart.png) no-repeat top left;
	text-indent:-9999px;
}
.icon-mail{
	display:block;
	border:0px;
	width:21px;
	height:13px;
	background:url(../images/search/icon-mail.png) no-repeat top left;
	text-indent:-9999px;
}
.icon-row_col{
	display:block;
	border:0px;
	width:22px;
	height:18px;
	background:url(../images/search/icon-row_col_off.png) no-repeat top left;
	text-indent:-9999px;
}
	.icon-row_col.selected{
		background:url(../images/search/icon-row_col_on.png) no-repeat top left;		
	}
	
.icon-row{
	display:block;
	border:0px;
	width:22px;
	height:18px;
	background:url(../images/search/icon-row_off.png) no-repeat top left;
	text-indent:-9999px;
}
	.icon-row.selected{
		background:url(../images/search/icon-row_on.png) no-repeat top left;		
	}
	
	
	
	
	
	
	
	
	
.resultsSearchForm p {
float:left;
margin-right:20px;
}

.resultsSearchForm p label {
display:block;
font-weight:bold;
margin:0 0 5px;
}