/* 
    Document   : RootStyle
    Created on : Feb 12, 2013, 1:17:01 PM
    Author     : scottmarkoski
    Description:
        Purpose of the stylesheet follows.
*/
@import "FancyButtons.css";
@import "linkflow.css";
@import "Passbook.css";

@import "typography.css";
@import url(typography-mobile.css) (max-device-width: 320px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2), (max-device-width: 320px) and (orientation: portrait), (max-width: 750px); /* mobile */ 

@import "color.css";
@import url(color-mobile.css) (max-device-width: 320px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2), (max-device-width: 320px) and (orientation: portrait), (max-width: 750px); /* mobile */ 

/* Order of these imports matters. Order the overrides after the default layout.css or suffer the consequences */
@import url(layout.css); /* desktop */
@import url(layout-ipad.css) (max-device-width: 768px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2), (max-device-width: 768px) and (orientation: portrait), (max-width: 960px); /* ipad portrait */
@import url(layout-mobile.css) (max-device-width: 320px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2), (max-device-width: 320px) and (orientation: portrait), (max-width: 568px); /* mobile */ 

@import "NewTables.css"; /* desktop */
@import url(mobile-tables.css) (max-device-width: 320px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2), (max-device-width: 320px) and (orientation: portrait), (max-width: 750px); /* mobile */ 

@import "BetterForms.css";
@import url(mobile-forms.css) (max-device-width: 320px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2), (max-device-width: 320px) and (orientation: portrait), (max-width: 750px); /* mobile */

@import "Templates.css";
@import url(mobile-templates.css) (max-device-width: 320px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2), (max-device-width: 320px) and (orientation: portrait), (max-width: 750px); /* mobile */

@import "CategoryFiltering.css";
@import url(mobile-categoryfiltering.css) (max-device-width: 320px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2), (max-device-width: 320px) and (orientation: portrait), (max-width: 750px); /* mobile */

/* Some miscellaneous stuff I couldn't find a place for */
#tradeInForm select {
    width: 14.286em;
}

.delete, .deletex {
    text-decoration: none;
    font-size: 1.714em;
    cursor: pointer;
}

.delete:link:hover, .delete:visited:hover, .deletex:link:hover, .deletex:visited:hover {
    text-decoration: none;
} 

.delete:active, .deletex:active {
    position: relative;
    top: 0.0714em;
}


#logo .watermark {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: transparent bottom left no-repeat;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
    background-size: 45%;
}

.systemMessage {
    background-color: #f7b13d;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 10px 0;
    padding: 10px 0;
    text-align: center;
    color: #000;
    font-size: 16px;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.2, rgba(255, 255, 255, .2)), color-stop(.2, transparent),
        color-stop(.4, transparent), color-stop(.4, rgba(255, 255, 255, .2)),
        color-stop(.6, rgba(255, 255, 255, .2)), color-stop(.6, transparent),
        color-stop(.8, transparent), color-stop(.8, rgba(255, 255, 255, .2)),
        to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 20%, transparent 20%,
        transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 60%,
        transparent 60%, transparent 80%, rgba(255,255,255, .2) 80%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 20%, transparent 20%,
        transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 60%,
        transparent 60%, transparent 80%, rgba(255,255,255, .2) 80%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 20%, transparent 20%,
        transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 60%,
        transparent 60%, transparent 80%, rgba(255,255,255, .2) 80%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 20%, transparent 20%,
        transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 60%,
        transparent 60%, transparent 80%, rgba(255,255,255, .2) 80%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 20%, transparent 20%,
        transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 60%,
        transparent 60%, transparent 80%, rgba(255,255,255, .2) 80%, transparent);
}

/* ab test stuff */
.productsDisplay li .star {
    background-image: url('https://images.smalldog.com/img/Newest-Star.png');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.productsDisplay li .flag-no-pole {
    background-image: url('https://images.smalldog.com/img/Newest-Ribbon.png');
    background-repeat: no-repeat;
    background-size: auto 16px;
    display: inline-block;
    height: 16px;
    width: 24px;
}

.productsDisplay li .flag-with-pole {
    background-image: url('https://images.smalldog.com/img/Newest-Flag.png');
    background-repeat: no-repeat;
    background-size: auto 16px;
    display: inline-block;
    height: 16px;
    width: 12px;
}

.productDetail.star {
    background-image: url('https://images.smalldog.com/img/Newest-Star.png');
    background-repeat: no-repeat;
    background-size: 21px 21px;
    display: inline-block;
    width: 21px;
    height: 21px;
    vertical-align: middle;
}

.productDetail.flag-no-pole {
    background-image: url('https://images.smalldog.com/img/Newest-Ribbon.png');
    background-repeat: no-repeat;
    background-size: auto 21px;
    display: inline-block;
    height: 21px;
    width: 31px;
}

.productDetail.flag-with-pole {
    background-image: url('https://images.smalldog.com/img/Newest-Flag.png');
    background-repeat: no-repeat;
    background-size: auto 21px;
    display: inline-block;
    height: 21px;
    width: 18px;
}

.newestKey {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #ccc;
}

.newestKey .star {
    background-image: url('https://images.smalldog.com/img/Newest-Star.png');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.newestKey .flag-no-pole {
    background-image: url('https://images.smalldog.com/img/Newest-Ribbon.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: auto 16px;
    display: inline-block;
    height: 16px;
    width: 24px;
}

.newestKey .flag-with-pole {
    display: inline-block;
    background-image: url('https://images.smalldog.com/img/Newest-Flag.png');
    background-repeat: no-repeat;
    background-size: auto 16px;
    display: inline-block;
    height: 16px;
    width: 12px;
}