﻿/*Use this for a hard reset of browser styles */
@import "/CSS/reset.css";
@import "/CSS/base.css";

body, input
{
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 0.98em;
}
a
{
    color: #ED174B;
}
a:hover
{
    color: #AAAAAA;
}
h2
{
    color: #A31831;
    font-size: 1.19em;
}
img
{
    behavior: url("/Javascript/iepngfix.htc");
}
th, td
{
    border: none 0 #FFFFFF;
    padding: 0;
}

/* Main table's side-fade */
#leftSide, #rightSide
{
    background: url(/images/bodyBack.jpg) repeat-y;
    width: 150px;
}
#rightSide
{
    background-position: right top;
}

/* footer fade */
#bottomRow
{
    background: transparent url(/images/footerDrop.jpg) no-repeat top left;
    height: 65px;
}

/* Whole page container */
#pageContainer
{
    margin: auto;
}
#contentContainer
{
    font-size: 10pt;
    padding: 0 5px;
    position: relative;
    width: 835px;
}

/* Header */
#headerLogo
{
    margin: 0 0 11px 15px;
}
#headerLogo a
{
    background: transparent url('/images/logo.jpg') no-repeat;
    display: block;
    height: 87px;
    overflow: hidden;
    position: relative;
    text-indent: -5000px;
    top: 5px;
    width: 339px;
}

/* Search box */
.SearchBox
{
    border: solid 1px #A31831;
    height: 18px;
    text-indent: 3px;
    vertical-align: middle;
    width: 9em !important;
}
.SearchButton
{
    border: solid 1px #A31831 !important;
    margin-left: 4px;
    vertical-align: middle;
}
#searchContainer
{
    background: transparent url('/images/searchback.jpg');
    padding: 5px;
    position: absolute;
    right: 5px;
    top: 0px;
    
}

div#event_button a, div#event_button a:hover
{
    background-image: url('/images/buttons/upcoming_events.jpg');
    height: 33px;
    width: 158px;
}

div#event_button a:hover
{
    background-position: bottom;
}

div#event_button
{
    padding: 5px;
    position: absolute;
    right: 5px;
    left: 677px;
    top: 28px;
    width: 148px;
    float: left;
}

/* Top menu customizations */
/* -------------------------------------------------------------------------- */
/* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */
/* whose class is AspNet-Menu-Horizontal. */
/* Note that the example menu in this web site uses absolute positioning to force the menu to occupy */
/* a specific place in the web page.  Your web site will likely use a different technique to position your */
/* menu.  So feel free to change all the properties found in this CSS rule if you clone this style sheet. */
/* There is nothing, per se, that is magical about these particular property value choices.  They happen to */
/* work well for the sample page used to demonstrate an adapted menu. */
#headerMenu .AspNet-Menu-Horizontal
{
    background: url('/images/menuback.jpg') repeat-x left top;
    height: 36px;
}

/* This rule controls the width of the top tier of the horizontal menu. */
/* BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the top tier menu items that are lined */
/* up from left to right. In other words, this width needs to be the width of the individual */
/* top tier menu items multiplied by the number of items. */
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
{
    width: 835px;
}

/* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
/* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
/* the topmost tier's appearance. */
/* Remember that only the topmost tier of the menu is horizontal.  The second and third tiers are vertical. */
/* So, they need a much smaller width than the top tier.  Effectively, the width specified here is simply */
/* the width of a single menu item in the second and their tiers. */
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul
{
    left: 0;    
}
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
{
    left: 144px;
    top: 0;
}
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul ul
{
    left: 11.5em;
    top: 0;
    width: 13.5em;
}

/* Generally, you use this rule to set style properties that pertain to all menu items. */
/* One exception is the width set here.  We will override this width with a more specific rule (below) */
/* That sets the width for all menu items from the second tier downward in the menu. */
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
{
    font-size: 9pt;
    font-weight: bold;
    text-align: center;
    /*width: 139px;*/
    padding: 0 26px;
}

/* This rule establishes the width of menu items below the top tier.  This allows the top tier menu items */
/* to be narrower, for example, than the sub-menu items. */
/* This value you set here should be slightly larger than the left margin value in the next rule. See */
/* its comment for more details. */
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
{
    background: #C01F3B url('/images/blacktri.png') no-repeat top left;
    border: none;
    border-top: solid 1px #A31831;
    font-weight: normal;
    height: 28px;
    text-align: left;
    text-indent: 25px;
    min-width: 144px;
}
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li
{
    width: 11.5em;
}

/**** Menu CSS ****/
/* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
/* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
/* in each menu item.  One comes from the CSS rule (above) governing the li tag that each menu item has. */
/* The second image comes from this rule (below). */
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li a, #headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li span
{
    color: #FFFFFF;
    padding: 6px 2px 4px 0px;
}
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li a, #headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li span
{
    padding: 3px 2px 4px 0px;
}

