/* 
    Document   : color
    Created on : Feb 12, 2013, 1:17:45 PM
    Author     : scottmarkoski
    Description:
        Purpose of the stylesheet follows.
        
        Defines color or visible attributes including color, background (-color) borders, etc

        background-color
        color
        background-size (related to color/image)
        border
        border-left
        border-right
*/

/**> General Layout <**********************************************************/
body {
    background-color: #FDF7EB;
    color: #000;
}

#wrapper {
    background: #FFF url(../img/layout/wrapper_background.png) top left repeat-y;
    background-size: 68.571em; /* 960px @ 14px; CSS3 to scale background image for smaller/larger font sizes */
}

#header {
    background-color: #0B6D9D;
    /*background: #91BDD3 url(../img/layout/header_background.png) top left repeat-x;*/
    /*background: #91bdd3 url('https://images.smalldog.com/img/logo/SDE-main-site-header-v4.png') top left no-repeat;*/
    /*    background-position-x: top;
        background-position-y: left;*/
    /*    background: #1e5799;
        background: -moz-linear-gradient(top,  #1e5799 0%, #0b6d9d 48%, #7db9e8 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(48%,#0b6d9d), color-stop(100%,#7db9e8));
        background: -webkit-linear-gradient(top,  #1e5799 0%,#0b6d9d 48%,#7db9e8 100%);
        background: -o-linear-gradient(top,  #1e5799 0%,#0b6d9d 48%,#7db9e8 100%);
        background: -ms-linear-gradient(top,  #1e5799 0%,#0b6d9d 48%,#7db9e8 100%);
        background: linear-gradient(to bottom,  #1e5799 0%,#0b6d9d 48%,#7db9e8 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );*/

}

#logo {
    background: transparent url('https://images.smalldog.com/img/logo/SDE-main-site-header-v3.png') top left no-repeat;
}

#sidebar {
    background-color: #E7F1F5;
    border: 0;
}

#content {
    background-color: #FFF; /* a bit of a hack in case of very small font size & non-scaling background */
}

#fullwrap {
    border-left: 0.09em solid #CCC; /* 1px @ 14px  */
    border-right: 0.09em solid #CCC;
}

#footer {
    background-color: #036;
    color: #E7F1F5;
}





/**> Header Layout <***********************************************************/
#header a.help:hover {
    border-bottom: none;
}

#mini_cart {
    color: #FFF;
}

#mini_cart a:link, #mini_cart a:visited {
    color: #FFF;
}

#mini_cart a:hover { 
    border-bottom: 0.09em solid #FFF; /* 1px @ 14px */
}

#mini_cart .livechat  a:link, #mini_cart .livechat a:visited { 
    color:#f7b13d; 
}




/* The "quickNav" tabs are implemented using Douglas Bowman's "Sliding Doors" technique. See: http://www.alistapart.com/articles/slidingdoors/ */

#quick_nav li {
    -webkit-border-top-left-radius: 0.357em;
    -webkit-border-top-right-radius: 0.357em;
    -moz-border-radius-topleft: 0.357em;
    -moz-border-radius-topright: 0.357em;
    border-top-left-radius: 0.357em;
    border-top-right-radius: 0.357em;
    background-color: #036;
}

#quick_nav li a, #quick_nav li a:link {
    color: #91BDD3;
}

#quick_nav li a:hover { 
    color: #F7B13D; 
}




/* seach */
#site_nav {
    background-color: #036;
}

#search input {
    border-top: 0.15em solid #BBB; /* 2px @ 14px */
    border-right: 0.15em solid #DDD; /* 2px @ 14px */
    border-bottom: 0.15em solid #DDD; /* 2px @ 14px */
    border-left: 0;
}

#sitesearch:focus {
    outline: none;
}

#search #searchPredictions {
    background-color: #E7F1F5;
    border: solid 0.09em #AAA;
    -webkit-border-bottom-right-radius: 0.357em;
    -webkit-border-bottom-left-radius: 0.357em;
    -moz-border-radius-bottomright: 0.357em;
    -moz-border-radius-bottomleft: 0.357em;
    border-bottom-right-radius: 0.357em;
    border-bottom-left-radius: 0.357em;
}

#search #searchPredictions li:hover {
    background-color: #C9D3D7;
}

#search #searchPredictions li a {
    color: #036;
}

#search #searchPredictions li a:hover {
    color: #036;
}

#search #searchPredictions ul li.selected {
    background-color: #C9D3D7;
}






/* The "sections" links are implemented using inline lists as described by Mark Newhouse in "CSS Design: Taming Lists": http://www.alistapart.com/articles/taminglists/ */
#sections li {
    border-right: 0.15em solid #FFF; /* 2px @ 14px */
}

