@charset "utf-8";

body
{
	background-color: black;
	background-image:url(../images/bg-texture2.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-origin:border-box;
	width: 100%;
	height: 100%;
	font-family: 'Audiowide', cursive;
/*	font-family: "Comic Sans MS", cursive, sans-serif;*/
}

nav
{
	text-align: center;
	position: relative;
	left: 0;
	top: 0;
	color: red;
	background: white;
	height: 2em;
	width: 1314px;
}

nav ul
{
  list-style: none;
  padding: 0;	
}

nav > ul > li
{
	float: left;
	margin: 0 3em;
}

#SmallFlashPlayer
{
	position: relative;
	top: 10em;
	left: 50em;
}

/*#topnav a:link, a:visited 
{
	color: red;
	text-decoration: none;
	cursor: auto;
}

#topnav a:link:active, a:visited:active 
{
	color: blue;
	cursor: auto;
}

#topnav a:link:hover
{
		color: green;
		cursor: auto;
}*/
/* unvisited link */
a:link {
	color: red;
	text-decoration: none;
}

/* visited link */
a:visited {
    color: purple;
}

/* mouse over link */
a:hover {
    color: green;
}

/* selected link */
a:active {
    color: pink;
}
/*http://bennettfeely.com/flexplorer/*/
.row1
{
/*	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;*/
}

/*.row1 .cell1 { -webkit-flex: 2 none; flex: 2 none; }
.row1 .cell2 { -webkit-flex: 3 none; flex: 3 none; }
.row1 .cell3 { -webkit-flex: 1 none; flex: 1 none; }	*/
			
#TwirlLogo
{
	border: 5px solid #940BFF;
	transition-delay: 10ms;
	transition-duration: 1.5s;
	border-radius: 20px / 15px;
	margin: 5px;
	box-shadow: 0px 0px 10px 5px violet;
}

#TwirlLogo:hover
{
	transition-duration: 1.5s;
	transform: rotate(360deg);
	opacity: 0;
}

#TwirlLogo 
{
	position: relative;
	top: 2px;
	opacity: 0.5;
	-webkit-animation-duration: 5000ms;
	-o-animation-duration: 5000ms;	
	-moz-animation-duration: 5000ms;	
	animation-duration: 5000ms;
		
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
		
	-webkit-animation-direction: alternate;
	-o-animation-direction: alternate;		
	-moz-animation-direction: alternate;	
	animation-direction: alternate;	


	-webkit-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	-moz-animation-timing-function: linear;	
	animation-timing-function: linear;	


	-webkit-animation-name: Throb;
	-moz-animation-name: Throb;	
	-o-animation-name: Throb;
	animation-name: Throb;
}

@-webkit-keyframes Throb 
{
to 
	{
		opacity: 1;
	}
}

@-o-keyframes Throb
{
to 
	{
		opacity: 1;
	}
}

@-moz-keyframes Throb 
{
to 
	{
		opacity: 1;
	}
}

@keyframes Throb 
{
to 
	{
		opacity: 1;
	}
}

#fbLogo
{
	position: relative;
	bottom: 0.9em;
	left: 1em;
}

p
{
	width: 1294px;
	position: relative;
	left: 0;
	padding: 10px;
	background-color: indigo;
	color: lightgreen;
	opacity: 0.85;
	border: thin solid green;
	font-weight: lighter;
	border-radius: 10px / 10px;  /* Top left, top right, bottom right, bottom left.*/
	box-shadow: 5px 4px 10px 2px gray;
	line-height: normal;
	white-space:normal;
}

#promoimage
{
	position: relative;
	top: 0;
	left: 0;
	height: 212px;
	width: 100%;
	background-color: purple;
}

.imgalign
{
		position:absolute;
		left: 0px;
		top: 0px;
}

#istats
{
	width: 100%;
	height: 100%;
}

.twitter-timeline
{
	height: 100%;
	position:relative;
}

#playButton
{
	background: green;
	width: 0%; 
	height: 0%;
	padding: 0;
	margin: 0;
	border-radius: 20px / 15px;
	font-size: xx-large;
	visibility: hidden;
}

#suggestions
{
	list-style-image: url('../images/Twirl3aiTiny.png');
	padding: 10px;
	white-space: normal;
	border: thin solid black;
	list-style-type: none;
	position: relative;
	left: 0;
	top: 0.75em;
	width: 1312px;
}

#suggestions > li.inside 
{
	list-style-position: inside;
	background-color: green;
	
}

.inside
{
	background-color: green;
	color: purple;
	left: 283px;

}

footer
{
	color: yellow;
	padding: 2px;
	margin: 1em;
	width: 1300px;
}

.mytable
{
	display: table;
	table-layout: fixed;
	width: 1314px;
	height: 100%;
	margin: 0;
	padding: 0;
	border-collapse:collapse;
}

.tablecaption
{
	display: table-caption;
	color: yellow;
}


.tableheader
{
	display: table-header-group;
	color: green;
}

.colgroup
{
	display: table-column-group;
}

.column1
{
	display: table-column;
	width: 40%;
}

.column2
{
	display: table-column;
	width: 30%;
}

.column3
{
	display: table-column;
	width: 30%;
}

.myrow
{
	display: table-row;

}

.row1
{
	background-color: black;
}

.row1 .cell1
{
	background-color: red;
}

.row1 .cell2
{
}

.row1 .cell3
{
	background-color: green;
}

.row2
{
/*	background-color: orange;*/

}

.row2 .cell1
{
	vertical-align: middle;
	padding: 1em;
	margin:0;
	/* gradients */
  background: -webkit-linear-gradient(left, gray , pink); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, gray, pink); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, gray, pink); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, gray , pink); /* Standard syntax */
}

.row2 .cell2
{
	background-color: brown;
	padding: 0px;
	margin: 0px;
	border: 0;
	font-size: 0;
	vertical-align: top;
	  /* http://stackoverflow.com/questions/4760002/how-to-remove-image-padding-that-is-showing-up-unintentionally */
}

.row2 .cell3
{
	padding: 0px;
	margin: 0px;
	font-size: 0;	
}

.row3
{
/*	background-color:green;*/
}

.row3 .cell3
{
	background-color: purple;
	color: green;
	border: 0px solid black;
	vertical-align: middle;
	padding: 0em;
}

.mycell
{
	display: table-cell;
}


}
/* CSS Document */