/*LOGIN PAGE*/
.loginform {
	background: white;
	margin-top: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -220px;
	margin-left: -221px;
	width: 400px;
	padding: 0px;
	padding-bottom: 20px;
  border: none;
  border-radius: 3px;
  box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
}

.loginform >div>h1 {
	font-size: 30px;
	background: transparent;
  padding-top: 20px;
  margin: 0px;
  color: #3498db;
	margin-top: 3px;
	margin-bottom: 20px;
}

.loginform > div >div input {
  line-height: 32px;
  width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	border: none;
}

.loginform > div >div .ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset {
  border-radius: 0px;
	border: none;
	border-bottom: 1px solid gray;
	width: 300px;
}

.loginform > div >div > .submitBtn {
	width: 305px;
	background: #ff6f42; 
    color: white;
    padding: 5px;
    margin-top: 25px;
    line-height: 30px;
    border: none;
    border-radius: 3px;
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
}

.loginform > div >div > .submitBtn:hover {
	text-shadow: none;
}




.ui-popup {
	width: 400px;
	height: auto;
	text-align: center;
	background: white;
}

.ui-popup h1 {
	font-size: 30px;
  padding: 20px;
	padding-bottom: 0px;
  margin: 0px;
	font-size: 20px;
	font-weight: normal;
}

.ui-popup > a.ui-btn.ui-btn-b {
	border-radius: 5px;
	text-shadow: none;
	box-shadow: none;
	color: white;
	background: #EE693F;
	margin-top: 10px;
	margin-bottom: 15px;
	border: none;
}

.ui-popup > a.ui-btn.ui-btn-b:hover {
	background: #EE693F;
	text-shadow: none;
}

.ui-btn.ui-corner-all {
	text-shadow: none;
}

.ui-btn.ui-corner-all:hover {
	text-shadow: none;
}

.ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset {
/* 	color: #5F968E;
	border: 1px solid gray;
	background: transparent;
	text-shadow: none;
	border-radius: 0px !important; */
}

.ui-header .ui-menubar {
	position:absolute;
	right:0.24em;
	height:28px;
}

.announcement-div {
	background: #7fbdb4;
	-webkit-border-radius: 1;
	-moz-border-radius: 1;
	border-radius: 1px;
	/*-webkit-box-shadow: 0px 5px 5px #9e4947;
	-moz-box-shadow: 0px 5px 5px #9e4947;
	box-shadow: 0px 5px 5px #9e4947;*/
	border-radius: 1px;
	border: none;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
	padding: 5px 10px;
}

.announcement-div >h3 {
	color: white;
	padding: 0px;
	margin-top: 5px;
	font-size: 25px;
	border: none;
	border-bottom: 2px solid white;
	display: inline-block;
}

.announcement-div >ul {
	background: transparent;
	box-shadow: none;
	border-radius: 1px;
	border: none;
}

.announcement-div >ul>li.ui-li-static {
	margin-top: 0px;
	margin-bottom: 5px;
	height: 35px;
	border: none;
	border-bottom: 1px solid white;
	border-radius: 5px;
	box-shadow: none;
	background: #a73737; /* fallback for old browsers */
}

.announcement-div >ul>li>.ui-grid-b>.ui-block-a {
	border: none;
}

.announcement-div >ul>li>.ui-grid-b>.ui-block-a>a {
	color: white;
	text-decoration: none;
	font-size: large;
	float: left;
}

.announcement-div >ul>li>.ui-grid-b>.ui-block-b>a {
	color: white;
	text-decoration: none;
	font-size: large;
	float: right;
}

.announcement-div >ul>li>.ui-grid-b>.ui-block-c>a {
	color: white;
	text-decoration: none;
	font-size: large;
	float: right;
}

#workbenchpage div.workbenchpopup {
	border-radius: 5px;
	border: 1px solid white;
	width: 300px;
}

#workbenchpage div.workbenchpopup div {
  color: white;
	background: #141E30; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #141E30 , #243B55); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #141E30 , #243B55); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#workbenchpage div.workbenchpopup button {
	background: #02AAB0; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #02AAB0 , #00CDAC); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #02AAB0 , #00CDAC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	border: 1px solid white;
	color: white;
	border-radius: 5px;
	text-align: center;
	width: 100%;
	margin-top: 10px;
}

#workbenchpage div.workbenchpopup  >.ui-field-contain >.ui-input-text  {
  margin-bottom: 10px;
}



#addchoicepopup-popup {
	border-radius: 5px;
	border: 1px solid white;
	width: 300px;
}

