/* structure */
*	{ margin:0; padding:0; border:0; }
body { background:#000 url(../images/bkgd.png) -40px -40px repeat; color:#bbb; font:normal 1em/1.5 "Lucida Grande", Arial, Helvetica, sans-serif; padding-bottom:20px; }
#page { margin:auto; width:1024px; }

#banner { float:left; margin:10px 0; padding:0; width:400px; }

#logo	{ clear:left; display:block; float:left;  height:190px; margin:0; padding:0; width:400px; }
#logo a	{ background:transparent url(../images/jj_logo.png) no-repeat left 0; display:block; height:190px; text-indent:-9000px; width:100%; }
#logo a:hover, #logo a:focus, #logo a:active	{ background:transparent url(../images/jj_logo.png)  no-repeat 0 -198px; }

.nav	{ float:left; font-size:1.5em; font-weight:bold; line-height:110%; list-style-type:none; margin:0 auto; padding:0; width:90%; }
.nav li	{ margin:5px 1px; padding:0; }
.nav li a { display:block; float:left; padding:5px 25px; }
.nav li a.on { }

.vcard	{ display:block; float:left; margin:0 0 2em 0; width:400px; }
.vcard dd ul	{ margin:0 0 0 1em; }
.vcard dd ul li	{ display:block; font-size:.9em; margin:1px 10px 1px 1px; padding:0; }
.vcard dd span.days	{ margin-right:5px; }


#content { background:#000; background:rgba(0,0,0,.15); float:right; margin:0; padding:0; width:600px; -moz-border-radius:.7em; -o-border-radius:.7em; -webkit-border-radius:.7em; border-radius:.7em; }
#content #main	{ float:left; margin:5px 5px 5px 20px; padding:0; width:545px; }
#content #sidebar	{ float:right; margin:0; padding:75px 25px 5px 15px; width:260px; }
#content #sidebar h2	{ text-align:left; }
#content #sidebar ul	{ margin:0 20px 0 0; padding:0; }

#footer { clear:both; color:#aaa; font-size:.9em; margin:2em auto; padding:15px 0 5px 0; text-align:center; width:960px; }
#footer p	{ }

/* typography */

h1, h2, h3, dt	{ color:#999; 
	-moz-text-shadow:-1px -1px 0 #000;
	-o-text-shadow:-1px -1px 0 #000;
	-webkit-text-shadow:-1px -1px 0 #000;
	text-shadow:-1px -1px 0 #000;	
}
h1 { display:none; }
h2 { color:#fff; margin-top:1em; }
h3 { color:#999; margin-top:.5em; }
h4	{ clear:both; margin-top:1em; }
#banner h3, #banner h4	{ border-top:1px dotted #900; margin-top:1em; }

p { margin:.75em 0; }
dl	{ }
dl dt	{ }
dl dd	{ }
ul { list-style:none; margin:2px 2em; padding:0; }
ol { list-style-type:decimal; }
ul li, ol li	{ margin:5px 0; padding:0 .5em; }

strong, em	{ 
	-moz-text-shadow:0 0 5px #63c;
	-o-text-shadow:0 0 5px #63c;
	-webkit-text-shadow:0 0 5px #63c;
	text-shadow:0 0 5px #63c;	
}
blockquote	{ background:#900; background:rgba(169,169,169,.7); color:#000; margin:10px 0 10px 10px; padding:20px; -moz-border-radius:.7em; -o-border-radius:.7em; -webkit-border-radius:.7em; border-radius:.7em;}
blockquote h2	{ color:#900; font-size:.9em; margin-top:0; text-transform:uppercase; }
blockquote h3	{ color:#fff; }
blockquote em	{ 
	-moz-text-shadow:0 0 5px #999;
	-o-text-shadow:0 0 5px #999;
	-webkit-text-shadow:0 0 5px #999;
	text-shadow:0 0 5px #999;	
}

.clear	{ clear:both; }
.rave	{ }
.caution	{ background:transparent; font-size:.9em; }
.offer	{ display:block; padding:3px; border:1px solid #000; margin:2px; }
.address	{ float:right; font-weight:bold; padding-bottom:8px; }
.fineprint	{ font-size:.5em; }
.descrip	{ padding-bottom:9px; }
.fineprint	{ margin:1em 0; font-size:.9em; }
.textarea	{ border:1px solid #343434; }

.button	{ background:#000; color:#fff; padding:.5em 1em; margin:1em 0; }
.note { background-color:#f69; }
.amp { font-family:Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-size:1.1em; font-style:italic; font-weight:normal; }

img	{ border:0; }
.floatleft	{ float:left; margin:5px; padding:0; }
.floatright	{ float:right; margin:5px; padding:0; }
img.creditcards	{ float:left; margin:5px 25px; }
p#guss-pic	{ text-align:center; width:100%; }

input, textarea	{ border:1px solid #ddd; background:#ddd; color:#000; }
input.submit	{ background:#eee; border:1px solid #000; color:#000; font-weight:bold; margin:5px; padding:5px; 
-moz-border-radius:.7em; -o-border-radius:.7em; -webkit-border-radius:.7em; border-radius:.7em; -moz-box-shadow:2px 2px 30px #222; -o-box-shadow:2px 2px 30px #222; -webkit-box-shadow:2px 2px 30px #222; box-shadow:2px 2px 30px #222; text-transform:uppercase; }
input:hover.submit, input:focus.submit	{ background:#000; border:1px solid #111; color:#fff; margin:5px; padding:5px; -moz-border-radius:.7em; -o-border-radius:.7em; -webkit-border-radius:.7em; border-radius:.7em; -moz-box-shadow:0 0 30px #111; -o-box-shadow:0 0 30px #111; -webkit-box-shadow:0 0 30px #111; box-shadow:0 0 30px #111; }

#about	{ clear:both; display:block; margin-left:5px; overflow:hidden; padding-bottom:10px; width:100%; }
#about img	{ border:0; margin:0; padding:0; height:109px; width:109px; }
#about a, #about a:visited	{ display:block; float:left; }
#about a:hover	{ }
#about a:active	{ }

#bio img	{ float:left; padding:5px; border:1px solid #000; background:#fff; margin:0 25px 10px 0; }
#bio h2	{ margin:10px 0; }

#why { text-align:center; }

dl#products	{ margin-top:2em; }

/* prototype-related styles */
#lightbox{ position:absolute; left:0; width:100%; z-index:100; text-align:center; line-height:0; }
#lightbox a img{ border:none; }
#outerImageContainer{ position:relative; background-color:#fff; width:250px; height:250px; margin:0 auto; }
#imageContainer{ padding:10px; }
#loading{ position:absolute; top:40%; left:0%; height:25%; width:100%; text-align:center; line-height:0; }
#hoverNav{ position:absolute; top:0; left:0; height:100%; width:100%; z-index:10; }
#imageContainer>#hoverNav{ left:0;}
#hoverNav a{ outline:none;}

#prevLink, #nextLink{ width:49%; height:100%; background:transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */ display:block; }
#prevLink { left:0; float:left;}
#nextLink { right:0; float:right;}
#prevLink:hover, #prevLink:visited:hover { background:url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background:url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font:10px Verdana, Helvetica, sans-serif; background-color:#fff; margin:0 auto; line-height:1.4em; padding:2px 0; overflow:auto; width:100%; }
#imageData{	padding:0 10px; color:#aaa; }
#imageData #imageDetails{ width:70%; float:left; text-align:left; }	
#imageData #caption{ font-weight:bold;	}
#imageData #numberDisplay{ display:block; clear:left; padding-bottom:1.0em;	}
#imageData #bottomNavClose{ width:66px; float:right;  padding-bottom:0.7em;	}	
		
#overlay{ position:absolute; top:0; left:0; z-index:90; width:100%; height:500px; background-color:#000; }


/* jquery-related styles */

html,body,#wrap {
height:100%;
}

body #wrap {
height:auto;
min-height:100%;
}

#main {
padding-bottom:50px;
}

.clearfix {
display:block;
}

* html .clearfix {
height:1%;
}

#jquery-overlay {
height:650px;
left:0;
position:absolute;
top:0;
width:100%;
z-index:90;
}

#jquery-lightbox {
left:0;
line-height:0;
position:absolute;
text-align:center;
top:0;
width:100%;
z-index:100;
}

#jquery-lightbox a img {
border:none;
}

#lightbox-container-image-box {
background-color:#000;
height:250px;
margin:0 auto;
position:relative;
width:250px;
}

#lightbox-container-image {
padding:10px;
}

#lightbox-loading {
height:25%;
left:0;
line-height:0;
position:absolute;
text-align:center;
top:40%;
width:100%;
}

#lightbox-nav {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:10;
}

#lightbox-container-image-box > #lightbox-nav {
left:0;
}

#lightbox-nav a {
outline:none;
}

#lightbox-nav-btnPrev,#lightbox-nav-btnNext {
display:block;
height:100%;
width:49%;
zoom:1px;
}

