@charset "utf-8";
/*
======================================================
Tämä tyylitiedosto on suunniteltu MUSA ry:n kotisivuja
varten lokakuussa 2012.

Tyylitiedoston kanssa tulee käyttää myös
alisivujen omaa tyylitiedostoa MUSAsub.css,
muuten koko sivusto ei toimi oikein.

Tämä tiedosto vaikuttaa pääsivun lisäksi jokaisen
alasivuston etusivuilla.

Suunnittelussa on pyritty ottamaan huomioon
uusimmat ohjelmointikielet (HTML5 ja CSS3)
sekä tuki seuraaville selaimille:
- Internet Explorer 9 (IE9)
- Google Chrome
- Mozilla, Opera ja Safari

Suunnittelija:
Juha Reinikka, reinikka.juha@gmail.com
======================================================

BODY
Sivujen taustan määrittely.
Fonttien tyypin ja värin yleismäärittely.
Skaalautuvuuden px -> em asetus font-size parametrilla,
jolloin kehykset ja fontit skaalautuvat käyttäjän
näytön ominaisuuksien mukaan.
Tausta näkyy, mikäli käyttäjän näytön tarkkuus
on yli 1000 x 800 px.
ÄLÄ KOSKE !
*/
/*
html { 
	background: url(kuvat/bannerit/sinitaivas.png) #98B3E8 no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='kuvat/bannerit/sinitaivas.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='kuvat/bannerit/sinitaivas.png', sizingMethod='scale')";
}*/
/*
#bg {
	position:fixed; 
	top:-50%; 
	left:-50%; 
	width:200%; 
	height:200%;
}
#bg img {
	position:absolute; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	margin:auto; 
	min-width:50%;
	min-height:50%;
}*/
body {
	margin: 0;
	padding: 0;
	border:none;	
	font-family:Calibri, Arial, Helvetica, sans-serif;
	color:#000;
	font-size:62.5%; /* Määrittelee 1em=10px */
	/*background-image:  url(kuvat/bannerit/sinitaivas.png);*/
	background: url(kuvat/bannerit/sinitaivas2.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    /*background-repeat: no-repeat;*/
}

/*
CONTAINER 
Sivujen uloin kehys, määrittelee näytettävän sivun koon.
Lähtökohtana dynaamisesti skaalautuva sivusto, 
pohjana 1200px x 800px kokoinen näyttö.
Sivu asemoituu keskelle näyttöä, ilman ylä/alareunoja.
ÄLÄ KOSKE !
*/
.container {
	width: 100em; /* 1000px*/
	max-width: 100%; /* näytöt alle 1000px */
	height:100%; /*koko näyttöala pystysuunnassa*/
	margin-right: auto;
	margin-left: auto;
	margin-top:1em;
	background:none;
}

/* 
HEADER
Sivun yläosan kehys. Kehyksessä esitetään yhdistyksen logo,
navigaationapit sekä facebook -linkki.
Tämän kautta vaihdetaan yläosan taustakuva sesongin mukaan
(background-image). Kuvan koko tulee olla noin 1280 x 260 px
(kuvasta näytetään 1000 x 225 px).
Kehyksessä pyöristetyt kulmat ja kevyt varjostus.

VAIN TAUSTAKUVAN VAIHTO!
*/
.header {
	width: 100em;
	max-width: 100%;
	height: 22.5em;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	border-radius: 2em;
	-moz-border-radius: 2em;
    -webkit-border-radius: 2em;
	/*box-shadow: 0.6em 0.6em 1em #CCC;	*/
	/* oikealle, alas, varjon leveys, varjon väri */
	background-image: url(kuvat/bannerit/kesatausta.png);
	/*background-image: url(kuvat/bannerit/kevattausta.png);*/
	/*background-image: url(kuvat/bannerit/talvitausta.png);*/
	background-repeat: no-repeat;
	background-position: center;
	margin-right: auto;
	margin-left: auto;
	z-index:5;
}

/* 
BUTTONS
Kehykseen on sijoitettu navigointinapit ja se
sijaitsee HEADER -kehyksen alareunassa. Kehys on
kelluva. ÄLÄ KOSKE ! 
*/
.buttons {
	width: 100em;
	max-width:100%;
	float:left;
	height: 3.5em;
	display: table-cell;
	vertical-align:middle;
	text-align:center;
	z-index: 10;
	margin-left: auto;/*keskitys kaiken varalta*/
    margin-right: auto;/*keskitys kaiken varalta*/
	margin-top:-3.5em;
	background:none;
}

/*
CONTENT
Pääkehys, jossa esitetään käytännössä kaikki
informaatio. Alueella maksimikoko ilman mitään
reunuksia tai efektejä. BODY -elementissä
määritetty tausta saattaa näkyä täältä.
ÄLÄ KOSKE !
*/
.content {
	width:100em;
	max-width:100%;
	height:55em; 
	/*oletuskorkeus 490px, voi jättää lopuksi pois*/
	margin-top: 0;
	margin-bottom: 0;
	margin-right: auto;/*keskitys kaiken varalta*/	
	margin-left: auto;/*keskitys kaiken varalta*/
	border:none;
	background:none;
	z-index:0; /*taustalla*/
}

/* 
MAINFRAME
Aktiivinen esityskehys, joka on sijoitettu täyttämään
CONTENT -kehys ja mahdollistamaan alasivujen esittämisen
ao kehyksessä. Tämän IFRAME:n muut asetukset ovat sivun lähdekoodissa.
ÄLÄ KOSKE ! 
*/
#mainframe {
  width:100%; 
  height:100%;  
  border:none;
  background:none;
}

