@import url("reset.css");
@import url("stylesheet.css");


/*---------------------------
main styles
---------------------------*/

body {color:#777;
	font-size: 62.5%;
	font-family: "CartoGothicStdBook", Arial, Helvetica, sans-serif;
	margin:0;
	background:url(../images/background-dogs.gif) top center no-repeat;
}

a {color:#F99E00;text-decoration:none;}
a:hover {color:#000;}
p {
	color:#777;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 13px;
	margin-left: 0;
}
.leftimgfloat, .justifyleft {
	float:left;
	margin-top: 0;
	margin-right: 20px;
	margin-bottom: 15px;
	margin-left: 0;
}
.rightimgfloat, .justifyright {float:right;margin:0 0 15px 15px;}
.small {font-size:85%;}

#wrapper {
	font-size:1.3em;
	line-height:1.4;
	width:950px;
	height:auto;
	position:relative;
	clear:both;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	background-color: #FFF;
	border-right-width: 6px;
	border-left-width: 6px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFF;
	border-left-color: #FFF;
}
#home #header {
	clear:both;
	width:950px;
	height:200px;
	position: relative;
	background-color: #F99E00;
	background-image: url(../images/trusty-bags.jpg);
	background-position: right top;
	background-repeat: no-repeat;
}
#header {
	clear:both;
	width:950px;
	height:152px;
	position: relative;
	background-color: #F99E00;
}

#header p {
	font-weight:bold;
	width:350px;
	font-size:200%;
	color:#FFF;
	line-height:1;
	display: block;
	z-index: 10;
	position: absolute;
	margin-top: 20px;
	margin-left: 255px;
}
#home #header p {
	font-weight:bold;
	width:350px;
	font-size:200%;
	color:#FFF;
	line-height:1.2;
	display: block;
	z-index: 10;
	position: absolute;
	margin-top: 33px;
	margin-left: 325px;
}
#header p .bigger {
	font-size:130%;
	line-height: 90%;
}

.bags {float:right;margin:0 0 20px 20px;font-size:130%;}
.british-made {position:absolute;right:0;top:0;background:url(../images/british-made.gif) no-repeat;width:108px;height:100px;}
.british-made span {position:absolute;left:-3000px;}

