.body{
    font-size:100%;
}

/* 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;
}
li.tab{height:25px;}
#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;
}