/*
=========================================
   J! Reactions CSS Template: BALLOONS
 Prepared and issued by SDeCNet Software
=========================================

NOTE--The following elements are listed in their actual generating order to assist your styling */

/* ------------
   Main Styling
   ------------ */

/* Master container for ALL comment and form elements */
#jreact_wrap {
	background-color:#FFFFFF;
	border:none;
	font-size:1.0em;
	padding:0px;
	width:432px /* maximum width for default Joomla! template */
}

/* styling for LANG_INTRO_0, LANG_INTRO_1 and LANG_INTRO_2 */
td.jreact_intro_0, td.jreact_intro_1, td.jreact_intro_2 {
	height:16px;
	padding-bottom:6px !important;
	padding-top:6px !important;
	padding-left:48px !important;
	text-align:left;
	vertical-align:middle;
}

td.jreact_intro_0 {
	background: transparent url(../../../images/frontend/intro_0.png) no-repeat;
	background-position:24px 6px;
}

td.jreact_intro_1, td.jreact_intro_2 {
	background: transparent url(../../../images/frontend/intro_1.png) no-repeat;
	background-position:24px 6px;
}

/* The software footer (must be displayed in Free Edition) */
#jreact_footer {
	display:none;
	text-align:center;
}

/* Apply to all footer elements */
span#software, span#license, span#copyright {
	font-family:'ms sans-serif',sans-serif,arial,helvetica;
	font-size:10px;
	padding:6px;
}

/* Separate styling... */
span#software { color:#000000; font-weight:bold; }
span#license { color:#404040; }
span#copyright { color:#606060; }


/* ------------
   Form Styling
   ------------ */

/* Optional hide/show toggle */
a#showForm {
	background-color:#E0E0E0;
	background-position:top right;
	border:1px solid #C0C0C0;
	color:#404040;
	display:block;
	margin:9px;
	padding:6px;
	text-align:center;
	width:100%;
 }

a#showForm:hover {
	background-color:#FFFFE0;
	border:1px solid #A0A0A0;
	text-decoration:none;
}

/* Submit form client object */
form#jreact_form {
	margin:0px;
	padding:0px;
	width:100%;
}

/* Table wrapper for the submit form */
table#jreact_contentpane {
	margin:0px;
	padding:0px;
	width:100%;
}

/* The first table cell is used as a heading for the submit form;
   this is also the destination for LANG_FORM_OPEN, LANG_FORM_CLOSED and LANG_FORM_RESTRICTED */
td#jreact_contentheading {
	padding-top:6px;
	padding-bottom:9px;
	text-align:center;
}

td.jreact_label {}

/* Apply to all three types of text fields: normal, locked (disabled) and required */
input.textbox, input.locked, input.required {
	border:1px solid #808090;
	width:100%;
}

/* This allows you to style locked/disabled fields */
input.locked {
	background-color:#E0E0E0;
	color:#606060;
}

/* This allows you to style mandatory fields */
input.required {
	background-color:#FFE080;
	color:#000000;
}

/* Optional toolbars for enhancement icons */
td#jreact_bbcodes, td#jreact_smileys {text-align:left}

/* Just the table cell for bb-codes */
td#jreact_bbcodes {}

/* Just the table cell for smileys */
td#jreact_smileys {}

/* The color droplist */
td#jreact_bbcodes select {
	font-size:11px;
	height:24px;
	margin:0px;
}

/* Optional smiley images */
img.jreact_smiley {
	border:none;
	margin:3px;
	vertical-align:middle;
}

/* Optional bbcode icons (with hover effect) */
#jreact_bbcode01 {background:transparent url('bbcodes/bbc_bold.png') no-repeat;}
#jreact_bbcode02 {background:transparent url('bbcodes/bbc_italic.png') no-repeat;}
#jreact_bbcode03 {background:transparent url('bbcodes/bbc_underline.png') no-repeat;}
#jreact_bbcode04 {background:transparent url('bbcodes/bbc_list.png') no-repeat;}
#jreact_bbcode05 {background:transparent url('bbcodes/bbc_code.png') no-repeat;}
#jreact_bbcode06 {background:transparent url('bbcodes/bbc_quote.png') no-repeat;}
#jreact_bbcode07 {background:transparent url('bbcodes/bbc_image.png') no-repeat;}