#addchoicepopup-popup div {
  color: white;
	background: #141E30; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #141E30 , #243B55); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #141E30 , #243B55); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#addchoicepopup-popup button {
	background: #02AAB0; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #02AAB0 , #00CDAC); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #02AAB0 , #00CDAC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	border: 1px solid white;
	color: white;
	border-radius: 5px;
	text-align: center;
	width: 100%;
	margin-top: 10px;
}

#addchoicepopup-popup >#addchoicepopup >.ui-field-contain >.ui-input-text  {
  margin-bottom: 10px;
}

/*#popup >h1 {
	font-size: 20px;
	font-weight: normal;
}

#popup {
	width: 300px;
	text-align: center;
}*/

#loading {
	background: white;
	width: 90px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	border-radius: 5px;
	margin-top: 20px;
	border: 1px solid #141E30;
}

#loading #loadingimg {
	width: 30px;
}

.profile-content {
	padding-left: 30px;
	padding-right: 30px;
	width: 550px;
	min-width: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	border-radius: 5px;
	background: #7fbdb4;
	-webkit-border-radius: 1;
	-moz-border-radius: 1;
	border-radius: 1px;
	/*-webkit-box-shadow: 0px 4px 5px #5e8a83;
	-moz-box-shadow: 0px 4px 5px #5e8a83;
	box-shadow: 0px 5px 5px #5e8a83;*/
	border: none;
	border-radius: 1px;
}

.profile-content input {
	color: white;
	border: 1px solid white;
	border-radius: 1px;
}

.profile-content label {
	color: white;

}

.profile-content .ui-field-contain {
	text-align: center;
}

.profile-content .ui-input-text {
	border: none;
}

#editpasswordpopup #savePwdBtn {
	background: #02AAB0; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #02AAB0 , #00CDAC); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #02AAB0 , #00CDAC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	border: 1px solid gray;
	color: white;
	border-radius: 5px;
	width: 120px;
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 10px;
	margin-bottom: 0px;

}

#editpasswordpopup #cancelPwdBtn {
	background: #e52d27; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #e52d27 , #b31217); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #e52d27 , #b31217); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	border: 1px solid gray;
	color: white;
	border-radius: 5px;
	width: 120px;
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 10px;
	margin-bottom: 0px;
}

#editpasswordpopup {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}

#editpasswordpopup label {
	color: black;
}

#editpasswordpopup input {
	color: black;
	border-bottom: 1px solid black;
}

#editpasswordpopup .ui-header.ui-bar-inherit {
	text-align: center;
	width: 100%;
}

#editpasswordpopup .ui-header.ui-bar-inherit h1 {
	color: black;
	font-size: 25px;
	margin-left: auto;
	margin-right: auto;
}

.profile-content #saveBtn {
	margin-bottom: 10px;
	text-align: center;
	width: 180px;
	margin-left: auto;
	margin-right: auto;
	border: none;	
	-webkit-border-radius: 1;
	-moz-border-radius: 1;
	border-radius: 1px;
	/*-webkit-box-shadow: 0px 4px 5px #c2643c;
	-moz-box-shadow: 0px 4px 5px #c2643c;
	box-shadow: 0px 4px 5px #c2643c;*/
	color: white;
	background: #EE693F;
	padding: 10px 15px 10px 35px;
	text-decoration: none;
}

.profile-content #saveBtn:hover {
	background: #eb592c;
}

.profile-content #pwdBtn {
	border-radius: 1px;
	width: 180px;
	margin-left: auto;
	margin-right: auto;
	border: none;	
	-webkit-border-radius: 1;
	-moz-border-radius: 1;
	border-radius: 1px;
	/*-webkit-box-shadow: 0px 4px 5px #c2643c;
	-moz-box-shadow: 0px 4px 5px #c2643c;
	box-shadow: 0px 4px 5px #c2643c;*/
	color: white;
	background: #EE693F;
	padding: 10px 15px 10px 35px;
	text-decoration: none;
}

.profile-content #pwdBtn:hover {
	background: #eb592c;
}

body {
}

b {
	font-size: 110%;
}

label {
	color: white;
	text-shadow: none;
}

em {
	/*color: red;*/
}

.ui-page {
	/*background: #3498db;*/
    /*background: -webkit-linear-gradient(to left, #141E30 , #243B55);
    background: linear-gradient(to left, #141E30 , #243B55); */
	min-height: 100%;
    height: 100%;
}

