@import url("reset.css");

@font-face {
  font-family: "tradegothicregular";
  src: url("font-face/tradegothic-bold-webfont.eot");
  src: url("font-face/tradegothic-bold-webfont.eot?#iefix") format('embedded-opentype'),
       url("font-face/tradegothic-bold-webfont.woff") format('woff'),
       url("font-face/tradegothic-bold-webfont.ttf") format('truetype'),
       url("font-face/tradegothic-bold-webfont.svg#tradegothicregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
    background: #000;
    font-family: "Helvetica", "Arial", sans-serif;
}

p {
    color: #fff; font-size: 13px;
    line-height: 18px;
    padding: 0 0 16px 0;
}

a       { text-decoration: none; }
a:hover { text-decoration: underline; }
	
/* 
HEADER
-----------------------------------------------------------
*/

#header {
    background:url('../images/header-bg.png') repeat-x 0 0; height:61px;
    height: 83px;
}

#header .shell { margin: 0 auto; width: 1000px; }
#header .nav    { float: left; }
#header .social { float: right; }

#header ul {
    color: #3b3b3c;
    list-style: none;
    font-size: 13px;
    font-weight: bold;
}

#header li { float: left; }

#header .nav a {
    color: #3b3b3c; display: block;
    float: left; height: 34px;
    padding: 15px 16px 0 16px;
    margin: 6px -9px 0 -9px;
}

#header .nav a:hover,
#header .nav li.current-menu-item a {
    background: #fff;
    text-decoration: none;
    zoom: 1;
}
#header ul.nav li:hover span,
#header ul.nav li.current-menu-item span {
    color: #fff !important;
}

#header .nav span {
    float: left;
    padding: 21px 7px 0 7px;
}

#header .social a {
    float: left;
    margin: 5px 0 0 5px;
    padding: 19px 0 0 0;
    width: 18px;
    height: 0;
    overflow: hidden;
    display: block;
    background: url("../images/icons/social-new.png");
}
#header .social .twitter a { background-position: -23px 0px; }
#header .social .linkedin a { background-position: -46px 0px; }
#header .social .flickr a { background-position: -69px 0px; }
#header .social .youtube a { background-position: right 0; width: 44px; }
#header .social li.youtube { margin-left:4px;  }

#header .social .contact a {
    background: url("../images/btns/contact.png") no-repeat;
    display: block;
    width: 98px; height: 0;
    padding-top: 33px;
    margin: 0 0 0 5px;
}

#header .contact a:hover { background-position: 0 -33px; }	

#header .top { height:28px; margin-left:-15px; position:relative; }
#header .top .left ul li a { font-size:11px; color:#3a383a; line-height:28px; padding:0 15px; font-family: 'tradegothicregular'; text-transform    : uppercase; float:left; display:inline; font-weight: normal; }
#header .top .left ul li a:hover { text-decoration:none; background:#fdbb30;  }

/* 
CONTENT 
-----------------------------------------------------------
*/

#content         { padding: 0 0 40px 0; }
#content .center { margin: 0 auto; width: 1000px; }

/* home */

#content.home {
    background: url("../images/bgs/home2.jpg") no-repeat;
    background-position: top center;
    height: 610px;
}

#content.home .center { margin: 0 auto; width: 975px; position: relative; }

#content.home p {
    font-size: 18px;
    line-height: 25px;
    padding: 28px 0 7px 0;
    width: 460px;
}

#content.home .nav   { margin: 20px 0 0 0; }
#content.home .nav a { margin: 0 18px 0 0; }

#content #treat-ball a { display: block; position: absolute; top:0; right:0; width: 520px; height: 610px; border: 0 none; outline: 0 none; }

#content .content       { float: right; width: 660px; }
#content .content h1    { margin: 100px 0 0 0; }
#content .content h1.title    { color: #fff; font-weight: normal; font-size: 38px; line-height: 28px; padding: 0; margin-top: 41px; }
#content .content h1.title span { font-size: 14px; position: relative; top: -18px; }
#content .content h1.title span.tm { font-size: 18px; position: relative; top: -14px; }
#content .content h2    { color: #fdbb30; font-size: 13px; padding: 0 0 4px 0; }
#content .content h2.cat-title    { text-transform: uppercase; }
#content .content p     { line-height: 21px; }
#content .content p a   { color: #fff; text-decoration: underline; }
#content .content label { color: #fdbb30; }
#content .content p.date { color: #fdbb30; line-height: 16px; margin: 0; padding: 0; }

