/* 

STYLE SHEET FOR JUNEWALLACK.COM
Created by Jean-Francois Turcot
www.calypsoconcept.com

ToC

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. tables
	7. forms
	
Notes

*/



/* --------- 1. defaults  --------- */

* {
	margin: 0;
	padding: 0;
}

body {
	background: #0b2b46 url(/images/page-background.png) repeat-y center top;
}
		
/*  --------- 2. structure  --------- */

#wrapper {
	width: 1024px;
	margin: 0 auto;
	background: #fff url(/images/content-background.png) repeat-x top left;
}
		
#masthead {
	position: relative;
	z-index: 5;
	margin: 0 14px;
	padding-top: 10px;
}

#home #masthead {
	background: url(/images/home-banner.png) no-repeat bottom left;
	height: 455px;
}

#home.fr #masthead {
	background: url(/images/home-banner-fr.png) no-repeat bottom left;
	height: 455px;
}

#services #masthead {
	height: 235px;
}

#services #wrapper.advertising #masthead {
	background: url(/images/secondary-banner-advertising.jpg) no-repeat bottom left;
}

#services #wrapper.corporate #masthead {
	background: url(/images/secondary-banner-corporate.jpg) no-repeat bottom left;
}

#services #wrapper.e-learning #masthead {
	background: url(/images/secondary-banner-e-learning.jpg) no-repeat bottom left;
}

#services #wrapper.phone-messaging #masthead {
	background: url(/images/secondary-banner-phone.jpg) no-repeat bottom left;
}

#services #wrapper.documentary-art-film #masthead {
	background: url(/images/secondary-banner-documentary.jpg) no-repeat bottom left;
}

#demos #masthead {
	background: url(/images/secondary-banner-demos.jpg) no-repeat bottom left;
	height: 235px;
}

#store #masthead {
	background: url(/images/secondary-banner-store.jpg) no-repeat bottom left;
	height: 235px;
}

#about #masthead {
	height: 235px;
}

#about #wrapper.june-wallack #masthead {
	background: url(/images/secondary-banner-about.jpg) no-repeat bottom left;
}

#about #wrapper.studio #masthead {
	background: url(/images/secondary-banner-about-studio.jpg) no-repeat bottom left;
}

#about #wrapper.clients #masthead {
	background: url(/images/secondary-banner-about-clients.jpg) no-repeat bottom left;
}

#contact #masthead {
	background: url(/images/secondary-banner-contact.jpg) no-repeat bottom left;
	height: 235px;
}

#projects #masthead {
	background: url(/images/secondary-banner-projects.jpg) no-repeat bottom left;
	height: 235px;
}

#store-order #masthead, #store-cart #masthead, #order #masthead {
	background: url(/images/secondary-banner-store.jpg) no-repeat bottom left;
	height: 235px;
}

#quote #masthead {
	background: url(/images/secondary-banner-quote.jpg) no-repeat bottom left;
	height: 235px;
}

#policies #masthead {
	background: url(/images/secondary-banner-projects.jpg) no-repeat bottom left;
	height: 235px;
}
		
#logo {
	float: left;
	margin: 25px 0 0 20px;
	position: relative;
	z-index: 10;
}

#logo a {
	display: block;
	width: 464px;
	height: 46px;
	background: url(/images/logo.png) no-repeat top left;
	text-indent: -9999px;
	overflow: hidden;
}
		
#navContainer #navigation {
	position: relative;
	float: right;
}

#navContainer #navigation #main-navigation {
	list-style: none;
	margin: 25px 0 0 0;
	padding: 0 5px;
	height: 59px;
	background: url(/images/nav-background.png) repeat-x top left;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}

#navContainer #navigation #main-navigation ul {
	display: block;
	height: 59px;
	list-style: none;
	margin: 0;
}

#navContainer #navigation #main-navigation li {
	float: left;
	height: 59px;
}

#navContainer #navigation #main-navigation li a {
	display: block;
	height: 30px;
	margin-top: 10px;
	padding: 10px 22px 0;
	text-decoration: none;
	color: #394756;
	border-right: 1px solid #cfcfcf;
	font-size: 18px;
	font-weight: normal;
}

body.fr #navContainer #navigation #main-navigation li a {
	margin-top: 11px;
	font-size: 16px;
}

#navContainer #navigation #main-navigation li a.last {
	border: none;
}

#navContainer #navigation #main-navigation li a:hover {
	color: #348acf;
	background: url(/images/nav-arrow-2.png) no-repeat center bottom;
}

#navContainer #navigation #main-navigation li a.here {
	color: #820c0c;
	background: url(/images/nav-arrow.png) no-repeat center bottom;
}

#navContainer #navigation #main-navigation li ul {
	position: absolute;
	z-index: 10;
	height: auto;
	background-image: none;
	list-style: none;
	margin-top: 9px;
	padding: 0 10px 5px 10px;
	background: #fff;
	display: none;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-box-shadow: 2px 2px 5px #555;
	-webkit-box-shadow: 2px 2px 5px #555;
	box-shadow: 2px 2px 5px #555;
}

body.fr #navContainer #navigation #main-navigation li ul {
	margin-top: 8px;
}

#navContainer #navigation #main-navigation li ul li {
	background: none;
	float: none;
	margin: 0;
	height: auto;
}

#navContainer #navigation #main-navigation li ul li a {
	margin: 5px 0;
	padding: 5px 5px 5px 12px;
	height: auto;
	display: block;
	background: #fff;
	border: none;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
}

body.fr #navContainer #navigation #main-navigation li ul li a {
	margin: 5px 0;
	padding: 5px 5px 5px 12px;
	height: auto;
	display: block;
	border: none;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
}

