/* CSS Document */

/*------------------------------------------------------------*/
/* JELLYBELLY.COM COLOR GUIDE                                 */ 
/*                                                            */
/* All color styles shall follow swatches listed below        */
/*                                                            */
/* DkBlue (FONT Main Color)                                   */
/* #005687                                                    */
/*                                                            */
/* Black (FONT Use very sparingly if at all)                  */
/* #000                                                       */
/*                                                            */
/* White (FONT)                                               */
/* #FFF                                                       */
/*                                                            */
/* Red (FONT)                                                 */
/* #890300                                                    */
/*                                                            */
/* Gray (FONT)                                                */
/* #7B7B7B                                                    */
/*                                                            */
/* LtBlue                                                     */
/* #90B6CD                                                    */
/*                                                            */
/* Dark Blue DIV Background                                   */
/* #D8E9F1                                                    */
/*                                                            */
/* Light Blue DIV Background                                  */
/* #CFE0EB                                                    */
/*                                                            */
/* Light Blue DIV Border                                      */
/* #E1E1E1                                                    */
/*                                                            */
/* Logo Red (Non-font)                                        */
/* #EB0011                                                    */
/*                                                            */
/*------------------------------------------------------------*/     
/*                                                            */
/* All font styles shall follow the format as listed below    */
/* and shall follow shorthand rule                            */
/*                                                            */
/* FontName/Size/Weight-Italic/Color/Variant/LineHeight/Deco  */
/* e.g. .verdana12BoldDkBlue                                  */
/* or   .verdana14Gray                                        */
/* or   .verdana10Italic                                      */
/*                                                            */
/* The following font colors are acceptable:                  */
/* DkBlue (default), Gray, Red, Black                         */
/*------------------------------------------------------------*/

