* { margin: 0; padding: 0; }

body {
	font-family: georgia,helvetica;
	background: #fff url(/pics/webmagazine/bg.jpg) repeat-x;
	}
	
	#webMagazine {
		position: relative;
		top: 0;
		width: 964px;
		margin: 0 auto;
		background: transparent url(/pics/webmagazine/webmagazine.gif) 255px 0px repeat-y;		
		}
		
	#header {
		position: absolute;
		top: 0;	
		width: 964px;
		height: 551px;
		background: transparent url(/pics/webmagazine/clouds.jpg) no-repeat;		
		z-index: 1;
		}	
		
	#header h1 {
		position: absolute;
		top: 82px;
		left: 83px;
		text-indent: -10000px;
		width: 86px;
		height: 132px;
		background: transparent url(/pics/webmagazine/logo-it.jpg) no-repeat;
		}	
		
		#header h1 a {  display: block; height: 132px; width: 86px; outline: none; }
		
		#header p {
			position: absolute;
			top: 25px;
			right: 5px;
			color: #fff;
			z-index: 5;
			}

			#header p a { 
				color: #fff; 
				font-weight: bold; 
				font-family: arial; 
				text-decoration: none;
				}
				
				#header p a:hover { text-decoration: underline; }
			
			
		#header fieldset {
			position: absolute;
			top: 50px;	
			right: 5px;
			width: 270px;
			border: none;
			}	
			
			#header fieldset input { position: absolute; right: 0;}
			
			#header fieldset #search {
				background: transparent url(/pics/webmagazine/input-bg.gif) no-repeat;
				width: 203px;
				padding: 4px 10px 5px 8px;
				font: normal normal 12px arial,helvetica;
				border: none;
				left: 0;
				}
		
		
	#nav {
		position: absolute;
		top: 240px;
		left: 30px;
		z-index: 3;
		}	
		
		#nav ul { list-style-type: none; }
		
		#nav ul li a {
			display: block;
			padding: 12px 0px 14px 0px;
			width: 193px;
			text-decoration: none;
			color: #fff;
			text-align: center;
			font-weight: bold;
			margin-bottom: 5px;
			height: 1%;
			cursor: pointer;
			text-indent: -10000px;
			outline: none;
			font-size: 14px;
			}
					
			#nav ul li a#tilaa { background: transparent url(/pics/webmagazine/li-tilaa-trans.png) top no-repeat; }
			#nav ul li a#tilaa:hover { background: transparent url(/pics/webmagazine/li-tilaa-trans.png) bottom no-repeat; }			

			#nav ul li a#mediakortti { background: transparent url(/pics/webmagazine/li-mediakortti-trans.png) top no-repeat; }
			#nav ul li a#mediakortti:hover { background: transparent url(/pics/webmagazine/li-mediakortti-trans.png) bottom no-repeat; }					

			#nav ul li a#yhteystiedot { background: transparent url(/pics/webmagazine/li-yhteystiedot-trans.png) top no-repeat; }
			#nav ul li a#yhteystiedot:hover { background: transparent url(/pics/webmagazine/li-yhteystiedot-trans.png) bottom no-repeat; }					
			
			#nav ul li a#ilmoitukset { background: transparent url(/pics/webmagazine/li-ilmoitukset-trans.png) top no-repeat; }
			#nav ul li a#ilmoitukset:hover { background: transparent url(/pics/webmagazine/li-ilmoitukset-trans.png) bottom no-repeat; }								

			#nav ul li a#osoitteenmuutos { background: transparent url(/pics/webmagazine/li-osoitteenmuutos-trans.png) top no-repeat; }
			#nav ul li a#osoitteenmuutos:hover { background: transparent url(/pics/webmagazine/li-osoitteenmuutos-trans.png) bottom no-repeat; }								

		#otherLinks { margin: 25px 0px 0px 10px; }
		#otherLinks img { border: none; margin: 0px 10px 8px 0px;}

