html { font-family: "arial"; font-size:14px;padding:0px;margin:0px;background-color:#ccc;}
body {padding:0px;margin:0px;min-height:100%; background-color:#ccc;}

a {color:#66ccff;text-decoration:none;}
a:hover { color:#999;}

div.clear {clear:both;}
img {border:0px;}
#header { height:88px;background-image:url('/images/gradient.png');width:100%; color:white;padding-top:5px;}
#header .content { padding:10px;padding-left:20px;}
#header h1 {float:left; color:#999; margin:0px;}
#controls { margin-top:-5px;margin-right:40px;float:right;color:#999;}

#header a {border:0px; color:white;text-decoration:none;}
#controls ul {margin:0px;padding:0px;font-size:11px;}
#controls ul li { float:left;margin-left:10px;list-style-type:none;}
#controls a {color:#999;}

#header ul.tabs {  list-style-type:none; padding:0px;padding-right:20px;position:absolute;top:24px; right:0px; }
#header ul.tabs li { margin-right:10px;float:left;padding:0px; color:black; height:30px; width:140px;text-align:center; font-size:20px;line-height:30px;}
#header ul.tabs li a {color:#eee;}
#header ul.tabs li a:hover {color:#999;}
#header ul.tabs li.selected a {color:#66ccff;}


#header #container {height:400px;}


#container { }
#container > .content { padding:30px;}
#container h2 {background-image:url('/images/title-dec.png');background-position:10px 10px; background-repeat:no-repeat;padding-left:30px;margin-top:0px;color:#66CCFF;font-size:25px;color:#66CCFF;letter-spacing:1px;font-weight:normal;font-family:arial;padding-bottom:5px;border-bottom:1px dotted #999;}
#container h3 {color:#666; font-size:14px;letter-spacing:2px;}
#container h4 {margin:0px;}

#container .column-1 { float:left; width:100%;}
#container .column-3 { float:left; width:33.3%;}
#container .column-2-left { float:left; width:66.6%;}
#container .column-2-right { float:left; width:33.3%;}

#container .block {background-color:white;padding:20px;}
#container .player {background-color:white;padding:20px;}

#container #left { float:left; }
#container #right {  float:left; }
#container .createproject {background-image:url('/images/button_gradient.png');background-color:none;height:57px; font-size:20px; padding:5px;letter-spacing:5px;padding-bottom:7px; text-align:center;}
#container .createproject a {color:white;font-size:40px;font-weight:bold;}
#container #right input {width:200px; border:1px solid #999;}


#container .feed {}
#container .live { }
#container .feed .event { color:#333;margin-bottom:10px;padding:4px;font-size:12px;font-size:12px;}
#container .feed .event .avatar-small {padding-top:0px;}
.event small {font-size:10px;}
#container .feed .event {}

#container .tracklist { background-color:#fff; height:150px;margin-bottom:40px;}
#container .tracklist .track { background-color:#999;padding:5px;margin-bottom:4px;}

#container .friendlist { background-color:#fff; height:150px;}
#container .friendlist .avatar {height:35px;width:30px; border:1px solid #999; float:left; background-color:white;margin-right:5px;}

.avatar-large {margin-bottom:10px;width:120px;margin-right:10px;}
.avatar-small {margin-bottom:10px;width:25px;height:25px;margin-right:10px;float:left;}
.avatar-normal {margin-bottom:10px;width:50px;height:50px;margin-right:10px;float:left;text-align:center;}


#footer {width:400px;margin:0px auto;margin-top:20px;margin-bottom:20px;text-align:center;font-size:12px;color:#999;line-height:20px;}
#footer a {color:#999;font-weight:bold;}
#footer {background-color:#bbb;}
#footer .content {padding:0px;}



ul.sidebar-nav {font-size:20px;list-style-type:none;}
ul.sidebar-nav li {margin-bottom:10px;}
ul.sidebar-nav li.selected { font-weight:bold;}

div.action {padding:10px;text-align:center;font-size:15px;background-color:#66ccff;margin-bottom:10px;}
div.action a { color:white;}


.project { background-color:#eee;padding:10px; margin-bottom:10px;color:#666; }
.project .content {padding:0px;padding-top:5px;padding-left:0px;}
.project h3 {font-size:25px;margin:0px;color:#555;}
.project h3 a { color:#555;font-weight:bold; font-size:30px;font-weight:normal;}
.project a {color:#66ccff;}
.public { background-color: #EAE2B2;}
.public h3, .public h3 a { color: #544802;font-weight:normal;letter-spacing:-2px;}
.public h3 a:hover {text-decoration:underline;}


.semipublic {background-color:#C9C29D;}
.semipublic h3, .semipublic h3 a { color: #544802;font-weight:normal;letter-spacing:-2px;}


.project .titledescription {float:left;width:150px;}
.project .titledescription p {margin:0px;padding:0x;font-size:10px;}
.project .top {width:100%;}
.project .favorite {float:right;font-size:20px;}
.project .side {width:100%;}

.project .labeled {float:right;margin-top:-15px;margin-right:-10px;}
.project .dates {font-size:10px; text-align:left;}
.project .bottom {margin-top:20px;margin-bottom:10px;}
.project .bottom .cell {float:right;font-size:15px; width:50px;text-align:center; line-height:10px;}
.project .bottom .cell small {font-size:9px;}
.project .bottom .time {float:left; font-size:25px;line-height:20px;}

.project .avatars {width:250px;}
.project .avatars .holder {width:25px; height:25px;border:1px solid black;float:left;margin-right:3px;}
.project .dates {width:170px;}

.project .comments { border-top:1px solid #ccc;padding-top:4px; }
.comment { padding-top:4px; margin-bottom:10px; padding-bottom:10px;border-bottom:1px solid #ccc;}
.comment small {font-size:10px;}

.left {float:left;}
.right {float:right;}



#note {background-color:#66ccff;padding:10px;color:white;}
#note a {color:white;font-weight:bold;}

div.user {width:100px;height:120px;float:left;margin:10px;}

#container #right .user {}

#editor {width:100%; height:800px;}


.flash-message { font-weight:bold;background-color:white;padding:10px;}
#flash-notice {color:green;}
#flash-error {color:red;}

.message {border-bottom:1px solid #ccc;}
.message .field {padding:2px;width:120px;float:left;height:30px; line-height:30px;}
.message .from {width:150px;}
.message .subject {width:450px;}
.message .body {width:300px;}
.message .avatar-small {padding-top:4px;padding-right:10px;}

.unread .from {font-weight:bold;}
.unread .subject {font-weight:bold;}


#message div.label {width:100px; display:block;float:left;clear:both; height:30px; font-weight:bold;}
#message div.content {width:400px; display:block;float:left; }


form label {width:200px;display:block;float:left;font-size:20px;margin-left:10px;}
form .star {float:right; font-size:30px;color:#ff6600;}
form li { list-style-type:none; font-size:16px;line-height:30px;}
form input[type='text'], form input[type='password'] {margin-bottom:5px;font-size:16px;padding:6px; background-color:#FFF8C9;}
form input[type='text'], form input[type='password'], form textarea { border:1px solid #ccc;width:300px;padding:6px; background-color:#FFF8C9;}

form .inputfield {float:left; margin-bottom:20px;font-style:italic;}

.smallform {margin-left:0px;padding:0px;}
.smallform label {padding:0px;margin-left:0px;font-size:11px;font-weight:bold;}
.smallform textarea {width:200px;height:100px;}

.friend-select { border:1px solid #eee;padding:5px; width: 100%; overflow-x:auto;}
.friend-select-item { width:40px;height:60px;border:1px solid #ccc;margin:10px;float:left;font-size:9px;padding:10px;}
.friend-select-item:hover {border:1px solid red;}

#friend-select-selected {float:left;height:90px;margin:0px 10px 10px 0px;}


.collaborators .avatar { float:left; width:60px;height:60px;margin-right:10px;}
.collaborators .name {font-size:20px;float:left;line-height:50px;}


.forumpost {margin-bottom:20px;}
.forumpost .date {display:inline;}
.forumpost .user {float:left;}
.forumpost .avatar {display:block;float:left;}
.forumpost .username {display:block;float:left;margin-top:3px;margin-left:10px;font-size:14px;font-weight:bold;}
.forumpost .title { font-size:11px;width:100%;}
.forumpost .header {border-bottom:2px solid #ccc;padding:4px;}
.forumpost p {padding:5px;margin:0px;font-size:10px;padding-top:0px;}

.rc-holder {padding:10px;}


/*Nifty Corners Cube CSS by Alessandro Fulciniti
The following classes are added dinamically by javascript,
and their use should be avoided in the markup */

b.niftycorners,b.niftyfill{display:block}
b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
    overflow:hidden;border-style:solid;border-width: 0 1px}
/*normal*/
b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}
/*transparent inside*/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}





/** PLAYER **/
.projectplayer {
	background-color:white;
	
	
}
.projectplayer a {
	color:#ff6600;
}

.projectplayer .trackarea {
	background-color:white;
	position:relative;
	left:0px;
	top:0px;
	
	right:100%;
	height:100%;
	
}
.projectplayer .trackarea .tracks {
	position:relative;
	top:0px;
	
	left:0px;
	
}
.projectplayer .positionbar {
	position:absolute;
	margin-left:0px;
	top:0px;
	bottom:0px;
	left:0px;
	border-left:1px solid #999;
	width:0px;
	z-index:100;
	background-color:#999;
} 

.projectplayer .controlarea {
	height:30px;
	width:100%;
	padding-top:0px;
	text-align:right;
	
	border-top:1px solid #ccc;

}
.projectplayer .controlarea img {
	margin-right:20px;
	margin-top:-1px;
}
.track {
	border-top:1px solid #eee;
	margin-bottom:2px;
	height:40px;
}

.soundevent {
	height:100%;
	position:relative;
	width:100px;
	left:10px;
}


#container  .system-notification-info {
	background-color:#66ccff;
	color:white;
}

#container  .system-notification-info a {
	color:white;
}


.request {background-color:#66ccff;color:white; padding:5px;margin-bottom:10px;}
.request .content {padding:10px;}
.request h2 {color:white;}
.request a {color:white;font-weight:bold;}
.request .state {font-style: italic;}
.request .username { margin-left:10px;font-size:20px;font-weight:bold;line-height:20px;}
.request .actions {text-align:right;}
.request .actions a {margin-left:10px;}