main.css

*:focus { outline: none !important; }
* { margin: 0px; padding: 0px; }

html { overflow-x: hidden; overflow-y: scroll; overflow: -moz-scrollbars-vertical; }
html, body { width: 100%; }

body {
	background: #efefef; 
	font:  11px 'lucida grande', tahoma, verdana, arial, sans-serif; 
	color: #666;
	margin-bottom: 20px;
}	

header, footer, aside, nav, article, section { display: block; } 

a         { color: #666; text-decoration: none; }
a:hover   { color: blueviolet; }
a:active  { outline: none; }
a:focus   { -moz-outline-style: none; }

p a { color: blueviolet !important; }

button::-moz-focus-inner {
  border: 0;
}

input { 
  color: #666; font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif; 
}
input:focus, button:focus { outline: 0; }
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : 0px; }

#notices {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 300px;
}
#notices aside {
  display: block;
  margin-bottom: 10px;
  text-shadow: 1px 1px #222;
  -moz-text-shadow: 1px 1px #222;
  -webkit-text-shadow: 1px 1px #222;
  color: #fff;
  background: #333;
  background: -moz-linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.8)) !important;
  background: -webkit-linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.8)) !important;
  width: 200px;
  padding: 10px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
	border: groove 2px #555;
}
#notices aside a {
  color: blueviolet !important;
}

#main {
  display: none;
  width: 500px;
  margin: 0 auto;
  margin-top: 200px;
}

h1 { 
  height: 90px;
  display: block;
  cursor: default; 
  font: 60px 'Pacifico';
  text-align: center; 
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  -webkit-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  -moz-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
h1 a { 
  text-decoration: none; 
  color: #464646; 
  padding: 0 8px; 
}
h1 a:hover { 
  text-decoration: none; 
  color: blueviolet; 
}

h2 {
  font-size: 26px;
  margin-top: 10px;
  margin-bottom: 20px;
  color: #ADDE4E;
}

#listenForm { text-align: center; margin-left: 0px; }

#discover { padding-left: 78px; }

form br { line-height: 18px; }
form div { margin-top: 10px; }
form div input[type=submit] { margin: 0px; }
form .field_with_errors { margin-top: 0px; display: inline-block; }
form .error { color: red; }
form a { display: inline-block; margin-top: 5px; }
label { font-weight: bold; }

input[type=text], input[type=email], input[type=password], textarea {
  width: 200px;
  height: 27px;
  padding: 0px 8px;
  border: solid 1px #cecfd1;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  moz-transition: all .218s;
  -o-transition: all .218s;
  -webkit-transition: all .218s;
  transition: all .218s;
}

textarea { 
  height: 70px; 
  padding: 8px;
  color: #666;
}

input[type=button], input[type=submit] { 
  height: 29px;
  margin: 11px 0px 11px 6px;
  padding: 0 12px;
  background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(#e6e6e6));
  background-image: -webkit-linear-gradient(top,white,#e6e6e6);
  background-color: whiteSmoke;
  background-image: linear-gradient(top,white,#e6e6e6);
  background-image: -o-linear-gradient(top,white,#e6e6e6);
  border: 1px solid #cecfd1;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -webkit-user-select: none;
  -moz-border-radius: 3px;
  line-height: 27px;
  cursor: pointer;
  moz-transition: all .218s;
  -o-transition: all .218s;
  -webkit-transition: all .218s;
  transition: all .218s;
  font-weight: bold;
}
input[type=button]:hover, input[type=submit]:hover {
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
  border-color: #999;  
}
.loading-button {
  background-image: url(/assets/loading.gif) !important;
  background-position: center center;
  background-repeat: no-repeat;
  color: rgba(0, 0, 0, 0.0);
}

nav { 
  position: absolute;
  top: 10px;
  right: 10px;
}
nav a {
  margin-left: 8px;
}

#q:focus, input:focus, textarea:focus {  
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
  border-color: #999;
}

.middle-tooltip a {
  color: blueviolet;
}
.middle-tooltip {
  width: 312px;
  margin: 0 auto;
  margin-top: 13px;
  text-align: center;
  line-height: 18px;
}
.middle-tooltip-hide { display: none; }  

#empty-playlist { display: none; }

#player #icons {
  position: absolute;
  margin-left: 510px;
  display: block;
}
#player #icons a {
  width: 16px;
  height: 16px;
  display: block;
}
#info-icon {
  background: url(/assets/info.png) no-repeat;
}

#playlists-opener {
  margin-bottom: 5px;
  background: url(/assets/playlist-icon.png) no-repeat;
}

#remove-video {
  position: absolute;
  margin-left: 212px; 
}
#remove-video:hover {
  color: red;
}

#share { color: #efefef; 	border-bottom: groove 2px #555; padding: 10px 42px; }
#share a {
  width: 16px;
  height: 16px;
  border: none;
  position: absolute;
  margin-top: -3px;
	text-shadow: 1px 1px #222;
	-moz-text-shadow: 1px 1px #222;
	-webkit-text-shadow: 1px 1px #222;
}
#share a#facebook {
  background: url(/assets/facebook.png) no-repeat;
  margin-left: 3px;
  margin-top: -1px;
}
#share a#twitter {
  background: url(/assets/twitter.png) no-repeat;
  margin-left: 20px;
  margin-top: -1px;
}

.slimScrollDiv {
  position: fixed !important;
  -moz-box-shadow: 0 0 5px 1px #888;
  -webkit-box-shadow: 0 0 5px 1px#888;
  box-shadow: 0 0 5px 1px #888;
  border-left: groove 2px #555;
  z-index: 900;
}