/*
FOOTER
Sivun alareunan pieni kehys, joka seuraa CONTENT -kehystä.
Tähän voidaan sijoittaa hyvin vähän toissijaista tietoa, koska
alue yleensä menee alareunasta näytön ulkopuolelle.
Tärkeä ominaisuus on kelluvien kehysten nollausominaisuus.
Ulkoasu noudattelee HEADERia.

ÄLÄ KOSKE !
*/
.footer {
	width: 100em;
	max-width: 100%;
	margin-right: auto;/*keskitys kaiken varalta*/	
	margin-left: auto;/*keskitys kaiken varalta*/
	display: table-cell;
	height: 4em;
	background-color: #F0F0F0;
	border-radius: 1em;
	-moz-border-radius: 1em;
    -webkit-border-radius: 1em;
	text-align: center;
	padding: 0;
	vertical-align: middle;	
	clear:both;
}
/* 
FACEBOOK
Facebookin tykkää -alue, joka sijaitsee FOOTER -kehyksen
sisällä, sen oikeassa reunassa.
ÄLÄ KOSKE !
*/
.fb-like {
	width:29em;
	height:3em;
	float:right;
	display:block;
	margin-top:0.2em;
	margin-right:1em;
	z-index: 20;
	position: relative;
}
/*
MUSALINKKI
Linkkinappi MUSAN Facebook-sivulle, joka sijaitsee FOOTER -kehyksen
sisällä, sen vasemmassa reunassa.
ÄLÄ KOSKE !
*/
.fb-musa {
	width:29em;
	height:3em;
	float:left;
	display: table-cell;
	vertical-align:middle;
	font-size: 1.2em;
	/*background-color:#FFF;*/
	margin-top:0.2em;
	margin-left:1em;
	z-index: 20;
	position: relative;
}



/* 
MUSAINFO 
Kehys on käytössä vain etusivulla (aloitus.html).
Kehyksessä perusasettelut kuten UUTISET ja TAPAHTUMAT -kehyksissä.
*/
.musanet_oikea {
	width: 45%;
	height: 12em;
	float:right;
	background-color:#FFF;
	margin-top:0.4em;
	margin-right:0em;
	padding:1em;
	border-radius: 2em;
	-moz-border-radius: 2em;
    -webkit-border-radius: 2em;
}
/* 
UUTISET
Tämä on ensiksi avautuvan sivun vasemmanpuoleisin kehys, mihin päivitetään ajankohtaiset uutiset 
ÄLÄ KOSKE */

.uutiset {
	width:50%;
	height:51em;
	float:left;
	background-color:#FFF;
	margin-left:0em;
	margin-top:0.4em;
	padding:1em;
	border-radius: 2em;
	-moz-border-radius: 2em;
    -webkit-border-radius: 2em;
}
/* Tämä on etusivun iframe -kehys, missä uutisia.html esitetään. */
#uutisia {
  width:100%; 
  height:100%;
  border:none;
  background-color:#FFF; 
}