#content .content ul {
    color: #fdbb30;
    font-size: 13px; font-weight: bold;
    list-style: none; margin: 10px 0 45px 0;
}

#content .content li {
    background: url("../images/icons/plus.png") no-repeat;
    padding: 0 0 15px 16px; }
    
#content .content dl {
    color: #fff;
    font-size: 13px;
    line-height: 21px;
    margin: 0 0 16px 0; 
}

#content .content dt {
    background: url("../images/bgs/dots.png") repeat-x 0 13px;
    clear: left; float: left; width: 120px; }
#content .content dt { background-image: none; }
#content .content dt span   { background: #000; padding: 0 3px 0 0; }
#content .content dd        { float: left; }
#content .content dd span   { background: #000; padding: 0 0 0 3px; }
#content .content dt,
#content .content dd { border-bottom: 1px solid #303030; padding-bottom: 4px; padding-top: 4px; }

#content .content .intro {
    padding: 22px 0 28px 0;
}
body.page-id-9 #content .content .intro {
    padding-bottom: 6px;
}
#content .content .intro p {
    color: #fdbb30;
    font-size: 18px;
    line-height: 28px;
}
#content .product .content .intro {
    padding-top: 10px;
}

#content .content .left     { float: left; width: 310px; }

#content .content .right        { float: right; width: 310px; }
#content .content .right .nav   { color: #fdbb30; font-style: italic; }
#content .content .right .nav a { color: #fdbb30; }

#content .content .post { margin: 0px 0px 10px 0px; }

#content .pager a { text-transform: uppercase; color: #fdbb30; }
#content .pager a.prev { float: left; }
#content .pager a.next { float: right; }

#content h2.area-header {
  padding-bottom: 16px;
}
#content h2.area-header span {
  line-height: 18px;
  font-weight: normal;
  padding-left: 10px;
  position: relative;
  top: -5px;
}
#content h2.area-header span a {
  color: #fdbb30;
}
#content h2.area-header span a.current {
  text-decoration: underline;
}
#content h2.cat-title {
  background-color: #fdbb30;
  color: #000;
  padding: 3px 6px;
  margin-bottom: 8px;
}

/* products */

#content .category {
    border-top: 1px solid #404040;
    clear: both; font-size: 13px;
    margin: 0 12px 0 12px; padding: 20px 0 0 0;
}

#content .category .title    { float: left; width: 250px; }
#content .category .title p  { padding-top: 12px; }

#content .category.ms p, /* mental stimulation */
#content .category.ms a { color: #fdbb30; }

#content .category.tr p, /* treats rewards */
#content .category.tr a { color: #8cd2f4; }

#content .category.tt p, /* training tools */
#content .category.tt a { color: #b3a2ce; }

#content .category.ip p, /* interactive play */
#content .category.ip a { color: #c1cd23; }

#content .category .products    { float: right; width: 650px; }
#content .category .products ul { list-style: none; }

#content .category .products li {
    float: left; margin: 0 26px 0 0;
    width: 190px; height: 95px;
}

#content .category .products a      { float: left; line-height: 16px; }
#content .category .products .thumb { text-align: center; width: 80px; }
#content .category .products .thumb img { max-width: 100%; height: auto; }
#content .category .products .info  { margin: 17px 0 0 6px; width: 90px; }

/* product */

#content .product { background: url("../images/bgs/product.png") repeat-y left; }
#content .content .bottom { clear: both; border-top: 1px solid #5f5d5e; padding-top: 20px; width: 648px; }
#content .content .bottom strong    { font-weight: normal; color: #fdbb30; }
#content .content p.product_image    { margin: 0px -19px; }

.works-with { clear: both; float: none; }
.works-with img { max-width: 100%; height: auto; }

/* 
SIDEBAR 
-----------------------------------------------------------
*/

