/* CSS Document */
/* this are genrel things - like a. <p>... */
body {font-family:verdana;}

h1 {font-size:18px;font-weight:bold;font-family:Arial, Helvetica, sans-serif;}
h3 {font-size:15px;font-weight:bold;font-family:Arial, Helvetica, sans-serif;}

/*structure - the same at every html*/
/*generel body with background white to black */
body {
background-image:url(../pictures/bg.jpg);
background-position:top;
background-repeat:repeat-x;
margin:0px ;
padding:0px;
}

/*1st div - to center everything */
#universe {
margin:0px auto;
padding:0px;
width:960px;}

#language{color:white;text-align:right;font-size:11px;height:20px;margin-top:5px;}
#language img {margin-left:5px;}


/* the big picture on the right */
#portrait {
margin-top:0px;
padding-top:0px;
height:570px;
background-image:url(../pictures/portrait.png);
background-repeat:no-repeat;
background-position:top right;
}

/* welcome message*/
#welcome {
float:left;
padding-top:20px;
padding-bottom:20px;
padding-left:30px;
font-size:22px;
font-family:Arial,Helvetica;
color:white;
}

/* Esko Huhdanpää , the tag - logo*/
#header {
clear:both;
height:100px;
margin-left:30px;
background-image:url(../pictures/header.png);
background-repeat:no-repeat;}

/* navigation related */
#navigation {
float:right;

padding-top:6px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
padding-bottom:8px;
padding-right:5px;
border-bottom:1px solid silver;
}
#navigation #links {background:white;}

a.navi:link {
color:black;
text-decoration:none;
padding-left:20px;
}

a.navi:hover {
color:black;
text-decoration:underline;
padding-left:20px;
}

a.navi:visited {
color:grey;
text-decoration:none;
padding-left:20px;
}

/*footer */
#footer {height:24px;border-top:1px dotted silver;font-size:10px;font-family:Arial, Helvetica, sans-serif;text-align:right;}


/* here we got seperat formation for every file*/
/* content , everything with text*/
#content {
margin-top:40px;
text-align:justify;
width:500px;
font-size:14px;
line-height:25px;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:20px;}

/*start page - the 3 pictures */
/* 1st picture on the left */
#leftpic {
position:relative;
z-index:1;
top:80px;
left:00px;
width:180px;
height:258px;}

#middlepic {
position:relative;
z-index:3;
left:150px;
top:-366px;
width:180px;
height:258px;}

#rightpic {
position:relative;
z-index:0;
left:310px;
top:-150px;
width:180px;
height:258px;}

/*gallery related things */
#gallery {
margin-top:40px;margin-bottom:20px;}

#gallerytext {clear:left;float:left;font-size:14px;text-indent:10px;color:black;font-family:Arial, Helvetica, sans-serif;width:300px;line-height:25px;margin-top:20px;}

#gallerynav {clear:left;float:left;font-size:18px;text-indent:10px;color:black;font-family:Arial, Helvetica, sans-serif;line-height:25px;margin-top:20px;}
#gallerynav a {font-size:18px;color:black;text-decoration:none;}
#gallerynav a:hover {font-size:18px;color:white;text-decoration:none;}
#galleryimg {margin:3px;background-color:#FFFFFF;padding:2px 2px 2px 2px;}
#earlyth {clear:left;float:left;width:550px;margin-bottom:3px;padding:2px 2px 0px 2px;}
#eigthteeth {clear:left;float:left;margin-bottom:3px;padding:2px 2px 0px 2px;}
#nineteeth {clear:left;float:left;margin-bottom:3px;padding:2px 2px 0px 2px}
#nextcentury {clear:left;float:left;margin-bottom:3px;padding:2px 2px 0px 2px}

/*image formating within text */
#imagewithintext {border:1px dotted silver;margin:5px;padding:2px;}

.myimage {float:left;height:180px;}
.below {background-color:white;font-size:10px;margin-bottom:10px;margin-left:5px;width:100px;}
.clearfix {clear:left;}