/* Joann.com Class Registrar
(c) 2012 Joann.com - All rights reserved.
Author (XHTML, CSS & jQuery): William Kessel
Last update:  May 2012 - WK.
*/

/* Color Chart 
white: 					#fff 
black: 					#121212
dark gray: 				#333
medium gray: 			#666
light gray: 			#ccc
dark green: 			#0a3b31
medium green: 			#69913b
light green: 			#e4ebdc
beige: 					#fffbe5
red: 					#c00
*/

/* First, let's equalize the browsers as much as possible */
html {
	color: #121212;
	background: #fff;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
	{
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,img {
	border-left: 0;
}

address,caption,cite,code,dfn,em,var {
	font-style: normal;
	font-weight: normal;
}

th {
	font-style: normal;
}

li {
	list-style: none;
}

caption,th {
	text-align: left;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before,q:after {
	content: '';
}

abbr,acronym {
	border-left: 0;
	font-variant: normal;
}

sup {
	vertical-align: text-top;
}

sub {
	vertical-align: text-bottom;
}

input,textarea,select {
	font-family: verdana, arial, helvetica, clean, sans-serif;
	font-size: 13px;
	font-weight: inherit;
	background-color: #ffffe6;
}

legend {
	color: #121212;
}

body {
	font-size: 13px;
	line-height: 1.231;
	font-family: verdana, arial, helvetica, clean, sans-serif;
}

table {
	font-size: inherit;
}

pre,code,kbd,samp,tt {
	font-family: monospace;
	line-height: 100%;
}

p {
	margin: 5px;
}

a {
	outline: 0;
	text-decoration: none;
}
/* Some Basics...  */
body {
	text-align: center;
	font-family: verdana, arial, helvetica, clean, sans-serif;
}

#wrapper940 {
	text-align: left;
	width: 940px;
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
	position: relative;
	padding: 0;
}

.divider {
	width: 100%;
	background: transparent url(/JClassWeb/resources/img/divider_bg.gif)
		repeat-x !important;
	height: 12px;
	border: none;
	margin: 0;
	padding: 0;
	/*float: left; */
	clear: both;
	overflow: hidden;
}

.highlight_reverse {
	width: 100%;
	border: 1px solid #ccc;
	background: #69913b;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	letter-spacing: 0.04em;
	font-size: 12px;
}

.floatedright {
	float: right;
}

.floatedleft {
	float: left;
}

.marginedleft {
	margin: 0 0 0 80px;
}

.marginedleft100 {
	margin: 0 0 0 180px;
}

.marginedleft200 {
	margin: 0 0 0 280px;
}

.marginedleft500 {
	margin: 0 0 0 500px;
}

.marginedright {
	margin: 0 80px 0 0;
}

.marginedright100 {
	margin: 0 180px 0 0;
}

.marginedright200 {
	margin: 0 280px 0 0;
}

.marginedright500 {
	margin: 0 500px 0 0;
}

.ucase {
	text-transform: uppercase;
	text-decoration: none;
	font-size: 12px;
	text-align: center;
}

div {
	height: auto;
	padding: 1px;
}

hr.clear {
	clear: both;
	height: 1px;
	color: #fff !important;
	width: 100%;
	border: 0;
	margin: 2px 0;
}

#content_main:after,.nest-half:after,.nest-thirds:after,.nest-thirdright:after,.nest-thirdleft:after,.nest-quarterright:after,.nest-quarterleft:after,.block:after
	{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Now the grid, based on the YUI Grid, re-written for semantic meaning and singularity of purpose */
.block {
	width: 99.6%;
	overflow: hidden;
	float: left;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.half {
	overflow: hidden;
	float: left;
	margin: 2px 0;
}

.one-half {
	overflow: hidden;
	float: left;
	margin: 2px 0;
	width: 40.4%;
}

.third {
	overflow: hidden;
	float: left;
	margin: 2px 0;
}

.one-third {
	overflow: hidden;
	float: left;
	margin: 2px 0;
	width: 38.9%;
}

.inner-one-third {
	overflow: hidden;
	float: left;
	margin: 2px 0;
	width: 29.7%;
}

.two-thirds {
	overflow: hidden;
	float: left;
	margin: 2px 0;
	width: 60.6%;
}

.inner-two-thirds {
	overflow: hidden;
	float: left;
	margin: 2px 0;
	width: 50%;
}

.one-qtr {
	overflow: hidden;
	float: left;
	margin: 1% 1.5% 1% 0.5%;
	width: 24%;
}

.three-qtr {
	overflow: hidden;
	float: left;
	margin: 1% 0.5% 1% 1.5%;
	width: 73.6%;
}

.one-fifth {
	float: left;
	margin: 2px 0;
	width: 20%;
}

.four-fifths {
	overflow: hidden;
	float: right;
	margin: 1px 0;
	width: 79.2%;
}

.nest-fifths {
	overflow: hidden;
	float: left;
	margin: 0;
	width: 99.6%;
}

.special-event {
	overflow: hidden;
	float: left;
	margin: 0;
	width: 99.6%;
}

.nest-thirds {
	overflow: hidden;
	float: left;
	margin: 0;
	width: 99.6%;
}

.inner-nest-thirds {
	overflow: hidden;
	float: left;
	margin: 2px 0 10px 0;
	width: 79.4%;
}

.nest-60-40 {
	overflow: hidden;
	float: left;
	margin: 2px 0 10px 0;
	width: 100%;
}

.nest60 {
	overflow: hidden;
	float: right;
	margin: 0;
	width: 57.4%;
}

.nest40 {
	overflow: hidden;
	float: right;
	margin: 0;
	width: 42.5%;
}

.first {
	float: left;
	margin: 2px 0;
}

.nest {
	overflow: hidden;
	float: left;
	margin: 2px;
	width: 99.6%;
}

.nest-14 {
	overflow: hidden;
	float: left;
	margin: 2px 0;
}

.nest-41 {
	overflow: hidden;
	float: left;
	margin: 0;
}

.nest-half {
	margin: 4px;
	width: 79.4%;
	overflow: hidden;
	float: left;
}

.nest-half-left {
	width: 49.5%;
	float: left;
}

.nest-half-right {
	width: 49.5%;
	float: right;
	overflow: hidden;
	float: right;
	margin: 2px 0;
}

.nest-half .half {
	width: 49.5%;
	float: left;
}

.inner-nest-thirds .inner-nest-half {
	margin: 2px 0;
	width: 49%;
	overflow: hidden;
	float: left;
}

.inner-nest-half .half {
	width: 24.4%;
	float: left;
	margin: 0;
	border-left: 1px dotted #666;
}

.nest-half .nest {
	width: 49.5%;
	float: left;
}

.nest-half .nest-half-left .first {
	width: 49.1%;
	float: left;
}

.nest-half .nest-half-left .half {
	width: 49.1%;
	float: right;
}

.nest-half .nest-half-right .nest {
	width: 49.1%;
	float: right;
}

.nest-half .nest-half-right .first {
	width: 49.1%;
	float: left;
}

.nest-half .nest-half-right .half {
	width: 49.1%;
	float: left;
}

.nest-half .nest-half-right .nest-half {
	width: 98.8%;
	float: left;
	margin-left: 0;
}

.nest-14 {
	width: 99.6%;
}

.nest-14 .first {
	width: 19.6%;
	float: left;
}

.nest-14 .three-qtr {
	width: 60.7%;
	float: left;
}

.nest-41 {
	width: 100%;
	margin-bottom: 0;
}

.nest-41 .first {
	width: 60.6%;
	float: left;
}

.nest-41 .one-qtr {
	width: 20.2%;
	float: right;
}

.nest-1-2-1 .first {
	width: 24.5%;
	float: left;
}

.nest-1-2-1 .half {
	width: 49.5%;
	float: left;
}

.nest-1-2-1 .last {
	width: 24.5%;
	float: right;
}

/* Masthead, Breadcrumbs, & Footer/Root styles */
#masthead,#footer {
	text-align: center;
	background: transparent;
	margin: 0;
	float: none;
	padding: 2px 0;
}

#masthead {
	height: 110px;
	font-size: 11px;
	border: none;
	background: transparent;
	color: #0a3b31;
}

#masthead img#logo {
	height: 60px;
	width: 210px;
	float: left;
	margin: 10px 0 0 0;
}

#masthead a img#logo {
	border: none;
	text-decoration: none;
}

