/*
* System Overlay CSS
* author: Anthony Dillon
*/

#systemOverlay{
	width:100%;
	height:100%;
	position: absolute;
	background-color:rgba(96,22,19,0.7);
	top:0px;
	left:0px;
	z-index:12;
	display:none;
	font-size:17px;
	color:white;
}

#systemOverlay input{
	background:url(../img/overlay/search-logo.png) no-repeat 10px center;
	position: relative;
	width: 88%;
	height:40px;
	left:90px;
	top:30px;
	color:#eee;
	font-style:italic;
	padding:0px 50px;
	font-size:18px;
		-moz-border-radius:4px 4px 4px 4px;
		-webkit-border-radius:4px 4px 4px 4px;
	border-radius:4px 4px 4px 4px;
	border:1px solid #fff;
	background-color:rgba(0,0,0,0.2);
	outline-style:none;
}

#systemOverlay input:active{
	
}

#systemOverlay #shortcuts{
	position: absolute;
	left:100px;
	top:110px;
}

#systemOverlay #shortcuts:hover{
	background-position: 0px -17px;
}
#systemOverlay img{
	vertical-align: text-top;
	margin-right: 8px;
}
#systemOverlay .app-list img {
	margin-right: 0;
}
#systemOverlay #shortcuts img{
	vertical-align: middle;
	margin-right:15px;
}

#systemOverlay #shortcuts .shortcut-arrow{
	width:13px;
	height:17px;
	overflow:hidden;
	background:url(../img/overlay/shoutcurts-down.png) no-repeat;
	display: inline-block;
	margin:0px 0px 0px 15px;
}

#systemOverlay .app-container{
	display:none;
	position:absolute;
	left:110px;
	top:100px;
	width:91%;
}

#systemOverlay #overlayContents{
	margin-top:10px;
}

#systemOverlay #overlayContents .message {
	min-height: 100%;
	height: auto;
	display: table-cell;
	vertical-align: middle;
}

#systemOverlay #overlayContents .bottom{
	margin-bottom:20px;
} 

#systemOverlay .app-container .app-list{
	width:100%;
	height:110px;
	margin:10px 20px;
	overflow:hidden;
}

#systemOverlay .app-container .app-list div{
	width:200px;
	height:120px;
	float:left;
	text-align:center;
}

#systemOverlay .app-container .app-list div img{
	padding:20px;
	height:46px;
}

#systemOverlay .app-container .app-list div img.hover{
	background-color:rgba(255,255,255,0.3);
	-moz-border-radius:4px 4px 4px 4px;
	-webkit-border-radius:4px 4px 4px 4px;
	border-radius:4px 4px 4px 4px;
}

#systemOverlay .app-container .app-list div p{
	font-size: 13px;
	margin-top: 0px;
}

#systemOverlay #shortcuts .hover{
	background-position: 0px -17px !important;
}

#systemOverlay #shortcuts .closed{
	background:url(../img/overlay/shoutcurts-right.png) no-repeat;
}

#systemOverlay #shortcuts #shortcut-contents{
	width:870px;
	position: absolute;
	top:50px;
}
#systemOverlay #shortcuts #shortcut-contents .dashClear{
	clear:both;
	height:0px;
	float:none;
}

#systemOverlay #shortcuts #shortcut-contents div div{
	height:104px;
	margin-bottom: 12px;
	margin-left:0px;
    width: 100%;
}

#systemOverlay #shortcuts #shortcut-contents div div.hover{
	background-position: center -104px !important;
}

