/* Viyo.com css - written and maintained by Internet Architects               */
/* Yahoo fonts.css integrated. (c) 2007, Yahoo! Inc. All rights reserved.     */

/* ========================================================================== */
/* 00. base styles                                                            */

/* set base body ............................................................ */
body {font:13px/1 arial,trebuchet MS,tahoma,helvetica,clean,sans-serif; background:#fff; color:#333;}

/* general reset ............................................................ */
* {margin:0; padding:0;}
html, body, form, img, fieldset, legend, table, tbody, thead, tfoot, tr, th, td {border:none;}
li {list-style:none;}

/* hide elements from screen but not from source ............................ */
.hidden {position:absolute !important; top:auto; left:-999em !important;}

/* clearfix class ........................................................... */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block; display:block;}

/* line-heights ............................................................. */
p, a, li, span {line-height:1.25em;}


/* ========================================================================== */
/* 01. site frame                                                             */

/* site select */
body#siteSelect {background:#EAF5F9 url("img/body-site-select-dogs.jpg") top left repeat-x; xpadding-left:50%;}
body#siteSelect #siteWrap1 {xbackground:url("img/body-site-select-cats.jpg") top left repeat-x; min-height:830px;}
body#siteSelect #siteWrap2 {xmargin-left:-100%;}

body#siteSelect .footerLine_home {color:#4E4E4E; font-weight:700; text-align:center;}
body#siteSelect .footerLine_home .leftFooter {display:inline; margin:0px 30px; margin-right:35px;}
body#siteSelect .footerLine_home .rightFooter {display:inline;}