#sections li:last-child {
    border-right: none;
}

#sections li a, #sections li a:link {
    color: #FFF;
}

#sections li a:hover { 
    color: #F7B13D; 
}





/* Daily special */
#dailySpecial {
    background-color: #FFF;
    border-bottom: 0.09em solid #ccc;
    border-right: 0.09em solid #E7F1F5;
}

#dailySpecial h2 {
    background-color: #339933;
    color: #FFFFFF;
}

#dailySpecial #specialDescription .price {
    color: #339933;
}

#dailySpecial a, #dailySpecial a:link {
    color: #036;
}

#dailySpecial #dsAllSpecials a, #dailySpecial #dsAllSpecials a:link {
    color: #FFF;
}







/**> Sidebar Layout <**********************************************************/
#sidebar ul {
    border-bottom: 0.09em solid #CCC;  /* 1px @ 14px */
}

#sidebar ul li a, #sidebar ul li a:link {
    color: #036;
}

#sidebar ul li a:hover, #sidebar ul li.selected a:hover {
    background-color: #C9D3D7;
}

#sidebar ul.flyout {
    border-top: 0.09em solid #FFF; /* 1px @ 14px */
    border-left: 0.09em solid #FFF;
    border-bottom: 0.09em solid #CCC;
    border-right: 0.09em solid #CCC;
    background-color: #E7F1F5;
}

#sidebar ul.flyout li:hover, #sidebar ul li.selected { 
    background-color: #C9D3D7; 
}



.productDetails p.originalPrice {
    color: #000;
}







/**> Footer Layout <***********************************************************/
#footer a:link, #footer a:visited {
    color: #91BDD3;
}

#footer a:hover { 
    color: #F7B13D; 
}

#footer div.column h2, #footer div.column h2 a, #footer div.column h2 a:visited { 
    color: #E7F1F5; 
}

#footer div.column h2 a:hover { 
    color: #F7B13D; 
}

#footer #dog_friend p.photo {
    background-color: #FFF;
}

#footer #dog_friend p.photo img {
    border: 0.083em solid #CCC; /* 1px @ 12px */
}




/* Generic Content Styles */
/**> Content Layout <**********************************************************/
h4 {
    background-color: #E7F1F5;
    color: #036;
}

hr {
    border: 0;
    border-bottom: 0.15em dashed #91BDD3; /* 2px @ 14px */
}

h2.help {
    color: #D08D20;
}

img {
    border: none;
}




/**> Content Links <***********************************************************/
/* Reference:
 * - http://meyerweb.com/eric/css/link-specificity.html
 * - http://meyerweb.com/eric/thoughts/2007/06/04/ordering-the-link-states/
*/
a:focus, a:link, a:visited {
    color: #0B6D9D;
}

.productList a:link:hover {
    border-bottom: 0.09em solid #0B6D9D;
}

.productList a:visited:hover {
    border-bottom: 0.09em dashed #0B6D9D;
}

.productList td.photo a:link:hover {
    border-bottom: none;
}

.productList td.photo a:visited:hover {
    border-bottom: none;
}



/**> Tabbed Views <************************************************************/
/* The tabs are implemented using Douglas Bowman's "Sliding Doors" technique. See: http://www.alistapart.com/articles/slidingdoors/ */
.tabbed {
    border: 0.15em solid #91BDD3; /* 2px @ 14px */
}

.tab > h3.tab_heading {
    background-color: #036;
    -webkit-border-top-left-radius: 0.357em;
    -webkit-border-top-right-radius: 0.357em;
    -moz-border-radius-topleft: 0.357em;
    -moz-border-radius-topright: 0.357em;
    border-top-left-radius: 0.357em;
    border-top-right-radius: 0.357em;
}

.tab > h3.tab_heading span, .tab > h3.tab_heading a {
    color: #91BDD3;
}

.tab.selected > h3.tab_heading {
    background-color: #E7F1F5;
    border-color: #91BDD3;
    border-color: #91BDD3;
    border-width: 0.15em;
    border-left-style: solid;
    border-right-style: solid;
    border-top-style: solid;
}

.tab.selected > h3.tab_heading span, .tab.selected > h3.tab_heading a {
    color: #036;
}

.tab.disabled > h3.tab_heading {
    background-color: #EEE;
}

.tab.disabled > h3.tab_heading span, .tab.disabled > h3.tab_heading a {
    color: #888;
}

.tab > h3.tab_heading span:hover, .tab > h3.tab_heading a:hover {
    color: #F7B13D;
}