#topsection {
	height:5px;
	background: transparent;
}

#topsectionLogin {
    height:110px;
    min-width: 320px;
    background: transparent;
	margin-bottom: 50px;
}

#topsectionLogin h1 {
	margin: 0;
	padding-top: 40px;
	color: #FCFCFA;;
	text-align: center;
	font-size: 45px;
	font-family: 'Fredericka the Great', cursive;
}

#contentwrapper {
	float: left;
	width: 100%;
	background: transparent;
}

#contentcolumn {
	margin-left: 250px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn {
	float: left;
	width: 250px; /*Width of left column*/
	margin-left: -100%;
	/*border: 1px double black;*/
	/*border-radius: 25px;*/
	background: transparent;
}

#footer {
	clear: left;
	width: 100%;
	background: black;
	color: #FFF;
	text-align: center;
	padding: 4px 0;
}

#footer a {
	/*color: #FFFF80;*/
}

.innertube {
	margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
	/*border: 1px double white;*/
}

#editor {
    position: relative;
    height: 450px;
	width: 100%;
	/*margin-top: 10px;*/
	/*margin-bottom: 10px;*/
}

#editorAssessment {
	position: relative;
    height: 250px;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

#console_text {
	/*height: 200px;*/
}

#testcases_text {
	/*height: 200px;*/
}

#console {
	/*padding: 10px;*/
}

#console .ui-content {
	margin-right: 10px;
    padding: 0px;
}

#testcases {
	/*padding: 10px;*/
}

#testcases .ui-content {
	margin-left: 10px;
    padding: 0px;
}

.ui-grid-a > .leftDirectory {
	width: 15%;
    /*padding-top: 10px;
    padding-left: 10px;*/
    /*border: 1px solid white;*/
    margin: 5px;
    border-radius: 5px;
    background: transparent;
}

.ui-grid-a > .editor {
	width: 80%;
	/*padding: 10px;*/
    /*border: 1px solid white;*/
    margin: 5px;
    border-radius: 5px;
    background: transparent;
    float: right;
}

.ui-grid-a > .editor > .ui-grid-a > .ui-block-a {
	width: 80%;
}

#buttongroup {
	width: 100px;
	float: right;
    margin: 0px;
}

.ui-bar-a {
	background: transparent;
	color: white;
	border: none;
	/*border-radius: 5px;*/
	text-shadow: none;
	margin-bottom: 5px;
}

.ui-header .ui-title {
	color: white;
	font-size: large;
    padding: 10px 0px;
}

.ui-body-a {
	background: transparent;
	text-shadow: none;
	border: none;
    padding: 0px;
	/*border-radius: 25px;*/
}

.ui-input-text {
/* 	width: 300px;
	color: #5F968E; */
	/*! border: none; */
/* 	background: transparent;
	text-shadow: none;
	border-bottom: 1px solid #5F968E;
	border-radius: 0px; */
}
.ui-shadow-inset {
	box-shadow: none;
}

.ui-btn.ui-corner-all.loginBtn {
	width: 300px;

	margin-top: 25px;
	border: none;	
	-webkit-border-radius: 1;
	-moz-border-radius: 1;
	border-radius: 1px;
	/*-webkit-box-shadow: 0px 4px 5px #c2643c;
	-moz-box-shadow: 0px 4px 5px #c2643c;
	box-shadow: 0px 4px 5px #c2643c;*/
	color: white;
	font-size: 20px;
	/*background: #EE693F;*/
	background: #EE693F;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
}

.ui-btn.ui-corner-all.loginBtn:hover {
	background: #eb592c;
	text-decoration: none;
} 

.logOutBtn {
	border: none;	
	-webkit-border-radius: 1;
	-moz-border-radius: 1;
	border-radius: 1px;
	/*-webkit-box-shadow: 0px 4px 5px #691515;
	-moz-box-shadow: 0px 4px 5px #691515;
	box-shadow: 0px 4px 5px #691515;*/
	color: white;
	font-size: 20px;
	background: #AF1C1C;
	padding: 10px 15px 10px 35px;
	text-decoration: none;
}

.logOutBtn:hover {
	background: #e32222;
}

.normalBtn {
	border: none;	
	-webkit-border-radius: 1;
	-moz-border-radius: 1;
	border-radius: 1px;
	/*-webkit-box-shadow: 0px 4px 5px #c2643c;
	-moz-box-shadow: 0px 4px 5px #c2643c;
	box-shadow: 0px 4px 5px #c2643c;*/
	color: white;
	font-size: 20px;
	background: #EE693F;
	/*! padding: 10px 15px 10px 35px; */
	text-decoration: none;
}