/* When you hover over a menu item, this rule comes into play. */
/* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */
/* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */
/* See MenuAdapter.js (in the JavaScript folder). */
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li:hover, #headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li.AspNet-Menu-Hover
{
    background: url('/images/menuover.jpg') repeat-x left top;
}
#headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li:hover, #headerMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li.AspNet-Menu-Hover
{
    background: #EA294A url('/images/blacktri.png') no-repeat top left;
}

#mainContainer
{
    margin-top: 4px;
}
#mainContainer table td
{
    vertical-align: top;
}

/* Footer */
#footerContainer
{
    background-color: #3C3B3C;
    min-height: 60px;
    padding: 10px 0 0 0;
    text-align: center;
}
#footer, #footer a
{
    color: #FFFFFF;
    font-size: 12px;
}
#footer a:hover
{
    color: #ED174B;
}

/* Footer treeview sitemap */
#footer .footerSiteMap
{
    margin-bottom: 5px;
}
#footer .footerSiteMap ul li
{
    display: inline-block;
    margin: 4px;
}

.AccessibleForm dt
{
    clear: both;
    float: left;
    margin: 0.5em 0 0 0;
    width: 33%;
}
.AccessibleForm dd
{
    float: left;
    margin: 0.25em 0;
    width: 67%;
}
.AccessibleForm dd.textarea, .AccessibleForm dt.textarea
{
    float: none;
    width: 100%;
}
.AFNarrow dt
{
    width: 15%;
}
.AFNarrow dd
{
    width: 85%;
}
.ModalBackground
{
    background-color: #000000;
    filter: alpha(opacity=70);
    height: 100%;
    left: 0;
    opacity: .7;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 100;
}
.popupServer
{
    background: #DBE9FB;
    border: solid 2px #A9D3F6;
    height: auto;
    padding: 15px 30px 30px;
    position: absolute;
    text-align: left;
    width: auto;
    z-index: 101;
}
.Required
{
    color: #FF0000;
}
.TinyType
{
    font-size: smaller;
}

/***************************************************************************************************************/
/* Child master styles below */
/***************************************************************************************************************/
/* Left menu */
#childLayout #leftMenuContainer
{
    background-color: #5D5C5D;
    padding-bottom: 25px;
    width: 200px;
}
#leftMenuContainer .AspNet-TreeView
{
    background-color: #3C3B3C;
}
#leftMenuContainer .AspNet-TreeView ul li
{
    background: transparent url('/images/redline.png') no-repeat top left;
    font-size: 18px;
    font-weight: bold;
    list-style-type: none;
    padding: 4px 0 3px;
    text-indent: 5px;
}
#leftMenuContainer a
{
    color: #FFFFFF;
    padding-left: 4px;
    text-decoration: none;
}
#leftMenuContainer a:hover
{
    color: #ED174B;
}
#leftMenuContainer .AspNet-TreeView ul
{
    padding-bottom: 5px;
}
#leftMenuContainer .AspNet-TreeView ul ul
{
    margin: 5px 0 2px 12px;
}
#leftMenuContainer .AspNet-TreeView li li
{
    background: transparent url('/images/pinktri2.png') no-repeat top left;
    font-size: 9pt;
    margin-bottom: 6px;
    padding: 0;
    text-indent: 20px;
}
#leftMenuContainer .AspNet-TreeView li li:hover, #leftMenuContainer .AspNet-TreeView li li.AspNet-Menu-Hover
{
    background-image: url('/images/blacktri3.png');
}

#childLayout
{
    width: 100%;
}
#mainContentContainer
{
    padding: 10px;
}

/***************************************************************************************************************/
/* Page specific styles below */
/***************************************************************************************************************/
/* Home page */
.AnimalCategoryBox
{
    text-align: left;
    width: 295px;
}
.AnimalCategoryHeader
{
    background-color: #3C3B3C;
    color: #FFFFFF;
    font-size: 13pt;
    font-weight: bold;
    padding: 5px;
}
.AnimalCategoryHeaderIcon
{
    background: url('/images/pinktri.png') no-repeat;
    display: inline-block;
    height: 18px;
    vertical-align: top;
    width: 20px;
}
.AnimalCategoryListBox
{
    font-size: 9pt;
    padding: 5px;
}
.AnimalCategoryListBox a:hover
{
    color: #A31831;
}
.AnimalCategoryListBox .CategoryItem
{
    display: inline-block;
    line-height: 24px;
    padding-left: 5px;
    width: 30%;
}
.AnimalCategoryListBox .CategoryItemIcon
{
    background: url('/images/blacktri2.png') no-repeat top left;
    display: inline-block;
    height: 9px;
    width: 12px;
}
.FeaturedProductHeader
{
    background: transparent url('/images/head2back.jpg') repeat-x top left;
    color: #FFFFFF;
    font-size: 13pt;
    font-weight: bold;
    padding: 5px 10px;
}
.HomeContent
{
    padding: 0 20px;
}
#flashWrapper
{
    padding-bottom: 3px;
}

