@import url("animation-webkit.css") screen;
@import url("animation-moz.css") screen;
@import url("boot.css") screen;
@import url("background.css") screen;

@import url("animations.css") screen;
@import url("navs.css") screen;
@import url("desktop.css") screen;
@import url("dock.css") screen;
@import url("window.css") screen;
@import url("panels.css") screen;
@import url("launchpad.css") screen;

/* APPS */

@import url("../apps/calculator/calculator.css") screen;
@import url("../apps/peek/peek.css") screen;
@import url("../apps/settings/settings.css") screen;
@import url("../apps/lock/lock.css") screen;
@import url("../apps/notes/notes.css") screen;
@import url("../apps/bigben/bigben.css") screen;
@import url("../apps/launchpad/launchpad.css") screen;

/*-----------------------------------------------------------------------------------*/
/*	0.	
/*-----------------------------------------------------------------------------------*/
*,
*::before,
*::after {
   -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


 .bg-success{background: #fff; /* Old browsers */
background: -moz-linear-gradient(left, #fff 1%, #f6f6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #fff 1%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #fff 1%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}


.sub-menu-list .search {
  background-color: lightgrey;
}
.sub-menu-list .search:hover {
  background-color: lightgrey;
  color: black;
}
.sub-menu-list .search input {
  background: none;
  border: 1px solid lightslategray;
  border-radius: 3px;
}
.sub-menu-list .search input:focus {
  outline: none;
}

#finderTags {
  display: flex;
  margin-bottom: 1em;
  margin-top: 0.5em;
}
#finderTags .finder-tag {
  margin: -0.1em 0.3em 0em 0.2em;
  opacity: 0.5;
  border-radius: 20px;
  width: 0.4vh;
  height: 1vh;
}

#spotlightSearchInput {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
 flex-direction: column;
  width: 100%;
  height: 100%;
}
#spotlightSearchInput input {
  height: 2vh;
  width: 20vw;
  border-radius: 8px;
  border: 1px solid #ccc;
  padding:7px;
  text-align: center;
  font-size:11px;
}










#clock,#todaysdate{
    font-size:14px;
}
#clock,#todaysdate{
    padding-right:15px;
}
.topicon{
    padding-right:5px;
}
.topicon.last{
    padding-right:0px;
}





/*-----------------------------------------------------------------------------------*/
/*	0.	CSS Reset
/*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }

::-moz-selection { background:rgba(124,196,255,0.7); }
::selection      { background:rgba(124,196,255,0.7); }

*{
    box-sizing: border-box;
}
html, body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-size:12px;
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
	padding:0;
	background:#000;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}


/*-----------------------------------------------------------------------------------*/
/*	04.	Support Browser
/*-----------------------------------------------------------------------------------*/

#fail {
	background: url(../img/gradient.png) no-repeat center, url(../img/background.png) repeat left top #000;
	width:100%;
	height:100%;
	position:absolute;
	z-index:0;
	visibility:hidden;
}

#fail .fail-browser-logo {
	position:absolute;
	width:120px;
	height:120px;
	left:50%;
	top:50%;
	margin-left:-60px;
	margin-top:-60px;
	margin-bottom:60px;
}
#fail.visible {
	visibility:visible;
}
#fail .fail-browser {
	position:absolute;
	left:50%;
	top:70%;
	width:1100px;
	margin-left:-550px;
	text-align:center;
	font-size:24px;
	line-height:40px;
	color:rgba(0,0,0,0.69);
	text-shadow:0 1px 1px rgba(153,153,153,0.45);
}
#fail .fail-browser a {
	text-decoration:none;
	color:rgba(190,190,190,0.95);
	text-shadow:0 1px 1px rgba(153,153,153,0.45);
}
#fail .fail-browser a:hover {
	text-shadow:0 0px 5px rgba(153,153,153,0.95);
}





/*-----------------------------------------------------------------------------------*/
/*	04.	Tool Tips  USE: <dfn data-info="Message Here CSS Only">  Element Here </dfn> 
/*-----------------------------------------------------------------------------------*/


dfn {
  background: transparent;
  border-bottom: dashed 0px rgba(0,0,0,0.8);
  padding: 0 0.4em;
  cursor: help;
  font-style: normal;
  position: absolute;
  bottom:15px;
  right:10px;
  color:#474747;
  text-shadow:2px 2px #eee;
}
dfn::after {
  content: attr(data-info);
  display: inline;
  position: absolute;
  top: 22px; left: -2rem;
  opacity: 0;
  min-width: 130px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5em;
  padding: 0.5em 0.8em;
  background: rgba(0,0,0,0.8);
  color: #fff;
  border-radius:20px;
  text-align:center;
  pointer-events: none; /* This prevents the box from apearing when hovered. */
  transition: opacity 250ms, top 250ms;
  text-shadow:2px 2px #000;
}
dfn::before {
  content: '';
  display: block;
  position: absolute;
  top: 12px; left: 10px;
  opacity: 0;
  width: 0; height: 0;
  border: solid transparent 5px;
  border-bottom-color: rgba(0,0,0,0.8);
  transition: opacity 250ms, top 250ms;
  text-shadow:2px 2px #000;
}
dfn:hover {z-index: 2;} /* Keeps the info boxes on top of other elements */
dfn:hover::after,
dfn:hover::before {opacity: 1;}
dfn:hover::after {top: 30px;}
dfn:hover::before {top: 20px;}