﻿/* -------------------------------------------------------------- 
   
*GLOBAL CSS*
== INDEX: ===============
* Background
* Headers
* Text decorators
* Error messages / MISC Messages
* Links Colors
* Buttons (Regular Buttons & Specialty Buttons (facebook)
* Tables
* Lists	
* Forms
* Member comment
* Newsletter Widget
* Global Tip and Brand Partner Tip
=========================

-------------------------------------------------------------- */
body {
background: url("/Content/wallpaper/jinx_bg_tile.gif") repeat scroll 0 0 #4B4B4B;
color:#2f3030;
font:12px/1.5 Arial, "Lucida Grande", sans-serif;
}



hr {
background: url("/img/sm_divider.png") repeat-x scroll center bottom transparent;
clear:both;
height:2px;
margin:20px 0;
}

/* This class can be added to header tags to place a border underneath them */
.solid_border {
background: url(/img/heading_pat.png) repeat-x;
color: #2f3030;
}

.solid_border span
{
background: #F4F4F4;
display: inline-block;
padding-right: 10px;
}

h2.solid_border {
margin: 0 0 10px;
line-height: 22px;
}

h3.solid_border {
margin: 0 0 10px;
line-height: 22px;
}

/* This class can be applied to a div to create a decorated horizontal line. */
.divider {
background: url("/img/heading_pat.png") repeat-x scroll 0 0 transparent;
height: 20px;
clear:both;
margin:14px 0;
width:100%;
}

p {
margin:0 0 10px;
}

.text_content ol {
margin:10px 0 20px 40px;
}

.text_content ol li {
list-style-position:outside;
margin-bottom:4px;
}

.text_content ul {
margin:10px 0 20px 40px;
}

.text_content ul li {
list-style-image:url(/img/bullet_icon.gif);
list-style-position:outside;
margin-bottom:4px;
}


/* Single Item Floats - Make sure to clear your floats when using these. */

.leftalign, .floatLeft {
float: left;
}

.rightalign, .floatRight {
float: right;
}


/* `Headings
----------------------------------------------------------------------------------------------------*/
h1,h2,h3,h4,h5 {
-webkit-text-stroke:1px transparent;
color:#2f3030;
text-shadow:rgba(0,0,0,.01) 0 0 1px;
}

h1 {
font-size:25px;
}

h2 {
font-size:22px;
margin:5px 0;
}

h3 {
font-size:18px;
margin:5px 0;
}

h4 {
font-size:16px;
margin:5px 0;
}

h5 {
font-size:14px;
}

h6 {
font-size:12px;
color:#2f3030;
}

/* `Text Decorations 
----------------------------------------------------------------------------------------------------*/
.major {
color:#006AB7;
font-weight:700;
}

.minor {
/*color:#006AB7;*/
}

.major_dark {
color:#2f3030;
font-weight:700;
}

.discount {
color:#2f3030;
font-size:11px;
text-decoration:line-through;
}

.vert_align_top {
vertical-align:top;
}

.no_margin {
margin:0!important;
}

.text_center {
text-align:center;
}

.highlight {
background-color:#E0E0E0;
border: 1px solid #BBBBBB;
border-radius: 4px;
}

div.highlight {
background-color:#E0E0E0;
border: 1px solid #BBBBBB;
margin-top: 10px;
padding:10px;
border-radius: 4px;
}

div.highlight h2, div.highlight h3 {
margin:0;
}

span.required {
color:Red;
}

span.hint {
color:#a3acad;
}

/* `Error Messages / Misc Messages
----------------------------------------------------------------------------------------------------*/
.err_message {
background:url(/img/error_icon.gif) 0 2px no-repeat;
color:#004a80;
display:block;
font-weight:700;
height:22px;
line-height:22px;
padding-left:22px;
}

/* removes background from input elements that have an error class. Error class is added
by jquery validation plugin, trying to avoid clashes here. - Kevin*/
input.error {
background:none;
}

/* Call Out Box  */
span.calloutbox div, div.calloutbox div
{
background:none repeat scroll 0 0 #cae5f9;
border:1px solid #006AB7;
color:#2f3030;
margin:10px;
padding:10px;
border-radius: 4px;
box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.1);
}

span.calloutbox div h3,div.calloutbox h3 
{
color: #004170;
}

span.sad div,div.sad div {
background:none repeat scroll 0 0 #BF3F3F;
border:1px solid #7d1d1d;
color:#FFF;
font-weight:700;
}

span.happy div,div.happy div {
background:none repeat scroll 0 0 #77CC66;
border:1px solid #707321;
color:#000;
font-weight: 700;
}

