/* @group reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

td, th {
	vertical-align: top;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* @end */

html, body {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

body{
	font:12px "Trebuchet MS", sans-serif;
	color:#8e8b8b;
	background:#fff;
	overflow:hidden;
}

body.loading {
	cursor: wait;
}

body.loading * {
	cursor: wait;
}

/* @group layout helpers */

br.clear{
	clear:both;
	font-size:0;
	line-height:0;
}

.alignLeft {
	float:left;
}

.alignRight {
	float:right;
}

/* @end */

/* @group basic text elements */

a,
.ui-widget-content a {
	color:#1d8cca;
	text-decoration:none;
}

a img{
	border:none;
}

h2{
	font-size:19px;
	color:#444444;
	padding:25px 0 15px 0;
}

h2.noPadding{
	padding:0 0 15px 0;
}

h2.green {
	color:#6f9d19;
}

h3.noPadding{
	padding:0;
}

h2 a, h2 em{
	font-size:15px;
}

h2.videoHeader a {
	font-size:19px;
}

h2 em{
	color:#a79d9d;
}

h3{
	font-size:14px;
	padding-bottom:10px;
}

h4{
	font-size:12px;
	margin-bottom:10px;
}

small{
	font-size:11px;
}

small a,
.ui-widget-content small a {
	color:#1d8cca;
	text-decoration: underline;
}

/* @end */



input.text{
	height:18px;
	padding:5px;
	border-top:1px solid #8b9293;
	border-left:1px solid #8b9293;
	border-right:none;
	border-bottom:none;
	font:13px "Trebuchet MS";
	color:#b3b1b1;
	vertical-align: middle;
}




textarea{
	border-top:1px solid #8b9293;
	border-left:1px solid #8b9293;
	border-right:none;
	border-bottom:none;
	font:13px "Trebuchet MS";
	color:#303030;
	padding:5px;
	padding-right: 30px;
}

input[type=checkbox],
input[type=radio] {
	vertical-align: middle;
}

input.submit, a.button, input.button, button.button {
	height:28px;
	padding:4px 5px 4px 5px;
	background:#68b1d9;
	border:1px solid #4590b7;
	font:12px "Trebuchet MS";
	color:#fff;
	cursor: pointer;
	vertical-align: middle;
	border:1px solid #68b1d9;
}

input.ajaxWorking,
a.ajaxWorking {
	background-color:#DADADA;
	background-image:url(/images/ajax-loader-small.gif);
	background-position:3px center;
	background-repeat:no-repeat;
	padding-left:24px;
}

label{
	color:#1d8cca;
	vertical-align: middle;
}

label.grey {
	color:#222222;
}

label.group{
	display:block;
	margin: 5px 0 5px 0;
	position: absolute;
	left: -184px;
	zoom:1;
}
div.group {
	position: relative;
}

.ui-widget-content label.grey a  {
	color:#1d8cca;
}

/* @end */

/* @group user guides */

.error {
	background-color:#FEFFDA;
	color:#D72828;
	padding: 7px 0;
	text-align: center;
	display: block;
	height: 18px;
	border-bottom: 1px solid #D72828;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	z-index: 80;

}

#WaitMessage {
	padding: 3px 0 0;
	display: block;
	position: absolute;
	text-align: center;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	font-size: 11px;
}

#FollowLink {
	height: 35px;
	line-height: 35px;
	display: block;
	position: absolute;
	text-align: center;
	top: 22px;
	left: 50%;
	margin-left: -200px;
	z-index: 100;
	width: 185px;
	padding: 0 80px 0 135px;
	font-size: 18px;
	background: #f4f4f4;
}

#FollowLink .label {
	width: 135px;
	font-size: 14px;
	background: #b8becc;
	color: #fff;
	height: 35px;
	line-height: 35px;
	display: block;
	position: absolute;
	left: 0;
	top:0;
	text-align: center;

}
#FollowLink .label b {
	width: 0px;
	height: 0px;
	position: absolute;
	right: -9px;

	border-top: 17px transparent dotted;
	border-right: 0px transparent dotted;
	border-left: 9px #b8becc solid;
	border-bottom: 18px transparent dotted;
}

#FollowLink button {
	position: absolute;
	right: 2px;
	top: 2px;
	width: 80px;
}
#FollowLink button:active {
	top: 3px;
}