.rightcol p.highlight-prem {padding:10px;color:#FFF;width:400px;font-size:120%;}
.percents strong {font-size:120%;}

.blue {color:#002238;}
.grey {color:#666;}
.orange {color:#F99E00;}

.main-message {position:relative;float:left;width:744px;height:367px;background:url(../images/main-img.jpg) 0 0 no-repeat;}
.main-message span {display:block;padding:32px 38px;}
.main-message h1 {color:#002238;font-size:33px;margin:0;padding:0;}
.main-message h2 {color:#FFF;font-size:22px;margin:0 0 10px 0;padding:0;line-height:1.1;}
.main-message p {color:#002238;font-size:16px;padding-right:150px;line-height:1.2;}

#main {
	width:900px;
	clear:both;
	position:relative;
	height:auto;
	color: #888;
	padding-top: 0;
	padding-right: 25px;
	padding-bottom: 20px;
	padding-left: 25px;
}

#main .rightcol {
	float:right;
	width:680px;
	padding:6px 6px 6px 14px;
	color: #333;
}
.rightcol p {color:#333;}
.colour5 {background:#FFDD9B;}

ul.bullets {list-style-type:none;margin:0 0 20px 20px;float:right;background:#002238;padding:10px 20px 30px 20px;width:200px;}
.bullets li {display:block;font-size:120%;color:#FFF;padding:6px 30px 8px 0px;background:url(../images/checklist-bg.gif) bottom right no-repeat;}

#home #logo {
	width:475px;
	height:160px;
	position:absolute;
	top:0;
	left:0;
	z-index:5;
	background-image: url(../images/trusty-logo.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
#logo {
	width:475px;
	height:160px;
	position:absolute;
	top:0;
	left:0;
	z-index:5;
	background-image: url(../images/trusty-logo-small.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
#logo span {position:absolute;left:-9999px;}
.hidden {position:absolute;left:-9999px;}

h1 {
	font-size:220%;
	line-height:1.2;
	font-weight:normal;
	color:#002238;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
}
h2  {font-size:180%;margin:10px 0 6px 0;color:#333;font-weight:normal;}
h3  {font-size:160%;margin:8px 0 6px 0;color:#555;}
h4 {font-size:110%;margin:10px 0 10px 0;color:#555;}

ol.indented, ul.indented {padding:15px;background:#F0F0F0;width:450px;}
ol.indented li, ul.indented li {margin-left:15px;}

.clear {clear:both;height:0;display:block;width:100%;}

p.error {
	width:164px;
	height:auto;
	background:#F00;
	padding:10px;
}

p.copyright {position:absolute;right:0;}
.divider {
	clear:both;
	height:3px;
	background:url(../images/horizontal-break.jpg) 0 0 no-repeat;
	margin-bottom:6px;
}

.p-btn {position:absolute;right:0;top:70px;width:150px;height:145px;background:url(../images/protek-btn.png) 0 0 no-repeat;}
.kma-btn {position:absolute;right:0;top:215px;width:150px;height:119px;background:url(../images/kennel-maid-btn.png) 0 0 no-repeat;}
.kma-btn span, .p-btn span {position:absolute;left:-3000px;}

/*OLD STYLES TO REMOVE SHORTLY...*/
.km-btn {position:absolute;right:-4px;top:120px;width:168px;height:168px;background:url(../images/kennel-maid-button.png) 0 0 no-repeat;}
.km-btn span {position:absolute;left:-3000px;}

/*---------------------------
navigation top styles
---------------------------*/

#home ul#navbar {top:160px;}
ul#navbar {top:112px;}
ul#navbar  {
	font-size:14px;
	width:950px;
	position:absolute;
	left:0;
	clear:both;
	padding: 0px;
	height:40px;
	background-color: #F99E00;
	background-image: url(../images/nav-bg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	list-style-type:none;
	z-index:20;
}
#navbar li {
	position:relative;
	float:left;
	display:block;
	margin: 0px;
	text-align: center;
	background-image: url(../images/nav-divider.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	padding-top: 0px;
	padding-right: 1px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#navbar li span {
	width:auto;
	height:30px;
	display:block;
	padding: 10px 0 0 0;
	background-image: url(../images/nav-divider.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	white-space: nowrap;
}

#navbar li.selected {}

#navbar li.selected a {color:#FFF; background:url(../images/nav-select.gif) center bottom no-repeat;height:43px;}
#navbar li a {
	color:#FFF;
	height:40px;
	cursor:pointer;
	display:block;
	text-decoration: none;
	white-space: nowrap;
	width: 126px;
}
#navbar li a:hover {color:#000;background:#F99E00;
}

/*---------------------------
sub navigation styles
---------------------------*/

#main .subnav {line-height:1.1;
	float:left;
	width:185px;
	margin-bottom: 20px;
}
.subnav ul.premier li {background: #002238 url(../images/boxtop-premier.gif) 0 0 no-repeat;color:#FFF;margin:0;font-size:120%;}
.subnav ul.premier li a, .subnav ul.trusty li a, .subnav ul.other li a {color:#FFF;display:block;padding:10px 10px 10px 14px; background:url(../images/arr-down.gif) 95% 50% no-repeat;}
.subnav ul.trusty li {background: #F99E00 url(../images/boxtop-trusty.gif) 0 0 no-repeat;color:#FFF;margin:6px 0 0 0;font-size:120%;}
.subnav ul.other li {background: #105191 url(../images/boxtop-other.gif) 0 0 no-repeat;color:#FFF;margin:6px 0 0 0;font-size:120%;}

.subnav ul, .subnav ul li {margin:0 0 10px 0;padding:0;list-style-type:none;}
.subnav ul ul {background:#E4E8EA;margin:0 0 0 0;padding:4px 0 4px 0;}
.subnav ul.premier ul li, .subnav ul.trusty ul li, .subnav ul.other ul li {
	margin:0 0 4px 0;
	padding:4px 10px 0 14px;
	background:none;
	font-size:13px;
}
.subnav ul ul li.selected {background:url(../images/subnav-grad.jpg) 0 0 repeat-y;color:#000;}
.subnav ul.premier ul li a, .subnav ul.trusty ul li a, .subnav ul.other ul li a { background:none;
	color:#002238;
	padding: 0 0 4px 0;
border-bottom:#FFF solid 1px;}

/*---------------------------
product range navigation styles
---------------------------*/

#main .range {line-height:1.1;background:#000 url(../images/range-bg.jpg) 0 0 no-repeat;color:#FFF;padding:140px 0 20px 30px;clear:both;
	margin-bottom: 20px;
}
#supplements .range {background:#000 url(../images/range2-bg.jpg) 0 0 no-repeat;}

.range h1 {
	font-size:250%;
	color:#FFF;
	font-family: "NotethisRegular", Arial, Helvetica, sans-serif;
	margin-top: 0px;
	padding-top: 0px;
}

.range ul  {width:270px;margin:0 15px 0 0;float:left;position:relative;list-style-type:none;}

.range ul.premier li span, .range ul.trusty li span, .range ul.other li span {color:#FFF;padding:18px 15px 45px 15px;display:block;font-size:18px;}

.range ul ul {margin:0 0 0 0;padding:4px 0 4px 0;}
.range ul ul li {display:block;width:auto;clear:both;
	margin:0 0 4px 0;
	padding:4px 10px 0 0px;
	background:none;
	font-size:20px;
}
.range ul.premier ul li, .range ul.trusty ul li, .range ul.other ul li {
	background-image: none;
	display: block;
}
.range ul.premier ul li a:hover, .range ul.trusty ul li a:hover, .range ul.other ul li a:hover {background-position:4px 0;color:#FF9;}
.range ul.premier ul li a, .range ul.trusty ul li a, .range ul.other ul li a {
	background:url(../images/arr-right.gif) 0 0 no-repeat;
	color:#FFF;
	padding: 0 0 4px 23px;
	display: block;
	font-size:20px;font-family:"NotethisRegular", Arial, Helvetica, sans-serif;
}

.freefrom {	font-size:140%;font-family:"NotethisRegular", Arial, Helvetica, sans-serif;}

.breadcrumbs {
	display:block;
	height:24px;
	border-bottom:dotted #666 1px;
	margin-right:0px;
	margin-top: 0px;
	padding-top: 3px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-bottom: 3px;
}

.right-btns {float:right;width:200px;height:auto;}
.right-btns a {display:block;width:200px;margin-bottom:6px;color:#002238;line-height:1.1;font-size:14px;}
.right-btns a:hover {background-color:#002238;color:#FFF;background-position:-200px 0;}
.right-btns a span {padding:12px;display:block;}
a.help {display:block;height:100px;background:url(../images/btn-help.jpg) 0 0 no-repeat;}
a.how-much {display:block;height:110px;background:url(../images/btn-how-much.jpg) 0 0 no-repeat;}
a.frequently {
	display:block;
	height:128px;
	background:url(../images/btn-frequently.jpg) 0 0 no-repeat;
}

#footer {
	clear:both;
	background-repeat: no-repeat;
	position: relative;
	color: #666;
	margin-right: 0px;
	margin-left: 0px;
	background-image: url(../images/horizontal-break.jpg);
	background-position: left top;
	margin-top: 20px;
	width: 950px;
}

#footer ul {display:block;text-align:left;
	height:66px;
	list-style-type:none;
	margin:0;
	padding:5px 10px;
	background-image: url(../images/horizontal-break.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#footer li {float:left;color:#F99E00;font-size:18px;position:relative;line-height:1.1;padding:10px 0 0 0;height:57px;}
#footer li span {padding-left:118px;display:block;}
#footer li.orders span {padding-left:134px;}
#footer li span span, #footer li.orders span span {padding-left:0;}

li.orders span span {font-size:110%;color:#666;}
li.email span span, li.web span span {font-size:70%;color:#666;}
#footer li.orders {background:url(../images/base-phone.gif) 0 0 no-repeat;}
#footer li.email {background:url(../images/base-email.gif) 0 0 no-repeat;}
#footer li.web {background:url(../images/base-web.gif) 0 0 no-repeat;}
#footer li a {display:block;color:#333;}

#footer p {margin:20px 10px;}
#footer p a {padding:0 3px 0 3px;}



ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 44px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 670px;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 43px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 43px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	background:#CCC url(../images/tab-bg.jpg) 0 0 repeat-x;
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.3em;
	padding: 2px 100px 8px 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
ul.tabs li.active a {background:#FFF;	}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
	width: 670px;
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; 
	background: #fff;
	margin:0 0 15px 0;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}

#sitemap ul {margin-left:20px;}
#sitemap ul li {padding:4px 10px;border:#CCC solid 1px;margin:10px 0 30px;font-weight:bold;list-style-type:none;}
#sitemap li li {background:#F0F0F0;border:none;padding-bottom:10px;margin-bottom:6px;}
#sitemap li li a {border-bottom:#CCC solid 1px;padding-bottom:3px;margin-bottom:6px;}
#sitemap li li li { padding-bottom:6px;list-style-type:disc;}
#sitemap li li li a {border:none;}

.feedingguidetitles {
	background-color: #CCC;
	padding: 5px 5px 5px 13px;
	clear: left;
	float: left;
	border: 1px solid #FFF;
	width: 150px;
	height: 45px;
}
.feedingguidetable {
	background-color: #CCC;
	padding: 5px 5px 5px;
	float: left;
	border: 1px solid #FFF;
	width: 51px;
	text-align: center;
	height: 45px;
}
.feedingguidetitlesyell {
	background-color: #F8E7C0;
	padding: 5px 5px 5px 13px;
	clear: left;
	float: left;
	border: 1px solid #FFF;
	width: 150px;
	height: 45px;
}
.feedingguidetableyell {
	padding: 5px 5px 5px;
	float: left;
	border: 1px solid #FFF;
	width: 51px;
	text-align: center;
	height: 45px;
	background-color: #F8E7C0;
}
.backg-image {
	background:url(../images/eurotecpetfoodsbackg.jpg) 0 0 repeat-x;
	padding: 15px;
	height: auto;
	clear: none;
}
.names {
	float: left;
	height: auto;
	width: 246px;
	margin-right: 30px;
	margin-bottom: 10px;
}
.greyborder {
	padding: 12px;
	border: 12px solid #EFEFEF;
	height: auto;
	clear: both;
	float: left;
}
#contact_us_form {font-size:90%;}
.forminputs {
	font-size: 1em;
	width: 150px;
	font-family: Helvetica, Arial, sans-serif;
	border: 1px solid #DFDFDF;
	padding: 2px;
}
.forminputdrops {
	font-size: 1em;
	font-family: Helvetica, Arial, sans-serif;
	border: 1px solid #DFDFDF;
	padding: 2px;
}form td {
	padding: 3px;
	vertical-align: top;
}
.discountsbutton a{
	float: right;
	height: 45px;
	width: 150px;
}
.productsspacing td {
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
.productsheading td {
	font-weight: bold;
	padding-bottom: 6px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	color: #FFF;
	background-color: #3366B6;
}
.quantitybox {
	width: 35px;
}
.pricebox {
	width: 50px;
}
.lightblueback td {
	background-color: #E3F2FF;
}
.question {margin:12px 0 0 0;}
.question a {font-family: "CartoGothicStdBold", Arial, Helvetica, sans-serif;font-size:110%;display:block;background:#D8DDE0 url(../images/tab-bg.jpg) 0 0 repeat-x;color:#666;padding:6px 12px;border:#FFF solid 1px;}
.question.active a {color:#000;border-bottom:none;}
.answer {color:#333;background:#F0F0F0;padding:10px 20px;border:#FFF solid 1px;border-top:none;}

.cookietable th {padding:10px;background:#CCC;}
.cookietable td {padding:10px;background:#F0F0F0;border-top:#FFF solid 1px;}
.priceranges {margin-bottom:15px;}
.priceranges td {border:#FFF solid 1px;padding:3px 10px;border-bottom:none;border-top:none;}
.priceranges span {font-size:125%;font-weight:bold;}