/* General styles */
html, body {
	margin:0;
    padding:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    height:100%;
}
body {
    background-color:#E5E5E5;
    text-align:center;
    color:#333;
    font-family: Source Sans Pro, Open Sans, Arial, sans-serif;
}
.background {color:#FFF;}
ul, li {margin:0;padding:0;list-style:none;}
#homescreen {padding-top:40px;z-index:1;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0 auto;text-align:center;}
:focus {outline:none}
::selection {background:transparent}
::-moz-selection {background:transparent;}
input::selection {background:#A8CDF1}
input::-moz-selection {background:#A8CDF1;}
.background input::selection {background-color:rgba(255,255,255,0.4)}
.background input::-moz-selection {background-color:rgba(255,255,255,0.4)}
::-moz-focus-inner {border:none;padding:0;}
#container {
    -webkit-flex-direction:column;
    -ms-flex-direction: column;
    flex-direction:column;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:100%;
    overflow:auto;
}
/* Widgets */
.background .widget {text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.098);}
.widget {
    font-family:"Source Sans Pro", Open Sans, Arial, sans-serif;
    display: inline-block;
}
.spacer {
    -webkit-flex:1;
    -ms-flex:1;
    flex: 1;
    display: block;
    width:100%;
}
#time {
    font-size: 180px;
    margin:5px;
    font-weight: 300;
}
#time sub {font-size:40px;vertical-align:baseline;}
/* Shortcuts */
.expandFolders .shortcut{
    margin:67.5px;
}
.shortcut {
    margin:51.5px;
    vertical-align:middle;
    display:inline-block;
    border-radius:100%;
    overflow:hidden;
    width:32px;
    height:32px;
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.098);
}
.shortcut.placeholder {text-decoration:none;font-size:22px;font-weight:600;line-height:31px;text-align:center;text-transform: uppercase;color: #FFF;background-color:#333;}
.shortcut:focus {outline:1px dashed #A8CDF1;}
/* Folders */
.folder {
    vertical-align:middle;
    text-align:left;
    margin:71.5px;
    position:relative;
    display:inline-block;
    width:32px;
    height:32px;
    overflow:hidden;
    border-radius:100%;
    transition:all 0.3s;
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.098);
}
.folder:hover, .expandFolders .folder, .folder:focus {
    width:135px;
    height:135px;
    margin:20px;
    background-color:#FFF;
}
.background .folder:hover, .background.expandFolders .folder, .background .folder:focus {
    background-color: rgba(255,255,255,0.8)
}
.expandFolders .folder {margin: 10px 60px;}
.folder-icon {
    vertical-align:top;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-16px;
    margin-top:-16px;
    border-radius:100%;
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.098);
}
.folder:hover .shortcut, .expandFolders .folder .shortcut,.folder:focus .shortcut {
    visibility:visible;
    pointer-events:all;
    margin:5px 5px;
    vertical-align:top;
}
.folder-contents {
    display:inline-block;
}
.folder .shortcut {
    visibility:hidden;
    pointer-events:none;
}
.folder .shortcut:first-child {
    margin-left:30px;
    margin-top:10px;
}
.folder .shortcut:nth-child(2) {
    margin-top:10px;
}
.folder .shortcut:nth-child(3) {
    margin-left:11px;
}
.folder .shortcut:nth-child(4) {
    margin-left:45px;
}
.folder .shortcut:nth-child(5) {
    margin-left:30px;
    margin-top:2px;
}
.folder .shortcut:nth-child(6) {
    margin-top:2px;
}
.shortcut > img, .folder-icon {
    width:32px;
    height:32px;
}
.folder .shortcut {
    position:relative;
}
/*Form */
.background #search-form {
    background-color:transparent;
    border:1px solid #FFF;
    border-radius:0;
    color:#FFF; 
}
.background #search-dropdown-top {background:none !important;border-right-color:#FFF;}
.background #search-dropdown-list {margin-left:-1px;}
.background #search-dropdown-top::after {border-top-color:#FFF;}
.background #search-form > input[type="submit"] {background-image:url(../img/search-inverted.png)}
#search-form {background-color:#FFF;color:#000;box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.098);z-index:2;border-radius:2px;font-family:Open Sans,Arial,sans-serif;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:10pt;width:520px;margin:20px auto;}
.no-dropdown #search-dropdown-top:after {display:none;}
.no-dropdown #search-dropdown-top {background:transparent;padding-right:8px;border:none;border-bottom-left-radius:2px !important}
.no-dropdown #search-dropdown-list {display:none !important;}
#search-dropdown-list {text-align:left;display:none;position:absolute;top:100%;left:0;background-color:#FFF;box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.098);border-top:1px solid #EBEBEB;}
#search-dropdown-list li {width:100%;height:100%;text-overflow:ellipsis;white-space:nowrap;}
#search-dropdown-list li a {display:block;padding:5px;width:auto;color:#333;vertical-align:top;cursor:pointer;}
#search-dropdown-list li a:after {content:attr(data-name);vertical-align:middle;}
#search-dropdown-list li a img {width:16px;height:16px;vertical-align:middle;border-radius:1.5px;margin-right:10px;}
#search-dropdown-list li:hover a, #search-dropdown-list li a:focus {background-color:#F1F1F1}
#search-dropdown {height:100%;display:inline-block;vertical-align:top;position:relative;z-index:999;}
#search-dropdown:hover #search-dropdown-top {background-color:#FFF;border-bottom-left-radius:0;}
#search-dropdown-top:after {content:"";border:4px solid transparent;height:0;width:0;border-top-color:#000;position:absolute;top:50%;margin-top:-2px;right:7px;}
#search-dropdown-top {height:100%;padding:8px 8px;padding-right:20px;display:inline-block;vertical-align:top;background-color:#F0F0F0;border-right:1px solid #DCDCDC;border-bottom-left-radius:2px;border-top-left-radius:2px;}
#search-dropdown-top > img {height:16px;width:16px;vertical-align:top;margin-top:1.5px;border-radius:1.5px;}
#search-dropdown:hover #search-dropdown-list {display:block;}
#search-input {background:none;border:none;flex:1;-webkit-flex:1;padding:8px;height:100%;font:inherit;color:inherit}
#search-input::-ms-placeholder {color:white;opacity:1;}
#search-input::-webkit-input-placeholder {color:white;opacity:1;}
#search-input::-moz-placeholder {color:white;opacity:1;}
#search-form > input[type="submit"] {background-color:transparent;margin:0;background-image:url(../img/search.png);background-position:center;background-repeat:no-repeat;border:none;padding:0 15px;}