#jreact_bbcodes a {
	background-position:0px 0px;
	display:block;
	float:left;
	height:20px;
	width:20px;
	margin:1px;
	vertical-align:middle;
}

#jreact_bbcodes a:hover {
	background-position:0px -20px;
	display:block;
	float:left;
	height:20px;
	width:20px;
}

textarea#jreact_text {
	background:#FFFFFF url('watermark.png') no-repeat;
	background-position:50% 50%;
	color:#000000;
	width:100%;
}

td#jreact_clicksubmit {
	text-align:center;
}

/* ----------------
   Comments Styling
   ---------------- */

/* Main heading for comment list */
div.comHeading {
	font-size:13px;
	font-style:italic;
	margin-top:20px;
	margin-bottom:20px;
	text-align:center;
}

/* Optional hide/show link */
a#showComments {
	background-color:#E0E0E0;
	background-position:top right;
	border:1px solid #C0C0C0;
	color:#404040;
	display:block;
	margin:9px;
	padding:6px;
	text-align:center;
	width:100%;
 }

a#showComments:hover {
	background-color:#E0E0FF;
	border:1px solid #A0A0A0;
	text-decoration:none;
}

/* Parent container for each individual comment */
div.comWrap00, div.comWrap01 {
	background-image:url(wrap_main.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	margin-bottom:12px;
	text-align:justify;
	vertical-align:middle;
	width:100%;
}

div.comWrapTop {
	background:transparent url(wrap_top.png) no-repeat;
	background-position:left top;
	padding:0px 0px 0px 10px;
}

div.comWrapRight {
	background:transparent url(wrap_right.png) no-repeat;
	background-position:right bottom;
	padding:0px 0px 10px 0px;
}

div.comWrapCorner {
	background:transparent url(wrap_corner.png) no-repeat;
	background-position:right top;
	padding:10px 10px 0px 0px;
}

/* The top region of each comment */
div.comHead {
	border-bottom:1px solid #CCCCCC;
	display:block;
	height:20px;
	padding-bottom:4px;
}

span.comFunctions img {
	border:none;
	float:right;
	margin-left:6px;
}

span.comID {
	color:#999999;
	font-size:10px;
}

span.comTitle {
	font-size:12px;
	font-weight:bold;
}

/* The comment text body */
div.comBody {
	border-top:2px solid #FFFFFF;
	line-height:125%;
	padding-top:6px;
	text-align:left;
}

div.comExtra {
	text-align:right;
}

div.comExtra img {
	border:none;
	padding-left:-4px;
}

/* The bottom region of each comment */
div.comFoot {
	display:block;
	height:24px;
	line-height:24px;
	padding:0px 0px 0px 32px;
}

span.comSignature {
	color:#666666;
	vertical-align:bottom;
}

/* Code style */
div.code_block {
	background-color:#F0F0F0;
	border:1px solid #E0E0E0;
	color:#008000; /* shade of green */
	font-family:"Courier New", Courier, monospace;
	font-size:11px;
	margin:9px;
	padding:9px;
}

/* The next three elements underly our custom quote blocks */
div.quote_open {
	background:#F0F0F0 url('quote_open.png') no-repeat;
	background-position:7px 7px;
	border:1px solid #E0E0E0;
	display:block;
	margin:12px;
	padding-left:30px;
	padding-right:6px;
	padding-top:9px;
	padding-bottom:6px;
}
div.quote_close {
	background:transparent url('quote_close.png') no-repeat;
	background-position:right bottom;
	color:#606060;
	display:block;
	font-size:11px;
	font-style:italic;
	margin-bottom:6px;
	padding-right:24px;
	text-align:justify;
}
span.cite {
	background-color:transparent;
	color:#606060;
	display:block;
	font-size:11px;
	font-weight:bold;
	text-align:right;
}