#navContainer #navigation #main-navigation li ul li a:hover, body.fr #navContainer #navigation #main-navigation li ul li a:hover {
	border-bottom: 1px solid #348acf;
	background: url(/images/nav-arrow-drop.png) no-repeat left center;
}

#navContainer #navigation ul#sub-navigation, #navContainer ul#user-navigation {
	margin: 10px 0 0 0;
	padding-left: 26px;
	list-style: none;
}

body.fr #navContainer #navigation ul#sub-navigation, body.fr #navContainer ul#user-navigation {
	padding-left: 22px;
}

#navContainer #navigation ul#sub-navigation li, #navContainer ul#user-navigation li {
	float: left;
	margin: 0;
}

#navContainer #navigation ul#sub-navigation li a, #navContainer ul#user-navigation li a {
	display: block;
	text-decoration: none;
	color: #820c0c;
	border-right: 1px solid #820c0c;
	padding: 0 10px;
}

#navContainer #navigation ul#sub-navigation li a.last, #navContainer ul#user-navigation li a.last {
	border: none;
}

#navContainer #navigation ul#sub-navigation li a:hover, #navContainer ul#user-navigation li a:hover {
	text-decoration: underline;
}

#navContainer ul#user-navigation {
	position: absolute;
	top: 5px;
	right: 18px;
}

body.fr #navContainer ul#user-navigation {
	position: absolute;
	top: 5px;
	right: 34px;
}

#navContainer #navigation #language-switcher {
	position: absolute;
	top: -5px;
	right: 23px;
	display: none;
}

body.fr #navContainer #navigation #language-switcher {
	position: absolute;
	top: -5px;
	right: 40px;
}

#navContainer #navigation #language-switcher a {
	display: block;
	padding: 2px 5px;
	text-decoration: none;
	color: #820c0c;
	font-size: 13px;
}

#navContainer #navigation #language-switcher a:hover {
	text-decoration: underline;
}

#breadcrumbs {
	font-family: "Century Gothic", "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	clear: both;
	margin-top: 5px;
	padding: 6px 35px 4px;
	font-size: 10px;
}

/*#breadcrumbs {
	clear: both;
	margin-top: 5px;
	padding: 5px 35px;
	font-size: 11px;
}*/

#breadcrumbs span {
	padding: 0 6px;
}

#content {
	margin: 5px 14px;
	padding: 30px 35px 35px 35px;
	background: #fff url(/images/main-content-background.png) repeat-x top left;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#content h1 {
	margin-bottom: 30px;
}

#content h1 span {
	padding: 0 0 6px 0;
	background: url(/images/h1-underline-red.png) repeat-x bottom center;
}

#content h1 span span {
	padding: 0 0 6px 10px;
	background: url(/images/h1-underline-red-1.png) no-repeat bottom left;
}

#content h1 span span span {
	padding: 0 10px 6px 0;
	background: url(/images/h1-underline-red-2.png) no-repeat bottom right;
}

#content #body_content p {
	text-align: justify;
}

#content #content-body  {
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

#content #body-audio {
	width: 900px;
	margin: 30px auto 0;
	text-align: right;
}

#home h1 {
	display: none;
}

#home #content {
	margin-top: -105px;
}

#home #content h2 {
	margin: 0 0 50px 330px;
	width: 585px;
}

/* Version flip
#home #content h2 {
	margin: 0 0 40px 100px;
	padding-top: 20px;
	width: 585px;
}*/

#home #content h2 span {
	padding: 0 0 8px 0;
	background: url(/images/h1-underline-red.png) repeat-x bottom center;
}

#home #content h2 span span {
	padding: 0 0 8px 15px;
	background: url(/images/h1-underline-red-long-1.png) no-repeat bottom left;
}

#home #content h2 span span span {
	padding: 0 15px 8px 0;
	background: url(/images/h1-underline-red-long-2.png) no-repeat bottom right;
}

#home #content #content-body {
	margin: 0 80px 0 100px;
	
}

#services #content #main-content, #about #content #main-content, #policies #content #main-content {
	float: right;
	width: 650px;
}

#services #content h1, #about #content h1, #policies #content h1 {
	margin-left: 260px;
}

#services #content #main-content h2, #about #content #main-content h2, #policies #content #main-content h2 {
	margin-top: 30px;
}

#services #content #main-content span.banner {
	display: block;
	width: 650px;
	height: 172px;
	text-indent: -9999px;
	margin-top: -25px;
}

#services.en #content #main-content span.banner {
	background: url(/images/phone-messaging-banner-en.jpg) no-repeat center center;
}

#services.fr #content #main-content span.banner {
	background: url(/images/phone-messaging-banner-fr.jpg) no-repeat center center;
}

#services #content #content-navigation, #about #content #content-navigation, #policies #content #content-navigation {
	width: 200px;
	padding: 5px;
	margin-top: -35px;
}

#services #content #content-navigation h2, #about #content #content-navigation h2, #policies #content #content-navigation h2 {
	font-weight: normal;
	margin-bottom: 10px;
	padding-left: 5px;
	font-size: 16px;
}

#services #content #content-navigation ul, #about #content #content-navigation ul, #policies #content #content-navigation ul {
	list-style: url(/images/demo-dot.png);
	margin-left: 18px;
}

#services #content #content-navigation ul li, #about #content #content-navigation ul li, #policies #content #content-navigation ul li {
	margin-bottom: 2px;
}

#services #content #content-navigation ul li a, #about #content #content-navigation ul li a, #policies #content #content-navigation ul li a {	
	display: block;
	padding: 8px 0 8px 2px;
	border-bottom: 1px dotted #aaa;
	font-size: 11.5px;
	color: #0f2437;
}

