﻿ html {
/*  background: url(kuvatausta.jpg) no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 	*/
}

body {
margin: 0%;
background:transparent;
}

#kokoasu {
width:100%;
}

#otsikko {
width:74%;
font-family:'Times New Roman', serif;
font-size: 340%;
color: #000;
text-transform:uppercase;
font-weight:bold;
text-align:center;
margin:2% auto 2% auto;
background:transparent;
}

#teksti {
width:90%;
padding-bottom:2%;
padding-top:0;
margin:auto;
text-align:justify;
background:#fff;
line-height:1.8; 
}

	@media screen and (min-width: 1000px) {
	#teksti {
	width:60%;
	padding:2%;
	padding-top:0;
	margin:auto;
	text-align:justify;
	background:#fff;
	line-height:1.8; 
	}
	}

#copyt {
width:74%;
margin:auto;
text-align:right;
background:transparent;
margin-top:10px;
margin-bottom:50px;
font-size:80%;
line-height:1.8; 
}

.valiotsikko {
font-family:'Times New Roman', serif;
font-size: 500%;
color: #000;
text-transform:uppercase;
font-weight:bold;
text-align:center;
background:transparent;
width:100%;
padding-top:4%;
padding-bottom:0;
}

.haastattelu {
width:100%;
background-color:#fff;
background-attachment: scroll;
	}

	@media screen and (min-width: 1000px) {
	.haastattelu {
	width:100%;
	background-color:#fff;
	background-repeat: no-repeat;
	background-position: left bottom; 
	background-size: cover;
	background-attachment: fixed;
	}
	}

.haastattelu_reunus {
width:100%;
/*margin:auto;*/
padding:5% 0 5% 0;
background: rgba(255, 255, 255, 0.7);
}

	@media screen and (min-width: 1000px) {
	.haastattelu_reunus {
	width:74%;
	margin:auto;
	padding:5% 0 5% 0;
	background: rgba(255, 255, 255, 0.8);
	}
	}

.haastattelu_sisalto {
background-color:transparent;
width:100%;
margin:auto;
margin-right:4px;
}

	@media screen and (min-width: 1000px) {
	.haastattelu_sisalto {
	background-color:#fff;
	width:80%;
	margin:auto;
	padding:2%;
	}
	}

img {
    max-width: 100%;
    height: auto;
}

/*FONTS o SISÄLTÖ*/

h1 {
text-transform: uppercase;
font-family: Cambria;
color:#669999;
font-style:italic;
font-size:120%;
padding-left:1%;
}

.nimiotsikko {
font-family:'Times New Roman', Georgia, serif;
font-size: 2.5em;
color: #000;
text-transform:uppercase;
font-weight:bold;
text-align:center;
line-height:1;
}

	@media screen and (min-width: 1000px) {
	.nimiotsikko {
	font-family:'Times New Roman', Georgia, serif;
	font-size: 400%;
	color: #000;
	text-transform:uppercase;
	font-weight:bold;
	text-align:center;
	line-height:1;
	}
	}

.kuvakeskitys {
text-align:center;
}

.kuva {
box-shadow: 0px 0px 0px 0px #999;
margin:1% auto 1% auto;
border:8px solid #fff;
border-bottom:8px solid #fff;
}	

	@media screen and (min-width: 1000px) {
	.kuva {
	box-shadow: 0px 0px 5px 1px #999;
	margin:1% auto 1% auto;
	border:8px solid #fff;
	}	
	}

#teksti  {
font-family:Cambria, Georgia, serif;
font-size: 1.2em;
color: #000;
line-height:1.5; 
}

	@media screen and (min-width: 1000px) {
	#teksti {
	font-family:Cambria, Georgia, serif;
	font-size: 100%;
	color: #111;
	line-height:1.8; 
	}
	}

.kysymys {
font-weight:bold;
line-height:1;
font-family:Cambria, Georgia, serif;
font-size: 1.2em;
color: #000;
}

	@media screen and (min-width: 1000px) {
	.kysymys {
	line-height:1;
	font-family:Cambria, Georgia, serif;
	font-size: 100%;
	color: #111;
	}
	}

.svar {
padding-left:3%; margin-right:2%; line-height:1.1;
font-family:Cambria, Georgia, serif;
	font-size: 1.2em;
	color: #000;
}

	@media screen and (min-width: 1000px) {
	.svar {
	line-height:1.1;
	font-family:Cambria, Georgia, serif;
	font-size: 100%;
	color: #111;
	}
	}