span.warning div,div.warning div {
background:none repeat scroll 0 0 #FFFACB;
border:1px solid #c29100;
color:#2f3030;
font-weight: 700;
}

span.calloutbox div ul,div.calloutbox ul {
padding:5px 0 0 18px;
margin:0 0 0 5px;
font-weight:400;
list-style-type:circle;
list-style-image:none;
}

span.calloutbox div ul li,div.calloutbox ul li {
list-style-type:circle;
list-style-image:none;
}

.calloutbox.sad a
{
	color: #6DF7F7;
}
.calloutbox.happy a
{
	color: #1E7DAD;
}
.happy a:hover,
.sad a:hover
{
	color: #FFF;
}

span.wholesale,
div.wholesale
{
	background:none repeat scroll 0 0 #ff5826;
}

span.wholesale div,
div.wholesale div
{
	background:none repeat scroll 0 0 #ff5826;
	border:1px solid #333;
	color:#000;
	font-weight: 700;
}

.calloutbox.wholesale a{
	color: #000;
}
.wholesale a:hover {
	color: #000;
	text-decoration: underline;
}


/* Link Colors
----------------------------------------------------------------------------------------------------*/
a {
color:#006AB7;
text-decoration:none;
}

a:visited {
color:#006AB7;
text-decoration:none;
}

a:hover {
color:#004a80;
text-decoration:underline;
}

/* DELETE BUTTONS */
/* Specialty Buttons
----------------------------------------------------------------------------------------------------*/

/*  Add this to a button of you want to expand the width from edge to edge */
.block {
display: block;
}


/*  Facebook Link  */
.facebook_like {
clear:both;
height:30px;
padding:10px 0 0;
}

/* Text links with icons  */
a.expand {
background:url(/img/jinx_sprites.gif) no-repeat scroll -139px -249px transparent;
list-style:none outside none;
overflow:hidden;
padding-left:20px;
}
/*************************************************************************************************/


/* Tables Styles (General Look for Tables used on the Shopping Cart/Check Out Pages)
----------------------------------------------------------------------------------------------------*/
table {
width:100%;
margin-bottom: 10px;
}

thead tr, .rewards_history_header 
{
border-top:3px solid #006AB7;
border-bottom: 1px solid #d5d5d5;
}

thead tr th, .rewards_history_header th {
font-weight:700;
padding:2px 8px 4px;
}

tbody tr {
background: #fff;
border-bottom: 1px solid #d5d5d5;
border-left: 1px solid #d5d5d5;
border-right: 1px solid #d5d5d5;
}

tbody tr td {
padding:8px;
vertical-align:middle;
}

/*  Custom Lists
----------------------------------------------------------------------------------------------------*/
.invaderlist {
margin:10px 0 10px 10px;
}

.invaderlist li {
list-style-image:url(/img/bullet_icon.gif);
list-style-position:inside;
margin-left:-10px;
}

/* Member comment List  - Comments around the website
----------------------------------------------------------------------------------------------------*/
.member_comment_container .member_comment {
padding-left:0;
margin-bottom:20px;
}

.member_comment_container .member_comment li {
list-style:none;
margin:0;
padding:8px 0;
background: url("/img/sm_divider.png") top repeat-x;
clear:both;
}

.member_comment_container .member_comment li.level2, .member_comment_container .member_comment li.level3,
.member_comment_container .member_comment li.level4, .member_comment_container .member_comment li.level5 
{
 background: #fcfcfc;
 margin-top: 12px;
 margin-bottom: 8px; 
 padding: 8px 8px; 
 border-radius: 4px; 
 position: relative;
 border: 1px solid #D5D5D5;
}

