@charset "UTF-8";
/* CSS Document */

/*------------------------------------------------------------------
[Master Stylesheet]

Project:		Studio J Landing Page styles
Version:		1.0
Last change:	24 July 2009
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
1.0 Reset styles
-------------------------------------------------------------------*/

/* Don't forget to set a foreground and background color on the 'html' or 'body' element! */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100.01% /* for opera and ie/win6+ */; line-height: inherit; font-family: inherit; text-align: left; vertical-align: top /* affects wrapping of inline images */; word-wrap: break-word; }
	
:focus { outline: 0; }

table { border-collapse: collapse; border-spacing: 0; }

select, input, textarea { font-size: 99%; } /* for Safari 2+ */

ol, ul { list-style: none; } /* affects the bullet placement; make sure to apply "vertical-align: baseline;" to local li styles */

hr { border: 0; height: 1px; background: #ccc; color: #ccc; margin: .7em 0 .6em 0; clear: both; }
*html hr { border: 0; height: 1px; background: #ccc; color: #ccc; margin: .5em 0 .3em 0; clear: both; } /* for IE6 */
*+ html hr { border: 0; height: 1px; background: #ccc; color: #ccc; margin: .6em 0 .2em 0; clear: both; } /* for IE7 */

caption, th, td { text-align: left; font-weight: normal; }

q:before, q:after, blockquote:before, blockquote:after { content: ""; }

blockquote, q { quotes: "" ""; }

button { padding: 0; width: auto; overflow: visible; }

em { font-style: italic; line-height: inherit; }
strong { font-weight: bold; line-height: normal; vertical-align: baseline; }
.right { float: right; font: inherit; }
.clear { clear: both; }
.circler { vertical-align: super; line-height: normal; font-size: .6em; }
small { font-size: .8em; vertical-align: baseline; }

img { behavior: url(scr/iepngfix.htc); } /* for .png visualization in IE6+; ensure that the .htc script sits inside an 'scr' folder inside the tree structure, and that 'spacer.gif' sits inside an 'img' folder */

a { text-decoration: underline; line-height: normal; vertical-align: baseline; }
a:visited { color: #00c; }
a:hover { text-decoration: none; }
a:active { }

wbr { display: inline-block; }

input, select { border: 1px solid #ccc; padding: 4px; font-size: 1em; background-color: #f9f9f9; }
input:focus, select:focus { border: 1px #999 solid; background: #fffff6; outline: none; }  

/*------------------------------------------------------------------
2.0 Composition styles
-------------------------------------------------------------------*/

body { background: #F3F8DB url(../img/studioj_flourishes.png) center top no-repeat; font-family: "Lucida Sans", "Lucida Grande", Tahoma, sans-serif; }

#forfacebook { width: 100%; display: none; }

#ie6warning { width: 100%; background: #C84B2A; padding: 19px 0 26px 0; border: 1px solid #C23915; border-width: 6px 0 0 0; display: none; }
	#ie6warning h1 { text-align: center; font-size: 18px; line-height: 130%; color: #fff; font-weight: lighter; margin: 0 0 .5em 0; }
	#ie6warning p { text-align: center; font-size: 13px; line-height: 148%; padding: 0 18%; color: #F1EFEE; font-weight: lighter; }
	#ie6warning a { color: #fff; }

#wrapper { width: 900px; margin: 40px auto; padding: 0 0 0 1em; }
#header { position: relative; z-index: 20; margin: 0 0 30px 0; }
	/*.logo { float: left; background: url(../img/studioj_logo.png) 0 0 no-repeat; width: 170px; height: 64px; } */
	.logo a { text-decoration: none; position: absolute; /* Depending on your placement */ width: 170px; height: 64px; top: -5px !important; /* Depending on your placement */ background: url(../img/studioj_logo.png) no-repeat left top; text-indent: -99999px; }
	.mailinglist { width: 670px; float: right; margin: .7em 1.8em 0 0; }
		.mailinglist p { color: #635445; text-align: right; font-size: 14px; line-height: 140%; }
		.mailinglist .smaller { color: #635445; text-align: right; font-size: 12px; line-height: 140%; }
		.mailinglist input.textfield { width: 180px; font-size: 16px; padding: 5px; margin: 0 8px; border: 1px solid #bbb; color: #999; }
		.mailinglist .buttoncontainer { float: right; }
		.mailinglist input.signmeup { border: 0; margin: 0; width: 100px; height: 31px; overflow: hidden; background: url(../img/studioj_signmeup.png) 0 0 no-repeat; }
		.mailinglist input.signmeup:hover { background: url(../img/studioj_signmeup.png) 0 -31px no-repeat; }
		.mailinglist input.entertowin { border: 0; margin: 0; width: 100px; height: 31px; overflow: hidden; background: url(../img/studioj_signmeup.png) 0 0 no-repeat; }
		.mailinglist input.entertowin:hover { background: url(../img/studioj_signmeup.png) 0 -31px no-repeat; }

/*------------------------------------------------------------------
2.2 Metanavigation styles; requires droppy.js
-------------------------------------------------------------------*/
/* Basic code - don't modify */
#metanav { display: block; margin: 0; padding: 0; position: relative; }
#metanav li { display: block; list-style: none; margin: 0; padding: 0; float: right; position: relative; }
#metanav a { display: block; }
#metanav ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; }
* html #metanav ul { line-height: 0; } /* IE6 "fix" */
#metanav ul a { zoom: 1; } /* IE6/7 fix */
#metanav ul li { float: none; }
#metanav ul ul { top: 0; }
    
/* Essentials - configure this */
#metanav ul { width: 200px; /*-moz-box-shadow: 8px 8px 8px #C6C1BB; -webkit-box-shadow: 8px 8px 8px #C6C1BB; box-shadow: 8px 8px 8px #C6C1BB; */ }
#metanav ul ul { left: 131px; }

/* Theming */
#metanav { width: 670px; float: right; height: 29px; margin: 0 1.6em 0 0; padding: 1em 0 0 0; z-index: 99; }
#metanav *:hover { background-color: none; }
#metanav a { color: #635445; text-align: left; font-size: 1.05em; line-height: 140%; letter-spacing: .01em; text-decoration: none; padding: 0 0 0 1.2em; }
	#metanav a.noarrow { background-image: none; margin: 0; }
	#metanav a.login { background: url(../img/key.png) left 0px no-repeat; padding: 0 0 0 24px; font-weight: bold; }
	#metanav a.login:hover { background: url(../img/key.png) left -2px no-repeat; padding: 0 0 0 24px; }
#metanav li.hover a { background: none; text-decoration: underline; }
#metanav ul { top: 26px; left: 9px; background: #EDF4CF; }
#metanav ul li a { font-size: .75em; background-color: #EDF4CF; color: #635445; border: 1px dashed #CFE27E; border-width: 0 0 1px 0; padding: .5em 1em .6em 1em; margin: 0; font-weight: normal; text-decoration: none; }
	#metanav ul li a.noborder { border: none; padding: .5em 1em .7em 1em; }
#metanav ul a.hover { background-color: #E7F0BF; text-decoration: underline; }
#metanav ul a { border: 1px solid #fff; border-width: 0 0 1px 0; text-decoration: none;}
/* #metanav ul a { border-bottom: none; } - I also needed this for IE6/7 */

	#emailwarning { position: absolute; z-index: 99999; top: 44px; right: 30px; width: 220px; border: 1px solid #E9B7AA; background: #F9EDEA; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; padding: 12px 13px; -moz-box-shadow: 8px 8px 8px #E3A595; -webkit-box-shadow: 8px 8px 8px #E3A595; box-shadow: 8px 8px 8px #E3A595; display: none; } 
		#emailwarning em { position: absolute; left: 20px; top: -6px; width: 11px; height: 6px; background: url(../img/tooltiparrow_warning.gif) 0 0; display: block; font-size: 1px; } 
		#emailwarning b { position: absolute; right: -14px; top: -10px; width: 26px; height: 26px; background: url(../img/closebox.png) 0 0; display: block; font-size: 1px; } 
		#emailwarning p, #emailwarning a { font-size: 11px; line-height: 130%; color: #8D290F; }
		#emailwarning a:hover { text-decoration: none; }
		
	#emailwarningdup { position: absolute; z-index: 99999; top: 44px; right: 30px; width: 220px; border: 1px solid #E9B7AA; background: #F9EDEA; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; padding: 12px 13px; -moz-box-shadow: 8px 8px 8px #E3A595; -webkit-box-shadow: 8px 8px 8px #E3A595; box-shadow: 8px 8px 8px #E3A595; display: none; } 
		#emailwarningdup em { position: absolute; left: 20px; top: -6px; width: 11px; height: 6px; background: url(../img/tooltiparrow_warning.gif) 0 0; display: block; font-size: 1px; } 
		#emailwarningdup b { position: absolute; right: -14px; top: -10px; width: 26px; height: 26px; background: url(../img/closebox.png) 0 0; display: block; font-size: 1px; } 
		#emailwarningdup p, #emailwarning a { font-size: 11px; line-height: 130%; color: #8D290F; }
		#emailwarningdup a:hover { text-decoration: none; }

	#emailsuccess { position: absolute; z-index: 99998; top: 44px; right: 0px; width: 340px; border: 1px solid #BDD74E; background: #DBE99E; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; padding: 12px 13px; -moz-box-shadow: 8px 8px 8px #899C39; -webkit-box-shadow: 8px 8px 8px #899C39; box-shadow: 8px 8px 8px #899C39; display: none; } 
		#emailsuccess em { position: absolute; left: 50px; top: -6px; width: 11px; height: 6px; background: url(../img/tooltiparrow_success.gif) 0 0; display: block; font-size: 1px; } 
		#emailsuccess b { position: absolute; right: -14px; top: -10px; width: 26px; height: 26px; background: url(../img/closebox.png) 0 0; display: block; font-size: 1px; } 
		#emailsuccess p, #emailsuccess a { font-size: 11px; line-height: 130%; color: #566223; }
		#emailsuccess a:hover { text-decoration: none; }

#content { position: relative; z-index: 10; margin: 1.2em 0 0 0; }
	#content h1 { margin: 0 0 .8em 0; width: 874px; height: 43px; background: url(../img/studioj_title.png) 0 0 no-repeat; }
	#content .headline { margin: 0 0 .8em 0; width: 874px; height: 43px; background: url(../img/studioj_title.png) right 50% no-repeat; }
	.videowell { height: 390px; }
	.watchvideo { display: block; position: absolute; z-index: 15; top: 95px; left: 20px; height: 87px; width: 364px; }
		a.watchvideo 		{ background: url(../img/studioj_watchvideo_active.png); height: 87px; }
		a.watchvideo:hover	{ background: url(../img/studioj_watchvideo_ro.png); height: 87px; }
	#about { width: 430px; margin: 0 0 150px 12px; z-index: 999; position: relative; }
	*+ html #about { width: 430px; margin: 0 0 70px 12px; z-index: 999; position: relative; }
	#about p { font-size: 14px; line-height: 150%; color: #635445; }
	#about ul { margin: 1em 0 0 0; }
	#about li { list-style: none; margin: 0; font-size: 13px; line-height: 30px; color: #635445; float: left; display: block; width: 90%; }
	#about li a { color: #635445; }
	#about li a:hover { text-decoration: none; }
	#about li.video { background: url(../img/film.png) 0% 50% no-repeat; padding: 0 0 0 39px; }
	#about li.faq { background: url(../img/notebook.png) 0% 50% no-repeat; padding: 0 0 0 39px; }
	#about li.sample { background: url(../img/artwork.png) 0% 50% no-repeat; padding: 0 0 0 39px; }
	#about li.jc { background: url(../img/female_user.png) 0% 50% no-repeat; padding: 0 0 0 39px; }

#maincontent { background: #fff; margin: -.5em 0 .5em 0 !important; padding: 2em 1.5em 1.5em 1.5em; width: 52em; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; position: relative; }
#maincontent h1, #maincontent h2, #maincontent h3, #maincontent h4, #maincontent h5, #maincontent h6, #maincontent p { font-weight: normal; }
		
#maincontent h1 { font-weight: normal; font-size: 1.8em; color: #5A4C3F; border-bottom: 1px dashed #AAA29A; padding: 0 0 .3em 0; margin: 0 0 .5em 0; letter-spacing: .02em; }
#maincontent h2 { font-size: 1.2em; line-height: 120%; padding: 0; margin: 0 0 .2em 0; color: #5A4C3F; font-weight: normal; } 
#maincontent h3 { font-size: 1.05em; line-height: 125%; margin: 0; margin: 0 0 .1em 0; color: #444; }
#maincontent h4 { font-size: .78em; line-height: 145%; margin: 0 0 .5em 0; color: #5A4C3F; text-transform: uppercase; letter-spacing: .1em; font-weight: bold; } 
#maincontent h5 { font-size: .71em; line-height: 150%; padding: .2em 0; color: #555; font-weight: normal; vertical-align: baseline; }
#maincontent h6 { font-size: .68em; line-height: 150%; padding: .6em 0 1.3em 0; color: #666; }
	#maincontent h6.errortext { color: #f00; display: none;}

#maincontent p, #maincontent li { font-size: .75em; line-height: 155%; margin: 0 0 1em 0; color: #483D32; }
#maincontent a { color: #93B300; }
	.level2 { font-size: .7em; font-weight: normal; }
	.small { font-size: .8em; font-weight: normal; }
	.uppercase { text-transform: uppercase; letter-spacing: .5px; letter-spacing: .1em; }
	
#maincontent li ul li { list-style: square; font-size: 1em; line-height: 160%; margin: 0; color: #444; vertical-align: baseline; }
	#maincontent .nomargin { margin: 0; } 

#maincontent ul { margin: 0 0 1em 1em; padding: 0; list-style: outside disc; }
#maincontent ol { margin: 0 0 1em 1.5em; padding: 0; list-style: outside decimal; }
#maincontent .noleader { margin: 0 0 0 0; padding: 0; list-style: none; }
#maincontent li { margin: 0 0 .2em 0; padding: 0; width: 92%; vertical-align: baseline; }
#maincontent label.timeline { float: left; width: 50px; margin: .12em .3em 1px 0; padding: 0; text-align: left; font-weight: bold; }
	*+ html #maincontent label.timeline { float: left; width: 50px; margin: 0 .3em 1px 0; padding: 0; text-align: left; font-weight: bold; }
	* html #maincontent label.timeline { float: left; width: 50px; margin: 0 .3em 1px 0; padding: 0; text-align: left; font-weight: bold; }
	
#maincontent .leftcol { width: 20%; margin: 0; float: left; }
#maincontent .rightcol { width: 75%; float: right; }
	
.feature { width: 17.35%; margin: 0 1em 0 0; padding: 0; float: left; }
	.feature img { width: 100%; height: 75px; }
	.feature a { color: #67752B; }
	.feature a.view { color: #67752B; background: url(../img/magnifying-glass-zoom-in-micro-icon.png) left 2px no-repeat; padding: 0 0 0 15px; }
	.feature a.featured { color: #67752B; background: url(../img/heart.png) left -1px no-repeat; padding: 0 0 0 19px; }

/* JC landing page-specific */
#maincontent h1.center { width: 660px; font-weight: normal; font-size: 1.8em; line-height: 115%; color: #5A4C3F; border: 0; margin: 0 0 1.1em 3.22em; letter-spacing: .02em; text-align: center; display: block; }
	.twocol_box { width: 343px; height: 7.9em; overflow: hidden; float: left; border: 1px dotted #bbb; padding: 20px; }
		#maincontent .twocol_box p { margin: 0 0 .4em 0; }
	.threecol_box { width: 215px; height: auto; float: left; border: 1px dotted #bbb; padding: 20px; }
	.twocol_box:hover, .threecol_box:hover { background: #f9f9f9; }
	.twocol_box img, .threecol_box img { width: 77px; height: 77px; margin: .3em .8em 0 0; float: left; }
	.highlight { background: #ffffdd; font-weight: bold; padding: 1px; }
	#maincontent .jclanding_mainimage { background: url(../img/mainimg_full.jpg) 15% 45%; width: 768px; height: 22em; margin: 0 auto 1.2em auto; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; }
	#maincontent .jclanding_albumoffer { position: absolute; top: 95px; left: 35px; padding: 1.2em; background: #C2D45C; height: auto; width: 290px; font-size: .7em; line-height: 130%; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; color: #483D32; }
	#maincontent .jclanding_logintostudioj { position: absolute; top: 190px; left: 35px; padding: .6em .9em; background: #D7E292; height: auto; wiqqdth: 190px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; }
	#maincontent .jclanding_features { width: 810px; margin: 1.25em auto .5em auto; }

/* Overlay FAQ */
#faq { position: absolute; z-index: 25; margin: 1.5em 1em 1.5em 0; padding: 1.8em 1.5em 1.5em 1.5em; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; color: #635445; width: 100%; top: 0; left: -35px; background: #E1EDAA; filter: alpha(opacity=94); opacity: 0.94; -moz-opacity: 0.94; background: rgba(225,237,170,1.0); display: none; }
*+ html #faq { position: absolute; z-index: 25; display: inline-block; zoom: 1; margin: 1.5em 1em 1.5em 0; padding: 1.8em 1.5em 1.5em 1.5em; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; color: #635445; width: 100%; top: 0; left: -35px; filter: alpha(opacity=94); opacity: 0.94; -moz-opacity: 0.94; background: #E1EDAA url(../img/faqbground.png); display: none; }
	#faq b { position: absolute; right: -14px; top: -10px; width: 26px; height: 26px; background: url(../img/closebox.png) 0 0; display: block; font-size: 1px; } 
	#faq h1 { font-size: 12px; line-height: 140%; margin: 0 0 2em 0; letter-spacing: .3em; text-align: center; }
		.uppercase { text-transform: uppercase; }
	#faq p, #faq li { font-size: 13px; line-height: 145%; text-align: left; margin: 0 0 1em 0; }
	#faq ul ul li { list-style: disc; margin: .3em 0 0 1em; }
	#faq ol, #faq ul { margin: .3em 0 1em 0; }
	#faq ol li { margin: 0 0 0 1.5em; }
	#faq a { color: #2D261F; }
	#faq li { list-style: decimal; margin: 0 0 1em 1.9em; }
	#faq .col1 { width: 48%; float: left; }
	#faq .col2 { width: 48%; float: right; }

/* Footer */
#footer { margin: 1.5em 1em 0 0; padding: 1.2em 0 0 0; border: 1px dotted #AAA29A; border-width: 1px 0 0 0; }
*html #footer { margin: 1em 1em 0 0; padding: 1.2em 0 0 0; border: 1px dotted #AAA29A; border-width: 1px 0 0 0; }
	#footer p { font-size: .7em; line-height: 148%; padding: 0 13.5em; text-align: center; color: #AAA29A; }
	#footer a { color: #8E8378; }
.clear { clear: both; }

/* Overlay Sample Layout */
#samplelayout { position: absolute; z-index: 26; margin: 6em auto; padding: 1.8em 1.5em 1.5em 1.5em; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; width: 100%; height: 443px; top: 0; left: -35px; background: #E1EDAA; display: none; }
	#samplelayout b { position: absolute; right: -14px; top: -10px; width: 26px; height: 26px; background: url(../img/closebox.png) 0 0; display: block; font-size: 1px; } 

/* Login page */
#login { backqqground: #f00; }
	#login .section { backqqground: #f00; width: 15.3em; padding: 0 1em 0 0; margin: 0 1.2em 0 0; float: left; }
	#login .sectionhighlight { width: 14.5em; padding: 1.3em 1.3em .8em 1.3em; margin: 0 1.7em 0 0; float: left; border: 1px solid #BDD74E; background: #DBE99E; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-box-shadow: 5px 5px 5px #BFC993; -webkit-box-shadow: 5px 5px 5px #BFC993; box-shadow: 5px 5px 5px #BFC993; }
	#login h5 { margin: .1em 0 0 0; }
	#login input, #login select { margin: 0 0 .2em 0; }
	#login input.button { margin: .8em 0 0 0; border-width: 0px 1px 1px 0px; }
	#login input.button:hover { background: #e6e6e6; }
	.sectionborder { border: 1px dashed #AAA29A; border-width: 0 1px 0 0; }
	#login .nomargin { padding: 0; margin: 0; } /* use for ending p style */