#content .sidebar               { float: left; width: 273px; }
#content .sidebar .logo         { background: #000; padding: 0 0 30px 13px; }
#content .sidebar .photos       { float: left; padding: 0 20px 0 13px; }
#content .sidebar .photos img   { display: block; margin: 0 0 20px 0; }

#content .sidebar .photos h3 {
    color: #fdbb30; font-size: 13px;
    margin: -10px 0 0 0; padding: 0 0 4px 0;
}

#content .sidebar .photos p	{ padding-right: 20px; }
#content .sidebar .photos a   { color: #fdbb30; text-decoration: underline; }

#content .sidebar .title {
    margin: 0 0 13px 9px;
    width: 265px;
}

#content .sidebar .title img {
    display: block;
    float: right;
    margin: 0;
}

#content .sidebar .title a {
    color: #fff; float: left;
    font-family: "Verdana", "Arial";
    font-size: 10px;
    margin: -2px 0 0 4px;
}
#content .sidebar .title a.product_matrix { margin-left: 16px; margin-top: 6px; }

#content .sidebar .also {
    border-top: 1px solid #5f5d5e;
    width: 235px;
    float: left; margin: 0 0 0 13px; padding: 18px 0 0 0;
}

#content .sidebar .also h3 {
    color: #fdbb30; font-size: 13px;
    padding: 0 0 0 4px;
}

#content .sidebar .also ul { list-style: none; margin: 15px 0 15px 0; }
#content .sidebar .also li { clear: both;}

#content .sidebar .also a      { color: #fdbb30; float: left; font-size: 13px; line-height: 16px; }
#content .sidebar .also .thumb { width: 97px; height: 74px; text-align: center; }
#content .sidebar .also .info  { margin: 17px 0 0 6px; width: 132px; }

#content .sidebar .sidebar_text { margin-bottom: 50px; }
		
/* 
BOTTOM 
-----------------------------------------------------------
*/	

#bottom {
    background: #3a383a;
    padding: 27px 0 23px 0;
}

#bottom .center { margin: 0 auto; width: 1000px; }

#bottom .col-1 {
    background: url("../images/bgs/testimonial.jpg") no-repeat 0 33px;
    float: left; width: 339px;
}

#bottom .col-1 h2 { padding: 0 0 10px 0; }

#bottom .col-1 p {
    padding-left: 130px;
    width: 155px;
}

#bottom .col-1 cite {
    color: #fdbb30;
    font-size: 13px;
    font-style: normal;
    padding-left: 130px;
}

#bottom .col-2     { float: left; width: 341px; }
#bottom .col-2 h2  { padding: 0 0 12px 0; }

#bottom .col-2 h3 {
    color: #fdbb30;
    font-size: 13px; font-weight: bold;
    padding: 0 0 2px 0;
    width: 295px;
}
#bottom .col-2 h3.title {
    padding-bottom: 6px;
}

#bottom .col-2 p    { width: 295px; }
#bottom .col-2 a, #bottom .col-3 a { color: #fdbb30; }
#bottom .col-2 a { font-style: italic; }
#bottom .col-2 span { color: #fdbb30; }

#bottom .col-3 { float: left; width: 320px; }

#bottom .col-3 .upload-photo {
    background: url("../images/bgs/join-online-community.png") no-repeat;
    width: 320px; height: 134px;
}

#bottom .col-3 .slideshow-container {
    display: block; float: left;
    margin: 38px 0 0 65px;
}
#bottom .col-3 .slideshow-container, #bottom .col-3 .slideshow-container div {
  width: 120px !important; 
  height: 77px !important;
  overflow: hidden;
}

#bottom .col-3 .upload {
    color: #fdbb30;
    float: left; font-size: 13px;
    margin: 65px 0 0 15px;
}

#bottom .twitter {
    border-top: 1px solid #686769;
    margin: 0 auto; padding: 12px 14px 18px 14px;
    width: 265px;
}

#bottom .twitter h3 {
    background: url("../images/icons/twitter-lg.png") no-repeat;
    color: #fdbb30;
    font-size: 13px; font-weight: normal;
    height: 23px;
    padding: 12px 0 0 30px;
}

