/* Views */
.view										{ position: relative; clear: both; }

/* Toolbar, Icons and Text-icon */
.toolbar									{ margin: 0; position: absolute; right: 9px; top: 4px; }
.toolbar li									{ float: left; list-style: none; padding: 0; }
.toolbar .seperator							{ margin: 0 5px; padding-left: 5px; height: 18px; border-right: dotted 1px #333; }
/* Icon stages */
.icon										{ display: block; float: left; height: 19px; margin-left: 5px; padding-left: 19px; outline: none; }
.icon:hover									{ background-position: 0 -19px; }
.icon:active								{ background-position: 0 -38px; }
.icon.selected								{ background-position: 0 -19px; color: #666; }
a.icon										{ color: #999; text-decoration: none; }
a.icon:hover								{ color: #09f; }
/* Icon Text */
.icon span									{ padding: 0 5px; line-height: 19px; }
/* Toolbar Search Element */
input.t-search								{ width: 125px; height: 18px; line-height: 18px; margin-left: 5px; padding: 0 4px; border: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

/* different icons */
.grid-button								{ background: url(../img/icons/gridview.png) 0 -57px no-repeat; }
.list-button								{ background: url(../img/icons/listview.png) 0 -57px no-repeat; }
.edit-button								{ background: url(../img/icons/editview.png) 0 -57px no-repeat; }

/* View Containers */
.view-container								{ padding: 0 15px; clear: both; }
.view-container ul							{ margin: 0; }
.view-container ul li						{ list-style: none; }
.view-container img							{ float: left; }

.view .item									{ position: relative; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.view .item.selected						{ background-color: #eee; }
.view .item:hover							{ z-index: 2; text-decoration: none; color: #fff; background-color: #09f; border-color: #09f; -moz-box-shadow: #666 0 0 5px; -webkit-box-shadow: #666 0 0 5px; box-shadow: #666 0 0 5px; }

.listview .item								{ height: 30px; padding: 3px; display: block; color: #333; }
.listview .item .item-title					{ float: left; margin-left: 5px; line-height: 30px; }
.listview .item .delete,
.listview .item .actions					{ display: none; }	

.gridview .item								{ float: left; margin: 0 4px 4px 0; border: #fff solid 3px; }
.gridview .item .item-content				{ float: left; }
.gridview .item .item-title					{ margin: 2px 0; }
.gridview .item .item-title,
.gridview .item .actions,
.gridview .item .delete						{ display: none; }

.editview .item .delete						{ display: block; position: absolute; top: -12px; left: -12px; height: 30px; width: 30px; z-index: 1; background: transparent url(/img/fancybox/fancy_closebox.png) no-repeat 0 0; }
.editview .onclick .delete					{ top: -9px; left: -9px;  }

/* Image size and behavior */
.listview img.cover							{ float: left; width: 21px; }
.listview img.avatar						{ float: left; width: 30px; }
.gridview img.cover							{ width: 85px; height: 120px; }
.gridview img.avatar						{ width: 64px; }

/* onclick */
.view .onclick .item-title					{ display: block; color: #000; }
.view .onclick .actions						{ display: block; }
.view .onclick .item-content				{ position: absolute; padding: 3px; z-index: 3; background: #fff; border: solid 3px #09f; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: #000 0 0 15px; -webkit-box-shadow: #000 0 0 15px; box-shadow: #000 0 0 15px; }

.listview .onclick .item-content			{ top: -3px; left: -3px; width: 100%; } 
.listview .onclick .item-title				{ float: none; }

.gridview .onclick .item-content			{ top: -6px; left: -6px; width: 220px; }

/* Friends */
.friends .listview .onclick .item-title		{ margin-left: 35px; }
.friends .listview .actions					{ margin: 2px 0 2px 35px; }
.friends .listview .actions .button-small	{ margin: 2px 4px 2px 0; float: left; }

.friends .gridview .item					{ width: 64px; height: 64px; }
.friends .gridview .item .item-title		{ margin-left: 75px; }
.friends .gridview .actions					{ margin: 2px 0 2px 74px; }
.friends .gridview .actions .button-small	{ margin: 2px 0; float: left; }

/* Games */
.games .listview .onclick .item-title		{ margin-left: 26px; }
.games .listview .actions					{ margin: 2px 0 2px 26px; }
.games .listview .actions .button-small		{ margin: 2px 4px 2px 0; float: left; }

.games .gridview .item						{ width: 85px; height: 120px; }
.games .gridview .item .item-title			{ margin-left: 95px; }
.games .gridview .actions					{ margin: 2px 0 2px 95px; }
.games .gridview .actions .button-small		{ margin: 2px 0; float: left; }