body {
	background: #EEE;
	margin: 1em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
	font: 1em verdana;

}

.column {
	float: left;
}

.sidebar {
	width:25%;
}

.sidebar-content {
	width:75%;
}

.paymentmenu {
	width:30%;
}

.paymentoptions {
	width:50%;
}

.row:after {
	content: "";
	display: table;
	clear:both;
}

#container {
	width: 95%;
	margin: 5px auto;
	font: lighter 14px/22px Verdana;
	background-color: #EEE;
	color: #333;
	border: 1px solid gray;
	line-height: 130%;
}

#content-main {
	margin-left: 0%;
	margin-right: 0%;
	background: #def;
	padding: 1em;
	font: 16px verdana;
}

#content-main h2 {
 	color: #FF6F00;
	margin: 0em;
	font: 20px verdana;
	font-weight:bold;
	text-shadow: #000000 1px -1px 0px;
 }

#content-main h3 {
 	color: #000;
	margin: 0em;
	font: 18px verdana;
	font-weight:bold;
 }
 
#content-left, #content-right {
  display: table-cell;
}

#content-left {
  width: 20%;
  background: #EEE;
  border: 3px solid #FF6F00;
}

#content-right {
  background: #EEE;
  border: 5px solid #EEE;
}

.leftnav {
	float: left;
	width: 30%;
	margin: 0;
	font: lighter 14px/22px Verdana;
	padding: 1em;
	background: #EEE;
}

.rightnav {
	float: right;
	width: 70%;
	margin: 0;
	font: lighter 14px/22px Verdana;
	padding: 1em;
	background: #EEE;
}

.leftnav p, .rightnav p { margin: 0 0 1em 0; }

.leftnav h2 {
 	color: #FF6F00;
	margin: 0em;
	font: 20px verdana;
	font-weight:bold;
	text-shadow: #000000 1px -1px 0px;
 }

#top {
	padding: .5em;
	background: #DDD;
	border-bottom: 1px solid gray;
	text-align:center;
 }

#top h1 {
	padding: 0;
	margin: 0;
	color: #FF6F00;
	margin: 15px;
	font: 32px verdana;
	text-align:center;
	font-style:italic;
	font-weight:bold;
	text-shadow: #000000 3px -3px 0px;
}

#top h2 {
	padding: 0;
	margin: 0;
	color: #FF6F00;
	margin: 15px;
	font: 18px verdana;
	text-align:center;
	font-style:italic;
	font-weight:bold;
	text-shadow: #000000 2px -2px 0px;
}

#top p {
	text-indent: 20px;
	color: #000;
	margin: 20px;
	font: lighter 14px/22px Verdana;
	font-weight:bold;
	text-align:center;
}

div.transbox {
  margin: 0px;
  background-color: #ffffff;
  border:none;
  opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}

div.transbox p {
  margin: 1%;
  text-indent: 0px;
  font-weight: normal;
  color: #000000;
}

#content {
	margin-left: 0px;
	margin-right: 0px;
	font: lighter 14px/22px Verdana;
	background: #DEF;
	padding: 1em;
}

div.background {
	margin-left: 2%;
	margin-right: 2%;
	background: url(images/counsellingroom.jpg);
	border:none;
	background-size:100% 100%;
}
 

#images {
	margin: 0;
	padding: 0;
	list-style: none;
}

#images li {
   float: left;
   width: 20%;
   margin: 0;
   padding: 0;
   text-align: center;
}
#images li img {
   border: none;
}

img.left {
    display: block;
    margin-left: 10em;
 }

img.right {
    display: block;
    margin-right: 10em }
	
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto }

.alignleft {
	float: left;
}
.alignright {
	float: right;
}

ul.nobullet {
	list-style-type: none;
	padding: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
}

li.spacing {
    margin-bottom: 15px;
}

#footer
 {
 clear: both;
 margin: 0;
 padding: .5em;
 color: #333;
 background-color: #ddd;
 border-top: 1px solid gray;
 }

 #footer p {
	margin: 0 0 1em 0;
	color: #888;
}

#footer ul {
	list-style: none;
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-align: center;
	background: #ddd;
}

#footer li {
	display: inline;
	text-align: center;
	background: #ddd;
	margin: 1px;
	padding: 1px;
}

table.contact-table
{
font-family:Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
width:50%;
border-collapse:collapse;
margin-left:auto; 
margin-right:auto;
}

table.contact-table td, table.contact-table th 
{
font-size:1em;
border:0px solid #98bf21;
padding:3px 7px 2px 7px;
}

table.contact-table th 
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
table.contact-table tr.alt td 
{
color:#000000;
background-color:#FFAF66;
}

#orders-table
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:50%;
margin-left:auto; 
margin-right:auto;
}
#orders-table td, #orders-table th 
{
font-size:1em;
border:0px solid #000;
padding:3px 7px 2px 7px;
}

#orders-table th 
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}

#orders-table tr.alt td 
{
color:#000000;
background-color:#DEF;
}

#scroller
{
	font: 20px verdana;
	font-style:italic;
	font-weight:bold;
	color: blue;
}

.order-button {
  background-color: #FF9933;
  border: none;
  color: black;
  padding: 4px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
  width: 250px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #FF9933;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

.my-sidebar{height:100%;width:150px;background-color:#eee;position:fixed!important;z-index:1;overflow:auto}

@media (min-width:993px){.my-modal-content{width:900px}.my-hide-large{display:none!important}.my-sidebar.my-collapse{display:block!important}}

@media (max-width:992px){.my-sidebar.my-collapse{display:none}.my-main{margin-left:0!important;margin-right:0!important}.my-auto{max-width:100%}}

.my-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}

.my-teal,.my-hover-teal:hover{color:#000!important;background-color:#EEE!important}
.my-main,#main{transition:margin-left .4s}

.my-bar .my-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.my-bar .my-button{white-space:normal}
.my-large{font-size:18px!important}