/**
 * Main css file for the website
 * File: /assets/css/main<-vx.x>.css
 *
 * @author     Dridhamati
 * @copyright  (c) 2019 Open Dhamma Inc.
**/

body {
  padding: 0;
  margin: 0 auto;
  font-family: arial, verdana, sans-serif;
  font-size: 14px;
  background-color:#fff;
  color: #1100b0;
}

/* div {border:1px solid red;} */

.go-top {display:none;}

#mainWrapper, #mainWrapperPage {
  width:100%;
  padding: 0;
  margin: 0;
}

a, img {border:none;}
a:link    {text-decoration:underline;}
a:visited {text-decoration:underline;}
a:hover   {text-decoration:none;}
a:active  {text-decoration:none;}

.theBg {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  z-index: 0;
}
/*
.pageHeader {
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
*/
#mainHeader {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
          flex-flow: row wrap;
}
#mainHeader {
  position: fixed;
  max-height:80px;
  padding: 10px 0 10px 0;
  background: rgba(255, 255, 255, 0.7);
  top: 0px;
  left: 0px;
  z-index: 1;
}
#mainHeader-col1 {
  padding-left: 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-flex: 0; /* Safari 6.1+ */
  -webkit-box-flex: 0; /* iOS4 */
  -ms-flex: 0; /* IE 10 */
  flex: 0 0 auto;
}
#mainHeader-col3 {
  -webkit-flex: 1; /* Safari 6.1+ */
  -webkit-box-flex: 1; /* iOS4 */
  -ms-flex: 1; /* IE 10 */
  flex: 1 1 auto;
}

#noPicFiller {height:92px;}

#mainContent {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
          flex-flow: row wrap;
}
.mainContent-leftCol {
  padding: 10px 10px 30px 10px;
  background: #fff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(top, #a8dcfd, #fff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top, #a8dcfd, #fff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top, #a8dcfd, #fff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(top, #a8dcfd, #fff); /* Standard syntax */
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}
#mainContent-col1 {
  max-width: 320px;
  -webkit-flex: 0; /* Safari 6.1+ */
  -webkit-box-flex: 0; /* iOS4 */
  -ms-flex: 0; /* IE 10 */
  flex: 0 0 auto;
}
#mainContent-col2 {
  padding-left: 20px;
  padding-right: 20px;
  min-width:120px;
  -webkit-flex: 1; /* Safari 6.1+ */
  -webkit-box-flex: 1; /* iOS4 */
  -ms-flex: 1; /* IE 10 */
  flex: 1 1;
}
#mainContent-col2 img {padding:5px 0 0 0;margin:0 20px 0 0;}

#mainHeader-col1-col1 {padding-right:10px;}
#mainHeader-col1-col2 p {margin:0;line-height:1.25em;font-weight:bold;color:#4080ff;}
#mainHeader-col1-col3 p {margin:0;line-height:1.5em;font-weight:bold;color:#4080ff;}
#mainHeader-col1-col2 a {text-decoration:underline;color:#4080ff;}
#mainHeader-col1-col3 a {text-decoration:underline;color:#4080ff;}

#mainHeader-col1-col2, #mainHeader-col2, #mainHeader-col4, #home-test {display:none;}

#bookDiv {
  width: 100%;
  height:100px;
  z-index:1;
}
#bookDiv, #bookDiv-col2 {
  display: -webkit-flex;
  display: flex;
}
#bookDiv-col1 {
  -webkit-flex: 1; /* Safari 6.1+ */
  -webkit-box-flex: 1; /* iOS4 */
  -ms-flex: 1; /* IE 10 */
  flex: 1 1 auto;
}
#bookDiv-col2 {
  -webkit-flex: 0; /* Safari 6.1+ */
  -webkit-box-flex: 0; /* iOS4 */
  -ms-flex: 0; /* IE 10 */
  flex: 0 0 auto;
}
#bookDiv a, img {border:none;}
#bookDiv a {text-decoration:underline; color: #1100b0;}
#bookDiv-col1 {padding:20px;}
#bookDiv-col2 {
  color:#fff;
}
#bookDiv-col2-bg {
  margin:15px 10px 10px 10px;
  background-color:#1b95e0;
  border:1px solid #1b95e0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; /* future proofing */
  -khtml-border-radius: 5px; /* for old Konqueror browsers */
  opacity: 0.7;
}
#bookDiv-col2 p {margin:10px;text-align:right;font-size:1.25em;}

