/* *****^^^^^ STYLES FOR THE SHAMANS WAY^^^^^***** */
/* *****^^^^^ APRIL 2016 ^^^^^***** */

* { margin: 0 0; }
body, label, input, textarea{ font-family: Tahoma, Verdana, Segoe, sans-serif; }

/* *****^^^^^ COLOUR ^^^^^***** */
/* 
*  rumi blue=>  2e477f 
*  shaman red=> ab2a45 
*/
h1, h2, h3, label, td { color: #2e477f;}
p, li, .event td { color: #404040;}
.event td:first-child{color:#2e477f;}
nav li a { color: white;} 
p a, .more, td a, .name { color: #ab2a45;}
a:hover {opacity: .7;}
input, textarea { color: #505050;}
footer { color: #808080;} 
input[type=submit], .bigButton { color: white; background-color: #ab2a45;}

/* *****^^^^^ BASIC ELEMENTS ^^^^^***** */
p, li, .event td {font-size: 1.25em; }
p { margin: 0 0 .75em 0;line-height: 150%; text-align: justify;}
p a, a {text-decoration: none;}
img { display: block; margin: 0 auto; border-radius: 6px 6px;}
li {line-height: 1.7em;}
label { font-size: .9em;}
input, textarea {font-size: 1.15em;}
hr {width:50%;margin: 2.5em auto; border: 0; height: 2px; background: #808080;}

/* *****^^^^^ HEADINGS ^^^^^***** */
h1 { font-size: 4em; }
h2 { font-size: 2em;}
h3 { font-size: 1.5em; margin-bottom:1em;}
.faq h3, #payment h2, .events h2 { margin-bottom: .5em;}
.inPageForm h2 { margin-top: 1em;}
.columbaTable h2 { clear: right; margin-bottom: 1em;}
#forumRight h2 {text-align: center; margin-bottom: 1em;}
#forumLeft h3,  .columba h3{ margin: 1em 0;}
.shareConfirm h2, .shareConfirm h3 { margin-top: 2em;}
.shareConfirm h3 { margin-bottom: 1em;}
.event h2 {padding-bottom:1em;}

/* *****^^^^^ IMAGES ^^^^^***** */
#menuImg { float: left; margin-left: 2em;}
#smudge { width: 100%; height: auto; border-radius: 0 0;}
#drum { padding: 1em 0;}
.content img { max-width: 100%; height: auto;}
.rightImg {float:right; margin: .5em 0 .5em 1em; }
.leftImg {float:left; margin: .5em 1em .5em 0; }
.content .rightImg { max-width: 400px;}
#geoff, #labyrinth { max-width: 300px;}

/* *****^^^^^ HEADER ^^^^^***** */
header { margin: auto auto; padding: 0 0 2em 0;}

/* *****^^^^^ FOOTER ^^^^^***** */
footer { font-size: .6em; margin: 6em 0;}
footer p { text-align: center;}

/* *****^^^^^ NAVBAR ^^^^^***** */
.menu { float: left; position: absolute; cursor:pointer;} /* changes when 1024+ */
/* Inline menu */
#nav1 li {display:inline-block; width:170px; font-size: 2em;font-weight:bold;}
#nav1 { margin-left:auto; margin-right:auto; width:900px;margin:auto auto; color: white;}
#nav1 li a {color:white;}
/* Dropdown menu */
#nav2  { background: #ab2a45; width: 80%; clear: left; border-radius: 0 12px 12px 0;  padding: 1em 0 2em 0; text-align: center;}
#nav2 li { list-style-type: none; padding: 6px 6px; font-size: 1.5em; }
#nav2 li a { text-decoration: none; display: block; width: 100%;	height: 100%; color:white;}

/* *****^^^^^ DIVS ^^^^^***** */
.content { width: 80%; margin: auto auto;}
.healingList  { width: 85%; margin: auto auto;}  /* list of ailments*/
.healingList li { list-style-type: none; text-align: center;}
.details { margin:1em 0 0 0;}
#details1 p:first-child{ text-align: center;}
.faq p { margin-bottom: 1.25em;}
#testimonials { max-width: 80%;}
.roboCheck {  }

/* *****^^^^^ FORMS ^^^^^***** */
.standardForm { display:inline-block; margin-top: 1em; width: 500px;padding: 1em 0;}
.standardForm input {padding:8px;display:inline-block; margin-bottom:1em;border:none;border-bottom:1px solid #808080;/* font-size: 15px; */}
.standardForm input[type=text],.standardForm input[type=email],.standardForm textarea {width: 100%;}
.standardForm textarea { box-sizing: content-box; width: 103%;}
.standardForm p {font-size: 15px;}
.roboCheck label { font-weight: bold;}
.roboCheck input {max-width: 80px; border: solid 1px #2e477f;}


/* *****^^^^^ TABLES ^^^^^***** */
.standardTable table { font-size: 1.5em; white-space: nowrap;}
.standardTable td  a { text-decoration: none; }
.contactTable td { padding: 8px 0; display: inline-block; min-width: 7em;}
.columbaTable table{ margin-bottom: 1em;}
.eventsTable a {text-decoration: underline;}
.eventsTable td {padding-bottom:1em;}
/* *****^^^^^ SPECIFIC ELEMENTS ^^^^^***** */
.more { text-align: left; cursor: pointer; clear: both; padding-top: 30px; font-size: 1.5em;}
.heading { margin-bottom: .5em;}
.listGeneral { margin-bottom: 1em;}
.healingList, .healingList li{ color: #404040; text-align: center;}
.topHeading { margin-top: 1em; }
.map { margin: .5em auto .5em auto; text-align: center; }
.map iframe {max-width: 100%;}
.eventList {margin-bottom: 2em;}
.eventList h3 {margin-top: 1em;}
.eventList h3:nth-child(2), .eventList h3:nth-child(3){margin-left:2em;}
#paymentMore {cursor: pointer;}
.payMore {padding-bottom: 1.5em;}
#timeThwart, #phpThwart {display: none;}
/* *****^^^^^ BUTTONS / SUBMIT BUTTONS ^^^^^***** */
input[type=submit], .bigButton { border-radius: 8px;  border:none;}
input[type=submit] { cursor: pointer;  font-size: 1.75em; padding: 12px 18px; margin: 1em 0; -webkit-appearance: none; float: right;}
.bigButton {padding: .75em 1.25em; font-size: 1.75em; min-width: 170px;}
.forumButton {margin: -3em 0 3em 0; text-align: center;}
.shareConfirm .bigButton { margin: 1.5em 1em 0 0;}
.linkButton { margin: 2em 0; cursor: pointer;}
.testimonialButton { margin-top: 3em;}

/* *****^^^^^ FORUM ^^^^^***** */
/* these styles are separated as this is a 2 column format and quite different from other pages */
#forum { width: 110%;}
#forumRight { float: right; max-width: 33%; min-width: 400px; margin: 0 0 50px 30px;}
#forumRight td { padding-bottom: .5em;}
#forumLeft { max-width: 60%;}
#forumLeft p { font-size: 1em;}
#forumLeft p:first-child { margin-bottom: 1.5em;}

/* *****^^^^^ MEDIA ^^^^^***** */
@media screen and (min-width: 1025px) {
	#nav2, #menuImg {display:none;}
	#nav1 { margin-left:auto; margin-right:auto; padding-top: .75em;width:875px;margin:auto auto; color: white;}
	.menu {float: none; position:relative; height:5em; border-top:white 2px solid; /*background-color: #ab2a45;*/}
	#nav1 li a {color:#ab2a45;}
	#nav1 li a:visited {color: #ab2a45;}
	.topHeading {margin-top: 0px;}
	.more {display:none;}
	.standardForm textarea {width: 120%;}
}
@media screen and (max-width: 1024px) {
	#nav1 {display:none;}
	.content {width: 95%;}
	h1 { text-align: center;}
	.content img{ width: 80%; height: 80%;}
	.content #payPalGif {width:1px;height:1px;}
	.standardForm { min-width: 50%;}
	.inPageForm {padding:0 15px;}
	.forumButton {margin: 1em 0 3em 0;}
	.shareConfirm .bigButton { margin-left: 1.5em;}
	#forum { width: initial;}
	#testimonials { max-width: 90%; margin: auto auto;}
	.content .event .verticalImg {max-width: 30%;}
	.event table {clear: right;}
	.standardForm textarea {width: 140%;}
}
@media screen and (max-width: 768px) {
	#forumRight { float: none;}
	#forumRight h2 {text-align: left;}
	#forum { width: 100%;}
	#forumLeft { max-width: 100%;}	
	#indexMore { color: #ab2a45; cursor: pointer;}
	.forumButton {text-align: right; margin:1em 0 0 0;}
	#testimonials { max-width: initial; }
	.standardForm textarea {width: 100%;}
	#contactImg {display:none;}
}

@media screen and (max-width: 720px) {
	.content {width: 90%;}
	#menuImg{ width: 60%; height: 60%; margin-left: .3em;}
	.content img { width: 90%; height: 90%;}
	h1 {font-size: 3em;}
	h1, h2 { text-align: center;}
	.standardForm textarea { width: 95%; margin: 1em auto;}
	.menu {margin-left: 0; cursor:pointer;}
	.standardForm { max-width: 90%; }	
	.rightImg {float: none; margin: 1em auto;}
	.standardTable table{white-space: normal;  max-width: 100%;}
	.standardTable td { vertical-align: top;}
	.forumButton {text-align: center; margin:2em 0 2em 0;}
	.event table {margin: 1em auto 1em auto;}
	.event td {display: block; text-align: center; font-size:1.5em;}
	.event td:first-child { padding-top: 1em;}
	.content .event .verticalImg {max-width: 50%;}
}
@media screen and (max-width: 480px) {
	nav ul {width: 70%; padding-left: .4em;}
	.menu li {font-size: 1em; white-space: nowrap;}
	h1 {font-size: 2.3em;}
	.contactTable { font-size: 1.1em;}
	.events h2 { text-align: center;}
	.faq h3 { margin-bottom: 1em;}
	.standardTable table {font-size: 1.25em;}
	.standardForm { max-width: 100%;}
	#testimonials p {font-size: 1em;}
}
@media screen and (max-width: 320px) {
	#forumRight {min-width: 290px; }
	#forumRight table {max-width: 315px; margin-left: 0; margin-right: 0;}
	#forumRight td{ font-size: 1em;}
	#forumRight {margin: 0 0 2em 0;}
	#forumLeft h3 { text-align: center;}
	.contactTable td { min-width: 5em; font-size: .9em; }
	.content .event .verticalImg {max-width: 75%;}
}