#services #content #content-navigation ul li a.here, #about #content #content-navigation ul li a.here, #policies #content #content-navigation ul li a.here {
	font-weight: bold;
	text-decoration: none;
	color: #820c0c;
	border-bottom: 1px dotted #820c0c;
	letter-spacing: 1.2px
}

#services #content #content-navigation ul li a:hover, #about #content #content-navigation ul li a:hover, #policies #content #content-navigation ul li a:hover {
	text-decoration: none;
	color: #348acf;
	border-bottom: 1px dotted #348acf;
}

#services #content #content-navigation ul li a:hover.here, #about #content #content-navigation ul li a:hover.here, #policies #content #content-navigation ul li a:hover.here {
	color: #820c0c;
	border-bottom: 1px dotted #820c0c;
}

#about #content .gallery {
	width: 290px;
	height: 270px;
	text-align: center;
	float: left;
	border: 1px dotted #cdcdcd;
	padding: 10px;
	margin: 0 6px 12px;
}

#about #content #about-june-gallery .gallery {
	height: 217px;
}

#about #content .testimonial {
	margin: 20px 0 10px 0;
	padding-bottom: 5px;
	border-bottom: 1px #ccc dotted;
}

#about #content .testimonial img {
	float: right;
	border: 5px;
	margin: 6px 5px 5px 15px;
	border: solid 3px #fff;
	-moz-box-shadow: 1px 1px 5px #888;
	-webkit-box-shadow: 1px 1px 5px #888;
}

#about #content .testimonial.last {
	margin-bottom: 0;
	padding-bottom: 0;
	border: none;
}

#about #content .testimonial p {
	margin-bottom: 2px;
}

#about #content .testimonial p.name {
	text-align: right;
	font-size: 12px;
	color: #820c0c;
}

#demos #content #content-body {
	float: left;
	width: 390px;
	text-align: justify;
}

#demos #content #content-body em {
	color: #820c0c;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
}

#demos #content #demo-list {
	float: right;
	width: 420px;
	margin-top: -25px;
}

#services #content #demo-list {
	width: 420px;
	margin-top: 30px;
	margin-bottom: 50px;
}

#demos #content #demo-list ul, #services #content #demo-list ul {
	list-style: url(/images/demo-dot.png);
	margin-bottom: 30px;
}

#demos #content #demo-list ul li.image, #demos #content #demo-list ul li.french, #demos #content #demo-list ul li.english, #services #content #demo-list ul li.image, #services #content #demo-list ul li.french, #services #content #demo-list ul li.english {
	display: none;
}

#demos #content #demo-list ul li a, #services #content #demo-list ul li a {
	clear: both;
	display: block;
	padding: 8px 0 8px 2px;
	border-bottom: 1px dotted #aaa;
	font-size: 13px;
	color: #0f2437;
}

#demos #content #demo-list ul li a.audio, #services #content #demo-list ul li a.audio {
	background: url(/images/demo-speaker.png) no-repeat right center;
}

#demos #content #demo-list ul li a.video, #services #content #demo-list ul li a.video {
	background: url(/images/demo-tv.png) no-repeat right center;
}

#demos #content #demo-list ul li a:hover, #services #content #demo-list ul li a:hover {
	text-decoration: none;
}

#demos #content #demo-list ul li a.audio:hover, #services #content #demo-list ul li a.audio:hover {
	background: url(/images/demo-speaker-over.png) no-repeat right center;
}

#demos #content #demo-list ul li a.video:hover, #services #content #demo-list ul li a.video:hover {
	background: url(/images/demo-tv-over.png) no-repeat right center;
}

#demos #content #demo-list ul li a span, #services #content #demo-list ul li a span {
	float: right;
	margin: 2px 38px 0 0;
	padding-bottom: 2px;
	color: #348acf;
	font-size: 10px;
}

#demos #content #demo-list ul li a:hover span, #services #content #demo-list ul li a:hover span {
	color: #db8a8e;
	font-weight: bold;
}

#demos #demo-player, #demos #demo-language-switcher, #services #demo-player, #services #demo-language-switcher {
	margin-top: 5px;
	text-align: center;
}

#demos #download-links, #services #download-links {
	position: absolute;
	top: 20px;
	right: 20px;
	text-align: right;
	list-style: none;
}

#contact #show-contacts, #quote #show-quotes {
	float: right;
	font-size: 12px;
}

#contact #content #content-body, #quote #content #content-body {
	float: right;
	width: 420px;
	margin: 25px 20px 0 0;
	text-align: justify;
}

#contact #content #form, #quote #content #form {
	width: 430px;
	float: left;
}

#store-order #content-body, #store-cart #content-body, #projects #content-body, #order #content-body {
	float: left;
	width: 230px;
	margin: 25px 20px 0 0;
	text-align: justify;
}

#store-order #content-body ul, #store-cart #content-body ul, #projects #content-body ul, #order #content-body ul {
	margin-left: 16px;
	font-size: 13px;
	list-style: url(/images/demo-dot.png);
}

#store-order #content-body ul li, #store-cart #content-body ul li, #projects #content-body ul li, #order #content-body ul li {
	margin-bottom: 10px;
}

#store-order #content-body ul li strong, #store-cart #content-body ul li strong, #projects #content-body ul li strong, #order #content-body ul li strong {
	font-weight: bold;
	color: #348acf;
	font-size: 13px;
}

#store-order #content-body ul li em, #store-cart #content-body ul li em, #projects #content-body ul li em, #order #content-body ul li em {
	color: #820c0c;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
}

#store-order #pricing-details {
	clear: both;
}

#store-order #voice-prompts p.add {
	float: left;
	margin-top: 5px;
}

#store-order form p.cancel {
	float: left;
	margin-top: -3px;
}