.tt {
background-color:transparent;
padding-left:3%;
padding-right:3%;
text-align:left;
line-height:1.2; 
font-family:Cambria, Georgia, serif;
font-size: 1.2em;
}

	@media screen and (min-width: 1000px) {
	.tt {
	text-align:justify;
	font-family:Cambria, Georgia, serif;
	font-size: 100%;
	}	
	}

.infoloota {
font-size: 1.2em;
color: #000;
line-height:1.5; 
padding:3% 5% 3% 5%; 
margin:0 5% 0 5%; 
background-color:transparent;
border:3px double #666;
border-radius: 15px 50px;
}

	@media screen and (min-width: 1000px) {
	.infoloota {
	font-size: 1.0em;
	color: #111;
	line-height:1.8; 
	}
	}

* {
font-family:Cambria, Georgia, serif;
font-size: 1.2em;
color: #000;
line-height:1.5; 
}

	@media screen and (min-width: 1000px) {
	* {
	font-family:Cambria, Georgia, serif;
	font-size: 100%;
	color: #111;
	line-height:1.8; 
	}
	}


ul, li {
font-family:Cambria, Calibri, Sans-Serif;
font-size: 1.0em;
color: #000;
line-height:1.5; 
}

	@media screen and (min-width: 1000px) {
	ul, li {
	font-family:Cambria, Calibri, Sans-Serif;
	font-size: 100%;
	color: #111;
	line-height:1.8; 
	}
	}

em {
font-family:Cambria, Calibri, Sans-Serif;
font-size: 1.0em;
color: #000;
line-height:1.5; 
}

	@media screen and (min-width: 1000px) {
	em {
	font-family:Cambria, Calibri, Sans-Serif;
	font-size: 100%;
	color: #111;
	line-height:1.8; 
	}
	}

a:link, a:visited {
font-size: 1.0em;
text-decoration: underline;
}

	@media screen and (min-width: 1000px) {
	a:link, a:visited {
	font-size: 1.0em;
	}
	}


a:hover {
text-decoration: none;
font-size: 1.0em;
}

	@media screen and (min-width: 1000px) {
	a:hover {
	font-size: 1.0em;
	}
	}


#kielet {
width:100%;
background-color:#ccc;
text-align:center;
padding:2% 0 2% 0;
font-size:1.4em;
}

	@media screen and (min-width: 1000px) {
	#kielet {
	background:transparent;
	position:fixed; 
	top:1%; 
	right:1%;
	width:10%;
	padding:1% 0 1% 0;
	font-size: 1.2em;
	}
	}

/*KUVIEN REUNUSTEN VÄRIT*/

#haastis {background-image: no-image;} /*inforuutu*/

	#haastis1 {background-image: url("http://dreamingindividuals.net/taustateresa2.jpg");} /*Teresa*/


	#haastis2 {background-image: url("http://dreamingindividuals.net/taustakigeni.jpg");} /*Kigeni*/
	#haastis3 {background-image: url("http://dreamingindividuals.net/taustapapaa.jpg");} /*Papaa*/
	#haastis4 {background-image: url("http://dreamingindividuals.net/taustaeminem.jpg");} /*Eminem*/
	#haastis5 {background-image: url("http://dreamingindividuals.net/taustaazizi.jpg");} /*Azizi*/
	#haastis6 {background-image: url("http://dreamingindividuals.net/taustaabdullah.jpg");} /*Abdullah taxi*/
	#haastis7 {background-image: url("http://dreamingindividuals.net/taustamaryam.jpg");} /*Maryam*/
	#haastis8 {background-image: url("http://dreamingindividuals.net/taustazulubu.jpg");} /*Zulubu*/
	#haastis9 {background-image: url("http://dreamingindividuals.net/taustaabdullah2.jpg");} /*Abdullah*/
	#haastis10 {background-image: url("http://dreamingindividuals.net/taustaingemar3.jpg");} /*Ingemar*/
	#haastis11 {background-image: url("http://dreamingindividuals.net/taustamildred.jpg");} /*Mildred*/
	#haastis12 {background-image: url("http://dreamingindividuals.net/taustamartin.jpg");} /*Martin*/ 
	#haastis13 {background-image: url("http://dreamingindividuals.net/taustamaija.jpg");} /*Maija*/
	#haastis14 {background-image: url("http://dreamingindividuals.net/taustajenny.jpg");} /*Jenny*/
	#haastis15 {background-image: url("http://dreamingindividuals.net/taustaandre.jpg");} /*Andre*/
	#haastis16 {background-image: url("http://dreamingindividuals.net/taustaidris.jpg");} /*Idris*/
	#haastis17 {background-image: url("http://dreamingindividuals.net/taustagreta.jpg");} /*Greta*/
	#haastis18 {background-image: url("http://dreamingindividuals.net/tausta18.jpg");} /**/
	