#socialNet {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
          flex-flow: row wrap;
}
#socialNet {
  width: 100%;
  position: fixed;
  padding: 10px 0 5px 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index:1;
}
#socialNet-col1 {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-flex: 1; /* Safari 6.1+ */
  -webkit-box-flex: 1; /* iOS4 */
  -ms-flex: 1; /* IE 10 */
  flex: 1 1 auto;
  justify-content:center;
}
#socialNetPage {
  padding:10px 0 5px 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
          flex-flow: row wrap;
  justify-content:center;
}
#socialNet-col2 {
  -webkit-flex: 1; /* Safari 6.1+ */
  -webkit-box-flex: 1; /* iOS4 */
  -ms-flex: 1; /* IE 10 */
  flex: 1 1 auto;
}
.socialNetDiv {
  -webkit-flex: 0; /* Safari 6.1+ */
  -webkit-box-flex: 0; /* iOS4 */
  -ms-flex: 0; /* IE 10 */
  flex: 0 0 auto;
}
#socialNet-col2 p {text-align:center;}
#socialNet-col2 a {text-decoration:underline;color:#4080ff;}

#myPhone, #phoneDialog {display:block;}
#phoneDialog p {text-align:center; margin:30px; font-size:1.25em;}

.phoneMe {#footer {justify-content: space-between; padding:0 5px 0 5px;}
#footerCol1 {min-width:50%;}
#footerCol2, #footerCol3 {text-align:right;}
#footerCol2 {display:block;}
#footerCol3 {display:none;}
/*
#footerCol2 {display:none;}
#footerCol3 {display:block;}
* */
#footer p {margin:10px 0 10px 0; font-size:.8em; line-height:2.8em;}

  display: block;
  position: fixed;
  bottom: 120px;
  left: 20px;
}