/* site frame ............................................................... */
body {background:#fafafa; margin:0; padding:0;}
body#cats {background:#fff url("img/body-bg-cats.jpg") top left repeat-x;}
body#dogs {background:#fff url("img/body-bg-dogs.jpg") top left repeat-x;}
#pageContainer {width:75.85em; margin:0 auto;}

/* grid two left ............................................................ */
.gridTwoLeft {padding-left:17em; xmin-height:500px;}
.gridTwoLeft .wrapper {margin-right:1em;}
.gridTwoLeft .content {float:right; width:100%;}
.gridTwoLeft .navigation {float:left; width:17em; margin-left:-17em;}

/* header ................................................................... */
#pageHeader {border-bottom:3px solid #BFD732;}
#dogs #pageHeader{border-color:#8CC9D5;}
body#cats #pageHeader .siteLabel {margin-bottom:-3px; background:url("img/header-cats.jpg") bottom right no-repeat; height:170px;}
body#dogs #pageHeader .siteLabel {margin-bottom:-3px; background:url("img/header-dogs.jpg") bottom right no-repeat; height:170px;}

/* main content ............................................................. */
#pageMain {background:#fff; margin:0px 37px;}
#pageMain .mainWrap1 {margin:0px -37px; background:url("img/body-bg-br.gif") bottom right no-repeat;}
#pageMain .mainWrap2 {background:url("img/body-bg-bl.gif") bottom left no-repeat; padding-bottom:35px;}
#pageMain .mainWrap3 {background:#fff;}
#contentWrap { padding-right:285px; background:url("img/cats_defense.jpg") top right no-repeat; min-height:450px;}
.homePage #contentWrap {position:relative; min-height:690px;}
body#cats.homePage #contentWrap {background:url("img/cats_homepage.jpg") right 40px no-repeat; min-height:645px;}
body#cats.fosimPage #contentWrap { background:url("img/cats_fosim.jpg") top right no-repeat;}
body#cats.defensePage #contentWrap { background:url("img/cats_defense.jpg") top right no-repeat;}
body#cats.howworkPage #contentWrap { background:url("img/cats_how_work.jpg") top right no-repeat;}
body#cats.whatisPage #contentWrap { background:url("img/cats_what_is.jpg") top right no-repeat;}
body#cats.whyusePage #contentWrap { background:url("img/cats_why_use.jpg") top right no-repeat;}
body#cats.qandaPage #contentWrap { background:url("img/cats_q_and_a.jpg") top right no-repeat;}
body#cats.contactPage #contentWrap { background:url("img/cats_contact.jpg") top right no-repeat;}
body#cats.everyagePage #contentWrap { padding-right:0; background:none;}

body#dogs.homePage #contentWrap { background:url("img/dogs_homepage.jpg") top right no-repeat;}
body#dogs.fosimPage #contentWrap { background:url("img/dogs_fosim.jpg") top right no-repeat;}
body#dogs.defensePage #contentWrap { background:url("img/dogs_defense.jpg") top right no-repeat;}
body#dogs.howworkPage #contentWrap { background:url("img/dogs_how_work.jpg") top right no-repeat;}
body#dogs.whatisPage #contentWrap { background:url("img/dogs_what_is.jpg") top right no-repeat;}
body#dogs.whyusePage #contentWrap { background:url("img/dogs_why_use.jpg") top right no-repeat;}
body#dogs.qandaPage #contentWrap { background:url("img/dogs_q_and_a.jpg") top right no-repeat;}
body#dogs.contactPage #contentWrap {background:url("img/dogs_contact.jpg") top right no-repeat;}
body#dogs.everyagePage #contentWrap {padding-right:0; background:none;}

/* footer ................................................................... */
#pageFooter p {color:#464646; text-align:center; margin:1em 0em; margin-top:1.25em;}

/* site label ............................................................... */
h1.siteLabel {margin:0;}
.siteLabel {overflow:hidden; position:relative;}
.siteLabel a {display:block; width:185px; height:120px; position:absolute; top:30px; right:755px;}

/* ========================================================================== */
/* 02. headings                                                               */

/* general heading declaration .............................................. */
.heading {font-size:100%; color:#000;}
/* hX specifications */
body#cats h1.heading span {font-size:191%; color: #74c04a; font-weight:400; line-height:1.15em; letter-spacing:-1px;}
body#cats h1.heading span span{font-size:100%; color: #257143;}
h2.heading span {font-size:120%;}
body#cats h2.heading span {color:#257143;}
h3.heading span {font-size:100%; font-weight: 700; color: #333;}


/* in content */
h1 {margin:1em 0em; margin-top:1.15em;}
h2 {margin:1em 0em;}

/* ========================================================================== */
/* 03. links & buttons                                                        */

/* general link declaration ................................................. */
a {color:#0094FF;}
a:hover {color:#000;}
body#cats .textblock a {color:#257143;}
body#cats .textblock a:hover {color:#000;}

body#dogs .textblock a {color:#005A87;}
body#dogs .textblock a:hover {color:#000;}

/* fosim link ............................................................... */
#cats .navTree span.fosim {padding-right:15px; background:url("img/cats-fosim.gif") right top no-repeat;}
#dogs .navTree span.fosim {padding-right:15px; background:url("img/dogs-fosim.gif") right top no-repeat;}


/* ========================================================================== */
/* 04. navigation                                                             */

/* site switch .............................................................. */
.siteSwitch {overflow:hidden; float:right; margin:0.5em 1em; margin-right:1.75em; margin-top:0.75em;}
.siteSwitch li {float:left;}
.siteSwitch li a span.siteWrap {position:absolute; top:auto; left:-9999em;}
.siteSwitch li a.dogs {background:url("img/site-dogs-inactive.jpg") top left no-repeat; width:51px; height:52px; display:block;}
.siteSwitch li a.cats {background:url("img/site-cats-inactive.jpg") top left no-repeat; width:51px; height:52px; display:block;}
.siteSwitch li.active a.dogs {background-image:url("img/site-dogs-active.jpg");}
.siteSwitch li.active a.cats {background-image:url("img/site-cats-active.jpg");}

/* tree ..................................................................... */
.navTree {clear:right; margin:0.5em 1em;  margin-right:1.75em; margin-top:5.25em;}
.navTree li {margin-bottom:1px;}
.navTree li .page {display:block; background:#ECF5EE; font-weight:700; padding:0.5em 1em; text-decoration:none; color:#60806D;}
.navTree li a:hover {color:#fff;}
body#cats .navTree li .active .page {color:#fff; background:#74C04A;}
body#cats .navTree li .page {color:#60806D;}
body#cats .navTree li a:hover {color:#fff; background:#74C04A;}
body#cats .navTree li.active .page {color:#fff; background:#74C04A;}

/* breadcrumb ............................................................... */
.breadcrumb {overflow:hidden; margin:1.25em 0em; margin-bottom:1em; margin-top:1em;}
.breadcrumb .heading {display:inline; margin:0; margin-right:0.3em;}
.breadcrumb .heading span {font-size:100%; font-weight:400; color:#999999;}
body#cats .breadcrumb .heading span,
body#dogs .breadcrumb .heading span {color:#999;}
.breadcrumb ol {display:inline;} 
.breadcrumb ol:after {display:inline;}
.breadcrumb li {display:inline; margin-right:0.3em; padding-right:8px; background:url("img/bread-sep.gif") right 0.5em no-repeat;}
.breadcrumb li.last {background:none;}
.breadcrumb li .page {color:#999999;}
.breadcrumb li a:hover {color:#000;}

/* ========================================================================== */
/* 05. basic content                                                          */

.intro p {font-weight: 700; color: #333; margin: 1em 0; }
.productList li {display: inline; list-style-type: none; }
.productList {margin: 3em 0;}

.pageNav a {text-decoration: none;}


/* FAQ ...................................................................... */
.questions {padding-left:1.25em;}
.questions li {list-style-type:disc; color: #257143; list-style-position:outside; margin: 0.5em 0;}
.questions a {text-decoration:none; font-weight:700;}
.questions a:hover {text-decoration:underline; font-weight:700;}
body#cats .questions a  {color:#257143;}
body#cats .questions a:hover {color:#000;}




body.everyagePage .productList li {padding-right:1.25em; float:left; list-style-type:none; background: url("img/dotted_line.png") top right repeat-y; margin-left:1.25em; }
body.everyagePage .productList li.first {margin-left:0;}
body.everyagePage .productList li p {margin:0em 0.5em; margin-bottom:-2em;}
body.everyagePage .productList li.last {background:none;}

#quoteHomepage {position: absolute; top: 3.25em; right: 40px; width: 210px; font-size:120%; color: #74c04a; font-weight: 700; line-height:1.35em;}
#quoteHomepage .quoteWrap {font-size:116%;}
#quoteHomepage span {line-height:1.35em;}
body#cats #quoteHomepage .title {color: #257143;}

/* sponsors */
.sponsors {margin-top:3em;}
.sponsors:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.sponsors {display:inline-block; display:block;}
.sponsors li {float:left; list-style-type: none; margin-left:0.5em;}
.sponsors li.first {margin:0;}
.movie {margin-top: 3em;}

/* numbered list */
.textblock p {margin: 1em 0; margin-top:0.25em;}


/* defense page */
.defensePage li .heading {margin-top:1.5em;}

/* textblock */
#cats .textblock .fosim, #cats .intro .fosim {color:#257143; font-weight:700;}
#dogs .textblock .fosim, #dogs .intro .fosim {color:#005a87; font-weight:700;}


/* contact .................................................................. */
.contactPage .intro {margin:1em 0em;}
.contactPage .intro p {margin:0;}


/* ========================================================================== */
/* 06. components                                                             */

/* generic notification ----------------------------------------------------- */
.notify {padding:0em 0.5em 0.5em 2.75em; margin:1em 0em;}
.notify .heading {margin:0; margin-top:0.5em;}
.notify .heading span {font-size:135%; font-weight:700;}
.notify .message {margin-top:0.25em;}

/* system (notification) ---------------------------------------------------- */
.notify.formError {border:1px solid #c30; background:#fae5e5 url("img/icon_notification_error.gif") 0.55em 0.55em no-repeat;}
body#cats .notify.formError .heading span,
body#dogs .notify.formError .heading span {color:#c30;}
.notify.formError .message, .notify.formError .message a {color:#c30;}
.notify.formError .message a {text-decoration:none;}
.notify.formError .message ul li {background:url("img/error-list.gif") no-repeat scroll left 0.45em; line-height:1.25em; padding-left:12px;}


/* ========================================================================== */
/* 07. basic form elements                                                    */

/* form box ................................................................. */
.formbox {}
.formbox .formheader {margin:1em 0em;}
.formbox .formheader .requiredLegend {text-align:right; margin-bottom:-0.5em; font-size:93%; color:#A0A0A0;}
.formbox .formcontent {margin:0.5em 0em;}
.formbox .formcontent .commentGap {margin-top:2.5em;}
.formbox .formfooter .buttongroup {margin:1em 0em;}

/* input element ............................................................ */
.formrow {margin:0.75em 0em;}
.formrow:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.formrow {display:inline-block; display:block;}
.formrow .inputElement {float:left; position:relative; margin:0;}
.formrow .inputElement .inputCaption {float:left; text-align:right; line-height:1.75em; width:7em;}
.formrow .inputElement .inputCaption .label {display:block; color:#5F5F5F; font-weight:700; margin-right:0.75em; position:relative; line-height:1.5em;}
.formrow .inputElement .inputCaption .label .required {position:absolute; right:-0.5em; top:0.1em; font-size:108%;}
.formrow .inputElement .inputControl {margin-left:7.5em;}
.formrow .inputElement .inputControl .controls .strength {padding-bottom:2.5em; margin-bottom:-2.5em; margin-left:1em; background:url("img/str-0.gif") 1em 1.5em no-repeat; display:block; float:left; border-left:1px solid #bbccde; padding-left:1em; padding-right:16px; min-width:125px; position:relative; font-size:93%;}
.formrow .inputElement .inputControl .controls .strength .fieldHelp {position:absolute; top:1.65em; right:0;}
.formrow .inputElement .inputControl .controls .strength_25 {background-image:url("img/str-25.gif");}
.formrow .inputElement .inputControl .controls .strength_50 {background-image:url("img/str-50.gif");}
.formrow .inputElement .inputControl .controls .strength_75 {background-image:url("img/str-75.gif");}
.formrow .inputElement .inputControl .controls .strength_100 {background-image:url("img/str-100.gif");}
.formrow .inputElement .inputControl .controls .controlHint {color:#666;}
.formrow .inputElement .inputControl .controls .fieldHelp {vertical-align:middle; position:relative; z-index:100;}
/* extra */
.formrow .inputElement.extra {margin-left:0.5em;}
.formrow .inputElement.extra .inputCaption {width:auto;}
.formrow .inputElement.extra .inputControl {float:left; margin-left:0em;}
/* error */
.formrow .inputElement.inpError .inputControl .controls .textfield {border-color:#900;}
.formrow .inputElement.inpError .inputControl {margin-right:-15px; padding-right:15px; background:url("img/error.gif") right 0.45em no-repeat;}

/* hidden */
.formrow.hidden .inputElement {display:none;}

/* button group ............................................................. */
.buttongroup {overflow:hidden;}
.buttongroup .advance {float:right;}
.buttongroup .advance input {font-size:108%;}
.buttongroup .abort {float:left;}

/* page navigation */
.pageNav a.action {text-decoration:none; color:#fff; border:none;}
.pageNav a.action span {display:block; cursor:pointer;} 
.pageNav a.action {float:left;} 
.pageNav a.action .linkWrap4 {padding:0.5em 1em;}
.pageNav a.back .linkWrap5 {padding-left:18px; }
#cats .pageNav a.action {background:#094504 url("img/cats-button-bg.gif") left center repeat-x; }
#cats .pageNav a.action .linkWrap1 {background:url("img/cats-button-bg-tl.gif") top left no-repeat;}
#cats .pageNav a.action .linkWrap2 {background:url("img/cats-button-bg-br.gif") bottom right no-repeat;}
#cats .pageNav a.action .linkWrap3 {background:url("img/cats-button-bg-tr.gif") top right no-repeat;}
#cats .pageNav a.action .linkWrap4 {background:url("img/cats-button-bg-bl.gif") bottom left no-repeat;}
#cats .pageNav a.back .linkWrap5 {background:url("img/nav-back.gif") left 0.3em no-repeat;}


#dogs .pageNav a.action {background:#3886AB url("img/dogs-button-bg.gif") left center repeat-x; }
#dogs .pageNav a.action .linkWrap1 {background:url("img/dogs-button-bg-tl.gif") top left no-repeat;}
#dogs .pageNav a.action .linkWrap2 {background:url("img/dogs-button-bg-br.gif") bottom right no-repeat;}
#dogs .pageNav a.action .linkWrap3 {background:url("img/dogs-button-bg-tr.gif") top right no-repeat;}
#dogs .pageNav a.action .linkWrap4 {background:url("img/dogs-button-bg-bl.gif") bottom left no-repeat;}
#dogs .pageNav a.back .linkWrap5 {background:url("img/nav-back.gif") left 0.3em no-repeat;}



.advance span {display:block;}
.buttonWrap1 {float:left;}
.buttonWrap5 input.submit {padding:0.4em 1em; padding-top:0.3em; padding-right:30px; border:none; color:#fff; font-weight:700; background:url("img/nav-next.gif") right 0.85em no-repeat;}
#cats .buttonWrap1 {background:#094504 url("img/cats-button-bg.gif") left center repeat-x; }
#cats .buttonWrap2 {background:url("img/cats-button-bg-tl.gif") top left no-repeat;}
#cats .buttonWrap3 {background:url("img/cats-button-bg-br.gif") bottom right no-repeat;}
#cats .buttonWrap4 {background:url("img/cats-button-bg-tr.gif") top right no-repeat;}
#cats .buttonWrap5 {background:url("img/cats-button-bg-bl.gif") bottom left no-repeat;}
#cats .buttonWrap5 input.submit {background:url("img/nav-next.gif") right 0.7em no-repeat;}

#dogs .buttonWrap1 {background:#3886AB url("img/dogs-button-bg.gif") left center repeat-x; }
#dogs .buttonWrap2 {background:url("img/dogs-button-bg-tl.gif") top left no-repeat;}
#dogs .buttonWrap3 {background:url("img/dogs-button-bg-br.gif") bottom right no-repeat;}
#dogs .buttonWrap4 {background:url("img/dogs-button-bg-tr.gif") top right no-repeat;}
#dogs .buttonWrap5 {background:url("img/dogs-button-bg-bl.gif") bottom left no-repeat;}
#dogs .buttonWrap5 input.submit {background:url("img/nav-next.gif") right 0.7em no-repeat;} 




/* cats / dogs */
.formrow .inputElement .inputControl .controls .textfield {width:365px; padding:0.15em;}
.formrow .inputElement .inputControl .controls textarea {width:365px; padding:0.15em;}
#cats .formrow .inputElement .inputControl .controls .textfield,
#cats .formrow .inputElement .inputControl .controls textarea {border:1px solid #DBDBDB; background:#EFF6F0;} 

#dogs .formrow .inputElement .inputControl .controls .textfield,
#dogs .formrow .inputElement .inputControl .controls textarea {border:1px solid #DBDBDB; background:#F5FAFC;} 

#cats .formrow .inputElement.inpError .inputControl .controls .textfield,
#cats .formrow .inputElement.inpError .inputControl .controls textarea,
#dogs .formrow .inputElement.inpError .inputControl .controls .textfield,
#dogs .formrow .inputElement.inpError .inputControl .controls textarea {border-color:#CC3300;}

/*font colors dogs*/
body#dogs h1.heading span {font-size:191%; color: #009acd; font-weight:400; line-height:1.15em; letter-spacing:-1px;}
body#dogs h1.heading span span{font-size:100%; color: #005a87;}

body#dogs h2.heading span {color:#005a87;}

body#dogs #quoteHomepage {color:#009acd;}
body#dogs #quoteHomepage .title {color: #005a87; }

body#dogs .questions li {list-style-type: disc; color: #005a87; list-style-position:outside; margin: 0.5em 0;}
body#dogs .questions a  {color:#005a87;}
body#dogs .questions a:hover {color:#000;}

body#dogs .navTree li .page {color:#005a87;}
body#dogs .navTree li a:hover {color:#fff; background:#009acd;}
body#dogs .navTree li.active .page {color:#fff; background:#009acd;}

body.everyagePage .productList li p {margin:0em 0em; margin-bottom:-2em;}
body#dogs.homePage #contentWrap { background:url("img/dogs_homepage.jpg") right 40px no-repeat;}