#masthead #account {
	float: right;
	width: 340px;
	clear: none;
	top: 0px;
	position: relative;
	white-space: nowrap;
	margin-right: 5px;
	right: 0;
}

#masthead #account a:link {
	color: #0a3b31;
	text-decoration: none;
	margin: 0 3px;
}

#masthead #account a:visited {
	color: #0a3b31;
	text-decoration: none;
}

#masthead #account a:hover {
	color: #0a3b31;
	text-decoration: underline;
}

#masthead #account a:active {
	color: #0a3b31;
	text-decoration: none;
}

#masthead #account p.above {
	line-height: 150%;
	width: 340px;
	margin: 14px 0 0 0;
	clear: none;
	padding-bottom: 4px;
	text-align: right;
	position: relative;
}

#masthead a#loginout {
	color: #69913b;
}

#masthead h1 {
	font-size: 20px;
	font-weight: bold;
	color: #0a3b31;
	background: none;
	text-align: center;
	width: 50%;
	margin: 46px auto 0 auto;
}

/* BASIC NAV STYLING  */
#nav {
	height: 30px;
	width: 940px;
	padding: 0;
	margin: 0;
	background-color: #0a3b31;
	border: none;
	overflow: visible;
}

#nav ul {
	text-align: center;
	list-style: none;
	margin: 0 0 0 25px;
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.01em;
	list-style: none;
}