/* Category page */
.ProductType
{
    border-bottom: solid 3px #A31831;
}
.ProductType .SideBySide
{
    display: inline-block;
    vertical-align: top;
}
.ProductType ul, .ProductType li, .ProductType a
{
    color: #505050;
    font-weight: bold;
    list-style-type: none;
}
.ProductType a:hover
{
    color: #ED174B;
}
#productsContainer
{
    margin-left: 10px;
}
#productTypeFilter
{
    margin-bottom: 10px;
}
#titleProducts
{
    background: transparent url('/images/titleline.jpg') no-repeat top left;
    font-size: 23px;
    height: 40px;
    margin: 0;
    padding: 2px 0 0;
    text-indent: 32px;
}

/* Product page */
.Absolute
{
    float: right;
    margin-top: 18px;
    position: relative;
    width: 380px;
}
.BreadCrumb
{
    border-bottom: solid 1px #F2F2F2;
    font-size: 10.5pt;
    padding: 5px;
}
.BreadCrumb a
{
    color: #AAAAAA;
}
.BreadCrumb a:hover
{
    color: #ED174B;
}
.BreadCrumb .LastBreadCrumb
{
    color: #990728;
}
.MainRightImage
{
    background: #F2F2F2;
    border: 1px solid #D9D9D9;
    float: right;
    margin: 0 10px;
    padding: 4px;
    width: 350px;
}
.ProductDetails
{
    clear: both;
}
.ProductInfo
{
    float: left;
    padding-left: 15px;
    width: 410px;
}
.ajax__tab_body
{
    overflow: auto;
}

/* Locator page */
.CorporateHeader
{
    text-align: center;
}
.Results
{
    margin: 0 25px;
}
.Results li
{
    float: left;
    list-style-type: none;
    margin: 2px 0;
    width: 50%;
}
#statesMapWrapper
{
    text-align: center;
}

/* Profile page */
.ProfileDetailPhoto
{
    float: left;
    padding: 0 10px 10px 0;
}
#profileDetailBio
{
    clear: both;
}
#profileDetails h2, #profileDetails h3
{
    margin: 0;
}
#profilePreview
{
    margin: 0;
}
#profilePreview li
{
    background-color: #C0C0C0;
    border: solid 2px #000000;
    float: left;
    list-style-type: none;
    margin-bottom: 15px;
    padding: 10px;
    width: 591px;
}
#profilePreview h3
{
    margin: 0;
}
#profilePreview .ProfilePhoto
{
    float: left;
    margin-right: 10px;
}
#profileSubTypeList
{
    margin: 0;
}
#profileSubTypeList li
{
    list-style-type: none;
}
#profileSubTypeList li h2
{
    margin-bottom: 0;
}

/* Contact page */
.ContactField
{
    border: solid 1px #B9B9B9;
}
.ContactForm dt
{
    font-weight: bold;
}

/* Search page */
.SearchResults
{
    margin: auto 1em 1em;
}
.SearchResults .SearchPager td
{
    padding: 0 2px;
    text-align: right;
    width: 100%;
}
.SearchResults td
{
    border: none 0 #FFFFFF !important;
    border-bottom-style: none !important;
    border-bottom-width: 0 !important;
    padding-top: 5px;
}
.SearchResultUrl
{
    font-size: smaller;
}

/* Giveaway Form */
.GiveAway input
{
    width: 300px;
}

.GiveAway textarea
{
    width: 100%;
}

.GiveAway dt label
{
    font-weight: bold;
}

.GiveAway .CheckboxList input, .GiveAway .CheckboxList label
{
    padding-left: 5px;
    vertical-align: middle;
    width: auto;
}

.NewLine
{
    clear: both;
}

.Center
{
    text-align: center;
}

.MinHeight
{
    height: 400px;
    padding-top: 25px;
    text-align: center;
}
#ChildLeftNavTools
{
    padding-top: 10px;
    text-align: center;
}
#ChildLeftNavTools a
{
    padding-left: 0;
}
#ChildLeftNavTools img
{
    margin: 30px 0;
}

.dl-entitygrid-pager table
{
    width: 100%;
}
.dl-entitygrid-pager table td
{
    padding: 10px 1px 0;
}
.dl-entitygrid-pager table td select
{
    margin-top: -2px;
}
#flashWrapper object {
	height: 342px !important;
}
