/*

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

*/

body
{
   padding-top: 30px;
   background-image:url('../img/blurry.jpg');
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:center;
   background-size: cover;
}

body,
input,
button,
select,
textarea,
h1, h2, h3, h4, h5,
a,
a:link,
a:visited,
a:hover,
a:active
.navbar-search .search-query {
   font-family: 'Raleway', sans-serif;
   color: #5d5d5d;
}

h1, h2, h3, h4, h5
{
   margin: 0;
   color: inherit;
}

h1
{
   display: inline-block;
   font-size: 28px;
   font-weight: 400;
}

h2
{
   font-size: 24px;
   font-weight: 400;
}

h3
{
   font-size: 20px;
   font-weight: 300;
}

h4
{
   font-size: 16px;
   font-weight: 300;
}

/* Overwrite a few Bootstrap rules */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   padding-right: 10px;
   padding-left: 10px;
   padding-bottom: 20px;
}

.box
{
   background-color: #f4f4f4;
   padding: 20px;
   min-height: 140px;
   
   -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.55);
   -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.55);
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.55);
   /* Replacement for border radius, so we can get rounded border color at bottom instead of straight line with border-bottom */
   border-bottom-left-radius:5px;
   border-bottom-right-radius:5px;
   border-top-left-radius:5px;
   border-top-right-radius:5px;
   border-bottom: 3px solid;
}

.box:hover .edit
{
   display: block;
}

.box .icon
{
    height: 104px;
    width: 120px;
    position: absolute;
}

.box .content
{
   padding-top: 23px;
   padding-left: 120px;
   width: 100%;
}

.box .edit
{
   display: none;
   position: absolute;
   top: 4px;
   right: 17px;
}

.box .btn
{
   margin-right: 15px;
}

#search .content
{
   padding-top: 25px;
}

.tilecolorselector a.tilecolor
{
   background-image: url('../img/icon-color-off.png');
   display: inline-block;
   height: 30px;
   width: 30px;
   margin-right: 5px;
}

.tilecolorselector a:hover
{
   background-image: url('../img/icon-color.png');
}

.tilecolorselector a.active
{
   background-image: url('../img/icon-color.png');
}

.box .content .inner
{
   background-image: url('../img/greygradient.png');
   background-position: left top;
   background-repeat: repeat-x;
   background-color: #e1e1e1;
   border-bottom: 1px solid #d2d2d2;
   /* We need to use negative margins to break out of parent and expand fully */
   margin-top: 40px;
   margin-left: -140px;
   margin-right: -20px;
}

#reddit .table
{
   margin-bottom: 0px;
}

#reddit .table tr:nth-child(2n)
{
   background-color: #d8d8d8;
}

#reddit .table tr:hover
{
   background-color: #d1d1d1;
}

#reddit .table td
{
   border-top: 0px;
   font-size: 14px;
   font-weight: 300;
   padding: 0px;
}

#reddit .table td a
{
   display: block;
   padding: 10px;
}

#reddit .table td.rating a
{
   vertical-align: middle;
   color: #e16161;
   padding: 10px;
}

#bookmarks .content ul
{
   margin: 0px;
   padding: 10px;
}

#bookmarks .content ul li
{
   color: #f4f4f4;
   font-size: 20px;
   font-weight: 300;
   margin: 10px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   padding: 0px;
}

#bookmarks .content ul li a,
#bookmarks .content ul li a:link,
#bookmarks .content ul li a:visited,
#bookmarks .content ul li a:hover,
#bookmarks .content ul li a:active
{
   display: inline-block;
   padding: 5px 20px 5px 20px;
   color: #f4f4f4;
   text-decoration: none;
}


/* Begin Loader styles */
.windows8 {
position: relative;
width: 44px;
height:44px;
margin-left: auto;
margin-right: auto;
}

#weather .windows8
{
   padding-top: 10px;
}

#reddit .windows8
{
   padding-top: 30px;
   padding-bottom: 70px;
}

.windows8 .wBall {
position: absolute;
width: 42px;
height: 42px;
opacity: 0;
-moz-transform: rotate(225deg);
-moz-animation: orbit 2.75s infinite;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 2.75s infinite;
-ms-transform: rotate(225deg);
-ms-animation: orbit 2.75s infinite;
-o-transform: rotate(225deg);
-o-animation: orbit 2.75s infinite;
transform: rotate(225deg);
animation: orbit 2.75s infinite;
}

.windows8 .wBall .wInnerBall{
position: absolute;
width: 6px;
height: 6px;
background: #000000;
left:0px;
top:0px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
}

.windows8 .wBall_1 {
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
-ms-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.windows8 .wBall_2 {
-moz-animation-delay: 0.12s;
-webkit-animation-delay: 0.12s;
-ms-animation-delay: 0.12s;
-o-animation-delay: 0.12s;
animation-delay: 0.12s;
}

.windows8 .wBall_3 {
-moz-animation-delay: 0.24s;
-webkit-animation-delay: 0.24s;
-ms-animation-delay: 0.24s;
-o-animation-delay: 0.24s;
animation-delay: 0.24s;
}

.windows8 .wBall_4 {
-moz-animation-delay: 0.36s;
-webkit-animation-delay: 0.36s;
-ms-animation-delay: 0.36s;
-o-animation-delay: 0.36s;
animation-delay: 0.36s;
}

.windows8 .wBall_5 {
-moz-animation-delay: 0.48s;
-webkit-animation-delay: 0.48s;
-ms-animation-delay: 0.48s;
-o-animation-delay: 0.48s;
animation-delay: 0.48s;
}

@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}

30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}

39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}

70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}

75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}

76% {
opacity: 0;
-moz-transform:rotate(900deg);
}

100% {
opacity: 0;
-moz-transform: rotate(900deg);
}

}

@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}

30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}

39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}

70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}

75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}

76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}

100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}

}

@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}

30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}

39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}

70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}

75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}

76% {
opacity: 0;
-ms-transform:rotate(900deg);
}

100% {
opacity: 0;
-ms-transform: rotate(900deg);
}

}

@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}

30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}

39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}

70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}

75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}

76% {
opacity: 0;
-o-transform:rotate(900deg);
}

100% {
opacity: 0;
-o-transform: rotate(900deg);
}

}

@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}

7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}

30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}

39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}

70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}

75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}

76% {
opacity: 0;
transform:rotate(900deg);
}

100% {
opacity: 0;
transform: rotate(900deg);
}

}