#store-order #voice-prompts p.remove {
	float: right;
	text-align: right;
	margin-right: 40px;
}

#store-order p.price, #store-order #price-total {
	text-align: right;
}

#store-order p.price  {
	margin: 0;
	padding: 5px 5px 0 5px;
	font-style: normal;
	font-weight: bold;
}

#store-order p.price span {
	margin: 0;
	font-style: normal;
}

#store-order #price-total {
	margin-bottom: 8px;
}

#store-order #price-total p {
	margin-bottom: 2px;
	font-size: 15px;
	padding-right: 5px;
	text-align: right;
	font-weight: bold;
}

#store-order #price-total p span {
	margin: 0;
	font-size: 15px;
	font-style: normal;
}

#store-order #price-total a {
	display: inline-block;
	font-size: 14px;
	padding-right: 20px;
	margin-top: 3px;
	margin-bottom: 3px;
	background: url(/images/button-money.png) no-repeat center right;
}

#store-order #price-total a:hover {
	background: url(/images/button-money-over.png) no-repeat center right;
}

#store-order a.price, #store-order a.how_to {
	font-size: 14px;
	padding-left: 20px;
	padding-top: 1px;
	background: url(/images/button-money.png) no-repeat center left;
}

#store-order a.how_to {
	background: url(/images/button-help.png) no-repeat center left;
	
}

#store-order a:hover.price {
	background: url(/images/button-money-over.png) no-repeat center left;
}

#store-order a:hover.how_to {
	background: url(/images/button-help-over.png) no-repeat center left;
}

#store-cart p#taxes-note, #order p#taxes-note {
	text-align: right;
	font-style: italic;
	font-size: 11px;
	margin-bottom: 5px;
}

#store-cart ul#taxes, #order ul#taxes {
	margin-right: 25px;
}

#store-cart ul#taxes li, #order ul#taxes li {
	list-style: none;
}

#store-cart ul#taxes li span, #order ul#taxes li span {
	display: inline-block;
	margin-right: 15px;
	font-weight: bold;
}

#store-cart #cart, #projects #projects-list, #order #cart  {
	float: right;
	width: 650px;
}

#store-cart #cart ul, #projects #projects-list ul, #order #cart ul {
	font-size: 14px;
	margin-bottom: 15px;
	margin-left: 25px;
	list-style: url(/images/demo-dot.png);
}

#store-cart #cart li, #projects #projects-list li, #order #cart li {
	margin-bottom: 5px;
}

#store-cart #cart li span.desc, #projects #projects-list li span.desc, #order #cart li span.desc {
	color: #820c0c;
	display: block;
}

#store-cart #cart li.title p, #projects #projects-list li.title p, #order #cart li.title p {
	display: block;
	margin-left: 10px;
}

#store-cart #cart li.comments p, #projects #projects-list li.comments p, #order #cart li.comments p {
	margin-left: 10px;
}

#store-cart #cart li ul, #projects #projects-list li ul, #order #cart li ul {
	margin-top: 5px;
	margin-bottom: 0;
}

#store-cart p.edit {
	float: right;
	margin-right: 10px;
}

#store-cart p.edit a {
	background: url(/images/button-edit.png) no-repeat center right;
	padding-right: 20px;
	padding-top: 2px;
	font-size: 12px;
	font-style: italic;
}

#store-cart p.edit a:hover {
	background: url(/images/button-edit-over.png) no-repeat center right;
}

#store-cart p.remove {
	float: left;
	margin-left: 10px;
	margin-top: -3px;
}

#store-cart p.remove a {
	background: url(/images/button-minus.png) no-repeat center left;
	padding-left: 20px;
	padding-top: 2px;
	font-size: 12px;
	font-style: italic;
}

#store-cart p.remove a:hover {
	background: url(/images/button-minus-over.png) no-repeat center left;
}

#store-cart #checkout, #order #checkout {
	text-align: right;
	padding-right: 5px;
}

#store-cart #checkout #address {
	text-align: left;
	margin-top: 20px;
}

#store-cart #checkout #address input.submit {
	float: right;
}

#store-cart #checkout #address ul {
	margin-bottom: 20px;
}

#store-cart #checkout p.total, #order #checkout p.total {
	font-size: 15px;
	font-weight: bold;
	text-align: right;
	margin-bottom: 10px;
}

#store-cart #checkout form {
	margin-right: 15px;
}

#store-cart.fr #checkout form {
	margin-right: 12px;
}

#projects #projects-list li span {
	margin: 0 5px;
}

#project-description {
	margin-bottom: 10px;
	padding-right: 5px;
	padding-left: 5px;
}

#projects p.submit {
	margin-top: 8px;
}

#projects #comments .comment {
	border-bottom: 1px dotted #ccc;
	margin-bottom: 10px;
	padding-right: 5px;
	padding-left: 5px;
}

#projects #comments .comment h3 {
	font-size: 14px;
}

#projects #comments .comment h3 span {
	font-size: 12px;
	font-weight: normal;
	font-style: italic;
}

#projects #comments .comment p.date {
	float: right;
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-style: italic;
}

#projects #comments .comment p.user-comment {
	margin-top: 10px;
	margin-left: 20px;
}

#admin #administration {
	padding: 20px;
}

#admin #administration a#back_home {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
}

#admin div.section {
	margin-bottom: 20px;
}

#admin ul li {
	font-size: 14px;
	margin: 5px;
}

#admin ul li span {
	margin: 0 5px;
}

#admin form.delete {
	float: right;
}

#admin table {
	width: 100%;
}

#admin h3 {
	margin-top: 20px;
}

#admin span.edit-note {
	margin-left: 15px;
}

#admin p {
	margin: 15px 0;
}

#admin #reports #filter, #admin #reports #results {
	margin-top: 20px;
}

