body { margin: 0 auto; 	background-color: #fff !important; 	FONT-FAMILY: 'Open Sans', sans-serif ; }
H1 {
	COLOR: #000000; FONT-FAMILY: 'Open Sans', sans-serif !important;
	  FONT-SIZE: 22px !important; FONT-WEIGHT: bold
}
H1 span {
	FONT-WEIGHT: normal;
}
H2 {
	FONT-FAMILY: 'Open Sans', sans-serif !important;  FONT-SIZE: 18px  !important; FONT-WEIGHT: bold
}

H2.headerh2{
padding-left:50px;
FONT-SIZE: 20px !important;
color:#000;
}


H3 {
	FONT-FAMILY: 'Open Sans', sans-serif !important;  FONT-SIZE: 15px; FONT-WEIGHT: bold
}
P,TD {
	COLOR: #666666; FONT-FAMILY: 'Open Sans',  sans-serif !important;  FONT-SIZE: 14px !important;
}
A {
	COLOR: #3973D5; FONT-FAMILY: 'Open Sans',  sans-serif !important;  FONT-SIZE: 14px 14px !important; text-decoration: none; font-weight: bold;
}
A:hover {
	COLOR: #333; FONT-FAMILY: 'Open Sans',  sans-serif !important;  FONT-SIZE: 14px 14px !important; text-decoration: underline; font-weight: bold;
}
UL {
	COLOR: #666666; FONT-FAMILY: 'Open Sans',  sans-serif !important;  FONT-SIZE: 14px !important;
}
.break {
	PAGE-BREAK-AFTER: always
}
.comments {
	COLOR: #CC0000; 
	FONT-FAMILY: "Courier New", Courier, mono; 
	FONT-SIZE:  14px !important;

}

.comments a{
	 text-decoration: underline !important; 
	 COLOR: #CC0000; FONT-FAMILY: "Courier New", Courier, mono !important; 
	 FONT-SIZE:  14px !important;
	 font-weight:normal !important;
}



.whitetitle {
	COLOR: #ffffff; TEXT-DECORATION: none; FONT-FAMILY: 'Open Sans',  sans-serif !important;  FONT-SIZE: 14px
}
A.menutext {
	COLOR: #ffffff; TEXT-DECORATION: none; FONT-FAMILY: 'Open Sans',  sans-serif !important;  FONT-SIZE: 14px
}
A.menutext:hover {
	COLOR: #f2b90b; TEXT-DECORATION: none; FONT-FAMILY: Verdana; FONT-SIZE: 14px
}
.button {
	font-size: 14px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	/*width: 70px;*/
}
.strikethru {
	text-decoration: line-through;
}

.arrow-down {
  width: 20px;
  height: 10px;
  background: none;
  position: relative;
  display:block;float:right;
  margin-left:10px;
}

.arrow-down.active {
  background: none;
}

.arrow-down:before, .arrow-down:after {
  content: "";
  display: block;
  width: 11px;
  height: 2px;
  background: #3973D5;
  position: absolute;
  top: 8px;
  transition: transform .5s;
}

.arrow-down:before {
  right: 16px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transform: rotate(45deg);
}

.arrow-down:after {
  right: 10px;
  transform: rotate(-45deg);
}

.arrow-down.active:before {
  transform: rotate(-45deg);
}

.arrow-down.active:after {
  transform: rotate(45deg);
}






textarea.formtextarea{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		min-width:243px;
		}


hr.dotted{	border-top: 1px dotted #CCCCCC;
	margin-top: 20px;
	color: #FFFFFF;
}


.hidden
{
	display:none;
}
.tabletitle {
	background-color: #666666;
	color: #FFFFFF;
}

.warning {
	color: #CC0000;
}
p.warning {
	color: #CC0000;
	font-weight: bold;
}
.warning a:link, .warning a:visited {
	color: #CC0000;
	text-decoration: underline;
}
.warning a:hover, .warning a:active {
	color: #CC0000;
	text-decoration: none;
}
span.hint {
	color: #999999;
}

span.assignedto {
	color: #999999;
	float: right;
}
span.updatedby {
	color: #999999;
}


#wrapper {
	width: 100%;
	background-color: #fff !important;
	height:100%;
	}



p.messagewarning{
display:block;
width:100%;
text-align:center;
padding:5px;
border:solid red 2px;
background:#fadbe0;
}
#messagewrapper{
margin-top:50px;
}