.member_comment_container .member_comment li.level2:before, .member_comment_container .member_comment li.level3:before,
.member_comment_container .member_comment li.level4:before, .member_comment_container .member_comment li.level5:before 
{
   content: "";
   position: absolute;
   top: -8px;
   left: 20px;
   border-bottom-color: inherit;
    border-bottom: 8px solid #D5D5D5;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}



.member_comment_container .member_comment li.level2 {
margin-left: 10px;
}

.member_comment_container .member_comment li.level3 {
margin-left: 20px;
}

.member_comment_container .member_comment li.level4 {
margin-left: 30px;
}

.member_comment_container .member_comment li.level5 {
margin-left: 40px;
}

.member_comment_container .member_comment li:last-child {
list-style:none;
margin:0;
padding:8px 0;
clear:both;
}

.member_comment_container .member_comment li.jinxcrew {

}

.member_comment_container .member_comment li.jinxcrew .comment_content 
{

}


.member_comment_container .member_comment li.jinxcrew .profile_pic_col .profile_pic .level_flag {
background: url("/img/jinx_crew.gif") no-repeat scroll 2px 2px #006AB7;
}

.member_comment_container .member_comment li.jinxcrew .profile_pic_col .profile_pic .level_flag .level_number {
display:none;
}


.member_comment_container .member_comment li.jinxcrew h6 a 
{

}

.member_comment_container .member_comment li.jinxcrew h6 a:hover
{
    text-decoration: none;
}

/*  Message Container  */
.message_container {
clear:both;
}

.message_container .comment_content {
padding-left:10px;
overflow: hidden;
}

.message_container .comment_content p,
.member_comment_container .member_comment li .comment_content p {
vertical-align:baseline;
margin:0 0 14px;
max-height: 150px;
overflow: hidden;
}

.message_container .comment_content p:hover,
.member_comment_container .member_comment li .comment_content p:hover {
max-height: 1000px;
}

/* Profile Picture Column */
.profile_pic_col {
float:left;
height:100%;
}

.profile_pic_col .profile_pic {
position:relative;
width:60px;
height:75px;
outline:0;
}


.profile_pic_col .profile_pic .level_flag {
background: url("/img/level_text.gif") no-repeat scroll 2px 2px #1E1F1F;
height: 15px;
left: 0;
position: absolute;
text-align: right;
top: 60px;
width: 60px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px; 
}

.profile_pic_col .profile_pic .level_flag .level_number {
color: #FFFFFF;
font-size: 10px;
height: 15px;
line-height: 15px;
padding-right: 9px;
}

/*  J!NX Crew Flag  */
.profile_pic_col .profile_pic .jinx_crew_flag {
background:url(/img/jinx_crew_flag.gif) 0 0 no-repeat;
height:11px;
left:-2px;
position:absolute;
top:45px;
width:60px;
}

/*  comment Links  */
.comment_content .comment_links {
text-align:left;
padding:8px 0 0;
}

.comment_content .comment_links .timestamp {
border-right:1px solid #d5d5d5;
margin:0;
padding-right:8px;
color:#a3acad;
font-size:10px;
}

.comment_content .comment_links .reply_link {
border-right:1px solid #d5d5d5;
margin:0;
padding-left:8px;
padding-right:8px;
}

.comment_content .comment_links .abuse_link {
padding-left:8px;
margin:0;
}

.comment_content .comment_links a {
font-size:10px;
}
.hide_comment_links {
display:inline;
}
.comment_content:hover .hide_comment_links {
display:inline;
}

.autocomplete-w1 {
font-size:12px;
position:absolute;
top:-2px;
left:0;
margin:8px 0 0 6px;
/* IE6 fix: */
_background:none;
_margin:0;
color:#000;
}

.autocomplete {
border:3px solid #D7DFE2;
background:#fff;
cursor:hand;
cursor:pointer;
text-align:left;
max-height:150px;
width:200px;
overflow:auto;
margin:-6px 6px 6px -6px;
/* IE6 specific: */
_height:350px;
_margin:0;
_overflow-x:hidden;
color:#000;
}

.autocomplete .selected {
background:#F0F0F0;
color:#000;
}

.autocomplete div {
padding:2px 5px;
white-space:nowrap;
}

.autocomplete strong {
font-weight:400;
color:#39F;
}

/* Rewards panel nonsense */

div.rewards_container {
background: #d5d5d5;
padding: 8px;
}

div.exp_alert {
background: #e5e5e5;
padding: 8px;
margin-bottom: 10px;
position: relative;
border-radius: 2px;
border: 1px solid #D5D5D5;
}

.exp_alert_fold {
border-color: transparent transparent #e5e5e5  ;
border-style: solid;
border-width: 9px;
left: 30px;
width: 0;
position: absolute;
top: -18px;
}	

div.rewards {
float: left;
margin-right: 20px;
}

.exp_blurb {
margin: 10px 0;
}

div.rewards a.tile_gold {
background:url(/img/gold_exp/gold.png) top left no-repeat;
display: inline-block;
height: 12px;
padding: 23px 18px 23px 64px;
text-align: left;
white-space: nowrap;
}

div.rewards a.tile_exp {
background:url(/img/gold_exp/exp.png) top left no-repeat;
display: inline-block;
height: 12px;
padding: 23px 18px 23px 64px;
text-align: left;
white-space: nowrap;
}




/* EXP and GOLD inline call outs */
.exp_callout {
background:url(/img/jinx_sprites.gif) no-repeat scroll 0 -1px transparent;
background-position:-131px -18px;
font-size:11px;
font-weight:700;
padding:2px 0 2px 30px;
}

.gold_callout {
background:url(/img/jinx_sprites.gif) no-repeat scroll 0 -1px transparent;
background-position:-131px -18px;
font-size:11px;
font-weight:700;
padding:2px 0 2px 30px;
}



/* Member Feedback Form
----------------------------------------------------------------------------------------------------*/
.feedbackform_container {
padding-bottom:10px;
}

.addyourfeedback {
font-weight:700;
}

.feedbackbox {
}

.input_button_container {
padding-top:10px;
}

.input_button_container p {
color:#a3acad;
float:left;
font-size:11px;
}

.input_button_container input {
float:right;
}


/* Newsletter Widget 
----------------------------------------------------------------------------------------------------*/
.newsletter_widget {
margin-bottom:19px;
position: relative;
}

.newsletter_widget:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

/* Hides from IE-mac */
* html .newsletter_widget {
height:1%;
}

.newsletter_widget {
display:block;
}

/* End hide from IE-mac */
#homepage_sidebar form .newsletter_form {
width:230px;
}


