/* If you want to write your own style, I'll list the classes here to make it easier for you.

	Container: #yshout

	Form: <form id="ys-post-form"><fieldset>
					<input id="ys-input-nickname" value="' + this.prefs.defaultNickname + '" type="text" class="ys-before-focus" />
					<input id="ys-input-message" value="' + this.prefs.defaultMessage + '" type="text" class="ys-before-focus" />
					<input id="ys-input-submit" value="' + this.prefs.defaultSubmit + '" type="button" />
					<a title="Launch Admin CP" id="ys-cp-launch" href="#">Admin CP</a>
				</fieldset></form>
				
	After the first focus, the class on the inputs changes to ys-after-focus.

	Post: <div class="ys-post (depending on the post also ys-admin-post and ys-banned-post)">
		<span class="ys-post-timestamp">00:00</span>
		<span class="ys-post-nickname">Nickname:</span>
		<span class=" ys-post-message">Message</span> ' +
		<span class="ys-post-info (ys-info-overlay or ys-info-inline)"><em>IP:</em> 127.0.0.1 <em>Posted:</em> August 30th, 2006</span>
		<span class="ys-admin-actions"><a title="Show post information" class="ys-info-link" href="#">Info</a> | <a title="Ban" class="ys-ban-link" href="#">Ban</a></span>
	</div>

*/


/* Basic
------------------------------------- */

#yshout {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
width:170px;
color:#36393D;
overflow:hidden;
line-height:1.5;
margin-right:auto;
margin-left:auto;
background-color:#FAF3ED;
border:1px solid #CCCCCC;
margin-bottom:10px;
padding:3px;
}

#yshout * {
margin:0;
padding:0;
}

#yshout fieldset {
border:none;
}

#yshout em {
font-style:normal;
font-weight:700;
}

#yshout a {
color:#D01F3C;
text-decoration:none;
border-bottom:1px dotted #CCC;
}

#yshout a:hover {
border-bottom-style:solid;
color:#86041E;
}

#yshout img {
border-top-style:none;
border-width:0;
margin:0 2px;
padding:0;
}

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

#yshout #ys-post-form {
margin-top:5px;
background-color:#919191;
padding:10px;
}

#yshout #ys-input-nickname {
width:150px;
margin-right:auto;
margin-left:auto;
}

#yshout #ys-input-message {
width:150px;
margin-right:auto;
margin-left:auto;
}

#yshout #ys-input-submit {
width:80px;
display:block;
padding:0;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#yshout .ys-before-focus {
color:gray;
}

#yshout .ys-after-focus {
color:#000;
}

#yshout .ys-input-invalid {
background:#FFFEE9;
}

/* Posts
------------------------------------- */
#yshout .ys-post {
position:relative;
border-bottom:1px solid #FAFAFA;
margin-bottom:1px;
padding:3px 5px;
}

#yshout .ys-post.ys-banned-post .ys-post-message,#yshout .ys-post.ys-banned-post .ys-post-message a,#yshout .ys-post.ys-banned-post .ys-post-nickname {
color:#BEBEBE;
text-decoration:line-through;
}

#yshout .ys-post-timestamp {
color:#979797;
font-size:11px;
}

#yshout .ys-post-nickname {
font-weight:700;
}

#yshout .ys-admin-actions {
position:absolute;
top:0;
right:0;
padding-top:5px;
padding-left:5px;
background:#fff;
color:#979797;
font-size:11px;
z-index:50;
display:none;
filter:alpha(opacity=95);
-moz-opacity:0.95;
opacity:0.95;
}

#yshout .ys-post:hover .ys-admin-actions {
display:block;
}

#yshout .ys-info-overlay {
display:none;
position:absolute;
z-index:49;
width:100%;
height:100%;
top:0;
left:0;
filter:alpha(opacity=90);
-moz-opacity:0.90;
opacity:0.90;
color:#36393D;
background-color:#F9F7ED;
padding:3px 5px;
}

#yshout .ys-info-inline {
display:none;
}

#yshout .ys-admin-post .ys-post-nickname {
padding-left:13px;
background-image: url(../yshout/images/star.gif);
background-repeat: no-repeat;
background-position: 0 2px;
}

/* Control Panel
------------------------------------- */

#ys-cp-overlay {
position:absolute;
z-index:100;
width:100%;
height:100%;
top:0;
left:0;
background-color:#36393D;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}

#ys-cp-close {
font-family:Arial, sans-serif;
color:#F9F7ED;
font-size:12px;
text-decoration:none;
padding:3px 5px;
}

#ys-cp-close:hover {
text-decoration:underline;
}

* html body {
height:100%;
width:100%;
}

#ys-cp #cp-browser {
border:none;
z-index:102;
overflow:auto;
height:440px;
width:620px;
background-color:#F9F7ED;
}

#ys-cp {
z-index:102;
position:absolute;
margin-top:-220px;
margin-left:-310px;
top:50%;
left:50%;
height:440px;
width:620px;
}

/*
#yshout #ys-posts {
overflow: auto;
height: 250px; 
}
*/