.ui-widget-header {
 border:none !important;
	border-bottom:1px solid #c5c5c5 !important;
 font-size:14px;color:red;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */

  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
    max-width:600px;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


input.button {
  background-color: #117995;
  color: white;
  border:solid 2px  #117995;
  cursor:pointer;
}

#sendmessage {
border: solid #117995 1px;
padding:10px;
margin-bottom:20px;
}

#sendmessage input.button {
 background-color: #117995;
  color: #fff !important;
  padding:5px;
  font-size:14px;
  font-weight:bold;
  border: #117995 solid 2px;
}


#sendmessage select{
border: solid #dbdbdb 1px;
padding:5px;
width:100%;
}

#sendmessage textarea{
border: solid #dbdbdb 1px;
height:200px;
width:calc(100% - 20px);
padding:5px;
}

#sendmessage input[type=text] {
border: solid #dbdbdb 1px;
padding:5px;
width:calc(100% - 20px);
}

#sendmessage label span {
width:180px;
display:inline-block;
}
#sendmessage label span#touser {
width:200px;
display:inline-block;
}


.aligncenter{
text-align:center;
}



/**********************************

Name: cmxform Styles

***********************************/
.hidebig{display:none};


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */

  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
    max-width:600px;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#sendmessagebutton{
	width:150px;
	float:right;
}

a.button {
  background-color: #117995;
  color: #fff !important;
  padding:5px;
}

.error{
color:red;
}



label.error{
display:inline-block;
margin-left:10px;
}




#sendmessage{
	display: none;
}



table.messages { 
width:100% !important;
border-collapse:collapse !important;
}


table.messages td, table.messages th{ 
border: solid 1px #dbdbdb;
padding:5px;
vertical-align:top;
font-size:14px !important;
}
table.messages th{ 
font-weight:bold;
background: #dbdbdb;
}

table.messages tr.row:hover { 
background: #117995 !important;
color: #fff !important;
}

table.messages tr.row:hover a{ 
color:#fff !important;
}

table.messages tr.row:hover span{ 
color:#fff !important;
}

div.error { display: none; }



#headertext{
font-size:18px; 
margin-bottom:0px; 
margin-top:10px; 
margin-left:20px; 
color:#ffffff;
display:inline-block;
}



#myTopnav{
  overflow: hidden;
    background-color: #000);
  padding-left:0px;
}
.topnav {
  overflow: hidden;
  background-color: #fff;
  padding-left:10px;
}

.topnav a {
  display: block;
  color: #3973D5;
  text-align: center;
  padding: 15px 16px 15px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-top:1px;
}

#leftnav.topnav {
  overflow: hidden;
  background-color: #fff;
  padding-left:10px;
  margin-top:20px;
}

#leftnav.topnav a {
  display: block;
  color: #3973D5;
  text-align: left;
  padding: 0px 0px 0px 0px !important;
  width:100%;
  text-decoration: none;
  font-size: 14px;
  margin-bottom:10px;
}



.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #117995;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 850px) {
  #leftnav.topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    color:#fff;
  }
}

@media screen and (max-width: 850px) {


.topnav a.icon {
  padding: 6px 6px 6px 6px;

}

		#logo img{width:150px; }

	#headertext{
		font-size:18px !important; 
		margin-top:0px; 
		padding:0px;
	}



		table.messages td, table.messages th{ 
		font-size:14px !important;
		}


  #leftnav.topnav.responsive {
	position: relative;
	margin-top:0px;
	}
  #leftnav.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  #leftnav.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border:solid #d00139 1px;    
    border-bottom:solid #000 1px;
    width:calc(100% - 40px);
    margin-top:0px;
    margin-bottom:0px;
    background:#d00139;
    padding: 5px !important;
    color:#fff;
  }
  
   #leftnav.topnav.responsive a:hover {
    color:#d00139;
    background:#fff;
 
   }
  
	.hidesmall{
		display:none;
		}
  
  }



#myTopnavWrapperinner{background: #000;text-align: left;margin: 0 auto;display: block;max-width: 969px;overflow: hidden;position: relative;}

#myTopnavWrapper{
background: #000;
	width: 100%;

}