/* Global Tip and Brand Partner Tip
----------------------------------------------------------------------------------------------------*/

.global_tip 
{
    height: 50px;
}


.shipping_guide 
{
background:url(/Content/TipIcon/global_tip/shipping_bg_v2.gif);  
}


.newyears_sale 
{
background:url(/Content/promo/newyearsale/global_tip_bg.gif);  
}

.newyears_sale a 
{
    display: block;
    height: 50px;
    background:url(/Content/promo/crit_hit_post/crit_sale_post.png);  
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    text-indent: -9000px;
}


.holiday_guide_2013
{
background:url(/Content/pages/giftguide_2013/tip/bg.gif);  
}

.holiday_guide_2013 a 
{
    display: block;
    height: 50px;
    background:url(/Content/pages/giftguide_2013/tip/huge_holiday_sale_v3.gif);  
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    text-indent: -9000px;
}



.vday_guide_2014
{
background-color: #634a60;  
}

.vday_guide_2014 a 
{
    display: block;
    height: 50px;
    background:url(/Content/pages/vdayguide_2014/sale_tip.gif);  
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    text-indent: -9000px;
}


#login_message
{
	padding-left: 8px;
}



/*------ Recently Viewed Products  ---------*/

.history_container 
{
    background:url(/img/recently_viewed_items/bg.gif) #333333;  
    width: 100%;
    position: fixed;
    bottom: 0px;
    height: 130px;
    z-index: 100;
    border-top: 4px solid #4a4a4a;
    box-shadow: inset 0px 3px 9px rgba(0, 0, 0, 0.2);
    -moz-transition: bottom 1s;
    -webkit-transition: bottom 1s;
    -o-transition: bottom 1s;
    transition: bottom 1s;
}

.history_btn 
{
   -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	background-color: #575757;
	-webkit-box-shadow: inset 0 4px rgba(255,255,255,.17);
	-moz-box-shadow: inset 0 4px rgba(255,255,255,.17);
	box-shadow: inset 0 4px rgba(255,255,255,.17);
	background-image: -webkit-linear-gradient(bottom, #4a4a4a, #737373);
	background-image: -moz-linear-gradient(bottom, #4a4a4a, #737373);
	background-image: -o-linear-gradient(bottom, #4a4a4a, #737373);
	background-image: -ms-linear-gradient(bottom, #4a4a4a, #737373);
	background-image: linear-gradient(to top, #4a4a4a, #737373);
    border-radius: 2px 2px 0 0;
    cursor: pointer;
    height: 25px;
    left: 20px;
    line-height: 25px;
    padding: 8px 10px;
    position: absolute;
    top: -45px;
    
}


.history_btn_caption 
{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    float: left;
    margin-right: 10px;
}

.history_btn_icon 
{
    background: url("/img/jinx_sprites.gif") no-repeat scroll -140px -81px #1E1F1F;
    border-radius: 6px 6px 6px 6px;
    float: right;
    height: 21px;
    width: 21px;
    margin-top: 5px;
}

.history_btn_icon.close 
{
    background: url("/img/jinx_sprites.gif") no-repeat scroll -140px -104px #1E1F1F;
}

.history_container.hide 
{
    bottom: -134px;
    -moz-transition: bottom 1s;
    -webkit-transition: bottom 1s;
    -o-transition: bottom 1s;
    transition: bottom 1s;
}

.history_container .product_items {
    height: 90px;
}


.history_container .product_image {
    width: 70px;
}


.history_container  .product_price, .history_container .product_title {
    display: none;
}


.history_container .product_image img {
    height: 90px;
    width: 70px;
}