html, body {
	background-color: #E6E6E6;
}

#debug{
	width: 150px;
	position: absolute;
	left: 20px;
	top: -3px;
	background-color: #fff;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px;
	border-bottom-left-radius:15px;	
	-moz-border-radius-bottomright: 15px;
	-webkit-border-bottom-right-radius: 15px;
	border-bottom-right-radius:15px;	
	border: 1px solid #C34974;
	padding: 20px;
	display: none;
}



.container_12{
	background-color: #fff;
	margin-top: 50px;
	border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border: 5px solid #CCCCCC;
}

#logo {
	margin-top: 90px;
}

#intro {
	margin-top: 90px;
	font: 20px Georgia, "Times New Roman", Times, serif;
	color: #c9c9c9;
	margin-bottom: 10px;
}

.input {
	margin: 0px;
	padding: 0 0 0 10px;
	height: 30px;
	border:1px solid #999999;
	background:#E6E6E6;
	float: left;
	-moz-border-radius-bottomleft: 20px;
	-webkit-border-bottom-left-radius: 20px;
	border-bottom-left-radius:20px;	
	-moz-border-radius-topleft: 20px;
	-webkit-border-top-left-radius: 20px;
	border-top-left-radius:20px;
}

.input:focus {
	border:1px solid #C34974;
	
}
.button {
	color: #ffffff;
	border: none;
	height: 32px;
	margin: 0px;
	float: left;
	background: #999999;
	padding: 0 15px 0 12px;
	-moz-border-radius-bottomright: 20px;
	-webkit-border-bottom-right-radius: 20px;
	border-bottom-right-radius:20px;	
	-moz-border-radius-topright: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-right-radius:20px;	
}
   
.button:hover {
   background: #474747;
   color: #c34973;
}


#username_error {
	padding: 0 0 0 5px;
	color: #C34974;
	text-transform: uppercase;
	font-weight: bold;
	display: none;
}


#ajax-loader {
	z-index: 14;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -28px;
	margin-top: -120px;
	display: none;
	
}

#moodi_face {
	z-index: 10;
	position: absolute;
}

#tweets p{
	font: 20px Georgia, "Times New Roman", Times, serif;
	color: #c9c9c9;
}

#controls {
	margin-top: 70px;
}

#controls ul {
	list-style-type: none;
}


#controls li a#about{
	position: absolute;
	left: 65px;
	width: 30px;
	height: 30px;
	background: url(../img/sprites.png) no-repeat;
	background-position: -190px -10px;
}

#controls li a#about:hover{
	background-position: -190px -50px;
}

#controls li a#about:active{
	background-position: -190px -90px;
}

#controls li a#play{
	position: absolute;
	left: 105px;
	width: 30px;
	height: 30px;
	background: url(../img/sprites.png) no-repeat;
	background-position: -230px -10px;
}

#controls li a#play:hover{
	background-position: -230px -50px;
}

#controls li a#play:active{
	background-position: -230px -90px;
}
#tweetnav ul {
	list-style-type: none;
	display: none;
}


#tweetnavdisable ul {
	list-style-type: none;
}


#tweetnav li a.prev{
	position: absolute;
	width: 80px;
	height: 80px;
	left: -45px;
	background: url(../img/sprites.png) no-repeat;
	background-position: -10px -10px;
}

#tweetnav li a.prev:hover{
	background-position: -10px -100px;
}

#tweetnav li a.prev:active{
	background-position: -10px -190px;
}

#tweetnavdisable li .prev_disable{
	position: absolute;
	width: 80px;
	height: 80px;
	left: -45px;
	background: url(../img/sprites.png) no-repeat;
	background-position: -10px -280px;
	display: none;
}


#tweetnav li a.next{
	position: absolute;
	width: 80px;
	height: 80px;
	right: -45px;
	background: url(../img/sprites.png) no-repeat;
	background-position: -100px -10px;
}

#tweetnav li a.next:hover{
	background-position: -100px -100px;
}

#tweetnav li a.next:active{
	background-position: -100px -190px;
}

#tweetnavdisable li .next_disable{
	position: absolute;
	width: 80px;
	height: 80px;
	right: -45px;
	background: url(../img/sprites.png) no-repeat;
	background-position: -100px -280px;
	display: none;
}





 
/* Z-index of #mask must lower than #boxes .window */
#mask {
	position:absolute;
	z-index:9000;
	background-color:#000;
	display:none;
	margin-top: -50px;
	padding: 0px;
	border: 0px;
}
   
.window {
	display:none;
	position:absolute;
	margin-top: 180px;
	margin-left: 50px;
	width:325px;
	height:150px;
	z-index:9999;
	padding:20px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	background-color: #FFFFFF;
	-moz-box-shadow: 0px 0px 12px #AAA;
	-webkit-box-shadow: 0px 0px 12px #AAA;
	box-shadow: 0px 0px 12px #AAA;
}

 
/* Customize your modal window here, you can add background image too */


.modal_heading {
	font: 20px Georgia, "Times New Roman", Times, serif;
	color: #c9c9c9;
}

.modal_text {
	font: 12px Georgia, "Times New Roman", Times, serif;
	color: #c9c9c9;
}

#controls{
	display: none;
}

#boxes img{
	float: left;
	margin-right: 10px;
}

.close{
	position: absolute;
	right: -10px;
	top: -10px;
	width: 20px;
	height: 20px;
	background: url(../img/close.png) no-repeat;
}

.arrowabout {

	position: absolute;
	left: 15px;
	bottom: -20px;
	width: 40px;
	height: 30px;
	background: url(../img/arrowdown.png) no-repeat;
	
}

.arrowplay {
	position: absolute;
	left: 55px;
	bottom: -20px;
	width: 40px;
	height: 30px;
	background: url(../img/arrowdown.png) no-repeat;
	
}


.playbutton {
	margin-top: 15px;
	position: absolute;
	left: 20px;	
	color: #ffffff;
	border: none;
	width: 70px;
	margin: 0px;
	background: #999999;
	padding: 5px 8px 5px 15px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius:20px;
	text-decoration: none;
	display: none;
}

.playbutton:hover {
   background: #474747;
   color: #c34973;
}


.playbuttonimage {
	width: 20px;
	height: 20px;
	float: right;
	background: url(../img/sprites.png) no-repeat;
	background-position: -270px -10px;
}

.playbutton:hover .playbuttonimage {
	background-position: -270px -40px;
}

.playbutton:active .playbuttonimage {
	background-position: -270px -70px;
}
#play ul {
	list-style-type: none;
}