#mainbody{
overflow: hidden;
    background: url(https://teachers.cactuslanguagetraining.com/images/uploads/landing-page-bg-top.jpg) repeat-x;
    border-color: #dbdbdb;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    padding: 20px 20px 10px 20px;
    margin-bottom: 22px;
    margin-top: 22px;
}

#copyfooter {
    margin-top: 10px;
    width:100%;
    text-align:center;
    	font-size:14px !important;
}

#messagebox{
padding:0px;
}

#footerdivinner .vcard {
	display: block;
	background: #FFFFFF;
	width: 40%;
	height:180px;
	padding: 15px;
	padding-top: 9px;
	padding-bottom: 11px;
	float: left;
	margin-bottom: 15px;
	margin-top: 4px;
	border: 1px solid #E9E9E9;
	font-size:14px !important;
}



#footerdivinner .vcard.right {
	float: right;
}
#footerdivinner .vcard.left {
	padding-left: 25px;
}




#footerdivinner #socialside {
margin-top:10px;
width:260px;
}

#footerdivinner ul#socialside li {
 display:inline;
 padding:0px;
}


#wrapperinner {
	text-align: left;
	margin: 0 auto;
	display: block;
	max-width: 969px;
	overflow: hidden;
	position: relative;
	background-color: #FFF;
	}

#footerdiv {
	box-sizing: border-box;
	width:100%;
	background-color:#F0F0F0 ;
	padding:30px; 
	margin-top:10px;
}


#footerdivinner{background: #F0F0F0 ;text-align: left;margin: 0 auto;display: block;max-width: 969px;overflow: hidden;position: relative;
color:#444;}

#contractexpanded,
#thecoursesexpanded{
display:inline-block;
padding-left:15px;
}






#leftcol {
width:200px;
float:left;
padding-left: 0px;
	box-sizing: border-box;
	margin-top:-20px;
}

#rightcol{
width: calc(100% - 250px);
float:left;
padding-left: 30px;
	box-sizing: border-box;
}

.clear{
	clear:both;
}



.topnav {
  overflow: hidden;
  background-color: #000;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px 16px 15px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-top:1px;

}



.topnav a#logo {
  padding: 0px 0px;
    margin-top:0px;

}




.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #117995;
  color: white;
}

.topnav .icon {
  display: none;
}




















tr.odd td {
	background: #CCCCCC;
}
tr.even td {
	background: #EEEEEE;
}

tr.inactive td, tr.inactive p, tr.inactive a {
	color: #CCCCCC;
}
tr.teachingconflict td, tr.teachingconflict input, tr.teachingconflict p, tr.teachingconflict a {
	color: #CCCCCC;
}
tr.cancelledlesson td, tr.cancelledlesson input, tr.cancelledlesson a {
	color: #CCCCCC;
}

tr.lessonspacer td {
	background: #cccccc;
}

/* Tabs Menu */
.tabsmenu {
	float: left;
	/* width: 100%; */
	width: 850px;
	margin: 0 0 10px 0;
}
* html .tabsmenu {
	/* width: auto; */
}