#bottom .twitter h3 a     { color: #fdbb30; }
#bottom .twitter p        { padding: 0 0 10px 0; }
#bottom .twitter .time a  { color: #fdbb30; }

/* 
NEWSLETTER 
-----------------------------------------------------------
*/

#newsletter {
    background: #fff;
    height: 49px;
}

#newsletter .center { margin: 0 auto; width: 1000px; position: relative; }
#newsletter img     { float: left; }
#newsletter h2 { float: left; font-size: 18px; line-height: 49px; color: #3a383a; float: left; display: inline; font-family: 'tradegothicregular'; text-transform: uppercase; font-weight: normal; }

#newsletter input { 
    font-family: inherit; font-size: 11px;
    padding: 13px 8px 6px 13px;
    margin: 12px 0 0 15px;
    width: 245px; 
    color: #3a383a;
    border: 1px solid #d2d2d2;
    background: #f0f0f0;
    width: 216px;
    float: left;
    display: inline;
}

*:first-child+html #newsletter input {
    padding: 3px 8px 3px 8px; /* ie7 sigh... */
}

:root *> #newsletter input {
    /* target everything except ie6-ie8 */
    padding: 2px 8px 0 8px; height: 21px;
}

#newsletter button, #newsletter input.wp-email-capture-submit {
    border: none; display: block; float: left;
    margin: 12px 0 0 15px; cursor: pointer;
    width: 80px; height: 25px; overflow: hidden;
    color: #3a383a;
    background:#fdbb31; border-radius:4px; font-family: 'tradegothicregular'; font-size:15px; line-height:16px; padding: 0; text-align: center; text-transform: uppercase;
}
#newsletter label, #newsletter br, #newsletter div.error { display: none; }
#newsletter p.info { text-align: center; padding-top: 22px; color: #fdbb30; }
#newsletter span.img { float:left; display:inline; margin-top:-10px; margin-bottom:-10px; position:relative; padding-right:17px; background:url('images/icons/newsletter.png') no-repeat top left; width: 61px; height: 67px; }

/* 
FOOTER 
-----------------------------------------------------------
*/
	
#footer {
    background: #000; color: #fff;
    font-family: "Verdana", "Arial", sans-serif;
    font-size: 10px; height: 167px;
    padding: 11px 0 50px 0;
}

#footer .center { margin: 0 auto; width: 975px; }

#footer .top ul  { float: left; }
#footer ul  { list-style: none; }
#footer a   { color: #fff; }

#footer .top        { padding: 12px 0 4px 0; }
#footer .top li     { float: left; }
#footer .top span   { padding: 0 9px 0 9px; }

#footer .top p {
    color: #fff; float: right;
    font-size: 10px; line-height: 14px;
    padding: 0;
    width: 355px; text-align: right;
}

#footer .nav li { float: left; margin: 0 25px 0 0; }
#footer .nav li a { font-weight: bold; display: block; padding: 0 0 7px 0; }
#footer .nav li li { float: none; margin: 0; }
#footer .nav li li a { font-weight: normal; }

#footer .social li {
    float: left;
    margin: 28px 5px 0 0;
}
#footer .social a {
    padding: 17px 0 0 0;
    width: 17px;
    height: 0;
    overflow: hidden;
    display: block;
    background: url("../images/icons/social.png");
}
#footer .social .facebook a { background-position: 0px -17px; }
#footer .social .twitter a { background-position: -17px -17px; }
#footer .social .linkedin a { background-position: -34px -17px; }
#footer .social .flickr a { background-position: -52px -17px; }
#footer .social .youtube a { background-position: -71px -17px; width: 48px; }
#footer .social .contact a { display: none; }

/* 
MISC 
-----------------------------------------------------------
*/

.replace {
    display:block;
    width:0;
    height:0;
    overflow:hidden;
}

dl:after,
.clear:after {
    content:"";
    display:block;
    height:0;
    font-size:0;
    clear:both;
    visibility:hidden;
}

*html .clear,
*:first-child+html .clear {
    zoom:1
}

.aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.wp-caption {
	background-color: #f3f3f3;
	border: 1px solid #ddd;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; /* optional rounded corners for browsers that support it */
	margin: 10px;
	padding-top: 4px;
	text-align: center;
}
.wp-caption img {
	border: 0 none;
	margin: 0;
	padding: 0;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

a.btn { display:block; background:#fdbb30; border-radius:4px; font-family: 'tradegothicregular'; font-size:15px; color:#3a383a !important; display:inline-block; line-height:33px; padding: 0px 20px; text-align: center; text-transform: uppercase; }

.mobile_sites_menu { display: none; background: #1d1d1d; }
.mobile_sites_menu ul { margin: 0px; padding: 0px; clear: both; height: 40px; }
.mobile_sites_menu ul li { margin: 0px; padding: 0px; list-style: none; height: 40px; line-height: 40px; float: left; width: 49.5%; background: #2a2a2a; text-align: center; }
.mobile_sites_menu ul li.first { margin-right: 1%; }
.mobile_sites_menu ul li a { color: #7e7d78; text-transform: uppercase; font-size: 11px; font-family: 'tradegothicregular', san-serif; letter-spacing: 1px; }

.mobile_header { height: 75px; display: none; background: #fcbd10; position: relative; }
.mobile_header .logo { padding: 15px 0px 0px 20px; }
.mobile_header a.mobile_menu_toggle { position: absolute; top: 13px; right: 20px; color: #000000; }

.mobile_page_menu { display: none; background: #ffbb12; border-top: 2px solid #f4b005; position: absolute; top: 115px; left: 15%; width: 85%; z-index: 9999; }
.mobile_page_menu ul { margin: 0px; padding: 0px; }
.mobile_page_menu ul li { margin: 0px; padding: 10px 20px; list-style: none; border-bottom: 2px solid #f4b005; font-size: 20px; }
.mobile_page_menu ul li a { color: #333333; }
.mobile_page_menu ul li .fa { margin-top: 3px; float: right; cursor: pointer; color: #333333; }
.mobile_page_menu ul ul.sub-menu { display: none; }
.mobile_page_menu ul ul li { padding: 8px 0px; border: none; font-size: 16px; }


/* TABLET STYLES */
@media (min-width: 768px) and (max-width: 979px) {
	img { max-width: 100%; height: auto; }
	#contact_map { width: 100% !important; }
	
	#header .shell { width: 740px; }
	#content .center { width: 740px; }
	#content .sidebar { width: 220px; }
	#content .sidebar .title { width: 220px; }
	#content .sidebar .photos { padding-right: 13px; }
	#content .sidebar .also { width: 194px; }
	#content .sidebar .also .thumb { width: 60px; }
	#content .sidebar .also .info { margin-top: 5px; width: 120px; }
	
	#content .content { width: 490px; }
	#content .content .right,
	#content .content .left { width: 45%; }
	#content .content .bottom { width: 100%; }
	#content .content .bottom iframe,
	#content .content .bottom embed,
	#content .content .bottom object { width: 490px !important; }
	
	#content .product { background-position: -42px 0px; }
	
	#content .category .title { width: 220px; }
	#content .category .products { width: 470px; }
	#content .category .products li { width: 200px; }
	
	#bottom .center { width: 740px; }
	#bottom .center .col-1 { width: 33%; background: none; }
	#bottom .center .col-1 p,
	#bottom .center .col-1 cite { padding-left: 0px; width: 90%; }
	#bottom .center .col-2 { width: 31%; }
	#bottom .center .col-2 p { width: auto; }
	#bottom .center .col-3 { margin-left: 3%; width: 33%; }
	#bottom .col-3 .upload-photo { width: 198px; }
	#bottom .col-3 .upload { padding-top: 10px; float: none; clear: both; display: none; width: auto; }
	#bottom .twitter { width: auto; }
	#bottom .center .col-1 h2 img,
	#bottom .center .col-2 h2 img,
	#bottom .center .col-3 h2 img { height: 25px; width: auto; }
	
	#newsletter .center { width: 740px; }
	#newsletter input { width: 120px; }
	
	#footer .center { width: 740px; }
	#footer .top p { margin-top: -2px; width: 280px; }
}


/* MOBILE STYLES */
@media (max-width: 767px) {
	img { max-width: 100%; height: auto; }
	#contact_map { width: 100% !important; }
	
	.mobile_sites_menu { display: block; }
	.mobile_header { display: block; }
	#header { display: none; }
	
	#header .shell {  }
	#content .center { padding-left: 20px; padding-right: 20px; width: auto; }
	#content.home { background-size: 100% auto; height: auto; }
	#content.home .center { width: auto; }
	#content.home .center .logo { display: none; }
	#content.home p { padding-top: 65%; width: auto;  }
	#content.home .nav a { float: none; width: 100%; padding: 5px 0px; margin-bottom: 15px; }
	#content #treat-ball a { display: none; }
	#content .sidebar { width: 100%; float: none; }
	#content .sidebar .logo { display: none; }
	#content .sidebar .title { width: 100%; float: none; }
	#content .sidebar .photos  { padding-left: 0px; float: none; }
	#content .sidebar .photos img { width: 100%; }
	#content .content { width: 100%; float: none; }
	#content .content h1 { margin-top: 50px; }
	#content .content .right,
	#content .content .left { width: 100%; float: none; }
	#content .content .bottom { width: 100%; }
	#content .content .bottom iframe,
	#content .content .bottom embed,
	#content .content .bottom object { width: 100% !important; }
	
	body.page-template-products #content .sidebar .photos { display: none; }
	#content .category .title { float: none; width: auto; }
	#content .category .products { width: auto; float: none; }
	#content .category .products li { width: auto; float: none; }
	#content .category .products .thumb { width: 40%; display: table-cell; vertical-align: middle; }
	#content .category .products .info { width: 55%;display: table-cell; vertical-align: middle; }
	
	#content .product { background: none; }
	#content .content h1.title { font-size: 28px; line-height: 1.3; }
	#content .product .sidebar { background-image: url("../images/bgs/product-mobile.png"); background-repeat: repeat-y; background-position: right 3px center; }
	#content .product .sidebar .photos { padding-left: 15px; padding-right: 15px; }
	#content .product .sidebar .also { margin-right: 15px; padding-bottom: 20px; float: none; width: auto; }
	#content .product .sidebar .also .thumb { width: 40%; display: table-cell; vertical-align: middle; }
	#content .product .sidebar .also .info { width: 55%;display: table-cell; vertical-align: middle; }
	
	#bottom .center { width: auto; padding-left: 20px; padding-right: 20px; }
	#bottom .center .col-1 { float: none; margin-bottom: 30px; }
	#bottom .center .col-1 { width: 100%; background: none; }
	#bottom .center .col-1 p,
	#bottom .center .col-1 cite { padding-left: 0px; width: 90%; }
	#bottom .center .col-2 { width: 100%; float: none; margin-bottom: 30px; }
	#bottom .center .col-2 p { width: auto; }
	#bottom .center .col-3 { margin-left: 0%; width: 100%; float: none; }
	#bottom .twitter { width: auto; padding-left: 0px; padding-right: 0px; }
	#bottom .col-3 .upload-photo { width: auto; }
	#bottom .col-3 .upload { display: none; }
	
	#newsletter { height: auto; }
	#newsletter .center { width: 100%; }
	#newsletter form { padding: 0px 20px 20px 20px; }
	#newsletter input { width: 100%; padding: 3px 0px !important; margin-left: 0px; text-indent: 0px; float: none; }
	#newsletter input[type="text"] { text-indent: 8px; }
	#newsletter button, #newsletter input.wp-email-capture-submit { margin-left: 0px; float: none; }
	
	#footer { height: auto; }
	#footer .center { width: 100%; }
	#footer .top { padding-left: 20px; padding-right: 20px; }
	#footer .top ul li { margin-bottom: 8px; }
	#footer .top p { text-align: left; padding-top: 10px; width: auto; float: none; clear: both; }
	#footer .nav { width: auto; padding-top: 20px; margin-left: 20px; margin-right: 20px; }
	#footer .nav { display: none; }
	#footer .social { display: none; }
	a:hover { text-decoration: none !important; }
}