#systemOverlay #shortcuts #shortcut-contents #browse-the-web div{
	background:url(../img/overlay/browse-the-web.png) no-repeat scroll center 0 transparent;
}
#systemOverlay #shortcuts #shortcut-contents #view-photos div{
	background:url(../img/overlay/view-photos.png) no-repeat scroll center 0 transparent;
}
#systemOverlay #shortcuts #shortcut-contents #check-email div{
	background:url(../img/overlay/check-email.png) no-repeat scroll center 0 transparent;
}
#systemOverlay #shortcuts #shortcut-contents #listen-to-music div{
	background:url(../img/overlay/listen-to-music.png) no-repeat scroll center 0 transparent;
}
#systemOverlay #shortcuts #shortcut-contents #media-apps div{
	background:url(../img/overlay/media-apps.png) no-repeat scroll center 0 transparent;
}
#systemOverlay #shortcuts #shortcut-contents #internet-apps div{
	background:url(../img/overlay/internet-apps.png) no-repeat scroll center 0 transparent;
}
#systemOverlay #shortcuts #shortcut-contents #more-apps div{
	background:url(../img/overlay/more-apps.png) no-repeat scroll center 0 transparent;
}
#systemOverlay #shortcuts #shortcut-contents #find-apps div{
	background:url(../img/overlay/find-files.png) no-repeat scroll center 0 transparent;
}
#systemOverlay #shortcuts #shortcut-contents div {
	margin-left:115px;
	float:left;
	text-align:center;
	margin-bottom:70px;
	width: 130px;
}
#systemOverlay #shortcuts #shortcut-contents div span{
	display:block;
	height: 40px;
}

#systemOverlay #shortcuts #shortcut-contents div.first{
	margin-left:0px;
}

#systemOverlay #dash-bottom-bar{
	width:100%;
	height:44px;
	position: absolute;
	background:url(../img/black-bg-30.png);
	background-color:rgba(0,0,0,0.3);
	bottom:0px;
}

#systemOverlay #dash-bottom-bar .bottom-wrapper div{
	width:60px;
	height:44px;
	float:left;
}
#systemOverlay #dash-bottom-bar .bottom-wrapper div.last{
	margin-right:0px;
}

#systemOverlay #dash-bottom-bar .bottom-wrapper{
	position: absolute;
}

#systemOverlay #dash-bottom-bar .home-icon{
	background:url(../img/dash/dash-home.png) no-repeat scroll 0px -44px;
}
#systemOverlay #dash-bottom-bar .applications-icon{
	background:url(../img/dash/dash-applications.png) no-repeat scroll 0px -44px;
}
#systemOverlay #dash-bottom-bar .music-icon{
	background:url(../img/dash/dash-music.png) no-repeat scroll 0px -44px;
}
#systemOverlay #dash-bottom-bar .files-icon{
	background:url(../img/dash/dash-files.png) no-repeat scroll 0px -44px;
}
#systemOverlay #dash-bottom-bar .video-icon{
	background:url(../img/dash/dash-video.png) no-repeat scroll 0px -44px;
}
#systemOverlay #dash-bottom-bar .photos-icon{
	background:url(../img/dash/dash-photos.png) no-repeat scroll 0px -44px;
}
#systemOverlay #dash-bottom-bar .chat-icon{
	background:url(../img/dash/dash-chat.png) no-repeat scroll 0px -44px;
}


#systemOverlay #dash-bottom-bar .bottom-wrapper div:hover{
	background-position: 0px -88px;
}
#systemOverlay #dash-bottom-bar div.active,
#systemOverlay #dash-bottom-bar div.active:hover{
	background-position: 0px 0px;
}

#systemOverlay #preview {
	width: 800px;
	position: absolute;
}

#systemOverlay #preview .image {
	width: 400px;
	float: left;
}

#systemOverlay #preview .info,
#systemOverlay #preview .buttons {
	width: 380px;
	float: left;
	padding-left: 20px;
}

#systemOverlay #preview .buttons a {
	margin: 0 10px 10px 0;
	display: block;
	height: 35px;
	line-height: 35px;
	text-align: center;
	width: 175px;
	float: left;
	border: 1px solid #999;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;
	color: #fff;
}

#systemOverlay #preview .buttons a:hover {
	background-color: rgba(255, 255, 255, 0.1);
}