#admin #reports #filter {
	margin-bottom: 10px;
}

#secondary-content {
	margin-bottom: 5px;
	text-align: center;
}

#footer {
	clear: both;
	width: 1024px;
	margin: 0 auto;
}

#banners {
	padding: 0 14px;
}

#banners #primary-banner {
	float: left;
	width: 754px;
	height: 102px;
	padding: 15px 30px 15px 20px;
	background: url(/images/testimonial-banner-back.png) no-repeat top left, url(/images/lower-banner-background.png) repeat-x bottom;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#banners #primary-banner #testimonial {
	height: 102px;
}

#banners #primary-banner a.more-info {
	display: block;
	float: left;
	padding: 5px 0 0 20px;
}

#banners #primary-banner a.more-info img {
	border: solid 7px #fff;
	-moz-box-shadow: -1px -1px 5px #888;
	-webkit-box-shadow: -1px -1px 5px #888;
}

#banners #primary-banner div.testimonial p {
	color: #999999;
	padding-top: 15px;
	font-size: 13px;
	text-align: justify;
	/*text-indent: 30px;*/
	width: 545px;
	float: right;
	line-height: 16px;
}

#banners #primary-banner div.testimonial p.author {
	color: #0a2b4c;
	padding-top: 0;
	text-align: right;
	font-style: italic;
	text-indent: 0;
	background-image: none;
}

#banners #store-banner {
	float: right;
}

#banners #store-banner a {
	display: block;
	width: 188px;
	height: 129px;
	background: url(/images/shopping-banner-sprite.png) no-repeat left top;
	text-indent: -9999px;
	overflow: hidden;
}

#banners #store-banner a:hover {
	background: url(/images/shopping-banner-sprite.png) no-repeat -188px top;
}

body.fr #banners #store-banner a {
	background: url(/images/shopping-banner-sprite-fr.png) no-repeat left top;
}

body.fr #banners #store-banner a:hover {
	background: url(/images/shopping-banner-sprite-fr.png) no-repeat -188px top;
}

#footer #lower-footer {
	position: absolute;
	display: block;
	bottom: 0;
	width: 984px;
	height: 50px;
	padding: 10px 20px 0;
	margin-top: 7px;
	color: #fff;
	background: url(/images/footer-background.png) repeat-x top;
}

#footer #lower-footer p {
	font-size: 9px;
	line-height: 10px;
	letter-spacing: 1px;
	margin: 0;
	padding-top: 10px;
	color: #8199ad;
}

#footer #lower-footer a {
	color: #e1e9ef;
}

#footer #lower-footer a.calypso-concept {
	display: block;
	float: right;
	width: 123px;
	height: 40px;
	text-indent: -9999px;
	margin-right: 25px;
}

body.en #footer #lower-footer a.calypso-concept {
	background: url(/images/calypso-concept-en.png) no-repeat top left;
}

body.fr #footer #lower-footer a.calypso-concept {
	background: url(/images/calypso-concept-fr.png) no-repeat top left;
}

#lightbox, #rates, #how_to {
	display: none;
	position: fixed;
	z-index: 100;
	width: 100%;
	height: 100%;
	background: url(/images/lightbox-shadow.png);
}

#lightbox #inner-lightbox, #rates #inner-rates, #how_to #inner-how_to {
	border: 1px solid white;
	text-align: center;
	position: relative;
	left: 50%;
	padding: 15px 25px;
	background: #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-box-shadow: 2px 2px 5px #555;
	-webkit-box-shadow: 2px 2px 5px #555;
	box-shadow: 2px 2px 5px #555;
	
	top: 10%;
	width: 550px;
	margin-left: -300px;
}

#store-order #lightbox #inner-lightbox {
	width: 650px;
	margin-left: -350px;
}

#rates #inner-rates {
	width: 700px;
	margin-left: -375px;
}

#how_to #inner-how_to {
	width: 700px;
	margin-left: -375px;
	padding-bottom: 20px;
}

#how_to #inner-how_to div.help {
	margin-bottom: 10px;
}

#demos #lightbox #inner-lightbox {
	top: 20%;
	width: 550px;
	margin-left: -300px;
}

#lightbox.pricing-details #inner-lightbox {
	width: 900px;
	margin-left: -480px;
	height: 75%;
	position: relative;
}

#lightbox.pricing-details #inner-lightbox #pricing-details-table {
	position: absolute;
	top: 7.5em;
	bottom: 25px;
	left: 25px;
	right: 25px;
	overflow: auto;
}

#lightbox #inner-lightbox h2, #rates #inner-rates h2, #how_to #inner-how_to h2 {
	padding-bottom: 8px;
	border-bottom: 1px solid #ccc;
}

#rates #inner-rates p#translation-note {
	text-align: left;
	padding: 5px 15px;
	font-size: 12px;
	font-weight: bold;
	margin-top: 15px;
	background: #dfe8f4;
}

#rates #inner-rates #please-note {
	text-align: left;
	margin-top: 20px;
}

#rates #inner-rates #please-note h3 {
	font-size: 13px;
	font-weight: bold;
}

#rates #inner-rates #please-note p {
	font-size: 13px;
}

#how_to #inner-how_to ul {
	list-style: none;
}

#how_to #inner-how_to ul li {
	display: inline;
}

#how_to #inner-how_to ul li a {
	padding: 0 10px;
	font-size: 13px;
}

#how_to #inner-how_to ul li a.selected {
	color: #820c0c;
	font-weight: bold;
}

#lightbox #inner-lightbox h3, #how_to #inner-how_to h3 {
	margin: 20px 0 10px;
	font-weight: normal;
	font-size: 14px;
}