#nav li,#nav li a {
	height: 25px;
	margin: 0;
	font-weight: 600;
	font-size: 11px;
	color: #ffffe6;
	text-decoration: none;
	line-height: 28px;
	text-align: center;
	padding: 0 15px 5px 15px;
}

#nav li li {
	padding: 2px;
	border-bottom: 1px solid #66613b;
	border-top: 1px solid #fffbe5;
	float: none;
	min-width: 150px;
}

#nav li li,#nav li.active li,#nav li li a,#nav li.active li a {
	float: none;
	display: block;
	text-align: left;
}

#nav li li a,#nav li li li a,#nav li.active li a,#nav li.active li li a
	{
	text-decoration: none;
	color: #0a3b31;
	text-align: left;
}

#nav li:hover li:hover,#nav li:active li:active,#nav li.active li {
	background: #e4edbc;
}

/* Son of Suckerfish */
#nav a {
	display: block;
}

#nav li { /* all list items */
	float: left;
	/* width: 7em; */ /* width needed or else Opera goes nuts */
	/* width added causes IE8 to go whacko - let's kill Opera, since it's not relevant here */
}

#nav li ul,#nav li.active ul { /* second-level lists */
	position: absolute;
	left: -999em;
	/* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li.active ul
	{ /* lists nested under hovered list items */
	left: auto;
	margin-left: 0;
}

#nav li:hover ul,#nav li.active ul {
	background: #fffbe5;
	border: 1px solid #69913b;
	z-index: 5000;
}

/* End of Suckerfish Nav */
#footer {
	border: none;
	border-top: 1px solid #ccc;
	clear: both;
	color: #333;
	padding: 35px 0 15px 0;
}

#footer a {
	color: #333;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

#footer p {
	font-size: 9px;
	display: block;
}

#rail {
	padding: 0;
	font-size: 11px;
	font-weight: normal;
}

#rail #controls {
	overflow: hidden;
	padding: 5px;
	margin: 10px 0 10px 10%;
}

#rail a.icon img {
	float: left;
	margin: 0 10px;
}

#leftnav {
	display: block;
	margin: 15px 0 0 0;
	background: transparent none;
	border-top: 1px dashed #ccc;
	padding: 5px 0 0 10px;
	width: 99%;
	overflow-y: auto;
	overflow-x: hidden;
}

#leftnav form,#leftnav fieldset {
	border: none;
}

#leftnav li,#leftnav li li {
	margin: 5px 0;
	color: #121212;
	list-style: none;
	line-height: 1.4
}

#leftnav li li input {
	margin: 5px 5px 0 0;
	vertical-align: top;
	display: inline;
	margin: 0;
}