h1{
font:bold 18px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

h2{
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana9Red{
font:9px Verdana, Arial, Helvetica, sans-serif;
color:#890300;
} 

.verdana9RedUnderline{
font:9px Verdana, Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#890300;
} 

.verdana9DkBlue{
font:9px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana9DkBlueNoUl{
font:9px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
text-decoration:none;
}

.verdana10DkBlue{
font:10px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana10DkBlueUnderline{
font:10px Verdana, Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#005687;
}


.verdana10BoldDkBlue{
font:bold 10px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana10Red{
font:10px Verdana, Arial, Helvetica, sans-serif;
color:#890300;
}

.verdana11DkBlue{
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana11BoldDkBlue{
font:bold 11px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana11BoldDkBlueNoUL{
font:bold 11px Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#005687;
}

.verdana11DkBlueFooter{
font:11px Verdana, Arial, Helvetica, sans-serif;
line-height:18px;
color:#005687;
}

.verdana11GrayFooter{
font:11px Verdana, Arial, Helvetica, sans-serif;
line-height:18px;
color:#7B7B7B;
}

.verdana12DkBlue{
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana12DkBlueNoUL{
font:12px Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#005687;
}

.verdana12BoldDkBlue{
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana13DkBlue{
font:13px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana13BoldDkBlue{
font:bold 13px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana14DkBlue{
font:14px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana14BoldDkBlue{
font:bold 14px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.verdana17BoldDkBlue{
font:bold 17px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

/*------------------------------------------------------------*/
/* DIV CLASSES                                                */
/*------------------------------------------------------------*/
body {
margin: 0px 0px 0px 0px;
background:#FFF url(../Images/bg.jpg) fixed top repeat-x;
}

.mainContainer{
width:980px;
background:#FFF url('../Images/headerImages/locator_header_background.png') no-repeat right top;
border-left:#707070 solid 1px;
border-right:#707070 solid 1px;
}

.mainContentContainer{
width:900px; 
padding:40px; 
text-align:left;
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}


.content{
position:relative;
width:980px;
height:100%;
background:url(../Images/pageBG.png) top repeat-x;
}

.contentBody{
position:relative;
float:right;
width:830px;
height:580px;
}

.productBoxContent{
width:665px;
background:#FFF;
border:1px solid #E1E1E1;
border-top:0;
border-bottom:0;
}

.headerDiv{
width:980px;
height:160px;
}

.logoDiv{
float:left;
width:212px;
height:127px;
background:url(../Images/headerImages/Jelly_Belly_logo_Intl.png) top no-repeat;
}

.defaultASPX{
background:url(../Images/content_background.png) top repeat-x;
}

.mainNav{
float:right;
width:763px;
height:63px;
margin-top:43px;
background:url(../Images/headerImages/navigation_header.png) top left no-repeat;
text-align:left;
}

.navMenuContent{
position:relative;
background:url(../Images/navMenuImages/menuBG.gif) repeat-y;
float:right; 
width:225px; 
color:#005687;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align:left;
line-height:14px;
}

.div1pxKnockoutCaps{/* Make sure to include <img src="1px.gif" /> in DIV */
height:1px; 
background:url(../Images/divs/topNbottom.gif) left no-repeat;
text-align:right;
}

.div1pxKnockoutBody{
border:#035688 solid 1px;
border-top:0px;
border-bottom:0px;
padding:10px;
}

.div1pxKnockoutCapsLtBlue{/* Make sure to include <img src="1px.gif" /> in DIV */
height:1px; 
background:url(../Images/divs/topNbottom_LightBlue.gif) left no-repeat;
text-align:right;
}

.div1pxKnockoutBodyLtBlue{
border-left: 1px solid #EAF2F5;
border-right: 1px solid #EAF2F5;
border-top: 0px;
border-bottom: 0px;
background: #f4f9fd;
padding: 10px;
margin-top: 0px;
}

.divEmphasis{
border:#f6f6f6 solid 2px;
background:#fcfdff;
}

.footer{
width:980px;
height:80px;
background:url(../Images/footerImages/footer_background.png) top repeat-x;
border-top:#c5d5de solid 1px;
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
text-align:center;
}


.shadow{
position:absolute;
z-index:0;
width:1020px;    
height:100%;
background:url(../bodyBGShad.png) repeat-y; 
}
    
.headerTable1{
width: 674px;
float: right;
text-align:left;
padding-top:5px;
margin-left: 23px;
}

.headerTable2{
width: 674px;
text-align:left;
padding-top:5px;
}


.ourShopDropDownAdvert{
width:652px;
margin:10px;
}

.ourShopDropDownLinks{
text-align:left;
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.searchResultProductsImg{
position:relative;
width:180px;
height:180px;
border:#EEE solid 1px;
}

.searchResultProductDesc{
position:relative;
width:180px;
font:10px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
}

.shortDescMain{
    position:relative;
    width:90%;
    text-align:left;
}

.shortDescInner{
    position:relative;
    margin-top:5px;
    height:100px;
    padding:10px;
    border:#EAF2F5 1px solid;
    background:#fcfdff;
}
.shortDescDesc{
    position:relative;
    float:left;
    width:65%;
    font:12px Verdana, Arial, Helvetica, sans-serif;
    color:#005687;
 }
 
.shortDescPic{
    position:relative;
    float:right;
}

.shortDescLink{
    position:absolute;
    height:100%; 
    z-index:1;
    width:100%;
    background:url(.../Images/clickForMore.gif) 99999px 0 no-repeat;
}
.shortDescLink a:hover
{
    position:absolute; 
    height:100%; 
    z-index:1;
    width:100%;
    background:url(../Images/clickForMore.gif) right 3px no-repeat;
}



.recipeBody
{
 position:relative;
 width:980px;   
 text-align:left;
 
}
.recipeCard
{
    position:relative;
    left:0px;
    width:600px;
    padding:20px 0px 40px 30px;
}
.recipeContainer{
    position:relative;
    width:600px;
    font:12px Verdana, Arial, Helvetica, sans-serif;
    color:#005687;
    line-height:19px;
}
.recipeContainerTab{
    position:relative;
    width:600px;
    height:30px;
    font:bold 12px Verdana, Arial, Helvetica, sans-serif;
    color:#005687;
    text-align:left;
    background:url(../Images/recipes/tab.png) no-repeat;
}
.recipeContainerContent{
    position:relative;
    width:558px;
    border:#E3E3E3 solid 1px;
    border-top:0px;
    padding:10px 20px 10px 20px;
    text-align:left;
    background:#FFF;
}
.recipeTitle
{
    position:relative;
    width:370px;
    top:8px;
    left:10px;
}

.navbarFAQ
{
  background: #fcfdff;

}   


.pagerButton
{
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
border-style:none;
background-color:Transparent;
cursor:auto;
}

.requiredField
{
	font:bold 12px Verdana, Arial, Helvetica, sans-serif;
	color:#890300;
}

input[disabled='disabled']
{
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
color:GrayText;
border-style:none;
background-color:Transparent;
cursor:default;
}

.cvvDiv{
position:absolute;
z-index:1;
width:350px;
top:255px;
left:470px;
font:bold 10px Verdana, Arial, Helvetica, sans-serif;
color:#005687;
text-align:left;
padding:10px;
border:#e3e3e3 solid 1px;
background:#FFFDDD;
}

/*prevents the flashing of the panel when initially loading on the page*/
.collapsiblePanelNonFlashing
{
	overflow: hidden;
	height: 0;
}

.handCursor
{
    cursor:hand;
}

.phoneNum{
padding-left:18px;
background:url(../Images/phone_icon.gif) left no-repeat;
}





/*** Nav bar styles ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
	margin: 0px;
	padding: 5px;
	cursor: default;
	list-style-type: none;
	display: inline;
	font:11px Verdana, Arial, Helvetica, sans-serif;
    color:#005687;
}

ul.nav{
	display: table;
	width:140px;
}
ul.nav>li{
	display: table-cell;
	position: absolute;	
	top:100px;
}


ul.nav li>ul{
/*Make the sub list items invisible*/
	display: none;
	width: 170px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
	display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
	padding: 0px 0px 0px 0px;
}

/*** Menu colors (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
	color: #369;
}


ul.nav li:hover,
.nav ul li a:hover{
	color: #4b8fb7;
}

ul.nav li:active,
.nav ul li a:active{

}

ul.nav,
.nav ul{

}

.nav a{
	text-decoration: none;
	
}