#how_to #inner-how_to h3 {
	font-size: 16px;
	margin-bottom: 8px;
}

#how_to #inner-how_to h3, #how_to #inner-how_to p {
	text-align: left;
}

#how_to #inner-how_to p {
	padding-bottom: 10px;
	line-height: 1.5em;
	border-bottom: 1px dotted #ccc;
	font-size: 13.5px;
}

#how_to #inner-how_to p span {
	display: block;
	margin: 0;
	background: url(/images/demo-dot.png) no-repeat 0.5em 0.6em;
	margin-bottom: 5px;
	padding-left: 20px;
}

#how_to #inner-how_to p span strong {
	color: #348acf;
	font-size: 14px;
}

#how_to #inner-how_to p span em {
	color: #820c0c;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
}

#lightbox #inner-lightbox img {
	margin-bottom: 10px;
}

#lightbox #inner-lightbox p.download {
	margin-top: 20px;
	font-size: 11px;
}

#lightbox.flash #inner-lightbox p {
	margin-top: 20px;
	font-size: 14px;
}

#lightbox #inner-lightbox a.close, #rates #inner-rates a.close, #how_to #inner-how_to a.close {
	position: absolute;
	top: -18px;
	left: -18px;
	display: block;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background: url(/images/close-button.png) no-repeat top right;
}

#lightbox #inner-lightbox div#errorExplanation p, #lightbox #inner-lightbox div#errorExplanation ul {
	text-align: left;
	margin-left: 15px;
}

#lightbox #inner-lightbox div#errorExplanation ul {
	margin: 0 0 10px 45px;
	list-style: url(/images/demo-dot.png);
}

#lightbox #inner-lightbox div#errorExplanation ul li {
	color: #820c0c;
	font-size: 13px;
}

#lightbox #inner-lightbox #login #links {
	font-size: 11px;
	margin: 50px 0 0 0;
	padding-top: 10px;
	border-top: dotted 1px #ccc;
}

.columns {
	-webkit-column-count : 2;
	-webkit-column-gap : 20px;
	-moz-column-count : 2;
	-moz-column-gap : 20px;
}

.hidden {
	display: none;
}

.separator {
	clear: both;
}

.separatorInvisible {
	clear: both;
	height: 1px;
}

.clearFix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/* ---------- 3. links and navigation ---------- */

a {
	text-decoration: none;
	color: #348acf;
}
		
a:hover {
	text-decoration: underline;
	color: #820c0c;
}

#navigation {}

#navigation ul {}

#navigation li {}

#navigation a {}

#navigation a:hover {}

/* ---------- 4. fonts ---------- */

@font-face {
	font-family: 'Century Gothic';
	src: url('../fonts/CenturyGothic.ttf') format('truetype');
}

html {
	font-size: 100%;
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	color: #0f2437;
}

body {
	font-size: 62.5%;
}

h1, h2, h3, h4, p, ul {}

h1 {
	font-size: 22px;
	margin-bottom: 10px;
	/* color: #0f2437; */
	font-weight: normal;
	letter-spacing: 1px;
	font-family: "Century Gothic", "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	color: #820c0c;
}

h2 {
	font-size: 18px;
	margin-bottom: 10px;
	/* color: #0f2437; */
	font-weight: normal;
	letter-spacing: 1px;
	font-family: "Century Gothic", "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	color: #820c0c;
	border-bottom: 1px solid #820c0c;
	padding: 0 5px 3px 5px;
}

#home h2 {
	font-size: 22px;
	border-bottom: none;
}

h3 {
	font-size: 15px;
	margin-bottom: 4px;
	color: #333;
	letter-spacing: 1px;
}

#store-order h3 {
	color: #820c0c;
}
		
h4 {}

p {
	font-size: 14px;
	margin-bottom: 10px;
	word-spacing: 1px;
}

#content p {
	line-height: 22px;
	text-align: justify;
}

ul {
	margin-left: 30px;
}

#navContainer #navigation,  #services #content-navigation li a, #about #content-navigation li a {
	font-family: "Century Gothic", "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
}

#navContainer #navigation #sub-navigation, #navContainer #user-navigation {
	letter-spacing: 0.09em;
	font-size: 12px;
}

#navContainer #user-navigation {
	font-size: 11px;
}

blockquote {}

.intro {
	font-weight: bold;
}

/* ---------- 5. images ---------- */

a img {
	border: 0;
}
		
/* ---------- 6. tables ---------- */

table {}
		
caption {}
		
tr {}

th, td {}
		
th {}
		
td {}

table.formatted, #store-order #lightbox table, #store-cart #pricing-details table, #store-order #rates table, #order #pricing-details table {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 13px;
	margin-bottom: 10px;
}

table.formatted th, #store-order #lightbox table th, #store-cart #pricing-details table th, #store-order #rates table th, #order #pricing-details table th {
	background: #cadcef;
	border-top: 2px solid #fff;
}

table.formatted tr.odd, #store-order #lightbox table tr.odd, #store-cart #pricing-details table tr.odd, #store-order #rates table tr.odd, #order #pricing-details table tr.odd {
	background: #fff;
}

table.formatted tr.even, #store-order #lightbox table tr.even, #store-cart #pricing-details table tr.even, #store-order #rates table tr.even, #order #pricing-details table tr.even {
	background: #dfe8f4;
}

table.formatted th, table.formatted td, #store-order #lightbox table th, #store-order #lightbox table td, #store-cart #pricing-details table th, #store-cart #pricing-details table td, #store-order #rates table th, #store-order #rates table td, #order #pricing-details table th, #order #pricing-details table td {
	padding: 3px 15px;
	text-align: left;
}

table.formatted td,#store-order #lightbox table td, #store-cart #pricing-details table td, #store-order #rates table td, #order #pricing-details table td {
	border: none;
}