.confirm {
	padding: 0 5px 0 0;
}

span.info,
strong.warning {
	display: block;
	width: 80%;
	margin: 5px 0 0 0;
	padding: 0 0 0 5px;
}

strong.warning {
	color:#D72828;
}

/* @end */



#Loading {
	position: absolute;
	height: 12px;
	border-top: 2px solid #68B1D9;
	width: 100%;
	z-index: 89;
	display: none;
	top: 44px;
}
#Loading small {
	background: #68B1D9 none repeat scroll 0 0;
	font-size: 9px;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	width: 52px;
	display: block;
	text-align: center;
	position: absolute;
	z-index: 100;
	left: -52px;

	height: 12px;
	top: -2px;

	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;

	box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
	-moz-box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
}


#Cpanel {
	position: relative;
	background: #eaebef;
	border-bottom: 1px solid #c4c6ca;
	padding: 9px 7px;
	z-index: 90;
	white-space: nowrap;
}
#Cpanel {
	padding: 4px 7px;
}

#Cpanel span.usermask {
	font:13px "Trebuchet MS";
	color:#b3b1b1;

	position: absolute;

	left: 14px;
		left /*\**/: 13px\9; /*ie8*/
		_left: 13px;
		*left: 13px;
	top: 11px;
		top /*\**/: 10px\9; /*ie8*/
		_top: 11px;
		*top: 11px;
}

@media screen and (-webkit-min-device-pixel-ratio:0){
	#Cpanel span.usermask {
		left: 13px;
		top: 10px;
	}
}
#Cpanel span.usermask span {
	color:#1D8CCA;
}


#Cpanel span.counter {
	font:11px "Trebuchet MS";
	color:#b3b1b1;
	padding:7px;
	position: absolute;
	top: 33px;
	right: 17px;
		right /*\**/: 24px\9; /*ie8*/
		_right: 24px;
		*right: 24px;
	text-align: right;
}

#Cpanel span.warning {
	color: red;
}

#Cpanel textarea {
	margin-bottom: 5px;
	height: 40px;
}

#Cpanel label {
	display: inline-block;
	height: 21px;
	line-height: 21px;
	padding: 7px 3px;
	cursor: pointer;
	position: relative;

}

 label span {
	display: inline-block;
	height: 22px;
	width: 21px;
	position: relative;
	top: -1px;

	vertical-align: middle;
	box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
	-moz-box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow:1px 1px 1px rgba(0, 0, 0, 0.15);


}

 label.active span {
	margin-right: 4px;
}


 label.twitter span {
	background: url(/images/socialstream/sprite.png) 0 -30px no-repeat;
}
 label.facebook span {
	background: url(/images/socialstream/sprite.png) -29px -30px no-repeat;
}
 label.aim span {
	background: url(/images/socialstream/sprite.png) -57px -30px no-repeat;
}
 label.myspace span {
	background: url(/images/socialstream/sprite.png) -85px -30px no-repeat;
}
 label.twitter:hover span,
 label.active.twitter span {
	background: url(/images/socialstream/sprite.png) 0 0 no-repeat;
}
 label.facebook:hover span,
 label.active.facebook span {
	background: url(/images/socialstream/sprite.png) -29px 0 no-repeat;
}
 label.aim:hover span,
 label.active.aim span {
	background: url(/images/socialstream/sprite.png) -57px 0 no-repeat;
}
 label.myspace:hover span,
 label.active.myspace span {
	background: url(/images/socialstream/sprite.png) -85px 0 no-repeat;
}

#Cpanel label strong {
	display: none;
	position: absolute;
	color: #fff;
	background:#303540;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	font-weight: normal;
	font-size: 11px;
	padding: 0 5px;
	top: 40px;
	left: -65px;
	width: 70px;
	text-align: center;

}

#Cpanel label strong b {
	display: block;
	position: absolute;

	/*margin-left: -6px;*/

	height: 0;
	width: 0;

	border-right: 0px transparent dotted;
	border-top: 0px transparent dotted;
	border-left: 8px transparent dotted;
	border-bottom: 10px #303540 solid;
	top: -8px;
	right:0;


}

#Cpanel .loggedin label strong {
	margin-left: 17px;
}

#Cpanel label:hover strong {
	display: block;
}

