#code {
height: 400px !important;
}

html {
background-color: black;
}
body {
background-image: url("http://i.imgur.com/DovRLru.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center; 

}
.panel {
background-color: #080400;
border-radius: 0%;
opacity: 1.0;
color: white !important;
border: none;
}

p {
color: #FFF2EB;
font-family: "Century Gothic";
}
a{
transition: color 0.2s!important;
}
.btn {
border-radius: 0%;
}
#image img {
box-shadow: 8px 10px 1px #171615;
opacity: 1.0 !important;
}

b {
color: #FFF2EB;
}
dt {
color: #FFF2EB;
font-family: "Century Gothic"!important;
}
dd {
color: #FFF2EB;
font-family: "Century Gothic"!important;
}
td {
color: #FFF2EB;
font-family: "Century Gothic"!important;
}
.white {
border-radius: 0px;
}
.usertitle{
color: white;
font-family: "Century Gothic";
}
br {
color: white;
font-family: "Century Gothic";
}

/* VÄRI pieni yläpalkki */
.smallertop {
background-color: #d67ab2;
}
.smallertop a {
color: black !important;
transition: background-color 0.2s;
}
.smallertop a {
color: black !important;
transition: background-color 0.2s;
}
.smallertop li ul li {
color: white !important;
transition: background-color 0.2s;
}
#search_box {
background-color: #516C75;
}


#frame{
transition: transform 0.2s;
}
#frame:hover {
transform: rotate(1deg)!important;
}
.rezregular {
visibility: hidden;
width: 0px;
padding-top: 5px;
}
.rezregular:after {
padding-top: 6px;
content:'mandariini'; 
visibility: visible;
display: block;
width: 30px;
float: left;
color: orange;
}

.navbar-brand small {
display: none;
}

.navbar-brand:hover {
background-image: url("http://www.emoji.co.uk/files/twitter-emojis/food-drink-twitter/10773-tangerine.png");
background-size: contain;

}
#comment {
transform: rotate(-180deg)!important;
transition: transform 0.5s;
color: magenta;
}
#comment:focus {
transform: rotate(0deg)!important;
background-color:pink;
font-family:"Comic Sans MS", cursive, sans-serif;
}
::selection {
background: #a0678c;
}

/* VÄRI tekstin maalaus */
::-moz-selection {
background: #6893A1;
}
.plussa {
transition: transform 0.5s;
}
.plussa:hover {
transform: translateY(-40px) rotate(90deg);
}
#cometchat_userstab_text {
transform: rotate(180deg)!important;
font-family:"Comic Sans MS", cursive, sans-serif;
}
.ovari {
background-color:  black !important;
color: white !important;
}
.list-group a {
background-color: #333;
color: white;
border-color: #444;
}

/* VÄRI nappi hover */
a.list-group-item:hover, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background-color: #a0678d !important;
color: white !important;
}
a.list-group-item:hover, .dropdown-menu > li > a:hover, .dropdown-menu > li > a {
color: white !important;
}

/* VÄRI dropdown hoveri */
.navbar-nav li:hover, .navbar-nav a:hover {
background-color: #a0678d !important;
}
.profilemenu li a {
background-color: black;
color: white;
transition: color 80ms;
}
.profilemenu li a:hover {
color: black;
}
.profilemenu li a:active {
color: black;
}

.profilemenu li {
transition:transform 80ms
}

.profilemenu li:hover:not(.hidden-xs) {
transform:scale(1.1,1.1);
z-index:1000000
}

.dropdown-menu, .modal-content, .panel, .list-group-item {
background-color: black !important;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: #0A0A0A !important;
color: black !important;
}

/*
.usertitle + div {
animation-name: infoboksi;
animation-duration: 100ms;
animation-iteration-count: infinite;
}

@keyframes infoboksi{
0%   {transform: translateY(10px);}
50%   {transform: translateY(-10px);}
100% {transform: translateY(10px);}
 }*/

img[src="/widgets/christmasball.png"] {

width: 0px !important;
height: 0px !important;
padding: 37px;
background-image: url("http://www.emoji.co.uk/files/twitter-emojis/food-drink-twitter/10773-tangerine.png");
background-size: contain;
animation-name: mandariini;
animation-duration: 1s;
animation-iteration-count: infinite;
transform-origin: center bottom;
}

@keyframes mandariini {
0% {
transform: translateY(0px) rotate(40deg);
animation-timing-function: ease-out;
}

22.5% {
transform: translateY(-60px) rotate(30deg);
animation-timing-function: ease-in;
}

27.5% {
transform: translateY(-60px) rotate(30deg);
animation-timing-function: ease-in;
}

50% {
transform: translateY(0px) rotate(40deg);
animation-timing-function: ease-out;
}

72.5% {
transform: translateY(-40px) rotate(50deg);
animation-timing-function: ease-in;
}

77.5% {
transform: translateY(-40px) rotate(50deg);
animation-timing-function: ease-in;
}

100% {
transform: translateY(0px) rotate(40deg);
animation-timing-function: ease-out;
}
} @media (max-width: 767px) {
.navbar-offcanvas {
  left: -250px;}
}