.body{
    font-size:100%;
	background-color: #2A2A2A;
}

/* wp:n ja muiden typerien mobiilien (jolla) takia viewport-pakotukset */
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* Pienet apuluokat ja muut semmoset alustukset */

.spacer-top-xs { margin-top: 10px; }
.spacer-bottom-xs { margin-bottom: 10px; }
.spacer-both-xs { margin-bottom: 10px; margin-top: 10px; }

.spacer-top-sm { margin-top: 20px; }
.spacer-bottom-sm { margin-bottom: 20px; }
.spacer-both-sm { margin-bottom: 20px; margin-top: 20px; }

.spacer-top-md { margin-top: 30px; }
.spacer-bottom-md { margin-bottom: 30px; }
.spacer-both-md { margin-bottom: 30px; margin-top: 30px; }

.spacer-top-lg { margin-top: 40px; }
.spacer-bottom-lg { margin-bottom: 40px; }
.spacer-both-lg { margin-bottom: 40px; margin-top: 40px; }

.handwriting {font-family: 'Architects Daughter', cursive; color:#b8041d;}
.tyylitelty {font-family: 'Oleo Script', cursive;}

.otsikko-lg {font-family: 'Oleo Script', cursive; font-size: xx-large;}
.otsikko-md {font-family: 'Oleo Script', cursive; font-size: x-large;}
.otsikko-sm {font-family: 'Oleo Script', cursive; font-size: medium;}

a.kuvalinkki:hover,
a.kuvalinkki:active,
a.kuvalinkki:link,
a.kuvalinkki:visited { font-size:xx-small;  }
.fa-chevron-left, .fa-chevron-right{color:white;text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;} 
.fa-chevron-left:hover, .fa-chevron-right:hover{color:lightblue;text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;} 
.handwriting {font-family: 'Architects Daughter', cursive;}
.green { color: #84C225;}
.blue { color: #5BC0DE;}
.alpha70 {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.7);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.kuvake{
    background-color: #ffffff;
    moz-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: inset #B3B3B3 -1px -1px 0 0;
    -webkit-box-shadow: inset #B3B3B3 -1px -1px 0 0;
    box-shadow: inset #B3B3B3 -1px -1px 0 0;
}

#tekstimainosbox{
    height: 60px;
    width: 16.66%;
    display:table-cell; 
    vertical-align:middle;
    text-align:center;
    background: #3d3d3d;
    border: 1px solid black;
    color:white;
    font-size:9px;
}

#tekstimainosbox a:link { 
    font-family: Verdana, Arial;
    font-size:9px;
    font-weight:bold;
    color: white;
}	

.topad{
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: 980px;
}
/* LATAUSNAPPULA */
.fileUpload {
    position: relative;
    overflow: hidden;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    opacity: 0;
    filter: alpha(opacity=0);
}
.editInput {
    display: none;
}
.editDInput {
    display: none;
}
.editULInput {
    display: none;
}
#upload_frame {
 display:none;
 height:0;
 width:0;
}
#msg {
 border-radius:5px;
 padding:5px;
 display:none;
 width:200px;
 font:italic 13px/18px arial,sans-serif;
}

/* facebookboksin tyylittely */
#fbbox{
    height: 70px;
    width: 220px;
    background: #e5e5e5;
    float:right;
    margin-right:20px;
    -webkit-border-radius: 1px 8px 1px 8px;
    -khtml-border-radius:  1px 8px 1px 8px;
    -moz-border-radius: 1px 8px 1px 8px;
    border-radius: 1px 8px 1px 8px;
}


.bubble 
{
position: relative;
width: 250px;
height: 20px;
padding: 0px;
font-size:x-small;
background: #FFFFFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #DDDDDD  solid 1px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 5px 5px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -5px;
left: 19px;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 5px 5px 0;
border-color: #DDDDDD  transparent;
display: block;
width: 0;
z-index: 0;
bottom: -6px;
left: 19px;
}




#notification_li
{
position:relative
}
#notificationContainer 
{
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 40px;
margin-left: -178px;
width: 400px;
z-index: 1;
display: none; // Enable this after jquery implementation 
}

#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle
{
font-weight: bold;
padding: 8px;
font-size: 13px;
background-color: #ffffff;
position: fixed;
z-index: 1000;
width: 384px;
border-bottom: 1px solid #dddddd;
}
#notificationsBody
{
padding: 0px 0px 0px 0px !important;
min-height:300px;
}
#notificationFooter
{
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}

#notification_count 
{
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 20px;
border-radius: 9px;
-moz-border-radius: 9px; 
-webkit-border-radius: 9px;
position: absolute;
margin-top: -11px;
font-size: 11px;
}

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

#overlayad {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(0.3deg); }
   95% { transform: rotate(-0.3deg); }
  100% { transform: rotate(0deg); }
}

.wiggle {
  display: inline-block;
  animation: wiggle 1.0s infinite;
}

.wiggle:hover {
  animation: none;
}

@keyframes pulse_animation {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(1.18); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(1.15); }
	80% { transform: scale(1); }
	100% { transform: scale(1); }
}
.pulse {
	animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


@keyframes pulse_animation_text {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(1.10); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(1.06); }
	80% { transform: scale(1); }
	100% { transform: scale(1); }
}
.pulse_text {
	animation-name: pulse_animation_text;
	animation-duration: 2300ms;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.area {

  animation: blur 1.75s ease-out infinite;
  text-shadow: 0px 0px 3px #fff, 0px 0px 3px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 2px #fff,
      0px 0px 2px #fff, 
      0px 0px 6px #fff,
      0px 0px 6px #fff,
      0px 0px 6px #fff,
      0px 0px 6px #fff,
      0px 0px 6px #fff,
      0px 0px 6px #fff,
      0px 0px 12px #fff,
      0px 0px 12px #fff,
      0px 0px 12px #a02b3b,
      0px 0px 36px #a02b3b,
      0px 2px 25px #a02b3b,
      0px 2px 25px #a02b3b,
      0px 2px 25px #a02b3b,
      0px 2px 25px #a02b3b,
      0px -2px 25px #a02b3b,
      0px -2px 25px #a02b3b;
  }
}


.form-control  {
		background-color : #424242;
		color : #c6c6c6; 
}
.well {
	border-color: #424242;
}
.panel {
	background-color:#1c1919;
	border-color: #424242;
}