#lightbox-nav-btnPrev {
float:left;
left:0;
}

#lightbox-nav-btnNext {
float:right;
right:0;
}

#lightbox-container-image-data-box {
background-color:#000;
font:10px Verdana, Helvetica, sans-serif;
line-height:1.4em;
margin:0 auto;
overflow:auto;
padding:0 10px;
width:100%;
}

#lightbox-container-image-data {
color:#666;
padding:0 10px;
}

#lightbox-container-image-data #lightbox-image-details {
float:left;
text-align:left;
width:70%;
}

#lightbox-image-details-currentNumber {
clear:left;
display:block;
padding-bottom:1em;
}

#lightbox-secNav-btnClose {
float:right;
padding-bottom:0.7em;
width:66px;
}

strong,dl dt,#lightbox-image-details-caption {
font-weight:bold;
}

/* jquery slider styles */

/* CAROUSEL */

.carousel	{ background:#111; border-bottom:2px solid #333; height:400px; margin:0 0 15px 0; position:relative; overflow:hidden; width:600px; }

.carousel .panel	{ background:#000; clear:both; color:#fff; height:60px; position:absolute; right:0; top:0; width:600px; z-index:10; display:none; }

.carousel .panel .details_wrapper { height:60px; overflow:hidden; width:600px; display:none; }
.carousel .panel .details_wrapper .details	{ font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; font-weight:normal; height:600px; }
.carousel .panel .details_wrapper .details .detail	{ height:100px; float:left; width:600px; }
.carousel .panel .details_wrapper .details h2	{ font-size:1.9em; line-height:1.2em; margin:0 0 5px 0; }
.carousel .panel .details_wrapper .details a.more	{ color:#fff; font-size:1.1em; }   
.detail p	{ margin:.5em 2em; }
.carousel .panel .paging #numbers a { padding:0 5px; }
.carousel .panel .paging #numbers a.selected { color:#ccc; }

.paging	{ bottom:0; right:0; position:absolute; text-align:center; width:600px; z-index:10; }
.paging a	{ color:#4c4c4c; font-size:1em; }
.paging a:hover	{ color:#fff; 
	-moz-text-shadow:0 0 15px #f00;
	-o-text-shadow:0 0 15px #f00;
	-webkit-text-shadow:0 0 15px #f00;
	text-shadow:0 0 15px #f00;	
}
.paging a:active	{ color:#3b3b3b; 
	-moz-text-shadow:0 0 15px #f00;
	-o-text-shadow:0 0 15px #f00;
	-webkit-text-shadow:0 0 15px #f00;
	text-shadow:0 0 15px #f00;	
}

.paging .pause	{ background:transparent url(../images/carousel_pause_bg.gif) no-repeat 0 0; bottom:25px; display:block; height:18px; position:absolute; text-indent:-6000px; width:18px; }
.paging .play	{ background:transparent url(../images/carousel_play_bg.gif) no-repeat 0 0; bottom:25px; display:block; height:18px; position:absolute; text-indent:-6000px; width:18px; }

.paging .next	{ background:transparent url(../images/carousel_next_bg.gif) no-repeat 0 0; bottom:0; display:block; height:18px; position:absolute; right:0; text-indent:-6000px; width:18px; }
.paging .previous	{ background:transparent url(../images/carousel_previous_bg.gif) no-repeat 0 0; bottom:0; display:block; height:18px; left:0; position:absolute; text-indent:-6000px; width:18px; }

.carousel .backgrounds	{ height:400px; }
.carousel .backgrounds .item	{ float:left; height:400px; position:relative; width:600px; z-index:1; }
/* .carousel .backgrounds .item_1	{ background:transparent url(../images/carousel_bg_arrow.jpg) no-repeat 0 0; } */
/* .carousel .backgrounds .item_2	{ background:transparent url(../images/carousel_bg_arrow.jpg) no-repeat 0 0; } */
/* .carousel .backgrounds .item_3	{ background:transparent url(../images/carousel_bg_1.jpg) no-repeat 0 0; } */

/* END CAROUSEL */


/* mailchimp signup */
/**
		 * @tab Page
		 * @section background
		 * @tip Choose colors for your list form's background and border. You might choose colors to match your company's branding.
 */
/**
 * @tab Page
 * @section background
 */
.container {
    /*@editable*/ border:1px solid #fff;
}

/**
 * @tab Body
 * @section foreground
 * @tip Choose a color for your list form's foreground.  Pick a color that's easy to read against your text.
 */
.content {
    /*@editable*/ background-color:#fff;
    /*@editable*/ padding:20px;
    font-size:12px;
    line-height:150%;  /* #3# Editable */
    color:#333;  /* #3# Editable */
}

/**
 * @tab Header
 * @section top bar
 * @tip You can make this color stand out, or you might make it the same as your form's background color.
 */
.headerBar {
    /*@editable*/ background:none;
    /*@editable*/ padding:5px;
    /*@editable*/ border:0;
margin-top:15px;
}

/**
 * @tab Header
 * @section top bar text
 * @tip If you aren't using an image for your header, set the text styles here.
 */
.headerText {
    /*@editable*/ color:#000;
    /*@editable*/ font-size:1.5em;
    /*@editable*/ font-weight:bold;
    /*@editable*/ text-align:left;
}

/**
 * @tab Body
 * @section default text
 * @tip This is the default text style for the body of your list form.
 */
/* p, label, .formText {
    /*@editable*/ line-height:150%;
    /*@editable*/ font-size:12px;
    /*@editable*/ color:#333;
/* }

/**
 * @tab Alerts/Errors
 * @section alerts
 * @tip This is the style for the "There are errors below." warning that appears if invalid data is entered.
 */
.alert {
    /*@editable*/ font-size:20px;
    /*@editable*/ line-height:200%;
    /*@editable*/ color:#f00;
    /*@editable*/ font-weight:bold;
}

/**
 * @tab Alerts/Errors
 * @section errors
 * @tip This is the style for the error messages that appear beneath each form fields with invalid data.  Use colors that will attract attention.
 */
div.errorText {
    /*@editable*/ font-size:12px;
    /*@editable*/ line-height:150%;
    /*@editable*/ font-weight:bold;
    /*@editable*/ color:#f00;
    /*@editable*/ background-color:#fee;
    /*@editable*/ padding:5px;
    /*@editable*/ margin:3px;
}

/**
 * @tab Body
 * @section link style
 * @tip Specify the color for all the hyperlinks in your list form.
 */
/* a:link, a:active, a:visited, a {
    /*@editable*/ color:#00f;
/* }

a.poweredBy {
    font-size:10px;
    font-family:trebuchet ms;
    text-decoration:none;
}

.poweredByBox td {
text-align:center;
}

/* hCards + hCalendars */
.vcard, .vevent {
background:#eee;
border:2px solid #ccc !important;
padding:14px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
margin:5px 0 !important;
}

/* LINKS */
a, a:visited { color:#ccc; text-decoration:none; 
	-moz-text-shadow:0 0 15px #03f;
	-o-text-shadow:0 0 15px #03f;
	-webkit-text-shadow:0 0 15px #03f;
	text-shadow:0 0 15px #03f;	
}
a:hover, a:active, a:focus { color:#fff; 
	-moz-text-shadow:0 0 15px #f00;
	-o-text-shadow:0 0 15px #f00;
	-webkit-text-shadow:0 0 15px #f00;
	text-shadow:0 0 15px #f00;	
}
a.yelp	{ }
#products a	{ color:#aaa; }
#products a:hover, #products a:focus, #products a:active	{ color:#fff; }