#leftnav li li label {
	vertical-align: middle;
	display: inline;
	margin: 0 0 0 5px;
	float: none;
}

#leftnav li ul li {
	margin: 5px 0;
}

#quick-search label {
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #0a3b31;
	display: block;
}

#qsearch {
	margin: 2% 9%;
	width: 80%;
	height: 20px;
}

#qsearch_btn {
	margin: 2% 28%;
	width: 40%;
}

/* Table Styles */
th,td {
	border: none;
	padding: 5px;
}

td.center {
	text-align:center;
}

#content {
	width: 99.6%;
}

/*Login and legal disclosure*/
#legal {
	font-size: 80%;
}

/*Registration Section */
#registration {
	margin: 0;
	padding: 5px 0 0 2px;
}

#container div {
	margin: 2px 0;
	background: #FFFFFF;
}

#registration h2 {
	font-size: 18px;
	font-weight: bold;
	color: #0a3b31;
	background: none;
	border-bottom: 3px double #ccc;
	padding: 0 0 5px 10px;
}

#registration h3 {
	padding: 5px;
	font-size: 12px;
	font-weight: bold;
	color: #0a3b31;
	border-bottom: 1px dashed #ccc;
	margin: 20px 0 3px 0;
}

#registration h4 {
	padding: 5px;
	font-size: 12px;
	font-weight: bold;
	color: #0a3b31;
	border-bottom: 1px dashed #ccc;
	margin: 5px 0 3px 0;
}

#registration ul,#registration h3,#registration fieldset {
	border: none;
}

p.coursemeta {
	text-align: right;
}

#registration li.addmore {
	margin-left: 300px;
}

/* Forms */
form ul li input {
	height: 20px;
}

input[readonly], select[disabled]  {
/*for inputs that are not editable but submitted with their forms*/
	color: #000;
	background-color: #fff;
	border-color: #EBF2F0;
	border-style: none solid solid none;
}

form ul li {
	line-height: 1.5;
	margin: 5px 0;
	float: none;
	list-style: none;
}

form ul li label {
	width: 120px;
	padding: 2px 5px;
}

form input[type="checkbox"] {
	margin-top: 10px;
}

form ul li input[type="submit"] {
	height: 22px;
	padding: 0 3px 0 3px;
	clear: none;
}

span.reqd {
	color: red;
	font-weight: bold;
}

.output_list img {
	height: 15px;
	width: 15px;
	border-width: 0
}

.output_list a:link {
	color: #004433;
}

.output_list a:hover {
	color: #B45F2D;
}

.output_list a:active {
	font-size: 110%;
	color: #B45F2D;
}

.output_list a:visited {
	color: #693700;
}

.output_list td {
	width: 350px;
}

.one_line li {
	display: inline;
}

.one_line li label {
	float: left;
}

ul.course_dates label {
	float: none;
	width: auto;
}

.course_dates li {
	display: inline;
}

.course_dates li label {
	width: 100px;
}

.dates li label {
	width: 150px;
	float: left;
}

.course_presentation li label,.login li label {
	width: 100px;
	float: left;
}

.course_detail_basic li {
	margin: 6px 0;
}

.course_detail_basic li label {
	width: 200px;
	float: left;
}

.course_detail_basic .button121 {
	width: 121px;
	float: left;
	margin: 0 35px 0 0;
}

select {
	margin: 3px 0 10px 0;
}

input.course_obj {
	width: 450px;
	margin: 5px 0;
}

input.small, td.small {
	width: 25px;
}

input.medium, td.medium {
	width: 100px;
}

/* Buttons! Convention: styles are named after the button width, which is the number in both the style name and the image name! (NOTE: "-arr" indicates the button has an arrow)   */
.button300 {
	background: transparent url(/JClassWeb/resources/img/button300.jpg)
		center 3px;
	text-align: left;
	height: 22px;
	width: 377px;
	color: #fff;
	border: none;
	text-decoration: none;
	font-size: 12px;
	padding: 0 0 2px 0;
	text-align: center;
	cursor: pointer;
}

.button76 {
	background: transparent url(/JClassWeb/resources/img/button76.jpg)
		center 3px no-repeat;
	text-align: center;
	height: 22px;
	width: 76px;
	color: #fff;
	border: none;
	text-decoration: none;
	font-size: 12px;
	padding: 0;
	cursor: pointer;
}

