/* Layout and Content CSS */

@font-face {
  font-family: CaviarDreams;
  src: url('caviardreams.ttf')  format('truetype');
}

@font-face {
  font-family: 'AlegreyaRegular';
  src: url('alegreya-regular.otf')  format('opentype');
}

@font-face {
  font-family: 'AlegreyaItalic';
  src: url('alegreya-italic.otf')  format('opentype');
}

body {
	font-family: AlegreyaRegular, "Times Roman", Times, serif;
	background-attachment: fixed;
	background-color: #f5f5dc;
	background-repeat: no-repeat;
}

/* ******* page and menu related background settings */
#pageTemplate {
	background-image: url(images/bg-template.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageHome {
	background-image: url(images/bg-welcome.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageOrderOnline {
	background-image: url(images/bg-orderonline.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageOrderByEmail {
	background-image: url(images/bg-orderbyemail.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageOrderForm1 {
	background-image: url(images/bg-orderform.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageTestimonials {
	background-image: url(images/bg-testimonials.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}
/* More Info submenus */
#pageFAQs {
	background-image: url(images/bg-faqs.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageComparingMethods {
	background-image: url(images/bg-methods.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageForYoungChildren {
	background-image: url(images/bg-youngchildren.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageForSpecialNeeds {
	background-image: url(images/bg-specialneeds.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageDulcimerSimplified {
	background-image: url(images/bg-dulcimersimplified.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageOrderConfirmation {
	background-image: url(images/bg-orderconfirmation.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

/* Resources submenus */
#pageSongLists {
	background-image: url(images/bg-songlists.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageBooks {
	background-image: url(images/bg-books.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageInstruments {
	background-image: url(images/bg-instruments.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}
/* Educators submenus */
#pageTheAuthor {
	background-image: url(images/bg-theauthor.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageAuthorsPreface {
	background-image: url(images/bg-authorspreface.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageArticle1 {
	background-image: url(images/bg-article1.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageArticle2 {
	background-image: url(images/bg-article2.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageProject {
	background-image: url(images/bg-project.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageContactUs {
	background-image: url(images/bg-contactus.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageOffsiteLinks {
	background-image: url(images/bg-offsitelinks.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}

#pageSitemap {
	background-image: url(images/bg-sitemap.png), url(images/bg-guitarbarre.png);
	background-position: 20px center, left center;
	background-size: auto auto, auto auto;
}
/* *************************** */

a {
	text-decoration: none;
	color: blue;
	padding: 0 3px;
	border: 1px solid transparent;
}

a:hover {
	text-decoration: none;
	background-color: #ffe;
	border: 1px solid #009;
}

div {
	box-sizing: border-box;
}

h1, h2, h3, h4 {
	box-sizing: border-box;
	margin:.5em 0;
	font-family: CaviarDreams, Arial, sans-serif;
	line-height: 1.1em;
	color: #009;
}

h1 {
	font-size: 1.75em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.25em;
	color: #009;
}

h4 {
	font-size: 1em;
}

p {
	margin: 1em 0;
}

sup {
	vertical-align: text-top;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: .5em;
}

ul, ol {
	margin-left: 3em;
}

img {
	border: 1px solid #009;
}

#topBox {
	position: fixed;
	top: 0;
/*	z-index: 1000;*/
	width: 100%;
	height: 20px;
	background-color: #f5f5dc; /* fallback for gradient lines */
	background: -moz-linear-gradient(top, rgba(245,245,220,0) 0%, rgba(245,245,220,0) 100%);
}

#designSpace {
	position: relative;
	top: 10px;
	margin-left:auto;
	margin-right: auto;
	min-width: 760px;
	max-width: 1000px;
	padding-left: 26px;
}

#sideBar {
	position: fixed;
	margin-left: 0px;
	width: 120px;
	z-index: 100;
}

#sideBarHeader, #sideBarFooter {
	text-align: center;
	background-color: rgb(230, 230, 250); /* fallback for next line*/
	background-color: rgba(230, 230, 250, 0.5);
	font-size: 1em;
	font-weight: bold;
	line-height: 1em;
	padding:10px 0 10px 0;
	border: 1px solid #009;
	border-radius: 8px;
}

#pageContent {
	margin-left:121px;
	margin-right: auto;
	min-width: 660px;
	max-width: 900px;	
	padding: 0px 10px;
	text-align: justify;
	font-size: 1em;
	line-height: 1.5em;
	z-index: 0;
}

#contentHeader {
	text-align: center;
	font-family: CaviarDreams, Arial, sans-serif;
	font-size: 2em;
	line-height: 1em;
	font-weight: bold;
	color: white;
	background-color: rgb(0,221,0);/* for browsers that don't support gradients */
	background-image: -ms-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* IE10+ */ 
	background-image: -moz-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* Mozilla Firefox */ 
	background-image: -o-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* Opera */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,68,0,1)), color-stop(100, rgba(51,221,221,1)));/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* Webkit (Chrome 11+) */ 
	background-image: linear-gradient(to bottom, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* W3C Markup */ 
	border: 1px solid #009;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 10px;
}

#contentSubHeader {
	margin-top: 5px;
	text-align: center;
/*	font-family: AlegreyaRegular, "Times New Roman", Times, serif;*/
/*	font-size: 1em;*/
	font-family: CaviarDreams, Arial, sans-serif;
	font-size: .85em;
	font-weight: bold;
}

#contentFooter {
	border: 1px solid #009;
	border-radius: 8px;
	margin: 0 0 40px 0;
	background-color: rgb(230, 230, 250); /* fallback for next line*/
	background-color: rgba(230, 230, 250, 0.5);
	padding: 5px;
	text-align: center;
	font-size: .8em;
	line-height: 1em;
}

.clearLeft {
	clear: left;
}

.clearRight {
	clear: right;
}

.clearBoth {
	clear: both;
}

.tCenter {
	text-align: center;
}

.tJustify {
	text-align: justify;
}

.tleft {
	text-align: left;
}

.tRight {
	text-align: right;
}

.tUnderline {
	text-decoration: underline;
}

.fBold {
	font-weight: bold;
}

.fNormal {
	font-weight: normal;
}

.fItalic {
	font-style: italic;
}

.centerBlock {
	margin: 0 auto;
}

.sectionHeader {
	color: white;
	background-color: rgb(0,221,0);/* for browsers that don't support gradients */
	background-image: -ms-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* IE10+ */ 
	background-image: -moz-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* Mozilla Firefox */ 
	background-image: -o-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* Opera */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,68,0,1)), color-stop(100, rgba(51,221,221,1)));/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* Webkit (Chrome 11+) */ 
	background-image: linear-gradient(to bottom, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* W3C Markup */ 
	border: 1px solid #009;
	margin: 5px 0px;
	padding: 0px;
}

.sectionHeader h1 {
	margin: 10px;
	color: white;
}

.noImageBorder img {
	border: none;
}

.contentFullWidth {
	position: relative;
	width: 100%;
	margin: 5px 0px;
	padding: 0px 10px;
	font-size: 1.2em;
}

.contentLeft {
	position: relative;
	width: 50%;
	margin: 5px 0px;
	padding: 0px 10px;
	font-size: 1.2em;
}

.pullRight {
	position: absolute;
	display: block;
	left: 105%;
	border:1px solid #000;
	border-radius: 8px;
	padding-bottom: 5px;
	background-color: #f6f6f6;
	text-align: center;
}

.pullRight img {
	display:block;
	border:1px solid #000;
	border-radius: 8px;
}

.blueHook {
	border:1px solid black;
	background-color: #f6f6f6;
	padding: 10px;
}

.quote, .note {
	margin: 10px 20px;
	border-left: 1px solid #009;
	border-right: 1px solid #009;
	padding: 10px;
	font-family: AlegreyaItalic, sans-serif;
	font-size: 1em;
	letter-spacing: .02em
}

.faqList {
	font-weight: bold;
	margin: 0px 40px;
}
		
.faqQuestion {
	margin: 15px 0 5px 0;
	font-family: CaviarDreams, Arial, sans-serif;
	font-weight: bold;
}
		
.faqAnswer {
	font-weight: normal;
	margin-left:40px;
}

.testimonial, .songList {
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 30px;
	padding-bottom: 10px;
	font-family: AlegreyaItalic, sans-serif;
	font-size: 1em;
	letter-spacing: .02em;
}

.testimonialHeader, .songListHeader {
	margin-bottom: 0px;
	padding: 10px;
	color: #009;
	font-weight: bold;
}

.songListHeader {
	margin-bottom: 0px;
	padding: 10px;
	text-align: center;
	color: #009;
	font-family: CaviarDreams, Arial, sans-serif;
	font-size: 1.25em;
	line-height: 1.25em;
	font-weight: bold;
}

.testimonialContent, .songListContent {
	background-color: rgb(246,246,246);
	border-left: 1px solid #009;
	border-right: 1px solid #009;
	border: 1px solid #009;
	margin-left: 10px;
	margin-right: 10px;
	padding: 10px;
}

.songListContent {
	text-align: center;
}

.testimonialAnswer {
	border-left: 1px solid #009;
	border-right: 1px solid #009;
	margin:10px 20px;
	padding-left: 10px;
	padding-right: 10px;
	color: #009;
}

/* Summary Table Styles */
table.summary {
	border: 2px solid #000;
	margin-left:auto;
	margin-right: auto;
	border-collapse: collapse;
	width: 100%;
}
		
table.summary td {
	border: 1px solid #000; 
	text-align: center;
	vertical-align: middle;
	font-size: .75em;
	padding: 0px;
	margin: 0px;
}
		
td.gitBarre {
	background-color: #ffe;
	font-weight: bold;
}
		
table.summary td.grey {
	background-color: #eee;
	font-weight: bold;
}

/* Online ordering styles */
.orderSection {
	border: 1px solid #009;
	margin: 5px 0px;
	padding: 5px;
	background-color: rgb(0,221,0);/* for browsers that don't support gradients */
	background-image: -ms-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* IE10+ */ 
	background-image: -moz-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* Mozilla Firefox */ 
	background-image: -o-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* Opera */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,68,0,1)), color-stop(100, rgba(51,221,221,1)));/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-linear-gradient(top, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* Webkit (Chrome 11+) */ 
	background-image: linear-gradient(to bottom, rgba(0,68,0,1) 0%, rgba(51,221,221,1) 100%);/* W3C Markup */ 
	font-family: CaviarDreams, Arial, sans-serif;
	color: white;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
}

.orderItem {
	border-bottom:1px solid #009;
	padding: 10px 0px;
}

.orderItemDescription {
	position: relative;
	float: left;
	width: 50%;
	padding: 0px 10px;
	font-size: 1.2em;
}

.orderItemImage {
	position: relative;
	float: left;
}

.orderItemImage img {
	border:1px solid #000;
	margin-left: 10px;
}

.orderItemPayPalButton {
	
}