#coaDiv, #mikeDiv, #mikeDivPage {
  position: fixed;
  z-index:1;
}
#coaDiv {
  top: 80px;
  left: 20px;
  max-width: 170px;
}
#mikeDivPage {
  top: 100px;
  right: 20px;
}
#mikeDiv, #mikeDivPage {
  max-width: 170px;
}
@media only screen and (min-device-width : 300px) and (max-device-width : 570px) and (orientation : portrait) {
  #bookDiv {position: fixed; bottom: 120px;}
  #mikeDiv {bottom: 200px; right: 20px;}
  #idAcupuncture {height:320px; background-image: url(../uploads/images/acupuncture_header0.jpg);}
  #idNaturopathy {height:320px; background-image: url(../uploads/images/naturopathy_header0.jpg);}
  #idOsteopathy {height:320px; background-image: url(../uploads/images/osteopathy_header0.jpg);}
  #idPainManagement {height:320px; background-image: url(../uploads/images/painManagement_header0.jpg);}
  #idSelfcare {height:320px; background-image: url(../uploads/images/selfcare_header0.jpg);}
}
@media only screen and (min-device-width : 300px) and (max-device-width : 570px) and (orientation : landscape) {
  #bookDiv {position: fixed; bottom: 60px;}
  #mikeDiv {bottom: 140px; right: 20px;}
  #idAcupuncture {height:320px; background-image: url(../uploads/images/acupuncture_header0.jpg);}
  #idNaturopathy {height:320px; background-image: url(../uploads/images/naturopathy_header0.jpg);}
  #idOsteopathy {height:320px; background-image: url(../uploads/images/osteopathy_header0.jpg);}
  #idPainManagement {height:320px; background-image: url(../uploads/images/painManagement_header0.jpg);}
  #idSelfcare {height:320px; background-image: url(../uploads/images/selfcare_header0.jpg);}
}
@media only screen and (min-device-width : 570px) and (orientation : portrait) {
  #bookDiv {position: fixed; bottom: 60px;}
  #mikeDiv {bottom: 140px; right: 20px;}
  #idAcupuncture {height:800px; background-image: url(../uploads/images/acupuncture_header.jpg);}
  #idNaturopathy {height:800px; background-image: url(../uploads/images/naturopathy_header.jpg);}
  #idOsteopathy {height:800px; background-image: url(../uploads/images/osteopathy_header.jpg);}
  #idPainManagement {height:800px; background-image: url(../uploads/images/painManagement_header.jpg);}
  #idSelfcare {height:800px; background-image: url(../uploads/images/selfcare_header.jpg);}
}
@media only screen and (min-device-width : 570px) and (max-device-width : 700px) and (orientation : landscape) {
  #bookDiv {position: fixed; bottom: 60px;}
  #mikeDiv {bottom: 140px; right: 20px;}
  #idAcupuncture {height:320px; background-image: url(../uploads/images/acupuncture_header0.jpg);}
  #idNaturopathy {height:320px; background-image: url(../uploads/images/naturopathy_header0.jpg);}
  #idOsteopathy {height:320px; background-image: url(../uploads/images/osteopathy_header0.jpg);}
  #idPainManagement {height:320px; background-image: url(../uploads/images/painManagement_header0.jpg);}
  #idSelfcare {height:320px; background-image: url(../uploads/images/selfcare_header0.jpg);}
}
@media only screen and (min-device-width : 701px) {
  #bookDiv {position: fixed; bottom: 60px;}
  #mikeDiv {bottom: 140px; right: 20px;}
  #idAcupuncture {height:800px; background-image: url(../uploads/images/acupuncture_header.jpg);}
  #idNaturopathy {height:800px; background-image: url(../uploads/images/naturopathy_header.jpg);}
  #idOsteopathy {height:800px; background-image: url(../uploads/images/osteopathy_header.jpg);}
  #idPainManagement {height:800px; background-image: url(../uploads/images/painManagement_header.jpg);}
  #idSelfcare {height:800px; background-image: url(../uploads/images/selfcare_header.jpg);}
}
#coaDiv p {line-height:1.5em;font-size:1.25em;color:#fff;}
#mikeDiv, #mikeDivPage p {line-height:1.5em;text-align:right;font-size:1.25em;color:#fff;}

#mainHeader ol, ul {
  padding: 0;
  margin: 0;
  list-style:none;
}

.go-top {
  display: block;
  width: 40px;
  height: 40px;
/*
  line-height: 35px;
  text-align: center;
  font-size: 30px;
  text-decoration: none;
*/
  position: fixed;
  bottom: -40px;
  right: 20px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  background-color: #404040;
  opacity: 0.5;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.go-top.show {bottom:20px;}
.go-top:hover {background-color:#0000ff; color:#FFFFFF;}

#chapterMenu {padding-top:10px;}
#chapterMenu h3 {margin-top:10px;}
#chapterMenu p {margin:0 10px 10px 10px;}
#chapterMenu a {text-decoration:underline;}

#mainContent-col1-book p {margin:10px;text-align:center;font-size:2em;}
#mainContent-col1-book a {text-decoration:underline; color: #1100b0;}
#mainContent-col2 p {line-height:1.35em;}
#mainContent-col2 ul {line-height:1.35em; margin-left:30px; list-style-type: disc;}
#mainContent-col2 ol {line-height:1.35em; margin-left:30px;}

#footer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
          flex-flow: row wrap;
}
#footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  justify-content: space-between;
  padding:0 10px 0 10px;
  background-color: #fff;
  opacity:.8;
  z-index: 100;
}
#footer p {font-weight:bold; font-size:.8em; line-height:2.8em;}
#footerCol1 {min-width:50%;}
#footerCol2, #footerCol3 p {margin-right:20px; text-align:right;}
#footerCol2 {display:block;}
#footerCol3 {display:none;}

/*
a:link    {text-decoration:underline; color: #214d1e;}
a:visited {text-decoration:underline; color: #214d1e;}
a:hover   {text-decoration:none; color: #567654;}
a:active  {text-decoration:underline; color: #214d1e;}

/* end */