#playlist {
  display: none;
  background: #333;
  background: -moz-linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.8)) !important;
  background: -webkit-linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.8)) !important;
  border: solid 1px #464646;
  position: absolute;
  top: 0px;
  right: 0px;
	width: 200px;
	font-size: 11px;
	height: 100%;
	overflow: auto;
}
#playlist #the-list a {
  display: block;
  color: #ccc;
	text-decoration: none;
	padding: 10px 15px;
	border-bottom: groove 2px #555;
	text-shadow: 1px 1px #222;
	-moz-text-shadow: 1px 1px #222;
	-webkit-text-shadow: 1px 1px #222;
}
#playlist #the-list a.active {
	color: #efefef;
  background: url(/assets/active.png) center left;
  background-repeat: no-repeat;
}
#playlist #the-list a:hover {
  color: #efefef !important;
}
.share-video {
	display: none;
	width: 100%;
	text-align: center;
	margin-top: 8px;
}
#share-video {
	overflow: hidden;
}
#share-video div {
	width: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
	text-align: center;
	margin-bottom: 10px;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}
#share-video div.facebook {
	background: #3B5998;
}
#share-video div.twitter {
	background: #4099FF;
}

#player {
	width: 500px;
	padding-bottom: 3px;
	margin: 0 auto;
	display: none;
	margin-top: 15px;
	position: relative;
}
#ytplayerid {
	height: 281px;
	width: 100%;
	background: #000;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#player { text-align: center; }

#player-controls {
  text-align: left;
  margin-top: 10px;
}
#player-controls #next, #player-controls #previous {
  display: inline-block;
  cursor: pointer;
}
#player-controls #next {
  float: right;
}

#stats-main h2 {
  margin-left: 0px;
  margin-top: 0px;
  border-top: dashed 2px #CCC;
  padding-top: 40px;
}
#stats-main h2:first-child {
  border-top: none;
} 
#stats-main h3 {
  font-size: 22px;
  font-weight: bold;
}

#stats-main ol {
  margin-left: 28px;
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 30px;
}
#stats-main ol li {
  margin-bottom: 10px;
}

#stats-main table {
  margin-bottom: 40px;
  width: 100%;
  border-spacing: 0;
}
#stats-main table tr {
  cursor: pointer;
}
#stats-main table tr:hover {
  background: #F1EFD3;
}
#stats-main table tr td {
  padding: 5px;
  border-right: dotted 1px #ababab;
  border-bottom: dotted 1px #ababab;
}
#stats-main table tr td:last-child {
  border-right: none;  
  width: 130px;
}
#stats-main table thead {
  font-weight: bold;
}
#stats-main table thead tr:hover {
  cursor: default;
  background: none;
}
#stats-main table tbody tr:last-child td {
  border-bottom: none;
}

#stats-main table#general thead tr {
  font-size: 22px;
}
#stats-main table#general tbody tr {
  font-size: 18px;
}
#stats-main table#general tr td {
  border: none;
}
#stats-main table#general tr:hover {
  cursor: default;
  background: none;
}

#users-main h2, #genres-main h2 {
  margin-left: 0px;
}
#users-main p, #genres-main p {
  margin-bottom: 15px;
}
#genres-main ul {
  list-style-type: none;
}
#genres-main ul li {
  display: inline-block;
  width: 250px;
  float: left;
  margin-bottom: 20px;
}
#genres-main ul li a {
  font-weight: bold;
  font-size: 14px;
}
#genres-main ul li i:hover {
  cursor: pointer;
  color: blueviolet;
}

.social { position: fixed; bottom: 10px; left: 10px; }
.social .twitter { display: block; margin-bottom: 7px; width: 90px; }

#info { display: none; margin-top: 28px; }

#info h3 {
  font-size: 16px;
  margin-bottom:10px;
}

.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-widget-overlay { background: #000; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.ui-dialog { box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px; position: absolute; padding: .2em; width: 300px; overflow: hidden; padding: 10px; background: #efefef; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin-bottom: 5px; height: 20px; width: 100%; font-size: 17px; font-weight: bold; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: 10px; font-style: italic; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-content ul { list-style-type: none; }

#about-tubalr p {
  display: block;
  margin-bottom: 15px;
  line-height: 16px;
  font-size: 12px;
}
#about-tubalr p a {
  color: blueviolet;
}
#about-tubalr h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

#users-main ul  { list-style-type: none; }
#users-main li  { margin-bottom: 10px; line-height: 16px; }
#users-main a   { font-size: 14px; font-weight: bold; }
#users-main p   { margin-top: 5px; }

ul#playlists {
  list-style: none;
  margin: 25px 0px 8px;
  min-height: 60px;
  padding: 0;
}

ul#playlists li {
  display: inline-block;
  width: 160px;
  padding: 5px 10px;
  margin: 5px;
  background: #464646;
  color: #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

ul#playlists li:hover {
  background: #ADDE4E;
  color: #000;
}

#playlists-dialog #no-playlists {
  margin-top: 25px;
  position: absolute;
  height: 60px;
}

#create-new-playlist {
  text-align: center;
  height: 51px;
}
#create-new-playlist input[type=text] {
  display: none;
}
#create-new-playlist #cancel-create-new-playlist-button {
  display: none;
}
#create-new-playlist #create-playlist-status {
  line-height: 51px;
}
#create-new-playlist #create-playlist-status span {
  display: none;
}

#playlists-main ul {
  list-style: none;
}
#playlists-main ul {
  margin-top: 20px;
}
#playlists-main ul li {
  font-size: 18px;
  margin-bottom: 15px;
}