#Cpanel label.active:hover strong {
	display: none;

}
#Cpanel label.active:hover strong em {
	font-weight: bold;
	font-style: normal;
}
#Cpanel label.active:hover strong b {
	margin-left: -20%;
}

#Cpanel .loggedin p {
	color: #1D8CCA;
	margin-left: 10px;
	cursor: pointer;
	margin-left:20px;
}
#Cpanel .loggedin p.active {
	padding:5px 10px 13px;
	color: #fff;
	margin-left:9px;
	border-radius-topleft:3px;
	border-radius-topright:3px;
	-webkit-border-radius-topleft:3px;
	-webkit-border-radius-topright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
}

#Cpanel span#SettingsToggle {
	float: right;
	display: inline-block;
	height: 21px;
	line-height: 21px;
	padding: 5px;
	color:#1d8cca;
	text-decoration:none;
	cursor: pointer;
}

#Cpanel label.active {
	padding: 6px 6px;
	background:#dcdde0;
	border: 1px solid #f5f5f7;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#Cpanel input.password,
#Cpanel input.text {
	vertical-align:middle;
	border: 1px solid #ebebeb;
	border-top: none;
	padding: 3px 0 0 0;
	height: 17px;
	font-size: 11px;
	color:#B3B1B1;
	width: 90px;
	position: relative;
	top: -1px;
}

#Cpanel .loggedin label input.password,
#Cpanel .loggedin label input.text {
	width: 67px;
}

#Cpanel label input.password {
	margin-left: 4px;
}

#Cpanel input.default {
	font-style: italic;
}

button {
	height: 30px;
	padding: 0 5px;
	vertical-align: middle;
	font-size: 11px;
	background:#68B1D9 ;
	color: #fff;
	border: 0;

	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;

	box-shadow:1px 1px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.15);

	position: relative;
	margin-left: 4px;
}

#Cpanel label button {
	height: 21px;
	position: relative;
	top: -1px;
}

#Cpanel button:active {
	top: 1px;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

#Cpanel p {
	display: inline;
	color: #2e323d;
}

div#Settings {
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 120px;
	left: 0;
	z-index: 88;
	background:#dcdde0;
	border-bottom: 1px solid #f5f5f7;
	box-shadow:0px 4px 8px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:0px 4px 8px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:0px 4px 8px rgba(0, 0, 0, 0.25);
}
div#Settings div.in {
	padding: 16px 10px 10px 22px;
}

div#Settings div.in label {
	color:#fff;
	display: block;
	margin-bottom: 2px;
}

div#Messages {
	overflow: auto;
	position: relative;
	background: #dfe1e6;
	height: 80%;
}

div#Messages ul {
	display: block;
	padding: 9px;
}

div#Messages ul li {
	min-height: 46px;
	padding-left: 64px;
	position: relative;
	margin-bottom: 6px;
	overflow: hidden;
	display: block;
}

div#Messages ul li.intro {
	padding-left: 0;
}

div#Messages ul li.demo {
	opacity: .4;
	-moz-opacity: .4;
	-webkit-opacity: .4;
	filter: Alpha(opacity=40);
}

div#Messages ul li a.img {
	border: 2px solid #fff;
	background: #fff;
	height: 40px;
	width: 48px;
	display: block;
	overflow: hidden;

	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -22px;


	box-shadow:0 1px 1px rgba(0, 0, 0, 0.15);
	-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.15);

}

div#Messages ul li a.img img {
	top: 50%;
	left: 50%;
	position: absolute;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
}

div#Messages ul li span {
	padding: 7px 9px;
	display: block;
	background: #fff url(/images/socialstream/msg_bg.png) bottom center repeat-x;
	border: 1px solid #aaacb1;

	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;

	line-height: 16px;
	font-size: 13px;

	color: #303030;

	position: relative;
}

div#Messages ul li.intro span {
	min-height: 48px;
	padding-right: 208px;
	font-size: 11px;
	line-height: 15px;

}
div#Messages ul li.intro span strong {
	line-height: 20px;
}
div#Messages ul li.intro span img {
	position: absolute;
	right: 11px;
	top: 14px;
}

div#Messages ul li span strong {
	font-size: 14px;
}
div#Messages ul li span small {
	display: block;
	padding-top: 4px;
	font-style: italic;
	color: #808080;
	font-size: 10px;
}
div#Messages ul li.broadcaster span small em,
div#Messages ul li span small em {
	display: inline;
	position: relative;
	border: none;
	left: auto;
	right: auto;
	top: auto;
	margin: 0;
}