.tabsmenu a, .tabsmenu a:visited {
	margin: 0 10px 0 0;
	padding: 5px 7px;
	display: block;
	float: left;
	background: #999999;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}
.tabsmenu a:hover, .tabsmenu a:active {
	background: #666666;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	
}
.tabsmenu .current a, .tabsmenu .current a:visited {
	background: #666666;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
.tabsmenu span.extra {
	display: block;
	font-weight: normal;
}
.tabsmenu .separator {
	display: none;
}
.tabsmenu .clear {
	clear: left;
	font-size: 1px;
	line-height: 1px;
	height: 1px;
	background: #666666;
	color: #666666;
}

/* teachers zone feedback */
span.feedback_none {
	width: 10px; 
	height: 10px; 
	background: #999; 
	display: inline-block;
}
span.feedback_red {
	width: 10px; 
	height: 10px; 
	background: #c00; 
	display: inline-block;
}
span.feedback_amber {
	width: 10px; 
	height: 10px; 
	background: #f93; 
	display: inline-block;
}
span.feedback_green {
	width: 10px; 
	height: 10px; 
	background: #0c0; 
	display: inline-block;
}

div.feedbackbar {
	position: relative;
	height: 25px;
	width: 10px;
	border: 1px solid #3366ff;
}
div.feedbackbar div {
	position: absolute;
	width: 10px;
	bottom: 0;
	background: #3366ff;
}
div.feedbackbar_na { border: 1px solid #999 !important; }
div.feedbackbar_na div { background: #999 !important; }
div.feedbackbar_y { border: 1px solid #0c0 !important; }
div.feedbackbar_y div { background: #0c0 !important; }
div.feedbackbar_n { border: 1px solid #c00 !important; }
div.feedbackbar_n div { background: #c00 !important; }

table.feedbacksummary thead th {
	FONT-SIZE: 14px;
	padding: 3px;
	background: #666666;
	color: #ffffff;
}
ul.feedbackcomments li {
	padding-bottom: 10px;
	max-width: 500px;
}

#username,#password{
		width:250px;
		border:solid #666 1px;
		padding:2px;
}


.displaytable.lesson td,.displaytable.lesson tr{
padding:5px;
}

.displaytable td{
max-width: 600px;
}



#classregister td,#classregister tr{
font-size:11px !important;
}


.sendmessageteacher{
width:120px;
float:right;
text-align:right;
}

.sendmessagetoteacher {
border: solid #117995 1px;
padding:10px;
margin-bottom:20px;
}

.sendmessagetoteacher input.button {
 background-color: #117995;
  color: #fff !important;
  padding:5px;
  font-size:14px;
  font-weight:bold;
}


.sendmessagetoteacher select{
border: solid #dbdbdb 1px;
padding:5px;
width:100%;
}

.sendmessagetoteacher textarea{
border: solid #dbdbdb 1px;
height:200px;
width:calc(100% - 20px);
padding:5px;
}

.sendmessagetoteacher input[type=text] {
border: solid #dbdbdb 1px;
padding:5px;
width:calc(100% - 20px);
}

.sendmessagetoteacher label span {
width:180px;
display:inline-block;
}
.sendmessagetoteacher label span#touser {
width:200px;
display:inline-block;}










@media screen and (max-width: 670px) {


  #leftnav.topnav.responsive a {
    width: calc(100% - 0px);
  }

#contractexpanded,
#thecoursesexpanded{
width:100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding-left:0px;
}

#leftnav.topnav.responsive #contractexpanded a,#leftnav.topnav.responsive #thecoursesexpanded a{

padding-left:15px !important;
}


#sendmessagebutton{
margin-bottom:10px;
}

	#headertext{
		margin-top: 5px;

	}

#footerdivinner .vcard.right {
	float: none;
	width:90%;
}
#footerdivinner .vcard.left {
	float: none;
	width:90%;
}



 
	#leftcol {
	width:100%;
	float:none;
	width:calc(100% - 20px);
	}
	
	#classregister td,#classregister tr{
font-size:14px !important;
}

	
	
	#rightcol{
	width:calc(100% - 20px);
	float:none;
	}
	
	.hidebig{display:inline-block};
	.hidesmall{display:none !important};
	
			table.messages { 
		border:none; ;
		}
		
		
		
		table.messages td{ 
		display:block ;
		}
		
		table.messages th{ 
		display:none;
		}
		
		.hidebig{display:block;font-weight:bold};
		
		span.hidebig{font-weight:bold !important};
		
		table.messages tr.headerrow{ 
		 display:none;
		}
		
		table.messages tr{ 
		margin-bottom:20px;
		}
		table.messages tr td:last-child{
		margin-bottom:30px;
		}
	
		table.displaytable { 
		border:none; 
		width:calc(100% - 20px);
		}
		

		
			table.displaytable.nopara td p{ 
			display:inline-block;
			margin:0px;
		}
		
		table.displaytable td{ 
		display:block ;
		}
			table.displaytable td.hidesmall{ 
		display:none ;
		}
		table.displaytable td.lastrow{ 
			margin-bottom:20px!important;
			border-bottom: solid #000 1px!important;
		}

		table.displaytable th{ 
		display:none;
		}
		
		.hidebig{display:block;font-weight:bold};
		
		span.hidebig{font-weight:bold !important};
		
		table.displaytable tr.headerrow{ 
		 display:none;
		}
		
		table.displaytable tr{ 
		margin-bottom:20px;
		}
		table.displaytable tr td:last-child{
		margin-bottom:0px;
		}
	
	#sendmessagebutton{
	float:none;
	}
	#messagewrapper{
	margin-top:none;
	}
	
	
.aligncenter{
text-align:left;
}
}