#nav #fp_bannerit {margin-top: 20px; }	

	#content, #contentOld, #oldIssues {
		position: absolute;
		background: transparent url(/pics/webmagazine/magazine-new.gif) repeat-y;
		z-index: 1;
		top: 330px;
		left: 260px;
		width: 675px;
		padding: 30px 0px 0px 20px;
		min-height: 350px;
		}
		
		#contentOld, #oldIssues { 
			background: transparent url(/pics/webmagazine/magazine-old.gif) repeat-y; 
			}
		

		
		#oldIssues { top: 100px; top: 130px; z-index: 3;} 		
				
			#oldIssues p { margin: 0 0 20px 20px; }	
			#oldIssues p a.yearSelector { color: #f00; }
				
		* html #content, * html #contentOld { _height: 350px; }

		#content p, #contentOld p { 
			padding-right: 50px; 
			padding-left: 30px; 
			color: #36352F; 
			font-size: 13px;
			margin: 18px 0px;
			}

		#content h3, #contentOld h3 { padding-left: 30px; font-size: 14px;}

		#content h2, #contentOld h2, #oldIssues h2 { padding-left: 30px; font-size: 16px; padding-right: 50px; }
		
		#content h2.title, #contentOld h2.title, #oldIssues h2.title { font-size: 24px; padding-left: 0; margin-bottom: 15px; padding-right: 50px; }

		#content h4, #contentOld h4 { padding-right: 50px; }
		#content h4, #contentOld h4 { _padding-right: 0px; }
		
		#content h4#ingressi, #contentOld h4#ingressi { padding-left: 30px; width: 550px; }

		#content ul, #content ol, #contentOld ul, #contentOld ol { padding-left: 45px; }

		#oldIssues h2, #oldIssues h3  { padding-left: 20px; font-size: 14px; padding-right: 50px; }

		#fontSize {
			position: absolute;
			right: 40px;
			top: 235px;
			}
			
			#fontSize a { display: block; text-indent: -10000px; float: left; margin-left: 5px; outline: none;}
			
			#fontSize a#larger {
				background: transparent url(/pics/webmagazine/font-larger.gif) top no-repeat;
				height: 32px;
				width: 50px;
				}
				
				#fontSize a#larger:hover { background: transparent url(/pics/webmagazine/font-larger.gif) bottom no-repeat; }
				
			#fontSize #smaller {
				background: transparent url(/pics/webmagazine/font-smaller.gif) top no-repeat;
				height: 32px;
				width: 50px;
				}				

				#fontSize a#smaller:hover { background: transparent url(/pics/webmagazine/font-smaller.gif) bottom no-repeat; }

			#magazineInfoOld #fontSize a#larger { background: transparent url(/pics/webmagazine/font-old-larger.gif) bottom no-repeat; }
			#articleInfoOld #fontSize a#larger { background: transparent url(/pics/webmagazine/font-old-larger.gif) bottom no-repeat; }			

			#magazineInfoOld #fontSize a#smaller { background: transparent url(/pics/webmagazine/font-old-smaller.gif) bottom no-repeat; }
			#articleInfoOld #fontSize a#smaller { background: transparent url(/pics/webmagazine/font-old-smaller.gif) bottom no-repeat; }					

	#magazineInfo, #articleInfo, #magazineInfoOld, #articleInfoOld, #magazineInfoOldIssues, #magazineNoIssue {
		position: absolute;
		z-index: 2;
		left: 245px;
		width: 715px;
		height: 250px;
		top: 80px;
		background: transparent url(/pics/webmagazine/magazine-new.jpg) no-repeat;			
		}
		
		#articleInfo { background: transparent url(/pics/webmagazine/articleInfo.jpg) no-repeat; }
		#magazineInfoOld { background: transparent url(/pics/webmagazine/magazine-old.jpg) no-repeat; }
		#articleInfoOld { background: transparent url(/pics/webmagazine/articleOld.jpg) no-repeat; }				
		
		#magazineInfoOldIssues { 
			background: transparent url(/pics/webmagazine/magazine-archive.jpg) no-repeat; 
			height: 250px;
			}
		
		#magazineNoIssue {
			background: transparent url(/pics/webmagazine/magazine-none.jpg) repeat-y; 
			}		
		
		#sticker, #stickerOld {
			position: absolute;
			right: 0;
			top: 126px;
			height: 177px;
			width: 177px;
			z-index: 5;
			} 
			
			#stickerOld { background: transparent url(/pics/webmagazine/sticker-vanhat-trans.png) no-repeat; }
		
		#magNav ul { list-style-type: none; }

			#magNav ul li a {
				position: absolute;
				display: block;
				text-indent: -10000px;
				z-index: 3;
				cursor: pointer;
				outline: none;
				}
				
				#magNav ul li a#newestNumber {
					height: 23px;
					width: 111px;
					background: transparent url(/pics/webmagazine/magnav-newnumber.jpg) no-repeat;
					top: 20px;
					left: 80px;
					}
		
				#magNav ul li a#olderNumbers {
					height: 23px;
					width: 122px;
					background: transparent url(/pics/webmagazine/magnav-oldnumber.jpg) no-repeat;
					top: 23px;
					left: 235px;
					}
		
		
	#magazineInfo h3, #magazineInfoOld h3 { color: #fff; position: absolute; top: 105px; left: 210px; }
	#magazineInfo h4, #magazineInfoOld h4 { color: #fff; position: absolute; top: 150px; left: 210px; width: 450px;  }		
	#magazineInfo img, #magazineInfoOld img { position: absolute; top: 85px; left: 79px; }	
	
	#articleInfo h3, #articleInfoOld h3 { color: #fff; position: absolute; top: 100px; left: 70px; }
	#articleInfo h4, #articleInfoOld h4 { color: #fff; position: absolute; top: 140px; left: 70px; width: 600px; }	
		
		
		
		
	div.article {
		width: 300px;
		margin: 0 0 5px 15px;
		float: left;
		height: 1%;
		position: relative;
		min-height: 120px;
		display: inline;
		}	
		
		div.article h4 { border-left: solid 10px #F18000; background: #676767; padding: 4px 0px 4px 10px;}
		
		div.article h4 a { 
			color: #fff; 
			text-decoration: none; 
			display: block; 
			font-size: 14px;
			font-family: arial;
			text-transform: uppercase;
			}
			
			div.article h4 a:hover { background: #808080; }
		
		
		div.article h5 { padding: 5px 5px 5px 20px; margin-right: 20px; font-size: 18px; font-family: arial, sans-serif; font-weight: normal;}

		#content div.article p, #contentOld div.article p { 
			margin: 3px 0px 3px 20px; 
			padding: 0;
			height: 1%;			
			}
			
			* html #content div.article p { padding-left: 10px; }
			* html #contentOld div.article p { padding-left: 10px; }			
		
		#content div.article p a, #contentOld div.article p a { 
			color: #000;
			text-decoration: none;
			}		

		#content div.article p a:hover, #contentOld div.article p a:hover { text-decoration: underline;	}		

		.magazine {
			width: 192px;
			height: 241px;
			float: left;
			background: transparent url(/pics/webmagazine/archive-magazine.gif) no-repeat; 
			margin: 0 0 20px 20px;
			position: relative;
			display: inline;
			}

			.magazine img { position: absolute; left: 47px; top: 35px; }
			.magazine p { position: absolute; top: 208px; left: -20px;font-size: 12px; width: 192px; text-align: center; }
			.magazine p a { color: #fff; text-decoration: none; display: block; padding: 5px;}

		
	#footer, #footerOld {
		height: 50px;
		position: absolute;
		width: 100%;
		left: 0;
		bottom: -50px;
		background: transparent url(/pics/webmagazine/footer.gif) top right no-repeat;
		z-index: 4;
		}	
		
		#footerOld {
			background: transparent url(/pics/webmagazine/footer-old.gif) top right no-repeat;
			}
		
		
		
	fieldset { border: none; }		
	label { display: block; }
	
	.kainalo { 
		padding: 10px; 
		margin: 10px 35px 10px 10px; 
		float: right; 
		width: 250px; 
		border-top: solid 1px #000; 
		border-bottom: solid 1px #000; 
		}	
		
	#content .kainalo p, #contentOld .kainalo p  { margin: 8px 0px; padding: 0; }	

	blockquote { margin-left: 20px; }
		
/* ------------------------------------------------------------- */		
/* -------- SIFR ----------------------------------------------- */
/* ------------------------------------------------------------- */


/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash #magazineInfo h3, .sIFR-hasFlash #magazineInfoOld h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 32px;
	}

.sIFR-hasFlash #magazineInfo h4, .sIFR-hasFlash #magazineInfoOld h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 22px;
	}

.sIFR-hasFlash #articleInfo h3, .sIFR-hasFlash #articleInfoOld h3{
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 32px;
	}

.sIFR-hasFlash #articleInfo h4, .sIFR-hasFlash #articleInfoOld h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 20px;
	}

		
.sIFR-hasFlash div.article h4 {
	visibility: hidden;
	font-size: 25px;
	line-height: 18px;
	}
	
.sIFR-hasFlash .magazine p {
	visibility: hidden;
	font-size: 12px;
	}				
		
.sIFR-hasFlash h4#ingressi { visibility: hidden; }