.tab.selected > h3.tab_heading span:hover, .tab.selected > h3.tab_heading a:hover {
    color: #036;
}

.tab.disabled > h3.tab_heading span:hover, .tab.disabled > h3.tab_heading a:hover {
    color: #888;
}









/**> Tables <******************************************************************/
.productList tr.header {
    color: #036;
}

.productList {
    border-bottom: 0.15em solid #91BDD3;
}

.productList tr.header th {
    background-color: #E7F1F5;
    border-top: 0.15em solid #91BDD3;
}

.productList tr.header th:first-child { 
    -webkit-border-top-left-radius: 0.357em;
    -moz-border-radius-topleft: 0.357em;
    border-top-left-radius: 0.357em;
    border-left: 0.15em solid #91BDD3; 
}

.productList tr.header th:last-child { 
    -webkit-border-top-right-radius: 0.357em;
    -moz-border-radius-topright: 0.357em;
    border-top-right-radius: 0.357em;
    border-right: 0.15em solid #91BDD3;
}

.productList tr.subHeader {
    background-color: #036;
}

.productList tr.subHeader th, .productList tr.subHeader th a:link, .productList tr.subHeader th a:visited {
    color: #E7F1F5;
}

.productList tr.header th a:link, .productList tr.header th a:visited { 
    color: #036; 
}

.productList tr.warning, .required { 
    color: #990101; 
}

.productList tr.special { 
    color: #393; 
}

.productList tr th {
    color: #036;
}

.productList tr.even { 
    background-color: #F5F5F5; 
}

.productList tr .first { 
    border-left: 0.15em solid #91BDD3;
}

.productList tr .last { 
    border-right: 0.15em solid #91BDD3;
}

.productList tr td.photo a {
    background-color: #FFF;
}

.productList tr td.price span.special a { 
    color: #393; 
}

.productList tr td.combined ul li {
    border-right: 0.09em solid #036;
}

.productList tr td.combined ul li.first {
    border-left: none;
}

.productList.productList tr td.combined ul li.last {
    border-right: 0;
}

.productList.productList tr td.combined ul li.price { 
    color: #036; 
}

.productList tr td.combined ul li.special a { 
    color: #393; 
}



/***** LIST "TABLES" */





/**> Table Tweaks for Shopping Cart <******************************************/
#products-totals tr.fee, #billing-shipping tr.paymentMethod {
    background-color: #E7F1F5;
}



/* >>>>>>>>>> Pagination style */
li.paginationLink a:hover {
    background-color: #E7F1F5;
    -webkit-border-radius: 0.357em;
    -moz-border-radius: 0.357em;
    border-radius: 0.357em;
}

.paginationWrapper .paginationSelectedPage {
    background-color: #036;
    color: #FFF;
    -webkit-border-radius: 0.357em;
    -moz-border-radius: 0.357em;
    border-radius: 0.357em;
}



/**> Product Detail View <*****************************************************/
.productDetails div.photo img {
    border:  0.15em solid #E7F1F5; /* 2px @ 14px */
}

.productDetails p.price {
    color: #393;
}

.productDetails table {
    border-bottom: none;
}

.productDetails table th {
    color: #000;
}

.productDetails #specialsList li:before {
    border-top: 0.357em solid transparent;
    border-bottom: 0.357em solid transparent;
    border-left: 0.571em solid green;
}

.productDetails #specialsList span.price {
    color: #090;
}

.productDetails #productAvailabilityStatus {
    color: #F7B13D;
}

.productDetails .pawRating {
    background-size: 1.429em 1.429em;
}

.productDetails .pawRatingFull {
    background-image: url('/img/paw.png');
}

.productDetails .pawRatingEmpty {
    background-image: url('/img/open-paw.png');
}






/**> One-Liner Notes <*********************************************************/
.note, .note, .special, .warning {
    color: #FFF;
}

.special p a, .warning p a {
    color: #FFF;
}

.note {
    color: #000;
    background-color: #F5F5F5;
}

.warning {
    background-color: #900;
    color: #fff;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
}

.warning p {
    background: transparent url(../img/caution.png) left center no-repeat;
}

.special {
    background-color: green;
    color: #fff;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
}

.special p {
    background: transparent url(../img/check.png) left center no-repeat;
}





/* Cart specifics >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.productList a.deletex {
    color: #91BDD3;
}

.productList a.deletex:hover {
    border-bottom: none;
    color: #0B6D9D;
}



/**> Employee Bios <***********************************************************/
#crew .column .employee a.photo img {
    border: 0.09em solid #CCC; /* 1px @ 14px */
}




/**> Home Page <******************************************************/