.button101 {
	background: transparent url(/JClassWeb/resources/img/button101.jpg)
		center 3px no-repeat;
	text-align: center;
	height: 22px;
	width: 101px;
	color: #fff;
	border: none;
	text-decoration: none;
	font-size: 12px;
	padding: 0;
	cursor: pointer;
}

.button121 {
	background: transparent url(/joann/button121.jpg)
		center 3px no-repeat;
	text-align: center;
	height: 22px;
	width: 121px;
	color: #fff;
	border: none;
	text-decoration: none;
	font-size: 12px;
	padding: 1px 0 2px 0;
	cursor: pointer;
	margin: 0 10px;
}

.button126-arr {
	background: transparent url(/JClassWeb/resources/img/button126-arr.jpg)
		center 3px no-repeat;
	text-align: center;
	height: 22px;
	width: 126px;
	color: #fff;
	border: none;
	text-decoration: none;
	font-size: 12px;
	padding: 0;
	cursor: pointer;
}

.button133 {
	background: transparent url(/JClassWeb/resources/img/button133.jpg)
		center 1px no-repeat;
	text-align: center;
	height: 22px;
	width: 133px;
	color: #fff;
	border: none;
	text-decoration: none;
	font-size: 12px;
	padding: 1px 0 2px 0;
	clear: both;
	cursor: pointer;
}

.button141 {
	background: transparent url(/JClassWeb/resources/img/button141.jpg)
		center 4px no-repeat;
	text-align: center;
	height: 25px;
	width: 141px;
	color: #fff;
	border: none;
	text-decoration: none;
	font-size: 12px;
	padding: 0 0 2px 0;
	cursor: pointer;
}

.button170 {
	background: transparent url(/JClassWeb/resources/img/button170.jpg)
		center 3px no-repeat;
	text-align: center;
	height: 22px;
	width: 170px;
	color: #fff;
	border: none;
	text-decoration: none;
	font-size: 12px;
	padding: 0 0 2px 0;
	cursor: pointer;
}

.button201 {
	background: transparent url(/JClassWeb/resources/img/button201.jpg)
		center 3px no-repeat;
	text-align: center;
	height: 22px;
	width: 201px;
	color: #fff;
	border: none;
	text-decoration: none;
	font-size: 12px;
	padding: 2px 0 0 0;
	cursor: pointer;
}

.button170 {
	width: 170px;
	height: 22px;
	padding: 1px 0 0 0;
	margin: 15px 0 0 0;
	text-align: center;
	background-position: center top;
}

.error {
	color: #ff0000;
	font-style: italic;
	font-weight: bold;
}


.gap{ height:30px;}
.gap2{ height:20px;}
.gap3{ height:15px;}
.gap4{ height:10px;}
.enStudent{padding:0 0 5px 10px;}
.classDesc{padding:0 0 0 20px;}
.classPrice{padding:0 0 0 50px;}
.margin_left7{ margin-left:5px;}
.margin_left25{ margin-left:25px;}
.margin_left30{ margin-left:30px;}
.margin_left50{ margin-left:50px;}
.margin_left46{ margin-left:46px;}
.margin_left66{ margin-left:66px;}
.margin_left90{ margin-left:90px;}
.margin_left111{ margin-left:111px;}
.margin_left112{ margin-left:112px;}
.margin_left116{ margin-left:116px;}
.margin_left127{ margin-left:127px;}
.margin_left210{ margin-left:210px;}

.joann-paging {
	display: block;
	width: 20px;
	float: left;
	color: #333;
	font-weight: bold;
	margin: 10px 20px 10px 20px;
	text-align: center;
}

#display_tag_meta{
	font-weight: bold;
	color: #333;
	font-size: 10px;
}

#paging-div{
	width: 100%;
	text-align: center;
}