table.formatted th.center, table.formatted td.center {
	text-align: center;
}

table.formatted th.right, table.formatted td.right {
	text-align: right;
}

#store-order #lightbox table th.items, #store-order #lightbox table td.items, #store-cart #pricing-details table th.items, #order #pricing-details table th.items {
	text-align: left;
}

#store-order #lightbox table th.price, #store-order #lightbox table th.total {
	text-align: right;
}

#store-order #lightbox table td.quantity, #store-cart #pricing-details table td.quantity, #order #pricing-details table td.quantity {
	text-align: center;
}

#store-order #lightbox table td.price, #store-order #lightbox table td.total {
	text-align: right;
}

#store-cart #pricing-details table th.price, #store-cart #pricing-details table th.total, #store-cart #pricing-details table td.price, #store-cart #pricing-details table td.total,
#order #pricing-details table th.price, #order #pricing-details table th.total, #order #pricing-details table td.price, #order #pricing-details table td.total {
	text-align: center;
}

#store-order #lightbox table td.total-title, #store-cart #pricing-details table td.total-title, #order #pricing-details table td.total-title {
	text-align: right;
}

#store-order #lightbox table tfoot td, #store-cart #pricing-details table tfoot td, #order #pricing-details table tfoot td {
	text-align: right;
	font-weight: bold;
	background: #cadcef;
	border-top: 2px solid #fff;
}

#store-order #rates table th.prompt, #store-order #rates table td.prompt, #store-order #rates table td.addtional_words_price {
	text-align: left;
}

#store-order #rates table td.addtional_words {
	text-align: right;
	padding-right: 0;
}

#store-order #rates table th.conversions, #store-order #rates table td.conversions {
	text-align: right;
}

#store-order #rates table th.translation {
	text-align: left;
}

#store-order #rates table td.translation {
	border-bottom: 3px double #cadcef;
	text-align: left;
}

/* ---------- 7. forms ---------- */	
		
form {}

#contact form, #quote form, #store-order form, #projects form, #admin form, #store-cart form {
	font-size: 14px;
}

#contact form fieldset, #quote form fieldset, #store-order form fieldset, #projects form fieldset, #store-cart form fieldset {
	border: none;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	padding-bottom: 20px;
}

#projects form fieldset {
	margin-bottom: 30px;
}

#contact form fieldset legend, #quote form fieldset legend, #store-order form fieldset legend, #projects form fieldset legend, #store-cart form fieldset legend {
	padding-bottom: 10px;
	font-size: 16px;
	color: #820c0c;
}

#contact form ul, #quote form ul, #store-order form ul, #login form ul, #projects form ul, #admin form ul, #store-cart form ul {
	margin-left: 25px;
	list-style: url(/images/demo-dot.png);
}

#contact form ul li, #quote form ul li, #store-order form ul li, #login form ul li, #projects form ul li, #admin form ul li, #store-cart form ul li {
	clear: both;
	margin-bottom: 5px;
}

#contact form label, #quote form label, #store-order form label, #login form label, #projects form label, #admin form label, #store-cart form label {
	display: block;
	margin-bottom: 4px;
}

#contact form input.text-input, #quote form input.text-input, #store-order form input.text-input, #login form input.text-input, #admin form input.text-input, #store-cart form input.text-input {
	width: 300px;
	font-size: 15px;
	margin-left: 14px;
	margin-bottom: 2px;
	padding: 1px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#contact form fieldset#file-attachments-fieldset label, #quote form fieldset#file-attachments-fieldset label, #store-order form fieldset#file-attachments-fieldset label, #projects form ul#assets label, #projects form ul#audio_files label {
	display: inline;
	margin-right: 20px;
}

#projects label.checkbox {
	display: inline;
	margin: 0 5px;
}

#contact form fieldset#file-attachments-fieldset ul, #quote form fieldset#file-attachments-fieldset ul, #store-order form fieldset#file-attachments-fieldset ul {
	margin-bottom: 10px;
	padding-top: 0;
}

#store-order form fieldset p, #store-order form #options-title p {
	font-size: 12px;
	font-style: italic;
}

#contact form textarea, #quote form textarea, #store-order form textarea, #projects form textarea, #admin form textarea, #store-cart form textarea {
	width: 390px;
	height: 160px;
	margin: 0 15px 0 15px;
	padding: 2px;
	font-size: 16px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 2px inset #ddd;
}

#store-cart form textarea {
	height: 30px;
	width: 300px;
}

#store-cart form select {
	margin: 0 15px 0 15px;
	width: 305px;
}

#store-order form input.text_field {
	width: 390px;
	margin: 0 15px 0 15px;
	padding: 2px;
	font-size: 16px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 2px inset #ddd;
}

#projects form textarea {
	width: 500px;
}

#contact form p, #quote form p, #store-order form p {
	margin: 0;
}

#contact form p.add a, #quote form p.add a, #store-order form p.add a, #projects form p.add a {
	background: url(/images/button-plus.png) no-repeat center left;
	padding-left: 20px;
	padding-top: 2px;
	font-size: 12px;
	font-style: italic;
}

#contact form p.add a:hover, #quote form p.add a:hover, #store-order form p.add a:hover, #projects form p.add a:hover {
	background: url(/images/button-plus-over.png) no-repeat center left;
}

#store-order form p.cancel a {
	background: url(/images/button-x.png) no-repeat center left;
	padding-left: 20px;
	padding-top: 2px;
	font-size: 12px;
	font-style: italic;
}

#store-order form p.cancel a:hover {
	background: url(/images/button-x-over.png) no-repeat center left;
}