.normalBtn:hover {
	background: #eb592c;
}

#panel-right .ui-controlgroup button.editorBtn {
	color: white;
	text-shadow: none;
	font-size: medium;
	background: #02AAB0;
}

#panel-right .editorBtn {
	border: 1px solid white;
	color: white;
	border-radius: 5px;
    padding-right: 20px;
	padding-left: 20px;
	padding-top: 1px;
	padding-bottom:1px;
  	height: auto;
}

.ui-header.ui-bar-inherit {
	background: transparent;
	border: none;
	border-bottom: 1px solid white;
	padding: 2px;
	text-shadow: none;
}

#console > .ui-header.ui-bar-inherit {
	border-bottom: none;
}

#testcases > .ui-header.ui-bar-inherit {
	border-bottom: none;
}

.editor > .ui-header.ui-bar-inherit {
	border-bottom: none;
}

#jstree {
    background: white;
	border-radius: 1px;
    padding-top: 10px;
    padding-bottom: 10px;
	/*-webkit-box-shadow:
		8px 10px 10px rgba(0,0,0,0.5),
		inset 8px 10px 10px rgba(255,255,255,0.75);
	-moz-box-shadow:
		8px 10px 10px rgba(0,0,0,0.5),
		inset 8px 10px 10px rgba(255,255,255,0.75);
	box-shadow:
		8px 10px 10px rgba(0,0,0,0.5),
		inset 8px 10px 10px rgba(255,255,255,0.75);*/
}

/*#sectionDisplay {
 	color: black; 
 	text-shadow: none; 
	font-size: 16px;
     background: white; 
     border-radius: 1px; 
 	padding-bottom: 20px; 
 	margin-top: 20px; 
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}*/

#sectionHeader, #contentHeader, #editorHeader, #fileDirectory {
	background: #02AAB0; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #02AAB0 , #00CDAC); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #02AAB0 , #00CDAC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	border: 1px solid white;
	color: white;
	border-radius: 5px;
    margin-left: 10%;
    margin-right: 10%;
}

#sectionHeader.ui-title {
	margin-left: auto;
	margin-right: auto;
	width: 180px;
}

#contentHeader.ui-title {
	margin-left: auto;
	margin-right: auto;
	width: 180px;
}

.leftDirectory .ui-header.ui-bar-inherit {
	border: none;
    padding-top: 20px;
}

.editor .ui-header.ui-bar-inherit {
	padding: 20px;
    width: 50%;
    margin-left: 20%;
}


.bookdiv .booktree {
    float: left;
    width: 20%;
}

.bookdiv .bookcontent {
    float: left;
    width: 80%;
}

.bookcontent .ui-header  {
	margin-left: 10px;
	margin-right: 10px;
}

.bookcontent .ui-content {
	background: white;
	margin-left: 10px;
	margin-right: 10px;
}

/* ---BOOK -*/

#bookpage {
    /*height: 100%;*/
}

#book-containter {
    /*min-height: 100%;*/
}

.panel-left {
    background: transparent;
	/*width: 310px;*/
}

.panel-left .ui-header {
	border: none;
}

.panel-left .ui-header .ui-title {
	margin-top: 20px;
	color: black;
}

.panel-right .ui-header .ui-title {
	margin-top: 20px;
	color: black;
}


.panel-right {
    background: transparent;
	padding: 0px;
}

.panel-right .ui-header {
	border: none;
}

.splitter_panel .vsplitter {
	width: 3px;
	padding: 0px;
	margin: 0px;
	background: #00d2ff; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #00d2ff , #3a7bd5); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #00d2ff , #3a7bd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/*.ui-popup {
	background: white;
	padding: 7px;
}*/

.course-block {
	background: #7fbdb4;
	-webkit-border-radius: 1;
	-moz-border-radius: 1;
	border-radius: 1px;
	/*-webkit-box-shadow: 0px 4px 5px #5e8a83;
	-moz-box-shadow: 0px 4px 5px #5e8a83;
	box-shadow: 0px 5px 5px #5e8a83;*/
	padding: 0px;
	height: auto;
	border: none;
	border-radius: 1px;
	margin-left: 5px;
	margin-right: 5px;
	min-width: 250px;
	padding-bottom: 10px;
}