#paging-div #paging-container{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.readonly {
	border: none;
	border: 0px;
	border-color:transparent;
	border-top-width: 0px;
	border-right-width-value: 0px;
	border-right-width-ltr-source: physical;
	border-right-width-rtl-source: physical;
	border-bottom-width: 0px;
	border-left-width-value: 0px;
	border-left-width-ltr-source: physical;
	border-left-width-rtl-source: physical;
	border-top-style: 0px;
	border-right-style-value: 0px;
	border-right-style-ltr-source: physical;
	border-right-style-rtl-source: physical;
	border-bottom-style: 0px;
	border-left-style-value: 0px;
	border-left-style-ltr-source: physical;
	border-left-style-rtl-source: physical;
	border-top-color: transparent;
	border-right-color-value: transparent;
	border-bottom-color: transparent;
	border-left-color-value: transparent;
	border-left-color-ltr-source: physical;
	border-left-color-rtl-source: physical;
	border-right-color-ltr-source: physical;
	border-right-color-rtl-source: physical;
	background: #fff;
	font:black;
	cursor:default;
}
.disabled {
	border: none;
	border: 0px;
	border-color:transparent;
	border-top-width: 0px;
	border-right-width-value: 0px;
	border-right-width-ltr-source: physical;
	border-right-width-rtl-source: physical;
	border-bottom-width: 0px;
	border-left-width-value: 0px;
	border-left-width-ltr-source: physical;
	border-left-width-rtl-source: physical;
	border-top-style: 0px;
	border-right-style-value: 0px;
	border-right-style-ltr-source: physical;
	border-right-style-rtl-source: physical;
	border-bottom-style: 0px;
	border-left-style-value: 0px;
	border-left-style-ltr-source: physical;
	border-left-style-rtl-source: physical;
	border-top-color: transparent;
	border-right-color-value: transparent;
	border-bottom-color: transparent;
	border-left-color-value: transparent;
	border-left-color-ltr-source: physical;
	border-left-color-rtl-source: physical;
	border-right-color-ltr-source: physical;
	border-right-color-rtl-source: physical;
	background: #fff;
	font:black;
    overflow:hidden;
    width: 200px;
}
.hidden{
	display: none;
}

/* Style for Textarea.  Enables text area to auto size based upon
   the input text, or the text that is passed from the controller,
   used in conjunction with readonlyExpandingArea class */
.expandingArea {
  position: relative;
}
.expandingArea > textarea,
.expandingArea > pre {
  padding: 5px;
  background-color: #ffffe6;
  font: 400 13px verdana, arial, helvetica, clean, sans-serif;
  /* Make the text soft-wrap */
  white-space: pre-wrap;
  word-wrap: break-word;
}

.expandingArea > textarea {
  /* The border-box box model is used to allow
   * padding whilst still keeping the overall width
   * at exactly that of the containing element.
   */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  /* This height is used when JS is disabled */
  height: 100px;
}

.expandingArea.active > textarea {
  /* Hide any scrollbars */
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 110%;
  /* Remove WebKit user-resize widget */
  resize: none;
}

.expandingArea > pre {
  display: none;
}
.expandingArea.active > pre {
  display: block;
  /* Hide the text; just using it for sizing */
  visibility: hidden;
}


/* Style for Read Only Textarea, used in conjunction with expandingArea class */
.readonlyExpandingArea {
  position: relative;   
}
.readonlyExpandingArea > textarea,
.readonlyExpandingArea > pre {
  padding: 5px;
  background-color: #fff;
  font: 400 13px verdana, arial, helvetica, clean, sans-serif;
  /* Make the text soft-wrap */
  white-space: pre-wrap;
  word-wrap: break-word;
  border: none;
  background: #fff;
  font:black;
  cursor:default;
  
}

.readonlyExpandingArea > textarea {
  /* The border-box box model is used to allow
   * padding whilst still keeping the overall width
   * at exactly that of the containing element.
   */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  /* This height is used when JS is disabled */
  height: 100px;
}

.readonlyExpandingArea.active > textarea {
  /* Hide any scrollbars */
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* Remove WebKit user-resize widget */
  resize: none;
}

.readonlyExpandingArea > pre {
  display: none;
}
.readonlyExpandingArea.active > pre {
  display: block;
  /* Hide the text; just using it for sizing */
  visibility: hidden;
}

.guardn_error {
	color: #ff0000;
	font-style: italic;
	font-weight: bold;
}