#contact form a.remove, #quote form a.remove, #store-order form a.remove, #store-order form p.remove a, #projects form a.remove {
	background: url(/images/button-minus.png) no-repeat center left;
	padding-left: 20px;
	padding-top: 2px;
	font-size: 12px;
	font-style: italic;
}

#contact form a:hover.remove, #quote form a:hover.remove, #store-order form a:hover.remove, #store-order form p.remove a:hover, #projects form a:hover.remove {
	background: url(/images/button-minus-over.png) no-repeat center left;
}

#store-order form textarea {
	width: 560px;
	margin-bottom: 5px;
}

#store-order form span {
	margin-left: 15px;
	font-size: 12px;
	font-style: italic;
}

#store-order form span.space {
	margin: 0 5px;
}

#contact form input.submit, #quote form input.submit, #store-order form input.submit, #projects form input.submit {
	float: right;
	margin-right: 20px;
}

#admin form input.submit {
	margin-left: 400px;
}

#store-order.fr form input.submit {
	margin-right: 4px;
}

#store-cart form input.submit {
	margin-right: 9px;
	float: right;
}

#store-cart.fr form input.submit {
	margin-right: 7px;
}

#projects form input.submit {
	margin-right: 110px;
}

#store-order form {
	width: 640px;
	float: right;
}

#store-order form fieldset a.help {
	display: block;
	text-align: right;
	float: right;
	margin: -28px 5px 0 0;
	padding-right: 20px;
	/*color: #820c0c;*/
	background: url(/images/button-help.png) no-repeat center right;
}

#store-order form fieldset a:hover.help {
	background: url(/images/button-help-over.png) no-repeat center right;
}

#store-order form fieldset p.help {
	margin-bottom: 20px;
	padding-bottom: 10px;
	text-indent: 5px;
	line-height: 1.7em;
	border-bottom: 1px dotted #ccc;
}

#store-order form fieldset p.help span {
	display: block;
	margin: 0;
	background: url(/images/demo-dot.png) no-repeat 0.5em 0.7em;
	margin-bottom: 5px;
	padding-left: 15px;
}

#store-order form fieldset p.help span strong {
	color: #348acf;
	font-size: 14px;
}

#store-order form fieldset p.help span em {
	color: #820c0c;
	font-size: 14px;
	font-weight: bold;
}

#store-order form fieldset label em {
	color: #820c0c;
	font-size: 14px;
	font-style: normal;
}

#store-order #voice-prompts fieldset#voice-prompts-fieldset-1 {
	display: block;
}

#store-order form #options label {
	display: inline;
}

#store-order form li.edit span {
	margin: 0;
	font-style: normal;
	font-size: 14px;
}

#store-order form li.edit a, #store-order form #voice-prompts fieldset a.edit {
	margin-left: 20px;
	padding-right: 20px;
	background: url(/images/button-edit.png) no-repeat center right;
}

#store-order form li.edit a:hover, #store-order form #voice-prompts fieldset a.edit:hover {
	background: url(/images/button-edit-over.png) no-repeat center right;
}

#store-order form fieldset p.words {
	text-align: right;
	margin-right: 45px;
	line-height: 1.6em;
}

#store-order form #options input.radio, #store-order form #options input.button, #store-order form #voice-prompts input.button {
	margin: 0 2px 0 2px;
}

#store-order form #options fieldset#opt-audio-formats-fieldset {
	border-bottom: 1px dotted #ccc;
}

#store-order form #options fieldset ul {
	margin-left: 40px;
}

#store-order form #options ul#file-format-details label {
	float: left;
	margin-right: -10em;
}

#store-order form #options ul#file-format-details li .audio_format_select {
	margin-left: 11em;
}

#store-order form #options-title {
	margin-bottom: 10px;
}

#store-order form #options fieldset legend a {
	padding-left: 20px;
	margin-left: 10px;
	background: url(/images/show-options.png) no-repeat left center;
}

#store-order form #options fieldset legend a:hover {
	background: url(/images/show-options-over.png) no-repeat left center;
}

#store-order form #options fieldset legend a.hide {
	background: url(/images/hide-options.png) no-repeat left center;
}

#store-order form #options fieldset legend a:hover.hide {
	background: url(/images/hide-options-over.png) no-repeat left center;
}

#store-order form #options fieldset legend a span {
	margin: 0;
	font-size: inherit;
}

#store-order form #options-title p.price {
	padding-bottom: 10px;
}

#store-order form #options-title p.price, #store-order form #options-title p.price span {
	font-style:normal;
}

#projects #projects-list form.show-hide {
	float: right;
}

label.validate span, p.validate span {
	display: inline-block;
	background: url(/images/button-validate.png) no-repeat left center;
	width: 10px;
	height: 10px;
	text-indent: -9999px;
}

p.validate {
	font-size: 12px;
	font-style: italic;
	float: left;
	margin: 0;
	padding: 0;
}

div.fieldWithErrors label {
	color: #820c0c;
	font-weight: bold;
}

div.fieldWithErrors input, div.fieldWithErrors textarea {
	background: #ffc8c8;
}

#login form {
	text-align: left;
	width: 320px;
	margin: 0 auto 30px;
}

#login form label {
	display: block;
	font-size: 16px;
}

#login form input {
	font-size: 16px;
}

#login form input.text-input {
	width: 240px;
}

#login form input.submit {
	float: right;
	margin-right: 45px;
}



*, body {
	margin: 0;
	padding: 0;
}

#wrapper {
	display: block;
	position: absolute;
	min-height: 100%;
	left: 50%;
	margin-left: -512px;
}

#content {
	display: block;
	margin-bottom: 201px;
}

#footer {
	position: absolute;
	display: block;
	bottom: 0;
	height: 201px;
}

#footer #banners {
	padding-top: 5px;
}