#newsletterSubscribeList > li.header {
    border-bottom: 0.15em dashed #91BDD3;
}



/* Table section things. things that were tables, but are now something else */
.columnSection .header {
    -webkit-border-top-left-radius: 0.357em;
    -webkit-border-top-right-radius: 0.357em;
    -moz-border-radius-topleft: 0.357em;
    -moz-border-radius-topright: 0.357em;
    border-top-left-radius: 0.357em;
    border-top-right-radius: 0.357em;
    border: 2px solid #91BDD3;
    background-color: #E7F1F5;
    border-bottom: none;
}

.columnSection .header > h3 {
    color: #036;
}

.columnSection .data {
    border-left: 0.09em solid #91BDD3;
    border-right: 0.09em solid #91BDD3;
    border-bottom: 0.15em solid #91BDD3;
}


#orderTotalSummary {
    background-color: #FFF;
    border-top: 0.15em dashed #91BDD3;
/*    border-left: 0.09em solid #91BDD3;
    border-right: 0.09em solid #91BDD3;
    border-bottom: 0.15em solid #91BDD3;*/
}

/** ORDER history >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
#ordersSearchBox {
    background-color: #E7F1F5;
    -webkit-border-radius: 0.357em;
    -moz-border-radius: 0.357em;
    border-radius: 0.357em;
}

.orderHistory {
    background-color: #F5F5F5;
    border: 0.143em solid #91BDD3;
    -webkit-border-radius: 0.357em;
    -moz-border-radius: 0.357em;
    border-radius: 0.357em;
}

.orderHistory.pending {
    border-color: #393;
}

.orderHistory.canceled {
    border-color: #F7B13D;
}

.historyHeader {
    background-color: #E7F1F5;
    -webkit-border-top-left-radius: 0.357em;
    -webkit-border-top-right-radius: 0.357em;
    -moz-border-radius-topleft: 0.357em;
    -moz-border-radius-topright: 0.357em;
    border-top-left-radius: 0.357em;
    border-top-right-radius: 0.357em;
}

.historyHeader h3 {
    color: #003366;
}

.orderHistoryItemList li:first-child {
    border-bottom: 0.143em solid #000;
}

.orderHistoryItemList li:nth-child(even) {
    background-color: #FFF;
}

.orderHistoryItemList li:nth-child(odd) {
    background-color: #CCC;
}

.expand {
    border-top: 0.714em solid transparent;
    border-bottom: 0.714em solid transparent;
    border-left: 0.714em solid #003366;
}

.expand:hover {
    border-left-color: #F7B13D;
}

.orderHistoryItemList li.returnedItem, .returnedItem {
    background-color: #ed7878;
}

.orderHistoryItemList li.treat, .treat {
    background-color: #393;    
}

.orderHistoryItemList li.unshipped, .unshipped {
    background-color: #0B6D9D;
}

.orderHistoryItemList li.stripes {
    color: #FFF;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
        to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
}

.orderHistoryItemList li.stripes a, .orderHistoryItemList li.stripes a:link, .orderHistoryItemList li.stripes a:visited {
    color: #FFF;
}

.pendingWebOrder {
    border: 0.214em solid #393;
    background-color: #FFF;
}

.canceledOrder {
    background-color: #FFF;
    border: 0.214em solid #F7B13D;
}

.trackingList {
    border: 0.071em solid #91BDD3;
    -webkit-border-radius: 0.357em;
    -moz-border-radius: 0.357em;
    border-radius: 0.357em;
}

.trackingList li {
    background-color: #FFF;
    border-bottom: 0.071em #91BDD3 dashed;
}

.trackingList li:first-child {
    -webkit-border-top-left-radius: 0.357em;
    -webkit-border-top-right-radius: 0.357em;
    -moz-border-radius-topleft: 0.357em;
    -moz-border-radius-topright: 0.357em;
    border-top-left-radius: 0.357em;
    border-top-right-radius: 0.357em;
}

.trackingList li:last-child {
    border-bottom: none;
    -webkit-border-bottom-right-radius: 0.357em;
    -webkit-border-bottom-left-radius: 0.357em;
    -moz-border-radius-bottomright: 0.357em;
    -moz-border-radius-bottomleft: 0.357em;
    border-bottom-right-radius: 0.357em;
    border-bottom-left-radius: 0.357em;
}


#dsAllSpecials {
    background-color: #0B6D9D;
}

span.closeout {
    color: #FF4D4D;
}

.deviceSearchResult {
    -webkit-border-radius: 0.357em;
    -moz-border-radius: 0.357em;
    border-radius: 0.357em;
}

.deviceSearchResult.selected {
    background-color: #e7F1F5;
}