/* 
TAPAHTUMAT
Tämä on etusivun oikean puolen alempi kehys, missä esitetäänajankohtaiset tapahtumat
ÄLÄ KOSKE  */
.tapahtumat {
	width:45%;
	height:14em;
	float:right;
	background-color:#FFF;
	margin-top:1em;
	margin-right:0em;
	padding:1em;
	border-radius: 2em;
	-moz-border-radius: 2em;
    -webkit-border-radius: 2em;
	/*box-shadow: 0.6em 0.6em 1em #CCC;	*/	
	/* oikealle, alas, varjon leveys, varjon väri */
}
/* Tämä on etusivun iframe -kehys. Kehyksessä avautuu tapahtumia.html sivu, jota päivitetään. */
#tapahtumia {
  width:100%; 
  height:100%; 
  border:none;
  background-color:#FFF;
}
/*Tämä on etusivun oikean puolen alin kehys, missä on nettilehti
ÄLÄ KOSKE  */
.nettilehti {
	width:45%;
	height:19em;
	float:right;
	text-align:center;
	/*background-color:#FFF;*/
	margin-top:1em;
	margin-right:0em;
	padding:1em;
	border-radius:2em;
	-moz-border-radius: 2em;
    -webkit-border-radius: 2em;
	/*box-shadow: 0.6em 0.6em 1em #CCC;	*/	
	/* oikealle, alas, varjon leveys, varjon väri */
}
/* Tämä on etusivun iframe -kehys. Kehyksessä avautuu tapahtumia.html sivu, jota päivitetään. */
#nettilehti {
  width:100%; 
  height:100%; 
  border:none;
  background-color:#FFF;
}

.mainos {
	width:47%;
	height:18em;
	float:right;
	/*background-color:#6CF;*/
	margin-top:1em;
	margin-right:0em;
}
/*
SUBPAGE
Oikean reunan esitysosa*/
.subpage {
	width: 75%;
	height: 51em;
	background-color:#FFF;
	margin-right:0em;
	margin-bottom:1em;
	margin-top:0.4em;
	padding:1em;
	border-radius: 2em;
	-moz-border-radius: 2em;
    -webkit-border-radius: 2em;
	float: right;
	clear: right;
	position: relative;
}
#subframe {
	width:100%; 
    height:100%;  
    border:none;
}
/* Vasemman reunan hakemistoikkuna */
.sidebar1 {
	float: left;
	width: 20%;
	height: 51em;
	background-color:#F0F0F0;
	margin-left:0em;
	margin-bottom:1em;
	margin-top:0.4em;
	padding:1em;
	border-radius: 2em;
	-moz-border-radius: 2em;
    -webkit-border-radius: 2em;
}


/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
li {
	font:Calibri;
	font-size:1.6em;
	color:#000;
	margin-left:25px;
}
/* 
TEKSTIEN TYYLIT
Käytetään samoja tyylejä kaikilla sivuilla. Nämä määrittelyt oltava samoja molemmissa CSS-tiedostoissa kaiken varalta. 
*/
.h1 {
	margin-top: 0; 
	margin-bottom:0.1em;
	font-size: 2.8em;
	border-bottom-color: #000;
	border-bottom-width: 0.15em;
	border-bottom-style: solid;
}
hr {
	color:#CCC;
	background-color:#CCC;
	height: 0.15em;
}
.h2 {
	margin-top: 0;
	margin-bottom:0.1em;
	font-size: 2.4em;
}
.h3 {
	margin-top: 0;
	margin-bottom:0.1em;
	font-size: 2.2em;
}
.h4 {
	margin-top: 0;
	margin-bottom:0.1em;
	font-size: 2em;
	font-weight:bold;
}

.p {
	margin-top:0.4em;
	margin-bottom:0.2em;
	font-size: 1.6em;
	orphans:2;
}
.t {
	margin-top:0em;
	margin-bottom:0em;
	font-size: 1.2em;
}
.teaser {
	margin-top:0.2em;
	margin-bottom:0.2em;
	font-size: 1.8em;
	font-style:italic;
	font-weight:bold;
}
.linkkiotsikko {
	margin-top:0.4em;
	margin-bottom:0.4em;
	font-size:2em;
	font-weight:bold;
	border-bottom-color: #000;
	border-bottom-width: 0.2em;
	border-bottom-style: solid;
}

/*
TEKSTILINKIT
Tässä asetetaan tekstiin kuuluvien linkkien muotoilut
*/
a img {	border: none;}

a:link, a:visited  {
	color:#00F; /*Tekstilinkin väri - sininen*/
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	font-weight: bold;
}
.content ul, .content ol { 
	padding: 0 15px 15px 20px;
}
/*
SISÄLTÖLINKIT
Tässä asetetaan vasemman palstan linkkien muotoilut
*/
ul.nav {
	list-style: none;
	margin-bottom: 0.4em;
}
ul.nav li {
	margin-bottom: 0.4em;
	margin-left:0;
}

ul.nav a, ul.nav a:visited {
	font-size: 1em;
	display: inline-block;
	text-decoration:underline;
	color: #06F;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
	color:#06F;
	font-weight:bold;
}