div#Messages ul li span small i {
	display: inline-block;
	width: 14px;
	height: 14px;
	vertical-align: middle;
	margin-left: 3px;
}

div#Messages ul li span small i.twitter {  background: url(/images/socialstream/sprite.png) -3px -60px no-repeat; }
div#Messages ul li span small i.facebook { background: url(/images/socialstream/sprite.png) -34px -60px no-repeat; }
div#Messages ul li span small i.aim {      background: url(/images/socialstream/sprite.png) -60px -60px no-repeat; }
div#Messages ul li span small i.myspace {  background: url(/images/socialstream/sprite.png) -89px -60px no-repeat; }

div#Messages ul li span small i.delete {  background: url(/images/socialstream/sprite.png) -115px -34px no-repeat; }
div#Messages ul li span small i.ban {  background: url(/images/socialstream/sprite.png) -115px -60px no-repeat; }

div#Messages ul li span small i.delete,
div#Messages ul li span small i.ban {
	position: absolute;
	cursor: pointer;
	display: none;
}

div#Messages ul li:hover span small i.delete,
div#Messages ul li.alert span small i.delete,
div#Messages ul li:hover span small i.ban,
div#Messages ul li.alert span small i.ban {
	display: inline-block;
}

div#Messages ul li span small i.delete {
	bottom: 5px;
	right: 22px;
}
div#Messages ul li span small i.ban {
	bottom: 6px;
	right: 6px;
}


div#Messages ul li.broadcaster span small i.delete {
	right: 69px;
}

div#Messages ul li em {
	display: block;
	position: absolute;

	left: 53px;
	top: 50%;
	margin-top: -7px;


	height: 0;
	width: 0;

	border-right: 12px #aaacb1 solid;
	border-bottom: 6px transparent dotted;
	border-left: 0px transparent dotted;
	border-top: 6px transparent dotted;
}

div#Messages ul li em b {
	display: block;
	position: absolute;
	height: 0;
	width: 0;
	left: 2px;
	top: -5px;

	border-right: 10px #fff solid;
	border-bottom: 5px transparent dotted;
	border-left: 0px transparent dotted;
	border-top: 5px transparent dotted;
}

/* message hover stage */

div#Messages ul li.hover span,
div#Messages ul li:hover span {
	background: #eeeeef url(/images/socialstream/msg_bg_over.png) bottom center repeat-x;
}

div#Messages ul li.hover em b,
div#Messages ul li:hover em b {
	border-right: 10px #eeeeef solid;
}

/* message new stage */
div#Messages ul li.new span {
	background: #e1e8f3 url(/images/socialstream/msg_bg_over.png) bottom center repeat-x;
}
div#Messages ul li.new em b {
	border-right: 10px #e1e8f3 solid;
}

div#Messages ul li.new.broadcaster em b {
	border-left: 10px #e1e8f3 solid;
}

/* message broadcaster owner stage */
div#Messages ul li.broadcaster {
	padding-left: 0px;
	padding-right: 64px;
}
div#Messages ul li.broadcaster a.img {
	left: auto;
	right: 0;
}

div#Messages ul li.broadcaster em {
	left: auto;
	right: 53px;
	border-left: 12px #aaacb1 solid;
	border-bottom: 6px transparent dotted;
	border-right: 0px transparent dotted;
	border-top: 6px transparent dotted;
}

div#Messages ul li.broadcaster em b {
	left: auto;
	right: 2px;
	top: -6px;
	border-left: 10px #fff solid;
	border-bottom: 5px transparent dotted;
	border-right: 0px transparent dotted;
	border-top: 5px transparent dotted;
}

div#Messages ul li.broadcaster:hover em b {
	border-left: 10px #eeeeef solid;
}

/* message alert stage */
div#Messages ul li.alert span {
	background: #FEFFDA none bottom center repeat-x;
}
div#Messages ul li.alert em b {
	border-right: 10px #FEFFDA solid;
	border-left: 0px transparent dotted;
}
div#Messages ul li.broadcaster.alert em b {
	border-left: 10px #FEFFDA solid;
	border-right: 0px transparent dotted;
}