/* css luotu - $DateTime: 2017-09-01 19:39$ */
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');
@import url('https://fonts.googleapis.com/css?family=Tangerine');

@font-face {
    font-family: Learning Curve;
    src: url(http://tahtikvartsi.suntuubi.com/datafiles/userfiles/Custom/LearningCurve%5B1%5D.ttf);
}

::-moz-selection {
color: #ffffff; background: #8baec1; }
::selection { color: #ffffff; background: #8baec1; }

img {
background: url(http://tahtikvartsi.suntuubi.com/datafiles/userfiles/Image/Grafiikka/T%C3%A4htikvartsi-marmori.jpg);
border-radius: 2px;
}

b, strong { font-weight: normal !important; color: #8baec1; text-shadow: 0px 0px 1px #8baec1; }

i, em { color: #8baec1; }

a:link, a:visited {
color: #8baec1;
text-decoration: none;
}

a:hover {
color: #8a8787;
text-decoration: none;
}

h1 {
font-size: 52px;
font-family: learning curve;
font-weight: normal;
text-align: center;
color: #8baec1;
margin: 3px;
}

h2 {
font-size: 32px;
font-family: tangerine;
color: #000000;
text-align: left;
font-weight: normal;
margin: 5px;
}

h2:after {
content: " ★";
font-family: arial;
font-size: 16px;
color: #000000;
}

h3 {
color: #8a8787;
font-family: georgia;
font-size: 16px;
font-weight: normal;
text-align: center;
letter-spacing: 2px;
background: url(http://tahtikvartsi.suntuubi.com/datafiles/userfiles/Image/Grafiikka/Hopeakaura-vieraskirja.png);
margin: 5px;
padding: 3.5px 0px 4.5px 0px;
border: 1px solid #000000;
}

.paalinkit,paalinkit:visited {
font-size: 14px;
font-family: georgia;
font-style: italic;
font-weight: normal;
text-align: left;
text-shadow: 0px 0px 1px #8a8787;
color: #8a8787 !important;
}

.paalinkit:hover {
font-size: 14px;
font-family: georgia;
font-style: italic;
font-weight: normal;
text-align: left;
text-shadow: 0px 0px 1px #8baec1;
color: #8baec1 !important;
}

.paalinkitactive,paalinkitactive:active {
font-size: 14px;
font-family: georgia;
font-style: italic;
font-weight: normal;
text-align: left;
text-shadow: 0px 0px 1px #8baec1;
color: #8baec1 !important;
}

.paalinkitactive:hover {
font-size: 14px;
font-family: georgia;
font-style: italic;
font-weight: normal;
text-align: left;
text-shadow: 0px 0px 1px #8baec1;
color: #8baec1 !important;
}

.paalinkit:before {
content: url(http://tahtikvartsi.suntuubi.com/datafiles/userfiles/Image/Grafiikka/bling.png);
}

.paalinkitactive:before {
content: url(http://tahtikvartsi.suntuubi.com/datafiles/userfiles/Image/Grafiikka/bling.png);
}

/* NOTESNOTESNOTESNOTES */

note { 
display: block;
padding:25px 25px 25px 25px;
margin:0 auto 20px auto;
width:100px;
height:100px;   
font-family: reenie beanie;
font-size: 20px;
line-height:1.2;
border:0;
border-radius:3px;
background: -webkit-linear-gradient(#FF69B4, #FF1493);
background: -moz-linear-gradient(#FF69B4, #FF1493);
background: -o-linear-gradient(#FF69B4, #FF1493);
background: -ms-linear-gradient(#FF69B4, #FF1493);
background: linear-gradient(#FF69B4, #FF1493);
box-shadow: 0 5px 5px rgba (0,0,0,0.15);
overflow:hidden;
transition:box-shadow 0.5s ease;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
}

note:hover {
box-shadow:0 8px 8px rgba(0,0,0,0.15); 
width: 100px;
height: 100px; 
-ms-transform: rotate(7deg);
/* IE 9 */
-webkit-transform: rotate(7deg); 
/* Chrome, Safari, Opera */ 
transform: rotate(7deg); 
-moz-transition: all 0.30s ease-in-out; 
-o-transition: all 0.30s ease-in-out; 
-webkit-transition: all 0.30s ease-in-out;}

note:focus { 
box-shadow:0 5px 12px rgba(0,0,0,0.2); 
outline:none; 
}

note2 { 
display: block;
padding:25px 25px 25px 25px;
margin:0 auto 20px auto;
width:100px;
height:100px;   
font-family: reenie beanie;
font-size: 20px;
line-height:1.2;
border:0;
border-radius:3px;
background: -webkit-linear-gradient(#00FF00, #32CD32);
background: -moz-linear-gradient(#00FF00, #32CD32);
background: -o-linear-gradient(#00FF00, #32CD32);
background: -ms-linear-gradient(#00FF00, #32CD32);
background: linear-gradient(#00FF00, #32CD32);
box-shadow: 0 5px 5px rgba (0,0,0,0.15);
overflow:hidden;
transition:box-shadow 0.5s ease;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
}

note2:hover {
box-shadow:0 8px 8px rgba(0,0,0,0.15); 
width: 100px;
height: 100px; 
-ms-transform: rotate(-7deg);
/* IE 9 */
-webkit-transform: rotate(-7deg); 
/* Chrome, Safari, Opera */ 
transform: rotate(-7deg); 
-moz-transition: all 0.30s ease-in-out; 
-o-transition: all 0.30s ease-in-out; 
-webkit-transition: all 0.30s ease-in-out;}

note2:focus { 
box-shadow:0 5px 12px rgba(0,0,0,0.2); 
outline:none; 
}

note3 { 
display: block;
padding:25px 25px 25px 25px;
margin:0 auto 20px auto;
width:100px;
height:100px;   
font-family: reenie beanie;
font-size: 20px;
line-height:1.2;
border:0;
border-radius:3px;
background: -webkit-linear-gradient(#6495ED, #00008B);
background: -moz-linear-gradient(#6495ED, #00008B);
background: -o-linear-gradient(#6495ED, #00008B);
background: -ms-linear-gradient(#6495ED, #00008B);
background: linear-gradient(#6495ED, #00008B);
box-shadow: 0 5px 5px rgba (0,0,0,0.15);
overflow:hidden;
transition:box-shadow 0.5s ease;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
}

note3:hover {
box-shadow:0 8px 8px rgba(0,0,0,0.15); 
width: 100px;
height: 100px; 
-ms-transform: rotate(7deg);
/* IE 9 */
-webkit-transform: rotate(7deg); 
/* Chrome, Safari, Opera */ 
transform: rotate(7deg); 
-moz-transition: all 0.30s ease-in-out; 
-o-transition: all 0.30s ease-in-out; 
-webkit-transition: all 0.30s ease-in-out;}

note3:focus { 
box-shadow:0 5px 12px rgba(0,0,0,0.2); 
outline:none; 
}

note4 { 
display: block;
padding:25px 25px 25px 25px;
margin:0 auto 20px auto;
width:100px;
height:100px;   
font-family: reenie beanie;
font-size: 20px;
line-height:1.2;
border:0;
border-radius:3px;
background: -webkit-linear-gradient(#FFA500, #FF8C00);
background: -moz-linear-gradient(#FFA500, #FF8C00);
background: -o-linear-gradient(#FFA500, #FF8C00);
background: -ms-linear-gradient(#FFA500, #FF8C00);
background: linear-gradient(#FFA500, #FF8C00);
box-shadow: 0 5px 5px rgba (0,0,0,0.15);
overflow:hidden;
transition:box-shadow 0.5s ease;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
}

note4:hover {
box-shadow:0 8px 8px rgba(0,0,0,0.15); 
width: 100px;
height: 100px; 
-ms-transform: rotate(-7deg);
/* IE 9 */
-webkit-transform: rotate(-7deg); 
/* Chrome, Safari, Opera */ 
transform: rotate(-7deg); 
-moz-transition: all 0.30s ease-in-out; 
-o-transition: all 0.30s ease-in-out; 
-webkit-transition: all 0.30s ease-in-out;}

note4:focus { 
box-shadow:0 5px 12px rgba(0,0,0,0.2); 
outline:none; 
}

note5 { 
display: block;
padding:25px 25px 25px 25px;
margin:0 auto 20px auto;
width:100px;
height:100px;   
font-family: reenie beanie;
font-size: 20px;
line-height:1.2;
border:0;
border-radius:3px;
background: -webkit-linear-gradient(#ADD8E6, #87CEEB);
background: -moz-linear-gradient(#ADD8E6, #87CEEB);
background: -o-linear-gradient(#ADD8E6, #87CEEB);
background: -ms-linear-gradient(#ADD8E6, #87CEEB);
background: linear-gradient(#ADD8E6, #87CEEB);
box-shadow: 0 5px 5px rgba (0,0,0,0.15);
overflow:hidden;
transition:box-shadow 0.5s ease;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
}

note5:hover {
box-shadow:0 8px 8px rgba(0,0,0,0.15); 
width: 100px;
height: 100px; 
-ms-transform: rotate(-7deg);
/* IE 9 */
-webkit-transform: rotate(-7deg); 
/* Chrome, Safari, Opera */ 
transform: rotate(-7deg); 
-moz-transition: all 0.30s ease-in-out; 
-o-transition: all 0.30s ease-in-out; 
-webkit-transition: all 0.30s ease-in-out;}

note5:focus { 
box-shadow:0 5px 12px rgba(0,0,0,0.2); 
outline:none; 
}

note6 { 
display: block;
padding:25px 25px 25px 25px;
margin:0 auto 20px auto;
width:100px;
height:100px;   
font-family: reenie beanie;
font-size: 20px;
line-height:1.2;
border:0;
border-radius:3px;
background: -webkit-linear-gradient(#D3D3D3, #A9A9A9);
background: -moz-linear-gradient(#D3D3D3, #A9A9A9);
background: -o-linear-gradient(#D3D3D3, #A9A9A9);
background: -ms-linear-gradient(#D3D3D3, #A9A9A9);
background: linear-gradient(#D3D3D3, #A9A9A9);
box-shadow: 0 5px 5px rgba (0,0,0,0.15);
overflow:hidden;
transition:box-shadow 0.5s ease;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
}

note6:hover {
box-shadow:0 8px 8px rgba(0,0,0,0.15); 
width: 100px;
height: 100px; 
-ms-transform: rotate(7deg);
/* IE 9 */
-webkit-transform: rotate(7deg); 
/* Chrome, Safari, Opera */ 
transform: rotate(7deg); 
-moz-transition: all 0.30s ease-in-out; 
-o-transition: all 0.30s ease-in-out; 
-webkit-transition: all 0.30s ease-in-out;}

note6:focus { 
box-shadow:0 5px 12px rgba(0,0,0,0.2); 
outline:none; 
}

note7 { 
display: block;
padding:25px 25px 25px 25px;
margin:0 auto 20px auto;
width:100px;
height:100px;   
font-family: reenie beanie;
font-size: 20px;
line-height:1.2;
border:0;
border-radius:3px;
background: -webkit-linear-gradient(#FFFFCC, #FFFF66);
background: -moz-linear-gradient(#FFFFCC, #FFFF66);
background: -o-linear-gradient(#FFFFCC, #FFFF66);
background: -ms-linear-gradient(#FFFFCC, #FFFF66);
background: linear-gradient(#FFFFCC, #FFFF66);
box-shadow: 0 5px 5px rgba (0,0,0,0.15);
overflow:hidden;
transition:box-shadow 0.5s ease;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
}

note7:hover {
box-shadow:0 8px 8px rgba(0,0,0,0.15); 
width: 100px;
height: 100px; 
-ms-transform: rotate(-7deg);
/* IE 9 */
-webkit-transform: rotate(-7deg); 
/* Chrome, Safari, Opera */ 
transform: rotate(-7deg); 
-moz-transition: all 0.30s ease-in-out; 
-o-transition: all 0.30s ease-in-out; 
-webkit-transition: all 0.30s ease-in-out;}

note7:focus { 
box-shadow:0 5px 12px rgba(0,0,0,0.2); 
outline:none; 
}

note8 { 
display: block;
padding:25px 25px 25px 25px;
margin:0 auto 20px auto;
width:100px;
height:100px;   
font-family: reenie beanie;
font-size: 20px;
line-height:1.2;
border:0;
border-radius:3px;
background: -webkit-linear-gradient(#D8BFD8, #DDA0DD);
background: -moz-linear-gradient(#D8BFD8, #DDA0DD);
background: -o-linear-gradient(#D8BFD8, #DDA0DD);
background: -ms-linear-gradient(#D8BFD8, #DDA0DD);
background: linear-gradient(#D8BFD8, #DDA0DD);
box-shadow: 0 5px 5px rgba (0,0,0,0.15);
overflow:hidden;
transition:box-shadow 0.5s ease;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
}

note8:hover {
box-shadow:0 8px 8px rgba(0,0,0,0.15); 
width: 100px;
height: 100px; 
-ms-transform: rotate(7deg);
/* IE 9 */
-webkit-transform: rotate(7deg); 
/* Chrome, Safari, Opera */ 
transform: rotate(7deg); 
-moz-transition: all 0.30s ease-in-out; 
-o-transition: all 0.30s ease-in-out; 
-webkit-transition: all 0.30s ease-in-out;}

note8:focus { 
box-shadow:0 5px 12px rgba(0,0,0,0.2); 
outline:none; 
}