.course-block .ui-bar.ui-bar-a {
	background: transparent;
	padding-top: 10px;
	padding-bottom: 0px;
	margin-bottom: 10px;
	margin-left: 70px;
	margin-right: 70px;
	color: white;
	text-shadow: none;
	text-align: center;
}

.course-block .ui-bar.ui-bar-a h1 {
	font-size: 26px;
}

.course-block div {
	padding: 5px;
	padding-bottom: 0px;
}

.course-block>div.courseInstructor {
	background: transparent;
	width: 200px;
	height: 15px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: white;
	margin-bottom: -10px;
	padding-bottom: 7px;
	margin-top: -15px;
	font-style: italic;
	border-bottom: 2px solid white;
	border-radius: 0px;
}

.course-block> div.courseDescription {
	background: transparent;
	border-radius: 1px;
	padding: 10px;
	width: 180px;
	color: white;
	margin-left: auto;
	margin-right: auto;
	margin-top: 13px;
}

.bookBtn.ui-btn-icon-left:after {
    background-image: url("/learn/inc/img/book-course.png");
	background-size: 30px;
    background-color: transparent;
	width: 45px;
	height: 45px;
	top: 11px;
}

.workbenchBtn.ui-btn-icon-left:after {
    background-image: url("/learn/inc/img/workbench.png");
	background-size: 30px;
    background-color: transparent;
	width: 45px;
	height: 45px;
	top: 11px;
}


/* split button for the */

#testcaseslist .split-button-custom {
   position: relative;
    float: right;   /* allow multiple links stacked on the right */
    height: 100%;
    margin:0;
    min-width:3em;
    /* remove boxshadow and border */
    border:none;
    moz-border-radius: 0;
    webkit-border-radius: 0;
    border-radius: 0;
    moz-box-shadow: none;
    webkit-box-shadow: none;
    box-shadow: none;
}

#testcaseslist .split-button-custom span.ui-btn-inner {
    /* position icons in center of listitem*/
    position: relative;
    margin-top:50%;
    margin-left:50%;
    /* compensation for icon dimensions */
    top:11px;
    left:-12px;
    height:40%; /* stay within boundaries of list item */
}

/* ####### responsive layout CSS ####### */

@media (max-width: 1000px){ /* responsive layout break point */

	#leftDirectory {
		display: none;
	}

	.ui-block-b.editor {
		width: 100%;
	}

	.ui-block-b.editor >div>.ui-grid-a>.ui-controlgroup {
		display: none;
	}

	.ui-block-b.editor >div>.ui-grid-a>#editor {
		width: 100%;
	}

	.ui-block-b.editor>.ui-header {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 1260px){ /* responsive layout break point */

	/*.ui-block-b.editor >div>.ui-grid-a>.ui-controlgroup {
		display: none;
	}
	.ui-block-b.editor >div>.ui-grid-a>#editor {
		width: 100%;
	}*/
}

@media (max-width: 400px){ /* responsive layout break point */

	.loginform {
		left: 0;
		margin-left: auto;
		width: 100%;
	}
}

#chatmessages div.chat-msg: {
	background: azure;
	border: 10px solid azure;
	border-radius: 10px;
	max-width: 80%;
	min-width: 40%;
	font-size: medium;
	font-weight: bold;
}

.warningblinking{
    animation:warningblinkingText 1.2s infinite;
}
@keyframes wanrningblinkingText{
    0%{     color: red;    }
    49%{    color: red; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: red;    }
}

.normalblinking{
    animation:normalblinkingText 1.2s infinite;
}
@keyframes normalblinkingText{
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}

#chatmessages li.outmessage {
	float: right;
	clear: both;
	padding-right:3px;
	background: white;
	min-width: 60%;
	max-width: 80%;
}

#chatmessages li.outmessage div.chat-msg {
	padding-right: 10px;
	background: #e7fbfe;
	border: 5px solid #e7fbfe;
	border-radius: 3px;
}

#chatmessages li.inmessage {
	float: left;
	clear: both;
	background: white;
	min-width: 60%;
	max-width: 80%;
}

#chatmessages li.inmessage div.chat-msg {
	padding-right: 10px;
	background: #f4f4f4;
	border: 5px solid #f4f4f4;
	border-radius: 3px;
}

#chatmessages li.errmessage {
	float: left;
	clear: both;
	background: white;
	min-width: 60%;
	max-width: 80%;
}

#chatmessages li.errmessage div.chat-msg {
	padding-right: 10px;
	background: #fdc9c9;
	border: 5px solid #fdc9c9;
	border-radius: 3px;
}