/* ==========================================================================
   tchat.io custom styles
   ========================================================================== */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800);

/*body, html {height: 100%;}*/

html, body {background: url(../img/bg-texture.png) 0 0 repeat;}


body {/* IE9 SVG, needs conditional override of 'filter' to 'none' */ font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-weight: 500;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(238,238,238,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(238,238,238,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(238,238,238,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(238,238,238,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(238,238,238,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6eeeeee', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */
}

.hero-unit {background: none; text-align: center;}

h1, h2, h3, h4, h5 {text-shadow: 0 1px 1px #fff; font-weight: 800;}
h2 {font-weight: 300; color: #c90; font-size: 2em; text-shadow: none;}

.appendedInputButton {padding: .8em !important; width: 40%; box-shadow: 0 0 30px #999;}
form.input-append button {box-shadow: 0 0 20px #999;}
form.input-append {width: 100%; margin-top: 34px !important;}


.navbar .brand {color: #4558e9; font-weight: 400; text-shadow: 0 1px 1px #fff; font-size: 1.75em;}
.navbar .brand span {color: #c90;}

#chat-form {}
#chat-form h3 {margin-top: 0; color: #666; font-weight: 500}
 
.twitter-timeline {width: 100%;}

#chat-icon {margin-top: -24px;} 

/* Landscape phones and down */
@media (max-width: 480px) {
	.hero-unit {padding-top: 1em;}
}

@media (max-width: 550px) {
	.button-bar .nav>li>a {
		padding: 10px 0px;
		text-align: center;
		margin: 0;
	}

	.button-bar ul.nav li a span {
		display: block;
	}

	.button-bar ul.nav {
		/*display: inline-block;*/
		text-align: center;
	}

	.button-bar ul.nav>li {
		display: inline-block;
		float: none;
	}

	.button-bar .divider-vertical {
		margin: 0;
	}

	.button-bar .list-inline {
		width: 100%;
	}

	.button-bar .navbar-inner {
		padding: 0;
	}
}