/** et opi kopioimalla mitään, opettele kirjottamaan omat tyylis **/

body {
background-color:white;
background-image: linear-gradient(90deg, rgba(0,150,255,.5) 50%, transparent 50%),
linear-gradient(rgba(0,150,255,.5) 50%, transparent 50%);
background-size:50px 50px;
}

/** pienet ruuvaukset **/
.admin:after {content: " ja ylläpidon lemmikki ;) ;)" !important;}
.usertitle {color: black !important; text-align: center !important; margin-bottom: 5px !important;}
.box {background-color: #33333 !important; }
.header {text-align: center !important;}
.infolist {margin-bottom: 2px !important;}
.marginb {margin-bottom: 0 !important;}
.panel-heading {background-color: #333333 !important; padding-left: 15px !important;}
#comment {margin-left: 10px !important; width: 95% !important;}
#commentbox {margin-left: 10px !important; margin-right: 10px !important; padding-right: 40px !important;}
#image {margin-top: 18px !important; margin-bottom: 0 !important;}

@-webkit-keyframes tarina {
  50% {
    -webkit-transform: translateX(6px) rotate(4deg);
    transform: translateX(6px) rotate(4deg);
  }
  100% {
    -webkit-transform: translateX(-6px) rotate(-4deg);
    transform: translateX(-6px) rotate(-4deg);
  }
}

@keyframes tarina {
  50% {
    -webkit-transform: translateX(6px) rotate(4deg);
    transform: translateX(6px) rotate(4deg);
  }
  100% {
    -webkit-transform: translateX(-6px) rotate(-4deg);
    transform: translateX(-6px) rotate(-4deg);
  }
}

#tarina {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#image:hover, #image:focus, #image:active {
  -webkit-animation-name: tarina;
  animation-name: tarina;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

#js-bootstrap-offcanvas:hover {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

 .input-group:before {
@import url(http://fonts.googleapis.com/css?family=Passero+One);
margin-left: 10% !important;
 content: "kommenttii pls!" !important;  
/**color: rgba(255,75,150,.5) !important;**/
  class="support css-property">-webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: help;
  border: none;
  font: normal 72px/normal "Passero One", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
} @media (min-width: 1025px) {.dropdown-menu, .modal-content, .panel, .list-group-item {  background-color: rgba(250, 250, 250, 0.9); } }html, body {background: #264A66;background-attachment: inherit;}.nav-pills>li>a {color: #2f84c0 }body a {color: #1c4f73 } .nav-pills>li {background: rgba(235,243,249,0.9) } body .navbar-inverse .navbar-nav>li>a:hover, body .nav-pills .active a:hover, body .btn-info:hover, body a.list-group-item.active:hover {background-color: #13354d } body .smallertop {background-color: #266a9a } body .btn-info, body a.list-group-item.active, body .nav-pills .active a { background-color: #2F84C0 } body .panel, body .btn-info, body .btn-info:hover, body a.list-group-item.active, body .navbar-orange { border-color: #266a9a; } .dropdown-menu a { color: #333; } .panel-default>.panel-heading { background-color: #599dcd; } .blogTitle, a.list-group-item.active, body .navbar-orange .navbar-nav>li>a, .navbar-inverse .col-sm-12:not(.smallertop) .navbar-nav>li>a, .panel-default>.panel-heading, body .nav-pills .active a, .btn-info { color:#ffffff; } body a.navbar-brand .rezregular { color:#ffffff !important; } 
        
        /** et opi kopioimalla mitään, opettele kirjottamaan omat tyylis **/

body {
background-color:white;
background-image: linear-gradient(90deg, rgba(0,150,255,.5) 50%, transparent 50%),
linear-gradient(rgba(0,150,255,.5) 50%, transparent 50%);
background-size:50px 50px;
}

/** pienet ruuvaukset **/
.admin:after {content: " ja ylläpidon lemmikki ;) ;)" !important;}
.usertitle {color: black !important; text-align: center !important; margin-bottom: 5px !important;}
.box {background-color: #33333 !important; }
.header {text-align: center !important;}
.infolist {margin-bottom: 2px !important;}
.marginb {margin-bottom: 0 !important;}
.panel-heading {background-color: #333333 !important; padding-left: 15px !important;}
#comment {margin-left: 10px !important; width: 95% !important;}
#commentbox {margin-left: 10px !important; margin-right: 10px !important; padding-right: 40px !important;}
#image {margin-top: 18px !important; margin-bottom: 0 !important;}

@-webkit-keyframes tarina {
  50% {
    -webkit-transform: translateX(6px) rotate(4deg);
    transform: translateX(6px) rotate(4deg);
  }
  100% {
    -webkit-transform: translateX(-6px) rotate(-4deg);
    transform: translateX(-6px) rotate(-4deg);
  }
}

@keyframes tarina {
  50% {
    -webkit-transform: translateX(6px) rotate(4deg);
    transform: translateX(6px) rotate(4deg);
  }
  100% {
    -webkit-transform: translateX(-6px) rotate(-4deg);
    transform: translateX(-6px) rotate(-4deg);
  }
}

#tarina {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#image:hover, #image:focus, #image:active {
  -webkit-animation-name: tarina;
  animation-name: tarina;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

#js-bootstrap-offcanvas:hover {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

 .input-group:before {
@import url(http://fonts.googleapis.com/css?family=Passero+One);
margin-left: 10% !important;
 content: "kommenttii pls!" !important;  
/**color: rgba(255,75,150,.5) !important;**/
  class="support css-property">-webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: help;
  border: none;
  font: normal 72px/normal "Passero One", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
} @media (max-width: 767px) {
.navbar-offcanvas {
  left: -250px;}
}