/* one-day event only (remove after 11/23)
======================================================== */

h2 span.oneday {
    color: #f30;
    font-size: 14px;
}

.header span.oneday {
    color: #f30;
    font-size: 16px;
}

.product-selection h2 {
    line-height: 1.2em;
}

/* end of one-day event
======================================================== */

#ribbon {
	/*background: url('bg/border-top-gradient.jpg') no-repeat;*/
    background: -moz-linear-gradient(left, #fff, rgba(248, 248, 248, 0) 150px),
                -moz-linear-gradient(right, #fff, rgba(248, 248, 248, 0) 150px),
                -moz-linear-gradient(top, #e4e4e4, rgba(248, 248, 248, 0.3) 5px);
    background: -webkit-linear-gradient(left, #fff, rgba(248, 248, 248, 0) 150px),
                -webkit-linear-gradient(right, #fff, rgba(248, 248, 248, 0) 150px),
                -webkit-linear-gradient(top, #e4e4e4, rgba(248, 248, 248, 0.3) 5px);
    background: linear-gradient(left, #fff, rgba(248, 248, 248, 0) 150px),
                linear-gradient(right, #fff, rgba(248, 248, 248, 0) 150px),
                linear-gradient(top, #e4e4e4, rgba(248, 248, 248, 0.3) 5px);
    background-color: #f8f8f8;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid #CCCCCC;
    clear: both;
    text-align: center;
    padding-top: 5px;
    position: relative;
}

#ribbon ul {
    margin: 0 auto;
    padding: 8px 0;
    font-size: 12px;
}

#ribbon strong {
	font-weight: normal;
}

#ribbon ul li {
    display: inline-block;
    padding: 0 35px;
}

#ribbon ul li a.block {
    display: inline-block;
}

#ribbon ul li a.block:hover, #ribbon ul li a.block:focus {
    color: #08c;
}

#ribbon ul li img {
    margin: 0 5px 2px 0;
    vertical-align: middle;
}

/* "NEW" badge */
.with-badge {
	position: relative;
	margin-top: 22px;
}
.new-badge {
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
	display: inline-block;
	position: absolute;
	top: -2em;
	left: 0;
	padding: 0 0.8em;
	font-size: 11px;
	font-weight: normal;
	line-height: 1.6em;
	color: #fff;
	border-top-left-radius: 0.5em 0.25em;
	border-top-right-radius: 0.5em 0.25em;
	border-bottom-left-radius: 0.5em 0.25em;
	border-bottom-right-radius: 0.5em 0.25em;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
	background: #009ffa;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #009ffa 0%, #0064ca 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009ffa), color-stop(100%, #0064ca));
	background: -webkit-linear-gradient(top, #009ffa 0%, #0064ca 100%);
	background: -o-linear-gradient(top, #009ffa 0%, #0064ca 100%);
	background: -ms-linear-gradient(top, #009ffa 0%, #0064ca 100%);
	background: linear-gradient(to bottom, #009ffa 0%, #0064ca 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009ffa', endColorstr='#0064ca',GradientType=0 );
}


/**** GALLERY TAB ****/
.gallery {
    text-align: center;
    padding: 0 0 40px 0;
}

.gallery .main-image .materializer {
    width: 100% !important;
}

.gallery .main-image {
    min-width: 980px;
}

.hover-bar-section .gallery .main-image .materializer img {
    width: auto !important;
}

/* ---- Tab Controls ---- */

/* markup
<ul class="tab-nav t[n]" id="">
    <li class="active">
        <a href="" id="tg_tabcontroller_0" class="active">
            <strong>f 1</strong>
        </a>
    </li>
    <li>
        <a href="" id="tg_tabcontroller_1">
            <strong>
                Tab 2<br>
                <span>Smaller Text</span>
            </strong>
        </a>
    </li>
    <li>
        <a href="" id="tg_tabcontroller_2">
            <strong>Tab 3</strong>
        </a>
    </li>
</ul>

<div class="tab-container" id="">
    [tabbed content]
</div>

/* z-indexes
99  Active tab
98  Content container

10  Tab 01
09  Tab 02
08  Tab 03
07  Tab 04
06  Tab 05
05  Tab 06
04  Tab 07
03  Tab 08
02  Tab 09
01  Tab 10
 */

/**
 * @section Tabs Container
 */
.tab-nav {
    font-size: 0; /* removes inline-block whitespace */
    margin-top: 20px;
    text-align: center;
}
.ns .tab-nav {
    margin: 9px 1px 0;
}

/**
 * @section Tabs
 */
.tab-nav > li {
    display: inline-block;
    font-size: 14px;
    margin-bottom: 0;
    position: relative; /* necessary for inverse rounded corners and layering */
    vertical-align: bottom;

    /* inline-block for IE7 */
    *zoom: 1;
    *display: inline;
}

/**
 * @subsection Layering
 */
.tab-nav > li + li {
    margin-left: -2px;
}

.tab-nav > li:nth-child(1) {
    z-index: 10;
}

.tab-nav > li:nth-child(2) {
    z-index: 9;
}

.tab-nav > li:nth-child(3) {
    z-index: 8;
}

.tab-nav > li:nth-child(4) {
    z-index: 7;
}

.tab-nav > li:nth-child(5) {
    z-index: 6;
}

.tab-nav > li:nth-child(6) {
    z-index: 5;
}

.tab-nav > li:nth-child(7) {
    z-index: 4;
}

.tab-nav > li:nth-child(8) {
    z-index: 3;
}

.tab-nav > li:nth-child(9) {
    z-index: 2;
}

.tab-nav > li:nth-child(10) {
    z-index: 1;
}

.tab-nav > li.active {
    z-index: 99; /* raises active tab over tabbed-content container */
}

/**
 * @subsection Active Tab Overlays: hides dark drop shadow on raised active tab.
 */
.tab-nav > .active:before,
.tab-nav > .active:after {
    content: "";
    position: absolute;
}

.tab-nav > .active:before {
    background: #fff;
    bottom: -1px;
    height: 2px;
    left: -2px;
    right: -2px;
}

.tab-nav > .active:after {
    background: #fff;
    bottom: -20px;
    height: 20px;
    left: -20px;
    right: -20px;
}

/**
 * @section Tab Links
 */
.tab-nav a {
    background: #e9e9e9;
    background: -moz-linear-gradient(top, #e9e9e9 0%, #e5e5e5 75%, #c3c3c3 100%);
    background: -ms-linear-gradient(top, #e9e9e9 0%, #e5e5e5 75%, #c3c3c3 100%);
    background: -o-linear-gradient(top, #e9e9e9 0%, #e5e5e5 75%, #c3c3c3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e9e9e9), color-stop(75%, #e5e5e5), color-stop(100%, #c3c3c3));
    background: -webkit-linear-gradient(top, #e9e9e9 0%, #e5e5e5 75%, #c3c3c3 100%);
    background: linear-gradient(to bottom, #e9e9e9 0%, #e5e5e5 75%, #c3c3c3 100%);
    background-clip: padding-box;
    border: 2px solid #fff;
    *border: 1px solid #ccc;
    border-bottom-width: 0;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 6.5px 9px rgba(0, 0, 0, .6);
    box-shadow: 0 6.5px 9px rgba(0, 0, 0, .6), inset 0 3px 10px #eee, 0 3px 10px #ccc\9; /* IE9 workaround for lack of gradient support */
    color: #666;
    display: table-cell; /* allows vertical centering of tab text */
    *display: block;
    height: 35px;
    vertical-align: middle;
    width: 300px; /* default tab width */
    padding: 2px;
}

.tab-nav a:hover {
    color: #08c;
    text-decoration: none;
}

.tab-nav > li:first-child > a {
    border-top-left-radius: 10px;
}

.tab-nav > li:last-child > a {
    border-top-right-radius: 10px;
}

.tab-nav > .active > a {
    background: #fff;
    background: -moz-linear-gradient(top, #f0f0f0 0%, #fafafa 25%, #fff 100%);
    background: -ms-linear-gradient(top, #f0f0f0 0%, #fafafa 25%, #fff 100%);
    background: -o-linear-gradient(top, #f0f0f0 0%, #fafafa 25%, #fff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(25%, #fafafa), color-stop(100%, #fff));
    background: -webkit-linear-gradient(top, #f0f0f0 0%, #fafafa 25%, #fff 100%);
    background: linear-gradient(to bottom, #f0f0f0 0%, #fafafa 25%, #fff 100%);
    *border-bottom: 1px solid #fff;
    cursor: default;
    color: #999;
}

/**
 * @subsection Additional Tab Sizes, based on tab count
 */
.tab-nav.t4 a {
    width: 226px;
}

.tab-nav.t5 a {
    height: 60px;
    width: 181px;
}

/**
 * @subsection Inversed bottom rounded corners
 */
.tab-nav a:before,
.tab-nav a:after {
    border: 2px solid #fff;
    bottom: -2px;
    content: "";
    height: 10px;
    position: absolute;
    width: 10px;
}

.tab-nav a:before {
    border-width: 0 2px 2px 0;
    border-bottom-right-radius: 8px;
    box-shadow: 1px 5px #cfcfcf;
    box-shadow: 1px 5px #e9e9e9\9; /* IE hack for lack of gradients */
    left: -10px;
}

.tab-nav a:after {
    border-width: 0 0 2px 2px;
    border-bottom-left-radius: 8px;
    box-shadow: -1px 5px #cfcfcf;
    box-shadow: -1px 5px #e9e9e9\9; /* IE hack for lack of gradients */
    right: -10px;
}

.tab-nav > .active > a:before {
    box-shadow: 1px 5px #fff;
}

.tab-nav > .active > a:after {
    box-shadow: -1px 5px #fff;
}

/**
 * @section Tab Text
 */
.tab-nav strong {
    font-weight: normal;
    *position: relative;
    *top: 10px;
}

.tab-nav span {
    font-size: 12px;
}

/**
 * @section Tabbed-Content Container
 */
#tabs {
    background: #fff;
    border-radius: 3px;
    box-shadow: -1px 0 0 0 #D2D2D2, -1px 0 0 0 #E6E6E6, 1px 0 0 0 #D2D2D2, 2px 0 0 0 #E6E6E6, 0 -1px 0 0 #E8E8E8, 0 2px 0 0 rgba(241, 241, 241, 0.3), 0 1px 0px 0 #B1B1B1;
    padding-top: 20px;
    position: relative;
    *position: static;
    z-index: 98; 
}

.family-mac #tabs {
	min-height: 850px;
}

#tabs .box {
    border: 0;
    box-shadow: none;
}
#tabs .box > .box-content {
    border: 0;
}

/**
 * @section IE8-only hacks
 */
@media \0screen {
    .tab-nav > li {
        top: 1px;
    }

    .tab-nav a {
        border: 1px solid #ccc;
    }

    .tab-nav a:before,
    .tab-nav a:after,
    .tab-nav > .active:before,
    .tab-nav > .active:after {
        content: none;
    }

    .tab-nav > .active > a {
        border-bottom-color: #fff;
    }

    #tabs {
        border: 1px solid #ccc;
    }
}

/**
 * Gift Cards
 */
.model-type-purchase .gift-card {
    color: #ff3300;
    
}

/**
 * a11y focus fixes
 */
a:focus, .block:focus .more {
    text-decoration: underline;
}

.block:focus {
    text-decoration: none;
}

#ribbon a:focus, .tab-nav a:focus {
    text-decoration: none;
    color: #08c;
}

/* EGC */
.price .gift-card {
	display: block;
    font-size: 11px;
    line-height: 1em;
    color: #ff3300;
}
.promotions .gift-card {
    color: #ff3300;
}

.promo-text {
    color:#666666 !important;
}

.promo-text * {
    color: #666666 !important;
}

.touch .family-mac .gallery .main-image {
    min-width: 978px;
}